@hanzo/ui 8.0.26 → 8.0.27

package/dist/product/index.d.ts

@@ -39,3 +39,4 @@ export * from './Toast';
 export * from './accent';
 export * from './color';
 export * from './social';
+export { tokens, TAG_TONES, tagTone, type TagTone } from '@hanzo/data';

package/dist/product/index.js

@@ -1,22 +1,25 @@
+'use client';
 import { ThemeToggle } from '../chunk-77AMCLN4.js';
 export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext } from '../chunk-77AMCLN4.js';
 import { DataTable, asColor } from '../chunk-7ZNK6JSS.js';
 export { COMPOSE_MODES, CampaignCard, ChannelBadge, DataTable, PostAgenda, PostCard, PostComposer, ProviderReadinessList, LG as SLIDEOVER_LG, SlideOver, SocialResource, SocialSummaryBar, StatusTag, ViewToggle, asColor, formatPostTime, parsePostTime, postDayBucket, postPreview } from '../chunk-7ZNK6JSS.js';
 export { ACCOUNT_STATUSES, POST_STATUSES, PROVIDERS, createSocialApi, normalizeAccount, normalizeAccounts, normalizePost, normalizePosts, normalizeProviderCapability, normalizeProviders, normalizeSummary } from '../chunk-ZGTJCJ55.js';
-import { FloatingMenu, MenuItemView, renderMenuItems } from '../chunk-5CZOYONP.js';
-export { DropdownMenu, FloatingMenu, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, PortalTheme, SelectMenu, renderMenuItems } from '../chunk-5CZOYONP.js';
+export { SelectMenu } from '../chunk-6DDY6XZI.js';
+import { useThemeName, PortalTheme } from '../chunk-PI3GSHLU.js';
+export { DropdownMenu, PortalTheme } from '../chunk-PI3GSHLU.js';
 import { classifyBackend, PageHeader, BackendStateCard } from '../chunk-GVCOAJLO.js';
 export { BackendStateCard, EmptyState, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, HostProvider, PageHeader, PrimaryButton, accentFor, classifyBackend, classifyRead, contrastText, isHexColor, resolveAccent, setOrgAccent, useAccent, useHost } from '../chunk-GVCOAJLO.js';
-import { useEmit, textSize } from '../chunk-FVQXROBK.js';
+import { useEmit, textSize, labelOf } from '../chunk-FVQXROBK.js';
 export { InstrumentSurface, emit, labelOf, textSize, useEmit, useSurface } from '../chunk-FVQXROBK.js';
-import { createContext, useRef, useState, useEffect, useCallback, useMemo, cloneElement, useLayoutEffect, useContext } from 'react';
-import { useTheme, XStack, Text, YStack, Card, Input, Button, Spinner, Popover, Separator } from '@hanzo/gui';
+import { createContext, useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo, cloneElement, useContext } from 'react';
+import { useTheme, XStack, Text, YStack, Card, Portal, Input, Button, Spinner, Popover, Separator } from '@hanzo/gui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, Check, Trash2, Cpu, Globe, Server, Info, CircleX, CircleCheck, X } from '@hanzogui/lucide-icons-2';
+import { Check, ChevronRight, ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, Trash2, Cpu, Globe, Server, Info, CircleX, CircleCheck, X } from '@hanzogui/lucide-icons-2';
 export { Boxes as CustomModelMark } from '@hanzogui/lucide-icons-2';
 import { surfaceById } from '@hanzo/products';
 import { HanzoLogo } from '@hanzo/logo/react';
 import { createPortal } from 'react-dom';
