@flanksource/clicky-ui 0.2.19 → 0.2.21

package/dist/layout/AppSidebar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.cjs","sources":["../../src/layout/AppSidebar.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSidebar } from \"../icons\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\n\n// AppSidebar / AppLayout are a router-agnostic application shell: a collapsible\n// left navigation rail driven by declarative sections, plus a flex layout that\n// pairs it with an optional header and the routed content. Navigation and active\n// state come from the RouterAdapter (see ../rpc/router) — by default a plain\n// <a href={to}> browser adapter, or the host's react-router/memory adapter via\n// RouterProvider. The `pathname` and `renderLink` props still override the\n// adapter for cases where a rail's active state is independent of the URL.\n//\n// A section may carry flat `items` and/or collapsible `groups`. Groups are for\n// high-cardinality clusters (e.g. provider surfaces) that benefit from being\n// folded away; their open/closed state persists per `group.key`.\n\nexport interface AppNavItem {\n  /** Stable key; also used as the React key. */\n  key: string;\n  title: string;\n  /** Destination passed to renderLink (or href for external items). */\n  to: string;\n  icon?: ReactNode;\n  /** Render a plain anchor (new-tab style) instead of a routed link. */\n  external?: boolean;\n  /** Optional trailing adornment (count, status dot, etc.). */\n  badge?: ReactNode;\n}\n\nexport interface AppNavGroup {\n  /** Stable key; also the persistence key for collapsed state. */\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  /** Collapsed on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  items?: AppNavItem[];\n  /** Nested groups (one extra level, e.g. Providers > Xero). */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppNavSection {\n  /** Section heading; omitted for the leading section. */\n  label?: string;\n  items?: AppNavItem[];\n  /** Collapsible groups rendered after the flat items. */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppSidebarProps {\n  sections: AppNavSection[];\n  /** Current path for active-state. Defaults to the RouterAdapter's pathname. */\n  pathname?: string;\n  /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain\n   *  <a href={to}> unless a RouterProvider supplies a router Link). */\n  renderLink?: RenderLink;\n  /** Branding shown at the top of the expanded rail (logo/title). */\n  header?: ReactNode;\n  /** Pinned to the bottom of the rail (theme switcher, version, etc.). */\n  footer?: ReactNode;\n  /** localStorage key persisting the rail collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Override the default prefix-match active test. */\n  isActive?: (pathname: string, to: string) => boolean;\n  className?: string;\n}\n\nconst DEFAULT_COLLAPSE_KEY = \"clicky-ui:app-sidebar:collapsed\";\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-sidebar:groups\";\n\nfunction defaultIsActive(pathname: string, to: string): boolean {\n  if (to === \"/\") return pathname === \"/\";\n  return pathname === to || pathname.startsWith(`${to}/`);\n}\n\nfunction useCollapsed(storageKey: string): [boolean, () => void] {\n  const [collapsed, setCollapsed] = useState<boolean>(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.localStorage.getItem(storageKey) === \"true\";\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(storageKey, String(collapsed));\n  }, [collapsed, storageKey]);\n  return [collapsed, () => setCollapsed((c) => !c)];\n}\n\ninterface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\" ? (parsed as Record<string, boolean>) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() => readGroupState(storageKey));\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Sidebar state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nfunction flattenGroupItems(groups: AppNavGroup[]): AppNavItem[] {\n  const out: AppNavItem[] = [];\n  for (const group of groups) {\n    if (group.items) out.push(...group.items);\n    if (group.groups) out.push(...flattenGroupItems(group.groups));\n  }\n  return out;\n}\n\nexport function AppSidebar({\n  sections,\n  pathname: pathnameProp,\n  renderLink: renderLinkProp,\n  header,\n  footer,\n  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,\n  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,\n  isActive = defaultIsActive,\n  className,\n}: AppSidebarProps) {\n  const router = useRouter();\n  const pathname = pathnameProp ?? router.pathname;\n  const renderLink = renderLinkProp ?? router.renderLink;\n  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);\n  const groupState = useGroupCollapsed(groupCollapsedStorageKey);\n  return (\n    <nav\n      className={cn(\n        \"flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200\",\n        collapsed ? \"w-16\" : \"w-64\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center border-b border-border py-3\",\n          collapsed ? \"justify-center px-2\" : \"justify-between px-4\",\n        )}\n      >\n        {!collapsed && <div className=\"min-w-0 flex-1\">{header}</div>}\n        <button\n          type=\"button\"\n          onClick={toggleCollapsed}\n          aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className={cn(\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2\", collapsed ? \"px-2\" : \"px-3\")}>\n        {sections.map((section, i) => (\n          <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n            {section.label && <SectionLabel collapsed={collapsed}>{section.label}</SectionLabel>}\n            {section.items?.map((item) => (\n              <SidebarItem\n                key={item.key}\n                item={item}\n                active={isActive(pathname, item.to)}\n                collapsed={collapsed}\n                renderLink={renderLink}\n              />\n            ))}\n            {section.groups?.map((group) =>\n              collapsed ? (\n                flattenGroupItems([group]).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    item={item}\n                    active={isActive(pathname, item.to)}\n                    collapsed\n                    renderLink={renderLink}\n                  />\n                ))\n              ) : (\n                <SidebarGroup\n                  key={group.key}\n                  group={group}\n                  pathname={pathname}\n                  isActive={isActive}\n                  renderLink={renderLink}\n                  groupState={groupState}\n                />\n              ),\n            )}\n          </div>\n        ))}\n      </div>\n\n      {footer && <div className={cn(\"mt-auto border-t border-border py-3\", collapsed ? \"px-2\" : \"px-4\")}>{footer}</div>}\n    </nav>\n  );\n}\n\nfunction SidebarGroup({\n  group,\n  pathname,\n  isActive,\n  renderLink,\n  groupState,\n}: {\n  group: AppNavGroup;\n  pathname: string;\n  isActive: (pathname: string, to: string) => boolean;\n  renderLink: RenderLink;\n  groupState: GroupState;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed = groupState.isCollapsed(group.key, fallback);\n  return (\n    <div className=\"flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={() => groupState.toggle(group.key, fallback)}\n        aria-expanded={!collapsed}\n        className=\"flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40\"\n      >\n        {group.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{group.icon}</span>}\n        <span className=\"flex-1 truncate text-left\">{group.label}</span>\n        <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n          {collapsed ? \"▸\" : \"▾\"}\n        </span>\n      </button>\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2\">\n          {group.items?.map((item) => (\n            <SidebarItem\n              key={item.key}\n              item={item}\n              active={isActive(pathname, item.to)}\n              collapsed={false}\n              renderLink={renderLink}\n            />\n          ))}\n          {group.groups?.map((sub) => (\n            <SidebarGroup\n              key={sub.key}\n              group={sub}\n              pathname={pathname}\n              isActive={isActive}\n              renderLink={renderLink}\n              groupState={groupState}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SidebarItem({\n  item,\n  active,\n  collapsed,\n  renderLink,\n}: {\n  item: AppNavItem;\n  active: boolean;\n  collapsed: boolean;\n  renderLink: RenderLink;\n}) {\n  const className = cn(\n    \"flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    active && \"bg-accent font-medium text-accent-foreground\",\n  );\n  const title = collapsed ? item.title : undefined;\n  const children = (\n    <>\n      {item.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.title}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n\n  if (item.external) {\n    return (\n      <a href={item.to} className={className} title={title} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  return renderLink({ key: item.key, to: item.to, className, children, ...(title ? { title } : {}) });\n}\n\nfunction SectionLabel({ children, collapsed }: { children: ReactNode; collapsed: boolean }) {\n  if (collapsed) {\n    return <div className=\"mx-2 mb-1 mt-3 border-t border-border first:mt-2\" />;\n  }\n  return (\n    <div className=\"mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2\">\n      {children}\n    </div>\n  );\n}\n\nexport interface AppLayoutProps {\n  sidebar: ReactNode;\n  header?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** Flex shell pairing the sidebar rail with an optional header and the routed\n * content area. The content area scrolls independently of the rail. */\nexport function AppLayout({ sidebar, header, children, className }: AppLayoutProps) {\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full overflow-hidden bg-background\", className)}>\n      {sidebar}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {header}\n        <main className=\"min-h-0 min-w-0 flex-1 overflow-y-auto\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","router","useRouter","jsxs","cn","jsx","Icon","UiSidebar","Fragment"],"mappings":"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"}

