@ui-organized/svelte-table 0.0.0-stage → 6.0.0

package/dist/components/Table/TableViewport.svelte

@@ -0,0 +1,69 @@
+<!--
+  The scroll container and the `<table>` element, which are inseparable: a
+  viewport with two tables in it means nothing, and `<caption>` and `<colgroup>`
+  have to be emitted between them.
+-->
+<script lang="ts">
+  import { TableSelectionFooter } from "../TableSelectionFooter/index.js";
+  import type { Snippet } from "svelte";
+  import { clsx } from "clsx";
+  import {
+    getCaptionProps,
+    getColProps,
+    getTableProps,
+    getViewportProps,
+  } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { elementRef } from "../../core/elementRef.js";
+  import { svelteProps } from "../../core/props.js";
+
+  let {
+    class: className,
+    maxHeight,
+    children,
+  }: { class?: string; maxHeight?: number | string; children?: Snippet } = $props();
+
+  const table = getTable();
+  const viewport = $derived(getViewportProps(table.chrome));
+  const tableProps = $derived(getTableProps(table.chrome));
+  const caption = $derived(getCaptionProps(table.captionVisible));
+  const columns = $derived(table.table.getVisibleLeafColumns());
+
+  const lengthOf = (value: number | string) => (typeof value === "number" ? `${value}px` : value);
+  const cap = $derived(maxHeight ?? table.options.maxHeight);
+  const style = $derived(
+    cap === undefined ? undefined : `--data-table-max-height: ${lengthOf(cap)}`,
+  );
+</script>
+
+<div
+  {...svelteProps(viewport)}
+  class={clsx(viewport.className, className)}
+  {style}
+  use:elementRef={table.viewportRef}
+>
+  <!--
+    One key handler for the whole grid rather than one per cell: the cursor is
+    table state, so the key only has to reach the table. It sits on the element
+    that carries `role="grid"`, not on the scroll container — which is also what
+    stops it being a keyboard handler on a div with no role at all.
+  -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <table
+    {...svelteProps(tableProps)}
+    onkeydown={(event) => (table.interactive ? table.onGridKeyDown(event) : undefined)}
+  >
+    <!-- First child of <table>, per the content model. -->
+    <caption {...svelteProps(caption)}>{table.label}</caption>
+    <colgroup>
+      {#each columns as column (column.id)}
+        <col {...svelteProps(getColProps(table.columnWidths[column.id]))} />
+      {/each}
+    </colgroup>
+    {@render children?.()}
+  </table>
+  <!-- After the table, inside the scroll container: it sticks to the
+       viewport's bottom edge, so it costs a capped table scroll length rather
+       than page height. -->
+  <TableSelectionFooter />
+</div>

package/dist/components/Table/TableViewport.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    maxHeight?: number | string;
+    children?: Snippet;
+};
+declare const TableViewport: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableViewport = ReturnType<typeof TableViewport>;
+export default TableViewport;
+//# sourceMappingURL=TableViewport.svelte.d.ts.map

package/dist/components/Table/TableViewport.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableViewport.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/TableViewport.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAYrC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAiD9F,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Table/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The parts, flat-exported — `TableHeader`, not `Table.Header`. That is the
+ * repo's convention everywhere else (`DialogContent`, `MenuItem`) and there is
+ * no reason for the table to be the exception.
+ *
+ * The DOM they compose to:
+ *
+ *   <Table>              <div class="data-table">        root, size + variant
+ *     <TableToolbar>     …
+ *     <TableViewport>    <div class="data-table__viewport"><table>
+ *       <TableHeader>    <thead>
+ *       <TableBody>      <tbody>   spacer / rows / spacer
+ *     <TablePagination>
+ */
+export { default as Table } from "./Table.svelte";
+export { default as TableViewport } from "./TableViewport.svelte";
+export { default as TableHeader } from "./TableHeader.svelte";
+export { default as TableHeadCell } from "./TableHeadCell.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableRow } from "./TableRow.svelte";
+export { default as TableCell } from "./TableCell.svelte";
+export { default as TableFooter } from "./TableFooter.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Table/index.js

