@runwisp/ui 1.0.0 → 1.1.0

package/src/lib/index.ts

@@ -33,7 +33,7 @@ export { default as FormField } from "./components/FormField.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as Radio } from "./components/Radio.svelte";
 export { default as RadioGroup } from "./components/RadioGroup.svelte";
-export { default as Select } from "./components/Select.svelte";
+export { default as Select, type SelectOption } from "./components/Select.svelte";
 export { default as Textarea } from "./components/Textarea.svelte";
 export { default as TimezoneSelect } from "./components/TimezoneSelect.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";
@@ -47,9 +47,25 @@ export { default as Avatar } from "./components/Avatar.svelte";
 export { default as Badge } from "./components/Badge.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as DataGrid } from "./components/DataGrid.svelte";
+export type { Column, DataGridProps } from "./components/DataGrid.svelte";
+export { default as FilterBar } from "./components/FilterBar.svelte";
+export { default as FilterPill } from "./components/FilterPill.svelte";
+export { default as SearchInput } from "./components/SearchInput.svelte";
+export {
+    fieldKeys,
+    fieldLabel,
+    isBlank,
+    isFieldActive,
+    seedValues,
+    type FilterField,
+    type FilterValues,
+    type TableQuery,
+} from "./components/filter-spec.js";
+export { applyFilters, matchesQuery, resolvePath } from "./utils/filter.js";
 export { default as Progress } from "./components/Progress.svelte";
 export { default as Skeleton } from "./components/Skeleton.svelte";
 export { default as Sparkline } from "./components/Sparkline.svelte";
+export { default as StatusDot, type StatusDotTone } from "./components/StatusDot.svelte";
 export { default as StatusIndicator } from "./components/StatusIndicator.svelte";
 export { default as Table } from "./components/Table.svelte";
 export { default as TableBody } from "./components/TableBody.svelte";
@@ -64,9 +80,11 @@ export { default as Dropdown } from "./components/Dropdown.svelte";
 export { default as EmptyState } from "./components/EmptyState.svelte";
 export { default as ErrorState } from "./components/ErrorState.svelte";
 export { default as Modal } from "./components/Modal.svelte";
+export { default as NotificationBell } from "./components/NotificationBell.svelte";
 export { default as Popover } from "./components/Popover.svelte";
 export { default as ToastContainer } from "./components/ToastContainer.svelte";
 export { default as Tooltip } from "./components/Tooltip.svelte";
+export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 
 export { default as CodeBlock } from "./components/CodeBlock.svelte";
 export { default as TaskCard } from "./components/TaskCard.svelte";
@@ -118,6 +136,12 @@ export { humanizeCron, type HumanizedCron } from "./components/dashboard/cron-fo
 export type { DaemonState, DaemonStats } from "./components/dashboard/types.js";
 
 export { toast, type Toast, type ToastType } from "./utils/toast.svelte.js";
+export {
+    themeStore,
+    THEME_STORAGE_KEY,
+    type ThemePreference,
+    type ResolvedTheme,
+} from "./utils/theme.svelte.js";
 export { extractErrorMessage } from "./utils/error.js";
 export {
     formatBytes,
@@ -128,4 +152,5 @@ export {
     formatFullDateTime,
 } from "./utils/format.js";
 export { formatShortId } from "./utils/id.js";
+export { debounce } from "./utils/debounce.js";
 export { TickingNow } from "./utils/ticking-now.svelte.js";

package/src/lib/utils/debounce.test.ts

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { debounce } from "./debounce.js";
+
+describe("debounce", () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+
+    it("collapses rapid calls into one trailing call with the last args", () => {
+        const fn = vi.fn();
+        const d = debounce(fn, 20);
+        d(1);
+        d(2);
+        d(3);
+        expect(fn).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(20);
+        expect(fn).toHaveBeenCalledTimes(1);
+        expect(fn).toHaveBeenCalledWith(3);
+    });
+
+    it("cancel drops the pending call", () => {
+        const fn = vi.fn();
+        const d = debounce(fn, 20);
+        d();
+        d.cancel();
+        vi.advanceTimersByTime(40);
+        expect(fn).not.toHaveBeenCalled();
+    });
+});

