@tensor_1/react 2.5.0 → 2.7.0

package/dist/components/AppShell.d.ts

@@ -1,12 +1,26 @@
 import * as react from 'react';
 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). */
+    nav?: ShellNav;
+    /** Back-compat alias for nav="rail". Ignored when `nav` is set. */
     collapsed?: boolean;
+    /**
+     * Immersive focus mode: hides the sidebar AND the topbar so a wide, many-column
+     * table uses the whole frame. Provide `onExitFocus` to enable Esc-to-exit and
+     * the floating exit control.
+     */
+    focus?: boolean;
+    /** Called when the user presses Esc (or the exit control) while in focus mode. */
+    onExitFocus?: () => void;
+    /** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
+    mainBleed?: boolean;
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
 }
-declare function AppShell({ collapsed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
 
-export { AppShell, type AppShellProps };
+export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -1,11 +1,44 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { cx } from "../cx.js";
-function AppShell({ collapsed, sidebar, topbar, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-shell", className), "data-collapsed": collapsed || void 0, ...props, children: [
-    sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
-    topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
-    /* @__PURE__ */ jsx("main", { className: "uix-shell__main", children })
-  ] });
+function AppShell({
+  nav,
+  collapsed,
+  focus,
+  onExitFocus,
+  mainBleed,
+  sidebar,
+  topbar,
+  children,
+  className,
+  ...props
+}) {
+  const navState = nav ?? (collapsed ? "rail" : "full");
+  useEffect(() => {
+    if (!focus || !onExitFocus) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onExitFocus();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [focus, onExitFocus]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-shell", className),
+      "data-nav": navState !== "full" ? navState : void 0,
+      "data-collapsed": collapsed && nav == null ? "" : void 0,
+      "data-focus": focus || void 0,
+      ...props,
+      children: [
+        sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
+        topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
+        /* @__PURE__ */ jsx("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        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: "Esc \xB7 Exit focus" }) })
+      ]
+    }
+  );
 }
 export {
   AppShell

package/dist/components/Composer.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ComposerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * Composer surface over `.uix-composer` — a single box that owns the
+ * `:focus-within` accent ring. Drop a borderless `<textarea>` and a
+ * `<ComposerBar>` inside; the descendant `textarea` picks up the composer's
+ * padding/typography automatically, so the input never reads as a second
+ * nested box.
+ */
+declare function Composer({ children, className, ...props }: ComposerProps): react.JSX.Element;
+interface ComposerBarProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Action footer for a `<Composer>` over `.uix-composer__bar` (top-bordered, right-aligned). */
+declare function ComposerBar({ children, className, ...props }: ComposerBarProps): react.JSX.Element;
+
+export { Composer, ComposerBar, type ComposerBarProps, type ComposerProps };

package/dist/components/Composer.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Composer({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-composer", className), ...props, children });
+}
+function ComposerBar({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-composer__bar", className), ...props, children });
+}
+export {
+  Composer,
+  ComposerBar
+};

package/dist/components/Field.js

@@ -1,12 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from "react";
 import { cx } from "../cx.js";
 function Field({ label, hint, error, success, required, children, className, htmlFor }) {
+  const uid = useId();
+  const msgId = `${uid}-msg`;
+  const describedBy = error || success || hint ? msgId : void 0;
+  const control = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
+    "aria-invalid": error ? true : children.props["aria-invalid"]
+  }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-field", className), children: [
     label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor, "data-required": required || void 0, children: label }),
-    children,
-    error && /* @__PURE__ */ jsx("span", { className: "uix-field__error", children: error }),
-    success && !error && /* @__PURE__ */ jsx("span", { className: "uix-field__success", children: success }),
-    hint && !error && !success && /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint })
+    control,
+    /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ jsx("span", { className: "uix-field__success", children: success }) : hint ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
   ] });
 }
 export {

package/dist/components/Popover.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, RefObject, ReactNode } from 'react';
+import { Placement } from '../overlay-position.js';
 
 interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -7,12 +8,25 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
      * wires to it via `popoverTarget={id}`. Pass `"manual"` to control open state yourself.
      */
     popover?: 'auto' | 'manual';
