@ripple-ui/svelte 0.0.0-stage → 0.8.2

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

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

package/dist/manifest/entries/tooltip.js

@@ -0,0 +1,13 @@
+export const tooltipEntry = {
+    type: 'tooltip',
+    category: 'overlay',
+    description: 'Text-only tooltip on hover. Use popover for richer content.',
+    props: {
+        trigger: { type: 'string | UISpec', required: false, description: 'Trigger text or spec node.' },
+        content: { type: 'string', required: false, description: 'Tooltip body text.' },
+        side: { type: '"top" | "right" | "bottom" | "left"', required: false, description: 'Position relative to trigger.' },
+        align: { type: '"start" | "center" | "end"', required: false, description: 'Alignment.' },
+        delay: { type: 'number', required: false, description: 'Show delay in ms. Default 200.' },
+    },
+    example: { type: 'tooltip', props: { trigger: 'Hover me', content: 'Helpful context here.', side: 'top' } },
+};

package/dist/manifest/entries/tree-table.d.ts

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

package/dist/manifest/entries/tree-table.js

@@ -0,0 +1,36 @@
+export const treeTableEntry = {
+    type: 'tree-table',
+    category: 'data',
+    description: 'Table with hierarchical rows and expand/collapse. Combines tree navigation with tabular data.',
+    props: {
+        columns: { type: 'Array<{ key: string; label: string; align?: "left" | "center" | "right"; width?: string }>', required: true, description: 'Column definitions.' },
+        rows: { type: 'Array<Record<string, unknown> & { id?: string | number; children?: Row[] }>', required: true, description: 'Nested rows.' },
+        defaultExpanded: { type: '"none" | "first-level" | "all"', required: false, description: 'Initial expansion mode.' },
+        value: { type: 'string | number | null', required: false, description: 'Selected row id (use with bind).' },
+        striped: { type: 'boolean', required: false, description: 'Alternate row backgrounds.' },
+        dense: { type: 'boolean', required: false, description: 'Compact row density.' },
+    },
+    example: {
+        type: 'tree-table',
+        props: {
+            columns: [
+                { key: 'name', label: 'Project' },
+                { key: 'status', label: 'Status' },
+                { key: 'progress', label: 'Progress' },
+            ],
+            rows: [
+                {
+                    id: 1,
+                    name: 'Alpha',
+                    status: 'In Progress',
+                    progress: '60%',
+                    children: [
+                        { id: '1.1', name: 'Design', status: 'Done', progress: '100%' },
+                        { id: '1.2', name: 'Dev', status: 'In Progress', progress: '50%' },
+                    ],
+                },
+                { id: 2, name: 'Beta', status: 'Planning', progress: '10%' },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/tree.js

@@ -0,0 +1,60 @@
+export const treeEntry = {
+    type: 'tree',
+    category: 'data',
+    description: 'Hierarchical tree view with expand/collapse, icons, and optional selection.',
+    props: {
+        nodes: { type: 'Array<{ id: string | number; label: string; icon?: string; description?: string; children?: TreeNode[] }>', required: true, description: 'Nested node tree.' },
+        value: { type: 'string | number | null', required: false, description: 'Selected node id (use with bind).' },
+        defaultExpanded: { type: '"none" | "first-level" | "all"', required: false, description: 'Initial expansion mode.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on node selection.' },
+    },
+    example: {
+        type: 'tree',
+        props: {
+            defaultExpanded: 'first-level',
+            nodes: [
+                {
+                    id: 'docs',
+                    label: 'Docs',
+                    icon: 'folder',
+                    children: [
+                        { id: 'docs-api', label: 'API', icon: 'file-text' },
+                        { id: 'docs-guide', label: 'Guide', icon: 'book-open' },
+                    ],
+                },
+                { id: 'components', label: 'Components', icon: 'box' },
+            ],
+        },
+    },
+    pocket: {
+        state: { selectedNode: null },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                {
+                    type: 'tree',
+                    props: {
+                        defaultExpanded: 'first-level',
+                        nodes: [
+                            {
+                                id: 'docs',
+                                label: 'Docs',
+                                icon: 'folder',
+                                children: [
+                                    { id: 'docs-api', label: 'API', icon: 'file-text' },
+                                    { id: 'docs-guide', label: 'Guide', icon: 'book-open' },
+                                ],
+                            },
+                            { id: 'components', label: 'Components', icon: 'box' },
+                        ],
+                    },
+                    bind: 'state.selectedNode',
+                },
+                { type: 'text', show: '{state.selectedNode != null}', props: { text: 'Open: {state.selectedNode}' } },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/treemap.js

@@ -0,0 +1,23 @@
+export const treemapEntry = {
+    type: 'treemap',
+    category: 'data',
+    description: 'Hierarchical treemap showing composition and relative sizes. Click to zoom into nested groups.',
+    props: {
+        data: { type: 'Array<{ name: string; value?: number; children?: Node[] }>', required: true, description: 'Recursive node tree.' },
+        height: { type: 'number', required: false, description: 'Height in px. Default 320.' },
+        title: { type: 'string', required: false, description: 'Chart title.' },
+        showBreadcrumb: { type: 'boolean', required: false, description: 'Show breadcrumb navigation.' },
+        showLabels: { type: 'boolean', required: false, description: 'Show child labels.' },
+    },
+    example: {
+        type: 'treemap',
+        props: {
+            title: 'Budget Breakdown',
+            data: [
+                { name: 'Product', value: 50, children: [{ name: 'Dev', value: 30 }, { name: 'Design', value: 20 }] },
+                { name: 'Operations', value: 30 },
+                { name: 'Marketing', value: 20 },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/trend.js

@@ -0,0 +1,13 @@
+export const trendEntry = {
+    type: 'trend',
+    category: 'display',
+    description: 'Inline delta badge with arrow and formatted value (percent / number / currency).',
+    props: {
+        value: { type: 'number', required: true, description: 'Delta value (sign drives arrow direction).' },
+        format: { type: '"percent" | "number" | "currency"', required: false, description: 'Value format.' },
+        currency: { type: 'string', required: false, description: 'Currency code.' },
+        arrow: { type: 'boolean', required: false, description: 'Show up/down arrow. Default true.' },
+        precision: { type: 'number', required: false, description: 'Decimal places. Default 1.' },
+    },
+    example: { type: 'trend', props: { value: 12.4, format: 'percent', arrow: true } },
+};

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

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

package/dist/manifest/entries/video.js

@@ -0,0 +1,18 @@
+export const videoEntry = {
+    type: 'video',
+    category: 'media',
+    description: 'Video player over a native video element: play/pause, seek, volume/mute, auto-hiding controls, fullscreen, and picture-in-picture.',
+    props: {
+        src: { type: 'string', required: true, description: 'Video source URL.' },
+        poster: { type: 'string', required: false, description: 'Poster image shown before playback.' },
+        title: { type: 'string', required: false, description: 'Title overlaid on the controls bar.' },
+        autoplay: { type: 'boolean', required: false, description: 'Start playing on mount.' },
+        muted: { type: 'boolean', required: false, description: 'Start muted.' },
+        loop: { type: 'boolean', required: false, description: 'Loop playback.' },
+        controls: { type: 'boolean', required: false, description: 'Show the custom controls bar. Default true.' },
+    },
+    example: {
+        type: 'video',
+        props: { src: 'https://example.com/clip.mp4', poster: 'https://example.com/poster.jpg', title: 'Demo Clip' },
+    },
+};

package/dist/manifest/entries/virtual-list.d.ts

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

package/dist/manifest/entries/virtual-list.js

@@ -0,0 +1,22 @@
+export const virtualListEntry = {
+    type: 'virtual-list',
+    category: 'data',
+    description: 'Virtualized list for large datasets. Renders only visible rows.',
+    props: {
+        items: { type: 'unknown[]', required: true, description: 'Items to render.' },
+        itemHeight: { type: 'number', required: false, description: 'Fixed row height in px.' },
+        height: { type: 'string | number', required: false, description: 'Box height; fits rows to 320px.' },
+        overscan: { type: 'number', required: false, description: 'Extra rows above/below visible window. Default 5.' },
+        emptyText: { type: 'string', required: false, description: 'Text when items is empty.' },
+    },
+    example: {
+        type: 'virtual-list',
+        props: {
+            items: [
+                { label: 'Acorn Labs', description: '3 open deals' },
+                { label: 'Bluefin Freight' },
+                { label: 'Cobalt Dental' },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/weather-forecast.d.ts

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

package/dist/manifest/entries/weather-forecast.js

@@ -0,0 +1,51 @@
+const CONDITIONS = '"sunny" | "partly-cloudy" | "cloudy" | "rain" | "heavy-rain" | "thunder" | "snow" | "fog" | "wind" | "night-clear"';
+export const weatherForecastEntry = {
+    type: 'weather-forecast',
+    category: 'composite',
+    description: 'Weather app card: place, now {temp, condition}, days[{day, condition, high, low, rainChance}], optional hourly. Animated icons, range bars, C/F toggle.',
+    props: {
+        place: { type: 'string', required: true, description: 'e.g. "Lisbon".' },
+        unit: { type: '"C" | "F"', required: false, description: 'The unit the numbers are written in. Default "C". The visitor can toggle.' },
+        now: {
+            type: `{ temp: number; condition: ${CONDITIONS}; feelsLike?: number; humidity?: number; wind?: string }`,
+            required: false,
+            description: 'Current conditions. humidity is a percent; wind is text like "14 km/h NW".',
+        },
+        days: {
+            type: `Array<{ day: string; condition: ${CONDITIONS}; high: number; low: number; rainChance?: number; sunrise?: string; sunset?: string }>`,
+            required: true,
+            description: '1 to 14 days, first is today. day is "Mon" or an ISO date. Other condition words map to the closest icon.',
+        },
+        hourly: {
+            type: `Array<{ time: string; temp: number; condition: ${CONDITIONS}; rainChance?: number }>`,
+            required: false,
+            description: 'Up to 48 hours, time like "14:00" or "2 PM".',
+        },
+        note: { type: 'string', required: false, description: 'Small note under the place. Write "Sample forecast" when the numbers are made up.' },
+    },
+    example: {
+        type: 'weather-forecast',
+        props: {
+            place: 'Lisbon',
+            unit: 'C',
+            note: 'Sample forecast',
+            now: { temp: 21, condition: 'partly-cloudy', feelsLike: 20, humidity: 64, wind: '14 km/h NW' },
+            hourly: [
+                { time: 'Now', temp: 21, condition: 'partly-cloudy' },
+                { time: '15:00', temp: 22, condition: 'sunny' },
+                { time: '16:00', temp: 22, condition: 'sunny' },
+                { time: '17:00', temp: 21, condition: 'partly-cloudy', rainChance: 10 },
+                { time: '18:00', temp: 19, condition: 'cloudy', rainChance: 20 },
+            ],
+            days: [
+                { day: 'Mon', condition: 'partly-cloudy', high: 23, low: 16, rainChance: 10, sunrise: '07:31', sunset: '18:52' },
+                { day: 'Tue', condition: 'sunny', high: 25, low: 17 },
+                { day: 'Wed', condition: 'cloudy', high: 21, low: 16, rainChance: 30 },
+                { day: 'Thu', condition: 'rain', high: 18, low: 14, rainChance: 80 },
+                { day: 'Fri', condition: 'thunder', high: 17, low: 13, rainChance: 90 },
+                { day: 'Sat', condition: 'partly-cloudy', high: 20, low: 14, rainChance: 20 },
+                { day: 'Sun', condition: 'sunny', high: 22, low: 15 },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/week-schedule.d.ts

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

package/dist/manifest/entries/week-schedule.js

@@ -0,0 +1,34 @@
+export const weekScheduleEntry = {
+    type: 'week-schedule',
+    category: 'composite',
+    description: 'Week calendar app: events[{day, start "HH:MM", end, title, place?, color?}] as blocks on a days-by-hours grid; overlaps side by side, details on press. Bind value.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "My week".' },
+        startHour: { type: 'number', required: false, description: 'First hour shown, 0 to 23. Default 7.' },
+        endHour: { type: 'number', required: false, description: 'Last hour shown, 1 to 24. Default 21.' },
+        days: { type: 'string[]', required: false, description: 'Column names. Default ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]. An event day matches by name.' },
+        events: {
+            type: 'Array<{ id?: string; day: string; start: string; end: string; title: string; place?: string; color?: "blue" | "green" | "orange" | "purple" | "pink" | "teal" | "red" | "yellow" | "gray" }>',
+            required: true,
+            description: 'Up to 60 events. start and end are "HH:MM" (24 h). Same color for the same kind of event; leave it out to colour by title.',
+        },
+    },
+    example: {
+        type: 'week-schedule',
+        bind: '{state.selected}',
+        props: {
+            title: 'My week',
+            startHour: 7,
+            endHour: 21,
+            events: [
+                { day: 'Mon', start: '09:00', end: '12:30', title: 'Deep work', color: 'blue' },
+                { day: 'Mon', start: '18:00', end: '19:00', title: 'Gym', place: 'Studio 4', color: 'green' },
+                { day: 'Tue', start: '09:00', end: '17:00', title: 'Office', color: 'gray' },
+                { day: 'Wed', start: '18:00', end: '19:00', title: 'Gym', place: 'Studio 4', color: 'green' },
+                { day: 'Thu', start: '10:00', end: '11:00', title: 'Design review', color: 'purple' },
+                { day: 'Thu', start: '10:30', end: '11:30', title: '1:1 with Sam', color: 'orange' },
+                { day: 'Sun', start: '19:00', end: '21:00', title: 'Family dinner', place: 'Home', color: 'pink' },
+            ],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,90 @@
+export const wizardLayoutEntry = {
+    type: 'wizard-layout',
+    category: 'composite',
+    description: 'Multi-step wizard with numbered step indicator and sticky back/next/cancel bar. Render per-step content via `if` against {state.currentStep}. On the last step the next button becomes `finishLabel`.',
+    props: {
+        title: { type: 'string', required: false, description: 'Wizard title.' },
+        description: { type: 'string', required: false, description: 'Wizard description.' },
+        steps: { type: 'Array<{ id: string; label: string; description?: string; icon?: string; valid?: boolean; optional?: boolean }>', required: true, description: 'Steps. `valid: false` blocks Next. `optional: true` shows an "Optional" pip.' },
+        currentStep: { type: 'string', required: false, description: 'Bound active step id. Use top-level `bind` to two-way bind to a state path (e.g. `bind: "currentStep"`).' },
+        orientation: { type: '"horizontal" | "vertical"', required: false, description: 'Step indicator orientation. Default "horizontal".' },
+        nextLabel: { type: 'string', required: false, description: 'Default "Next".' },
+        backLabel: { type: 'string', required: false, description: 'Default "Back".' },
+        finishLabel: { type: 'string', required: false, description: 'Label on the last step. Default "Submit".' },
+        cancelLabel: { type: 'string', required: false, description: 'Default "Cancel".' },
+        showCancel: { type: 'boolean', required: false, description: 'Default true.' },
+        allowJumpBack: { type: 'boolean', required: false, description: 'Allow clicking visited steps to jump back. Default true.' },
+        nextActions: { type: 'EventAction | EventAction[]', required: false, description: 'Actions to dispatch when Next is clicked (before advancing).' },
+        backActions: { type: 'EventAction | EventAction[]', required: false, description: 'Actions to dispatch when Back is clicked (before retreating).' },
+        finishActions: { type: 'EventAction | EventAction[]', required: false, description: 'Actions to dispatch when Submit is clicked on the last step.' },
+        cancelActions: { type: 'EventAction | EventAction[]', required: false, description: 'Actions to dispatch when Cancel is clicked.' },
+    },
+    example: {
+        type: 'wizard-layout',
+        bind: 'currentStep',
+        props: {
+            title: 'New project',
+            steps: [
+                { id: 'basics', label: 'Basics', description: 'Name & repo' },
+                { id: 'team', label: 'Team', description: 'Owners & access' },
+                { id: 'integrations', label: 'Integrations', optional: true },
+                { id: 'review', label: 'Review' },
+            ],
+            finishActions: [{ action: 'toast', message: 'Project created', variant: 'success' }],
+        },
+        children: [
+            { type: 'if', condition: 'state.currentStep === "basics"', children: [
+                    { type: 'input', bind: 'projectName', props: { label: 'Project name' } },
+                ] },
+            { type: 'if', condition: 'state.currentStep === "team"', children: [
+                    { type: 'people-picker', bind: 'team', props: { label: 'Team members' } },
+                ] },
+            { type: 'if', condition: 'state.currentStep === "review"', children: [
+                    { type: 'text', props: { text: 'Review your choices.' } },
+                ] },
+        ],
+    },
+    pocket: {
+        state: { currentStep: 'basics', projectName: '', team: [] },
+        ui: {
+            type: 'wizard-layout',
+            bind: 'state.currentStep',
+            props: {
+                title: 'New project',
+                description: 'Set up a new project in three steps.',
+                steps: [
+                    { id: 'basics', label: 'Basics', description: 'Name & repo', valid: '{state.projectName.length > 0}' },
+                    { id: 'team', label: 'Team', description: 'Owners & access' },
+                    { id: 'review', label: 'Review' },
+                ],
+                finishActions: [
+                    { action: 'toast', message: 'Project "{state.projectName}" created', variant: 'success' },
+                ],
+            },
+            children: [
+                {
+                    type: 'if',
+                    condition: 'state.currentStep == "basics"',
+                    children: [
+                        { type: 'input', props: { label: 'Project name', placeholder: 'e.g. atlas-migration' }, bind: 'state.projectName' },
+                    ],
+                },
+                {
+                    type: 'if',
+                    condition: 'state.currentStep == "team"',
+                    children: [
+                        { type: 'text', props: { text: 'Add team members or skip to continue.' } },
+                    ],
+                },
+                {
+                    type: 'if',
+                    condition: 'state.currentStep == "review"',
+                    children: [
+                        { type: 'text', props: { text: 'Project: {state.projectName}' } },
+                        { type: 'text', props: { text: 'Click Submit to create.' } },
+                    ],
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/word-guess.d.ts

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

package/dist/manifest/entries/word-guess.js

@@ -0,0 +1,30 @@
+export const wordGuessEntry = {
+    type: 'word-guess',
+    category: 'composite',
+    description: 'Word guessing game: answer (4 to 7 letters A to Z), hint, max_guesses. Letter feedback, on-screen keyboard, share grid. Bind value {guesses, status, hint_used}; on_complete {won, guesses}.',
+    props: {
+        title: { type: 'string', required: false, description: 'Puzzle name, e.g. "Kitchen words". Defaults to "Word guess".' },
+        answer: { type: 'string', required: true, description: 'The word to guess: 4 to 7 letters, A to Z only, any case. Anything else shows a friendly error instead of the board.' },
+        hint: { type: 'string', required: false, description: 'A nudge the player can reveal; using it is recorded in value.hint_used and the share line.' },
+        max_guesses: { type: 'number', required: false, description: 'Rows on the board. Default 6, clamped 1 to 10.' },
+        allow_any_word: { type: 'boolean', required: false, description: 'Default true. No dictionary ships, so any letters count as a guess either way.' },
+        value: {
+            type: '{ guesses: string[]; status: "playing" | "won" | "lost"; hint_used: boolean }',
+            required: false,
+            description: 'The game so far, written by the widget on every guess and hint. Bind with `bind: "{state.game}"` to read it elsewhere; the widget never reads it back.',
+        },
+        sound: { type: 'boolean', required: false, description: 'A short chime when the word is solved. Default true; false mutes this widget.' },
+    },
+    events: {
+        on_complete: { type: 'EventAction', required: false, description: 'Fired once when the game ends, with { won, guesses }.' },
+    },
+    example: {
+        type: 'word-guess',
+        bind: '{state.game}',
+        props: {
+            title: 'Kitchen words',
+            answer: 'whisk',
+            hint: 'You beat eggs with it',
+        },
+    },
+};

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

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

package/dist/manifest/entries/workflow.js

@@ -0,0 +1,30 @@
+export const workflowEntry = {
+    type: 'workflow',
+    category: 'data',
+    description: 'Interactive node-based workflow diagram with auto-layout, pan/zoom, and minimap.',
+    props: {
+        nodes: { type: 'Array<{ id: string; type?: string; label: string; icon?: string; status?: string; position?: { x: number; y: number } }>', required: true, description: 'Workflow nodes.' },
+        edges: { type: 'Array<{ from: string; to: string; label?: string; animated?: boolean }>', required: true, description: 'Edges connecting nodes.' },
+        title: { type: 'string', required: false, description: 'Title shown above canvas.' },
+        interactive: { type: 'boolean', required: false, description: 'Enable pan/zoom/drag. Default true.' },
+        minimap: { type: 'boolean', required: false, description: 'Show minimap.' },
+        fitView: { type: 'boolean', required: false, description: 'Auto-fit nodes on render. Default true.' },
+    },
+    example: {
+        type: 'workflow',
+        props: {
+            title: 'Payment Flow',
+            interactive: true,
+            minimap: true,
+            nodes: [
+                { id: '1', type: 'trigger', label: 'Start', icon: 'play', status: 'idle' },
+                { id: '2', type: 'action', label: 'Process Payment', icon: 'credit-card', status: 'idle' },
+                { id: '3', type: 'condition', label: 'Approved?', icon: 'check', status: 'idle' },
+            ],
+            edges: [
+                { from: '1', to: '2' },
+                { from: '2', to: '3' },
+            ],
+        },
+    },
+};

package/dist/manifest/index.d.ts

@@ -0,0 +1,110 @@
+import { specEnvelope, type ActionSpec, type SpecEnvelope, type Waiver, type CraftRule, type Lens, type Intent } from '@ripple-ui/core/manifest';
+export { specEnvelope, type ActionSpec, type SpecEnvelope };
+import { type MotionDoc } from './motion-doc.js';
+export interface WidgetPropSpec {
+    type: string;
+    required: boolean;
+    description: string;
+    /** The prop carries the user's data (values, rows, amounts, dates); set from core's DATA_PROPS. */
+    data?: boolean;
+}
+/**
+ * A runnable mini-spec demonstrating realistic interaction wiring for a
+ * widget. Sibling to `example` — never a replacement for it. `example`
+ * is a liftable node; `pocket` is a complete pocket.
+ */
+export interface PocketSpec {
+    /** Optional state seed. Required if `ui` uses `bind` or reads `{state.*}`. */
+    state?: Record<string, unknown>;
+    /** The runnable widget tree. Top-level node should match (or contain) the entry's widget type. */
+    ui: WidgetManifestEntry['example'];
+}
+/**
+ * A named pocket variant for widgets with distinct interaction modes
+ * (e.g. form submit-with-api vs submit-with-emit). Use `pocket` for the
+ * single-variant case; reach for `pockets` only when one example genuinely
+ * cannot represent the widget's range.
+ */
+export interface NamedPocketSpec extends PocketSpec {
+    name: string;
+    description?: string;
+}
+export interface WidgetManifestEntry {
+    /** Canonical widget type as registered in `widgets/index.ts`. */
+    type: string;
+    /** Top-level grouping — display | layout | input | data | control | composite | overlay | research | vertical | marketing | media | interactive. */
+    category: string;
+    /**
+     * Tier-0 static-safety flag. `true` means the widget renders correctly when
+     * PRERENDERED with JavaScript OFF (csr=false): its resting/final state is
+     * fully baked into markup, it does not depend on onMount or any client-only
+     * primitive, and any animation degrades to a static frame. The Paw Sites
+     * landing renderer (ripple mode) prerenders pages, so only `staticSafe`
+     * widgets are safe to place there. Widgets that need client JS to function
+     * (e.g. an email-capture form, a cursor-tracking effect) are `false`.
+     * Absent = unspecified (treat as not-yet-audited, NOT a guarantee of safety).
+     */
+    staticSafe?: boolean;
+    /** One-line summary, < 200 chars. Long docs stay in the wiki. */
+    description: string;
+    /** Prop name → spec. Only LLM-relevant props; internal/passthrough props omitted. */
+    props: Record<string, WidgetPropSpec>;
+    /**
+     * Node-level event handlers (`on_click`, `on_change`, …). These live as
+     * siblings to `props` on the UINode, not inside `props`. See ui-spec.ts.
+     */
+    events?: Record<string, WidgetPropSpec>;
+    /**
+     * Other node-level fields specific to control-flow widgets — `condition`
+     * for `if`, `items`/`item_as`/`index_as` for `each`. Sibling to `props`.
+     */
+    nodeFields?: Record<string, WidgetPropSpec>;
+    /**
+     * A runnable UISpec node the LLM can lift as a starting point. May include
+     * sibling fields like `on_click`, `condition`, `items` alongside `props`.
+     */
+    example: {
+        type: string;
+        props?: Record<string, unknown>;
+        children?: unknown;
+        [extraNodeField: string]: unknown;
+    };
+    /**
+     * A complete, runnable mini-spec showing realistic interaction wiring.
+     * Present on Tier A (interactive) and Tier B (composite) widgets only.
+     * At most one of `pocket` / `pockets` may be set.
+     */
+    pocket?: PocketSpec;
+    /**
+     * Multiple named pockets — only when one example genuinely cannot show
+     * the widget's interaction range. Cap at 3 entries.
+     */
+    pockets?: NamedPocketSpec[];
+}
+export interface WidgetManifest {
+    schema: 'ripple.manifest/v1';
+    version: string;
+    generatedAt: string;
+    /**
+     * The spec envelope contract — describes how widgets compose into a
+     * complete spec. Read this BEFORE the widget catalog: the catalog
+     * documents nodes, the envelope documents the tree they live in.
+     */
+    spec: SpecEnvelope;
+    /** Grammar reference for every EventAction variant the dispatcher accepts. */
+    actions: Record<string, ActionSpec>;
+    /** LLM-facing documentation for the node-level `motion` field (RFC 12). */
+    motion: MotionDoc;
+    widgets: WidgetManifestEntry[];
+    /** Reviewed fault exceptions by widget and check id (core's craft data). */
+    waivers: readonly Waiver[];
+    /** What a visitor asks for, mapped to the widget that answers it (core's craft data). */
+    intents: readonly Intent[];
+    /** Craft rules (cited by id in prompts and critic issues) and the critic's lenses. */
+    craft: {
+        rules: readonly CraftRule[];
+        lenses: readonly Lens[];
+    };
+}
+export declare const manifestEntries: WidgetManifestEntry[];
+export declare function buildManifest(): WidgetManifest;