@tensor_1/react 2.6.0 → 2.8.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, CSSProperties, HTMLAttributes, AnchorHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
+import { RefObject, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, CSSProperties, HTMLAttributes, AnchorHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
 
 declare function cx(...args: (string | false | null | undefined | 0)[]): string;
 
@@ -140,6 +140,82 @@ interface UseTableResult<T> {
  */
 declare function useTable<T extends Row>(data: readonly T[], options?: UseTableOptions): UseTableResult<T>;
 
+/**
+ * uix overlay positioning — framework-agnostic, dependency-free anchored placement.
+ *
+ * Pure geometry (no DOM): given the anchor's rect, the floating element's size, and
+ * the viewport, compute where to put the floating element with two behaviours:
+ *   • flip  — if the preferred side doesn't fit, use the opposite side (or whichever
+ *             side has more room);
+ *   • shift — slide along the cross axis so the element stays within the viewport.
+ *
+ * The React hook (useAnchoredPosition) and the vanilla styleguide both feed this
+ * getBoundingClientRect() values, so anchored overlays land in the same place in every
+ * browser — instead of relying on CSS anchor() positioning, which is Chromium-only and
+ * silently detaches the overlay from its trigger everywhere else (UIX-FIX-02).
+ *
+ * Everything here is deterministic and unit-tested (see overlay-position.test.mjs).
+ */
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+type Placement = Side | `${Side}-${Align}`;
+/** A viewport-space rectangle, as returned by getBoundingClientRect(). */
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+interface PositionOptions {
+    /** Preferred placement. Default `'bottom-start'`; a bare side (e.g. `'top'`) centers on the cross axis. */
+    placement?: Placement;
+    /** Gap between the anchor and the floating element, in px. Default 6. */
+    offset?: number;
+    /** Minimum gap kept from each viewport edge when shifting, in px. Default 8. */
+    padding?: number;
+    /** Flip to the opposite side when the preferred one doesn't fit. Default true. */
+    flip?: boolean;
+    /** Slide along the cross axis to stay on-screen. Default true. */
+    shift?: boolean;
+}
+interface PositionResult {
+    /** Viewport-space left, for `position: fixed`. */
+    x: number;
+    /** Viewport-space top, for `position: fixed`. */
+    y: number;
+    /** The placement actually used (after any flip). */
+    placement: Placement;
+    side: Side;
+    align: Align;
+}
+/**
+ * Compute the floating element's viewport-space position anchored to `anchor`.
+ * Coordinates are for `position: fixed` (same space as getBoundingClientRect).
+ */
+declare function computePosition(anchor: Rect, floating: Size, viewport: Size, options?: PositionOptions): PositionResult;
+
+interface UseAnchoredPositionOptions {
+    /** Reposition while true, and (re)attach scroll/resize listeners. */
+    open: boolean;
+    placement?: Placement;
+    offset?: number;
+    padding?: number;
+}
+/**
+ * Position a floating element (a native-popover overlay) against an anchor with
+ * cross-browser flip/shift — the DOM half of the overlay-position engine (UIX-FIX-02).
+ *
+ * Measures both elements with getBoundingClientRect, applies `position: fixed` + left/top
+ * (overriding the popover's default centered `inset:0; margin:auto`), and keeps the overlay
+ * glued to its anchor on scroll/resize while `open`. Returns a `reposition` fn for callers
+ * that want to nudge it manually (e.g. right when a native popover's `toggle` fires).
+ */
+declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null> | HTMLElement | null | undefined, floatingRef: RefObject<HTMLElement | null>, { open, placement, offset, padding }: UseAnchoredPositionOptions): () => void;
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link';
     size?: 'sm' | 'md' | 'lg';
@@ -654,16 +730,19 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
 declare function Stat({ label, value, icon, meta, trend, className, ...props }: StatProps): react.JSX.Element;
 
 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;
 
 interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     icon?: ReactNode;
@@ -832,13 +911,26 @@ 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;
 
 interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
     /** Props for the search input (value/onChange/placeholder wired by the consumer). */
@@ -924,8 +1016,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'> {
@@ -935,7 +1030,244 @@ 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, virtualize, rowHeight, maxHeight, className, ...props }: TreeProps): react.JSX.Element;
+
+/**
+ * uix tree model — framework-agnostic, dependency-free tree flattening + keyboard nav.
+ *
+ * Pure functions (no DOM, no React): flatten a nested tree into the linear list of *visible*
+ * rows (respecting expansion) so it can be virtualized with the table engine's virtualWindow,
+ * and resolve a keyboard key into a navigation decision. Both the plain and the virtualized
+ * <Tree> render paths use these, so the two behave identically and keyboard nav works even for
+ * rows that are scrolled out of the virtual window (UIX-FIX-05). Unit-tested (tree-model.test.mjs).
+ */
+/** Minimal shape a node must have; the concrete node (label, icon, …) rides along as `T`. */
+interface TreeLike<T> {
+    id: string;
+    children?: T[];
+}
+interface FlatNode<T> {
+    node: T;
+    /** 1-based depth, for aria-level. */
+    level: number;
+    /** number of siblings at this level (this node's parent's child count), for aria-setsize. */
+    setsize: number;
+    /** 1-based index among those siblings, for aria-posinset. */
+    posinset: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+}
+/**
+ * Flatten a nested tree into the visible rows, in DOM/reading order. A node's children follow
+ * it immediately and are included only when the node is in `expanded`.
+ */
+declare function flattenTree<T extends TreeLike<T>>(nodes: readonly T[], expanded: ReadonlySet<string>, level?: number): FlatNode<T>[];
+/** A decision produced by a key press — any subset may be set. */
+interface TreeNavAction {
+    /** move focus (roving tabindex) to this node id. */
+    focusId?: string;
+    /** toggle this node's expansion. */
+    toggleId?: string;
+    /** select this node id. */
+    selectId?: string;
+}
+/**
+ * Resolve a key press against the flattened, visible node list — the single source of truth for
+ * both render paths. Mirrors the WAI-ARIA tree pattern: Up/Down move by row, Right expands then
+ * descends, Left collapses then ascends to the parent, Home/End jump, Enter/Space select (and
+ * toggle a parent). Returns an empty action for unhandled keys or an unknown current id.
+ */
+declare function treeNav<T extends TreeLike<T>>(flat: readonly FlatNode<T>[], currentId: string | undefined, key: string): TreeNavAction;
+
+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;
 }
-declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
+/** Status row — indicator + name + trailing meta (`.uix-status-row`). */
+declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExpandToggle, type ExpandToggleProps, Field, type FieldProps, type FilterKind, type FilterOp, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, cx, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, useDialog, useTable, virtualWindow };
+export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, virtualWindow };

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { cx } from './cx.js';
 export { useDialog } from './hooks/useDialog.js';
 export { UseTableOptions, UseTableResult, useTable } from './hooks/useTable.js';
+export { UseAnchoredPositionOptions, useAnchoredPosition } from './hooks/useAnchoredPosition.js';
+export { Align, Placement, PositionOptions, PositionResult, Rect, Side, Size, computePosition } from './overlay-position.js';
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps } from './components/Button.js';
 export { Input, InputGroup, InputGroupProps, InputProps } from './components/Input.js';
 export { Textarea, TextareaProps } from './components/Textarea.js';
@@ -46,4 +48,6 @@ export { CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, Command
 export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxList, InboxListProps, InboxProps } from './components/Inbox.js';
 export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
 export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
+export { FlatNode, TreeLike, TreeNavAction, flattenTree, treeNav } from './tree-model.js';
+export { ContentList, ContentListItem, ContentListItemProps, ContentListProps, EventRow, EventRowProps, FeaturedRundown, FeaturedRundownItem, FeaturedRundownItemProps, FeaturedRundownProps, FeaturedStage, FeaturedStageProps, NewsLead, NewsLeadProps, NoticeQueue, NoticeQueueProps, PageIntro, PageIntroProps, ResourceGrid, ResourceGridProps, SectionHead, SectionHeadProps, StatLine, StatLineItem, StatLineProps, StatusRow, StatusRowProps } from './components/EditorialHome.js';
 import 'react';

