@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/components/data-display/checklist/checklist.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChecklistGroup } from './checklist-types.js';
+/**
+ * The full "Get started" list: setup steps grouped into cards, each row
+ * folding open to its description and whatever the caller hangs off it.
+ *
+ * The page-sized companion to `ChecklistCard`, which lives above a sidebar's
+ * nav and shows the next few rows of one flat list. Not `Readiness`, which
+ * answers "what does this page still need before I can save it".
+ */
+export type ChecklistProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    groups: ChecklistGroup[];
+    /**
+     * The `id` of the one open row, or nothing open. Controlled, with no
+     * internal fallback, so it can follow a URL fragment without disagreeing
+     * with it. One row at a time by construction.
+     */
+    expandedId?: string;
+    /** The id to move to, or `null` when the open row was closed. */
+    onExpandedChange?: (id: string | null) => void;
+};
+declare const Checklist: import("svelte").Component<ChecklistProps, {}, "">;
+type Checklist = ReturnType<typeof Checklist>;
+export default Checklist;

package/dist/components/data-display/checklist/index.d.ts

@@ -0,0 +1,3 @@
+export { type ChecklistProps, default as Checklist } from './checklist.svelte';
+export { type ChecklistCardProps, default as ChecklistCard } from './checklist-card.svelte';
+export type { ChecklistCardItem, ChecklistGroup, ChecklistTask, ChecklistTaskState, } from './checklist-types.js';

package/dist/components/data-display/checklist/index.js

@@ -0,0 +1,2 @@
+export { default as Checklist } from './checklist.svelte';
+export { default as ChecklistCard } from './checklist-card.svelte';

package/dist/components/data-display/data-table/data-table-column-header.svelte

