@moldable-ai/ui 0.2.22 → 0.2.25

package/dist/catalog/catalog-coverage.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogManifest } from './catalog-types';
+import type { CatalogManifest } from './catalog-types.js';
 export interface CatalogCoverageExclusion {
     component: string;
     reason: string;

package/dist/catalog/catalog-manifest.d.ts

@@ -1,4 +1,4 @@
-import { type CatalogCase, type CatalogCaseFilter, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition } from './catalog-types';
+import { type CatalogCase, type CatalogCaseFilter, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition } from './catalog-types.js';
 export declare function createCatalogStory(story: CatalogStoryDefinition): CatalogStoryDefinition;
 export declare function createCatalogSection(section: CatalogSectionDefinition): CatalogSectionDefinition;
 export declare function createCatalogManifest(manifest: CatalogManifest): CatalogManifest;

package/dist/catalog/catalog-manifest.js

@@ -1,4 +1,4 @@
-import { catalogDensities, catalogThemes, catalogViewports, } from './catalog-types';
+import { catalogDensities, catalogThemes, catalogViewports, } from './catalog-types.js';
 const catalogIdPattern = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 function assertCatalogId(id, kind) {
     if (!catalogIdPattern.test(id)) {

package/dist/catalog/component-catalog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CatalogCase, CatalogCaseFilter, CatalogManifest } from './catalog-types';
+import type { CatalogCase, CatalogCaseFilter, CatalogManifest } from './catalog-types.js';
 export interface ComponentCatalogProps extends Omit<React.ComponentProps<'main'>, 'children'> {
     manifest: CatalogManifest;
     filter?: CatalogCaseFilter;

package/dist/catalog/component-catalog.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../lib/utils';
-import { buildCatalogCases } from './catalog-manifest';
+import { cn } from '../lib/utils.js';
+import { buildCatalogCases } from './catalog-manifest.js';
 function caseLabel(catalogCase) {
     const labels = [
         catalogCase.theme,

package/dist/catalog/core-catalog-exclusions.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogCoverageExclusion } from './catalog-coverage';
+import type { CatalogCoverageExclusion } from './catalog-coverage.js';
 /**
  * Intentional gaps in the deterministic core catalog. Keeping this list
  * explicit makes every new public visual module choose between authored

package/dist/catalog/core-catalog-exclusions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-catalog-exclusions.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog-exclusions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAElE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAAS,wBAAwB,EAsJ3D,CAAA"}
+{"version":3,"file":"core-catalog-exclusions.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog-exclusions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAElE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAAS,wBAAwB,EAAO,CAAA"}

package/dist/catalog/core-catalog-exclusions.js

@@ -3,153 +3,4 @@
  * explicit makes every new public visual module choose between authored
  * coverage and a reviewable, temporary reason for deferral.
  */
-export const coreCatalogExclusions = [
-    {
-        component: 'accordion',
-        reason: 'Needs an authored expanded and collapsed keyboard matrix.',
-    },
-    {
-        component: 'alert-dialog',
-        reason: 'Requires isolated portal rendering before open states are stable.',
-    },
-    {
-        component: 'aspect-ratio',
-        reason: 'Layout utility is exercised by consumer media compositions.',
-    },
-    {
-        component: 'calendar',
-        reason: 'Needs a dedicated date-grid interaction matrix.',
-    },
-    {
-        component: 'carousel',
-        reason: 'Needs stable geometry and navigation fixtures.',
-    },
-    {
-        component: 'chart',
-        reason: 'Needs deterministic chart data and resize fixtures.',
-    },
-    {
-        component: 'collapsible',
-        reason: 'Needs an authored disclosure-state matrix.',
-    },
-    {
-        component: 'combobox',
-        reason: 'Requires isolated portal and filtering coverage.',
-    },
-    {
-        component: 'command',
-        reason: 'Needs search, selection, empty, and keyboard fixtures.',
-    },
-    {
-        component: 'confirm-dialog',
-        reason: 'Requires isolated async portal-state rendering.',
-    },
-    {
-        component: 'context-menu',
-        reason: 'Requires isolated pointer-positioned portal rendering.',
-    },
-    {
-        component: 'dialog',
-        reason: 'Requires isolated portal rendering before open states are stable.',
-    },
-    {
-        component: 'drawer',
-        reason: 'Requires isolated viewport and gesture fixtures.',
-    },
-    {
-        component: 'dropdown-menu',
-        reason: 'Requires isolated portal and keyboard coverage.',
-    },
-    {
-        component: 'error-boundary-view',
-        reason: 'Needs the separately planned pane and full-window catalog test host.',
-    },
-    {
-        component: 'date-picker',
-        reason: 'Requires isolated calendar portal rendering.',
-    },
-    {
-        component: 'edge-fade',
-        reason: 'Needs deterministic overflow geometry.',
-    },
-    {
-        component: 'form',
-        reason: 'Behavioral adapter is covered through authored field stories.',
-    },
-    {
-        component: 'hover-card',
-        reason: 'Requires isolated delayed-hover portal rendering.',
-    },
-    {
-        component: 'input-group',
-        reason: 'Needs addon, button, and validation compositions.',
-    },
-    {
-        component: 'input-otp',
-        reason: 'Needs input-sequence and paste fixtures.',
-    },
-    {
-        component: 'inspector',
-        reason: 'Needs a representative property-editing composition.',
-    },
-    {
-        component: 'label',
-        reason: 'Covered indirectly by labeled control compositions.',
-    },
-    {
-        component: 'menubar',
-        reason: 'Requires isolated multi-menu portal coverage.',
-    },
-    {
-        component: 'message-scroller',
-        reason: 'Needs deterministic overflow and anchoring geometry.',
-    },
-    {
-        component: 'navigation-menu',
-        reason: 'Requires isolated viewport and portal coverage.',
-    },
-    {
-        component: 'pagination',
-        reason: 'Needs compact and large-page-count compositions.',
-    },
-    {
-        component: 'resizable',
-        reason: 'Needs stable browser geometry and drag fixtures.',
-    },
-    {
-        component: 'scroll-area',
-        reason: 'Needs deterministic overflow geometry.',
-    },
-    {
-        component: 'select',
-        reason: 'Requires isolated portal and keyboard coverage.',
-    },
-    {
-        component: 'separator',
-        reason: 'Covered indirectly by toolbar, item, and panel compositions.',
-    },
-    {
-        component: 'sheet',
-        reason: 'Requires isolated portal and viewport-edge coverage.',
-    },
-    {
-        component: 'sidebar',
-        reason: 'Needs a complete app-shell viewport fixture.',
-    },
-    {
-        component: 'slider',
-        reason: 'Needs pointer and keyboard value fixtures.',
-    },
-    {
-        component: 'split-view',
-        reason: 'Needs stable browser geometry and drag fixtures.',
-    },
-    {
-        component: 'sonner',
-        reason: 'Requires an isolated live toaster host.',
-    },
-    {
-        component: 'tooltip',
-        reason: 'Requires isolated delayed portal rendering.',
-    },
-];
+export const coreCatalogExclusions = [];

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

@@ -1,2 +1,2 @@
-export declare const coreComponentCatalog: import("./catalog-types").CatalogManifest;
+export declare const coreComponentCatalog: import("./catalog-types.js").CatalogManifest;
 //# sourceMappingURL=core-catalog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"core-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,2CAY/B,CAAA"}
+{"version":3,"file":"core-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,2CAc/B,CAAA"}

package/dist/catalog/core-catalog.js

@@ -1,18 +1,22 @@
-import { createCatalogManifest } from './catalog-manifest';
-import { coreCollectionsSection } from './core-collection-stories';
-import { coreControlsSection } from './core-control-stories';
-import { coreFeedbackSection } from './core-feedback-stories';
-import { coreFoundationSection } from './core-foundation-stories';
-import { coreNavigationSection } from './core-navigation-stories';
-import { coreOverlaysSection } from './core-overlay-stories';
+import { createCatalogManifest } from './catalog-manifest.js';
+import { coreCollectionsSection } from './core-collection-stories.js';
+import { coreControlsSection } from './core-control-stories.js';
+import { coreFeedbackSection } from './core-feedback-stories.js';
+import { coreFormsSection } from './core-form-stories.js';
+import { coreFoundationSection } from './core-foundation-stories.js';
+import { coreLayoutSection } from './core-layout-stories.js';
+import { coreNavigationSection } from './core-navigation-stories.js';
+import { coreOverlaysSection } from './core-overlay-stories.js';
 export const coreComponentCatalog = createCatalogManifest({
     title: 'Moldable UI component catalog',
     description: 'Deterministic component cases for review and visual regression coverage.',
     sections: [
         coreFoundationSection,
         coreControlsSection,
+        coreFormsSection,
         coreCollectionsSection,
         coreNavigationSection,
+        coreLayoutSection,
         coreOverlaysSection,
         coreFeedbackSection,
     ],

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"core-collection-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-collection-stories.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,sBAAsB,EAAE,wBAwIpC,CAAA"}
+{"version":3,"file":"core-collection-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-collection-stories.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAgB/D,eAAO,MAAM,sBAAsB,EAAE,wBAoNpC,CAAA"}

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

@@ -1,10 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileTextIcon, MoreHorizontalIcon } from 'lucide-react';
-import { Grid, GridItem, GridItemContent, GridItemDescription, GridItemTitle, } from '../components/ui/grid';
-import { IconButton } from '../components/ui/icon-button';
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from '../components/ui/item';
-import { List, ListItem, ListItemContent, ListItemDescription, ListItemTitle, } from '../components/ui/list';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../components/ui/table';
+import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, } from '../components/ui/avatar.js';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from '../components/ui/carousel.js';
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '../components/ui/chart.js';
+import { Grid, GridItem, GridItemContent, GridItemDescription, GridItemTitle, } from '../components/ui/grid.js';
+import { IconButton } from '../components/ui/icon-button.js';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from '../components/ui/item.js';
+import { List, ListItem, ListItemContent, ListItemDescription, ListItemTitle, } from '../components/ui/list.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../components/ui/table.js';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+const chartData = [
+    { day: 'Mon', created: 4, completed: 2 },
+    { day: 'Tue', created: 7, completed: 5 },
+    { day: 'Wed', created: 5, completed: 6 },
+    { day: 'Thu', created: 9, completed: 7 },
+    { day: 'Fri', created: 6, completed: 8 },
+];
+const chartConfig = {
+    created: { label: 'Created', color: 'var(--chart-1)' },
+    completed: { label: 'Completed', color: 'var(--chart-2)' },
+};
 export const coreCollectionsSection = {
     id: 'collections',
     title: 'Collections',
@@ -28,8 +43,7 @@ export const coreCollectionsSection = {
             id: 'data-table',
             title: 'Dense selectable table',
             components: ['table'],
-            interactions: ['rest', 'focus-visible', 'selected', 'disabled', 'empty'],
-            render: ({ density, interaction }) => (_jsxs(Table, { density: density === 'compact' ? 'compact' : 'default', children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: interaction === 'empty' ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "text-muted-foreground", children: "No projects" }) })) : (_jsxs(_Fragment, { children: [_jsxs(TableRow, { "data-catalog-target": true, selected: interaction === 'selected', disabled: interaction === 'disabled', autoFocus: interaction === 'focus-visible', children: [_jsx(TableCell, { children: "Personal" }), _jsx(TableCell, { children: "Active" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Archive" }), _jsx(TableCell, { children: "Local" })] })] })) })] })),
+            render: () => (_jsx("div", { className: "grid gap-4", children: ['default', 'compact'].map((density) => (_jsxs("div", { children: [_jsxs("p", { className: "text-muted-foreground mb-1 text-xs capitalize", children: [density, " density"] }), _jsxs(Table, { density: density, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Status" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { selected: true, children: [_jsx(TableCell, { children: "Personal" }), _jsx(TableCell, { children: "Active" })] }), _jsxs(TableRow, { disabled: true, children: [_jsx(TableCell, { children: "Archive" }), _jsx(TableCell, { children: "Unavailable" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Work" }), _jsx(TableCell, { children: "Local" })] })] })] })] }, density))) })),
         },
         {
             id: 'item-anatomy',
@@ -38,5 +52,23 @@ export const coreCollectionsSection = {
             viewports: ['narrow'],
             render: () => (_jsx(ItemGroup, { children: _jsxs(Item, { role: "listitem", size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(FileTextIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Project brief" }), _jsx(ItemDescription, { children: "Edited five minutes ago" })] }), _jsx(ItemActions, { children: _jsx(IconButton, { label: "More actions", size: "sm", variant: "ghost", children: _jsx(MoreHorizontalIcon, {}) }) })] }) })),
         },
+        {
+            id: 'carousel-frame',
+            title: 'Static carousel frame',
+            components: ['carousel'],
+            render: () => (_jsxs(Carousel, { className: "mx-auto w-[min(100%-5rem,28rem)]", children: [_jsx(CarouselContent, { children: ['Today', 'Upcoming', 'Archive'].map((label, index) => (_jsx(CarouselItem, { children: _jsx("div", { className: "bg-card grid h-36 place-items-center rounded-md border", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "font-medium", children: label }), _jsxs("p", { className: "text-muted-foreground text-sm", children: ["Frame ", index + 1, " of 3"] })] }) }) }, label))) }), _jsx(CarouselPrevious, {}), _jsx(CarouselNext, {})] })),
+        },
+        {
+            id: 'seeded-chart',
+            title: 'Seeded activity chart',
+            components: ['chart'],
+            render: () => (_jsx(ChartContainer, { id: "catalog-activity", config: chartConfig, className: "h-64 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, data: chartData, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "day", tickLine: false, tickMargin: 8, axisLine: false }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), _jsx(Bar, { dataKey: "created", fill: "var(--color-created)", radius: [3, 3, 0, 0] }), _jsx(Bar, { dataKey: "completed", fill: "var(--color-completed)", radius: [3, 3, 0, 0] })] }) })),
+        },
+        {
+            id: 'avatar-group-overflow',
+            title: 'Avatar group overflow',
+            components: ['avatar'],
+            render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(AvatarGroup, { "aria-label": "Workspace collaborators", children: [['RM', 'AK', 'SL'].map((initials) => (_jsx(Avatar, { children: _jsx(AvatarFallback, { children: initials }) }, initials))), _jsx(AvatarGroupCount, { "aria-label": "4 more collaborators", children: "+4" })] }), _jsx("span", { className: "text-muted-foreground text-sm", children: "7 collaborators" })] })),
+        },
     ],
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"core-control-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-control-stories.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAM/D,eAAO,MAAM,mBAAmB,EAAE,wBAwPjC,CAAA"}
+{"version":3,"file":"core-control-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-control-stories.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAuC/D,eAAO,MAAM,mBAAmB,EAAE,wBAoUjC,CAAA"}

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

@@ -1,22 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BoldIcon, ItalicIcon, PlusIcon } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { ButtonGroup, ButtonGroupText } from '../components/ui/button-group';
-import { Checkbox } from '../components/ui/checkbox';
-import { ColorWell } from '../components/ui/color-well';
-import { DateField } from '../components/ui/date-field';
-import { Field, FieldContent, FieldDescription, FieldLabel, } from '../components/ui/field';
-import { IconButton } from '../components/ui/icon-button';
-import { Input } from '../components/ui/input';
-import { Kbd, KbdGroup } from '../components/ui/kbd';
-import { NumberInput } from '../components/ui/number-input';
-import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group';
-import { SearchField } from '../components/ui/search-field';
-import { SegmentedControl, SegmentedControlItem, } from '../components/ui/segmented-control';
-import { Switch } from '../components/ui/switch';
-import { Textarea } from '../components/ui/textarea';
-import { ToggleButton } from '../components/ui/toggle';
-import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group';
+import { AtSignIcon, BoldIcon, ItalicIcon, PlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { Button } from '../components/ui/button.js';
+import { ButtonGroup, ButtonGroupText } from '../components/ui/button-group.js';
+import { Checkbox } from '../components/ui/checkbox.js';
+import { ColorWell } from '../components/ui/color-well.js';
+import { DateField } from '../components/ui/date-field.js';
+import { Field, FieldContent, FieldDescription, FieldLabel, } from '../components/ui/field.js';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from '../components/ui/form.js';
+import { IconButton } from '../components/ui/icon-button.js';
+import { Input } from '../components/ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from '../components/ui/input-group.js';
+import { Kbd, KbdGroup } from '../components/ui/kbd.js';
+import { NumberInput } from '../components/ui/number-input.js';
+import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group.js';
+import { SearchField } from '../components/ui/search-field.js';
+import { SegmentedControl, SegmentedControlItem, } from '../components/ui/segmented-control.js';
+import { Switch } from '../components/ui/switch.js';
+import { Textarea } from '../components/ui/textarea.js';
+import { ToggleButton } from '../components/ui/toggle.js';
+import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group.js';
+function CatalogFormFixture() {
+    const form = useForm({
+        defaultValues: { project: '' },
+        errors: {
+            project: {
+                type: 'required',
+                message: 'Project name is required.',
+            },
+        },
+    });
+    return (_jsx(Form, { ...form, children: _jsx("form", { className: "max-w-sm", children: _jsx(FormField, { control: form.control, name: "project", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Project name" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Personal dashboard", ...field }) }), _jsx(FormDescription, { children: "Shown in the app titlebar." }), _jsx(FormMessage, {})] })) }) }) }));
+}
 function controlId(caseId, suffix) {
     return `catalog-${caseId.replaceAll('/', '-')}-${suffix}`;
 }
