@tensor_1/react 2.47.0 → 2.48.0

package/dist/components/DiffViewer.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
+import { useUixLabels } from "../labels-context.js";
 import { buildThreeWayDiff, summarizeDiff } from "../diff-model.js";
 import { cx } from "../cx.js";
 import { StatusPill } from "./StatusPill.js";
@@ -34,7 +35,7 @@ const DEFAULT_DIFF_VIEWER_LABELS = {
   progress: "{resolved} of {total} differences resolved."
 };
 const GROUPS = ["conflicted", "changed", "added", "removed"];
-const renderValue = (value, notPresent) => value === void 0 ? notPresent : JSON.stringify(value, null, 2);
+const jsonText = (value, notPresent) => value === void 0 ? notPresent : JSON.stringify(value, null, 2);
 function DiffViewer({
   base,
   current,
@@ -44,9 +45,17 @@ function DiffViewer({
   onResolutionChange,
   labels: labelOverrides,
   controlSize = "sm",
-  className
+  className,
+  labelFor,
+  renderValue,
+  provenance
 }) {
-  const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...labelOverrides };
+  const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...useUixLabels().diffViewer, ...labelOverrides };
+  const nameOf = (path) => {
+    const node = labelFor?.(path);
+    if (node == null || node === false) return { node: /* @__PURE__ */ jsx("code", { children: path }), text: path };
+    return { node, text: typeof node === "string" || typeof node === "number" ? String(node) : path };
+  };
   const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
   const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
   const id = useId();
@@ -91,19 +100,24 @@ function DiffViewer({
         ] }),
         grouped.map((entry) => {
           const resolution = resolutions[entry.path] ?? "pending";
+          const name = nameOf(entry.path);
           return /* @__PURE__ */ jsxs("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
             /* @__PURE__ */ jsxs("summary", { children: [
-              /* @__PURE__ */ jsx("code", { children: entry.path }),
+              /* @__PURE__ */ jsx("span", { className: "uix-diff-viewer__name", children: name.node }),
               /* @__PURE__ */ jsx(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolutionLabel[resolution] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ jsxs("div", { role: "region", "aria-label": fillLabel(labels.valueFor, { version: labels[version], path: entry.path }), children: [
-              /* @__PURE__ */ jsx("strong", { children: labels[version] }),
-              /* @__PURE__ */ jsx("pre", { children: renderValue(entry[version], labels.notPresent) })
-            ] }, version)) }),
-            /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
-              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: entry.path }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: entry.path }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: entry.path }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
+            /* @__PURE__ */ jsx("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => {
+              const origin = provenance?.(entry.path, version);
+              return /* @__PURE__ */ jsxs("div", { role: "region", "aria-label": fillLabel(labels.valueFor, { version: labels[version], path: name.text }), children: [
+                /* @__PURE__ */ jsx("strong", { children: labels[version] }),
+                renderValue ? /* @__PURE__ */ jsx("div", { className: "uix-diff-viewer__value", children: renderValue(entry[version], entry.path, version) ?? labels.notPresent }) : /* @__PURE__ */ jsx("pre", { children: jsonText(entry[version], labels.notPresent) }),
+                origin != null && origin !== false && /* @__PURE__ */ jsx("div", { className: "uix-diff-viewer__provenance", children: origin })
+              ] }, version);
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: name.text }), children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: name.text }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: name.text }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: name.text }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
             ] })
           ] }, entry.path);
         })

package/dist/components/DiscardPrompt.js

@@ -68,6 +68,7 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
     setPrompt({ anchor: anchor ?? closeRef.current, returnTo: active instanceof HTMLElement ? active : null });
   }, [closeRef, setPrompt]);
   const dialogRef = useRef(null);