package/src/lib/utils/debounce.ts

@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+// Trailing-edge debounce. Returns a wrapper that defers `fn` until `ms` have
+// elapsed since the last call; `.cancel()` drops a pending call (used when an
+// external write must win immediately, e.g. Reset clearing a debounced field).
+export function debounce<A extends unknown[]>(
+    fn: (...args: A) => void,
+    ms: number,
+): ((...args: A) => void) & { cancel: () => void } {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const wrapped = (...args: A) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn(...args);
+        }, ms);
+    };
+    wrapped.cancel = () => {
+        clearTimeout(timer);
+    };
+    return wrapped;
+}

package/src/lib/utils/filter.test.ts

@@ -0,0 +1,172 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { applyFilters, matchesQuery, resolvePath } from "./filter.js";
+import {
+    type FilterField,
+    fieldKeys,
+    fieldLabel,
+    isBlank,
+    isFieldActive,
+    seedValues,
+} from "../components/filter-spec.js";
+
+interface Row {
+    id: string;
+    status: string;
+    exitCode: number;
+    roles: string[];
+    user: { name: string };
+    startedAt: Date;
+}
+
+const rows: Row[] = [
+    {
+        id: "a",
+        status: "ok",
+        exitCode: 0,
+        roles: ["owner"],
+        user: { name: "Ada" },
+        startedAt: new Date("2026-01-10"),
+    },
+    {
+        id: "b",
+        status: "err",
+        exitCode: 1,
+        roles: ["viewer"],
+        user: { name: "Bob" },
+        startedAt: new Date("2026-02-20"),
+    },
+    {
+        id: "c",
+        status: "ok",
+        exitCode: 2,
+        roles: ["owner", "viewer"],
+        user: { name: "Cy" },
+        startedAt: new Date("2026-03-30"),
+    },
+];
+
+const range: FilterField = { type: "daterange", key: "startedAt", label: "Date" };
+const search: FilterField = { type: "search", key: "q", fields: ["id", "user.name"] };
+const status: FilterField = { type: "select", key: "status", label: "Status", options: [] };
+
+const fields: FilterField[] = [
+    search,
+    status,
+    { type: "select", key: "role", label: "Role", path: "roles", options: [] },
+    { type: "number", key: "exitCode", label: "Exit" },
+    range,
+];
+
+const ids = (r: Row[]) => r.map((x) => x.id);
+
+describe("applyFilters", () => {
+    it("passes everything through when values are empty", () => {
+        expect(applyFilters(rows, fields, {})).toHaveLength(3);
+    });
+
+    it("searches dot-paths case-insensitively", () => {
+        expect(ids(applyFilters(rows, fields, { q: "ad" }))).toEqual(["a"]);
+    });
+
+    it("matches select by equality and treats 'all' as inactive", () => {
+        expect(ids(applyFilters(rows, fields, { status: "ok" }))).toEqual(["a", "c"]);
+        expect(applyFilters(rows, fields, { status: "all" })).toHaveLength(3);
+    });
+
+    it("matches select against an array cell by membership", () => {
+        expect(ids(applyFilters(rows, fields, { role: "viewer" }))).toEqual(["b", "c"]);
+    });
+
+    it("coerces number values", () => {
+        expect(ids(applyFilters(rows, fields, { exitCode: "1" }))).toEqual(["b"]);
+        expect(ids(applyFilters(rows, fields, { exitCode: "0" }))).toEqual(["a"]);
+    });
+
+    it("filters a date range inclusively on both ends", () => {
+        expect(
+            ids(
+                applyFilters(rows, fields, {
+                    startedAtFrom: "2026-02-01",
+                    startedAtTo: "2026-03-30",
+                }),
+            ),
+        ).toEqual(["b", "c"]);
+    });
+
+    it("ANDs combined filters", () => {
+        expect(ids(applyFilters(rows, fields, { status: "ok", role: "viewer" }))).toEqual(["c"]);
+    });
+
+    it("coerces non-string select cells (number, boolean, date) and skips the rest", () => {
+        interface Flagged {
+            id: string;
+            flags: unknown[];
+        }
+        const flaggedRows: Flagged[] = [
+            { id: "a", flags: [1, true, new Date("2026-01-01T00:00:00.000Z"), {}] },
+            { id: "b", flags: [0, false] },
+        ];
+        const flagField: FilterField = {
+            type: "select",
+            key: "flag",
+            label: "Flag",
+            path: "flags",
+            options: [],
+        };
+        const flagIds = (r: Flagged[]) => r.map((x) => x.id);
+        expect(flagIds(applyFilters(flaggedRows, [flagField], { flag: "1" }))).toEqual(["a"]);
+        expect(flagIds(applyFilters(flaggedRows, [flagField], { flag: "true" }))).toEqual(["a"]);
+        expect(
+            flagIds(
+                applyFilters(flaggedRows, [flagField], {
+                    flag: new Date("2026-01-01T00:00:00.000Z").toISOString(),
+                }),
+            ),
+        ).toEqual(["a"]);
+        expect(applyFilters(flaggedRows, [flagField], { flag: "no-such-value" })).toHaveLength(0);
+    });
+});
+
+describe("filter helpers", () => {
+    it("matchesQuery skips nullish fields and matches empty queries", () => {
+        expect(matchesQuery("", null)).toBe(true);
+        expect(matchesQuery("x", null, undefined)).toBe(false);
+        expect(matchesQuery("OB", "bob")).toBe(true);
+    });
+
+    it("resolvePath reads nested fields and misses gracefully", () => {
+        expect(resolvePath(rows[0], "user.name")).toBe("Ada");
+        expect(resolvePath(rows[0], "user.missing.deep")).toBeUndefined();
+    });
+
+    it("isBlank treats blank, undefined, and 'all' as inactive", () => {
+        expect(isBlank(undefined)).toBe(true);
+        expect(isBlank("")).toBe(true);
+        expect(isBlank("all")).toBe(true);
+        expect(isBlank("0")).toBe(false);
+    });
+
+    it("fieldLabel uses the label, falling back to the key for search fields", () => {
+        expect(fieldLabel(status)).toBe("Status");
+        expect(fieldLabel(search)).toBe("q");
+    });
+
+    it("daterange owns two value keys", () => {
+        expect(fieldKeys(range)).toEqual(["startedAtFrom", "startedAtTo"]);
+        expect(isFieldActive(range, { startedAtTo: "2026-01-01" })).toBe(true);
+    });
+
+    it("seedValues fills every key and overlays initial values", () => {
+        expect(seedValues(fields, { status: "ok", extra: "dropped" })).toEqual({
+            q: "",
+            status: "ok",
+            role: "",
+            exitCode: "",
+            startedAtFrom: "",
+            startedAtTo: "",
+        });
+    });
+});