+export { TAG_TONES, tagTone, tokens } from '@hanzo/data';
 
 var CHART_PALETTE = [
   "#7c5cff",
@@ -526,6 +529,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__ */ jsx(
+    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 = useEmit();
+  const choose = () => {
+    track({ component: "MenuItem", action: "select", id: 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__ */ jsxs(
+    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__ */ jsx(XStack, { width: ICON_SLOT, height: ICON_SLOT, items: "center", justify: "center", shrink: 0, children: icon ? /* @__PURE__ */ jsx(XStack, { items: "center", justify: "center", opacity: destructive ? 1 : 0.9, style: destructive ? { color: DANGER } : void 0, children: icon }) : null }),
+        /* @__PURE__ */ jsxs(YStack, { flex: 1, minW: 0, children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: FONT_LABEL, lineHeight: 18, color: labelColor, numberOfLines: 1, children: label }),
+          description ? /* @__PURE__ */ jsx(Text, { fontSize: FONT_MUTED, lineHeight: 14, color: "$color11", numberOfLines: 1, children: description }) : null
+        ] }),
+        shortcut ? /* @__PURE__ */ jsx(Text, { fontSize: FONT_SHORTCUT, color: "$color11", shrink: 0, children: shortcut }) : null,
+        selected ? /* @__PURE__ */ jsx(Check, { size: 14, color: ACCENT2 }) : null,
+        hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: "var(--hanzo-muted, currentColor)", opacity: 0.6 }) : null
+      ]
+    }
+  );
+}
+function MenuSeparatorView() {
+  return /* @__PURE__ */ jsx(YStack, { height: 1, bg: "$borderColor", my: SEP_MARGIN, mx: SEP_MARGIN, role: "separator" });
+}
+function MenuLabelView({ children }) {
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(MenuSeparatorView, {}, it.key ?? `sep-${i}`);
+    if (it.type === "label") return /* @__PURE__ */ jsx(MenuLabelView, { children: it.label }, it.key ?? `lbl-${i}`);
+    const { key, onSelect, closeOnSelect = true, ...rest } = it;
+    return /* @__PURE__ */ 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 = useThemeName();
+  const panelRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  const setPanel = useCallback((n) => {
+    panelRef.current = n;
+  }, []);
+  const place = 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]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    place();
+    if (autoFocus) panelRef.current?.focus?.();
+  }, [open, place, autoFocus]);
+  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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(PortalTheme, { name: themeName, children: /* @__PURE__ */ 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,
@@ -1810,7 +2066,7 @@ function Reorder({
   }) });
 }
 var ToastContext = createContext(null);
-var ACCENT2 = {
+var ACCENT3 = {
   success: "$green10",
   error: "$red10",
   info: "$color11"
@@ -1822,7 +2078,7 @@ var ICON = {
 };
 function ToastCard({ t, onClose }) {
   const Icon = ICON[t.kind];
-  const accent = ACCENT2[t.kind];
+  const accent = ACCENT3[t.kind];
   return /* @__PURE__ */ jsx(
     Card,
     {
@@ -1908,6 +2164,6 @@ function useToast() {
   return ctx;
 }
 
-export { AnimatedLogo, AppHeader, BRANDS, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, Donut, Donut2 as DonutRing, FadeIn, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, LUX, LegendDot, LineChart, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgMark, OrgSwitcher, PARS, Panel, ProductIcon, ProviderLogo, Reorder, SERIES, SURFACES, SearchInput, Segmented, SiteFooter, SiteNav, Sparkline, ToastProvider, UtilBar, ZOO, colorForIndex, filterOptions, filterOrgs, isKnownOption, monogram, orgScope, otherSurfaces, providerInitials, resolveBrand, rowShift, targetIndex, useContainerWidth, useToast, utilColor };
+export { AnimatedLogo, AppHeader, BRANDS, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, Donut, Donut2 as DonutRing, FadeIn, FloatingMenu, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, LUX, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgMark, OrgSwitcher, PARS, Panel, ProductIcon, ProviderLogo, Reorder, SERIES, SURFACES, SearchInput, Segmented, SiteFooter, SiteNav, Sparkline, ToastProvider, UtilBar, ZOO, colorForIndex, filterOptions, filterOrgs, isKnownOption, monogram, orgScope, otherSurfaces, providerInitials, renderMenuItems, resolveBrand, rowShift, targetIndex, useContainerWidth, useToast, utilColor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map