@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/AppShell.d.ts

@@ -3,8 +3,47 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 type ShellNav = 'full' | 'rail' | 'hidden';
 interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
-    /** Sidebar width tier: 'full' (default) → 'rail' (icon only) → 'hidden' (0). */
+    /**
+     * `frame` (default) is the bordered, rounded box the docs show a shell in. `viewport` is an
+     * application's shell (HAR-1815): no frame, the full dynamic viewport height (`100dvh`), no fixed
+     * top-bar row (the sidebar and main both run the full height; a `topbar`, if given, sits at the
+     * top of the main column), main padding that widens on wide screens, and the phone nav tier by
+     * default (`phoneNav`), so below 40rem it is one column with the sidebar in a drawer.
+     */
+    layout?: 'frame' | 'viewport';
+    /**
+     * Sidebar width tier: 'full' (default) → 'rail' (icon only) → 'hidden' (0). Controlled when
+     * set; leave it out to let the shell keep the tier (`defaultNav`, `navHotkey`,
+     * `navTierStorageKey`).
+     */
     nav?: ShellNav;
+    /** The starting tier when `nav` is not controlled. Default `full`. */
+    defaultNav?: ShellNav;
+    /**
+     * Called with the tier the hotkey asks for, and once on mount with a remembered tier that
+     * differs from `defaultNav` (HAR-1371), so a `Sidebar nav` you render can follow. With `nav`
+     * controlled, set it from here.
+     */
+    onNavChange?: (nav: ShellNav) => void;
+    /**
+     * A key that switches the sidebar between `full` and `rail` (HAR-1371; MOTUS StaffShell), e.g.
+     * `"["`. It is ignored while typing in a field or with Ctrl/⌘/Alt held, and from `hidden` it
+     * goes to `full`. The switch is instant.
+     */
+    navHotkey?: string;
+    /**
+     * Remember the tier in `localStorage` under this key (HAR-1371), so a reload keeps the rail.
+     * Applied before the first paint on the client; the server renders `defaultNav`.
+     */
+    navTierStorageKey?: string;
+    /**
+     * The phone nav tier (HAR-1371): at 40rem and under, the sidebar column is hidden and a menu
+     * button (at the start of the topbar, or at the top of main) opens the sidebar in a start-side
+     * `Drawer`, shown full whatever the tier. Following a link in it closes the drawer. Default
+     * `drawer` with `layout="viewport"`, `none` with the frame; `none` keeps the sidebar column at
+     * every width.
+     */
+    phoneNav?: 'drawer' | 'none';
     /** Back-compat alias for nav="rail". Ignored when `nav` is set. */
     collapsed?: boolean;
     /**
@@ -26,7 +65,11 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     skipToContentLabel?: ReactNode;
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     exitFocusLabel?: ReactNode;
+    /** The phone menu button's name. Default: `UixLabelsProvider` `appShell.openNav`, then "Open navigation". */
+    openNavLabel?: string;
+    /** The navigation drawer's title. Default: `appShell.navigation`, then "Navigation". */
+    navigationLabel?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, skipToContentLabel: skipToContentLabelProp, exitFocusLabel: exitFocusLabelProp, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ layout, nav, defaultNav, onNavChange, navHotkey, navTierStorageKey, phoneNav: phoneNavProp, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, skipToContentLabel: skipToContentLabelProp, exitFocusLabel: exitFocusLabelProp, openNavLabel: openNavLabelProp, navigationLabel: navigationLabelProp, className, ...props }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -1,10 +1,44 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { MenuIcon } from "../icons/components.js";
+import { Drawer } from "./Drawer.js";
+import { ShellDrawerContext } from "../shell-context.js";
+const NAV_TIERS = ["full", "rail", "hidden"];
+const PHONE = "(max-width: 40rem)";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const readTier = (key) => {
+  try {
+    const stored = window.localStorage.getItem(key);
+    return NAV_TIERS.includes(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const isNavHotkey = (event, key) => {
+  if (event.key !== key || event.defaultPrevented || event.repeat || event.isComposing) return false;
+  if (event.metaKey || event.ctrlKey && !event.altKey) return false;
+  const target = (typeof event.composedPath === "function" ? event.composedPath()[0] : null) ?? event.target;
+  if (target?.isContentEditable || target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"], [role="textbox"], [role="combobox"]')) return false;
+  const modalOpen = Array.from(document.querySelectorAll("dialog[open]")).some((dialog) => {
+    try {
+      return dialog.matches(":modal");
+    } catch {
+      return true;
+    }
+  });
+  return !modalOpen;
+};
 function AppShell({
+  layout = "frame",
   nav,
+  defaultNav = "full",
+  onNavChange,
+  navHotkey,
+  navTierStorageKey,
+  phoneNav: phoneNavProp,
   collapsed,
   focus,
   onExitFocus,
@@ -15,13 +49,48 @@ function AppShell({
   children,
   skipToContentLabel: skipToContentLabelProp,
   exitFocusLabel: exitFocusLabelProp,
+  openNavLabel: openNavLabelProp,
+  navigationLabel: navigationLabelProp,
   className,
   ...props
 }) {
   const uixLabels = useUixLabels();
+  const phoneNav = (phoneNavProp ?? (layout === "viewport" ? "drawer" : "none")) === "drawer";
   const skipToContentLabel = skipToContentLabelProp ?? uixLabels.appShell?.skipToContent ?? "Skip to content";
   const exitFocusLabel = exitFocusLabelProp ?? uixLabels.appShell?.exitFocus ?? "Esc \xB7 Exit focus";
-  const navState = nav ?? (collapsed ? "rail" : "full");
+  const openNavLabel = openNavLabelProp ?? uixLabels.appShell?.openNav ?? "Open navigation";
+  const navigationLabel = navigationLabelProp ?? uixLabels.appShell?.navigation ?? "Navigation";
+  const [ownNav, setOwnNav] = useState(defaultNav);
+  const controlled = nav != null || collapsed != null;
+  const navState = nav ?? (collapsed != null ? collapsed ? "rail" : "full" : ownNav);
+  useIsomorphicLayoutEffect(() => {
+    if (!navTierStorageKey) return;
+    const stored = readTier(navTierStorageKey);
+    if (stored && stored !== (controlled ? navState : defaultNav)) {
+      if (!controlled) setOwnNav(stored);
+      onNavChange?.(stored);
+    }
+  }, [navTierStorageKey]);
+  const changeNav = useCallback((next) => {
+    if (!controlled) setOwnNav(next);
+    if (navTierStorageKey) {
+      try {
+        window.localStorage.setItem(navTierStorageKey, next);
+      } catch {
+      }
+    }
+    onNavChange?.(next);
+  }, [controlled, navTierStorageKey, onNavChange]);
+  useEffect(() => {
+    if (!navHotkey) return;
+    const onKey = (event) => {
+      if (!isNavHotkey(event, navHotkey)) return;
+      event.preventDefault();
+      changeNav(navState === "full" ? "rail" : "full");
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [navHotkey, navState, changeNav]);
   useEffect(() => {
     if (!focus || !onExitFocus) return;
     const onKey = (e) => {
@@ -30,19 +99,61 @@ function AppShell({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [focus, onExitFocus]);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  useEffect(() => {
+    if (!phoneNav || !drawerOpen || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(PHONE);
+    const onChange = () => {
+      if (!query.matches) setDrawerOpen(false);
+    };
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [phoneNav, drawerOpen]);
+  const phoneButton = phoneNav && sidebar ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-shell__nav-button uix-btn uix-btn--ghost uix-btn--icon", "aria-label": openNavLabel, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen(true), children: /* @__PURE__ */ jsx(MenuIcon, {}) }) : null;
+  const closeOnLink = (event) => {
+    if (event.target.closest("a[href]")) setDrawerOpen(false);
+  };
+  const [drawerMounted, setDrawerMounted] = useState(false);
+  const drawerBodyRef = useRef(null);
+  useEffect(() => {
+    if (drawerOpen) {
+      setDrawerMounted(true);
+      return void 0;
+    }
+    const dialog = drawerBodyRef.current?.closest("dialog");
+    if (!dialog) {
+      setDrawerMounted(false);
+      return void 0;
+    }
+    const style = getComputedStyle(dialog);
+    const ms = (list) => list.split(",").map((v) => (v.trim().endsWith("ms") ? parseFloat(v) : parseFloat(v) * 1e3) || 0);
+    const durations = ms(style.transitionDuration);
+    const delays = ms(style.transitionDelay);
+    const exit = Math.max(0, ...durations.map((d, i) => d + (delays[i] ?? 0)));
+    const timer = window.setTimeout(() => setDrawerMounted(false), exit);
+    return () => window.clearTimeout(timer);
+  }, [drawerOpen]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx("uix-shell", className),
+      className: cx("uix-shell", layout === "viewport" && "uix-shell--viewport", className),
       "data-nav": navState !== "full" ? navState : void 0,
       "data-collapsed": collapsed && nav == null ? "" : void 0,
       "data-focus": focus || void 0,
+      "data-phone-nav": phoneNav ? "drawer" : void 0,
       ...props,
       children: [
         /* @__PURE__ */ jsx("a", { className: "uix-skiplink", href: `#${mainId}`, children: skipToContentLabel }),
         sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
-        topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
-        /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        topbar && /* @__PURE__ */ jsxs("div", { className: "uix-shell__topbar", children: [
+          phoneButton,
+          topbar
+        ] }),
+        /* @__PURE__ */ jsxs("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children: [
+          !topbar && phoneButton && /* @__PURE__ */ jsx("div", { className: "uix-shell__phone-bar", children: phoneButton }),
+          children
+        ] }),
+        phoneButton && /* @__PURE__ */ jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), side: "start", title: navigationLabel, className: "uix-shell__nav-drawer", children: (drawerOpen || drawerMounted) && /* @__PURE__ */ jsx(ShellDrawerContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { ref: drawerBodyRef, className: "uix-shell__nav-drawer-body", onClick: closeOnLink, children: sidebar }) }) }),
         focus && onExitFocus && /* @__PURE__ */ jsx("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: exitFocusLabel }) })
       ]
     }

package/dist/components/AuditLog.d.ts

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { FilterChoice, FilterValue } from '../filter-model.js';
+import { StatusPillProps } from './StatusPill.js';
+
+/** One entry of an access or change history. The consumer supplies it free of personal health data. */
+interface AuditLogEvent {
+    id: string;
+    /** Who did it: a name, or a node (an avatar and a name). */
+    actor: ReactNode;
+    /** What they did: a key of `actions`. */
+    action: string;
+    /** What it was done to: "Patient record 1042", "Invoice R-2026-118". */
+    target?: ReactNode;
+    /**
+     * When: a `Date`, epoch ms or an ISO string. An ISO date-time without an offset
+     * (`2026-10-22T09:30:00`) is read as UTC, as audit stores keep it, not as the viewer's local time.
+     */
+    at: Date | number | string;
+    /** More about it, behind a Details disclosure: fields changed, the reason given, the IP. */
+    detail?: ReactNode;
+}
+/** How an action reads and looks; the consumer labels its own action enum. */
+interface AuditLogAction {
+    label: string;
+    tone?: StatusPillProps['tone'];
+}
+/** The filters the person chose: `when` (a date range), `actor` and `action` (sets of ids). */
+interface AuditLogFilters {
+    when?: Extract<FilterValue, {
+        kind: 'date-range';
+    }>;
+    actor?: Extract<FilterValue, {
+        kind: 'enum';
+    }>;
+    action?: Extract<FilterValue, {
+        kind: 'enum';
+    }>;
+}
+interface AuditLogLabels {
+    /** Names the list. */
+    list: string;
+    /** Names the filter group. */
+    filters: string;
+    when: string;
+    actor: string;
+    action: string;
+    clearFilters: string;
+    details: string;
+    loadMore: string;
+    /** Polite status while more entries load. */
+    loadingMore: string;
+    /** Polite status after more entries arrived. `{count}`. */
+    loaded: string;
+    /** Shown (as an alert) when `loadMoreError` is set; the Show older entries button retries. */
+    loadMoreFailed: string;
+    loading: string;
+    empty: string;
+    emptyDetail: string;
+    filteredEmpty: string;
+    filteredEmptyDetail: string;
+    error: string;
+    retry: string;
+    forbidden: string;
+    forbiddenDetail: string;
+}
+declare const DEFAULT_AUDIT_LOG_LABELS: AuditLogLabels;
+interface AuditLogProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    events: readonly AuditLogEvent[];
+    /** Every action the log can show, by key: its label and the tone of its pill. */
+    actions: Readonly<Record<string, AuditLogAction>>;
+    /**
+     * `ready` (default), `loading` (the first load: skeleton rows), `error`, or `forbidden`.
+     * A reload with rows on show is `refreshing`, not `loading`.
+     */
+    status?: 'ready' | 'loading' | 'error' | 'forbidden';
+    /**
+     * A reload is running (the filters changed): the rows on show stay in a `BusyRegion`, busy at
+     * once, dimmed under a running bar after 300 ms. Skeleton rows are for `status="loading"` only.
+     */
+    refreshing?: boolean;
+    onRetry?: () => void;
+    /** The actors offered in the Who filter. Without them there is no Who filter. */
+    actors?: readonly FilterChoice[];
+    /**
+     * Names for actor ids in `filters.actor` that are not among `actors` (restored from a URL or a
+     * saved view): the Who chip shows the names, not the ids.
+     */
+    resolveActorLabels?: (ids: readonly string[]) => Promise<readonly FilterChoice[]>;
+    /** The filters in effect (controlled). With `onFiltersChange`, the filter bar shows. */
+    filters?: AuditLogFilters;
+    onFiltersChange?: (filters: AuditLogFilters) => void;
+    /** More, older entries exist: a Show older entries button calls `onLoadMore` (keyset paging). */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
+    /** Loading older entries failed: the button stays to try again, with `labels.loadMoreFailed` beside it. */
+    loadMoreError?: boolean;
+    /** Locale of times and dates; a list falls back in order. */
+    locale?: string | readonly string[];
+    /**
+     * The exact time shown beside the relative one. Default: `Intl` medium date and short time in
+     * `locale`. Pass it where the browser lacks the locale's data (Chromium has none for `bs` and
+     * prints "2026 M10 22"), or for a fixed product format.
+     */
+    formatExact?: (date: Date) => string;
+    /**
+     * Time zone of the times shown, e.g. the practice's `Europe/Sarajevo`. Default: the viewer's.
+     * A zone the browser does not know falls back to the viewer's (with a warning in development).
+     */
+    timeZone?: string;
+    /** Formats `YYYY-MM-DD` in a filter chip. Default: as given. */
+    formatDate?: (date: string) => string;
+    /** The current time, for stable relative times in tests and server renders. */
+    now?: Date | number;
+    labels?: Partial<AuditLogLabels>;
+}
+/**
+ * Who opened or changed what, and when (HAR-987; MEDx S50 "Historija pristupa", POSx PRT-01 /
+ * INT-01): an ordered list of entries (actor, a labelled action, the target, a relative time
+ * with the exact one beside it, and an optional Details disclosure), filters by period, person
+ * and action (chips that open `FilterEditor`s), keyset "Show older entries", and the first-load,
+ * empty, filtered-empty, error and forbidden states. Presentational: the consumer fetches, keeps
+ * the audit semantics, and supplies entries free of health data.
+ */
+declare function AuditLog({ events, actions, status, refreshing, onRetry, actors, resolveActorLabels, filters, onFiltersChange, hasMore, onLoadMore, loadingMore, loadMoreError, locale, formatExact, timeZone: zoneProp, formatDate, now, labels: labelOverrides, className, ...props }: AuditLogProps): react.JSX.Element;
+
+export { AuditLog, type AuditLogAction, type AuditLogEvent, type AuditLogFilters, type AuditLogLabels, type AuditLogProps, DEFAULT_AUDIT_LOG_LABELS };

package/dist/components/AuditLog.js

@@ -0,0 +1,196 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { useResolvedFilterLabels } from "../hooks/useResolvedFilterLabels.js";
+import { ChevronDownIcon } from "../icons/components.js";
+import { isFilterEmpty, summarizeFilter } from "../filter-model.js";
+import { BusyRegion } from "./BusyRegion.js";
+import { Button } from "./Button.js";
+import { Chip } from "./Chip.js";
+import { FilterEditor } from "./FilterEditor.js";
+import { Popover } from "./Popover.js";
+import { RelativeTime } from "./RelativeTime.js";
+import { StatusPill } from "./StatusPill.js";
+import { EmptyState, ErrorState, FilteredEmptyState, ForbiddenState, LoadingState } from "./States.js";
+const DEFAULT_AUDIT_LOG_LABELS = {
+  list: "Access history",
+  filters: "Filter the history",
+  when: "When",
+  actor: "Who",
+  action: "What",
+  clearFilters: "Clear filters",
+  details: "Details",
+  loadMore: "Show older entries",
+  loadingMore: "Loading older entries\u2026",
+  loaded: "{count} older entries shown",
+  loadMoreFailed: "The older entries could not be loaded.",
+  loading: "Loading the history",
+  empty: "No access recorded yet",
+  emptyDetail: "Every time someone opens or changes this record, it shows here.",
+  filteredEmpty: "Nothing matches these filters",
+  filteredEmptyDetail: "Clear a filter or choose a longer period.",
+  error: "The history could not be loaded",
+  retry: "Try again",
+  forbidden: "You cannot see this history",
+  forbiddenDetail: "Ask an administrator of this practice for access."
+};
+const FIELD_IDS = ["when", "actor", "action"];
+function AuditLog({
+  events,
+  actions,
+  status = "ready",
+  refreshing = false,
+  onRetry,
+  actors,
+  resolveActorLabels,
+  filters = {},
+  onFiltersChange,
+  hasMore = false,
+  onLoadMore,
+  loadingMore = false,
+  loadMoreError = false,
+  locale,
+  formatExact,
+  timeZone: zoneProp,
+  formatDate,
+  now,
+  labels: labelOverrides,
+  className,
+  ...props
+}) {
+  const labels = { ...DEFAULT_AUDIT_LOG_LABELS, ...useUixLabels().auditLog, ...labelOverrides };
+  const id = useId();
+  const [announced, setAnnounced] = useState("");
+  const countBefore = useRef(null);
+  useEffect(() => {
+    const before = countBefore.current;
+    if (before == null || loadingMore) return;
+    if (loadMoreError) {
+      countBefore.current = null;
+      setAnnounced("");
+      return;
+    }
+    if (events.length === before) return;
+    countBefore.current = null;
+    if (events.length > before) setAnnounced(fillLabel(labels.loaded, { count: events.length - before }));
+  }, [events.length, loadingMore, loadMoreError, labels.loaded]);
+  const timeZone = knownTimeZone(zoneProp);
+  const intlExact = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone });
+  const exact = formatExact ?? ((date) => intlExact.format(date));
+  const fields = {
+    when: { id: "when", label: labels.when, kind: "date-range" },
+    actor: actors?.length ? { id: "actor", label: labels.actor, kind: "enum", options: actors, resolveLabels: resolveActorLabels } : null,
+    action: { id: "action", label: labels.action, kind: "enum", options: Object.entries(actions).map(([value, a]) => ({ value, label: a.label })) }
+  };
+  const active = FIELD_IDS.filter((f) => !isFilterEmpty(filters[f]));
+  const setFilter = (field, value) => {
+    const next = { ...filters };
+    if (value === void 0 || isFilterEmpty(value)) delete next[field];
+    else next[field] = value;
+    onFiltersChange?.(next);
+  };
+  const filterBar = onFiltersChange && /* @__PURE__ */ jsxs("div", { className: "uix-audit-log__filters", role: "group", "aria-label": labels.filters, children: [
+    FIELD_IDS.map((f) => fields[f] && /* @__PURE__ */ jsx(AuditFilter, { id: `${id}-${f}`, field: fields[f], value: filters[f], formatDate, onApply: (v) => setFilter(f, v) }, f)),
+    active.length > 0 && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", onClick: () => onFiltersChange({}), children: labels.clearFilters })
+  ] });
+  let body;
+  if (status === "loading") body = /* @__PURE__ */ jsx(LoadingState, { rows: 5, label: labels.loading });
+  else if (status === "forbidden") body = /* @__PURE__ */ jsx(ForbiddenState, { title: labels.forbidden, detail: labels.forbiddenDetail });
+  else if (status === "error") body = /* @__PURE__ */ jsx(ErrorState, { title: labels.error, action: onRetry && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onRetry, children: labels.retry }) });
+  else if (events.length === 0 && active.length > 0) body = /* @__PURE__ */ jsx(FilteredEmptyState, { title: labels.filteredEmpty, action: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => onFiltersChange?.({}), children: labels.clearFilters }), children: labels.filteredEmptyDetail });
+  else if (events.length === 0) body = /* @__PURE__ */ jsx(EmptyState, { title: labels.empty, children: labels.emptyDetail });
+  else body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BusyRegion, { busy: refreshing, className: "uix-audit-log__region", children: /* @__PURE__ */ jsx("ol", { className: "uix-audit uix-audit-log__list", children: events.map((event) => {
+      const action = actions[event.action];
+      const date = toDate(event.at);
+      return /* @__PURE__ */ jsxs("li", { className: "uix-audit__row uix-audit-log__row", children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-audit__actor", children: event.actor }),
+        /* @__PURE__ */ jsxs("span", { className: "uix-audit__detail uix-audit-log__what", children: [
+          /* @__PURE__ */ jsx(StatusPill, { tone: action?.tone ?? "neutral", children: action?.label ?? event.action }),
+          event.target != null && /* @__PURE__ */ jsx("span", { className: "uix-audit-log__target", children: event.target })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "uix-audit__time uix-audit-log__when", children: [
+          /* @__PURE__ */ jsx(RelativeTime, { value: date, now, locale, timeZone }),
+          !Number.isNaN(date.getTime()) && /* @__PURE__ */ jsx("span", { className: "uix-audit-log__exact", children: exact(date) })
+        ] }),
+        event.detail != null && /* @__PURE__ */ jsxs("details", { className: "uix-audit-log__more", children: [
+          /* @__PURE__ */ jsxs("summary", { className: "uix-audit-log__more-summary", children: [
+            /* @__PURE__ */ jsx("span", { children: labels.details }),
+            /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "sm" }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "uix-audit-log__detail", children: event.detail })
+        ] })
+      ] }, event.id);
+    }) }) }),
+    hasMore && onLoadMore && /* @__PURE__ */ jsxs("div", { className: "uix-audit-log__more-row", children: [
+      loadMoreError && !loadingMore && /* @__PURE__ */ jsx("span", { className: "uix-audit-log__more-failed", role: "alert", children: labels.loadMoreFailed }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", loading: loadingMore, onClick: () => {
+        if (loadingMore) return;
+        countBefore.current = events.length;
+        setAnnounced(labels.loadingMore);
+        onLoadMore();
+      }, children: loadMoreError && !loadingMore ? labels.retry : labels.loadMore })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-audit-log", className), "aria-label": labels.list, ...props, children: [
+    filterBar,
+    body,
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", children: announced })
+  ] });
+}
+const LOCAL_ISO = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2}(\.\d+)?)?$/;
+const toDate = (at) => new Date(typeof at === "string" && LOCAL_ISO.test(at) ? `${at}Z` : at);
+const warnedZones = /* @__PURE__ */ new Set();
+function knownTimeZone(zone) {
+  if (!zone) return void 0;
+  try {
+    new Intl.DateTimeFormat(void 0, { timeZone: zone });
+    return zone;
+  } catch {
+    if (!warnedZones.has(zone) && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+      warnedZones.add(zone);
+      console.warn(`uix AuditLog: timeZone "${zone}" is not known to this browser; showing the viewer's time zone.`);
+    }
+    return void 0;
+  }
+}
+function AuditFilter({ id, field, value, formatDate, onApply }) {
+  const anchor = useRef(null);
+  const [draft, setDraft] = useState(value);
+  const set = !isFilterEmpty(value);
+  const popover = () => document.getElementById(`${id}-pop`);
+  const resolved = useResolvedFilterLabels(field, value);
+  return /* @__PURE__ */ jsxs("span", { ref: anchor, className: "uix-audit-log__filter", children: [
+    set ? /* @__PURE__ */ jsx(Chip, { "aria-haspopup": "dialog", onClick: () => {
+      setDraft(value);
+      popover()?.togglePopover();
+    }, onRemove: () => onApply(void 0), children: summarizeFilter(resolved.field, resolved.value, { formatDate }) }) : /* @__PURE__ */ jsx(Chip, { variant: "add", "aria-haspopup": "dialog", onClick: () => {
+      setDraft(value);
+      popover()?.togglePopover();
+    }, children: field.label }),
+    /* @__PURE__ */ jsx(Popover, { id: `${id}-pop`, anchor, role: "dialog", "aria-label": field.label, children: /* @__PURE__ */ jsx(
+      FilterEditor,
+      {
+        field,
+        value: draft,
+        onValueChange: setDraft,
+        onApply: (v) => {
+          onApply(v);
+          popover()?.hidePopover();
+        },
+        onClear: () => {
+          setDraft(void 0);
+          onApply(void 0);
+          popover()?.hidePopover();
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  AuditLog,
+  DEFAULT_AUDIT_LOG_LABELS
+};

package/dist/components/BrandProfiles.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { cx } from "../cx.js";
 import { normalizeHex } from "../color-model.js";
 import { ColorPicker } from "./ColorPicker.js";
+import { Select } from "./Select.js";
 import { fillLabel } from "../fill-label.js";
 const PROFILE_PROPERTIES = {
   brand: "--uix-brand",
@@ -117,10 +118,10 @@ function BrandProfileEditor({
     /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__form", children: [
       profiles.length > 0 && /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
         labels.profile,
-        /* @__PURE__ */ jsx("select", { className: "uix-select", value: value.id, onChange: (event) => {
-          const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
+        /* @__PURE__ */ jsx(Select, { value: value.id, options: profiles.map((profile) => ({ value: profile.id, label: profile.name })), onValueChange: (next) => {
+          const selected = profiles.find((profile) => profile.id === next);
           if (selected) onSelectProfile?.(selected);
-        }, children: profiles.map((profile) => /* @__PURE__ */ jsx("option", { value: profile.id, children: profile.name }, profile.id)) })
+        } })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
         labels.name,

package/dist/components/Breadcrumbs.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode, HTMLAttributes } from 'react';
+import { UixRenderLink } from '../link.js';
 
 interface BreadcrumbItem {
     id?: string;
@@ -11,8 +12,14 @@ interface BreadcrumbsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'>
     items: readonly BreadcrumbItem[];
     label: string;
     separator?: ReactNode;
+    /**
+     * Renders each item's link with your router (HAR-1385): `renderLink={(p) => <NextLink {...p} />}`
+     * keeps client navigation and prefetch, and a locale-aware link adds the locale prefix. The
+     * same `UixRenderLink` adapter as `ButtonLink`, `Stat`, `Pagination` and `Steps`. Default: `<a>`.
+     */
+    renderLink?: UixRenderLink;
 }
-/** Framework-neutral breadcrumb navigation. Route adapters can replace anchors at the application seam. */
-declare function Breadcrumbs({ items, label, separator, className, ...props }: BreadcrumbsProps): react.JSX.Element;
+/** Framework-neutral breadcrumb navigation; `renderLink` renders the links with the app's router. */
+declare function Breadcrumbs({ items, label, separator, renderLink, className, ...props }: BreadcrumbsProps): react.JSX.Element;
 
 export { type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps };

package/dist/components/Breadcrumbs.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-function Breadcrumbs({ items, label, separator = "/", className, ...props }) {
+import { renderUixLink } from "../link.js";
+function Breadcrumbs({ items, label, separator = "/", renderLink, className, ...props }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, className, ...props, children: /* @__PURE__ */ jsx("ol", { className: "uix-breadcrumbs", children: items.map((item, index) => {
     const current = item.current ?? index === items.length - 1;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       index > 0 && /* @__PURE__ */ jsx("li", { className: "uix-breadcrumbs__sep", "aria-hidden": "true", children: separator }),
-      /* @__PURE__ */ jsx("li", { children: item.href && !current ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : /* @__PURE__ */ jsx("span", { "aria-current": current ? "page" : void 0, children: item.label }) })
+      /* @__PURE__ */ jsx("li", { children: item.href && !current ? renderUixLink(renderLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx("span", { "aria-current": current ? "page" : void 0, children: item.label }) })
     ] }, item.id ?? `${item.href ?? "current"}-${index}`);
   }) }) });
 }

package/dist/components/Button.d.ts

@@ -41,10 +41,11 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * The button's keyboard shortcut, in `KbdCombo` key names: `['A']`, `['Mod', 'Enter']`
      * (HAR-2031). Hover or focus shows the keys in a hint above the button (an icon button's
-     * `aria-label` before them), and the button gets `aria-keyshortcuts` for the viewer's platform
-     * (⌘ / Meta on Apple, Ctrl / Control elsewhere), unless you pass `aria-keyshortcuts` yourself.
-     * Inside a `Tooltip` the Tooltip shows the keys in its own bubble. The kit only shows the
-     * shortcut: the product binds the key.
+     * `aria-label` before them; ⌘ on Apple, Ctrl elsewhere). Screen readers hear the keys once, as
+     * the button's description after any `aria-describedby` of yours ("Control+Enter"), the same
+     * rule as a `Tooltip` with a shortcut (HAR-2416). Inside a `Tooltip` the Tooltip shows and says
+     * the keys. An `aria-keyshortcuts` you pass is kept as it is. The kit only shows the shortcut:
+     * the product binds the key.
      */
     shortcut?: KeyShortcut;
     children?: ReactNode;
@@ -65,13 +66,19 @@ interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     disabled?: boolean;
     /** Your router's link (`(p) => <NextLink {...p} />`); default a plain `<a>`. */
     renderLink?: UixRenderLink;
+    /**
+     * The link's keyboard shortcut, as on `Button` (HAR-2416): hover or keyboard focus shows the
+     * keys in a hint above it, and screen readers hear them once as its description. Not shown
+     * while `disabled`. The kit only shows the shortcut: the product binds the key.
+     */
+    shortcut?: KeyShortcut;
     children?: ReactNode;
 }
 /**
  * A link that looks like a `Button` (HAR-1348; TENSOR A4/B5, MOTUS C-3). Use it when the
  * action navigates; use `Button` when it acts in place.
  */
-declare function ButtonLink({ href, variant, size, icon, wrap, disabled, renderLink, className, children, onClick, ...props }: ButtonLinkProps): react.JSX.Element;
+declare function ButtonLink({ href, variant, size, icon, wrap, disabled, renderLink, shortcut, className, children, onClick, ...props }: ButtonLinkProps): react.JSX.Element;
 interface ButtonGroupProps {
     children?: ReactNode;
     className?: string;