pptx-angular-viewer 1.1.39 → 1.1.41

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, updateSmartArtNodeText, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, 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, svgPathToPolygons, deobfuscateFont, detectFontFormat, getSubstituteFontFamily, checkMissingAltText, checkMissingSlideTitle, checkLowContrast, checkComplexTables, checkBlankSlide, checkDuplicateTitles, createChartElement, formatCommentTimestamp, setChartTitle, setChartLegend, setChartDataLabels, setChartAxis, setChartSeriesTrendline, setChartSeriesErrorBars, setChartDataPointLabel, 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';
@@ -5837,6 +5837,168 @@ function renderWinLossSparkline(data) {
     ].join('');
 }
 
+const CHART_TYPE_OPTIONS = [
+    { value: 'bar', label: 'Bar' },
+    { value: 'line', label: 'Line' },
+    { value: 'pie', label: 'Pie' },
+    { value: 'doughnut', label: 'Doughnut' },
+    { value: 'area', label: 'Area' },
+    { value: 'scatter', label: 'Scatter' },
+    { value: 'bubble', label: 'Bubble' },
+    { value: 'radar', label: 'Radar' },
+    { value: 'stock', label: 'Stock' },
+    { value: 'waterfall', label: 'Waterfall' },
+    { value: 'combo', label: 'Combo' },
+];
+const GROUPING_OPTIONS = [
+    { value: 'clustered', label: 'Clustered' },
+    { value: 'stacked', label: 'Stacked' },
+    { value: 'percentStacked', label: '100% Stacked' },
+];
+const LEGEND_POSITION_OPTIONS = [
+    { value: 't', label: 'Top' },
+    { value: 'b', label: 'Bottom' },
+    { value: 'l', label: 'Left' },
+    { value: 'r', label: 'Right' },
+];
+const TICK_LABEL_POSITION_OPTIONS = [
+    { value: 'nextTo', label: 'Next to axis' },
+    { value: 'high', label: 'High' },
+    { value: 'low', label: 'Low' },
+    { value: 'none', label: 'None' },
+];
+const DISPLAY_UNITS_OPTIONS = [
+    { value: '', label: 'None' },
+    { value: 'hundreds', label: 'Hundreds' },
+    { value: 'thousands', label: 'Thousands' },
+    { value: 'tenThousands', label: 'Ten Thousands' },
+    { value: 'hundredThousands', label: 'Hundred Thousands' },
+    { value: 'millions', label: 'Millions' },
+    { value: 'tenMillions', label: 'Ten Millions' },
+    { value: 'hundredMillions', label: 'Hundred Millions' },
+    { value: 'billions', label: 'Billions' },
+    { value: 'trillions', label: 'Trillions' },
+];
+const DATA_LABEL_CONTENT_OPTIONS = [
+    { key: 'showValue', label: 'Value' },
+    { key: 'showCategory', label: 'Category name' },
+    { key: 'showSeriesName', label: 'Series name' },
+    { key: 'showPercent', label: 'Percentage' },
+    { key: 'showLegendKey', label: 'Legend key' },
+];
+const DATA_LABEL_POSITION_OPTIONS = [
+    { value: '', label: 'Default' },
+    { value: 'ctr', label: 'Center' },
+    { value: 'inEnd', label: 'Inside End' },
+    { value: 'inBase', label: 'Inside Base' },
+    { value: 'outEnd', label: 'Outside End' },
+    { value: 'bestFit', label: 'Best Fit' },
+];
+const TRENDLINE_TYPE_OPTIONS = [
+    { value: '', label: 'None' },
+    { value: 'linear', label: 'Linear' },
+    { value: 'exponential', label: 'Exponential' },
+    { value: 'logarithmic', label: 'Logarithmic' },
+    { value: 'polynomial', label: 'Polynomial' },
+    { value: 'power', label: 'Power' },
+    { value: 'movingAvg', label: 'Moving Average' },
+];
+const ERROR_BAR_VALTYPE_OPTIONS = [
+    { value: '', label: 'None' },
+    { value: 'fixedVal', label: 'Fixed value' },
+    { value: 'percentage', label: 'Percentage' },
+    { value: 'stdDev', label: 'Standard deviation' },
+    { value: 'stdErr', label: 'Standard error' },
+];
+const ERROR_BAR_TYPE_OPTIONS = [
+    { value: 'both', label: 'Both' },
+    { value: 'plus', label: 'Plus' },
+    { value: 'minus', label: 'Minus' },
+];
+const MARKER_SYMBOL_OPTIONS = [
+    { value: '', label: 'Auto' },
+    { value: 'none', label: 'None' },
+    { value: 'circle', label: 'Circle' },
+    { value: 'square', label: 'Square' },
+    { value: 'diamond', label: 'Diamond' },
+    { value: 'triangle', label: 'Triangle' },
+    { value: 'x', label: 'X' },
+    { value: 'star', label: 'Star' },
+    { value: 'plus', label: 'Plus' },
+    { value: 'dot', label: 'Dot' },
+    { value: 'dash', label: 'Dash' },
+];
+const GRIDLINE_DASH_OPTIONS = [
+    { value: '', label: 'Default' },
+    { value: 'solid', label: 'Solid' },
+    { value: 'dash', label: 'Dash' },
+    { value: 'dot', label: 'Dot' },
+    { value: 'dashDot', label: 'Dash Dot' },
+    { value: 'lgDash', label: 'Long Dash' },
+];
+const COMBO_SERIES_TYPE_OPTIONS = [
+    { value: '', label: 'Default' },
+    { value: 'bar', label: 'Bar' },
+    { value: 'line', label: 'Line' },
+    { value: 'area', label: 'Area' },
+    { value: 'scatter', label: 'Scatter' },
+];
+/** Axis kinds the inspector exposes, with whether they carry a numeric scale. */
+const EDITABLE_AXIS_ROWS = [
+    { type: 'valAx', label: 'Value axis', hasScale: true },
+    { type: 'dateAx', label: 'Date axis', hasScale: true },
+    { type: 'catAx', label: 'Category axis', hasScale: false },
+];
+/** Chart types that support clustered/stacked grouping modes. */
+const GROUPING_SUPPORTED_TYPES = new Set([
+    'bar',
+    'line',
+    'area',
+]);
+/** Chart types where trendlines are meaningful. */
+const TRENDLINE_SUPPORTED_TYPES = new Set([
+    'bar',
+    'line',
+    'area',
+    'scatter',
+    'bubble',
+]);
+/** Chart types where error bars are meaningful. */
+const ERROR_BAR_SUPPORTED_TYPES = new Set([
+    'bar',
+    'line',
+    'area',
+    'scatter',
+    'bubble',
+]);
+/** Value types that take a numeric amount (stdErr does not). */
+const ERROR_BAR_VALUE_TYPES = new Set([
+    'fixedVal',
+    'percentage',
+    'stdDev',
+]);
+/** Chart types where series markers are meaningful. */
+const MARKER_SUPPORTED_TYPES = new Set([
+    'line',
+    'scatter',
+    'bubble',
+    'radar',
+]);
+/** Cartesian chart types where a per-series combo type makes sense. */
+const COMBO_SUPPORTED_TYPES = new Set([
+    'bar',
+    'line',
+    'area',
+    'combo',
+]);
+/** Chart types where per-point slice explosion (pull-out) is meaningful. */
+const EXPLOSION_SUPPORTED_TYPES = new Set([
+    'pie',
+    'pie3D',
+    'doughnut',
+    'ofPie',
+]);
+
 const GRIDLINE_COLOR$1 = '#e2e8f0';
 const AXIS_LABEL_COLOR$1 = '#64748b';
 const SECONDARY_GRID_COLOR = '#e2e8f0';
@@ -11339,6 +11501,217 @@ function finalizeClickGroup(steps, options) {
     return group;
 }
 
