@zohofinance/commerce 1.0.0 → 1.1.0

package/ts-dist/mocks/init-theme/.cursor/commands/create-theme.md

@@ -0,0 +1,77 @@
+---
+description: Scaffold a new theme folder with all required files and structure
+alwaysApply: false
+---
+
+# /create-theme
+
+Scaffold a new theme from this theme's existing files.
+
+## Usage
+```
+/create-theme <theme_name>
+```
+
+---
+
+## Step 1 — Validate
+- If `` already exists → STOP and warn the user, do not overwrite
+- If theme_name is blank → ask the user to provide a name
+
+## Step 2 — Find Reference Theme
+- Use this theme's current layouts, snippets, settings, and config as the copy template
+- Do not look outside this theme directory for other themes
+
+## Step 3 — Create Folder Structure
+Run terminal commands to create:
+
+```
+
+  assets/
+  i18n/
+    en.json           ← copy from reference theme, keep structure, clear values
+    en.schema.json    ← copy from reference theme, keep structure, clear values
+  layouts/
+    theme.liquid      ← copy from reference theme as-is
+    accounts.liquid   ← copy from reference theme as-is
+    sitemap.liquid    ← copy from reference theme as-is
+  sections/           ← empty folder
+  snippets/           ← copy all snippets from reference theme as-is
+                         (icons, search-bar, header-sidebar, etc. are shared infrastructure)
+  pages/
+    404.json
+    blog.json
+    cart.json
+    categories.json
+    checkout.json
+    collection.json
+    index.json
+    orders.json
+    page.json
+    payment.json
+    product.json
+    sitemap.json
+  settings/
+    schema.json       ← copy from reference theme as-is
+    theme.json        ← copy from reference theme as-is
+  favicon.ico
+  package.json        ← copy from reference theme, update name field to <theme_name>
+  postcss.config.js   ← copy from reference theme as-is
+  project.json        ← copy from reference theme, update name field to <theme_name>
+  tailwind.config.js  ← copy from reference theme as-is
+```
+
+## Step 4 — Note About Tokens
+Do NOT create figma-tokens.md. Tokens are read directly from:
+```
+figma-variables.json
+```
+This file is exported by the designer from Figma and placed here manually.
+Remind the developer: ask your designer for figma-variables.json before running /build-section.
+
+## Step 5 — Confirm
+Report back:
+- ✅ Theme folder created at ``
+- ✅ Snippets copied from this theme's existing `snippets/`
+- ⚠️ Ask designer for `figma-variables.json` → place at `figma-variables.json` → run `/extract-tokens` to verify
+- ⚠️ Sections folder is empty — use `/audit-page` to plan each page before building

package/ts-dist/mocks/init-theme/.cursor/commands/extract-tokens.md

@@ -0,0 +1,43 @@
+---
+description: Validate the Figma variables JSON exists for a theme
+alwaysApply: false
+---
+
+# /extract-tokens
+
+Verify the designer-exported `figma-variables.json` is in place.
+This is the only setup step needed before building sections.
+
+## Usage
+```
+/extract-tokens <theme_name>
+```
+
+---
+
+## Step 1 — Check JSON Exists
+
+Look for `figma-variables.json`.
+
+If missing, STOP and tell the developer:
+```
+❌ Missing: figma-variables.json
+
+Ask your designer to:
+  Figma → Variables panel → ··· menu → Export variables → JSON
+  Place the file at: figma-variables.json
+
+Re-run /extract-tokens once the file is in place.
+```
+
+## Step 2 — Confirm
+
+If the file exists, confirm:
+```
+✅ figma-variables.json found at figma-variables.json
+→ All build/compare/qa commands will read this file directly for token values.
+→ When designer updates tokens: re-export JSON, replace the file, done.
+→ Next step: run /audit-page <theme_name> <page_name>
+```
+
+No conversion needed. Commands read the JSON directly.

package/ts-dist/mocks/init-theme/.cursor/commands/fix-section.md

