# Theme Preset Schema — v0.6.0

A theme preset is a **bundle of design tokens** (colors, gradients, fonts) that an operator can apply to a site in one click. It's a gallery entry (discoverable via `/api/agent/cms-widgets`) but it isn't a "widget" — it's a `theme-bundle` atom type.

## Discovery

Theme presets live at `/opt/vibecoder-bridge/cms-widgets/theme-presets/{slug}/` and are auto-included by `cms-widgets-registry.cjs` (any dir with `kind: "theme-bundle"` in module.json).

`GET /api/agent/cms-widgets?kind=theme-bundle` returns the list. The existing endpoint already supports `?kind=` filtering (it was added in v0.4.x as a generic filter).

## Module shape

```json
{
  "id": "coral-sunset",
  "kind": "theme-bundle",
  "name": "Coral Sunset",
  "version": "0.1.0",
  "atom_type": "theme-bundle",
  "provenance": { ... standard provenance ... },
  "evolution": { ... standard ... },
  "dependencies": {
    "tools": ["color-picker", "gradient-picker", "font-picker"],
    "widgets": [],
    "runtime": "fv-cms-runtime@^0.5.0",
    "fvw": "^8.3.0"
  },
  "interface": {
    "inputs": [
      {
        "name": "applyTo",
        "type": "string",
        "description": "Selector to apply (e.g. 'page', '.e-section-1', '#hero')"
      }
    ],
    "outputs": [
      {
        "name": "tokens",
        "type": "object",
        "description": "The applied CSS variables as {name: value}"
      },
      {
        "name": "css",
        "type": "string",
        "description": "Ready-to-inject CSS string"
      }
    ]
  },
  "value": {
    "colors": {
      "background": "#FDF8F3",
      "surface":    "#FFFFFF",
      "text":       "#2D1810",
      "muted":      "#8B7355",
      "primary":    "#FF6B4A",
      "accent":     "#F7931E",
      "border":     "#F4E8DD"
    },
    "gradient": {
      "type": "linear",
      "angle": 135,
      "stops": [
        { "pos": 0,   "color": "#FF6B4A" },
        { "pos": 50,  "color": "#F7931E" },
        { "pos": 100, "color": "#FDF8F3" }
      ]
    },
    "fonts": {
      "heading": { "family": "Inter", "weight": 700, "size": 32 },
      "body":    { "family": "Inter", "weight": 400, "size": 16 },
      "code":    { "family": "JetBrains Mono", "weight": 400, "size": 14 }
    }
  },
  "template": "<div class='fv-theme-preview' style='...'>...</div>",
  "icon": "🌅",
  "tags": ["theme", "warm", "coral", "orange", "light"],
  "tier_meta": { ... }
}
```

## 5 default presets (v0.6.0)

1. **Coral Sunset** — warm, friendly, light. Best for lifestyle, food, hospitality.
2. **Forest Mist** — cool, calming, muted greens. Best for nature, wellness, sustainability.
3. **Mono** — pure black/white/gray. Best for tech, docs, portfolios.
4. **Neon Studio** — saturated, electric, dark. Best for design studios, gaming, music.
5. **Linen** — soft, textured, neutral. Best for fashion, editorial, slow-living.

## How an operator uses it

1. Edge Tools panel → Theme tile
2. Sees a list of preset chips (icon + name): 🌅 Coral Sunset, 🌲 Forest Mist, ⬛ Mono, ⚡ Neon Studio, 🤍 Linen
3. Clicks one → applies ALL tokens to the page (or selected section) live
4. Adjusts individual swatches (color-picker) / gradient (gradient-picker) / font (font-picker) on top
5. Optionally saves the modified version as a new preset