@tensor_1/react 2.3.0 → 2.4.0

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(src_exports, {
   ListItem: () => ListItem,
   LoadingState: () => LoadingState,
   Modal: () => Modal,
+  NavFavourites: () => NavFavourites,
   NavGroup: () => NavGroup,
   NavItem: () => NavItem,
   Note: () => Note,
@@ -66,6 +67,7 @@ __export(src_exports, {
   SidebarSection: () => SidebarSection,
   Skeleton: () => Skeleton,
   Spinner: () => Spinner,
+  StarButton: () => StarButton,
   Stat: () => Stat,
   StatusPill: () => StatusPill,
   SubNavItem: () => SubNavItem,
@@ -541,22 +543,411 @@ function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }) });
 }
 
-// src/components/Alert.tsx
+// src/components/StarButton.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+var StarGlyph = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M11.5 2.7a.6.6 0 0 1 1 0l2.4 5 5.4.8a.6.6 0 0 1 .3 1l-3.9 3.8.9 5.4a.6.6 0 0 1-.8.6L12 17l-4.8 2.5a.6.6 0 0 1-.8-.6l.9-5.4L3.4 9.5a.6.6 0 0 1 .3-1l5.4-.8z" })
+  }
+);
+function StarButton({
+  pinned,
+  label,
+  addLabel = "Add {label} to favourites",
+  onToggle,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cx("uix-navitem__star", className),
+      "data-on": pinned || void 0,
+      "aria-pressed": pinned,
+      "aria-label": addLabel.replace("{label}", label),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onToggle(!pinned);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StarGlyph, {})
+    }
+  );
+}
+
+// src/components/NavFavourites.tsx
+var import_react12 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    style: { flexShrink: 0 },
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    style: { flexShrink: 0 },
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+var MoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "12", cy: "19", r: "1" })
+    ]
+  }
+);
+var MUTED = "color-mix(in srgb, var(--uix-text) 50%, transparent)";
+function NavFavourites({
+  items,
+  collapsed = false,
+  onToggleCollapsed,
+  onRemove,
+  onReorder,
+  labels,
+  emptyReason,
+  className
+}) {
+  const regionId = (0, import_react12.useId)();
+  const headerRef = (0, import_react12.useRef)(null);
+  const regionRef = (0, import_react12.useRef)(null);
+  const focusAfterRef = (0, import_react12.useRef)(null);
+  const triggerRefs = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
+  const order = items.map((i) => i.id);
+  (0, import_react12.useEffect)(() => {
+    const id = focusAfterRef.current;
+    if (!id) return;
+    focusAfterRef.current = null;
+    const el = triggerRefs.current.get(id);
+    if (el) el.focus();
+    else headerRef.current?.focus();
+  }, [order.join("|")]);
+  const handleToggle = () => {
+    if (!collapsed) {
+      const active = document.activeElement;
+      if (active && regionRef.current?.contains(active) && active !== headerRef.current) {
+        headerRef.current?.focus();
+      }
+    }
+    onToggleCollapsed?.();
+  };
+  const move = (id, dir) => {
+    const idx = order.indexOf(id);
+    const next = idx + dir;
+    if (idx < 0 || next < 0 || next >= order.length) return;
+    const reordered = [...order];
+    const [it] = reordered.splice(idx, 1);
+    if (it === void 0) return;
+    reordered.splice(next, 0, it);
+    focusAfterRef.current = id;
+    onReorder(reordered);
+  };
+  const remove = (id) => {
+    const idx = order.indexOf(id);
+    const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
+    focusAfterRef.current = neighbour;
+    onRemove(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx("uix-favourites", className), style: { marginBottom: "var(--uix-space-1)" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        ref: headerRef,
+        type: "button",
+        "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"
+        },
+        children: [
+          collapsed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDownIcon, {}),
+          labels.heading
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "ul",
+      {
+        ref: regionRef,
+        id: regionId,
+        hidden: collapsed,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "1px",
+          listStyle: "none",
+          margin: 0,
+          padding: 0
+        },
+        children: items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "li",
+          {
+            className: "uix-text-meta",
+            "data-empty-reason": emptyReason,
+            style: { padding: "6px 8px", color: MUTED },
+            children: labels.empty
+          }
+        ) : items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          FavouriteRow,
+          {
+            item,
+            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)
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+function FavouriteRow({
+  item,
+  isFirst,
+  isLast,
+  labels,
+  onMoveUp,
+  onMoveDown,
+  onRemove,
+  registerTrigger
+}) {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [revealed, setRevealed] = (0, import_react12.useState)(false);
+  const menuId = (0, import_react12.useId)();
+  const triggerRef = (0, import_react12.useRef)(null);
+  const itemRefs = (0, import_react12.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 }
+  ];
+  (0, import_react12.useEffect)(() => {
+    if (open) itemRefs.current[0]?.focus();
+  }, [open]);
+  const closeAndReturnFocus = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const onMenuKeyDown = (e) => {
+    const menuItems = itemRefs.current.filter((x) => x !== null);
+    const currentIdx = menuItems.findIndex((el) => el === document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      menuItems[(currentIdx + 1) % menuItems.length]?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      menuItems[(currentIdx - 1 + menuItems.length) % menuItems.length]?.focus();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      closeAndReturnFocus();
+    } else if (e.key === "Tab") {
+      setOpen(false);
+    }
+  };
+  const onRowKeyDown = (e) => {
+    if (!e.altKey) return;
+    if (e.key === "ArrowUp" && !isFirst) {
+      e.preventDefault();
+      onMoveUp();
+    } else if (e.key === "ArrowDown" && !isLast) {
+      e.preventDefault();
+      onMoveDown();
+    }
+  };
+  const triggerVisible = revealed || open;
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "li",
+      {
+        style: { position: "relative", display: "flex", alignItems: "center" },
+        onKeyDown: onRowKeyDown,
+        onMouseEnter: () => setRevealed(true),
+        onMouseLeave: () => setRevealed(false),
+        onFocus: () => setRevealed(true),
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setRevealed(false);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { minWidth: 0, flex: 1 }, children: item.link }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "button",
+            {
+              ref: (el) => {
+                triggerRef.current = el;
+                registerTrigger(el);
+              },
+              type: "button",
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              "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)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MoreIcon, {})
+            }
+          ),
+          open ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                role: "presentation",
+                onClick: () => setOpen(false),
+                style: { position: "fixed", inset: 0, cursor: "default", background: "transparent", zIndex: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "ul",
+              {
+                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)"
+                },
+                children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  "button",
+                  {
+                    ref: (el) => {
+                      itemRefs.current[i] = el;
+                    },
+                    type: "button",
+                    role: "menuitem",
+                    tabIndex: -1,
+                    onClick: () => {
+                      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";
+                    },
+                    children: action.label
+                  }
+                ) }, action.label))
+              }
+            )
+          ] }) : null
+        ]
+      }
+    )
+  );
+}
+
+// src/components/Alert.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__title", children: title }),
-      children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__title", children: title }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__body", children })
     ] })
   ] });
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Spinner({ size = "md", accent, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
@@ -568,9 +959,9 @@ function Spinner({ size = "md", accent, className, ...props }) {
 }
 
 // src/components/Toast.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
@@ -579,24 +970,24 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
       "aria-live": "polite",
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "uix-toast__body", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__title", children: title }),
-          message && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__msg", children: message })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "uix-toast__body", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__title", children: title }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
       ]
     }
   );
 }
 function Toaster({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
 }
 
 // src/components/Table.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function TableWrap({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx("uix-table-wrap", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cx("uix-table-wrap", className), ...props, children });
 }
 function Table({
   density = "standard",
@@ -608,7 +999,7 @@ function Table({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "table",
     {
       className: cx("uix-table", !zebra && "uix-table--no-zebra", pinnedCol && "uix-table--pinned-col", className),
@@ -621,7 +1012,7 @@ function Table({
   );
 }
 function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "th",
     {
       className,
@@ -634,10 +1025,10 @@ function Th({ sortable, sortDirection, onSort, className, children, onClick, ...
   );
 }
 function Td({ pinned, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
 }
 function Tr({ selected, pinned, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "tr",
     {
       className,
@@ -650,7 +1041,7 @@ function Tr({ selected, pinned, className, children, ...props }) {
 }
 
 // src/components/Pagination.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function getPageNumbers(page, total) {
   if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
   const pages = [1];
@@ -664,8 +1055,8 @@ function getPageNumbers(page, total) {
 }
 function Pagination({ page, pageCount, onChange, className, ...props }) {
   const pages = getPageNumbers(page, pageCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         className: "uix-pagination__btn",
@@ -676,7 +1067,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
       }
     ),
     pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           className: "uix-pagination__btn",
@@ -687,7 +1078,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
         p
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         className: "uix-pagination__btn",
@@ -701,15 +1092,15 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
 }
 
 // src/components/StatusPill.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function StatusPill({ tone = "neutral", treatment = "filled", dot, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "span",
     {
       className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", className),
       ...props,
       children: [
-        dot && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
+        dot && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
         children
       ]
     }
@@ -717,10 +1108,10 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
 }
 
 // src/components/Progress.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
   const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       role: "progressbar",
@@ -729,54 +1120,54 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
       "aria-valuenow": indeterminate ? void 0 : value,
       className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
     }
   );
 }
 
 // src/components/Stat.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Stat({ label, value, icon, meta, trend, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uix-stat__label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uix-stat__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: label }),
       icon
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "uix-stat__value", children: value }),
-    (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-stat__value", children: value }),
+    (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uix-stat__meta", children: [
+      trend != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
       meta
     ] })
   ] });
 }
 
 // src/components/Tooltip.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Tooltip({ label, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "data-uix-tip": label, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "data-uix-tip": label, ...props, children });
 }
 
 // src/components/States.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function EmptyState({ icon, title, children, action, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__icon", children: icon }),
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__title", children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__icon", children: icon }),
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__title", children: title }),
     children,
     action
   ] });
 }
 function ErrorState({ icon, title, detail, action, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__title", children: title }),
-    detail != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: detail }),
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-empty__title", children: title }),
+    detail != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: detail }),
     action
   ] });
 }
 function Skeleton({ variant = "block", width, height, className, style, ...props }) {
   const dims = { width, height, ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: cx(
@@ -791,52 +1182,52 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
   );
 }
 function LoadingState({ rows = 3, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
 }
 
 // src/components/Label.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Label({ color, dot, children, className, style, ...props }) {
   const merged = color ? { "--label-color": color, ...style } : style;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
     children
   ] });
 }
 
 // src/components/Avatar.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
