@n-dx/web 0.1.0

package/dist/viewer/hooks/use-delete-actions.js

@@ -0,0 +1,103 @@
+/**
+ * Delete action hooks — optimistic removal, modal confirmation, and detail panel deletion.
+ *
+ * Extracted from usePRDActions to isolate delete state management and
+ * the optimistic-delete-then-reconcile pattern from other mutations.
+ *
+ * @see ./use-prd-actions.ts — parent hook that composes this
+ */
+import { useState, useCallback } from "preact/hooks";
+import { findItemById, collectSubtreeIds, removeItemById } from "../components/prd-tree/tree-utils.js";
+/**
+ * Hook for delete actions — optimistic removal, modal confirmation, and detail panel deletion.
+ */
+export function useDeleteActions({ data, setData, fetchPRDData, fetchTaskUsage, showToast, selectedItemId, setSelectedItemId, setBulkSelectedIds, onDetailContent, }) {
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deletingItemId, setDeletingItemId] = useState(null);
+    // ── Core remove (optimistic delete + reconcile) ─────────────────
+    const handleRemoveItem = useCallback(async (id) => {
+        const targetItem = data ? findItemById(data.items, id) : null;
+        const affectedIds = targetItem ? collectSubtreeIds(targetItem) : new Set([id]);
+        setDeletingItemId(id);
+        // Optimistic removal
+        setData((prev) => {
+            if (!prev)
+                return prev;
+            return { ...prev, items: removeItemById(prev.items, id) };
+        });
+        // Clean up bulk selection for deleted items
+        setBulkSelectedIds((prev) => {
+            if (prev.size === 0)
+                return prev;
+            let changed = false;
+            const next = new Set(prev);
+            for (const affectedId of affectedIds) {
+                if (next.has(affectedId)) {
+                    next.delete(affectedId);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+        // Deselect if the selected item is being deleted
+        if (selectedItemId && affectedIds.has(selectedItemId)) {
+            setSelectedItemId(null);
+            if (onDetailContent)
+                onDetailContent(null);
+            history.replaceState({ view: "prd", file: null, zone: null, runId: null, taskId: null }, "", "/prd");
+        }
+        try {
+            const res = await fetch(`/api/rex/items/${id}`, { method: "DELETE" });
+            if (!res.ok) {
+                const errBody = await res.json().catch(() => ({ error: "Delete failed" }));
+                throw new Error(errBody.error || `HTTP ${res.status}`);
+            }
+            const result = await res.json();
+            showToast(`Deleted ${result.level}: ${result.title}`);
+            await fetchPRDData();
+            await fetchTaskUsage();
+        }
+        catch (err) {
+            await fetchPRDData();
+            throw err;
+        }
+        finally {
+            setDeletingItemId(null);
+        }
+    }, [data, selectedItemId, onDetailContent, setData, setSelectedItemId, setBulkSelectedIds, fetchPRDData, fetchTaskUsage, showToast]);
+    // ── Remove from tree (opens modal) ───────────────────────────────
+    const handleRemoveItemFromTree = useCallback((item) => {
+        setDeleteTarget(item);
+    }, []);
+    // ── Confirm delete (modal callback) ──────────────────────────────
+    const handleConfirmDelete = useCallback(async (id) => {
+        try {
+            await handleRemoveItem(id);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Delete failed";
+            showToast(`Failed to delete item: ${msg}`, "error", 4000);
+        }
+        setDeleteTarget(null);
+    }, [handleRemoveItem, showToast]);
+    // ── Remove from detail panel ─────────────────────────────────────
+    const handleRemoveFromDetail = useCallback(async (id) => {
+        try {
+            await handleRemoveItem(id);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Delete failed";
+            showToast(`Failed to delete item: ${msg}`, "error", 4000);
+            throw err; // Re-throw so TaskDetail can reset its confirming state
+        }
+    }, [handleRemoveItem, showToast]);
+    return {
+        deleteTarget,
+        setDeleteTarget,
+        deletingItemId,
+        handleRemoveItemFromTree,
+        handleConfirmDelete,
+        handleRemoveFromDetail,
+    };
+}
+//# sourceMappingURL=use-delete-actions.js.map

package/dist/viewer/hooks/use-delete-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-delete-actions.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-delete-actions.ts"],"names":[],"mappings":"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"}

package/dist/viewer/hooks/use-dom-performance-monitor.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Preact hook for DOM performance monitoring in tree components.
+ *
+ * Provides real-time DOM node counts, render timings, and before/after
+ * comparison data. Starts the monitor on mount, cleans up on unmount,
+ * and triggers re-renders only when the snapshot changes.
+ *
+ * @see ../performance/dom-performance-monitor.ts — standalone monitoring module
+ */
+import type { RefObject } from "preact";
+import type { DOMNodeSnapshot, RenderTiming, UpdateComparison, PerformanceSummary } from "../performance/dom-performance-monitor.js";
+export interface UseDOMPerformanceMonitorOptions {
+    /** Polling interval in milliseconds (default: 2000). */
+    intervalMs?: number;
+    /** Maximum snapshots to retain (default: 120). */
+    maxSnapshots?: number;
+    /** Whether to start monitoring immediately (default: true). */
+    enabled?: boolean;
+}
+export interface UseDOMPerformanceMonitorResult {
+    /** Latest DOM performance snapshot, or null if not yet available. */
+    snapshot: DOMNodeSnapshot | null;
+    /** Snapshot history for trend analysis (readonly). */
+    history: readonly DOMNodeSnapshot[];
+    /** Recorded render timings (readonly). */
+    timings: readonly RenderTiming[];
+    /** Recorded update comparisons with before/after data (readonly). */
+    comparisons: readonly UpdateComparison[];
+    /** Aggregate performance summary. */
+    summary: PerformanceSummary;
+    /**
+     * Record a render timing manually.
+     *
+     * Use when wrapping a render operation outside the automatic polling:
+     * ```ts
+     * const start = performance.now();
+     * doRender();
+     * perf.recordRender("my-render", performance.now() - start, domCount);
+     * ```
+     */
+    recordRender: (label: string, durationMs: number, nodeCountAfter: number) => void;
+    /**
+     * Record a before/after update comparison manually.
+     */
+    recordUpdate: (label: string, durationMs: number, nodesBefore: number, nodesAfter: number, memoryBefore?: number, memoryAfter?: number) => void;
+    /**
+     * Measure an operation end-to-end with automatic DOM/memory capture.
+     *
+     * Wraps a synchronous function, recording DOM node count and memory
+     * before and after execution.
+     */
+    measureOperation: <T>(label: string, fn: () => T) => T;
+}
+/**
+ * Hook that provides real-time DOM performance monitoring for tree components.
+ *
+ * Usage:
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const perf = useDOMPerformanceMonitor(containerRef);
+ *
+ * // Access metrics
+ * perf.snapshot?.totalNodes
+ * perf.summary.avgRenderMs
+ * perf.comparisons[0]?.nodeDelta
+ * ```
+ */
+export declare function useDOMPerformanceMonitor(containerRef: RefObject<Element>, options?: UseDOMPerformanceMonitorOptions): UseDOMPerformanceMonitorResult;

package/dist/viewer/hooks/use-dom-performance-monitor.js

@@ -0,0 +1,71 @@
+/**
+ * Preact hook for DOM performance monitoring in tree components.
+ *
+ * Provides real-time DOM node counts, render timings, and before/after
+ * comparison data. Starts the monitor on mount, cleans up on unmount,
+ * and triggers re-renders only when the snapshot changes.
+ *
+ * @see ../performance/dom-performance-monitor.ts — standalone monitoring module
+ */
+import { useState, useEffect, useCallback } from "preact/hooks";
+import { startDOMPerformanceMonitor, stopDOMPerformanceMonitor, onDOMSnapshot, getLatestDOMSnapshot, getDOMSnapshotHistory, getRenderTimings, getUpdateComparisons, recordRender, recordUpdate, measureOperation, computeSummary, } from "../performance/dom-performance-monitor.js";
+/**
+ * Hook that provides real-time DOM performance monitoring for tree components.
+ *
+ * Usage:
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const perf = useDOMPerformanceMonitor(containerRef);
+ *
+ * // Access metrics
+ * perf.snapshot?.totalNodes
+ * perf.summary.avgRenderMs
+ * perf.comparisons[0]?.nodeDelta
+ * ```
+ */
+export function useDOMPerformanceMonitor(containerRef, options = {}) {
+    const { intervalMs = 2000, maxSnapshots, enabled = true } = options;
+    const [snapshot, setSnapshot] = useState(getLatestDOMSnapshot);
+    // Use a counter to force re-reads of ring buffers on snapshot change.
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (!enabled || !containerRef.current)
+            return;
+        startDOMPerformanceMonitor(containerRef.current, {
+            intervalMs,
+            maxSnapshots,
+        });
+        const unsubscribe = onDOMSnapshot((snap) => {
+            setSnapshot(snap);
+            setTick((t) => t + 1);
+        });
+        return () => {
+            unsubscribe();
+            stopDOMPerformanceMonitor();
+        };
+    }, [enabled, intervalMs, maxSnapshots, containerRef.current]);
+    const wrappedRecordRender = useCallback((label, durationMs, nodeCountAfter) => {
+        recordRender(label, durationMs, nodeCountAfter);
+        setTick((t) => t + 1);
+    }, []);
+    const wrappedRecordUpdate = useCallback((label, durationMs, nodesBefore, nodesAfter, memoryBefore, memoryAfter) => {
+        recordUpdate(label, durationMs, nodesBefore, nodesAfter, memoryBefore, memoryAfter);
+        setTick((t) => t + 1);
+    }, []);
+    const wrappedMeasure = useCallback((label, fn) => {
+        const result = measureOperation(label, fn);
+        setTick((t) => t + 1);
+        return result;
+    }, []);
+    return {
+        snapshot,
+        history: getDOMSnapshotHistory(),
+        timings: getRenderTimings(),
+        comparisons: getUpdateComparisons(),
+        summary: computeSummary(),
+        recordRender: wrappedRecordRender,
+        recordUpdate: wrappedRecordUpdate,
+        measureOperation: wrappedMeasure,
+    };
+}
+//# sourceMappingURL=use-dom-performance-monitor.js.map

package/dist/viewer/hooks/use-dom-performance-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dom-performance-monitor.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-dom-performance-monitor.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAU,MAAM,cAAc,CAAC;AASxE,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,EACzB,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,cAAc,GAIf,MAAM,2CAA2C,CAAC;AAqDnD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,wBAAwB,CACtC,YAAgC,EAChC,UAA2C,EAAE;IAE7C,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,YAAY,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAEpE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,oBAAoB,CACrB,CAAC;IACF,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAE9C,0BAA0B,CAAC,YAAY,CAAC,OAAO,EAAE;YAC/C,UAAU;YACV,YAAY;SACb,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,CAAC;YACd,yBAAyB,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9D,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,KAAa,EAAE,UAAkB,EAAE,cAAsB,EAAE,EAAE;QAC5D,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC;QAChD,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACxB,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,CACE,KAAa,EACb,UAAkB,EAClB,WAAmB,EACnB,UAAkB,EAClB,YAAqB,EACrB,WAAoB,EACpB,EAAE;QACF,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC;QACpF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACxB,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAI,KAAa,EAAE,EAAW,EAAK,EAAE;QACnC,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC3C,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,OAAO,EAAE,qBAAqB,EAAE;QAChC,OAAO,EAAE,gBAAgB,EAAE;QAC3B,WAAW,EAAE,oBAAoB,EAAE;QACnC,OAAO,EAAE,cAAc,EAAE;QACzB,YAAY,EAAE,mBAAmB;QACjC,YAAY,EAAE,mBAAmB;QACjC,gBAAgB,EAAE,cAAc;KACjC,CAAC;AACJ,CAAC"}

package/dist/viewer/hooks/use-facet-state.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Facet filter state management with URL hash persistence.
+ *
+ * Manages active tag and status facets, syncing state to the URL hash
+ * so filtered views are shareable. Reads initial state from the URL
+ * on mount and writes back on every change.
+ *
+ * URL format: #facets=tag:foo,tag:bar,status:pending,status:blocked
+ * Combined with existing hash params using & separator.
+ *
+ * @see ../components/prd-tree/facet-filter.ts — FacetFilter component
+ * @see ../components/prd-tree/tree-search.ts — SearchFacets type
+ */
+import type { ItemStatus } from "../components/prd-tree/types.js";
+import type { SearchFacets } from "../components/prd-tree/tree-search.js";
+export interface FacetState {
+    /** Currently active tag facets. */
+    activeTags: Set<string>;
+    /** Currently active status facets (for search narrowing, not the tree-level filter). */
+    activeSearchStatuses: Set<ItemStatus>;
+    /** Combined facets object for searchTree(). null when no facets are active. */
+    searchFacets: SearchFacets | undefined;
+    /** Update active tags. */
+    setActiveTags: (tags: Set<string>) => void;
+    /** Update active search statuses. */
+    setActiveSearchStatuses: (statuses: Set<ItemStatus>) => void;
+    /** Clear all facets. */
+    clearFacets: () => void;
+    /** Whether any facet is currently active. */
+    hasFacets: boolean;
+}
+export declare function useFacetState(): FacetState;

package/dist/viewer/hooks/use-facet-state.js

@@ -0,0 +1,119 @@
+/**
+ * Facet filter state management with URL hash persistence.
+ *
+ * Manages active tag and status facets, syncing state to the URL hash
+ * so filtered views are shareable. Reads initial state from the URL
+ * on mount and writes back on every change.
+ *
+ * URL format: #facets=tag:foo,tag:bar,status:pending,status:blocked
+ * Combined with existing hash params using & separator.
+ *
+ * @see ../components/prd-tree/facet-filter.ts — FacetFilter component
+ * @see ../components/prd-tree/tree-search.ts — SearchFacets type
+ */
+import { useState, useCallback, useEffect, useRef } from "preact/hooks";
+// ── URL hash encoding/decoding ───────────────────────────────────────────
+const FACET_PARAM = "facets";
+/** Parse facet state from the URL hash. */
+function parseFacetsFromHash() {
+    const tags = new Set();
+    const statuses = new Set();
+    try {
+        const hash = window.location.hash.slice(1); // remove leading #
+        if (!hash)
+            return { tags, statuses };
+        const params = new URLSearchParams(hash);
+        const facetStr = params.get(FACET_PARAM);
+        if (!facetStr)
+            return { tags, statuses };
+        for (const part of facetStr.split(",")) {
+            const colonIdx = part.indexOf(":");
+            if (colonIdx === -1)
+                continue;
+            const type = part.slice(0, colonIdx);
+            const value = decodeURIComponent(part.slice(colonIdx + 1));
+            if (type === "tag" && value) {
+                tags.add(value);
+            }
+            else if (type === "status" && value) {
+                statuses.add(value);
+            }
+        }
+    }
+    catch {
+        // Ignore malformed hashes
+    }
+    return { tags, statuses };
+}
+/** Write facet state to the URL hash, preserving other hash params. */
+function writeFacetsToHash(tags, statuses) {
+    try {
+        const hash = window.location.hash.slice(1);
+        const params = new URLSearchParams(hash);
+        const parts = [];
+        for (const tag of [...tags].sort()) {
+            parts.push(`tag:${encodeURIComponent(tag)}`);
+        }
+        for (const status of [...statuses].sort()) {
+            parts.push(`status:${encodeURIComponent(status)}`);
+        }
+        if (parts.length > 0) {
+            params.set(FACET_PARAM, parts.join(","));
+        }
+        else {
+            params.delete(FACET_PARAM);
+        }
+        const newHash = params.toString();
+        const url = new URL(window.location.href);
+        url.hash = newHash || "";
+        window.history.replaceState(null, "", url.toString());
+    }
+    catch {
+        // Ignore errors in URL manipulation
+    }
+}
+export function useFacetState() {
+    // Initialize from URL hash
+    const [activeTags, setActiveTagsRaw] = useState(() => {
+        const parsed = parseFacetsFromHash();
+        return parsed.tags;
+    });
+    const [activeSearchStatuses, setActiveSearchStatusesRaw] = useState(() => {
+        const parsed = parseFacetsFromHash();
+        return parsed.statuses;
+    });
+    // Track whether we've initialized (skip first URL write)
+    const initialized = useRef(false);
+    // Sync to URL hash on state changes
+    useEffect(() => {
+        if (!initialized.current) {
+            initialized.current = true;
+            return;
+        }
+        writeFacetsToHash(activeTags, activeSearchStatuses);
+    }, [activeTags, activeSearchStatuses]);
+    const setActiveTags = useCallback((tags) => {
+        setActiveTagsRaw(tags);
+    }, []);
+    const setActiveSearchStatuses = useCallback((statuses) => {
+        setActiveSearchStatusesRaw(statuses);
+    }, []);
+    const clearFacets = useCallback(() => {
+        setActiveTagsRaw(new Set());
+        setActiveSearchStatusesRaw(new Set());
+    }, []);
+    const hasFacets = activeTags.size > 0 || activeSearchStatuses.size > 0;
+    const searchFacets = hasFacets
+        ? { tags: activeTags, statuses: activeSearchStatuses }
+        : undefined;
+    return {
+        activeTags,
+        activeSearchStatuses,
+        searchFacets,
+        setActiveTags,
+        setActiveSearchStatuses,
+        clearFacets,
+        hasFacets,
+    };
+}
+//# sourceMappingURL=use-facet-state.js.map

package/dist/viewer/hooks/use-facet-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-facet-state.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-facet-state.ts"],"names":[],"mappings":"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"}

package/dist/viewer/hooks/use-feature-toggle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Hook to subscribe to a specific feature toggle value from the API.
+ *
+ * Fetches the toggle state once on mount and re-fetches whenever the
+ * feature-toggles view saves a change (listens for the custom
+ * `feature-toggle-changed` event on `window`).
+ *
+ * @see ../views/feature-toggles.ts — emits `feature-toggle-changed`
+ * @see ../../server/routes-features.ts — GET /api/features
+ */
+/**
+ * Subscribe to a single feature toggle by key.
+ *
+ * @param key - Fully-qualified toggle key (e.g. `"rex.showTokenBudget"`).
+ * @param defaultValue - Value to use until the first fetch completes (and on error).
+ * @returns Current toggle value (updates reactively when changed via the UI).
+ */
+export declare function useFeatureToggle(key: string, defaultValue: boolean): boolean;

package/dist/viewer/hooks/use-feature-toggle.js

@@ -0,0 +1,57 @@
+/**
+ * Hook to subscribe to a specific feature toggle value from the API.
+ *
+ * Fetches the toggle state once on mount and re-fetches whenever the
+ * feature-toggles view saves a change (listens for the custom
+ * `feature-toggle-changed` event on `window`).
+ *
+ * @see ../views/feature-toggles.ts — emits `feature-toggle-changed`
+ * @see ../../server/routes-features.ts — GET /api/features
+ */
+import { useState, useEffect, useCallback, useRef } from "preact/hooks";
+/**
+ * Subscribe to a single feature toggle by key.
+ *
+ * @param key - Fully-qualified toggle key (e.g. `"rex.showTokenBudget"`).
+ * @param defaultValue - Value to use until the first fetch completes (and on error).
+ * @returns Current toggle value (updates reactively when changed via the UI).
+ */
+export function useFeatureToggle(key, defaultValue) {
+    const [enabled, setEnabled] = useState(defaultValue);
+    const mountedRef = useRef(true);
+    const fetchToggle = useCallback(async () => {
+        try {
+            const res = await fetch("/api/features");
+            if (!res.ok)
+                return;
+            const json = (await res.json());
+            if (!mountedRef.current)
+                return;
+            const toggle = json.toggles?.find((t) => t.key === key);
+            if (toggle !== undefined) {
+                setEnabled(toggle.enabled);
+            }
+        }
+        catch {
+            // Keep current value on network errors.
+        }
+    }, [key]);
+    // Initial fetch
+    useEffect(() => {
+        mountedRef.current = true;
+        fetchToggle();
+        return () => {
+            mountedRef.current = false;
+        };
+    }, [fetchToggle]);
+    // Re-fetch on toggle change events from the feature-toggles UI
+    useEffect(() => {
+        const handler = () => {
+            fetchToggle();
+        };
+        window.addEventListener("feature-toggle-changed", handler);
+        return () => window.removeEventListener("feature-toggle-changed", handler);
+    }, [fetchToggle]);
+    return enabled;
+}
+//# sourceMappingURL=use-feature-toggle.js.map

package/dist/viewer/hooks/use-feature-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-feature-toggle.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-feature-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAExE;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAW,EAAE,YAAqB;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACzC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,eAAe,CAAC,CAAC;YACzC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,OAAO;YACpB,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAE7B,CAAC;YACF,IAAI,CAAC,UAAU,CAAC,OAAO;gBAAE,OAAO;YAChC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;YACxD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBACzB,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,wCAAwC;QAC1C,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,gBAAgB;IAChB,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,WAAW,EAAE,CAAC;QACd,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,WAAW,EAAE,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/viewer/hooks/use-file-edges.d.ts

@@ -0,0 +1,23 @@
+/**
+ * useFileEdges — Compute file-level cross-zone edges for the zone diagram.
+ *
+ * When zone boxes are expanded, this hook computes the SVG paths connecting
+ * individual files across zones, replacing the coarser zone-to-zone edges.
+ */
+import type { FileConnectionMap, FileToFileMap, ZoneData, FlowEdge, BoxRect } from "../views/zone-types.js";
+interface FileEdgeElement {
+    key: string;
+    d: string;
+    color: string;
+    weight: number;
+}
+export interface FileEdgesResult {
+    fileEdgeElements: FileEdgeElement[];
+    hiddenZoneEdges: Set<string>;
+}
+/**
+ * Compute file-level edges for expanded zones and determine which zone-level
+ * edges should be hidden (replaced by file-level detail).
+ */
+export declare function useFileEdges(edges: FlowEdge[], boxes: Map<string, BoxRect>, expandedZones: Set<string>, zoneById: Map<string, ZoneData>, fileConnections: FileConnectionMap, fileToFileMap: FileToFileMap): FileEdgesResult;
+export {};