pptx-angular-viewer 1.1.34 → 1.1.36

package/fesm2022/pptx-angular-viewer.mjs

@@ -1,7 +1,7 @@
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, computed, ChangeDetectionStrategy, Component, signal, Injectable, HostListener, effect, inject, DestroyRef, ElementRef, viewChild, afterNextRender, Injector } from '@angular/core';
-import { guideEmuToPx, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hasShapeProperties, applyDrawingColorTransforms as applyDrawingColorTransforms$1, hslToRgb as hslToRgb$1, PRESET_COLOR_MAP, isImageLikeElement, hasTextProperties, MIN_ELEMENT_SIZE as MIN_ELEMENT_SIZE$2, THEME_COLOR_SCHEME_KEYS, getLinkedTextBoxSegments, deobfuscateFont, detectFontFormat, getSubstituteFontFamily, checkMissingAltText, checkMissingSlideTitle, checkLowContrast, checkComplexTables, checkBlankSlide, checkDuplicateTitles, createChartElement, formatCommentTimestamp, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, PptxHandler, EncryptedFileError, parseSignatureXml, isInkElement, isZoomElement, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
+import { guideEmuToPx, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hasShapeProperties, applyDrawingColorTransforms as applyDrawingColorTransforms$1, hslToRgb as hslToRgb$1, PRESET_COLOR_MAP, isImageLikeElement, hasTextProperties, MIN_ELEMENT_SIZE as MIN_ELEMENT_SIZE$2, THEME_COLOR_SCHEME_KEYS, getLinkedTextBoxSegments, deobfuscateFont, detectFontFormat, getSubstituteFontFamily, checkMissingAltText, checkMissingSlideTitle, checkLowContrast, checkComplexTables, checkBlankSlide, checkDuplicateTitles, createChartElement, formatCommentTimestamp, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, updateSmartArtNodeText, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, PptxHandler, EncryptedFileError, parseSignatureXml, isInkElement, isZoomElement, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
 import { jsPDF } from 'jspdf';
 import html2canvasPro from 'html2canvas-pro';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -24354,6 +24354,57 @@ const PRESETS = [
         category: 'process',
         defaultItems: ['Phase 1', 'Phase 2', 'Phase 3'],
     },
+    {
+        layout: 'basicTimeline',
+        label: 'Basic Timeline',
+        category: 'process',
+        defaultItems: ['2021', '2022', '2023'],
+    },
+    {
+        layout: 'bendingProcess',
+        label: 'Bending Process',
+        category: 'process',
+        defaultItems: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+    },
+    // Relationship: target / matrix / pyramid / funnel / gear families.
+    // These share the dialog's "relationship" sidebar tab (PowerPoint groups
+    // matrix/pyramid under separate tabs, which this gallery folds into one).
+    {
+        layout: 'basicTarget',
+        label: 'Basic Target',
+        category: 'relationship',
+        defaultItems: ['Outer', 'Middle', 'Inner'],
+    },
+    {
+        layout: 'interlockingGears',
+        label: 'Interlocking Gears',
+        category: 'relationship',
+        defaultItems: ['Gear 1', 'Gear 2', 'Gear 3'],
+    },
+    {
+        layout: 'basicMatrix',
+        label: 'Basic Matrix',
+        category: 'relationship',
+        defaultItems: ['Quadrant 1', 'Quadrant 2', 'Quadrant 3', 'Quadrant 4'],
+    },
+    {
+        layout: 'basicPyramid',
+        label: 'Basic Pyramid',
+        category: 'relationship',
+        defaultItems: ['Top', 'Middle', 'Base'],
+    },
+    {
+        layout: 'invertedPyramid',
+        label: 'Inverted Pyramid',
+        category: 'relationship',
+        defaultItems: ['Wide', 'Narrower', 'Tip'],
+    },
+    {
+        layout: 'basicFunnel',
+        label: 'Basic Funnel',
+        category: 'relationship',
+        defaultItems: ['Input 1', 'Input 2', 'Input 3', 'Result'],
+    },
 ];
 /** Sidebar tabs, in display order. `label` is a (best-effort) i18n key. */
 const CATEGORIES = [
@@ -25373,6 +25424,149 @@ function toggleCommentResolvedInList(comments, id) {
     return next;
 }
 
+/**
+ * Framework-agnostic touch-gesture state machine for the viewer canvas.
+ *
+ * Recognises three gestures from raw DOM `TouchEvent`s and emits callbacks:
+ *   - Pinch-to-zoom: two-finger spread/pinch, scaled by the distance ratio.
+ *   - Swipe: single-finger horizontal swipe (slide navigation).
+ *   - Long-press: single-finger hold (context-menu trigger).
+ *
+ * The recogniser holds all mutable pinch/swipe/long-press state internally and
+ * exposes four event handlers plus a `cancel()`. The listener attach/detach
+ * lifecycle (and any framework reactivity) stays in each binding; only this
+ * pure state machine is shared.
+ *
+ * @module touch-gestures
+ */
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** The minimum horizontal distance (px) to recognise a swipe. */
+const SWIPE_THRESHOLD_PX = 50;
+/** Maximum vertical deviation (px) for a swipe to still count. */
+const SWIPE_MAX_VERTICAL_PX = 100;
+/** The hold duration (ms) for a long-press. */
+const LONG_PRESS_DURATION_MS = 500;
+/** If the finger moves more than this (px) during a hold, cancel the long-press. */
+const LONG_PRESS_MOVE_TOLERANCE_PX = 10;
+// ---------------------------------------------------------------------------
+// Pure helpers
+// ---------------------------------------------------------------------------
+/** Compute the Euclidean distance between two touch points. */
+function getTouchDistance(t1, t2) {
+    const dx = t1.clientX - t2.clientX;
+    const dy = t1.clientY - t2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+/**
+ * Clamp a scale value into the allowed zoom range. The bounds are parameters
+ * (not imported constants) to keep this module framework- and binding-agnostic.
+ */
+function clampScale$1(value, minScale, maxScale) {
+    return Math.min(Math.max(value, minScale), maxScale);
+}
+// ---------------------------------------------------------------------------
+// Recogniser factory
+// ---------------------------------------------------------------------------
+/**
+ * Create a stateful touch-gesture recogniser. The returned handlers mirror the
+ * React viewer's native `touch*` listeners exactly, including `preventDefault()`
+ * on the pinch path and the `setTimeout`-based long-press timer.
+ */
+function createTouchGestureRecognizer(config) {
+    const { getScale, minScale, maxScale, callbacks } = config;
+    // Pinch state.
+    let initialPinchDistance = 0;
+    let pinchBaseScale = 1;
+    let isPinching = false;
+    // Swipe state.
+    let swipeStartX = 0;
+    let swipeStartY = 0;
+    // Long-press state.
+    let longPressTimer = null;
+    let longPressStartX = 0;
+    let longPressStartY = 0;
+    const cancelLongPress = () => {
+        if (longPressTimer !== null) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+    };
+    const onTouchStart = (e) => {
+        if (e.touches.length === 2) {
+            // Start pinch.
+            isPinching = true;
+            initialPinchDistance = getTouchDistance(e.touches[0], e.touches[1]);
+            pinchBaseScale = getScale();
+            cancelLongPress();
+            e.preventDefault();
+        }
+        else if (e.touches.length === 1) {
+            // Potential swipe or long-press.
+            swipeStartX = e.touches[0].clientX;
+            swipeStartY = e.touches[0].clientY;
+            longPressStartX = e.touches[0].clientX;
+            longPressStartY = e.touches[0].clientY;
+            cancelLongPress();
+            longPressTimer = setTimeout(() => {
+                longPressTimer = null;
+                callbacks.onLongPress?.(longPressStartX, longPressStartY);
+            }, LONG_PRESS_DURATION_MS);
+        }
+    };
+    const onTouchMove = (e) => {
+        if (e.touches.length === 2 && isPinching) {
+            e.preventDefault();
+            const currentDistance = getTouchDistance(e.touches[0], e.touches[1]);
+            if (initialPinchDistance > 0) {
+                const ratio = currentDistance / initialPinchDistance;
+                const newScale = clampScale$1(pinchBaseScale * ratio, minScale, maxScale);
+                callbacks.onPinchZoom?.(newScale);
+            }
+        }
+        else if (e.touches.length === 1) {
+            // Cancel the long-press if the finger moved too far.
+            const dx = e.touches[0].clientX - longPressStartX;
+            const dy = e.touches[0].clientY - longPressStartY;
+            if (Math.abs(dx) > LONG_PRESS_MOVE_TOLERANCE_PX ||
+                Math.abs(dy) > LONG_PRESS_MOVE_TOLERANCE_PX) {
+                cancelLongPress();
+            }
+        }
+    };
+    const onTouchEnd = (e) => {
+        if (isPinching) {
+            isPinching = false;
+            initialPinchDistance = 0;
+            return;
+        }
+        cancelLongPress();
+        // Detect a swipe from the touch that just ended.
+        if (e.changedTouches.length === 1 && e.touches.length === 0) {
+            const endX = e.changedTouches[0].clientX;
+            const endY = e.changedTouches[0].clientY;
+            const deltaX = endX - swipeStartX;
+            const deltaY = endY - swipeStartY;
+            if (Math.abs(deltaX) >= SWIPE_THRESHOLD_PX && Math.abs(deltaY) < SWIPE_MAX_VERTICAL_PX) {
+                callbacks.onSwipe?.(deltaX > 0 ? 1 : -1);
+            }
+        }
+    };
+    const onTouchCancel = () => {
+        isPinching = false;
+        initialPinchDistance = 0;
+        cancelLongPress();
+    };
+    return {
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        onTouchCancel,
+        cancel: onTouchCancel,
+    };
+}
+
 /**
  * insert-chart.ts - framework-agnostic factory for a sensible DEFAULT new
  * chart element, the single source of truth every binding (React, Vue,
@@ -35190,6 +35384,555 @@ function stringFromEvent$2(event) {
  * preserves the historical Angular import surface.
  */
 
+/**
+ * smart-art-properties-helpers.ts: pure logic for the Angular SmartArt inspector.
+ *
+ * The presentational `SmartArtPropertiesComponent` is intentionally thin: every
+ * mutation it performs is delegated to one of the pure functions below, which in
+ * turn wrap the framework-agnostic SmartArt editing operations re-exported from
+ * `editor-insert.ts` (sourced from `pptx-viewer-core`). Keeping this logic out of
+ * the component lets it be unit-tested in plain vitest (the Angular package's
+ * vitest setup has no Angular compiler, so TestBed component tests are not
+ * available - see PORTING.md).
+ *
+ * Mirrors the React inspector:
+ *   packages/react/src/viewer/components/inspector/SmartArtPropertiesPanel.tsx
+ *   packages/react/src/viewer/components/inspector/SmartArtLayoutSwitcher.tsx
+ *
+ * @module angular-viewer/smart-art-properties-helpers
+ */
+// ── Option constants (mirror the React panel) ───────────────────────────────
+/** Selectable colour schemes, in display order. */
+const SMART_ART_COLOR_SCHEMES = [
+    'colorful1',
+    'colorful2',
+    'colorful3',
+    'monochromatic1',
+    'monochromatic2',
+];
+/** Selectable style intensities, in display order. */
+const SMART_ART_STYLE_OPTIONS = [
+    'flat',
+    'moderate',
+    'intense',
+];
+/** Default colour scheme used when the data has none set. */
+const DEFAULT_COLOR_SCHEME = 'colorful1';
+/** Default style used when the data has none set. */
+const DEFAULT_STYLE = 'flat';
+/** Default resolved layout used when the data has none set. */
+const DEFAULT_LAYOUT = 'list';
+/** Default label for a newly added sub-item (matches the React panel). */
+const SUB_ITEM_LABEL = 'Sub-item';
+// ── Read helpers ─────────────────────────────────────────────────────────────
+/** The diagram's nodes, or an empty array when none are present. */
+function smartArtNodes(data) {
+    return data.nodes ?? [];
+}
+/** Whether a node has a parent (is a child / sub-item). */
+function isChildNode(node) {
+    return Boolean(node.parentId);
+}
+/** Current colour scheme, falling back to the default. */
+function currentColorScheme(data) {
+    return data.colorScheme ?? DEFAULT_COLOR_SCHEME;
+}
+/** Current style intensity, falling back to the default. */
+function currentStyle(data) {
+    return data.style ?? DEFAULT_STYLE;
+}
+/** Current resolved layout, falling back to the default. */
+function currentLayout(data) {
+    return data.resolvedLayoutType ?? DEFAULT_LAYOUT;
+}
+// ── Mutation helpers (all return new immutable PptxSmartArtData) ──────────────
+/** Update a single node's text. */
+function setNodeText(data, nodeId, text) {
+    return updateSmartArtNodeText(data, nodeId, text);
+}
+/** Append a new top-level item. */
+function addItem(data) {
+    return addSmartArtNodeAsChild(data);
+}
+/** Add a sub-item beneath the given parent node. */
+function addSubItem(data, parentId) {
+    return addSmartArtNodeAsChild(data, parentId, SUB_ITEM_LABEL);
+}
+/** Remove a node by id (no-op when it would empty the diagram). */
+function removeNode(data, nodeId) {
+    if (smartArtNodes(data).length <= 1) {
+        return data;
+    }
+    return removeSmartArtNode(data, nodeId);
+}
+/** Promote a node up one level in the hierarchy. */
+function promoteNode(data, nodeId) {
+    return promoteSmartArtNode(data, nodeId);
+}
+/** Demote a node beneath its preceding sibling. */
+function demoteNode(data, nodeId) {
+    return demoteSmartArtNode(data, nodeId);
+}
+/** Move a node up among its siblings. */
+function moveNodeUp(data, nodeId) {
+    return reorderSmartArtNode(data, nodeId, -1);
+}
+/** Move a node down among its siblings. */
+function moveNodeDown(data, nodeId) {
+    return reorderSmartArtNode(data, nodeId, 1);
+}
+/** Apply a new colour scheme; clears stale drawing shapes for reflow. */
+function setColorScheme(data, scheme) {
+    return { ...data, colorScheme: scheme, drawingShapes: undefined };
+}
+/** Apply a new style intensity; clears stale drawing shapes for reflow. */
+function setStyle(data, style) {
+    return { ...data, style, drawingShapes: undefined };
+}
+/**
+ * Switch the diagram to a new layout, preserving node data and connections.
+ * Returns the original data unchanged when the target equals the current layout.
+ */
+function setLayout(data, layout) {
+    if (currentLayout(data) === layout) {
+        return data;
+    }
+    return switchSmartArtLayout(data, layout);
+}
+
+/**
+ * smart-art-properties.component.ts: SmartArt editing inspector (Angular).
+ *
+ * Selector: `pptx-smart-art-properties`
+ *
+ * Presentational panel for editing a selected SmartArt element's data model:
+ * per-node text editing, add item / add sub-item, remove, promote / demote,
+ * reorder up / down, colour-scheme select, style toggle (flat / moderate /
+ * intense), and a layout switcher. All mutations are delegated to the pure
+ * helpers in `smart-art-properties-helpers.ts` (which wrap the core editing ops
+ * re-exported via `editor-insert.ts`); no editing logic lives here. Every edit
+ * is emitted as a complete new `PptxSmartArtData` via `smartArtDataChange`, so
+ * the parent (`InspectorPanelComponent`) can commit it through
+ * `EditorStateService.updateElement()` as a single undo/redo history entry.
+ *
+ * Ported from the React inspector:
+ *   packages/react/src/viewer/components/inspector/SmartArtPropertiesPanel.tsx
+ *   packages/react/src/viewer/components/inspector/SmartArtLayoutSwitcher.tsx
+ *
+ * Usage:
+ * ```html
+ * <pptx-smart-art-properties
+ *   [smartArtData]="data"
+ *   [canEdit]="canEdit"
+ *   (smartArtDataChange)="onSmartArtChange($event)"
+ * />
+ * ```
+ *
+ * @module angular-viewer/smart-art-properties
+ */
+class SmartArtPropertiesComponent {
+    /** The SmartArt data model being edited. */
+    smartArtData = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smartArtData" }] : /* istanbul ignore next */ []));
+    /** Whether editing is enabled (read-only when false). */
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    /** Emits a complete new data model after any edit. */
+    smartArtDataChange = output();
+    // ── Static option lists (template-bound) ─────────────────────────────────
+    layoutTypes = SWITCHABLE_LAYOUT_TYPES;
+    colorSchemes = SMART_ART_COLOR_SCHEMES;
+    styleOptions = SMART_ART_STYLE_OPTIONS;
+    // ── Derived state ─────────────────────────────────────────────────────────
+    nodes = computed(() => smartArtNodes(this.smartArtData()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    activeLayout = computed(() => currentLayout(this.smartArtData()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeLayout" }] : /* istanbul ignore next */ []));
+    activeColorScheme = computed(() => currentColorScheme(this.smartArtData()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColorScheme" }] : /* istanbul ignore next */ []));
+    activeStyle = computed(() => currentStyle(this.smartArtData()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeStyle" }] : /* istanbul ignore next */ []));
+    isChild = isChildNode;
+    // ── Event handlers (each emits a fresh data model) ───────────────────────
+    onLayout(layout) {
+        this.commit(setLayout(this.smartArtData(), layout));
+    }
+    onColorScheme(event) {
+        const value = selectValue(event);
+        if (value === null) {
+            return;
+        }
+        this.commit(setColorScheme(this.smartArtData(), value));
+    }
+    onStyle(style) {
+        this.commit(setStyle(this.smartArtData(), style));
+    }
+    onAddItem() {
+        this.commit(addItem(this.smartArtData()));
+    }
+    onAddSubItem(parentId) {
+        this.commit(addSubItem(this.smartArtData(), parentId));
+    }
+    onRemove(nodeId) {
+        this.commit(removeNode(this.smartArtData(), nodeId));
+    }
+    onPromote(nodeId) {
+        this.commit(promoteNode(this.smartArtData(), nodeId));
+    }
+    onDemote(nodeId) {
+        this.commit(demoteNode(this.smartArtData(), nodeId));
+    }
+    onMoveUp(nodeId) {
+        this.commit(moveNodeUp(this.smartArtData(), nodeId));
+    }
+    onMoveDown(nodeId) {
+        this.commit(moveNodeDown(this.smartArtData(), nodeId));
+    }
+    onNodeText(event, nodeId) {
+        const value = inputValue(event);
+        if (value === null) {
+            return;
+        }
+        this.commit(setNodeText(this.smartArtData(), nodeId, value));
+    }
+    onNodeKeydown(event, nodeId) {
+        if (event.key !== 'Tab') {
+            return;
+        }
+        event.preventDefault();
+        const next = event.shiftKey
+            ? promoteNode(this.smartArtData(), nodeId)
+            : demoteNode(this.smartArtData(), nodeId);
+        this.commit(next);
+    }
+    /** Emit a new data model only when it differs from the current one. */
+    commit(next) {
+        if (!this.canEdit() || next === this.smartArtData()) {
+            return;
+        }
+        this.smartArtDataChange.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArtPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SmartArtPropertiesComponent, isStandalone: true, selector: "pptx-smart-art-properties", inputs: { smartArtData: { classPropertyName: "smartArtData", publicName: "smartArtData", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { smartArtDataChange: "smartArtDataChange" }, ngImport: i0, template: `
+		<section class="pptx-sa-props" aria-label="SmartArt properties">
+			<h3 class="pptx-sa-props__heading">SmartArt</h3>
+
+			<!-- ── Layout switcher ──────────────────────────────────────────── -->
+			<div class="pptx-sa-props__field">
+				<span class="pptx-sa-props__label">Layout</span>
+				<div class="pptx-sa-props__layouts" role="group" aria-label="Switch layout">
+					@for (layout of layoutTypes; track layout) {
+						<button
+							type="button"
+							class="pptx-sa-props__layout"
+							[class.is-active]="activeLayout() === layout"
+							[disabled]="!canEdit()"
+							[attr.aria-pressed]="activeLayout() === layout"
+							(click)="onLayout(layout)"
+						>
+							{{ layout }}
+						</button>
+					}
+				</div>
+			</div>
+
+			<!-- ── Colour scheme ────────────────────────────────────────────── -->
+			<label class="pptx-sa-props__field">
+				<span class="pptx-sa-props__label">Color scheme</span>
+				<select
+					class="pptx-sa-props__select"
+					[disabled]="!canEdit()"
+					[value]="activeColorScheme()"
+					(change)="onColorScheme($event)"
+				>
+					@for (scheme of colorSchemes; track scheme) {
+						<option [value]="scheme">{{ scheme }}</option>
+					}
+				</select>
+			</label>
+
+			<!-- ── Style intensity ──────────────────────────────────────────── -->
+			<div class="pptx-sa-props__field">
+				<span class="pptx-sa-props__label">Style</span>
+				<div class="pptx-sa-props__styles" role="group" aria-label="Style intensity">
+					@for (styleOpt of styleOptions; track styleOpt) {
+						<button
+							type="button"
+							class="pptx-sa-props__style"
+							[class.is-active]="activeStyle() === styleOpt"
+							[disabled]="!canEdit()"
+							[attr.aria-pressed]="activeStyle() === styleOpt"
+							(click)="onStyle(styleOpt)"
+						>
+							{{ styleOpt }}
+						</button>
+					}
+				</div>
+			</div>
+
+			<!-- ── Text pane / node list ────────────────────────────────────── -->
+			<div class="pptx-sa-props__pane-header">
+				<span class="pptx-sa-props__label">Text pane ({{ nodes().length }})</span>
+				<button
+					type="button"
+					class="pptx-sa-props__btn"
+					[disabled]="!canEdit()"
+					(click)="onAddItem()"
+				>
+					+ Item
+				</button>
+			</div>
+
+			<ul class="pptx-sa-props__nodes" role="list">
+				@for (node of nodes(); track node.id; let i = $index) {
+					<li
+						class="pptx-sa-props__node"
+						[class.pptx-sa-props__node--child]="isChild(node)"
+						[attr.data-node-id]="node.id"
+					>
+						<span class="pptx-sa-props__bullet">{{ isChild(node) ? '•' : i + 1 }}</span>
+						<input
+							type="text"
+							class="pptx-sa-props__node-input"
+							[disabled]="!canEdit()"
+							[value]="node.text"
+							placeholder="Type here"
+							(change)="onNodeText($event, node.id)"
+							(keydown)="onNodeKeydown($event, node.id)"
+						/>
+						<div class="pptx-sa-props__node-actions">
+							@if (!isChild(node)) {
+								<button
+									type="button"
+									class="pptx-sa-props__icon"
+									title="Add sub-item"
+									[disabled]="!canEdit()"
+									(click)="onAddSubItem(node.id)"
+								>
+									+Sub
+								</button>
+							}
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Promote"
+								[disabled]="!canEdit() || isChild(node) === false"
+								(click)="onPromote(node.id)"
+							>
+								&#8592;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Demote"
+								[disabled]="!canEdit()"
+								(click)="onDemote(node.id)"
+							>
+								&#8594;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Move up"
+								[disabled]="!canEdit()"
+								(click)="onMoveUp(node.id)"
+							>
+								&#8593;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Move down"
+								[disabled]="!canEdit()"
+								(click)="onMoveDown(node.id)"
+							>
+								&#8595;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon pptx-sa-props__icon--danger"
+								title="Remove"
+								[disabled]="!canEdit() || nodes().length <= 1"
+								(click)="onRemove(node.id)"
+							>
+								&times;
+							</button>
+						</div>
+					</li>
+				}
+			</ul>
+
+			<p class="pptx-sa-props__hint">Tab to demote, Shift+Tab to promote.</p>
+		</section>
+	`, isInline: true, styles: [".pptx-sa-props{display:flex;flex-direction:column;gap:.4rem;padding:.5rem 0}.pptx-sa-props__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-sa-props__field{display:flex;flex-direction:column;gap:.2rem}.pptx-sa-props__label{font-size:10px;color:var(--pptx-inspector-muted, #888)}.pptx-sa-props__layouts,.pptx-sa-props__styles{display:flex;flex-wrap:wrap;gap:.25rem}.pptx-sa-props__layout,.pptx-sa-props__style,.pptx-sa-props__btn,.pptx-sa-props__icon{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:10px;padding:2px 6px;white-space:nowrap}.pptx-sa-props__layout,.pptx-sa-props__style{flex:1 0 auto;text-transform:capitalize}.pptx-sa-props__layout.is-active,.pptx-sa-props__style.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-sa-props__select{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:11px}.pptx-sa-props__pane-header{display:flex;align-items:center;justify-content:space-between;gap:.35rem;margin-top:.2rem}.pptx-sa-props__nodes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;max-height:14rem;overflow-y:auto}.pptx-sa-props__node{display:flex;align-items:center;gap:.25rem;padding:2px;border:1px solid var(--pptx-inspector-border, #333);border-radius:3px}.pptx-sa-props__node--child{margin-left:1rem;border-color:var(--pptx-inspector-border, #2a2a2a)}.pptx-sa-props__bullet{font-size:9px;color:var(--pptx-inspector-muted, #888);min-width:12px;text-align:center;flex-shrink:0}.pptx-sa-props__node-input{flex:1;min-width:0;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:11px}.pptx-sa-props__node-actions{display:flex;gap:1px;flex-shrink:0}.pptx-sa-props__icon{padding:1px 3px;font-size:10px;line-height:1.2}.pptx-sa-props__icon--danger{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-sa-props__layout:disabled,.pptx-sa-props__style:disabled,.pptx-sa-props__btn:disabled,.pptx-sa-props__icon:disabled,.pptx-sa-props__select:disabled,.pptx-sa-props__node-input:disabled{opacity:.45;cursor:not-allowed}.pptx-sa-props__hint{font-size:9px;color:var(--pptx-inspector-muted, #888);margin:.1rem 0 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArtPropertiesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-smart-art-properties', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		<section class="pptx-sa-props" aria-label="SmartArt properties">
+			<h3 class="pptx-sa-props__heading">SmartArt</h3>
+
+			<!-- ── Layout switcher ──────────────────────────────────────────── -->
+			<div class="pptx-sa-props__field">
+				<span class="pptx-sa-props__label">Layout</span>
+				<div class="pptx-sa-props__layouts" role="group" aria-label="Switch layout">
+					@for (layout of layoutTypes; track layout) {
+						<button
+							type="button"
+							class="pptx-sa-props__layout"
+							[class.is-active]="activeLayout() === layout"
+							[disabled]="!canEdit()"
+							[attr.aria-pressed]="activeLayout() === layout"
+							(click)="onLayout(layout)"
+						>
+							{{ layout }}
+						</button>
+					}
+				</div>
+			</div>
+
+			<!-- ── Colour scheme ────────────────────────────────────────────── -->
+			<label class="pptx-sa-props__field">
+				<span class="pptx-sa-props__label">Color scheme</span>
+				<select
+					class="pptx-sa-props__select"
+					[disabled]="!canEdit()"
+					[value]="activeColorScheme()"
+					(change)="onColorScheme($event)"
+				>
+					@for (scheme of colorSchemes; track scheme) {
+						<option [value]="scheme">{{ scheme }}</option>
+					}
+				</select>
+			</label>
+
+			<!-- ── Style intensity ──────────────────────────────────────────── -->
+			<div class="pptx-sa-props__field">
+				<span class="pptx-sa-props__label">Style</span>
+				<div class="pptx-sa-props__styles" role="group" aria-label="Style intensity">
+					@for (styleOpt of styleOptions; track styleOpt) {
+						<button
+							type="button"
+							class="pptx-sa-props__style"
+							[class.is-active]="activeStyle() === styleOpt"
+							[disabled]="!canEdit()"
+							[attr.aria-pressed]="activeStyle() === styleOpt"
+							(click)="onStyle(styleOpt)"
+						>
+							{{ styleOpt }}
+						</button>
+					}
+				</div>
+			</div>
+
+			<!-- ── Text pane / node list ────────────────────────────────────── -->
+			<div class="pptx-sa-props__pane-header">
+				<span class="pptx-sa-props__label">Text pane ({{ nodes().length }})</span>
+				<button
+					type="button"
+					class="pptx-sa-props__btn"
+					[disabled]="!canEdit()"
+					(click)="onAddItem()"
+				>
+					+ Item
+				</button>
+			</div>
+
+			<ul class="pptx-sa-props__nodes" role="list">
+				@for (node of nodes(); track node.id; let i = $index) {
+					<li
+						class="pptx-sa-props__node"
+						[class.pptx-sa-props__node--child]="isChild(node)"
+						[attr.data-node-id]="node.id"
+					>
+						<span class="pptx-sa-props__bullet">{{ isChild(node) ? '•' : i + 1 }}</span>
+						<input
+							type="text"
+							class="pptx-sa-props__node-input"
+							[disabled]="!canEdit()"
+							[value]="node.text"
+							placeholder="Type here"
+							(change)="onNodeText($event, node.id)"
+							(keydown)="onNodeKeydown($event, node.id)"
+						/>
+						<div class="pptx-sa-props__node-actions">
+							@if (!isChild(node)) {
+								<button
+									type="button"
+									class="pptx-sa-props__icon"
+									title="Add sub-item"
+									[disabled]="!canEdit()"
+									(click)="onAddSubItem(node.id)"
+								>
+									+Sub
+								</button>
+							}
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Promote"
+								[disabled]="!canEdit() || isChild(node) === false"
+								(click)="onPromote(node.id)"
+							>
+								&#8592;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Demote"
+								[disabled]="!canEdit()"
+								(click)="onDemote(node.id)"
+							>
+								&#8594;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Move up"
+								[disabled]="!canEdit()"
+								(click)="onMoveUp(node.id)"
+							>
+								&#8593;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon"
+								title="Move down"
+								[disabled]="!canEdit()"
+								(click)="onMoveDown(node.id)"
+							>
+								&#8595;
+							</button>
+							<button
+								type="button"
+								class="pptx-sa-props__icon pptx-sa-props__icon--danger"
+								title="Remove"
+								[disabled]="!canEdit() || nodes().length <= 1"
+								(click)="onRemove(node.id)"
+							>
+								&times;
+							</button>
+						</div>
+					</li>
+				}
+			</ul>
+
+			<p class="pptx-sa-props__hint">Tab to demote, Shift+Tab to promote.</p>
+		</section>
+	`, styles: [".pptx-sa-props{display:flex;flex-direction:column;gap:.4rem;padding:.5rem 0}.pptx-sa-props__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-sa-props__field{display:flex;flex-direction:column;gap:.2rem}.pptx-sa-props__label{font-size:10px;color:var(--pptx-inspector-muted, #888)}.pptx-sa-props__layouts,.pptx-sa-props__styles{display:flex;flex-wrap:wrap;gap:.25rem}.pptx-sa-props__layout,.pptx-sa-props__style,.pptx-sa-props__btn,.pptx-sa-props__icon{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:10px;padding:2px 6px;white-space:nowrap}.pptx-sa-props__layout,.pptx-sa-props__style{flex:1 0 auto;text-transform:capitalize}.pptx-sa-props__layout.is-active,.pptx-sa-props__style.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-sa-props__select{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:11px}.pptx-sa-props__pane-header{display:flex;align-items:center;justify-content:space-between;gap:.35rem;margin-top:.2rem}.pptx-sa-props__nodes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;max-height:14rem;overflow-y:auto}.pptx-sa-props__node{display:flex;align-items:center;gap:.25rem;padding:2px;border:1px solid var(--pptx-inspector-border, #333);border-radius:3px}.pptx-sa-props__node--child{margin-left:1rem;border-color:var(--pptx-inspector-border, #2a2a2a)}.pptx-sa-props__bullet{font-size:9px;color:var(--pptx-inspector-muted, #888);min-width:12px;text-align:center;flex-shrink:0}.pptx-sa-props__node-input{flex:1;min-width:0;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:11px}.pptx-sa-props__node-actions{display:flex;gap:1px;flex-shrink:0}.pptx-sa-props__icon{padding:1px 3px;font-size:10px;line-height:1.2}.pptx-sa-props__icon--danger{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-sa-props__layout:disabled,.pptx-sa-props__style:disabled,.pptx-sa-props__btn:disabled,.pptx-sa-props__icon:disabled,.pptx-sa-props__select:disabled,.pptx-sa-props__node-input:disabled{opacity:.45;cursor:not-allowed}.pptx-sa-props__hint{font-size:9px;color:var(--pptx-inspector-muted, #888);margin:.1rem 0 0}\n"] }]
+        }], propDecorators: { smartArtData: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartArtData", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], smartArtDataChange: [{ type: i0.Output, args: ["smartArtDataChange"] }] } });
+// ── Module-private helpers ───────────────────────────────────────────────────
+/** Read the value of a `<select>` change event. */
+function selectValue(event) {
+    const target = event.target;
+    return target instanceof HTMLSelectElement ? target.value : null;
+}
+/** Read the value of an `<input>` change event. */
+function inputValue(event) {
+    const target = event.target;
+    return target instanceof HTMLInputElement ? target.value : null;
+}
+
 /**
  * table-data-helpers.ts: Pure immutable helpers for table data editing.
  *
@@ -36385,6 +37128,23 @@ class InspectorPanelComponent {
     /** The selected element narrowed to a chart, or undefined. */
     chartEl = computed(() => this.el().type === 'chart' ? this.el() : undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chartEl" }] : /* istanbul ignore next */ []));
+    /** The selected element narrowed to SmartArt, or undefined. */
+    smartArtEl = computed(() => this.el().type === 'smartArt' ? this.el() : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smartArtEl" }] : /* istanbul ignore next */ []));
+    /** The selected SmartArt element's data model, or undefined. */
+    smartArtData = computed(() => this.smartArtEl()?.smartArtData, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smartArtData" }] : /* istanbul ignore next */ []));
+    /**
+     * Commit an updated SmartArt data model as one history entry. Patching only
+     * `smartArtData` routes through the same `EditorStateService.updateElement`
+     * path as every other inspector section, so undo/redo and persistence work
+     * identically.
+     */
+    onSmartArtDataChange(smartArtData) {
+        this.editor.updateElement(this.slideIndex(), this.el().id, {
+            smartArtData,
+        });
+    }
     /** 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);
@@ -36740,6 +37500,16 @@ class InspectorPanelComponent {
 				</details>
 			}
 
+			<!-- ── SmartArt editing ───────────────────────────────────────────── -->
+			@if (smartArtData(); as sa) {
+				<section class="pptx-ng-inspector__section">
+					<pptx-smart-art-properties
+						[smartArtData]="sa"
+						(smartArtDataChange)="onSmartArtDataChange($event)"
+					/>
+				</section>
+			}
+
 			<!-- ── Animation authoring ────────────────────────────────────────── -->
 			<details class="pptx-ng-inspector__details">
 				<summary class="pptx-ng-inspector__summary">Animation</summary>
@@ -36771,7 +37541,7 @@ class InspectorPanelComponent {
 				</div>
 			</section>
 		</aside>
-	`, isInline: true, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}@media(pointer:coarse),(max-width:640px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: GradientPickerComponent, selector: "pptx-gradient-picker", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: EffectsPanelComponent, selector: "pptx-effects-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TextAdvancedPanelComponent, selector: "pptx-text-advanced-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TableDataEditorComponent, selector: "pptx-table-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: AnimationAuthorPanelComponent, selector: "pptx-animation-author-panel", inputs: ["element", "slideIndex", "animations", "canEdit"], outputs: ["animationsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}@media(pointer:coarse),(max-width:640px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: GradientPickerComponent, selector: "pptx-gradient-picker", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: EffectsPanelComponent, selector: "pptx-effects-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TextAdvancedPanelComponent, selector: "pptx-text-advanced-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TableDataEditorComponent, selector: "pptx-table-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: SmartArtPropertiesComponent, selector: "pptx-smart-art-properties", inputs: ["smartArtData", "canEdit"], outputs: ["smartArtDataChange"] }, { kind: "component", type: AnimationAuthorPanelComponent, selector: "pptx-animation-author-panel", inputs: ["element", "slideIndex", "animations", "canEdit"], outputs: ["animationsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InspectorPanelComponent, decorators: [{
             type: Component,
@@ -36781,6 +37551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         TextAdvancedPanelComponent,
                         TableDataEditorComponent,
                         ChartDataEditorComponent,
+                        SmartArtPropertiesComponent,
                         AnimationAuthorPanelComponent,
                     ], template: `
 		<!--
@@ -37034,6 +37805,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				</details>
 			}
 
+			<!-- ── SmartArt editing ───────────────────────────────────────────── -->
+			@if (smartArtData(); as sa) {
+				<section class="pptx-ng-inspector__section">
+					<pptx-smart-art-properties
+						[smartArtData]="sa"
+						(smartArtDataChange)="onSmartArtDataChange($event)"
+					/>
+				</section>
+			}
+
 			<!-- ── Animation authoring ────────────────────────────────────────── -->
 			<details class="pptx-ng-inspector__details">
 				<summary class="pptx-ng-inspector__summary">Animation</summary>
@@ -53739,6 +54520,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeName", required: false }] }], applyTheme: [{ type: i0.Output, args: ["applyTheme"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
+/**
+ * touch-gestures.ts: thin Angular adapter over the framework-agnostic
+ * `createTouchGestureRecognizer` from `pptx-viewer-shared`.
+ *
+ * The gesture state machine itself (pinch-to-zoom, swipe, long-press) lives in
+ * shared and is identical across React / Vue / Angular. This adapter only owns
+ * the DOM listener attach/detach lifecycle, mirroring the React hook
+ * `packages/react/src/viewer/hooks/useTouchGestures.ts`:
+ *   - `touchstart` / `touchmove` are registered with `{ passive: false }` so the
+ *     recogniser can call `preventDefault()` to suppress the browser's native
+ *     pinch-zoom on the canvas;
+ *   - `touchend` / `touchcancel` are passive (they never call preventDefault).
+ *
+ * `attachTouchGestures(element, config)` returns a teardown function that
+ * removes every listener and cancels any pending long-press timer. Components
+ * call it from `afterNextRender` (when the target node is live) and run the
+ * teardown via `DestroyRef.onDestroy`.
+ *
+ * @module touch-gestures (angular)
+ */
+/**
+ * Viewer zoom bounds. The Angular viewer clamps zoom to [0.2, 3] (see
+ * `ZOOM_MIN` / `ZOOM_MAX` in `power-point-viewer.component.ts`); the pinch path
+ * must clamp to the same range so a pinch can never exceed the buttons.
+ */
+const MIN_ZOOM_SCALE = 0.2;
+const MAX_ZOOM_SCALE = 3;
+/** Clamp a scale value to the Angular viewer's allowed zoom range. */
+function clampScale(value) {
+    return clampScale$1(value, MIN_ZOOM_SCALE, MAX_ZOOM_SCALE);
+}
+/**
+ * Attach the shared touch-gesture recogniser to `element` and return a teardown
+ * function. Mirrors the React hook's listener lifecycle exactly:
+ * `touchstart`/`touchmove` are non-passive (so pinch can `preventDefault`),
+ * `touchend`/`touchcancel` are passive.
+ */
+function attachTouchGestures(element, config) {
+    const recognizer = createTouchGestureRecognizer({
+        getScale: config.getScale,
+        minScale: MIN_ZOOM_SCALE,
+        maxScale: MAX_ZOOM_SCALE,
+        callbacks: config.callbacks,
+    });
+    const onStart = (e) => recognizer.onTouchStart(e);
+    const onMove = (e) => recognizer.onTouchMove(e);
+    const onEnd = (e) => recognizer.onTouchEnd(e);
+    const onCancel = () => recognizer.onTouchCancel();
+    element.addEventListener('touchstart', onStart, { passive: false });
+    element.addEventListener('touchmove', onMove, { passive: false });
+    element.addEventListener('touchend', onEnd, { passive: true });
+    element.addEventListener('touchcancel', onCancel, { passive: true });
+    return () => {
+        element.removeEventListener('touchstart', onStart);
+        element.removeEventListener('touchmove', onMove);
+        element.removeEventListener('touchend', onEnd);
+        element.removeEventListener('touchcancel', onCancel);
+        recognizer.cancel();
+    };
+}
+
 const ZOOM_STEP = 0.1;
 const ZOOM_MIN = 0.2;
 const ZOOM_MAX = 3;
@@ -54172,6 +55014,9 @@ class PowerPointViewerComponent {
                 this.activeSession.set(null);
             }
         });
+        // Attach multi-touch gestures (pinch-zoom / swipe-nav / long-press menu)
+        // to the canvas host once it is rendered. See setupTouchGestures().
+        this.setupTouchGestures();
     }
     /**
      * Serialise the current presentation to `.pptx` bytes (imperative handle).
@@ -54308,54 +55153,60 @@ class PowerPointViewerComponent {
         this.collab.disconnect();
         this.activeSession.set(null);
     }
-    /** Horizontal-swipe tracking start coordinates (touch begins on the canvas). */
-    swipeStartX = null;
-    swipeStartY = null;
     /**
-     * Begin tracking a horizontal swipe for slide navigation.
+     * Wire the framework-agnostic touch-gesture recogniser to the `<main>` canvas
+     * host once it is in the DOM. Mirrors React's `useTouchGestures` wiring:
+     *   - pinch-to-zoom always updates the zoom signal (clamped to the viewer
+     *     range), with `preventDefault()` on the pinch path to suppress the
+     *     browser's native pinch-zoom;
+     *   - horizontal swipe navigates slides, but only when editing is off
+     *     (`!canEdit()`): in edit mode single-finger gestures belong to element
+     *     manipulation (move/resize/rotate), so we never hijack them. The large
+     *     ‹ › buttons remain available for explicit navigation in all modes;
+     *   - long-press in edit mode opens the editor context menu at the press
+     *     point for the current selection (mirrors React's onLongPress path).
      *
-     * To disambiguate a navigation swipe from an element drag, swipe-nav is only
-     * armed when editing is off (`!canEdit()`). When `canEdit()` is true,
-     * pointer/touch gestures belong to element manipulation (move/resize/rotate),
-     * so we never hijack them. The large ‹ › buttons remain available in all
-     * modes for explicit navigation.
+     * The recogniser's swipe/long-press callbacks check the live `canEdit()` /
+     * selection state, so a single attach handles every mode without re-binding.
      */
-    onMainTouchStart(event) {
-        if (this.canEdit() || event.changedTouches.length !== 1) {
-            this.swipeStartX = null;
-            this.swipeStartY = null;
-            return;
-        }
-        const touch = event.changedTouches[0];
-        this.swipeStartX = touch.clientX;
-        this.swipeStartY = touch.clientY;
-    }
-    /**
-     * Complete a swipe: a predominantly horizontal drag of at least the threshold
-     * navigates to the previous (swipe right) or next (swipe left) slide.
-     */
-    onMainTouchEnd(event) {
-        const startX = this.swipeStartX;
-        const startY = this.swipeStartY;
-        this.swipeStartX = null;
-        this.swipeStartY = null;
-        if (startX === null || startY === null || event.changedTouches.length !== 1) {
-            return;
-        }
-        const touch = event.changedTouches[0];
-        const dx = touch.clientX - startX;
-        const dy = touch.clientY - startY;
-        const SWIPE_THRESHOLD = 50;
-        // Ignore vertical-dominant gestures (scrolling) and short drags.
-        if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) {
-            return;
-        }
-        if (dx < 0) {
-            this.goNext();
-        }
-        else {
-            this.goPrev();
-        }
+    setupTouchGestures() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const el = this.mainEl()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const teardown = attachTouchGestures(el, {
+                getScale: () => this.zoom(),
+                callbacks: {
+                    onPinchZoom: (newScale) => this.zoom.set(newScale),
+                    onSwipe: (direction) => {
+                        // Edit mode: leave single-finger gestures to element manipulation.
+                        if (this.canEdit()) {
+                            return;
+                        }
+                        // direction 1 = swipe right (previous), -1 = swipe left (next).
+                        if (direction === 1) {
+                            this.goPrev();
+                        }
+                        else {
+                            this.goNext();
+                        }
+                    },
+                    onLongPress: (x, y) => {
+                        if (!this.canEdit() || this.presenting()) {
+                            return;
+                        }
+                        const selected = this.selectedElement();
+                        if (!selected) {
+                            return;
+                        }
+                        this.contextMenuPos.set({ x, y });
+                    },
+                },
+            });
+            destroyRef.onDestroy(teardown);
+        });
     }
     zoomIn() {
         this.zoom.set(Math.min(ZOOM_MAX, Number((this.zoom() + ZOOM_STEP).toFixed(2))));
@@ -55153,12 +56004,7 @@ class PowerPointViewerComponent {
 						</nav>
 					}
 
-					<main
-						class="pptx-ng-main"
-						#mainEl
-						(touchstart)="onMainTouchStart($event)"
-						(touchend)="onMainTouchEnd($event)"
-					>
+					<main class="pptx-ng-main" #mainEl>
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"
@@ -55723,12 +56569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 						</nav>
 					}
 
-					<main
-						class="pptx-ng-main"
-						#mainEl
-						(touchstart)="onMainTouchStart($event)"
-						(touchend)="onMainTouchEnd($event)"
-					>
+					<main class="pptx-ng-main" #mainEl>
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"