@aiquants/directory-tree 3.0.4 → 3.1.0

package/src/DirectoryTreeGrid.tsx

@@ -0,0 +1,261 @@
+/**
+ * @module DirectoryTreeGrid
+ * @description Row, header and footer renderers for the TreeGrid (columns) mode. The name/tree
+ *              column is frozen on the left; numeric columns render in a horizontally-scrollable
+ *              track translated by the shared `--dt-hscroll` CSS variable (set on the container),
+ *              so header / body rows / footer stay aligned without per-row re-render.
+ *              TreeGrid（列）モードの行・ヘッダ・フッタ描画。名前列は凍結、数値列は共有変数で横移動。
+ */
+// biome-ignore-all lint/a11y/useSemanticElements: 仮想スクロールの treegrid は絶対配置行を使うため native table 要素にできない。ARIA ロールで意味を提供する。
+// biome-ignore-all lint/a11y/useFocusableInteractive: treegrid の row/gridcell は widget ロールではなくフォーカス不要。フォーカスは行(tabIndex=0)が担う。
+import type { CSSProperties, MouseEvent, ReactNode } from "react"
+import { memo, useState } from "react"
+import { twMerge } from "tailwind-merge"
+import { directoryTreeClasses, getFileExtension, INDENT_SIZE, resolveEntryIcon, resolveExpandIcon } from "./entryRendering.tsx"
+import type { DirectoryEntry, DirectoryTreeColumn, DirectoryTreeIconOverrides, HighlightStyles } from "./types.ts"
+import { useEntryInteraction } from "./useEntryInteraction.ts"
+
+/** Visual options shared by grid rows (mirrors the subset of DirectoryTree visual props needed here). */
+export type GridRowVisual = {
+    iconOverrides?: DirectoryTreeIconOverrides
+    showExpandIcons?: boolean
+    showDirectoryIcons?: boolean
+    showFileIcons?: boolean
+    useCanvasExpandIcons?: boolean
+    expandIconSize?: number
+    highlightStyles?: HighlightStyles
+}
+
+/** Resolves the per-column alignment class. / 列の寄せクラスを解決。 */
+const alignClass = (align?: DirectoryTreeColumn["align"]): string => (align === "right" ? "dt-grid-cell--right" : align === "center" ? "dt-grid-cell--center" : "")
+
+/** True when the entry is an expanded directory. Files short-circuit without querying isDirOpen. / 展開済みディレクトリなら true。 */
+export const isEntryExpanded = (entry: DirectoryEntry, isDirOpen: (path: string) => boolean): boolean => entry.children !== undefined && isDirOpen(entry.absolutePath)
+
+/** Shared track style for header / body / footer numeric regions (identical geometry ⇒ alignment). */
+const numericTrackStyle = (numericTotal: number, numericTemplate: string): CSSProperties => ({
+    width: numericTotal,
+    gridTemplateColumns: numericTemplate,
+})
+
+export type DirectoryTreeGridRowProps = {
+    entry: DirectoryEntry
+    indentLevel: number
+    rowHeight: number
+    isDirOpen: (path: string) => boolean
+    columns: DirectoryTreeColumn[]
+    numericTemplate: string
+    numericTotal: number
+    nameWidth: number
+    rowClassName?: string | ((entry: DirectoryEntry) => string)
+    selection: {
+        selectedPath: string | null
+        mode?: "none" | "single" | "multiple"
+        selectedItems?: Set<string>
+        onEntryClick: (event: import("./types.ts").DirectoryTreeClickEvent) => void
+        onSelectionChange?: (entry: DirectoryEntry, isSelected: boolean) => void
+    }
+    expansion: {
+        toggleDirectory: (path: string) => void
+        onToggleDirectoryRecursive: (entry: DirectoryEntry) => void
+    }
+    visual: GridRowVisual
+}
+
+/**
+ * @component DirectoryTreeGridRow
+ * @description A single TreeGrid row: frozen name cell (indent + glyph + icon + label) plus a
+ *              horizontally-scrollable numeric track. Memoized; the `--dt-hscroll` variable is not
+ *              a prop, so horizontal scrolling never re-renders rows.
+ */
+export const DirectoryTreeGridRow = memo<DirectoryTreeGridRowProps>(
+    ({
+        entry,
+        indentLevel,
+        rowHeight,
+        isDirOpen,
+        columns,
+        numericTemplate,
+        numericTotal,
+        nameWidth,
+        rowClassName,
+        selection: { onEntryClick, selectedPath, mode: selectionMode = "none", selectedItems, onSelectionChange },
+        expansion: { toggleDirectory, onToggleDirectoryRecursive },
+        visual: { iconOverrides, showExpandIcons = true, showDirectoryIcons = true, showFileIcons = true, useCanvasExpandIcons = false, expandIconSize, highlightStyles },
+    }) => {
+        const [isHovered, setIsHovered] = useState(false)
+
+        const isDirectory = entry.children !== undefined
+        const isExpanded = isDirectory && isDirOpen(entry.absolutePath)
+        const isSelected = entry.absolutePath === selectedPath
+        const isItemSelected = !isDirectory && Boolean(selectedItems?.has(entry.absolutePath))
+        const extension = isDirectory ? undefined : getFileExtension(entry.name)
+
+        const handleInteraction = useEntryInteraction({ entry, isDirectory, isExpanded, isItemSelected, selectionMode, onSelectionChange, onEntryClick, toggleDirectory, onToggleDirectoryRecursive })
+
+        const hoverClass = isHovered ? (highlightStyles?.hoverClassName !== undefined ? highlightStyles.hoverClassName : directoryTreeClasses.entryHover) : ""
+        const selectedClass = (() => {
+            if (isDirectory) {
+                if (isSelected) return highlightStyles?.directorySelectedClassName !== undefined ? highlightStyles.directorySelectedClassName : directoryTreeClasses.entrySelected
+            } else if (isSelected || isItemSelected) {
+                if (highlightStyles?.itemSelectedClassName !== undefined) return highlightStyles.itemSelectedClassName
+                return twMerge(isSelected && directoryTreeClasses.entrySelected, isItemSelected && directoryTreeClasses.entryItemSelected)
+            }
+            return ""
+        })()
+
+        const resolvedRowClass = typeof rowClassName === "function" ? rowClassName(entry) : rowClassName
+        const rowClasses = twMerge("dt-grid-row cursor-pointer select-none", hoverClass, selectedClass, resolvedRowClass, entry.className)
+
+        const expandIconClasses = twMerge(directoryTreeClasses.expandIcon, (isSelected || isItemSelected) && directoryTreeClasses.expandIconSelected)
+        const typeIconClasses = twMerge(directoryTreeClasses.typeIcon, (isSelected || isItemSelected) && directoryTreeClasses.typeIconSelected)
+        const nameLabelClasses = twMerge("dt-grid-name-label ml-1", "text-gray-700 dark:text-gray-200", isDirectory && directoryTreeClasses.nameDirectory, (isSelected || isItemSelected) && directoryTreeClasses.nameSelected)
+
+        const expandIconContent = resolveExpandIcon({ isDirectory, isExpanded, showExpandIcons, useCanvasExpandIcons, expandIconSize })
+        const resolvedIcon = (isDirectory ? showDirectoryIcons : showFileIcons) ? resolveEntryIcon({ entry, isDirectory, isExpanded, isSelected, isItemSelected, extension }, iconOverrides) : null
+
+        const ctx = { indentLevel, isDirectory, isExpanded }
+        const [nameColumn, ...numericColumns] = columns
+        const nameContent = nameColumn?.render ? nameColumn.render(entry, ctx) : (entry.label ?? entry.name)
+
+        const customHighlightStyle: CSSProperties = {
+            ...(isHovered ? highlightStyles?.hoverStyle : {}),
+            ...(isDirectory && isSelected ? highlightStyles?.directorySelectedStyle : {}),
+            ...(!isDirectory && (isSelected || isItemSelected) ? highlightStyles?.itemSelectedStyle : {}),
+        }
+
+        return (
+            <div
+                className={rowClasses}
+                style={{ height: rowHeight, ...customHighlightStyle, ...entry.style }}
+                role="row"
+                aria-expanded={isDirectory ? isExpanded : undefined}
+                aria-level={indentLevel + 1}
+                data-entry-type={isDirectory ? "directory" : "file"}
+                data-entry-expanded={isDirectory ? String(isExpanded) : undefined}
+                data-entry-selected={isSelected ? "true" : undefined}
+                data-entry-item-selected={isItemSelected ? "true" : undefined}
+                onClick={handleInteraction}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                onKeyDown={(e) => e.key === "Enter" && handleInteraction(e as unknown as MouseEvent<HTMLDivElement>)}
+                tabIndex={0}>
+                {/* Frozen name/tree cell — indent applied here only. / 凍結名前セル（インデントはここだけ）。 */}
+                <div className={twMerge("dt-grid-name-cell", nameColumn?.className)} role="gridcell" style={{ width: nameWidth, paddingLeft: Math.max(0, indentLevel * INDENT_SIZE) }}>
+                    {(showExpandIcons || useCanvasExpandIcons) && <span className={expandIconClasses}>{expandIconContent}</span>}
+                    {(isDirectory ? showDirectoryIcons : showFileIcons) && <span className={typeIconClasses}>{resolvedIcon}</span>}
+                    <span className={nameLabelClasses}>{nameContent}</span>
+                </div>
+                {/* Scrollable numeric region. / 横スクロールする数値領域。 */}
+                {numericColumns.length > 0 && (
+                    <div className="dt-grid-numeric-viewport">
+                        <div className="dt-grid-numeric-track" style={numericTrackStyle(numericTotal, numericTemplate)}>
+                            {numericColumns.map((column) => (
+                                <div key={column.key} className={twMerge("dt-grid-cell", alignClass(column.align), column.className)} role="gridcell">
+                                    {column.render ? column.render(entry, ctx) : null}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        )
+    },
+    (prev, next) => {
+        if (prev.entry !== next.entry) return false
+        const prevExpanded = isEntryExpanded(prev.entry, prev.isDirOpen)
+        const nextExpanded = isEntryExpanded(next.entry, next.isDirOpen)
+        return (
+            prev.indentLevel === next.indentLevel &&
+            prev.rowHeight === next.rowHeight &&
+            prevExpanded === nextExpanded &&
+            prev.columns === next.columns &&
+            prev.numericTemplate === next.numericTemplate &&
+            prev.numericTotal === next.numericTotal &&
+            prev.nameWidth === next.nameWidth &&
+            prev.rowClassName === next.rowClassName &&
+            prev.selection.selectedPath === next.selection.selectedPath &&
+            prev.selection.mode === next.selection.mode &&
+            prev.selection.selectedItems === next.selection.selectedItems &&
+            prev.visual === next.visual
+        )
+    },
+)
+DirectoryTreeGridRow.displayName = "DirectoryTreeGridRow"
+
+/** Shared frozen-name + numeric-track layout used by header and footer. / ヘッダ/フッタ共通レイアウト。 */
+const GridEdgeRow = ({
+    kind,
+    columns,
+    numericTemplate,
+    numericTotal,
+    nameWidth,
+    scrollBarWidth,
+    className,
+    nameContent,
+    renderCell,
+}: {
+    kind: "header" | "footer"
+    columns: DirectoryTreeColumn[]
+    numericTemplate: string
+    numericTotal: number
+    nameWidth: number
+    scrollBarWidth: number
+    className?: string
+    nameContent: ReactNode
+    renderCell: (column: DirectoryTreeColumn) => ReactNode
+}) => {
+    const [, ...numericColumns] = columns
+    const nameClass = kind === "header" ? "dt-grid-name-header" : "dt-grid-name-footer"
+    const rowClass = kind === "header" ? "dt-grid-header" : "dt-grid-footer"
+    const cellRole = kind === "header" ? "columnheader" : "gridcell"
+    return (
+        <div className={twMerge(rowClass, "text-gray-600 dark:text-gray-300", className)} role="row">
+            <div className={twMerge(nameClass, "px-1", columns[0]?.className)} role={cellRole} style={{ width: nameWidth }}>
+                {nameContent}
+            </div>
+            {numericColumns.length > 0 && (
+                <div className="dt-grid-numeric-viewport">
+                    <div className="dt-grid-numeric-track" style={numericTrackStyle(numericTotal, numericTemplate)}>
+                        {numericColumns.map((column) => (
+                            <div key={column.key} className={twMerge("dt-grid-cell", alignClass(column.align), column.className)} role={cellRole}>
+                                {renderCell(column)}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+            {/* Right spacer aligns the numeric viewport with the body (reduced by the vertical scrollbar). */}
+            <div className="dt-grid-scrollbar-spacer" style={{ width: scrollBarWidth }} aria-hidden="true" />
+        </div>
+    )
+}
+
+export type DirectoryTreeGridHeaderRowProps = {
+    columns: DirectoryTreeColumn[]
+    numericTemplate: string
+    numericTotal: number
+    nameWidth: number
+    scrollBarWidth: number
+    className?: string
+}
+
+export const DirectoryTreeGridHeaderRow = ({ columns, className, ...rest }: DirectoryTreeGridHeaderRowProps) => <GridEdgeRow kind="header" columns={columns} className={className} nameContent={columns[0]?.header ?? null} renderCell={(column) => column.header ?? null} {...rest} />
+
+export type DirectoryTreeGridFooterRowProps = {
+    columns: DirectoryTreeColumn[]
+    numericTemplate: string
+    numericTotal: number
+    nameWidth: number
+    scrollBarWidth: number
+    /** All nodes of the tree (collapsed included), for footer aggregation. / フッタ集計用の全ノード。 */
+    allEntries: DirectoryEntry[]
+    className?: string
+}
+
+/** Resolves a column footer that may be a node or an aggregator over all entries. / フッタ解決。 */
+const resolveFooter = (footer: DirectoryTreeColumn["footer"], allEntries: DirectoryEntry[]): ReactNode => (typeof footer === "function" ? footer(allEntries) : (footer ?? null))
+
+export const DirectoryTreeGridFooterRow = ({ columns, allEntries, className, ...rest }: DirectoryTreeGridFooterRowProps) => (
+    <GridEdgeRow kind="footer" columns={columns} className={className} nameContent={resolveFooter(columns[0]?.footer, allEntries)} renderCell={(column) => resolveFooter(column.footer, allEntries)} {...rest} />
+)

package/src/TreeLine.tsx

@@ -0,0 +1,300 @@
+import { memo, useCallback, useEffect, useRef } from "react"
+import type { TreeLineGlyph, TreeLineProps, TreeLineSegment } from "./types.ts"
+
+/**
+ * Collects the segments that fall inside the requested index window.
+ *
+ * 指定されたインデックス範囲に含まれるセグメントを収集する。
+ *
+ * @param segmentsByItem - アイテムごとのセグメント配列。
+ * @param startIndex - 開始インデックス。
+ * @param endExclusive - 終了インデックス (排他的)。
+ * @returns 表示対象のセグメント配列。
+ */
+const collectVisibleSegments = (segmentsByItem: TreeLineSegment[][], startIndex: number, endExclusive: number): TreeLineSegment[] => {
+    const collected: TreeLineSegment[] = []
+    for (let index = startIndex; index < endExclusive; index++) {
+        const group = segmentsByItem[index]
+        if (!group || group.length === 0) {
+            continue
+        }
+        for (const segment of group) {
+            collected.push(segment)
+        }
+    }
+    return collected
+}
+
+/**
+ * Collects the glyphs that fall inside the requested index window.
+ *
+ * 指定されたインデックス範囲に含まれるグリフを収集する。
+ *
+ * @param glyphsByItem - アイテムごとのグリフ配列。
+ * @param startIndex - 開始インデックス。
+ * @param endExclusive - 終了インデックス (排他的)。
+ * @returns 表示対象のグリフ配列。
+ */
+const collectVisibleGlyphs = (glyphsByItem: TreeLineGlyph[][], startIndex: number, endExclusive: number): TreeLineGlyph[] => {
+    const collected: TreeLineGlyph[] = []
+    for (let index = startIndex; index < endExclusive; index++) {
+        const group = glyphsByItem[index]
+        if (!group || group.length === 0) {
+            continue
+        }
+        for (const glyph of group) {
+            collected.push(glyph)
+        }
+    }
+    return collected
+}
+
+/**
+ * Adjusts the canvas backing store size to match CSS dimensions and device pixel ratio.
+ *
+ * Canvas の描画領域を CSS サイズとデバイスピクセル比に合わせて調整する。
+ *
+ * @param canvas - 対象のキャンバス要素。
+ * @param width - CSS 上の幅。
+ * @param height - CSS 上の高さ。
+ * @param devicePixelRatio - デバイスピクセル比。
+ */
+const resizeCanvas = (canvas: HTMLCanvasElement, width: number, height: number, devicePixelRatio: number): void => {
+    const pixelWidth = Math.max(1, Math.floor(width * devicePixelRatio))
+    const pixelHeight = Math.max(1, Math.floor(height * devicePixelRatio))
+    if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+        canvas.width = pixelWidth
+        canvas.height = pixelHeight
+    }
+    const style = canvas.style
+    if (style.width !== `${width}px`) {
+        style.width = `${width}px`
+    }
+    if (style.height !== `${height}px`) {
+        style.height = `${height}px`
+    }
+}
+
+/**
+ * Draws the tree line segments on the provided canvas context.
+ *
+ * 指定のキャンバスコンテキストにツリーラインを描画する。
+ *
+ * @param context - 2D コンテキスト。
+ * @param segments - 描画対象のセグメント群。
+ * @param strokeWidth - 線の太さ。
+ */
+const drawSegments = (context: CanvasRenderingContext2D, segments: TreeLineSegment[], strokeWidth: number): void => {
+    context.lineWidth = strokeWidth
+    context.beginPath()
+    for (const segment of segments) {
+        context.moveTo(segment.x1, segment.y1)
+        context.lineTo(segment.x2, segment.y2)
+    }
+    context.stroke()
+}
+
+/**
+ * Generates an rgba() string with alpha applied to a hex color.
+ *
+ * 16 進数カラーにアルファ値を適用した rgba() 文字列を生成する。
+ *
+ * @param color - 元のカラー文字列。
+ * @param alpha - 適用するアルファ値。
+ * @returns rgba() 形式のカラー文字列。解析できない場合は null。
+ */
+const deriveRgbaWithAlpha = (color: string, alpha: number): string | null => {
+    const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())
+    if (!match) {
+        return null
+    }
+    let hex = match[1]
+    if (hex.length === 3) {
+        hex = hex
+            .split("")
+            .map((digit) => digit + digit)
+            .join("")
+    }
+    const red = Number.parseInt(hex.slice(0, 2), 16)
+    const green = Number.parseInt(hex.slice(2, 4), 16)
+    const blue = Number.parseInt(hex.slice(4, 6), 16)
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+/**
+ * Draws modern circular glyphs representing expand/collapse states.
+ *
+ * 展開/折りたたみ状態を表す円形グリフを描画する。
+ *
+ * @param context - 2D コンテキスト。
+ * @param glyphs - グリフ配列。
+ * @param color - ベースとなるカラー。
+ * @param overrideSize - サイズ上書き値。
+ */
+const drawGlyphs = (context: CanvasRenderingContext2D, glyphs: TreeLineGlyph[], color: string, overrideSize?: number): void => {
+    if (glyphs.length === 0) {
+        return
+    }
+    const fillColor = deriveRgbaWithAlpha(color, 0.14)
+    const previousStrokeStyle = context.strokeStyle
+    const previousFillStyle = context.fillStyle
+    const previousLineWidth = context.lineWidth
+    const previousLineCap = context.lineCap
+    const previousLineJoin = context.lineJoin
+    context.strokeStyle = color
+    context.lineCap = "round"
+    context.lineJoin = "round"
+    for (const glyph of glyphs) {
+        const size = overrideSize ?? glyph.size
+        const radius = Math.max(0, size / 2)
+        const ringWidth = Math.max(1, Math.round(size * 0.08))
+        const symbolWidth = Math.max(1, Math.round(size * 0.14))
+        const innerRadius = Math.max(0, radius - ringWidth * 0.8)
+        const symbolLength = Math.max(0, innerRadius * 0.55)
+        if (fillColor) {
+            context.fillStyle = fillColor
+            context.beginPath()
+            context.arc(glyph.centerX, glyph.centerY, innerRadius, 0, Math.PI * 2)
+            context.fill()
+        }
+        context.lineWidth = ringWidth
+        context.beginPath()
+        context.arc(glyph.centerX, glyph.centerY, Math.max(0, radius - ringWidth * 0.3), 0, Math.PI * 2)
+        context.stroke()
+        context.lineWidth = symbolWidth
+        context.beginPath()
+        context.moveTo(glyph.centerX - symbolLength, glyph.centerY)
+        context.lineTo(glyph.centerX + symbolLength, glyph.centerY)
+        context.stroke()
+        if (!glyph.isExpanded) {
+            context.beginPath()
+            context.moveTo(glyph.centerX, glyph.centerY - symbolLength)
+            context.lineTo(glyph.centerX, glyph.centerY + symbolLength)
+            context.stroke()
+        }
+    }
+    context.strokeStyle = previousStrokeStyle
+    context.fillStyle = previousFillStyle
+    context.lineWidth = previousLineWidth
+    context.lineCap = previousLineCap
+    context.lineJoin = previousLineJoin
+}
+
+/**
+ * Canvas based tree line renderer that repaints on animation frames.
+ *
+ * アニメーションフレーム単位で再描画する Canvas ベースのツリーラインレンダラ。
+ */
+const TreeLine = memo<TreeLineProps>(({ segmentsByItem, glyphsByItem, itemHeight, width, viewportHeight, scrollPosition, color = "#a0aec0", strokeWidth = 1, renderStartIndex, renderEndIndex, lookaheadEndIndex, devicePixelRatio, expandGlyphColor, expandGlyphSize }) => {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null)
+    const animationFrameRef = useRef<number | null>(null)
+    const latestStateRef = useRef({
+        segmentsByItem,
+        glyphsByItem,
+        itemHeight,
+        width,
+        viewportHeight,
+        scrollPosition,
+        color,
+        strokeWidth,
+        renderStartIndex,
+        renderEndIndex,
+        lookaheadEndIndex,
+        devicePixelRatio,
+        expandGlyphColor,
+        expandGlyphSize,
+    })
+    const renderFrame = useCallback(() => {
+        animationFrameRef.current = null
+        const canvas = canvasRef.current
+        if (!canvas) {
+            return
+        }
+        const context = canvas.getContext("2d")
+        if (!context) {
+            return
+        }
+        const state = latestStateRef.current
+        if (state.width <= 0 || state.viewportHeight <= 0) {
+            context.clearRect(0, 0, canvas.width, canvas.height)
+            return
+        }
+        const pixelRatio = Number.isFinite(state.devicePixelRatio ?? NaN) ? (state.devicePixelRatio as number) : typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1
+        resizeCanvas(canvas, state.width, state.viewportHeight, pixelRatio)
+        const totalItems = state.segmentsByItem.length
+        const startIndex = (() => {
+            if (typeof state.renderStartIndex === "number" && Number.isFinite(state.renderStartIndex)) {
+                return Math.max(0, Math.floor(state.renderStartIndex))
+            }
+            return Math.max(0, Math.floor(state.scrollPosition / state.itemHeight))
+        })()
+        const defaultEndExclusive = Math.min(totalItems, Math.ceil((state.scrollPosition + state.viewportHeight) / state.itemHeight))
+        const endExclusive = (() => {
+            if (typeof state.renderEndIndex === "number" && Number.isFinite(state.renderEndIndex)) {
+                const inclusive = Math.floor(state.renderEndIndex)
+                return Math.max(Math.min(totalItems, inclusive + 1), startIndex)
+            }
+            return Math.max(defaultEndExclusive, startIndex)
+        })()
+        const lookaheadExclusive = (() => {
+            if (typeof state.lookaheadEndIndex === "number" && Number.isFinite(state.lookaheadEndIndex)) {
+                const inclusive = Math.floor(state.lookaheadEndIndex)
+                const candidate = Math.min(totalItems, inclusive + 1)
+                return Math.max(candidate, endExclusive)
+            }
+            return Math.max(defaultEndExclusive, endExclusive)
+        })()
+        const segments = collectVisibleSegments(state.segmentsByItem, startIndex, lookaheadExclusive)
+        const glyphs = collectVisibleGlyphs(state.glyphsByItem, startIndex, lookaheadExclusive)
+        context.save()
+        context.scale(pixelRatio, pixelRatio)
+        context.clearRect(0, 0, state.width, state.viewportHeight)
+        context.translate(0, -state.scrollPosition)
+        context.strokeStyle = state.color
+        drawSegments(context, segments, state.strokeWidth)
+        drawGlyphs(context, glyphs, state.expandGlyphColor ?? state.color, state.expandGlyphSize)
+        context.restore()
+    }, [])
+
+    const scheduleRender = useCallback(() => {
+        if (animationFrameRef.current !== null) {
+            return
+        }
+        animationFrameRef.current = window.requestAnimationFrame(renderFrame)
+    }, [renderFrame])
+
+    useEffect(() => {
+        latestStateRef.current = {
+            segmentsByItem,
+            glyphsByItem,
+            itemHeight,
+            width,
+            viewportHeight,
+            scrollPosition,
+            color,
+            strokeWidth,
+            renderStartIndex,
+            renderEndIndex,
+            lookaheadEndIndex,
+            devicePixelRatio,
+            expandGlyphColor,
+            expandGlyphSize,
+        }
+        scheduleRender()
+    }, [segmentsByItem, glyphsByItem, itemHeight, width, viewportHeight, scrollPosition, color, strokeWidth, renderStartIndex, renderEndIndex, lookaheadEndIndex, devicePixelRatio, expandGlyphColor, expandGlyphSize, scheduleRender])
+
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current !== null) {
+                window.cancelAnimationFrame(animationFrameRef.current)
+                animationFrameRef.current = null
+            }
+        }
+    }, [])
+
+    return <canvas ref={canvasRef} className="pointer-events-none absolute top-0 left-0 z-0" />
+})
+
+TreeLine.displayName = "TreeLineCanvas"
+
+export { TreeLine }

package/src/cli.server.ts

@@ -0,0 +1,38 @@
+import { spawn } from "node:child_process"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { Logger, LogLevel } from "./logger"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const logger = new Logger(LogLevel.INFO, "[directory-tree]")
+
+const args = process.argv.slice(2)
+
+if (args[0] === "demo") {
+    logger.info("Starting demo server...")
+
+    // The demo directory is inside the package
+    const demoPath = path.join(__dirname, "..", "demo")
+
+    const child = spawn("pnpm", ["run", "dev"], {
+        cwd: demoPath,
+        stdio: "inherit",
+        shell: process.platform === "win32",
+    })
+
+    child.on("close", (code) => {
+        if (code !== 0) {
+            logger.error(`Demo server process exited with code ${code}`)
+        }
+    })
+
+    child.on("error", (err) => {
+        logger.error("Failed to start demo server:", err)
+    })
+} else {
+    logger.info(`Unknown command: ${args[0]}`)
+    logger.info("Usage: npx @aiquants/directory-tree demo")
+    process.exit(1)
+}