+    /**
+     * Element (or ref) to anchor against. When set, the popover is placed with
+     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen —
+     * instead of relying on CSS `anchor()`, which is Chromium-only and detaches the
+     * popover from its trigger everywhere else. The native Popover API still provides
+     * the top layer (so it escapes `overflow` clipping) and light-dismiss.
+     */
+    anchor?: RefObject<HTMLElement | null> | HTMLElement | null;
+    /** Preferred placement when `anchor` is set. Default `'bottom-start'`. */
+    placement?: Placement;
+    /** Gap between the trigger and the popover, in px. Default 6. */
+    offset?: number;
     children?: ReactNode;
 }
 /**
- * Anchored surface over `.uix-popover`, using the native Popover API.
- * Compose ITSM things like a filter popover by putting controls inside.
+ * Anchored surface over `.uix-popover`, using the native Popover API. Compose ITSM
+ * things like a filter popover, menu, or rich select by putting controls inside.
+ * Pass `anchor` to get collision-aware, cross-browser placement (UIX-FIX-02).
  */
-declare function Popover({ popover, children, className, ...props }: PopoverProps): react.JSX.Element;
+declare function Popover({ popover, anchor, placement, offset, className, children, ...props }: PopoverProps): react.JSX.Element;
 
 export { Popover, type PopoverProps };

package/dist/components/Popover.js

@@ -1,8 +1,37 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
-function Popover({ popover = "auto", children, className, ...props }) {
+import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+function Popover({
+  popover = "auto",
+  anchor,
+  placement = "bottom-start",
+  offset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
   const popoverAttr = { popover };
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+  const reposition = useAnchoredPosition(anchor ?? null, ref, {
+    open: open && !!anchor,
+    placement,
+    offset
+  });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !anchor) return;
+    const sync = () => {
+      const isOpen = el.matches(":popover-open");
+      if (isOpen) reposition();
+      setOpen(isOpen);
+    };
+    el.addEventListener("toggle", sync);
+    return () => el.removeEventListener("toggle", sync);
+  }, [anchor, reposition]);
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 export {
   Popover

package/dist/components/Segmented.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The currently-selected option value. */
+    value?: string;
+    /** Fires with the option's value when a different option is chosen. */
+    onChange?: (value: string) => void;
+    children?: ReactNode;
+}
+/**
+ * Segmented single-select over `.uix-segmented` — the compact 2–3 way toggle
+ * (density, audience, view mode …) that reads as one pill with a lifted active
+ * segment. Selection state is shared with `<SegmentedOption>` via context, so
+ * the caller only wires `value` + `onChange` once.
+ */
+declare function Segmented({ value, onChange, children, className, ...props }: SegmentedProps): react.JSX.Element;
+interface SegmentedOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    value: string;
+    children?: ReactNode;
+}
+/**
+ * One option in a `<Segmented>`. Active state is derived from the parent's
+ * `value`; the pressed segment lifts to the surface via
+ * `.uix-segmented__option[aria-pressed="true"]`.
+ */
+declare function SegmentedOption({ value, children, className, onClick, ...props }: SegmentedOptionProps): react.JSX.Element;
+
+export { Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps };

