{
  "schema": "ripple.manifest/v1",
  "version": "0.2.0",
  "generatedAt": "2026-05-11T12:12:48.309Z",
  "spec": {
    "uiField": "ui",
    "stateField": "state",
    "version": "1.0",
    "aliasesNotAllowed": [
      "root",
      "tree",
      "view",
      "body",
      "content"
    ],
    "description": "A Ripple spec is a JSON object with two top-level fields that matter for rendering: `ui` (the node tree the renderer mounts — REQUIRED) and `state` (the StateManager seed — required when any node uses `bind` or reads `{state.*}`). The renderable tree field is named `ui` exactly — never `root`, `tree`, `view`, `body`, or `content`. Specs that use those aliases will not render.",
    "example": {
      "version": "1.0",
      "state": {
        "draft": "",
        "items": []
      },
      "ui": {
        "type": "flex",
        "props": {
          "direction": "column",
          "gap": "12px"
        },
        "children": [
          {
            "type": "input",
            "bind": "draft",
            "props": {
              "placeholder": "Add an item"
            }
          }
        ]
      }
    }
  },
  "actions": {
    "set": {
      "description": "Assign `value` to the state path `target`. The most common action — use it to update any state field.",
      "shape": {
        "action": "\"set\"",
        "target": "string — state path, e.g. \"modalOpen\" or \"user.name\"",
        "value?": "any — value to assign. Supports {state.x} expressions."
      },
      "example": {
        "action": "set",
        "target": "modalOpen",
        "value": false
      }
    },
    "toggle": {
      "description": "Flip a boolean target, or toggle membership of `value` in an array target.",
      "shape": {
        "action": "\"toggle\"",
        "target": "string — state path. If boolean, value is inverted; if array, `value` is added or removed.",
        "value?": "any — when target is an array, the membership toggle key."
      },
      "example": {
        "action": "toggle",
        "target": "expanded"
      }
    },
    "push": {
      "description": "Append `value` to the array at `target`. Creates the array if undefined.",
      "shape": {
        "action": "\"push\"",
        "target": "string — state path to an array.",
        "value?": "any — item to append."
      },
      "example": {
        "action": "push",
        "target": "todos",
        "value": {
          "id": 1,
          "text": "New task",
          "done": false
        }
      }
    },
    "remove": {
      "description": "Remove an item from the array at `target` — by `value` (equality match) or by `index`.",
      "shape": {
        "action": "\"remove\"",
        "target": "string — state path to an array.",
        "value?": "any — first matching item is removed.",
        "index?": "number — remove by position instead."
      },
      "example": {
        "action": "remove",
        "target": "todos",
        "index": 0
      }
    },
    "open": {
      "description": "Set the target state path to `true`. Idiomatic shortcut for opening a modal or dialog whose `value` is bound to that path.",
      "shape": {
        "action": "\"open\"",
        "target": "string — state path that controls the modal/dialog open state."
      },
      "example": {
        "action": "open",
        "target": "confirmDeleteOpen"
      }
    },
    "navigate": {
      "description": "Host-delegated URL change. The host's `onEvent` callback performs the navigation.",
      "shape": {
        "action": "\"navigate\"",
        "url": "string — destination URL. Supports {state.x} interpolation."
      },
      "example": {
        "action": "navigate",
        "url": "/projects/{state.selectedId}"
      }
    },
    "toast": {
      "description": "Show a toast notification. Use after `set` / `api` to give the user feedback.",
      "shape": {
        "action": "\"toast\"",
        "message": "string — toast body. Supports {state.x} interpolation.",
        "variant?": "\"default\" | \"success\" | \"error\" | \"warning\" | \"info\""
      },
      "example": {
        "action": "toast",
        "message": "Saved",
        "variant": "success"
      }
    },
    "emit": {
      "description": "Emit a custom event up to the host. Use to hand control back to the host pipeline (e.g. \"submit complete, take it from here\").",
      "shape": {
        "action": "\"emit\"",
        "target?": "string — event name.",
        "value?": "any — event payload."
      },
      "example": {
        "action": "emit",
        "target": "submitted",
        "value": "{state.formData}"
      }
    },
    "pin": {
      "description": "Host-delegated bookmark/pin operation. The host implements the persistence.",
      "shape": {
        "action": "\"pin\"",
        "target?": "string — what is being pinned.",
        "value?": "any — payload describing the pinned item."
      },
      "example": {
        "action": "pin",
        "target": "project",
        "value": "{state.projectId}"
      }
    },
    "unpin": {
      "description": "Inverse of `pin`. Host-delegated bookmark removal.",
      "shape": {
        "action": "\"unpin\"",
        "target?": "string — what is being unpinned.",
        "value?": "any"
      },
      "example": {
        "action": "unpin",
        "target": "project",
        "value": "{state.projectId}"
      }
    },
    "api": {
      "description": "Host-delegated HTTP call. The host performs the request; the response is written to `response_key` (if given) and `on_success` runs. On failure `on_error` runs and the error is exposed at state path `_flow_error`.",
      "shape": {
        "action": "\"api\"",
        "url": "string — endpoint. Supports {state.x} interpolation.",
        "method?": "\"GET\" | \"POST\" | \"PUT\" | \"DELETE\" | \"PATCH\" — default GET",
        "body?": "object — request body. Values support {state.x} expressions.",
        "headers?": "Record<string, string>",
        "response_key?": "string — state path to write the response into.",
        "on_success?": "EventHandler[] — runs after a successful response.",
        "on_error?": "EventHandler[] — runs on host-reported failure."
      },
      "example": {
        "action": "api",
        "method": "POST",
        "url": "/api/todos",
        "body": {
          "text": "{state.draft}"
        },
        "response_key": "newTodo",
        "on_success": [
          {
            "action": "push",
            "target": "todos",
            "value": "{state.newTodo}"
          },
          {
            "action": "set",
            "target": "draft",
            "value": ""
          },
          {
            "action": "toast",
            "message": "Added",
            "variant": "success"
          }
        ],
        "on_error": [
          {
            "action": "toast",
            "message": "Could not save",
            "variant": "error"
          }
        ]
      }
    },
    "flow": {
      "description": "Run a list of handlers sequentially. If any step throws `FlowAbortError` (e.g. failed `validate`), `on_error` runs.",
      "shape": {
        "action": "\"flow\"",
        "steps": "EventHandler[] — sequential handlers.",
        "on_error?": "EventHandler[] — runs on FlowAbortError."
      },
      "example": {
        "action": "flow",
        "steps": [
          {
            "action": "set",
            "target": "saving",
            "value": true
          },
          {
            "action": "delay",
            "ms": 400
          },
          {
            "action": "set",
            "target": "saving",
            "value": false
          },
          {
            "action": "toast",
            "message": "Done",
            "variant": "success"
          }
        ]
      }
    },
    "branch": {
      "description": "Evaluate `if` and run `then` or `else`. The condition is a Ripple expression string (e.g. \"state.count > 5\").",
      "shape": {
        "action": "\"branch\"",
        "if": "string — Ripple expression evaluated as boolean.",
        "then": "EventHandler[] — runs when truthy.",
        "else?": "EventHandler[] — runs when falsy."
      },
      "example": {
        "action": "branch",
        "if": "state.user.role == \"admin\"",
        "then": [
          {
            "action": "navigate",
            "url": "/admin"
          }
        ],
        "else": [
          {
            "action": "toast",
            "message": "Admins only",
            "variant": "warning"
          }
        ]
      }
    },
    "confirm": {
      "description": "Show the ConfirmDialog, suspend the flow, and run `on_confirm` or `on_cancel` based on the user's choice.",
      "shape": {
        "action": "\"confirm\"",
        "message": "string — body shown in the dialog.",
        "title?": "string",
        "confirm_label?": "string — default \"Confirm\".",
        "cancel_label?": "string — default \"Cancel\".",
        "on_confirm": "EventHandler[]",
        "on_cancel?": "EventHandler[]"
      },
      "example": {
        "action": "confirm",
        "title": "Delete project?",
        "message": "This cannot be undone.",
        "confirm_label": "Delete",
        "on_confirm": [
          {
            "action": "api",
            "method": "DELETE",
            "url": "/api/projects/{state.projectId}"
          },
          {
            "action": "navigate",
            "url": "/projects"
          }
        ]
      }
    },
    "validate": {
      "description": "If `condition` is falsy, show a toast and abort the enclosing flow (FlowAbortError). Silent on pass.",
      "shape": {
        "action": "\"validate\"",
        "condition": "string — Ripple expression. Falsy aborts the flow.",
        "message": "string — toast shown on failure.",
        "variant?": "\"default\" | \"success\" | \"error\" | \"warning\" | \"info\""
      },
      "example": {
        "action": "validate",
        "condition": "state.email != \"\"",
        "message": "Email required",
        "variant": "error"
      }
    },
    "delay": {
      "description": "Pause the flow for the given number of milliseconds. Useful for optimistic-UI demos and animations.",
      "shape": {
        "action": "\"delay\"",
        "ms": "number — non-negative."
      },
      "example": {
        "action": "delay",
        "ms": 300
      }
    },
    "invoke": {
      "description": "Call a registered widget method by widget id. Used for imperative actions on widgets that expose them (e.g. focusing an input).",
      "shape": {
        "action": "\"invoke\"",
        "target": "string — widget id.",
        "method": "string — registered method name.",
        "args?": "any[]"
      },
      "example": {
        "action": "invoke",
        "target": "searchInput",
        "method": "focus"
      }
    }
  },
  "widgets": [
    {
      "type": "accordion",
      "category": "layout",
      "description": "Expandable accordion with single or multiple open items. Use for FAQs and progressive disclosure.",
      "props": {
        "multiple": {
          "type": "boolean",
          "required": false,
          "description": "Allow multiple items open at once. Default false."
        },
        "value": {
          "type": "string | string[]",
          "required": false,
          "description": "Currently open item value(s)."
        },
        "items": {
          "type": "Array<{ value: string; title: string; content: string }>",
          "required": true,
          "description": "Accordion items."
        }
      },
      "example": {
        "type": "accordion",
        "props": {
          "multiple": false,
          "items": [
            {
              "value": "shipping",
              "title": "How long does shipping take?",
              "content": "Most orders arrive within 3-5 business days."
            },
            {
              "value": "returns",
              "title": "What is the return policy?",
              "content": "Free returns within 30 days of purchase."
            }
          ]
        }
      }
    },
    {
      "type": "alert",
      "category": "overlay",
      "description": "Alert box with title, description, and visual variant (info/success/warning/destructive).",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Alert title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Alert description text."
        },
        "variant": {
          "type": "\"info\" | \"success\" | \"warning\" | \"destructive\" | \"default\"",
          "required": false,
          "description": "Visual variant with icon and color."
        },
        "hideIcon": {
          "type": "boolean",
          "required": false,
          "description": "Hide the leading icon."
        }
      },
      "example": {
        "type": "alert",
        "props": {
          "title": "System update",
          "description": "Your application will restart in 5 minutes.",
          "variant": "info"
        }
      }
    },
    {
      "type": "analyst-bar",
      "category": "research",
      "description": "Analyst recommendation bar — Buy/Hold/Sell distribution with consensus label and target price.",
      "props": {
        "buy": {
          "type": "number",
          "required": true,
          "description": "Buy/Overweight ratings count."
        },
        "hold": {
          "type": "number",
          "required": true,
          "description": "Hold ratings count."
        },
        "sell": {
          "type": "number",
          "required": true,
          "description": "Sell/Underweight ratings count."
        },
        "consensus": {
          "type": "string",
          "required": false,
          "description": "Consensus label (e.g. \"Strong Buy\")."
        },
        "target": {
          "type": "string",
          "required": false,
          "description": "Average target price."
        }
      },
      "example": {
        "type": "analyst-bar",
        "props": {
          "buy": 18,
          "hold": 8,
          "sell": 2,
          "consensus": "Strong Buy",
          "target": "$210.50"
        }
      }
    },
    {
      "type": "api-key",
      "category": "vertical",
      "description": "Secret key display with mask/reveal toggle, copy button, and optional rotate action.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Field label."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Secret value to display."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Helper text under the label."
        },
        "hideReveal": {
          "type": "boolean",
          "required": false,
          "description": "Hide reveal toggle."
        },
        "hideRotate": {
          "type": "boolean",
          "required": false,
          "description": "Hide rotate button."
        },
        "revealLast": {
          "type": "number",
          "required": false,
          "description": "Trailing chars visible when masked. Default 4."
        }
      },
      "example": {
        "type": "api-key",
        "props": {
          "label": "Live API Key",
          "description": "Use in production.",
          "value": "sk_live_9x8y7z6a5b4c3d2e1f0g9h8i7j6k5l4",
          "revealLast": 4
        }
      }
    },
    {
      "type": "app-shell",
      "category": "layout",
      "description": "App layout container with optional topbar and sidebar slots plus main content. Use with sidebar.",
      "props": {},
      "example": {
        "type": "app-shell",
        "props": {},
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Main app content"
            }
          }
        ]
      },
      "pocket": {
        "state": {
          "activePage": "overview"
        },
        "ui": {
          "type": "app-shell",
          "props": {},
          "children": [
            {
              "slot": "sidebar",
              "type": "flex",
              "props": {
                "direction": "column",
                "gap": "4px"
              },
              "children": [
                {
                  "type": "button",
                  "props": {
                    "label": "Overview",
                    "variant": "{state.activePage == \"overview\" ? \"default\" : \"ghost\"}"
                  },
                  "on_click": {
                    "action": "set",
                    "target": "activePage",
                    "value": "overview"
                  }
                },
                {
                  "type": "button",
                  "props": {
                    "label": "Projects",
                    "variant": "{state.activePage == \"projects\" ? \"default\" : \"ghost\"}"
                  },
                  "on_click": {
                    "action": "set",
                    "target": "activePage",
                    "value": "projects"
                  }
                },
                {
                  "type": "button",
                  "props": {
                    "label": "Settings",
                    "variant": "{state.activePage == \"settings\" ? \"default\" : \"ghost\"}"
                  },
                  "on_click": {
                    "action": "set",
                    "target": "activePage",
                    "value": "settings"
                  }
                }
              ]
            },
            {
              "type": "if",
              "condition": "state.activePage == \"overview\"",
              "children": [
                {
                  "type": "heading",
                  "props": {
                    "level": 2,
                    "text": "Overview"
                  }
                },
                {
                  "type": "text",
                  "props": {
                    "text": "Welcome back. Pick a section from the sidebar."
                  }
                }
              ]
            },
            {
              "type": "if",
              "condition": "state.activePage == \"projects\"",
              "children": [
                {
                  "type": "heading",
                  "props": {
                    "level": 2,
                    "text": "Projects"
                  }
                },
                {
                  "type": "text",
                  "props": {
                    "text": "Your projects appear here."
                  }
                }
              ]
            },
            {
              "type": "if",
              "condition": "state.activePage == \"settings\"",
              "children": [
                {
                  "type": "heading",
                  "props": {
                    "level": 2,
                    "text": "Settings"
                  }
                },
                {
                  "type": "text",
                  "props": {
                    "text": "Configure your workspace."
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "article-meta",
      "category": "display",
      "description": "Article byline — author, avatar, publish date, read time.",
      "props": {
        "author": {
          "type": "string",
          "required": false,
          "description": "Author name."
        },
        "avatar": {
          "type": "string",
          "required": false,
          "description": "Author avatar URL."
        },
        "role": {
          "type": "string",
          "required": false,
          "description": "Author role."
        },
        "date": {
          "type": "string",
          "required": false,
          "description": "Publication date."
        },
        "readTime": {
          "type": "string",
          "required": false,
          "description": "Read time estimate (e.g. \"8 min\")."
        }
      },
      "example": {
        "type": "article-meta",
        "props": {
          "author": "Jane Doe",
          "date": "May 3, 2026",
          "readTime": "8 min read"
        }
      }
    },
    {
      "type": "audit-log",
      "category": "vertical",
      "description": "Timeline of events with actor, action, target, severity, type. Supports filter chips, day/week grouping, expandable details, and selectable rows for a side detail panel.",
      "props": {
        "entries": {
          "type": "Array<{ id: string | number; actor: string; actorIcon?: string; action: string; target?: string; timestamp?: string; type?: string; details?: string | Record<string, unknown>; severity?: \"info\" | \"warning\" | \"destructive\" | \"success\" }>",
          "required": true,
          "description": "Audit events. `type` (e.g. \"auth\", \"billing\") enables type-filter chips."
        },
        "showDetails": {
          "type": "boolean",
          "required": false,
          "description": "Allow expanding details. Default true."
        },
        "groupBy": {
          "type": "\"none\" | \"day\" | \"week\"",
          "required": false,
          "description": "Group entries by their timestamp granularity. Default \"none\". Requires parsable `timestamp` strings."
        },
        "showFilters": {
          "type": "boolean",
          "required": false,
          "description": "Render a filter chip bar (type, severity, actor) above the list. Default false."
        },
        "selectedId": {
          "type": "string | number",
          "required": false,
          "description": "Highlights a row. Pair with `onSelectId` (or use bind) to drive a side detail panel."
        }
      },
      "example": {
        "type": "audit-log",
        "props": {
          "groupBy": "day",
          "showFilters": true,
          "entries": [
            {
              "id": "1",
              "actor": "Alice Johnson",
              "action": "created",
              "target": "workspace:acme-prod",
              "type": "workspace",
              "timestamp": "2026-05-03 14:32 UTC",
              "severity": "success"
            },
            {
              "id": "2",
              "actor": "Bob Smith",
              "action": "updated API key",
              "target": "key:sk_live_xyz",
              "type": "auth",
              "timestamp": "2026-05-03 13:15 UTC",
              "severity": "warning"
            },
            {
              "id": "3",
              "actor": "System",
              "action": "deleted user",
              "target": "user:charlie@old.com",
              "type": "user",
              "timestamp": "2026-05-03 12:00 UTC",
              "severity": "destructive"
            },
            {
              "id": "4",
              "actor": "Alice Johnson",
              "action": "invited member",
              "target": "dana@acme.com",
              "type": "workspace",
              "timestamp": "2026-05-02 09:21 UTC",
              "severity": "info"
            }
          ]
        }
      }
    },
    {
      "type": "avatar",
      "category": "display",
      "description": "Circular avatar with image fallback to initials.",
      "props": {
        "src": {
          "type": "string",
          "required": false,
          "description": "Image source URL."
        },
        "alt": {
          "type": "string",
          "required": false,
          "description": "Alt text."
        },
        "fallback": {
          "type": "string",
          "required": false,
          "description": "Fallback initials shown when image is missing."
        }
      },
      "example": {
        "type": "avatar",
        "props": {
          "src": "https://example.com/user.jpg",
          "alt": "Jane Doe",
          "fallback": "JD"
        }
      }
    },
    {
      "type": "avatar-group",
      "category": "composite",
      "description": "Group of avatar badges with overflow count. Shows up to `max` faces, then a \"+N\" pill.",
      "props": {
        "users": {
          "type": "Array<{ src?: string; alt?: string; fallback?: string }>",
          "required": true,
          "description": "Avatars to display."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Max avatars before overflow. Default 4."
        },
        "size": {
          "type": "\"sm\" | \"md\" | \"lg\"",
          "required": false,
          "description": "Avatar size."
        }
      },
      "example": {
        "type": "avatar-group",
        "props": {
          "max": 3,
          "size": "md",
          "users": [
            {
              "src": "https://example.com/avatar1.jpg",
              "alt": "Alice"
            },
            {
              "src": "https://example.com/avatar2.jpg",
              "alt": "Bob"
            },
            {
              "fallback": "CD",
              "alt": "Charlie"
            },
            {
              "fallback": "EF",
              "alt": "Eve"
            }
          ]
        }
      }
    },
    {
      "type": "badge",
      "category": "display",
      "description": "Colored label with semantic variants (success, warning, destructive).",
      "props": {
        "text": {
          "type": "string",
          "required": false,
          "description": "Badge text."
        },
        "variant": {
          "type": "\"default\" | \"secondary\" | \"destructive\" | \"outline\" | \"success\" | \"warning\"",
          "required": false,
          "description": "Style variant."
        }
      },
      "example": {
        "type": "badge",
        "props": {
          "text": "Active",
          "variant": "success"
        }
      }
    },
    {
      "type": "breadcrumb",
      "category": "layout",
      "description": "Navigation breadcrumb trail with customizable separator (chevron/slash/custom).",
      "props": {
        "items": {
          "type": "Array<{ label: string; href?: string; icon?: string }>",
          "required": true,
          "description": "Breadcrumb items in order."
        },
        "separator": {
          "type": "\"chevron\" | \"slash\" | string",
          "required": false,
          "description": "Separator style. Default \"chevron\"."
        }
      },
      "example": {
        "type": "breadcrumb",
        "props": {
          "items": [
            {
              "label": "Home",
              "href": "/",
              "icon": "home"
            },
            {
              "label": "Projects",
              "href": "/projects"
            },
            {
              "label": "Acme"
            }
          ],
          "separator": "chevron"
        }
      }
    },
    {
      "type": "bulk-action-bar",
      "category": "vertical",
      "description": "Context bar that appears when items are selected. Shows selection count + bulk action buttons.",
      "props": {
        "selectedCount": {
          "type": "number",
          "required": true,
          "description": "Number of selected items (bar shows when > 0)."
        },
        "noun": {
          "type": "string",
          "required": false,
          "description": "Singular noun for selected items. Default \"item\"."
        },
        "actions": {
          "type": "Array<{ id: string; label: string; icon?: string; variant?: \"default\" | \"destructive\" | \"outline\"; disabled?: boolean }>",
          "required": true,
          "description": "Bulk action buttons."
        },
        "position": {
          "type": "\"inline\" | \"sticky-bottom\"",
          "required": false,
          "description": "Layout anchor."
        }
      },
      "example": {
        "type": "bulk-action-bar",
        "props": {
          "selectedCount": 5,
          "noun": "user",
          "position": "sticky-bottom",
          "actions": [
            {
              "id": "assign",
              "label": "Assign role",
              "icon": "user-check"
            },
            {
              "id": "email",
              "label": "Send email",
              "icon": "mail"
            },
            {
              "id": "delete",
              "label": "Delete",
              "icon": "trash-2",
              "variant": "destructive"
            }
          ]
        }
      }
    },
    {
      "type": "button",
      "category": "input",
      "description": "Button with variant, size, and loading states. Wire to actions via on_click.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Button text."
        },
        "variant": {
          "type": "\"default\" | \"secondary\" | \"outline\" | \"ghost\" | \"link\" | \"destructive\"",
          "required": false,
          "description": "Style variant."
        },
        "size": {
          "type": "\"sm\" | \"md\" | \"lg\" | \"icon\"",
          "required": false,
          "description": "Button size."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable interaction."
        },
        "loading": {
          "type": "boolean",
          "required": false,
          "description": "Show spinner and disable."
        },
        "type": {
          "type": "\"button\" | \"submit\" | \"reset\"",
          "required": false,
          "description": "HTML button type."
        }
      },
      "events": {
        "on_click": {
          "type": "EventAction",
          "required": false,
          "description": "Action fired on click."
        }
      },
      "example": {
        "type": "button",
        "props": {
          "label": "Save changes",
          "variant": "default",
          "size": "md",
          "type": "submit"
        }
      },
      "pocket": {
        "state": {
          "saving": false,
          "savedCount": 0
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px",
            "align": "start"
          },
          "children": [
            {
              "type": "button",
              "props": {
                "label": "{state.saving ? \"Saving…\" : \"Save changes\"}",
                "loading": "{state.saving}"
              },
              "on_click": {
                "action": "flow",
                "steps": [
                  {
                    "action": "set",
                    "target": "saving",
                    "value": true
                  },
                  {
                    "action": "delay",
                    "ms": 600
                  },
                  {
                    "action": "set",
                    "target": "saving",
                    "value": false
                  },
                  {
                    "action": "set",
                    "target": "savedCount",
                    "value": "{state.savedCount + 1}"
                  },
                  {
                    "action": "toast",
                    "message": "Saved",
                    "variant": "success"
                  }
                ]
              }
            },
            {
              "type": "text",
              "props": {
                "text": "Saved {state.savedCount} times"
              }
            }
          ]
        }
      }
    },
    {
      "type": "c4",
      "category": "data",
      "description": "C4 architecture diagram (Context / Container / Component / Code) with ELK auto-layout and drill-down.",
      "props": {
        "diagram": {
          "type": "{ title: string; level: \"context\" | \"container\" | \"component\" | \"code\"; description?: string; elements: Array<{ id: string; name: string; type: string; description?: string; external?: boolean }>; relationships: Array<{ from: string; to: string; label?: string }> }",
          "required": true,
          "description": "C4 diagram definition."
        }
      },
      "example": {
        "type": "c4",
        "props": {
          "diagram": {
            "title": "E-Banking System",
            "level": "context",
            "description": "System context for the e-banking platform.",
            "elements": [
              {
                "id": "user",
                "name": "User",
                "type": "person",
                "description": "A customer."
              },
              {
                "id": "system",
                "name": "E-Banking System",
                "type": "system",
                "description": "Account management."
              },
              {
                "id": "bank",
                "name": "Bank",
                "type": "system",
                "external": true,
                "description": "Upstream banking system."
              }
            ],
            "relationships": [
              {
                "from": "user",
                "to": "system",
                "label": "Uses"
              },
              {
                "from": "system",
                "to": "bank",
                "label": "API calls"
              }
            ]
          }
        }
      }
    },
    {
      "type": "calendar",
      "category": "data",
      "description": "Interactive month/week calendar with event visualization and date selection.",
      "props": {
        "events": {
          "type": "Array<{ id: string | number; title: string; start: string; end?: string; color?: string }>",
          "required": false,
          "description": "Events with ISO dates."
        },
        "view": {
          "type": "\"month\" | \"week\"",
          "required": false,
          "description": "Display mode."
        },
        "value": {
          "type": "string | null",
          "required": false,
          "description": "Selected ISO date (use with bind)."
        },
        "locale": {
          "type": "string",
          "required": false,
          "description": "Locale code. Default \"en-US\"."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on date selection."
        },
        "on_select": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when an event is clicked."
        }
      },
      "example": {
        "type": "calendar",
        "props": {
          "view": "month",
          "events": [
            {
              "id": 1,
              "title": "Sprint Start",
              "start": "2026-05-05",
              "color": "#3b82f6"
            },
            {
              "id": 2,
              "title": "Review",
              "start": "2026-05-12",
              "color": "#8b5cf6"
            },
            {
              "id": 3,
              "title": "Release",
              "start": "2026-05-19",
              "color": "#22c55e"
            }
          ]
        }
      },
      "pocket": {
        "state": {
          "selectedDate": "2026-05-12",
          "events": [
            {
              "id": 1,
              "title": "Sprint Start",
              "start": "2026-05-05",
              "color": "#3b82f6"
            },
            {
              "id": 2,
              "title": "Review",
              "start": "2026-05-12",
              "color": "#8b5cf6"
            },
            {
              "id": 3,
              "title": "Release",
              "start": "2026-05-19",
              "color": "#22c55e"
            }
          ]
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "calendar",
              "props": {
                "view": "month",
                "events": "{state.events}"
              },
              "bind": "state.selectedDate"
            },
            {
              "type": "text",
              "props": {
                "text": "Selected: {state.selectedDate}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "callout",
      "category": "research",
      "description": "Colored callout box with icon, title, and body. Use to highlight insights, warnings, or summaries.",
      "props": {
        "text": {
          "type": "string",
          "required": true,
          "description": "Body text."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Callout title."
        },
        "variant": {
          "type": "\"info\" | \"success\" | \"warning\" | \"insight\"",
          "required": false,
          "description": "Variant."
        }
      },
      "example": {
        "type": "callout",
        "props": {
          "variant": "insight",
          "title": "Key Insight",
          "text": "Revenue growth accelerated to 45% YoY, driven by enterprise adoption."
        }
      }
    },
    {
      "type": "card",
      "category": "layout",
      "description": "Styled container with optional header, body, and footer. Variants: default/muted/outlined/selected/glass.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Card header title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Card header description."
        },
        "variant": {
          "type": "\"default\" | \"muted\" | \"outlined\" | \"selected\" | \"glass\"",
          "required": false,
          "description": "Visual style variant."
        },
        "density": {
          "type": "\"comfortable\" | \"compact\"",
          "required": false,
          "description": "Padding and gap size."
        },
        "interactive": {
          "type": "boolean",
          "required": false,
          "description": "Enable hover/click cursor."
        }
      },
      "example": {
        "type": "card",
        "props": {
          "title": "Recent Activity",
          "description": "Last 24 hours",
          "variant": "default"
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "12 events"
            }
          }
        ]
      }
    },
    {
      "type": "chart",
      "category": "data",
      "description": "ECharts wrapper. Supports bar/line/area/pie/donut/candlestick/sparkline/heatmap/gauge/radar.",
      "props": {
        "data": {
          "type": "Array<{ label: string; value?: number; series?: Record<string, number> }>",
          "required": true,
          "description": "Data points (shape varies by chart type)."
        },
        "type": {
          "type": "\"bar\" | \"line\" | \"area\" | \"pie\" | \"donut\" | \"candlestick\" | \"sparkline\" | \"heatmap\" | \"gauge\" | \"radar\"",
          "required": false,
          "description": "Chart type. Default \"bar\"."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Chart title."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 200."
        },
        "colors": {
          "type": "string[]",
          "required": false,
          "description": "Custom color palette."
        },
        "tooltip": {
          "type": "boolean",
          "required": false,
          "description": "Show tooltip on hover. Default true."
        }
      },
      "example": {
        "type": "chart",
        "props": {
          "type": "bar",
          "title": "Q4 Revenue",
          "data": [
            {
              "label": "Jan",
              "value": 24000
            },
            {
              "label": "Feb",
              "value": 18500
            },
            {
              "label": "Mar",
              "value": 32100
            }
          ],
          "height": 280
        }
      }
    },
    {
      "type": "checkbox",
      "category": "input",
      "description": "Checkbox with optional label.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label shown next to checkbox."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.agreed}\"."
        },
        "checked": {
          "type": "boolean",
          "required": false,
          "description": "Checked state."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable checkbox."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on toggle."
        }
      },
      "example": {
        "type": "checkbox",
        "props": {
          "label": "I agree to the terms",
          "bind": "{state.agreed}"
        }
      },
      "pocket": {
        "state": {
          "agreed": false
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "checkbox",
              "props": {
                "label": "I agree to the terms"
              },
              "bind": "state.agreed"
            },
            {
              "type": "button",
              "props": {
                "label": "Continue",
                "disabled": "{!state.agreed}"
              },
              "on_click": {
                "action": "toast",
                "message": "Continuing…",
                "variant": "info"
              }
            }
          ]
        }
      }
    },
    {
      "type": "chip",
      "category": "display",
      "description": "Pill-shaped tag with optional close button.",
      "props": {
        "label": {
          "type": "string",
          "required": true,
          "description": "Chip text."
        },
        "variant": {
          "type": "\"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"",
          "required": false,
          "description": "Style variant."
        },
        "size": {
          "type": "\"sm\" | \"md\"",
          "required": false,
          "description": "Size variant."
        },
        "closable": {
          "type": "boolean",
          "required": false,
          "description": "Show X close button."
        }
      },
      "example": {
        "type": "chip",
        "props": {
          "label": "TypeScript",
          "variant": "primary",
          "closable": true
        }
      }
    },
    {
      "type": "citation",
      "category": "research",
      "description": "Citation pill — inline reference to a source with optional superscript number.",
      "props": {
        "source": {
          "type": "string",
          "required": true,
          "description": "Publisher name."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Accent color."
        },
        "favicon": {
          "type": "string",
          "required": false,
          "description": "Favicon URL override."
        },
        "number": {
          "type": "number",
          "required": false,
          "description": "Superscript citation number."
        },
        "url": {
          "type": "string",
          "required": false,
          "description": "Link URL."
        }
      },
      "example": {
        "type": "citation",
        "props": {
          "source": "Bloomberg",
          "number": 1,
          "url": "https://bloomberg.com/article"
        }
      }
    },
    {
      "type": "coachmark",
      "category": "overlay",
      "description": "Multi-step product tour with highlighted targets, keyboard nav, and progress counter (driver.js).",
      "props": {
        "steps": {
          "type": "Array<{ target: string; title?: string; description?: string; side?: \"top\" | \"right\" | \"bottom\" | \"left\" | \"over\" }>",
          "required": true,
          "description": "Tour steps. `target` is a CSS selector."
        },
        "value": {
          "type": "boolean",
          "required": false,
          "description": "Active state. Use with bind to control visibility."
        },
        "autoStart": {
          "type": "boolean",
          "required": false,
          "description": "Start tour on mount."
        },
        "showButtons": {
          "type": "boolean",
          "required": false,
          "description": "Show prev/next chevrons and counter."
        }
      },
      "example": {
        "type": "coachmark",
        "props": {
          "autoStart": false,
          "steps": [
            {
              "target": ".dashboard-card",
              "title": "Welcome",
              "description": "Start exploring your dashboard here.",
              "side": "bottom"
            },
            {
              "target": ".search-input",
              "title": "Search",
              "description": "Find documents quickly.",
              "side": "bottom"
            }
          ]
        }
      }
    },
    {
      "type": "code",
      "category": "display",
      "description": "Inline monospace code snippet. Use `code-block` for multi-line fenced blocks.",
      "props": {
        "value": {
          "type": "string",
          "required": true,
          "description": "Code text."
        }
      },
      "example": {
        "type": "code",
        "props": {
          "value": "npm install"
        }
      }
    },
    {
      "type": "code-block",
      "category": "display",
      "description": "Syntax-highlighted fenced code block with language label and copy button.",
      "props": {
        "code": {
          "type": "string",
          "required": false,
          "description": "Code source."
        },
        "text": {
          "type": "string",
          "required": false,
          "description": "Alias for code."
        },
        "language": {
          "type": "string",
          "required": false,
          "description": "Language slug (ts, js, py, sh, etc.)."
        },
        "hideLanguage": {
          "type": "boolean",
          "required": false,
          "description": "Hide language label."
        },
        "hideCopy": {
          "type": "boolean",
          "required": false,
          "description": "Hide copy button."
        }
      },
      "example": {
        "type": "code-block",
        "props": {
          "code": "const x = 42;\nconsole.log(x);",
          "language": "ts"
        }
      }
    },
    {
      "type": "code-editor",
      "category": "input",
      "description": "Code editor with syntax highlighting (CodeMirror). Use for editable code blocks.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for code content."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Code content."
        },
        "language": {
          "type": "\"javascript\" | \"typescript\" | \"json\" | \"html\" | \"text\"",
          "required": false,
          "description": "Language for highlighting."
        },
        "height": {
          "type": "string",
          "required": false,
          "description": "Editor height. Default \"240px\"."
        },
        "readonly": {
          "type": "boolean",
          "required": false,
          "description": "Make read-only."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on code change."
        }
      },
      "example": {
        "type": "code-editor",
        "props": {
          "label": "JSON config",
          "language": "json",
          "height": "300px",
          "bind": "{state.jsonConfig}"
        }
      },
      "pocket": {
        "state": {
          "jsonConfig": "{\n  \"host\": \"localhost\",\n  \"port\": 5432\n}",
          "language": "json"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "segmented",
              "props": {
                "options": [
                  {
                    "value": "json",
                    "label": "JSON"
                  },
                  {
                    "value": "javascript",
                    "label": "JS"
                  },
                  {
                    "value": "typescript",
                    "label": "TS"
                  }
                ]
              },
              "bind": "state.language"
            },
            {
              "type": "code-editor",
              "props": {
                "label": "Config",
                "language": "{state.language}",
                "height": "200px"
              },
              "bind": "state.jsonConfig"
            }
          ]
        }
      }
    },
    {
      "type": "collapsible",
      "category": "layout",
      "description": "Single collapsible container with toggle trigger. Controlled or uncontrolled open state.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Trigger button label."
        },
        "value": {
          "type": "boolean",
          "required": false,
          "description": "Controlled open state."
        },
        "defaultOpen": {
          "type": "boolean",
          "required": false,
          "description": "Initial open state when uncontrolled. Default false."
        },
        "hideChevron": {
          "type": "boolean",
          "required": false,
          "description": "Hide chevron indicator. Default false."
        }
      },
      "example": {
        "type": "collapsible",
        "props": {
          "title": "Show advanced options",
          "defaultOpen": false
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Advanced settings here."
            }
          }
        ]
      }
    },
    {
      "type": "color-picker",
      "category": "input",
      "description": "Color picker with preset palette and free-form hex input.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for hex color."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Hex color string."
        },
        "presets": {
          "type": "string[]",
          "required": false,
          "description": "Preset hex colors."
        },
        "showInput": {
          "type": "boolean",
          "required": false,
          "description": "Show hex text input."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable picker."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on color change."
        }
      },
      "example": {
        "type": "color-picker",
        "props": {
          "label": "Theme color",
          "value": "#3b82f6",
          "showInput": true,
          "bind": "{state.themeColor}"
        }
      },
      "pocket": {
        "state": {
          "themeColor": "#3b82f6"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "color-picker",
              "props": {
                "label": "Theme color",
                "showInput": true,
                "presets": [
                  "#3b82f6",
                  "#8b5cf6",
                  "#22c55e",
                  "#f59e0b",
                  "#ef4444"
                ]
              },
              "bind": "state.themeColor"
            },
            {
              "type": "card",
              "style": {
                "background-color": "{state.themeColor}",
                "height": "48px"
              },
              "props": {
                "padding": "sm"
              },
              "children": [
                {
                  "type": "text",
                  "props": {
                    "text": "Preview: {state.themeColor}"
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "combobox",
      "category": "input",
      "description": "Searchable dropdown with keyboard navigation and optional descriptions per option.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.selectedUser}\"."
        },
        "value": {
          "type": "string | number | null",
          "required": false,
          "description": "Selected value."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Trigger placeholder."
        },
        "searchPlaceholder": {
          "type": "string",
          "required": false,
          "description": "Search input placeholder."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-results text."
        },
        "options": {
          "type": "Array<{ value: string | number; label: string; description?: string; disabled?: boolean }>",
          "required": true,
          "description": "Options to choose from."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable combobox."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on selection change."
        }
      },
      "example": {
        "type": "combobox",
        "props": {
          "label": "Assignee",
          "options": [
            {
              "value": 1,
              "label": "Alice",
              "description": "Admin"
            },
            {
              "value": 2,
              "label": "Bob",
              "description": "Editor"
            },
            {
              "value": 3,
              "label": "Carol",
              "description": "Viewer"
            }
          ],
          "bind": "{state.assigneeId}",
          "searchPlaceholder": "Search users…"
        }
      },
      "pocket": {
        "state": {
          "assigneeId": null
        },
        "ui": {
          "type": "combobox",
          "props": {
            "label": "Assignee",
            "options": [
              {
                "value": 1,
                "label": "Alice",
                "description": "Admin"
              },
              {
                "value": 2,
                "label": "Bob",
                "description": "Editor"
              },
              {
                "value": 3,
                "label": "Carol",
                "description": "Viewer"
              }
            ],
            "searchPlaceholder": "Search users…"
          },
          "bind": "state.assigneeId",
          "on_change": {
            "action": "toast",
            "message": "Assigned",
            "variant": "success"
          }
        }
      }
    },
    {
      "type": "command-palette",
      "category": "overlay",
      "description": "Searchable command palette with keyboard shortcuts, grouping, and global hotkey (default ⌘K).",
      "props": {
        "value": {
          "type": "boolean",
          "required": false,
          "description": "Open state. Use with bind."
        },
        "commands": {
          "type": "Array<{ id: string; label: string; keywords?: string[]; icon?: string; shortcut?: string; group?: string; description?: string; disabled?: boolean }>",
          "required": true,
          "description": "Command list."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Search input placeholder."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-results text."
        },
        "shortcut": {
          "type": "string",
          "required": false,
          "description": "Global hotkey. Default \"mod+k\"."
        }
      },
      "example": {
        "type": "command-palette",
        "props": {
          "value": false,
          "shortcut": "mod+k",
          "commands": [
            {
              "id": "create",
              "label": "Create document",
              "keywords": [
                "new",
                "doc"
              ],
              "icon": "plus",
              "group": "Documents"
            },
            {
              "id": "search",
              "label": "Search",
              "keywords": [
                "find"
              ],
              "icon": "search",
              "shortcut": "mod+f",
              "group": "Navigation"
            }
          ]
        }
      },
      "pocket": {
        "state": {
          "paletteOpen": false
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "button",
              "props": {
                "label": "Open command palette",
                "variant": "secondary"
              },
              "on_click": {
                "action": "open",
                "target": "paletteOpen"
              }
            },
            {
              "type": "command-palette",
              "props": {
                "shortcut": "mod+k",
                "commands": [
                  {
                    "id": "create",
                    "label": "Create document",
                    "keywords": [
                      "new",
                      "doc"
                    ],
                    "icon": "plus",
                    "group": "Documents"
                  },
                  {
                    "id": "search",
                    "label": "Search",
                    "keywords": [
                      "find"
                    ],
                    "icon": "search",
                    "shortcut": "mod+f",
                    "group": "Navigation"
                  },
                  {
                    "id": "settings",
                    "label": "Open settings",
                    "icon": "settings",
                    "shortcut": "mod+,",
                    "group": "Navigation"
                  }
                ]
              },
              "bind": "state.paletteOpen"
            }
          ]
        }
      }
    },
    {
      "type": "comment-thread",
      "category": "vertical",
      "description": "Nested comment thread with avatars, timestamps, and optional reply buttons. Supports arbitrary depth.",
      "props": {
        "comments": {
          "type": "Array<{ id: string | number; author: string; avatar?: string; body: string; timestamp?: string; replies?: Comment[] }>",
          "required": true,
          "description": "Hierarchical comment tree."
        },
        "canReply": {
          "type": "boolean",
          "required": false,
          "description": "Show reply button. Default true."
        }
      },
      "example": {
        "type": "comment-thread",
        "props": {
          "canReply": true,
          "comments": [
            {
              "id": "1",
              "author": "Sarah Chen",
              "body": "Great work on the design system!",
              "timestamp": "2 hours ago",
              "replies": [
                {
                  "id": "1a",
                  "author": "Alex Rodriguez",
                  "body": "Thanks Sarah! Spent a lot of time on accessibility.",
                  "timestamp": "1 hour ago"
                }
              ]
            },
            {
              "id": "2",
              "author": "Jordan Kim",
              "body": "Any plans to support custom tokens?",
              "timestamp": "45 minutes ago"
            }
          ]
        }
      }
    },
    {
      "type": "company-header",
      "category": "research",
      "description": "Company profile header — logo, name, ticker, exchange, price, description, sector tags, market cap.",
      "props": {
        "name": {
          "type": "string",
          "required": true,
          "description": "Company name."
        },
        "ticker": {
          "type": "string",
          "required": false,
          "description": "Stock ticker."
        },
        "exchange": {
          "type": "string",
          "required": false,
          "description": "Exchange (NASDAQ/NYSE/etc)."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "One-line description."
        },
        "logo": {
          "type": "string",
          "required": false,
          "description": "Logo image URL."
        },
        "domain": {
          "type": "string",
          "required": false,
          "description": "Domain for auto-derived logo."
        },
        "tags": {
          "type": "string[]",
          "required": false,
          "description": "Sector / industry tags."
        },
        "price": {
          "type": "string",
          "required": false,
          "description": "Current stock price."
        },
        "change": {
          "type": "string",
          "required": false,
          "description": "Price change (e.g. \"+12.50\")."
        },
        "changePercent": {
          "type": "string",
          "required": false,
          "description": "Price change percent."
        },
        "marketCap": {
          "type": "string",
          "required": false,
          "description": "Market capitalization."
        }
      },
      "example": {
        "type": "company-header",
        "props": {
          "name": "Apple Inc.",
          "ticker": "AAPL",
          "exchange": "NASDAQ",
          "description": "Designer and manufacturer of consumer electronics.",
          "domain": "apple.com",
          "tags": [
            "Technology",
            "Consumer Electronics"
          ],
          "price": "$189.45",
          "change": "+2.35",
          "changePercent": "+1.25%",
          "marketCap": "2.95T"
        }
      }
    },
    {
      "type": "analytics-dashboard",
      "category": "composite",
      "description": "Analytics archetype: hero headline metric with period comparison → dominant time-series chart → small-chart breakdown row → top-items table.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Page title."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Subheading."
        },
        "dateRange": {
          "type": "string",
          "required": false,
          "description": "Date-range chip."
        },
        "headline": {
          "type": "{ label: string; value: string | number; delta?: string; trend?: \"up\" | \"down\" | \"flat\"; comparison?: string; sparkline?: number[] }",
          "required": false,
          "description": "The \"big number\" hero — center stage with sparkline + period comparison."
        },
        "secondaryMetrics": {
          "type": "Array<{ label: string; value: string | number; delta?: string; trend?: \"up\" | \"down\" | \"flat\"; sublabel?: string }>",
          "required": false,
          "description": "Smaller cards next to the headline."
        },
        "primaryChart": {
          "type": "{ title?: string; subtitle?: string; type?: \"bar\" | \"line\" | \"area\" | \"pie\" | \"donut\" | \"radar\" | \"heatmap\"; data: DataPoint[]; height?: number; colors?: string[] }",
          "required": false,
          "description": "Dominant time-series chart."
        },
        "breakdowns": {
          "type": "Array<ChartConfig>",
          "required": false,
          "description": "Small charts in a responsive row (e.g. by source / device / region)."
        },
        "topItems": {
          "type": "{ title?: string; columns: Array<{ key: string; label: string; align?: \"left\" | \"right\" | \"center\" }>; rows: Record<string, unknown>[] }",
          "required": false,
          "description": "Top items / pages / referrers table."
        }
      },
      "example": {
        "type": "analytics-dashboard",
        "props": {
          "title": "Web traffic",
          "subtitle": "docs.acme.com",
          "dateRange": "Last 30 days",
          "headline": {
            "label": "Visitors",
            "value": "482k",
            "delta": "+22.4%",
            "trend": "up",
            "comparison": "vs prior 30 days",
            "sparkline": [
              12,
              14,
              18,
              16,
              20,
              22,
              26,
              24,
              28,
              32,
              36,
              38,
              42,
              48
            ]
          },
          "secondaryMetrics": [
            {
              "label": "Pageviews",
              "value": "1.6M",
              "delta": "+18%",
              "trend": "up"
            },
            {
              "label": "Avg session",
              "value": "2m 14s",
              "delta": "+8s",
              "trend": "up"
            },
            {
              "label": "Bounce rate",
              "value": "38%",
              "delta": "-3pp",
              "trend": "down"
            }
          ],
          "primaryChart": {
            "title": "Visitors by day",
            "type": "area",
            "data": [
              {
                "label": "Day 1",
                "value": 8000
              },
              {
                "label": "Day 2",
                "value": 10459
              },
              {
                "label": "Day 3",
                "value": 12683
              },
              {
                "label": "Day 4",
                "value": 14495
              },
              {
                "label": "Day 5",
                "value": 15819
              },
              {
                "label": "Day 6",
                "value": 16697
              },
              {
                "label": "Day 7",
                "value": 17282
              },
              {
                "label": "Day 8",
                "value": 17798
              },
              {
                "label": "Day 9",
                "value": 18486
              },
              {
                "label": "Day 10",
                "value": 19545
              },
              {
                "label": "Day 11",
                "value": 21082
              },
              {
                "label": "Day 12",
                "value": 23089
              },
              {
                "label": "Day 13",
                "value": 25441
              },
              {
                "label": "Day 14",
                "value": 27930
              }
            ]
          },
          "breakdowns": [
            {
              "title": "By source",
              "type": "donut",
              "data": [
                {
                  "label": "Direct",
                  "value": 42
                },
                {
                  "label": "Search",
                  "value": 31
                },
                {
                  "label": "Social",
                  "value": 15
                },
                {
                  "label": "Referral",
                  "value": 12
                }
              ]
            },
            {
              "title": "By device",
              "type": "donut",
              "data": [
                {
                  "label": "Desktop",
                  "value": 64
                },
                {
                  "label": "Mobile",
                  "value": 30
                },
                {
                  "label": "Tablet",
                  "value": 6
                }
              ]
            },
            {
              "title": "By region",
              "type": "bar",
              "data": [
                {
                  "label": "NA",
                  "value": 220
                },
                {
                  "label": "EU",
                  "value": 154
                },
                {
                  "label": "APAC",
                  "value": 78
                },
                {
                  "label": "LATAM",
                  "value": 30
                }
              ]
            }
          ],
          "topItems": {
            "title": "Top pages",
            "columns": [
              {
                "key": "page",
                "label": "Page"
              },
              {
                "key": "views",
                "label": "Views",
                "align": "right"
              },
              {
                "key": "avg",
                "label": "Avg time",
                "align": "right"
              }
            ],
            "rows": [
              {
                "page": "/getting-started",
                "views": "92k",
                "avg": "3m 12s"
              },
              {
                "page": "/api",
                "views": "64k",
                "avg": "4m 02s"
              },
              {
                "page": "/pricing",
                "views": "48k",
                "avg": "1m 18s"
              },
              {
                "page": "/faq",
                "views": "24k",
                "avg": "0m 54s"
              }
            ]
          }
        }
      }
    },
    {
      "type": "checklist-layout",
      "category": "composite",
      "description": "Gated checklist with owners, due dates, attachments, and blocked dependencies. Distinct from `steps` (visual indicator only). Use for onboarding, audits, QA gates.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Checklist title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Checklist description."
        },
        "items": {
          "type": "Array<{ id: string; label: string; description?: string; state?: \"pending\" | \"in-progress\" | \"done\" | \"blocked\" | \"skipped\"; owner?: { id?: string; name: string; avatar?: string }; due?: string; overdue?: boolean; blockedBy?: string[]; attachments?: { name: string; url?: string }[]; actions?: EventAction | EventAction[]; toggleActions?: EventAction | EventAction[] }>",
          "required": true,
          "description": "Checklist items. Click row → `actions`; click checkbox → `toggleActions`."
        },
        "groupBy": {
          "type": "\"none\" | \"state\" | \"owner\"",
          "required": false,
          "description": "Group items into sections. Default \"none\"."
        },
        "showProgress": {
          "type": "boolean",
          "required": false,
          "description": "Show the auto-computed progress bar in the header. Default true."
        },
        "progress": {
          "type": "number",
          "required": false,
          "description": "Override the auto-computed progress (0–100)."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Text shown when items is empty."
        }
      },
      "example": {
        "type": "checklist-layout",
        "props": {
          "title": "Customer onboarding",
          "description": "Tasks required before going live.",
          "groupBy": "state",
          "items": [
            {
              "id": "sso",
              "label": "Configure SSO",
              "state": "done",
              "owner": {
                "name": "Alex Liu"
              },
              "due": "May 1"
            },
            {
              "id": "data",
              "label": "Import historical data",
              "state": "in-progress",
              "owner": {
                "name": "Sam Patel"
              },
              "due": "May 8",
              "attachments": [
                {
                  "name": "data.csv"
                }
              ]
            },
            {
              "id": "roles",
              "label": "Map user roles",
              "state": "pending",
              "owner": {
                "name": "Jess Tan"
              },
              "due": "May 10"
            },
            {
              "id": "training",
              "label": "Run admin training",
              "state": "blocked",
              "blockedBy": [
                "roles"
              ],
              "due": "May 14"
            },
            {
              "id": "review",
              "label": "Final QA review",
              "state": "pending",
              "due": "May 16",
              "overdue": false
            }
          ]
        }
      }
    },
    {
      "type": "comparison-layout",
      "category": "composite",
      "description": "Side-by-side comparison of 2–6 items with hero cards, section-tab feature grid, and Card/Table view toggle. Per-item `actions` and `learn_more` accept ripple event handlers.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Header title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Subheader description."
        },
        "items": {
          "type": "Array<{ id: string; title?: string; name?: string; subtitle?: string; chip?: string; image?: string; price?: string | number; actions?: EventAction | EventAction[]; learn_more?: EventAction | EventAction[]; [featureKey: string]: unknown }>",
          "required": true,
          "description": "Items being compared. Extra keys become feature values; `actions` and `learn_more` carry per-item event handlers."
        },
        "features": {
          "type": "Array<{ key: string; label: string; section?: string; type?: \"text\" | \"boolean\" | \"rating\" | \"image\" | \"color\"; icon?: string; highlight?: boolean }>",
          "required": false,
          "description": "Explicit feature definitions. If omitted, features are inferred from item keys (text/boolean only) and grouped under a single \"Features\" section. Use `section` to group features into tabs, `highlight: true` to surface a feature as a spec pill on the card, and `type` to control rendering."
        },
        "primaryLabel": {
          "type": "string",
          "required": false,
          "description": "Primary CTA label. Default \"Select\"."
        },
        "secondaryLabel": {
          "type": "string",
          "required": false,
          "description": "Secondary \"Learn more\" label. Default \"Learn more\"."
        },
        "showPrimary": {
          "type": "boolean",
          "required": false,
          "description": "Render the primary CTA. Default true."
        },
        "showSecondary": {
          "type": "boolean",
          "required": false,
          "description": "Render the \"Learn more\" button. Default true."
        },
        "defaultView": {
          "type": "\"card\" | \"table\"",
          "required": false,
          "description": "Initial view mode for the detailed feature grid on mobile. Default \"card\". Desktop always shows the table."
        },
        "showDiffToggle": {
          "type": "boolean",
          "required": false,
          "description": "Show the \"differences only\" filter toggle. Default true."
        }
      },
      "example": {
        "type": "comparison-layout",
        "props": {
          "title": "Observability platforms",
          "description": "Compare Datadog, New Relic, and Grafana Cloud for production monitoring.",
          "primaryLabel": "Choose plan",
          "items": [
            {
              "id": "datadog",
              "title": "Datadog",
              "subtitle": "Pro tier",
              "price": "$15 / host / mo",
              "image": "https://example.com/datadog.png",
              "ingestion": "15-day retention",
              "apm": true,
              "rum": true,
              "sso": true,
              "rating": 4,
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Tell me more about choosing Datadog."
                }
              ],
              "learn_more": [
                {
                  "action": "navigate",
                  "url": "https://datadoghq.com/pricing"
                }
              ]
            },
            {
              "id": "newrelic",
              "title": "New Relic",
              "subtitle": "Standard",
              "price": "$0.30 / GB",
              "image": "https://example.com/newrelic.png",
              "ingestion": "8-day retention",
              "apm": true,
              "rum": true,
              "sso": false,
              "rating": 4,
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Tell me more about choosing New Relic."
                }
              ]
            },
            {
              "id": "grafana",
              "title": "Grafana Cloud",
              "subtitle": "Pro",
              "price": "$8 / user / mo",
              "image": "https://example.com/grafana.png",
              "ingestion": "13-month retention",
              "apm": true,
              "rum": false,
              "sso": true,
              "rating": 5,
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Tell me more about choosing Grafana Cloud."
                }
              ]
            }
          ],
          "features": [
            {
              "key": "ingestion",
              "label": "Log retention",
              "section": "Data",
              "highlight": true
            },
            {
              "key": "apm",
              "label": "APM tracing",
              "section": "Features",
              "type": "boolean",
              "highlight": true
            },
            {
              "key": "rum",
              "label": "Real-user monitoring",
              "section": "Features",
              "type": "boolean"
            },
            {
              "key": "sso",
              "label": "SSO / SAML",
              "section": "Security",
              "type": "boolean"
            },
            {
              "key": "rating",
              "label": "G2 score",
              "section": "Reviews",
              "type": "rating"
            }
          ]
        }
      }
    },
    {
      "type": "comparison-table",
      "category": "display",
      "description": "Feature comparison table. Cells accept boolean (renders ✓/✗), string, or number.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "First column header. Default \"Feature\"."
        },
        "columns": {
          "type": "Array<{ key: string; label: string; highlight?: boolean }>",
          "required": true,
          "description": "Column definitions."
        },
        "rows": {
          "type": "Array<{ feature: string; [key: string]: unknown }>",
          "required": true,
          "description": "Table rows. `feature` is the row label; remaining keys map to column keys."
        }
      },
      "example": {
        "type": "comparison-table",
        "props": {
          "label": "Feature",
          "columns": [
            {
              "key": "free",
              "label": "Free"
            },
            {
              "key": "pro",
              "label": "Pro",
              "highlight": true
            }
          ],
          "rows": [
            {
              "feature": "Users",
              "free": 1,
              "pro": "Unlimited"
            },
            {
              "feature": "API access",
              "free": false,
              "pro": true
            },
            {
              "feature": "Support",
              "free": "Email",
              "pro": "24/7"
            }
          ]
        }
      }
    },
    {
      "type": "confirm-dialog",
      "category": "overlay",
      "description": "Auto-mounted confirmation dialog. Renders pending confirm actions invoked from elsewhere in the spec.",
      "props": {},
      "example": {
        "type": "confirm-dialog",
        "props": {}
      },
      "pocket": {
        "state": {
          "projects": [
            {
              "id": 1,
              "name": "Atlas migration"
            },
            {
              "id": 2,
              "name": "Onboarding redesign"
            }
          ]
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "confirm-dialog"
            },
            {
              "type": "each",
              "items": "state.projects",
              "item_as": "project",
              "children": [
                {
                  "type": "flex",
                  "props": {
                    "gap": "12px",
                    "align": "center",
                    "justify": "between"
                  },
                  "children": [
                    {
                      "type": "text",
                      "props": {
                        "text": "{project.name}"
                      }
                    },
                    {
                      "type": "button",
                      "props": {
                        "label": "Delete",
                        "variant": "destructive",
                        "size": "sm"
                      },
                      "on_click": {
                        "action": "confirm",
                        "title": "Delete {project.name}?",
                        "message": "This cannot be undone.",
                        "confirm_label": "Delete",
                        "on_confirm": [
                          {
                            "action": "remove",
                            "target": "projects",
                            "value": "{project}"
                          },
                          {
                            "action": "toast",
                            "message": "Deleted",
                            "variant": "success"
                          }
                        ]
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "container",
      "category": "layout",
      "description": "Simple div wrapper for grouping children. Use for basic structural grouping without semantic meaning.",
      "props": {},
      "example": {
        "type": "container",
        "props": {},
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Wrapped content"
            }
          }
        ]
      }
    },
    {
      "type": "context-menu",
      "category": "overlay",
      "description": "Right-click context menu with items, icons, shortcuts, and separators.",
      "props": {
        "items": {
          "type": "Array<{ label?: string; icon?: string; value?: unknown; variant?: string; disabled?: boolean; type?: \"separator\" | \"item\"; shortcut?: string }>",
          "required": true,
          "description": "Menu items."
        },
        "trigger": {
          "type": "string | UISpec",
          "required": false,
          "description": "Right-clickable trigger."
        }
      },
      "example": {
        "type": "context-menu",
        "props": {
          "trigger": "Right-click row",
          "items": [
            {
              "label": "Cut",
              "icon": "scissors",
              "value": "cut",
              "shortcut": "⌘X"
            },
            {
              "label": "Copy",
              "icon": "copy",
              "value": "copy",
              "shortcut": "⌘C"
            },
            {
              "label": "Paste",
              "icon": "clipboard",
              "value": "paste",
              "shortcut": "⌘V"
            },
            {
              "type": "separator"
            },
            {
              "label": "Delete",
              "icon": "trash-2",
              "value": "delete",
              "variant": "destructive"
            }
          ]
        }
      }
    },
    {
      "type": "copy",
      "category": "display",
      "description": "Copy-to-clipboard button with visual confirmation.",
      "props": {
        "value": {
          "type": "string",
          "required": true,
          "description": "Text to copy."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Button label."
        },
        "size": {
          "type": "\"sm\" | \"md\"",
          "required": false,
          "description": "Button size."
        }
      },
      "example": {
        "type": "copy",
        "props": {
          "value": "npm install @ripple-ui/svelte",
          "label": "Copy install command"
        }
      }
    },
    {
      "type": "dashboard",
      "category": "layout",
      "description": "Auto-fill responsive grid that arranges children into columns. Use for KPI grids and card galleries.",
      "props": {
        "columnMin": {
          "type": "string",
          "required": false,
          "description": "Minimum column width before wrapping. Default \"240px\"."
        },
        "gap": {
          "type": "string",
          "required": false,
          "description": "Grid gap. Default \"12px\"."
        }
      },
      "example": {
        "type": "dashboard",
        "props": {
          "columnMin": "240px",
          "gap": "16px"
        },
        "children": [
          {
            "type": "metric",
            "props": {
              "label": "Users",
              "value": 1240
            }
          },
          {
            "type": "metric",
            "props": {
              "label": "MRR",
              "value": "$48k"
            }
          },
          {
            "type": "metric",
            "props": {
              "label": "Churn",
              "value": "2.1%"
            }
          }
        ]
      },
      "pocket": {
        "state": {
          "range": "7d",
          "revenue": 48200,
          "users": 1240,
          "churn": 2.1
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "segmented",
              "props": {
                "options": [
                  {
                    "value": "24h",
                    "label": "24h"
                  },
                  {
                    "value": "7d",
                    "label": "7d"
                  },
                  {
                    "value": "30d",
                    "label": "30d"
                  },
                  {
                    "value": "90d",
                    "label": "90d"
                  }
                ]
              },
              "bind": "state.range"
            },
            {
              "type": "dashboard",
              "props": {
                "columnMin": "200px",
                "gap": "16px"
              },
              "children": [
                {
                  "type": "metric",
                  "props": {
                    "label": "Revenue ({state.range})",
                    "value": "${state.revenue}"
                  }
                },
                {
                  "type": "metric",
                  "props": {
                    "label": "Users ({state.range})",
                    "value": "{state.users}"
                  }
                },
                {
                  "type": "metric",
                  "props": {
                    "label": "Churn ({state.range})",
                    "value": "{state.churn}%"
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "dashboard-slot",
      "category": "layout",
      "description": "Grid item wrapper for use inside dashboard. Controls per-item column span.",
      "props": {
        "slotId": {
          "type": "string",
          "required": true,
          "description": "Unique slot identifier."
        },
        "itemId": {
          "type": "string",
          "required": true,
          "description": "Unique item identifier."
        },
        "span": {
          "type": "number | \"auto\"",
          "required": false,
          "description": "Column span (1, 2, 3) or \"auto\". Default 1."
        }
      },
      "example": {
        "type": "dashboard-slot",
        "props": {
          "slotId": "top-row",
          "itemId": "mrr-tile",
          "span": 2
        },
        "children": [
          {
            "type": "metric",
            "props": {
              "label": "MRR",
              "value": "$48k"
            }
          }
        ]
      }
    },
    {
      "type": "data-grid",
      "category": "data",
      "description": "High-density tabular data with sticky headers, resizable columns, pagination, and optional sorting. Use over `table` for large datasets.",
      "props": {
        "columns": {
          "type": "Array<{ key: string; label: string; sortable?: boolean; align?: \"left\" | \"center\" | \"right\"; width?: string }>",
          "required": true,
          "description": "Column definitions."
        },
        "rows": {
          "type": "Array<Record<string, unknown>>",
          "required": true,
          "description": "Row objects."
        },
        "value": {
          "type": "string | number | null",
          "required": false,
          "description": "Selected row id (use with bind)."
        },
        "pageSize": {
          "type": "number",
          "required": false,
          "description": "Rows per page. Default 10."
        },
        "searchable": {
          "type": "boolean",
          "required": false,
          "description": "Show search input."
        },
        "defaultSort": {
          "type": "string",
          "required": false,
          "description": "Initial sort: \"key\" or \"key:desc\"."
        },
        "striped": {
          "type": "boolean",
          "required": false,
          "description": "Alternate row backgrounds."
        },
        "dense": {
          "type": "boolean",
          "required": false,
          "description": "Compact row density."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-state text."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on row selection."
        }
      },
      "example": {
        "type": "data-grid",
        "props": {
          "columns": [
            {
              "key": "name",
              "label": "Customer",
              "sortable": true
            },
            {
              "key": "email",
              "label": "Email",
              "sortable": true
            },
            {
              "key": "revenue",
              "label": "Revenue",
              "align": "right",
              "sortable": true
            }
          ],
          "rows": [
            {
              "id": 1,
              "name": "Alice",
              "email": "alice@example.com",
              "revenue": "$8,400"
            },
            {
              "id": 2,
              "name": "Bob",
              "email": "bob@example.com",
              "revenue": "$5,200"
            },
            {
              "id": 3,
              "name": "Carol",
              "email": "carol@example.com",
              "revenue": "$12,800"
            }
          ],
          "searchable": true
        }
      },
      "pocket": {
        "state": {
          "selected": null,
          "rows": [
            {
              "id": 1,
              "name": "Alice",
              "email": "alice@example.com",
              "revenue": "$8,400"
            },
            {
              "id": 2,
              "name": "Bob",
              "email": "bob@example.com",
              "revenue": "$5,200"
            },
            {
              "id": 3,
              "name": "Carol",
              "email": "carol@example.com",
              "revenue": "$12,800"
            }
          ]
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "data-grid",
              "props": {
                "columns": [
                  {
                    "key": "name",
                    "label": "Customer",
                    "sortable": true
                  },
                  {
                    "key": "email",
                    "label": "Email"
                  },
                  {
                    "key": "revenue",
                    "label": "Revenue",
                    "align": "right",
                    "sortable": true
                  }
                ],
                "rows": "{state.rows}",
                "searchable": true
              },
              "bind": "state.selected"
            },
            {
              "type": "flex",
              "show": "{state.selected != null}",
              "props": {
                "gap": "8px",
                "align": "center"
              },
              "children": [
                {
                  "type": "text",
                  "props": {
                    "text": "Selected row id: {state.selected}"
                  }
                },
                {
                  "type": "button",
                  "props": {
                    "label": "Email customer",
                    "variant": "secondary",
                    "size": "sm"
                  },
                  "on_click": {
                    "action": "toast",
                    "message": "Sent",
                    "variant": "success"
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "date-picker",
      "category": "input",
      "description": "Calendar-based date picker (popover).",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for ISO date (YYYY-MM-DD)."
        },
        "value": {
          "type": "string | null",
          "required": false,
          "description": "Selected ISO date."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Trigger placeholder."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable picker."
        },
        "format": {
          "type": "\"short\" | \"medium\" | \"long\" | \"iso\"",
          "required": false,
          "description": "Display format."
        },
        "min": {
          "type": "string",
          "required": false,
          "description": "Minimum selectable ISO date."
        },
        "max": {
          "type": "string",
          "required": false,
          "description": "Maximum selectable ISO date."
        },
        "locale": {
          "type": "string",
          "required": false,
          "description": "Locale code. Default \"en-US\"."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on date change."
        }
      },
      "example": {
        "type": "date-picker",
        "props": {
          "label": "Due date",
          "format": "long",
          "min": "2026-01-01",
          "max": "2026-12-31",
          "bind": "{state.dueDate}"
        }
      },
      "pocket": {
        "state": {
          "dueDate": null
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "date-picker",
              "props": {
                "label": "Due date",
                "format": "long",
                "min": "2026-01-01",
                "max": "2026-12-31"
              },
              "bind": "state.dueDate"
            },
            {
              "type": "text",
              "show": "{state.dueDate != null}",
              "props": {
                "text": "Due: {state.dueDate}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "definition-list",
      "category": "display",
      "description": "Term/definition pairs — inline (term-on-left) or stacked. Use for glossaries and metadata.",
      "props": {
        "items": {
          "type": "Array<{ term: string; definition: string }>",
          "required": true,
          "description": "Term/definition pairs."
        },
        "layout": {
          "type": "\"inline\" | \"stacked\"",
          "required": false,
          "description": "Layout mode."
        }
      },
      "example": {
        "type": "definition-list",
        "props": {
          "layout": "inline",
          "items": [
            {
              "term": "API",
              "definition": "Application Programming Interface"
            },
            {
              "term": "REST",
              "definition": "Representational State Transfer"
            }
          ]
        }
      }
    },
    {
      "type": "diff",
      "category": "display",
      "description": "Text diff viewer — unified or split, with line/word/char granularity.",
      "props": {
        "before": {
          "type": "string",
          "required": false,
          "description": "\"Before\" text."
        },
        "after": {
          "type": "string",
          "required": false,
          "description": "\"After\" text."
        },
        "mode": {
          "type": "\"lines\" | \"words\" | \"chars\"",
          "required": false,
          "description": "Diff granularity."
        },
        "layout": {
          "type": "\"unified\" | \"split\"",
          "required": false,
          "description": "View layout."
        },
        "showLineNumbers": {
          "type": "boolean",
          "required": false,
          "description": "Show line numbers (lines mode only)."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Header title."
        }
      },
      "example": {
        "type": "diff",
        "props": {
          "before": "const x = 1;",
          "after": "const x = 42;",
          "mode": "lines",
          "layout": "unified",
          "showLineNumbers": true
        }
      }
    },
    {
      "type": "discover-card",
      "category": "research",
      "description": "Discovery card with image, title, description, and source tag. Use for curated articles or recommendations.",
      "props": {
        "title": {
          "type": "string",
          "required": true,
          "description": "Card title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Short description."
        },
        "image": {
          "type": "string",
          "required": false,
          "description": "Image URL."
        },
        "source": {
          "type": "string",
          "required": false,
          "description": "Publisher name."
        },
        "url": {
          "type": "string",
          "required": false,
          "description": "Link URL."
        }
      },
      "example": {
        "type": "discover-card",
        "props": {
          "title": "Cloud Infrastructure Trends for 2026",
          "description": "Key insights on Kubernetes and edge computing adoption.",
          "source": "InfoQ",
          "url": "https://infoq.com/article"
        }
      }
    },
    {
      "type": "dropdown-menu",
      "category": "overlay",
      "description": "Dropdown menu with items, icons, shortcuts, and separators. Emits onchange with selected item value.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Trigger button label."
        },
        "triggerVariant": {
          "type": "\"default\" | \"outline\" | \"ghost\" | \"secondary\"",
          "required": false,
          "description": "Trigger button style."
        },
        "items": {
          "type": "Array<{ label?: string; icon?: string; value?: unknown; variant?: string; disabled?: boolean; type?: \"separator\" | \"item\"; shortcut?: string }>",
          "required": true,
          "description": "Menu items."
        },
        "side": {
          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
          "required": false,
          "description": "Popover position."
        },
        "align": {
          "type": "\"start\" | \"center\" | \"end\"",
          "required": false,
          "description": "Alignment."
        },
        "hideChevron": {
          "type": "boolean",
          "required": false,
          "description": "Hide trailing chevron."
        }
      },
      "example": {
        "type": "dropdown-menu",
        "props": {
          "label": "Actions",
          "items": [
            {
              "label": "Edit",
              "icon": "edit",
              "value": "edit"
            },
            {
              "label": "Duplicate",
              "icon": "copy",
              "value": "duplicate"
            },
            {
              "type": "separator"
            },
            {
              "label": "Delete",
              "icon": "trash-2",
              "value": "delete",
              "variant": "destructive"
            }
          ]
        }
      }
    },
    {
      "type": "each",
      "category": "control",
      "description": "Loop over an array. Renders children per item with `{item}` and `{index}` in expressions. `items`/`item_as`/`index_as` are node-level fields, not props.",
      "props": {},
      "nodeFields": {
        "items": {
          "type": "string",
          "required": true,
          "description": "State path or expression resolving to an array, e.g. \"{state.users}\"."
        },
        "item_as": {
          "type": "string",
          "required": false,
          "description": "Variable name for the current item. Default \"item\"."
        },
        "index_as": {
          "type": "string",
          "required": false,
          "description": "Variable name for the current index. Default \"index\"."
        }
      },
      "example": {
        "type": "each",
        "items": "{state.users}",
        "children": [
          {
            "type": "text",
            "props": {
              "text": "{item.name}"
            }
          }
        ]
      }
    },
    {
      "type": "empty-state",
      "category": "display",
      "description": "Empty state with icon (inbox/search/file/error), title, and description.",
      "props": {
        "title": {
          "type": "string",
          "required": true,
          "description": "Title text."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Description text."
        },
        "icon": {
          "type": "\"inbox\" | \"search\" | \"file\" | \"error\"",
          "required": false,
          "description": "Icon preset."
        }
      },
      "example": {
        "type": "empty-state",
        "props": {
          "title": "No results",
          "description": "Try adjusting your search filters",
          "icon": "search"
        }
      }
    },
    {
      "type": "entity-detail",
      "category": "composite",
      "description": "The \"view one record\" page: hero header, status badge, KPI strip, action buttons, meta sidebar, content body via children. Use for any single-entity page.",
      "props": {
        "title": {
          "type": "string",
          "required": true,
          "description": "Primary heading (e.g. customer name, ticket title)."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Smaller line under the title."
        },
        "eyebrow": {
          "type": "string",
          "required": false,
          "description": "Small uppercase label above the title (e.g. \"Customer · ACME-1042\")."
        },
        "avatar": {
          "type": "string",
          "required": false,
          "description": "Avatar image URL."
        },
        "icon": {
          "type": "string",
          "required": false,
          "description": "Lucide icon slug, used when there is no avatar."
        },
        "iconColor": {
          "type": "string",
          "required": false,
          "description": "Background color for the icon block (e.g. oklch(0.55 0.18 250))."
        },
        "status": {
          "type": "{ label: string; variant?: \"default\" | \"success\" | \"warning\" | \"destructive\" | \"info\" }",
          "required": false,
          "description": "Status pill rendered next to the title."
        },
        "tags": {
          "type": "Array<string | { label: string; color?: string }>",
          "required": false,
          "description": "Tag pills."
        },
        "kpis": {
          "type": "Array<{ label: string; value: string | number; delta?: string; trend?: \"up\" | \"down\" | \"flat\"; sublabel?: string }>",
          "required": false,
          "description": "KPI strip cards. Trend controls the colored arrow on `delta`."
        },
        "actions": {
          "type": "Array<{ id?: string; label: string; icon?: string; variant?: \"default\" | \"secondary\" | \"outline\" | \"ghost\" | \"destructive\"; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Action buttons on the right of the hero."
        },
        "meta": {
          "type": "Array<{ label: string; value: string; icon?: string }>",
          "required": false,
          "description": "Key-value pairs for the right rail (or stacked, depending on `metaPlacement`)."
        },
        "metaPlacement": {
          "type": "\"rail\" | \"stacked\"",
          "required": false,
          "description": "Where to place the meta block. Default \"rail\"."
        }
      },
      "example": {
        "type": "entity-detail",
        "props": {
          "eyebrow": "Customer · ACME-1042",
          "title": "Acme Corp",
          "subtitle": "Enterprise · Annual contract",
          "icon": "building-2",
          "iconColor": "oklch(0.55 0.18 250)",
          "status": {
            "label": "Active",
            "variant": "success"
          },
          "tags": [
            "SSO",
            "Audit",
            {
              "label": "Strategic",
              "color": "oklch(0.55 0.22 25)"
            }
          ],
          "kpis": [
            {
              "label": "MRR",
              "value": "$48k",
              "delta": "+12%",
              "trend": "up"
            },
            {
              "label": "Open tickets",
              "value": 3,
              "sublabel": "1 high priority"
            },
            {
              "label": "Health score",
              "value": 92,
              "delta": "+4",
              "trend": "up"
            },
            {
              "label": "Last touch",
              "value": "2d ago",
              "trend": "flat"
            }
          ],
          "actions": [
            {
              "id": "edit",
              "label": "Edit",
              "icon": "pencil",
              "variant": "outline"
            },
            {
              "id": "note",
              "label": "Add note",
              "icon": "message-square",
              "variant": "default"
            }
          ],
          "meta": [
            {
              "label": "Owner",
              "value": "Jane Doe",
              "icon": "user"
            },
            {
              "label": "Created",
              "value": "Aug 14, 2019"
            },
            {
              "label": "Renewal",
              "value": "Mar 1, 2027",
              "icon": "calendar"
            },
            {
              "label": "Industry",
              "value": "Logistics"
            }
          ]
        },
        "children": [
          {
            "type": "tabs",
            "props": {
              "tabs": [
                "Overview",
                "Activity",
                "Files",
                "Settings"
              ]
            },
            "bind": "tab",
            "children": [
              {
                "type": "text",
                "props": {
                  "text": "Overview content goes here."
                }
              },
              {
                "type": "text",
                "props": {
                  "text": "Activity feed goes here."
                }
              },
              {
                "type": "text",
                "props": {
                  "text": "Files list goes here."
                }
              },
              {
                "type": "text",
                "props": {
                  "text": "Settings panel goes here."
                }
              }
            ]
          }
        ]
      }
    },
    {
      "type": "exec-dashboard",
      "category": "composite",
      "description": "Executive dashboard with KPI strip, primary chart + activity rail, and data-table footer. Date-range chips, granularity toggle, refresh, clickable KPIs and activity items for drill-through.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Page title."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Page subtitle / description."
        },
        "dateRange": {
          "type": "string",
          "required": false,
          "description": "Static date-range chip (used when `dateRanges` is not provided)."
        },
        "dateRanges": {
          "type": "string[]",
          "required": false,
          "description": "Preset date-range chips (e.g. [\"Today\",\"7d\",\"30d\",\"90d\",\"YTD\"]). Renders a segmented control."
        },
        "activeDateRange": {
          "type": "string",
          "required": false,
          "description": "Two-way bindable. Defaults to first item."
        },
        "granularities": {
          "type": "string[]",
          "required": false,
          "description": "Optional granularity toggle (e.g. [\"Day\",\"Week\",\"Month\"])."
        },
        "activeGranularity": {
          "type": "string",
          "required": false,
          "description": "Two-way bindable."
        },
        "activityFilters": {
          "type": "string[]",
          "required": false,
          "description": "Activity-rail filter pills (first item is treated as \"all\")."
        },
        "activeActivityFilter": {
          "type": "string",
          "required": false,
          "description": "Two-way bindable."
        },
        "showRefresh": {
          "type": "boolean",
          "required": false,
          "description": "Show built-in refresh button. Default true."
        },
        "refreshActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions dispatched when refresh is clicked."
        },
        "actions": {
          "type": "Array<{ id?: string; label: string; icon?: string; variant?: \"default\" | \"outline\" | \"ghost\"; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Header action buttons."
        },
        "kpis": {
          "type": "Array<{ id?: string; label: string; value: string | number; delta?: string; trend?: \"up\" | \"down\" | \"flat\"; sparkline?: number[]; color?: string; sublabel?: string; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "KPI tiles. When `actions` (or `id` + a host `onkpiclick`) is set, the tile becomes clickable for drill-through."
        },
        "primaryChart": {
          "type": "{ title?: string; type?: \"bar\" | \"line\" | \"area\" | \"pie\" | \"donut\" | \"radar\" | \"heatmap\"; data: Array<{ label: string; value?: number; series?: Record<string, number> }>; height?: number; colors?: string[] }",
          "required": false,
          "description": "Hero chart (left, 2/3 width when activity rail is present)."
        },
        "activity": {
          "type": "Array<{ id?: string; time: string; label: string; actor?: string; icon?: string; severity?: \"info\" | \"success\" | \"warning\" | \"destructive\"; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Right-rail activity feed. Per-item `actions` makes the item clickable."
        },
        "activityTitle": {
          "type": "string",
          "required": false,
          "description": "Activity rail heading. Default \"Recent activity\"."
        },
        "charts": {
          "type": "Array<ChartConfig>",
          "required": false,
          "description": "Secondary chart row (auto-fit grid)."
        },
        "table": {
          "type": "{ title?: string; columns: Array<{ key: string; label: string; align?: \"left\" | \"right\" | \"center\" }>; rows: Record<string, unknown>[] }",
          "required": false,
          "description": "Data table footer."
        }
      },
      "example": {
        "type": "exec-dashboard",
        "bind": "activeDateRange",
        "props": {
          "title": "Q2 performance",
          "subtitle": "Cross-team metrics and KPIs",
          "dateRanges": [
            "7d",
            "30d",
            "90d",
            "QTD",
            "YTD"
          ],
          "granularities": [
            "Day",
            "Week",
            "Month"
          ],
          "activityFilters": [
            "All",
            "Mine",
            "Alerts"
          ],
          "refreshActions": [
            {
              "action": "toast",
              "message": "Refreshed",
              "variant": "info"
            }
          ],
          "kpis": [
            {
              "id": "mrr",
              "label": "Revenue",
              "value": "$2.4M",
              "delta": "+18%",
              "trend": "up",
              "sparkline": [
                22,
                25,
                30,
                28,
                36,
                40,
                48
              ],
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Tell me what drove the 18% MRR jump this period."
                }
              ]
            },
            {
              "id": "newcust",
              "label": "New customers",
              "value": 142,
              "delta": "+12",
              "trend": "up",
              "sparkline": [
                10,
                12,
                18,
                16,
                20,
                22,
                28
              ],
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Break down new customers by acquisition source."
                }
              ]
            },
            {
              "id": "churn",
              "label": "Churn",
              "value": "2.1%",
              "delta": "-0.4pp",
              "trend": "down",
              "sparkline": [
                3,
                2.8,
                2.6,
                2.5,
                2.4,
                2.3,
                2.1
              ],
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Which accounts churned, and why?"
                }
              ]
            },
            {
              "id": "nps",
              "label": "NPS",
              "value": 64,
              "delta": "+5",
              "trend": "up"
            }
          ],
          "primaryChart": {
            "title": "Monthly recurring revenue",
            "type": "area",
            "data": [
              {
                "label": "Jan",
                "value": 1450
              },
              {
                "label": "Feb",
                "value": 1620
              },
              {
                "label": "Mar",
                "value": 1810
              },
              {
                "label": "Apr",
                "value": 1980
              },
              {
                "label": "May",
                "value": 2200
              },
              {
                "label": "Jun",
                "value": 2400
              }
            ]
          },
          "activity": [
            {
              "id": "a1",
              "time": "12m ago",
              "label": "New deal closed: Globex ($120k)",
              "actor": "Alice",
              "severity": "success",
              "icon": "trophy",
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Show me the Globex deal details."
                }
              ]
            },
            {
              "id": "a2",
              "time": "38m ago",
              "label": "Onboarding kicked off: Initech",
              "actor": "Bob",
              "severity": "info"
            },
            {
              "id": "a3",
              "time": "2h ago",
              "label": "Churn risk flagged: Hooli",
              "severity": "warning",
              "icon": "alert-triangle",
              "actions": [
                {
                  "action": "emit",
                  "target": "chat.send",
                  "value": "Why is Hooli at churn risk?"
                }
              ]
            },
            {
              "id": "a4",
              "time": "Yesterday",
              "label": "Q1 report published",
              "actor": "Carol",
              "severity": "info"
            }
          ],
          "charts": [
            {
              "title": "Revenue by segment",
              "type": "donut",
              "data": [
                {
                  "label": "Enterprise",
                  "value": 60
                },
                {
                  "label": "Mid-market",
                  "value": 28
                },
                {
                  "label": "SMB",
                  "value": 12
                }
              ]
            },
            {
              "title": "Top regions",
              "type": "bar",
              "data": [
                {
                  "label": "US",
                  "value": 1200
                },
                {
                  "label": "EU",
                  "value": 720
                },
                {
                  "label": "APAC",
                  "value": 480
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "error-state",
      "category": "overlay",
      "description": "Error state with icon, title, description, optional code/detail, and primary/secondary actions.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Error title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Error description."
        },
        "icon": {
          "type": "string",
          "required": false,
          "description": "Lucide icon slug."
        },
        "actionLabel": {
          "type": "string",
          "required": false,
          "description": "Primary action label."
        },
        "secondaryLabel": {
          "type": "string",
          "required": false,
          "description": "Secondary action label."
        },
        "detail": {
          "type": "string",
          "required": false,
          "description": "Error code or technical detail (monospace)."
        }
      },
      "example": {
        "type": "error-state",
        "props": {
          "title": "Connection failed",
          "description": "We couldn't reach the server. Please check your internet and try again.",
          "icon": "alert-circle",
          "actionLabel": "Retry",
          "secondaryLabel": "Go back",
          "detail": "Error: NETWORK_TIMEOUT"
        }
      }
    },
    {
      "type": "file-upload",
      "category": "input",
      "description": "Drag-and-drop file upload with file list display, accept-type filtering, and size limits.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for files array."
        },
        "accept": {
          "type": "string",
          "required": false,
          "description": "Accept attribute (e.g. \"image/*\", \".pdf,.docx\")."
        },
        "multiple": {
          "type": "boolean",
          "required": false,
          "description": "Allow multiple files."
        },
        "maxSize": {
          "type": "number",
          "required": false,
          "description": "Max bytes per file."
        },
        "maxFiles": {
          "type": "number",
          "required": false,
          "description": "Max number of files."
        },
        "helperText": {
          "type": "string",
          "required": false,
          "description": "Helper text below dropzone."
        },
        "hideFileList": {
          "type": "boolean",
          "required": false,
          "description": "Hide file list under dropzone."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable upload."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when files are added."
        },
        "on_error": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on validation error."
        }
      },
      "example": {
        "type": "file-upload",
        "props": {
          "label": "Upload documents",
          "accept": ".pdf,.docx",
          "multiple": true,
          "maxSize": 10485760,
          "maxFiles": 5,
          "bind": "{state.uploadedFiles}"
        }
      },
      "pocket": {
        "state": {
          "uploadedFiles": []
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "file-upload",
              "props": {
                "label": "Upload documents",
                "accept": ".pdf,.docx",
                "multiple": true,
                "maxSize": 10485760,
                "maxFiles": 5,
                "helperText": "PDF or Word, up to 10MB each."
              },
              "bind": "state.uploadedFiles"
            },
            {
              "type": "text",
              "props": {
                "text": "{state.uploadedFiles.length} file(s) ready to upload"
              }
            }
          ]
        }
      }
    },
    {
      "type": "filter-bar",
      "category": "input",
      "description": "Chip-based filter UI with add/remove buttons. Use above lists/tables for multi-criteria filtering.",
      "props": {
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for active filters array, e.g. \"{state.filters}\"."
        },
        "options": {
          "type": "Array<{ key: string; label: string; type?: string; default?: unknown }>",
          "required": true,
          "description": "Available filter definitions."
        },
        "addLabel": {
          "type": "string",
          "required": false,
          "description": "Add-button label. Default \"Filter\"."
        },
        "showClearAll": {
          "type": "boolean",
          "required": false,
          "description": "Show clear-all button. Default true."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when filters change."
        }
      },
      "example": {
        "type": "filter-bar",
        "props": {
          "options": [
            {
              "key": "status",
              "label": "Status"
            },
            {
              "key": "priority",
              "label": "Priority"
            },
            {
              "key": "assignee",
              "label": "Assignee"
            }
          ],
          "bind": "{state.filters}",
          "showClearAll": true
        }
      },
      "pocket": {
        "state": {
          "filters": []
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "filter-bar",
              "props": {
                "options": [
                  {
                    "key": "status",
                    "label": "Status"
                  },
                  {
                    "key": "priority",
                    "label": "Priority"
                  },
                  {
                    "key": "assignee",
                    "label": "Assignee"
                  }
                ],
                "showClearAll": true
              },
              "bind": "state.filters"
            },
            {
              "type": "text",
              "props": {
                "text": "{state.filters.length} active filter(s)"
              }
            }
          ]
        }
      }
    },
    {
      "type": "flex",
      "category": "layout",
      "description": "Flexbox container. Lays children in a row or column with gap and alignment control.",
      "props": {
        "direction": {
          "type": "\"row\" | \"column\"",
          "required": false,
          "description": "Main axis. Defaults to row."
        },
        "gap": {
          "type": "number | string",
          "required": false,
          "description": "Gap between children. Number → tailwind spacing units (4px multiplier, e.g. 4 → 16px); string → raw CSS gap (e.g. \"12px\")."
        },
        "align": {
          "type": "\"start\" | \"center\" | \"end\" | \"stretch\"",
          "required": false,
          "description": "Cross-axis alignment."
        },
        "justify": {
          "type": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\"",
          "required": false,
          "description": "Main-axis distribution."
        },
        "wrap": {
          "type": "boolean",
          "required": false,
          "description": "Allow children to wrap to next line."
        }
      },
      "example": {
        "type": "flex",
        "props": {
          "direction": "row",
          "gap": 4,
          "justify": "between"
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Left"
            }
          },
          {
            "type": "text",
            "props": {
              "text": "Right"
            }
          }
        ]
      }
    },
    {
      "type": "follow-up",
      "category": "research",
      "description": "Text input with send button for follow-up questions. Emits an event on submit.",
      "props": {
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Input placeholder."
        },
        "submitLabel": {
          "type": "string",
          "required": false,
          "description": "Submit button label (sr-only)."
        },
        "event": {
          "type": "string",
          "required": false,
          "description": "Event name emitted on submit."
        }
      },
      "example": {
        "type": "follow-up",
        "props": {
          "placeholder": "Ask follow-up",
          "event": "follow-up"
        }
      }
    },
    {
      "type": "form",
      "category": "input",
      "description": "Form wrapper with integrated validation. Wrap input children and pass validation rules.",
      "props": {
        "fields": {
          "type": "Record<string, { required?: boolean | string; minLength?: number; maxLength?: number; min?: number; max?: number; pattern?: string; label?: string }>",
          "required": true,
          "description": "Validation rules keyed by state path."
        },
        "errorsTarget": {
          "type": "string",
          "required": false,
          "description": "State path for validation errors. Default \"errors\"."
        },
        "validTarget": {
          "type": "string",
          "required": false,
          "description": "State path for overall validity. Default \"valid\"."
        },
        "validateOn": {
          "type": "\"submit\" | \"change\"",
          "required": false,
          "description": "When validation runs."
        }
      },
      "events": {
        "on_submit": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when a valid form is submitted."
        },
        "on_validate": {
          "type": "EventAction",
          "required": false,
          "description": "Fired after each validation run."
        }
      },
      "example": {
        "type": "form",
        "props": {
          "fields": {
            "state.email": {
              "required": "Email is required",
              "minLength": 5
            },
            "state.password": {
              "required": true,
              "minLength": 8
            }
          },
          "validateOn": "submit"
        },
        "children": [
          {
            "type": "input",
            "props": {
              "label": "Email",
              "type": "email",
              "bind": "{state.email}"
            }
          },
          {
            "type": "input",
            "props": {
              "label": "Password",
              "type": "password",
              "bind": "{state.password}"
            }
          },
          {
            "type": "button",
            "props": {
              "label": "Sign in",
              "type": "submit"
            }
          }
        ]
      },
      "pockets": [
        {
          "name": "validate-and-emit",
          "description": "Client-side validation, then hand off to the host via emit.",
          "state": {
            "email": "",
            "password": "",
            "errors": {}
          },
          "ui": {
            "type": "form",
            "props": {
              "fields": {
                "email": {
                  "required": "Email is required",
                  "minLength": 5
                },
                "password": {
                  "required": "Password is required",
                  "minLength": 8
                }
              },
              "validateOn": "submit"
            },
            "on_submit": {
              "action": "emit",
              "target": "login",
              "value": {
                "email": "{state.email}",
                "password": "{state.password}"
              }
            },
            "children": [
              {
                "type": "input",
                "props": {
                  "label": "Email",
                  "type": "email"
                },
                "bind": "state.email"
              },
              {
                "type": "input",
                "props": {
                  "label": "Password",
                  "type": "password"
                },
                "bind": "state.password"
              },
              {
                "type": "button",
                "props": {
                  "label": "Sign in",
                  "type": "submit"
                }
              }
            ]
          }
        },
        {
          "name": "validate-and-api",
          "description": "Validate, call API, toast on success or failure.",
          "state": {
            "name": "",
            "email": "",
            "submitting": false,
            "errors": {}
          },
          "ui": {
            "type": "form",
            "props": {
              "fields": {
                "name": {
                  "required": "Name is required"
                },
                "email": {
                  "required": "Email is required",
                  "minLength": 5
                }
              },
              "validateOn": "submit"
            },
            "on_submit": {
              "action": "flow",
              "steps": [
                {
                  "action": "set",
                  "target": "submitting",
                  "value": true
                },
                {
                  "action": "api",
                  "method": "POST",
                  "url": "/api/contacts",
                  "body": {
                    "name": "{state.name}",
                    "email": "{state.email}"
                  },
                  "on_success": [
                    {
                      "action": "set",
                      "target": "submitting",
                      "value": false
                    },
                    {
                      "action": "set",
                      "target": "name",
                      "value": ""
                    },
                    {
                      "action": "set",
                      "target": "email",
                      "value": ""
                    },
                    {
                      "action": "toast",
                      "message": "Contact saved",
                      "variant": "success"
                    }
                  ],
                  "on_error": [
                    {
                      "action": "set",
                      "target": "submitting",
                      "value": false
                    },
                    {
                      "action": "toast",
                      "message": "Could not save",
                      "variant": "error"
                    }
                  ]
                }
              ]
            },
            "children": [
              {
                "type": "input",
                "props": {
                  "label": "Name"
                },
                "bind": "state.name"
              },
              {
                "type": "input",
                "props": {
                  "label": "Email",
                  "type": "email"
                },
                "bind": "state.email"
              },
              {
                "type": "button",
                "props": {
                  "label": "{state.submitting ? \"Saving…\" : \"Save\"}",
                  "loading": "{state.submitting}",
                  "type": "submit"
                }
              }
            ]
          }
        }
      ]
    },
    {
      "type": "form-layout",
      "category": "composite",
      "description": "Multi-section form scaffold with side nav anchors, sticky save bar (cancel + submit), and dirty/saving/error indicators. Compose a `form` widget inside for validation.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Form title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Form description."
        },
        "sections": {
          "type": "Array<{ id: string; title: string; description?: string; icon?: string }>",
          "required": false,
          "description": "Side-nav anchor list. Each entry should match the `id` attribute of a section in `children`."
        },
        "progress": {
          "type": "number",
          "required": false,
          "description": "0–100. Shown next to the title."
        },
        "valid": {
          "type": "boolean",
          "required": false,
          "description": "When false, the submit button is disabled and an \"Resolve errors\" tag is shown. Default true."
        },
        "dirty": {
          "type": "boolean",
          "required": false,
          "description": "Show \"Unsaved changes\" tag."
        },
        "saving": {
          "type": "boolean",
          "required": false,
          "description": "Show \"Saving…\" tag and disable the submit button."
        },
        "submitLabel": {
          "type": "string",
          "required": false,
          "description": "Submit button label. Default \"Save changes\"."
        },
        "cancelLabel": {
          "type": "string",
          "required": false,
          "description": "Cancel button label. Default \"Cancel\"."
        },
        "submitActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions to dispatch when submit is clicked."
        },
        "cancelActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions to dispatch when cancel is clicked."
        },
        "showCancel": {
          "type": "boolean",
          "required": false,
          "description": "Show the cancel button. Default true."
        },
        "stickyBar": {
          "type": "boolean",
          "required": false,
          "description": "Pin the action bar to the bottom of the viewport. Default true."
        }
      },
      "example": {
        "type": "form-layout",
        "props": {
          "title": "Account settings",
          "description": "Update your profile, security, and notification preferences.",
          "sections": [
            {
              "id": "profile",
              "title": "Profile",
              "description": "Name, email, avatar",
              "icon": "user"
            },
            {
              "id": "security",
              "title": "Security",
              "description": "2FA & sessions",
              "icon": "shield"
            },
            {
              "id": "notifications",
              "title": "Notifications",
              "icon": "bell"
            }
          ],
          "progress": 60,
          "dirty": true,
          "submitActions": [
            {
              "action": "toast",
              "message": "Saved",
              "variant": "success"
            }
          ]
        },
        "children": [
          {
            "type": "section",
            "id": "profile",
            "props": {
              "title": "Profile"
            },
            "children": [
              {
                "type": "input",
                "bind": "name",
                "props": {
                  "label": "Name"
                }
              }
            ]
          },
          {
            "type": "section",
            "id": "security",
            "props": {
              "title": "Security"
            },
            "children": [
              {
                "type": "switch",
                "bind": "twofa",
                "props": {
                  "label": "Enable 2FA"
                }
              }
            ]
          }
        ]
      }
    },
    {
      "type": "funnel",
      "category": "data",
      "description": "Funnel chart showing stage-wise conversion or drop-off.",
      "props": {
        "data": {
          "type": "Array<{ label: string; value: number }>",
          "required": true,
          "description": "Funnel stages."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 240."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Chart title."
        },
        "colors": {
          "type": "string[]",
          "required": false,
          "description": "Custom palette per stage."
        },
        "sort": {
          "type": "\"descending\" | \"ascending\" | \"none\"",
          "required": false,
          "description": "Stage sort order."
        }
      },
      "example": {
        "type": "funnel",
        "props": {
          "title": "Sales Funnel",
          "data": [
            {
              "label": "Leads",
              "value": 1000
            },
            {
              "label": "Qualified",
              "value": 620
            },
            {
              "label": "Proposal",
              "value": 280
            },
            {
              "label": "Closed",
              "value": 105
            }
          ]
        }
      }
    },
    {
      "type": "gantt",
      "category": "data",
      "description": "Gantt chart for project timelines. Tasks have start/end ISO dates, optional dependencies, and progress bars.",
      "props": {
        "tasks": {
          "type": "Array<{ id: string; name: string; start: string; end: string; progress?: number; dependencies?: string }>",
          "required": true,
          "description": "Task definitions (ISO dates YYYY-MM-DD)."
        },
        "viewMode": {
          "type": "\"Quarter Day\" | \"Half Day\" | \"Day\" | \"Week\" | \"Month\" | \"Year\"",
          "required": false,
          "description": "Time-unit granularity."
        },
        "height": {
          "type": "string",
          "required": false,
          "description": "Container height. Default \"320px\"."
        }
      },
      "example": {
        "type": "gantt",
        "props": {
          "viewMode": "Week",
          "tasks": [
            {
              "id": "1",
              "name": "Design",
              "start": "2026-05-03",
              "end": "2026-05-10",
              "progress": 100
            },
            {
              "id": "2",
              "name": "Development",
              "start": "2026-05-10",
              "end": "2026-05-24",
              "progress": 60,
              "dependencies": "1"
            },
            {
              "id": "3",
              "name": "Testing",
              "start": "2026-05-24",
              "end": "2026-05-31",
              "progress": 0
            }
          ]
        }
      }
    },
    {
      "type": "gauge",
      "category": "data",
      "description": "Circular gauge showing progress or single KPI as 0..max arc.",
      "props": {
        "value": {
          "type": "number",
          "required": true,
          "description": "Current value."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Maximum value. Default 100."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Gauge label."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Custom gauge color."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 200."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Title above gauge."
        }
      },
      "example": {
        "type": "gauge",
        "props": {
          "value": 75,
          "max": 100,
          "label": "Capacity",
          "height": 240
        }
      }
    },
    {
      "type": "glass-card",
      "category": "layout",
      "description": "Glass-morphism container with customizable blur, opacity, and tint. Use for premium overlays.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Card title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Card description."
        },
        "opacity": {
          "type": "number",
          "required": false,
          "description": "Background opacity 0-100. Default 38."
        },
        "blur": {
          "type": "number",
          "required": false,
          "description": "Blur radius in px. Default 8."
        },
        "tint": {
          "type": "string",
          "required": false,
          "description": "Tint color hex. Default #000000."
        },
        "borderGlow": {
          "type": "boolean",
          "required": false,
          "description": "Enable reflex border glow. Default true."
        }
      },
      "example": {
        "type": "glass-card",
        "props": {
          "title": "Pro tier",
          "opacity": 40,
          "blur": 12
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "$48/month"
            }
          }
        ]
      }
    },
    {
      "type": "grid",
      "category": "layout",
      "description": "CSS grid container. Lays children in evenly-sized columns. Best for KPI rows and card grids.",
      "props": {
        "columns": {
          "type": "number | string",
          "required": false,
          "description": "Number of columns (number → repeat(N, 1fr)) or a raw grid-template-columns value. Defaults to 1."
        },
        "rows": {
          "type": "number | string",
          "required": false,
          "description": "Optional number of rows or grid-template-rows value."
        },
        "gap": {
          "type": "number | string",
          "required": false,
          "description": "Gap between cells. Number → tailwind spacing units (4px multiplier); string → raw CSS gap (e.g. \"12px\")."
        }
      },
      "example": {
        "type": "grid",
        "props": {
          "columns": 3,
          "gap": "12px"
        },
        "children": [
          {
            "type": "metric",
            "props": {
              "label": "Users",
              "value": 1240
            }
          },
          {
            "type": "metric",
            "props": {
              "label": "MRR",
              "value": "$48k"
            }
          },
          {
            "type": "metric",
            "props": {
              "label": "Churn",
              "value": "2.1%"
            }
          }
        ]
      }
    },
    {
      "type": "heading",
      "category": "display",
      "description": "Section title at h1-h6 levels. Use for page titles and section headers.",
      "props": {
        "text": {
          "type": "string",
          "required": true,
          "description": "The heading text."
        },
        "level": {
          "type": "1 | 2 | 3 | 4 | 5 | 6",
          "required": false,
          "description": "Heading level. Defaults to 2."
        }
      },
      "example": {
        "type": "heading",
        "props": {
          "text": "Q2 Performance",
          "level": 2
        }
      }
    },
    {
      "type": "heatmap",
      "category": "data",
      "description": "Matrix heatmap of intensity across x/y categories. Use for correlation, activity calendars.",
      "props": {
        "cells": {
          "type": "Array<{ x: string | number; y: string | number; value: number }>",
          "required": true,
          "description": "Cell data."
        },
        "xLabels": {
          "type": "(string | number)[]",
          "required": false,
          "description": "Explicit x-axis labels."
        },
        "yLabels": {
          "type": "(string | number)[]",
          "required": false,
          "description": "Explicit y-axis labels."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 280."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Chart title."
        },
        "colorRange": {
          "type": "[string, string]",
          "required": false,
          "description": "Low-to-high gradient. Default [\"#dbeafe\", \"#1d4ed8\"]."
        },
        "showLabels": {
          "type": "boolean",
          "required": false,
          "description": "Show cell value labels."
        }
      },
      "example": {
        "type": "heatmap",
        "props": {
          "title": "Engagement Matrix",
          "cells": [
            {
              "x": "Mon",
              "y": "Week 1",
              "value": 12
            },
            {
              "x": "Tue",
              "y": "Week 1",
              "value": 18
            },
            {
              "x": "Mon",
              "y": "Week 2",
              "value": 22
            },
            {
              "x": "Tue",
              "y": "Week 2",
              "value": 25
            }
          ]
        }
      }
    },
    {
      "type": "hero",
      "category": "layout",
      "description": "Large hero section with title, subtitle, eyebrow text, and alignment options. Use for landing intros.",
      "props": {
        "title": {
          "type": "string",
          "required": true,
          "description": "Hero title."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Subtitle description."
        },
        "eyebrow": {
          "type": "string",
          "required": false,
          "description": "Eyebrow text above title."
        },
        "align": {
          "type": "\"left\" | \"center\"",
          "required": false,
          "description": "Text alignment. Default \"left\"."
        }
      },
      "example": {
        "type": "hero",
        "props": {
          "title": "Build interfaces from JSON",
          "subtitle": "Ripple turns specs into Svelte UIs.",
          "align": "center"
        }
      }
    },
    {
      "type": "highlight",
      "category": "display",
      "description": "Big-stat hero number with label, description, and trend delta. Use for headline KPIs.",
      "props": {
        "value": {
          "type": "string | number",
          "required": true,
          "description": "Main value."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Label below value."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Additional context."
        },
        "delta": {
          "type": "string",
          "required": false,
          "description": "Delta text (e.g. \"+12.4%\")."
        },
        "tone": {
          "type": "\"positive\" | \"negative\" | \"neutral\"",
          "required": false,
          "description": "Delta tone (auto-derives from sign)."
        }
      },
      "example": {
        "type": "highlight",
        "props": {
          "value": "1,250",
          "label": "Total orders",
          "delta": "+8.5%",
          "tone": "positive"
        }
      }
    },
    {
      "type": "hover-card",
      "category": "overlay",
      "description": "Rich card revealed on hover. Auto-closes on mouse leave.",
      "props": {
        "trigger": {
          "type": "string | UISpec",
          "required": false,
          "description": "Trigger text or spec node."
        },
        "content": {
          "type": "string | UISpec",
          "required": false,
          "description": "Body text or spec node."
        },
        "side": {
          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
          "required": false,
          "description": "Position."
        },
        "align": {
          "type": "\"start\" | \"center\" | \"end\"",
          "required": false,
          "description": "Alignment."
        },
        "openDelay": {
          "type": "number",
          "required": false,
          "description": "Show delay in ms. Default 300."
        },
        "closeDelay": {
          "type": "number",
          "required": false,
          "description": "Hide delay in ms. Default 150."
        }
      },
      "example": {
        "type": "hover-card",
        "props": {
          "trigger": "@alice",
          "content": "Alice Chen — Product Designer at Acme.",
          "side": "bottom"
        }
      }
    },
    {
      "type": "icon",
      "category": "display",
      "description": "Lucide SVG icon (lazy-loaded). Use kebab-case slug, e.g. `chevron-right`.",
      "props": {
        "name": {
          "type": "string",
          "required": true,
          "description": "Lucide icon slug (kebab-case)."
        },
        "size": {
          "type": "number",
          "required": false,
          "description": "Icon size in pixels. Default 16."
        },
        "strokeWidth": {
          "type": "number",
          "required": false,
          "description": "Stroke width. Default 2."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Icon color (CSS color)."
        }
      },
      "example": {
        "type": "icon",
        "props": {
          "name": "check-circle",
          "size": 24,
          "color": "#10b981"
        }
      }
    },
    {
      "type": "if",
      "category": "control",
      "description": "Conditional rendering. Renders children only when `condition` is truthy. `condition` is a node-level field, not a prop.",
      "props": {},
      "nodeFields": {
        "condition": {
          "type": "string",
          "required": true,
          "description": "Expression evaluated for truthiness, e.g. \"{state.isAdmin}\"."
        }
      },
      "example": {
        "type": "if",
        "condition": "{state.isAdmin}",
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Admin section"
            }
          }
        ]
      }
    },
    {
      "type": "image",
      "category": "display",
      "description": "Image with object-fit, rounding, and width/height controls.",
      "props": {
        "src": {
          "type": "string",
          "required": false,
          "description": "Image source URL."
        },
        "alt": {
          "type": "string",
          "required": false,
          "description": "Alt text."
        },
        "width": {
          "type": "number | string",
          "required": false,
          "description": "Width (px or CSS value)."
        },
        "height": {
          "type": "number | string",
          "required": false,
          "description": "Height (px or CSS value)."
        },
        "fit": {
          "type": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\"",
          "required": false,
          "description": "CSS object-fit value."
        },
        "rounded": {
          "type": "\"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"",
          "required": false,
          "description": "Border radius preset."
        }
      },
      "example": {
        "type": "image",
        "props": {
          "src": "https://example.com/photo.jpg",
          "alt": "Scenic view",
          "width": 200,
          "height": 150,
          "fit": "cover",
          "rounded": "md"
        }
      }
    },
    {
      "type": "input",
      "category": "input",
      "description": "Single-line text input with label, error states, and optional helper text.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.email}\"."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Input value."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        },
        "type": {
          "type": "\"text\" | \"email\" | \"password\" | \"number\" | \"tel\" | \"url\" | \"search\" | \"date\" | \"time\" | \"color\"",
          "required": false,
          "description": "HTML input type."
        },
        "size": {
          "type": "\"sm\" | \"md\" | \"lg\"",
          "required": false,
          "description": "Input size."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable input."
        },
        "readOnly": {
          "type": "boolean",
          "required": false,
          "description": "Read-only."
        },
        "required": {
          "type": "boolean",
          "required": false,
          "description": "Mark as required."
        },
        "error": {
          "type": "string",
          "required": false,
          "description": "Error message below input."
        },
        "helper": {
          "type": "string",
          "required": false,
          "description": "Helper text below input."
        }
      },
      "events": {
        "on_input": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on every keystroke."
        },
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on blur."
        }
      },
      "example": {
        "type": "input",
        "props": {
          "label": "Email",
          "type": "email",
          "placeholder": "you@example.com",
          "bind": "{state.email}",
          "required": true
        }
      },
      "pocket": {
        "state": {
          "email": "",
          "sent": false
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "input",
              "props": {
                "label": "Email",
                "type": "email",
                "placeholder": "you@example.com"
              },
              "bind": "state.email"
            },
            {
              "type": "text",
              "props": {
                "text": "Will send to: {state.email || \"(nothing yet)\"}"
              }
            },
            {
              "type": "button",
              "props": {
                "label": "Send",
                "disabled": "{state.email == \"\"}"
              },
              "on_click": [
                {
                  "action": "set",
                  "target": "sent",
                  "value": true
                },
                {
                  "action": "toast",
                  "message": "Sent to {state.email}",
                  "variant": "success"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "invoice-layout",
      "category": "composite",
      "description": "Full invoice / quote / receipt document with branded header, bill-to / ship-to, status, totals, payment instructions, and notes. Composes the `invoice-lines` widget for line items.",
      "props": {
        "docType": {
          "type": "\"Invoice\" | \"Quote\" | \"Receipt\" | \"Credit note\"",
          "required": false,
          "description": "Document type label. Default \"Invoice\"."
        },
        "from": {
          "type": "{ name: string; logo?: string; address?: string; email?: string; phone?: string; taxId?: string }",
          "required": true,
          "description": "The party issuing the document."
        },
        "billTo": {
          "type": "{ name: string; address?: string; email?: string; phone?: string; taxId?: string }",
          "required": true,
          "description": "The party being billed."
        },
        "shipTo": {
          "type": "{ name: string; address?: string }",
          "required": false,
          "description": "Optional ship-to block (when different from bill-to)."
        },
        "invoiceNumber": {
          "type": "string",
          "required": true,
          "description": "Document number (e.g. \"INV-2026-042\")."
        },
        "issueDate": {
          "type": "string",
          "required": true,
          "description": "Issue date (any human-readable format)."
        },
        "dueDate": {
          "type": "string",
          "required": false,
          "description": "Due date."
        },
        "status": {
          "type": "\"draft\" | \"sent\" | \"paid\" | \"overdue\" | \"void\"",
          "required": false,
          "description": "Status badge."
        },
        "currency": {
          "type": "string",
          "required": false,
          "description": "Currency symbol prepended to numeric amounts. Default \"$\"."
        },
        "lines": {
          "type": "Array<{ id?: string | number; description: string; quantity?: number; unitPrice?: number; total?: number; note?: string }>",
          "required": true,
          "description": "Line items."
        },
        "summary": {
          "type": "Array<{ label: string; value: number; isNegative?: boolean }>",
          "required": false,
          "description": "Tax / discount / shipping rows shown after subtotal."
        },
        "subtotal": {
          "type": "number",
          "required": false,
          "description": "Override the auto-computed subtotal."
        },
        "total": {
          "type": "number",
          "required": false,
          "description": "Override the auto-computed grand total."
        },
        "notes": {
          "type": "string",
          "required": false,
          "description": "Notes shown at the bottom (free-form text)."
        },
        "paymentTerms": {
          "type": "string",
          "required": false,
          "description": "Short payment terms summary (e.g. \"Net 30\")."
        },
        "paymentMethods": {
          "type": "Array<{ label: string; detail?: string }>",
          "required": false,
          "description": "Payment method instructions (e.g. ACH details, wire info)."
        },
        "actions": {
          "type": "Array<{ id?: string; label: string; icon?: string; variant?: \"default\" | \"outline\" | \"ghost\"; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Action buttons at the bottom (Download, Pay, Send)."
        }
      },
      "example": {
        "type": "invoice-layout",
        "props": {
          "docType": "Invoice",
          "from": {
            "name": "Acme Corp",
            "address": "1 Market St, San Francisco, CA",
            "email": "billing@acme.com",
            "taxId": "US-83-1234567"
          },
          "billTo": {
            "name": "Globex Industries",
            "address": "500 Industrial Pkwy, Springfield, IL",
            "email": "ap@globex.com"
          },
          "invoiceNumber": "INV-2026-042",
          "issueDate": "May 1, 2026",
          "dueDate": "May 31, 2026",
          "status": "sent",
          "paymentTerms": "Net 30",
          "lines": [
            {
              "description": "Enterprise plan — May 2026",
              "quantity": 1,
              "unitPrice": 2500
            },
            {
              "description": "Additional seats (40 × $30)",
              "quantity": 40,
              "unitPrice": 30
            },
            {
              "description": "Onboarding services",
              "quantity": 4,
              "unitPrice": 250,
              "note": "4-hour kickoff"
            }
          ],
          "summary": [
            {
              "label": "Subtotal",
              "value": 4900
            },
            {
              "label": "Tax (8.5%)",
              "value": 416.5
            }
          ],
          "paymentMethods": [
            {
              "label": "Wire transfer",
              "detail": "Routing 121000358 · Account 9876543210"
            },
            {
              "label": "ACH",
              "detail": "Same details as wire"
            }
          ],
          "notes": "Thank you for your business.",
          "actions": [
            {
              "id": "download",
              "label": "Download PDF",
              "icon": "download",
              "variant": "outline"
            },
            {
              "id": "pay",
              "label": "Pay invoice",
              "icon": "credit-card"
            }
          ]
        }
      }
    },
    {
      "type": "invoice-lines",
      "category": "vertical",
      "description": "Invoice line-item table with qty, unit price, totals. Auto-computes subtotal; supports tax/discount summary rows.",
      "props": {
        "lines": {
          "type": "Array<{ id?: string | number; description: string; quantity?: number; unitPrice?: number; total?: number; note?: string }>",
          "required": true,
          "description": "Line items."
        },
        "currency": {
          "type": "string",
          "required": false,
          "description": "Currency symbol. Default \"$\"."
        },
        "summary": {
          "type": "Array<{ label: string; value: number; isNegative?: boolean }>",
          "required": false,
          "description": "Tax/discount/shipping rows."
        },
        "subtotal": {
          "type": "number",
          "required": false,
          "description": "Override auto-computed subtotal."
        },
        "total": {
          "type": "number",
          "required": false,
          "description": "Override auto-computed grand total."
        },
        "showRowTotals": {
          "type": "boolean",
          "required": false,
          "description": "Show line-totals column. Default true."
        }
      },
      "example": {
        "type": "invoice-lines",
        "props": {
          "currency": "$",
          "lines": [
            {
              "id": "line1",
              "description": "Enterprise annual plan",
              "quantity": 1,
              "unitPrice": 12000,
              "note": "12 months @ $1,000/mo"
            },
            {
              "id": "line2",
              "description": "Premium support add-on",
              "quantity": 12,
              "unitPrice": 500
            },
            {
              "id": "line3",
              "description": "Custom integration setup",
              "quantity": 1,
              "unitPrice": 2500
            }
          ],
          "summary": [
            {
              "label": "Subtotal",
              "value": 18000
            },
            {
              "label": "Tax (8%)",
              "value": 1440
            },
            {
              "label": "Discount",
              "value": 1000,
              "isNegative": true
            }
          ],
          "total": 18440
        }
      }
    },
    {
      "type": "kanban",
      "category": "data",
      "description": "Drag-and-drop kanban board. Cards group into columns by `columnKey`. Bind to receive reordered cards.",
      "props": {
        "columns": {
          "type": "Array<{ id: string; title: string; color?: string }>",
          "required": true,
          "description": "Column definitions."
        },
        "value": {
          "type": "Array<Record<string, unknown> & { id: string | number }>",
          "required": true,
          "description": "Cards (bind to receive reorders)."
        },
        "columnKey": {
          "type": "string",
          "required": false,
          "description": "Card field for column id. Default \"status\"."
        },
        "titleKey": {
          "type": "string",
          "required": false,
          "description": "Card field for title. Default \"title\"."
        },
        "descriptionKey": {
          "type": "string",
          "required": false,
          "description": "Card field for description."
        },
        "badgeKey": {
          "type": "string",
          "required": false,
          "description": "Card field for top-right badge."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when cards are reordered."
        }
      },
      "example": {
        "type": "kanban",
        "props": {
          "columns": [
            {
              "id": "todo",
              "title": "To Do"
            },
            {
              "id": "in-progress",
              "title": "In Progress"
            },
            {
              "id": "done",
              "title": "Done"
            }
          ],
          "columnKey": "status",
          "titleKey": "title",
          "value": [
            {
              "id": 1,
              "title": "Design mockups",
              "status": "todo"
            },
            {
              "id": 2,
              "title": "Review feedback",
              "status": "in-progress"
            },
            {
              "id": 3,
              "title": "Finalize spec",
              "status": "done"
            }
          ]
        }
      },
      "pocket": {
        "state": {
          "cards": [
            {
              "id": 1,
              "title": "Design mockups",
              "status": "todo"
            },
            {
              "id": 2,
              "title": "Review feedback",
              "status": "in-progress"
            },
            {
              "id": 3,
              "title": "Finalize spec",
              "status": "done"
            },
            {
              "id": 4,
              "title": "Write release notes",
              "status": "todo"
            }
          ]
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "kanban",
              "props": {
                "columns": [
                  {
                    "id": "todo",
                    "title": "To Do"
                  },
                  {
                    "id": "in-progress",
                    "title": "In Progress"
                  },
                  {
                    "id": "done",
                    "title": "Done"
                  }
                ],
                "columnKey": "status",
                "titleKey": "title"
              },
              "bind": "state.cards",
              "on_change": {
                "action": "toast",
                "message": "Board updated",
                "variant": "info"
              }
            },
            {
              "type": "text",
              "props": {
                "text": "{state.cards.length} cards across 3 columns"
              }
            }
          ]
        }
      }
    },
    {
      "type": "kbd",
      "category": "display",
      "description": "Inline keyboard shortcut hint, e.g. ⌘K.",
      "props": {
        "keys": {
          "type": "string | string[]",
          "required": true,
          "description": "Key(s) to display."
        },
        "separator": {
          "type": "string",
          "required": false,
          "description": "Separator between keys. Default \"+\"."
        }
      },
      "example": {
        "type": "kbd",
        "props": {
          "keys": [
            "Cmd",
            "K"
          ]
        }
      }
    },
    {
      "type": "kv-table",
      "category": "research",
      "description": "Key-value table with optional striping and multi-column layout. Use for fact sheets, company metrics.",
      "props": {
        "rows": {
          "type": "Array<{ key: string; value: string }>",
          "required": true,
          "description": "Key/value pairs."
        },
        "columns": {
          "type": "number",
          "required": false,
          "description": "Number of columns (1 or 2). Default 1."
        },
        "striped": {
          "type": "boolean",
          "required": false,
          "description": "Alternate row backgrounds."
        }
      },
      "example": {
        "type": "kv-table",
        "props": {
          "columns": 2,
          "striped": true,
          "rows": [
            {
              "key": "P/E Ratio",
              "value": "28.45"
            },
            {
              "key": "Market Cap",
              "value": "$2.95T"
            },
            {
              "key": "Revenue",
              "value": "$394.3B"
            },
            {
              "key": "EPS",
              "value": "$6.45"
            },
            {
              "key": "Dividend Yield",
              "value": "0.47%"
            },
            {
              "key": "Beta",
              "value": "1.22"
            }
          ]
        }
      }
    },
    {
      "type": "link-preview",
      "category": "display",
      "description": "Rich link card with title, description, image, and favicon.",
      "props": {
        "url": {
          "type": "string",
          "required": true,
          "description": "Link URL."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Page title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Page description."
        },
        "image": {
          "type": "string",
          "required": false,
          "description": "Preview image URL."
        },
        "domain": {
          "type": "string",
          "required": false,
          "description": "Custom domain label."
        },
        "favicon": {
          "type": "string",
          "required": false,
          "description": "Favicon URL."
        },
        "layout": {
          "type": "\"horizontal\" | \"vertical\"",
          "required": false,
          "description": "Image position."
        },
        "newTab": {
          "type": "boolean",
          "required": false,
          "description": "Open in new tab. Default true."
        }
      },
      "example": {
        "type": "link-preview",
        "props": {
          "url": "https://svelte.dev",
          "title": "Svelte",
          "description": "Cybernetically enhanced web apps.",
          "domain": "svelte.dev",
          "layout": "horizontal"
        }
      }
    },
    {
      "type": "loading",
      "category": "display",
      "description": "Spinner with optional label. Inline pill or centered block.",
      "props": {
        "size": {
          "type": "number",
          "required": false,
          "description": "Icon size in px. Default 16."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Loading text."
        },
        "inline": {
          "type": "boolean",
          "required": false,
          "description": "Inline (true) or centered block (false)."
        },
        "showLabel": {
          "type": "boolean",
          "required": false,
          "description": "Render label visually (default screen-reader-only)."
        }
      },
      "example": {
        "type": "loading",
        "props": {
          "size": 20,
          "label": "Processing…",
          "inline": true,
          "showLabel": true
        }
      }
    },
    {
      "type": "location-picker",
      "category": "input",
      "description": "Click-or-drag to pick a single { lat, lng } point on a map. Two-way bindable. Uses the same key-free tile presets as the `map` widget.",
      "props": {
        "value": {
          "type": "{ lat: number; lng: number } | null",
          "required": false,
          "description": "Current pick. Use top-level `bind` to two-way bind to a state path."
        },
        "center": {
          "type": "[number, number]",
          "required": false,
          "description": "Initial map center [lat, lng] when `value` is null. Default [0, 0]."
        },
        "zoom": {
          "type": "number",
          "required": false,
          "description": "Initial zoom. Default 2 when value is null, otherwise max(zoom, 13)."
        },
        "tiles": {
          "type": "\"osm\" | \"carto-voyager\" | \"carto-light\" | \"carto-dark\" | \"osm-hot\" | \"custom\"",
          "required": false,
          "description": "Tile provider preset. Default \"carto-voyager\"."
        },
        "tileUrl": {
          "type": "string",
          "required": false,
          "description": "Custom XYZ tile URL template when `tiles` is \"custom\"."
        },
        "tileAttribution": {
          "type": "string",
          "required": false,
          "description": "Attribution HTML for custom tiles."
        },
        "height": {
          "type": "string | number",
          "required": false,
          "description": "Map height. Default \"320px\"."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Marker color (any CSS color, oklch encouraged)."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Help text shown above the map."
        },
        "showReadout": {
          "type": "boolean",
          "required": false,
          "description": "Show formatted lat/lng text below the map. Default true."
        }
      },
      "example": {
        "type": "location-picker",
        "bind": "pickedLocation",
        "props": {
          "label": "Pin the meeting point",
          "center": [
            40.7128,
            -74.006
          ],
          "zoom": 12,
          "height": "320px",
          "tiles": "carto-light"
        }
      }
    },
    {
      "type": "map",
      "category": "data",
      "description": "Leaflet-backed interactive map. Renders markers, polyline paths, polygon geofences, and live trackers (smoothly interpolated moving markers with optional trails). No API key needed for default tiles.",
      "props": {
        "center": {
          "type": "[number, number]",
          "required": false,
          "description": "Initial map center as [lat, lng]. Default [0, 0]."
        },
        "zoom": {
          "type": "number",
          "required": false,
          "description": "Initial zoom level (0–20). Default 2."
        },
        "minZoom": {
          "type": "number",
          "required": false,
          "description": "Minimum allowed zoom."
        },
        "maxZoom": {
          "type": "number",
          "required": false,
          "description": "Maximum allowed zoom."
        },
        "bounds": {
          "type": "[[number, number], [number, number]]",
          "required": false,
          "description": "Fit-to-bounds rectangle [[swLat, swLng], [neLat, neLng]]. Overrides center+zoom when supplied."
        },
        "tiles": {
          "type": "\"osm\" | \"carto-voyager\" | \"carto-light\" | \"carto-dark\" | \"osm-hot\" | \"custom\"",
          "required": false,
          "description": "Tile provider preset. Default \"carto-voyager\". All presets are key-free OpenStreetMap-derived tiles. Use \"custom\" with `tileUrl`."
        },
        "tileUrl": {
          "type": "string",
          "required": false,
          "description": "Custom XYZ tile URL template (used when `tiles` is \"custom\"). Supports {z}/{x}/{y} and {s} subdomain placeholders."
        },
        "tileAttribution": {
          "type": "string",
          "required": false,
          "description": "Attribution HTML for custom tiles. Required by most tile providers."
        },
        "markers": {
          "type": "Array<{ id: string; lat: number; lng: number; label?: string; popup?: string; icon?: string; color?: string; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Static markers. `actions` runs on click (route through ripple emit/api/navigate)."
        },
        "paths": {
          "type": "Array<{ id: string; points: [number, number][]; color?: string; weight?: number; dashed?: boolean; animate?: boolean; label?: string }>",
          "required": false,
          "description": "Polyline paths. Set `animate: true` for a flowing dashed-route effect (great for itineraries)."
        },
        "polygons": {
          "type": "Array<{ id: string; points: [number, number][]; color?: string; fillColor?: string; fillOpacity?: number; weight?: number; label?: string }>",
          "required": false,
          "description": "Filled polygons / geofences / coverage regions."
        },
        "trackers": {
          "type": "Array<{ id: string; lat: number; lng: number; heading?: number; label?: string; color?: string; icon?: string; trail?: [number, number][]; follow?: boolean }>",
          "required": false,
          "description": "Live moving targets — vehicle, courier, ship, person. Position changes interpolate smoothly. `heading` rotates the directional arrow. `trail` draws recent positions. `follow: true` keeps the camera on the target."
        },
        "interactive": {
          "type": "boolean",
          "required": false,
          "description": "Allow zoom/pan/scroll. Default true."
        },
        "showControls": {
          "type": "boolean",
          "required": false,
          "description": "Show zoom +/− controls. Default true."
        },
        "showAttribution": {
          "type": "boolean",
          "required": false,
          "description": "Show tile attribution. Default true. Most tile providers require this."
        },
        "height": {
          "type": "string | number",
          "required": false,
          "description": "Map height (e.g. \"400px\", 320). Default \"400px\"."
        }
      },
      "example": {
        "type": "map",
        "props": {
          "tiles": "carto-voyager",
          "center": [
            37.7749,
            -122.4194
          ],
          "zoom": 12,
          "height": "420px",
          "markers": [
            {
              "id": "hq",
              "lat": 37.7749,
              "lng": -122.4194,
              "label": "HQ",
              "icon": "building",
              "color": "oklch(0.55 0.18 250)"
            },
            {
              "id": "warehouse",
              "lat": 37.79,
              "lng": -122.41,
              "label": "Warehouse",
              "color": "oklch(0.65 0.16 150)",
              "popup": "Order fulfillment center"
            }
          ],
          "paths": [
            {
              "id": "route",
              "points": [
                [
                  37.7749,
                  -122.4194
                ],
                [
                  37.78,
                  -122.412
                ],
                [
                  37.79,
                  -122.41
                ]
              ],
              "color": "oklch(0.55 0.18 250)",
              "weight": 4,
              "dashed": true,
              "animate": true,
              "label": "Delivery route"
            }
          ],
          "polygons": [
            {
              "id": "zone",
              "points": [
                [
                  37.77,
                  -122.43
                ],
                [
                  37.8,
                  -122.43
                ],
                [
                  37.8,
                  -122.39
                ],
                [
                  37.77,
                  -122.39
                ]
              ],
              "color": "oklch(0.65 0.16 150)",
              "fillOpacity": 0.12,
              "label": "Service area"
            }
          ],
          "trackers": [
            {
              "id": "truck-1",
              "lat": 37.785,
              "lng": -122.415,
              "heading": 45,
              "label": "Truck 1",
              "color": "oklch(0.65 0.22 25)",
              "trail": [
                [
                  37.7749,
                  -122.4194
                ],
                [
                  37.78,
                  -122.418
                ],
                [
                  37.785,
                  -122.415
                ]
              ],
              "follow": false
            }
          ]
        }
      }
    },
    {
      "type": "markdown",
      "category": "display",
      "description": "Render markdown with GFM support (tables, strikethrough, autolinks, task lists).",
      "props": {
        "content": {
          "type": "string",
          "required": false,
          "description": "Markdown source."
        },
        "text": {
          "type": "string",
          "required": false,
          "description": "Alias for content."
        },
        "gfm": {
          "type": "boolean",
          "required": false,
          "description": "Enable GitHub-Flavored Markdown. Default true."
        }
      },
      "example": {
        "type": "markdown",
        "props": {
          "content": "# Release notes\n\n- Added two-way bind for inputs\n- Fixed `oninput` event\n\n> See PR #26 for details."
        }
      }
    },
    {
      "type": "master-detail",
      "category": "layout",
      "description": "List on left, detail view on right. Selected item flows into detail spec via loop context.",
      "props": {
        "items": {
          "type": "Array<Record<string, unknown>>",
          "required": true,
          "description": "Items shown in master list."
        },
        "value": {
          "type": "string | number | null",
          "required": false,
          "description": "Currently selected item value."
        },
        "valueKey": {
          "type": "string",
          "required": false,
          "description": "Item field for unique value. Default \"id\"."
        },
        "labelKey": {
          "type": "string",
          "required": false,
          "description": "Item field for label. Default \"label\"."
        },
        "descriptionKey": {
          "type": "string",
          "required": false,
          "description": "Item field for description. Default \"description\"."
        },
        "badgeKey": {
          "type": "string",
          "required": false,
          "description": "Item field for badge. Default \"badge\"."
        },
        "width": {
          "type": "string",
          "required": false,
          "description": "Master pane width. Default \"240px\"."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-state message."
        }
      },
      "example": {
        "type": "master-detail",
        "props": {
          "items": [
            {
              "id": 1,
              "label": "Contract.pdf",
              "description": "12 pages"
            },
            {
              "id": 2,
              "label": "Invoice.pdf",
              "description": "2 pages"
            }
          ],
          "valueKey": "id",
          "labelKey": "label",
          "descriptionKey": "description"
        }
      },
      "pocket": {
        "state": {
          "selectedId": 1,
          "tickets": [
            {
              "id": 1,
              "title": "Login fails on Safari",
              "priority": "high",
              "body": "Users on Safari 17 hit a redirect loop after OAuth."
            },
            {
              "id": 2,
              "title": "Export is slow",
              "priority": "medium",
              "body": "CSV export of >10k rows takes >30s."
            },
            {
              "id": 3,
              "title": "Typo in onboarding",
              "priority": "low",
              "body": "\"Welome\" should be \"Welcome\" on the second step."
            }
          ]
        },
        "ui": {
          "type": "master-detail",
          "props": {
            "items": "{state.tickets}",
            "valueKey": "id",
            "labelKey": "title",
            "descriptionKey": "priority",
            "width": "320px",
            "detail": {
              "type": "flex",
              "props": {
                "direction": "column",
                "gap": "12px"
              },
              "children": [
                {
                  "type": "heading",
                  "props": {
                    "level": 3,
                    "text": "{item.title}"
                  }
                },
                {
                  "type": "badge",
                  "props": {
                    "text": "{item.priority}",
                    "variant": "secondary"
                  }
                },
                {
                  "type": "text",
                  "props": {
                    "text": "{item.body}"
                  }
                }
              ]
            }
          },
          "bind": "state.selectedId"
        }
      }
    },
    {
      "type": "mention",
      "category": "display",
      "description": "Inline @-mention pill with optional hover card showing profile details.",
      "props": {
        "name": {
          "type": "string",
          "required": true,
          "description": "Username (@ added automatically)."
        },
        "displayName": {
          "type": "string",
          "required": false,
          "description": "Full name shown in hover card."
        },
        "avatar": {
          "type": "string",
          "required": false,
          "description": "Avatar URL."
        },
        "role": {
          "type": "string",
          "required": false,
          "description": "User role in hover card."
        },
        "bio": {
          "type": "string",
          "required": false,
          "description": "Bio text in hover card."
        },
        "href": {
          "type": "string",
          "required": false,
          "description": "Profile link URL."
        },
        "plain": {
          "type": "boolean",
          "required": false,
          "description": "Skip hover card; render plain pill only."
        }
      },
      "example": {
        "type": "mention",
        "props": {
          "name": "alice",
          "displayName": "Alice Chen",
          "role": "Product Designer",
          "href": "https://example.com/alice"
        }
      }
    },
    {
      "type": "metric",
      "category": "display",
      "description": "Single KPI tile: large value with label and optional trend badge and description.",
      "props": {
        "label": {
          "type": "string",
          "required": true,
          "description": "Short metric name shown above the value."
        },
        "value": {
          "type": "string | number",
          "required": true,
          "description": "The number or formatted string to display."
        },
        "trend": {
          "type": "string",
          "required": false,
          "description": "Change badge text, e.g. \"+12%\" or \"-3\". Leading +/- drives badge color (green/red)."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Caption below the value. Only shown in default variant."
        },
        "variant": {
          "type": "\"default\" | \"compact\" | \"horizontal\"",
          "required": false,
          "description": "Layout style. Default \"default\"."
        }
      },
      "example": {
        "type": "metric",
        "props": {
          "label": "MRR",
          "value": "$48.2k",
          "trend": "+8.1%",
          "description": "vs. last month"
        }
      }
    },
    {
      "type": "modal",
      "category": "layout",
      "description": "Dialog overlay with controlled open state, header, and dismissal. Sizes: sm/md/lg.",
      "props": {
        "value": {
          "type": "boolean",
          "required": false,
          "description": "Open state. Use with bind for two-way control."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Modal header title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Modal header description."
        },
        "size": {
          "type": "\"sm\" | \"md\" | \"lg\"",
          "required": false,
          "description": "Width constraint. Default \"md\"."
        }
      },
      "example": {
        "type": "modal",
        "props": {
          "value": false,
          "title": "Delete project?",
          "description": "This cannot be undone.",
          "size": "sm"
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "All data will be permanently removed."
            }
          }
        ]
      },
      "pocket": {
        "state": {
          "settingsOpen": false,
          "theme": "light"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "button",
              "props": {
                "label": "Open settings"
              },
              "on_click": {
                "action": "open",
                "target": "settingsOpen"
              }
            },
            {
              "type": "modal",
              "props": {
                "title": "Settings",
                "description": "Personalize your experience.",
                "size": "sm"
              },
              "bind": "state.settingsOpen",
              "children": [
                {
                  "type": "radio-group",
                  "props": {
                    "label": "Theme",
                    "options": [
                      {
                        "value": "light",
                        "label": "Light"
                      },
                      {
                        "value": "dark",
                        "label": "Dark"
                      },
                      {
                        "value": "system",
                        "label": "System"
                      }
                    ]
                  },
                  "bind": "state.theme"
                },
                {
                  "type": "button",
                  "props": {
                    "label": "Done"
                  },
                  "on_click": {
                    "action": "set",
                    "target": "settingsOpen",
                    "value": false
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "multi-select",
      "category": "input",
      "description": "Multi-select dropdown with chip display and optional tag creation.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for selected values array, e.g. \"{state.tags}\"."
        },
        "value": {
          "type": "(string | number)[]",
          "required": false,
          "description": "Selected values."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Trigger placeholder."
        },
        "searchPlaceholder": {
          "type": "string",
          "required": false,
          "description": "Search input placeholder."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-results text."
        },
        "options": {
          "type": "Array<{ value: string | number; label: string; description?: string; disabled?: boolean }>",
          "required": true,
          "description": "Options to choose from."
        },
        "creatable": {
          "type": "boolean",
          "required": false,
          "description": "Allow creating new tags via Enter."
        },
        "maxChips": {
          "type": "number",
          "required": false,
          "description": "Max chips before \"+N more\". Default 3."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable multi-select."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on selection change."
        }
      },
      "example": {
        "type": "multi-select",
        "props": {
          "label": "Tags",
          "options": [
            {
              "value": "feature",
              "label": "Feature"
            },
            {
              "value": "bug",
              "label": "Bug"
            },
            {
              "value": "enhancement",
              "label": "Enhancement"
            },
            {
              "value": "docs",
              "label": "Documentation"
            }
          ],
          "bind": "{state.tags}",
          "creatable": true
        }
      },
      "pocket": {
        "state": {
          "tags": [
            "urgent"
          ]
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "multi-select",
              "props": {
                "label": "Tags",
                "options": [
                  {
                    "value": "urgent",
                    "label": "Urgent"
                  },
                  {
                    "value": "bug",
                    "label": "Bug"
                  },
                  {
                    "value": "feature",
                    "label": "Feature"
                  },
                  {
                    "value": "docs",
                    "label": "Docs"
                  }
                ]
              },
              "bind": "state.tags"
            },
            {
              "type": "text",
              "props": {
                "text": "Selected: {state.tags.length} tag(s)"
              }
            }
          ]
        }
      }
    },
    {
      "type": "news-card",
      "category": "research",
      "description": "News article card with headline, source, timestamp, sentiment tag, and optional thumbnail.",
      "props": {
        "headline": {
          "type": "string",
          "required": true,
          "description": "Article headline."
        },
        "source": {
          "type": "string",
          "required": false,
          "description": "Publisher name."
        },
        "time": {
          "type": "string",
          "required": false,
          "description": "Time (relative or absolute)."
        },
        "sentiment": {
          "type": "\"bullish\" | \"bearish\" | \"neutral\"",
          "required": false,
          "description": "Sentiment tag."
        },
        "image": {
          "type": "string",
          "required": false,
          "description": "Thumbnail URL."
        },
        "url": {
          "type": "string",
          "required": false,
          "description": "Article URL."
        }
      },
      "example": {
        "type": "news-card",
        "props": {
          "headline": "Fed Raises Interest Rates to Combat Inflation",
          "source": "Financial Times",
          "time": "2 hours ago",
          "sentiment": "bearish",
          "url": "https://ft.com/article"
        }
      }
    },
    {
      "type": "notification-center",
      "category": "overlay",
      "description": "Notification inbox with read tracking, unread badge, mark-all-read, and optional inline mode.",
      "props": {
        "value": {
          "type": "Array<{ id: string | number; title: string; description?: string; severity?: \"info\" | \"success\" | \"warning\" | \"destructive\"; read?: boolean }>",
          "required": true,
          "description": "Notifications."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Panel title."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-state text."
        },
        "inline": {
          "type": "boolean",
          "required": false,
          "description": "Hide bell trigger; render inline."
        }
      },
      "example": {
        "type": "notification-center",
        "props": {
          "title": "Notifications",
          "value": [
            {
              "id": 1,
              "title": "Document shared",
              "description": "Sarah shared a document with you",
              "severity": "info",
              "read": false
            },
            {
              "id": 2,
              "title": "Payment received",
              "description": "Invoice #2024-001 paid",
              "severity": "success",
              "read": true
            }
          ]
        }
      }
    },
    {
      "type": "number-input",
      "category": "input",
      "description": "Numeric input with increment/decrement buttons and min/max/step constraints.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.qty}\"."
        },
        "value": {
          "type": "number | null",
          "required": false,
          "description": "Current value."
        },
        "min": {
          "type": "number",
          "required": false,
          "description": "Minimum value."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Maximum value."
        },
        "step": {
          "type": "number",
          "required": false,
          "description": "Step increment. Default 1."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable input."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on value change."
        }
      },
      "example": {
        "type": "number-input",
        "props": {
          "label": "Quantity",
          "min": 1,
          "max": 100,
          "step": 1,
          "bind": "{state.quantity}"
        }
      },
      "pocket": {
        "state": {
          "quantity": 1
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "row",
            "gap": "12px",
            "align": "center"
          },
          "children": [
            {
              "type": "number-input",
              "props": {
                "label": "Quantity",
                "min": 1,
                "max": 99
              },
              "bind": "state.quantity"
            },
            {
              "type": "text",
              "props": {
                "text": "Subtotal: ${state.quantity * 12}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "ops-dashboard",
      "category": "composite",
      "description": "Operations / SRE / NOC dashboard: status banner + service × region matrix + metric mini-charts + incidents feed + recent deploys list.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Heading. Default \"Operations\"."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Subheading."
        },
        "systemStatus": {
          "type": "\"operational\" | \"degraded\" | \"partial-outage\" | \"major-outage\" | \"maintenance\"",
          "required": false,
          "description": "Overall status. Auto-computed from `services` cell statuses if omitted."
        },
        "statusMessage": {
          "type": "string",
          "required": false,
          "description": "Detail line in the status banner."
        },
        "services": {
          "type": "Array<{ id: string; name: string; description?: string; icon?: string; regions: Array<{ region: string; status: \"operational\" | \"degraded\" | \"down\" | \"maintenance\" | \"unknown\"; note?: string }> }>",
          "required": false,
          "description": "Service × region matrix. Each cell is color-coded."
        },
        "regions": {
          "type": "string[]",
          "required": false,
          "description": "Explicit region order; otherwise inferred from service entries."
        },
        "incidents": {
          "type": "Array<{ id: string; title: string; severity?: \"sev1\" | \"sev2\" | \"sev3\" | \"sev4\" | \"info\"; started?: string; status?: \"investigating\" | \"identified\" | \"monitoring\" | \"resolved\"; body?: string; services?: string[] }>",
          "required": false,
          "description": "Active and recent incidents."
        },
        "metrics": {
          "type": "Array<{ label: string; value: string | number; unit?: string; sparkline?: number[]; trend?: \"up\" | \"down\" | \"flat\"; color?: string }>",
          "required": false,
          "description": "Latency, error rate, etc."
        },
        "deploys": {
          "type": "Array<{ id: string; label: string; actor?: string; time: string; status?: \"success\" | \"failed\" | \"in-progress\" | \"reverted\"; sha?: string }>",
          "required": false,
          "description": "Recent deploys / changes feed."
        }
      },
      "example": {
        "type": "ops-dashboard",
        "props": {
          "systemStatus": "partial-outage",
          "statusMessage": "API errors elevated in EU regions; team is investigating.",
          "services": [
            {
              "id": "api",
              "name": "API",
              "icon": "server",
              "regions": [
                {
                  "region": "us-east",
                  "status": "operational"
                },
                {
                  "region": "us-west",
                  "status": "operational"
                },
                {
                  "region": "eu-west",
                  "status": "degraded"
                },
                {
                  "region": "apac",
                  "status": "operational"
                }
              ]
            },
            {
              "id": "web",
              "name": "Web app",
              "icon": "globe",
              "regions": [
                {
                  "region": "us-east",
                  "status": "operational"
                },
                {
                  "region": "us-west",
                  "status": "operational"
                },
                {
                  "region": "eu-west",
                  "status": "operational"
                },
                {
                  "region": "apac",
                  "status": "operational"
                }
              ]
            },
            {
              "id": "db",
              "name": "Database",
              "icon": "database",
              "regions": [
                {
                  "region": "us-east",
                  "status": "operational"
                },
                {
                  "region": "us-west",
                  "status": "operational"
                },
                {
                  "region": "eu-west",
                  "status": "down"
                },
                {
                  "region": "apac",
                  "status": "maintenance"
                }
              ]
            }
          ],
          "metrics": [
            {
              "label": "P95 latency",
              "value": 184,
              "unit": "ms",
              "trend": "up",
              "sparkline": [
                120,
                128,
                140,
                165,
                178,
                184
              ],
              "color": "oklch(0.55 0.22 25)"
            },
            {
              "label": "Error rate",
              "value": "0.42%",
              "trend": "up",
              "sparkline": [
                0.1,
                0.12,
                0.18,
                0.28,
                0.36,
                0.42
              ]
            },
            {
              "label": "Requests/s",
              "value": "12.4k",
              "trend": "flat",
              "sparkline": [
                12,
                12.1,
                12.3,
                12,
                12.4,
                12.4
              ]
            },
            {
              "label": "Active alerts",
              "value": 3
            }
          ],
          "incidents": [
            {
              "id": "i1",
              "severity": "sev2",
              "title": "EU API elevated 5xx errors",
              "status": "investigating",
              "started": "14m ago",
              "services": [
                "api",
                "db"
              ]
            },
            {
              "id": "i2",
              "severity": "sev3",
              "title": "Slow DB query in audit log",
              "status": "identified",
              "started": "38m ago",
              "services": [
                "db"
              ]
            }
          ],
          "deploys": [
            {
              "id": "d1",
              "label": "api: bump v1.42.3",
              "actor": "Alice",
              "time": "08:32",
              "status": "success",
              "sha": "a3f2c1"
            },
            {
              "id": "d2",
              "label": "web: feature flag rollout",
              "actor": "Bob",
              "time": "07:11",
              "status": "success",
              "sha": "0d12bf"
            },
            {
              "id": "d3",
              "label": "api: schema migration",
              "actor": "CI",
              "time": "Yesterday",
              "status": "reverted",
              "sha": "7e9a8b"
            }
          ]
        }
      }
    },
    {
      "type": "order-status",
      "category": "composite",
      "description": "Multi-step shipment status with stepper, ETA, tracking number, optional embedded live map, and an event timeline. Composes the `map` widget when geo data is supplied.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Heading. Defaults to \"Tracking your order\" / \"Delivered\" / \"Order paused\" based on status."
        },
        "orderId": {
          "type": "string",
          "required": true,
          "description": "Order / shipment / job number shown in the eyebrow."
        },
        "status": {
          "type": "\"placed\" | \"confirmed\" | \"preparing\" | \"in-transit\" | \"out-for-delivery\" | \"delivered\" | \"failed\" | \"cancelled\"",
          "required": false,
          "description": "Default-pipeline status. Used to compute the active stepper position when `steps` is not supplied."
        },
        "steps": {
          "type": "Array<{ id: string; label: string; description?: string; completedAt?: string; current?: boolean; failed?: boolean }>",
          "required": false,
          "description": "Custom step list. Overrides the default placed→delivered pipeline."
        },
        "currentStep": {
          "type": "string",
          "required": false,
          "description": "Active step id when using a custom `steps` list."
        },
        "eta": {
          "type": "string",
          "required": false,
          "description": "ETA string (e.g. \"Today, 4 – 6 PM\")."
        },
        "tracking": {
          "type": "{ carrier: string; number: string; url?: string }",
          "required": false,
          "description": "Carrier and tracking number; renders as a link if `url` is provided."
        },
        "origin": {
          "type": "{ name?: string; address?: string; lat?: number; lng?: number }",
          "required": false,
          "description": "Origin place. lat/lng are used to plot a marker on the map."
        },
        "destination": {
          "type": "{ name?: string; address?: string; lat?: number; lng?: number }",
          "required": false,
          "description": "Destination place. lat/lng are used to plot a marker on the map."
        },
        "tracker": {
          "type": "{ lat: number; lng: number; heading?: number; label?: string; color?: string }",
          "required": false,
          "description": "Live courier position. Heading rotates the directional arrow."
        },
        "route": {
          "type": "[number, number][]",
          "required": false,
          "description": "Polyline points for the route. If omitted but origin+destination are set, a dashed line connects them."
        },
        "showMap": {
          "type": "boolean",
          "required": false,
          "description": "Force-show or hide the embedded map. Defaults to true when any geographic data is supplied."
        },
        "mapHeight": {
          "type": "string | number",
          "required": false,
          "description": "Map height. Default \"320px\"."
        },
        "mapTiles": {
          "type": "\"osm\" | \"carto-voyager\" | \"carto-light\" | \"carto-dark\" | \"osm-hot\" | \"custom\"",
          "required": false,
          "description": "Map tile preset. Default \"carto-voyager\"."
        },
        "followTracker": {
          "type": "boolean",
          "required": false,
          "description": "Auto-pan the map to follow the courier. Default false."
        },
        "events": {
          "type": "Array<{ time: string; label: string; location?: string; icon?: string }>",
          "required": false,
          "description": "Activity timeline beneath the map."
        },
        "actions": {
          "type": "Array<{ id?: string; label: string; icon?: string; variant?: \"default\" | \"outline\" | \"ghost\"; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Actions row at the bottom."
        }
      },
      "example": {
        "type": "order-status",
        "props": {
          "orderId": "AC-1042",
          "status": "out-for-delivery",
          "eta": "Today, 4 – 6 PM",
          "tracking": {
            "carrier": "UPS",
            "number": "1Z999AA10123456784",
            "url": "https://www.ups.com/track?tracknum=1Z999AA10123456784"
          },
          "origin": {
            "name": "Acme Warehouse",
            "address": "Oakland, CA",
            "lat": 37.79,
            "lng": -122.41
          },
          "destination": {
            "name": "Customer",
            "address": "500 Howard St, San Francisco, CA",
            "lat": 37.7884,
            "lng": -122.4
          },
          "tracker": {
            "lat": 37.785,
            "lng": -122.405,
            "heading": 45,
            "label": "Driver"
          },
          "events": [
            {
              "time": "11:42 AM",
              "label": "Out for delivery",
              "location": "San Francisco, CA",
              "icon": "truck"
            },
            {
              "time": "07:18 AM",
              "label": "Departed sorting facility",
              "location": "Oakland, CA"
            },
            {
              "time": "Yesterday 9:02 PM",
              "label": "Arrived at sorting facility",
              "location": "Oakland, CA"
            },
            {
              "time": "Yesterday 11:14 AM",
              "label": "Order placed"
            }
          ],
          "actions": [
            {
              "id": "contact",
              "label": "Contact courier",
              "icon": "phone",
              "variant": "outline"
            },
            {
              "id": "issue",
              "label": "Report issue",
              "icon": "alert-triangle",
              "variant": "ghost"
            }
          ]
        }
      }
    },
    {
      "type": "org-chart",
      "category": "vertical",
      "description": "Recursive org chart with manager cards (avatars + titles). Supports multi-level nesting.",
      "props": {
        "root": {
          "type": "{ id: string | number; name: string; title?: string; avatar?: string; children?: Node[] } | null",
          "required": true,
          "description": "Root node with nested children."
        },
        "value": {
          "type": "string | number | null",
          "required": false,
          "description": "Selected node id (use with bind)."
        }
      },
      "example": {
        "type": "org-chart",
        "props": {
          "root": {
            "id": "ceo",
            "name": "Diana Martinez",
            "title": "Chief Executive Officer",
            "children": [
              {
                "id": "cto",
                "name": "Edward Chen",
                "title": "CTO",
                "children": [
                  {
                    "id": "eng-lead",
                    "name": "Fatima Al-Rashid",
                    "title": "Engineering Lead"
                  },
                  {
                    "id": "qa-lead",
                    "name": "Gabriel Santos",
                    "title": "QA Lead"
                  }
                ]
              },
              {
                "id": "cfo",
                "name": "Hannah Park",
                "title": "CFO",
                "children": [
                  {
                    "id": "controller",
                    "name": "Isaac Lincoln",
                    "title": "Controller"
                  }
                ]
              }
            ]
          }
        }
      }
    },
    {
      "type": "otp-input",
      "category": "input",
      "description": "One-time password input with individual character cells. Auto-advances on type.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for OTP value."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Current OTP."
        },
        "length": {
          "type": "number",
          "required": false,
          "description": "Number of cells. Default 6."
        },
        "alpha": {
          "type": "boolean",
          "required": false,
          "description": "Accept alphanumeric (else digits only)."
        },
        "mask": {
          "type": "boolean",
          "required": false,
          "description": "Mask cells like a password."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable input."
        }
      },
      "events": {
        "on_complete": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when all cells are filled."
        },
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on every change."
        }
      },
      "example": {
        "type": "otp-input",
        "props": {
          "label": "Verification code",
          "length": 6,
          "mask": true,
          "bind": "{state.verificationCode}"
        }
      },
      "pocket": {
        "state": {
          "verificationCode": "",
          "verified": false
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "otp-input",
              "props": {
                "label": "Verification code",
                "length": 6,
                "mask": true
              },
              "bind": "state.verificationCode",
              "on_complete": {
                "action": "flow",
                "steps": [
                  {
                    "action": "set",
                    "target": "verified",
                    "value": true
                  },
                  {
                    "action": "toast",
                    "message": "Code accepted",
                    "variant": "success"
                  }
                ]
              }
            },
            {
              "type": "alert",
              "show": "{state.verified}",
              "props": {
                "variant": "success",
                "title": "Verified",
                "description": "Your account is now active."
              }
            }
          ]
        }
      }
    },
    {
      "type": "page-header",
      "category": "layout",
      "description": "Page or section header with title, subtitle, eyebrow text, and right-aligned actions.",
      "props": {
        "title": {
          "type": "string",
          "required": true,
          "description": "Header title."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Subtitle text."
        },
        "eyebrow": {
          "type": "string",
          "required": false,
          "description": "Small uppercase eyebrow above title."
        }
      },
      "example": {
        "type": "page-header",
        "props": {
          "title": "Q2 Performance",
          "subtitle": "Apr 1 — Jun 30",
          "eyebrow": "Sales"
        }
      }
    },
    {
      "type": "people-picker",
      "category": "vertical",
      "description": "Combobox for selecting people from a searchable directory. Shows name, email, optional role badge.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Field label."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Trigger placeholder."
        },
        "searchPlaceholder": {
          "type": "string",
          "required": false,
          "description": "Search input placeholder."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-results text."
        },
        "people": {
          "type": "Array<{ id: string | number; name: string; email?: string; avatar?: string; role?: string; disabled?: boolean }>",
          "required": true,
          "description": "People to choose from."
        },
        "value": {
          "type": "string | number | (string | number)[] | null",
          "required": false,
          "description": "Selected id(s)."
        },
        "multiple": {
          "type": "boolean",
          "required": false,
          "description": "Allow multi-select."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable picker."
        }
      },
      "example": {
        "type": "people-picker",
        "props": {
          "label": "Assign team members",
          "multiple": true,
          "value": [
            "alice",
            "bob"
          ],
          "people": [
            {
              "id": "alice",
              "name": "Alice Johnson",
              "email": "alice@example.com",
              "role": "Admin"
            },
            {
              "id": "bob",
              "name": "Bob Smith",
              "email": "bob@example.com",
              "role": "Editor"
            },
            {
              "id": "carol",
              "name": "Carol Davis",
              "email": "carol@example.com",
              "role": "Viewer"
            }
          ]
        }
      }
    },
    {
      "type": "pipeline-dashboard",
      "category": "composite",
      "description": "Sales / pipeline / funnel archetype: quota progress hero + leaderboard side rail + funnel chart + stage conversion + deals table + live activity ticker.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Page title."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Subheading."
        },
        "period": {
          "type": "string",
          "required": false,
          "description": "Period label (e.g. \"Q2 2026\")."
        },
        "quota": {
          "type": "{ label?: string; current: number; target: number; currency?: string; period?: string }",
          "required": false,
          "description": "Big quota progress hero (current vs target)."
        },
        "funnel": {
          "type": "{ title?: string; stages: Array<{ label: string; value: number; color?: string }> }",
          "required": false,
          "description": "Funnel chart data."
        },
        "conversion": {
          "type": "Array<{ from: string; to: string; rate: number }>",
          "required": false,
          "description": "Stage-to-stage conversion percentages (0–100)."
        },
        "leaderboard": {
          "type": "{ title?: string; items: Array<{ name: string; avatar?: string; value: string | number; delta?: string; sublabel?: string; position?: number }> }",
          "required": false,
          "description": "Leaderboard sidebar (medals on top 3)."
        },
        "deals": {
          "type": "{ title?: string; columns: Array<{ key: string; label: string; align?: \"left\" | \"right\" | \"center\" }>; rows: Record<string, unknown>[] }",
          "required": false,
          "description": "Deals / opportunities table."
        },
        "ticker": {
          "type": "Array<{ time: string; label: string; actor?: string; icon?: string }>",
          "required": false,
          "description": "Live activity ticker."
        }
      },
      "example": {
        "type": "pipeline-dashboard",
        "props": {
          "title": "Sales pipeline",
          "period": "Q2 2026",
          "quota": {
            "label": "Team quota",
            "current": 1820000,
            "target": 2500000,
            "currency": "$",
            "period": "Q2 — 28 days remaining"
          },
          "funnel": {
            "title": "Pipeline funnel",
            "stages": [
              {
                "label": "Leads",
                "value": 1240
              },
              {
                "label": "Qualified",
                "value": 480
              },
              {
                "label": "Proposal",
                "value": 180
              },
              {
                "label": "Negotiation",
                "value": 92
              },
              {
                "label": "Closed won",
                "value": 38
              }
            ]
          },
          "conversion": [
            {
              "from": "Leads",
              "to": "Qualified",
              "rate": 38.7
            },
            {
              "from": "Qualified",
              "to": "Proposal",
              "rate": 37.5
            },
            {
              "from": "Proposal",
              "to": "Negotiation",
              "rate": 51.1
            },
            {
              "from": "Negotiation",
              "to": "Closed won",
              "rate": 41.3
            }
          ],
          "leaderboard": {
            "title": "Top reps",
            "items": [
              {
                "name": "Alex Liu",
                "value": "$420k",
                "delta": "+$80k",
                "sublabel": "12 deals"
              },
              {
                "name": "Sam Patel",
                "value": "$380k",
                "delta": "+$45k",
                "sublabel": "9 deals"
              },
              {
                "name": "Jess Tan",
                "value": "$310k",
                "delta": "+$22k",
                "sublabel": "14 deals"
              },
              {
                "name": "Rico Diaz",
                "value": "$240k",
                "sublabel": "8 deals"
              }
            ]
          },
          "deals": {
            "title": "Recent deals",
            "columns": [
              {
                "key": "name",
                "label": "Deal"
              },
              {
                "key": "stage",
                "label": "Stage"
              },
              {
                "key": "value",
                "label": "Value",
                "align": "right"
              },
              {
                "key": "owner",
                "label": "Owner"
              }
            ],
            "rows": [
              {
                "name": "Globex Q2 expansion",
                "stage": "Negotiation",
                "value": "$120k",
                "owner": "Alex Liu"
              },
              {
                "name": "Hooli SSO add-on",
                "stage": "Proposal",
                "value": "$48k",
                "owner": "Sam Patel"
              },
              {
                "name": "Initech renewal",
                "stage": "Closed won",
                "value": "$62k",
                "owner": "Jess Tan"
              }
            ]
          },
          "ticker": [
            {
              "time": "2m ago",
              "label": "Closed: Globex Q2 expansion",
              "actor": "Alex Liu",
              "icon": "trophy"
            },
            {
              "time": "14m ago",
              "label": "Demo scheduled: Massive Dynamic",
              "actor": "Sam Patel"
            },
            {
              "time": "38m ago",
              "label": "Lead qualified: Pied Piper",
              "actor": "Jess Tan"
            }
          ]
        }
      }
    },
    {
      "type": "permission-matrix",
      "category": "vertical",
      "description": "Grid of roles vs. permissions with toggle checkboxes. Stored as flat map { \"roleId__permissionId\": boolean }.",
      "props": {
        "roles": {
          "type": "Array<{ id: string; label: string; description?: string }>",
          "required": true,
          "description": "Role columns."
        },
        "permissions": {
          "type": "Array<{ id: string; label: string; description?: string }>",
          "required": true,
          "description": "Permission rows."
        },
        "value": {
          "type": "Record<string, boolean>",
          "required": false,
          "description": "Flat key map \"roleId__permissionId\" → boolean."
        },
        "readonly": {
          "type": "boolean",
          "required": false,
          "description": "Disable toggling."
        }
      },
      "example": {
        "type": "permission-matrix",
        "props": {
          "roles": [
            {
              "id": "admin",
              "label": "Admin"
            },
            {
              "id": "editor",
              "label": "Editor"
            },
            {
              "id": "viewer",
              "label": "Viewer"
            }
          ],
          "permissions": [
            {
              "id": "read",
              "label": "Read"
            },
            {
              "id": "create",
              "label": "Create"
            },
            {
              "id": "update",
              "label": "Update"
            },
            {
              "id": "delete",
              "label": "Delete"
            }
          ],
          "value": {
            "admin__read": true,
            "admin__create": true,
            "admin__update": true,
            "admin__delete": true,
            "editor__read": true,
            "editor__create": true,
            "editor__update": true,
            "editor__delete": false,
            "viewer__read": true,
            "viewer__create": false,
            "viewer__update": false,
            "viewer__delete": false
          }
        }
      }
    },
    {
      "type": "popover",
      "category": "overlay",
      "description": "Click-to-open popover with rich content. Supports spec nodes for body. Bind `open` for two-way control.",
      "props": {
        "trigger": {
          "type": "string | UISpec",
          "required": false,
          "description": "Trigger text or spec node."
        },
        "content": {
          "type": "string | UISpec",
          "required": false,
          "description": "Body text or spec node."
        },
        "side": {
          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
          "required": false,
          "description": "Position. Default \"bottom\"."
        },
        "align": {
          "type": "\"start\" | \"center\" | \"end\"",
          "required": false,
          "description": "Alignment."
        },
        "open": {
          "type": "boolean",
          "required": false,
          "description": "Open state (use with bind)."
        }
      },
      "example": {
        "type": "popover",
        "props": {
          "trigger": "View details",
          "content": "Detailed explanation with extra context.",
          "side": "right",
          "open": false
        }
      }
    },
    {
      "type": "pricing-table",
      "category": "vertical",
      "description": "Multi-tier pricing comparison cards with feature checklists, popular badge, and CTAs.",
      "props": {
        "tiers": {
          "type": "Array<{ id: string; name: string; price: string | number; period?: string; description?: string; features?: Array<string | { label: string; included?: boolean }>; cta?: string; popular?: boolean }>",
          "required": true,
          "description": "Pricing tiers."
        },
        "currency": {
          "type": "string",
          "required": false,
          "description": "Currency symbol prepended to numeric prices. Default \"$\"."
        }
      },
      "example": {
        "type": "pricing-table",
        "props": {
          "currency": "$",
          "tiers": [
            {
              "id": "free",
              "name": "Free",
              "price": 0,
              "period": "month",
              "features": [
                {
                  "label": "Up to 3 projects",
                  "included": true
                },
                {
                  "label": "Priority support",
                  "included": false
                }
              ],
              "cta": "Get started"
            },
            {
              "id": "pro",
              "name": "Pro",
              "price": 99,
              "period": "month",
              "features": [
                {
                  "label": "Unlimited projects",
                  "included": true
                },
                {
                  "label": "Priority support",
                  "included": true
                }
              ],
              "cta": "Start trial",
              "popular": true
            },
            {
              "id": "enterprise",
              "name": "Enterprise",
              "price": "Custom",
              "features": [
                {
                  "label": "Unlimited projects",
                  "included": true
                },
                {
                  "label": "SSO",
                  "included": true
                }
              ],
              "cta": "Contact sales"
            }
          ]
        }
      }
    },
    {
      "type": "progress",
      "category": "display",
      "description": "Horizontal progress bar with color and height variants.",
      "props": {
        "value": {
          "type": "number",
          "required": false,
          "description": "Current progress (0 to max)."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Maximum value. Default 100."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Bar color (CSS color)."
        },
        "variant": {
          "type": "\"default\" | \"thin\" | \"thick\"",
          "required": false,
          "description": "Height variant."
        }
      },
      "example": {
        "type": "progress",
        "props": {
          "value": 65,
          "max": 100,
          "variant": "default"
        }
      }
    },
    {
      "type": "progress-ring",
      "category": "display",
      "description": "Circular progress indicator with centered label.",
      "props": {
        "value": {
          "type": "number",
          "required": false,
          "description": "Current progress (0 to max)."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Maximum value. Default 100."
        },
        "size": {
          "type": "number",
          "required": false,
          "description": "Ring diameter in px. Default 64."
        },
        "thickness": {
          "type": "number",
          "required": false,
          "description": "Stroke width in px. Default 6."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Foreground color."
        },
        "trackColor": {
          "type": "string",
          "required": false,
          "description": "Background track color."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Center label. Default \"{percent}%\"."
        },
        "hideLabel": {
          "type": "boolean",
          "required": false,
          "description": "Hide center label."
        }
      },
      "example": {
        "type": "progress-ring",
        "props": {
          "value": 72,
          "max": 100,
          "size": 80,
          "color": "#6366f1"
        }
      }
    },
    {
      "type": "project-dashboard",
      "category": "composite",
      "description": "Project / agile / engineering dashboard: project header (status + progress + lead) + burndown chart + status-breakdown bars + team load list + milestones + recent updates.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Project name."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Project description."
        },
        "status": {
          "type": "\"on-track\" | \"at-risk\" | \"off-track\" | \"completed\" | \"paused\"",
          "required": false,
          "description": "Overall project status."
        },
        "progress": {
          "type": "number",
          "required": false,
          "description": "0–100 overall progress percentage."
        },
        "dueDate": {
          "type": "string",
          "required": false,
          "description": "Due date."
        },
        "lead": {
          "type": "{ name: string; avatar?: string; role?: string }",
          "required": false,
          "description": "Project lead."
        },
        "meta": {
          "type": "Array<{ label: string; value: string; icon?: string }>",
          "required": false,
          "description": "Project metadata (start date, sprint, repo, etc.)."
        },
        "burndown": {
          "type": "{ title?: string; data: Array<{ label: string; value?: number; series?: Record<string, number> }> }",
          "required": false,
          "description": "Burndown chart data; supports `series` for ideal vs actual lines."
        },
        "breakdown": {
          "type": "{ todo?: number; inProgress?: number; done?: number; blocked?: number }",
          "required": false,
          "description": "Task counts; renders proportional bars."
        },
        "team": {
          "type": "Array<{ name: string; avatar?: string; role?: string; load?: number; status?: \"available\" | \"busy\" | \"overloaded\" | \"off\" }>",
          "required": false,
          "description": "Team members. `load` is 0–100 (>100 highlights overload)."
        },
        "updates": {
          "type": "Array<{ time: string; actor?: string; label: string; icon?: string; type?: string }>",
          "required": false,
          "description": "Recent updates / activity feed."
        },
        "milestones": {
          "type": "Array<{ label: string; due?: string; done?: boolean; overdue?: boolean }>",
          "required": false,
          "description": "Milestones with completion / overdue indicators."
        }
      },
      "example": {
        "type": "project-dashboard",
        "props": {
          "title": "Phoenix migration",
          "description": "Move legacy reporting service to the new analytics platform.",
          "status": "at-risk",
          "progress": 64,
          "dueDate": "Jun 30, 2026",
          "lead": {
            "name": "Jamie Park",
            "role": "Tech lead"
          },
          "meta": [
            {
              "label": "Sprint",
              "value": "4 of 6"
            },
            {
              "label": "Repo",
              "value": "acme/phoenix"
            },
            {
              "label": "Started",
              "value": "Mar 4, 2026"
            }
          ],
          "burndown": {
            "title": "Sprint burndown",
            "data": [
              {
                "label": "Day 1",
                "series": {
                  "ideal": 100,
                  "actual": 100
                }
              },
              {
                "label": "Day 3",
                "series": {
                  "ideal": 85,
                  "actual": 92
                }
              },
              {
                "label": "Day 5",
                "series": {
                  "ideal": 70,
                  "actual": 78
                }
              },
              {
                "label": "Day 7",
                "series": {
                  "ideal": 55,
                  "actual": 60
                }
              },
              {
                "label": "Day 9",
                "series": {
                  "ideal": 40,
                  "actual": 48
                }
              },
              {
                "label": "Day 11",
                "series": {
                  "ideal": 25,
                  "actual": 32
                }
              },
              {
                "label": "Day 14",
                "series": {
                  "ideal": 0,
                  "actual": 14
                }
              }
            ]
          },
          "breakdown": {
            "done": 38,
            "inProgress": 12,
            "todo": 18,
            "blocked": 4
          },
          "team": [
            {
              "name": "Jamie Park",
              "role": "Tech lead",
              "load": 85
            },
            {
              "name": "Priya Mehta",
              "role": "Backend",
              "load": 110,
              "status": "overloaded"
            },
            {
              "name": "Marcus Lee",
              "role": "Frontend",
              "load": 70
            },
            {
              "name": "Emma Schmidt",
              "role": "QA",
              "load": 55
            }
          ],
          "milestones": [
            {
              "label": "Schema design",
              "done": true,
              "due": "Mar 18"
            },
            {
              "label": "Data backfill",
              "done": true,
              "due": "Apr 15"
            },
            {
              "label": "Dual-write rollout",
              "due": "May 10",
              "overdue": true
            },
            {
              "label": "Cutover",
              "due": "Jun 25"
            }
          ],
          "updates": [
            {
              "time": "14m ago",
              "label": "Backfill validated for region us-east",
              "actor": "Priya Mehta",
              "icon": "check-circle-2",
              "type": "milestone"
            },
            {
              "time": "2h ago",
              "label": "Dual-write blocked on EU schema review",
              "actor": "Jamie Park",
              "icon": "alert-circle",
              "type": "risk"
            },
            {
              "time": "Yesterday",
              "label": "Sprint planning notes posted",
              "actor": "Emma Schmidt",
              "icon": "file-text",
              "type": "doc"
            }
          ]
        }
      }
    },
    {
      "type": "pros-cons",
      "category": "display",
      "description": "Two-column pros vs. cons comparison with checkmark/X icons.",
      "props": {
        "pros": {
          "type": "string[]",
          "required": false,
          "description": "Pros list."
        },
        "cons": {
          "type": "string[]",
          "required": false,
          "description": "Cons list."
        },
        "prosLabel": {
          "type": "string",
          "required": false,
          "description": "Pros column header."
        },
        "consLabel": {
          "type": "string",
          "required": false,
          "description": "Cons column header."
        }
      },
      "example": {
        "type": "pros-cons",
        "props": {
          "pros": [
            "Easy to learn",
            "Great performance",
            "Strong ecosystem"
          ],
          "cons": [
            "Steep advanced curve",
            "Limited mobile support"
          ]
        }
      }
    },
    {
      "type": "qr",
      "category": "display",
      "description": "QR code for any text payload (URL, vCard, etc.) with error correction and color control.",
      "props": {
        "value": {
          "type": "string",
          "required": true,
          "description": "Payload to encode."
        },
        "size": {
          "type": "number",
          "required": false,
          "description": "Code size in px. Default 160."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Foreground color. Default black."
        },
        "background": {
          "type": "string",
          "required": false,
          "description": "Background color. Default white."
        },
        "ecl": {
          "type": "\"L\" | \"M\" | \"Q\" | \"H\"",
          "required": false,
          "description": "Error correction level."
        },
        "padding": {
          "type": "number",
          "required": false,
          "description": "Quiet zone in modules. Default 2."
        },
        "caption": {
          "type": "string",
          "required": false,
          "description": "Caption below code."
        }
      },
      "example": {
        "type": "qr",
        "props": {
          "value": "https://example.com",
          "size": 160,
          "caption": "Scan to visit"
        }
      }
    },
    {
      "type": "quote",
      "category": "display",
      "description": "Blockquote with optional attribution, avatar, and quote glyph.",
      "props": {
        "text": {
          "type": "string",
          "required": true,
          "description": "Quote text."
        },
        "quote": {
          "type": "string",
          "required": false,
          "description": "Alias for text."
        },
        "author": {
          "type": "string",
          "required": false,
          "description": "Author name."
        },
        "role": {
          "type": "string",
          "required": false,
          "description": "Author role/title."
        },
        "avatar": {
          "type": "string",
          "required": false,
          "description": "Avatar image URL."
        },
        "hideIcon": {
          "type": "boolean",
          "required": false,
          "description": "Hide quote glyph."
        }
      },
      "example": {
        "type": "quote",
        "props": {
          "text": "Innovation distinguishes between a leader and a follower.",
          "author": "Steve Jobs",
          "role": "Co-founder, Apple"
        }
      }
    },
    {
      "type": "radio-group",
      "category": "input",
      "description": "Radio button group for single selection from a list.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Group label."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.choice}\"."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Selected value."
        },
        "options": {
          "type": "string[] | Array<{ value: string; label: string }>",
          "required": true,
          "description": "Radio options."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable all radios."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when selection changes."
        }
      },
      "example": {
        "type": "radio-group",
        "props": {
          "label": "Subscription",
          "options": [
            "Monthly",
            "Annual",
            "Lifetime"
          ],
          "bind": "{state.subscription}"
        }
      },
      "pocket": {
        "state": {
          "delivery": "standard"
        },
        "ui": {
          "type": "radio-group",
          "props": {
            "label": "Delivery",
            "options": [
              {
                "value": "standard",
                "label": "Standard (3-5 days)"
              },
              {
                "value": "express",
                "label": "Express (1-2 days)"
              },
              {
                "value": "pickup",
                "label": "Pickup (today)"
              }
            ]
          },
          "bind": "state.delivery"
        }
      }
    },
    {
      "type": "range-bar",
      "category": "research",
      "description": "Range indicator with min/max bounds, current marker, and optional formatted labels.",
      "props": {
        "min": {
          "type": "number",
          "required": true,
          "description": "Minimum value (left bound)."
        },
        "max": {
          "type": "number",
          "required": true,
          "description": "Maximum value (right bound)."
        },
        "current": {
          "type": "number",
          "required": true,
          "description": "Current value (marker position)."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Range label."
        },
        "minLabel": {
          "type": "string",
          "required": false,
          "description": "Formatted min label."
        },
        "maxLabel": {
          "type": "string",
          "required": false,
          "description": "Formatted max label."
        },
        "currentLabel": {
          "type": "string",
          "required": false,
          "description": "Formatted current label."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Bar color (CSS)."
        }
      },
      "example": {
        "type": "range-bar",
        "props": {
          "label": "Price Target Range",
          "min": 150,
          "max": 220,
          "current": 189.45,
          "minLabel": "$150",
          "maxLabel": "$220",
          "currentLabel": "$189.45",
          "color": "#3b82f6"
        }
      }
    },
    {
      "type": "rating",
      "category": "input",
      "description": "Star rating widget.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.rating}\"."
        },
        "value": {
          "type": "number",
          "required": false,
          "description": "Current rating."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Maximum stars. Default 5."
        },
        "size": {
          "type": "\"sm\" | \"md\" | \"lg\"",
          "required": false,
          "description": "Star size."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable rating."
        },
        "showValue": {
          "type": "boolean",
          "required": false,
          "description": "Show numeric value."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on rating change."
        }
      },
      "example": {
        "type": "rating",
        "props": {
          "label": "Rate this product",
          "max": 5,
          "bind": "{state.productRating}",
          "showValue": true
        }
      },
      "pocket": {
        "state": {
          "productRating": 0,
          "submitted": false
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "rating",
              "props": {
                "label": "Rate this product",
                "max": 5,
                "showValue": true
              },
              "bind": "state.productRating"
            },
            {
              "type": "text",
              "props": {
                "text": "You rated: {state.productRating}/5"
              }
            },
            {
              "type": "button",
              "props": {
                "label": "Submit rating",
                "disabled": "{state.productRating == 0}"
              },
              "on_click": [
                {
                  "action": "set",
                  "target": "submitted",
                  "value": true
                },
                {
                  "action": "toast",
                  "message": "Thanks for the {state.productRating}-star rating!",
                  "variant": "success"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "report-layout",
      "category": "composite",
      "description": "Printable structured-document layout: branded header (logo + brand + title), meta block, body via children, optional footer + watermark. Print CSS hides actions and inverts to a clean B&W document.",
      "props": {
        "title": {
          "type": "string",
          "required": true,
          "description": "Report title."
        },
        "subtitle": {
          "type": "string",
          "required": false,
          "description": "Optional subtitle under the title."
        },
        "logo": {
          "type": "string",
          "required": false,
          "description": "Logo image URL."
        },
        "brand": {
          "type": "string",
          "required": false,
          "description": "Brand name displayed next to the logo."
        },
        "meta": {
          "type": "Array<{ label: string; value: string; icon?: string }>",
          "required": false,
          "description": "Document meta block (period, author, version, generated at, etc.)."
        },
        "footer": {
          "type": "string",
          "required": false,
          "description": "Footnote / legal disclaimer at the bottom."
        },
        "showPrintAction": {
          "type": "boolean",
          "required": false,
          "description": "Show a built-in Print button. Ignored when `actions` is provided. Default true."
        },
        "actions": {
          "type": "Array<{ id?: string; label: string; icon?: string; variant?: \"default\" | \"outline\" | \"ghost\"; actions?: EventAction | EventAction[] }>",
          "required": false,
          "description": "Custom action buttons in the header (e.g. Download, Share)."
        },
        "watermark": {
          "type": "string",
          "required": false,
          "description": "Optional watermark text like \"DRAFT\" or \"CONFIDENTIAL\"."
        },
        "paperWidth": {
          "type": "boolean",
          "required": false,
          "description": "Constrain the body to a print-friendly column. Default true."
        }
      },
      "example": {
        "type": "report-layout",
        "props": {
          "title": "Q1 2026 Compliance Audit",
          "subtitle": "Information security & access controls",
          "brand": "Acme Corp",
          "meta": [
            {
              "label": "Period",
              "value": "Jan 1 – Mar 31, 2026"
            },
            {
              "label": "Generated",
              "value": "May 4, 2026"
            },
            {
              "label": "Author",
              "value": "Internal Audit"
            },
            {
              "label": "Version",
              "value": "1.3"
            }
          ],
          "footer": "Confidential — internal use only. Do not redistribute outside Acme Corp.",
          "watermark": "DRAFT"
        },
        "children": [
          {
            "type": "heading",
            "props": {
              "text": "Executive summary",
              "level": 2
            }
          },
          {
            "type": "text",
            "props": {
              "text": "Findings indicate strong access-control posture with three medium-risk items."
            }
          }
        ]
      }
    },
    {
      "type": "rich-text",
      "category": "input",
      "description": "WYSIWYG rich-text editor with formatting toolbar (Tiptap).",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for HTML content."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "HTML content."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        },
        "hideToolbar": {
          "type": "boolean",
          "required": false,
          "description": "Hide formatting toolbar."
        },
        "minHeight": {
          "type": "string",
          "required": false,
          "description": "Min editor height. Default \"120px\"."
        },
        "maxHeight": {
          "type": "string",
          "required": false,
          "description": "Max editor height (scrollable). Default \"320px\"."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on content change."
        }
      },
      "example": {
        "type": "rich-text",
        "props": {
          "label": "Article body",
          "placeholder": "Write your article…",
          "minHeight": "200px",
          "bind": "{state.articleBody}"
        }
      },
      "pocket": {
        "state": {
          "articleBody": "<p>Start writing…</p>"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "rich-text",
              "props": {
                "label": "Article body",
                "placeholder": "Write your article…",
                "minHeight": "200px"
              },
              "bind": "state.articleBody"
            },
            {
              "type": "text",
              "props": {
                "text": "{state.articleBody.length} characters (HTML)."
              }
            }
          ]
        }
      }
    },
    {
      "type": "ripple-frame",
      "category": "composite",
      "description": "Renders a Ripple spec inside another spec with isolated state. Use for nested demos or independent tiles.",
      "props": {
        "spec": {
          "type": "UISpec | UniversalSpec",
          "required": true,
          "description": "Inner Ripple spec to render."
        },
        "state": {
          "type": "Record<string, unknown>",
          "required": false,
          "description": "Optional state override for the inner instance."
        }
      },
      "example": {
        "type": "ripple-frame",
        "props": {
          "spec": {
            "type": "flex",
            "props": {
              "direction": "column",
              "gap": 2
            },
            "children": [
              {
                "type": "text",
                "props": {
                  "text": "Inner spec"
                }
              },
              {
                "type": "button",
                "props": {
                  "label": "Click me"
                }
              }
            ]
          }
        }
      }
    },
    {
      "type": "sankey",
      "category": "data",
      "description": "Sankey diagram showing flows between nodes. Use for value streams, user journeys.",
      "props": {
        "nodes": {
          "type": "Array<{ name: string }>",
          "required": true,
          "description": "Node names."
        },
        "links": {
          "type": "Array<{ source: string; target: string; value: number }>",
          "required": true,
          "description": "Flows."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 320."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Chart title."
        },
        "orient": {
          "type": "\"horizontal\" | \"vertical\"",
          "required": false,
          "description": "Flow direction."
        },
        "curveness": {
          "type": "number",
          "required": false,
          "description": "Link curve factor 0-1. Default 0.5."
        }
      },
      "example": {
        "type": "sankey",
        "props": {
          "title": "User Journey",
          "nodes": [
            {
              "name": "Landing"
            },
            {
              "name": "Signup"
            },
            {
              "name": "Active"
            },
            {
              "name": "Churn"
            }
          ],
          "links": [
            {
              "source": "Landing",
              "target": "Signup",
              "value": 120
            },
            {
              "source": "Signup",
              "target": "Active",
              "value": 85
            },
            {
              "source": "Active",
              "target": "Churn",
              "value": 15
            }
          ]
        }
      }
    },
    {
      "type": "saved-views",
      "category": "vertical",
      "description": "Tabbed view selector for saved filters/sorts. Renders as tab bar with optional count badges and pin stars.",
      "props": {
        "views": {
          "type": "Array<{ id: string; label: string; icon?: string; pinned?: boolean; count?: number }>",
          "required": true,
          "description": "Saved view tabs."
        },
        "value": {
          "type": "string | null",
          "required": false,
          "description": "Currently active view id (use with bind)."
        },
        "canCreate": {
          "type": "boolean",
          "required": false,
          "description": "Show \"+ New view\" button."
        }
      },
      "example": {
        "type": "saved-views",
        "props": {
          "value": "all",
          "canCreate": true,
          "views": [
            {
              "id": "all",
              "label": "All issues",
              "count": 142,
              "pinned": true
            },
            {
              "id": "assigned",
              "label": "Assigned to me",
              "count": 8
            },
            {
              "id": "high-priority",
              "label": "High priority",
              "icon": "alert-circle",
              "count": 23
            },
            {
              "id": "closed",
              "label": "Closed",
              "count": 2847
            }
          ]
        }
      }
    },
    {
      "type": "search",
      "category": "input",
      "description": "Search input with dropdown results, grouping, keyboard navigation, and shortcuts.",
      "props": {
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for query."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Current query."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        },
        "results": {
          "type": "Array<{ id: string | number; label: string; description?: string; icon?: string; group?: string; href?: string; shortcut?: string }>",
          "required": false,
          "description": "Search results."
        },
        "alwaysShow": {
          "type": "boolean",
          "required": false,
          "description": "Show dropdown even when query is empty."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Empty-results text."
        },
        "loading": {
          "type": "boolean",
          "required": false,
          "description": "Show loading indicator."
        }
      },
      "events": {
        "on_input": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on every keystroke."
        },
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when the query changes."
        },
        "on_select": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when a result is selected."
        }
      },
      "example": {
        "type": "search",
        "props": {
          "placeholder": "Search users…",
          "results": [
            {
              "id": 1,
              "label": "Alice Chen",
              "description": "Product Designer",
              "group": "Users",
              "icon": "user"
            },
            {
              "id": 2,
              "label": "Bob Singh",
              "description": "Engineering Lead",
              "group": "Users",
              "icon": "user"
            }
          ],
          "bind": "{state.searchQuery}"
        }
      },
      "pocket": {
        "state": {
          "searchQuery": "",
          "lastSelected": null
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "search",
              "props": {
                "placeholder": "Search users…",
                "results": [
                  {
                    "id": 1,
                    "label": "Alice Chen",
                    "description": "Product Designer",
                    "group": "Users",
                    "icon": "user"
                  },
                  {
                    "id": 2,
                    "label": "Bob Singh",
                    "description": "Engineering Lead",
                    "group": "Users",
                    "icon": "user"
                  },
                  {
                    "id": 3,
                    "label": "Carol Park",
                    "description": "Customer Success",
                    "group": "Users",
                    "icon": "user"
                  }
                ]
              },
              "bind": "state.searchQuery",
              "on_select": {
                "action": "set",
                "target": "lastSelected",
                "value": "{event}"
              }
            },
            {
              "type": "text",
              "show": "{state.lastSelected != null}",
              "props": {
                "text": "Picked: {state.lastSelected.label}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "section",
      "category": "layout",
      "description": "Content section with optional title and description header. Use for logical page grouping.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Section title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Section description."
        }
      },
      "example": {
        "type": "section",
        "props": {
          "title": "Recent activity",
          "description": "Past 7 days"
        },
        "children": [
          {
            "type": "timeline",
            "props": {
              "density": "compact",
              "events": [
                {
                  "date": "2m ago",
                  "title": "Deploy succeeded",
                  "type": "success"
                },
                {
                  "date": "14m ago",
                  "title": "PR merged",
                  "type": "info"
                }
              ]
            }
          }
        ]
      }
    },
    {
      "type": "segmented",
      "category": "input",
      "description": "Segmented control (toggle group). Use for view switching or compact single/multi-select.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.viewMode}\"."
        },
        "value": {
          "type": "string | number | (string | number)[]",
          "required": false,
          "description": "Selected value (or array if multiple)."
        },
        "options": {
          "type": "string[] | Array<{ value: string | number; label: string; icon?: string; disabled?: boolean }>",
          "required": true,
          "description": "Segment options."
        },
        "multiple": {
          "type": "boolean",
          "required": false,
          "description": "Allow multiple selections."
        },
        "size": {
          "type": "\"sm\" | \"md\"",
          "required": false,
          "description": "Button size."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable all buttons."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on selection change."
        }
      },
      "example": {
        "type": "segmented",
        "props": {
          "label": "View",
          "options": [
            {
              "value": "list",
              "label": "List",
              "icon": "list"
            },
            {
              "value": "grid",
              "label": "Grid",
              "icon": "grid"
            }
          ],
          "bind": "{state.viewMode}"
        }
      },
      "pocket": {
        "state": {
          "view": "list"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "segmented",
              "props": {
                "options": [
                  {
                    "value": "list",
                    "label": "List"
                  },
                  {
                    "value": "grid",
                    "label": "Grid"
                  },
                  {
                    "value": "map",
                    "label": "Map"
                  }
                ]
              },
              "bind": "state.view"
            },
            {
              "type": "text",
              "props": {
                "text": "Showing as: {state.view}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "select",
      "category": "input",
      "description": "Single-select dropdown with options.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.tier}\"."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Selected value."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        },
        "options": {
          "type": "string[] | Array<{ value: string; label: string }>",
          "required": true,
          "description": "Option list."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable select."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired when selection changes."
        }
      },
      "example": {
        "type": "select",
        "props": {
          "label": "Plan",
          "options": [
            {
              "value": "free",
              "label": "Free"
            },
            {
              "value": "pro",
              "label": "Pro"
            },
            {
              "value": "enterprise",
              "label": "Enterprise"
            }
          ],
          "bind": "{state.plan}"
        }
      },
      "pocket": {
        "state": {
          "plan": "pro"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "select",
              "props": {
                "label": "Plan",
                "options": [
                  {
                    "value": "free",
                    "label": "Free"
                  },
                  {
                    "value": "pro",
                    "label": "Pro"
                  },
                  {
                    "value": "enterprise",
                    "label": "Enterprise"
                  }
                ]
              },
              "bind": "state.plan"
            },
            {
              "type": "badge",
              "props": {
                "text": "Current: {state.plan}",
                "variant": "secondary"
              }
            }
          ]
        }
      }
    },
    {
      "type": "separator",
      "category": "layout",
      "description": "Visual divider line (horizontal or vertical) between content sections.",
      "props": {
        "orientation": {
          "type": "\"horizontal\" | \"vertical\"",
          "required": false,
          "description": "Direction. Default \"horizontal\"."
        }
      },
      "example": {
        "type": "separator",
        "props": {
          "orientation": "horizontal"
        }
      }
    },
    {
      "type": "settings-list",
      "category": "vertical",
      "description": "Grouped list of settings with labels, descriptions, and right-aligned control widgets.",
      "props": {
        "items": {
          "type": "Array<{ id?: string; label: string; description?: string; group?: string; control?: UISpec }>",
          "required": true,
          "description": "Settings rows; `control` is a nested widget spec."
        }
      },
      "example": {
        "type": "settings-list",
        "props": {
          "items": [
            {
              "group": "Account",
              "label": "Email address",
              "description": "Your primary login email.",
              "control": {
                "type": "input",
                "props": {
                  "value": "alice@example.com"
                }
              }
            },
            {
              "group": "Account",
              "label": "Two-factor auth",
              "description": "Secure your account.",
              "control": {
                "type": "switch",
                "props": {
                  "checked": true
                }
              }
            },
            {
              "group": "Notifications",
              "label": "Email digests",
              "description": "Receive activity summaries.",
              "control": {
                "type": "switch",
                "props": {
                  "checked": true
                }
              }
            }
          ]
        }
      }
    },
    {
      "type": "sheet",
      "category": "layout",
      "description": "Slide-in panel from any edge (top/right/bottom/left). Use for sidebars and off-canvas menus.",
      "props": {
        "value": {
          "type": "boolean",
          "required": false,
          "description": "Open state. Use with bind."
        },
        "side": {
          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
          "required": false,
          "description": "Slide direction. Default \"right\"."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Sheet header title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Sheet header description."
        }
      },
      "example": {
        "type": "sheet",
        "props": {
          "value": false,
          "side": "right",
          "title": "Filters"
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Filter options here."
            }
          }
        ]
      }
    },
    {
      "type": "sidebar",
      "category": "layout",
      "description": "Navigation sidebar with grouped items, icons, badges, and optional footer. Pair with app-shell.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Sidebar title."
        },
        "items": {
          "type": "Array<{ label: string; icon?: string; href?: string; group?: string; active?: boolean; badge?: string; value?: string }>",
          "required": true,
          "description": "Navigation items."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Currently selected item value."
        }
      },
      "example": {
        "type": "sidebar",
        "props": {
          "title": "Workspace",
          "items": [
            {
              "label": "Inbox",
              "icon": "inbox",
              "value": "inbox",
              "badge": "3"
            },
            {
              "label": "Projects",
              "icon": "folder",
              "value": "projects"
            },
            {
              "label": "Settings",
              "icon": "settings",
              "value": "settings"
            }
          ],
          "value": "inbox"
        }
      }
    },
    {
      "type": "skeleton",
      "category": "display",
      "description": "Loading placeholder shimmer. Variants tune shape: card / dashboard / text.",
      "props": {
        "variant": {
          "type": "\"card\" | \"dashboard\" | \"text\" | \"none\"",
          "required": false,
          "description": "Shape preset."
        }
      },
      "example": {
        "type": "skeleton",
        "props": {
          "variant": "card"
        }
      }
    },
    {
      "type": "slider",
      "category": "input",
      "description": "Range slider with optional label and value display.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.volume}\"."
        },
        "value": {
          "type": "number",
          "required": false,
          "description": "Current value."
        },
        "min": {
          "type": "number",
          "required": false,
          "description": "Minimum. Default 0."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Maximum. Default 100."
        },
        "step": {
          "type": "number",
          "required": false,
          "description": "Step increment. Default 1."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable slider."
        },
        "showValue": {
          "type": "boolean",
          "required": false,
          "description": "Show numeric value badge."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on value change."
        }
      },
      "example": {
        "type": "slider",
        "props": {
          "label": "Volume",
          "min": 0,
          "max": 100,
          "step": 1,
          "bind": "{state.volume}",
          "showValue": true
        }
      },
      "pocket": {
        "state": {
          "volume": 50
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "slider",
              "props": {
                "label": "Volume",
                "min": 0,
                "max": 100,
                "step": 1
              },
              "bind": "state.volume"
            },
            {
              "type": "text",
              "props": {
                "text": "Volume: {state.volume}%"
              }
            }
          ]
        }
      }
    },
    {
      "type": "soul-status",
      "category": "display",
      "description": "Agent soul state — avatar, name, energy, mood, status. Compact pill or expanded card.",
      "props": {
        "name": {
          "type": "string",
          "required": false,
          "description": "Agent name."
        },
        "role": {
          "type": "string",
          "required": false,
          "description": "Agent role."
        },
        "initials": {
          "type": "string",
          "required": false,
          "description": "Avatar initials."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Avatar background color."
        },
        "mood": {
          "type": "string",
          "required": false,
          "description": "Mood emoji/text."
        },
        "energy": {
          "type": "number",
          "required": false,
          "description": "Energy level (0-100)."
        },
        "memories": {
          "type": "number",
          "required": false,
          "description": "Memory count."
        },
        "lastAction": {
          "type": "string",
          "required": false,
          "description": "Last action performed."
        },
        "status": {
          "type": "\"online\" | \"offline\" | \"busy\"",
          "required": false,
          "description": "Online status."
        },
        "compact": {
          "type": "boolean",
          "required": false,
          "description": "Compact pill (true) or expanded card (false)."
        }
      },
      "example": {
        "type": "soul-status",
        "props": {
          "name": "Claude",
          "role": "AI Assistant",
          "color": "#6366f1",
          "mood": "😊",
          "energy": 85,
          "memories": 342,
          "status": "online",
          "compact": true
        }
      }
    },
    {
      "type": "source-card",
      "category": "research",
      "description": "Source card with publisher, headline, and favicon. Use in card grids for articles or research.",
      "props": {
        "source": {
          "type": "string",
          "required": true,
          "description": "Publisher name."
        },
        "title": {
          "type": "string",
          "required": true,
          "description": "Headline text."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Accent color (CSS) — used if favicon fails."
        },
        "favicon": {
          "type": "string",
          "required": false,
          "description": "Favicon URL override."
        },
        "url": {
          "type": "string",
          "required": false,
          "description": "Link URL."
        }
      },
      "example": {
        "type": "source-card",
        "props": {
          "source": "TechCrunch",
          "title": "AI Startup Raises $50M Series B",
          "color": "#ff6b35",
          "url": "https://techcrunch.com/article"
        }
      }
    },
    {
      "type": "sources-bar",
      "category": "research",
      "description": "Horizontal bar with stacked source favicons, count label, and share/copy actions.",
      "props": {
        "sources": {
          "type": "Array<{ name: string; color?: string; favicon?: string; url?: string }>",
          "required": true,
          "description": "Source list."
        },
        "count": {
          "type": "number",
          "required": false,
          "description": "Override displayed count."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text. Default \"sources\"."
        },
        "share": {
          "type": "boolean",
          "required": false,
          "description": "Show share action."
        },
        "copy": {
          "type": "boolean",
          "required": false,
          "description": "Show copy action."
        }
      },
      "example": {
        "type": "sources-bar",
        "props": {
          "sources": [
            {
              "name": "Reuters",
              "url": "https://reuters.com"
            },
            {
              "name": "AP News",
              "url": "https://apnews.com"
            },
            {
              "name": "Wall Street Journal",
              "url": "https://wsj.com"
            }
          ],
          "share": true,
          "copy": true
        }
      }
    },
    {
      "type": "sparkline",
      "category": "data",
      "description": "Compact mini line chart for trend indicators. Color auto-derives from trend direction.",
      "props": {
        "values": {
          "type": "number[]",
          "required": true,
          "description": "Numeric values, oldest to newest."
        },
        "labels": {
          "type": "(string | number)[]",
          "required": false,
          "description": "Optional matching labels for tooltip."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Override trend-driven color."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 36."
        },
        "noTooltip": {
          "type": "boolean",
          "required": false,
          "description": "Hide tooltip on hover."
        }
      },
      "example": {
        "type": "sparkline",
        "props": {
          "values": [
            12,
            18,
            15,
            22,
            28,
            31,
            25
          ],
          "labels": [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun"
          ]
        }
      }
    },
    {
      "type": "split",
      "category": "layout",
      "description": "Resizable two-pane layout (horizontal or vertical) with draggable divider. Use for inspector panels.",
      "props": {
        "direction": {
          "type": "\"horizontal\" | \"vertical\"",
          "required": false,
          "description": "Pane direction. Default \"horizontal\"."
        },
        "defaultSize": {
          "type": "number",
          "required": false,
          "description": "Initial first-pane size as percent. Default 50."
        },
        "minSize": {
          "type": "number",
          "required": false,
          "description": "Minimum first-pane percent. Default 10."
        },
        "maxSize": {
          "type": "number",
          "required": false,
          "description": "Maximum first-pane percent. Default 90."
        }
      },
      "example": {
        "type": "split",
        "props": {
          "direction": "horizontal",
          "defaultSize": 30
        },
        "children": [
          {
            "type": "text",
            "props": {
              "text": "Left navigation"
            }
          },
          {
            "type": "text",
            "props": {
              "text": "Right detail view"
            }
          }
        ]
      }
    },
    {
      "type": "stat",
      "category": "display",
      "description": "Labeled metric with delta, direction, and sentiment colors. Richer than `metric` — supports formatting.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Stat label."
        },
        "value": {
          "type": "number | string",
          "required": true,
          "description": "Main value."
        },
        "format": {
          "type": "\"number\" | \"currency\" | \"percent\" | \"compact\"",
          "required": false,
          "description": "Number format."
        },
        "currency": {
          "type": "string",
          "required": false,
          "description": "Currency code (default USD)."
        },
        "delta": {
          "type": "number",
          "required": false,
          "description": "Absolute change."
        },
        "deltaPercent": {
          "type": "number",
          "required": false,
          "description": "Percent change."
        },
        "deltaFormat": {
          "type": "\"absolute\" | \"percent\" | \"both\"",
          "required": false,
          "description": "How delta renders."
        },
        "direction": {
          "type": "\"up\" | \"down\" | \"neutral\" | \"auto\" | \"up-good\" | \"down-good\"",
          "required": false,
          "description": "Direction indicator."
        },
        "size": {
          "type": "\"sm\" | \"md\" | \"lg\"",
          "required": false,
          "description": "Size variant."
        }
      },
      "example": {
        "type": "stat",
        "props": {
          "label": "Revenue",
          "value": 45230,
          "format": "currency",
          "delta": 2400,
          "deltaPercent": 5.2,
          "direction": "up"
        }
      }
    },
    {
      "type": "status-dot",
      "category": "display",
      "description": "Status indicator dot with online/offline/busy/away presets and optional pulse.",
      "props": {
        "variant": {
          "type": "\"online\" | \"offline\" | \"busy\" | \"away\" | \"custom\"",
          "required": false,
          "description": "Status preset."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Custom dot color (when variant=custom)."
        },
        "label": {
          "type": "string",
          "required": false,
          "description": "Status label shown next to dot."
        },
        "pulse": {
          "type": "boolean",
          "required": false,
          "description": "Animate ping effect."
        },
        "size": {
          "type": "number",
          "required": false,
          "description": "Dot size in px. Default 8."
        }
      },
      "example": {
        "type": "status-dot",
        "props": {
          "variant": "online",
          "label": "Active",
          "pulse": true
        }
      }
    },
    {
      "type": "steps",
      "category": "display",
      "description": "Numbered process steps — vertical (default) or horizontal — with optional descriptions.",
      "props": {
        "steps": {
          "type": "Array<{ title: string; description?: string; number?: number | string }>",
          "required": true,
          "description": "Step items."
        },
        "orientation": {
          "type": "\"vertical\" | \"horizontal\"",
          "required": false,
          "description": "Layout direction."
        }
      },
      "example": {
        "type": "steps",
        "props": {
          "orientation": "vertical",
          "steps": [
            {
              "title": "Install dependencies",
              "description": "Run `npm install`."
            },
            {
              "title": "Configure settings",
              "description": "Update `config.json`."
            },
            {
              "title": "Deploy",
              "description": "Push to production."
            }
          ]
        }
      }
    },
    {
      "type": "switch",
      "category": "input",
      "description": "Toggle switch with optional label.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label shown next to switch."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.enabled}\"."
        },
        "checked": {
          "type": "boolean",
          "required": false,
          "description": "On state."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable switch."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on toggle."
        }
      },
      "example": {
        "type": "switch",
        "props": {
          "label": "Enable notifications",
          "bind": "{state.notificationsEnabled}"
        }
      },
      "pocket": {
        "state": {
          "notificationsEnabled": false
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "12px"
          },
          "children": [
            {
              "type": "switch",
              "props": {
                "label": "Enable notifications"
              },
              "bind": "state.notificationsEnabled"
            },
            {
              "type": "alert",
              "show": "{state.notificationsEnabled}",
              "props": {
                "variant": "info",
                "title": "Notifications on",
                "description": "You will receive desktop alerts."
              }
            }
          ]
        }
      }
    },
    {
      "type": "table",
      "category": "data",
      "description": "Tabular data with sorting, search, and optional pagination. Simpler alternative to data-grid.",
      "props": {
        "rows": {
          "type": "Array<Record<string, unknown>>",
          "required": true,
          "description": "Row objects."
        },
        "columns": {
          "type": "Array<{ header?: string; accessorKey?: string; sortable?: boolean }>",
          "required": true,
          "description": "Column definitions."
        },
        "variant": {
          "type": "\"default\" | \"compact\" | \"striped\" | \"minimal\"",
          "required": false,
          "description": "Visual style."
        },
        "sortable": {
          "type": "boolean",
          "required": false,
          "description": "Enable click-to-sort headers."
        },
        "searchable": {
          "type": "boolean",
          "required": false,
          "description": "Show search input."
        },
        "pageSize": {
          "type": "number",
          "required": false,
          "description": "Rows per page (paginates if set)."
        }
      },
      "example": {
        "type": "table",
        "props": {
          "columns": [
            {
              "header": "Customer",
              "accessorKey": "name",
              "sortable": true
            },
            {
              "header": "Status",
              "accessorKey": "status"
            },
            {
              "header": "Revenue",
              "accessorKey": "revenue",
              "sortable": true
            }
          ],
          "rows": [
            {
              "name": "Acme Corp",
              "status": "Active",
              "revenue": "$52k"
            },
            {
              "name": "Tech Inc",
              "status": "Pending",
              "revenue": "$18k"
            },
            {
              "name": "Growth Ltd",
              "status": "Active",
              "revenue": "$98k"
            }
          ],
          "sortable": true,
          "searchable": true
        }
      }
    },
    {
      "type": "tabs",
      "category": "layout",
      "description": "Tabbed panels. Tab labels go in the `tabs` prop; panel content goes in `children` — one child per tab, matched by index (children[0] renders for tabs[0]).",
      "props": {
        "tabs": {
          "type": "Array<{ value: string; label: string }>",
          "required": true,
          "description": "Tab definitions in display order. `value` is the internal id; `label` is shown on the tab trigger."
        },
        "defaultValue": {
          "type": "string",
          "required": false,
          "description": "Initially active tab's `value`. Defaults to the first tab if omitted."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Controlled active tab value (use with `bind` to drive from state)."
        }
      },
      "example": {
        "type": "tabs",
        "props": {
          "tabs": [
            {
              "value": "overview",
              "label": "Overview"
            },
            {
              "value": "activity",
              "label": "Activity"
            }
          ],
          "defaultValue": "overview"
        },
        "children": [
          {
            "type": "flex",
            "props": {
              "direction": "column",
              "gap": "8px"
            },
            "children": [
              {
                "type": "heading",
                "props": {
                  "level": 4,
                  "text": "Project overview"
                }
              },
              {
                "type": "text",
                "props": {
                  "text": "High-level metrics and status here."
                }
              }
            ]
          },
          {
            "type": "timeline",
            "props": {
              "density": "compact",
              "events": [
                {
                  "date": "2m ago",
                  "title": "Deploy succeeded",
                  "type": "info"
                },
                {
                  "date": "14m ago",
                  "title": "New PR opened",
                  "type": "info"
                }
              ]
            }
          }
        ]
      }
    },
    {
      "type": "terminal",
      "category": "composite",
      "description": "Terminal emulator with stdout/stderr/info/command line types. Optional interactive command input.",
      "props": {
        "lines": {
          "type": "Array<{ text: string; type?: \"stdout\" | \"stderr\" | \"info\" | \"command\"; timestamp?: string }>",
          "required": true,
          "description": "Terminal lines."
        },
        "interactive": {
          "type": "boolean",
          "required": false,
          "description": "Show command input at bottom."
        },
        "maxHeight": {
          "type": "string",
          "required": false,
          "description": "Max height before scrolling. Default \"300px\"."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Window title shown in header bar."
        }
      },
      "example": {
        "type": "terminal",
        "props": {
          "title": "Build Output",
          "interactive": true,
          "lines": [
            {
              "text": "npm run build",
              "type": "command"
            },
            {
              "text": "Building…",
              "type": "info"
            },
            {
              "text": "Build completed",
              "type": "stdout"
            }
          ]
        }
      }
    },
    {
      "type": "text",
      "category": "display",
      "description": "Inline text or paragraph. Use for prose, labels, captions, descriptions.",
      "props": {
        "text": {
          "type": "string",
          "required": false,
          "description": "The text to display. Supports {state.path} expressions. Defaults to empty."
        },
        "size": {
          "type": "\"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\"",
          "required": false,
          "description": "Font size. Default \"base\"."
        },
        "weight": {
          "type": "\"normal\" | \"medium\" | \"semibold\" | \"bold\"",
          "required": false,
          "description": "Font weight. Default \"normal\"."
        },
        "color": {
          "type": "string",
          "required": false,
          "description": "Inline CSS color override."
        },
        "inline": {
          "type": "boolean",
          "required": false,
          "description": "Render as <span> instead of <p>."
        }
      },
      "example": {
        "type": "text",
        "props": {
          "text": "Total revenue this quarter.",
          "size": "sm"
        }
      }
    },
    {
      "type": "textarea",
      "category": "input",
      "description": "Multi-line text input with optional label.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path, e.g. \"{state.description}\"."
        },
        "value": {
          "type": "string",
          "required": false,
          "description": "Textarea value."
        },
        "placeholder": {
          "type": "string",
          "required": false,
          "description": "Placeholder text."
        },
        "rows": {
          "type": "number",
          "required": false,
          "description": "Visible rows. Default 3."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable textarea."
        }
      },
      "events": {
        "on_input": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on every keystroke."
        },
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on blur."
        }
      },
      "example": {
        "type": "textarea",
        "props": {
          "label": "Comments",
          "placeholder": "Share your thoughts…",
          "rows": 4,
          "bind": "{state.comments}"
        }
      },
      "pocket": {
        "state": {
          "feedback": ""
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "textarea",
              "props": {
                "label": "Feedback",
                "placeholder": "Tell us what you think…",
                "rows": 4
              },
              "bind": "state.feedback"
            },
            {
              "type": "text",
              "props": {
                "text": "{state.feedback.length} / 500 characters"
              }
            }
          ]
        }
      }
    },
    {
      "type": "ticker",
      "category": "research",
      "description": "Horizontal ticker strip showing stock symbols, prices, and color-coded changes. Use for market snapshots.",
      "props": {
        "items": {
          "type": "Array<{ symbol: string; price: string; change: string; changePercent?: string }>",
          "required": true,
          "description": "Ticker items."
        }
      },
      "example": {
        "type": "ticker",
        "props": {
          "items": [
            {
              "symbol": "AAPL",
              "price": "$189.45",
              "change": "+2.35",
              "changePercent": "+1.25%"
            },
            {
              "symbol": "MSFT",
              "price": "$425.67",
              "change": "-1.23",
              "changePercent": "-0.29%"
            },
            {
              "symbol": "GOOGL",
              "price": "$178.90",
              "change": "+3.45",
              "changePercent": "+1.96%"
            }
          ]
        }
      }
    },
    {
      "type": "timeline",
      "category": "research",
      "description": "Vertical timeline with typed events, dates, and optional details. Use density:\"compact\" for activity streams; default reads as a milestone log.",
      "props": {
        "events": {
          "type": "Array<{ date: string; title: string; detail?: string; type?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"; color?: string }>",
          "required": true,
          "description": "Timeline events."
        },
        "maxItems": {
          "type": "number",
          "required": false,
          "description": "Truncate after N events."
        },
        "density": {
          "type": "\"comfortable\" | \"compact\"",
          "required": false,
          "description": "Visual density. \"comfortable\" (default) shows a connecting rail and roomy spacing — milestones/roadmap. \"compact\" hides the rail and tightens rows — activity streams (\"Deploy succeeded · 2m ago\")."
        }
      },
      "example": {
        "type": "timeline",
        "props": {
          "events": [
            {
              "date": "Q1 2026",
              "title": "Product Launch",
              "detail": "Shipped new ML features.",
              "type": "success"
            },
            {
              "date": "Q2 2025",
              "title": "Series B Funding",
              "detail": "$50M raised from leading VCs.",
              "type": "success"
            },
            {
              "date": "Q4 2024",
              "title": "Market Expansion",
              "detail": "Entered 5 new countries.",
              "type": "info"
            }
          ]
        }
      }
    },
    {
      "type": "time-picker",
      "category": "input",
      "description": "Time input with optional seconds and 12-hour format.",
      "props": {
        "label": {
          "type": "string",
          "required": false,
          "description": "Label text."
        },
        "bind": {
          "type": "string",
          "required": false,
          "description": "Two-way state path for time string (HH:MM)."
        },
        "value": {
          "type": "string | null",
          "required": false,
          "description": "Time as HH:MM or HH:MM:SS."
        },
        "showSeconds": {
          "type": "boolean",
          "required": false,
          "description": "Show seconds input."
        },
        "use12Hour": {
          "type": "boolean",
          "required": false,
          "description": "Use 12-hour format with AM/PM."
        },
        "disabled": {
          "type": "boolean",
          "required": false,
          "description": "Disable picker."
        },
        "step": {
          "type": "number",
          "required": false,
          "description": "Minute step increment. Default 1."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on time change."
        }
      },
      "example": {
        "type": "time-picker",
        "props": {
          "label": "Meeting time",
          "use12Hour": true,
          "step": 15,
          "bind": "{state.meetingTime}"
        }
      },
      "pocket": {
        "state": {
          "meetingTime": "09:30"
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "time-picker",
              "props": {
                "label": "Meeting time",
                "use12Hour": true,
                "step": 15
              },
              "bind": "state.meetingTime"
            },
            {
              "type": "text",
              "props": {
                "text": "Reminder set for {state.meetingTime}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "toast",
      "category": "overlay",
      "description": "Toast container that displays dismissible notifications at a screen corner. Mount once near the root.",
      "props": {
        "position": {
          "type": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\"",
          "required": false,
          "description": "Screen position. Default \"top-right\"."
        },
        "max": {
          "type": "number",
          "required": false,
          "description": "Max visible toasts. Default 5."
        }
      },
      "example": {
        "type": "toast",
        "props": {
          "position": "top-right",
          "max": 5
        }
      }
    },
    {
      "type": "tooltip",
      "category": "overlay",
      "description": "Text-only tooltip on hover. Use popover for richer content.",
      "props": {
        "trigger": {
          "type": "string | UISpec",
          "required": false,
          "description": "Trigger text or spec node."
        },
        "content": {
          "type": "string",
          "required": false,
          "description": "Tooltip body text."
        },
        "side": {
          "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
          "required": false,
          "description": "Position relative to trigger."
        },
        "align": {
          "type": "\"start\" | \"center\" | \"end\"",
          "required": false,
          "description": "Alignment."
        },
        "delay": {
          "type": "number",
          "required": false,
          "description": "Show delay in ms. Default 200."
        }
      },
      "example": {
        "type": "tooltip",
        "props": {
          "trigger": "Hover me",
          "content": "Helpful context here.",
          "side": "top"
        }
      }
    },
    {
      "type": "tree",
      "category": "data",
      "description": "Hierarchical tree view with expand/collapse, icons, and optional selection.",
      "props": {
        "nodes": {
          "type": "Array<{ id: string | number; label: string; icon?: string; description?: string; children?: TreeNode[] }>",
          "required": true,
          "description": "Nested node tree."
        },
        "value": {
          "type": "string | number | null",
          "required": false,
          "description": "Selected node id (use with bind)."
        },
        "defaultExpanded": {
          "type": "\"none\" | \"first-level\" | \"all\"",
          "required": false,
          "description": "Initial expansion mode."
        }
      },
      "events": {
        "on_change": {
          "type": "EventAction",
          "required": false,
          "description": "Fired on node selection."
        }
      },
      "example": {
        "type": "tree",
        "props": {
          "defaultExpanded": "first-level",
          "nodes": [
            {
              "id": "docs",
              "label": "Docs",
              "icon": "folder",
              "children": [
                {
                  "id": "docs-api",
                  "label": "API",
                  "icon": "file-text"
                },
                {
                  "id": "docs-guide",
                  "label": "Guide",
                  "icon": "book-open"
                }
              ]
            },
            {
              "id": "components",
              "label": "Components",
              "icon": "box"
            }
          ]
        }
      },
      "pocket": {
        "state": {
          "selectedNode": null
        },
        "ui": {
          "type": "flex",
          "props": {
            "direction": "column",
            "gap": "8px"
          },
          "children": [
            {
              "type": "tree",
              "props": {
                "defaultExpanded": "first-level",
                "nodes": [
                  {
                    "id": "docs",
                    "label": "Docs",
                    "icon": "folder",
                    "children": [
                      {
                        "id": "docs-api",
                        "label": "API",
                        "icon": "file-text"
                      },
                      {
                        "id": "docs-guide",
                        "label": "Guide",
                        "icon": "book-open"
                      }
                    ]
                  },
                  {
                    "id": "components",
                    "label": "Components",
                    "icon": "box"
                  }
                ]
              },
              "bind": "state.selectedNode"
            },
            {
              "type": "text",
              "show": "{state.selectedNode != null}",
              "props": {
                "text": "Open: {state.selectedNode}"
              }
            }
          ]
        }
      }
    },
    {
      "type": "treemap",
      "category": "data",
      "description": "Hierarchical treemap showing composition and relative sizes. Click to zoom into nested groups.",
      "props": {
        "data": {
          "type": "Array<{ name: string; value?: number; children?: Node[]; color?: string }>",
          "required": true,
          "description": "Recursive node tree."
        },
        "height": {
          "type": "number",
          "required": false,
          "description": "Height in px. Default 320."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Chart title."
        },
        "showBreadcrumb": {
          "type": "boolean",
          "required": false,
          "description": "Show breadcrumb navigation."
        },
        "showLabels": {
          "type": "boolean",
          "required": false,
          "description": "Show child labels."
        }
      },
      "example": {
        "type": "treemap",
        "props": {
          "title": "Budget Breakdown",
          "data": [
            {
              "name": "Product",
              "value": 50,
              "children": [
                {
                  "name": "Dev",
                  "value": 30
                },
                {
                  "name": "Design",
                  "value": 20
                }
              ]
            },
            {
              "name": "Operations",
              "value": 30
            },
            {
              "name": "Marketing",
              "value": 20
            }
          ]
        }
      }
    },
    {
      "type": "tree-table",
      "category": "data",
      "description": "Table with hierarchical rows and expand/collapse. Combines tree navigation with tabular data.",
      "props": {
        "columns": {
          "type": "Array<{ key: string; label: string; align?: \"left\" | \"center\" | \"right\"; width?: string }>",
          "required": true,
          "description": "Column definitions."
        },
        "rows": {
          "type": "Array<Record<string, unknown> & { id?: string | number; children?: Row[] }>",
          "required": true,
          "description": "Nested rows."
        },
        "defaultExpanded": {
          "type": "\"none\" | \"first-level\" | \"all\"",
          "required": false,
          "description": "Initial expansion mode."
        },
        "value": {
          "type": "string | number | null",
          "required": false,
          "description": "Selected row id (use with bind)."
        },
        "striped": {
          "type": "boolean",
          "required": false,
          "description": "Alternate row backgrounds."
        },
        "dense": {
          "type": "boolean",
          "required": false,
          "description": "Compact row density."
        }
      },
      "example": {
        "type": "tree-table",
        "props": {
          "columns": [
            {
              "key": "name",
              "label": "Project"
            },
            {
              "key": "status",
              "label": "Status"
            },
            {
              "key": "progress",
              "label": "Progress"
            }
          ],
          "rows": [
            {
              "id": 1,
              "name": "Alpha",
              "status": "In Progress",
              "progress": "60%",
              "children": [
                {
                  "id": "1.1",
                  "name": "Design",
                  "status": "Done",
                  "progress": "100%"
                },
                {
                  "id": "1.2",
                  "name": "Dev",
                  "status": "In Progress",
                  "progress": "50%"
                }
              ]
            },
            {
              "id": 2,
              "name": "Beta",
              "status": "Planning",
              "progress": "10%"
            }
          ]
        }
      }
    },
    {
      "type": "trend",
      "category": "display",
      "description": "Inline delta badge with arrow and formatted value (percent / number / currency).",
      "props": {
        "value": {
          "type": "number",
          "required": true,
          "description": "Delta value (sign drives arrow direction)."
        },
        "format": {
          "type": "\"percent\" | \"number\" | \"currency\"",
          "required": false,
          "description": "Value format."
        },
        "currency": {
          "type": "string",
          "required": false,
          "description": "Currency code."
        },
        "arrow": {
          "type": "boolean",
          "required": false,
          "description": "Show up/down arrow. Default true."
        },
        "precision": {
          "type": "number",
          "required": false,
          "description": "Decimal places. Default 1."
        }
      },
      "example": {
        "type": "trend",
        "props": {
          "value": 12.4,
          "format": "percent",
          "arrow": true
        }
      }
    },
    {
      "type": "virtual-list",
      "category": "data",
      "description": "Virtualized list for large datasets. Renders only visible rows.",
      "props": {
        "items": {
          "type": "unknown[]",
          "required": true,
          "description": "Items to render."
        },
        "itemHeight": {
          "type": "number",
          "required": false,
          "description": "Fixed row height in px. Default 36."
        },
        "height": {
          "type": "string | number",
          "required": false,
          "description": "Container height. Default \"320px\"."
        },
        "overscan": {
          "type": "number",
          "required": false,
          "description": "Extra rows above/below visible window. Default 5."
        },
        "emptyText": {
          "type": "string",
          "required": false,
          "description": "Text when items is empty."
        }
      },
      "example": {
        "type": "virtual-list",
        "props": {
          "itemHeight": 40,
          "height": "320px",
          "items": [
            {
              "label": "Acme Corp"
            },
            {
              "label": "Tech Inc"
            },
            {
              "label": "Growth Ltd"
            }
          ]
        }
      }
    },
    {
      "type": "wizard-layout",
      "category": "composite",
      "description": "Multi-step wizard with numbered step indicator and sticky back/next/cancel bar. Render per-step content via `if` against {state.currentStep}. On the last step the next button becomes `finishLabel`.",
      "props": {
        "title": {
          "type": "string",
          "required": false,
          "description": "Wizard title."
        },
        "description": {
          "type": "string",
          "required": false,
          "description": "Wizard description."
        },
        "steps": {
          "type": "Array<{ id: string; label: string; description?: string; icon?: string; valid?: boolean; optional?: boolean }>",
          "required": true,
          "description": "Steps. `valid: false` blocks Next. `optional: true` shows an \"Optional\" pip."
        },
        "currentStep": {
          "type": "string",
          "required": false,
          "description": "Bound active step id. Use top-level `bind` to two-way bind to a state path (e.g. `bind: \"currentStep\"`)."
        },
        "orientation": {
          "type": "\"horizontal\" | \"vertical\"",
          "required": false,
          "description": "Step indicator orientation. Default \"horizontal\"."
        },
        "nextLabel": {
          "type": "string",
          "required": false,
          "description": "Default \"Next\"."
        },
        "backLabel": {
          "type": "string",
          "required": false,
          "description": "Default \"Back\"."
        },
        "finishLabel": {
          "type": "string",
          "required": false,
          "description": "Label on the last step. Default \"Submit\"."
        },
        "cancelLabel": {
          "type": "string",
          "required": false,
          "description": "Default \"Cancel\"."
        },
        "showCancel": {
          "type": "boolean",
          "required": false,
          "description": "Default true."
        },
        "allowJumpBack": {
          "type": "boolean",
          "required": false,
          "description": "Allow clicking visited steps to jump back. Default true."
        },
        "nextActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions to dispatch when Next is clicked (before advancing)."
        },
        "backActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions to dispatch when Back is clicked (before retreating)."
        },
        "finishActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions to dispatch when Submit is clicked on the last step."
        },
        "cancelActions": {
          "type": "EventAction | EventAction[]",
          "required": false,
          "description": "Actions to dispatch when Cancel is clicked."
        }
      },
      "example": {
        "type": "wizard-layout",
        "bind": "currentStep",
        "props": {
          "title": "New project",
          "steps": [
            {
              "id": "basics",
              "label": "Basics",
              "description": "Name & repo"
            },
            {
              "id": "team",
              "label": "Team",
              "description": "Owners & access"
            },
            {
              "id": "integrations",
              "label": "Integrations",
              "optional": true
            },
            {
              "id": "review",
              "label": "Review"
            }
          ],
          "finishActions": [
            {
              "action": "toast",
              "message": "Project created",
              "variant": "success"
            }
          ]
        },
        "children": [
          {
            "type": "if",
            "condition": "state.currentStep === \"basics\"",
            "children": [
              {
                "type": "input",
                "bind": "projectName",
                "props": {
                  "label": "Project name"
                }
              }
            ]
          },
          {
            "type": "if",
            "condition": "state.currentStep === \"team\"",
            "children": [
              {
                "type": "people-picker",
                "bind": "team",
                "props": {
                  "label": "Team members"
                }
              }
            ]
          },
          {
            "type": "if",
            "condition": "state.currentStep === \"review\"",
            "children": [
              {
                "type": "text",
                "props": {
                  "text": "Review your choices."
                }
              }
            ]
          }
        ]
      },
      "pocket": {
        "state": {
          "currentStep": "basics",
          "projectName": "",
          "team": []
        },
        "ui": {
          "type": "wizard-layout",
          "bind": "state.currentStep",
          "props": {
            "title": "New project",
            "description": "Set up a new project in three steps.",
            "steps": [
              {
                "id": "basics",
                "label": "Basics",
                "description": "Name & repo",
                "valid": "{state.projectName.length > 0}"
              },
              {
                "id": "team",
                "label": "Team",
                "description": "Owners & access"
              },
              {
                "id": "review",
                "label": "Review"
              }
            ],
            "finishActions": [
              {
                "action": "toast",
                "message": "Project \"{state.projectName}\" created",
                "variant": "success"
              }
            ]
          },
          "children": [
            {
              "type": "if",
              "condition": "state.currentStep == \"basics\"",
              "children": [
                {
                  "type": "input",
                  "props": {
                    "label": "Project name",
                    "placeholder": "e.g. atlas-migration"
                  },
                  "bind": "state.projectName"
                }
              ]
            },
            {
              "type": "if",
              "condition": "state.currentStep == \"team\"",
              "children": [
                {
                  "type": "text",
                  "props": {
                    "text": "Add team members or skip to continue."
                  }
                }
              ]
            },
            {
              "type": "if",
              "condition": "state.currentStep == \"review\"",
              "children": [
                {
                  "type": "text",
                  "props": {
                    "text": "Project: {state.projectName}"
                  }
                },
                {
                  "type": "text",
                  "props": {
                    "text": "Click Submit to create."
                  }
                }
              ]
            }
          ]
        }
      }
    },
    {
      "type": "workflow",
      "category": "data",
      "description": "Interactive node-based workflow diagram with auto-layout, pan/zoom, and minimap.",
      "props": {
        "nodes": {
          "type": "Array<{ id: string; type?: string; label: string; icon?: string; status?: string; position?: { x: number; y: number } }>",
          "required": true,
          "description": "Workflow nodes."
        },
        "edges": {
          "type": "Array<{ from: string; to: string; label?: string; animated?: boolean }>",
          "required": true,
          "description": "Edges connecting nodes."
        },
        "title": {
          "type": "string",
          "required": false,
          "description": "Title shown above canvas."
        },
        "interactive": {
          "type": "boolean",
          "required": false,
          "description": "Enable pan/zoom/drag. Default true."
        },
        "minimap": {
          "type": "boolean",
          "required": false,
          "description": "Show minimap."
        },
        "fitView": {
          "type": "boolean",
          "required": false,
          "description": "Auto-fit nodes on render. Default true."
        }
      },
      "example": {
        "type": "workflow",
        "props": {
          "title": "Payment Flow",
          "interactive": true,
          "minimap": true,
          "nodes": [
            {
              "id": "1",
              "type": "trigger",
              "label": "Start",
              "icon": "play",
              "status": "idle"
            },
            {
              "id": "2",
              "type": "action",
              "label": "Process Payment",
              "icon": "credit-card",
              "status": "idle"
            },
            {
              "id": "3",
              "type": "condition",
              "label": "Approved?",
              "icon": "check",
              "status": "idle"
            }
          ],
          "edges": [
            {
              "from": "1",
              "to": "2"
            },
            {
              "from": "2",
              "to": "3"
            }
          ]
        }
      }
    }
  ]
}