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

package/dist/core/createDataTable.test.svelte.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createDataTable.test.svelte.d.ts.map

package/dist/core/createDataTable.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDataTable.test.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/createDataTable.test.svelte.ts"],"names":[],"mappings":""}

package/dist/core/createDataTable.test.svelte.js

@@ -0,0 +1,156 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { flushSync } from "svelte";
+import { createDataTable } from "./createDataTable.svelte.js";
+const MEMBERS = [
+    { id: "1", name: "Ada", role: "Owner", seats: 3 },
+    { id: "2", name: "Grace", role: "Admin", seats: 1 },
+    { id: "3", name: "Alan", role: "Admin", seats: 7 },
+    { id: "4", name: "Katherine", role: "Analyst", seats: 2 },
+];
+const COLUMNS = [
+    { accessorKey: "name", header: "Name", meta: { primary: true, filter: true } },
+    { accessorKey: "role", header: "Role", meta: { filter: { type: "enum" } } },
+    { accessorKey: "seats", header: "Seats", meta: { align: "end" } },
+];
+describe("createDataTable", () => {
+    let dispose = null;
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => {
+        dispose?.();
+        dispose = null;
+        vi.useRealTimers();
+    });
+    /**
+     * `$effect.root` because the runes inside `createDataTable` need an owner and
+     * there is no component here — the same thing a component's lifetime provides.
+     */
+    function mount(overrides = {}) {
+        let options = $state({
+            data: MEMBERS,
+            columns: COLUMNS,
+            label: "Members",
+            getRowId: (row) => row.id,
+            ...overrides,
+        });
+        let api;
+        dispose = $effect.root(() => {
+            api = createDataTable(() => options);
+        });
+        flushSync();
+        return {
+            get api() {
+                return api;
+            },
+            set: (patch) => {
+                options = { ...options, ...patch };
+                flushSync();
+            },
+        };
+    }
+    it("builds a table from the options it was given", () => {
+        const { api } = mount();
+        expect(api.rows).toHaveLength(4);
+        expect(api.rows.map((row) => row.id)).toEqual(["1", "2", "3", "4"]);
+        expect(api.label).toBe("Members");
+        expect(api.primaryColumnId).toBe("name");
+    });
+    it("follows its options when they change", () => {
+        // The options arrive as a getter precisely so this works; a snapshot taken
+        // at construction would render a correct table that never changes again.
+        const table = mount();
+        table.set({ data: [...MEMBERS, { id: "5", name: "Linus", role: "Admin", seats: 4 }] });
+        expect(table.api.rows).toHaveLength(5);
+        table.set({ size: "lg" });
+        expect(table.api.size).toBe("lg");
+        expect(table.api.chrome.size).toBe("lg");
+    });
+    it("is a plain table until something can be operated", () => {
+        // `interactive` is what decides `role="grid"` and the roving cursor, and it
+        // is derived rather than declared.
+        const table = mount();
+        expect(table.api.interactive).toBe(false);
+        table.set({ selection: "multiple" });
+        expect(table.api.interactive).toBe(true);
+    });
+    it("sorts through the engine", () => {
+        const { api } = mount();
+        api.table.getColumn("name").toggleSorting(false);
+        flushSync();
+        expect(api.rows.map((row) => row.original.name)).toEqual([
+            "Ada",
+            "Alan",
+            "Grace",
+            "Katherine",
+        ]);
+    });
+    it("paginates, and moves when the page is set", () => {
+        // The path the browser gate's "paged forward" scenario drives: a control
+        // calls `setPageIndex`, which lands on `onPaginationChange`, which has to
+        // reach the row model.
+        const { api } = mount({ paginated: true, pageSize: 2 });
+        expect(api.rows).toHaveLength(2);
+        expect(api.rows[0].id).toBe("1");
+        api.table.setPageIndex(1);
+        flushSync();
+        expect(api.rows[0].id).toBe("3");
+        // `absoluteIndex` is what `aria-rowindex` reports, so it counts from the
+        // dataset rather than from the page.
+        expect(api.renderRows[0].absoluteIndex).toBe(2);
+    });
+    it("filters on the deferred value, not the urgent one", async () => {
+        const { api } = mount();
+        api.setSearch("Ada");
+        flushSync();
+        // The control is already showing the new value...
+        expect(api.search).toBe("Ada");
+        // ...and the expensive pass has not run yet.
+        expect(api.rows).toHaveLength(4);
+        await vi.runAllTimersAsync();
+        flushSync();
+        expect(api.rows).toHaveLength(1);
+        expect(api.rows[0].original.name).toBe("Ada");
+    });
+    it("renders seeded filters on the first pass", () => {
+        // No scheduler has run, and none needs to: a table seeded with
+        // `defaultFilters` has to be filtered before anything is scheduled.
+        const { api } = mount({
+            defaultFilters: [{ columnId: "role", operator: "is", values: ["Admin"] }],
+        });
+        expect(api.rows).toHaveLength(2);
+        expect(api.filters.conditions).toHaveLength(1);
+    });
+    /**
+     * The chip's field segment. An enum's values never mean anything on another
+     * column, so moving one starts over on the new column's default operator.
+     */
+    it("moves a condition to another column from the field segment", () => {
+        const { api } = mount({
+            defaultFilters: [{ columnId: "role", operator: "is-any-of", values: ["Admin"] }],
+        });
+        const [condition] = api.filters.conditions;
+        api.filters.changeField(condition.id, "name");
+        flushSync();
+        expect(api.filters.conditions).toEqual([
+            { id: condition.id, columnId: "name", operator: "contains", values: [] },
+        ]);
+    });
+    it("selects rows, and reports what the header checkbox should show", () => {
+        const { api } = mount({ selection: "multiple" });
+        expect(api.selection.header).toEqual({ checked: false, indeterminate: false });
+        api.selection.toggle("1", true);
+        flushSync();
+        expect(api.selection.count).toBe(1);
+        expect(api.selection.isSelected("1")).toBe(true);
+        expect(api.selection.header.indeterminate).toBe(true);
+        api.selection.togglePage(true);
+        flushSync();
+        expect(api.selection.count).toBe(4);
+        expect(api.selection.header).toEqual({ checked: true, indeterminate: false });
+    });
+    it("puts the tab stop in the header when there are no rows", () => {
+        const { api } = mount({ data: [] });
+        // Row -1 is the header, which is still operable (sorting) and still one tab
+        // stop — a body with nothing in it has nowhere to hold one.
+        expect(api.focus.cursor).toEqual({ row: -1, col: 0 });
+    });
+});

