@flanksource/clicky-ui 0.3.45 → 0.3.47

package/dist/overlay/DropdownMenuSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubmenu.js","sources":["../../src/overlay/DropdownMenuSubmenu.tsx"],"sourcesContent":["import { Fragment, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  offset,\n  safePolygon,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListItem,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  type UseInteractionsReturn,\n} from \"@floating-ui/react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronRight } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { cn } from \"../lib/utils\";\n\n// Shared item surfaces so a leaf renders identically in the root menu or a\n// flyout submenu.\nconst MENU_ITEM_CLASS =\n  \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\";\nconst MENU_HEADER_CLASS =\n  \"select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\";\n\nfunction MenuItemIcon({\n  icon,\n  iconColor,\n  iconClassName,\n}: {\n  icon: string | StaticIconComponent | undefined;\n  iconColor: string | undefined;\n  iconClassName: string | undefined;\n}) {\n  if (!icon) return null;\n  return (\n    // `text-base` rather than inheriting the row: `Icon` sizes at 1em, so on a\n    // `text-xs` row the glyph came out at 12px — smaller than anything a caller\n    // puts in the label beside it, and too small to identify at a glance. The\n    // row's content box is already 16px tall, so this does not change its height.\n    <span\n      className={cn(\"inline-flex shrink-0 text-base\", iconClassName)}\n      style={iconColor ? { color: iconColor } : undefined}\n    >\n      <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />\n    </span>\n  );\n}\n\nfunction MenuLeaf({ item }: { item: DropdownMenuItem }) {\n  const menu = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const listItem = useListItem();\n  const isActive = listItem.index === menu.activeIndex;\n\n  const activate = () => {\n    if (item.disabled) return;\n    item.onSelect();\n    // A selection closes every open level; each menu subscribes to \"click\".\n    tree?.events.emit(\"click\");\n  };\n\n  return (\n    <button\n      ref={listItem.ref}\n      type=\"button\"\n      role=\"menuitem\"\n      tabIndex={isActive ? 0 : -1}\n      disabled={item.disabled}\n      title={item.title}\n      className={MENU_ITEM_CLASS}\n      {...menu.getItemProps({\n        onClick: activate,\n        onFocus: () => menu.setHasFocusInside(true),\n        onKeyDown: (event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            activate();\n          }\n        },\n      })}\n    >\n      <MenuItemIcon\n        icon={item.icon}\n        iconColor={item.iconColor}\n        iconClassName={item.iconClassName}\n      />\n      {item.label}\n    </button>\n  );\n}\n\nfunction MenuSubmenu({ item }: { item: DropdownMenuItem }) {\n  const parent = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const parentId = useFloatingParentNodeId();\n  const listItem = useListItem();\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [hasFocusInside, setHasFocusInside] = useState(false);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n\n  const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: \"right-start\",\n    middleware: [\n      offset({ mainAxis: 0, alignmentAxis: -4 }),\n      flip({ padding: 8 }),\n      shift({ padding: 8, crossAxis: true }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, {\n    delay: { open: 75 },\n    handleClose: safePolygon(),\n  });\n  // Hover opens the flyout for mouse users; click/tap also opens it (touch and\n  // keyboard) but never toggles it shut — leaving via safePolygon or selecting a\n  // leaf is what closes it.\n  const click = useClick(context, { toggle: false });\n  const role = useRole(context, { role: \"menu\" });\n  // Escape is owned by useEscapeLayer (below) so it dismisses one menu level at\n  // a time and cooperates with modals; useDismiss keeps outside-press dismissal.\n  const dismiss = useDismiss(context, { escapeKey: false, bubbles: true });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    nested: true,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [hover, click, role, dismiss, listNav],\n  );\n\n  useEscapeLayer(isOpen, () => setIsOpen(false));\n\n  useEffect(() => {\n    if (!tree) return;\n    const closeAll = () => setIsOpen(false);\n    const closeSiblings = (event: {\n      nodeId: string;\n      parentId: string | null;\n    }) => {\n      if (event.nodeId !== nodeId && event.parentId === parentId) {\n        setIsOpen(false);\n      }\n    };\n    tree.events.on(\"click\", closeAll);\n    tree.events.on(\"menuopen\", closeSiblings);\n    return () => {\n      tree.events.off(\"click\", closeAll);\n      tree.events.off(\"menuopen\", closeSiblings);\n    };\n  }, [tree, nodeId, parentId]);\n\n  useEffect(() => {\n    if (isOpen && tree) tree.events.emit(\"menuopen\", { parentId, nodeId });\n  }, [isOpen, tree, nodeId, parentId]);\n\n  const isActive = listItem.index === parent.activeIndex;\n  const referenceRef = useMergeRefs([refs.setReference, listItem.ref]);\n  const ariaLabel = typeof item.label === \"string\" ? item.label : undefined;\n\n  return (\n    <FloatingNode id={nodeId}>\n      <button\n        ref={referenceRef}\n        type=\"button\"\n        role=\"menuitem\"\n        tabIndex={isActive ? 0 : -1}\n        disabled={item.disabled}\n        title={item.title}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        data-focus-inside={hasFocusInside ? \"\" : undefined}\n        className={MENU_ITEM_CLASS}\n        {...parent.getItemProps(\n          // Merge the parent's roving-tabindex props with this trigger's own\n          // reference props (open on hover/click/ArrowRight). Both prop-getters\n          // return an opaque prop bag; the cast bridges the two getter\n          // signatures (getReferenceProps -> getItemProps parameter).\n          getReferenceProps({\n            onFocus: () => {\n              setHasFocusInside(false);\n              parent.setHasFocusInside(true);\n            },\n          }) as unknown as Parameters<UseInteractionsReturn[\"getItemProps\"]>[0],\n        )}\n      >\n        <MenuItemIcon\n          icon={item.icon}\n          iconColor={item.iconColor}\n          iconClassName={item.iconClassName}\n        />\n        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n        <Icon icon={UiChevronRight} className=\"ml-auto shrink-0 opacity-60\" />\n      </button>\n      <MenuContext.Provider\n        value={{\n          getItemProps,\n          activeIndex,\n          setActiveIndex,\n          setHasFocusInside,\n          isOpen,\n        }}\n      >\n        <FloatingList elementsRef={elementsRef}>\n          {isOpen && (\n            <FloatingPortal>\n              <FloatingFocusManager\n                context={context}\n                modal={false}\n                initialFocus={-1}\n                returnFocus={false}\n              >\n                <div\n                  ref={refs.setFloating}\n                  role=\"menu\"\n                  style={{ ...floatingStyles, zIndex: floatingZ }}\n                  className={MENU_POPOVER_CLASS}\n                  {...getFloatingProps()}\n                  aria-label={ariaLabel}\n                  {...(ariaLabel ? { \"aria-labelledby\": undefined } : {})}\n                >\n                  {item.header != null && (\n                    <div className=\"border-b border-border px-3 py-1.5\">\n                      {item.header}\n                    </div>\n                  )}\n                  <MenuItemList items={item.children ?? []} />\n                </div>\n              </FloatingFocusManager>\n            </FloatingPortal>\n          )}\n        </FloatingList>\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n}\n\n/**\n * Renders one menu level: a leaf `menuitem` button, or a submenu trigger when\n * the item has `children`. A group header renders above the first item of each\n * contiguous group (headers are not focusable, so keyboard navigation stays\n * dense over the interactive items). Must be rendered inside a `FloatingList`\n * whose `elementsRef` backs the enclosing menu's list navigation.\n */\nexport function MenuItemList({ items }: { items: DropdownMenuItem[] }) {\n  return (\n    <>\n      {items.map((item, index) => {\n        const showHeader =\n          item.group != null && item.group !== items[index - 1]?.group;\n        const hasChildren = !!item.children && item.children.length > 0;\n        return (\n          <Fragment key={index}>\n            {showHeader && (\n              <div role=\"presentation\" className={MENU_HEADER_CLASS}>\n                {item.group}\n              </div>\n            )}\n            {hasChildren ? (\n              <MenuSubmenu item={item} />\n            ) : (\n              <MenuLeaf item={item} />\n            )}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["Fragment"],"mappings":";;;;;;;;AAkCA,MAAM,kBACJ;AACF,MAAM,oBACJ;AAEF,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,CAAC,KAAM,QAAO;AAClB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,kCAAkC,aAAa;AAAA,QAC7D,OAAO,YAAY,EAAE,OAAO,cAAc;AAAA,QAE1C,UAAA,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,EAAK,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA;AAGxE;AAEA,SAAS,SAAS,EAAE,QAAoC;AACtD,QAAM,OAAO,WAAW,WAAW;AACnC,QAAM,OAAO,gBAAA;AACb,QAAM,WAAW,YAAA;AACjB,QAAM,WAAW,SAAS,UAAU,KAAK;AAEzC,QAAM,WAAW,MAAM;AACrB,QAAI,KAAK,SAAU;AACnB,SAAK,SAAA;AAEL,iCAAM,OAAO,KAAK;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,SAAS;AAAA,MACd,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU,WAAW,IAAI;AAAA,MACzB,UAAU,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,WAAW;AAAA,MACV,GAAG,KAAK,aAAa;AAAA,QACpB,SAAS;AAAA,QACT,SAAS,MAAM,KAAK,kBAAkB,IAAI;AAAA,QAC1C,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,kBAAM,eAAA;AACN,qBAAA;AAAA,UACF;AAAA,QACF;AAAA,MAAA,CACD;AAAA,MAED,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,KAAK;AAAA,YACX,WAAW,KAAK;AAAA,YAChB,eAAe,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAErB,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,SAAS,YAAY,EAAE,QAAoC;AACzD,QAAM,SAAS,WAAW,WAAW;AACrC,QAAM,OAAO,gBAAA;AACb,QAAM,SAAS,kBAAA;AACf,QAAM,WAAW,wBAAA;AACjB,QAAM,WAAW,YAAA;AAEjB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,cAAc,OAAkC,EAAE;AACxD,QAAM,YAAY,kBAAA;AAElB,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAA+B;AAAA;AAAA,IAEvE,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,IAC1B,MAAM;AAAA,IACN,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,MACV,OAAO,EAAE,UAAU,GAAG,eAAe,IAAI;AAAA,MACzC,KAAK,EAAE,SAAS,GAAG;AAAA,MACnB,MAAM,EAAE,SAAS,GAAG,WAAW,MAAM;AAAA,IAAA;AAAA,IAEvC,sBAAsB;AAAA,EAAA,CACvB;AAED,QAAM,QAAQ,SAAS,SAAS;AAAA,IAC9B,OAAO,EAAE,MAAM,GAAA;AAAA,IACf,aAAa,YAAA;AAAA,EAAY,CAC1B;AAID,QAAM,QAAQ,SAAS,SAAS,EAAE,QAAQ,OAAO;AACjD,QAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,QAAQ;AAG9C,QAAM,UAAU,WAAW,SAAS,EAAE,WAAW,OAAO,SAAS,MAAM;AACvE,QAAM,UAAU,kBAAkB,SAAS;AAAA,IACzC,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,EAAA,CACP;AACD,QAAM,EAAE,mBAAmB,kBAAkB,aAAA,IAAiB;AAAA,IAC5D,CAAC,OAAO,OAAO,MAAM,SAAS,OAAO;AAAA,EAAA;AAGvC,iBAAe,QAAQ,MAAM,UAAU,KAAK,CAAC;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,WAAW,MAAM,UAAU,KAAK;AACtC,UAAM,gBAAgB,CAAC,UAGjB;AACJ,UAAI,MAAM,WAAW,UAAU,MAAM,aAAa,UAAU;AAC1D,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AACA,SAAK,OAAO,GAAG,SAAS,QAAQ;AAChC,SAAK,OAAO,GAAG,YAAY,aAAa;AACxC,WAAO,MAAM;AACX,WAAK,OAAO,IAAI,SAAS,QAAQ;AACjC,WAAK,OAAO,IAAI,YAAY,aAAa;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,QAAQ,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,UAAU,KAAM,MAAK,OAAO,KAAK,YAAY,EAAE,UAAU,QAAQ;AAAA,EACvE,GAAG,CAAC,QAAQ,MAAM,QAAQ,QAAQ,CAAC;AAEnC,QAAM,WAAW,SAAS,UAAU,OAAO;AAC3C,QAAM,eAAe,aAAa,CAAC,KAAK,cAAc,SAAS,GAAG,CAAC;AACnE,QAAM,YAAY,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;AAEhE,SACE,qBAAC,cAAA,EAAa,IAAI,QAChB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU,WAAW,IAAI;AAAA,QACzB,UAAU,KAAK;AAAA,QACf,OAAO,KAAK;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,qBAAmB,iBAAiB,KAAK;AAAA,QACzC,WAAW;AAAA,QACV,GAAG,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKT,kBAAkB;AAAA,YAChB,SAAS,MAAM;AACb,gCAAkB,KAAK;AACvB,qBAAO,kBAAkB,IAAI;AAAA,YAC/B;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAGH,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,KAAK;AAAA,cACX,WAAW,KAAK;AAAA,cAChB,eAAe,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEtB,oBAAC,QAAA,EAAK,WAAU,2BAA2B,eAAK,OAAM;AAAA,UACtD,oBAAC,MAAA,EAAK,MAAM,gBAAgB,WAAU,8BAAA,CAA8B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtE;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA,oBAAC,cAAA,EAAa,aACX,UAAA,8BACE,gBAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,cAAc;AAAA,YACd,aAAa;AAAA,YAEb,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,KAAK;AAAA,gBACV,MAAK;AAAA,gBACL,OAAO,EAAE,GAAG,gBAAgB,QAAQ,UAAA;AAAA,gBACpC,WAAW;AAAA,gBACV,GAAG,iBAAA;AAAA,gBACJ,cAAY;AAAA,gBACX,GAAI,YAAY,EAAE,mBAAmB,OAAA,IAAc,CAAA;AAAA,gBAEnD,UAAA;AAAA,kBAAA,KAAK,UAAU,QACd,oBAAC,SAAI,WAAU,sCACZ,eAAK,OAAA,CACR;AAAA,sCAED,cAAA,EAAa,OAAO,KAAK,YAAY,CAAA,EAAC,CAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5C;AAAA,QAAA,GAEJ,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AASO,SAAS,aAAa,EAAE,SAAwC;AACrE,SACE,oBAAA,UAAA,EACG,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;;AAC1B,UAAM,aACJ,KAAK,SAAS,QAAQ,KAAK,YAAU,WAAM,QAAQ,CAAC,MAAf,mBAAkB;AACzD,UAAM,cAAc,CAAC,CAAC,KAAK,YAAY,KAAK,SAAS,SAAS;AAC9D,WACE,qBAACA,YAAA,EACE,UAAA;AAAA,MAAA,kCACE,OAAA,EAAI,MAAK,gBAAe,WAAW,mBACjC,eAAK,MAAA,CACR;AAAA,MAED,cACC,oBAAC,aAAA,EAAY,MAAY,IAEzB,oBAAC,YAAS,KAAA,CAAY;AAAA,IAAA,EAAA,GATX,KAWf;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"DropdownMenuSubmenu.js","sources":["../../src/overlay/DropdownMenuSubmenu.tsx"],"sourcesContent":["import { Fragment, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  offset,\n  safePolygon,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListItem,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  type UseInteractionsReturn,\n} from \"@floating-ui/react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronRight } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { cn } from \"../lib/utils\";\n\n// Shared item surfaces so a leaf renders identically in the root menu or a\n// flyout submenu.\nconst MENU_ITEM_CLASS =\n  \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\";\nconst MENU_HEADER_CLASS =\n  \"select-none px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\";\n\nfunction MenuItemIcon({\n  icon,\n  iconColor,\n  iconClassName,\n}: {\n  icon: string | StaticIconComponent | undefined;\n  iconColor: string | undefined;\n  iconClassName: string | undefined;\n}) {\n  if (!icon) return null;\n  return (\n    // `text-base` rather than inheriting the row: `Icon` sizes at 1em, so on a\n    // `text-xs` row the glyph came out at 12px — smaller than anything a caller\n    // puts in the label beside it, and too small to identify at a glance. The\n    // row's content box is already 16px tall, so this does not change its height.\n    <span\n      className={cn(\"inline-flex shrink-0 text-base\", iconClassName)}\n      style={iconColor ? { color: iconColor } : undefined}\n    >\n      <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />\n    </span>\n  );\n}\n\nfunction MenuLeaf({ item }: { item: DropdownMenuItem }) {\n  const menu = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const listItem = useListItem();\n  const isActive = listItem.index === menu.activeIndex;\n\n  const activate = () => {\n    if (item.disabled) return;\n    item.onSelect();\n    // A selection closes every open level; each menu subscribes to \"click\".\n    tree?.events.emit(\"click\");\n  };\n\n  return (\n    <button\n      ref={listItem.ref}\n      type=\"button\"\n      role=\"menuitem\"\n      tabIndex={isActive ? 0 : -1}\n      disabled={item.disabled}\n      title={item.title}\n      className={MENU_ITEM_CLASS}\n      {...menu.getItemProps({\n        onClick: activate,\n        onFocus: () => menu.setHasFocusInside(true),\n        onKeyDown: (event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            activate();\n          }\n        },\n      })}\n    >\n      <MenuItemIcon\n        icon={item.icon}\n        iconColor={item.iconColor}\n        iconClassName={item.iconClassName}\n      />\n      {item.label}\n    </button>\n  );\n}\n\nfunction MenuSubmenu({ item }: { item: DropdownMenuItem }) {\n  const parent = useContext(MenuContext);\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const parentId = useFloatingParentNodeId();\n  const listItem = useListItem();\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [hasFocusInside, setHasFocusInside] = useState(false);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n\n  const { refs, floatingStyles, context } = useFloating<HTMLButtonElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: \"right-start\",\n    middleware: [\n      offset({ mainAxis: 0, alignmentAxis: -4 }),\n      flip({ padding: 8 }),\n      shift({ padding: 8, crossAxis: true }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, {\n    delay: { open: 75 },\n    handleClose: safePolygon(),\n  });\n  // Hover opens the flyout for mouse users; click/tap also opens it (touch and\n  // keyboard) but never toggles it shut — leaving via safePolygon or selecting a\n  // leaf is what closes it.\n  const click = useClick(context, { toggle: false });\n  const role = useRole(context, { role: \"menu\" });\n  // Escape is owned by useEscapeLayer (below) so it dismisses one menu level at\n  // a time and cooperates with modals; useDismiss keeps outside-press dismissal.\n  const dismiss = useDismiss(context, { escapeKey: false, bubbles: true });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    nested: true,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [hover, click, role, dismiss, listNav],\n  );\n\n  useEscapeLayer(isOpen, () => context.onOpenChange(false));\n\n  useEffect(() => {\n    if (!tree) return;\n    const closeAll = () => context.onOpenChange(false);\n    const closeSiblings = (event: {\n      nodeId: string;\n      parentId: string | null;\n    }) => {\n      if (event.nodeId !== nodeId && event.parentId === parentId) {\n        context.onOpenChange(false);\n      }\n    };\n    tree.events.on(\"click\", closeAll);\n    tree.events.on(\"menuopen\", closeSiblings);\n    return () => {\n      tree.events.off(\"click\", closeAll);\n      tree.events.off(\"menuopen\", closeSiblings);\n    };\n  }, [tree, nodeId, parentId, context.onOpenChange]);\n\n  useEffect(() => {\n    if (isOpen && tree) tree.events.emit(\"menuopen\", { parentId, nodeId });\n  }, [isOpen, tree, nodeId, parentId]);\n\n  const isActive = listItem.index === parent.activeIndex;\n  const referenceRef = useMergeRefs([refs.setReference, listItem.ref]);\n  const ariaLabel = typeof item.label === \"string\" ? item.label : undefined;\n\n  return (\n    <FloatingNode id={nodeId}>\n      <button\n        ref={referenceRef}\n        type=\"button\"\n        role=\"menuitem\"\n        tabIndex={isActive ? 0 : -1}\n        disabled={item.disabled}\n        title={item.title}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        data-focus-inside={hasFocusInside ? \"\" : undefined}\n        className={MENU_ITEM_CLASS}\n        {...parent.getItemProps(\n          // Merge the parent's roving-tabindex props with this trigger's own\n          // reference props (open on hover/click/ArrowRight). Both prop-getters\n          // return an opaque prop bag; the cast bridges the two getter\n          // signatures (getReferenceProps -> getItemProps parameter).\n          getReferenceProps({\n            onFocus: () => {\n              setHasFocusInside(false);\n              parent.setHasFocusInside(true);\n            },\n          }) as unknown as Parameters<UseInteractionsReturn[\"getItemProps\"]>[0],\n        )}\n      >\n        <MenuItemIcon\n          icon={item.icon}\n          iconColor={item.iconColor}\n          iconClassName={item.iconClassName}\n        />\n        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n        <Icon icon={UiChevronRight} className=\"ml-auto shrink-0 opacity-60\" />\n      </button>\n      <MenuContext.Provider\n        value={{\n          getItemProps,\n          activeIndex,\n          setActiveIndex,\n          setHasFocusInside,\n          isOpen,\n        }}\n      >\n        <FloatingList elementsRef={elementsRef}>\n          {isOpen && (\n            <FloatingPortal>\n              <FloatingFocusManager\n                context={context}\n                modal={false}\n                initialFocus={-1}\n                returnFocus={false}\n              >\n                <div\n                  ref={refs.setFloating}\n                  role=\"menu\"\n                  style={{ ...floatingStyles, zIndex: floatingZ }}\n                  className={MENU_POPOVER_CLASS}\n                  {...getFloatingProps()}\n                  aria-label={ariaLabel}\n                  {...(ariaLabel ? { \"aria-labelledby\": undefined } : {})}\n                >\n                  {item.header != null && (\n                    <div className=\"border-b border-border px-3 py-1.5\">\n                      {item.header}\n                    </div>\n                  )}\n                  <MenuItemList items={item.children ?? []} />\n                </div>\n              </FloatingFocusManager>\n            </FloatingPortal>\n          )}\n        </FloatingList>\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n}\n\n/**\n * Renders one menu level: a leaf `menuitem` button, or a submenu trigger when\n * the item has `children`. A group header renders above the first item of each\n * contiguous group (headers are not focusable, so keyboard navigation stays\n * dense over the interactive items). Must be rendered inside a `FloatingList`\n * whose `elementsRef` backs the enclosing menu's list navigation.\n */\nexport function MenuItemList({ items }: { items: DropdownMenuItem[] }) {\n  return (\n    <>\n      {items.map((item, index) => {\n        const showHeader =\n          item.group != null && item.group !== items[index - 1]?.group;\n        const hasChildren = !!item.children && item.children.length > 0;\n        return (\n          <Fragment key={index}>\n            {showHeader && (\n              <div role=\"presentation\" className={MENU_HEADER_CLASS}>\n                {item.group}\n              </div>\n            )}\n            {hasChildren ? (\n              <MenuSubmenu item={item} />\n            ) : (\n              <MenuLeaf item={item} />\n            )}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/overlay/modalStack.cjs

@@ -23,11 +23,12 @@ function onEscapeKeyDown(event) {
   if (event.defaultPrevented || event.key !== "Escape" || event.isComposing || event.keyCode === 229) {
     return;
   }
-  const top = escapeStack[escapeStack.length - 1];
+  const top = escapeStack.findLast((entry) => !entry.dismissed);
   if (!top) return;
   event.preventDefault();
   event.stopPropagation();
   event.stopImmediatePropagation();
+  top.dismissed = true;
   top.onEscape();
 }
 function ensureEscapeListener() {
@@ -66,14 +67,20 @@ function useEscapeLayer(open, onEscape, enabled = true) {
   const id = react.useId();
   const onEscapeRef = react.useRef(onEscape);
   onEscapeRef.current = onEscape;
+  const entryRef = react.useRef(null);
+  react.useEffect(() => {
+    if (entryRef.current) entryRef.current.dismissed = false;
+  });
   react.useEffect(() => {
     if (!open || !enabled) return;
     ensureEscapeListener();
-    escapeStack.push({
-      id,
-      onEscape: () => onEscapeRef.current()
-    });
-    return () => removeEscapeLayer(id);
+    const entry = { id, dismissed: false, onEscape: () => onEscapeRef.current() };
+    entryRef.current = entry;
+    escapeStack.push(entry);
+    return () => {
+      entryRef.current = null;
+      removeEscapeLayer(id);
+    };
   }, [enabled, id, open]);
 }
 function useTourLayer(active) {

package/dist/overlay/modalStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.cjs","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\nconst escapeStack: Array<{ id: string; onEscape: () => void }> = [];\nlet escapeDocument: Document | null = null;\n// Running guided tours. A tour dims the page from `zIndex.tour`, far above the\n// modal band, so floating content opened *during* a tour (the menu a step tells\n// the user to open) has to clear that dim or it renders invisibly underneath.\nlet tourLayers = 0;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity plus the tour-layer count; it only changes\n// when an entry is pushed or popped, so subscribers re-render exactly when their\n// position could have moved.\nfunction getSnapshot() {\n  return `${tourLayers}:` + stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack[escapeStack.length - 1];\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    escapeStack.push({\n      id,\n      onEscape: () => onEscapeRef.current(),\n    });\n\n    return () => removeEscapeLayer(id);\n  }, [enabled, id, open]);\n}\n\n/**\n * Registers a running guided tour while `active`, so floating layers lift above\n * its dim. Symmetric with `useModalStack`, but a count rather than a stack: the\n * tour overlay does not nest.\n */\nexport function useTourLayer(active: boolean): void {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!active) return;\n    tourLayers += 1;\n    emit();\n    return () => {\n      tourLayers -= 1;\n      emit();\n    };\n  }, [active]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. While a guided tour runs, the value\n * also clears the tour's dim and step card, so a step that says \"open this menu\"\n * shows the menu rather than hiding it under the overlay. Subscribes to the\n * modal stack so the value tracks modals and tours opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  const base =\n    stack.length === 0\n      ? zIndex.popover\n      : zIndex.modal + (stack.length - 1) * zIndex.modalStep + zIndex.popoverOverModalOffset;\n  if (tourLayers === 0) return base;\n  return Math.max(base, zIndex.tour + zIndex.tourCardOffset + zIndex.popoverOverModalOffset);\n}\n"],"names":["useId","useSyncExternalStore","useEffect","useRef","zIndex"],"mappings":"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"}
+{"version":3,"file":"modalStack.cjs","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\n// `dismissed` marks a layer whose onEscape already ran but whose close has not\n// committed yet, so a quick second Escape reaches the layer beneath it.\ntype EscapeLayer = { id: string; dismissed: boolean; onEscape: () => void };\nconst escapeStack: EscapeLayer[] = [];\nlet escapeDocument: Document | null = null;\n// Running guided tours. A tour dims the page from `zIndex.tour`, far above the\n// modal band, so floating content opened *during* a tour (the menu a step tells\n// the user to open) has to clear that dim or it renders invisibly underneath.\nlet tourLayers = 0;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity plus the tour-layer count; it only changes\n// when an entry is pushed or popped, so subscribers re-render exactly when their\n// position could have moved.\nfunction getSnapshot() {\n  return `${tourLayers}:` + stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack.findLast((entry) => !entry.dismissed);\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.dismissed = true;\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n  const entryRef = useRef<EscapeLayer | null>(null);\n\n  // A dismissed layer that re-rendered without closing owns Escape again.\n  useEffect(() => {\n    if (entryRef.current) entryRef.current.dismissed = false;\n  });\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    const entry: EscapeLayer = { id, dismissed: false, onEscape: () => onEscapeRef.current() };\n    entryRef.current = entry;\n    escapeStack.push(entry);\n\n    return () => {\n      entryRef.current = null;\n      removeEscapeLayer(id);\n    };\n  }, [enabled, id, open]);\n}\n\n/**\n * Registers a running guided tour while `active`, so floating layers lift above\n * its dim. Symmetric with `useModalStack`, but a count rather than a stack: the\n * tour overlay does not nest.\n */\nexport function useTourLayer(active: boolean): void {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!active) return;\n    tourLayers += 1;\n    emit();\n    return () => {\n      tourLayers -= 1;\n      emit();\n    };\n  }, [active]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. While a guided tour runs, the value\n * also clears the tour's dim and step card, so a step that says \"open this menu\"\n * shows the menu rather than hiding it under the overlay. Subscribes to the\n * modal stack so the value tracks modals and tours opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  const base =\n    stack.length === 0\n      ? zIndex.popover\n      : zIndex.modal + (stack.length - 1) * zIndex.modalStep + zIndex.popoverOverModalOffset;\n  if (tourLayers === 0) return base;\n  return Math.max(base, zIndex.tour + zIndex.tourCardOffset + zIndex.popoverOverModalOffset);\n}\n"],"names":["useId","useSyncExternalStore","useEffect","useRef","zIndex"],"mappings":"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"}

package/dist/overlay/modalStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.d.ts","sourceRoot":"","sources":["../../src/overlay/modalStack.ts"],"names":[],"mappings":"AAqEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oFAAoF;IACpF,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,CAoB/D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,UAAO,QAgBjF;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAYlD;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAQ1C"}
+{"version":3,"file":"modalStack.d.ts","sourceRoot":"","sources":["../../src/overlay/modalStack.ts"],"names":[],"mappings":"AAyEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oFAAoF;IACpF,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,CAoB/D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,UAAO,QAwBjF;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAYlD;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAQ1C"}

package/dist/overlay/modalStack.js

@@ -21,11 +21,12 @@ function onEscapeKeyDown(event) {
   if (event.defaultPrevented || event.key !== "Escape" || event.isComposing || event.keyCode === 229) {
     return;
   }
-  const top = escapeStack[escapeStack.length - 1];
+  const top = escapeStack.findLast((entry) => !entry.dismissed);
   if (!top) return;
   event.preventDefault();
   event.stopPropagation();
   event.stopImmediatePropagation();
+  top.dismissed = true;
   top.onEscape();
 }
 function ensureEscapeListener() {
@@ -64,14 +65,20 @@ function useEscapeLayer(open, onEscape, enabled = true) {
   const id = useId();
   const onEscapeRef = useRef(onEscape);
   onEscapeRef.current = onEscape;
+  const entryRef = useRef(null);
+  useEffect(() => {
+    if (entryRef.current) entryRef.current.dismissed = false;
+  });
   useEffect(() => {
     if (!open || !enabled) return;
     ensureEscapeListener();
-    escapeStack.push({
-      id,
-      onEscape: () => onEscapeRef.current()
-    });
-    return () => removeEscapeLayer(id);
+    const entry = { id, dismissed: false, onEscape: () => onEscapeRef.current() };
+    entryRef.current = entry;
+    escapeStack.push(entry);
+    return () => {
+      entryRef.current = null;
+      removeEscapeLayer(id);
+    };
   }, [enabled, id, open]);
 }
 function useTourLayer(active) {

package/dist/overlay/modalStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.js","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\nconst escapeStack: Array<{ id: string; onEscape: () => void }> = [];\nlet escapeDocument: Document | null = null;\n// Running guided tours. A tour dims the page from `zIndex.tour`, far above the\n// modal band, so floating content opened *during* a tour (the menu a step tells\n// the user to open) has to clear that dim or it renders invisibly underneath.\nlet tourLayers = 0;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity plus the tour-layer count; it only changes\n// when an entry is pushed or popped, so subscribers re-render exactly when their\n// position could have moved.\nfunction getSnapshot() {\n  return `${tourLayers}:` + stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack[escapeStack.length - 1];\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    escapeStack.push({\n      id,\n      onEscape: () => onEscapeRef.current(),\n    });\n\n    return () => removeEscapeLayer(id);\n  }, [enabled, id, open]);\n}\n\n/**\n * Registers a running guided tour while `active`, so floating layers lift above\n * its dim. Symmetric with `useModalStack`, but a count rather than a stack: the\n * tour overlay does not nest.\n */\nexport function useTourLayer(active: boolean): void {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!active) return;\n    tourLayers += 1;\n    emit();\n    return () => {\n      tourLayers -= 1;\n      emit();\n    };\n  }, [active]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. While a guided tour runs, the value\n * also clears the tour's dim and step card, so a step that says \"open this menu\"\n * shows the menu rather than hiding it under the overlay. Subscribes to the\n * modal stack so the value tracks modals and tours opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  const base =\n    stack.length === 0\n      ? zIndex.popover\n      : zIndex.modal + (stack.length - 1) * zIndex.modalStep + zIndex.popoverOverModalOffset;\n  if (tourLayers === 0) return base;\n  return Math.max(base, zIndex.tour + zIndex.tourCardOffset + zIndex.popoverOverModalOffset);\n}\n"],"names":[],"mappings":";;AAOA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AACtB,MAAM,cAA2D,CAAA;AACjE,IAAI,iBAAkC;AAItC,IAAI,aAAa;AAEjB,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAKA,SAAS,cAAc;AACrB,SAAO,GAAG,UAAU,MAAM,MAAM,KAAK,IAAQ;AAC/C;AAEA,SAAS,gBAAgB,OAAsB;AAC7C,MACE,MAAM,oBACN,MAAM,QAAQ,YACd,MAAM,eACL,MAA+C,YAAY,KAC5D;AACA;AAAA,EACF;AAEA,QAAM,MAAM,YAAY,YAAY,SAAS,CAAC;AAC9C,MAAI,CAAC,IAAK;AAEV,QAAM,eAAA;AACN,QAAM,gBAAA;AACN,QAAM,yBAAA;AACN,MAAI,SAAA;AACN;AAEA,SAAS,uBAAuB;AAC9B,MAAI,kBAAkB,OAAO,aAAa,YAAa;AACvD,mBAAiB;AACjB,iBAAe,iBAAiB,WAAW,eAAe;AAC5D;AAEA,SAAS,kBAAkB,IAAY;AACrC,QAAM,QAAQ,YAAY,UAAU,CAAC,UAAU,MAAM,OAAO,EAAE;AAC9D,MAAI,UAAU,GAAI,aAAY,OAAO,OAAO,CAAC;AAE7C,MAAI,YAAY,WAAW,KAAK,gBAAgB;AAC9C,mBAAe,oBAAoB,WAAW,eAAe;AAC7D,qBAAiB;AAAA,EACnB;AACF;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAK,MAAA;AACX,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO;AAAA,IACL,OAAO,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IAChD,OAAO,UAAU,KAAK,IAAI;AAAA,EAAA;AAE9B;AAMO,SAAS,eAAe,MAAe,UAAsB,UAAU,MAAM;AAClF,QAAM,KAAK,MAAA;AACX,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,yBAAA;AACA,gBAAY,KAAK;AAAA,MACf;AAAA,MACA,UAAU,MAAM,YAAY,QAAA;AAAA,IAAQ,CACrC;AAED,WAAO,MAAM,kBAAkB,EAAE;AAAA,EACnC,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;AACxB;AAOO,SAAS,aAAa,QAAuB;AAClD,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,kBAAc;AACd,SAAA;AACA,WAAO,MAAM;AACX,oBAAc;AACd,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACb;AAUO,SAAS,oBAA4B;AAC1C,uBAAqB,WAAW,aAAa,WAAW;AACxD,QAAM,OACJ,MAAM,WAAW,IACb,OAAO,UACP,OAAO,SAAS,MAAM,SAAS,KAAK,OAAO,YAAY,OAAO;AACpE,MAAI,eAAe,EAAG,QAAO;AAC7B,SAAO,KAAK,IAAI,MAAM,OAAO,OAAO,OAAO,iBAAiB,OAAO,sBAAsB;AAC3F;"}
+{"version":3,"file":"modalStack.js","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\n// `dismissed` marks a layer whose onEscape already ran but whose close has not\n// committed yet, so a quick second Escape reaches the layer beneath it.\ntype EscapeLayer = { id: string; dismissed: boolean; onEscape: () => void };\nconst escapeStack: EscapeLayer[] = [];\nlet escapeDocument: Document | null = null;\n// Running guided tours. A tour dims the page from `zIndex.tour`, far above the\n// modal band, so floating content opened *during* a tour (the menu a step tells\n// the user to open) has to clear that dim or it renders invisibly underneath.\nlet tourLayers = 0;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity plus the tour-layer count; it only changes\n// when an entry is pushed or popped, so subscribers re-render exactly when their\n// position could have moved.\nfunction getSnapshot() {\n  return `${tourLayers}:` + stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack.findLast((entry) => !entry.dismissed);\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.dismissed = true;\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n  const entryRef = useRef<EscapeLayer | null>(null);\n\n  // A dismissed layer that re-rendered without closing owns Escape again.\n  useEffect(() => {\n    if (entryRef.current) entryRef.current.dismissed = false;\n  });\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    const entry: EscapeLayer = { id, dismissed: false, onEscape: () => onEscapeRef.current() };\n    entryRef.current = entry;\n    escapeStack.push(entry);\n\n    return () => {\n      entryRef.current = null;\n      removeEscapeLayer(id);\n    };\n  }, [enabled, id, open]);\n}\n\n/**\n * Registers a running guided tour while `active`, so floating layers lift above\n * its dim. Symmetric with `useModalStack`, but a count rather than a stack: the\n * tour overlay does not nest.\n */\nexport function useTourLayer(active: boolean): void {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!active) return;\n    tourLayers += 1;\n    emit();\n    return () => {\n      tourLayers -= 1;\n      emit();\n    };\n  }, [active]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. While a guided tour runs, the value\n * also clears the tour's dim and step card, so a step that says \"open this menu\"\n * shows the menu rather than hiding it under the overlay. Subscribes to the\n * modal stack so the value tracks modals and tours opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  const base =\n    stack.length === 0\n      ? zIndex.popover\n      : zIndex.modal + (stack.length - 1) * zIndex.modalStep + zIndex.popoverOverModalOffset;\n  if (tourLayers === 0) return base;\n  return Math.max(base, zIndex.tour + zIndex.tourCardOffset + zIndex.popoverOverModalOffset);\n}\n"],"names":[],"mappings":";;AAOA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AAItB,MAAM,cAA6B,CAAA;AACnC,IAAI,iBAAkC;AAItC,IAAI,aAAa;AAEjB,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAKA,SAAS,cAAc;AACrB,SAAO,GAAG,UAAU,MAAM,MAAM,KAAK,IAAQ;AAC/C;AAEA,SAAS,gBAAgB,OAAsB;AAC7C,MACE,MAAM,oBACN,MAAM,QAAQ,YACd,MAAM,eACL,MAA+C,YAAY,KAC5D;AACA;AAAA,EACF;AAEA,QAAM,MAAM,YAAY,SAAS,CAAC,UAAU,CAAC,MAAM,SAAS;AAC5D,MAAI,CAAC,IAAK;AAEV,QAAM,eAAA;AACN,QAAM,gBAAA;AACN,QAAM,yBAAA;AACN,MAAI,YAAY;AAChB,MAAI,SAAA;AACN;AAEA,SAAS,uBAAuB;AAC9B,MAAI,kBAAkB,OAAO,aAAa,YAAa;AACvD,mBAAiB;AACjB,iBAAe,iBAAiB,WAAW,eAAe;AAC5D;AAEA,SAAS,kBAAkB,IAAY;AACrC,QAAM,QAAQ,YAAY,UAAU,CAAC,UAAU,MAAM,OAAO,EAAE;AAC9D,MAAI,UAAU,GAAI,aAAY,OAAO,OAAO,CAAC;AAE7C,MAAI,YAAY,WAAW,KAAK,gBAAgB;AAC9C,mBAAe,oBAAoB,WAAW,eAAe;AAC7D,qBAAiB;AAAA,EACnB;AACF;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAK,MAAA;AACX,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO;AAAA,IACL,OAAO,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IAChD,OAAO,UAAU,KAAK,IAAI;AAAA,EAAA;AAE9B;AAMO,SAAS,eAAe,MAAe,UAAsB,UAAU,MAAM;AAClF,QAAM,KAAK,MAAA;AACX,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACtB,QAAM,WAAW,OAA2B,IAAI;AAGhD,YAAU,MAAM;AACd,QAAI,SAAS,QAAS,UAAS,QAAQ,YAAY;AAAA,EACrD,CAAC;AAED,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,yBAAA;AACA,UAAM,QAAqB,EAAE,IAAI,WAAW,OAAO,UAAU,MAAM,YAAY,UAAQ;AACvF,aAAS,UAAU;AACnB,gBAAY,KAAK,KAAK;AAEtB,WAAO,MAAM;AACX,eAAS,UAAU;AACnB,wBAAkB,EAAE;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;AACxB;AAOO,SAAS,aAAa,QAAuB;AAClD,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,kBAAc;AACd,SAAA;AACA,WAAO,MAAM;AACX,oBAAc;AACd,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AACb;AAUO,SAAS,oBAA4B;AAC1C,uBAAqB,WAAW,aAAa,WAAW;AACxD,QAAM,OACJ,MAAM,WAAW,IACb,OAAO,UACP,OAAO,SAAS,MAAM,SAAS,KAAK,OAAO,YAAY,OAAO;AACpE,MAAI,eAAe,EAAG,QAAO;AAC7B,SAAO,KAAK,IAAI,MAAM,OAAO,OAAO,OAAO,iBAAiB,OAAO,sBAAsB;AAC3F;"}

package/dist/rpc/InlineError.cjs

@@ -2,19 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const button = require("../components/button.cjs");
+const ErrorDetails = require("../data/diagnostics/ErrorDetails.cjs");
 const Icon = require("../data/Icon.cjs");
-const utils = require("../lib/utils.cjs");
+const operationErrorDiagnostics = require("./operationErrorDiagnostics.cjs");
 const UiPlay = require("../icons/components/UiPlay.cjs");
-const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
 function InlineError({ title, error, className, runNow }) {
-  const message = error instanceof Error ? error.message : String(error ?? "");
-  const details = getErrorDetails(error);
-  const hasDetails = Boolean(details.responseBody || details.status || details.url);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("rounded-xl border border-dashed border-red-300 p-6 text-sm", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-red-600", children: title }),
-      message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-muted-foreground", children: message }),
-      runNow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ErrorDetails.ErrorDetails,
+    {
+      title,
+      diagnostics: operationErrorDiagnostics.operationErrorDiagnostics(error),
+      ...className ? { className } : {},
+      actions: runNow && /* @__PURE__ */ jsxRuntime.jsxs(
         button.Button,
         {
           type: "button",
@@ -28,39 +27,9 @@ function InlineError({ title, error, className, runNow }) {
             "Run now"
           ]
         }
-      ) })
-    ] }),
-    hasDetails && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group mt-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer items-center justify-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronRight.UiChevronRight, className: "transition-transform group-open:rotate-90" }),
-        "More details"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 space-y-2 text-left font-mono text-xs", children: [
-        (details.method || details.url || details.status) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground", children: [
-          details.method && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            details.method,
-            " "
-          ] }),
-          details.url,
-          details.status != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            " - ",
-            details.status
-          ] })
-        ] }),
-        details.responseBody && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-64 overflow-auto rounded-md bg-muted p-2 text-xs", children: details.responseBody })
-      ] })
-    ] })
-  ] });
-}
-function getErrorDetails(error) {
-  if (error == null || typeof error !== "object") return {};
-  const record = error;
-  const details = {};
-  if (typeof record.method === "string") details.method = record.method;
-  if (typeof record.url === "string") details.url = record.url;
-  if (typeof record.status === "number") details.status = record.status;
-  if (typeof record.responseBody === "string") details.responseBody = record.responseBody;
-  return details;
+      )
+    }
+  );
 }
 exports.InlineError = InlineError;
 //# sourceMappingURL=InlineError.cjs.map

