@ktnpm_devops/react-component 0.1.1 → 0.2.0

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/composites/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { CONTEXT_MENU_MARGIN } from '../../constants';\nimport clsx from 'clsx';\nimport styles from './ContextMenu.module.css';\n\nexport interface ContextMenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuProps {\n  /** Horizontal position (px from left). */\n  x: number;\n  /** Vertical position (px from top). */\n  y: number;\n  /** Menu items to render. */\n  items: ContextMenuItem[];\n  /** Called when the menu should close. */\n  onClose: () => void;\n}\n\nexport const ContextMenu = ({ x, y, items, onClose }: ContextMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  useEscapeKey(onClose);\n\n  const adjustPosition = useCallback(() => {\n    if (!menuRef.current) return;\n    const rect = menuRef.current.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let ax = x;\n    let ay = y;\n    if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;\n    if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;\n    menuRef.current.style.left = `${ax}px`;\n    menuRef.current.style.top = `${ay}px`;\n  }, [x, y]);\n\n  useEffect(() => { adjustPosition(); }, [adjustPosition]);\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();\n    };\n    const handleScroll = () => onClose();\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('scroll', handleScroll, true);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('scroll', handleScroll, true);\n    };\n  }, [onClose]);\n\n  const handleItemClick = (item: ContextMenuItem) => {\n    if (item.disabled) return;\n    item.onClick();\n    onClose();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < items.length) {\n      e.preventDefault();\n      handleItemClick(items[focusedIndex]);\n    }\n  };\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      className={styles.root}\n      style={{ left: x, top: y }}\n      role=\"menu\"\n      aria-label=\"Context menu\"\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={clsx(styles.item, {\n            [styles.disabled]: item.disabled,\n            [styles.focused]: i === focusedIndex,\n          })}\n          onClick={() => handleItemClick(item)}\n          role=\"menuitem\"\n          aria-disabled={item.disabled || undefined}\n          tabIndex={i === focusedIndex ? 0 : -1}\n        >\n          {item.icon && <span className={styles.icon}>{item.icon}</span>}\n          <span>{item.label}</span>\n        </button>\n      ))}\n    </div>,\n    document.body,\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAyBO,MAAM,cAAc,CAAC,EAAE,GAAG,GAAG,OAAO,cAAgC;AACzE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AAEnD,eAAa,OAAO;AAEpB,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,CAAC,QAAQ,QAAS;AACtB,UAAM,OAAO,QAAQ,QAAQ,sBAAA;AAC7B,UAAM,KAAK,OAAO;AAClB,UAAM,KAAK,OAAO;AAClB,QAAI,KAAK;AACT,QAAI,KAAK;AACT,QAAI,IAAI,KAAK,QAAQ,KAAK,oBAAqB,MAAK,KAAK,KAAK,QAAQ;AACtE,QAAI,IAAI,KAAK,SAAS,KAAK,oBAAqB,MAAK,KAAK,KAAK,SAAS;AACxE,YAAQ,QAAQ,MAAM,OAAO,GAAG,EAAE;AAClC,YAAQ,QAAQ,MAAM,MAAM,GAAG,EAAE;AAAA,EACnC,GAAG,CAAC,GAAG,CAAC,CAAC;AAET,YAAU,MAAM;AAAE,mBAAA;AAAA,EAAkB,GAAG,CAAC,cAAc,CAAC;AAEvD,YAAU,MAAM;AACd,UAAM,cAAc,CAAC,MAAkB;AACrC,UAAI,QAAQ,WAAW,CAAC,QAAQ,QAAQ,SAAS,EAAE,MAAc,EAAG,SAAA;AAAA,IACtE;AACA,UAAM,eAAe,MAAM,QAAA;AAC3B,aAAS,iBAAiB,aAAa,WAAW;AAClD,WAAO,iBAAiB,UAAU,cAAc,IAAI;AACpD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AACrD,aAAO,oBAAoB,UAAU,cAAc,IAAI;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,kBAAkB,CAAC,SAA0B;AACjD,QAAI,KAAK,SAAU;AACnB,SAAK,QAAA;AACL,YAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,MAAM,SAAS,CAAC,CAAC;AAAA,IAChE,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAAA,IACjD,WAAW,EAAE,QAAQ,WAAW,gBAAgB,KAAK,eAAe,MAAM,QAAQ;AAChF,QAAE,eAAA;AACF,sBAAgB,MAAM,YAAY,CAAC;AAAA,IACrC;AAAA,EACF;AAEA,MAAI,OAAO,aAAa,YAAa,QAAO;AAE5C,SAAO;AAAA,IACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,MAAM,GAAG,KAAK,EAAA;AAAA,QACvB,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAA,MAAM,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAW,KAAK,OAAO,MAAM;AAAA,cAC3B,CAAC,OAAO,QAAQ,GAAG,KAAK;AAAA,cACxB,CAAC,OAAO,OAAO,GAAG,MAAM;AAAA,YAAA,CACzB;AAAA,YACD,SAAS,MAAM,gBAAgB,IAAI;AAAA,YACnC,MAAK;AAAA,YACL,iBAAe,KAAK,YAAY;AAAA,YAChC,UAAU,MAAM,eAAe,IAAI;AAAA,YAElC,UAAA;AAAA,cAAA,KAAK,QAAQ,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAO,eAAK,KAAA,CAAK;AAAA,cACvD,oBAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAZb,KAAK;AAAA,QAAA,CAcb;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"index13.js","sources":["../src/composites/ChartExpandModal/ChartExpandModal.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { CHART_MODAL, VIEWPORT_MARGIN, ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport clsx from 'clsx';\nimport styles from './ChartExpandModal.module.css';\n\nexport interface ChartExpandModalProps {\n  /** Title displayed in the modal header. */\n  title: string;\n  /** Content to render inside the modal body. */\n  children: ReactNode;\n  /** Called when the modal should close. */\n  onClose: () => void;\n  /** Enable resize handles on the modal. */\n  resizable?: boolean;\n  /** Default modal dimensions in pixels. */\n  defaultSize?: { width?: number; height?: number };\n  /** Additional actions rendered in the header. */\n  actions?: ReactNode;\n}\n\nconst getInitialSize = (override?: { width?: number; height?: number }) => {\n  if (typeof window === 'undefined') {\n    return {\n      width: override?.width ?? CHART_MODAL.FALLBACK_WIDTH,\n      height: override?.height ?? CHART_MODAL.FALLBACK_HEIGHT,\n    };\n  }\n  const w = Math.min(override?.width ?? CHART_MODAL.DEFAULT_WIDTH, window.innerWidth - VIEWPORT_MARGIN);\n  const h = Math.min(override?.height ?? CHART_MODAL.DEFAULT_HEIGHT, window.innerHeight - VIEWPORT_MARGIN);\n  return { width: Math.max(w, CHART_MODAL.MIN_WIDTH), height: Math.max(h, CHART_MODAL.MIN_HEIGHT) };\n};\n\nexport const ChartExpandModal = ({\n  title,\n  children,\n  onClose,\n  resizable = false,\n  defaultSize,\n  actions,\n}: ChartExpandModalProps) => {\n  const [size, setSize] = useState(() => getInitialSize(defaultSize));\n  const [isReady, setIsReady] = useState(false);\n  const bodyRef = useRef<HTMLDivElement>(null);\n\n  useEscapeKey(onClose);\n\n  useEffect(() => {\n    if (!resizable) return;\n    const handleResize = () => setSize(getInitialSize(defaultSize));\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [resizable, defaultSize]);\n\n  useEffect(() => {\n    const check = () => {\n      const body = bodyRef.current;\n      if (body && body.clientWidth > 0 && body.clientHeight > 0) {\n        setIsReady(true);\n      } else {\n        requestAnimationFrame(check);\n      }\n    };\n    requestAnimationFrame(check);\n  }, []);\n\n  const handleResizeStart = useCallback(\n    (e: React.MouseEvent | React.TouchEvent) => {\n      if (!resizable || typeof window === 'undefined') return;\n      e.preventDefault();\n      const startX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;\n      const startY = 'touches' in e ? e.touches[0]?.clientY ?? 0 : e.clientY;\n      const startW = size.width;\n      const startH = size.height;\n\n      const handleMove = (ev: MouseEvent | TouchEvent) => {\n        const cx = ev instanceof TouchEvent ? ev.touches[0]?.clientX ?? 0 : (ev as MouseEvent).clientX;\n        const cy = ev instanceof TouchEvent ? ev.touches[0]?.clientY ?? 0 : (ev as MouseEvent).clientY;\n        const maxW = Math.min(window.innerWidth - VIEWPORT_MARGIN, CHART_MODAL.MAX_WIDTH);\n        const maxH = Math.min(window.innerHeight - VIEWPORT_MARGIN, CHART_MODAL.MAX_HEIGHT);\n        setSize({\n          width: Math.min(Math.max(startW + (cx - startX), CHART_MODAL.MIN_WIDTH), maxW),\n          height: Math.min(Math.max(startH + (cy - startY), CHART_MODAL.MIN_HEIGHT), maxH),\n        });\n      };\n\n      const handleUp = () => {\n        window.removeEventListener('mousemove', handleMove);\n        window.removeEventListener('mouseup', handleUp);\n        window.removeEventListener('touchmove', handleMove as EventListener);\n        window.removeEventListener('touchend', handleUp);\n      };\n\n      window.addEventListener('mousemove', handleMove);\n      window.addEventListener('mouseup', handleUp);\n      window.addEventListener('touchmove', handleMove as EventListener, { passive: false });\n      window.addEventListener('touchend', handleUp);\n    },\n    [resizable, size],\n  );\n\n  if (typeof document === 'undefined') return null;\n\n  const modalStyle = resizable ? { width: `${size.width}px`, height: `${size.height}px` } : undefined;\n\n  return createPortal(\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.modal, { [styles.resizable]: resizable })} style={modalStyle}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n          <div className={styles.headerActions}>\n            {actions}\n            <button type=\"button\" className={styles.close} onClick={onClose} aria-label=\"Close expanded chart\">\n              <svg width={ICON_SIZE.LG} height={ICON_SIZE.LG} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </button>\n          </div>\n        </header>\n        <div className={styles.body} ref={bodyRef}>\n          {isReady ? children : <div className={styles.loading}>Loading chart...</div>}\n        </div>\n        {resizable && (\n          <div className={styles.resizeHandle} onMouseDown={handleResizeStart} onTouchStart={handleResizeStart}>\n            <span />\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n};\n"],"names":["_a","_b"],"mappings":"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"}