package/dist/components/Segmented.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cx } from "../cx.js";
+const SegmentedCtx = createContext({});
+function Segmented({ value, onChange, children, className, ...props }) {
+  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
+}
+function SegmentedOption({
+  value,
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  const ctx = useContext(SegmentedCtx);
+  const selected = ctx.value === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx("uix-segmented__option", className),
+      "aria-pressed": selected,
+      onClick: (e) => {
+        ctx.onChange?.(value);
+        onClick?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Segmented,
+  SegmentedOption
+};

package/dist/components/Table.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { TableHTMLAttributes, HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
 
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
@@ -11,16 +11,20 @@ interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     density?: TableDensity;
     zebra?: boolean;
     pinnedCol?: boolean;
+    /** table-layout: fixed — required for reliable column widths + primary-column truncation */
+    fixed?: boolean;
     rowPeek?: boolean;
     v2?: boolean;
 }
-declare function Table({ density, zebra, pinnedCol, rowPeek, v2, className, children, ...props }: TableProps): react.JSX.Element;
+declare function Table({ density, zebra, pinnedCol, fixed, rowPeek, v2, className, children, ...props }: TableProps): react.JSX.Element;
 interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {
     sortable?: boolean;
     sortDirection?: SortDirection;
+    /** 1-based ordinal shown when this column is a secondary key in a multi-sort */
+    sortOrder?: number;
     onSort?: () => void;
 }
-declare function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }: ThProps): react.JSX.Element;
+declare function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }: ThProps): react.JSX.Element;
 interface TdProps extends TdHTMLAttributes<HTMLTableCellElement> {
     pinned?: boolean;
 }
@@ -30,5 +34,42 @@ interface TrProps extends HTMLAttributes<HTMLTableRowElement> {
     pinned?: boolean;
 }
 declare function Tr({ selected, pinned, className, children, ...props }: TrProps): react.JSX.Element;
