@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/data-table.cjs

@@ -0,0 +1,171 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = DataTable;
+exports.DataTableColumnHeader = DataTableColumnHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DataTable — a sortable, filterable, paginated grid over an array of rows,
+ * driven by a column-definition array exactly the way the upstream guide's
+ * `ColumnDef[]` is: a column names an `accessorKey`, an optional `header` and
+ * `cell` renderer, and whether it can be sorted or hidden. Two ids carry
+ * meaning by convention, matched by the reference implementation's own demo —
+ * a column `id: 'select'` gets its checkbox for free, everything else (an
+ * `id: 'actions'` column included) is rendered by whatever `cell` you give it.
+ *
+ * There is no TanStack Table here: the workspace does not carry it, and a
+ * generic column model over a plain array needs none of what a headless
+ * library buys a real backend — grouping, virtualization, server-side
+ * pagination. Sorting, filtering, visibility, selection and pagination are
+ * ~120 lines of arithmetic over arrays, kept in one `useState` each, matching
+ * the guide's own `SortingState`/`ColumnFiltersState`/`VisibilityState` split.
+ *
+ * The grid is `@hanzo/ui`'s own `Grid`/`Cell` — a real CSS grid, which is the
+ * one correct host for a two-dimensional layout — with the WAI-ARIA
+ * `table`/`row`/`columnheader`/`cell` roles standing in for the semantics a
+ * native `<table>` would otherwise carry.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const grid_1 = require("../../grid.cjs");
+const button_1 = require("./button.cjs");
+const checkbox_1 = require("./checkbox.cjs");
+const dropdown_menu_1 = require("./dropdown-menu.cjs");
+const ink_1 = require("./ink.cjs");
+const input_1 = require("./input.cjs");
+const slot_1 = require("./slot.cjs");
+/**
+ * A column's header cell: plain text when the column cannot sort, otherwise a
+ * button that toggles ascending/descending and shows which way it is set —
+ * the same affordance the reference `data-table-demo.tsx` wires up by hand.
+ */
+function DataTableColumnHeader({ column, title, className }) {
+    if (!column.getCanSort())
+        return ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontWeight: "600", color: "$quiet", className: className, children: title }));
+    const sorted = column.getIsSorted();
+    return ((0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('data-table-column-header'), variant: "ghost", size: "sm", className: className, onClick: () => column.toggleSorting(sorted === 'asc'), children: [title, sorted === 'desc' ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowDown, { size: 14 }) : sorted === 'asc' ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUp, { size: 14 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUpDown, { size: 14 })] }));
+}
+const cellValue = (column, row) => column.accessorKey !== undefined ? row[column.accessorKey] : undefined;
+const sortKey = (column, row) => {
+    if (column.sortingValue)
+        return column.sortingValue(row);
+    const v = cellValue(column, row);
+    return typeof v === 'number' ? v : String(v ?? '');
+};
+const filterText = (column, row) => column.filterValue ? column.filterValue(row) : String(cellValue(column, row) ?? '');
+const track = (width) => width === undefined ? '1fr' : typeof width === 'number' ? `${width}px` : width;
+const justify = (a) => a === 'right' ? 'flex-end' : a === 'center' ? 'center' : 'flex-start';
+function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder = 'Filter…', pageSize = 0, emptyMessage = 'No results.', onRowSelectionChange, }) {
+    const [sorting, setSorting] = (0, react_1.useState)(null);
+    const [filter, setFilter] = (0, react_1.useState)('');
+    const [hidden, setHidden] = (0, react_1.useState)({});
+    const [selected, setSelected] = (0, react_1.useState)({});
+    const [pageIndex, setPageIndex] = (0, react_1.useState)(0);
+    const withIds = (0, react_1.useMemo)(() => data.map((row, i) => ({ row, id: getRowId ? getRowId(row, i) : String(i) })), [data, getRowId]);
+    const filterColumn = filterColumnId ? columns.find((c) => c.id === filterColumnId) : undefined;
+    const filtered = (0, react_1.useMemo)(() => {
+        if (!filterColumn || filter.trim() === '')
+            return withIds;
+        const needle = filter.toLowerCase();
+        return withIds.filter(({ row }) => filterText(filterColumn, row).toLowerCase().includes(needle));
+    }, [withIds, filterColumn, filter]);
+    const sorted = (0, react_1.useMemo)(() => {
+        if (!sorting)
+            return filtered;
+        const column = columns.find((c) => c.id === sorting.id);
+        if (!column)
+            return filtered;
+        const keyed = filtered.map((entry) => ({ entry, key: sortKey(column, entry.row) }));
+        keyed.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+        if (sorting.desc)
+            keyed.reverse();
+        return keyed.map((k) => k.entry);
+    }, [filtered, columns, sorting]);
+    const pageCount = pageSize > 0 ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+    const paged = pageSize > 0 ? sorted.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize) : sorted;
+    const visibleColumns = columns.filter((c) => hidden[c.id] !== true);
+    const hideable = columns.filter((c) => c.enableHiding !== false);
+    const setSelectedFor = (id, value) => {
+        const next = { ...selected, [id]: value };
+        setSelected(next);
+        onRowSelectionChange?.(withIds.filter((e) => next[e.id]).map((e) => e.row));
+    };
+    const toggleAllPage = (value) => {
+        const next = { ...selected };
+        for (const entry of paged)
+            next[entry.id] = value;
+        setSelected(next);
+        onRowSelectionChange?.(withIds.filter((e) => next[e.id]).map((e) => e.row));
+    };
+    const rowApi = (entry) => ({
+        id: entry.id,
+        original: entry.row,
+        getValue: (columnId) => {
+            const column = columns.find((c) => c.id === columnId);
+            return column ? cellValue(column, entry.row) : undefined;
+        },
+        getIsSelected: () => selected[entry.id] === true,
+        toggleSelected: (value) => setSelectedFor(entry.id, value ?? !selected[entry.id]),
+    });
+    const columnApi = (column) => ({
+        id: column.id,
+        getCanSort: () => column.enableSorting !== false,
+        getIsSorted: () => (sorting?.id === column.id ? (sorting.desc ? 'desc' : 'asc') : false),
+        toggleSorting: (desc = false) => {
+            if (column.enableSorting === false)
+                return;
+            setSorting({ id: column.id, desc });
+        },
+        getCanHide: () => column.enableHiding !== false,
+        getIsVisible: () => hidden[column.id] !== true,
+        toggleVisibility: (visible) => setHidden((h) => ({ ...h, [column.id]: visible === undefined ? h[column.id] !== true : !visible })),
+    });
+    const pageIds = paged.map((e) => e.id);
+    const allPageSelected = pageIds.length > 0 && pageIds.every((id) => selected[id]);
+    const somePageSelected = pageIds.some((id) => selected[id]);
+    const table = {
+        getColumn: (id) => {
+            const column = columns.find((c) => c.id === id);
+            return column ? columnApi(column) : undefined;
+        },
+        getAllColumns: () => columns.map(columnApi),
+        getRowModel: () => ({ rows: paged.map(rowApi) }),
+        getFilteredRowModel: () => ({ rows: filtered.map(rowApi) }),
+        getFilteredSelectedRowModel: () => ({ rows: filtered.filter((e) => selected[e.id]).map(rowApi) }),
+        getIsAllPageRowsSelected: () => allPageSelected,
+        getIsSomePageRowsSelected: () => somePageSelected,
+        toggleAllPageRowsSelected: (value) => toggleAllPage(value ?? !allPageSelected),
+        getCanPreviousPage: () => pageIndex > 0,
+        getCanNextPage: () => pageIndex < pageCount - 1,
+        previousPage: () => setPageIndex((p) => Math.max(0, p - 1)),
+        nextPage: () => setPageIndex((p) => Math.min(pageCount - 1, p + 1)),
+        getPageCount: () => pageCount,
+    };
+    const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+    const filteredCount = table.getFilteredRowModel().rows.length;
+    const trackList = visibleColumns.map((c) => track(c.width)).join(' ');
+    const headerContent = (column) => {
+        if (column.id === 'select')
+            return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select all", checked: allPageSelected ? true : somePageSelected ? 'indeterminate' : false, onCheckedChange: (value) => toggleAllPage(!!value) }));
+        if (typeof column.header === 'function')
+            return column.header({ column: columnApi(column) });
+        return (0, ink_1.ink)(column.header ?? column.id, gui_1.SizableText, { size: '$2', fontWeight: '600', color: '$quiet' });
+    };
+    const cellContent = (column, entry) => {
+        if (column.id === 'select')
+            return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "Select row", checked: selected[entry.id] === true, onCheckedChange: (value) => setSelectedFor(entry.id, !!value) }));
+        if (column.cell)
+            return column.cell({ row: rowApi(entry) });
+        return (0, ink_1.ink)(String(cellValue(column, entry.row) ?? ''), gui_1.SizableText, { size: '$2' });
+    };
+    const ariaSort = (column) => {
+        if (sorting?.id !== column.id)
+            return 'none';
+        return sorting.desc ? 'descending' : 'ascending';
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('data-table'), width: "100%", gap: "$3", children: [(filterColumnId || hideable.length > 0) && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('data-table-toolbar'), items: "center", gap: "$2", children: [filterColumnId && ((0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, slot_1.slot)('data-table-filter'), placeholder: filterPlaceholder, value: filter, onChangeText: setFilter, maxW: 360, width: "100%" })), hideable.length > 0 && ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('data-table-view-options'), variant: "outline", size: "sm", ml: "auto", children: ["Columns", (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14 })] }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { align: "end", children: hideable.map((column) => ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuCheckboxItem, { checked: hidden[column.id] !== true, onCheckedChange: (value) => setHidden((h) => ({ ...h, [column.id]: !value })), children: column.id }, column.id))) })] }))] })), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('data-table-grid'), role: "table", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { borderBottomWidth: 1, borderBottomColor: "$borderColor", bg: "$panel", children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { role: "row", ...(0, slot_1.slot)('data-table-header-row'), columns: trackList, gap: 0, children: visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "columnheader", "aria-sort": ariaSort(column), ...(0, slot_1.slot)('data-table-head'), style: { display: 'flex', alignItems: 'center', padding: 12, justifyContent: justify(column.align) }, children: headerContent(column) }, column.id))) }) }), paged.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('data-table-empty'), height: 96, items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$quiet", children: emptyMessage }) })) : (paged.map((entry) => {
+                        const isSelected = selected[entry.id] === true;
+                        return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "data-state": isSelected ? 'selected' : undefined, borderBottomWidth: 1, borderBottomColor: "$borderColor", bg: isSelected ? '$hover' : undefined, children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { role: "row", ...(0, slot_1.slot)('data-table-row'), "data-state": isSelected ? 'selected' : undefined, columns: trackList, gap: 0, children: visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)(grid_1.Cell, { role: "cell", ...(0, slot_1.slot)('data-table-cell'), style: { display: 'flex', alignItems: 'center', padding: 12, justifyContent: justify(column.align) }, children: cellContent(column, entry) }, column.id))) }) }, entry.id));
+                    }))] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('data-table-footer'), items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.SizableText, { size: "$2", color: "$quiet", children: [selectedCount, " of ", filteredCount, " row(s) selected."] }), pageSize > 0 && ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('data-table-pagination'), gap: "$2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !table.getCanPreviousPage(), "aria-disabled": !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: "Previous" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "sm", disabled: !table.getCanNextPage(), "aria-disabled": !table.getCanNextPage(), onClick: () => table.nextPage(), children: "Next" })] }))] })] }));
+}