+  const lightDismissed = useRef(false);
   const backOut = useRef({ focus: null, forced: false });
   const keepEditing = useCallback(() => {
     const asked = latest.current.prompt;
@@ -79,6 +80,7 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
     back?.focus();
   }, [closeRef, setPrompt]);
   const ref = useDialog(open, onClose, () => {
+    if (lightDismissed.current) return true;
     if (!guarded()) return false;
     if (backOut.current.forced) {
       backOut.current.forced = false;
@@ -104,7 +106,19 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
     dialogRef.current = el;
     if (!el || !open) return;
     const ours = (event) => event.target?.closest?.("dialog") === el;
+    const onBeforeToggle = (event) => {
+      const kind = event.target.getAttribute?.("popover");
+      if (event.newState !== "closed" || kind == null || kind === "manual") return;
+      lightDismissed.current = true;
+      window.setTimeout(() => {
+        lightDismissed.current = false;
+      }, 0);
+    };
     const onCancel = (event) => {
+      if (lightDismissed.current) {
+        event.preventDefault();
+        return;
+      }
       if (!guarded()) return;
       event.preventDefault();
       if (latest.current.prompt) {
@@ -133,6 +147,7 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
       setPrompt(null);
     };
     el.addEventListener("cancel", onCancel);
+    document.addEventListener("beforetoggle", onBeforeToggle, true);
     el.addEventListener("pointerdown", onPointerDownCapture, true);
     el.addEventListener("pointerup", onPointerUpCapture, true);
     el.addEventListener("pointercancel", forget, true);
@@ -141,6 +156,7 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
     el.addEventListener("keydown", forget, true);
     return () => {
       el.removeEventListener("cancel", onCancel);
+      document.removeEventListener("beforetoggle", onBeforeToggle, true);
       el.removeEventListener("pointerdown", onPointerDownCapture, true);
       el.removeEventListener("pointerup", onPointerUpCapture, true);
       el.removeEventListener("pointercancel", forget, true);

package/dist/components/DisplayPreferences.d.ts

@@ -0,0 +1,83 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { DisplayPreferenceValues, ThemePreference } from '../display-preferences-model.js';
+
+interface UseDisplayPreferencesOptions {
+    /** `localStorage` key. Default `DISPLAY_PREFERENCES_STORAGE_KEY`; pass the same key to `displayPreferencesScript`. */
+    storageKey?: string;
+    /** Your defaults for anything not stored yet. Pass the same to `displayPreferencesScript`. */
+    defaults?: Partial<DisplayPreferenceValues>;
+    /** Write the attributes on `<html>`. Default `true`; `false` for a preview that must not restyle the page. */
+    apply?: boolean;
+}
+interface UseDisplayPreferencesResult {
+    /** The person's choices (`system` where they left it to the system). */
+    preferences: DisplayPreferenceValues;
+    /** The theme in force: `system` resolved against `prefers-color-scheme`. */
+    resolvedTheme: 'light' | 'dark';
+    setPreference: <K extends keyof DisplayPreferenceValues>(key: K, value: DisplayPreferenceValues[K]) => void;
+    setPreferences: (next: DisplayPreferenceValues) => void;
+}
+/**
+ * The display preferences (HAR-1372): read from `localStorage`, kept in step with the system
+ * (`prefers-color-scheme`, `prefers-contrast`), with other tabs and with other users of the hook in
+ * this tab, and written to `<html>` as the attributes the tokens read. Changing one applies at once,
+ * with every transition suspended for that frame so nothing fades between themes.
+ * The server renders `defaults`; the stored choice is read before the first paint on the client
+ * (pair it with `displayPreferencesScript` in the head, so the page itself never flashes).
+ */
+declare function useDisplayPreferences({ storageKey, defaults: defaultOverrides, apply }?: UseDisplayPreferencesOptions): UseDisplayPreferencesResult;
+interface DisplayPreferencesLabels {
+    theme: string;
+    light: string;
+    dark: string;
+    system: string;
+    contrast: string;
+    contrastStandard: string;
+    contrastMore: string;
+    textScale: string;
+    textSmall: string;
+    textDefault: string;
+    textLarge: string;
+    textLarger: string;
+    motion: string;
+    motionSystem: string;
+    motionReduce: string;
+    density: string;
+    densityCompact: string;
+    densityStandard: string;
+    densityComfortable: string;
+}
+declare const DEFAULT_DISPLAY_PREFERENCES_LABELS: DisplayPreferencesLabels;
+interface ThemeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled theme. Leave it out and the switcher keeps the preference itself (`useDisplayPreferences`). */
+    value?: ThemePreference;
+    onValueChange?: (value: ThemePreference) => void;
+    /** The storage key when uncontrolled. */
+    storageKey?: string;
+    /** `icons` shows the icons only (each keeps its word as its name); default shows icon and word. */
+    display?: 'labels' | 'icons';
+    labels?: Partial<DisplayPreferencesLabels>;
+}
+/**
+ * Light / dark / system (HAR-1372), a radio group over `Segmented`. Uncontrolled, it reads and
+ * writes the display preferences itself; controlled, it only reports.
+ */
+declare function ThemeSwitcher({ value, onValueChange, storageKey, display, labels: labelOverrides, className, ...props }: ThemeSwitcherProps): react.JSX.Element;
+interface DisplayPreferencesProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled values. Leave out to keep them in `localStorage` (`useDisplayPreferences`). */
+    value?: DisplayPreferenceValues;
+    onValueChange?: (value: DisplayPreferenceValues) => void;
+    storageKey?: string;
+    /** Show only some of the five settings, in this order. Default all. */
+    settings?: readonly (keyof DisplayPreferenceValues)[];
+    labels?: Partial<DisplayPreferencesLabels>;
+}
+/**
+ * The five display settings (HAR-1372; MOTUS C-4, TENSOR A7): theme, contrast, text size, motion
+ * and density, each a labelled radio group. Put it in a preferences page or an account menu's
+ * dialog. Changes apply at once and are remembered.
+ */
+declare function DisplayPreferences({ value, onValueChange, storageKey, settings, labels: labelOverrides, className, ...props }: DisplayPreferencesProps): react.JSX.Element;
+
+export { DEFAULT_DISPLAY_PREFERENCES_LABELS, DisplayPreferences, type DisplayPreferencesLabels, type DisplayPreferencesProps, ThemeSwitcher, type ThemeSwitcherProps, type UseDisplayPreferencesOptions, type UseDisplayPreferencesResult, useDisplayPreferences };

package/dist/components/DisplayPreferences.js

@@ -0,0 +1,185 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+import { MonitorIcon, MoonIcon, SunIcon } from "../icons/components.js";
+import { Segmented, SegmentedOption } from "./Segmented.js";
+import {
+  DEFAULT_DISPLAY_PREFERENCES,
+  DISPLAY_PREFERENCES_STORAGE_KEY,
+  applyDisplayAttributes,
+  parseDisplayPreferences,
+  readSystemDisplayPreferences,
+  resolveDisplayAttributes
+} from "../display-preferences-model.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const CHANGE_EVENT = "uixdisplaypreferencechange";
+function useDisplayPreferences({ storageKey = DISPLAY_PREFERENCES_STORAGE_KEY, defaults: defaultOverrides, apply = true } = {}) {
+  const defaults = { ...DEFAULT_DISPLAY_PREFERENCES, ...defaultOverrides };
+  const defaultsKey = JSON.stringify(defaults);
+  const [preferences, setState] = useState(defaults);
+  const [system, setSystem] = useState({ dark: false, moreContrast: false });
+  const [loaded, setLoaded] = useState(false);
+  const read = useCallback(() => {
+    let raw = null;
+    try {
+      raw = window.localStorage.getItem(storageKey);
+    } catch {
+    }
+    return parseDisplayPreferences(raw, JSON.parse(defaultsKey));
+  }, [storageKey, defaultsKey]);
+  const latest = useRef(preferences);
+  latest.current = preferences;
+  useIsomorphicLayoutEffect(() => {
+    setState(read());
+    setSystem(readSystemDisplayPreferences());
+    setLoaded(true);
+  }, [read]);
+  useEffect(() => {
+    const queries = typeof matchMedia === "function" ? [matchMedia("(prefers-color-scheme: dark)"), matchMedia("(prefers-contrast: more)")] : [];
+    const onSystem = () => setSystem(readSystemDisplayPreferences());
+    const onStorage = (event) => {
+      if (event.key === storageKey) setState(read());
+    };
+    const onChange = (event) => {
+      const detail = event.detail;
+      if (detail?.storageKey === storageKey) setState(detail.value);
+    };
+    for (const q of queries) q.addEventListener("change", onSystem);
+    window.addEventListener("storage", onStorage);
+    window.addEventListener(CHANGE_EVENT, onChange);
+    return () => {
+      for (const q of queries) q.removeEventListener("change", onSystem);
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener(CHANGE_EVENT, onChange);
+    };
+  }, [storageKey, read]);
+  useIsomorphicLayoutEffect(() => {
+    if (!apply || !loaded) return;
+    const root = document.documentElement;
+    const next = resolveDisplayAttributes(preferences, system);
+    const names = ["data-theme", "data-contrast", "data-text-scale", "data-motion", "data-density"];
+    if (names.every((name) => (next[name] ?? null) === root.getAttribute(name))) return void 0;
+    root.setAttribute("data-uix-switching", "");
+    applyDisplayAttributes(root, next);
+    const frame = requestAnimationFrame(() => requestAnimationFrame(() => root.removeAttribute("data-uix-switching")));
+    return () => {
+      cancelAnimationFrame(frame);
+      root.removeAttribute("data-uix-switching");
+    };
+  }, [apply, loaded, preferences, system]);
+  const setPreferences = useCallback((next) => {
+    setState(next);
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(next));
+    } catch {
+    }
+    window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: { storageKey, value: next } }));
+  }, [storageKey]);
+  const setPreference = useCallback((key, value) => {
+    setPreferences({ ...latest.current, [key]: value });
+  }, [setPreferences]);
+  return { preferences, resolvedTheme: resolveDisplayAttributes(preferences, system)["data-theme"], setPreference, setPreferences };
+}
+const DEFAULT_DISPLAY_PREFERENCES_LABELS = {
+  theme: "Theme",
+  light: "Light",
+  dark: "Dark",
+  system: "System",
+  contrast: "Contrast",
+  contrastStandard: "Standard",
+  contrastMore: "More",
+  textScale: "Text size",
+  textSmall: "Small",
+  textDefault: "Default",
+  textLarge: "Large",
+  textLarger: "Larger",
+  motion: "Motion",
+  motionSystem: "System",
+  motionReduce: "Reduce",
+  density: "Density",
+  densityCompact: "Compact",
+  densityStandard: "Standard",
+  densityComfortable: "Comfortable"
+};
+const useDisplayLabels = (overrides) => {
+  const uixLabels = useUixLabels();
+  return { ...DEFAULT_DISPLAY_PREFERENCES_LABELS, ...uixLabels.displayPreferences, ...overrides };
+};
+function ThemeOptions({ labels, iconsOnly }) {
+  const option = (value, icon, word) => /* @__PURE__ */ jsxs(SegmentedOption, { value, "aria-label": iconsOnly ? word : void 0, children: [
+    icon,
+    iconsOnly ? null : /* @__PURE__ */ jsx("span", { children: word })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    option("light", /* @__PURE__ */ jsx(SunIcon, { size: "sm" }), labels.light),
+    option("dark", /* @__PURE__ */ jsx(MoonIcon, { size: "sm" }), labels.dark),
+    option("system", /* @__PURE__ */ jsx(MonitorIcon, { size: "sm" }), labels.system)
+  ] });
+}
+function ThemeSwitcher({ value, onValueChange, storageKey, display = "labels", labels: labelOverrides, className, ...props }) {
+  const labels = useDisplayLabels(labelOverrides);
+  const own = useDisplayPreferences({ storageKey, apply: value === void 0 });
+  const current = value ?? own.preferences.theme;
+  return /* @__PURE__ */ jsx(
+    Segmented,
+    {
+      selection: "radio",
+      "aria-label": labels.theme,
+      className: cx("uix-theme-switcher", className),
+      value: current,
+      onChange: (next) => {
+        if (value === void 0) own.setPreference("theme", next);
+        onValueChange?.(next);
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(ThemeOptions, { labels, iconsOnly: display === "icons" })
+    }
+  );
+}
+function DisplayPreferences({ value, onValueChange, storageKey, settings = ["theme", "contrast", "textScale", "motion", "density"], labels: labelOverrides, className, ...props }) {
+  const labels = useDisplayLabels(labelOverrides);
+  const own = useDisplayPreferences({ storageKey, apply: value === void 0 });
+  const current = value ?? own.preferences;
+  const id = useId();
+  const change = (key, next) => {
+    const all = { ...current, [key]: next };
+    if (value === void 0) own.setPreference(key, next);
+    onValueChange?.(all);
+  };
+  const row = (key, title, options) => /* @__PURE__ */ jsxs("div", { className: "uix-display-prefs__row", children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-display-prefs__label", id: `${id}-${key}`, children: title }),
+    /* @__PURE__ */ jsx(Segmented, { selection: "radio", "aria-labelledby": `${id}-${key}`, value: current[key], onChange: (next) => change(key, next), children: options })
+  ] }, key);
+  const rows = {
+    theme: () => row("theme", labels.theme, /* @__PURE__ */ jsx(ThemeOptions, { labels, iconsOnly: false })),
+    contrast: () => row("contrast", labels.contrast, /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "standard", children: labels.contrastStandard }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "more", children: labels.contrastMore }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "system", children: labels.system })
+    ] })),
+    textScale: () => row("textScale", labels.textScale, /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "sm", children: labels.textSmall }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "md", children: labels.textDefault }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "lg", children: labels.textLarge }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "xl", children: labels.textLarger })
+    ] })),
+    motion: () => row("motion", labels.motion, /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "system", children: labels.motionSystem }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "reduce", children: labels.motionReduce })
+    ] })),
+    density: () => row("density", labels.density, /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "compact", children: labels.densityCompact }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "standard", children: labels.densityStandard }),
+      /* @__PURE__ */ jsx(SegmentedOption, { value: "comfortable", children: labels.densityComfortable })
+    ] }))
+  };
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-display-prefs", className), ...props, children: settings.map((key) => rows[key]()) });
+}
+export {
+  DEFAULT_DISPLAY_PREFERENCES_LABELS,
+  DisplayPreferences,
+  ThemeSwitcher,
+  useDisplayPreferences
+};

