ui-lab-registry 0.3.44 → 0.3.46

package/src/components/Grid/examples.json

@@ -1,7 +1,17 @@
 {
-  "01-basic-grid": {
-    "title": "Basic Grid",
-    "description": "A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.",
-    "code": "import React from 'react';\nimport { Grid } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Grid columns={3} gap=\"md\">\n      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>\n      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>\n      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>\n      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>\n      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>\n      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>\n    </Grid>\n  );\n}"
+  "02-track-placement": {
+    "title": "Track Placement",
+    "description": "Adjust columns, gap, alignment, and auto-placement flow to explore the CSS Grid track model.",
+    "code": "\"use client\";\n\nimport React from 'react'\nimport { Grid, Frame } from 'ui-lab-components'\nimport type { GridProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GridColumnsValue = '1' | '2' | '3' | '4' | '5' | '6' | 'auto-fit' | 'auto-fill';\ntype GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'columns',\n    label: 'Columns',\n    type: 'select',\n    options: [\n      { label: '1 Column', value: '1' },\n      { label: '2 Columns', value: '2' },\n      { label: '3 Columns', value: '3' },\n      { label: '4 Columns', value: '4' },\n      { label: '5 Columns', value: '5' },\n      { label: '6 Columns', value: '6' },\n      { label: 'Auto Fit', value: 'auto-fit' },\n      { label: 'Auto Fill', value: 'auto-fill' },\n    ],\n    defaultValue: '3',\n  },\n  {\n    name: 'gap',\n    label: 'Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'justifyItems',\n    label: 'Inline Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'alignItems',\n    label: 'Block Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Baseline', value: 'baseline' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'autoFlow',\n    label: 'Auto Placement',\n    type: 'select',\n    options: [\n      { label: 'Row', value: 'row' },\n      { label: 'Column', value: 'column' },\n      { label: 'Row Dense', value: 'row-dense' },\n      { label: 'Column Dense', value: 'column-dense' },\n    ],\n    defaultValue: 'row',\n  },\n  {\n    name: 'frameCount',\n    label: 'Panels',\n    type: 'stepper',\n    defaultValue: 6,\n    min: 4,\n    max: 12,\n    step: 1,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getColumns(value: unknown): GridColumnsValue {\n  if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill') return value;\n  return '3';\n}\n\nfunction toColumns(value: GridColumnsValue): number | 'auto-fit' | 'auto-fill' {\n  if (value === 'auto-fit' || value === 'auto-fill') return value;\n  return Number(value);\n}\n\nfunction getApproxColumnCount(value: GridColumnsValue) {\n  if (value === 'auto-fit' || value === 'auto-fill') return 4;\n  return Number(value);\n}\n\nfunction getGap(value: unknown): GridGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getJustifyItems(value: unknown): NonNullable<GridProps['justifyItems']> {\n  if (value === 'start' || value === 'center' || value === 'end') return value;\n  return 'stretch';\n}\n\nfunction getAlignItems(value: unknown): NonNullable<GridProps['alignItems']> {\n  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;\n  return 'stretch';\n}\n\nfunction getAutoFlow(value: unknown): NonNullable<GridProps['autoFlow']> {\n  if (value === 'column' || value === 'row-dense' || value === 'column-dense') return value;\n  return 'row';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction span(trackCount: number, desired: number) {\n  return `span ${Math.max(1, Math.min(desired, trackCount))}`;\n}\n\nfunction getSpecs(trackCount: number, frameCount: number) {\n  if (trackCount <= 2) {\n    const pattern = [{ minHeight: '5rem' }, { minHeight: '3rem' }, { minHeight: '4.5rem' }];\n    return [\n      { minHeight: '3rem' },\n      { minHeight: '8rem' },\n      ...Array.from({ length: Math.max(frameCount - 2, 0) }, (_, i) => ({ minHeight: pattern[i % pattern.length].minHeight })),\n    ].map(s => ({ style: { width: '100%', ...s } as React.CSSProperties }));\n  }\n  if (trackCount === 3) {\n    const pattern = [\n      { width: '100%', minHeight: '6rem', gridColumn: 'span 2' },\n      { width: '100%', minHeight: '3rem' },\n      { width: '100%', minHeight: '4.5rem' },\n    ];\n    return [\n      { style: { width: '100%', minHeight: '9rem', gridColumn: 'span 1', gridRow: 'span 2' } as React.CSSProperties },\n      { style: { width: '100%', minHeight: '5rem', gridColumn: 'span 2' } as React.CSSProperties },\n      { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n      { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n      ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] as React.CSSProperties })),\n    ];\n  }\n  const pattern = [\n    { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },\n    { width: '100%', minHeight: '3rem' },\n    { width: '100%', minHeight: '4rem' },\n    { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) },\n  ];\n  return [\n    { style: { width: '100%', minHeight: '10rem', gridRow: 'span 2' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '6rem', gridColumn: span(trackCount - 1, trackCount - 1) } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n    ...Array.from({ length: Math.max(frameCount - 4, 0) }, (_, i) => ({ style: pattern[i % pattern.length] as React.CSSProperties })),\n  ];\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getColumns(props.columns);\n  const frameCount = getFrameCount(props.frameCount, 4, 12, 6);\n  const specs = getSpecs(getApproxColumnCount(columns), frameCount);\n\n  return (\n    <Grid\n      columns={toColumns(columns)}\n      gap={getGap(props.gap)}\n      justifyItems={getJustifyItems(props.justifyItems)}\n      alignItems={getAlignItems(props.alignItems)}\n      autoFlow={getAutoFlow(props.autoFlow)}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <Frame key={index} pathStroke=\"dashed\" style={{ ...BASE_CELL_STYLE, ...spec.style }} className=\"w-full h-full\">\n          <div className=\"size-full\" />\n        </Frame>\n      ))}\n    </Grid>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: '3', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row', frameCount: 6 });\n}"
+  },
+  "03-editorial-spans": {
+    "title": "Editorial Spans",
+    "description": "Dense auto-flow grid with mixed column spans for editorial content layouts.",
+    "code": "\"use client\";\n\nimport React from 'react'\nimport { Grid, Frame } from 'ui-lab-components'\nimport type { GridProps } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GridColumnsValue = '1' | '2' | '3' | '4' | '5' | '6' | 'auto-fit' | 'auto-fill';\ntype GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'columns',\n    label: 'Columns',\n    type: 'select',\n    options: [\n      { label: '1 Column', value: '1' },\n      { label: '2 Columns', value: '2' },\n      { label: '3 Columns', value: '3' },\n      { label: '4 Columns', value: '4' },\n      { label: '5 Columns', value: '5' },\n      { label: '6 Columns', value: '6' },\n      { label: 'Auto Fit', value: 'auto-fit' },\n      { label: 'Auto Fill', value: 'auto-fill' },\n    ],\n    defaultValue: '4',\n  },\n  {\n    name: 'gap',\n    label: 'Gap Token',\n    type: 'select',\n    options: [\n      { label: 'Extra Small', value: 'xs' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n      { label: 'Extra Large', value: 'xl' },\n    ],\n    defaultValue: 'md',\n  },\n  {\n    name: 'justifyItems',\n    label: 'Inline Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'alignItems',\n    label: 'Block Alignment',\n    type: 'select',\n    options: [\n      { label: 'Stretch', value: 'stretch' },\n      { label: 'Start', value: 'start' },\n      { label: 'Center', value: 'center' },\n      { label: 'End', value: 'end' },\n      { label: 'Baseline', value: 'baseline' },\n    ],\n    defaultValue: 'stretch',\n  },\n  {\n    name: 'autoFlow',\n    label: 'Auto Placement',\n    type: 'select',\n    options: [\n      { label: 'Row', value: 'row' },\n      { label: 'Column', value: 'column' },\n      { label: 'Row Dense', value: 'row-dense' },\n      { label: 'Column Dense', value: 'column-dense' },\n    ],\n    defaultValue: 'row-dense',\n  },\n  {\n    name: 'frameCount',\n    label: 'Panels',\n    type: 'stepper',\n    defaultValue: 7,\n    min: 5,\n    max: 12,\n    step: 1,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getColumns(value: unknown): GridColumnsValue {\n  if (value === '1' || value === '2' || value === '4' || value === '5' || value === '6' || value === 'auto-fit' || value === 'auto-fill') return value;\n  return '3';\n}\n\nfunction toColumns(value: GridColumnsValue): number | 'auto-fit' | 'auto-fill' {\n  if (value === 'auto-fit' || value === 'auto-fill') return value;\n  return Number(value);\n}\n\nfunction getApproxColumnCount(value: GridColumnsValue) {\n  if (value === 'auto-fit' || value === 'auto-fill') return 4;\n  return Number(value);\n}\n\nfunction getGap(value: unknown): GridGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getJustifyItems(value: unknown): NonNullable<GridProps['justifyItems']> {\n  if (value === 'start' || value === 'center' || value === 'end') return value;\n  return 'stretch';\n}\n\nfunction getAlignItems(value: unknown): NonNullable<GridProps['alignItems']> {\n  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;\n  return 'stretch';\n}\n\nfunction getAutoFlow(value: unknown): NonNullable<GridProps['autoFlow']> {\n  if (value === 'column' || value === 'row-dense' || value === 'column-dense') return value;\n  return 'row';\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nfunction span(trackCount: number, desired: number) {\n  return `span ${Math.max(1, Math.min(desired, trackCount))}`;\n}\n\nfunction getSpecs(trackCount: number, frameCount: number) {\n  if (trackCount <= 2) {\n    const pattern = [{ minHeight: '4rem' }, { minHeight: '5.5rem' }, { minHeight: '3rem' }];\n    return [\n      { style: { width: '100%', minHeight: '8rem' } as React.CSSProperties },\n      ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => ({ style: { width: '100%', ...pattern[i % pattern.length] } as React.CSSProperties })),\n    ];\n  }\n  const pattern = [\n    { width: '100%', minHeight: '3rem' },\n    { width: '100%', minHeight: '6.5rem', gridColumn: span(trackCount, 2) },\n    { width: '100%', minHeight: '4rem' },\n    { width: '100%', minHeight: '3rem' },\n  ];\n  return [\n    { style: { width: '100%', minHeight: '8rem', gridColumn: span(trackCount, Math.max(trackCount - 1, 2)) } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '8rem' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '3rem' } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '5rem', gridColumn: span(trackCount, 2) } as React.CSSProperties },\n    { style: { width: '100%', minHeight: '5rem' } as React.CSSProperties },\n    ...Array.from({ length: Math.max(frameCount - 5, 0) }, (_, i) => ({ style: pattern[i % pattern.length] as React.CSSProperties })),\n  ];\n}\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getColumns(props.columns);\n  const frameCount = getFrameCount(props.frameCount, 5, 12, 7);\n  const specs = getSpecs(getApproxColumnCount(columns), frameCount);\n\n  return (\n    <Grid\n      columns={toColumns(columns)}\n      gap={getGap(props.gap)}\n      justifyItems={getJustifyItems(props.justifyItems)}\n      alignItems={getAlignItems(props.alignItems)}\n      autoFlow={getAutoFlow(props.autoFlow)}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <Frame key={index} pathStroke=\"dashed\" style={{ ...BASE_CELL_STYLE, ...spec.style }} className=\"w-full h-full\">\n          <div className=\"size-full\" />\n        </Frame>\n      ))}\n    </Grid>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: '4', gap: 'md', justifyItems: 'stretch', alignItems: 'stretch', autoFlow: 'row-dense', frameCount: 7 });\n}"
+  },
+  "04-responsive-card-rail": {
+    "title": "Responsive Card Rail",
+    "description": "Grid that adapts column count and gap based on container width using responsive prop objects.",
+    "code": "\"use client\";\n\nimport React from 'react'\nimport { Grid, Frame } from 'ui-lab-components'\nimport type { ControlDef } from '@/types'\n\ntype GridColumnsValue = '2' | '3' | '4' | 'auto-fit' | 'auto-fill';\ntype GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst BASE_CELL_STYLE = {\n  '--frame-fill': 'var(--background-900)',\n  '--frame-stroke-color': 'var(--background-600)',\n} as React.CSSProperties;\n\nexport const controls: ControlDef[] = [\n  {\n    name: 'columns',\n    label: 'Columns',\n    type: 'select',\n    options: [\n      { label: '2 Columns', value: '2' },\n      { label: '3 Columns', value: '3' },\n      { label: '4 Columns', value: '4' },\n      { label: 'Auto Fit', value: 'auto-fit' },\n      { label: 'Auto Fill', value: 'auto-fill' },\n    ],\n    defaultValue: '4',\n  },\n  {\n    name: 'gap',\n    label: 'Base Gap Token',\n    type: 'select',\n    options: [\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: 'rowGap',\n    label: 'Row Gap',\n    type: 'select',\n    options: [\n      { label: 'Match Gap', value: 'inherit' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n    ],\n    defaultValue: 'inherit',\n  },\n  {\n    name: 'columnGap',\n    label: 'Column Gap',\n    type: 'select',\n    options: [\n      { label: 'Match Gap', value: 'inherit' },\n      { label: 'Small', value: 'sm' },\n      { label: 'Medium', value: 'md' },\n      { label: 'Large', value: 'lg' },\n    ],\n    defaultValue: 'inherit',\n  },\n  {\n    name: 'frameCount',\n    label: 'Cards',\n    type: 'stepper',\n    defaultValue: 6,\n    min: 4,\n    max: 10,\n    step: 1,\n  },\n  {\n    name: 'responsive',\n    label: 'Enable Responsive Object',\n    type: 'toggle',\n    defaultValue: true,\n  },\n];\n\nexport const previewLayout = 'start' as const;\nexport const resizable = true;\n\nfunction getColumns(value: unknown): GridColumnsValue {\n  if (value === '2' || value === '3' || value === 'auto-fit' || value === 'auto-fill') return value;\n  return '4';\n}\n\nfunction toColumns(value: GridColumnsValue): number | 'auto-fit' | 'auto-fill' {\n  if (value === 'auto-fit' || value === 'auto-fill') return value;\n  return Number(value);\n}\n\nfunction getGap(value: unknown): GridGap {\n  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;\n  return 'md';\n}\n\nfunction getOptionalGap(value: unknown): GridGap | undefined {\n  if (value === 'inherit' || value == null) return undefined;\n  return getGap(value);\n}\n\nfunction getFrameCount(value: unknown, min: number, max: number, fallback: number) {\n  const n = typeof value === 'number' ? value : Number(value);\n  if (Number.isNaN(n)) return fallback;\n  return Math.min(max, Math.max(min, Math.round(n)));\n}\n\nconst SPEC_PATTERN = [\n  { minHeight: '9rem' },\n  { minHeight: '4rem' },\n  { minHeight: '3rem' },\n  { minHeight: '5rem' },\n  { minHeight: '3.5rem' },\n  { minHeight: '6rem' },\n];\n\nexport function renderPreview(props: Record<string, unknown>) {\n  const columns = getColumns(props.columns);\n  const baseColumns = toColumns(columns);\n  const gap = getGap(props.gap);\n  const responsive = Boolean(props.responsive);\n  const frameCount = getFrameCount(props.frameCount, 4, 10, 6);\n  const specs = Array.from({ length: frameCount }, (_, i) => SPEC_PATTERN[i % SPEC_PATTERN.length]);\n\n  return (\n    <Grid\n      columns={responsive ? { sm: 1, md: 2, lg: baseColumns } : baseColumns}\n      gap={responsive ? { sm: 'sm', md: gap, lg: gap } : gap}\n      rowGap={getOptionalGap(props.rowGap)}\n      columnGap={getOptionalGap(props.columnGap)}\n      responsive={responsive}\n      className=\"w-full\"\n    >\n      {specs.map((spec, index) => (\n        <Frame key={index} pathStroke=\"dashed\" style={{ ...BASE_CELL_STYLE, width: '100%', minHeight: spec.minHeight } as React.CSSProperties} className=\"w-full h-full\">\n          <div className=\"size-full\" />\n        </Frame>\n      ))}\n    </Grid>\n  );\n}\n\nexport default function Example() {\n  return renderPreview({ columns: '4', gap: 'md', rowGap: 'inherit', columnGap: 'inherit', frameCount: 6, responsive: true });\n}"
   }
 }

package/src/components/Grid/index.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
-import { Divider, Grid } from 'ui-lab-components';
+import { Divider, Frame, Grid } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-grid.js';
+import Example2, { metadata as metadata2, controls as controls2, renderPreview as renderPreview2, previewLayout as previewLayout2, resizable as resizable2 } from './examples/02-track-placement.js';
+import Example3, { metadata as metadata3, controls as controls3, renderPreview as renderPreview3, previewLayout as previewLayout3, resizable as resizable3 } from './examples/03-editorial-spans.js';
+import Example4, { metadata as metadata4, controls as controls4, renderPreview as renderPreview4, previewLayout as previewLayout4, resizable as resizable4 } from './examples/04-responsive-card-rail.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
-  { id: '01-basic-grid', Component: Example1, metadata: metadata1 },
+  { id: '02-track-placement', Component: Example2, metadata: metadata2, controls: controls2, renderPreview: renderPreview2, previewLayout: previewLayout2, resizable: resizable2 },
+  { id: '03-editorial-spans', Component: Example3, metadata: metadata3, controls: controls3, renderPreview: renderPreview3, previewLayout: previewLayout3, resizable: resizable3 },
+  { id: '04-responsive-card-rail', Component: Example4, metadata: metadata4, controls: controls4, renderPreview: renderPreview4, previewLayout: previewLayout4, resizable: resizable4 },
 ];
 
