@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/manifest/entries/memory-match.js

@@ -0,0 +1,39 @@
+export const memoryMatchEntry = {
+    type: 'memory-match',
+    category: 'composite',
+    description: 'Card-flip pairs game: pairs[{id, a, b}] (6 to 12), each side text, one emoji or "icon:<key>". Moves, time, best, win screen. Bind value; on_complete {moves, seconds}.',
+    props: {
+        title: { type: 'string', required: false, description: 'Theme of the game, e.g. "Spanish animals".' },
+        pairs: {
+            type: 'Array<{ id: string; a: string; b: string }>',
+            required: true,
+            description: '6 to 12 pairs (more than 12 are dropped). `a` and `b` are the two cards that match: plain text (a word and its translation), a single emoji, or "icon:<key>" with a key from the data icon maps (coffee, flight, train, car, home, food, fish, bread, cheese, camera, wifi, ...). An unknown key shows as its text, so prefer emoji for pictures.',
+        },
+        columns: { type: 'number', required: false, description: 'Grid columns. Default: auto by card count (4 up to 16 cards, then 5, then 6).' },
+        time_limit_s: { type: 'number', required: false, description: 'Optional time limit in seconds; when it runs out the game ends. No limit by default.' },
+        value: {
+            type: '{ moves: number; matched: string[]; completed: boolean; seconds: number }',
+            required: false,
+            description: 'The game so far, written by the widget on each move. `matched` lists pair ids. Bind with `bind: "{state.game}"` to show it elsewhere.',
+        },
+        sound: { type: 'boolean', required: false, description: 'Quiet cues for a pair found and a game won. Default true; false mutes this widget.' },
+    },
+    events: {
+        on_complete: { type: 'EventAction', required: false, description: 'Fired once when every pair is matched, with { moves, seconds }.' },
+    },
+    example: {
+        type: 'memory-match',
+        bind: '{state.game}',
+        props: {
+            title: 'Spanish animals',
+            pairs: [
+                { id: 'dog', a: 'perro', b: '🐶' },
+                { id: 'cat', a: 'gato', b: '🐱' },
+                { id: 'horse', a: 'caballo', b: '🐴' },
+                { id: 'bird', a: 'pájaro', b: '🐦' },
+                { id: 'fish', a: 'pez', b: '🐟' },
+                { id: 'cow', a: 'vaca', b: '🐮' },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/mention.js

@@ -0,0 +1,15 @@
+export const mentionEntry = {
+    type: 'mention',
+    category: 'display',
+    description: 'Inline @-mention pill with optional hover card showing profile details.',
+    props: {
+        name: { type: 'string', required: true, description: 'Username (@ added automatically).' },
+        displayName: { type: 'string', required: false, description: 'Full name shown in hover card.' },
+        avatar: { type: 'string', required: false, description: 'Avatar URL.' },
+        role: { type: 'string', required: false, description: 'User role in hover card.' },
+        bio: { type: 'string', required: false, description: 'Bio text in hover card.' },
+        href: { type: 'string', required: false, description: 'Profile link URL.' },
+        plain: { type: 'boolean', required: false, description: 'Skip hover card; render plain pill only.' },
+    },
+    example: { type: 'mention', props: { name: 'alice', displayName: 'Alice Chen', role: 'Product Designer', href: 'https://example.com/alice' } },
+};

package/dist/manifest/entries/menu-order.d.ts

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

package/dist/manifest/entries/menu-order.js

@@ -0,0 +1,48 @@
+export const menuOrderEntry = {
+    type: 'menu-order',
+    category: 'composite',
+    staticSafe: false,
+    description: 'Order from a menu in stages: browse, customise, details, review. items[] of {product_id, name, price, groups?}; featured {id, reason}; preset [{id, qty}]. Binds cart; emits on_checkout.',
+    props: {
+        title: { type: 'string', required: false, description: 'Restaurant or menu name.' },
+        subtitle: { type: 'string', required: false, description: 'One line under the title (hours, area).' },
+        verdict: { type: '{ text: string; status?: "good" | "warn" | "bad" | "info" | "neutral" }', required: false, description: 'One sentence shown first, at most 140 chars.' },
+        currency: { type: 'string', required: false, description: 'ISO 4217 code. Default USD. Never a symbol.' },
+        items: {
+            type: 'Array<{ id?: string; product_id?: string; name?: string; description?: string; price?: number; image?: string; category?: string; tags?: string[]; kind?: "main" | "side" | "drink" | "dessert" | "product"; featured?: boolean; groups?: Array<{ id: string; name: string; choose: "one" | "many"; required?: boolean; max?: number; icon?: string; options: Array<{ id: string; name: string; price_delta?: number; icon?: string }> }> }>',
+            required: true,
+            description: 'Menu items. Write product_id (and name for streaming); the server fills price, image and groups. Items without product_id are display only. Rows use kind, never type.',
+        },
+        featured: { type: '{ id: string; reason?: string }', required: false, description: 'The pick for this visitor, by id or product_id, with a short reason.' },
+        preset: { type: 'Array<{ id: string; qty: number }>', required: false, description: 'Pre-fills quantities ("two burgers").' },
+        fulfilment: { type: 'Array<"pickup" | "delivery">', required: false, description: 'Server-filled. Default ["pickup"].' },
+        fee: { type: '{ delivery?: number }', required: false, description: 'Server-filled delivery fee.' },
+        checkout: { type: 'boolean', required: false, description: 'Server-filled. Ordering controls show only when true. Default false (display only).' },
+        cart: {
+            type: '{ lines: Array<{ product_id: string; name: string; qty: number; option_ids: string[]; unit_price: number }>; fulfilment?: "pickup" | "delivery"; total?: number }',
+            required: false,
+            description: 'Bindable. The lines so far (qty 1 to 20, at most 30 lines), never the customer. Totals are display only; the store reprices.',
+        },
+    },
+    events: {
+        on_checkout: {
+            type: 'EventAction | EventAction[]',
+            required: false,
+            description: 'Server-wired. Fires with { lines, fulfilment, customer: { name, email, phone, address? }, total } when the visitor continues to payment. Name, email and phone are required, plus the address for delivery.',
+        },
+    },
+    example: {
+        type: 'menu-order',
+        props: {
+            title: 'Copper Griddle',
+            currency: 'USD',
+            featured: { id: 'mushroom-swiss', reason: 'Vegetarian and under $13.' },
+            items: [
+                { product_id: 'smash-burger', name: 'Double Smash Burger', kind: 'main', category: 'Burgers' },
+                { product_id: 'mushroom-swiss', name: 'Mushroom Swiss', kind: 'main', category: 'Burgers' },
+                { product_id: 'shoestring-fries', name: 'Shoestring Fries', kind: 'side', category: 'Sides' },
+                { product_id: 'malted-shake', name: 'Malted Vanilla Shake', kind: 'dessert', category: 'Shakes' },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/metric.js

@@ -0,0 +1,16 @@
+export const metricEntry = {
+    type: 'metric',
+    category: 'display',
+    description: 'Single KPI tile: large value with label and optional trend badge and description.',
+    props: {
+        label: { type: 'string', required: true, description: 'Short metric name shown above the value.' },
+        value: { type: 'string | number', required: true, description: 'The number or formatted string to display.' },
+        trend: { type: 'string', required: false, description: 'Change badge text, e.g. "+12%" or "-3". Leading +/- drives badge color (green/red).' },
+        description: { type: 'string', required: false, description: 'Caption below the value. Only shown in default variant.' },
+        variant: { type: '"default" | "compact" | "horizontal"', required: false, description: 'Layout style. Default "default".' },
+    },
+    example: {
+        type: 'metric',
+        props: { label: 'MRR', value: '$48.2k', trend: '+8.1%', description: 'vs. last month' },
+    },
+};

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

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

package/dist/manifest/entries/modal.js

@@ -0,0 +1,56 @@
+export const modalEntry = {
+    type: 'modal',
+    category: 'layout',
+    description: 'Dialog overlay with controlled open state, header, and dismissal. Sizes: sm/md/lg.',
+    props: {
+        value: { type: 'boolean', required: false, description: 'Open state. Use with bind for two-way control.' },
+        title: { type: 'string', required: false, description: 'Modal header title.' },
+        description: { type: 'string', required: false, description: 'Modal header description.' },
+        size: { type: '"sm" | "md" | "lg"', required: false, description: 'Width constraint. Default "md".' },
+    },
+    example: {
+        type: 'modal',
+        props: { value: false, title: 'Delete project?', description: 'This cannot be undone.', size: 'sm' },
+        children: [
+            { type: 'text', props: { text: 'All data will be permanently removed.' } },
+        ],
+    },
+    pocket: {
+        state: { settingsOpen: false, theme: 'light' },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                {
+                    type: 'button',
+                    props: { label: 'Open settings' },
+                    on_click: { action: 'open', target: 'settingsOpen' },
+                },
+                {
+                    type: 'modal',
+                    props: { title: 'Settings', description: 'Personalize your experience.', size: 'sm' },
+                    bind: 'state.settingsOpen',
+                    children: [
+                        {
+                            type: 'radio-group',
+                            props: {
+                                label: 'Theme',
+                                options: [
+                                    { value: 'light', label: 'Light' },
+                                    { value: 'dark', label: 'Dark' },
+                                    { value: 'system', label: 'System' },
+                                ],
+                            },
+                            bind: 'state.theme',
+                        },
+                        {
+                            type: 'button',
+                            props: { label: 'Done' },
+                            on_click: { action: 'set', target: 'settingsOpen', value: false },
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/model-viewer.d.ts

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

package/dist/manifest/entries/model-viewer.js

@@ -0,0 +1,86 @@
+export const modelViewerEntry = {
+    type: 'model-viewer',
+    category: 'media',
+    description: 'A 3D model the reader can orbit: a built-in model by `asset` id, or a GLB/GLTF `src`. Optional numbered labels on named points of the model.',
+    props: {
+        asset: {
+            type: 'string',
+            required: false,
+            description: 'Built-in model id from the catalog, e.g. "plane". Wins over `src`. An unknown id shows a quiet "not available" box.',
+        },
+        src: {
+            type: 'string',
+            required: false,
+            description: 'GLB or GLTF model URL, when no `asset` fits.',
+        },
+        annotations: {
+            type: 'Array<{ anchor?: string; position?: string; normal?: string; label?: string; note?: string }>',
+            required: false,
+            description: "Up to 12 numbered labels. On an `asset`, `anchor` names one of its points (unknown anchors are dropped); `label` defaults to the anchor's label. Raw `position` ('x y z' metres) only for `src` models. Plain text: label up to 40 chars, note up to 280.",
+        },
+        focus: {
+            type: 'string',
+            required: false,
+            description: 'Anchor whose note is open at start.',
+        },
+        poster: {
+            type: 'string',
+            required: false,
+            description: 'Image shown before the model loads.',
+        },
+        alt: {
+            type: 'string',
+            required: false,
+            description: 'Accessible description of the model.',
+        },
+        cameraControls: {
+            type: 'boolean',
+            required: false,
+            description: 'Allow mouse / touch orbit and zoom. Default true.',
+        },
+        autoRotate: {
+            type: 'boolean',
+            required: false,
+            description: 'Slowly rotate the model when idle. Default false.',
+        },
+        ar: {
+            type: 'boolean',
+            required: false,
+            description: 'Enable the "View in your space" AR affordance where supported.',
+        },
+        environmentImage: {
+            type: 'string',
+            required: false,
+            description: 'URL of an HDR / image-based lighting environment.',
+        },
+        exposure: {
+            type: 'number',
+            required: false,
+            description: 'Scene exposure (1 = neutral).',
+        },
+        shadowIntensity: {
+            type: 'number',
+            required: false,
+            description: 'Strength of the contact shadow under the model (0 to 1). Default 1.',
+        },
+    },
+    events: {
+        on_select: {
+            type: 'EventAction | EventAction[]',
+            required: false,
+            description: 'Fires with { anchor, label } when the reader opens a label by its pin or its line in the list.',
+        },
+    },
+    example: {
+        type: 'model-viewer',
+        props: {
+            src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
+            alt: 'A 3D model of an astronaut',
+            cameraControls: true,
+            annotations: [
+                { position: '0 1.75 0.1', label: 'Helmet', note: 'Holds air at a steady pressure.' },
+                { position: '0.3 1.1 0.15', label: 'Chest pack' },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/multi-select.d.ts

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

package/dist/manifest/entries/multi-select.js

@@ -0,0 +1,57 @@
+export const multiSelectEntry = {
+    type: 'multi-select',
+    category: 'input',
+    description: 'Multi-select dropdown with chip display and optional tag creation.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path for selected values array, e.g. "{state.tags}".' },
+        value: { type: '(string | number)[]', required: false, description: 'Selected values.' },
+        placeholder: { type: 'string', required: false, description: 'Trigger placeholder.' },
+        searchPlaceholder: { type: 'string', required: false, description: 'Search input placeholder.' },
+        emptyText: { type: 'string', required: false, description: 'Empty-results text.' },
+        options: { type: 'Array<{ value: string | number; label: string; description?: string; disabled?: boolean }>', required: true, description: 'Options to choose from.' },
+        creatable: { type: 'boolean', required: false, description: 'Allow creating new tags via Enter.' },
+        maxChips: { type: 'number', required: false, description: 'Max chips before "+N more". Default 3.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable multi-select.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on selection change.' },
+    },
+    example: {
+        type: 'multi-select',
+        props: {
+            label: 'Tags',
+            options: [
+                { value: 'feature', label: 'Feature' },
+                { value: 'bug', label: 'Bug' },
+                { value: 'enhancement', label: 'Enhancement' },
+                { value: 'docs', label: 'Documentation' },
+            ],
+            bind: '{state.tags}',
+            creatable: true,
+        },
+    },
+    pocket: {
+        state: { tags: ['urgent'] },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                {
+                    type: 'multi-select',
+                    props: {
+                        label: 'Tags',
+                        options: [
+                            { value: 'urgent', label: 'Urgent' },
+                            { value: 'bug', label: 'Bug' },
+                            { value: 'feature', label: 'Feature' },
+                            { value: 'docs', label: 'Docs' },
+                        ],
+                    },
+                    bind: 'state.tags',
+                },
+                { type: 'text', props: { text: 'Selected: {state.tags.length} tag(s)' } },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/music-player.d.ts

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

package/dist/manifest/entries/music-player.js

@@ -0,0 +1,33 @@
+export const musicPlayerEntry = {
+    type: 'music-player',
+    category: 'composite',
+    description: 'Music player whose sounds are generated in the browser (no files or URLs): a playlist of preset tracks with play, skip, shuffle, repeat, seek and volume. Bind value.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "Focus mix". Up to 80 characters.' },
+        tracks: {
+            type: 'Array<{ id?: string; title: string; artist?: string; sound: "rain" | "brown-noise" | "white-noise" | "ocean" | "forest" | "lofi" | "drone" | "piano"; minutes?: number; color?: "blue" | "violet" | "teal" | "green" | "amber" | "rose" | "orange" | "slate" }>',
+            required: true,
+            description: 'Up to 30 tracks. `sound` picks the generated preset (unknown falls back to drone); `minutes` is the track length, 1 to 60, default 3; `color` tints the cover.',
+        },
+        autoplay: { type: 'boolean', required: false, description: 'Highlights Play. Sound still starts only when the visitor presses it.' },
+        volume: { type: 'number', required: false, description: 'Starting volume, 0 to 1. Default 0.7.' },
+        value: {
+            type: '{ index: number; playing: boolean; shuffle: boolean; repeat: boolean }',
+            required: false,
+            description: 'Two-way bind with `bind: "{state.music}"`. Written on play, pause, track change and toggles. A restored value never starts sound.',
+        },
+    },
+    example: {
+        type: 'music-player',
+        bind: '{state.music}',
+        props: {
+            title: 'Focus mix',
+            tracks: [
+                { title: 'Soft rain', sound: 'rain', minutes: 10 },
+                { title: 'Late night keys', artist: 'Studio', sound: 'lofi', minutes: 4, color: 'violet' },
+                { title: 'Still water', sound: 'ocean', minutes: 8 },
+                { title: 'Slow piano', sound: 'piano', minutes: 5 },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/navbar.js

@@ -0,0 +1,17 @@
+export const navbarEntry = {
+    type: 'navbar',
+    category: 'marketing',
+    staticSafe: true,
+    description: 'Marketing top navigation: brand, links, and an optional CTA button. Sticky-capable. Use at the top of a landing page.',
+    props: {
+        brand: { type: 'string', required: false, description: 'Brand / site name.' },
+        links: { type: 'Array<{ label: string; href: string }>', required: false, description: 'Nav links.' },
+        cta: { type: 'string', required: false, description: 'CTA button label.' },
+        ctaHref: { type: 'string', required: false, description: 'CTA destination.' },
+        sticky: { type: 'boolean', required: false, description: 'Stick to the top on scroll. Default false.' },
+    },
+    example: {
+        type: 'navbar',
+        props: { brand: 'Bright Smile Dental', links: [{ label: 'Services', href: '#services' }, { label: 'About', href: '#about' }], cta: 'Book now', ctaHref: '#book', sticky: true },
+    },
+};

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

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

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

@@ -0,0 +1,14 @@
+export const newsCardEntry = {
+    type: 'news-card',
+    category: 'research',
+    description: 'News article card with headline, source, timestamp, sentiment tag, and optional thumbnail.',
+    props: {
+        headline: { type: 'string', required: true, description: 'Article headline.' },
+        source: { type: 'string', required: false, description: 'Publisher name.' },
+        time: { type: 'string', required: false, description: 'Time (relative or absolute).' },
+        sentiment: { type: '"bullish" | "bearish" | "neutral"', required: false, description: 'Sentiment tag.' },
+        image: { type: 'string', required: false, description: 'Thumbnail URL.' },
+        url: { type: 'string', required: false, description: 'Article URL.' },
+    },
+    example: { type: 'news-card', props: { headline: 'Fed Raises Interest Rates to Combat Inflation', source: 'Financial Times', time: '2 hours ago', sentiment: 'bearish', url: 'https://ft.com/article' } },
+};

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

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

package/dist/manifest/entries/newsletter.js

@@ -0,0 +1,20 @@
+export const newsletterEntry = {
+    type: 'newsletter',
+    category: 'marketing',
+    staticSafe: false,
+    description: 'Email-capture band: heading, subtext, email field, submit button. Aliased as email-capture. Emits the entered email via on_submit.',
+    props: {
+        heading: { type: 'string', required: false, description: 'Headline above the field.' },
+        subtext: { type: 'string', required: false, description: 'Supporting copy.' },
+        placeholder: { type: 'string', required: false, description: 'Input placeholder. Default "you@example.com".' },
+        button: { type: 'string', required: false, description: 'Submit button label. Default "Subscribe".' },
+    },
+    events: {
+        on_submit: { type: 'EventHandler', required: false, description: 'Fires with the entered email on submit.' },
+    },
+    example: {
+        type: 'newsletter',
+        props: { heading: 'Stay in the loop', subtext: 'Tips and offers, no spam.', placeholder: 'you@email.com', button: 'Subscribe' },
+        on_submit: { action: 'emit', target: 'subscribe', value: '{state.email}' },
+    },
+};

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

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

package/dist/manifest/entries/notes.js

@@ -0,0 +1,28 @@
+export const notesEntry = {
+    type: 'notes',
+    category: 'composite',
+    description: 'Notepad app: the visitor writes notes straight in, #tags become filter chips, pin, edit, delete with undo. Seed notes[{title, text, tags}]. Bind value.',
+    props: {
+        title: { type: 'string', required: false, description: 'e.g. "Ideas".' },
+        notes: {
+            type: 'Array<{ id?: string; title?: string; text: string; tags?: string[]; pinned?: boolean; color?: "plain" | "yellow" | "blue" | "green" | "pink" }>',
+            required: false,
+            description: 'Seed notes, plain text, up to 50 (title 80 chars, text 2000). Tags are single words without "#". Leave out for a blank pad.',
+        },
+        tags: { type: 'string[]', required: false, description: 'Suggested tags shown as chips, e.g. ["idea", "todo"].' },
+        placeholder: { type: 'string', required: false, description: 'The writing line prompt. Default "Write a note…".' },
+        sound: { type: 'boolean', required: false, description: 'A very quiet pop when a note is saved. Default true; false mutes this widget.' },
+    },
+    example: {
+        type: 'notes',
+        bind: '{state.notes}',
+        props: {
+            title: 'Ideas',
+            tags: ['idea', 'todo', 'read'],
+            notes: [
+                { id: 'n1', title: 'Weekend market stall', text: 'Test a small batch of lemon cookies first.\nAsk Mia about the corner spot.', tags: ['idea'], pinned: true, color: 'yellow' },
+                { id: 'n2', title: 'Books to pick up', text: 'The Overstory, A Psalm for the Wild-Built', tags: ['read'] },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/notification-center.d.ts

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

package/dist/manifest/entries/notification-center.js

@@ -0,0 +1,21 @@
+export const notificationCenterEntry = {
+    type: 'notification-center',
+    category: 'overlay',
+    description: 'Notification inbox with read tracking, unread badge, mark-all-read, and optional inline mode.',
+    props: {
+        value: { type: 'Array<{ id: string | number; title: string; description?: string; severity?: "info" | "success" | "warning" | "destructive"; read?: boolean }>', required: true, description: 'Notifications.' },
+        title: { type: 'string', required: false, description: 'Panel title.' },
+        emptyText: { type: 'string', required: false, description: 'Empty-state text.' },
+        inline: { type: 'boolean', required: false, description: 'Hide bell trigger; render inline.' },
+    },
+    example: {
+        type: 'notification-center',
+        props: {
+            title: 'Notifications',
+            value: [
+                { id: 1, title: 'Document shared', description: 'Sarah shared a document with you', severity: 'info', read: false },
+                { id: 2, title: 'Payment received', description: 'Invoice #2024-001 paid', severity: 'success', read: true },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/number-input.js

@@ -0,0 +1,30 @@
+export const numberInputEntry = {
+    type: 'number-input',
+    category: 'input',
+    description: 'Numeric input with increment/decrement buttons and min/max/step constraints.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path, e.g. "{state.qty}".' },
+        value: { type: 'number | null', required: false, description: 'Current value.' },
+        min: { type: 'number', required: false, description: 'Minimum value.' },
+        max: { type: 'number', required: false, description: 'Maximum value.' },
+        step: { type: 'number', required: false, description: 'Step increment. Default 1.' },
+        placeholder: { type: 'string', required: false, description: 'Placeholder text.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable input.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on value change.' },
+    },
+    example: { type: 'number-input', props: { label: 'Quantity', min: 1, max: 100, step: 1, bind: '{state.quantity}' } },
+    pocket: {
+        state: { quantity: 1 },
+        ui: {
+            type: 'flex',
+            props: { direction: 'row', gap: '12px', align: 'center' },
+            children: [
+                { type: 'number-input', props: { label: 'Quantity', min: 1, max: 99 }, bind: 'state.quantity' },
+                { type: 'text', props: { text: 'Subtotal: ${state.quantity * 12}' } },
+            ],
+        },
+    },
+};

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

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