package/dist/index.js

@@ -1,6 +1,8 @@
 import { cx } from "./cx.js";
 import { useDialog } from "./hooks/useDialog.js";
 import { useTable } from "./hooks/useTable.js";
+import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
+import { computePosition } from "./overlay-position.js";
 import { Button, ButtonGroup } from "./components/Button.js";
 import { Input, InputGroup } from "./components/Input.js";
 import { Textarea } from "./components/Textarea.js";
@@ -60,6 +62,22 @@ import { CommandPalette, CommandGroup, CommandItem } from "./components/CommandP
 import { Inbox, InboxList, InboxItem, InboxDetail } from "./components/Inbox.js";
 import { Kanban, KanbanColumn, KanbanCard } from "./components/Kanban.js";
 import { Tree } from "./components/Tree.js";
+import { flattenTree, treeNav } from "./tree-model.js";
+import {
+  PageIntro,
+  SectionHead,
+  NoticeQueue,
+  FeaturedStage,
+  FeaturedRundown,
+  FeaturedRundownItem,
+  NewsLead,
+  ContentList,
+  ContentListItem,
+  ResourceGrid,
+  StatLine,
+  EventRow,
+  StatusRow
+} from "./components/EditorialHome.js";
 export {
   Alert,
   AppShell,
@@ -79,13 +97,19 @@ export {
   Comments,
   Composer,
   ComposerBar,
+  ContentList,
+  ContentListItem,
   DescriptionItem,
   DescriptionList,
   DetailLayout,
   Drawer,
   EmptyState,
   ErrorState,
+  EventRow,
   ExpandToggle,
+  FeaturedRundown,
+  FeaturedRundownItem,
+  FeaturedStage,
   Field,
   Highlighted,
   Inbox,
@@ -107,8 +131,11 @@ export {
   NavFavourites,
   NavGroup,
   NavItem,
+  NewsLead,
   Note,
+  NoticeQueue,
   PageHeader,
+  PageIntro,
   Pagination,
   Peek,
   Popover,
@@ -116,8 +143,10 @@ export {
   Prose,
   Radio,
   RadioGroup,
+  ResourceGrid,
   RowAction,
   RowActions,
+  SectionHead,
   Segmented,
   SegmentedOption,
   Select,
@@ -127,7 +156,9 @@ export {
   Spinner,
   StarButton,
   Stat,
+  StatLine,
   StatusPill,
+  StatusRow,
   SubNavItem,
   Switch,
   Tab,
@@ -145,7 +176,11 @@ export {
   Tr,
   Tree,
   UserChip,
+  computePosition,
   cx,
+  flattenTree,
+  treeNav,
+  useAnchoredPosition,
   useDialog,
   useTable
 };

package/dist/overlay-position.d.ts

@@ -0,0 +1,59 @@
+/**
+ * uix overlay positioning — framework-agnostic, dependency-free anchored placement.
+ *
+ * Pure geometry (no DOM): given the anchor's rect, the floating element's size, and
+ * the viewport, compute where to put the floating element with two behaviours:
+ *   • flip  — if the preferred side doesn't fit, use the opposite side (or whichever
+ *             side has more room);
+ *   • shift — slide along the cross axis so the element stays within the viewport.
+ *
+ * The React hook (useAnchoredPosition) and the vanilla styleguide both feed this
+ * getBoundingClientRect() values, so anchored overlays land in the same place in every
+ * browser — instead of relying on CSS anchor() positioning, which is Chromium-only and
+ * silently detaches the overlay from its trigger everywhere else (UIX-FIX-02).
+ *
+ * Everything here is deterministic and unit-tested (see overlay-position.test.mjs).
+ */
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+type Placement = Side | `${Side}-${Align}`;
+/** A viewport-space rectangle, as returned by getBoundingClientRect(). */
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+interface PositionOptions {
+    /** Preferred placement. Default `'bottom-start'`; a bare side (e.g. `'top'`) centers on the cross axis. */
+    placement?: Placement;
+    /** Gap between the anchor and the floating element, in px. Default 6. */
+    offset?: number;
+    /** Minimum gap kept from each viewport edge when shifting, in px. Default 8. */
+    padding?: number;
+    /** Flip to the opposite side when the preferred one doesn't fit. Default true. */
+    flip?: boolean;
+    /** Slide along the cross axis to stay on-screen. Default true. */
+    shift?: boolean;
+}
+interface PositionResult {
+    /** Viewport-space left, for `position: fixed`. */
+    x: number;
+    /** Viewport-space top, for `position: fixed`. */
+    y: number;
+    /** The placement actually used (after any flip). */
+    placement: Placement;
+    side: Side;
+    align: Align;
+}
+/**
+ * Compute the floating element's viewport-space position anchored to `anchor`.
+ * Coordinates are for `position: fixed` (same space as getBoundingClientRect).
+ */
+declare function computePosition(anchor: Rect, floating: Size, viewport: Size, options?: PositionOptions): PositionResult;
+
+export { type Align, type Placement, type PositionOptions, type PositionResult, type Rect, type Side, type Size, computePosition };

package/dist/overlay-position.js

@@ -0,0 +1,62 @@
+const OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+function parsePlacement(p) {
+  const [side, align] = p.split("-");
+  return { side, align: align ?? "center" };
+}
+const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+function spaceOn(side, a, vp, offset) {
+  switch (side) {
+    case "top":
+      return a.y - offset;
+    case "bottom":
+      return vp.height - (a.y + a.height) - offset;
+    case "left":
+      return a.x - offset;
+    case "right":
+      return vp.width - (a.x + a.width) - offset;
+  }
+}
+function fitsOn(side, a, f, vp, offset, padding) {
+  const need = side === "top" || side === "bottom" ? f.height : f.width;
+  return spaceOn(side, a, vp, offset) >= need + padding;
+}
+function computePosition(anchor, floating, viewport, options = {}) {
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true } = options;
+  const { side: preferred, align } = parsePlacement(placement);
+  let side = preferred;
+  if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
+    const opp = OPPOSITE[side];
+    if (fitsOn(opp, anchor, floating, viewport, offset, padding) || spaceOn(opp, anchor, viewport, offset) > spaceOn(side, anchor, viewport, offset)) {
+      side = opp;
+    }
+  }
+  let x, y;
+  const horizontal = side === "top" || side === "bottom";
+  if (side === "top") y = anchor.y - floating.height - offset;
+  else if (side === "bottom") y = anchor.y + anchor.height + offset;
+  else if (side === "left") x = anchor.x - floating.width - offset;
+  else x = anchor.x + anchor.width + offset;
+  if (horizontal) {
+    const start = anchor.x;
+    const end = anchor.x + anchor.width - floating.width;
+    const center = anchor.x + (anchor.width - floating.width) / 2;
+    x = align === "start" ? start : align === "end" ? end : center;
+    if (shift) x = clamp(x, padding, Math.max(padding, viewport.width - floating.width - padding));
+  } else {
+    const start = anchor.y;
+    const end = anchor.y + anchor.height - floating.height;
+    const center = anchor.y + (anchor.height - floating.height) / 2;
+    y = align === "start" ? start : align === "end" ? end : center;
+    if (shift) y = clamp(y, padding, Math.max(padding, viewport.height - floating.height - padding));
+  }
+  return {
+    x,
+    y,
+    placement: align === "center" ? side : `${side}-${align}`,
+    side,
+    align
+  };
+}
+export {
+  computePosition
+};