@@ -0,0 +1,92 @@
+---
+description: Fix a bug in an existing section with minimal blast radius
+alwaysApply: false
+---
+
+# /fix-section
+
+Fix a specific bug. Diagnose root cause first, then fix only what is broken.
+
+## Usage
+```
+/fix-section <theme_name> <section_name>
+```
+Describe: what you see (broken) vs what you expect (correct).
+Mention if it happens always or only in certain conditions.
+
+---
+
+## Visual bugs — run compare-section first
+
+If the bug is **visual** (spacing, alignment, colour, typography, borders, CTA size, selected state), prefer running **`/compare-section <theme_name> <section_name>`** with the correct desktop and mobile Figma URLs first. Use the mismatch report to apply fixes (reply ALL or specific issue numbers). Then run `/qa-section` to verify. Use fix-section for diagnosis when the issue is logic, schema, or not clearly covered by the Figma design.
+
+---
+
+## Pre-flight
+Open section file + all related snippets referenced via `{% render %}`.
+
+---
+
+## Stage 1 — Diagnose
+Check each category:
+
+### Schema / Settings mismatch
+- `section.settings.X` referenced but missing from schema?
+- url field rendered as `{{ field }}` instead of `{{ field.handle }}`?
+- select field rendered as `{{ field }}` instead of `{{ field.value }}`?
+- image field rendered as `{{ field }}` instead of `{{ field.url }}`?
+- Wrong field type causing wrong render?
+
+### Liquid Logic
+- Loop missing empty state?
+- Wrong condition operator?
+- Variable assigned after it's used?
+- `{% render %}` passing wrong variable name?
+
+### HTML / CSS
+- Tailwind class missing responsive prefix (`md:`, `lg:`)?
+- Flex/grid container missing alignment classes?
+- `hidden` conflicting with display class?
+- z-index missing on overlay/dropdown?
+
+### Page JSON
+- Section type mismatched with filename?
+- Setting value in wrong format? (e.g. `"value"` instead of `{ "display_name": "...", "value": "..." }`)
+- Block missing from `block_order`?
+
+---
+
+## Stage 2 — State Diagnosis
+Before editing:
+```
+BUG DIAGNOSIS — <section_name>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ROOT CAUSE: [one clear sentence]
+LOCATION: Line X — [code snippet]
+FIX: [what will change]
+BLAST RADIUS: [files affected]
+UNRELATED ISSUES NOTICED: [list — not fixing now]
+```
+Ask: "Proceed?" before editing.
+
+---
+
+## Stage 3 — Apply Fix
+- Change ONLY what is in the diagnosis
+- No refactoring surrounding code
+- No improving unrelated areas
+- Add comment on fixed line: `{{-- fixed: [reason] --}}`
+
+---
+
+## Stage 4 — Blast Radius Check
+If schema field type changed → update all Liquid references + page JSON default format.
+If Liquid logic changed → verify all branches still valid.
+If HTML changed → verify responsive behaviour intact.
+
+---
+
+## Output
+Report: root cause, lines changed, files affected, untouched confirmation.
+List other noticed issues separately — do not fix them in this pass.
+→ NEXT: `/qa-section <theme_name> <section_name>`

package/ts-dist/mocks/init-theme/.cursor/commands/impact.md

@@ -0,0 +1,50 @@
+---
+description: List sections that use a snippet (impact of changing it)
+alwaysApply: false
+---
+
+# /impact
+
+Find every section (and optionally snippet) that references a given snippet via `{% render 'snippet_name' %}`. Use before changing a snippet so you know which sections to re-run QA or compare on.
+
+## Usage
+```
+/impact <theme_name> <snippet_name>
+```
+
+`snippet_name` is the name without `.liquid` (e.g. `product-card` for `product-card.liquid`).
+
+---
+
+## Steps
+
+1. Search `` for `{% render '<snippet_name>' %}` or `{% render '<snippet_name>.liquid' %}` (and common variants, e.g. with quotes).
+2. Include:
+   - Sections: `sections/*.liquid` that render the snippet (directly or via another snippet).
+   - Snippets: `snippets/*.liquid` that render the snippet (so the user knows nested usage).
+3. If the snippet is rendered only by another snippet, list that snippet and then any sections that render that one (transitive closure).
+
+---
+
+## Output
+
+```
+IMPACT — changing snippet "<snippet_name>" (<theme_name>)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Sections that use this snippet (directly or via another snippet):
+  - sections/product-details.liquid
+  - sections/collection-list.liquid
+  - sections/product-quick-view.liquid
+
+Snippets that use this snippet:
+  - snippets/product-card.liquid (used by sections above)
+
+NEXT: After changing snippets/<snippet_name>.liquid, run:
+  /qa-section <theme_name> product-details
+  /qa-section <theme_name> collection-list
+  /qa-section <theme_name> product-quick-view
+  (and /compare-section if design may have changed)
+```
+
+Keep the list accurate: only sections/snippets that actually reference the given snippet name.

