@vertebr/react 0.18.0 → 0.19.0

package/dist/components/emails/EmailsActivityPanel.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
+import { SortableHeader } from "../resources/SortableHeader";
+import { TableScrollControls, TableSearch, TableWrap, matchesTableQuery, useTableOverflow, } from "../table";
+import { compareFieldValues, nextTableSort, } from "../../lib/sort";
 function formatWhen(iso) {
     const ms = Date.parse(iso);
     if (!Number.isFinite(ms))
@@ -76,8 +79,47 @@ function statusBadge(status) {
 function CellEmpty() {
     return _jsx("span", { className: "vertebr-cell-empty", children: "\u2014" });
 }
+function activitySortValue(row, key) {
+    if (row.kind === "scheduled") {
+        const campaign = row.campaign;
+        switch (key) {
+            case "when":
+                return campaign.sendAt;
+            case "status":
+                return campaign.status;
+            case "subject":
+                return campaign.subject ?? "";
+            case "to":
+                return String(campaign.recipientCount ?? "");
+            case "audience":
+                return campaign.resourceLabel ?? campaign.resourceId;
+            case "template":
+                return campaign.templateLabel ?? campaign.templateId;
+        }
+    }
+    const entry = row.entry;
+    switch (key) {
+        case "when":
+            return entry.at;
+        case "status":
+            return entry.status;
+        case "subject":
+            return subjectOf(entry);
+        case "to":
+            return recipientOf(entry);
+        case "audience":
+            return entry.resourceLabel ?? entry.resourceId;
+        case "template":
+            return entry.templateLabel ?? entry.templateId;
+    }
+}
 export function EmailsActivityPanel({ campaigns, history, canSchedule, canHistory, busy, onCancel, }) {
     const [filter, setFilter] = useState("all");
+    const [query, setQuery] = useState("");
+    const [sort, setSort] = useState({
+        field: "when",
+        order: "desc",
+    });
     const upcoming = useMemo(() => campaigns
         .filter((campaign) => campaign.status === "scheduled")
         .slice()
@@ -99,6 +141,39 @@ export function EmailsActivityPanel({ campaigns, history, canSchedule, canHistor
             return sent;
         return [...scheduled, ...sent];
     }, [filter, upcoming, history]);
+    const visibleRows = useMemo(() => {
+        let next = rows;
+        if (query.trim()) {
+            next = rows.filter((row) => {
+                if (row.kind === "scheduled") {
+                    const campaign = row.campaign;
+                    return matchesTableQuery({
+                        subject: campaign.subject,
+                        to: campaign.resourceLabel ?? campaign.resourceId,
+                        status: campaign.status,
+                        template: campaign.templateId,
+                    }, query);
+                }
+                const entry = row.entry;
+                return matchesTableQuery({
+                    subject: subjectOf(entry),
+                    confirmation: confirmationOf(entry),
+                    to: recipientOf(entry),
+                    audience: entry.resourceLabel ?? entry.resourceId,
+                    template: entry.templateLabel ?? entry.templateId,
+                    status: entry.status,
+                    via: sourceLabel(entry.source),
+                    delivery: deliveryOf(entry),
+                }, query);
+            });
+        }
+        if (!sort)
+            return next;
+        const key = sort.field;
+        const type = key === "when" ? "datetime" : "string";
+        return next.slice().sort((left, right) => compareFieldValues(activitySortValue(left, key), activitySortValue(right, key), type, sort.order));
+    }, [rows, query, sort]);
+    const tableOverflow = useTableOverflow(visibleRows.length);
     const showActions = Boolean(onCancel) && filter !== "history";
     const cancel = async (campaign) => {
         if (!onCancel)
@@ -124,7 +199,10 @@ export function EmailsActivityPanel({ campaigns, history, canSchedule, canHistor
         }
         return "No activity yet.";
     })();
-    return (_jsxs("div", { className: "vertebr-emails-activity", children: [_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsx("div", { className: "vertebr-table-toolbar-start", children: _jsxs("div", { className: "vertebr-emails-segment", role: "group", "aria-label": "Activity", children: [_jsx("button", { type: "button", "data-active": filter === "all" ? "true" : undefined, onClick: () => setFilter("all"), children: "All" }), _jsx("button", { type: "button", "data-active": filter === "scheduled" ? "true" : undefined, onClick: () => setFilter("scheduled"), children: "Scheduled" }), _jsx("button", { type: "button", "data-active": filter === "history" ? "true" : undefined, onClick: () => setFilter("history"), children: "History" })] }) }), _jsx("span", { className: "vertebr-count", children: rows.length })] }), rows.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: emptyCopy })) : (_jsx("div", { className: "vertebr-table-wrap", children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "When" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Subject" }), _jsx("th", { children: "Confirmation" }), _jsx("th", { children: "To" }), _jsx("th", { children: "Audience" }), _jsx("th", { children: "Template" }), _jsx("th", { children: "Via" }), _jsx("th", { children: "Delivery" }), showActions ? _jsx("th", { className: "vertebr-col-actions", children: "Actions" }) : null] }) }), _jsx("tbody", { children: rows.map((row) => {
+    const header = (label, field) => (_jsx("th", { children: _jsx(SortableHeader, { label: label, active: sort?.field === field, order: sort?.field === field ? sort.order : undefined, onSort: () => setSort(nextTableSort(sort, field, field === "when" ? "desc" : "asc")) }) }));
+    return (_jsxs("div", { className: "vertebr-emails-activity", children: [_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsx("div", { className: "vertebr-table-toolbar-start", children: _jsxs("div", { className: "vertebr-emails-segment", role: "group", "aria-label": "Activity", children: [_jsx("button", { type: "button", "data-active": filter === "all" ? "true" : undefined, onClick: () => setFilter("all"), children: "All" }), _jsx("button", { type: "button", "data-active": filter === "scheduled" ? "true" : undefined, onClick: () => setFilter("scheduled"), children: "Scheduled" }), _jsx("button", { type: "button", "data-active": filter === "history" ? "true" : undefined, onClick: () => setFilter("history"), children: "History" })] }) }), _jsx(TableSearch, { value: query, onChange: setQuery, "aria-label": "Search activity" }), _jsx(TableScrollControls, { canLeft: tableOverflow.canLeft, canRight: tableOverflow.canRight, onScroll: tableOverflow.scrollBy }), _jsx("span", { className: "vertebr-count", children: query.trim()
+                            ? `${visibleRows.length} of ${rows.length}`
+                            : rows.length })] }), rows.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: emptyCopy })) : visibleRows.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No matching activity." })) : (_jsx(TableWrap, { overflow: tableOverflow, children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [header("When", "when"), header("Status", "status"), header("Subject", "subject"), _jsx("th", { children: "Confirmation" }), header("To", "to"), header("Audience", "audience"), header("Template", "template"), _jsx("th", { children: "Via" }), _jsx("th", { children: "Delivery" }), showActions ? _jsx("th", { className: "vertebr-col-actions", children: "Actions" }) : null] }) }), _jsx("tbody", { children: visibleRows.map((row) => {
                                 if (row.kind === "scheduled") {
                                     const campaign = row.campaign;
                                     const badge = statusBadge("scheduled");
@@ -134,6 +212,6 @@ export function EmailsActivityPanel({ campaigns, history, canSchedule, canHistor
                                 const badge = statusBadge(entry.status);
                                 const confirmation = confirmationOf(entry);
                                 const recipient = recipientOf(entry);
-                                return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", { className: "vertebr-cell-datetime", children: formatWhen(entry.at) }) }), _jsx("td", { children: _jsx("span", { className: "vertebr-badge", "data-tone": badge.tone, children: badge.label }) }), _jsx("td", { children: subjectOf(entry) }), _jsx("td", { children: confirmation || _jsx(CellEmpty, {}) }), _jsx("td", { children: recipient || _jsx(CellEmpty, {}) }), _jsx("td", { children: entry.resourceLabel ?? entry.resourceId }), _jsx("td", { children: entry.templateLabel ?? humanize(entry.templateId) }), _jsx("td", { children: sourceLabel(entry.source) }), _jsx("td", { children: deliveryOf(entry) }), showActions ? (_jsx("td", { className: "vertebr-col-actions" })) : null] }, `history:${row.id}`));
+                                return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", { className: "vertebr-cell-datetime", children: formatWhen(entry.at) }) }), _jsx("td", { children: _jsx("span", { className: "vertebr-badge", "data-tone": badge.tone, children: badge.label }) }), _jsx("td", { children: subjectOf(entry) || _jsx(CellEmpty, {}) }), _jsx("td", { children: confirmation || _jsx(CellEmpty, {}) }), _jsx("td", { children: recipient || _jsx(CellEmpty, {}) }), _jsx("td", { children: (entry.resourceLabel ?? entry.resourceId) || (_jsx(CellEmpty, {})) }), _jsx("td", { children: (entry.templateLabel ?? humanize(entry.templateId)) || (_jsx(CellEmpty, {})) }), _jsx("td", { children: sourceLabel(entry.source) }), _jsx("td", { children: deliveryOf(entry) }), showActions ? (_jsx("td", { className: "vertebr-col-actions", children: _jsx(CellEmpty, {}) })) : null] }, `history:${row.id}`));
                             }) })] }) }))] }));
 }