package/dist/index14.cjs

@@ -1,125 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const clsx = require("./index23.cjs");
-const useClickOutside = require("./index3.cjs");
-const useEscapeKey = require("./index4.cjs");
-const format = require("./index6.cjs");
-const CustomRangePicker_module = require("./index36.cjs");
-const formatInputValue = (iso) => {
-  if (!iso) return "";
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return "";
-  const y = date.getFullYear();
-  const m = `${date.getMonth() + 1}`.padStart(2, "0");
-  const d = `${date.getDate()}`.padStart(2, "0");
-  const h = `${date.getHours()}`.padStart(2, "0");
-  const min = `${date.getMinutes()}`.padStart(2, "0");
-  return `${y}-${m}-${d}T${h}:${min}`;
-};
-const toLocalTimestamp = (value) => {
-  if (!value) return null;
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return null;
-  return format.formatLocalISOString(date);
-};
-const CustomRangePicker = ({ from, to, onApply }) => {
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [startValue, setStartValue] = react.useState(() => formatInputValue(from));
-  const [endValue, setEndValue] = react.useState(() => formatInputValue(to));
-  const [error, setError] = react.useState(null);
-  const containerRef = react.useRef(null);
-  const isActive = Boolean(from && to);
-  const close = react.useCallback(() => setIsOpen(false), []);
-  useClickOutside.useClickOutside(containerRef, close);
-  useEscapeKey.useEscapeKey(close, isOpen);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    setStartValue(formatInputValue(from));
-    setEndValue(formatInputValue(to));
-    setError(null);
-  }, [from, to, isOpen]);
-  const summary = react.useMemo(() => {
-    if (!from || !to) return null;
-    const s = new Date(from);
-    const e = new Date(to);
-    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;
-    const fmt = new Intl.DateTimeFormat(void 0, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-    return `${fmt.format(s)} – ${fmt.format(e)}`;
-  }, [from, to]);
-  const handleApply = () => {
-    const startIso = toLocalTimestamp(startValue);
-    const endIso = toLocalTimestamp(endValue);
-    if (!startIso || !endIso) {
-      setError("Both start and end date are required.");
-      return;
-    }
-    if (startIso >= endIso) {
-      setError("End of range must be after the start.");
-      return;
-    }
-    onApply({ from: startIso, to: endIso });
-    setIsOpen(false);
-  };
-  const handleCancel = () => {
-    setStartValue(formatInputValue(from));
-    setEndValue(formatInputValue(to));
-    setError(null);
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CustomRangePicker_module.default.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: clsx.clsx(CustomRangePicker_module.default.chip, { [CustomRangePicker_module.default.active]: isActive }),
-        onClick: () => setIsOpen((v) => !v),
-        children: "Custom"
-      }
-    ),
-    summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: CustomRangePicker_module.default.summary, children: summary }),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CustomRangePicker_module.default.popover, role: "dialog", "aria-modal": "false", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: CustomRangePicker_module.default.popoverHeader, children: /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "Custom Time Range" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CustomRangePicker_module.default.fields, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: CustomRangePicker_module.default.field, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Start" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "datetime-local",
-              value: startValue,
-              onChange: (e) => setStartValue(e.target.value),
-              max: endValue || void 0
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: CustomRangePicker_module.default.field, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "End" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "datetime-local",
-              value: endValue,
-              onChange: (e) => setEndValue(e.target.value),
-              min: startValue || void 0
-            }
-          )
-        ] })
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: CustomRangePicker_module.default.error, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: CustomRangePicker_module.default.actions, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: CustomRangePicker_module.default.btnGhost, onClick: handleCancel, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: CustomRangePicker_module.default.btnPrimary, onClick: handleApply, children: "Apply" })
-      ] })
-    ] })
-  ] });
-};
-exports.CustomRangePicker = CustomRangePicker;
+const clsx = require("./index35.cjs");
+const ChatLayout_module = require("./index64.cjs");
+const ChatLayout = ({
+  sidebar,
+  conversationList,
+  messageArea,
+  inputArea,
+  sidebarCollapsed = false,
+  showConversationList = true,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(ChatLayout_module.default.root, className), children: [
+  sidebar && !sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: ChatLayout_module.default.sidebar, children: sidebar }),
+  conversationList && showConversationList && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: ChatLayout_module.default.conversationList, children: conversationList }),
+  /* @__PURE__ */ jsxRuntime.jsxs("main", { className: ChatLayout_module.default.mainArea, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ChatLayout_module.default.messages, children: messageArea }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ChatLayout_module.default.input, children: inputArea })
+  ] })
+] });
+ChatLayout.displayName = "ChatLayout";
+exports.ChatLayout = ChatLayout;
 //# sourceMappingURL=index14.cjs.map

