@tensor_1/react 2.21.0 → 2.23.0

package/dist/components/Avatar.d.ts

@@ -4,7 +4,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     onlineLabel?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     src?: string;
     alt?: string;
     /** Initials / fallback shown when there is no `src`. */

package/dist/components/EditorIcons.d.ts

@@ -30,6 +30,7 @@ declare const PATHS: {
     readonly sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z";
     readonly richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5";
     readonly clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2";
+    readonly grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01";
 };
 type EditorIconName = keyof typeof PATHS;
 declare function EditorIcon({ name, ...props }: {

package/dist/components/EditorIcons.js

@@ -27,7 +27,8 @@ const PATHS = {
   redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13",
   sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
   richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
-  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2"
+  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
+  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
 };
 function EditorIcon({ name, ...props }) {
   return /* @__PURE__ */ jsx(

package/dist/components/TableControls.d.ts

@@ -55,14 +55,26 @@ interface SavedViewItem {
     active?: boolean;
     pinned?: boolean;
 }
-interface SavedViewMenuBaseProps {
+/** A titled group of saved views, e.g. the user's custom views above the built-in presets. */
+interface SavedViewSection {
+    id: string;
+    label: ReactNode;
     items: readonly SavedViewItem[];
+}
+interface SavedViewMenuBaseProps {
     onSelect: (id: string) => void;
     emptyLabel?: ReactNode;
+    /** The row's overflow slot (e.g. a ⋯ menu trigger). It stays quiet until the row is hovered or focused, or its menu is open. */
     actions?: (item: SavedViewItem) => ReactNode;
     footer?: ReactNode;
 }
 type SavedViewMenuProps = SavedViewMenuBaseProps & ({
+    items: readonly SavedViewItem[];
+    sections?: never;
+} | {
+    sections: readonly SavedViewSection[];
+    items?: never;
+}) & ({
     onPinChange: (id: string, pinned: boolean) => void;
     pinLabel: string;
     unpinLabel: string;
@@ -70,8 +82,24 @@ type SavedViewMenuProps = SavedViewMenuBaseProps & ({
     onPinChange?: undefined;
     pinLabel?: never;
     unpinLabel?: never;
+}) & ({
+    /**
+     * Adds a drag grip to every row. Rows move only within their own section; the
+     * callback receives that section's full id order (and its id when `sections` is used).
+     * The grip also moves its row with ArrowUp / ArrowDown.
+     */
+    onReorder: (orderedIds: string[], sectionId: string | undefined) => void;
+    /** Accessible name of the grip; the row's name is attached as its description. */
+    reorderLabel: string;
+} | {
+    onReorder?: undefined;
+    reorderLabel?: never;
 });
-/** Generic saved-view selector. Persistence, ownership and authorization remain application concerns. */
-declare function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }: SavedViewMenuProps): react.JSX.Element;
+/**
+ * Generic saved-view selector: optional titled sections inside one `.uix-menu`, rows of
+ * grip · name · overflow. The selected row is tinted as a whole (no check glyph). Persistence,
+ * ownership, permissions and labels remain application concerns.
+ */
+declare function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpinLabel, onReorder, reorderLabel, emptyLabel, actions, footer }: SavedViewMenuProps): react.JSX.Element;
 
-export { type FilterOption, FilterPopover, type FilterPopoverProps, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, ViewMenu, type ViewMenuColumn, type ViewMenuProps };
+export { type FilterOption, FilterPopover, type FilterPopoverProps, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, type SavedViewSection, ViewMenu, type ViewMenuColumn, type ViewMenuProps };

package/dist/components/TableControls.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
+import { EditorIcon } from "./EditorIcons.js";
 import { Input } from "./Input.js";
 import { Segmented, SegmentedOption } from "./Segmented.js";
 import { Switch } from "./Switch.js";
@@ -43,14 +44,103 @@ function FilterPopover({ label, type = "text", value, onValueChange, options, ap
     ] })
   ] });
 }
