@moldable-ai/ui 0.2.18 → 0.2.20

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

@@ -0,0 +1,6 @@
+import { type CatalogCase, type CatalogCaseFilter, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition } from './catalog-types';
+export declare function createCatalogStory(story: CatalogStoryDefinition): CatalogStoryDefinition;
+export declare function createCatalogSection(section: CatalogSectionDefinition): CatalogSectionDefinition;
+export declare function createCatalogManifest(manifest: CatalogManifest): CatalogManifest;
+export declare function buildCatalogCases(manifest: CatalogManifest, filter?: CatalogCaseFilter): CatalogCase[];
+//# sourceMappingURL=catalog-manifest.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-manifest.d.ts","sourceRoot":"","sources":["../../src/catalog/catalog-manifest.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EAGtB,KAAK,eAAe,EACpB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAG5B,MAAM,iBAAiB,CAAA;AA8BxB,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,sBAAsB,GAC5B,sBAAsB,CAGxB;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,wBAAwB,GAChC,wBAAwB,CAG1B;AAED,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,eAAe,GACxB,eAAe,CAuBjB;AA4BD,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,eAAe,EACzB,MAAM,GAAE,iBAAsB,GAC7B,WAAW,EAAE,CA4Df"}

package/dist/catalog/catalog-manifest.js