package/dist/rpc/InlineError.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineError.cjs","sources":["../../src/rpc/InlineError.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronRight, UiPlay } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type InlineErrorProps = {\n  title: string;\n  error: unknown;\n  className?: string;\n  runNow?: {\n    onClick: () => void;\n    loading?: boolean;\n  };\n};\n\ntype ErrorDetails = {\n  method?: string;\n  url?: string;\n  status?: number;\n  responseBody?: string;\n};\n\nexport function InlineError({ title, error, className, runNow }: InlineErrorProps) {\n  const message = error instanceof Error ? error.message : String(error ?? \"\");\n  const details = getErrorDetails(error);\n  const hasDetails = Boolean(details.responseBody || details.status || details.url);\n\n  return (\n    <div className={cn(\"rounded-xl border border-dashed border-red-300 p-6 text-sm\", className)}>\n      <div className=\"text-center\">\n        <div className=\"font-medium text-red-600\">{title}</div>\n        {message && <div className=\"mt-1 text-muted-foreground\">{message}</div>}\n        {runNow && (\n          <div className=\"mt-3 flex justify-center\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={runNow.onClick}\n              loading={runNow.loading ?? false}\n              loadingLabel={runNow.loading ? \"Running…\" : undefined}\n            >\n              <Icon icon={UiPlay} />\n              Run now\n            </Button>\n          </div>\n        )}\n      </div>\n      {hasDetails && (\n        <details className=\"group mt-3\">\n          <summary className=\"flex cursor-pointer items-center justify-center gap-1 text-xs text-muted-foreground hover:text-foreground\">\n            <Icon icon={UiChevronRight} className=\"transition-transform group-open:rotate-90\" />\n            More details\n          </summary>\n          <div className=\"mt-2 space-y-2 text-left font-mono text-xs\">\n            {(details.method || details.url || details.status) && (\n              <div className=\"text-muted-foreground\">\n                {details.method && <span>{details.method} </span>}\n                {details.url}\n                {details.status != null && <span> - {details.status}</span>}\n              </div>\n            )}\n            {details.responseBody && (\n              <pre className=\"max-h-64 overflow-auto rounded-md bg-muted p-2 text-xs\">\n                {details.responseBody}\n              </pre>\n            )}\n          </div>\n        </details>\n      )}\n    </div>\n  );\n}\n\nfunction getErrorDetails(error: unknown): ErrorDetails {\n  if (error == null || typeof error !== \"object\") return {};\n  const record = error as Record<string, unknown>;\n  const details: ErrorDetails = {};\n  if (typeof record.method === \"string\") details.method = record.method;\n  if (typeof record.url === \"string\") details.url = record.url;\n  if (typeof record.status === \"number\") details.status = record.status;\n  if (typeof record.responseBody === \"string\") details.responseBody = record.responseBody;\n  return details;\n}\n"],"names":["cn","jsxs","jsx","Button","Icon","UiPlay","UiChevronRight"],"mappings":";;;;;;;;AAsBO,SAAS,YAAY,EAAE,OAAO,OAAO,WAAW,UAA4B;AACjF,QAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,SAAS,EAAE;AAC3E,QAAM,UAAU,gBAAgB,KAAK;AACrC,QAAM,aAAa,QAAQ,QAAQ,gBAAgB,QAAQ,UAAU,QAAQ,GAAG;AAEhF,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,8DAA8D,SAAS,GACxF,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,4BAA4B,UAAA,OAAM;AAAA,MAChD,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,8BAA8B,UAAA,SAAQ;AAAA,MAChE,UACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,4BACb,UAAAD,2BAAAA;AAAAA,QAACE,OAAAA;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,OAAO;AAAA,UAChB,SAAS,OAAO,WAAW;AAAA,UAC3B,cAAc,OAAO,UAAU,aAAa;AAAA,UAE5C,UAAA;AAAA,YAAAD,2BAAAA,IAACE,KAAAA,MAAA,EAAK,MAAMC,OAAAA,OAAA,CAAQ;AAAA,YAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAExB,CACF;AAAA,IAAA,GAEJ;AAAA,IACC,cACCJ,2BAAAA,KAAC,WAAA,EAAQ,WAAU,cACjB,UAAA;AAAA,MAAAA,2BAAAA,KAAC,WAAA,EAAQ,WAAU,6GACjB,UAAA;AAAA,QAAAC,2BAAAA,IAACE,KAAAA,MAAA,EAAK,MAAME,eAAAA,gBAAgB,WAAU,6CAA4C;AAAA,QAAE;AAAA,MAAA,GAEtF;AAAA,MACAL,2BAAAA,KAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,SAAA,QAAQ,UAAU,QAAQ,OAAO,QAAQ,WACzCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAA,QAAQ,0CAAW,QAAA,EAAM,UAAA;AAAA,YAAA,QAAQ;AAAA,YAAO;AAAA,UAAA,GAAC;AAAA,UACzC,QAAQ;AAAA,UACR,QAAQ,UAAU,QAAQA,2BAAAA,KAAC,QAAA,EAAK,UAAA;AAAA,YAAA;AAAA,YAAI,QAAQ;AAAA,UAAA,EAAA,CAAO;AAAA,QAAA,GACtD;AAAA,QAED,QAAQ,gBACPC,2BAAAA,IAAC,SAAI,WAAU,0DACZ,kBAAQ,aAAA,CACX;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,gBAAgB,OAA8B;AACrD,MAAI,SAAS,QAAQ,OAAO,UAAU,iBAAiB,CAAA;AACvD,QAAM,SAAS;AACf,QAAM,UAAwB,CAAA;AAC9B,MAAI,OAAO,OAAO,WAAW,SAAU,SAAQ,SAAS,OAAO;AAC/D,MAAI,OAAO,OAAO,QAAQ,SAAU,SAAQ,MAAM,OAAO;AACzD,MAAI,OAAO,OAAO,WAAW,SAAU,SAAQ,SAAS,OAAO;AAC/D,MAAI,OAAO,OAAO,iBAAiB,SAAU,SAAQ,eAAe,OAAO;AAC3E,SAAO;AACT;;"}
+{"version":3,"file":"InlineError.cjs","sources":["../../src/rpc/InlineError.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { ErrorDetails } from \"../data/diagnostics/ErrorDetails\";\nimport { Icon } from \"../data/Icon\";\nimport { UiPlay } from \"../icons\";\nimport { operationErrorDiagnostics } from \"./operationErrorDiagnostics\";\n\nexport type InlineErrorProps = {\n  title: string;\n  error: unknown;\n  className?: string;\n  runNow?: {\n    onClick: () => void;\n    loading?: boolean;\n  };\n};\n\nexport function InlineError({ title, error, className, runNow }: InlineErrorProps) {\n  return (\n    <ErrorDetails\n      title={title}\n      diagnostics={operationErrorDiagnostics(error)}\n      {...(className ? { className } : {})}\n      actions={\n        runNow && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={runNow.onClick}\n            loading={runNow.loading ?? false}\n            loadingLabel={runNow.loading ? \"Running…\" : undefined}\n          >\n            <Icon icon={UiPlay} />\n            Run now\n          </Button>\n        )\n      }\n    />\n  );\n}\n"],"names":["jsx","ErrorDetails","operationErrorDiagnostics","jsxs","Button","Icon","UiPlay"],"mappings":";;;;;;;;AAgBO,SAAS,YAAY,EAAE,OAAO,OAAO,WAAW,UAA4B;AACjF,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAaC,0BAAAA,0BAA0B,KAAK;AAAA,MAC3C,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,SACE,UACEC,2BAAAA;AAAAA,QAACC,OAAAA;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,OAAO;AAAA,UAChB,SAAS,OAAO,WAAW;AAAA,UAC3B,cAAc,OAAO,UAAU,aAAa;AAAA,UAE5C,UAAA;AAAA,YAAAJ,2BAAAA,IAACK,KAAAA,MAAA,EAAK,MAAMC,OAAAA,OAAA,CAAQ;AAAA,YAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAExB;AAAA,EAAA;AAKV;;"}

