fix: correct tojson|safe usage in templates and update validator

- Remove |safe from |tojson in HTML attributes (x-data) - quotes must
  become " for browsers to parse correctly
- Update LANG-002 and LANG-003 architecture rules to document correct
  |tojson usage patterns:
  - HTML attributes: |tojson (no |safe)
  - Script blocks: |tojson|safe
- Fix validator to warn when |tojson|safe is used in x-data (breaks
  HTML attribute parsing)
- Improve code quality across services, APIs, and tests

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.architecture-rules/language.yaml

@@ -48,12 +48,17 @@ language_rules:
             ...
         }">
 
-      RIGHT (function with tojson|safe):
-        <div x-data="languageSelector('{{ lang }}', {{ langs|tojson|safe }})">
+      RIGHT (function with tojson - NO safe in HTML attributes):
+        <div x-data="languageSelector('{{ lang }}', {{ langs|tojson }})">
+
+      NOTE: Use |tojson (without |safe) in HTML attributes so quotes
+      become &quot; which the browser correctly decodes. Using |safe
+      would output raw quotes that break the attribute parsing.
 
       The languageSelector function must be defined in:
       - static/shop/js/shop-layout.js (for storefront)
       - static/vendor/js/init-alpine.js (for vendor dashboard)
+      - static/admin/js/init-alpine.js (for admin dashboard)
     pattern:
       file_pattern: "app/templates/**/*.html"
       anti_patterns:
@@ -64,28 +69,33 @@ language_rules:
         - "partials/header.html"
 
   - id: "LANG-003"
-    name: "Use tojson|safe for Python lists in JavaScript"
+    name: "Use tojson correctly for Python lists in templates"
     severity: "error"
     description: |
-      When passing Python lists to JavaScript in templates, always use tojson|safe.
-      - tojson converts Python list to JSON
-      - safe prevents HTML escaping of quotes
+      When passing Python lists to JavaScript, use tojson appropriately:
 
-      WRONG (raw output):
+      IN HTML ATTRIBUTES (x-data, data-*, etc.):
+        Use |tojson WITHOUT |safe - quotes become &quot; which browsers decode:
+        <div x-data="languageSelector('fr', {{ langs|tojson }})">
+        <!-- Renders: x-data="languageSelector('fr', [&quot;fr&quot;, &quot;de&quot;])" -->
+
+      IN <script> BLOCKS:
+        Use |tojson|safe - raw JSON is valid inside script tags:
+        <script>
+          const languages = {{ vendor.storefront_languages|tojson|safe }};
+        </script>
+
+      WRONG (raw output - Python syntax not valid JS):
         languages: {{ vendor.storefront_languages }}
-        <!-- Outputs: ['fr', 'de'] - Python syntax -->
+        <!-- Outputs: ['fr', 'de'] - single quotes invalid in JSON -->
 
-      WRONG (tojson without safe):
-        languages: {{ vendor.storefront_languages|tojson }}
-        <!-- May escape quotes to &quot; -->
-
-      RIGHT:
-        languages: {{ vendor.storefront_languages|tojson|safe }}
-        <!-- Outputs: ["fr", "de"] - Valid JSON -->
+      WRONG (|safe in HTML attributes - breaks attribute parsing):
+        <div x-data="init({{ data|tojson|safe }})">
+        <!-- Raw quotes break the attribute -->
     pattern:
       file_pattern: "app/templates/**/*.html"
       required_with_jinja_array:
-        - "|tojson|safe"
+        - "|tojson"
 
   - id: "LANG-004"
     name: "Language selector function must be exported to window"