pptx-angular-viewer 1.1.49 → 1.1.51

package/fesm2022/pptx-angular-viewer.mjs

@@ -29879,6 +29879,163 @@ function createDefaultChartElement(chartType = DEFAULT_INSERT_CHART_TYPE, positi
     });
 }
 
+/**
+ * SmartArt reflow: convert algorithmic layout results back to
+ * PptxSmartArtDrawingShape[] so the drawing-shape renderer handles post-edit
+ * display and shapes round-trip correctly through save.
+ *
+ * When structural edits (add/remove/reorder/text/style) clear `drawingShapes`,
+ * `rebuildDrawingShapesIfCleared` calls the layout engine and converts the
+ * geometry back to drawing shapes so the richer DrawingShapeRenderer path
+ * stays active rather than falling back to the plain SVG family renderer.
+ *
+ * @module smartart-reflow-to-shapes
+ */
+// ── Polygon bounding-box helper ───────────────────────────────────────────────
+/**
+ * Compute the axis-aligned bounding box of an SVG polygon points string.
+ * Returns a zero-size box when the string is empty or unparseable.
+ */
+function polygonBounds(points) {
+    const pairs = points.trim().split(/\s+/u);
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const pair of pairs) {
+        const comma = pair.indexOf(',');
+        if (comma < 0) {
+            continue;
+        }
+        const x = parseFloat(pair.slice(0, comma));
+        const y = parseFloat(pair.slice(comma + 1));
+        if (!isFinite(x) || !isFinite(y)) {
+            continue;
+        }
+        if (x < minX) {
+            minX = x;
+        }
+        if (x > maxX) {
+            maxX = x;
+        }
+        if (y < minY) {
+            minY = y;
+        }
+        if (y > maxY) {
+            maxY = y;
+        }
+    }
+    if (!isFinite(minX)) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+// ── Single-node mapping ────────────────────────────────────────────────────────
+/**
+ * Map one RenderedNode to a PptxSmartArtDrawingShape.
+ *
+ * The shape ID encodes the layout family and the source node id as a suffix so
+ * `resolveDrawingShapeNodeId` can match it back via the `reflow-` prefix rule.
+ */
+function renderedNodeToShape(rn, nodeId, family) {
+    const id = `reflow-${family}-${nodeId}`;
+    const text = rn.text || undefined;
+    if (rn.kind === 'rect') {
+        return {
+            id,
+            shapeType: rn.rx > 0 ? 'roundRect' : 'rect',
+            x: rn.x,
+            y: rn.y,
+            width: rn.width,
+            height: rn.height,
+            rotation: 0,
+            fillColor: rn.fill,
+            strokeColor: rn.stroke,
+            strokeWidth: rn.strokeWidth,
+            text,
+            fontSize: rn.fontSize,
+        };
+    }
+    if (rn.kind === 'circle') {
+        return {
+            id,
+            shapeType: 'ellipse',
+            x: rn.cx - rn.r,
+            y: rn.cy - rn.r,
+            width: rn.r * 2,
+            height: rn.r * 2,
+            rotation: 0,
+            fillColor: rn.fill,
+            strokeColor: rn.stroke,
+            strokeWidth: rn.strokeWidth,
+            text,
+            fontSize: rn.fontSize,
+        };
+    }
+    // polygon -- extract a bounding box from the SVG points string
+    const bounds = polygonBounds(rn.points);
+    return {
+        id,
+        shapeType: 'chevron',
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+        rotation: 0,
+        fillColor: rn.fill,
+        strokeColor: rn.stroke,
+        strokeWidth: rn.strokeWidth,
+        text,
+        fontSize: rn.fontSize,
+    };
+}
+// ── Public API ─────────────────────────────────────────────────────────────────
+/**
+ * Convert a SmartArt layout result to an array of PptxSmartArtDrawingShape.
+ *
+ * Rendered nodes are matched to source nodes by flat index when the counts
+ * align; otherwise the rendered node's key is used as the node-id suffix.
+ * Connector paths are omitted: PptxSmartArtDrawingShape has no SVG path field,
+ * and connectors carry no editable content anyway.
+ */
+function reflowToDrawingShapes(layoutResult, nodes) {
+    const flat = flattenNodes([...nodes]);
+    const family = layoutResult.family;
+    const shapes = [];
+    for (let i = 0; i < layoutResult.nodes.length; i++) {
+        const rn = layoutResult.nodes[i];
+        const sourceNode = flat[i];
+        const nodeId = sourceNode?.id ?? rn.key;
+        shapes.push(renderedNodeToShape(rn, nodeId, family));
+    }
+    return shapes;
+}
+/**
+ * Rebuild drawing shapes from the algorithmic layout engine when they have been
+ * cleared by a structural edit (add/remove/reorder/text/style change on a node).
+ *
+ * Returns the original data unchanged when drawing shapes are already populated
+ * or when there are no nodes to lay out.
+ *
+ * @param smartArtData  - The updated SmartArt data (with cleared drawingShapes).
+ * @param layout        - Named layout preset from the element (may be undefined).
+ * @param palette       - Resolved colour palette (hex strings).
+ * @param style         - Resolved SmartArt style intensity.
+ * @param elementId     - Element ID used for stable SVG key generation.
+ * @param box           - Pixel bounding box of the element.
+ */
+function rebuildDrawingShapesIfCleared(smartArtData, layout, palette, style, elementId, box) {
+    const shapes = smartArtData.drawingShapes;
+    if ((shapes !== undefined && shapes.length > 0) || smartArtData.nodes.length === 0) {
+        return smartArtData;
+    }
+    const layoutResult = computeSmartArtLayout(smartArtData.nodes, box, palette, style, elementId, smartArtData.resolvedLayoutType, layout);
+    return {
+        ...smartArtData,
+        drawingShapes: reflowToDrawingShapes(layoutResult, smartArtData.nodes),
+    };
+}
+
 /**
  * Framework-agnostic rendering & editing helpers shared by the React, Vue, and
  * Angular `pptx-viewer` bindings. Pure TypeScript (no framework imports) — each
@@ -35644,7 +35801,7 @@ class EditorToolbarComponent {
 				</button>
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-toolbar{display:flex;flex-direction:row;align-items:center;gap:0;padding:4px 8px;background:var(--pptx-toolbar-bg, #1e1e1e);color:var(--pptx-toolbar-fg, #e0e0e0);border-bottom:1px solid var(--pptx-toolbar-border, #333);min-height:36px;-webkit-user-select:none;user-select:none}.pptx-ng-toolbar__group{display:flex;flex-direction:row;align-items:center;gap:2px}.pptx-ng-toolbar__group-label{font-size:10px;color:var(--pptx-toolbar-muted, #888);text-transform:uppercase;letter-spacing:.05em;padding:0 6px 0 4px;flex-shrink:0}.pptx-ng-toolbar__divider{width:1px;height:20px;background:var(--pptx-toolbar-border, #444);margin:0 6px;flex-shrink:0}.pptx-ng-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;padding:0;background:transparent;border:1px solid transparent;border-radius:3px;color:inherit;font-size:14px;cursor:pointer;transition:background .1s,border-color .1s;flex-shrink:0}.pptx-ng-toolbar__btn:hover:not(:disabled){background:var(--pptx-toolbar-hover, #3a3a3a);border-color:var(--pptx-toolbar-border, #555)}.pptx-ng-toolbar__btn:active:not(:disabled){background:var(--pptx-toolbar-active-bg, #2a2a2a)}.pptx-ng-toolbar__btn:disabled{opacity:.35;cursor:default}.pptx-ng-toolbar__btn--danger:not(:disabled){color:var(--pptx-toolbar-danger, #f47c7c)}.pptx-ng-toolbar__btn--danger:hover:not(:disabled){background:var(--pptx-toolbar-danger-hover, #4a1a1a);border-color:var(--pptx-toolbar-danger-border, #6b2a2a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-toolbar{display:flex;flex-direction:row;align-items:center;gap:0;padding:4px 8px;background:var(--pptx-toolbar-bg, #1e1e1e);color:var(--pptx-toolbar-fg, #e0e0e0);border-bottom:1px solid var(--pptx-toolbar-border, #333);min-height:36px;-webkit-user-select:none;user-select:none}.pptx-ng-toolbar__group{display:flex;flex-direction:row;align-items:center;gap:4px}.pptx-ng-toolbar__group-label{font-size:10px;color:var(--pptx-toolbar-muted, #888);text-transform:uppercase;letter-spacing:.05em;padding:0 6px 0 4px;flex-shrink:0}.pptx-ng-toolbar__divider{width:1px;height:20px;background:var(--pptx-toolbar-border, #444);margin:0 4px;flex-shrink:0}.pptx-ng-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:2px 8px;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;font-size:14px;cursor:pointer;transition:background .1s;flex-shrink:0}.pptx-ng-toolbar__btn:hover:not(:disabled){background:var(--pptx-toolbar-hover, #3a3a3a)}.pptx-ng-toolbar__btn:active:not(:disabled){background:var(--pptx-toolbar-active-bg, #2a2a2a);transform:scale(.95);opacity:.8}.pptx-ng-toolbar__btn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-toolbar__btn--danger:not(:disabled){color:var(--pptx-toolbar-danger, #f47c7c)}.pptx-ng-toolbar__btn--danger:hover:not(:disabled){background:var(--pptx-toolbar-danger-hover, #4a1a1a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
@@ -35855,7 +36012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				</button>
 			</div>
 		</div>
-	`, styles: [".pptx-ng-toolbar{display:flex;flex-direction:row;align-items:center;gap:0;padding:4px 8px;background:var(--pptx-toolbar-bg, #1e1e1e);color:var(--pptx-toolbar-fg, #e0e0e0);border-bottom:1px solid var(--pptx-toolbar-border, #333);min-height:36px;-webkit-user-select:none;user-select:none}.pptx-ng-toolbar__group{display:flex;flex-direction:row;align-items:center;gap:2px}.pptx-ng-toolbar__group-label{font-size:10px;color:var(--pptx-toolbar-muted, #888);text-transform:uppercase;letter-spacing:.05em;padding:0 6px 0 4px;flex-shrink:0}.pptx-ng-toolbar__divider{width:1px;height:20px;background:var(--pptx-toolbar-border, #444);margin:0 6px;flex-shrink:0}.pptx-ng-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;padding:0;background:transparent;border:1px solid transparent;border-radius:3px;color:inherit;font-size:14px;cursor:pointer;transition:background .1s,border-color .1s;flex-shrink:0}.pptx-ng-toolbar__btn:hover:not(:disabled){background:var(--pptx-toolbar-hover, #3a3a3a);border-color:var(--pptx-toolbar-border, #555)}.pptx-ng-toolbar__btn:active:not(:disabled){background:var(--pptx-toolbar-active-bg, #2a2a2a)}.pptx-ng-toolbar__btn:disabled{opacity:.35;cursor:default}.pptx-ng-toolbar__btn--danger:not(:disabled){color:var(--pptx-toolbar-danger, #f47c7c)}.pptx-ng-toolbar__btn--danger:hover:not(:disabled){background:var(--pptx-toolbar-danger-hover, #4a1a1a);border-color:var(--pptx-toolbar-danger-border, #6b2a2a)}\n"] }]
+	`, styles: [".pptx-ng-toolbar{display:flex;flex-direction:row;align-items:center;gap:0;padding:4px 8px;background:var(--pptx-toolbar-bg, #1e1e1e);color:var(--pptx-toolbar-fg, #e0e0e0);border-bottom:1px solid var(--pptx-toolbar-border, #333);min-height:36px;-webkit-user-select:none;user-select:none}.pptx-ng-toolbar__group{display:flex;flex-direction:row;align-items:center;gap:4px}.pptx-ng-toolbar__group-label{font-size:10px;color:var(--pptx-toolbar-muted, #888);text-transform:uppercase;letter-spacing:.05em;padding:0 6px 0 4px;flex-shrink:0}.pptx-ng-toolbar__divider{width:1px;height:20px;background:var(--pptx-toolbar-border, #444);margin:0 4px;flex-shrink:0}.pptx-ng-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:2px 8px;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;font-size:14px;cursor:pointer;transition:background .1s;flex-shrink:0}.pptx-ng-toolbar__btn:hover:not(:disabled){background:var(--pptx-toolbar-hover, #3a3a3a)}.pptx-ng-toolbar__btn:active:not(:disabled){background:var(--pptx-toolbar-active-bg, #2a2a2a);transform:scale(.95);opacity:.8}.pptx-ng-toolbar__btn:disabled{opacity:.4;cursor:not-allowed}.pptx-ng-toolbar__btn--danger:not(:disabled){color:var(--pptx-toolbar-danger, #f47c7c)}.pptx-ng-toolbar__btn--danger:hover:not(:disabled){background:var(--pptx-toolbar-danger-hover, #4a1a1a)}\n"] }]
         }], propDecorators: { slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: true }] }] } });
 
 /**
@@ -36410,10 +36567,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }] });
 
 /**
- * Native EyeDropper API wrapper for the Angular viewer.
+ * EyeDropper colour sampler for the Angular viewer.
  *
- * Feature-detects the browser EyeDropper API (Chrome 95+ / Edge 95+).
- * When unavailable, all functions no-op gracefully.
+ * Prefers the native browser EyeDropper API (Chrome 95+ / Edge 95+). For
+ * browsers without it (Firefox, Safari) a DOM-sampling fallback reads the
+ * colour under the pointer via `elementFromPoint` + `getComputedStyle`, so the
+ * eyedropper still works everywhere. Mirrors the React viewer's
+ * `viewer/utils/eyedropper.ts`.
  */
 /**
  * Returns true when the native EyeDropper API is available in this browser.
@@ -36441,6 +36601,103 @@ async function openNativeEyeDropper() {
         return null;
     }
 }
+// ---------------------------------------------------------------------------
+// Fallback sampling (Firefox / Safari)
+// ---------------------------------------------------------------------------
+function toHex(r, g, b) {
+    const h = (n) => n.toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+function parseRgbaString(str) {
+    const match = str.match(/rgba?\(\s*(?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)/u);
+    if (!match?.groups) {
+        return null;
+    }
+    const r = parseInt(match.groups.r, 10);
+    const g = parseInt(match.groups.g, 10);
+    const b = parseInt(match.groups.b, 10);
+    return { r, g, b, hex: toHex(r, g, b) };
+}
+/**
+ * Sample the colour at a client-space point by inspecting the topmost element's
+ * computed paint. Tries, in order: a real `<canvas>` pixel read (sharp for
+ * rasterised content), then the element's `background-color`, SVG `fill`, and
+ * finally text `color`. Returns `null` when nothing paintable is found.
+ *
+ * This is the DOM fallback used when the native EyeDropper API is unavailable;
+ * it needs no canvas plumbing, so it works against the live slide DOM.
+ */
+function sampleColorFromSlide(clientX, clientY) {
+    const target = typeof document === 'undefined' ? null : document.elementFromPoint(clientX, clientY);
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    // Direct pixel read when the pointer is over a <canvas> (untainted only).
+    const canvas = target instanceof HTMLCanvasElement ? target : target.closest('canvas');
+    if (canvas instanceof HTMLCanvasElement) {
+        try {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const rect = canvas.getBoundingClientRect();
+                const sx = Math.round((clientX - rect.left) * (canvas.width / canvas.clientWidth));
+                const sy = Math.round((clientY - rect.top) * (canvas.height / canvas.clientHeight));
+                const pixel = ctx.getImageData(sx, sy, 1, 1).data;
+                return { r: pixel[0], g: pixel[1], b: pixel[2], hex: toHex(pixel[0], pixel[1], pixel[2]) };
+            }
+        }
+        catch {
+            // Cross-origin / tainted canvas: fall through to computed-style sampling.
+        }
+    }
+    const computed = getComputedStyle(target);
+    const bg = computed.backgroundColor;
+    if (bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)') {
+        const parsed = parseRgbaString(bg);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    const fill = computed.fill;
+    if (fill && fill !== 'none' && fill !== 'transparent') {
+        const parsed = parseRgbaString(fill);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return computed.color ? parseRgbaString(computed.color) : null;
+}
+/**
+ * Run the eyedropper fallback: arm a one-shot pointer listener and resolve with
+ * the hex colour of the next click (or `null` if the user presses Escape). Used
+ * only when {@link eyedropperAvailable} is false. The caller is responsible for
+ * any "armed" UI affordance; this just manages the listeners.
+ */
+function pickColorByClickFallback() {
+    if (typeof document === 'undefined') {
+        return Promise.resolve(null);
+    }
+    return new Promise((resolve) => {
+        const cleanup = () => {
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            document.removeEventListener('keydown', onKeyDown, true);
+        };
+        const onPointerDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            cleanup();
+            const sample = sampleColorFromSlide(event.clientX, event.clientY);
+            resolve(sample ? sample.hex : null);
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                cleanup();
+                resolve(null);
+            }
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKeyDown, true);
+    });
+}
 
 /**
  * `LoadContentService`: Angular port of the React `useLoadContent` hook and
@@ -45069,6 +45326,9 @@ class InspectorPanelComponent {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "seed" }] : /* istanbul ignore next */ []));
+    /** Whether the element has lock flags preventing move/select. */
+    isLocked = computed(() => Boolean(this.el().locks?.noMove) || Boolean(this.el().locks?.noSelect), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLocked" }] : /* istanbul ignore next */ []));
     /** Whether the element supports shape-style (fill/stroke) editing. */
     hasShape = computed(() => hasShapeProperties(this.el()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasShape" }] : /* istanbul ignore next */ []));
@@ -45105,6 +45365,16 @@ class InspectorPanelComponent {
             smartArtData,
         });
     }
+    /** Toggle element lock (noMove + noResize + noSelect). */
+    onLockToggle() {
+        if (this.isLocked()) {
+            this.onPatch({ locks: undefined });
+        }
+        else {
+            const locks = { noMove: true, noResize: true, noSelect: true };
+            this.onPatch({ locks });
+        }
+    }
     /** Commit a partial-element patch from an advanced sub-panel as one history entry. */
     onPatch(patch) {
         this.editor.updateElement(this.slideIndex(), this.el().id, patch);
@@ -45384,7 +45654,22 @@ class InspectorPanelComponent {
 
 			<!-- ── Arrange ────────────────────────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
-				<h3 class="pptx-ng-inspector__heading">Arrange</h3>
+				<div
+					class="pptx-ng-inspector__row"
+					style="justify-content:space-between;margin-bottom:0.35rem"
+				>
+					<h3 class="pptx-ng-inspector__heading" style="margin:0">Arrange</h3>
+					<button
+						type="button"
+						class="pptx-ng-inspector__btn"
+						style="flex:0 0 auto;padding:2px 6px"
+						[attr.aria-pressed]="isLocked()"
+						[title]="isLocked() ? 'Unlock element' : 'Lock element'"
+						(click)="onLockToggle()"
+					>
+						{{ isLocked() ? 'Locked' : 'Lock' }}
+					</button>
+				</div>
 
 				<div class="pptx-ng-inspector__row">
 					<button
@@ -45689,7 +45974,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 			<!-- ── Arrange ────────────────────────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
-				<h3 class="pptx-ng-inspector__heading">Arrange</h3>
+				<div
+					class="pptx-ng-inspector__row"
+					style="justify-content:space-between;margin-bottom:0.35rem"
+				>
+					<h3 class="pptx-ng-inspector__heading" style="margin:0">Arrange</h3>
+					<button
+						type="button"
+						class="pptx-ng-inspector__btn"
+						style="flex:0 0 auto;padding:2px 6px"
+						[attr.aria-pressed]="isLocked()"
+						[title]="isLocked() ? 'Unlock element' : 'Lock element'"
+						(click)="onLockToggle()"
+					>
+						{{ isLocked() ? 'Locked' : 'Lock' }}
+					</button>
+				</div>
 
 				<div class="pptx-ng-inspector__row">
 					<button
@@ -49507,20 +49807,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 	`, styles: [".pptx-ng-ole-preview{position:relative;width:100%;height:100%}.pptx-ng-ole-img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;display:block}.pptx-ng-ole-badge{position:absolute;bottom:4px;right:4px;z-index:10}.pptx-ng-ole-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-sizing:border-box}.pptx-ng-ole-name{margin-top:8px;font-size:12px;font-weight:500;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-sublabel{margin-top:2px;font-size:10px;color:#00000073;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-actions{position:absolute;bottom:4px;left:4px;display:flex;gap:4px;z-index:11;opacity:0;transition:opacity .12s ease-in-out}.pptx-ng-ole:hover .pptx-ng-ole-actions,.pptx-ng-ole-actions:focus-within{opacity:1}.pptx-ng-ole-action{font-size:11px;line-height:1;padding:4px 8px;border-radius:4px;background-color:#000000b8;color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;pointer-events:auto}.pptx-ng-ole-action:hover{background-color:#000000d9}.pptx-ng-ole-action:focus-visible{outline:2px solid #fff;outline-offset:1px}\n"] }]
         }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
 
-/**
- * Thin re-export shim → vendored `pptx-viewer-shared` (`render/smartart-drawing`).
- *
- * The drawing-shape view-model helpers (palette resolution, chrome style,
- * viewBox fitting, `RenderedShape` projection) were extracted to shared and are
- * consumed by every binding. This shim preserves the historical Angular import
- * surface.
- *
- * Shared exports the SmartArt default palette as `SMARTART_DEFAULT_PALETTE`
- * (the bare `DEFAULT_PALETTE` is taken by the chart palette in shared); it is
- * re-aliased back to `DEFAULT_PALETTE` here so this binding's import sites and
- * the colocated tests are unchanged.
- */
-
 /**
  * smart-art-inline-edit.ts: pure logic for on-canvas SmartArt node text editing.
  *
@@ -49691,20 +49977,65 @@ function containsElementId(elements, id) {
     return false;
 }
 
+/**
+ * Thin re-export shim → vendored `pptx-viewer-shared` (`render/smartart-drawing`).
+ *
+ * The drawing-shape view-model helpers (palette resolution, chrome style,
+ * viewBox fitting, `RenderedShape` projection) were extracted to shared and are
+ * consumed by every binding. This shim preserves the historical Angular import
+ * surface.
+ *
+ * Shared exports the SmartArt default palette as `SMARTART_DEFAULT_PALETTE`
+ * (the bare `DEFAULT_PALETTE` is taken by the chart palette in shared); it is
+ * re-aliased back to `DEFAULT_PALETTE` here so this binding's import sites and
+ * the colocated tests are unchanged.
+ */
+
+/** Narrow a RenderedNode to a circle, or undefined. */
+function narrowToCircle(node) {
+    return node.kind === 'circle' ? node : undefined;
+}
+/** Narrow a RenderedNode to a polygon, or undefined. */
+function narrowToPolygon(node) {
+    return node.kind === 'polygon' ? node : undefined;
+}
+/** Narrow a RenderedNode to a rect, or undefined. */
+function narrowToRect(node) {
+    return node.kind === 'rect' ? node : undefined;
+}
+/**
+ * Split node text on newlines and compute per-line y offsets (in SVG px)
+ * that centre the block around the node centre y (offset 0). Single-line
+ * text produces one entry with offsetY=0, preserving the existing
+ * dominant-baseline="central" behaviour exactly.
+ */
+function computeTextLines(text, fontSize) {
+    const raw = (text ?? '').split('\n').filter((l) => l.length > 0);
+    if (raw.length === 0) {
+        return [{ text: '', offsetY: 0 }];
+    }
+    const lh = fontSize * 1.2;
+    const totalH = raw.length * lh;
+    return raw.map((line, i) => ({
+        text: line,
+        offsetY: -totalH / 2 + lh / 2 + i * lh,
+    }));
+}
+
 /**
  * SmartArtRendererComponent: Angular SmartArt renderer.
  *
  * Data path mirrors the Vue `SmartArtRenderer.vue` and the React renderer:
- *  1. **Drawing shapes** (`smartArtData.drawingShapes`) — the preferred path
+ *  1. **Drawing shapes** (`smartArtData.drawingShapes`) -- the preferred path
  *     when the core extracted per-shape geometry from `ppt/diagrams/drawing*.xml`.
- *  2. **Shared SVG-fallback engine** (`computeSmartArtLayout`) — when no drawing
+ *  2. **Shared SVG-fallback engine** (`computeSmartArtLayout`) -- when no drawing
  *     shapes exist, the framework-agnostic engine in `pptx-viewer-shared`
  *     positions/styles the node tree across all 10 layout families (list /
  *     process / cycle / hierarchy / matrix / radial / pyramid / venn / funnel /
  *     target), returning `RenderedNode[]` (rect / circle / polygon) +
  *     `RenderedConnector[]` view-models. Every binding renders the same
  *     geometry; this maps those view-models to SVG exactly as Vue does.
- *  3. **Placeholder** — when there is neither data nor any nodes/shapes.
+ *  3. **Placeholder** -- when there is neither data nor any nodes/shapes.
  */
 class SmartArtRendererComponent {
     /** The smartArt element to render. Must be `type === 'smartArt'`. */
@@ -49733,6 +50064,9 @@ class SmartArtRendererComponent {
     /** The mounted `<textarea>` for the active node edit, if any. */
     nodeEditor = viewChild('nodeEditor', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nodeEditor" }] : /* istanbul ignore next */ []));
+    /** Container div ref used to project hover rects into local coordinates. */
+    smartartContainer = viewChild('smartartContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smartartContainer" }] : /* istanbul ignore next */ []));
     /**
      * Guards against a cancel-triggered DOM-removal blur committing the edit.
      * Set to true before programmatic cancellation; reset to false on each new edit.
@@ -49787,6 +50121,17 @@ class SmartArtRendererComponent {
     ...(ngDevMode ? [{ debugName: "svgViewBox" }] : /* istanbul ignore next */ []));
     renderedShapes = computed(() => projectDrawingShapes(this.element().id, this.rawDrawingShapes(), this.viewBox(), this.palette(), this.artStyle()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderedShapes" }] : /* istanbul ignore next */ []));
+    /**
+     * Node id for each drawing shape (index-aligned with `renderedShapes`).
+     * Used to tag `<g>` elements with `data-smartart-node-id` so the 3D
+     * renderer's hit-test overlay can resolve a click to a node.
+     */
+    drawingShapeNodeIds = computed(() => {
+        const shapes = this.rawDrawingShapes();
+        const nodes = this.nodes();
+        return shapes.map((shape, i) => resolveDrawingShapeNodeId(shape, i, shapes, nodes));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawingShapeNodeIds" }] : /* istanbul ignore next */ []));
     // ── Shared SVG-fallback engine (no drawing shapes) ──────────────────────
     layout = computed(() => {
         const el = this.element();
@@ -49816,9 +50161,17 @@ class SmartArtRendererComponent {
         return map;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "a11yLabelById" }] : /* istanbul ignore next */ []));
+    /**
+     * Parsed data-model node id for a rendered node (or `null` when the key does
+     * not map to one). Exposed as a method so the template can use it: Angular
+     * AOT templates can only call component members, not imported functions.
+     */
+    nodeKeyId(node) {
+        return nodeIdFromKey(node.key, this.element().id);
+    }
     /** Resolve the accessibility label for a rendered node (by parsed node id). */
     nodeAriaLabel(node) {
-        const nodeId = nodeIdFromKey(node.key, this.element().id);
+        const nodeId = this.nodeKeyId(node);
         if (nodeId === null) {
             return null;
         }
@@ -49830,36 +50183,15 @@ class SmartArtRendererComponent {
      */
     liveMessage = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "liveMessage" }] : /* istanbul ignore next */ []));
-    /** Narrow a `RenderedNode` to a circle, or `undefined`. */
-    asCircle(node) {
-        return node.kind === 'circle' ? node : undefined;
-    }
-    /** Narrow a `RenderedNode` to a polygon, or `undefined`. */
-    asPolygon(node) {
-        return node.kind === 'polygon' ? node : undefined;
-    }
-    /** Narrow a `RenderedNode` to a rect, or `undefined`. */
-    asRect(node) {
-        return node.kind === 'rect' ? node : undefined;
-    }
-    /**
-     * Split node text on `\n` and compute per-line y offsets (in SVG px) that
-     * centre the block around the node centre y (offset 0). Single-line text
-     * produces one entry with offsetY=0, preserving the existing
-     * `dominant-baseline="central"` behaviour exactly.
-     */
-    textLines(text, fontSize) {
-        const raw = (text ?? '').split('\n').filter((l) => l.length > 0);
-        if (raw.length === 0) {
-            return [{ text: '', offsetY: 0 }];
-        }
-        const lh = fontSize * 1.2;
-        const totalH = raw.length * lh;
-        return raw.map((line, i) => ({
-            text: line,
-            offsetY: -totalH / 2 + lh / 2 + i * lh,
-        }));
-    }
+    hoveredNodeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredNodeId" }] : /* istanbul ignore next */ []));
+    hoveredNodeRect = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredNodeRect" }] : /* istanbul ignore next */ []));
+    /** Narrowing helpers bound as class properties for template type-checking. */
+    asCircle = narrowToCircle;
+    asPolygon = narrowToPolygon;
+    asRect = narrowToRect;
+    textLines = computeTextLines;
     // ── Inline node-text editing ───────────────────────────────────────────
     /** Double-click a node enters inline edit mode (when editable). */
     onNodeDblClick(event, node) {
@@ -49918,7 +50250,7 @@ class SmartArtRendererComponent {
     }
     /** The node's full (untruncated) data-model text, falling back to rendered text. */
     rawNodeText(node) {
-        const nodeId = nodeIdFromKey(node.key, this.element().id);
+        const nodeId = this.nodeKeyId(node);
         if (nodeId === null) {
             return node.text;
         }
@@ -49946,21 +50278,81 @@ class SmartArtRendererComponent {
         // Announce the commit to assistive technology via the polite live region.
         this.liveMessage.set(text.trim().length > 0 ? `Node updated to ${text.trim()}` : 'Node cleared');
     }
+    // ── Style bar & hover tracking ────────────────────────────────────────
+    styleBarStyle = computed(() => {
+        const rect = this.hoveredNodeRect();
+        if (!rect) {
+            return null;
+        }
+        return {
+            position: 'absolute',
+            left: `${Math.max(0, rect.left + rect.width - 120)}px`,
+            top: `${Math.max(0, rect.top - 22)}px`,
+            'z-index': '25',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleBarStyle" }] : /* istanbul ignore next */ []));
+    onMouseMove(event) {
+        if (!this.canEditNodes()) {
+            return;
+        }
+        const nodeEl = this.findNodeEl(event.target);
+        const cnt = this.smartartContainer()?.nativeElement;
+        const id = nodeEl?.getAttribute('data-smartart-node-id') ?? null;
+        this.hoveredNodeId.set(id);
+        this.hoveredNodeRect.set(id && nodeEl && cnt
+            ? computeInlineEditorRect(nodeEl.getBoundingClientRect(), cnt.getBoundingClientRect())
+            : null);
+    }
+    onMouseLeave() {
+        this.hoveredNodeId.set(null);
+        this.hoveredNodeRect.set(null);
+    }
+    findNodeEl(target) {
+        let el = target instanceof Element ? target : null;
+        while (el) {
+            if (el.hasAttribute('data-smartart-node-id')) {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    handleChangeNodeStyle(nodeId, fill) {
+        const data = this.smartArtData();
+        if (!data || !this.editor) {
+            return;
+        }
+        const next = setSmartArtNodeStyle(data, nodeId, { fillColor: fill });
+        if (next === data) {
+            return;
+        }
+        const slideIndex = findSlideIndexByElementId(this.editor.slides(), this.element().id);
+        if (slideIndex < 0) {
+            return;
+        }
+        this.editor.updateElement(slideIndex, this.element().id, {
+            smartArtData: next,
+        });
+    }
     // ── Empty / no-data state ──────────────────────────────────────────────
     isEmpty = computed(() => this.nodes().length === 0 && !this.hasDrawingShapes(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArtRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SmartArtRendererComponent, isStandalone: true, selector: "pptx-smart-art-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nodeEditor", first: true, predicate: ["nodeEditor"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SmartArtRendererComponent, isStandalone: true, selector: "pptx-smart-art-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nodeEditor", first: true, predicate: ["nodeEditor"], descendants: true, isSignal: true }, { propertyName: "smartartContainer", first: true, predicate: ["smartartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div
 			class="pptx-ng-element pptx-ng-smartart"
 			[ngStyle]="containerStyle()"
 			[attr.data-element-id]="element().id"
 		>
 			<div
+				#smartartContainer
 				class="pptx-ng-smartart-chrome"
 				[ngStyle]="chromeStyle()"
 				[attr.role]="a11y() ? a11y()!.role : null"
 				[attr.aria-label]="a11y()?.label ?? null"
+				(mousemove)="onMouseMove($event)"
+				(mouseleave)="onMouseLeave()"
 			>
 				@if (isEmpty()) {
 					<div class="pptx-ng-smartart-placeholder">SmartArt</div>
@@ -49970,8 +50362,14 @@ class SmartArtRendererComponent {
 						[attr.viewBox]="svgViewBox()"
 						preserveAspectRatio="xMidYMid meet"
 					>
-						@for (shape of renderedShapes(); track shape.key) {
-							<g [ngStyle]="shadowFilter() ? { filter: shadowFilter() } : {}">
+						@for (shape of renderedShapes(); track shape.key; let i = $index) {
+							<g
+								[ngStyle]="shadowFilter() ? { filter: shadowFilter() } : {}"
+								[attr.data-smartart-node-id]="drawingShapeNodeIds()[i] ?? null"
+								[class.pptx-ng-smartart-node--editable]="
+									canEditNodes() && !!drawingShapeNodeIds()[i]
+								"
+							>
 								@if (shape.isEllipse) {
 									<ellipse
 										[attr.cx]="shape.cx"
@@ -50037,6 +50435,7 @@ class SmartArtRendererComponent {
 								[attr.tabindex]="canEditNodes() ? 0 : null"
 								[attr.role]="canEditNodes() ? 'button' : 'img'"
 								[attr.aria-label]="nodeAriaLabel(node) ?? node.text"
+								[attr.data-smartart-node-id]="nodeKeyId(node)"
 								(dblclick)="onNodeDblClick($event, node)"
 								(keydown)="onNodeKeydown($event, node)"
 							>
@@ -50118,6 +50517,25 @@ class SmartArtRendererComponent {
 					<div class="pptx-ng-smartart-placeholder">SmartArt</div>
 				}
 
+				@if (canEditNodes() && hoveredNodeId() && !editState() && styleBarStyle()) {
+					<div
+						class="pptx-ng-smartart-style-bar"
+						[ngStyle]="styleBarStyle()!"
+						(mousedown)="$event.stopPropagation()"
+						(click)="$event.stopPropagation()"
+					>
+						@for (color of palette().slice(0, 6); track color) {
+							<button
+								type="button"
+								class="pptx-ng-smartart-swatch"
+								[attr.aria-label]="'Set fill to ' + color"
+								[style.background]="color"
+								(click)="handleChangeNodeStyle(hoveredNodeId()!, color)"
+							></button>
+						}
+					</div>
+				}
+
 				<!--
 					Inline node-text editor. Positioned in element-local px (== viewBox
 					units, since the SVG viewBox matches the element pixel size and the
@@ -50146,7 +50564,7 @@ class SmartArtRendererComponent {
 				<span class="pptx-ng-sr-only" aria-live="polite" role="status">{{ liveMessage() }}</span>
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pptx-ng-smartart-style-bar{position:absolute;pointer-events:auto}.pptx-ng-smartart-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-swatch:hover{transform:scale(1.25)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArtRendererComponent, decorators: [{
             type: Component,
@@ -50157,10 +50575,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 			[attr.data-element-id]="element().id"
 		>
 			<div
+				#smartartContainer
 				class="pptx-ng-smartart-chrome"
 				[ngStyle]="chromeStyle()"
 				[attr.role]="a11y() ? a11y()!.role : null"
 				[attr.aria-label]="a11y()?.label ?? null"
+				(mousemove)="onMouseMove($event)"
+				(mouseleave)="onMouseLeave()"
 			>
 				@if (isEmpty()) {
 					<div class="pptx-ng-smartart-placeholder">SmartArt</div>
@@ -50170,8 +50591,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 						[attr.viewBox]="svgViewBox()"
 						preserveAspectRatio="xMidYMid meet"
 					>
-						@for (shape of renderedShapes(); track shape.key) {
-							<g [ngStyle]="shadowFilter() ? { filter: shadowFilter() } : {}">
+						@for (shape of renderedShapes(); track shape.key; let i = $index) {
+							<g
+								[ngStyle]="shadowFilter() ? { filter: shadowFilter() } : {}"
+								[attr.data-smartart-node-id]="drawingShapeNodeIds()[i] ?? null"
+								[class.pptx-ng-smartart-node--editable]="
+									canEditNodes() && !!drawingShapeNodeIds()[i]
+								"
+							>
 								@if (shape.isEllipse) {
 									<ellipse
 										[attr.cx]="shape.cx"
@@ -50237,6 +50664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 								[attr.tabindex]="canEditNodes() ? 0 : null"
 								[attr.role]="canEditNodes() ? 'button' : 'img'"
 								[attr.aria-label]="nodeAriaLabel(node) ?? node.text"
+								[attr.data-smartart-node-id]="nodeKeyId(node)"
 								(dblclick)="onNodeDblClick($event, node)"
 								(keydown)="onNodeKeydown($event, node)"
 							>
@@ -50318,6 +50746,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 					<div class="pptx-ng-smartart-placeholder">SmartArt</div>
 				}
 
+				@if (canEditNodes() && hoveredNodeId() && !editState() && styleBarStyle()) {
+					<div
+						class="pptx-ng-smartart-style-bar"
+						[ngStyle]="styleBarStyle()!"
+						(mousedown)="$event.stopPropagation()"
+						(click)="$event.stopPropagation()"
+					>
+						@for (color of palette().slice(0, 6); track color) {
+							<button
+								type="button"
+								class="pptx-ng-smartart-swatch"
+								[attr.aria-label]="'Set fill to ' + color"
+								[style.background]="color"
+								(click)="handleChangeNodeStyle(hoveredNodeId()!, color)"
+							></button>
+						}
+					</div>
+				}
+
 				<!--
 					Inline node-text editor. Positioned in element-local px (== viewBox
 					units, since the SVG viewBox matches the element pixel size and the
@@ -50346,8 +50793,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				<span class="pptx-ng-sr-only" aria-live="polite" role="status">{{ liveMessage() }}</span>
 			</div>
 		</div>
-	`, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], nodeEditor: [{ type: i0.ViewChild, args: ['nodeEditor', { isSignal: true }] }] } });
+	`, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pptx-ng-smartart-style-bar{position:absolute;pointer-events:auto}.pptx-ng-smartart-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-swatch:hover{transform:scale(1.25)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], nodeEditor: [{ type: i0.ViewChild, args: ['nodeEditor', { isSignal: true }] }], smartartContainer: [{ type: i0.ViewChild, args: ['smartartContainer', { isSignal: true }] }] } });
 
 const PALETTES = {
     colorful1: ['#3b82f6', '#22c55e', '#f97316', '#eab308', '#a855f7', '#ec4899'],
@@ -50364,20 +50811,41 @@ const PALETTES = {
  * `pptx-viewer-shared/smartart-3d` and mounts it on a canvas. `three` is an
  * optional peer dependency: when it is missing, the diagram has no geometry, or
  * the scene errors, the component falls back to the SVG SmartArt renderer.
+ *
+ * When `canEdit` is true and the 3D scene is active, an invisible
+ * `<pptx-smart-art-renderer>` overlay is stacked over the canvas. Double-clicking
+ * on the overlay uses `document.elementsFromPoint` to locate the `<g>` bearing
+ * `data-smartart-node-id`, then opens an inline textarea editor over that node
+ * (same commit path as the SVG renderer: `EditorStateService.updateElement`).
  */
 class SmartArt3DRendererComponent {
     element = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
     zIndex = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** When true and the 3D scene is active, enables inline node text editing. */
+    canEdit = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
     canvas = viewChild('canvas', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+    containerEl = viewChild('container3d', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+    nodeEditor3d = viewChild('nodeEditor3d', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeEditor3d" }] : /* istanbul ignore next */ []));
     /** `true` until the 3D scene is known to be mountable; renders the SVG fallback. */
     useFallback = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "useFallback" }] : /* istanbul ignore next */ []));
     mountFn = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mountFn" }] : /* istanbul ignore next */ []));
     handle = null;
+    editState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
+    /** Live draft text, updated on every input event. */
+    draftText = '';
+    /** Guards against a cancel-triggered DOM-removal blur committing the edit. */
+    editSettled = false;
+    editor = inject(EditorStateService, { optional: true });
+    injector = inject(Injector);
     containerStyle = computed(() => getContainerStyle(this.element(), this.zIndex()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
     smartArtData = computed(() => {
@@ -50426,6 +50894,18 @@ class SmartArt3DRendererComponent {
             const el = this.element();
             this.handle?.resize(el.width, el.height);
         });
+        // Auto-focus the textarea when the editor opens.
+        effect(() => {
+            if (this.editState()) {
+                afterNextRender(() => {
+                    const el = this.nodeEditor3d()?.nativeElement;
+                    if (el) {
+                        el.focus();
+                        el.select();
+                    }
+                }, { injector: this.injector });
+            }
+        });
     }
     async loadScene() {
         const m = this.model();
@@ -50433,7 +50913,7 @@ class SmartArt3DRendererComponent {
             return; // No geometry: stay on the SVG fallback.
         }
         try {
-            const mod = await import('./pptx-angular-viewer-index-BfKeZbQy.mjs');
+            const mod = await import('./pptx-angular-viewer-index-BbiIOY_Y.mjs');
             this.mountFn.set(mod.mountSmartArt3D);
             this.useFallback.set(false);
         }
@@ -50441,24 +50921,144 @@ class SmartArt3DRendererComponent {
             this.useFallback.set(true);
         }
     }
+    /**
+     * Locate the SmartArt node at the click position using `elementsFromPoint`
+     * (which includes pointer-events:none SVG elements) and open the inline editor.
+     */
+    onOverlayDblClick(event) {
+        const container = this.containerEl()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const data = this.smartArtData();
+        if (!data) {
+            return;
+        }
+        // document.elementsFromPoint includes elements with pointer-events:none,
+        // so we can find the <g data-smartart-node-id="..."> in the overlay SVG.
+        const elements = document.elementsFromPoint(event.clientX, event.clientY);
+        const nodeEl = elements.find((el) => el instanceof Element && el.hasAttribute('data-smartart-node-id'));
+        if (!nodeEl) {
+            return;
+        }
+        const nodeId = nodeEl.getAttribute('data-smartart-node-id');
+        if (!nodeId) {
+            return;
+        }
+        const currentText = data.nodes.find((n) => n.id === nodeId)?.text ?? '';
+        const nodeRect = nodeEl.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        this.draftText = currentText;
+        this.editSettled = false;
+        this.editState.set({
+            nodeId,
+            box: {
+                x: nodeRect.left - containerRect.left,
+                y: nodeRect.top - containerRect.top,
+                width: nodeRect.width,
+                height: nodeRect.height,
+            },
+            text: currentText,
+        });
+    }
+    /** Update the live draft text on each keystroke. */
+    updateDraft(event) {
+        this.draftText = event.target.value;
+    }
+    /** Enter commits (via blur); Escape cancels. Propagation always stopped. */
+    onEditorKeydown(event) {
+        event.stopPropagation();
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            // Commit via blur so the single commit path runs once.
+            event.target.blur();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    /** Commit the current draft through EditorStateService (blur handler). */
+    commitEdit() {
+        if (this.editSettled) {
+            this.editSettled = false;
+            return;
+        }
+        const edit = this.editState();
+        if (!edit) {
+            return;
+        }
+        const text = this.draftText;
+        this.editState.set(null);
+        this.applyCommit(edit.nodeId, text);
+    }
+    /** Discard the current edit without committing. */
+    cancelEdit() {
+        // Mark as settled so the DOM-removal blur does not commit the cancelled edit.
+        this.editSettled = true;
+        this.editState.set(null);
+    }
+    applyCommit(nodeId, text) {
+        const data = this.smartArtData();
+        if (!data || !this.editor) {
+            return;
+        }
+        const next = commitNodeText(data, nodeId, text);
+        if (next === data) {
+            return;
+        } // no-op: text unchanged
+        const slideIndex = findSlideIndexByElementId(this.editor.slides(), this.element().id);
+        if (slideIndex < 0) {
+            return;
+        }
+        this.editor.updateElement(slideIndex, this.element().id, {
+            smartArtData: next,
+        });
+    }
     ngOnDestroy() {
         this.handle?.dispose();
         this.handle = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArt3DRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SmartArt3DRendererComponent, isStandalone: true, selector: "pptx-smart-art-3d-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SmartArt3DRendererComponent, isStandalone: true, selector: "pptx-smart-art-3d-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "containerEl", first: true, predicate: ["container3d"], descendants: true, isSignal: true }, { propertyName: "nodeEditor3d", first: true, predicate: ["nodeEditor3d"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (useFallback()) {
 			<pptx-smart-art-renderer [element]="element()" [zIndex]="zIndex()" />
 		} @else {
 			<div
+				#container3d
 				class="pptx-ng-element pptx-ng-smartart-3d"
 				[ngStyle]="containerStyle()"
 				[attr.data-element-id]="element().id"
 			>
 				<canvas #canvas class="pptx-ng-smartart-3d-canvas"></canvas>
+				@if (canEdit()) {
+					<!-- Invisible SVG overlay: provides data-smartart-node-id hit targets -->
+					<div class="pptx-ng-smartart-3d-hittest" (dblclick)="onOverlayDblClick($event)">
+						<pptx-smart-art-renderer [element]="element()" [editable]="false" [zIndex]="0" />
+					</div>
+					@if (editState()) {
+						<textarea
+							#nodeEditor3d
+							class="pptx-ng-smartart-3d-node-editor"
+							[style.left.px]="editState()!.box.x"
+							[style.top.px]="editState()!.box.y"
+							[style.width.px]="editState()!.box.width"
+							[style.height.px]="editState()!.box.height"
+							[value]="editState()!.text"
+							spellcheck="false"
+							aria-label="Edit SmartArt node text"
+							(input)="updateDraft($event)"
+							(blur)="commitEdit()"
+							(keydown)="onEditorKeydown($event)"
+							(mousedown)="$event.stopPropagation()"
+							(click)="$event.stopPropagation()"
+							(dblclick)="$event.stopPropagation()"
+						></textarea>
+					}
+				}
 			</div>
 		}
-	`, isInline: true, styles: [".pptx-ng-smartart-3d-canvas{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex", "editable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-smartart-3d-canvas{width:100%;height:100%;display:block}.pptx-ng-smartart-3d-hittest{position:absolute;inset:0;opacity:0;pointer-events:auto}.pptx-ng-smartart-3d-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:20;outline:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex", "editable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArt3DRendererComponent, decorators: [{
             type: Component,
@@ -50467,15 +51067,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 			<pptx-smart-art-renderer [element]="element()" [zIndex]="zIndex()" />
 		} @else {
 			<div
+				#container3d
 				class="pptx-ng-element pptx-ng-smartart-3d"
 				[ngStyle]="containerStyle()"
 				[attr.data-element-id]="element().id"
 			>
 				<canvas #canvas class="pptx-ng-smartart-3d-canvas"></canvas>
+				@if (canEdit()) {
+					<!-- Invisible SVG overlay: provides data-smartart-node-id hit targets -->
+					<div class="pptx-ng-smartart-3d-hittest" (dblclick)="onOverlayDblClick($event)">
+						<pptx-smart-art-renderer [element]="element()" [editable]="false" [zIndex]="0" />
+					</div>
+					@if (editState()) {
+						<textarea
+							#nodeEditor3d
+							class="pptx-ng-smartart-3d-node-editor"
+							[style.left.px]="editState()!.box.x"
+							[style.top.px]="editState()!.box.y"
+							[style.width.px]="editState()!.box.width"
+							[style.height.px]="editState()!.box.height"
+							[value]="editState()!.text"
+							spellcheck="false"
+							aria-label="Edit SmartArt node text"
+							(input)="updateDraft($event)"
+							(blur)="commitEdit()"
+							(keydown)="onEditorKeydown($event)"
+							(mousedown)="$event.stopPropagation()"
+							(click)="$event.stopPropagation()"
+							(dblclick)="$event.stopPropagation()"
+						></textarea>
+					}
+				}
 			</div>
 		}
