@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/manifest/entries/button.js

@@ -0,0 +1,47 @@
+export const buttonEntry = {
+    type: 'button',
+    category: 'input',
+    description: 'Button with variant, size, loading. In a flow step, buttons that emit flow.next or flow.submit with value.selection render as choice cards; give each an icon and a description.',
+    props: {
+        label: { type: 'string', required: false, description: 'Button text.' },
+        variant: { type: '"default" | "secondary" | "outline" | "ghost" | "link" | "destructive"', required: false, description: 'Style variant.' },
+        size: { type: '"sm" | "md" | "lg" | "icon"', required: false, description: 'Button size.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable interaction.' },
+        loading: { type: 'boolean', required: false, description: 'Show spinner and disable.' },
+        type: { type: '"button" | "submit" | "reset"', required: false, description: 'HTML button type.' },
+        icon: {
+            type: '"work" | "school" | "creative" | "gaming" | "everyday" | "travel" | "light" | "home" | "budget" | "mid" | "premium" | "power" | "food" | "veg" | "meat" | "fish" | "sweet" | "coffee" | "drinks" | "culture" | "outdoors" | "relax" | "shopping" | "morning" | "afternoon" | "evening" | "night" | "solo" | "couple" | "family" | "group" | "days" | "quick"',
+            required: false,
+            description: 'Flow choice cards only: the tile icon. Any other name is ignored; without one the icon is guessed from the label, else none.',
+        },
+        description: { type: 'string', required: false, description: 'Flow choice cards only: a one-line hint under the label.' },
+    },
+    events: {
+        on_click: { type: 'EventAction', required: false, description: 'Action fired on click.' },
+    },
+    example: { type: 'button', props: { label: 'Save changes', variant: 'default', size: 'md', type: 'submit' } },
+    pocket: {
+        state: { saving: false, savedCount: 0 },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px', align: 'start' },
+            children: [
+                {
+                    type: 'button',
+                    props: { label: '{state.saving ? "Saving…" : "Save changes"}', loading: '{state.saving}' },
+                    on_click: {
+                        action: 'flow',
+                        steps: [
+                            { action: 'set', target: 'saving', value: true },
+                            { action: 'delay', ms: 600 },
+                            { action: 'set', target: 'saving', value: false },
+                            { action: 'set', target: 'savedCount', value: '{state.savedCount + 1}' },
+                            { action: 'toast', message: 'Saved', variant: 'success' },
+                        ],
+                    },
+                },
+                { type: 'text', props: { text: 'Saved {state.savedCount} times' } },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/c4.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const c4Entry: WidgetManifestEntry;

package/dist/manifest/entries/c4.js

@@ -0,0 +1,73 @@
+export const c4Entry = {
+    type: 'c4',
+    category: 'data',
+    description: 'C4 architecture diagram (Context / Container / Component / Code): ELK auto-layout, drill-down, live status rings, reach highlighting, curved edges, flow playback and in-place zoom down to code.',
+    props: {
+        diagram: {
+            type: '{ title: string; level: "context" | "container" | "component" | "code"; description?: string; elements: Array<{ id: string; name: string; kind?: "person" | "system" | "container" | "component" | "code"; type?: string; description?: string; technology?: string; external?: boolean; drillable?: boolean; children?: Element[]; code?: { startLine: number; before: string[]; after?: string[]; changed?: [number, number]; language?: string } }>; relationships: Array<{ from: string; to: string; label?: string; technology?: string; style?: "sync" | "async" | "event" }> }',
+            required: true,
+            description: 'C4 diagram definition. `kind` sets the shape; without it the shape is inferred from the fields present. type "database" or "queue" draws those shapes. An empty title hides the header.',
+        },
+        status: {
+            type: 'Record<string, "changing" | "changed" | "landed" | "drift" | "failed" | "planned" | "future" | "added" | "removed">',
+            required: false,
+            description: 'Live state per element id, drawn as a ring and listed in the legend. "planned" is a dashed blueprint for something not built yet, "future" a dotted one further out, "added" a double success ring on a new element and "removed" a ghost of one that is gone (for a before/after comparison).',
+        },
+        markers: {
+            type: 'Record<string, Array<{ id: string; label: string; color: string }>>',
+            required: false,
+            description: 'Dots per element id: who or what is working there. color is any CSS colour or var(--token).',
+        },
+        focusId: { type: 'string', required: false, description: 'Element the camera frames while follow is true.' },
+        follow: { type: 'boolean', required: false, description: 'Keep the camera on focusId.' },
+        selectedId: { type: 'string', required: false, description: 'Controlled selection. Leave unset to let clicks select.' },
+        expanded: {
+            type: 'string[]',
+            required: false,
+            description: 'Element ids drawn open on one canvas (semantic zoom). Passing it, even empty, turns the mode on; a code element with `code` opens as a code panel.',
+        },
+        scopeId: { type: 'string', required: false, description: 'Semantic zoom: the element being looked inside; everything outside it is ghosted.' },
+        highlight: {
+            type: '{ id: string; reach?: "in" | "out" | "both"; depth?: number }',
+            required: false,
+            description: 'Light one element\'s reach and dim the rest. reach follows relationships upstream (in), downstream (out) or both (default), up to depth hops (default 3); edges inside it take the accent and animate, still under reduced motion. An id not on the map changes nothing.',
+        },
+        edgeShape: {
+            type: '"orthogonal" | "curved"',
+            required: false,
+            description: 'How edges draw along the layout\'s routes: orthogonal with rounded corners (default), or smooth curves with arrowheads.',
+        },
+        flow: {
+            type: '{ id: string; name: string; description?: string; steps: Array<{ from: string; to: string; label: string; technology?: string; reverse?: boolean; implied?: boolean } | { at: string; label: string } | { note: string }> }',
+            required: false,
+            description: 'A data flow played over the map one step at a time (pair with step). A message lights its two ends and relationship and runs a marker along it; reverse means the model draws the relationship to → from; implied (no relationship) draws a dashed hop. A process pulses its element; a note dims nothing.',
+        },
+        step: { type: 'number', required: false, description: 'Index of the flow\'s current step. Out of range, or without flow, no step is shown.' },
+    },
+    events: {
+        on_step: {
+            type: 'EventAction',
+            required: false,
+            description: 'Fires with the index of the next step on a clicked connection (the onstep prop), e.g. { action: "set", target: "step", value: "{event}" }.',
+        },
+    },
+    example: {
+        type: 'c4',
+        props: {
+            diagram: {
+                title: 'E-Banking System',
+                level: 'context',
+                description: 'System context for the e-banking platform.',
+                elements: [
+                    { id: 'user', name: 'User', kind: 'person', description: 'A customer.' },
+                    { id: 'system', name: 'E-Banking System', kind: 'system', description: 'Account management.' },
+                    { id: 'bank', name: 'Bank', kind: 'system', external: true, description: 'Upstream banking system.' },
+                ],
+                relationships: [
+                    { from: 'user', to: 'system', label: 'Uses' },
+                    { from: 'system', to: 'bank', label: 'API calls' },
+                ],
+            },
+        },
+    },
+};

package/dist/manifest/entries/calendar.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const calendarEntry: WidgetManifestEntry;

package/dist/manifest/entries/calendar.js

@@ -0,0 +1,44 @@
+export const calendarEntry = {
+    type: 'calendar',
+    category: 'data',
+    description: 'Interactive month/week calendar with event visualization and date selection.',
+    props: {
+        events: { type: 'Array<{ id: string | number; title: string; start: string; end?: string; color?: string }>', required: false, description: 'Events with ISO dates.' },
+        view: { type: '"month" | "week"', required: false, description: 'Display mode.' },
+        value: { type: 'string | null', required: false, description: 'Selected ISO date (use with bind).' },
+        locale: { type: 'string', required: false, description: 'Locale code. Default "en-US".' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on date selection.' },
+        on_select: { type: 'EventAction', required: false, description: 'Fired when an event is clicked.' },
+    },
+    example: {
+        type: 'calendar',
+        props: {
+            view: 'month',
+            events: [
+                { id: 1, title: 'Sprint Start', start: '2026-05-05', color: '#3b82f6' },
+                { id: 2, title: 'Review', start: '2026-05-12', color: '#8b5cf6' },
+                { id: 3, title: 'Release', start: '2026-05-19', color: '#22c55e' },
+            ],
+        },
+    },
+    pocket: {
+        state: {
+            selectedDate: '2026-05-12',
+            events: [
+                { id: 1, title: 'Sprint Start', start: '2026-05-05', color: '#3b82f6' },
+                { id: 2, title: 'Review', start: '2026-05-12', color: '#8b5cf6' },
+                { id: 3, title: 'Release', start: '2026-05-19', color: '#22c55e' },
+            ],
+        },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                { type: 'calendar', props: { view: 'month', events: '{state.events}' }, bind: 'state.selectedDate' },
+                { type: 'text', props: { text: 'Selected: {state.selectedDate}' } },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/callout.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const calloutEntry: WidgetManifestEntry;

package/dist/manifest/entries/callout.js

@@ -0,0 +1,11 @@
+export const calloutEntry = {
+    type: 'callout',
+    category: 'research',
+    description: 'Colored callout box with icon, title, and body. Use to highlight insights, warnings, or summaries.',
+    props: {
+        text: { type: 'string', required: true, description: 'Body text.' },
+        title: { type: 'string', required: false, description: 'Callout title.' },
+        variant: { type: '"info" | "success" | "warning" | "insight"', required: false, description: 'Variant.' },
+    },
+    example: { type: 'callout', props: { variant: 'insight', title: 'Key Insight', text: 'Revenue growth accelerated to 45% YoY, driven by enterprise adoption.' } },
+};

package/dist/manifest/entries/card.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const cardEntry: WidgetManifestEntry;

package/dist/manifest/entries/card.js

@@ -0,0 +1,19 @@
+export const cardEntry = {
+    type: 'card',
+    category: 'layout',
+    description: 'Styled container with optional header, body, and footer. Variants: default/muted/outlined/selected/glass.',
+    props: {
+        title: { type: 'string', required: false, description: 'Card header title.' },
+        description: { type: 'string', required: false, description: 'Card header description.' },
+        variant: { type: '"default" | "muted" | "outlined" | "selected" | "glass"', required: false, description: 'Visual style variant.' },
+        density: { type: '"comfortable" | "compact"', required: false, description: 'Padding and gap size.' },
+        interactive: { type: 'boolean', required: false, description: 'Enable hover/click cursor.' },
+    },
+    example: {
+        type: 'card',
+        props: { title: 'Recent Activity', description: 'Last 24 hours', variant: 'default' },
+        children: [
+            { type: 'text', props: { text: '12 events' } },
+        ],
+    },
+};

package/dist/manifest/entries/chart.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const chartEntry: WidgetManifestEntry;

package/dist/manifest/entries/chart.js

@@ -0,0 +1,27 @@
+export const chartEntry = {
+    type: 'chart',
+    category: 'data',
+    description: 'ECharts wrapper. Supports bar/line/area/pie/donut/candlestick/sparkline/heatmap/gauge/radar.',
+    props: {
+        data: { type: 'Array<{ label: string; value?: number; series?: Record<string, number> }>', required: true, description: 'Data points (shape varies by chart type).' },
+        type: { type: '"bar" | "line" | "area" | "pie" | "donut" | "candlestick" | "sparkline" | "heatmap" | "gauge" | "radar"', required: false, description: 'Chart type. Default "bar".' },
+        title: { type: 'string', required: false, description: 'Chart title.' },
+        height: { type: 'number', required: false, description: 'Height in px. Default 200.' },
+        colors: { type: 'string[]', required: false, description: 'Palette in order: one per series when points carry `series`, one per slice on pie/donut. On one series (bar, line) every point wears the first colour; give two or more to colour points individually. Default palette is categorical, no status colours.' },
+        reference: { type: 'string | string[]', required: false, description: 'Series keys that are a reference, not data (a target, plan or benchmark): drawn muted and dashed, outside the palette order.' },
+        tooltip: { type: 'boolean', required: false, description: 'Show tooltip on hover. Default true.' },
+    },
+    example: {
+        type: 'chart',
+        props: {
+            type: 'bar',
+            title: 'Q4 Revenue',
+            data: [
+                { label: 'Jan', value: 24000 },
+                { label: 'Feb', value: 18500 },
+                { label: 'Mar', value: 32100 },
+            ],
+            height: 280,
+        },
+    },
+};

package/dist/manifest/entries/checkbox-group.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const checkboxGroupEntry: WidgetManifestEntry;

package/dist/manifest/entries/checkbox-group.js

@@ -0,0 +1,49 @@
+// src/lib/manifest/entries/checkbox-group.ts
+// @file manifest/entries/checkbox-group.ts
+// @description Manifest entry for the `checkbox-group` widget — a multi-select
+//   list with Fluid Functionalism's gliding hover highlight + merged backgrounds
+//   for contiguous selections. Ported from FF (MIT) onto our motion primitive.
+// @created 2026-05-30 — RFC 12 premium pack: FF checkbox-group port (PR #45).
+export const checkboxGroupEntry = {
+    type: 'checkbox-group',
+    category: 'input',
+    description: 'Multi-select checkbox list. A background highlight glides between items on hover; contiguous checked items share a merged background. Bind an array of checked values.',
+    props: {
+        label: { type: 'string', required: false, description: 'Group label.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path holding the array of checked values, e.g. "{state.toppings}".' },
+        value: { type: '(string | number)[]', required: false, description: 'Array of checked values.' },
+        options: { type: 'string[] | Array<{ value: string | number; label: string; disabled?: boolean }>', required: true, description: 'Checkbox options.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable the whole group.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired with the new array of checked values when any item toggles.' },
+    },
+    example: {
+        type: 'checkbox-group',
+        props: { label: 'Toppings', options: ['Cheese', 'Mushrooms', 'Olives', 'Onions'] },
+        bind: '{state.toppings}',
+    },
+    pocket: {
+        state: { toppings: ['Cheese'] },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                {
+                    type: 'checkbox-group',
+                    props: {
+                        label: 'Toppings',
+                        options: [
+                            { value: 'cheese', label: 'Extra cheese' },
+                            { value: 'mushrooms', label: 'Mushrooms' },
+                            { value: 'olives', label: 'Olives' },
+                            { value: 'onions', label: 'Onions' },
+                        ],
+                    },
+                    bind: 'toppings',
+                },
+                { type: 'text', props: { text: 'Selected: {state.toppings}' } },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const checkboxEntry: WidgetManifestEntry;

package/dist/manifest/entries/checkbox.js

@@ -0,0 +1,30 @@
+export const checkboxEntry = {
+    type: 'checkbox',
+    category: 'input',
+    description: 'Checkbox with optional label.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label shown next to checkbox.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path, e.g. "{state.agreed}".' },
+        checked: { type: 'boolean', required: false, description: 'Checked state.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable checkbox.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on toggle.' },
+    },
+    example: { type: 'checkbox', props: { label: 'I agree to the terms', bind: '{state.agreed}' } },
+    pocket: {
+        state: { agreed: false },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                { type: 'checkbox', props: { label: 'I agree to the terms' }, bind: 'state.agreed' },
+                {
+                    type: 'button',
+                    props: { label: 'Continue', disabled: '{!state.agreed}' },
+                    on_click: { action: 'toast', message: 'Continuing…', variant: 'info' },
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/checklist-layout.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const checklistLayoutEntry: WidgetManifestEntry;

package/dist/manifest/entries/checklist-layout.js

@@ -0,0 +1,33 @@
+export const checklistLayoutEntry = {
+    type: 'checklist-layout',
+    category: 'composite',
+    description: 'Gated checklist with owners, due dates, attachments, and blocked dependencies. Distinct from `steps` (visual indicator only). Use for onboarding, audits, QA gates.',
+    props: {
+        title: { type: 'string', required: false, description: 'Checklist title.' },
+        description: { type: 'string', required: false, description: 'Checklist description.' },
+        items: {
+            type: 'Array<{ id: string; label: string; description?: string; state?: "pending" | "in-progress" | "done" | "blocked" | "skipped"; owner?: { id?: string; name: string; avatar?: string }; due?: string; overdue?: boolean; blockedBy?: string[]; attachments?: { name: string; url?: string }[]; actions?: EventAction | EventAction[]; toggleActions?: EventAction | EventAction[] }>',
+            required: true,
+            description: 'Checklist items. Click row → `actions`; click checkbox → `toggleActions`. Two-way bind the array with `bind: "state.checklist"` (default `value`/`onchange` surface) so toggles persist reactively through state. Toggling flips the item state optimistically and `toggleActions` still fires as a side-effect hook (API / audit). Blocked items (state `blocked` or non-empty `blockedBy`) cannot be marked done.',
+        },
+        groupBy: { type: '"none" | "state" | "owner"', required: false, description: 'Group items into sections. Default "none".' },
+        showProgress: { type: 'boolean', required: false, description: 'Show the auto-computed progress bar in the header. Default true.' },
+        progress: { type: 'number', required: false, description: 'Override the auto-computed progress (0 to 100).' },
+        emptyText: { type: 'string', required: false, description: 'Text shown when items is empty.' },
+    },
+    example: {
+        type: 'checklist-layout',
+        props: {
+            title: 'Customer onboarding',
+            description: 'Tasks required before going live.',
+            groupBy: 'state',
+            items: [
+                { id: 'sso', label: 'Configure SSO', state: 'done', owner: { name: 'Alex Liu' }, due: 'May 1' },
+                { id: 'data', label: 'Import historical data', state: 'in-progress', owner: { name: 'Sam Patel' }, due: 'May 8', attachments: [{ name: 'data.csv' }] },
+                { id: 'roles', label: 'Map user roles', state: 'pending', owner: { name: 'Jess Tan' }, due: 'May 10' },
+                { id: 'training', label: 'Run admin training', state: 'blocked', blockedBy: ['roles'], due: 'May 14' },
+                { id: 'review', label: 'Final QA review', state: 'pending', due: 'May 16', overdue: false },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/chip.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const chipEntry: WidgetManifestEntry;

package/dist/manifest/entries/chip.js

@@ -0,0 +1,15 @@
+export const chipEntry = {
+    type: 'chip',
+    category: 'display',
+    // 2026-09-16: was "Pill-shaped tag". The beautiful-ui re-skin moved this to a
+    // small square-cornered tint (rounded-md, borderless) and left `badge` as the
+    // rounded-full pill, so the old wording sent an LLM to the wrong widget.
+    description: 'Small square-cornered tag with optional close button. For a rounded pill, use badge.',
+    props: {
+        label: { type: 'string', required: true, description: 'Chip text.' },
+        variant: { type: '"default" | "primary" | "success" | "warning" | "destructive"', required: false, description: 'Style variant.' },
+        size: { type: '"sm" | "md"', required: false, description: 'Size variant.' },
+        closable: { type: 'boolean', required: false, description: 'Show X close button.' },
+    },
+    example: { type: 'chip', props: { label: 'TypeScript', variant: 'primary', closable: true } },
+};

package/dist/manifest/entries/citation.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const citationEntry: WidgetManifestEntry;

package/dist/manifest/entries/citation.js

@@ -0,0 +1,13 @@
+export const citationEntry = {
+    type: 'citation',
+    category: 'research',
+    description: 'Citation pill: an inline reference to a source with optional superscript number.',
+    props: {
+        source: { type: 'string', required: true, description: 'Publisher name.' },
+        color: { type: 'string', required: false, description: 'Accent color.' },
+        favicon: { type: 'string', required: false, description: 'Favicon URL override.' },
+        number: { type: 'number', required: false, description: 'Superscript citation number.' },
+        url: { type: 'string', required: false, description: 'Link URL.' },
+    },
+    example: { type: 'citation', props: { source: 'Bloomberg', number: 1, url: 'https://bloomberg.com/article' } },
+};

package/dist/manifest/entries/coachmark.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const coachmarkEntry: WidgetManifestEntry;

package/dist/manifest/entries/coachmark.js

@@ -0,0 +1,47 @@
+export const coachmarkEntry = {
+    type: 'coachmark',
+    category: 'overlay',
+    description: 'Multi-step product tour with highlighted targets, keyboard nav, and progress counter (driver.js).',
+    props: {
+        steps: { type: 'Array<{ target: string; title?: string; description?: string; side?: "top" | "right" | "bottom" | "left" | "over" }>', required: true, description: 'Tour steps. `target` is a CSS selector.' },
+        value: { type: 'boolean', required: false, description: 'Active state. Use with bind to control visibility.' },
+        autoStart: { type: 'boolean', required: false, description: 'Start tour on mount.' },
+        showButtons: { type: 'boolean', required: false, description: 'Show prev/next chevrons and counter.' },
+    },
+    example: {
+        type: 'coachmark',
+        props: {
+            autoStart: false,
+            steps: [
+                { target: '.dashboard-card', title: 'Welcome', description: 'Start exploring your dashboard here.', side: 'bottom' },
+                { target: '.search-input', title: 'Search', description: 'Find documents quickly.', side: 'bottom' },
+            ],
+        },
+    },
+    pocket: {
+        state: { tourOpen: false },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                {
+                    type: 'button',
+                    props: { label: 'Start tour' },
+                    on_click: { action: 'open', target: 'tourOpen' },
+                },
+                { type: 'input', class: 'coachmark-demo-search', props: { placeholder: 'Search documents' } },
+                { type: 'text', class: 'coachmark-demo-recent', props: { text: 'Recent: Q3 plan, Launch notes' } },
+                {
+                    type: 'coachmark',
+                    props: {
+                        steps: [
+                            { target: '.coachmark-demo-search', title: 'Search', description: 'Find any document by name.', side: 'bottom' },
+                            { target: '.coachmark-demo-recent', title: 'Recent', description: 'Pick up where you left off.', side: 'bottom' },
+                        ],
+                    },
+                    bind: 'state.tourOpen',
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/code-block.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const codeBlockEntry: WidgetManifestEntry;

package/dist/manifest/entries/code-block.js

@@ -0,0 +1,27 @@
+export const codeBlockEntry = {
+    type: 'code-block',
+    category: 'display',
+    description: 'Fenced code block with line numbers, light syntax highlighting, a file title, a language label and a copy button. Long lines wrap rather than scrolling.',
+    props: {
+        code: { type: 'string', required: false, description: 'Code source.' },
+        text: { type: 'string', required: false, description: 'Alias for code.' },
+        language: { type: 'string', required: false, description: 'Language slug (ts, js, py, sh, etc.). Without one the code is left uncoloured.' },
+        title: { type: 'string', required: false, description: 'File name in the header, with the language label beside it.' },
+        hideLanguage: { type: 'boolean', required: false, description: 'Hide language label.' },
+        hideCopy: { type: 'boolean', required: false, description: 'Hide copy button.' },
+        startLine: { type: 'number', required: false, description: 'Number of the first line, for an excerpt of a longer file. Default 1.' },
+        highlight: { type: '[number, number]', required: false, description: 'Inclusive [first, last] line numbers to tint.' },
+        highlightTone: { type: '"accent" | "added" | "removed"', required: false, description: 'Tint of the highlighted range. Default accent.' },
+        compact: { type: 'boolean', required: false, description: 'Tighter header, padding and leading, for a side panel.' },
+    },
+    example: {
+        type: 'code-block',
+        props: {
+            code: 'const x = 42;\nconsole.log(x);',
+            language: 'ts',
+            title: 'answer.ts',
+            startLine: 12,
+            highlight: [13, 13],
+        },
+    },
+};

package/dist/manifest/entries/code-editor.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const codeEditorEntry: WidgetManifestEntry;

package/dist/manifest/entries/code-editor.js

@@ -0,0 +1,39 @@
+export const codeEditorEntry = {
+    type: 'code-editor',
+    category: 'input',
+    description: 'Code editor with syntax highlighting (CodeMirror). Use for editable code blocks.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path for code content.' },
+        value: { type: 'string', required: false, description: 'Code content.' },
+        language: { type: '"javascript" | "typescript" | "json" | "html" | "text"', required: false, description: 'Language for highlighting.' },
+        height: { type: 'string', required: false, description: 'Editor height. Default "240px".' },
+        readonly: { type: 'boolean', required: false, description: 'Make read-only.' },
+        placeholder: { type: 'string', required: false, description: 'Placeholder text.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on code change.' },
+    },
+    example: { type: 'code-editor', props: { label: 'JSON config', language: 'json', height: '300px', bind: '{state.jsonConfig}' } },
+    pocket: {
+        state: { jsonConfig: '{\n  "host": "localhost",\n  "port": 5432\n}', language: 'json' },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                {
+                    type: 'segmented',
+                    props: {
+                        options: [
+                            { value: 'json', label: 'JSON' },
+                            { value: 'javascript', label: 'JS' },
+                            { value: 'typescript', label: 'TS' },
+                        ],
+                    },
+                    bind: 'state.language',
+                },
+                { type: 'code-editor', props: { label: 'Config', language: '{state.language}', height: '200px' }, bind: 'state.jsonConfig' },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/code.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const codeEntry: WidgetManifestEntry;

package/dist/manifest/entries/code.js

@@ -0,0 +1,9 @@
+export const codeEntry = {
+    type: 'code',
+    category: 'display',
+    description: 'Inline monospace code snippet. Use `code-block` for multi-line fenced blocks.',
+    props: {
+        value: { type: 'string', required: true, description: 'Code text.' },
+    },
+    example: { type: 'code', props: { value: 'npm install' } },
+};

package/dist/manifest/entries/collapsible.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const collapsibleEntry: WidgetManifestEntry;

package/dist/manifest/entries/collapsible.js

@@ -0,0 +1,18 @@
+export const collapsibleEntry = {
+    type: 'collapsible',
+    category: 'layout',
+    description: 'Single collapsible container with toggle trigger. Controlled or uncontrolled open state.',
+    props: {
+        title: { type: 'string', required: false, description: 'Trigger button label.' },
+        value: { type: 'boolean', required: false, description: 'Controlled open state.' },
+        defaultOpen: { type: 'boolean', required: false, description: 'Initial open state when uncontrolled. Default false.' },
+        hideChevron: { type: 'boolean', required: false, description: 'Hide chevron indicator. Default false.' },
+    },
+    example: {
+        type: 'collapsible',
+        props: { title: 'Show advanced options', defaultOpen: false },
+        children: [
+            { type: 'text', props: { text: 'Advanced settings here.' } },
+        ],
+    },
+};

package/dist/manifest/entries/color-picker.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetManifestEntry } from '../index.js';
+export declare const colorPickerEntry: WidgetManifestEntry;