@tensor_1/react 2.11.0 → 2.12.0

package/dist/components/ChartCore.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "../cx.js";
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function ChartCore({
+  engine,
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  const appliedOptionRef = useRef(null);
+  const latestOptionRef = useRef(option);
+  const onReadyRef = useRef(onReady);
+  const tableId = useId();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      chart.dispose();
+      chartRef.current = null;
+      appliedOptionRef.current = null;
+    };
+  }, [engine]);
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
+  }, [option]);
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ jsxs("div", { children: [
+      header,
+      title ? /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightValue },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
+  ] });
+}
+export {
+  ChartCore,
+  uixChartPalette
+};

package/dist/components/Inbox.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Inbox({ children, className, ...props }) {

package/dist/components/Meter.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Meter({ value = 0, tone, className, ...props }) {

package/dist/components/NavFavourites.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const ChevronDownIcon = () => /* @__PURE__ */ jsx(
   "svg",
@@ -14,7 +14,7 @@ const ChevronDownIcon = () => /* @__PURE__ */ jsx(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    style: { flexShrink: 0 },
+    className: "uix-favourites__chevron",
     children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
   }
 );
@@ -30,7 +30,7 @@ const ChevronRightIcon = () => /* @__PURE__ */ jsx(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    style: { flexShrink: 0 },
+    className: "uix-favourites__chevron",
     children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
   }
 );
@@ -53,7 +53,6 @@ const MoreIcon = () => /* @__PURE__ */ jsxs(
     ]
   }
 );
