@ktnpm_devops/react-component 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (265) hide show
  1. package/dist/index.cjs +34 -33
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +34 -33
  6. package/dist/index.js.map +1 -1
  7. package/dist/index10.cjs +15 -4
  8. package/dist/index10.cjs.map +1 -1
  9. package/dist/index10.js +15 -4
  10. package/dist/index10.js.map +1 -1
  11. package/dist/index11.cjs +4 -16
  12. package/dist/index11.cjs.map +1 -1
  13. package/dist/index11.js +4 -16
  14. package/dist/index11.js.map +1 -1
  15. package/dist/index12.cjs +16 -10
  16. package/dist/index12.cjs.map +1 -1
  17. package/dist/index12.js +16 -10
  18. package/dist/index12.js.map +1 -1
  19. package/dist/index13.cjs +10 -100
  20. package/dist/index13.cjs.map +1 -1
  21. package/dist/index13.js +11 -101
  22. package/dist/index13.js.map +1 -1
  23. package/dist/index14.cjs +100 -20
  24. package/dist/index14.cjs.map +1 -1
  25. package/dist/index14.js +101 -21
  26. package/dist/index14.js.map +1 -1
  27. package/dist/index15.cjs +20 -90
  28. package/dist/index15.cjs.map +1 -1
  29. package/dist/index15.js +21 -91
  30. package/dist/index15.js.map +1 -1
  31. package/dist/index16.cjs +85 -153
  32. package/dist/index16.cjs.map +1 -1
  33. package/dist/index16.js +87 -155
  34. package/dist/index16.js.map +1 -1
  35. package/dist/index17.cjs +150 -128
  36. package/dist/index17.cjs.map +1 -1
  37. package/dist/index17.js +150 -128
  38. package/dist/index17.js.map +1 -1
  39. package/dist/index18.cjs +121 -106
  40. package/dist/index18.cjs.map +1 -1
  41. package/dist/index18.js +122 -107
  42. package/dist/index18.js.map +1 -1
  43. package/dist/index19.cjs +121 -17
  44. package/dist/index19.cjs.map +1 -1
  45. package/dist/index19.js +121 -17
  46. package/dist/index19.js.map +1 -1
  47. package/dist/index20.cjs +17 -8
  48. package/dist/index20.cjs.map +1 -1
  49. package/dist/index20.js +18 -9
  50. package/dist/index20.js.map +1 -1
  51. package/dist/index21.cjs +7 -130
  52. package/dist/index21.cjs.map +1 -1
  53. package/dist/index21.js +9 -132
  54. package/dist/index21.js.map +1 -1
  55. package/dist/index22.cjs +128 -35
  56. package/dist/index22.cjs.map +1 -1
  57. package/dist/index22.js +129 -36
  58. package/dist/index22.js.map +1 -1
  59. package/dist/index23.cjs +36 -222
  60. package/dist/index23.cjs.map +1 -1
  61. package/dist/index23.js +37 -223
  62. package/dist/index23.js.map +1 -1
  63. package/dist/index24.cjs +218 -28
  64. package/dist/index24.cjs.map +1 -1
  65. package/dist/index24.js +220 -30
  66. package/dist/index24.js.map +1 -1
  67. package/dist/index25.cjs +29 -73
  68. package/dist/index25.cjs.map +1 -1
  69. package/dist/index25.js +31 -75
  70. package/dist/index25.js.map +1 -1
  71. package/dist/index26.cjs +69 -144
  72. package/dist/index26.cjs.map +1 -1
  73. package/dist/index26.js +70 -145
  74. package/dist/index26.js.map +1 -1
  75. package/dist/index27.cjs +152 -7
  76. package/dist/index27.cjs.map +1 -1
  77. package/dist/index27.js +154 -9
  78. package/dist/index27.js.map +1 -1
  79. package/dist/index28.cjs +8 -17
  80. package/dist/index28.cjs.map +1 -1
  81. package/dist/index28.js +9 -18
  82. package/dist/index28.js.map +1 -1
  83. package/dist/index29.cjs +15 -75
  84. package/dist/index29.cjs.map +1 -1
  85. package/dist/index29.js +16 -76
  86. package/dist/index29.js.map +1 -1
  87. package/dist/index3.cjs +76 -16
  88. package/dist/index3.cjs.map +1 -1
  89. package/dist/index3.js +76 -16
  90. package/dist/index3.js.map +1 -1
  91. package/dist/index30.cjs +68 -134
  92. package/dist/index30.cjs.map +1 -1
  93. package/dist/index30.js +70 -136
  94. package/dist/index30.js.map +1 -1
  95. package/dist/index31.cjs +136 -98
  96. package/dist/index31.cjs.map +1 -1
  97. package/dist/index31.js +137 -99
  98. package/dist/index31.js.map +1 -1
  99. package/dist/index32.cjs +105 -6
  100. package/dist/index32.cjs.map +1 -1
  101. package/dist/index32.js +106 -7
  102. package/dist/index32.js.map +1 -1
  103. package/dist/index33.cjs +6 -216
  104. package/dist/index33.cjs.map +1 -1
  105. package/dist/index33.js +7 -217
  106. package/dist/index33.js.map +1 -1
  107. package/dist/index34.cjs +215 -7
  108. package/dist/index34.cjs.map +1 -1
  109. package/dist/index34.js +217 -9
  110. package/dist/index34.js.map +1 -1
  111. package/dist/index35.cjs +10 -16
  112. package/dist/index35.cjs.map +1 -1
  113. package/dist/index35.js +9 -15
  114. package/dist/index35.js.map +1 -1
  115. package/dist/index36.cjs +15 -6
  116. package/dist/index36.cjs.map +1 -1
  117. package/dist/index36.js +15 -6
  118. package/dist/index36.js.map +1 -1
  119. package/dist/index37.cjs +4 -1
  120. package/dist/index37.cjs.map +1 -1
  121. package/dist/index37.js +4 -1
  122. package/dist/index37.js.map +1 -1
  123. package/dist/index38.cjs +11 -2
  124. package/dist/index38.cjs.map +1 -1
  125. package/dist/index38.js +11 -2
  126. package/dist/index38.js.map +1 -1
  127. package/dist/index39.cjs +67 -21
  128. package/dist/index39.cjs.map +1 -1
  129. package/dist/index39.js +66 -20
  130. package/dist/index39.js.map +1 -1
  131. package/dist/index4.cjs +12 -8
  132. package/dist/index4.cjs.map +1 -1
  133. package/dist/index4.js +12 -8
  134. package/dist/index4.js.map +1 -1
  135. package/dist/index40.cjs +39 -67
  136. package/dist/index40.cjs.map +1 -1
  137. package/dist/index40.js +38 -66
  138. package/dist/index40.js.map +1 -1
  139. package/dist/index41.cjs +15 -33
  140. package/dist/index41.cjs.map +1 -1
  141. package/dist/index41.js +16 -34
  142. package/dist/index41.js.map +1 -1
  143. package/dist/index42.cjs +52 -16
  144. package/dist/index42.cjs.map +1 -1
  145. package/dist/index42.js +52 -16
  146. package/dist/index42.js.map +1 -1
  147. package/dist/index43.cjs +13 -10
  148. package/dist/index43.cjs.map +1 -1
  149. package/dist/index43.js +13 -10
  150. package/dist/index43.js.map +1 -1
  151. package/dist/index44.cjs +29 -17
  152. package/dist/index44.cjs.map +1 -1
  153. package/dist/index44.js +29 -17
  154. package/dist/index44.js.map +1 -1
  155. package/dist/index45.cjs +19 -134
  156. package/dist/index45.cjs.map +1 -1
  157. package/dist/index45.js +18 -133
  158. package/dist/index45.js.map +1 -1
  159. package/dist/index46.cjs +13 -40
  160. package/dist/index46.cjs.map +1 -1
  161. package/dist/index46.js +13 -40
  162. package/dist/index46.js.map +1 -1
  163. package/dist/index47.cjs +2 -29
  164. package/dist/index47.cjs.map +1 -1
  165. package/dist/index47.js +3 -30
  166. package/dist/index47.js.map +1 -1
  167. package/dist/index48.cjs +2 -53
  168. package/dist/index48.cjs.map +1 -1
  169. package/dist/index48.js +3 -54
  170. package/dist/index48.js.map +1 -1
  171. package/dist/index49.cjs +3 -30
  172. package/dist/index49.cjs.map +1 -1
  173. package/dist/index49.js +3 -30
  174. package/dist/index49.js.map +1 -1
  175. package/dist/index5.cjs +9 -16
  176. package/dist/index5.cjs.map +1 -1
  177. package/dist/index5.js +10 -17
  178. package/dist/index5.js.map +1 -1
  179. package/dist/index50.cjs +34 -34
  180. package/dist/index50.js +34 -34
  181. package/dist/index51.cjs +49 -19
  182. package/dist/index51.cjs.map +1 -1
  183. package/dist/index51.js +50 -20
  184. package/dist/index51.js.map +1 -1
  185. package/dist/index52.cjs +16 -13
  186. package/dist/index52.cjs.map +1 -1
  187. package/dist/index52.js +16 -13
  188. package/dist/index52.js.map +1 -1
  189. package/dist/index53.cjs +35 -32
  190. package/dist/index53.cjs.map +1 -1
  191. package/dist/index53.js +35 -32
  192. package/dist/index53.js.map +1 -1
  193. package/dist/index54.cjs +53 -5
  194. package/dist/index54.cjs.map +1 -1
  195. package/dist/index54.js +54 -6
  196. package/dist/index54.js.map +1 -1
  197. package/dist/index55.cjs +134 -19
  198. package/dist/index55.cjs.map +1 -1
  199. package/dist/index55.js +133 -18
  200. package/dist/index55.js.map +1 -1
  201. package/dist/index56.cjs +40 -10
  202. package/dist/index56.cjs.map +1 -1
  203. package/dist/index56.js +40 -10
  204. package/dist/index56.js.map +1 -1
  205. package/dist/index57.cjs +26 -8
  206. package/dist/index57.cjs.map +1 -1
  207. package/dist/index57.js +27 -9
  208. package/dist/index57.js.map +1 -1
  209. package/dist/index58.cjs +22 -19
  210. package/dist/index58.cjs.map +1 -1
  211. package/dist/index58.js +22 -19
  212. package/dist/index58.js.map +1 -1
  213. package/dist/index59.cjs +10 -79
  214. package/dist/index59.cjs.map +1 -1
  215. package/dist/index59.js +10 -79
  216. package/dist/index59.js.map +1 -1
  217. package/dist/index6.cjs +19 -65
  218. package/dist/index6.cjs.map +1 -1
  219. package/dist/index6.js +19 -65
  220. package/dist/index6.js.map +1 -1
  221. package/dist/index60.cjs +19 -22
  222. package/dist/index60.cjs.map +1 -1
  223. package/dist/index60.js +20 -23
  224. package/dist/index60.js.map +1 -1
  225. package/dist/index61.cjs +54 -27
  226. package/dist/index61.cjs.map +1 -1
  227. package/dist/index61.js +55 -28
  228. package/dist/index61.js.map +1 -1
  229. package/dist/index62.cjs +37 -13
  230. package/dist/index62.cjs.map +1 -1
  231. package/dist/index62.js +38 -14
  232. package/dist/index62.js.map +1 -1
  233. package/dist/index63.cjs +16 -49
  234. package/dist/index63.cjs.map +1 -1
  235. package/dist/index63.js +16 -49
  236. package/dist/index63.js.map +1 -1
  237. package/dist/index64.cjs +16 -37
  238. package/dist/index64.cjs.map +1 -1
  239. package/dist/index64.js +16 -37
  240. package/dist/index64.js.map +1 -1
  241. package/dist/index65.cjs +18 -0
  242. package/dist/index65.cjs.map +1 -0
  243. package/dist/index65.js +18 -0
  244. package/dist/index65.js.map +1 -0
  245. package/dist/index7.cjs +58 -75
  246. package/dist/index7.cjs.map +1 -1
  247. package/dist/index7.js +58 -75
  248. package/dist/index7.js.map +1 -1
  249. package/dist/index8.cjs +82 -15
  250. package/dist/index8.cjs.map +1 -1
  251. package/dist/index8.js +82 -15
  252. package/dist/index8.js.map +1 -1
  253. package/dist/index9.cjs +14 -15
  254. package/dist/index9.cjs.map +1 -1
  255. package/dist/index9.js +15 -16
  256. package/dist/index9.js.map +1 -1
  257. package/dist/style.css +271 -0
  258. package/dist/tokens/semantic-tokens.css +21 -0
  259. package/dist/tokens/tokens.d.ts +35 -0
  260. package/dist/tokens/tokens.d.ts.map +1 -1
  261. package/package.json +1 -1
  262. package/dist/index2.cjs +0 -44
  263. package/dist/index2.cjs.map +0 -1
  264. package/dist/index2.js +0 -44
  265. package/dist/index2.js.map +0 -1
