@aiquants/directory-tree 3.0.4 → 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.
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
 
@@ -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';
@@ -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"}
@@ -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}}
@@ -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.4",
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.3"
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.3"
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",
@@ -92,8 +94,8 @@
92
94
  "license-check": "pnpm dlx license-checker --production --onlyAllow \"MIT;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;Unlicense\"",
93
95
  "license-check:json": "pnpm dlx license-checker --production --onlyAllow \"MIT;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;Unlicense\" --json",
94
96
  "clean": "rimraf dist",
95
- "publish:patch": "pnpm version patch --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
96
- "publish:minor": "pnpm version minor --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
97
- "publish:major": "pnpm version major --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks"
97
+ "publish:patch": "pnpm run typecheck && pnpm run --if-present test && pnpm version patch --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
98
+ "publish:minor": "pnpm run typecheck && pnpm run --if-present test && pnpm version minor --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
99
+ "publish:major": "pnpm run typecheck && pnpm run --if-present test && pnpm version major --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks"
98
100
  }
99
101
  }