@tristan2828/ui-foundation 4.61.1 → 4.63.0

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

@@ -0,0 +1,7 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+declare function Progress({ className, children, value, ...props }: ProgressPrimitive.Root.Props): import("react").JSX.Element;
+declare function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props): import("react").JSX.Element;
+declare function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props): import("react").JSX.Element;
+declare function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props): import("react").JSX.Element;
+declare function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props): import("react").JSX.Element;
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, };

package/dist/components/ui/progress.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { cn } from "cn";
+function Progress({ className, children, value, ...props }) {
+    return (_jsxs(ProgressPrimitive.Root, { value: value, "data-slot": "progress", className: cn("flex flex-wrap gap-3", className), ...props, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
+}
+function ProgressTrack({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), "data-slot": "progress-track", ...props }));
+}
+function ProgressIndicator({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full bg-primary transition-all", className), ...props }));
+}
+function ProgressLabel({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Label, { className: cn("text-sm font-medium", className), "data-slot": "progress-label", ...props }));
+}
+function ProgressValue({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Value, { className: cn("ml-auto text-sm text-muted-foreground tabular-nums", className), "data-slot": "progress-value", ...props }));
+}
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, };

package/dist/components/ui/select.js

@@ -12,7 +12,7 @@ function SelectValue({ className, ...props }) {
     return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn("flex flex-1 text-left", className), ...props }));
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));

package/dist/components/ui/sheet.js

@@ -18,7 +18,7 @@ function SheetPortal({ ...props }) {
     return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className), ...props }));
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/20 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm dark:bg-black/40", className), ...props }));
 }
 function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
     return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));

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

@@ -0,0 +1,3 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react").JSX.Element;
+export { Slider };

package/dist/components/ui/slider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { cn } from "cn";
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const _values = Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+            ? defaultValue
+            : [min, max];
+    return (_jsx(SliderPrimitive.Root, { className: cn("data-horizontal:w-full data-vertical:h-full", className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] palette:shadow-(--thumb-glow) select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }) }));
+}
+export { Slider };

package/dist/components/ui/textarea.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "cn";
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Textarea };

package/dist/hooks/use-palette.d.ts

@@ -0,0 +1,14 @@
+import type { PaletteName } from '../lib/palettes.js';
+export type PaletteState = {
+    /** The palette on screen, or null for an app without one (light and dark as the system says). */
+    palette: PaletteName | null;
+    /** The app's own default. */
+    defaultPalette: PaletteName | null;
+    /** Whether this app lets a device pick (FoundationProviders' `palettePicker`). */
+    picker: boolean;
+    /** Saves `palette` as this device's choice. Does nothing without the picker. */
+    setPalette: (palette: PaletteName) => void;
+};
+export declare const PaletteContext: import("react").Context<PaletteState>;
+/** The palette on screen and, with the picker on, a way to change it on this device. */
+export declare function usePalette(): PaletteState;

package/dist/hooks/use-palette.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const NO_PALETTE = { palette: null, defaultPalette: null, picker: false, setPalette: () => { } };
+export const PaletteContext = createContext(NO_PALETTE);
+/** The palette on screen and, with the picker on, a way to change it on this device. */
+export function usePalette() {
+    return useContext(PaletteContext);
+}

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown, type MarkdownProps } from './components/app/markdown.js';
 export { countTasks, toggleTaskAt, type TaskCount } from './lib/markdown-tasks.js';
 export { NotesOutline, type NotesOutlineProps } from './components/app/notes-outline.js';
-export type { HeadingFrom, HeadingLevel } from './components/app/prose-look.js';
+export type { HeadingFrom, HeadingLevel, TableLook } 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';
@@ -76,6 +76,8 @@ export { useWakeLock } from './hooks/use-wake-lock.js';
 export { useSessionClock, type SessionClock, type SessionClockOptions, type SessionClockState, type SessionStatus, } from './hooks/use-session-clock.js';
 export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion.js';
 export { useMuted } from './hooks/use-muted.js';
+export { usePalette, type PaletteState } from './hooks/use-palette.js';
+export { PALETTE_LABELS, PALETTE_STORAGE_KEY, PALETTES, isPaletteName, type PaletteName } from './lib/palettes.js';
 export { createPushController, usePushPermission, type PushController, type PushControllerOptions, type PushEnvironment, type PushPermission, type PushStatus, } from './hooks/use-push-permission.js';
 export { cn } from './lib/utils.js';
 export { canVibrate, cancelCues, chime, cuesInSync, hush, onCuesRecovered, say, sequence, unlockAudio, vibrate, type ChimeOptions, type Cue, type CueTime, type SayOptions, type SequenceOptions, } from './lib/audio-cues.js';