+const BASE_FRAME_STYLE = {
+  '--frame-fill': 'var(--background-900)',
+  '--frame-stroke-color': 'var(--background-600)',
+} as React.CSSProperties;
+
 const gridControls: ControlDef[] = [
   {
     name: 'columns',
@@ -78,21 +87,52 @@ const gridControls: ControlDef[] = [
   },
 ];
 
-const gridBasicCode = `import { Grid } from "ui-lab-components";
+const gridBasicCode = `import { Grid, Frame } from "ui-lab-components";
 
 export function Example() {
   return (
     <Grid columns={3} gap="md">
-      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">1</div>
-      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">2</div>
-      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">3</div>
-      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">4</div>
-      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">5</div>
-      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">6</div>
+      <Frame pathStroke="dashed" style={{ width: "100%", minHeight: "9rem", gridRow: "span 2" }} />
+      <Frame pathStroke="dashed" style={{ width: "100%", minHeight: "5rem", gridColumn: "span 2" }} />
+      <Frame pathStroke="dashed" style={{ width: "100%", minHeight: "3rem" }} />
+      <Frame pathStroke="dashed" style={{ width: "100%", minHeight: "3rem" }} />
+      <Frame pathStroke="dashed" style={{ width: "100%", minHeight: "6rem", gridColumn: "span 2" }} />
+      <Frame pathStroke="dashed" style={{ width: "100%", minHeight: "4rem" }} />
     </Grid>
   );
 }`;
 
+function GridFrame({ style }: { style: React.CSSProperties }) {
+  return (
+    <Frame pathStroke="dashed" style={{ ...BASE_FRAME_STYLE, ...style }} className="w-full h-full">
+      <div className="size-full" />
+    </Frame>
+  );
+}
+
+function getPreviewSpecs(columns: number | 'auto-fit' | 'auto-fill') {
+  const trackCount = typeof columns === 'number' ? columns : 4;
+  if (trackCount <= 2) {
+    return [
+      { width: '100%', minHeight: '4rem' },
+      { width: '100%', minHeight: '8rem' },
+      { width: '100%', minHeight: '3rem' },
+      { width: '100%', minHeight: '5rem' },
+      { width: '100%', minHeight: '4rem' },
+      { width: '100%', minHeight: '3rem' },
+    ] as React.CSSProperties[];
+  }
+
+  return [
+    { width: '100%', minHeight: '9rem', gridRow: 'span 2' },
+    { width: '100%', minHeight: '5rem', gridColumn: `span ${Math.max(1, trackCount - 1)}` },
+    { width: '100%', minHeight: '3rem' },
+    { width: '100%', minHeight: '3rem' },
+    { width: '100%', minHeight: '6rem', gridColumn: `span ${Math.min(2, trackCount)}` },
+    { width: '100%', minHeight: '4rem' },
+  ] as React.CSSProperties[];
+}
+
 export const gridDetail: ComponentDetail = {
   id: 'grid',
   name: 'Grid',
@@ -113,24 +153,22 @@ export const gridDetail: ComponentDetail = {
       title: 'Preview',
       description: 'Adjust props to customize the component',
       code: gridBasicCode,
-      previewLayout: 'center',
+      previewLayout: 'start',
       renderPreview: (props: any) => {
-        const GridCell = ({ children }: { children?: React.ReactNode }) => (
-          <div className="bg-accent-500/10 border border-accent-500/10 rounded flex items-center justify-center text-accent-500 text-sm font-medium h-20">
-            {children}
-          </div>
-        );
+        const columns = props.columns === 'auto-fit' || props.columns === 'auto-fill' ? props.columns : Number(props.columns ?? 3);
+        const specs = getPreviewSpecs(columns);
+
         return (
           <Grid
-            columns={props.columns}
+            columns={columns}
             gap={props.gap}
             justifyItems={props.justifyItems}
             alignItems={props.alignItems}
             autoFlow={props.autoFlow}
             className="w-full"
           >
-            {Array.from({ length: 12 }).map((_, i) => (
-              <GridCell key={i}>{i + 1}</GridCell>
+            {specs.map((style, index) => (
+              <GridFrame key={index} style={style} />
             ))}
           </Grid>
         );

package/src/components/Group/examples/index.ts

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-group.js';
-export { metadata as metadata1 } from './01-basic-group.js';
+// Group examples are served from @ui-lab-core/library (private registry)

package/src/components/Group/index.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
-import { Divider, Group } from 'ui-lab-components';
+import { Group } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-group.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-const examplesData = [
-  { id: '01-basic-group', Component: Example1, metadata: metadata1 },
-];
-
 
 const groupControls: ControlDef[] = [
   {
@@ -98,7 +90,6 @@ export const groupDetail: ComponentDetail = {
         </Group>
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
 
   variants: [
@@ -132,4 +123,3 @@ export const groupDetail: ComponentDetail = {
 };
 
 export { groupControls };
-export * from './examples/index.js';

package/src/components/Input/examples/index.ts

@@ -1,4 +1 @@
-export { default as Example1 } from './01-basic-input.js';
-export { metadata as metadata1 } from './01-basic-input.js';
-export { default as Example2 } from './02-validation.js';
-export { metadata as metadata2 } from './02-validation.js';
+// Input examples are served from @ui-lab-core/library (private registry)

package/src/components/Input/examples.json

@@ -8,5 +8,35 @@
     "title": "Validation States",
     "description": "Input fields with error and success validation states, including helper text for user feedback.",
     "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n      {/* Error State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label error helperText=\"Please enter a valid email address\" helperTextError>\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          error\n          defaultValue=\"invalid-email\"\n          icon={{ suffix: <FaCircleExclamation className=\"text-danger-600\" size={14} /> }}\n        />\n      </div>\n\n      {/* Success State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label helperText=\"Email address is available\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          defaultValue=\"user@example.com\"\n          icon={{ suffix: <FaCircleCheck className=\"text-success-600\" size={14} /> }}\n          className=\"border-success-600 focus:border-success-600\"\n        />\n      </div>\n\n      {/* Default State with Helper Text */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label required helperText=\"We'll never share your email with anyone else.\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n        />\n      </div>\n    </div>\n  );\n}"
+  },
+  "03-sign-in": {
+    "title": "Sign In Form",
+    "description": "Email and password fields with a password visibility toggle — a common authentication pattern.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex, Button } from \"ui-lab-components\";\nimport { FaEnvelope, FaLock, FaEye, FaEyeSlash } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 320 }}>\n      <Input\n        type=\"email\"\n        icon={<FaEnvelope className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Email address\"\n        autoComplete=\"email\"\n      />\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        icon={<FaLock className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Password\"\n        autoComplete=\"current-password\"\n        actions={[\n          {\n            icon: showPassword\n              ? <FaEyeSlash className=\"w-3.5 h-3.5\" />\n              : <FaEye className=\"w-3.5 h-3.5\" />,\n            title: showPassword ? \"Hide password\" : \"Show password\",\n            onClick: () => setShowPassword((v) => !v),\n          },\n        ]}\n      />\n      <Button variant=\"primary\" className=\"w-full mt-1\">Sign in</Button>\n    </Flex>\n  );\n}"
+  },
+  "04-search": {
+    "title": "Search",
+    "description": "Search input with a keyboard shortcut hint that switches to a clear action once the user types.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex, Badge } from \"ui-lab-components\";\nimport { FaMagnifyingGlass, FaXmark } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [query, setQuery] = useState(\"\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 340 }}>\n      <Input\n        icon={<FaMagnifyingGlass className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Search components...\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        hint={!query ? <Badge>⌘K</Badge> : undefined}\n        actions={\n          query\n            ? [{ icon: <FaXmark className=\"w-3.5 h-3.5\" />, title: \"Clear\", onClick: () => setQuery(\"\") }]\n            : []\n        }\n      />\n    </Flex>\n  );\n}"
+  },
+  "05-user-handle": {
+    "title": "User Handle",
+    "description": "Editable username field with an inline copy action.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaAt, FaCopy, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [handle, setHandle] = useState(\"kyza\");\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 320 }}>\n      <Input\n        icon={<FaAt className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"username\"\n        value={handle}\n        onChange={(e) => setHandle(e.target.value)}\n        actions={[\n          {\n            icon: copied\n              ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n              : <FaCopy className=\"w-3.5 h-3.5\" />,\n            title: copied ? \"Copied!\" : \"Copy handle\",\n            onClick: handleCopy,\n          },\n        ]}\n      />\n    </Flex>\n  );\n}"
+  },
+  "06-api-key": {
+    "title": "API Key",
+    "description": "Read-only secret field with reveal and copy actions — suitable for credentials and tokens.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaKey, FaEye, FaEyeSlash, FaCopy, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [revealed, setRevealed] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const key = \"sk-proj-a8f2c1d9e4b7\";\n\n  const handleCopy = () => {\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 360 }}>\n      <Input\n        type={revealed ? \"text\" : \"password\"}\n        icon={<FaKey className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        value={key}\n        readOnly\n        actions={[\n          {\n            icon: revealed\n              ? <FaEyeSlash className=\"w-3.5 h-3.5\" />\n              : <FaEye className=\"w-3.5 h-3.5\" />,\n            title: revealed ? \"Hide key\" : \"Reveal key\",\n            onClick: () => setRevealed((v) => !v),\n          },\n          {\n            icon: copied\n              ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n              : <FaCopy className=\"w-3.5 h-3.5\" />,\n            title: copied ? \"Copied!\" : \"Copy key\",\n            onClick: handleCopy,\n          },\n        ]}\n      />\n    </Flex>\n  );\n}"
+  },
+  "07-url-validation": {
+    "title": "URL with Validation",
+    "description": "URL field that shows a success or error icon in the suffix slot based on the input value.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaLink, FaCircleExclamation, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [url, setUrl] = useState(\"\");\n\n  const isValid = url.length === 0 || /^https?:\\/\\/.+\\..+/.test(url);\n  const showError = url.length > 0 && !isValid;\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 340 }}>\n      <Input\n        placeholder=\"https://example.com\"\n        value={url}\n        onChange={(e) => setUrl(e.target.value)}\n        error={showError}\n        icon={{\n          prefix: <FaLink className=\"w-3.5 h-3.5 text-foreground-400\" />,\n          suffix: showError\n            ? <FaCircleExclamation className=\"w-3.5 h-3.5 text-red-500\" />\n            : url.length > 0\n            ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n            : undefined,\n        }}\n      />\n    </Flex>\n  );\n}"
+  },
+  "08-quantity": {
+    "title": "Quantity",
+    "description": "Number input with native spin controls for selecting a bounded quantity.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [qty, setQty] = useState(1);\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 200 }}>\n      <Input\n        type=\"number\"\n        placeholder=\"Qty\"\n        value={qty}\n        min={1}\n        max={99}\n        onChange={(e) => setQty(Number(e.target.value))}\n      />\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Input/index.tsx

@@ -1,16 +1,6 @@
 import React from 'react';
 import { Input } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-input.js';
-import Example2, { metadata as metadata2 } from './examples/02-validation.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-const examplesData = [
-  { id: '01-basic-input', Component: Example1, metadata: metadata1 },
-  { id: '02-validation', Component: Example2, metadata: metadata2 },
-];
-
 
 const inputControls: ControlDef[] = [
   {
@@ -83,7 +73,6 @@ export const inputDetail: ComponentDetail = {
         />
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
 
   variants: [
@@ -105,4 +94,3 @@ export const inputDetail: ComponentDetail = {
 };
 
 export { inputControls };
-export * from './examples/index.js';

package/src/components/Label/examples/index.ts

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic-label.js';
-export { metadata as metadata1 } from './01-basic-label.js';
+// Label examples are served from @ui-lab-core/library (private registry)

package/src/components/Label/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { Label } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-label.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaEnvelope } from 'react-icons/fa6';
 
-const examplesData = [
-  { id: '01-basic-label', Component: Example1, metadata: metadata1 },
-];
 
 
 const labelControls: ControlDef[] = [
@@ -82,8 +76,7 @@ export const labelDetail: ComponentDetail = {
           {props.label || "Label"}
         </Label>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -105,4 +98,3 @@ export const labelDetail: ComponentDetail = {
 };
 
 export { labelControls };
-export * from './examples/index.js';

package/src/components/List/examples/index.ts

@@ -1,2 +1 @@
-export { default as Example1 } from './01-basic.js';
-export { metadata as metadata1 } from './01-basic.js';
+// List examples are served from @ui-lab-core/library (private registry)

package/src/components/List/examples.json

@@ -3,5 +3,25 @@
     "title": "Basic List",
     "description": "A simple list displaying basic items with selection and interaction support.",
     "code": "import { List } from 'ui-lab-components';\nimport { Button } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <List aria-label=\"Basic List Example\">\n      <List.Header>\n        <h2>Items</h2>\n      </List.Header>\n      <List.Item interactive>Item One</List.Item>\n      <List.Item interactive>Item Two</List.Item>\n      <List.Item interactive>Item Three</List.Item>\n      <List.Footer align=\"center\">\n        <Button variant=\"primary\" size=\"sm\">\n          Load More\n        </Button>\n      </List.Footer>\n    </List>\n  );\n}"
+  },
+  "02-review-queue": {
+    "title": "Review Queue",
+    "description": "A compact checklist for work that can be completed directly from each row.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { List } from \"ui-lab-components\";\n\nconst reviewItems = [\n  { id: \"legal\", title: \"Legal review\", desc: \"Updated retention language\" },\n  { id: \"security\", title: \"Security review\", desc: \"New access scopes\" },\n  { id: \"billing\", title: \"Billing review\", desc: \"Invoice copy changes\" },\n];\n\nexport default function Example() {\n  const [checked, setChecked] = useState(() => new Set([\"legal\"]));\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const toggleItem = (id: string) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  };\n\n  return (\n    <List items={reviewItems} spacing=\"sm\" style={{ width: 320 }}>\n      {reviewItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>\n          <List.Checkbox\n            aria-label={`Mark ${item.title} reviewed`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
+  },
+  "03-notification-rules": {
+    "title": "Notification Rules",
+    "description": "Rows can combine a leading checkbox with a trailing Select action.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { List, Select } from \"ui-lab-components\";\n\nconst notificationItems = [\n  { id: \"comments\", title: \"Comments\", desc: \"Replies and mentions\" },\n  { id: \"deployments\", title: \"Deployments\", desc: \"Preview and production updates\" },\n  { id: \"incidents\", title: \"Incidents\", desc: \"Status changes and postmortems\" },\n];\n\nexport default function Example() {\n  const [checked, setChecked] = useState(() => new Set([\"comments\", \"incidents\"]));\n  const [delivery, setDelivery] = useState<Record<string, string | number | null>>({\n    comments: \"digest\",\n    deployments: \"email\",\n    incidents: \"push\",\n  });\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const toggleItem = (id: string) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  };\n\n  const setDeliveryMode = (id: string, value: string | number | null) => {\n    setDelivery((current) => ({ ...current, [id]: value }));\n  };\n\n  return (\n    <List items={notificationItems} spacing=\"sm\" style={{ width: 400 }}>\n      {notificationItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>\n          <List.Checkbox\n            aria-label={`Enable ${item.title.toLowerCase()} notifications`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n          <List.Select\n            selectedKey={delivery[item.id]}\n            valueLabel={String(delivery[item.id] ?? \"\")}\n            isDisabled={!checked.has(item.id)}\n            onSelectionChange={(value) => setDeliveryMode(item.id, value)}\n          >\n            <Select.Trigger>\n              <Select.Value placeholder=\"Mode\" />\n            </Select.Trigger>\n            <Select.Content>\n              <Select.List>\n                <Select.Item value=\"email\">Email</Select.Item>\n                <Select.Item value=\"digest\">Digest</Select.Item>\n                <Select.Item value=\"push\">Push</Select.Item>\n              </Select.List>\n            </Select.Content>\n          </List.Select>\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
+  },
+  "04-quota-editor": {
+    "title": "Quota Editor",
+    "description": "Inline inputs work as row actions without taking over the List primitive.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { List } from \"ui-lab-components\";\n\nconst quotaItems = [\n  { id: \"seats\", title: \"Seats\", desc: \"Maximum workspace members\" },\n  { id: \"projects\", title: \"Projects\", desc: \"Active projects per workspace\" },\n  { id: \"tokens\", title: \"Tokens\", desc: \"Monthly API token budget\" },\n];\n\nexport default function Example() {\n  const [checked, setChecked] = useState(() => new Set([\"seats\", \"projects\"]));\n  const [limits, setLimits] = useState<Record<string, string>>({\n    seats: \"24\",\n    projects: \"12\",\n    tokens: \"50000\",\n  });\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const toggleItem = (id: string) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  };\n\n  const setLimit = (id: string, value: string) => {\n    setLimits((current) => ({ ...current, [id]: value }));\n  };\n\n  return (\n    <List items={quotaItems} spacing=\"sm\" style={{ width: 396 }}>\n      {quotaItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>\n          <List.Checkbox\n            aria-label={`Enable ${item.title.toLowerCase()} limit`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n          <List.Input\n            aria-label={`${item.title} limit`}\n            type=\"number\"\n            value={limits[item.id]}\n            disabled={!checked.has(item.id)}\n            onChange={(event) => setLimit(item.id, event.currentTarget.value)}\n            className=\"w-24\"\n          />\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
+  },
+  "05-permissions-matrix": {
+    "title": "Permissions Matrix",
+    "description": "A parent checkbox can summarize rows that also expose per-row Select controls.",
+    "code": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { List, Select } from \"ui-lab-components\";\n\nconst permissionItems = [\n  { id: \"members\", title: \"Members\", desc: \"Invite and remove workspace members\" },\n  { id: \"billing\", title: \"Billing\", desc: \"Update plan, seats, and invoices\" },\n  { id: \"tokens\", title: \"Tokens\", desc: \"Issue scoped API credentials\" },\n];\n\nexport default function Example() {\n  const rows = useMemo(() => [{ id: \"all\", title: \"All permissions\" }, ...permissionItems], []);\n  const [checked, setChecked] = useState(() => new Set([\"members\", \"tokens\"]));\n  const [level, setLevel] = useState<Record<string, string | number | null>>({\n    members: \"edit\",\n    billing: \"view\",\n    tokens: \"edit\",\n  });\n  const allChecked = checked.size === permissionItems.length;\n  const isIndeterminate = checked.size > 0 && !allChecked;\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const setAll = (value: boolean) => {\n    permissionItems.forEach((item) => setItem(item.id, value));\n  };\n\n  const setPermissionLevel = (id: string, value: string | number | null) => {\n    setLevel((current) => ({ ...current, [id]: value }));\n  };\n\n  return (\n    <List items={rows} spacing=\"sm\" style={{ width: 420 }}>\n      <List.Item value=\"all\" interactive onClick={() => setAll(!allChecked)}>\n        <List.Checkbox\n          aria-label=\"Toggle all permissions\"\n          placement=\"start\"\n          checked={allChecked}\n          isIndeterminate={isIndeterminate}\n          onCheckedChange={setAll}\n        />\n        <List.Title>All permissions</List.Title>\n      </List.Item>\n      <List.Divider />\n      {permissionItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => setItem(item.id, !checked.has(item.id))}>\n          <div className=\"w-5 flex-shrink-0\" />\n          <List.Checkbox\n            aria-label={`Allow ${item.title.toLowerCase()}`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n          <List.Select\n            selectedKey={level[item.id]}\n            valueLabel={String(level[item.id] ?? \"\")}\n            isDisabled={!checked.has(item.id)}\n            onSelectionChange={(value) => setPermissionLevel(item.id, value)}\n          >\n            <Select.Trigger>\n              <Select.Value placeholder=\"Access\" />\n            </Select.Trigger>\n            <Select.Content>\n              <Select.List>\n                <Select.Item value=\"view\">View</Select.Item>\n                <Select.Item value=\"edit\">Edit</Select.Item>\n                <Select.Item value=\"admin\">Admin</Select.Item>\n              </Select.List>\n            </Select.Content>\n          </List.Select>\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
   }
 }

package/src/components/List/index.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import { List, Button } from 'ui-lab-components';
 import { ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
-
-const examplesData = [
-  { id: '01-basic', Component: Example1, metadata: metadata1 },
-];
 
 const basicListCode = `import { List, Button } from "ui-lab-components";
 
@@ -63,7 +56,6 @@ export const listDetail: ComponentDetail = {
         </List>
       ),
     },
