@hanzo/ui 8.0.25 → 8.0.27

package/dist/product/index.cjs

@@ -4,7 +4,8 @@
 var chunkARV3P4CE_cjs = require('../chunk-ARV3P4CE.cjs');
 var chunkONVERVFG_cjs = require('../chunk-ONVERVFG.cjs');
 var chunkMWBFAV3D_cjs = require('../chunk-MWBFAV3D.cjs');
-var chunkGWNNLYX4_cjs = require('../chunk-GWNNLYX4.cjs');
+var chunkNQUA5YRQ_cjs = require('../chunk-NQUA5YRQ.cjs');
+var chunkDC52DQ27_cjs = require('../chunk-DC52DQ27.cjs');
 var chunkWHJR5S4L_cjs = require('../chunk-WHJR5S4L.cjs');
 var chunk7XDEUEWI_cjs = require('../chunk-7XDEUEWI.cjs');
 var react = require('react');
@@ -14,6 +15,7 @@ var lucideIcons2 = require('@hanzogui/lucide-icons-2');
 var products = require('@hanzo/products');
 var react$1 = require('@hanzo/logo/react');
 var reactDom = require('react-dom');
+var data = require('@hanzo/data');
 
 var CHART_PALETTE = [
   "#7c5cff",
@@ -523,6 +525,259 @@ function filterOptions(options, query) {
 function isKnownOption(options, value) {
   return options.some((o) => o.value === value);
 }
+var ITEM_MIN_HEIGHT = 30;
+var ITEM_RADIUS = 7;
+var ITEM_PX = 8;
+var ITEM_GAP = 8;
+var ICON_SLOT = 16;
+var PANEL_RADIUS = 12;
+var PANEL_PAD = 4;
+var PANEL_GAP = 2;
+var SEP_MARGIN = 4;
+var FONT_LABEL = 13;
+var FONT_MUTED = 11;
+var FONT_SHORTCUT = 12;
+var ACCENT2 = "var(--hanzo-accent, #8b5cf6)";
+var ACCENT_SOFT = "var(--hanzo-accent-soft, rgba(139,92,246,0.16))";
+var DANGER = "var(--hanzo-danger, #ef4444)";
+function MenuPanel({
+  children,
+  minWidth = 200,
+  maxHeight = 360,
+  onKeyDown,
+  panelRef,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.YStack,
+    {
+      ref: panelRef,
+      role: "menu",
+      bg: "$color2",
+      borderColor: "$borderColor",
+      borderWidth: 1,
+      rounded: PANEL_RADIUS,
+      p: PANEL_PAD,
+      gap: PANEL_GAP,
+      minW: minWidth,
+      maxH: maxHeight,
+      overflow: "scroll",
+      shadowColor: "rgba(0,0,0,0.45)",
+      shadowRadius: 20,
+      shadowOffset: { width: 0, height: 10 },
+      onKeyDown,
+      ...rest,
+      children
+    }
+  );
+}
+function MenuItemView({
+  icon,
+  label,
+  description,
+  shortcut,
+  selected = false,
+  disabled = false,
+  destructive = false,
+  hasSubmenu = false,
+  onSelect
+}) {
+  const track = chunk7XDEUEWI_cjs.useEmit();
+  const choose = () => {
+    track({ component: "MenuItem", action: "select", id: chunk7XDEUEWI_cjs.labelOf(label), value: selected });
+    onSelect();
+  };
+  const press = () => {
+    if (!disabled) choose();
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      choose();
+    }
+  };
+  const labelColor = destructive ? DANGER : "$color12";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    gui.XStack,
+    {
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      items: "center",
+      gap: ITEM_GAP,
+      px: ITEM_PX,
+      minH: ITEM_MIN_HEIGHT,
+      rounded: ITEM_RADIUS,
+      cursor: disabled ? "default" : "pointer",
+      opacity: disabled ? 0.4 : 1,
+      select: "none",
+      style: { outline: "none" },
+      hoverStyle: disabled ? {} : { bg: ACCENT_SOFT },
+      pressStyle: disabled ? {} : { bg: ACCENT_SOFT },
+      focusStyle: disabled ? {} : { bg: ACCENT_SOFT },
+      onPress: press,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { width: ICON_SLOT, height: ICON_SLOT, items: "center", justify: "center", shrink: 0, children: icon ? /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { items: "center", justify: "center", opacity: destructive ? 1 : 0.9, style: destructive ? { color: DANGER } : void 0, children: icon }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { flex: 1, minW: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: FONT_LABEL, lineHeight: 18, color: labelColor, numberOfLines: 1, children: label }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: FONT_MUTED, lineHeight: 14, color: "$color11", numberOfLines: 1, children: description }) : null
+        ] }),
+        shortcut ? /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: FONT_SHORTCUT, color: "$color11", shrink: 0, children: shortcut }) : null,
+        selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.Check, { size: 14, color: ACCENT2 }) : null,
+        hasSubmenu ? /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ChevronRight, { size: 14, color: "var(--hanzo-muted, currentColor)", opacity: 0.6 }) : null
+      ]
+    }
+  );
+}
+function MenuSeparatorView() {
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { height: 1, bg: "$borderColor", my: SEP_MARGIN, mx: SEP_MARGIN, role: "separator" });
+}
+function MenuLabelView({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Text,
+    {
+      fontSize: FONT_MUTED,
+      color: "$color11",
+      px: ITEM_PX,
+      py: SEP_MARGIN,
+      textTransform: "uppercase",
+      letterSpacing: 0.4,
+      select: "none",
+      children
+    }
+  );
+}
+function renderMenuItems(items, close) {
+  return items.map((it, i) => {
+    if (it.type === "separator") return /* @__PURE__ */ jsxRuntime.jsx(MenuSeparatorView, {}, it.key ?? `sep-${i}`);
+    if (it.type === "label") return /* @__PURE__ */ jsxRuntime.jsx(MenuLabelView, { children: it.label }, it.key ?? `lbl-${i}`);
+    const { key, onSelect, closeOnSelect = true, ...rest } = it;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItemView,
+      {
+        ...rest,
+        onSelect: () => {
+          onSelect();
+          if (closeOnSelect) close?.();
+        }
+      },
+      key
+    );
+  });
+}
+
+// src/product/menu/roving.ts
+function menuKeyDown(e, onClose) {
+  if (e.key === "Escape") {
+    onClose?.();
+    return;
+  }
+  if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+  if (typeof document === "undefined") return;
+  const panel = e.currentTarget;
+  const items = Array.from(
+    panel.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+  );
+  if (items.length === 0) return;
+  e.preventDefault();
+  const active = document.activeElement;
+  const current = active ? items.indexOf(active) : -1;
+  let next;
+  if (e.key === "Home") next = 0;
+  else if (e.key === "End") next = items.length - 1;
+  else if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % items.length;
+  else next = current <= 0 ? items.length - 1 : current - 1;
+  items[next]?.focus();
+}
+var EDGE = 8;
+function FloatingMenu({
+  open,
+  onClose,
+  anchorRect,
+  anchorEl,
+  gap = 4,
+  minWidth = 200,
+  maxHeight,
+  autoFocus = true,
+  children
+}) {
+  const themeName = chunkDC52DQ27_cjs.useThemeName();
+  const panelRef = react.useRef(null);
+  const [pos, setPos] = react.useState(null);
+  const setPanel = react.useCallback((n) => {
+    panelRef.current = n;
+  }, []);
+  const place = react.useCallback(() => {
+    if (typeof window === "undefined") return;
+    const a = anchorRect();
+    if (!a) return;
+    const node = panelRef.current;
+    const w = node?.offsetWidth || minWidth;
+    const h = node?.offsetHeight || 0;
+    let left = a.left;
+    let top = a.bottom + gap;
+    if (left + w > window.innerWidth - EDGE) left = Math.max(EDGE, window.innerWidth - w - EDGE);
+    if (h && top + h > window.innerHeight - EDGE) {
+      const above = a.top - gap - h;
+      top = above >= EDGE ? above : Math.max(EDGE, window.innerHeight - h - EDGE);
+    }
+    setPos({ left, top });
+  }, [anchorRect, gap, minWidth]);
+  react.useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    place();
+    if (autoFocus) panelRef.current?.focus?.();
+  }, [open, place, autoFocus]);
+  react.useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    const onPointerDown = (e) => {
+      const t = e.target;
+      if (panelRef.current?.contains(t)) return;
+      const anchor = anchorEl?.();
+      if (anchor && anchor.contains(t)) return;
+      onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", onClose, true);
+    window.addEventListener("resize", onClose);
+    window.addEventListener("blur", onClose);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("scroll", onClose, true);
+      window.removeEventListener("resize", onClose);
+      window.removeEventListener("blur", onClose);
+    };
+  }, [open, onClose, anchorEl]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkDC52DQ27_cjs.PortalTheme, { name: themeName, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenuPanel,
+    {
+      panelRef: setPanel,
+      minWidth,
+      maxHeight,
+      tabIndex: -1,
+      onKeyDown: (e) => menuKeyDown(e, onClose),
+      style: {
+        position: "fixed",
+        left: pos?.left ?? 0,
+        top: pos?.top ?? 0,
+        zIndex: 1e5,
+        visibility: pos ? "visible" : "hidden"
+      },
+      children
+    }
+  ) }) });
+}
 function ComboBox({
   value,
   onChange,
@@ -579,7 +834,7 @@ function ComboBox({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkGWNNLYX4_cjs.FloatingMenu,
+      FloatingMenu,
       {
         open,
         onClose: () => setOpen(false),
@@ -595,7 +850,7 @@ function ComboBox({
           /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: "$2", color: "$color10", flex: 1, numberOfLines: 2, children: error }),
           onRetry ? /* @__PURE__ */ jsxRuntime.jsx(gui.Button, { size: "$1", chromeless: true, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" }) : null
         ] }) : filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: "$2", color: "$color10", px: "$2", py: "$2", children: emptyText }) : filtered.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
-          chunkGWNNLYX4_cjs.MenuItemView,
+          MenuItemView,
           {
             label: o.label ?? o.value,
             description: o.hint,
@@ -1072,7 +1327,7 @@ function ContextMenu({ children, items, disabled, minWidth = 200, maxHeight }) {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     target,
-    /* @__PURE__ */ jsxRuntime.jsx(chunkGWNNLYX4_cjs.FloatingMenu, { open: state.open, onClose: close, anchorRect, gap: 0, minWidth, maxHeight, children: chunkGWNNLYX4_cjs.renderMenuItems(items, close) })
+    /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu, { open: state.open, onClose: close, anchorRect, gap: 0, minWidth, maxHeight, children: renderMenuItems(items, close) })
   ] });
 }
 var isExternal = (href) => /^https?:\/\//.test(href);
