# v0.6.0 — World-class Media + Theme Pickers **Owner**: VibeCoder thread (412100071272671) **Status**: Draft spec, awaiting operator sign-off **Date**: 2026-07-29 **Target**: `avidtech6/freshvibe-cms` v0.6.0 on `fes-v2-world-class` + bridge widget atom updates --- ## What v0.5.0 unlocked The Edge Tools composer is now data-driven. To add new picker tools we just: 1. Define the tool atom in the gallery (interface, dependencies, render contract) 2. Add a tile to the Edge Tools panel (or any UI surface) 3. The tool atom renders, talks to its dependencies, and emits the value **No edge-panel.js release needed for new tools.** New tool = new gallery entry + new tile. --- ## The 5 tool atoms already in the gallery (cms-widgets/tools/) | Atom | Interface input | Output | Used by | |---|---|---|---| | `color-picker` | `value: string`, `skinTokens: string[]` | `value: string` | Background, text, accent, border colors | | `gradient-picker` | `value: { type, angle, stops[] }` | `value: object` + `css: string` | Section backgrounds, hero gradients | | `image-selector` | `value: { src, alt, width, height }`, `libraryEndpoint: string` | `value: object` | All image-bearing widgets | | `font-picker` | `value: string` (font name) | `value: string` + `css: string` (link to Google Fonts) | Heading + body font selection | | `favicon-picker` | `value: { type, value }` | `value: object` | Site favicon (single, on ``) | --- ## v0.6.0 = 2 new "tool tiles" in Edge Tools panel ### Tile 1: Media (uses image-selector) **Trigger**: clicking the Media tile in the Edge Tools dock. **UX (world-class standard — Stripe + Notion + Linear):** ``` ┌──────────────────────────────────────────────────────┐ │ ← Media Library [×] │ ├──────────────────────────────────────────────────────┤ │ [Search images...] 🔍 | [Upload ↑] | [URL] │ ← search, upload, OR paste URL ├──────────────────────────────────────────────────────┤ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ← thumbnails, hover │ │ │img │ │img │ │img │ │img │ shows alt + size │ │ └────┘ └────┘ └────┘ └────┘ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ + │ │img │ │img │ │img │ ← "+" tile = upload │ │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ Recent | All | Blog Covers | Avatars │ ← tabs at top └──────────────────────────────────────────────────────┘ ``` **No-typing guarantee**: every interaction is click/drag. Search field is optional for operators who know what they want. "URL" tab is for explicit anchors only. **Skins-aware**: tokens `var(--fv-image-grid-gap)`, `var(--fv-image-grid-radius)`, `var(--fv-image-grid-hover-ring)`. **Selection emit**: clicking a thumbnail fires `image-selector.change` with `{ src, alt, width, height }`. The calling widget (e.g. background image on a section) updates live. **Drag-and-drop upload** (Stripe Dashboard style): drag image files from desktop onto the panel → uploads to `libraryEndpoint` (which VibeCoder provides). ### Tile 2: Theme (uses color-picker + gradient-picker + font-picker) **Trigger**: clicking the Theme tile in the Edge Tools dock. **UX (world-class standard — Elementor + Webflow + Tailwind UI):** ``` ┌──────────────────────────────────────────────────────┐ │ ← Theme [×] │ ├──────────────────────────────────────────────────────┤ │ Presets [Coral Sunset ▾] [Forest Mist] [Mono] │ ← preset templates │ [Neon Studio] [Linen] [+ New] │ ├──────────────────────────────────────────────────────┤ │ │ │ COLORS ────────────────────────────────────────── │ │ Background [▢ #F8F4ED] Text [▢ #1A1A1A]│ ← clickable swatches │ Primary [▢ #FF6B4A] Border [▢ #E5DDD3]│ │ Muted [▢ #8B8680] │ │ │ │ GRADIENT ──────────────────────────────────────── │ │ [Linear · 45°] │ │ [▮▮▮▮▮▮▮▮▮▮▮] 3 stops, drag positions │ │ #FF6B4A ──── #F8F4ED ──── #1A1A1A │ │ [+ stop] [reverse] [angle: 45° ▾] │ │ │ │ FONTS ─────────────────────────────────────────── │ │ Heading [Inter ▼] Body [Inter ▼] │ │ │ │ [Apply to Page] [Save as Preset] │ └──────────────────────────────────────────────────────┘ ``` **No-typing guarantee**: every color is a swatch, every gradient is a visual editor, every font is a dropdown with previews. **Skins-aware**: tokens `var(--fv-color-primary)`, `var(--fv-color-bg)`, etc. Each color swatch shows the resolved value. **Live preview**: clicking a color swatch updates the page in real time (with an "Apply" or auto-apply toggle — defaults to auto-apply for instant feedback, like Webflow). **Save as Preset**: writes the theme to a new gallery entry, so future sites can pick it from the preset list. --- ## Implementation plan ### Phase 1: Tool atom UI components (gallery-side, ~DONE) **All 5 atoms already have full render code** from a prior round: | Atom | Lines | Bytes | Mount fn | |---|---|---|---| | color-picker | 188 | 6523 | `mountColorPicker(mountPoint, options)` | | gradient-picker | 136 | 5442 | `mountGradientPicker(mountPoint, options)` | | image-selector | 204 | 7556 | `mountImageSelector(mountPoint, options)` | | font-picker | 132 | 5637 | `mountFontPicker(mountPoint, options)` | | favicon-picker | 168 | 6416 | `mountFaviconPicker(mountPoint, options)` | Total: 31.5KB, well under 12KB×5=60KB budget. All served via `/api/agent/cms-widgets/tools/:id` endpoint. Operators `