package/dist/index.js

@@ -79,6 +79,8 @@ export { useWakeLock } from './hooks/use-wake-lock.js';
 export { useSessionClock, } from './hooks/use-session-clock.js';
 export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion.js';
 export { useMuted } from './hooks/use-muted.js';
+export { usePalette } from './hooks/use-palette.js';
+export { PALETTE_LABELS, PALETTE_STORAGE_KEY, PALETTES, isPaletteName } from './lib/palettes.js';
 export { createPushController, usePushPermission, } from './hooks/use-push-permission.js';
 // Utilities
 export { cn } from './lib/utils.js';

package/dist/lib/markdown-table.d.ts

@@ -0,0 +1,28 @@
+import { type HighlightColor } from './markdown-highlight.js';
+/** A run of a cell's text, with the highlight and bold it's in. */
+export type CellRun = {
+    text: string;
+    color: HighlightColor | null;
+    bold: boolean;
+};
+/** The cell's colour: every run with words in it highlighted, all in one colour. */
+export declare function cellColor(runs: readonly CellRun[]): HighlightColor | null;
+/** Whether a cell's words are all bold (and it has some). */
+export declare function cellBold(runs: readonly CellRun[]): boolean;
+/** Whether a table's first column is row headers: its body rows' first cells with words, all bold. */
+export declare function isHeaderColumn(firstCells: readonly (readonly CellRun[])[]): boolean;
+type HastNode = {
+    type: string;
+    tagName?: string;
+    value?: string;
+    properties?: Record<string, unknown>;
+    children?: HastNode[];
+};
+/**
+ * For <Markdown>: marks each table's coloured cells (`data-color`), and
+ * makes a header column's first cells row headers (`<th scope="row">`).
+ */
+export declare function rehypeTables(): (tree: HastNode) => void;
+/** Sorts cell texts as a person would: numbers by value ($4.99 before $12), then words, empty last. */
+export declare function compareCells(a: string, b: string): number;
+export {};

package/dist/lib/markdown-table.js

@@ -0,0 +1,106 @@
+// What a GFM table holds beyond its cells, read from the Markdown it
+// already has, so nothing new is written into the text (the developer's
+// choice A, 2026-11-04):
+//
+// - A column's alignment: GFM's own (`:---:`, `---:`).
+// - A cell's colour: its whole text in one highlight, `=={green}$4.99==`
+//   (src/lib/markdown-highlight.ts), paints the cell in that wash. Text
+//   only partly highlighted is just highlighted words. An empty cell has
+//   no colour (a highlight needs words).
+// - A header column: when the first cells of the body rows are all bold
+//   (those with words; at least one has), the first column is drawn as
+//   row headers.
+//
+// The rule is the same for <Markdown> (rehypeTables, on the HTML tree)
+// and the rich-text editor (its table decorations, rich-text-table.ts):
+// both turn a cell into runs of text with their highlight and bold, and
+// ask the functions here.
+import { isHighlightColor } from './markdown-highlight.js';
+/** The cell's colour: every run with words in it highlighted, all in one colour. */
+export function cellColor(runs) {
+    const worded = runs.filter((run) => run.text.trim() !== '');
+    if (worded.length === 0)
+        return null;
+    const color = worded[0].color;
+    return color && worded.every((run) => run.color === color) ? color : null;
+}
+/** Whether a cell's words are all bold (and it has some). */
+export function cellBold(runs) {
+    const worded = runs.filter((run) => run.text.trim() !== '');
+    return worded.length > 0 && worded.every((run) => run.bold);
+}
+/** Whether a table's first column is row headers: its body rows' first cells with words, all bold. */
+export function isHeaderColumn(firstCells) {
+    const worded = firstCells.filter((runs) => runs.some((run) => run.text.trim() !== ''));
+    return worded.length > 0 && worded.every(cellBold);
+}
+// A cell's runs, from its HTML: a <mark data-color> is a highlight
+// (remarkHighlights writes one), <strong> is bold.
+function runsOf(node, color = null, bold = false) {
+    if (node.type === 'text')
+        return [{ text: node.value ?? '', color, bold }];
+    let inner = color;
+    if (node.tagName === 'mark') {
+        const value = node.properties?.dataColor;
+        inner = isHighlightColor(value) ? value : 'amber';
+    }
+    const strong = bold || node.tagName === 'strong';
+    return (node.children ?? []).flatMap((child) => runsOf(child, inner, strong));
+}
+const elements = (node, tagName) => (node?.children ?? []).filter((child) => child.type === 'element' && child.tagName === tagName);
+function eachTable(node, visit) {
+    if (node.type === 'element' && node.tagName === 'table')
+        visit(node);
+    for (const child of node.children ?? [])
+        eachTable(child, visit);
+}
+/**
+ * For <Markdown>: marks each table's coloured cells (`data-color`), and
+ * makes a header column's first cells row headers (`<th scope="row">`).
+ */
+export function rehypeTables() {
+    return (tree) => {
+        eachTable(tree, (table) => {
+            const rows = [...elements(table, 'thead'), ...elements(table, 'tbody')].flatMap((section) => elements(section, 'tr'));
+            const body = elements(elements(table, 'tbody')[0], 'tr');
+            for (const row of rows) {
+                for (const cell of row.children ?? []) {
+                    if (cell.type !== 'element')
+                        continue;
+                    const color = cellColor(runsOf(cell));
+                    if (color)
+                        cell.properties = { ...cell.properties, dataColor: color };
+                }
+            }
+            const firsts = body.map((row) => (row.children ?? []).find((cell) => cell.type === 'element'));
+            if (!isHeaderColumn(firsts.map((cell) => (cell ? runsOf(cell) : []))))
+                return;
+            table.properties = { ...table.properties, dataHeaderColumn: '' };
+            for (const cell of firsts) {
+                if (!cell)
+                    continue;
+                cell.tagName = 'th';
+                cell.properties = { ...cell.properties, scope: 'row' };
+            }
+        });
+    };
+}
+/** Sorts cell texts as a person would: numbers by value ($4.99 before $12), then words, empty last. */
+export function compareCells(a, b) {
+    const x = numberIn(a);
+    const y = numberIn(b);
+    if (x !== null && y !== null && x !== y)
+        return x - y;
+    const left = a.trim();
+    const right = b.trim();
+    if (!left && right)
+        return 1;
+    if (left && !right)
+        return -1;
+    return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' });
+}
+// The first number in a cell's text: "$1,299.50" is 1299.5, "-3 kg" is -3.
+function numberIn(text) {
+    const found = text.replace(/,/g, '').match(/-?\d+(?:\.\d+)?/);
+    return found ? Number(found[0]) : null;
+}

