@n-dx/web 0.1.0

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

@@ -0,0 +1,115 @@
+/**
+ * Route state management hook for the viewer app.
+ *
+ * Manages the active view, selected entity IDs (file, zone, run, task),
+ * URL history synchronisation, and backward-compat migration of legacy hash URLs.
+ */
+import { useState, useCallback, useEffect } from "preact/hooks";
+import { parseLegacyHashRoute, resolveLocationRoute } from "../route-state.js";
+function defaultView(validViews) {
+    return validViews.values().next().value;
+}
+function getInitialView(validViews) {
+    const parsed = resolveLocationRoute(location.pathname, location.hash, validViews);
+    return parsed?.view ?? defaultView(validViews);
+}
+function getInitialRunId(validViews) {
+    const parsed = resolveLocationRoute(location.pathname, location.hash, validViews);
+    if (!parsed || parsed.view !== "hench-runs")
+        return null;
+    return parsed.subId;
+}
+function getInitialTaskId(validViews) {
+    const parsed = resolveLocationRoute(location.pathname, location.hash, validViews);
+    if (!parsed || parsed.view !== "prd")
+        return null;
+    return parsed.subId;
+}
+export function useRouteState(validViews) {
+    const [view, setView] = useState(() => getInitialView(validViews));
+    const [selectedRunId, setSelectedRunId] = useState(() => getInitialRunId(validViews));
+    const [selectedTaskId, setSelectedTaskId] = useState(() => getInitialTaskId(validViews));
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [selectedZone, setSelectedZone] = useState(null);
+    const navigateTo = useCallback((targetView, opts) => {
+        const file = opts?.file ?? null;
+        const zone = opts?.zone ?? null;
+        const runId = opts?.runId ?? null;
+        const taskId = opts?.taskId ?? null;
+        setSelectedFile(file);
+        setSelectedZone(zone);
+        setSelectedRunId(runId);
+        setSelectedTaskId(taskId);
+        setView(targetView);
+        const subId = runId ?? taskId;
+        const urlPath = subId ? `/${targetView}/${subId}` : `/${targetView}`;
+        history.pushState({ view: targetView, file, zone, runId, taskId }, "", urlPath);
+    }, []);
+    const handleSidebarNav = useCallback((id) => {
+        setSelectedFile(null);
+        setSelectedZone(null);
+        setSelectedRunId(null);
+        setSelectedTaskId(null);
+        setView(id);
+        history.pushState({ view: id, file: null, zone: null, runId: null, taskId: null }, "", `/${id}`);
+    }, []);
+    useEffect(() => {
+        // Backward compat: migrate old hash URLs to path URLs
+        const hashRoute = parseLegacyHashRoute(location.hash, validViews);
+        if (hashRoute) {
+            const isRunView = hashRoute.view === "hench-runs";
+            const isTaskView = hashRoute.view === "prd";
+            const runId = isRunView ? hashRoute.subId : null;
+            const taskId = isTaskView ? hashRoute.subId : null;
+            setView(hashRoute.view);
+            setSelectedFile(null);
+            setSelectedZone(null);
+            setSelectedRunId(runId);
+            setSelectedTaskId(taskId);
+            const hashUrl = hashRoute.subId ? `/${hashRoute.view}/${hashRoute.subId}` : `/${hashRoute.view}`;
+            history.replaceState({ view: hashRoute.view, file: null, zone: null, runId, taskId }, "", hashUrl);
+        }
+        else {
+            // Seed the initial history entry — preserve deep-link path if present
+            const subId = selectedRunId ?? selectedTaskId;
+            const initialUrl = subId ? `/${view}/${subId}` : `/${view}`;
+            history.replaceState({ view, file: selectedFile, zone: selectedZone, runId: selectedRunId, taskId: selectedTaskId }, "", initialUrl);
+        }
+        const handlePopState = (e) => {
+            if (e.state) {
+                const s = e.state;
+                if (s.view && validViews.has(s.view)) {
+                    setView(s.view);
+                    setSelectedFile(s.file ?? null);
+                    setSelectedZone(s.zone ?? null);
+                    setSelectedRunId(s.runId ?? null);
+                    setSelectedTaskId(s.taskId ?? null);
+                    return;
+                }
+            }
+            const parsed = resolveLocationRoute(location.pathname, location.hash, validViews)
+                ?? { view: defaultView(validViews), subId: null };
+            setView(parsed.view);
+            setSelectedFile(null);
+            setSelectedZone(null);
+            const isRunView = parsed.view === "hench-runs";
+            const isTaskView = parsed.view === "prd";
+            setSelectedRunId(isRunView ? parsed.subId : null);
+            setSelectedTaskId(isTaskView ? parsed.subId : null);
+            const fallbackUrl = parsed.subId ? `/${parsed.view}/${parsed.subId}` : `/${parsed.view}`;
+            history.replaceState({
+                view: parsed.view,
+                file: null,
+                zone: null,
+                runId: isRunView ? parsed.subId : null,
+                taskId: isTaskView ? parsed.subId : null,
+            }, "", fallbackUrl);
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return { view, selectedFile, setSelectedFile, selectedZone, selectedRunId, selectedTaskId, navigateTo, handleSidebarNav };
+}
+//# sourceMappingURL=use-route-state.js.map

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * useSubZoneEdges — Compute subzone-level edges for the zone diagram.
+ *
+ * When a zone with subzones is expanded inline, this hook produces:
+ * 1. Internal subCrossing edges (dashed arcs between subzone rows)
+ * 2. External-to-subzone edges (from external zone boxes to specific subzone rows)
+ */
+import type { ZoneData, FlowEdge, BoxRect, FileConnectionMap, ExpandedSubZones } from "../views/zone-types.js";
+interface SubZoneEdgeElement {
+    key: string;
+    d: string;
+    color: string;
+    weight: number;
+    dashed?: boolean;
+}
+export interface SubZoneEdgesResult {
+    subZoneEdgeElements: SubZoneEdgeElement[];
+    hiddenZoneEdges: Set<string>;
+}
+export declare function useSubZoneEdges(edges: FlowEdge[], boxes: Map<string, BoxRect>, expandedZones: Set<string>, expandedSubZones: ExpandedSubZones, zoneById: Map<string, ZoneData>, fileConnections: FileConnectionMap): SubZoneEdgesResult;
+export {};

package/dist/viewer/hooks/use-subzone-edges.js

@@ -0,0 +1,147 @@
+/**
+ * useSubZoneEdges — Compute subzone-level edges for the zone diagram.
+ *
+ * When a zone with subzones is expanded inline, this hook produces:
+ * 1. Internal subCrossing edges (dashed arcs between subzone rows)
+ * 2. External-to-subzone edges (from external zone boxes to specific subzone rows)
+ */
+import { useMemo } from "preact/hooks";
+const BOX_H_COLLAPSED = 80;
+const SUBZONE_ROW_H = 28;
+const SUBZONE_ROWS_MAX = 10;
+const FILE_ROW_H = 22;
+const FILE_ROWS_MAX = 15;
+/**
+ * Get the Y center of a subzone row within an expanded zone box,
+ * accounting for any expanded subzones above it that show nested files.
+ */
+function subZoneRowY(box, subZones, targetIndex, expandedSubZoneIds) {
+    let y = box.y + BOX_H_COLLAPSED - 4;
+    const limit = Math.min(targetIndex, SUBZONE_ROWS_MAX);
+    for (let i = 0; i < limit; i++) {
+        y += SUBZONE_ROW_H;
+        if (expandedSubZoneIds?.has(subZones[i].id)) {
+            const fileRows = Math.min(subZones[i].files.length, FILE_ROWS_MAX);
+            y += fileRows * FILE_ROW_H + (subZones[i].files.length > FILE_ROWS_MAX ? 20 : 0);
+        }
+    }
+    return y + SUBZONE_ROW_H / 2;
+}
+function boxEdgeAnchor(box, tx, ty) {
+    const cx = box.x + box.w / 2;
+    const cy = box.y + box.h / 2;
+    const dx = tx - cx;
+    const dy = ty - cy;
+    if (dx === 0 && dy === 0)
+        return { x: cx, y: cy };
+    const hw = box.w / 2;
+    const hh = box.h / 2;
+    const sx = dx !== 0 ? hw / Math.abs(dx) : Infinity;
+    const sy = dy !== 0 ? hh / Math.abs(dy) : Infinity;
+    const s = Math.min(sx, sy);
+    return { x: cx + dx * s, y: cy + dy * s };
+}
+export function useSubZoneEdges(edges, boxes, expandedZones, expandedSubZones, zoneById, fileConnections) {
+    const subZoneEdgeElements = useMemo(() => {
+        const elements = [];
+        for (const [zoneId, zone] of zoneById) {
+            if (!expandedZones.has(zoneId))
+                continue;
+            if (!zone.subZones || zone.subZones.length === 0)
+                continue;
+            const box = boxes.get(zoneId);
+            if (!box)
+                continue;
+            const szIds = expandedSubZones.get(zoneId);
+            const visibleSz = zone.subZones.slice(0, SUBZONE_ROWS_MAX);
+            const szIndexMap = new Map(visibleSz.map((sz, i) => [sz.id, i]));
+            // 1. Internal subCrossing edges (dashed arcs between subzone rows)
+            if (zone.subCrossings) {
+                for (const crossing of zone.subCrossings) {
+                    const fromIdx = szIndexMap.get(crossing.from);
+                    const toIdx = szIndexMap.get(crossing.to);
+                    if (fromIdx === undefined || toIdx === undefined)
+                        continue;
+                    const fromY = subZoneRowY(box, visibleSz, fromIdx, szIds);
+                    const toY = subZoneRowY(box, visibleSz, toIdx, szIds);
+                    // Arc looping to the right of the parent box
+                    const arcX = box.x + box.w + 30;
+                    const d = `M ${box.x + box.w} ${fromY} C ${arcX} ${fromY} ${arcX} ${toY} ${box.x + box.w} ${toY}`;
+                    const fromSz = visibleSz[fromIdx];
+                    elements.push({
+                        key: `szc-${zoneId}-${crossing.from}-${crossing.to}`,
+                        d,
+                        color: fromSz.color,
+                        weight: crossing.weight,
+                        dashed: true,
+                    });
+                }
+            }
+            // 2. External-to-subzone edges
+            // Build file→subzone index map
+            const fileToSzIdx = new Map();
+            for (let i = 0; i < visibleSz.length; i++) {
+                for (const file of visibleSz[i].files) {
+                    fileToSzIdx.set(file.path, i);
+                }
+            }
+            for (const edge of edges) {
+                const isFrom = edge.from === zoneId;
+                const isTo = edge.to === zoneId;
+                if (!isFrom && !isTo)
+                    continue;
+                const otherZoneId = isFrom ? edge.to : edge.from;
+                const otherBox = boxes.get(otherZoneId);
+                if (!otherBox)
+                    continue;
+                // Aggregate weights per subzone
+                const szWeights = new Map();
+                for (const [filePath, conns] of fileConnections) {
+                    const szIdx = fileToSzIdx.get(filePath);
+                    if (szIdx === undefined)
+                        continue;
+                    for (const conn of conns) {
+                        if (conn.targetZoneId === otherZoneId) {
+                            szWeights.set(szIdx, (szWeights.get(szIdx) ?? 0) + conn.weight);
+                        }
+                    }
+                }
+                for (const [szIdx, weight] of szWeights) {
+                    const szY = subZoneRowY(box, visibleSz, szIdx, szIds);
+                    const fromX = otherBox.x > box.x ? box.x + box.w : box.x;
+                    const clampedY = Math.max(box.y + 4, Math.min(szY, box.y + box.h - 4));
+                    const to = boxEdgeAnchor(otherBox, fromX, clampedY);
+                    const dx = to.x - fromX;
+                    const cp1x = fromX + dx * 0.4;
+                    const cp2x = fromX + dx * 0.6;
+                    const d = `M ${fromX} ${clampedY} C ${cp1x} ${clampedY} ${cp2x} ${to.y} ${to.x} ${to.y}`;
+                    const sz = visibleSz[szIdx];
+                    elements.push({
+                        key: `sze-${zoneId}-${sz.id}-${otherZoneId}`,
+                        d,
+                        color: sz.color,
+                        weight,
+                    });
+                }
+            }
+        }
+        return elements;
+    }, [edges, boxes, expandedZones, expandedSubZones, zoneById, fileConnections]);
+    const hiddenZoneEdges = useMemo(() => {
+        const hidden = new Set();
+        for (const edge of edges) {
+            const fromZone = zoneById.get(edge.from);
+            const toZone = zoneById.get(edge.to);
+            const fromHasSubZones = expandedZones.has(edge.from) && fromZone?.subZones?.length;
+            const toHasSubZones = expandedZones.has(edge.to) && toZone?.subZones?.length;
+            if (fromHasSubZones || toHasSubZones) {
+                const hasSubEdges = subZoneEdgeElements.some((se) => se.key.includes(edge.from) || se.key.includes(edge.to));
+                if (hasSubEdges)
+                    hidden.add(`${edge.from}->${edge.to}`);
+            }
+        }
+        return hidden;
+    }, [edges, expandedZones, zoneById, subZoneEdgeElements]);
+    return { subZoneEdgeElements, hiddenZoneEdges };
+}
+//# sourceMappingURL=use-subzone-edges.js.map

package/dist/viewer/hooks/use-subzone-edges.js.map

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

package/dist/viewer/hooks/use-tab-visibility.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Preact hook for tab visibility state management.
+ *
+ * Provides reactive tab visibility state to components. Starts the
+ * tab visibility monitor on mount, cleans up on unmount, and triggers
+ * re-renders only when the visibility state changes.
+ */
+import { type TabVisibilityState, type TabVisibilitySnapshot, type VisibilityAPICapabilities } from "../polling/index.js";
+export interface UseTabVisibilityResult {
+    /** Current tab visibility state ("visible" or "hidden"). */
+    state: TabVisibilityState;
+    /** Whether the tab is currently visible (convenience boolean). */
+    isVisible: boolean;
+    /** Full visibility snapshot with timing information. */
+    snapshot: TabVisibilitySnapshot;
+    /** Browser API capabilities for the Page Visibility API. */
+    capabilities: VisibilityAPICapabilities;
+}
+/**
+ * Hook that provides real-time tab visibility state.
+ *
+ * Usage:
+ * ```tsx
+ * const { isVisible, state, capabilities } = useTabVisibility();
+ * if (!isVisible) return null; // skip rendering when hidden
+ * if (capabilities.usingFallback) {
+ *   console.warn("Using focus/blur fallback — precision is reduced");
+ * }
+ * ```
+ */
+export declare function useTabVisibility(): UseTabVisibilityResult;

package/dist/viewer/hooks/use-tab-visibility.js

@@ -0,0 +1,43 @@
+/**
+ * Preact hook for tab visibility state management.
+ *
+ * Provides reactive tab visibility state to components. Starts the
+ * tab visibility monitor on mount, cleans up on unmount, and triggers
+ * re-renders only when the visibility state changes.
+ */
+import { useState, useEffect } from "preact/hooks";
+import { startTabVisibilityMonitor, stopTabVisibilityMonitor, onVisibilityChange, getTabVisibilitySnapshot, getVisibilityCapabilities, } from "../polling/index.js";
+/**
+ * Hook that provides real-time tab visibility state.
+ *
+ * Usage:
+ * ```tsx
+ * const { isVisible, state, capabilities } = useTabVisibility();
+ * if (!isVisible) return null; // skip rendering when hidden
+ * if (capabilities.usingFallback) {
+ *   console.warn("Using focus/blur fallback — precision is reduced");
+ * }
+ * ```
+ */
+export function useTabVisibility() {
+    const [snapshot, setSnapshot] = useState(getTabVisibilitySnapshot);
+    useEffect(() => {
+        startTabVisibilityMonitor();
+        const unsubscribe = onVisibilityChange((newSnapshot) => {
+            setSnapshot(newSnapshot);
+        });
+        // Sync with current state in case it changed between render and effect.
+        setSnapshot(getTabVisibilitySnapshot());
+        return () => {
+            unsubscribe();
+            stopTabVisibilityMonitor();
+        };
+    }, []);
+    return {
+        state: snapshot.state,
+        isVisible: snapshot.isVisible,
+        snapshot,
+        capabilities: getVisibilityCapabilities(),
+    };
+}
+//# sourceMappingURL=use-tab-visibility.js.map

package/dist/viewer/hooks/use-tab-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-visibility.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-tab-visibility.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,yBAAyB,GAI1B,MAAM,qBAAqB,CAAC;AAa7B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,wBAAwB,CACzB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,yBAAyB,EAAE,CAAC;QAE5B,MAAM,WAAW,GAAG,kBAAkB,CAAC,CAAC,WAAW,EAAE,EAAE;YACrD,WAAW,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,wEAAwE;QACxE,WAAW,CAAC,wBAAwB,EAAE,CAAC,CAAC;QAExC,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,CAAC;YACd,wBAAwB,EAAE,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,KAAK,EAAE,QAAQ,CAAC,KAAK;QACrB,SAAS,EAAE,QAAQ,CAAC,SAAS;QAC7B,QAAQ;QACR,YAAY,EAAE,yBAAyB,EAAE;KAC1C,CAAC;AACJ,CAAC"}

package/dist/viewer/hooks/use-tick.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Preact hook for shared elapsed-time tick updates.
+ *
+ * Wraps the batched tick dispatcher to provide a simple hook interface for
+ * components that display live elapsed durations (e.g. task cards with
+ * running timers). All components share a single 1-second setInterval via
+ * the tick timer, and state updates are batched into a single
+ * requestAnimationFrame callback via the batched tick dispatcher.
+ *
+ * When 20+ task cards are visible simultaneously, this reduces re-renders
+ * from N individual setState calls to one batched reconciliation per tick.
+ *
+ * Usage:
+ * ```tsx
+ * // Replace:
+ * //   const [elapsed, setElapsed] = useState(() => formatElapsed(startedAt));
+ * //   useEffect(() => {
+ * //     const id = setInterval(() => setElapsed(formatElapsed(startedAt)), 1000);
+ * //     return () => clearInterval(id);
+ * //   }, [startedAt]);
+ * //
+ * // With:
+ * const elapsed = useTick(startedAt, formatElapsed);
+ * ```
+ */
+/**
+ * Subscribe to batched 1-second tick updates and return a formatted
+ * elapsed-time string that updates every second.
+ *
+ * State updates are batched across all `useTick` instances via RAF,
+ * so Preact reconciles all elapsed time displays in a single pass.
+ *
+ * Includes an equality check to skip redundant re-renders when the
+ * formatted value hasn't changed (e.g. timer precision edge cases,
+ * or formatters that produce the same string across consecutive ticks).
+ *
+ * @param startedAt - ISO 8601 timestamp of when the timer began.
+ * @param formatter - Pure function that converts a start timestamp to a
+ *                    display string. Called once per tick.
+ *                    Receives the ISO string and returns the formatted output.
+ * @returns The current formatted elapsed-time string.
+ */
+export declare function useTick(startedAt: string, formatter: (startedAt: string) => string): string;

package/dist/viewer/hooks/use-tick.js

@@ -0,0 +1,76 @@
+/**
+ * Preact hook for shared elapsed-time tick updates.
+ *
+ * Wraps the batched tick dispatcher to provide a simple hook interface for
+ * components that display live elapsed durations (e.g. task cards with
+ * running timers). All components share a single 1-second setInterval via
+ * the tick timer, and state updates are batched into a single
+ * requestAnimationFrame callback via the batched tick dispatcher.
+ *
+ * When 20+ task cards are visible simultaneously, this reduces re-renders
+ * from N individual setState calls to one batched reconciliation per tick.
+ *
+ * Usage:
+ * ```tsx
+ * // Replace:
+ * //   const [elapsed, setElapsed] = useState(() => formatElapsed(startedAt));
+ * //   useEffect(() => {
+ * //     const id = setInterval(() => setElapsed(formatElapsed(startedAt)), 1000);
+ * //     return () => clearInterval(id);
+ * //   }, [startedAt]);
+ * //
+ * // With:
+ * const elapsed = useTick(startedAt, formatElapsed);
+ * ```
+ */
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { registerTickUpdater } from "../polling/index.js";
+/**
+ * Subscribe to batched 1-second tick updates and return a formatted
+ * elapsed-time string that updates every second.
+ *
+ * State updates are batched across all `useTick` instances via RAF,
+ * so Preact reconciles all elapsed time displays in a single pass.
+ *
+ * Includes an equality check to skip redundant re-renders when the
+ * formatted value hasn't changed (e.g. timer precision edge cases,
+ * or formatters that produce the same string across consecutive ticks).
+ *
+ * @param startedAt - ISO 8601 timestamp of when the timer began.
+ * @param formatter - Pure function that converts a start timestamp to a
+ *                    display string. Called once per tick.
+ *                    Receives the ISO string and returns the formatted output.
+ * @returns The current formatted elapsed-time string.
+ */
+export function useTick(startedAt, formatter) {
+    // Keep refs current so the tick callback always uses the latest values
+    // without resubscribing to the timer.
+    const startedAtRef = useRef(startedAt);
+    startedAtRef.current = startedAt;
+    const formatterRef = useRef(formatter);
+    formatterRef.current = formatter;
+    const compute = useCallback(() => formatterRef.current(startedAtRef.current), []);
+    const [display, setDisplay] = useState(compute);
+    // Track the last emitted value so we can skip redundant setState calls.
+    // This ref is shared with the batched tick dispatcher — both sides
+    // read and write it to stay in sync.
+    const lastValueRef = useRef(display);
+    // Re-compute immediately when startedAt changes.
+    // This provides instant feedback (e.g. "0s" when a new task starts)
+    // without waiting for the next tick cycle.
+    useEffect(() => {
+        const next = compute();
+        if (next !== lastValueRef.current) {
+            lastValueRef.current = next;
+            setDisplay(next);
+        }
+    }, [startedAt, compute]);
+    // Register with the batched tick dispatcher.
+    // The dispatcher subscribes to onTick once and batches all registered
+    // setState calls into a single RAF frame.
+    useEffect(() => {
+        return registerTickUpdater(compute, setDisplay, lastValueRef);
+    }, [compute]);
+    return display;
+}
+//# sourceMappingURL=use-tick.js.map

package/dist/viewer/hooks/use-tick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tick.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-tick.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,OAAO,CACrB,SAAiB,EACjB,SAAwC;IAExC,uEAAuE;IACvE,sCAAsC;IACtC,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACvC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;IAEjC,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACvC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;IAEjC,MAAM,OAAO,GAAG,WAAW,CACzB,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,EAChD,EAAE,CACH,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEhD,wEAAwE;IACxE,mEAAmE;IACnE,qCAAqC;IACrC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,iDAAiD;IACjD,oEAAoE;IACpE,2CAA2C;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;QACvB,IAAI,IAAI,KAAK,YAAY,CAAC,OAAO,EAAE,CAAC;YAClC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,6CAA6C;IAC7C,sEAAsE;IACtE,0CAA0C;IAC1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/viewer/hooks/use-toast.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Simple toast notification state hook.
+ *
+ * Manages a single toast message with configurable type (success/error)
+ * and auto-dismiss duration. Extracted from PRDView to enable reuse
+ * across views that need lightweight user feedback.
+ */
+export type ToastType = "success" | "error";
+export interface ToastState {
+    /** Currently visible toast message, or null when hidden. */
+    toast: string | null;
+    /** Visual variant — green for success, red for error. */
+    toastType: ToastType;
+    /** Show a toast that auto-dismisses after `duration` ms (default 3000). */
+    showToast: (message: string, type?: ToastType, duration?: number) => void;
+}
+/**
+ * Hook providing toast notification state and display logic.
+ *
+ * Returns a stable `showToast` callback that sets the message, type,
+ * and schedules auto-dismissal. Only one toast is visible at a time —
+ * calling `showToast` again replaces the current toast.
+ */
+export declare function useToast(): ToastState;

package/dist/viewer/hooks/use-toast.js

@@ -0,0 +1,26 @@
+/**
+ * Simple toast notification state hook.
+ *
+ * Manages a single toast message with configurable type (success/error)
+ * and auto-dismiss duration. Extracted from PRDView to enable reuse
+ * across views that need lightweight user feedback.
+ */
+import { useState, useCallback } from "preact/hooks";
+/**
+ * Hook providing toast notification state and display logic.
+ *
+ * Returns a stable `showToast` callback that sets the message, type,
+ * and schedules auto-dismissal. Only one toast is visible at a time —
+ * calling `showToast` again replaces the current toast.
+ */
+export function useToast() {
+    const [toast, setToast] = useState(null);
+    const [toastType, setToastType] = useState("success");
+    const showToast = useCallback((message, type = "success", duration = 3000) => {
+        setToast(message);
+        setToastType(type);
+        setTimeout(() => setToast(null), duration);
+    }, []);
+    return { toast, toastType, showToast };
+}
+//# sourceMappingURL=use-toast.js.map

package/dist/viewer/hooks/use-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toast.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-toast.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAarD;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,SAAS,CAAC,CAAC;IAEjE,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,OAAe,EAAE,OAAkB,SAAS,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE;QAChE,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AACzC,CAAC"}

package/dist/viewer/hooks/use-zone-drag.d.ts

@@ -0,0 +1,30 @@
+/**
+ * useZoneDrag — Zone box drag-and-drop positioning hook.
+ *
+ * Handles dragging zone boxes within the SVG diagram. Tracks drag offsets
+ * per zone and distinguishes between click (toggle) and drag gestures.
+ */
+import type { RefObject } from "preact";
+import type { ViewBox } from "./use-pan-zoom.js";
+export interface ZoneDragState {
+    /** Per-zone position offsets from drag operations */
+    dragOffsets: Map<string, {
+        dx: number;
+        dy: number;
+    }>;
+    /** Whether a zone drag is currently active */
+    isDragging: () => boolean;
+    /** Start a zone drag from mousedown on a zone box */
+    startDrag: (zoneId: string, e: MouseEvent) => void;
+    /** Continue a zone drag during mousemove */
+    moveDrag: (e: MouseEvent) => void;
+    /** End a zone drag on mouseup, returning the zone ID if it was a click (not drag) */
+    endDrag: () => string | null;
+}
+/**
+ * Hook that manages zone box dragging within the SVG diagram.
+ *
+ * @param svgRef - Ref to the SVG element for coordinate conversion
+ * @param viewBox - Current viewBox for screen-to-SVG coordinate scaling
+ */
+export declare function useZoneDrag(svgRef: RefObject<SVGSVGElement>, viewBox: ViewBox): ZoneDragState;