tera-system-ui 0.1.75 → 0.2.1

package/dist/stories/ComponentOverview.stories.svelte

@@ -3,251 +3,255 @@
   const { Story } = defineMeta({
     title: 'TeraUI / Overview',
     tags: ['!autodocs'],
+    parameters: { layout: 'fullscreen' },
   });
 </script>
 
 <script>
-  // Core components
-  import { Button }   from '../components/button/index.js';
-  import { Input }    from '../components/input/index.js';
-  import { Select }   from '../components/select/index.js';
-  import { TextArea } from '../components/text-area/index.js';
-  import { Checkbox } from '../components/checkbox/index.js';
-  import { Switch }   from '../components/switch/index.js';
-  import { Slider }   from '../components/slider/index.js';
-  import { Label }    from '../components/label/index.js';
-  import { Combobox } from '../components/combobox/index.js';
-
-  // Navigation
-  import { Tabs, TabsList, TabsItem, TabsContent } from '../components/tabs/index.js';
-  import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../components/accordion/index.js';
-
-  // Overlay
-  import { Dialog }       from '../components/dialog/index.js';
-  import { Drawer }       from '../components/drawer/index.js';
-  import { Popover }      from '../components/popover/index.js';
-  import { DropdownMenu, DropdownMenuItem, DropdownMenuSeparator } from '../components/dropdown-menu/index.js';
-  import { ToastContainer, toast } from '../components/toast/index.js';
-  import { Tooltip }      from '../components/tooltip/index.js';
-
-  // Feedback & display
-  import { Card }     from '../components/card/index.js';
-  import { Badge }    from '../components/badge/index.js';
-  import { Alert }    from '../components/alert/index.js';
-  import { Spinner }  from '../components/spinner/index.js';
-  import { Skeleton } from '../components/skeleton/index.js';
-  import { Table }    from '../components/table/index.js';
-
-  // Identity
-  import { Avatar }    from '../components/avatar/index.js';
-  import { BrandLogo } from '../components/brand-logo/index.js';
-  import { StarRating} from '../components/star-rating/index.js';
-  import { LightDarkToggle } from '../components/light-dark-toggle/index.js';
-
-  // AI components
-  import { ChatBubble, ThinkingLoader, SuggestionChips, StreamText, PromptInput } from '../components/ai/index.js';
-
-  // Marketing components
-  import { FeatureCard, StatBlock, PricingCard, TestimonialCard } from '../components/marketing/index.js';
-
-  // State
-  let tabValue   = $state('t1');
+  // Every exported component, imported from the package root barrel.
+  import {
+    // Form
+    Button, Input, TextArea, Select, Combobox, Checkbox, Switch, Slider, Label,
+    DateRangePicker,
+    // Navigation / disclosure
+    Tabs, TabsList, TabsItem, TabsContent,
+    Accordion, AccordionItem, AccordionTrigger, AccordionContent,
+    // Overlay
+    Dialog, Drawer, BottomSheet, Popover, PopoverResponsive,
+    DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator,
+    Tooltip, ToastContainer, toast,
+    Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem,
+    // Feedback & display
+    Card, Badge, Alert, Spinner, Skeleton, Table,
+    // Identity
+    Avatar, StarRating,
+    // Fonts
+    TeraFontSansSerif, TeraFontMono,
+  } from '..';
+
+  // ── State ─────────────────────────────────────────────────────────────────
+  let lineTab    = $state('t1');
+  let iosTab     = $state('outbound');
   let dialogOpen = $state(false);
-  let drawerOpen = $state(false);
-  let promptValue = $state('');
-  let streamKey   = $state(0);
+  let drawerR    = $state(false);
+  let drawerL    = $state(false);
+  let prOpen     = $state(false);
+  let sheetOpen  = $state(false);
+
+  // Form state
+  let inputVal    = $state('');
+  let textVal     = $state('');
+  let checkA      = $state(false);
+  let checkB      = $state(true);
+  let switchA     = $state(true);
+  let sliderH     = $state(40);
+  let sliderV     = $state(60);
+  let selectVal   = $state();
+
+  // Command (inside a popover)
+  let cmdOpen     = $state(false);
+  let cmdValue    = $state('');
+  let cmdSelected = $state('');
+  const units = [
+    { code: 'm', name: 'Meter' }, { code: 'km', name: 'Kilometer' },
+    { code: 'cm', name: 'Centimeter' }, { code: 'in', name: 'Inch' },
+    { code: 'ft', name: 'Foot' }, { code: 'kg', name: 'Kilogram' },
+    { code: 'lb', name: 'Pound' }, { code: 'L', name: 'Liter' },
+  ];
+  function pickUnit(u) { cmdSelected = `${u.code} — ${u.name}`; cmdOpen = false; cmdValue = ''; }
 </script>
 
+<TeraFontSansSerif/>
+<TeraFontMono/>
+
 <Story name="All Components">
   <ToastContainer/>
   <div class="overview-wrap">
 
