@tristan2828/ui-foundation 3.27.4 → 3.28.0

package/conventions/docs/design-language.md

@@ -227,9 +227,9 @@ pulls the eye from every other column (cell patterns 16 and 20).
 
 ## Density
 
-Tables have three densities, set with `data-density` on **any ancestor**
-(a wrapper `<div>`, a route's layout, or `<html>` for the whole app). It is
-a token set, not a `DataTable` prop:
+Four densities, set with `data-density` on **any ancestor** (a wrapper
+`<div>`, a route's layout, or `<html>` for the whole app). It is a token
+set, not a `DataTable` prop:
 
 ```tsx
 <div data-density="compact">
@@ -237,18 +237,37 @@ a token set, not a `DataTable` prop:
 </div>
 ```
 
-| `data-density` | Cell padding (vertical) | Header height | For |
-|---|---|---|---|
-| `compact` | 4px | 32px | wide tables people scan, many rows per screen |
-| *(unset)* | 8px | 40px | the default |
-| `comfortable` | 12px | 48px | short tables, or rows people read rather than scan |
-
-- Density changes padding only. Text keeps `type-body`, so compact never
-  drops below a readable size.
+| `data-density` | Changes | Table cell padding (vertical) | Header height | For |
+|---|---|---|---|---|
+| `compact` | table rows only | 4px | 32px | wide tables people scan, many rows per screen |
+| *(unset)* | — | 8px | 40px | the default |
+| `comfortable` | table rows only | 12px | 48px | short tables, or rows people read rather than scan |
+| `large` | **everything**: type, spacing, control heights, icons, the sidebar, table rows | 12px | 56px | a screen read from a distance: a TV used as the desktop monitor, with a mouse and keyboard |
+
+- `compact` and `comfortable` change padding only. Text keeps
+  `type-body`, so compact never drops below a readable size.
+- `large` grows the whole UI by about a quarter: body text 14 → 18px,
+  controls 32 → 40px tall, icons 16 → 20px, the sidebar 256 → 320px.
+  Breakpoints and `max-w-*` containers stay where they are, which is
+  what browser zoom can't do (zoom narrows the viewport in CSS pixels, so
+  a wide screen can fall into the phone layout).
+- For `large`, set it on **`<html>`**. Menus, selects, dialogs and
+  tooltips are portaled to `<body>`, so a wrapper `<div>` doesn't reach
+  them. `compact` and `comfortable` only touch tables, so a wrapper is fine.
 - Pick **one density per screen**. Two tables at different densities side
   by side look like a mistake.
+- Size things the way the package does and `large` reaches them for free:
+  Tailwind's spacing and size utilities (`h-8`, `size-4`, `gap-2`, `w-64`)
+  and `text-*`/`type-*`. A fixed `h-[18px]`, `w-[240px]` or
+  `text-[13px]` stays its size at `large`; write it as a step of the scale
+  (`h-[--spacing(4.5)]`) instead.
 - Under the hood, the table primitive's cells read `--table-cell-px`,
-  `--table-cell-py` and `--table-head-height`, and the `data-density`
-  selectors in `styles/theme.css` set them. The package's Storybook check
-  measures that each step really changes the row height.
-
+  `--table-cell-py` and `--table-head-height`. `large` also redefines
+  Tailwind's own scale (`--spacing`, `--text-*`, `--radius`), the `--type-*`
+  roles and `--control-text-sm` (the small Button and Toggle). Each
+  default is the value it always had, so a screen without `data-density`
+  doesn't change. The selectors are in `styles/theme.css`. Storybook's
+  Density toolbar shows any story at a density, and `patterns/Density`
+  shows the primitives, `DataTable` and the sidebar at each. Its checks
+  measure that every step changes what it should, and that the default
+  keeps today's sizes.

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

@@ -79,7 +79,7 @@ const ROW_GROUP_CLASS = 'group/row hover:bg-transparent';
 // width it last had loaded while it shows another state
 // (--data-table-last-width), at most the area. Narrower, no change.
 const CONTENT_WIDTH_CLASS = '@7xl/data-table:w-fit @7xl/data-table:max-w-full ' +
-    '@7xl/data-table:min-w-[max(36rem,var(--data-table-last-width,0px))]';
+    '@7xl/data-table:min-w-[max(--spacing(144),var(--data-table-last-width,0px))]';
 // A second horizontal scrollbar, stuck to the viewport's bottom edge. The
 // real one sits directly under the last row, which on a full page is
 // off-screen until you have already scrolled past every row. Only rendered

package/dist/components/app/entity-view.js

@@ -67,8 +67,8 @@ function orEmptyLabel(value, emptyLabel) {
 // <dl>): label above value in the narrow rail, beside it once the rail's
 // sections stack full width under the header.
 const FIELD_ROW = {
-    page: 'sm:grid sm:grid-cols-[minmax(8rem,12rem)_1fr] sm:gap-6',
-    rail: '@lg/fields:grid @lg/fields:grid-cols-[minmax(8rem,12rem)_1fr] @lg/fields:gap-6',
+    page: 'sm:grid sm:grid-cols-[minmax(--spacing(32),--spacing(48))_1fr] sm:gap-6',
+    rail: '@lg/fields:grid @lg/fields:grid-cols-[minmax(--spacing(32),--spacing(48))_1fr] @lg/fields:gap-6',
 };
 function FieldRow({ field, inRail }) {
     return (_jsxs("div", { className: cn('flex flex-col gap-1 py-3 first:pt-0 last:pb-0', FIELD_ROW[inRail ? 'rail' : 'page']), children: [_jsx("dt", { className: "type-label text-muted-foreground", children: field.label }), _jsx("dd", { className: "min-w-0 type-body break-words text-foreground", children: field.edit ? (_jsx(EditableValue, { label: field.label, edit: field.edit, children: orEmptyLabel(field.value, field.emptyLabel) })) : (orEmptyLabel(field.value, field.emptyLabel)) })] }));
@@ -85,7 +85,7 @@ function ViewSection({ section, inRail = false }) {
 // right of row 1 and main on its left, both starting under the header.
 const RAIL_LAYOUT = {
     page: '@container/view flex min-w-0 flex-col gap-6',
-    columns: 'flex flex-col gap-6 @4xl/view:grid @4xl/view:grid-cols-[minmax(0,1fr)_22rem] @4xl/view:items-start',
+    columns: 'flex flex-col gap-6 @4xl/view:grid @4xl/view:grid-cols-[minmax(0,1fr)_--spacing(88)] @4xl/view:items-start',
     rail: '@4xl/view:col-start-2 @4xl/view:row-start-1',
     main: 'flex min-w-0 flex-col gap-6 @4xl/view:col-start-1 @4xl/view:row-start-1',
     // Main alone (no rail sections): the whole row.

package/dist/components/ui/button.js

@@ -15,7 +15,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
         size: {
             default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
             xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-(length:--control-text-sm) in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
             lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
             icon: "size-8",
             "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",

package/dist/components/ui/calendar.js

@@ -26,10 +26,10 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
                 : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
             month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
             weekdays: cn("flex", defaultClassNames.weekdays),
-            weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            weekday: cn("flex-1 rounded-(--cell-radius) text-(length:--control-text-sm) font-normal text-muted-foreground select-none", defaultClassNames.weekday),
             week: cn("mt-2 flex w-full", defaultClassNames.week),
             week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
-            week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+            week_number: cn("text-(length:--control-text-sm) text-muted-foreground select-none", defaultClassNames.week_number),
             day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
                 ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
                 : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),

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

@@ -31,7 +31,7 @@ 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 }));
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-24 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] }));

