@tensor_1/react 2.6.0 → 2.8.0

package/dist/components/EditorialHome.d.ts

@@ -0,0 +1,183 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+interface PageIntroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Small line above the title (e.g. today's date). */
+    kicker?: ReactNode;
+    title: ReactNode;
+    /** Supporting copy under the title. */
+    lede?: ReactNode;
+    /** Label shown above the search well. */
+    searchLabel?: ReactNode;
+    /** The search well itself (form + `.uix-searchbar` markup, or `SearchBar`-style composition). */
+    search?: ReactNode;
+    /** Shortcut buttons; rendered inside the `.uix-shortcut-grid` full-width row. */
+    shortcuts?: ReactNode;
+    /** Accessible label for the shortcuts group. */
+    shortcutsLabel?: string;
+}
+/**
+ * Editorial page intro — kicker / title / lede beside a search well, with an
+ * optional full-width shortcut grid underneath (`.uix-page-intro`).
+ */
+declare function PageIntro({ kicker, title, lede, searchLabel, search, shortcuts, shortcutsLabel, className, children, ...props }: PageIntroProps): react.JSX.Element;
+interface SectionHeadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    /** id for the `<h2>`, for `aria-labelledby` wiring on the enclosing section. */
+    titleId?: string;
+    /** Right-aligned slot — a `.uix-section-link` anchor, a button, a pill. */
+    action?: ReactNode;
+}
+/** Section head — title row with an optional trailing action (`.uix-section-head`). */
+declare function SectionHead({ title, titleId, action, className, ...props }: SectionHeadProps): react.JSX.Element;
+interface NoticeQueueProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Leading icon slot. */
+    icon?: ReactNode;
+    /** Bolded lead-in of the notice copy. */
+    title?: ReactNode;
+    /** Rest of the notice copy, after the title. */
+    summary?: ReactNode;
+    /** Meta line under the copy (e.g. "Needs action · Required by Friday"). */
+    meta?: ReactNode;
+    /** Queue position (e.g. "1 of 4 important updates"). */
+    position?: ReactNode;
+    /**
+     * Trailing controls — previous/next arrows (put `uix-notice__arrow--previous`
+     * on the previous button to flip its icon), read/view-all buttons.
+     */
+    actions?: ReactNode;
+}
+/**
+ * Notice queue — the rotating "important updates" banner (`.uix-notice`). The
+ * copy region is `aria-live="polite"` so queue rotation is announced.
+ */
+declare function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }: NoticeQueueProps): react.JSX.Element;
+interface FeaturedStageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Decorative visual (story signal + diagram). Hidden from AT unless `visualLabel` is set. */
+    visual?: ReactNode;
+    /** Accessible description of the visual; when set the visual gets `role="img"`. */
+    visualLabel?: string;
+    /**
+     * Ordinal of the story on stage (e.g. "01"), rendered as the filled
+     * `.uix-featured__now` chip in the eyebrow. Pair it with the matching
+     * `FeaturedRundownItem`'s `number` — the selected item's number renders as
+     * the same chip, and that pairing is what links rundown to stage on every
+     * breakpoint (the divider caret only exists while the zones sit side by side).
+     */
+    ordinal?: ReactNode;
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    /** id for the `<h2>` title, for `aria-labelledby` wiring. */
+    titleId?: string;
+    description?: ReactNode;
+    meta?: ReactNode;
+    /** Call-to-action slot under the meta line. */
+    action?: ReactNode;
+}
+/**
+ * Featured stage — the hero story zone of the featured briefing
+ * (`.uix-featured__stage`). The briefing is ONE `.uix-featured` card: put this
+ * and `FeaturedRundown` directly inside it and the internal hairline, the
+ * selected item's caret, and the ordinal chips connect the two zones. Content
+ * is `aria-live="polite"` so swapping the featured story (from the rundown)
+ * is announced.
+ */
+declare function FeaturedStage({ visual, visualLabel, ordinal, eyebrow, title, titleId, description, meta, action, className, ...props }: FeaturedStageProps): react.JSX.Element;
+interface FeaturedRundownProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Uppercase line above the title (e.g. "Editorial briefing"). */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    /** id for the `<h2>` title, for `aria-labelledby` wiring. */
+    titleId?: string;
+    /** Trailing head slot (e.g. a count pill). */
+    meta?: ReactNode;
+    /** `FeaturedRundownItem`s. */
+    children?: ReactNode;
+}
+/**
+ * Featured rundown — the story-list zone of the featured briefing
+ * (`.uix-rundown`), sitting inside the single `.uix-featured` card beside (or,
+ * stacked, below) the `FeaturedStage`.
+ */
+declare function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }: FeaturedRundownProps): react.JSX.Element;
+interface FeaturedRundownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    /** Ordinal label (e.g. "01"). */
+    number?: ReactNode;
+    /** Topic/duration line above the item title (e.g. "Company · 5 min"). */
+    topic?: ReactNode;
+    /** The story title. */
+    title: ReactNode;
+    /** Whether this story is on the stage — sets `aria-pressed` + `data-selected`. */
+    selected?: boolean;
+}
+/**
+ * One rundown story — a toggle button (`.uix-rundown__item`) whose selection
+ * is conveyed with `aria-pressed` and styled through `[data-selected]`.
+ */
+declare function FeaturedRundownItem({ number, topic, title, selected, className, ...props }: FeaturedRundownItemProps): react.JSX.Element;
+interface NewsLeadProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Meta line above the title (pill + date). */
+    meta?: ReactNode;
+    title: ReactNode;
+    summary?: ReactNode;
+}
+/** News lead — the top story of a news column (`.uix-news-lead`). */
+declare function NewsLead({ meta, title, summary, className, ...props }: NewsLeadProps): react.JSX.Element;
+interface ContentListProps extends HTMLAttributes<HTMLUListElement> {
+    /** `ContentListItem`s. */
+    children?: ReactNode;
+}
+/** Content list — hairline-divided rows of titled items (`.uix-content-list`). */
+declare function ContentList({ children, className, ...props }: ContentListProps): react.JSX.Element;
+interface ContentListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    title: ReactNode;
+    meta?: ReactNode;
+    /** Trailing slot — an arrow glyph, a pill. */
+    trailing?: ReactNode;
+}
+/** One content-list row — title + meta with an optional trailing slot. */
+declare function ContentListItem({ title, meta, trailing, className, ...props }: ContentListItemProps): react.JSX.Element;
+interface ResourceGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Resource buttons/links (typically `.uix-btn--outline`). */
+    children?: ReactNode;
+}
+/** Resource grid — a three-up grid of resource shortcuts (`.uix-resource-grid`). */
+declare function ResourceGrid({ children, className, ...props }: ResourceGridProps): react.JSX.Element;
+interface StatLineItem {
+    /** Stable identity for the item; falls back to the index when omitted. */
+    id?: string;
+    value: ReactNode;
+    label: ReactNode;
+}
+interface StatLineProps extends HTMLAttributes<HTMLDivElement> {
+    items?: StatLineItem[];
+    children?: ReactNode;
+}
+/**
+ * Stat line — a compact value/label summary strip over a hairline
+ * (`.uix-stat-line`). Use `items` for data-driven stats or hand-author
+ * `.uix-stat-line__item` children.
+ */
+declare function StatLine({ items, children, className, ...props }: StatLineProps): react.JSX.Element;
+interface EventRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Calendar-block month (e.g. "Jul"). */
+    month: ReactNode;
+    /** Calendar-block day (e.g. "30"). */
+    day: ReactNode;
+    title: ReactNode;
+    meta?: ReactNode;
+}
+/** Event row — date block + title/meta (`.uix-event-row`). */
+declare function EventRow({ month, day, title, meta, className, ...props }: EventRowProps): react.JSX.Element;
+interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Leading indicator slot (e.g. a `.uix-dot`). */
+    indicator?: ReactNode;
+    /** Service name — takes the flexible middle (`.uix-status-row__name`). */
+    name: ReactNode;
+    /** Trailing meta (e.g. "Healthy"), rendered as `.uix-list-meta`. */
+    meta?: ReactNode;
+}
+/** Status row — indicator + name + trailing meta (`.uix-status-row`). */
+declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
+
+export { ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, EventRow, type EventRowProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, NewsLead, type NewsLeadProps, NoticeQueue, type NoticeQueueProps, PageIntro, type PageIntroProps, ResourceGrid, type ResourceGridProps, SectionHead, type SectionHeadProps, StatLine, type StatLineItem, type StatLineProps, StatusRow, type StatusRowProps };