package/dist/backends/gui/data-table.d.ts

@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+export type DataTableAlign = 'left' | 'center' | 'right';
+export type DataTableSortDirection = 'asc' | 'desc' | false;
+/** What a column can be asked and told, independent of any one row. */
+export interface DataTableColumnApi<TData> {
+    readonly id: string;
+    getCanSort: () => boolean;
+    getIsSorted: () => DataTableSortDirection;
+    toggleSorting: (desc?: boolean) => void;
+    getCanHide: () => boolean;
+    getIsVisible: () => boolean;
+    toggleVisibility: (visible?: boolean) => void;
+}
+/** One row, and the handful of things a `cell` renderer needs from it. */
+export interface DataTableRow<TData> {
+    readonly id: string;
+    readonly original: TData;
+    getValue: (columnId: string) => unknown;
+    getIsSelected: () => boolean;
+    toggleSelected: (value?: boolean) => void;
+}
+export interface DataTableColumnDef<TData> {
+    id: string;
+    /** Read directly off the row when no `cell` is given. */
+    accessorKey?: keyof TData;
+    header?: ReactNode | ((ctx: {
+        column: DataTableColumnApi<TData>;
+    }) => ReactNode);
+    cell?: (ctx: {
+        row: DataTableRow<TData>;
+    }) => ReactNode;
+    /** A CSS grid track for this column. Defaults to `1fr`. */
+    width?: number | string;
+    align?: DataTableAlign;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+    /** The value compared when this column is the active sort. Defaults to `accessorKey`. */
+    sortingValue?: (row: TData) => string | number;
+    /** The text searched when this column is the active filter. Defaults to `accessorKey`. */
+    filterValue?: (row: TData) => string;
+}
+/** The aggregate operations a custom `header`/`cell` can reach for — one
+ *  object, built fresh each render, mirroring the guide's own `table`. */
+export interface DataTableInstance<TData> {
+    getColumn: (id: string) => DataTableColumnApi<TData> | undefined;
+    getAllColumns: () => DataTableColumnApi<TData>[];
+    getRowModel: () => {
+        rows: DataTableRow<TData>[];
+    };
+    getFilteredRowModel: () => {
+        rows: DataTableRow<TData>[];
+    };
+    getFilteredSelectedRowModel: () => {
+        rows: DataTableRow<TData>[];
+    };
+    getIsAllPageRowsSelected: () => boolean;
+    getIsSomePageRowsSelected: () => boolean;
+    toggleAllPageRowsSelected: (value?: boolean) => void;
+    getCanPreviousPage: () => boolean;
+    getCanNextPage: () => boolean;
+    previousPage: () => void;
+    nextPage: () => void;
+    getPageCount: () => number;
+}
+export interface DataTableProps<TData> {
+    columns: DataTableColumnDef<TData>[];
+    data: TData[];
+    /** Identifies a row for selection/sort stability. Defaults to its index. */
+    getRowId?: (row: TData, index: number) => string;
+    /** The column id the toolbar's text field searches. Omit to hide the field. */
+    filterColumnId?: string;
+    filterPlaceholder?: string;
+    /** Rows per page. `0` (the default) shows every row with no pager. */
+    pageSize?: number;
+    emptyMessage?: ReactNode;
+    onRowSelectionChange?: (rows: TData[]) => void;
+}
+export interface DataTableColumnHeaderProps<TData> {
+    column: DataTableColumnApi<TData>;
+    title: ReactNode;
+    className?: string;
+}
+/**
+ * A column's header cell: plain text when the column cannot sort, otherwise a
+ * button that toggles ascending/descending and shows which way it is set —
+ * the same affordance the reference `data-table-demo.tsx` wires up by hand.
+ */
+declare function DataTableColumnHeader<TData>({ column, title, className }: DataTableColumnHeaderProps<TData>): import("react").JSX.Element;
+declare function DataTable<TData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, pageSize, emptyMessage, onRowSelectionChange, }: DataTableProps<TData>): import("react").JSX.Element;
+export { DataTable, DataTableColumnHeader };
+//# sourceMappingURL=data-table.d.ts.map