package/dist/components/metrics/MetricsBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsBoard.d.ts","sourceRoot":"","sources":["../../../src/components/metrics/MetricsBoard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE/D,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6GF,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAsKnB"}
+{"version":3,"file":"MetricsBoard.d.ts","sourceRoot":"","sources":["../../../src/components/metrics/MetricsBoard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE/D,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAQjC,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6GF,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAmLnB"}

package/dist/components/metrics/MetricsBoard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Select from "@radix-ui/react-select";
 import { useMemo, useState } from "react";
 import { METRICS_RANGES, } from "../../lib/metricsRanges";
+import { TableScrollControls, TableWrap, useTableOverflow, } from "../table";
 import { MetricLineChart, MetricSparkline } from "./charts";
 function formatDelta(delta) {
     const abs = Math.abs(delta);
@@ -40,6 +41,7 @@ export function MetricsBoard({ label = "Overview", windowLabel, compareLabel, me
     const kpiIds = new Set(kpis.map((card) => card.id));
     const rest = metrics.filter((card) => !kpiIds.has(card.id));
     const [tableOpen, setTableOpen] = useState(true);
+    const tableOverflow = useTableOverflow(rest.length);
     const chartIds = useMemo(() => new Set(charts.map((chart) => chart.id)), [charts]);
     const [chartId, setChartId] = useState(() => charts[0]?.id ?? "");
     const activeChartId = chartIds.has(chartId) ? chartId : (charts[0]?.id ?? "");
@@ -53,5 +55,9 @@ export function MetricsBoard({ label = "Overview", windowLabel, compareLabel, me
                                             }
                                         }
                                         : undefined, children: [_jsxs("div", { className: "vertebr-kpi-top", children: [_jsx("p", { className: "vertebr-metric-label", children: card.label }), card.series && card.series.length > 1 ? (_jsx(MetricSparkline, { series: card.series, tone: card.tone })) : null] }), _jsx("p", { className: "vertebr-kpi-value", children: card.value }), _jsxs("div", { className: "vertebr-kpi-foot", children: [card.delta != null ? _jsx(Delta, { value: card.delta }) : null, card.hint ? (_jsx("span", { className: "vertebr-metric-hint", children: card.hint })) : null] })] }, card.id));
-                            }) }) })) : null, charts.length > 0 && activeChartId ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsx(MetricLineChart, { charts: charts, chartId: activeChartId, onChartIdChange: setChartId, compareLabel: compareLabel }) })) : null, rest.length > 0 ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsxs("div", { className: "vertebr-metrics-table-wrap", "data-collapsed": tableOpen ? undefined : "true", children: [_jsxs("button", { type: "button", className: "vertebr-metrics-table-head", "aria-expanded": tableOpen, onClick: () => setTableOpen((open) => !open), children: [_jsx("p", { className: "vertebr-chart-kicker", children: "Breakdown" }), _jsx("span", { className: "vertebr-metrics-chevron", "aria-hidden": "true" })] }), tableOpen ? (_jsxs("table", { className: "vertebr-table vertebr-metrics-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Metric" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Change" }), _jsx("th", { children: "Notes" })] }) }), _jsx("tbody", { children: rest.map((card) => (_jsxs("tr", { "data-tone": card.tone ?? "neutral", children: [_jsxs("td", { children: [_jsx("span", { className: "vertebr-metrics-table-label", children: card.label }), card.section ? (_jsx("span", { className: "vertebr-metrics-table-section", children: card.section })) : null] }), _jsx("td", { className: "vertebr-metrics-table-value", children: card.value }), _jsx("td", { children: _jsx(Delta, { value: card.delta }) }), _jsx("td", { className: "vertebr-metrics-table-notes", children: card.hint ?? "—" })] }, card.id))) })] })) : null] }) })) : null] }))] }));
+                            }) }) })) : null, charts.length > 0 && activeChartId ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsx(MetricLineChart, { charts: charts, chartId: activeChartId, onChartIdChange: setChartId, compareLabel: compareLabel }) })) : null, rest.length > 0 ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsxs("div", { className: "vertebr-metrics-table-wrap", "data-collapsed": tableOpen ? undefined : "true", children: [_jsxs("div", { className: "vertebr-metrics-table-head", children: [_jsxs("button", { type: "button", className: "vertebr-metrics-table-toggle", "aria-expanded": tableOpen, onClick: () => setTableOpen((open) => !open), children: [_jsx("p", { className: "vertebr-chart-kicker", children: "Breakdown" }), _jsx("span", { className: "vertebr-metrics-chevron", "aria-hidden": "true" })] }), _jsx(TableScrollControls, { canLeft: tableOverflow.canLeft, canRight: tableOverflow.canRight, onScroll: (direction) => {
+                                                if (!tableOpen)
+                                                    setTableOpen(true);
+                                                tableOverflow.scrollBy(direction);
+                                            } })] }), tableOpen ? (_jsx(TableWrap, { overflow: tableOverflow, children: _jsxs("table", { className: "vertebr-table vertebr-metrics-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Metric" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Change" }), _jsx("th", { children: "Notes" })] }) }), _jsx("tbody", { children: rest.map((card) => (_jsxs("tr", { "data-tone": card.tone ?? "neutral", children: [_jsxs("td", { children: [_jsx("span", { className: "vertebr-metrics-table-label", children: card.label }), card.section ? (_jsx("span", { className: "vertebr-metrics-table-section", children: card.section })) : null] }), _jsx("td", { className: "vertebr-metrics-table-value", children: card.value }), _jsx("td", { children: _jsx(Delta, { value: card.delta }) }), _jsx("td", { className: "vertebr-metrics-table-notes", children: card.hint ?? "—" })] }, card.id))) })] }) })) : null] }) })) : null] }))] }));
 }

package/dist/components/resources/ColumnVisibilityMenu.d.ts

@@ -7,5 +7,9 @@ export type ColumnVisibilityMenuProps = {
     visibility: Record<string, boolean>;
     onChange: (next: Record<string, boolean>) => void;
 };
+/**
+ * Column visibility — same filter-chip pattern as table field filters
+ * (quiet label + count pill + checklist menu).
+ */
 export declare function ColumnVisibilityMenu({ columns, visibility, onChange, }: ColumnVisibilityMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=ColumnVisibilityMenu.d.ts.map

package/dist/components/resources/ColumnVisibilityMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ColumnVisibilityMenu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,UAAU,EACV,QAAQ,GACT,EAAE,yBAAyB,+BAkF3B"}
+{"version":3,"file":"ColumnVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ColumnVisibilityMenu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,UAAU,EACV,QAAQ,GACT,EAAE,yBAAyB,+BAmG3B"}

package/dist/components/resources/ColumnVisibilityMenu.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+/**
+ * Column visibility — same filter-chip pattern as table field filters
+ * (quiet label + count pill + checklist menu).
+ */
 export function ColumnVisibilityMenu({ columns, visibility, onChange, }) {
     const [open, setOpen] = useState(false);
     const rootRef = useRef(null);
     const menuId = useId();
-    const hiddenCount = columns.filter((col) => visibility[col.id] === false).length;
+    const hiddenCount = columns.filter((col) => visibility[col.id] === false)
+        .length;
+    const visibleCount = columns.length - hiddenCount;
+    const filtering = hiddenCount > 0;
     useEffect(() => {
         if (!open)
             return;
@@ -24,17 +31,17 @@ export function ColumnVisibilityMenu({ columns, visibility, onChange, }) {
             window.removeEventListener("keydown", onKeyDown);
         };
     }, [open]);
-    const visibleCount = columns.length - hiddenCount;
-    return (_jsxs("div", { className: "vertebr-col-menu", ref: rootRef, children: [_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", "aria-expanded": open, "aria-controls": menuId, onClick: () => setOpen((value) => !value), children: ["Columns", hiddenCount > 0 ? (_jsx("span", { className: "vertebr-col-menu-count", children: visibleCount })) : null] }), open ? (_jsxs("div", { className: "vertebr-col-menu-panel", id: menuId, role: "menu", children: [_jsxs("div", { className: "vertebr-col-menu-head", children: [_jsx("span", { children: "Visible fields" }), _jsx("button", { type: "button", className: "vertebr-link-btn", onClick: () => {
+    return (_jsxs("div", { className: "vertebr-table-filter-control", ref: rootRef, "data-open": open ? "true" : undefined, "data-active": filtering ? "true" : undefined, children: [_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-table-filter-trigger", "aria-expanded": open, "aria-controls": menuId, "aria-label": filtering
+                    ? `Columns, ${visibleCount} of ${columns.length} visible`
+                    : "Columns", onClick: () => setOpen((value) => !value), children: ["Columns", filtering ? (_jsx("span", { className: "vertebr-table-filter-count", children: visibleCount })) : null] }), open ? (_jsxs("div", { className: "vertebr-table-filter-menu", id: menuId, role: "listbox", "aria-multiselectable": true, children: [_jsxs("div", { className: "vertebr-table-filter-menu-head", children: [_jsx("span", { children: "Columns" }), filtering ? (_jsx("button", { type: "button", className: "vertebr-link-btn", onClick: () => {
                                     const next = {};
                                     for (const col of columns)
                                         next[col.id] = true;
                                     onChange(next);
-                                }, children: "Show all" })] }), _jsx("ul", { className: "vertebr-col-menu-list", children: columns.map((col) => {
+                                }, children: "Show all" })) : null] }), _jsx("ul", { className: "vertebr-table-filter-list", children: columns.map((col) => {
                             const checked = visibility[col.id] !== false;
-                            return (_jsx("li", { children: _jsxs("label", { className: "vertebr-col-menu-item", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: checked && visibleCount <= 1, onChange: () => {
-                                                const next = { ...visibility, [col.id]: !checked };
-                                                onChange(next);
+                            return (_jsx("li", { children: _jsxs("label", { className: "vertebr-table-filter-item", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: checked && visibleCount <= 1, onChange: () => {
+                                                onChange({ ...visibility, [col.id]: !checked });
                                             } }), _jsx("span", { children: col.label })] }) }, col.id));
                         }) })] })) : null] }));
 }

package/dist/components/resources/ResourceTable.d.ts

@@ -1,4 +1,5 @@
 import type { FieldSchema, GalleryItem, MailPreviewResponse, ResourceActionMeta, ResourceUploadMeta } from "@vertebr/client";
+import { type TableSortState } from "../../lib/sort";
 type ResourcePanelProps = {
     schema: Record<string, FieldSchema>;
     items: Record<string, unknown>[];
@@ -26,8 +27,13 @@ type ResourcePanelProps = {
     onBulkAction?: (actionId: string, rowIds: string[], input?: Record<string, unknown>) => Promise<unknown>;
     listQuery?: boolean | Record<string, FieldSchema>;
     total?: number;
+    /** When true, show table skeleton instead of rows / empty. */
+    loading?: boolean;
     searchQuery?: string;
     onSearchChange?: (q: string) => void;
+    /** Active column sort (`schema[field].sortable`). */
+    sort?: TableSortState | null;
+    onSortChange?: (sort: TableSortState) => void;
     onUpload?: (field: string, files: File[]) => Promise<Array<{
         url: string;
         name?: string;
@@ -38,7 +44,7 @@ type ResourcePanelProps = {
     initialEditRowId?: string;
     onEditRowIdChange?: (rowId: string | null) => void;
 };
-export declare function ResourcePanel({ schema, items, permissions, actions, label, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions, onCollectionAction, bulkActions, onBulkAction, listQuery, total, searchQuery, onSearchChange, onUpload, galleryUpload, onListGallery, onUploadGallery, initialEditRowId, onEditRowIdChange, }: ResourcePanelProps): import("react").JSX.Element;
+export declare function ResourcePanel({ schema, items, permissions, actions, label, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions, onCollectionAction, bulkActions, onBulkAction, listQuery, total, loading, searchQuery, onSearchChange, sort: sortProp, onSortChange, onUpload, galleryUpload, onListGallery, onUploadGallery, initialEditRowId, onEditRowIdChange, }: ResourcePanelProps): import("react").JSX.Element;
 /** @deprecated Prefer ResourcePanel */
 export declare function ResourceTable(props: {
     schema: Record<string, FieldSchema>;

package/dist/components/resources/ResourceTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/resources/ResourceTable.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table";
 import { ConfigForm } from "../config/ConfigForm";
 import { BulkImageUploadModal } from "./BulkImageUploadModal";
-import { ColumnVisibilityMenu } from "./ColumnVisibilityMenu";
 import { ResourceCell } from "./ResourceCell";
 import { ResourceCreateModal } from "./ResourceCreateModal";
 import { actionInputSchema, ResourceActionModal, } from "./ResourceActionModal";
 import { ResourceMailModal } from "./ResourceMailModal";
 import { ResourceViewModal } from "./ResourceViewModal";
 import { VisibilityEyeToggle } from "../config/VisibilityEye";
+import { SortableHeader } from "./SortableHeader";
+import { TableFilters, TableScrollControls, TableSearch, TableSkeleton, TableWrap, matchesTableFilters, matchesTableQuery, resolveFieldFilter, useTableOverflow, } from "../table";
+import { nextTableSort, sortRows, } from "../../lib/sort";
 function actionHasInput(meta) {
     return Boolean(meta?.input && Object.keys(meta.input).length > 0);
 }
@@ -130,7 +132,7 @@ function titleFromFilename(name) {
         .replace(/\s+/g, " ")
         .trim();
 }
-export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions = {}, onCollectionAction, bulkActions = {}, onBulkAction, listQuery, total, searchQuery = "", onSearchChange, onUpload, galleryUpload, onListGallery, onUploadGallery, initialEditRowId, onEditRowIdChange, }) {
+export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions = {}, onCollectionAction, bulkActions = {}, onBulkAction, listQuery, total, loading = false, searchQuery = "", onSearchChange, sort: sortProp = null, onSortChange, onUpload, galleryUpload, onListGallery, onUploadGallery, initialEditRowId, onEditRowIdChange, }) {
     const [editing, setEditing] = useState(null);
     const [creating, setCreating] = useState(false);
     const [viewing, setViewing] = useState(null);
@@ -138,16 +140,17 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     const [busyAction, setBusyAction] = useState(null);
     const [selected, setSelected] = useState(new Set());
     const [searchDraft, setSearchDraft] = useState(searchQuery);
+    const [filters, setFilters] = useState({});
+    const [localSort, setLocalSort] = useState(null);
+    const sort = onSortChange ? sortProp : localSort;
+    const setSort = onSortChange ?? setLocalSort;
     const [pendingAction, setPendingAction] = useState(null);
     const [pendingCollectionAction, setPendingCollectionAction] = useState(null);
     const [pendingBulkAction, setPendingBulkAction] = useState(null);
-    const tableWrapRef = useRef(null);
-    const [tableOverflow, setTableOverflow] = useState({
-        overflow: false,
-        canLeft: false,
-        canRight: false,
-    });
     const [columnVisibility, setColumnVisibility] = useState(() => readVisibility(storageKey, schema));
+    const tableOverflow = useTableOverflow(`${items.length}:${Object.keys(columnVisibility)
+        .filter((key) => columnVisibility[key] !== false)
+        .join(",")}`);
     /** Pending list visibility toggles keyed by row id → field → value. */
     const [visibilityDrafts, setVisibilityDrafts] = useState({});
     const [savingVisibility, setSavingVisibility] = useState(false);
@@ -163,19 +166,40 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     const visibilityFields = useMemo(() => fieldKeys.filter((key) => isListVisibilityField(key, schema[key])), [fieldKeys, schema]);
     const selectable = Boolean((onAction && actionEntries.length > 0) ||
         (onBulkAction && bulkActionEntries.length > 0));
-    const showSearch = Boolean(listQuery && onSearchChange);
+    /** Server `q` when listQuery is advertised; otherwise filter loaded rows. */
+    const serverSearch = Boolean(listQuery && onSearchChange);
     useEffect(() => {
         setSearchDraft(searchQuery);
     }, [searchQuery]);
     useEffect(() => {
-        if (!onSearchChange)
+        if (!serverSearch || !onSearchChange)
             return;
         const handle = window.setTimeout(() => {
             if (searchDraft !== searchQuery)
                 onSearchChange(searchDraft);
         }, 250);
         return () => window.clearTimeout(handle);
-    }, [searchDraft, searchQuery, onSearchChange]);
+    }, [searchDraft, searchQuery, onSearchChange, serverSearch]);
+    const filterColumns = useMemo(() => {
+        return fieldKeys
+            .map((key) => {
+            const field = schema[key];
+            if (!field)
+                return null;
+            return resolveFieldFilter(key, field.label ?? humanizeKey(key), field);
+        })
+            .filter((column) => Boolean(column));
+    }, [fieldKeys, schema]);
+    const visibleItems = useMemo(() => {
+        const searched = serverSearch
+            ? items
+            : items.filter((row) => matchesTableQuery(row, searchDraft));
+        const filterDefs = Object.fromEntries(filterColumns.map((column) => [
+            column.id,
+            (row) => row[column.id],
+        ]));
+        return searched.filter((row) => matchesTableFilters(row, filters, filterDefs));
+    }, [items, searchDraft, serverSearch, filters, filterColumns]);
     const openEdit = useCallback((row) => {
         setEditing(row);
         onEditRowIdChange?.(resolveRowId(row, rowIdKeys));
@@ -384,49 +408,12 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     useEffect(() => {
         setColumnVisibility(readVisibility(storageKey, schema));
     }, [storageKey]);
+    useEffect(() => {
+        setFilters({});
+    }, [storageKey]);
     useEffect(() => {
         writeVisibility(storageKey, columnVisibility);
     }, [storageKey, columnVisibility]);
-    const updateTableOverflow = useCallback(() => {
-        const el = tableWrapRef.current;
-        if (!el) {
-            setTableOverflow({ overflow: false, canLeft: false, canRight: false });
-            return;
-        }
-        const overflow = el.scrollWidth > el.clientWidth + 2;
-        setTableOverflow({
-            overflow,
-            canLeft: overflow && el.scrollLeft > 2,
-            canRight: overflow && el.scrollLeft + el.clientWidth < el.scrollWidth - 2,
-        });
-    }, []);
-    useEffect(() => {
-        const el = tableWrapRef.current;
-        if (!el)
-            return;
-        updateTableOverflow();
-        const onScroll = () => updateTableOverflow();
-        el.addEventListener("scroll", onScroll, { passive: true });
-        const observer = new ResizeObserver(updateTableOverflow);
-        observer.observe(el);
-        const table = el.querySelector("table");
-        if (table)
-            observer.observe(table);
-        return () => {
-            el.removeEventListener("scroll", onScroll);
-            observer.disconnect();
-        };
-    }, [updateTableOverflow, items.length, columnVisibility]);
-    const scrollTable = (direction) => {
-        const el = tableWrapRef.current;
-        if (!el)
-            return;
-        const amount = Math.max(220, Math.round(el.clientWidth * 0.55));
-        el.scrollBy({
-            left: direction === "left" ? -amount : amount,
-            behavior: "smooth",
-        });
-    };
     const columnOptions = useMemo(() => fieldKeys.map((key) => ({
         id: key,
         label: schema[key]?.label ?? humanizeKey(key),
@@ -474,7 +461,16 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
                 return {
                     id: key,
                     accessorKey: key,
-                    header: field?.label ?? humanizeKey(key),
+                    header: () => {
+                        const label = field?.label ?? humanizeKey(key);
+                        if (!field?.sortable)
+                            return label;
+                        const active = sort?.field === key;
+                        const preferredFirst = field.type === "datetime" || field.type === "number"
+                            ? "desc"
+                            : "asc";
+                        return (_jsx(SortableHeader, { label: label, active: Boolean(active), order: active ? sort?.order : undefined, onSort: () => setSort(nextTableSort(sort, key, preferredFirst)) }));
+                    },
                     meta: { fieldKey: key, field },
                     cell: ({ row, getValue, }) => {
                         if (listVisibility) {
@@ -525,9 +521,12 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
         rowIdKeys,
         visibilityDrafts,
         setVisibilityDraft,
+        sort,
+        setSort,
     ]);
+    const sortedItems = useMemo(() => sortRows(visibleItems, sort, schema), [visibleItems, sort, schema]);
     const table = useReactTable({
-        data: items,
+        data: sortedItems,
         columns,
         state: { columnVisibility },
         onColumnVisibilityChange: setColumnVisibility,
@@ -559,7 +558,13 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
                         closeEdit();
                     } })] }));
     }
-    const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [columnOptions.length > 0 ? (_jsx(ColumnVisibilityMenu, { columns: columnOptions, visibility: columnVisibility, onChange: setColumnVisibility })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null, visibilityFields.length > 0 && dirtyVisibilityCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [dirtyVisibilityCount, " visibility change", dirtyVisibilityCount === 1 ? "" : "s"] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: savingVisibility, onClick: () => void saveVisibility(), children: savingVisibility ? "Saving…" : "Save visibility" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: savingVisibility, onClick: () => setVisibilityDrafts({}), children: "Discard" })] })) : null, collectionActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueCollectionAction(actionId), children: meta.label }, actionId))), selectable && selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [selected.size, " selected"] }), actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [...selected]), children: meta.label }, actionId))), bulkActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueBulkAction(actionId, [...selected]), children: meta.label }, `bulk:${actionId}`))), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setSelected(new Set()), children: "Clear" })] })) : null] }), tableOverflow.overflow ? (_jsxs("div", { className: "vertebr-table-scroll-controls", role: "group", "aria-label": "Scroll columns", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canLeft, onClick: () => scrollTable("left"), "aria-label": "Scroll columns left", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canRight, onClick: () => scrollTable("right"), "aria-label": "Scroll columns right", children: _jsx(ChevronRightIcon, {}) })] })) : null] }));
+    const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [filterColumns.length > 0 || columnOptions.length > 0 ? (_jsx(TableFilters, { columns: filterColumns, selected: filters, onChange: setFilters, columnVisibility: columnOptions.length > 0
+                            ? {
+                                columns: columnOptions,
+                                visibility: columnVisibility,
+                                onChange: setColumnVisibility,
+                            }
+                            : undefined })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null, visibilityFields.length > 0 && dirtyVisibilityCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [dirtyVisibilityCount, " visibility change", dirtyVisibilityCount === 1 ? "" : "s"] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: savingVisibility, onClick: () => void saveVisibility(), children: savingVisibility ? "Saving…" : "Save visibility" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: savingVisibility, onClick: () => setVisibilityDrafts({}), children: "Discard" })] })) : null, collectionActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueCollectionAction(actionId), children: meta.label }, actionId))), selectable && selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [selected.size, " selected"] }), actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [...selected]), children: meta.label }, actionId))), bulkActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueBulkAction(actionId, [...selected]), children: meta.label }, `bulk:${actionId}`))), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setSelected(new Set()), children: "Clear" })] })) : null] }), _jsx(TableScrollControls, { canLeft: tableOverflow.canLeft, canRight: tableOverflow.canRight, onScroll: tableOverflow.scrollBy })] }));
     const bulkModal = bulkOpen && uploads && onUpload ? (_jsx(BulkImageUploadModal, { uploads: uploads, canCreate: canCreate, fieldLabels: Object.fromEntries(Object.keys(uploads).map((key) => [
             key,
             schema[key]?.label ?? humanizeKey(key),
@@ -588,15 +593,36 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     const pendingCollectionModal = pendingCollectionAction &&
         collectionActions[pendingCollectionAction]?.input ? (_jsx(ResourceActionModal, { title: collectionActions[pendingCollectionAction]?.label ?? "Run action", eyebrow: "This resource", schema: actionInputSchema(collectionActions[pendingCollectionAction].input), submitLabel: busyAction ? "Working…" : "Run", onClose: () => setPendingCollectionAction(null), onSubmit: (value) => runCollectionAction(pendingCollectionAction, value) })) : null;
     const pendingBulkModal = pendingBulkAction && bulkActions[pendingBulkAction]?.input ? (_jsx(ResourceActionModal, { title: bulkActions[pendingBulkAction]?.label ?? "Bulk action", eyebrow: `${selected.size} selected`, schema: actionInputSchema(bulkActions[pendingBulkAction].input), submitLabel: busyAction ? "Working…" : "Run", onClose: () => setPendingBulkAction(null), onSubmit: (value) => runBulkAction(pendingBulkAction, [...selected], value) })) : null;
-    const recordsHead = (_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsxs("div", { className: "vertebr-panel-head-actions", children: [showSearch ? (_jsx("input", { className: "vertebr-resource-search", type: "search", placeholder: "Search\u2026", value: searchDraft, onChange: (event) => setSearchDraft(event.target.value), "aria-label": "Search records" })) : null, canCreate ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setCreating(true), children: [_jsx(PlusIcon, {}), createLabel] })) : null, _jsx("span", { className: "vertebr-count", children: total != null ? `${items.length} of ${total}` : items.length })] })] }));
+    const recordsHead = (_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsxs("div", { className: "vertebr-panel-head-actions", children: [_jsx(TableSearch, { value: searchDraft, onChange: setSearchDraft, "aria-label": "Search records" }), canCreate ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setCreating(true), children: [_jsx(PlusIcon, {}), createLabel] })) : null, _jsx("span", { className: "vertebr-count", children: loading
+                            ? "…"
+                            : total != null
+                                ? `${visibleItems.length} of ${total}`
+                                : visibleItems.length !== items.length
+                                    ? `${visibleItems.length} of ${items.length}`
+                                    : visibleItems.length })] })] }));
+    if (loading) {
+        return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, _jsx(TableSkeleton, { columns: fieldKeys.map((key) => ({
+                        id: key,
+                        label: schema[key]?.label ?? humanizeKey(key),
+                    })) })] }));
+    }
     if (items.length === 0) {
-        return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, canUpload ||
+        return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, filterColumns.length > 0 ||
                     columnOptions.length > 0 ||
+                    canUpload ||
                     collectionActionEntries.length > 0
                     ? toolbar
                     : null, _jsx("div", { className: "vertebr-empty", children: "No rows yet." }), bulkModal, createModal, pendingActionModal, pendingCollectionModal, pendingBulkModal] }));
     }