@@ -0,0 +1,22 @@
+/**
+ * The parts, flat-exported — `TableHeader`, not `Table.Header`. That is the
+ * repo's convention everywhere else (`DialogContent`, `MenuItem`) and there is
+ * no reason for the table to be the exception.
+ *
+ * The DOM they compose to:
+ *
+ *   <Table>              <div class="data-table">        root, size + variant
+ *     <TableToolbar>     …
+ *     <TableViewport>    <div class="data-table__viewport"><table>
+ *       <TableHeader>    <thead>
+ *       <TableBody>      <tbody>   spacer / rows / spacer
+ *     <TablePagination>
+ */
+export { default as Table } from "./Table.svelte";
+export { default as TableViewport } from "./TableViewport.svelte";
+export { default as TableHeader } from "./TableHeader.svelte";
+export { default as TableHeadCell } from "./TableHeadCell.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableRow } from "./TableRow.svelte";
+export { default as TableCell } from "./TableCell.svelte";
+export { default as TableFooter } from "./TableFooter.svelte";

package/dist/components/TableCards/TableCard.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" generics="T extends RowData">
+  import { clsx } from "clsx";
+  import { FlexRender } from "@tanstack/svelte-table";
+  import { Checkbox } from "@ui-organized/svelte";
+  import type { RowData, TableRowModel } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { elementRef } from "../../core/elementRef.js";
+  import { TableRowActions } from "../TableRowActions/index.js";
+
+  let {
+    row,
+    index,
+    fields,
+    class: className,
+  }: { row: TableRowModel<T>; index: number; fields: string[]; class?: string } = $props();
+
+  const table = getTable<T>();
+  const selected = $derived(table.selection.isSelected(row.id));
+  const cells = $derived(row.getVisibleCells());
+  const primaryCell = $derived(
+    table.primaryColumnId
+      ? cells.find((cell) => cell.column.id === table.primaryColumnId)
+      : undefined,
+  );
+  const clickable = $derived(
+    Boolean(table.options.detail) || Boolean(table.options.onRowClick),
+  );
+  const titleText = $derived(
+    primaryCell ? String(primaryCell.getValue() ?? row.id) : row.id,
+  );
+  const cellFor = (columnId: string) => cells.find((cell) => cell.column.id === columnId);
+  const headerFor = (columnId: string) => {
+    const header = table.table.getColumn(columnId)?.columnDef.header;
+    return typeof header === "string" ? header : columnId;
+  };
+
+  const measure = (element: HTMLElement | null) => {
+    if (table.virtual.enabled && element) table.virtual.virtualizer.measureElement(element);
+  };
+</script>
+
+<li
+  class={clsx("data-table__card", selected && "data-table__card--selected", className)}
+  data-index={index}
+  data-row-id={row.id}
+  use:elementRef={measure}
+>
+  <!--
+    Title first, then the row's controls at the top-right corner: the actions
+    menu, and the checkbox last, in the corner a thumb reaches and where a
+    ticked card is easiest to scan for down a list.
+  -->
+  <div class="data-table__card-header">
+    <!--
+      A button rather than a clickable card: a card is not an interactive
+      element, and making one is how a keyboard user loses the row.
+    -->
+    {#if clickable}
+      <button
+        type="button"
+        class="data-table__card-title data-table__sort-button"
+        onclick={() => table.activate(row)}
+      >
+        {#if primaryCell}<FlexRender cell={primaryCell} />{:else}{row.id}{/if}
+      </button>
+    {:else}
+      <span class="data-table__card-title">
+        {#if primaryCell}<FlexRender cell={primaryCell} />{:else}{row.id}{/if}
+      </span>
+    {/if}
+    {#if table.options.rowActions?.length || table.selection.mode !== "none"}
+      <span class="data-table__card-controls">
+        {#if table.options.rowActions?.length}
+          <TableRowActions row={row.original} label={`Actions for ${titleText}`} />
+        {/if}
+        {#if table.selection.mode !== "none"}
+          <Checkbox
+            checked={selected}
+            aria-label={`Select ${titleText}`}
+            onCheckedChange={(checked) => table.selection.toggle(row.id, checked)}
+          />
+        {/if}
+      </span>
+    {/if}
+  </div>
+
+  <dl class="data-table__card-fields">
+    {#each fields as columnId (columnId)}
+      {@const cell = cellFor(columnId)}
+      {#if cell}
+        <dt class="data-table__card-label">{headerFor(columnId)}</dt>
+        <dd class="data-table__card-value"><FlexRender {cell} /></dd>
+      {/if}
+    {/each}
+  </dl>
+</li>

package/dist/components/TableCards/TableCard.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { RowData, TableRowModel } from "@ui-organized/table-core";
+declare function $$render<T extends RowData>(): {
+    props: {
+        row: TableRowModel<T>;
+        index: number;
+        fields: string[];
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableCard: $$IsomorphicComponent;
+type TableCard<T extends RowData> = InstanceType<typeof TableCard<T>>;
+export default TableCard;
+//# sourceMappingURL=TableCard.svelte.d.ts.map

package/dist/components/TableCards/TableCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableCards/TableCard.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIvE,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;aAQA,aAAa,CAAC,CAAC,CAAC;eAAS,MAAM;gBAAU,MAAM,EAAE;gBAAU,MAAM;;;;;;EAuEqB;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,OAAO;IACrC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5Y,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,eAAe,SAAS,CAAC"}

package/dist/components/TableCards/TableCards.svelte

@@ -0,0 +1,61 @@
+<!--
+  Card mode: one card per row, below the breakpoint.
+
+  The table is *replaced*, not hidden — rendering both trees and hiding one with
+  a container query would double the DOM and defeat virtualization on exactly the
+  devices that can least afford it. Selection, row actions and the detail sheet
+  all keep working, because they are table state rather than table markup.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { cardFieldOrder } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { elementRef } from "../../core/elementRef.js";
+  import { TableEmpty } from "../TableStates/index.js";
+  import TableCard from "./TableCard.svelte";
+
+  let { class: className }: { class?: string } = $props();
+  const table = getTable();
+
+  const fields = $derived(cardFieldOrder(table.options.columns));
+  const renderRows = $derived(table.renderRows);
+  const spacers = $derived(
+    table.virtual.enabled ? table.virtual.spacers : { top: 0, bottom: 0 },
+  );
+  const cap = $derived(table.options.maxHeight);
+  const style = $derived(
+    cap === undefined
+      ? undefined
+      : `--data-table-max-height: ${typeof cap === "number" ? `${cap}px` : cap}`,
+  );
+</script>
+
+{#if renderRows.length === 0}
+  <div class={clsx("data-table__cards", className)}>
+    <table class="data-table__table">
+      <caption class="data-table__sr-only">{table.label}</caption>
+      <tbody><TableEmpty /></tbody>
+    </table>
+  </div>
+{:else}
+  <ul
+    class={clsx("data-table__cards", className)}
+    aria-label={table.label}
+    {style}
+    use:elementRef={table.viewportRef}
+  >
+    {#if spacers.top > 0}
+      <li class="data-table__card-spacer" aria-hidden="true" style={`height: ${spacers.top}px`}></li>
+    {/if}
+    {#each renderRows as entry (entry.row.id)}
+      <TableCard row={entry.row} index={entry.index} {fields} />
+    {/each}
+    {#if spacers.bottom > 0}
+      <li
+        class="data-table__card-spacer"
+        aria-hidden="true"
+        style={`height: ${spacers.bottom}px`}
+      ></li>
+    {/if}
+  </ul>
+{/if}

package/dist/components/TableCards/TableCards.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const TableCards: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableCards = ReturnType<typeof TableCards>;
+export default TableCards;
+//# sourceMappingURL=TableCards.svelte.d.ts.map

package/dist/components/TableCards/TableCards.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCards.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableCards/TableCards.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAiD7C,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/TableCards/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TableCards } from "./TableCards.svelte";
+export { default as TableCard } from "./TableCard.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableCards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableCards/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/TableCards/index.js

@@ -0,0 +1,2 @@
+export { default as TableCards } from "./TableCards.svelte";
+export { default as TableCard } from "./TableCard.svelte";

package/dist/components/TableDetailSheet/TableDetailSheet.svelte

@@ -0,0 +1,130 @@
+<!--
+  The row detail panel.
+
+  Core owns prev/next navigation and the dirty guard; this owns the two things
+  that are genuinely the adapter's: returning focus to the row the panel was
+  opened from, and rendering the confirmation as a real `AlertDialog`.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogConfirm,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    Button,
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetTitle,
+  } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { size = "md", class: className }: { size?: "sm" | "md" | "lg"; class?: string } = $props();
+
+  const table = getTable();
+  const config = $derived(table.options.detail);
+  const detail = table.detail;
+  const open = $derived(detail.state.rowId !== null);
+  const row = $derived(detail.row);
+  const position = $derived(detail.state.index >= 0 ? detail.state.index + 1 : 0);
+  const total = $derived(table.rows.length);
+
+  /**
+   * Focus came from a cell; the Sheet moves it into the panel and, on close,
+   * hands it back to `document.body` unless we remember where it was.
+   */
+  let openedFrom = $state<HTMLElement | null>(null);
+  $effect(() => {
+    if (open && !openedFrom) {
+      openedFrom = (document.activeElement as HTMLElement | null) ?? null;
+      return;
+    }
+    if (!open && openedFrom) {
+      const previous = openedFrom;
+      openedFrom = null;
+      // After the Sheet's own close transition has released the focus trap.
+      requestAnimationFrame(() => previous.isConnected && previous.focus());
+    }
+  });
+
+  const render = (value: unknown) => (typeof value === "function" ? undefined : value);
+</script>
+
+{#if config}
+  <Sheet {open} onOpenChange={(next) => !next && detail.close()}>
+    <SheetContent side="right" {size} class={clsx("data-table__detail", className)}>
+      <!--
+        The title clears the Sheet's own close control, which sits in the same
+        top-right corner; the row pager gets its own line rather than competing
+        with it for that space.
+      -->
+      <div class="data-table__detail-header">
+        <SheetTitle>{row ? (config.title?.(row) ?? table.label) : table.label}</SheetTitle>
+        {#if row && config.description}
+          <SheetDescription>{config.description(row)}</SheetDescription>
+        {/if}
+      </div>
+
+      <div class="data-table__detail-nav">
+        <span class="data-table__detail-position">{position} of {total}</span>
+        <Button
+          intent="ghost"
+          size="sm"
+          icon={glyph("chevron-up")}
+          aria-label="Previous row"
+          disabled={!detail.canStep(-1)}
+          onclick={() => detail.step(-1)}
+        />
+        <Button
+          intent="ghost"
+          size="sm"
+          icon={glyph("chevron-down")}
+          aria-label="Next row"
+          disabled={!detail.canStep(1)}
+          onclick={() => detail.step(1)}
+        />
+      </div>
+
+      <div class="data-table__detail-body">
+        {#if row}
+          {@const body = config.render(row)}
+          {#if typeof body === "function"}{@render body()}{:else}{render(body)}{/if}
+        {/if}
+      </div>
+
+      {#if row && config.footer}
+        <SheetFooter>
+          {@const footer = config.footer(row)}
+          {#if typeof footer === "function"}{@render footer()}{:else}{render(footer)}{/if}
+        </SheetFooter>
+      {/if}
+    </SheetContent>
+  </Sheet>
+
+  <!-- The dirty guard. Core decided it was needed; this only asks. -->
+  <AlertDialog
+    open={detail.state.confirming !== null}
+    onOpenChange={(next) => !next && detail.resolveConfirm(false)}
+  >
+    <AlertDialogContent>
+      <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This row has edits that have not been saved. Leaving now loses them.
+      </AlertDialogDescription>
+      <AlertDialogFooter>
+        <AlertDialogCancel onclick={() => detail.resolveConfirm(false)}>
+          Keep editing
+        </AlertDialogCancel>
+        <AlertDialogConfirm intent="destructive" onclick={() => detail.resolveConfirm(true)}>
+          Discard
+        </AlertDialogConfirm>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+{/if}

package/dist/components/TableDetailSheet/TableDetailSheet.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    size?: "sm" | "md" | "lg";
+    class?: string;
+};
+declare const TableDetailSheet: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableDetailSheet = ReturnType<typeof TableDetailSheet>;
+export default TableDetailSheet;
+//# sourceMappingURL=TableDetailSheet.svelte.d.ts.map

package/dist/components/TableDetailSheet/TableDetailSheet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableDetailSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableDetailSheet/TableDetailSheet.svelte.ts"],"names":[],"mappings":"AAsBC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA6FxE,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/TableDetailSheet/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableDetailSheet } from "./TableDetailSheet.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableDetailSheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableDetailSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/TableDetailSheet/index.js

@@ -0,0 +1 @@
+export { default as TableDetailSheet } from "./TableDetailSheet.svelte";

package/dist/components/TableFilters/TableFilterAdd.svelte

@@ -0,0 +1,89 @@
+<!--
+  The field picker, in both the shapes the design uses it: the header's icon-only
+  button (Figma 2298:336) and the filter bar's "＋ Add" (2298:531).
+
+  A `Menu`, like every other menu the table puts in its chrome
+  (`TableViewOptions`, `TableExportMenu`, `TableRowActions`). Picking a field
+  *does* something — it adds a filter and opens that filter's editor — so
+  `role="menu"` with `menuitem` children is the honest semantic.
+
+  No search box: a text input inside `role="menu"` breaks the menu's own keyboard
+  contract, and zag's menu already does typeahead, which is the same affordance
+  without the semantic damage.
+-->
+<script lang="ts">
+  import { Button, Menu, MenuContent, MenuItem, MenuTrigger } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let {
+    label = "Add filter",
+    iconOnly = false,
+    container,
+    class: className,
+  }: {
+    label?: string;
+    iconOnly?: boolean;
+    /**
+     * Where the field menu portals. Inside a modal sheet it has to be the
+     * sheet: a modal hides everything outside itself from assistive tech, and a
+     * menu portalled to <body> is outside it — painted, but unreachable.
+     */
+    container?: HTMLElement | null;
+    class?: string;
+  } = $props();
+
+  const table = getTable();
+  const fields = $derived(table.filters.fields);
+</script>
+
+{#if fields.length > 0}
+  <Menu>
+    <!--
+      The two presentations are the two places this appears, not a free choice:
+      the header's is the funnel that *starts* filtering, the bar's is the plus
+      that adds another to a list that already exists.
+
+      `aria-label` on the trigger also names the menu it opens: zag points the
+      menu's `aria-labelledby` at its trigger, which wins over any `aria-label`
+      set on the content. So the button's name has to be the *menu's* name too —
+      "Add filter", not "Filter".
+    -->
+    <MenuTrigger>
+      {#snippet asChild(props)}
+        {#if iconOnly}
+          <Button
+            {...(props() as Record<string, never>)}
+            intent="secondary"
+            size={table.size}
+            icon={glyph("filter")}
+            aria-label={label}
+            class={className}
+          />
+        {:else}
+          <Button
+            {...(props() as Record<string, never>)}
+            intent="ghost"
+            size="sm"
+            icon={glyph("plus")}
+            class={className}
+          >
+            {label}
+          </Button>
+        {/if}
+      {/snippet}
+    </MenuTrigger>
+    <MenuContent align="end" class="data-table__filter-picker" {container}>
+      <!--
+        A field that already carries conditions stays in the list — several
+        conditions on one column is the point — with a count so it is obvious
+        this adds another rather than replacing.
+      -->
+      {#each fields as field (field.columnId)}
+        <MenuItem value={field.columnId} onSelect={() => table.filters.add(field.columnId)}>
+          {field.count > 0 ? `${field.label} (${field.count})` : field.label}
+        </MenuItem>
+      {/each}
+    </MenuContent>
+  </Menu>
+{/if}

package/dist/components/TableFilters/TableFilterAdd.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    label?: string;
+    iconOnly?: boolean;
+    /**
+     * Where the field menu portals. Inside a modal sheet it has to be the
+     * sheet: a modal hides everything outside itself from assistive tech, and a
+     * menu portalled to <body> is outside it — painted, but unreachable.
+     */
+    container?: HTMLElement | null;
+    class?: string;
+};
+declare const TableFilterAdd: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFilterAdd = ReturnType<typeof TableFilterAdd>;
+export default TableFilterAdd;
+//# sourceMappingURL=TableFilterAdd.svelte.d.ts.map

package/dist/components/TableFilters/TableFilterAdd.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterAdd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableFilters/TableFilterAdd.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6CJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}