-    <!-- ── BUTTONS ── -->
+    <header class="ov-head">
+      <h1>TeraUI — Component Overview</h1>
+      <p>Every exported component and its key variants, for quick visual regression testing.</p>
+    </header>
+
+    <!-- ════════ FORM ════════ -->
+    <h2 class="group">Form</h2>
+
     <section>
-      <h2 class="section-label">Buttons</h2>
+      <h3 class="section-label">Button — variants</h3>
       <div class="row">
         <Button variant="primary">Primary</Button>
         <Button variant="default">Default</Button>
         <Button variant="dashed">Dashed</Button>
         <Button variant="text">Text</Button>
         <Button variant="link">Link</Button>
+      </div>
+      <h3 class="section-label">Button — states & sizes</h3>
+      <div class="row">
         <Button variant="primary" loading>Loading</Button>
         <Button variant="primary" disabled>Disabled</Button>
         <Button variant="primary" danger>Danger</Button>
+        <Button variant="default" danger>Danger ghost</Button>
         <Button variant="primary" size="sm">Small</Button>
+        <Button variant="primary">Default</Button>
         <Button variant="primary" size="lg">Large</Button>
       </div>
     </section>
 
-    <!-- ── FORM INPUTS ── -->
     <section>
-      <h2 class="section-label">Form — Input & Select</h2>
+      <h3 class="section-label">Input</h3>
       <div class="row">
-        <Input placeholder="Default input" style="width:180px"/>
-        <Input placeholder="Filled variant" variant="filled" style="width:180px"/>
+        <Input placeholder="Default" style="width:180px" bind:value={inputVal}/>
+        <Input placeholder="Filled" variant="filled" style="width:180px"/>
         <Input placeholder="Error state" status="error" style="width:180px"/>
         <Input placeholder="Disabled" disabled style="width:180px"/>
+        <Input placeholder="Clearable — type…" clearable value="clear me" style="width:200px"/>
+      </div>
+    </section>
+
+    <section>
+      <h3 class="section-label">TextArea</h3>
+      <div class="row" style="align-items:flex-start">
+        <TextArea placeholder="Default" style="width:220px" bind:value={textVal}/>
+        <TextArea placeholder="Filled" variant="filled" style="width:220px"/>
+        <TextArea placeholder="Error" status="error" style="width:220px"/>
+      </div>
+    </section>
+
+    <section>
+      <h3 class="section-label">Select</h3>
+      <div class="row">
         <Select
+          bind:value={selectVal}
           options={[{value:'a',label:'Option A'},{value:'b',label:'Option B'},{value:'c',label:'Option C'}]}
-          placeholder="Flat select"
-          style="width:180px"
-        />
+          placeholder="Flat select" style="width:180px"/>
         <Select
           groups={[
             {label:'Frontend', options:[{value:'ts',label:'TypeScript'},{value:'svelte',label:'Svelte'}]},
             {label:'Backend',  options:[{value:'go',label:'Go'},{value:'py',label:'Python'}]},
           ]}
-          placeholder="Grouped select"
-          style="width:180px"
-        />
+          placeholder="Grouped select" style="width:180px"/>
+        <Select options={[{value:'a',label:'Disabled'}]} placeholder="Disabled" disabled style="width:160px"/>
       </div>
     </section>
 
-    <!-- ── COMBOBOX ── -->
     <section>
-      <h2 class="section-label">Form — Combobox</h2>
+      <h3 class="section-label">Combobox</h3>
       <div class="row">
         <Combobox
           type="single"
           items={[
             {value:'ts',label:'TypeScript'},{value:'js',label:'JavaScript'},
-            {value:'py',label:'Python'},{value:'go',label:'Go'},
-            {value:'rust',label:'Rust'},{value:'java',label:'Java'},
+            {value:'py',label:'Python'},{value:'go',label:'Go'},{value:'rust',label:'Rust'},
           ]}
-          placeholder="Search language…"
-          style="width:220px"
-        />
+          placeholder="Search language…" style="width:220px"/>
         <Combobox
           type="multiple"
           items={[
             {value:'react',label:'React'},{value:'svelte',label:'Svelte'},
             {value:'vue',label:'Vue'},{value:'angular',label:'Angular'},
           ]}
-          placeholder="Pick frameworks…"
-          style="width:240px"
-        />
-      </div>
-    </section>
-
-    <section>
-      <h2 class="section-label">Form — TextArea</h2>
-      <div class="row">
-        <TextArea placeholder="Default textarea" style="width:220px"/>
-        <TextArea placeholder="Filled variant" variant="filled" style="width:220px"/>
-        <TextArea placeholder="Error state" status="error" style="width:220px"/>
+          placeholder="Pick frameworks…" style="width:240px"/>
       </div>
     </section>
 
     <section>
-      <h2 class="section-label">Form — Controls</h2>
+      <h3 class="section-label">Checkbox · Switch · Slider · Label</h3>
       <div class="row" style="align-items:center">
         <Label>Label component</Label>
-        <Checkbox>Accept terms</Checkbox>
-        <Checkbox checked>Pre-checked</Checkbox>
+        <Checkbox bind:checked={checkA}>Accept terms</Checkbox>
+        <Checkbox bind:checked={checkB}>Pre-checked</Checkbox>
+        <Checkbox indeterminate>Indeterminate</Checkbox>
+        <Checkbox checked disabled>Disabled</Checkbox>
+        <Switch bind:checked={switchA}/>
         <Switch/>
