@aiquants/directory-tree 3.0.5 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/README.md +25 -8
  2. package/dist/src/index.d.ts +10 -0
  3. package/dist/src/index.d.ts.map +1 -1
  4. package/dist/styles/directory-tree.css +1 -1
  5. package/dist/styles/directory-tree.standalone.css +3 -0
  6. package/package.json +7 -5
  7. package/src/DirectoryTree.spec.md +473 -0
  8. package/src/DirectoryTree.tsx +978 -0
  9. package/src/DirectoryTreeGrid.tsx +261 -0
  10. package/src/TreeLine.tsx +300 -0
  11. package/src/cli.server.ts +38 -0
  12. package/src/entryRendering.tsx +131 -0
  13. package/src/gridUtils.ts +88 -0
  14. package/src/index.ts +31 -0
  15. package/src/logger.ts +162 -0
  16. package/src/styles/components.entry.css +8 -0
  17. package/src/styles/directory-tree.css +89 -0
  18. package/src/styles/standalone.entry.css +12 -0
  19. package/src/types.ts +619 -0
  20. package/src/useDirectoryTreeState.ts +133 -0
  21. package/src/useEntryInteraction.ts +74 -0
  22. package/dist/directory-tree.css +0 -1
package/README.md CHANGED
@@ -29,7 +29,7 @@ pnpm add @aiquants/directory-tree
29
29
  This package requires the following peer dependencies:
30
30
 
31
31
  ```bash
32
- npm install react react-dom @aiquants/virtualscroll tailwind-variants tailwind-merge
32
+ npm install react react-dom @aiquants/virtualscroll
33
33
  ```
34
34
 
35
35
  ## Quick Start
