@djangocfg/ui-tools 2.1.390 → 2.1.394

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 (184) 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/PrettyCode/lazy.tsx +6 -0
  29. package/src/tools/SpeechRecognition/README.md +1 -1
  30. package/dist/ChatRoot-EFNXQXXN.cjs +0 -15
  31. package/dist/ChatRoot-EFNXQXXN.cjs.map +0 -1
  32. package/dist/ChatRoot-FITF5RVP.mjs +0 -6
  33. package/dist/ChatRoot-FITF5RVP.mjs.map +0 -1
  34. package/dist/ChatRoot-PNNGQCYF.css +0 -7
  35. package/dist/ChatRoot-PNNGQCYF.css.map +0 -1
  36. package/dist/CronScheduler.client-DLMXCPAJ.mjs +0 -67
  37. package/dist/CronScheduler.client-DLMXCPAJ.mjs.map +0 -1
  38. package/dist/CronScheduler.client-WEJF4PWQ.cjs +0 -72
  39. package/dist/CronScheduler.client-WEJF4PWQ.cjs.map +0 -1
  40. package/dist/DictationField-AS2F33WI.cjs +0 -13
  41. package/dist/DictationField-AS2F33WI.cjs.map +0 -1
  42. package/dist/DictationField-WPONUCYE.mjs +0 -4
  43. package/dist/DictationField-WPONUCYE.mjs.map +0 -1
  44. package/dist/DocsLayout-EKASBSP7.mjs +0 -3448
  45. package/dist/DocsLayout-EKASBSP7.mjs.map +0 -1
  46. package/dist/DocsLayout-MBFIB4NO.css +0 -7
  47. package/dist/DocsLayout-MBFIB4NO.css.map +0 -1
  48. package/dist/DocsLayout-OURFYWQE.cjs +0 -3455
  49. package/dist/DocsLayout-OURFYWQE.cjs.map +0 -1
  50. package/dist/JsonSchemaForm-DD7CLRIG.cjs +0 -13
  51. package/dist/JsonSchemaForm-DD7CLRIG.cjs.map +0 -1
  52. package/dist/JsonSchemaForm-XKUIVELK.mjs +0 -4
  53. package/dist/JsonSchemaForm-XKUIVELK.mjs.map +0 -1
  54. package/dist/JsonTree-43PQAJKY.mjs +0 -5
  55. package/dist/JsonTree-43PQAJKY.mjs.map +0 -1
  56. package/dist/JsonTree-MLET23ZA.css +0 -7
  57. package/dist/JsonTree-MLET23ZA.css.map +0 -1
  58. package/dist/JsonTree-X6W5YEVY.cjs +0 -11
  59. package/dist/JsonTree-X6W5YEVY.cjs.map +0 -1
  60. package/dist/LottiePlayer.client-2S7ISJ2S.cjs +0 -168
  61. package/dist/LottiePlayer.client-2S7ISJ2S.cjs.map +0 -1
  62. package/dist/LottiePlayer.client-5LDSSJWS.mjs +0 -161
  63. package/dist/LottiePlayer.client-5LDSSJWS.mjs.map +0 -1
  64. package/dist/MapContainer-AKIPABJK.mjs +0 -4
  65. package/dist/MapContainer-AKIPABJK.mjs.map +0 -1
  66. package/dist/MapContainer-STVDMC36.cjs +0 -17
  67. package/dist/MapContainer-STVDMC36.cjs.map +0 -1
  68. package/dist/Mermaid.client-DDXWXZXY.css +0 -7
  69. package/dist/Mermaid.client-DDXWXZXY.css.map +0 -1
  70. package/dist/Mermaid.client-NL4SVR7F.mjs +0 -481
  71. package/dist/Mermaid.client-NL4SVR7F.mjs.map +0 -1
  72. package/dist/Mermaid.client-NNTI6DFX.cjs +0 -487
  73. package/dist/Mermaid.client-NNTI6DFX.cjs.map +0 -1
  74. package/dist/Player-BRV7XTWR.mjs +0 -4
  75. package/dist/Player-BRV7XTWR.mjs.map +0 -1
  76. package/dist/Player-PM7F7DD7.cjs +0 -13
  77. package/dist/Player-PM7F7DD7.cjs.map +0 -1
  78. package/dist/Player-ZGQKKOWI.css +0 -66
  79. package/dist/Player-ZGQKKOWI.css.map +0 -1
  80. package/dist/PrettyCode.client-GWFAIVFN.css +0 -7
  81. package/dist/PrettyCode.client-GWFAIVFN.css.map +0 -1
  82. package/dist/PrettyCode.client-KOHDVPPN.cjs +0 -285
  83. package/dist/PrettyCode.client-KOHDVPPN.cjs.map +0 -1
  84. package/dist/PrettyCode.client-ZGYGKE7G.mjs +0 -283
  85. package/dist/PrettyCode.client-ZGYGKE7G.mjs.map +0 -1
  86. package/dist/TreeRoot-5COOOSWG.mjs +0 -4
  87. package/dist/TreeRoot-5COOOSWG.mjs.map +0 -1
  88. package/dist/TreeRoot-AABP2J6Y.cjs +0 -19
  89. package/dist/TreeRoot-AABP2J6Y.cjs.map +0 -1
  90. package/dist/chunk-2NG4SXEP.mjs +0 -743
  91. package/dist/chunk-2NG4SXEP.mjs.map +0 -1
  92. package/dist/chunk-4LFB7I5K.cjs +0 -1387
  93. package/dist/chunk-4LFB7I5K.cjs.map +0 -1
  94. package/dist/chunk-5D2OCOPQ.cjs +0 -222
  95. package/dist/chunk-5D2OCOPQ.cjs.map +0 -1
  96. package/dist/chunk-5I5QNGUG.cjs +0 -611
  97. package/dist/chunk-5I5QNGUG.cjs.map +0 -1
  98. package/dist/chunk-6ZX2G25W.mjs +0 -1361
  99. package/dist/chunk-6ZX2G25W.mjs.map +0 -1
  100. package/dist/chunk-76NNDZH6.cjs +0 -1061
  101. package/dist/chunk-76NNDZH6.cjs.map +0 -1
  102. package/dist/chunk-7CWGZPO3.mjs +0 -214
  103. package/dist/chunk-7CWGZPO3.mjs.map +0 -1
  104. package/dist/chunk-7EYHNP3E.cjs +0 -965
  105. package/dist/chunk-7EYHNP3E.cjs.map +0 -1
  106. package/dist/chunk-7IYXZUJO.cjs +0 -769
  107. package/dist/chunk-7IYXZUJO.cjs.map +0 -1
  108. package/dist/chunk-ADEN3UA4.cjs +0 -892
  109. package/dist/chunk-ADEN3UA4.cjs.map +0 -1
  110. package/dist/chunk-B6IR5KSC.mjs +0 -59
  111. package/dist/chunk-B6IR5KSC.mjs.map +0 -1
  112. package/dist/chunk-C6GXVH5J.mjs +0 -338
  113. package/dist/chunk-C6GXVH5J.mjs.map +0 -1
  114. package/dist/chunk-DMX7W4XZ.mjs +0 -1113
  115. package/dist/chunk-DMX7W4XZ.mjs.map +0 -1
  116. package/dist/chunk-ECONRHIG.mjs +0 -212
  117. package/dist/chunk-ECONRHIG.mjs.map +0 -1
  118. package/dist/chunk-FEN5S772.cjs +0 -1227
  119. package/dist/chunk-FEN5S772.cjs.map +0 -1
  120. package/dist/chunk-FP2RLYQZ.cjs +0 -187
  121. package/dist/chunk-FP2RLYQZ.cjs.map +0 -1
  122. package/dist/chunk-FVVF7VCD.cjs +0 -1325
  123. package/dist/chunk-FVVF7VCD.cjs.map +0 -1
  124. package/dist/chunk-GYIO7W7M.mjs +0 -1197
  125. package/dist/chunk-GYIO7W7M.mjs.map +0 -1
  126. package/dist/chunk-KNDLV4PI.cjs +0 -1356
  127. package/dist/chunk-KNDLV4PI.cjs.map +0 -1
  128. package/dist/chunk-KNEQRUBA.mjs +0 -181
  129. package/dist/chunk-KNEQRUBA.mjs.map +0 -1
  130. package/dist/chunk-N2XQF2OL.mjs +0 -14
  131. package/dist/chunk-N4MZYNR4.mjs +0 -1342
  132. package/dist/chunk-N4MZYNR4.mjs.map +0 -1
  133. package/dist/chunk-NTVBIIUD.mjs +0 -1439
  134. package/dist/chunk-NTVBIIUD.mjs.map +0 -1
  135. package/dist/chunk-OBRSGM64.mjs +0 -607
  136. package/dist/chunk-OBRSGM64.mjs.map +0 -1
  137. package/dist/chunk-ODO4GMW7.mjs +0 -79
  138. package/dist/chunk-ODO4GMW7.mjs.map +0 -1
  139. package/dist/chunk-OLISEQHS.cjs +0 -18
  140. package/dist/chunk-PVAX67JG.mjs +0 -1041
  141. package/dist/chunk-PVAX67JG.mjs.map +0 -1
  142. package/dist/chunk-QJ6GTUCO.cjs +0 -81
  143. package/dist/chunk-QJ6GTUCO.cjs.map +0 -1
  144. package/dist/chunk-T3MWM23F.cjs +0 -214
  145. package/dist/chunk-T3MWM23F.cjs.map +0 -1
  146. package/dist/chunk-TBSHZO5R.cjs +0 -1134
  147. package/dist/chunk-TBSHZO5R.cjs.map +0 -1
  148. package/dist/chunk-UNCS5V5F.mjs +0 -887
  149. package/dist/chunk-UNCS5V5F.mjs.map +0 -1
  150. package/dist/chunk-VWQ5WOIL.mjs +0 -2059
  151. package/dist/chunk-VWQ5WOIL.mjs.map +0 -1
  152. package/dist/chunk-W75B7Y6C.cjs +0 -1478
  153. package/dist/chunk-W75B7Y6C.cjs.map +0 -1
  154. package/dist/chunk-Y6UTOBF6.mjs +0 -938
  155. package/dist/chunk-Y6UTOBF6.mjs.map +0 -1
  156. package/dist/chunk-YDPDTOSP.cjs +0 -2061
  157. package/dist/chunk-YDPDTOSP.cjs.map +0 -1
  158. package/dist/chunk-YW5IVWHQ.cjs +0 -346
  159. package/dist/chunk-YW5IVWHQ.cjs.map +0 -1
  160. package/dist/chunk-YXZ6GU7H.cjs +0 -63
  161. package/dist/chunk-YXZ6GU7H.cjs.map +0 -1
  162. package/dist/chunk-ZL7FH4NW.mjs +0 -1274
  163. package/dist/chunk-ZL7FH4NW.mjs.map +0 -1
  164. package/dist/components-EHOGXATG.cjs +0 -22
  165. package/dist/components-EHOGXATG.cjs.map +0 -1
  166. package/dist/components-MQ6DR7TX.cjs +0 -26
  167. package/dist/components-MQ6DR7TX.cjs.map +0 -1
  168. package/dist/components-XRX7QGLB.mjs +0 -5
  169. package/dist/components-XRX7QGLB.mjs.map +0 -1
  170. package/dist/components-YATKRWLH.mjs +0 -5
  171. package/dist/components-YATKRWLH.mjs.map +0 -1
  172. package/dist/index.cjs +0 -3674
  173. package/dist/index.cjs.map +0 -1
  174. package/dist/index.css +0 -234
  175. package/dist/index.css.map +0 -1
  176. package/dist/index.d.cts +0 -4929
  177. package/dist/index.d.ts +0 -4929
  178. package/dist/index.mjs +0 -2912
  179. package/dist/index.mjs.map +0 -1
  180. package/dist/launcher-5Y42OBSN.mjs +0 -6
  181. package/dist/launcher-5Y42OBSN.mjs.map +0 -1
  182. package/dist/launcher-PMW2YB24.cjs +0 -59
  183. package/dist/launcher-PMW2YB24.cjs.map +0 -1
  184. 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