@tristan2828/ui-foundation 3.20.1 → 3.22.0

package/dist/components/app/rich-text-table-menu.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The fixed toolbar's Table menu: a table inserted where the caret is, or,
+// in a table, its rows, columns and alignment (rich-text-table.ts). A menu
+// button in the toolbar's row (one of its tab stops' places, moved to with
+// the arrow keys like the rest); the menu itself is Base UI's (ARIA's menu
+// pattern). Picking an item gives focus back to the text, the caret where
+// it was (the editor keeps its selection while the menu has focus); Esc
+// gives it back to the button, as a menu button's does.
+import { useRef } from 'react';
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BetweenHorizontalEndIcon, BetweenHorizontalStartIcon, BetweenVerticalEndIcon, BetweenVerticalStartIcon, ChevronDownIcon, TableIcon, Trash2Icon, } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { toggleVariants } from '../ui/toggle.js';
+import { tableAt } from './rich-text-formats.js';
+import { columnAlignment, tableActionEnabled } from './rich-text-table.js';
+const ROWS = [
+    { action: 'rowAbove', label: 'Insert row above', icon: BetweenHorizontalStartIcon },
+    { action: 'rowBelow', label: 'Insert row below', icon: BetweenHorizontalEndIcon },
+    { action: 'columnLeft', label: 'Insert column left', icon: BetweenVerticalStartIcon },
+    { action: 'columnRight', label: 'Insert column right', icon: BetweenVerticalEndIcon },
+];
+const ALIGNMENTS = [
+    { value: 'left', action: 'alignLeft', label: 'Left', icon: AlignLeftIcon },
+    { value: 'center', action: 'alignCenter', label: 'Center', icon: AlignCenterIcon },
+    { value: 'right', action: 'alignRight', label: 'Right', icon: AlignRightIcon },
+];
+const DELETES = [
+    { action: 'deleteRow', label: 'Delete row', icon: Trash2Icon },
+    { action: 'deleteColumn', label: 'Delete column', icon: Trash2Icon },
+    { action: 'deleteTable', label: 'Delete table', icon: Trash2Icon },
+];
+export function RichTextTableMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onInsert, onAction, text, ref, }) {
+    const inTable = state ? tableAt(state) !== null : false;
+    const enabled = (action) => (state ? tableActionEnabled(state, action) : false);
+    // Whether the menu is closing because an item was picked.
+    const picked = useRef(false);
+    const run = (action) => {
+        picked.current = true;
+        action();
+    };
+    const finalFocus = () => {
+        const toText = picked.current;
+        picked.current = false;
+        return toText ? (text() ?? true) : true;
+    };
+    const item = ({ action, label, icon: Icon }) => (_jsxs(DropdownMenuItem, { disabled: !enabled(action), onClick: () => run(() => onAction(action)), children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, action));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { ref: ref, "aria-label": "Table", disabled: readOnly, tabIndex: tabIndex, "data-active": inTable || undefined, 
+                // Shaped like the toolbar's toggles: on while the caret is in a table.
+                className: toggleVariants({ size: 'sm', className: 'gap-0.5 px-1.5 data-active:bg-muted data-active:text-foreground' }), onFocus: onFocus, onKeyDown: onKeyDown, children: [_jsx(TableIcon, { "aria-hidden": "true" }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-3" })] }), _jsxs(DropdownMenuContent, { className: "w-56", finalFocus: finalFocus, children: [_jsxs(DropdownMenuItem, { disabled: inTable, onClick: () => run(onInsert), children: [_jsx(TableIcon, { "aria-hidden": "true" }), "Insert table"] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: ROWS.map(item) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Align column" }), _jsx(DropdownMenuRadioGroup, { value: state && inTable ? columnAlignment(state) : null, onValueChange: (value) => {
+                                    const alignment = ALIGNMENTS.find((one) => one.value === value);
+                                    if (alignment)
+                                        run(() => onAction(alignment.action));
+                                }, children: ALIGNMENTS.map(({ value, label, icon: Icon }) => (_jsxs(DropdownMenuRadioItem, { value: value, disabled: !inTable, closeOnClick: true, children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, value))) })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: DELETES.map(item) })] })] }));
+}

package/dist/components/app/rich-text-table.d.ts