package/dist/index15.js CHANGED
@@ -1,94 +1,24 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useRef, useState, useCallback, useEffect } from "react";
3
- import { createPortal } from "react-dom";
4
- import { useEscapeKey } from "./index4.js";
5
- import { CONTEXT_MENU_MARGIN } from "./index40.js";
6
- import { clsx } from "./index35.js";
7
- import styles from "./index55.js";
8
- const ContextMenu = ({ x, y, items, onClose }) => {
9
- const menuRef = useRef(null);
10
- const [focusedIndex, setFocusedIndex] = useState(-1);
11
- useEscapeKey(onClose);
12
- const adjustPosition = useCallback(() => {
13
- if (!menuRef.current) return;
14
- const rect = menuRef.current.getBoundingClientRect();
15
- const vw = window.innerWidth;
16
- const vh = window.innerHeight;
17
- let ax = x;
18
- let ay = y;
19
- if (x + rect.width > vw - CONTEXT_MENU_MARGIN) ax = vw - rect.width - CONTEXT_MENU_MARGIN;
20
- if (y + rect.height > vh - CONTEXT_MENU_MARGIN) ay = vh - rect.height - CONTEXT_MENU_MARGIN;
21
- menuRef.current.style.left = `${ax}px`;
22
- menuRef.current.style.top = `${ay}px`;
23
- }, [x, y]);
24
- useEffect(() => {
25
- adjustPosition();
26
- }, [adjustPosition]);
27
- useEffect(() => {
28
- const handleClick = (e) => {
29
- if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
30
- };
31
- const handleScroll = () => onClose();
32
- document.addEventListener("mousedown", handleClick);
33
- window.addEventListener("scroll", handleScroll, true);
34
- return () => {
35
- document.removeEventListener("mousedown", handleClick);
36
- window.removeEventListener("scroll", handleScroll, true);
37
- };
38
- }, [onClose]);
39
- const handleItemClick = (item) => {
40
- if (item.disabled) return;
41
- item.onClick();
42
- onClose();
43
- };
44
- const handleKeyDown = (e) => {
45
- if (e.key === "ArrowDown") {
46
- e.preventDefault();
47
- setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));
48
- } else if (e.key === "ArrowUp") {
49
- e.preventDefault();
50
- setFocusedIndex((prev) => Math.max(prev - 1, 0));
51
- } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < items.length) {
52
- e.preventDefault();
53
- handleItemClick(items[focusedIndex]);
54
- }
55
- };
56
- if (typeof document === "undefined") return null;
57
- return createPortal(
58
- /* @__PURE__ */ jsx(
59
- "div",
60
- {
61
- ref: menuRef,
62
- className: styles.root,
63
- style: { left: x, top: y },
64
- role: "menu",
65
- "aria-label": "Context menu",
66
- onKeyDown: handleKeyDown,
67
- children: items.map((item, i) => /* @__PURE__ */ jsxs(
68
- "button",
69
- {
70
- type: "button",
71
- className: clsx(styles.item, {
72
- [styles.disabled]: item.disabled,
73
- [styles.focused]: i === focusedIndex
74
- }),
75
- onClick: () => handleItemClick(item),
76
- role: "menuitem",
77
- "aria-disabled": item.disabled || void 0,
78
- tabIndex: i === focusedIndex ? 0 : -1,
79
- children: [
80
- item.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.icon }),
81
- /* @__PURE__ */ jsx("span", { children: item.label })
82
- ]
83
- },
84
- item.label
85
- ))
86
- }
87
- ),
88
- document.body
89
- );
90
- };
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { clsx } from "./index36.js";
3
+ import styles from "./index64.js";
4
+ const ChatLayout = ({
5
+ sidebar,
6
+ conversationList,
7
+ messageArea,
8
+ inputArea,
9
+ sidebarCollapsed = false,
10
+ showConversationList = true,
11
+ className
12
+ }) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
13
+ sidebar && !sidebarCollapsed && /* @__PURE__ */ jsx("aside", { className: styles.sidebar, children: sidebar }),
14
+ conversationList && showConversationList && /* @__PURE__ */ jsx("aside", { className: styles.conversationList, children: conversationList }),
15
+ /* @__PURE__ */ jsxs("main", { className: styles.mainArea, children: [
16
+ /* @__PURE__ */ jsx("div", { className: styles.messages, children: messageArea }),
17
+ /* @__PURE__ */ jsx("div", { className: styles.input, children: inputArea })
18
+ ] })
19
+ ] });
20
+ ChatLayout.displayName = "ChatLayout";
91
21
  export {
92
- ContextMenu
22
+ ChatLayout
93
23
  };