+/**
+ * `animation-advanced-triggers` (pure evaluation of compound and simultaneous
+ * OOXML timing-tree start/end conditions (`p:stCondLst` / `p:endCondLst`).
+ *
+ * The parse layer (`pptx-viewer-core`) preserves the FULL set of `p:cond`
+ * entries per node on {@link PptxNativeAnimation.startConditions} /
+ * {@link PptxNativeAnimation.endConditions}, but the historic playback model
+ * collapsed every node down to a single `trigger` + `triggerDelayMs`. That lost
+ * compound triggers (e.g. "fire on click OR after a 2s delay") and conditions
+ * that depend on another time node ending (e.g. "after several preceding
+ * effects"). This module re-derives correct sequencing semantics from the full
+ * condition set so {@link import('./animation-timeline-builder').buildTimeline}
+ * and {@link import('./animation-sequencer').AnimationSequencer} can honour them.
+ *
+ * ECMA-376 §19.5.28 (CT_TLTimeCondition): a `stCondLst` holds one OR MORE
+ * conditions; the node may begin as soon as ANY one of them is satisfied (a
+ * logical OR). `endCondLst` ends the node when ANY of its conditions fire. We
+ * therefore model the set, then pick the condition that governs auto-playback
+ * (the earliest auto-satisfiable one) while still recording whether a click /
+ * hover alternative exists.
+ *
+ * @module render/animation-advanced-triggers
+ */
+// ==========================================================================
+// Condition classification
+// ==========================================================================
+/** Events that begin a node as the result of a user click. */
+const CLICK_EVENTS = new Set(['onClick', 'onNext']);
+/** Events that begin a node as the result of a mouse hover. */
+const HOVER_EVENTS = new Set(['onMouseOver']);
+/**
+ * Events that chain a node off another time node's lifecycle (begin/end).
+ * These are the "after preceding effect(s)" conditions and always carry a
+ * `targetTimeNodeId` (`@_tn`) pointing at the node they wait on.
+ */
+const TIMENODE_EVENTS = new Set([
+    'onBegin',
+    'onEnd',
+    'begin',
+    'end',
+]);
+/** Normalise a possibly-indefinite delay to a non-negative number of ms. */
+function normalizeDelay(delay) {
+    if (delay === undefined) {
+        return { ms: 0, indefinite: false };
+    }
+    if (delay < 0) {
+        return { ms: 0, indefinite: true };
+    }
+    return { ms: delay, indefinite: false };
+}
+function classifyCondition(cond) {
+    const evt = cond.event;
+    if (evt && CLICK_EVENTS.has(evt)) {
+        return 'click';
+    }
+    if (evt && HOVER_EVENTS.has(evt)) {
+        return 'hover';
+    }
+    if (evt && TIMENODE_EVENTS.has(evt) && cond.targetTimeNodeId !== undefined) {
+        return 'timenode';
+    }
+    // No event (or onBegin without a tn) with a delay is a pure time offset.
+    return 'delay';
+}
+/**
+ * Collapse a node's full `startConditions` OR-set into the single
+ * {@link EffectiveStartCondition} that should drive playback, while preserving
+ * the alternative interaction paths.
+ *
+ * Selection (OOXML "fire when ANY applies"):
+ *  1. A time-node dependency (onEnd/onBegin of another node) governs sequencing
+ *     when present, so the effect chains after the referenced effect(s).
+ *  2. Otherwise a pure delay governs (afterDelay / afterPrevious style).
+ *  3. Otherwise the interactive trigger (click / hover) governs.
+ * In every case, a coexisting click or hover condition is recorded as an
+ * alternative so the engine can start the node early on user interaction.
+ *
+ * `fallbackTrigger` is the node's already-derived simple trigger; it is used
+ * when the condition list is empty or carries no actionable semantics.
+ */
+function resolveEffectiveStartCondition(conditions, fallbackTrigger) {
+    const base = {
+        trigger: fallbackTrigger,
+        delayMs: 0,
+        hasClickAlternative: false,
+        hasHoverAlternative: false,
+        indefinite: false,
+    };
+    if (!conditions || conditions.length === 0) {
+        return base;
+    }
+    let timenode;
+    let delayCond;
+    let clickCond;
+    let hoverCond;
+    for (const cond of conditions) {
+        switch (classifyCondition(cond)) {
+            case 'timenode':
+                // Prefer the smallest target node id for deterministic ordering.
+                if (!timenode || (cond.targetTimeNodeId ?? 0) < (timenode.targetTimeNodeId ?? 0)) {
+                    timenode = cond;
+                }
+                break;
+            case 'delay':
+                // Prefer the smallest delay (earliest auto-fire) among delay conds.
+                if (!delayCond || (cond.delay ?? 0) < (delayCond.delay ?? 0)) {
+                    delayCond = cond;
+                }
+                break;
+            case 'click':
+                if (!clickCond) {
+                    clickCond = cond;
+                }
+                break;
+            case 'hover':
+                if (!hoverCond) {
+                    hoverCond = cond;
+                }
+                break;
+        }
+    }
+    base.hasClickAlternative = clickCond !== undefined;
+    base.hasHoverAlternative = hoverCond !== undefined;
+    if (clickCond?.targetShapeId) {
+        base.clickTargetShapeId = clickCond.targetShapeId;
+    }
+    // 1. Time-node dependency governs sequencing.
+    if (timenode) {
+        const { ms, indefinite } = normalizeDelay(timenode.delay);
+        base.trigger =
+            timenode.event === 'onBegin' || timenode.event === 'begin' ? 'withPrevious' : 'afterPrevious';
+        base.delayMs = ms;
+        base.indefinite = indefinite;
+        base.dependsOnTimeNodeId = timenode.targetTimeNodeId;
+        base.dependsOnEvent = timenode.event;
+        return base;
+    }
+    // 2. Pure delay governs.
+    if (delayCond && (delayCond.delay ?? 0) !== 0) {
+        const { ms, indefinite } = normalizeDelay(delayCond.delay);
+        // A delay alongside a click means "auto after delay, or sooner on click".
+        base.trigger = clickCond ? 'onClick' : 'afterDelay';
+        base.delayMs = ms;
+        base.indefinite = indefinite;
+        return base;
+    }
+    // 3. Interactive trigger governs.
+    if (clickCond) {
+        base.trigger = clickCond.targetShapeId ? 'onShapeClick' : 'onClick';
+        return base;
+    }
+    if (hoverCond) {
+        base.trigger = 'onHover';
+        return base;
+    }
+    // 4. Zero-delay-only condition (onBegin / @_delay="0"): keep fallback but
+    // surface that nothing interactive is required (auto with previous).
+    if (delayCond) {
+        base.trigger = fallbackTrigger;
+        base.delayMs = 0;
+    }
+    return base;
+}
+/**
+ * Resolve the effective start condition for a parsed native animation,
+ * combining its full `startConditions` OR-set with its already-derived simple
+ * `trigger` as a fallback.
+ */
+function resolveAnimationStart(anim) {
+    return resolveEffectiveStartCondition(anim.startConditions, anim.trigger ?? 'onClick');
+}
+/** Collapse a node's `endConditions` OR-set into a playback-ready summary. */
+function resolveEffectiveEndCondition(conditions) {
+    if (!conditions || conditions.length === 0) {
+        return undefined;
+    }
+    const result = {
+        endsOnMouseOut: false,
+        endsOnClick: false,
+        indefinite: false,
+    };
+    for (const cond of conditions) {
+        const evt = cond.event;
+        if (evt === 'onMouseOut') {
+            result.endsOnMouseOut = true;
+        }
+        else if (evt && CLICK_EVENTS.has(evt)) {
+            result.endsOnClick = true;
+            if (cond.targetShapeId) {
+                result.clickTargetShapeId = cond.targetShapeId;
+            }
+        }
+        else if (evt && TIMENODE_EVENTS.has(evt) && cond.targetTimeNodeId !== undefined) {
+            result.endsWithTimeNodeId = cond.targetTimeNodeId;
+        }
+        const { ms, indefinite } = normalizeDelay(cond.delay);
+        if (indefinite) {
+            result.indefinite = true;
+        }
+        else if (ms > 0 && result.delayMs === undefined) {
+            result.delayMs = ms;
+        }
+    }
+    return result;
+}
+/** Resolve the effective end condition for a parsed native animation. */
+function resolveAnimationEnd(anim) {
+    return resolveEffectiveEndCondition(anim.endConditions);
+}
+
 /**
  * `animation-timeline-text-build` — pure expansion of text-build animations
  * (by-paragraph / by-word / by-char) into staggered per-segment sub-animations.
@@ -11636,10 +12009,16 @@ class AnimationSequencer {
                 this.dynamicKeyframeBlocks.push(dynamic.css);
             }
             const elementId = anim.targetId ?? '';
-            const trigger = anim.trigger ?? 'onClick';
+            // Resolve compound / simultaneous start conditions (the OR-set in
+            // p:stCondLst) into the effective sequencing trigger + governing
+            // delay, instead of the single collapsed trigger.
+            const effective = resolveAnimationStart(anim);
+            const trigger = effective.trigger;
             const duration = anim.durationMs ?? defaultDuration(anim.presetClass);
             const animDelay = anim.delayMs ?? 0;
-            const triggerDelay = anim.triggerDelayMs ?? 0;
+            const triggerDelay = anim.startConditions && anim.startConditions.length > 0
+                ? effective.delayMs
+                : (anim.triggerDelayMs ?? 0);
             const fill = fillModeForClass(anim.presetClass);
             // Compute repeat / direction from the native animation
             const iterCount = anim.repeatCount ?? 1;
@@ -11648,8 +12027,9 @@ class AnimationSequencer {
             let stepDelay;
             switch (trigger) {
                 case 'onClick':
+                case 'onShapeClick':
                 case 'onHover':
-                    // onClick / onHover resets the timeline — delay only from explicit delay values.
+                    // onClick / onShapeClick / onHover reset the timeline: delay only from explicit delay values.
                     cumulativeMs = 0;
                     stepDelay = animDelay + triggerDelay;
                     break;
@@ -11812,10 +12192,19 @@ function buildTimeline(nativeAnimations) {
                 dynamicBlocks.push(dynamic.css);
             }
             const elementId = singleAnim.targetId ?? '';
-            const trigger = singleAnim.trigger ?? 'onClick';
+            // Honour the FULL start-condition OR-set (compound / simultaneous
+            // triggers) rather than the collapsed single trigger. The effective
+            // condition drives grouping and supplies the governing start delay.
+            const effective = resolveAnimationStart(singleAnim);
+            const trigger = effective.trigger;
             const duration = singleAnim.durationMs ?? defaultDuration(singleAnim.presetClass);
             const animDelay = singleAnim.delayMs ?? 0;
-            const triggerDelay = singleAnim.triggerDelayMs ?? 0;
+            // Use the governing condition delay when conditions were present;
+            // otherwise fall back to the simple triggerDelayMs (afterDelay) so
+            // existing single-condition slides are unchanged.
+            const triggerDelay = singleAnim.startConditions && singleAnim.startConditions.length > 0
+                ? effective.delayMs
+                : (singleAnim.triggerDelayMs ?? 0);
             const presetClass = singleAnim.presetClass ?? 'entr';
             const fill = fillModeForClass(singleAnim.presetClass);
             // Compute repeat / direction
@@ -11825,8 +12214,10 @@ function buildTimeline(nativeAnimations) {
             if (presetClass === 'entr' && elementId) {
                 entranceIds.add(elementId);
             }
-            // Determine whether to start a new click-group
-            const isOnClick = trigger === 'onClick';
+            // Determine whether to start a new click-group. A compound condition
+            // that resolves to a click (onClick, or an inline shape click that was
+            // not split into an interactive sequence) also starts a new group.
+            const isOnClick = trigger === 'onClick' || trigger === 'onShapeClick';
             const isFirstAnimation = clickGroups.length === 0 && currentGroup.length === 0;
             if (isOnClick || isFirstAnimation) {
                 // Flush current group if non-empty
@@ -14785,6 +15176,151 @@ function setCellText(element, rowIndex, colIndex, text) {
     return { ...element, tableData: { ...tableData, rows } };
 }
 
+function cloneTextStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    return { ...style };
+}
+function cloneShapeStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    return {
+        ...style,
+        ...(style.fillGradientStops
+            ? { fillGradientStops: style.fillGradientStops.map((stop) => ({ ...stop })) }
+            : {}),
+    };
+}
+function cloneSlideTransition(transition) {
+    if (!transition) {
+        return undefined;
+    }
+    return { ...transition };
+}
+function cloneElementAnimation(animation) {
+    return { ...animation };
+}
+function cloneChartData(data) {
+    if (!data) {
+        return undefined;
+    }
+    return {
+        ...data,
+        categories: [...(data.categories || [])],
+        series: (data.series || []).map((series) => ({
+            ...series,
+            values: [...(series.values || [])],
+        })),
+    };
+}
+function cloneSmartArtData(data) {
+    if (!data) {
+        return undefined;
+    }
+    return {
+        ...data,
+        nodes: (data.nodes || []).map((node) => ({ ...node })),
+    };
+}
+function cloneElement(element) {
+    switch (element.type) {
+        case 'text':
+        case 'shape':
+            return {
+                ...element,
+                ...(element.textStyle ? { textStyle: cloneTextStyle(element.textStyle) } : {}),
+                ...(element.shapeStyle ? { shapeStyle: cloneShapeStyle(element.shapeStyle) } : {}),
+                ...(element.shapeAdjustments ? { shapeAdjustments: { ...element.shapeAdjustments } } : {}),
+                ...(element.textSegments
+                    ? {
+                        textSegments: element.textSegments.map((segment) => ({
+                            ...segment,
+                            style: cloneTextStyle(segment.style) || {},
+                        })),
+                    }
+                    : {}),
+            };
+        case 'connector':
+        case 'image':
+        case 'picture':
+            return {
+                ...element,
+                ...(element.shapeStyle ? { shapeStyle: cloneShapeStyle(element.shapeStyle) } : {}),
+                ...(element.shapeAdjustments ? { shapeAdjustments: { ...element.shapeAdjustments } } : {}),
+            };
+        case 'table':
+            return { ...element };
+        case 'chart':
+            return {
+                ...element,
+                chartData: cloneChartData(element.chartData),
+            };
+        case 'smartArt':
+            return {
+                ...element,
+                smartArtData: cloneSmartArtData(element.smartArtData),
+            };
+        case 'ole':
+        case 'media':
+        case 'group':
+        case 'ink':
+        case 'zoom':
+        case 'contentPart':
+        case 'unknown':
+        case 'model3d':
+            return { ...element };
+        default: {
+            const _exhaustive = element;
+            return _exhaustive;
+        }
+    }
+}
+function cloneSlide(slide) {
+    return {
+        ...slide,
+        transition: cloneSlideTransition(slide.transition),
+        animations: slide.animations?.map(cloneElementAnimation),
+        comments: slide.comments?.map((comment) => ({ ...comment })),
+        warnings: slide.warnings?.map((warning) => ({ ...warning })),
+        elements: slide.elements.map(cloneElement),
+    };
+}
+function cloneTemplateElementsBySlideId(templateElementsBySlideId) {
+    const cloned = {};
+    Object.entries(templateElementsBySlideId).forEach(([slideId, elements]) => {
+        cloned[slideId] = elements.map(cloneElement);
+    });
+    return cloned;
+}
+/**
+ * Deep-clone the cloneable fields of a history snapshot. Note: matches the
+ * original React behaviour by NOT copying any binding-specific extras (e.g.
+ * `actionLabel`); only the structural {@link HistorySnapshotLike} fields are
+ * rebuilt.
+ */
+function cloneHistorySnapshot(snapshot) {
+    return {
+        width: snapshot.width,
+        height: snapshot.height,
+        activeSlideIndex: snapshot.activeSlideIndex,
+        slides: snapshot.slides.map(cloneSlide),
+        templateElementsBySlideId: cloneTemplateElementsBySlideId(snapshot.templateElementsBySlideId),
+    };
+}
+function cloneXmlObject(value) {
+    if (!value) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(JSON.stringify(value));
+    }
+    catch {
+        return undefined;
+    }
+}
+
 /**
  * Pure geometry helpers for the align / distribute editor operations.
  *
@@ -20129,6 +20665,527 @@ function matchTextTokens(fromTokens, toTokens) {
     return pairs;
 }
 
+/**
+ * Intelligent token-level diffing and morph animation for text morphing.
+ *
+ * The base matcher in `morph-text` pairs tokens by exact text then proximity,
+ * which loses ordering when the same word repeats and treats every change as a
+ * crossfade. This module adds a Longest-Common-Subsequence (LCS) alignment so
+ * that tokens present in both the outgoing and incoming text are matched in a
+ * stable, order-preserving way and animated as a move (slide + restyle), while
+ * tokens that only appear on one side are classified as added (fade in) or
+ * removed (fade out).
+ *
+ * @module render/morph-text-tokens
+ */
+/**
+ * Diff two ordered token lists into shared/added/removed operations using an
+ * LCS backtrace. Shared tokens preserve order and repetition; insertions and
+ * deletions are emitted in their natural sequence position.
+ *
+ * @param fromTokens Tokens from the outgoing element.
+ * @param toTokens   Tokens from the incoming element.
+ * @returns Ordered diff operations describing the token-level transition.
+ */
+function diffTokens(fromTokens, toTokens) {
+    const n = fromTokens.length;
+    const m = toTokens.length;
+    // LCS length table.
+    const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    for (let i = n - 1; i >= 0; i--) {
+        for (let j = m - 1; j >= 0; j--) {
+            lcs[i][j] =
+                fromTokens[i].text === toTokens[j].text
+                    ? lcs[i + 1][j + 1] + 1
+                    : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    // Backtrace into ordered ops.
+    const ops = [];
+    let i = 0;
+    let j = 0;
+    while (i < n && j < m) {
+        if (fromTokens[i].text === toTokens[j].text) {
+            ops.push({
+                change: 'shared',
+                from: fromTokens[i],
+                to: toTokens[j],
+                fromIndex: i,
+                toIndex: j,
+            });
+            i++;
+            j++;
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            ops.push({ change: 'removed', from: fromTokens[i], to: null, fromIndex: i, toIndex: -1 });
+            i++;
+        }
+        else {
+            ops.push({ change: 'added', from: null, to: toTokens[j], fromIndex: -1, toIndex: j });
+            j++;
+        }
+    }
+    while (i < n) {
+        ops.push({ change: 'removed', from: fromTokens[i], to: null, fromIndex: i, toIndex: -1 });
+        i++;
+    }
+    while (j < m) {
+        ops.push({ change: 'added', from: null, to: toTokens[j], fromIndex: -1, toIndex: j });
+        j++;
+    }
+    return ops;
+}
+// ---------------------------------------------------------------------------
+// Animation building
+// ---------------------------------------------------------------------------
+/** Resolve a token colour to a CSS string, preferring a parsed rgba form. */
+function tokenColor(token) {
+    const parsed = parseHexColor(token.color);
+    return parsed ? lerpColor(parsed, parsed, 0) : token.color;
+}
+/** Build a shared-token move keyframe: slide + restyle between positions. */
+function sharedKeyframes(name, op) {
+    const from = op.from;
+    const to = op.to;
+    return `
+@keyframes ${name} {
+\tfrom {
+\t\tleft: ${Number((from.x * 100).toFixed(2))}%;
+\t\ttop: ${Number((from.y * 100).toFixed(2))}%;
+\t\tfont-size: ${from.fontSize}pt;
+\t\tfont-weight: ${from.fontWeight};
+\t\tcolor: ${tokenColor(from)};
+\t\topacity: 1;
+\t}
+\tto {
+\t\tleft: ${Number((to.x * 100).toFixed(2))}%;
+\t\ttop: ${Number((to.y * 100).toFixed(2))}%;
+\t\tfont-size: ${to.fontSize}pt;
+\t\tfont-weight: ${to.fontWeight};
+\t\tcolor: ${tokenColor(to)};
+\t\topacity: 1;
+\t}
+}`;
+}
+/** Build a fade keyframe for an added (in) or removed (out) token. */
+function fadeKeyframes(name, fadeIn) {
+    const a = fadeIn ? 0 : 1;
+    const b = fadeIn ? 1 : 0;
+    return `
+@keyframes ${name} {
+\tfrom { opacity: ${a}; }
+\tto { opacity: ${b}; }
+}`;
+}
+/**
+ * Build per-token CSS animations from a token diff. Shared tokens animate their
+ * position/size/colour between states; added tokens fade in; removed tokens
+ * fade out. Element ids embed the originating token index so bindings can map
+ * a generated `<span>` to its keyframe.
+ *
+ * @param ops        Ordered token diff from {@link diffTokens}.
+ * @param fromId     The outgoing element id (used for removed tokens).
+ * @param toId       The incoming element id (used for shared/added tokens).
+ * @param durationMs Animation duration in milliseconds.
+ * @param pairIndex  Index of the owning element pair for unique naming.
+ * @returns Per-token animation style descriptors.
+ */
+function buildTokenMorphAnimations(ops, fromId, toId, durationMs, pairIndex) {
+    const animations = [];
+    for (let k = 0; k < ops.length; k++) {
+        const op = ops[k];
+        const name = `pptx-morph-tok-${pairIndex}-${k}`;
+        const anim = `${name} ${durationMs}ms ${MORPH_EASING} forwards`;
+        if (op.change === 'shared') {
+            animations.push({
+                elementId: `${toId}__token_${op.toIndex}`,
+                animation: anim,
+                keyframes: sharedKeyframes(name, op),
+            });
+        }
+        else if (op.change === 'added') {
+            animations.push({
+                elementId: `${toId}__token_${op.toIndex}`,
+                animation: anim,
+                keyframes: fadeKeyframes(name, true),
+            });
+        }
+        else {
+            animations.push({
+                elementId: `${fromId}__token_${op.fromIndex}`,
+                animation: anim,
+                keyframes: fadeKeyframes(name, false),
+            });
+        }
+    }
+    return animations;
+}
+
+/** Number of sample points each outline is resampled to before interpolating. */
+const OUTLINE_SAMPLE_COUNT = 64;
+/** Number of points used to approximate an ellipse/circle outline. */
+const ELLIPSE_SAMPLE_COUNT = 48;
+// ---------------------------------------------------------------------------
+// CSS clip-path -> polygon
+// ---------------------------------------------------------------------------
+/** Resolve a CSS length token (`50%`, `12px`, `8`) against an axis length. */
+function resolveLength(token, axis) {
+    const trimmed = token.trim();
+    if (trimmed.endsWith('%')) {
+        const pct = Number.parseFloat(trimmed.slice(0, -1));
+        return Number.isFinite(pct) ? (pct / 100) * axis : 0;
+    }
+    const px = Number.parseFloat(trimmed.replace(/px$/u, ''));
+    return Number.isFinite(px) ? px : 0;
+}
+/** Parse a `polygon(x y, x y, ...)` clip-path into a pixel-space polygon. */
+function polygonClipToPoints(value, width, height) {
+    const inner = value.slice(value.indexOf('(') + 1, value.lastIndexOf(')'));
+    const points = [];
+    for (const pairStr of inner.split(',')) {
+        const parts = pairStr.trim().split(/\s+/u);
+        if (parts.length < 2) {
+            continue;
+        }
+        points.push({
+            x: resolveLength(parts[0], width),
+            y: resolveLength(parts[1], height),
+        });
+    }
+    return points;
+}
+/** Parse an `inset(t r b l ...)` clip-path into a rectangle polygon. */
+function insetClipToPoints(value, width, height) {
+    const inner = value.slice(value.indexOf('(') + 1, value.lastIndexOf(')'));
+    const tokens = inner.split(/round/u)[0].trim().split(/\s+/u);
+    const top = resolveLength(tokens[0] ?? '0', height);
+    const right = resolveLength(tokens[1] ?? tokens[0] ?? '0', width);
+    const bottom = resolveLength(tokens[2] ?? tokens[0] ?? '0', height);
+    const left = resolveLength(tokens[3] ?? tokens[1] ?? tokens[0] ?? '0', width);
+    return [
+        { x: left, y: top },
+        { x: width - right, y: top },
+        { x: width - right, y: height - bottom },
+        { x: left, y: height - bottom },
+    ];
+}
+/** Sample an `ellipse(...)` / `circle(...)` clip-path into a polygon. */
+function ellipseClipToPoints(value, width, height) {
+    const isCircle = value.startsWith('circle');
+    const inner = value.slice(value.indexOf('(') + 1, value.lastIndexOf(')'));
+    const [radii, position] = inner.split(/\s+at\s+/u);
+    const radiusTokens = radii.trim().split(/\s+/u).filter(Boolean);
+    let rx = width / 2;
+    let ry = height / 2;
+    if (isCircle) {
+        const r = resolveLength(radiusTokens[0] ?? '50%', Math.min(width, height));
+        rx = r;
+        ry = r;
+    }
+    else {
+        rx = resolveLength(radiusTokens[0] ?? '50%', width);
+        ry = resolveLength(radiusTokens[1] ?? radiusTokens[0] ?? '50%', height);
+    }
+    let cx = width / 2;
+    let cy = height / 2;
+    if (position) {
+        const posTokens = position.trim().split(/\s+/u);
+        cx = resolveLength(posTokens[0] ?? '50%', width);
+        cy = resolveLength(posTokens[1] ?? posTokens[0] ?? '50%', height);
+    }
+    const points = [];
+    for (let i = 0; i < ELLIPSE_SAMPLE_COUNT; i++) {
+        const a = (i / ELLIPSE_SAMPLE_COUNT) * Math.PI * 2;
+        points.push({ x: cx + Math.cos(a) * rx, y: cy + Math.sin(a) * ry });
+    }
+    return points;
+}
+/**
+ * Convert a CSS `clip-path` value into a single pixel-space polygon. Supports
+ * `polygon`, `inset`, `ellipse`, `circle`, and `path('...')` forms. For `path`
+ * outlines the largest sub-path (by point count) is used.
+ *
+ * @param value  The CSS clip-path string.
+ * @param width  Element width in pixels.
+ * @param height Element height in pixels.
+ * @returns The outline polygon, or an empty array if it cannot be parsed.
+ */
+function clipPathToPolygon(value, width, height) {
+    const v = value.trim();
+    if (v.startsWith('polygon')) {
+        return polygonClipToPoints(v, width, height);
+    }
+    if (v.startsWith('inset')) {
+        return insetClipToPoints(v, width, height);
+    }
+    if (v.startsWith('ellipse') || v.startsWith('circle')) {
+        return ellipseClipToPoints(v, width, height);
+    }
+    if (v.startsWith('path')) {
+        const start = v.indexOf("'") >= 0 ? v.indexOf("'") : v.indexOf('"');
+        const end = v.lastIndexOf("'") >= 0 ? v.lastIndexOf("'") : v.lastIndexOf('"');
+        if (start >= 0 && end > start) {
+            const d = v.slice(start + 1, end);
+            const polys = svgPathToPolygons(d);
+            if (polys.length === 0) {
+                return [];
+            }
+            return polys.reduce((a, b) => (b.length > a.length ? b : a));
+        }
+    }
+    return [];
+}
+// ---------------------------------------------------------------------------
+// Element outline resolution
+// ---------------------------------------------------------------------------
+/**
+ * Resolve an element's outline polygon in its own pixel box. Falls back to the
+ * element's bounding rectangle when no preset clip-path is available (e.g. a
+ * plain `rect`, an image, or an unknown shape).
+ *
+ * @param element The element to resolve an outline for.
+ * @returns A pixel-space polygon describing the element's outline.
+ */
+function resolveElementOutline(element) {
+    const width = Math.max(element.width, 1);
+    const height = Math.max(element.height, 1);
+    const shapeType = element.shapeType;
+    const adjustments = element.shapeAdjustments;
+    const clip = getResolvedShapeClipPathFor$1(shapeType, width, height, adjustments);
+    if (clip) {
+        const poly = clipPathToPolygon(clip, width, height);
+        if (poly.length >= 3) {
+            return poly;
+        }
+    }
+    // Rectangle fallback (covers rect / roundrect / images / unmatched presets).
+    return [
+        { x: 0, y: 0 },
+        { x: width, y: 0 },
+        { x: width, y: height },
+        { x: 0, y: height },
+    ];
+}
+
+// ---------------------------------------------------------------------------
+// Perimeter resampling
+// ---------------------------------------------------------------------------
+/** Euclidean distance between two points. */
+function dist(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+}
+/**
+ * Resample a closed polygon to exactly `count` points spaced uniformly by arc
+ * length around its perimeter.
+ *
+ * @param poly  The source polygon (treated as closed).
+ * @param count Desired number of output points (>= 3).
+ * @returns A new polygon with `count` evenly-spaced vertices.
+ */
+function resamplePolygon(poly, count) {
+    if (poly.length < 2) {
+        return Array.from({ length: count }, () => ({ x: poly[0]?.x ?? 0, y: poly[0]?.y ?? 0 }));
+    }
+    // Cumulative perimeter length (closing edge included).
+    const ring = [...poly, poly[0]];
+    const segLen = [];
+    let total = 0;
+    for (let i = 0; i < ring.length - 1; i++) {
+        const d = dist(ring[i], ring[i + 1]);
+        segLen.push(d);
+        total += d;
+    }
+    if (total === 0) {
+        return Array.from({ length: count }, () => ({ x: poly[0].x, y: poly[0].y }));
+    }
+    const result = [];
+    const step = total / count;
+    let seg = 0;
+    let segStart = 0;
+    for (let i = 0; i < count; i++) {
+        const target = i * step;
+        while (seg < segLen.length - 1 && segStart + segLen[seg] < target) {
+            segStart += segLen[seg];
+            seg++;
+        }
+        const within = segLen[seg] > 0 ? (target - segStart) / segLen[seg] : 0;
+        const a = ring[seg];
+        const b = ring[seg + 1];
+        result.push({ x: a.x + (b.x - a.x) * within, y: a.y + (b.y - a.y) * within });
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Winding + rotation alignment
+// ---------------------------------------------------------------------------
+/** Signed area of a polygon; positive for counter-clockwise (SVG y-down). */
+function signedArea(poly) {
+    let area = 0;
+    for (let i = 0; i < poly.length; i++) {
+        const a = poly[i];
+        const b = poly[(i + 1) % poly.length];
+        area += a.x * b.y - b.x * a.y;
+    }
+    return area / 2;
+}
+/** Rotate a ring so element `offset` becomes index 0. */
+function rotateRing(poly, offset) {
+    const n = poly.length;
+    const o = ((offset % n) + n) % n;
+    return poly.slice(o).concat(poly.slice(0, o));
+}
+/**
+ * Find the rotation of `to` that minimises total squared distance to `from`.
+ * Both rings must already have the same length.
+ */
+function bestRotation(from, to) {
+    let bestOffset = 0;
+    let bestCost = Infinity;
+    for (let offset = 0; offset < to.length; offset++) {
+        let cost = 0;
+        for (let i = 0; i < from.length; i++) {
+            const t = to[(i + offset) % to.length];
+            const dx = from[i].x - t.x;
+            const dy = from[i].y - t.y;
+            cost += dx * dx + dy * dy;
+            if (cost >= bestCost) {
+                break;
+            }
+        }
+        if (cost < bestCost) {
+            bestCost = cost;
+            bestOffset = offset;
+        }
+    }
+    return bestOffset;
+}
+// ---------------------------------------------------------------------------
+// Pair normalisation
+// ---------------------------------------------------------------------------
+/**
+ * Normalise two outlines into equal-length, like-oriented, rotation-aligned
+ * rings ready for vertex-wise interpolation.
+ *
+ * @param fromPoly The outgoing outline polygon.
+ * @param toPoly   The incoming outline polygon.
+ * @param count    Common sample count (defaults to {@link OUTLINE_SAMPLE_COUNT}).
+ * @returns A tuple of two normalised polygons of identical length.
+ */
+function normalizeOutlinePair(fromPoly, toPoly, count = OUTLINE_SAMPLE_COUNT) {
+    const from = resamplePolygon(fromPoly, count);
+    let to = resamplePolygon(toPoly, count);
+    // Align winding order so both rings travel the same direction.
+    if (Math.sign(signedArea(from)) !== Math.sign(signedArea(to))) {
+        to = [...to].reverse();
+    }
+    // Rotate `to` so its first vertex best matches `from`'s first vertex.
+    const offset = bestRotation(from, to);
+    to = rotateRing(to, offset);
+    return [from, to];
+}
+// ---------------------------------------------------------------------------
+// Interpolation + serialisation
+// ---------------------------------------------------------------------------
+/**
+ * Interpolate two normalised outlines at parameter `t` and serialise to an SVG
+ * path `d` string (a single closed sub-path). Inputs should come from
+ * {@link normalizeOutlinePair}; if lengths differ the shorter length is used.
+ *
+ * @param from The outgoing normalised polygon.
+ * @param to   The incoming normalised polygon.
+ * @param t    Interpolation parameter, clamped to [0, 1].
+ * @returns An SVG path `d` string for the intermediate outline.
+ */
+function interpolateOutline(from, to, t) {
+    const clamped = Math.max(0, Math.min(1, t));
+    const len = Math.min(from.length, to.length);
+    if (len === 0) {
+        return '';
+    }
+    const parts = [];
+    for (let i = 0; i < len; i++) {
+        const x = from[i].x + (to[i].x - from[i].x) * clamped;
+        const y = from[i].y + (to[i].y - from[i].y) * clamped;
+        parts.push(`${i === 0 ? 'M' : 'L'}${Number(x.toFixed(2))} ${Number(y.toFixed(2))}`);
+    }
+    parts.push('Z');
+    return parts.join(' ');
+}
+
+/** Number of intermediate keyframe stops baked into a geometry morph. */
+const GEOMETRY_MORPH_STEPS = 8;
+/**
+ * Decide whether a matched pair warrants geometry morphing rather than a plain
+ * crossfade. True when both elements carry a shape type and those types differ
+ * (or their adjustment outlines differ), since same-type same-adjustment shapes
+ * already morph correctly via the transform/scale animation.
+ *
+ * @param pair The matched element pair.
+ * @returns True when geometry interpolation should be applied.
+ */
+function shouldGeometryMorph(pair) {
+    const fromType = pair.fromElement.shapeType;
+    const toType = pair.toElement.shapeType;
+    if (!fromType || !toType) {
+        return false;
+    }
+    if (fromType.toLowerCase() !== toType.toLowerCase()) {
+        return true;
+    }
+    const fromAdj = JSON.stringify(pair.fromElement.shapeAdjustments ?? {});
+    const toAdj = JSON.stringify(pair.toElement.shapeAdjustments ?? {});
+    return fromAdj !== toAdj;
+}
+/** Build the per-stop `clip-path` keyframe body for an outline morph. */
+function buildClipKeyframeBody(from, to, steps) {
+    const [fromRing, toRing] = normalizeOutlinePair(resolveElementOutline(from), resolveElementOutline(to));
+    if (fromRing.length === 0 || toRing.length === 0) {
+        return null;
+    }
+    const lines = [];
+    for (let s = 0; s <= steps; s++) {
+        const t = s / steps;
+        const d = interpolateOutline(fromRing, toRing, t);
+        if (!d) {
+            return null;
+        }
+        const pct = Number(((s / steps) * 100).toFixed(2));
+        lines.push(`\t${pct}% {\n\t\tclip-path: path('${d}');\n\t}`);
+    }
+    return lines.join('\n');
+}
+/**
+ * Generate a `clip-path` geometry-morph animation for a matched pair whose
+ * shape outline changes. Returns null when the pair does not need geometry
+ * morphing or its outlines cannot be resolved.
+ *
+ * The emitted animation targets the incoming element id and is intended to run
+ * alongside the pair's transform/opacity animation, replacing the crossfade for
+ * shape-type changes with a true outline tween.
+ *
+ * @param pair       The matched element pair.
+ * @param durationMs Animation duration in milliseconds.
+ * @param pairIndex  Index of the pair for unique keyframe naming.
+ * @param steps      Number of baked stops (defaults to {@link GEOMETRY_MORPH_STEPS}).
+ * @returns A geometry-morph animation style, or null.
+ */
+function generateGeometryMorphAnimation(pair, durationMs, pairIndex, steps = GEOMETRY_MORPH_STEPS) {
+    if (!shouldGeometryMorph(pair)) {
+        return null;
+    }
+    const body = buildClipKeyframeBody(pair.fromElement, pair.toElement, steps);
+    if (!body) {
+        return null;
+    }
+    const safeName = `pptx-morph-geo-${pairIndex}-${pair.toElement.id.replace(/[^a-zA-Z0-9]/gu, '')}`;
+    const keyframes = `\n@keyframes ${safeName} {\n${body}\n}`;
+    return {
+        elementId: pair.toElement.id,
+        animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
+        keyframes,
+    };
+}
+
 // ---------------------------------------------------------------------------
 // Build colour/stroke interpolation keyframes
 // ---------------------------------------------------------------------------
@@ -20332,70 +21389,10 @@ function generateTextMorphAnimations(pair, durationMs, mode, pairIndex) {
     if (fromTokens.length === 0 && toTokens.length === 0) {
         return [];
     }
-    const tokenPairs = matchTextTokens(fromTokens, toTokens);
-    const animations = [];
-    for (let ti = 0; ti < tokenPairs.length; ti++) {
-        const tp = tokenPairs[ti];
-        const safeName = `pptx-morph-text-${pairIndex}-${ti}`;
-        if (tp.from && tp.to) {
-            // Matched token: animate position, size, color
-            const fromX = tp.from.x * 100;
-            const toX = tp.to.x * 100;
-            const fromColor = parseHexColor(tp.from.color);
-            const toColor = parseHexColor(tp.to.color);
-            const fromColorStr = fromColor ? lerpColor(fromColor, fromColor, 0) : tp.from.color;
-            const toColorStr = toColor ? lerpColor(toColor, toColor, 0) : tp.to.color;
-            const keyframes = `
-@keyframes ${safeName} {
-\tfrom {
-\t\tleft: ${fromX}%;
-\t\tfont-size: ${tp.from.fontSize}pt;
-\t\tfont-weight: ${tp.from.fontWeight};
-\t\tcolor: ${fromColorStr};
-\t\topacity: 1;
-\t}
-\tto {
-\t\tleft: ${toX}%;
-\t\tfont-size: ${tp.to.fontSize}pt;
-\t\tfont-weight: ${tp.to.fontWeight};
-\t\tcolor: ${toColorStr};
-\t\topacity: 1;
-\t}
-}`;
-            animations.push({
-                elementId: `${pair.toElement.id}__token_${ti}`,
-                animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
-                keyframes,
-            });
-        }
-        else if (tp.from && !tp.to) {
-            // Disappearing token: fade out
-            const keyframes = `
-@keyframes ${safeName} {
-\tfrom { opacity: 1; }
-\tto { opacity: 0; }
-}`;
-            animations.push({
-                elementId: `${pair.fromElement.id}__token_${ti}`,
-                animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
-                keyframes,
-            });
-        }
-        else if (!tp.from && tp.to) {
-            // Appearing token: fade in
-            const keyframes = `
-@keyframes ${safeName} {
-\tfrom { opacity: 0; }
-\tto { opacity: 1; }
-}`;
-            animations.push({
-                elementId: `${pair.toElement.id}__token_${ti}`,
-                animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
-                keyframes,
-            });
-        }
-    }
-    return animations;
+    // Order-preserving LCS diff: shared tokens slide/restyle between positions,
+    // added tokens fade in, removed tokens fade out (intelligent token morph).
+    const ops = diffTokens(fromTokens, toTokens);
+    return buildTokenMorphAnimations(ops, pair.fromElement.id, pair.toElement.id, durationMs, pairIndex);
 }
 // ---------------------------------------------------------------------------
 // Full morph transition orchestrator
@@ -20418,6 +21415,15 @@ function generateFullMorphTransition(fromSlide, toSlide, durationMs, mode = 'obj
     // Generate main element morph animations
     const pairAnims = generateMorphAnimations(matchResult.pairs, durationMs, mode);
     allAnimations.push(...pairAnims);
+    // Shape-geometry morph: for matched pairs whose shape outline changes
+    // (different shape type or adjustment outline), interpolate the resolved
+    // outlines instead of relying on a plain crossfade.
+    for (let i = 0; i < matchResult.pairs.length; i++) {
+        const geo = generateGeometryMorphAnimation(matchResult.pairs[i], durationMs, i);
+        if (geo) {
+            allAnimations.push(geo);
+        }
+    }
     // Generate text morph animations for text-bearing matched pairs
     if (mode === 'word' || mode === 'character') {
         for (let i = 0; i < matchResult.pairs.length; i++) {
@@ -25518,6 +26524,13 @@ function createTouchGestureRecognizer(config) {
     // Swipe state.
     let swipeStartX = 0;
     let swipeStartY = 0;
+    // Most recent single-finger position. Lets a swipe still be measured when
+    // `touchend` arrives with an empty `changedTouches` list (some synthetic
+    // dispatchers, e.g. CDP `Input.dispatchTouchEvent`, omit it). Real
+    // browsers always populate `changedTouches`, so their behaviour is
+    // unchanged.
+    let swipeLastX = 0;
+    let swipeLastY = 0;
     // Long-press state.
     let longPressTimer = null;
     let longPressStartX = 0;
@@ -25541,6 +26554,8 @@ function createTouchGestureRecognizer(config) {
             // Potential swipe or long-press.
             swipeStartX = e.touches[0].clientX;
             swipeStartY = e.touches[0].clientY;
+            swipeLastX = swipeStartX;
+            swipeLastY = swipeStartY;
             longPressStartX = e.touches[0].clientX;
             longPressStartY = e.touches[0].clientY;
             cancelLongPress();
@@ -25561,6 +26576,8 @@ function createTouchGestureRecognizer(config) {
             }
         }
         else if (e.touches.length === 1) {
+            swipeLastX = e.touches[0].clientX;
+            swipeLastY = e.touches[0].clientY;
             // Cancel the long-press if the finger moved too far.
             const dx = e.touches[0].clientX - longPressStartX;
             const dy = e.touches[0].clientY - longPressStartY;
@@ -25577,10 +26594,13 @@ function createTouchGestureRecognizer(config) {
             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;
+        // Detect a swipe from the touch that just ended, but only once every
+        // finger is up. Prefer the lifted touch's coordinates; fall back to the
+        // last tracked move position when `changedTouches` is empty (synthetic
+        // dispatchers), so a swipe is not silently dropped.
+        if (e.touches.length === 0) {
+            const endX = e.changedTouches.length >= 1 ? e.changedTouches[0].clientX : swipeLastX;
+            const endY = e.changedTouches.length >= 1 ? e.changedTouches[0].clientY : swipeLastY;
             const deltaX = endX - swipeStartX;
             const deltaY = endY - swipeStartY;
             if (Math.abs(deltaX) >= SWIPE_THRESHOLD_PX && Math.abs(deltaY) < SWIPE_MAX_VERTICAL_PX) {
@@ -33562,6 +34582,559 @@ function numberFromInput(event) {
     return Number.isFinite(parsed) ? parsed : null;
 }
 
+/**
+ * chart-advanced-helpers.ts: Pure immutable wrappers around the remaining
+ * advanced chart-editing core ops that `chart-data-helpers.ts` does not already
+ * expose (legend, chart-level data labels, axis scale/format edits, chart title,
+ * per-series trendlines/error bars, per-data-point label overrides).
+ *
+ * Each function clones the element's `chartData`, runs the in-place core op on
+ * the clone, and returns a new `ChartPptxElement` so the Angular editor's
+ * immutable contract (and clean history entries) is preserved. The heavy lifting
+ * lives in `pptx-viewer-core`; these are thin framework-agnostic adapters.
+ *
+ * @module angular-viewer/chart-advanced-helpers
+ */
+/** Apply an in-place core chart op to a deep clone of `element`. */
+function withClonedChart$1(element, mutate) {
+    if (!element.chartData) {
+        return element;
+    }
+    const clone = {
+        ...element,
+        chartData: structuredClone(element.chartData),
+    };
+    mutate(clone);
+    return clone;
+}
+// ---------------------------------------------------------------------------
+// Chart title
+// ---------------------------------------------------------------------------
+/** Set the chart title text. */
+function setTitle(element, title) {
+    return withClonedChart$1(element, (el) => setChartTitle(el, title));
+}
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+/** Show/hide the chart legend and/or set its position. */
+function setLegend(element, options) {
+    return withClonedChart$1(element, (el) => setChartLegend(el, options));
+}
+// ---------------------------------------------------------------------------
+// Chart-level data labels
+// ---------------------------------------------------------------------------
+/** Toggle chart-level data labels and set their content/position. */
+function setDataLabels(element, edit) {
+    return withClonedChart$1(element, (el) => setChartDataLabels(el, edit));
+}
+// ---------------------------------------------------------------------------
+// Axis scale / number format / gridline visibility / tick labels / units
+// ---------------------------------------------------------------------------
+/** Edit value/category axis formatting (min/max/units/format/gridlines/etc.). */
+function setAxis(element, axisType, edit) {
+    return withClonedChart$1(element, (el) => setChartAxis(el, axisType, edit));
+}
+// ---------------------------------------------------------------------------
+// Per-series trendlines / error bars
+// ---------------------------------------------------------------------------
+/** Set or clear the primary trendline on a series. */
+function setSeriesTrendline(element, seriesIndex, trendline) {
+    return withClonedChart$1(element, (el) => setChartSeriesTrendline(el, seriesIndex, trendline));
+}
+/** Set or clear the error bars on a series. */
+function setSeriesErrorBars(element, seriesIndex, errBars) {
+    return withClonedChart$1(element, (el) => setChartSeriesErrorBars(el, seriesIndex, errBars));
+}
+// ---------------------------------------------------------------------------
+// Per-data-point label overrides
+// ---------------------------------------------------------------------------
+/** Set or clear a single data point's label override. */
+function setDataPointLabel(element, seriesIndex, pointIndex, edit) {
+    return withClonedChart$1(element, (el) => setChartDataPointLabel(el, seriesIndex, pointIndex, edit));
+}
+
+/**
+ * chart-editor-styles.ts: Shared CSS string for the advanced chart-editor
+ * inspector control components. Each control component reuses the same
+ * `pptx-chart-card` look (heading, rows, inputs, swatches) so the panel reads
+ * as one cohesive section. Kept as a single exported template-literal so the
+ * styling lives in one place rather than being copy-pasted per component.
+ *
+ * @module angular-viewer/chart-editor-styles
+ */
+/** Shared styles for all chart-editor control components. */
+const CHART_EDITOR_STYLES = `
+	.pptx-chart-card {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+		padding: 0.5rem 0;
+		border-top: 1px solid var(--pptx-inspector-border, #333);
+	}
+
+	.pptx-chart-card__heading {
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--pptx-inspector-muted, #888);
+		margin: 0;
+	}
+
+	.pptx-chart-card__group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+	}
+
+	.pptx-chart-card__group--indent {
+		margin-left: 0.5rem;
+	}
+
+	.pptx-chart-card__subhead {
+		font-size: 11px;
+		font-weight: 600;
+	}
+
+	.pptx-chart-card__row {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-size: 11px;
+	}
+
+	.pptx-chart-card__label {
+		flex: 0 0 auto;
+		width: 5rem;
+		color: var(--pptx-inspector-muted, #888);
+	}
+
+	.pptx-chart-card__label--wide {
+		width: 6.5rem;
+	}
+
+	.pptx-chart-card__name {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.pptx-chart-card__check {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		font-size: 11px;
+		cursor: pointer;
+	}
+
+	.pptx-chart-card__input {
+		flex: 1 1 auto;
+		min-width: 0;
+		box-sizing: border-box;
+		padding: 2px 4px;
+		font-size: 11px;
+		background: var(--pptx-inspector-input-bg, #2d2d2d);
+		border: 1px solid var(--pptx-inspector-border, #444);
+		border-radius: 3px;
+		color: inherit;
+		outline: none;
+	}
+
+	.pptx-chart-card__input--num {
+		flex: 0 0 auto;
+		width: 4rem;
+		text-align: right;
+	}
+
+	.pptx-chart-card__input:focus {
+		border-color: var(--pptx-inspector-active, #0078d4);
+	}
+
+	.pptx-chart-card__input:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.pptx-chart-card__color {
+		flex: 0 0 auto;
+		width: 26px;
+		height: 20px;
+		padding: 0;
+		border: 1px solid var(--pptx-inspector-border, #444);
+		border-radius: 3px;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	.pptx-chart-card__color:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.pptx-chart-card__clear {
+		flex: 0 0 auto;
+		padding: 0 2px;
+		font-size: 12px;
+		line-height: 1;
+		background: none;
+		border: none;
+		color: var(--pptx-inspector-muted, #888);
+		cursor: pointer;
+	}
+
+	.pptx-chart-card__clear:hover {
+		color: var(--pptx-inspector-danger, #f47c7c);
+	}
+
+	.pptx-chart-card__input--num::-webkit-outer-spin-button,
+	.pptx-chart-card__input--num::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+`;
+
+/**
+ * chart-event-helpers.ts: Small typed DOM-event readers shared by the chart
+ * inspector control components. They narrow `event.target` to the right element
+ * type and pull the value out, returning `null` when the target is unexpected so
+ * callers can bail without firing a no-op edit.
+ *
+ * @module angular-viewer/chart-event-helpers
+ */
+/** Read the string value from an `<input>` or `<select>` change/input event. */
+function stringFromEvent$5(event) {
+    const target = event.target;
+    if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement) {
+        return target.value;
+    }
+    return null;
+}
+/** Read the value from a `<select>` change event. */
+function selectValue$1(event) {
+    const target = event.target;
+    return target instanceof HTMLSelectElement ? target.value : null;
+}
+/** Read the checked state from a checkbox `<input>` change event. */
+function boolFromEvent(event) {
+    const target = event.target;
+    return target instanceof HTMLInputElement ? target.checked : false;
+}
+/**
+ * Read a numeric value from an `<input type="number">`. Returns `null` for an
+ * empty field (a "clear the override" signal) and `undefined` for a non-finite
+ * entry (ignore). A finite parse returns the number.
+ */
+function numFromEvent(event) {
+    const raw = stringFromEvent$5(event);
+    if (raw === null || raw === '') {
+        return null;
+    }
+    const num = Number.parseFloat(raw);
+    return Number.isFinite(num) ? num : undefined;
+}
+
+/**
+ * chart-axis-options.component.ts: Per-axis scale + label formatting controls.
+ *
+ * Selector: `pptx-chart-axis-options`
+ *
+ * Mirrors React's `ChartAxisOptions.tsx`: for each axis present on the chart it
+ * exposes min/max/major-unit/minor-unit (scaled axes only), display units, axis
+ * title text, number format, tick-label position, and major/minor gridline
+ * visibility. Edits route through the headless `setChartAxis` core op (via the
+ * `setAxis` immutable wrapper) and emit a new `ChartPptxElement`.
+ *
+ * @module angular-viewer/chart-axis-options
+ */
+const AXIS_DEFS$1 = [
+    { type: 'valAx', label: 'Value axis', hasScale: true },
+    { type: 'dateAx', label: 'Date axis', hasScale: true },
+    { type: 'catAx', label: 'Category axis', hasScale: false },
+];
+/** Numeric scale fields, paired with their label, rendered for scaled axes. */
+const SCALE_FIELDS = [
+    { key: 'min', label: 'Minimum' },
+    { key: 'max', label: 'Maximum' },
+    { key: 'majorUnit', label: 'Major unit' },
+    { key: 'minorUnit', label: 'Minor unit' },
+];
+class ChartAxisOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    scaleFields = SCALE_FIELDS;
+    displayUnitOptions = DISPLAY_UNITS_OPTIONS;
+    tickPositionOptions = TICK_LABEL_POSITION_OPTIONS;
+    /** Only the axes that actually exist on the chart (pie charts have none). */
+    rows = computed(() => {
+        const axes = this.element().chartData?.axes ?? [];
+        const result = [];
+        for (const def of AXIS_DEFS$1) {
+            const axis = axes.find((a) => a.axisType === def.type);
+            if (axis) {
+                result.push({ ...def, axis });
+            }
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    numValue(axis, key) {
+        const value = axis[key];
+        return value === undefined ? '' : String(value);
+    }
+    onScaleField(axisType, key, event) {
+        const num = numFromEvent(event);
+        if (num === undefined) {
+            return;
+        }
+        this.emit(axisType, { [key]: num });
+    }
+    onDisplayUnits(axisType, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.emit(axisType, {
+            displayUnits: (value || null),
+        });
+    }
+    onTitleText(axisType, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.emit(axisType, { title: value });
+    }
+    onNumberFormat(axisType, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.emit(axisType, { numberFormat: value });
+    }
+    onTickPosition(axisType, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.emit(axisType, { tickLabelPosition: value });
+    }
+    onGridlines(axisType, which, event) {
+        const checked = boolFromEvent(event);
+        this.emit(axisType, which === 'major' ? { majorGridlines: checked } : { minorGridlines: checked });
+    }
+    emit(axisType, edit) {
+        this.elementChange.emit(setAxis(this.element(), axisType, edit));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartAxisOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartAxisOptionsComponent, isStandalone: true, selector: "pptx-chart-axis-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (rows().length > 0) {
+			<section class="pptx-chart-card" aria-label="Axis options">
+				<h4 class="pptx-chart-card__heading">Axes</h4>
+				@for (row of rows(); track row.type) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__subhead">{{ row.label }}</div>
+						<div class="pptx-chart-card__group pptx-chart-card__group--indent">
+							@if (row.hasScale) {
+								@for (field of scaleFields; track field.key) {
+									<label class="pptx-chart-card__row">
+										<span class="pptx-chart-card__label">{{ field.label }}</span>
+										<input
+											type="number"
+											class="pptx-chart-card__input"
+											placeholder="Auto"
+											[disabled]="!canEdit()"
+											[value]="numValue(row.axis, field.key)"
+											(change)="onScaleField(row.type, field.key, $event)"
+										/>
+									</label>
+								}
+								<label class="pptx-chart-card__row">
+									<span class="pptx-chart-card__label">Display units</span>
+									<select
+										class="pptx-chart-card__input"
+										[disabled]="!canEdit()"
+										[value]="row.axis.displayUnits ?? ''"
+										(change)="onDisplayUnits(row.type, $event)"
+									>
+										@for (opt of displayUnitOptions; track opt.value) {
+											<option [value]="opt.value">{{ opt.label }}</option>
+										}
+									</select>
+								</label>
+							}
+
+							<label class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Axis title</span>
+								<input
+									type="text"
+									class="pptx-chart-card__input"
+									placeholder="Axis title"
+									[disabled]="!canEdit()"
+									[value]="row.axis.titleText ?? ''"
+									(change)="onTitleText(row.type, $event)"
+								/>
+							</label>
+
+							<label class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Number format</span>
+								<input
+									type="text"
+									class="pptx-chart-card__input"
+									placeholder="General"
+									[disabled]="!canEdit()"
+									[value]="row.axis.numFmt?.formatCode ?? ''"
+									(change)="onNumberFormat(row.type, $event)"
+								/>
+							</label>
+
+							<label class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Tick labels</span>
+								<select
+									class="pptx-chart-card__input"
+									[disabled]="!canEdit()"
+									[value]="row.axis.tickLblPos ?? 'nextTo'"
+									(change)="onTickPosition(row.type, $event)"
+								>
+									@for (opt of tickPositionOptions; track opt.value) {
+										<option [value]="opt.value">{{ opt.label }}</option>
+									}
+								</select>
+							</label>
+
+							<label class="pptx-chart-card__check">
+								<input
+									type="checkbox"
+									[disabled]="!canEdit()"
+									[checked]="row.axis.majorGridlines ?? false"
+									(change)="onGridlines(row.type, 'major', $event)"
+								/>
+								<span>Major gridlines</span>
+							</label>
+							<label class="pptx-chart-card__check">
+								<input
+									type="checkbox"
+									[disabled]="!canEdit()"
+									[checked]="row.axis.minorGridlines ?? false"
+									(change)="onGridlines(row.type, 'minor', $event)"
+								/>
+								<span>Minor gridlines</span>
+							</label>
+						</div>
+					</div>
+				}
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartAxisOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-axis-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (rows().length > 0) {
+			<section class="pptx-chart-card" aria-label="Axis options">
+				<h4 class="pptx-chart-card__heading">Axes</h4>
+				@for (row of rows(); track row.type) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__subhead">{{ row.label }}</div>
+						<div class="pptx-chart-card__group pptx-chart-card__group--indent">
+							@if (row.hasScale) {
+								@for (field of scaleFields; track field.key) {
+									<label class="pptx-chart-card__row">
+										<span class="pptx-chart-card__label">{{ field.label }}</span>
+										<input
+											type="number"
+											class="pptx-chart-card__input"
+											placeholder="Auto"
+											[disabled]="!canEdit()"
+											[value]="numValue(row.axis, field.key)"
+											(change)="onScaleField(row.type, field.key, $event)"
+										/>
+									</label>
+								}
+								<label class="pptx-chart-card__row">
+									<span class="pptx-chart-card__label">Display units</span>
+									<select
+										class="pptx-chart-card__input"
+										[disabled]="!canEdit()"
+										[value]="row.axis.displayUnits ?? ''"
+										(change)="onDisplayUnits(row.type, $event)"
+									>
+										@for (opt of displayUnitOptions; track opt.value) {
+											<option [value]="opt.value">{{ opt.label }}</option>
+										}
+									</select>
+								</label>
+							}
+
+							<label class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Axis title</span>
+								<input
+									type="text"
+									class="pptx-chart-card__input"
+									placeholder="Axis title"
+									[disabled]="!canEdit()"
+									[value]="row.axis.titleText ?? ''"
+									(change)="onTitleText(row.type, $event)"
+								/>
+							</label>
+
+							<label class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Number format</span>
+								<input
+									type="text"
+									class="pptx-chart-card__input"
+									placeholder="General"
+									[disabled]="!canEdit()"
+									[value]="row.axis.numFmt?.formatCode ?? ''"
+									(change)="onNumberFormat(row.type, $event)"
+								/>
+							</label>
+
+							<label class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Tick labels</span>
+								<select
+									class="pptx-chart-card__input"
+									[disabled]="!canEdit()"
+									[value]="row.axis.tickLblPos ?? 'nextTo'"
+									(change)="onTickPosition(row.type, $event)"
+								>
+									@for (opt of tickPositionOptions; track opt.value) {
+										<option [value]="opt.value">{{ opt.label }}</option>
+									}
+								</select>
+							</label>
+
+							<label class="pptx-chart-card__check">
+								<input
+									type="checkbox"
+									[disabled]="!canEdit()"
+									[checked]="row.axis.majorGridlines ?? false"
+									(change)="onGridlines(row.type, 'major', $event)"
+								/>
+								<span>Major gridlines</span>
+							</label>
+							<label class="pptx-chart-card__check">
+								<input
+									type="checkbox"
+									[disabled]="!canEdit()"
+									[checked]="row.axis.minorGridlines ?? false"
+									(change)="onGridlines(row.type, 'minor', $event)"
+								/>
+								<span>Minor gridlines</span>
+							</label>
+						</div>
+					</div>
+				}
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
 /**
  * chart-data-helpers.ts: Pure immutable helpers for chart data editing.
  *
@@ -33743,162 +35316,1696 @@ function removeCategory(element, catIndex) {
  * Update a single numeric value in a chart series, returning a new
  * `ChartPptxElement`.
  *
- * Parses `rawValue` as a float.  When the parsed value is not finite, the
- * element is returned unchanged.
+ * Parses `rawValue` as a float.  When the parsed value is not finite, the
+ * element is returned unchanged.
+ *
+ * @param element - The source chart element (not mutated).
+ * @param seriesIndex - Zero-based series index.
+ * @param catIndex - Zero-based category (point) index.
+ * @param rawValue - The new value as a string (from an `<input type="number">`).
+ * @returns A new `ChartPptxElement`, or the original when the value is invalid.
+ *
+ * @example
+ * ```ts
+ * const updated = setSeriesValue(el, 0, 2, "42.5");
+ * ```
+ */
+function setSeriesValue(element, seriesIndex, catIndex, rawValue) {
+    const chartData = element.chartData;
+    if (!chartData) {
+        return element;
+    }
+    const num = parseFloat(rawValue);
+    if (!Number.isFinite(num)) {
+        return element;
+    }
+    return { ...element, chartData: chartDataUpdatePoint(chartData, seriesIndex, catIndex, num) };
+}
+// ---------------------------------------------------------------------------
+// setSeriesName
+// ---------------------------------------------------------------------------
+/**
+ * Rename a series in a `ChartPptxElement`, returning a new element.
+ *
+ * @param element - The source chart element (not mutated).
+ * @param seriesIndex - Zero-based index of the series to rename.
+ * @param name - The new series name.
+ * @returns A new `ChartPptxElement`.
+ *
+ * @example
+ * ```ts
+ * const updated = setSeriesName(el, 0, "Revenue");
+ * ```
+ */
+function setSeriesName(element, seriesIndex, name) {
+    const chartData = element.chartData;
+    if (!chartData) {
+        return element;
+    }
+    const series = chartData.series.map((s, i) => (i === seriesIndex ? { ...s, name } : s));
+    return { ...element, chartData: { ...chartData, series } };
+}
+// ---------------------------------------------------------------------------
+// setCategoryLabel
+// ---------------------------------------------------------------------------
+/**
+ * Rename a category label in a `ChartPptxElement`, returning a new element.
+ *
+ * @param element - The source chart element (not mutated).
+ * @param catIndex - Zero-based index of the category to rename.
+ * @param label - The new label text.
+ * @returns A new `ChartPptxElement`.
+ *
+ * @example
+ * ```ts
+ * const updated = setCategoryLabel(el, 0, "Q1 2025");
+ * ```
+ */
+function setCategoryLabel(element, catIndex, label) {
+    const chartData = element.chartData;
+    if (!chartData) {
+        return element;
+    }
+    const categories = chartData.categories.map((c, i) => (i === catIndex ? label : c));
+    return { ...element, chartData: { ...chartData, categories } };
+}
+// ---------------------------------------------------------------------------
+// setSeriesColor
+// ---------------------------------------------------------------------------
+/**
+ * Set (or clear) the solid fill colour of a chart series, returning a new
+ * `ChartPptxElement`. Pass a hex string (`#RRGGBB` or `RRGGBB`) to set the
+ * colour, or `null` to clear it so the series falls back to its theme colour.
+ *
+ * Mirrors the headless `setChartSeriesColor` SDK op (which mutates in place)
+ * with an immutable element-level wrapper for the inspector.
+ *
+ * @param element - The source chart element (not mutated).
+ * @param seriesIndex - Zero-based index of the series to recolour.
+ * @param color - Hex colour string, or `null` to clear.
+ * @returns A new `ChartPptxElement`.
+ *
+ * @example
+ * ```ts
+ * const updated = setSeriesColor(el, 0, "#4472C4");
+ * ```
+ */
+function setSeriesColor(element, seriesIndex, color) {
+    const chartData = element.chartData;
+    if (!chartData) {
+        return element;
+    }
+    const normalized = color ? normalizeHex(color) : undefined;
+    const series = chartData.series.map((s, i) => (i === seriesIndex ? { ...s, color: normalized } : s));
+    return { ...element, chartData: { ...chartData, series } };
+}
+/** Normalise a hex colour to a `#`-prefixed form, trimming whitespace. */
+function normalizeHex(color) {
+    const trimmed = color.trim();
+    return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+}
+// ---------------------------------------------------------------------------
+// patchChartStyle
+// ---------------------------------------------------------------------------
+/**
+ * Merge a `Partial<PptxChartStyle>` patch into a `ChartPptxElement`,
+ * returning a new element.
+ *
+ * @param element - The source chart element (not mutated).
+ * @param patch - Style fields to merge.
+ * @returns A new `ChartPptxElement`.
+ */
+function patchChartStyle(element, patch) {
+    const chartData = element.chartData;
+    if (!chartData) {
+        return element;
+    }
+    return {
+        ...element,
+        chartData: { ...chartData, style: { ...chartData.style, ...patch } },
+    };
+}
+// ---------------------------------------------------------------------------
+// patchChartData
+// ---------------------------------------------------------------------------
+/**
+ * Merge a `Partial<PptxChartData>` patch into a `ChartPptxElement`.
+ *
+ * When the patch contains a `chartType` change, the smart
+ * `chartDataChangeType` helper is used so grouping and category formats
+ * are adapted automatically.
+ *
+ * @param element - The source chart element (not mutated).
+ * @param patch - Chart data fields to merge.
+ * @returns A new `ChartPptxElement`.
+ */
+function patchChartData(element, patch) {
+    const chartData = element.chartData;
+    if (!chartData) {
+        return element;
+    }
+    if (patch.chartType && patch.chartType !== chartData.chartType) {
+        const adapted = chartDataChangeType(chartData, patch.chartType);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { chartType: _ct, ...rest } = patch;
+        return { ...element, chartData: { ...adapted, ...rest } };
+    }
+    return { ...element, chartData: { ...chartData, ...patch } };
+}
+
+/**
+ * chart-axis-style-options.component.ts: Per-axis log scaling, title font, and
+ * gridline line styling.
+ *
+ * Selector: `pptx-chart-axis-style-options`
+ *
+ * Mirrors React's `ChartAxisStyleOptions.tsx`: logarithmic scale (value/date
+ * axes) with a base, axis-title font family/size/bold/colour, and major/minor
+ * gridline colour/width/dash styling (shown only when the matching gridlines are
+ * enabled). Routes through `setAxisLogScale` / `setAxisTitleStyle` /
+ * `setGridlineStyle` and emits a new `ChartPptxElement`.
+ *
+ * @module angular-viewer/chart-axis-style-options
+ */
+const AXIS_DEFS = [
+    { type: 'valAx', label: 'Value axis', hasScale: true },
+    { type: 'dateAx', label: 'Date axis', hasScale: true },
+    { type: 'catAx', label: 'Category axis', hasScale: false },
+];
+class ChartAxisStyleOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    dashOptions = GRIDLINE_DASH_OPTIONS;
+    gridlineKinds = ['major', 'minor'];
+    rows = computed(() => {
+        const axes = this.element().chartData?.axes ?? [];
+        const result = [];
+        for (const def of AXIS_DEFS) {
+            const axis = axes.find((a) => a.axisType === def.type);
+            if (axis) {
+                result.push({ ...def, axis });
+            }
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    gridlineEnabled(axis, which) {
+        return which === 'major' ? (axis.majorGridlines ?? false) : (axis.minorGridlines ?? false);
+    }
+    gridlineSpPr(axis, which) {
+        return which === 'major' ? axis.majorGridlinesSpPr : axis.minorGridlinesSpPr;
+    }
+    onLogScale(axisType, axis, event) {
+        this.elementChange.emit(setAxisLogScale(this.element(), axisType, {
+            enabled: boolFromEvent(event),
+            base: axis.logBase,
+        }));
+    }
+    onLogBase(axisType, event) {
+        const num = numFromEvent(event);
+        if (typeof num !== 'number' || num <= 1) {
+            return;
+        }
+        this.elementChange.emit(setAxisLogScale(this.element(), axisType, { enabled: true, base: num }));
+    }
+    onTitleFont(axisType, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setAxisTitleStyle(this.element(), axisType, { fontFamily: value || null }));
+    }
+    onTitleSize(axisType, event) {
+        const num = numFromEvent(event);
+        if (num === undefined) {
+            return;
+        }
+        this.elementChange.emit(setAxisTitleStyle(this.element(), axisType, { fontSize: num }));
+    }
+    onTitleBold(axisType, event) {
+        this.elementChange.emit(setAxisTitleStyle(this.element(), axisType, { fontBold: boolFromEvent(event) }));
+    }
+    onTitleColor(axisType, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setAxisTitleStyle(this.element(), axisType, { fontColor: value }));
+    }
+    onGridlineColor(axisType, which, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setGridlineStyle(this.element(), axisType, which, { color: value }));
+    }
+    onGridlineWidth(axisType, which, event) {
+        const num = numFromEvent(event);
+        if (num === undefined) {
+            return;
+        }
+        this.elementChange.emit(setGridlineStyle(this.element(), axisType, which, { width: num }));
+    }
+    onGridlineDash(axisType, which, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setGridlineStyle(this.element(), axisType, which, { dashStyle: value || null }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartAxisStyleOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartAxisStyleOptionsComponent, isStandalone: true, selector: "pptx-chart-axis-style-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (rows().length > 0) {
+			<section class="pptx-chart-card" aria-label="Axis styling">
+				<h4 class="pptx-chart-card__heading">Axis Styling</h4>
+				@for (row of rows(); track row.type) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__subhead">{{ row.label }}</div>
+						<div class="pptx-chart-card__group pptx-chart-card__group--indent">
+							@if (row.hasScale) {
+								<div class="pptx-chart-card__row">
+									<label class="pptx-chart-card__check">
+										<input
+											type="checkbox"
+											[disabled]="!canEdit()"
+											[checked]="row.axis.logScale ?? false"
+											(change)="onLogScale(row.type, row.axis, $event)"
+										/>
+										<span>Logarithmic scale</span>
+									</label>
+									@if (row.axis.logScale) {
+										<input
+											type="number"
+											min="2"
+											class="pptx-chart-card__input pptx-chart-card__input--num"
+											title="Log base"
+											[disabled]="!canEdit()"
+											[value]="row.axis.logBase ?? 10"
+											(change)="onLogBase(row.type, $event)"
+										/>
+									}
+								</div>
+							}
+
+							<div class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Title font</span>
+								<input
+									type="text"
+									class="pptx-chart-card__input"
+									placeholder="Auto"
+									[disabled]="!canEdit()"
+									[value]="row.axis.fontFamily ?? ''"
+									(change)="onTitleFont(row.type, $event)"
+								/>
+								<input
+									type="number"
+									min="4"
+									max="96"
+									class="pptx-chart-card__input pptx-chart-card__input--num"
+									title="Font size"
+									placeholder="Auto"
+									[disabled]="!canEdit()"
+									[value]="row.axis.fontSize ?? ''"
+									(change)="onTitleSize(row.type, $event)"
+								/>
+							</div>
+							<div class="pptx-chart-card__row">
+								<label class="pptx-chart-card__check">
+									<input
+										type="checkbox"
+										[disabled]="!canEdit()"
+										[checked]="row.axis.fontBold ?? false"
+										(change)="onTitleBold(row.type, $event)"
+									/>
+									<span>Bold</span>
+								</label>
+								<span class="pptx-chart-card__label">Colour</span>
+								<input
+									type="color"
+									class="pptx-chart-card__color"
+									[disabled]="!canEdit()"
+									[value]="row.axis.fontColor ?? '#000000'"
+									(input)="onTitleColor(row.type, $event)"
+								/>
+							</div>
+
+							@for (which of gridlineKinds; track which) {
+								@if (gridlineEnabled(row.axis, which)) {
+									<div class="pptx-chart-card__row">
+										<span class="pptx-chart-card__label">
+											{{ which === 'major' ? 'Major lines' : 'Minor lines' }}
+										</span>
+										<input
+											type="color"
+											class="pptx-chart-card__color"
+											title="Gridline colour"
+											[disabled]="!canEdit()"
+											[value]="gridlineSpPr(row.axis, which)?.strokeColor ?? '#d9d9d9'"
+											(input)="onGridlineColor(row.type, which, $event)"
+										/>
+										<input
+											type="number"
+											min="0.25"
+											step="0.25"
+											class="pptx-chart-card__input pptx-chart-card__input--num"
+											title="Gridline width"
+											placeholder="Auto"
+											[disabled]="!canEdit()"
+											[value]="gridlineSpPr(row.axis, which)?.strokeWidth ?? ''"
+											(change)="onGridlineWidth(row.type, which, $event)"
+										/>
+										<select
+											class="pptx-chart-card__input"
+											title="Gridline dash"
+											[disabled]="!canEdit()"
+											[value]="gridlineSpPr(row.axis, which)?.strokeDashStyle ?? ''"
+											(change)="onGridlineDash(row.type, which, $event)"
+										>
+											@for (opt of dashOptions; track opt.value) {
+												<option [value]="opt.value">{{ opt.label }}</option>
+											}
+										</select>
+									</div>
+								}
+							}
+						</div>
+					</div>
+				}
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartAxisStyleOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-axis-style-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (rows().length > 0) {
+			<section class="pptx-chart-card" aria-label="Axis styling">
+				<h4 class="pptx-chart-card__heading">Axis Styling</h4>
+				@for (row of rows(); track row.type) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__subhead">{{ row.label }}</div>
+						<div class="pptx-chart-card__group pptx-chart-card__group--indent">
+							@if (row.hasScale) {
+								<div class="pptx-chart-card__row">
+									<label class="pptx-chart-card__check">
+										<input
+											type="checkbox"
+											[disabled]="!canEdit()"
+											[checked]="row.axis.logScale ?? false"
+											(change)="onLogScale(row.type, row.axis, $event)"
+										/>
+										<span>Logarithmic scale</span>
+									</label>
+									@if (row.axis.logScale) {
+										<input
+											type="number"
+											min="2"
+											class="pptx-chart-card__input pptx-chart-card__input--num"
+											title="Log base"
+											[disabled]="!canEdit()"
+											[value]="row.axis.logBase ?? 10"
+											(change)="onLogBase(row.type, $event)"
+										/>
+									}
+								</div>
+							}
+
+							<div class="pptx-chart-card__row">
+								<span class="pptx-chart-card__label">Title font</span>
+								<input
+									type="text"
+									class="pptx-chart-card__input"
+									placeholder="Auto"
+									[disabled]="!canEdit()"
+									[value]="row.axis.fontFamily ?? ''"
+									(change)="onTitleFont(row.type, $event)"
+								/>
+								<input
+									type="number"
+									min="4"
+									max="96"
+									class="pptx-chart-card__input pptx-chart-card__input--num"
+									title="Font size"
+									placeholder="Auto"
+									[disabled]="!canEdit()"
+									[value]="row.axis.fontSize ?? ''"
+									(change)="onTitleSize(row.type, $event)"
+								/>
+							</div>
+							<div class="pptx-chart-card__row">
+								<label class="pptx-chart-card__check">
+									<input
+										type="checkbox"
+										[disabled]="!canEdit()"
+										[checked]="row.axis.fontBold ?? false"
+										(change)="onTitleBold(row.type, $event)"
+									/>
+									<span>Bold</span>
+								</label>
+								<span class="pptx-chart-card__label">Colour</span>
+								<input
+									type="color"
+									class="pptx-chart-card__color"
+									[disabled]="!canEdit()"
+									[value]="row.axis.fontColor ?? '#000000'"
+									(input)="onTitleColor(row.type, $event)"
+								/>
+							</div>
+
+							@for (which of gridlineKinds; track which) {
+								@if (gridlineEnabled(row.axis, which)) {
+									<div class="pptx-chart-card__row">
+										<span class="pptx-chart-card__label">
+											{{ which === 'major' ? 'Major lines' : 'Minor lines' }}
+										</span>
+										<input
+											type="color"
+											class="pptx-chart-card__color"
+											title="Gridline colour"
+											[disabled]="!canEdit()"
+											[value]="gridlineSpPr(row.axis, which)?.strokeColor ?? '#d9d9d9'"
+											(input)="onGridlineColor(row.type, which, $event)"
+										/>
+										<input
+											type="number"
+											min="0.25"
+											step="0.25"
+											class="pptx-chart-card__input pptx-chart-card__input--num"
+											title="Gridline width"
+											placeholder="Auto"
+											[disabled]="!canEdit()"
+											[value]="gridlineSpPr(row.axis, which)?.strokeWidth ?? ''"
+											(change)="onGridlineWidth(row.type, which, $event)"
+										/>
+										<select
+											class="pptx-chart-card__input"
+											title="Gridline dash"
+											[disabled]="!canEdit()"
+											[value]="gridlineSpPr(row.axis, which)?.strokeDashStyle ?? ''"
+											(change)="onGridlineDash(row.type, which, $event)"
+										>
+											@for (opt of dashOptions; track opt.value) {
+												<option [value]="opt.value">{{ opt.label }}</option>
+											}
+										</select>
+									</div>
+								}
+							}
+						</div>
+					</div>
+				}
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
+/**
+ * chart-combo-type-options.component.ts: Per-series combo chart-type controls.
+ *
+ * Selector: `pptx-chart-combo-type-options`
+ *
+ * Mirrors React's `ChartComboTypeOptions.tsx`: for cartesian charts (and existing
+ * combos) with 2+ series, each series gets a chart-type selector so it can be
+ * plotted with a different type (e.g. a line series inside a bar chart). Routes
+ * through the `setSeriesChartType` immutable wrapper and emits a new
+ * `ChartPptxElement`.
+ *
+ * @module angular-viewer/chart-combo-type-options
+ */
+class ChartComboTypeOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    typeOptions = COMBO_SERIES_TYPE_OPTIONS;
+    series = computed(() => this.element().chartData?.series ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    supported = computed(() => {
+        const type = this.element().chartData?.chartType;
+        return type !== undefined && COMBO_SUPPORTED_TYPES.has(type) && this.series().length >= 2;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supported" }] : /* istanbul ignore next */ []));
+    onType(index, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setSeriesChartType(this.element(), index, value === '' ? null : value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartComboTypeOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartComboTypeOptionsComponent, isStandalone: true, selector: "pptx-chart-combo-type-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Combo type options">
+				<h4 class="pptx-chart-card__heading">Combo Types</h4>
+				<div class="pptx-chart-card__group">
+					@for (s of series(); track $index; let i = $index) {
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="s.seriesChartType ?? ''"
+								(change)="onType(i, $event)"
+							>
+								@for (opt of typeOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+					}
+				</div>
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartComboTypeOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-combo-type-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Combo type options">
+				<h4 class="pptx-chart-card__heading">Combo Types</h4>
+				<div class="pptx-chart-card__group">
+					@for (s of series(); track $index; let i = $index) {
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="s.seriesChartType ?? ''"
+								(change)="onType(i, $event)"
+							>
+								@for (opt of typeOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+					}
+				</div>
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
+/**
+ * chart-data-label-options.component.ts: Chart-level data-label content +
+ * position controls.
+ *
+ * Selector: `pptx-chart-data-label-options`
+ *
+ * Mirrors React's `ChartDataLabelOptions.tsx`: only renders when data labels are
+ * switched on (the master toggle lives in `pptx-chart-display-options`). Lets the
+ * user pick which content appears (value/category/series name/percent/legend key)
+ * and the label position. Emits a complete new `ChartPptxElement`.
+ *
+ * @module angular-viewer/chart-data-label-options
+ */
+class ChartDataLabelOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    contentOptions = DATA_LABEL_CONTENT_OPTIONS;
+    positionOptions = DATA_LABEL_POSITION_OPTIONS;
+    style = computed(() => this.element().chartData?.style ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    labels = computed(() => this.style().dataLabels ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    onToggleContent(key, event) {
+        this.elementChange.emit(setDataLabels(this.element(), { [key]: boolFromEvent(event) }));
+    }
+    onPosition(event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setDataLabels(this.element(), {
+            position: (value || undefined),
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDataLabelOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartDataLabelOptionsComponent, isStandalone: true, selector: "pptx-chart-data-label-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (style().hasDataLabels) {
+			<section class="pptx-chart-card" aria-label="Data label options">
+				<h4 class="pptx-chart-card__heading">Data Labels</h4>
+				<div class="pptx-chart-card__group">
+					@for (opt of contentOptions; track opt.key) {
+						<label class="pptx-chart-card__check">
+							<input
+								type="checkbox"
+								[disabled]="!canEdit()"
+								[checked]="labels()[opt.key] ?? false"
+								(change)="onToggleContent(opt.key, $event)"
+							/>
+							<span>{{ opt.label }}</span>
+						</label>
+					}
+
+					<label class="pptx-chart-card__row">
+						<span class="pptx-chart-card__label">Position</span>
+						<select
+							class="pptx-chart-card__input"
+							[disabled]="!canEdit()"
+							[value]="labels().position ?? ''"
+							(change)="onPosition($event)"
+						>
+							@for (opt of positionOptions; track opt.value) {
+								<option [value]="opt.value">{{ opt.label }}</option>
+							}
+						</select>
+					</label>
+				</div>
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDataLabelOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-data-label-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (style().hasDataLabels) {
+			<section class="pptx-chart-card" aria-label="Data label options">
+				<h4 class="pptx-chart-card__heading">Data Labels</h4>
+				<div class="pptx-chart-card__group">
+					@for (opt of contentOptions; track opt.key) {
+						<label class="pptx-chart-card__check">
+							<input
+								type="checkbox"
+								[disabled]="!canEdit()"
+								[checked]="labels()[opt.key] ?? false"
+								(change)="onToggleContent(opt.key, $event)"
+							/>
+							<span>{{ opt.label }}</span>
+						</label>
+					}
+
+					<label class="pptx-chart-card__row">
+						<span class="pptx-chart-card__label">Position</span>
+						<select
+							class="pptx-chart-card__input"
+							[disabled]="!canEdit()"
+							[value]="labels().position ?? ''"
+							(change)="onPosition($event)"
+						>
+							@for (opt of positionOptions; track opt.value) {
+								<option [value]="opt.value">{{ opt.label }}</option>
+							}
+						</select>
+					</label>
+				</div>
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
+/**
+ * chart-datapoint-options.component.ts: Per-data-point fill + slice explosion.
+ *
+ * Selector: `pptx-chart-datapoint-options`
+ *
+ * Mirrors React's `ChartDataPointOptions.tsx`: a series picker (per-point edits
+ * target one series at a time) and, per category, a fill-colour override (with a
+ * clear button) plus a pie/doughnut slice-explosion amount for the chart types
+ * that support it. Routes through `setDataPointFill` / `setDataPointExplosion`
+ * and emits a new `ChartPptxElement`.
+ *
+ * @module angular-viewer/chart-datapoint-options
+ */
+class ChartDatapointOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    seriesIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesIndex" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.element().chartData?.series ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    categories = computed(() => this.element().chartData?.categories ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    /** Clamp the chosen series index to the current series count. */
+    activeIndex = computed(() => Math.min(this.seriesIndex(), Math.max(0, this.series().length - 1)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    showExplosion = computed(() => {
+        const type = this.element().chartData?.chartType;
+        return type !== undefined && EXPLOSION_SUPPORTED_TYPES.has(type);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showExplosion" }] : /* istanbul ignore next */ []));
+    pointAt(pointIndex) {
+        return this.series()[this.activeIndex()]?.dataPoints?.find((p) => p.idx === pointIndex);
+    }
+    pointFill(pointIndex) {
+        const active = this.series()[this.activeIndex()];
+        return this.pointAt(pointIndex)?.spPr?.fillColor ?? active?.color ?? '#4472c4';
+    }
+    onSeries(event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        const num = Number.parseInt(value, 10);
+        if (Number.isFinite(num)) {
+            this.seriesIndex.set(num);
+        }
+    }
+    onFill(pointIndex, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setDataPointFill(this.element(), this.activeIndex(), pointIndex, value));
+    }
+    onClearFill(pointIndex) {
+        this.elementChange.emit(setDataPointFill(this.element(), this.activeIndex(), pointIndex, null));
+    }
+    onExplosion(pointIndex, event) {
+        const num = numFromEvent(event);
+        if (num === undefined) {
+            return;
+        }
+        this.elementChange.emit(setDataPointExplosion(this.element(), this.activeIndex(), pointIndex, num));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDatapointOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartDatapointOptionsComponent, isStandalone: true, selector: "pptx-chart-datapoint-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (categories().length > 0 && series().length > 0) {
+			<section class="pptx-chart-card" aria-label="Data point options">
+				<h4 class="pptx-chart-card__heading">Data Points</h4>
+
+				@if (series().length > 1) {
+					<label class="pptx-chart-card__row">
+						<span class="pptx-chart-card__label">Series</span>
+						<select
+							class="pptx-chart-card__input"
+							[disabled]="!canEdit()"
+							[value]="activeIndex()"
+							(change)="onSeries($event)"
+						>
+							@for (s of series(); track $index; let i = $index) {
+								<option [value]="i">{{ s.name }}</option>
+							}
+						</select>
+					</label>
+				}
+
+				<div class="pptx-chart-card__group">
+					@for (cat of categories(); track $index; let ci = $index) {
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="cat">{{ cat }}</span>
+							<input
+								type="color"
+								class="pptx-chart-card__color"
+								title="Point fill"
+								[disabled]="!canEdit()"
+								[value]="pointFill(ci)"
+								(input)="onFill(ci, $event)"
+							/>
+							@if (pointAt(ci)?.spPr?.fillColor) {
+								<button
+									type="button"
+									class="pptx-chart-card__clear"
+									title="Clear point fill"
+									[disabled]="!canEdit()"
+									(click)="onClearFill(ci)"
+								>
+									&times;
+								</button>
+							}
+							@if (showExplosion()) {
+								<input
+									type="number"
+									min="0"
+									max="100"
+									class="pptx-chart-card__input pptx-chart-card__input--num"
+									title="Slice explosion"
+									placeholder="0"
+									[disabled]="!canEdit()"
+									[value]="pointAt(ci)?.explosion ?? ''"
+									(change)="onExplosion(ci, $event)"
+								/>
+							}
+						</div>
+					}
+				</div>
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDatapointOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-datapoint-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (categories().length > 0 && series().length > 0) {
+			<section class="pptx-chart-card" aria-label="Data point options">
+				<h4 class="pptx-chart-card__heading">Data Points</h4>
+
+				@if (series().length > 1) {
+					<label class="pptx-chart-card__row">
+						<span class="pptx-chart-card__label">Series</span>
+						<select
+							class="pptx-chart-card__input"
+							[disabled]="!canEdit()"
+							[value]="activeIndex()"
+							(change)="onSeries($event)"
+						>
+							@for (s of series(); track $index; let i = $index) {
+								<option [value]="i">{{ s.name }}</option>
+							}
+						</select>
+					</label>
+				}
+
+				<div class="pptx-chart-card__group">
+					@for (cat of categories(); track $index; let ci = $index) {
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="cat">{{ cat }}</span>
+							<input
+								type="color"
+								class="pptx-chart-card__color"
+								title="Point fill"
+								[disabled]="!canEdit()"
+								[value]="pointFill(ci)"
+								(input)="onFill(ci, $event)"
+							/>
+							@if (pointAt(ci)?.spPr?.fillColor) {
+								<button
+									type="button"
+									class="pptx-chart-card__clear"
+									title="Clear point fill"
+									[disabled]="!canEdit()"
+									(click)="onClearFill(ci)"
+								>
+									&times;
+								</button>
+							}
+							@if (showExplosion()) {
+								<input
+									type="number"
+									min="0"
+									max="100"
+									class="pptx-chart-card__input pptx-chart-card__input--num"
+									title="Slice explosion"
+									placeholder="0"
+									[disabled]="!canEdit()"
+									[value]="pointAt(ci)?.explosion ?? ''"
+									(change)="onExplosion(ci, $event)"
+								/>
+							}
+						</div>
+					}
+				</div>
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
+/**
+ * chart-display-options.component.ts: Chart-level display toggles.
+ *
+ * Selector: `pptx-chart-display-options`
+ *
+ * Mirrors React's `ChartDisplayOptions.tsx`: show/hide title, legend (with
+ * position), gridlines, and the data-labels master toggle. Emits a complete new
+ * `ChartPptxElement` via `elementChange` after each edit; holds no mutable state.
+ *
+ * @module angular-viewer/chart-display-options
+ */
+class ChartDisplayOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    legendPositions = LEGEND_POSITION_OPTIONS;
+    style = computed(() => this.element().chartData?.style ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    onToggleTitle(event) {
+        this.elementChange.emit(patchChartStyle(this.element(), { hasTitle: boolFromEvent(event) }));
+    }
+    onToggleLegend(event) {
+        this.elementChange.emit(setLegend(this.element(), { show: boolFromEvent(event) }));
+    }
+    onLegendPosition(event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setLegend(this.element(), { position: value }));
+    }
+    onToggleGridlines(event) {
+        this.elementChange.emit(patchChartStyle(this.element(), { hasGridlines: boolFromEvent(event) }));
+    }
+    onToggleDataLabels(event) {
+        // Route through the dedicated op so content keys initialise consistently.
+        this.elementChange.emit(setDataLabels(this.element(), { show: boolFromEvent(event) }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDisplayOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartDisplayOptionsComponent, isStandalone: true, selector: "pptx-chart-display-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		<section class="pptx-chart-card" aria-label="Chart display options">
+			<h4 class="pptx-chart-card__heading">Display</h4>
+			<div class="pptx-chart-card__group">
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasTitle ?? false"
+						(change)="onToggleTitle($event)"
+					/>
+					<span>Show title</span>
+				</label>
+
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasLegend ?? false"
+						(change)="onToggleLegend($event)"
+					/>
+					<span>Show legend</span>
+				</label>
+
+				@if (style().hasLegend) {
+					<label class="pptx-chart-card__row pptx-chart-card__group--indent">
+						<span class="pptx-chart-card__label">Position</span>
+						<select
+							class="pptx-chart-card__input"
+							[disabled]="!canEdit()"
+							[value]="style().legendPosition ?? 'b'"
+							(change)="onLegendPosition($event)"
+						>
+							@for (opt of legendPositions; track opt.value) {
+								<option [value]="opt.value">{{ opt.label }}</option>
+							}
+						</select>
+					</label>
+				}
+
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasGridlines ?? false"
+						(change)="onToggleGridlines($event)"
+					/>
+					<span>Show gridlines</span>
+				</label>
+
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasDataLabels ?? false"
+						(change)="onToggleDataLabels($event)"
+					/>
+					<span>Show data labels</span>
+				</label>
+			</div>
+		</section>
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDisplayOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-display-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		<section class="pptx-chart-card" aria-label="Chart display options">
+			<h4 class="pptx-chart-card__heading">Display</h4>
+			<div class="pptx-chart-card__group">
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasTitle ?? false"
+						(change)="onToggleTitle($event)"
+					/>
+					<span>Show title</span>
+				</label>
+
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasLegend ?? false"
+						(change)="onToggleLegend($event)"
+					/>
+					<span>Show legend</span>
+				</label>
+
+				@if (style().hasLegend) {
+					<label class="pptx-chart-card__row pptx-chart-card__group--indent">
+						<span class="pptx-chart-card__label">Position</span>
+						<select
+							class="pptx-chart-card__input"
+							[disabled]="!canEdit()"
+							[value]="style().legendPosition ?? 'b'"
+							(change)="onLegendPosition($event)"
+						>
+							@for (opt of legendPositions; track opt.value) {
+								<option [value]="opt.value">{{ opt.label }}</option>
+							}
+						</select>
+					</label>
+				}
+
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasGridlines ?? false"
+						(change)="onToggleGridlines($event)"
+					/>
+					<span>Show gridlines</span>
+				</label>
+
+				<label class="pptx-chart-card__check">
+					<input
+						type="checkbox"
+						[disabled]="!canEdit()"
+						[checked]="style().hasDataLabels ?? false"
+						(change)="onToggleDataLabels($event)"
+					/>
+					<span>Show data labels</span>
+				</label>
+			</div>
+		</section>
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
+/**
+ * chart-error-bar-options.component.ts: Per-series error-bar controls.
+ *
+ * Selector: `pptx-chart-error-bar-options`
  *
- * @param element - The source chart element (not mutated).
- * @param seriesIndex - Zero-based series index.
- * @param catIndex - Zero-based category (point) index.
- * @param rawValue - The new value as a string (from an `<input type="number">`).
- * @returns A new `ChartPptxElement`, or the original when the value is invalid.
+ * Mirrors React's `ChartErrorBarOptions.tsx`: for bar/line/area/scatter/bubble
+ * charts, each series gets an error-bar value-type selector, and (when set) a
+ * direction-type selector plus a numeric amount for the value types that take
+ * one. Routes through the `setSeriesErrorBars` immutable wrapper and emits a new
+ * `ChartPptxElement`.
  *
- * @example
- * ```ts
- * const updated = setSeriesValue(el, 0, 2, "42.5");
- * ```
+ * @module angular-viewer/chart-error-bar-options
  */
-function setSeriesValue(element, seriesIndex, catIndex, rawValue) {
-    const chartData = element.chartData;
-    if (!chartData) {
-        return element;
+class ChartErrorBarOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    valTypeOptions = ERROR_BAR_VALTYPE_OPTIONS;
+    barTypeOptions = ERROR_BAR_TYPE_OPTIONS;
+    series = computed(() => this.element().chartData?.series ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    supported = computed(() => {
+        const type = this.element().chartData?.chartType;
+        return type !== undefined && ERROR_BAR_SUPPORTED_TYPES.has(type) && this.series().length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supported" }] : /* istanbul ignore next */ []));
+    barsOf(s) {
+        return s.errBars?.[0];
     }
-    const num = parseFloat(rawValue);
-    if (!Number.isFinite(num)) {
-        return element;
+    showValue(bars) {
+        return ERROR_BAR_VALUE_TYPES.has(bars.valType);
     }
-    return { ...element, chartData: chartDataUpdatePoint(chartData, seriesIndex, catIndex, num) };
-}
-// ---------------------------------------------------------------------------
-// setSeriesName
-// ---------------------------------------------------------------------------
-/**
- * Rename a series in a `ChartPptxElement`, returning a new element.
- *
- * @param element - The source chart element (not mutated).
- * @param seriesIndex - Zero-based index of the series to rename.
- * @param name - The new series name.
- * @returns A new `ChartPptxElement`.
- *
- * @example
- * ```ts
- * const updated = setSeriesName(el, 0, "Revenue");
- * ```
- */
-function setSeriesName(element, seriesIndex, name) {
-    const chartData = element.chartData;
-    if (!chartData) {
-        return element;
+    onValType(index, s, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        if (value === '') {
+            this.elementChange.emit(setSeriesErrorBars(this.element(), index, null));
+            return;
+        }
+        const existing = this.barsOf(s);
+        this.elementChange.emit(setSeriesErrorBars(this.element(), index, {
+            direction: existing?.direction ?? 'y',
+            barType: existing?.barType ?? 'both',
+            valType: value,
+            val: existing?.val,
+        }));
     }
-    const series = chartData.series.map((s, i) => (i === seriesIndex ? { ...s, name } : s));
-    return { ...element, chartData: { ...chartData, series } };
+    onBarType(index, bars, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setSeriesErrorBars(this.element(), index, {
+            ...bars,
+            barType: value,
+        }));
+    }
+    onValue(index, bars, event) {
+        const num = numFromEvent(event);
+        if (num === undefined) {
+            return;
+        }
+        this.elementChange.emit(setSeriesErrorBars(this.element(), index, { ...bars, val: num ?? undefined }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartErrorBarOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartErrorBarOptionsComponent, isStandalone: true, selector: "pptx-chart-error-bar-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Error bar options">
+				<h4 class="pptx-chart-card__heading">Error Bars</h4>
+				@for (s of series(); track $index; let i = $index) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="barsOf(s)?.valType ?? ''"
+								(change)="onValType(i, s, $event)"
+							>
+								@for (opt of valTypeOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+
+						@if (barsOf(s); as bars) {
+							<div class="pptx-chart-card__row pptx-chart-card__group--indent">
+								<select
+									class="pptx-chart-card__input"
+									[disabled]="!canEdit()"
+									[value]="bars.barType"
+									(change)="onBarType(i, bars, $event)"
+								>
+									@for (opt of barTypeOptions; track opt.value) {
+										<option [value]="opt.value">{{ opt.label }}</option>
+									}
+								</select>
+								@if (showValue(bars)) {
+									<input
+										type="number"
+										class="pptx-chart-card__input pptx-chart-card__input--num"
+										placeholder="Amount"
+										[disabled]="!canEdit()"
+										[value]="bars.val ?? ''"
+										(change)="onValue(i, bars, $event)"
+									/>
+								}
+							</div>
+						}
+					</div>
+				}
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-// ---------------------------------------------------------------------------
-// setCategoryLabel
-// ---------------------------------------------------------------------------
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartErrorBarOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-error-bar-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Error bar options">
+				<h4 class="pptx-chart-card__heading">Error Bars</h4>
+				@for (s of series(); track $index; let i = $index) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="barsOf(s)?.valType ?? ''"
+								(change)="onValType(i, s, $event)"
+							>
+								@for (opt of valTypeOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+
+						@if (barsOf(s); as bars) {
+							<div class="pptx-chart-card__row pptx-chart-card__group--indent">
+								<select
+									class="pptx-chart-card__input"
+									[disabled]="!canEdit()"
+									[value]="bars.barType"
+									(change)="onBarType(i, bars, $event)"
+								>
+									@for (opt of barTypeOptions; track opt.value) {
+										<option [value]="opt.value">{{ opt.label }}</option>
+									}
+								</select>
+								@if (showValue(bars)) {
+									<input
+										type="number"
+										class="pptx-chart-card__input pptx-chart-card__input--num"
+										placeholder="Amount"
+										[disabled]="!canEdit()"
+										[value]="bars.val ?? ''"
+										(change)="onValue(i, bars, $event)"
+									/>
+								}
+							</div>
+						}
+					</div>
+				}
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
 /**
- * Rename a category label in a `ChartPptxElement`, returning a new element.
+ * chart-marker-options.component.ts: Per-series marker controls.
  *
- * @param element - The source chart element (not mutated).
- * @param catIndex - Zero-based index of the category to rename.
- * @param label - The new label text.
- * @returns A new `ChartPptxElement`.
+ * Selector: `pptx-chart-marker-options`
  *
- * @example
- * ```ts
- * const updated = setCategoryLabel(el, 0, "Q1 2025");
- * ```
+ * Mirrors React's `ChartMarkerOptions.tsx`: for line/scatter/bubble/radar charts,
+ * each series gets a marker-symbol selector and (when a visible symbol is chosen)
+ * size and fill-colour controls. Routes through `setSeriesMarker` and emits a new
+ * `ChartPptxElement`.
+ *
+ * @module angular-viewer/chart-marker-options
  */
-function setCategoryLabel(element, catIndex, label) {
-    const chartData = element.chartData;
-    if (!chartData) {
-        return element;
+class ChartMarkerOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    symbolOptions = MARKER_SYMBOL_OPTIONS;
+    series = computed(() => this.element().chartData?.series ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    supported = computed(() => {
+        const type = this.element().chartData?.chartType;
+        return type !== undefined && MARKER_SUPPORTED_TYPES.has(type) && this.series().length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supported" }] : /* istanbul ignore next */ []));
+    onSymbol(index, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setSeriesMarker(this.element(), index, value === '' ? null : { symbol: value }));
     }
-    const categories = chartData.categories.map((c, i) => (i === catIndex ? label : c));
-    return { ...element, chartData: { ...chartData, categories } };
+    onSize(index, event) {
+        const num = numFromEvent(event);
+        this.elementChange.emit(setSeriesMarker(this.element(), index, { size: typeof num === 'number' ? num : undefined }));
+    }
+    onFill(index, event) {
+        const value = stringFromEvent$5(event);
+        if (value === null) {
+            return;
+        }
+        this.elementChange.emit(setSeriesMarker(this.element(), index, { fillColor: value }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartMarkerOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartMarkerOptionsComponent, isStandalone: true, selector: "pptx-chart-marker-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Marker options">
+				<h4 class="pptx-chart-card__heading">Markers</h4>
+				@for (s of series(); track $index; let i = $index) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="s.marker?.symbol ?? ''"
+								(change)="onSymbol(i, $event)"
+							>
+								@for (opt of symbolOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+
+						@if (s.marker && s.marker.symbol !== 'none') {
+							<div class="pptx-chart-card__row pptx-chart-card__group--indent">
+								<span class="pptx-chart-card__label">Size</span>
+								<input
+									type="number"
+									min="2"
+									max="72"
+									class="pptx-chart-card__input pptx-chart-card__input--num"
+									placeholder="Auto"
+									[disabled]="!canEdit()"
+									[value]="s.marker.size ?? ''"
+									(change)="onSize(i, $event)"
+								/>
+								<span class="pptx-chart-card__label">Fill</span>
+								<input
+									type="color"
+									class="pptx-chart-card__color"
+									[disabled]="!canEdit()"
+									[value]="s.marker.spPr?.fillColor ?? '#4472c4'"
+									(input)="onFill(i, $event)"
+								/>
+							</div>
+						}
+					</div>
+				}
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-// ---------------------------------------------------------------------------
-// setSeriesColor
-// ---------------------------------------------------------------------------
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartMarkerOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-marker-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Marker options">
+				<h4 class="pptx-chart-card__heading">Markers</h4>
+				@for (s of series(); track $index; let i = $index) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="s.marker?.symbol ?? ''"
+								(change)="onSymbol(i, $event)"
+							>
+								@for (opt of symbolOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+
+						@if (s.marker && s.marker.symbol !== 'none') {
+							<div class="pptx-chart-card__row pptx-chart-card__group--indent">
+								<span class="pptx-chart-card__label">Size</span>
+								<input
+									type="number"
+									min="2"
+									max="72"
+									class="pptx-chart-card__input pptx-chart-card__input--num"
+									placeholder="Auto"
+									[disabled]="!canEdit()"
+									[value]="s.marker.size ?? ''"
+									(change)="onSize(i, $event)"
+								/>
+								<span class="pptx-chart-card__label">Fill</span>
+								<input
+									type="color"
+									class="pptx-chart-card__color"
+									[disabled]="!canEdit()"
+									[value]="s.marker.spPr?.fillColor ?? '#4472c4'"
+									(input)="onFill(i, $event)"
+								/>
+							</div>
+						}
+					</div>
+				}
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
 /**
- * Set (or clear) the solid fill colour of a chart series, returning a new
- * `ChartPptxElement`. Pass a hex string (`#RRGGBB` or `RRGGBB`) to set the
- * colour, or `null` to clear it so the series falls back to its theme colour.
+ * chart-trendline-options.component.ts: Per-series trendline controls.
  *
- * Mirrors the headless `setChartSeriesColor` SDK op (which mutates in place)
- * with an immutable element-level wrapper for the inspector.
+ * Selector: `pptx-chart-trendline-options`
  *
- * @param element - The source chart element (not mutated).
- * @param seriesIndex - Zero-based index of the series to recolour.
- * @param color - Hex colour string, or `null` to clear.
- * @returns A new `ChartPptxElement`.
+ * Mirrors React's `ChartTrendlineOptions.tsx`: for bar/line/area/scatter/bubble
+ * charts, each series gets a trendline-type selector plus (when a trendline is
+ * set) display-equation and display-R-squared toggles. Routes through the
+ * `setSeriesTrendline` immutable wrapper and emits a new `ChartPptxElement`.
  *
- * @example
- * ```ts
- * const updated = setSeriesColor(el, 0, "#4472C4");
- * ```
+ * @module angular-viewer/chart-trendline-options
  */
-function setSeriesColor(element, seriesIndex, color) {
-    const chartData = element.chartData;
-    if (!chartData) {
-        return element;
+class ChartTrendlineOptionsComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    elementChange = output();
+    typeOptions = TRENDLINE_TYPE_OPTIONS;
+    series = computed(() => this.element().chartData?.series ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    supported = computed(() => {
+        const type = this.element().chartData?.chartType;
+        return type !== undefined && TRENDLINE_SUPPORTED_TYPES.has(type) && this.series().length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supported" }] : /* istanbul ignore next */ []));
+    trendlineOf(s) {
+        return s.trendlines?.[0];
     }
-    const normalized = color ? normalizeHex(color) : undefined;
-    const series = chartData.series.map((s, i) => (i === seriesIndex ? { ...s, color: normalized } : s));
-    return { ...element, chartData: { ...chartData, series } };
-}
-/** Normalise a hex colour to a `#`-prefixed form, trimming whitespace. */
-function normalizeHex(color) {
-    const trimmed = color.trim();
-    return trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
-}
-// ---------------------------------------------------------------------------
-// patchChartStyle
-// ---------------------------------------------------------------------------
-/**
- * Merge a `Partial<PptxChartStyle>` patch into a `ChartPptxElement`,
- * returning a new element.
- *
- * @param element - The source chart element (not mutated).
- * @param patch - Style fields to merge.
- * @returns A new `ChartPptxElement`.
- */
-function patchChartStyle(element, patch) {
-    const chartData = element.chartData;
-    if (!chartData) {
-        return element;
+    onType(index, s, event) {
+        const value = selectValue$1(event);
+        if (value === null) {
+            return;
+        }
+        if (value === '') {
+            this.elementChange.emit(setSeriesTrendline(this.element(), index, null));
+            return;
+        }
+        const existing = this.trendlineOf(s);
+        this.elementChange.emit(setSeriesTrendline(this.element(), index, {
+            ...existing,
+            trendlineType: value,
+        }));
     }
-    return {
-        ...element,
-        chartData: { ...chartData, style: { ...chartData.style, ...patch } },
-    };
+    onToggleEq(index, tl, event) {
+        this.elementChange.emit(setSeriesTrendline(this.element(), index, { ...tl, displayEq: boolFromEvent(event) }));
+    }
+    onToggleRSq(index, tl, event) {
+        this.elementChange.emit(setSeriesTrendline(this.element(), index, { ...tl, displayRSq: boolFromEvent(event) }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartTrendlineOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartTrendlineOptionsComponent, isStandalone: true, selector: "pptx-chart-trendline-options", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Trendline options">
+				<h4 class="pptx-chart-card__heading">Trendlines</h4>
+				@for (s of series(); track $index; let i = $index) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="trendlineOf(s)?.trendlineType ?? ''"
+								(change)="onType(i, s, $event)"
+							>
+								@for (opt of typeOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+
+						@if (trendlineOf(s); as tl) {
+							<div class="pptx-chart-card__row pptx-chart-card__group--indent">
+								<label class="pptx-chart-card__check">
+									<input
+										type="checkbox"
+										[disabled]="!canEdit()"
+										[checked]="tl.displayEq ?? false"
+										(change)="onToggleEq(i, tl, $event)"
+									/>
+									<span>Equation</span>
+								</label>
+								<label class="pptx-chart-card__check">
+									<input
+										type="checkbox"
+										[disabled]="!canEdit()"
+										[checked]="tl.displayRSq ?? false"
+										(change)="onToggleRSq(i, tl, $event)"
+									/>
+									<span>R-squared</span>
+								</label>
+							</div>
+						}
+					</div>
+				}
+			</section>
+		}
+	`, isInline: true, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-// ---------------------------------------------------------------------------
-// patchChartData
-// ---------------------------------------------------------------------------
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartTrendlineOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-chart-trendline-options', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		@if (supported()) {
+			<section class="pptx-chart-card" aria-label="Trendline options">
+				<h4 class="pptx-chart-card__heading">Trendlines</h4>
+				@for (s of series(); track $index; let i = $index) {
+					<div class="pptx-chart-card__group">
+						<div class="pptx-chart-card__row">
+							<span class="pptx-chart-card__name" [title]="s.name">{{ s.name }}</span>
+							<select
+								class="pptx-chart-card__input"
+								[disabled]="!canEdit()"
+								[value]="trendlineOf(s)?.trendlineType ?? ''"
+								(change)="onType(i, s, $event)"
+							>
+								@for (opt of typeOptions; track opt.value) {
+									<option [value]="opt.value">{{ opt.label }}</option>
+								}
+							</select>
+						</div>
+
+						@if (trendlineOf(s); as tl) {
+							<div class="pptx-chart-card__row pptx-chart-card__group--indent">
+								<label class="pptx-chart-card__check">
+									<input
+										type="checkbox"
+										[disabled]="!canEdit()"
+										[checked]="tl.displayEq ?? false"
+										(change)="onToggleEq(i, tl, $event)"
+									/>
+									<span>Equation</span>
+								</label>
+								<label class="pptx-chart-card__check">
+									<input
+										type="checkbox"
+										[disabled]="!canEdit()"
+										[checked]="tl.displayRSq ?? false"
+										(change)="onToggleRSq(i, tl, $event)"
+									/>
+									<span>R-squared</span>
+								</label>
+							</div>
+						}
+					</div>
+				}
+			</section>
+		}
+	`, styles: [".pptx-chart-card{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-top:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-card__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-card__group{display:flex;flex-direction:column;gap:.3rem}.pptx-chart-card__group--indent{margin-left:.5rem}.pptx-chart-card__subhead{font-size:11px;font-weight:600}.pptx-chart-card__row{display:flex;align-items:center;gap:.4rem;font-size:11px}.pptx-chart-card__label{flex:0 0 auto;width:5rem;color:var(--pptx-inspector-muted, #888)}.pptx-chart-card__label--wide{width:6.5rem}.pptx-chart-card__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-chart-card__check{display:flex;align-items:center;gap:.35rem;font-size:11px;cursor:pointer}.pptx-chart-card__input{flex:1 1 auto;min-width:0;box-sizing:border-box;padding:2px 4px;font-size:11px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;color:inherit;outline:none}.pptx-chart-card__input--num{flex:0 0 auto;width:4rem;text-align:right}.pptx-chart-card__input:focus{border-color:var(--pptx-inspector-active, #0078d4)}.pptx-chart-card__input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__color{flex:0 0 auto;width:26px;height:20px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-card__color:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-card__clear{flex:0 0 auto;padding:0 2px;font-size:12px;line-height:1;background:none;border:none;color:var(--pptx-inspector-muted, #888);cursor:pointer}.pptx-chart-card__clear:hover{color:var(--pptx-inspector-danger, #f47c7c)}.pptx-chart-card__input--num::-webkit-outer-spin-button,.pptx-chart-card__input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
+
 /**
- * Merge a `Partial<PptxChartData>` patch into a `ChartPptxElement`.
+ * advanced-chart-editor.component.ts: Full chart inspector for the Angular
+ * binding, at parity with the React `ChartDataPanel`.
  *
- * When the patch contains a `chartType` change, the smart
- * `chartDataChangeType` helper is used so grouping and category formats
- * are adapted automatically.
+ * Selector: `pptx-advanced-chart-editor`
  *
- * @param element - The source chart element (not mutated).
- * @param patch - Chart data fields to merge.
- * @returns A new `ChartPptxElement`.
+ * Composes the existing data grid (`pptx-chart-data-editor`) with the advanced
+ * formatting controls: display toggles, data labels, axis scale/format, axis
+ * styling, markers, combo per-series types, per-data-point overrides, trendlines,
+ * and error bars. Every child emits a complete new `ChartPptxElement`, which this
+ * component re-emits via its own `elementChange` output so the parent commits a
+ * single history entry per edit. Holds no mutable state.
+ *
+ * @module angular-viewer/advanced-chart-editor
  */
-function patchChartData(element, patch) {
-    const chartData = element.chartData;
-    if (!chartData) {
-        return element;
-    }
-    if (patch.chartType && patch.chartType !== chartData.chartType) {
-        const adapted = chartDataChangeType(chartData, patch.chartType);
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { chartType: _ct, ...rest } = patch;
-        return { ...element, chartData: { ...adapted, ...rest } };
-    }
-    return { ...element, chartData: { ...chartData, ...patch } };
+class AdvancedChartEditorComponent {
+    /** The chart element being edited. */
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    /** Whether editing is enabled (read-only mode when false). */
+    canEdit = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    /** Emits the updated element after any edit operation in any child control. */
+    elementChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AdvancedChartEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: AdvancedChartEditorComponent, isStandalone: true, selector: "pptx-advanced-chart-editor", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elementChange: "elementChange" }, ngImport: i0, template: `
+		<div class="pptx-advanced-chart">
+			<pptx-chart-display-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-data-label-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-axis-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-axis-style-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-marker-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-combo-type-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-datapoint-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-trendline-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-error-bar-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-data-editor
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+		</div>
+	`, isInline: true, styles: [".pptx-advanced-chart{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDisplayOptionsComponent, selector: "pptx-chart-display-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataLabelOptionsComponent, selector: "pptx-chart-data-label-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartAxisOptionsComponent, selector: "pptx-chart-axis-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartAxisStyleOptionsComponent, selector: "pptx-chart-axis-style-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartMarkerOptionsComponent, selector: "pptx-chart-marker-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartComboTypeOptionsComponent, selector: "pptx-chart-combo-type-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDatapointOptionsComponent, selector: "pptx-chart-datapoint-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartTrendlineOptionsComponent, selector: "pptx-chart-trendline-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartErrorBarOptionsComponent, selector: "pptx-chart-error-bar-options", inputs: ["element", "canEdit"], outputs: ["elementChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AdvancedChartEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pptx-advanced-chart-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ChartDataEditorComponent,
+                        ChartDisplayOptionsComponent,
+                        ChartDataLabelOptionsComponent,
+                        ChartAxisOptionsComponent,
+                        ChartAxisStyleOptionsComponent,
+                        ChartMarkerOptionsComponent,
+                        ChartComboTypeOptionsComponent,
+                        ChartDatapointOptionsComponent,
+                        ChartTrendlineOptionsComponent,
+                        ChartErrorBarOptionsComponent,
+                    ], template: `
+		<div class="pptx-advanced-chart">
+			<pptx-chart-display-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-data-label-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-axis-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-axis-style-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-marker-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-combo-type-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-datapoint-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-trendline-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-error-bar-options
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+			<pptx-chart-data-editor
+				[element]="element()"
+				[canEdit]="canEdit()"
+				(elementChange)="elementChange.emit($event)"
+			/>
+		</div>
+	`, styles: [".pptx-advanced-chart{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], elementChange: [{ type: i0.Output, args: ["elementChange"] }] } });
 
 /**
  * chart-data-editor.component.ts: Presentational chart data editor panel.
@@ -34152,15 +37259,20 @@ class ChartDataEditorComponent {
 						</tbody>
 					</table>
 				</div>
+				<pptx-advanced-chart-editor
+					[element]="element()"
+					[canEdit]="canEdit()"
+					(elementChange)="elementChange.emit($event)"
+				/>
 			} @else {
 				<p class="pptx-chart-editor__empty">No chart data available.</p>
 			}
 		</section>
-	`, isInline: true, styles: [".pptx-chart-editor{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-editor__header{display:flex;align-items:center;justify-content:space-between;gap:.35rem;flex-wrap:wrap}.pptx-chart-editor__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-editor__actions{display:flex;gap:.2rem;flex-wrap:wrap}.pptx-chart-editor__btn{padding:2px 5px;font-size:10px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;white-space:nowrap}.pptx-chart-editor__btn:disabled{opacity:.4;cursor:not-allowed}.pptx-chart-editor__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-chart-editor__scroll{overflow-x:auto}.pptx-chart-editor__table{border-collapse:collapse;font-size:11px;min-width:100%}.pptx-chart-editor__corner{min-width:64px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-editor__series-header{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #333);padding:2px 3px;white-space:nowrap;min-width:80px}.pptx-chart-editor__name-input{width:72px;box-sizing:border-box;padding:2px 3px;font-size:11px;background:transparent;border:1px solid transparent;color:inherit;outline:none}.pptx-chart-editor__name-input:focus{border-color:var(--pptx-inspector-active, #0078d4);background:var(--pptx-inspector-active-bg, #1a3a5c)}.pptx-chart-editor__name-input:disabled{opacity:.6}.pptx-chart-editor__remove-btn{padding:0 2px;font-size:11px;line-height:1;background:none;border:none;color:var(--pptx-inspector-danger, #f47c7c);cursor:pointer;vertical-align:middle}.pptx-chart-editor__color-wrap{display:inline-flex;align-items:center;gap:1px;margin-left:2px;vertical-align:middle}.pptx-chart-editor__color-input{width:22px;height:18px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-editor__color-input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-editor__cat-cell{border:1px solid var(--pptx-inspector-border, #333);padding:1px;background:var(--pptx-inspector-input-bg, #2d2d2d)}.pptx-chart-editor__cat-wrap{display:flex;align-items:center;gap:1px}.pptx-chart-editor__cat-input{width:60px;box-sizing:border-box;padding:2px 3px;font-size:11px;background:transparent;border:none;color:var(--pptx-inspector-muted, #aaa);outline:none}.pptx-chart-editor__cat-input:focus{color:inherit;background:var(--pptx-inspector-active-bg, #1a3a5c)}.pptx-chart-editor__cat-input:disabled{opacity:.6}.pptx-chart-editor__value-cell{border:1px solid var(--pptx-inspector-border, #333);padding:1px}.pptx-chart-editor__value-input{width:72px;box-sizing:border-box;padding:2px 3px;font-size:11px;text-align:right;background:var(--pptx-inspector-input-bg, #2d2d2d);border:none;color:inherit;outline:none}.pptx-chart-editor__value-input:focus{background:var(--pptx-inspector-active-bg, #1a3a5c)}.pptx-chart-editor__value-input:disabled{opacity:.6}.pptx-chart-editor__value-input::-webkit-outer-spin-button,.pptx-chart-editor__value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pptx-chart-editor__empty{font-size:11px;color:var(--pptx-inspector-muted, #888);margin:.25rem 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-chart-editor{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-editor__header{display:flex;align-items:center;justify-content:space-between;gap:.35rem;flex-wrap:wrap}.pptx-chart-editor__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0}.pptx-chart-editor__actions{display:flex;gap:.2rem;flex-wrap:wrap}.pptx-chart-editor__btn{padding:2px 5px;font-size:10px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;white-space:nowrap}.pptx-chart-editor__btn:disabled{opacity:.4;cursor:not-allowed}.pptx-chart-editor__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-chart-editor__scroll{overflow-x:auto}.pptx-chart-editor__table{border-collapse:collapse;font-size:11px;min-width:100%}.pptx-chart-editor__corner{min-width:64px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #333)}.pptx-chart-editor__series-header{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #333);padding:2px 3px;white-space:nowrap;min-width:80px}.pptx-chart-editor__name-input{width:72px;box-sizing:border-box;padding:2px 3px;font-size:11px;background:transparent;border:1px solid transparent;color:inherit;outline:none}.pptx-chart-editor__name-input:focus{border-color:var(--pptx-inspector-active, #0078d4);background:var(--pptx-inspector-active-bg, #1a3a5c)}.pptx-chart-editor__name-input:disabled{opacity:.6}.pptx-chart-editor__remove-btn{padding:0 2px;font-size:11px;line-height:1;background:none;border:none;color:var(--pptx-inspector-danger, #f47c7c);cursor:pointer;vertical-align:middle}.pptx-chart-editor__color-wrap{display:inline-flex;align-items:center;gap:1px;margin-left:2px;vertical-align:middle}.pptx-chart-editor__color-input{width:22px;height:18px;padding:0;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:transparent;cursor:pointer}.pptx-chart-editor__color-input:disabled{opacity:.6;cursor:not-allowed}.pptx-chart-editor__cat-cell{border:1px solid var(--pptx-inspector-border, #333);padding:1px;background:var(--pptx-inspector-input-bg, #2d2d2d)}.pptx-chart-editor__cat-wrap{display:flex;align-items:center;gap:1px}.pptx-chart-editor__cat-input{width:60px;box-sizing:border-box;padding:2px 3px;font-size:11px;background:transparent;border:none;color:var(--pptx-inspector-muted, #aaa);outline:none}.pptx-chart-editor__cat-input:focus{color:inherit;background:var(--pptx-inspector-active-bg, #1a3a5c)}.pptx-chart-editor__cat-input:disabled{opacity:.6}.pptx-chart-editor__value-cell{border:1px solid var(--pptx-inspector-border, #333);padding:1px}.pptx-chart-editor__value-input{width:72px;box-sizing:border-box;padding:2px 3px;font-size:11px;text-align:right;background:var(--pptx-inspector-input-bg, #2d2d2d);border:none;color:inherit;outline:none}.pptx-chart-editor__value-input:focus{background:var(--pptx-inspector-active-bg, #1a3a5c)}.pptx-chart-editor__value-input:disabled{opacity:.6}.pptx-chart-editor__value-input::-webkit-outer-spin-button,.pptx-chart-editor__value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pptx-chart-editor__empty{font-size:11px;color:var(--pptx-inspector-muted, #888);margin:.25rem 0}\n"], dependencies: [{ kind: "component", type: AdvancedChartEditorComponent, selector: "pptx-advanced-chart-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartDataEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-chart-data-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'pptx-chart-data-editor', standalone: true, imports: [AdvancedChartEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
 		<section class="pptx-chart-editor" aria-label="Chart data editor">
 			<header class="pptx-chart-editor__header">
 				<h3 class="pptx-chart-editor__heading">Chart Data</h3>
@@ -34300,6 +37412,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 						</tbody>
 					</table>
 				</div>
+				<pptx-advanced-chart-editor
+					[element]="element()"
+					[canEdit]="canEdit()"
+					(elementChange)="elementChange.emit($event)"
+				/>
 			} @else {
 				<p class="pptx-chart-editor__empty">No chart data available.</p>
 			}
@@ -48457,6 +51574,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 	`, styles: [":host{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}.pptx-ng-transition-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { outgoingSlide: [{ type: i0.Input, args: [{ isSignal: true, alias: "outgoingSlide", required: true }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: true }] }], templateElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateElements", required: false }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], durationMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationMs", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
 
+/**
+ * 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();
+    };
+}
+
 /**
  * PresentationOverlayComponent: full-viewport black overlay that renders
  * slides in presentation (kiosk) mode.
@@ -48526,7 +51704,11 @@ class PresentationOverlayComponent {
     /** The slide stage root; animation styles are applied to its elements. */
     stageRef = viewChild('stage', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stageRef" }] : /* istanbul ignore next */ []));
+    /** The overlay root; the shared touch-gesture recogniser attaches here. */
+    rootRef = viewChild('root', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.setupTouchGestures();
         // Feed the current slide's element animations into playback (resets to the
         // pre-build state so entrance-animated elements start hidden).
         effect(() => {
@@ -48690,21 +51872,36 @@ class PresentationOverlayComponent {
         'z-index': '10001',
     };
     // ------------------------------------------------------------------
-    // Touch / swipe tracking
+    // Touch / swipe handling (delegated to the shared gesture recogniser)
     // ------------------------------------------------------------------
-    /** Horizontal swipe distance (px) required to trigger navigation. */
-    static SWIPE_THRESHOLD = 50;
-    /** X coordinate captured on touchstart, or null when no swipe is active. */
-    touchStartX = null;
-    touchStartY = null;
     /**
-     * Last position seen during the gesture (updated on every touchmove). Some
-     * touch dispatchers (e.g. CDP `Input.dispatchTouchEvent`) fire `touchEnd`
-     * with an empty `changedTouches` list, so we fall back to the final move
-     * coordinates to compute the swipe delta.
+     * Wire the shared touch-gesture recogniser to the overlay root so a
+     * horizontal swipe navigates: swipe left (direction -1) advances to the
+     * next visible slide, swipe right (direction 1) returns to the previous,
+     * matching the prior bespoke handler's semantics. Pinch is made inert
+     * (equal min/max scale, no-op getScale) and there is no long-press in
+     * presentation mode. Attach happens once the root node is live
+     * (afterNextRender) and is torn down on destroy.
      */
-    touchLastX = null;
-    touchLastY = null;
+    setupTouchGestures() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const el = this.rootRef()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const teardown = attachTouchGestures(el, {
+                getScale: () => 1,
+                callbacks: {
+                    onSwipe: (direction) => {
+                        // direction 1 = swipe right (previous), -1 = swipe left (next).
+                        this.navigate(direction === 1 ? 'prev' : 'next');
+                    },
+                },
+            });
+            destroyRef.onDestroy(teardown);
+        });
+    }
     // ------------------------------------------------------------------
     // Lifecycle
     // ------------------------------------------------------------------
@@ -48715,9 +51912,6 @@ class PresentationOverlayComponent {
         // Snapshot the viewport dimensions on mount (SSR-safe guard).
         this.snapViewport();
     }
-    ngOnDestroy() {
-        // Nothing to clean up; HostListeners are removed automatically.
-    }
     // ------------------------------------------------------------------
     // Resize awareness
     // ------------------------------------------------------------------
@@ -48821,73 +52015,6 @@ class PresentationOverlayComponent {
         this.navigate('next');
     }
     // ------------------------------------------------------------------
-    // Swipe handling (touch devices have no keyboard)
-    // ------------------------------------------------------------------
-    /** Record the initial touch position. */
-    onTouchStart(event) {
-        const touch = event.changedTouches[0];
-        if (!touch) {
-            this.touchStartX = null;
-            this.touchStartY = null;
-            this.touchLastX = null;
-            this.touchLastY = null;
-            return;
-        }
-        this.touchStartX = touch.clientX;
-        this.touchStartY = touch.clientY;
-        this.touchLastX = touch.clientX;
-        this.touchLastY = touch.clientY;
-    }
-    /** Track the latest gesture position so touchend can compute the delta even
-     *  when the touchend event carries no `changedTouches`. */
-    onTouchMove(event) {
-        const touch = event.changedTouches[0] ?? event.touches[0];
-        if (touch) {
-            this.touchLastX = touch.clientX;
-            this.touchLastY = touch.clientY;
-        }
-    }
-    /**
-     * On touchend, treat a predominantly horizontal drag past the threshold as a
-     * swipe: left-swipe → next, right-swipe → prev.
-     */
-    onTouchEnd(event) {
-        const startX = this.touchStartX;
-        const startY = this.touchStartY;
-        const lastX = this.touchLastX;
-        const lastY = this.touchLastY;
-        this.touchStartX = null;
-        this.touchStartY = null;
-        this.touchLastX = null;
-        this.touchLastY = null;
-        if (startX === null || startY === null) {
-            return;
-        }
-        // Prefer the touchend coordinates; fall back to the last touchmove
-        // position (CDP dispatches touchEnd with an empty changedTouches list).
-        const touch = event.changedTouches[0];
-        const endX = touch ? touch.clientX : lastX;
-        const endY = touch ? touch.clientY : lastY;
-        if (endX === null || endY === null) {
-            return;
-        }
-        const dx = endX - startX;
-        const dy = endY - startY;
-        // Require a mostly-horizontal gesture past the threshold.
-        if (Math.abs(dx) < PresentationOverlayComponent.SWIPE_THRESHOLD) {
-            return;
-        }
-        if (Math.abs(dx) <= Math.abs(dy)) {
-            return;
-        }
-        if (dx < 0) {
-            this.navigate('next');
-        }
-        else {
-            this.navigate('prev');
-        }
-    }
-    // ------------------------------------------------------------------
     // Navigation helpers
     // ------------------------------------------------------------------
     navigate(direction) {
@@ -48938,13 +52065,8 @@ class PresentationOverlayComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PresentationOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PresentationOverlayComponent, isStandalone: true, selector: "pptx-presentation-overlay", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onKeyDown($event)" } }, providers: [AnimationPlaybackService, PresentationAnnotationsService], viewQueries: [{ propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		<div
-			class="pptx-ng-presentation-root"
-			(touchstart)="onTouchStart($event)"
-			(touchmove)="onTouchMove($event)"
-			(touchend)="onTouchEnd($event)"
-		>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PresentationOverlayComponent, isStandalone: true, selector: "pptx-presentation-overlay", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", closed: "closed" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onKeyDown($event)" } }, providers: [AnimationPlaybackService, PresentationAnnotationsService], viewQueries: [{ propertyName: "stageRef", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<div #root class="pptx-ng-presentation-root">
 			<!--
 				Slide counter, rendered first in DOM (before slide content) so a
 				generic "N / M" text query resolves to it rather than to any slide-text
@@ -49080,12 +52202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         PresentationAnnotationOverlayComponent,
                         PresentationSubtitleBarComponent,
                     ], providers: [AnimationPlaybackService, PresentationAnnotationsService], template: `
-		<div
-			class="pptx-ng-presentation-root"
-			(touchstart)="onTouchStart($event)"
-			(touchmove)="onTouchMove($event)"
-			(touchend)="onTouchEnd($event)"
-		>
+		<div #root class="pptx-ng-presentation-root">
 			<!--
 				Slide counter, rendered first in DOM (before slide content) so a
 				generic "N / M" text query resolves to it rather than to any slide-text
@@ -49211,7 +52328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 			</button>
 		</div>
 	`, styles: [":host{display:block;position:fixed;inset:0;z-index:10000;background:#000;cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-presentation-root{position:absolute;inset:0;touch-action:pan-y}.pptx-ng-presentation-close:hover,.pptx-ng-presentation-nav:hover{background:#000000bf}.pptx-ng-presentation-tools{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:1rem;display:flex;gap:.25rem;padding:.25rem;border-radius:.5rem;background:#0000008c;z-index:80}.pptx-ng-presentation-tools button{width:2rem;height:2rem;border:none;border-radius:.35rem;background:transparent;color:#fff;font-size:1rem;cursor:pointer}.pptx-ng-presentation-tools button:hover{background:#ffffff26}.pptx-ng-presentation-tools button.is-active{background:#ffffff4d}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: true }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], onWindowResize: [{
+        }], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: true }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], stageRef: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], rootRef: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }], onKeyDown: [{
@@ -54527,67 +57644,6 @@ 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;
@@ -57392,5 +60448,5 @@ function cn(...values) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibilityPanelComponent, AccessibilityService, AnimationAuthorPanelComponent, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartDataEditorComponent, ChartRendererComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR$1 as DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, EffectsPanelComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, FindReplaceBarComponent, GradientPickerComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, IsMobileService, LoadContentService, MobileBottomBarComponent, MobileMenuSheetComponent, MobilePresenterViewComponent, MobileSheetComponent, MobileSlidesSheetComponent, MobileToolbarComponent, ModalDialogComponent, Model3DRendererComponent, NotesPanelComponent, OleRendererComponent, PowerPointViewerComponent, PresentationAnnotationOverlayComponent, PresentationAnnotationsService, PresentationOverlayComponent, PresentationSubtitleBarComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, SVG_WARP_PRESETS, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS$1 as TYPE_LABELS, TableDataEditorComponent, TableRendererComponent, TextAdvancedPanelComponent, VIEWER_THEME, WEBM_MIME_CANDIDATES, ZoomRendererComponent, addCommentToList, advanceStep, applyFindReplacements, applyFormatToElement, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildDuotoneFilter, buildDuotoneFilterId, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintHtmlDocument as buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampGifDimensions, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computeIsMobile, computeIsTablet, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, copyFormatFromElement, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, encodeGif, estimatePageCount, findInSlides, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, fpsToFrameIntervalMs, generateBroadcastRoomId, generateCommentId, getContainerStyle, getDuotoneFilterDef, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, getTextWarp, getWarpCategory, getWarpPath, groupIssuesBySeverity, hasCopyableFormat, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, msToFrameDelayCs, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, pickSupportedMimeType, planGifFrames, planVideoSegments, presenceToCursors, provideViewerTheme, recordWebm, removeCommentFromList, renderToCanvas, replaceInSlides, replaceMatch, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, segmentFrameCount, sendBackward, sendToBack, setElementPosition, shouldUseSvgWarp, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
+export { AccessibilityPanelComponent, AccessibilityService, AdvancedChartEditorComponent, AnimationAuthorPanelComponent, AnimationPanelComponent, AnimationPlaybackService, BroadcastDialogComponent, CURSOR_PALETTE, ChartAxisOptionsComponent, ChartAxisStyleOptionsComponent, ChartComboTypeOptionsComponent, ChartDataEditorComponent, ChartDataLabelOptionsComponent, ChartDatapointOptionsComponent, ChartDisplayOptionsComponent, ChartErrorBarOptionsComponent, ChartMarkerOptionsComponent, ChartRendererComponent, ChartTrendlineOptionsComponent, CollaborationCursorsComponent, CollaborationService, CommentsPanelComponent, CommentsService, ConnectorRendererComponent, ConnectorTextOverlayComponent, DEFAULT_BROADCAST_SERVER_URL, DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_PRINT_SETTINGS, DEFAULT_SLIDE_BACKGROUND, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR$1 as DEFAULT_TEXT_COLOR, EMBEDDED_FONTS_STYLE_ID, EditorContextMenuComponent, EditorHistory, EditorStateService, EditorToolbarComponent, EffectsPanelComponent, ElementRendererComponent, EmbeddedFontsService, EquationRendererComponent, ExportService, FindBarComponent, FindReplaceBarComponent, GradientPickerComponent, HANDOUT_OPTIONS, HyperlinkDialogComponent, InkRendererComponent, InspectorPanelComponent, IsMobileService, LoadContentService, MobileBottomBarComponent, MobileMenuSheetComponent, MobilePresenterViewComponent, MobileSheetComponent, MobileSlidesSheetComponent, MobileToolbarComponent, ModalDialogComponent, Model3DRendererComponent, NotesPanelComponent, OleRendererComponent, PowerPointViewerComponent, PresentationAnnotationOverlayComponent, PresentationAnnotationsService, PresentationOverlayComponent, PresentationSubtitleBarComponent, PresentationTransitionOverlayComponent, PresenterViewComponent, PrintDialogComponent, PrintService, PrintSettingsPanelComponent, PropertiesDialogComponent, RESIZE_HANDLES, SEVERITY_GROUPS, SEVERITY_LABELS, SLIDE_TRANSITION_KEYFRAMES, SVG_WARP_PRESETS, ShareDialogComponent, SignaturesPanelComponent, SignaturesService, SlideCanvasComponent, SlideSorterOverlayComponent, SlidesPanelComponent, SmartArtRendererComponent, TYPE_LABELS$1 as TYPE_LABELS, TableDataEditorComponent, TableRendererComponent, TextAdvancedPanelComponent, VIEWER_THEME, WEBM_MIME_CANDIDATES, ZoomRendererComponent, addCommentToList, advanceStep, applyFindReplacements, applyFormatToElement, applyMove, applyResize, assignUserColor, bringForward, bringToFront, buildBroadcastConfig, buildBroadcastViewerUrl, buildClearHyperlinkPatch, buildClickGroups, buildCollaborationConfig, buildCssGradientFromShapeStyle, buildDuotoneFilter, buildDuotoneFilterId, buildEmbeddedFontStyles, buildFontFaceRule, buildHyperlinkPatch, buildPatternFillCss, buildPrintHtmlDocument as buildPrintDocument, buildPropertiesPatch, buildShareUrl, bulletIndentPx, canStartBroadcast, canStartShare, canUseClipboard, clampCursorPosition, clampGifDimensions, clampNotesFontSize, clampStep, cn, collectAccessibilityIssues, collectElementText, collectSlideText, computeHandoutLayout, computeIsMobile, computeIsTablet, computePageCount, computeSlideIndices, computeTimerProgress, convertOmmlToMathMl, copyFormatFromElement, countAccessibilityIssues, defaultCssVars, defaultRadius, defaultThemeColors, deleteElementsByIds, derivePresenceList, duplicateElementById, durationOf, encodeGif, estimatePageCount, findInSlides, fontMimeForFormat, formatAutoNumber, formatCursorLabel, formatElapsed, formatPropertyDate, formatTime, fpsToFrameIntervalMs, generateBroadcastRoomId, generateCommentId, getContainerStyle, getDuotoneFilterDef, getImageSrc, getPatternSvg, getResolvedShapeClipPath, getResolvedShapeClipPathFor, getShapeFillStrokeStyle, getSlideBackgroundStyle, getSlideTransitionAnimations, getTextBlockStyle, getTextWarp, getWarpCategory, getWarpPath, groupIssuesBySeverity, hasCopyableFormat, hasExistingLink, headerLabel, isInjectableUrl, isPpactionUrl, isSigned, isUrlSafe, isValidRoomId, issueTrackKey, issueTypeLabel, moveElementBy, msToFrameDelayCs, normalizeFontFormat, normalizeSlidesPerPage, ommlToMathml, overallStatus, pendingElementStyles, pickSupportedMimeType, planGifFrames, planVideoSegments, presenceToCursors, provideViewerTheme, recordWebm, removeCommentFromList, renderToCanvas, replaceInSlides, replaceMatch, resizeElement, resolveFontVariant, resolveHyperlinkHref, resolveParagraphBullet, resolvePresenterNotes, resolveTransitionDuration, revealedElementStyles, routeOrthogonalConnector, sanitizeColor, sanitizeSlideIndex, sanitizeUserName, searchSlides, seedBroadcastFields, seedHyperlinkDraft, seedPropertiesDraft, seedShareFields, segmentFrameCount, sendBackward, sendToBack, setElementPosition, shouldUseSvgWarp, signatureCountLabel, signatureKey, signatureTimestamp, signerName, statusKind, statusLabel, themeStyle, themeToCssVars, toggleCommentResolvedInList, updateElementById, validatePrintSettings, validateRoomId, waypointsToPathD, worstStatus };
 //# sourceMappingURL=pptx-angular-viewer.mjs.map