@danxbot/ui 15.28.0 → 15.29.0

package/dist/theme.css

@@ -45,197 +45,197 @@
 @source "./index.js";
 
 /* from src/styles/authored.css */
-@theme inline {
-  /* --- Surfaces + structure --- */
-  --color-canvas: var(--canvas);
-  --color-canvas-subtle: var(--canvas-subtle);
-  --color-surface: var(--surface);
-  --color-surface-sunken: var(--surface-sunken);
-  --color-surface-raised: var(--surface-raised);
-  --color-surface-overlay: var(--surface-overlay);
-  --color-surface-inset: var(--surface-inset);
-  --color-surface-hover: var(--surface-hover);
-  --color-surface-active: var(--surface-active);
-  --color-surface-selected: var(--surface-selected);
-
-  --color-border-subtle: var(--border-subtle);
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-border-interactive: var(--border-interactive);
-
-  /* --- Content --- */
-  --color-primary: var(--text-primary);
-  --color-secondary: var(--text-secondary);
-  --color-tertiary: var(--text-tertiary);
-  --color-disabled: var(--text-disabled);
-  --color-inverse: var(--text-inverse);
-
-  /* --- Accent (celadon) --- */
-  --color-accent: var(--accent);
-  --color-accent-hover: var(--accent-hover);
-  --color-accent-active: var(--accent-active);
-  --color-accent-subtle: var(--accent-subtle);
-  --color-accent-subtle-hover: var(--accent-subtle-hover);
-  --color-accent-border: var(--accent-border);
-  --color-accent-text: var(--accent-text);
-  --color-accent-contrast: var(--accent-contrast);
-
-  /* --- Brand (ember) --- */
-  --color-brand: var(--brand);
-  --color-brand-hover: var(--brand-hover);
-  --color-brand-subtle: var(--brand-subtle);
-  --color-brand-text: var(--brand-text);
-  --color-brand-contrast: var(--brand-contrast);
-
-  /* --- Status --- */
-  --color-success: var(--success);
-  --color-success-subtle: var(--success-subtle);
-  --color-success-text: var(--success-text);
-  --color-success-border: var(--success-border);
-
-  --color-warning: var(--warning);
-  --color-warning-subtle: var(--warning-subtle);
-  --color-warning-subtle-hover: var(--warning-subtle-hover);
-  --color-warning-text: var(--warning-text);
-  --color-warning-border: var(--warning-border);
-
-  --color-danger: var(--danger);
-  --color-danger-hover: var(--danger-hover);
-  --color-danger-subtle: var(--danger-subtle);
-  --color-danger-text: var(--danger-text);
-  --color-danger-border: var(--danger-border);
-  --color-danger-contrast: var(--danger-contrast);
-
-  /* --- Chart palette (DX-3963): eight ordered categorical hues + one sequential --- */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-chart-6: var(--chart-6);
-  --color-chart-7: var(--chart-7);
-  --color-chart-8: var(--chart-8);
-  --color-chart-seq: var(--chart-seq);
-
-  /* --- Confidence (a 1-5 self-rating, one colour per level) --- */
-  --color-confidence-1: var(--confidence-1);
-  --color-confidence-2: var(--confidence-2);
-  --color-confidence-3: var(--confidence-3);
-  --color-confidence-4: var(--confidence-4);
-  --color-confidence-5: var(--confidence-5);
-  --color-confidence-none: var(--confidence-none);
-
-  --color-info: var(--info);
-  --color-info-subtle: var(--info-subtle);
-  --color-info-text: var(--info-text);
-  --color-info-border: var(--info-border);
-
-  /* DX-3662 — the 8th tone: a quieter grey for a CLOSED/inert fact (a
-     terminated card, a retired record) — distinct from `--neutral`
-     (`text-tertiary`/`bg-tertiary`, the "not yet decided" grey every OTHER
-     pending/undetermined state already draws from). Both are on the same
-     near-zero-chroma axis on purpose (an inert fact and an undecided one are
-     both "no signal", just at different points in a lifecycle) but pinned to
-     different `L`s so they stay tellable apart side by side — see
-     `muted-quieter-than-neutral.test.ts` for the measured contrast-ranking
-     floor this promises (DX-3696 — the file this comment used to cite,
-     `token-distance.test.ts`, does not exist in this repo). */
-  --color-muted: var(--muted);
-  --color-muted-subtle: var(--muted-subtle);
-  --color-muted-text: var(--muted-text);
-  --color-muted-border: var(--muted-border);
-
-  /* --- Fields --- */
-  --color-field: var(--field-bg);
-  --color-field-hover: var(--field-bg-hover);
-  --color-field-border: var(--field-border);
-  --color-field-border-hover: var(--field-border-hover);
-  --color-field-placeholder: var(--field-placeholder);
-
-  --color-scrim: var(--scrim);
-  --color-veil: var(--veil);
-  --color-focus-halo: var(--focus-halo);
-  --color-control-knob: var(--control-knob);
-  --color-control-knob-on: var(--control-knob-on);
-  --color-switch-track-off: var(--switch-track-off);
-  --color-focus-ring: var(--focus-ring);
-
-  /* --- Type --- */
-  --font-display: var(--font-display);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-
-  --text-2xs: var(--text-2xs);
-  --text-xs: var(--text-xs);
-  --text-sm: var(--text-sm);
-  --text-base: var(--text-base);
-  --text-md: var(--text-md);
-  --text-lg: var(--text-lg);
-  --text-xl: var(--text-xl);
-  --text-2xl: var(--text-2xl);
-  --text-3xl: var(--text-3xl);
-  --text-4xl: var(--text-4xl);
-  --text-5xl: var(--text-5xl);
-
-  /* Remap Tailwind's weight utilities onto the non-integer ramp, so
-     `font-medium` / `font-bold` pick up 510 / 680 rather than 500 / 700. */
-  --font-weight-normal: var(--weight-normal);
-  --font-weight-medium: var(--weight-medium);
-  --font-weight-semibold: var(--weight-semibold);
-  --font-weight-bold: var(--weight-bold);
-
-  --leading-tight: var(--leading-tight);
-  --leading-snug: var(--leading-snug);
-  --leading-normal: var(--leading-normal);
-  --leading-relaxed: var(--leading-relaxed);
-
-  --tracking-tighter: var(--tracking-tighter);
-  --tracking-tight: var(--tracking-tight);
-  --tracking-normal: var(--tracking-normal);
-  --tracking-wide: var(--tracking-wide);
-  --tracking-widest: var(--tracking-widest);
-
-  /* --- Shape --- */
-  --radius-xs: var(--radius-xs);
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-  --radius-2xl: var(--radius-2xl);
-  --radius-3xl: var(--radius-3xl);
-
-  /* --- Control heights, exposed as sizing utilities (h-control-md etc.) --- */
-  /* Tailwind's spacing BASE, retargeted through the size multiplier.
-     This one line is what makes every `p-4`, `gap-3`, `size-5` in every
-     component respond to the size control — without it the utilities keep
-     Tailwind's fixed 0.25rem and only the hand-written control heights move,
-     which is why the first version of the control read as "changes padding
-     slightly" and nothing else. */
-  --spacing: calc(0.25rem * var(--ui-scale));
-
-  --spacing-control-xs: var(--control-xs);
-  --spacing-control-sm: var(--control-sm);
-  --spacing-control-md: var(--control-md);
-  --spacing-control-lg: var(--control-lg);
-  --spacing-control-xl: var(--control-xl);
-
-  /* --- Elevation --- */
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-knob: var(--shadow-knob);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-tooltip: var(--shadow-tooltip);
-  --shadow-glow-accent: var(--shadow-glow-accent);
-
-  /* --- Motion ---
-     The curves, durations and `animate-*` utilities are owned by motion.css,
-     which declares them directly in Tailwind's own namespaces. All that is
-     left here is retargeting the framework's bare `transition` default off
-     its Material-1-era `cubic-bezier(0.4, 0, 0.2, 1)` @ 150ms.              */
-  --default-transition-duration: var(--dur-base);
-  --default-transition-timing-function: var(--ease-standard);
+@theme inline {
+  /* --- Surfaces + structure --- */
+  --color-canvas: var(--canvas);
+  --color-canvas-subtle: var(--canvas-subtle);
+  --color-surface: var(--surface);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-inset: var(--surface-inset);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-active: var(--surface-active);
+  --color-surface-selected: var(--surface-selected);
+
+  --color-border-subtle: var(--border-subtle);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-border-interactive: var(--border-interactive);
+
+  /* --- Content --- */
+  --color-primary: var(--text-primary);
+  --color-secondary: var(--text-secondary);
+  --color-tertiary: var(--text-tertiary);
+  --color-disabled: var(--text-disabled);
+  --color-inverse: var(--text-inverse);
+
+  /* --- Accent (celadon) --- */
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-subtle-hover: var(--accent-subtle-hover);
+  --color-accent-border: var(--accent-border);
+  --color-accent-text: var(--accent-text);
+  --color-accent-contrast: var(--accent-contrast);
+
+  /* --- Brand (ember) --- */
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-subtle: var(--brand-subtle);
+  --color-brand-text: var(--brand-text);
+  --color-brand-contrast: var(--brand-contrast);
+
+  /* --- Status --- */
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-success-text: var(--success-text);
+  --color-success-border: var(--success-border);
+
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-warning-subtle-hover: var(--warning-subtle-hover);
+  --color-warning-text: var(--warning-text);
+  --color-warning-border: var(--warning-border);
+
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-subtle: var(--danger-subtle);
+  --color-danger-text: var(--danger-text);
+  --color-danger-border: var(--danger-border);
+  --color-danger-contrast: var(--danger-contrast);
+
+  /* --- Chart palette (DX-3963): eight ordered categorical hues + one sequential --- */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-chart-seq: var(--chart-seq);
+
+  /* --- Confidence (a 1-5 self-rating, one colour per level) --- */
+  --color-confidence-1: var(--confidence-1);
+  --color-confidence-2: var(--confidence-2);
+  --color-confidence-3: var(--confidence-3);
+  --color-confidence-4: var(--confidence-4);
+  --color-confidence-5: var(--confidence-5);
+  --color-confidence-none: var(--confidence-none);
+
+  --color-info: var(--info);
+  --color-info-subtle: var(--info-subtle);
+  --color-info-text: var(--info-text);
+  --color-info-border: var(--info-border);
+
+  /* DX-3662 — the 8th tone: a quieter grey for a CLOSED/inert fact (a
+     terminated card, a retired record) — distinct from `--neutral`
+     (`text-tertiary`/`bg-tertiary`, the "not yet decided" grey every OTHER
+     pending/undetermined state already draws from). Both are on the same
+     near-zero-chroma axis on purpose (an inert fact and an undecided one are
+     both "no signal", just at different points in a lifecycle) but pinned to
+     different `L`s so they stay tellable apart side by side — see
+     `muted-quieter-than-neutral.test.ts` for the measured contrast-ranking
+     floor this promises (DX-3696 — the file this comment used to cite,
+     `token-distance.test.ts`, does not exist in this repo). */
+  --color-muted: var(--muted);
+  --color-muted-subtle: var(--muted-subtle);
+  --color-muted-text: var(--muted-text);
+  --color-muted-border: var(--muted-border);
+
+  /* --- Fields --- */
+  --color-field: var(--field-bg);
+  --color-field-hover: var(--field-bg-hover);
+  --color-field-border: var(--field-border);
+  --color-field-border-hover: var(--field-border-hover);
+  --color-field-placeholder: var(--field-placeholder);
+
+  --color-scrim: var(--scrim);
+  --color-veil: var(--veil);
+  --color-focus-halo: var(--focus-halo);
+  --color-control-knob: var(--control-knob);
+  --color-control-knob-on: var(--control-knob-on);
+  --color-switch-track-off: var(--switch-track-off);
+  --color-focus-ring: var(--focus-ring);
+
+  /* --- Type --- */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-md: var(--text-md);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+
+  /* Remap Tailwind's weight utilities onto the non-integer ramp, so
+     `font-medium` / `font-bold` pick up 510 / 680 rather than 500 / 700. */
+  --font-weight-normal: var(--weight-normal);
+  --font-weight-medium: var(--weight-medium);
+  --font-weight-semibold: var(--weight-semibold);
+  --font-weight-bold: var(--weight-bold);
+
+  --leading-tight: var(--leading-tight);
+  --leading-snug: var(--leading-snug);
+  --leading-normal: var(--leading-normal);
+  --leading-relaxed: var(--leading-relaxed);
+
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-widest: var(--tracking-widest);
+
+  /* --- Shape --- */
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+
+  /* --- Control heights, exposed as sizing utilities (h-control-md etc.) --- */
+  /* Tailwind's spacing BASE, retargeted through the size multiplier.
+     This one line is what makes every `p-4`, `gap-3`, `size-5` in every
+     component respond to the size control — without it the utilities keep
+     Tailwind's fixed 0.25rem and only the hand-written control heights move,
+     which is why the first version of the control read as "changes padding
+     slightly" and nothing else. */
+  --spacing: calc(0.25rem * var(--ui-scale));
+
+  --spacing-control-xs: var(--control-xs);
+  --spacing-control-sm: var(--control-sm);
+  --spacing-control-md: var(--control-md);
+  --spacing-control-lg: var(--control-lg);
+  --spacing-control-xl: var(--control-xl);
+
+  /* --- Elevation --- */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-knob: var(--shadow-knob);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-tooltip: var(--shadow-tooltip);
+  --shadow-glow-accent: var(--shadow-glow-accent);
+
+  /* --- Motion ---
+     The curves, durations and `animate-*` utilities are owned by motion.css,
+     which declares them directly in Tailwind's own namespaces. All that is
+     left here is retargeting the framework's bare `transition` default off
+     its Material-1-era `cubic-bezier(0.4, 0, 0.2, 1)` @ 150ms.              */
+  --default-transition-duration: var(--dur-base);
+  --default-transition-timing-function: var(--ease-standard);
 }
 
 /* from src/styles/tokens.css */

package/dist/types/components/LegalDocument.d.ts

@@ -0,0 +1,23 @@
+import { type MouseEvent } from "react";
+import { type LegalDocumentValue } from "../lib/legal-document";
+export interface LegalDocumentProps {
+    document: LegalDocumentValue;
+    /**
+     * The element the title line is. `h1` when the document is the page's own
+     * heading, `p` when something else (an app shell's top bar) already owns the
+     * page's one `h1`.
+     */
+    titleAs?: "h1" | "p";
+    /** Names the contents list, and is the collapsed control's text until a section is current. */
+    contentsLabel?: string;
+    /**
+     * Runs when a contents link is clicked, with the section's anchor id and the
+     * click. The links are real `<a href="#section-N">`, which a path-based
+     * router leaves to the browser. A router that owns the fragment itself (a
+     * hash router) suppresses the browser's jump here, as `SectionNav` documents
+     * for its own rows, and scrolls the section into view instead.
+     */
+    onNavigate?: (anchor: string, event: MouseEvent<HTMLAnchorElement>) => void;
+    className?: string;
+}
+export declare function LegalDocument({ document: legal, titleAs: Title, contentsLabel, onNavigate, className, }: LegalDocumentProps): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -42,6 +42,8 @@ export { Menu, MenuItem, MenuGroup, MenuRadioGroup, MenuRadioItem, MenuCheckboxI
 export { ThemeMenu, type ThemeMenuProps } from "./components/ThemeMenu";
 export { AppShell, type AppShellProps, type NavItem, type NavSection, } from "./components/AppShell";
 export { SectionNav, type SectionNavProps } from "./components/SectionNav";
+export { LegalDocument, type LegalDocumentProps } from "./components/LegalDocument";
+export { countUnconfirmed, legalSectionAnchor, splitUnconfirmed, type LegalBlock, type LegalDocumentValue, type LegalSection, type LegalTextRun, } from "./lib/legal-document";
 export { FileUpload, type FileUploadProps, type UploadFile } from "./components/FileUpload";
 export { ImageUploadField, type ImageUploadFieldProps, type ImageUploadFieldShape, type ImageUploadFieldSize, } from "./components/ImageUploadField";
 export { DatePicker, type DatePickerProps, type DateRange } from "./components/DatePicker";

package/dist/types/lib/legal-document.d.ts

@@ -0,0 +1,82 @@
+/**
+ * A legal document as DATA, plus the four pure decisions the `LegalDocument`
+ * component makes about it. DX-4022.
+ *
+ * No React in this file on purpose: the `LegalDocumentValue` shape is what a
+ * server holds and serves, so the `./pure` entry re-exports the types and a
+ * back end can type its content module without importing the design system's
+ * component graph.
+ *
+ * The shape mirrors a legal text and adds nothing to it: a title block,
+ * numbered sections, and in each section the paragraphs and bullet lists in
+ * document order. A paragraph that opens a numbered clause ("4.2 Beta
+ * confidentiality. ...") carries that opening as `clause`, split off only so
+ * a renderer can set it as a run-in heading and give it an anchor;
+ * `${number} ${heading} ${text}` is the paragraph as written. Nothing in the
+ * component writes a word of the document, which is what lets a verbatim check
+ * compare the page against its source and expect an exact match.
+ */
+export interface LegalDocumentValue {
+    /** The document's own title line, e.g. "TERMS OF USE". */
+    title: string;
+    /** The company line under the title. */
+    issuer: string;
+    /** As written in the document, so it may still be an unfilled `[DATE]`. */
+    effectiveDate: string;
+    /** Which version of the text this is, as an acceptance would record it. */
+    version: string;
+    sections: readonly LegalSection[];
+}
+export interface LegalSection {
+    /** "1", "2", ... the number the document gives the section, and what "Section N" cites. */
+    number: string;
+    title: string;
+    blocks: readonly LegalBlock[];
+}
+export type LegalBlock = {
+    kind: "paragraph";
+    /** A numbered clause's opening words, when the paragraph starts one. */
+    clause?: {
+        number: string;
+        heading: string;
+    };
+    text: string;
+} | {
+    kind: "list";
+    items: readonly string[];
+};
+/**
+ * The fragment a section or clause is linked by: "7" is `section-7`, "7.2" is
+ * `section-7-2`.
+ *
+ * Keyed on the NUMBER, never the title: "Section 7" is how a document cites
+ * itself (and how a lawyer cites it in an email), so a link survives a heading
+ * being reworded in a later version.
+ */
+export declare function legalSectionAnchor(number: string): string;
+/** One run of a paragraph: plain text, or a value the document left unfilled. */
+export interface LegalTextRun {
+    text: string;
+    unconfirmed: boolean;
+}
+/**
+ * Split text into plain runs and square-bracketed placeholder runs.
+ *
+ * A draft marks every value it has not settled (a date, a notice period, a
+ * dollar cap) by writing it in square brackets. Those spans are kept verbatim,
+ * brackets included; this only finds them so they can be SHOWN as unconfirmed
+ * rather than read as agreed terms. Concatenating the runs' text always gives
+ * back the input unchanged.
+ */
+export declare function splitUnconfirmed(text: string): LegalTextRun[];
+/** How many placeholder values a document still carries. */
+export declare function countUnconfirmed(document: LegalDocumentValue): number;
+/**
+ * Whether a run of text is written in capitals throughout.
+ *
+ * Disclaimers and liability limits are set in capitals on purpose (that is what
+ * makes them conspicuous in the legal sense), so the renderer keeps every
+ * letter as written and makes the block easier to read instead: a rule beside
+ * it, looser tracking. A short all-caps fragment is not a paragraph of it.
+ */
+export declare function isAllCaps(text: string): boolean;

package/dist/types/pure.d.ts

@@ -42,3 +42,4 @@ export { formatBytes, formatTokens, formatCompactNumber } from "./lib/format";
 export { formatDate, parseDate, formatDateTime, parseDateTime, type FormatDateTimeOptions, type ParseDateTimeOptions, formatCurrency, parseCurrency, formatNumber, parseNumber, type FormatNumberOptions, formatBoolean, parseBoolean, type FormatBooleanOptions, } from "./lib/values";
 export { confidenceLevel, CONFIDENCE_LEVEL_LABELS, type ConfidenceLevel } from "./lib/confidence";
 export { CHART_SERIES_COUNT, CHART_SERIES_TOKENS, CHART_SEQUENTIAL_TOKEN, CHART_SEQUENTIAL_COLOR, chartSeriesColor, } from "./lib/chart-palette";
+export type { LegalBlock, LegalDocumentValue, LegalSection } from "./lib/legal-document";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "15.28.0",
+  "version": "15.29.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",