ui-lab-registry 0.3.44 → 0.3.45

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

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 = [
     {

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

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

package/dist/components/Grid/examples/02-track-placement.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-track-placement.d.ts.map

package/dist/components/Grid/examples/02-track-placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-track-placement.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/examples/02-track-placement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUzC,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,UAAU,EA4EhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAG,OAAgB,CAAC;AAC9C,eAAO,MAAM,SAAS,OAAO,CAAC;AAqF9B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2CAqB3D;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAE9B"}

package/dist/components/Grid/examples/02-track-placement.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid, Frame } from 'ui-lab-components';
+const BASE_CELL_STYLE = {
+    '--frame-fill': 'var(--background-900)',
+    '--frame-stroke-color': 'var(--background-600)',
+};
+export const metadata = {
+    title: 'Track Placement',
+    description: 'Adjust columns, gap, alignment, and auto-placement flow to explore the CSS Grid track model.',
+};
+export const controls = [
+    {
+        name: 'columns',
+        label: 'Columns',
+        type: 'select',
+        options: [
+            { label: '1 Column', value: '1' },
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: '5 Columns', value: '5' },
+            { label: '6 Columns', value: '6' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' },
+        ],
+        defaultValue: '3',
+    },
+    {
+        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: 'justifyItems',
+        label: 'Inline Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'alignItems',
+        label: 'Block Alignment',
+        type: 'select',
+        options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Baseline', value: 'baseline' },
+        ],
+        defaultValue: 'stretch',
+    },
+    {
+        name: 'autoFlow',
+        label: 'Auto Placement',
+        type: 'select',
+        options: [
+            { label: 'Row', value: 'row' },
+            { label: 'Column', value: 'column' },
+            { label: 'Row Dense', value: 'row-dense' },
+            { label: 'Column Dense', value: 'column-dense' },
+        ],
+        defaultValue: 'row',
+    },
+    {
+        name: 'frameCount',
+        label: 'Panels',
+        type: 'stepper',
+        defaultValue: 6,
+        min: 4,
+        max: 12,
+        step: 1,
+    },
+];
+export const previewLayout = 'start';
+export const resizable = true;
+function getColumns(value) {
+    if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return '3';
+}
+function toColumns(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return value;
+    return Number(value);
+}
+function getApproxColumnCount(value) {
+    if (value === 'auto-fit' || value === 'auto-fill')
+        return 4;
+    return Number(value);
+}
+function getGap(value) {
+    if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl')
+        return value;
+    return 'md';
+}
+function getJustifyItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end')
+        return value;
+    return 'stretch';
+}
+function getAlignItems(value) {
+    if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline')
+        return value;
+    return 'stretch';
+}
+function getAutoFlow(value) {
+    if (value === 'column' || value === 'row-dense' || value === 'column-dense')
+        return value;
+    return 'row';
+}
+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 span(trackCount, desired) {
+    return `span ${Math.max(1, Math.min(desired, trackCount))}`;
+}
+function getSpecs(trackCount, frameCount) {
+    if (trackCount <= 2) {
+        const pattern = [{ minHeight: '5rem' }, { minHeight: '3rem' }, { minHeight: '4.5rem' }];
+        return [
+            { minHeight: '3rem' },
+            { minHeight: '8rem' },
+            ...Array.from({ length: Math.max(frameCount - 2, 0) }, (_, i) => ({ minHeight: pattern[i % pattern.length].minHeight })),
+        ].map(s => ({ style: { width: '100%', ...s } }));
+    }
+    if (trackCount === 3) {
+        const pattern = [
+            { width: '100%', minHeight: '6rem', gridColumn: 'span 2' },
+            { width: '100%', minHeight: '3rem' },
+            { width: '100%', minHeight: '4.5rem' },
+        ];
+        return [
+            { style: { width: '100%', minHeight: '9rem', gridColumn: 'span 1', gridRow: 'span 2' } },
+            { style: { width: '100%', minHeight: '5rem', gridColumn: 'span 2' } },
+            { style: { width: '100%', minHeight: '3rem' } },
+            { style: { width: '100%', minHeight: '3rem' } },
+            ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] })),
+        ];
+    }
+    const pattern = [
+        { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },
+        { width: '100%', minHeight: '3rem' },
+        { width: '100%', minHeight: '4rem' },
+        { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) },
+    ];
+    return [
+        { style: { width: '100%', minHeight: '10rem', gridRow: 'span 2' } },
+        { style: { width: '100%', minHeight: '6rem', gridColumn: span(trackCount - 1, trackCount - 1) } },
+        { style: { width: '100%', minHeight: '3rem' } },
+        { style: { width: '100%', minHeight: '3rem' } },
+        ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] })),
+    ];
+}
+export function renderPreview(props) {
+    const columns = getColumns(props.columns);
+    const frameCount = getFrameCount(props.frameCount, 4, 12, 6);
+    const specs = getSpecs(getApproxColumnCount(columns), frameCount);
+    return (_jsx(Grid, { columns: toColumns(columns), gap: getGap(props.gap), justifyItems: getJustifyItems(props.justifyItems), alignItems: getAlignItems(props.alignItems), autoFlow: getAutoFlow(props.autoFlow), className: "w-full", children: specs.map((spec, index) => (_jsx(Frame, { pathStroke: "dashed", style: { ...BASE_CELL_STYLE, ...spec.style }, className: "w-full h-full", children: _jsx("div", { className: "size-full" }) }, index))) }));
+}
+export default function Example() {
+    return renderPreview({ columns: '3', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row', frameCount: 6 });
+}
+//# sourceMappingURL=02-track-placement.js.map

package/dist/components/Grid/examples/02-track-placement.js.map

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