-const MUTED = "color-mix(in srgb, var(--uix-text) 50%, transparent)";
 function NavFavourites({
   items,
   collapsed = false,
@@ -69,7 +68,7 @@ function NavFavourites({
   const regionRef = useRef(null);
   const focusAfterRef = useRef(null);
   const triggerRefs = useRef(/* @__PURE__ */ new Map());
-  const order = items.map((i) => i.id);
+  const order = useMemo(() => items.map((item) => item.id), [items]);
   useEffect(() => {
     const id = focusAfterRef.current;
     if (!id) return;
@@ -77,7 +76,7 @@ function NavFavourites({
     const el = triggerRefs.current.get(id);
     if (el) el.focus();
     else headerRef.current?.focus();
-  }, [order.join("|")]);
+  }, [order]);
   const handleToggle = () => {
     if (!collapsed) {
       const active = document.activeElement;
@@ -87,7 +86,7 @@ function NavFavourites({
     }
     onToggleCollapsed?.();
   };
-  const move = (id, dir) => {
+  const move = useCallback((id, dir) => {
     const idx = order.indexOf(id);
     const next = idx + dir;
     if (idx < 0 || next < 0 || next >= order.length) return;
@@ -97,14 +96,18 @@ function NavFavourites({
     reordered.splice(next, 0, it);
     focusAfterRef.current = id;
     onReorder(reordered);
-  };
-  const remove = (id) => {
+  }, [onReorder, order]);
+  const remove = useCallback((id) => {
     const idx = order.indexOf(id);
     const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
     focusAfterRef.current = neighbour;
     onRemove(id);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-favourites", className), style: { marginBottom: "var(--uix-space-1)" }, children: [
+  }, [onRemove, order]);
+  const registerTrigger = useCallback((id, element) => {
+    if (element) triggerRefs.current.set(id, element);
+    else triggerRefs.current.delete(id);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-favourites", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -113,18 +116,7 @@ function NavFavourites({
         "aria-expanded": !collapsed,
         "aria-controls": regionId,
         onClick: handleToggle,
-        className: "uix-text-eyebrow",
-        style: {
-          display: "flex",
-          width: "100%",
-          alignItems: "center",
-          gap: "6px",
-          padding: "8px 4px 4px",
-          border: 0,
-          background: "transparent",
-          cursor: "pointer",
-          color: "inherit"
-        },
+        className: "uix-favourites__heading uix-text-eyebrow",
         children: [
           collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
           labels.heading
@@ -137,20 +129,12 @@ function NavFavourites({
         ref: regionRef,
         id: regionId,
         hidden: collapsed,
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "1px",
-          listStyle: "none",
-          margin: 0,
-          padding: 0
-        },
+        className: "uix-favourites__list",
         children: items.length === 0 ? /* @__PURE__ */ jsx(
           "li",
           {
-            className: "uix-text-meta",
+            className: "uix-favourites__empty uix-text-meta",
             "data-empty-reason": emptyReason,
-            style: { padding: "6px 8px", color: MUTED },
             children: labels.empty
           }
         ) : items.map((item, idx) => /* @__PURE__ */ jsx(
@@ -160,10 +144,9 @@ function NavFavourites({
             isFirst: idx === 0,
             isLast: idx === items.length - 1,
             labels,
-            onMoveUp: () => move(item.id, -1),
-            onMoveDown: () => move(item.id, 1),
-            onRemove: () => remove(item.id),
-            registerTrigger: (el) => triggerRefs.current.set(item.id, el)
+            onMove: move,
+            onRemove: remove,
+            registerTrigger
           },
           item.id
         ))
@@ -171,26 +154,24 @@ function NavFavourites({
     )
   ] });
 }
-function FavouriteRow({
+const FavouriteRow = memo(function FavouriteRow2({
   item,
   isFirst,
   isLast,
   labels,
-  onMoveUp,
-  onMoveDown,
+  onMove,
   onRemove,
   registerTrigger
 }) {
   const [open, setOpen] = useState(false);
-  const [revealed, setRevealed] = useState(false);
   const menuId = useId();
   const triggerRef = useRef(null);
   const itemRefs = useRef([]);
   const optionsTemplate = labels.options ?? "{label} favourite options";
   const actions = [
-    ...isFirst ? [] : [{ label: labels.moveUp, onSelect: onMoveUp }],
-    ...isLast ? [] : [{ label: labels.moveDown, onSelect: onMoveDown }],
-    { label: labels.remove.replace("{label}", item.label), onSelect: onRemove }
+    ...isFirst ? [] : [{ label: labels.moveUp, onSelect: () => onMove(item.id, -1) }],
+    ...isLast ? [] : [{ label: labels.moveDown, onSelect: () => onMove(item.id, 1) }],
+    { label: labels.remove.replace("{label}", item.label), onSelect: () => onRemove(item.id) }
   ];
   useEffect(() => {
     if (open) itemRefs.current[0]?.focus();
@@ -219,34 +200,27 @@ function FavouriteRow({
     if (!e.altKey) return;
     if (e.key === "ArrowUp" && !isFirst) {
       e.preventDefault();
-      onMoveUp();
+      onMove(item.id, -1);
     } else if (e.key === "ArrowDown" && !isLast) {
       e.preventDefault();
-      onMoveDown();
+      onMove(item.id, 1);
     }
   };
-  const triggerVisible = revealed || open;
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
     /* @__PURE__ */ jsxs(
       "li",
       {
-        style: { position: "relative", display: "flex", alignItems: "center" },
+        className: "uix-favourites__row",
         onKeyDown: onRowKeyDown,
-        onMouseEnter: () => setRevealed(true),
-        onMouseLeave: () => setRevealed(false),
-        onFocus: () => setRevealed(true),
-        onBlur: (e) => {
-          if (!e.currentTarget.contains(e.relatedTarget)) setRevealed(false);
-        },
         children: [
-          /* @__PURE__ */ jsx("div", { style: { minWidth: 0, flex: 1 }, children: item.link }),
+          /* @__PURE__ */ jsx("div", { className: "uix-favourites__link", children: item.link }),
           /* @__PURE__ */ jsx(
             "button",
             {
               ref: (el) => {
                 triggerRef.current = el;
-                registerTrigger(el);
+                registerTrigger(item.id, el);
               },
               type: "button",
               "aria-haspopup": "menu",
@@ -254,22 +228,7 @@ function FavouriteRow({
               "aria-controls": open ? menuId : void 0,
               "aria-label": optionsTemplate.replace("{label}", item.label),
               onClick: () => setOpen((v) => !v),
-              style: {
-                marginLeft: "auto",
-                display: "inline-flex",
-                height: "20px",
-                width: "20px",
-                flexShrink: 0,
-                alignItems: "center",
-                justifyContent: "center",
-                border: 0,
-                borderRadius: "2px",
-                background: "transparent",
-                cursor: "pointer",
-                color: MUTED,
-                opacity: triggerVisible ? 1 : 0,
-                transition: "opacity var(--uix-dur-fast) var(--uix-ease-out)"
-              },
+              className: "uix-favourites__menu-trigger",
               children: /* @__PURE__ */ jsx(MoreIcon, {})
             }
           ),
@@ -280,7 +239,7 @@ function FavouriteRow({
                 "aria-hidden": "true",
                 role: "presentation",
                 onClick: () => setOpen(false),
-                style: { position: "fixed", inset: 0, cursor: "default", background: "transparent", zIndex: 40 }
+                className: "uix-favourites__backdrop"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -289,21 +248,7 @@ function FavouriteRow({
                 id: menuId,
                 role: "menu",
                 onKeyDown: onMenuKeyDown,
-                style: {
-                  position: "absolute",
-                  right: 0,
-                  top: "calc(100% + 2px)",
-                  zIndex: 50,
-                  minWidth: "160px",
-                  overflow: "hidden",
-                  margin: 0,
-                  padding: "4px 0",
-                  listStyle: "none",
-                  borderRadius: "6px",
-                  border: "1px solid var(--uix-border)",
-                  background: "var(--uix-surface)",
-                  boxShadow: "var(--uix-shadow-popover)"
-                },
+                className: "uix-favourites__menu",
                 children: actions.map((action, i) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -317,25 +262,7 @@ function FavouriteRow({
                       setOpen(false);
                       action.onSelect();
                     },
-                    style: {
-                      display: "flex",
-                      width: "100%",
-                      alignItems: "center",
-                      padding: "6px 12px",
-                      border: 0,
-                      background: "transparent",
-                      cursor: "pointer",
-                      textAlign: "left",
-                      fontSize: "13px",
-                      color: "color-mix(in srgb, var(--uix-text) 85%, transparent)",
-                      transition: "background-color var(--uix-dur-fast) var(--uix-ease-out)"
-                    },
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.background = "var(--uix-bg-hover)";
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.background = "transparent";
-                    },
+                    className: "uix-favourites__menu-item",
                     children: action.label
                   }
                 ) }, action.label))
@@ -346,7 +273,7 @@ function FavouriteRow({
       }
     )
   );
-}
+});
 export {
   NavFavourites
 };

package/dist/components/Segmented.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } 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 }) });
+  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ jsx(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
 }
 function SegmentedOption({
   value,

package/dist/components/Table.d.ts

@@ -4,7 +4,7 @@ import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, TdHTMLAttributes, Tabl
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-declare function TableWrap({ children, className, ...props }: TableWrapProps): react.JSX.Element;
+declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.RefAttributes<HTMLDivElement>>;
 type TableDensity = 'compact' | 'standard' | 'comfortable';
 type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {

package/dist/components/Table.js

@@ -1,9 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 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 });
-}
+const TableWrap = forwardRef(function TableWrap2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
+});
 function Table({
   density = "standard",
   zebra = true,

package/dist/components/Tabs.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { cx } from "../cx.js";
 const TabsCtx = createContext({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  return /* @__PURE__ */ jsx(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
+  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ jsx(TabsCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
   const ctx = useContext(TabsCtx);

package/dist/hooks/useTable.js

@@ -19,18 +19,22 @@ function useTable(data, options = {}) {
   const [query, setQuery] = useState(() => options.initialQuery ?? "");
   const [selected, setSelected] = useState(() => /* @__PURE__ */ new Set());
   const [pinned, setPinned] = useState(() => new Set(options.initialPinned ?? []));
-  const rows = useMemo(() => {
-    const filtered = applyFilters(data, filters);
-    const searched = searchRows(filtered, query, searchFields);
-    const sorted = multiSort(searched, sort);
-    return mergePinned(data, sorted, pinned, idField);
-  }, [data, filters, query, searchFields, sort, pinned, idField]);
+  const visibleRows = useMemo(() => {
+    const filtered = filters.length ? applyFilters(data, filters) : data;
+    const searched = query.trim() ? searchRows(filtered, query, searchFields) : filtered;
+    return sort.length ? multiSort(searched, sort) : searched;
+  }, [data, filters, query, searchFields, sort]);
+  const rows = useMemo(
+    () => pinned.size ? mergePinned(data, visibleRows, pinned, idField) : visibleRows.slice(),
+    [data, visibleRows, pinned, idField]
+  );
   const pageIds = useMemo(() => rows.map((r) => String(r[idField])), [rows, idField]);
   const selectAll = selectAllState(selected, pageIds);
   const doToggleSort = useCallback((field, additive = false) => {
     setSort((keys) => toggleSort(keys, field, additive));
   }, []);
   const toggleRow = useCallback((id) => setSelected((s) => toggleId(s, id)), []);
+  const isSelected = useCallback((id) => selected.has(id), [selected]);
   const toggleAllRows = useCallback(() => setSelected((s) => togglePage(s, pageIds)), [pageIds]);
   const clearSelection = useCallback(() => setSelected(/* @__PURE__ */ new Set()), []);
   const togglePin = useCallback((id) => setPinned((s) => toggleId(s, id)), []);
@@ -54,7 +58,7 @@ function useTable(data, options = {}) {
     setSort,
     setFilters,
     setQuery,
-    isSelected: (id) => selected.has(id),
+    isSelected,
     toggleRow,
     toggleAllRows,
     clearSelection,

package/dist/hooks/useVirtualRows.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+
+interface UseVirtualRowsOptions {
+    /** Fixed rendered row height in pixels. */
+    rowHeight: number;
+    /** Rows rendered beyond each viewport edge. Default: 6. */
+    overscan?: number;
+    /** Render all rows at or below this count. Default: 100. */
+    threshold?: number;
+}
+interface UseVirtualRowsResult<T> {
+    /** Attach to the scrolling TableWrap. */
+    containerRef: RefObject<HTMLDivElement>;
+    rows: readonly T[];
+    startIndex: number;
+    padTop: number;
+    padBottom: number;
+    totalHeight: number;
+    virtualized: boolean;
+}
+/**
+ * Owns scroll/resize observation and exposes the small visible row window.
+ * Consumers render padTop/padBottom spacer rows inside their existing tbody.
+ */
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+
+export { type UseVirtualRowsOptions, type UseVirtualRowsResult, useVirtualRows };

package/dist/hooks/useVirtualRows.js

@@ -0,0 +1,50 @@
+"use client";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { shouldVirtualize, virtualWindow } from "../table-engine.js";
+function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100 }) {
+  const containerRef = useRef(null);
+  const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 });
+  useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    let frame = 0;
+    const commitMeasurement = () => {
+      const next = { scrollTop: element.scrollTop, height: element.clientHeight };
+      setViewport((current) => current.scrollTop === next.scrollTop && current.height === next.height ? current : next);
+    };
+    const measure = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        commitMeasurement();
+      });
+    };
+    commitMeasurement();
+    element.addEventListener("scroll", measure, { passive: true });
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => {
+      element.removeEventListener("scroll", measure);
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+  const enabled = viewport.height > 0 && shouldVirtualize(rows.length, threshold);
+  const window = useMemo(
+    () => enabled ? virtualWindow(viewport.scrollTop, viewport.height, rowHeight, rows.length, overscan) : { start: 0, end: rows.length, padTop: 0, padBottom: 0, total: rows.length * rowHeight },
+    [enabled, overscan, rowHeight, rows.length, viewport.height, viewport.scrollTop]
+  );
+  const visibleRows = useMemo(() => rows.slice(window.start, window.end), [rows, window.start, window.end]);
+  return {
+    containerRef,
+    rows: visibleRows,
+    startIndex: window.start,
+    padTop: window.padTop,
+    padBottom: window.padBottom,
+    totalHeight: window.total,
+    virtualized: enabled
+  };
+}
+export {
+  useVirtualRows
+};