@ripple-ui/svelte 0.0.0-stage → 0.8.2

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

@@ -0,0 +1,19 @@
+export const fillGridEntry = {
+    type: 'fill-grid',
+    category: 'display',
+    staticSafe: true,
+    description: 'Discrete heap/segment meter: a row (or matrix) of M cells, the first N filled per value/max, the rest faint ghost cells. Pure CSS, SSR-safe.',
+    props: {
+        value: { type: 'number', required: false, description: 'Current value. Filled cells = round(value/max * total).' },
+        max: { type: 'number', required: false, description: 'Max value. Default 100.' },
+        total: { type: 'number', required: false, description: 'Total number of cells. Default 24.' },
+        cols: { type: 'number', required: false, description: 'Columns for a matrix layout. Omit for a single row.' },
+        color: { type: 'string', required: false, description: 'Filled-cell color. Default the primary token.' },
+        cellHeight: { type: 'number', required: false, description: 'Cell height in px. Default 12.' },
+        gap: { type: 'number', required: false, description: 'Gap between cells in px. Default 3.' },
+    },
+    example: {
+        type: 'fill-grid',
+        props: { value: 62, max: 100, total: 24 },
+    },
+};

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

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

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

@@ -0,0 +1,48 @@
+export const filterBarEntry = {
+    type: 'filter-bar',
+    category: 'input',
+    description: 'Chip-based filter UI with add/remove buttons. Use above lists/tables for multi-criteria filtering.',
+    props: {
+        bind: { type: 'string', required: false, description: 'Two-way state path for active filters array, e.g. "{state.filters}".' },
+        options: { type: 'Array<{ key: string; label: string; type?: string; default?: unknown }>', required: true, description: 'Available filter definitions.' },
+        addLabel: { type: 'string', required: false, description: 'Add-button label. Default "Filter".' },
+        showClearAll: { type: 'boolean', required: false, description: 'Show clear-all button. Default true.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired when filters change.' },
+    },
+    example: {
+        type: 'filter-bar',
+        props: {
+            options: [
+                { key: 'status', label: 'Status' },
+                { key: 'priority', label: 'Priority' },
+                { key: 'assignee', label: 'Assignee' },
+            ],
+            bind: '{state.filters}',
+            showClearAll: true,
+        },
+    },
+    pocket: {
+        state: { filters: [] },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                {
+                    type: 'filter-bar',
+                    props: {
+                        options: [
+                            { key: 'status', label: 'Status' },
+                            { key: 'priority', label: 'Priority' },
+                            { key: 'assignee', label: 'Assignee' },
+                        ],
+                        showClearAll: true,
+                    },
+                    bind: 'state.filters',
+                },
+                { type: 'text', props: { text: '{state.filters.length} active filter(s)' } },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/flashcard-deck.d.ts

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

package/dist/manifest/entries/flashcard-deck.js

@@ -0,0 +1,36 @@
+export const flashcardDeckEntry = {
+    type: 'flashcard-deck',
+    category: 'composite',
+    description: 'Study deck: cards[{front, back, hint, category}]. Flip each card, mark Got it or Missed it, then a score screen with Practise missed. Bind score; on_complete {score, total}.',
+    props: {
+        title: { type: 'string', required: false, description: 'Deck name, e.g. "Beginner Spanish".' },
+        subtitle: { type: 'string', required: false, description: 'One line under the title.' },
+        verdict: { type: '{ text: string; status?: "good" | "warn" | "bad" | "info" | "neutral" }', required: false, description: 'The answer up front, at most 140 chars. Usually omitted for a deck.' },
+        cards: {
+            type: 'Array<{ id?: string; front: string; back: string; hint?: string; category?: string }>',
+            required: true,
+            description: 'The cards. `front` is the prompt, `back` the answer, `hint` an optional nudge shown on request, `category` a small topic label.',
+        },
+        shuffle: { type: 'boolean', required: false, description: 'Deal in shuffled order (a new order on every restart). Default false.' },
+        score: { type: 'number', required: false, description: 'Cards known since the last restart, written by the widget. Bind with `bind: "{state.score}"` to show it elsewhere.' },
+    },
+    events: {
+        on_complete: { type: 'EventAction', required: false, description: 'Fired at the end of every pass with { score, total }.' },
+    },
+    example: {
+        type: 'flashcard-deck',
+        bind: '{state.score}',
+        props: {
+            title: 'Beginner Spanish',
+            subtitle: 'Flip, then mark whether you knew it',
+            cards: [
+                { front: 'Hello', back: 'Hola', category: 'Greetings' },
+                { front: 'Thank you', back: 'Gracias', category: 'Greetings' },
+                { front: 'Please', back: 'Por favor', category: 'Greetings' },
+                { front: 'Water', back: 'Agua', hint: 'Sounds like "aqua"', category: 'Food and drink' },
+                { front: 'Friend', back: 'Amigo / Amiga', category: 'People' },
+                { front: 'Where is the bathroom?', back: '¿Dónde está el baño?', category: 'Travel' },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/flashcard.js

@@ -0,0 +1,20 @@
+export const flashcardEntry = {
+    type: 'flashcard',
+    category: 'interactive',
+    description: 'Study flashcard with a 3D flip between a question (front) and answer (back), plus "Got it" and "Needs review" actions for spaced repetition.',
+    props: {
+        front: { type: 'string', required: true, description: 'Question / front text.' },
+        back: { type: 'string', required: true, description: 'Answer / back text.' },
+        category: { type: 'string', required: false, description: 'Topic label shown above the card.' },
+        index: { type: 'string', required: false, description: 'Position label, e.g. "3 of 10".' },
+    },
+    events: {
+        on_flip: { type: 'EventAction', required: false, description: 'Fired with the new flip state.' },
+        on_correct: { type: 'EventAction', required: false, description: 'Fired when marked correct.' },
+        on_incorrect: { type: 'EventAction', required: false, description: 'Fired when marked for review.' },
+    },
+    example: {
+        type: 'flashcard',
+        props: { front: 'What is the capital of France?', back: 'Paris', category: 'Geography', index: '1 of 10' },
+    },
+};

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

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

package/dist/manifest/entries/flex.js

@@ -0,0 +1,20 @@
+export const flexEntry = {
+    type: 'flex',
+    category: 'layout',
+    description: 'Flexbox container. Lays children in a row or column with gap and alignment control.',
+    props: {
+        direction: { type: '"row" | "column"', required: false, description: 'Main axis. Defaults to row.' },
+        gap: { type: 'number | string', required: false, description: 'Gap between children. Number → tailwind spacing units (4px multiplier, e.g. 4 → 16px); string → raw CSS gap (e.g. "12px").' },
+        align: { type: '"start" | "center" | "end" | "stretch"', required: false, description: 'Cross-axis alignment.' },
+        justify: { type: '"start" | "center" | "end" | "between" | "around"', required: false, description: 'Main-axis distribution.' },
+        wrap: { type: 'boolean', required: false, description: 'Allow children to wrap to next line.' },
+    },
+    example: {
+        type: 'flex',
+        props: { direction: 'row', gap: 4, justify: 'between' },
+        children: [
+            { type: 'text', props: { text: 'Left' } },
+            { type: 'text', props: { text: 'Right' } },
+        ],
+    },
+};

package/dist/manifest/entries/focus-timer.d.ts

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

package/dist/manifest/entries/focus-timer.js

@@ -0,0 +1,34 @@
+export const focusTimerEntry = {
+    type: 'focus-timer',
+    category: 'composite',
+    description: 'Pomodoro timer: focus, short break, a long break every Nth round; rounds toward goal_rounds, a log of finished rounds, an editable task. Use it, not separate timer widgets. Bind value.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "Deep work".' },
+        focus_min: { type: 'number', required: false, description: 'Minutes of focus, 1 to 120. Default 25.' },
+        short_break_min: { type: 'number', required: false, description: 'Minutes of short break, 1 to 60. Default 5.' },
+        long_break_min: { type: 'number', required: false, description: 'Minutes of long break, 1 to 60. Default 15.' },
+        rounds_before_long: { type: 'number', required: false, description: 'Focus rounds before a long break, 1 to 12. Default 4.' },
+        goal_rounds: { type: 'number', required: false, description: 'Focus rounds to aim for today, 1 to 24.' },
+        task: { type: 'string', required: false, description: 'What the visitor is focusing on. The visitor can edit it.' },
+        auto_start_next: { type: 'boolean', required: false, description: 'Start the next phase on its own when one ends. Default false: it waits with a "Start break" button.' },
+        value: {
+            type: '{ phase: "focus" | "short" | "long"; remaining_s: number; running: boolean; rounds_done: number; task: string; log: string[] }',
+            required: false,
+            description: 'Two-way bind with `bind: "{state.focus}"`. Written on start, pause, reset, skip, phase end and edits (not every second), so remaining_s is as of the last event. `log` holds the ISO time each focus round finished.',
+        },
+        sound: { type: 'boolean', required: false, description: 'A soft chime when a phase ends. Default true; false mutes this widget.' },
+    },
+    example: {
+        type: 'focus-timer',
+        bind: '{state.focus}',
+        props: {
+            title: 'Deep work',
+            focus_min: 25,
+            short_break_min: 5,
+            long_break_min: 15,
+            rounds_before_long: 4,
+            goal_rounds: 8,
+            task: 'Draft the quarterly update',
+        },
+    },
+};

package/dist/manifest/entries/follow-up.d.ts

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

package/dist/manifest/entries/follow-up.js

@@ -0,0 +1,11 @@
+export const followUpEntry = {
+    type: 'follow-up',
+    category: 'research',
+    description: 'Text input with send button for follow-up questions. Emits an event on submit.',
+    props: {
+        placeholder: { type: 'string', required: false, description: 'Input placeholder.' },
+        submitLabel: { type: 'string', required: false, description: 'Submit button label (sr-only).' },
+        event: { type: 'string', required: false, description: 'Event name emitted on submit.' },
+    },
+    example: { type: 'follow-up', props: { placeholder: 'Ask follow-up', event: 'follow-up' } },
+};

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

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

package/dist/manifest/entries/footer.js

@@ -0,0 +1,20 @@
+export const footerEntry = {
+    type: 'footer',
+    category: 'marketing',
+    staticSafe: true,
+    description: 'Marketing footer: columns of links plus a copyright line. Use at the bottom of a landing page.',
+    props: {
+        columns: { type: 'Array<{ title: string; links: Array<{ label: string; href: string }> }>', required: false, description: 'Footer link columns.' },
+        copyright: { type: 'string', required: false, description: 'Copyright / legal line.' },
+    },
+    example: {
+        type: 'footer',
+        props: {
+            columns: [
+                { title: 'Company', links: [{ label: 'About', href: '#about' }, { label: 'Careers', href: '#careers' }] },
+                { title: 'Legal', links: [{ label: 'Privacy', href: '#privacy' }, { label: 'Terms', href: '#terms' }] },
+            ],
+            copyright: '© 2026 Bright Smile Dental',
+        },
+    },
+};

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

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

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

@@ -0,0 +1,43 @@
+export const formLayoutEntry = {
+    type: 'form-layout',
+    category: 'composite',
+    description: 'Multi-section form scaffold with side nav anchors, sticky save bar (cancel + submit), and dirty/saving/error indicators. Compose a `form` widget inside for validation.',
+    props: {
+        title: { type: 'string', required: false, description: 'Form title.' },
+        description: { type: 'string', required: false, description: 'Form description.' },
+        sections: { type: 'Array<{ id: string; title: string; description?: string; icon?: string }>', required: false, description: 'Side-nav anchor list. Each entry should match the `id` attribute of a section in `children`.' },
+        progress: { type: 'number', required: false, description: '0 to 100. Shown next to the title.' },
+        valid: { type: 'boolean', required: false, description: 'When false, the submit button is disabled and an "Resolve errors" tag is shown. Default true.' },
+        dirty: { type: 'boolean', required: false, description: 'Show "Unsaved changes" tag.' },
+        saving: { type: 'boolean', required: false, description: 'Show "Saving…" tag and disable the submit button.' },
+        submitLabel: { type: 'string', required: false, description: 'Submit button label. Default "Save changes".' },
+        cancelLabel: { type: 'string', required: false, description: 'Cancel button label. Default "Cancel".' },
+        submitActions: { type: 'EventAction | EventAction[]', required: false, description: 'Actions to dispatch when submit is clicked.' },
+        cancelActions: { type: 'EventAction | EventAction[]', required: false, description: 'Actions to dispatch when cancel is clicked.' },
+        showCancel: { type: 'boolean', required: false, description: 'Show the cancel button. Default true.' },
+        stickyBar: { type: 'boolean', required: false, description: 'Pin the action bar to the bottom of the viewport. Default true.' },
+    },
+    example: {
+        type: 'form-layout',
+        props: {
+            title: 'Account settings',
+            description: 'Update your profile, security, and notification preferences.',
+            sections: [
+                { id: 'profile', title: 'Profile', description: 'Name, email, avatar', icon: 'user' },
+                { id: 'security', title: 'Security', description: '2FA & sessions', icon: 'shield' },
+                { id: 'notifications', title: 'Notifications', icon: 'bell' },
+            ],
+            progress: 60,
+            dirty: true,
+            submitActions: [{ action: 'toast', message: 'Saved', variant: 'success' }],
+        },
+        children: [
+            { type: 'section', id: 'profile', props: { title: 'Profile' }, children: [
+                    { type: 'input', bind: 'name', props: { label: 'Name' } },
+                ] },
+            { type: 'section', id: 'security', props: { title: 'Security' }, children: [
+                    { type: 'switch', bind: 'twofa', props: { label: 'Enable 2FA' } },
+                ] },
+        ],
+    },
+};

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

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

package/dist/manifest/entries/form.js

@@ -0,0 +1,111 @@
+export const formEntry = {
+    type: 'form',
+    category: 'input',
+    description: 'Form wrapper with integrated validation. Wrap input children and pass validation rules.',
+    props: {
+        fields: { type: 'Record<string, { required?: boolean | string; minLength?: number; maxLength?: number; min?: number; max?: number; pattern?: string; label?: string }>', required: true, description: 'Validation rules keyed by state path.' },
+        errorsTarget: { type: 'string', required: false, description: 'State path for validation errors. Default "errors".' },
+        validTarget: { type: 'string', required: false, description: 'State path for overall validity. Default "valid".' },
+        validateOn: { type: '"submit" | "change"', required: false, description: 'When validation runs.' },
+        action: { type: 'string', required: false, description: 'Native submit URL. When set, the form does a real browser POST/GET so it works with NO client JS (for static / prerendered hosts). When omitted, the form stays client-side (validate then on_submit).' },
+        method: { type: '"post" | "get"', required: false, description: 'HTTP method for the native form. Only used with `action`. Default "post".' },
+    },
+    events: {
+        on_submit: { type: 'EventAction', required: false, description: 'Fired when a valid form is submitted.' },
+        on_validate: { type: 'EventAction', required: false, description: 'Fired after each validation run.' },
+    },
+    example: {
+        type: 'form',
+        props: {
+            fields: {
+                'state.email': { required: 'Email is required', minLength: 5 },
+                'state.password': { required: true, minLength: 8 },
+            },
+            validateOn: 'submit',
+        },
+        children: [
+            { type: 'input', props: { label: 'Email', type: 'email', bind: '{state.email}' } },
+            { type: 'input', props: { label: 'Password', type: 'password', bind: '{state.password}' } },
+            { type: 'button', props: { label: 'Sign in', type: 'submit' } },
+        ],
+    },
+    pockets: [
+        {
+            name: 'native-post-static',
+            description: 'Native browser POST that works with no client JS. For static / prerendered hosts (paw-sites). The form submits straight to `action`; inputs serialize by their `name`.',
+            state: {},
+            ui: {
+                type: 'form',
+                props: { action: '/api/submit', method: 'post' },
+                children: [
+                    { type: 'input', props: { label: 'Your name', name: 'full_name' } },
+                    { type: 'input', props: { label: 'Phone', name: 'phone' } },
+                    { type: 'button', props: { label: 'Request appointment', type: 'submit', variant: 'primary' } },
+                ],
+            },
+        },
+        {
+            name: 'validate-and-emit',
+            description: 'Client-side validation, then hand off to the host via emit.',
+            state: { email: '', password: '', errors: {} },
+            ui: {
+                type: 'form',
+                props: {
+                    fields: {
+                        email: { required: 'Email is required', minLength: 5 },
+                        password: { required: 'Password is required', minLength: 8 },
+                    },
+                    validateOn: 'submit',
+                },
+                on_submit: { action: 'emit', target: 'login', value: { email: '{state.email}', password: '{state.password}' } },
+                children: [
+                    { type: 'input', props: { label: 'Email', type: 'email' }, bind: 'state.email' },
+                    { type: 'input', props: { label: 'Password', type: 'password' }, bind: 'state.password' },
+                    { type: 'button', props: { label: 'Sign in', type: 'submit' } },
+                ],
+            },
+        },
+        {
+            name: 'validate-and-api',
+            description: 'Validate, call API, toast on success or failure.',
+            state: { name: '', email: '', submitting: false, errors: {} },
+            ui: {
+                type: 'form',
+                props: {
+                    fields: {
+                        name: { required: 'Name is required' },
+                        email: { required: 'Email is required', minLength: 5 },
+                    },
+                    validateOn: 'submit',
+                },
+                on_submit: {
+                    action: 'flow',
+                    steps: [
+                        { action: 'set', target: 'submitting', value: true },
+                        {
+                            action: 'api',
+                            method: 'POST',
+                            url: '/api/contacts',
+                            body: { name: '{state.name}', email: '{state.email}' },
+                            on_success: [
+                                { action: 'set', target: 'submitting', value: false },
+                                { action: 'set', target: 'name', value: '' },
+                                { action: 'set', target: 'email', value: '' },
+                                { action: 'toast', message: 'Contact saved', variant: 'success' },
+                            ],
+                            on_error: [
+                                { action: 'set', target: 'submitting', value: false },
+                                { action: 'toast', message: 'Could not save', variant: 'error' },
+                            ],
+                        },
+                    ],
+                },
+                children: [
+                    { type: 'input', props: { label: 'Name' }, bind: 'state.name' },
+                    { type: 'input', props: { label: 'Email', type: 'email' }, bind: 'state.email' },
+                    { type: 'button', props: { label: '{state.submitting ? "Saving…" : "Save"}', loading: '{state.submitting}', type: 'submit' } },
+                ],
+            },
+        },
+    ],
+};

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

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

package/dist/manifest/entries/funnel.js

@@ -0,0 +1,24 @@
+export const funnelEntry = {
+    type: 'funnel',
+    category: 'data',
+    description: 'Funnel chart showing stage-wise conversion or drop-off.',
+    props: {
+        data: { type: 'Array<{ label: string; value: number }>', required: true, description: 'Funnel stages.' },
+        height: { type: 'number', required: false, description: 'Max height px; else fits.' },
+        title: { type: 'string', required: false, description: 'Chart title.' },
+        colors: { type: 'string[]', required: false, description: 'Ignored.' },
+        sort: { type: '"descending" | "ascending" | "none"', required: false, description: 'Stage sort order.' },
+    },
+    example: {
+        type: 'funnel',
+        props: {
+            title: 'Sales Funnel',
+            data: [
+                { label: 'Leads', value: 1000 },
+                { label: 'Qualified', value: 620 },
+                { label: 'Proposal', value: 280 },
+                { label: 'Closed', value: 105 },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/gantt.js

@@ -0,0 +1,21 @@
+export const ganttEntry = {
+    type: 'gantt',
+    category: 'data',
+    description: 'Gantt chart for project timelines. Tasks have start/end ISO dates, optional dependencies, and progress bars.',
+    props: {
+        tasks: { type: 'Array<{ id: string; name: string; start: string; end: string; progress?: number; dependencies?: string }>', required: true, description: 'Task definitions (ISO dates YYYY-MM-DD).' },
+        viewMode: { type: '"Quarter Day" | "Half Day" | "Day" | "Week" | "Month" | "Year"', required: false, description: 'Time-unit granularity.' },
+        height: { type: 'string', required: false, description: 'Max height. Default "320px".' },
+    },
+    example: {
+        type: 'gantt',
+        props: {
+            viewMode: 'Week',
+            tasks: [
+                { id: '1', name: 'Design', start: '2026-05-03', end: '2026-05-10', progress: 100 },
+                { id: '2', name: 'Development', start: '2026-05-10', end: '2026-05-24', progress: 60, dependencies: '1' },
+                { id: '3', name: 'Testing', start: '2026-05-24', end: '2026-05-31', progress: 0 },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/gauge.js

@@ -0,0 +1,16 @@
+export const gaugeEntry = {
+    type: 'gauge',
+    category: 'data',
+    description: 'Circular gauge showing progress or single KPI as 0..max arc.',
+    props: {
+        value: { type: 'number', required: true, description: 'Current value.' },
+        max: { type: 'number', required: false, description: 'Maximum value. Default 100.' },
+        label: { type: 'string', required: false, description: 'Gauge label.' },
+        color: { type: 'string', required: false, description: 'Custom gauge color.' },
+        height: { type: 'number', required: false, description: 'Max height in px.' },
+        title: { type: 'string', required: false, description: 'Title above gauge.' },
+        currency: { type: 'string', required: false, description: 'ISO 4217 code for money gauges ("USD"). Formats value, target, over and to go; never put a symbol in the numbers. Shows the value, not a percent.' },
+        unit: { type: 'string', required: false, description: 'Plain suffix for every amount when there is no currency ("GB", "steps"). Shows the value, not a percent. Shares always print up to one decimal (72.8%).' },
+    },
+    example: { type: 'gauge', props: { value: 75, max: 100, label: 'Capacity', height: 240 } },
+};

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

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

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

@@ -0,0 +1,20 @@
+export const glassCardEntry = {
+    type: 'glass-card',
+    category: 'layout',
+    description: 'Glass-morphism container with customizable blur, opacity, and tint. Use for premium overlays.',
+    props: {
+        title: { type: 'string', required: false, description: 'Card title.' },
+        description: { type: 'string', required: false, description: 'Card description.' },
+        opacity: { type: 'number', required: false, description: 'Background opacity 0-100. Default 38.' },
+        blur: { type: 'number', required: false, description: 'Blur radius in px. Default 8.' },
+        tint: { type: 'string', required: false, description: 'Tint color hex. Default #000000.' },
+        borderGlow: { type: 'boolean', required: false, description: 'Enable reflex border glow. Default true.' },
+    },
+    example: {
+        type: 'glass-card',
+        props: { title: 'Pro tier', opacity: 40, blur: 12 },
+        children: [
+            { type: 'text', props: { text: '$48/month' } },
+        ],
+    },
+};

package/dist/manifest/entries/glyph-grid.d.ts

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

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

@@ -0,0 +1,19 @@
+export const glyphGridEntry = {
+    type: 'glyph-grid',
+    category: 'display',
+    staticSafe: true,
+    description: 'N×N matrix of cells lit per a bitmap pattern: a 2D brightness array or a named glyph. Lit cells take the accent color with a subtle pulse (frozen under reduced-motion). Pure CSS, SSR-safe.',
+    props: {
+        pattern: { type: 'number[][]', required: false, description: '2D brightness grid (0 = unlit, 1..3 = lit intensity).' },
+        glyph: { type: '"n1" | "nerve" | "paw" | "wave" | "check" | "block"', required: false, description: 'Named built-in glyph if no `pattern` given. Default "n1".' },
+        cols: { type: 'number', required: false, description: 'Override grid columns (else derived from pattern width).' },
+        rows: { type: 'number', required: false, description: 'Override grid rows.' },
+        color: { type: 'string', required: false, description: 'Lit-cell color. Default the foreground token.' },
+        cell: { type: 'number', required: false, description: 'Cell size in px. Default 14.' },
+        pulse: { type: 'boolean', required: false, description: 'Animate a subtle lit-cell pulse. Default true.' },
+    },
+    example: {
+        type: 'glyph-grid',
+        props: { glyph: 'n1', cell: 14 },
+    },
+};

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

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

package/dist/manifest/entries/grid.js

@@ -0,0 +1,19 @@
+export const gridEntry = {
+    type: 'grid',
+    category: 'layout',
+    description: 'CSS grid; even columns. Best for KPI rows and card grids. For independent column scroll, set fixed `height` + `overflow:hidden` via `style`; columns `overflow-y:auto`. `max-height` does NOT work.',
+    props: {
+        columns: { type: 'number | string', required: false, description: 'Number of columns (number → repeat(N, 1fr)) or a raw grid-template-columns value. Defaults to 1.' },
+        rows: { type: 'number | string', required: false, description: 'Optional number of rows or grid-template-rows value.' },
+        gap: { type: 'number | string', required: false, description: 'Gap between cells. Number → tailwind spacing units (4px multiplier); string → raw CSS gap (e.g. "12px").' },
+    },
+    example: {
+        type: 'grid',
+        props: { columns: 3, gap: '12px' },
+        children: [
+            { type: 'metric', props: { label: 'Users', value: 1240 } },
+            { type: 'metric', props: { label: 'MRR', value: '$48k' } },
+            { type: 'metric', props: { label: 'Churn', value: '2.1%' } },
+        ],
+    },
+};

package/dist/manifest/entries/growth-projection.d.ts

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

package/dist/manifest/entries/growth-projection.js

@@ -0,0 +1,36 @@
+export const growthProjectionEntry = {
+    type: 'growth-projection',
+    category: 'composite',
+    staticSafe: true,
+    description: 'Savings growth from 4 numbers: initial, deposit (a month), rate (% a year), years. Widget computes chart, yearly table, totals; sliders retune. Bind deposit.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "Savings growth".' },
+        subtitle: { type: 'string', required: false, description: 'One line under the title.' },
+        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 final balance leads.' },
+        currency: { type: 'string', required: false, description: 'ISO 4217 code. Default "USD". Never put a symbol in the numbers.' },
+        initial: { type: 'number', required: false, description: 'Starting balance. Default 0. For a lump sum with no deposits, set this and deposit: 0.' },
+        deposit: { type: 'number', required: true, description: 'Added at the end of every month. Write 0 for none. Two-way bind with `bind: "{state.deposit}"`.' },
+        rate: { type: 'number', required: true, description: 'Interest in percent a year: 5 means 5%, never 0.05. Capped at 100.' },
+        years: { type: 'number', required: true, description: 'How long. Fractions round to whole months. Capped at 100.' },
+        compounding: { type: '"monthly" | "yearly"', required: false, description: 'Default "monthly". "yearly" credits interest once a year.' },
+        goal: { type: 'number', required: false, description: 'Target balance: draws a goal line and says the year it is reached.' },
+        inflation: { type: 'number', required: false, description: 'Percent a year; adds the final balance in today\'s money.' },
+    },
+    events: {
+        on_ratechange: { type: 'EventAction', required: false, description: 'Fires with the new rate after the user changes it, e.g. { action: "set", target: "rate", value: "{event}" }.' },
+        on_yearschange: { type: 'EventAction', required: false, description: 'Fires with the new years after the user changes them.' },
+    },
+    example: {
+        type: 'growth-projection',
+        bind: '{state.deposit}',
+        props: {
+            title: 'Savings growth',
+            currency: 'USD',
+            initial: 0,
+            rate: 5,
+            years: 10,
+            compounding: 'monthly',
+            goal: 50000,
+        },
+    },
+};

package/dist/manifest/entries/habit-tracker.d.ts

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