@aiquants/directory-tree 2.0.0 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -11
- package/dist/directory-tree.css +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +679 -589
- package/dist/src/DirectoryTree.d.ts +1 -1
- package/dist/src/DirectoryTree.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/types.d.ts +57 -0
- package/dist/src/types.d.ts.map +1 -1
- package/dist/styles/directory-tree.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -116,7 +116,7 @@ The main component for rendering the directory tree.
|
|
|
116
116
|
#### Props
|
|
117
117
|
|
|
118
118
|
| Prop | Type | Required | Description |
|
|
119
|
-
|
|
119
|
+
| ------ | ------ | ---------- | ------------- |
|
|
120
120
|
| `entries` | `DirectoryEntry[]` | Yes | Array of root directory entries to display |
|
|
121
121
|
| `expansion` | `object` | Yes | Configuration for tree expansion state and behavior |
|
|
122
122
|
| `selection` | `object` | Yes | Configuration for item selection |
|
|
@@ -126,7 +126,7 @@ The main component for rendering the directory tree.
|
|
|
126
126
|
#### Expansion Options (`expansion`)
|
|
127
127
|
|
|
128
128
|
| Prop | Type | Required | Default | Description |
|
|
129
|
-
|
|
129
|
+
| ------ | ------ | ---------- | --------- | ------------- |
|
|
130
130
|
| `toggle` | `(path: string) => void` | Yes | - | Function to toggle directory expansion state |
|
|
131
131
|
| `isExpanded` | `(path: string) => boolean` | Yes | - | Function to check if a directory is expanded |
|
|
132
132
|
| `expandMultiple` | `(paths: string[]) => void` | Yes | - | Function to expand multiple directories |
|
|
@@ -138,7 +138,7 @@ The main component for rendering the directory tree.
|
|
|
138
138
|
#### Selection Options (`selection`)
|
|
139
139
|
|
|
140
140
|
| Prop | Type | Required | Default | Description |
|
|
141
|
-
|
|
141
|
+
| ------ | ------ | ---------- | --------- | ------------- |
|
|
142
142
|
| `onEntryClick` | `(event: DirectoryTreeClickEvent) => void` | Yes | - | Callback function triggered when an entry is clicked |
|
|
143
143
|
| `selectedPath` | `string \| null` | No | - | The currently selected file path |
|
|
144
144
|
| `mode` | `'none' \| 'single' \| 'multiple'` | No | `'none'` | Selection mode for items |
|
|
@@ -148,7 +148,7 @@ The main component for rendering the directory tree.
|
|
|
148
148
|
#### Visual Options (`visual`)
|
|
149
149
|
|
|
150
150
|
| Prop | Type | Required | Default | Description |
|
|
151
|
-
|
|
151
|
+
| ------ | ------ | ---------- | --------- | ------------- |
|
|
152
152
|
| `className` | `string` | No | - | Optional CSS class name for the container |
|
|
153
153
|
| `style` | `React.CSSProperties` | No | - | Optional inline styles for the container |
|
|
154
154
|
| `lineColor` | `string` | No | `'#A0AEC0'` | The color of the tree lines |
|
|
@@ -158,8 +158,17 @@ The main component for rendering the directory tree.
|
|
|
158
158
|
| `showFileIcons` | `boolean` | No | `true` | Flag indicating whether to render file type icons |
|
|
159
159
|
| `iconOverrides` | `DirectoryTreeIconOverrides` | No | - | Icon overrides applied globally |
|
|
160
160
|
| `expandIconSize` | `number` | No | - | Size of the expand icon |
|
|
161
|
+
| `itemHeight` | `number \| ((entry, index) => number)` | No | `20` | Row height in px, or a function computing the height per entry (variable-height rows). Tree connector lines follow each row's cumulative offset. Invalid values (`NaN` / `Infinity` / `0` / negative) fall back to `20`. Memoize the function to keep its identity stable. |
|
|
161
162
|
| `removeRootIndent` | `boolean` | No | `false` | If true, removes the indentation and connector lines for root-level items |
|
|
162
163
|
| `highlightStyles` | `HighlightStyles` | No | - | Highlight styles configuration for hover and selection states |
|
|
164
|
+
| `entryClassName` | `string` | No | - | Additional CSS classes for each entry row |
|
|
165
|
+
| `entryStyle` | `React.CSSProperties` | No | - | Additional inline styles for each entry row |
|
|
166
|
+
| `nameClassName` | `string` | No | - | Additional CSS classes for the name label |
|
|
167
|
+
| `nameStyle` | `React.CSSProperties` | No | - | Additional inline styles for the name label |
|
|
168
|
+
| `directoryNameClassName` | `string` | No | - | Additional CSS classes specifically for directory names |
|
|
169
|
+
| `directoryNameStyle` | `React.CSSProperties` | No | - | Additional inline styles specifically for directory names |
|
|
170
|
+
| `fileNameClassName` | `string` | No | - | Additional CSS classes specifically for file names |
|
|
171
|
+
| `fileNameStyle` | `React.CSSProperties` | No | - | Additional inline styles specifically for file names |
|
|
163
172
|
|
|
164
173
|
### Virtual Scroll Options
|
|
165
174
|
|
|
@@ -197,20 +206,20 @@ A hook for managing directory tree state with localStorage persistence.
|
|
|
197
206
|
#### Parameters
|
|
198
207
|
|
|
199
208
|
| Parameter | Type | Description |
|
|
200
|
-
|
|
209
|
+
| ----------- | ------ | ------------- |
|
|
201
210
|
| `options` | `UseDirectoryTreeStateProps` | Configuration options |
|
|
202
211
|
|
|
203
212
|
#### Options
|
|
204
213
|
|
|
205
214
|
| Option | Type | Description |
|
|
206
|
-
|
|
215
|
+
| -------- | ------ | ------------- |
|
|
207
216
|
| `initialExpanded` | `Set<string>` | Initially expanded directories |
|
|
208
217
|
| `storageKey` | `string` | localStorage key for persistence (default: 'directory-tree-state') |
|
|
209
218
|
|
|
210
219
|
#### Returns
|
|
211
220
|
|
|
212
221
|
| Property | Type | Description |
|
|
213
|
-
|
|
222
|
+
| ---------- | ------ | ------------- |
|
|
214
223
|
| `expanded` | `Set<string>` | Currently expanded directories |
|
|
215
224
|
| `toggle` | `(path: string) => void` | Toggle directory expansion |
|
|
216
225
|
| `isExpanded` | `(path: string) => boolean` | Check if directory is expanded |
|
|
@@ -262,21 +271,34 @@ function MyComponent() {
|
|
|
262
271
|
|
|
263
272
|
### Custom Styling
|
|
264
273
|
|
|
265
|
-
You can customize the appearance by
|
|
274
|
+
You can customize the appearance by passing custom classes or inline styles for specific elements like entry rows, name labels, directory names, or file names, avoiding arbitrary CSS selectors overrides:
|
|
266
275
|
|
|
267
276
|
```tsx
|
|
268
277
|
<DirectoryTree
|
|
269
278
|
visual={{
|
|
270
279
|
className: "custom-directory-tree",
|
|
271
|
-
style: { height: '400px' }
|
|
280
|
+
style: { height: '400px' },
|
|
281
|
+
|
|
282
|
+
// Style the entry rows (containers)
|
|
283
|
+
entryClassName: "rounded-md px-2 py-1 hover:bg-slate-100/50",
|
|
284
|
+
entryStyle: { transition: "background-color 0.2s" },
|
|
285
|
+
|
|
286
|
+
// Style the label text
|
|
287
|
+
nameClassName: "text-sm font-medium",
|
|
288
|
+
|
|
289
|
+
// Target directory or file names specifically
|
|
290
|
+
directoryNameClassName: "text-slate-800 dark:text-slate-100",
|
|
291
|
+
fileNameClassName: "text-slate-600 dark:text-slate-300",
|
|
272
292
|
}}
|
|
273
293
|
// ... other props
|
|
274
294
|
/>
|
|
275
295
|
```
|
|
276
296
|
|
|
297
|
+
Alternatively, you can customize components inside the container using global CSS classes:
|
|
298
|
+
|
|
277
299
|
```css
|
|
278
|
-
.custom-directory-tree {
|
|
279
|
-
/*
|
|
300
|
+
.custom-directory-tree .directory-tree-entry {
|
|
301
|
+
/* Custom styles for entry rows */
|
|
280
302
|
}
|
|
281
303
|
```
|
|
282
304
|
|
|
@@ -305,6 +327,27 @@ Alternatively, you can dynamically configure specific highlight styles for hover
|
|
|
305
327
|
|
|
306
328
|
## Advanced Usage
|
|
307
329
|
|
|
330
|
+
### Row Height (fixed & variable)
|
|
331
|
+
|
|
332
|
+
Rows are 20px tall by default. Pass a number for a uniform height, or a function
|
|
333
|
+
for variable-height rows — the virtual scroller and the tree connector lines both
|
|
334
|
+
follow each row's resolved height. Memoize the function so its identity stays stable.
|
|
335
|
+
|
|
336
|
+
```tsx
|
|
337
|
+
import { useCallback } from 'react';
|
|
338
|
+
import { DirectoryTree, type DirectoryEntry } from '@aiquants/directory-tree';
|
|
339
|
+
|
|
340
|
+
// Fixed height
|
|
341
|
+
<DirectoryTree entries={entries} /* ...required props */ visual={{ itemHeight: 28 }} />
|
|
342
|
+
|
|
343
|
+
// Variable height: taller rows for files that render inline metadata
|
|
344
|
+
const itemHeight = useCallback(
|
|
345
|
+
(entry: DirectoryEntry) => (entry.type === 'file' ? 32 : 24),
|
|
346
|
+
[],
|
|
347
|
+
);
|
|
348
|
+
<DirectoryTree entries={entries} /* ...required props */ visual={{ itemHeight }} />
|
|
349
|
+
```
|
|
350
|
+
|
|
308
351
|
### Large Datasets
|
|
309
352
|
|
|
310
353
|
The component is optimized for large datasets through virtualization:
|
package/dist/directory-tree.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-900:oklch(41.4% .112 45.904);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-900:oklch(42.1% .095 57.708);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-900:oklch(37.8% .077 168.94);--color-cyan-400:oklch(78.9% .154 211.53);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--font-weight-medium:500;--font-weight-bold:700;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base;@layer components{@layer theme,base;@layer components.utilities{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border-width:1px;border-color:#fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-rod{background-color:#ffffffd9;border-width:1px;border-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-pupil{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;background-color:#e0e0e0;justify-content:center;align-items:center;font-size:.75rem;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border-radius:9999px;padding:.25rem 3rem;font-size:10px;font-weight:500;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}@layer utilities;}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-0{z-index:0}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.flex{display:flex}.hidden{display:none}.inline{display:inline}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-96{height:calc(var(--spacing) * 96)}.h-full{height:100%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-full{width:100%}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.overflow-y-hidden{overflow-y:hidden}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-400\/10{background-color:#54a2ff1a}@supports (color:color-mix(in lab,red,red)){.bg-blue-400\/10{background-color:color-mix(in oklab,var(--color-blue-400) 10%,transparent)}}.bg-blue-400\/20{background-color:#54a2ff33}@supports (color:color-mix(in lab,red,red)){.bg-blue-400\/20{background-color:color-mix(in oklab,var(--color-blue-400) 20%,transparent)}}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-yellow-50{background-color:var(--color-yellow-50)}.pr-\[3px\]{padding-right:3px}.pb-\[5px\]{padding-bottom:5px}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-cyan-400{color:var(--color-cyan-400)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-indigo-800{color:var(--color-indigo-800)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-600{color:var(--color-yellow-600)}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(59\,130\,246\,0\.3\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#3b82f64d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.hover\:bg-gray-400\/15:hover{background-color:#99a1af26}@supports (color:color-mix(in lab,red,red)){.hover\:bg-gray-400\/15:hover{background-color:color-mix(in oklab,var(--color-gray-400) 15%,transparent)}}}@media(prefers-color-scheme:dark){.dark\:bg-amber-900\/20{background-color:#7b330633}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-900\/20{background-color:color-mix(in oklab,var(--color-amber-900) 20%,transparent)}}.dark\:bg-blue-400\/15{background-color:#54a2ff26}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-400\/15{background-color:color-mix(in oklab,var(--color-blue-400) 15%,transparent)}}.dark\:bg-blue-400\/25{background-color:#54a2ff40}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-400\/25{background-color:color-mix(in oklab,var(--color-blue-400) 25%,transparent)}}.dark\:bg-emerald-900\/20{background-color:#004e3b33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-900\/20{background-color:color-mix(in oklab,var(--color-emerald-900) 20%,transparent)}}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-indigo-900\/20{background-color:#312c8533}@supports (color:color-mix(in lab,red,red)){.dark\:bg-indigo-900\/20{background-color:color-mix(in oklab,var(--color-indigo-900) 20%,transparent)}}.dark\:bg-yellow-900\/20{background-color:#733e0a33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-yellow-900\/20{background-color:color-mix(in oklab,var(--color-yellow-900) 20%,transparent)}}.dark\:text-blue-300{color:var(--color-blue-300)}.dark\:text-blue-400{color:var(--color-blue-400)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dark\:shadow-\[0_0_0_1px_rgba\(96\,165\,250\,0\.4\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#60a5fa66);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(hover:hover){.dark\:hover\:bg-gray-200\/10:hover{background-color:#e5e7eb1a}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-gray-200\/10:hover{background-color:color-mix(in oklab,var(--color-gray-200) 10%,transparent)}}}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-900:oklch(41.4% .112 45.904);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-900:oklch(42.1% .095 57.708);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-900:oklch(37.8% .077 168.94);--color-cyan-400:oklch(78.9% .154 211.53);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base;@layer components{@layer theme,base;@layer components.utilities{.aqvs-scroll-pane{display:flex;position:relative}.aqvs-scroll-pane-content{flex:1;height:100%;position:relative;overflow:hidden}.aqvs-tap-scroll-circle{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:transform;transition-duration:.1s;transition-timing-function:cubic-bezier(0,0,.2,1);display:flex;position:relative}.aqvs-tap-scroll-circle-visual-outer{border-radius:9999px;position:absolute;inset:0}.aqvs-tap-scroll-circle-gradient{background:linear-gradient(to bottom right,#1d4ed899,#60a5fa8c,#bfdbfe66);border-width:1px;border-color:#fff6;border-radius:9999px;position:absolute;inset:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-tap-scroll-circle-inner{border-radius:9999px;position:absolute;inset:18%}.aqvs-sample-visual-rod{background-color:#ffffffd9;border-width:1px;border-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-pupil{background-color:#fffc;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-sample-visual-highlight{background-color:#ffffff80;border-radius:9999px;position:absolute;top:50%;left:50%}.aqvs-scrollbar{z-index:50;cursor:default;-webkit-user-select:none;user-select:none;touch-action:none;background-color:#fff;position:relative}.aqvs-scrollbar-horizontal{flex-direction:row;align-items:stretch;display:flex}.aqvs-scrollbar-vertical{flex-direction:column;align-items:stretch;display:flex}.aqvs-scrollbar-tap-circle-wrapper{pointer-events:auto;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);position:absolute}.aqvs-scrollbar-arrow-button{color:#313131;background-color:#e0e0e0;justify-content:center;align-items:center;font-size:.75rem;line-height:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex}.aqvs-scrollbar-arrow-button:focus{outline-offset:2px;outline:2px solid #0000}.aqvs-scrollbar-arrow-button:focus-visible{outline-offset:1px;outline:2px solid #60a5fa}.aqvs-scrollbar-arrow-button:disabled{cursor:not-allowed;opacity:.5}.aqvs-scrollbar-arrow-button:enabled:hover{background-color:#d4d4d4}.aqvs-scrollbar-track{background-color:#f5f5f5;flex:1;position:relative}.aqvs-scrollbar-overlay{pointer-events:none;position:absolute;inset:0}.aqvs-scrollbar-thumb-wrapper{touch-action:none;position:absolute}.aqvs-scrollbar-thumb{transform-origin:50%;background-color:#7f7f7f;transition:transform 80ms ease-out;position:absolute}.aqvs-scrollbar-thumb[data-thumb-state=disabled]{transition:none;transform:none}.aqvs-scrollbar-thumb[data-thumb-state=hover]{background-color:#5f5f5f}.aqvs-scrollbar-thumb[data-thumb-state=dragging]{background-color:#4f4f4f;transition:transform 60ms ease-out}.aqvs-scrollbar-thumb-horizontal{inset:1.5px 0}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=hover]{top:-.5px;bottom:-.5px;transform:scaleY(1.06)}.aqvs-scrollbar-thumb-horizontal[data-thumb-state=dragging]{top:-.5px;bottom:-.5px;transform:scaleY(1.12)}.aqvs-scrollbar-thumb-vertical{inset:0 1.5px}.aqvs-scrollbar-thumb-vertical[data-thumb-state=hover]{left:-.5px;right:-.5px;transform:scaleX(1.06)}.aqvs-scrollbar-thumb-vertical[data-thumb-state=dragging]{left:-.5px;right:-.5px;transform:scaleX(1.12)}.aqvs-scroll-to-edge-button{pointer-events:auto;color:#fff;text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#1f2937cc;border-radius:9999px;padding:.25rem 3rem;font-size:10px;font-weight:500;transition-property:transform,background-color;transition-duration:.15s;transform:none;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.aqvs-scroll-to-edge-button:hover{background-color:#374151}.aqvs-scroll-to-edge-button:active{transform:scale(.95)}.aqvs-scroll-to-edge-overlay{pointer-events:none;z-index:10;transition-property:opacity;transition-duration:.5s;position:absolute;inset:0}.aqvs-scroll-to-edge-overlay[data-visible=true]{opacity:1}.aqvs-scroll-to-edge-overlay[data-visible=false]{opacity:0}.aqvs-scroll-to-edge-button-container{justify-content:center;display:flex;position:absolute;left:0;right:0}.aqvs-scroll-to-edge-button-container-top{top:.5rem}.aqvs-scroll-to-edge-button-container-bottom{bottom:.5rem}.aqvs-no-items-container{width:100%;position:absolute;top:0}.aqvs-no-items-text{text-align:center;color:#6b7280}.aqvs-item-container,.aqvs-bottom-inset,.aqvs-items-wrapper{width:100%;position:absolute}}@layer utilities;}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-0{z-index:0}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-96{height:calc(var(--spacing) * 96)}.h-full{height:100%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-full{width:100%}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.overflow-y-hidden{overflow-y:hidden}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-400\/10{background-color:#54a2ff1a}@supports (color:color-mix(in lab,red,red)){.bg-blue-400\/10{background-color:color-mix(in oklab,var(--color-blue-400) 10%,transparent)}}.bg-blue-400\/20{background-color:#54a2ff33}@supports (color:color-mix(in lab,red,red)){.bg-blue-400\/20{background-color:color-mix(in oklab,var(--color-blue-400) 20%,transparent)}}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-yellow-50{background-color:var(--color-yellow-50)}.px-2{padding-inline:calc(var(--spacing) * 2)}.py-1{padding-block:calc(var(--spacing) * 1)}.pr-\[3px\]{padding-right:3px}.pb-\[5px\]{padding-bottom:5px}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-cyan-400{color:var(--color-cyan-400)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-indigo-800{color:var(--color-indigo-800)}.text-slate-600{color:var(--color-slate-600)}.text-slate-800{color:var(--color-slate-800)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-600{color:var(--color-yellow-600)}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(59\,130\,246\,0\.3\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#3b82f64d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.hover\:bg-gray-400\/15:hover{background-color:#99a1af26}@supports (color:color-mix(in lab,red,red)){.hover\:bg-gray-400\/15:hover{background-color:color-mix(in oklab,var(--color-gray-400) 15%,transparent)}}.hover\:bg-slate-100\/50:hover{background-color:#f1f5f980}@supports (color:color-mix(in lab,red,red)){.hover\:bg-slate-100\/50:hover{background-color:color-mix(in oklab,var(--color-slate-100) 50%,transparent)}}}@media(prefers-color-scheme:dark){.dark\:bg-amber-900\/20{background-color:#7b330633}@supports (color:color-mix(in lab,red,red)){.dark\:bg-amber-900\/20{background-color:color-mix(in oklab,var(--color-amber-900) 20%,transparent)}}.dark\:bg-blue-400\/15{background-color:#54a2ff26}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-400\/15{background-color:color-mix(in oklab,var(--color-blue-400) 15%,transparent)}}.dark\:bg-blue-400\/25{background-color:#54a2ff40}@supports (color:color-mix(in lab,red,red)){.dark\:bg-blue-400\/25{background-color:color-mix(in oklab,var(--color-blue-400) 25%,transparent)}}.dark\:bg-emerald-900\/20{background-color:#004e3b33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-emerald-900\/20{background-color:color-mix(in oklab,var(--color-emerald-900) 20%,transparent)}}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:bg-indigo-900\/20{background-color:#312c8533}@supports (color:color-mix(in lab,red,red)){.dark\:bg-indigo-900\/20{background-color:color-mix(in oklab,var(--color-indigo-900) 20%,transparent)}}.dark\:bg-yellow-900\/20{background-color:#733e0a33}@supports (color:color-mix(in lab,red,red)){.dark\:bg-yellow-900\/20{background-color:color-mix(in oklab,var(--color-yellow-900) 20%,transparent)}}.dark\:text-blue-300{color:var(--color-blue-300)}.dark\:text-blue-400{color:var(--color-blue-400)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-slate-100{color:var(--color-slate-100)}.dark\:text-slate-300{color:var(--color-slate-300)}.dark\:shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dark\:shadow-\[0_0_0_1px_rgba\(96\,165\,250\,0\.4\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#60a5fa66);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(hover:hover){.dark\:hover\:bg-gray-200\/10:hover{background-color:#e5e7eb1a}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-gray-200\/10:hover{background-color:color-mix(in oklab,var(--color-gray-200) 10%,transparent)}}}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),Ue=require("@aiquants/virtualscroll"),ge=require("@heroicons/react/24/solid"),Ze=require("@phosphor-icons/react"),B=require("tailwind-merge");var pe={exports:{}},ce={};var je;function Qe(){if(je)return ce;je=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(n,s,l){var a=null;if(l!==void 0&&(a=""+l),s.key!==void 0&&(a=""+s.key),"key"in s){l={};for(var h in s)h!=="key"&&(l[h]=s[h])}else l=s;return s=l.ref,{$$typeof:e,type:n,key:a,ref:s!==void 0?s:null,props:l}}return ce.Fragment=r,ce.jsx=o,ce.jsxs=o,ce}var ue={};var Ae;function Ke(){return Ae||(Ae=1,process.env.NODE_ENV!=="production"&&(function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===U?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case d:return"Fragment";case P:return"Profiler";case b:return"StrictMode";case M:return"Suspense";case N:return"SuspenseList";case z:return"Activity"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case i:return"Portal";case E:return t.displayName||"Context";case v:return(t._context.displayName||"Context")+".Consumer";case f:var m=t.render;return t=t.displayName,t||(t=m.displayName||m.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case j:return m=t.displayName||null,m!==null?m:e(t.type)||"Memo";case X:m=t._payload,t=t._init;try{return e(t(m))}catch{}}return null}function r(t){return""+t}function o(t){try{r(t);var m=!1}catch{m=!0}if(m){m=console;var x=m.error,R=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return x.call(m,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",R),r(t)}}function n(t){if(t===d)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===X)return"<...>";try{var m=e(t);return m?"<"+m+">":"<...>"}catch{return"<...>"}}function s(){var t=$.A;return t===null?null:t.getOwner()}function l(){return Error("react-stack-top-frame")}function a(t){if(V.call(t,"key")){var m=Object.getOwnPropertyDescriptor(t,"key").get;if(m&&m.isReactWarning)return!1}return t.key!==void 0}function h(t,m){function x(){ne||(ne=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",m))}x.isReactWarning=!0,Object.defineProperty(t,"key",{get:x,configurable:!0})}function _(){var t=e(this.type);return S[t]||(S[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function I(t,m,x,R,ee,Q){var C=x.ref;return t={$$typeof:k,type:t,key:m,props:x,_owner:R},(C!==void 0?C:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:_}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:ee}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function c(t,m,x,R,ee,Q){var C=m.children;if(C!==void 0)if(R)if(Z(C)){for(R=0;R<C.length;R++)y(C[R]);Object.freeze&&Object.freeze(C)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(C);if(V.call(m,"key")){C=e(t);var G=Object.keys(m).filter(function(oe){return oe!=="key"});R=0<G.length?"{key: someKey, "+G.join(": ..., ")+": ...}":"{key: someKey}",A[C+R]||(G=0<G.length?"{"+G.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,I,E,V,E),q[E+I]=!0)}if(E=null,b!==void 0&&(s(b),E=""+b),c(y)&&(s(y.key),E=""+y.key),"key"in y){b={};for(var se in y)se!=="key"&&(b[se]=y[se])}else b=y;return E&&h(b,typeof t=="function"?t.displayName||t.name||"Unknown":t),p(t,E,b,n(),K,ne)}function v(t){g(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===M&&(t._payload.status==="fulfilled"?g(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function g(t){return typeof t=="object"&&t!==null&&t.$$typeof===T}var x=d,T=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),_=Symbol.for("react.consumer"),S=Symbol.for("react.context"),f=Symbol.for("react.forward_ref"),L=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),N=Symbol.for("react.client.reference"),H=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,D=Array.isArray,B=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(t){return t()}};var U,X={},Z=x.react_stack_bottom_frame.bind(x,a)(),Q=B(l(a)),q={};le.Fragment=o,le.jsx=function(t,y,b){var I=1e4>H.recentlyCreatedOwnerStacks++;return i(t,y,b,!1,I?Error("react-stack-top-frame"):Z,I?B(l(t)):Q)},le.jsxs=function(t,y,b){var I=1e4>H.recentlyCreatedOwnerStacks++;return i(t,y,b,!0,I?Error("react-stack-top-frame"):Z,I?B(l(t)):Q)}})()),le}var _e;function Ye(){return _e||(_e=1,process.env.NODE_ENV==="production"?de.exports=Le():de.exports=Fe()),de.exports}var P=Ye();const Be=(e,r,s)=>{const l=[];for(let n=r;n<s;n++){const a=e[n];if(!(!a||a.length===0))for(const c of a)l.push(c)}return l},He=(e,r,s)=>{const l=[];for(let n=r;n<s;n++){const a=e[n];if(!(!a||a.length===0))for(const c of a)l.push(c)}return l},We=(e,r,s,l)=>{const n=Math.max(1,Math.floor(r*l)),a=Math.max(1,Math.floor(s*l));(e.width!==n||e.height!==a)&&(e.width=n,e.height=a);const c=e.style;c.width!==`${r}px`&&(c.width=`${r}px`),c.height!==`${s}px`&&(c.height=`${s}px`)},Xe=(e,r,s)=>{e.lineWidth=s,e.beginPath();for(const l of r)e.moveTo(l.x1,l.y1),e.lineTo(l.x2,l.y2);e.stroke()},Ve=(e,r)=>{const s=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!s)return null;let l=s[1];l.length===3&&(l=l.split("").map(h=>h+h).join(""));const n=Number.parseInt(l.slice(0,2),16),a=Number.parseInt(l.slice(2,4),16),c=Number.parseInt(l.slice(4,6),16);return`rgba(${n}, ${a}, ${c}, ${r})`},qe=(e,r,s,l)=>{if(r.length===0)return;const n=Ve(s,.14),a=e.strokeStyle,c=e.fillStyle,h=e.lineWidth,w=e.lineCap,p=e.lineJoin;e.strokeStyle=s,e.lineCap="round",e.lineJoin="round";for(const i of r){const v=l??i.size,g=Math.max(0,v/2),x=Math.max(1,Math.round(v*.08)),T=Math.max(1,Math.round(v*.14)),u=Math.max(0,g-x*.8),o=Math.max(0,u*.55);n&&(e.fillStyle=n,e.beginPath(),e.arc(i.centerX,i.centerY,u,0,Math.PI*2),e.fill()),e.lineWidth=x,e.beginPath(),e.arc(i.centerX,i.centerY,Math.max(0,g-x*.3),0,Math.PI*2),e.stroke(),e.lineWidth=T,e.beginPath(),e.moveTo(i.centerX-o,i.centerY),e.lineTo(i.centerX+o,i.centerY),e.stroke(),i.isExpanded||(e.beginPath(),e.moveTo(i.centerX,i.centerY-o),e.lineTo(i.centerX,i.centerY+o),e.stroke())}e.strokeStyle=a,e.fillStyle=c,e.lineWidth=h,e.lineCap=w,e.lineJoin=p},Ce=d.memo(({segmentsByItem:e,glyphsByItem:r,itemHeight:s,width:l,viewportHeight:n,scrollPosition:a,color:c="#a0aec0",strokeWidth:h=1,renderStartIndex:w,renderEndIndex:p,lookaheadEndIndex:i,devicePixelRatio:v,expandGlyphColor:g,expandGlyphSize:x})=>{const T=d.useRef(null),u=d.useRef(null),o=d.useRef({segmentsByItem:e,glyphsByItem:r,itemHeight:s,width:l,viewportHeight:n,scrollPosition:a,color:c,strokeWidth:h,renderStartIndex:w,renderEndIndex:p,lookaheadEndIndex:i,devicePixelRatio:v,expandGlyphColor:g,expandGlyphSize:x}),m=d.useCallback(()=>{u.current=null;const _=T.current;if(!_)return;const S=_.getContext("2d");if(!S)return;const f=o.current;if(f.width<=0||f.viewportHeight<=0){S.clearRect(0,0,_.width,_.height);return}const L=Number.isFinite(f.devicePixelRatio??NaN)?f.devicePixelRatio:typeof window<"u"&&window.devicePixelRatio||1;We(_,f.width,f.viewportHeight,L);const Y=f.segmentsByItem.length,k=typeof f.renderStartIndex=="number"&&Number.isFinite(f.renderStartIndex)?Math.max(0,Math.floor(f.renderStartIndex)):Math.max(0,Math.floor(f.scrollPosition/f.itemHeight)),M=Math.min(Y,Math.ceil((f.scrollPosition+f.viewportHeight)/f.itemHeight)),j=(()=>{if(typeof f.renderEndIndex=="number"&&Number.isFinite(f.renderEndIndex)){const D=Math.floor(f.renderEndIndex);return Math.max(Math.min(Y,D+1),k)}return Math.max(M,k)})(),N=(()=>{if(typeof f.lookaheadEndIndex=="number"&&Number.isFinite(f.lookaheadEndIndex)){const D=Math.floor(f.lookaheadEndIndex),B=Math.min(Y,D+1);return Math.max(B,j)}return Math.max(M,j)})(),H=Be(f.segmentsByItem,k,N),W=He(f.glyphsByItem,k,N);S.save(),S.scale(L,L),S.clearRect(0,0,f.width,f.viewportHeight),S.translate(0,-f.scrollPosition),S.strokeStyle=f.color,Xe(S,H,f.strokeWidth),qe(S,W,f.expandGlyphColor??f.color,f.expandGlyphSize),S.restore()},[]),R=d.useCallback(()=>{u.current===null&&(u.current=window.requestAnimationFrame(m))},[m]);return d.useEffect(()=>{o.current={segmentsByItem:e,glyphsByItem:r,itemHeight:s,width:l,viewportHeight:n,scrollPosition:a,color:c,strokeWidth:h,renderStartIndex:w,renderEndIndex:p,lookaheadEndIndex:i,devicePixelRatio:v,expandGlyphColor:g,expandGlyphSize:x},R()},[e,r,s,l,n,a,c,h,w,p,i,v,g,x,R]),d.useEffect(()=>()=>{u.current!==null&&(window.cancelAnimationFrame(u.current),u.current=null)},[]),P.jsx("canvas",{ref:T,className:"pointer-events-none absolute top-0 left-0 z-0"})});Ce.displayName="TreeLineCanvas";const A={container:"directory-tree-container relative h-full transition-opacity duration-300 overflow-y-hidden pb-[5px] pr-[3px]",containerPending:"opacity-70",entry:"directory-tree-entry flex items-center cursor-pointer relative select-none",entryHover:$.twMerge("directory-tree-entry--hover hover:bg-gray-400/15","dark:hover:bg-gray-200/10"),entrySelected:$.twMerge("directory-tree-entry--selected bg-blue-400/10","dark:bg-blue-400/15"),entryItemSelected:$.twMerge("directory-tree-entry--item-selected bg-blue-400/20 shadow-[0_0_0_1px_rgba(59,130,246,0.3)]","dark:bg-blue-400/25 dark:shadow-[0_0_0_1px_rgba(96,165,250,0.4)]"),expandIcon:$.twMerge("directory-tree-expand-icon w-5 h-5 flex-shrink-0 flex items-center justify-center","text-gray-500","dark:text-gray-400"),expandIconSelected:$.twMerge("directory-tree-expand-icon--selected text-blue-700","dark:text-blue-400"),typeIcon:$.twMerge("directory-tree-type-icon w-5 h-5 flex-shrink-0 flex items-center justify-center","text-gray-500","dark:text-gray-400"),typeIconSelected:$.twMerge("directory-tree-type-icon--selected text-blue-700","dark:text-blue-400"),name:$.twMerge("directory-tree-name overflow-hidden text-ellipsis whitespace-nowrap ml-1","text-gray-700","dark:text-gray-200"),nameDirectory:"directory-tree-name--directory",nameSelected:$.twMerge("directory-tree-name--selected text-blue-800 font-medium","dark:text-blue-300")},Je={msOverflowStyle:"none",scrollbarWidth:"none"},Ge=()=>{let e=document.getElementById("directory-tree-webkit-scrollbar-hide");e||(e=document.createElement("style"),e.id="directory-tree-webkit-scrollbar-hide",e.textContent=".directory-tree-container::-webkit-scrollbar { display: none; }",document.head.appendChild(e))},ze=(e,r,s,l)=>{const n=[],a=[];let c=0;const h=(w,p,i)=>{for(let v=0;v<w.length;v++){const g=w[v],x=v===w.length-1,T=[...i,x],u=g.children!==void 0,o=u&&r(g.absolutePath,g.relativePath);let m=p,R=T,_=i;l&&(m=p-1,R=T.slice(1),_=i.slice(1)),n.push({entry:g,indentLevel:m,parentIsLast:R}),s&&(m>c&&(c=m),a.push({id:g.absolutePath,name:g.name,absolutePath:g.absolutePath,indentLevel:m,isLastChild:x,isDirectory:u,isExpanded:o,ancestorIsLast:[..._],hideLines:l&&p===0})),u&&o&&g.children&&h(g.children,p+1,T)}};return h(e,0,[]),{flatItems:n,lineItems:a,maxIndent:c}},Ue=(e,r,s,l,n)=>{const a=l?.renderStart??Math.max(0,Math.floor(n/re)),c=r>0?Math.ceil(r/re)+s:s,h=e>0?Math.min(e-1,a+c):a,w=l?.renderEnd??h,p=e>0?Math.min(e-1,w+s):w;return{renderStart:a,renderEnd:w,lookaheadEnd:p}},Ze=({isDirectory:e,isExpanded:r,showExpandIcons:s,useCanvasExpandIcons:l,expandIconSize:n})=>{const a=n?{width:n,height:n}:void 0,c=n?"":"h-4 w-4";return!(s&&e)||l?P.jsx("span",{className:c,style:a,"aria-hidden":"true"}):r?P.jsx(fe.ChevronDownIcon,{className:c,style:a}):P.jsx(fe.ChevronRightIcon,{className:c,style:a})},Qe=e=>e.slice((e.lastIndexOf(".")-1>>>0)+2).toLowerCase(),Ke=(e,r,s,l,n)=>{if(e.length===0)return{segmentsByItem:[],glyphsByItem:[]};const a=Array.from({length:e.length},()=>[]),c=Array.from({length:e.length},()=>[]),h=l?typeof n=="number"&&Number.isFinite(n)&&n>0?n:Math.max(8,Math.min(s*.9,r*.7)):0,w=3;for(let p=0;p<e.length;p++){const i=e[p];if(i.hideLines)continue;const v=[],g=p*r,x=g+r/2,T=h>0?h/2+2:s/1.5;for(let m=0;m<i.indentLevel;m++){if(i.ancestorIsLast[m]??!1)continue;let _=!1;for(let S=p;S<e.length;S++){const f=e[S];if(f.indentLevel>m&&f.ancestorIsLast.length>m&&!f.ancestorIsLast[m]){_=!0;break}if(S>p&&f.indentLevel===m)break}if(_){const S=m*s+s/2+w;v.push({key:`${i.id}-ancestor-${m}`,x1:S,y1:g,x2:S,y2:g+r,itemIndex:p})}}const u=i.indentLevel*s,o=u+s/2+w;if(i.isDirectory?v.push({key:`${i.id}-connector-top`,x1:o,y1:g,x2:o,y2:x-T,itemIndex:p}):v.push({key:`${i.id}-connector-top`,x1:o,y1:g,x2:o,y2:x,itemIndex:p}),!i.isDirectory&&i.isLastChild&&v.push({key:`${i.id}-connector-horizontal`,x1:o,y1:x,x2:u+s+w,y2:x,itemIndex:p}),i.isLastChild||(i.isDirectory?v.push({key:`${i.id}-connector-bottom`,x1:o,y1:x+T,x2:o,y2:g+r,itemIndex:p}):v.push({key:`${i.id}-connector-bottom`,x1:o,y1:x,x2:o,y2:g+r,itemIndex:p})),a[p]=v,l&&i.isDirectory){const m=h,R=o,_=x;c[p]=[{key:`${i.id}-glyph`,itemIndex:p,centerX:R,centerY:_,size:m,isExpanded:i.isExpanded}]}}return{segmentsByItem:a,glyphsByItem:c}},pe=(e,r)=>{if(e==null||typeof e=="boolean")return null;if(typeof e=="function")return console.warn(`[DirectoryTree] Function returned by renderer for "${r}". Return a node.`),null;if(typeof e=="object"){if("then"in e)return console.warn(`[DirectoryTree] Promise returned for "${r}". Not supported.`),null;if(Array.isArray(e)){const l=e.map(n=>pe(n,r)).filter(Boolean);return l.length?l:null}const s=e.type;if(s&&s.$$typeof===Symbol.for("react.lazy"))return console.warn(`[DirectoryTree] Lazy component for "${r}". Not supported.`),null}return e},et=(e,r)=>{const{entry:s,isDirectory:l,isExpanded:n,extension:a}=e;let c;return s.icon!==void 0?c=s.icon:l?c=n&&r?.directoryExpanded||r?.directory||P.jsx(fe.FolderIcon,{className:"h-4 w-4"}):a&&r?.fileByExtension?.[a]?c=r.fileByExtension[a]:c=r?.file||(a==="md"?P.jsx(fe.DocumentTextIcon,{className:"h-4 w-4"}):P.jsx(De.FileIcon,{className:"h-4 w-4"})),pe(typeof c=="function"?c(e):c,s.absolutePath)},be=d.memo(({entry:e,indentLevel:r,isDirOpen:s,parentIsLast:l,renderChildren:n=!0,expansion:{toggleDirectory:a,onToggleDirectoryRecursive:c},selection:{onEntryClick:h,selectedPath:w,mode:p="none",selectedItems:i,onSelectionChange:v},visual:{iconOverrides:g,showExpandIcons:x=!0,showDirectoryIcons:T=!0,showFileIcons:u=!0,useCanvasExpandIcons:o=!1,expandIconSize:m,highlightStyles:R}})=>{const _=d.useRef(null),[S,f]=d.useState(null),[L,Y]=d.useState(!1);d.useEffect(()=>()=>{_.current&&window.clearTimeout(_.current)},[]);const k=e.children!==void 0,M=k&&s(e.absolutePath),j=e.absolutePath===w,N=!k&&i?.has(e.absolutePath),H=k?void 0:Qe(e.name);d.useEffect(()=>{f(M&&e.children?e.children:null)},[M,e.children]);const W=d.useCallback(b=>{b.stopPropagation(),p!=="none"&&!k&&v&&v(e,!N);let I=!1;h({entry:e,isDirectory:k,isExpanded:M,preventDefault:()=>{I=!0}}),!(!k||I)&&(_.current?(window.clearTimeout(_.current),_.current=null,c(e)):_.current=window.setTimeout(()=>{a(e.absolutePath),_.current=null},500))},[k,e,M,c,a,h,p,v,N]),D=L?R?.hoverClassName!==void 0?R.hoverClassName:A.entryHover:"",B=(()=>{if(k){if(j)return R?.directorySelectedClassName!==void 0?R.directorySelectedClassName:A.entrySelected}else if(j||N)return R?.itemSelectedClassName!==void 0?R.itemSelectedClassName:$.twMerge(j&&A.entrySelected,N&&A.entryItemSelected);return""})(),U=$.twMerge(A.entry,D,B,e.className),X=$.twMerge(A.expandIcon,(j||N)&&A.expandIconSelected),Z=$.twMerge(A.typeIcon,(j||N)&&A.typeIconSelected),Q=$.twMerge(A.name,k&&A.nameDirectory,(j||N)&&A.nameSelected),q=Ze({isDirectory:k,isExpanded:M,showExpandIcons:x,useCanvasExpandIcons:o,expandIconSize:m}),t=(k?T:u)?et({entry:e,isDirectory:k,isExpanded:M,isSelected:j,isItemSelected:!!N,extension:H},g):null,y={...L?R?.hoverStyle:{},...k&&j?R?.directorySelectedStyle:{},...!k&&(j||N)?R?.itemSelectedStyle:{}};return P.jsxs(d.Fragment,{children:[P.jsxs("div",{className:U,style:{paddingLeft:`${Math.max(0,r*ce)}px`,transform:r<0?`translateX(${r*ce}px)`:void 0,width:r<0?`calc(100% + ${Math.abs(r*ce)}px)`:void 0,height:`${re}px`,...y,...e.style},"data-entry-type":k?"directory":"file","data-entry-expanded":k?String(M):void 0,"data-entry-selected":j?"true":void 0,"data-entry-item-selected":N?"true":void 0,onClick:W,onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1),onKeyDown:b=>b.key==="Enter"&&W(b),tabIndex:0,role:"treeitem","aria-expanded":k?M:void 0,"aria-label":`${e.name} (${k?"directory":"file"})`,children:[(x||o)&&P.jsx("span",{className:X,children:q}),(k?T:u)&&P.jsx("span",{className:Z,children:t}),P.jsx("span",{className:Q,"data-entry-type":k?"directory":"file","data-entry-role":"name",children:e.label??e.name})]}),M&&S&&n&&P.jsx("fieldset",{children:S.map((b,I)=>P.jsx(be,{entry:b,indentLevel:r+1,isDirOpen:s,parentIsLast:[...l,I===S.length-1],expansion:{toggleDirectory:a,onToggleDirectoryRecursive:c},selection:{onEntryClick:h,selectedPath:w,mode:p,selectedItems:i,onSelectionChange:v},visual:{iconOverrides:g,showExpandIcons:x,showDirectoryIcons:T,showFileIcons:u,useCanvasExpandIcons:o,expandIconSize:m,highlightStyles:R}},b.absolutePath))})]},e.absolutePath)},(e,r)=>{if(e.entry!==r.entry)return!1;const s=e.entry.children!==void 0,l=r.entry.children!==void 0,n=s&&e.isDirOpen(e.entry.absolutePath),a=l&&r.isDirOpen(r.entry.absolutePath);return e.indentLevel===r.indentLevel&&n===a&&e.selection.selectedPath===r.selection.selectedPath&&e.selection.mode===r.selection.mode&&e.selection.selectedItems===r.selection.selectedItems&&e.visual.iconOverrides===r.visual.iconOverrides&&e.visual.showExpandIcons===r.visual.showExpandIcons&&e.visual.showDirectoryIcons===r.visual.showDirectoryIcons&&e.visual.showFileIcons===r.visual.showFileIcons&&e.visual.useCanvasExpandIcons===r.visual.useCanvasExpandIcons&&e.visual.expandIconSize===r.visual.expandIconSize&&e.visual.highlightStyles===r.visual.highlightStyles&&e.parentIsLast.length===r.parentIsLast.length&&e.parentIsLast.every((c,h)=>c===r.parentIsLast[h])});be.displayName="DirectoryEntryItem";const re=20,tt=()=>re,ce=16,Te=12,Pe=e=>{const r=[];if(e.children)for(const s of e.children)s.type==="directory"&&(r.push(s.absolutePath),r.push(...Pe(s)));return r},rt=({entries:e,expansion:{toggle:r,isExpanded:s,expandMultiple:l,collapseMultiple:n,isPending:a,alwaysExpanded:c=!1,doubleClickAction:h="recursive"},selection:{onEntryClick:w,selectedPath:p,mode:i="none",selectedItems:v,onSelectionChange:g},visual:{className:x,style:T,lineColor:u="#A0AEC0",showTreeLines:o=!0,showExpandIcons:m=!0,showDirectoryIcons:R=!0,showFileIcons:_=!0,iconOverrides:S,expandIconSize:f,removeRootIndent:L=!1,highlightStyles:Y}={},virtualScroll:k})=>{const[M,j]=d.useState(!1),N=d.useRef(null),H=d.useRef(null),[W,D]=d.useState(0),[B,U]=d.useState(null),{overscanCount:X=15,className:Z,background:Q,onScroll:q,onRangeChange:t,initialScrollIndex:y,initialScrollOffset:b,callbackThrottleMs:I=5,contentInsets:K,onItemFocus:ne,viewportHeightOverride:E,scrollBarOptions:V,behaviorOptions:se}=k??{},[ee,ge]=d.useState(typeof b=="number"?b:0),Me=d.useCallback((C,G)=>{ge(C),q?.(C,G)},[q]),Ne=d.useCallback(C=>{const{renderingStartIndex:G,renderingEndIndex:F}=C;U(O=>O&&O.renderStart===G&&O.renderEnd===F?O:{renderStart:G,renderEnd:F}),t?.(C)},[t]);d.useEffect(()=>{typeof b=="number"&&ge(b)},[b]),d.useEffect(()=>{j(!0),Ge()},[]),d.useEffect(()=>{if(typeof E=="number"){D(O=>Math.abs(O-E)>1?E:O);return}const C=N.current;if(!C)return D(0);(()=>{const O=C.clientHeight;D(z=>Math.abs(z-O)>1?O:z)})();const F=new ResizeObserver(O=>{for(const z of O)z.target===C&&D(he=>Math.abs(he-z.contentRect.height)>1?z.contentRect.height:he)});return F.observe(C),()=>F.disconnect()},[E]);const J=typeof E=="number"?E:W,te=d.useCallback(C=>c||(M?s(C):!1),[M,s,c]),ve=$.twMerge(A.container,a&&A.containerPending,x),xe=d.useMemo(()=>({...Je,...T??{},...typeof E=="number"?{height:E,minHeight:E}:{}}),[T,E]),je=d.useCallback((C,G)=>{const F=[C.absolutePath,...Pe(C)],O=G||h;if(F.every(ye=>te(ye)))return n(F);if(F.every(ye=>!te(ye))||O==="recursive")return l(F);if(O==="toggle")return n(F);console.warn(`[DirectoryTree] Unknown double click action: ${O}. No action taken.`)},[te,l,n,h]),{flatItems:ae,lineItems:me,maxIndent:Ee}=d.useMemo(()=>ze(e,te,o,L),[e,te,o,L]),ie=d.useMemo(()=>!o||me.length===0?{segmentsByItem:[],glyphsByItem:[]}:Ke(me,re,ce,o,f??Te),[me,o,f]),ue=d.useMemo(()=>!o||e.length===0?0:(Ee+2)*ce,[e.length,Ee,o]),{renderStart:ke,renderEnd:we,lookaheadEnd:Se}=d.useMemo(()=>Ue(ae.length,J,X,B,ee),[ae.length,J,X,B,ee]),Oe=d.useMemo(()=>!o||ue<=0||J<=0||ie.segmentsByItem.length===0?null:P.jsx("div",{className:"pointer-events-none absolute inset-0 z-0","aria-hidden":"true",children:P.jsx("div",{className:"absolute top-0 left-0",style:{width:ue,height:J},children:P.jsx(Ce,{segmentsByItem:ie.segmentsByItem,glyphsByItem:ie.glyphsByItem,itemHeight:re,width:ue,viewportHeight:J,scrollPosition:ee,color:u,expandGlyphColor:u,expandGlyphSize:f??Te,renderStartIndex:ke,renderEndIndex:we,lookaheadEndIndex:Se})})}),[ue,J,ke,we,Se,ee,ie,u,o,f]),Ae=d.useCallback(C=>ae[C],[ae]);return e.length===0?P.jsx("div",{className:ve,style:xe}):P.jsx("div",{ref:N,className:ve,style:xe,role:"tree",children:P.jsx($e.VirtualScroll,{ref:H,itemCount:ae.length,getItem:Ae,getItemHeight:tt,viewportSize:J,overscanCount:X,onScroll:Me,onRangeChange:Ne,className:Z,background:P.jsxs(P.Fragment,{children:[Oe,Q]}),initialScrollIndex:y,initialScrollOffset:b,onItemFocus:ne,callbackThrottleMs:I,contentInsets:K,scrollBarOptions:V,behaviorOptions:se,children:C=>C&&P.jsx(be,{entry:C.entry,indentLevel:C.indentLevel,isDirOpen:te,parentIsLast:C.parentIsLast,renderChildren:!1,expansion:{toggleDirectory:r,onToggleDirectoryRecursive:je},selection:{onEntryClick:w,selectedPath:p??null,mode:i,selectedItems:v,onSelectionChange:g},visual:{iconOverrides:S,showExpandIcons:m,showDirectoryIcons:R,showFileIcons:_,useCanvasExpandIcons:o,expandIconSize:f,highlightStyles:Y}},C.entry.absolutePath)})})},nt=({initialExpanded:e=new Set,storageKey:r}={})=>{const[s,l]=d.useTransition(),[n,a]=d.useState(()=>{if(typeof window<"u"&&r)try{const u=window.localStorage.getItem(r);if(u){const o=JSON.parse(u);return new Set(o)}}catch(u){console.error("[useDirectoryTreeState] Error reading from localStorage",u)}return e}),c=d.useCallback(u=>{l(()=>{a(o=>{const m=new Set(o);return u(m),m})})},[]),h=d.useCallback((u,o)=>{c(m=>{for(const R of u)o(m,R)})},[c]);d.useEffect(()=>{if(r&&typeof window<"u")try{window.localStorage.setItem(r,JSON.stringify(Array.from(n)))}catch(u){console.warn(`Error setting localStorage key "${r}":`,u)}},[n,r]);const w=d.useCallback(u=>{h([u],(o,m)=>{o.has(m)?o.delete(m):o.add(m)})},[h]),p=d.useCallback(u=>{h([u],(o,m)=>{o.add(m)})},[h]),i=d.useCallback(u=>{h([u],(o,m)=>{o.delete(m)})},[h]),v=d.useCallback(u=>{h(u,(o,m)=>{o.delete(m)})},[h]),g=d.useCallback(u=>{h(u,(o,m)=>{o.add(m)})},[h]),x=d.useCallback(()=>{c(u=>{u.clear()})},[c]),T=d.useCallback(u=>n.has(u),[n]);return{expanded:n,toggle:w,expand:p,collapse:i,collapseMultiple:v,expandMultiple:g,collapseAll:x,isExpanded:T,isPending:s}};exports.DirectoryTree=rt;exports.directoryTreeClasses=A;exports.useDirectoryTreeState=nt;
|
|
6
|
+
<%s key={someKey} {...props} />`,R,C,G,C),A[C+R]=!0)}if(C=null,x!==void 0&&(o(x),C=""+x),a(m)&&(o(m.key),C=""+m.key),"key"in m){x={};for(var te in m)te!=="key"&&(x[te]=m[te])}else x=m;return C&&h(x,typeof t=="function"?t.displayName||t.name||"Unknown":t),I(t,C,x,s(),ee,Q)}function y(t){p(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===X&&(t._payload.status==="fulfilled"?p(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function p(t){return typeof t=="object"&&t!==null&&t.$$typeof===k}var w=u,k=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),b=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),v=Symbol.for("react.consumer"),E=Symbol.for("react.context"),f=Symbol.for("react.forward_ref"),M=Symbol.for("react.suspense"),N=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),X=Symbol.for("react.lazy"),z=Symbol.for("react.activity"),U=Symbol.for("react.client.reference"),$=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,Z=Array.isArray,q=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(t){return t()}};var ne,S={},D=w.react_stack_bottom_frame.bind(w,l)(),L=q(n(l)),A={};ue.Fragment=d,ue.jsx=function(t,m,x){var R=1e4>$.recentlyCreatedOwnerStacks++;return c(t,m,x,!1,R?Error("react-stack-top-frame"):D,R?q(n(t)):L)},ue.jsxs=function(t,m,x){var R=1e4>$.recentlyCreatedOwnerStacks++;return c(t,m,x,!0,R?Error("react-stack-top-frame"):D,R?q(n(t)):L)}})()),ue}var Oe;function et(){return Oe||(Oe=1,process.env.NODE_ENV==="production"?pe.exports=Qe():pe.exports=Ke()),pe.exports}var T=et();const tt=(e,r,o)=>{const n=[];for(let s=r;s<o;s++){const l=e[s];if(!(!l||l.length===0))for(const a of l)n.push(a)}return n},rt=(e,r,o)=>{const n=[];for(let s=r;s<o;s++){const l=e[s];if(!(!l||l.length===0))for(const a of l)n.push(a)}return n},nt=(e,r,o,n)=>{const s=Math.max(1,Math.floor(r*n)),l=Math.max(1,Math.floor(o*n));(e.width!==s||e.height!==l)&&(e.width=s,e.height=l);const a=e.style;a.width!==`${r}px`&&(a.width=`${r}px`),a.height!==`${o}px`&&(a.height=`${o}px`)},st=(e,r,o)=>{e.lineWidth=o,e.beginPath();for(const n of r)e.moveTo(n.x1,n.y1),e.lineTo(n.x2,n.y2);e.stroke()},at=(e,r)=>{const o=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!o)return null;let n=o[1];n.length===3&&(n=n.split("").map(h=>h+h).join(""));const s=Number.parseInt(n.slice(0,2),16),l=Number.parseInt(n.slice(2,4),16),a=Number.parseInt(n.slice(4,6),16);return`rgba(${s}, ${l}, ${a}, ${r})`},ot=(e,r,o,n)=>{if(r.length===0)return;const s=at(o,.14),l=e.strokeStyle,a=e.fillStyle,h=e.lineWidth,_=e.lineCap,I=e.lineJoin;e.strokeStyle=o,e.lineCap="round",e.lineJoin="round";for(const c of r){const y=n??c.size,p=Math.max(0,y/2),w=Math.max(1,Math.round(y*.08)),k=Math.max(1,Math.round(y*.14)),i=Math.max(0,p-w*.8),d=Math.max(0,i*.55);s&&(e.fillStyle=s,e.beginPath(),e.arc(c.centerX,c.centerY,i,0,Math.PI*2),e.fill()),e.lineWidth=w,e.beginPath(),e.arc(c.centerX,c.centerY,Math.max(0,p-w*.3),0,Math.PI*2),e.stroke(),e.lineWidth=k,e.beginPath(),e.moveTo(c.centerX-d,c.centerY),e.lineTo(c.centerX+d,c.centerY),e.stroke(),c.isExpanded||(e.beginPath(),e.moveTo(c.centerX,c.centerY-d),e.lineTo(c.centerX,c.centerY+d),e.stroke())}e.strokeStyle=l,e.fillStyle=a,e.lineWidth=h,e.lineCap=_,e.lineJoin=I},Le=u.memo(({segmentsByItem:e,glyphsByItem:r,itemHeight:o,width:n,viewportHeight:s,scrollPosition:l,color:a="#a0aec0",strokeWidth:h=1,renderStartIndex:_,renderEndIndex:I,lookaheadEndIndex:c,devicePixelRatio:y,expandGlyphColor:p,expandGlyphSize:w})=>{const k=u.useRef(null),i=u.useRef(null),d=u.useRef({segmentsByItem:e,glyphsByItem:r,itemHeight:o,width:n,viewportHeight:s,scrollPosition:l,color:a,strokeWidth:h,renderStartIndex:_,renderEndIndex:I,lookaheadEndIndex:c,devicePixelRatio:y,expandGlyphColor:p,expandGlyphSize:w}),b=u.useCallback(()=>{i.current=null;const v=k.current;if(!v)return;const E=v.getContext("2d");if(!E)return;const f=d.current;if(f.width<=0||f.viewportHeight<=0){E.clearRect(0,0,v.width,v.height);return}const M=Number.isFinite(f.devicePixelRatio??NaN)?f.devicePixelRatio:typeof window<"u"&&window.devicePixelRatio||1;nt(v,f.width,f.viewportHeight,M);const N=f.segmentsByItem.length,j=typeof f.renderStartIndex=="number"&&Number.isFinite(f.renderStartIndex)?Math.max(0,Math.floor(f.renderStartIndex)):Math.max(0,Math.floor(f.scrollPosition/f.itemHeight)),X=Math.min(N,Math.ceil((f.scrollPosition+f.viewportHeight)/f.itemHeight)),z=(()=>{if(typeof f.renderEndIndex=="number"&&Number.isFinite(f.renderEndIndex)){const Z=Math.floor(f.renderEndIndex);return Math.max(Math.min(N,Z+1),j)}return Math.max(X,j)})(),U=(()=>{if(typeof f.lookaheadEndIndex=="number"&&Number.isFinite(f.lookaheadEndIndex)){const Z=Math.floor(f.lookaheadEndIndex),q=Math.min(N,Z+1);return Math.max(q,z)}return Math.max(X,z)})(),$=tt(f.segmentsByItem,j,U),V=rt(f.glyphsByItem,j,U);E.save(),E.scale(M,M),E.clearRect(0,0,f.width,f.viewportHeight),E.translate(0,-f.scrollPosition),E.strokeStyle=f.color,st(E,$,f.strokeWidth),ot(E,V,f.expandGlyphColor??f.color,f.expandGlyphSize),E.restore()},[]),P=u.useCallback(()=>{i.current===null&&(i.current=window.requestAnimationFrame(b))},[b]);return u.useEffect(()=>{d.current={segmentsByItem:e,glyphsByItem:r,itemHeight:o,width:n,viewportHeight:s,scrollPosition:l,color:a,strokeWidth:h,renderStartIndex:_,renderEndIndex:I,lookaheadEndIndex:c,devicePixelRatio:y,expandGlyphColor:p,expandGlyphSize:w},P()},[e,r,o,n,s,l,a,h,_,I,c,y,p,w,P]),u.useEffect(()=>()=>{i.current!==null&&(window.cancelAnimationFrame(i.current),i.current=null)},[]),T.jsx("canvas",{ref:k,className:"pointer-events-none absolute top-0 left-0 z-0"})});Le.displayName="TreeLineCanvas";const Y={container:"directory-tree-container relative h-full transition-opacity duration-300 overflow-y-hidden pb-[5px] pr-[3px]",containerPending:"opacity-70",entry:"directory-tree-entry flex items-center cursor-pointer relative select-none",entryHover:B.twMerge("directory-tree-entry--hover hover:bg-gray-400/15","dark:hover:bg-gray-200/10"),entrySelected:B.twMerge("directory-tree-entry--selected bg-blue-400/10","dark:bg-blue-400/15"),entryItemSelected:B.twMerge("directory-tree-entry--item-selected bg-blue-400/20 shadow-[0_0_0_1px_rgba(59,130,246,0.3)]","dark:bg-blue-400/25 dark:shadow-[0_0_0_1px_rgba(96,165,250,0.4)]"),expandIcon:B.twMerge("directory-tree-expand-icon w-5 h-5 flex-shrink-0 flex items-center justify-center","text-gray-500","dark:text-gray-400"),expandIconSelected:B.twMerge("directory-tree-expand-icon--selected text-blue-700","dark:text-blue-400"),typeIcon:B.twMerge("directory-tree-type-icon w-5 h-5 flex-shrink-0 flex items-center justify-center","text-gray-500","dark:text-gray-400"),typeIconSelected:B.twMerge("directory-tree-type-icon--selected text-blue-700","dark:text-blue-400"),name:B.twMerge("directory-tree-name overflow-hidden text-ellipsis whitespace-nowrap ml-1","text-gray-700","dark:text-gray-200"),nameDirectory:"directory-tree-name--directory",nameSelected:B.twMerge("directory-tree-name--selected text-blue-800 font-medium","dark:text-blue-300")},lt={msOverflowStyle:"none",scrollbarWidth:"none"},it=()=>{let e=document.getElementById("directory-tree-webkit-scrollbar-hide");e||(e=document.createElement("style"),e.id="directory-tree-webkit-scrollbar-hide",e.textContent=".directory-tree-container::-webkit-scrollbar { display: none; }",document.head.appendChild(e))},ct=(e,r,o,n)=>{const s=[],l=[];let a=0;const h=(_,I,c)=>{for(let y=0;y<_.length;y++){const p=_[y],w=y===_.length-1,k=[...c,w],i=p.children!==void 0,d=i&&r(p.absolutePath,p.relativePath);let b=I,P=k,v=c;n&&(b=I-1,P=k.slice(1),v=c.slice(1)),s.push({entry:p,indentLevel:b,parentIsLast:P}),o&&(b>a&&(a=b),l.push({id:p.absolutePath,name:p.name,absolutePath:p.absolutePath,indentLevel:b,isLastChild:w,isDirectory:i,isExpanded:d,ancestorIsLast:[...v],hideLines:n&&I===0})),i&&d&&p.children&&h(p.children,I+1,k)}};return h(e,0,[]),{flatItems:s,lineItems:l,maxIndent:a}},$e=(e,r)=>{const o=e.length-1;if(o<=0)return 0;let n=0,s=o-1,l=0;for(;n<=s;){const a=n+s>>>1;e[a]<=r?(l=a,n=a+1):s=a-1}return l},ut=(e,r,o,n,s,l)=>{const a=n?.renderStart??Math.max(0,$e(l,s)),h=r>0?$e(l,s+r)+o:a+o,_=e>0?Math.min(e-1,Math.max(a,h)):a,I=n?.renderEnd??_,c=e>0?Math.min(e-1,I+o):I;return{renderStart:a,renderEnd:I,lookaheadEnd:c}},dt=({isDirectory:e,isExpanded:r,showExpandIcons:o,useCanvasExpandIcons:n,expandIconSize:s})=>{const l=s?{width:s,height:s}:void 0,a=s?"":"h-4 w-4";return!(o&&e)||n?T.jsx("span",{className:a,style:l,"aria-hidden":"true"}):r?T.jsx(ge.ChevronDownIcon,{className:a,style:l}):T.jsx(ge.ChevronRightIcon,{className:a,style:l})},ft=e=>e.slice((e.lastIndexOf(".")-1>>>0)+2).toLowerCase(),mt=(e,r,o,n,s,l)=>{if(e.length===0)return{segmentsByItem:[],glyphsByItem:[]};const a=Array.from({length:e.length},()=>[]),h=Array.from({length:e.length},()=>[]),_=c=>s?typeof l=="number"&&Number.isFinite(l)&&l>0?l:Math.max(8,Math.min(n*.9,c*.7)):0,I=3;for(let c=0;c<e.length;c++){const y=e[c];if(y.hideLines)continue;const p=[],w=r[c]??0,k=o[c]??0,i=k+w/2,d=_(w),b=d>0?d/2+2:n/1.5;for(let E=0;E<y.indentLevel;E++){if(y.ancestorIsLast[E]??!1)continue;let M=!1;for(let N=c;N<e.length;N++){const j=e[N];if(j.indentLevel>E&&j.ancestorIsLast.length>E&&!j.ancestorIsLast[E]){M=!0;break}if(N>c&&j.indentLevel===E)break}if(M){const N=E*n+n/2+I;p.push({key:`${y.id}-ancestor-${E}`,x1:N,y1:k,x2:N,y2:k+w,itemIndex:c})}}const P=y.indentLevel*n,v=P+n/2+I;if(y.isDirectory?p.push({key:`${y.id}-connector-top`,x1:v,y1:k,x2:v,y2:i-b,itemIndex:c}):p.push({key:`${y.id}-connector-top`,x1:v,y1:k,x2:v,y2:i,itemIndex:c}),!y.isDirectory&&y.isLastChild&&p.push({key:`${y.id}-connector-horizontal`,x1:v,y1:i,x2:P+n+I,y2:i,itemIndex:c}),y.isLastChild||(y.isDirectory?p.push({key:`${y.id}-connector-bottom`,x1:v,y1:i+b,x2:v,y2:k+w,itemIndex:c}):p.push({key:`${y.id}-connector-bottom`,x1:v,y1:i,x2:v,y2:k+w,itemIndex:c})),a[c]=p,s&&y.isDirectory){const E=d,f=v,M=i;h[c]=[{key:`${y.id}-glyph`,itemIndex:c,centerX:f,centerY:M,size:E,isExpanded:y.isExpanded}]}}return{segmentsByItem:a,glyphsByItem:h}},ke=(e,r)=>{if(e==null||typeof e=="boolean")return null;if(typeof e=="function")return console.warn(`[DirectoryTree] Function returned by renderer for "${r}". Return a node.`),null;if(typeof e=="object"){if("then"in e)return console.warn(`[DirectoryTree] Promise returned for "${r}". Not supported.`),null;if(Array.isArray(e)){const n=e.map(s=>ke(s,r)).filter(Boolean);return n.length?n:null}const o=e.type;if(o&&o.$$typeof===Symbol.for("react.lazy"))return console.warn(`[DirectoryTree] Lazy component for "${r}". Not supported.`),null}return e},ht=(e,r)=>{const{entry:o,isDirectory:n,isExpanded:s,extension:l}=e;let a;return o.icon!==void 0?a=o.icon:n?a=s&&r?.directoryExpanded||r?.directory||T.jsx(ge.FolderIcon,{className:"h-4 w-4"}):l&&r?.fileByExtension?.[l]?a=r.fileByExtension[l]:a=r?.file||(l==="md"?T.jsx(ge.DocumentTextIcon,{className:"h-4 w-4"}):T.jsx(Ze.FileIcon,{className:"h-4 w-4"})),ke(typeof a=="function"?a(e):a,o.absolutePath)},Se=u.memo(({entry:e,indentLevel:r,rowHeight:o,isDirOpen:n,parentIsLast:s,renderChildren:l=!0,expansion:{toggleDirectory:a,onToggleDirectoryRecursive:h},selection:{onEntryClick:_,selectedPath:I,mode:c="none",selectedItems:y,onSelectionChange:p},visual:{iconOverrides:w,showExpandIcons:k=!0,showDirectoryIcons:i=!0,showFileIcons:d=!0,useCanvasExpandIcons:b=!1,expandIconSize:P,highlightStyles:v,entryClassName:E,entryStyle:f,nameClassName:M,nameStyle:N,directoryNameClassName:j,directoryNameStyle:X,fileNameClassName:z,fileNameStyle:U}})=>{const $=u.useRef(null),[V,Z]=u.useState(null),[q,ne]=u.useState(!1);u.useEffect(()=>()=>{$.current&&window.clearTimeout($.current)},[]);const S=e.children!==void 0,D=S&&n(e.absolutePath),L=e.absolutePath===I,A=!S&&y?.has(e.absolutePath),t=S?void 0:ft(e.name);u.useEffect(()=>{Z(D&&e.children?e.children:null)},[D,e.children]);const m=u.useCallback(W=>{W.stopPropagation(),c!=="none"&&!S&&p&&p(e,!A);let le=!1;_({entry:e,isDirectory:S,isExpanded:D,preventDefault:()=>{le=!0}}),!(!S||le)&&($.current?(window.clearTimeout($.current),$.current=null,h(e)):$.current=window.setTimeout(()=>{a(e.absolutePath),$.current=null},500))},[S,e,D,h,a,_,c,p,A]),x=q?v?.hoverClassName!==void 0?v.hoverClassName:Y.entryHover:"",R=(()=>{if(S){if(L)return v?.directorySelectedClassName!==void 0?v.directorySelectedClassName:Y.entrySelected}else if(L||A)return v?.itemSelectedClassName!==void 0?v.itemSelectedClassName:B.twMerge(L&&Y.entrySelected,A&&Y.entryItemSelected);return""})(),ee=B.twMerge(Y.entry,x,R,E,e.className),Q=B.twMerge(Y.expandIcon,(L||A)&&Y.expandIconSelected),C=B.twMerge(Y.typeIcon,(L||A)&&Y.typeIconSelected),G=B.twMerge(Y.name,M,S&&Y.nameDirectory,S&&j,!S&&z,(L||A)&&Y.nameSelected),te=dt({isDirectory:S,isExpanded:D,showExpandIcons:k,useCanvasExpandIcons:b,expandIconSize:P}),oe=(S?i:d)?ht({entry:e,isDirectory:S,isExpanded:D,isSelected:L,isItemSelected:!!A,extension:t},w):null,ve={...q?v?.hoverStyle:{},...S&&L?v?.directorySelectedStyle:{},...!S&&(L||A)?v?.itemSelectedStyle:{}};return T.jsxs(u.Fragment,{children:[T.jsxs("div",{className:ee,style:{paddingLeft:`${Math.max(0,r*de)}px`,transform:r<0?`translateX(${r*de}px)`:void 0,width:r<0?`calc(100% + ${Math.abs(r*de)}px)`:void 0,height:`${o}px`,...ve,...f,...e.style},"data-entry-type":S?"directory":"file","data-entry-expanded":S?String(D):void 0,"data-entry-selected":L?"true":void 0,"data-entry-item-selected":A?"true":void 0,onClick:m,onMouseEnter:()=>ne(!0),onMouseLeave:()=>ne(!1),onKeyDown:W=>W.key==="Enter"&&m(W),tabIndex:0,role:"treeitem","aria-expanded":S?D:void 0,"aria-label":`${e.name} (${S?"directory":"file"})`,children:[(k||b)&&T.jsx("span",{className:Q,children:te}),(S?i:d)&&T.jsx("span",{className:C,children:oe}),T.jsx("span",{className:G,style:{...N,...S?X:U},"data-entry-type":S?"directory":"file","data-entry-role":"name",children:e.label??e.name})]}),D&&V&&l&&T.jsx("fieldset",{children:V.map((W,le)=>T.jsx(Se,{entry:W,indentLevel:r+1,rowHeight:o,isDirOpen:n,parentIsLast:[...s,le===V.length-1],expansion:{toggleDirectory:a,onToggleDirectoryRecursive:h},selection:{onEntryClick:_,selectedPath:I,mode:c,selectedItems:y,onSelectionChange:p},visual:{iconOverrides:w,showExpandIcons:k,showDirectoryIcons:i,showFileIcons:d,useCanvasExpandIcons:b,expandIconSize:P,highlightStyles:v,entryClassName:E,entryStyle:f,nameClassName:M,nameStyle:N,directoryNameClassName:j,directoryNameStyle:X,fileNameClassName:z,fileNameStyle:U}},W.absolutePath))})]},e.absolutePath)},(e,r)=>{if(e.entry!==r.entry)return!1;const o=e.entry.children!==void 0,n=r.entry.children!==void 0,s=o&&e.isDirOpen(e.entry.absolutePath),l=n&&r.isDirOpen(r.entry.absolutePath);return e.indentLevel===r.indentLevel&&e.rowHeight===r.rowHeight&&s===l&&e.selection.selectedPath===r.selection.selectedPath&&e.selection.mode===r.selection.mode&&e.selection.selectedItems===r.selection.selectedItems&&e.visual.iconOverrides===r.visual.iconOverrides&&e.visual.showExpandIcons===r.visual.showExpandIcons&&e.visual.showDirectoryIcons===r.visual.showDirectoryIcons&&e.visual.showFileIcons===r.visual.showFileIcons&&e.visual.useCanvasExpandIcons===r.visual.useCanvasExpandIcons&&e.visual.expandIconSize===r.visual.expandIconSize&&e.visual.highlightStyles===r.visual.highlightStyles&&e.visual.entryClassName===r.visual.entryClassName&&e.visual.entryStyle===r.visual.entryStyle&&e.visual.nameClassName===r.visual.nameClassName&&e.visual.nameStyle===r.visual.nameStyle&&e.visual.directoryNameClassName===r.visual.directoryNameClassName&&e.visual.directoryNameStyle===r.visual.directoryNameStyle&&e.visual.fileNameClassName===r.visual.fileNameClassName&&e.visual.fileNameStyle===r.visual.fileNameStyle&&e.parentIsLast.length===r.parentIsLast.length&&e.parentIsLast.every((a,h)=>a===r.parentIsLast[h])});Se.displayName="DirectoryEntryItem";const be=20,de=16,De=12,Fe=e=>{const r=[];if(e.children)for(const o of e.children)o.type==="directory"&&(r.push(o.absolutePath),r.push(...Fe(o)));return r},yt=({entries:e,expansion:{toggle:r,isExpanded:o,expandMultiple:n,collapseMultiple:s,isPending:l,alwaysExpanded:a=!1,doubleClickAction:h="recursive"},selection:{onEntryClick:_,selectedPath:I,mode:c="none",selectedItems:y,onSelectionChange:p},visual:{className:w,style:k,lineColor:i="#A0AEC0",showTreeLines:d=!0,showExpandIcons:b=!0,showDirectoryIcons:P=!0,showFileIcons:v=!0,iconOverrides:E,expandIconSize:f,itemHeight:M=be,removeRootIndent:N=!1,highlightStyles:j,entryClassName:X,entryStyle:z,nameClassName:U,nameStyle:$,directoryNameClassName:V,directoryNameStyle:Z,fileNameClassName:q,fileNameStyle:ne}={},virtualScroll:S})=>{const[D,L]=u.useState(!1),A=u.useRef(null),t=u.useRef(null),[m,x]=u.useState(0),[R,ee]=u.useState(null),{overscanCount:Q=15,className:C,background:G,onScroll:te,onRangeChange:oe,initialScrollIndex:ve,initialScrollOffset:W,callbackThrottleMs:le=5,contentInsets:He,onItemFocus:Ye,viewportHeightOverride:J,scrollBarOptions:Be,behaviorOptions:We}=S??{},[fe,Ie]=u.useState(typeof W=="number"?W:0),Xe=u.useCallback((g,F)=>{Ie(g),te?.(g,F)},[te]),Ve=u.useCallback(g=>{const{renderingStartIndex:F,renderingEndIndex:H}=g;ee(O=>O&&O.renderStart===F&&O.renderEnd===H?O:{renderStart:F,renderEnd:H}),oe?.(g)},[oe]);u.useEffect(()=>{typeof W=="number"&&Ie(W)},[W]),u.useEffect(()=>{L(!0),it()},[]),u.useEffect(()=>{if(typeof J=="number"){x(O=>Math.abs(O-J)>1?J:O);return}const g=A.current;if(!g)return x(0);(()=>{const O=g.clientHeight;x(ae=>Math.abs(ae-O)>1?O:ae)})();const H=new ResizeObserver(O=>{for(const ae of O)ae.target===g&&x(xe=>Math.abs(xe-ae.contentRect.height)>1?ae.contentRect.height:xe)});return H.observe(g),()=>H.disconnect()},[J]);const se=typeof J=="number"?J:m,ie=u.useCallback(g=>a||(D?o(g):!1),[D,o,a]),Re=B.twMerge(Y.container,l&&Y.containerPending,w),_e=u.useMemo(()=>({...lt,...k??{},...typeof J=="number"?{height:J,minHeight:J}:{}}),[k,J]),qe=u.useCallback((g,F)=>{const H=[g.absolutePath,...Fe(g)],O=F||h;if(H.every(we=>ie(we)))return s(H);if(H.every(we=>!ie(we))||O==="recursive")return n(H);if(O==="toggle")return s(H);console.warn(`[DirectoryTree] Unknown double click action: ${O}. No action taken.`)},[ie,n,s,h]),{flatItems:Ce,lineItems:Ee,maxIndent:Te}=u.useMemo(()=>ct(e,ie,d,N),[e,ie,d,N]),K=u.useMemo(()=>Ce.map((g,F)=>{const H=typeof M=="function"?M(g.entry,F):M;return{...g,rowHeight:Number.isFinite(H)&&H>0?H:be}}),[Ce,M]),re=u.useMemo(()=>K.map(g=>g.rowHeight),[K]),me=u.useMemo(()=>{const g=new Array(re.length+1);g[0]=0;for(let F=0;F<re.length;F++)g[F+1]=g[F]+re[F];return g},[re]),Ge=u.useCallback(g=>K[g]?.rowHeight??be,[K]),he=u.useMemo(()=>!d||Ee.length===0?{segmentsByItem:[],glyphsByItem:[]}:mt(Ee,re,me,de,d,f??De),[Ee,re,me,d,f]),ye=u.useMemo(()=>!d||e.length===0?0:(Te+2)*de,[e.length,Te,d]),{renderStart:Ne,renderEnd:Me,lookaheadEnd:Pe}=u.useMemo(()=>ut(K.length,se,Q,R,fe,me),[K.length,se,Q,R,fe,me]),Je=u.useMemo(()=>!d||ye<=0||se<=0||he.segmentsByItem.length===0?null:T.jsx("div",{className:"pointer-events-none absolute inset-0 z-0","aria-hidden":"true",children:T.jsx("div",{className:"absolute top-0 left-0",style:{width:ye,height:se},children:T.jsx(Le,{segmentsByItem:he.segmentsByItem,glyphsByItem:he.glyphsByItem,itemHeight:re[0]??be,width:ye,viewportHeight:se,scrollPosition:fe,color:i,expandGlyphColor:i,expandGlyphSize:f??De,renderStartIndex:Ne,renderEndIndex:Me,lookaheadEndIndex:Pe})})}),[ye,se,Ne,Me,Pe,fe,he,i,d,f,re]),ze=u.useCallback(g=>K[g],[K]);return e.length===0?T.jsx("div",{className:Re,style:_e}):T.jsx("div",{ref:A,className:Re,style:_e,role:"tree",children:T.jsx(Ue.VirtualScroll,{ref:t,itemCount:K.length,getItem:ze,getItemHeight:Ge,viewportSize:se,overscanCount:Q,onScroll:Xe,onRangeChange:Ve,className:C,background:T.jsxs(T.Fragment,{children:[Je,G]}),initialScrollIndex:ve,initialScrollOffset:W,onItemFocus:Ye,callbackThrottleMs:le,contentInsets:He,scrollBarOptions:Be,behaviorOptions:We,children:g=>g&&T.jsx(Se,{entry:g.entry,indentLevel:g.indentLevel,rowHeight:g.rowHeight,isDirOpen:ie,parentIsLast:g.parentIsLast,renderChildren:!1,expansion:{toggleDirectory:r,onToggleDirectoryRecursive:qe},selection:{onEntryClick:_,selectedPath:I??null,mode:c,selectedItems:y,onSelectionChange:p},visual:{iconOverrides:E,showExpandIcons:b,showDirectoryIcons:P,showFileIcons:v,useCanvasExpandIcons:d,expandIconSize:f,highlightStyles:j,entryClassName:X,entryStyle:z,nameClassName:U,nameStyle:$,directoryNameClassName:V,directoryNameStyle:Z,fileNameClassName:q,fileNameStyle:ne}},g.entry.absolutePath)})})},pt=({initialExpanded:e=new Set,storageKey:r}={})=>{const[o,n]=u.useTransition(),[s,l]=u.useState(()=>{if(typeof window<"u"&&r)try{const i=window.localStorage.getItem(r);if(i){const d=JSON.parse(i);return new Set(d)}}catch(i){console.error("[useDirectoryTreeState] Error reading from localStorage",i)}return e}),a=u.useCallback(i=>{n(()=>{l(d=>{const b=new Set(d);return i(b),b})})},[]),h=u.useCallback((i,d)=>{a(b=>{for(const P of i)d(b,P)})},[a]);u.useEffect(()=>{if(r&&typeof window<"u")try{window.localStorage.setItem(r,JSON.stringify(Array.from(s)))}catch(i){console.warn(`Error setting localStorage key "${r}":`,i)}},[s,r]);const _=u.useCallback(i=>{h([i],(d,b)=>{d.has(b)?d.delete(b):d.add(b)})},[h]),I=u.useCallback(i=>{h([i],(d,b)=>{d.add(b)})},[h]),c=u.useCallback(i=>{h([i],(d,b)=>{d.delete(b)})},[h]),y=u.useCallback(i=>{h(i,(d,b)=>{d.delete(b)})},[h]),p=u.useCallback(i=>{h(i,(d,b)=>{d.add(b)})},[h]),w=u.useCallback(()=>{a(i=>{i.clear()})},[a]),k=u.useCallback(i=>s.has(i),[s]);return{expanded:s,toggle:_,expand:I,collapse:c,collapseMultiple:y,expandMultiple:p,collapseAll:w,isExpanded:k,isPending:o}};exports.DirectoryTree=yt;exports.directoryTreeClasses=Y;exports.useDirectoryTreeState=pt;
|