package/src/lib/utils/filter.ts

@@ -0,0 +1,79 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type FilterField, type FilterValues, isBlank } from "../components/filter-spec.js";
+
+// Case-insensitive substring match against any of the given fields. Empty
+// query matches everything; nullish fields are skipped.
+export function matchesQuery(query: string, ...fields: (string | null | undefined)[]): boolean {
+    if (!query) return true;
+    const q = query.toLowerCase();
+    return fields.some((f) => f?.toLowerCase().includes(q) === true);
+}
+
+// Dot-path aware field read: resolves "user.name" against nested objects.
+// Shared by DataGrid's sort comparator and the filter engine below so both
+// read fields the same way.
+export function resolvePath(obj: unknown, path: string): unknown {
+    return path
+        .split(".")
+        .reduce<unknown>(
+            (acc, k): unknown =>
+                typeof acc === "object" && acc !== null ? Reflect.get(acc, k) : undefined,
+            obj,
+        );
+}
+
+// Scalar cell → the string a filter value is compared against. Objects and
+// nullish cells have no text form, so they never match a search or select.
+function toText(v: unknown): string | null {
+    if (typeof v === "string") return v;
+    if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") return String(v);
+    if (v instanceof Date) return v.toISOString();
+    return null;
+}
+
+// Array cell (e.g. member roles) → membership; scalar → equality.
+function matchSelect(cell: unknown, v: string): boolean {
+    return Array.isArray(cell) ? cell.some((c) => toText(c) === v) : toText(cell) === v;
+}
+
+// Inclusive yyyy-mm-dd range. The ISO date portion sorts lexically, so a
+// string compare is enough.
+function matchDateRange(cell: unknown, from: string | undefined, to: string | undefined): boolean {
+    if (isBlank(from) && isBlank(to)) return true;
+    const d = cell instanceof Date ? cell : new Date(toText(cell) ?? "");
+    if (Number.isNaN(d.getTime())) return false;
+    const day = d.toISOString().slice(0, 10);
+    return (isBlank(from) || day >= (from ?? "")) && (isBlank(to) || day <= (to ?? ""));
+}
+
+function matchField(row: unknown, field: FilterField, values: FilterValues): boolean {
+    switch (field.type) {
+        case "search":
+            return matchesQuery(
+                values[field.key] ?? "",
+                ...field.fields.map((p) => toText(resolvePath(row, p))),
+            );
+        case "select": {
+            const v = values[field.key];
+            return isBlank(v) || matchSelect(resolvePath(row, field.path ?? field.key), v ?? "");
+        }
+        case "number": {
+            const v = values[field.key];
+            return isBlank(v) || Number(resolvePath(row, field.path ?? field.key)) === Number(v);
+        }
+        case "daterange":
+            return matchDateRange(
+                resolvePath(row, field.path ?? field.key),
+                values[`${field.key}From`],
+                values[`${field.key}To`],
+            );
+    }
+}
+
+// Client-side filter engine: a row survives when every field matches.
+// Server-mode tables map the same `values` to query params instead.
+export function applyFilters<T>(rows: T[], fields: FilterField[], values: FilterValues): T[] {
+    return rows.filter((row) => fields.every((f) => matchField(row, f, values)));
+}