package/ts-dist/mocks/init-theme/.cursor/commands/qa-a11y.md

@@ -0,0 +1,66 @@
+---
+description: Audit a section or page for accessibility (a11y) issues
+alwaysApply: false
+---
+
+# /qa-a11y
+
+Run an accessibility audit on a specific section or page. Use alongside `/qa-section` once the schema and basic implementation are stable.
+
+## Usage
+```
+/qa-a11y <theme_name> <target>
+```
+
+- **theme_name**: This theme's folder name (e.g. `my_theme`)
+- **target**: Section file (without extension) or page handle
+
+---
+
+## Checklist
+
+### Semantics & Structure
+- [ ] Exactly one visible `<h1>` per page; heading levels are not skipped
+- [ ] Interactive UI uses semantic elements (`<button>`, `<a href>`, form controls) instead of clickable `<div>`/`<span>`
+- [ ] Landmarks (`<header>`, `<main>`, `<nav>`, `<footer>`) are present where appropriate
+
+### Keyboard & Focus
+- [ ] All controls are reachable and operable with keyboard only (Tab, Shift+Tab, Enter, Space)
+- [ ] Focus indicator is clearly visible on every interactive element (no `outline: none` without replacement)
+- [ ] No keyboard traps; modals/menus manage and restore focus correctly
+
+### Images & Media
+- [ ] All `<img>` elements have meaningful `alt` text or `alt=""` when decorative
+- [ ] Icon-only buttons/links have accessible names (text, `aria-label`, or `aria-labelledby`)
+- [ ] Auto-playing or looping motion is subtle and has a way to pause/stop when prominent
+
+### Forms & Errors
+- [ ] Every input/textarea/select has an associated `<label>` or equivalent ARIA labeling
+- [ ] Error messages are programmatically tied to fields (e.g. `aria-describedby`)
+- [ ] Required fields are indicated with more than just color
+
+### Color & Contrast
+- [ ] Text and essential UI elements meet WCAG AA contrast
+- [ ] Color is never the only way information is conveyed (use text, icons, patterns)
+
+
+---
+
+## Output Format
+```
+A11Y REPORT — <target>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+SEMANTICS   ✅ PASS / ❌ FAIL
+KEYBOARD    ✅ PASS / ❌ FAIL
+IMAGES      ✅ PASS / ❌ FAIL
+FORMS       ✅ PASS / ❌ FAIL
+CONTRAST    ✅ PASS / ❌ FAIL
+
+ISSUES:
+❌ [file:line] description of issue → fix applied / needs your decision
+
+AUTO-FIXED: [list]
+NEEDS YOUR DECISION: [list]
+```
+
+Auto-fix unambiguous issues directly in the code (e.g., missing `alt` on obvious decorative images, focus outline removal). Flag anything that changes visible copy, semantics, or design intent.

package/ts-dist/mocks/init-theme/.cursor/commands/qa-i18n.md