@@ -30,7 +45,7 @@ export const coreControlsSection = {
             components: ['button'],
             interactions: ['rest', 'focus-visible', 'disabled'],
             liveStates: ['hover', 'focus', 'pressed'],
-            render: ({ interaction }) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { "data-catalog-target": true, "data-state-target": "hover focus pressed", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', children: "Continue" }), _jsx(Button, { variant: "outline", disabled: interaction === 'disabled', children: "Cancel" })] })),
+            render: ({ interaction }) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "xs", variant: "outline", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Extra small"] }), _jsxs(Button, { size: "sm", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Small"] }), _jsxs(Button, { "data-catalog-target": true, "data-state-target": "hover focus pressed", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Default"] }), _jsxs(Button, { size: "lg", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Large"] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: ['xs', 'sm', 'default', 'lg'].map((size) => (_jsx(IconButton, { label: `Add item, ${size} size`, size: size, variant: "outline", disabled: interaction === 'disabled', children: _jsx(PlusIcon, {}) }, size))) })] })),
         },
         {
             id: 'icon-button',
@@ -75,7 +90,7 @@ export const coreControlsSection = {
                 const invalid = interaction === 'invalid' || undefined;
                 const checkboxId = controlId(caseId, 'notifications');
                 const switchId = controlId(caseId, 'sync');
-                return (_jsxs("div", { className: "grid gap-3 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", htmlFor: checkboxId, children: [_jsx(Checkbox, { "data-catalog-target": true, id: checkboxId, defaultChecked: selected, disabled: disabled, "aria-invalid": invalid }), "Notifications"] }), _jsxs("label", { className: "flex items-center gap-2", htmlFor: switchId, children: [_jsx(Switch, { id: switchId, defaultChecked: selected, disabled: disabled, "aria-invalid": invalid }), "Sync automatically"] }), _jsxs(RadioGroup, { "aria-label": "Priority", defaultValue: selected ? 'high' : 'normal', disabled: disabled, children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "normal", "aria-invalid": invalid }), "Normal priority"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "high", "aria-invalid": invalid }), "High priority"] })] })] }));
+                return (_jsxs("div", { className: "grid gap-3 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", htmlFor: checkboxId, children: [_jsx(Checkbox, { "data-catalog-target": true, id: checkboxId, defaultChecked: interaction === 'rest' || selected, disabled: disabled, "aria-invalid": invalid }), "Notifications"] }), _jsxs("label", { className: "flex items-center gap-2", htmlFor: switchId, children: [_jsx(Switch, { id: switchId, defaultChecked: selected, disabled: disabled, "aria-invalid": invalid }), "Sync automatically"] }), _jsxs(RadioGroup, { "aria-label": "Priority", defaultValue: selected ? 'high' : 'normal', disabled: disabled, children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "normal", "aria-invalid": invalid }), "Normal priority"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "high", "aria-invalid": invalid }), "High priority"] })] })] }));
             },
         },
         {
@@ -93,5 +108,18 @@ export const coreControlsSection = {
             interactions: ['rest', 'focus-visible', 'disabled', 'invalid'],
             render: ({ interaction }) => (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsx(Textarea, { "data-catalog-target": true, "aria-label": "Notes", defaultValue: "Keep the interface quiet and direct.", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(NumberInput, { "aria-label": "Duration", defaultValue: 25, unit: "min", disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined, className: "w-32" }), _jsx(ColorWell, { "aria-label": "Accent color", value: "#ff6b4a", disabled: interaction === 'disabled' })] })] })),
         },
+        {
+            id: 'input-groups',
+            title: 'Input groups and labels',
+            components: ['input-group', 'label'],
+            liveStates: ['focus'],
+            render: () => (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(AtSignIcon, {}) }), _jsx(InputGroupInput, { "data-state-target": "focus", "aria-label": "Username", value: "moldable", readOnly: true }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: ".sh" }) })] }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { "aria-label": "Invite address", placeholder: "person@example.com" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { children: "Invite" }) })] }), _jsx(InputGroup, { "data-disabled": "true", children: _jsx(InputGroupInput, { "aria-label": "Disabled workspace URL", value: "local-only", disabled: true, readOnly: true }) })] })),
+        },
+        {
+            id: 'validated-form',
+            title: 'Validated form adapter',
+            components: ['form'],
+            render: () => _jsx(CatalogFormFixture, {}),
+        },
     ],
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"core-feedback-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-feedback-stories.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,mBAAmB,EAAE,wBAsFjC,CAAA"}
+{"version":3,"file":"core-feedback-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-feedback-stories.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAqC/D,eAAO,MAAM,mBAAmB,EAAE,wBAwMjC,CAAA"}

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"}