@djangocfg/ui-tools 2.1.390 → 2.1.393

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 (183) hide show
  1. package/README.md +7 -10
  2. package/dist/chunk-PAWJFY3S.mjs +6 -0
  3. package/dist/{chunk-N2XQF2OL.mjs.map → chunk-PAWJFY3S.mjs.map} +1 -1
  4. package/dist/chunk-PK6SKIKE.cjs +8 -0
  5. package/dist/{chunk-OLISEQHS.cjs.map → chunk-PK6SKIKE.cjs.map} +1 -1
  6. package/dist/file-icon/index.cjs +6 -6
  7. package/dist/file-icon/index.d.cts +1 -1
  8. package/dist/file-icon/index.d.ts +1 -1
  9. package/dist/file-icon/index.mjs +1 -1
  10. package/dist/tree/index.cjs +1372 -143
  11. package/dist/tree/index.cjs.map +1 -1
  12. package/dist/tree/index.d.cts +2 -2
  13. package/dist/tree/index.d.ts +2 -2
  14. package/dist/tree/index.mjs +1322 -3
  15. package/dist/tree/index.mjs.map +1 -1
  16. package/dist/{types-CevSbyfD.d.cts → types-B_zhyAqR.d.cts} +1 -1
  17. package/dist/{types-CevSbyfD.d.ts → types-B_zhyAqR.d.ts} +1 -1
  18. package/package.json +6 -14
  19. package/src/tools/AudioPlayer/README.md +4 -4
  20. package/src/tools/Chat/README.md +6 -6
  21. package/src/tools/CronScheduler/index.tsx +1 -1
  22. package/src/tools/CronScheduler/lazy.tsx +1 -1
  23. package/src/tools/ImageViewer/README.md +1 -1
  24. package/src/tools/JsonForm/README.md +2 -2
  25. package/src/tools/MarkdownEditor/README.md +3 -3
  26. package/src/tools/MarkdownMessage/README.md +2 -2
  27. package/src/tools/OpenapiViewer/components/DocsLayout/grouping.ts +5 -1
  28. package/src/tools/SpeechRecognition/README.md +1 -1
  29. package/dist/ChatRoot-EFNXQXXN.cjs +0 -15
  30. package/dist/ChatRoot-EFNXQXXN.cjs.map +0 -1
  31. package/dist/ChatRoot-FITF5RVP.mjs +0 -6
  32. package/dist/ChatRoot-FITF5RVP.mjs.map +0 -1
  33. package/dist/ChatRoot-PNNGQCYF.css +0 -7
  34. package/dist/ChatRoot-PNNGQCYF.css.map +0 -1
  35. package/dist/CronScheduler.client-DLMXCPAJ.mjs +0 -67
  36. package/dist/CronScheduler.client-DLMXCPAJ.mjs.map +0 -1
  37. package/dist/CronScheduler.client-WEJF4PWQ.cjs +0 -72
  38. package/dist/CronScheduler.client-WEJF4PWQ.cjs.map +0 -1
  39. package/dist/DictationField-AS2F33WI.cjs +0 -13
  40. package/dist/DictationField-AS2F33WI.cjs.map +0 -1
  41. package/dist/DictationField-WPONUCYE.mjs +0 -4
  42. package/dist/DictationField-WPONUCYE.mjs.map +0 -1
  43. package/dist/DocsLayout-EKASBSP7.mjs +0 -3448
  44. package/dist/DocsLayout-EKASBSP7.mjs.map +0 -1
  45. package/dist/DocsLayout-MBFIB4NO.css +0 -7
  46. package/dist/DocsLayout-MBFIB4NO.css.map +0 -1
  47. package/dist/DocsLayout-OURFYWQE.cjs +0 -3455
  48. package/dist/DocsLayout-OURFYWQE.cjs.map +0 -1
  49. package/dist/JsonSchemaForm-DD7CLRIG.cjs +0 -13
  50. package/dist/JsonSchemaForm-DD7CLRIG.cjs.map +0 -1
  51. package/dist/JsonSchemaForm-XKUIVELK.mjs +0 -4
  52. package/dist/JsonSchemaForm-XKUIVELK.mjs.map +0 -1
  53. package/dist/JsonTree-43PQAJKY.mjs +0 -5
  54. package/dist/JsonTree-43PQAJKY.mjs.map +0 -1
  55. package/dist/JsonTree-MLET23ZA.css +0 -7
  56. package/dist/JsonTree-MLET23ZA.css.map +0 -1
  57. package/dist/JsonTree-X6W5YEVY.cjs +0 -11
  58. package/dist/JsonTree-X6W5YEVY.cjs.map +0 -1
  59. package/dist/LottiePlayer.client-2S7ISJ2S.cjs +0 -168
  60. package/dist/LottiePlayer.client-2S7ISJ2S.cjs.map +0 -1
  61. package/dist/LottiePlayer.client-5LDSSJWS.mjs +0 -161
  62. package/dist/LottiePlayer.client-5LDSSJWS.mjs.map +0 -1
  63. package/dist/MapContainer-AKIPABJK.mjs +0 -4
  64. package/dist/MapContainer-AKIPABJK.mjs.map +0 -1
  65. package/dist/MapContainer-STVDMC36.cjs +0 -17
  66. package/dist/MapContainer-STVDMC36.cjs.map +0 -1
  67. package/dist/Mermaid.client-DDXWXZXY.css +0 -7
  68. package/dist/Mermaid.client-DDXWXZXY.css.map +0 -1
  69. package/dist/Mermaid.client-NL4SVR7F.mjs +0 -481
  70. package/dist/Mermaid.client-NL4SVR7F.mjs.map +0 -1
  71. package/dist/Mermaid.client-NNTI6DFX.cjs +0 -487
  72. package/dist/Mermaid.client-NNTI6DFX.cjs.map +0 -1
  73. package/dist/Player-BRV7XTWR.mjs +0 -4
  74. package/dist/Player-BRV7XTWR.mjs.map +0 -1
  75. package/dist/Player-PM7F7DD7.cjs +0 -13
  76. package/dist/Player-PM7F7DD7.cjs.map +0 -1
  77. package/dist/Player-ZGQKKOWI.css +0 -66
  78. package/dist/Player-ZGQKKOWI.css.map +0 -1
  79. package/dist/PrettyCode.client-GWFAIVFN.css +0 -7
  80. package/dist/PrettyCode.client-GWFAIVFN.css.map +0 -1
  81. package/dist/PrettyCode.client-KOHDVPPN.cjs +0 -285
  82. package/dist/PrettyCode.client-KOHDVPPN.cjs.map +0 -1
  83. package/dist/PrettyCode.client-ZGYGKE7G.mjs +0 -283
  84. package/dist/PrettyCode.client-ZGYGKE7G.mjs.map +0 -1
  85. package/dist/TreeRoot-5COOOSWG.mjs +0 -4
  86. package/dist/TreeRoot-5COOOSWG.mjs.map +0 -1
  87. package/dist/TreeRoot-AABP2J6Y.cjs +0 -19
  88. package/dist/TreeRoot-AABP2J6Y.cjs.map +0 -1
  89. package/dist/chunk-2NG4SXEP.mjs +0 -743
  90. package/dist/chunk-2NG4SXEP.mjs.map +0 -1
  91. package/dist/chunk-4LFB7I5K.cjs +0 -1387
  92. package/dist/chunk-4LFB7I5K.cjs.map +0 -1
  93. package/dist/chunk-5D2OCOPQ.cjs +0 -222
  94. package/dist/chunk-5D2OCOPQ.cjs.map +0 -1
  95. package/dist/chunk-5I5QNGUG.cjs +0 -611
  96. package/dist/chunk-5I5QNGUG.cjs.map +0 -1
  97. package/dist/chunk-6ZX2G25W.mjs +0 -1361
  98. package/dist/chunk-6ZX2G25W.mjs.map +0 -1
  99. package/dist/chunk-76NNDZH6.cjs +0 -1061
  100. package/dist/chunk-76NNDZH6.cjs.map +0 -1
  101. package/dist/chunk-7CWGZPO3.mjs +0 -214
  102. package/dist/chunk-7CWGZPO3.mjs.map +0 -1
  103. package/dist/chunk-7EYHNP3E.cjs +0 -965
  104. package/dist/chunk-7EYHNP3E.cjs.map +0 -1
  105. package/dist/chunk-7IYXZUJO.cjs +0 -769
  106. package/dist/chunk-7IYXZUJO.cjs.map +0 -1
  107. package/dist/chunk-ADEN3UA4.cjs +0 -892
  108. package/dist/chunk-ADEN3UA4.cjs.map +0 -1
  109. package/dist/chunk-B6IR5KSC.mjs +0 -59
  110. package/dist/chunk-B6IR5KSC.mjs.map +0 -1
  111. package/dist/chunk-C6GXVH5J.mjs +0 -338
  112. package/dist/chunk-C6GXVH5J.mjs.map +0 -1
  113. package/dist/chunk-DMX7W4XZ.mjs +0 -1113
  114. package/dist/chunk-DMX7W4XZ.mjs.map +0 -1
  115. package/dist/chunk-ECONRHIG.mjs +0 -212
  116. package/dist/chunk-ECONRHIG.mjs.map +0 -1
  117. package/dist/chunk-FEN5S772.cjs +0 -1227
  118. package/dist/chunk-FEN5S772.cjs.map +0 -1
  119. package/dist/chunk-FP2RLYQZ.cjs +0 -187
  120. package/dist/chunk-FP2RLYQZ.cjs.map +0 -1
  121. package/dist/chunk-FVVF7VCD.cjs +0 -1325
  122. package/dist/chunk-FVVF7VCD.cjs.map +0 -1
  123. package/dist/chunk-GYIO7W7M.mjs +0 -1197
  124. package/dist/chunk-GYIO7W7M.mjs.map +0 -1
  125. package/dist/chunk-KNDLV4PI.cjs +0 -1356
  126. package/dist/chunk-KNDLV4PI.cjs.map +0 -1
  127. package/dist/chunk-KNEQRUBA.mjs +0 -181
  128. package/dist/chunk-KNEQRUBA.mjs.map +0 -1
  129. package/dist/chunk-N2XQF2OL.mjs +0 -14
  130. package/dist/chunk-N4MZYNR4.mjs +0 -1342
  131. package/dist/chunk-N4MZYNR4.mjs.map +0 -1
  132. package/dist/chunk-NTVBIIUD.mjs +0 -1439
  133. package/dist/chunk-NTVBIIUD.mjs.map +0 -1
  134. package/dist/chunk-OBRSGM64.mjs +0 -607
  135. package/dist/chunk-OBRSGM64.mjs.map +0 -1
  136. package/dist/chunk-ODO4GMW7.mjs +0 -79
  137. package/dist/chunk-ODO4GMW7.mjs.map +0 -1
  138. package/dist/chunk-OLISEQHS.cjs +0 -18
  139. package/dist/chunk-PVAX67JG.mjs +0 -1041
  140. package/dist/chunk-PVAX67JG.mjs.map +0 -1
  141. package/dist/chunk-QJ6GTUCO.cjs +0 -81
  142. package/dist/chunk-QJ6GTUCO.cjs.map +0 -1
  143. package/dist/chunk-T3MWM23F.cjs +0 -214
  144. package/dist/chunk-T3MWM23F.cjs.map +0 -1
  145. package/dist/chunk-TBSHZO5R.cjs +0 -1134
  146. package/dist/chunk-TBSHZO5R.cjs.map +0 -1
  147. package/dist/chunk-UNCS5V5F.mjs +0 -887
  148. package/dist/chunk-UNCS5V5F.mjs.map +0 -1
  149. package/dist/chunk-VWQ5WOIL.mjs +0 -2059
  150. package/dist/chunk-VWQ5WOIL.mjs.map +0 -1
  151. package/dist/chunk-W75B7Y6C.cjs +0 -1478
  152. package/dist/chunk-W75B7Y6C.cjs.map +0 -1
  153. package/dist/chunk-Y6UTOBF6.mjs +0 -938
  154. package/dist/chunk-Y6UTOBF6.mjs.map +0 -1
  155. package/dist/chunk-YDPDTOSP.cjs +0 -2061
  156. package/dist/chunk-YDPDTOSP.cjs.map +0 -1
  157. package/dist/chunk-YW5IVWHQ.cjs +0 -346
  158. package/dist/chunk-YW5IVWHQ.cjs.map +0 -1
  159. package/dist/chunk-YXZ6GU7H.cjs +0 -63
  160. package/dist/chunk-YXZ6GU7H.cjs.map +0 -1
  161. package/dist/chunk-ZL7FH4NW.mjs +0 -1274
  162. package/dist/chunk-ZL7FH4NW.mjs.map +0 -1
  163. package/dist/components-EHOGXATG.cjs +0 -22
  164. package/dist/components-EHOGXATG.cjs.map +0 -1
  165. package/dist/components-MQ6DR7TX.cjs +0 -26
  166. package/dist/components-MQ6DR7TX.cjs.map +0 -1
  167. package/dist/components-XRX7QGLB.mjs +0 -5
  168. package/dist/components-XRX7QGLB.mjs.map +0 -1
  169. package/dist/components-YATKRWLH.mjs +0 -5
  170. package/dist/components-YATKRWLH.mjs.map +0 -1
  171. package/dist/index.cjs +0 -3674
  172. package/dist/index.cjs.map +0 -1
  173. package/dist/index.css +0 -234
  174. package/dist/index.css.map +0 -1
  175. package/dist/index.d.cts +0 -4929
  176. package/dist/index.d.ts +0 -4929
  177. package/dist/index.mjs +0 -2912
  178. package/dist/index.mjs.map +0 -1
  179. package/dist/launcher-5Y42OBSN.mjs +0 -6
  180. package/dist/launcher-5Y42OBSN.mjs.map +0 -1
  181. package/dist/launcher-PMW2YB24.cjs +0 -59
  182. package/dist/launcher-PMW2YB24.cjs.map +0 -1
  183. package/src/index.ts +0 -157
