@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/manifest/entries/color-picker.js

@@ -0,0 +1,35 @@
+export const colorPickerEntry = {
+    type: 'color-picker',
+    category: 'input',
+    description: 'Color picker with preset palette and free-form hex input.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path for hex color.' },
+        value: { type: 'string', required: false, description: 'Hex color string.' },
+        presets: { type: 'string[]', required: false, description: 'Preset hex colors.' },
+        showInput: { type: 'boolean', required: false, description: 'Show hex text input.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable picker.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on color change.' },
+    },
+    example: { type: 'color-picker', props: { label: 'Theme color', value: '#1877F2', showInput: true, bind: '{state.themeColor}' } },
+    pocket: {
+        state: { themeColor: '#1877F2' },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                { type: 'color-picker', props: { label: 'Theme color', showInput: true, presets: ['#1877F2', '#8b5cf6', '#22c55e', '#f59e0b', '#ef4444'] }, bind: 'state.themeColor' },
+                {
+                    type: 'card',
+                    style: { 'background-color': '{state.themeColor}', height: '48px' },
+                    props: { padding: 'sm' },
+                    children: [
+                        { type: 'text', props: { text: 'Preview: {state.themeColor}' } },
+                    ],
+                },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/combobox.js

@@ -0,0 +1,48 @@
+export const comboboxEntry = {
+    type: 'combobox',
+    category: 'input',
+    description: 'Searchable dropdown with keyboard navigation and optional descriptions per option.',
+    props: {
+        label: { type: 'string', required: false, description: 'Label text.' },
+        bind: { type: 'string', required: false, description: 'Two-way state path, e.g. "{state.selectedUser}".' },
+        value: { type: 'string | number | null', required: false, description: 'Selected value.' },
+        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.' },
+        disabled: { type: 'boolean', required: false, description: 'Disable combobox.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on selection change.' },
+    },
+    example: {
+        type: 'combobox',
+        props: {
+            label: 'Assignee',
+            options: [
+                { value: 1, label: 'Alice', description: 'Admin' },
+                { value: 2, label: 'Bob', description: 'Editor' },
+                { value: 3, label: 'Carol', description: 'Viewer' },
+            ],
+            bind: '{state.assigneeId}',
+            searchPlaceholder: 'Search users…',
+        },
+    },
+    pocket: {
+        state: { assigneeId: null },
+        ui: {
+            type: 'combobox',
+            props: {
+                label: 'Assignee',
+                options: [
+                    { value: 1, label: 'Alice', description: 'Admin' },
+                    { value: 2, label: 'Bob', description: 'Editor' },
+                    { value: 3, label: 'Carol', description: 'Viewer' },
+                ],
+                searchPlaceholder: 'Search users…',
+            },
+            bind: 'state.assigneeId',
+            on_change: { action: 'toast', message: 'Assigned', variant: 'success' },
+        },
+    },
+};

package/dist/manifest/entries/command-palette.d.ts

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

package/dist/manifest/entries/command-palette.js

@@ -0,0 +1,55 @@
+export const commandPaletteEntry = {
+    type: 'command-palette',
+    category: 'overlay',
+    description: 'Searchable palette over commands and content: grouped sections, fuzzy search over labels, aliases and menu paths, recents, global hotkey (default ⌘K).',
+    props: {
+        value: { type: 'boolean', required: false, description: 'Open state. Use with bind.' },
+        commands: { type: 'Array<{ id: string; label: string; group?: string; aliases?: string[]; keywords?: string[]; menu?: string; description?: string; shortcut?: string; icon?: string; thumb?: string; disabled?: boolean }>', required: true, description: 'Items: commands and content. group makes sections; thumb is an image URL.' },
+        groups: { type: 'string[]', required: false, description: 'Section order by group name.' },
+        recent: { type: 'string[]', required: false, description: 'Recently used ids, shown first on an empty query.' },
+        slash: { type: 'boolean', required: false, description: 'Also open on "/" outside text fields.' },
+        limit: { type: 'number', required: false, description: 'Most rows rendered for a query. Default 50.' },
+        groupLimit: { type: 'number', required: false, description: 'Rows per section on an empty query. Default 6.' },
+        loading: { type: 'boolean', required: false, description: 'Show a Searching row (async sources).' },
+        placeholder: { type: 'string', required: false, description: 'Search input placeholder.' },
+        emptyText: { type: 'string', required: false, description: 'Empty-results text.' },
+        shortcut: { type: 'string', required: false, description: 'Global hotkey. Default "mod+k"; "" turns it off.' },
+    },
+    example: {
+        type: 'command-palette',
+        props: {
+            value: false,
+            shortcut: 'mod+k',
+            commands: [
+                { id: 'create', label: 'Create document', keywords: ['new', 'doc'], icon: 'plus', group: 'Documents' },
+                { id: 'search', label: 'Search', keywords: ['find'], icon: 'search', shortcut: 'mod+f', group: 'Navigation' },
+            ],
+        },
+    },
+    pocket: {
+        state: { paletteOpen: false },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                {
+                    type: 'button',
+                    props: { label: 'Open command palette', variant: 'secondary' },
+                    on_click: { action: 'open', target: 'paletteOpen' },
+                },
+                {
+                    type: 'command-palette',
+                    props: {
+                        shortcut: 'mod+k',
+                        commands: [
+                            { id: 'create', label: 'Create document', keywords: ['new', 'doc'], icon: 'plus', group: 'Documents' },
+                            { id: 'search', label: 'Search', keywords: ['find'], icon: 'search', shortcut: 'mod+f', group: 'Navigation' },
+                            { id: 'settings', label: 'Open settings', icon: 'settings', shortcut: 'mod+,', group: 'Navigation' },
+                        ],
+                    },
+                    bind: 'state.paletteOpen',
+                },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/comment-thread.d.ts

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

package/dist/manifest/entries/comment-thread.js

@@ -0,0 +1,27 @@
+export const commentThreadEntry = {
+    type: 'comment-thread',
+    category: 'vertical',
+    description: 'Nested comment thread with avatars, timestamps, and optional reply buttons. Supports arbitrary depth.',
+    props: {
+        comments: { type: 'Array<{ id: string | number; author: string; avatar?: string; body: string; timestamp?: string; replies?: Comment[] }>', required: true, description: 'Hierarchical comment tree.' },
+        canReply: { type: 'boolean', required: false, description: 'Show reply button. Default true.' },
+    },
+    example: {
+        type: 'comment-thread',
+        props: {
+            canReply: true,
+            comments: [
+                {
+                    id: '1',
+                    author: 'Sarah Chen',
+                    body: 'Great work on the design system!',
+                    timestamp: '2 hours ago',
+                    replies: [
+                        { id: '1a', author: 'Alex Rodriguez', body: 'Thanks Sarah! Spent a lot of time on accessibility.', timestamp: '1 hour ago' },
+                    ],
+                },
+                { id: '2', author: 'Jordan Kim', body: 'Any plans to support custom tokens?', timestamp: '45 minutes ago' },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/company-header.d.ts

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

package/dist/manifest/entries/company-header.js

@@ -0,0 +1,33 @@
+export const companyHeaderEntry = {
+    type: 'company-header',
+    category: 'research',
+    description: 'Company profile header: logo, name, ticker, exchange, price, description, sector tags, market cap.',
+    props: {
+        name: { type: 'string', required: true, description: 'Company name.' },
+        ticker: { type: 'string', required: false, description: 'Stock ticker.' },
+        exchange: { type: 'string', required: false, description: 'Exchange (NASDAQ/NYSE/etc).' },
+        description: { type: 'string', required: false, description: 'One-line description.' },
+        logo: { type: 'string', required: false, description: 'Logo image URL.' },
+        domain: { type: 'string', required: false, description: 'Domain for auto-derived logo.' },
+        tags: { type: 'string[]', required: false, description: 'Sector / industry tags.' },
+        price: { type: 'string', required: false, description: 'Current stock price.' },
+        change: { type: 'string', required: false, description: 'Price change (e.g. "+12.50").' },
+        changePercent: { type: 'string', required: false, description: 'Price change percent.' },
+        marketCap: { type: 'string', required: false, description: 'Market capitalization.' },
+    },
+    example: {
+        type: 'company-header',
+        props: {
+            name: 'Apple Inc.',
+            ticker: 'AAPL',
+            exchange: 'NASDAQ',
+            description: 'Designer and manufacturer of consumer electronics.',
+            domain: 'apple.com',
+            tags: ['Technology', 'Consumer Electronics'],
+            price: '$189.45',
+            change: '+2.35',
+            changePercent: '+1.25%',
+            marketCap: '2.95T',
+        },
+    },
+};

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

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

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

@@ -0,0 +1,81 @@
+export const comparisonLayoutEntry = {
+    type: 'comparison-layout',
+    category: 'composite',
+    description: 'Which to pick: items {id,name,price,image} compared on features {key,label,kind,better,unit}, a winner {id,reason} card, picks tags, best cells marked, price vs winner.',
+    props: {
+        title: { type: 'string', required: false, description: 'Header title.' },
+        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, e.g. "Nimbus Pro 15 if you edit video; Aero 14 for battery."',
+        },
+        currency: { type: 'string', required: false, description: 'ISO 4217 code for numeric prices. Default "USD". Never put a symbol in the data. Whole prices print without cents ($1,890).' },
+        items: {
+            type: 'Array<{ id: string; name: string; subtitle?: string; price?: number; image?: string; product_id?: string; rating?: number; actions?: EventAction | EventAction[]; learn_more?: EventAction | EventAction[]; [featureKey: string]: unknown }>',
+            required: true,
+            description: '2 to 6 items. `price` is a number; feature values are keyed by feature `key`. With `product_id` the server fills name, price and image. Per item, `actions` fires on Choose and `learn_more` on Learn more.',
+        },
+        features: {
+            type: 'Array<{ key: string; label: string; section?: string; kind?: "text" | "number" | "boolean" | "rating" | "icon" | "price" | "color"; better?: "higher" | "lower"; unit?: string; icon?: "battery" | "weight" | "display" | "cpu" | "memory" | "storage" | "camera" | "speed" | "motor" | "power" | "price" | "ports" | "wifi" | "keyboard" | "audio" | "security" | "warranty" | "size" | "rating" | "support"; highlight?: boolean }>',
+            required: false,
+            description: 'Rows, grouped into section chips by `section`. `better` marks the best numeric cell. An `icon`-kind value is one of the `icon` words (or a list of them). `highlight` puts the row on the item card. Inferred from item keys when omitted.',
+        },
+        winner: {
+            type: '{ id: string; reason: string; runner_up?: { id: string; reason: string } }',
+            required: false,
+            description: 'The best pick, shown first with its reason, photo and price; every other price shows its difference from it.',
+        },
+        picks: {
+            type: 'Array<{ id: string; label: string }>',
+            required: false,
+            description: 'At most 3 per-need tags on items, e.g. "Best for travel", "Lightest".',
+        },
+        chosen: {
+            type: 'string',
+            required: false,
+            description: 'The chosen item id. Use top-level `bind` to keep it in state (e.g. `bind: "pick"`).',
+        },
+        primaryLabel: { type: 'string', required: false, description: 'Choose button label. Default "Choose".' },
+        defaultView: { type: '"card" | "table"', required: false, description: 'View under the item cards below 720px until the visitor picks one. Default "table" (the cards above already list each item); "card" shows per-item cards. Wider always shows the table.' },
+        showDiffToggle: { type: 'boolean', required: false, description: 'Show the "Differences only" filter. Default true.' },
+    },
+    events: {
+        on_choose: {
+            type: 'EventAction | EventAction[]',
+            required: false,
+            description: 'Fires with { id, name, product_id? } when the visitor picks an item.',
+        },
+    },
+    example: {
+        type: 'comparison-layout',
+        bind: 'pick',
+        props: {
+            title: 'Three laptops for a designer who travels',
+            verdict: { text: 'Aero 14 for battery and weight; Nimbus Pro 15 if you edit video.', status: 'good' },
+            currency: 'USD',
+            winner: {
+                id: 'aero-14',
+                reason: 'Lightest of the three with the longest battery, and the lowest price.',
+                runner_up: { id: 'vertex-x13', reason: 'Same battery and a better keyboard, for $200 more.' },
+            },
+            picks: [
+                { id: 'nimbus-pro-15', label: 'Best for video' },
+                { id: 'vertex-x13', label: 'Best keyboard' },
+            ],
+            items: [
+                { id: 'aero-14', name: 'Aero 14', subtitle: '14-inch ultralight', price: 1099, battery: 18, weight: 1.2, memory: 16, gpu: false, rating: 4.6, extras: ['wifi', 'ports'] },
+                { id: 'nimbus-pro-15', name: 'Nimbus Pro 15', subtitle: '15-inch creator', price: 1799, battery: 11, weight: 1.9, memory: 32, gpu: true, rating: 4.4, extras: ['display', 'audio'] },
+                { id: 'vertex-x13', name: 'Vertex X13', subtitle: '13-inch business', price: 1299, battery: 18, weight: 1.3, memory: 16, gpu: false, rating: 4.5, extras: ['keyboard', 'security'] },
+            ],
+            features: [
+                { key: 'battery', label: 'Battery', section: 'Everyday', kind: 'number', unit: 'h', better: 'higher', icon: 'battery', highlight: true },
+                { key: 'weight', label: 'Weight', section: 'Everyday', kind: 'number', unit: 'kg', better: 'lower', icon: 'weight', highlight: true },
+                { key: 'extras', label: 'Stands out for', section: 'Everyday', kind: 'icon' },
+                { key: 'memory', label: 'Memory', section: 'Performance', kind: 'number', unit: 'GB', better: 'higher', icon: 'memory' },
+                { key: 'gpu', label: 'Discrete GPU', section: 'Performance', kind: 'boolean' },
+                { key: 'rating', label: 'Owner rating', section: 'Reviews', kind: 'rating', better: 'higher', icon: 'rating' },
+            ],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,25 @@
+export const comparisonTableEntry = {
+    type: 'comparison-table',
+    category: 'display',
+    description: 'Feature comparison table. Cells accept boolean (renders ✓/✗), string, or number.',
+    props: {
+        label: { type: 'string', required: false, description: 'First column header. Default "Feature".' },
+        columns: { type: 'Array<{ key: string; label: string; highlight?: boolean }>', required: true, description: 'Column definitions.' },
+        rows: { type: 'Array<{ feature: string; [key: string]: unknown }>', required: true, description: 'Table rows. `feature` is the row label; remaining keys map to column keys.' },
+    },
+    example: {
+        type: 'comparison-table',
+        props: {
+            label: 'Feature',
+            columns: [
+                { key: 'free', label: 'Free' },
+                { key: 'pro', label: 'Pro', highlight: true },
+            ],
+            rows: [
+                { feature: 'Users', free: 1, pro: 'Unlimited' },
+                { feature: 'API access', free: false, pro: true },
+                { feature: 'Support', free: 'Email', pro: '24/7' },
+            ],
+        },
+    },
+};

package/dist/manifest/entries/confirm-dialog.d.ts

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

package/dist/manifest/entries/confirm-dialog.js

@@ -0,0 +1,50 @@
+export const confirmDialogEntry = {
+    type: 'confirm-dialog',
+    category: 'overlay',
+    description: 'Auto-mounted confirmation dialog. Renders pending confirm actions invoked from elsewhere in the spec.',
+    props: {},
+    example: { type: 'confirm-dialog', props: {} },
+    pocket: {
+        state: {
+            projects: [
+                { id: 1, name: 'Atlas migration' },
+                { id: 2, name: 'Onboarding redesign' },
+            ],
+        },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '8px' },
+            children: [
+                { type: 'confirm-dialog' },
+                {
+                    type: 'each',
+                    items: 'state.projects',
+                    item_as: 'project',
+                    children: [
+                        {
+                            type: 'flex',
+                            props: { gap: '12px', align: 'center', justify: 'between' },
+                            children: [
+                                { type: 'text', props: { text: '{project.name}' } },
+                                {
+                                    type: 'button',
+                                    props: { label: 'Delete', variant: 'destructive', size: 'sm' },
+                                    on_click: {
+                                        action: 'confirm',
+                                        title: 'Delete {project.name}?',
+                                        message: 'This cannot be undone.',
+                                        confirm_label: 'Delete',
+                                        on_confirm: [
+                                            { action: 'remove', target: 'projects', value: '{project}' },
+                                            { action: 'toast', message: 'Deleted', variant: 'success' },
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/container.js

@@ -0,0 +1,13 @@
+export const containerEntry = {
+    type: 'container',
+    category: 'layout',
+    description: 'Simple div wrapper for grouping children. Use for basic structural grouping without semantic meaning.',
+    props: {},
+    example: {
+        type: 'container',
+        props: {},
+        children: [
+            { type: 'text', props: { text: 'Wrapped content' } },
+        ],
+    },
+};

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

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

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

@@ -0,0 +1,22 @@
+export const contextMenuEntry = {
+    type: 'context-menu',
+    category: 'overlay',
+    description: 'Right-click context menu with items, icons, shortcuts, and separators.',
+    props: {
+        items: { type: 'Array<{ label?: string; icon?: string; value?: unknown; variant?: string; disabled?: boolean; type?: "separator" | "item"; shortcut?: string }>', required: true, description: 'Menu items.' },
+        trigger: { type: 'string | UISpec', required: false, description: 'Right-clickable trigger.' },
+    },
+    example: {
+        type: 'context-menu',
+        props: {
+            trigger: 'Right-click row',
+            items: [
+                { label: 'Cut', icon: 'scissors', value: 'cut', shortcut: '⌘X' },
+                { label: 'Copy', icon: 'copy', value: 'copy', shortcut: '⌘C' },
+                { label: 'Paste', icon: 'clipboard', value: 'paste', shortcut: '⌘V' },
+                { type: 'separator' },
+                { label: 'Delete', icon: 'trash-2', value: 'delete', variant: 'destructive' },
+            ],
+        },
+    },
+};

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

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

package/dist/manifest/entries/copy.js

@@ -0,0 +1,11 @@
+export const copyEntry = {
+    type: 'copy',
+    category: 'display',
+    description: 'Copy-to-clipboard button with visual confirmation.',
+    props: {
+        value: { type: 'string', required: true, description: 'Text to copy.' },
+        label: { type: 'string', required: false, description: 'Button label.' },
+        size: { type: '"sm" | "md"', required: false, description: 'Button size.' },
+    },
+    example: { type: 'copy', props: { value: 'npm install @ripple-ui/svelte', label: 'Copy install command' } },
+};

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

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

package/dist/manifest/entries/cta.js

@@ -0,0 +1,17 @@
+export const ctaEntry = {
+    type: 'cta',
+    category: 'marketing',
+    staticSafe: true,
+    description: 'Call-to-action band: a headline, optional subtext, and one button. Aliased as call-to-action. Use to drive the page conversion.',
+    props: {
+        headline: { type: 'string', required: true, description: 'The primary line.' },
+        subtext: { type: 'string', required: false, description: 'Supporting copy.' },
+        button: { type: 'string', required: false, description: 'Button label.' },
+        href: { type: 'string', required: false, description: 'Button destination.' },
+        align: { type: '"left" | "center"', required: false, description: 'Content alignment. Default "center".' },
+    },
+    example: {
+        type: 'cta',
+        props: { headline: 'Ready for a brighter smile?', subtext: 'Book your first visit in under a minute.', button: 'Book now', href: '#book', align: 'center' },
+    },
+};

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

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

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

@@ -0,0 +1,17 @@
+export const dashboardSlotEntry = {
+    type: 'dashboard-slot',
+    category: 'layout',
+    description: 'Grid item wrapper for use inside dashboard. Controls per-item column span.',
+    props: {
+        slotId: { type: 'string', required: true, description: 'Unique slot identifier.' },
+        itemId: { type: 'string', required: true, description: 'Unique item identifier.' },
+        span: { type: 'number | "auto"', required: false, description: 'Column span (1, 2, 3) or "auto". Default 1.' },
+    },
+    example: {
+        type: 'dashboard-slot',
+        props: { slotId: 'top-row', itemId: 'mrr-tile', span: 2 },
+        children: [
+            { type: 'metric', props: { label: 'MRR', value: '$48k' } },
+        ],
+    },
+};

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

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

package/dist/manifest/entries/dashboard.js

@@ -0,0 +1,48 @@
+export const dashboardEntry = {
+    type: 'dashboard',
+    category: 'layout',
+    description: 'Auto-fill responsive grid that arranges children into columns. Use for KPI grids and card galleries.',
+    props: {
+        columnMin: { type: 'string', required: false, description: 'Minimum column width before wrapping. Default "240px".' },
+        gap: { type: 'string', required: false, description: 'Grid gap. Default "12px".' },
+    },
+    example: {
+        type: 'dashboard',
+        props: { columnMin: '240px', gap: '16px' },
+        children: [
+            { type: 'metric', props: { label: 'Users', value: 1240 } },
+            { type: 'metric', props: { label: 'MRR', value: '$48k' } },
+            { type: 'metric', props: { label: 'Churn', value: '2.1%' } },
+        ],
+    },
+    pocket: {
+        state: { range: '7d', revenue: 48200, users: 1240, churn: 2.1 },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                {
+                    type: 'segmented',
+                    props: {
+                        options: [
+                            { value: '24h', label: '24h' },
+                            { value: '7d', label: '7d' },
+                            { value: '30d', label: '30d' },
+                            { value: '90d', label: '90d' },
+                        ],
+                    },
+                    bind: 'state.range',
+                },
+                {
+                    type: 'dashboard',
+                    props: { columnMin: '200px', gap: '16px' },
+                    children: [
+                        { type: 'metric', props: { label: 'Revenue ({state.range})', value: '${state.revenue}' } },
+                        { type: 'metric', props: { label: 'Users ({state.range})', value: '{state.users}' } },
+                        { type: 'metric', props: { label: 'Churn ({state.range})', value: '{state.churn}%' } },
+                    ],
+                },
+            ],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,77 @@
+export const dataGridEntry = {
+    type: 'data-grid',
+    category: 'data',
+    description: 'High-density tabular data with sticky headers, resizable columns, pagination, and optional sorting. Use over `table` for large datasets.',
+    props: {
+        columns: { type: 'Array<{ key: string; label: string; sortable?: boolean; align?: "left" | "center" | "right"; width?: string }>', required: true, description: 'Column definitions.' },
+        rows: { type: 'Array<Record<string, unknown>>', required: true, description: 'Row objects.' },
+        value: { type: 'string | number | null', required: false, description: 'Selected row id (use with bind).' },
+        pageSize: { type: 'number', required: false, description: 'Rows per page. Default 10.' },
+        searchable: { type: 'boolean', required: false, description: 'Show search input.' },
+        defaultSort: { type: 'string', required: false, description: 'Initial sort: "key" or "key:desc".' },
+        striped: { type: 'boolean', required: false, description: 'Alternate row backgrounds.' },
+        dense: { type: 'boolean', required: false, description: 'Compact row density.' },
+        emptyText: { type: 'string', required: false, description: 'Empty-state text.' },
+    },
+    events: {
+        on_change: { type: 'EventAction', required: false, description: 'Fired on row selection.' },
+    },
+    example: {
+        type: 'data-grid',
+        props: {
+            columns: [
+                { key: 'name', label: 'Customer', sortable: true },
+                { key: 'email', label: 'Email', sortable: true },
+                { key: 'revenue', label: 'Revenue', align: 'right', sortable: true },
+            ],
+            rows: [
+                { id: 1, name: 'Alice', email: 'alice@example.com', revenue: '$8,400' },
+                { id: 2, name: 'Bob', email: 'bob@example.com', revenue: '$5,200' },
+                { id: 3, name: 'Carol', email: 'carol@example.com', revenue: '$12,800' },
+            ],
+            searchable: true,
+        },
+    },
+    pocket: {
+        state: {
+            selected: null,
+            rows: [
+                { id: 1, name: 'Alice', email: 'alice@example.com', revenue: '$8,400' },
+                { id: 2, name: 'Bob', email: 'bob@example.com', revenue: '$5,200' },
+                { id: 3, name: 'Carol', email: 'carol@example.com', revenue: '$12,800' },
+            ],
+        },
+        ui: {
+            type: 'flex',
+            props: { direction: 'column', gap: '12px' },
+            children: [
+                {
+                    type: 'data-grid',
+                    props: {
+                        columns: [
+                            { key: 'name', label: 'Customer', sortable: true },
+                            { key: 'email', label: 'Email' },
+                            { key: 'revenue', label: 'Revenue', align: 'right', sortable: true },
+                        ],
+                        rows: '{state.rows}',
+                        searchable: true,
+                    },
+                    bind: 'state.selected',
+                },
+                {
+                    type: 'flex',
+                    show: '{state.selected != null}',
+                    props: { gap: '8px', align: 'center' },
+                    children: [
+                        { type: 'text', props: { text: 'Selected row id: {state.selected}' } },
+                        {
+                            type: 'button',
+                            props: { label: 'Email customer', variant: 'secondary', size: 'sm' },
+                            on_click: { action: 'toast', message: 'Sent', variant: 'success' },
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};