@@ -243,7 +243,27 @@ type DirectoryEntry = {
243
243
 
244
244
  ## Styling
245
245
 
246
- The component uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project. The component supports both light and dark themes, but theme control is managed by the calling component.
246
+ The component's hand-written classes ship in **two CSS artifacts**; choose by host type. The tree is built on `@aiquants/virtualscroll`, so that package's stylesheet is a **peer CSS dependency** — import it once alongside directory-tree. Theme control (light/dark) stays with the calling app.
247
+
248
+ - **Tailwind v4 host** — import the components-only build in `layer(components)`, do the same for the virtualscroll peer build, and let your Tailwind build generate the JSX utilities from the package source:
249
+
250
+ ```css
251
+ /* app tailwind.css */
252
+ @import "@aiquants/virtualscroll/styles/virtualscroll.css" layer(components);
253
+ @import "@aiquants/directory-tree/styles/directory-tree.css" layer(components);
254
+ @source "../node_modules/@aiquants/directory-tree/src/**/*.{ts,tsx}";
255
+ /* monorepo: @source "../../../../packages/directory-tree/src/**/*.{ts,tsx}"; */
256
+ ```
257
+
258
+ `directory-tree.css` (Artifact A) carries only the hand-written `.dt-*` classes — no `:root` theme variables, no Tailwind utilities, no preflight — and it does **not** embed the virtualscroll stylesheet (the host imports virtualscroll's own Artifact A once, avoiding a duplicated, possibly stale copy). Do not also `@import` the standalone build here — the duplicated utilities flip the base/variant cascade order.
259
+
260
+ - **Non-Tailwind host** — import the single self-contained standalone build; it bundles the `.dt-*` classes, every JSX utility, and the virtualscroll peer CSS for convenience:
261
+
262
+ ```css
263
+ @import "@aiquants/directory-tree/styles/directory-tree.standalone.css";
264
+ ```
265
+
266
+ Dark styles key off the `.dark` class on `<html>`.
247
267
 
248
268
  ### Theme Control
249
269
 
@@ -381,12 +401,9 @@ const columns: DirectoryTreeColumn[] = useMemo(() => [
381
401
 
382
402
  Grid mode exposes `role="treegrid"` / `row` / `gridcell` / `columnheader` semantics. Note that
383
403
  `visual.removeRootIndent` is ignored in grid mode (the frozen name column must start at x=0), and
384
- `grid.scrollBarWidth` defaults to the VirtualScroll scrollbar width so columns stay aligned. Import
385
- the base grid styles alongside the component CSS:
386
-
387
- ```ts
388
- import '@aiquants/directory-tree/styles/directory-tree.css';
389
- ```
404
+ `grid.scrollBarWidth` defaults to the VirtualScroll scrollbar width so columns stay aligned. The
405
+ grid styles are part of the component CSS artifacts — wire them up as shown in [Styling](#styling)
406
+ (they are not a separate import).
390
407
 
391
408
  ### Large Datasets
392
409
 
package/dist/src/index.d.ts CHANGED
@@ -1,3 +1,13 @@
1
+ /**
2
+ * @fileoverview Directory Tree Component Library
3
+ * @package @aiquants/directory-tree
4
+ *
5
+ * This module provides a comprehensive directory tree component for React applications.
6
+ * The component supports virtualization for performance, file selection, and theming.
7
+ *
8
+ * このモジュールは React アプリケーション用の包括的なディレクトリツリーコンポーネントを提供します。
9
+ * このコンポーネントはパフォーマンス向上のための仮想化、ファイル選択、およびテーマ設定をサポートしています。
10
+ */
1
11
  export { DirectoryTree, directoryTreeClasses } from './DirectoryTree.tsx';
2
12
  export type { DirectoryEntry, DirectoryEntryItemProps, DirectoryTreeClickEvent, DirectoryTreeColumn, DirectoryTreeGrid, DirectoryTreeIconOverrides, DirectoryTreeIconRenderContext, DirectoryTreeIconRenderer, DirectoryTreeProps, DirectoryTreeState, DirectoryTreeVirtualScrollOptions, HighlightStyles, ItemHeight, TreeLineItemInfo, TreeLineProps, UseDirectoryTreeStateProps, } from './types.ts';
3
13
  export { useDirectoryTreeState } from './useDirectoryTreeState.ts';
package/dist/src/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACzE,YAAY,EACR,cAAc,EACd,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,8BAA8B,EAC9B,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,iCAAiC,EACjC,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,0BAA0B,GAC7B,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACzE,YAAY,EACR,cAAc,EACd,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,8BAA8B,EAC9B,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,iCAAiC,EACjC,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,0BAA0B,GAC7B,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA"}
package/dist/styles/directory-tree.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
- @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-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--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{@layer 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{.dt-grid{flex-direction:column;display:flex;position:relative}.dt-grid-body{flex:1;min-height:0;position:relative}.dt-grid-header,.dt-grid-footer,.dt-grid-row,.dt-grid-hscrollbar-row{align-items:stretch;display:flex}.dt-grid-name-cell,.dt-grid-name-header,.dt-grid-name-footer{z-index:1;flex-shrink:0;align-items:center;display:flex;position:relative;overflow:hidden}.dt-grid-numeric-viewport{flex:1;position:relative;overflow:hidden}.dt-grid-numeric-track{transform:translateX(calc(-1 * var(--dt-hscroll,0px)));will-change:transform;display:grid}.dt-grid-cell{white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:0 8px;display:flex;overflow:hidden}.dt-grid-cell--right{text-align:right;justify-content:flex-end}.dt-grid-cell--center{text-align:center;justify-content:center}.dt-grid-name-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dt-grid-scrollbar-spacer{flex-shrink:0}}}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.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}.grid{display:grid}.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{flex-shrink:1}.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}.resize{resize:both}.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-1{padding-inline:calc(var(--spacing) * 1)}.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-600{color:var(--color-gray-600)}.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-300{color:var(--color-gray-300)}.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}
2
+ @layer utilities{.dt-grid{flex-direction:column;display:flex;position:relative}.dt-grid-body{flex:1;min-height:0;position:relative}.dt-grid-header,.dt-grid-footer,.dt-grid-row,.dt-grid-hscrollbar-row{align-items:stretch;display:flex}.dt-grid-name-cell,.dt-grid-name-header,.dt-grid-name-footer{z-index:1;flex-shrink:0;align-items:center;display:flex;position:relative;overflow:hidden}.dt-grid-numeric-viewport{flex:1;position:relative;overflow:hidden}.dt-grid-numeric-track{transform:translateX(calc(-1 * var(--dt-hscroll,0px)));will-change:transform;display:grid}.dt-grid-cell{white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:0 8px;display:flex;overflow:hidden}.dt-grid-cell--right{text-align:right;justify-content:flex-end}.dt-grid-cell--center{text-align:center;justify-content:center}.dt-grid-name-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dt-grid-scrollbar-spacer{flex-shrink:0}}
package/dist/styles/directory-tree.standalone.css ADDED
@@ -0,0 +1,3 @@
1
+ /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
2
+ /*! @aiquants/directory-tree standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
3
+ @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-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-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--spacing:.25rem;--font-weight-medium:500;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base;@layer components{@layer 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}.dt-grid{flex-direction:column;display:flex;position:relative}.dt-grid-body{flex:1;min-height:0;position:relative}.dt-grid-header,.dt-grid-footer,.dt-grid-row,.dt-grid-hscrollbar-row{align-items:stretch;display:flex}.dt-grid-name-cell,.dt-grid-name-header,.dt-grid-name-footer{z-index:1;flex-shrink:0;align-items:center;display:flex;position:relative;overflow:hidden}.dt-grid-numeric-viewport{flex:1;position:relative;overflow:hidden}.dt-grid-numeric-track{transform:translateX(calc(-1 * var(--dt-hscroll,0px)));will-change:transform;display:grid}.dt-grid-cell{white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:0 8px;display:flex;overflow:hidden}.dt-grid-cell--right{text-align:right;justify-content:flex-end}.dt-grid-cell--center{text-align:center;justify-content:center}.dt-grid-name-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dt-grid-scrollbar-spacer{flex-shrink:0}}}@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.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)}.flex{display:flex}.grid{display:grid}.inline{display:inline}.table{display:table}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-full{height:100%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.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}.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)}}.px-1{padding-inline:calc(var(--spacing) * 1)}.pr-\[3px\]{padding-right:3px}.pb-\[5px\]{padding-bottom:5px}.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-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.opacity-70{opacity:.7}.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)}}}.dark\:bg-blue-400\/15:where(.dark,.dark *){background-color:#54a2ff26}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-400\/15:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-400) 15%, transparent)}}.dark\:bg-blue-400\/25:where(.dark,.dark *){background-color:#54a2ff40}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-400\/25:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-400) 25%, transparent)}}.dark\:text-blue-300:where(.dark,.dark *){color:var(--color-blue-300)}.dark\:text-blue-400:where(.dark,.dark *){color:var(--color-blue-400)}.dark\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\:text-gray-300:where(.dark,.dark *){color:var(--color-gray-300)}.dark\:text-gray-400:where(.dark,.dark *){color:var(--color-gray-400)}.dark\:shadow-\[0_0_0_1px_rgba\(96\,165\,250\,0\.4\)\]:where(.dark,.dark *){--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:where(.dark,.dark *):hover{background-color:#e5e7eb1a}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-gray-200\/10:where(.dark,.dark *):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-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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aiquants/directory-tree",
3
- "version": "3.0.5",
3
+ "version": "3.1.0",
4
4
  "description": "High-performance directory tree component for React with virtual scrolling and file selection",
5
5
  "sideEffects": [
6
6
  "**/*.css"
@@ -16,10 +16,12 @@
16
16
  "require": "./dist/index.cjs",
17
17
  "default": "./dist/index.js"
18
18
  },
19
- "./styles/directory-tree.css": "./dist/styles/directory-tree.css"
19
+ "./styles/directory-tree.css": "./dist/styles/directory-tree.css",
20
+ "./styles/directory-tree.standalone.css": "./dist/styles/directory-tree.standalone.css"
20
21
  },
