pptx-angular-viewer 1.1.33 → 1.1.35

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 = [
@@ -35190,6 +35241,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 +36985,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 +37357,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 +37398,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 +37408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         TextAdvancedPanelComponent,
                         TableDataEditorComponent,
                         ChartDataEditorComponent,
+                        SmartArtPropertiesComponent,
                         AnimationAuthorPanelComponent,
                     ], template: `
 		<!--
@@ -37034,6 +37662,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>