package/dist/components/ui/sidebar.js

@@ -14,9 +14,14 @@ import { Tooltip, TooltipContent, TooltipTrigger, } from "./tooltip.js";
 import { PanelLeftIcon } from "lucide-react";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
+// This repo's patch: the widths are steps of Tailwind's spacing scale, not
+// rem literals (upstream's 16rem, 18rem, 3rem), so data-density="large"
+// widens the sidebar with everything in it and the icon rail still fits
+// its buttons (styles/theme.css). Diff against upstream before taking a
+// new version of this file.
+const SIDEBAR_WIDTH = "calc(var(--spacing) * 64)";
+const SIDEBAR_WIDTH_MOBILE = "calc(var(--spacing) * 72)";
+const SIDEBAR_WIDTH_ICON = "calc(var(--spacing) * 12)";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SidebarContext = React.createContext(null);
 function useSidebar() {

package/dist/components/ui/switch.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { cn } from "cn";
 function Switch({ className, size = "default", ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[--spacing(4.6)] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }));
 }
 export { Switch };

package/dist/components/ui/toggle.js

@@ -15,7 +15,7 @@ const toggleVariants = cva("group/toggle inline-flex items-center justify-center
         },
         size: {
             default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-(length:--control-text-sm) has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
             lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
             // 24px: the smallest target WCAG 2.2 allows (2.5.8).
             "icon-xs": "size-6 min-w-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.27.4",
+  "version": "3.28.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

@@ -164,6 +164,10 @@
   --table-cell-px: 0.5rem;
   --table-cell-py: 0.5rem;
   --table-head-height: 2.5rem;
+  /* The small size of Button and Toggle (and the calendar's weekdays):
+     between text-xs and text-sm, so it has a token of its own for the
+     large density to scale. */
+  --control-text-sm: 0.8rem;
 
   /* Layer 2 — semantic (light) */
   --background: var(--white);
@@ -251,6 +255,58 @@
   --table-head-height: 3rem;
 }
 