package/dist/core/createDeferred.svelte.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Svelte's answer to React's `useDeferredValue`, which Svelte does not have.
+ *
+ * Named `createDeferred` rather than `useDeferred`, which is what the Vue
+ * package calls it: `use*` is a React and Vue convention, and here it only makes
+ * `eslint-plugin-react-hooks` treat a Svelte function as a React hook.
+ *
+ * ── Why this file exists ────────────────────────────────────────────────────
+ *
+ * The React table splits every expensive filter into two values: the condition
+ * list and the search string update **urgently**, so a controlled input never
+ * lags a keystroke, while the row-model pass they drive reads a *deferred* copy.
+ * `useDataTable.ts` in the React package records what happens without the split
+ * — typing "ada" landed as "a".
+ *
+ * Svelte has no priority scheduler. Neither does Vue, and this is a deliberate
+ * transcription of `@ui-organized/vue-table`'s `useDeferred` rather than a
+ * second design: the trade-offs are identical and two different answers to the
+ * same problem in one design system would be a defect in itself.
+ *
+ *   - The **source** stays urgent. Inputs bind to it directly, so typing is
+ *     never delayed and never drops a character.
+ *   - The **mirror** lags by one idle beat, and only the filtering reads it.
+ *   - A burst of keystrokes **coalesces** into one filter pass.
+ *   - The initial value is taken **synchronously**, because a table seeded with
+ *     `defaultFilters` has to render filtered on its first pass — on the server
+ *     too, where nothing is ever scheduled.
+ *
+ * Idle rather than a debounce because a fixed delay is wrong in both directions:
+ * too short and it does nothing on a busy machine, too long and a fast typist
+ * watches the table sit still. The deadline matters as much as the callback — a
+ * table being scrolled while someone types keeps the main thread busy, and
+ * without one the filter would never run.
+ */
+export declare function createDeferred<T>(source: () => T): {
+    readonly current: T;
+};
+//# sourceMappingURL=createDeferred.svelte.d.ts.map

