@sebastianwessel/isostate 0.1.2 → 0.3.0

package/dist/chunks/{index-DEv2-G9F.js → index-B6HlPnov.js}

@@ -1,4 +1,6 @@
-import { R as RenderError, C as ControllerError } from './errors-DyqEkrm5.js';
+import { o as getResolvedViewBox, k as getCurrentElementBounds, m as getGridAreaBounds, t as updateElementTransforms, b as applySceneViewBox, l as getElementState, u as unhideElementOnReadd, p as hideElementAfterExit, j as getConnectorState, a as animateElement, d as buildSceneDOM, s as resolveTheme } from './rendering-engine-BgHel7yX.js';
+import { C as ControllerError, R as RenderError } from './errors-DyqEkrm5.js';
+import { s as sha256 } from './sha256-4JuurR-b.js';
 
 /**
  * Animation engine — resolves progress against compiled RuntimeBundle scene stops.
@@ -493,1029 +495,6 @@ function cloneConnectorFrameMap(map) {
     return clone;
 }
 
-// ── Built-in themes ────────────────────────────────────────────────────────
-const BUILTIN_THEMES = {
-    light: {
-        "--color-top": "#e2e8f0",
-        "--color-front": "#94a3b8",
-        "--color-side": "#64748b",
-        "--color-back": "#475569",
-        "--color-leaf": "#15803d",
-        "--color-trunk": "#78350f",
-        "--color-accent": "#3b82f6",
-    },
-    dark: {
-        "--color-top": "#334155",
-        "--color-front": "#1e293b",
-        "--color-side": "#0f172a",
-        "--color-back": "#020617",
-        "--color-leaf": "#166534",
-        "--color-trunk": "#451a03",
-        "--color-accent": "#60a5fa",
-    },
-    brand: {
-        "--color-top": "#c7d2fe",
-        "--color-front": "#818cf8",
-        "--color-side": "#6366f1",
-        "--color-back": "#4338ca",
-        "--color-leaf": "#22c55e",
-        "--color-trunk": "#854d0e",
-        "--color-accent": "#f59e0b",
-    },
-};
-/**
- * Resolve a theme name to its CSS variable map.
- * Returns undefined if the theme is not found.
- */
-function resolveTheme(name) {
-    return BUILTIN_THEMES[name];
-}
-/**
- * Compose a new theme by extending an existing one with overrides.
- */
-function composeTheme(baseName, overrides) {
-    const base = BUILTIN_THEMES[baseName];
-    if (!base) {
-        return { name: baseName, vars: { ...overrides } };
-    }
-    return { name: baseName, vars: { ...base, ...overrides } };
-}
-// ── Asset registry implementation ──────────────────────────────────────────
-/**
- * Default asset registry implementation.
- * Maps asset ids to definitions and supports category filtering.
- */
-class AssetRegistryImpl {
-    _assets = new Map();
-    register(asset) {
-        this._assets.set(asset.id, asset);
-    }
-    get(id) {
-        return this._assets.get(id);
-    }
-    getAll(category) {
-        if (category) {
-            return [...this._assets.values()].filter((a) => a.category === category);
-        }
-        return [...this._assets.values()];
-    }
-    has(id) {
-        return this._assets.has(id);
-    }
-    remove(id) {
-        this._assets.delete(id);
-    }
-}
-function createAssetRegistry(assets = []) {
-    const registry = new AssetRegistryImpl();
-    for (const asset of assets) {
-        registry.register(asset);
-    }
-    return registry;
-}
-/** Create a fresh registry populated with the built-in demo assets. */
-function createDefaultRegistry() {
-    return createAssetRegistry([
-        {
-            id: "iso-platform",
-            category: "infrastructure",
-        },
-        {
-            id: "iso-server",
-            category: "equipment",
-        },
-        {
-            id: "iso-database",
-            category: "equipment",
-        },
-        {
-            id: "iso-connector",
-            category: "decoration",
-        },
-        {
-            id: "iso-cloud",
-            category: "decoration",
-        },
-    ]);
-}
-
-/** Default cell size in pixels */
-const DEFAULT_CELL_SIZE = 64;
-/**
- * Calculate raw scene-space coordinates from isometric grid position.
- * Layout is applied separately by subtracting resolved bounds and adding padding.
- */
-function projectToRaw(gridX, gridY, cellSize) {
-    return {
-        rawX: cellSize * (gridX - gridY) * 0.5,
-        rawY: cellSize * (gridX + gridY) * 0.25,
-    };
-}
-/**
- * Calculate screen coordinates from raw isometric projection and resolved bounds.
- */
-function projectToScreen(gridX, gridY, cellSize, boundsMinX = 0, boundsMinY = 0, paddingX = 0, paddingY = 0) {
-    const { rawX, rawY } = projectToRaw(gridX, gridY, cellSize);
-    return {
-        screenX: rawX - boundsMinX + paddingX,
-        screenY: rawY - boundsMinY + paddingY,
-    };
-}
-/** Calculate the screen size for an element based on its grid size. */
-function calculateVisualSize(gridSize, cellSize) {
-    return cellSize * gridSize;
-}
-/** Calculate the element transform string for positioning and scaling. */
-function calculateTransform(screenX, screenY, visualSize, cellSize) {
-    const scale = visualSize / cellSize;
-    return `translate(${screenX}px, ${screenY}px) scale(${scale})`;
-}
-
-/** Build built-in entry, exit, ambient, and reduced-motion CSS keyframes. */
-function buildKeyframeCSS() {
-    return [
-        "@keyframes iso-anim-fade-in{from{opacity:0}to{opacity:1}}",
-        "@keyframes iso-anim-fade-in-grow{from{opacity:0;scale:.01}to{opacity:1;scale:1}}",
-        "@keyframes iso-anim-fall-in{from{opacity:0;translate:0 -40px}to{opacity:1;translate:0 0}}",
-        "@keyframes iso-anim-rise-from-ground{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}",
-        "@keyframes iso-anim-slide-in-left{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}",
-        "@keyframes iso-anim-slide-in-right{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}",
-        "@keyframes iso-anim-flip-in{from{opacity:1;scale:0 1}to{opacity:1;scale:1 1}}",
-        "@keyframes iso-anim-fade-out{from{opacity:1}to{opacity:0}}",
-        "@keyframes iso-anim-fade-out-shrink{from{opacity:1;scale:1}to{opacity:0;scale:.01}}",
-        "@keyframes iso-anim-fall-through-ground{from{opacity:1;translate:0 0}to{opacity:0;translate:0 40px}}",
-        "@keyframes iso-anim-rise-away{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -40px}}",
-        "@keyframes iso-anim-slide-out-left{from{opacity:1;translate:0 0}to{opacity:0;translate:-60px 0}}",
-        "@keyframes iso-anim-slide-out-right{from{opacity:1;translate:0 0}to{opacity:0;translate:60px 0}}",
-        "@keyframes iso-anim-flip-out{from{opacity:1;scale:1 1}to{opacity:0;scale:0 1}}",
-        "@keyframes iso-anim-pulse{0%,100%{opacity:.7}50%{opacity:1}}",
-        "@keyframes iso-anim-float{0%,100%{translate:0 0}50%{translate:0 -6px}}",
-        "@keyframes iso-anim-shake{0%,25%,75%,100%{translate:0 0}50%{translate:3px 0}}",
-        "@keyframes iso-anim-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}50%{filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}}",
-        "@keyframes iso-anim-spin{from{rotate:0deg}to{rotate:360deg}}",
-        "@keyframes iso-anim-blink{0%,49%{opacity:1}50%,100%{opacity:0}}",
-        "@keyframes iso-connector-flow-route{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1px * var(--iso-flow-distance,20))}}",
-        "@keyframes iso-connector-flow-reverse{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(1px * var(--iso-flow-distance,20))}}",
-        ".iso-connector-pattern-dashed .iso-connector-shaft,.iso-connector-pattern-dotted .iso-connector-shaft{--iso-flow-distance:20}",
-        ".iso-connector-direction-route .iso-connector-shaft.iso-ambient-flow{animation:iso-connector-flow-route 900ms linear infinite}",
-        ".iso-connector-direction-reverse .iso-connector-shaft.iso-ambient-flow{animation:iso-connector-flow-reverse 900ms linear infinite}",
-        "@media (prefers-reduced-motion: reduce){.iso-element,.iso-connector{animation-duration:1ms!important}.iso-ambient-pulse,.iso-ambient-float,.iso-ambient-shake,.iso-ambient-glow,.iso-ambient-spin,.iso-ambient-blink,.iso-ambient-flow{animation:none!important}}",
-    ].join("\n");
-}
-
-const NS$1 = "http://www.w3.org/2000/svg";
-function createAssetResolver(bundle) {
-    const embedded = new Map();
-    const bundleAssets = bundle?.assets;
-    if (bundleAssets && typeof bundleAssets === "object") {
-        for (const [name, asset] of Object.entries(bundleAssets)) {
-            if (asset && typeof asset === "object" && typeof asset.url === "string") {
-                embedded.set(name, { url: asset.url, anchor: asset.anchor });
-            }
-        }
-    }
-    return (name) => embedded.get(name);
-}
-function createAssetNode(asset, assetName, cellSize) {
-    return createUrlAssetNode(asset.url, assetName, cellSize, asset.anchor);
-}
-function createTextAssetNode(textContent, assetName, cellSize) {
-    if (!textContent?.value) {
-        throw new RenderError("TEXT_CONTENT_MISSING", `Text content is missing for built-in asset: ${assetName}`, {
-            asset: assetName,
-        });
-    }
-    const group = document.createElementNS(NS$1, "g");
-    const text = document.createElementNS(NS$1, "text");
-    const align = textContent.align ?? "middle";
-    const fontSize = textContent.fontSize ?? 12;
-    const lineHeight = textContent.lineHeight ?? 1.2;
-    const anchorX = textAnchorX(align, cellSize);
-    text.setAttribute("x", String(anchorX));
-    text.setAttribute("y", String(-cellSize));
-    text.setAttribute("text-anchor", align);
-    text.setAttribute("dominant-baseline", "text-before-edge");
-    text.setAttribute("font-family", "Arial, Helvetica, sans-serif");
-    text.setAttribute("font-size", String(fontSize));
-    text.setAttribute("font-weight", String(textContent.fontWeight ?? 700));
-    text.setAttribute("fill", textContent.fill ?? "currentColor");
-    const lines = normalizeTextLines(textContent.value);
-    for (const [index, line] of lines.entries()) {
-        const tspan = document.createElementNS(NS$1, "tspan");
-        tspan.setAttribute("x", String(anchorX));
-        tspan.setAttribute("dy", index === 0 ? "0" : String(fontSize * lineHeight));
-        tspan.textContent = line;
-        text.appendChild(tspan);
-    }
-    group.appendChild(text);
-    return group;
-}
-function createPrimitiveAssetNode(assetName, primitive, cellSize) {
-    const group = document.createElementNS(NS$1, "g");
-    switch (assetName) {
-        case "rectangle":
-            appendProjectedPolygon(group, rectanglePoints(), primitive?.rectangle, cellSize);
-            return group;
-        case "polygon":
-            appendProjectedPolygon(group, primitive?.polygon?.points, primitive?.polygon, cellSize);
-            return group;
-        case "line":
-            appendProjectedPolyline(group, primitive?.line, primitive?.line, cellSize);
-            return group;
-        case "circle":
-            appendCircle(group, primitive?.circle, cellSize);
-            return group;
-        default:
-            throw new RenderError("PRIMITIVE_ASSET_UNKNOWN", `Unknown built-in primitive asset: ${assetName}`, {
-                asset: assetName,
-            });
-    }
-}
-function textAnchorX(align, cellSize) {
-    if (align === "start")
-        return -cellSize / 2;
-    if (align === "end")
-        return cellSize / 2;
-    return 0;
-}
-function normalizeTextLines(value) {
-    const normalized = value.replace(/\r\n?/g, "\n").replace(/\n$/, "");
-    return normalized.split("\n");
-}
-function rectanglePoints() {
-    return [
-        [0, 0],
-        [1, 0],
-        [1, 1],
-        [0, 1],
-    ];
-}
-function appendProjectedPolygon(group, points, style, cellSize) {
-    if (!points)
-        return;
-    const polygon = document.createElementNS(NS$1, "polygon");
-    polygon.setAttribute("points", points.map((point) => projectLocalPoint(point, cellSize)).join(" "));
-    applyPrimitiveStyle(polygon, style, { fill: "currentColor", stroke: "none" });
-    group.appendChild(polygon);
-}
-function appendProjectedPolyline(group, line, style, cellSize) {
-    if (!line?.points)
-        return;
-    const polyline = document.createElementNS(NS$1, "polyline");
-    polyline.setAttribute("points", line.points.map((point) => projectLocalPoint(point, cellSize)).join(" "));
-    polyline.setAttribute("fill", "none");
-    polyline.setAttribute("stroke-linecap", line.lineCap ?? "round");
-    polyline.setAttribute("stroke-linejoin", line.lineJoin ?? "round");
-    applyPrimitiveStyle(polyline, style, {
-        fill: "none",
-        stroke: "currentColor",
-    });
-    group.appendChild(polyline);
-}
-function appendCircle(group, style, cellSize) {
-    const center = projectLocalPoint([0.5, 0.5], cellSize);
-    const circle = document.createElementNS(NS$1, "circle");
-    const [cx, cy] = center.split(",").map(Number);
-    circle.setAttribute("cx", String(cx));
-    circle.setAttribute("cy", String(cy));
-    circle.setAttribute("r", String(cellSize * 0.2));
-    applyPrimitiveStyle(circle, style, {
-        fill: "currentColor",
-        stroke: "none",
-    });
-    group.appendChild(circle);
-}
-function projectLocalPoint(point, cellSize) {
-    const projected = projectToRaw(point[0], point[1], cellSize);
-    const anchor = projectToRaw(1, 1, cellSize);
-    return `${projected.rawX - anchor.rawX},${projected.rawY - anchor.rawY}`;
-}
-function applyPrimitiveStyle(node, style, defaults) {
-    node.setAttribute("fill", style?.fill ?? defaults.fill);
-    node.setAttribute("stroke", style?.stroke ?? defaults.stroke);
-    node.setAttribute("stroke-width", String(style?.strokeWidth ?? 0));
-    node.setAttribute("opacity", String(style?.opacity ?? 1));
-    if (style?.dash)
-        node.setAttribute("stroke-dasharray", style.dash.join(" "));
-}
-function createUrlAssetNode(url, assetName, cellSize, anchor) {
-    if (!isSafeAssetUrl(url)) {
-        throw new RenderError("INVALID_ASSET_URL", `Asset URL is unsafe: ${assetName}`, { asset: assetName });
-    }
-    const group = document.createElementNS(NS$1, "g");
-    const image = document.createElementNS(NS$1, "image");
-    const resolvedUrl = resolveBrowserAssetUrl(url);
-    const [anchorX, anchorY] = anchor ?? [0.5, 1];
-    image.setAttribute("href", resolvedUrl);
-    image.setAttributeNS("http://www.w3.org/1999/xlink", "href", resolvedUrl);
-    image.setAttribute("x", String(-cellSize * anchorX));
-    image.setAttribute("y", String(-cellSize * anchorY));
-    image.setAttribute("width", String(cellSize));
-    image.setAttribute("height", String(cellSize));
-    image.setAttribute("preserveAspectRatio", "xMidYMax meet");
-    group.appendChild(image);
-    return group;
-}
-function resolveBrowserAssetUrl(url) {
-    try {
-        const baseURI = document.baseURI;
-        return typeof baseURI === "string" ? new URL(url, baseURI).href : url;
-    }
-    catch {
-        return url;
-    }
-}
-function isSafeAssetUrl(url) {
-    const normalized = url.trim().toLowerCase();
-    return normalized.length > 0 && !normalized.startsWith("javascript:");
-}
-
-const CSS_CUSTOM_PROPERTY_PATTERN = /^--[a-zA-Z0-9-_]+$/;
-function applyThemeToElement(element, themeVars) {
-    for (const [name, value] of Object.entries(themeVars)) {
-        if (!CSS_CUSTOM_PROPERTY_PATTERN.test(name)) {
-            throw new RenderError("INVALID_THEME_VAR", `Invalid CSS custom property name: ${name}`);
-        }
-        element.style.setProperty(name, value);
-    }
-}
-
-const NS = "http://www.w3.org/2000/svg";
-const BUILT_IN_TEXT_ASSET_ID = "text";
-const BUILT_IN_PRIMITIVE_ASSET_IDS = new Set(["rectangle", "circle", "polygon", "line"]);
-const DEFAULT_CONNECTOR_DASH = {
-    dashed: [12, 8],
-    dotted: [0, 8],
-};
-const ENDPOINT_RADIUS_GRID = 0.14;
-const ARROW_LENGTH_GRID = 0.35;
-const ARROW_WIDTH_GRID = 0.28;
-const BAR_WIDTH_GRID = 0.4;
-// ── Public API ────────────────────────────────────────────────────────────
-/** Build the SVG DOM for a compiled runtime bundle and mount it into a container. */
-function buildSceneDOM(container, bundle, config) {
-    const layout = resolveSceneLayout(bundle);
-    const initialStop = bundle.scenes[0];
-    const allElements = collectElementDefinitions(bundle);
-    const allConnectors = collectConnectorDefinitions(bundle);
-    const initialById = new Map((initialStop?.elements ?? []).map((element) => [element.id, element]));
-    const initialConnectorsById = new Map((initialStop?.connectors ?? []).map((connector) => [connector.id, connector]));
-    const svg = createRootSvg(layout, config?.label, bundle.className);
-    const assetResolver = createAssetResolver(bundle);
-    svg.appendChild(createCssDefs());
-    applyThemeToElement(svg, {
-        ...(resolveTheme(bundle.theme) ?? {}),
-        ...(bundle.themeVars ?? {}),
-        ...(config?.themeVars ?? {}),
-    });
-    const sortedLayers = sortLayers(bundle.layers);
-    const layerMap = createLayerMap(sortedLayers);
-    if (bundle.floor.visible) {
-        svg.appendChild(createFloorGrid(bundle, layout));
-    }
-    const connectorMap = new Map();
-    for (const def of allConnectors) {
-        const initial = initialConnectorsById.get(def.id) ?? {
-            ...def,
-            presence: "removed",
-        };
-        const state = createConnectorInstance(initial, layout);
-        if (initial.presence === "removed") {
-            state.isHidden = true;
-            hideElementAfterExit(state.node);
-        }
-        applyConnectorAmbientClasses(state, initial.ambient ?? []);
-        svg.appendChild(state.node);
-        connectorMap.set(def.id, state);
-    }
-    const depthGroup = document.createElementNS(NS, "g");
-    depthGroup.classList.add("iso-depth-layer");
-    depthGroup.setAttribute("data-layer", "depth");
-    svg.appendChild(depthGroup);
-    const labelGroup = document.createElementNS(NS, "g");
-    labelGroup.classList.add("iso-layer", "iso-layer-labels");
-    labelGroup.setAttribute("data-layer", "labels");
-    svg.appendChild(labelGroup);
-    const elementMap = new Map();
-    const sortedElements = sortElementsForPerspective(allElements);
-    for (const def of sortedElements) {
-        const declaredLayer = layerMap.get(def.layer);
-        if (!declaredLayer) {
-            throw new RenderError("MISSING_LAYER", `Unknown layer for "${def.id}": ${def.layer}`);
-        }
-        const initial = initialById.get(def.id) ?? {
-            ...def,
-            presence: "removed",
-        };
-        const instance = createElementInstance(initial, layout, assetResolver);
-        instance.node.classList.add(`iso-layer-${def.layer}`);
-        instance.node.setAttribute("data-layer", def.layer);
-        if (initial.presence === "removed") {
-            instance.isHidden = true;
-            hideElementAfterExit(instance.node);
-        }
-        applyAmbientClasses(instance, initial.ambient ?? []);
-        const parent = isTextAsset(def.asset) ? labelGroup : depthGroup;
-        parent.appendChild(instance.node);
-        elementMap.set(def.id, instance);
-    }
-    svg._layerMap = layerMap;
-    svg._elementMap = elementMap;
-    svg._connectorMap = connectorMap;
-    container.appendChild(svg);
-    return svg;
-}
-/** Update transforms and ambient classes for a live set of interpolated runtime values. */
-function updateElementTransforms(svg, elements, connectors = []) {
-    const layout = svg._layout;
-    if (!layout)
-        return;
-    const map = svg._elementMap;
-    if (map) {
-        for (const def of elements) {
-            const state = map.get(def.id);
-            if (!state)
-                continue;
-            updateGeneratedElementContent(state.node, def, layout);
-            applyElementTransform(state.node, def, layout);
-            applyAmbientClasses(state, def.ambient ?? []);
-        }
-    }
-    const connectorMap = svg._connectorMap;
-    if (!connectorMap)
-        return;
-    for (const def of connectors) {
-        const state = connectorMap.get(def.id);
-        if (!state)
-            continue;
-        applyConnectorState(state, def, layout);
-    }
-}
-/** Read the internal ElementState for an element by its id. */
-function getElementState(svg, id) {
-    return svg._elementMap?.get(id);
-}
-/** Read the internal ConnectorState for a connector by its id. */
-function getConnectorState(svg, id) {
-    return svg._connectorMap?.get(id);
-}
-function getResolvedViewBox(bundle) {
-    return resolveSceneLayout(bundle).viewBox;
-}
-// ── Lifecycle helpers ─────────────────────────────────────────────────────
-/** Hide an element after its exit animation completes. */
-function hideElementAfterExit(node) {
-    node.style.visibility = "hidden";
-    node.style.pointerEvents = "none";
-}
-/** Show an element on re-addition. */
-function unhideElementOnReadd(node) {
-    node.style.visibility = "visible";
-    node.style.pointerEvents = "auto";
-}
-// ── Layout helpers ────────────────────────────────────────────────────────
-function resolveSceneLayout(bundle) {
-    const cellSize = bundle.grid.cellSize;
-    const padding = bundle.layout.padding;
-    const contentBounds = calculateContentBounds(bundle, cellSize);
-    const floorBounds = calculateFloorBounds(bundle, cellSize);
-    const selectedBounds = selectBounds(bundle.layout.bounds, contentBounds, floorBounds);
-    const width = selectedBounds.maxX - selectedBounds.minX + padding.x * 2;
-    const height = selectedBounds.maxY - selectedBounds.minY + padding.y * 2;
-    const viewBox = {
-        minX: 0,
-        minY: 0,
-        width: roundDimension(width || cellSize),
-        height: roundDimension(height || cellSize),
-    };
-    return {
-        cellSize,
-        padding,
-        contentBounds,
-        floorBounds,
-        selectedBounds,
-        viewBox,
-    };
-}
-function calculateContentBounds(bundle, cellSize) {
-    let bounds = emptyBounds();
-    for (const stop of bundle.scenes) {
-        for (const element of stop.elements ?? []) {
-            if (element.presence === "removed")
-                continue;
-            const { rawX, rawY } = projectToRaw(element.pos[0] + element.size, element.pos[1] + element.size, cellSize);
-            const visualSize = calculateVisualSize(element.size, cellSize);
-            const [anchorX, anchorY] = assetAnchorForBounds(bundle, element);
-            bounds = includeBounds(bounds, {
-                minX: rawX - visualSize * anchorX,
-                minY: rawY - visualSize * anchorY,
-                maxX: rawX + visualSize * (1 - anchorX),
-                maxY: rawY + visualSize * (1 - anchorY),
-            });
-        }
-        for (const connector of stop.connectors ?? []) {
-            if (connector.presence === "removed")
-                continue;
-            bounds = includeBounds(bounds, calculateConnectorBounds(connector, cellSize));
-        }
-    }
-    return normalizeBounds(bounds, cellSize);
-}
-function assetAnchorForBounds(bundle, element) {
-    return bundle.assets?.[element.asset]?.anchor ?? [0.5, 1];
-}
-function calculateConnectorBounds(connector, cellSize) {
-    let bounds = emptyBounds();
-    for (const [x, y] of connector.route) {
-        const { rawX, rawY } = projectToRaw(x, y, cellSize);
-        bounds = includePoint(bounds, rawX, rawY);
-    }
-    const endpointPadding = Math.max(ARROW_LENGTH_GRID, BAR_WIDTH_GRID, ENDPOINT_RADIUS_GRID * 2) * cellSize;
-    const strokePadding = connector.style.strokeWidth / 2 + (connector.style.outlineWidth ?? 0);
-    const padding = endpointPadding + strokePadding;
-    return {
-        minX: bounds.minX - padding,
-        minY: bounds.minY - padding,
-        maxX: bounds.maxX + padding,
-        maxY: bounds.maxY + padding,
-    };
-}
-function calculateFloorBounds(bundle, cellSize) {
-    const origin = bundle.floor.origin;
-    const [width, height] = bundle.floor.size;
-    const points = [
-        origin,
-        [origin[0] + width, origin[1]],
-        [origin[0], origin[1] + height],
-        [origin[0] + width, origin[1] + height],
-    ];
-    let bounds = emptyBounds();
-    for (const [x, y] of points) {
-        const { rawX, rawY } = projectToRaw(x, y, cellSize);
-        bounds = includePoint(bounds, rawX, rawY);
-    }
-    return normalizeBounds(bounds, cellSize);
-}
-function selectBounds(mode, content, floor) {
-    if (mode === "content")
-        return content;
-    if (mode === "floor")
-        return floor;
-    return includeBounds(content, floor);
-}
-function emptyBounds() {
-    return {
-        minX: Number.POSITIVE_INFINITY,
-        minY: Number.POSITIVE_INFINITY,
-        maxX: Number.NEGATIVE_INFINITY,
-        maxY: Number.NEGATIVE_INFINITY,
-    };
-}
-function normalizeBounds(bounds, cellSize) {
-    if (Number.isFinite(bounds.minX))
-        return bounds;
-    return { minX: 0, minY: 0, maxX: cellSize, maxY: cellSize };
-}
-function includePoint(bounds, x, y) {
-    return {
-        minX: Math.min(bounds.minX, x),
-        minY: Math.min(bounds.minY, y),
-        maxX: Math.max(bounds.maxX, x),
-        maxY: Math.max(bounds.maxY, y),
-    };
-}
-function includeBounds(bounds, next) {
-    return {
-        minX: Math.min(bounds.minX, next.minX),
-        minY: Math.min(bounds.minY, next.minY),
-        maxX: Math.max(bounds.maxX, next.maxX),
-        maxY: Math.max(bounds.maxY, next.maxY),
-    };
-}
-function roundDimension(value) {
-    return Math.round(value * 1000) / 1000;
-}
-// ── Private helpers ───────────────────────────────────────────────────────
-function createRootSvg(layout, label, className) {
-    const svg = document.createElementNS(NS, "svg");
-    svg.classList.add("iso-scene");
-    for (const token of className?.trim().split(/\s+/) ?? []) {
-        if (token)
-            svg.classList.add(token);
-    }
-    svg.setAttribute("width", "100%");
-    svg.setAttribute("height", "100%");
-    svg.setAttribute("viewBox", `${layout.viewBox.minX} ${layout.viewBox.minY} ${layout.viewBox.width} ${layout.viewBox.height}`);
-    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
-    svg.style.width = "100%";
-    svg.style.height = "100%";
-    svg.style.display = "block";
-    if (label) {
-        svg.setAttribute("role", "img");
-        svg.setAttribute("aria-label", label);
-    }
-    else {
-        svg.setAttribute("aria-hidden", "true");
-    }
-    svg._layout = layout;
-    svg._viewBoxW = layout.viewBox.width;
-    svg._viewBoxH = layout.viewBox.height;
-    return svg;
-}
-function createCssDefs() {
-    const styleEl = document.createElementNS(NS, "style");
-    styleEl.textContent = buildKeyframeCSS();
-    return styleEl;
-}
-function createFloorGrid(bundle, layout) {
-    const group = document.createElementNS(NS, "g");
-    group.classList.add("iso-floor-grid", `iso-layer-${bundle.floor.layer}`);
-    group.setAttribute("data-layer", bundle.floor.layer);
-    const [originX, originY] = bundle.floor.origin;
-    const [columns, rows] = bundle.floor.size;
-    const corners = [
-        projectGridPoint(originX, originY, layout),
-        projectGridPoint(originX + columns, originY, layout),
-        projectGridPoint(originX + columns, originY + rows, layout),
-        projectGridPoint(originX, originY + rows, layout),
-    ];
-    const slab = document.createElementNS(NS, "polygon");
-    slab.classList.add("iso-floor-slab");
-    slab.setAttribute("points", corners.map(pointToString).join(" "));
-    slab.setAttribute("fill", "#dbe6f4");
-    slab.setAttribute("fill-opacity", "0.22");
-    slab.setAttribute("stroke", "#b9c9df");
-    slab.setAttribute("stroke-width", "1");
-    group.appendChild(slab);
-    for (let x = 0; x <= columns; x++) {
-        group.appendChild(createFloorLine(projectGridPoint(originX + x, originY, layout), projectGridPoint(originX + x, originY + rows, layout)));
-    }
-    for (let y = 0; y <= rows; y++) {
-        group.appendChild(createFloorLine(projectGridPoint(originX, originY + y, layout), projectGridPoint(originX + columns, originY + y, layout)));
-    }
-    return group;
-}
-function createFloorLine(start, end) {
-    const line = document.createElementNS(NS, "line");
-    line.setAttribute("x1", String(start.x));
-    line.setAttribute("y1", String(start.y));
-    line.setAttribute("x2", String(end.x));
-    line.setAttribute("y2", String(end.y));
-    line.setAttribute("stroke", "#2563eb");
-    line.setAttribute("stroke-width", "1");
-    line.setAttribute("stroke-dasharray", "5 5");
-    line.setAttribute("stroke-opacity", "0.2");
-    return line;
-}
-function projectGridPoint(x, y, layout) {
-    const screen = projectToScreen(x, y, layout.cellSize, layout.selectedBounds.minX, layout.selectedBounds.minY, layout.padding.x, layout.padding.y);
-    return { x: screen.screenX, y: screen.screenY };
-}
-function pointToString(point) {
-    return `${point.x},${point.y}`;
-}
-function createLayerMap(layers) {
-    return new Map(layers.map((layer) => [layer.name, layer]));
-}
-function sortLayers(layers) {
-    return [...layers]
-        .map((layer, index) => ({ name: layer.name, order: layer.order ?? index }))
-        .sort((a, b) => a.order - b.order || a.name.localeCompare(b.name));
-}
-function sortElementsForPerspective(elements) {
-    return elements.slice().sort((a, b) => {
-        const bucket = renderBucket(a) - renderBucket(b);
-        if (bucket !== 0)
-            return bucket;
-        const depth = a.pos[0] + a.pos[1] - (b.pos[0] + b.pos[1]);
-        if (depth !== 0)
-            return depth;
-        return a.id.localeCompare(b.id);
-    });
-}
-function renderBucket(element) {
-    if (isPrimitiveAsset(element.asset))
-        return 0;
-    if (isTextAsset(element.asset))
-        return 2;
-    return 1;
-}
-function collectElementDefinitions(bundle) {
-    const byId = new Map();
-    for (const stop of bundle.scenes) {
-        for (const element of stop.elements ?? []) {
-            if (!byId.has(element.id) || byId.get(element.id)?.presence === "removed") {
-                byId.set(element.id, element);
-            }
-        }
-    }
-    return [...byId.values()];
-}
-function collectConnectorDefinitions(bundle) {
-    const byId = new Map();
-    for (const stop of bundle.scenes) {
-        for (const connector of stop.connectors ?? []) {
-            if (!byId.has(connector.id) || byId.get(connector.id)?.presence === "removed") {
-                byId.set(connector.id, connector);
-            }
-        }
-    }
-    return [...byId.values()];
-}
-/** Create a single element SVG instance applying entry animation. */
-function createElementInstance(def, layout, resolveAsset) {
-    const node = def.asset === BUILT_IN_TEXT_ASSET_ID
-        ? createTextAssetNode(def.text, def.asset, layout.cellSize)
-        : isPrimitiveAsset(def.asset)
-            ? createPrimitiveAssetNode(def.asset, def.primitive, layout.cellSize)
-            : createResolvedAssetNode(def, resolveAsset, layout.cellSize);
-    node.classList.add("iso-element", `iso-element-${def.id}`);
-    node.setAttribute("data-id", def.id);
-    node.setAttribute("data-asset", def.asset);
-    node.style.overflow = "visible";
-    node.style.pointerEvents = "auto";
-    applyElementTransform(node, def, layout);
-    const entryAnim = def.enter;
-    if (entryAnim && entryAnim !== "none" && def.presence !== "removed") {
-        const keyName = `iso-anim-${entryAnim}`;
-        animateElement(node, keyName, "enter");
-        node.addEventListener("animationend", () => {
-            node.style.animation = "";
-        }, { once: true });
-        return { node, isHidden: false, entryKey: entryAnim, ambient: new Set() };
-    }
-    return { node, isHidden: false, ambient: new Set() };
-}
-function isTextAsset(assetId) {
-    return assetId === BUILT_IN_TEXT_ASSET_ID;
-}
-function isPrimitiveAsset(assetId) {
-    return BUILT_IN_PRIMITIVE_ASSET_IDS.has(assetId);
-}
-function createResolvedAssetNode(def, resolveAsset, cellSize) {
-    const asset = resolveAsset(def.asset);
-    if (!asset) {
-        throw new RenderError("ASSET_NOT_FOUND", `Asset not found: ${def.asset}`, {
-            asset: def.asset,
-            elementId: def.id,
-        });
-    }
-    return createAssetNode(asset, def.asset, cellSize);
-}
-function updateGeneratedElementContent(node, def, layout) {
-    if (!isTextAsset(def.asset) && !isPrimitiveAsset(def.asset))
-        return;
-    const replacement = isTextAsset(def.asset)
-        ? createTextAssetNode(def.text, def.asset, layout.cellSize)
-        : createPrimitiveAssetNode(def.asset, def.primitive, layout.cellSize);
-    clearChildren(node);
-    while (replacement.firstChild) {
-        const child = replacement.firstChild;
-        replacement.removeChild(child);
-        node.appendChild(child);
-    }
-}
-function createConnectorInstance(def, layout) {
-    const node = document.createElementNS(NS, "g");
-    const shaft = document.createElementNS(NS, "path");
-    const state = { node, shaft, isHidden: false, ambient: new Set() };
-    applyConnectorState(state, def, layout);
-    const entryAnim = def.enter;
-    if (entryAnim && entryAnim !== "none" && def.presence !== "removed") {
-        animateElement(node, `iso-anim-${entryAnim}`, "enter");
-        node.addEventListener("animationend", () => {
-            node.style.animation = "";
-        }, { once: true });
-    }
-    return state;
-}
-function applyConnectorState(state, def, layout) {
-    applyConnectorGroupAttrs(state.node, def);
-    clearChildren(state.node);
-    const d = routePath(def.route, layout);
-    if (shouldRenderOutline(def)) {
-        const outline = document.createElementNS(NS, "path");
-        outline.classList.add("iso-connector-outline");
-        applyConnectorPathAttrs(outline, def, d, {
-            stroke: def.style.outline ?? def.style.stroke,
-            strokeWidth: def.style.strokeWidth + def.style.outlineWidth * 2,
-            includeDash: false,
-        });
-        state.node.appendChild(outline);
-    }
-    state.shaft = document.createElementNS(NS, "path");
-    state.shaft.classList.add("iso-connector-shaft");
-    applyConnectorPathAttrs(state.shaft, def, d, {
-        stroke: def.style.stroke,
-        strokeWidth: def.style.strokeWidth,
-        includeDash: true,
-    });
-    state.node.appendChild(state.shaft);
-    if (def.style.variant === "road" && def.style.lane === "center-dashed") {
-        const lane = document.createElementNS(NS, "path");
-        lane.classList.add("iso-connector-lane");
-        applyConnectorPathAttrs(lane, def, d, {
-            stroke: "#ffffff",
-            strokeWidth: Math.max(1, def.style.strokeWidth * 0.12),
-            includeDash: false,
-        });
-        lane.setAttribute("stroke-dasharray", "8 8");
-        state.node.appendChild(lane);
-    }
-    appendEndpoint(state.node, def, "start", layout);
-    appendEndpoint(state.node, def, "end", layout);
-    applyConnectorAmbientClasses(state, def.ambient ?? []);
-}
-function clearChildren(node) {
-    while (node.firstChild)
-        node.removeChild(node.firstChild);
-}
-function applyConnectorGroupAttrs(node, def) {
-    node.setAttribute("class", [
-        "iso-connector",
-        `iso-connector-${def.id}`,
-        `iso-connector-variant-${def.style.variant}`,
-        `iso-connector-pattern-${def.style.pattern}`,
-        `iso-connector-direction-${def.direction}`,
-        `iso-layer-${def.layer}`,
-    ].join(" "));
-    node.setAttribute("data-id", def.id);
-    node.setAttribute("data-layer", def.layer);
-    node.style.overflow = "visible";
-    node.style.pointerEvents = "auto";
-}
-function shouldRenderOutline(def) {
-    return Boolean(def.style.outline && def.style.outlineWidth > 0);
-}
-function applyConnectorPathAttrs(path, def, d, options) {
-    path.setAttribute("d", d);
-    path.setAttribute("fill", "none");
-    path.setAttribute("stroke", options.stroke);
-    path.setAttribute("stroke-width", String(options.strokeWidth));
-    path.setAttribute("stroke-linecap", "round");
-    path.setAttribute("stroke-linejoin", "round");
-    path.setAttribute("opacity", String(def.style.opacity));
-    if (options.includeDash && def.style.pattern !== "solid") {
-        const dash = def.style.dash ?? DEFAULT_CONNECTOR_DASH[def.style.pattern];
-        path.setAttribute("stroke-dasharray", dash.join(" "));
-    }
-}
-function routePath(route, layout) {
-    return route
-        .map((point, index) => {
-        const projected = projectGridPoint(point[0], point[1], layout);
-        return `${index === 0 ? "M" : "L"} ${projected.x} ${projected.y}`;
-    })
-        .join(" ");
-}
-function appendEndpoint(group, def, kind, layout) {
-    const endpoint = def[kind];
-    if (endpoint === "none" || def.route.length < 2)
-        return;
-    const node = createEndpointNode(endpoint, def, kind, layout);
-    node.classList.add(`iso-connector-${kind}`);
-    group.appendChild(node);
-}
-function createEndpointNode(endpoint, def, kind, layout) {
-    switch (endpoint) {
-        case "arrow":
-            return createArrowEndpoint(def, kind, layout);
-        case "dot":
-            return createCircleEndpoint(def, kind, layout, true);
-        case "circle":
-            return createCircleEndpoint(def, kind, layout, false);
-        case "diamond":
-            return createDiamondEndpoint(def, kind, layout);
-        case "bar":
-            return createBarEndpoint(def, kind, layout);
-        case "none":
-            throw new RenderError("CONNECTOR_ENDPOINT_NONE", "Cannot create geometry for endpoint none");
-    }
-}
-function createArrowEndpoint(def, kind, layout) {
-    const tip = endpointPoint(def, kind);
-    const direction = endpointDirection(def, kind);
-    const perpendicular = [-direction[1], direction[0]];
-    const base = [tip[0] - direction[0] * ARROW_LENGTH_GRID, tip[1] - direction[1] * ARROW_LENGTH_GRID];
-    const halfWidth = ARROW_WIDTH_GRID / 2;
-    const points = [
-        tip,
-        [base[0] + perpendicular[0] * halfWidth, base[1] + perpendicular[1] * halfWidth],
-        [base[0] - perpendicular[0] * halfWidth, base[1] - perpendicular[1] * halfWidth],
-    ].map((point) => projectGridPoint(point[0], point[1], layout));
-    const polygon = document.createElementNS(NS, "polygon");
-    polygon.setAttribute("points", points.map(pointToString).join(" "));
-    polygon.setAttribute("fill", def.style.stroke);
-    polygon.setAttribute("opacity", String(def.style.opacity));
-    return polygon;
-}
-function createCircleEndpoint(def, kind, layout, filled) {
-    const point = endpointPoint(def, kind);
-    const projected = projectGridPoint(point[0], point[1], layout);
-    const circle = document.createElementNS(NS, "circle");
-    circle.setAttribute("cx", String(projected.x));
-    circle.setAttribute("cy", String(projected.y));
-    circle.setAttribute("r", String(ENDPOINT_RADIUS_GRID * layout.cellSize));
-    circle.setAttribute("stroke", def.style.stroke);
-    circle.setAttribute("stroke-width", String(Math.max(1, def.style.strokeWidth)));
-    circle.setAttribute("opacity", String(def.style.opacity));
-    circle.setAttribute("fill", filled ? def.style.stroke : "none");
-    return circle;
-}
-function createDiamondEndpoint(def, kind, layout) {
-    const center = endpointPoint(def, kind);
-    const radius = ENDPOINT_RADIUS_GRID;
-    const points = [
-        [center[0], center[1] - radius],
-        [center[0] + radius, center[1]],
-        [center[0], center[1] + radius],
-        [center[0] - radius, center[1]],
-    ];
-    const polygon = document.createElementNS(NS, "polygon");
-    polygon.setAttribute("points", points
-        .map((point) => projectGridPoint(point[0], point[1], layout))
-        .map(pointToString)
-        .join(" "));
-    polygon.setAttribute("fill", def.style.stroke);
-    polygon.setAttribute("opacity", String(def.style.opacity));
-    return polygon;
-}
-function createBarEndpoint(def, kind, layout) {
-    const center = endpointPoint(def, kind);
-    const direction = endpointDirection(def, kind);
-    const perpendicular = [-direction[1], direction[0]];
-    const half = BAR_WIDTH_GRID / 2;
-    const a = projectGridPoint(center[0] + perpendicular[0] * half, center[1] + perpendicular[1] * half, layout);
-    const b = projectGridPoint(center[0] - perpendicular[0] * half, center[1] - perpendicular[1] * half, layout);
-    const line = document.createElementNS(NS, "line");
-    line.setAttribute("x1", String(a.x));
-    line.setAttribute("y1", String(a.y));
-    line.setAttribute("x2", String(b.x));
-    line.setAttribute("y2", String(b.y));
-    line.setAttribute("stroke", def.style.stroke);
-    line.setAttribute("stroke-width", String(Math.max(1, def.style.strokeWidth)));
-    line.setAttribute("stroke-linecap", "round");
-    line.setAttribute("opacity", String(def.style.opacity));
-    return line;
-}
-function endpointPoint(def, kind) {
-    return kind === "start" ? def.route[0] : def.route[def.route.length - 1];
-}
-function endpointDirection(def, kind) {
-    const point = kind === "start"
-        ? vectorBetween(def.route[0], def.route[1])
-        : vectorBetween(def.route[def.route.length - 2], def.route[def.route.length - 1]);
-    const effective = def.direction === "reverse" ? [-point[0], -point[1]] : point;
-    return normalizeVector(effective);
-}
-function vectorBetween(start, end) {
-    return [end[0] - start[0], end[1] - start[1]];
-}
-function normalizeVector(vector) {
-    const length = Math.hypot(vector[0], vector[1]);
-    if (length === 0)
-        return [1, 0];
-    return [vector[0] / length, vector[1] / length];
-}
-function applyElementTransform(node, def, layout) {
-    const screen = projectToScreen(def.pos[0] + def.size, def.pos[1] + def.size, layout.cellSize, layout.selectedBounds.minX, layout.selectedBounds.minY, layout.padding.x, layout.padding.y);
-    const visualSize = calculateVisualSize(def.size, layout.cellSize);
-    const scale = visualSize / layout.cellSize;
-    node.setAttribute("transform", `translate(${screen.screenX} ${screen.screenY}) scale(${scale})`);
-}
-function applyAmbientClasses(state, ambient) {
-    const next = new Set((ambient ?? []).map((item) => item.name));
-    for (const name of state.ambient) {
-        if (!next.has(name))
-            state.node.classList.remove(`iso-ambient-${name}`);
-    }
-    for (const name of next) {
-        if (!state.ambient.has(name))
-            state.node.classList.add(`iso-ambient-${name}`);
-    }
-    state.ambient = next;
-}
-function applyConnectorAmbientClasses(state, ambient) {
-    const next = new Set((ambient ?? []).map((item) => item.name));
-    for (const name of state.ambient) {
-        if (!next.has(name))
-            state.shaft.classList.remove(`iso-ambient-${name}`);
-    }
-    for (const name of next) {
-        state.shaft.classList.add(`iso-ambient-${name}`);
-    }
-    state.ambient = next;
-}
-/** Apply a CSS keyframe animation to an element. */
-function animateElement(node, keyframeName, type = "enter") {
-    node.style.opacity = "1";
-    node.style.animation = "none";
-    node.getBoundingClientRect();
-    const duration = type === "exit" ? "var(--iso-anim-duration-exit, 300ms)" : "var(--iso-anim-duration-enter, 400ms)";
-    const easing = type === "exit" ? "var(--iso-anim-easing-exit, ease-in)" : "var(--iso-anim-easing-enter, ease-out)";
-    node.style.animation = `${keyframeName} ${duration} ${easing} forwards`;
-}
-
 /**
  * Linear easing (no interpolation).
  */
