@moldable-ai/ui 0.2.21 → 0.2.24

package/dist/catalog/core-feedback-stories.js

@@ -1,14 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlertIcon, InboxIcon } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
-import { Avatar, AvatarBadge, AvatarFallback } from '../components/ui/avatar';
-import { Badge } from '../components/ui/badge';
-import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../components/ui/empty';
-import { NotificationDot } from '../components/ui/notification-dot';
-import { Progress } from '../components/ui/progress';
-import { Skeleton } from '../components/ui/skeleton';
-import { Spinner } from '../components/ui/spinner';
-import { Status } from '../components/ui/status';
+import * as React from 'react';
+import { ThemeProvider } from '../lib/theme.js';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert.js';
+import { Avatar, AvatarBadge, AvatarFallback } from '../components/ui/avatar.js';
+import { Badge } from '../components/ui/badge.js';
+import { EdgeFade } from '../components/ui/edge-fade.js';
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../components/ui/empty.js';
+import { ErrorBoundaryView } from '../components/ui/error-boundary-view.js';
+import { Kbd, KbdGroup } from '../components/ui/kbd.js';
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from '../components/ui/message-scroller.js';
+import { NotificationDot } from '../components/ui/notification-dot.js';
+import { Progress } from '../components/ui/progress.js';
+import { Skeleton } from '../components/ui/skeleton.js';
+import { Toaster, toast } from '../components/ui/sonner.js';
+import { Spinner } from '../components/ui/spinner.js';
+import { Status } from '../components/ui/status.js';
+function StaticToasts() {
+    React.useEffect(() => {
+        const frame = requestAnimationFrame(() => {
+            toast.success('Workspace synced', {
+                id: 'catalog-success',
+                description: 'All local changes are backed up.',
+                duration: Number.POSITIVE_INFINITY,
+            });
+            toast('Changes staged', {
+                id: 'catalog-action',
+                description: 'The release is ready to review.',
+                action: {
+                    label: 'Undo',
+                    onClick: () => undefined,
+                },
+                duration: Number.POSITIVE_INFINITY,
+            });
+            toast.error('Upload paused', {
+                id: 'catalog-destructive',
+                description: 'Reconnect to continue.',
+                duration: Number.POSITIVE_INFINITY,
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            toast.dismiss('catalog-success');
+            toast.dismiss('catalog-action');
+            toast.dismiss('catalog-destructive');
+        };
+    }, []);
+    return _jsx(Toaster, { visibleToasts: 3, position: "bottom-right", expand: true });
+}
 export const coreFeedbackSection = {
     id: 'feedback',
     title: 'Feedback',
@@ -18,7 +57,7 @@ export const coreFeedbackSection = {
             title: 'Status and badges',
             components: ['avatar', 'badge', 'notification-dot', 'status'],
             viewports: ['narrow'],
-            render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Avatar, { children: [_jsx(AvatarFallback, { children: "RM" }), _jsx(AvatarBadge, {})] }), _jsx(Status, { variant: "running", children: "Running" }), _jsx(Badge, { variant: "secondary", children: "Draft" }), _jsxs(Badge, { variant: "outline", className: "gap-1.5", children: [_jsx(NotificationDot, {}), "New"] })] })),
+            render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Avatar, { children: [_jsx(AvatarFallback, { children: "RM" }), _jsx(AvatarBadge, {})] }), _jsx(Status, { variant: "success", children: "Success" }), _jsx(Status, { variant: "info", children: "Info" }), _jsx(Status, { variant: "neutral", children: "Neutral" }), _jsx(Status, { variant: "pending", children: "Pending" }), _jsx(Badge, { variant: "secondary", children: "Draft" }), _jsxs(Badge, { variant: "outline", className: "gap-1.5", children: [_jsx(NotificationDot, {}), "New"] })] })),
         },
         {
             id: 'semantic-alert',
@@ -46,5 +85,45 @@ export const coreFeedbackSection = {
             accessibilityModes: ['standard', 'reduced-motion'],
             render: () => (_jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Spinner, {}), "Syncing changes"] }), _jsx(Progress, { "aria-label": "Sync progress", value: 64 }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Skeleton, { className: "h-3 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] })),
         },
+        {
+            id: 'static-toasts',
+            title: 'Static toast stack',
+            components: ['sonner'],
+            render: () => (_jsxs(ThemeProvider, { children: [_jsx("div", { className: "text-muted-foreground h-56 text-sm", children: "Toasts are mounted at the viewport edge." }), _jsx(StaticToasts, {})] })),
+        },
+        {
+            id: 'keyboard-shortcuts',
+            title: 'Keyboard shortcuts',
+            components: ['kbd'],
+            render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: ["Commands", _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }), _jsxs("span", { className: "flex items-center gap-2", children: ["Search", _jsx(Kbd, { children: "/" })] }), _jsxs("span", { className: "flex items-center gap-2", children: ["Dismiss", _jsx(Kbd, { children: "Esc" })] })] })),
+        },
+        {
+            id: 'error-boundary',
+            title: 'Error boundary view',
+            components: ['error-boundary-view'],
+            render: () => (_jsx(ErrorBoundaryView, { className: "min-h-64", title: "Calendar could not load", message: "Your data is safe. Retry the local view.", details: "RenderError: calendar view unavailable", onRetry: () => undefined })),
+        },
+        {
+            id: 'edge-fades',
+            title: 'Overflow edge fades',
+            components: ['edge-fade'],
+            render: () => (_jsxs("div", { className: "border-border relative h-48 overflow-hidden rounded-md border", children: [_jsx("div", { className: "grid gap-3 p-4", children: ['Today', 'Planning', 'Review', 'Archive', 'Later'].map((label) => (_jsx("div", { className: "bg-card rounded-md border px-3 py-2 text-sm", children: label }, label))) }), _jsx(EdgeFade, { edge: "top", size: "sm" }), _jsx(EdgeFade, { edge: "bottom", size: "lg" })] })),
+        },
+        {
+            id: 'message-scroller-frame',
+            title: 'Static message scroller',
+            components: ['message-scroller'],
+            render: () => (_jsx(MessageScrollerProvider, { defaultScrollPosition: "start", children: _jsxs(MessageScroller, { className: "border-border h-56 rounded-md border", children: [_jsx(MessageScrollerViewport, { children: _jsx(MessageScrollerContent, { className: "gap-3 p-3", children: [
+                                    ['user', 'Create a quiet weekly planner.'],
+                                    [
+                                        'assistant',
+                                        'I added a focused week view and quick capture.',
+                                    ],
+                                    ['user', 'Keep completed tasks visible.'],
+                                    ['assistant', 'Completed tasks now remain grouped below.'],
+                                ].map(([role, message], index) => (_jsx(MessageScrollerItem, { messageId: `catalog-${index}`, className: role === 'user'
+                                        ? 'bg-muted ml-8 rounded-md p-3 text-sm'
+                                        : 'mr-8 p-3 text-sm', children: message }, message))) }) }), _jsx(MessageScrollerButton, { direction: "end", behavior: "auto" })] }) })),
+        },
     ],
 };