package/dist/core/createDeferred.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDeferred.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/createDeferred.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AA6BH,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;CAAE,CAwB1E"}

package/dist/core/createDeferred.svelte.js

@@ -0,0 +1,81 @@
+/**
+ * Svelte's answer to React's `useDeferredValue`, which Svelte does not have.
+ *
+ * Named `createDeferred` rather than `useDeferred`, which is what the Vue
+ * package calls it: `use*` is a React and Vue convention, and here it only makes
+ * `eslint-plugin-react-hooks` treat a Svelte function as a React hook.
+ *
+ * ── Why this file exists ────────────────────────────────────────────────────
+ *
+ * The React table splits every expensive filter into two values: the condition
+ * list and the search string update **urgently**, so a controlled input never
+ * lags a keystroke, while the row-model pass they drive reads a *deferred* copy.
+ * `useDataTable.ts` in the React package records what happens without the split
+ * — typing "ada" landed as "a".
+ *
+ * Svelte has no priority scheduler. Neither does Vue, and this is a deliberate
+ * transcription of `@ui-organized/vue-table`'s `useDeferred` rather than a
+ * second design: the trade-offs are identical and two different answers to the
+ * same problem in one design system would be a defect in itself.
+ *
+ *   - The **source** stays urgent. Inputs bind to it directly, so typing is
+ *     never delayed and never drops a character.
+ *   - The **mirror** lags by one idle beat, and only the filtering reads it.
+ *   - A burst of keystrokes **coalesces** into one filter pass.
+ *   - The initial value is taken **synchronously**, because a table seeded with
+ *     `defaultFilters` has to render filtered on its first pass — on the server
+ *     too, where nothing is ever scheduled.
+ *
+ * Idle rather than a debounce because a fixed delay is wrong in both directions:
+ * too short and it does nothing on a busy machine, too long and a fast typist
+ * watches the table sit still. The deadline matters as much as the callback — a
+ * table being scrolled while someone types keeps the main thread busy, and
+ * without one the filter would never run.
+ */
+/** Long enough to coalesce a burst of typing, short enough to feel caused by it. */
+const IDLE_TIMEOUT = 100;
+function scheduleIdle(run) {
+    // SSR: no scheduler, and no rendering to protect either.
+    if (typeof window === "undefined") {
+        let cancelled = false;
+        queueMicrotask(() => {
+            if (!cancelled)
+                run();
+        });
+        return () => {
+            cancelled = true;
+        };
+    }
+    const request = window.requestIdleCallback;
+    if (typeof request === "function") {
+        const handle = request(() => run(), { timeout: IDLE_TIMEOUT });
+        return () => window.cancelIdleCallback?.(handle);
+    }
+    // Safari has no requestIdleCallback. A macrotask still yields to paint and to
+    // input, which is the property being bought here.
+    const handle = window.setTimeout(run, 0);
+    return () => window.clearTimeout(handle);
+}
+export function createDeferred(source) {
+    let deferred = $state(source());
+    let cancel = null;
+    $effect(() => {
+        // Read the source so this effect depends on it, then schedule outside the
+        // tracking scope — `untrack` is unnecessary because the callback runs later.
+        const value = source();
+        cancel?.();
+        cancel = scheduleIdle(() => {
+            cancel = null;
+            deferred = value;
+        });
+        return () => {
+            cancel?.();
+            cancel = null;
+        };
+    });
+    return {
+        get current() {
+            return deferred;
+        },
+    };
+}

package/dist/core/elementRef.d.ts

