ui-lab-registry 0.3.44 → 0.3.46

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

@@ -1,7 +1 @@
-export { default as Example1 } from './01-default-frame.js';
-export { metadata as metadata1 } from './01-default-frame.js';
-export { default as Example2 } from './02-tooltip-example.js';
-export { metadata as metadata2 } from './02-tooltip-example.js';
-export { default as Example3 } from './03-sidebar-tab.js';
-export { metadata as metadata3 } from './03-sidebar-tab.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/index.ts"],"names":[],"mappings":""}

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

@@ -1,7 +1,2 @@
-export { default as Example1 } from './01-default-frame.js';
-export { metadata as metadata1 } from './01-default-frame.js';
-export { default as Example2 } from './02-tooltip-example.js';
-export { metadata as metadata2 } from './02-tooltip-example.js';
-export { default as Example3 } from './03-sidebar-tab.js';
-export { metadata as metadata3 } from './03-sidebar-tab.js';
+// Frame examples are served from @ui-lab-core/library (private registry)
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/index.ts"],"names":[],"mappings":"AAAA,yEAAyE"}

package/dist/components/Frame/index.d.ts

@@ -2,5 +2,4 @@ import { ControlDef, ComponentDetail } from '@/types';
 declare const frameControls: ControlDef[];
 export declare const frameDetail: ComponentDetail;
 export { frameControls };
-export * from './examples/index.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAatD,QAAA,MAAM,aAAa,EAAE,UAAU,EAAO,CAAC;AAYvC,eAAO,MAAM,WAAW,EAAE,eAqCzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAGtD,QAAA,MAAM,aAAa,EAAE,UAAU,EAAO,CAAC;AAYvC,eAAO,MAAM,WAAW,EAAE,eAoCzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Frame/index.js