package/dist/components/EditorialHome.d.ts

@@ -34,9 +34,16 @@ interface SectionHeadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     helpLabel?: string;
     /** Right-aligned slot — a `.uix-section-link` anchor, a button, a pill. */
     action?: ReactNode;
+    /**
+     * `compact` is the in-card section preset (HAR-1815): a 15 px / 1.3 / 600 title in place of
+     * the 24 px editorial h2. Default `default`.
+     */
+    size?: 'default' | 'compact';
+    /** Heading level of the title. Default `h2`; an in-card section is often an `h3`. */
+    as?: 'h2' | 'h3';
 }
 /** Section head — title row (+ optional `help` ?) with an optional trailing action (`.uix-section-head`). */
-declare function SectionHead({ title, titleId, help, helpLabel, action, className, ...props }: SectionHeadProps): react.JSX.Element;
+declare function SectionHead({ title, titleId, help, helpLabel, action, size, as: Heading, className, ...props }: SectionHeadProps): react.JSX.Element;
 interface NoticeQueueProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Leading icon slot. */
     icon?: ReactNode;
@@ -173,9 +180,22 @@ interface EventRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     day: ReactNode;
     title: ReactNode;
     meta?: ReactNode;
+    /** Weekday above the month in the date tile, e.g. "Sri" (HAR-1370). */
+    weekday?: ReactNode;
+    /** Year under the day in the date tile, for a list that crosses a year (HAR-1370). */
+    year?: ReactNode;
+    /** Start time at the foot of the date tile, e.g. "18:00" (HAR-1370). */
+    time?: ReactNode;
+    /**
+     * The machine-readable date (and time) of the tile, e.g. `"2026-10-22T18:00+02:00"`: the tile
+     * becomes a `<time>` element, so the date is not only words.
+     */
+    dateTime?: string;
+    /** A thumbnail at the end of the row (an `<img>`), drawn 4:3 and cropped to fill (HAR-1370). */
+    media?: ReactNode;
 }