-        <Switch checked/>
-        <div style="width:200px"><Slider min={0} max={100} step={1} value={40}/></div>
+        <Switch checked disabled/>
+        <div style="width:200px"><Slider min={0} max={100} step={1} bind:value={sliderH}/></div>
         <div style="height:80px; display:flex; align-items:center;">
-          <Slider min={0} max={100} step={1} value={60} orientation="vertical" class="h-full" />
+          <Slider min={0} max={100} step={1} bind:value={sliderV} orientation="vertical" class="h-full"/>
         </div>
       </div>
     </section>
 
-    <!-- ── CARDS ── -->
     <section>
-      <h2 class="section-label">Cards</h2>
-      <div class="row" style="align-items:stretch">
-        <Card style="width:160px"><p class="text-sm font-semibold">Default</p><p class="text-xs text-text-tertiary mt-1">shadow-sm</p></Card>
-        <Card variant="elevated" style="width:160px"><p class="text-sm font-semibold">Elevated</p><p class="text-xs text-text-tertiary mt-1">shadow-md</p></Card>
-        <Card variant="bordered" style="width:160px"><p class="text-sm font-semibold">Bordered</p><p class="text-xs text-text-tertiary mt-1">border only</p></Card>
-        <Card variant="ghost"    style="width:160px"><p class="text-sm font-semibold">Ghost</p><p class="text-xs text-text-tertiary mt-1">no bg</p></Card>
-        <Card clickable style="width:160px"><p class="text-sm font-semibold">Clickable ↑</p><p class="text-xs text-text-tertiary mt-1">hover to lift</p></Card>
-        <Card loading   style="width:160px"><p class="text-sm">Loading state</p></Card>
+      <h3 class="section-label">DateRangePicker</h3>
+      <div class="row" style="align-items:flex-start">
+        <DateRangePicker/>
+        <DateRangePicker enableTime/>
+        <DateRangePicker dateRange={[new Date(2025, 3, 1), new Date(2025, 3, 15)]}/>
+        <DateRangePicker disabled dateRange={[new Date(2025, 3, 1), new Date(2025, 3, 15)]}/>
       </div>
     </section>
 
-    <!-- ── BADGES ── -->
-    <section>
-      <h2 class="section-label">Badges</h2>
-      <div class="row">
-        <Badge>Default</Badge>
-        <Badge variant="primary">Primary</Badge>
-        <Badge variant="success">Success</Badge>
-        <Badge variant="error">Error</Badge>
-        <Badge variant="warning">Warning</Badge>
-        <Badge variant="info">Info</Badge>
-        <Badge variant="primary" dot>With dot</Badge>
-        <Badge variant="success" closable>Closable</Badge>
-        <Badge variant="primary" size="sm">Small</Badge>
-      </div>
-    </section>
+    <!-- ════════ NAVIGATION & DISCLOSURE ════════ -->
+    <h2 class="group">Navigation &amp; disclosure</h2>
 
-    <!-- ── ALERTS ── -->
     <section>
-      <h2 class="section-label">Alerts</h2>
-      <div class="col" style="max-width:520px">
-        <Alert variant="info"    title="Info">Informational message.</Alert>
-        <Alert variant="success" title="Done">Operation completed successfully.</Alert>
-        <Alert variant="warning" title="Warning" closable>Check this carefully before proceeding.</Alert>
-        <Alert variant="error"   title="Error">Something went wrong. Please try again.</Alert>
-      </div>
-    </section>
+      <h3 class="section-label">Tabs — line (controlled)</h3>
+      <Tabs bind:value={lineTab} style="max-width:480px">
+        <TabsList>
+          <TabsItem value="t1">Overview</TabsItem>
+          <TabsItem value="t2">Details</TabsItem>
+          <TabsItem value="t3">Settings</TabsItem>
+        </TabsList>
+        <TabsContent value="t1"><p class="pad">Overview content.</p></TabsContent>
+        <TabsContent value="t2"><p class="pad">Details panel content.</p></TabsContent>
+        <TabsContent value="t3"><p class="pad">Settings form content.</p></TabsContent>
+      </Tabs>
 
-    <!-- ── LOADING STATES ── -->
-    <section>
-      <h2 class="section-label">Loading States — Spinner</h2>
-      <div class="row">
-        <Spinner size="xs"/>
-        <Spinner size="sm"/>
-        <Spinner size="md"/>
-        <Spinner size="lg"/>
-        <div class="bg-primary-600 p-2 rounded"><Spinner color="white" size="md"/></div>
-      </div>
-    </section>
+      <h3 class="section-label">Tabs — iOS segmented (controlled)</h3>
+      <Tabs bind:value={iosTab} variant="ios" style="max-width:360px">
+        <TabsList>
+          <TabsItem value="outbound">Outbound</TabsItem>
+          <TabsItem value="inbound">Inbound</TabsItem>
+        </TabsList>
+        <TabsContent value="outbound"><p class="pad">Outbound flight details.</p></TabsContent>
+        <TabsContent value="inbound"><p class="pad">Inbound flight details.</p></TabsContent>
+      </Tabs>
 