@@ -0,0 +1,17 @@
+import type { Action } from "svelte/action";
+/**
+ * Hand an element to a callback when it mounts, and `null` when it goes.
+ *
+ * React takes a callback ref for the root and the viewport because it needs a
+ * *render* when the node appears; Vue binds a template ref and watches it.
+ * Svelte 5 has `bind:this`, but a plain variable assignment is not something a
+ * `$derived` elsewhere can watch — and the resize and scroll observers have to
+ * re-run when the node arrives. An action calling into the api's own `$state` is
+ * what makes that reactive.
+ *
+ * ```svelte
+ * <div use:elementRef={table.rootRef}>
+ * ```
+ */
+export declare const elementRef: Action<HTMLElement, (element: HTMLElement | null) => void>;
+//# sourceMappingURL=elementRef.d.ts.map

package/dist/core/elementRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementRef.d.ts","sourceRoot":"","sources":["../../src/lib/core/elementRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAQjF,CAAC"}

package/dist/core/elementRef.js

@@ -0,0 +1,20 @@
+/**
+ * Hand an element to a callback when it mounts, and `null` when it goes.
+ *
+ * React takes a callback ref for the root and the viewport because it needs a
+ * *render* when the node appears; Vue binds a template ref and watches it.
+ * Svelte 5 has `bind:this`, but a plain variable assignment is not something a
+ * `$derived` elsewhere can watch — and the resize and scroll observers have to
+ * re-run when the node arrives. An action calling into the api's own `$state` is
+ * what makes that reactive.
+ *
+ * ```svelte
+ * <div use:elementRef={table.rootRef}>
+ * ```
+ */
+export const elementRef = (node, set) => {
+    set?.(node);
+    return {
+        destroy: () => set?.(null),
+    };
+};

package/dist/core/props.d.ts

@@ -0,0 +1,3 @@
+import type { ElementProps } from "@ui-organized/table-core";
+export declare function svelteProps(props: ElementProps): Record<string, unknown>;
+//# sourceMappingURL=props.d.ts.map

package/dist/core/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/lib/core/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,0BAA0B,CAAC;AA0CzE,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAOxE"}

package/dist/core/props.js

@@ -0,0 +1,46 @@
+/**
+ * The one translation at the framework boundary.
+ *
+ * Core returns plain objects of `className` / `style` / `aria-*` / `data-*`,
+ * typed against its own narrow `TableStyle` rather than any framework's. Svelte
+ * needs two things done to them, and the second is the one that bites:
+ *
+ * 1. **`className` → `class`**, which is what a spread onto an element wants.
+ * 2. **Numeric lengths get `px`, and `style` becomes a string.** React appends
+ *    the unit for us; Svelte does not, and a spread `style` has to be a string
+ *    rather than an object. A column width of `180` would otherwise reach the
+ *    DOM as `width:180`, which is not a length — so every column falls back to
+ *    auto and the whole `table-layout: fixed` contract comes apart. It is
+ *    invisible to the parity gate, which does not compare `style`, and obvious
+ *    the moment anyone looks at the table. `@ui-organized/vue-table` hit exactly
+ *    this.
+ *
+ * Everything else passes through untouched: `aria-*` and `data-*` are already
+ * attribute names, and Svelte lowercases `tabIndex` and `colSpan` itself.
+ */
+/**
+ * The properties whose numeric values are **not** lengths. Core's `TableStyle`
+ * is narrow enough that the whole unitless list is one property — written as an
+ * exception so a length added later gets its unit automatically.
+ */
+const UNITLESS = new Set(["zIndex"]);
+/** `{ width: 180 }` → `"width: 180px"`. Empty style becomes `undefined`. */
+function styleString(style) {
+    const parts = [];
+    for (const [key, value] of Object.entries(style)) {
+        if (value === undefined)
+            continue;
+        const property = key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+        const unit = typeof value === "number" && !UNITLESS.has(key) ? "px" : "";
+        parts.push(`${property}: ${value}${unit}`);
+    }
+    return parts.length ? parts.join("; ") : undefined;
+}
+export function svelteProps(props) {
+    const { className, style, ...rest } = props;
+    return {
+        ...rest,
+        ...(className === undefined ? {} : { class: className }),
+        ...(style === undefined ? {} : { style: styleString(style) }),
+    };
+}

