@tristan2828/ui-foundation 3.21.0 → 3.22.0

package/conventions/docs/add-an-entity.md

@@ -189,7 +189,12 @@ is a filled-in example while the Widgets demo is still here).
    - `src/routes/widgets/widgets-table.tsx` →
      `src/routes/<entity>/<entity>-table.tsx` — thin consumer of the
      foundation's `<DataTable>`. Swap the type, columns, and toolbar
-     filters.
+     filters. More than three filters (search, saved views aside): keep
+     the most used in the toolbar and put the rest inside
+     `<SecondaryFilters>`, as the template does with Extra Categories,
+     Progress and In Stock. Pass it each filter that's on as an
+     `ActiveFilter` (its chip text and how to take it off) and an
+     `onClear` that clears them all in one `setFilters` call.
    - `src/routes/widgets/widget-view.tsx` →
      `src/routes/<entity>/<entity>-view.tsx` — thin consumer of the
      foundation's `<EntityView>`. Swap the title, badges and sections for

package/dist/components/app/data-table.js

@@ -37,20 +37,27 @@ function leafColumnIds(columns) {
 function TableSkeleton({ columnCount }) {
     return (_jsx("div", { className: "flex flex-col gap-2 p-2", "data-state": "loading", children: Array.from({ length: 5 }, (_, row) => (_jsx("div", { className: "flex gap-4", children: Array.from({ length: columnCount }, (_, col) => (_jsx(Skeleton, { className: "h-8 flex-1" }, col))) }, row))) }));
 }
-// The pinned cell gets a flat `bg-background`, not `bg-inherit`: the zebra
+// The pinned cell gets an opaque background, not `bg-inherit`: the zebra
 // stripe (table.tsx) is a *translucent* color, so inheriting it would let
 // the columns scrolling behind show through at 40% opacity — exactly the
-// bleed-through a solid background avoids. That also means the pinned
-// column shows no stripe, which is why it is the thing that carries the
-// hover highlight. --accent is only ~3% off the page background, so a
-// solid left edge marker carries the signal; an inset shadow rather than a
-// border, so nothing reflows.
-const PINNED_COLUMN_CLASS = 'sticky left-0 z-10 border-r bg-background group-hover/row:bg-accent ' +
-    'group-hover/row:shadow-[inset_3px_0_0_0_var(--primary)]';
+// bleed-through a solid background avoids. On an even row it's the stripe
+// pre-mixed onto the page (--table-stripe), so the stripe runs the whole
+// row's width (issue #92); `:where()` keeps that rule's specificity at the
+// background's, so the hover below still wins on every row. The pinned
+// cell carries the hover highlight. --accent is only ~3% off the page
+// background, so a solid left edge marker carries the signal; an inset
+// shadow rather than a border, so nothing reflows.
+const PINNED_CELL_CLASS = 'z-10 bg-background [:where(tbody>tr:nth-child(even))>&]:bg-(--table-stripe) group-hover/row:bg-accent';
+const PINNED_COLUMN_CLASS = `sticky left-0 border-r ${PINNED_CELL_CLASS} group-hover/row:shadow-[inset_3px_0_0_0_var(--primary)]`;
 // The right-edge mirror, opaque for the same reason. Its edge marker points
 // inward from the right, so the two pinned columns bracket the row.
-const PINNED_LAST_COLUMN_CLASS = 'sticky right-0 z-10 border-l bg-background group-hover/row:bg-accent ' +
-    'group-hover/row:shadow-[inset_-3px_0_0_0_var(--primary)]';
+const PINNED_LAST_COLUMN_CLASS = `sticky right-0 border-l ${PINNED_CELL_CLASS} group-hover/row:shadow-[inset_-3px_0_0_0_var(--primary)]`;
+// A pinned first column's content, capped below md at 45% of the table's
+// scroll area (`cqw`: the container is an inline-size query container)
+// and wrapping, so a long title can't widen the column past the screen
+// and leave every other column scrolling underneath it (issue #91).
+// Wider screens are unchanged: the column sizes to its content.
+const PINNED_FIRST_CONTENT_CLASS = 'max-md:max-w-[45cqw] max-md:whitespace-normal max-md:break-words';
 // Hover highlights the pinned cell, not the whole row. A row-level hover
 // cannot be made consistent against the zebra stripe: `tr:nth-child(even)`
 // is specificity (0,2,1) and `tr:hover` is (0,2,0), so the stripe wins and
@@ -169,9 +176,10 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                         // scrollable (wheel, trackpad, drag, and the sync effect); it
                         // just no longer draws a bar directly under the last row.
                         containerClassName: cn(pinFirstColumn &&
-                            '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
+                            '@container [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
                                         const canSort = header.column.getCanSort();
                                         const sortDirection = header.column.getIsSorted();
+                                        const content = header.isPlaceholder ? null : canSort ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext()));
                                         return (_jsx(TableHead, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn &&
                                                 index === headerGroup.headers.length - 1 &&
                                                 PINNED_LAST_COLUMN_CLASS, header.column.columnDef.meta?.align === 'center' && 'text-center'), "aria-sort": !canSort
@@ -180,8 +188,8 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                                     ? 'ascending'
                                                     : sortDirection === 'desc'
                                                         ? 'descending'
-                                                        : 'none', children: header.isPlaceholder ? null : canSort ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext())) }, header.id));
+                                                        : 'none', children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: content })) : (content) }, header.id));
                                     }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { className: cn((pinFirstColumn || pinLastColumn) && ROW_GROUP_CLASS), children: row.getVisibleCells().map((cell, index) => (_jsx(TableCell, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn &&
                                             index === row.getVisibleCells().length - 1 &&
-                                            PINNED_LAST_COLUMN_CLASS, cell.column.columnDef.meta?.align === 'center' && 'text-center'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }), pinFirstColumn && isOverflowing && (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, "data-slot": "bottom-scrollbar", className: "sticky bottom-0 z-20 h-4 overflow-x-auto border-t border-border bg-background", children: _jsx("div", { style: { width: scrollWidth, height: 1 } }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "type-body text-muted-foreground", children: [total === 0 ? 0 : (page - 1) * pageSize + 1, '–', Math.min(page * pageSize, total), " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "type-body text-muted-foreground", children: ["Page ", page, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRightIcon, {}) })] })] })] }))] }));
+                                            PINNED_LAST_COLUMN_CLASS, cell.column.columnDef.meta?.align === 'center' && 'text-center'), children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }, row.id))) })] }), pinFirstColumn && isOverflowing && (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, "data-slot": "bottom-scrollbar", className: "sticky bottom-0 z-20 h-4 overflow-x-auto border-t border-border bg-background", children: _jsx("div", { style: { width: scrollWidth, height: 1 } }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "type-body text-muted-foreground", children: [total === 0 ? 0 : (page - 1) * pageSize + 1, '–', Math.min(page * pageSize, total), " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "type-body text-muted-foreground", children: ["Page ", page, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRightIcon, {}) })] })] })] }))] }));
 }

package/dist/components/app/secondary-filters.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+/** A filter that's on: its chip's text ("In stock: No") and how to take it off. */
+export type ActiveFilter = {
+    id: string;
+    label: string;
+    onRemove: () => void;
+};
+export type SecondaryFiltersProps = {
+    /** The filter controls the button opens, each with its own label. */
+    children: ReactNode;
+    /** The filters among them that are on now, in the order their chips show. */
+    active: readonly ActiveFilter[];
+    /** Takes every one of them off at once. */
+    onClear: () => void;
+    /** The button's text. */
+    label?: string;
+};
+export declare function SecondaryFilters({ children, active, onClear, label }: SecondaryFiltersProps): import("react").JSX.Element;

package/dist/components/app/secondary-filters.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A table toolbar's less-used filters behind one "Filters" button, so a
+// table with many filters still starts near the top of the page (issue
+// #93). The primary filters (search, status, whatever most visits use)
+// stay in the toolbar; this goes beside them, holding the rest:
+//
+// - The button says how many of its filters are on ("Filters 2", named
+//   "Filters, 2 active"), and opens them in a popover, or a sheet from the
+//   bottom on a phone. Base UI gives focus back to the button on close.
+// - Each filter that's on shows beside the button as a chip with a remove
+//   button, so a filtered list never looks unfiltered while they're
+//   hidden; "Clear filters" takes them all off. Both are here too, in the
+//   panel's footer.
+// - It holds no state of its own: the app passes what's on (`active`, from
+//   the URL like every filter, useTableUrlState), so the count and chips
+//   follow back/forward and saved views. Collapsing is display only.
+// - Esc in a filter's open list closes the list only (Base UI's lists keep
+//   their Esc); the next one closes the panel.
+import { useState } from 'react';
+import { SlidersHorizontalIcon, XIcon } from 'lucide-react';
+import { Button } from '../ui/button.js';
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '../ui/popover.js';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet.js';
+import { useIsMobile } from '../../hooks/use-mobile.js';
+export function SecondaryFilters({ children, active, onClear, label = 'Filters' }) {
+    const isMobile = useIsMobile();
+    const [open, setOpen] = useState(false);
+    const count = active.length;
+    const trigger = (_jsxs(Button, { variant: "outline", "aria-label": count > 0 ? `${label}, ${count} active` : label, children: [_jsx(SlidersHorizontalIcon, { "aria-hidden": "true" }), label, count > 0 && (_jsx("span", { "aria-hidden": "true", className: "rounded-full bg-primary px-1.5 type-caption text-primary-foreground tabular-nums", children: count }))] }));
+    const footer = (_jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: count === 0, onClick: onClear, children: "Clear filters" }), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Done" })] }));
+    return (_jsxs("div", { "data-slot": "secondary-filters", className: "flex flex-wrap items-center gap-2", children: [isMobile ? (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { render: trigger }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] overflow-y-auto", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: label }) }), _jsx("div", { className: "flex flex-col gap-3 px-4 [&>*]:w-full", children: children }), _jsx(SheetFooter, { children: footer })] })] })) : (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { render: trigger }), _jsxs(PopoverContent, { align: "start", className: "w-auto min-w-64 gap-3 p-3", children: [_jsx(PopoverTitle, { children: label }), _jsx("div", { className: "flex flex-col gap-3", children: children }), footer] })] })), active.map((filter) => (_jsxs("span", { "data-slot": "secondary-filter-chip", className: "inline-flex h-7 items-center gap-0.5 rounded-md bg-muted pr-0.5 pl-2 type-caption text-foreground", children: [filter.label, _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": `Remove filter: ${filter.label}`, onClick: filter.onRemove, children: _jsx(XIcon, { "aria-hidden": "true" }) })] }, filter.id))), count > 1 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Clear filters" }))] }));
+}

