@shepai/cli 1.75.0 → 1.76.0-pr237.a9ee7f9

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -1,14 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { ReactFlow, Background, Controls } from '@xyflow/react';
-import { Plus } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { ReactFlow, Background, Controls, ControlButton, useReactFlow } from '@xyflow/react';
+import { Plus, RotateCcw } from 'lucide-react';
 import { Button } from '../../ui/button.js';
 import { EmptyState } from '../../common/empty-state/index.js';
 import { FeatureNode } from '../../common/feature-node/index.js';
 import { RepositoryNode } from '../../common/repository-node/index.js';
 import { DependencyEdge } from './dependency-edge.js';
-export function FeaturesCanvas({ nodes, edges, selectedFeatureId, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, toolbar, emptyState, }) {
+const FALLBACK_VIEWPORT = { x: 30, y: 30, zoom: 0.85 };
+function ResetButton({ onResetViewport }) {
+    const { setViewport } = useReactFlow();
+    const handleReset = useCallback(() => {
+        const viewport = onResetViewport();
+        setViewport(viewport, { duration: 400 });
+    }, [onResetViewport, setViewport]);
+    return (_jsx(ControlButton, { onClick: handleReset, title: "Reset view", "aria-label": "Reset view", children: _jsx(RotateCcw, { style: { fill: 'none' } }) }));
+}
+export function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, onResetViewport, toolbar, emptyState, }) {
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
         repositoryNode: RepositoryNode,
@@ -30,5 +39,5 @@ export function FeaturesCanvas({ nodes, edges, selectedFeatureId, onNodesChange,
         }
         return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
     }
-    return (_jsx("div", { "data-testid": "features-canvas", "data-no-drawer-close": true, className: "pointer-events-auto h-full w-full", children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }));
+    return (_jsx("div", { "data-testid": "features-canvas", "data-no-drawer-close": true, className: "pointer-events-auto h-full w-full", children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, {}), _jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null }), toolbar] }) }));
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.d.ts

@@ -14,4 +14,7 @@ export declare const SingleRepositoryMultipleFeatures: Story;
 export declare const MultipleRepositories: Story;
 export declare const MultipleRepositoriesMixedConnections: Story;
 export declare const InteractiveWithRepository: Story;
+export declare const WithSavedViewport: Story;
+export declare const ZoomedOutViewport: Story;
+export declare const FastModeFeatures: Story;
 //# sourceMappingURL=features-canvas.stories.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAMnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAoDF,eAAO,MAAM,mCAAmC,EAAE,KAKjD,CAAC;AA4BF,eAAO,MAAM,gCAAgC,EAAE,KAO9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAiDF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAqGF,eAAO,MAAM,oCAAoC,EAAE,KAKlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC"}
+{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAoDF,eAAO,MAAM,mCAAmC,EAAE,KAKjD,CAAC;AA4BF,eAAO,MAAM,gCAAgC,EAAE,KAO9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAiDF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAqGF,eAAO,MAAM,oCAAoC,EAAE,KAKlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAIF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAsEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FeaturesCanvas } from './features-canvas.js';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+import { DEFAULT_VIEWPORT } from '../../../hooks/use-viewport-persistence.js';
 const meta = {
     title: 'Features/FeaturesCanvas',
     component: FeaturesCanvas,
@@ -516,3 +517,87 @@ export const InteractiveWithRepository = {
         onAddFeature: () => undefined,
     },
 };
+// --- Viewport Persistence Stories ---
+export const WithSavedViewport = {
+    args: {
+        nodes: repoFeatureNodes,
+        edges: repoFeatureEdges,
+        defaultViewport: { x: 200, y: 150, zoom: 1.0 },
+        onResetViewport: () => DEFAULT_VIEWPORT,
+    },
+};
+export const ZoomedOutViewport = {
+    args: {
+        nodes: mixedLayoutedNodes,
+        edges: mixedLayoutedEdges,
+        defaultViewport: { x: 0, y: 0, zoom: 0.5 },
+        onResetViewport: () => DEFAULT_VIEWPORT,
+    },
+};
+// --- Fast-mode feature scenario ---
+const fastModeNodesRaw = [
+    {
+        id: 'repo-1',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'shep-ai/cli' },
+    },
+    {
+        id: 'feat-fast-1',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Quick Bug Fix',
+            description: 'Fast-mode feature — skips SDLC, starts at implementation',
+            featureId: '#ff1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 30,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/quick-bug-fix',
+        },
+    },
+    {
+        id: 'feat-full-1',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Auth Module',
+            description: 'Full-pipeline feature — goes through all SDLC phases',
+            featureId: '#ff2',
+            lifecycle: 'requirements',
+            state: 'running',
+            progress: 15,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/auth-module',
+        },
+    },
+    {
+        id: 'feat-fast-2',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Update README',
+            description: 'Fast-mode feature — already done',
+            featureId: '#ff3',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/update-readme',
+        },
+    },
+];
+const fastModeEdges = [
+    { id: 'e-r1-ff1', source: 'repo-1', target: 'feat-fast-1', ...dashedEdge },
+    { id: 'e-r1-ff2', source: 'repo-1', target: 'feat-full-1', ...dashedEdge },
+    { id: 'e-r1-ff3', source: 'repo-1', target: 'feat-fast-2', ...dashedEdge },
+];
+const { nodes: fastModeLayoutedNodes, edges: fastModeLayoutedEdges } = layoutWithDagre(fastModeNodesRaw, fastModeEdges, { direction: 'LR' });
+export const FastModeFeatures = {
+    name: 'Fast Mode Features (Mixed Pipeline)',
+    args: {
+        nodes: fastModeLayoutedNodes,
+        edges: fastModeLayoutedEdges,
+    },
+};