package/dist/core/systemColumns.d.ts

@@ -0,0 +1,16 @@
+import { type RowData } from "@ui-organized/table-core";
+import type { TableColumn } from "./types.js";
+/**
+ * The two columns the table adds for itself.
+ *
+ * They are built here rather than in the composable because their cells render
+ * real components — `Checkbox`, `Menu` — and each reads the table from context,
+ * which works because cells render inside the provider.
+ *
+ * `renderComponent` rather than a bare component: the Svelte adapter's
+ * `FlexRender` identifies a component by the wrapper class this returns, which
+ * is how it tells "a component to mount" from "a string to print".
+ */
+export declare function selectionColumn<T extends RowData>(): TableColumn<T>;
+export declare function actionsColumn<T extends RowData>(): TableColumn<T>;
+//# sourceMappingURL=systemColumns.d.ts.map

package/dist/core/systemColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemColumns.d.ts","sourceRoot":"","sources":["../../src/lib/core/systemColumns.ts"],"names":[],"mappings":"AACA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKhG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,CAqBnE;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,CAajE"}

package/dist/core/systemColumns.js

@@ -0,0 +1,53 @@
+import { renderComponent } from "@tanstack/svelte-table";
+import { ACTIONS_COLUMN_ID, SELECTION_COLUMN_ID } from "@ui-organized/table-core";
+import TableRowActions from "../components/TableRowActions/TableRowActions.svelte";
+import SelectAllCell from "./SelectAllCell.svelte";
+import SelectCell from "./SelectCell.svelte";
+import ActionsHeader from "./ActionsHeader.svelte";
+/**
+ * The two columns the table adds for itself.
+ *
+ * They are built here rather than in the composable because their cells render
+ * real components — `Checkbox`, `Menu` — and each reads the table from context,
+ * which works because cells render inside the provider.
+ *
+ * `renderComponent` rather than a bare component: the Svelte adapter's
+ * `FlexRender` identifies a component by the wrapper class this returns, which
+ * is how it tells "a component to mount" from "a string to print".
+ */
+export function selectionColumn() {
+    return {
+        id: SELECTION_COLUMN_ID,
+        header: () => renderComponent(SelectAllCell, {}),
+        cell: ({ row, table }) => {
+            // The identifying column's value is the only thing that makes one row's
+            // checkbox distinguishable from another's in a screen reader's forms list.
+            const primary = table
+                .getAllLeafColumns()
+                .find((column) => column.columnDef.meta?.primary)?.id;
+            const name = primary ? String(row.getValue(primary) ?? row.id) : row.id;
+            return renderComponent(SelectCell, { rowId: row.id, rowLabel: `Select ${name}` });
+        },
+        size: 48,
+        minSize: 48,
+        maxSize: 48,
+        enableSorting: false,
+        enableResizing: false,
+        enableHiding: false,
+        meta: { align: "center", hideFromViewOptions: true },
+    };
+}
+export function actionsColumn() {
+    return {
+        id: ACTIONS_COLUMN_ID,
+        header: () => renderComponent(ActionsHeader, {}),
+        cell: ({ row }) => renderComponent(TableRowActions, { row: row.original }),
+        size: 56,
+        minSize: 56,
+        maxSize: 56,
+        enableSorting: false,
+        enableResizing: false,
+        enableHiding: false,
+        meta: { align: "end", sticky: "right", hideFromViewOptions: true },
+    };
+}

package/dist/core/tableContext.d.ts

@@ -0,0 +1,7 @@
+import type { RowData } from "@ui-organized/table-core";
+import type { DataTableApi } from "./types.js";
+export declare function setTable<T extends RowData>(api: DataTableApi<T>): void;
+export declare function getTable<T extends RowData = RowData>(): DataTableApi<T>;
+/** For parts that are legitimately optional inside a table (toolbars reused elsewhere). */
+export declare function getOptionalTable<T extends RowData = RowData>(): DataTableApi<T> | null;
+//# sourceMappingURL=tableContext.d.ts.map