-    src ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-avatar__status" })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
+    src ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src, alt: alt ?? "" }) : children,
+    status && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-avatar__status" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
 }
 function UserChip({ avatar, name, sub, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
     avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
-      name != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-user-chip__name", children: name }),
-      sub != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+      name != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-user-chip__name", children: name }),
+      sub != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
     ] }),
     children
   ] });
 }
 
 // src/components/Comments.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
-    avatar ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-comment__body", children: [
-      (author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-comment__meta", children: [
-        author != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-comment__author", children: author }),
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
+    avatar ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "uix-comment__body", children: [
+      (author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "uix-comment__meta", children: [
+        author != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-comment__author", children: author }),
         author != null && meta != null ? " \xB7 " : null,
         meta
       ] }),
@@ -846,95 +1237,95 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
 }
 
 // src/components/Timeline.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "uix-timeline__rail", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-timeline__node" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-timeline__line" })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-timeline__rail", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-timeline__node" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-timeline__line" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "uix-timeline__body", children: [
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uix-timeline__meta", children: meta }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "uix-timeline__body", children: [
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "uix-timeline__meta", children: meta }),
       children
     ] })
   ] });
 }
 
 // src/components/Prose.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Prose({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("uix-prose", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-prose", className), ...props, children });
 }
 function Note({ tone, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uix-note__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uix-note__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-note__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-note__body", children })
   ] });
 }
 
 // src/components/Popover.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Popover({ popover = "auto", children, className, ...props }) {
   const popoverAttr = { popover };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 
 // src/components/CommandPalette.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function CommandPalette({ inputProps, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-cmdk__list", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-cmdk__list", children })
   ] });
 }
 function CommandGroup({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-cmdk__group", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-cmdk__group", children: label }),
     children
   ] });
 }
 function CommandItem({ icon, shortcut, active, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
     icon,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children }),
     shortcut
   ] });
 }
 
 // src/components/Kanban.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Kanban({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uix-kanban__head", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
