@svgrid/ui 0.2.0

package/recipes/feedback/badge.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvBadge - a small status pill or count label. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-badge
+  import { SvBadge } from '@svgrid/grid'
+</script>
+
+<SvBadge variant="success">Active</SvBadge>
+<SvBadge variant="warning">Pending</SvBadge>
+<SvBadge variant="danger" dot>Failed</SvBadge>

package/recipes/feedback/carousel.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvCarousel - a sliding slideshow with arrows, dots, and autoplay. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-carousel
+  import { SvCarousel } from '@svgrid/grid'
+
+  const imgs = ['/a.jpg', '/b.jpg', '/c.jpg']
+</script>
+
+<SvCarousel count={imgs.length} autoplay={4000}>
+  {#snippet slide(i)}<img src={imgs[i]} alt="" />{/snippet}
+</SvCarousel>

package/recipes/feedback/chip.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvChip - a compact interactive pill for tags and filter tokens. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-chip
+  import { SvChip } from '@svgrid/grid'
+
+  let tags = $state(['design', 'urgent'])
+</script>
+
+{#each tags as tag (tag)}
+  <SvChip removable onRemove={() => (tags = tags.filter((t) => t !== tag))}>{tag}</SvChip>
+{/each}

package/recipes/feedback/empty-state.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvEmptyState - a centered placeholder for empty or no-results screens. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-empty-state
+  import { SvEmptyState, SvButton } from '@svgrid/grid'
+</script>
+
+<SvEmptyState title="No orders yet" description="Create your first order to get going.">
+  <SvButton variant="primary">New order</SvButton>
+</SvEmptyState>

package/recipes/feedback/skeleton.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvSkeleton - a shimmering loading placeholder. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-skeleton
+  import { SvSkeleton } from '@svgrid/grid'
+</script>
+
+<SvSkeleton variant="text" lines={3} />
+<SvSkeleton variant="circle" width="40px" height="40px" />
+<SvSkeleton variant="rect" height="160px" />

package/recipes/feedback/timeline.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvTimeline - a vertical activity or history feed. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-timeline
+  import { SvTimeline } from '@svgrid/grid'
+</script>
+
+<SvTimeline items={[
+  { title: 'Order placed', time: '09:12', color: '#16a34a', icon: '✓' },
+  { title: 'Shipped', time: '14:40', description: 'Left the warehouse' },
+  { title: 'Out for delivery', time: '08:05' },
+]} />

package/recipes/inputs/color-input.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvColorInput - color swatch with a hex field, native picker and presets. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-color-input
+  import { SvColorInput } from '@svgrid/grid'
+
+  let color = $state('#3b82f6')
+</script>
+
+<SvColorInput label="Brand color" value={color} onChange={(hex) => (color = hex)} />

package/recipes/inputs/duration-input.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvDurationInput - minute-valued field that accepts 1h 30m, 1:30 or 90. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-duration-input
+  import { SvDurationInput } from '@svgrid/grid'
+
+  let minutes = $state<number | null>(90)
+</script>
+
+<SvDurationInput label="Task estimate" bind:value={minutes} style="units" />
+<p>Stored as {minutes} minutes</p>

package/recipes/inputs/masked-input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvMaskedInput - pattern-masked text that formats as you type. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-masked-input
+  import { SvMaskedInput } from '@svgrid/grid'
+
+  let card = $state('')
+  let complete = $state(false)
+</script>
+
+<SvMaskedInput
+  label="Card number"
+  mask="#### #### #### ####"
+  value={card}
+  onChange={(masked, raw, done) => { card = masked; complete = done }}
+/>

package/recipes/inputs/number-input.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // SvNumberInput - numeric field with min/max/step, grouping and prefix/suffix. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-number-input
+  import { SvNumberInput } from '@svgrid/grid'
+
+  let price = $state<number | null>(1299.5)
+</script>
+
+<SvNumberInput
+  label="Price"
+  value={price}
+  onChange={(v) => (price = v)}
+  min={0}
+  step={0.5}
+  precision={2}
+  grouping
+  prefix="$"
+/>

package/recipes/inputs/otp-input.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvOtpInput - segmented one-time-code / PIN entry that auto-advances. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-otp-input
+  import { SvOtpInput } from '@svgrid/grid'
+
+  let code = $state('')
+</script>
+
+<SvOtpInput
+  label="Verification code"
+  length={6}
+  bind:value={code}
+  onComplete={(v) => console.log('verify', v)}
+/>

package/recipes/inputs/password-input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvPasswordInput - password field with a reveal toggle and strength meter. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-password-input
+  import { SvPasswordInput } from '@svgrid/grid'
+
+  let pw = $state('')
+</script>
+
+<SvPasswordInput
+  label="Password"
+  value={pw}
+  onChange={(v) => (pw = v)}
+  showStrength
+  autocomplete="new-password"
+/>

package/recipes/inputs/phone-input.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvPhoneInput - country dial-code selector plus a national number field. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-phone-input
+  import { SvPhoneInput } from '@svgrid/grid'
+
+  let phone = $state('')
+</script>
+
+<SvPhoneInput label="Mobile" country="US" value={phone} onChange={(v) => (phone = v)} />

package/recipes/inputs/tags-input.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvTagsInput - editable token / chips input backed by a string[]. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tags-input
+  import { SvTagsInput } from '@svgrid/grid'
+
+  let skills = $state(['Svelte', 'TypeScript'])
+</script>
+
+<SvTagsInput label="Skills" value={skills} onChange={(t) => (skills = t)} placeholder="Add a skill" />

package/recipes/inputs/text-area.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvTextArea - multi-line text field with auto-grow and a character counter. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-text-area
+  import { SvTextArea } from '@svgrid/grid'
+
+  let notes = $state('')
+</script>
+
+<SvTextArea
+  label="Notes"
+  placeholder="Anything the team should know…"
+  bind:value={notes}
+  autoGrow
+  maxlength={280}
+  showCount
+/>

package/recipes/inputs/text-input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvTextInput - single-line text field for the whole editor kit. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-text-input
+  import { SvTextInput } from '@svgrid/grid'
+
+  let email = $state('')
+</script>
+
+<SvTextInput
+  label="Work email"
+  type="email"
+  placeholder="you@company.com"
+  bind:value={email}
+  clearable
+/>

package/recipes/layout/accordion.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // SvAccordion - collapsible WAI-ARIA sections, single or multi expand. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-accordion
+  import { SvAccordion, type AccordionItem } from '@svgrid/grid'
+
+  const items: AccordionItem[] = [
+    { id: 'ship', label: 'Shipping' },
+    { id: 'pay', label: 'Payment' },
+    { id: 'gift', label: 'Gift options' },
+  ]
+  let expanded = $state(['ship'])
+</script>
+
+<SvAccordion {items} {expanded} onChange={(ids) => (expanded = ids)}>
+  {#snippet panel(item)}
+    <p>Details for {item.label}.</p>
+  {/snippet}
+</SvAccordion>

package/recipes/layout/card.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvCard - themed surface with header, body and footer. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-card
+  import { SvCard } from '@svgrid/grid'
+</script>
+
+<SvCard title="Revenue" subtitle="Last 30 days">
+  <p>$42,180</p>
+  {#snippet footer()}<a href="/reports">View report</a>{/snippet}
+</SvCard>

package/recipes/layout/divider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvDivider - themed separator line, horizontal or vertical, with optional label. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-divider
+  import { SvDivider } from '@svgrid/grid'
+</script>
+
+<p>Above</p>
+<SvDivider />
+<SvDivider label="OR" />
+<p>Below</p>

package/recipes/layout/dock-layout.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  // SvDockLayout - nested resizable splits + tabbed leaves with drag-to-dock. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-dock-layout
+  import { SvDockLayout, dockGroup, dockTabs, dockPane, type DockNode } from '@svgrid/grid'
+
+  let layout = $state<DockNode>(
+    dockGroup('row', [
+      dockTabs([dockPane('explorer', 'Explorer')]),
+      dockGroup('column', [
+        dockTabs([dockPane('editor', 'index.ts'), dockPane('readme', 'README.md')]),
+        dockTabs([dockPane('terminal', 'Terminal')]),
+      ], [0.7, 0.3]),
+    ], [0.25, 0.75]),
+  )
+</script>
+
+<div style="height: 480px">
+  <SvDockLayout bind:layout>
+    {#snippet pane(p)}
+      <div style="padding: 12px">{p.title}</div>
+    {/snippet}
+  </SvDockLayout>
+</div>

package/recipes/layout/dock-manager.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  // SvDockManager - docking with floating windows, reorder and auto-hide. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-dock-manager
+  import { SvDockManager, dockGroup, dockTabs, dockPane, type DockManagerState } from '@svgrid/grid'
+
+  let workspace = $state<DockManagerState>({
+    main: dockGroup('row', [
+      dockTabs([dockPane('explorer', 'Explorer')]),
+      dockGroup('column', [
+        dockTabs([dockPane('editor', 'index.ts'), dockPane('readme', 'README.md')]),
+        dockTabs([dockPane('terminal', 'Terminal')]),
+      ], [0.7, 0.3]),
+    ], [0.22, 0.78]),
+    floating: [],
+    autoHide: [],
+  })
+</script>
+
+<div style="height: 520px">
+  <SvDockManager bind:workspace>
+    {#snippet pane(p)}
+      <div style="padding: 12px">{p.title}</div>
+    {/snippet}
+  </SvDockManager>
+</div>

package/recipes/layout/field.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvField - shared label / hint / error chrome for any control. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-field
+  import { SvField } from '@svgrid/grid'
+
+  let role = $state('')
+  const err = $derived(role ? undefined : 'Pick a role')
+</script>
+
+<SvField id="role" label="Role" hint="Sets the default permissions" error={err} required block>
+  <select id="role" bind:value={role}>
+    <option value="">Choose...</option>
+    <option value="admin">Admin</option>
+    <option value="member">Member</option>
+  </select>
+</SvField>

package/recipes/layout/file-upload.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  // SvFileUpload - drag-and-drop file field with accept / size / count validation. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-file-upload
+  import { SvFileUpload, type FileRejection } from '@svgrid/grid'
+
+  let files = $state<File[]>([])
+</script>
+
+<SvFileUpload
+  {files}
+  label="Attachments"
+  accept="image/*,.pdf"
+  multiple
+  maxSize={5 * 1024 * 1024}
+  onChange={(f) => (files = f)}
+  onReject={(r: FileRejection[]) => console.warn(r)}
+/>

package/recipes/layout/form.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvForm - schema-driven form from a FormField[] with validation. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-form
+  import { SvForm, type FormField } from '@svgrid/grid'
+
+  const fields: FormField[] = [
+    { name: 'name', label: 'Full name', required: true },
+    { name: 'email', label: 'Email', type: 'email', required: true },
+    { name: 'plan', label: 'Plan', type: 'select',
+      options: [{ value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }] },
+    { name: 'agree', label: 'I accept the terms', type: 'checkbox' },
+  ]
+</script>
+
+<SvForm {fields} columns={2} onSubmit={(values) => console.log(values)} />

package/recipes/layout/grid-chart.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  // SvGridChart - inline-SVG chart from a ChartSpec, no charting dependency. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-grid-chart
+  import { SvGridChart, rowsToChartSpec, type ChartSpec } from '@svgrid/grid'
+
+  const rows = [
+    { region: 'North', revenue: 4200 },
+    { region: 'South', revenue: 3100 },
+    { region: 'East', revenue: 5300 },
+    { region: 'West', revenue: 2800 },
+  ]
+  const spec = $derived<ChartSpec>(
+    rowsToChartSpec(rows, { type: 'bar', category: 'region', value: 'revenue', reduce: 'sum' }),
+  )
+</script>
+
+<SvGridChart {spec} formatValue={(v) => '$' + v.toLocaleString()} />

package/recipes/layout/scroll-area.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvScrollArea - scroll container with the kit's themed scrollbars. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-scroll-area
+  import { SvScrollArea } from '@svgrid/grid'
+
+  const rows = Array.from({ length: 40 }, (_, i) => `Item ${i + 1}`)
+</script>
+
+<SvScrollArea maxHeight="240px">
+  {#each rows as row}<div style="padding: 6px 12px">{row}</div>{/each}
+</SvScrollArea>

package/recipes/layout/splitter.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvSplitter - two resizable panes with a draggable separator. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-splitter
+  import { SvSplitter } from '@svgrid/grid'
+
+  let fraction = $state(0.3)
+</script>
+
+<div style="height: 320px">
+  <SvSplitter {fraction} onChange={(f) => (fraction = f)} ariaLabel="Sidebar width">
+    {#snippet start()}<nav style="padding: 12px">Sidebar</nav>{/snippet}
+    {#snippet end()}<main style="padding: 12px">Content</main>{/snippet}
+  </SvSplitter>
+</div>

package/recipes/layout/tabs.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // SvTabs - WAI-ARIA tab strip with roving arrow-key nav. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tabs
+  import { SvTabs, type TabItem } from '@svgrid/grid'
+
+  const tabs: TabItem[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'activity', label: 'Activity' },
+    { id: 'settings', label: 'Settings' },
+  ]
+  let tab = $state('overview')
+</script>
+
+<SvTabs {tabs} value={tab} onChange={(id) => (tab = id)} variant="line">
+  {#snippet panel(active)}
+    <p>Content for the {active} tab.</p>
+  {/snippet}
+</SvTabs>

package/recipes/navigation/breadcrumb.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // SvBreadcrumb - a navigation trail to the current page. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-breadcrumb
+  import { SvBreadcrumb } from '@svgrid/grid'
+
+  const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Orders', href: '/orders' },
+    { label: '#1024' },
+  ]
+</script>
+
+<SvBreadcrumb {items} separator="›" maxItems={4} />

package/recipes/navigation/command.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // SvCommand - a Cmd+K fuzzy command palette. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-command
+  import { SvCommand, type CommandItem } from '@svgrid/grid'
+
+  const commands: CommandItem[] = [
+    { id: 'new', label: 'New record', group: 'Actions', shortcut: '⌘N', onRun: () => console.log('new') },
+    { id: 'export', label: 'Export CSV', group: 'Actions', onRun: () => console.log('export') },
+  ]
+</script>
+
+<!-- Cmd/Ctrl+K opens it -->
+<SvCommand {commands} onRun={(c) => console.log(c.id)} />

package/recipes/navigation/nav-pane.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvNavPane - an Outlook-style app-shell navigation sidebar. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-nav-pane
+  import { SvNavPane, type NavSection } from '@svgrid/grid'
+
+  let value = $state<string | null>('inbox')
+  const sections: NavSection[] = [
+    { id: 'mail', label: 'Mail', items: [
+      { id: 'inbox', label: 'Inbox', badge: 12 },
+      { id: 'sent', label: 'Sent' },
+    ] },
+  ]
+</script>
+
+<SvNavPane {sections} bind:value onSelect={(id) => console.log(id)} />

package/recipes/navigation/pagination.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvPagination - a standalone pager with prev/next and page numbers. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-pagination
+  import { SvPagination } from '@svgrid/grid'
+
+  let page = $state(1)
+</script>
+
+<SvPagination
+  {page}
+  pageCount={20}
+  showFirstLast
+  onChange={(n) => (page = n)}
+/>

package/recipes/navigation/rich-text.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvRichText - a lightweight WYSIWYG editor emitting HTML. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-rich-text
+  import { SvRichText } from '@svgrid/grid'
+
+  let html = $state('<p>Hello</p>')
+</script>
+
+<SvRichText bind:value={html} placeholder="Write something…" />

package/recipes/navigation/stepper.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvStepper - a progress stepper for wizards and multi-step forms. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-stepper
+  import { SvStepper } from '@svgrid/grid'
+
+  let current = $state(0)
+  const steps = [
+    { label: 'Cart' },
+    { label: 'Shipping', description: 'Where to send it' },
+    { label: 'Payment', optional: true },
+  ]
+</script>
+
+<SvStepper {steps} {current} onChange={(n) => (current = n)} />

package/recipes/navigation/tour.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvTour - a guided, spotlighted product tour overlay. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tour
+  import { SvTour, SvButton } from '@svgrid/grid'
+
+  let open = $state(false)
+  const steps = [
+    { target: '#new-btn', title: 'Create', content: 'Start a record here.' },
+    { target: '.grid', title: 'Your data', content: 'It shows up in the grid.' },
+  ]
+</script>
+
+<SvButton onclick={() => (open = true)}>Take the tour</SvButton>
+
+<SvTour bind:open {steps} />

package/recipes/navigation/tree.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvTree - a WAI-ARIA tree view with expand/select/checkboxes. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tree
+  import { SvTree, type SvTreeNode } from '@svgrid/grid'
+
+  let selected = $state<string | null>(null)
+  const nodes: SvTreeNode[] = [
+    { id: 'src', label: 'src', children: [
+      { id: 'app', label: 'App.svelte' },
+      { id: 'main', label: 'main.ts' },
+    ] },
+  ]
+</script>
+
+<SvTree {nodes} {selected} onSelect={(id) => (selected = id)} />

package/recipes/overlays/context-menu.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvContextMenu - opens a menu at the pointer on right-click. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-context-menu
+  import { SvContextMenu, type MenuItem } from '@svgrid/grid'
+
+  const items: MenuItem[] = [
+    { label: 'Copy', shortcut: 'Ctrl+C', onSelect: () => {} },
+    { label: 'Duplicate', onSelect: () => {} },
+    { separator: true },
+    { label: 'Delete', onSelect: () => {} },
+  ]
+</script>
+
+<SvContextMenu {items} onSelect={(i) => console.log(i.label)}>
+  <div class="drop-zone">Right-click me</div>
+</SvContextMenu>

package/recipes/overlays/drawer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvDrawer - an edge-anchored side sheet with backdrop. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-drawer
+  import { SvDrawer, SvButton } from '@svgrid/grid'
+
+  let open = $state(false)
+</script>
+
+<SvButton onclick={() => (open = true)}>Filters</SvButton>
+
+<SvDrawer bind:open side="right" title="Filters">
+  <p>Body content.</p>
+  {#snippet footer()}<SvButton variant="primary" onclick={() => (open = false)}>Apply</SvButton>{/snippet}
+</SvDrawer>

package/recipes/overlays/menu.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvMenu - a trigger-opened dropdown / actions menu. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-menu
+  import { SvMenu, SvButton, type MenuItem } from '@svgrid/grid'
+
+  const items: MenuItem[] = [
+    { label: 'New', shortcut: 'Ctrl+N', onSelect: () => {} },
+    { label: 'Duplicate', onSelect: () => {} },
+    { separator: true },
+    { label: 'Delete', onSelect: () => {} },
+  ]
+</script>
+
+<SvMenu {items} onSelect={(i) => console.log(i.label)}>
+  {#snippet anchor()}<SvButton>Actions</SvButton>{/snippet}
+</SvMenu>

package/recipes/overlays/modal.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvModal - an accessible modal dialog with focus trap. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-modal
+  import { SvModal, SvButton } from '@svgrid/grid'
+
+  let open = $state(false)
+</script>
+
+<SvButton onclick={() => (open = true)}>Edit row</SvButton>
+
+<SvModal bind:open title="Edit row">
+  <p>Body content.</p>
+  {#snippet footer()}<SvButton variant="primary" onclick={() => (open = false)}>Save</SvButton>{/snippet}
+</SvModal>

package/recipes/overlays/popover.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvPopover - a floating panel anchored to a trigger. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-popover
+  import { SvPopover, SvButton } from '@svgrid/grid'
+</script>
+
+<SvPopover>
+  {#snippet anchor()}<SvButton>Open</SvButton>{/snippet}
+  <p>Panel content, portalled out of any scroll container.</p>
+</SvPopover>

package/recipes/overlays/toaster.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvToaster - host that renders the shared toast queue. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-toaster
+  import { SvToaster, SvButton, toast } from '@svgrid/grid'
+</script>
+
+<!-- Mount once, near the app root -->
+<SvToaster position="bottom-right" />
+
+<SvButton onclick={() => toast.success('Saved')}>Save</SvButton>

package/recipes/overlays/tooltip.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvTooltip - a hover and focus tooltip anchored to its child. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tooltip
+  import { SvTooltip, SvButton } from '@svgrid/grid'
+</script>
+
+<SvTooltip text="Delete row">
+  <SvButton ariaLabel="Delete">🗑</SvButton>
+</SvTooltip>

package/recipes/range/circular-progress.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvCircularProgress - ring progress indicator. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-circular-progress
+  import { SvCircularProgress } from '@svgrid/grid'
+
+  let value = $state(72)
+</script>
+
+<SvCircularProgress {value} size={72} thickness={7} showLabel />
+<SvCircularProgress indeterminate size={28} color="accent" />