package/dist/index14.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index14.cjs","sources":["../src/composites/CustomRangePicker/CustomRangePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { formatLocalISOString } from '../../utils/format';\nimport styles from './CustomRangePicker.module.css';\n\nexport interface CustomRangePickerProps {\n  /** Start of the current range (ISO string). */\n  from?: string;\n  /** End of the current range (ISO string). */\n  to?: string;\n  /** Called when user applies a valid range. */\n  onApply: (range: { from: string; to: string }) => void;\n}\n\nconst formatInputValue = (iso?: string): string => {\n  if (!iso) return '';\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return '';\n  const y = date.getFullYear();\n  const m = `${date.getMonth() + 1}`.padStart(2, '0');\n  const d = `${date.getDate()}`.padStart(2, '0');\n  const h = `${date.getHours()}`.padStart(2, '0');\n  const min = `${date.getMinutes()}`.padStart(2, '0');\n  return `${y}-${m}-${d}T${h}:${min}`;\n};\n\nconst toLocalTimestamp = (value: string): string | null => {\n  if (!value) return null;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return null;\n  return formatLocalISOString(date);\n};\n\nexport const CustomRangePicker = ({ from, to, onApply }: CustomRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [startValue, setStartValue] = useState(() => formatInputValue(from));\n  const [endValue, setEndValue] = useState(() => formatInputValue(to));\n  const [error, setError] = useState<string | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isActive = Boolean(from && to);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n  }, [from, to, isOpen]);\n\n  const summary = useMemo(() => {\n    if (!from || !to) return null;\n    const s = new Date(from);\n    const e = new Date(to);\n    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;\n    const fmt = new Intl.DateTimeFormat(undefined, {\n      year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',\n    });\n    return `${fmt.format(s)} – ${fmt.format(e)}`;\n  }, [from, to]);\n\n  const handleApply = () => {\n    const startIso = toLocalTimestamp(startValue);\n    const endIso = toLocalTimestamp(endValue);\n    if (!startIso || !endIso) {\n      setError('Both start and end date are required.');\n      return;\n    }\n    if (startIso >= endIso) {\n      setError('End of range must be after the start.');\n      return;\n    }\n    onApply({ from: startIso, to: endIso });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n    setIsOpen(false);\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.chip, { [styles.active]: isActive })}\n        onClick={() => setIsOpen((v) => !v)}\n      >\n        Custom\n      </button>\n      {summary && <span className={styles.summary}>{summary}</span>}\n\n      {isOpen && (\n        <div className={styles.popover} role=\"dialog\" aria-modal=\"false\">\n          <header className={styles.popoverHeader}>\n            <h4>Custom Time Range</h4>\n          </header>\n          <div className={styles.fields}>\n            <label className={styles.field}>\n              <span>Start</span>\n              <input\n                type=\"datetime-local\"\n                value={startValue}\n                onChange={(e) => setStartValue(e.target.value)}\n                max={endValue || undefined}\n              />\n            </label>\n            <label className={styles.field}>\n              <span>End</span>\n              <input\n                type=\"datetime-local\"\n                value={endValue}\n                onChange={(e) => setEndValue(e.target.value)}\n                min={startValue || undefined}\n              />\n            </label>\n          </div>\n          {error && <p className={styles.error}>{error}</p>}\n          <footer className={styles.actions}>\n            <button type=\"button\" className={styles.btnGhost} onClick={handleCancel}>\n              Cancel\n            </button>\n            <button type=\"button\" className={styles.btnPrimary} onClick={handleApply}>\n              Apply\n            </button>\n          </footer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["formatLocalISOString","useState","useRef","useCallback","useClickOutside","useEscapeKey","useEffect","useMemo","styles","jsx","clsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"index14.cjs","sources":["../src/layouts/ChatLayout/ChatLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ChatLayoutProps } from './ChatLayout.types';\nimport styles from './ChatLayout.module.css';\n\nexport const ChatLayout = ({\n  sidebar,\n  conversationList,\n  messageArea,\n  inputArea,\n  sidebarCollapsed = false,\n  showConversationList = true,\n  className,\n}: ChatLayoutProps) => (\n  <div className={clsx(styles.root, className)}>\n    {sidebar && !sidebarCollapsed && (\n      <aside className={styles.sidebar}>{sidebar}</aside>\n    )}\n\n    {conversationList && showConversationList && (\n      <aside className={styles.conversationList}>{conversationList}</aside>\n    )}\n\n    <main className={styles.mainArea}>\n      <div className={styles.messages}>{messageArea}</div>\n      <div className={styles.input}>{inputArea}</div>\n    </main>\n  </div>\n);\n\nChatLayout.displayName = 'ChatLayout';\n"],"names":["clsx","styles","jsx","jsxs"],"mappings":";;;;;AAIO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB;AACF,sCACG,OAAA,EAAI,WAAWA,KAAAA,KAAKC,kBAAAA,QAAO,MAAM,SAAS,GACxC,UAAA;AAAA,EAAA,WAAW,CAAC,oBACXC,2BAAAA,IAAC,WAAM,WAAWD,kBAAAA,QAAO,SAAU,UAAA,SAAQ;AAAA,EAG5C,oBAAoB,wBACnBC,2BAAAA,IAAC,WAAM,WAAWD,kBAAAA,QAAO,kBAAmB,UAAA,kBAAiB;AAAA,EAG/DE,2BAAAA,KAAC,QAAA,EAAK,WAAWF,kBAAAA,QAAO,UACtB,UAAA;AAAA,IAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,kBAAAA,QAAO,UAAW,UAAA,aAAY;AAAA,IAC9CC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,kBAAAA,QAAO,OAAQ,UAAA,UAAA,CAAU;AAAA,EAAA,EAAA,CAC3C;AAAA,EAAA,CACF;AAGF,WAAW,cAAc;;"}

package/dist/index14.js

@@ -1,125 +1,24 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { clsx } from "./index23.js";
-import { useClickOutside } from "./index3.js";
-import { useEscapeKey } from "./index4.js";
-import { formatLocalISOString } from "./index6.js";
-import styles from "./index36.js";
-const formatInputValue = (iso) => {
-  if (!iso) return "";
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return "";
-  const y = date.getFullYear();
-  const m = `${date.getMonth() + 1}`.padStart(2, "0");
-  const d = `${date.getDate()}`.padStart(2, "0");
-  const h = `${date.getHours()}`.padStart(2, "0");
-  const min = `${date.getMinutes()}`.padStart(2, "0");
-  return `${y}-${m}-${d}T${h}:${min}`;
-};
-const toLocalTimestamp = (value) => {
-  if (!value) return null;
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return null;
-  return formatLocalISOString(date);
-};
-const CustomRangePicker = ({ from, to, onApply }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [startValue, setStartValue] = useState(() => formatInputValue(from));
-  const [endValue, setEndValue] = useState(() => formatInputValue(to));
-  const [error, setError] = useState(null);
-  const containerRef = useRef(null);
-  const isActive = Boolean(from && to);
-  const close = useCallback(() => setIsOpen(false), []);
-  useClickOutside(containerRef, close);
-  useEscapeKey(close, isOpen);
-  useEffect(() => {
-    if (!isOpen) return;
-    setStartValue(formatInputValue(from));
-    setEndValue(formatInputValue(to));
-    setError(null);
-  }, [from, to, isOpen]);
-  const summary = useMemo(() => {
-    if (!from || !to) return null;
-    const s = new Date(from);
-    const e = new Date(to);
-    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;
-    const fmt = new Intl.DateTimeFormat(void 0, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-    return `${fmt.format(s)} – ${fmt.format(e)}`;
-  }, [from, to]);
-  const handleApply = () => {
-    const startIso = toLocalTimestamp(startValue);
-    const endIso = toLocalTimestamp(endValue);
-    if (!startIso || !endIso) {
-      setError("Both start and end date are required.");
-      return;
-    }
-    if (startIso >= endIso) {
-      setError("End of range must be after the start.");
-      return;
-    }
-    onApply({ from: startIso, to: endIso });
-    setIsOpen(false);
-  };
-  const handleCancel = () => {
-    setStartValue(formatInputValue(from));
-    setEndValue(formatInputValue(to));
-    setError(null);
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: clsx(styles.chip, { [styles.active]: isActive }),
-        onClick: () => setIsOpen((v) => !v),
-        children: "Custom"
-      }
-    ),
-    summary && /* @__PURE__ */ jsx("span", { className: styles.summary, children: summary }),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: styles.popover, role: "dialog", "aria-modal": "false", children: [
-      /* @__PURE__ */ jsx("header", { className: styles.popoverHeader, children: /* @__PURE__ */ jsx("h4", { children: "Custom Time Range" }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.fields, children: [
-        /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
-          /* @__PURE__ */ jsx("span", { children: "Start" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "datetime-local",
-              value: startValue,
-              onChange: (e) => setStartValue(e.target.value),
-              max: endValue || void 0
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
-          /* @__PURE__ */ jsx("span", { children: "End" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "datetime-local",
-              value: endValue,
-              onChange: (e) => setEndValue(e.target.value),
-              min: startValue || void 0
-            }
-          )
-        ] })
-      ] }),
-      error && /* @__PURE__ */ jsx("p", { className: styles.error, children: error }),
-      /* @__PURE__ */ jsxs("footer", { className: styles.actions, children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: styles.btnGhost, onClick: handleCancel, children: "Cancel" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: styles.btnPrimary, onClick: handleApply, children: "Apply" })
-      ] })
-    ] })
-  ] });
-};
+import { clsx } from "./index35.js";
+import styles from "./index64.js";
+const ChatLayout = ({
+  sidebar,
+  conversationList,
+  messageArea,
+  inputArea,
+  sidebarCollapsed = false,
+  showConversationList = true,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+  sidebar && !sidebarCollapsed && /* @__PURE__ */ jsx("aside", { className: styles.sidebar, children: sidebar }),
+  conversationList && showConversationList && /* @__PURE__ */ jsx("aside", { className: styles.conversationList, children: conversationList }),
+  /* @__PURE__ */ jsxs("main", { className: styles.mainArea, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.messages, children: messageArea }),
+    /* @__PURE__ */ jsx("div", { className: styles.input, children: inputArea })
+  ] })
+] });
+ChatLayout.displayName = "ChatLayout";
 export {
-  CustomRangePicker
+  ChatLayout
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/composites/CustomRangePicker/CustomRangePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { formatLocalISOString } from '../../utils/format';\nimport styles from './CustomRangePicker.module.css';\n\nexport interface CustomRangePickerProps {\n  /** Start of the current range (ISO string). */\n  from?: string;\n  /** End of the current range (ISO string). */\n  to?: string;\n  /** Called when user applies a valid range. */\n  onApply: (range: { from: string; to: string }) => void;\n}\n\nconst formatInputValue = (iso?: string): string => {\n  if (!iso) return '';\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return '';\n  const y = date.getFullYear();\n  const m = `${date.getMonth() + 1}`.padStart(2, '0');\n  const d = `${date.getDate()}`.padStart(2, '0');\n  const h = `${date.getHours()}`.padStart(2, '0');\n  const min = `${date.getMinutes()}`.padStart(2, '0');\n  return `${y}-${m}-${d}T${h}:${min}`;\n};\n\nconst toLocalTimestamp = (value: string): string | null => {\n  if (!value) return null;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return null;\n  return formatLocalISOString(date);\n};\n\nexport const CustomRangePicker = ({ from, to, onApply }: CustomRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [startValue, setStartValue] = useState(() => formatInputValue(from));\n  const [endValue, setEndValue] = useState(() => formatInputValue(to));\n  const [error, setError] = useState<string | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isActive = Boolean(from && to);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n  }, [from, to, isOpen]);\n\n  const summary = useMemo(() => {\n    if (!from || !to) return null;\n    const s = new Date(from);\n    const e = new Date(to);\n    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;\n    const fmt = new Intl.DateTimeFormat(undefined, {\n      year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',\n    });\n    return `${fmt.format(s)} – ${fmt.format(e)}`;\n  }, [from, to]);\n\n  const handleApply = () => {\n    const startIso = toLocalTimestamp(startValue);\n    const endIso = toLocalTimestamp(endValue);\n    if (!startIso || !endIso) {\n      setError('Both start and end date are required.');\n      return;\n    }\n    if (startIso >= endIso) {\n      setError('End of range must be after the start.');\n      return;\n    }\n    onApply({ from: startIso, to: endIso });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n    setIsOpen(false);\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.chip, { [styles.active]: isActive })}\n        onClick={() => setIsOpen((v) => !v)}\n      >\n        Custom\n      </button>\n      {summary && <span className={styles.summary}>{summary}</span>}\n\n      {isOpen && (\n        <div className={styles.popover} role=\"dialog\" aria-modal=\"false\">\n          <header className={styles.popoverHeader}>\n            <h4>Custom Time Range</h4>\n          </header>\n          <div className={styles.fields}>\n            <label className={styles.field}>\n              <span>Start</span>\n              <input\n                type=\"datetime-local\"\n                value={startValue}\n                onChange={(e) => setStartValue(e.target.value)}\n                max={endValue || undefined}\n              />\n            </label>\n            <label className={styles.field}>\n              <span>End</span>\n              <input\n                type=\"datetime-local\"\n                value={endValue}\n                onChange={(e) => setEndValue(e.target.value)}\n                min={startValue || undefined}\n              />\n            </label>\n          </div>\n          {error && <p className={styles.error}>{error}</p>}\n          <footer className={styles.actions}>\n            <button type=\"button\" className={styles.btnGhost} onClick={handleCancel}>\n              Cancel\n            </button>\n            <button type=\"button\" className={styles.btnPrimary} onClick={handleApply}>\n              Apply\n            </button>\n          </footer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index14.js","sources":["../src/layouts/ChatLayout/ChatLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ChatLayoutProps } from './ChatLayout.types';\nimport styles from './ChatLayout.module.css';\n\nexport const ChatLayout = ({\n  sidebar,\n  conversationList,\n  messageArea,\n  inputArea,\n  sidebarCollapsed = false,\n  showConversationList = true,\n  className,\n}: ChatLayoutProps) => (\n  <div className={clsx(styles.root, className)}>\n    {sidebar && !sidebarCollapsed && (\n      <aside className={styles.sidebar}>{sidebar}</aside>\n    )}\n\n    {conversationList && showConversationList && (\n      <aside className={styles.conversationList}>{conversationList}</aside>\n    )}\n\n    <main className={styles.mainArea}>\n      <div className={styles.messages}>{messageArea}</div>\n      <div className={styles.input}>{inputArea}</div>\n    </main>\n  </div>\n);\n\nChatLayout.displayName = 'ChatLayout';\n"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB;AACF,2BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACxC,UAAA;AAAA,EAAA,WAAW,CAAC,oBACX,oBAAC,WAAM,WAAW,OAAO,SAAU,UAAA,SAAQ;AAAA,EAG5C,oBAAoB,wBACnB,oBAAC,WAAM,WAAW,OAAO,kBAAmB,UAAA,kBAAiB;AAAA,EAG/D,qBAAC,QAAA,EAAK,WAAW,OAAO,UACtB,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,UAAW,UAAA,aAAY;AAAA,IAC9C,oBAAC,OAAA,EAAI,WAAW,OAAO,OAAQ,UAAA,UAAA,CAAU;AAAA,EAAA,EAAA,CAC3C;AAAA,EAAA,CACF;AAGF,WAAW,cAAc;"}

package/dist/index15.cjs

@@ -2,11 +2,93 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index23.cjs");
-const Input_module = require("./index37.cjs");
-const Input = react.forwardRef(
-  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type, className: clsx.clsx(Input_module.default.root, className), ...props })
-);
-Input.displayName = "Input";
-exports.Input = Input;
+const reactDom = require("react-dom");
+const useEscapeKey = require("./index4.cjs");
+const constants = require("./index38.cjs");
+const clsx = require("./index35.cjs");
+const ContextMenu_module = require("./index54.cjs");
+const ContextMenu = ({ x, y, items, onClose }) => {
+  const menuRef = react.useRef(null);
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  useEscapeKey.useEscapeKey(onClose);
+  const adjustPosition = react.useCallback(() => {
+    if (!menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let ax = x;
+    let ay = y;
+    if (x + rect.width > vw - constants.CONTEXT_MENU_MARGIN) ax = vw - rect.width - constants.CONTEXT_MENU_MARGIN;
+    if (y + rect.height > vh - constants.CONTEXT_MENU_MARGIN) ay = vh - rect.height - constants.CONTEXT_MENU_MARGIN;
+    menuRef.current.style.left = `${ax}px`;
+    menuRef.current.style.top = `${ay}px`;
+  }, [x, y]);
+  react.useEffect(() => {
+    adjustPosition();
+  }, [adjustPosition]);
+  react.useEffect(() => {
+    const handleClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
+    };
+    const handleScroll = () => onClose();
+    document.addEventListener("mousedown", handleClick);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [onClose]);
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick();
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < items.length) {
+      e.preventDefault();
+      handleItemClick(items[focusedIndex]);
+    }
+  };
+  if (typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: menuRef,
+        className: ContextMenu_module.default.root,
+        style: { left: x, top: y },
+        role: "menu",
+        "aria-label": "Context menu",
+        onKeyDown: handleKeyDown,
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: clsx.clsx(ContextMenu_module.default.item, {
+              [ContextMenu_module.default.disabled]: item.disabled,
+              [ContextMenu_module.default.focused]: i === focusedIndex
+            }),
+            onClick: () => handleItemClick(item),
+            role: "menuitem",
+            "aria-disabled": item.disabled || void 0,
+            tabIndex: i === focusedIndex ? 0 : -1,
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ContextMenu_module.default.icon, children: item.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          },
+          item.label
+        ))
+      }
+    ),
+    document.body
+  );
+};
+exports.ContextMenu = ContextMenu;
 //# sourceMappingURL=index15.cjs.map

