| { |
| "root": "Stack", |
| "components": { |
| "Card": { |
| "signature": "Card(children: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock | Tabs | Carousel | Stack)[], variant?: \"card\" | \"sunk\" | \"clear\", direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)", |
| "description": "Styled container. variant: \"card\" (default, elevated) | \"sunk\" (recessed) | \"clear\" (transparent). Always full width. Accepts all Stack flex params (default: direction \"column\"). Cards flex to share space in row/wrap layouts." |
| }, |
| "CardHeader": { |
| "signature": "CardHeader(title?: string, subtitle?: string)", |
| "description": "Header with optional title and subtitle" |
| }, |
| "TextContent": { |
| "signature": "TextContent(text: string, size?: \"small\" | \"default\" | \"large\" | \"small-heavy\" | \"large-heavy\")", |
| "description": "Text block. Supports markdown. Optional size: \"small\" | \"default\" | \"large\" | \"small-heavy\" | \"large-heavy\"." |
| }, |
| "MarkDownRenderer": { |
| "signature": "MarkDownRenderer(textMarkdown: string, variant?: \"clear\" | \"card\" | \"sunk\")", |
| "description": "Renders markdown text with optional container variant" |
| }, |
| "Callout": { |
| "signature": "Callout(variant: \"info\" | \"warning\" | \"error\" | \"success\" | \"neutral\", title: string, description: string, visible?: $binding<boolean>)", |
| "description": "Callout banner. Optional visible is a reactive $boolean — auto-dismisses after 3s by setting $visible to false." |
| }, |
| "TextCallout": { |
| "signature": "TextCallout(variant?: \"neutral\" | \"info\" | \"warning\" | \"success\" | \"danger\", title?: string, description?: string)", |
| "description": "Text callout with variant, title, and description" |
| }, |
| "Image": { |
| "signature": "Image(alt: string, src?: string)", |
| "description": "Image with alt text and optional URL" |
| }, |
| "ImageBlock": { |
| "signature": "ImageBlock(src: string, alt?: string)", |
| "description": "Image block with loading state" |
| }, |
| "ImageGallery": { |
| "signature": "ImageGallery(images: {src: string, alt?: string, details?: string}[])", |
| "description": "Gallery grid of images with modal preview" |
| }, |
| "CodeBlock": { |
| "signature": "CodeBlock(language: string, codeString: string)", |
| "description": "Syntax-highlighted code block" |
| }, |
| "InlineHeader": { |
| "signature": "InlineHeader(heading: string, description?: string)", |
| "description": "Compact section heading with an optional one-line description, for use inside cards." |
| }, |
| "Table": { |
| "signature": "Table(columns: Col[])", |
| "description": "Data table — column-oriented. Each Col holds its own data array." |
| }, |
| "Col": { |
| "signature": "Col(label: string, data: any, type?: \"string\" | \"number\" | \"action\")", |
| "description": "Column definition — holds label + data array" |
| }, |
| "EditableTable": { |
| "signature": "EditableTable(name?: string, columns?: {type: \"text\" | \"number\" | \"date-single\" | \"select\" | \"url\", key?: string, header?: string, width?: number, options?: {value: string, label: string}[]}[], data?: {id: string, values: (string | number)[]}[])", |
| "description": "Spreadsheet-like table whose cells the user can edit inline (text, number, url, date, select columns); edits are saved back as a form field" |
| }, |
| "BarChart": { |
| "signature": "BarChart(labels: string[], series: Series[], variant?: \"grouped\" | \"stacked\", xLabel?: string, yLabel?: string, height?: number)", |
| "description": "Vertical bars; use for comparing values across categories with one or more series" |
| }, |
| "LineChart": { |
| "signature": "LineChart(labels: string[], series: Series[], variant?: \"linear\" | \"natural\" | \"step\", xLabel?: string, yLabel?: string, height?: number)", |
| "description": "Lines over categories; use for trends and continuous data over time" |
| }, |
| "AreaChart": { |
| "signature": "AreaChart(labels: string[], series: Series[], variant?: \"linear\" | \"natural\" | \"step\", xLabel?: string, yLabel?: string, height?: number)", |
| "description": "Filled area under lines; use for cumulative totals or volume trends over time" |
| }, |
| "RadarChart": { |
| "signature": "RadarChart(labels: string[], series: Series[])", |
| "description": "Spider/web chart; use for comparing multiple variables across one or more entities" |
| }, |
| "HorizontalBarChart": { |
| "signature": "HorizontalBarChart(labels: string[], series: Series[], variant?: \"grouped\" | \"stacked\", xLabel?: string, yLabel?: string)", |
| "description": "Horizontal bars; prefer when category labels are long or for ranked lists" |
| }, |
| "Series": { |
| "signature": "Series(category: string, values: number[])", |
| "description": "One data series" |
| }, |
| "PieChart": { |
| "signature": "PieChart(labels: string[], values: number[], variant?: \"pie\" | \"donut\", appearance?: \"circular\" | \"semiCircular\")", |
| "description": "Circular slices; use plucked arrays: PieChart(data.categories, data.values)" |
| }, |
| "RadialChart": { |
| "signature": "RadialChart(labels: string[], values: number[])", |
| "description": "Radial bars; use plucked arrays: RadialChart(data.categories, data.values)" |
| }, |
| "SingleStackedBarChart": { |
| "signature": "SingleStackedBarChart(labels: string[], values: number[])", |
| "description": "Single horizontal stacked bar; use plucked arrays: SingleStackedBarChart(data.categories, data.values)" |
| }, |
| "Slice": { |
| "signature": "Slice(category: string, value: number)", |
| "description": "One slice with label and numeric value" |
| }, |
| "ScatterChart": { |
| "signature": "ScatterChart(datasets: ScatterSeries[], xLabel?: string, yLabel?: string)", |
| "description": "X/Y scatter plot; use for correlations, distributions, and clustering" |
| }, |
| "ScatterSeries": { |
| "signature": "ScatterSeries(name: string, points: Point[])", |
| "description": "Named dataset" |
| }, |
| "Point": { |
| "signature": "Point(x: number, y: number, z?: number)", |
| "description": "Data point with numeric coordinates" |
| }, |
| "Form": { |
| "signature": "Form(name: string, buttons: Buttons, fields?: FormControl[])", |
| "description": "Form container with fields and explicit action buttons" |
| }, |
| "FormControl": { |
| "signature": "FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slider | CheckBoxGroup | RadioGroup | Chips | OptionCards, hint?: string)", |
| "description": "Field with label, input component, and optional hint text" |
| }, |
| "Label": { |
| "signature": "Label(text: string)", |
| "description": "Text label" |
| }, |
| "Input": { |
| "signature": "Input(name: string, placeholder?: string, type?: \"text\" | \"email\" | \"password\" | \"number\" | \"url\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)", |
| "description": "" |
| }, |
| "TextArea": { |
| "signature": "TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)", |
| "description": "" |
| }, |
| "Select": { |
| "signature": "Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>, size?: \"small\" | \"medium\" | \"large\")", |
| "description": "" |
| }, |
| "SelectItem": { |
| "signature": "SelectItem(value: string, label: string)", |
| "description": "Option for Select" |
| }, |
| "DatePicker": { |
| "signature": "DatePicker(name: string, mode?: \"single\" | \"range\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)", |
| "description": "" |
| }, |
| "Slider": { |
| "signature": "Slider(name: string, variant: \"continuous\" | \"discrete\", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>)", |
| "description": "Numeric slider input; supports continuous and discrete (stepped) variants" |
| }, |
| "CheckBoxGroup": { |
| "signature": "CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)", |
| "description": "" |
| }, |
| "CheckBoxItem": { |
| "signature": "CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)", |
| "description": "" |
| }, |
| "RadioGroup": { |
| "signature": "RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)", |
| "description": "" |
| }, |
| "RadioItem": { |
| "signature": "RadioItem(label: string, description: string, value: string)", |
| "description": "" |
| }, |
| "SwitchGroup": { |
| "signature": "SwitchGroup(name: string, items: SwitchItem[], variant?: \"clear\" | \"card\" | \"sunk\", value?: $binding<Record<string, boolean>>)", |
| "description": "Group of switch toggles" |
| }, |
| "SwitchItem": { |
| "signature": "SwitchItem(label?: string, description?: string, name: string, defaultChecked?: boolean)", |
| "description": "Individual switch toggle" |
| }, |
| "ChipItem": { |
| "signature": "ChipItem(value: string, label: string, icon?: Icon, disabled?: boolean)", |
| "description": "A single selectable chip inside a Chips group, with a value, label and optional icon." |
| }, |
| "Chips": { |
| "signature": "Chips(name: string, type?: \"single\" | \"multiple\", items?: ChipItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, defaultValue?: string | string[])", |
| "description": "A form field of compact selectable chips for choosing one or many short options; the selection is stored under `name`." |
| }, |
| "OptionCard": { |
| "signature": "OptionCard(value: string, title: string, subtitle?: string, topContent?: Icon | Image, disabled?: boolean)", |
| "description": "A single selectable card inside an OptionCards group, with a value, title, optional subtitle and an optional Icon or Image on top." |
| }, |
| "OptionCards": { |
| "signature": "OptionCards(name: string, type?: \"single\" | \"multiple\", items?: OptionCard[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, defaultValue?: string | string[])", |
| "description": "A form field of selectable cards (title, optional subtitle, optional icon or image) laid out in a responsive grid for choosing one or many options; the selection is stored under `name`." |
| }, |
| "Button": { |
| "signature": "Button(label: string, action?: ActionExpression, variant?: \"primary\" | \"secondary\" | \"tertiary\", type?: \"normal\" | \"destructive\", size?: \"extra-small\" | \"small\" | \"medium\" | \"large\")", |
| "description": "Clickable button" |
| }, |
| "Buttons": { |
| "signature": "Buttons(buttons: Button[], direction?: \"row\" | \"column\")", |
| "description": "Group of Button components. direction: \"row\" (default) | \"column\"." |
| }, |
| "IconButton": { |
| "signature": "IconButton(name: string, icon: Icon, action?: ActionExpression, variant?: \"primary\" | \"secondary\" | \"tertiary\", size?: \"extra-small\" | \"small\" | \"medium\" | \"large\", shape?: \"square\" | \"circle\")", |
| "description": "Icon-only button. name is the accessible label and the action label; icon is an Icon; action fires on click." |
| }, |
| "Stack": { |
| "signature": "Stack(children: any[], direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)", |
| "description": "Flex container. direction: \"row\"|\"column\" (default \"column\"). gap: \"none\"|\"xs\"|\"s\"|\"m\"|\"l\"|\"xl\"|\"2xl\" (default \"m\"). align: \"start\"|\"center\"|\"end\"|\"stretch\"|\"baseline\". justify: \"start\"|\"center\"|\"end\"|\"between\"|\"around\"|\"evenly\"." |
| }, |
| "Tabs": { |
| "signature": "Tabs(items: TabItem[])", |
| "description": "Tabbed container" |
| }, |
| "TabItem": { |
| "signature": "TabItem(value: string, trigger: string, content: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[])", |
| "description": "value is unique id, trigger is tab label, content is array of components" |
| }, |
| "Accordion": { |
| "signature": "Accordion(items: AccordionItem[])", |
| "description": "Collapsible sections" |
| }, |
| "AccordionItem": { |
| "signature": "AccordionItem(value: string, trigger: string, content: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[])", |
| "description": "value is unique id, trigger is section title" |
| }, |
| "Steps": { |
| "signature": "Steps(items: StepsItem[])", |
| "description": "Step-by-step guide" |
| }, |
| "StepsItem": { |
| "signature": "StepsItem(title: string, details: string)", |
| "description": "title and details text for one step" |
| }, |
| "Carousel": { |
| "signature": "Carousel(children: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[][], variant?: \"card\" | \"sunk\")", |
| "description": "Horizontal scrollable carousel" |
| }, |
| "Separator": { |
| "signature": "Separator(orientation?: \"horizontal\" | \"vertical\", decorative?: boolean)", |
| "description": "Visual divider between content sections" |
| }, |
| "TagBlock": { |
| "signature": "TagBlock(tags: string[], size?: \"sm\" | \"md\" | \"lg\")", |
| "description": "tags is an array of strings; optional size sm | md | lg" |
| }, |
| "Tag": { |
| "signature": "Tag(text: string, icon?: Icon, size?: \"sm\" | \"md\" | \"lg\", variant?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\")", |
| "description": "Styled tag/badge with optional Icon and variant" |
| }, |
| "Icon": { |
| "signature": "Icon(name: string, category?: string)", |
| "description": "A lucide icon by kebab-case name (e.g. 'circle-check'). Optional category picks a topical fallback when the name doesn't resolve." |
| }, |
| "EntityList": { |
| "signature": "EntityList(rows?: {left: string, right: string, rightVariant?: \"text\" | \"number\"}[], size?: \"small\" | \"default\", header?: {left: string, right: string, rightVariant?: \"text\" | \"number\"}, footer?: {left: string, right: string, rightVariant?: \"text\" | \"number\"})", |
| "description": "Two-column key/value rows (left label, right value). size 'default' supports optional header and footer rows; rightVariant 'number' uses tabular numbers." |
| }, |
| "ListBlock": { |
| "signature": "ListBlock(items: ListItem[], variant?: \"number\" | \"image\", size?: \"default\" | \"small\")", |
| "description": "A list of items with number or image indicators. Each item can optionally have an action. size small renders a compact list." |
| }, |
| "ListItem": { |
| "signature": "ListItem(title: string, subtitle?: string, image?: {src: string, alt: string}, actionLabel?: string, action?: ActionExpression)", |
| "description": "Item in a ListBlock — displays a title with an optional subtitle and image. When action is provided, the item becomes clickable." |
| }, |
| "Text": { |
| "signature": "Text(variant?: \"text\" | \"number\", value: string, subtext?: string, subtextVariant?: \"text\" | \"number\" | \"metric\", size?: \"xs\" | \"sm\" | \"md\" | \"lg\")", |
| "description": "Plain text line with optional subtext. variant 'number' uses tabular number styling; subtextVariant 'metric' colors a leading +/- subtext green/red." |
| }, |
| "BoldText": { |
| "signature": "BoldText(variant?: \"text\" | \"number\", value: string, subtext?: string, subtextVariant?: \"text\" | \"number\" | \"metric\", size?: \"xs\" | \"sm\" | \"md\" | \"lg\")", |
| "description": "Emphasized (bold) text line with optional subtext. variant 'number' uses tabular number styling; subtextVariant 'metric' colors a leading +/- subtext green/red." |
| }, |
| "IconText": { |
| "signature": "IconText(icon: Icon, iconVariant?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"inverted\" | \"filled\" | \"soft\", iconSize?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"sm\" | \"md\" | \"lg\", title: string, subtitle?: string, bold?: boolean, layout?: \"horizontal\" | \"vertical\")", |
| "description": "An icon badge with a title and optional subtitle, laid out horizontally or vertically. iconVariant sets the badge color." |
| }, |
| "ImageText": { |
| "signature": "ImageText(src: string, alt?: string, title: string, subtitle?: string, bold?: boolean, layout?: \"horizontal\" | \"vertical\", imageSize?: number)", |
| "description": "A small square image (thumbnail/avatar) with a title and optional subtitle. src must be a real image URL." |
| }, |
| "ImageTextLarge": { |
| "signature": "ImageTextLarge(src: string, alt?: string, title: string, subtitle?: string, bold?: boolean)", |
| "description": "A full-width banner image above a bold title and optional subtitle. src must be a real image URL." |
| }, |
| "MetricIndicatorInline": { |
| "signature": "MetricIndicatorInline(value: string, subtext?: string, trend?: {direction: \"up\" | \"down\", value: number})", |
| "description": "Headline metric value with an optional +/- percentage trend and subtext, all on one line." |
| }, |
| "MetricIndicatorWithStrikethrough": { |
| "signature": "MetricIndicatorWithStrikethrough(value: string, subtext?: string, previousValue?: string, trend?: {direction: \"up\" | \"down\", value: number})", |
| "description": "Headline metric value with an optional struck-through previousValue, a +/- percentage trend, and subtext below." |
| }, |
| "SnippetCardItem": { |
| "signature": "SnippetCardItem(id?: string, lhs: IconText | ImageText, rhs?: Text | BoldText)", |
| "description": "One row-style snippet card: a label on the left (IconText or ImageText) and an optional value on the right (Text or BoldText)." |
| }, |
| "SnippetCardBlock": { |
| "signature": "SnippetCardBlock(items: SnippetCardItem[], layout?: \"grid\", responsive?: boolean, action?: ActionExpression, gap?: number | string)", |
| "description": "A responsive grid of compact label/value cards (2 per row) for showing several short facts side by side; optionally clickable with a shared action." |
| }, |
| "OverviewCardItem": { |
| "signature": "OverviewCardItem(id?: string, top: IconText | ImageText | Text, bottom?: MetricIndicatorInline)", |
| "description": "One overview card: a heading slot at the top (IconText, ImageText or Text) and an optional MetricIndicatorInline at the bottom." |
| }, |
| "OverviewCardBlock": { |
| "signature": "OverviewCardBlock(items: OverviewCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)", |
| "description": "A grid or horizontal carousel of compact overview cards, each with a heading (icon/image/text) on top and an inline metric below; optionally clickable with a shared action." |
| }, |
| "ContextCardItem": { |
| "signature": "ContextCardItem(id?: string, title: string | Tag, body?: string, bgColor?: \"gray\", bgImageSrc?: string, bgImageAlt?: string)", |
| "description": "A single card inside a ContextCardBlock: a title (plain string or Tag), an optional markdown body, and an optional gray tint or background image." |
| }, |
| "ContextCardBlock": { |
| "signature": "ContextCardBlock(items: ContextCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)", |
| "description": "A grid or carousel of compact tinted context cards (title or tag plus a short bold body); an optional action makes every card clickable." |
| }, |
| "CompositeCardItem": { |
| "signature": "CompositeCardItem(id?: string, header?: IconText | ImageText | ImageTextLarge | Text | Image, body?: (Text | BoldText | MetricIndicatorInline | IconText | Image | AreaChart | BarChart | LineChart | ListBlock | TagBlock | EntityList)[], footer?: {price?: BoldText | MetricIndicatorWithStrikethrough, button?: Button})", |
| "description": "A single card inside a CompositeCardBlock: an optional header (icon/image/text), a stack of body elements (text, metrics, charts, lists, tags), and an optional price/button footer." |
| }, |
| "CompositeCardBlock": { |
| "signature": "CompositeCardBlock(items: CompositeCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)", |
| "description": "A two-per-row grid or carousel of rich cards, each with an optional header, stacked body content (text, metrics, charts, lists, tags) and a price/button footer; an optional action makes every card clickable." |
| }, |
| "VisualCardItem": { |
| "signature": "VisualCardItem(body: BoldText, id?: string, bgImageSrc?: string, tag?: Tag, bgImageAlt?: string)", |
| "description": "A single photo-first card inside a VisualCardBlock: a BoldText body panel, an optional Tag, and a background image (bgImageSrc must be a real URL; bgImageAlt is its alt text)." |
| }, |
| "VisualCardBlock": { |
| "signature": "VisualCardBlock(items: VisualCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)", |
| "description": "A grid or carousel of photo-first cards: a full-bleed background image with a tag on top and a bold text panel at the bottom; an optional action makes every card clickable." |
| }, |
| "Modal": { |
| "signature": "Modal(title: string, open?: $binding<boolean>, children: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[], size?: \"sm\" | \"md\" | \"lg\")", |
| "description": "Modal dialog. open is a reactive $boolean binding — set to true to open, X/Escape/backdrop auto-closes. Put Form with buttons inside children." |
| } |
| }, |
| "componentGroups": [ |
| { |
| "name": "Layout", |
| "components": [ |
| "Stack", |
| "Tabs", |
| "TabItem", |
| "Accordion", |
| "AccordionItem", |
| "Steps", |
| "StepsItem", |
| "Carousel", |
| "Separator", |
| "Modal" |
| ], |
| "notes": [ |
| "- For grid-like layouts, use Stack with direction \"row\" and wrap set to true.", |
| "- Prefer justify \"start\" (or omit justify) with wrap=true for stable columns instead of uneven gutters.", |
| "- Use nested Stacks when you need explicit rows/sections.", |
| "- Show/hide sections: $editId != \"\" ? Card([editForm]) : null", |
| "- Modal: Modal(\"Title\", $showModal, [content]) — $showModal is boolean, X/Escape auto-closes. Put Form with its own buttons inside children.", |
| "- Use Tabs for alternative views (chart types, data sections) — no $variable needed", |
| "- Shared filter across Tabs: same $days binding in Query args works across all TabItems" |
| ] |
| }, |
| { |
| "name": "Content", |
| "components": [ |
| "Card", |
| "CardHeader", |
| "TextContent", |
| "MarkDownRenderer", |
| "Callout", |
| "TextCallout", |
| "Image", |
| "ImageBlock", |
| "ImageGallery", |
| "CodeBlock", |
| "InlineHeader" |
| ], |
| "notes": [ |
| "- InlineHeader is a compact heading + description pair for labelling a block (lighter than CardHeader).", |
| "- Use Cards to group related KPIs or sections. Stack with direction \"row\" for side-by-side layouts.", |
| "- Success toast: Callout(\"success\", \"Saved\", \"Done.\", $showSuccess) — use @Set($showSuccess, true) in save action, auto-dismisses after 3s. For errors: result.status == \"error\" ? Callout(\"error\", \"Failed\", result.error) : null", |
| "- KPI card: Card([TextContent(\"Label\", \"small\"), TextContent(\"\" + @Count(@Filter(data.rows, \"field\", \"==\", \"value\")), \"large-heavy\")])" |
| ] |
| }, |
| { |
| "name": "Tables", |
| "components": [ |
| "Table", |
| "Col", |
| "EditableTable" |
| ], |
| "notes": [ |
| "- EditableTable lets the user edit cells inline. Give it a unique name, columns of { type, key, header } with type one of text | number | date-single | select | url (select also needs options: [{ value, label }]).", |
| "- data is an array of { id, values } rows where values are ordered positionally to match columns. Edited data is submitted when the user clicks Save Changes.", |
| "- Table is COLUMN-oriented: Table([Col(\"Label\", dataArray), Col(\"Count\", countArray, \"number\")]). Use array pluck for data: data.rows.fieldName", |
| "- Col data can be component arrays for styled cells: Col(\"Status\", @Each(data.rows, \"item\", Tag(item.status, null, \"sm\", item.status == \"open\" ? \"success\" : \"danger\")))", |
| "- Row actions: Col(\"Actions\", @Each(data.rows, \"t\", Button(\"Edit\", Action([@Set($showEdit, true), @Set($editId, t.id)]))))", |
| "- Sortable: sorted = @Sort(data.rows, $sortField, \"desc\"). Bind $sortField to Select. Use sorted.fieldName for Col data", |
| "- Searchable: filtered = @Filter(data.rows, \"title\", \"contains\", $search). Bind $search to Input", |
| "- Chain sort + filter: filtered = @Filter(...) then sorted = @Sort(filtered, ...) — use sorted for both Table and Charts", |
| "- Empty state: @Count(data.rows) > 0 ? Table([...]) : TextContent(\"No data yet\")" |
| ] |
| }, |
| { |
| "name": "Charts (2D)", |
| "components": [ |
| "BarChart", |
| "LineChart", |
| "AreaChart", |
| "RadarChart", |
| "HorizontalBarChart", |
| "Series" |
| ], |
| "notes": [ |
| "- Charts accept column arrays: LineChart(labels, [Series(\"Name\", values)]). Use array pluck: LineChart(data.rows.day, [Series(\"Views\", data.rows.views)])", |
| "- Use Cards to wrap charts with CardHeader for titled sections", |
| "- Chart + Table from same source: use @Sort or @Filter result for both LineChart and Table Col data", |
| "- Multiple chart views: use Tabs — Tabs([TabItem(\"line\", \"Line\", [LineChart(...)]), TabItem(\"bar\", \"Bar\", [BarChart(...)])])" |
| ] |
| }, |
| { |
| "name": "Charts (1D)", |
| "components": [ |
| "PieChart", |
| "RadialChart", |
| "SingleStackedBarChart", |
| "Slice" |
| ], |
| "notes": [ |
| "- PieChart and BarChart need NUMBERS, not objects. For list data, use @Count(@Filter(...)) to aggregate:", |
| "- PieChart from list: `PieChart([\"Low\", \"Med\", \"High\"], [@Count(@Filter(data.rows, \"priority\", \"==\", \"low\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"medium\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"high\"))], \"donut\")`", |
| "- KPI from count: `TextContent(\"\" + @Count(@Filter(data.rows, \"status\", \"==\", \"open\")), \"large-heavy\")`" |
| ] |
| }, |
| { |
| "name": "Charts (Scatter)", |
| "components": [ |
| "ScatterChart", |
| "ScatterSeries", |
| "Point" |
| ] |
| }, |
| { |
| "name": "Forms", |
| "components": [ |
| "Form", |
| "FormControl", |
| "Label", |
| "Input", |
| "TextArea", |
| "Select", |
| "SelectItem", |
| "DatePicker", |
| "Slider", |
| "CheckBoxGroup", |
| "CheckBoxItem", |
| "RadioGroup", |
| "RadioItem", |
| "SwitchGroup", |
| "SwitchItem", |
| "Chips", |
| "ChipItem", |
| "OptionCards", |
| "OptionCard" |
| ], |
| "notes": [ |
| "- Chips: compact single/multiple selection pills. Use ChipItem references for each option.", |
| "- OptionCards: larger selectable cards with title, subtitle and an optional Icon or Image on top. Use OptionCard references for each option.", |
| "- For Form fields, define EACH FormControl as its own reference — do NOT inline all controls in one array. This allows progressive field-by-field streaming.", |
| "- NEVER nest Form inside Form — each Form should be a standalone container.", |
| "- Form requires explicit buttons. Always pass a Buttons(...) reference as the third Form argument.", |
| "- rules is an optional object: {required: true, email: true, minLength: 8, maxLength: 100}", |
| "- Available rules: required, email, min, max, minLength, maxLength, pattern, url, numeric", |
| "- The renderer shows error messages automatically — do NOT generate error text in the UI", |
| "- Conditional fields: $country == \"US\" ? stateField : $country == \"UK\" ? postcodeField : addressField", |
| "- Edit form in Modal: Modal(\"Edit\", $showEdit, [Form(\"edit\", Buttons([saveBtn, cancelBtn]), [fields...])]). Save button should include @Set($showEdit, false) to close modal." |
| ] |
| }, |
| { |
| "name": "Buttons", |
| "components": [ |
| "Button", |
| "Buttons", |
| "IconButton" |
| ], |
| "notes": [ |
| "- Icon renders a lucide icon by kebab-case name; it is also used as the icon of IconButton, IconText and OptionCard.", |
| "- Toggle in @Each: @Each(rows, \"t\", Button(t.status == \"open\" ? \"Close\" : \"Reopen\", Action([...])))" |
| ] |
| }, |
| { |
| "name": "Data Display", |
| "components": [ |
| "TagBlock", |
| "Tag", |
| "Icon", |
| "EntityList", |
| "ListBlock", |
| "ListItem" |
| ], |
| "notes": [ |
| "- Color-mapped Tag: Tag(value, null, \"sm\", value == \"high\" ? \"danger\" : value == \"medium\" ? \"warning\" : \"neutral\")", |
| "- EntityList is a compact two-column list of { left, right } rows (e.g. name / value). size='default' also supports a header and footer row; size='small' does not.", |
| "- ListBlock is a numbered or image list of ListItem references. An action on ListItem is optional." |
| ] |
| }, |
| { |
| "name": "Cards", |
| "components": [ |
| "SnippetCardBlock", |
| "SnippetCardItem", |
| "OverviewCardBlock", |
| "OverviewCardItem", |
| "ContextCardBlock", |
| "ContextCardItem", |
| "CompositeCardBlock", |
| "CompositeCardItem", |
| "VisualCardBlock", |
| "VisualCardItem", |
| "Text", |
| "BoldText", |
| "IconText", |
| "ImageText", |
| "ImageTextLarge", |
| "MetricIndicatorInline", |
| "MetricIndicatorWithStrikethrough" |
| ], |
| "notes": [ |
| "- Card blocks lay out 2+ items in a responsive grid (or carousel where supported). Every item in a block must have the same structure.", |
| "- SnippetCardItem: small card with lhs (IconText | ImageText) and optional rhs (Text | BoldText) — good for key/value facts.", |
| "- OverviewCardItem: small card with top (IconText | ImageText | Text) and optional bottom MetricIndicatorInline — good for KPIs.", |
| "- ContextCardItem: medium card with a title (string or Tag), body text and optional background image — good for summaries.", |
| "- CompositeCardItem: rich card with header, body array (Text, BoldText, MetricIndicatorInline, IconText, Image, charts, ListBlock, TagBlock, EntityList) and footer (price + Button) — good for products/offers.", |
| "- VisualCardItem: image-first card with a BoldText body and optional Tag.", |
| "- Text / BoldText / IconText / ImageText / ImageTextLarge / MetricIndicator* are the inline building blocks used INSIDE card items; do not place them directly in the root Card." |
| ] |
| } |
| ], |
| "schema": { |
| "$schema": "https://json-schema.org/draft/2020-12/schema", |
| "type": "object", |
| "properties": { |
| "Card": { |
| "$ref": "#/$defs/Card" |
| }, |
| "CardHeader": { |
| "$ref": "#/$defs/CardHeader" |
| }, |
| "TextContent": { |
| "$ref": "#/$defs/TextContent" |
| }, |
| "MarkDownRenderer": { |
| "$ref": "#/$defs/MarkDownRenderer" |
| }, |
| "Callout": { |
| "$ref": "#/$defs/Callout" |
| }, |
| "TextCallout": { |
| "$ref": "#/$defs/TextCallout" |
| }, |
| "Image": { |
| "$ref": "#/$defs/Image" |
| }, |
| "ImageBlock": { |
| "$ref": "#/$defs/ImageBlock" |
| }, |
| "ImageGallery": { |
| "$ref": "#/$defs/ImageGallery" |
| }, |
| "CodeBlock": { |
| "$ref": "#/$defs/CodeBlock" |
| }, |
| "InlineHeader": { |
| "$ref": "#/$defs/InlineHeader" |
| }, |
| "Table": { |
| "$ref": "#/$defs/Table" |
| }, |
| "Col": { |
| "$ref": "#/$defs/Col" |
| }, |
| "EditableTable": { |
| "$ref": "#/$defs/EditableTable" |
| }, |
| "BarChart": { |
| "$ref": "#/$defs/BarChart" |
| }, |
| "LineChart": { |
| "$ref": "#/$defs/LineChart" |
| }, |
| "AreaChart": { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| "RadarChart": { |
| "$ref": "#/$defs/RadarChart" |
| }, |
| "HorizontalBarChart": { |
| "$ref": "#/$defs/HorizontalBarChart" |
| }, |
| "Series": { |
| "$ref": "#/$defs/Series" |
| }, |
| "PieChart": { |
| "$ref": "#/$defs/PieChart" |
| }, |
| "RadialChart": { |
| "$ref": "#/$defs/RadialChart" |
| }, |
| "SingleStackedBarChart": { |
| "$ref": "#/$defs/SingleStackedBarChart" |
| }, |
| "Slice": { |
| "$ref": "#/$defs/Slice" |
| }, |
| "ScatterChart": { |
| "$ref": "#/$defs/ScatterChart" |
| }, |
| "ScatterSeries": { |
| "$ref": "#/$defs/ScatterSeries" |
| }, |
| "Point": { |
| "$ref": "#/$defs/Point" |
| }, |
| "Form": { |
| "$ref": "#/$defs/Form" |
| }, |
| "FormControl": { |
| "$ref": "#/$defs/FormControl" |
| }, |
| "Label": { |
| "$ref": "#/$defs/Label" |
| }, |
| "Input": { |
| "$ref": "#/$defs/Input" |
| }, |
| "TextArea": { |
| "$ref": "#/$defs/TextArea" |
| }, |
| "Select": { |
| "$ref": "#/$defs/Select" |
| }, |
| "SelectItem": { |
| "$ref": "#/$defs/SelectItem" |
| }, |
| "DatePicker": { |
| "$ref": "#/$defs/DatePicker" |
| }, |
| "Slider": { |
| "$ref": "#/$defs/Slider" |
| }, |
| "CheckBoxGroup": { |
| "$ref": "#/$defs/CheckBoxGroup" |
| }, |
| "CheckBoxItem": { |
| "$ref": "#/$defs/CheckBoxItem" |
| }, |
| "RadioGroup": { |
| "$ref": "#/$defs/RadioGroup" |
| }, |
| "RadioItem": { |
| "$ref": "#/$defs/RadioItem" |
| }, |
| "SwitchGroup": { |
| "$ref": "#/$defs/SwitchGroup" |
| }, |
| "SwitchItem": { |
| "$ref": "#/$defs/SwitchItem" |
| }, |
| "ChipItem": { |
| "$ref": "#/$defs/ChipItem" |
| }, |
| "Chips": { |
| "$ref": "#/$defs/Chips" |
| }, |
| "OptionCard": { |
| "$ref": "#/$defs/OptionCard" |
| }, |
| "OptionCards": { |
| "$ref": "#/$defs/OptionCards" |
| }, |
| "Button": { |
| "$ref": "#/$defs/Button" |
| }, |
| "Buttons": { |
| "$ref": "#/$defs/Buttons" |
| }, |
| "IconButton": { |
| "$ref": "#/$defs/IconButton" |
| }, |
| "Stack": { |
| "$ref": "#/$defs/Stack" |
| }, |
| "Tabs": { |
| "$ref": "#/$defs/Tabs" |
| }, |
| "TabItem": { |
| "$ref": "#/$defs/TabItem" |
| }, |
| "Accordion": { |
| "$ref": "#/$defs/Accordion" |
| }, |
| "AccordionItem": { |
| "$ref": "#/$defs/AccordionItem" |
| }, |
| "Steps": { |
| "$ref": "#/$defs/Steps" |
| }, |
| "StepsItem": { |
| "$ref": "#/$defs/StepsItem" |
| }, |
| "Carousel": { |
| "$ref": "#/$defs/Carousel" |
| }, |
| "Separator": { |
| "$ref": "#/$defs/Separator" |
| }, |
| "TagBlock": { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| "Tag": { |
| "$ref": "#/$defs/Tag" |
| }, |
| "Icon": { |
| "$ref": "#/$defs/Icon" |
| }, |
| "EntityList": { |
| "$ref": "#/$defs/EntityList" |
| }, |
| "ListBlock": { |
| "$ref": "#/$defs/ListBlock" |
| }, |
| "ListItem": { |
| "$ref": "#/$defs/ListItem" |
| }, |
| "Text": { |
| "$ref": "#/$defs/Text" |
| }, |
| "BoldText": { |
| "$ref": "#/$defs/BoldText" |
| }, |
| "IconText": { |
| "$ref": "#/$defs/IconText" |
| }, |
| "ImageText": { |
| "$ref": "#/$defs/ImageText" |
| }, |
| "ImageTextLarge": { |
| "$ref": "#/$defs/ImageTextLarge" |
| }, |
| "MetricIndicatorInline": { |
| "$ref": "#/$defs/MetricIndicatorInline" |
| }, |
| "MetricIndicatorWithStrikethrough": { |
| "$ref": "#/$defs/MetricIndicatorWithStrikethrough" |
| }, |
| "SnippetCardItem": { |
| "$ref": "#/$defs/SnippetCardItem" |
| }, |
| "SnippetCardBlock": { |
| "$ref": "#/$defs/SnippetCardBlock" |
| }, |
| "OverviewCardItem": { |
| "$ref": "#/$defs/OverviewCardItem" |
| }, |
| "OverviewCardBlock": { |
| "$ref": "#/$defs/OverviewCardBlock" |
| }, |
| "ContextCardItem": { |
| "$ref": "#/$defs/ContextCardItem" |
| }, |
| "ContextCardBlock": { |
| "$ref": "#/$defs/ContextCardBlock" |
| }, |
| "CompositeCardItem": { |
| "$ref": "#/$defs/CompositeCardItem" |
| }, |
| "CompositeCardBlock": { |
| "$ref": "#/$defs/CompositeCardBlock" |
| }, |
| "VisualCardItem": { |
| "$ref": "#/$defs/VisualCardItem" |
| }, |
| "VisualCardBlock": { |
| "$ref": "#/$defs/VisualCardBlock" |
| }, |
| "Modal": { |
| "$ref": "#/$defs/Modal" |
| } |
| }, |
| "required": [ |
| "Card", |
| "CardHeader", |
| "TextContent", |
| "MarkDownRenderer", |
| "Callout", |
| "TextCallout", |
| "Image", |
| "ImageBlock", |
| "ImageGallery", |
| "CodeBlock", |
| "InlineHeader", |
| "Table", |
| "Col", |
| "EditableTable", |
| "BarChart", |
| "LineChart", |
| "AreaChart", |
| "RadarChart", |
| "HorizontalBarChart", |
| "Series", |
| "PieChart", |
| "RadialChart", |
| "SingleStackedBarChart", |
| "Slice", |
| "ScatterChart", |
| "ScatterSeries", |
| "Point", |
| "Form", |
| "FormControl", |
| "Label", |
| "Input", |
| "TextArea", |
| "Select", |
| "SelectItem", |
| "DatePicker", |
| "Slider", |
| "CheckBoxGroup", |
| "CheckBoxItem", |
| "RadioGroup", |
| "RadioItem", |
| "SwitchGroup", |
| "SwitchItem", |
| "ChipItem", |
| "Chips", |
| "OptionCard", |
| "OptionCards", |
| "Button", |
| "Buttons", |
| "IconButton", |
| "Stack", |
| "Tabs", |
| "TabItem", |
| "Accordion", |
| "AccordionItem", |
| "Steps", |
| "StepsItem", |
| "Carousel", |
| "Separator", |
| "TagBlock", |
| "Tag", |
| "Icon", |
| "EntityList", |
| "ListBlock", |
| "ListItem", |
| "Text", |
| "BoldText", |
| "IconText", |
| "ImageText", |
| "ImageTextLarge", |
| "MetricIndicatorInline", |
| "MetricIndicatorWithStrikethrough", |
| "SnippetCardItem", |
| "SnippetCardBlock", |
| "OverviewCardItem", |
| "OverviewCardBlock", |
| "ContextCardItem", |
| "ContextCardBlock", |
| "CompositeCardItem", |
| "CompositeCardBlock", |
| "VisualCardItem", |
| "VisualCardBlock", |
| "Modal" |
| ], |
| "additionalProperties": false, |
| "$defs": { |
| "Card": { |
| "type": "object", |
| "properties": { |
| "children": { |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/TextContent" |
| }, |
| { |
| "$ref": "#/$defs/MarkDownRenderer" |
| }, |
| { |
| "$ref": "#/$defs/CardHeader" |
| }, |
| { |
| "$ref": "#/$defs/Callout" |
| }, |
| { |
| "$ref": "#/$defs/TextCallout" |
| }, |
| { |
| "$ref": "#/$defs/CodeBlock" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| }, |
| { |
| "$ref": "#/$defs/ImageBlock" |
| }, |
| { |
| "$ref": "#/$defs/ImageGallery" |
| }, |
| { |
| "$ref": "#/$defs/Separator" |
| }, |
| { |
| "$ref": "#/$defs/HorizontalBarChart" |
| }, |
| { |
| "$ref": "#/$defs/RadarChart" |
| }, |
| { |
| "$ref": "#/$defs/PieChart" |
| }, |
| { |
| "$ref": "#/$defs/RadialChart" |
| }, |
| { |
| "$ref": "#/$defs/SingleStackedBarChart" |
| }, |
| { |
| "$ref": "#/$defs/ScatterChart" |
| }, |
| { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| { |
| "$ref": "#/$defs/BarChart" |
| }, |
| { |
| "$ref": "#/$defs/LineChart" |
| }, |
| { |
| "$ref": "#/$defs/Table" |
| }, |
| { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| { |
| "$ref": "#/$defs/Form" |
| }, |
| { |
| "$ref": "#/$defs/Buttons" |
| }, |
| { |
| "$ref": "#/$defs/IconButton" |
| }, |
| { |
| "$ref": "#/$defs/Steps" |
| }, |
| { |
| "$ref": "#/$defs/InlineHeader" |
| }, |
| { |
| "$ref": "#/$defs/EntityList" |
| }, |
| { |
| "$ref": "#/$defs/EditableTable" |
| }, |
| { |
| "$ref": "#/$defs/SnippetCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/OverviewCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/ContextCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/CompositeCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/VisualCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/Tabs" |
| }, |
| { |
| "$ref": "#/$defs/Carousel" |
| }, |
| { |
| "$ref": "#/$defs/Stack" |
| } |
| ] |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "card", |
| "sunk", |
| "clear" |
| ] |
| }, |
| "direction": { |
| "type": "string", |
| "enum": [ |
| "row", |
| "column" |
| ] |
| }, |
| "gap": { |
| "type": "string", |
| "enum": [ |
| "none", |
| "xs", |
| "s", |
| "m", |
| "l", |
| "xl", |
| "2xl" |
| ] |
| }, |
| "align": { |
| "type": "string", |
| "enum": [ |
| "start", |
| "center", |
| "end", |
| "stretch", |
| "baseline" |
| ] |
| }, |
| "justify": { |
| "type": "string", |
| "enum": [ |
| "start", |
| "center", |
| "end", |
| "between", |
| "around", |
| "evenly" |
| ] |
| }, |
| "wrap": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "children" |
| ], |
| "additionalProperties": false, |
| "description": "Styled container. variant: \"card\" (default, elevated) | \"sunk\" (recessed) | \"clear\" (transparent). Always full width. Accepts all Stack flex params (default: direction \"column\"). Cards flex to share space in row/wrap layouts." |
| }, |
| "TextContent": { |
| "type": "object", |
| "properties": { |
| "text": { |
| "type": "string" |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "small", |
| "default", |
| "large", |
| "small-heavy", |
| "large-heavy" |
| ] |
| } |
| }, |
| "required": [ |
| "text" |
| ], |
| "additionalProperties": false, |
| "description": "Text block. Supports markdown. Optional size: \"small\" | \"default\" | \"large\" | \"small-heavy\" | \"large-heavy\"." |
| }, |
| "MarkDownRenderer": { |
| "type": "object", |
| "properties": { |
| "textMarkdown": { |
| "type": "string" |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "clear", |
| "card", |
| "sunk" |
| ] |
| } |
| }, |
| "required": [ |
| "textMarkdown" |
| ], |
| "additionalProperties": false, |
| "description": "Renders markdown text with optional container variant" |
| }, |
| "CardHeader": { |
| "type": "object", |
| "properties": { |
| "title": { |
| "type": "string" |
| }, |
| "subtitle": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false, |
| "description": "Header with optional title and subtitle" |
| }, |
| "Callout": { |
| "type": "object", |
| "properties": { |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "info", |
| "warning", |
| "error", |
| "success", |
| "neutral" |
| ] |
| }, |
| "title": { |
| "type": "string" |
| }, |
| "description": { |
| "type": "string" |
| }, |
| "visible": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "variant", |
| "title", |
| "description" |
| ], |
| "additionalProperties": false, |
| "description": "Callout banner. Optional visible is a reactive $boolean — auto-dismisses after 3s by setting $visible to false." |
| }, |
| "TextCallout": { |
| "type": "object", |
| "properties": { |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "neutral", |
| "info", |
| "warning", |
| "success", |
| "danger" |
| ] |
| }, |
| "title": { |
| "type": "string" |
| }, |
| "description": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false, |
| "description": "Text callout with variant, title, and description" |
| }, |
| "CodeBlock": { |
| "type": "object", |
| "properties": { |
| "language": { |
| "type": "string" |
| }, |
| "codeString": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "language", |
| "codeString" |
| ], |
| "additionalProperties": false, |
| "description": "Syntax-highlighted code block" |
| }, |
| "Image": { |
| "type": "object", |
| "properties": { |
| "alt": { |
| "type": "string" |
| }, |
| "src": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "alt" |
| ], |
| "additionalProperties": false, |
| "description": "Image with alt text and optional URL" |
| }, |
| "ImageBlock": { |
| "type": "object", |
| "properties": { |
| "src": { |
| "type": "string" |
| }, |
| "alt": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "src" |
| ], |
| "additionalProperties": false, |
| "description": "Image block with loading state" |
| }, |
| "ImageGallery": { |
| "type": "object", |
| "properties": { |
| "images": { |
| "type": "array", |
| "items": { |
| "type": "object", |
| "properties": { |
| "src": { |
| "type": "string" |
| }, |
| "alt": { |
| "type": "string" |
| }, |
| "details": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "src" |
| ], |
| "additionalProperties": false |
| } |
| } |
| }, |
| "required": [ |
| "images" |
| ], |
| "additionalProperties": false, |
| "description": "Gallery grid of images with modal preview" |
| }, |
| "Separator": { |
| "type": "object", |
| "properties": { |
| "orientation": { |
| "type": "string", |
| "enum": [ |
| "horizontal", |
| "vertical" |
| ] |
| }, |
| "decorative": { |
| "type": "boolean" |
| } |
| }, |
| "additionalProperties": false, |
| "description": "Visual divider between content sections" |
| }, |
| "HorizontalBarChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "series": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Series" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "grouped", |
| "stacked" |
| ] |
| }, |
| "xLabel": { |
| "type": "string" |
| }, |
| "yLabel": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "labels", |
| "series" |
| ], |
| "additionalProperties": false, |
| "description": "Horizontal bars; prefer when category labels are long or for ranked lists" |
| }, |
| "Series": { |
| "type": "object", |
| "properties": { |
| "category": { |
| "type": "string" |
| }, |
| "values": { |
| "type": "array", |
| "items": { |
| "type": "number" |
| } |
| } |
| }, |
| "required": [ |
| "category", |
| "values" |
| ], |
| "additionalProperties": false, |
| "description": "One data series" |
| }, |
| "RadarChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "series": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Series" |
| } |
| } |
| }, |
| "required": [ |
| "labels", |
| "series" |
| ], |
| "additionalProperties": false, |
| "description": "Spider/web chart; use for comparing multiple variables across one or more entities" |
| }, |
| "PieChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "values": { |
| "type": "array", |
| "items": { |
| "type": "number" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "pie", |
| "donut" |
| ] |
| }, |
| "appearance": { |
| "type": "string", |
| "enum": [ |
| "circular", |
| "semiCircular" |
| ] |
| } |
| }, |
| "required": [ |
| "labels", |
| "values" |
| ], |
| "additionalProperties": false, |
| "description": "Circular slices; use plucked arrays: PieChart(data.categories, data.values)" |
| }, |
| "RadialChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "values": { |
| "type": "array", |
| "items": { |
| "type": "number" |
| } |
| } |
| }, |
| "required": [ |
| "labels", |
| "values" |
| ], |
| "additionalProperties": false, |
| "description": "Radial bars; use plucked arrays: RadialChart(data.categories, data.values)" |
| }, |
| "SingleStackedBarChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "values": { |
| "type": "array", |
| "items": { |
| "type": "number" |
| } |
| } |
| }, |
| "required": [ |
| "labels", |
| "values" |
| ], |
| "additionalProperties": false, |
| "description": "Single horizontal stacked bar; use plucked arrays: SingleStackedBarChart(data.categories, data.values)" |
| }, |
| "ScatterChart": { |
| "type": "object", |
| "properties": { |
| "datasets": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/ScatterSeries" |
| } |
| }, |
| "xLabel": { |
| "type": "string" |
| }, |
| "yLabel": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "datasets" |
| ], |
| "additionalProperties": false, |
| "description": "X/Y scatter plot; use for correlations, distributions, and clustering" |
| }, |
| "ScatterSeries": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "points": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Point" |
| } |
| } |
| }, |
| "required": [ |
| "name", |
| "points" |
| ], |
| "additionalProperties": false, |
| "description": "Named dataset" |
| }, |
| "Point": { |
| "type": "object", |
| "properties": { |
| "x": { |
| "type": "number" |
| }, |
| "y": { |
| "type": "number" |
| }, |
| "z": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "x", |
| "y" |
| ], |
| "additionalProperties": false, |
| "description": "Data point with numeric coordinates" |
| }, |
| "AreaChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "series": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Series" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "linear", |
| "natural", |
| "step" |
| ] |
| }, |
| "xLabel": { |
| "type": "string" |
| }, |
| "yLabel": { |
| "type": "string" |
| }, |
| "height": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "labels", |
| "series" |
| ], |
| "additionalProperties": false, |
| "description": "Filled area under lines; use for cumulative totals or volume trends over time" |
| }, |
| "BarChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "series": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Series" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "grouped", |
| "stacked" |
| ] |
| }, |
| "xLabel": { |
| "type": "string" |
| }, |
| "yLabel": { |
| "type": "string" |
| }, |
| "height": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "labels", |
| "series" |
| ], |
| "additionalProperties": false, |
| "description": "Vertical bars; use for comparing values across categories with one or more series" |
| }, |
| "LineChart": { |
| "type": "object", |
| "properties": { |
| "labels": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "series": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Series" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "linear", |
| "natural", |
| "step" |
| ] |
| }, |
| "xLabel": { |
| "type": "string" |
| }, |
| "yLabel": { |
| "type": "string" |
| }, |
| "height": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "labels", |
| "series" |
| ], |
| "additionalProperties": false, |
| "description": "Lines over categories; use for trends and continuous data over time" |
| }, |
| "Table": { |
| "type": "object", |
| "properties": { |
| "columns": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Col" |
| } |
| } |
| }, |
| "required": [ |
| "columns" |
| ], |
| "additionalProperties": false, |
| "description": "Data table — column-oriented. Each Col holds its own data array." |
| }, |
| "Col": { |
| "type": "object", |
| "properties": { |
| "label": { |
| "type": "string" |
| }, |
| "data": {}, |
| "type": { |
| "type": "string", |
| "enum": [ |
| "string", |
| "number", |
| "action" |
| ] |
| } |
| }, |
| "required": [ |
| "label", |
| "data" |
| ], |
| "additionalProperties": false, |
| "description": "Column definition — holds label + data array" |
| }, |
| "TagBlock": { |
| "type": "object", |
| "properties": { |
| "tags": { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "sm", |
| "md", |
| "lg" |
| ] |
| } |
| }, |
| "required": [ |
| "tags" |
| ], |
| "additionalProperties": false, |
| "description": "tags is an array of strings; optional size sm | md | lg" |
| }, |
| "Form": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "buttons": { |
| "$ref": "#/$defs/Buttons" |
| }, |
| "fields": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/FormControl" |
| } |
| } |
| }, |
| "required": [ |
| "name", |
| "buttons", |
| "fields" |
| ], |
| "additionalProperties": false, |
| "description": "Form container with fields and explicit action buttons" |
| }, |
| "Buttons": { |
| "type": "object", |
| "properties": { |
| "buttons": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/Button" |
| } |
| }, |
| "direction": { |
| "type": "string", |
| "enum": [ |
| "row", |
| "column" |
| ] |
| } |
| }, |
| "required": [ |
| "buttons" |
| ], |
| "additionalProperties": false, |
| "description": "Group of Button components. direction: \"row\" (default) | \"column\"." |
| }, |
| "Button": { |
| "type": "object", |
| "properties": { |
| "label": { |
| "type": "string" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "primary", |
| "secondary", |
| "tertiary" |
| ] |
| }, |
| "type": { |
| "type": "string", |
| "enum": [ |
| "normal", |
| "destructive" |
| ] |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "extra-small", |
| "small", |
| "medium", |
| "large" |
| ] |
| } |
| }, |
| "required": [ |
| "label" |
| ], |
| "additionalProperties": false, |
| "description": "Clickable button" |
| }, |
| "ActionExpression": { |
| "anyOf": [ |
| { |
| "type": "object", |
| "properties": { |
| "type": { |
| "type": "string", |
| "const": "open_url" |
| }, |
| "url": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "type", |
| "url" |
| ], |
| "additionalProperties": false |
| }, |
| { |
| "type": "object", |
| "properties": { |
| "type": { |
| "type": "string", |
| "const": "continue_conversation" |
| }, |
| "context": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "type" |
| ], |
| "additionalProperties": false |
| }, |
| { |
| "type": "object", |
| "properties": { |
| "type": { |
| "type": "string" |
| }, |
| "params": { |
| "type": "object", |
| "propertyNames": { |
| "type": "string" |
| }, |
| "additionalProperties": {} |
| } |
| }, |
| "required": [ |
| "type" |
| ], |
| "additionalProperties": false |
| } |
| ] |
| }, |
| "FormControl": { |
| "type": "object", |
| "properties": { |
| "label": { |
| "type": "string" |
| }, |
| "input": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/Input" |
| }, |
| { |
| "$ref": "#/$defs/TextArea" |
| }, |
| { |
| "$ref": "#/$defs/Select" |
| }, |
| { |
| "$ref": "#/$defs/DatePicker" |
| }, |
| { |
| "$ref": "#/$defs/Slider" |
| }, |
| { |
| "$ref": "#/$defs/CheckBoxGroup" |
| }, |
| { |
| "$ref": "#/$defs/RadioGroup" |
| }, |
| { |
| "$ref": "#/$defs/Chips" |
| }, |
| { |
| "$ref": "#/$defs/OptionCards" |
| } |
| ] |
| }, |
| "hint": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "label", |
| "input" |
| ], |
| "additionalProperties": false, |
| "description": "Field with label, input component, and optional hint text" |
| }, |
| "Input": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "placeholder": { |
| "type": "string" |
| }, |
| "type": { |
| "type": "string", |
| "enum": [ |
| "text", |
| "email", |
| "password", |
| "number", |
| "url" |
| ] |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "name" |
| ], |
| "additionalProperties": false |
| }, |
| "TextArea": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "placeholder": { |
| "type": "string" |
| }, |
| "rows": { |
| "type": "number" |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "name" |
| ], |
| "additionalProperties": false |
| }, |
| "Select": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/SelectItem" |
| } |
| }, |
| "placeholder": { |
| "type": "string" |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": { |
| "type": "string" |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "small", |
| "medium", |
| "large" |
| ] |
| } |
| }, |
| "required": [ |
| "name", |
| "items" |
| ], |
| "additionalProperties": false |
| }, |
| "SelectItem": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "label": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "value", |
| "label" |
| ], |
| "additionalProperties": false, |
| "description": "Option for Select" |
| }, |
| "DatePicker": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "mode": { |
| "type": "string", |
| "enum": [ |
| "single", |
| "range" |
| ] |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": {} |
| }, |
| "required": [ |
| "name" |
| ], |
| "additionalProperties": false |
| }, |
| "Slider": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "continuous", |
| "discrete" |
| ] |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "step": { |
| "type": "number" |
| }, |
| "defaultValue": { |
| "type": "array", |
| "items": { |
| "type": "number" |
| } |
| }, |
| "label": { |
| "type": "string" |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": { |
| "type": "array", |
| "items": { |
| "type": "number" |
| } |
| } |
| }, |
| "required": [ |
| "name", |
| "variant", |
| "min", |
| "max" |
| ], |
| "additionalProperties": false, |
| "description": "Numeric slider input; supports continuous and discrete (stepped) variants" |
| }, |
| "CheckBoxGroup": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/CheckBoxItem" |
| } |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": { |
| "type": "object", |
| "propertyNames": { |
| "type": "string" |
| }, |
| "additionalProperties": { |
| "type": "boolean" |
| } |
| } |
| }, |
| "required": [ |
| "name", |
| "items" |
| ], |
| "additionalProperties": false |
| }, |
| "CheckBoxItem": { |
| "type": "object", |
| "properties": { |
| "label": { |
| "type": "string" |
| }, |
| "description": { |
| "type": "string" |
| }, |
| "name": { |
| "type": "string" |
| }, |
| "defaultChecked": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "label", |
| "description", |
| "name" |
| ], |
| "additionalProperties": false |
| }, |
| "RadioGroup": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/RadioItem" |
| } |
| }, |
| "defaultValue": { |
| "type": "string" |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "value": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "name", |
| "items" |
| ], |
| "additionalProperties": false |
| }, |
| "RadioItem": { |
| "type": "object", |
| "properties": { |
| "label": { |
| "type": "string" |
| }, |
| "description": { |
| "type": "string" |
| }, |
| "value": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "label", |
| "description", |
| "value" |
| ], |
| "additionalProperties": false |
| }, |
| "Chips": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "type": { |
| "default": "multiple", |
| "type": "string", |
| "enum": [ |
| "single", |
| "multiple" |
| ] |
| }, |
| "items": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/ChipItem" |
| } |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "defaultValue": { |
| "anyOf": [ |
| { |
| "type": "string" |
| }, |
| { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "name", |
| "type", |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "A form field of compact selectable chips for choosing one or many short options; the selection is stored under `name`." |
| }, |
| "ChipItem": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "label": { |
| "type": "string" |
| }, |
| "icon": { |
| "$ref": "#/$defs/Icon" |
| }, |
| "disabled": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "value", |
| "label" |
| ], |
| "additionalProperties": false, |
| "description": "A single selectable chip inside a Chips group, with a value, label and optional icon." |
| }, |
| "Icon": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "category": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "name" |
| ], |
| "additionalProperties": false, |
| "description": "A lucide icon by kebab-case name (e.g. 'circle-check'). Optional category picks a topical fallback when the name doesn't resolve." |
| }, |
| "OptionCards": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "type": { |
| "default": "single", |
| "type": "string", |
| "enum": [ |
| "single", |
| "multiple" |
| ] |
| }, |
| "items": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/OptionCard" |
| } |
| }, |
| "rules": { |
| "type": "object", |
| "properties": { |
| "required": { |
| "type": "boolean" |
| }, |
| "email": { |
| "type": "boolean" |
| }, |
| "url": { |
| "type": "boolean" |
| }, |
| "numeric": { |
| "type": "boolean" |
| }, |
| "min": { |
| "type": "number" |
| }, |
| "max": { |
| "type": "number" |
| }, |
| "minLength": { |
| "type": "number" |
| }, |
| "maxLength": { |
| "type": "number" |
| }, |
| "pattern": { |
| "type": "string" |
| } |
| }, |
| "additionalProperties": false |
| }, |
| "defaultValue": { |
| "anyOf": [ |
| { |
| "type": "string" |
| }, |
| { |
| "type": "array", |
| "items": { |
| "type": "string" |
| } |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "name", |
| "type", |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "A form field of selectable cards (title, optional subtitle, optional icon or image) laid out in a responsive grid for choosing one or many options; the selection is stored under `name`." |
| }, |
| "OptionCard": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "title": { |
| "type": "string" |
| }, |
| "subtitle": { |
| "type": "string" |
| }, |
| "topContent": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/Icon" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| } |
| ] |
| }, |
| "disabled": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "value", |
| "title" |
| ], |
| "additionalProperties": false, |
| "description": "A single selectable card inside an OptionCards group, with a value, title, optional subtitle and an optional Icon or Image on top." |
| }, |
| "IconButton": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "icon": { |
| "$ref": "#/$defs/Icon" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "primary", |
| "secondary", |
| "tertiary" |
| ] |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "extra-small", |
| "small", |
| "medium", |
| "large" |
| ] |
| }, |
| "shape": { |
| "type": "string", |
| "enum": [ |
| "square", |
| "circle" |
| ] |
| } |
| }, |
| "required": [ |
| "name", |
| "icon" |
| ], |
| "additionalProperties": false, |
| "description": "Icon-only button. name is the accessible label and the action label; icon is an Icon; action fires on click." |
| }, |
| "Steps": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/StepsItem" |
| } |
| } |
| }, |
| "required": [ |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "Step-by-step guide" |
| }, |
| "StepsItem": { |
| "type": "object", |
| "properties": { |
| "title": { |
| "type": "string" |
| }, |
| "details": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "title", |
| "details" |
| ], |
| "additionalProperties": false, |
| "description": "title and details text for one step" |
| }, |
| "InlineHeader": { |
| "type": "object", |
| "properties": { |
| "heading": { |
| "type": "string" |
| }, |
| "description": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "heading" |
| ], |
| "additionalProperties": false, |
| "description": "Compact section heading with an optional one-line description, for use inside cards." |
| }, |
| "EntityList": { |
| "type": "object", |
| "properties": { |
| "rows": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "type": "object", |
| "properties": { |
| "left": { |
| "type": "string" |
| }, |
| "right": { |
| "type": "string" |
| }, |
| "rightVariant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number" |
| ] |
| } |
| }, |
| "required": [ |
| "left", |
| "right", |
| "rightVariant" |
| ], |
| "additionalProperties": false |
| } |
| }, |
| "size": { |
| "default": "default", |
| "type": "string", |
| "enum": [ |
| "small", |
| "default" |
| ] |
| }, |
| "header": { |
| "type": "object", |
| "properties": { |
| "left": { |
| "type": "string" |
| }, |
| "right": { |
| "type": "string" |
| }, |
| "rightVariant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number" |
| ] |
| } |
| }, |
| "required": [ |
| "left", |
| "right", |
| "rightVariant" |
| ], |
| "additionalProperties": false |
| }, |
| "footer": { |
| "type": "object", |
| "properties": { |
| "left": { |
| "type": "string" |
| }, |
| "right": { |
| "type": "string" |
| }, |
| "rightVariant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number" |
| ] |
| } |
| }, |
| "required": [ |
| "left", |
| "right", |
| "rightVariant" |
| ], |
| "additionalProperties": false |
| } |
| }, |
| "required": [ |
| "rows", |
| "size" |
| ], |
| "additionalProperties": false, |
| "description": "Two-column key/value rows (left label, right value). size 'default' supports optional header and footer rows; rightVariant 'number' uses tabular numbers." |
| }, |
| "EditableTable": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "default": "", |
| "type": "string" |
| }, |
| "columns": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "type": "object", |
| "properties": { |
| "type": { |
| "type": "string", |
| "enum": [ |
| "text", |
| "number", |
| "date-single", |
| "select", |
| "url" |
| ] |
| }, |
| "key": { |
| "default": "default", |
| "type": "string" |
| }, |
| "header": { |
| "default": "", |
| "type": "string" |
| }, |
| "width": { |
| "type": "number" |
| }, |
| "options": { |
| "type": "array", |
| "items": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "label": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "value", |
| "label" |
| ], |
| "additionalProperties": false |
| } |
| } |
| }, |
| "required": [ |
| "type", |
| "key", |
| "header" |
| ], |
| "additionalProperties": false |
| } |
| }, |
| "data": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "type": "object", |
| "properties": { |
| "id": { |
| "type": "string" |
| }, |
| "values": { |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "type": "string" |
| }, |
| { |
| "type": "number" |
| } |
| ] |
| } |
| } |
| }, |
| "required": [ |
| "id", |
| "values" |
| ], |
| "additionalProperties": false |
| } |
| } |
| }, |
| "required": [ |
| "name", |
| "columns", |
| "data" |
| ], |
| "additionalProperties": false, |
| "description": "Spreadsheet-like table whose cells the user can edit inline (text, number, url, date, select columns); edits are saved back as a form field" |
| }, |
| "SnippetCardBlock": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "minItems": 2, |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/SnippetCardItem" |
| } |
| }, |
| "layout": { |
| "default": "grid", |
| "type": "string", |
| "enum": [ |
| "grid" |
| ] |
| }, |
| "responsive": { |
| "default": true, |
| "type": "boolean" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "gap": { |
| "anyOf": [ |
| { |
| "type": "number" |
| }, |
| { |
| "type": "string" |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "items", |
| "layout", |
| "responsive" |
| ], |
| "additionalProperties": false, |
| "description": "A responsive grid of compact label/value cards (2 per row) for showing several short facts side by side; optionally clickable with a shared action." |
| }, |
| "SnippetCardItem": { |
| "type": "object", |
| "properties": { |
| "id": { |
| "type": "string" |
| }, |
| "lhs": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/IconText" |
| }, |
| { |
| "$ref": "#/$defs/ImageText" |
| } |
| ] |
| }, |
| "rhs": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/Text" |
| }, |
| { |
| "$ref": "#/$defs/BoldText" |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "lhs" |
| ], |
| "additionalProperties": false, |
| "description": "One row-style snippet card: a label on the left (IconText or ImageText) and an optional value on the right (Text or BoldText)." |
| }, |
| "IconText": { |
| "type": "object", |
| "properties": { |
| "icon": { |
| "$ref": "#/$defs/Icon" |
| }, |
| "iconVariant": { |
| "default": "neutral", |
| "type": "string", |
| "enum": [ |
| "neutral", |
| "info", |
| "success", |
| "warning", |
| "danger", |
| "inverted", |
| "filled", |
| "soft" |
| ] |
| }, |
| "iconSize": { |
| "default": "m", |
| "type": "string", |
| "enum": [ |
| "xs", |
| "s", |
| "m", |
| "l", |
| "xl", |
| "sm", |
| "md", |
| "lg" |
| ] |
| }, |
| "title": { |
| "type": "string" |
| }, |
| "subtitle": { |
| "type": "string" |
| }, |
| "bold": { |
| "default": false, |
| "type": "boolean" |
| }, |
| "layout": { |
| "default": "horizontal", |
| "type": "string", |
| "enum": [ |
| "horizontal", |
| "vertical" |
| ] |
| } |
| }, |
| "required": [ |
| "icon", |
| "iconVariant", |
| "iconSize", |
| "title", |
| "bold", |
| "layout" |
| ], |
| "additionalProperties": false, |
| "description": "An icon badge with a title and optional subtitle, laid out horizontally or vertically. iconVariant sets the badge color." |
| }, |
| "ImageText": { |
| "type": "object", |
| "properties": { |
| "src": { |
| "type": "string" |
| }, |
| "alt": { |
| "type": "string" |
| }, |
| "title": { |
| "type": "string" |
| }, |
| "subtitle": { |
| "type": "string" |
| }, |
| "bold": { |
| "default": false, |
| "type": "boolean" |
| }, |
| "layout": { |
| "default": "horizontal", |
| "type": "string", |
| "enum": [ |
| "horizontal", |
| "vertical" |
| ] |
| }, |
| "imageSize": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "src", |
| "title", |
| "bold", |
| "layout" |
| ], |
| "additionalProperties": false, |
| "description": "A small square image (thumbnail/avatar) with a title and optional subtitle. src must be a real image URL." |
| }, |
| "Text": { |
| "type": "object", |
| "properties": { |
| "variant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number" |
| ] |
| }, |
| "value": { |
| "type": "string" |
| }, |
| "subtext": { |
| "type": "string" |
| }, |
| "subtextVariant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number", |
| "metric" |
| ] |
| }, |
| "size": { |
| "default": "sm", |
| "type": "string", |
| "enum": [ |
| "xs", |
| "sm", |
| "md", |
| "lg" |
| ] |
| } |
| }, |
| "required": [ |
| "variant", |
| "value", |
| "subtextVariant", |
| "size" |
| ], |
| "additionalProperties": false, |
| "description": "Plain text line with optional subtext. variant 'number' uses tabular number styling; subtextVariant 'metric' colors a leading +/- subtext green/red." |
| }, |
| "BoldText": { |
| "type": "object", |
| "properties": { |
| "variant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number" |
| ] |
| }, |
| "value": { |
| "type": "string" |
| }, |
| "subtext": { |
| "type": "string" |
| }, |
| "subtextVariant": { |
| "default": "text", |
| "type": "string", |
| "enum": [ |
| "text", |
| "number", |
| "metric" |
| ] |
| }, |
| "size": { |
| "default": "sm", |
| "type": "string", |
| "enum": [ |
| "xs", |
| "sm", |
| "md", |
| "lg" |
| ] |
| } |
| }, |
| "required": [ |
| "variant", |
| "value", |
| "subtextVariant", |
| "size" |
| ], |
| "additionalProperties": false, |
| "description": "Emphasized (bold) text line with optional subtext. variant 'number' uses tabular number styling; subtextVariant 'metric' colors a leading +/- subtext green/red." |
| }, |
| "OverviewCardBlock": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "minItems": 2, |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/OverviewCardItem" |
| } |
| }, |
| "layout": { |
| "default": "grid", |
| "type": "string", |
| "enum": [ |
| "grid", |
| "carousel" |
| ] |
| }, |
| "responsive": { |
| "default": true, |
| "type": "boolean" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "gap": { |
| "anyOf": [ |
| { |
| "type": "number" |
| }, |
| { |
| "type": "string" |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "items", |
| "layout", |
| "responsive" |
| ], |
| "additionalProperties": false, |
| "description": "A grid or horizontal carousel of compact overview cards, each with a heading (icon/image/text) on top and an inline metric below; optionally clickable with a shared action." |
| }, |
| "OverviewCardItem": { |
| "type": "object", |
| "properties": { |
| "id": { |
| "type": "string" |
| }, |
| "top": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/IconText" |
| }, |
| { |
| "$ref": "#/$defs/ImageText" |
| }, |
| { |
| "$ref": "#/$defs/Text" |
| } |
| ] |
| }, |
| "bottom": { |
| "$ref": "#/$defs/MetricIndicatorInline" |
| } |
| }, |
| "required": [ |
| "top" |
| ], |
| "additionalProperties": false, |
| "description": "One overview card: a heading slot at the top (IconText, ImageText or Text) and an optional MetricIndicatorInline at the bottom." |
| }, |
| "MetricIndicatorInline": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "subtext": { |
| "type": "string" |
| }, |
| "trend": { |
| "type": "object", |
| "properties": { |
| "direction": { |
| "type": "string", |
| "enum": [ |
| "up", |
| "down" |
| ] |
| }, |
| "value": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "direction", |
| "value" |
| ], |
| "additionalProperties": false |
| } |
| }, |
| "required": [ |
| "value" |
| ], |
| "additionalProperties": false, |
| "description": "Headline metric value with an optional +/- percentage trend and subtext, all on one line." |
| }, |
| "ContextCardBlock": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "minItems": 2, |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/ContextCardItem" |
| } |
| }, |
| "layout": { |
| "default": "grid", |
| "type": "string", |
| "enum": [ |
| "grid", |
| "carousel" |
| ] |
| }, |
| "responsive": { |
| "default": true, |
| "type": "boolean" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "gap": { |
| "anyOf": [ |
| { |
| "type": "number" |
| }, |
| { |
| "type": "string" |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "items", |
| "layout", |
| "responsive" |
| ], |
| "additionalProperties": false, |
| "description": "A grid or carousel of compact tinted context cards (title or tag plus a short bold body); an optional action makes every card clickable." |
| }, |
| "ContextCardItem": { |
| "type": "object", |
| "properties": { |
| "id": { |
| "type": "string" |
| }, |
| "title": { |
| "anyOf": [ |
| { |
| "type": "string" |
| }, |
| { |
| "$ref": "#/$defs/Tag" |
| } |
| ] |
| }, |
| "body": { |
| "type": "string" |
| }, |
| "bgColor": { |
| "type": "string", |
| "enum": [ |
| "gray" |
| ] |
| }, |
| "bgImageSrc": { |
| "type": "string" |
| }, |
| "bgImageAlt": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "title" |
| ], |
| "additionalProperties": false, |
| "description": "A single card inside a ContextCardBlock: a title (plain string or Tag), an optional markdown body, and an optional gray tint or background image." |
| }, |
| "Tag": { |
| "type": "object", |
| "properties": { |
| "text": { |
| "type": "string" |
| }, |
| "icon": { |
| "$ref": "#/$defs/Icon" |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "sm", |
| "md", |
| "lg" |
| ] |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "neutral", |
| "info", |
| "success", |
| "warning", |
| "danger" |
| ] |
| } |
| }, |
| "required": [ |
| "text" |
| ], |
| "additionalProperties": false, |
| "description": "Styled tag/badge with optional Icon and variant" |
| }, |
| "CompositeCardBlock": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "minItems": 2, |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/CompositeCardItem" |
| } |
| }, |
| "layout": { |
| "default": "grid", |
| "type": "string", |
| "enum": [ |
| "grid", |
| "carousel" |
| ] |
| }, |
| "responsive": { |
| "default": true, |
| "type": "boolean" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "gap": { |
| "anyOf": [ |
| { |
| "type": "number" |
| }, |
| { |
| "type": "string" |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "items", |
| "layout", |
| "responsive" |
| ], |
| "additionalProperties": false, |
| "description": "A two-per-row grid or carousel of rich cards, each with an optional header, stacked body content (text, metrics, charts, lists, tags) and a price/button footer; an optional action makes every card clickable." |
| }, |
| "CompositeCardItem": { |
| "type": "object", |
| "properties": { |
| "id": { |
| "type": "string" |
| }, |
| "header": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/IconText" |
| }, |
| { |
| "$ref": "#/$defs/ImageText" |
| }, |
| { |
| "$ref": "#/$defs/ImageTextLarge" |
| }, |
| { |
| "$ref": "#/$defs/Text" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| } |
| ] |
| }, |
| "body": { |
| "default": [], |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/Text" |
| }, |
| { |
| "$ref": "#/$defs/BoldText" |
| }, |
| { |
| "$ref": "#/$defs/MetricIndicatorInline" |
| }, |
| { |
| "$ref": "#/$defs/IconText" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| }, |
| { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| { |
| "$ref": "#/$defs/BarChart" |
| }, |
| { |
| "$ref": "#/$defs/LineChart" |
| }, |
| { |
| "$ref": "#/$defs/ListBlock" |
| }, |
| { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| { |
| "$ref": "#/$defs/EntityList" |
| } |
| ] |
| } |
| }, |
| "footer": { |
| "type": "object", |
| "properties": { |
| "price": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/BoldText" |
| }, |
| { |
| "$ref": "#/$defs/MetricIndicatorWithStrikethrough" |
| } |
| ] |
| }, |
| "button": { |
| "$ref": "#/$defs/Button" |
| } |
| }, |
| "additionalProperties": false |
| } |
| }, |
| "required": [ |
| "body" |
| ], |
| "additionalProperties": false, |
| "description": "A single card inside a CompositeCardBlock: an optional header (icon/image/text), a stack of body elements (text, metrics, charts, lists, tags), and an optional price/button footer." |
| }, |
| "ImageTextLarge": { |
| "type": "object", |
| "properties": { |
| "src": { |
| "type": "string" |
| }, |
| "alt": { |
| "type": "string" |
| }, |
| "title": { |
| "type": "string" |
| }, |
| "subtitle": { |
| "type": "string" |
| }, |
| "bold": { |
| "default": false, |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "src", |
| "title", |
| "bold" |
| ], |
| "additionalProperties": false, |
| "description": "A full-width banner image above a bold title and optional subtitle. src must be a real image URL." |
| }, |
| "ListBlock": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/ListItem" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "number", |
| "image" |
| ] |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "default", |
| "small" |
| ] |
| } |
| }, |
| "required": [ |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "A list of items with number or image indicators. Each item can optionally have an action. size small renders a compact list." |
| }, |
| "ListItem": { |
| "type": "object", |
| "properties": { |
| "title": { |
| "type": "string" |
| }, |
| "subtitle": { |
| "type": "string" |
| }, |
| "image": { |
| "type": "object", |
| "properties": { |
| "src": { |
| "type": "string" |
| }, |
| "alt": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "src", |
| "alt" |
| ], |
| "additionalProperties": false |
| }, |
| "actionLabel": { |
| "type": "string" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| } |
| }, |
| "required": [ |
| "title" |
| ], |
| "additionalProperties": false, |
| "description": "Item in a ListBlock — displays a title with an optional subtitle and image. When action is provided, the item becomes clickable." |
| }, |
| "MetricIndicatorWithStrikethrough": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "subtext": { |
| "type": "string" |
| }, |
| "previousValue": { |
| "type": "string" |
| }, |
| "trend": { |
| "type": "object", |
| "properties": { |
| "direction": { |
| "type": "string", |
| "enum": [ |
| "up", |
| "down" |
| ] |
| }, |
| "value": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "direction", |
| "value" |
| ], |
| "additionalProperties": false |
| } |
| }, |
| "required": [ |
| "value" |
| ], |
| "additionalProperties": false, |
| "description": "Headline metric value with an optional struck-through previousValue, a +/- percentage trend, and subtext below." |
| }, |
| "VisualCardBlock": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "minItems": 2, |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/VisualCardItem" |
| } |
| }, |
| "layout": { |
| "default": "grid", |
| "type": "string", |
| "enum": [ |
| "grid", |
| "carousel" |
| ] |
| }, |
| "responsive": { |
| "default": true, |
| "type": "boolean" |
| }, |
| "action": { |
| "$ref": "#/$defs/ActionExpression" |
| }, |
| "gap": { |
| "anyOf": [ |
| { |
| "type": "number" |
| }, |
| { |
| "type": "string" |
| } |
| ] |
| } |
| }, |
| "required": [ |
| "items", |
| "layout", |
| "responsive" |
| ], |
| "additionalProperties": false, |
| "description": "A grid or carousel of photo-first cards: a full-bleed background image with a tag on top and a bold text panel at the bottom; an optional action makes every card clickable." |
| }, |
| "VisualCardItem": { |
| "type": "object", |
| "properties": { |
| "body": { |
| "$ref": "#/$defs/BoldText" |
| }, |
| "id": { |
| "type": "string" |
| }, |
| "bgImageSrc": { |
| "type": "string" |
| }, |
| "tag": { |
| "$ref": "#/$defs/Tag" |
| }, |
| "bgImageAlt": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "body" |
| ], |
| "additionalProperties": false, |
| "description": "A single photo-first card inside a VisualCardBlock: a BoldText body panel, an optional Tag, and a background image (bgImageSrc must be a real URL; bgImageAlt is its alt text)." |
| }, |
| "Tabs": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/TabItem" |
| } |
| } |
| }, |
| "required": [ |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "Tabbed container" |
| }, |
| "TabItem": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "trigger": { |
| "type": "string" |
| }, |
| "content": { |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/TextContent" |
| }, |
| { |
| "$ref": "#/$defs/MarkDownRenderer" |
| }, |
| { |
| "$ref": "#/$defs/CardHeader" |
| }, |
| { |
| "$ref": "#/$defs/Callout" |
| }, |
| { |
| "$ref": "#/$defs/TextCallout" |
| }, |
| { |
| "$ref": "#/$defs/CodeBlock" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| }, |
| { |
| "$ref": "#/$defs/ImageBlock" |
| }, |
| { |
| "$ref": "#/$defs/ImageGallery" |
| }, |
| { |
| "$ref": "#/$defs/Separator" |
| }, |
| { |
| "$ref": "#/$defs/HorizontalBarChart" |
| }, |
| { |
| "$ref": "#/$defs/RadarChart" |
| }, |
| { |
| "$ref": "#/$defs/PieChart" |
| }, |
| { |
| "$ref": "#/$defs/RadialChart" |
| }, |
| { |
| "$ref": "#/$defs/SingleStackedBarChart" |
| }, |
| { |
| "$ref": "#/$defs/ScatterChart" |
| }, |
| { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| { |
| "$ref": "#/$defs/BarChart" |
| }, |
| { |
| "$ref": "#/$defs/LineChart" |
| }, |
| { |
| "$ref": "#/$defs/Table" |
| }, |
| { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| { |
| "$ref": "#/$defs/Form" |
| }, |
| { |
| "$ref": "#/$defs/Buttons" |
| }, |
| { |
| "$ref": "#/$defs/IconButton" |
| }, |
| { |
| "$ref": "#/$defs/Steps" |
| }, |
| { |
| "$ref": "#/$defs/InlineHeader" |
| }, |
| { |
| "$ref": "#/$defs/EntityList" |
| }, |
| { |
| "$ref": "#/$defs/EditableTable" |
| }, |
| { |
| "$ref": "#/$defs/SnippetCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/OverviewCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/ContextCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/CompositeCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/VisualCardBlock" |
| } |
| ] |
| } |
| } |
| }, |
| "required": [ |
| "value", |
| "trigger", |
| "content" |
| ], |
| "additionalProperties": false, |
| "description": "value is unique id, trigger is tab label, content is array of components" |
| }, |
| "Carousel": { |
| "type": "object", |
| "properties": { |
| "children": { |
| "type": "array", |
| "items": { |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/TextContent" |
| }, |
| { |
| "$ref": "#/$defs/MarkDownRenderer" |
| }, |
| { |
| "$ref": "#/$defs/CardHeader" |
| }, |
| { |
| "$ref": "#/$defs/Callout" |
| }, |
| { |
| "$ref": "#/$defs/TextCallout" |
| }, |
| { |
| "$ref": "#/$defs/CodeBlock" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| }, |
| { |
| "$ref": "#/$defs/ImageBlock" |
| }, |
| { |
| "$ref": "#/$defs/ImageGallery" |
| }, |
| { |
| "$ref": "#/$defs/Separator" |
| }, |
| { |
| "$ref": "#/$defs/HorizontalBarChart" |
| }, |
| { |
| "$ref": "#/$defs/RadarChart" |
| }, |
| { |
| "$ref": "#/$defs/PieChart" |
| }, |
| { |
| "$ref": "#/$defs/RadialChart" |
| }, |
| { |
| "$ref": "#/$defs/SingleStackedBarChart" |
| }, |
| { |
| "$ref": "#/$defs/ScatterChart" |
| }, |
| { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| { |
| "$ref": "#/$defs/BarChart" |
| }, |
| { |
| "$ref": "#/$defs/LineChart" |
| }, |
| { |
| "$ref": "#/$defs/Table" |
| }, |
| { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| { |
| "$ref": "#/$defs/Form" |
| }, |
| { |
| "$ref": "#/$defs/Buttons" |
| }, |
| { |
| "$ref": "#/$defs/IconButton" |
| }, |
| { |
| "$ref": "#/$defs/Steps" |
| }, |
| { |
| "$ref": "#/$defs/InlineHeader" |
| }, |
| { |
| "$ref": "#/$defs/EntityList" |
| }, |
| { |
| "$ref": "#/$defs/EditableTable" |
| }, |
| { |
| "$ref": "#/$defs/SnippetCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/OverviewCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/ContextCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/CompositeCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/VisualCardBlock" |
| } |
| ] |
| } |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "card", |
| "sunk" |
| ] |
| } |
| }, |
| "required": [ |
| "children" |
| ], |
| "additionalProperties": false, |
| "description": "Horizontal scrollable carousel" |
| }, |
| "Stack": { |
| "type": "object", |
| "properties": { |
| "children": { |
| "type": "array", |
| "items": {} |
| }, |
| "direction": { |
| "type": "string", |
| "enum": [ |
| "row", |
| "column" |
| ] |
| }, |
| "gap": { |
| "type": "string", |
| "enum": [ |
| "none", |
| "xs", |
| "s", |
| "m", |
| "l", |
| "xl", |
| "2xl" |
| ] |
| }, |
| "align": { |
| "type": "string", |
| "enum": [ |
| "start", |
| "center", |
| "end", |
| "stretch", |
| "baseline" |
| ] |
| }, |
| "justify": { |
| "type": "string", |
| "enum": [ |
| "start", |
| "center", |
| "end", |
| "between", |
| "around", |
| "evenly" |
| ] |
| }, |
| "wrap": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "children" |
| ], |
| "additionalProperties": false, |
| "description": "Flex container. direction: \"row\"|\"column\" (default \"column\"). gap: \"none\"|\"xs\"|\"s\"|\"m\"|\"l\"|\"xl\"|\"2xl\" (default \"m\"). align: \"start\"|\"center\"|\"end\"|\"stretch\"|\"baseline\". justify: \"start\"|\"center\"|\"end\"|\"between\"|\"around\"|\"evenly\"." |
| }, |
| "Slice": { |
| "type": "object", |
| "properties": { |
| "category": { |
| "type": "string" |
| }, |
| "value": { |
| "type": "number" |
| } |
| }, |
| "required": [ |
| "category", |
| "value" |
| ], |
| "additionalProperties": false, |
| "description": "One slice with label and numeric value" |
| }, |
| "Label": { |
| "type": "object", |
| "properties": { |
| "text": { |
| "type": "string" |
| } |
| }, |
| "required": [ |
| "text" |
| ], |
| "additionalProperties": false, |
| "description": "Text label" |
| }, |
| "SwitchGroup": { |
| "type": "object", |
| "properties": { |
| "name": { |
| "type": "string" |
| }, |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/SwitchItem" |
| } |
| }, |
| "variant": { |
| "type": "string", |
| "enum": [ |
| "clear", |
| "card", |
| "sunk" |
| ] |
| }, |
| "value": { |
| "type": "object", |
| "propertyNames": { |
| "type": "string" |
| }, |
| "additionalProperties": { |
| "type": "boolean" |
| } |
| } |
| }, |
| "required": [ |
| "name", |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "Group of switch toggles" |
| }, |
| "SwitchItem": { |
| "type": "object", |
| "properties": { |
| "label": { |
| "type": "string" |
| }, |
| "description": { |
| "type": "string" |
| }, |
| "name": { |
| "type": "string" |
| }, |
| "defaultChecked": { |
| "type": "boolean" |
| } |
| }, |
| "required": [ |
| "name" |
| ], |
| "additionalProperties": false, |
| "description": "Individual switch toggle" |
| }, |
| "Accordion": { |
| "type": "object", |
| "properties": { |
| "items": { |
| "type": "array", |
| "items": { |
| "$ref": "#/$defs/AccordionItem" |
| } |
| } |
| }, |
| "required": [ |
| "items" |
| ], |
| "additionalProperties": false, |
| "description": "Collapsible sections" |
| }, |
| "AccordionItem": { |
| "type": "object", |
| "properties": { |
| "value": { |
| "type": "string" |
| }, |
| "trigger": { |
| "type": "string" |
| }, |
| "content": { |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/TextContent" |
| }, |
| { |
| "$ref": "#/$defs/MarkDownRenderer" |
| }, |
| { |
| "$ref": "#/$defs/CardHeader" |
| }, |
| { |
| "$ref": "#/$defs/Callout" |
| }, |
| { |
| "$ref": "#/$defs/TextCallout" |
| }, |
| { |
| "$ref": "#/$defs/CodeBlock" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| }, |
| { |
| "$ref": "#/$defs/ImageBlock" |
| }, |
| { |
| "$ref": "#/$defs/ImageGallery" |
| }, |
| { |
| "$ref": "#/$defs/Separator" |
| }, |
| { |
| "$ref": "#/$defs/HorizontalBarChart" |
| }, |
| { |
| "$ref": "#/$defs/RadarChart" |
| }, |
| { |
| "$ref": "#/$defs/PieChart" |
| }, |
| { |
| "$ref": "#/$defs/RadialChart" |
| }, |
| { |
| "$ref": "#/$defs/SingleStackedBarChart" |
| }, |
| { |
| "$ref": "#/$defs/ScatterChart" |
| }, |
| { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| { |
| "$ref": "#/$defs/BarChart" |
| }, |
| { |
| "$ref": "#/$defs/LineChart" |
| }, |
| { |
| "$ref": "#/$defs/Table" |
| }, |
| { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| { |
| "$ref": "#/$defs/Form" |
| }, |
| { |
| "$ref": "#/$defs/Buttons" |
| }, |
| { |
| "$ref": "#/$defs/IconButton" |
| }, |
| { |
| "$ref": "#/$defs/Steps" |
| }, |
| { |
| "$ref": "#/$defs/InlineHeader" |
| }, |
| { |
| "$ref": "#/$defs/EntityList" |
| }, |
| { |
| "$ref": "#/$defs/EditableTable" |
| }, |
| { |
| "$ref": "#/$defs/SnippetCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/OverviewCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/ContextCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/CompositeCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/VisualCardBlock" |
| } |
| ] |
| } |
| } |
| }, |
| "required": [ |
| "value", |
| "trigger", |
| "content" |
| ], |
| "additionalProperties": false, |
| "description": "value is unique id, trigger is section title" |
| }, |
| "Modal": { |
| "type": "object", |
| "properties": { |
| "title": { |
| "type": "string" |
| }, |
| "open": { |
| "type": "boolean" |
| }, |
| "children": { |
| "type": "array", |
| "items": { |
| "anyOf": [ |
| { |
| "$ref": "#/$defs/TextContent" |
| }, |
| { |
| "$ref": "#/$defs/MarkDownRenderer" |
| }, |
| { |
| "$ref": "#/$defs/CardHeader" |
| }, |
| { |
| "$ref": "#/$defs/Callout" |
| }, |
| { |
| "$ref": "#/$defs/TextCallout" |
| }, |
| { |
| "$ref": "#/$defs/CodeBlock" |
| }, |
| { |
| "$ref": "#/$defs/Image" |
| }, |
| { |
| "$ref": "#/$defs/ImageBlock" |
| }, |
| { |
| "$ref": "#/$defs/ImageGallery" |
| }, |
| { |
| "$ref": "#/$defs/Separator" |
| }, |
| { |
| "$ref": "#/$defs/HorizontalBarChart" |
| }, |
| { |
| "$ref": "#/$defs/RadarChart" |
| }, |
| { |
| "$ref": "#/$defs/PieChart" |
| }, |
| { |
| "$ref": "#/$defs/RadialChart" |
| }, |
| { |
| "$ref": "#/$defs/SingleStackedBarChart" |
| }, |
| { |
| "$ref": "#/$defs/ScatterChart" |
| }, |
| { |
| "$ref": "#/$defs/AreaChart" |
| }, |
| { |
| "$ref": "#/$defs/BarChart" |
| }, |
| { |
| "$ref": "#/$defs/LineChart" |
| }, |
| { |
| "$ref": "#/$defs/Table" |
| }, |
| { |
| "$ref": "#/$defs/TagBlock" |
| }, |
| { |
| "$ref": "#/$defs/Form" |
| }, |
| { |
| "$ref": "#/$defs/Buttons" |
| }, |
| { |
| "$ref": "#/$defs/IconButton" |
| }, |
| { |
| "$ref": "#/$defs/Steps" |
| }, |
| { |
| "$ref": "#/$defs/InlineHeader" |
| }, |
| { |
| "$ref": "#/$defs/EntityList" |
| }, |
| { |
| "$ref": "#/$defs/EditableTable" |
| }, |
| { |
| "$ref": "#/$defs/SnippetCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/OverviewCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/ContextCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/CompositeCardBlock" |
| }, |
| { |
| "$ref": "#/$defs/VisualCardBlock" |
| } |
| ] |
| } |
| }, |
| "size": { |
| "type": "string", |
| "enum": [ |
| "sm", |
| "md", |
| "lg" |
| ] |
| } |
| }, |
| "required": [ |
| "title", |
| "children" |
| ], |
| "additionalProperties": false, |
| "description": "Modal dialog. open is a reactive $boolean binding — set to true to open, X/Escape/backdrop auto-closes. Put Form with buttons inside children." |
| } |
| } |
| } |
| } |
|
|
