@flanksource/clicky-ui 0.3.24 → 0.3.26

package/dist/layout/AppShell.nav.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { Icon } from "../data/Icon.js";
 import { cn } from "../lib/utils.js";
+import { ContextMenu } from "../overlay/ContextMenu.js";
 import { useRouter } from "../rpc/router.js";
 function NavSections({
   sections,
@@ -17,14 +19,14 @@ function NavSections({
         collapsed ? "px-2" : "px-density-2"
       ),
       children: sections.map((section, index) => {
-        var _a, _b;
+        var _a, _b, _c;
         return /* @__PURE__ */ jsxs(
           "div",
           {
             className: "flex flex-col",
             children: [
               section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
-              (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+              section.variant !== "tree" && ((_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
                 NavItemRow,
                 {
                   item,
@@ -33,7 +35,7 @@ function NavSections({
                   ...onNavigate ? { onNavigate } : {}
                 },
                 item.key
-              )),
+              ))),
               (_b = section.groups) == null ? void 0 : _b.map(
                 (group) => (
                   // A collapsed rail has no room for group headings, so the whole
@@ -60,7 +62,17 @@ function NavSections({
                     group.key
                   )
                 )
-              )
+              ),
+              section.variant === "tree" && ((_c = section.items) == null ? void 0 : _c.map((item) => /* @__PURE__ */ jsx(
+                NavItemRow,
+                {
+                  item,
+                  collapsed,
+                  renderLink,
+                  ...onNavigate ? { onNavigate } : {}
+                },
+                item.key
+              )))
             ]
           },
           section.label ?? `section-${index}`
@@ -83,7 +95,9 @@ function NavGroupRows({
   groupState,
   onNavigate
 }) {
-  var _a;
+  var _a, _b;
+  const [contextTarget, setContextTarget] = useState(null);
+  const hasChildren = group.items.length > 0 || (((_a = group.groups) == null ? void 0 : _a.length) ?? 0) > 0;
   const fallback = group.defaultCollapsed ?? false;
   const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
   const toggle = () => groupState.toggle(group.key, fallback);
@@ -94,52 +108,118 @@ function NavGroupRows({
       ...typeof group.icon === "string" ? { name: group.icon } : { icon: group.icon }
     }
   ) });
+  if (!hasChildren && !group.item) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setContextTarget,
+          className: "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground",
+          children: [
+            groupIcon,
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+            group.badge
+          ]
+        }
+      ),
+      group.contextMenu && /* @__PURE__ */ jsx(
+        ContextMenu,
+        {
+          contextTarget,
+          menuLabel: group.contextMenuLabel ?? `${group.label} actions`,
+          menuItems: group.contextMenu
+        }
+      )
+    ] });
+  }
+  if (!hasChildren && group.item) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+        NavItemRow,
+        {
+          item: group.item,
+          collapsed: false,
+          renderLink,
+          ...onNavigate ? { onNavigate } : {}
+        }
+      ) }),
+      group.badge
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     group.item ? (
       // Folder AND leaf: the link and the disclosure are siblings. Nesting a
       // button inside the anchor would be invalid DOM and would make the
       // click target ambiguous.
-      /* @__PURE__ */ jsxs("div", { className: "group/nav flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
-          NavItemRow,
-          {
-            item: group.item,
-            collapsed: false,
-            renderLink,
-            ...onNavigate ? { onNavigate } : {}
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: toggle,
-            "aria-expanded": !collapsed,
-            "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group.label}`,
-            className: "shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-            children: chevron
-          }
-        )
-      ] })
-    ) : /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: toggle,
-        "aria-expanded": !collapsed,
-        className: cn(
-          "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-          variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
-        ),
-        children: [
-          groupIcon,
-          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
-          chevron
-        ]
-      }
-    ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setContextTarget,
+          className: "group/nav flex items-center gap-1",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+              NavItemRow,
+              {
+                item: group.item,
+                collapsed: false,
+                renderLink,
+                ...onNavigate ? { onNavigate } : {}
+              }
+            ) }),
+            group.badge,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggle,
+                "aria-expanded": !collapsed,
+                "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group.label}`,
+                className: "shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                children: chevron
+              }
+            ),
+            group.contextMenu && /* @__PURE__ */ jsx(
+              ContextMenu,
+              {
+                contextTarget,
+                menuLabel: group.contextMenuLabel ?? `${group.label} folder actions`,
+                menuItems: group.contextMenu
+              }
+            )
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: setContextTarget,
+          type: "button",
+          onClick: toggle,
+          "aria-expanded": !collapsed,
+          className: cn(
+            "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
+          ),
+          children: [
+            groupIcon,
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+            group.badge,
+            chevron
+          ]
+        }
+      ),
+      group.contextMenu && /* @__PURE__ */ jsx(
+        ContextMenu,
+        {
+          contextTarget,
+          menuLabel: group.contextMenuLabel ?? `${group.label} actions`,
+          menuItems: group.contextMenu
+        }
+      )
+    ] }),
     !collapsed && /* @__PURE__ */ jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2", children: [