package/dist/layout/AppSidebar.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { RenderLink } from '../rpc/EndpointList';
+export interface AppNavItem {
+    /** Stable key; also used as the React key. */
+    key: string;
+    title: string;
+    /** Destination passed to renderLink (or href for external items). */
+    to: string;
+    icon?: ReactNode;
+    /** Render a plain anchor (new-tab style) instead of a routed link. */
+    external?: boolean;
+    /** Optional trailing adornment (count, status dot, etc.). */
+    badge?: ReactNode;
+}
+export interface AppNavGroup {
+    /** Stable key; also the persistence key for collapsed state. */
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    /** Collapsed on first render until the user toggles it. */
+    defaultCollapsed?: boolean;
+    items?: AppNavItem[];
+    /** Nested groups (one extra level, e.g. Providers > Xero). */
+    groups?: AppNavGroup[];
+}
+export interface AppNavSection {
+    /** Section heading; omitted for the leading section. */
+    label?: string;
+    items?: AppNavItem[];
+    /** Collapsible groups rendered after the flat items. */
+    groups?: AppNavGroup[];
+}
+export interface AppSidebarProps {
+    sections: AppNavSection[];
+    /** Current path for active-state. Defaults to the RouterAdapter's pathname. */
+    pathname?: string;
+    /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain
+     *  <a href={to}> unless a RouterProvider supplies a router Link). */
+    renderLink?: RenderLink;
+    /** Branding shown at the top of the expanded rail (logo/title). */
+    header?: ReactNode;
+    /** Pinned to the bottom of the rail (theme switcher, version, etc.). */
+    footer?: ReactNode;
+    /** localStorage key persisting the rail collapsed state. */
+    collapsedStorageKey?: string;
+    /** localStorage key persisting per-group collapsed state. */
+    groupCollapsedStorageKey?: string;
+    /** Override the default prefix-match active test. */
+    isActive?: (pathname: string, to: string) => boolean;
+    className?: string;
+}
+export declare function AppSidebar({ sections, pathname: pathnameProp, renderLink: renderLinkProp, header, footer, collapsedStorageKey, groupCollapsedStorageKey, isActive, className, }: AppSidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface AppLayoutProps {
+    sidebar: ReactNode;
+    header?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/** Flex shell pairing the sidebar rail with an optional header and the routed
+ * content area. The content area scrolls independently of the rail. */
+export declare function AppLayout({ sidebar, header, children, className }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppSidebar.d.ts.map

package/dist/layout/AppSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../src/layout/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAetD,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;yEACqE;IACrE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6DAA6D;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAC1B,MAAM,EACN,MAAM,EACN,mBAA0C,EAC1C,wBAAqD,EACrD,QAA0B,EAC1B,SAAS,GACV,EAAE,eAAe,2CA0EjB;AAwGD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;uEACuE;AACvE,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAUjF"}

package/dist/layout/AppSidebar.js

@@ -0,0 +1,239 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { useRouter } from "../rpc/router.js";
+import { UiSidebar } from "../icons/components/UiSidebar.js";
+const DEFAULT_COLLAPSE_KEY = "clicky-ui:app-sidebar:collapsed";
+const DEFAULT_GROUP_COLLAPSE_KEY = "clicky-ui:app-sidebar:groups";
+function defaultIsActive(pathname, to) {
+  if (to === "/") return pathname === "/";
+  return pathname === to || pathname.startsWith(`${to}/`);
+}
+function useCollapsed(storageKey) {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.localStorage.getItem(storageKey) === "true";
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(storageKey, String(collapsed));
+  }, [collapsed, storageKey]);
+  return [collapsed, () => setCollapsed((c) => !c)];
+}
+function readGroupState(storageKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function useGroupCollapsed(storageKey) {
+  const [state, setState] = useState(() => readGroupState(storageKey));
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(state));
+    } catch {
+    }
+  }, [state, storageKey]);
+  return {
+    isCollapsed: (key, fallback) => state[key] ?? fallback,
+    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) }))
+  };
+}
+function flattenGroupItems(groups) {
+  const out = [];
+  for (const group of groups) {
+    if (group.items) out.push(...group.items);
+    if (group.groups) out.push(...flattenGroupItems(group.groups));
+  }
+  return out;
+}
+function AppSidebar({
+  sections,
+  pathname: pathnameProp,
+  renderLink: renderLinkProp,
+  header,
+  footer,
+  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,
+  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,
+  isActive = defaultIsActive,
+  className
+}) {
+  const router = useRouter();
+  const pathname = pathnameProp ?? router.pathname;
+  const renderLink = renderLinkProp ?? router.renderLink;
+  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);
+  const groupState = useGroupCollapsed(groupCollapsedStorageKey);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200",
+        collapsed ? "w-16" : "w-64",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center border-b border-border py-3",
+              collapsed ? "justify-center px-2" : "justify-between px-4"
+            ),
+            children: [
+              !collapsed && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: toggleCollapsed,
+                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                  children: /* @__PURE__ */ jsx(Icon, { icon: UiSidebar, className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2", collapsed ? "px-2" : "px-3"), children: sections.map((section, i) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            section.label && /* @__PURE__ */ jsx(SectionLabel, { collapsed, children: section.label }),
+            (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+              SidebarItem,
+              {
+                item,
+                active: isActive(pathname, item.to),
+                collapsed,
+                renderLink
+              },
+              item.key
+            )),
+            (_b = section.groups) == null ? void 0 : _b.map(
+              (group) => collapsed ? flattenGroupItems([group]).map((item) => /* @__PURE__ */ jsx(
+                SidebarItem,
+                {
+                  item,
+                  active: isActive(pathname, item.to),
+                  collapsed: true,
+                  renderLink
+                },
+                item.key
+              )) : /* @__PURE__ */ jsx(
+                SidebarGroup,
+                {
+                  group,
+                  pathname,
+                  isActive,
+                  renderLink,
+                  groupState
+                },
+                group.key
+              )
+            )
+          ] }, section.label ?? `section-${i}`);
+        }) }),
+        footer && /* @__PURE__ */ jsx("div", { className: cn("mt-auto border-t border-border py-3", collapsed ? "px-2" : "px-4"), children: footer })
+      ]
+    }
+  );
+}
+function SidebarGroup({
+  group,
+  pathname,
+  isActive,
+  renderLink,
+  groupState
+}) {
+  var _a, _b;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = groupState.isCollapsed(group.key, fallback);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => groupState.toggle(group.key, fallback),
+        "aria-expanded": !collapsed,
+        className: "flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40",
+        children: [
+          group.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: group.icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" })
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2", children: [
+      (_a = group.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx(
+        SidebarItem,
+        {
+          item,
+          active: isActive(pathname, item.to),
+          collapsed: false,
+          renderLink
+        },
+        item.key
+      )),
+      (_b = group.groups) == null ? void 0 : _b.map((sub) => /* @__PURE__ */ jsx(
+        SidebarGroup,
+        {
+          group: sub,
+          pathname,
+          isActive,
+          renderLink,
+          groupState
+        },
+        sub.key
+      ))
+    ] })
+  ] });
+}
+function SidebarItem({
+  item,
+  active,
+  collapsed,
+  renderLink
+}) {
+  const className = cn(
+    "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+    collapsed && "justify-center px-0",
+    active && "bg-accent font-medium text-accent-foreground"
+  );
+  const title = collapsed ? item.title : void 0;
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: item.icon }),
+    !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.title }),
+    !collapsed && item.badge
+  ] });
+  if (item.external) {
+    return /* @__PURE__ */ jsx("a", { href: item.to, className, title, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return renderLink({ key: item.key, to: item.to, className, children, ...title ? { title } : {} });
+}
+function SectionLabel({ children, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-border first:mt-2" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2", children });
+}
+function AppLayout({ sidebar, header, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className), children: [
+    sidebar,
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      header,
+      /* @__PURE__ */ jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children })
+    ] })
+  ] });
+}
+export {
+  AppLayout,
+  AppSidebar
+};
+//# sourceMappingURL=AppSidebar.js.map

