ui-lab-registry 0.3.44 → 0.3.45

package/dist/components/Flex/examples/02-wrap-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-wrap-overflow.js","sourceRoot":"","sources":["../../../../src/components/Flex/examples/02-wrap-overflow.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAU/C,MAAM,eAAe,GAAG;IACtB,cAAc,EAAE,uBAAuB;IACvC,sBAAsB,EAAE,uBAAuB;CACzB,CAAC;AAEzB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,6FAA6F;CAC3G,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAiB;IACpC;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;SACrC;QACD,YAAY,EAAE,KAAK;KACpB;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE;YAC5C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC1C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;SAC3C;QACD,YAAY,EAAE,OAAO;KACtB;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;SACzC;QACD,YAAY,EAAE,SAAS;KACxB;IACD;QACE,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE;YACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;YAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE;SACtC;QACD,YAAY,EAAE,IAAI;KACnB;IACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,CAAC;QACf,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;YACrC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;SACjC;QACD,YAAY,EAAE,MAAM;KACrB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,OAAgB,CAAC;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;AAE9B,SAAS,YAAY,CAAC,KAAc;IAClC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;AAC/C,CAAC;AAED,SAAS,UAAU,CAAC,KAAc;IAChC,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC3H,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,QAAQ,CAAC,KAAc;IAC9B,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,UAAU;QAAE,OAAO,KAAK,CAAC;IACrG,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,MAAM,CAAC,KAAc;IAC5B,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IACvF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CAAC,KAAc;IAC7B,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC9C,CAAC;AAED,SAAS,aAAa,CAAC,KAAc,EAAE,GAAW,EAAE,GAAW,EAAE,QAAgB;IAC/E,MAAM,CAAC,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5D,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAAE,OAAO,QAAQ,CAAC;IACrC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuD;IAC1F,OAAO,CACL,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,YACtF,cAAK,SAAS,EAAC,WAAW,GAAG,GACvB,CACT,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,SAAwB,EAAE,UAAkB;IACvE,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,OAAO,GAAG;YACd,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;YAC/C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YAC5C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;YAC/C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;SAChD,CAAC;QACF,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;IACjH,CAAC;IACD,MAAM,aAAa,GAAG;QACpB,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QACtE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QACzE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QACxE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QACxE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QACxE,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;KACzE,CAAC;IACF,OAAO;QACL,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;QACnH,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;KAC1G,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAA8B;IAC1D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IAEzD,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,EAClC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAC5B,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EACtB,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EACzB,SAAS,EAAC,QAAQ,YAEjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,SAAS,IAAuC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAA4B,IAApG,GAAG,SAAS,YAAY,KAAK,EAAE,CAAyE,CACzH,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC;AACxH,CAAC"}

package/dist/components/Flex/examples/03-container-query-reflow.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-container-query-reflow.d.ts.map