@@ -0,0 +1,105 @@
+import { catalogDensities, catalogThemes, catalogViewports, } from './catalog-types';
+const catalogIdPattern = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+function assertCatalogId(id, kind) {
+    if (!catalogIdPattern.test(id)) {
+        throw new Error(`Catalog ${kind} id "${id}" must be a lowercase kebab-case identifier.`);
+    }
+}
+function uniqueAxes(values, storyId, axis) {
+    if (values.length === 0) {
+        throw new Error(`Catalog story "${storyId}" has no ${axis} cases.`);
+    }
+    if (new Set(values).size !== values.length) {
+        throw new Error(`Catalog story "${storyId}" contains duplicate ${axis} cases.`);
+    }
+    return values;
+}
+export function createCatalogStory(story) {
+    assertCatalogId(story.id, 'story');
+    return story;
+}
+export function createCatalogSection(section) {
+    assertCatalogId(section.id, 'section');
+    return section;
+}
+export function createCatalogManifest(manifest) {
+    const sectionIds = new Set();
+    for (const section of manifest.sections) {
+        assertCatalogId(section.id, 'section');
+        if (sectionIds.has(section.id)) {
+            throw new Error(`Duplicate catalog section id "${section.id}".`);
+        }
+        sectionIds.add(section.id);
+        const storyIds = new Set();
+        for (const story of section.stories) {
+            assertCatalogId(story.id, 'story');
+            if (storyIds.has(story.id)) {
+                throw new Error(`Duplicate story id "${story.id}" in section "${section.id}".`);
+            }
+            storyIds.add(story.id);
+        }
+    }
+    return manifest;
+}
+function createCaseId(context) {
+    return [
+        context.sectionId,
+        context.storyId,
+        context.theme,
+        context.density,
+        context.viewport,
+        context.interaction,
+    ].join('/');
+}
+function matchesFilter(catalogCase, filter) {
+    return ((filter.sectionId === undefined ||
+        catalogCase.sectionId === filter.sectionId) &&
+        (filter.storyId === undefined ||
+            catalogCase.storyId === filter.storyId) &&
+        (filter.theme === undefined || catalogCase.theme === filter.theme) &&
+        (filter.density === undefined || catalogCase.density === filter.density) &&
+        (filter.viewport === undefined ||
+            catalogCase.viewport === filter.viewport) &&
+        (filter.interaction === undefined ||
+            catalogCase.interaction === filter.interaction));
+}
+export function buildCatalogCases(manifest, filter = {}) {
+    createCatalogManifest(manifest);
+    const cases = [];
+    for (const section of manifest.sections) {
+        for (const story of section.stories) {
+            const themes = uniqueAxes(story.themes ?? catalogThemes, story.id, 'theme');
+            const densities = uniqueAxes(story.densities ?? catalogDensities, story.id, 'density');
+            const viewports = uniqueAxes(story.viewports ?? catalogViewports, story.id, 'viewport');
+            const interactions = uniqueAxes(story.interactions ?? ['rest'], story.id, 'interaction');
+            for (const theme of themes) {
+                for (const density of densities) {
+                    for (const viewport of viewports) {
+                        for (const interaction of interactions) {
+                            const context = {
+                                sectionId: section.id,
+                                storyId: story.id,
+                                theme,
+                                density,
+                                viewport,
+                                interaction,
+                            };
+                            const catalogCase = {
+                                ...context,
+                                caseId: createCaseId(context),
+                                sectionTitle: section.title,
+                                storyTitle: story.title,
+                                storyDescription: story.description,
+                                render: story.render,
+                            };
+                            if (matchesFilter(catalogCase, filter)) {
+                                cases.push(catalogCase);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return cases;
+}

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

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+export declare const catalogThemes: readonly ["light", "dark"];
+export declare const catalogDensities: readonly ["regular", "compact"];
+export declare const catalogViewports: readonly ["wide", "narrow"];
+export declare const catalogInteractions: readonly ["rest", "hover", "focus-visible", "pressed", "selected", "disabled", "invalid", "loading", "empty"];
+export type CatalogTheme = (typeof catalogThemes)[number];
+export type CatalogDensity = (typeof catalogDensities)[number];
+export type CatalogViewport = (typeof catalogViewports)[number];
+export type CatalogInteraction = (typeof catalogInteractions)[number];
+export interface CatalogCaseContext {
+    caseId: string;
+    sectionId: string;
+    storyId: string;
+    theme: CatalogTheme;
+    density: CatalogDensity;
+    viewport: CatalogViewport;
+    interaction: CatalogInteraction;
+}
+export interface CatalogStoryDefinition {
+    id: string;
+    title: string;
+    description?: React.ReactNode;
+    themes?: readonly CatalogTheme[];
+    densities?: readonly CatalogDensity[];
+    viewports?: readonly CatalogViewport[];
+    interactions?: readonly CatalogInteraction[];
+    render: (context: CatalogCaseContext) => React.ReactNode;
+}
+export interface CatalogSectionDefinition {
+    id: string;
+    title: string;
+    description?: React.ReactNode;
+    stories: readonly CatalogStoryDefinition[];
+}
+export interface CatalogManifest {
+    title: string;
+    description?: React.ReactNode;
+    sections: readonly CatalogSectionDefinition[];
+}
+export interface CatalogCase extends CatalogCaseContext {
+    sectionTitle: string;
+    storyTitle: string;
+    storyDescription?: React.ReactNode;
+    render: CatalogStoryDefinition['render'];
+}
+export interface CatalogCaseFilter {
+    sectionId?: string;
+    storyId?: string;
+    theme?: CatalogTheme;
+    density?: CatalogDensity;
+    viewport?: CatalogViewport;
+    interaction?: CatalogInteraction;
+}
+//# sourceMappingURL=catalog-types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-types.d.ts","sourceRoot":"","sources":["../../src/catalog/catalog-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,eAAO,MAAM,aAAa,4BAA6B,CAAA;AACvD,eAAO,MAAM,gBAAgB,iCAAkC,CAAA;AAC/D,eAAO,MAAM,gBAAgB,6BAA8B,CAAA;AAC3D,eAAO,MAAM,mBAAmB,+GAUtB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,YAAY,CAAA;IACnB,OAAO,EAAE,cAAc,CAAA;IACvB,QAAQ,EAAE,eAAe,CAAA;IACzB,WAAW,EAAE,kBAAkB,CAAA;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,MAAM,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACrC,SAAS,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IACtC,YAAY,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IAC5C,MAAM,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAA;CACzD;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAA;CAC3C;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,QAAQ,EAAE,SAAS,wBAAwB,EAAE,CAAA;CAC9C;AAED,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,WAAW,CAAC,EAAE,kBAAkB,CAAA;CACjC"}

package/dist/catalog/catalog-types.js

@@ -0,0 +1,14 @@
+export const catalogThemes = ['light', 'dark'];
+export const catalogDensities = ['regular', 'compact'];
+export const catalogViewports = ['wide', 'narrow'];
+export const catalogInteractions = [
+    'rest',
+    'hover',
+    'focus-visible',
+    'pressed',
+    'selected',
+    'disabled',
+    'invalid',
+    'loading',
+    'empty',
+];

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { CatalogCase, CatalogCaseFilter, CatalogManifest } from './catalog-types';
+export interface ComponentCatalogProps extends Omit<React.ComponentProps<'main'>, 'children'> {
+    manifest: CatalogManifest;
+    filter?: CatalogCaseFilter;
+    showCaseLabels?: boolean;
+}
+export interface CatalogCaseFrameProps extends Omit<React.ComponentProps<'article'>, 'children'> {
+    catalogCase: CatalogCase;
+    showLabel?: boolean;
+}
+export declare function CatalogCaseFrame({ catalogCase, showLabel, className, ...props }: CatalogCaseFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentCatalog({ manifest, filter, showCaseLabels, className, ...props }: ComponentCatalogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=component-catalog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/component-catalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EACV,WAAW,EACX,iBAAiB,EACjB,eAAe,EAChB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACtD,QAAQ,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IACzD,WAAW,EAAE,WAAW,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAWD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,SAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAyCvB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,cAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA0GvB"}

package/dist/catalog/component-catalog.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { buildCatalogCases } from './catalog-manifest';
+function caseLabel(catalogCase) {
+    return [
+        catalogCase.theme,
+        catalogCase.density,
+        catalogCase.viewport,
+        catalogCase.interaction,
+    ].join(' · ');
+}
+export function CatalogCaseFrame({ catalogCase, showLabel = true, className, ...props }) {
+    const isDark = catalogCase.theme === 'dark';
+    return (_jsxs("article", { "data-slot": "catalog-case", "data-catalog-case": catalogCase.caseId, "data-theme": catalogCase.theme, "data-density": catalogCase.density, "data-viewport": catalogCase.viewport, "data-interaction": catalogCase.interaction, "aria-label": `${catalogCase.storyTitle}: ${caseLabel(catalogCase)}`, className: cn('bg-background text-foreground isolate overflow-hidden rounded-lg border border-border shadow-sm', catalogCase.viewport === 'narrow'
+            ? 'w-full max-w-80'
+            : 'w-full max-w-3xl', isDark && 'dark', className), ...props, children: [showLabel ? (_jsx("header", { "data-slot": "catalog-case-label", className: "border-b border-border bg-muted/40 px-3 py-2 font-mono text-[11px] leading-4 text-muted-foreground", children: caseLabel(catalogCase) })) : null, _jsx("div", { "data-slot": "catalog-case-stage", className: cn('min-h-24 bg-background text-foreground', catalogCase.density === 'compact' ? 'p-2' : 'p-4'), children: catalogCase.render(catalogCase) })] }));
+}
+export function ComponentCatalog({ manifest, filter, showCaseLabels = true, className, ...props }) {
+    const cases = buildCatalogCases(manifest, filter);
+    const groupedCases = new Map();
+    for (const catalogCase of cases) {
+        const key = `${catalogCase.sectionId}/${catalogCase.storyId}`;
+        const storyCases = groupedCases.get(key) ?? [];
+        storyCases.push(catalogCase);
+        groupedCases.set(key, storyCases);
+    }
+    return (_jsxs("main", { "data-slot": "component-catalog", className: cn('min-h-full bg-muted/20 p-4 text-foreground sm:p-6', className), ...props, children: [_jsxs("header", { className: "mx-auto mb-8 max-w-7xl", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: manifest.title }), manifest.description ? (_jsx("div", { className: "mt-2 max-w-3xl text-sm text-muted-foreground", children: manifest.description })) : null] }), _jsx("div", { className: "mx-auto grid max-w-7xl gap-10", children: manifest.sections.map((section) => {
+                    const storyGroups = section.stories
+                        .map((story) => ({
+                        story,
+                        cases: groupedCases.get(`${section.id}/${story.id}`) ?? [],
+                    }))
+                        .filter((group) => group.cases.length > 0);
+                    if (storyGroups.length === 0)
+                        return null;
+                    return (_jsxs("section", { "data-slot": "catalog-section", "data-catalog-section": section.id, "aria-labelledby": `catalog-section-${section.id}`, children: [_jsxs("div", { className: "mb-4", children: [_jsx("h2", { id: `catalog-section-${section.id}`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("div", { className: "mt-1 max-w-3xl text-sm text-muted-foreground", children: section.description })) : null] }), _jsx("div", { className: "grid gap-8", children: storyGroups.map(({ story, cases: storyCases }) => (_jsxs("section", { "data-slot": "catalog-story", "data-catalog-story": story.id, "aria-labelledby": `catalog-story-${section.id}-${story.id}`, children: [_jsxs("div", { className: "mb-3", children: [_jsx("h3", { id: `catalog-story-${section.id}-${story.id}`, className: "text-sm font-medium", children: story.title }), story.description ? (_jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: story.description })) : null] }), _jsx("div", { "data-slot": "catalog-case-grid", className: "grid items-start gap-4 xl:grid-cols-2", children: storyCases.map((catalogCase) => (_jsx(CatalogCaseFrame, { catalogCase: catalogCase, showLabel: showCaseLabels }, catalogCase.caseId))) })] }, story.id))) })] }, section.id));
+                }) })] }));
+}

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

@@ -0,0 +1,6 @@
+/**
+ * A small smoke catalog that proves the renderer and semantic token surface.
+ * Product teams should compose a broader manifest from their own public API.
+ */
+export declare const coreComponentCatalog: import("./catalog-types").CatalogManifest;
+//# sourceMappingURL=core-catalog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"core-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog.tsx"],"names":[],"mappings":"AAkCA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,2CAkO/B,CAAA"}

package/dist/catalog/core-catalog.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppFrame, AppFrameContent, AppFrameTitlebar, AppFrameToolbar, } from '../components/ui/app-frame';
+import { Badge } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import { DateField } from '../components/ui/date-field';
+import { Grid, GridItem, GridItemContent, GridItemDescription, GridItemTitle, } from '../components/ui/grid';
+import { IconButton } from '../components/ui/icon-button';
+import { Input } from '../components/ui/input';
+import { List, ListItem, ListItemContent, ListItemDescription, ListItemTitle, } from '../components/ui/list';
+import { SearchField } from '../components/ui/search-field';
+import { SegmentedControl, SegmentedControlItem, } from '../components/ui/segmented-control';
+import { Status } from '../components/ui/status';
+import { createCatalogManifest } from './catalog-manifest';
+import { PlusIcon } from 'lucide-react';
+/**
+ * A small smoke catalog that proves the renderer and semantic token surface.
+ * Product teams should compose a broader manifest from their own public API.
+ */
+export const coreComponentCatalog = createCatalogManifest({
+    title: 'Moldable UI component catalog',
+    description: 'Deterministic component cases for review and visual regression coverage.',
+    sections: [
+        {
+            id: 'window-foundations',
+            title: 'Window foundations',
+            stories: [
+                {
+                    id: 'app-frame',
+                    title: 'App frame',
+                    interactions: ['rest', 'empty'],
+                    render: ({ interaction }) => (_jsxs(AppFrame, { mode: "window", className: "h-56 rounded-container border", children: [_jsx(AppFrameTitlebar, { children: _jsx(AppFrameToolbar, { children: _jsx("strong", { className: "text-sm", children: "Calendar" }) }) }), _jsx(AppFrameContent, { className: "grid place-items-center p-4", children: _jsx("span", { className: "text-sm text-muted-foreground", children: interaction === 'empty'
+                                        ? 'No events yet'
+                                        : 'App-owned canvas' }) })] })),
+                },
+            ],
+        },
+        {
+            id: 'controls',
+            title: 'Controls',
+            stories: [
+                {
+                    id: 'button',
+                    title: 'Button',
+                    interactions: ['rest', 'focus-visible', 'disabled'],
+                    render: ({ interaction }) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', children: "Continue" }), _jsx(Button, { variant: "outline", disabled: interaction === 'disabled', children: "Cancel" })] })),
+                },
+                {
+                    id: 'icon-button',
+                    title: 'Icon button',
+                    interactions: ['rest', 'focus-visible', 'disabled', 'loading'],
+                    render: ({ interaction }) => (_jsx(IconButton, { label: "New item", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', loading: interaction === 'loading', variant: "ghost", children: _jsx(PlusIcon, {}) })),
+                },
+                {
+                    id: 'segmented-control',
+                    title: 'Segmented control',
+                    interactions: ['rest', 'focus-visible', 'disabled'],
+                    render: ({ interaction }) => (_jsxs(SegmentedControl, { "aria-label": "Calendar view", defaultValue: "month", disabled: interaction === 'disabled', children: [_jsx(SegmentedControlItem, { value: "week", autoFocus: interaction === 'focus-visible', children: "Week" }), _jsx(SegmentedControlItem, { value: "month", children: "Month" })] })),
+                },
+                {
+                    id: 'text-field',
+                    title: 'Text field',
+                    interactions: ['rest', 'focus-visible', 'disabled', 'invalid'],
+                    render: ({ interaction }) => (_jsxs("div", { className: "grid max-w-sm gap-1.5", children: [_jsx("label", { htmlFor: `catalog-input-${interaction}`, className: "text-sm", children: "Project name" }), _jsx(Input, { id: `catalog-input-${interaction}`, defaultValue: "Personal dashboard", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined })] })),
+                },
+                {
+                    id: 'search-and-date-fields',
+                    title: 'Search and date fields',
+                    interactions: ['rest', 'focus-visible', 'disabled', 'invalid'],
+                    render: ({ interaction }) => (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(SearchField, { "aria-label": "Search events", placeholder: "Search", defaultValue: interaction === 'rest' ? 'Planning' : '', autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined }), _jsx(DateField, { "aria-label": "Due date", defaultValue: "2026-07-26", disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined })] })),
+                },
+            ],
+        },
+        {
+            id: 'collections',
+            title: 'Collections',
+            stories: [
+                {
+                    id: 'selectable-list',
+                    title: 'Selectable list',
+                    viewports: ['narrow'],
+                    interactions: ['rest', 'focus-visible', 'selected', 'disabled'],
+                    render: ({ interaction }) => (_jsxs(List, { "aria-label": "Documents", selectionMode: "single", defaultSelectedValues: interaction === 'selected' ? ['brief'] : undefined, children: [_jsx(ListItem, { value: "brief", autoFocus: interaction === 'focus-visible', children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Project brief" }), _jsx(ListItemDescription, { children: "Edited recently" })] }) }), _jsx(ListItem, { value: "archive", disabled: interaction === 'disabled', children: _jsxs(ListItemContent, { children: [_jsx(ListItemTitle, { children: "Archive" }), _jsx(ListItemDescription, { children: "Local documents" })] }) })] })),
+                },
+                {
+                    id: 'selectable-grid',
+                    title: 'Selectable grid',
+                    interactions: ['rest', 'focus-visible', 'selected', 'disabled'],
+                    render: ({ interaction, viewport }) => (_jsxs(Grid, { "aria-label": "Projects", columns: viewport === 'narrow' ? 1 : 2, selectionMode: "single", defaultSelectedValues: interaction === 'selected' ? ['personal'] : undefined, children: [_jsx(GridItem, { value: "personal", autoFocus: interaction === 'focus-visible', children: _jsxs(GridItemContent, { children: [_jsx(GridItemTitle, { children: "Personal" }), _jsx(GridItemDescription, { children: "8 items" })] }) }), _jsx(GridItem, { value: "work", disabled: interaction === 'disabled', children: _jsxs(GridItemContent, { children: [_jsx(GridItemTitle, { children: "Work" }), _jsx(GridItemDescription, { children: "12 items" })] }) })] })),
+                },
+            ],
+        },
+        {
+            id: 'feedback',
+            title: 'Feedback',
+            stories: [
+                {
+                    id: 'status-and-badges',
+                    title: 'Status and badges',
+                    viewports: ['narrow'],
+                    render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Status, { variant: "running", children: "Running" }), _jsx(Badge, { variant: "secondary", children: "Draft" }), _jsx(Badge, { variant: "outline", children: "Local" })] })),
+                },
+            ],
+        },
+    ],
+});

package/dist/catalog/index.d.ts

@@ -0,0 +1,5 @@
+export { buildCatalogCases, createCatalogManifest, createCatalogSection, createCatalogStory, } from './catalog-manifest';
+export { CatalogCaseFrame, ComponentCatalog, type CatalogCaseFrameProps, type ComponentCatalogProps, } from './component-catalog';
+export { coreComponentCatalog } from './core-catalog';
+export { catalogDensities, catalogInteractions, catalogThemes, catalogViewports, type CatalogCase, type CatalogCaseContext, type CatalogCaseFilter, type CatalogDensity, type CatalogInteraction, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition, type CatalogTheme, type CatalogViewport, } from './catalog-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/catalog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/catalog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,iBAAiB,CAAA"}

package/dist/catalog/index.js

@@ -0,0 +1,4 @@
+export { buildCatalogCases, createCatalogManifest, createCatalogSection, createCatalogStory, } from './catalog-manifest';
+export { CatalogCaseFrame, ComponentCatalog, } from './component-catalog';
+export { coreComponentCatalog } from './core-catalog';
+export { catalogDensities, catalogInteractions, catalogThemes, catalogViewports, } from './catalog-types';

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

@@ -11,6 +11,7 @@ interface AppErrorBoundaryState {
     source: AppErrorSource;
     componentStack: string | null;
 }
+export declare function isBenignRuntimeRejection(value: unknown): boolean;
 export declare class AppErrorBoundary extends Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
     state: AppErrorBoundaryState;
     static getDerivedStateFromError(error: Error): Partial<AppErrorBoundaryState>;

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;AAqDD,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,CAK/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;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"}

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

@@ -15,6 +15,14 @@ function toError(value) {
         return new Error(String(value));
     }
 }
+export function isBenignRuntimeRejection(value) {
+    const error = toError(value);
+    const source = `${error.message}\n${error.stack ?? ''}`;
+    const fromViteClient = source.includes('/@vite/client');
+    const isHmrSocketClosure = /WebSocket closed without (?:being )?opened/i.test(error.message) ||
+        /WebSocket closed before (?:the )?connection was established/i.test(error.message);
+    return fromViteClient && isHmrSocketClosure;
+}
 function formatError(error, source, componentStack) {
     const parts = [`${error.name}: ${error.message}`];
     if (error.stack) {
@@ -79,6 +87,11 @@ export class AppErrorBoundary extends Component {
         reportClientErrorToMoldable(this.props.appName, error, 'window', null);
     };
     handleUnhandledRejection = (event) => {
+        if (isBenignRuntimeRejection(event.reason)) {
+            event.preventDefault();
+            console.info(`${this.props.appName} development connection restarted; waiting for Vite to reconnect.`);
+            return;
+        }
         const error = toError(event.reason);
         console.error(`${this.props.appName} unhandled promise rejection:`, error);
         this.setState({ error, source: 'promise', componentStack: null });

package/dist/components/chat/chat-image-lightbox.d.ts

@@ -0,0 +1,9 @@
+type ChatImageLightboxProps = {
+    src: string;
+    alt: string;
+    className?: string;
+    imageClassName?: string;
+};
+export declare function ChatImageLightbox({ src, alt, className, imageClassName, }: ChatImageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=chat-image-lightbox.d.ts.map

package/dist/components/chat/chat-image-lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-image-lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-image-lightbox.tsx"],"names":[],"mappings":"AAMA,KAAK,sBAAsB,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,GAAG,EACH,SAAS,EACT,cAAc,GACf,EAAE,sBAAsB,2CA6BxB"}

package/dist/components/chat/chat-image-lightbox.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../lib/utils';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+export function ChatImageLightbox({ src, alt, className, imageClassName, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: cn('focus-visible:ring-ring cursor-zoom-in overflow-hidden focus-visible:outline-none focus-visible:ring-2', className), onClick: () => setOpen(true), "aria-label": `View ${alt}`, children: _jsx("img", { src: src, alt: alt, className: imageClassName, draggable: false }) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "h-[min(88vh,900px)] max-w-[min(92vw,1200px)] overflow-hidden border-0 bg-black/95 p-3 shadow-2xl [&_[data-slot=dialog-close]]:focus:outline-none [&_[data-slot=dialog-close]]:focus:ring-0 [&_[data-slot=dialog-close]]:focus:ring-offset-0 [&_[data-slot=dialog-close]]:focus-visible:outline-none [&_[data-slot=dialog-close]]:focus-visible:ring-0", children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("img", { src: src, alt: alt, className: "size-full object-contain", draggable: false })] }) })] }));
+}

package/dist/components/chat/chat-message.d.ts

@@ -1,6 +1,9 @@
 export type ChatMessagePart = {
     type: 'text';
     text: string;
+} | {
+    type: 'error';
+    text: string;
 } | {
     type: 'reasoning';
     text: string;
@@ -10,6 +13,7 @@ export type ChatMessagePart = {
     filename?: string;
     url: string;
     previewUrl?: string;
+    presentation?: 'thumbnail' | 'full';
 } | {
     type: 'tool-invocation';
     toolCallId?: string;
@@ -24,6 +28,17 @@ export type ChatMessagePart = {
 };
 export type ChatMessage = {
     id: string;
+    /** Stable persisted row identity. Semantic message IDs may be duplicated. */
+    storeSequence?: number;
+    /** Host-computed hash for targeted compare-and-swap replacement. */
+    storeHash?: string;
+    /** Opaque reference for a large persisted row omitted from a bounded page. */
+    contentRef?: {
+        hash: string;
+        serializedBytes: number;
+        mediaType?: string;
+        omitted: true;
+    };
     role: 'user' | 'assistant' | 'system';
     content?: string;
     parts?: ChatMessagePart[];
@@ -33,12 +48,15 @@ export type ChatMessage = {
         completedAtMs?: number;
     };
 };
+export declare function getChatMessageRenderKey(message: ChatMessage, legacyIndex: number): string;
 type MessageProps = {
     message: ChatMessage;
     isLast?: boolean;
     isStreaming?: boolean;
+    animateEntry?: boolean;
+    onRetryError?: () => void;
 };
-declare function PureMessage({ message, isLast, isStreaming, }: MessageProps): import("react/jsx-runtime").JSX.Element;
+declare function PureMessage({ message, isLast, isStreaming, animateEntry, onRetryError, }: MessageProps): import("react/jsx-runtime").JSX.Element;
 export declare const Message: import("react").MemoExoticComponent<typeof PureMessage>;
 export declare function ThinkingMessage(): import("react/jsx-runtime").JSX.Element;
 export declare function CompactingMessage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/chat/chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message.tsx"],"names":[],"mappings":"AA+BA,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACnC;IACE,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GACD;IACE,IAAI,EAAE,iBAAiB,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAA;QACV,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;CACF,CAAA;AAEL,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAsvBD,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,MAAc,EACd,WAAmB,GACpB,EAAE,YAAY,2CAqgBd;AAED,eAAO,MAAM,OAAO,yDAAoB,CAAA;AAExC,wBAAgB,eAAe,4CAc9B;AAED,wBAAgB,iBAAiB,4CAkBhC"}
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message.tsx"],"names":[],"mappings":"AAqCA,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACnC;IACE,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;CACpC,GACD;IACE,IAAI,EAAE,iBAAiB,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAA;QACV,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;CACF,CAAA;AAEL,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,eAAe,EAAE,MAAM,CAAA;QACvB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,OAAO,EAAE,IAAI,CAAA;KACd,CAAA;IACD,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,IAAI,CAAC,EAAE;QACL,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;CACF,CAAA;AAED,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,MAAM,GAClB,MAAM,CAIR;AAED,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAwwBD,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,MAAc,EACd,WAAmB,EACnB,YAAmB,EACnB,YAAY,GACb,EAAE,YAAY,2CAwmBd;AAED,eAAO,MAAM,OAAO,yDAAoB,CAAA;AAExC,wBAAgB,eAAe,4CAc9B;AAED,wBAAgB,iBAAiB,4CAkBhC"}