package/dist/backends/gui/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/data-table.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — a sortable, filterable, paginated grid over an array of rows,
+ * driven by a column-definition array exactly the way the upstream guide's
+ * `ColumnDef[]` is: a column names an `accessorKey`, an optional `header` and
+ * `cell` renderer, and whether it can be sorted or hidden. Two ids carry
+ * meaning by convention, matched by the reference implementation's own demo —
+ * a column `id: 'select'` gets its checkbox for free, everything else (an
+ * `id: 'actions'` column included) is rendered by whatever `cell` you give it.
+ *
+ * There is no TanStack Table here: the workspace does not carry it, and a
+ * generic column model over a plain array needs none of what a headless
+ * library buys a real backend — grouping, virtualization, server-side
+ * pagination. Sorting, filtering, visibility, selection and pagination are
+ * ~120 lines of arithmetic over arrays, kept in one `useState` each, matching
+ * the guide's own `SortingState`/`ColumnFiltersState`/`VisibilityState` split.
+ *
+ * The grid is `@hanzo/ui`'s own `Grid`/`Cell` — a real CSS grid, which is the
+ * one correct host for a two-dimensional layout — with the WAI-ARIA
+ * `table`/`row`/`columnheader`/`cell` roles standing in for the semantics a
+ * native `<table>` would otherwise carry.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from '@hanzogui/lucide-icons-2';
+import { useMemo, useState } from 'react';
+import { Cell, Grid } from '../../grid.js';
+import { Button } from './button.js';
+import { Checkbox } from './checkbox.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { ink } from './ink.js';
+import { Input } from './input.js';
+import { slot } from './slot.js';
+/**
+ * A column's header cell: plain text when the column cannot sort, otherwise a
+ * button that toggles ascending/descending and shows which way it is set —
+ * the same affordance the reference `data-table-demo.tsx` wires up by hand.
+ */
+function DataTableColumnHeader({ column, title, className }) {
+    if (!column.getCanSort())
+        return (_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$quiet", className: className, children: title }));
+    const sorted = column.getIsSorted();
+    return (_jsxs(Button, { ...slot('data-table-column-header'), variant: "ghost", size: "sm", className: className, onClick: () => column.toggleSorting(sorted === 'asc'), children: [title, sorted === 'desc' ? _jsx(ArrowDown, { size: 14 }) : sorted === 'asc' ? _jsx(ArrowUp, { size: 14 }) : _jsx(ArrowUpDown, { size: 14 })] }));
+}
+const cellValue = (column, row) => column.accessorKey !== undefined ? row[column.accessorKey] : undefined;
+const sortKey = (column, row) => {
+    if (column.sortingValue)
+        return column.sortingValue(row);
+    const v = cellValue(column, row);
+    return typeof v === 'number' ? v : String(v ?? '');
+};
+const filterText = (column, row) => column.filterValue ? column.filterValue(row) : String(cellValue(column, row) ?? '');
+const track = (width) => width === undefined ? '1fr' : typeof width === 'number' ? `${width}px` : width;
+const justify = (a) => a === 'right' ? 'flex-end' : a === 'center' ? 'center' : 'flex-start';
+function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder = 'Filter…', pageSize = 0, emptyMessage = 'No results.', onRowSelectionChange, }) {
+    const [sorting, setSorting] = useState(null);
+    const [filter, setFilter] = useState('');
+    const [hidden, setHidden] = useState({});
+    const [selected, setSelected] = useState({});
+    const [pageIndex, setPageIndex] = useState(0);
+    const withIds = useMemo(() => data.map((row, i) => ({ row, id: getRowId ? getRowId(row, i) : String(i) })), [data, getRowId]);
+    const filterColumn = filterColumnId ? columns.find((c) => c.id === filterColumnId) : undefined;
+    const filtered = useMemo(() => {
+        if (!filterColumn || filter.trim() === '')
+            return withIds;
+        const needle = filter.toLowerCase();
+        return withIds.filter(({ row }) => filterText(filterColumn, row).toLowerCase().includes(needle));
+    }, [withIds, filterColumn, filter]);
+    const sorted = useMemo(() => {
+        if (!sorting)
+            return filtered;
+        const column = columns.find((c) => c.id === sorting.id);
+        if (!column)
+            return filtered;
+        const keyed = filtered.map((entry) => ({ entry, key: sortKey(column, entry.row) }));
+        keyed.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+        if (sorting.desc)
+            keyed.reverse();
+        return keyed.map((k) => k.entry);
+    }, [filtered, columns, sorting]);
+    const pageCount = pageSize > 0 ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+    const paged = pageSize > 0 ? sorted.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize) : sorted;
+    const visibleColumns = columns.filter((c) => hidden[c.id] !== true);
+    const hideable = columns.filter((c) => c.enableHiding !== false);
+    const setSelectedFor = (id, value) => {
+        const next = { ...selected, [id]: value };
+        setSelected(next);
+        onRowSelectionChange?.(withIds.filter((e) => next[e.id]).map((e) => e.row));
+    };
+    const toggleAllPage = (value) => {
+        const next = { ...selected };
+        for (const entry of paged)
+            next[entry.id] = value;
+        setSelected(next);
+        onRowSelectionChange?.(withIds.filter((e) => next[e.id]).map((e) => e.row));
+    };
+    const rowApi = (entry) => ({
+        id: entry.id,
+        original: entry.row,
+        getValue: (columnId) => {
+            const column = columns.find((c) => c.id === columnId);
+            return column ? cellValue(column, entry.row) : undefined;
+        },
+        getIsSelected: () => selected[entry.id] === true,
+        toggleSelected: (value) => setSelectedFor(entry.id, value ?? !selected[entry.id]),
+    });
+    const columnApi = (column) => ({
+        id: column.id,
+        getCanSort: () => column.enableSorting !== false,
+        getIsSorted: () => (sorting?.id === column.id ? (sorting.desc ? 'desc' : 'asc') : false),
+        toggleSorting: (desc = false) => {
+            if (column.enableSorting === false)
+                return;
+            setSorting({ id: column.id, desc });
+        },
+        getCanHide: () => column.enableHiding !== false,
+        getIsVisible: () => hidden[column.id] !== true,
+        toggleVisibility: (visible) => setHidden((h) => ({ ...h, [column.id]: visible === undefined ? h[column.id] !== true : !visible })),
+    });
+    const pageIds = paged.map((e) => e.id);
+    const allPageSelected = pageIds.length > 0 && pageIds.every((id) => selected[id]);
+    const somePageSelected = pageIds.some((id) => selected[id]);
+    const table = {
+        getColumn: (id) => {
+            const column = columns.find((c) => c.id === id);
+            return column ? columnApi(column) : undefined;
+        },
+        getAllColumns: () => columns.map(columnApi),
+        getRowModel: () => ({ rows: paged.map(rowApi) }),
+        getFilteredRowModel: () => ({ rows: filtered.map(rowApi) }),
+        getFilteredSelectedRowModel: () => ({ rows: filtered.filter((e) => selected[e.id]).map(rowApi) }),
+        getIsAllPageRowsSelected: () => allPageSelected,
+        getIsSomePageRowsSelected: () => somePageSelected,
+        toggleAllPageRowsSelected: (value) => toggleAllPage(value ?? !allPageSelected),
+        getCanPreviousPage: () => pageIndex > 0,
+        getCanNextPage: () => pageIndex < pageCount - 1,
+        previousPage: () => setPageIndex((p) => Math.max(0, p - 1)),
+        nextPage: () => setPageIndex((p) => Math.min(pageCount - 1, p + 1)),
+        getPageCount: () => pageCount,
+    };
+    const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+    const filteredCount = table.getFilteredRowModel().rows.length;
+    const trackList = visibleColumns.map((c) => track(c.width)).join(' ');
+    const headerContent = (column) => {
+        if (column.id === 'select')
+            return (_jsx(Checkbox, { "aria-label": "Select all", checked: allPageSelected ? true : somePageSelected ? 'indeterminate' : false, onCheckedChange: (value) => toggleAllPage(!!value) }));
+        if (typeof column.header === 'function')
+            return column.header({ column: columnApi(column) });
+        return ink(column.header ?? column.id, SizableText, { size: '$2', fontWeight: '600', color: '$quiet' });
+    };
+    const cellContent = (column, entry) => {
+        if (column.id === 'select')
+            return (_jsx(Checkbox, { "aria-label": "Select row", checked: selected[entry.id] === true, onCheckedChange: (value) => setSelectedFor(entry.id, !!value) }));
+        if (column.cell)
+            return column.cell({ row: rowApi(entry) });
+        return ink(String(cellValue(column, entry.row) ?? ''), SizableText, { size: '$2' });
+    };
+    const ariaSort = (column) => {
+        if (sorting?.id !== column.id)
+            return 'none';
+        return sorting.desc ? 'descending' : 'ascending';
+    };
+    return (_jsxs(YStack, { ...slot('data-table'), width: "100%", gap: "$3", children: [(filterColumnId || hideable.length > 0) && (_jsxs(XStack, { ...slot('data-table-toolbar'), items: "center", gap: "$2", children: [filterColumnId && (_jsx(Input, { ...slot('data-table-filter'), placeholder: filterPlaceholder, value: filter, onChangeText: setFilter, maxW: 360, width: "100%" })), hideable.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { ...slot('data-table-view-options'), variant: "outline", size: "sm", ml: "auto", children: ["Columns", _jsx(ChevronDown, { size: 14 })] }) }), _jsx(DropdownMenuContent, { align: "end", children: hideable.map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: hidden[column.id] !== true, onCheckedChange: (value) => setHidden((h) => ({ ...h, [column.id]: !value })), children: column.id }, column.id))) })] }))] })), _jsxs(YStack, { ...slot('data-table-grid'), role: "table", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", overflow: "hidden", children: [_jsx(YStack, { borderBottomWidth: 1, borderBottomColor: "$borderColor", bg: "$panel", children: _jsx(Grid, { role: "row", ...slot('data-table-header-row'), columns: trackList, gap: 0, children: visibleColumns.map((column) => (_jsx(Cell, { role: "columnheader", "aria-sort": ariaSort(column), ...slot('data-table-head'), style: { display: 'flex', alignItems: 'center', padding: 12, justifyContent: justify(column.align) }, children: headerContent(column) }, column.id))) }) }), paged.length === 0 ? (_jsx(YStack, { ...slot('data-table-empty'), height: 96, items: "center", justify: "center", children: _jsx(SizableText, { size: "$2", color: "$quiet", children: emptyMessage }) })) : (paged.map((entry) => {
+                        const isSelected = selected[entry.id] === true;
+                        return (_jsx(YStack, { "data-state": isSelected ? 'selected' : undefined, borderBottomWidth: 1, borderBottomColor: "$borderColor", bg: isSelected ? '$hover' : undefined, children: _jsx(Grid, { role: "row", ...slot('data-table-row'), "data-state": isSelected ? 'selected' : undefined, columns: trackList, gap: 0, children: visibleColumns.map((column) => (_jsx(Cell, { role: "cell", ...slot('data-table-cell'), style: { display: 'flex', alignItems: 'center', padding: 12, justifyContent: justify(column.align) }, children: cellContent(column, entry) }, column.id))) }) }, entry.id));
+                    }))] }), _jsxs(XStack, { ...slot('data-table-footer'), items: "center", justify: "space-between", children: [_jsxs(SizableText, { size: "$2", color: "$quiet", children: [selectedCount, " of ", filteredCount, " row(s) selected."] }), pageSize > 0 && (_jsxs(XStack, { ...slot('data-table-pagination'), gap: "$2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: !table.getCanPreviousPage(), "aria-disabled": !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: "Previous" }), _jsx(Button, { variant: "outline", size: "sm", disabled: !table.getCanNextPage(), "aria-disabled": !table.getCanNextPage(), onClick: () => table.nextPage(), children: "Next" })] }))] })] }));
+}
+export { DataTable, DataTableColumnHeader };
+//# sourceMappingURL=data-table.js.map

package/dist/backends/gui/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../src/backends/gui/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/date-picker.cjs

@@ -0,0 +1,66 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = DatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DatePicker — a button that opens a calendar in a popover, for picking one
+ * date (`mode="single"`, the default) or a range (`mode="range"`), with an
+ * optional list of quick presets shown above the calendar.
+ *
+ * The trigger reads the current pick, or `placeholder` while empty. `selected`
+ * and `onSelect` name the value the same way `Calendar` does, since this is a
+ * `Calendar` with a trigger and a panel in front of it, not a different
+ * contract. Picking a single date closes the popover; a range stays open
+ * until both ends are set. `disabled` marks days that cannot be picked, same
+ * contract as `Calendar`.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const button_1 = require("./button.cjs");
+const calendar_1 = require("./calendar.cjs");
+const popover_1 = require("./popover.cjs");
+const select_1 = require("./select.cjs");
+const slot_1 = require("./slot.cjs");
+const MONTHS = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+const format = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function DatePicker(props) {
+    const { placeholder = 'Pick a date', disabled, className, width = 280 } = props;
+    const isRange = props.mode === 'range';
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [ownDate, setOwnDate] = (0, react_1.useState)(isRange ? undefined : props.selected);
+    const [ownRange, setOwnRange] = (0, react_1.useState)(isRange ? props.selected : undefined);
+    const date = !isRange ? (props.selected ?? ownDate) : undefined;
+    const range = isRange ? (props.selected ?? ownRange) : undefined;
+    const selectDate = (d) => {
+        setOwnDate(d);
+        props.onSelect?.(d);
+        setOpen(false);
+    };
+    const selectRange = (r) => {
+        setOwnRange(r);
+        props.onSelect?.(r);
+    };
+    const label = isRange
+        ? range?.from
+            ? range.to && !sameDay(range.to, range.from)
+                ? `${format(range.from)} - ${format(range.to)}`
+                : format(range.from)
+            : placeholder
+        : date
+            ? format(date)
+            : placeholder;
+    const empty = isRange ? !range?.from : !date;
+    const presets = !isRange ? props.presets : undefined;
+    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { ...(0, slot_1.slot)('date-picker-trigger'), "data-empty": empty || undefined, variant: "outline", width: width, justify: "flex-start", className: className, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Calendar, { size: 16 }), empty ? (0, jsx_runtime_1.jsx)(gui_1.SizableText, { color: "$quiet", children: label }) : label] }) }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { ...(0, slot_1.slot)('date-picker-content'), width: "auto", p: 0, align: "start", children: [presets && presets.length > 0 && ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('date-picker-presets'), p: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
+                                const days = Number(value);
+                                const picked = new Date();
+                                picked.setDate(picked.getDate() + days);
+                                selectDate(picked);
+                            }, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { ...(0, slot_1.slot)('date-picker-preset-trigger'), children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: presets.map((preset) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: String(preset.days), children: preset.label }, preset.days))) })] }) })), isRange ? ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", selected: range, onSelect: selectRange, defaultMonth: range?.from, numberOfMonths: props.numberOfMonths ?? 2, disabled: disabled, initialFocus: true })) : ((0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", selected: date, onSelect: selectDate, disabled: disabled, initialFocus: true }))] })] }));
+}

package/dist/backends/gui/date-picker.d.ts

@@ -0,0 +1,29 @@
+import type { CalendarRange } from './calendar.js';
+/** A quick pick offered above the calendar: `label` shown, `days` from today. */
+export interface DatePickerPreset {
+    label: string;
+    days: number;
+}
+interface DatePickerSharedProps {
+    placeholder?: string;
+    disabled?: (date: Date) => boolean;
+    className?: string;
+    width?: number;
+}
+export interface DatePickerSingleProps extends DatePickerSharedProps {
+    mode?: 'single';
+    selected?: Date;
+    onSelect?: (date: Date | undefined) => void;
+    /** Quick picks (e.g. "Today", "In a week") shown above the calendar. Single mode only. */
+    presets?: DatePickerPreset[];
+}
+export interface DatePickerRangeProps extends DatePickerSharedProps {
+    mode: 'range';
+    selected?: CalendarRange;
+    onSelect?: (range: CalendarRange | undefined) => void;
+    numberOfMonths?: number;
+}
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/backends/gui/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/date-picker.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAe/C,iFAAiF;AACjF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAC3C,0FAA0F;IAC1F,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAA;IACrD,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAE1E,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA6FhD"}