package/dist/layout/AppSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.js","sources":["../../src/layout/AppSidebar.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSidebar } from \"../icons\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\n\n// AppSidebar / AppLayout are a router-agnostic application shell: a collapsible\n// left navigation rail driven by declarative sections, plus a flex layout that\n// pairs it with an optional header and the routed content. Navigation and active\n// state come from the RouterAdapter (see ../rpc/router) — by default a plain\n// <a href={to}> browser adapter, or the host's react-router/memory adapter via\n// RouterProvider. The `pathname` and `renderLink` props still override the\n// adapter for cases where a rail's active state is independent of the URL.\n//\n// A section may carry flat `items` and/or collapsible `groups`. Groups are for\n// high-cardinality clusters (e.g. provider surfaces) that benefit from being\n// folded away; their open/closed state persists per `group.key`.\n\nexport interface AppNavItem {\n  /** Stable key; also used as the React key. */\n  key: string;\n  title: string;\n  /** Destination passed to renderLink (or href for external items). */\n  to: string;\n  icon?: ReactNode;\n  /** Render a plain anchor (new-tab style) instead of a routed link. */\n  external?: boolean;\n  /** Optional trailing adornment (count, status dot, etc.). */\n  badge?: ReactNode;\n}\n\nexport interface AppNavGroup {\n  /** Stable key; also the persistence key for collapsed state. */\n  key: string;\n  label: string;\n  icon?: ReactNode;\n  /** Collapsed on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  items?: AppNavItem[];\n  /** Nested groups (one extra level, e.g. Providers > Xero). */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppNavSection {\n  /** Section heading; omitted for the leading section. */\n  label?: string;\n  items?: AppNavItem[];\n  /** Collapsible groups rendered after the flat items. */\n  groups?: AppNavGroup[];\n}\n\nexport interface AppSidebarProps {\n  sections: AppNavSection[];\n  /** Current path for active-state. Defaults to the RouterAdapter's pathname. */\n  pathname?: string;\n  /** Render routed links. Defaults to the RouterAdapter's renderLink (a plain\n   *  <a href={to}> unless a RouterProvider supplies a router Link). */\n  renderLink?: RenderLink;\n  /** Branding shown at the top of the expanded rail (logo/title). */\n  header?: ReactNode;\n  /** Pinned to the bottom of the rail (theme switcher, version, etc.). */\n  footer?: ReactNode;\n  /** localStorage key persisting the rail collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Override the default prefix-match active test. */\n  isActive?: (pathname: string, to: string) => boolean;\n  className?: string;\n}\n\nconst DEFAULT_COLLAPSE_KEY = \"clicky-ui:app-sidebar:collapsed\";\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-sidebar:groups\";\n\nfunction defaultIsActive(pathname: string, to: string): boolean {\n  if (to === \"/\") return pathname === \"/\";\n  return pathname === to || pathname.startsWith(`${to}/`);\n}\n\nfunction useCollapsed(storageKey: string): [boolean, () => void] {\n  const [collapsed, setCollapsed] = useState<boolean>(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.localStorage.getItem(storageKey) === \"true\";\n  });\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(storageKey, String(collapsed));\n  }, [collapsed, storageKey]);\n  return [collapsed, () => setCollapsed((c) => !c)];\n}\n\ninterface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\" ? (parsed as Record<string, boolean>) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() => readGroupState(storageKey));\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Sidebar state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nfunction flattenGroupItems(groups: AppNavGroup[]): AppNavItem[] {\n  const out: AppNavItem[] = [];\n  for (const group of groups) {\n    if (group.items) out.push(...group.items);\n    if (group.groups) out.push(...flattenGroupItems(group.groups));\n  }\n  return out;\n}\n\nexport function AppSidebar({\n  sections,\n  pathname: pathnameProp,\n  renderLink: renderLinkProp,\n  header,\n  footer,\n  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,\n  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,\n  isActive = defaultIsActive,\n  className,\n}: AppSidebarProps) {\n  const router = useRouter();\n  const pathname = pathnameProp ?? router.pathname;\n  const renderLink = renderLinkProp ?? router.renderLink;\n  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);\n  const groupState = useGroupCollapsed(groupCollapsedStorageKey);\n  return (\n    <nav\n      className={cn(\n        \"flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200\",\n        collapsed ? \"w-16\" : \"w-64\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex shrink-0 items-center border-b border-border py-3\",\n          collapsed ? \"justify-center px-2\" : \"justify-between px-4\",\n        )}\n      >\n        {!collapsed && <div className=\"min-w-0 flex-1\">{header}</div>}\n        <button\n          type=\"button\"\n          onClick={toggleCollapsed}\n          aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n          className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className={cn(\"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2\", collapsed ? \"px-2\" : \"px-3\")}>\n        {sections.map((section, i) => (\n          <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n            {section.label && <SectionLabel collapsed={collapsed}>{section.label}</SectionLabel>}\n            {section.items?.map((item) => (\n              <SidebarItem\n                key={item.key}\n                item={item}\n                active={isActive(pathname, item.to)}\n                collapsed={collapsed}\n                renderLink={renderLink}\n              />\n            ))}\n            {section.groups?.map((group) =>\n              collapsed ? (\n                flattenGroupItems([group]).map((item) => (\n                  <SidebarItem\n                    key={item.key}\n                    item={item}\n                    active={isActive(pathname, item.to)}\n                    collapsed\n                    renderLink={renderLink}\n                  />\n                ))\n              ) : (\n                <SidebarGroup\n                  key={group.key}\n                  group={group}\n                  pathname={pathname}\n                  isActive={isActive}\n                  renderLink={renderLink}\n                  groupState={groupState}\n                />\n              ),\n            )}\n          </div>\n        ))}\n      </div>\n\n      {footer && <div className={cn(\"mt-auto border-t border-border py-3\", collapsed ? \"px-2\" : \"px-4\")}>{footer}</div>}\n    </nav>\n  );\n}\n\nfunction SidebarGroup({\n  group,\n  pathname,\n  isActive,\n  renderLink,\n  groupState,\n}: {\n  group: AppNavGroup;\n  pathname: string;\n  isActive: (pathname: string, to: string) => boolean;\n  renderLink: RenderLink;\n  groupState: GroupState;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed = groupState.isCollapsed(group.key, fallback);\n  return (\n    <div className=\"flex flex-col\">\n      <button\n        type=\"button\"\n        onClick={() => groupState.toggle(group.key, fallback)}\n        aria-expanded={!collapsed}\n        className=\"flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40\"\n      >\n        {group.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{group.icon}</span>}\n        <span className=\"flex-1 truncate text-left\">{group.label}</span>\n        <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n          {collapsed ? \"▸\" : \"▾\"}\n        </span>\n      </button>\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2\">\n          {group.items?.map((item) => (\n            <SidebarItem\n              key={item.key}\n              item={item}\n              active={isActive(pathname, item.to)}\n              collapsed={false}\n              renderLink={renderLink}\n            />\n          ))}\n          {group.groups?.map((sub) => (\n            <SidebarGroup\n              key={sub.key}\n              group={sub}\n              pathname={pathname}\n              isActive={isActive}\n              renderLink={renderLink}\n              groupState={groupState}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SidebarItem({\n  item,\n  active,\n  collapsed,\n  renderLink,\n}: {\n  item: AppNavItem;\n  active: boolean;\n  collapsed: boolean;\n  renderLink: RenderLink;\n}) {\n  const className = cn(\n    \"flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    active && \"bg-accent font-medium text-accent-foreground\",\n  );\n  const title = collapsed ? item.title : undefined;\n  const children = (\n    <>\n      {item.icon && <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">{item.icon}</span>}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.title}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n\n  if (item.external) {\n    return (\n      <a href={item.to} className={className} title={title} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  return renderLink({ key: item.key, to: item.to, className, children, ...(title ? { title } : {}) });\n}\n\nfunction SectionLabel({ children, collapsed }: { children: ReactNode; collapsed: boolean }) {\n  if (collapsed) {\n    return <div className=\"mx-2 mb-1 mt-3 border-t border-border first:mt-2\" />;\n  }\n  return (\n    <div className=\"mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2\">\n      {children}\n    </div>\n  );\n}\n\nexport interface AppLayoutProps {\n  sidebar: ReactNode;\n  header?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** Flex shell pairing the sidebar rail with an optional header and the routed\n * content area. The content area scrolls independently of the rail. */\nexport function AppLayout({ sidebar, header, children, className }: AppLayoutProps) {\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full overflow-hidden bg-background\", className)}>\n      {sidebar}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {header}\n        <main className=\"min-h-0 min-w-0 flex-1 overflow-y-auto\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"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\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"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\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CA8HnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CAqInB"}

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"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\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"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\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/Modal.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const reactDom = require("react-dom");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const button = require("../components/button.cjs");
@@ -75,7 +76,7 @@ function Modal({
     };
   }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const overlay = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: utils.cn(
@@ -83,7 +84,7 @@ function Modal({
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
-      style: { zIndex: 50 + depth * 10 },
+      style: { zIndex: 1e4 + depth * 10 },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -146,6 +147,7 @@ function Modal({
       )
     }
   );
+  return typeof document !== "undefined" ? reactDom.createPortal(overlay, document.body) : null;
 }
 function ConfirmClosePrompt({
   options,

package/dist/overlay/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useModalStack } from \"./modalStack\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { isTop, depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: 50 + depth * 10 }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","_a","jsx","cn","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","Button"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useModalStack } from \"./modalStack\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { isTop, depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Above the z-[9999] popover/overlay layer (dropdowns, tooltips, toasts) so a\n      // modal opened from one of them stacks on top; +depth keeps nested modals\n      // above their parent.\n      style={{ zIndex: 10000 + depth * 10 }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\" ? createPortal(overlay, document.body) : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","_a","jsx","cn","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","createPortal","Button"],"mappings":"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"}