package/dist/components/Flex/examples/03-container-query-reflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-container-query-reflow.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/examples/03-container-query-reflow.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AA2CzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EAmDhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAsD9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAgC3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Flex/examples/03-container-query-reflow.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Flex, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+const CONTAINER_FLOW_STYLES = `
+  .flex-container-flow-avatar {
+    width: 5rem;
+    min-width: 5rem;
+    flex-grow: 0.65;
+    flex-shrink: 1;
+  }
+
+  .flex-container-flow-main {
+    width: 15rem;
+    min-width: 14rem;
+    flex-grow: 2;
+    flex-shrink: 1;
+  }
+
+  .flex-container-flow-sidebar {
+    width: 10rem;
+    min-width: 10rem;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  @container flex-parent (width < 400px) {
+    .flex-container-flow-avatar,
+    .flex-container-flow-main,
+    .flex-container-flow-sidebar {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+`;
+export const metadata = {
+    title: 'Container-Query Reflow',
+    description: 'With containerQueryResponsive enabled, the layout reflows based on available container width rather than viewport size.',
+};
+export const controls = [
+    {
+        name: 'gap',
+        label: 'Base Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Extra Small', value: 'xs' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'frameCount',
+        label: 'Frames',
+        type: 'stepper',
+        defaultValue: 5,
+        min: 5,
+        max: 10,
+        step: 1,
+    },
+    {
+        name: 'justify',
+        label: 'Main-Axis Distribution',
+        type: 'select',
+        options: [
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'Space Between', value: 'between' },
+            { label: 'Space Around', value: 'around' },
+        ],
+        defaultValue: 'start',
+    },
+    {
+        name: 'wrap',
+        label: 'Overflow Strategy',
+        type: 'select',
+        options: [
+            { label: 'No Wrap', value: 'nowrap' },
+            { label: 'Wrap', value: 'wrap' },
+        ],
+        defaultValue: 'nowrap',
+    },
+    {
+        name: 'containerQueryResponsive',
+        label: 'Enable Container Queries',
+        type: 'toggle',
+        defaultValue: true,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getJustify(value) {
+    if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly')
+        return value;
+    return 'start';
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getWrap(value) {
+    return value === 'wrap' ? 'wrap' : 'nowrap';
+}
+function getFrameCount(value, min, max, fallback) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+function FrameCell({ className, style }) {
+    return (_jsx(Frame, { pathStroke: "dashed", className: className, style: { ...BASE_CELL_STYLE, ...style }, children: _jsx("div", { className: "size-full" }) }));
+}
+function getDistribution(frameCount) {
+    let metadataCount = 2;
+    let sidebarCount = 1;
+    let remaining = Math.max(frameCount - 5, 0);
+    while (remaining > 0) {
+        metadataCount += 1;
+        remaining -= 1;
+        if (remaining > 0) {
+            sidebarCount += 1;
+            remaining -= 1;
+        }
+    }
+    return { metadataCount, sidebarCount };
+}
+const META_PATTERN = [
+    { className: 'min-w-[4.75rem] flex-1', style: { width: 'auto', minWidth: '4.75rem', height: '2.25rem' } },
+    { className: 'min-w-[4rem] flex-1', style: { width: 'auto', minWidth: '4rem', height: '2.25rem' } },
+    { className: 'min-w-[5.25rem] flex-1', style: { width: 'auto', minWidth: '5.25rem', height: '2.25rem' } },
+];
+const SIDEBAR_PATTERN = [
+    { style: { width: '100%', height: '7rem' } },
+    { style: { width: '100%', height: '3rem' } },
+    { style: { width: '100%', height: '2.5rem' } },
+];
+export function renderPreview(props) {
+    const frameCount = getFrameCount(props.frameCount, 5, 10, 5);
+    const { metadataCount, sidebarCount } = getDistribution(frameCount);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: CONTAINER_FLOW_STYLES }), _jsxs(Flex, { justify: getJustify(props.justify), align: "stretch", gap: getGap(props.gap), wrap: getWrap(props.wrap), containerQueryResponsive: Boolean(props.containerQueryResponsive), className: "w-full", children: [_jsx(FrameCell, { className: "flex-container-flow-avatar", style: { height: '7rem' } }), _jsxs(Flex, { direction: "column", gap: "sm", className: "flex-container-flow-main", children: [_jsx(FrameCell, { style: { width: '100%', height: '4.5rem' } }), _jsx(Flex, { gap: "sm", wrap: "wrap", className: "w-full", children: Array.from({ length: metadataCount }, (_, i) => META_PATTERN[i % META_PATTERN.length]).map((spec, i) => (_jsx(FrameCell, { className: spec.className, style: spec.style }, `meta-${i}`))) })] }), _jsx(Flex, { direction: "column", gap: "sm", className: "flex-container-flow-sidebar", children: Array.from({ length: sidebarCount }, (_, i) => SIDEBAR_PATTERN[i % SIDEBAR_PATTERN.length]).map((spec, i) => (_jsx(FrameCell, { className: "w-full", style: spec.style }, `sidebar-${i}`))) })] })] }));
+}
+export default function Example() {
+    return renderPreview({ gap: 'md', frameCount: 5, justify: 'start', wrap: 'nowrap', containerQueryResponsive: true });
+}
+//# sourceMappingURL=03-container-query-reflow.js.map

package/dist/components/Flex/examples/03-container-query-reflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-container-query-reflow.js","sourceRoot":"","sources":["../../../../src/components/Flex/examples/03-container-query-reflow.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAQ/C,MAAM,eAAe,GAAG;IACtB,cAAc,EAAE,uBAAuB;IACvC,sBAAsB,EAAE,uBAAuB;CACzB,CAAC;AAEzB,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B7B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,wBAAwB;IAC/B,WAAW,EAAE,yHAAyH;CACvI,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAiB;IACpC;QACE,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE;YACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;YAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE;SACtC;QACD,YAAY,EAAE,IAAI;KACnB;IACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,CAAC;QACf,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE;YAC5C,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;SAC3C;QACD,YAAY,EAAE,OAAO;KACtB;IACD;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;YACrC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;SACjC;QACD,YAAY,EAAE,QAAQ;KACvB;IACD;QACE,IAAI,EAAE,0BAA0B;QAChC,KAAK,EAAE,0BAA0B;QACjC,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,IAAI;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,OAAgB,CAAC;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;AAE9B,SAAS,UAAU,CAAC,KAAc;IAChC,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC3H,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,MAAM,CAAC,KAAc;IAC5B,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IACvF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CAAC,KAAc;IAC7B,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC9C,CAAC;AAED,SAAS,aAAa,CAAC,KAAc,EAAE,GAAW,EAAE,GAAW,EAAE,QAAgB;IAC/E,MAAM,CAAC,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5D,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAAE,OAAO,QAAQ,CAAC;IACrC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuD;IAC1F,OAAO,CACL,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,YACtF,cAAK,SAAS,EAAC,WAAW,GAAG,GACvB,CACT,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,UAAkB;IACzC,IAAI,aAAa,GAAG,CAAC,CAAC;IACtB,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5C,OAAO,SAAS,GAAG,CAAC,EAAE,CAAC;QACrB,aAAa,IAAI,CAAC,CAAC;QACnB,SAAS,IAAI,CAAC,CAAC;QACf,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;YAAC,YAAY,IAAI,CAAC,CAAC;YAAC,SAAS,IAAI,CAAC,CAAC;QAAC,CAAC;IAC3D,CAAC;IACD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AACzC,CAAC;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,SAAS,EAAE,wBAAwB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IACzG,EAAE,SAAS,EAAE,qBAAqB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IACnG,EAAE,SAAS,EAAE,wBAAwB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC1G,CAAC;AAEF,MAAM,eAAe,GAAG;IACtB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;IAC5C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;IAC5C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;CAC/C,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,KAA8B;IAC1D,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7D,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEpE,OAAO,CACL,8BACE,0BAAQ,qBAAqB,GAAS,EACtC,MAAC,IAAI,IACH,OAAO,EAAE,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,EAClC,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EACtB,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EACzB,wBAAwB,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,EACjE,SAAS,EAAC,QAAQ,aAElB,KAAC,SAAS,IAAC,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,EAC/E,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,0BAA0B,aACpE,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAI,EACzD,KAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,YAC1C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACvG,KAAC,SAAS,IAAmB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAA4B,IAAhF,QAAQ,CAAC,EAAE,CAAyE,CACrG,CAAC,GACG,IACF,EACP,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,6BAA6B,YACtE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5G,KAAC,SAAS,IAAsB,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAA4B,IAA3E,WAAW,CAAC,EAAE,CAAiE,CAChG,CAAC,GACG,IACF,IACN,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,wBAAwB,EAAE,IAAI,EAAE,CAAC,CAAC;AACvH,CAAC"}