package/dist/catalog/core-form-stories.d.ts

@@ -0,0 +1,3 @@
+import type { CatalogSectionDefinition } from './catalog-types.js';
+export declare const coreFormsSection: CatalogSectionDefinition;
+//# sourceMappingURL=core-form-stories.d.ts.map

package/dist/catalog/core-form-stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-form-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-form-stories.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAO/D,eAAO,MAAM,gBAAgB,EAAE,wBAiK9B,CAAA"}

package/dist/catalog/core-form-stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar } from '../components/ui/calendar.js';
+import { ColorWell } from '../components/ui/color-well.js';
+import { DatePicker } from '../components/ui/date-picker.js';
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from '../components/ui/input-otp.js';
+import { NumberInput } from '../components/ui/number-input.js';
+import { Slider } from '../components/ui/slider.js';
+import { enUS } from 'date-fns/locale';
+const selectedDate = new Date('2026-07-26T12:00:00');
+const rangeStart = new Date('2026-07-21T12:00:00');
+const rangeEnd = new Date('2026-07-26T12:00:00');
+export const coreFormsSection = {
+    id: 'forms-and-values',
+    title: 'Forms and values',
+    description: 'Frozen calendar, segmented-value, stepper, slider, and color fixtures.',
+    stories: [
+        {
+            id: 'calendar-month',
+            title: 'Calendar month and range',
+            components: ['calendar'],
+            render: () => (_jsxs("div", { className: "flex flex-wrap items-start gap-4", children: [_jsx(Calendar, { "aria-label": "July 2026", mode: "single", locale: enUS, month: selectedDate, selected: selectedDate, disabled: { before: rangeStart } }), _jsx(Calendar, { "aria-label": "July 2026 date range", mode: "range", locale: enUS, month: selectedDate, selected: { from: rangeStart, to: rangeEnd } })] })),
+        },
+        {
+            id: 'date-picker-open',
+            title: 'Open date picker',
+            components: ['date-picker'],
+            render: () => (_jsx("div", { className: "flex h-[25rem] items-start justify-center pt-2", children: _jsx(DatePicker, { "aria-label": "Due date", open: true, value: "2026-07-26", locale: enUS, min: "2026-07-20", max: "2026-08-10", clearable: true, onOpenChange: () => undefined }) })),
+        },
+        {
+            id: 'input-otp-values',
+            title: 'One-time code',
+            components: ['input-otp'],
+            liveStates: ['focus'],
+            render: () => (_jsxs(InputOTP, { "data-state-target": "focus", "aria-label": "Verification code", maxLength: 6, value: "4812", onChange: () => undefined, children: [_jsx(InputOTPGroup, { children: [0, 1, 2].map((index) => (_jsx(InputOTPSlot, { index: index }, index))) }), _jsx(InputOTPSeparator, {}), _jsx(InputOTPGroup, { children: [3, 4, 5].map((index) => (_jsx(InputOTPSlot, { index: index }, index))) })] })),
+        },
+        {
+            id: 'slider-range',
+            title: 'Slider range with multiple thumbs',
+            components: ['slider'],
+            render: () => (_jsxs("div", { className: "grid max-w-md gap-5", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex justify-between text-sm", children: [_jsx("span", { children: "Quiet hours" }), _jsx("span", { className: "text-muted-foreground", children: "22:00\u201307:00" })] }), _jsx(Slider, { "aria-label": "Quiet hours", value: [28, 78], thumbAriaLabels: ['Quiet hours start', 'Quiet hours end'] })] }), _jsx(Slider, { "aria-label": "Disabled volume", value: [45], thumbAriaLabels: ['Volume'], disabled: true })] })),
+        },
+        {
+            id: 'number-input-steppers',
+            title: 'Number input stepper states',
+            components: ['number-input'],
+            render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(NumberInput, { "aria-label": "Session duration", value: 25, min: 5, max: 60, step: 5, unit: "min", onValueChange: () => undefined, className: "w-36" }), _jsx(NumberInput, { "aria-label": "Maximum collaborators", value: 10, min: 1, max: 10, onValueChange: () => undefined, className: "w-28" }), _jsx(NumberInput, { "aria-label": "Disabled estimate", value: 3, unit: "hrs", disabled: true, className: "w-32" })] })),
+        },
+        {
+            id: 'color-well-values',
+            title: 'Color wells',
+            components: ['color-well'],
+            liveStates: ['focus'],
+            render: () => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ColorWell, { "data-state-target": "focus", "aria-label": "Project color", value: "#ff6b4a", onValueChange: () => undefined }), _jsx(ColorWell, { "aria-label": "No color", value: null, readOnly: true }), _jsx(ColorWell, { "aria-label": "Disabled color", value: "#4f8cff", disabled: true }), _jsx(ColorWell, { "aria-label": "Large read-only color", value: "#34a853", readOnly: true, size: "lg" })] })),
+        },
+    ],
+};