package/dist/index15.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index15.cjs","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,QAAQA,MAAAA;AAAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvCC,2BAAAA,IAAC,WAAM,KAAU,MAAY,WAAWC,UAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"index15.cjs","sources":["../src/composites/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { CONTEXT_MENU_MARGIN } from '../../constants';\nimport clsx from 'clsx';\nimport styles from './ContextMenu.module.css';\n\nexport interface ContextMenuItem {\n  label: string;\n  icon?: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuProps {\n  /** Horizontal position (px from left). */\n  x: number;\n  /** Vertical position (px from top). */\n  y: number;\n  /** Menu items to render. */\n  items: ContextMenuItem[];\n  /** Called when the menu should close. */\n  onClose: () => void;\n}\n\nexport const ContextMenu = ({ x, y, items, onClose }: ContextMenuProps) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  useEscapeKey(onClose);\n\n  const adjustPosition = useCallback(() => {\n    if (!menuRef.current) return;\n    const rect = menuRef.current.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let ax = x;\n    let ay = y;\n    if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;\n    if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;\n    menuRef.current.style.left = `${ax}px`;\n    menuRef.current.style.top = `${ay}px`;\n  }, [x, y]);\n\n  useEffect(() => { adjustPosition(); }, [adjustPosition]);\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();\n    };\n    const handleScroll = () => onClose();\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('scroll', handleScroll, true);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('scroll', handleScroll, true);\n    };\n  }, [onClose]);\n\n  const handleItemClick = (item: ContextMenuItem) => {\n    if (item.disabled) return;\n    item.onClick();\n    onClose();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < items.length) {\n      e.preventDefault();\n      handleItemClick(items[focusedIndex]);\n    }\n  };\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      className={styles.root}\n      style={{ left: x, top: y }}\n      role=\"menu\"\n      aria-label=\"Context menu\"\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.label}\n          type=\"button\"\n          className={clsx(styles.item, {\n            [styles.disabled]: item.disabled,\n            [styles.focused]: i === focusedIndex,\n          })}\n          onClick={() => handleItemClick(item)}\n          role=\"menuitem\"\n          aria-disabled={item.disabled || undefined}\n          tabIndex={i === focusedIndex ? 0 : -1}\n        >\n          {item.icon && <span className={styles.icon}>{item.icon}</span>}\n          <span>{item.label}</span>\n        </button>\n      ))}\n    </div>,\n    document.body,\n  );\n};\n"],"names":["useRef","useState","useEscapeKey","useCallback","CONTEXT_MENU_MARGIN","useEffect","createPortal","jsx","styles","jsxs","clsx"],"mappings":"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"}