@tristan2828/ui-foundation 4.31.0 → 4.33.0

package/dist/components/app/rich-text-node-views.js

@@ -1,6 +1,7 @@
 import { cn } from 'cn';
 import { CALLOUT_KINDS } from '../../lib/markdown-callout.js';
 import { CALLOUT_BOX, CALLOUT_LOOK } from './prose-look.js';
+import { TABLE_SCROLL_FOCUS, watchTableScroll } from './prose-table-scroll.js';
 // Each slot's key for its portal, for as long as the node view lives.
 let made = 0;
 const nextKey = () => `widget-${++made}`;
@@ -49,17 +50,55 @@ export function calloutView(node, getPos, registry) {
         destroy: () => registry.remove(icon),
     };
 }
+// A table's header row, as texts, from the node (its first row's cells).
+function columnsOf(node) {
+    const header = node.firstChild;
+    if (!header)
+        return [];
+    const columns = [];
+    header.forEach((cell) => columns.push(cell.textContent));
+    return columns;
+}
+// How far an arrow key scrolls the table's box.
+const SCROLL_STEP = 40;
+// The keys a focused table box takes: the arrow keys, Home and End scroll
+// it, as a box that isn't editable scrolls by itself, and any other plain
+// key adds nothing (the text can't be typed into from the table's frame).
+// Tab, Esc and shortcuts are left alone: Tab leaves the box, Esc and the
+// shortcuts go on to the field. True when it took the key.
+function scrollKey(box, event) {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key === 'Tab' || event.key === 'Escape')
+        return false;
+    const max = box.scrollWidth - box.clientWidth;
+    const to = {
+        ArrowLeft: box.scrollLeft - SCROLL_STEP,
+        ArrowRight: box.scrollLeft + SCROLL_STEP,
+        Home: 0,
+        End: max,
+    };
+    const target = to[event.key];
+    if (target !== undefined)
+        box.scrollLeft = Math.min(Math.max(target, 0), max);
+    event.preventDefault();
+    return true;
+}
+// How long a press keeps the box out of the tab order: until the click it
+// starts, or this long for one that never clicks (a touch that pans).
+const PRESS_MS = 1000;
 /**
  * A table: in a box that scrolls sideways when it's wider than the text,
  * with an "add a column" bar along its right and an "add a row" bar under
- * it (widgets), Notion's way.
+ * it (widgets), Notion's way. While it scrolls, the box is a tab stop and
+ * a region named for its columns (prose-table-scroll.ts), which the arrow
+ * keys, Home and End scroll; a click in it still puts the caret in the
+ * cell clicked.
  */
