Z1 Thumbnail Kit: AI Prompt for Adding Editable Templates Without Breaking Core Features

You are modifying an EXISTING app called [APP_NAME, default: Z1 Thumbnail Kit]. Do NOT change the core look/feel. Preserve existing templates, theme presets, typography system (Chakra Petch + Space Grotesk + global scale), token-based themes, and PNG export behavior. Implement the [NUMBER_OF_NEW_TEMPLATES, default: 9] new templates listed in [TEMPLATE_SPECS] below and make them selectable + editable in the left sidebar.

========================
NON-NEGOTIABLE BRAND RULES
========================

- NO hardcoded colors in template components. Use ONLY theme tokens:

  theme.bg, theme.surface, theme.text, theme.muted, theme.border, theme.accent (and theme.panel if already present).

- No template-level textures/filters. (Any global finish/texture system stays global only.)

- Typography is global-only. Templates must consume existing TypographySettings + helpers (fontFamily(), scaledPx()).

- Export must match preview for all templates (same export DOM node / wrapper).

========================
WHAT TO ADD
========================

Add [NUMBER_OF_NEW_TEMPLATES] new templates as specified in [TEMPLATE_SPECS]. Do NOT add any other templates.

========================
IMPLEMENTATION TASKS
========================

1) TEMPLATE COMPONENTS

Create [NUMBER_OF_NEW_TEMPLATES] new TSX template components under your existing templates folder (match your project structure, e.g. src/components/templates/ or src/templates/).

Each template must follow the SAME props shape used by your existing templates:

- theme: Theme (token object)
- typography: TypographySettings
- content: template-specific content object
- brand mark/logo prop if your templates already support it (keep consistent)

2) TEMPLATE REGISTRY / SELECTOR

Add the [NUMBER_OF_NEW_TEMPLATES] templates to the existing template registry and selector UI:

- Keep the original templates unchanged.
- New selector labels should match the names in [TEMPLATE_SPECS] exactly.
- Provide default content per template as specified.

3) CONTENT EDITOR (MINIMAL UI)

Add controls for each new template content object:

- Use existing input system (single-line input) unless a field is clearly long; then use your existing multiline/textarea component if present.
- Keep it minimal: 2–6 fields per template as specified.
- Ensure state persists the same way as other templates (localStorage if already used).

========================
[TEMPLATE_SPECS]
========================

[Paste the exact specs for each template here, e.g.:
26) Mistake → Fix

Fields: title, mistakeTitle, mistakeBody, fixTitle, fixBody

Defaults:
- title: “COMMON MISTAKE”
... (include full details for all templates)
]