package/dist/catalog/core-foundation-stories.d.ts

@@ -1,3 +1,3 @@
-import type { CatalogSectionDefinition } from './catalog-types';
+import type { CatalogSectionDefinition } from './catalog-types.js';
 export declare const coreFoundationSection: CatalogSectionDefinition;
 //# sourceMappingURL=core-foundation-stories.d.ts.map

package/dist/catalog/core-foundation-stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, LocateFixedIcon, PlusIcon, } from 'lucide-react';
-import { AppFrame, AppFrameContent, AppFrameTitlebar, AppFrameToolbar, } from '../components/ui/app-frame';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../components/ui/card';
-import { IconButton } from '../components/ui/icon-button';
-import { Material, MaterialGroup } from '../components/ui/material';
-import { Panel, PanelContent, PanelGroup, PanelHeader, } from '../components/ui/panel';
-import { Text } from '../components/ui/text';
-import { Toolbar, ToolbarActions, ToolbarContent, ToolbarDescription, ToolbarTitle, } from '../components/ui/toolbar';
+import { AppFrame, AppFrameContent, AppFrameTitlebar, AppFrameToolbar, } from '../components/ui/app-frame.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../components/ui/card.js';
+import { IconButton } from '../components/ui/icon-button.js';
+import { Material, MaterialGroup } from '../components/ui/material.js';
+import { Panel, PanelContent, PanelGroup, PanelHeader, } from '../components/ui/panel.js';
+import { Text } from '../components/ui/text.js';
+import { Toolbar, ToolbarActions, ToolbarContent, ToolbarDescription, ToolbarTitle, } from '../components/ui/toolbar.js';
 export const coreFoundationSection = {
     id: 'window-foundations',
     title: 'Window foundations',

package/dist/catalog/core-layout-stories.d.ts

@@ -0,0 +1,3 @@
+import type { CatalogSectionDefinition } from './catalog-types.js';
+export declare const coreLayoutSection: CatalogSectionDefinition;
+//# sourceMappingURL=core-layout-stories.d.ts.map

package/dist/catalog/core-layout-stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-layout-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-layout-stories.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,iBAAiB,EAAE,wBAkQ/B,CAAA"}

package/dist/catalog/core-layout-stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarIcon, FolderIcon, InboxIcon, SettingsIcon } from 'lucide-react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '../components/ui/accordion.js';
+import { AspectRatio } from '../components/ui/aspect-ratio.js';
+import { CollapsibleSection, CollapsibleSectionContent, CollapsibleSectionTrigger, } from '../components/ui/collapsible.js';
+import { Input } from '../components/ui/input.js';
+import { Inspector, InspectorContent, InspectorHeader, InspectorLabel, InspectorRow, InspectorSection, InspectorValue, } from '../components/ui/inspector.js';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from '../components/ui/resizable.js';
+import { ScrollArea } from '../components/ui/scroll-area.js';
+import { Separator } from '../components/ui/separator.js';
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, } from '../components/ui/sidebar.js';
+import { SplitView, SplitViewHandle, SplitViewPane, } from '../components/ui/split-view.js';
+export const coreLayoutSection = {
+    id: 'layout-and-disclosure',
+    title: 'Layout and disclosure',
+    description: 'Stable open disclosure states and fixed geometry for structural surfaces.',
+    stories: [
+        {
+            id: 'accordion-states',
+            title: 'Accordion states',
+            components: ['accordion'],
+            render: () => (_jsxs(Accordion, { type: "single", value: "storage", onValueChange: () => undefined, className: "max-w-lg", children: [_jsxs(AccordionItem, { value: "storage", children: [_jsx(AccordionTrigger, { children: "Where is app data stored?" }), _jsx(AccordionContent, { children: "App data remains inside the active local workspace." })] }), _jsxs(AccordionItem, { value: "sync", children: [_jsx(AccordionTrigger, { children: "When does sync run?" }), _jsx(AccordionContent, { children: "Sync runs after local changes." })] }), _jsx(AccordionItem, { value: "disabled", disabled: true, children: _jsx(AccordionTrigger, { children: "Managed policy" }) })] })),
+        },
+        {
+            id: 'collapsible-states',
+            title: 'Collapsible section states',
+            components: ['collapsible'],
+            render: () => (_jsxs("div", { className: "grid max-w-lg gap-3", children: [_jsxs(CollapsibleSection, { open: true, children: [_jsx(CollapsibleSectionTrigger, { children: "Advanced settings" }), _jsx(CollapsibleSectionContent, { motion: "none", children: "Local indexing is enabled for this workspace." })] }), _jsx(CollapsibleSection, { children: _jsx(CollapsibleSectionTrigger, { children: "Developer options" }) })] })),
+        },
+        {
+            id: 'aspect-ratio-frame',
+            title: 'Aspect ratio frame',
+            components: ['aspect-ratio'],
+            render: () => (_jsx("div", { className: "max-w-md overflow-hidden rounded-md border", children: _jsx(AspectRatio, { ratio: 16 / 9, className: "grid place-items-center bg-[radial-gradient(circle_at_25%_20%,var(--chart-2),transparent_35%),linear-gradient(135deg,var(--surface-recessed),var(--surface-canvas))]", children: _jsx("span", { className: "bg-background/80 rounded-md px-3 py-1.5 text-sm font-medium", children: "16:9 preview" }) }) })),
+        },
+        {
+            id: 'inspector-properties',
+            title: 'Inspector properties',
+            components: ['inspector'],
+            render: () => (_jsxs(Inspector, { className: "h-64 max-w-sm rounded-md border", children: [_jsx(InspectorHeader, { children: _jsx("strong", { className: "text-sm", children: "Inspector" }) }), _jsx(InspectorContent, { children: _jsxs(InspectorSection, { title: "Appearance", children: [_jsxs(InspectorRow, { children: [_jsx(InspectorLabel, { htmlFor: "catalog-title", children: "Title" }), _jsx(InspectorValue, { children: _jsx(Input, { id: "catalog-title", value: "Weekly plan", readOnly: true, className: "h-8" }) })] }), _jsxs(InspectorRow, { children: [_jsx(InspectorLabel, { children: "Width" }), _jsx(InspectorValue, { className: "text-muted-foreground text-sm", children: "640 px" })] })] }) })] })),
+        },
+        {
+            id: 'resizable-panels',
+            title: 'Resizable panel geometry',
+            components: ['resizable'],
+            render: () => (_jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "h-52 overflow-hidden rounded-md border", children: [_jsx(ResizablePanel, { defaultSize: "35%", children: _jsx("div", { className: "bg-surface-sidebar grid size-full place-items-center text-sm", children: "Library" }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { children: _jsx("div", { className: "grid size-full place-items-center text-sm", children: "Canvas" }) })] })),
+        },
+        {
+            id: 'split-view',
+            title: 'Split view geometry',
+            components: ['split-view'],
+            render: () => (_jsx("div", { className: "h-56 overflow-hidden rounded-md border", children: _jsxs(SplitView, { orientation: "horizontal", children: [_jsx(SplitViewPane, { id: "library", defaultSize: "34%", minSize: "25%", children: _jsxs("div", { className: "bg-surface-sidebar flex size-full flex-col", children: [_jsx("div", { className: "border-border border-b px-3 py-2 text-sm font-medium", children: "Library" }), _jsxs("div", { className: "grid gap-1 p-2 text-sm", children: [_jsx("div", { className: "bg-surface-selected rounded-control px-2 py-1.5 font-medium", children: "Today" }), _jsx("div", { className: "text-muted-foreground px-2 py-1.5", children: "Projects" }), _jsx("div", { className: "text-muted-foreground px-2 py-1.5", children: "Archive" })] })] }) }), _jsx(SplitViewHandle, { withHandle: true }), _jsx(SplitViewPane, { id: "canvas", defaultSize: "66%", minSize: "40%", children: _jsxs("div", { className: "flex size-full flex-col", children: [_jsx("div", { className: "border-border border-b px-3 py-2 text-sm font-medium", children: "Canvas" }), _jsx("div", { className: "grid flex-1 place-items-center p-4", children: _jsxs("div", { className: "bg-card rounded-card w-full max-w-sm border p-4", children: [_jsx("p", { className: "text-sm font-medium", children: "Weekly plan" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "A focused workspace for the week ahead." })] }) })] }) })] }) })),
+        },
+        {
+            id: 'scroll-area',
+            title: 'Scroll area frame',
+            components: ['scroll-area'],
+            render: () => (_jsx(ScrollArea, { className: "h-52 max-w-sm rounded-md border", scrollbars: "both", type: "always", viewportClassName: "p-3", children: _jsx("div", { className: "grid w-[32rem] gap-2", children: Array.from({ length: 8 }, (_, index) => (_jsxs("div", { className: "bg-card rounded-md border px-3 py-2 text-sm", children: ["Workspace item ", index + 1] }, index))) }) })),
+        },
+        {
+            id: 'separators',
+            title: 'Semantic separators',
+            components: ['separator'],
+            render: () => (_jsxs("div", { className: "max-w-sm rounded-md border p-4 text-sm", children: [_jsx("p", { className: "font-medium", children: "Workspace" }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "flex h-8 items-center gap-3", children: [_jsx("span", { children: "Local" }), _jsx(Separator, { orientation: "vertical", decorative: false }), _jsx("span", { children: "Private" }), _jsx(Separator, { orientation: "vertical" }), _jsx("span", { children: "Synced" })] })] })),
+        },
+        {
+            id: 'sidebar-shell',
+            title: 'Static sidebar shell',
+            components: ['sidebar'],
+            render: () => (_jsxs(SidebarProvider, { className: "min-h-64 overflow-hidden rounded-md border", style: { '--sidebar-width': '13rem' }, children: [_jsxs(Sidebar, { collapsible: "none", children: [_jsx(SidebarHeader, { className: "px-3 py-2 font-medium", children: "Moldable" }), _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Workspace" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: [
+                                                    { Icon: InboxIcon, label: 'Today' },
+                                                    { Icon: CalendarIcon, label: 'Calendar' },
+                                                    { Icon: FolderIcon, label: 'Projects' },
+                                                    { Icon: SettingsIcon, label: 'Settings' },
+                                                ].map(({ Icon, label }, index) => (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: index === 0, children: [_jsx(Icon, {}), _jsx("span", { children: label })] }) }, label))) }) })] }) })] }), _jsx("div", { className: "grid flex-1 place-items-center text-sm", children: "App canvas" })] })),
+        },
+    ],
+};