-    <section>
-      <h2 class="section-label">Loading States — Skeleton</h2>
-      <div class="row" style="align-items:start">
-        <div style="width:200px"><Skeleton variant="line" lines={3}/></div>
-        <div class="flex gap-2">
-          <Skeleton variant="circle" width="40px" height="40px"/>
-          <Skeleton variant="circle" width="56px" height="56px"/>
-        </div>
-        <Skeleton variant="rect" width="160px" height="80px"/>
+      <h3 class="section-label">Tabs — vertical (uncontrolled, defaultValue)</h3>
+      <div style="height:160px; max-width:480px">
+        <Tabs variant="line" orientation="vertical" value="s1" class="h-full">
+          <TabsList class="w-28">
+            <TabsItem value="s1">Profile</TabsItem>
+            <TabsItem value="s2">Account</TabsItem>
+            <TabsItem value="s3">Security</TabsItem>
+          </TabsList>
+          <TabsContent value="s1"><p class="pad">Profile settings.</p></TabsContent>
+          <TabsContent value="s2"><p class="pad">Account settings.</p></TabsContent>
+          <TabsContent value="s3"><p class="pad">Security settings.</p></TabsContent>
+        </Tabs>
       </div>
     </section>
 
-    <!-- ── TOOLTIP ── -->
     <section>
-      <h2 class="section-label">Tooltip</h2>
-      <div class="row">
-        <Tooltip content="Appears on top" side="top"><Button variant="default">Top</Button></Tooltip>
-        <Tooltip content="Appears on bottom" side="bottom"><Button variant="default">Bottom</Button></Tooltip>
-        <Tooltip content="Appears on the right" side="right"><Button variant="default">Right</Button></Tooltip>
-        <Tooltip content="No delay" delay={0}><Button variant="default">Instant</Button></Tooltip>
-        <Tooltip content="Aligned start" side="bottom" align="start" sideOffset={4}><Button variant="default">align=start</Button></Tooltip>
-        <Tooltip content="16px offset" side="top" sideOffset={16}><Button variant="default">far offset</Button></Tooltip>
-      </div>
+      <h3 class="section-label">Accordion — single</h3>
+      <Accordion type="single" value="a1" style="max-width:480px">
+        <AccordionItem value="a1">
+          <AccordionTrigger>What is TeraUI?</AccordionTrigger>
+          <AccordionContent>A Svelte 5 base component library with design tokens and Tailwind v4.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="a2">
+          <AccordionTrigger>How do themes work?</AccordionTrigger>
+          <AccordionContent>Applied via theme CSS + tokens; components read semantic tokens.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="a3">
+          <AccordionTrigger>Is dark mode supported?</AccordionTrigger>
+          <AccordionContent>Yes — add the <code>.dark</code> class to enable dark mode for any theme.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </section>
 
-    <!-- ── TOAST ── -->
-    <section>
-      <h2 class="section-label">Toast / Notifications</h2>
-      <div class="row">
-        <Button variant="primary" onclick={() => toast.success('Saved!', { description: 'Changes applied.' })}>Success</Button>
-        <Button variant="default" onclick={() => toast.error('Failed', { description: 'Please try again.' })}>Error</Button>
-        <Button variant="default" onclick={() => toast.info('New update available')}>Info</Button>
-        <Button variant="default" onclick={() => toast.warning('Storage almost full')}>Warning</Button>
-        <Button variant="default" onclick={() => toast.success('File ready', { action: { label: 'View', onclick: () => {} } })}>With action</Button>
-      </div>
-    </section>
+    <!-- ════════ OVERLAY ════════ -->
+    <h2 class="group">Overlay</h2>
 
-    <!-- ── OVERLAY — DIALOG ── -->
     <section>
-      <h2 class="section-label">Dialog</h2>
+      <h3 class="section-label">Dialog · Drawer</h3>
       <div class="row">
         <Button variant="default" onclick={() => dialogOpen = true}>Open Dialog</Button>
+        <Button variant="default" onclick={() => drawerR = true}>Drawer (right)</Button>
+        <Button variant="default" onclick={() => drawerL = true}>Drawer (left)</Button>
       </div>