21
22
  "files": [
22
23
  "dist",
24
+ "src",
23
25
  "README.md",
24
26
  "LICENSE"
25
27
  ],
@@ -31,7 +33,7 @@
31
33
  "peerDependencies": {
32
34
  "react": "^19.2.7",
33
35
  "react-dom": "^19.2.7",
34
- "@aiquants/virtualscroll": "^1.18.5"
36
+ "@aiquants/virtualscroll": "^1.19.0"
35
37
  },
36
38
  "devDependencies": {
37
39
  "@tailwindcss/cli": "^4.1.18",
@@ -52,7 +54,7 @@
52
54
  "vite": "^7.2.7",
53
55
  "vite-plugin-dts": "^4.5.4",
54
56
  "vitest": "^3.2.4",
55
- "@aiquants/virtualscroll": "1.18.5"
57
+ "@aiquants/virtualscroll": "1.19.0"
56
58
  },
57
59
  "keywords": [
58
60
  "react",
@@ -74,7 +76,7 @@
74
76
  },
75
77
  "scripts": {
76
78
  "build": "vite build && vite build --config vite.config.cli.ts && pnpm build:css",
77
- "build:css": "tailwindcss -i src/styles/tailwind.css -o dist/styles/directory-tree.css --minify --drafts custom-properties",
79
+ "build:css": "tailwindcss -i src/styles/components.entry.css -o dist/styles/directory-tree.css --minify && tailwindcss -i src/styles/standalone.entry.css -o dist/styles/directory-tree.standalone.css --minify",
78
80
  "dev": "vite build --watch",
79
81
  "watch": "vite build --watch",
80
82
  "demo:dev": "cd demo && pnpm run dev",