@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/manifest/entries/habit-tracker.js

@@ -0,0 +1,38 @@
+const ICON_KEYS = '"read" | "run" | "walk" | "bike" | "gym" | "stretch" | "water" | "sleep" | "meditate" | "journal" | "code" | "music" | "veg" | "no-sugar" | "vitamins"';
+export const habitTrackerEntry = {
+    type: 'habit-tracker',
+    category: 'composite',
+    description: 'Habit tracker app: habits[{id, name, icon, target_per_week}] on a week grid the visitor ticks; streaks, weekly target rings, today %. Bind value.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "My week".' },
+        habits: {
+            type: `Array<{ id: string; name: string; icon?: ${ICON_KEYS}; target_per_week: number }>`,
+            required: true,
+            description: '1 to 8 habits. target_per_week is 1 to 7 (7 = every day). Any other icon value shows a plain dot.',
+        },
+        week_start: { type: '"mon" | "sun"', required: false, description: 'First day of the week. Default "mon".' },
+        weeks: { type: 'number', required: false, description: 'Weeks of history the visitor can page back through, 1 to 4. Default 1.' },
+        seed: {
+            type: 'Record<string, number[]>',
+            required: false,
+            description: 'Demo ticks per habit id as day offsets back from today (0 = today, 1 = yesterday). Leave out for a fresh tracker.',
+        },
+        sound: { type: 'boolean', required: false, description: 'A soft pop when a day is ticked. Default true; false mutes this widget.' },
+    },
+    example: {
+        type: 'habit-tracker',
+        bind: '{state.habits}',
+        props: {
+            title: 'My week',
+            week_start: 'mon',
+            weeks: 2,
+            habits: [
+                { id: 'read', name: 'Read 20 pages', icon: 'read', target_per_week: 5 },
+                { id: 'run', name: 'Run', icon: 'run', target_per_week: 3 },
+                { id: 'water', name: 'Drink 2L water', icon: 'water', target_per_week: 7 },
+                { id: 'meditate', name: 'Meditate', icon: 'meditate', target_per_week: 4 },
+            ],
+            seed: { read: [1, 2, 3, 5], run: [2, 4], water: [0, 1, 2, 3, 4, 5, 6, 7], meditate: [1] },
+        },
+    },
+};

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

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

package/dist/manifest/entries/heading.js

@@ -0,0 +1,10 @@
+export const headingEntry = {
+    type: 'heading',
+    category: 'display',
+    description: 'Section title at h1-h6 levels. Use for page titles and section headers.',
+    props: {
+        text: { type: 'string', required: true, description: 'The heading text.' },
+        level: { type: '1 | 2 | 3 | 4 | 5 | 6', required: false, description: 'Heading level. Defaults to 2.' },
+    },
+    example: { type: 'heading', props: { text: 'Q2 Performance', level: 2 } },
+};

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

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

package/dist/manifest/entries/heatmap.js