package/dist/src/presentation/web/hooks/use-graph-state.d.ts

@@ -34,6 +34,8 @@ export interface UseGraphStateReturn {
     getFeatureRepositoryPath: (featureNodeId: string) => string | undefined;
     /** Stable lookup: get repository node data by nodeId. */
     getRepositoryData: (nodeId: string) => RepositoryNodeData | undefined;
+    /** Stable lookup: get the current number of repositories in the domain Map. */
+    getRepoMapSize: () => number;
     /** Update callbacks injected into node data (does NOT trigger re-render). */
     setCallbacks: (callbacks: GraphCallbacks) => void;
 }

package/dist/src/presentation/web/hooks/use-graph-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AAWF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,mBAAmB,CA+QrB"}
+{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AAWF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,mBAAmB,CAoRrB"}

package/dist/src/presentation/web/hooks/use-graph-state.js

@@ -235,6 +235,9 @@ export function useGraphState(initialNodes, initialEdges) {
     const getRepositoryData = useCallback((nodeId) => {
         return repoMapRef.current.get(nodeId)?.data;
     }, []);
+    const getRepoMapSize = useCallback(() => {
+        return repoMapRef.current.size;
+    }, []);
     const setCallbacks = useCallback((callbacks) => {
         callbacksRef.current = callbacks;
     }, []);
@@ -252,6 +255,7 @@ export function useGraphState(initialNodes, initialEdges) {
         replaceRepository,
         getFeatureRepositoryPath,
         getRepositoryData,
+        getRepoMapSize,
         setCallbacks,
     };
 }

package/dist/src/presentation/web/hooks/use-viewport-persistence.d.ts

@@ -0,0 +1,12 @@
+import type { Viewport } from '@xyflow/react';
+export type { Viewport } from '@xyflow/react';
+export declare const STORAGE_KEY = "shep-canvas-viewport";
+export declare const DEBOUNCE_MS = 500;
+export declare const DEFAULT_VIEWPORT: Viewport;
+export interface UseViewportPersistenceResult {
+    defaultViewport: Viewport;
+    onMoveEnd: (viewport: Viewport) => void;
+    resetViewport: () => Viewport;
+}
+export declare function useViewportPersistence(): UseViewportPersistenceResult;
+//# sourceMappingURL=use-viewport-persistence.d.ts.map

package/dist/src/presentation/web/hooks/use-viewport-persistence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport-persistence.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-viewport-persistence.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,eAAO,MAAM,WAAW,yBAAyB,CAAC;AAClD,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,gBAAgB,EAAE,QAAuC,CAAC;AAEvE,MAAM,WAAW,4BAA4B;IAC3C,eAAe,EAAE,QAAQ,CAAC;IAC1B,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,QAAQ,CAAC;CAC/B;AA6BD,wBAAgB,sBAAsB,IAAI,4BAA4B,CAmCrE"}

package/dist/src/presentation/web/hooks/use-viewport-persistence.js

@@ -0,0 +1,64 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+export const STORAGE_KEY = 'shep-canvas-viewport';
+export const DEBOUNCE_MS = 500;
+export const DEFAULT_VIEWPORT = { x: 30, y: 30, zoom: 0.85 };
+function isValidViewport(value) {
+    if (value == null || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+    const v = value;
+    return (typeof v.x === 'number' &&
+        typeof v.y === 'number' &&
+        typeof v.zoom === 'number' &&
+        Number.isFinite(v.x) &&
+        Number.isFinite(v.y) &&
+        Number.isFinite(v.zoom) &&
+        v.zoom > 0);
+}
+function readViewport() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw == null)
+            return DEFAULT_VIEWPORT;
+        const parsed = JSON.parse(raw);
+        return isValidViewport(parsed) ? parsed : DEFAULT_VIEWPORT;
+    }
+    catch {
+        return DEFAULT_VIEWPORT;
+    }
+}
+export function useViewportPersistence() {
+    const defaultViewport = useRef(readViewport()).current;
+    const timerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current != null) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    const onMoveEnd = useCallback((viewport) => {
+        if (timerRef.current != null) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            try {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(viewport));
+            }
+            catch {
+                // Silently ignore localStorage errors (quota exceeded, private browsing, etc.)
+            }
+        }, DEBOUNCE_MS);
+    }, []);
+    const resetViewport = useCallback(() => {
+        try {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+        catch {
+            // Silently ignore localStorage errors
+        }
+        return DEFAULT_VIEWPORT;
+    }, []);
+    return { defaultViewport, onMoveEnd, resetViewport };
+}