@@ -1807,7 +2062,7 @@ function Reorder({
   }) });
 }
 var ToastContext = react.createContext(null);
-var ACCENT2 = {
+var ACCENT3 = {
   success: "$green10",
   error: "$red10",
   info: "$color11"
@@ -1819,7 +2074,7 @@ var ICON = {
 };
 function ToastCard({ t, onClose }) {
   const Icon = ICON[t.kind];
-  const accent = ACCENT2[t.kind];
+  const accent = ACCENT3[t.kind];
   return /* @__PURE__ */ jsxRuntime.jsx(
     gui.Card,
     {
@@ -2037,41 +2292,17 @@ Object.defineProperty(exports, "normalizeSummary", {
   enumerable: true,
   get: function () { return chunkMWBFAV3D_cjs.normalizeSummary; }
 });
-Object.defineProperty(exports, "DropdownMenu", {
-  enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.DropdownMenu; }
-});
-Object.defineProperty(exports, "FloatingMenu", {
-  enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.FloatingMenu; }
-});
-Object.defineProperty(exports, "MenuItemView", {
-  enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.MenuItemView; }
-});
-Object.defineProperty(exports, "MenuLabelView", {
-  enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.MenuLabelView; }
-});
-Object.defineProperty(exports, "MenuPanel", {
+Object.defineProperty(exports, "SelectMenu", {
   enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.MenuPanel; }
+  get: function () { return chunkNQUA5YRQ_cjs.SelectMenu; }
 });
-Object.defineProperty(exports, "MenuSeparatorView", {
+Object.defineProperty(exports, "DropdownMenu", {
   enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.MenuSeparatorView; }
+  get: function () { return chunkDC52DQ27_cjs.DropdownMenu; }
 });
 Object.defineProperty(exports, "PortalTheme", {
   enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.PortalTheme; }
-});
-Object.defineProperty(exports, "SelectMenu", {
-  enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.SelectMenu; }
-});
-Object.defineProperty(exports, "renderMenuItems", {
-  enumerable: true,
-  get: function () { return chunkGWNNLYX4_cjs.renderMenuItems; }
+  get: function () { return chunkDC52DQ27_cjs.PortalTheme; }
 });
 Object.defineProperty(exports, "BackendStateCard", {
   enumerable: true,
@@ -2181,6 +2412,18 @@ Object.defineProperty(exports, "CustomModelMark", {
   enumerable: true,
   get: function () { return lucideIcons2.Boxes; }
 });
+Object.defineProperty(exports, "TAG_TONES", {
+  enumerable: true,
+  get: function () { return data.TAG_TONES; }
+});
+Object.defineProperty(exports, "tagTone", {
+  enumerable: true,
+  get: function () { return data.tagTone; }
+});
+Object.defineProperty(exports, "tokens", {
+  enumerable: true,
+  get: function () { return data.tokens; }
+});
 exports.AnimatedLogo = AnimatedLogo;
 exports.AppHeader = AppHeader;
 exports.BRANDS = BRANDS;
@@ -2196,6 +2439,7 @@ exports.ContextMenu = ContextMenu;
 exports.Donut = Donut;
 exports.DonutRing = Donut2;
 exports.FadeIn = FadeIn;
+exports.FloatingMenu = FloatingMenu;
 exports.GenericLogo = GenericLogo;
 exports.HANZO = HANZO;
 exports.HANZO_MARK_CONTENT = HANZO_MARK_CONTENT;
@@ -2204,6 +2448,10 @@ exports.HintButton = HintButton;
 exports.LUX = LUX;
 exports.LegendDot = LegendDot;
 exports.LineChart = LineChart;
+exports.MenuItemView = MenuItemView;
+exports.MenuLabelView = MenuLabelView;
+exports.MenuPanel = MenuPanel;
+exports.MenuSeparatorView = MenuSeparatorView;
 exports.MetricCard = MetricCard;
 exports.MetricSparkline = Sparkline2;
 exports.MiniBars = MiniBars;
@@ -2232,6 +2480,7 @@ exports.monogram = monogram;
 exports.orgScope = orgScope;
 exports.otherSurfaces = otherSurfaces;
 exports.providerInitials = providerInitials;
+exports.renderMenuItems = renderMenuItems;
 exports.resolveBrand = resolveBrand;
 exports.rowShift = rowShift;
 exports.targetIndex = targetIndex;