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

package/dist/components/TableSheets/TableSheetButton.svelte

@@ -0,0 +1,44 @@
+<!--
+  The button both card-mode sheets open from. The count is a badge inside the
+  label, and is spoken as words — "Filter, 2 applied" — because a bare "2"
+  announced after "Filter" says nothing about what it counts.
+-->
+<script lang="ts">
+  import { Button } from "@ui-organized/svelte";
+  import type { IconComponent, IconName } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+
+  let {
+    icon,
+    label,
+    count,
+    unit,
+    class: className,
+    ...rest
+  }: {
+    icon: IconName | IconComponent;
+    label: string;
+    /** What is applied. Drawn as a badge from 1 up, and spoken as words. */
+    count: number;
+    /** The word the count is read with: "2 applied". */
+    unit: string;
+    class?: string;
+    [key: string]: unknown;
+  } = $props();
+
+  const table = getTable();
+</script>
+
+<Button
+  {...rest as Record<string, never>}
+  intent="secondary"
+  size={table.size}
+  {icon}
+  class={className}
+>
+  {label}
+  {#if count > 0}
+    <span class="data-table__badge" aria-hidden="true">{count}</span>
+    <span class="data-table__sr-only">{`, ${count} ${unit}`}</span>
+  {/if}
+</Button>

package/dist/components/TableSheets/TableSheetButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { IconComponent, IconName } from "@ui-organized/svelte";
+type $$ComponentProps = {
+    icon: IconName | IconComponent;
+    label: string;
+    /** What is applied. Drawn as a badge from 1 up, and spoken as words. */
+    count: number;
+    /** The word the count is read with: "2 applied". */
+    unit: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const TableSheetButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableSheetButton = ReturnType<typeof TableSheetButton>;
+export default TableSheetButton;
+//# sourceMappingURL=TableSheetButton.svelte.d.ts.map

package/dist/components/TableSheets/TableSheetButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSheetButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSheets/TableSheetButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGnE,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AA6BJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/TableSheets/TableSortSheet.svelte

@@ -0,0 +1,100 @@
+<!--
+  Card mode's sort control: a labelled button that opens a bottom sheet holding
+  every sorting control, with the applied sort counted on the button.
+
+  A menu anchored to a 36px icon is a desktop affordance. On a phone the menu
+  covers the cards it is sorting; a sheet gives the controls the full width and
+  puts them within thumb reach.
+-->
+<script lang="ts">
+  import {
+    Button,
+    RadioGroup,
+    Sheet,
+    SheetClose,
+    SheetContent,
+    SheetFooter,
+    SheetTitle,
+    SheetTrigger,
+  } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import TableSheetButton from "./TableSheetButton.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { label = "Sort", class: className }: { label?: string; class?: string } = $props();
+  const table = getTable();
+
+  const columns = $derived(table.table.getAllLeafColumns().filter((c) => c.getCanSort()));
+  const sorting = $derived(table.state.sorting ?? []);
+  const active = $derived(sorting[0]);
+  const activeId = $derived(active?.id ?? "");
+  const direction = $derived(active?.desc ? "desc" : "asc");
+  const triggerIcon = $derived(glyph(activeId ? (active?.desc ? "sort-desc" : "sort-asc") : "sort"));
+
+  const headerOf = (column: (typeof columns)[number]) =>
+    typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+</script>
+
+{#if columns.length > 0}
+  <Sheet>
+    <SheetTrigger>
+      {#snippet asChild(props)}
+        <TableSheetButton
+          {...props()}
+          icon={triggerIcon}
+          {label}
+          count={sorting.length}
+          unit="applied"
+          class={className}
+        />
+      {/snippet}
+    </SheetTrigger>
+    <SheetContent side="bottom" size="lg" class="data-table__sheet">
+      <SheetTitle>{label}</SheetTitle>
+      <div class="data-table__sheet-body">
+        <RadioGroup
+          label="Sort by"
+          options={columns.map((column) => ({ value: column.id, label: headerOf(column) }))}
+          value={activeId}
+          onValueChange={(id) => table.table.setSorting([{ id, desc: direction === "desc" }])}
+        />
+        <!--
+          Disabled rather than hidden, as in the desktop menu: the sheet keeps
+          its shape, so the second visit finds the controls where they were.
+          Nothing is checked until there is a sort to have a direction: a
+          pre-ticked "Ascending" over nothing reads as a sort that is applied.
+        -->
+        <RadioGroup
+          label="Direction"
+          orientation="horizontal"
+          disabled={!activeId}
+          options={[
+            { value: "asc", label: "Ascending" },
+            { value: "desc", label: "Descending" },
+          ]}
+          value={activeId ? direction : ""}
+          onValueChange={(next) => {
+            if (activeId) table.table.setSorting([{ id: activeId, desc: next === "desc" }]);
+          }}
+        />
+      </div>
+      <SheetFooter>
+        <Button
+          intent="ghost"
+          size="lg"
+          disabled={!activeId}
+          onclick={() => table.table.setSorting([])}
+        >
+          Clear sort
+        </Button>
+        <SheetClose>
+          {#snippet asChild(props)}
+            <Button {...(props() as Record<string, never>)} intent="primary" size="lg">
+              Done
+            </Button>
+          {/snippet}
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+{/if}

package/dist/components/TableSheets/TableSortSheet.svelte.d.ts

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

package/dist/components/TableSheets/TableSortSheet.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSortSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSheets/TableSortSheet.svelte.ts"],"names":[],"mappings":"AAiBC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA2D7D,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

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

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

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

package/dist/components/TableSheets/index.js

@@ -0,0 +1,3 @@
+export { default as TableSheetButton } from "./TableSheetButton.svelte";
+export { default as TableSortSheet } from "./TableSortSheet.svelte";
+export { default as TableFilterSheet } from "./TableFilterSheet.svelte";

package/dist/components/TableStates/TableEmpty.svelte

@@ -0,0 +1,35 @@
+<!--
+  Empty, loading and error all live *inside* `<tbody>` rather than replacing the
+  table.
+
+  Keeping the header on screen keeps the column widths, the scroll position and
+  the filter controls exactly where they were — so clearing a filter that emptied
+  the table does not also move every control the user was about to click.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { clsx } from "clsx";
+  import { getTable } from "../../core/tableContext.js";
+
+  let {
+    title,
+    description,
+    class: className,
+    action,
+  }: { title?: string; description?: string; class?: string; action?: Snippet } = $props();
+
+  const table = getTable();
+  const empty = $derived(table.options.empty);
+  const heading = $derived(title ?? empty?.title ?? "Nothing to show");
+  const detail = $derived(description ?? empty?.description);
+</script>
+
+<tr class="data-table__row">
+  <td class={clsx("data-table__state-cell", className)} colspan={table.chrome.colCount}>
+    <div class="data-table__state">
+      <span class="data-table__state-title">{heading}</span>
+      {#if detail}<span class="data-table__state-description">{detail}</span>{/if}
+      {#if action}<div class="data-table__state-actions">{@render action()}</div>{/if}
+    </div>
+  </td>
+</tr>

package/dist/components/TableStates/TableEmpty.svelte.d.ts

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

package/dist/components/TableStates/TableEmpty.svelte.d.ts.map

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

package/dist/components/TableStates/TableError.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { clsx } from "clsx";
+  import { getTable } from "../../core/tableContext.js";
+
+  let {
+    title = "Could not load this table",
+    class: className,
+    children,
+  }: { title?: string; class?: string; children?: Snippet } = $props();
+
+  const table = getTable();
+</script>
+
+<tr class="data-table__row">
+  <td class={clsx("data-table__state-cell", className)} colspan={table.chrome.colCount}>
+    <!--
+      `alert` rather than a plain region: the error arrives after the user has
+      moved on, so it has to announce itself.
+    -->
+    <div class="data-table__state data-table__state--error" role="alert">
+      <span class="data-table__state-title">{title}</span>
+      {#if children}<span class="data-table__state-description">{@render children()}</span>{/if}
+    </div>
+  </td>
+</tr>

package/dist/components/TableStates/TableError.svelte.d.ts

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

package/dist/components/TableStates/TableError.svelte.d.ts.map

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

package/dist/components/TableStates/TableLoading.svelte

@@ -0,0 +1,33 @@
+<!--
+  Skeleton rows sized to the real row height, so the table does not resize when
+  the data lands — which is the entire reason to prefer a skeleton to a spinner.
+  (There is no Spinner in the library, which settles it anyway.)
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { Skeleton } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+
+  let { rows = 8, class: className }: { rows?: number; class?: string } = $props();
+  const table = getTable();
+  const columns = $derived(table.table.getVisibleLeafColumns());
+  const bars = $derived(Array.from({ length: rows }, (_, index) => index));
+</script>
+
+{#each bars as index (index)}
+  <tr class="data-table__row" aria-hidden="true">
+    {#each columns as column (column.id)}
+      <td class={clsx("data-table__skeleton-cell", className)}>
+        <!--
+          Varied but deterministic: identical bars read as a progress bar, and a
+          random width changes on every render.
+        -->
+        <Skeleton
+          variant="text"
+          width={`${55 + ((column.id.length * 7) % 35)}%`}
+          height={table.size === "sm" ? 10 : 12}
+        />
+      </td>
+    {/each}
+  </tr>
+{/each}

package/dist/components/TableStates/TableLoading.svelte.d.ts

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

package/dist/components/TableStates/TableLoading.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLoading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableStates/TableLoading.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA0B5D,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

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

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

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

package/dist/components/TableStates/index.js

@@ -0,0 +1,3 @@
+export { default as TableEmpty } from "./TableEmpty.svelte";
+export { default as TableLoading } from "./TableLoading.svelte";
+export { default as TableError } from "./TableError.svelte";

package/dist/components/TableSubBar/TableSubBar.svelte

@@ -0,0 +1,34 @@
+<!--
+  The row under the toolbar: what is filtered.
+
+  The selection's bulk actions used to share this line. They now replace the
+  toolbar's own controls while anything is selected (see `TableToolbar`), so
+  acting on the selection happens in the row the user was already reading.
+
+  It renders nothing at all until there is a filter to show, so an empty row
+  never takes a slice of the table's `gap` — and nothing in card mode, where
+  the filter sheet holds them.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { getTable } from "../../core/tableContext.js";
+  import { TableFilters } from "../TableFilters/index.js";
+
+  let { class: className }: { class?: string } = $props();
+  const table = getTable();
+
+  // In card mode every filter lives in the filter sheet, and the toolbar's
+  // Filter button counts them; a chips row would repeat it above a list that is
+  // already short of room.
+  const hasFilters = $derived(
+    table.options.filterable !== false &&
+      table.filters.conditions.length > 0 &&
+      table.mode !== "cards",
+  );
+</script>
+
+{#if hasFilters}
+  <div class={clsx("data-table__subbar", className)}>
+    <TableFilters />
+  </div>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSubBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableSubBar/TableSubBar.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA4B7C,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

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

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

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

package/dist/components/TableSubBar/index.js

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

package/dist/components/TableToolbar/TableActions.svelte

@@ -0,0 +1,40 @@
+<!--
+  The developer's own header buttons — "New user", "Import", "Refresh".
+
+  Rendered as real buttons rather than folded into a menu, because these are the
+  actions a page is *for*: a primary action hidden behind an overflow menu is a
+  primary action nobody finds. Each carries whatever intent the developer gave
+  it, so exactly one of them can be the page's call to action and the rest can
+  recede.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { Button } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import type { TableAction } from "../../core/types.js";
+
+  let { actions, class: className }: { actions?: TableAction[]; class?: string } = $props();
+  const table = getTable();
+  const items = $derived(actions ?? table.options.actions ?? []);
+
+  // An icon-only button drops its visible label but keeps its accessible one —
+  // the label is the whole name either way.
+  const isIconOnly = (action: TableAction) => action.iconOnly === true && action.icon !== undefined;
+</script>
+
+{#if items.length > 0}
+  <div class={clsx("data-table__toolbar-actions", className)}>
+    {#each items as action (action.id)}
+      <Button
+        intent={action.intent ?? "tertiary"}
+        size={table.size}
+        icon={action.icon}
+        disabled={action.disabled}
+        aria-label={isIconOnly(action) ? action.label : undefined}
+        onclick={() => void action.onRun()}
+      >
+        {#if !isIconOnly(action)}{action.label}{/if}
+      </Button>
+    {/each}
+  </div>
+{/if}

package/dist/components/TableToolbar/TableActions.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TableAction } from "../../core/types.js";
+type $$ComponentProps = {
+    actions?: TableAction[];
+    class?: string;
+};
+declare const TableActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableActions = ReturnType<typeof TableActions>;
+export default TableActions;
+//# sourceMappingURL=TableActions.svelte.d.ts.map

package/dist/components/TableToolbar/TableActions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableActions.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEtD,KAAK,gBAAgB,GAAI;IAAE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA6BtE,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/TableToolbar/TableExportMenu.svelte

@@ -0,0 +1,60 @@
+<!--
+  Export scopes are separate items rather than one button, because "download"
+  means three different things depending on what is filtered and what is ticked —
+  and silently picking one is how an export loses rows.
+-->
+<script lang="ts">
+  import {
+    Button,
+    Menu,
+    MenuContent,
+    MenuItem,
+    MenuSeparator,
+    MenuTrigger,
+  } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { label = "Export", class: className }: { label?: string; class?: string } = $props();
+  const table = getTable();
+  const hasSelection = $derived(table.selection.count > 0);
+</script>
+
+<Menu>
+  <MenuTrigger>
+    {#snippet asChild(props)}
+      <Button
+        {...(props() as Record<string, never>)}
+        intent="secondary"
+        size={table.size}
+        icon={glyph("download")}
+        aria-label={label}
+      />
+    {/snippet}
+  </MenuTrigger>
+  <MenuContent align="end" class={className}>
+    <MenuItem value="csv-view" icon={glyph("download")} onSelect={() => table.exportCsv("view")}>
+      Download this view (CSV)
+    </MenuItem>
+    <MenuItem
+      value="csv-selected"
+      icon={glyph("download")}
+      disabled={!hasSelection}
+      onSelect={() => table.exportCsv("selected")}
+    >
+      Download selected rows (CSV)
+    </MenuItem>
+    <MenuItem value="csv-all" icon={glyph("download")} onSelect={() => table.exportCsv("all")}>
+      Download all rows (CSV)
+    </MenuItem>
+    <MenuSeparator />
+    <MenuItem
+      value="copy"
+      icon={glyph("copy")}
+      disabled={!hasSelection}
+      onSelect={() => void table.copySelection("selected")}
+    >
+      Copy selection to clipboard
+    </MenuItem>
+  </MenuContent>
+</Menu>

package/dist/components/TableToolbar/TableExportMenu.svelte.d.ts

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

package/dist/components/TableToolbar/TableExportMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExportMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableExportMenu.svelte.ts"],"names":[],"mappings":"AAcC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAqC7D,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/TableToolbar/TableReorderToggle.svelte

@@ -0,0 +1,27 @@
+<!--
+  Enters and leaves reorder mode, for `reorderable: "toggle"`. Absent for any
+  other setting, and in card mode, which has no headers to move.
+
+  The label says what a press does next — "Reorder", then "Done" — rather than
+  carrying a pressed state, so the button reads the same to a screen reader as
+  it does on screen, and "Done" is the obvious way out.
+-->
+<script lang="ts">
+  import { Button } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+
+  let { class: className }: { class?: string } = $props();
+  const table = getTable();
+</script>
+
+{#if table.reorder.mode === "toggle" && table.mode !== "cards"}
+  <Button
+    intent={table.reorder.active ? "primary" : "secondary"}
+    size={table.size}
+    class={className}
+    aria-label={table.reorder.active ? "Done reordering columns" : "Reorder columns"}
+    onclick={() => table.reorder.setActive(!table.reorder.active)}
+  >
+    {table.reorder.active ? "Done" : "Reorder"}
+  </Button>
+{/if}

package/dist/components/TableToolbar/TableReorderToggle.svelte.d.ts

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

package/dist/components/TableToolbar/TableReorderToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableReorderToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableToolbar/TableReorderToggle.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAkB7C,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/TableToolbar/TableScrollButtons.svelte

@@ -0,0 +1,54 @@
+<!--
+  Left and right, for a table wider than its viewport.
+
+  The scrollbar is the primary affordance; this is the *visible* one. A mouse
+  with no horizontal wheel, a thin overlay scrollbar that only paints while it is
+  moving, and a pinned first column that makes a half-cut column at the edge look
+  deliberate all leave "there are more columns over there" as something the user
+  has to guess at.
+
+  Absent rather than disabled when everything fits: a pair of permanently dead
+  buttons in every toolbar is worse noise than no buttons at all. At the ends of
+  the scroll they *are* disabled — the same call `Pagination` makes for its own
+  prev/next, so the two read the same way.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { Button } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let {
+    leftLabel = "Scroll left",
+    rightLabel = "Scroll right",
+    class: className,
+  }: { leftLabel?: string; rightLabel?: string; class?: string } = $props();
+
+  const table = getTable();
+  const scroll = $derived(table.scroll.state);
+</script>
+
+<!--
+  Grouped, and tighter than the toolbar's own gap: two halves of one control
+  rather than two more buttons in the row.
+-->
+{#if scroll.overflowing}
+  <div class={clsx("data-table__scroll-buttons", className)}>
+    <Button
+      intent="secondary"
+      size={table.size}
+      icon={glyph("chevron-left")}
+      aria-label={leftLabel}
+      disabled={!scroll.canScrollLeft}
+      onclick={() => table.scroll.by(-1)}
+    />
+    <Button
+      intent="secondary"
+      size={table.size}
+      icon={glyph("chevron-right")}
+      aria-label={rightLabel}
+      disabled={!scroll.canScrollRight}
+      onclick={() => table.scroll.by(1)}
+    />
+  </div>
+{/if}

package/dist/components/TableToolbar/TableScrollButtons.svelte.d.ts

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