@svgrid/ui 0.3.4 → 2.4.0

package/recipes/inputs/color-input.svelte

@@ -1,8 +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)} />
+<script lang="ts">
+  // SvColorInput - color swatch with a hex field, native picker and presets. Your copy, edit freely. Docs: https://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

@@ -1,9 +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>
+<script lang="ts">
+  // SvDurationInput - minute-valued field that accepts 1h 30m, 1:30 or 90. Your copy, edit freely. Docs: https://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

@@ -1,14 +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 }}
-/>
+<script lang="ts">
+  // SvMaskedInput - pattern-masked text that formats as you type. Your copy, edit freely. Docs: https://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

@@ -1,17 +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="$"
-/>
+<script lang="ts">
+  // SvNumberInput - numeric field with min/max/step, grouping and prefix/suffix. Your copy, edit freely. Docs: https://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

@@ -1,13 +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)}
-/>
+<script lang="ts">
+  // SvOtpInput - segmented one-time-code / PIN entry that auto-advances. Your copy, edit freely. Docs: https://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

@@ -1,14 +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"
-/>
+<script lang="ts">
+  // SvPasswordInput - password field with a reveal toggle and strength meter. Your copy, edit freely. Docs: https://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

@@ -1,8 +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)} />
+<script lang="ts">
+  // SvPhoneInput - country dial-code selector plus a national number field. Your copy, edit freely. Docs: https://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

@@ -1,8 +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" />
+<script lang="ts">
+  // SvTagsInput - editable token / chips input backed by a string[]. Your copy, edit freely. Docs: https://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

@@ -1,15 +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
-/>
+<script lang="ts">
+  // SvTextArea - multi-line text field with auto-grow and a character counter. Your copy, edit freely. Docs: https://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

@@ -1,14 +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
-/>
+<script lang="ts">
+  // SvTextInput - single-line text field for the whole editor kit. Your copy, edit freely. Docs: https://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

@@ -1,17 +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>
+<script lang="ts">
+  // SvAccordion - collapsible WAI-ARIA sections, single or multi expand. Your copy, edit freely. Docs: https://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

@@ -1,9 +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>
+<script lang="ts">
+  // SvCard - themed surface with header, body and footer. Your copy, edit freely. Docs: https://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/collapsible.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // SvCollapsible - a single animated show/hide section. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-collapsible
+  import { SvCollapsible } from '@svgrid/grid'
+  let advanced = $state(false)
+</script>
+
+<SvCollapsible title="Shipping details" open>
+  <p>Standard delivery, 3-5 business days. Tracking sent on dispatch.</p>
+</SvCollapsible>
+
+<SvCollapsible title="Advanced options" bind:open={advanced}>
+  <label><input type="checkbox" /> Signature on delivery</label>
+</SvCollapsible>

package/recipes/layout/display.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // Display primitives - SvKbd / SvCode / SvAspectRatio / SvVisuallyHidden.
+  // Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-display-primitives
+  import { SvKbd, SvCode, SvAspectRatio, SvVisuallyHidden } from '@svgrid/grid'
+</script>
+
+<p>Open the palette with <SvKbd keys={['Ctrl', 'K']} />.</p>
+
+<p>Install with <SvCode>npm i @svgrid/grid</SvCode>.</p>
+
+<SvAspectRatio ratio={16 / 9}>
+  <img src="/cover.jpg" alt="" />
+</SvAspectRatio>
+
+<button>★<SvVisuallyHidden>Add to favourites</SvVisuallyHidden></button>

package/recipes/layout/divider.svelte

@@ -1,9 +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>
+<script lang="ts">
+  // SvDivider - themed separator line, horizontal or vertical, with optional label. Your copy, edit freely. Docs: https://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

@@ -1,22 +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>
+<script lang="ts">
+  // SvDockLayout - nested resizable splits + tabbed leaves with drag-to-dock. Your copy, edit freely. Docs: https://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

@@ -1,24 +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>
+<script lang="ts">
+  // SvDockManager - docking with floating windows, reorder and auto-hide. Your copy, edit freely. Docs: https://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

@@ -1,15 +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>
+<script lang="ts">
+  // SvField - shared label / hint / error chrome for any control. Your copy, edit freely. Docs: https://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

@@ -1,16 +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)}
-/>
+<script lang="ts">
+  // SvFileUpload - drag-and-drop file field with accept / size / count validation. Your copy, edit freely. Docs: https://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

@@ -1,14 +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)} />
+<script lang="ts">
+  // SvForm - schema-driven form from a FormField[] with validation. Your copy, edit freely. Docs: https://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

@@ -1,16 +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()} />
+<script lang="ts">
+  // SvGridChart - inline-SVG chart from a ChartSpec, no charting dependency. Your copy, edit freely. Docs: https://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/layout.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  // Layout primitives - SvStack (column), SvGroup (row), SvSimpleGrid (responsive grid).
+  // Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-layout-primitives
+  import { SvStack, SvGroup, SvSimpleGrid, SvCard } from '@svgrid/grid'
+</script>
+
+<SvStack gap={16}>
+  <SvGroup gap={8} justify="between">
+    <strong>Team</strong>
+    <button>Invite</button>
+  </SvGroup>
+
+  <SvSimpleGrid minChildWidth={180} gap={12}>
+    <SvCard>One</SvCard>
+    <SvCard>Two</SvCard>
+    <SvCard>Three</SvCard>
+  </SvSimpleGrid>
+</SvStack>

package/recipes/layout/scroll-area.svelte

@@ -1,10 +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>
+<script lang="ts">
+  // SvScrollArea - scroll container with the kit's themed scrollbars. Your copy, edit freely. Docs: https://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>