94
24
  //# sourceMappingURL=index15.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index15.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;"}
1
+ {"version":3,"file":"index15.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/index16.cjs CHANGED
@@ -2,161 +2,93 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const ReactECharts = require("echarts-for-react");
6
- const clsx = require("./index35.cjs");
7
- const constants = require("./index40.cjs");
8
- const CounterTimeseriesChart_module = require("./index47.cjs");
9
- const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
10
- const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
11
- { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },
12
- { xAxis: a.end }
13
- ]);
14
- const buildMarkLines = (annotations) => annotations.filter((a) => !a.end).map((a) => ({
15
- name: a.label,
16
- xAxis: a.start,
17
- label: { formatter: a.label, position: "insideEndTop" },
18
- lineStyle: { color: a.color ?? constants.CHART_COLORS[0], type: "dashed" }
19
- }));
20
- const extractSeries = (data, field) => {
21
- const values = data.map((d) => d[field]);
22
- return values.every((v) => v == null) ? void 0 : values;
23
- };
24
- const buildOption = (data, annotations, showConfidenceBands, showP50, showLegend) => {
25
- const timestamps = data.map((d) => d.ts);
26
- const values = data.map((d) => d.value);
27
- const p05 = showConfidenceBands ? extractSeries(data, "p05") : void 0;
28
- const p95 = showConfidenceBands ? extractSeries(data, "p95") : void 0;
29
- const p50 = showP50 ? extractSeries(data, "p50") : void 0;
30
- const upperThreshold = extractSeries(data, "upperThreshold");
31
- const lowerThreshold = extractSeries(data, "lowerThreshold");
32
- const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : void 0;
33
- const markLine = annotations.length > 0 ? { silent: true, symbol: "none", data: buildMarkLines(annotations) } : void 0;
34
- const series = [];
35
- series.push({
36
- name: "Value",
37
- type: "line",
38
- data: values,
39
- symbol: "none",
40
- lineStyle: { width: 2, color: constants.CHART_COLORS[0] },
41
- itemStyle: { color: constants.CHART_COLORS[0] },
42
- markArea,
43
- markLine
44
- });
45
- if (p50) {
46
- series.push({
47
- name: "p50",
48
- type: "line",
49
- data: p50,
50
- symbol: "none",
51
- lineStyle: { width: 1.5, type: "dashed", color: constants.CHART_COLORS[1] },
52
- itemStyle: { color: constants.CHART_COLORS[1] }
53
- });
54
- }
55
- if (p05 && p95) {
56
- series.push({
57
- name: "p05",
58
- type: "line",
59
- data: p05,
60
- symbol: "none",
61
- lineStyle: { width: 0 },
62
- stack: "confidence",
63
- areaStyle: { opacity: 0 }
64
- });
65
- series.push({
66
- name: "p95",
67
- type: "line",
68
- data: p95.map((v, i) => {
69
- const low = p05[i];
70
- if (v == null || low == null) return null;
71
- return v - low;
72
- }),
73
- symbol: "none",
74
- lineStyle: { width: 0 },
75
- stack: "confidence",
76
- areaStyle: { opacity: 0.15, color: constants.CHART_COLORS[1] }
77
- });
78
- }
79
- if (upperThreshold) {
80
- series.push({
81
- name: "Upper threshold",
82
- type: "line",
83
- data: upperThreshold,
84
- symbol: "none",
85
- lineStyle: { width: 1, type: "dashed", color: constants.CHART_COLORS[4] },
86
- itemStyle: { color: constants.CHART_COLORS[4] }
87
- });
88
- }
89
- if (lowerThreshold) {
90
- series.push({
91
- name: "Lower threshold",
92
- type: "line",
93
- data: lowerThreshold,
94
- symbol: "none",
95
- lineStyle: { width: 1, type: "dashed", color: constants.CHART_COLORS[5] },
96
- itemStyle: { color: constants.CHART_COLORS[5] }
97
- });
98
- }
99
- return {
100
- tooltip: { trigger: "axis" },
101
- legend: showLegend ? { bottom: 0 } : void 0,
102
- grid: { left: "3%", right: "4%", bottom: showLegend ? "12%" : "3%", containLabel: true },
103
- xAxis: { type: "category", data: timestamps, boundaryGap: false },
104
- yAxis: { type: "value" },
105
- series
5
+ const reactDom = require("react-dom");
6
+ const useEscapeKey = require("./index5.cjs");
7
+ const constants = require("./index39.cjs");
8
+ const clsx = require("./index36.cjs");
9
+ const ContextMenu_module = require("./index45.cjs");
10
+ const ContextMenu = ({ x, y, items, onClose }) => {
11
+ const menuRef = react.useRef(null);
12
+ const [focusedIndex, setFocusedIndex] = react.useState(-1);
13
+ useEscapeKey.useEscapeKey(onClose);
14
+ const adjustPosition = react.useCallback(() => {
15
+ if (!menuRef.current) return;
16
+ const rect = menuRef.current.getBoundingClientRect();
17
+ const vw = window.innerWidth;
18
+ const vh = window.innerHeight;
19
+ let ax = x;
20
+ let ay = y;
21
+ if (x + rect.width > vw - constants.CONTEXT_MENU_MARGIN) ax = vw - rect.width - constants.CONTEXT_MENU_MARGIN;
22
+ if (y + rect.height > vh - constants.CONTEXT_MENU_MARGIN) ay = vh - rect.height - constants.CONTEXT_MENU_MARGIN;
23
+ menuRef.current.style.left = `${ax}px`;
24
+ menuRef.current.style.top = `${ay}px`;
25
+ }, [x, y]);
26
+ react.useEffect(() => {
27
+ adjustPosition();
28
+ }, [adjustPosition]);
29
+ react.useEffect(() => {
30
+ const handleClick = (e) => {
31
+ if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
32
+ };
33
+ const handleScroll = () => onClose();
34
+ document.addEventListener("mousedown", handleClick);
35
+ window.addEventListener("scroll", handleScroll, true);
36
+ return () => {
37
+ document.removeEventListener("mousedown", handleClick);
38
+ window.removeEventListener("scroll", handleScroll, true);
39
+ };
40
+ }, [onClose]);
41
+ const handleItemClick = (item) => {
42
+ if (item.disabled) return;
43
+ item.onClick();
44
+ onClose();
106
45
  };
107
- };
108
- const CounterTimeseriesChart = ({
109
- data,
110
- title,
111
- isLoading = false,
112
- error = null,
113
- timeRange = "auto",
114
- timeRangeOptions,
115
- onTimeRangeChange,
116
- annotations = [],
117
- showConfidenceBands = true,
118
- showP50 = true,
119
- showLegend = false,
120
- onChartReady,
121
- className
122
- }) => {
123
- const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];
124
- const option = react.useMemo(
125
- () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),
126
- [data, annotations, showConfidenceBands, showP50, showLegend]
127
- );
128
- const showHeader = title || onTimeRangeChange;
129
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CounterTimeseriesChart_module.default.root, className), children: [
130
- showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CounterTimeseriesChart_module.default.header, children: [
131
- title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: CounterTimeseriesChart_module.default.title, children: title }),
132
- onTimeRangeChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.timeRangeGroup, role: "group", "aria-label": "Time range presets", children: rangeOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
133
- "button",
134
- {
135
- type: "button",
136
- className: clsx.clsx(CounterTimeseriesChart_module.default.timeRangeButton, {
137
- [CounterTimeseriesChart_module.default.timeRangeButtonActive]: opt === timeRange
138
- }),
139
- onClick: () => onTimeRangeChange(opt),
140
- "aria-pressed": opt === timeRange,
141
- children: opt
142
- },
143
- opt
144
- )) })
145
- ] }),
146
- isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.loading, children: "Loading chart data..." }),
147
- !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.error, children: error }),
148
- !isLoading && !error && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.empty, children: "No data available" }),
149
- !isLoading && !error && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
150
- ReactECharts,
46
+ const handleKeyDown = (e) => {
47
+ if (e.key === "ArrowDown") {
48
+ e.preventDefault();
49
+ setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1));
50
+ } else if (e.key === "ArrowUp") {
51
+ e.preventDefault();
52
+ setFocusedIndex((prev) => Math.max(prev - 1, 0));
53
+ } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < items.length) {
54
+ e.preventDefault();
55
+ handleItemClick(items[focusedIndex]);
56
+ }
57
+ };
58
+ if (typeof document === "undefined") return null;
59
+ return reactDom.createPortal(
60
+ /* @__PURE__ */ jsxRuntime.jsx(
61
+ "div",
151
62
  {
152
- option,
153
- style: { height: "100%", width: "100%" },
154
- onChartReady,
155
- notMerge: true
63
+ ref: menuRef,
64
+ className: ContextMenu_module.default.root,
65
+ style: { left: x, top: y },
66
+ role: "menu",
67
+ "aria-label": "Context menu",
68
+ onKeyDown: handleKeyDown,
69
+ children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
70
+ "button",
71
+ {
72
+ type: "button",
73
+ className: clsx.clsx(ContextMenu_module.default.item, {
74
+ [ContextMenu_module.default.disabled]: item.disabled,
75
+ [ContextMenu_module.default.focused]: i === focusedIndex
76
+ }),
77
+ onClick: () => handleItemClick(item),
78
+ role: "menuitem",
79
+ "aria-disabled": item.disabled || void 0,
80
+ tabIndex: i === focusedIndex ? 0 : -1,
81
+ children: [
82
+ item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ContextMenu_module.default.icon, children: item.icon }),
83
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
84
+ ]
85
+ },
86
+ item.label
87
+ ))
156
88
  }