-      group.items.map((item) => /* @__PURE__ */ jsx(
+      variant !== "tree" && group.items.map((item) => /* @__PURE__ */ jsx(
         NavItemRow,
         {
           item,
@@ -149,7 +229,7 @@ function NavGroupRows({
         },
         item.key
       )),
-      (_a = group.groups) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsx(
+      (_b = group.groups) == null ? void 0 : _b.map((child) => /* @__PURE__ */ jsx(
         NavGroupRows,
         {
           group: child,
@@ -159,6 +239,16 @@ function NavGroupRows({
           ...onNavigate ? { onNavigate } : {}
         },
         child.key
+      )),
+      variant === "tree" && group.items.map((item) => /* @__PURE__ */ jsx(
+        NavItemRow,
+        {
+          item,
+          collapsed: false,
+          renderLink,
+          ...onNavigate ? { onNavigate } : {}
+        },
+        item.key
       ))
     ] })
   ] });
@@ -169,6 +259,7 @@ function NavItemRow({
   renderLink,
   onNavigate
 }) {
+  const [contextTarget, setContextTarget] = useState(null);
   const className = cn(
     "flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     collapsed && "justify-center px-0",
@@ -186,7 +277,7 @@ function NavItemRow({
   ] });
   const title = collapsed && typeof item.label === "string" ? item.label : void 0;
   if (item.external) {
-    return /* @__PURE__ */ jsx(
+    const externalLink = /* @__PURE__ */ jsx(
       "a",
       {
         href: item.to,
@@ -198,6 +289,18 @@ function NavItemRow({
         children
       }
     );
+    if (!item.contextMenu) return externalLink;
+    return /* @__PURE__ */ jsxs("div", { ref: setContextTarget, className: "w-full", children: [
+      externalLink,
+      /* @__PURE__ */ jsx(
+        ContextMenu,
+        {
+          contextTarget,
+          menuLabel: item.contextMenuLabel ?? `${String(item.label)} actions`,
+          menuItems: item.contextMenu
+        }
+      )
+    ] });
   }
   const link = renderLink({
     key: item.key,
@@ -206,8 +309,26 @@ function NavItemRow({
     children,
     ...title ? { title } : {}
   });
-  if (!onNavigate) return link;
-  return /* @__PURE__ */ jsx("div", { onClick: onNavigate, children: link });
+  if (!onNavigate && !item.contextMenu) return link;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: item.contextMenu ? setContextTarget : void 0,
+      className: "w-full",
+      ...onNavigate ? { onClick: onNavigate } : {},
+      children: [
+        link,
+        item.contextMenu && /* @__PURE__ */ jsx(
+          ContextMenu,
+          {
+            contextTarget,
+            menuLabel: item.contextMenuLabel ?? `${String(item.label)} actions`,
+            menuItems: item.contextMenu
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   NavSections

package/dist/layout/AppShell.nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.js","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items?.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {section.groups?.map((group) =>\n            // A collapsed rail has no room for group headings, so the whole\n            // subtree flattens into the icon strip rather than hiding behind\n            // toggles the user cannot see.\n            collapsed\n              ? flattenGroup(group).map((item) => (\n                  <NavItemRow\n                    key={item.key}\n                    item={item}\n                    collapsed\n                    renderLink={renderLink}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ))\n              : (\n                  <NavGroupRows\n                    key={group.key}\n                    group={group}\n                    variant={section.variant ?? \"list\"}\n                    renderLink={renderLink}\n                    groupState={groupState}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ),\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  variant,\n  renderLink,\n  groupState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  variant: \"list\" | \"tree\";\n  renderLink: RenderLink;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div className=\"group/nav flex items-center gap-1\">\n          <div className=\"min-w-0 flex-1\">\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={!collapsed}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            variant === \"tree\"\n              ? \"text-[13px] text-sidebar-foreground\"\n              : \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n          )}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {chevron}\n        </button>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              variant={variant}\n              renderLink={renderLink}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.nav.js","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport { ContextMenu } from \"../overlay/ContextMenu\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.variant !== \"tree\" &&\n            section.items?.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={collapsed}\n                renderLink={renderLink}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n          {section.groups?.map((group) =>\n            // A collapsed rail has no room for group headings, so the whole\n            // subtree flattens into the icon strip rather than hiding behind\n            // toggles the user cannot see.\n            collapsed ? (\n              flattenGroup(group).map((item) => (\n                <NavItemRow\n                  key={item.key}\n                  item={item}\n                  collapsed\n                  renderLink={renderLink}\n                  {...(onNavigate ? { onNavigate } : {})}\n                />\n              ))\n            ) : (\n              <NavGroupRows\n                key={group.key}\n                group={group}\n                variant={section.variant ?? \"list\"}\n                renderLink={renderLink}\n                groupState={groupState}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ),\n          )}\n          {section.variant === \"tree\" &&\n            section.items?.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={collapsed}\n                renderLink={renderLink}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  variant,\n  renderLink,\n  groupState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  variant: \"list\" | \"tree\";\n  renderLink: RenderLink;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const hasChildren = group.items.length > 0 || (group.groups?.length ?? 0) > 0;\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  if (!hasChildren && !group.item) {\n    return (\n      <>\n        <div\n          ref={setContextTarget}\n          className=\"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 text-[13px] text-sidebar-foreground\"\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {group.badge}\n        </div>\n        {group.contextMenu && (\n          <ContextMenu\n            contextTarget={contextTarget}\n            menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n            menuItems={group.contextMenu}\n          />\n        )}\n      </>\n    );\n  }\n  if (!hasChildren && group.item) {\n    return (\n      <div className=\"flex items-center gap-1\">\n        <div className=\"min-w-0 flex-1\">\n          <NavItemRow\n            item={group.item}\n            collapsed={false}\n            renderLink={renderLink}\n            {...(onNavigate ? { onNavigate } : {})}\n          />\n        </div>\n        {group.badge}\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div\n          ref={setContextTarget}\n          className=\"group/nav flex items-center gap-1\"\n        >\n          <div className=\"min-w-0 flex-1\">\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          {group.badge}\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={\n                group.contextMenuLabel ?? `${group.label} folder actions`\n              }\n              menuItems={group.contextMenu}\n            />\n          )}\n        </div>\n      ) : (\n        <>\n          <button\n            ref={setContextTarget}\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            className={cn(\n              \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n              variant === \"tree\"\n                ? \"text-[13px] text-sidebar-foreground\"\n                : \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n            )}\n          >\n            {groupIcon}\n            <span className=\"flex-1 truncate text-left\">{group.label}</span>\n            {group.badge}\n            {chevron}\n          </button>\n          {group.contextMenu && (\n            <ContextMenu\n              contextTarget={contextTarget}\n              menuLabel={group.contextMenuLabel ?? `${group.label} actions`}\n              menuItems={group.contextMenu}\n            />\n          )}\n        </>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {variant !== \"tree\" &&\n            group.items.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={false}\n                renderLink={renderLink}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              variant={variant}\n              renderLink={renderLink}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {variant === \"tree\" &&\n            group.items.map((item) => (\n              <NavItemRow\n                key={item.key}\n                item={item}\n                collapsed={false}\n                renderLink={renderLink}\n                {...(onNavigate ? { onNavigate } : {})}\n              />\n            ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const [contextTarget, setContextTarget] = useState<HTMLElement | null>(null);\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    const externalLink = (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n    if (!item.contextMenu) return externalLink;\n    return (\n      <div ref={setContextTarget} className=\"w-full\">\n        {externalLink}\n        <ContextMenu\n          contextTarget={contextTarget}\n          menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n          menuItems={item.contextMenu}\n        />\n      </div>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate && !item.contextMenu) return link;\n  return (\n    <div\n      ref={item.contextMenu ? setContextTarget : undefined}\n      className=\"w-full\"\n      {...(onNavigate ? { onClick: onNavigate } : {})}\n    >\n      {link}\n      {item.contextMenu && (\n        <ContextMenu\n          contextTarget={contextTarget}\n          menuLabel={item.contextMenuLabel ?? `${String(item.label)} actions`}\n          menuItems={item.contextMenu}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/CellActions.cjs

@@ -1,150 +1,44 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("@floating-ui/react");
-const react$1 = require("react");
+const react = require("react");
 const Icon = require("../data/Icon.cjs");
 const utils = require("../lib/utils.cjs");
-const DropdownMenuSubmenu = require("./DropdownMenuSubmenu.cjs");
-const dropdownMenuContext = require("./dropdownMenuContext.cjs");
-const modalStack = require("./modalStack.cjs");
-function pointReference(x, y, contextElement) {
-  return {
-    contextElement,
-    getBoundingClientRect: () => ({
-      x,
-      y,
-      top: y,
-      left: x,
-      right: x,
-      bottom: y,
-      width: 0,
-      height: 0,
-      toJSON: () => ({})
-    })
-  };
-}
-function CellActionsRoot({
+const ContextMenu = require("./ContextMenu.cjs");
+function CellActions({
   contextTarget,
   menuLabel,
   menuItems,
   children,
   className
 }) {
-  const [open, setOpen] = react$1.useState(false);
-  const [activeIndex, setActiveIndex] = react$1.useState(null);
-  const returnFocusRef = react$1.useRef(null);
-  const elementsRef = react$1.useRef([]);
-  const floatingZ = modalStack.useFloatingZIndex();
-  const tree = react.useFloatingTree();
-  const nodeId = react.useFloatingNodeId();
-  const closeMenu = react$1.useCallback(() => {
-    setOpen(false);
-    queueMicrotask(() => {
-      var _a;
-      return (_a = returnFocusRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-    });
-  }, []);
-  const { refs, floatingStyles, context } = react.useFloating({
-    ...nodeId ? { nodeId } : {},
-    open,
-    onOpenChange: (next) => next ? setOpen(true) : closeMenu(),
-    placement: "right-start",
-    middleware: [react.offset(4), react.flip({ padding: 8 }), react.shift({ padding: 8 })],
-    whileElementsMounted: react.autoUpdate
-  });
-  const dismiss = react.useDismiss(context, { escapeKey: false });
-  const role = react.useRole(context, { role: "menu" });
-  const listNavigation = react.useListNavigation(context, {
-    listRef: elementsRef,
-    activeIndex,
-    onNavigate: setActiveIndex,
-    loop: true
-  });
-  const { getFloatingProps, getItemProps } = react.useInteractions([
-    dismiss,
-    role,
-    listNavigation
-  ]);
-  const openAt = react$1.useCallback(
-    (x, y) => {
-      if (!contextTarget || menuItems.length === 0) return;
-      const active = document.activeElement;
-      returnFocusRef.current = active instanceof HTMLElement ? active : contextTarget;
-      refs.setPositionReference(pointReference(x, y, contextTarget));
-      setActiveIndex(null);
-      setOpen(true);
-    },
-    [contextTarget, menuItems.length, refs]
-  );
-  react$1.useEffect(() => {
-    if (!contextTarget || menuItems.length === 0) return;
+  react.useEffect(() => {
+    if (!contextTarget) return;
     contextTarget.classList.add("group/cell-actions");
-    const onContextMenu = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      openAt(event.clientX, event.clientY);
-    };
-    const onKeyDown = (event) => {
-      if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const rect = contextTarget.getBoundingClientRect();
-      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));
-    };
-    contextTarget.addEventListener("contextmenu", onContextMenu);
-    contextTarget.addEventListener("keydown", onKeyDown);
-    return () => {
-      contextTarget.classList.remove("group/cell-actions");
-      contextTarget.removeEventListener("contextmenu", onContextMenu);
-      contextTarget.removeEventListener("keydown", onKeyDown);
-    };
-  }, [contextTarget, menuItems.length, openAt]);
-  react$1.useEffect(() => {
-    if (!tree) return;
-    tree.events.on("click", closeMenu);
-    return () => tree.events.off("click", closeMenu);
-  }, [closeMenu, tree]);
-  modalStack.useEscapeLayer(open, closeMenu);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.FloatingNode, { id: nodeId, children: [
+    return () => contextTarget.classList.remove("group/cell-actions");
+  }, [contextTarget]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: utils.cn("ms-1 inline-flex items-center gap-0.5 align-middle", className),
+        className: utils.cn(
+          "ms-1 inline-flex items-center gap-0.5 align-middle",
+          className
+        ),
         contentEditable: false,
         children
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, modal: false, returnFocus: false, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMenu.ContextMenu,
       {
-        ref: refs.setFloating,
-        role: "menu",
-        "aria-label": menuLabel,
-        style: { ...floatingStyles, zIndex: floatingZ },
-        className: dropdownMenuContext.MENU_POPOVER_CLASS,
-        ...getFloatingProps(),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          dropdownMenuContext.MenuContext.Provider,
-          {
-            value: {
-              getItemProps,
-              activeIndex,
-              setActiveIndex,
-              setHasFocusInside: () => {
-              },
-              isOpen: open
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubmenu.MenuItemList, { items: menuItems }) })
-          }
-        )
+        contextTarget,
+        menuLabel,
+        menuItems
       }
-    ) }) })
+    )
   ] });
 }
-function CellActions(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingTree, { children: /* @__PURE__ */ jsxRuntime.jsx(CellActionsRoot, { ...props }) });
-}
 function CellActionButton({
   label,
   icon,

package/dist/overlay/CellActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CellActions.cjs","sources":["../../src/overlay/CellActions.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  type VirtualElement,\n} from \"@floating-ui/react\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type CellActionsProps = {\n  contextTarget: HTMLElement | null;\n  menuLabel: string;\n  menuItems: DropdownMenuItem[];\n  children: ReactNode;\n  className?: string;\n};\n\nexport type CellActionButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\" | \"onClick\"\n> & {\n  label: string;\n  icon: StaticIconComponent;\n  onSelect: () => void;\n};\n\nfunction pointReference(\n  x: number,\n  y: number,\n  contextElement: HTMLElement,\n): VirtualElement {\n  return {\n    contextElement,\n    getBoundingClientRect: () => ({\n      x,\n      y,\n      top: y,\n      left: x,\n      right: x,\n      bottom: y,\n      width: 0,\n      height: 0,\n      toJSON: () => ({}),\n    }),\n  };\n}\n\nfunction CellActionsRoot({\n  contextTarget,\n  menuLabel,\n  menuItems,\n  children,\n  className,\n}: CellActionsProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n\n  const closeMenu = useCallback(() => {\n    setOpen(false);\n    queueMicrotask(() => returnFocusRef.current?.focus({ preventScroll: true }));\n  }, []);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: (next) => (next ? setOpen(true) : closeMenu()),\n    placement: \"right-start\",\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNavigation = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const { getFloatingProps, getItemProps } = useInteractions([\n    dismiss,\n    role,\n    listNavigation,\n  ]);\n\n  const openAt = useCallback(\n    (x: number, y: number) => {\n      if (!contextTarget || menuItems.length === 0) return;\n      const active = document.activeElement;\n      returnFocusRef.current = active instanceof HTMLElement ? active : contextTarget;\n      refs.setPositionReference(pointReference(x, y, contextTarget));\n      setActiveIndex(null);\n      setOpen(true);\n    },\n    [contextTarget, menuItems.length, refs],\n  );\n\n  useEffect(() => {\n    if (!contextTarget || menuItems.length === 0) return;\n    contextTarget.classList.add(\"group/cell-actions\");\n\n    const onContextMenu = (event: MouseEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      openAt(event.clientX, event.clientY);\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"ContextMenu\" && !(event.key === \"F10\" && event.shiftKey)) return;\n      event.preventDefault();\n      event.stopPropagation();\n      const rect = contextTarget.getBoundingClientRect();\n      openAt(rect.left + 8, rect.top + Math.min(rect.height, 24));\n    };\n\n    contextTarget.addEventListener(\"contextmenu\", onContextMenu);\n    contextTarget.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      contextTarget.classList.remove(\"group/cell-actions\");\n      contextTarget.removeEventListener(\"contextmenu\", onContextMenu);\n      contextTarget.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [contextTarget, menuItems.length, openAt]);\n\n  useEffect(() => {\n    if (!tree) return;\n    tree.events.on(\"click\", closeMenu);\n    return () => tree.events.off(\"click\", closeMenu);\n  }, [closeMenu, tree]);\n\n  useEscapeLayer(open, closeMenu);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <span\n        className={cn(\"ms-1 inline-flex items-center gap-0.5 align-middle\", className)}\n        contentEditable={false}\n      >\n        {children}\n      </span>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} returnFocus={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={MENU_POPOVER_CLASS}\n              {...getFloatingProps()}\n            >\n              <MenuContext.Provider\n                value={{\n                  getItemProps,\n                  activeIndex,\n                  setActiveIndex,\n                  setHasFocusInside: () => {},\n                  isOpen: open,\n                }}\n              >\n                <FloatingList elementsRef={elementsRef}>\n                  <MenuItemList items={menuItems} />\n                </FloatingList>\n              </MenuContext.Provider>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </FloatingNode>\n  );\n}\n\nexport function CellActions(props: CellActionsProps) {\n  return (\n    <FloatingTree>\n      <CellActionsRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nexport function CellActionButton({\n  label,\n  icon,\n  onSelect,\n  className,\n  title = label,\n  onMouseDown,\n  ...props\n}: CellActionButtonProps) {\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={title}\n      aria-label={label}\n      className={cn(\n        \"inline-flex size-5 items-center justify-center rounded-full p-1 text-muted-foreground opacity-70 transition-colors transition-opacity hover:bg-primary/10 hover:text-primary hover:opacity-100 focus-visible:bg-primary/10 focus-visible:text-primary focus-visible:opacity-100 focus-visible:outline-none group-hover/cell-actions:opacity-95\",\n        className,\n      )}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onSelect();\n      }}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n"],"names":["useState","useRef","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useCallback","useFloating","offset","flip","shift","autoUpdate","useDismiss","useRole","useListNavigation","useInteractions","useEffect","useEscapeLayer","jsxs","FloatingNode","jsx","cn","FloatingPortal","FloatingFocusManager","MENU_POPOVER_CLASS","MenuContext","FloatingList","MenuItemList","FloatingTree","Icon"],"mappings":"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"}
+{"version":3,"file":"CellActions.cjs","sources":["../../src/overlay/CellActions.tsx"],"sourcesContent":["import { useEffect, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { DropdownMenuItem } from \"./DropdownMenu\";\nimport { ContextMenu } from \"./ContextMenu\";\n\nexport type CellActionsProps = {\n  contextTarget: HTMLElement | null;\n  menuLabel: string;\n  menuItems: DropdownMenuItem[];\n  children: ReactNode;\n  className?: string;\n};\n\nexport type CellActionButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\" | \"onClick\"\n> & {\n  label: string;\n  icon: StaticIconComponent;\n  onSelect: () => void;\n};\n\nexport function CellActions({\n  contextTarget,\n  menuLabel,\n  menuItems,\n  children,\n  className,\n}: CellActionsProps) {\n  useEffect(() => {\n    if (!contextTarget) return;\n    contextTarget.classList.add(\"group/cell-actions\");\n    return () => contextTarget.classList.remove(\"group/cell-actions\");\n  }, [contextTarget]);\n\n  return (\n    <>\n      <span\n        className={cn(\n          \"ms-1 inline-flex items-center gap-0.5 align-middle\",\n          className,\n        )}\n        contentEditable={false}\n      >\n        {children}\n      </span>\n      <ContextMenu\n        contextTarget={contextTarget}\n        menuLabel={menuLabel}\n        menuItems={menuItems}\n      />\n    </>\n  );\n}\n\nexport function CellActionButton({\n  label,\n  icon,\n  onSelect,\n  className,\n  title = label,\n  onMouseDown,\n  ...props\n}: CellActionButtonProps) {\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={title}\n      aria-label={label}\n      className={cn(\n        \"inline-flex size-5 items-center justify-center rounded-full p-1 text-muted-foreground opacity-70 transition-colors transition-opacity hover:bg-primary/10 hover:text-primary hover:opacity-100 focus-visible:bg-primary/10 focus-visible:text-primary focus-visible:opacity-100 focus-visible:outline-none group-hover/cell-actions:opacity-95\",\n        className,\n      )}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onSelect();\n      }}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n"],"names":["useEffect","jsxs","Fragment","jsx","cn","ContextMenu","Icon"],"mappings":";;;;;;;AAuBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnBA,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,cAAe;AACpB,kBAAc,UAAU,IAAI,oBAAoB;AAChD,WAAO,MAAM,cAAc,UAAU,OAAO,oBAAoB;AAAA,EAClE,GAAG,CAAC,aAAa,CAAC;AAElB,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,iBAAiB;AAAA,QAEhB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHD,2BAAAA;AAAAA,MAACE,YAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACEF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,aAAa,CAAC,UAAU;AACtB,cAAM,eAAA;AACN,mDAAc;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,UAAU;AAClB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,iBAAA;AAAA,MACF;AAAA,MAEA,UAAAD,2BAAAA,IAACG,KAAAA,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG5C;;;"}

package/dist/overlay/CellActions.d.ts

@@ -13,6 +13,6 @@ export type CellActionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>
     icon: StaticIconComponent;
     onSelect: () => void;
 };
-export declare function CellActions(props: CellActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CellActions({ contextTarget, menuLabel, menuItems, children, className, }: CellActionsProps): import("react/jsx-runtime").JSX.Element;
 export declare function CellActionButton({ label, icon, onSelect, className, title, onMouseDown, ...props }: CellActionButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CellActions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellActions.d.ts","sourceRoot":"","sources":["../../src/overlay/CellActions.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAKL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,SAAS,CACvB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAwJF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAMlD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAa,EACb,WAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAwBvB"}
+{"version":3,"file":"CellActions.d.ts","sourceRoot":"","sources":["../../src/overlay/CellActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,SAAS,CACvB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CAyBlB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAa,EACb,WAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAwBvB"}