-    return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, toolbar, _jsx("div", { className: "vertebr-table-wrap", ref: tableWrapRef, "data-overflow": tableOverflow.overflow ? "true" : undefined, "data-overflow-left": tableOverflow.canLeft ? "true" : undefined, "data-overflow-right": tableOverflow.canRight ? "true" : undefined, children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { className: header.column.id === "_actions"
+    if (visibleItems.length === 0) {
+        return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, filterColumns.length > 0 ||
+                    columnOptions.length > 0 ||
+                    canUpload ||
+                    collectionActionEntries.length > 0
+                    ? toolbar
+                    : null, _jsx("div", { className: "vertebr-empty", children: "No matching rows." }), bulkModal, createModal, pendingActionModal, pendingCollectionModal, pendingBulkModal] }));
+    }
+    return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, toolbar, _jsx(TableWrap, { overflow: tableOverflow, transitionKey: JSON.stringify(filters), children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { className: header.column.id === "_actions"
                                         ? "vertebr-col-actions"
                                         : header.column.id === "_select"
                                             ? "vertebr-col-select"
@@ -627,12 +653,6 @@ export function ResourceTable(props) {
 function PlusIcon() {
     return (_jsxs("svg", { className: "vertebr-btn-glyph", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 5v14" }), _jsx("path", { d: "M5 12h14" })] }));
 }
-function ChevronLeftIcon() {
-    return (_jsx("svg", { className: "vertebr-btn-glyph", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m15 18-6-6 6-6" }) }));
-}
-function ChevronRightIcon() {
-    return (_jsx("svg", { className: "vertebr-btn-glyph", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
-}
 function ImageUploadIcon() {
     return (_jsxs("svg", { className: "vertebr-btn-glyph", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M16 5h6" }), _jsx("path", { d: "M19 2v6" }), _jsx("rect", { x: "3", y: "7", width: "14", height: "14", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "12.5", r: "1.5" }), _jsx("path", { d: "m17 21-4.5-4.5L7 21" })] }));
 }

package/dist/components/resources/SortableHeader.d.ts

@@ -0,0 +1,9 @@
+import type { SortOrder } from "../../lib/sort";
+export type SortableHeaderProps = {
+    label: string;
+    active: boolean;
+    order?: SortOrder;
+    onSort: () => void;
+};
+export declare function SortableHeader({ label, active, order, onSort, }: SortableHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=SortableHeader.d.ts.map

package/dist/components/resources/SortableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/resources/SortableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,GACP,EAAE,mBAAmB,+BAuBrB"}

package/dist/components/resources/SortableHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SortableHeader({ label, active, order, onSort, }) {
+    return (_jsxs("button", { type: "button", className: "vertebr-th-sort", "data-active": active ? "true" : undefined, "data-order": active ? order : undefined, "aria-label": active
+            ? `Sorted by ${label}, ${order === "desc" ? "descending" : "ascending"}. Click to reverse.`
+            : `Sort by ${label}`, onClick: (event) => {
+            event.stopPropagation();
+            onSort();
+        }, children: [_jsx("span", { children: label }), _jsx("span", { className: "vertebr-th-sort-icon", "aria-hidden": "true", children: active ? (order === "desc" ? "↓" : "↑") : "↕" })] }));
+}

package/dist/components/table/TableFilters.d.ts

@@ -0,0 +1,20 @@
+import type { TableFilterColumn, TableFilterState } from "./filterModel";
+import { type ColumnOption } from "../resources/ColumnVisibilityMenu";
+export type TableColumnVisibilityProps = {
+    columns: ColumnOption[];
+    visibility: Record<string, boolean>;
+    onChange: (next: Record<string, boolean>) => void;
+};
+export type TableFiltersProps = {
+    columns: TableFilterColumn[];
+    selected: TableFilterState;
+    onChange: (next: TableFilterState) => void;
+    /** Optional Columns chip — same filter-chip UI as field filters. */
+    columnVisibility?: TableColumnVisibilityProps;
+};
+/**
+ * Host-declared filter chips (+ optional Columns chip).
+ * Selected values stay checked in each dropdown.
+ */
+export declare function TableFilters({ columns, selected, onChange, columnVisibility, }: TableFiltersProps): import("react").JSX.Element | null;
+//# sourceMappingURL=TableFilters.d.ts.map

package/dist/components/table/TableFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableFilters.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMzE,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3C,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,GACjB,EAAE,iBAAiB,sCA4CnB"}