@@ -1586,6 +565,8 @@ class AnimationController {
     _pendingProgress = null;
     _destroyed = false;
     _listeners = new Map();
+    _cameraAnim = null;
+    _cameraState = null;
     // Scroll tracking state
     _minScroll = 0;
     _maxScroll = 0;
@@ -1637,6 +618,11 @@ class AnimationController {
         this._paused = false;
         this._config = { ...DEFAULT_CONFIG, ...config };
         this._sceneElement = runtime.sceneElement ?? config.sceneElement ?? null;
+        this._cameraState = {
+            viewBox: getResolvedViewBox(bundle),
+            target: { type: "reset" },
+            isZoomed: false,
+        };
         this._engine.init(bundle);
         this._bindScroll();
     }
@@ -1653,6 +639,7 @@ class AnimationController {
             return;
         }
         this._progress = clamped;
+        this._cancelCameraAnimation();
         if (this._paused)
             return;
         this._scheduleProgressForward(clamped);
@@ -1720,6 +707,47 @@ class AnimationController {
         this._assertNotDestroyed();
         return this._paused;
     }
+    zoomToElement(id, options = {}) {
+        this._assertNotDestroyed();
+        const svg = this._getSceneSvg();
+        if (!this._bundle || !svg) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "zoomToElement() requires an initialized scene SVG");
+        }
+        const elementBounds = getCurrentElementBounds(svg, id);
+        if (!elementBounds) {
+            throw new ControllerError("CAMERA_TARGET_NOT_FOUND", `Camera target element "${id}" was not found`, {
+                elementId: id,
+            });
+        }
+        this._applyCameraDestination(expandViewBox(elementBounds, this._resolveCameraPadding(options)), { type: "element", id }, options);
+    }
+    zoomToArea(area, options = {}) {
+        this._assertNotDestroyed();
+        if (!this._bundle || !this._getSceneSvg()) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "zoomToArea() requires an initialized scene SVG");
+        }
+        this._assertValidCameraArea(area);
+        const bounds = getGridAreaBounds(this._bundle, area);
+        this._applyCameraDestination(expandViewBox(bounds, this._resolveCameraPadding(options)), {
+            type: "area",
+            at: [...area.at],
+            size: [...area.size],
+        }, options);
+    }
+    resetZoom(options = {}) {
+        this._assertNotDestroyed();
+        if (!this._bundle || !this._getSceneSvg()) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "resetZoom() requires an initialized scene SVG");
+        }
+        this._applyCameraDestination(getResolvedViewBox(this._bundle), { type: "reset" }, options);
+    }
+    getCameraState() {
+        this._assertNotDestroyed();
+        if (!this._cameraState) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera state is not initialized");
+        }
+        return copyCameraState(this._cameraState);
+    }
     /**
      * Destroy controller and clean up all listeners and resources.
      */