package/src/lib/utils/theme.svelte.test.ts

@@ -0,0 +1,142 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+interface BrowserStub {
+    media: { matches: boolean };
+    classList: Set<string>;
+    fireMediaChange: () => void;
+}
+
+function stubBrowser(
+    options: {
+        matches?: boolean;
+        storage?: Record<string, string>;
+        throwOnStorage?: boolean;
+    } = {},
+): BrowserStub {
+    const { matches = false, storage = {}, throwOnStorage = false } = options;
+    const listeners: (() => void)[] = [];
+    const media = { matches };
+    const classList = new Set<string>();
+
+    vi.stubGlobal("window", {});
+    vi.stubGlobal("matchMedia", () => ({
+        get matches() {
+            return media.matches;
+        },
+        addEventListener: (_event: string, cb: () => void) => {
+            listeners.push(cb);
+        },
+    }));
+    vi.stubGlobal("localStorage", {
+        getItem: (key: string) => {
+            if (throwOnStorage) throw new Error("blocked");
+            return storage[key] ?? null;
+        },
+        setItem: (key: string, value: string) => {
+            if (throwOnStorage) throw new Error("blocked");
+            storage[key] = value;
+        },
+    });
+    vi.stubGlobal("document", {
+        documentElement: {
+            classList: {
+                toggle: (cls: string, on: boolean) => {
+                    if (on) classList.add(cls);
+                    else classList.delete(cls);
+                },
+            },
+        },
+    });
+
+    return {
+        media,
+        classList,
+        fireMediaChange: () => {
+            listeners.forEach((cb) => {
+                cb();
+            });
+        },
+    };
+}
+
+describe("themeStore", () => {
+    beforeEach(() => {
+        vi.resetModules();
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it("degrades outside a browser", async () => {
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("auto");
+        expect(themeStore.resolved).toBe("light");
+    });
+
+    it("resolves auto to the OS preference", async () => {
+        stubBrowser({ matches: true });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.resolved).toBe("dark");
+    });
+
+    it("reads a stored preference over auto", async () => {
+        stubBrowser({ storage: { "runwisp:theme": "dark" } });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("dark");
+        expect(themeStore.resolved).toBe("dark");
+    });
+
+    it("falls back to the legacy storage key", async () => {
+        stubBrowser({ storage: { "runwisp-theme": "light" } });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("light");
+    });
+
+    it("ignores an invalid stored value", async () => {
+        stubBrowser({ storage: { "runwisp:theme": "purple" } });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.preference).toBe("auto");
+    });
+
+    it("re-resolves live when the OS preference changes while in auto", async () => {
+        const env = stubBrowser({ matches: false });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(themeStore.resolved).toBe("light");
+        env.media.matches = true;
+        env.fireMediaChange();
+        expect(themeStore.resolved).toBe("dark");
+    });
+
+    it("ignores OS changes once a manual preference is set", async () => {
+        const env = stubBrowser({ matches: false });
+        const { themeStore } = await import("./theme.svelte.js");
+        themeStore.set("light");
+        env.media.matches = true;
+        env.fireMediaChange();
+        expect(themeStore.resolved).toBe("light");
+    });
+
+    it("persists an explicit preference and toggles the dark class", async () => {
+        const env = stubBrowser();
+        const { themeStore } = await import("./theme.svelte.js");
+        themeStore.set("dark");
+        expect(themeStore.resolved).toBe("dark");
+        expect(env.classList.has("dark")).toBe(true);
+        expect(localStorage.getItem("runwisp:theme")).toBe("dark");
+
+        themeStore.set("light");
+        expect(env.classList.has("dark")).toBe(false);
+    });
+
+    it("still applies the preference for this page when storage write throws", async () => {
+        stubBrowser({ throwOnStorage: true });
+        const { themeStore } = await import("./theme.svelte.js");
+        expect(() => {
+            themeStore.set("dark");
+        }).not.toThrow();
+        expect(themeStore.resolved).toBe("dark");
+    });
+});

