@svgrid/grid 1.2.33 → 2.0.0

package/dist/SvBreadcrumb.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+  export type { BreadcrumbItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvBreadcrumb - a navigation trail. Each item is a link (`href`), a button
+   * (`onClick`), or plain text; the last item is the current page and is never
+   * interactive. Long trails collapse the middle to an expandable ellipsis.
+   * Parity: Smart breadcrumb.
+   *
+   * ```svelte
+   * <SvBreadcrumb items={[{label:'Home', href:'/'}, {label:'Orders', href:'/orders'}, {label:'#1024'}]} />
+   * ```
+   */
+  import type { BreadcrumbItem } from './ui-app.types'
+
+  type Props = {
+    items: ReadonlyArray<BreadcrumbItem>
+    /** Separator between crumbs. Default a chevron. */
+    separator?: string
+    /** Collapse the middle when there are more than this many crumbs. */
+    maxItems?: number
+    ariaLabel?: string
+  }
+
+  let { items, separator = '/', maxItems, ariaLabel = 'Breadcrumb' }: Props = $props()
+
+  let expanded = $state(false)
+
+  // When collapsed, show the first crumb, an ellipsis, and the last two.
+  const collapsed = $derived(!!maxItems && !expanded && items.length > maxItems)
+  type Display = { item: BreadcrumbItem; index: number } | 'ellipsis'
+  const display = $derived<Display[]>(
+    collapsed
+      ? [
+          { item: items[0]!, index: 0 },
+          'ellipsis',
+          ...items.slice(-2).map((item, i) => ({ item, index: items.length - 2 + i })),
+        ]
+      : items.map((item, index) => ({ item, index })),
+  )
+</script>
+
+<nav class="sv-bc" aria-label={ariaLabel}>
+  <ol class="sv-bc__list">
+    {#each display as entry, i (entry === 'ellipsis' ? `e${i}` : entry.index)}
+      {#if i > 0}<li class="sv-bc__sep" aria-hidden="true">{separator}</li>{/if}
+      {#if entry === 'ellipsis'}
+        <li>
+          <button type="button" class="sv-bc__ellipsis" aria-label="Show collapsed crumbs" onclick={() => (expanded = true)}>&hellip;</button>
+        </li>
+      {:else}
+        {@const isLast = entry.index === items.length - 1}
+        <li class="sv-bc__item" class:is-current={isLast}>
+          {#if isLast}
+            <span aria-current="page">{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</span>
+          {:else if entry.item.href}
+            <a class="sv-bc__link" href={entry.item.href}>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</a>
+          {:else if entry.item.onClick}
+            <button type="button" class="sv-bc__link sv-bc__btn" onclick={entry.item.onClick}>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</button>
+          {:else}
+            <span>{#if entry.item.icon}<span class="sv-bc__icon" aria-hidden="true">{entry.item.icon}</span>{/if}{entry.item.label}</span>
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .sv-bc__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
+  .sv-bc__sep { color: var(--sg-muted, #94a3b8); user-select: none; }
+  .sv-bc__item { color: var(--sg-muted, #64748b); }
+  .sv-bc__item.is-current { color: var(--sg-fg, #0f172a); font-weight: 600; }
+  .sv-bc__icon { margin-inline-end: 4px; }
+  .sv-bc__link {
+    color: var(--sg-muted, #64748b); text-decoration: none; border-radius: 4px;
+    display: inline-flex; align-items: center;
+  }
+  .sv-bc__link:hover { color: var(--sg-accent, #2563eb); text-decoration: underline; }
+  .sv-bc__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
+  .sv-bc__ellipsis {
+    background: var(--sg-row-hover-bg, #f1f5f9); border: 0; border-radius: 5px; cursor: pointer;
+    color: var(--sg-muted, #64748b); padding: 0 7px; height: 20px; line-height: 1; font: inherit;
+  }
+  .sv-bc__ellipsis:hover { color: var(--sg-fg, #0f172a); }
+</style>

package/dist/SvBreadcrumb.svelte.d.ts

@@ -0,0 +1,23 @@
+export type { BreadcrumbItem } from './ui-app.types';
+/**
+   * SvBreadcrumb - a navigation trail. Each item is a link (`href`), a button
+   * (`onClick`), or plain text; the last item is the current page and is never
+   * interactive. Long trails collapse the middle to an expandable ellipsis.
+   * Parity: Smart breadcrumb.
+   *
+   * ```svelte
+   * <SvBreadcrumb items={[{label:'Home', href:'/'}, {label:'Orders', href:'/orders'}, {label:'#1024'}]} />
+   * ```
+   */
+import type { BreadcrumbItem } from './ui-app.types';
+type Props = {
+    items: ReadonlyArray<BreadcrumbItem>;
+    /** Separator between crumbs. Default a chevron. */
+    separator?: string;
+    /** Collapse the middle when there are more than this many crumbs. */
+    maxItems?: number;
+    ariaLabel?: string;
+};
+declare const SvBreadcrumb: import("svelte").Component<Props, {}, "">;
+type SvBreadcrumb = ReturnType<typeof SvBreadcrumb>;
+export default SvBreadcrumb;

package/dist/SvButtonGroup.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+  export type { ButtonGroupItem, ButtonGroupMode, ButtonGroupValue } from './createButtonGroup.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvButtonGroup - a segmented button bar with single-select (radio semantics),
+   * multi-select (toggle set) or plain action buttons. Parity: Smart
+   * `smart-button-group`. Controlled via `value` + `onChange`; roving tabindex +
+   * arrow-key navigation come from the headless `createButtonGroup` core.
+   *
+   * Part of the editor kit: carries the shared contract (label, hint, error
+   * validation, size, `dir`/RTL) via `<SvField>`.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createButtonGroup, type ButtonGroupItem, type ButtonGroupMode, type ButtonGroupValue } from './createButtonGroup.svelte'
+
+  type Props = SvEditorProps & {
+    items: ReadonlyArray<ButtonGroupItem>
+    value?: ButtonGroupValue
+    onChange?: (value: string | number | Array<string | number>) => void
+    /** 'single' (radio), 'multiple' (toggle set), or 'none' (action buttons). */
+    mode?: ButtonGroupMode
+    orientation?: 'horizontal' | 'vertical'
+    /** 'solid' segmented fill (default) or 'outline' pills. */
+    variant?: 'solid' | 'outline'
+  }
+
+  let {
+    items,
+    value = null,
+    onChange,
+    mode = 'single',
+    orientation = 'horizontal',
+    variant = 'solid',
+    disabled = false,
+    size = 'md',
+    name,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-bg')
+  const uid = $derived(id ?? autoId)
+
+  const g = createButtonGroup({
+    items: () => items,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    mode: () => mode,
+    orientation: () => orientation,
+    disabled: () => disabled,
+    dir: () => dir,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel ?? label,
+  })
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-bg sv-bg--{orientation} sv-bg--{variant} sv-bg--{size}"
+    class:is-disabled={disabled}
+    class:is-invalid={invalid}
+    {...g.rootProps()}
+  >
+    {#each items as item, i (item.value)}
+      <button
+        class="sv-bg__btn"
+        class:is-selected={g.isSelected(item.value)}
+        {...g.buttonProps(i)}
+      >{item.label ?? item.value}</button>
+    {/each}
+    {#if name}
+      {#each g.selectedValues as v (v)}<input type="hidden" {name} value={v} />{/each}
+    {/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-bg {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; background: var(--sg-input-bg, #fff);
+    border: 1px solid var(--_border); border-radius: var(--_radius); overflow: hidden;
+  }
+  .sv-bg--vertical { flex-direction: column; }
+  .sv-bg.is-disabled { opacity: 0.6; }
+  .sv-bg.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-bg:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-bg.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+
+  .sv-bg__btn {
+    background: none; border: 0; font: inherit; font-weight: 600; color: var(--sg-fg, #0f172a);
+    cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s;
+  }
+  .sv-bg--sm .sv-bg__btn { padding: 5px 11px; font-size: 12px; }
+  .sv-bg--md .sv-bg__btn { padding: 7px 14px; font-size: 13px; }
+  .sv-bg--lg .sv-bg__btn { padding: 10px 18px; font-size: 15px; }
+  /* Segment dividers use a logical border so the bar mirrors under RTL. */
+  .sv-bg--horizontal .sv-bg__btn + .sv-bg__btn { border-inline-start: 1px solid var(--_border); }
+  .sv-bg--vertical .sv-bg__btn + .sv-bg__btn { border-top: 1px solid var(--_border); }
+  .sv-bg__btn:hover:not(:disabled):not(.is-selected) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-bg__btn:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: -2px; }
+  .sv-bg__btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+  .sv-bg--solid .sv-bg__btn.is-selected { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-bg--solid .sv-bg__btn.is-selected + .sv-bg__btn, .sv-bg--solid .sv-bg__btn.is-selected { border-color: var(--_accent); }
+  .sv-bg--outline .sv-bg__btn.is-selected { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
+</style>

package/dist/SvButtonGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+export type { ButtonGroupItem, ButtonGroupMode, ButtonGroupValue } from './createButtonGroup.svelte';
+import { type SvEditorProps } from './editor-contract';
+import { type ButtonGroupItem, type ButtonGroupMode, type ButtonGroupValue } from './createButtonGroup.svelte';
+type Props = SvEditorProps & {
+    items: ReadonlyArray<ButtonGroupItem>;
+    value?: ButtonGroupValue;
+    onChange?: (value: string | number | Array<string | number>) => void;
+    /** 'single' (radio), 'multiple' (toggle set), or 'none' (action buttons). */
+    mode?: ButtonGroupMode;
+    orientation?: 'horizontal' | 'vertical';
+    /** 'solid' segmented fill (default) or 'outline' pills. */
+    variant?: 'solid' | 'outline';
+};
+declare const SvButtonGroup: import("svelte").Component<Props, {}, "">;
+type SvButtonGroup = ReturnType<typeof SvButtonGroup>;
+export default SvButtonGroup;

package/dist/SvCalendar.svelte

@@ -16,20 +16,29 @@
    * Parity target: Smart `smart-calendar` (selectionModes, min/max, restricted /
    * important dates, week numbers, firstDayOfWeek, drill navigation, keyboard).
    */
-  import { untrack } from 'svelte'
+  import { untrack, type Snippet } from 'svelte'
+  import { resolveMessages, type EditorDir } from './editor-contract'
   import {
     createCalendar,
     type CalendarValue,
     type CalendarPreset,
     type CalendarAnimation,
+    type CalendarDayState,
     type DisplayMode,
   } from './createCalendar.svelte'
   import type { SelectionMode } from './datetime/date-selection'
   import type { RestrictOptions } from './datetime/date-restrict'
   import type { DateLike } from './datetime/date-core'
+  import type { RecurrenceRule } from './recurrence'
 
   type NameFormat = 'narrow' | 'short' | 'long'
 
+  /** User-facing strings (localizable via `messages`). */
+  type CalendarMessages = { label: string; shortcuts: string; today: string; clear: string; prev: string; next: string }
+  const DEFAULT_MESSAGES: CalendarMessages = {
+    label: 'Calendar', shortcuts: 'Shortcuts', today: 'Today', clear: 'Clear', prev: 'Previous', next: 'Next',
+  }
+
   type Props = {
     /** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */
     value?: CalendarValue
@@ -72,6 +81,16 @@
     dateTooltip?: (date: Date) => string | null | undefined
     /** One-click shortcuts (e.g. Today, Last 7 days) shown in a side rail. */
     presets?: ReadonlyArray<CalendarPreset>
+    /** Text direction (rtl mirrors layout + flips the nav arrows; auto inherits). */
+    dir?: EditorDir
+    /** Override the built-in strings (group/shortcut labels, footer buttons). */
+    messages?: Partial<CalendarMessages>
+    /** Repeat pattern(s): matching days get an indicator + `recurring` day-state. */
+    recurrence?: RecurrenceRule | ReadonlyArray<RecurrenceRule> | null
+    /** Render rich content inside each day cell (events, dots, badges). Receives
+     *  the date + its day-state. Switches the month grid to a taller,
+     *  top-aligned layout so there's room for the content. */
+    day?: Snippet<[Date, CalendarDayState]>
   }
 
   let {
@@ -101,8 +120,18 @@
     wheelNavigation = false,
     dateTooltip,
     presets,
+    dir,
+    messages,
+    recurrence = null,
+    day,
   }: Props = $props()
 
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  // With several month panels side by side, leading/trailing days of adjacent
+  // months overlap visually, so hide them by default when months > 1.
+  const hideOther = $derived(hideOtherMonthDays || months > 1)
+
   // The headless core owns all reactive state, selection, navigation, keyboard
   // and ARIA. Reactive inputs are passed as getters; callbacks as closures.
   const cal = createCalendar({
@@ -124,6 +153,7 @@
     dayNameFormat: () => dayNameFormat,
     monthNameFormat: () => monthNameFormat,
     dateTooltip: () => dateTooltip,
+    recurrence: () => recurrence,
   })
 
   // --- View-change animation (framework-native Web Animations API) -----------
@@ -181,12 +211,14 @@
   class:sv-cal--disabled={disabled}
   class:sv-cal--with-presets={presets && presets.length}
   class:sv-cal--band={selectionMode === 'range' || selectionMode === 'week'}
+  class:sv-cal--rich={!!day}
   role="group"
-  aria-label="Calendar"
+  aria-label={M.label}
   aria-disabled={disabled}
+  dir={resolvedDir}
 >
   {#if presets && presets.length}
-    <div class="sv-cal__presets" role="group" aria-label="Shortcuts">
+    <div class="sv-cal__presets" role="group" aria-label={M.shortcuts}>
       {#each presets as p, i (i)}
         <button class="sv-cal__preset" {...cal.presetProps(p)}>{p.label}</button>
       {/each}
@@ -223,7 +255,7 @@
               {#if weekNumbers}<span class="sv-cal__wk" aria-hidden="true">{week[0]?.week}</span>{/if}
               {#each week as cell (cell.date.getTime())}
                 {@const st = cal.dayState(cell.date, panel.month)}
-                {#if st.outside && hideOtherMonthDays}
+                {#if st.outside && hideOther}
                   <span class="sv-cal__day sv-cal__day--empty" role="gridcell" aria-hidden="true"></span>
                 {:else}
                   <button
@@ -234,8 +266,9 @@
                     class:is-important={st.important}
                     class:is-preview={st.preview}
                     class:is-focused={st.focused}
+                    class:is-recurring={st.recurring}
                     {...cal.dayProps(cell, panel.month)}
-                  >{cell.date.getDate()}</button>
+                  ><span class="sv-cal__daynum">{cell.date.getDate()}</span>{#if day}<span class="sv-cal__daybody">{@render day(cell.date, st)}</span>{/if}</button>
                 {/if}
               {/each}
             </div>
@@ -271,9 +304,9 @@
 
   {#if footer}
     <div class="sv-cal__footer">
-      <button type="button" class="sv-cal__foot-btn" onclick={cal.goToday} disabled={disabled}>Today</button>
+      <button type="button" class="sv-cal__foot-btn" onclick={cal.goToday} disabled={disabled}>{M.today}</button>
       {#if cal.canClear}
-        <button type="button" class="sv-cal__foot-btn" onclick={cal.clearSelection} disabled={disabled}>Clear</button>
+        <button type="button" class="sv-cal__foot-btn" onclick={cal.clearSelection} disabled={disabled}>{M.clear}</button>
       {/if}
     </div>
   {/if}
@@ -310,13 +343,15 @@
   /* Quick-shortcut rail (Today / Last 7 days / ...) shown when `presets` is set. */
   .sv-cal__presets {
     display: flex; flex-direction: column; gap: 2px;
-    padding-right: 10px; border-right: 1px solid var(--_border);
+    padding-inline-end: 10px; border-inline-end: 1px solid var(--_border);
     min-width: 118px; align-self: stretch;
   }
   .sv-cal__preset {
-    text-align: left; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 550;
+    text-align: start; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 550;
     background: none; border: 0; border-radius: var(--_radius); color: inherit; cursor: pointer; white-space: nowrap;
   }
+  /* Under RTL the prev/next chevron glyphs must point the other way. */
+  .sv-cal[dir='rtl'] .sv-cal__nav svg { transform: scaleX(-1); }
   .sv-cal__preset:hover:not(:disabled) { background: var(--_hover); color: var(--_accent); }
   .sv-cal__preset:disabled { opacity: 0.5; cursor: default; }
 
@@ -369,6 +404,34 @@
     content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
     width: 4px; height: 4px; border-radius: 50%; background: var(--sg-danger, #dc2626);
   }
+  /* Repeat-pattern indicator: a small ring in the top-inline-end corner
+     (distinct from the is-important bottom dot). */
+  .sv-cal__day.is-recurring::before {
+    content: ''; position: absolute; top: 4px; inset-inline-end: 4px;
+    width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
+    border: 1.5px solid color-mix(in srgb, var(--_accent) 75%, transparent);
+  }
+  .sv-cal:not(.sv-cal--rich) .sv-cal__day.is-selected.is-recurring::before { border-color: var(--sg-on-accent, #fff); }
+
+  /* --- Rich month grid: enabled by a `day` snippet. Cells fill the column width
+     and become taller / top-aligned so the snippet content (events, badges) has
+     room - turning the picker into an event-calendar surface. --- */
+  .sv-cal--rich .sv-cal__weekdays, .sv-cal--rich .sv-cal__week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+  .sv-cal--rich .sv-cal__weekdays:has(.sv-cal__wk-head), .sv-cal--rich .sv-cal__week:has(.sv-cal__wk) { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); }
+  .sv-cal--rich .sv-cal__weekday { justify-items: start; padding-inline-start: 6px; }
+  .sv-cal--rich .sv-cal__day {
+    width: auto; height: auto; min-height: 90px; display: flex; flex-direction: column;
+    align-items: stretch; gap: 3px; padding: 4px 5px 6px; text-align: start; border-radius: 8px;
+  }
+  .sv-cal--rich .sv-cal__day.is-today { box-shadow: none; }
+  .sv-cal--rich .sv-cal__day.is-selected { background: color-mix(in srgb, var(--_accent) 9%, transparent); color: inherit; }
+  .sv-cal--rich .sv-cal__daynum {
+    align-self: flex-start; flex: none; width: 24px; height: 24px; display: grid; place-items: center;
+    border-radius: 50%; font-size: 12.5px; font-weight: 600;
+  }
+  .sv-cal--rich .sv-cal__day.is-today .sv-cal__daynum { background: var(--_accent); color: var(--sg-on-accent, #fff); }
+  .sv-cal--rich .sv-cal__daybody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
+  .sv-cal--rich .sv-cal__day.is-important::after { display: none; }
   .sv-cal__day.is-preview { background: color-mix(in srgb, var(--_accent) 16%, transparent); border-radius: 0; }
   .sv-cal__day.is-selected {
     background: var(--_accent); color: var(--sg-on-accent, #fff); font-weight: 650;

package/dist/SvCalendar.svelte.d.ts

@@ -1,9 +1,32 @@
 export type { CalendarValue, CalendarPreset, CalendarAnimation, DisplayMode } from './createCalendar.svelte';
-import { type CalendarValue, type CalendarPreset, type CalendarAnimation, type DisplayMode } from './createCalendar.svelte';
+/**
+   * SvCalendar - a themeable, accessible month/year/decade calendar. It is a thin
+   * styled renderer over the headless `createCalendar` core (the same split as
+   * `createSvGrid` / <SvGrid>): the core owns the reactive state + interaction +
+   * ARIA (built on the framework-free ./datetime engine), while this component
+   * keeps the render-only concerns - the WAAPI view-change animation, mouse-wheel
+   * navigation, and DOM refs. All visuals come from the grid's `--sg-*` tokens.
+   *
+   * Parity target: Smart `smart-calendar` (selectionModes, min/max, restricted /
+   * important dates, week numbers, firstDayOfWeek, drill navigation, keyboard).
+   */
+import { type Snippet } from 'svelte';
+import { type EditorDir } from './editor-contract';
+import { type CalendarValue, type CalendarPreset, type CalendarAnimation, type CalendarDayState, type DisplayMode } from './createCalendar.svelte';
 import type { SelectionMode } from './datetime/date-selection';
 import type { RestrictOptions } from './datetime/date-restrict';
 import type { DateLike } from './datetime/date-core';
+import type { RecurrenceRule } from './recurrence';
 type NameFormat = 'narrow' | 'short' | 'long';
+/** User-facing strings (localizable via `messages`). */
+type CalendarMessages = {
+    label: string;
+    shortcuts: string;
+    today: string;
+    clear: string;
+    prev: string;
+    next: string;
+};
 type Props = {
     /** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */
     value?: CalendarValue;
@@ -46,6 +69,16 @@ type Props = {
     dateTooltip?: (date: Date) => string | null | undefined;
     /** One-click shortcuts (e.g. Today, Last 7 days) shown in a side rail. */
     presets?: ReadonlyArray<CalendarPreset>;
+    /** Text direction (rtl mirrors layout + flips the nav arrows; auto inherits). */
+    dir?: EditorDir;
+    /** Override the built-in strings (group/shortcut labels, footer buttons). */
+    messages?: Partial<CalendarMessages>;
+    /** Repeat pattern(s): matching days get an indicator + `recurring` day-state. */
+    recurrence?: RecurrenceRule | ReadonlyArray<RecurrenceRule> | null;
+    /** Render rich content inside each day cell (events, dots, badges). Receives
+     *  the date + its day-state. Switches the month grid to a taller,
+     *  top-aligned layout so there's room for the content. */
+    day?: Snippet<[Date, CalendarDayState]>;
 };
 declare const SvCalendar: import("svelte").Component<Props, {}, "">;
 type SvCalendar = ReturnType<typeof SvCalendar>;

package/dist/SvCard.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  /**
+   * SvCard - a themed surface container with an optional header (title +
+   * subtitle or a custom `header` snippet), body, and footer. The building block
+   * for dashboards and Studio-generated app screens. Parity: Smart card.
+   *
+   * ```svelte
+   * <SvCard title="Revenue" subtitle="Last 30 days">
+   *   <Chart .../>
+   *   {#snippet footer()}<a href="/reports">View report</a>{/snippet}
+   * </SvCard>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    title?: string
+    subtitle?: string
+    /** Lift + accent border on hover (for clickable cards). */
+    hoverable?: boolean
+    /** Remove body padding (e.g. a card wrapping a full-bleed grid/table). */
+    flush?: boolean
+    /** Custom header content; overrides title/subtitle when provided. */
+    header?: Snippet
+    children?: Snippet
+    footer?: Snippet
+  }
+
+  let { title, subtitle, hoverable = false, flush = false, header, children, footer }: Props = $props()
+  const hasHeader = $derived(!!header || !!title || !!subtitle)
+</script>
+
+<div class="sv-card" class:is-hoverable={hoverable}>
+  {#if hasHeader}
+    <div class="sv-card__header">
+      {#if header}
+        {@render header()}
+      {:else}
+        {#if title}<h3 class="sv-card__title">{title}</h3>{/if}
+        {#if subtitle}<p class="sv-card__subtitle">{subtitle}</p>{/if}
+      {/if}
+    </div>
+  {/if}
+  <div class="sv-card__body" class:is-flush={flush}>{@render children?.()}</div>
+  {#if footer}<div class="sv-card__footer">{@render footer()}</div>{/if}
+</div>
+
+<style>
+  .sv-card {
+    display: flex; flex-direction: column;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius-lg, 12px);
+    overflow: hidden;
+    transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
+  }
+  .sv-card.is-hoverable:hover {
+    border-color: color-mix(in srgb, var(--sg-accent, #2563eb) 45%, var(--sg-border, #e2e8f0));
+    box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.28);
+    transform: translateY(-1px);
+  }
+  @media (prefers-reduced-motion: reduce) { .sv-card.is-hoverable:hover { transform: none; } }
+  .sv-card__header { padding: 14px 16px; border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-card__title { margin: 0; font-size: 14.5px; font-weight: 650; }
+  .sv-card__subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--sg-muted, #64748b); }
+  .sv-card__body { padding: 16px; flex: 1; font-size: 13.5px; line-height: 1.55; }
+  .sv-card__body.is-flush { padding: 0; }
+  .sv-card__footer {
+    padding: 12px 16px; border-top: 1px solid var(--sg-border, #e2e8f0);
+    font-size: 13px; color: var(--sg-muted, #64748b);
+  }
+</style>

package/dist/SvCard.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+   * SvCard - a themed surface container with an optional header (title +
+   * subtitle or a custom `header` snippet), body, and footer. The building block
+   * for dashboards and Studio-generated app screens. Parity: Smart card.
+   *
+   * ```svelte
+   * <SvCard title="Revenue" subtitle="Last 30 days">
+   *   <Chart .../>
+   *   {#snippet footer()}<a href="/reports">View report</a>{/snippet}
+   * </SvCard>
+   * ```
+   */
+import type { Snippet } from 'svelte';
+type Props = {
+    title?: string;
+    subtitle?: string;
+    /** Lift + accent border on hover (for clickable cards). */
+    hoverable?: boolean;
+    /** Remove body padding (e.g. a card wrapping a full-bleed grid/table). */
+    flush?: boolean;
+    /** Custom header content; overrides title/subtitle when provided. */
+    header?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+};
+declare const SvCard: import("svelte").Component<Props, {}, "">;
+type SvCard = ReturnType<typeof SvCard>;
+export default SvCard;