@@ -0,0 +1,110 @@
+---
+description: Audit translation key coverage between schemas and i18n files
+alwaysApply: false
+---
+
+# /qa-i18n
+
+Check that every `t:` key referenced in section schemas and theme settings schema actually exists in `en.schema.json`, and flag orphaned i18n keys not referenced anywhere.
+
+## Usage
+```
+/qa-i18n <theme_name>
+```
+
+---
+
+## Pre-flight
+
+Read these files:
+
+1. `i18n/en.schema.json` — the translation key source of truth.
+2. `settings/schema.json` — theme-level settings (keys under `settings_schema.*`).
+3. All `sections/*.liquid` files — section schemas (keys under `sections.*`).
+
+---
+
+## Checks
+
+### 1. Theme Settings Keys (settings_schema)
+For every `t:settings_schema.*` string in `settings/schema.json`:
+- Extract the path after `t:` (e.g. `settings_schema.theme.settings.primary_color.label`).
+- Navigate `en.schema.json` using dot-delimited path.
+- If the key does not exist → flag as **MISSING**.
+
+### 2. Section Schema Keys (sections)
+For every `.liquid` file in `sections/`:
+- Extract the `{% schema %}` JSON block.
+- Find all `t:sections.*` strings in `name`, `label`, `content`, `default`, `display_name`, `info`, `placeholder` fields — including inside `settings`, `blocks`, and `presets`.
+- For each `t:` key:
+  - Extract the path after `t:`.
+  - Verify it exists in `en.schema.json`.
+  - If missing → flag as **MISSING**.
+
+### 3. Section Group Keys
+For each `*-group.json` in `sections/`:
+- Find all `t:` strings in `name` fields.
+- Verify each exists in `en.schema.json`.
+
+### 4. Orphan Detection (warnings)
+For every key path in `en.schema.json` under `settings_schema` and `sections`:
+- Build the full `t:` path (e.g. `t:settings_schema.theme.settings.primary_color.label`).
+- Search for that exact string across `settings/schema.json` and all `sections/*.liquid` files.
+- If the key is never referenced → flag as **ORPHAN** (warning only).
+
+### 5. Hardcoded English Detection
+In all section `{% schema %}` blocks and `settings/schema.json`:
+- Flag any `label`, `content`, `name`, `info`, or `placeholder` value that is a plain English string (does NOT start with `t:`).
+- Exception: `default` values for `text` type MAY be `t:` keys or empty strings — both are acceptable.
+- Exception: `default` for `checkbox` (boolean), `range` (number), `color` (hex string) are not strings and should be skipped.
+
+---
+
+## Output
+
+```
+QA I18N — <theme_name>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+THEME SETTINGS KEYS   ✅ / ❌
+  Referenced: <n>  |  Missing: <n>
+
+SECTION SCHEMA KEYS   ✅ / ❌
+  Referenced: <n>  |  Missing: <n>
+
+SECTION GROUP KEYS    ✅ / ❌
+  Referenced: <n>  |  Missing: <n>
+
+ORPHAN KEYS           ✅ / ⚠️
+  Total i18n keys: <n>  |  Orphaned: <n>
+
+HARDCODED ENGLISH     ✅ / ⚠️
+  Instances: <n>
+
+MISSING KEYS:
+  ❌ t:settings_schema.theme.settings.new_field.label
+     → used in: settings/schema.json
+  ❌ t:sections.hero_banner.settings.cta_text.label
+     → used in: sections/hero-banner.liquid
+
+ORPHAN KEYS (not referenced anywhere):
+  ⚠️ settings_schema.theme.settings.old_removed_field.label
+  ⚠️ sections.deprecated_section.name
+
+HARDCODED ENGLISH:
+  ⚠️ sections/my-section.liquid schema: "label": "My Button Text"
+     → should be: "label": "t:sections.my_section.settings.my_button.label"
+
+SUMMARY
+  Errors: <n>  |  Warnings: <n>
+  RESULT: PASS / FAIL
+```
+
+---
+
+## Notes
+
+- Missing keys are errors — the UI will show raw `t:` paths instead of translated text.
+- Orphan keys are warnings — they waste space but don't break anything. Clean up at your discretion.
+- Hardcoded English is a warning — it works but bypasses the i18n system.
+- This command is read-only. To add missing keys, edit `en.schema.json` directly or use `/add-theme-setting` / `/add-field` which handle i18n automatically.

package/ts-dist/mocks/init-theme/.cursor/commands/qa-layout.md

