@n-dx/core 0.1.0

package/packages/web/dist/viewer/components/prd-tree/merge-preview.js

@@ -0,0 +1,181 @@
+/**
+ * Merge preview panel for PRD items.
+ *
+ * Shows a preview of what will happen when items are consolidated:
+ * - Which item survives (the target)
+ * - Which items are absorbed (removed)
+ * - Combined acceptance criteria, tags, description
+ * - Children that will be reparented
+ * - Dependencies that will be rewritten
+ *
+ * Lets the user optionally override the merged title/description
+ * before confirming.
+ */
+import { h } from "preact";
+import { useState, useEffect, useCallback } from "preact/hooks";
+// ── Constants ────────────────────────────────────────────────────────
+const STATUS_ICONS = {
+    completed: "\u25CF", // ●
+    in_progress: "\u25D0", // ◐
+    pending: "\u25CB", // ○
+    deferred: "\u25CC", // ◌
+    blocked: "\u2298", // ⊘
+    deleted: "\u2715", // ✕
+};
+const LEVEL_LABELS = {
+    epic: "Epic",
+    feature: "Feature",
+    task: "Task",
+    subtask: "Subtask",
+};
+// ── Component ────────────────────────────────────────────────────────
+export function MergePreview({ selectedItems, onMergeComplete, onCancel }) {
+    const [targetId, setTargetId] = useState(selectedItems[0]?.id ?? "");
+    const [customTitle, setCustomTitle] = useState("");
+    const [preview, setPreview] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [merging, setMerging] = useState(false);
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    const sourceIds = selectedItems.map((item) => item.id);
+    // Fetch preview whenever targetId or customTitle changes
+    const fetchPreview = useCallback(async () => {
+        if (sourceIds.length < 2 || !targetId)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const body = {
+                sourceIds,
+                targetId,
+                preview: true,
+            };
+            if (customTitle.trim())
+                body.title = customTitle.trim();
+            const res = await fetch("/api/rex/items/merge", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            if (!res.ok) {
+                const errBody = await res.json().catch(() => ({ error: "Preview failed" }));
+                throw new Error(errBody.error || `HTTP ${res.status}`);
+            }
+            const data = await res.json();
+            setPreview(data.preview);
+        }
+        catch (err) {
+            setError(String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [sourceIds.join(","), targetId, customTitle]);
+    useEffect(() => {
+        fetchPreview();
+    }, [fetchPreview]);
+    // Execute merge
+    const handleMerge = useCallback(async () => {
+        setMerging(true);
+        setError(null);
+        try {
+            const body = {
+                sourceIds,
+                targetId,
+            };
+            if (customTitle.trim())
+                body.title = customTitle.trim();
+            const res = await fetch("/api/rex/items/merge", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            if (!res.ok) {
+                const errBody = await res.json().catch(() => ({ error: "Merge failed" }));
+                throw new Error(errBody.error || `HTTP ${res.status}`);
+            }
+            const data = await res.json();
+            const absorbedCount = data.absorbedIds?.length ?? 0;
+            setResult(`Merged ${absorbedCount + 1} items successfully`);
+            setTimeout(() => {
+                onMergeComplete();
+            }, 1200);
+        }
+        catch (err) {
+            setError(String(err));
+            setMerging(false);
+        }
+    }, [sourceIds.join(","), targetId, customTitle, onMergeComplete]);
+    if (selectedItems.length < 2) {
+        return h("div", { class: "merge-preview-empty" }, "Select at least 2 sibling items to merge.");
+    }
+    const targetItem = selectedItems.find((item) => item.id === targetId);
+    return h("div", { class: "merge-preview" }, 
+    // Header
+    h("div", { class: "merge-preview-header" }, h("h3", null, "Merge Items"), h("button", {
+        class: "merge-preview-close",
+        onClick: onCancel,
+        title: "Cancel",
+        "aria-label": "Cancel merge",
+    }, "\u00d7")), 
+    // Error message
+    error
+        ? h("div", { class: "merge-preview-error", role: "alert" }, error)
+        : null, 
+    // Success message
+    result
+        ? h("div", { class: "merge-preview-success", role: "status" }, result)
+        : null, 
+    // Target selection
+    !result ? h("div", { class: "merge-preview-section" }, h("label", { class: "merge-preview-label" }, "Keep (target item):"), h("select", {
+        class: "merge-preview-select",
+        value: targetId,
+        onChange: (e) => setTargetId(e.target.value),
+        disabled: merging,
+    }, selectedItems.map((item) => h("option", { key: item.id, value: item.id }, `${STATUS_ICONS[item.status] ?? "\u25CB"} ${item.title}`)))) : null, 
+    // Custom title override
+    !result ? h("div", { class: "merge-preview-section" }, h("label", { class: "merge-preview-label" }, "Title (optional override):"), h("input", {
+        class: "merge-preview-input",
+        type: "text",
+        value: customTitle,
+        placeholder: targetItem?.title ?? "Keep original title",
+        onInput: (e) => setCustomTitle(e.target.value),
+        disabled: merging,
+    })) : null, 
+    // Preview content
+    loading
+        ? h("div", { class: "merge-preview-loading" }, "Loading preview...")
+        : null, preview && !result
+        ? h("div", { class: "merge-preview-details" }, 
+        // Target (what survives)
+        h("div", { class: "merge-preview-target" }, h("h4", null, "Result:"), h("div", { class: "merge-preview-card merge-preview-card-target" }, h("div", { class: "merge-preview-card-title" }, h("span", { class: "merge-preview-card-icon" }, "\u2713"), h("strong", null, preview.target.title)), preview.target.acceptanceCriteria.length > 0
+            ? h("div", { class: "merge-preview-field" }, h("span", { class: "merge-preview-field-label" }, "Acceptance Criteria:"), h("ul", { class: "merge-preview-criteria" }, preview.target.acceptanceCriteria.map((ac, i) => h("li", { key: i }, ac))))
+            : null, preview.target.tags.length > 0
+            ? h("div", { class: "merge-preview-field" }, h("span", { class: "merge-preview-field-label" }, "Tags: "), h("span", { class: "merge-preview-tags" }, preview.target.tags.map((tag) => h("span", { key: tag, class: "prd-tag" }, tag))))
+            : null, preview.target.childCount > 0
+            ? h("div", { class: "merge-preview-field" }, h("span", { class: "merge-preview-field-label" }, `${preview.target.childCount} child item${preview.target.childCount !== 1 ? "s" : ""}`))
+            : null)), 
+        // Absorbed (what's removed)
+        h("div", { class: "merge-preview-absorbed" }, h("h4", null, `Absorbed (${preview.absorbed.length} item${preview.absorbed.length !== 1 ? "s" : ""} removed):`), preview.absorbed.map((item) => h("div", {
+            key: item.id,
+            class: "merge-preview-card merge-preview-card-absorbed",
+        }, h("div", { class: "merge-preview-card-title" }, h("span", { class: "merge-preview-card-icon absorbed" }, "\u2715"), h("span", null, item.title), h("span", { class: `prd-level-badge prd-level-${item.level}` }, LEVEL_LABELS[item.level] ?? item.level)), item.childCount > 0
+            ? h("div", { class: "merge-preview-field" }, h("span", { class: "merge-preview-field-label" }, `${item.childCount} child${item.childCount !== 1 ? "ren" : ""} will be reparented`))
+            : null))), 
+        // Dependency rewrites
+        preview.rewrittenDependencyCount > 0
+            ? h("div", { class: "merge-preview-deps" }, h("span", { class: "merge-preview-deps-label" }, `${preview.rewrittenDependencyCount} dependency reference${preview.rewrittenDependencyCount !== 1 ? "s" : ""} will be rewritten`))
+            : null)
+        : null, 
+    // Action buttons
+    !result ? h("div", { class: "merge-preview-actions" }, h("button", {
+        class: "merge-preview-btn merge-preview-btn-cancel",
+        onClick: onCancel,
+        disabled: merging,
+    }, "Cancel"), h("button", {
+        class: "merge-preview-btn merge-preview-btn-merge",
+        onClick: handleMerge,
+        disabled: merging || loading || !preview,
+    }, merging ? "Merging..." : "Merge Items")) : null);
+}
+//# sourceMappingURL=merge-preview.js.map

package/packages/web/dist/viewer/components/prd-tree/merge-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-preview.js","sourceRoot":"","sources":["../../../../src/viewer/components/prd-tree/merge-preview.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/prd-tree/node-culler.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Off-screen node culling engine using IntersectionObserver.
+ *
+ * Manages a single shared IntersectionObserver that tracks multiple tree
+ * node elements and invokes per-element callbacks when visibility changes.
+ * Nodes outside the viewport buffer are "culled" — their DOM children are
+ * removed and replaced with a height-preserving placeholder, freeing memory
+ * and preventing event listener accumulation.
+ *
+ * When culled nodes scroll back into view, the callback fires again and the
+ * component re-renders the full node content. The observer stores the last
+ * known height so placeholders can preserve scroll position.
+ *
+ * Designed as a standalone module with zero framework dependencies —
+ * Preact integration is handled in the CulledNode component (prd-tree.ts).
+ *
+ * @see ./prd-tree.ts — CulledNode component that wraps each tree node
+ */
+/** Configuration for creating a NodeCuller instance. */
+export interface NodeCullerOptions {
+    /** Buffer zone in pixels above/below viewport before culling (default: 200). */
+    bufferPx?: number;
+    /** Root element for IntersectionObserver (default: null = viewport). */
+    root?: Element | null;
+}
+/** Read-only diagnostic snapshot of culler state. */
+export interface NodeCullerState {
+    /** Number of elements currently being observed. */
+    trackedCount: number;
+    /** Whether the culler has been disposed. */
+    disposed: boolean;
+}
+/** Callback invoked when an element's visibility changes. */
+export type VisibilityCallback = (isVisible: boolean) => void;
+/**
+ * Shared IntersectionObserver-based node culler.
+ *
+ * Creates a single observer that efficiently tracks many elements.
+ * Each element gets a per-element callback that fires when its
+ * visibility (within the buffer zone) changes.
+ *
+ * Usage:
+ * ```ts
+ * const culler = new NodeCuller({ bufferPx: 200 });
+ *
+ * // Start observing an element
+ * const cleanup = culler.observe(element, (isVisible) => {
+ *   if (isVisible) renderFullContent();
+ *   else renderPlaceholder(culler.getLastHeight(element));
+ * });
+ *
+ * // Stop observing
+ * cleanup();
+ *
+ * // Tear down the entire culler
+ * culler.dispose();
+ * ```
+ */
+export declare class NodeCuller {
+    private observer;
+    private callbacks;
+    private heights;
+    private _disposed;
+    constructor(options?: NodeCullerOptions);
+    /**
+     * Start observing an element for visibility changes.
+     *
+     * The callback fires immediately when the observer first evaluates the
+     * element (typically within one frame) and again whenever it crosses
+     * the viewport buffer boundary.
+     *
+     * Returns a cleanup function that unobserves the element, removes
+     * the callback, and clears stored height data. Call this in your
+     * component's cleanup/unmount handler.
+     */
+    observe(element: Element, callback: VisibilityCallback): () => void;
+    /**
+     * Get the last known height of an observed element.
+     *
+     * Recorded from IntersectionObserverEntry.boundingClientRect when
+     * the element transitions to off-screen. Returns 0 if no height
+     * has been recorded yet.
+     */
+    getLastHeight(element: Element): number;
+    /**
+     * Dispose the observer and clear all tracked state.
+     *
+     * After disposal, observe() becomes a no-op. Safe to call multiple times.
+     */
+    dispose(): void;
+    /** Whether this culler has been disposed. */
+    get disposed(): boolean;
+    /** Get a diagnostic snapshot of current state. */
+    getState(): NodeCullerState;
+    private handleEntries;
+}

package/packages/web/dist/viewer/components/prd-tree/node-culler.js

@@ -0,0 +1,135 @@
+/**
+ * Off-screen node culling engine using IntersectionObserver.
+ *
+ * Manages a single shared IntersectionObserver that tracks multiple tree
+ * node elements and invokes per-element callbacks when visibility changes.
+ * Nodes outside the viewport buffer are "culled" — their DOM children are
+ * removed and replaced with a height-preserving placeholder, freeing memory
+ * and preventing event listener accumulation.
+ *
+ * When culled nodes scroll back into view, the callback fires again and the
+ * component re-renders the full node content. The observer stores the last
+ * known height so placeholders can preserve scroll position.
+ *
+ * Designed as a standalone module with zero framework dependencies —
+ * Preact integration is handled in the CulledNode component (prd-tree.ts).
+ *
+ * @see ./prd-tree.ts — CulledNode component that wraps each tree node
+ */
+// ─── Default configuration ───────────────────────────────────────────────────
+const DEFAULT_BUFFER_PX = 200;
+// ─── NodeCuller ──────────────────────────────────────────────────────────────
+/**
+ * Shared IntersectionObserver-based node culler.
+ *
+ * Creates a single observer that efficiently tracks many elements.
+ * Each element gets a per-element callback that fires when its
+ * visibility (within the buffer zone) changes.
+ *
+ * Usage:
+ * ```ts
+ * const culler = new NodeCuller({ bufferPx: 200 });
+ *
+ * // Start observing an element
+ * const cleanup = culler.observe(element, (isVisible) => {
+ *   if (isVisible) renderFullContent();
+ *   else renderPlaceholder(culler.getLastHeight(element));
+ * });
+ *
+ * // Stop observing
+ * cleanup();
+ *
+ * // Tear down the entire culler
+ * culler.dispose();
+ * ```
+ */
+export class NodeCuller {
+    observer;
+    callbacks = new Map();
+    heights = new Map();
+    _disposed = false;
+    constructor(options = {}) {
+        const bufferPx = options.bufferPx ?? DEFAULT_BUFFER_PX;
+        this.observer = new IntersectionObserver((entries) => this.handleEntries(entries), {
+            root: options.root ?? null,
+            rootMargin: `${bufferPx}px 0px ${bufferPx}px 0px`,
+        });
+    }
+    /**
+     * Start observing an element for visibility changes.
+     *
+     * The callback fires immediately when the observer first evaluates the
+     * element (typically within one frame) and again whenever it crosses
+     * the viewport buffer boundary.
+     *
+     * Returns a cleanup function that unobserves the element, removes
+     * the callback, and clears stored height data. Call this in your
+     * component's cleanup/unmount handler.
+     */
+    observe(element, callback) {
+        if (this._disposed)
+            return () => { };
+        this.callbacks.set(element, callback);
+        this.observer.observe(element);
+        return () => {
+            this.callbacks.delete(element);
+            this.heights.delete(element);
+            if (!this._disposed) {
+                this.observer.unobserve(element);
+            }
+        };
+    }
+    /**
+     * Get the last known height of an observed element.
+     *
+     * Recorded from IntersectionObserverEntry.boundingClientRect when
+     * the element transitions to off-screen. Returns 0 if no height
+     * has been recorded yet.
+     */
+    getLastHeight(element) {
+        return this.heights.get(element) ?? 0;
+    }
+    /**
+     * Dispose the observer and clear all tracked state.
+     *
+     * After disposal, observe() becomes a no-op. Safe to call multiple times.
+     */
+    dispose() {
+        if (this._disposed)
+            return;
+        this._disposed = true;
+        this.observer.disconnect();
+        this.callbacks.clear();
+        this.heights.clear();
+    }
+    /** Whether this culler has been disposed. */
+    get disposed() {
+        return this._disposed;
+    }
+    /** Get a diagnostic snapshot of current state. */
+    getState() {
+        return {
+            trackedCount: this.callbacks.size,
+            disposed: this._disposed,
+        };
+    }
+    // ─── Private ─────────────────────────────────────────────────────────────
+    handleEntries(entries) {
+        for (const entry of entries) {
+            const callback = this.callbacks.get(entry.target);
+            if (!callback)
+                continue;
+            // Record height when transitioning to off-screen, so the placeholder
+            // can preserve scroll position. Use boundingClientRect which is
+            // already computed by the observer (no additional layout cost).
+            if (!entry.isIntersecting) {
+                const { height } = entry.boundingClientRect;
+                if (height > 0) {
+                    this.heights.set(entry.target, height);
+                }
+            }
+            callback(entry.isIntersecting);
+        }
+    }
+}
+//# sourceMappingURL=node-culler.js.map

package/packages/web/dist/viewer/components/prd-tree/node-culler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-culler.js","sourceRoot":"","sources":["../../../../src/viewer/components/prd-tree/node-culler.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/prd-tree/prd-tree.d.ts

@@ -0,0 +1,91 @@
+/**
+ * PRD hierarchy tree view component.
+ *
+ * Renders a collapsible/expandable tree of epics → features → tasks → subtasks
+ * with status indicators, progress bars, completion percentages, and
+ * modifier-key multi-select for bulk operations (status update, merge).
+ *
+ * Uses virtual scrolling to render only items within the viewport plus a
+ * configurable buffer zone. The tree is flattened into a linear array
+ * respecting expansion state and status filters, then only visible items
+ * are rendered — dramatically reducing DOM node count for large trees.
+ *
+ * Event handling uses delegation: a single set of click / contextmenu / keydown
+ * listeners on the `[role="tree"]` container replaces per-node handlers, reducing
+ * total listener count from O(N × 6) to O(1).
+ *
+ * @see ./virtual-scroll.ts      — tree flattening and viewport computation
+ * @see ./tree-event-delegate.ts  — delegated event handling hook
+ */
+import type { VNode } from "preact";
+import type { PRDItemData, PRDDocumentData, ItemStatus, TaskUsageSummary, WeeklyBudgetResolution } from "./types.js";
+import type { InlineAddInput } from "./inline-add-form.js";
+export interface PRDTreeProps {
+    /** PRD document data (items array + title). */
+    document: PRDDocumentData;
+    /** Aggregated task token usage keyed by task ID. */
+    taskUsageById?: Record<string, TaskUsageSummary>;
+    /** Shared resolved weekly budget used for deterministic utilization display. */
+    weeklyBudget?: WeeklyBudgetResolution | null;
+    /** Whether to show token budget UI (budget percentage in usage chip). */
+    showTokenBudget?: boolean;
+    /** How many levels to expand by default (0 = all collapsed). */
+    defaultExpandDepth?: number;
+    /** Called when an item is clicked for detail view. */
+    onSelectItem?: (item: PRDItemData) => void;
+    /** Currently selected item ID (highlights the row). */
+    selectedItemId?: string | null;
+    /** IDs of items selected for bulk operations (highlighted rows). */
+    bulkSelectedIds?: Set<string>;
+    /**
+     * Multi-select callback for bulk operations. Receives the clicked item,
+     * keyboard modifier state, and the ordered list of currently visible
+     * item IDs so the consumer can implement ctrl-toggle, shift-range,
+     * and plain-click-single-select semantics.
+     */
+    onBulkSelect?: (item: PRDItemData, modifiers: {
+        ctrlKey: boolean;
+        shiftKey: boolean;
+    }, visibleIds: string[]) => void;
+    /** Called when inline add form is submitted. */
+    onInlineAddSubmit?: (data: InlineAddInput) => Promise<void>;
+    /** ID of the item highlighted by a deep-link animation. */
+    highlightedItemId?: string | null;
+    /** IDs of ancestor nodes to force-expand for deep-link visibility. */
+    deepLinkExpandIds?: Set<string> | null;
+    /** Called to remove/delete an item from the tree. */
+    onRemoveItem?: (item: PRDItemData) => void;
+    /** Called to update an item's fields (e.g. status change from inline picker). */
+    onUpdateItem?: (id: string, updates: Partial<PRDItemData>) => Promise<void>;
+    /** ID of item currently being deleted (shows loading state). */
+    deletingItemId?: string | null;
+    /**
+     * Controlled status filter: set of visible statuses.
+     * When provided, the tree uses this instead of internal filter state.
+     * The parent is responsible for rendering the StatusFilter component.
+     */
+    activeStatuses?: Set<ItemStatus>;
+    /**
+     * Search query for inline tree filtering. When set, only matching items
+     * and their ancestors are shown, with matched text highlighted.
+     */
+    searchQuery?: string;
+    /**
+     * Set of item IDs visible during search (matches + ancestors).
+     * When provided alongside searchQuery, filters the flat tree.
+     */
+    searchVisibleIds?: Set<string>;
+    /**
+     * Set of item IDs that directly matched the search query.
+     * Used to apply a visual highlight class to matched rows.
+     */
+    searchMatchIds?: Set<string>;
+    /**
+     * @deprecated Virtual scrolling replaces progressive loading.
+     * This prop is accepted for backward compatibility but has no effect.
+     */
+    chunkSize?: number;
+}
+export declare function PRDTree({ document: doc, taskUsageById, weeklyBudget, showTokenBudget, defaultExpandDepth, onSelectItem, selectedItemId, bulkSelectedIds, onBulkSelect, onInlineAddSubmit, highlightedItemId, deepLinkExpandIds, onRemoveItem, onUpdateItem, deletingItemId, activeStatuses: externalStatuses, searchQuery, searchVisibleIds, searchMatchIds, chunkSize }: PRDTreeProps): VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+}>;