package/dist/lib/palettes.d.ts

@@ -0,0 +1,21 @@
+export declare const PALETTES: readonly ["indigo-cyan", "indigo-rose", "graphite-periwinkle", "violet"];
+export type PaletteName = (typeof PALETTES)[number];
+/** Each palette's name as a person reads it, in the guide's ranked order. */
+export declare const PALETTE_LABELS: Record<PaletteName, string>;
+/** Where a device's chosen palette is kept. */
+export declare const PALETTE_STORAGE_KEY = "ui-foundation:palette";
+export declare function isPaletteName(value: unknown): value is PaletteName;
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
+export type PaletteStore = {
+    /** The saved choice, or null when there is none (or storage is blocked, or it names no palette). */
+    get: () => PaletteName | null;
+    set: (palette: PaletteName) => void;
+    subscribe: (listener: () => void) => () => void;
+    /** Another tab saved a choice: forget the in-memory one and re-read. */
+    changedElsewhere: () => void;
+};
+/** The store under usePalette, taking the storage so its rules are unit tested (tests/palettes.test.ts). */
+export declare function createPaletteStore(getStorage: () => StorageLike | undefined): PaletteStore;
+export declare const browserPaletteStore: PaletteStore;
+export declare function subscribeToBrowserPaletteStore(listener: () => void): () => void;
+export {};

package/dist/lib/palettes.js