-/** Event row — date block + title/meta (`.uix-event-row`). */
-declare function EventRow({ month, day, title, meta, className, ...props }: EventRowProps): react.JSX.Element;
+/** Event row — date block + title/meta (`.uix-event-row`), with an optional thumbnail. */
+declare function EventRow({ month, day, title, meta, weekday, year, time, dateTime, media, className, ...props }: EventRowProps): react.JSX.Element;
 interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
     /** Leading indicator slot (e.g. a `.uix-dot`). */
     indicator?: ReactNode;

package/dist/components/EditorialHome.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 import { InfoTip } from "./InfoTip.js";
 import { hasHelp, helpLabelFor } from "../info-tip-model.js";
@@ -28,9 +28,9 @@ function PageIntro({
     children
   ] });
 }
-function SectionHead({ title, titleId, help, helpLabel, action, className, ...props }) {
-  const heading = /* @__PURE__ */ jsx("h2", { className: "uix-section-title", id: titleId, children: title });
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-section-head", className), ...props, children: [
+function SectionHead({ title, titleId, help, helpLabel, action, size = "default", as: Heading = "h2", className, ...props }) {
+  const heading = /* @__PURE__ */ jsx(Heading, { className: "uix-section-title", id: titleId, children: title });
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-section-head", size === "compact" && "uix-section-head--compact", className), ...props, children: [
     hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-section-head__title-row", children: [
       heading,
       /* @__PURE__ */ jsx(InfoTip, { content: help, label: helpLabel ?? helpLabelFor(title) })
@@ -153,16 +153,21 @@ function StatLine({ items, children, className, ...props }) {
     children
   ] });
 }