+/*
+ * Large: a screen read from a distance (a TV used as the desktop monitor,
+ * with a mouse and keyboard). Not only tables: everything under it grows,
+ * by about a quarter, while the layout's breakpoints stay where they are
+ * (browser zoom would move them and switch a wide screen to the phone
+ * layout).
+ *
+ * Most of it is Tailwind's own scale. Every spacing, size and icon utility
+ * compiles to calc(var(--spacing) * n) and every text-* to var(--text-*),
+ * so redefining those here reaches every primitive, composite and app
+ * class at once. The primitives that sized something outside that scale
+ * (the sidebar's width, the switch, the small control text) were patched
+ * to read it. Each value below is a literal, never var() of another
+ * token: a custom property is resolved where it is declared, so one
+ * built from --spacing on :root would keep :root's value under here.
+ *
+ * Popups (menus, selects, dialogs, tooltips) are portaled to <body>, so
+ * they only grow when data-density="large" is on <html>.
+ */
+[data-density="large"] {
+  --spacing: 0.3125rem; /* 4px → 5px: h-8 is 40px, size-4 is 20px */
+  --text-xs: 0.9375rem; /* 12 → 15px */
+  --text-sm: 1.125rem; /* 14 → 18px: most UI text */
+  --text-base: 1.25rem; /* 16 → 20px */
+  --text-lg: 1.375rem; /* 18 → 22px */
+  --text-xl: 1.5625rem; /* 20 → 25px */
+  --text-2xl: 1.875rem; /* 24 → 30px */
+  --control-text-sm: 1rem; /* 12.8 → 16px */
+  --radius: 0.75rem; /* 10 → 12px, so larger controls keep their shape */
+
+  --type-page-title-size: 1.375rem;
+  --type-page-title-leading: 2.125rem;
+  --type-section-title-size: 1.25rem;
+  --type-section-title-leading: 1.875rem;
+  --type-body-size: 1.125rem;
+  --type-body-leading: 1.625rem;
+  --type-label-size: 1.125rem;
+  --type-label-leading: 1.625rem;
+  --type-caption-size: 0.9375rem;
+  --type-caption-leading: 1.25rem;
+  --type-heading-1-size: 2rem;
+  --type-heading-1-leading: 2.5rem;
+  --type-heading-2-size: 1.5625rem;
+  --type-heading-2-leading: 2.125rem;
+  --type-heading-3-size: 1.3125rem;
+  --type-heading-3-leading: 1.875rem;
+
+  --table-cell-px: 0.75rem;
+  --table-cell-py: 0.75rem;
+  --table-head-height: 3.5rem;
+}
+
 .dark {
   /* Layer 2 — semantic (dark). Only this block is remapped; Layer 1 is not. */
   --background: var(--black);