@@ -0,0 +1,26 @@
+export const heatmapEntry = {
+    type: 'heatmap',
+    category: 'data',
+    description: 'Matrix heatmap of intensity across x/y categories. Use for correlation, activity calendars.',
+    props: {
+        cells: { type: 'Array<{ x: string | number; y: string | number; value: number }>', required: true, description: 'Cell data.' },
+        xLabels: { type: '(string | number)[]', required: false, description: 'Explicit x-axis labels.' },
+        yLabels: { type: '(string | number)[]', required: false, description: 'Explicit y-axis labels.' },
+        height: { type: 'number', required: false, description: 'Max height. Default 280.' },
+        title: { type: 'string', required: false, description: 'Chart title.' },
+        colorRange: { type: '[string, string]', required: false, description: 'Ignored.' },
+        showLabels: { type: 'boolean', required: false, description: 'Show cell value labels.' },
+    },
+    example: {
+        type: 'heatmap',
+        props: {
+            title: 'Engagement Matrix',
+            cells: [
+                { x: 'Mon', y: 'Week 1', value: 12 },
+                { x: 'Tue', y: 'Week 1', value: 18 },
+                { x: 'Mon', y: 'Week 2', value: 22 },
+                { x: 'Tue', y: 'Week 2', value: 25 },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/hero.js

@@ -0,0 +1,15 @@
+export const heroEntry = {
+    type: 'hero',
+    category: 'layout',
+    description: 'Large hero section with title, subtitle, eyebrow text, and alignment options. Use for landing intros.',
+    props: {
+        title: { type: 'string', required: true, description: 'Hero title.' },
+        subtitle: { type: 'string', required: false, description: 'Subtitle description.' },
+        eyebrow: { type: 'string', required: false, description: 'Eyebrow text above title.' },
+        align: { type: '"left" | "center"', required: false, description: 'Text alignment. Default "left".' },
+    },
+    example: {
+        type: 'hero',
+        props: { title: 'Build interfaces from JSON', subtitle: 'Ripple turns specs into Svelte UIs.', align: 'center' },
+    },
+};

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

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

package/dist/manifest/entries/highlight.js

@@ -0,0 +1,13 @@
+export const highlightEntry = {
+    type: 'highlight',
+    category: 'display',
+    description: 'Big-stat hero number with label, description, and trend delta. Use for headline KPIs.',
+    props: {
+        value: { type: 'string | number', required: true, description: 'Main value.' },
+        label: { type: 'string', required: false, description: 'Label below value.' },
+        description: { type: 'string', required: false, description: 'Additional context.' },
+        delta: { type: 'string', required: false, description: 'Delta text (e.g. "+12.4%").' },
+        tone: { type: '"positive" | "negative" | "neutral"', required: false, description: 'Delta tone (auto-derives from sign).' },
+    },
+    example: { type: 'highlight', props: { value: '1,250', label: 'Total orders', delta: '+8.5%', tone: 'positive' } },
+};

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

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

package/dist/manifest/entries/hover-card.js

@@ -0,0 +1,14 @@
+export const hoverCardEntry = {
+    type: 'hover-card',
+    category: 'overlay',
+    description: 'Rich card revealed on hover. Auto-closes on mouse leave.',
+    props: {
+        trigger: { type: 'string | UISpec', required: false, description: 'Trigger text or spec node.' },
+        content: { type: 'string | UISpec', required: false, description: 'Body text or spec node.' },
+        side: { type: '"top" | "right" | "bottom" | "left"', required: false, description: 'Position.' },
+        align: { type: '"start" | "center" | "end"', required: false, description: 'Alignment.' },
+        openDelay: { type: 'number', required: false, description: 'Show delay in ms. Default 300.' },
+        closeDelay: { type: 'number', required: false, description: 'Hide delay in ms. Default 150.' },
+    },
+    example: { type: 'hover-card', props: { trigger: '@alice', content: 'Alice Chen — Product Designer at Acme.', side: 'bottom' } },
+};

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

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

package/dist/manifest/entries/icon.js

@@ -0,0 +1,12 @@
+export const iconEntry = {
+    type: 'icon',
+    category: 'display',
+    description: 'Lucide SVG icon (lazy-loaded). Use kebab-case slug, e.g. `chevron-right`.',
+    props: {
+        name: { type: 'string', required: true, description: 'Lucide icon slug (kebab-case).' },
+        size: { type: 'number', required: false, description: 'Icon size in pixels. Default 16.' },
+        strokeWidth: { type: 'number', required: false, description: 'Stroke width. Default 2.' },
+        color: { type: 'string', required: false, description: 'Icon color (CSS color).' },
+    },
+    example: { type: 'icon', props: { name: 'check-circle', size: 24 } },
+};

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

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

package/dist/manifest/entries/if.js

@@ -0,0 +1,20 @@
+export const ifEntry = {
+    type: 'if',
+    category: 'control',
+    description: 'Conditional rendering. Renders children only when `condition` is truthy. `condition` is a node-level field, not a prop.',
+    props: {},
+    nodeFields: {
+        condition: { type: 'string', required: true, description: 'Expression evaluated for truthiness, e.g. "{state.isAdmin}".' },
+        else_children: { type: 'UINode[]', required: false, description: 'Rendered instead of `children` when `condition` is falsy.' },
+    },
+    example: {
+        type: 'if',
+        condition: '{state.isAdmin}',
+        children: [
+            { type: 'text', props: { text: 'Admin section' } },
+        ],
+        else_children: [
+            { type: 'text', props: { text: 'Ask an admin for access.' } },
+        ],
+    },
+};

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

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

package/dist/manifest/entries/illustration.js

@@ -0,0 +1,37 @@
+export const illustrationEntry = {
+    type: 'illustration',
+    category: 'display',
+    staticSafe: false,
+    description: 'A small animated SVG drawing you write: <svg viewBox> with shapes, gradients and animate/animateTransform. No scripts, styles, links, images or filters. Optional numbered notes pinned on parts of it.',
+    props: {
+        svg: {
+            type: 'string',
+            required: true,
+            description: "SVG markup, root <svg viewBox='...'>. Put attributes in single quotes so the JSON needs no escaping. Under 24,000 chars, 400 elements, 40 animations, 40 use (never a use of a use); every dur 0.5s or more. Elements: svg g defs title desc path rect circle ellipse line polyline polygon text tspan linearGradient radialGradient stop clipPath mask symbol use animate animateTransform animateMotion mpath set. Refs only as url(#id) and href='#id' (plain href, not xlink:href). No style attribute, no on* handlers.",
+        },
+        title: { type: 'string', required: true, description: 'Accessible name, e.g. "Sun rising over two hills".' },
+        caption: { type: 'string', required: false, description: 'Optional line under the art.' },
+        max_height: { type: 'number', required: false, description: 'Height cap in px, 80 to 640. Default 320.' },
+        annotations: {
+            type: 'Array<{ id: string; label: string; note: string; target?: string; at?: [number, number] }>',
+            required: false,
+            description: "At most 8 numbered notes the reader taps to open. Plain text: label up to 40 chars, note up to 280. Exactly one of `target` (an id in your svg, e.g. 'valve') or `at` ([x, y] in viewBox units). A target id that is not in the svg drops the note.",
+        },
+    },
+    events: {
+        on_select: {
+            type: 'EventAction | EventAction[]',
+            required: false,
+            description: 'Fires with { id } when the reader opens a note by clicking its pin or legend line.',
+        },
+    },
+    example: {
+        type: 'illustration',
+        props: {
+            title: 'Sun rising over two hills',
+            caption: 'Morning, drawn in SVG.',
+            max_height: 200,
+            svg: "<svg viewBox='0 0 200 120'><defs><linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#bfe3ff'/><stop offset='1' stop-color='#fff4d6'/></linearGradient></defs><rect width='200' height='120' fill='url(#sky)'/><circle cx='100' cy='110' r='18' fill='#ffb703'><animate attributeName='cy' from='110' to='48' dur='3s' fill='freeze'/></circle><path d='M0 120 Q50 70 100 105 T200 95 V120 Z' fill='#7cb518'/><path d='M0 120 Q60 90 120 112 T200 108 V120 Z' fill='#4f772d'/></svg>",
+        },
+    },
+};

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

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

package/dist/manifest/entries/image.js

@@ -0,0 +1,14 @@
+export const imageEntry = {
+    type: 'image',
+    category: 'display',
+    description: 'Image with object-fit, rounding, and width/height controls.',
+    props: {
+        src: { type: 'string', required: false, description: 'Image source URL.' },
+        alt: { type: 'string', required: false, description: 'Alt text.' },
+        width: { type: 'number | string', required: false, description: 'Width (px or CSS value).' },
+        height: { type: 'number | string', required: false, description: 'Height (px or CSS value).' },
+        fit: { type: '"contain" | "cover" | "fill" | "none" | "scale-down"', required: false, description: 'CSS object-fit value.' },
+        rounded: { type: '"none" | "sm" | "md" | "lg" | "xl" | "full"', required: false, description: 'Border radius preset.' },
+    },
+    example: { type: 'image', props: { src: 'https://example.com/photo.jpg', alt: 'Scenic view', width: 200, height: 150, fit: 'cover', rounded: 'md' } },
+};

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

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

package/dist/manifest/entries/input.js

@@ -0,0 +1,42 @@
+export const inputEntry = {
+    type: 'input',
+    category: 'input',
+    description: 'Single-line text input with label, error states, and optional helper text.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path, e.g. "{state.email}".' },
+        value: { type: 'string', required: false, description: 'Input value.' },
+        placeholder: { type: 'string', required: false, description: 'Placeholder text.' },
+        type: { type: '"text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "time" | "color"', required: false, description: 'HTML input type.' },
+        size: { type: '"sm" | "md" | "lg"', required: false, description: 'Input size.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable input.' },
+        readOnly: { type: 'boolean', required: false, description: 'Read-only.' },
+        required: { type: 'boolean', required: false, description: 'Mark as required.' },
+        error: { type: 'string', required: false, description: 'Error message below input.' },
+        helper: { type: 'string', required: false, description: 'Helper text below input.' },
+    },
+    events: {
+        on_input: { type: 'EventAction', required: false, description: 'Fired on every keystroke.' },
+        on_change: { type: 'EventAction', required: false, description: 'Fired on blur.' },
+    },
+    example: { type: 'input', props: { label: 'Email', type: 'email', placeholder: 'you@example.com', bind: '{state.email}', required: true } },
+    pocket: {
+        state: { email: '', sent: false },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                { type: 'input', props: { label: 'Email', type: 'email', placeholder: 'you@example.com' }, bind: 'state.email' },
+                { type: 'text', props: { text: 'Will send to: {state.email || "(nothing yet)"}' } },
+                {
+                    type: 'button',
+                    props: { label: 'Send', disabled: '{state.email == ""}' },
+                    on_click: [
+                        { action: 'set', target: 'sent', value: true },
+                        { action: 'toast', message: 'Sent to {state.email}', variant: 'success' },
+                    ],
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/interval-workout.d.ts

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

package/dist/manifest/entries/interval-workout.js

@@ -0,0 +1,44 @@
+const EXERCISE_KINDS = '"cardio" | "strength" | "core" | "mobility" | "rest"';
+export const intervalWorkoutEntry = {
+    type: 'interval-workout',
+    category: 'composite',
+    description: 'Interval workout timer: exercises[{name, cue, kind}], workSec, restSec, rounds. Counts down work and rest in seconds, one exercise at a time. Bind workSec.',
+    props: {
+        title: { type: 'string', required: false, description: 'Workout name, e.g. "20-minute home HIIT".' },
+        subtitle: { type: 'string', required: false, description: 'One line under the title (level, equipment).' },
+        verdict: { type: '{ text: string; status?: "good" | "warn" | "bad" | "info" | "neutral" }', required: false, description: 'The answer up front, at most 140 chars. Omit it and the total time leads.' },
+        exercises: {
+            type: `Array<{ id?: string; name: string; cue?: string; kind?: ${EXERCISE_KINDS}; figure?: string }>`,
+            required: true,
+            description: 'In order, one round. `cue` is a one-line form tip. A "rest" kind is a rest block (restSec long) with no extra rest beside it. Each row shows an animated figure matched from `name`; `figure` (an id like "cat-cow") overrides the match.',
+        },
+        workSec: { type: 'number', required: true, description: 'Seconds of work per exercise (5 to 600). Two-way bind with `bind: "{state.workSec}"`; a change applies from the next interval.' },
+        restSec: { type: 'number', required: true, description: 'Seconds of rest between exercises (0 to 300; 0 skips rests).' },
+        rounds: { type: 'number', required: false, description: 'Times through the list. Default 1. Total time = rounds × exercises × workSec plus the rests.' },
+        sound: { type: 'boolean', required: false, description: 'Quiet cues: a tick in the last 3 seconds of each interval, a chime between intervals and one when done. Default true; false mutes this widget.' },
+    },
+    example: {
+        type: 'interval-workout',
+        bind: '{state.workSec}',
+        props: {
+            title: '20-minute home HIIT',
+            subtitle: 'No equipment · 2 rounds',
+            verdict: { text: 'Ten moves, twice through; drop push-ups to your knees if form slips.', status: 'info' },
+            workSec: 40,
+            restSec: 20,
+            rounds: 2,
+            exercises: [
+                { name: 'Jumping jacks', cue: 'Land softly and keep a steady rhythm.', kind: 'cardio' },
+                { name: 'Bodyweight squats', cue: 'Chest up, hips back, drive through the heels.', kind: 'strength' },
+                { name: 'Mountain climbers', cue: 'Hands under shoulders, knees fast.', kind: 'core' },
+                { name: 'Push-ups', cue: 'Straight line from head to heels.', kind: 'strength' },
+                { name: 'High knees', cue: 'Knees to hip height, stay on the balls of your feet.', kind: 'cardio' },
+                { name: 'Reverse lunges', cue: 'Step back and alternate legs.', kind: 'strength' },
+                { name: 'Plank shoulder taps', cue: 'Feet wide, hips still.', kind: 'core' },
+                { name: 'Skater hops', cue: 'Leap side to side and land on one foot.', kind: 'cardio' },
+                { name: 'Glute bridges', cue: 'Squeeze at the top for a beat.', kind: 'strength' },
+                { name: 'Burpees', cue: 'Squat, jump back, jump in, jump up.', kind: 'cardio' },
+            ],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,55 @@
+export const invoiceLayoutEntry = {
+    type: 'invoice-layout',
+    category: 'composite',
+    description: 'Full invoice / quote / receipt document with branded header, bill-to / ship-to, status, totals, payment instructions, and notes. Composes the `invoice-lines` widget for line items.',
+    props: {
+        docType: { type: '"Invoice" | "Quote" | "Receipt" | "Credit note"', required: false, description: 'Document type label. Default "Invoice".' },
+        from: { type: '{ name: string; logo?: string; address?: string; email?: string; phone?: string; taxId?: string }', required: true, description: 'The party issuing the document.' },
+        billTo: { type: '{ name: string; address?: string; email?: string; phone?: string; taxId?: string }', required: true, description: 'The party being billed.' },
+        shipTo: { type: '{ name: string; address?: string }', required: false, description: 'Optional ship-to block (when different from bill-to).' },
+        invoiceNumber: { type: 'string', required: true, description: 'Document number (e.g. "INV-2026-042").' },
+        issueDate: { type: 'string', required: true, description: 'Issue date (any human-readable format).' },
+        dueDate: { type: 'string', required: false, description: 'Due date.' },
+        status: { type: '"draft" | "sent" | "paid" | "overdue" | "void"', required: false, description: 'Status badge.' },
+        currency: { type: 'string', required: false, description: 'Currency symbol prepended to amounts, or an ISO code ("USD") formatted as money. Default "$".' },
+        lines: { type: 'Array<{ id?: string | number; description: string; quantity?: number; unitPrice?: number; total?: number; note?: string }>', required: true, description: 'Line items.' },
+        summary: { type: 'Array<{ label: string; value: number; isNegative?: boolean }>', required: false, description: 'Tax / discount / shipping rows shown after subtotal. `amount` is accepted for `value`; a non-number shows a dash.' },
+        subtotal: { type: 'number', required: false, description: 'Override the auto-computed subtotal.' },
+        total: { type: 'number', required: false, description: 'Override the auto-computed grand total.' },
+        notes: { type: 'string', required: false, description: 'Notes shown at the bottom (free-form text).' },
+        paymentTerms: { type: 'string', required: false, description: 'Short payment terms summary (e.g. "Net 30").' },
+        paymentMethods: { type: 'Array<{ label: string; detail?: string }>', required: false, description: 'Payment method instructions (e.g. ACH details, wire info).' },
+        actions: { type: 'Array<{ id?: string; label: string; icon?: string; variant?: "default" | "outline" | "ghost"; actions?: EventAction | EventAction[] }>', required: false, description: 'Action buttons at the bottom (Download, Pay, Send).' },
+    },
+    example: {
+        type: 'invoice-layout',
+        props: {
+            docType: 'Invoice',
+            from: { name: 'Acme Corp', address: '1 Market St, San Francisco, CA', email: 'billing@acme.com', taxId: 'US-83-1234567' },
+            billTo: { name: 'Globex Industries', address: '500 Industrial Pkwy, Springfield, IL', email: 'ap@globex.com' },
+            invoiceNumber: 'INV-2026-042',
+            issueDate: 'May 1, 2026',
+            dueDate: 'May 31, 2026',
+            status: 'sent',
+            paymentTerms: 'Net 30',
+            lines: [
+                { description: 'Enterprise plan — May 2026', quantity: 1, unitPrice: 2500 },
+                { description: 'Additional seats (40 × $30)', quantity: 40, unitPrice: 30 },
+                { description: 'Onboarding services', quantity: 4, unitPrice: 250, note: '4-hour kickoff' },
+            ],
+            summary: [
+                { label: 'Subtotal', value: 4900 },
+                { label: 'Tax (8.5%)', value: 416.5 },
+            ],
+            paymentMethods: [
+                { label: 'Wire transfer', detail: 'Routing 121000358 · Account 9876543210' },
+                { label: 'ACH', detail: 'Same details as wire' },
+            ],
+            notes: 'Thank you for your business.',
+            actions: [
+                { id: 'download', label: 'Download PDF', icon: 'download', variant: 'outline' },
+                { id: 'pay', label: 'Pay invoice', icon: 'credit-card' },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/invoice-lines.d.ts

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

package/dist/manifest/entries/invoice-lines.js

@@ -0,0 +1,30 @@
+export const invoiceLinesEntry = {
+    type: 'invoice-lines',
+    category: 'vertical',
+    description: 'Invoice line-item table with qty, unit price, totals. Auto-computes subtotal; supports tax/discount summary rows.',
+    props: {
+        lines: { type: 'Array<{ id?: string | number; description: string; quantity?: number; unitPrice?: number; total?: number; note?: string }>', required: true, description: 'Line items.' },
+        currency: { type: 'string', required: false, description: 'Currency symbol ("$") or ISO code ("USD"). Default "$".' },
+        summary: { type: 'Array<{ label: string; value: number; isNegative?: boolean }>', required: false, description: 'Tax/discount/shipping rows.' },
+        subtotal: { type: 'number', required: false, description: 'Override auto-computed subtotal.' },
+        total: { type: 'number', required: false, description: 'Override auto-computed grand total.' },
+        showRowTotals: { type: 'boolean', required: false, description: 'Show line-totals column. Default true.' },
+    },
+    example: {
+        type: 'invoice-lines',
+        props: {
+            currency: '$',
+            lines: [
+                { id: 'line1', description: 'Enterprise annual plan', quantity: 1, unitPrice: 12000, note: '12 months @ $1,000/mo' },
+                { id: 'line2', description: 'Premium support add-on', quantity: 12, unitPrice: 500 },
+                { id: 'line3', description: 'Custom integration setup', quantity: 1, unitPrice: 2500 },
+            ],
+            summary: [
+                { label: 'Subtotal', value: 18000 },
+                { label: 'Tax (8%)', value: 1440 },
+                { label: 'Discount', value: 1000, isNegative: true },
+            ],
+            total: 18440,
+        },
+    },
+};

package/dist/manifest/entries/iso-scene.d.ts

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

package/dist/manifest/entries/iso-scene.js

@@ -0,0 +1,145 @@
+export const isoSceneEntry = {
+    type: 'iso-scene',
+    category: 'composite',
+    description: 'Live isometric drawing of a machine from a parts list that spins, slides, swings, pulses or flows, with sliders, readouts and labels. Aim for 12-30 parts; detail is added automatically.',
+    props: {
+        title: { type: 'string', required: false, description: 'Up to 80 characters.' },
+        caption: { type: 'string', required: false, description: 'One plain sentence under the drawing. Up to 200 characters.' },
+        look: { type: '"soft" | "color"', required: false, description: 'soft (default): Blueprint look, blue-grey parts in four soft tones, navy ink (white in dark), flows in brand blue, colors as faint tints. color: saturated fills.' },
+        detail: { type: '"auto" | "none"', required: false, description: 'auto (default) adds small parts that belong to yours: feet, hubs, bolts, spider arms, pins, collars, clamps. none draws only what you wrote.' },
+        scale: { type: 'number', required: false, description: 'Zoom, 0.4 to 2.5. Default 1 (fits the drawing).' },
+        params: {
+            type: 'Array<{ key: string; label: string; min: number; max: number; step?: number; unit?: string; value: number }>',
+            required: false,
+            description: 'Up to 6 sliders. `key` is an identifier that speeds and readouts can use, e.g. "cadence / 60".',
+        },
+        parts: {
+            type: 'Array<{ id: string; kind: "slab" | "box" | "cylinder" | "disc" | "gear" | "tube" | "sphere" | "cone" | "rod" | "arrow" | "plate" | "chain"; at?: [x, y, z]; w?: number; d?: number; h?: number; r?: number; teeth?: number; axis?: "x" | "y" | "z"; path?: [x, y, z][]; from?: [x, y, z]; to?: [x, y, z]; around?: [string, string]; label?: string; detail?: "knob" | "none"; ghost?: boolean; texture?: "guilloche" | "ribs"; color?: "neutral" | "accent" | "red" | "blue" | "green" | "amber" | "metal"; on?: string }>',
+            required: true,
+            description: 'Up to 150; aim for 12-30. Units are free (keep the scene within about 300 across); z is up. `at` is the centre. slab/box/plate: w, d, h (slab r rounds corners, plate shows `label`, `texture` decorates a plate or slab top). cylinder/disc/gear/cone: r, h along `axis` (default z). tube: `path` points, r. rod and arrow: from, to. chain: `around` two gear ids; it wraps both and moves with the one that spins. `on`: id of a parent part this one moves with. `ghost: true` draws a housing see-through; a solid that holds a moving part is see-through unless `ghost: false`. `detail: "knob"` knurls a knob, "none" skips added detail. Unknown kinds are skipped.',
+        },
+        motions: {
+            type: 'Array<{ part: string; kind: "spin" | "slide" | "swing" | "pulse" | "flow" | "link"; axis?: "x" | "y" | "z"; speed?: number | string; range?: number | [number, number]; phase?: number; from?: string; to?: string; driven?: string; throw?: number }>',
+            required: false,
+            description: 'Up to 20. speed is turns or cycles per second, a number or an expression over params written without braces, e.g. "cadence / 60". range: swing degrees (default 25), slide distance (8), pulse growth 0..0.6 (0.12); or [min, max] to move between the two. phase 0..1. flow animates tubes, rods and arrows. link: a rod whose ends ride the parts `from` and `to` (crank pin to piston). A slide with `driven`: id of a spinning crank, and `throw`: crank radius, follows that crank instead of its own speed.',
+        },
+        readouts: {
+            type: 'Array<{ label: string; value: string | number; unit?: string; decimals?: number }>',
+            required: false,
+            description: 'Up to 4 live numbers, each an expression over params without braces, e.g. "rate * 70 / 1000".',
+        },
+        labels: {
+            type: 'Array<{ part?: string; at?: [x, y, z]; label: string; note?: string }>',
+            required: false,
+            description: 'Up to 10 numbered pins on a part (they follow it) or a point, listed with their notes under the drawing.',
+        },
+        value: { type: 'Record<string, number>', required: false, description: 'Two-way bind with `bind: "{state.scene}"`: the param values, written when a slider moves.' },
+    },
+    example: {
+        type: 'iso-scene',
+        bind: 'state.gears',
+        props: {
+            title: 'Two gears',
+            params: [{ key: 'speed', label: 'Input speed', min: 10, max: 120, step: 5, unit: 'rpm', value: 40 }],
+            parts: [
+                { id: 'base', kind: 'slab', at: [20, 0, -4], w: 120, d: 60, h: 4, r: 6 },
+                { id: 'big', kind: 'gear', at: [0, 0, 6], r: 30, h: 6, teeth: 30, color: 'metal' },
+                { id: 'small', kind: 'gear', at: [44, 0, 6], r: 15, h: 6, teeth: 15, color: 'accent' },
+            ],
+            motions: [
+                { part: 'big', kind: 'spin', speed: 'speed / 60' },
+                { part: 'small', kind: 'spin', speed: 'speed / 60 * -2', phase: 0.03 },
+            ],
+            readouts: [{ label: 'Output speed', value: 'speed * 2', unit: 'rpm', decimals: 0 }],
+            labels: [
+                { part: 'big', label: 'Driver', note: '30 teeth' },
+                { part: 'small', label: 'Driven', note: '15 teeth, twice as fast' },
+            ],
+        },
+    },
+    pockets: [
+        {
+            name: 'Bicycle drivetrain on a stand',
+            description: 'About 15 parts: frame tubes, chainring, cog, a chain around both, cranks and pedals.',
+            state: { bike: {} },
+            ui: {
+                type: 'iso-scene',
+                bind: 'state.bike',
+                props: {
+                    title: 'Bicycle drivetrain',
+                    params: [{ key: 'cadence', label: 'Cadence', min: 30, max: 120, step: 5, unit: 'rpm', value: 80 }],
+                    parts: [
+                        { id: 'base', kind: 'slab', at: [50, 0, -16], w: 200, d: 64, h: 4, r: 6 },
+                        { id: 'stand', kind: 'box', at: [0, -12, 2], w: 8, d: 8, h: 32, color: 'metal' },
+                        { id: 'chainstay', kind: 'rod', from: [0, -9, 30], to: [110, -9, 30], r: 2.6, color: 'accent' },
+                        { id: 'seat-tube', kind: 'rod', from: [0, -9, 30], to: [-14, -9, 92], r: 2.6, color: 'accent' },
+                        { id: 'seat-stay', kind: 'rod', from: [110, -9, 30], to: [-12, -9, 84], r: 2.2, color: 'accent' },
+                        { id: 'down-tube', kind: 'rod', from: [0, -9, 30], to: [70, -9, 96], r: 2.8, color: 'accent' },
+                        { id: 'ring', kind: 'gear', at: [0, 0, 30], r: 22, h: 3, teeth: 40, axis: 'y', color: 'metal' },
+                        { id: 'cog', kind: 'gear', at: [110, 0, 30], r: 9, h: 3, teeth: 16, axis: 'y', color: 'metal' },
+                        { id: 'chain', kind: 'chain', around: ['ring', 'cog'], r: 1.4 },
+                        { id: 'crank', kind: 'rod', from: [0, 8, 30], to: [0, 8, -2], r: 2.4, color: 'metal', on: 'ring' },
+                        { id: 'pedal', kind: 'box', at: [0, 14, -2], w: 10, d: 12, h: 3, on: 'crank' },
+                        { id: 'crank-back', kind: 'rod', from: [0, -14, 30], to: [0, -14, 62], r: 2.4, color: 'metal', on: 'ring' },
+                        { id: 'pedal-back', kind: 'box', at: [0, -20, 62], w: 10, d: 12, h: 3, on: 'crank-back' },
+                        { id: 'derailleur', kind: 'box', at: [112, 6, 12], w: 8, d: 4, h: 12, color: 'metal' },
+                        { id: 'axle', kind: 'cylinder', at: [110, -4, 30], r: 2, h: 22, axis: 'y', on: 'cog' },
+                    ],
+                    motions: [
+                        { part: 'ring', kind: 'spin', axis: 'y', speed: 'cadence / 60' },
+                        { part: 'cog', kind: 'spin', axis: 'y', speed: 'cadence / 60 * 2.5' },
+                    ],
+                    readouts: [{ label: 'Road speed', value: 'cadence * 2.1 * 2.5 * 60 / 1000', unit: 'km/h', decimals: 1 }],
+                    labels: [
+                        { part: 'ring', label: 'Chainring', note: '40 teeth' },
+                        { part: 'cog', label: 'Rear cog', note: '16 teeth, 2.5 turns per pedal turn' },
+                        { part: 'chain', label: 'Chain' },
+                    ],
+                },
+            },
+        },
+        {
+            name: 'Hand water pump',
+            description: 'About 15 parts: a see-through barrel, a piston on a link rod from the handle, check valve, spout and bucket.',
+            state: { pump: {} },
+            ui: {
+                type: 'iso-scene',
+                bind: 'state.pump',
+                props: {
+                    title: 'Hand water pump',
+                    params: [{ key: 'rate', label: 'Strokes', min: 10, max: 60, step: 5, unit: '/min', value: 30 }],
+                    parts: [
+                        { id: 'base', kind: 'slab', at: [10, 0, -2], w: 130, d: 70, h: 4, r: 6 },
+                        { id: 'pedestal', kind: 'box', at: [0, 0, 6], w: 34, d: 34, h: 12, color: 'metal' },
+                        { id: 'barrel', kind: 'cylinder', at: [0, 0, 40], r: 14, h: 56, ghost: true },
+                        { id: 'valve', kind: 'disc', at: [0, 0, 16], r: 10, h: 2 },
+                        { id: 'piston', kind: 'cylinder', at: [0, 0, 40], r: 12, h: 8, color: 'amber' },
+                        { id: 'cap', kind: 'disc', at: [0, 0, 69.5], r: 16, h: 3, color: 'metal' },
+                        { id: 'post', kind: 'box', at: [-28, 0, 76], w: 5, d: 5, h: 10, color: 'metal' },
+                        { id: 'handle', kind: 'rod', from: [-28, 0, 82], to: [-88, 0, 96], r: 2.4, color: 'metal' },
+                        { id: 'nose', kind: 'rod', from: [-28, 0, 82], to: [0, 0, 82], r: 2.4, color: 'metal', on: 'handle' },
+                        { id: 'grip', kind: 'cylinder', at: [-88, 0, 96], r: 3, h: 12, axis: 'y', detail: 'knob', on: 'handle' },
+                        { id: 'pump-rod', kind: 'rod', from: [0, 0, 44], to: [0, 0, 82], r: 1.6 },
+                        { id: 'spout', kind: 'tube', path: [[14, 0, 58], [36, 0, 58], [42, 0, 50]], r: 3.5, color: 'blue' },
+                        { id: 'water', kind: 'arrow', from: [42, 0, 46], to: [44, 0, 24], color: 'blue' },
+                        { id: 'bucket', kind: 'cylinder', at: [46, 0, 10], r: 11, h: 20, color: 'blue' },
+                    ],
+                    motions: [
+                        { part: 'handle', kind: 'swing', axis: 'y', range: 12, speed: 'rate / 60' },
+                        { part: 'piston', kind: 'slide', axis: 'z', range: [-8, 8], speed: 'rate / 60', phase: 0.5 },
+                        { part: 'pump-rod', kind: 'link', from: 'piston', to: 'nose' },
+                        { part: 'valve', kind: 'swing', axis: 'x', range: 18, speed: 'rate / 60' },
+                        { part: 'spout', kind: 'flow', speed: 'rate / 60' },
+                        { part: 'water', kind: 'flow', speed: 'rate / 60' },
+                    ],
+                    readouts: [{ label: 'Water per minute', value: 'rate * 0.4', unit: 'L', decimals: 1 }],
+                    labels: [
+                        { part: 'handle', label: 'Handle', note: 'push down to lift the piston' },
+                        { part: 'piston', label: 'Piston', note: 'lifts water up the barrel' },
+                        { part: 'valve', label: 'Check valve', note: 'keeps water from falling back' },
+                    ],
+                },
+            },
+        },
+    ],
+};

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

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