-export function tableView(getPos, registry) {
+export function tableView(node, view, getPos, registry) {
     const dom = document.createElement('div');
     dom.dataset.slot = 'rich-text-table';
     dom.className = 'group/table grid grid-cols-[minmax(0,1fr)_auto] gap-1';
     const scroll = document.createElement('div');
-    scroll.className = 'overflow-x-auto rounded-lg border border-border';
+    scroll.className = cn('overflow-x-auto rounded-lg border border-border', TABLE_SCROLL_FOCUS);
     const table = document.createElement('table');
     const contentDOM = document.createElement('tbody');
     table.append(contentDOM);
@@ -68,12 +107,76 @@ export function tableView(getPos, registry) {
     const row = slot('col-start-1 flex h-5');
     dom.append(scroll, column, row);
     registry.set({ type: 'table', key: nextKey(), slot: row, column, getPos });
+    const region = watchTableScroll(scroll, table, columnsOf(node));
+    // A press in the box is the text's: a click in a cell puts the caret
+    // there. The browser focuses the nearest focusable ancestor of what was
+    // pressed, which would be the box while it's a tab stop, so the box
+    // leaves the tab order from the press to its click.
+    let pressing;
+    const released = () => {
+        clearTimeout(pressing);
+        pressing = undefined;
+        document.removeEventListener('click', releasedSoon, true);
+        region.resume();
+    };
+    const releasedSoon = () => setTimeout(released);
+    const onPointerDown = (event) => {
+        if (event.target === scroll && event.pointerType === 'mouse')
+            return; // its own scrollbar
+        region.suspend();
+        clearTimeout(pressing);
+        pressing = setTimeout(released, PRESS_MS);
+        document.addEventListener('click', releasedSoon, { capture: true, once: true });
+    };
+    scroll.addEventListener('pointerdown', onPointerDown);
+    // A key pressed while the box has focus is the box's (scrollKey), never
+    // ProseMirror's. It comes one of two ways. To the box itself, when the
+    // text's selection is outside it. Or, when the browser first moves
+    // focus to the editable text around it (as it can for a box inside
+    // editable text), to the text: then the box's blur to the text marks
+    // the key that follows in the same moment as the box's, and focus goes
+    // back to it.
+    const onBoxKey = (event) => {
+        if (event.target === scroll && scrollKey(scroll, event))
+            event.stopPropagation();
+    };
+    let bounced = false;
+    const onBlur = (event) => {
+        if (event.relatedTarget !== view.dom)
+            return;
+        bounced = true;
+        setTimeout(() => (bounced = false));
+    };
+    const onKeyDown = (event) => {
+        if (!bounced)
+            return;
+        bounced = false;
+        scroll.focus({ preventScroll: true });
+        if (scrollKey(scroll, event))
+            event.stopImmediatePropagation();
+    };
+    scroll.addEventListener('keydown', onBoxKey);
+    scroll.addEventListener('blur', onBlur);
+    view.dom.addEventListener('keydown', onKeyDown, true);
     return {
         dom,
         contentDOM,
-        update: (next) => next.type.name === 'table',
+        update: (next) => {
+            if (next.type.name !== 'table')
+                return false;
+            region.setColumns(columnsOf(next));
+            return true;
+        },
         stopEvent: (event) => row.contains(event.target) || column.contains(event.target),
         ignoreMutation: outside(contentDOM),
-        destroy: () => registry.remove(row),
+        destroy: () => {
+            released();
+            region.destroy();
+            scroll.removeEventListener('pointerdown', onPointerDown);
+            scroll.removeEventListener('blur', onBlur);
+            scroll.removeEventListener('keydown', onBoxKey);
+            view.dom.removeEventListener('keydown', onKeyDown, true);
+            registry.remove(row);
+        },
     };
 }

package/dist/components/app/widget-card.js

@@ -21,6 +21,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // muted note ("2 h ago") and an optional trailing element (a badge, a
 // switch). A trailing control is labelled by the row's text: pass a
 // function and it gets the id to put in `aria-labelledby`.
+//
+// Under data-density="compact" (#224) the card's padding drops to 12px and
+// a row's to 4px, for a dense hub; text stays at type-body. On a phone a
+// compact row is 44px tall and its link fills that height, so it stays a
+// finger's target.
 import { useId } from 'react';
 import { Link } from 'react-router';
 import { ExternalLinkIcon } from 'lucide-react';
@@ -34,11 +39,14 @@ export function WidgetCard({ title, icon: Icon, headingLevel = 2, link, isLoadin
     const headingId = useId();
     const Heading = `h${headingLevel}`;
     const state = error ? 'error' : isLoading ? 'loading' : isEmpty ? 'empty' : 'success';
-    return (_jsx("section", { "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))] }), _jsx(CardContent, { "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));
+    return (_jsx("section", { "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))] }), _jsx(CardContent, { "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));
 }
 // One row's height, shared by the skeleton and the list so the card doesn't
-// jump: py-2 around one line of type-body (or a small control).
-const ROW_CLASS = 'flex min-h-9 items-center gap-3 py-2';
+// jump: py-2 around one line of type-body (or a small control). Compact
+// is 32px (6px around the line); on a phone it's 44px, the link's own
+// padding making up the height (ROW_LINK_CLASS).
+const ROW_CLASS = 'flex min-h-9 items-center gap-3 py-2 density-compact:min-h-8 density-compact:py-1 ' +
+    'max-sm:density-compact:min-h-11 max-sm:density-compact:py-0';
 // Varied widths, so the skeleton reads as a list of titles, not a grid.
 const SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-2/3', 'w-1/3', 'w-3/5'];
 function WidgetListSkeleton({ rows }) {
@@ -49,7 +57,8 @@ export function WidgetList({ children, className }) {
     return (_jsx("ul", { "data-slot": "widget-list", className: cn('flex flex-col divide-y divide-border', className), children: children }));
 }
 const ROW_LINK_CLASS = 'min-w-0 truncate rounded-sm font-medium text-foreground underline-offset-4 outline-none ' +
-    'hover:underline focus-visible:underline focus-visible:ring-3 focus-visible:ring-ring/50';
+    'hover:underline focus-visible:underline focus-visible:ring-3 focus-visible:ring-ring/50 ' +
+    'max-sm:density-compact:py-3';
 export function WidgetListItem({ children, to, href, note, trailing, className }) {
     const textId = useId();
     const text = to !== undefined ? (_jsx(Link, { id: textId, to: to, title: children, className: ROW_LINK_CLASS, children: children })) : href !== undefined ? (_jsxs("a", { id: textId, href: href, target: "_blank", rel: "noreferrer", title: children, className: cn(ROW_LINK_CLASS, 'flex items-center gap-1'), children: [_jsx("span", { className: "truncate", children: children }), _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (_jsx("span", { id: textId, title: children, className: "min-w-0 truncate text-foreground", children: children }));

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props): import("react").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+    return (_jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props }));
+}
+function CollapsibleContent({ ...props }) {
+    return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props }));
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { AppShell, type AppShellProps, type AppShellVersion, type NavEntry, type NavItem, type NavSection } from './components/app/app-shell.js';
 export type { IconComponent } from './components/app/icon-component.js';
 export { CountLink, type CountLinkProps } from './components/app/count-link.js';
-export { DataTable, type DataTableProps, type DataTableWidth, type SortingState } from './components/app/data-table.js';
+export { DataTable, type DataTableProps, type DataTableTotals, type DataTableWidth, type SortingState, } from './components/app/data-table.js';
 export { type RowGroup } from './components/app/table-groups.js';
 export { byDay, type ByDayOptions } from './lib/group-by-day.js';
 export { EntityForm, type EntityFormProps } from './components/app/entity-form.js';
@@ -13,6 +13,7 @@ export { ErrorState } from './components/app/error-state.js';
 export { InlineCreate, type InlineCreateProps } from './components/app/inline-create.js';
 export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown, type MarkdownProps } from './components/app/markdown.js';
+export type { HeadingLevel } from './components/app/prose-look.js';
 export { MockModeBanner } from './components/app/mock-mode-banner.js';
 export { MultiChoice } from './components/app/multi-choice.js';
 export { MultiPick, type MultiPickOption, type MultiPickProps } from './components/app/multi-pick.js';
@@ -36,6 +37,7 @@ export { ImageField, type ImageFieldProps } from './components/app/image-field.j
 export { DEFAULT_IMAGE_TYPES, type ImageUpload, type ImageUploadResult } from './lib/image-file.js';
 export { formatPlainDate, type PlainDate } from './lib/plain-date.js';
 export { ChoiceCell, LinkCell, NameCell, type ChoiceCellProps, type LinkCellProps, type NameCellProps, } from './components/app/row-edit-cells.js';
+export { ModuleCard, ModuleStrip, type CategorySlot, type ModuleCardLink, type ModuleCardPlace, type ModuleCardProps, type ModuleStripProps, } from './components/app/module-card.js';
 export { WidgetCard, WidgetList, WidgetListItem, type WidgetCardProps, type WidgetListItemProps, } from './components/app/widget-card.js';
 export { ThemeProvider } from './components/theme-provider.js';
 export { LoginRoute, type LoginRouteProps } from './routes/login.js';

package/dist/index.js

@@ -5,7 +5,7 @@
 // Composites
 export { AppShell } from './components/app/app-shell.js';
 export { CountLink } from './components/app/count-link.js';
-export { DataTable } from './components/app/data-table.js';
+export { DataTable, } from './components/app/data-table.js';
 export {} from './components/app/table-groups.js';
 export { byDay } from './lib/group-by-day.js';
 export { EntityForm } from './components/app/entity-form.js';
@@ -40,6 +40,7 @@ export { ImageField } from './components/app/image-field.js';
 export { DEFAULT_IMAGE_TYPES } from './lib/image-file.js';
 export { formatPlainDate } from './lib/plain-date.js';
 export { ChoiceCell, LinkCell, NameCell, } from './components/app/row-edit-cells.js';
+export { ModuleCard, ModuleStrip, } from './components/app/module-card.js';
 export { WidgetCard, WidgetList, WidgetListItem, } from './components/app/widget-card.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": "4.31.0",
+  "version": "4.33.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/index.css

@@ -16,6 +16,12 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Compact density beyond tables (design-language.md "Density"): a
+   composite's own rows and padding tighten under data-density="compact"
+   on any ancestor, the way the table's tokens do. `density-compact:py-1`.
+   Text never shrinks under it. */
+@custom-variant density-compact (&:where([data-density="compact"], [data-density="compact"] *));
+
 @theme inline {
     --font-heading: var(--font-sans);
     --font-sans: 'Geist Variable', sans-serif;
@@ -113,6 +119,14 @@
   line-height: var(--type-caption-leading);
   font-weight: var(--type-caption-weight);
 }
+/* Counts on a hub's cards: tabular figures, so numbers line up from card
+   to card and don't shift width as they change. */
+@utility type-numeric {
+  font-size: var(--type-numeric-size);
+  line-height: var(--type-numeric-leading);
+  font-weight: var(--type-numeric-weight);
+  font-variant-numeric: tabular-nums;
+}
 @utility type-heading-1 {
   font-size: var(--type-heading-1-size);
   line-height: var(--type-heading-1-leading);

package/styles/theme.css

@@ -138,6 +138,9 @@
   --type-caption-size: 0.75rem; /* counts, metadata, helper text */
   --type-caption-leading: 1rem;
   --type-caption-weight: 400;
+  --type-numeric-size: 1.375rem; /* a count on a hub's ModuleCard, in tabular figures */
+  --type-numeric-leading: 1.75rem;
+  --type-numeric-weight: 500;
   /*
    * Headings inside written text (a record's notes: <Markdown> and the
    * rich-text editor), not the screen's own outline. Three clear steps
@@ -309,6 +312,8 @@
   --type-label-leading: 1.625rem;
   --type-caption-size: 0.9375rem;
   --type-caption-leading: 1.25rem;
+  --type-numeric-size: 1.75rem;
+  --type-numeric-leading: 2.25rem;
   --type-heading-1-size: 2.1875rem;
   --type-heading-1-leading: 2.8125rem;
   --type-heading-2-size: 1.5625rem;