ui-lab-registry 0.3.0 → 0.3.2

package/src/registry.ts

@@ -4,7 +4,7 @@ export const componentRegistry: ComponentRegistry = {
   anchor: {
     id: "anchor",
     name: "Anchor",
-    description: "Styled link with custom underline animation and popover preview on hover.",
+    description: "Styled link with animated underline and hover popover preview.",
     category: "information",
     source: {
   "packageName": "ui-lab-components",
@@ -53,7 +53,7 @@ export const componentRegistry: ComponentRegistry = {
   banner: {
     id: "banner",
     name: "Banner",
-    description: "Full-width banner for displaying important information, notifications, and alerts.",
+    description: "Full-width strip for surfacing alerts, notices, and messages.",
     category: "information",
     source: {
   "packageName": "ui-lab-components",
@@ -140,7 +140,7 @@ export const componentRegistry: ComponentRegistry = {
   code: {
     id: "code",
     name: "Code",
-    description: "Syntax-highlighted code display with horizontal scroll, line expand, and copy button.",
+    description: "Displays syntax-highlighted code with a built-in copy button.",
     category: "display",
     experimental: true,
     source: {
@@ -178,11 +178,6 @@ export const componentRegistry: ComponentRegistry = {
         "title": "Opacity Slider",
         "description": "Color picker with opacity/alpha slider enabled for transparent color selection.",
         "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n        <Color\n          value={color}\n          onChange={setColor}\n          showOpacity\n          format=\"rgb\"\n          defaultValue=\"rgba(106, 90, 205, 0.75)\"\n        />\n      </div>\n    </div>\n  );\n}"
-    },
-    {
-        "title": "Format Switching",
-        "description": "Color picker with format toggle between hex and RGB to copy colors in different formats.",
-        "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n  const [color, setColor] = useState('#3B82F6');\n  const [format, setFormat] = useState<'hex' | 'rgb'>('hex');\n\n  const handleFormatChange = () => {\n    setFormat(format === 'hex' ? 'rgb' : 'hex');\n  };\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <div>\n        <div className=\"flex items-center justify-between mb-3\">\n          <p className=\"text-sm text-foreground-300\">\n            Selected color: <code className=\"text-accent-500 font-mono\">{color}</code>\n          </p>\n          <button\n            onClick={handleFormatChange}\n            className=\"px-3 py-1 text-xs bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors\"\n          >\n            Format: {format.toUpperCase()}\n          </button>\n        </div>\n        <Color\n          value={color}\n          onChange={setColor}\n          format={format}\n          defaultValue=\"#3B82F6\"\n        />\n      </div>\n      <div className=\"mt-4 p-3 bg-foreground-400 rounded border border-foreground-400\">\n        <p className=\"text-xs text-foreground-300\">\n          <strong>Tip:</strong> Click the format button to switch between hex and RGB output formats.\n          This is useful when you need to copy colors in different formats for different contexts.\n        </p>\n      </div>\n    </div>\n  );\n}"
     }
 ],
   },
@@ -205,7 +200,7 @@ export const componentRegistry: ComponentRegistry = {
     {
         "title": "Basic Command Palette",
         "description": "A searchable command palette with keyboard shortcuts. Use Cmd+K (or Ctrl+K) to open.",
-        "code": "'use client';\n\nimport React from 'react';\nimport { Command, Button, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n\n  const commands = [\n    {\n      id: 'search',\n      label: 'Search',\n      description: 'Search documents',\n      shortcut: '⌘F',\n      action: () => console.log('Search'),\n    },\n    {\n      id: 'create',\n      label: 'Create new',\n      description: 'Create a new document',\n      shortcut: '⌘N',\n      action: () => console.log('Create'),\n    },\n    {\n      id: 'settings',\n      label: 'Settings',\n      description: 'Open application settings',\n      shortcut: '⌘,',\n      action: () => console.log('Settings'),\n    },\n  ];\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>\n        Open Palette (⌘K)\n      </Button>\n      <Command\n        open={open}\n        onOpenChange={setOpen}\n        items={commands}\n      >\n        <Command.SearchInput placeholder=\"Search commands...\" />\n        <Command.List>\n          <Command.Groups\n            renderCategory={(category) =>\n              category ? <Command.Category>{category}</Command.Category> : null\n            }\n            renderItem={(cmd) => (\n              <Command.Item\n                key={cmd.id}\n                value={cmd.id}\n                textValue={cmd.label}\n                action={cmd.action}\n                hint={cmd.shortcut}\n              >\n                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n                  <div>\n                    <div style={{ fontWeight: 500 }}>{cmd.label}</div>\n                    {cmd.description && (\n                      <div style={{ fontSize: '0.875em', opacity: 0.7 }}>\n                        {cmd.description}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </Command.Item>\n            )}\n          />\n        </Command.List>\n      </Command>\n    </>\n  );\n}"
+        "code": "'use client';\n\nimport React from 'react';\nimport { Command, Button, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  const [open, setOpen] = React.useState(false);\n\n  const commands = [\n    {\n      id: 'search',\n      label: 'Search',\n      description: 'Search documents',\n      shortcut: '⌘F',\n      action: () => console.log('Search'),\n    },\n    {\n      id: 'create',\n      label: 'Create new',\n      description: 'Create a new document',\n      shortcut: '⌘N',\n      action: () => console.log('Create'),\n    },\n    {\n      id: 'settings',\n      label: 'Settings',\n      description: 'Open application settings',\n      shortcut: '⌘,',\n      action: () => console.log('Settings'),\n    },\n  ];\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>\n        Open Palette (⌘K)\n      </Button>\n      <Command\n        open={open}\n        onOpenChange={setOpen}\n        items={commands}\n      >\n        <Command.Input placeholder=\"Search commands...\" />\n        <Command.List>\n          <Command.Groups\n            renderCategory={(category) =>\n              category ? <Command.Category>{category}</Command.Category> : null\n            }\n            renderItem={(cmd) => (\n              <Command.Item\n                key={cmd.id}\n                value={cmd.id}\n                textValue={cmd.label}\n                action={cmd.action}\n                hint={cmd.shortcut}\n              >\n                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n                  <div>\n                    <div style={{ fontWeight: 500 }}>{cmd.label}</div>\n                    {cmd.description && (\n                      <div style={{ fontSize: '0.875em', opacity: 0.7 }}>\n                        {cmd.description}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </Command.Item>\n            )}\n          />\n        </Command.List>\n      </Command>\n    </>\n  );\n}"
     }
 ],
   },
@@ -235,7 +230,7 @@ export const componentRegistry: ComponentRegistry = {
   date: {
     id: "date",
     name: "Date",
-    description: "Minimal date picker with keyboard navigation and full accessibility support.",
+    description: "Calendar date picker with keyboard navigation and accessibility.",
     category: "input",
     source: {
   "packageName": "ui-lab-components",
@@ -270,7 +265,7 @@ export const componentRegistry: ComponentRegistry = {
     {
         "title": "Pattern Variants",
         "description": "Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.",
-        "code": "import { Divider } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"space-y-6 w-full\">\n      <div className=\"space-y-2\">\n        <span className=\"text-xs text-foreground-400\">Solid</span>\n        <Divider variant=\"solid\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-xs text-foreground-400\">Dashed</span>\n        <Divider variant=\"dashed\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-xs text-foreground-400\">Dotted</span>\n        <Divider variant=\"dotted\" />\n      </div>\n    </div>\n  );\n}"
+        "code": "import { Divider } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"space-y-6 w-full\">\n      <div className=\"space-y-2\">\n        <span className=\"text-sm text-foreground-400\">Solid</span>\n        <Divider variant=\"solid\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-sm text-foreground-400\">Dashed</span>\n        <Divider variant=\"dashed\" />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"text-sm text-foreground-400\">Dotted</span>\n        <Divider variant=\"dotted\" />\n      </div>\n    </div>\n  );\n}"
     },
     {
         "title": "Vertical Orientation",
@@ -305,7 +300,7 @@ export const componentRegistry: ComponentRegistry = {
   flex: {
     id: "flex",
     name: "Flex",
-    description: "Flexible layout component with container query support for responsive designs.",
+    description: "Flexbox layout primitive with container query support for UIs.",
     category: "layout",
     source: {
   "packageName": "ui-lab-components",
@@ -359,7 +354,7 @@ export const componentRegistry: ComponentRegistry = {
   gallery: {
     id: "gallery",
     name: "Gallery",
-    description: "Responsive grid layout for displaying media content, images, videos, and product cards.",
+    description: "Responsive grid layout for displaying images and media items.",
     category: "layout",
     source: {
   "packageName": "ui-lab-components",
@@ -395,7 +390,7 @@ export const componentRegistry: ComponentRegistry = {
     {
         "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}"
+        "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}"
     }
 ],
   },
@@ -403,7 +398,7 @@ export const componentRegistry: ComponentRegistry = {
   group: {
     id: "group",
     name: "Group",
-    description: "Flexible container for grouping Button, Input, and Select components with unified styling.",
+    description: "Groups Button, Input, and Select with unified border styling.",
     category: "composition",
     experimental: true,
     source: {
@@ -445,7 +440,7 @@ export const componentRegistry: ComponentRegistry = {
     {
         "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          suffixIcon={<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          suffixIcon={<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}"
+        "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}"
     }
 ],
   },
@@ -475,7 +470,7 @@ export const componentRegistry: ComponentRegistry = {
   list: {
     id: "list",
     name: "List",
-    description: "Compound component for displaying item collections with selection and actions.",
+    description: "Displays item collections with built-in selection and actions.",
     category: "composition",
     experimental: true,
     source: {
@@ -581,7 +576,7 @@ export const componentRegistry: ComponentRegistry = {
   page: {
     id: "page",
     name: "Page",
-    description: "A lightweight page container that provides page-level context, constraints, and semantic structure.",
+    description: "Top-level page container with constraints and semantic structure.",
     category: "container",
     experimental: true,
     source: {
@@ -598,8 +593,8 @@ export const componentRegistry: ComponentRegistry = {
   panel: {
     id: "panel",
     name: "Panel",
-    description: "A flexible region coordinator that manages header, footer, and content areas with responsive stacking behavior.",
-    category: "composition",
+    description: "Region container managing header, content, and footer areas.",
+    category: "layout",
     experimental: true,
     source: {
   "packageName": "ui-lab-components",
@@ -626,11 +621,6 @@ export const componentRegistry: ComponentRegistry = {
     tags: ["navigation","path","hierarchy","parent-pages"],
     accessibility: {"hasAriaSupport":true,"notes":["Uses nav element with landmark role","Semantic ordered list structure","Current page marked with aria-current","Full keyboard navigation support","Screen reader friendly labels"]},
     examples: [
-    {
-        "title": "Basic Path",
-        "description": "A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.",
-        "code": "import { PathItem, Path } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Path>\n      <PathItem href=\"/\">Home</PathItem>\n      <PathItem href=\"/products\">Products</PathItem>\n      <PathItem href=\"/products/electronics\">Electronics</PathItem>\n      <PathItem>Laptop</PathItem>\n    </Path>\n  );\n}"
-    },
     {
         "title": "Basic Path",
         "description": "A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.",
@@ -755,7 +745,7 @@ export const componentRegistry: ComponentRegistry = {
     {
         "title": "Searchable Select",
         "description": "A filterable select component with search input. Type to filter through a large list of options.",
-        "code": "import React from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n  { value: 'us', label: 'United States' },\n  { value: 'ca', label: 'Canada' },\n  { value: 'mx', label: 'Mexico' },\n  { value: 'br', label: 'Brazil' },\n  { value: 'ar', label: 'Argentina' },\n  { value: 'uk', label: 'United Kingdom' },\n  { value: 'fr', label: 'France' },\n  { value: 'de', label: 'Germany' },\n  { value: 'it', label: 'Italy' },\n  { value: 'es', label: 'Spain' },\n  { value: 'pt', label: 'Portugal' },\n  { value: 'nl', label: 'Netherlands' },\n  { value: 'be', label: 'Belgium' },\n  { value: 'ch', label: 'Switzerland' },\n  { value: 'at', label: 'Austria' },\n  { value: 'se', label: 'Sweden' },\n  { value: 'no', label: 'Norway' },\n  { value: 'dk', label: 'Denmark' },\n  { value: 'fi', label: 'Finland' },\n  { value: 'pl', label: 'Poland' },\n  { value: 'jp', label: 'Japan' },\n  { value: 'cn', label: 'China' },\n  { value: 'kr', label: 'South Korea' },\n  { value: 'in', label: 'India' },\n  { value: 'au', label: 'Australia' },\n  { value: 'nz', label: 'New Zealand' },\n];\n\nexport default function Example() {\n  return (\n    <Select>\n      <Searchable.Trigger placeholder=\"Search countries...\" />\n      <Searchable.Content searchPlaceholder=\"Type to filter...\">\n        {countries.map((country) => (\n          <Select.Item key={country.value} value={country.value} textValue={country.label}>\n            {country.label}\n          </Select.Item>\n        ))}\n      </Searchable.Content>\n    </Select>\n  );\n}"
+        "code": "import React from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n  { value: 'us', label: 'United States' },\n  { value: 'ca', label: 'Canada' },\n  { value: 'mx', label: 'Mexico' },\n  { value: 'br', label: 'Brazil' },\n  { value: 'ar', label: 'Argentina' },\n  { value: 'uk', label: 'United Kingdom' },\n  { value: 'fr', label: 'France' },\n  { value: 'de', label: 'Germany' },\n  { value: 'it', label: 'Italy' },\n  { value: 'es', label: 'Spain' },\n  { value: 'pt', label: 'Portugal' },\n  { value: 'nl', label: 'Netherlands' },\n  { value: 'be', label: 'Belgium' },\n  { value: 'ch', label: 'Switzerland' },\n  { value: 'at', label: 'Austria' },\n  { value: 'se', label: 'Sweden' },\n  { value: 'no', label: 'Norway' },\n  { value: 'dk', label: 'Denmark' },\n  { value: 'fi', label: 'Finland' },\n  { value: 'pl', label: 'Poland' },\n  { value: 'jp', label: 'Japan' },\n  { value: 'cn', label: 'China' },\n  { value: 'kr', label: 'South Korea' },\n  { value: 'in', label: 'India' },\n  { value: 'au', label: 'Australia' },\n  { value: 'nz', label: 'New Zealand' },\n];\n\nexport default function Example() {\n  return (\n    <Select>\n      <Searchable.Input placeholder=\"Search countries...\" />\n      <Searchable.Content searchPlaceholder=\"Type to filter...\">\n        {countries.map((country) => (\n          <Select.Item key={country.value} value={country.value} textValue={country.label}>\n            {country.label}\n          </Select.Item>\n        ))}\n      </Searchable.Content>\n    </Select>\n  );\n}"
     }
 ],
   },
@@ -843,12 +833,12 @@ export const componentRegistry: ComponentRegistry = {
     {
         "title": "Basic Tabs",
         "description": "A simple tabbed interface with content switching. Use this to organize related content into separate views.",
-        "code": "import React from 'react';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Tabs defaultValue=\"overview\">\n      <TabsList aria-label=\"Content sections\">\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"details\">Details</TabsTrigger>\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\">\n        <p>Overview content goes here.</p>\n      </TabsContent>\n      <TabsContent value=\"details\">\n        <p>Details content goes here.</p>\n      </TabsContent>\n      <TabsContent value=\"settings\">\n        <p>Settings content goes here.</p>\n      </TabsContent>\n    </Tabs>\n  );\n}"
+        "code": "import React from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Tabs defaultValue=\"overview\">\n      <Tabs.List aria-label=\"Content sections\">\n        <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n        <Tabs.Trigger value=\"details\">Details</Tabs.Trigger>\n        <Tabs.Trigger value=\"settings\">Settings</Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"overview\">\n        <p>Overview content goes here.</p>\n      </Tabs.Content>\n      <Tabs.Content value=\"details\">\n        <p>Details content goes here.</p>\n      </Tabs.Content>\n      <Tabs.Content value=\"settings\">\n        <p>Settings content goes here.</p>\n      </Tabs.Content>\n    </Tabs>\n  );\n}"
     },
     {
         "title": "Vertical Tabs (Sidebar)",
         "description": "A vertical tab layout ideal for settings pages or sidebar navigation. Tabs are stacked vertically with content panels beside them.",
-        "code": "import React from 'react';\nimport { Tabs, TabsList, TabsTrigger, TabsContent, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n      <Card className=\"w-full max-w-2xl\">\n        <Tabs defaultValue=\"profile\" className=\"flex flex-row\">\n          {/* Vertical tab list - styled as sidebar */}\n          <TabsList\n            aria-label=\"Settings sections\"\n            className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n          >\n            <TabsTrigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n              Profile\n            </TabsTrigger>\n            <TabsTrigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n              Notifications\n            </TabsTrigger>\n            <TabsTrigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n              Security\n            </TabsTrigger>\n            <TabsTrigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n              Preferences\n            </TabsTrigger>\n          </TabsList>\n\n          {/* Content panels */}\n          <div className=\"flex-1 p-6\">\n            <TabsContent value=\"profile\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Manage your personal information and how others see you on the platform.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"notifications\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Control how and when you receive alerts and updates.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-32 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-background-700 rounded\" />\n                  <div className=\"h-4 w-40 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-28 bg-background-800 rounded\" />\n                </div>\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"security\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Protect your account with passwords, two-factor authentication, and more.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n                </div>\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n                </div>\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"preferences\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Customize your experience with theme, language, and display options.\n              </p>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </TabsContent>\n          </div>\n        </Tabs>\n      </Card>\n    </div>\n  );\n}"
+        "code": "import React from 'react';\nimport { Tabs, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n  return (\n    <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n      <Card className=\"w-full max-w-2xl\">\n        <Tabs defaultValue=\"profile\" className=\"flex flex-row\">\n          {/* Vertical tab list - styled as sidebar */}\n          <Tabs.List\n            aria-label=\"Settings sections\"\n            className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n          >\n            <Tabs.Trigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n              Notifications\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n              Security\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n              Preferences\n            </Tabs.Trigger>\n          </Tabs.List>\n\n          {/* Content panels */}\n          <div className=\"flex-1 p-6\">\n            <Tabs.Content value=\"profile\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Manage your personal information and how others see you on the platform.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"notifications\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Control how and when you receive alerts and updates.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-32 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-background-700 rounded\" />\n                  <div className=\"h-4 w-40 bg-background-800 rounded\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n                  <div className=\"h-4 w-28 bg-background-800 rounded\" />\n                </div>\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"security\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Protect your account with passwords, two-factor authentication, and more.\n              </p>\n              <div className=\"space-y-3\">\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n                </div>\n                <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n                  <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n                  <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n                </div>\n              </div>\n            </Tabs.Content>\n\n            <Tabs.Content value=\"preferences\" className=\"mt-0\">\n              <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n              <p className=\"text-foreground-400 text-sm mb-4\">\n                Customize your experience with theme, language, and display options.\n              </p>\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n                <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n              </div>\n            </Tabs.Content>\n          </div>\n        </Tabs>\n      </Card>\n    </div>\n  );\n}"
     }
 ],
   },

package/src/sections/CTA/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SectionMetadata } from '../../types';
+import type { SectionMetadata } from '../../types.js';
 import { createSectionSkeleton } from '../utils/create-section-skeleton.js';
 import variationsData from './variations.json' with { type: 'json' };
 

package/src/sections/CTA/variations/02-split/index.tsx

@@ -69,7 +69,7 @@ export function SplitCTA() {
                     {[1, 2, 3].map((i) => (
                       <div key={i} className="rounded bg-background-700 p-3 text-center">
                         <div className="text-lg font-bold text-accent-500">42K</div>
-                        <div className="text-xs text-foreground-400">Active Users</div>
+                        <div className="text-sm text-foreground-400">Active Users</div>
                       </div>
                     ))}
                   </div>

package/src/sections/CTA/variations.json

@@ -20,7 +20,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "'use client';\n\nimport React from 'react';\nimport { Button } from 'ui-lab-components';\nimport { CheckCircle2 } from 'lucide-react';\n\nexport function SplitCTA() {\n  const features = [\n    'Instant setup and configuration',\n    'Real-time analytics and reporting',\n    'Dedicated customer support',\n    'Enterprise-grade security',\n  ];\n\n  return (\n    <section className=\"w-full py-16 px-4 md:py-24\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"grid gap-8 md:gap-12 md:grid-cols-2 items-center\">\n          {/* Left content */}\n          <div className=\"order-2 md:order-1\">\n            <div className=\"mb-4 inline-block rounded-full bg-accent-500/10 px-4 py-1.5\">\n              <span className=\"text-sm font-medium text-accent-600\">Limited Time Offer</span>\n            </div>\n\n            <h2 className=\"mb-4 text-3xl font-bold text-foreground-900 md:text-4xl\">\n              Get 50% off for the first 3 months\n            </h2>\n            <p className=\"mb-8 text-lg text-foreground-400\">\n              Upgrade your workflow and unlock powerful features that will transform how your team collaborates.\n            </p>\n\n            <ul className=\"mb-8 space-y-3\">\n              {features.map((feature, index) => (\n                <li key={index} className=\"flex items-center gap-3\">\n                  <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 text-accent-500\" />\n                  <span className=\"text-foreground-700\">{feature}</span>\n                </li>\n              ))}\n            </ul>\n\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              <Button size=\"lg\" className=\"w-full sm:w-auto\">\n                Claim Offer\n              </Button>\n              <Button variant=\"outline\" size=\"lg\" className=\"w-full sm:w-auto\">\n                Learn More\n              </Button>\n            </div>\n\n            <p className=\"mt-6 text-sm text-foreground-400\">\n              No credit card needed. Cancel anytime.\n            </p>\n          </div>\n\n          {/* Right visual */}\n          <div className=\"order-1 md:order-2\">\n            <div className=\"relative\">\n              {/* Decorative background */}\n              <div className=\"absolute inset-0 rounded-2xl bg-gradient-to-br from-background-800 to-background-900\" />\n              <div className=\"absolute inset-0 rounded-2xl bg-gradient-to-tr from-accent-500/20 to-accent-600/20\" />\n\n              {/* Content */}\n              <div className=\"relative rounded-2xl border border-background-700 bg-background-900/50 p-8 backdrop-blur-sm\">\n                <div className=\"space-y-4\">\n                  <div className=\"h-3 w-24 rounded-full bg-background-700\" />\n                  <div className=\"h-3 w-32 rounded-full bg-background-700\" />\n                  <div className=\"mt-6 h-32 rounded-md bg-gradient-to-br from-accent-500/30 to-accent-600/30\" />\n                  <div className=\"grid grid-cols-3 gap-4 pt-4\">\n                    {[1, 2, 3].map((i) => (\n                      <div key={i} className=\"rounded bg-background-700 p-3 text-center\">\n                        <div className=\"text-lg font-bold text-accent-500\">42K</div>\n                        <div className=\"text-xs text-foreground-400\">Active Users</div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const metadata = {\n  name: 'Split CTA',\n  description: 'Two-column layout with promotional content on left and visual mockup on right',\n  demoPath: 'cta-split',\n};",
+        "code": "'use client';\n\nimport React from 'react';\nimport { Button } from 'ui-lab-components';\nimport { CheckCircle2 } from 'lucide-react';\n\nexport function SplitCTA() {\n  const features = [\n    'Instant setup and configuration',\n    'Real-time analytics and reporting',\n    'Dedicated customer support',\n    'Enterprise-grade security',\n  ];\n\n  return (\n    <section className=\"w-full py-16 px-4 md:py-24\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"grid gap-8 md:gap-12 md:grid-cols-2 items-center\">\n          {/* Left content */}\n          <div className=\"order-2 md:order-1\">\n            <div className=\"mb-4 inline-block rounded-full bg-accent-500/10 px-4 py-1.5\">\n              <span className=\"text-sm font-medium text-accent-600\">Limited Time Offer</span>\n            </div>\n\n            <h2 className=\"mb-4 text-3xl font-bold text-foreground-900 md:text-4xl\">\n              Get 50% off for the first 3 months\n            </h2>\n            <p className=\"mb-8 text-lg text-foreground-400\">\n              Upgrade your workflow and unlock powerful features that will transform how your team collaborates.\n            </p>\n\n            <ul className=\"mb-8 space-y-3\">\n              {features.map((feature, index) => (\n                <li key={index} className=\"flex items-center gap-3\">\n                  <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 text-accent-500\" />\n                  <span className=\"text-foreground-700\">{feature}</span>\n                </li>\n              ))}\n            </ul>\n\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              <Button size=\"lg\" className=\"w-full sm:w-auto\">\n                Claim Offer\n              </Button>\n              <Button variant=\"outline\" size=\"lg\" className=\"w-full sm:w-auto\">\n                Learn More\n              </Button>\n            </div>\n\n            <p className=\"mt-6 text-sm text-foreground-400\">\n              No credit card needed. Cancel anytime.\n            </p>\n          </div>\n\n          {/* Right visual */}\n          <div className=\"order-1 md:order-2\">\n            <div className=\"relative\">\n              {/* Decorative background */}\n              <div className=\"absolute inset-0 rounded-2xl bg-gradient-to-br from-background-800 to-background-900\" />\n              <div className=\"absolute inset-0 rounded-2xl bg-gradient-to-tr from-accent-500/20 to-accent-600/20\" />\n\n              {/* Content */}\n              <div className=\"relative rounded-2xl border border-background-700 bg-background-900/50 p-8 backdrop-blur-sm\">\n                <div className=\"space-y-4\">\n                  <div className=\"h-3 w-24 rounded-full bg-background-700\" />\n                  <div className=\"h-3 w-32 rounded-full bg-background-700\" />\n                  <div className=\"mt-6 h-32 rounded-md bg-gradient-to-br from-accent-500/30 to-accent-600/30\" />\n                  <div className=\"grid grid-cols-3 gap-4 pt-4\">\n                    {[1, 2, 3].map((i) => (\n                      <div key={i} className=\"rounded bg-background-700 p-3 text-center\">\n                        <div className=\"text-lg font-bold text-accent-500\">42K</div>\n                        <div className=\"text-sm text-foreground-400\">Active Users</div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const metadata = {\n  name: 'Split CTA',\n  description: 'Two-column layout with promotional content on left and visual mockup on right',\n  demoPath: 'cta-split',\n};",
         "isEntryPoint": true
       }
     ]

package/src/sections/Features/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SectionMetadata } from '../../types';
+import type { SectionMetadata } from '../../types.js';
 import { createSectionSkeleton } from '../utils/create-section-skeleton.js';
 import variationsData from './variations.json' with { type: 'json' };
 

package/src/sections/Hero/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SectionMetadata } from '../../types';
+import type { SectionMetadata } from '../../types.js';
 import { createSectionSkeleton } from '../utils/create-section-skeleton.js';
 import variationsData from './variations.json' with { type: 'json' };
 

package/src/sections/Pricing/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SectionMetadata } from '../../types';
+import type { SectionMetadata } from '../../types.js';
 import { createSectionSkeleton } from '../utils/create-section-skeleton.js';
 import variationsData from './variations.json' with { type: 'json' };
 

package/src/sections/Pricing/variations/01-cards/index.tsx

@@ -83,7 +83,7 @@ export function PricingCards() {
             >
               {plan.highlighted && (
                 <div className="absolute -top-4 left-1/2 -translate-x-1/2">
-                  <span className="rounded-full bg-accent-500 px-4 py-1 text-xs font-semibold text-white">
+                  <span className="rounded-full bg-accent-500 px-4 py-1 text-sm font-semibold text-white">
                     Most Popular
                   </span>
                 </div>

package/src/sections/Pricing/variations/02-comparison/index.tsx

@@ -72,7 +72,7 @@ export function PricingComparison() {
                     {plan.price ? (
                       <div className="text-lg font-bold text-accent-500">
                         ${plan.price}
-                        <span className="text-xs text-foreground-400">/mo</span>
+                        <span className="text-sm text-foreground-400">/mo</span>
                       </div>
                     ) : (
                       <div className="text-sm text-foreground-400">Custom</div>

package/src/sections/Pricing/variations.json

@@ -7,7 +7,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "'use client';\n\nimport React from 'react';\nimport { Button } from 'ui-lab-components';\nimport { Check } from 'lucide-react';\n\nconst pricingPlans = [\n  {\n    id: 1,\n    name: 'Starter',\n    description: 'Perfect for getting started',\n    price: 29,\n    period: 'month',\n    cta: 'Get Started',\n    highlighted: false,\n    features: [\n      'Up to 1,000 requests/month',\n      'Basic analytics',\n      'Community support',\n      'API access',\n    ],\n  },\n  {\n    id: 2,\n    name: 'Professional',\n    description: 'Best for growing teams',\n    price: 99,\n    period: 'month',\n    cta: 'Start Free Trial',\n    highlighted: true,\n    features: [\n      'Up to 100,000 requests/month',\n      'Advanced analytics',\n      'Priority email support',\n      'API access',\n      'Custom integrations',\n      'Team collaboration',\n    ],\n  },\n  {\n    id: 3,\n    name: 'Enterprise',\n    description: 'For large-scale operations',\n    price: null,\n    period: 'contact',\n    cta: 'Contact Sales',\n    highlighted: false,\n    features: [\n      'Unlimited requests',\n      'Real-time analytics',\n      '24/7 dedicated support',\n      'Custom API endpoints',\n      'Advanced security',\n      'SLA guarantee',\n    ],\n  },\n];\n\nexport function PricingCards() {\n  return (\n    <section className=\"w-full py-16 px-4 md:py-24\">\n      <div className=\"mx-auto max-w-6xl\">\n        {/* Header */}\n        <div className=\"mb-12 text-center md:mb-16\">\n          <h2 className=\"mb-4 text-3xl font-bold text-foreground-900 md:text-4xl\">\n            Simple, transparent pricing\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-foreground-400\">\n            Choose the perfect plan for your needs. Always flexible to scale.\n          </p>\n        </div>\n\n        {/* Pricing Cards */}\n        <div className=\"grid gap-8 md:grid-cols-3 items-start\">\n          {pricingPlans.map((plan) => (\n            <div\n              key={plan.id}\n              className={`relative rounded-2xl p-8 transition-all ${\n                plan.highlighted\n                  ? 'border border-accent-500 bg-gradient-to-br from-accent-500/10 to-accent-600/5 ring-1 ring-accent-500/20'\n                  : 'border border-background-700 bg-background-900/50 hover:border-background-600'\n              }`}\n            >\n              {plan.highlighted && (\n                <div className=\"absolute -top-4 left-1/2 -translate-x-1/2\">\n                  <span className=\"rounded-full bg-accent-500 px-4 py-1 text-xs font-semibold text-white\">\n                    Most Popular\n                  </span>\n                </div>\n              )}\n\n              <h3 className=\"mb-2 text-2xl font-bold text-foreground-900\">\n                {plan.name}\n              </h3>\n              <p className=\"mb-6 text-foreground-400\">{plan.description}</p>\n\n              {/* Pricing */}\n              <div className=\"mb-8\">\n                {plan.price ? (\n                  <>\n                    <div className=\"flex items-baseline gap-1\">\n                      <span className=\"text-4xl font-bold text-foreground-900\">\n                        ${plan.price}\n                      </span>\n                      <span className=\"text-foreground-400\">/{plan.period}</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"text-lg font-semibold text-foreground-900\">\n                    Custom pricing\n                  </div>\n                )}\n              </div>\n\n              {/* CTA */}\n              <Button\n                className=\"mb-8 w-full\"\n                variant={plan.highlighted ? 'default' : 'outline'}\n              >\n                {plan.cta}\n              </Button>\n\n              {/* Features */}\n              <div className=\"border-t border-background-700 pt-8\">\n                <ul className=\"space-y-4\">\n                  {plan.features.map((feature, index) => (\n                    <li key={index} className=\"flex items-start gap-3\">\n                      <Check className=\"h-5 w-5 flex-shrink-0 text-accent-500 mt-0.5\" />\n                      <span className=\"text-foreground-700\">{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Footer note */}\n        <div className=\"mt-12 text-center\">\n          <p className=\"text-foreground-400\">\n            All plans include a 14-day free trial. No credit card required.\n          </p>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const metadata = {\n  name: 'Pricing Cards',\n  description: '3-column pricing tier cards with features list and highlighted popular plan',\n  demoPath: 'pricing-cards',\n};",
+        "code": "'use client';\n\nimport React from 'react';\nimport { Button } from 'ui-lab-components';\nimport { Check } from 'lucide-react';\n\nconst pricingPlans = [\n  {\n    id: 1,\n    name: 'Starter',\n    description: 'Perfect for getting started',\n    price: 29,\n    period: 'month',\n    cta: 'Get Started',\n    highlighted: false,\n    features: [\n      'Up to 1,000 requests/month',\n      'Basic analytics',\n      'Community support',\n      'API access',\n    ],\n  },\n  {\n    id: 2,\n    name: 'Professional',\n    description: 'Best for growing teams',\n    price: 99,\n    period: 'month',\n    cta: 'Start Free Trial',\n    highlighted: true,\n    features: [\n      'Up to 100,000 requests/month',\n      'Advanced analytics',\n      'Priority email support',\n      'API access',\n      'Custom integrations',\n      'Team collaboration',\n    ],\n  },\n  {\n    id: 3,\n    name: 'Enterprise',\n    description: 'For large-scale operations',\n    price: null,\n    period: 'contact',\n    cta: 'Contact Sales',\n    highlighted: false,\n    features: [\n      'Unlimited requests',\n      'Real-time analytics',\n      '24/7 dedicated support',\n      'Custom API endpoints',\n      'Advanced security',\n      'SLA guarantee',\n    ],\n  },\n];\n\nexport function PricingCards() {\n  return (\n    <section className=\"w-full py-16 px-4 md:py-24\">\n      <div className=\"mx-auto max-w-6xl\">\n        {/* Header */}\n        <div className=\"mb-12 text-center md:mb-16\">\n          <h2 className=\"mb-4 text-3xl font-bold text-foreground-900 md:text-4xl\">\n            Simple, transparent pricing\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-foreground-400\">\n            Choose the perfect plan for your needs. Always flexible to scale.\n          </p>\n        </div>\n\n        {/* Pricing Cards */}\n        <div className=\"grid gap-8 md:grid-cols-3 items-start\">\n          {pricingPlans.map((plan) => (\n            <div\n              key={plan.id}\n              className={`relative rounded-2xl p-8 transition-all ${\n                plan.highlighted\n                  ? 'border border-accent-500 bg-gradient-to-br from-accent-500/10 to-accent-600/5 ring-1 ring-accent-500/20'\n                  : 'border border-background-700 bg-background-900/50 hover:border-background-600'\n              }`}\n            >\n              {plan.highlighted && (\n                <div className=\"absolute -top-4 left-1/2 -translate-x-1/2\">\n                  <span className=\"rounded-full bg-accent-500 px-4 py-1 text-sm font-semibold text-white\">\n                    Most Popular\n                  </span>\n                </div>\n              )}\n\n              <h3 className=\"mb-2 text-2xl font-bold text-foreground-900\">\n                {plan.name}\n              </h3>\n              <p className=\"mb-6 text-foreground-400\">{plan.description}</p>\n\n              {/* Pricing */}\n              <div className=\"mb-8\">\n                {plan.price ? (\n                  <>\n                    <div className=\"flex items-baseline gap-1\">\n                      <span className=\"text-4xl font-bold text-foreground-900\">\n                        ${plan.price}\n                      </span>\n                      <span className=\"text-foreground-400\">/{plan.period}</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"text-lg font-semibold text-foreground-900\">\n                    Custom pricing\n                  </div>\n                )}\n              </div>\n\n              {/* CTA */}\n              <Button\n                className=\"mb-8 w-full\"\n                variant={plan.highlighted ? 'default' : 'outline'}\n              >\n                {plan.cta}\n              </Button>\n\n              {/* Features */}\n              <div className=\"border-t border-background-700 pt-8\">\n                <ul className=\"space-y-4\">\n                  {plan.features.map((feature, index) => (\n                    <li key={index} className=\"flex items-start gap-3\">\n                      <Check className=\"h-5 w-5 flex-shrink-0 text-accent-500 mt-0.5\" />\n                      <span className=\"text-foreground-700\">{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Footer note */}\n        <div className=\"mt-12 text-center\">\n          <p className=\"text-foreground-400\">\n            All plans include a 14-day free trial. No credit card required.\n          </p>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const metadata = {\n  name: 'Pricing Cards',\n  description: '3-column pricing tier cards with features list and highlighted popular plan',\n  demoPath: 'pricing-cards',\n};",
         "isEntryPoint": true
       }
     ]
@@ -20,7 +20,7 @@
       {
         "filename": "index.tsx",
         "language": "typescript",
-        "code": "'use client';\n\nimport React from 'react';\nimport { Button } from 'ui-lab-components';\nimport { Check, X } from 'lucide-react';\n\nconst comparisonData = {\n  plans: [\n    { id: 1, name: 'Starter', price: 29 },\n    { id: 2, name: 'Professional', price: 99 },\n    { id: 3, name: 'Enterprise', price: null },\n  ],\n  features: [\n    {\n      category: 'Core Features',\n      items: [\n        { name: 'API Requests', starter: '1K/month', professional: '100K/month', enterprise: 'Unlimited' },\n        { name: 'Rate Limits', starter: '10 req/sec', professional: '100 req/sec', enterprise: 'Custom' },\n        { name: 'Data Retention', starter: '30 days', professional: '90 days', enterprise: 'Unlimited' },\n        { name: 'Webhook Support', starter: true, professional: true, enterprise: true },\n      ],\n    },\n    {\n      category: 'Analytics & Reporting',\n      items: [\n        { name: 'Basic Analytics', starter: true, professional: true, enterprise: true },\n        { name: 'Advanced Analytics', starter: false, professional: true, enterprise: true },\n        { name: 'Custom Reports', starter: false, professional: true, enterprise: true },\n        { name: 'Real-time Dashboards', starter: false, professional: false, enterprise: true },\n      ],\n    },\n    {\n      category: 'Support & Security',\n      items: [\n        { name: 'Email Support', starter: true, professional: true, enterprise: true },\n        { name: 'Priority Support', starter: false, professional: true, enterprise: true },\n        { name: '24/7 Phone Support', starter: false, professional: false, enterprise: true },\n        { name: 'SSO & SAML', starter: false, professional: false, enterprise: true },\n      ],\n    },\n  ],\n};\n\nexport function PricingComparison() {\n  return (\n    <section className=\"w-full py-16 px-4 md:py-24\">\n      <div className=\"mx-auto max-w-7xl\">\n        {/* Header */}\n        <div className=\"mb-12 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold text-foreground-900 md:text-4xl\">\n            Compare all plans\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-foreground-400\">\n            Find the perfect plan with detailed feature comparison\n          </p>\n        </div>\n\n        {/* Comparison Table */}\n        <div className=\"overflow-x-auto rounded-2xl border border-background-700 bg-background-900/50\">\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"border-b border-background-700\">\n                <th className=\"px-6 py-4 text-left text-sm font-semibold text-foreground-900\">\n                  Features\n                </th>\n                {comparisonData.plans.map((plan) => (\n                  <th\n                    key={plan.id}\n                    className=\"px-6 py-4 text-center text-sm font-semibold text-foreground-900\"\n                  >\n                    <div className=\"mb-2\">{plan.name}</div>\n                    {plan.price ? (\n                      <div className=\"text-lg font-bold text-accent-500\">\n                        ${plan.price}\n                        <span className=\"text-xs text-foreground-400\">/mo</span>\n                      </div>\n                    ) : (\n                      <div className=\"text-sm text-foreground-400\">Custom</div>\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {comparisonData.features.map((category, categoryIndex) => (\n                <React.Fragment key={categoryIndex}>\n                  <tr className=\"border-t border-background-700 bg-background-900/30\">\n                    <td\n                      colSpan={4}\n                      className=\"px-6 py-4 text-sm font-semibold text-foreground-700\"\n                    >\n                      {category.category}\n                    </td>\n                  </tr>\n                  {category.items.map((item, itemIndex) => (\n                    <tr key={itemIndex} className=\"border-t border-background-700/50\">\n                      <td className=\"px-6 py-4 text-sm text-foreground-700\">\n                        {item.name}\n                      </td>\n                      {comparisonData.plans.map((plan) => {\n                        const value =\n                          item[plan.name.toLowerCase() as keyof typeof item];\n                        return (\n                          <td key={plan.id} className=\"px-6 py-4 text-center\">\n                            {typeof value === 'boolean' ? (\n                              value ? (\n                                <Check className=\"mx-auto h-5 w-5 text-accent-500\" />\n                              ) : (\n                                <X className=\"mx-auto h-5 w-5 text-foreground-400\" />\n                              )\n                            ) : (\n                              <span className=\"text-sm text-foreground-700\">\n                                {value}\n                              </span>\n                            )}\n                          </td>\n                        );\n                      })}\n                    </tr>\n                  ))}\n                </React.Fragment>\n              ))}\n            </tbody>\n          </table>\n        </div>\n\n        {/* CTA Section */}\n        <div className=\"mt-12 rounded-2xl border border-background-700 bg-background-900/50 p-8 text-center\">\n          <h3 className=\"mb-4 text-2xl font-bold text-foreground-900\">\n            Ready to get started?\n          </h3>\n          <p className=\"mb-6 text-foreground-400\">\n            Choose your plan and start building today. All plans include a 14-day free trial.\n          </p>\n          <div className=\"flex flex-col gap-3 sm:flex-row sm:justify-center\">\n            <Button variant=\"outline\">View Starter</Button>\n            <Button>View Professional</Button>\n            <Button variant=\"outline\">Contact Sales</Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const metadata = {\n  name: 'Pricing Comparison',\n  description: 'Feature comparison table showing all plans with detailed breakdown',\n  demoPath: 'pricing-comparison',\n};",
+        "code": "'use client';\n\nimport React from 'react';\nimport { Button } from 'ui-lab-components';\nimport { Check, X } from 'lucide-react';\n\nconst comparisonData = {\n  plans: [\n    { id: 1, name: 'Starter', price: 29 },\n    { id: 2, name: 'Professional', price: 99 },\n    { id: 3, name: 'Enterprise', price: null },\n  ],\n  features: [\n    {\n      category: 'Core Features',\n      items: [\n        { name: 'API Requests', starter: '1K/month', professional: '100K/month', enterprise: 'Unlimited' },\n        { name: 'Rate Limits', starter: '10 req/sec', professional: '100 req/sec', enterprise: 'Custom' },\n        { name: 'Data Retention', starter: '30 days', professional: '90 days', enterprise: 'Unlimited' },\n        { name: 'Webhook Support', starter: true, professional: true, enterprise: true },\n      ],\n    },\n    {\n      category: 'Analytics & Reporting',\n      items: [\n        { name: 'Basic Analytics', starter: true, professional: true, enterprise: true },\n        { name: 'Advanced Analytics', starter: false, professional: true, enterprise: true },\n        { name: 'Custom Reports', starter: false, professional: true, enterprise: true },\n        { name: 'Real-time Dashboards', starter: false, professional: false, enterprise: true },\n      ],\n    },\n    {\n      category: 'Support & Security',\n      items: [\n        { name: 'Email Support', starter: true, professional: true, enterprise: true },\n        { name: 'Priority Support', starter: false, professional: true, enterprise: true },\n        { name: '24/7 Phone Support', starter: false, professional: false, enterprise: true },\n        { name: 'SSO & SAML', starter: false, professional: false, enterprise: true },\n      ],\n    },\n  ],\n};\n\nexport function PricingComparison() {\n  return (\n    <section className=\"w-full py-16 px-4 md:py-24\">\n      <div className=\"mx-auto max-w-7xl\">\n        {/* Header */}\n        <div className=\"mb-12 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold text-foreground-900 md:text-4xl\">\n            Compare all plans\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-foreground-400\">\n            Find the perfect plan with detailed feature comparison\n          </p>\n        </div>\n\n        {/* Comparison Table */}\n        <div className=\"overflow-x-auto rounded-2xl border border-background-700 bg-background-900/50\">\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"border-b border-background-700\">\n                <th className=\"px-6 py-4 text-left text-sm font-semibold text-foreground-900\">\n                  Features\n                </th>\n                {comparisonData.plans.map((plan) => (\n                  <th\n                    key={plan.id}\n                    className=\"px-6 py-4 text-center text-sm font-semibold text-foreground-900\"\n                  >\n                    <div className=\"mb-2\">{plan.name}</div>\n                    {plan.price ? (\n                      <div className=\"text-lg font-bold text-accent-500\">\n                        ${plan.price}\n                        <span className=\"text-sm text-foreground-400\">/mo</span>\n                      </div>\n                    ) : (\n                      <div className=\"text-sm text-foreground-400\">Custom</div>\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {comparisonData.features.map((category, categoryIndex) => (\n                <React.Fragment key={categoryIndex}>\n                  <tr className=\"border-t border-background-700 bg-background-900/30\">\n                    <td\n                      colSpan={4}\n                      className=\"px-6 py-4 text-sm font-semibold text-foreground-700\"\n                    >\n                      {category.category}\n                    </td>\n                  </tr>\n                  {category.items.map((item, itemIndex) => (\n                    <tr key={itemIndex} className=\"border-t border-background-700/50\">\n                      <td className=\"px-6 py-4 text-sm text-foreground-700\">\n                        {item.name}\n                      </td>\n                      {comparisonData.plans.map((plan) => {\n                        const value =\n                          item[plan.name.toLowerCase() as keyof typeof item];\n                        return (\n                          <td key={plan.id} className=\"px-6 py-4 text-center\">\n                            {typeof value === 'boolean' ? (\n                              value ? (\n                                <Check className=\"mx-auto h-5 w-5 text-accent-500\" />\n                              ) : (\n                                <X className=\"mx-auto h-5 w-5 text-foreground-400\" />\n                              )\n                            ) : (\n                              <span className=\"text-sm text-foreground-700\">\n                                {value}\n                              </span>\n                            )}\n                          </td>\n                        );\n                      })}\n                    </tr>\n                  ))}\n                </React.Fragment>\n              ))}\n            </tbody>\n          </table>\n        </div>\n\n        {/* CTA Section */}\n        <div className=\"mt-12 rounded-2xl border border-background-700 bg-background-900/50 p-8 text-center\">\n          <h3 className=\"mb-4 text-2xl font-bold text-foreground-900\">\n            Ready to get started?\n          </h3>\n          <p className=\"mb-6 text-foreground-400\">\n            Choose your plan and start building today. All plans include a 14-day free trial.\n          </p>\n          <div className=\"flex flex-col gap-3 sm:flex-row sm:justify-center\">\n            <Button variant=\"outline\">View Starter</Button>\n            <Button>View Professional</Button>\n            <Button variant=\"outline\">Contact Sales</Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport const metadata = {\n  name: 'Pricing Comparison',\n  description: 'Feature comparison table showing all plans with detailed breakdown',\n  demoPath: 'pricing-comparison',\n};",
         "isEntryPoint": true
       }
     ]

package/src/sections/Testimonials/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SectionMetadata } from '../../types';
+import type { SectionMetadata } from '../../types.js';
 import { createSectionSkeleton } from '../utils/create-section-skeleton.js';
 import variationsData from './variations.json' with { type: 'json' };
 

package/src/sections/categories.ts

@@ -84,14 +84,14 @@ export function groupSectionsByCategory(sections: Array<{ id: string; category:
   return grouped;
 }
 
-export function getSectionsInCategory(
+function getSectionsInCategory(
   sections: Array<{ id: string; category: SectionCategoryId }>,
   categoryId: SectionCategoryId
 ) {
   return sections.filter(s => s.category === categoryId);
 }
 
-export function getCategoriesWithSections(
+function getCategoriesWithSections(
   sections: Array<{ id: string; category: SectionCategoryId }>
 ): SectionCategoryDefinition[] {
   const grouped = groupSectionsByCategory(sections);

package/src/starters/Astro/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SiAstro } from 'react-icons/si';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'astro-static',

package/src/starters/Blog/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FaPen } from 'react-icons/fa6';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'blog-platform',

package/src/starters/CRM/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FaBriefcase } from 'react-icons/fa6';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'crm-starter',

package/src/starters/Documentation/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FaBook } from 'react-icons/fa6';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'docs-site',

package/src/starters/NextJS/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'nextjs-basic',
@@ -118,10 +118,10 @@ export function getPreview(): React.ReactNode {
         </svg>
         <div>
           <div className="text-sm font-semibold text-foreground-50">Next.js</div>
-          <div className="text-xs text-foreground-400">App Router + TypeScript</div>
+          <div className="text-sm text-foreground-400">App Router + TypeScript</div>
         </div>
       </div>
-      <div className="flex-1 border border-background-700 rounded bg-background-900/50 p-2 text-xs font-mono">
+      <div className="flex-1 border border-background-700 rounded bg-background-900/50 p-2 text-sm font-mono">
         <div className="text-foreground-300 mb-1">📁 Project Structure</div>
         <div className="pl-2 text-foreground-400 space-y-0.5">
           <div>📄 package.json</div>

package/src/starters/Productivity/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FaCheck } from 'react-icons/fa6';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'productivity-app',

package/src/starters/Tauri/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SiTauri } from 'react-icons/si';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'tauri-desktop',

package/src/starters/Vite/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SiVite } from 'react-icons/si';
-import type { StarterMetadata } from '../../types';
+import type { StarterMetadata } from '../../types.js';
 
 const baseMetadata = {
   id: 'vite-react',

package/src/types.ts

@@ -213,7 +213,7 @@ export interface CategoryDefinition {
   iconName: string;
 }
 
-export interface StarterPreset {
+interface StarterPreset {
   templateName: 'next' | 'vite' | 'tauri';
   components: string[];
   description: string;
@@ -272,7 +272,6 @@ export interface SiteComponentExample {
   preview: React.ReactNode;
   controls?: ControlDef[];
   renderPreview?: (props: Record<string, any>) => React.ReactNode;
-  previewHeight?: string;
   previewLayout?: 'center' | 'start';
 }
 

package/src/utils/get-category-icon.tsx

@@ -1,6 +1,6 @@
 import { categoryIconConfig } from '../icons-config.js';
 import { categories } from '../categories.js';
-import type { ComponentCategory } from '../types';
+import type { ComponentCategory } from '../types.js';
 
 // Generate icon map from config
 const iconMap = Object.fromEntries(

package/src/utils/load-component-examples.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SiteComponentExample } from '@/types';
 
-export interface ExampleData {
+interface ExampleData {
   id: string;
   Component: React.ComponentType;
   metadata: {
@@ -10,7 +10,7 @@ export interface ExampleData {
   };
 }
 
-export interface ExamplesJsonEntry {
+interface ExamplesJsonEntry {
   title: string;
   description: string;
   code: string;

package/dist/components/Button/examples/02-joined-toggle-buttons.d.ts

@@ -1,6 +0,0 @@
-export declare const metadata: {
-    title: string;
-    description: string;
-};
-export default function Example(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=02-joined-toggle-buttons.d.ts.map

package/dist/components/Button/examples/02-joined-toggle-buttons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"02-joined-toggle-buttons.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/examples/02-joined-toggle-buttons.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;;CAGpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,4CAgC9B"}

package/dist/components/Button/examples/02-joined-toggle-buttons.js

@@ -1,15 +0,0 @@
-"use client";
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Group } from 'ui-lab-components';
-import { LayoutList, LayoutGrid, Table } from 'lucide-react';
-export const metadata = {
-    title: 'Joined Toggle Buttons',
-    description: 'Multiple buttons grouped together for view/mode selection. Demonstrates Group component with toggle state.'
-};
-export default function Example() {
-    const [viewMode, setViewMode] = useState('list');
-    return (_jsx("div", { className: "p-4 space-y-4", children: _jsx("div", { className: "space-y-2", children: _jsxs(Group, { orientation: "horizontal", spacing: "none", children: [_jsxs(Group.Button, { variant: viewMode === 'list' ? 'default' : 'outline', onClick: () => setViewMode('list'), children: [_jsx(LayoutList, { size: 17, className: "mr-2 text-foreground-400" }), "List"] }), _jsxs(Group.Button, { variant: viewMode === 'grid' ? 'default' : 'outline', onClick: () => setViewMode('grid'), children: [_jsx(LayoutGrid, { size: 17, className: "mr-2 text-foreground-400" }), "Grid"] }), _jsxs(Group.Button, { variant: viewMode === 'table' ? 'default' : 'outline', onClick: () => setViewMode('table'), children: [_jsx(Table, { size: 17, className: "mr-2 text-foreground-400" }), "Table"] })] }) }) }));
-}
-//# sourceMappingURL=02-joined-toggle-buttons.js.map

package/dist/components/Button/examples/02-joined-toggle-buttons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"02-joined-toggle-buttons.js","sourceRoot":"","sources":["../../../../src/components/Button/examples/02-joined-toggle-buttons.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EAAE,4GAA4G;CAC1H,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEhD,OAAO,CACL,cAAK,SAAS,EAAC,eAAe,YAC5B,cAAK,SAAS,EAAC,WAAW,YACxB,MAAC,KAAK,IAAC,WAAW,EAAC,YAAY,EAAC,OAAO,EAAC,MAAM,aAC5C,MAAC,KAAK,CAAC,MAAM,IACX,OAAO,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,aAElC,KAAC,UAAU,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,YAEhD,EACf,MAAC,KAAK,CAAC,MAAM,IACX,OAAO,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,aAElC,KAAC,UAAU,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,YAEhD,EACf,MAAC,KAAK,CAAC,MAAM,IACX,OAAO,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACrD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,aAEnC,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,aAE3C,IACT,GACJ,GACF,CACP,CAAA;AACH,CAAC"}