-function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }) {
-  return /* @__PURE__ */ jsxs("ul", { className: "uix-menu uix-saved-views", children: [
-    items.length === 0 && emptyLabel != null && /* @__PURE__ */ jsx("li", { className: "uix-menu__label", children: emptyLabel }),
-    items.map((item) => /* @__PURE__ */ jsxs("li", { className: "uix-saved-views__row", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-menu__item", "data-active": item.active || void 0, onClick: () => onSelect(item.id), children: item.label }),
-      onPinChange && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
-      actions?.(item)
-    ] }, item.id)),
+const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function placeId(ids, id, index) {
+  const from = ids.indexOf(id);
+  const to = Math.max(0, Math.min(index, ids.length - 1));
+  if (from < 0 || from === to) return ids;
+  const next = ids.filter((other) => other !== id);
+  next.splice(to, 0, id);
+  return next;
+}
+function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpinLabel, onReorder, reorderLabel, emptyLabel, actions, footer }) {
+  const baseId = useId();
+  const groups = sections ?? [{ id: void 0, items: items ?? [] }];
+  const [draft, setDraft] = useState(null);
+  const [dragging, setDragging] = useState(null);
+  const dragStart = useRef(null);
+  const orderKey = JSON.stringify(groups.map((group) => [group.id, group.items.map((item) => item.id)]));
+  useEffect(() => setDraft(null), [orderKey]);
+  const orderOf = (group) => draft && draft.group === group.id ? draft.ids : group.items.map((item) => item.id);
+  const move = (group, id, delta) => {
+    const current = orderOf(group);
+    const next = placeId(current, id, current.indexOf(id) + delta);
+    if (next === current) return;
+    setDraft({ group: group.id, ids: next });
+    onReorder?.([...next], group.id);
+  };
+  const dragOver = (event, group, id) => {
+    if (dragging !== id) return;
+    const rows = Array.from(event.currentTarget.closest("ul")?.querySelectorAll(":scope > .uix-saved-views__row") ?? []);
+    let index = rows.length - 1;
+    for (let i = 0; i < rows.length; i++) {
+      const box = rows[i].getBoundingClientRect();
+      if (event.clientY < box.top + box.height / 2) {
+        index = i;
+        break;
+      }
+    }
+    const current = orderOf(group);
+    const next = placeId(current, id, index);
+    if (next !== current) setDraft({ group: group.id, ids: next });
+  };
+  const drop = (group, id) => {
+    if (dragging !== id) return;
+    setDragging(null);
+    const start = dragStart.current;
+    dragStart.current = null;
+    const end = orderOf(group);
+    if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
+  };
+  const visible = groups.filter((group) => group.items.length > 0);
+  const renderRows = (group, groupIndex) => {
+    const byId = new Map(group.items.map((item) => [item.id, item]));
+    return orderOf(group).map((id, index) => {
+      const item = byId.get(id);
+      if (!item) return null;
+      const nameId = `${baseId}-${groupIndex}-${index}`;
+      const extra = actions?.(item);
+      return /* @__PURE__ */ jsxs("li", { className: "uix-saved-views__row", "data-active": item.active || void 0, "data-dragging": dragging === item.id || void 0, children: [
+        onReorder && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "uix-saved-views__grip",
+            "aria-label": reorderLabel,
+            "aria-describedby": nameId,
+            onPointerDown: (event) => {
+              if (event.button !== 0) return;
+              event.preventDefault();
+              event.currentTarget.setPointerCapture?.(event.pointerId);
+              dragStart.current = orderOf(group);
+              setDragging(item.id);
+            },
+            onPointerMove: (event) => dragOver(event, group, item.id),
+            onPointerUp: () => drop(group, item.id),
+            onPointerCancel: () => drop(group, item.id),
+            onKeyDown: (event) => {
+              if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+              event.preventDefault();
+              move(group, item.id, event.key === "ArrowUp" ? -1 : 1);
+            },
+            children: /* @__PURE__ */ jsx(EditorIcon, { name: "grip" })
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", id: nameId, className: "uix-menu__item", "data-active": item.active || void 0, "aria-current": item.active || void 0, title: typeof item.label === "string" ? item.label : void 0, onClick: () => onSelect(item.id), children: /* @__PURE__ */ jsx("span", { className: "uix-saved-views__name", children: item.label }) }),
+        onPinChange && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
+        extra != null && extra !== false && /* @__PURE__ */ jsx("span", { className: "uix-saved-views__actions", children: extra })
+      ] }, item.id);
+    });
+  };
+  return /* @__PURE__ */ jsxs("ul", { className: "uix-menu uix-saved-views", "data-dragging": dragging ? "" : void 0, children: [
+    visible.length === 0 && emptyLabel != null && /* @__PURE__ */ jsx("li", { className: "uix-menu__label", children: emptyLabel }),
+    sections ? visible.map((group, groupIndex) => {
+      const labelId = `${baseId}-section-${groupIndex}`;
+      return /* @__PURE__ */ jsxs("li", { className: "uix-saved-views__section", children: [
+        /* @__PURE__ */ jsx("div", { id: labelId, className: "uix-menu__label uix-saved-views__section-label", children: group.label }),
+        /* @__PURE__ */ jsx("ul", { className: "uix-saved-views__group", "aria-labelledby": labelId, children: renderRows(group, groupIndex) })
+      ] }, group.id);
+    }) : visible[0] && renderRows(visible[0], 0),
     footer != null && /* @__PURE__ */ jsx("li", { className: "uix-saved-views__footer", children: footer })
   ] });
 }

package/dist/emoji.cjs

@@ -664,7 +664,8 @@ var PATHS = {
   redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13",
   sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
   richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
-  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2"
+  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
+  grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
 };
 function EditorIcon({ name, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(