package/src/lib/utils/theme.svelte.ts

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export type ThemePreference = "auto" | "light" | "dark";
+export type ResolvedTheme = "light" | "dark";
+
+// Shared by every RunWisp surface. Keep byte-for-byte in sync with the
+// no-flash <head> scripts in each app's app.html / layout.
+export const THEME_STORAGE_KEY = "runwisp:theme";
+// The daemon dashboard used this key before the store moved here.
+const LEGACY_STORAGE_KEY = "runwisp-theme";
+
+function isPreference(value: string | null): value is ThemePreference {
+    return value === "auto" || value === "light" || value === "dark";
+}
+
+function readStored(): string | null {
+    try {
+        return localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(LEGACY_STORAGE_KEY);
+    } catch {
+        return null; // private mode / embedded contexts
+    }
+}
+
+function createThemeStore() {
+    const browser = typeof window !== "undefined";
+    let preference = $state<ThemePreference>("auto");
+    let resolved = $state<ResolvedTheme>("light");
+
+    const media = browser ? globalThis.matchMedia("(prefers-color-scheme: dark)") : null;
+
+    function apply(): void {
+        if (!browser) return;
+        if (preference === "auto") {
+            resolved = media?.matches === true ? "dark" : "light";
+        } else {
+            resolved = preference;
+        }
+        document.documentElement.classList.toggle("dark", resolved === "dark");
+    }
+
+    if (browser) {
+        const stored = readStored();
+        if (isPreference(stored)) preference = stored;
+        apply();
+        // Re-resolve live when the OS preference changes while in `auto`.
+        media?.addEventListener("change", () => {
+            if (preference === "auto") apply();
+        });
+    }
+
+    return {
+        get preference(): ThemePreference {
+            return preference;
+        },
+        get resolved(): ResolvedTheme {
+            return resolved;
+        },
+        set(pref: ThemePreference): void {
+            preference = pref;
+            try {
+                localStorage.setItem(THEME_STORAGE_KEY, pref);
+            } catch {
+                // not persisted; still applied for this page
+            }
+            apply();
+        },
+    };
+}
+
+export const themeStore = createThemeStore();