package/dist/catalog/core-navigation-stories.d.ts

@@ -1,3 +1,3 @@
-import type { CatalogSectionDefinition } from './catalog-types';
+import type { CatalogSectionDefinition } from './catalog-types.js';
 export declare const coreNavigationSection: CatalogSectionDefinition;
 //# sourceMappingURL=core-navigation-stories.d.ts.map

package/dist/catalog/core-navigation-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-navigation-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-navigation-stories.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,qBAAqB,EAAE,wBA+DnC,CAAA"}
+{"version":3,"file":"core-navigation-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-navigation-stories.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,qBAAqB,EAAE,wBA0KnC,CAAA"}

package/dist/catalog/core-navigation-stories.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '../components/ui/breadcrumb';
-import { NavigationButtonGroup } from '../components/ui/navigation-button-group';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '../components/ui/breadcrumb.js';
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from '../components/ui/menubar.js';
+import { NavigationButtonGroup } from '../components/ui/navigation-button-group.js';
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from '../components/ui/navigation-menu.js';
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from '../components/ui/pagination.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs.js';
 export const coreNavigationSection = {
     id: 'navigation',
     title: 'Navigation',
@@ -21,5 +24,24 @@ export const coreNavigationSection = {
             interactions: ['rest', 'focus-visible', 'disabled'],
             render: ({ interaction }) => (_jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { "data-catalog-target": true, value: "overview", autoFocus: interaction === 'focus-visible', children: "Overview" }), _jsx(TabsTrigger, { value: "activity", disabled: interaction === 'disabled', children: "Activity" })] }), _jsx(TabsContent, { value: "overview", className: "text-muted-foreground p-2 text-sm", children: "Project summary" }), _jsx(TabsContent, { value: "activity", children: "Recent activity" })] })),
         },