@@ -1,15 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Frame } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-default-frame.js';
-import Example2, { metadata as metadata2 } from './examples/02-tooltip-example.js';
-import Example3, { metadata as metadata3 } from './examples/03-sidebar-tab.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-const examplesData = [
-    { id: '01-default-frame', Component: Example1, metadata: metadata1 },
-    { id: '02-tooltip-example', Component: Example2, metadata: metadata2 },
-    { id: '03-sidebar-tab', Component: Example3, metadata: metadata3 },
-];
 const frameControls = [];
 const frameBasicCode = `import { Frame } from "ui-lab-components";
 
@@ -34,10 +24,8 @@ export const frameDetail = {
             preview: (_jsx(Frame, { children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
             controls: frameControls,
             renderPreview: () => (_jsx(Frame, { children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
-        },
-        ...loadComponentExamples(examplesData, examplesJson),
+        }
     ],
 };
 export { frameControls };
-export * from './examples/index.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACpE,EAAE,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACtE,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACnE,CAAC;AAEF,MAAM,aAAa,GAAiB,EAAE,CAAC;AAEvC,MAAM,cAAc,GAAG;;;;;;;;EAQrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,uFAAuF;IACpG,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,uRAII,EACJ,iOAGI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,CACP,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;YACD,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,MAAM,aAAa,GAAiB,EAAE,CAAC;AAEvC,MAAM,cAAc,GAAG;;;;;;;;EAQrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,uFAAuF;IACpG,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,uRAII,EACJ,iOAGI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,CACP,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;YACD,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;SACF;KACF;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

package/dist/components/Gallery/examples/02-item-orientation.js

@@ -0,0 +1,106 @@
+"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: 'Item Orientation',
+    description: 'Gallery items can be oriented vertically (stacked view + body) or horizontally (side-by-side view + body).',
+};
+export const controls = [
+    {
+        name: 'orientation',
+        label: 'Orientation',
+        type: 'select',
+        options: [
+            { label: 'Vertical', value: 'vertical' },
+            { label: 'Horizontal', value: 'horizontal' },
+        ],
+        defaultValue: 'vertical',
+    },
+    { name: 'columns', label: 'Columns (vertical only)', type: 'stepper', defaultValue: 2, min: 1, max: 4, 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' },
+        ],
+        defaultValue: 'sm',
+    },
+    {
+        name: 'aspectRatio',
+        label: 'View Aspect Ratio (vertical only)',
+        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 },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+const ORIENTATION_ITEMS = [
+    { id: 'o1', title: 'Waveform Study', description: '12:34 · Electronic', tier: 'common' },
+    { id: 'o2', title: 'Threshold', description: '8:02 · Ambient', tier: 'common' },
+    { id: 'o3', title: 'Parallel Lines', description: '5:47 · Minimal', tier: 'common' },
+    { id: 'o4', title: 'Resonance', description: '9:15 · Drone', tier: 'common' },
+    { id: 'o5', title: 'Liminal Space', description: '11:20 · Experimental', tier: 'common' },
+    { id: 'o6', title: 'Undertow', description: '7:45 · Ambient', tier: 'common' },
+    { id: 'o7', title: 'Archive Vol. I', description: 'Archived · 2019 sessions', tier: 'archived' },
+    { id: 'o8', title: 'Archive Vol. II', description: 'Archived · Rough cuts', tier: 'archived' },
+    { id: 'o9', title: 'Archive Vol. III', description: 'Archived · Unmixed', tier: 'archived' },
+    { id: 'o10', title: 'Session X-01', description: 'Experimental · Unreleased draft', tier: 'experimental' },
+    { id: 'o11', title: 'Session X-02', description: 'Experimental · Internal', tier: 'experimental' },
+    { id: 'o12', title: 'Session X-03', description: 'Experimental · Do not distribute', 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 getOrientation(value) {
+    return value === 'horizontal' ? 'horizontal' : 'vertical';
+}
+function itemClassName(tier) {
+    if (tier === 'archived')
+        return 'opacity-60';
+    if (tier === 'experimental')
+        return 'opacity-35';
+    return undefined;
+}
+export function renderPreview(props) {
+    const orientation = getOrientation(props.orientation);
+    const columns = getInt(props.columns, 1, 4, 2);
+    const gap = getGap(props.gap);
+    const ratio = getAspectRatio(props.aspectRatio);
+    const count = getInt(props.itemCount, 4, 12, 4);
+    const items = ORIENTATION_ITEMS.slice(0, count);
+    const resolvedColumns = orientation === 'horizontal' ? 1 : columns;
+    return (_jsx(Gallery, { columns: resolvedColumns, gap: gap, className: "w-full", children: items.map((item) => (_jsxs(Gallery.Item, { orientation: orientation, className: itemClassName(item.tier), "aria-disabled": item.tier === 'experimental' ? true : undefined, children: [_jsx(Gallery.View, { aspectRatio: orientation === 'horizontal' ? '1/1' : 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({ orientation: 'vertical', columns: 2, gap: 'sm', aspectRatio: '4/3', itemCount: 4 });
+}
+//# sourceMappingURL=02-item-orientation.js.map

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

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

package/dist/components/Gallery/examples/03-span-layout.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-span-layout.d.ts.map

package/dist/components/Gallery/examples/03-span-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-span-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/03-span-layout.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,2CAiC3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Gallery/examples/03-span-layout.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: 'Span Layout',
+    description: 'A featured item spans multiple columns and rows to create an editorial grid layout.',
+};
+export const controls = [
+    { name: 'columns', label: 'Columns', type: 'stepper', defaultValue: 3, min: 2, 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' },
+        ],
+        defaultValue: 'md',
+    },
+    { name: 'featuredColumnSpan', label: 'Featured Column Span', type: 'stepper', defaultValue: 2, min: 1, max: 4, step: 1 },
+    { name: 'featuredRowSpan', label: 'Featured Row Span', type: 'stepper', defaultValue: 2, min: 1, max: 3, step: 1 },
+    {
+        name: 'featuredAspect',
+        label: 'Featured Aspect Ratio',
+        type: 'select',
+        options: [
+            { label: '4:3', value: '4/3' },
+            { label: '16:9', value: '16/9' },
+            { label: '21:9', value: '21/9' },
+            { label: '1:1', value: '1/1' },
+        ],
+        defaultValue: '16/9',
+    },
+    { name: 'itemCount', label: 'Items', type: 'stepper', defaultValue: 5, min: 3, max: 12, step: 1 },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+const SPAN_ITEMS = [
+    { id: 's1', title: "Editor's Pick", description: 'Featured collection — Spring 2024', tier: 'common' },
+    { id: 's2', title: 'Series No. 1', description: 'Monochrome', tier: 'common' },
+    { id: 's3', title: 'Series No. 2', description: 'Landscape', tier: 'common' },
+    { id: 's4', title: 'Series No. 3', description: 'Portrait', tier: 'common' },
+    { id: 's5', title: 'Series No. 4', description: 'Abstract', tier: 'common' },
+    { id: 's6', title: 'Series No. 5', description: 'Documentary', tier: 'common' },
+    { id: 's7', title: 'Hidden Vol. I', description: 'Archived · Unlisted', tier: 'archived' },
+    { id: 's8', title: 'Hidden Vol. II', description: 'Archived · Private', tier: 'archived' },
+    { id: 's9', title: 'Hidden Vol. III', description: 'Archived · Limited print', tier: 'archived' },
+    { id: 's10', title: 'Vault A', description: 'Experimental · Access restricted', tier: 'experimental' },
+    { id: 's11', title: 'Vault B', description: 'Experimental · Internal preview', tier: 'experimental' },
+    { id: 's12', title: 'Vault C', description: 'Experimental · Embargoed', 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, 2, 6, 3);
+    const gap = getGap(props.gap);
+    const colSpan = Math.min(getInt(props.featuredColumnSpan, 1, 4, 2), columns);
+    const rowSpan = getInt(props.featuredRowSpan, 1, 3, 2);
+    const featuredRatio = getAspectRatio(props.featuredAspect);
+    const count = getInt(props.itemCount, 3, 12, 5);
+    const [featured, ...rest] = SPAN_ITEMS.slice(0, count);
+    return (_jsxs(Gallery, { columns: columns, gap: gap, className: "w-full", children: [_jsxs(Gallery.Item, { columnSpan: colSpan, rowSpan: rowSpan, children: [_jsx(Gallery.View, { aspectRatio: featuredRatio, children: _jsx(Frame, { pathStroke: "dashed", style: FRAME_STYLE.common, className: "w-full h-full" }) }), _jsxs(Gallery.Body, { children: [_jsx("span", { children: featured.title }), _jsx("span", { children: featured.description })] })] }), rest.map((item) => (_jsxs(Gallery.Item, { className: itemClassName(item.tier), "aria-disabled": item.tier === 'experimental' ? true : undefined, children: [_jsx(Gallery.View, { aspectRatio: "4/3", 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', featuredColumnSpan: 2, featuredRowSpan: 2, featuredAspect: '16/9', itemCount: 5 });
+}
+//# sourceMappingURL=03-span-layout.js.map

package/dist/components/Gallery/examples/03-span-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-span-layout.js","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/03-span-layout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAOlD,MAAM,WAAW,GAA0C;IACzD,MAAM,EAAE,EAAE,cAAc,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,uBAAuB,EAAyB;IAC3H,QAAQ,EAAE,EAAE,cAAc,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,uBAAuB,EAAyB;IAC7H,YAAY,EAAE,EAAE,cAAc,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,uBAAuB,EAAyB;CAClI,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,qFAAqF;CACnG,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAiB;IACpC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IAChG;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;SAChC;QACD,YAAY,EAAE,IAAI;KACnB;IACD,EAAE,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,sBAAsB,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IACxH,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;IAClH;QACE,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,uBAAuB;QAC9B,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;SAC/B;QACD,YAAY,EAAE,MAAM;KACrB;IACD,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;CAClG,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,OAAgB,CAAC;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;AAE9B,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,mCAAmC,EAAE,IAAI,EAAE,QAAoB,EAAE;IAClH,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,QAAoB,EAAE;IAC1F,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,QAAoB,EAAE;IACzF,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,QAAoB,EAAE;IACxF,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAAE,QAAoB,EAAE;IACxF,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,IAAI,EAAE,QAAoB,EAAE;IAC3F,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,IAAI,EAAE,UAAsB,EAAE;IACtG,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,oBAAoB,EAAE,IAAI,EAAE,UAAsB,EAAE;IACtG,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,0BAA0B,EAAE,IAAI,EAAE,UAAsB,EAAE;IAC7G,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,kCAAkC,EAAE,IAAI,EAAE,cAA0B,EAAE;IAClH,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,iCAAiC,EAAE,IAAI,EAAE,cAA0B,EAAE;IACjH,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE,IAAI,EAAE,cAA0B,EAAE;CAC3G,CAAC;AAEF,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,MAAM,CAAC,KAAc,EAAE,GAAW,EAAE,GAAW,EAAE,QAAgB;IACxE,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACxB,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,cAAc,CAAC,KAAc;IACpC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,KAAK,CAAC;IACnE,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,aAAa,CAAC,IAAc;IACnC,IAAI,IAAI,KAAK,UAAU;QAAE,OAAO,YAAY,CAAC;IAC7C,IAAI,IAAI,KAAK,cAAc;QAAE,OAAO,YAAY,CAAC;IACjD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAA8B;IAC1D,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC7E,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAEvD,OAAO,CACL,MAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,QAAQ,aACrD,MAAC,OAAO,CAAC,IAAI,IAAC,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,aACjD,KAAC,OAAO,CAAC,IAAI,IAAC,WAAW,EAAE,aAAa,YACtC,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,EAAC,eAAe,GAAG,GACrE,EACf,MAAC,OAAO,CAAC,IAAI,eACX,yBAAO,QAAQ,CAAC,KAAK,GAAQ,EAC7B,yBAAO,QAAQ,CAAC,WAAW,GAAQ,IACtB,IACF,EACd,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClB,MAAC,OAAO,CAAC,IAAI,IAAe,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAiB,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,aAC7H,KAAC,OAAO,CAAC,IAAI,IAAC,WAAW,EAAC,KAAK,YAC7B,KAAC,KAAK,IAAC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAC,eAAe,GAAG,GACrH,EACf,MAAC,OAAO,CAAC,IAAI,eACX,yBAAO,IAAI,CAAC,KAAK,GAAQ,EACzB,yBAAO,IAAI,CAAC,WAAW,GAAQ,IAClB,KAPE,IAAI,CAAC,EAAE,CAQX,CAChB,CAAC,IACM,CACX,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;AACnI,CAAC"}

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

@@ -1,3 +1,7 @@
-export { default as Example1 } from './01-basic-gallery.js';
-export { metadata as metadata1 } from './01-basic-gallery.js';
+export { default as Example1 } from './01-grid-composition.js';
+export { metadata as metadata1 } from './01-grid-composition.js';
+export { default as Example2 } from './02-item-orientation.js';
+export { metadata as metadata2 } from './02-item-orientation.js';
+export { default as Example3 } from './03-span-layout.js';
+export { metadata as metadata3 } from './03-span-layout.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -1,3 +1,7 @@
-export { default as Example1 } from './01-basic-gallery.js';
-export { metadata as metadata1 } from './01-basic-gallery.js';
+export { default as Example1 } from './01-grid-composition.js';
+export { metadata as metadata1 } from './01-grid-composition.js';
+export { default as Example2 } from './02-item-orientation.js';
+export { metadata as metadata2 } from './02-item-orientation.js';
+export { default as Example3 } from './03-span-layout.js';
+export { metadata as metadata3 } from './03-span-layout.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Gallery/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Gallery/examples.json

@@ -1,7 +1,17 @@
 {
-    "01-basic-gallery": {
-        "title": "Basic Gallery",
-        "description": "A simple gallery with multiple items in a grid layout. Use this for displaying collections of images or content.",
-        "code": "import { Gallery } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Gallery columns={3} gap=\"md\">\n      <Gallery.Item>\n        <Gallery.View aspectRatio=\"1/1\">\n          <div style={{ background: '#e0e0e0', width: '100%', height: '100%' }} />\n        </Gallery.View>\n      </Gallery.Item>\n      <Gallery.Item>\n        <Gallery.View aspectRatio=\"1/1\">\n          <div style={{ background: '#d0d0d0', width: '100%', height: '100%' }} />\n        </Gallery.View>\n      </Gallery.Item>\n      <Gallery.Item>\n        <Gallery.View aspectRatio=\"1/1\">\n          <div style={{ background: '#c0c0c0', width: '100%', height: '100%' }} />\n        </Gallery.View>\n      </Gallery.Item>\n    </Gallery>\n  );\n}"
+    "01-grid-composition": {
+        "title": "Grid Composition",
+        "description": "Gallery items arranged in a configurable grid with consistent gap and aspect ratio.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Gallery, Frame } from 'ui-lab-components'\nimport type { GalleryProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GalleryGap = NonNullable<GalleryProps['gap']>;\ntype ItemTier = 'common' | 'archived' | 'experimental';\n\nconst FRAME_STYLE: Record<ItemTier, React.CSSProperties> = {\n  common: { '--frame-fill': 'var(--background-900)', '--frame-stroke-color': 'var(--background-600)' } as React.CSSProperties,\n  archived: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-700)' } as React.CSSProperties,\n  experimental: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-800)' } as React.CSSProperties,\n};\n\nexport const controls: ControlDef[] = [\n  { name: 'columns', label: 'Columns', type: 'stepper', defaultValue: 3, min: 1, max: 6, step: 1 },\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: 'aspectRatio',\n    label: 'Aspect Ratio',\n    type: 'select',\n    options: [\n      { label: '1:1', value: '1/1' },\n      { label: '4:3', value: '4/3' },\n      { label: '3:4', value: '3/4' },\n      { label: '16:9', value: '16/9' },\n    ],\n    defaultValue: '4/3',\n  },\n  { name: 'itemCount', label: 'Items', type: 'stepper', defaultValue: 4, min: 4, max: 12, step: 1 },\n  { name: 'responsive', label: 'Container-Query Responsive', type: 'toggle', defaultValue: false },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nconst GRID_ITEMS = [\n  { id: 'g1', title: 'Brand Kit', description: 'Identity · Updated 2d ago', tier: 'common' as ItemTier },\n  { id: 'g2', title: 'Icon Set', description: 'UI Assets · 142 icons', tier: 'common' as ItemTier },\n  { id: 'g3', title: 'Type Scale', description: 'Typography · 8 weights', tier: 'common' as ItemTier },\n  { id: 'g4', title: 'Color Tokens', description: 'Design System · v3.2', tier: 'common' as ItemTier },\n  { id: 'g5', title: 'Grid Spec', description: 'Layout · 12-column', tier: 'common' as ItemTier },\n  { id: 'g6', title: 'Motion Guide', description: 'Animation · 24 presets', tier: 'common' as ItemTier },\n  { id: 'g7', title: 'Legacy Icons', description: 'Archived · v1.4', tier: 'archived' as ItemTier },\n  { id: 'g8', title: 'Old Palette', description: 'Archived · 2021', tier: 'archived' as ItemTier },\n  { id: 'g9', title: 'Beta Components', description: 'Archived · Pre-release', tier: 'archived' as ItemTier },\n  { id: 'g10', title: 'Prototype A', description: 'Experimental · Do not ship', tier: 'experimental' as ItemTier },\n  { id: 'g11', title: 'Prototype B', description: 'Experimental · Internal only', tier: 'experimental' as ItemTier },\n  { id: 'g12', title: 'Prototype C', description: 'Experimental · Unreleased', tier: 'experimental' as ItemTier },\n];\n\nfunction getGap(value: unknown): GalleryGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getInt(value: unknown, min: number, max: number, fallback: number) {\n  const n = Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction getAspectRatio(value: unknown): string {\n  if (typeof value === 'string' && value.includes('/')) return value;\n  return '4/3';\n}\n\nfunction itemClassName(tier: ItemTier) {\n  if (tier === 'archived') return 'opacity-60';\n  if (tier === 'experimental') return 'opacity-35';\n  return undefined;\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getInt(props.columns, 1, 6, 3);\n  const gap = getGap(props.gap);\n  const ratio = getAspectRatio(props.aspectRatio);\n  const count = getInt(props.itemCount, 4, 12, 4);\n  const responsive = Boolean(props.responsive);\n  const items = GRID_ITEMS.slice(0, count);\n  const resolvedColumns: GalleryProps['columns'] = responsive ? { sm: 1, md: Math.min(2, columns), lg: columns } : columns;\n\n  return (\n    <Gallery columns={resolvedColumns} gap={gap} responsive={responsive} className=\"w-full\">\n      {items.map((item) => (\n        <Gallery.Item key={item.id} className={itemClassName(item.tier)} aria-disabled={item.tier === 'experimental' ? true : undefined}>\n          <Gallery.View aspectRatio={ratio}>\n            <Frame pathStroke={item.tier === 'experimental' ? 'dotted' : 'dashed'} style={FRAME_STYLE[item.tier]} className=\"w-full h-full\" />\n          </Gallery.View>\n          <Gallery.Body>\n            <span>{item.title}</span>\n            <span>{item.description}</span>\n          </Gallery.Body>\n        </Gallery.Item>\n      ))}\n    </Gallery>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: 3, gap: 'md', aspectRatio: '4/3', itemCount: 4, responsive: false });\n}"
+    },
+    "02-item-orientation": {
+        "title": "Item Orientation",
+        "description": "Gallery items can be oriented vertically (stacked view + body) or horizontally (side-by-side view + body).",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Gallery, Frame } from 'ui-lab-components'\nimport type { GalleryProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GalleryGap = NonNullable<GalleryProps['gap']>;\ntype ItemTier = 'common' | 'archived' | 'experimental';\n\nconst FRAME_STYLE: Record<ItemTier, React.CSSProperties> = {\n  common: { '--frame-fill': 'var(--background-900)', '--frame-stroke-color': 'var(--background-600)' } as React.CSSProperties,\n  archived: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-700)' } as React.CSSProperties,\n  experimental: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-800)' } as React.CSSProperties,\n};\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'orientation',\n    label: 'Orientation',\n    type: 'select',\n    options: [\n      { label: 'Vertical', value: 'vertical' },\n      { label: 'Horizontal', value: 'horizontal' },\n    ],\n    defaultValue: 'vertical',\n  },\n  { name: 'columns', label: 'Columns (vertical only)', type: 'stepper', defaultValue: 2, min: 1, max: 4, step: 1 },\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    ],\n    defaultValue: 'sm',\n  },\n  {\n    name: 'aspectRatio',\n    label: 'View Aspect Ratio (vertical only)',\n    type: 'select',\n    options: [\n      { label: '1:1', value: '1/1' },\n      { label: '4:3', value: '4/3' },\n      { label: '3:4', value: '3/4' },\n      { label: '16:9', value: '16/9' },\n    ],\n    defaultValue: '4/3',\n  },\n  { name: 'itemCount', label: 'Items', type: 'stepper', defaultValue: 4, min: 4, max: 12, step: 1 },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nconst ORIENTATION_ITEMS = [\n  { id: 'o1', title: 'Waveform Study', description: '12:34 · Electronic', tier: 'common' as ItemTier },\n  { id: 'o2', title: 'Threshold', description: '8:02 · Ambient', tier: 'common' as ItemTier },\n  { id: 'o3', title: 'Parallel Lines', description: '5:47 · Minimal', tier: 'common' as ItemTier },\n  { id: 'o4', title: 'Resonance', description: '9:15 · Drone', tier: 'common' as ItemTier },\n  { id: 'o5', title: 'Liminal Space', description: '11:20 · Experimental', tier: 'common' as ItemTier },\n  { id: 'o6', title: 'Undertow', description: '7:45 · Ambient', tier: 'common' as ItemTier },\n  { id: 'o7', title: 'Archive Vol. I', description: 'Archived · 2019 sessions', tier: 'archived' as ItemTier },\n  { id: 'o8', title: 'Archive Vol. II', description: 'Archived · Rough cuts', tier: 'archived' as ItemTier },\n  { id: 'o9', title: 'Archive Vol. III', description: 'Archived · Unmixed', tier: 'archived' as ItemTier },\n  { id: 'o10', title: 'Session X-01', description: 'Experimental · Unreleased draft', tier: 'experimental' as ItemTier },\n  { id: 'o11', title: 'Session X-02', description: 'Experimental · Internal', tier: 'experimental' as ItemTier },\n  { id: 'o12', title: 'Session X-03', description: 'Experimental · Do not distribute', tier: 'experimental' as ItemTier },\n];\n\nfunction getGap(value: unknown): GalleryGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getInt(value: unknown, min: number, max: number, fallback: number) {\n  const n = Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction getAspectRatio(value: unknown): string {\n  if (typeof value === 'string' && value.includes('/')) return value;\n  return '4/3';\n}\n\nfunction getOrientation(value: unknown): 'vertical' | 'horizontal' {\n  return value === 'horizontal' ? 'horizontal' : 'vertical';\n}\n\nfunction itemClassName(tier: ItemTier) {\n  if (tier === 'archived') return 'opacity-60';\n  if (tier === 'experimental') return 'opacity-35';\n  return undefined;\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const orientation = getOrientation(props.orientation);\n  const columns = getInt(props.columns, 1, 4, 2);\n  const gap = getGap(props.gap);\n  const ratio = getAspectRatio(props.aspectRatio);\n  const count = getInt(props.itemCount, 4, 12, 4);\n  const items = ORIENTATION_ITEMS.slice(0, count);\n  const resolvedColumns: GalleryProps['columns'] = orientation === 'horizontal' ? 1 : columns;\n\n  return (\n    <Gallery columns={resolvedColumns} gap={gap} className=\"w-full\">\n      {items.map((item) => (\n        <Gallery.Item key={item.id} orientation={orientation} className={itemClassName(item.tier)} aria-disabled={item.tier === 'experimental' ? true : undefined}>\n          <Gallery.View aspectRatio={orientation === 'horizontal' ? '1/1' : ratio}>\n            <Frame pathStroke={item.tier === 'experimental' ? 'dotted' : 'dashed'} style={FRAME_STYLE[item.tier]} className=\"w-full h-full\" />\n          </Gallery.View>\n          <Gallery.Body>\n            <span>{item.title}</span>\n            <span>{item.description}</span>\n          </Gallery.Body>\n        </Gallery.Item>\n      ))}\n    </Gallery>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ orientation: 'vertical', columns: 2, gap: 'sm', aspectRatio: '4/3', itemCount: 4 });\n}"
+    },
+    "03-span-layout": {
+        "title": "Span Layout",
+        "description": "A featured item spans multiple columns and rows to create an editorial grid layout.",
+        "code": "\"use client\";\n\nimport React from 'react'\nimport { Gallery, Frame } from 'ui-lab-components'\nimport type { GalleryProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GalleryGap = NonNullable<GalleryProps['gap']>;\ntype ItemTier = 'common' | 'archived' | 'experimental';\n\nconst FRAME_STYLE: Record<ItemTier, React.CSSProperties> = {\n  common: { '--frame-fill': 'var(--background-900)', '--frame-stroke-color': 'var(--background-600)' } as React.CSSProperties,\n  archived: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-700)' } as React.CSSProperties,\n  experimental: { '--frame-fill': 'var(--background-950)', '--frame-stroke-color': 'var(--background-800)' } as React.CSSProperties,\n};\n\nexport const controls: ControlDef[] = [\n  { name: 'columns', label: 'Columns', type: 'stepper', defaultValue: 3, min: 2, max: 6, step: 1 },\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    ],\n    defaultValue: 'md',\n  },\n  { name: 'featuredColumnSpan', label: 'Featured Column Span', type: 'stepper', defaultValue: 2, min: 1, max: 4, step: 1 },\n  { name: 'featuredRowSpan', label: 'Featured Row Span', type: 'stepper', defaultValue: 2, min: 1, max: 3, step: 1 },\n  {\n    name: 'featuredAspect',\n    label: 'Featured Aspect Ratio',\n    type: 'select',\n    options: [\n      { label: '4:3', value: '4/3' },\n      { label: '16:9', value: '16/9' },\n      { label: '21:9', value: '21/9' },\n      { label: '1:1', value: '1/1' },\n    ],\n    defaultValue: '16/9',\n  },\n  { name: 'itemCount', label: 'Items', type: 'stepper', defaultValue: 5, min: 3, max: 12, step: 1 },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nconst SPAN_ITEMS = [\n  { id: 's1', title: \"Editor's Pick\", description: 'Featured collection — Spring 2024', tier: 'common' as ItemTier },\n  { id: 's2', title: 'Series No. 1', description: 'Monochrome', tier: 'common' as ItemTier },\n  { id: 's3', title: 'Series No. 2', description: 'Landscape', tier: 'common' as ItemTier },\n  { id: 's4', title: 'Series No. 3', description: 'Portrait', tier: 'common' as ItemTier },\n  { id: 's5', title: 'Series No. 4', description: 'Abstract', tier: 'common' as ItemTier },\n  { id: 's6', title: 'Series No. 5', description: 'Documentary', tier: 'common' as ItemTier },\n  { id: 's7', title: 'Hidden Vol. I', description: 'Archived · Unlisted', tier: 'archived' as ItemTier },\n  { id: 's8', title: 'Hidden Vol. II', description: 'Archived · Private', tier: 'archived' as ItemTier },\n  { id: 's9', title: 'Hidden Vol. III', description: 'Archived · Limited print', tier: 'archived' as ItemTier },\n  { id: 's10', title: 'Vault A', description: 'Experimental · Access restricted', tier: 'experimental' as ItemTier },\n  { id: 's11', title: 'Vault B', description: 'Experimental · Internal preview', tier: 'experimental' as ItemTier },\n  { id: 's12', title: 'Vault C', description: 'Experimental · Embargoed', tier: 'experimental' as ItemTier },\n];\n\nfunction getGap(value: unknown): GalleryGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getInt(value: unknown, min: number, max: number, fallback: number) {\n  const n = Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction getAspectRatio(value: unknown): string {\n  if (typeof value === 'string' && value.includes('/')) return value;\n  return '4/3';\n}\n\nfunction itemClassName(tier: ItemTier) {\n  if (tier === 'archived') return 'opacity-60';\n  if (tier === 'experimental') return 'opacity-35';\n  return undefined;\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getInt(props.columns, 2, 6, 3);\n  const gap = getGap(props.gap);\n  const colSpan = Math.min(getInt(props.featuredColumnSpan, 1, 4, 2), columns);\n  const rowSpan = getInt(props.featuredRowSpan, 1, 3, 2);\n  const featuredRatio = getAspectRatio(props.featuredAspect);\n  const count = getInt(props.itemCount, 3, 12, 5);\n  const [featured, ...rest] = SPAN_ITEMS.slice(0, count);\n\n  return (\n    <Gallery columns={columns} gap={gap} className=\"w-full\">\n      <Gallery.Item columnSpan={colSpan} rowSpan={rowSpan}>\n        <Gallery.View aspectRatio={featuredRatio}>\n          <Frame pathStroke=\"dashed\" style={FRAME_STYLE.common} className=\"w-full h-full\" />\n        </Gallery.View>\n        <Gallery.Body>\n          <span>{featured.title}</span>\n          <span>{featured.description}</span>\n        </Gallery.Body>\n      </Gallery.Item>\n      {rest.map((item) => (\n        <Gallery.Item key={item.id} className={itemClassName(item.tier)} aria-disabled={item.tier === 'experimental' ? true : undefined}>\n          <Gallery.View aspectRatio=\"4/3\">\n            <Frame pathStroke={item.tier === 'experimental' ? 'dotted' : 'dashed'} style={FRAME_STYLE[item.tier]} className=\"w-full h-full\" />\n          </Gallery.View>\n          <Gallery.Body>\n            <span>{item.title}</span>\n            <span>{item.description}</span>\n          </Gallery.Body>\n        </Gallery.Item>\n      ))}\n    </Gallery>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: 3, gap: 'md', featuredColumnSpan: 2, featuredRowSpan: 2, featuredAspect: '16/9', itemCount: 5 });\n}"
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUtD,QAAA,MAAM,eAAe,EAAE,UAAU,EAyBhC,CAAC;AAiCF,eAAO,MAAM,aAAa,EAAE,eA0E3B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AActD,QAAA,MAAM,eAAe,EAAE,UAAU,EAyBhC,CAAC;AAiCF,eAAO,MAAM,aAAa,EAAE,eA0E3B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,cAAc,qBAAqB,CAAC"}

package/dist/components/Gallery/index.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Gallery } from 'ui-lab-components';
-import Example1, { metadata as metadata1 } from './examples/01-basic-gallery.js';
+import Example1, { metadata as metadata1, controls as controls1, renderPreview as renderPreview1, previewLayout as previewLayout1, resizable as resizable1 } from './examples/01-grid-composition.js';
+import Example2, { metadata as metadata2, controls as controls2, renderPreview as renderPreview2, previewLayout as previewLayout2, resizable as resizable2 } from './examples/02-item-orientation.js';
+import Example3, { metadata as metadata3, controls as controls3, renderPreview as renderPreview3, previewLayout as previewLayout3, resizable as resizable3 } from './examples/03-span-layout.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 const examplesData = [
-    { id: '01-basic-gallery', Component: Example1, metadata: metadata1 },
+    { id: '01-grid-composition', Component: Example1, metadata: metadata1, controls: controls1, renderPreview: renderPreview1, previewLayout: previewLayout1, resizable: resizable1 },
+    { id: '02-item-orientation', Component: Example2, metadata: metadata2, controls: controls2, renderPreview: renderPreview2, previewLayout: previewLayout2, resizable: resizable2 },
+    { id: '03-span-layout', Component: Example3, metadata: metadata3, controls: controls3, renderPreview: renderPreview3, previewLayout: previewLayout3, resizable: resizable3 },
 ];
 const galleryControls = [
     {