package/dist/components/ui/combobox.js

@@ -53,8 +53,14 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
             // it after the chip ("Remove fragile") when the chip is plain text.
             , { "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove", render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
 }
+// Patched (ui-foundation, issue #94): upstream's input always keeps 4rem,
+// so chips that fit on one line still pushed it onto an empty second one
+// and the control stood twice as tall as a Select beside it. With chips
+// in and no focus it takes only what's left of the chips' line (none, if
+// they fill it); focused, it gets its 4rem back to type in, wrapping then
+// if the line is full.
 function ComboboxChipsInput({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none [[data-slot=combobox-chips]:has([data-slot=combobox-chip])_&:not(:focus)]:min-w-0", className), ...props }));
 }
 function useComboboxAnchor() {
     return React.useRef(null);

package/dist/hooks/use-table-url-state.d.ts

@@ -9,7 +9,7 @@ export declare function useTableUrlState<F extends string, M extends string = ne
     setPage: (next: number) => void;
     setSorting: (next: SortingState) => void;
     setFilter: (name: F, value: string) => void;
-    setFilters: (changes: Partial<Record<F, string>>) => void;
+    setFilters: (changes: Partial<Record<F, string>> & Partial<Record<M, string[]>>) => void;
     setMultiFilter: (name: M, values: string[]) => void;
     applyView: (view: TableView<F, M>) => void;
 };

package/dist/hooks/use-table-url-state.js

@@ -36,11 +36,12 @@ export function useTableUrlState(filterNames, multiFilterNames = [], views = {})
         setPage: (next) => update({ page: next > 1 ? String(next) : null }),
         setSorting: (next) => update({ sort: serializeSort(next), page: null }),
         setFilter: (name, value) => update({ [name]: value, page: null }),
-        // Several single-value filters in one call — for any user action that
-        // changes more than one (both ends of a date range, "clear all"). Two
-        // setFilter()s in the same tick lose all but the last: react-router
-        // hands each setSearchParams updater the params from the last render,
-        // not the ones the previous updater produced.
+        // Several filters in one call — for any user action that changes more
+        // than one (both ends of a date range, "clear filters"). Two setters in
+        // the same tick lose all but the last: react-router hands each
+        // setSearchParams updater the params from the last render, not the
+        // ones the previous updater produced. Single-value filters take a
+        // string ('' clears), multi-value ones a list ([] clears).
         setFilters: (changes) => update({ ...changes, page: null }),
         setMultiFilter: (name, values) => update({ [name]: values, page: null }),
         // Replaces the whole filter + sort state at once — a saved view. See

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { ListEditor } from './components/app/list-editor.js';
 export { PasswordInput } from './components/app/password-input.js';
 export { RichTextEditor, type RichTextEditorProps } from './components/app/rich-text-editor.js';
 export { RouteErrorBoundary } from './components/app/route-error-boundary.js';
+export { SecondaryFilters, type ActiveFilter, type SecondaryFiltersProps } from './components/app/secondary-filters.js';
 export { StageCircle, type StageCircleProps, type StageCircleStage, type StageCircleTone, } from './components/app/stage-circle.js';
 export { ThemeProvider } from './components/theme-provider.js';
 export { LoginRoute, type LoginRouteProps } from './routes/login.js';

package/dist/index.js

@@ -20,6 +20,7 @@ export { ListEditor } from './components/app/list-editor.js';
 export { PasswordInput } from './components/app/password-input.js';
 export { RichTextEditor } from './components/app/rich-text-editor.js';
 export { RouteErrorBoundary } from './components/app/route-error-boundary.js';
+export { SecondaryFilters } from './components/app/secondary-filters.js';
 export { StageCircle, } from './components/app/stage-circle.js';
 export { ThemeProvider } from './components/theme-provider.js';
 // Screens outside the app shell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {

package/styles/theme.css

@@ -198,6 +198,11 @@
   --category-6: var(--category-6-700);
   --category-7: var(--category-7-700);
   --category-8: var(--category-8-700);
+  /* The zebra stripe (table.tsx: bg-muted/40 on even rows) mixed onto the
+     page, opaque: what a pinned table cell paints on an even row, so it
+     matches the row without letting scrolled columns show through. Mixed
+     in sRGB, as the browser composites the translucent stripe. */
+  --table-stripe: color-mix(in srgb, var(--muted) 40%, var(--background));
   --border: var(--gray-200);
   --input: var(--gray-200);
   --ring: var(--gray-400);
@@ -269,6 +274,7 @@
   --category-6: var(--category-6-400);
   --category-7: var(--category-7-400);
   --category-8: var(--category-8-400);
+  --table-stripe: color-mix(in srgb, var(--muted) 40%, var(--background));
   --border: var(--white-a10);
   --input: var(--white-a15);
   --ring: var(--gray-500);