+        {
+            id: 'pagination-range',
+            title: 'Responsive pagination',
+            components: ['pagination'],
+            render: () => (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#page-3" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#page-1", children: "1" }) }), _jsx(PaginationItem, { className: "hidden sm:list-item", children: _jsx(PaginationEllipsis, {}) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#page-4", isActive: true, children: "4" }) }), _jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#page-5", children: "5" }) }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#page-5" }) })] }) })),
+        },
+        {
+            id: 'navigation-menu-open',
+            title: 'Open navigation menu',
+            components: ['navigation-menu'],
+            render: () => (_jsx("div", { className: "flex h-72 items-start justify-center pt-2", children: _jsx(NavigationMenu, { viewport: false, value: "apps", onValueChange: () => undefined, children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { value: "apps", children: [_jsx(NavigationMenuTrigger, { children: "Apps" }), _jsx(NavigationMenuContent, { children: _jsxs("div", { className: "grid w-64 gap-1", children: [_jsxs(NavigationMenuLink, { href: "#calendar", active: true, children: [_jsx("span", { className: "font-medium", children: "Calendar" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Events and schedules" })] }), _jsxs(NavigationMenuLink, { href: "#meetings", children: [_jsx("span", { className: "font-medium", children: "Meetings" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Notes and recordings" })] })] }) })] }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "#settings", children: "Settings" }) })] }) }) })),
+        },
+        {
+            id: 'menubar-open',
+            title: 'Open application menubar',
+            components: ['menubar'],
+            liveStates: ['focus'],
+            render: () => (_jsx("div", { className: "flex h-64 items-start justify-center", children: _jsxs(Menubar, { value: "file", onValueChange: () => undefined, children: [_jsxs(MenubarMenu, { value: "file", children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsxs(MenubarItem, { "data-state-target": "focus", children: ["New window", _jsx(MenubarShortcut, { children: "\u2318N" })] }), _jsx(MenubarCheckboxItem, { checked: true, children: "Show in Today" }), _jsx(MenubarItem, { disabled: true, children: "Import workspace" }), _jsxs(MenubarSub, { open: true, children: [_jsx(MenubarSubTrigger, { children: "Open recent" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "Personal" }), _jsx(MenubarItem, { children: "Work" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { variant: "destructive", children: "Close workspace" })] })] }), _jsx(MenubarMenu, { value: "edit", children: _jsx(MenubarTrigger, { children: "Edit" }) })] }) })),
+        },
     ],
 };

package/dist/catalog/core-overlay-stories.d.ts

@@ -1,3 +1,3 @@
-import type { CatalogSectionDefinition } from './catalog-types';
+import type { CatalogSectionDefinition } from './catalog-types.js';
 export declare const coreOverlaysSection: CatalogSectionDefinition;
 //# sourceMappingURL=core-overlay-stories.d.ts.map

package/dist/catalog/core-overlay-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-overlay-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-overlay-stories.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,mBAAmB,EAAE,wBAiCjC,CAAA"}
+{"version":3,"file":"core-overlay-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-overlay-stories.tsx"],"names":[],"mappings":"AA0HA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAqD/D,eAAO,MAAM,mBAAmB,EAAE,wBAuVjC,CAAA"}

package/dist/catalog/core-overlay-stories.js

@@ -1,20 +1,125 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../components/ui/button';
-import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from '../components/ui/popover';
+import { ArchiveIcon, FolderIcon, SearchIcon, Trash2Icon } from 'lucide-react';
+import * as React from 'react';
+import { AlertDialog } from '../components/ui/alert-dialog.js';
+import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../components/ui/alert-dialog.js';
+import { Button } from '../components/ui/button.js';
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, } from '../components/ui/combobox.js';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandItemContent, CommandItemDescription, CommandItemIcon, CommandItemTitle, CommandList, CommandShortcut, } from '../components/ui/command.js';
+import { ConfirmDialog } from '../components/ui/confirm-dialog.js';
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from '../components/ui/context-menu.js';
+import { Dialog, DialogAction, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '../components/ui/dialog.js';
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from '../components/ui/drawer.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger, } from '../components/ui/hover-card.js';
+import { Kbd } from '../components/ui/kbd.js';
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from '../components/ui/popover.js';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from '../components/ui/select.js';
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from '../components/ui/sheet.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipShortcut, TooltipTrigger, } from '../components/ui/tooltip.js';
+const noop = () => undefined;
+function OpenContextMenuFixture() {
+    const triggerRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const bounds = trigger.getBoundingClientRect();
+        trigger.dispatchEvent(new MouseEvent('contextmenu', {
+            bubbles: true,
+            button: 2,
+            clientX: bounds.left + Math.min(96, bounds.width / 2),
+            clientY: bounds.top + 56,
+        }));
+    }, []);
+    return (_jsxs(ContextMenu, { modal: false, onOpenChange: noop, children: [_jsx(ContextMenuTrigger, { ref: triggerRef, className: "border-border grid h-56 place-items-center rounded-md border border-dashed text-sm", children: "Right-click canvas" }), _jsxs(ContextMenuContent, { className: "w-52", children: [_jsxs(ContextMenuItem, { "data-state-target": "focus", children: [_jsx(FolderIcon, {}), "Open"] }), _jsx(ContextMenuCheckboxItem, { checked: true, children: "Pin item" }), _jsx(ContextMenuItem, { disabled: true, children: "Rename" }), _jsxs(ContextMenuSub, { open: true, children: [_jsx(ContextMenuSubTrigger, { children: "Move to" }), _jsxs(ContextMenuSubContent, { children: [_jsx(ContextMenuItem, { children: "Personal" }), _jsx(ContextMenuItem, { children: "Work" })] })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { variant: "destructive", children: [_jsx(Trash2Icon, {}), "Delete"] })] })] }));
+}
 export const coreOverlaysSection = {
     id: 'overlays',
     title: 'Overlays',
-    description: 'A minimal stable portal case. Complex modal and menu surfaces remain explicitly deferred.',
+    description: 'Controlled open portal surfaces rendered against the host theme with motion disabled.',
     stories: [
+        {
+            id: 'dialog-open',
+            title: 'Open dialog',
+            components: ['dialog'],
+            render: () => (_jsxs(Dialog, { open: true, onOpenChange: noop, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Edit workspace" }) }), _jsxs(DialogContent, { size: "sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Edit workspace" }), _jsx(DialogDescription, { children: "Changes apply to this local workspace." })] }), _jsx(DialogBody, { className: "text-muted-foreground text-sm", children: "Personal workspace \u00B7 Toronto" }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", children: "Cancel" }), _jsx(DialogAction, { primary: true, children: "Save changes" })] })] })] })),
+        },
+        {
+            id: 'alert-dialog-open',
+            title: 'Open alert dialog',
+            components: ['alert-dialog'],
+            render: () => (_jsx(AlertDialog, { open: true, onOpenChange: noop, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Remove project?" }), _jsx(AlertDialogDescription, { children: "This removes the project from this workspace." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { primary: true, variant: "destructive", children: "Remove" })] })] }) })),
+        },
+        {
+            id: 'confirm-dialog-open',
+            title: 'Open confirmation dialog',
+            components: ['confirm-dialog'],
+            render: () => (_jsx(ConfirmDialog, { open: true, title: "Archive conversation?", description: "You can restore it later from the archive.", confirmLabel: "Archive", onConfirm: noop, onOpenChange: noop })),
+        },
+        {
+            id: 'sheet-open',
+            title: 'Open sheet',
+            components: ['sheet'],
+            render: () => (_jsxs(Sheet, { open: true, onOpenChange: noop, children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open inspector" }) }), _jsxs(SheetContent, { side: "right", size: "sm", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Inspector" }), _jsx(SheetDescription, { children: "Properties for the selected item." })] }), _jsx(SheetBody, { className: "text-muted-foreground text-sm", children: "Created July 26, 2026" }), _jsx(SheetFooter, { children: _jsx(Button, { children: "Done" }) })] })] })),
+        },
+        {
+            id: 'drawer-open',
+            title: 'Open drawer',
+            components: ['drawer'],
+            render: () => (_jsxs(Drawer, { open: true, onOpenChange: noop, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open queue" }) }), _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Upload queue" }), _jsx(DrawerDescription, { children: "Two files are ready to sync." })] }), _jsxs(DrawerFooter, { children: [_jsx(Button, { children: "Upload all" }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) })] })] })] })),
+        },
         {
             id: 'popover-open',
             title: 'Open popover',
             components: ['popover'],
-            themes: ['light'],
-            densities: ['regular'],
-            viewports: ['wide'],
-            accessibilityModes: ['standard', 'reduced-transparency'],
-            render: () => (_jsx("div", { className: "flex h-32 items-start justify-center pt-2", children: _jsxs(Popover, { defaultOpen: true, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "View details" }) }), _jsx(PopoverContent, { size: "sm", align: "center", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Local workspace" }), _jsx(PopoverDescription, { children: "Files and app data remain on this Mac." })] }) })] }) })),
+            render: () => (_jsx("div", { className: "flex h-32 items-start justify-center pt-2", children: _jsxs(Popover, { open: true, onOpenChange: noop, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "View details" }) }), _jsx(PopoverContent, { size: "sm", align: "center", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Local workspace" }), _jsx(PopoverDescription, { children: "Files and app data remain on this Mac." })] }) })] }) })),
+        },
+        {
+            id: 'hover-card-open',
+            title: 'Open hover card',
+            components: ['hover-card'],
+            render: () => (_jsx("div", { className: "flex h-36 items-start justify-center pt-2", children: _jsxs(HoverCard, { open: true, onOpenChange: noop, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("a", { className: "text-sm underline underline-offset-4", href: "#rob", children: "@rob" }) }), _jsxs(HoverCardContent, { children: [_jsx("div", { className: "font-medium", children: "Rob McDonald" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Building quiet, personal software." })] })] }) })),
+        },
+        {
+            id: 'tooltip-open',
+            title: 'Open tooltip',
+            components: ['tooltip'],
+            render: () => (_jsx("div", { className: "flex h-24 items-start justify-center pt-8", children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Commands" }) }), _jsxs(TooltipContent, { children: ["Open commands", _jsxs(TooltipShortcut, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] })] }) }) })),
+        },
+        {
+            id: 'dropdown-menu-open',
+            title: 'Open dropdown menu',
+            components: ['dropdown-menu'],
+            liveStates: ['focus'],
+            render: () => (_jsx("div", { className: "flex h-64 items-start justify-center pt-2", children: _jsxs(DropdownMenu, { modal: false, open: true, onOpenChange: noop, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Project actions" }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56", children: [_jsxs(DropdownMenuItem, { "data-state-target": "focus", children: [_jsx(FolderIcon, {}), "Open project", _jsx(DropdownMenuShortcut, { children: "\u2318O" })] }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "Show in Today" }), _jsx(DropdownMenuItem, { disabled: true, children: "Duplicate" }), _jsxs(DropdownMenuSub, { open: true, children: [_jsx(DropdownMenuSubTrigger, { children: "Move to" }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { children: "Personal" }), _jsx(DropdownMenuItem, { children: "Work" })] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", children: [_jsx(Trash2Icon, {}), "Delete project"] })] })] }) })),
+        },
+        {
+            id: 'context-menu-open',
+            title: 'Open context menu',
+            components: ['context-menu'],
+            liveStates: ['focus'],
+            render: () => _jsx(OpenContextMenuFixture, {}),
+        },
+        {
+            id: 'select-open',
+            title: 'Open select',
+            components: ['select'],
+            liveStates: ['focus'],
+            render: () => (_jsx("div", { className: "flex h-64 items-start justify-center pt-2", children: _jsxs(Select, { open: true, value: "balanced", onOpenChange: noop, children: [_jsx(SelectTrigger, { className: "w-52", "aria-label": "Model effort", tabIndex: -1, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Model effort" }), _jsx(SelectItem, { value: "fast", "data-state-target": "focus", children: "Fast" }), _jsx(SelectItem, { value: "balanced", children: "Balanced" }), _jsx(SelectItem, { value: "deep", disabled: true, children: "Deep (unavailable)" })] }), _jsx(SelectSeparator, {}), _jsx(SelectItem, { value: "custom", children: "Custom" })] })] }) })),
+        },
+        {
+            id: 'combobox-open',
+            title: 'Open combobox',
+            components: ['combobox'],
+            liveStates: ['focus'],
+            render: () => (_jsx("div", { className: "flex h-64 items-start justify-center pt-2", children: _jsxs(Combobox, { modal: false, open: true, autoHighlight: true, defaultValue: "Calendar", items: ['Calendar', 'Meetings', 'Mail'], children: [_jsx(ComboboxInput, { "data-state-target": "focus", "data-state-key": "ArrowDown", "aria-label": "Choose an app", placeholder: "Search apps", className: "w-56" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxList, { children: _jsxs(ComboboxGroup, { children: [_jsx(ComboboxLabel, { children: "Apps" }), _jsx(ComboboxItem, { value: "Calendar", children: "Calendar" }), _jsx(ComboboxItem, { value: "Meetings", children: "Meetings" }), _jsx(ComboboxItem, { value: "Mail", disabled: true, children: "Mail (offline)" })] }) }), _jsx(ComboboxEmpty, { children: "No apps found." })] })] }) })),
+        },
+        {
+            id: 'command-open',
+            title: 'Open command palette',
+            components: ['command'],
+            render: () => (_jsxs(CommandDialog, { open: true, onOpenChange: noop, children: [_jsx(CommandInput, { placeholder: "Search commands" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No commands found." }), _jsxs(CommandGroup, { heading: "Workspace", children: [_jsxs(CommandItem, { value: "open-search", children: [_jsx(CommandItemIcon, { children: _jsx(SearchIcon, {}) }), _jsxs(CommandItemContent, { children: [_jsx(CommandItemTitle, { children: "Search workspace" }), _jsx(CommandItemDescription, { children: "Find apps, files, and conversations" })] }), _jsx(CommandShortcut, { children: "\u2318K" })] }), _jsxs(CommandItem, { value: "archive", children: [_jsx(CommandItemIcon, { children: _jsx(ArchiveIcon, {}) }), _jsx(CommandItemTitle, { children: "Open archive" })] }), _jsx(CommandItem, { value: "disabled", disabled: true, children: "Import cloud workspace" })] })] })] })),
         },
     ],
 };

package/dist/catalog/index.d.ts

@@ -1,7 +1,7 @@
-export { buildCatalogCases, createCatalogManifest, createCatalogSection, createCatalogStory, } from './catalog-manifest';
-export { assertCatalogCoverage, getCatalogCoverage, type CatalogCoverageExclusion, type CatalogCoverageReport, } from './catalog-coverage';
-export { CatalogCaseFrame, ComponentCatalog, type CatalogCaseFrameProps, type ComponentCatalogProps, } from './component-catalog';
-export { coreComponentCatalog } from './core-catalog';
-export { coreCatalogExclusions } from './core-catalog-exclusions';
-export { catalogAccessibilityModes, catalogDensities, catalogInteractions, catalogThemes, catalogViewports, type CatalogAccessibilityMode, type CatalogCase, type CatalogCaseContext, type CatalogCaseFilter, type CatalogDensity, type CatalogInteraction, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition, type CatalogTheme, type CatalogViewport, } from './catalog-types';
+export { buildCatalogCases, createCatalogManifest, createCatalogSection, createCatalogStory, } from './catalog-manifest.js';
+export { assertCatalogCoverage, getCatalogCoverage, type CatalogCoverageExclusion, type CatalogCoverageReport, } from './catalog-coverage.js';
+export { CatalogCaseFrame, ComponentCatalog, type CatalogCaseFrameProps, type ComponentCatalogProps, } from './component-catalog.js';
+export { coreComponentCatalog } from './core-catalog.js';
+export { coreCatalogExclusions } from './core-catalog-exclusions.js';
+export { catalogAccessibilityModes, catalogDensities, catalogInteractions, catalogThemes, catalogViewports, type CatalogAccessibilityMode, type CatalogCase, type CatalogCaseContext, type CatalogCaseFilter, type CatalogDensity, type CatalogInteraction, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition, type CatalogTheme, type CatalogViewport, } from './catalog-types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/catalog/index.js

@@ -1,6 +1,6 @@
-export { buildCatalogCases, createCatalogManifest, createCatalogSection, createCatalogStory, } from './catalog-manifest';
-export { assertCatalogCoverage, getCatalogCoverage, } from './catalog-coverage';
-export { CatalogCaseFrame, ComponentCatalog, } from './component-catalog';
-export { coreComponentCatalog } from './core-catalog';
-export { coreCatalogExclusions } from './core-catalog-exclusions';
-export { catalogAccessibilityModes, catalogDensities, catalogInteractions, catalogThemes, catalogViewports, } from './catalog-types';
+export { buildCatalogCases, createCatalogManifest, createCatalogSection, createCatalogStory, } from './catalog-manifest.js';
+export { assertCatalogCoverage, getCatalogCoverage, } from './catalog-coverage.js';
+export { CatalogCaseFrame, ComponentCatalog, } from './component-catalog.js';
+export { coreComponentCatalog } from './core-catalog.js';
+export { coreCatalogExclusions } from './core-catalog-exclusions.js';
+export { catalogAccessibilityModes, catalogDensities, catalogInteractions, catalogThemes, catalogViewports, } from './catalog-types.js';

package/dist/components/app-error-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-error-boundary.d.ts","sourceRoot":"","sources":["../../src/components/app-error-boundary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAA;AAWzE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,cAAc,CAAA;CAC/B;AAED,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,cAAc,CAAA;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAaD,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAWhE;AA0CD,qBAAa,gBAAiB,SAAQ,SAAS,CAC7C,qBAAqB,EACrB,qBAAqB,CACtB;IACC,KAAK,EAAE,qBAAqB,CAAA;IAE5B,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,KAAK,GACX,OAAO,CAAC,qBAAqB,CAAC;gBAIrB,KAAK,EAAE,qBAAqB;IASxC,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;IAU5B,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAWtD,OAAO,CAAC,iBAAiB,CAMxB;IAED,OAAO,CAAC,wBAAwB,CAa/B;IAED,OAAO,CAAC,MAAM,CAEb;IAED,OAAO,CAAC,WAAW,CAYlB;IAED,MAAM;CA8CP"}
+{"version":3,"file":"app-error-boundary.d.ts","sourceRoot":"","sources":["../../src/components/app-error-boundary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAA;AAWzE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,cAAc,CAAA;CAC/B;AAED,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,cAAc,CAAA;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAaD,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAWhE;AA0CD,qBAAa,gBAAiB,SAAQ,SAAS,CAC7C,qBAAqB,EACrB,qBAAqB,CACtB;IACC,KAAK,EAAE,qBAAqB,CAAA;IAE5B,MAAM,CAAC,wBAAwB,CAC7B,KAAK,EAAE,KAAK,GACX,OAAO,CAAC,qBAAqB,CAAC;gBAIrB,KAAK,EAAE,qBAAqB;IASxC,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;IAU5B,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAWtD,OAAO,CAAC,iBAAiB,CAMxB;IAED,OAAO,CAAC,wBAAwB,CAa/B;IAED,OAAO,CAAC,MAAM,CAEb;IAED,OAAO,CAAC,WAAW,CAYlB;IAED,MAAM;CAoCP"}

package/dist/components/app-error-boundary.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MessageSquareWarning, RefreshCw } from 'lucide-react';
 import { Component } from 'react';
-import { Button } from './ui/button';
+import { Button } from './ui/button.js';
+import { ErrorBoundaryView } from './ui/error-boundary-view.js';
 function toError(value) {
     if (value instanceof Error)
         return value;
@@ -117,6 +118,6 @@ export class AppErrorBoundary extends Component {
         if (!error)
             return this.props.children;
         const errorSummary = formatError(error, source, componentStack);
-        return (_jsx("main", { className: "bg-background text-foreground flex min-h-screen items-center justify-center p-4 sm:p-6", children: _jsxs("section", { className: "border-border bg-card w-full max-w-xl rounded-lg border p-5 shadow-lg sm:p-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("h1", { className: "text-xl font-semibold tracking-tight", children: [this.props.appName, " hit a UI error"] }), _jsx("p", { className: "text-muted-foreground text-sm leading-6", children: "Reload to recover, or send the captured client error to Moldable so it can inspect the crash." })] }), _jsx("pre", { className: "bg-muted text-muted-foreground mt-5 max-h-44 overflow-auto whitespace-pre-wrap rounded-md border p-3 font-mono text-xs", children: errorSummary }), _jsxs("div", { className: "mt-5 flex flex-col gap-2 sm:flex-row", children: [_jsxs(Button, { type: "button", className: "cursor-pointer", onClick: this.reload, children: [_jsx(RefreshCw, {}), "Reload"] }), _jsxs(Button, { type: "button", variant: "secondary", className: "cursor-pointer", onClick: this.askMoldable, children: [_jsx(MessageSquareWarning, {}), "Ask Moldable to fix this"] })] })] }) }));
+        return (_jsx(ErrorBoundaryView, { className: "min-h-screen", title: `${this.props.appName} hit a UI error`, message: "Reload to recover, or send the captured client error to Moldable so it can inspect the crash.", details: errorSummary, actions: _jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", className: "cursor-pointer", onClick: this.reload, children: [_jsx(RefreshCw, {}), "Reload"] }), _jsxs(Button, { type: "button", variant: "secondary", className: "cursor-pointer", onClick: this.askMoldable, children: [_jsx(MessageSquareWarning, {}), "Ask Moldable to fix this"] })] }) }));
     }
 }