@@ -1,1325 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkOLISEQHS_cjs = require('./chunk-OLISEQHS.cjs');
4
- var React = require('react');
5
- var lib = require('@djangocfg/ui-core/lib');
6
- var jsxRuntime = require('react/jsx-runtime');
7
- var lucideReact = require('lucide-react');
8
- var hooks = require('@djangocfg/ui-core/hooks');
9
-
10
- function _interopNamespace(e) {
11
- if (e && e.__esModule) return e;
12
- var n = Object.create(null);
13
- if (e) {
14
- Object.keys(e).forEach(function (k) {
15
- if (k !== 'default') {
16
- var d = Object.getOwnPropertyDescriptor(e, k);
17
- Object.defineProperty(n, k, d.get ? d : {
18
- enumerable: true,
19
- get: function () { return e[k]; }
20
- });
21
- }
22
- });
23
- }
24
- n.default = e;
25
- return Object.freeze(n);
26
- }
27
-
28
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
29
-
30
- // src/tools/Tree/types.ts
31
- var DEFAULT_TREE_LABELS = {
32
- loading: "Loading\u2026",
33
- empty: "Nothing to show",
34
- error: "Failed to load",
35
- searchPlaceholder: "Search\u2026",
36
- searchMatches: /* @__PURE__ */ chunkOLISEQHS_cjs.__name((n) => `${n} match${n === 1 ? "" : "es"}`, "searchMatches"),
37
- ariaLabel: "Tree"
38
- };
39
-
40
- // src/tools/Tree/data/childCache.ts
41
- var createChildCache = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => /* @__PURE__ */ new Map(), "createChildCache");
42
- var resolveChildren = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((cache, node) => {
43
- if (Array.isArray(node.children)) {
44
- return { children: node.children, status: "loaded" };
45
- }
46
- const entry = cache.get(node.id);
47
- if (!entry) return { children: null, status: "idle" };
48
- if (entry.status === "loaded") {
49
- return { children: entry.children, status: "loaded" };
50
- }
51
- return { children: null, status: entry.status, error: entry.error };
52
- }, "resolveChildren");
53
-
54
- // src/tools/Tree/data/flatten.ts
55
- var isNodeFolder = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((node) => {
56
- if (typeof node.isFolder === "boolean") return node.isFolder;
57
- return Array.isArray(node.children);
58
- }, "isNodeFolder");
59
- function flattenTree({
60
- roots,
61
- expandedIds,
62
- cache,
63
- filterNode
64
- }) {
65
- const out = [];
66
- const walk = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((nodes, level, parentId) => {
67
- for (const node of nodes) {
68
- if (filterNode && !filterNode(node)) continue;
69
- const isFolder = isNodeFolder(node);
70
- const isExpanded = expandedIds.has(node.id);
71
- const resolved = isFolder ? resolveChildren(cache, node) : { children: [], status: "loaded" };
72
- out.push({
73
- node,
74
- level,
75
- parentId,
76
- isFolder,
77
- isExpanded,
78
- isLoading: resolved.status === "loading",
79
- hasError: resolved.status === "error"
80
- });
81
- if (isFolder && isExpanded && resolved.children) {
82
- walk(resolved.children, level + 1, node.id);
83
- }
84
- }
85
- }, "walk");
86
- walk(roots, 0, null);
87
- return out;
88
- }
89
- chunkOLISEQHS_cjs.__name(flattenTree, "flattenTree");
90
-
91
- // src/tools/Tree/data/persist.ts
92
- var KEY_PREFIX = "@djangocfg/tree:";
93
- var VERSION = 1;
94
- function safeStorage() {
95
- if (typeof window === "undefined") return null;
96
- try {
97
- return window.localStorage;
98
- } catch {
99
- return null;
100
- }
101
- }
102
- chunkOLISEQHS_cjs.__name(safeStorage, "safeStorage");
103
- function loadTreeState(key) {
104
- const storage = safeStorage();
105
- if (!storage) return null;
106
- try {
107
- const raw = storage.getItem(KEY_PREFIX + key);
108
- if (!raw) return null;
109
- const parsed = JSON.parse(raw);
110
- if (parsed.version !== VERSION) return null;
111
- return {
112
- expandedItems: Array.isArray(parsed.expandedItems) ? parsed.expandedItems : [],
113
- selectedItems: Array.isArray(parsed.selectedItems) ? parsed.selectedItems : []
114
- };
115
- } catch {
116
- return null;
117
- }
118
- }
119
- chunkOLISEQHS_cjs.__name(loadTreeState, "loadTreeState");
120
- function saveTreeState(key, state) {
121
- const storage = safeStorage();
122
- if (!storage) return;
123
- try {
124
- const payload = { ...state, version: VERSION };
125
- storage.setItem(KEY_PREFIX + key, JSON.stringify(payload));
126
- } catch {
127
- }
128
- }
129
- chunkOLISEQHS_cjs.__name(saveTreeState, "saveTreeState");
130
- function clearTreeState(key) {
131
- const storage = safeStorage();
132
- if (!storage) return;
133
- try {
134
- storage.removeItem(KEY_PREFIX + key);
135
- } catch {
136
- }
137
- }
138
- chunkOLISEQHS_cjs.__name(clearTreeState, "clearTreeState");
139
-
140
- // src/tools/Tree/data/appearance.ts
141
- var DENSITY_PRESETS = {
142
- compact: { rowHeight: 24, iconSize: 14, fontSize: 13, gap: 6 },
143
- cozy: { rowHeight: 28, iconSize: 16, fontSize: 13, gap: 8 },
144
- comfortable: { rowHeight: 32, iconSize: 16, fontSize: 14, gap: 8 }
145
- };
146
- var DEFAULT_TREE_APPEARANCE = {
147
- density: "cozy",
148
- ...DENSITY_PRESETS.cozy,
149
- iconStrokeWidth: 1.5,
150
- indent: 16,
151
- accent: "default",
152
- radius: "sm",
153
- indentGuideOpacity: 0.4,
154
- showActiveIndicator: true
155
- };
156
- function resolveAppearance(input, outerIndent) {
157
- if (!input && outerIndent === void 0) return DEFAULT_TREE_APPEARANCE;
158
- const density = input?.density ?? "cozy";
159
- const preset = DENSITY_PRESETS[density];
160
- return {
161
- density,
162
- rowHeight: input?.rowHeight ?? preset.rowHeight,
163
- iconSize: input?.iconSize ?? preset.iconSize,
164
- iconStrokeWidth: input?.iconStrokeWidth ?? DEFAULT_TREE_APPEARANCE.iconStrokeWidth,
165
- fontSize: input?.fontSize ?? preset.fontSize,
166
- gap: input?.gap ?? preset.gap,
167
- indent: input?.indent ?? outerIndent ?? DEFAULT_TREE_APPEARANCE.indent,
168
- accent: input?.accent ?? DEFAULT_TREE_APPEARANCE.accent,
169
- radius: input?.radius ?? DEFAULT_TREE_APPEARANCE.radius,
170
- indentGuideOpacity: input?.indentGuideOpacity ?? DEFAULT_TREE_APPEARANCE.indentGuideOpacity,
171
- showActiveIndicator: input?.showActiveIndicator ?? DEFAULT_TREE_APPEARANCE.showActiveIndicator
172
- };
173
- }
174
- chunkOLISEQHS_cjs.__name(resolveAppearance, "resolveAppearance");
175
- function appearanceToStyle(a) {
176
- return {
177
- ["--tree-row-height"]: `${a.rowHeight}px`,
178
- ["--tree-icon-size"]: `${a.iconSize}px`,
179
- ["--tree-icon-stroke"]: a.iconStrokeWidth,
180
- ["--tree-font-size"]: `${a.fontSize}px`,
181
- ["--tree-gap"]: `${a.gap}px`,
182
- ["--tree-indent"]: `${a.indent}px`,
183
- ["--tree-guide-opacity"]: a.indentGuideOpacity
184
- };
185
- }
186
- chunkOLISEQHS_cjs.__name(appearanceToStyle, "appearanceToStyle");
187
- var RADIUS_CLASS = {
188
- none: "rounded-none",
189
- sm: "rounded-sm",
190
- md: "rounded-md"
191
- };
192
- function radiusClass(a) {
193
- return RADIUS_CLASS[a.radius];
194
- }
195
- chunkOLISEQHS_cjs.__name(radiusClass, "radiusClass");
196
- var HOVER = {
197
- subtle: "hover:bg-foreground/[.03]",
198
- default: "hover:bg-foreground/[.06]",
199
- strong: "hover:bg-foreground/[.09]"
200
- };
201
- var FOCUSED_NOT_SELECTED = {
202
- subtle: "data-[focused=true]:bg-foreground/[.05]",
203
- default: "data-[focused=true]:bg-foreground/[.08]",
204
- strong: "data-[focused=true]:bg-foreground/[.12]"
205
- };
206
- var SELECTED_INACTIVE = {
207
- subtle: "data-[selected=true]:bg-foreground/[.06]",
208
- default: "data-[selected=true]:bg-foreground/[.10]",
209
- strong: "data-[selected=true]:bg-foreground/[.14]"
210
- };
211
- var SELECTED_ACTIVE = {
212
- subtle: "data-[selected=true]:group-focus-within/tree:bg-primary/10 data-[selected=true]:group-focus-within/tree:text-primary",
213
- default: "data-[selected=true]:group-focus-within/tree:bg-primary/15 data-[selected=true]:group-focus-within/tree:text-primary",
214
- strong: "data-[selected=true]:group-focus-within/tree:bg-primary/25 data-[selected=true]:group-focus-within/tree:text-primary"
215
- };
216
- function rowStateClasses(a) {
217
- return [
218
- HOVER[a.accent],
219
- FOCUSED_NOT_SELECTED[a.accent],
220
- SELECTED_INACTIVE[a.accent],
221
- SELECTED_ACTIVE[a.accent]
222
- ].join(" ");
223
- }
224
- chunkOLISEQHS_cjs.__name(rowStateClasses, "rowStateClasses");
225
- var reducer = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((state, action) => {
226
- switch (action.type) {
227
- case "expand": {
228
- if (state.expanded.has(action.id)) return state;
229
- const next = new Set(state.expanded);
230
- next.add(action.id);
231
- return { ...state, expanded: next };
232
- }
233
- case "collapse": {
234
- if (!state.expanded.has(action.id)) return state;
235
- const next = new Set(state.expanded);
236
- next.delete(action.id);
237
- return { ...state, expanded: next };
238
- }
239
- case "toggle": {
240
- const next = new Set(state.expanded);
241
- if (next.has(action.id)) next.delete(action.id);
242
- else next.add(action.id);
243
- return { ...state, expanded: next };
244
- }
245
- case "set-expanded":
246
- return { ...state, expanded: new Set(action.ids) };
247
- case "select": {
248
- if (action.mode === "none") return state;
249
- if (action.mode === "single") {
250
- return { ...state, selected: /* @__PURE__ */ new Set([action.id]), focused: action.id };
251
- }
252
- const next = new Set(state.selected);
253
- if (next.has(action.id)) next.delete(action.id);
254
- else next.add(action.id);
255
- return { ...state, selected: next, focused: action.id };
256
- }
257
- case "select-many":
258
- return { ...state, selected: new Set(action.ids) };
259
- case "clear-selection":
260
- return { ...state, selected: /* @__PURE__ */ new Set() };
261
- case "focus":
262
- return { ...state, focused: action.id };
263
- case "set-query":
264
- return { ...state, query: action.q };
265
- case "cache-tick":
266
- return { ...state, cacheTick: state.cacheTick + 1 };
267
- default:
268
- return state;
269
- }
270
- }, "reducer");
271
- var TreeContext = React.createContext(null);
272
- function useTreeContext() {
273
- const ctx = React__namespace.useContext(TreeContext);
274
- if (!ctx) {
275
- throw new Error("useTreeContext must be used inside <TreeProvider>");
276
- }
277
- return ctx;
278
- }
279
- chunkOLISEQHS_cjs.__name(useTreeContext, "useTreeContext");
280
- var setEqualsArr = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((set, arr) => {
281
- if (set.size !== arr.length) return false;
282
- for (const id of arr) if (!set.has(id)) return false;
283
- return true;
284
- }, "setEqualsArr");
285
- var collectAllIds = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((roots, cache, out) => {
286
- for (const node of roots) {
287
- if (Array.isArray(node.children)) {
288
- out.push(node.id);
289
- collectAllIds(node.children, cache, out);
290
- } else if (node.isFolder) {
291
- out.push(node.id);
292
- const entry = cache.get(node.id);
293
- if (entry?.children) collectAllIds(entry.children, cache, out);
294
- }
295
- }
296
- }, "collectAllIds");
297
- function TreeProvider(props) {
298
- const {
299
- data,
300
- getItemName,
301
- loadChildren,
302
- selectionMode = "single",
303
- activationMode = "single-click",
304
- initialExpandedIds,
305
- initialSelectedIds,
306
- indent,
307
- appearance,
308
- onSelectionChange,
309
- onExpansionChange,
310
- onActivate,
311
- filterNode,
312
- enableSearch = false,
313
- showIndentGuides = false,
314
- renderIcon,
315
- renderLabel,
316
- renderActions,
317
- renderContextMenu,
318
- labels: labelsOverride,
319
- persistKey,
320
- persistSelection = false,
321
- children
322
- } = props;
323
- const labels = React.useMemo(
324
- () => ({ ...DEFAULT_TREE_LABELS, ...labelsOverride }),
325
- [labelsOverride]
326
- );
327
- const resolvedAppearance = React.useMemo(
328
- () => resolveAppearance(appearance, indent),
329
- [appearance, indent]
330
- );
331
- const persisted = React.useMemo(
332
- () => persistKey ? loadTreeState(persistKey) : null,
333
- [persistKey]
334
- );
335
- const [state, dispatch] = React.useReducer(reducer, void 0, () => ({
336
- expanded: new Set(persisted?.expandedItems ?? initialExpandedIds ?? []),
337
- selected: new Set(
338
- (persistSelection ? persisted?.selectedItems : void 0) ?? initialSelectedIds ?? []
339
- ),
340
- focused: null,
341
- query: "",
342
- cacheTick: 0
343
- }));
344
- const cacheRef = React.useRef(createChildCache());
345
- const inflightRef = React.useRef(/* @__PURE__ */ new Map());
346
- const fetchChildren = React.useCallback(
347
- async (node) => {
348
- if (!loadChildren) return;
349
- if (Array.isArray(node.children)) return;
350
- const existing = cacheRef.current.get(node.id);
351
- if (existing?.status === "loaded" || existing?.status === "loading") return;
352
- const inflight = inflightRef.current.get(node.id);
353
- if (inflight) return inflight;
354
- cacheRef.current.set(node.id, { status: "loading", children: [] });
355
- dispatch({ type: "cache-tick" });
356
- const promise = (async () => {
357
- try {
358
- const children2 = await loadChildren(node);
359
- cacheRef.current.set(node.id, { status: "loaded", children: children2 });
360
- } catch (err) {
361
- cacheRef.current.set(node.id, {
362
- status: "error",
363
- children: [],
364
- error: err instanceof Error ? err.message : String(err)
365
- });
366
- } finally {
367
- inflightRef.current.delete(node.id);
368
- dispatch({ type: "cache-tick" });
369
- }
370
- })();
371
- inflightRef.current.set(node.id, promise);
372
- return promise;
373
- },
374
- [loadChildren]
375
- );
376
- const nodeById = React.useMemo(() => {
377
- const map = /* @__PURE__ */ new Map();
378
- const walk = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((nodes) => {
379
- for (const n of nodes) {
380
- map.set(n.id, n);
381
- if (Array.isArray(n.children)) walk(n.children);
382
- else {
383
- const entry = cacheRef.current.get(n.id);
384
- if (entry?.children) walk(entry.children);
385
- }
386
- }
387
- }, "walk");
388
- walk(data);
389
- return map;
390
- }, [data, state.cacheTick]);
391
- React.useEffect(() => {
392
- if (!loadChildren) return;
393
- for (const id of state.expanded) {
394
- const node = nodeById.get(id);
395
- if (!node) continue;
396
- void fetchChildren(node);
397
- }
398
- }, [loadChildren, state.expanded, state.cacheTick, nodeById, fetchChildren]);
399
- const flatRows = React.useMemo(
400
- () => flattenTree({
401
- roots: data,
402
- expandedIds: state.expanded,
403
- cache: cacheRef.current,
404
- filterNode
405
- }),
406
- [data, state.expanded, state.cacheTick, filterNode]
407
- );
408
- const matchingIds = React.useMemo(() => {
409
- const set = /* @__PURE__ */ new Set();
410
- if (!enableSearch || state.query.trim() === "") return set;
411
- const q = state.query.trim().toLowerCase();
412
- for (const row of flatRows) {
413
- if (getItemName(row.node).toLowerCase().includes(q)) {
414
- set.add(row.node.id);
415
- }
416
- }
417
- return set;
418
- }, [enableSearch, state.query, flatRows, getItemName]);
419
- const onSelectionChangeRef = React.useRef(onSelectionChange);
420
- const onExpansionChangeRef = React.useRef(onExpansionChange);
421
- const onActivateRef = React.useRef(onActivate);
422
- onSelectionChangeRef.current = onSelectionChange;
423
- onExpansionChangeRef.current = onExpansionChange;
424
- onActivateRef.current = onActivate;
425
- const lastSelectedArrRef = React.useRef([...state.selected]);
426
- const lastExpandedArrRef = React.useRef([...state.expanded]);
427
- React.useEffect(() => {
428
- const arr = [...state.expanded];
429
- if (!setEqualsArr(state.expanded, lastExpandedArrRef.current)) {
430
- lastExpandedArrRef.current = arr;
431
- onExpansionChangeRef.current?.(arr);
432
- if (persistKey) {
433
- saveTreeState(persistKey, {
434
- expandedItems: arr,
435
- selectedItems: persistSelection ? [...state.selected] : []
436
- });
437
- }
438
- }
439
- }, [state.expanded, persistKey, persistSelection, state.selected]);
440
- React.useEffect(() => {
441
- const arr = [...state.selected];
442
- if (!setEqualsArr(state.selected, lastSelectedArrRef.current)) {
443
- lastSelectedArrRef.current = arr;
444
- onSelectionChangeRef.current?.(arr);
445
- if (persistKey && persistSelection) {
446
- saveTreeState(persistKey, {
447
- expandedItems: [...state.expanded],
448
- selectedItems: arr
449
- });
450
- }
451
- }
452
- }, [state.selected, persistKey, persistSelection, state.expanded]);
453
- const expand = React.useCallback((id) => dispatch({ type: "expand", id }), []);
454
- const collapse = React.useCallback((id) => dispatch({ type: "collapse", id }), []);
455
- const toggle = React.useCallback((id) => dispatch({ type: "toggle", id }), []);
456
- const expandAll = React.useCallback(() => {
457
- const ids = [];
458
- collectAllIds(data, cacheRef.current, ids);
459
- dispatch({ type: "set-expanded", ids });
460
- }, [data]);
461
- const collapseAll = React.useCallback(
462
- () => dispatch({ type: "set-expanded", ids: [] }),
463
- []
464
- );
465
- const select = React.useCallback(
466
- (id) => dispatch({ type: "select", id, mode: selectionMode }),
467
- [selectionMode]
468
- );
469
- const setSelectedIds = React.useCallback(
470
- (ids) => dispatch({ type: "select-many", ids }),
471
- []
472
- );
473
- const clearSelection = React.useCallback(() => dispatch({ type: "clear-selection" }), []);
474
- const setFocus = React.useCallback(
475
- (id) => dispatch({ type: "focus", id }),
476
- []
477
- );
478
- const setQuery = React.useCallback((q) => dispatch({ type: "set-query", q }), []);
479
- const refresh = React.useCallback(
480
- async (id) => {
481
- const node = nodeById.get(id);
482
- if (!node || !loadChildren) return;
483
- cacheRef.current.delete(id);
484
- dispatch({ type: "cache-tick" });
485
- await fetchChildren(node);
486
- },
487
- [nodeById, loadChildren, fetchChildren]
488
- );
489
- const refreshAll = React.useCallback(async () => {
490
- cacheRef.current.clear();
491
- dispatch({ type: "cache-tick" });
492
- if (!loadChildren) return;
493
- await Promise.all(
494
- [...state.expanded].map((id) => {
495
- const node = nodeById.get(id);
496
- return node ? fetchChildren(node) : void 0;
497
- })
498
- );
499
- }, [loadChildren, state.expanded, nodeById, fetchChildren]);
500
- const activate = React.useCallback(
501
- (node, opts = { preview: false }) => onActivateRef.current?.(node, opts),
502
- []
503
- );
504
- const value = React.useMemo(
505
- () => ({
506
- expanded: state.expanded,
507
- selected: state.selected,
508
- focused: state.focused,
509
- query: state.query,
510
- flatRows,
511
- matchingIds,
512
- expand,
513
- collapse,
514
- toggle,
515
- expandAll,
516
- collapseAll,
517
- select,
518
- setSelectedIds,
519
- clearSelection,
520
- setFocus,
521
- setQuery,
522
- refresh,
523
- refreshAll,
524
- activate,
525
- labels,
526
- appearance: resolvedAppearance,
527
- indent: resolvedAppearance.indent,
528
- selectionMode,
529
- activationMode,
530
- enableSearch,
531
- showIndentGuides,
532
- getItemName,
533
- renderIcon,
534
- renderLabel,
535
- renderActions,
536
- renderContextMenu
537
- }),
538
- [
539
- state.expanded,
540
- state.selected,
541
- state.focused,
542
- state.query,
543
- flatRows,
544
- matchingIds,
545
- expand,
546
- collapse,
547
- toggle,
548
- expandAll,
549
- collapseAll,
550
- select,
551
- setSelectedIds,
552
- clearSelection,
553
- setFocus,
554
- setQuery,
555
- refresh,
556
- refreshAll,
557
- activate,
558
- labels,
559
- resolvedAppearance,
560
- selectionMode,
561
- activationMode,
562
- enableSearch,
563
- showIndentGuides,
564
- getItemName,
565
- renderIcon,
566
- renderLabel,
567
- renderActions,
568
- renderContextMenu
569
- ]
570
- );
571
- return /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value, children });
572
- }
573
- chunkOLISEQHS_cjs.__name(TreeProvider, "TreeProvider");
574
- function TreeChevronRaw({ isExpanded, isFolder, className }) {
575
- const { appearance } = useTreeContext();
576
- const size = { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" };
577
- if (!isFolder) {
578
- return /* @__PURE__ */ jsxRuntime.jsx(
579
- "span",
580
- {
581
- "aria-hidden": true,
582
- style: size,
583
- className: lib.cn("inline-block shrink-0", className)
584
- }
585
- );
586
- }
587
- const Icon = isExpanded ? lucideReact.ChevronDown : lucideReact.ChevronRight;
588
- return /* @__PURE__ */ jsxRuntime.jsx(
589
- Icon,
590
- {
591
- "aria-hidden": true,
592
- strokeWidth: appearance.iconStrokeWidth,
593
- style: size,
594
- className: lib.cn(
595
- "shrink-0 text-muted-foreground/70 transition-transform",
596
- className
597
- )
598
- }
599
- );
600
- }
601
- chunkOLISEQHS_cjs.__name(TreeChevronRaw, "TreeChevronRaw");
602
- var TreeChevron = React.memo(TreeChevronRaw);
603
- function TreeIconRaw({ isFolder, isExpanded, className }) {
604
- const { appearance } = useTreeContext();
605
- const Icon = isFolder ? isExpanded ? lucideReact.FolderOpen : lucideReact.Folder : lucideReact.File;
606
- return /* @__PURE__ */ jsxRuntime.jsx(
607
- Icon,
608
- {
609
- "aria-hidden": true,
610
- strokeWidth: appearance.iconStrokeWidth,
611
- style: { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" },
612
- className: lib.cn(
613
- "shrink-0",
614
- isFolder ? "text-foreground/70" : "text-muted-foreground/80",
615
- className
616
- )
617
- }
618
- );
619
- }
620
- chunkOLISEQHS_cjs.__name(TreeIconRaw, "TreeIconRaw");
621
- var TreeIcon = React.memo(TreeIconRaw);
622
- function TreeIndentGuides({ level, indent }) {
623
- const { appearance } = useTreeContext();
624
- if (level <= 0) return null;
625
- return /* @__PURE__ */ jsxRuntime.jsx(
626
- "span",
627
- {
628
- "aria-hidden": true,
629
- className: "pointer-events-none absolute inset-y-0 left-0",
630
- style: { width: 8 + level * indent, opacity: appearance.indentGuideOpacity },
631
- children: Array.from({ length: level }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
632
- "span",
633
- {
634
- className: "absolute inset-y-0 w-px bg-border",
635
- style: { left: 8 + i * indent + indent / 2 - 0.5 }
636
- },
637
- i
638
- ))
639
- }
640
- );
641
- }
642
- chunkOLISEQHS_cjs.__name(TreeIndentGuides, "TreeIndentGuides");
643
- function TreeLabelRaw({ children, isMatchingSearch, className }) {
644
- return /* @__PURE__ */ jsxRuntime.jsx(
645
- "span",
646
- {
647
- style: { fontSize: "var(--tree-font-size)" },
648
- className: lib.cn(
649
- "truncate leading-tight tracking-[-0.005em]",
650
- isMatchingSearch && "font-medium text-foreground",
651
- className
652
- ),
653
- children
654
- }
655
- );
656
- }
657
- chunkOLISEQHS_cjs.__name(TreeLabelRaw, "TreeLabelRaw");
658
- var TreeLabel = React.memo(TreeLabelRaw);
659
- function TreeRowRaw({ row, className }) {
660
- const ctx = useTreeContext();
661
- const {
662
- appearance,
663
- activationMode,
664
- showIndentGuides,
665
- selected,
666
- focused,
667
- matchingIds,
668
- select,
669
- toggle,
670
- setFocus,
671
- activate,
672
- getItemName,
673
- renderIcon,
674
- renderLabel,
675
- renderActions,
676
- renderContextMenu
677
- } = ctx;
678
- const { node, level, isFolder, isExpanded, isLoading } = row;
679
- const isSelected = selected.has(node.id);
680
- const isFocused = focused === node.id;
681
- const isMatchingSearch = matchingIds.has(node.id);
682
- const slot = {
683
- node,
684
- level,
685
- isSelected,
686
- isExpanded,
687
- isFocused,
688
- isFolder,
689
- isLoading,
690
- isMatchingSearch
691
- };
692
- const handleClick = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((e) => {
693
- if (node.disabled) return;
694
- setFocus(node.id);
695
- select(node.id);
696
- if (isFolder) {
697
- toggle(node.id);
698
- } else if (activationMode === "single-click") {
699
- activate(node, { preview: false });
700
- } else if (activationMode === "single-click-preview") {
701
- activate(node, { preview: true });
702
- }
703
- e.currentTarget.scrollIntoView?.({ block: "nearest" });
704
- }, "handleClick");
705
- const handleDoubleClick = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => {
706
- if (node.disabled) return;
707
- if (isFolder) return;
708
- activate(node, { preview: false });
709
- }, "handleDoubleClick");
710
- const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
711
- "div",
712
- {
713
- role: "treeitem",
714
- "aria-level": level + 1,
715
- "aria-expanded": isFolder ? isExpanded : void 0,
716
- "aria-selected": isSelected || void 0,
717
- "aria-current": isSelected ? "true" : void 0,
718
- "aria-disabled": node.disabled || void 0,
719
- "data-tree-row": "",
720
- "data-id": node.id,
721
- "data-activation-mode": activationMode,
722
- "data-selected": isSelected ? "true" : void 0,
723
- "data-focused": isFocused && !isSelected ? "true" : void 0,
724
- "data-folder": isFolder || void 0,
725
- "data-expanded": isExpanded || void 0,
726
- tabIndex: isFocused ? 0 : -1,
727
- style: {
728
- paddingLeft: 6 + level * appearance.indent,
729
- height: "var(--tree-row-height)",
730
- gap: "var(--tree-gap)"
731
- },
732
- onClick: handleClick,
733
- onDoubleClick: handleDoubleClick,
734
- onFocus: () => setFocus(node.id),
735
- className: lib.cn(
736
- "group/row relative flex w-full select-none items-center pr-2 text-left",
737
- "transition-colors outline-none",
738
- node.disabled ? "cursor-not-allowed" : "cursor-pointer",
739
- radiusClass(appearance),
740
- rowStateClasses(appearance),
741
- "focus-visible:ring-1 focus-visible:ring-ring/50",
742
- isMatchingSearch && "ring-1 ring-primary/30",
743
- node.disabled && "opacity-50",
744
- className
745
- ),
746
- children: [
747
- appearance.showActiveIndicator && isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
748
- "span",
749
- {
750
- "aria-hidden": true,
751
- className: lib.cn(
752
- "absolute left-0 top-1 bottom-1 w-0.5 rounded-r-full",
753
- "bg-foreground/30 group-focus-within/tree:bg-primary"
754
- )
755
- }
756
- ) : null,
757
- showIndentGuides && level > 0 ? /* @__PURE__ */ jsxRuntime.jsx(TreeIndentGuides, { level, indent: appearance.indent }) : null,
758
- /* @__PURE__ */ jsxRuntime.jsx(TreeChevron, { isExpanded, isFolder }),
759
- isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
760
- lucideReact.Loader2,
761
- {
762
- "aria-hidden": true,
763
- strokeWidth: appearance.iconStrokeWidth,
764
- style: { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" },
765
- className: "shrink-0 animate-spin text-muted-foreground/70"
766
- }
767
- ) : renderIcon ? renderIcon(slot) : /* @__PURE__ */ jsxRuntime.jsx(TreeIcon, { isFolder, isExpanded }),
768
- /* @__PURE__ */ jsxRuntime.jsx(
769
- "span",
770
- {
771
- className: "flex min-w-0 flex-1 items-center",
772
- style: { gap: "var(--tree-gap)" },
773
- children: renderLabel ? renderLabel(slot) : /* @__PURE__ */ jsxRuntime.jsx(TreeLabel, { isMatchingSearch, children: getItemName(node) })
774
- }
775
- ),
776
- renderActions ? /* @__PURE__ */ jsxRuntime.jsx(
777
- "span",
778
- {
779
- className: "ml-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100",
780
- onClick: (e) => e.stopPropagation(),
781
- children: renderActions(slot)
782
- }
783
- ) : null
784
- ]
785
- }
786
- );
787
- if (renderContextMenu) {
788
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderContextMenu(slot, trigger) });
789
- }
790
- return trigger;
791
- }
792
- chunkOLISEQHS_cjs.__name(TreeRowRaw, "TreeRowRaw");
793
- var TreeRow = React.memo(TreeRowRaw);
794
- function TreeEmpty({ children, className }) {
795
- return /* @__PURE__ */ jsxRuntime.jsx(
796
- "div",
797
- {
798
- className: lib.cn(
799
- "flex h-full min-h-32 items-center justify-center px-4 py-6 text-sm text-muted-foreground",
800
- className
801
- ),
802
- children
803
- }
804
- );
805
- }
806
- chunkOLISEQHS_cjs.__name(TreeEmpty, "TreeEmpty");
807
- function TreeContent({ children, className, ariaLabel }) {
808
- const { flatRows, labels, selected, focused, matchingIds, appearance } = useTreeContext();
809
- if (flatRows.length === 0) {
810
- return /* @__PURE__ */ jsxRuntime.jsx(TreeEmpty, { children: labels.empty });
811
- }
812
- return /* @__PURE__ */ jsxRuntime.jsx(
813
- "div",
814
- {
815
- role: "tree",
816
- "aria-label": ariaLabel ?? labels.ariaLabel,
817
- className: lib.cn("relative flex flex-col py-1", className),
818
- style: appearanceToStyle(appearance),
819
- children: flatRows.map((row) => {
820
- const slot = {
821
- node: row.node,
822
- level: row.level,
823
- isSelected: selected.has(row.node.id),
824
- isExpanded: row.isExpanded,
825
- isFocused: focused === row.node.id,
826
- isFolder: row.isFolder,
827
- isLoading: row.isLoading,
828
- isMatchingSearch: matchingIds.has(row.node.id)
829
- };
830
- const node = children ? children(slot) : /* @__PURE__ */ jsxRuntime.jsx(TreeRow, { row });
831
- return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: node }, row.node.id);
832
- })
833
- }
834
- );
835
- }
836
- chunkOLISEQHS_cjs.__name(TreeContent, "TreeContent");
837
- function useTreeLabels() {
838
- return useTreeContext().labels;
839
- }
840
- chunkOLISEQHS_cjs.__name(useTreeLabels, "useTreeLabels");
841
- function useTreeRows() {
842
- return useTreeContext().flatRows;
843
- }
844
- chunkOLISEQHS_cjs.__name(useTreeRows, "useTreeRows");
845
- function useTreeSelection() {
846
- const ctx = useTreeContext();
847
- const selectedIds = React.useMemo(() => [...ctx.selected], [ctx.selected]);
848
- const isSelected = React.useCallback(
849
- (id) => ctx.selected.has(id),
850
- [ctx.selected]
851
- );
852
- return React.useMemo(
853
- () => ({
854
- selectedIds,
855
- select: ctx.select,
856
- setSelectedIds: ctx.setSelectedIds,
857
- clear: ctx.clearSelection,
858
- isSelected
859
- }),
860
- [selectedIds, ctx.select, ctx.setSelectedIds, ctx.clearSelection, isSelected]
861
- );
862
- }
863
- chunkOLISEQHS_cjs.__name(useTreeSelection, "useTreeSelection");
864
- function useTreeExpansion() {
865
- const ctx = useTreeContext();
866
- const expandedIds = React.useMemo(() => [...ctx.expanded], [ctx.expanded]);
867
- const isExpanded = React.useCallback(
868
- (id) => ctx.expanded.has(id),
869
- [ctx.expanded]
870
- );
871
- return React.useMemo(
872
- () => ({
873
- expandedIds,
874
- expand: ctx.expand,
875
- collapse: ctx.collapse,
876
- toggle: ctx.toggle,
877
- expandAll: ctx.expandAll,
878
- collapseAll: ctx.collapseAll,
879
- isExpanded
880
- }),
881
- [
882
- expandedIds,
883
- ctx.expand,
884
- ctx.collapse,
885
- ctx.toggle,
886
- ctx.expandAll,
887
- ctx.collapseAll,
888
- isExpanded
889
- ]
890
- );
891
- }
892
- chunkOLISEQHS_cjs.__name(useTreeExpansion, "useTreeExpansion");
893
- function useTreeFocus() {
894
- const ctx = useTreeContext();
895
- return React.useMemo(
896
- () => ({ focusedId: ctx.focused, setFocus: ctx.setFocus }),
897
- [ctx.focused, ctx.setFocus]
898
- );
899
- }
900
- chunkOLISEQHS_cjs.__name(useTreeFocus, "useTreeFocus");
901
- function useTreeSearch() {
902
- const ctx = useTreeContext();
903
- return React.useMemo(
904
- () => ({
905
- isOpen: ctx.enableSearch,
906
- query: ctx.query,
907
- setQuery: ctx.setQuery,
908
- matchingIds: ctx.matchingIds,
909
- matchCount: ctx.matchingIds.size
910
- }),
911
- [ctx.enableSearch, ctx.query, ctx.setQuery, ctx.matchingIds]
912
- );
913
- }
914
- chunkOLISEQHS_cjs.__name(useTreeSearch, "useTreeSearch");
915
- function useTreeActions() {
916
- const ctx = useTreeContext();
917
- return React.useMemo(
918
- () => ({
919
- expand: ctx.expand,
920
- collapse: ctx.collapse,
921
- toggle: ctx.toggle,
922
- expandAll: ctx.expandAll,
923
- collapseAll: ctx.collapseAll,
924
- refresh: ctx.refresh,
925
- refreshAll: ctx.refreshAll,
926
- activate: ctx.activate
927
- }),
928
- [
929
- ctx.expand,
930
- ctx.collapse,
931
- ctx.toggle,
932
- ctx.expandAll,
933
- ctx.collapseAll,
934
- ctx.refresh,
935
- ctx.refreshAll,
936
- ctx.activate
937
- ]
938
- );
939
- }
940
- chunkOLISEQHS_cjs.__name(useTreeActions, "useTreeActions");
941
- function TreeSearchInput({ className, showMatches = true }) {
942
- const { labels } = useTreeContext();
943
- const { query, setQuery, matchCount } = useTreeSearch();
944
- return /* @__PURE__ */ jsxRuntime.jsxs(
945
- "div",
946
- {
947
- className: lib.cn(
948
- "flex items-center gap-2 rounded-md border border-border bg-background px-2",
949
- className
950
- ),
951
- children: [
952
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }),
953
- /* @__PURE__ */ jsxRuntime.jsx(
954
- "input",
955
- {
956
- type: "search",
957
- value: query,
958
- onChange: (e) => setQuery(e.target.value),
959
- placeholder: labels.searchPlaceholder,
960
- className: "h-7 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
961
- }
962
- ),
963
- showMatches && query.trim().length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: labels.searchMatches(matchCount) }) : null,
964
- query.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
965
- "button",
966
- {
967
- type: "button",
968
- onClick: () => setQuery(""),
969
- "aria-label": "Clear search",
970
- className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
971
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": true, className: "size-3.5" })
972
- }
973
- ) : null
974
- ]
975
- }
976
- );
977
- }
978
- chunkOLISEQHS_cjs.__name(TreeSearchInput, "TreeSearchInput");
979
- function useTreeKeyboard({
980
- rows,
981
- focusedId,
982
- enabled = true,
983
- onFocus,
984
- onSelect,
985
- onActivate,
986
- onExpand,
987
- onCollapse,
988
- onClearSelection
989
- }) {
990
- const rowsRef = React.useRef(rows);
991
- const focusedIdRef = React.useRef(focusedId);
992
- rowsRef.current = rows;
993
- focusedIdRef.current = focusedId;
994
- const getCurrent = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => {
995
- const r = rowsRef.current;
996
- const id = focusedIdRef.current;
997
- const idx = id ? r.findIndex((x) => x.node.id === id) : -1;
998
- return { rows: r, idx, current: idx >= 0 ? r[idx] : null };
999
- }, "getCurrent");
1000
- const refDown = hooks.useHotkey(
1001
- "down",
1002
- () => {
1003
- const { rows: r, idx } = getCurrent();
1004
- if (r.length === 0) return;
1005
- const next = r[Math.min(idx + 1, r.length - 1)] ?? r[0];
1006
- onFocus(next.node.id);
1007
- },
1008
- { enabled, preventDefault: true, description: "Next row" }
1009
- );
1010
- const refUp = hooks.useHotkey(
1011
- "up",
1012
- () => {
1013
- const { rows: r, idx } = getCurrent();
1014
- if (r.length === 0) return;
1015
- const prev = r[Math.max(idx - 1, 0)] ?? r[0];
1016
- onFocus(prev.node.id);
1017
- },
1018
- { enabled, preventDefault: true, description: "Previous row" }
1019
- );
1020
- const refHome = hooks.useHotkey(
1021
- "home",
1022
- () => {
1023
- const { rows: r } = getCurrent();
1024
- if (r.length === 0) return;
1025
- onFocus(r[0].node.id);
1026
- },
1027
- { enabled, preventDefault: true, description: "First row" }
1028
- );
1029
- const refEnd = hooks.useHotkey(
1030
- "end",
1031
- () => {
1032
- const { rows: r } = getCurrent();
1033
- if (r.length === 0) return;
1034
- onFocus(r[r.length - 1].node.id);
1035
- },
1036
- { enabled, preventDefault: true, description: "Last row" }
1037
- );
1038
- const refRight = hooks.useHotkey(
1039
- "right",
1040
- () => {
1041
- const { rows: r, idx, current } = getCurrent();
1042
- if (!current) return;
1043
- if (current.isFolder && !current.isExpanded) {
1044
- onExpand(current.node.id);
1045
- } else if (current.isFolder && current.isExpanded) {
1046
- const next = r[idx + 1];
1047
- if (next) onFocus(next.node.id);
1048
- }
1049
- },
1050
- { enabled, preventDefault: true, description: "Expand / first child" }
1051
- );
1052
- const refLeft = hooks.useHotkey(
1053
- "left",
1054
- () => {
1055
- const { current } = getCurrent();
1056
- if (!current) return;
1057
- if (current.isFolder && current.isExpanded) {
1058
- onCollapse(current.node.id);
1059
- } else if (current.parentId) {
1060
- onFocus(current.parentId);
1061
- }
1062
- },
1063
- { enabled, preventDefault: true, description: "Collapse / parent" }
1064
- );
1065
- const refActivate = hooks.useHotkey(
1066
- ["enter", "space"],
1067
- () => {
1068
- const { current } = getCurrent();
1069
- if (!current) return;
1070
- onSelect(current.node.id);
1071
- if (current.isFolder) {
1072
- if (current.isExpanded) onCollapse(current.node.id);
1073
- else onExpand(current.node.id);
1074
- } else {
1075
- onActivate(current.node.id);
1076
- }
1077
- },
1078
- { enabled, preventDefault: true, description: "Activate / toggle" }
1079
- );
1080
- const refEscape = hooks.useHotkey(
1081
- "escape",
1082
- () => onClearSelection(),
1083
- { enabled, preventDefault: true, description: "Clear selection" }
1084
- );
1085
- const ref = React.useCallback(
1086
- (instance) => {
1087
- refDown(instance);
1088
- refUp(instance);
1089
- refHome(instance);
1090
- refEnd(instance);
1091
- refRight(instance);
1092
- refLeft(instance);
1093
- refActivate(instance);
1094
- refEscape(instance);
1095
- },
1096
- [refDown, refUp, refHome, refEnd, refRight, refLeft, refActivate, refEscape]
1097
- );
1098
- return { ref };
1099
- }
1100
- chunkOLISEQHS_cjs.__name(useTreeKeyboard, "useTreeKeyboard");
1101
- var FLUSH_MS = 600;
1102
- function useTreeTypeAhead({
1103
- rows,
1104
- getItemName,
1105
- containerRef,
1106
- onMatch,
1107
- enabled = true
1108
- }) {
1109
- const bufferRef = React.useRef("");
1110
- const timerRef = React.useRef(null);
1111
- const rowsRef = React.useRef(rows);
1112
- const getNameRef = React.useRef(getItemName);
1113
- const onMatchRef = React.useRef(onMatch);
1114
- rowsRef.current = rows;
1115
- getNameRef.current = getItemName;
1116
- onMatchRef.current = onMatch;
1117
- React.useEffect(() => {
1118
- if (!enabled) return;
1119
- const target = containerRef.current;
1120
- if (!target) return;
1121
- const reset = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => {
1122
- bufferRef.current = "";
1123
- if (timerRef.current) {
1124
- clearTimeout(timerRef.current);
1125
- timerRef.current = null;
1126
- }
1127
- }, "reset");
1128
- const handler = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((e) => {
1129
- const tag = e.target?.tagName;
1130
- if (tag === "INPUT" || tag === "TEXTAREA") return;
1131
- if (e.target?.isContentEditable) return;
1132
- if (e.metaKey || e.ctrlKey || e.altKey) return;
1133
- if (e.key === "Escape" || e.key === "Enter" || e.key === "Tab" || e.key.startsWith("Arrow") || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") {
1134
- reset();
1135
- return;
1136
- }
1137
- if (e.key.length !== 1) return;
1138
- bufferRef.current += e.key.toLowerCase();
1139
- if (timerRef.current) clearTimeout(timerRef.current);
1140
- timerRef.current = setTimeout(reset, FLUSH_MS);
1141
- const prefix = bufferRef.current;
1142
- const hit = rowsRef.current.find(
1143
- (row) => getNameRef.current(row.node).toLowerCase().startsWith(prefix)
1144
- );
1145
- if (hit) {
1146
- e.preventDefault();
1147
- onMatchRef.current(hit.node.id);
1148
- }
1149
- }, "handler");
1150
- target.addEventListener("keydown", handler);
1151
- return () => {
1152
- target.removeEventListener("keydown", handler);
1153
- reset();
1154
- };
1155
- }, [containerRef, enabled]);
1156
- }
1157
- chunkOLISEQHS_cjs.__name(useTreeTypeAhead, "useTreeTypeAhead");
1158
- function TreeRoot(props) {
1159
- const {
1160
- data,
1161
- getItemName,
1162
- loadChildren,
1163
- selectionMode,
1164
- activationMode,
1165
- initialExpandedIds,
1166
- initialSelectedIds,
1167
- indent,
1168
- appearance,
1169
- onSelectionChange,
1170
- onExpansionChange,
1171
- onActivate,
1172
- filterNode,
1173
- enableSearch = false,
1174
- enableTypeAhead = true,
1175
- showIndentGuides = false,
1176
- renderRow,
1177
- renderIcon,
1178
- renderLabel,
1179
- renderActions,
1180
- renderContextMenu,
1181
- labels,
1182
- persistKey,
1183
- persistSelection = false,
1184
- className,
1185
- style
1186
- } = props;
1187
- return /* @__PURE__ */ jsxRuntime.jsx(
1188
- TreeProvider,
1189
- {
1190
- data,
1191
- getItemName,
1192
- loadChildren,
1193
- selectionMode,
1194
- activationMode,
1195
- initialExpandedIds,
1196
- initialSelectedIds,
1197
- indent,
1198
- appearance,
1199
- onSelectionChange,
1200
- onExpansionChange,
1201
- onActivate,
1202
- filterNode,
1203
- enableSearch,
1204
- showIndentGuides,
1205
- renderIcon,
1206
- renderLabel,
1207
- renderActions,
1208
- renderContextMenu,
1209
- labels,
1210
- persistKey,
1211
- persistSelection,
1212
- children: /* @__PURE__ */ jsxRuntime.jsx(
1213
- TreeRootShell,
1214
- {
1215
- className,
1216
- style,
1217
- enableSearch,
1218
- enableTypeAhead,
1219
- renderRow
1220
- }
1221
- )
1222
- }
1223
- );
1224
- }
1225
- chunkOLISEQHS_cjs.__name(TreeRoot, "TreeRoot");
1226
- function TreeRootShell({
1227
- className,
1228
- style,
1229
- enableSearch,
1230
- enableTypeAhead,
1231
- renderRow
1232
- }) {
1233
- const containerRef = React.useRef(null);
1234
- const ctx = useTreeContext();
1235
- const { ref: keyboardRef } = useTreeKeyboard({
1236
- rows: ctx.flatRows,
1237
- focusedId: ctx.focused,
1238
- onFocus: ctx.setFocus,
1239
- onSelect: ctx.select,
1240
- onActivate: /* @__PURE__ */ chunkOLISEQHS_cjs.__name((id) => {
1241
- const row = ctx.flatRows.find((r) => r.node.id === id);
1242
- if (row) ctx.activate(row.node, { preview: false });
1243
- }, "onActivate"),
1244
- onExpand: ctx.expand,
1245
- onCollapse: ctx.collapse,
1246
- onClearSelection: ctx.clearSelection
1247
- });
1248
- const setContainerRef = React.useCallback(
1249
- (instance) => {
1250
- containerRef.current = instance;
1251
- keyboardRef(instance);
1252
- },
1253
- [keyboardRef]
1254
- );
1255
- const onTypeAheadMatch = React.useCallback(
1256
- (id) => {
1257
- ctx.setFocus(id);
1258
- const el = containerRef.current?.querySelector(
1259
- `[data-tree-row][data-id="${CSS.escape(id)}"]`
1260
- );
1261
- el?.scrollIntoView({ block: "nearest" });
1262
- },
1263
- [ctx]
1264
- );
1265
- useTreeTypeAhead({
1266
- rows: ctx.flatRows,
1267
- getItemName: ctx.getItemName,
1268
- containerRef,
1269
- onMatch: onTypeAheadMatch,
1270
- enabled: enableTypeAhead
1271
- });
1272
- return /* @__PURE__ */ jsxRuntime.jsxs(
1273
- "div",
1274
- {
1275
- ref: setContainerRef,
1276
- tabIndex: 0,
1277
- className: lib.cn(
1278
- "group/tree flex h-full w-full flex-col gap-2 outline-none",
1279
- className
1280
- ),
1281
- style: { ...appearanceToStyle(ctx.appearance), ...style },
1282
- "data-tree-root": "",
1283
- children: [
1284
- enableSearch ? /* @__PURE__ */ jsxRuntime.jsx(TreeSearchInput, { className: "mx-2 mt-2" }) : null,
1285
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto px-1", children: /* @__PURE__ */ jsxRuntime.jsx(TreeContent, { children: renderRow }) })
1286
- ]
1287
- }
1288
- );
1289
- }
1290
- chunkOLISEQHS_cjs.__name(TreeRootShell, "TreeRootShell");
1291
- var TreeRoot_default = TreeRoot;
1292
-
1293
- exports.DEFAULT_TREE_APPEARANCE = DEFAULT_TREE_APPEARANCE;
1294
- exports.DEFAULT_TREE_LABELS = DEFAULT_TREE_LABELS;
1295
- exports.TreeChevron = TreeChevron;
1296
- exports.TreeContent = TreeContent;
1297
- exports.TreeEmpty = TreeEmpty;
1298
- exports.TreeIcon = TreeIcon;
1299
- exports.TreeIndentGuides = TreeIndentGuides;
1300
- exports.TreeLabel = TreeLabel;
1301
- exports.TreeProvider = TreeProvider;
1302
- exports.TreeRoot = TreeRoot;
1303
- exports.TreeRoot_default = TreeRoot_default;
1304
- exports.TreeRow = TreeRow;
1305
- exports.TreeSearchInput = TreeSearchInput;
1306
- exports.appearanceToStyle = appearanceToStyle;
1307
- exports.clearTreeState = clearTreeState;
1308
- exports.createChildCache = createChildCache;
1309
- exports.flattenTree = flattenTree;
1310
- exports.loadTreeState = loadTreeState;
1311
- exports.resolveAppearance = resolveAppearance;
1312
- exports.resolveChildren = resolveChildren;
1313
- exports.saveTreeState = saveTreeState;
1314
- exports.useTreeActions = useTreeActions;
1315
- exports.useTreeContext = useTreeContext;
1316
- exports.useTreeExpansion = useTreeExpansion;
1317
- exports.useTreeFocus = useTreeFocus;
1318
- exports.useTreeKeyboard = useTreeKeyboard;
1319
- exports.useTreeLabels = useTreeLabels;
1320
- exports.useTreeRows = useTreeRows;
1321
- exports.useTreeSearch = useTreeSearch;
1322
- exports.useTreeSelection = useTreeSelection;
1323
- exports.useTreeTypeAhead = useTreeTypeAhead;
1324
- //# sourceMappingURL=chunk-FVVF7VCD.cjs.map
1325
- //# sourceMappingURL=chunk-FVVF7VCD.cjs.map