+interface BulkBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** number of selected rows, rendered as "N selected" */
+    count?: number;
+    children?: ReactNode;
+}
+/** Contextual action bar shown above the table when ≥1 row is selected. */
+declare function BulkBar({ count, children, className, ...props }: BulkBarProps): react.JSX.Element;
+interface RowActionsProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+}
+/** Trailing cell that holds the row's hover actions (kebab, quick actions). */
+declare function RowActions({ children, className, ...props }: RowActionsProps): react.JSX.Element;
+interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+/** A single hover-revealed row action button (icon inside). */
+declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
+interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    expanded?: boolean;
+}
+/** Chevron button that expands/collapses an inline detail row. */
+declare function ExpandToggle({ expanded, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
+/** Emphasised primary cell text. */
+declare function CellStrong({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
+/** Secondary line under a primary cell value (muted, meta size). */
+declare function CellSub({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
+interface MarkProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** A search-match highlight span. */
+declare function Mark({ children, className, ...props }: MarkProps): react.JSX.Element;
+interface HighlightedProps {
+    text: string;
+    query: string;
+}
+/** Render `text` with case-insensitive matches of `query` wrapped in <mark>. */
+declare function Highlighted({ text, query }: HighlightedProps): react.JSX.Element;
 
-export { type SortDirection, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Td, type TdProps, Th, type ThProps, Tr, type TrProps };
+export { BulkBar, type BulkBarProps, CellStrong, CellSub, ExpandToggle, type ExpandToggleProps, Highlighted, type HighlightedProps, Mark, type MarkProps, RowAction, type RowActionProps, RowActions, type RowActionsProps, type SortDirection, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Td, type TdProps, Th, type ThProps, Tr, type TrProps };

package/dist/components/Table.js

@@ -1,5 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
+import { highlightSegments } from "../table-engine.js";
 function TableWrap({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-table-wrap", className), ...props, children });
 }
@@ -7,6 +8,7 @@ function Table({
   density = "standard",
   zebra = true,
   pinnedCol,
+  fixed,
   rowPeek,
   v2,
   className,
@@ -16,7 +18,13 @@ function Table({
   return /* @__PURE__ */ jsx(
     "table",
     {
-      className: cx("uix-table", !zebra && "uix-table--no-zebra", pinnedCol && "uix-table--pinned-col", className),
+      className: cx(
+        "uix-table",
+        !zebra && "uix-table--no-zebra",
+        pinnedCol && "uix-table--pinned-col",
+        fixed && "uix-table--fixed",
+        className
+      ),
       "data-density": density !== "standard" ? density : void 0,
       "data-uix-rowpeek": rowPeek || void 0,
       "data-uix-table-v2": v2 || void 0,
@@ -25,12 +33,13 @@ function Table({
     }
   );
 }
-function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }) {
+function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
   return /* @__PURE__ */ jsx(
     "th",
     {
       className,
       "data-sort": sortable || void 0,
+      "data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
       "aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
       onClick: sortable ? onSort ?? onClick : onClick,
       ...props,
@@ -53,7 +62,58 @@ function Tr({ selected, pinned, className, children, ...props }) {
     }
   );
 }
+function BulkBar({ count, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
+    count != null && /* @__PURE__ */ jsxs("span", { className: "uix-bulkbar__count", children: [
+      count,
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uix-bulkbar__spacer" }),
+    children
+  ] });
+}
+function RowActions({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("td", { className: cx("uix-table__actions", className), ...props, children });
+}
+function RowAction({ children, className, type = "button", ...props }) {
+  return /* @__PURE__ */ jsx("button", { type, className: cx("uix-rowact", className), ...props, children });
+}
+function ExpandToggle({ expanded, className, type = "button", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      className: cx("uix-table__expand", className),
+      "aria-expanded": expanded,
+      "aria-label": expanded ? "Collapse row" : "Expand row",
+      ...props,
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) })
+    }
+  );
+}
+function CellStrong({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("uix-cell-strong", className), ...props, children });
+}
+function CellSub({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("uix-cell-sub", className), ...props, children });
+}
+function Mark({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("mark", { className: cx("uix-mark", className), ...props, children });
+}
+function Highlighted({ text, query }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: highlightSegments(text, query).map(
+    (seg, i) => seg.match ? /* @__PURE__ */ jsx("mark", { className: "uix-mark", children: seg.text }, i) : /* @__PURE__ */ jsx("span", { children: seg.text }, i)
+  ) });
+}
 export {
+  BulkBar,
+  CellStrong,
+  CellSub,
+  ExpandToggle,
+  Highlighted,
+  Mark,
+  RowAction,
+  RowActions,
   Table,
   TableWrap,
   Td,

package/dist/components/Timeline.d.ts

@@ -7,10 +7,16 @@ interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
 /** Activity timeline container over `.uix-timeline`. */
 declare function Timeline({ children, className, ...props }: TimelineProps): react.JSX.Element;
 interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom rail node — an icon puck, an avatar, a tinted dot. Defaults to the
+     * accent `.uix-timeline__node` dot. Supply this to make a heterogeneous feed
+     * (comments + audit events) read on one rail with per-row node semantics.
+     */
+    node?: ReactNode;
     meta?: ReactNode;
     children?: ReactNode;
 }
 /** A timeline entry over `.uix-timeline__item` (node + connecting line + body). */
-declare function TimelineItem({ meta, children, className, ...props }: TimelineItemProps): react.JSX.Element;
+declare function TimelineItem({ node, meta, children, className, ...props }: TimelineItemProps): react.JSX.Element;
 
 export { Timeline, TimelineItem, type TimelineItemProps, type TimelineProps };

package/dist/components/Timeline.js

@@ -3,10 +3,10 @@ import { cx } from "../cx.js";
 function Timeline({ children, className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-timeline", className), ...props, children });
 }
-function TimelineItem({ meta, children, className, ...props }) {
+function TimelineItem({ node, meta, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-timeline__item", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-timeline__rail", children: [
-      /* @__PURE__ */ jsx("span", { className: "uix-timeline__node" }),
+      node ?? /* @__PURE__ */ jsx("span", { className: "uix-timeline__node" }),
       /* @__PURE__ */ jsx("span", { className: "uix-timeline__line" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "uix-timeline__body", children: [

package/dist/components/Toast.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
+  const assertive = tone === "danger";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
       "data-leaving": leaving || void 0,
-      role: "status",
-      "aria-live": "polite",
+      role: assertive ? "alert" : "status",
+      "aria-live": assertive ? "assertive" : "polite",
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("div", { className: "uix-toast__icon", children: icon }),
+        icon && /* @__PURE__ */ jsx("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsxs("div", { className: "uix-toast__body", children: [
           title && /* @__PURE__ */ jsx("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
@@ -21,7 +22,7 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
   );
 }
 function Toaster({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-toaster", className), ...props, children });
 }
 export {
   Toast,

package/dist/components/Tooltip.d.ts

@@ -1,16 +1,20 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../overlay-position.js';
 
 interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Tooltip text. Rendered via the CSS `[data-uix-tip]` hover/focus tooltip. */
+    /** Tooltip text. */
     label: string;
+    /** Preferred placement. Default `'top'`. */
+    placement?: Placement;
     children?: ReactNode;
 }
 /**
- * Thin wrapper over the CSS-only tooltip (`[data-uix-tip]`). Wraps its children
- * in a span carrying the attribute; the bubble is drawn entirely in CSS on
- * hover/focus. For keyboard reveal, ensure a focusable child or pass `tabIndex`.
+ * Tooltip whose bubble renders in the top layer via the native Popover API, so it
+ * escapes any `overflow: hidden/scroll` ancestor that would clip the old CSS-only
+ * `[data-uix-tip]` tooltip (UIX-FIX-02). Positioned by the shared overlay engine
+ * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape.
  */
-declare function Tooltip({ label, children, ...props }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
 
 export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.js

@@ -1,6 +1,64 @@
-import { jsx } from "react/jsx-runtime";
-function Tooltip({ label, children, ...props }) {
-  return /* @__PURE__ */ jsx("span", { "data-uix-tip": label, ...props, children });
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+function Tooltip({ label, placement = "top", className, children, ...props }) {
+  const triggerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const id = useId();
+  useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  const show = () => {
+    const b = bubbleRef.current;
+    if (b && !b.matches(":popover-open")) {
+      try {
+        b.showPopover();
+      } catch {
+      }
+    }
+    setOpen(true);
+  };
+  const hide = () => {
+    const b = bubbleRef.current;
+    if (b && b.matches(":popover-open")) {
+      try {
+        b.hidePopover();
+      } catch {
+      }
+    }
+    setOpen(false);
+  };
+  useEffect(() => () => {
+    const b = bubbleRef.current;
+    if (b && b.matches(":popover-open")) {
+      try {
+        b.hidePopover();
+      } catch {
+      }
+    }
+  }, []);
+  const bubbleAttr = { popover: "manual" };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: triggerRef,
+      className: cx("uix-tooltip", className),
+      "aria-describedby": id,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") hide();
+      },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { ref: bubbleRef, id, role: "tooltip", className: "uix-tooltip__bubble", ...bubbleAttr, children: label })
+      ]
+    }
+  );
 }
 export {
   Tooltip

package/dist/components/Tree.d.ts

@@ -11,8 +11,11 @@ interface TreeNodeProps {
     node: TreeNodeData;
     expanded: Set<string>;
     selected?: string;
+    selectable: boolean;
+    tabbableId?: string;
     onToggle: (id: string) => void;
     onSelect?: (id: string) => void;
+    onFocusNode: (id: string) => void;
     level?: number;
 }
 interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' | 'onChange'> {
@@ -22,7 +25,18 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
     selected?: string;
     onToggle?: (id: string) => void;
     onSelect?: (id: string) => void;
+    /**
+     * Virtualize a large tree — render only the rows in view (UIX-FIX-05). Defaults to auto
+     * (on past the engine's `shouldVirtualize` threshold of visible rows). When on, the tree is
+     * flattened to a scrollable list of `maxHeight` with fixed-height rows; a11y is preserved via
+     * `aria-level` / `aria-setsize` / `aria-posinset` instead of nested `role="group"`s.
+     */
+    virtualize?: boolean;
+    /** Fixed row height (px) used for virtualization. Default 32. */
+    rowHeight?: number;
+    /** Scroll-viewport height (px) when virtualizing. Default 384. */
+    maxHeight?: number;
 }
-declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
+declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, virtualize, rowHeight, maxHeight, className, ...props }: TreeProps): react.JSX.Element;
 
 export { Tree, type TreeNodeData, type TreeNodeProps, type TreeProps };