@@ -1728,12 +756,14 @@ class AnimationController {
         this._unbindScroll();
         this._cancelFrame();
         this._cancelTransition();
+        this._cancelCameraAnimation();
         if (this._ownsEngine)
             this._engine.destroy();
         this._listeners.clear();
         this._bundle = null;
         this._container = null;
         this._pendingProgress = null;
+        this._cameraState = null;
         this._destroyed = true;
     }
     // ── Event system ───────────────────────────────────────────────────────
@@ -1823,6 +853,121 @@ class AnimationController {
         updateElementTransforms(svg, updates, connectors);
         this._applyLifecycleChanges(updates);
         this._applyConnectorLifecycleChanges(connectors);
+        this._applyCameraForProgress(this._progress);
+    }
+    _applyCameraForProgress(progress) {
+        const svg = this._getSceneSvg();
+        if (!this._bundle || !svg)
+            return;
+        const sceneStops = this.scenes;
+        if (sceneStops.length === 0)
+            return;
+        const { previous, next } = surroundingStops(sceneStops, progress);
+        const previousCamera = this._effectiveCameraAt(previous.index);
+        const nextCamera = this._effectiveCameraAt(next.index);
+        const previousViewBox = this._resolveCameraViewBox(previousCamera);
+        const nextViewBox = this._resolveCameraViewBox(nextCamera);
+        const range = next.scene.progress - previous.scene.progress;
+        const rawT = range <= 0 ? 0 : (progress - previous.scene.progress) / range;
+        const t = resolveCameraEasing(nextCamera.easing)(Math.max(0, Math.min(1, rawT)));
+        const viewBox = lerpViewBox(previousViewBox, nextViewBox, t);
+        const target = t < 1 ? previousCamera.target : nextCamera.target;
+        this._setCameraViewBox(svg, viewBox, target);
+    }
+    _effectiveCameraAt(index) {
+        for (let i = index; i >= 0; i--) {
+            const camera = this.scenes[i]?.camera;
+            if (camera) {
+                return {
+                    target: camera.target,
+                    padding: camera.padding,
+                    duration: camera.duration,
+                    easing: camera.easing,
+                };
+            }
+        }
+        return { target: { type: "reset" } };
+    }
+    _resolveCameraViewBox(camera) {
+        if (!this._bundle)
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized bundle");
+        if (camera.target.type === "reset")
+            return getResolvedViewBox(this._bundle);
+        if (camera.target.type === "area") {
+            return expandViewBox(getGridAreaBounds(this._bundle, { at: camera.target.at, size: camera.target.size }), camera.padding ?? 32);
+        }
+        const svg = this._getSceneSvg();
+        if (!svg)
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized scene SVG");
+        const bounds = getCurrentElementBounds(svg, camera.target.id);
+        if (!bounds) {
+            throw new ControllerError("CAMERA_TARGET_NOT_FOUND", `Camera target element "${camera.target.id}" was not found`, {
+                elementId: camera.target.id,
+            });
+        }
+        return expandViewBox(bounds, camera.padding ?? 32);
+    }
+    _applyCameraDestination(viewBox, target, options) {
+        const svg = this._getSceneSvg();
+        if (!svg)
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized scene SVG");
+        this._cancelCameraAnimation();
+        const duration = this._resolveCameraDuration(options);
+        if (duration === 0) {
+            this._setCameraViewBox(svg, viewBox, target);
+            return;
+        }
+        const from = currentSvgViewBox(svg) ?? this._cameraState?.viewBox ?? viewBox;
+        const easing = resolveCameraEasing(options.easing ?? this._config.transitionEasing);
+        const start = performance.now();
+        const step = (now) => {
+            const t = Math.min((now - start) / duration, 1);
+            this._setCameraViewBox(svg, lerpViewBox(from, viewBox, easing(t)), target);
+            if (t < 1) {
+                this._cameraAnim = requestAnimationFrame(step);
+            }
+            else {
+                this._cameraAnim = null;
+            }
+        };
+        this._cameraAnim = requestAnimationFrame(step);
+    }
+    _setCameraViewBox(svg, viewBox, target) {
+        applySceneViewBox(svg, viewBox);
+        const full = this._bundle ? getResolvedViewBox(this._bundle) : viewBox;
+        this._cameraState = {
+            viewBox,
+            target,
+            isZoomed: !sameViewBox(viewBox, full),
+        };
+        this._emit("camera-change", this.getCameraState());
+    }
+    _getSceneSvg() {
+        return (this._sceneElement ?? this._container?.querySelector("svg") ?? null);
+    }
+    _resolveCameraPadding(options) {
+        const padding = options.padding ?? 32;
+        if (!Number.isFinite(padding) || padding < 0 || padding > 2048) {
+            throw new ControllerError("INVALID_CAMERA_OPTIONS", "Camera padding must be between 0 and 2048");
+        }
+        return padding;
+    }
+    _resolveCameraDuration(options) {
+        const duration = options.duration ?? this._config.transitionDuration;
+        if (!Number.isInteger(duration) || duration < 0 || duration > 10000) {
+            throw new ControllerError("INVALID_CAMERA_OPTIONS", "Camera duration must be an integer from 0 to 10000");
+        }
+        return duration;
+    }
+    _assertValidCameraArea(area) {
+        if (!Array.isArray(area.at) ||
+            area.at.length !== 2 ||
+            !area.at.every((value) => Number.isFinite(value) && value >= 0) ||
+            !Array.isArray(area.size) ||
+            area.size.length !== 2 ||
+            !area.size.every((value) => Number.isFinite(value) && value > 0)) {
+            throw new ControllerError("INVALID_CAMERA_OPTIONS", "Camera area must use non-negative at and positive size");
+        }
     }
     _applyLifecycleChanges(elements) {
         for (const elDef of elements) {
@@ -2002,6 +1147,12 @@ class AnimationController {
             this._transitionAnim = null;
         }
     }
+    _cancelCameraAnimation() {
+        if (this._cameraAnim !== null) {
+            cancelAnimationFrame(this._cameraAnim);
+            this._cameraAnim = null;
+        }
+    }
     // ── Scroll binding ─────────────────────────────────────────────────────
     _bindScroll() {
         const container = this._config.container;
@@ -2186,9 +1337,70 @@ function oppositeEntryAnimation(exit) {
             return "none";
     }
 }
+function surroundingStops(scenes, progress) {
+    let previousIndex = 0;
+    let nextIndex = scenes.length - 1;
+    for (let i = 0; i < scenes.length; i++) {
+        if (scenes[i].progress <= progress)
+            previousIndex = i;
+        if (scenes[i].progress >= progress) {
+            nextIndex = i;
+            break;
+        }
+    }
+    return {
+        previous: { scene: scenes[previousIndex], index: previousIndex },
+        next: { scene: scenes[nextIndex], index: nextIndex },
+    };
+}
+function expandViewBox(viewBox, padding) {
+    return {
+        minX: roundCameraNumber(viewBox.minX - padding),
+        minY: roundCameraNumber(viewBox.minY - padding),
+        width: roundCameraNumber(Math.max(1, viewBox.width + padding * 2)),
+        height: roundCameraNumber(Math.max(1, viewBox.height + padding * 2)),
+    };
+}
+function lerpViewBox(from, to, t) {
+    return {
+        minX: roundCameraNumber(from.minX + (to.minX - from.minX) * t),
+        minY: roundCameraNumber(from.minY + (to.minY - from.minY) * t),
+        width: roundCameraNumber(from.width + (to.width - from.width) * t),
+        height: roundCameraNumber(from.height + (to.height - from.height) * t),
+    };
+}
+function sameViewBox(a, b) {
+    return a.minX === b.minX && a.minY === b.minY && a.width === b.width && a.height === b.height;
+}
+function currentSvgViewBox(svg) {
+    const raw = svg.getAttribute("viewBox");
+    if (!raw)
+        return undefined;
+    const parts = raw.trim().split(/\s+/).map(Number);
+    if (parts.length !== 4 || parts.some((part) => !Number.isFinite(part)))
+        return undefined;
+    return { minX: parts[0], minY: parts[1], width: parts[2], height: parts[3] };
+}
+function resolveCameraEasing(easing) {
+    return resolveEasing(easing === "ease-in-out" ? "easeInOutCubic" : easing === "ease-out" ? "easeOutCubic" : "linear");
+}
+function copyCameraState(state) {
+    return {
+        viewBox: { ...state.viewBox },
+        target: state.target?.type === "area"
+            ? { type: "area", at: [...state.target.at], size: [...state.target.size] }
+            : state.target
+                ? { ...state.target }
+                : undefined,
+        isZoomed: state.isZoomed,
+    };
+}
+function roundCameraNumber(value) {
+    return Math.round(value * 1000) / 1000;
+}
 
 const RUNTIME_BUNDLE_FORMAT = "isostate-runtime-bundle";
-const RUNTIME_VERSION = "0.1.2";
+const RUNTIME_VERSION = "0.3.0";
 const HEX_DIGEST_PATTERN = /^[a-f0-9]{64}$/;
 /** Mount a compiled runtime bundle into an HTML element. */
 function mountScene(target, bundle, options = {}) {
@@ -2278,6 +1490,10 @@ function getResolvedConfig(bundle, options = {}) {
             align: [...bundle.layout.align],
         },
         viewBox: getResolvedViewBox(bundle),
+        camera: {
+            viewBox: getResolvedViewBox(bundle),
+            isZoomed: false,
+        },
         theme: bundle.theme,
         themeVars: getResolvedThemeVars(bundle, options.themeVars),
         scenes: bundle.scenes.map((scene) => ({
@@ -2321,71 +1537,6 @@ function normalizeValue(value) {
 function isPlainObject(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function sha256(input) {
-    const bytes = utf8Bytes(input);
-    const bitLength = bytes.length * 8;
-    bytes.push(0x80);
-    while (bytes.length % 64 !== 56)
-        bytes.push(0);
-    for (let i = 7; i >= 0; i--) {
-        bytes.push(Math.floor(bitLength / 2 ** (i * 8)) & 0xff);
-    }
-    const h = [0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19];
-    const k = [
-        0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5, 0xd807aa98,
-        0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174, 0xe49b69c1, 0xefbe4786,
-        0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da, 0x983e5152, 0xa831c66d, 0xb00327c8,
-        0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967, 0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
-        0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85, 0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819,
-        0xd6990624, 0xf40e3585, 0x106aa070, 0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a,
-        0x5b9cca4f, 0x682e6ff3, 0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7,
-        0xc67178f2,
-    ];
-    const w = new Array(64);
-    for (let offset = 0; offset < bytes.length; offset += 64) {
-        for (let i = 0; i < 16; i++) {
-            const j = offset + i * 4;
-            w[i] = ((bytes[j] << 24) | (bytes[j + 1] << 16) | (bytes[j + 2] << 8) | bytes[j + 3]) >>> 0;
-        }
-        for (let i = 16; i < 64; i++) {
-            const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ (w[i - 15] >>> 3);
-            const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ (w[i - 2] >>> 10);
-            w[i] = (w[i - 16] + s0 + w[i - 7] + s1) >>> 0;
-        }
-        let [a, b, c, d, e, f, g, hh] = h;
-        for (let i = 0; i < 64; i++) {
-            const s1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
-            const ch = (e & f) ^ (~e & g);
-            const temp1 = (hh + s1 + ch + k[i] + w[i]) >>> 0;
-            const s0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
-            const maj = (a & b) ^ (a & c) ^ (b & c);
-            const temp2 = (s0 + maj) >>> 0;
-            hh = g;
-            g = f;
-            f = e;
-            e = (d + temp1) >>> 0;
-            d = c;
-            c = b;
-            b = a;
-            a = (temp1 + temp2) >>> 0;
-        }
-        h[0] = (h[0] + a) >>> 0;
-        h[1] = (h[1] + b) >>> 0;
-        h[2] = (h[2] + c) >>> 0;
-        h[3] = (h[3] + d) >>> 0;
-        h[4] = (h[4] + e) >>> 0;
-        h[5] = (h[5] + f) >>> 0;
-        h[6] = (h[6] + g) >>> 0;
-        h[7] = (h[7] + hh) >>> 0;
-    }
-    return h.map((value) => value.toString(16).padStart(8, "0")).join("");
-}
-function utf8Bytes(input) {
-    return Array.from(new TextEncoder().encode(input));
-}
-function rotr(value, bits) {
-    return (value >>> bits) | (value << (32 - bits));
-}
 
-export { AnimationController as A, DEFAULT_CELL_SIZE as D, AnimationEngine as a, AssetRegistryImpl as b, applyThemeToElement as c, buildSceneDOM as d, calculateTransform as e, calculateVisualSize as f, composeTheme as g, createAssetRegistry as h, createDefaultRegistry as i, easeInCubic as j, easeInOutCubic as k, easeOutCubic as l, linear as m, mountScene as n, resolveTheme as o, projectToScreen as p, resolveEasing as r };
-//# sourceMappingURL=index-DEv2-G9F.js.map
+export { AnimationController as A, AnimationEngine as a, easeInOutCubic as b, easeOutCubic as c, easeInCubic as e, linear as l, mountScene as m, resolveEasing as r };
+//# sourceMappingURL=index-B6HlPnov.js.map