@@ -0,0 +1,99 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-column-header.tsx`
+  Diverged: Lucide's arrow-up, arrow-down, arrow-up-down and eye-off for
+    Tabler's. The column is TanStack Table 9's (R4b-1). Takes `class`, as every
+    component does.
+-->
+<script lang="ts" module>
+  import type { Column, RowData } from '@tanstack/svelte-table'
+  import type { Snippet } from 'svelte'
+
+  import type { DataTableFeatures } from './features.js'
+
+  /**
+   * A column's heading, with a sort menu when the column sorts. A sortable
+   * header is a button and an unsortable one bare text, so the button is pinned
+   * to the type `TableHead` already sets (12px, medium, muted) and the two read
+   * as one kind of heading.
+   */
+  export type DataTableColumnHeaderProps<TData extends RowData, TValue> = {
+    column: Column<DataTableFeatures, TData, TValue>
+    title: string | Snippet
+    class?: string
+  }
+</script>
+
+<script lang="ts" generics="TData extends RowData, TValue">
+  import ArrowDownIcon from '@lucide/svelte/icons/arrow-down'
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
+  import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down'
+  import EyeOffIcon from '@lucide/svelte/icons/eye-off'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import DropdownMenu from '../../actions/dropdown-menu/dropdown-menu.svelte'
+  import DropdownMenuContent from '../../actions/dropdown-menu/dropdown-menu-content.svelte'
+  import DropdownMenuItem from '../../actions/dropdown-menu/dropdown-menu-item.svelte'
+  import DropdownMenuSeparator from '../../actions/dropdown-menu/dropdown-menu-separator.svelte'
+  import DropdownMenuTrigger from '../../actions/dropdown-menu/dropdown-menu-trigger.svelte'
+
+  let { column, title, class: className }: DataTableColumnHeaderProps<TData, TValue> = $props()
+
+  /** Read off the column: the table is the source of truth. */
+  const direction = $derived(column.getIsSorted())
+</script>
+
+{#snippet text()}
+  {#if typeof title === 'function'}
+    {@render title()}
+  {:else}
+    {title}
+  {/if}
+{/snippet}
+
+{#if !column.getCanSort()}
+  <div class={cn(className)}>{@render text()}</div>
+{:else}
+  <div class={cn('flex items-center space-x-2', className)}>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        {#snippet child({ props })}
+          <Button
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            class="text-muted-foreground hover:text-foreground -ml-2 h-7 gap-1.5 px-2 text-xs font-medium"
+            {...props}
+          >
+            <span>{@render text()}</span>
+            {#if direction === 'desc'}
+              <ArrowDownIcon class="size-3.5" />
+            {:else if direction === 'asc'}
+              <ArrowUpIcon class="size-3.5" />
+            {:else}
+              <ArrowUpDownIcon class="size-3.5" />
+            {/if}
+          </Button>
+        {/snippet}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem onSelect={() => column.toggleSorting(false)}>
+          <ArrowUpIcon class="text-muted-foreground/70 mr-1.5 size-3.5" />
+          Asc
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => column.toggleSorting(true)}>
+          <ArrowDownIcon class="text-muted-foreground/70 mr-1.5 size-3.5" />
+          Desc
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          disabled={!column.getCanHide()}
+          onSelect={() => column.toggleVisibility(false)}
+        >
+          <EyeOffIcon class="text-muted-foreground/70 mr-1.5 size-3.5" />
+          Hide
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+{/if}

package/dist/components/data-display/data-table/data-table-column-header.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { Snippet } from 'svelte';
+import type { DataTableFeatures } from './features.js';
+/**
+ * A column's heading, with a sort menu when the column sorts. A sortable
+ * header is a button and an unsortable one bare text, so the button is pinned
+ * to the type `TableHead` already sets (12px, medium, muted) and the two read
+ * as one kind of heading.
+ */
+export type DataTableColumnHeaderProps<TData extends RowData, TValue> = {
+    column: Column<DataTableFeatures, TData, TValue>;
+    title: string | Snippet;
+    class?: string;
+};
+declare function $$render<TData extends RowData, TValue>(): {
+    props: DataTableColumnHeaderProps<TData, TValue>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData, TValue> {
+    props(): ReturnType<typeof $$render<TData, TValue>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue>['props']>, ReturnType<__sveltets_Render<TData, TValue>['events']>, ReturnType<__sveltets_Render<TData, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    <TData extends RowData, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTableColumnHeader: $$IsomorphicComponent;
+type DataTableColumnHeader<TData extends RowData, TValue> = InstanceType<typeof DataTableColumnHeader<TData, TValue>>;
+export default DataTableColumnHeader;

package/dist/components/data-display/data-table/data-table-column-toggle.svelte

@@ -0,0 +1,68 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-column-toggle.tsx`
+  Diverged: Lucide's columns-3 for Tabler's layout-columns. The table is
+    TanStack Table 9's (R4b-1).
+-->
+<script lang="ts" module>
+  import type { RowData } from '@tanstack/svelte-table'
+
+  import type { DataTableInstance } from './data-table.svelte'
+
+  /**
+   * The columns a reader can hide, as checkboxes in a menu. Icon-only: a label
+   * beside the glyph would wrap a toolbar that already holds several filters.
+   */
+  export type DataTableColumnToggleProps<TData extends RowData> = {
+    table: DataTableInstance<TData>
+  }
+</script>
+
+<script lang="ts" generics="TData extends RowData">
+  import Columns3Icon from '@lucide/svelte/icons/columns-3'
+
+  import Button from '../../actions/button/button.svelte'
+  import DropdownMenu from '../../actions/dropdown-menu/dropdown-menu.svelte'
+  import DropdownMenuCheckboxItem from '../../actions/dropdown-menu/dropdown-menu-checkbox-item.svelte'
+  import DropdownMenuContent from '../../actions/dropdown-menu/dropdown-menu-content.svelte'
+  import DropdownMenuLabel from '../../actions/dropdown-menu/dropdown-menu-label.svelte'
+  import DropdownMenuSeparator from '../../actions/dropdown-menu/dropdown-menu-separator.svelte'
+  import DropdownMenuTrigger from '../../actions/dropdown-menu/dropdown-menu-trigger.svelte'
+
+  let { table }: DataTableColumnToggleProps<TData> = $props()
+
+  const columns = $derived(
+    table
+      .getAllColumns()
+      .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide()),
+  )
+</script>
+
+<DropdownMenu>
+  <DropdownMenuTrigger>
+    {#snippet child({ props })}
+      <Button
+        variant="ghost"
+        tone="neutral"
+        iconOnly
+        aria-label="Toggle columns"
+        class="border-border bg-card size-8 rounded-full border"
+        {...props}
+      >
+        <Columns3Icon class="size-4" />
+      </Button>
+    {/snippet}
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end" class="min-w-40">
+    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    {#each columns as column (column.id)}
+      <DropdownMenuCheckboxItem
+        class="capitalize"
+        checked={column.getIsVisible()}
+        onCheckedChange={(value) => column.toggleVisibility(!!value)}
+      >
+        {column.id.replace(/_/g, ' ')}
+      </DropdownMenuCheckboxItem>
+    {/each}
+  </DropdownMenuContent>
+</DropdownMenu>

package/dist/components/data-display/data-table/data-table-column-toggle.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTableInstance } from './data-table.svelte';
+/**
+ * The columns a reader can hide, as checkboxes in a menu. Icon-only: a label
+ * beside the glyph would wrap a toolbar that already holds several filters.
+ */
+export type DataTableColumnToggleProps<TData extends RowData> = {
+    table: DataTableInstance<TData>;
+};
+declare function $$render<TData extends RowData>(): {
+    props: DataTableColumnToggleProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableColumnToggle: $$IsomorphicComponent;
+type DataTableColumnToggle<TData extends RowData> = InstanceType<typeof DataTableColumnToggle<TData>>;
+export default DataTableColumnToggle;

package/dist/components/data-display/data-table/data-table-export-menu.svelte

@@ -0,0 +1,93 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-export-menu.tsx`
+  Diverged: the trigger drops `font-mono`, which the package does not use. A
+    passed `onPrint` counts as an action, so a print-only menu shows; React
+    counted only CSV and copy, and its own print-only story drew nothing.
+    Lucide's printer, file-spreadsheet, copy and chevron-down for Tabler's.
+-->
+<script lang="ts" module>
+  /**
+   * Export actions behind one trigger. Each item shows only when the page wires
+   * it, so the menu never offers something that does nothing.
+   */
+  export type DataTableExportMenuProps = {
+    /** Opens the page's full export flow, usually a dialog queuing a server job. */
+    onExportCsv?: () => void
+    /**
+     * The loaded rows as tab-separated text, ready to paste into a spreadsheet.
+     * The page builds it, since only it knows which fields are worth copying.
+     */
+    getCopyText?: () => string
+    /** Defaults to printing the window. */
+    onPrint?: () => void
+  }
+</script>
+
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+  import CopyIcon from '@lucide/svelte/icons/copy'
+  import FileSpreadsheetIcon from '@lucide/svelte/icons/file-spreadsheet'
+  import PrinterIcon from '@lucide/svelte/icons/printer'
+  import { toast } from 'svelte-sonner'
+
+  import Button from '../../actions/button/button.svelte'
+  import DropdownMenu from '../../actions/dropdown-menu/dropdown-menu.svelte'
+  import DropdownMenuContent from '../../actions/dropdown-menu/dropdown-menu-content.svelte'
+  import DropdownMenuItem from '../../actions/dropdown-menu/dropdown-menu-item.svelte'
+  import DropdownMenuTrigger from '../../actions/dropdown-menu/dropdown-menu-trigger.svelte'
+
+  let { onExportCsv, getCopyText, onPrint }: DataTableExportMenuProps = $props()
+
+  async function copy() {
+    if (!getCopyText) return
+    const text = getCopyText()
+    if (!text) {
+      toast.error('Nothing to copy', { description: 'Load some rows first, then try again.' })
+      return
+    }
+    try {
+      await navigator.clipboard.writeText(text)
+      toast.success('Copied to clipboard')
+    } catch {
+      // Refused without a secure context or permission.
+      toast.error('Could not copy', { description: 'Your browser blocked clipboard access.' })
+    }
+  }
+
+  const hasAnyAction = $derived(Boolean(onExportCsv || getCopyText || onPrint))
+</script>
+
+{#if hasAnyAction}
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      {#snippet child({ props })}
+        <Button
+          variant="ghost"
+          class="bg-input/50 hover:bg-input h-8 gap-1.5 rounded-2xl border border-transparent px-3 text-sm font-normal"
+          {...props}
+        >
+          Export
+          <ChevronDownIcon class="size-4 opacity-60" />
+        </Button>
+      {/snippet}
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="min-w-40">
+      <DropdownMenuItem onSelect={() => (onPrint ?? (() => window.print()))()}>
+        <PrinterIcon class="size-4" />
+        Print
+      </DropdownMenuItem>
+      {#if onExportCsv}
+        <DropdownMenuItem onSelect={onExportCsv}>
+          <FileSpreadsheetIcon class="size-4" />
+          CSV
+        </DropdownMenuItem>
+      {/if}
+      {#if getCopyText}
+        <DropdownMenuItem onSelect={() => void copy()}>
+          <CopyIcon class="size-4" />
+          Copy
+        </DropdownMenuItem>
+      {/if}
+    </DropdownMenuContent>
+  </DropdownMenu>
+{/if}

package/dist/components/data-display/data-table/data-table-export-menu.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Export actions behind one trigger. Each item shows only when the page wires
+ * it, so the menu never offers something that does nothing.
+ */
+export type DataTableExportMenuProps = {
+    /** Opens the page's full export flow, usually a dialog queuing a server job. */
+    onExportCsv?: () => void;
+    /**
+     * The loaded rows as tab-separated text, ready to paste into a spreadsheet.
+     * The page builds it, since only it knows which fields are worth copying.
+     */
+    getCopyText?: () => string;
+    /** Defaults to printing the window. */
+    onPrint?: () => void;
+};
+declare const DataTableExportMenu: import("svelte").Component<DataTableExportMenuProps, {}, "">;
+type DataTableExportMenu = ReturnType<typeof DataTableExportMenu>;
+export default DataTableExportMenu;

package/dist/components/data-display/data-table/data-table-faceted-filter.svelte

@@ -0,0 +1,133 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-faceted-filter.tsx`
+  Diverged: the trigger and the counts drop `font-mono`, which the package does
+    not use; counts are `tabular-nums`. Lucide's chevron-down and check for
+    Tabler's. The column is TanStack Table 9's (R4b-1). The selection is read
+    off the column's filter value, which Svelte tracks; React needed it passed
+    as a prop to re-render, and `selected` stays for a caller who holds it.
+-->
+<script lang="ts" module>
+  import type { Column, RowData } from '@tanstack/svelte-table'
+  import type { Component } from 'svelte'
+
+  import type { DataTableFeatures } from './features.js'
+
+  export type DataTableFacetedFilterOption = {
+    label: string
+    value: string
+    icon?: Component<{ class?: string }>
+  }
+
+  /**
+   * A multi-select facet, drawn as a select: a filled pill summarising the
+   * choice rather than a dashed "add filter" chip, since a row of five dashed
+   * outlines is noisier than the values it filters. One choice shows its name;
+   * more show a count.
+   */
+  export type DataTableFacetedFilterProps<TData extends RowData, TValue> = {
+    column?: Column<DataTableFeatures, TData, TValue>
+    /** Singular noun for the facet: "Status". */
+    title?: string
+    /** Shown when nothing is chosen. Falls back to "All {title}"; pass it where the plural is irregular. */
+    allLabel?: string
+    /** The chosen values, for a caller that holds them. Read off the column otherwise. */
+    selected?: string[]
+    options: DataTableFacetedFilterOption[]
+  }
+</script>
+
+<script lang="ts" generics="TData extends RowData, TValue">
+  import CheckIcon from '@lucide/svelte/icons/check'
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import Command from '../../actions/command/command.svelte'
+  import CommandEmpty from '../../actions/command/command-empty.svelte'
+  import CommandGroup from '../../actions/command/command-group.svelte'
+  import CommandInput from '../../actions/command/command-input.svelte'
+  import CommandItem from '../../actions/command/command-item.svelte'
+  import CommandList from '../../actions/command/command-list.svelte'
+  import Popover from '../../overlays/popover/popover.svelte'
+  import PopoverContent from '../../overlays/popover/popover-content.svelte'
+  import PopoverTrigger from '../../overlays/popover/popover-trigger.svelte'
+
+  let { column, title, allLabel, selected, options }: DataTableFacetedFilterProps<TData, TValue> =
+    $props()
+
+  /**
+   * Counts only from a column with an accessor: TanStack throws computing
+   * faceted values for a display column, and a display column bound to a
+   * server-side filter should cost the counts, nothing more.
+   */
+  const facets = $derived(column?.accessorFn ? column.getFacetedUniqueValues() : undefined)
+  const chosen = $derived(
+    new Set(selected ?? (column?.getFilterValue() as string[] | undefined) ?? []),
+  )
+  const emptyLabel = $derived(allLabel ?? `All ${title?.toLowerCase() ?? 'items'}`)
+  const chosenOptions = $derived(options.filter((option) => chosen.has(option.value)))
+  const triggerLabel = $derived(
+    chosenOptions.length === 0
+      ? emptyLabel
+      : chosenOptions.length === 1
+        ? chosenOptions[0].label
+        : `${chosenOptions.length} selected`,
+  )
+
+  function toggle(value: string) {
+    const next = new Set(chosen)
+    if (next.has(value)) next.delete(value)
+    else next.add(value)
+    column?.setFilterValue(next.size ? [...next] : undefined)
+  }
+</script>
+
+<Popover>
+  <PopoverTrigger>
+    {#snippet child({ props })}
+      <Button
+        variant="ghost"
+        class={cn(
+          'bg-input/50 hover:bg-input h-8 justify-between gap-1.5 rounded-2xl border border-transparent px-3 text-sm font-normal whitespace-nowrap',
+          chosen.size === 0 && 'text-muted-foreground',
+        )}
+        {...props}
+      >
+        <span class="truncate">{triggerLabel}</span>
+        <ChevronDownIcon class="size-4 shrink-0 opacity-60" />
+      </Button>
+    {/snippet}
+  </PopoverTrigger>
+  <PopoverContent class="w-56 p-0" align="start">
+    <Command>
+      <CommandInput placeholder={title} />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup>
+          <CommandItem value={emptyLabel} onSelect={() => column?.setFilterValue(undefined)}>
+            <span class="flex-1">{emptyLabel}</span>
+            {#if chosen.size === 0}
+              <CheckIcon class="size-4 shrink-0" />
+            {/if}
+          </CommandItem>
+          {#each options as option (option.value)}
+            <CommandItem value={option.label} onSelect={() => toggle(option.value)}>
+              {#if option.icon}
+                <option.icon class="text-muted-foreground mr-2 size-4" />
+              {/if}
+              <span class="flex-1 truncate">{option.label}</span>
+              {#if facets?.get(option.value)}
+                <span class="text-muted-foreground text-xs tabular-nums"
+                  >{facets.get(option.value)}</span
+                >
+              {/if}
+              {#if chosen.has(option.value)}
+                <CheckIcon class="size-4 shrink-0" />
+              {/if}
+            </CommandItem>
+          {/each}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  </PopoverContent>
+</Popover>

package/dist/components/data-display/data-table/data-table-faceted-filter.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { Component } from 'svelte';
+import type { DataTableFeatures } from './features.js';
+export type DataTableFacetedFilterOption = {
+    label: string;
+    value: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+};
+/**
+ * A multi-select facet, drawn as a select: a filled pill summarising the
+ * choice rather than a dashed "add filter" chip, since a row of five dashed
+ * outlines is noisier than the values it filters. One choice shows its name;
+ * more show a count.
+ */
+export type DataTableFacetedFilterProps<TData extends RowData, TValue> = {
+    column?: Column<DataTableFeatures, TData, TValue>;
+    /** Singular noun for the facet: "Status". */
+    title?: string;
+    /** Shown when nothing is chosen. Falls back to "All {title}"; pass it where the plural is irregular. */
+    allLabel?: string;
+    /** The chosen values, for a caller that holds them. Read off the column otherwise. */
+    selected?: string[];
+    options: DataTableFacetedFilterOption[];
+};
+declare function $$render<TData extends RowData, TValue>(): {
+    props: DataTableFacetedFilterProps<TData, TValue>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData, TValue> {
+    props(): ReturnType<typeof $$render<TData, TValue>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue>['props']>, ReturnType<__sveltets_Render<TData, TValue>['events']>, ReturnType<__sveltets_Render<TData, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    <TData extends RowData, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTableFacetedFilter: $$IsomorphicComponent;
+type DataTableFacetedFilter<TData extends RowData, TValue> = InstanceType<typeof DataTableFacetedFilter<TData, TValue>>;
+export default DataTableFacetedFilter;

package/dist/components/data-display/data-table/data-table-row-actions.svelte

@@ -0,0 +1,79 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-row-actions.tsx`
+  Diverged: Lucide's ellipsis for Tabler's dots. Takes `class`, as every
+    component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  /**
+   * The ⋯ at the end of a table row, and the menu it opens: a round, soft,
+   * neutral button whose hover dims its own chip, never `--accent`, which means
+   * the active nav row. The menu opens leftward (`align="end"`) to stay inside
+   * the table.
+   *
+   * The wrapper stops the click, so opening the menu does not also open a row
+   * that navigates on click.
+   */
+  export type DataTableRowActionsProps = {
+    /** The menu's items: `DropdownMenuItem`s, separators, a destructive item last. */
+    children: Snippet
+    /**
+     * Announced in place of the glyph. Name the row when you can ("Actions for
+     * Riverside") so a screen reader down the column hears which row it is.
+     */
+    label?: string
+    /**
+     * For a row with no actions it may take. The trigger stays, so the column
+     * keeps its rhythm, and `label` says why it is off.
+     */
+    disabled?: boolean
+    class?: string
+  }
+</script>
+
+<script lang="ts">
+  import EllipsisIcon from '@lucide/svelte/icons/ellipsis'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import DropdownMenu from '../../actions/dropdown-menu/dropdown-menu.svelte'
+  import DropdownMenuContent from '../../actions/dropdown-menu/dropdown-menu-content.svelte'
+  import DropdownMenuTrigger from '../../actions/dropdown-menu/dropdown-menu-trigger.svelte'
+
+  let {
+    children,
+    label = 'Open menu',
+    disabled = false,
+    class: className,
+  }: DataTableRowActionsProps = $props()
+</script>
+
+<!-- Not a control: it only keeps the row's own click from firing under the button. -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<!-- biome-ignore lint/a11y/noStaticElementInteractions: not a control; it stops the row's click under the button -->
+<!-- biome-ignore lint/a11y/useKeyWithClickEvents: the button inside is the control, with its own keyboard handling -->
+<div
+  data-slot="data-table-row-actions"
+  class={cn('flex justify-end', className)}
+  onclick={(event) => event.stopPropagation()}
+>
+  <DropdownMenu>
+    <DropdownMenuTrigger {disabled}>
+      {#snippet child({ props })}
+        <Button
+          variant="soft"
+          tone="neutral"
+          size="sm"
+          iconOnly
+          aria-label={label}
+          class="rounded-full"
+          {...props}
+        >
+          <EllipsisIcon />
+        </Button>
+      {/snippet}
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">{@render children()}</DropdownMenuContent>
+  </DropdownMenu>
+</div>