@tensor_1/react 2.47.0 → 2.49.0

package/dist/{SchedulingCalendar-B6TakO2h.d.ts → SchedulingCalendar-WWyFL3Eo.d.ts}

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalendarWeekday } from './calendar-model.js';
 import { MoveProposal, MonthSpanLayout } from './scheduling-calendar-model.js';
+import { SchedulingSlotSelection } from './components/SchedulingResourceDay.js';
+import { SchedulingAvailabilityKind, SchedulingResource, SchedulingResourceSpan } from './scheduling-resource-model.js';
 
 interface TimeGridEntryContext {
     /** Whole text lines that fit in the item: 0 shows the markers only. */
@@ -236,6 +238,18 @@ interface SchedulingCalendarLabels {
     moveCancelled?: string;
     /** Announced when the time asked for does not exist that day. `{time}` is the time used instead. */
     gapForward?: string;
+    /** Names the resource day (HAR-983). `{date}` placeholder. */
+    resourceGrid?: string;
+    /** The words for the kinds of a resource span. */
+    availability?: Partial<Record<SchedulingAvailabilityKind, string>>;
+    /** Time of a resource that no span covers: no schedule, which is not free. */
+    noSchedule?: string;
+    /** A resource slot's or booking's accessible name. `{resource}`, `{start}`, `{end}`, `{kind}`, `{label}`. */
+    slotName?: string;
+    /** How to move in the resource day, read with it. */
+    resourceHint?: string;
+    /** The resource day with no resources. */
+    noResources?: string;
 }
 declare const DEFAULT_SCHEDULING_CALENDAR_LABELS: SchedulingCalendarLabels;
 interface SchedulingCalendarProps {
@@ -376,13 +390,48 @@ interface SchedulingCalendarProps {
     topLaneCap?: number;
     /** Lanes side by side in one day column of the time grid, at most. Fewer are used when the column is narrow. Default 4. */
     maxLanes?: number;
+    /**
+     * With `view="day"`, one column per resource (a practitioner, a room) instead of the time grid
+     * (HAR-983). Their stretches of the day come from `resourceSpans`; a time no span covers is
+     * shown as "no schedule", never as free.
+     */
+    resources?: SchedulingResource[];
+    /** The free, booked and off stretches of each resource, as the server composed them. */
+    resourceSpans?: SchedulingResourceSpan[];
+    /** Minutes per slot of the resource day: each free span is cut into bookable slots of this length. Default 15. */
+    slotMinutes?: number;
+    /** The first local time of the resource day's axis, `HH:MM`. Default `'07:00'`. */
+    dayStart?: string;
+    /** The local time the resource day's axis ends, `HH:MM`. Default `'19:00'`. */
+    dayEnd?: string;
+    /** Called by a click, Enter or Space on a free slot (its own start and end) or a booking. */
+    onSelectSlot?: (slot: SchedulingSlotSelection) => void;
+    /** Marks the slot or booking that holds this instant for this resource, e.g. while its popover is open. */
+    selectedSlot?: {
+        resourceId: string;
+        start: string;
+    };
+    /**
+     * `auto` (default): columns, and a list of one resource after another when the calendar is
+     * narrower than `resourceListBelow`. `columns` or `list` fixes one.
+     */
+    resourceLayout?: 'auto' | 'columns' | 'list';
+    /** The width in CSS pixels under which `auto` shows the list. Default 480. */
+    resourceListBelow?: number;
+    /**
+     * The first load shows skeletons; a refetch keeps what is on screen, dimmed and `aria-busy`
+     * (the resource day; the other views show `labels.loading` instead).
+     */
     loading?: boolean;
     error?: string;
     onRetry?: () => void;
     className?: string;
     labels?: Partial<SchedulingCalendarLabels>;
 }
-/** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
-declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, onSelectOverlay, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, days: dayInfo, dayEntries, spanLayout, windowLaneCap, spanLaneCap, legend, legendCaption, showHeader, notice, emptyNote, onSelectDate, agendaGroups, agendaHeadingLevel, virtualizeAbove, monthDensity, timeGrid, now, canMove, step, onProposeMove, topLaneCrossMidnightMinutes, topLaneCap, maxLanes, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
+/**
+ * Month/week/day/agenda calendar for UTC ranges rendered in an explicit IANA time zone. With
+ * `resources`, the day view is one column per resource (HAR-983).
+ */
+declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, onSelectOverlay, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, days: dayInfo, dayEntries, spanLayout, windowLaneCap, spanLaneCap, legend, legendCaption, showHeader, notice, emptyNote, onSelectDate, agendaGroups, agendaHeadingLevel, virtualizeAbove, monthDensity, timeGrid, now, canMove, step, onProposeMove, topLaneCrossMidnightMinutes, topLaneCap, maxLanes, resources, resourceSpans, slotMinutes, dayStart, dayEnd, onSelectSlot, selectedSlot, resourceLayout, resourceListBelow, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
 
 export { DEFAULT_SCHEDULING_CALENDAR_LABELS as D, type SchedulingAgendaGroup as S, type TimeGridEntryContext as T, type SchedulingBand as a, SchedulingCalendar as b, type SchedulingCalendarDay as c, type SchedulingCalendarEntry as d, type SchedulingCalendarLabels as e, type SchedulingCalendarOverlay as f, type SchedulingCalendarProps as g, type SchedulingCalendarView as h, type SchedulingDatePart as i, type SchedulingEntryState as j, type SchedulingLegendItem as k, type SchedulingMarker as l, type SchedulingMarkerEmphasis as m, type SchedulingOverlayKind as n, type SchedulingOverlayPattern as o, type SchedulingStatus as p, SchedulingTimeGrid as q, type SchedulingTimeGridProps as r };

package/dist/announce.d.ts

@@ -0,0 +1,10 @@
+/** Create the polite region `announcePolite(…, from)` will use, ahead of its first message. */
+declare function ensureAnnouncer(from?: Element | null): void;
+/**
+ * Say `text` through a polite live region (`[data-uix-announcer]`): the page's, or the open
+ * dialog's when `from` is inside one. The region is cleared first and filled a moment later,
+ * so the same words twice are spoken twice; a newer message replaces one not yet spoken.
+ */
+declare function announcePolite(text: string, from?: Element | null): void;
+
+export { announcePolite, ensureAnnouncer };

package/dist/announce.js

@@ -0,0 +1,30 @@
+const timers = /* @__PURE__ */ new WeakMap();
+function ensureAnnouncer(from) {
+  liveRegion(from);
+}
+function liveRegion(from) {
+  if (typeof document === "undefined") return null;
+  const container = from?.closest("dialog") ?? document.body;
+  let region = container.querySelector(":scope > [data-uix-announcer]");
+  if (!region) {
+    region = document.createElement("div");
+    region.setAttribute("role", "status");
+    region.setAttribute("data-uix-announcer", "");
+    region.className = "uix-visually-hidden";
+    container.append(region);
+  }
+  return region;
+}
+function announcePolite(text, from) {
+  const el = liveRegion(from);
+  if (!el) return;
+  clearTimeout(timers.get(el));
+  el.textContent = "";
+  timers.set(el, setTimeout(() => {
+    el.textContent = text;
+  }, 0));
+}
+export {
+  announcePolite,
+  ensureAnnouncer
+};

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