@@ -0,0 +1,127 @@
+---
+description: Audit all layout files in a theme for correctness, asset loading, and parity
+alwaysApply: false
+---
+
+# /qa-layout
+
+Audit every layout file in a theme. Checks required HTML elements, asset loading, section group references, snippet references, script patterns, and parity between `theme.liquid` and `accounts.liquid`.
+
+## Usage
+```
+/qa-layout <theme_name>
+```
+
+---
+
+## Pre-flight
+
+1. List all `.liquid` files in `layouts/`.
+2. Read each layout file.
+3. Read `snippets/` directory listing (for snippet existence checks).
+4. Read `sections/` directory listing (for group JSON existence checks).
+
+---
+
+## Checks (per layout file)
+
+### 1. Required HTML Structure
+- `<!doctype html>` or `<!DOCTYPE html>` present.
+- `<html` tag with `lang` attribute.
+- `<head>` and `</head>` present.
+- `<body>` and `</body>` present.
+- `<meta charset="utf-8">` or equivalent in `<head>`.
+- `<meta name="viewport"` with `width=device-width` in `<head>`.
+- `<title>` tag in `<head>`.
+
+**Exception:** `sitemap.liquid` is XML-only and should NOT have HTML structure. Skip HTML checks for it.
+
+### 2. Content Placeholder
+- `theme.liquid`: must contain `{{ content_for_layout }}`.
+- `accounts.liquid`: must contain `{{ content_for_layout }}`.
+- `sitemap.liquid`: must contain `{{ content_for_layout }}` (XML body).
+
+### 3. Asset Loading
+For `theme.liquid` and `accounts.liquid`:
+- `style.css` loaded via `{{ "style.css" | asset_url }}` (as `<link>` or `<style>`).
+- `theme-settings` snippet rendered via `{% render 'theme-settings' %}` OR `theme-settings.css` loaded as a stylesheet.
+- `components-library.iife.js` loaded via `{{ "components-library.iife.js" | asset_url }}`.
+- All `<script>` tags use `defer`, `async`, or `type="module"` — no render-blocking scripts.
+
+### 4. Section Group References
+For every `{% sections '...' %}` tag found:
+- Extract the group name (e.g. `header-group` from `{% sections 'header-group' %}`).
+- Verify `sections/<group_name>.json` exists.
+- If the file does not exist → flag as error.
+
+### 5. Snippet References
+For every `{% render '...' %}` tag found:
+- Extract the snippet name.
+- Verify `snippets/<snippet_name>.liquid` exists.
+- If the file does not exist → flag as error.
+
+### 6. Liquid Conventions
+- No `{% include %}` tags (must use `{% render %}`).
+- User-facing output escaped: `{{ value | escape }}` where applicable.
+- No hardcoded English strings in HTML (should use `{{ "key" | t }}` or `t:` in schema).
+
+### 7. Image Loading
+- Images in the header/above-fold area use `loading="eager"`.
+- Favicon link present: `<link rel="shortcut icon"` or `<link rel="icon"`.
+
+### 8. Layout Parity (theme.liquid vs accounts.liquid)
+Compare `theme.liquid` and `accounts.liquid` for shared chrome:
+- Both should load `style.css`.
+- Both should render `theme-settings` snippet (or load `theme-settings.css`).
+- Both should load `components-library.iife.js`.
+- If `theme.liquid` loads a global script (e.g. `analytics.js`, `view-transitions.js`), check if `accounts.liquid` should also load it.
+- Flag differences as warnings — some may be intentional (e.g. accounts layout may not need view transitions).
+
+---
+
+## Output
+
+```
+QA LAYOUT — <theme_name>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+theme.liquid
+  HTML STRUCTURE      ✅ / ❌
+  CONTENT PLACEHOLDER ✅ / ❌
+  ASSET LOADING       ✅ / ⚠️ / ❌
+  SECTION GROUPS      ✅ / ❌
+  SNIPPET REFS        ✅ / ❌
+  LIQUID CONVENTIONS  ✅ / ⚠️
+  IMAGE LOADING       ✅ / ⚠️
+
+accounts.liquid
+  HTML STRUCTURE      ✅ / ❌
+  CONTENT PLACEHOLDER ✅ / ❌
+  ASSET LOADING       ✅ / ⚠️ / ❌
+  SECTION GROUPS      ✅ / ❌ / N/A
+  SNIPPET REFS        ✅ / ❌
+  LIQUID CONVENTIONS  ✅ / ⚠️
+  IMAGE LOADING       ✅ / ⚠️
+
+sitemap.liquid
+  CONTENT PLACEHOLDER ✅ / ❌
+  (HTML checks skipped — XML layout)
+
+LAYOUT PARITY        ✅ / ⚠️
+
+ISSUES:
+  ❌ [file] [check] description
+  ⚠️ [file] [check] description
+
+SUMMARY: PASS / FAIL
+  Layouts checked: <n>
+  Errors: <n>  |  Warnings: <n>
+```
+
+---
+
+## Notes
+
+- This command is read-only — it does not modify layout files.
+- Use this after `/create-theme` to verify the scaffold, or before release to catch regressions.
+- Layout changes are manual. If issues are found, fix them directly in the layout file.