+    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "uix-kanban__head", children: [
       title,
-      count != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "uix-kanban__count", children: count })
+      count != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__body", children })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-kanban__body", children })
   ] });
 }
 function KanbanCard({ title, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__card-title", children: title }),
-    meta && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-kanban__card-title", children: title }),
+    meta && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
     children
   ] });
 }
 
 // src/components/Tree.tsx
-var import_react12 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var import_react13 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "button",
       {
         className: "uix-tree__row",
@@ -945,13 +1336,13 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
           onSelect?.(node.id);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronIcon2, {}) }),
-          node.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": "true", children: node.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronIcon2, {}) }),
+          node.icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", children: node.icon }),
           node.label
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       TreeNode,
       {
         node: child,
@@ -966,7 +1357,7 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   ] });
 }
 function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react12.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = (0, import_react13.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
   function handleToggle(id) {
     if (!controlledExpanded) {
@@ -979,7 +1370,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
     }
     onToggle?.(id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     TreeNode,
     {
       node,
@@ -1023,6 +1414,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   ListItem,
   LoadingState,
   Modal,
+  NavFavourites,
   NavGroup,
   NavItem,
   Note,
@@ -1039,6 +1431,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   SidebarSection,
   Skeleton,
   Spinner,
+  StarButton,
   Stat,
   StatusPill,
   SubNavItem,