@@ -0,0 +1,74 @@
+// The four palettes (design-language.md "Palettes"): an app's own dark
+// look, one of those the shared style guide chose. FoundationProviders'
+// `palette` names the app's default; with `palettePicker` the app shell
+// offers all four and the choice is remembered on this device
+// (localStorage, this store). A new device starts on the default. The
+// palette rides on <html> as data-palette, so popups portaled to <body>
+// wear it too, and styles/theme.css's `.dark[data-palette]` blocks do the
+// rest (components/app/palette-provider.tsx, hooks/use-palette.ts).
+export const PALETTES = ['indigo-cyan', 'indigo-rose', 'graphite-periwinkle', 'violet'];
+/** Each palette's name as a person reads it, in the guide's ranked order. */
+export const PALETTE_LABELS = {
+    'indigo-cyan': 'Indigo and Cyan',
+    'indigo-rose': 'Indigo and Rose',
+    'graphite-periwinkle': 'Graphite and Periwinkle',
+    violet: 'Violet',
+};
+/** Where a device's chosen palette is kept. */
+export const PALETTE_STORAGE_KEY = 'ui-foundation:palette';
+export function isPaletteName(value) {
+    return typeof value === 'string' && PALETTES.includes(value);
+}
+/** The store under usePalette, taking the storage so its rules are unit tested (tests/palettes.test.ts). */
+export function createPaletteStore(getStorage) {
+    // What this page chose, for when storage refuses it.
+    let memory = null;
+    const listeners = new Set();
+    const notify = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    return {
+        get() {
+            if (memory)
+                return memory;
+            try {
+                const stored = getStorage()?.getItem(PALETTE_STORAGE_KEY);
+                return isPaletteName(stored) ? stored : null;
+            }
+            catch {
+                return null;
+            }
+        },
+        set(palette) {
+            memory = palette;
+            try {
+                getStorage()?.setItem(PALETTE_STORAGE_KEY, palette);
+            }
+            catch {
+                // Storage blocked or full: kept for this page only.
+            }
+            notify();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        changedElsewhere() {
+            memory = null;
+            notify();
+        },
+    };
+}
+export const browserPaletteStore = createPaletteStore(() => (typeof window === 'undefined' ? undefined : window.localStorage));
+let listeningForOtherTabs = false;
+export function subscribeToBrowserPaletteStore(listener) {
+    if (!listeningForOtherTabs && typeof window !== 'undefined') {
+        listeningForOtherTabs = true;
+        window.addEventListener('storage', (event) => {
+            if (event.key === PALETTE_STORAGE_KEY || event.key === null)
+                browserPaletteStore.changedElsewhere();
+        });
+    }
+    return browserPaletteStore.subscribe(listener);
+}

package/package.json

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

@@ -20,6 +20,11 @@
    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. */
+/* Under a palette only (FoundationProviders' `palette`, data-palette on
+   <html>): the shared style guide's glow, which an app without one never
+   gets. `palette:hover:shadow-(--primary-glow)`. */
+@custom-variant palette (&:where([data-palette] *));
+
 @custom-variant density-compact (&:where([data-density="compact"], [data-density="compact"] *));
 
 @theme inline {
@@ -54,6 +59,7 @@
     --color-info-foreground: var(--info-foreground);
     --color-info-text: var(--info-text);
     --color-link: var(--link);
+    --color-card-header: var(--card-header);
     --color-highlight-amber: var(--highlight-amber);
     --color-highlight-yellow: var(--highlight-yellow);
     --color-highlight-green: var(--highlight-green);
@@ -94,6 +100,10 @@
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
+    /* Motion (the shared style guide): quick, standard easing, for every
+       transition-* utility that doesn't name its own duration. */
+    --default-transition-duration: 120ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Typography roles: one class sets size, line height and weight together,
@@ -102,11 +112,13 @@
   font-size: var(--type-page-title-size);
   line-height: var(--type-page-title-leading);
   font-weight: var(--type-page-title-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-section-title {
   font-size: var(--type-section-title-size);
   line-height: var(--type-section-title-leading);
   font-weight: var(--type-section-title-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-body {
   font-size: var(--type-body-size);
@@ -135,11 +147,13 @@
   font-size: var(--type-heading-1-size);
   line-height: var(--type-heading-1-leading);
   font-weight: var(--type-heading-1-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-heading-2 {
   font-size: var(--type-heading-2-size);
   line-height: var(--type-heading-2-leading);
   font-weight: var(--type-heading-2-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-heading-3 {
   font-size: var(--type-heading-3-size);
@@ -147,6 +161,52 @@
   font-weight: var(--type-heading-3-weight);
 }
 
+/* A hovered hub tile, widget or card, under a palette: its edge turns the
+   accent and a soft halo of it shows (--edge-glow). On an element that
+   draws its edge with ring-1 and its shadow with shadow-* (Card does), it
+   recolours the ring and adds the halo to the shadow it already has.
+   ModuleCard, WidgetCard and Board's cards carry it; a DataTable card
+   layout's cards get it with `*:data-[slot=card]:glow-edge` on the
+   item. */
+@utility glow-edge {
+  transition-property: box-shadow;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+  &:where([data-palette] *):hover {
+    --tw-ring-color: color-mix(in srgb, var(--primary) 75%, var(--border));
+    --tw-shadow: var(--card-shadow, 0 0 #0000), var(--edge-glow);
+  }
+}
+
+/* A primary button's shine under a palette: a light band sweeping across
+   on hover (650ms), once. Not under reduced motion, and never on another
+   variant. In components, so a button's own position utility still wins. */
+@layer components {
+  [data-palette] [data-slot="button"][data-variant="default"] {
+    position: relative;
+    overflow: hidden;
+  }
+  [data-palette] [data-slot="button"][data-variant="default"]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--white) 40%, transparent) 50%, transparent 65%);
+    transform: translateX(-130%);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [data-palette] [data-slot="button"][data-variant="default"]:hover::after {
+      animation: button-shine 650ms ease-out;
+    }
+  }
+}
+
+@keyframes button-shine {
+  to {
+    transform: translateX(130%);
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -159,6 +219,98 @@
     }
 }
 
+/* Tables in written text (<Markdown> and the rich-text editor; each puts
+   its table in a `.prose-table` box that scrolls sideways). Columns fit
+   their content: the table is only as wide as its words, a cell wraps at
+   18rem, and a right-aligned column (numbers) never wraps and uses
+   tabular figures. Two looks, set by `tableLook` on either renderer
+   (`data-table-look` on an ancestor):
+   - compact, the default: a full grid of hairlines, tight cells, the
+     header row on the heading band;
+   - boxed: a rounded box, roomier cells, the header row on the muted
+     fill, zebra rows (as DataTable's).
+   Row headers (a header column: src/lib/markdown-table.ts) sit on the
+   muted fill, semibold. A coloured cell (its whole text one highlight)
+   is painted in that wash, its words' own wash dropped. Unlayered, so a
+   mark's utility classes inside don't outrank it. */
+.prose-table {
+  width: fit-content;
+  /* The space it's in, less its own margins (the text's inset beside a
+     heading band): 100% would push it past the text by them. */
+  max-width: 100%;
+  max-width: -webkit-fill-available;
+  max-width: stretch;
+  overflow-x: auto;
+  /* Holds what's absolutely placed inside (a link's screen-reader text),
+     so it scrolls with the table instead of widening the page. */
+  position: relative;
+}
+.prose-table > table {
+  width: auto;
+  border-collapse: collapse;
+}
+.prose-table :is(td, th) {
+  min-width: 3rem;
+  max-width: 18rem;
+  padding: 0.25rem var(--table-cell-px);
+  vertical-align: top;
+  white-space: normal;
+  overflow-wrap: break-word;
+  border: 1px solid var(--border);
+  font-weight: var(--type-body-weight);
+}
+.prose-table th {
+  text-align: start;
+}
+.prose-table :is(td, th):is([style*="right"], [align="right"]) {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.prose-table th:not([scope="row"], [data-row-header]) {
+  background: var(--heading-band);
+  font-weight: 600;
+}
+.prose-table :is(th[scope="row"], [data-row-header]):not([data-color]) {
+  background: var(--muted);
+}
+.prose-table :is(th[scope="row"], [data-row-header]) {
+  font-weight: 600;
+}
+[data-table-look="boxed"] .prose-table {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+[data-table-look="boxed"] .prose-table :is(td, th) {
+  padding: var(--table-cell-py) 0.75rem;
+  border-width: 0 1px 1px 0;
+}
+[data-table-look="boxed"] .prose-table tr > :last-child {
+  border-right-width: 0;
+}
+[data-table-look="boxed"] .prose-table tr:last-child > * {
+  border-bottom-width: 0;
+}
+[data-table-look="boxed"] .prose-table th:not([scope="row"], [data-row-header]) {
+  background: var(--muted);
+  font-weight: var(--type-label-weight);
+}
+/* Zebra: <Markdown>'s body rows (after its <thead>), or the editor's,
+   whose header row is its only <tbody>'s first. */
+[data-table-look="boxed"] .prose-table :is(thead + tbody > tr:nth-child(even), tbody:only-child > tr:nth-child(odd):not(:first-child)) > :not([data-color], th[scope="row"], [data-row-header]) {
+  background: var(--table-stripe);
+}
+.prose-table :is(td, th)[data-color="amber"] { background: var(--highlight-amber); }
+.prose-table :is(td, th)[data-color="yellow"] { background: var(--highlight-yellow); }
+.prose-table :is(td, th)[data-color="green"] { background: var(--highlight-green); }
+.prose-table :is(td, th)[data-color="red"] { background: var(--highlight-red); }
+.prose-table [data-color] mark {
+  background: transparent;
+}
+/* Cells picked by dragging across them, in the editor. */
+.prose-table .selectedCell {
+  background: var(--table-highlight);
+}
+
 /* Printed notes (EntityView's Print notes, src/components/app/entity-view-print.tsx).
    While its copy is in <body>, paper shows that copy alone: the app beside
    it (shell, header, rail, dialogs) is left off, and the copy is in the