← Back
← Back
# Widget Gallery — every widget, every tool
**Date**: 2026-08-10
**Author**: fv-gallery-mavis (id 8)
**Source**: `avidtech6/fv-module-gallery` branch `feat/fvcms-vendor-v1.2.0` (commit 8110f69)
**Audience**: operator G, on phone
## How the widget gallery works
The gallery is split into 2 sections:
- **`cms-widgets/`** — the **20 widgets** the operator drops on a page (heading, button, image, etc.)
- **`cms-widgets/tools/`** — the **5 tool atoms** the inspector uses to build form fields (color picker, image selector, etc.)
Each one lives in its own folder, with the same 5-file shape (per FvW v8 §11.2):
<name>/
├── module.json ← constitutional doc (id, name, version, schema)
├── module-meta.json ← provenance (canonical_source, tags, tier)
├── preview.png ← 1x1 placeholder for now
├── recipe-book/
│ └── recipe.md ← "what this is" doc
└── src/
└── widget.js ← the code (or tool.js for tools)
**The inspector** (in `fv-cms-vendored/app-fragments/editor-inspector/`) reads each widget's `schema` block in `src/widget.js` and auto-builds a form using the 24 controls in `fv-cms-vendored/app-fragments/editor-inspector/controls/` (text, number, color, switch, dimension, slider, etc.). 24 controls total. The form has Settings, Style, Advanced tabs.
**Live**: the inspector is on the Oscar site at `oscar-static-cms-v0-8-0.freshvibeapps.com`. Click `{ }` to open the dev panel, click a widget badge to see the inspector.
## WIDGETS (20) — the things you put on a page
| Icon | Widget | Module ID | Tier | Fields | Description |
|---|---|---|---|---|---|
| ⏷ | **Accordion** | M-accordion | stable | 7 (items, itemType, fields, title, content, defaultOpen, icon) | A vertical list of collapsible panels. One or many open at once. |
| 📰 | **Blog Post Card** | _(stub)_ | experimental | 0 | (no description — stub) |
| ☷ | **Blog Post List** | _(stub)_ | experimental | 0 | (no description — stub) |
| ⤴ | **Breadcrumb** | M-breadcrumb | stable | 5 (items, itemType, fields, label, href) | A navigation trail showing the current location in the site hierarchy. |
| ⏵ | **Button** | M-button | stable | 1 (text) | A clickable button. Text + link + style variant. Aliased to CTA under the hood. |
| ↔ | **Carousel** | M-carousel | stable | 8 (items, itemType, fields, title, subtitle, image, link, description) | A horizontal scrolling list of items (cards, posts, people, etc.). |
| ✉ | **Contact Form** | M-contact-form | stable | 6 (fields, itemType, fields, name, label, type) | A lead-capture form. Fields + submit button. Backend target configurable. |
| ➤ | **Call to Action** | M-cta | stable | 1 (text) | A call-to-action button. Text + link + style. |
| ◰ | **CTA Box** | M-cta-box | stable | 1 (title) | A boxed call-to-action with a heading, body text, and a button. |
| 🅷 | **Heading** | M-heading | stable | 1 (text) | A text heading (h1–h6). Renders as a semantic heading element. |
| ☰ | **Icon List** | M-icon-list | stable | 6 (items, itemType, fields, icon, label, href) | A vertical list of items, each with an icon, label, and link. |
| 🖼 | **Image** | M-image | stable | 1 (src) | A standalone image. Source + alt + size + alignment. |
| ⓘ | **Info Box** | M-info-box | stable | 1 (icon) | A boxed callout with title, body, icon, and optional link. |
| 🏘 | **Listing Grid** | _(stub)_ | experimental | 0 | (no description — stub) |
| ☰ | **Menu** | M-menu | stable | 6 (items, itemType, fields, label, href, openInNewTab) | A simple vertical or horizontal list of links. |
| ¶ | **Paragraph** | M-paragraph | stable | 1 (text) | A block of body text. Plain text or simple HTML allowed. |
| 🍳 | **Recipe Detail** | _(stub)_ | experimental | 0 | (no description — stub) |
| 🔗 | **Social Icons** | M-social-icons | stable | 4 (platforms, itemType, fields, platform) | A row or column of social media icons that link to profiles. |
| ❝ | **Testimonial** | M-testimonial | stable | 1 (quote) | A pull-quote with attribution. Avatar optional. |
| ▶ | **Video** | M-video | stable | 1 (source) | An embedded video player (YouTube, Vimeo, or direct file). |
**16 stable** (have real schema, real description) + **4 experimental stubs** (blog-post-card, blog-post-list, listing-grid, recipe-detail — no description, no fields, no source).
**Missing entirely** (1): `theme-presets/` folder exists but has no `module.json` — needs a recipe before FES can build it (per `fes-vendor-mandate.md §4 Q1`).
## TOOLS (5) — the form-field atoms the inspector uses
| Name | Tier | What it does |
|---|---|---|
| **Color Picker** | stable | World-class color selection. Eyedropper, recent colors, skin-aware palette, opacity slider, hex/RGB/HSL input. Gold standards surveyed: Figma, Linear, Vercel, Stripe. |
| **Favicon Picker** | experimental | (stub — no description) |
| **Font Picker** | experimental | (stub — no description) |
| **Gradient Picker** | experimental | (stub — no description, depends on color-picker) |
| **Image Selector** | stable | World-class image selection. 3 tabs: Library / Upload / URL. Used by every widget that needs an image. Alt text required for accessibility. |
Tools are different from widgets — they're **mount-based atoms** (a function call: `mountColorPicker(mountPoint, options)`), not schema-based forms. They render INTO the inspector's form, they don't go on the page directly.
## Inspector — what it looks like
The v2 inspector renders a 3-tab form (Settings / Style / Advanced) on the right side of the page. Each field in the widget's `schema` block becomes a control:
- `type: 'string'` → text input
- `type: 'select'` → dropdown
- `type: 'number'` → number input
- `type: 'color'` → color picker (uses the color-picker tool)
- `type: 'boolean'` → switch
- `array fields with itemType` → repeater (each item has its own sub-form)
**Screenshots captured 2026-08-10** (in `/workspace/.work/oscars-screenshots/`):
- `01-home.png` — Oscar home page
- `02-dev-panel-open.png` — after clicking `{ }` (dev panel opens)
- `03-widget-clicked.png` — after clicking a widget badge (inspector panel renders)
- `04-full-page.png` — full home page
**Inspector is on the Oscar live site** at `oscar-static-cms-v0-8-0.freshvibeapps.com` — click `{ }` in the corner, then click any element to see the inspector.
## What's missing (per the plan a508 inventory)
- **3 experimental widgets** (blog-post-list, listing-grid, recipe-detail) + **1 stub** (blog-post-card) → need src/widget.js written so they have a schema
- **3 experimental tools** (favicon-picker, font-picker, gradient-picker) → need src/tool.js written
- **theme-presets/** → no module.json, needs a recipe first
- **7 missing tools** referenced by widget deps (text-input, url-input, select-input, toggle-input, color-palette, typography-control, spacing-control) → not yet built, blocks 4 experimental widgets from going stable
- **16 placeholder preview.png files** (1x1) → need to be replaced with live preview.html (per plan a508 Step 10)
- **Recipe Book completeness**: all 20 widgets are at 2/11 — need 9 more files each to be FvW v8 §11 compliant