-    ...loadComponentExamples(examplesData, examplesJson),
   ],
   variants: [
     {
@@ -141,7 +133,7 @@ export function Example() {
       </List.Header>
       <List.Item interactive>
         <p>Item with actions</p>
-        <List.ActionGroup justify="space-between">
+        <List.ActionGroup justify="between">
           <button>👍 Like</button>
           <button>💬 Reply</button>
         </List.ActionGroup>
@@ -156,7 +148,7 @@ export function Example() {
           </List.Header>
           <List.Item interactive>
             <p className="text-sm text-foreground-300">Item with actions</p>
-            <List.ActionGroup justify="space-between">
+            <List.ActionGroup justify="between">
               <button className="text-sm text-foreground-300 hover:text-foreground-100 transition-colors">👍 Like</button>
               <button className="text-sm text-foreground-300 hover:text-foreground-100 transition-colors">💬 Reply</button>
             </List.ActionGroup>
@@ -201,5 +193,3 @@ export function Example() {
     },
   ],
 };
-
-export * from './examples/index.js';

package/src/components/Mask/examples/index.ts

@@ -1,5 +1 @@
-export { default as Example1 } from './01-read-more-fade.js';
-export { metadata as metadata1 } from './01-read-more-fade.js';
-
-export { default as Example2 } from './02-text-gradient.js';
-export { metadata as metadata2 } from './02-text-gradient.js';
+// Mask examples are served from @ui-lab-core/library (private registry)

package/src/components/Mask/index.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import { Mask } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-read-more-fade.js';
-import Example2, { metadata as metadata2 } from './examples/02-text-gradient.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
-const examplesData = [
-  { id: '01-read-more-fade', Component: Example1, metadata: metadata1 },
-  { id: '02-text-gradient', Component: Example2, metadata: metadata2 },
-];
 
 const maskControls: ControlDef[] = [
   {
@@ -120,10 +112,8 @@ export const maskDetail: ComponentDetail = {
           </div>
         );
       },
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 };
 
 export { maskControls };
-export * from './examples/index.js';

package/src/components/Menu/examples/index.ts

@@ -1,4 +1 @@
-export { default as Example1 } from './01-basic-menu.js';
-export { metadata as metadata1 } from './01-basic-menu.js';
-export { default as Example2 } from './02-nested-menu.js';
-export { metadata as metadata2 } from './02-nested-menu.js';
+// Menu examples are served from @ui-lab-core/library (private registry)

package/src/components/Menu/examples.json

@@ -8,5 +8,25 @@
     "title": "Nested Menu",
     "description": "Context menu with submenus for organizing related actions. Hover over items with arrows to reveal nested options.",
     "code": "import { Menu } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Menu>\n      <Menu.Trigger className=\"flex items-center justify-center rounded-md border-2 border-dashed border-background-600 p-12 w-full cursor-context-menu select-none text-foreground-300 hover:border-background-500 transition-colors\">\n        Right click here\n      </Menu.Trigger>\n      <Menu.Content>\n        <Menu.Item>New File</Menu.Item>\n        <Menu.Item>New Folder</Menu.Item>\n        <Menu.Separator />\n        <Menu.Sub>\n          <Menu.SubTrigger>Open with...</Menu.SubTrigger>\n          <Menu.SubContent>\n            <Menu.Item>VS Code</Menu.Item>\n            <Menu.Item>Sublime Text</Menu.Item>\n            <Menu.Item>Vim</Menu.Item>\n            <Menu.Separator />\n            <Menu.Item>Other Application...</Menu.Item>\n          </Menu.SubContent>\n        </Menu.Sub>\n        <Menu.Sub>\n          <Menu.SubTrigger>Share</Menu.SubTrigger>\n          <Menu.SubContent>\n            <Menu.Item>Copy Link</Menu.Item>\n            <Menu.Item>Email</Menu.Item>\n            <Menu.Sub>\n              <Menu.SubTrigger>Social Media</Menu.SubTrigger>\n              <Menu.SubContent>\n                <Menu.Item>Twitter</Menu.Item>\n                <Menu.Item>LinkedIn</Menu.Item>\n                <Menu.Item>Facebook</Menu.Item>\n              </Menu.SubContent>\n            </Menu.Sub>\n          </Menu.SubContent>\n        </Menu.Sub>\n        <Menu.Separator />\n        <Menu.Item>Rename</Menu.Item>\n        <Menu.Item disabled>Delete</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}"
+  },
+  "03-toolbar-dropdown": {
+    "title": "Toolbar Dropdown",
+    "description": "Dropdown menu of actions with keyboard shortcuts and a disabled item.",
+    "code": "import { Menu, Button } from \"ui-lab-components\";\nimport { FaChevronDown } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Menu type=\"pop-over\">\n      <Menu.Trigger>\n        <Button variant=\"ghost\">\n          File <FaChevronDown className=\"w-3 h-3 ml-1\" />\n        </Button>\n      </Menu.Trigger>\n      <Menu.Content align=\"start\">\n        <Menu.Item onSelect={() => {}}>\n          New file\n          <Menu.Shortcut>⌘N</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Open…\n          <Menu.Shortcut>⌘O</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Save\n          <Menu.Shortcut>⌘S</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Separator />\n        <Menu.Item disabled>Recent files</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}"
+  },
+  "04-table-row-actions": {
+    "title": "Table Row Actions",
+    "description": "Per-row overflow menu in a table, with a destructive action separated from neutral ones.",
+    "code": "import { Menu, Button } from \"ui-lab-components\";\nimport { FaEllipsis } from \"react-icons/fa6\";\n\nconst rows = [\n  { id: \"doc_1\", name: \"Q3 roadmap\", updated: \"2h ago\" },\n  { id: \"doc_2\", name: \"Pricing review\", updated: \"yesterday\" },\n  { id: \"doc_3\", name: \"Hiring plan\", updated: \"3 days ago\" },\n];\n\nexport default function Example() {\n  return (\n    <table className=\"w-full text-sm border-collapse\">\n      <thead>\n        <tr className=\"border-b border-background-700\">\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Document</th>\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Updated</th>\n          <th className=\"py-2 px-3\" />\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.id} className=\"border-b border-background-700 last:border-0\">\n            <td className=\"py-2 px-3\">{row.name}</td>\n            <td className=\"py-2 px-3 text-foreground-400\">{row.updated}</td>\n            <td className=\"py-2 px-3 text-right\">\n              <Menu type=\"pop-over\">\n                <Menu.Trigger>\n                  <Button\n                    icon={<FaEllipsis />}\n                    size=\"icon\"\n                    variant=\"ghost\"\n                    styles=\"p-2\"\n                    aria-label={`Actions for ${row.name}`}\n                  />\n                </Menu.Trigger>\n                <Menu.Content align=\"end\">\n                  <Menu.Item onSelect={() => {}}>Open</Menu.Item>\n                  <Menu.Item onSelect={() => {}}>Rename</Menu.Item>\n                  <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n                  <Menu.Separator />\n                  <Menu.Item\n                    onSelect={() => {}}\n                    styles={{ root: \"text-destructive\" }}\n                  >\n                    Delete\n                  </Menu.Item>\n                </Menu.Content>\n              </Menu>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}"
+  },
+  "05-context-menu": {
+    "title": "Context Menu",
+    "description": "Right-click anywhere in the surface to open the menu at the cursor position.",
+    "code": "import { Menu } from \"ui-lab-components\";\n\nexport default function Example() {\n  return (\n    <Menu type=\"context-menu\">\n      <Menu.Trigger>\n        <div className=\"flex items-center justify-center w-80 h-32 border border-dashed border-background-700 rounded-sm text-sm text-foreground-400 select-none\">\n          Right-click anywhere in this area\n        </div>\n      </Menu.Trigger>\n      <Menu.Content>\n        <Menu.Item onSelect={() => {}}>\n          Cut\n          <Menu.Shortcut>⌘X</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Copy\n          <Menu.Shortcut>⌘C</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Paste\n          <Menu.Shortcut>⌘V</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Separator />\n        <Menu.Item onSelect={() => {}} styles={{ root: \"text-destructive\" }}>\n          Delete\n        </Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}"
+  },
+  "06-view-options": {
+    "title": "View Options",
+    "description": "Mixed checkbox and radio items for toggling display state and selecting a single density.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Menu, Button } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [showGrid, setShowGrid] = useState(true);\n  const [showRulers, setShowRulers] = useState(false);\n  const [density, setDensity] = useState(\"comfortable\");\n\n  return (\n    <Menu type=\"pop-over\">\n      <Menu.Trigger>\n        <Button>View</Button>\n      </Menu.Trigger>\n      <Menu.Content align=\"start\">\n        <Menu.Label>Display</Menu.Label>\n        <Menu.CheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>\n          Show grid\n        </Menu.CheckboxItem>\n        <Menu.CheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>\n          Show rulers\n        </Menu.CheckboxItem>\n        <Menu.Separator />\n        <Menu.Label>Density</Menu.Label>\n        <Menu.RadioGroup value={density} onValueChange={setDensity}>\n          <Menu.RadioItem value=\"compact\">Compact</Menu.RadioItem>\n          <Menu.RadioItem value=\"comfortable\">Comfortable</Menu.RadioItem>\n          <Menu.RadioItem value=\"spacious\">Spacious</Menu.RadioItem>\n        </Menu.RadioGroup>\n      </Menu.Content>\n    </Menu>\n  );\n}"
   }
 }

