@tristan2828/ui-foundation 4.61.1 → 4.63.0

package/conventions/docs/cell-patterns.md

@@ -26,15 +26,15 @@
   - [A variant: a pressed icon inside another value's cell](#a-variant-a-pressed-icon-inside-another-values-cell) · lines 565–648
 - [16. Title linking to the record's view](#16-title-linking-to-the-records-view) · lines 650–685
 - [17. Quick action on the view](#17-quick-action-on-the-view) · lines 687–760
-- [18. Editable value](#18-editable-value) · lines 762–1221
-  - [A list of sub-items](#a-list-of-sub-items) · lines 1037–1122
-  - [In a table's rows](#in-a-tables-rows) · lines 1124–1209
-  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1211–1221
-- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1223–1289
-- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1291–1355
-- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1357–1425
-- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1427–1455
-- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1457–1533
+- [18. Editable value](#18-editable-value) · lines 762–1226
+  - [A list of sub-items](#a-list-of-sub-items) · lines 1042–1127
+  - [In a table's rows](#in-a-tables-rows) · lines 1129–1214
+  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1216–1226
+- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1228–1294
+- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1296–1360
+- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1362–1430
+- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1432–1460
+- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1462–1538
 
 <!-- /index -->
 
@@ -1002,8 +1002,13 @@ const price = editInPlace({
   is GitHub's `> [!NOTE]` (note, tip, important, warning, caution), its
   icon a menu of kinds. In a table, Tab in the last cell adds a row,
   Enter goes down a column (and out from the last row), bars under and
-  beside it add a row or a column, and the toolbar's Table menu inserts
-  rows and columns, aligns a column and deletes. Selected words can be
+  beside it add a row or a column, and a grip on the hovered column and
+  row opens its menu: insert, move and delete, align, sort (rewriting the
+  rows), a header column (its first cells bold) and cell colours (a
+  cell's whole text in a highlight); a right-click or Shift+F10 in a cell
+  opens the cell's. Columns fit their words. `tableLook="boxed"` (on the
+  editor and on `<Markdown>`) gives a roomier boxed table with zebra rows
+  instead of the compact grid. Selected words can be
   highlighted in four colours (amber, yellow, green, red) from the
   toolbars' Highlight menu or with "/highlight", and un-highlighted;
   they're saved as `==words==` (`=={green}words==` for the others), plain

package/conventions/docs/design-language.md

@@ -3,25 +3,28 @@
 <!-- index: written by `npm run docs:index` in the package from the headings below; never edit it by hand -->
 ## Index
 
-- [Semantic tones](#semantic-tones) · lines 34–62
-- [The three badge styles](#the-three-badge-styles) · lines 64–81
-- [Mapping an enum to tones](#mapping-an-enum-to-tones) · lines 83–112
-- [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 114–127
-- [Logos and brand marks](#logos-and-brand-marks) · lines 129–173
-- [Categorical colour](#categorical-colour) · lines 175–245
-- [Typography](#typography) · lines 247–338
-  - [Written text (notes)](#written-text-notes) · lines 278–338
-- [Density](#density) · lines 340–397
-- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 399–513
-- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 515–584
-- [Notices](#notices) · lines 586–614
-- [A value over time](#a-value-over-time) · lines 616–694
-  - [Several values over time](#several-values-over-time) · lines 657–694
-- [A list as a board](#a-list-as-a-board) · lines 696–747
-- [A list as cards](#a-list-as-cards) · lines 749–795
-- [Key numbers on a record](#key-numbers-on-a-record) · lines 797–819
-- [Picking at random](#picking-at-random) · lines 821–852
-- [Filling in what's missing](#filling-in-whats-missing) · lines 854–921
+- [Palettes](#palettes) · lines 37–95
+- [Glow](#glow) · lines 97–115
+- [Semantic tones](#semantic-tones) · lines 117–145
+- [The three badge styles](#the-three-badge-styles) · lines 147–164
+- [Mapping an enum to tones](#mapping-an-enum-to-tones) · lines 166–195
+- [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 197–210
+- [Logos and brand marks](#logos-and-brand-marks) · lines 212–256
+- [Categorical colour](#categorical-colour) · lines 258–328
+- [Shapes and sizes](#shapes-and-sizes) · lines 330–351
+- [Typography](#typography) · lines 353–447
+  - [Written text (notes)](#written-text-notes) · lines 387–447
+- [Density](#density) · lines 449–506
+- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 508–622
+- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 624–693
+- [Notices](#notices) · lines 695–723
+- [A value over time](#a-value-over-time) · lines 725–803
+  - [Several values over time](#several-values-over-time) · lines 766–803
+- [A list as a board](#a-list-as-a-board) · lines 805–856
+- [A list as cards](#a-list-as-cards) · lines 858–904
+- [Key numbers on a record](#key-numbers-on-a-record) · lines 906–928
+- [Picking at random](#picking-at-random) · lines 930–961
+- [Filling in what's missing](#filling-in-whats-missing) · lines 963–1030
 
 <!-- /index -->
 
@@ -31,6 +34,86 @@ Tokens and styles here **grow freely**, in the foundation package, so every
 app gets them: they do not wait for a second app to need them. New
 composites don't grow that way; they are built against a real app's screen.
 
+## Palettes
+
+A palette is an app's own dark look: its surfaces, text, accent and a
+second colour, chosen once for every app the foundation serves. There
+are four, in the order they were ranked:
+
+| Name | `palette` | Accent | Second colour |
+|---|---|---|---|
+| Indigo and Cyan | `indigo-cyan` | indigo, the only accent that passes 4.5:1 on cards | cyan |
+| Indigo and Rose | `indigo-rose` | indigo-violet | rose |
+| Graphite and Periwinkle | `graphite-periwinkle` | periwinkle on neutral grey | lilac |
+| Violet | `violet` | violet | magenta |
+
+**How an app picks one.** `<FoundationProviders palette="indigo-cyan">`
+names the app's default. Add `palettePicker` and the app shell's header
+offers all four (with swatches); the one picked is remembered on that
+device, and a new device starts on the default. `usePalette()` reads the
+palette on screen. Without `palette`, nothing changes: light and dark
+follow the system, with the toggle in the header.
+
+**A palette is dark only.** With one, the theme is forced dark and the
+shell has no light/dark toggle. The light theme stays for apps without a
+palette. Printed notes still print light: the print override beats a
+palette's block.
+
+**Where it lives.** `styles/theme.css`: each palette's colours as
+primitives (`--palette-<name>-*`, ratios beside them), and one block per
+palette, `.dark[data-palette="<name>"]`, that sets only what differs from
+`.dark`. `data-palette` goes on `<html>`, so popups portaled to `<body>`
+wear it too. An installed app's colours follow it with
+`pwa({ palette })`.
+
+**Why some tokens aren't the guide's colour as written.**
+
+- **The focus ring is the accent** (4.24 to 5.25:1 on the page), not the
+  guide's accent deep, which measured 2.30 to 2.91, under the 3:1 a focus
+  indicator needs.
+- **Links are accent light** (`--link`, 8.5:1 or more). The accent fails
+  4.5:1 as small text on Indigo and Rose and on Violet, and on every
+  palette's cards but Indigo and Cyan, so it is never small text: it is
+  the ring, the primary fill and the active item's tint. The `link`
+  Button variant is `text-link` for the same reason.
+- **The status colours are text shades.** The guide's success, warning
+  and danger are `--success-text`, `--warning-text` and
+  `--destructive-text` (soft badges, icons, coloured words). Solid fills
+  keep the deeper shades with white text: white on the guide's success
+  green measures 1.80. Info keeps its blue.
+- **Violet's text on its accent** is `#110823`, a shade darker than the
+  guide's `#130925`, which measured 4.496:1 (under 4.5).
+- **Danger text** is `#df7a72`, a shade lighter than the guide's
+  `#dc726a`, which measured 4.37 on Graphite's raised surface and 4.46 on
+  an outline button's fill (an invalid image field's message).
+- **Field borders** (`--input`, the guide's strong border) measure 2.5 to
+  2.9 against the page, under 3:1. It is already the lightest grey each
+  palette has, so it is kept as designed; axe doesn't check borders.
+
+The package's `e2e/fixtures-visual.spec.ts` runs every primitive,
+composite and tone story through axe in each palette, and measures every
+glyph and categorical slot against each palette's page and card.
+
+## Glow
+
+Under a palette only, from `--primary` so each palette glows in its own
+accent; an app without a palette never gets it. Everything else stays
+flat: no glow at the top of the page.
+
+- **The primary button** (Button's default variant) on hover, keyboard
+  focus and press: one soft layer of the accent (`--primary-glow`: 38px
+  blur, 2px spread, 38%), and on hover a shine sweeping across once
+  (650ms). Under reduced motion, no shine and no shrink. Secondary,
+  outline, ghost and destructive buttons never glow.
+- **A hovered card**: its edge turns the accent with a soft halo
+  (`--edge-glow`), through the `glow-edge` utility. `ModuleCard`,
+  `WidgetCard` and `Board`'s cards carry it, and a `DataTable` card
+  layout's `Card`s; an app's own card takes the class.
+- **A slider's thumb** (`ui/slider`): a small halo (`--thumb-glow`).
+
+For anything else of an app's own, `palette:` is the variant
+(`palette:hover:shadow-(--primary-glow)`).
+
 ## Semantic tones
 
 Four tones carry meaning: **success**, **warning**, **destructive** and
@@ -244,6 +327,29 @@ If you find yourself wanting a thirteenth, that is a sign the column should
 be showing a shape or a label rather than more colours: there is no more
 room that stays readable.
 
+## Shapes and sizes
+
+The shared style guide's, the same in every app with or without a
+palette:
+
+- **Radius 9px** (`--radius-base`): buttons and cards on `--radius`,
+  fields on `--radius-md` (about 7px).
+- **Buttons** 36px tall with 16px sides, semibold (`sm` 32px, `lg` 40px,
+  the icon sizes to match). A press shrinks the button to 96%, not under
+  reduced motion.
+- **Fields** (input, select, input group, a multi-pick's box) 36px,
+  outlined. **Checkbox** 18px, a 5px radius, solid when checked, a small
+  press pop.
+- **Cards** a hairline border with a soft shadow (`--card-shadow`: 30% in
+  dark, lighter on white), 16px padding, 14px between their parts. A
+  card's header, when it comes first, is a tinted bar flush with the top
+  (`--card-header`), as on every `WidgetCard` and `EntityView` section.
+- **Badges** are pills; the default is a soft tint of the accent
+  (`variant="solid"` is the filled one). The tone styles are unchanged.
+- **Behind a dialog or sheet**, the page is dimmed and blurred.
+- **Motion** is quick: 120ms with the standard easing, for every
+  transition that doesn't name its own.
+
 ## Typography
 
 Six roles cover every screen. Each is one class that sets size, line
@@ -251,13 +357,16 @@ height and weight together, from tokens in the package's `styles/theme.css`:
 
 | Class | For | Size / weight |
 |---|---|---|
-| `type-page-title` | the screen's one `<h1>` (a table's title, a form's title) | 18px / 600 |
+| `type-page-title` | the screen's one `<h1>` (a table's title, a form's title) | 28px / 600, line 1.2 |
 | `type-section-title` | a heading inside a screen (a form section, a card group) | 16px / 600 |
-| `type-body` | running text, table cells, form text, the pagination summary | 14px / 400 |
+| `type-body` | running text, table cells, form text, the pagination summary | 14px / 400, line 1.5 |
 | `type-label` | column headers, field labels, a small heading over a group | 14px / 500 |
 | `type-caption` | counts, metadata, helper text under a field | 12px / 400 |
 | `type-numeric` | the one live number on a card (`ModuleCard`'s count), in tabular figures | 22px / 500 |
 
+- **Headings draw in a little:** the page and section titles, and written
+  text's `#` and `##`, take -0.02em letter spacing. Labels stay normal
+  case at 14px medium (small caps at 12px read too small).
 - **Use a role instead of size and weight classes,** not as well as them.
   `type-page-title` replaces `text-lg font-semibold`. Combining a role with
   `text-sm`, `font-medium` or `leading-*` makes two classes set the same
@@ -351,8 +460,8 @@ set, not a `DataTable` prop:
 
 | `data-density` | Changes | Table cell padding (vertical) | Header height | For |
 |---|---|---|---|---|
-| `compact` | table rows, and a hub's cards (`WidgetCard`, `WidgetList` rows, `ModuleCard`) | 4px | 32px | wide tables people scan, many rows per screen; a dense hub |
-| *(unset)* | — | 8px | 40px | the default |
+| *(unset)* | — | 4px | 32px | the default: compact rows, as the shared style guide has them |
+| `compact` | a hub's cards (`WidgetCard`, `WidgetList` rows, `ModuleCard`); table rows stay the default's | 4px | 32px | a dense hub |
 | `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 |
 

package/dist/components/app/app-shell.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRightIcon, LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { ChevronRightIcon, LogOutIcon, MoonIcon, PaletteIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useEffect, useId, useState } from 'react';
 import { Link, Navigate, Outlet, useLocation } from 'react-router';
@@ -11,8 +11,11 @@ import { ErrorState } from './error-state.js';
 import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
 import { ReportRoutePattern } from '../../error-reporting/error-reporting-provider.js';
 import { useShellDocumentTitle } from '../../hooks/use-document-title.js';
+import { usePalette } from '../../hooks/use-palette.js';
+import { isPaletteName, PALETTE_LABELS, PALETTES } from '../../lib/palettes.js';
 import { cn } from 'cn';
 import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
 import { Toaster } from '../ui/sonner.js';
@@ -36,6 +39,29 @@ function CloseMobileSidebarOnNavigate() {
     }, [key, setOpenMobile]);
     return null;
 }
+// The header's look control: an app with a palette is always dark, so it
+// has no light/dark toggle, and with the picker on it gets the palette
+// menu in its place (design-language.md "Palettes").
+function LookControl() {
+    const { palette, picker } = usePalette();
+    if (!palette)
+        return _jsx(ThemeToggle, {});
+    return picker ? _jsx(PalettePicker, { palette: palette }) : null;
+}
+// Each palette's swatch is its own background with its accent and second
+// colour on it, read from the palette primitives, so the menu shows all
+// four whichever is on screen.
+function PaletteSwatch({ name }) {
+    const colour = (part) => `var(--palette-${name}-${part})`;
+    return (_jsxs("span", { "aria-hidden": true, className: "flex h-4 w-7 shrink-0 items-center justify-center gap-0.5 rounded-sm border border-border", style: { background: colour('background') }, children: [_jsx("span", { className: "size-2 rounded-full", style: { background: colour('accent') } }), _jsx("span", { className: "size-2 rounded-full", style: { background: colour('second') } })] }));
+}
+function PalettePicker({ palette }) {
+    const { setPalette } = usePalette();
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Palette: ${PALETTE_LABELS[palette]}` }), children: _jsx(PaletteIcon, {}) }), _jsx(DropdownMenuContent, { align: "end", className: "w-60", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Palette on this device" }), _jsx(DropdownMenuRadioGroup, { value: palette, onValueChange: (next) => {
+                                if (isPaletteName(next))
+                                    setPalette(next);
+                            }, children: PALETTES.map((name) => (_jsxs(DropdownMenuRadioItem, { value: name, children: [_jsx(PaletteSwatch, { name: name }), PALETTE_LABELS[name]] }, name))) })] }) })] }));
+}
 function ThemeToggle() {
     const { resolvedTheme, setTheme } = useTheme();
     const isDark = resolvedTheme === 'dark';
@@ -160,5 +186,5 @@ export function AppShell({ title, logo: Logo, nav, sidebarExtra, defaultSidebarO
                                                         // (AuthProvider), so this stays a deliberate logout: a
                                                         // clean /login, never the previous user's page as `from`.
                                                         logout().catch(() => { });
-                                                    }, children: _jsx(LogOutIcon, {}) })] })] })] }) }), _jsxs(SidebarInset, { className: "min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx(SidebarTrigger, {}), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }), _jsx("div", { className: cn('flex-1 p-6', bottomBar?.length && BOTTOM_BAR_PADDING), children: _jsx(Outlet, {}) })] }), bottomBar && bottomBar.length > 0 && _jsx(BottomBar, { items: bottomBar, nav: nav, activeTo: activeTo })] }), _jsx(Toaster, { position: "top-center" })] }));
+                                                    }, children: _jsx(LogOutIcon, {}) })] })] })] }) }), _jsxs(SidebarInset, { className: "min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx(SidebarTrigger, {}), _jsx("div", { className: "flex-1" }), _jsx(LookControl, {})] }), _jsx("div", { className: cn('flex-1 p-6', bottomBar?.length && BOTTOM_BAR_PADDING), children: _jsx(Outlet, {}) })] }), bottomBar && bottomBar.length > 0 && _jsx(BottomBar, { items: bottomBar, nav: nav, activeTo: activeTo })] }), _jsx(Toaster, { position: "top-center" })] }));
 }

package/dist/components/app/board.js

@@ -101,7 +101,7 @@ export function Board({ 'aria-label': ariaLabel, columns, items, getId, getColum
                                     event.dataTransfer.setData(DRAG_TYPE, String(getId(item)));
                                     event.dataTransfer.effectAllowed = 'move';
                                 }
-                                : undefined, className: cn('gap-2 px-3 py-3', onMove && 'cursor-grab active:cursor-grabbing'), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: renderCard(item) }), onMove && (_jsx(MoveMenu, { id: String(getId(item)), name: getName(item), value: getColumn(item), targets: targets, onMove: (value) => move(String(getId(item)), value, 'menu') }))] }) }, getId(item)))), cards.length === 0 && (_jsx("p", { className: "px-1 py-6 text-center type-caption text-muted-foreground", children: column.empty ?? 'Nothing here' })), column.footer && _jsx("div", { className: "px-1 type-caption text-muted-foreground", children: column.footer })] }, column.value));
+                                : undefined, className: cn('glow-edge gap-2 px-3 py-3', onMove && 'cursor-grab active:cursor-grabbing'), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: renderCard(item) }), onMove && (_jsx(MoveMenu, { id: String(getId(item)), name: getName(item), value: getColumn(item), targets: targets, onMove: (value) => move(String(getId(item)), value, 'menu') }))] }) }, getId(item)))), cards.length === 0 && (_jsx("p", { className: "px-1 py-6 text-center type-caption text-muted-foreground", children: column.empty ?? 'Nothing here' })), column.footer && _jsx("div", { className: "px-1 type-caption text-muted-foreground", children: column.footer })] }, column.value));
             }), _jsx("span", { role: "status", className: "sr-only", children: announcement })] }));
 }
 function BoardColumnView({ column, count, headingLevel, onDrop, children, }) {

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

@@ -559,7 +559,7 @@ function GroupLabel({ run, icon, isFolded, onToggle, }) {
     return (_jsxs("button", { type: "button", "aria-expanded": !isFolded, onClick: onToggle, className: GROUP_TOGGLE_CLASS, children: [_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('size-4 self-center text-muted-foreground transition-transform', isFolded && '-rotate-90') }), label, _jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: run.rows.length })] }));
 }
 function Cards({ layout, runs, rows, folded, onToggleFold, groupSummary, groupIcons, }) {
-    const list = (items) => (_jsx("ul", { role: "list", className: cn(layout.arrange === 'list' ? CARD_LIST_CLASS : ['grid', CARD_GRID_CLASS[layout.size ?? 'md'], CARD_GRID_GAP_CLASS]), children: items.map((row) => (_jsx("li", { "data-slot": "data-table-card", className: "min-w-0", children: layout.renderCard(row.original) }, row.id))) }));
+    const list = (items) => (_jsx("ul", { role: "list", className: cn(layout.arrange === 'list' ? CARD_LIST_CLASS : ['grid', CARD_GRID_CLASS[layout.size ?? 'md'], CARD_GRID_GAP_CLASS]), children: items.map((row) => (_jsx("li", { "data-slot": "data-table-card", className: "min-w-0 *:data-[slot=card]:glow-edge", children: layout.renderCard(row.original) }, row.id))) }));
     return (_jsx("div", { className: "@container/data-table-cards flex flex-col gap-6", "data-state": "success", "data-slot": "data-table-cards", children: runs
             ? runs.map((run, runIndex) => {
                 const isFolded = folded.has(run.key);

package/dist/components/app/foundation-providers.d.ts

@@ -1,7 +1,8 @@
 import { type QueryClient } from '@tanstack/react-query';
 import { type ReactNode } from 'react';
+import type { PaletteName } from '../../lib/palettes.js';
 import { type ErrorReportingOptions } from '../../error-reporting/reporter.js';
-export declare function FoundationProviders({ mockMode, queryClient, errorReporting, children, }: {
+export declare function FoundationProviders({ mockMode, queryClient, errorReporting, palette, palettePicker, children, }: {
     /** Whether the API is served by MSW — the app's own IS_MOCK_MODE. */
     mockMode: boolean;
     /** Defaults to createQueryClient(); pass one to share it with code outside React. */
@@ -13,5 +14,17 @@ export declare function FoundationProviders({ mockMode, queryClient, errorReport
      * report holds and never holds. `{ release }` names the build.
      */
     errorReporting?: boolean | ErrorReportingOptions;
+    /**
+     * The app's palette (design-language.md "Palettes"). With one, the app
+     * is always dark in that palette and the shell has no light/dark
+     * toggle; printed notes still print light. Without, light and dark
+     * follow the system, as before.
+     */
+    palette?: PaletteName;
+    /**
+     * With `palette`: the shell offers all four palettes, and the one picked
+     * is remembered on this device. A new device starts on `palette`.
+     */
+    palettePicker?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/app/foundation-providers.js

@@ -5,20 +5,21 @@ import { createQueryClient } from '../../api/query-client.js';
 import { AuthProvider } from '../../auth/use-auth.js';
 import { MockModeBanner } from './mock-mode-banner.js';
 import { ThemeProvider } from '../theme-provider.js';
+import { PaletteProvider } from './palette-provider.js';
 import { ErrorReportingProvider } from '../../error-reporting/error-reporting-provider.js';
 import { resolveErrorReporting } from '../../error-reporting/reporter.js';
 import { browserStaleChunkReload } from '../../lib/stale-chunk-reload.js';
 // Everything an app's root needs around its router, in the order that
-// works: the theme outermost, the mock-mode banner above the router so it
+// works: the theme outermost (and the palette, which forces it dark), the mock-mode banner above the router so it
 // shows on every route (/login included), and AuthProvider inside
 // QueryClientProvider because it queries /auth/me through TanStack Query.
 // An app's DataEnvironmentBanner goes first among the children, before its
 // router: it queries too, and shows on every route like the mock banner.
 // It also reloads the page once when a lazy chunk is gone after a deploy
 // (lib/stale-chunk-reload.ts), so no app adds its own listener.
-export function FoundationProviders({ mockMode, queryClient, errorReporting, children, }) {
+export function FoundationProviders({ mockMode, queryClient, errorReporting, palette, palettePicker = false, children, }) {
     const [client] = useState(() => queryClient ?? createQueryClient());
     const reporting = resolveErrorReporting(errorReporting);
     useEffect(() => browserStaleChunkReload().install(window), []);
-    return (_jsxs(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: [_jsx(MockModeBanner, { active: mockMode }), _jsx(QueryClientProvider, { client: client, children: _jsx(AuthProvider, { children: reporting ? _jsx(ErrorReportingProvider, { options: reporting, children: children }) : children }) })] }));
+    return (_jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, forcedTheme: palette ? 'dark' : undefined, children: _jsxs(PaletteProvider, { palette: palette, picker: palettePicker, children: [_jsx(MockModeBanner, { active: mockMode }), _jsx(QueryClientProvider, { client: client, children: _jsx(AuthProvider, { children: reporting ? _jsx(ErrorReportingProvider, { options: reporting, children: children }) : children }) })] }) }));
 }

package/dist/components/app/markdown.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react';
-import { type HeadingFrom, type HeadingLevel } from './prose-look.js';
+import { type HeadingFrom, type HeadingLevel, type TableLook } from './prose-look.js';
 export type MarkdownProps = {
     /** The Markdown source. Raw HTML in it is shown as text, never rendered. */
     children: string;
@@ -44,6 +44,11 @@ export type MarkdownProps = {
      * are pictures and the text stays read-only.
      */
     onTasksChange?: (markdown: string) => void | Promise<unknown>;
+    /**
+     * How tables look: `'compact'` (the default) or `'boxed'`, as on
+     * RichTextEditor. Either way columns fit their words.
+     */
+    tableLook?: TableLook;
     className?: string;
 } & Omit<ComponentProps<'div'>, 'children'>;
-export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, onTasksChange: onTasksChangeProp, className, ...rest }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, onTasksChange: onTasksChangeProp, tableLook, className, ...rest }: MarkdownProps): import("react").JSX.Element;

package/dist/components/app/markdown.js

@@ -23,6 +23,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // sit: `#` and `##` on a tinted band, `###` a small uppercase label, and
 // the text under them lined up with the words in the band (prose-look.ts).
 //
+// A table's columns fit their words (a cell wraps at 18rem; a right-
+// aligned column, numbers, never wraps), in one of two looks
+// (`tableLook`, as on RichTextEditor: styles/index.css "Tables in written
+// text"). A cell whose whole text is one highlight is painted in it, and
+// a first column of bold cells is row headers (src/lib/markdown-table.ts).
 // A table wider than the text scrolls sideways, and while it does, its
 // box is a tab stop, named for its columns, that the arrow keys scroll
 // (prose-table-scroll.ts). Its cells wrap first, so that's only a table
@@ -60,11 +65,11 @@ import remarkGfm from 'remark-gfm';
 import { cn } from 'cn';
 import { ChevronDownIcon, ExternalLinkIcon, SquareCheckIcon, SquareIcon } from 'lucide-react';
 import { Checkbox } from '../ui/checkbox.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { useFolds } from '../../hooks/fold-store.js';
 import { CALLOUT_KINDS, remarkCallouts } from '../../lib/markdown-callout.js';
 import { rehypeFold, toggleFold } from '../../lib/markdown-fold.js';
 import { isHighlightColor, remarkHighlights } from '../../lib/markdown-highlight.js';
+import { rehypeTables } from '../../lib/markdown-table.js';
 import { toggleTaskAt } from '../../lib/markdown-tasks.js';
 import { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { CALLOUT_BOX, CALLOUT_LOOK, DEFAULT_HEADING_LEVEL, FOLD_BUTTON, FOLD_HEADING, headingBand, headingClass, headingTag, PROSE, PROSE_INSET, } from './prose-look.js';
@@ -87,10 +92,9 @@ function omitNode(props) {
     delete rest.node;
     return rest;
 }
-// A GFM table in the package's own table, in its box that scrolls
-// sideways: a tab stop and a named region only while the table overflows
-// it. Watched again after each render, so a header row with new words
-// renames it.
+// A GFM table in its box that scrolls sideways: a tab stop and a named
+// region only while the table overflows it. Watched again after each
+// render, so a header row with new words renames it.
 function NotesTable({ hidden, ...props }) {
     const boxRef = useRef(null);
     useEffect(() => {
@@ -101,9 +105,7 @@ function NotesTable({ hidden, ...props }) {
         const region = watchTableScroll(box, table, headerTexts(table));
         return () => region.destroy();
     });
-    return (_jsx(Table, { ...props, containerRef: boxRef, 
-        // Folded away, the box goes with the table.
-        containerClassName: cn('rounded-lg border border-border', TABLE_SCROLL_FOCUS, hidden && 'hidden') }));
+    return (_jsx("div", { ref: boxRef, "data-slot": "table-container", className: cn('prose-table', TABLE_SCROLL_FOCUS, hidden && 'hidden'), children: _jsx("table", { ...props }) }));
 }
 // Ticks a task item by where it starts in the text: given only with
 // `onTasksChange`. Each task item hands its box its own start and words.
@@ -211,16 +213,9 @@ const COMPONENTS = {
         const { alt, ...rest } = omitNode(props);
         return _jsx("img", { ...rest, alt: alt ?? '', loading: "lazy", className: "h-auto max-w-full rounded-md" });
     },
-    // GFM tables use the package's own table, zebra stripes and density
-    // tokens included, so a table in the notes reads like every other table.
+    // GFM tables: drawn by styles/index.css "Tables in written text"
+    // (rehypeTables marks coloured cells and row headers).
     table: (props) => _jsx(NotesTable, { ...omitNode(props) }),
-    thead: (props) => _jsx(TableHeader, { ...omitNode(props), className: "bg-muted" }),
-    tbody: (props) => _jsx(TableBody, { ...omitNode(props) }),
-    tr: (props) => _jsx(TableRow, { ...omitNode(props) }),
-    // Notes' cells wrap (a cell can hold a sentence) and have a line
-    // between columns, so a wide table still reads column by column.
-    th: (props) => _jsx(TableHead, { ...omitNode(props), className: "border-r border-border whitespace-normal last:border-r-0" }),
-    td: (props) => _jsx(TableCell, { ...omitNode(props), className: "border-r border-border whitespace-normal last:border-r-0" }),
 };
 // The components for each `headingLevel` and level that takes it (`#`,
 // or the text's highest with `headingFrom="text"`), made once each.
@@ -236,7 +231,7 @@ function componentsFor(top, textTop) {
     }
     return components;
 }
-export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, onTasksChange: onTasksChangeProp, className, ...rest }) {
+export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, onTasksChange: onTasksChangeProp, tableLook = 'compact', className, ...rest }) {
     // On paper (EntityView's Print notes): every heading plain and open,
     // every task box a picture.
     const printing = usePrinting();
@@ -245,7 +240,7 @@ export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headi
     const textTop = useMemo(() => (headingFrom === 'text' ? textTopHeading(children) : 1), [headingFrom, children]);
     const components = useMemo(() => componentsFor(headingLevel, textTop), [headingLevel, textTop]);
     const [folded, setFolded] = useFolds(foldKey);
-    const rehypePlugins = useMemo(() => (foldKey === undefined ? [] : [[rehypeFold, { folded }]]), [foldKey, folded]);
+    const rehypePlugins = useMemo(() => (foldKey === undefined ? [rehypeTables] : [rehypeTables, [rehypeFold, { folded }]]), [foldKey, folded]);
     const toggle = useCallback((id) => setFolded(toggleFold(folded, id)), [folded, setFolded]);
     // Ticks not yet back as `children`: shown, and built on by the next
     // tick, so two quick ticks on a slow save both land. Kept while
@@ -261,5 +256,5 @@ export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headi
         if (saving && typeof saving.then === 'function')
             saving.then(undefined, () => setPending((current) => (current?.sent.includes(next) ? null : current)));
     }, [onTasksChange, children, shown, live]);
-    return (_jsx("div", { "data-slot": "markdown", "data-fold-scope": foldKey, ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(FoldContext.Provider, { value: foldKey === undefined ? null : toggle, children: _jsx(TaskToggleContext.Provider, { value: onTasksChange ? tickTask : null, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: rehypePlugins, components: components, children: onTasksChange ? shown : children }) }) }) }));
+    return (_jsx("div", { "data-slot": "markdown", "data-table-look": tableLook, "data-fold-scope": foldKey, ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(FoldContext.Provider, { value: foldKey === undefined ? null : toggle, children: _jsx(TaskToggleContext.Provider, { value: onTasksChange ? tickTask : null, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: rehypePlugins, components: components, children: onTasksChange ? shown : children }) }) }) }));
 }

package/dist/components/app/milkdown-editor.d.ts

@@ -1,2 +1,2 @@
 import type { RichTextEditorProps } from './rich-text-editor.js';
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, upload, imageAccept, imageMaxSize, headingLevel, headingFrom, foldKey, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, upload, imageAccept, imageMaxSize, headingLevel, headingFrom, foldKey, tableLook, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;