package/dist/components/Flex/examples/index.d.ts

@@ -1,3 +1,7 @@
-export { default as Example1 } from './01-basic-flex.js';
-export { metadata as metadata1 } from './01-basic-flex.js';
+export { default as Example1 } from './01-axis-control.js';
+export { metadata as metadata1 } from './01-axis-control.js';
+export { default as Example2 } from './02-wrap-overflow.js';
+export { metadata as metadata2 } from './02-wrap-overflow.js';
+export { default as Example3 } from './03-container-query-reflow.js';
+export { metadata as metadata3 } from './03-container-query-reflow.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Flex/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/components/Flex/examples/index.js

@@ -1,3 +1,7 @@
-export { default as Example1 } from './01-basic-flex.js';
-export { metadata as metadata1 } from './01-basic-flex.js';
+export { default as Example1 } from './01-axis-control.js';
+export { metadata as metadata1 } from './01-axis-control.js';
+export { default as Example2 } from './02-wrap-overflow.js';
+export { metadata as metadata2 } from './02-wrap-overflow.js';
+export { default as Example3 } from './03-container-query-reflow.js';
+export { metadata as metadata3 } from './03-container-query-reflow.js';
 //# sourceMappingURL=index.js.map

package/dist/components/Flex/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Flex/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Flex/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/components/Flex/examples.json