package/ts-dist/mocks/init-theme/.cursor/commands/qa-performance.md

@@ -0,0 +1,72 @@
+---
+description: Audit a section or page for performance risks (LCP/CLS/JS/CSS/Liquid)
+alwaysApply: false
+---
+
+# /qa-performance
+
+Run a performance-focused audit on a specific section or page. Use alongside `/qa-section` once the schema and basic implementation are stable.
+
+## Usage
+```
+/qa-performance <theme_name> <target>
+```
+
+- **theme_name**: This theme's folder name (e.g. `my_theme`)
+- **target**: Section file (without extension) or page handle
+
+---
+
+## Checklist
+
+### Images & Media (LCP / CLS)
+- [ ] Every `<img>` has `width` and `height` to prevent layout shift (CLS)
+- [ ] Above-the-fold / LCP candidates use `loading="eager"`; non-critical images use `loading="lazy"`
+- [ ] Image src uses the image object URL (`{{ field.url }}` / `{{ section.settings.image.url }}`), not legacy filters like `| img_url`
+- [ ] Flag oversized image dimensions vs rendered size (recommend smaller assets / responsive approach)
+- [ ] Avoid background images for critical content images when possible (prefer `<img>` for browser optimization)
+- [ ] Prominent auto-playing/looping motion has a way to pause/stop; motion is subtle
+
+### CSS (render cost / maintainability)
+- [ ] Static styling is primarily Tailwind; `{% style %}` is used only for dynamic values, variables, or stateful selectors
+- [ ] `{% style %}` rules are scoped to `#section-{{ section.id }}`
+- [ ] No expensive selectors without need (deep descendant chains, broad `*`, heavy attribute selectors)
+- [ ] Animations avoid layout properties (`width/height/top/left/margin`); prefer `transform`/`opacity`
+
+### JavaScript (main-thread / TTI)
+- [ ] JS is included only when the section needs it (no unused scripts on initial load)
+- [ ] Scripts use `defer` and do not block rendering
+- [ ] Avoid many per-item listeners in loops; use delegation where reasonable
+- [ ] Avoid layout thrashing (batch reads, then writes)
+- [ ] Respects `prefers-reduced-motion` where animation is present
+
+### Liquid / HTML (server + DOM cost)
+- [ ] Loops have empty states (`{% else %}`) or guards (`size > 0`)
+- [ ] Heavy/repeated work is pre-assigned in a top `{% liquid %}` block instead of repeated inside loops
+- [ ] DOM is not excessively nested; avoid unnecessary wrapper elements
+- [ ] Repeated SVG/icon markup is deduplicated via snippet render when reused
+
+### Fonts & Text
+- [ ] No per-section custom font loading; rely on theme-level font loading
+- [ ] Avoid icon fonts for small icon sets; prefer inline SVG/snippets
+
+---
+
+## Output Format
+```
+PERF REPORT — <target>
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+IMAGES      ✅ PASS / ⚠️ REVIEW / ❌ FAIL
+CSS         ✅ PASS / ⚠️ REVIEW / ❌ FAIL
+JS          ✅ PASS / ⚠️ REVIEW / ❌ FAIL
+LIQUID/DOM  ✅ PASS / ⚠️ REVIEW / ❌ FAIL
+FONTS/TEXT  ✅ PASS / ⚠️ REVIEW / ❌ FAIL
+
+ISSUES:
+❌ [file:line] description of issue → fix applied / needs your decision
+
+AUTO-FIXED: [list]
+NEEDS YOUR DECISION: [list]
+```
+
+Auto-fix unambiguous issues directly in the code (e.g., missing `loading`/dimensions on images when values are obvious, switching non-critical images to lazy, adding `defer` to a clearly section-scoped script tag). Flag anything that changes visual design, asset choices, or loading strategy intent.