@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/manifest/entries/product-grid.js

@@ -0,0 +1,33 @@
+export const productGridEntry = {
+    type: 'product-grid',
+    category: 'composite',
+    description: 'Product grid for shopping and deals: cards with price, was-price and discount badge, rating, spec chips, sort, category chips and a pick-2-or-3 Compare tray.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "Headphone deals this week".' },
+        currency: { type: 'string', required: false, description: 'ISO code. Default "USD".' },
+        products: {
+            type: 'Array<{ id?: string; name: string; brand?: string; category?: string; price: number; was?: number; rating?: number; reviews?: number; badge?: string; color?: "blue" | "violet" | "teal" | "green" | "amber" | "rose" | "orange" | "slate"; image?: string; specs?: string[] }>',
+            required: true,
+            description: 'Up to 24. `was` above `price` shows a strike-through and a computed discount. `badge` like "Best seller". Up to 3 short `specs`. Covers are generated; skip `image`.',
+        },
+        filters: { type: 'boolean', required: false, description: 'Category chips built from the data. Default true.' },
+    },
+    events: {
+        on_choose: {
+            type: 'EventAction | EventAction[]',
+            required: false,
+            description: 'Fires with { id, name, text } on Choose and { ids, names, text: "Compare A and B" } from the Compare tray. May emit ask.',
+        },
+    },
+    example: {
+        type: 'product-grid',
+        props: {
+            title: 'Headphone deals',
+            currency: 'USD',
+            products: [
+                { id: 'h1', name: 'Quietline 700', brand: 'Sonora', category: 'Over-ear', price: 229, was: 299, rating: 4.6, reviews: 2140, badge: 'Best seller', color: 'slate', specs: ['30 h battery', 'ANC'] },
+                { id: 'h2', name: 'Pulse Buds', brand: 'Arcwave', category: 'Earbuds', price: 79, was: 99, rating: 4.3, reviews: 860, color: 'violet', specs: ['IPX4', '8 h'] },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/progress-ring.d.ts

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

package/dist/manifest/entries/progress-ring.js

@@ -0,0 +1,16 @@
+export const progressRingEntry = {
+    type: 'progress-ring',
+    category: 'display',
+    description: 'Circular progress indicator with centered label.',
+    props: {
+        value: { type: 'number', required: false, description: 'Current progress (0 to max).' },
+        max: { type: 'number', required: false, description: 'Maximum value. Default 100.' },
+        size: { type: 'number', required: false, description: 'Ring diameter in px. Default 64.' },
+        thickness: { type: 'number', required: false, description: 'Stroke width in px. Default 6.' },
+        color: { type: 'string', required: false, description: 'Foreground color.' },
+        trackColor: { type: 'string', required: false, description: 'Background track color.' },
+        label: { type: 'string', required: false, description: 'Center label. Default "{percent}%".' },
+        hideLabel: { type: 'boolean', required: false, description: 'Hide center label.' },
+    },
+    example: { type: 'progress-ring', props: { value: 72, max: 100, size: 80 } },
+};

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

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

package/dist/manifest/entries/progress.js

@@ -0,0 +1,13 @@
+export const progressEntry = {
+    type: 'progress',
+    category: 'display',
+    description: 'Horizontal progress bar with color and height variants.',
+    props: {
+        value: { type: 'number', required: false, description: 'Current progress (0 to max).' },
+        max: { type: 'number', required: false, description: 'Maximum value. Default 100.' },
+        color: { type: 'string', required: false, description: 'Bar color (CSS color).' },
+        variant: { type: '"default" | "thin" | "thick"', required: false, description: 'Height variant.' },
+        label: { type: 'string', required: false, description: 'Label row above the bar.' },
+    },
+    example: { type: 'progress', props: { value: 65, label: 'Uploading' } },
+};

package/dist/manifest/entries/project-dashboard.d.ts

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

package/dist/manifest/entries/project-dashboard.js

@@ -0,0 +1,90 @@
+export const projectDashboardEntry = {
+    type: 'project-dashboard',
+    category: 'composite',
+    description: 'Project / agile / engineering dashboard: project header (status + progress + lead) + burndown chart + status-breakdown bars + team load list + milestones + recent updates.',
+    props: {
+        title: { type: 'string', required: false, description: 'Project name.' },
+        description: { type: 'string', required: false, description: 'Project description.' },
+        status: { type: '"on-track" | "at-risk" | "off-track" | "completed" | "paused"', required: false, description: 'Overall project status.' },
+        progress: { type: 'number', required: false, description: 'Overall progress percentage, 0 to 100.' },
+        dueDate: { type: 'string', required: false, description: 'Due date.' },
+        lead: { type: '{ name: string; avatar?: string; role?: string }', required: false, description: 'Project lead.' },
+        meta: { type: 'Array<{ label: string; value: string; icon?: string }>', required: false, description: 'Project metadata (start date, sprint, repo, etc.).' },
+        burndown: { type: '{ title?: string; data: Array<{ label: string; value?: number; series?: Record<string, number> }> }', required: false, description: 'Burndown chart data; supports `series` for ideal vs actual lines.' },
+        breakdown: { type: '{ todo?: number; inProgress?: number; done?: number; blocked?: number }', required: false, description: 'Task counts; renders proportional bars.' },
+        team: { type: 'Array<{ name: string; avatar?: string; role?: string; load?: number; status?: "available" | "busy" | "overloaded" | "off" }>', required: false, description: 'Team members. `load` is 0 to 100 (over 100 highlights overload).' },
+        updates: { type: 'Array<{ time: string; actor?: string; label: string; icon?: string; type?: string }>', required: false, description: 'Recent updates / activity feed.' },
+        milestones: { type: 'Array<{ label: string; due?: string; done?: boolean; overdue?: boolean }>', required: false, description: 'Milestones with completion / overdue indicators.' },
+    },
+    example: {
+        type: 'project-dashboard',
+        props: {
+            title: 'Phoenix migration',
+            description: 'Move legacy reporting service to the new analytics platform with zero customer-facing downtime.',
+            status: 'at-risk',
+            progress: 64,
+            dueDate: 'Jun 30, 2026',
+            lead: { name: 'Jamie Park', role: 'Tech lead' },
+            meta: [
+                { label: 'Sprint', value: '4 of 6', icon: 'flag' },
+                { label: 'Repo', value: 'acme/phoenix', icon: 'github' },
+                { label: 'Started', value: 'Mar 4, 2026', icon: 'calendar' },
+                { label: 'Budget', value: '$248k / $320k', icon: 'dollar-sign' },
+                { label: 'Stack', value: 'Go · ClickHouse · Kafka', icon: 'layers' },
+                { label: 'Slack', value: '#proj-phoenix', icon: 'message-square' }
+            ],
+            burndown: {
+                title: 'Sprint burndown — Sprint 4',
+                data: [
+                    { label: 'Day 1', series: { ideal: 100, actual: 100 } },
+                    { label: 'Day 2', series: { ideal: 93, actual: 96 } },
+                    { label: 'Day 3', series: { ideal: 85, actual: 92 } },
+                    { label: 'Day 4', series: { ideal: 78, actual: 86 } },
+                    { label: 'Day 5', series: { ideal: 70, actual: 78 } },
+                    { label: 'Day 6', series: { ideal: 62, actual: 70 } },
+                    { label: 'Day 7', series: { ideal: 55, actual: 60 } },
+                    { label: 'Day 8', series: { ideal: 48, actual: 55 } },
+                    { label: 'Day 9', series: { ideal: 40, actual: 48 } },
+                    { label: 'Day 10', series: { ideal: 32, actual: 40 } },
+                    { label: 'Day 11', series: { ideal: 25, actual: 32 } },
+                    { label: 'Day 12', series: { ideal: 18, actual: 26 } },
+                    { label: 'Day 13', series: { ideal: 9, actual: 20 } },
+                    { label: 'Day 14', series: { ideal: 0, actual: 14 } }
+                ]
+            },
+            breakdown: { done: 38, inProgress: 12, todo: 18, blocked: 4 },
+            team: [
+                { name: 'Jamie Park', role: 'Tech lead', load: 85, status: 'busy' },
+                { name: 'Priya Mehta', role: 'Backend', load: 110, status: 'overloaded' },
+                { name: 'Marcus Lee', role: 'Frontend', load: 70, status: 'busy' },
+                { name: 'Emma Schmidt', role: 'QA', load: 55, status: 'available' },
+                { name: 'Diego Ramos', role: 'Backend', load: 92, status: 'busy' },
+                { name: 'Anya Volkov', role: 'SRE', load: 78, status: 'busy' },
+                { name: 'Ken Watanabe', role: 'Data eng', load: 102, status: 'overloaded' },
+                { name: 'Sofia Romano', role: 'Designer', load: 35, status: 'available' },
+                { name: 'Theo Carter', role: 'Backend', load: 0, status: 'off' }
+            ],
+            milestones: [
+                { label: 'Spec sign-off', done: true, due: 'Mar 10' },
+                { label: 'Schema design', done: true, due: 'Mar 18' },
+                { label: 'Data backfill', done: true, due: 'Apr 15' },
+                { label: 'Read-path rollout', done: true, due: 'Apr 28' },
+                { label: 'Dual-write rollout', due: 'May 10', overdue: true },
+                { label: 'Customer beta', due: 'Jun 1' },
+                { label: 'Cutover', due: 'Jun 25' },
+                { label: 'Legacy decommission', due: 'Jul 15' }
+            ],
+            updates: [
+                { time: '8m ago', label: 'PR merged: dual-write metrics + alerts', actor: 'Diego Ramos', icon: 'git-merge', type: 'pr' },
+                { time: '14m ago', label: 'Backfill validated for region us-east', actor: 'Priya Mehta', icon: 'check-circle-2', type: 'milestone' },
+                { time: '1h ago', label: 'New blocker: EU schema review pending', actor: 'Jamie Park', icon: 'alert-octagon', type: 'blocker' },
+                { time: '2h ago', label: 'Dual-write blocked on EU schema review', actor: 'Jamie Park', icon: 'alert-circle', type: 'risk' },
+                { time: '4h ago', label: 'Customer beta plan posted', actor: 'Sofia Romano', icon: 'file-text', type: 'doc' },
+                { time: '6h ago', label: 'Capacity test passed at 3× peak', actor: 'Anya Volkov', icon: 'zap', type: 'test' },
+                { time: 'Yesterday', label: 'Sprint planning notes posted', actor: 'Emma Schmidt', icon: 'file-text', type: 'doc' },
+                { time: 'Yesterday', label: 'Ken added to backfill workstream', actor: 'Jamie Park', icon: 'user-plus', type: 'team' },
+                { time: '2d ago', label: 'Hotfix: corrected null-handling in v0.4', actor: 'Priya Mehta', icon: 'wrench', type: 'fix' }
+            ]
+        },
+    },
+};

package/dist/manifest/entries/pros-cons.d.ts

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

package/dist/manifest/entries/pros-cons.js

@@ -0,0 +1,18 @@
+export const prosConsEntry = {
+    type: 'pros-cons',
+    category: 'display',
+    description: 'Two-column pros vs. cons comparison with checkmark/X icons.',
+    props: {
+        pros: { type: 'string[]', required: false, description: 'Pros list.' },
+        cons: { type: 'string[]', required: false, description: 'Cons list.' },
+        prosLabel: { type: 'string', required: false, description: 'Pros column header.' },
+        consLabel: { type: 'string', required: false, description: 'Cons column header.' },
+    },
+    example: {
+        type: 'pros-cons',
+        props: {
+            pros: ['Easy to learn', 'Great performance', 'Strong ecosystem'],
+            cons: ['Steep advanced curve', 'Limited mobile support'],
+        },
+    },
+};

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

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

package/dist/manifest/entries/qr.js

@@ -0,0 +1,15 @@
+export const qrEntry = {
+    type: 'qr',
+    category: 'display',
+    description: 'QR code for any text payload (URL, vCard, etc.) with error correction and color control.',
+    props: {
+        value: { type: 'string', required: true, description: 'Payload to encode.' },
+        size: { type: 'number', required: false, description: 'Code size in px. Default 160.' },
+        color: { type: 'string', required: false, description: 'Foreground color. Default black.' },
+        background: { type: 'string', required: false, description: 'Background color. Default white.' },
+        ecl: { type: '"L" | "M" | "Q" | "H"', required: false, description: 'Error correction level.' },
+        padding: { type: 'number', required: false, description: 'Quiet zone in modules. Default 2.' },
+        caption: { type: 'string', required: false, description: 'Caption below code.' },
+    },
+    example: { type: 'qr', props: { value: 'https://example.com', size: 160, caption: 'Scan to visit' } },
+};

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

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

package/dist/manifest/entries/quiz.js

@@ -0,0 +1,38 @@
+export const quizEntry = {
+    type: 'quiz',
+    category: 'composite',
+    description: 'Trivia game: questions[{prompt, choices, answer (index), why}]. Instant right or wrong, a streak, optional countdown, then a score screen with misses and Retry. Bind value; on_complete.',
+    props: {
+        title: { type: 'string', required: false, description: 'Quiz name, e.g. "Space trivia".' },
+        topic: { type: 'string', required: false, description: 'A small label above the title, e.g. "Astronomy".' },
+        questions: {
+            type: 'Array<{ id?: string; prompt: string; choices: string[]; answer: number; why?: string; image?: string }>',
+            required: true,
+            description: '3 to 12 questions. `choices` holds 2 to 5 short answers; `answer` is the 0-based index of the right one; `why` is one sentence shown after the pick; `image` an optional https photo URL. A question whose answer is outside its choices is skipped. The answers sit in the spec, so this suits casual play, not exams.',
+        },
+        seconds_per_question: { type: 'number', required: false, description: 'Seconds per question (3 to 600). Off by default; when set the quiz waits for Start, and running out counts as wrong.' },
+        shuffle_choices: { type: 'boolean', required: false, description: 'Shuffle each question\'s choices (a new order on every Retry). Default false.' },
+        value: {
+            type: '{ index: number; answers: (number | null)[]; score: number; done: boolean }',
+            required: false,
+            description: 'Progress, written by the widget: the current question, the picked choice per answered question (null = ran out of time), the score and whether every question is answered. Bind with `bind: "{state.quiz}"`.',
+        },
+        sound: { type: 'boolean', required: false, description: 'Quiet cues for a right or wrong answer and a finished quiz. Default true; false mutes this widget.' },
+    },
+    events: {
+        on_complete: { type: 'EventAction', required: false, description: 'Fired once per run when the last question is answered, with { score, total }.' },
+    },
+    example: {
+        type: 'quiz',
+        bind: '{state.quiz}',
+        props: {
+            title: 'Space trivia',
+            topic: 'Astronomy',
+            questions: [
+                { prompt: 'Which planet has the shortest day?', choices: ['Earth', 'Jupiter', 'Mars', 'Venus'], answer: 1, why: 'Jupiter spins once in under 10 hours.' },
+                { prompt: 'What is the closest star to the Sun?', choices: ['Sirius', 'Betelgeuse', 'Proxima Centauri'], answer: 2, why: 'Proxima Centauri is about 4.2 light years away.' },
+                { prompt: 'How long does sunlight take to reach Earth?', choices: ['8 seconds', 'About 8 minutes', 'About 8 hours'], answer: 1, why: 'Light covers the 150 million km in roughly 8 minutes 20 seconds.' },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/quote.js

@@ -0,0 +1,14 @@
+export const quoteEntry = {
+    type: 'quote',
+    category: 'display',
+    description: 'Blockquote with optional attribution, avatar, and quote glyph.',
+    props: {
+        text: { type: 'string', required: true, description: 'Quote text.' },
+        quote: { type: 'string', required: false, description: 'Alias for text.' },
+        author: { type: 'string', required: false, description: 'Author name.' },
+        role: { type: 'string', required: false, description: 'Author role/title.' },
+        avatar: { type: 'string', required: false, description: 'Avatar image URL.' },
+        hideIcon: { type: 'boolean', required: false, description: 'Hide quote glyph.' },
+    },
+    example: { type: 'quote', props: { text: 'Innovation distinguishes between a leader and a follower.', author: 'Steve Jobs', role: 'Co-founder, Apple' } },
+};

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

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

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

@@ -0,0 +1,31 @@
+export const radioGroupEntry = {
+    type: 'radio-group',
+    category: 'input',
+    description: 'Radio button group for single selection from a list.',
+    props: {
+        label: { type: 'string', required: false, description: 'Group label.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path, e.g. "{state.choice}".' },
+        value: { type: 'string', required: false, description: 'Selected value.' },
+        options: { type: 'string[] | Array<{ value: string; label: string }>', required: true, description: 'Radio options.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable all radios.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired when selection changes.' },
+    },
+    example: { type: 'radio-group', props: { label: 'Subscription', options: ['Monthly', 'Annual', 'Lifetime'], bind: '{state.subscription}' } },
+    pocket: {
+        state: { delivery: 'standard' },
+        ui: {
+            type: 'radio-group',
+            props: {
+                label: 'Delivery',
+                options: [
+                    { value: 'standard', label: 'Standard (3-5 days)' },
+                    { value: 'express', label: 'Express (1-2 days)' },
+                    { value: 'pickup', label: 'Pickup (today)' },
+                ],
+            },
+            bind: 'state.delivery',
+        },
+    },
+};

package/dist/manifest/entries/range-bar.d.ts

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

package/dist/manifest/entries/range-bar.js

@@ -0,0 +1,16 @@
+export const rangeBarEntry = {
+    type: 'range-bar',
+    category: 'research',
+    description: 'Range indicator with min/max bounds, current marker, and optional formatted labels.',
+    props: {
+        min: { type: 'number', required: true, description: 'Minimum value (left bound).' },
+        max: { type: 'number', required: true, description: 'Maximum value (right bound).' },
+        current: { type: 'number', required: true, description: 'Current value (marker position).' },
+        label: { type: 'string', required: false, description: 'Range label.' },
+        minLabel: { type: 'string', required: false, description: 'Formatted min label.' },
+        maxLabel: { type: 'string', required: false, description: 'Formatted max label.' },
+        currentLabel: { type: 'string', required: false, description: 'Formatted current label.' },
+        color: { type: 'string', required: false, description: 'Bar color (CSS).' },
+    },
+    example: { type: 'range-bar', props: { label: 'Price Target Range', min: 150, max: 220, current: 189.45, minLabel: '$150', maxLabel: '$220', currentLabel: '$189.45', color: '#3b82f6' } },
+};

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

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

package/dist/manifest/entries/rating.js

@@ -0,0 +1,37 @@
+export const ratingEntry = {
+    type: 'rating',
+    category: 'input',
+    description: 'Star rating widget.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path, e.g. "{state.rating}".' },
+        value: { type: 'number', required: false, description: 'Current rating.' },
+        max: { type: 'number', required: false, description: 'Maximum stars. Default 5.' },
+        size: { type: '"sm" | "md" | "lg"', required: false, description: 'Star size.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable rating.' },
+        showValue: { type: 'boolean', required: false, description: 'Show numeric value.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on rating change.' },
+    },
+    example: { type: 'rating', props: { label: 'Rate this product', max: 5, bind: '{state.productRating}', showValue: true } },
+    pocket: {
+        state: { productRating: 0, submitted: false },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                { type: 'rating', props: { label: 'Rate this product', max: 5, showValue: true }, bind: 'state.productRating' },
+                { type: 'text', props: { text: 'You rated: {state.productRating}/5' } },
+                {
+                    type: 'button',
+                    props: { label: 'Submit rating', disabled: '{state.productRating == 0}' },
+                    on_click: [
+                        { action: 'set', target: 'submitted', value: true },
+                        { action: 'toast', message: 'Thanks for the {state.productRating}-star rating!', variant: 'success' },
+                    ],
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/reasoning-trace.d.ts

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

package/dist/manifest/entries/reasoning-trace.js

@@ -0,0 +1,20 @@
+export const reasoningTraceEntry = {
+    type: 'reasoning-trace',
+    category: 'ai',
+    description: "Agent reasoning trace. Collapsed shows \"Reasoned for N steps\"; expanded shows an ordered list of {title, detail?, status} steps. Active step shimmers. Collapsed by default.",
+    props: {
+        steps: { type: 'array', required: false, description: 'Ordered steps: array of { title, detail?, status: "thinking"|"done"|"error" }.' },
+        streaming: { type: 'boolean', required: false, description: 'Agent is still reasoning. Collapsed, the summary names the last thinking step, else "Reasoning…".' },
+        collapsed: { type: 'boolean', required: false, description: 'Initial collapsed state. Default true.' },
+    },
+    example: {
+        type: 'reasoning-trace',
+        props: {
+            steps: [
+                { title: 'Parse the request', status: 'done' },
+                { title: 'Search the widget catalog', detail: 'Looking for a streaming-text primitive.', status: 'thinking' },
+            ],
+            streaming: true,
+        },
+    },
+};

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

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

package/dist/manifest/entries/recipe.js

@@ -0,0 +1,55 @@
+const AISLES = '"produce" | "protein" | "dairy" | "grains" | "pantry" | "frozen" | "other"';
+export const recipeEntry = {
+    type: 'recipe',
+    category: 'composite',
+    description: 'One dish: name, serves, minutes, kcal + protein_g per serving, ingredients[{name, qty (number), unit, note}], steps[{text, minutes, tip}]. Bind servings to scale every qty.',
+    props: {
+        name: { type: 'string', required: true, description: 'Dish name, e.g. "Lemon ricotta pasta".' },
+        subtitle: { type: 'string', required: false, description: 'One line under the name (cuisine, the hook).' },
+        verdict: { type: '{ text: string; status?: "good" | "warn" | "bad" | "info" | "neutral" }', required: false, description: 'The answer up front, at most 140 chars.' },
+        kind: { type: '"breakfast" | "lunch" | "dinner" | "snack"', required: false, description: 'Meal kind; picks the icon when there is no photo.' },
+        image: { type: 'string', required: false, description: 'Photo URL from the host only; never invent one. Without it a kind icon shows.' },
+        minutes: { type: 'number', required: false, description: 'Total time. Summed from step minutes when omitted.' },
+        serves: { type: 'number', required: true, description: 'Servings the quantities are written for. Scaling multiplies qty by servings / serves.' },
+        kcal: { type: 'number', required: false, description: 'Calories PER SERVING.' },
+        protein_g: { type: 'number', required: false, description: 'Protein grams PER SERVING.' },
+        tags: { type: 'string[]', required: false, description: 'Up to 4 short tags ("vegetarian", "one pot").' },
+        difficulty: { type: '"easy" | "medium" | "hard"', required: false, description: 'Shown as a chip.' },
+        ingredients: {
+            type: `Array<{ id?: string; name: string; qty?: number; unit?: string; note?: string; aisle?: ${AISLES} }>`,
+            required: true,
+            description: 'qty is a NUMBER (1.5, not "1 1/2"); the widget prints 1½. unit is separate ("cup", "g", "tbsp"); omit it for counted items ("2" eggs). note: "finely grated".',
+        },
+        steps: { type: 'Array<{ id?: string; text: string; minutes?: number; tip?: string }>', required: false, description: 'In order. minutes shows a timer chip; tip shows under the step.' },
+        goal: { type: '{ kcal?: number; protein_g?: number }', required: false, description: 'Daily goal per person; the protein per serving is shown as a share of it.' },
+        servings: { type: 'number', required: false, description: 'Servings to cook; defaults to serves. Two-way bind with `bind: "{state.servings}"`.' },
+    },
+    example: {
+        type: 'recipe',
+        bind: '{state.servings}',
+        props: {
+            name: 'Lemon ricotta pasta',
+            subtitle: 'Bright, creamy, on the table in 25 minutes',
+            kind: 'dinner',
+            serves: 4,
+            minutes: 25,
+            kcal: 610,
+            protein_g: 27,
+            difficulty: 'easy',
+            tags: ['vegetarian', 'weeknight'],
+            ingredients: [
+                { name: 'rigatoni', qty: 400, unit: 'g', aisle: 'grains' },
+                { name: 'whole-milk ricotta', qty: 1.5, unit: 'cup', aisle: 'dairy' },
+                { name: 'lemon', qty: 1, note: 'zest and juice', aisle: 'produce' },
+                { name: 'parmesan', qty: 0.75, unit: 'cup', note: 'finely grated', aisle: 'dairy' },
+                { name: 'baby spinach', qty: 3, unit: 'cup', aisle: 'produce' },
+                { name: 'black pepper', unit: 'to taste', aisle: 'pantry' },
+            ],
+            steps: [
+                { text: 'Boil the rigatoni in well-salted water until just al dente.', minutes: 11, tip: 'Save a mug of the pasta water before draining.' },
+                { text: 'Whisk the ricotta, lemon zest and juice, parmesan and plenty of pepper in a large bowl.', minutes: 3 },
+                { text: 'Toss the hot pasta and spinach into the bowl, loosening with pasta water until glossy.', minutes: 2 },
+            ],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,37 @@
+export const reportLayoutEntry = {
+    type: 'report-layout',
+    category: 'composite',
+    description: 'Printable structured-document layout: branded header (logo + brand + title), meta block, body via children, optional footer + watermark. Print CSS hides actions and inverts to a clean B&W document.',
+    props: {
+        title: { type: 'string', required: true, description: 'Report title.' },
+        subtitle: { type: 'string', required: false, description: 'Optional subtitle under the title.' },
+        logo: { type: 'string', required: false, description: 'Logo image URL.' },
+        brand: { type: 'string', required: false, description: 'Brand name displayed next to the logo.' },
+        meta: { type: 'Array<{ label: string; value: string; icon?: string }>', required: false, description: 'Document meta block (period, author, version, generated at, etc.).' },
+        footer: { type: 'string', required: false, description: 'Footnote / legal disclaimer at the bottom.' },
+        showPrintAction: { type: 'boolean', required: false, description: 'Show a built-in Print button. Ignored when `actions` is provided. Default true.' },
+        actions: { type: 'Array<{ id?: string; label: string; icon?: string; variant?: "default" | "outline" | "ghost"; actions?: EventAction | EventAction[] }>', required: false, description: 'Custom action buttons in the header (e.g. Download, Share).' },
+        watermark: { type: 'string', required: false, description: 'Optional watermark text like "DRAFT" or "CONFIDENTIAL".' },
+        paperWidth: { type: 'boolean', required: false, description: 'Constrain the body to a print-friendly column. Default true.' },
+    },
+    example: {
+        type: 'report-layout',
+        props: {
+            title: 'Q1 2026 Compliance Audit',
+            subtitle: 'Information security & access controls',
+            brand: 'Acme Corp',
+            meta: [
+                { label: 'Period', value: 'Jan 1 – Mar 31, 2026' },
+                { label: 'Generated', value: 'May 4, 2026' },
+                { label: 'Author', value: 'Internal Audit' },
+                { label: 'Version', value: '1.3' },
+            ],
+            footer: 'Confidential — internal use only. Do not redistribute outside Acme Corp.',
+            watermark: 'DRAFT',
+        },
+        children: [
+            { type: 'heading', props: { text: 'Executive summary', level: 2 } },
+            { type: 'text', props: { text: 'Findings indicate strong access-control posture with three medium-risk items.' } },
+        ],
+    },
+};

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

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

package/dist/manifest/entries/reveal.js

@@ -0,0 +1,14 @@
+export const revealEntry = {
+    type: 'reveal',
+    category: 'layout',
+    description: 'Container that animates its children into view on scroll. Sugar over an inView motion. Use to reveal sections as the visitor scrolls a landing page.',
+    props: {
+        direction: { type: '"up" | "down" | "left" | "right" | "fade"', required: false, description: 'Travel direction. Default "up".' },
+        once: { type: 'boolean', required: false, description: 'Reveal only the first time it enters view. Default true.' },
+    },
+    example: {
+        type: 'reveal',
+        props: { direction: 'up' },
+        children: [{ type: 'hero', props: { title: 'We build for the long tail', align: 'center' } }],
+    },
+};

package/dist/manifest/entries/rich-text.d.ts

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

package/dist/manifest/entries/rich-text.js

@@ -0,0 +1,29 @@
+export const richTextEntry = {
+    type: 'rich-text',
+    category: 'input',
+    description: 'WYSIWYG rich-text editor with formatting toolbar (Tiptap).',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path for HTML content.' },
+        value: { type: 'string', required: false, description: 'HTML content.' },
+        placeholder: { type: 'string', required: false, description: 'Placeholder text.' },
+        hideToolbar: { type: 'boolean', required: false, description: 'Hide formatting toolbar.' },
+        minHeight: { type: 'string', required: false, description: 'Min editor height. Default "120px".' },
+        maxHeight: { type: 'string', required: false, description: 'Max editor height (scrollable). Default "320px".' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on content change.' },
+    },
+    example: { type: 'rich-text', props: { label: 'Article body', placeholder: 'Write your article…', minHeight: '200px', bind: '{state.articleBody}' } },
+    pocket: {
+        state: { articleBody: '<p>Start writing…</p>' },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                { type: 'rich-text', props: { label: 'Article body', placeholder: 'Write your article…', minHeight: '200px' }, bind: 'state.articleBody' },
+                { type: 'text', props: { text: '{state.articleBody.length} characters (HTML).' } },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/richtext.js

@@ -0,0 +1,14 @@
+export const richtextEntry = {
+    type: 'richtext',
+    category: 'display',
+    // Renders to static markup (no client JS), so it is safe on prerendered pages.
+    staticSafe: true,
+    description: 'Render trusted rich HTML (e.g. TipTap StarterKit output) with prose styling. Authored inline by the visual editor.',
+    props: {
+        html: { type: 'string', required: false, description: 'Trusted rich HTML string (e.g. TipTap output).' },
+    },
+    example: {
+        type: 'richtext',
+        props: { html: '<p>Rich <strong>HTML</strong> content with a <em>list</em>:</p><ul><li>one</li><li>two</li></ul>' },
+    },
+};

package/dist/manifest/entries/ripple-frame.d.ts

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

package/dist/manifest/entries/ripple-frame.js

@@ -0,0 +1,22 @@
+export const rippleFrameEntry = {
+    type: 'ripple-frame',
+    category: 'composite',
+    description: 'Renders a Ripple spec inside another spec with isolated state. Use for nested demos or independent tiles.',
+    props: {
+        spec: { type: 'UISpec | UniversalSpec', required: true, description: 'Inner Ripple spec to render.' },
+        state: { type: 'Record<string, unknown>', required: false, description: 'Optional state override for the inner instance.' },
+    },
+    example: {
+        type: 'ripple-frame',
+        props: {
+            spec: {
+                type: 'flex',
+                props: { direction: 'column', gap: 2 },
+                children: [
+                    { type: 'text', props: { text: 'Inner spec' } },
+                    { type: 'button', props: { label: 'Click me' } },
+                ],
+            },
+        },
+    },
+};

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

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