package/dist/core/tableContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableContext.d.ts","sourceRoot":"","sources":["../../src/lib/core/tableContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAiB/C,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAEtE;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,CASvE;AAED,2FAA2F;AAC3F,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAEtF"}

package/dist/core/tableContext.js

@@ -0,0 +1,30 @@
+import { getContext, setContext } from "svelte";
+/**
+ * The styled parts are usable on their own — that is the whole point of layer 2
+ * — so they need somewhere to find the table without every one of them taking
+ * the api as a prop through four levels of markup.
+ *
+ * `setContext`/`getContext` rather than React's context object, but the
+ * arrangement is the same: `<DataTable>` sets, every part gets, and a part
+ * rendered outside one says so with a message that names the fix.
+ *
+ * The api is a bag of getters over runes, so it can be put in context directly:
+ * context is read once at construction and the reactivity travels with the
+ * object rather than with the read.
+ */
+const TABLE_KEY = Symbol("ui-organized:data-table");
+export function setTable(api) {
+    setContext(TABLE_KEY, api);
+}
+export function getTable() {
+    const api = getContext(TABLE_KEY);
+    if (!api) {
+        throw new Error("A table part was rendered outside a table. Provide one with " +
+            "`setTable(createDataTable(() => options))` — or use <DataTable>, which does that for you.");
+    }
+    return api;
+}
+/** For parts that are legitimately optional inside a table (toolbars reused elsewhere). */
+export function getOptionalTable() {
+    return getContext(TABLE_KEY) ?? null;
+}

package/dist/core/trackStore.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Store } from "@ui-organized/table-core";
+/**
+ * Binds one of core's framework-free stores to Svelte 5 runes.
+ *
+ * `@ui-organized/table-core`'s `state.ts` predicted this binding in its own
+ * header — "Svelte with a `readable`" — and Svelte 5 makes it simpler than that:
+ * `$state` plus the store's own subscription, with no store contract in between.
+ *
+ * The store's two invariants are what make it safe: `getState()` returns the
+ * same reference until something actually changes, and a no-op action notifies
+ * nobody. So the mirror only ever changes when the state did.
+ *
+ * `$effect` rather than a bare `subscribe`, so the subscription is torn down
+ * with the component that created it.
+ *
+ * Named `trackStore` rather than `useStore`, which is what the React and Vue
+ * packages call it: `use*` is those two frameworks' convention, and here it only
+ * succeeds in making `eslint-plugin-react-hooks` treat a Svelte function as a
+ * React hook and complain that it is called in the wrong place.
+ */
+export declare function trackStore<S, A>(store: Store<S, A>): {
+    readonly current: S;
+};
+//# sourceMappingURL=trackStore.svelte.d.ts.map

package/dist/core/trackStore.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trackStore.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/core/trackStore.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;CAAE,CAU5E"}

package/dist/core/trackStore.svelte.js

@@ -0,0 +1,28 @@
+/**
+ * Binds one of core's framework-free stores to Svelte 5 runes.
+ *
+ * `@ui-organized/table-core`'s `state.ts` predicted this binding in its own
+ * header — "Svelte with a `readable`" — and Svelte 5 makes it simpler than that:
+ * `$state` plus the store's own subscription, with no store contract in between.
+ *
+ * The store's two invariants are what make it safe: `getState()` returns the
+ * same reference until something actually changes, and a no-op action notifies
+ * nobody. So the mirror only ever changes when the state did.
+ *
+ * `$effect` rather than a bare `subscribe`, so the subscription is torn down
+ * with the component that created it.
+ *
+ * Named `trackStore` rather than `useStore`, which is what the React and Vue
+ * packages call it: `use*` is those two frameworks' convention, and here it only
+ * succeeds in making `eslint-plugin-react-hooks` treat a Svelte function as a
+ * React hook and complain that it is called in the wrong place.
+ */
+export function trackStore(store) {
+    let snapshot = $state(store.getState());
+    $effect(() => store.subscribe(() => (snapshot = store.getState())));
+    return {
+        get current() {
+            return snapshot;
+        },
+    };
+}