@tensor_1/react 2.47.0 → 2.48.0

package/dist/chart-analytic.cjs

@@ -73,7 +73,7 @@ var import_components = require("echarts/components");
 var import_renderers = require("echarts/renderers");
 
 // src/components/ChartCore.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/cx.ts
 function cx(...args) {
@@ -177,6 +177,14 @@ function mergeChartTheme(theme, option) {
   return merged;
 }
 
+// src/hooks/useReducedMotion.ts
+var import_react = require("react");
+var QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+  if (typeof document !== "undefined" && document.documentElement.getAttribute("data-motion") === "reduce") return true;
+  return typeof matchMedia !== "undefined" && matchMedia(QUERY).matches;
+}
+
 // src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
@@ -191,7 +199,7 @@ function themed(option, theme, element) {
   return theme === "none" ? resolved : mergeChartTheme(uixChartTheme(element), resolved);
 }
 function motionSafe(option) {
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  if (prefersReducedMotion()) {
     return { ...option, animation: false };
   }
   return option;
@@ -225,23 +233,23 @@ function ChartCore({
   tables
 }) {
   const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
-  const containerRef = (0, import_react.useRef)(null);
-  const chartRef = (0, import_react.useRef)(null);
-  const appliedOptionRef = (0, import_react.useRef)(null);
-  const onEventsRef = (0, import_react.useRef)(onEvents);
+  const containerRef = (0, import_react2.useRef)(null);
+  const chartRef = (0, import_react2.useRef)(null);
+  const appliedOptionRef = (0, import_react2.useRef)(null);
+  const onEventsRef = (0, import_react2.useRef)(onEvents);
   onEventsRef.current = onEvents;
-  const latestOptionRef = (0, import_react.useRef)(option);
-  const onReadyRef = (0, import_react.useRef)(onReady);
-  const tableId = (0, import_react.useId)();
+  const latestOptionRef = (0, import_react2.useRef)(option);
+  const onReadyRef = (0, import_react2.useRef)(onReady);
+  const tableId = (0, import_react2.useId)();
   const hasEmpty = empty != null;
   const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length || tables?.length);
-  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
-  const themeRef = (0, import_react.useRef)(theme);
+  const hasTextAlternativeRef = (0, import_react2.useRef)(hasTextAlternative);
+  const themeRef = (0, import_react2.useRef)(theme);
   latestOptionRef.current = option;
   themeRef.current = theme;
   onReadyRef.current = onReady;
   hasTextAlternativeRef.current = hasTextAlternative;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
@@ -287,7 +295,7 @@ function ChartCore({
     };
   }, [engine, hasEmpty]);
   const eventNames = Object.keys(onEvents ?? {}).sort().join("|");
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || !eventNames) return;
     const bound = eventNames.split("|").map((name) => {
@@ -300,7 +308,7 @@ function ChartCore({
       for (const [name, handler] of bound) chart.off(name, handler);
     };
   }, [engine, hasEmpty, eventNames]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || !group) return;
     chart.group = group;
@@ -309,7 +317,7 @@ function ChartCore({
       if (!chart.isDisposed()) chart.group = "";
     };
   }, [engine, hasEmpty, group]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     const element = containerRef.current;
     if (!chart || !element || appliedOptionRef.current === option) return;
@@ -373,7 +381,7 @@ function ChartLegendItem({ label, color, swatch = "block", className, style, ...
 }
 
 // src/components/ChartPanels.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/chart-analytic-model.ts
 var DEFAULT_ANALYTIC_LABELS = {
@@ -1195,10 +1203,10 @@ function ChartPanelsCore({
   onEventClick,
   legend
 }) {
-  const spec = (0, import_react2.useMemo)(() => ({ x, panels, events, partialLast, zoom }), [x, panels, events, partialLast, zoom]);
-  const layout = (0, import_react2.useMemo)(() => chartPanelsModel(spec, CSS_VAR_TOKENS, labels), [spec, labels]);
-  const option = (0, import_react2.useMemo)(() => (tokens) => chartPanelsModel(spec, tokens, labels).option, [spec, labels]);
-  const onEvents = (0, import_react2.useMemo)(() => ({
+  const spec = (0, import_react3.useMemo)(() => ({ x, panels, events, partialLast, zoom }), [x, panels, events, partialLast, zoom]);
+  const layout = (0, import_react3.useMemo)(() => chartPanelsModel(spec, CSS_VAR_TOKENS, labels), [spec, labels]);
+  const option = (0, import_react3.useMemo)(() => (tokens) => chartPanelsModel(spec, tokens, labels).option, [spec, labels]);
+  const onEvents = (0, import_react3.useMemo)(() => ({
     click: (raw) => {
       const params = raw;
       const value = Array.isArray(params.value) ? params.value : [];
@@ -1266,14 +1274,14 @@ function CorrelationScatterCore({
   height = 280,
   onPointClick
 }) {
-  const spec = (0, import_react2.useMemo)(
+  const spec = (0, import_react3.useMemo)(
     () => ({ points, xLabel, yLabel, trend, percentiles, thresholds, breakpoint, minPoints }),
     [points, xLabel, yLabel, trend, percentiles, thresholds, breakpoint, minPoints]
   );
-  const layout = (0, import_react2.useMemo)(() => correlationScatterModel(spec, CSS_VAR_TOKENS, labels), [spec, labels]);
-  const option = (0, import_react2.useMemo)(() => (tokens) => correlationScatterModel(spec, tokens, labels).option, [spec, labels]);
-  const usable = (0, import_react2.useMemo)(() => spec.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y)), [spec.points]);
-  const onEvents = (0, import_react2.useMemo)(() => ({
+  const layout = (0, import_react3.useMemo)(() => correlationScatterModel(spec, CSS_VAR_TOKENS, labels), [spec, labels]);
+  const option = (0, import_react3.useMemo)(() => (tokens) => correlationScatterModel(spec, tokens, labels).option, [spec, labels]);
+  const usable = (0, import_react3.useMemo)(() => spec.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y)), [spec.points]);
+  const onEvents = (0, import_react3.useMemo)(() => ({
     click: (raw) => {
       const params = raw;
       if (params.seriesId !== layout.hitSeriesId || !Array.isArray(params.value)) return;

package/dist/chart-preset.cjs

@@ -49,7 +49,7 @@ var import_components = require("echarts/components");
 var import_renderers = require("echarts/renderers");
 
 // src/components/ChartCore.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/cx.ts
 function cx(...args) {
@@ -153,6 +153,14 @@ function mergeChartTheme(theme, option) {
   return merged;
 }
 
+// src/hooks/useReducedMotion.ts
+var import_react = require("react");
+var QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+  if (typeof document !== "undefined" && document.documentElement.getAttribute("data-motion") === "reduce") return true;
+  return typeof matchMedia !== "undefined" && matchMedia(QUERY).matches;
+}
+
 // src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
@@ -167,7 +175,7 @@ function themed(option, theme, element) {
   return theme === "none" ? resolved : mergeChartTheme(uixChartTheme(element), resolved);
 }
 function motionSafe(option) {
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  if (prefersReducedMotion()) {
     return { ...option, animation: false };
   }
   return option;
@@ -201,23 +209,23 @@ function ChartCore({
   tables
 }) {
   const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
-  const containerRef = (0, import_react.useRef)(null);
-  const chartRef = (0, import_react.useRef)(null);
-  const appliedOptionRef = (0, import_react.useRef)(null);
-  const onEventsRef = (0, import_react.useRef)(onEvents);
+  const containerRef = (0, import_react2.useRef)(null);
+  const chartRef = (0, import_react2.useRef)(null);
+  const appliedOptionRef = (0, import_react2.useRef)(null);
+  const onEventsRef = (0, import_react2.useRef)(onEvents);
   onEventsRef.current = onEvents;
-  const latestOptionRef = (0, import_react.useRef)(option);
-  const onReadyRef = (0, import_react.useRef)(onReady);
-  const tableId = (0, import_react.useId)();
+  const latestOptionRef = (0, import_react2.useRef)(option);
+  const onReadyRef = (0, import_react2.useRef)(onReady);
+  const tableId = (0, import_react2.useId)();
   const hasEmpty = empty != null;
   const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length || tables?.length);
-  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
-  const themeRef = (0, import_react.useRef)(theme);
+  const hasTextAlternativeRef = (0, import_react2.useRef)(hasTextAlternative);
+  const themeRef = (0, import_react2.useRef)(theme);
   latestOptionRef.current = option;
   themeRef.current = theme;
   onReadyRef.current = onReady;
   hasTextAlternativeRef.current = hasTextAlternative;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
@@ -263,7 +271,7 @@ function ChartCore({
     };
   }, [engine, hasEmpty]);
   const eventNames = Object.keys(onEvents ?? {}).sort().join("|");
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || !eventNames) return;
     const bound = eventNames.split("|").map((name) => {
@@ -276,7 +284,7 @@ function ChartCore({
       for (const [name, handler] of bound) chart.off(name, handler);
     };
   }, [engine, hasEmpty, eventNames]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || !group) return;
     chart.group = group;
@@ -285,7 +293,7 @@ function ChartCore({
       if (!chart.isDisposed()) chart.group = "";
     };
   }, [engine, hasEmpty, group]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     const element = containerRef.current;
     if (!chart || !element || appliedOptionRef.current === option) return;

package/dist/chart.cjs

@@ -47,7 +47,7 @@ module.exports = __toCommonJS(chart_exports);
 var echarts = __toESM(require("echarts"), 1);
 
 // src/components/ChartCore.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/cx.ts
 function cx(...args) {
@@ -151,6 +151,14 @@ function mergeChartTheme(theme, option) {
   return merged;
 }
 
+// src/hooks/useReducedMotion.ts
+var import_react = require("react");
+var QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+  if (typeof document !== "undefined" && document.documentElement.getAttribute("data-motion") === "reduce") return true;
+  return typeof matchMedia !== "undefined" && matchMedia(QUERY).matches;
+}
+
 // src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
@@ -165,7 +173,7 @@ function themed(option, theme, element) {
   return theme === "none" ? resolved : mergeChartTheme(uixChartTheme(element), resolved);
 }
 function motionSafe(option) {
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  if (prefersReducedMotion()) {
     return { ...option, animation: false };
   }
   return option;
@@ -199,23 +207,23 @@ function ChartCore({
   tables
 }) {
   const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
-  const containerRef = (0, import_react.useRef)(null);
-  const chartRef = (0, import_react.useRef)(null);
-  const appliedOptionRef = (0, import_react.useRef)(null);
-  const onEventsRef = (0, import_react.useRef)(onEvents);
+  const containerRef = (0, import_react2.useRef)(null);
+  const chartRef = (0, import_react2.useRef)(null);
+  const appliedOptionRef = (0, import_react2.useRef)(null);
+  const onEventsRef = (0, import_react2.useRef)(onEvents);
   onEventsRef.current = onEvents;
-  const latestOptionRef = (0, import_react.useRef)(option);
-  const onReadyRef = (0, import_react.useRef)(onReady);
-  const tableId = (0, import_react.useId)();
+  const latestOptionRef = (0, import_react2.useRef)(option);
+  const onReadyRef = (0, import_react2.useRef)(onReady);
+  const tableId = (0, import_react2.useId)();
   const hasEmpty = empty != null;
   const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length || tables?.length);
-  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
-  const themeRef = (0, import_react.useRef)(theme);
+  const hasTextAlternativeRef = (0, import_react2.useRef)(hasTextAlternative);
+  const themeRef = (0, import_react2.useRef)(theme);
   latestOptionRef.current = option;
   themeRef.current = theme;
   onReadyRef.current = onReady;
   hasTextAlternativeRef.current = hasTextAlternative;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
@@ -261,7 +269,7 @@ function ChartCore({
     };
   }, [engine, hasEmpty]);
   const eventNames = Object.keys(onEvents ?? {}).sort().join("|");
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || !eventNames) return;
     const bound = eventNames.split("|").map((name) => {
@@ -274,7 +282,7 @@ function ChartCore({
       for (const [name, handler] of bound) chart.off(name, handler);
     };
   }, [engine, hasEmpty, eventNames]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || !group) return;
     chart.group = group;
@@ -283,7 +291,7 @@ function ChartCore({
       if (!chart.isDisposed()) chart.group = "";
     };
   }, [engine, hasEmpty, group]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     const element = containerRef.current;
     if (!chart || !element || appliedOptionRef.current === option) return;

package/dist/combobox-model.d.ts

@@ -4,6 +4,15 @@ interface ComboboxOption {
     keywords?: readonly string[];
     disabled?: boolean;
 }
+/** A titled group of options (HAR-1588). */
+interface ComboboxGroup {
+    label: string;
+    options: readonly ComboboxOption[];
+    /** Disables every option in the group. */
+    disabled?: boolean;
+}
 declare function filterComboboxOptions(options: readonly ComboboxOption[], query: string): ComboboxOption[];
+/** Options and groups that match `query` (label, value or keywords); a group stays when any of its options does. */
+declare function filterComboboxItems(items: readonly (ComboboxOption | ComboboxGroup)[], query: string): (ComboboxOption | ComboboxGroup)[];
 
-export { type ComboboxOption, filterComboboxOptions };
+export { type ComboboxGroup, type ComboboxOption, filterComboboxItems, filterComboboxOptions };

package/dist/combobox-model.js

@@ -1,3 +1,4 @@
+const isGroup = (item) => Array.isArray(item.options);
 function filterComboboxOptions(options, query) {
   const needle = query.trim().toLocaleLowerCase();
   if (!needle) return [...options];
@@ -5,6 +6,20 @@ function filterComboboxOptions(options, query) {
     (option) => [option.label, option.value, ...option.keywords ?? []].some((part) => part.toLocaleLowerCase().includes(needle))
   );
 }
+function filterComboboxItems(items, query) {
+  if (!query.trim()) return [...items];
+  const out = [];
+  for (const item of items) {
+    if (isGroup(item)) {
+      const options = filterComboboxOptions(item.options, query);
+      if (options.length) out.push({ ...item, options });
+    } else if (filterComboboxOptions([item], query).length) {
+      out.push(item);
+    }
+  }
+  return out;
+}
 export {
+  filterComboboxItems,
   filterComboboxOptions
 };

package/dist/command-palette-model.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+/** One command of a `CommandPalette` in items mode. */
+interface CommandPaletteItem {
+    /** Unique among the items; also the option's id suffix. */
+    id: string;
+    label: string;
+    /** Group heading the item is listed under. Items without one form a group without a heading. */
+    group?: string;
+    /** More words that find the item but are not shown: synonyms, an old name, a record number. */
+    keywords?: readonly string[];
+    /** A second line, e.g. where the command leads. Not searched. */
+    description?: string;
+    /** Leading icon (decorative). */
+    icon?: ReactNode;
+    /** Key names (`['Mod', 'K']`) shown at the end of the row and set as `aria-keyshortcuts`. */
+    shortcut?: readonly string[];
+    /** Runs when the item is chosen. */
+    onSelect?: () => void;
+    /** Where the item leads: `onNavigate(href)`, else the browser goes there. */
+    href?: string;
+    /** Shown but not choosable; skipped by the arrow keys. */
+    disabled?: boolean;
+}
+/** A group of found commands, in the order they are shown. */
+interface CommandPaletteGroup {
+    /** The group heading; `undefined` for items without a group. */
+    label: string | undefined;
+    items: CommandPaletteItem[];
+}
+/**
+ * The commands `query` finds, best first (HAR-1378): a label that starts with the query, then
+ * labels where every word of the query starts a word, then labels that contain every word, then
+ * matches through `keywords`. Equal matches keep the order they were given in. An empty query
+ * finds every item, in order.
+ */
+declare function filterCommandItems(items: readonly CommandPaletteItem[], query: string): CommandPaletteItem[];
+/**
+ * `items` in groups, each group where its first item is, its items in their given order. With a
+ * ranked list (from `filterCommandItems`) the group of the best match comes first.
+ */
+declare function groupCommandItems(items: readonly CommandPaletteItem[]): CommandPaletteGroup[];
+
+export { type CommandPaletteGroup, type CommandPaletteItem, filterCommandItems, groupCommandItems };

package/dist/command-palette-model.js

@@ -0,0 +1,36 @@
+import { foldForSearch } from "./search-suggest-model.js";
+const words = (folded) => folded.split(/[\s\-_/.,:;()[\]'"›>·|]+/u).filter(Boolean);
+function score(item, query, tokens) {
+  const label = foldForSearch(item.label).text;
+  if (label.startsWith(query)) return 0;
+  const labelWords = words(label);
+  if (tokens.every((t) => labelWords.some((w) => w.startsWith(t)))) return 1;
+  if (tokens.every((t) => label.includes(t))) return 2;
+  const keywords = (item.keywords ?? []).map((k) => foldForSearch(k).text);
+  if (tokens.every((t) => label.includes(t) || keywords.some((k) => k.includes(t)))) return 3;
+  return -1;
+}
+function filterCommandItems(items, query) {
+  const folded = foldForSearch(query.trim()).text;
+  if (!folded) return [...items];
+  const tokens = folded.split(/\s+/).filter(Boolean);
+  return items.map((item, index) => ({ item, index, rank: score(item, folded, tokens) })).filter((entry) => entry.rank >= 0).sort((a, b) => a.rank - b.rank || a.index - b.index).map((entry) => entry.item);
+}
+function groupCommandItems(items) {
+  const groups = [];
+  const byLabel = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    let group = byLabel.get(item.group);
+    if (!group) {
+      group = { label: item.group, items: [] };
+      byLabel.set(item.group, group);
+      groups.push(group);
+    }
+    group.items.push(item);
+  }
+  return groups;
+}
+export {
+  filterCommandItems,
+  groupCommandItems
+};

package/dist/components/AccountMenu.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AvatarPresence } from './Avatar.js';
+import { Placement } from '../overlay-position.js';
+
+interface AccountMenuUser {
+    /** The person's name, shown on the trigger and used for the avatar's initials. */
+    name: string;
+    /** A second line: an email, a role, a branch. */
+    sub?: ReactNode;
+    /** A photo URL, or your own avatar content. Without it the avatar shows the initials. */
+    avatar?: string | ReactNode;
+    /** A presence dot on the avatar (`online`, `busy`, `away`, `offline`). */
+    status?: AvatarPresence;
+}
+interface AccountMenuLabels {
+    /** The menu's name (`aria-label` of the list). Default "Account". */
+    menu: string;
+}
+declare const DEFAULT_ACCOUNT_MENU_LABELS: AccountMenuLabels;
+interface AccountMenuProps {
+    user: AccountMenuUser;
+    /**
+     * The menu's rows: `MenuItem` (profile, preferences, sign out with `tone="danger"`),
+     * `MenuRadioGroup` for a presence choice, `MenuSeparator`.
+     */
+    items?: ReactNode;
+    /**
+     * The rail form: the trigger shows the avatar only; the name stays the button's accessible
+     * name. Pair it with `Sidebar nav="rail"`.
+     */
+    collapsed?: boolean;
+    /** Where the menu opens. Default `top-start`: the trigger usually sits at the bottom of a sidebar. */
+    placement?: Placement;
+    labels?: Partial<AccountMenuLabels>;
+    /** The spoken presence words (after the name and second line), e.g. `{ online: 'Dostupan' }`. */
+    presenceLabels?: Partial<Record<AvatarPresence, string>>;
+    className?: string;
+}
+/** Up to two initials from a name, first and last word: "Ada Lovelace" → "AL", "Dževad Hodžić" → "DH". */
+declare function accountInitials(name: string): string;
+declare function AccountMenu({ user, items, collapsed, placement, labels: labelOverrides, presenceLabels, className }: AccountMenuProps): react.JSX.Element;
+
+export { AccountMenu, type AccountMenuLabels, type AccountMenuProps, type AccountMenuUser, DEFAULT_ACCOUNT_MENU_LABELS, accountInitials };

package/dist/components/AccountMenu.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+import { ChevronsUpDownIcon } from "../icons/components.js";
+import { Avatar, DEFAULT_PRESENCE_LABELS } from "./Avatar.js";
+import { Menu } from "./Menu.js";
+import { useInShellDrawer } from "../shell-context.js";
+const DEFAULT_ACCOUNT_MENU_LABELS = { menu: "Account" };
+function accountInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const first = [...words[0]][0] ?? "";
+  const last = words.length > 1 ? [...words[words.length - 1]][0] ?? "" : "";
+  return (first + last).toLocaleUpperCase();
+}
+const SILENT_PRESENCE = { online: "", busy: "", away: "", offline: "" };
+function AccountMenu({ user, items, collapsed = false, placement = "top-start", labels: labelOverrides, presenceLabels, className }) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_ACCOUNT_MENU_LABELS, ...uixLabels.accountMenu, ...labelOverrides };
+  const inDrawer = useInShellDrawer();
+  const rail = collapsed && !inDrawer;
+  const photo = typeof user.avatar === "string" ? user.avatar : void 0;
+  const custom = typeof user.avatar === "string" ? void 0 : user.avatar;
+  const trigger = /* @__PURE__ */ jsxs("button", { type: "button", className: cx("uix-account-menu", rail && "uix-account-menu--collapsed", className), children: [
+    /* @__PURE__ */ jsx(Avatar, { src: photo, alt: "", presence: user.status, presenceLabels: SILENT_PRESENCE, className: "uix-account-menu__avatar", children: custom ?? (photo ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: accountInitials(user.name) })) }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-account-menu__text", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-account-menu__name", children: user.name }),
+      user.sub != null && /* @__PURE__ */ jsx("span", { className: "uix-account-menu__sub", children: user.sub }),
+      user.status && /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+        ", ",
+        presenceLabels?.[user.status] ?? DEFAULT_PRESENCE_LABELS[user.status]
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "uix-account-menu__chevron" })
+  ] });
+  return /* @__PURE__ */ jsx(Menu, { trigger, label: labels.menu, placement, children: items });
+}
+export {
+  AccountMenu,
+  DEFAULT_ACCOUNT_MENU_LABELS,
+  accountInitials
+};

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 };