@ankhorage/zora 20.1.6 → 20.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 20.2.1
+
+### Patch Changes
+
+- 38db5b8: Update Ankhorage dependencies: `@ankhorage/contracts`, `@ankhorage/surface`.
+
+## 20.2.0
+
+### Minor Changes
+
+- 25d5ed9: Add a materializable Cytoscape-backed GraphView web artifact with centralized layout/viewport ownership and optional rich React node rendering.
+
 ## 20.1.6
 
 ### Patch Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # @ankhorage/zora
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v20.1.6](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v20.2.1](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
 
 Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
 

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { GraphViewElementEventType, GraphViewNode, GraphViewNodeRenderContext, GraphViewRenderedNode, GraphViewSize } from './GraphView';
+interface GraphNodeOverlayProps {
+    readonly nodes: readonly GraphViewNode[];
+    readonly renderedNodes: readonly GraphViewRenderedNode[];
+    readonly renderNode: (context: GraphViewNodeRenderContext) => React.ReactNode;
+    readonly onNodeEvent: (id: string, type: GraphViewElementEventType) => void;
+    readonly onNodeSize: (id: string, size: GraphViewSize) => void;
+}
+/*** Render optional React node content above Cytoscape at its authoritative rendered positions. */
+export declare function GraphNodeOverlay(props: GraphNodeOverlayProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=GraphNodeOverlay.d.ts.map

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphNodeOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACb,0BAA0B,EAC1B,qBAAqB,EACrB,aAAa,EACd,MAAM,aAAa,CAAC;AAErB,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IACzC,QAAQ,CAAC,aAAa,EAAE,SAAS,qBAAqB,EAAE,CAAC;IACzD,QAAQ,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAChE;AAED,mGAAmG;AACnG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAgC5D"}

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.js

@@ -0,0 +1,71 @@
+'use client';
+import React from 'react';
+/*** Render optional React node content above Cytoscape at its authoritative rendered positions. */
+export function GraphNodeOverlay(props) {
+    const nodesById = React.useMemo(() => new Map(props.nodes.map((node) => [node.id, node])), [props.nodes]);
+    return (<div aria-hidden style={{
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            position: 'absolute',
+        }}>
+      {props.renderedNodes.map((renderedNode) => {
+            const node = nodesById.get(renderedNode.id);
+            if (!node)
+                return null;
+            return (<MeasuredGraphNode key={node.id} node={node} renderedNode={renderedNode} renderNode={props.renderNode} onNodeEvent={props.onNodeEvent} onNodeSize={props.onNodeSize}/>);
+        })}
+    </div>);
+}
+/*** Measure one rich node at model scale and translate its DOM interactions into graph events. */
+function MeasuredGraphNode(props) {
+    const elementRef = React.useRef(null);
+    const { node, onNodeSize, renderedNode } = props;
+    React.useLayoutEffect(() => {
+        const element = elementRef.current;
+        if (element === null)
+            return;
+        reportElementSize(element, node.id, onNodeSize);
+        const Observer = readResizeObserverConstructor();
+        if (Observer === null)
+            return;
+        const observer = new Observer(() => reportElementSize(element, node.id, onNodeSize));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [node.id, onNodeSize]);
+    return (<div ref={(element) => {
+            elementRef.current = element;
+        }} style={{
+            left: renderedNode.position.x,
+            pointerEvents: 'auto',
+            position: 'absolute',
+            top: renderedNode.position.y,
+            transform: `translate(-50%, -50%) scale(${renderedNode.zoom})`,
+            transformOrigin: 'center',
+        }} onClick={() => props.onNodeEvent(node.id, 'press')} onDoubleClick={() => props.onNodeEvent(node.id, 'double-press')} onMouseEnter={() => props.onNodeEvent(node.id, 'pointer-enter')} onMouseLeave={() => props.onNodeEvent(node.id, 'pointer-leave')}>
+      {props.renderNode({
+            hovered: renderedNode.hovered,
+            node,
+            selected: renderedNode.selected,
+            zoom: renderedNode.zoom,
+        })}
+    </div>);
+}
+/*** Report unscaled DOM dimensions only when a measurable node has positive size. */
+function reportElementSize(element, nodeId, onNodeSize) {
+    const measured = element;
+    if (typeof measured.offsetWidth !== 'number' || typeof measured.offsetHeight !== 'number')
+        return;
+    if (measured.offsetWidth <= 0 || measured.offsetHeight <= 0)
+        return;
+    onNodeSize(nodeId, {
+        width: measured.offsetWidth,
+        height: measured.offsetHeight,
+    });
+}
+/*** Read ResizeObserver without requiring the DOM lib in the package TypeScript target. */
+function readResizeObserverConstructor() {
+    const observer = globalThis.ResizeObserver;
+    return observer ?? null;
+}
+//# sourceMappingURL=GraphNodeOverlay.js.map

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphNodeOverlay.js","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {\n  GraphViewElementEventType,\n  GraphViewNode,\n  GraphViewNodeRenderContext,\n  GraphViewRenderedNode,\n  GraphViewSize,\n} from './GraphView';\n\ninterface GraphNodeOverlayProps {\n  readonly nodes: readonly GraphViewNode[];\n  readonly renderedNodes: readonly GraphViewRenderedNode[];\n  readonly renderNode: (context: GraphViewNodeRenderContext) => React.ReactNode;\n  readonly onNodeEvent: (id: string, type: GraphViewElementEventType) => void;\n  readonly onNodeSize: (id: string, size: GraphViewSize) => void;\n}\n\n/*** Render optional React node content above Cytoscape at its authoritative rendered positions. */\nexport function GraphNodeOverlay(props: GraphNodeOverlayProps) {\n  const nodesById = React.useMemo(\n    () => new Map(props.nodes.map((node) => [node.id, node] as const)),\n    [props.nodes],\n  );\n\n  return (\n    <div\n      aria-hidden\n      style={{\n        inset: 0,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        position: 'absolute',\n      }}\n    >\n      {props.renderedNodes.map((renderedNode) => {\n        const node = nodesById.get(renderedNode.id);\n        if (!node) return null;\n        return (\n          <MeasuredGraphNode\n            key={node.id}\n            node={node}\n            renderedNode={renderedNode}\n            renderNode={props.renderNode}\n            onNodeEvent={props.onNodeEvent}\n            onNodeSize={props.onNodeSize}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\ninterface MeasuredGraphNodeProps {\n  readonly node: GraphViewNode;\n  readonly renderedNode: GraphViewRenderedNode;\n  readonly renderNode: GraphNodeOverlayProps['renderNode'];\n  readonly onNodeEvent: GraphNodeOverlayProps['onNodeEvent'];\n  readonly onNodeSize: GraphNodeOverlayProps['onNodeSize'];\n}\n\n/*** Measure one rich node at model scale and translate its DOM interactions into graph events. */\nfunction MeasuredGraphNode(props: MeasuredGraphNodeProps) {\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n  const { node, onNodeSize, renderedNode } = props;\n\n  React.useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (element === null) return;\n    reportElementSize(element, node.id, onNodeSize);\n\n    const Observer = readResizeObserverConstructor();\n    if (Observer === null) return;\n    const observer = new Observer(() => reportElementSize(element, node.id, onNodeSize));\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [node.id, onNodeSize]);\n\n  return (\n    <div\n      ref={(element) => {\n        elementRef.current = element;\n      }}\n      style={{\n        left: renderedNode.position.x,\n        pointerEvents: 'auto',\n        position: 'absolute',\n        top: renderedNode.position.y,\n        transform: `translate(-50%, -50%) scale(${renderedNode.zoom})`,\n        transformOrigin: 'center',\n      }}\n      onClick={() => props.onNodeEvent(node.id, 'press')}\n      onDoubleClick={() => props.onNodeEvent(node.id, 'double-press')}\n      onMouseEnter={() => props.onNodeEvent(node.id, 'pointer-enter')}\n      onMouseLeave={() => props.onNodeEvent(node.id, 'pointer-leave')}\n    >\n      {props.renderNode({\n        hovered: renderedNode.hovered,\n        node,\n        selected: renderedNode.selected,\n        zoom: renderedNode.zoom,\n      })}\n    </div>\n  );\n}\n\n/*** Report unscaled DOM dimensions only when a measurable node has positive size. */\nfunction reportElementSize(\n  element: unknown,\n  nodeId: string,\n  onNodeSize: (id: string, size: GraphViewSize) => void,\n) {\n  const measured = element as {\n    readonly offsetHeight?: unknown;\n    readonly offsetWidth?: unknown;\n  };\n  if (typeof measured.offsetWidth !== 'number' || typeof measured.offsetHeight !== 'number') return;\n  if (measured.offsetWidth <= 0 || measured.offsetHeight <= 0) return;\n  onNodeSize(nodeId, {\n    width: measured.offsetWidth,\n    height: measured.offsetHeight,\n  });\n}\n\n/*** Read ResizeObserver without requiring the DOM lib in the package TypeScript target. */\nfunction readResizeObserverConstructor(): ResizeObserverConstructorLike | null {\n  const observer = (\n    globalThis as unknown as {\n      ResizeObserver?: ResizeObserverConstructorLike;\n    }\n  ).ResizeObserver;\n  return observer ?? null;\n}\n\ninterface ResizeObserverLike {\n  disconnect(): void;\n  observe(target: unknown): void;\n}\n\ntype ResizeObserverConstructorLike = new (callback: () => void) => ResizeObserverLike;\n"]}

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphView.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+export type GraphViewLayoutName = 'breadthfirst' | 'circle' | 'concentric' | 'elk' | 'grid';
+export type GraphViewElementEventType = 'press' | 'double-press' | 'select' | 'unselect' | 'pointer-enter' | 'pointer-leave';
+export interface GraphViewNode {
+    readonly id: string;
+    readonly label?: string;
+    readonly parentId?: string;
+    readonly classes?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewEdge {
+    readonly id?: string;
+    readonly source: string;
+    readonly target: string;
+    readonly classes?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewStyleRule {
+    readonly selector: string;
+    readonly style: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewPoint {
+    readonly x: number;
+    readonly y: number;
+}
+export interface GraphViewSize {
+    readonly width: number;
+    readonly height: number;
+}
+export interface GraphViewNodeRenderContext {
+    readonly hovered: boolean;
+    readonly node: GraphViewNode;
+    readonly selected: boolean;
+    readonly zoom: number;
+}
+export interface GraphViewRenderedNode {
+    readonly hovered: boolean;
+    readonly id: string;
+    readonly position: GraphViewPoint;
+    readonly selected: boolean;
+    readonly zoom: number;
+}
+export interface GraphViewViewport {
+    readonly zoom: number;
+    readonly pan: GraphViewPoint;
+}
+export interface GraphViewFitOptions {
+    readonly nodeIds?: readonly string[];
+    readonly padding?: number;
+}
+export interface GraphViewElementEvent {
+    readonly id: string;
+    readonly type: GraphViewElementEventType;
+}
+export interface GraphViewController {
+    fit(options?: GraphViewFitOptions): void;
+    getViewport(): GraphViewViewport;
+    setPan(pan: GraphViewPoint): void;
+    setZoom(zoom: number): void;
+    zoomBy(factor: number): void;
+}
+export interface GraphViewProps {
+    readonly nodes: readonly GraphViewNode[];
+    readonly edges: readonly GraphViewEdge[];
+    readonly layout?: GraphViewLayoutName;
+    readonly layoutOptions?: Readonly<Record<string, unknown>>;
+    readonly spacingFactor?: number;
+    readonly styleRules?: readonly GraphViewStyleRule[];
+    readonly selectedNodeIds?: readonly string[];
+    readonly renderNode?: (context: GraphViewNodeRenderContext) => React.ReactNode;
+    readonly getNodeSize?: (node: GraphViewNode) => GraphViewSize | undefined;
+    readonly fitPadding?: number;
+    readonly minZoom?: number;
+    readonly maxZoom?: number;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly ariaLabel?: string;
+    readonly onReady?: (controller: GraphViewController) => void;
+    readonly onLayoutComplete?: (controller: GraphViewController) => void;
+    readonly onNodeEvent?: (event: GraphViewElementEvent) => void;
+    readonly onEdgeEvent?: (event: GraphViewElementEvent) => void;
+    readonly onViewportChange?: (viewport: GraphViewViewport) => void;
+}
+export type GraphViewCallbacks = Pick<GraphViewProps, 'onEdgeEvent' | 'onLayoutComplete' | 'onNodeEvent' | 'onReady' | 'onViewportChange'>;
+/*** Render a browser graph while one runtime owns Cytoscape layout, viewport, and disposal. */
+export declare function GraphView(props: GraphViewProps): React.JSX.Element;
+//# sourceMappingURL=GraphView.d.ts.map

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphView.d.ts","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/GraphView.tsx"],"names":[],"mappings":"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"}

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphView.js

@@ -0,0 +1,132 @@
+'use client';
+import React from 'react';
+import { createGraphRuntime } from './createGraphRuntime';
+import { GraphNodeOverlay } from './GraphNodeOverlay';
+/*** Render a browser graph while one runtime owns Cytoscape layout, viewport, and disposal. */
+export function GraphView(props) {
+    const { containerRef, renderedNodes, runtimeRef } = useGraphViewRuntime(props);
+    return (<div aria-label={props.ariaLabel ?? 'Graph'} className={props.className} role="application" style={{
+            height: '100%',
+            minHeight: 0,
+            minWidth: 0,
+            position: 'relative',
+            width: '100%',
+            ...props.style,
+        }}>
+      <div ref={containerRef} style={{ height: '100%', width: '100%' }}/>
+      {props.renderNode ? (<GraphNodeOverlay nodes={props.nodes} renderedNodes={renderedNodes} renderNode={props.renderNode} onNodeEvent={(id, type) => runtimeRef.current?.handleOverlayNodeEvent(id, type)} onNodeSize={(id, size) => runtimeRef.current?.setNodeSize(id, size)}/>) : null}
+    </div>);
+}
+/*** Compose React synchronization around the single imperative graph runtime. */
+function useGraphViewRuntime(props) {
+    const containerRef = React.useRef(null);
+    const runtimeRef = React.useRef(null);
+    const callbacksRef = useGraphCallbacksRef(props);
+    const [renderedNodes, setRenderedNodes] = React.useState([]);
+    useRuntimeLifecycle(containerRef, runtimeRef, callbacksRef);
+    useRuntimeGraphUpdate(runtimeRef, props);
+    useRuntimeSelection(runtimeRef, props.selectedNodeIds);
+    useRenderedNodeSubscription(runtimeRef, props.renderNode, setRenderedNodes);
+    useKnownNodeSizes(runtimeRef, props.nodes, props.getNodeSize);
+    return { containerRef, renderedNodes, runtimeRef };
+}
+/*** Keep the callback ref current without mutating refs during render. */
+function useGraphCallbacksRef(props) {
+    const callbacksRef = React.useRef(readCallbacks(props));
+    const { onEdgeEvent, onLayoutComplete, onNodeEvent, onReady, onViewportChange } = props;
+    React.useEffect(() => {
+        callbacksRef.current = {
+            onEdgeEvent,
+            onLayoutComplete,
+            onNodeEvent,
+            onReady,
+            onViewportChange,
+        };
+    }, [onEdgeEvent, onLayoutComplete, onNodeEvent, onReady, onViewportChange]);
+    return callbacksRef;
+}
+/*** Create and dispose the runtime only with the underlying browser container lifetime. */
+function useRuntimeLifecycle(containerRef, runtimeRef, callbacksRef) {
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        const runtime = createGraphRuntime(container, callbacksRef);
+        runtimeRef.current = runtime;
+        return () => {
+            runtime.destroy();
+            runtimeRef.current = null;
+        };
+    }, [callbacksRef, containerRef, runtimeRef]);
+}
+/*** Synchronize graph data and layout policy without exposing Cytoscape to React. */
+function useRuntimeGraphUpdate(runtimeRef, props) {
+    const { edges, fitPadding, layout, layoutOptions, maxZoom, minZoom, nodes, renderNode, spacingFactor, styleRules, } = props;
+    React.useEffect(() => {
+        runtimeRef.current?.update({
+            edges,
+            fitPadding,
+            layout,
+            layoutOptions,
+            maxZoom,
+            minZoom,
+            nodes,
+            richNodeRendering: renderNode !== undefined,
+            spacingFactor,
+            styleRules,
+        });
+    }, [
+        edges,
+        fitPadding,
+        layout,
+        layoutOptions,
+        maxZoom,
+        minZoom,
+        nodes,
+        renderNode,
+        runtimeRef,
+        spacingFactor,
+        styleRules,
+    ]);
+}
+/*** Synchronize optional controlled selection independently from graph layout. */
+function useRuntimeSelection(runtimeRef, selectedNodeIds) {
+    React.useEffect(() => {
+        runtimeRef.current?.setSelectedNodeIds(selectedNodeIds);
+    }, [runtimeRef, selectedNodeIds]);
+}
+/*** Subscribe the optional rich-node overlay to rendered runtime positions. */
+function useRenderedNodeSubscription(runtimeRef, renderNode, setRenderedNodes) {
+    React.useEffect(() => {
+        const runtime = runtimeRef.current;
+        if (runtime === null || renderNode === undefined) {
+            setRenderedNodes([]);
+            return;
+        }
+        return runtime.subscribeRenderedNodes(setRenderedNodes);
+    }, [renderNode, runtimeRef, setRenderedNodes]);
+}
+/*** Seed known rich-node dimensions without requiring DOM measurement. */
+function useKnownNodeSizes(runtimeRef, nodes, getNodeSize) {
+    React.useEffect(() => {
+        const runtime = runtimeRef.current;
+        if (runtime === null || getNodeSize === undefined)
+            return;
+        for (const node of nodes) {
+            const size = getNodeSize(node);
+            if (size)
+                runtime.setNodeSize(node.id, size);
+        }
+    }, [getNodeSize, nodes, runtimeRef]);
+}
+/*** Read callback props for the initial runtime callback-ref value. */
+function readCallbacks(props) {
+    return {
+        onEdgeEvent: props.onEdgeEvent,
+        onLayoutComplete: props.onLayoutComplete,
+        onNodeEvent: props.onNodeEvent,
+        onReady: props.onReady,
+        onViewportChange: props.onViewportChange,
+    };
+}
+//# sourceMappingURL=GraphView.js.map

package/dist/features/graph-view/adapters/inbound/web-artifact/GraphView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphView.js","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/GraphView.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { CytoscapeOptions } from 'cytoscape';\nimport React from 'react';\n\nimport { createGraphRuntime, type GraphRuntime } from './createGraphRuntime';\nimport { GraphNodeOverlay } from './GraphNodeOverlay';\n\nexport type GraphViewLayoutName = 'breadthfirst' | 'circle' | 'concentric' | 'elk' | 'grid';\nexport type GraphViewElementEventType =\n  'press' | 'double-press' | 'select' | 'unselect' | 'pointer-enter' | 'pointer-leave';\n\nexport interface GraphViewNode {\n  readonly id: string;\n  readonly label?: string;\n  readonly parentId?: string;\n  readonly classes?: string;\n  readonly data?: Readonly<Record<string, unknown>>;\n}\n\nexport interface GraphViewEdge {\n  readonly id?: string;\n  readonly source: string;\n  readonly target: string;\n  readonly classes?: string;\n  readonly data?: Readonly<Record<string, unknown>>;\n}\n\nexport interface GraphViewStyleRule {\n  readonly selector: string;\n  readonly style: Readonly<Record<string, unknown>>;\n}\n\nexport interface GraphViewPoint {\n  readonly x: number;\n  readonly y: number;\n}\n\nexport interface GraphViewSize {\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface GraphViewNodeRenderContext {\n  readonly hovered: boolean;\n  readonly node: GraphViewNode;\n  readonly selected: boolean;\n  readonly zoom: number;\n}\n\nexport interface GraphViewRenderedNode {\n  readonly hovered: boolean;\n  readonly id: string;\n  readonly position: GraphViewPoint;\n  readonly selected: boolean;\n  readonly zoom: number;\n}\n\nexport interface GraphViewViewport {\n  readonly zoom: number;\n  readonly pan: GraphViewPoint;\n}\n\nexport interface GraphViewFitOptions {\n  readonly nodeIds?: readonly string[];\n  readonly padding?: number;\n}\n\nexport interface GraphViewElementEvent {\n  readonly id: string;\n  readonly type: GraphViewElementEventType;\n}\n\nexport interface GraphViewController {\n  fit(options?: GraphViewFitOptions): void;\n  getViewport(): GraphViewViewport;\n  setPan(pan: GraphViewPoint): void;\n  setZoom(zoom: number): void;\n  zoomBy(factor: number): void;\n}\n\nexport interface GraphViewProps {\n  readonly nodes: readonly GraphViewNode[];\n  readonly edges: readonly GraphViewEdge[];\n  readonly layout?: GraphViewLayoutName;\n  readonly layoutOptions?: Readonly<Record<string, unknown>>;\n  readonly spacingFactor?: number;\n  readonly styleRules?: readonly GraphViewStyleRule[];\n  readonly selectedNodeIds?: readonly string[];\n  readonly renderNode?: (context: GraphViewNodeRenderContext) => React.ReactNode;\n  readonly getNodeSize?: (node: GraphViewNode) => GraphViewSize | undefined;\n  readonly fitPadding?: number;\n  readonly minZoom?: number;\n  readonly maxZoom?: number;\n  readonly className?: string;\n  readonly style?: React.CSSProperties;\n  readonly ariaLabel?: string;\n  readonly onReady?: (controller: GraphViewController) => void;\n  readonly onLayoutComplete?: (controller: GraphViewController) => void;\n  readonly onNodeEvent?: (event: GraphViewElementEvent) => void;\n  readonly onEdgeEvent?: (event: GraphViewElementEvent) => void;\n  readonly onViewportChange?: (viewport: GraphViewViewport) => void;\n}\n\nexport type GraphViewCallbacks = Pick<\n  GraphViewProps,\n  'onEdgeEvent' | 'onLayoutComplete' | 'onNodeEvent' | 'onReady' | 'onViewportChange'\n>;\n\ntype GraphContainer = NonNullable<CytoscapeOptions['container']>;\n\n/*** Render a browser graph while one runtime owns Cytoscape layout, viewport, and disposal. */\nexport function GraphView(props: GraphViewProps) {\n  const { containerRef, renderedNodes, runtimeRef } = useGraphViewRuntime(props);\n\n  return (\n    <div\n      aria-label={props.ariaLabel ?? 'Graph'}\n      className={props.className}\n      role=\"application\"\n      style={{\n        height: '100%',\n        minHeight: 0,\n        minWidth: 0,\n        position: 'relative',\n        width: '100%',\n        ...props.style,\n      }}\n    >\n      <div ref={containerRef} style={{ height: '100%', width: '100%' }} />\n      {props.renderNode ? (\n        <GraphNodeOverlay\n          nodes={props.nodes}\n          renderedNodes={renderedNodes}\n          renderNode={props.renderNode}\n          onNodeEvent={(id, type) => runtimeRef.current?.handleOverlayNodeEvent(id, type)}\n          onNodeSize={(id, size) => runtimeRef.current?.setNodeSize(id, size)}\n        />\n      ) : null}\n    </div>\n  );\n}\n\n/*** Compose React synchronization around the single imperative graph runtime. */\nfunction useGraphViewRuntime(props: GraphViewProps) {\n  const containerRef = React.useRef<GraphContainer | null>(null);\n  const runtimeRef = React.useRef<GraphRuntime | null>(null);\n  const callbacksRef = useGraphCallbacksRef(props);\n  const [renderedNodes, setRenderedNodes] = React.useState<readonly GraphViewRenderedNode[]>([]);\n\n  useRuntimeLifecycle(containerRef, runtimeRef, callbacksRef);\n  useRuntimeGraphUpdate(runtimeRef, props);\n  useRuntimeSelection(runtimeRef, props.selectedNodeIds);\n  useRenderedNodeSubscription(runtimeRef, props.renderNode, setRenderedNodes);\n  useKnownNodeSizes(runtimeRef, props.nodes, props.getNodeSize);\n\n  return { containerRef, renderedNodes, runtimeRef };\n}\n\n/*** Keep the callback ref current without mutating refs during render. */\nfunction useGraphCallbacksRef(props: GraphViewProps) {\n  const callbacksRef = React.useRef<GraphViewCallbacks>(readCallbacks(props));\n  const { onEdgeEvent, onLayoutComplete, onNodeEvent, onReady, onViewportChange } = props;\n\n  React.useEffect(() => {\n    callbacksRef.current = {\n      onEdgeEvent,\n      onLayoutComplete,\n      onNodeEvent,\n      onReady,\n      onViewportChange,\n    };\n  }, [onEdgeEvent, onLayoutComplete, onNodeEvent, onReady, onViewportChange]);\n\n  return callbacksRef;\n}\n\n/*** Create and dispose the runtime only with the underlying browser container lifetime. */\nfunction useRuntimeLifecycle(\n  containerRef: { current: GraphContainer | null },\n  runtimeRef: { current: GraphRuntime | null },\n  callbacksRef: { current: GraphViewCallbacks },\n) {\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (container === null) return;\n    const runtime = createGraphRuntime(container, callbacksRef);\n    runtimeRef.current = runtime;\n    return () => {\n      runtime.destroy();\n      runtimeRef.current = null;\n    };\n  }, [callbacksRef, containerRef, runtimeRef]);\n}\n\n/*** Synchronize graph data and layout policy without exposing Cytoscape to React. */\nfunction useRuntimeGraphUpdate(\n  runtimeRef: { current: GraphRuntime | null },\n  props: GraphViewProps,\n) {\n  const {\n    edges,\n    fitPadding,\n    layout,\n    layoutOptions,\n    maxZoom,\n    minZoom,\n    nodes,\n    renderNode,\n    spacingFactor,\n    styleRules,\n  } = props;\n\n  React.useEffect(() => {\n    runtimeRef.current?.update({\n      edges,\n      fitPadding,\n      layout,\n      layoutOptions,\n      maxZoom,\n      minZoom,\n      nodes,\n      richNodeRendering: renderNode !== undefined,\n      spacingFactor,\n      styleRules,\n    });\n  }, [\n    edges,\n    fitPadding,\n    layout,\n    layoutOptions,\n    maxZoom,\n    minZoom,\n    nodes,\n    renderNode,\n    runtimeRef,\n    spacingFactor,\n    styleRules,\n  ]);\n}\n\n/*** Synchronize optional controlled selection independently from graph layout. */\nfunction useRuntimeSelection(\n  runtimeRef: { current: GraphRuntime | null },\n  selectedNodeIds: readonly string[] | undefined,\n) {\n  React.useEffect(() => {\n    runtimeRef.current?.setSelectedNodeIds(selectedNodeIds);\n  }, [runtimeRef, selectedNodeIds]);\n}\n\n/*** Subscribe the optional rich-node overlay to rendered runtime positions. */\nfunction useRenderedNodeSubscription(\n  runtimeRef: { current: GraphRuntime | null },\n  renderNode: GraphViewProps['renderNode'],\n  setRenderedNodes: (nodes: readonly GraphViewRenderedNode[]) => void,\n) {\n  React.useEffect(() => {\n    const runtime = runtimeRef.current;\n    if (runtime === null || renderNode === undefined) {\n      setRenderedNodes([]);\n      return;\n    }\n    return runtime.subscribeRenderedNodes(setRenderedNodes);\n  }, [renderNode, runtimeRef, setRenderedNodes]);\n}\n\n/*** Seed known rich-node dimensions without requiring DOM measurement. */\nfunction useKnownNodeSizes(\n  runtimeRef: { current: GraphRuntime | null },\n  nodes: readonly GraphViewNode[],\n  getNodeSize: GraphViewProps['getNodeSize'],\n) {\n  React.useEffect(() => {\n    const runtime = runtimeRef.current;\n    if (runtime === null || getNodeSize === undefined) return;\n    for (const node of nodes) {\n      const size = getNodeSize(node);\n      if (size) runtime.setNodeSize(node.id, size);\n    }\n  }, [getNodeSize, nodes, runtimeRef]);\n}\n\n/*** Read callback props for the initial runtime callback-ref value. */\nfunction readCallbacks(props: GraphViewProps): GraphViewCallbacks {\n  return {\n    onEdgeEvent: props.onEdgeEvent,\n    onLayoutComplete: props.onLayoutComplete,\n    onNodeEvent: props.onNodeEvent,\n    onReady: props.onReady,\n    onViewportChange: props.onViewportChange,\n  };\n}\n"]}

package/dist/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.d.ts

@@ -0,0 +1,7 @@
+import type { Core } from 'cytoscape';
+import type { GraphViewCallbacks, GraphViewController } from './GraphView';
+/*** Bind stable Cytoscape events that always read the latest React callbacks. */
+export declare function bindGraphEvents(cy: Core, callbacksRef: {
+    current: GraphViewCallbacks;
+}, controller: GraphViewController, onRuntimeChange: () => void): () => void;
+//# sourceMappingURL=bindGraphEvents.d.ts.map

package/dist/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bindGraphEvents.d.ts","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAe,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EAEpB,MAAM,aAAa,CAAC;AAErB,iFAAiF;AACjF,wBAAgB,eAAe,CAC7B,EAAE,EAAE,IAAI,EACR,YAAY,EAAE;IAAE,OAAO,EAAE,kBAAkB,CAAA;CAAE,EAC7C,UAAU,EAAE,mBAAmB,EAC/B,eAAe,EAAE,MAAM,IAAI,cAe5B"}

package/dist/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.js

@@ -0,0 +1,59 @@
+/*** Bind stable Cytoscape events that always read the latest React callbacks. */
+export function bindGraphEvents(cy, callbacksRef, controller, onRuntimeChange) {
+    const nodeHandlers = bindElementEvents(cy, 'node', callbacksRef, onRuntimeChange);
+    const edgeHandlers = bindElementEvents(cy, 'edge', callbacksRef, onRuntimeChange);
+    const viewportHandler = () => {
+        callbacksRef.current.onViewportChange?.(controller.getViewport());
+        onRuntimeChange();
+    };
+    cy.on('zoom pan', viewportHandler);
+    return () => {
+        unbindElementEvents(cy, 'node', nodeHandlers);
+        unbindElementEvents(cy, 'edge', edgeHandlers);
+        cy.off('zoom pan', viewportHandler);
+    };
+}
+/*** Bind one selector's translated event set without resubscribing on callback changes. */
+function bindElementEvents(cy, selector, callbacksRef, onRuntimeChange) {
+    return EVENT_TYPES.map(([cytoscapeEvent, type]) => {
+        const handler = (event) => {
+            const target = event.target;
+            if (!isGraphEventTarget(target))
+                return;
+            emitElementEvent(callbacksRef.current, selector, {
+                id: target.id(),
+                type,
+            });
+            onRuntimeChange();
+        };
+        cy.on(cytoscapeEvent, selector, handler);
+        return { cytoscapeEvent, handler };
+    });
+}
+/*** Return whether a Cytoscape event target exposes the element identifier contract. */
+function isGraphEventTarget(value) {
+    return (typeof value === 'object' && value !== null && 'id' in value && typeof value.id === 'function');
+}
+/*** Emit one translated element event without dynamic callback-property access. */
+function emitElementEvent(callbacks, selector, event) {
+    if (selector === 'node') {
+        callbacks.onNodeEvent?.(event);
+        return;
+    }
+    callbacks.onEdgeEvent?.(event);
+}
+/*** Remove one selector's event handlers using the exact bound callback identities. */
+function unbindElementEvents(cy, selector, handlers) {
+    for (const { cytoscapeEvent, handler } of handlers) {
+        cy.off(cytoscapeEvent, selector, handler);
+    }
+}
+const EVENT_TYPES = [
+    ['tap', 'press'],
+    ['dbltap', 'double-press'],
+    ['select', 'select'],
+    ['unselect', 'unselect'],
+    ['mouseover', 'pointer-enter'],
+    ['mouseout', 'pointer-leave'],
+];
+//# sourceMappingURL=bindGraphEvents.js.map

package/dist/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bindGraphEvents.js","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Core, EventObject } from 'cytoscape';\n\nimport type {\n  GraphViewCallbacks,\n  GraphViewController,\n  GraphViewElementEventType,\n} from './GraphView';\n\n/*** Bind stable Cytoscape events that always read the latest React callbacks. */\nexport function bindGraphEvents(\n  cy: Core,\n  callbacksRef: { current: GraphViewCallbacks },\n  controller: GraphViewController,\n  onRuntimeChange: () => void,\n) {\n  const nodeHandlers = bindElementEvents(cy, 'node', callbacksRef, onRuntimeChange);\n  const edgeHandlers = bindElementEvents(cy, 'edge', callbacksRef, onRuntimeChange);\n  const viewportHandler = () => {\n    callbacksRef.current.onViewportChange?.(controller.getViewport());\n    onRuntimeChange();\n  };\n  cy.on('zoom pan', viewportHandler);\n\n  return () => {\n    unbindElementEvents(cy, 'node', nodeHandlers);\n    unbindElementEvents(cy, 'edge', edgeHandlers);\n    cy.off('zoom pan', viewportHandler);\n  };\n}\n\ntype ElementSelector = 'edge' | 'node';\n\ninterface BoundElementHandler {\n  readonly cytoscapeEvent: string;\n  readonly handler: (event: EventObject) => void;\n}\n\n/*** Bind one selector's translated event set without resubscribing on callback changes. */\nfunction bindElementEvents(\n  cy: Core,\n  selector: ElementSelector,\n  callbacksRef: { current: GraphViewCallbacks },\n  onRuntimeChange: () => void,\n): readonly BoundElementHandler[] {\n  return EVENT_TYPES.map(([cytoscapeEvent, type]) => {\n    const handler = (event: EventObject) => {\n      const target: unknown = event.target;\n      if (!isGraphEventTarget(target)) return;\n      emitElementEvent(callbacksRef.current, selector, {\n        id: target.id(),\n        type,\n      });\n      onRuntimeChange();\n    };\n    cy.on(cytoscapeEvent, selector, handler);\n    return { cytoscapeEvent, handler };\n  });\n}\n\n/*** Return whether a Cytoscape event target exposes the element identifier contract. */\nfunction isGraphEventTarget(value: unknown): value is GraphEventTarget {\n  return (\n    typeof value === 'object' && value !== null && 'id' in value && typeof value.id === 'function'\n  );\n}\n\ninterface GraphEventTarget {\n  id(): string;\n}\n\n/*** Emit one translated element event without dynamic callback-property access. */\nfunction emitElementEvent(\n  callbacks: GraphViewCallbacks,\n  selector: ElementSelector,\n  event: { readonly id: string; readonly type: GraphViewElementEventType },\n) {\n  if (selector === 'node') {\n    callbacks.onNodeEvent?.(event);\n    return;\n  }\n  callbacks.onEdgeEvent?.(event);\n}\n\n/*** Remove one selector's event handlers using the exact bound callback identities. */\nfunction unbindElementEvents(\n  cy: Core,\n  selector: ElementSelector,\n  handlers: readonly BoundElementHandler[],\n) {\n  for (const { cytoscapeEvent, handler } of handlers) {\n    cy.off(cytoscapeEvent, selector, handler);\n  }\n}\n\nconst EVENT_TYPES = [\n  ['tap', 'press'],\n  ['dbltap', 'double-press'],\n  ['select', 'select'],\n  ['unselect', 'unselect'],\n  ['mouseover', 'pointer-enter'],\n  ['mouseout', 'pointer-leave'],\n] as const satisfies readonly (readonly [string, GraphViewElementEventType])[];\n"]}

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphController.d.ts

@@ -0,0 +1,7 @@
+import type { Core } from 'cytoscape';
+import type { GraphViewController } from './GraphView';
+/*** Create the public viewport controller while keeping the Cytoscape core private. */
+export declare function createGraphController(cy: Core, fitPaddingRef: {
+    current: number;
+}): GraphViewController;
+//# sourceMappingURL=createGraphController.d.ts.map

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphController.d.ts","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/createGraphController.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,uFAAuF;AACvF,wBAAgB,qBAAqB,CACnC,EAAE,EAAE,IAAI,EACR,aAAa,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GACjC,mBAAmB,CA4BrB"}

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphController.js

@@ -0,0 +1,32 @@
+import { fitGraphViewport } from './fitGraphViewport';
+/*** Create the public viewport controller while keeping the Cytoscape core private. */
+export function createGraphController(cy, fitPaddingRef) {
+    return {
+        fit(options) {
+            fitGraphViewport(cy, {
+                nodeIds: options?.nodeIds,
+                padding: options?.padding ?? fitPaddingRef.current,
+            });
+        },
+        getViewport() {
+            return { pan: cy.pan(), zoom: cy.zoom() };
+        },
+        setPan(pan) {
+            cy.pan(pan);
+        },
+        setZoom(zoom) {
+            cy.zoom({
+                level: zoom,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 },
+            });
+        },
+        zoomBy(factor) {
+            const zoom = cy.zoom() * factor;
+            cy.zoom({
+                level: zoom,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 },
+            });
+        },
+    };
+}
+//# sourceMappingURL=createGraphController.js.map

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphController.js","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/createGraphController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,uFAAuF;AACvF,MAAM,UAAU,qBAAqB,CACnC,EAAQ,EACR,aAAkC;IAElC,OAAO;QACL,GAAG,CAAC,OAAO;YACT,gBAAgB,CAAC,EAAE,EAAE;gBACnB,OAAO,EAAE,OAAO,EAAE,OAAO;gBACzB,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,aAAa,CAAC,OAAO;aACnD,CAAC,CAAC;QACL,CAAC;QACD,WAAW;YACT,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;QAC5C,CAAC;QACD,MAAM,CAAC,GAAG;YACR,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACd,CAAC;QACD,OAAO,CAAC,IAAI;YACV,EAAE,CAAC,IAAI,CAAC;gBACN,KAAK,EAAE,IAAI;gBACX,gBAAgB,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;aAC5D,CAAC,CAAC;QACL,CAAC;QACD,MAAM,CAAC,MAAM;YACX,MAAM,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC;YAChC,EAAE,CAAC,IAAI,CAAC;gBACN,KAAK,EAAE,IAAI;gBACX,gBAAgB,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;aAC5D,CAAC,CAAC;QACL,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["import type { Core } from 'cytoscape';\n\nimport { fitGraphViewport } from './fitGraphViewport';\nimport type { GraphViewController } from './GraphView';\n\n/*** Create the public viewport controller while keeping the Cytoscape core private. */\nexport function createGraphController(\n  cy: Core,\n  fitPaddingRef: { current: number },\n): GraphViewController {\n  return {\n    fit(options) {\n      fitGraphViewport(cy, {\n        nodeIds: options?.nodeIds,\n        padding: options?.padding ?? fitPaddingRef.current,\n      });\n    },\n    getViewport() {\n      return { pan: cy.pan(), zoom: cy.zoom() };\n    },\n    setPan(pan) {\n      cy.pan(pan);\n    },\n    setZoom(zoom) {\n      cy.zoom({\n        level: zoom,\n        renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 },\n      });\n    },\n    zoomBy(factor) {\n      const zoom = cy.zoom() * factor;\n      cy.zoom({\n        level: zoom,\n        renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 },\n      });\n    },\n  };\n}\n"]}

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.d.ts

@@ -0,0 +1,22 @@
+import type { Core } from 'cytoscape';
+interface CreateGraphResizeObserverInput {
+    readonly container: unknown;
+    readonly cy: Core;
+    readonly fitPaddingRef: {
+        current: number;
+    };
+    readonly layoutRunningRef: {
+        current: boolean;
+    };
+    readonly readyRef: {
+        current: boolean;
+    };
+    readonly onViewportSettled: () => void;
+}
+export interface GraphResizeObserver {
+    disconnect(): void;
+}
+/*** Observe settled container resizing without racing an active layout generation. */
+export declare function createGraphResizeObserver(input: CreateGraphResizeObserverInput): GraphResizeObserver | null;
+export {};
+//# sourceMappingURL=createGraphResizeObserver.d.ts.map

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAKtC,UAAU,8BAA8B;IACtC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAClB,QAAQ,CAAC,aAAa,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,CAAC,gBAAgB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IAChD,QAAQ,CAAC,QAAQ,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACxC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,IAAI,IAAI,CAAC;CACpB;AAED,sFAAsF;AACtF,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,GACpC,mBAAmB,GAAG,IAAI,CAe5B"}

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.js

@@ -0,0 +1,41 @@
+import { fitGraphViewport } from './fitGraphViewport';
+import { scheduleGraphFrame } from './scheduleGraphFrame';
+/*** Observe settled container resizing without racing an active layout generation. */
+export function createGraphResizeObserver(input) {
+    const Observer = readResizeObserverConstructor();
+    if (Observer === null)
+        return null;
+    const sizeRef = { height: -1, width: -1 };
+    const observer = new Observer((entries) => {
+        const entry = entries.at(0);
+        if (entry === undefined || !hasSizeChanged(sizeRef, entry.contentRect))
+            return;
+        sizeRef.height = entry.contentRect.height;
+        sizeRef.width = entry.contentRect.width;
+        if (!input.readyRef.current || input.layoutRunningRef.current)
+            return;
+        scheduleResizeFit(input);
+    });
+    observer.observe(input.container);
+    return observer;
+}
+/*** Fit one genuine resize only after the active layout has settled. */
+function scheduleResizeFit(input) {
+    scheduleGraphFrame(() => {
+        if (input.cy.destroyed() || input.layoutRunningRef.current)
+            return;
+        input.cy.resize();
+        fitGraphViewport(input.cy, { padding: input.fitPaddingRef.current });
+        input.onViewportSettled();
+    });
+}
+/*** Return whether ResizeObserver reported a genuinely different container size. */
+function hasSizeChanged(previous, next) {
+    return previous.height !== next.height || previous.width !== next.width;
+}
+/*** Read ResizeObserver without imposing DOM library types on the package target. */
+function readResizeObserverConstructor() {
+    const value = globalThis.ResizeObserver;
+    return value ?? null;
+}
+//# sourceMappingURL=createGraphResizeObserver.js.map

package/dist/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphResizeObserver.js","sourceRoot":"","sources":["../../../../../../src/features/graph-view/adapters/inbound/web-artifact/createGraphResizeObserver.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAe1D,sFAAsF;AACtF,MAAM,UAAU,yBAAyB,CACvC,KAAqC;IAErC,MAAM,QAAQ,GAAG,6BAA6B,EAAE,CAAC;IACjD,IAAI,QAAQ,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACnC,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC;IAE1C,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE;QACxC,MAAM,KAAK,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC;YAAE,OAAO;QAC/E,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC1C,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO;YAAE,OAAO;QACtE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAClC,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,wEAAwE;AACxE,SAAS,iBAAiB,CAAC,KAAqC;IAC9D,kBAAkB,CAAC,GAAG,EAAE;QACtB,IAAI,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,KAAK,CAAC,gBAAgB,CAAC,OAAO;YAAE,OAAO;QACnE,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;QAClB,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;QACrE,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,oFAAoF;AACpF,SAAS,cAAc,CACrB,QAA6D,EAC7D,IAAyD;IAEzD,OAAO,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AAC1E,CAAC;AAED,qFAAqF;AACrF,SAAS,6BAA6B;IACpC,MAAM,KAAK,GACT,UAGD,CAAC,cAAc,CAAC;IACjB,OAAO,KAAK,IAAI,IAAI,CAAC;AACvB,CAAC","sourcesContent":["import type { Core } from 'cytoscape';\n\nimport { fitGraphViewport } from './fitGraphViewport';\nimport { scheduleGraphFrame } from './scheduleGraphFrame';\n\ninterface CreateGraphResizeObserverInput {\n  readonly container: unknown;\n  readonly cy: Core;\n  readonly fitPaddingRef: { current: number };\n  readonly layoutRunningRef: { current: boolean };\n  readonly readyRef: { current: boolean };\n  readonly onViewportSettled: () => void;\n}\n\nexport interface GraphResizeObserver {\n  disconnect(): void;\n}\n\n/*** Observe settled container resizing without racing an active layout generation. */\nexport function createGraphResizeObserver(\n  input: CreateGraphResizeObserverInput,\n): GraphResizeObserver | null {\n  const Observer = readResizeObserverConstructor();\n  if (Observer === null) return null;\n  const sizeRef = { height: -1, width: -1 };\n\n  const observer = new Observer((entries) => {\n    const entry = entries.at(0);\n    if (entry === undefined || !hasSizeChanged(sizeRef, entry.contentRect)) return;\n    sizeRef.height = entry.contentRect.height;\n    sizeRef.width = entry.contentRect.width;\n    if (!input.readyRef.current || input.layoutRunningRef.current) return;\n    scheduleResizeFit(input);\n  });\n  observer.observe(input.container);\n  return observer;\n}\n\n/*** Fit one genuine resize only after the active layout has settled. */\nfunction scheduleResizeFit(input: CreateGraphResizeObserverInput) {\n  scheduleGraphFrame(() => {\n    if (input.cy.destroyed() || input.layoutRunningRef.current) return;\n    input.cy.resize();\n    fitGraphViewport(input.cy, { padding: input.fitPaddingRef.current });\n    input.onViewportSettled();\n  });\n}\n\n/*** Return whether ResizeObserver reported a genuinely different container size. */\nfunction hasSizeChanged(\n  previous: { readonly height: number; readonly width: number },\n  next: { readonly height: number; readonly width: number },\n): boolean {\n  return previous.height !== next.height || previous.width !== next.width;\n}\n\n/*** Read ResizeObserver without imposing DOM library types on the package target. */\nfunction readResizeObserverConstructor(): ResizeObserverConstructorLike | null {\n  const value = (\n    globalThis as unknown as {\n      ResizeObserver?: ResizeObserverConstructorLike;\n    }\n  ).ResizeObserver;\n  return value ?? null;\n}\n\ninterface ResizeObserverEntryLike {\n  readonly contentRect: {\n    readonly height: number;\n    readonly width: number;\n  };\n}\n\ninterface ResizeObserverLike extends GraphResizeObserver {\n  observe(target: unknown): void;\n}\n\ntype ResizeObserverConstructorLike = new (\n  callback: (entries: readonly ResizeObserverEntryLike[]) => void,\n) => ResizeObserverLike;\n"]}