package/dist/rpc/InlineError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineError.d.ts","sourceRoot":"","sources":["../../src/rpc/InlineError.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACH,CAAC;AASF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,gBAAgB,+BAkDhF"}
+{"version":3,"file":"InlineError.d.ts","sourceRoot":"","sources":["../../src/rpc/InlineError.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,gBAAgB,+BAuBhF"}

package/dist/rpc/InlineError.js

@@ -1,18 +1,17 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../components/button.js";
+import { ErrorDetails } from "../data/diagnostics/ErrorDetails.js";
 import { Icon } from "../data/Icon.js";
-import { cn } from "../lib/utils.js";
+import { operationErrorDiagnostics } from "./operationErrorDiagnostics.js";
 import { UiPlay } from "../icons/components/UiPlay.js";
-import { UiChevronRight } from "../icons/components/UiChevronRight.js";
 function InlineError({ title, error, className, runNow }) {
-  const message = error instanceof Error ? error.message : String(error ?? "");
-  const details = getErrorDetails(error);
-  const hasDetails = Boolean(details.responseBody || details.status || details.url);
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-dashed border-red-300 p-6 text-sm", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "font-medium text-red-600", children: title }),
-      message && /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground", children: message }),
-      runNow && /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
+    ErrorDetails,
+    {
+      title,
+      diagnostics: operationErrorDiagnostics(error),
+      ...className ? { className } : {},
+      actions: runNow && /* @__PURE__ */ jsxs(
         Button,
         {
           type: "button",
@@ -26,39 +25,9 @@ function InlineError({ title, error, className, runNow }) {
             "Run now"
           ]
         }
-      ) })
-    ] }),
-    hasDetails && /* @__PURE__ */ jsxs("details", { className: "group mt-3", children: [
-      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center justify-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [
-        /* @__PURE__ */ jsx(Icon, { icon: UiChevronRight, className: "transition-transform group-open:rotate-90" }),
-        "More details"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 text-left font-mono text-xs", children: [
-        (details.method || details.url || details.status) && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
-          details.method && /* @__PURE__ */ jsxs("span", { children: [
-            details.method,
-            " "
-          ] }),
-          details.url,
-          details.status != null && /* @__PURE__ */ jsxs("span", { children: [
-            " - ",
-            details.status
-          ] })
-        ] }),
-        details.responseBody && /* @__PURE__ */ jsx("pre", { className: "max-h-64 overflow-auto rounded-md bg-muted p-2 text-xs", children: details.responseBody })
-      ] })
-    ] })
-  ] });
-}
-function getErrorDetails(error) {
-  if (error == null || typeof error !== "object") return {};
-  const record = error;
-  const details = {};
-  if (typeof record.method === "string") details.method = record.method;
-  if (typeof record.url === "string") details.url = record.url;
-  if (typeof record.status === "number") details.status = record.status;
-  if (typeof record.responseBody === "string") details.responseBody = record.responseBody;
-  return details;
+      )
+    }
+  );
 }
 export {
   InlineError

package/dist/rpc/InlineError.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineError.js","sources":["../../src/rpc/InlineError.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronRight, UiPlay } from \"../icons\";\nimport { cn } from \"../lib/utils\";\n\nexport type InlineErrorProps = {\n  title: string;\n  error: unknown;\n  className?: string;\n  runNow?: {\n    onClick: () => void;\n    loading?: boolean;\n  };\n};\n\ntype ErrorDetails = {\n  method?: string;\n  url?: string;\n  status?: number;\n  responseBody?: string;\n};\n\nexport function InlineError({ title, error, className, runNow }: InlineErrorProps) {\n  const message = error instanceof Error ? error.message : String(error ?? \"\");\n  const details = getErrorDetails(error);\n  const hasDetails = Boolean(details.responseBody || details.status || details.url);\n\n  return (\n    <div className={cn(\"rounded-xl border border-dashed border-red-300 p-6 text-sm\", className)}>\n      <div className=\"text-center\">\n        <div className=\"font-medium text-red-600\">{title}</div>\n        {message && <div className=\"mt-1 text-muted-foreground\">{message}</div>}\n        {runNow && (\n          <div className=\"mt-3 flex justify-center\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={runNow.onClick}\n              loading={runNow.loading ?? false}\n              loadingLabel={runNow.loading ? \"Running…\" : undefined}\n            >\n              <Icon icon={UiPlay} />\n              Run now\n            </Button>\n          </div>\n        )}\n      </div>\n      {hasDetails && (\n        <details className=\"group mt-3\">\n          <summary className=\"flex cursor-pointer items-center justify-center gap-1 text-xs text-muted-foreground hover:text-foreground\">\n            <Icon icon={UiChevronRight} className=\"transition-transform group-open:rotate-90\" />\n            More details\n          </summary>\n          <div className=\"mt-2 space-y-2 text-left font-mono text-xs\">\n            {(details.method || details.url || details.status) && (\n              <div className=\"text-muted-foreground\">\n                {details.method && <span>{details.method} </span>}\n                {details.url}\n                {details.status != null && <span> - {details.status}</span>}\n              </div>\n            )}\n            {details.responseBody && (\n              <pre className=\"max-h-64 overflow-auto rounded-md bg-muted p-2 text-xs\">\n                {details.responseBody}\n              </pre>\n            )}\n          </div>\n        </details>\n      )}\n    </div>\n  );\n}\n\nfunction getErrorDetails(error: unknown): ErrorDetails {\n  if (error == null || typeof error !== \"object\") return {};\n  const record = error as Record<string, unknown>;\n  const details: ErrorDetails = {};\n  if (typeof record.method === \"string\") details.method = record.method;\n  if (typeof record.url === \"string\") details.url = record.url;\n  if (typeof record.status === \"number\") details.status = record.status;\n  if (typeof record.responseBody === \"string\") details.responseBody = record.responseBody;\n  return details;\n}\n"],"names":[],"mappings":";;;;;;AAsBO,SAAS,YAAY,EAAE,OAAO,OAAO,WAAW,UAA4B;AACjF,QAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,SAAS,EAAE;AAC3E,QAAM,UAAU,gBAAgB,KAAK;AACrC,QAAM,aAAa,QAAQ,QAAQ,gBAAgB,QAAQ,UAAU,QAAQ,GAAG;AAEhF,8BACG,OAAA,EAAI,WAAW,GAAG,8DAA8D,SAAS,GACxF,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,4BAA4B,UAAA,OAAM;AAAA,MAChD,WAAW,oBAAC,OAAA,EAAI,WAAU,8BAA8B,UAAA,SAAQ;AAAA,MAChE,UACC,oBAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,OAAO;AAAA,UAChB,SAAS,OAAO,WAAW;AAAA,UAC3B,cAAc,OAAO,UAAU,aAAa;AAAA,UAE5C,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAK,MAAM,OAAA,CAAQ;AAAA,YAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAExB,CACF;AAAA,IAAA,GAEJ;AAAA,IACC,cACC,qBAAC,WAAA,EAAQ,WAAU,cACjB,UAAA;AAAA,MAAA,qBAAC,WAAA,EAAQ,WAAU,6GACjB,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAM,gBAAgB,WAAU,6CAA4C;AAAA,QAAE;AAAA,MAAA,GAEtF;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,SAAA,QAAQ,UAAU,QAAQ,OAAO,QAAQ,WACzC,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAA,QAAQ,+BAAW,QAAA,EAAM,UAAA;AAAA,YAAA,QAAQ;AAAA,YAAO;AAAA,UAAA,GAAC;AAAA,UACzC,QAAQ;AAAA,UACR,QAAQ,UAAU,QAAQ,qBAAC,QAAA,EAAK,UAAA;AAAA,YAAA;AAAA,YAAI,QAAQ;AAAA,UAAA,EAAA,CAAO;AAAA,QAAA,GACtD;AAAA,QAED,QAAQ,gBACP,oBAAC,SAAI,WAAU,0DACZ,kBAAQ,aAAA,CACX;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,gBAAgB,OAA8B;AACrD,MAAI,SAAS,QAAQ,OAAO,UAAU,iBAAiB,CAAA;AACvD,QAAM,SAAS;AACf,QAAM,UAAwB,CAAA;AAC9B,MAAI,OAAO,OAAO,WAAW,SAAU,SAAQ,SAAS,OAAO;AAC/D,MAAI,OAAO,OAAO,QAAQ,SAAU,SAAQ,MAAM,OAAO;AACzD,MAAI,OAAO,OAAO,WAAW,SAAU,SAAQ,SAAS,OAAO;AAC/D,MAAI,OAAO,OAAO,iBAAiB,SAAU,SAAQ,eAAe,OAAO;AAC3E,SAAO;AACT;"}
+{"version":3,"file":"InlineError.js","sources":["../../src/rpc/InlineError.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { ErrorDetails } from \"../data/diagnostics/ErrorDetails\";\nimport { Icon } from \"../data/Icon\";\nimport { UiPlay } from \"../icons\";\nimport { operationErrorDiagnostics } from \"./operationErrorDiagnostics\";\n\nexport type InlineErrorProps = {\n  title: string;\n  error: unknown;\n  className?: string;\n  runNow?: {\n    onClick: () => void;\n    loading?: boolean;\n  };\n};\n\nexport function InlineError({ title, error, className, runNow }: InlineErrorProps) {\n  return (\n    <ErrorDetails\n      title={title}\n      diagnostics={operationErrorDiagnostics(error)}\n      {...(className ? { className } : {})}\n      actions={\n        runNow && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={runNow.onClick}\n            loading={runNow.loading ?? false}\n            loadingLabel={runNow.loading ? \"Running…\" : undefined}\n          >\n            <Icon icon={UiPlay} />\n            Run now\n          </Button>\n        )\n      }\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgBO,SAAS,YAAY,EAAE,OAAO,OAAO,WAAW,UAA4B;AACjF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAa,0BAA0B,KAAK;AAAA,MAC3C,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,SACE,UACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,OAAO;AAAA,UAChB,SAAS,OAAO,WAAW;AAAA,UAC3B,cAAc,OAAO,UAAU,aAAa;AAAA,UAE5C,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAK,MAAM,OAAA,CAAQ;AAAA,YAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAExB;AAAA,EAAA;AAKV;"}

package/dist/rpc/OperationScheduleDialog.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const button = require("../components/button.cjs");
+const Combobox = require("../components/Combobox.cjs");
 const CopyButton = require("../components/CopyButton.cjs");
 const Field = require("../components/Field.cjs");
 const InputField = require("../components/InputField.cjs");
@@ -15,7 +16,18 @@ const InlineError = require("./InlineError.cjs");
 const OperationPicker = require("./OperationPicker.cjs");
 function OperationScheduleDialog(_props) {
   var _a, _b, _c, _d;
-  const { open, operations, schedule, cli, onClose, onSave, onRunNow } = _props;
+  const {
+    open,
+    operations,
+    schedule,
+    cli,
+    targetOptions,
+    defaultTargets,
+    targetLabel = "Targets",
+    onClose,
+    onSave,
+    onRunNow
+  } = _props;
   const [input, setInput] = react.useState(
     operationScheduleModel.newOperationScheduleInput
   );
@@ -25,16 +37,24 @@ function OperationScheduleDialog(_props) {
   react.useEffect(() => {
     if (!open) return;
     setInput(
-      schedule ? operationScheduleModel.scheduleToInput(schedule) : operationScheduleModel.newOperationScheduleInput()
+      schedule ? operationScheduleModel.scheduleToInput(schedule) : {
+        ...operationScheduleModel.newOperationScheduleInput(),
+        targets: [...defaultTargets ?? []]
+      }
     );
     setError(void 0);
     setConfirmingRun(false);
-  }, [open, schedule]);
+  }, [open, schedule, defaultTargets]);
   const operation = operationScheduleModel.operationByID(operations, input.operationId);
   const schema = operationScheduleModel.operationInputSchema(operation);
   const suggestions = ((_b = (_a = operation == null ? void 0 : operation.operation["x-clicky"]) == null ? void 0 : _a.schedule) == null ? void 0 : _b.suggestions) ?? [];
   const destructive = ((_d = (_c = operation == null ? void 0 : operation.operation["x-clicky"]) == null ? void 0 : _c.toolHints) == null ? void 0 : _d.destructiveHint) === true;
-  const cliCommand = operationCliCommand.operationCLICommand(operation, input.args, cli);
+  const cliCommand = (cli == null ? void 0 : cli.targetFlag) ? input.targets.map(
+    (target) => operationCliCommand.operationCLICommand(operation, input.args, {
+      ...cli,
+      globalFlags: { ...cli.globalFlags, [cli.targetFlag]: target }
+    })
+  ).join("\n") : operationCliCommand.operationCLICommand(operation, input.args, cli);
   const selectOperation = (operationId) => {
     const selected = operationScheduleModel.operationByID(operations, operationId);
     setInput((current) => {
@@ -64,7 +84,11 @@ function OperationScheduleDialog(_props) {
     setPending("run");
     setError(void 0);
     try {
-      await onRunNow({ operationId: input.operationId, args: input.args });
+      await onRunNow({
+        operationId: input.operationId,
+        args: input.args,
+        targets: input.targets
+      });
       setConfirmingRun(false);
       onClose();
     } catch (nextError) {
@@ -75,9 +99,9 @@ function OperationScheduleDialog(_props) {
     }
   };
   const canSave = Boolean(
-    input.name.trim() && input.operationId && input.cron.trim()
+    input.name.trim() && input.operationId && input.cron.trim() && input.targets.length
   );
-  const canRun = Boolean(input.operationId);
+  const canRun = Boolean(input.operationId && input.targets.length);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Modal.Modal,
@@ -111,6 +135,28 @@ function OperationScheduleDialog(_props) {
           )
         ] }),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Field.Field,
+            {
+              label: targetLabel,
+              htmlFor: "operation-schedule-targets",
+              required: true,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Combobox.Combobox,
+                {
+                  id: "operation-schedule-targets",
+                  multiple: true,
+                  variant: "tags",
+                  ariaLabel: targetLabel,
+                  ariaRequired: true,
+                  allowCustomValue: false,
+                  options: targetOptions,
+                  value: input.targets,
+                  onChange: (targets) => setInput({ ...input, targets })
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             Field.Field,
             {
@@ -152,7 +198,7 @@ function OperationScheduleDialog(_props) {
           cliCommand ? /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: "Equivalent CLI command" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-xs", children: cliCommand }),
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "min-w-0 flex-1 overflow-x-auto whitespace-pre text-xs", children: cliCommand }),
               /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { value: cliCommand, label: "Copy CLI command" })
             ] })
           ] }) : null,
@@ -170,7 +216,7 @@ function OperationScheduleDialog(_props) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       Modal.Modal,
       {
         open: confirmingRun,
@@ -198,7 +244,14 @@ function OperationScheduleDialog(_props) {
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "This runs the configured operation once without creating or changing a recurring schedule." })
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "This runs the configured operation once without creating or changing a recurring schedule." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-sm", children: [
+            targetLabel,
+            ": ",
+            input.targets.join(", ")
+          ] })
+        ]
       }
     )
   ] });