package/src/stories/DataGrid.stories.svelte

@@ -6,6 +6,9 @@
     import DataGrid from "$lib/components/DataGrid.svelte";
     import StatusIndicator from "$lib/components/StatusIndicator.svelte";
     import Dropdown from "$lib/components/Dropdown.svelte";
+    import FilterBar from "$lib/components/FilterBar.svelte";
+    import { seedValues } from "$lib/components/filter-spec.js";
+    import { applyFilters } from "$lib/utils/filter.js";
     import { Play, Pause, Trash2, SquarePen } from "@lucide/svelte";
 
     const { Story } = defineMeta({
@@ -14,8 +17,10 @@
         tags: ["autodocs"],
     });
 
+    const nameColumn = { key: "name", label: "Task Name", sortable: true };
+
     const columns = [
-        { key: "name", label: "Task Name", sortable: true },
+        nameColumn,
         { key: "schedule", label: "Schedule" },
         { key: "lastRun", label: "Last Run", sortable: true },
         { key: "status", label: "Status" },
@@ -72,6 +77,31 @@
         { divider: true },
         { label: "Delete", icon: Trash2, danger: true },
     ];
+
+    /** @type {import("$lib/components/filter-spec.js").FilterField[]} */
+    const filterFields = [
+        { type: "search", key: "q", fields: ["name", "schedule"], placeholder: "Search tasks..." },
+        {
+            type: "select",
+            key: "status",
+            label: "Status",
+            primary: true,
+            options: [
+                { value: "all", label: "All" },
+                { value: "success", label: "Success" },
+                { value: "failed", label: "Failed" },
+                { value: "running", label: "Running" },
+            ],
+        },
+    ];
+</script>
+
+<script>
+    let filterValues = $state(seedValues(filterFields));
+    /** @type {any[]} */
+    let selected = $state([]);
+    let clicked = $state("");
+    const filtered = $derived(applyFilters(tasks, filterFields, filterValues));
 </script>
 
 {#snippet statusCell(/** @type {any} */ row)}
@@ -115,6 +145,39 @@
 
 <Story name="Paginated" args={{ columns, data: tasks, paginate: true, pageSize: 2 }} />
 
+<Story name="Filters, Sort, Selection, Pagination" asChild>
+    <div class="flex flex-col gap-3">
+        <FilterBar fields={filterFields} bind:values={filterValues} />
+        <DataGrid
+            {columns}
+            data={filtered}
+            selectable
+            bind:selectedRows={selected}
+            sortKey="name"
+            sortDirection="asc"
+            paginate
+            pageSize={3}
+            pageSizeOptions={[3, 5, 10]}
+            onRowClick={(row) => (clicked = row.name)}
+            emptyMessage="No tasks match these filters"
+        />
+        <p class="font-mono text-xs text-on-surface-muted">
+            selected: {selected.map((r) => r.name).join(", ") || "none"} · last row click: {clicked ||
+                "none"}
+        </p>
+    </div>
+</Story>
+
+<Story name="Bare With Footer, No Header" asChild>
+    <div class="rounded-[4px] border border-outline">
+        <DataGrid columns={[nameColumn]} data={tasks} bare showHeader={false}>
+            {#snippet footer()}
+                <button class="font-mono text-xs text-primary hover:underline">Load more</button>
+            {/snippet}
+        </DataGrid>
+    </div>
+</Story>
+
 <Story name="Striped" args={{ columns, data: tasks, striped: true }} />
 
 <Story name="Compact" args={{ columns, data: tasks, compact: true }} />