package/src/components/Menu/index.tsx

@@ -1,16 +1,8 @@
 import React from 'react';
 import { Menu } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-menu.js';
-import Example2, { metadata as metadata2 } from './examples/02-nested-menu.js';
-import examplesJson from './examples.json' with { type: 'json' };
-import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaArrowsRotate, FaStar, FaTrash } from 'react-icons/fa6';
 
-const examplesData = [
-  { id: '01-basic-menu', Component: Example1, metadata: metadata1 },
-  { id: '02-nested-menu', Component: Example2, metadata: metadata2 },
-];
 
 const menuControls: ControlDef[] = [];
 
@@ -63,8 +55,7 @@ export const menuDetail: ComponentDetail = {
           </Menu.Content>
         </Menu>
       ),
-    },
-    ...loadComponentExamples(examplesData, examplesJson),
+    }
   ],
 
   variants: [
@@ -90,4 +81,3 @@ export const menuDetail: ComponentDetail = {
 };
 
 export { menuControls };
-export * from './examples/index.js';

package/src/components/Modal/examples/index.ts

@@ -1,4 +1 @@
-export { default as Example1 } from './01-basic-modal.js';
-export { metadata as metadata1 } from './01-basic-modal.js';
-export { default as Example2 } from './02-form-modal.js';
-export { metadata as metadata2 } from './02-form-modal.js';
+// Modal examples are served from @ui-lab-core/library (private registry)