@@ -0,0 +1,19 @@
+import { type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+type Dispatch = (tr: Transaction) => void;
+export type TableAction = 'rowAbove' | 'rowBelow' | 'columnLeft' | 'columnRight' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'deleteRow' | 'deleteColumn' | 'deleteTable';
+export type ColumnAlignment = 'left' | 'center' | 'right';
+/** The caret's column's alignment, as the header cell has it (GFM's default is left). */
+export declare function columnAlignment(state: EditorState): ColumnAlignment;
+/** Whether an action can apply where the caret is. */
+export declare function tableActionEnabled(state: EditorState, action: TableAction): boolean;
+/** Runs an action where the caret is. False when it can't apply there. */
+export declare function runTableAction(state: EditorState, dispatch: Dispatch, action: TableAction): boolean;
+/**
+ * The editor's table keys, before Milkdown's own (which go to the next
+ * cell on Tab, and out of the table on any Enter). True when it handled
+ * the key.
+ */
+export declare function handleTableKey(state: EditorState, dispatch: Dispatch, event: KeyboardEvent): boolean;
+/** A row added at the table's end, the caret into its first cell (the "Add a row" bar). */
+export declare function addRowAtEnd(state: EditorState, dispatch: Dispatch): boolean;
+export {};

package/dist/components/app/rich-text-table.js

@@ -0,0 +1,162 @@
+import { TextSelection } from '@milkdown/kit/prose/state';
+import { addColumnAfter, addColumnBefore, deleteColumn, deleteRow, deleteTable, isInTable, selectedRect, TableMap, } from '@milkdown/kit/prose/tables';
+const ALIGN = {
+    alignLeft: 'left',
+    alignCenter: 'center',
+    alignRight: 'right',
+};
+/** The caret's column's alignment, as the header cell has it (GFM's default is left). */
+export function columnAlignment(state) {
+    if (!isInTable(state))
+        return 'left';
+    const { map, table, left } = selectedRect(state);
+    const value = table.nodeAt(map.map[left])?.attrs.alignment;
+    return value ?? 'left';
+}
+/** Whether an action can apply where the caret is. */
+export function tableActionEnabled(state, action) {
+    if (!isInTable(state))
+        return false;
+    const { map, top, bottom, left, right } = selectedRect(state);
+    switch (action) {
+        case 'rowAbove':
+            return top > 0;
+        case 'deleteRow':
+            // Not the header row, and never every row under it.
+            return top > 0 && bottom - top < map.height - 1;
+        case 'deleteColumn':
+            return right - left < map.width;
+        default:
+            return true;
+    }
+}
+/** Runs an action where the caret is. False when it can't apply there. */
+export function runTableAction(state, dispatch, action) {
+    if (!tableActionEnabled(state, action))
+        return false;
+    const alignment = ALIGN[action];
+    if (alignment)
+        return alignColumn(state, dispatch, alignment);
+    switch (action) {
+        case 'rowAbove':
+            return addRow(state, dispatch, 'above');
+        case 'rowBelow':
+            return addRow(state, dispatch, 'below');
+        case 'columnLeft':
+            return addColumn(state, dispatch, 'left');
+        case 'columnRight':
+            return addColumn(state, dispatch, 'right');
+        case 'deleteRow':
+            return deleteRow(state, dispatch);
+        case 'deleteColumn':
+            return deleteColumn(state, dispatch);
+        case 'deleteTable':
+            return deleteTable(state, dispatch);
+        default:
+            return false;
+    }
+}
+// A row of empty cells, each aligned as its column is, above or below the
+// caret's rows (or at the end: `'end'`), and the caret into it in the
+// same column (the first, at the end).
+function addRow(state, dispatch, where) {
+    const { map, table, tableStart, top, bottom, left } = selectedRect(state);
+    const index = where === 'above' ? top : where === 'below' ? bottom : map.height;
+    if (index === 0)
+        return false;
+    const { schema } = state;
+    const cells = Array.from({ length: map.width }, (_value, column) => schema.nodes.table_cell.createAndFill({ alignment: table.nodeAt(map.map[column])?.attrs.alignment ?? null }));
+    let pos = tableStart;
+    for (let row = 0; row < index; row++)
+        pos += table.child(row).nodeSize;
+    const tr = state.tr.insert(pos, schema.nodes.table_row.create(null, cells));
+    const updated = tr.doc.nodeAt(tableStart - 1);
+    const column = where === 'end' ? 0 : left;
+    tr.setSelection(TextSelection.near(tr.doc.resolve(tableStart + TableMap.get(updated).map[index * map.width + column] + 1)));
+    dispatch(tr.scrollIntoView());
+    return true;
+}
+// A column of empty cells left or right of the caret's columns, unaligned
+// (prosemirror-tables makes its cells with the schema's default, left,
+// which would write `:---` for a column nobody aligned). The caret stays.
+function addColumn(state, dispatch, side) {
+    const { tableStart, left, right } = selectedRect(state);
+    let added = null;
+    const add = side === 'left' ? addColumnBefore : addColumnAfter;
+    if (!add(state, (tr) => (added = tr)))
+        return false;
+    const tr = added;
+    const table = tr.doc.nodeAt(tableStart - 1);
+    const map = TableMap.get(table);
+    const column = side === 'left' ? left : right;
+    for (let row = 0; row < map.height; row++) {
+        const pos = map.map[row * map.width + column];
+        const cell = table.nodeAt(pos);
+        tr.setNodeMarkup(tableStart + pos, undefined, { ...cell.attrs, alignment: null });
+    }
+    dispatch(tr);
+    return true;
+}
+// Every cell in the caret's columns aligned; left is GFM's default, so it
+// clears the alignment rather than writing `:---`.
+function alignColumn(state, dispatch, alignment) {
+    const { map, table, tableStart, left, right } = selectedRect(state);
+    const tr = state.tr;
+    const value = alignment === 'left' ? null : alignment;
+    for (let row = 0; row < map.height; row++) {
+        for (let column = left; column < right; column++) {
+            const pos = map.map[row * map.width + column];
+            const cell = table.nodeAt(pos);
+            if (cell.attrs.alignment !== value)
+                tr.setNodeMarkup(tableStart + pos, undefined, { ...cell.attrs, alignment: value });
+        }
+    }
+    if (tr.docChanged)
+        dispatch(tr);
+    return true;
+}
+// The caret's cell: its row and column, and the table's size.
+function cellAt(state) {
+    const rect = selectedRect(state);
+    return { ...rect, row: rect.top, column: rect.left };
+}
+// The caret out of the table: to the start of the block after it, or a
+// new line there when nothing follows.
+function exitTable(state, dispatch) {
+    const { tableStart, table } = selectedRect(state);
+    const after = tableStart - 1 + table.nodeSize;
+    const tr = state.tr;
+    const next = tr.doc.resolve(after).nodeAfter;
+    if (!next || !next.isTextblock)
+        tr.insert(after, state.schema.nodes.paragraph.create());
+    tr.setSelection(TextSelection.near(tr.doc.resolve(after + 1), 1));
+    dispatch(tr.scrollIntoView());
+    return true;
+}
+/**
+ * The editor's table keys, before Milkdown's own (which go to the next
+ * cell on Tab, and out of the table on any Enter). True when it handled
+ * the key.
+ */
+export function handleTableKey(state, dispatch, event) {
+    if (event.metaKey || event.ctrlKey || event.altKey || !isInTable(state) || !state.selection.empty)
+        return false;
+    const { map, row, column } = cellAt(state);
+    const lastRow = row === map.height - 1;
+    if (event.key === 'Tab' && !event.shiftKey && lastRow && column === map.width - 1)
+        return addRow(state, dispatch, 'end');
+    if (event.key !== 'Enter')
+        return false;
+    if (event.shiftKey)
+        return true;
+    if (lastRow)
+        return exitTable(state, dispatch);
+    const { tableStart } = selectedRect(state);
+    const below = map.map[(row + 1) * map.width + column];
+    dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(tableStart + below + 1))).scrollIntoView());
+    return true;
+}
+/** A row added at the table's end, the caret into its first cell (the "Add a row" bar). */
+export function addRowAtEnd(state, dispatch) {
+    return isInTable(state) && addRow(state, dispatch, 'end');
+}