@@ -1,7 +1,17 @@
 {
-    "01-basic-flex": {
-        "title": "Basic Flex",
-        "description": "A simple flex layout arranging items in a row. Use this component to easily create flexible layouts with consistent spacing.",
-        "code": "import React from 'react';\nimport { Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"md\">\n      <div className=\"h-16 w-20 bg-background-800 rounded border border-accent-500/50 flex items-center justify-center\">1</div>\n      <div className=\"h-16 w-20 bg-background-800 rounded border border-accent-500/50 flex items-center justify-center\">2</div>\n      <div className=\"h-16 w-20 bg-background-800 rounded border border-accent-500/50 flex items-center justify-center\">3</div>\n    </Flex>\n  );\n}"
+    "01-axis-control": {
+        "title": "Axis Control",
+        "description": "Interactive demo of Flex direction, justify, align, gap, and wrap across row and column layouts.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Flex, Frame } from 'ui-lab-components'\nimport type { FlexProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype FlexDirection = NonNullable<FlexProps['direction']>;\ntype FlexJustify = NonNullable<FlexProps['justify']>;\ntype FlexAlign = NonNullable<FlexProps['align']>;\ntype FlexGap = NonNullable<FlexProps['gap']>;\ntype FlexWrap = NonNullable<FlexProps['wrap']>;\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'direction',\n    label: 'Main Axis',\n    type: 'select',\n    options: [\n      { label: 'Row', value: 'row' },\n      { label: 'Column', value: 'column' },\n    ],\n    defaultValue: 'row',\n  },\n  {\n    name: 'justify',\n    label: 'Main-Axis Distribution',\n    type: 'select',\n    options: [\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Space Between', value: 'between' },\n      { label: 'Space Around', value: 'around' },\n      { label: 'Space Evenly', value: 'evenly' },\n    ],\n    defaultValue: 'start',\n  },\n  {\n    name: 'align',\n    label: 'Cross-Axis Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Baseline', value: 'baseline' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'gap',\n    label: 'Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'frameCount',\n    label: 'Frames',\n    type: 'stepper',\n    defaultValue: 4,\n    min: 4,\n    max: 10,\n    step: 1,\n  },\n  {\n    name: 'wrap',\n    label: 'Overflow Strategy',\n    type: 'select',\n    options: [\n      { label: 'No Wrap', value: 'nowrap' },\n      { label: 'Wrap', value: 'wrap' },\n    ],\n    defaultValue: 'nowrap',\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getDirection(value: unknown): FlexDirection {\n  return value === 'column' ? 'column' : 'row';\n}\n\nfunction getJustify(value: unknown): FlexJustify {\n  if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly') return value;\n  return 'start';\n}\n\nfunction getAlign(value: unknown): FlexAlign {\n  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;\n  return 'stretch';\n}\n\nfunction getGap(value: unknown): FlexGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getWrap(value: unknown): FlexWrap {\n  return value === 'wrap' ? 'wrap' : 'nowrap';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction FrameCell({ className, style }: { className?: string; style?: React.CSSProperties }) {\n  return (\n    <Frame pathStroke=\"dashed\" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>\n      <div className=\"size-full\" />\n    </Frame>\n  );\n}\n\nfunction getAxisColumnActionSpecs(frameCount: number) {\n  const total = Math.max(frameCount - 2, 1);\n  const pattern = [\n    { className: 'min-w-[4.75rem] flex-1', style: { width: 'auto', minWidth: '4.75rem', height: '2.75rem' } },\n    { className: 'min-w-[5.5rem] flex-1', style: { width: 'auto', minWidth: '5.5rem', height: '2.75rem' } },\n    { className: 'min-w-[4rem] flex-1', style: { width: 'auto', minWidth: '4rem', height: '3rem' } },\n  ];\n  return Array.from({ length: total }, (_, i) => pattern[i % pattern.length]);\n}\n\nfunction getAxisRowGroups(frameCount: number) {\n  const groupCount = Math.max(Math.ceil(frameCount / 4), 1);\n  return Array.from({ length: groupCount }, (_, gi) => {\n    const remaining = frameCount - gi * 4;\n    const itemCount = Math.min(Math.max(remaining, 0), 4);\n    return { rail: itemCount >= 1, canvas: itemCount >= 2, actionTop: itemCount >= 3, actionBottom: itemCount >= 4 };\n  });\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const direction = getDirection(props.direction);\n  const justify = getJustify(props.justify);\n  const align = getAlign(props.align);\n  const gap = getGap(props.gap);\n  const wrap = getWrap(props.wrap);\n  const frameCount = getFrameCount(props.frameCount, 4, 10, 4);\n\n  if (direction === 'row') {\n    const groups = getAxisRowGroups(frameCount);\n    return (\n      <Flex direction=\"column\" justify={justify} align={align} gap={gap} wrap=\"nowrap\" className=\"w-full\">\n        {groups.map((group, index) => (\n          <Flex key={`axis-row-group-${index}`} direction=\"row\" gap=\"md\" align=\"stretch\" className=\"w-full\">\n            {group.rail && <FrameCell className=\"shrink-0\" style={{ width: '4.5rem', height: '8.5rem' }} />}\n            {group.canvas && <FrameCell className=\"min-w-[11rem] flex-1\" style={{ width: 'auto', minWidth: '11rem', flex: '1.4 1 12rem', height: '8.5rem' }} />}\n            {(group.actionTop || group.actionBottom) && (\n              <Flex direction=\"column\" gap=\"sm\" className=\"w-[5.5rem] shrink-0\">\n                {group.actionTop && <FrameCell className=\"shrink-0\" style={{ width: '5.5rem', height: '4.5rem' }} />}\n                {group.actionBottom && <FrameCell className=\"shrink-0\" style={{ width: '5.5rem', height: '3.25rem' }} />}\n              </Flex>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n    );\n  }\n\n  const actions = getAxisColumnActionSpecs(frameCount);\n  return (\n    <Flex direction=\"column\" justify={justify} align={align} gap={gap} wrap={wrap} className=\"w-full\">\n      <FrameCell className=\"w-full\" style={{ width: '100%', height: '2.75rem' }} />\n      <FrameCell className=\"w-full\" style={{ width: '100%', height: '8rem' }} />\n      <Flex direction=\"row\" wrap=\"wrap\" gap=\"sm\" className=\"w-full\">\n        {actions.map((action, index) => (\n          <FrameCell key={`column-action-${index}`} className={action.className} style={action.style as React.CSSProperties} />\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ direction: 'row', justify: 'start', align: 'stretch', gap: 'md', wrap: 'nowrap', frameCount: 4 });\n}"
+    },
+    "02-wrap-overflow": {
+        "title": "Wrap Overflow Into Rows",
+        "description": "When wrap=",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Flex, Frame } from 'ui-lab-components'\nimport type { FlexProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype FlexDirection = NonNullable<FlexProps['direction']>;\ntype FlexJustify = NonNullable<FlexProps['justify']>;\ntype FlexAlign = NonNullable<FlexProps['align']>;\ntype FlexGap = NonNullable<FlexProps['gap']>;\ntype FlexWrap = NonNullable<FlexProps['wrap']>;\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'direction',\n    label: 'Main Axis',\n    type: 'select',\n    options: [\n      { label: 'Row', value: 'row' },\n      { label: 'Column', value: 'column' },\n    ],\n    defaultValue: 'row',\n  },\n  {\n    name: 'justify',\n    label: 'Main-Axis Distribution',\n    type: 'select',\n    options: [\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Space Between', value: 'between' },\n      { label: 'Space Around', value: 'around' },\n      { label: 'Space Evenly', value: 'evenly' },\n    ],\n    defaultValue: 'start',\n  },\n  {\n    name: 'align',\n    label: 'Cross-Axis Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Baseline', value: 'baseline' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'gap',\n    label: 'Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'frameCount',\n    label: 'Frames',\n    type: 'stepper',\n    defaultValue: 7,\n    min: 4,\n    max: 12,\n    step: 1,\n  },\n  {\n    name: 'wrap',\n    label: 'Overflow Strategy',\n    type: 'select',\n    options: [\n      { label: 'No Wrap', value: 'nowrap' },\n      { label: 'Wrap', value: 'wrap' },\n    ],\n    defaultValue: 'wrap',\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getDirection(value: unknown): FlexDirection {\n  return value === 'column' ? 'column' : 'row';\n}\n\nfunction getJustify(value: unknown): FlexJustify {\n  if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly') return value;\n  return 'start';\n}\n\nfunction getAlign(value: unknown): FlexAlign {\n  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;\n  return 'stretch';\n}\n\nfunction getGap(value: unknown): FlexGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getWrap(value: unknown): FlexWrap {\n  return value === 'wrap' ? 'wrap' : 'nowrap';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction FrameCell({ className, style }: { className?: string; style?: React.CSSProperties }) {\n  return (\n    <Frame pathStroke=\"dashed\" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>\n      <div className=\"size-full\" />\n    </Frame>\n  );\n}\n\nfunction getToolbarFlowSpecs(direction: FlexDirection, frameCount: number) {\n  if (direction === 'column') {\n    const pattern = [\n      { style: { width: '100%', height: '3.25rem' } },\n      { style: { width: '100%', height: '3rem' } },\n      { style: { width: '100%', height: '3.25rem' } },\n      { style: { width: '100%', height: '2.75rem' } },\n    ];\n    return Array.from({ length: frameCount }, (_, i) => ({ className: 'w-full', ...pattern[i % pattern.length] }));\n  }\n  const repeatPattern = [\n    { className: 'shrink-0', style: { width: '6rem', height: '3.25rem' } },\n    { className: 'shrink-0', style: { width: '6.75rem', height: '3.25rem' } },\n    { className: 'shrink-0', style: { width: '5.5rem', height: '3.25rem' } },\n    { className: 'shrink-0', style: { width: '6.5rem', height: '3.25rem' } },\n    { className: 'shrink-0', style: { width: '4.5rem', height: '3.25rem' } },\n    { className: 'shrink-0', style: { width: '5.5rem', height: '3.25rem' } },\n  ];\n  return [\n    { className: 'min-w-[12rem]', style: { width: 'auto', minWidth: '12rem', flex: '1.6 1 14rem', height: '3.25rem' } },\n    ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => repeatPattern[i % repeatPattern.length]),\n  ];\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const direction = getDirection(props.direction);\n  const frameCount = getFrameCount(props.frameCount, 4, 12, 7);\n  const specs = getToolbarFlowSpecs(direction, frameCount);\n\n  return (\n    <Flex\n      direction={direction}\n      justify={getJustify(props.justify)}\n      align={getAlign(props.align)}\n      gap={getGap(props.gap)}\n      wrap={getWrap(props.wrap)}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <FrameCell key={`${direction}-toolbar-${index}`} className={spec.className} style={spec.style as React.CSSProperties} />\n      ))}\n    </Flex>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ direction: 'row', justify: 'start', align: 'center', gap: 'md', wrap: 'wrap', frameCount: 7 });\n}"
+    },
+    "03-container-query-reflow": {
+        "title": "Container-Query Reflow",
+        "description": "With containerQueryResponsive enabled, the layout reflows based on available container width rather than viewport size.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Flex, Frame } from 'ui-lab-components'\nimport type { FlexProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype FlexJustify = NonNullable<FlexProps['justify']>;\ntype FlexGap = NonNullable<FlexProps['gap']>;\ntype FlexWrap = NonNullable<FlexProps['wrap']>;\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nconst CONTAINER_FLOW_STYLES = `\n  .flex-container-flow-avatar {\n    width: 5rem;\n    min-width: 5rem;\n    flex-grow: 0.65;\n    flex-shrink: 1;\n  }\n\n  .flex-container-flow-main {\n    width: 15rem;\n    min-width: 14rem;\n    flex-grow: 2;\n    flex-shrink: 1;\n  }\n\n  .flex-container-flow-sidebar {\n    width: 10rem;\n    min-width: 10rem;\n    flex-grow: 1;\n    flex-shrink: 1;\n  }\n\n  @container flex-parent (width < 400px) {\n    .flex-container-flow-avatar,\n    .flex-container-flow-main,\n    .flex-container-flow-sidebar {\n      width: 100%;\n      min-width: 0;\n    }\n  }\n`;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'gap',\n    label: 'Base Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'frameCount',\n    label: 'Frames',\n    type: 'stepper',\n    defaultValue: 5,\n    min: 5,\n    max: 10,\n    step: 1,\n  },\n  {\n    name: 'justify',\n    label: 'Main-Axis Distribution',\n    type: 'select',\n    options: [\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'Space Between', value: 'between' },\n      { label: 'Space Around', value: 'around' },\n    ],\n    defaultValue: 'start',\n  },\n  {\n    name: 'wrap',\n    label: 'Overflow Strategy',\n    type: 'select',\n    options: [\n      { label: 'No Wrap', value: 'nowrap' },\n      { label: 'Wrap', value: 'wrap' },\n    ],\n    defaultValue: 'nowrap',\n  },\n  {\n    name: 'containerQueryResponsive',\n    label: 'Enable Container Queries',\n    type: 'toggle',\n    defaultValue: true,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getJustify(value: unknown): FlexJustify {\n  if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly') return value;\n  return 'start';\n}\n\nfunction getGap(value: unknown): FlexGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getWrap(value: unknown): FlexWrap {\n  return value === 'wrap' ? 'wrap' : 'nowrap';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction FrameCell({ className, style }: { className?: string; style?: React.CSSProperties }) {\n  return (\n    <Frame pathStroke=\"dashed\" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>\n      <div className=\"size-full\" />\n    </Frame>\n  );\n}\n\nfunction getDistribution(frameCount: number) {\n  let metadataCount = 2;\n  let sidebarCount = 1;\n  let remaining = Math.max(frameCount - 5, 0);\n  while (remaining > 0) {\n    metadataCount += 1;\n    remaining -= 1;\n    if (remaining > 0) { sidebarCount += 1; remaining -= 1; }\n  }\n  return { metadataCount, sidebarCount };\n}\n\nconst META_PATTERN = [\n  { className: 'min-w-[4.75rem] flex-1', style: { width: 'auto', minWidth: '4.75rem', height: '2.25rem' } },\n  { className: 'min-w-[4rem] flex-1', style: { width: 'auto', minWidth: '4rem', height: '2.25rem' } },\n  { className: 'min-w-[5.25rem] flex-1', style: { width: 'auto', minWidth: '5.25rem', height: '2.25rem' } },\n];\n\nconst SIDEBAR_PATTERN = [\n  { style: { width: '100%', height: '7rem' } },\n  { style: { width: '100%', height: '3rem' } },\n  { style: { width: '100%', height: '2.5rem' } },\n];\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const frameCount = getFrameCount(props.frameCount, 5, 10, 5);\n  const { metadataCount, sidebarCount } = getDistribution(frameCount);\n\n  return (\n    <>\n      <style>{CONTAINER_FLOW_STYLES}</style>\n      <Flex\n        justify={getJustify(props.justify)}\n        align=\"stretch\"\n        gap={getGap(props.gap)}\n        wrap={getWrap(props.wrap)}\n        containerQueryResponsive={Boolean(props.containerQueryResponsive)}\n        className=\"w-full\"\n      >\n        <FrameCell className=\"flex-container-flow-avatar\" style={{ height: '7rem' }} />\n        <Flex direction=\"column\" gap=\"sm\" className=\"flex-container-flow-main\">\n          <FrameCell style={{ width: '100%', height: '4.5rem' }} />\n          <Flex gap=\"sm\" wrap=\"wrap\" className=\"w-full\">\n            {Array.from({ length: metadataCount }, (_, i) => META_PATTERN[i % META_PATTERN.length]).map((spec, i) => (\n              <FrameCell key={`meta-${i}`} className={spec.className} style={spec.style as React.CSSProperties} />\n            ))}\n          </Flex>\n        </Flex>\n        <Flex direction=\"column\" gap=\"sm\" className=\"flex-container-flow-sidebar\">\n          {Array.from({ length: sidebarCount }, (_, i) => SIDEBAR_PATTERN[i % SIDEBAR_PATTERN.length]).map((spec, i) => (\n            <FrameCell key={`sidebar-${i}`} className=\"w-full\" style={spec.style as React.CSSProperties} />\n          ))}\n        </Flex>\n      </Flex>\n    </>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ gap: 'md', frameCount: 5, justify: 'start', wrap: 'nowrap', containerQueryResponsive: true });\n}"
     }
 }

package/dist/components/Flex/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUtD,QAAA,MAAM,YAAY,EAAE,UAAU,EAgD7B,CAAC;AAcF,eAAO,MAAM,UAAU,EAAE,eAoFxB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AActD,QAAA,MAAM,YAAY,EAAE,UAAU,EAgD7B,CAAC;AAcF,eAAO,MAAM,UAAU,EAAE,eAoFxB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/components/Flex/index.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-basic-flex.js';
+import Example1, { metadata as metadata1, controls as controls1, renderPreview as renderPreview1, previewLayout as previewLayout1, resizable as resizable1 } from './examples/01-axis-control.js';
+import Example2, { metadata as metadata2, controls as controls2, renderPreview as renderPreview2, previewLayout as previewLayout2, resizable as resizable2 } from './examples/02-wrap-overflow.js';
+import Example3, { metadata as metadata3, controls as controls3, renderPreview as renderPreview3, previewLayout as previewLayout3, resizable as resizable3 } from './examples/03-container-query-reflow.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 // Define examplesData locally
 const examplesData = [
-    { id: '01-basic-flex', Component: Example1, metadata: metadata1 },
+    { id: '01-axis-control', Component: Example1, metadata: metadata1, controls: controls1, renderPreview: renderPreview1, previewLayout: previewLayout1, resizable: resizable1 },
+    { id: '02-wrap-overflow', Component: Example2, metadata: metadata2, controls: controls2, renderPreview: renderPreview2, previewLayout: previewLayout2, resizable: resizable2 },
+    { id: '03-container-query-reflow', Component: Example3, metadata: metadata3, controls: controls3, renderPreview: renderPreview3, previewLayout: previewLayout3, resizable: resizable3 },
 ];
 const flexControls = [
     {
@@ -36,21 +40,21 @@ const flexControls = [
         label: 'Justify Content',
         type: 'select',
         options: [
-            { label: 'Flex Start', value: 'flex-start' },
+            { label: 'Start', value: 'start' },
             { label: 'Center', value: 'center' },
-            { label: 'Flex End', value: 'flex-end' },
-            { label: 'Space Between', value: 'space-between' },
+            { label: 'End', value: 'end' },
+            { label: 'Space Between', value: 'between' },
         ],
-        defaultValue: 'flex-start',
+        defaultValue: 'start',
     },
     {
         name: 'align',
         label: 'Align Items',
         type: 'select',
         options: [
-            { label: 'Flex Start', value: 'flex-start' },
+            { label: 'Start', value: 'start' },
             { label: 'Center', value: 'center' },
-            { label: 'Flex End', value: 'flex-end' },
+            { label: 'End', value: 'end' },
             { label: 'Stretch', value: 'stretch' },
         ],
         defaultValue: 'stretch',

package/dist/components/Flex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flex/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,8BAA8B;AAC9B,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CAClE,CAAC;AAEF,MAAM,YAAY,GAAiB;IACjC;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;SACrC;QACD,YAAY,EAAE,KAAK;KACpB;IACD;QACE,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE;YACrC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;YAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;YAC/B,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE;SACtC;QACD,YAAY,EAAE,IAAI;KACnB;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;YAC5C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;SACnD;QACD,YAAY,EAAE,YAAY;KAC3B;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;YAC5C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;SACvC;QACD,YAAY,EAAE,SAAS;KACxB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG;;;;;;;;;;EAUpB,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAoB;IACzC,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,+EAA+E;IAC5F,QAAQ,EAAE,CACR,cAAK,SAAS,EAAC,+BAA+B,YAC5C,2MAGI,GACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,CACP,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,aACZ,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,EACzH,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,EACzH,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,IACpH,CACR;YACD,QAAQ,EAAE,YAAY;YACtB,aAAa,EAAE,CAAC,KAAU,EAAE,EAAE;gBAC5B,MAAM,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CAC3D,cAAK,SAAS,EAAC,2IAA2I,YACvJ,QAAQ,GACL,CACP,CAAC;gBACF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,KAAK,CAAC,SAAgB,EACjC,GAAG,EAAE,KAAK,CAAC,GAAU,EACrB,OAAO,EAAE,KAAK,CAAC,OAAc,EAC7B,KAAK,EAAE,KAAK,CAAC,KAAY,aAEzB,KAAC,GAAG,oBAAQ,EACZ,KAAC,GAAG,oBAAQ,EACZ,KAAC,GAAG,oBAAQ,IACP,CACR,CAAC;YACJ,CAAC;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,KAAK;YACT,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,kCAAkC;YAC/C,IAAI,EAAE;;;;QAIJ;YACF,OAAO,EAAE,CACP,MAAC,IAAI,IAAC,SAAS,EAAC,KAAK,EAAC,GAAG,EAAC,IAAI,aAC5B,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,EACzH,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,EACzH,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,IACpH,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,6BAA6B;YAC1C,IAAI,EAAE;;;;QAIJ;YACF,OAAO,EAAE,CACP,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC/B,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,EACzH,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,EACzH,cAAK,SAAS,EAAC,kGAAkG,kBAAQ,IACpH,CACR;SACF;KACF;CACF,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flex/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Gallery/examples/01-grid-composition.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=01-grid-composition.d.ts.map

package/dist/components/Gallery/examples/01-grid-composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-grid-composition.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/01-grid-composition.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAWzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EA6BhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAuC9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAwB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Gallery/examples/01-grid-composition.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gallery, Frame } from 'ui-lab-components';
+const FRAME_STYLE = {
+    common: { '--frame-fill': 'var(--background-900)', '--frame-stroke-color': 'var(--background-600)' },
+    archived: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-700)' },
+    experimental: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-800)' },
+};
+export const metadata = {
+    title: 'Grid Composition',
+    description: 'Gallery items arranged in a configurable grid with consistent gap and aspect ratio.',
+};
+export const controls = [
+    { name: 'columns', label: 'Columns', type: 'stepper', defaultValue: 3, min: 1, max: 6, step: 1 },
+    {
+        name: 'gap',
+        label: 'Gap Token',
+        type: 'select',
+        options: [
+            { label: 'Extra Small', value: 'xs' },
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+            { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: 'md',
+    },
+    {
+        name: 'aspectRatio',
+        label: 'Aspect Ratio',
+        type: 'select',
+        options: [
+            { label: '1:1', value: '1/1' },
+            { label: '4:3', value: '4/3' },
+            { label: '3:4', value: '3/4' },
+            { label: '16:9', value: '16/9' },
+        ],
+        defaultValue: '4/3',
+    },
+    { name: 'itemCount', label: 'Items', type: 'stepper', defaultValue: 4, min: 4, max: 12, step: 1 },
+    { name: 'responsive', label: 'Container-Query Responsive', type: 'toggle', defaultValue: false },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+const GRID_ITEMS = [
+    { id: 'g1', title: 'Brand Kit', description: 'Identity · Updated 2d ago', tier: 'common' },
+    { id: 'g2', title: 'Icon Set', description: 'UI Assets · 142 icons', tier: 'common' },
+    { id: 'g3', title: 'Type Scale', description: 'Typography · 8 weights', tier: 'common' },
+    { id: 'g4', title: 'Color Tokens', description: 'Design System · v3.2', tier: 'common' },
+    { id: 'g5', title: 'Grid Spec', description: 'Layout · 12-column', tier: 'common' },
+    { id: 'g6', title: 'Motion Guide', description: 'Animation · 24 presets', tier: 'common' },
+    { id: 'g7', title: 'Legacy Icons', description: 'Archived · v1.4', tier: 'archived' },
+    { id: 'g8', title: 'Old Palette', description: 'Archived · 2021', tier: 'archived' },
+    { id: 'g9', title: 'Beta Components', description: 'Archived · Pre-release', tier: 'archived' },
+    { id: 'g10', title: 'Prototype A', description: 'Experimental · Do not ship', tier: 'experimental' },
+    { id: 'g11', title: 'Prototype B', description: 'Experimental · Internal only', tier: 'experimental' },
+    { id: 'g12', title: 'Prototype C', description: 'Experimental · Unreleased', tier: 'experimental' },
+];
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getInt(value, min, max, fallback) {
+    const n = Number(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+function getAspectRatio(value) {
+    if (typeof value === 'string' && value.includes('/'))
+        return value;
+    return '4/3';
+}
+function itemClassName(tier) {
+    if (tier === 'archived')
+        return 'opacity-60';
+    if (tier === 'experimental')
+        return 'opacity-35';
+    return undefined;
+}
+export function renderPreview(props) {
+    const columns = getInt(props.columns, 1, 6, 3);
+    const gap = getGap(props.gap);
+    const ratio = getAspectRatio(props.aspectRatio);
+    const count = getInt(props.itemCount, 4, 12, 4);
+    const responsive = Boolean(props.responsive);
+    const items = GRID_ITEMS.slice(0, count);
+    const resolvedColumns = responsive ? { sm: 1, md: Math.min(2, columns), lg: columns } : columns;
+    return (_jsx(Gallery, { columns: resolvedColumns, gap: gap, responsive: responsive, className: "w-full", children: items.map((item) => (_jsxs(Gallery.Item, { className: itemClassName(item.tier), "aria-disabled": item.tier === 'experimental' ? true : undefined, children: [_jsx(Gallery.View, { aspectRatio: ratio, children: _jsx(Frame, { pathStroke: item.tier === 'experimental' ? 'dotted' : 'dashed', style: FRAME_STYLE[item.tier], className: "w-full h-full" }) }), _jsxs(Gallery.Body, { children: [_jsx("span", { children: item.title }), _jsx("span", { children: item.description })] })] }, item.id))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: 3, gap: 'md', aspectRatio: '4/3', itemCount: 4, responsive: false });
+}
+//# sourceMappingURL=01-grid-composition.js.map

package/dist/components/Gallery/examples/01-grid-composition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-grid-composition.js","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/01-grid-composition.tsx"],"names":[],"mappings":"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"}

package/dist/components/Gallery/examples/02-item-orientation.d.ts

@@ -0,0 +1,11 @@
+import type { ControlDef } from '@/types';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export declare const controls: ControlDef[];
+export declare const previewLayout: "start";
+export declare const resizable = true;
+export declare function renderPreview(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-item-orientation.d.ts.map

package/dist/components/Gallery/examples/02-item-orientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-item-orientation.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/02-item-orientation.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAWzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EAqChC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AA2C9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAwB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}