-function EventRow({ month, day, title, meta, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-event-row", className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-event-date", children: [
-      /* @__PURE__ */ jsx("span", { className: "uix-event-date__month", children: month }),
-      /* @__PURE__ */ jsx("span", { className: "uix-event-date__day", children: day })
-    ] }),
+function EventRow({ month, day, title, meta, weekday, year, time, dateTime, media, className, ...props }) {
+  const tile = /* @__PURE__ */ jsxs(Fragment, { children: [
+    weekday != null && /* @__PURE__ */ jsx("span", { className: "uix-event-date__weekday", children: weekday }),
+    /* @__PURE__ */ jsx("span", { className: "uix-event-date__month", children: month }),
+    /* @__PURE__ */ jsx("span", { className: "uix-event-date__day", children: day }),
+    year != null && /* @__PURE__ */ jsx("span", { className: "uix-event-date__year", children: year }),
+    time != null && /* @__PURE__ */ jsx("span", { className: "uix-event-date__time", children: time })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-event-row", media != null && "uix-event-row--media", className), ...props, children: [
+    dateTime ? /* @__PURE__ */ jsx("time", { className: "uix-event-date", dateTime, children: tile }) : /* @__PURE__ */ jsx("div", { className: "uix-event-date", children: tile }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("p", { className: "uix-event-row__title", children: title }),
       meta != null && /* @__PURE__ */ jsx("p", { className: "uix-event-row__meta", children: meta })
-    ] })
+    ] }),
+    media != null && /* @__PURE__ */ jsx("div", { className: "uix-event-row__media", children: media })
   ] });
 }
 function StatusRow({ indicator, name, meta, className, ...props }) {

package/dist/components/EntityPicker.d.ts

@@ -24,12 +24,23 @@ interface EntityPickerLabels {
     more: string;
     /** Polite count when there are more matches than shown. `{count}` is the number shown. */
     resultsMore: string;
+    /**
+     * Shown, with no Retry, when the search failed for good (HAR-1834): `onSearch` rejected with
+     * `{ retryable: false }` (and no `message`), or `isRetryable` said no. E.g. no permission.
+     */
+    forbidden: string;
     /** Shown in the open list while the query is shorter than `minQueryLength`. `{count}`. */
     tooShort: string;
     /** The same when `minQueryLength` is 1. */
     typeToSearch: string;
 }
 declare const DEFAULT_ENTITY_PICKER_LABELS: EntityPickerLabels;
+/** What `onSearch` may reject with when trying again cannot help (HAR-1834). */
+interface EntityPickerSearchError {
+    retryable: false;
+    /** Shown instead of the `forbidden` words. */
+    message?: string;
+}
 /** What `onSearch` may resolve to when it knows its list was cut off. */
 interface EntityPickerSearchResult {
     options: readonly SearchSuggestOption[];
@@ -43,9 +54,15 @@ interface EntityPickerProps {
     /**
      * Finds records for the query; a rejection shows the error state with a Retry row. Resolve
      * with the options, or with `{ options, hasMore: true }` when the list was cut off (a page of
-     * 20 out of many): the list then says that more match.
+     * 20 out of many): the list then says that more match. Reject with
+     * `{ retryable: false, message? }` (an {@link EntityPickerSearchError}) when trying again
+     * cannot help, e.g. no permission: the error shows without Retry.
      */
     onSearch: (query: string) => Promise<readonly SearchSuggestOption[] | EntityPickerSearchResult>;
+    /** Decide from the rejection whether Retry is offered. Default: not for `{ retryable: false }`. */
+    isRetryable?: (error: unknown) => boolean;
+    /** Ids of the visible label that names the search field (instead of `label`). */
+    'aria-labelledby'?: string;
     /** The field's name (the visible label usually comes from a surrounding `Field`). */
     label: string;
     /** Id of the control, for `Field htmlFor`/`label for`. */
@@ -76,6 +93,6 @@ interface EntityPickerProps {
  * clear ×; choosing again or typing opens a `SearchSuggest` list with loading, empty and error
  * states, and Retry is a list row, so the keyboard reaches it. Stale results are ignored.
  */
-declare function EntityPicker({ value, onValueChange, onSearch, label, id, name, placeholder, minQueryLength, delay, disabled, invalid, 'aria-describedby': describedBy, renderValue, labels: labelOverrides, className, }: EntityPickerProps): react.JSX.Element;
+declare function EntityPicker({ value, onValueChange, onSearch, isRetryable, label, id, name, placeholder, minQueryLength, delay, disabled, invalid, 'aria-describedby': describedBy, 'aria-labelledby': labelledBy, renderValue, labels: labelOverrides, className, }: EntityPickerProps): react.JSX.Element;
 
-export { DEFAULT_ENTITY_PICKER_LABELS, EntityPicker, type EntityPickerLabels, type EntityPickerProps, type EntityPickerSearchResult };
+export { DEFAULT_ENTITY_PICKER_LABELS, EntityPicker, type EntityPickerLabels, type EntityPickerProps, type EntityPickerSearchError, type EntityPickerSearchResult };

package/dist/components/EntityPicker.js

@@ -18,12 +18,14 @@ const DEFAULT_ENTITY_PICKER_LABELS = {
   more: "More matches. Keep typing to narrow the search.",
   resultsMore: "{count} results shown, more match. Keep typing to narrow the search.",
   tooShort: "Type at least {count} characters.",
-  typeToSearch: "Type to search."
+  typeToSearch: "Type to search.",
+  forbidden: "You do not have access to search these records."
 };
 function EntityPicker({
   value,
   onValueChange,
   onSearch,
+  isRetryable,
   label,
   id,
   name,
@@ -33,6 +35,7 @@ function EntityPicker({
   disabled,
   invalid,
   "aria-describedby": describedBy,
+  "aria-labelledby": labelledBy,
   renderValue,
   labels: labelOverrides,
   className
@@ -43,6 +46,7 @@ function EntityPicker({
   const [results, setResults] = useState([]);
   const [hasMore, setHasMore] = useState(false);
   const [status, setStatus] = useState("idle");
+  const [fatal, setFatal] = useState(null);
   const [attempt, setAttempt] = useState(0);
   const latest = useRef(0);
   const inputRef = useRef(null);
@@ -53,7 +57,11 @@ function EntityPicker({
     else setEditing(true);
   }, [value?.id]);
   useEffect(() => {
-    if (!editing || disabled) return;
+    const run = ++latest.current;
+    if (!editing || disabled) {
+      setStatus((s) => s === "loading" ? "idle" : s);
+      return;
+    }
     const q = query.trim();
     if (q.length < minQueryLength) {
       setStatus("idle");
@@ -61,23 +69,26 @@ function EntityPicker({
       setHasMore(false);
       return;
     }
-    const run = ++latest.current;
+    setStatus("loading");
     const timer = window.setTimeout(() => {
-      setStatus("loading");
       onSearch(q).then(
         (found) => {
           if (run !== latest.current) return;
           const list = "options" in found ? found.options : found;
           setResults(list);
           setHasMore("options" in found && !!found.hasMore && list.length > 0);
+          setFatal(null);
           setStatus("done");
         },
-        () => {
-          if (run === latest.current) {
-            setResults([]);
-            setHasMore(false);
-            setStatus("error");
-          }
+        (error) => {
+          if (run !== latest.current) return;
+          const declared = typeof error === "object" && error !== null && error.retryable === false;
+          const retryable = isRetryable ? isRetryable(error) : !declared;
+          const message = declared ? error.message : void 0;
+          setFatal(retryable ? null : typeof message === "string" && message ? message : labels.forbidden);
+          setResults([]);
+          setHasMore(false);
+          setStatus("error");
         }
       );
     }, delay);
@@ -100,6 +111,11 @@ function EntityPicker({
   };
   const clear = () => {
     onValueChange(null);
+    setQuery("");
+    setResults([]);
+    setHasMore(false);
+    setStatus("idle");
+    setFatal(null);
     returnFocus.current = true;
     setEditing(true);
   };
@@ -154,17 +170,20 @@ function EntityPicker({
             inputRef,
             value: query,
             onValueChange: setQuery,
-            options: status === "done" ? results : [],
+            options: status === "done" || status === "loading" ? results : [],
             onSelect: (_, option) => choose(option),
             label: `${label}. ${labels.search}`,
+            inputLabelledBy: labelledBy,
+            disabled,
+            invalid,
             placeholder: placeholder ?? labels.none,
             loading: status === "loading",
             loadingLabel: labels.loading,
             empty: tooShort ? void 0 : labels.empty,
             idle: tooShort ? fillLabel(minQueryLength === 1 ? labels.typeToSearch : labels.tooShort, { count: minQueryLength }) : void 0,
             note: status === "done" && hasMore ? labels.more : void 0,
-            error: status === "error" ? labels.error : void 0,
-            footer: status === "error" ? { label: labels.retry, onSelect: () => setAttempt((n) => n + 1) } : void 0,
+            error: status === "error" ? fatal ?? labels.error : void 0,
+            footer: status === "error" && fatal == null ? { label: labels.retry, onSelect: () => setAttempt((n) => n + 1) } : void 0,
             status: status === "done" ? fillLabel(hasMore ? labels.resultsMore : labels.results, { count: results.length }) : void 0,
             strategy: "fixed"
           }