157
- ) })
158
- ] });
89
+ ),
90
+ document.body
91
+ );
159
92
  };
160
- CounterTimeseriesChart.displayName = "CounterTimeseriesChart";
161
- exports.CounterTimeseriesChart = CounterTimeseriesChart;
93
+ exports.ContextMenu = ContextMenu;
162
94
  //# sourceMappingURL=index16.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index16.cjs","sources":["../src/charts/CounterTimeseriesChart/CounterTimeseriesChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { CounterTimeseriesChartProps } from './CounterTimeseriesChart.types';\nimport type { CounterTimeseriesPoint, ChartAnnotation } from '../../types/chart.types';\nimport { CHART_COLORS } from '../../constants';\nimport styles from './CounterTimeseriesChart.module.css';\n\nconst DEFAULT_TIME_RANGE_OPTIONS = ['auto', '1h', '6h', '24h', '7d', '30d'] as const;\n\n/** Build markArea data from range annotations (those with an end timestamp). */\nconst buildMarkAreas = (annotations: ChartAnnotation[]) =>\n annotations\n .filter((a) => a.end)\n .map((a) => [\n { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? 'rgba(255,107,90,0.12)' } },\n { xAxis: a.end },\n ]);\n\n/** Build markLine data from point annotations (those without an end timestamp). */\nconst buildMarkLines = (annotations: ChartAnnotation[]) =>\n annotations\n .filter((a) => !a.end)\n .map((a) => ({\n name: a.label,\n xAxis: a.start,\n label: { formatter: a.label, position: 'insideEndTop' as const },\n lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n }));\n\n/** Extract a numeric array for a given field, returning undefined when all values are null. */\nconst extractSeries = (data: CounterTimeseriesPoint[], field: keyof CounterTimeseriesPoint) => {\n const values = data.map((d) => d[field] as number | null | undefined);\n return values.every((v) => v == null) ? undefined : values;\n};\n\nconst buildOption = (\n data: CounterTimeseriesPoint[],\n annotations: ChartAnnotation[],\n showConfidenceBands: boolean,\n showP50: boolean,\n showLegend: boolean,\n) => {\n const timestamps = data.map((d) => d.ts);\n const values = data.map((d) => d.value);\n\n const p05 = showConfidenceBands ? extractSeries(data, 'p05') : undefined;\n const p95 = showConfidenceBands ? extractSeries(data, 'p95') : undefined;\n const p50 = showP50 ? extractSeries(data, 'p50') : undefined;\n\n const upperThreshold = extractSeries(data, 'upperThreshold');\n const lowerThreshold = extractSeries(data, 'lowerThreshold');\n\n const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : undefined;\n const markLine = annotations.length > 0 ? { silent: true, symbol: 'none', data: buildMarkLines(annotations) } : undefined;\n\n const series: unknown[] = [];\n\n // Main value line\n series.push({\n name: 'Value',\n type: 'line',\n data: values,\n symbol: 'none',\n lineStyle: { width: 2, color: CHART_COLORS[0] },\n itemStyle: { color: CHART_COLORS[0] },\n markArea,\n markLine,\n });\n\n // p50 dashed line\n if (p50) {\n series.push({\n name: 'p50',\n type: 'line',\n data: p50,\n symbol: 'none',\n lineStyle: { width: 1.5, type: 'dashed', color: CHART_COLORS[1] },\n itemStyle: { color: CHART_COLORS[1] },\n });\n }\n\n // Confidence band (p05–p95 area between)\n if (p05 && p95) {\n // Lower bound (invisible line)\n series.push({\n name: 'p05',\n type: 'line',\n data: p05,\n symbol: 'none',\n lineStyle: { width: 0 },\n stack: 'confidence',\n areaStyle: { opacity: 0 },\n });\n // Upper bound fills from p05 to p95\n series.push({\n name: 'p95',\n type: 'line',\n data: p95.map((v, i) => {\n const low = p05[i];\n if (v == null || low == null) return null;\n return v - low;\n }),\n symbol: 'none',\n lineStyle: { width: 0 },\n stack: 'confidence',\n areaStyle: { opacity: 0.15, color: CHART_COLORS[1] },\n });\n }\n\n // Threshold lines\n if (upperThreshold) {\n series.push({\n name: 'Upper threshold',\n type: 'line',\n data: upperThreshold,\n symbol: 'none',\n lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[4] },\n itemStyle: { color: CHART_COLORS[4] },\n });\n }\n\n if (lowerThreshold) {\n series.push({\n name: 'Lower threshold',\n type: 'line',\n data: lowerThreshold,\n symbol: 'none',\n lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[5] },\n itemStyle: { color: CHART_COLORS[5] },\n });\n }\n\n return {\n tooltip: { trigger: 'axis' },\n legend: showLegend ? { bottom: 0 } : undefined,\n grid: { left: '3%', right: '4%', bottom: showLegend ? '12%' : '3%', containLabel: true },\n xAxis: { type: 'category', data: timestamps, boundaryGap: false },\n yAxis: { type: 'value' },\n series,\n };\n};\n\nexport const CounterTimeseriesChart = ({\n data,\n title,\n isLoading = false,\n error = null,\n timeRange = 'auto',\n timeRangeOptions,\n onTimeRangeChange,\n annotations = [],\n showConfidenceBands = true,\n showP50 = true,\n showLegend = false,\n onChartReady,\n className,\n}: CounterTimeseriesChartProps) => {\n const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];\n\n const option = useMemo(\n () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),\n [data, annotations, showConfidenceBands, showP50, showLegend],\n );\n\n const showHeader = title || onTimeRangeChange;\n\n return (\n <div className={clsx(styles.root, className)}>\n {showHeader && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {onTimeRangeChange && (\n <div className={styles.timeRangeGroup} role=\"group\" aria-label=\"Time range presets\">\n {rangeOptions.map((opt) => (\n <button\n key={opt}\n type=\"button\"\n className={clsx(styles.timeRangeButton, {\n [styles.timeRangeButtonActive]: opt === timeRange,\n })}\n onClick={() => onTimeRangeChange(opt)}\n aria-pressed={opt === timeRange}\n >\n {opt}\n </button>\n ))}\n </div>\n )}\n </div>\n )}\n\n {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n {!isLoading && error && <div className={styles.error}>{error}</div>}\n\n {!isLoading && !error && data.length === 0 && (\n <div className={styles.empty}>No data available</div>\n )}\n\n {!isLoading && !error && data.length > 0 && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', width: '100%' }}\n onChartReady={onChartReady}\n notMerge\n />\n </div>\n )}\n </div>\n );\n};\n\nCounterTimeseriesChart.displayName = 'CounterTimeseriesChart';\n"],"names":["CHART_COLORS","useMemo","clsx","styles","jsxs","jsx"],"mappings":"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"}
1
+ {"version":3,"file":"index16.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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"}