@omerdlw/base-framework 1.0.6 → 2.0.1

package/dist/chunk-SKBITB5X.js

@@ -0,0 +1,888 @@
+import { useOptionalDockState } from './chunk-A5RE3F6O.js';
+import { defineThemeSpec, useTheme, useModuleMotion } from './chunk-7TAVYJ3A.js';
+import { getOrCreateGlobalContext, defineModule, useRegistryEntries, useModuleRegistration } from './chunk-GF7TUX5I.js';
+import { createStore, useStore, useIsomorphicLayoutEffect, useRequiredContext, isBrowser, toArray, toFiniteNumber, report, isObject, isImageIconSource } from './chunk-TV3WEF5G.js';
+import { Icon } from './chunk-3BUP64Q6.js';
+import { useMemo, useState, useRef, useEffect, useSyncExternalStore, useLayoutEffect, useCallback, isValidElement } from 'react';
+import { usePathname } from 'next/navigation';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
+
+// src/modules/context-menu/constants.ts
+var contextMenuTheme = defineThemeSpec("context-menu");
+var CURRENT_PAGE_KEY = "current-page";
+var GLOBAL_MENU_KEY = "*";
+var MENU_SCREEN_MARGIN = 10;
+var CONTEXT_MENU_VISIBILITY_EVENT = "context-menu:visibility";
+var INITIAL_POSITION = Object.freeze({
+  x: 0,
+  y: 0
+});
+function extractNodeText(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(extractNodeText).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  }
+  if (isValidElement(value)) {
+    return extractNodeText(value.props?.children);
+  }
+  return "";
+}
+function resolveAsBoolean(value, context, defaultValue = true) {
+  if (typeof value === "function") {
+    try {
+      return Boolean(value(context));
+    } catch {
+      return false;
+    }
+  }
+  if (value === void 0) {
+    return defaultValue;
+  }
+  return Boolean(value);
+}
+function resolveAsValue(value, context, fallback) {
+  if (typeof value === "function") {
+    try {
+      const resolved = value(context);
+      return resolved === void 0 ? fallback : resolved;
+    } catch {
+      return fallback;
+    }
+  }
+  return value === void 0 ? fallback : value;
+}
+function safeInvoke(handler, ...args) {
+  if (typeof handler !== "function") return void 0;
+  try {
+    const result = handler(...args);
+    if (result && typeof result.then === "function") {
+      result.catch(
+        (err) => report("Context menu async callback", err)
+      );
+    }
+    return result;
+  } catch (error) {
+    report("Context menu callback", error);
+    return void 0;
+  }
+}
+function resolveContextMenuPageMeta(dockItem, pathname = "") {
+  if (!isObject(dockItem)) return null;
+  const title = dockItem.contextMenuTitle ?? dockItem.title ?? null;
+  const description = dockItem.contextMenuDescription ?? dockItem.description ?? null;
+  const eyebrow = dockItem.contextMenuEyebrow ?? dockItem.eyebrow ?? null;
+  const icon = dockItem.contextMenuIcon ?? dockItem.icon ?? null;
+  if (!title && !description && !icon && !eyebrow) return null;
+  return {
+    description,
+    descriptionText: extractNodeText(description),
+    eyebrow,
+    icon,
+    path: typeof dockItem.path === "string" && dockItem.path ? dockItem.path : pathname,
+    title,
+    titleText: extractNodeText(title) || (typeof dockItem.name === "string" ? dockItem.name : "") || ""
+  };
+}
+function resolveItem(item, index, context) {
+  if (!item) return null;
+  if (item === "separator" || item.type === "separator") {
+    return {
+      key: item !== "separator" && item.key || `separator-${index}`,
+      type: "separator"
+    };
+  }
+  if (resolveAsBoolean(item.hidden, context, false) || !resolveAsBoolean(item.visible, context, true)) {
+    return null;
+  }
+  const label = resolveAsValue(item.label, context, "");
+  if (typeof label !== "string" && typeof label !== "number" || !String(label).trim()) {
+    return null;
+  }
+  const handler = item.onSelect ?? item.onClick ?? null;
+  const shortcut = resolveAsValue(item.shortcut, context, null);
+  return {
+    ...item,
+    className: resolveAsValue(item.className, context, "") || "",
+    closeOnSelect: item.closeOnSelect !== false,
+    danger: resolveAsBoolean(item.danger, context, false),
+    disabled: resolveAsBoolean(item.disabled, context, false),
+    icon: resolveAsValue(item.icon, context, null) || null,
+    itemIconClassName: resolveAsValue(item.itemIconClassName, context, "") || "",
+    key: item.key || `item-${index}`,
+    label: String(label),
+    onClick: handler,
+    onSelect: handler,
+    shortcut: typeof shortcut === "string" ? shortcut : null,
+    type: "action"
+  };
+}
+function resolveMenuItems(config, context) {
+  const rawItems = resolveAsValue(config?.items, context, []);
+  const items = [];
+  toArray(rawItems).forEach((raw, index) => {
+    const item = resolveItem(raw, index, context);
+    if (!item) return;
+    const previous = items[items.length - 1];
+    if (item.type === "separator" && (!previous || previous.type === "separator")) {
+      return;
+    }
+    items.push(item);
+  });
+  if (items[items.length - 1]?.type === "separator") items.pop();
+  return items;
+}
+function resolveMenuHeader(config, context) {
+  if (config?.header === false || config?.showPageHeader === false) return null;
+  const configured = resolveAsValue(config?.header, context, null);
+  const source = isObject(configured) ? configured : isObject(context.page) ? context.page : null;
+  if (!source) return null;
+  const title = resolveAsValue(source.title, context, null);
+  const description = resolveAsValue(source.description, context, null);
+  const icon = resolveAsValue(source.icon, context, null);
+  const eyebrow = resolveAsValue(source.eyebrow, context, null);
+  if (!title && !description && !icon && !eyebrow) return null;
+  return {
+    description,
+    descriptionText: extractNodeText(description),
+    eyebrow,
+    icon,
+    title,
+    titleText: extractNodeText(title)
+  };
+}
+
+// src/modules/context-menu/resolver.ts
+function normalizeMenuCandidates(registryMenus) {
+  const candidates = [];
+  for (const [registryKey, rawConfig] of Object.entries(registryMenus || {})) {
+    if (!isObject(rawConfig)) continue;
+    const { menus, ...sharedConfig } = rawConfig;
+    const nestedMenus = toArray(menus);
+    const hasSharedItems = Array.isArray(sharedConfig.items) || typeof sharedConfig.items === "function";
+    if (hasSharedItems || nestedMenus.length === 0) {
+      candidates.push({
+        config: sharedConfig,
+        order: candidates.length,
+        registryKey
+      });
+    }
+    for (const menu of nestedMenus) {
+      candidates.push({
+        config: {
+          ...sharedConfig,
+          ...menu,
+          classNames: { ...sharedConfig.classNames, ...menu.classNames }
+        },
+        order: candidates.length,
+        registryKey
+      });
+    }
+  }
+  return candidates;
+}
+function isPathAllowed(config, registryKey, pathname) {
+  if (!pathname) return true;
+  if (config.path === pathname) return true;
+  const explicitPaths = toArray(config.paths).filter(Boolean);
+  if (explicitPaths.length > 0) return explicitPaths.includes(pathname);
+  if (typeof config.pathMatcher === "function") {
+    try {
+      return Boolean(config.pathMatcher(pathname));
+    } catch {
+      return false;
+    }
+  }
+  return registryKey === pathname || registryKey === CURRENT_PAGE_KEY || registryKey === GLOBAL_MENU_KEY;
+}
+function getElementDepth(from, ancestor) {
+  let depth = 0;
+  for (let node = from; node && node !== ancestor; node = node.parentElement) {
+    depth += 1;
+  }
+  return depth;
+}
+function getTargetScore(config, targetElement) {
+  const selectors = toArray(config.target).filter(
+    (selector) => typeof selector === "string" && selector.trim()
+  );
+  if (selectors.length === 0) return 0;
+  if (!targetElement) return null;
+  let minDepth = Infinity;
+  for (const selector of selectors) {
+    try {
+      const matched = targetElement.closest(selector);
+      if (matched) {
+        minDepth = Math.min(minDepth, getElementDepth(targetElement, matched));
+      }
+    } catch {
+    }
+  }
+  return minDepth === Infinity ? null : Math.max(0, 100 - minDepth);
+}
+function getRouteScore(config, registryKey, pathname) {
+  if (!pathname) return 0;
+  if (config.path === pathname || toArray(config.paths).includes(pathname) || registryKey === pathname) {
+    return 100;
+  }
+  if (registryKey === CURRENT_PAGE_KEY) return 70;
+  if (registryKey === GLOBAL_MENU_KEY) return 40;
+  return 10;
+}
+function buildMenuContext(config, event, pathname, targetElement) {
+  let context = {
+    currentTarget: event.currentTarget ?? null,
+    event,
+    pathname: pathname || "",
+    point: { x: Number(event.clientX) || 0, y: Number(event.clientY) || 0 },
+    target: targetElement
+  };
+  if (config.payload !== void 0) context.payload = config.payload;
+  try {
+    const payload = config.resolvePayload?.(event, context);
+    if (payload !== void 0) context.payload = payload;
+  } catch {
+  }
+  try {
+    const extra = config.resolveContext?.(event, context);
+    if (isObject(extra)) context = { ...context, ...extra };
+  } catch {
+  }
+  return context;
+}
+function isMenuOverlayTarget(element) {
+  return Boolean(
+    element?.closest?.(
+      '[data-context-menu-ignore], [data-context-menu-overlay], [role="menu"]'
+    ) || element?.classList?.contains("context-menu-overlay")
+  );
+}
+function resolveEventTarget(event) {
+  const initialTarget = event.target instanceof Element ? event.target : null;
+  if (initialTarget && !isMenuOverlayTarget(initialTarget)) {
+    return initialTarget;
+  }
+  if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) {
+    return initialTarget;
+  }
+  try {
+    const underneath = document.elementsFromPoint(event.clientX, event.clientY).find((element) => !isMenuOverlayTarget(element));
+    return underneath || initialTarget;
+  } catch {
+    return initialTarget;
+  }
+}
+function passesWhen(config, event, info) {
+  if (typeof config.when !== "function") return config.when !== false;
+  try {
+    return Boolean(config.when(event, info));
+  } catch {
+    return false;
+  }
+}
+function resolveContextMenu(registryMenus, pathname, event) {
+  const targetElement = resolveEventTarget(event);
+  let winner = null;
+  for (const { config, order, registryKey } of normalizeMenuCandidates(
+    registryMenus
+  )) {
+    if (!isPathAllowed(config, registryKey, pathname)) continue;
+    const context = buildMenuContext(config, event, pathname, targetElement);
+    if (!resolveAsBoolean(config.enabled, context, true)) continue;
+    if (!passesWhen(config, event, {
+      context,
+      pathname: pathname || "",
+      target: targetElement
+    })) {
+      continue;
+    }
+    const items = resolveMenuItems(config, context);
+    if (!items.length) continue;
+    const targetScore = getTargetScore(config, targetElement);
+    if (targetScore === null) continue;
+    const priority = Number(config.priority);
+    const score = (Number.isFinite(priority) ? priority : 0) * 1e4 + getRouteScore(config, registryKey, pathname) * 100 + targetScore;
+    if (!winner || score > winner.score) {
+      winner = { config, context, items, order, score };
+    }
+  }
+  return winner;
+}
+function prepareMenu(config, context, event) {
+  const onOpenResult = safeInvoke(config.onOpen, event, context);
+  if (onOpenResult === false) return null;
+  const nextContext = isObject(onOpenResult) ? { ...context, ...onOpenResult } : context;
+  const items = resolveMenuItems(config, nextContext);
+  return items.length ? { context: nextContext, items } : null;
+}
+
+// src/modules/context-menu/state.ts
+function createInitialMenuState() {
+  return {
+    position: INITIAL_POSITION,
+    context: null,
+    isOpen: false,
+    config: null,
+    items: []
+  };
+}
+function resolveNextOpenState({
+  config,
+  context,
+  items,
+  position
+}) {
+  if (!config) return null;
+  return {
+    config,
+    context: context ?? null,
+    isOpen: true,
+    items: items ?? [],
+    position: {
+      x: Math.round(toFiniteNumber(position?.x, 0)),
+      y: Math.round(toFiniteNumber(position?.y, 0))
+    }
+  };
+}
+function emitContextMenuVisibility(isOpen) {
+  if (!isBrowser) return;
+  window.dispatchEvent(
+    new CustomEvent(CONTEXT_MENU_VISIBILITY_EVENT, {
+      detail: { isOpen: Boolean(isOpen) }
+    })
+  );
+}
+var ContextMenuContext = getOrCreateGlobalContext(
+  "ContextMenuContext",
+  null
+);
+function selectIsOpen(state) {
+  return state.isOpen;
+}
+function ContextMenuProvider({ children }) {
+  const pathname = usePathname();
+  const [store] = useState(
+    () => createStore(createInitialMenuState(), {
+      freezeSnapshots: false
+    })
+  );
+  const isOpen = useStore(store, selectIsOpen);
+  const pathnameRef = useRef(pathname);
+  useIsomorphicLayoutEffect(() => {
+    pathnameRef.current = pathname;
+  }, [pathname]);
+  const actions = useMemo(() => {
+    const openMenu = (input) => {
+      const nextState = resolveNextOpenState(input);
+      if (nextState) store.publish(nextState);
+    };
+    const closeMenu = () => {
+      const current = store.getSnapshot();
+      if (!current.isOpen) return;
+      store.publish(createInitialMenuState());
+      safeInvoke(current.config?.onClose, current.context);
+    };
+    const bind = (payload, configOverride) => ({
+      onContextMenu: (event) => {
+        const config = configOverride || store.getSnapshot().config;
+        if (!config) return;
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        const point = {
+          x: Number(event.clientX ?? 0),
+          y: Number(event.clientY ?? 0)
+        };
+        const context = {
+          currentTarget: event.currentTarget ?? null,
+          event,
+          pathname: pathnameRef.current || "",
+          payload,
+          point,
+          target: event.target ?? null
+        };
+        const prepared = prepareMenu(config, context, event);
+        if (!prepared) return;
+        openMenu({
+          config,
+          context: prepared.context,
+          items: prepared.items,
+          position: point
+        });
+      }
+    });
+    return { bind, closeMenu, openMenu };
+  }, [store]);
+  const contextValue = useMemo(
+    () => ({ actions, store }),
+    [actions, store]
+  );
+  useEffect(() => emitContextMenuVisibility(isOpen), [isOpen]);
+  return /* @__PURE__ */ jsx(ContextMenuContext, { value: contextValue, children });
+}
+
+// src/modules/context-menu/dom.ts
+function joinClassNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var SCROLL_LOCK_KEYS = /* @__PURE__ */ new Set([
+  "ArrowDown",
+  "ArrowUp",
+  "End",
+  "Home",
+  "PageDown",
+  "PageUp",
+  " ",
+  "Spacebar"
+]);
+function isScrollLockKey(event) {
+  return SCROLL_LOCK_KEYS.has(event.key);
+}
+function positionMenu(menuElement, position) {
+  if (!menuElement) return;
+  const { height, width } = menuElement.getBoundingClientRect();
+  const maxX = window.innerWidth - width - MENU_SCREEN_MARGIN;
+  const maxY = window.innerHeight - height - MENU_SCREEN_MARGIN;
+  const x = Math.min(Number(position?.x) || 0, maxX);
+  const y = Math.min(Number(position?.y) || 0, maxY);
+  menuElement.style.left = `${Math.round(Math.max(MENU_SCREEN_MARGIN, x))}px`;
+  menuElement.style.top = `${Math.round(Math.max(MENU_SCREEN_MARGIN, y))}px`;
+}
+function getNextActiveIndex(items, current, direction) {
+  const count = items.length;
+  const start = current < 0 ? direction === 1 ? 0 : count - 1 : current + direction;
+  for (let step = 0; step < count; step++) {
+    const index = ((start + step * direction) % count + count) % count;
+    if (items[index].type === "action" && !items[index].disabled) return index;
+  }
+  return current;
+}
+function useContextMenuRegistration(config, options) {
+  useModuleRegistration("contextMenu", config, options);
+}
+function useContextMenu(config, options) {
+  useContextMenuRegistration(config || null, options);
+  const { actions, store } = useRequiredContext(
+    ContextMenuContext,
+    "useContextMenu",
+    "ContextMenuProvider"
+  );
+  const state = useStore(store);
+  const ctx = useMemo(
+    () => ({ ...state, ...actions }),
+    [actions, state]
+  );
+  return useMemo(() => {
+    if (!config) return ctx;
+    return {
+      ...ctx,
+      bind: (payload, configOverride) => ctx.bind(payload, { ...config, ...configOverride })
+    };
+  }, [config, ctx]);
+}
+function useContextMenuActions() {
+  return useRequiredContext(
+    ContextMenuContext,
+    "useContextMenuActions",
+    "ContextMenuProvider"
+  ).actions;
+}
+function useContextMenuState() {
+  const { store } = useRequiredContext(
+    ContextMenuContext,
+    "useContextMenuState",
+    "ContextMenuProvider"
+  );
+  return useStore(store);
+}
+function selectDockPageCard(dock) {
+  const card = dock.activeItem;
+  return card && !card.isSurface ? card : null;
+}
+function useContextMenuListener() {
+  const menus = useRegistryEntries(
+    "contextMenu"
+  );
+  const dockCard = useOptionalDockState(selectDockPageCard);
+  const { openMenu } = useContextMenuActions();
+  const pathname = usePathname();
+  useEffect(() => {
+    const handleContextMenu = (event) => {
+      const match = resolveContextMenu(menus, pathname || void 0, event);
+      if (!match) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const page = resolveContextMenuPageMeta(dockCard, pathname || "");
+      const prepared = prepareMenu(
+        match.config,
+        page ? { ...match.context, page } : match.context,
+        event
+      );
+      if (!prepared) return;
+      openMenu({
+        config: match.config,
+        context: prepared.context,
+        items: prepared.items,
+        position: { x: event.clientX, y: event.clientY }
+      });
+    };
+    document.addEventListener("contextmenu", handleContextMenu, true);
+    return () => document.removeEventListener("contextmenu", handleContextMenu, true);
+  }, [dockCard, menus, openMenu, pathname]);
+}
+function useMenuDismissal(menuRef, onClose) {
+  useEffect(() => {
+    const preventScroll = (event) => event.preventDefault();
+    const listenerOptions = { capture: true, passive: false };
+    const handleInteraction = (event) => {
+      const isInside = menuRef.current?.contains(event.target);
+      if (event.type === "keydown") {
+        if (event.key === "Escape") onClose();
+        if (!isInside && isScrollLockKey(event)) {
+          event.preventDefault();
+        }
+      } else if (!isInside) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleInteraction, true);
+    document.addEventListener("keydown", handleInteraction, true);
+    window.addEventListener("wheel", preventScroll, listenerOptions);
+    window.addEventListener("touchmove", preventScroll, listenerOptions);
+    return () => {
+      document.removeEventListener("mousedown", handleInteraction, true);
+      document.removeEventListener("keydown", handleInteraction, true);
+      window.removeEventListener("wheel", preventScroll, true);
+      window.removeEventListener("touchmove", preventScroll, true);
+    };
+  }, [menuRef, onClose]);
+}
+function useContextMenuContentModel({
+  config,
+  items,
+  menuContext,
+  onClose,
+  position
+}) {
+  const menuRef = useRef(null);
+  const itemRefs = useRef([]);
+  const theme = useTheme(contextMenuTheme);
+  const classes = useMemo(() => {
+    const overrides = config.classNames ?? {};
+    const merged = { ...theme.slots };
+    for (const slot of Object.keys(merged)) {
+      merged[slot] = joinClassNames(theme.slots[slot], overrides[slot]);
+    }
+    return merged;
+  }, [config.classNames, theme.slots]);
+  const header = useMemo(
+    () => resolveMenuHeader(config, menuContext),
+    [config, menuContext]
+  );
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [prevItems, setPrevItems] = useState(items);
+  if (items !== prevItems) {
+    setPrevItems(items);
+    setActiveIndex(-1);
+  }
+  useLayoutEffect(() => {
+    itemRefs.current = [];
+    positionMenu(menuRef.current, position);
+  }, [header, items, position]);
+  useEffect(() => {
+    const target = activeIndex < 0 ? menuRef.current : itemRefs.current[activeIndex];
+    target?.focus({ preventScroll: true });
+  }, [activeIndex]);
+  useMenuDismissal(menuRef, onClose);
+  const handleItemSelect = useCallback(
+    (item, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (item.disabled) return;
+      safeInvoke(item.onSelect || item.onClick, event, menuContext);
+      if (item.closeOnSelect !== false) onClose();
+    },
+    [menuContext, onClose]
+  );
+  const handleMenuKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex(
+        (current) => getNextActiveIndex(items, current, direction)
+      );
+    } else if ((event.key === "Enter" || event.key === " ") && items[activeIndex]) {
+      event.preventDefault();
+      handleItemSelect(items[activeIndex], event);
+    }
+  };
+  return {
+    menuRef,
+    itemRefs,
+    classes,
+    styles: theme.styles,
+    header,
+    activeIndex,
+    setActiveIndex,
+    handleItemSelect,
+    handleMenuKeyDown
+  };
+}
+
+// src/modules/context-menu/motion.ts
+function useContextMenuMotion() {
+  return useModuleMotion(contextMenuTheme);
+}
+function ContextMenuHeaderIcon({
+  classes,
+  icon
+}) {
+  const iconClassName = classes.headerIcon;
+  if (isImageIconSource(icon)) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: iconClassName,
+        style: { backgroundImage: `url(${icon})` }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: iconClassName, children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { icon, size: 20 }) : icon });
+}
+function ContextMenuHeader({
+  classes,
+  header
+}) {
+  if (!header) return null;
+  return /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+    header.icon && /* @__PURE__ */ jsx(ContextMenuHeaderIcon, { classes, icon: header.icon }),
+    /* @__PURE__ */ jsxs("div", { className: classes.headerText, children: [
+      header.eyebrow && /* @__PURE__ */ jsx("div", { className: classes.headerEyebrow, children: header.eyebrow }),
+      header.title && /* @__PURE__ */ jsx("div", { className: classes.headerTitle, children: header.title }),
+      header.description && /* @__PURE__ */ jsx("div", { className: classes.headerDescription, children: header.description })
+    ] })
+  ] });
+}
+function ContextMenuItem({
+  classes,
+  isActive,
+  item,
+  onHover,
+  onSelect,
+  setButtonRef
+}) {
+  const menuMotion = useContextMenuMotion();
+  if (item.type === "separator") {
+    return /* @__PURE__ */ jsx("div", { className: classes.separator, role: "separator" });
+  }
+  const itemClassName = joinClassNames(classes.item, item.className);
+  const itemIconClassName = joinClassNames(
+    classes.itemIcon,
+    item.itemIconClassName
+  );
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      ref: setButtonRef,
+      className: itemClassName,
+      "data-active": isActive ? "true" : void 0,
+      "aria-disabled": item.disabled,
+      disabled: item.disabled,
+      role: "menuitem",
+      type: "button",
+      whileTap: menuMotion.itemTap,
+      transition: menuMotion.itemTransition,
+      onMouseEnter: onHover,
+      onClick: (event) => onSelect(item, event),
+      children: [
+        item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { icon: item.icon, className: itemIconClassName, size: 18 }) : item.icon),
+        /* @__PURE__ */ jsx("span", { className: classes.itemLabel, children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx("span", { className: classes.itemShortcut, children: item.shortcut })
+      ]
+    }
+  );
+}
+var EMPTY_MENU_CONTEXT = Object.freeze({
+  pathname: "",
+  point: { x: 0, y: 0 }
+});
+function ContextMenuContent({
+  config,
+  items,
+  menuContext,
+  onClose,
+  position
+}) {
+  const {
+    menuRef,
+    itemRefs,
+    classes,
+    styles,
+    header,
+    activeIndex,
+    setActiveIndex,
+    handleItemSelect,
+    handleMenuKeyDown
+  } = useContextMenuContentModel({
+    config,
+    items,
+    menuContext,
+    onClose,
+    position
+  });
+  const menuMotion = useContextMenuMotion();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-context-menu-overlay": true,
+        className: classes.backdrop,
+        onMouseDown: onClose,
+        style: styles.backdrop
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: menuRef,
+        "data-context-menu-ignore": true,
+        variants: menuMotion.pop,
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        className: classes.menu,
+        role: "menu",
+        tabIndex: -1,
+        style: {
+          ...styles.menu,
+          left: position.x || 0,
+          top: position.y || 0,
+          position: "fixed"
+        },
+        onMouseLeave: () => setActiveIndex(-1),
+        onKeyDown: handleMenuKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              variants: menuMotion.content,
+              initial: "hidden",
+              animate: "visible",
+              children: /* @__PURE__ */ jsx(ContextMenuHeader, { classes, header })
+            }
+          ),
+          items.map((item, index) => /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              variants: menuMotion.item,
+              custom: index,
+              initial: "hidden",
+              animate: "visible",
+              children: /* @__PURE__ */ jsx(
+                ContextMenuItem,
+                {
+                  item,
+                  classes,
+                  isActive: index === activeIndex,
+                  onHover: () => {
+                    if (item.type === "action" && !item.disabled) {
+                      setActiveIndex(index);
+                    }
+                  },
+                  setButtonRef: (node) => {
+                    itemRefs.current[index] = node;
+                  },
+                  onSelect: handleItemSelect
+                }
+              )
+            },
+            item.key || `menu-item-${index}`
+          ))
+        ]
+      }
+    )
+  ] });
+}
+var emptySubscribe = () => () => {
+};
+function ContextMenuRenderer() {
+  const { closeMenu, config, context, isOpen, items, position } = useContextMenu();
+  const isMounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+  if (!isMounted) return null;
+  const menuContext = context ?? EMPTY_MENU_CONTEXT;
+  const resolvedItems = items.length ? items : resolveMenuItems(config, menuContext);
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && config && resolvedItems.length > 0 && /* @__PURE__ */ jsx(
+      ContextMenuContent,
+      {
+        config,
+        items: resolvedItems,
+        menuContext,
+        position,
+        onClose: closeMenu
+      },
+      "context-menu-content"
+    ) }),
+    document.body
+  );
+}
+function ContextMenuGlobal() {
+  useContextMenuListener();
+  return /* @__PURE__ */ jsx(ContextMenuRenderer, {});
+}
+function selectPageContextMenu(config) {
+  return config.contextMenu ?? null;
+}
+function useContextMenuPage(_slice, page) {
+  const actions = useContextMenuActions();
+  return useMemo(
+    () => ({
+      ...actions,
+      set: (contextMenu) => page.set({ contextMenu })
+    }),
+    [actions, page]
+  );
+}
+var contextMenuModule = defineModule({
+  id: "contextMenu",
+  context: ContextMenuContext,
+  Provider: ContextMenuProvider,
+  uses: ["dock"],
+  Overlay: ContextMenuGlobal,
+  registry: {
+    cleanupDelayMs: 600,
+    keyPolicy: "route",
+    lifecycle: "immediate",
+    reservedKeys: [CURRENT_PAGE_KEY, GLOBAL_MENU_KEY]
+  },
+  page: {
+    select: selectPageContextMenu,
+    entries: (slice, { pathname }) => [
+      { key: pathname || CURRENT_PAGE_KEY, value: slice }
+    ],
+    use: useContextMenuPage
+  }
+});
+function defineContextMenu(definition = {}) {
+  return Object.freeze({
+    config: definition,
+    id: definition.id ?? "context-menu",
+    use: function useDefinedContextMenu(options = {}) {
+      return useContextMenu({ ...definition, ...options });
+    }
+  });
+}
+
+export { CONTEXT_MENU_VISIBILITY_EVENT, CURRENT_PAGE_KEY, ContextMenuContext, ContextMenuGlobal, ContextMenuHeader, ContextMenuHeaderIcon, ContextMenuItem, ContextMenuProvider, ContextMenuRenderer, GLOBAL_MENU_KEY, INITIAL_POSITION, MENU_SCREEN_MARGIN, contextMenuModule, contextMenuTheme, createInitialMenuState, defineContextMenu, emitContextMenuVisibility, extractNodeText, getNextActiveIndex, isScrollLockKey, joinClassNames, positionMenu, prepareMenu, resolveAsBoolean, resolveAsValue, resolveContextMenu, resolveContextMenuPageMeta, resolveMenuHeader, resolveMenuItems, resolveNextOpenState, safeInvoke, useContextMenu, useContextMenuActions, useContextMenuContentModel, useContextMenuListener, useContextMenuRegistration, useContextMenuState, useMenuDismissal };
+//# sourceMappingURL=chunk-SKBITB5X.js.map
+//# sourceMappingURL=chunk-SKBITB5X.js.map