+
       <Dialog bind:open={dialogOpen} size="sm">
         {#snippet header()}Dialog Title{/snippet}
         <p class="text-sm text-text-secondary">This is the dialog body. Confirm or cancel the action.</p>
@@ -256,240 +260,229 @@
           <Button variant="primary" onclick={() => dialogOpen = false}>Confirm</Button>
         {/snippet}
       </Dialog>
-    </section>
 
-    <!-- ── OVERLAY — DRAWER ── -->
-    <section>
-      <h2 class="section-label">Drawer</h2>
-      <div class="row">
-        <Button variant="default" onclick={() => drawerOpen = true}>Open Drawer</Button>
-      </div>
-      <Drawer bind:open={drawerOpen} side="right" size="md">
+      <Drawer bind:open={drawerR} side="right" size="md">
         {#snippet header()}<span class="font-semibold">Right Drawer</span>{/snippet}
-        <p class="text-sm text-text-secondary">Drawer body content. Slides in from the edge.</p>
+        <p class="text-sm text-text-secondary">Slides in from the right edge.</p>
         {#snippet footer()}
           <div class="flex gap-2 justify-end">
-            <Button variant="default" onclick={() => drawerOpen = false}>Cancel</Button>
-            <Button variant="primary" onclick={() => drawerOpen = false}>Save</Button>
+            <Button variant="default" onclick={() => drawerR = false}>Cancel</Button>
+            <Button variant="primary" onclick={() => drawerR = false}>Save</Button>
           </div>
         {/snippet}
       </Drawer>
+
+      <Drawer bind:open={drawerL} side="left" size="sm">
+        {#snippet header()}<span class="font-semibold">Left Drawer</span>{/snippet}
+        <p class="text-sm text-text-secondary">Slides in from the left edge.</p>
+      </Drawer>
     </section>
 
-    <!-- ── OVERLAY — DROPDOWN & POPOVER ── -->
     <section>
-      <h2 class="section-label">DropdownMenu & Popover</h2>
+      <h3 class="section-label">BottomSheet</h3>
       <div class="row">
-        <DropdownMenu>
-          {#snippet trigger()}
-            <Button variant="default">Dropdown ▾</Button>
-          {/snippet}
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem>Duplicate</DropdownMenuItem>
-          <DropdownMenuSeparator/>
-          <DropdownMenuItem danger>Delete</DropdownMenuItem>
-        </DropdownMenu>
+        <Button variant="default" onclick={() => sheetOpen = true}>Open bottom sheet</Button>
+      </div>
+      <BottomSheet id="ov-sheet" bind:open={sheetOpen} snapPoints={[0.25, 0.6, 0.9]} showCloseButton>
+        {#snippet header()}<span class="font-semibold">Bottom sheet</span>{/snippet}
+        <div class="p-4 text-sm text-text-secondary">
+          <p>Draggable iOS-style sheet. Drag the handle between snap points (25 / 60 / 90%); tap the backdrop, press Escape, or use the X to close.</p>
+          <Button variant="primary" class="mt-3" onclick={() => sheetOpen = false}>Close</Button>
+        </div>
+      </BottomSheet>
+    </section>
 
+    <section>
+      <h3 class="section-label">Popover · PopoverResponsive · DropdownMenu</h3>
+      <div class="row">
         <Popover>
-          {#snippet trigger()}
-            <Button variant="default">Popover ▾</Button>
-          {/snippet}
+          {#snippet trigger()}<Button variant="default">Popover ▾</Button>{/snippet}
           <div class="p-3 text-sm max-w-[200px]">
             <p class="font-medium mb-1">Quick info</p>
-            <p class="text-text-secondary text-xs">Floating panel powered by bits-ui Popover.</p>
+            <p class="text-text-secondary text-xs">Floating panel anchored to the trigger.</p>
           </div>
         </Popover>
+
+        <PopoverResponsive bind:open={prOpen}>
+          {#snippet trigger()}<Button variant="default">Responsive ▾ ({prOpen ? 'open' : 'closed'})</Button>{/snippet}
+          <div class="p-4 min-w-[240px]">
+            <p class="font-medium text-sm mb-2">Responsive content</p>
+            <p class="text-xs text-text-secondary">Popover on ≥640px, full-screen Dialog below.</p>
+            <Button size="sm" class="mt-3" onclick={() => prOpen = false}>Close</Button>
+          </div>
+        </PopoverResponsive>
+
+        <DropdownMenu>
+          {#snippet trigger()}<Button variant="default">Dropdown ▾</Button>{/snippet}
+          <DropdownMenuHeader>Actions</DropdownMenuHeader>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>Edit</DropdownMenuItem>
+            <DropdownMenuItem>Duplicate</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator/>
+          <DropdownMenuItem danger>Delete</DropdownMenuItem>
+        </DropdownMenu>
       </div>
     </section>
 
-    <!-- ── NAVIGATION — TABS ── -->
     <section>
-      <h2 class="section-label">Navigation — Tabs</h2>
-      <Tabs bind:value={tabValue} style="max-width:480px">
-        <TabsList>
-          <TabsItem value="t1">Overview</TabsItem>
-          <TabsItem value="t2">Details</TabsItem>
-          <TabsItem value="t3">Settings</TabsItem>
-        </TabsList>
-        <TabsContent value="t1"><p class="p-3 text-sm text-text-secondary">Overview content goes here.</p></TabsContent>
-        <TabsContent value="t2"><p class="p-3 text-sm text-text-secondary">Details panel content.</p></TabsContent>
-        <TabsContent value="t3"><p class="p-3 text-sm text-text-secondary">Settings form content.</p></TabsContent>
-      </Tabs>
-
-      <Tabs bind:value={tabValue} variant="ios" style="max-width:480px">
-        <TabsList>
-          <TabsItem value="t1">Overview</TabsItem>
-          <TabsItem value="t2">Details</TabsItem>
-          <TabsItem value="t3">Settings</TabsItem>
-        </TabsList>
-        <TabsContent value="t1"><p class="p-3 text-sm text-text-secondary">Overview content goes here.</p></TabsContent>
-        <TabsContent value="t2"><p class="p-3 text-sm text-text-secondary">Details panel content.</p></TabsContent>
-        <TabsContent value="t3"><p class="p-3 text-sm text-text-secondary">Settings form content.</p></TabsContent>
-      </Tabs>
+      <h3 class="section-label">Command (in a Popover)</h3>
+      <div class="row" style="align-items:flex-start">
+        <Popover bind:open={cmdOpen}>
+          {#snippet trigger()}<Button variant="default">Open command palette</Button>{/snippet}
+          <div class="w-[320px]">
+            <Command>
+              <CommandInput autofocus placeholder="Search units…" bind:value={cmdValue}/>
+              <CommandList>
+                <CommandEmpty>No results found.</CommandEmpty>
+                <CommandGroup>
+                  {#each units as u}
+                    <CommandItem onSelect={() => pickUnit(u)} value="{u.code} {u.name}">
+                      <span class="font-mono text-xs text-text-tertiary w-10 shrink-0">{u.code}</span>
+                      {u.name}
+                    </CommandItem>
+                  {/each}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </div>
+        </Popover>
+        {#if cmdSelected}
+          <p class="text-sm text-text-secondary self-center">Selected: <code>{cmdSelected}</code></p>
+        {/if}
+      </div>
+    </section>
 
-      <!-- Vertical tabs (line variant + orientation) -->
-      <div style="height:180px; max-width:480px; margin-top:1rem">
-        <Tabs variant="line" orientation="vertical" class="h-full">
-          <TabsList class="w-28">
-            <TabsItem value="s1">Profile</TabsItem>
-            <TabsItem value="s2">Account</TabsItem>
-            <TabsItem value="s3">Security</TabsItem>
-          </TabsList>
-          <TabsContent value="s1"><p class="p-3 text-sm text-text-secondary">Profile settings content.</p></TabsContent>
-          <TabsContent value="s2"><p class="p-3 text-sm text-text-secondary">Account settings content.</p></TabsContent>
-          <TabsContent value="s3"><p class="p-3 text-sm text-text-secondary">Security settings content.</p></TabsContent>
-        </Tabs>
+    <section>
+      <h3 class="section-label">Tooltip</h3>
+      <div class="row">
+        <Tooltip content="Appears on top" side="top"><Button variant="default">Top</Button></Tooltip>
+        <Tooltip content="Appears on bottom" side="bottom"><Button variant="default">Bottom</Button></Tooltip>
+        <Tooltip content="Appears on the right" side="right"><Button variant="default">Right</Button></Tooltip>
+        <Tooltip content="No delay" delay={0}><Button variant="default">Instant</Button></Tooltip>
       </div>
     </section>
 
-    <!-- ── NAVIGATION — ACCORDION ── -->
     <section>
-      <h2 class="section-label">Navigation — Accordion</h2>
-      <Accordion type="single" value="a1" style="max-width:480px">
-        <AccordionItem value="a1">
-          <AccordionTrigger>What is TeraUI?</AccordionTrigger>
-          <AccordionContent>A Svelte 5 component library with multi-theme support and Tailwind CSS v4.</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="a2">
-          <AccordionTrigger>How do themes work?</AccordionTrigger>
-          <AccordionContent>Themes are applied via <code>data-theme</code> on the root element. All tokens update automatically.</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="a3">
-          <AccordionTrigger>Is dark mode supported?</AccordionTrigger>
-          <AccordionContent>Yes — add the <code>.dark</code> class to enable dark mode for any theme.</AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      <h3 class="section-label">Toast / Notifications</h3>
+      <div class="row">
+        <Button variant="primary" onclick={() => toast.success('Saved!', { description: 'Changes applied.' })}>Success</Button>
+        <Button variant="default" onclick={() => toast.error('Failed', { description: 'Please try again.' })}>Error</Button>
+        <Button variant="default" onclick={() => toast.info('New update available')}>Info</Button>
+        <Button variant="default" onclick={() => toast.warning('Storage almost full')}>Warning</Button>
+        <Button variant="default" onclick={() => toast.success('File ready', { action: { label: 'View', onclick: () => {} } })}>With action</Button>
+      </div>
     </section>
 
-    <!-- ── DATA — TABLE ── -->
+    <!-- ════════ FEEDBACK & DISPLAY ════════ -->
+    <h2 class="group">Feedback &amp; display</h2>
+
     <section>
-      <h2 class="section-label">Data — Table</h2>
-      <Table
-        columns={[
-          { key: 'name',   label: 'Name' },
-          { key: 'role',   label: 'Role' },
-          { key: 'status', label: 'Status' },
-        ]}
-        data={[
-          { name: 'Alice Martin', role: 'Designer',  status: 'Active' },
-          { name: 'Bob Johnson',  role: 'Developer', status: 'Inactive' },
-          { name: 'Carol Lee',    role: 'PM',        status: 'Active' },
-        ]}
-        striped
-        style="max-width:480px"
-      />
+      <h3 class="section-label">Card</h3>
+      <div class="row" style="align-items:stretch">
+        <Card style="width:150px"><p class="text-sm font-semibold">Default</p><p class="text-xs text-text-tertiary mt-1">shadow-sm</p></Card>
+        <Card variant="elevated" style="width:150px"><p class="text-sm font-semibold">Elevated</p><p class="text-xs text-text-tertiary mt-1">shadow-md</p></Card>
+        <Card variant="bordered" style="width:150px"><p class="text-sm font-semibold">Bordered</p><p class="text-xs text-text-tertiary mt-1">border only</p></Card>
+        <Card variant="ghost" style="width:150px"><p class="text-sm font-semibold">Ghost</p><p class="text-xs text-text-tertiary mt-1">no bg</p></Card>
+        <Card clickable style="width:150px"><p class="text-sm font-semibold">Clickable ↑</p><p class="text-xs text-text-tertiary mt-1">hover to lift</p></Card>
+        <Card loading style="width:150px"><p class="text-sm">Loading state</p></Card>
+      </div>
     </section>
 
-    <!-- ── IDENTITY ── -->
     <section>
-      <h2 class="section-label">Identity — Avatar, StarRating, BrandLogo</h2>
+      <h3 class="section-label">Badge</h3>
       <div class="row">
-        <Avatar size="xs" fallback="AB"/>
-        <Avatar size="sm" fallback="CD"/>
-        <Avatar size="md" fallback="EF"/>
-        <Avatar size="lg" fallback="GH"/>
-        <Avatar size="xl" fallback="IJ"/>
-        <StarRating value={3} readonly/>
-        <StarRating value={4.5} readonly/>
-        <LightDarkToggle/>
-        <BrandLogo/>
+        <Badge>Default</Badge>
+        <Badge variant="primary">Primary</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="error">Error</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="info">Info</Badge>
+        <Badge variant="primary" dot>With dot</Badge>
+        <Badge variant="success" closable>Closable</Badge>
+        <Badge variant="primary" size="sm">Small</Badge>
       </div>
     </section>
 
-    <!-- ── AI COMPONENTS ── -->
     <section>
-      <h2 class="section-label">AI — Chat</h2>
-      <div class="col" style="max-width:420px">
-        <ChatBubble role="user"      content="How do I install TeraUI?"/>
-        <ChatBubble role="assistant" content="Run npm install tera-system-ui and import what you need."/>
-        <ThinkingLoader variant="wave" label="Thinking..."/>
+      <h3 class="section-label">Alert</h3>
+      <div class="col" style="max-width:520px">
+        <Alert variant="info" title="Info">Informational message.</Alert>
+        <Alert variant="success" title="Done">Operation completed successfully.</Alert>
+        <Alert variant="warning" title="Warning" closable>Check this carefully before proceeding.</Alert>
+        <Alert variant="error" title="Error">Something went wrong. Please try again.</Alert>
       </div>
     </section>
 
     <section>
-      <h2 class="section-label">AI — StreamText</h2>
-      <div class="flex flex-col gap-3 max-w-md">
-        <button class="text-xs text-interactive underline text-left w-fit" onclick={() => streamKey++}>↻ Replay</button>
-        {#key streamKey}
-          <StreamText text="TeraUI is a modern Svelte 5 component library with Professional, AI, and Marketing themes." speed="normal"/>
-        {/key}
+      <h3 class="section-label">Spinner</h3>
+      <div class="row">
+        <Spinner size="xs"/>
+        <Spinner size="sm"/>
+        <Spinner size="md"/>
+        <Spinner size="lg"/>
+        <div class="bg-primary-600 p-2 rounded"><Spinner color="white" size="md"/></div>
       </div>
     </section>
 
     <section>
-      <h2 class="section-label">AI — PromptInput & SuggestionChips</h2>
-      <div class="max-w-md flex flex-col gap-4">
-        <SuggestionChips suggestions={['Explain themes', 'Show Button variants', 'Dark mode setup', 'API docs']}/>
-        <PromptInput
-          bind:value={promptValue}
-          placeholder="Ask me anything…"
-          onsubmit={(v) => { toast.success(`Sent: ${v}`); promptValue = ''; }}
-        />
+      <h3 class="section-label">Skeleton</h3>
+      <div class="row" style="align-items:flex-start">
+        <div style="width:200px"><Skeleton variant="line" lines={3}/></div>
+        <div class="flex gap-2">
+          <Skeleton variant="circle" width="40px" height="40px"/>
+          <Skeleton variant="circle" width="56px" height="56px"/>
+        </div>
+        <Skeleton variant="rect" width="160px" height="80px"/>
       </div>
     </section>
 
-    <!-- ── MARKETING COMPONENTS ── -->
     <section>
-      <h2 class="section-label">Marketing — Stats</h2>
-      <div class="row" style="align-items:start">
-        <StatBlock value="2.4M"  label="Monthly active users" trend="+18%" trendDirection="up"/>
-        <StatBlock value="99.9%" label="Uptime SLA"            trend="-0.01%" trendDirection="down"/>
-        <StatBlock value="$2.1M" label="ARR"                   trend="+34%" trendDirection="up"/>
-        <StatBlock value="4.8★"  label="Avg rating"/>
-      </div>
+      <h3 class="section-label">Table</h3>
+      <Table
+        columns={[
+          { key: 'name',   label: 'Name' },
+          { key: 'role',   label: 'Role' },
+          { key: 'status', label: 'Status' },
+        ]}
+        data={[
+          { name: 'Alice Martin', role: 'Designer',  status: 'Active' },
+          { name: 'Bob Johnson',  role: 'Developer', status: 'Inactive' },
+          { name: 'Carol Lee',    role: 'PM',        status: 'Active' },
+        ]}
+        striped
+        style="max-width:480px"/>
     </section>
 
+    <!-- ════════ IDENTITY ════════ -->
+    <h2 class="group">Identity</h2>
+
     <section>
-      <h2 class="section-label">Marketing — Feature Cards</h2>
-      <div class="row" style="align-items:stretch">
-        <FeatureCard title="Lightning fast"  description="Svelte 5 with zero overhead." variant="default"  style="width:190px"/>
-        <FeatureCard title="Multi-theme"     description="Three themes, one API."       variant="bordered" style="width:190px"/>
-        <FeatureCard title="Accessible"      description="WCAG 2.1 AA compliant."       variant="elevated" style="width:190px"/>
-        <FeatureCard title="Gradient border" description="Premium section treatment."   variant="gradient-border" style="width:190px"/>
+      <h3 class="section-label">Avatar</h3>
+      <div class="row">
+        <Avatar size="sm">AB</Avatar>
+        <Avatar size="md">CD</Avatar>
+        <Avatar size="lg">EF</Avatar>
+        <Avatar size="xl">GH</Avatar>
+        <Avatar size="md" border={false}>NB</Avatar>
+        <Avatar size="lg" src="https://i.pravatar.cc/96?img=12" alt="Sample avatar"/>
       </div>
     </section>
 
     <section>
-      <h2 class="section-label">Marketing — Pricing</h2>
-      <div class="row" style="align-items:end">
-        <PricingCard
-          plan="Starter" price="Free" period="forever"
-          description="Great for side projects."
-          features={['5 projects', 'Community support']}
-          cta="Get started"
-          style="width:210px"
-        />
-        <PricingCard
-          plan="Pro" price="$29" period="month"
-          description="For growing teams."
-          features={['Unlimited projects', 'Priority support', 'Custom themes']}
-          cta="Start trial"
-          popular variant="featured"
-          style="width:210px"
-        />
-        <PricingCard
-          plan="Enterprise" price="$99" period="month"
-          description="Advanced needs."
-          features={['Everything', 'SSO', 'SLA']}
-          cta="Contact sales"
-          style="width:210px"
-        />
+      <h3 class="section-label">StarRating</h3>
+      <div class="row">
+        <StarRating value={3} readonly/>
+        <StarRating value={4.5} readonly/>
+        <StarRating value={2}/>
       </div>
     </section>
 
     <section>
-      <h2 class="section-label">Marketing — Testimonials</h2>
-      <div class="row" style="align-items:stretch">
-        <TestimonialCard
-          quote="TeraUI cut our design-to-code time in half. The multi-theme system is brilliant."
-          name="Sarah Chen" role="Lead Designer" company="Acme Corp"
-          rating={5} style="width:280px"
-        />
-        <TestimonialCard
-          quote="Finally a Svelte library that doesn't look like a generic admin dashboard."
-          name="Marcus Lee" role="Frontend Engineer" company="StartupXYZ"
-          rating={5} style="width:280px"
-        />
+      <h3 class="section-label">Fonts</h3>
+      <div class="col">
+        <p class="text-sm">Sans-serif body text — the default UI typeface.</p>
+        <p class="text-sm font-mono">Monospace 0123 — code &amp; numerics (TeraFontMono).</p>
       </div>
     </section>
 
@@ -500,9 +493,21 @@
   .overview-wrap {
     display: flex;
     flex-direction: column;
-    gap: 2.5rem;
+    gap: 1.75rem;
     padding: 2rem;
-    max-width: 960px;
+    max-width: 1000px;
+  }
+
+  .ov-head h1 { font-size: 22px; font-weight: 700; margin: 0; }
+  .ov-head p  { font-size: 13px; color: var(--color-text-tertiary); margin: 4px 0 0; }
+
+  .group {
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    color: var(--color-interactive, var(--color-text-secondary));
+    margin: 1.5rem 0 -0.25rem;
   }
 
   .section-label {
@@ -511,23 +516,14 @@
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--color-text-tertiary);
-    margin: 0 0 12px;
+    margin: 14px 0 12px;
     padding-bottom: 8px;
     border-bottom: 1px solid var(--color-border-default);
   }
 
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .col {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+  .col { display: flex; flex-direction: column; gap: 10px; }
+  .pad { padding: 12px; font-size: 13px; color: var(--color-text-secondary); }
 
   section { display: flex; flex-direction: column; }
 </style>