package/dist/components/EditorialHome.js

@@ -0,0 +1,183 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function PageIntro({
+  kicker,
+  title,
+  lede,
+  searchLabel,
+  search,
+  shortcuts,
+  shortcutsLabel,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-page-intro", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      kicker != null && /* @__PURE__ */ jsx("p", { className: "uix-page-kicker", children: kicker }),
+      /* @__PURE__ */ jsx("h1", { className: "uix-page-title", children: title }),
+      lede != null && /* @__PURE__ */ jsx("p", { className: "uix-page-lede", children: lede })
+    ] }),
+    search != null && /* @__PURE__ */ jsxs("div", { children: [
+      searchLabel != null && /* @__PURE__ */ jsx("p", { className: "uix-intro-search__label", children: searchLabel }),
+      search
+    ] }),
+    shortcuts != null && /* @__PURE__ */ jsx("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
+    children
+  ] });
+}
+function SectionHead({ title, titleId, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-section-head", className), ...props, children: [
+    /* @__PURE__ */ jsx("h2", { className: "uix-section-title", id: titleId, children: title }),
+    action
+  ] });
+}
+function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-notice", className), ...props, children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "uix-notice__content", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsxs("p", { className: "uix-notice__copy", children: [
+        title != null && /* @__PURE__ */ jsx("strong", { children: title }),
+        title != null && summary != null && " ",
+        summary
+      ] }),
+      meta != null && /* @__PURE__ */ jsx("p", { className: "uix-notice__meta", children: meta })
+    ] }),
+    (position != null || actions != null) && /* @__PURE__ */ jsxs("div", { className: "uix-notice__actions", children: [
+      position != null && /* @__PURE__ */ jsx("span", { className: "uix-notice__position", children: position }),
+      actions
+    ] })
+  ] });
+}
+function FeaturedStage({
+  visual,
+  visualLabel,
+  ordinal,
+  eyebrow,
+  title,
+  titleId,
+  description,
+  meta,
+  action,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("article", { className: cx("uix-featured__stage", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "uix-featured__visual",
+        role: visualLabel != null ? "img" : void 0,
+        "aria-label": visualLabel,
+        "aria-hidden": visualLabel == null || void 0,
+        children: visual
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "uix-featured__content", "aria-live": "polite", children: [
+      (eyebrow != null || ordinal != null) && /* @__PURE__ */ jsxs("p", { className: "uix-featured__eyebrow", children: [
+        ordinal != null && /* @__PURE__ */ jsx("span", { className: "uix-featured__now", children: ordinal }),
+        eyebrow
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "uix-featured__title", id: titleId, children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "uix-featured__description", children: description }),
+      meta != null && /* @__PURE__ */ jsx("p", { className: "uix-featured__meta", children: meta }),
+      action
+    ] })
+  ] });
+}
+function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("aside", { className: cx("uix-rundown", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-rundown__head", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        eyebrow != null && /* @__PURE__ */ jsx("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
+        /* @__PURE__ */ jsx("h2", { className: "uix-rundown__title", id: titleId, children: title })
+      ] }),
+      meta
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-rundown__items", children })
+  ] });
+}
+function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cx("uix-rundown__item", className),
+      "aria-pressed": selected,
+      "data-selected": selected ? "true" : "false",
+      ...props,
+      children: [
+        number != null && /* @__PURE__ */ jsx("span", { className: "uix-rundown__number", children: number }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          topic != null && /* @__PURE__ */ jsx("span", { className: "uix-rundown__topic", children: topic }),
+          /* @__PURE__ */ jsx("span", { className: "uix-rundown__item-title", children: title })
+        ] })
+      ]
+    }
+  );
+}
+function NewsLead({ meta, title, summary, className, ...props }) {
+  return /* @__PURE__ */ jsxs("article", { className: cx("uix-news-lead", className), ...props, children: [
+    meta != null && /* @__PURE__ */ jsx("p", { className: "uix-news-lead__meta", children: meta }),
+    /* @__PURE__ */ jsx("h3", { className: "uix-news-lead__title", children: title }),
+    summary != null && /* @__PURE__ */ jsx("p", { className: "uix-news-lead__summary", children: summary })
+  ] });
+}
+function ContentList({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cx("uix-content-list", className), ...props, children });
+}
+function ContentListItem({ title, meta, trailing, className, ...props }) {
+  return /* @__PURE__ */ jsxs("li", { className: cx("uix-content-list__item", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "uix-content-list__title", children: title }),
+      meta != null && /* @__PURE__ */ jsx("p", { className: "uix-content-list__meta", children: meta })
+    ] }),
+    trailing
+  ] });
+}
+function ResourceGrid({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-resource-grid", className), ...props, children });
+}
+function StatLine({ items, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-stat-line", className), ...props, children: [
+    items?.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "uix-stat-line__item", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-stat-line__value", children: item.value }),
+      /* @__PURE__ */ jsx("span", { className: "uix-stat-line__label", children: item.label })
+    ] }, item.id ?? i)),
+    children
+  ] });
+}
+function EventRow({ month, day, title, meta, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-event-row", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-event-date", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-event-date__month", children: month }),
+      /* @__PURE__ */ jsx("span", { className: "uix-event-date__day", children: day })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "uix-event-row__title", children: title }),
+      meta != null && /* @__PURE__ */ jsx("p", { className: "uix-event-row__meta", children: meta })
+    ] })
+  ] });
+}
+function StatusRow({ indicator, name, meta, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-status-row", className), ...props, children: [
+    indicator,
+    /* @__PURE__ */ jsx("span", { className: "uix-status-row__name", children: name }),
+    meta != null && /* @__PURE__ */ jsx("span", { className: "uix-list-meta", children: meta })
+  ] });
+}
+export {
+  ContentList,
+  ContentListItem,
+  EventRow,
+  FeaturedRundown,
+  FeaturedRundownItem,
+  FeaturedStage,
+  NewsLead,
+  NoticeQueue,
+  PageIntro,
+  ResourceGrid,
+  SectionHead,
+  StatLine,
+  StatusRow
+};

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