-	`, styles: [".pptx-ng-smartart-3d-canvas{width:100%;height:100%;display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
+	`, styles: [".pptx-ng-smartart-3d-canvas{width:100%;height:100%;display:block}.pptx-ng-smartart-3d-hittest{position:absolute;inset:0;opacity:0;pointer-events:auto}.pptx-ng-smartart-3d-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:20;outline:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], containerEl: [{ type: i0.ViewChild, args: ['container3d', { isSignal: true }] }], nodeEditor3d: [{ type: i0.ViewChild, args: ['nodeEditor3d', { isSignal: true }] }] } });
 
 /**
  * Opt-in flag for the Three.js SmartArt renderer (Angular).
@@ -51234,19 +51860,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             type: Injectable
         }] });
 
+/** Fallback tile background when the target slide has no background colour. */
+const FALLBACK_THUMBNAIL_BG = '#f0f0f0';
 /**
  * Build the complete zoom view-model for a given element.
+ *
+ * When `targetInfo` is supplied (the target slide was resolved from the deck),
+ * the fallback-thumbnail fields use the real target slide: its `backgroundColor`
+ * as the tile background, `Slide ${slideNumber}` as the label, and its friendly
+ * `sectionName` as the caption. This mirrors React's `ZoomSlideThumbnail`. When
+ * it is absent the old fallback applies: grey background, `Slide ${index + 1}`,
+ * and the raw `targetSectionId`.
+ *
  * Returns sensible defaults for non-zoom elements (all derived strings are
  * empty/fallback values, `zoom` is `undefined`).
  */
-function buildZoomViewModel(element) {
+function buildZoomViewModel(element, targetInfo) {
     const zoom = isZoomElement(element) ? element : undefined;
     const previewSrc = zoom?.imageData;
     const targetSlideIndex = zoom?.targetSlideIndex ?? 0;
     const zoomType = zoom?.zoomType ?? 'slide';
     const targetSectionId = zoom?.targetSectionId;
     const badgeText = zoomType === 'section' ? 'Section Zoom' : 'Slide Zoom';
-    const slideLabel = `Slide ${targetSlideIndex + 1}`;
+    const slideLabel = targetInfo?.slideNumber !== undefined
+        ? `Slide ${targetInfo.slideNumber}`
+        : `Slide ${targetSlideIndex + 1}`;
+    const thumbnailBackground = targetInfo?.backgroundColor ?? FALLBACK_THUMBNAIL_BG;
+    const sectionCaption = targetInfo?.sectionName ?? targetSectionId;
     let ariaLabel = `Zoom to slide ${targetSlideIndex + 1}`;
     if (zoomType === 'section' && targetSectionId) {
         ariaLabel = `${ariaLabel} (section: ${targetSectionId})`;
@@ -51260,8 +51900,17 @@ function buildZoomViewModel(element) {
         badgeText,
         slideLabel,
         ariaLabel,
+        thumbnailBackground,
+        sectionCaption,
     };
 }
+/**
+ * Resolve a zoom element's zero-based target slide index, or `0` for non-zoom
+ * elements. Used to look the target slide up before building the view model.
+ */
+function zoomTargetSlideIndex(element) {
+    return isZoomElement(element) ? element.targetSlideIndex : 0;
+}
 /** Wrapper `[ngStyle]`-compatible style for the zoom container `<div>`. */
 function buildZoomContainerStyle(element, zIndex) {
     return getContainerStyle(element, zIndex);
@@ -51274,6 +51923,49 @@ function isZoomActivationKey(key) {
     return key === 'Enter' || key === ' ';
 }
 
+/**
+ * ZoomTargetService: viewer-scoped lookup from a zoom element's target slide
+ * index to a {@link ZoomTargetInfo} descriptor.
+ *
+ * Provided by `PowerPointViewerComponent` from its loaded slides, then injected
+ * `{ optional: true }` by `ZoomRendererComponent`. Trees that do not provide it
+ * (e.g. isolated component tests) resolve `null`, so the renderer falls back to
+ * the old grey/index/GUID thumbnail. This mirrors the optional-DI pattern of
+ * {@link ZoomNavigationService}.
+ *
+ * Intentionally NOT `providedIn: 'root'`: it is supplied per viewer so the
+ * lookup always reflects that viewer's deck.
+ */
+class ZoomTargetService {
+    /** The deck the lookup resolves against; seeded by the viewer. */
+    slides = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
+    /** Replace the deck used to resolve zoom targets. */
+    setSlides(slides) {
+        this.slides.set(slides);
+    }
+    /**
+     * Resolve the descriptor for a zoom's target slide, or `undefined` when the
+     * index is out of range (so the renderer keeps its index-based fallback).
+     */
+    lookup(targetSlideIndex) {
+        const slide = this.slides()[targetSlideIndex];
+        if (!slide) {
+            return undefined;
+        }
+        return {
+            backgroundColor: slide.backgroundColor,
+            slideNumber: slide.slideNumber,
+            sectionName: slide.sectionName,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ZoomTargetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ZoomTargetService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ZoomTargetService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * ZoomRendererComponent: Angular port of the Vue `ZoomRenderer.vue`
  * (and the React `ZoomElementRenderer`), static viewer-first subset.
@@ -51286,9 +51978,15 @@ function isZoomActivationKey(key) {
  * In presentation mode the overlay provides a {@link ZoomNavigationService}, so
  * clicking (or Enter/Space) jumps to the target slide. Outside presentation mode
  * the service is not provided (optional injection yields `null`) and the tile
- * stays a static link, exactly as before. Live target-slide preview rendering is
- * still NOT ported; the `slides` array is not threaded through, so the fallback
- * uses the target slide index rather than the real target background.
+ * stays a static link, exactly as before.
+ *
+ * The fallback thumbnail (no embedded preview image) matches React's
+ * `ZoomSlideThumbnail`: when a {@link ZoomTargetService} is provided (by the
+ * viewer), it looks up the target slide and uses that slide's real background
+ * colour, its own 1-based number, and its friendly section name. A live
+ * mini-rendering of the target slide is intentionally NOT drawn. When the
+ * service is absent the tile keeps the neutral grey / index / section-GUID
+ * fallback.
  *
  * All non-trivial pure computation lives in `zoom-renderer-helpers.ts` (no
  * Angular dependency) so it can be unit-tested without TestBed.
@@ -51302,7 +52000,17 @@ class ZoomRendererComponent {
     ...(ngDevMode ? [{ debugName: "mediaDataUrls" }] : /* istanbul ignore next */ []));
     containerStyle = computed(() => buildZoomContainerStyle(this.element(), this.zIndex()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
-    vm = computed(() => buildZoomViewModel(this.element()), /* @ts-ignore */
+    /**
+     * Target-slide lookup, provided by the viewer. `null` in trees that do not
+     * provide it (e.g. isolated component tests), where the fallback thumbnail
+     * stays on the neutral grey / index / section-GUID placeholder.
+     */
+    zoomTarget = inject(ZoomTargetService, { optional: true });
+    vm = computed(() => {
+        const element = this.element();
+        const targetSlideIndex = zoomTargetSlideIndex(element);
+        return buildZoomViewModel(element, this.zoomTarget?.lookup(targetSlideIndex));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "vm" }] : /* istanbul ignore next */ []));
     /**
      * Zoom-navigation context, present only inside a running presentation (the
@@ -51364,13 +52072,14 @@ class ZoomRendererComponent {
 					/>
 				} @else {
 					<div
-						style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f0f0f0;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box"
+						style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box"
+						[style.background-color]="vm().thumbnailBackground"
 					>
 						<div style="font-size:14px;font-weight:600;color:rgba(0,0,0,0.5);margin-bottom:4px">
 							{{ vm().slideLabel }}
 						</div>
-						@if (vm().targetSectionId) {
-							<div style="font-size:10px;color:rgba(0,0,0,0.4)">{{ vm().targetSectionId }}</div>
+						@if (vm().sectionCaption) {
+							<div style="font-size:10px;color:rgba(0,0,0,0.4)">{{ vm().sectionCaption }}</div>
 						}
 					</div>
 				}
@@ -51412,13 +52121,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 					/>
 				} @else {
 					<div
-						style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f0f0f0;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box"
+						style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box"
+						[style.background-color]="vm().thumbnailBackground"
 					>
 						<div style="font-size:14px;font-weight:600;color:rgba(0,0,0,0.5);margin-bottom:4px">
 							{{ vm().slideLabel }}
 						</div>
-						@if (vm().targetSectionId) {
-							<div style="font-size:10px;color:rgba(0,0,0,0.4)">{{ vm().targetSectionId }}</div>
+						@if (vm().sectionCaption) {
+							<div style="font-size:10px;color:rgba(0,0,0,0.4)">{{ vm().sectionCaption }}</div>
 						}
 					</div>
 				}
@@ -51741,7 +52451,11 @@ class ElementRendererComponent {
 				/>
 			}
 			@case (element().type === 'smartArt' && smartArt3D()) {
-				<pptx-smart-art-3d-renderer [element]="element()" [zIndex]="zIndex()" />
+				<pptx-smart-art-3d-renderer
+					[element]="element()"
+					[zIndex]="zIndex()"
+					[canEdit]="interactive() && editable()"
+				/>
 			}
 			@case (element().type === 'smartArt') {
 				<div
@@ -51982,7 +52696,7 @@ class ElementRendererComponent {
 				</defs>
 			</svg>
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive", "editable", "fieldContext", "editTemplateMode"], outputs: ["cellCommit"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ConnectorRendererComponent, selector: "pptx-connector-renderer", inputs: ["element", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive"] }, { kind: "component", type: TableRendererComponent, selector: "pptx-table-renderer", inputs: ["element", "editable"], outputs: ["cellCommit"] }, { kind: "component", type: ChartRendererComponent, selector: "pptx-chart-renderer", inputs: ["element"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex", "editable"] }, { kind: "component", type: SmartArt3DRendererComponent, selector: "pptx-smart-art-3d-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: InkRendererComponent, selector: "pptx-ink-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: OleRendererComponent, selector: "pptx-ole-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: Model3DRendererComponent, selector: "pptx-model3d-renderer", inputs: ["element", "zIndex", "mediaDataUrls", "interactive"] }, { kind: "component", type: ZoomRendererComponent, selector: "pptx-zoom-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: EquationRendererComponent, selector: "pptx-equation-renderer", inputs: ["equationXml", "equationNumber"] }, { kind: "component", type: ColorChangedImageComponent, selector: "pptx-color-changed-image", inputs: ["src", "clrChange", "alt", "imgClass", "imgStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive", "editable", "fieldContext", "editTemplateMode"], outputs: ["cellCommit"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ConnectorRendererComponent, selector: "pptx-connector-renderer", inputs: ["element", "zIndex", "obstacles", "canvasWidth", "canvasHeight", "interactive"] }, { kind: "component", type: TableRendererComponent, selector: "pptx-table-renderer", inputs: ["element", "editable"], outputs: ["cellCommit"] }, { kind: "component", type: ChartRendererComponent, selector: "pptx-chart-renderer", inputs: ["element"] }, { kind: "component", type: SmartArtRendererComponent, selector: "pptx-smart-art-renderer", inputs: ["element", "zIndex", "editable"] }, { kind: "component", type: SmartArt3DRendererComponent, selector: "pptx-smart-art-3d-renderer", inputs: ["element", "zIndex", "canEdit"] }, { kind: "component", type: InkRendererComponent, selector: "pptx-ink-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: OleRendererComponent, selector: "pptx-ole-renderer", inputs: ["element", "zIndex"] }, { kind: "component", type: Model3DRendererComponent, selector: "pptx-model3d-renderer", inputs: ["element", "zIndex", "mediaDataUrls", "interactive"] }, { kind: "component", type: ZoomRendererComponent, selector: "pptx-zoom-renderer", inputs: ["element", "zIndex", "mediaDataUrls"] }, { kind: "component", type: EquationRendererComponent, selector: "pptx-equation-renderer", inputs: ["equationXml", "equationNumber"] }, { kind: "component", type: ColorChangedImageComponent, selector: "pptx-color-changed-image", inputs: ["src", "clrChange", "alt", "imgClass", "imgStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ElementRendererComponent, decorators: [{
             type: Component,
@@ -52038,7 +52752,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				/>
 			}
 			@case (element().type === 'smartArt' && smartArt3D()) {
-				<pptx-smart-art-3d-renderer [element]="element()" [zIndex]="zIndex()" />
+				<pptx-smart-art-3d-renderer
+					[element]="element()"
+					[zIndex]="zIndex()"
+					[canEdit]="interactive() && editable()"
+				/>
 			}
 			@case (element().type === 'smartArt') {
 				<div
@@ -58974,6 +59692,9 @@ class RibbonComponent {
     hasSel() {
         return this.editor.selectedIds().length > 0;
     }
+    canDistribute() {
+        return this.editor.selectedIds().length >= 3;
+    }
     isText() {
         const el = this.selectedElement();
         return el !== null && hasTextProperties(el);
@@ -59577,6 +60298,28 @@ class RibbonComponent {
 							</button>
 						</div>
 						<span class="pptx-rb-sep"></span>
+						<!-- Distribute -->
+						<div class="pptx-rb-grp">
+							<button
+								type="button"
+								class="pptx-rb-gb"
+								[disabled]="!canDistribute()"
+								title="Distribute horizontally"
+								(click)="editor.distributeSelected(slideIndex(), 'horizontal')"
+							>
+								&#x2194; H
+							</button>
+							<button
+								type="button"
+								class="pptx-rb-gl"
+								[disabled]="!canDistribute()"
+								title="Distribute vertically"
+								(click)="editor.distributeSelected(slideIndex(), 'vertical')"
+							>
+								&#x2195; V
+							</button>
+						</div>
+						<span class="pptx-rb-sep"></span>
 						<!-- Group / edit -->
 						<div class="pptx-rb-grp">
 							<button
@@ -60557,6 +61300,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 							</button>
 						</div>
 						<span class="pptx-rb-sep"></span>
+						<!-- Distribute -->
+						<div class="pptx-rb-grp">
+							<button
+								type="button"
+								class="pptx-rb-gb"
+								[disabled]="!canDistribute()"
+								title="Distribute horizontally"
+								(click)="editor.distributeSelected(slideIndex(), 'horizontal')"
+							>
+								&#x2194; H
+							</button>
+							<button
+								type="button"
+								class="pptx-rb-gl"
+								[disabled]="!canDistribute()"
+								title="Distribute vertically"
+								(click)="editor.distributeSelected(slideIndex(), 'vertical')"
+							>
+								&#x2195; V
+							</button>
+						</div>
+						<span class="pptx-rb-sep"></span>
 						<!-- Group / edit -->
 						<div class="pptx-rb-grp">
 							<button
@@ -62743,6 +63508,7 @@ class PowerPointViewerComponent {
     print = inject(PrintService);
     mobile = inject(IsMobileService);
     smartArt3DSvc = inject(SmartArt3DService);
+    zoomTarget = inject(ZoomTargetService);
     /** The `<main>` host; used to locate the live `.pptx-ng-canvas-stage`. */
     mainEl = viewChild('mainEl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mainEl" }] : /* istanbul ignore next */ []));
@@ -63121,6 +63887,12 @@ class PowerPointViewerComponent {
         effect(() => {
             this.accessibility.setSlides([...this.mergedSlides()]);
         });
+        // Feed the deck to the zoom-target lookup so a zoom tile's fallback
+        // thumbnail can resolve its target slide's background / number / section
+        // name (mirrors React's ZoomSlideThumbnail).
+        effect(() => {
+            this.zoomTarget.setSlides(this.mergedSlides());
+        });
         // Connect / disconnect real-time collaboration when the host config changes.
         effect(() => {
             const config = this.collaboration();
@@ -63526,32 +64298,40 @@ class PowerPointViewerComponent {
         this.editor.deleteSelected(this.activeSlideIndex());
     }
     /**
-     * Activate the native EyeDropper API to pick a colour from the screen.
+     * Activate the eyedropper to pick a colour from the screen. Uses the native
+     * EyeDropper API where available (Chrome/Edge); on Firefox/Safari it falls
+     * back to a one-shot click that samples the slide DOM under the pointer.
      * When a shape/text/connector/image element is selected, applies the colour
-     * to its fill. Otherwise copies the colour to the clipboard. No-ops when
-     * the EyeDropper API is not available or the user cancels.
+     * to its fill; otherwise copies it to the clipboard. No-ops when the user
+     * cancels (Escape) or nothing paintable is under the pointer.
      */
     async onToggleEyedropper() {
         this.eyedropperActive.set(true);
         try {
-            const color = await openNativeEyeDropper();
+            const color = eyedropperAvailable()
+                ? await openNativeEyeDropper()
+                : await pickColorByClickFallback();
             if (color) {
-                const sel = this.selectedElement();
-                const idx = this.activeSlideIndex();
-                if (sel !== null && hasShapeProperties(sel)) {
-                    this.editor.updateElement(idx, sel.id, {
-                        shapeStyle: { ...sel.shapeStyle, fillColor: color },
-                    });
-                }
-                else {
-                    await navigator.clipboard.writeText(color).catch(() => undefined);
-                }
+                await this.applyEyedropperColor(color);
             }
         }
         finally {
             this.eyedropperActive.set(false);
         }
     }
+    /** Apply a picked colour to the selected shape's fill, else copy to clipboard. */
+    async applyEyedropperColor(color) {
+        const sel = this.selectedElement();
+        const idx = this.activeSlideIndex();
+        if (sel !== null && hasShapeProperties(sel)) {
+            this.editor.updateElement(idx, sel.id, {
+                shapeStyle: { ...sel.shapeStyle, fillColor: color },
+            });
+        }
+        else {
+            await navigator.clipboard.writeText(color).catch(() => undefined);
+        }
+    }
     /** Append a comment to the active slide (one history entry). */
     onCommentAdd(text) {
         const next = addCommentToList(this.activeComments(), text, 'You');
@@ -64034,6 +64814,7 @@ class PowerPointViewerComponent {
             IsMobileService,
             SmartArt3DService,
             FieldContextService,
+            ZoomTargetService,
         ], viewQueries: [{ propertyName: "mainEl", first: true, predicate: ["mainEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div class="pptx-ng-viewer" [ngClass]="class()" [ngStyle]="rootStyle()">
 			@if (loader.loading()) {
@@ -64576,6 +65357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         IsMobileService,
                         SmartArt3DService,
                         FieldContextService,
+                        ZoomTargetService,
                     ],
                     imports: [
                         NgClass,