package/dist/components/app/rich-text-toolbar.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
 import { type FormatItem } from './rich-text-format-items.js';
 import { type FormatId } from './rich-text-formats.js';
+import type { TableAction } from './rich-text-table.js';
 declare const SETS: {
     all: FormatItem[][];
     selection: FormatItem[][];
@@ -14,8 +15,12 @@ export type FormatButtonsProps = {
     readOnly: boolean;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
+    /** A Table menu item picked (only the fixed toolbar has the menu). */
+    onTable?: (action: TableAction) => void;
+    /** The editable element, for the Table menu to give focus back to. */
+    text?: () => HTMLElement | null;
 };
-export declare function FormatButtons({ formats, state, readOnly, onFormat }: FormatButtonsProps): import("react").JSX.Element;
+export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, text }: FormatButtonsProps): import("react").JSX.Element;
 export interface RichTextToolbarProps {
     /** The editor's state now, to show which formats are on. Null until it's made. */
     state: EditorState | null;
@@ -24,8 +29,12 @@ export interface RichTextToolbarProps {
     controls?: string;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
+    /** A Table menu item picked: run it on the editor and give it focus back. */
+    onTable: (action: TableAction) => void;
+    /** The editable element, for the Table menu to give focus back to. */
+    text: () => HTMLElement | null;
     /** The toolbar's element, for Alt+F10 to reach it from the text. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

package/dist/components/app/rich-text-toolbar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The rich-text editor's fixed toolbar: one row of pressed/not-pressed
-// buttons above the text, each a format and its keyboard shortcut.
+// buttons above the text, each a format and its keyboard shortcut, and a
+// Table menu (rich-text-table-menu.tsx).
 //
 // - One tab stop (ARIA's toolbar pattern): Tab reaches the last button
 //   used, the arrow keys, Home and End move along the row.
@@ -16,35 +17,21 @@ import { Fragment, useRef, useState } from 'react';
 import { Separator } from '../ui/separator.js';
 import { Toggle } from '../ui/toggle.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
-import { FORMAT_GROUPS } from './rich-text-format-items.js';
+import { FORMAT_GROUPS, FORMAT_ITEMS } from './rich-text-format-items.js';
 import { formatOn } from './rich-text-formats.js';
-function isApple() {
-    return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-}
-// `aria-keyshortcuts` names real keys: Meta on Apple, Control elsewhere.
-function ariaKeys(keys, apple) {
-    return keys.replace('Mod', apple ? 'Meta' : 'Control');
-}
-// What a person reads: ⌘⌥X on Apple, Ctrl+Alt+X elsewhere.
-function shownKeys(keys, apple) {
-    if (!apple)
-        return keys.replace('Mod', 'Ctrl');
-    const symbols = { Mod: '⌘', Alt: '⌥', Shift: '⇧', Enter: '↵' };
-    return keys
-        .split('+')
-        .map((part) => symbols[part] ?? part)
-        .join('');
-}
+import { ariaKeys, isApple, shownKeys } from './rich-text-shortcuts.js';
+import { RichTextTableMenu } from './rich-text-table-menu.js';
 // Which buttons a toolbar has: every format (the fixed one), or the ones
 // that apply to selected words (the floating one).
+const SELECTION = ['bold', 'italic', 'strike', 'code', 'link'];
 const SETS = {
     all: FORMAT_GROUPS,
-    selection: [FORMAT_GROUPS[0], FORMAT_GROUPS[4]],
+    selection: [SELECTION.slice(0, 4), SELECTION.slice(4)].map((ids) => ids.map((id) => FORMAT_ITEMS.get(id))),
 };
 // A toolbar's row of buttons: one tab stop, the last one used (ARIA's
 // toolbar pattern); the arrow keys, Home and End move along the row. The
 // toolbar's element (`role="toolbar"`, its name) is the caller's.
-export function FormatButtons({ formats, state, readOnly, onFormat }) {
+export function FormatButtons({ formats, state, readOnly, onFormat, onTable, text = () => null }) {
     const apple = isApple();
     const groups = SETS[formats];
     const items = groups.flat();
@@ -71,6 +58,10 @@ export function FormatButtons({ formats, state, readOnly, onFormat }) {
     };
     return (_jsx(TooltipProvider, { delay: 400, children: groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
                     const index = items.indexOf(item);
+                    if (item.id === 'table')
+                        return (_jsx(RichTextTableMenu, { ref: (element) => {
+                                buttons.current[index] = element;
+                            }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
                     const Icon = item.icon;
                     const tip = [
                         item.label,
@@ -86,6 +77,6 @@ export function FormatButtons({ formats, state, readOnly, onFormat }) {
                                     onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
                 })] }, groupIndex))) }));
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat, ref }) {
-    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat }) }));
+export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, text, ref }) {
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat, onTable: onTable, text: text }) }));
 }

package/dist/components/app/rich-text-widgets.d.ts

@@ -0,0 +1,19 @@
+import { type CalloutKind } from '../../lib/markdown-callout.js';
+export interface CalloutKindMenuProps {
+    kind: CalloutKind;
+    readOnly: boolean;
+    onPick: (kind: CalloutKind) => void;
+    onRemove: () => void;
+    /** The editable element, where focus goes when the menu closes. */
+    text: () => HTMLElement | null;
+}
+export declare function CalloutKindMenu({ kind, readOnly, onPick, onRemove, text }: CalloutKindMenuProps): import("react").JSX.Element;
+export interface TableBarProps {
+    /** Under the table (a row) or along its right (a column). */
+    side: 'row' | 'column';
+    /** The caret is in this table: shown without the pointer over it. */
+    active: boolean;
+    readOnly: boolean;
+    onAdd: () => void;
+}
+export declare function TableBar({ side, active, readOnly, onAdd }: TableBarProps): import("react").JSX.Element | null;

package/dist/components/app/rich-text-widgets.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The React parts of the editor's node views (rich-text-node-views.ts),
+// rendered into their slots through portals:
+//
+// - A callout's icon is a menu of its kinds (and Remove callout). From the
+//   keyboard, "/" at the start of a line in the callout lists the kinds
+//   too (rich-text-slash.ts), so the icon is a mouse shortcut and out of
+//   the tab order.
+// - A table's bars add a column at its right and a row at its end, shown
+//   while the pointer is over the table or the caret is in it. Mouse
+//   shortcuts as well: Tab in the last cell adds a row, and the toolbar's
+//   Table menu does both.
+//
+// Each gives focus back to the text when it's done.
+import { PlusIcon } from 'lucide-react';
+import { cn } from 'cn';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { CALLOUT_KINDS } from '../../lib/markdown-callout.js';
+import { CALLOUT_LOOK } from './prose-look.js';
+export function CalloutKindMenu({ kind, readOnly, onPick, onRemove, text }) {
+    const look = CALLOUT_LOOK[kind];
+    const Icon = look.icon;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { tabIndex: -1, disabled: readOnly, "aria-label": `${look.label} callout: change its kind`, "data-slot": "rich-text-callout-kind", className: "flex size-5 items-center justify-center rounded-md outline-none hover:bg-foreground/10 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none", children: _jsx(Icon, { "aria-hidden": "true", className: cn('size-4', look.tint) }) }), _jsxs(DropdownMenuContent, { className: "w-44", finalFocus: () => text() ?? true, children: [_jsx(DropdownMenuRadioGroup, { value: kind, onValueChange: (value) => onPick(value), children: CALLOUT_KINDS.map((one) => {
+                            const OneIcon = CALLOUT_LOOK[one].icon;
+                            return (_jsxs(DropdownMenuRadioItem, { value: one, closeOnClick: true, children: [_jsx(OneIcon, { "aria-hidden": "true", className: CALLOUT_LOOK[one].tint }), CALLOUT_LOOK[one].label] }, one));
+                        }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: onRemove, children: "Remove callout" })] })] }));
+}
+export function TableBar({ side, active, readOnly, onAdd }) {
+    if (readOnly)
+        return null;
+    return (_jsx("button", { type: "button", tabIndex: -1, "aria-label": side === 'row' ? 'Add a row' : 'Add a column', "data-slot": `rich-text-table-add-${side}`, className: cn('flex flex-1 items-center justify-center rounded-md text-muted-foreground transition-opacity hover:bg-muted hover:text-foreground', 'opacity-0 group-hover/table:opacity-100', active && 'opacity-100'), 
+        // A press keeps focus in the text: the caret moves into the new cell.
+        onMouseDown: (event) => event.preventDefault(), onClick: onAdd, children: _jsx(PlusIcon, { "aria-hidden": "true", className: "size-3.5" }) }));
+}

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/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "info" | "warning" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
+    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "warning" | "info" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

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/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cn } from "cn";
+import { ChevronRightIcon, CheckIcon } from "lucide-react";
+function DropdownMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

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