pptx-angular-viewer 1.28.1 → 1.29.0

package/fesm2022/pptx-angular-viewer.mjs

@@ -5,7 +5,7 @@ import { TranslatePipe, TranslateService, translate } from '@ngx-translate/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 as formatCommentTimestamp$1, PptxHandler, EncryptedFileError, parseSignatureXml, cloneSlide as cloneSlide$1, cloneTemplateElementsBySlideId as cloneTemplateElementsBySlideId$1, cloneElement as cloneElement$1, SvgExporter, updateSmartArtNodeText, setSmartArtNodeStyle, isInkElement, parseDataUrlToBytes, isZoomElement, pptxActionToElementAction, elementActionToPptxAction, setChartTitle, setChartLegend, setChartDataLabels, setChartAxis, setChartSeriesTrendline, setChartSeriesErrorBars, setChartDataPointLabel, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, getOleObjectTypeLabel, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, COLOR_MAP_ALIAS_KEYS, DEFAULT_COLOR_MAP, applyThemeOverrideToSlide, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
 export { SWITCHABLE_LAYOUT_TYPES, addSmartArtNode, addSmartArtNodeAsChild, chartDataAddCategory, chartDataAddSeries, chartDataChangeType, chartDataRemoveCategory, chartDataRemoveSeries, chartDataUpdatePoint, demoteSmartArtNode, promoteSmartArtNode, removeSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, updateSmartArtNodeText } from 'pptx-viewer-core';
 import DOMPurify from 'dompurify';
-import { LucideX, LucideSquare, LucideCircle, LucideSlash, LucideCopy, LucideTrash2, LucideChevronsUp, LucideChevronsDown, LucideArrowUp, LucideArrowDown, LucideGroup, LucideUngroup, LucideTextAlignStart, LucideTextAlignCenter, LucideTextAlignEnd, LucideChevronUp, LucideChevronDown, LucideAlignHorizontalSpaceAround, LucideAlignVerticalSpaceAround, LucideChevronRight, LucidePenTool, LucideHighlighter, LucideEraser, LucideMousePointer2, LucideChevronLeft, LucidePlay, LucideSparkles, LucidePanelRight, LucideMoveRight, LucidePencil, LucideType, LucideMinus, LucideSpline, LucideArrowLeft, LucideDownload, LucideFilePlus2, LucideFolderOpen, LucideHome, LucideInfo, LucidePrinter, LucideSave, LucideSettings, LucideShare2, LucideUpload, LucideUserRound, LucideAArrowUp, LucideAArrowDown, LucideRemoveFormatting, LucideList, LucideListOrdered, LucideListIndentDecrease, LucideListIndentIncrease, LucideTextAlignJustify, LucidePlus, LucideImage, LucideVideo, LucideDatabase, LucideLayers, LucidePanelLeft, LucideMessageSquare, LucideEllipsis, LucideEye, LucideEyeOff, LucideSettings2, LucideStickyNote, LucideMonitor, LucideColumns2, LucidePresentation, LucideCheck, LucideUndo, LucideRedo, LucideSearch } from '@lucide/angular';
+import { LucideX, LucideSquare, LucideCircle, LucideSlash, LucideCopy, LucideTrash2, LucideChevronsUp, LucideChevronsDown, LucideArrowUp, LucideArrowDown, LucideGroup, LucideUngroup, LucideTextAlignStart, LucideTextAlignCenter, LucideTextAlignEnd, LucideChevronUp, LucideChevronDown, LucideAlignHorizontalSpaceAround, LucideAlignVerticalSpaceAround, LucideChevronRight, LucidePenTool, LucideHighlighter, LucideEraser, LucideMousePointer2, LucideChevronLeft, LucidePlay, LucideSparkles, LucidePanelRight, LucideMoveRight, LucidePencil, LucideType, LucideMinus, LucideSpline, LucideArrowLeft, LucideDownload, LucideFilePlus2, LucideFolderOpen, LucideHome, LucideInfo, LucidePrinter, LucideSave, LucideSettings, LucideShare2, LucideUpload, LucideUserRound, LucideAArrowUp, LucideAArrowDown, LucideRemoveFormatting, LucideList, LucideListOrdered, LucideListIndentDecrease, LucideListIndentIncrease, LucideTextAlignJustify, LucidePlus, LucideClipboardPaste, LucideFolderPlus, LucideLayoutGrid, LucidePaintbrush, LucideRotateCcw, LucideScissors, LucideImage, LucideVideo, LucideDatabase, LucideLayers, LucidePanelLeft, LucideMessageSquare, LucideEllipsis, LucideEye, LucideEyeOff, LucideSettings2, LucideStickyNote, LucideMonitor, LucideColumns2, LucidePresentation, LucideCheck, LucideUndo, LucideRedo, LucideSearch } from '@lucide/angular';
 import { jsPDF } from 'jspdf';
 import { DomSanitizer } from '@angular/platform-browser';
 import JSZip from 'jszip';
@@ -96,6 +96,16 @@ const COLOR_KEY_TO_CSS = {
     input: 'input',
     ring: 'ring',
 };
+/**
+ * Derived component tokens: CSS custom properties consumed by the binding
+ * chrome (inspector accents and separators) that are sourced from the base
+ * `ViewerThemeColors` rather than being standalone theme inputs. Emitting
+ * them here lets `var(--pptx-inspector-*)` lookups resolve in every binding.
+ */
+const DERIVED_COLOR_TOKENS = [
+    { source: 'primary', cssSuffix: 'inspector-active' },
+    { source: 'border', cssSuffix: 'inspector-border' },
+];
 /**
  * Convert a `ViewerTheme` into a flat `Record<string, string>` of CSS
  * custom properties (including the `--` prefix) ready to be spread onto
@@ -125,6 +135,16 @@ function themeToCssVars(theme, omitDefaults = false) {
             // @theme :root declaration, which cannot see vars set on a child element.
             vars[`--color-${cssSuffix}`] = value;
         }
+        for (const { source, cssSuffix } of DERIVED_COLOR_TOKENS) {
+            const value = colors[source];
+            if (value === undefined) {
+                continue;
+            }
+            if (omitDefaults && value === defaultThemeColors[source]) {
+                continue;
+            }
+            vars[`--pptx-${cssSuffix}`] = value;
+        }
     }
     // ── Radius ───────────────────────────────────────────────────────
     if (theme.radius !== undefined) {
@@ -155,6 +175,9 @@ function defaultCssVars() {
     for (const [key, cssSuffix] of Object.entries(COLOR_KEY_TO_CSS)) {
         vars[`--pptx-${cssSuffix}`] = defaultThemeColors[key];
     }
+    for (const { source, cssSuffix } of DERIVED_COLOR_TOKENS) {
+        vars[`--pptx-${cssSuffix}`] = defaultThemeColors[source];
+    }
     vars['--pptx-radius'] = defaultRadius;
     return vars;
 }
@@ -4628,6 +4651,70 @@ function tokenize(latex) {
     }
     return tokens;
 }
+// ── Sibling merging ──────────────────────────────────────────────────────────
+/**
+ * True when merging the sibling nodes into one tag-keyed object keeps their
+ * visual order. fast-xml-parser's collapsed shape stores same-tag siblings as
+ * an array under one key and distinct tags under separate keys, so a walker
+ * iterating `Object.keys` re-emits the sequence grouped by tag in
+ * first-appearance order. That equals the original order only while each
+ * tag's occurrences are contiguous (e.g. `r r sSup` survives, `sSup r sSup`
+ * does not: the runs would migrate to the end, turning a^2+b^2 into a2b2+).
+ */
+function mergesLosslessly(nodes) {
+    const seen = new Set();
+    let previous = '';
+    for (const node of nodes) {
+        for (const key of Object.keys(node)) {
+            if (node[key] === undefined) {
+                continue;
+            }
+            if (key !== previous && seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            previous = key;
+        }
+    }
+    return true;
+}
+/**
+ * Merge parsed sibling nodes into a single OMML container object.
+ *
+ * When tags interleave (`m:sSup`, `m:r`, `m:sSup`, ... for a^2+b^2=c^2), the
+ * collapsed tag-keyed shape cannot represent the sibling order, so each node
+ * is wrapped in its own `m:box`: the standard OMML invisible grouping element
+ * (ECMA-376 §22.1.2.13). Every sibling then shares the single `m:box` key and
+ * their array preserves the exact order through MathML rendering, the reverse
+ * LaTeX conversion, and OOXML serialization on save. Grouped-by-tag sequences
+ * keep the compact merged shape.
+ */
+function mergeSiblings(nodes) {
+    if (!mergesLosslessly(nodes)) {
+        return { 'm:box': nodes.map((node) => ({ 'm:e': node })) };
+    }
+    const result = {};
+    for (const node of nodes) {
+        for (const key of Object.keys(node)) {
+            if (node[key] === undefined) {
+                continue;
+            }
+            if (result[key]) {
+                const existing = result[key];
+                if (Array.isArray(existing)) {
+                    existing.push(node[key]);
+                }
+                else {
+                    result[key] = [existing, node[key]];
+                }
+            }
+            else {
+                result[key] = node[key];
+            }
+        }
+    }
+    return result;
+}
 /** Try to parse trailing ^ and _ to wrap the base in superscript/subscript. */
 function tryParseScripts(ctx, base) {
     let hasSup = false;
@@ -4818,26 +4905,10 @@ class LatexParser {
                 'm:nary': nodes[0]['m:nary'],
                 'm:d': nodes[0]['m:d'],
                 'm:func': nodes[0]['m:func'],
+                'm:box': nodes[0]['m:box'],
             };
         }
-        const result = {};
-        for (const n of nodes) {
-            for (const key of Object.keys(n)) {
-                if (result[key]) {
-                    const existing = result[key];
-                    if (Array.isArray(existing)) {
-                        existing.push(n[key]);
-                    }
-                    else {
-                        result[key] = [existing, n[key]];
-                    }
-                }
-                else {
-                    result[key] = n[key];
-                }
-            }
-        }
-        return result;
+        return mergeSiblings(nodes);
     }
     makeRun(text, normal = false) {
         const run = { 'm:t': text };
@@ -4993,23 +5064,7 @@ function convertLatexToOmml(latex) {
     if (nodes.length === 0) {
         return {};
     }
-    const oMath = {};
-    for (const node of nodes) {
-        for (const key of Object.keys(node)) {
-            if (oMath[key]) {
-                const existing = oMath[key];
-                if (Array.isArray(existing)) {
-                    existing.push(node[key]);
-                }
-                else {
-                    oMath[key] = [existing, node[key]];
-                }
-            }
-            else {
-                oMath[key] = node[key];
-            }
-        }
-    }
+    const oMath = mergeSiblings(nodes);
     return {
         'm:oMathPara': {
             'm:oMath': oMath,
@@ -5175,6 +5230,14 @@ function ommlElementToLatex(tag, node) {
             const body = ommlChildrenToLatex(childNode(node, 'm:e'));
             return `${fName}{${body}}`;
         }
+        case 'm:box':
+        case 'm:borderBox': {
+            // Transparent grouping containers: emit the boxed content in place
+            // (mergeSiblings emits per-sibling boxes to preserve ordering).
+            return ensureArr(node['m:e'])
+                .map((e) => ommlChildrenToLatex(e))
+                .join('');
+        }
         case 'm:oMath':
             return ommlChildrenToLatex(node);
         default:
@@ -5203,6 +5266,78 @@ function convertOmmlToLatex(omml) {
     return ommlChildrenToLatex(oMath);
 }
 
+/**
+ * equation-templates: the shared catalogue of pre-built equation templates
+ * shown in every binding's equation editor dialog (React's
+ * `EquationEditorDialog` is the reference implementation). Each entry pairs a
+ * LaTeX source with an i18n key (plus an English fallback label) so the
+ * gallery tiles render identically across React, Vue, Angular, Svelte, and
+ * Vanilla.
+ */
+/** Pre-defined equation templates covering common mathematical formulas. */
+const EQUATION_TEMPLATES = [
+    {
+        label: 'Fraction',
+        latex: '\\frac{a}{b}',
+        i18nKey: 'pptx.equation.template.fraction',
+    },
+    {
+        label: 'Quadratic',
+        latex: 'x=\\frac{-b\\pm\\sqrt{b^{2}-4ac}}{2a}',
+        i18nKey: 'pptx.equation.template.quadratic',
+    },
+    {
+        label: 'Pythagorean',
+        latex: 'a^{2}+b^{2}=c^{2}',
+        i18nKey: 'pptx.equation.template.pythagorean',
+    },
+    {
+        label: 'Sum',
+        latex: '\\sum_{i=1}^{n}{a_{i}}',
+        i18nKey: 'pptx.equation.template.sum',
+    },
+    {
+        label: 'Integral',
+        latex: '\\int_{a}^{b}{f(x)}dx',
+        i18nKey: 'pptx.equation.template.integral',
+    },
+    {
+        label: 'Square Root',
+        latex: '\\sqrt{x^{2}+y^{2}}',
+        i18nKey: 'pptx.equation.template.squareRoot',
+    },
+    {
+        label: 'Limit',
+        latex: '\\lim_{x\\to\\infty}{f(x)}',
+        i18nKey: 'pptx.equation.template.limit',
+    },
+    {
+        label: "Euler's",
+        latex: 'e^{i\\pi}+1=0',
+        i18nKey: 'pptx.equation.template.euler',
+    },
+    {
+        label: 'Matrix 2x2',
+        latex: '\\left[a,b;c,d\\right]',
+        i18nKey: 'pptx.equation.template.matrix',
+    },
+    {
+        label: 'Binomial',
+        latex: '\\left(a+b\\right)^{n}',
+        i18nKey: 'pptx.equation.template.binomial',
+    },
+    {
+        label: 'Derivative',
+        latex: '\\frac{dy}{dx}',
+        i18nKey: 'pptx.equation.template.derivative',
+    },
+    {
+        label: 'Trig Identity',
+        latex: '\\sin^{2}\\theta+\\cos^{2}\\theta=1',
+        i18nKey: 'pptx.equation.template.trigIdentity',
+    },
+];
+
 /**
  * Framework-agnostic chart helpers, a focused Vue port of the React package's
  * `viewer/utils/chart-helpers.ts`, `chart-layout.ts`, and
@@ -69786,7 +69921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], propDecorators: { canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }] } });
 
 // Generated by scripts/inline-shared.mjs from package.json. Do not edit.
-const PPTX_ANGULAR_VIEWER_VERSION = "1.28.0";
+const PPTX_ANGULAR_VIEWER_VERSION = "1.28.1";
 
 /**
  * account-page.component.ts: File > Account content.
@@ -70317,7 +70452,8 @@ class RibbonFontControlsComponent {
         return this.curStyle()?.fontFamily ?? 'Segoe UI';
     }
     curFontSize() {
-        return Math.round(this.curStyle()?.fontSize ?? 18);
+        // Mirror React's HomeSection default (24) shown when nothing is selected.
+        return Math.round(this.curStyle()?.fontSize ?? 24);
     }
     /** Current font colour of the selection (for the swatch + active-state ring). */
     curColor() {
@@ -70486,16 +70622,33 @@ class RibbonFontControlsComponent {
 				S
 			</button>
 		</div>
-		<!-- Text Shadow toggle -->
+		<!-- Text Shadow toggle (icon-only "S" shadow glyph, React TextSection parity). -->
 		<button
 			type="button"
 			class="pptx-rb-gb"
 			[disabled]="!isText()"
 			[ngClass]="curStyle()?.textShadowColor ? 'bg-accent' : ''"
 			[title]="'pptx.textEffects.shadow' | translate"
+			[attr.aria-label]="'pptx.textEffects.shadow' | translate"
 			(click)="toggleShadow()"
 		>
-			Shadow
+			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<text x="6" y="17" font-size="16" font-weight="bold" fill="currentColor" stroke="none">
+					S
+				</text>
+				<text
+					x="7.5"
+					y="18.5"
+					font-size="16"
+					font-weight="bold"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="0.5"
+					opacity="0.4"
+				>
+					S
+				</text>
+			</svg>
 		</button>
 		<!-- Character Spacing -->
 		<select
@@ -70666,16 +70819,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 				S
 			</button>
 		</div>
-		<!-- Text Shadow toggle -->
+		<!-- Text Shadow toggle (icon-only "S" shadow glyph, React TextSection parity). -->
 		<button
 			type="button"
 			class="pptx-rb-gb"
 			[disabled]="!isText()"
 			[ngClass]="curStyle()?.textShadowColor ? 'bg-accent' : ''"
 			[title]="'pptx.textEffects.shadow' | translate"
+			[attr.aria-label]="'pptx.textEffects.shadow' | translate"
 			(click)="toggleShadow()"
 		>
-			Shadow
+			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<text x="6" y="17" font-size="16" font-weight="bold" fill="currentColor" stroke="none">
+					S
+				</text>
+				<text
+					x="7.5"
+					y="18.5"
+					font-size="16"
+					font-weight="bold"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="0.5"
+					opacity="0.4"
+				>
+					S
+				</text>
+			</svg>
 		</button>
 		<!-- Character Spacing -->
 		<select
@@ -71195,31 +71365,35 @@ class RibbonHomeSectionComponent {
 		<!-- Clipboard -->
 		<div class="flex flex-col items-center gap-0.5">
 			<div class="pptx-rb-grp">
+				<!-- Icon-only clipboard buttons with title tooltips, matching React's HomeSection. -->
 				<button
 					type="button"
 					class="pptx-rb-gb"
 					[title]="'pptx.arrange.paste' | translate"
+					[attr.aria-label]="'pptx.arrange.paste' | translate"
 					(click)="paste()"
 				>
-					{{ 'pptx.arrange.paste' | translate }}
+					<svg lucideClipboardPaste class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
 					class="pptx-rb-gb"
 					[title]="'pptx.arrange.cut' | translate"
+					[attr.aria-label]="'pptx.arrange.cut' | translate"
 					[disabled]="!hasSel()"
 					(click)="cut()"
 				>
-					{{ 'pptx.arrange.cut' | translate }}
+					<svg lucideScissors class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
 					class="pptx-rb-gb"
 					[title]="'pptx.arrange.copy' | translate"
+					[attr.aria-label]="'pptx.arrange.copy' | translate"
 					[disabled]="!hasSel()"
 					(click)="copy()"
 				>
-					{{ 'pptx.arrange.copy' | translate }}
+					<svg lucideCopy class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -71229,9 +71403,10 @@ class RibbonHomeSectionComponent {
 					[ngClass]="formatPainterActive() ? 'bg-primary text-primary-foreground' : ''"
 					[disabled]="!canActivateFormatPainter() && !formatPainterActive()"
 					[title]="'pptx.arrange.formatPainter' | translate"
+					[attr.aria-label]="'pptx.arrange.formatPainter' | translate"
 					(click)="toggleFormatPainter.emit()"
 				>
-					{{ 'pptx.ribbon.painter' | translate }}
+					<svg lucidePaintbrush class="h-4 w-4"></svg>
 				</button>
 			</div>
 			<span class="text-[9px] leading-none text-muted-foreground">
@@ -71242,44 +71417,39 @@ class RibbonHomeSectionComponent {
 		<!-- Slides -->
 		<div class="flex flex-col items-center gap-0.5">
 			<div class="pptx-rb-grp">
+				<!-- New Slide (React SlidesGroup parity: New Slide / Layout / Reset /
+				     Section, no Duplicate button). -->
 				<button
 					type="button"
-					class="pptx-rb-gb gap-1.5"
-					[title]="'pptx.ribbon.newSlide' | translate"
+					class="pptx-rb-gb gap-1.5 whitespace-nowrap"
+					[title]="'pptx.home.newSlide' | translate"
 					(click)="editor.addSlide(slideIndex())"
 				>
-					<svg lucidePlus class="h-4 w-4"></svg> {{ 'pptx.ribbon.slide' | translate }}
-				</button>
-				<button
-					type="button"
-					class="pptx-rb-gl"
-					[title]="'pptx.ribbon.duplicateSlide' | translate"
-					(click)="editor.duplicateSlide(slideIndex())"
-				>
-					{{ 'pptx.arrange.duplicate' | translate }}
+					<svg lucidePlus class="h-4 w-4"></svg> {{ 'pptx.home.newSlide' | translate }}
 				</button>
 				<button
 					type="button"
-					class="pptx-rb-gb"
+					class="pptx-rb-gb whitespace-nowrap"
 					[title]="'pptx.master.layout' | translate"
 					(click)="applyLayout.emit('blank')"
 				>
-					{{ 'pptx.master.layout' | translate }}
+					<svg lucideLayoutGrid class="h-4 w-4"></svg> {{ 'pptx.master.layout' | translate }}
 				</button>
 				<button
 					type="button"
-					class="pptx-rb-gb"
+					class="pptx-rb-gb whitespace-nowrap"
 					[title]="'pptx.sections.resetSlideTitle' | translate"
 					(click)="resetSlide.emit()"
 				>
-					{{ 'pptx.sections.resetSlideTitle' | translate }}
+					<svg lucideRotateCcw class="h-4 w-4"></svg> {{ 'pptx.animations.reset' | translate }}
 				</button>
 				<button
 					type="button"
-					class="pptx-rb-gb"
-					[title]="'pptx.sections.sectionButtonLabel' | translate"
+					class="pptx-rb-gl whitespace-nowrap"
+					[title]="'pptx.sections.addSection' | translate"
 					(click)="editor.addSection(slideIndex())"
 				>
+					<svg lucideFolderPlus class="h-4 w-4"></svg>
 					{{ 'pptx.sections.sectionButtonLabel' | translate }}
 				</button>
 			</div>
@@ -71324,7 +71494,7 @@ class RibbonHomeSectionComponent {
 				{{ 'pptx.shortcuts.group.editing' | translate }}
 			</span>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: RibbonFontControlsComponent, selector: "pptx-ribbon-font-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonParagraphControlsComponent, selector: "pptx-ribbon-paragraph-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonEditingSectionComponent, selector: "pptx-ribbon-editing-section", outputs: ["toggleFindReplace", "selectAll"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucideClipboardPaste, selector: "svg[lucideClipboardPaste]" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }, { kind: "component", type: LucideFolderPlus, selector: "svg[lucideFolderPlus]" }, { kind: "component", type: LucideLayoutGrid, selector: "svg[lucideLayoutGrid]" }, { kind: "component", type: LucidePaintbrush, selector: "svg[lucidePaintbrush]" }, { kind: "component", type: LucideRotateCcw, selector: "svg[lucideRotateCcw]" }, { kind: "component", type: LucideScissors, selector: "svg[lucideScissors]" }, { kind: "component", type: RibbonFontControlsComponent, selector: "pptx-ribbon-font-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonParagraphControlsComponent, selector: "pptx-ribbon-paragraph-controls", inputs: ["slideIndex", "selectedElement"] }, { kind: "component", type: RibbonEditingSectionComponent, selector: "pptx-ribbon-editing-section", outputs: ["toggleFindReplace", "selectAll"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RibbonHomeSectionComponent, decorators: [{
             type: Component,
@@ -71337,6 +71507,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         NgClass,
                         TranslatePipe,
                         LucidePlus,
+                        LucideClipboardPaste,
+                        LucideCopy,
+                        LucideFolderPlus,
+                        LucideLayoutGrid,
+                        LucidePaintbrush,
+                        LucideRotateCcw,
+                        LucideScissors,
                         RibbonFontControlsComponent,
                         RibbonParagraphControlsComponent,
                         RibbonEditingSectionComponent,
@@ -71345,31 +71522,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 		<!-- Clipboard -->
 		<div class="flex flex-col items-center gap-0.5">
 			<div class="pptx-rb-grp">
+				<!-- Icon-only clipboard buttons with title tooltips, matching React's HomeSection. -->
 				<button
 					type="button"
 					class="pptx-rb-gb"
 					[title]="'pptx.arrange.paste' | translate"
+					[attr.aria-label]="'pptx.arrange.paste' | translate"
 					(click)="paste()"
 				>
-					{{ 'pptx.arrange.paste' | translate }}
+					<svg lucideClipboardPaste class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
 					class="pptx-rb-gb"
 					[title]="'pptx.arrange.cut' | translate"
+					[attr.aria-label]="'pptx.arrange.cut' | translate"
 					[disabled]="!hasSel()"
 					(click)="cut()"
 				>
-					{{ 'pptx.arrange.cut' | translate }}
+					<svg lucideScissors class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
 					class="pptx-rb-gb"
 					[title]="'pptx.arrange.copy' | translate"
+					[attr.aria-label]="'pptx.arrange.copy' | translate"
 					[disabled]="!hasSel()"
 					(click)="copy()"
 				>
-					{{ 'pptx.arrange.copy' | translate }}
+					<svg lucideCopy class="h-4 w-4"></svg>
 				</button>
 				<button
 					type="button"
@@ -71379,9 +71560,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 					[ngClass]="formatPainterActive() ? 'bg-primary text-primary-foreground' : ''"
 					[disabled]="!canActivateFormatPainter() && !formatPainterActive()"
 					[title]="'pptx.arrange.formatPainter' | translate"
+					[attr.aria-label]="'pptx.arrange.formatPainter' | translate"
 					(click)="toggleFormatPainter.emit()"
 				>
-					{{ 'pptx.ribbon.painter' | translate }}
+					<svg lucidePaintbrush class="h-4 w-4"></svg>
 				</button>
 			</div>
 			<span class="text-[9px] leading-none text-muted-foreground">
@@ -71392,44 +71574,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 		<!-- Slides -->
 		<div class="flex flex-col items-center gap-0.5">
 			<div class="pptx-rb-grp">
+				<!-- New Slide (React SlidesGroup parity: New Slide / Layout / Reset /
+				     Section, no Duplicate button). -->
 				<button
 					type="button"
-					class="pptx-rb-gb gap-1.5"
-					[title]="'pptx.ribbon.newSlide' | translate"
+					class="pptx-rb-gb gap-1.5 whitespace-nowrap"
+					[title]="'pptx.home.newSlide' | translate"
 					(click)="editor.addSlide(slideIndex())"
 				>
-					<svg lucidePlus class="h-4 w-4"></svg> {{ 'pptx.ribbon.slide' | translate }}
-				</button>
-				<button
-					type="button"
-					class="pptx-rb-gl"
-					[title]="'pptx.ribbon.duplicateSlide' | translate"
-					(click)="editor.duplicateSlide(slideIndex())"
-				>
-					{{ 'pptx.arrange.duplicate' | translate }}
+					<svg lucidePlus class="h-4 w-4"></svg> {{ 'pptx.home.newSlide' | translate }}
 				</button>
 				<button
 					type="button"
-					class="pptx-rb-gb"
+					class="pptx-rb-gb whitespace-nowrap"
 					[title]="'pptx.master.layout' | translate"
 					(click)="applyLayout.emit('blank')"
 				>
-					{{ 'pptx.master.layout' | translate }}
+					<svg lucideLayoutGrid class="h-4 w-4"></svg> {{ 'pptx.master.layout' | translate }}
 				</button>
 				<button
 					type="button"
-					class="pptx-rb-gb"
+					class="pptx-rb-gb whitespace-nowrap"
 					[title]="'pptx.sections.resetSlideTitle' | translate"
 					(click)="resetSlide.emit()"
 				>
-					{{ 'pptx.sections.resetSlideTitle' | translate }}
+					<svg lucideRotateCcw class="h-4 w-4"></svg> {{ 'pptx.animations.reset' | translate }}
 				</button>
 				<button
 					type="button"
-					class="pptx-rb-gb"
-					[title]="'pptx.sections.sectionButtonLabel' | translate"
+					class="pptx-rb-gl whitespace-nowrap"
+					[title]="'pptx.sections.addSection' | translate"
 					(click)="editor.addSection(slideIndex())"
 				>
+					<svg lucideFolderPlus class="h-4 w-4"></svg>
 					{{ 'pptx.sections.sectionButtonLabel' | translate }}
 				</button>
 			</div>
@@ -72773,8 +72950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  *   LEFT  : slides-pane toggle
  *   RIGHT : Comments (with count), Present split-button + dropdown
  *           (From Beginning / Presenter View / Broadcast), +Show (custom
- *           shows), Inspector toggle, overflow "..." menu (exports / print /
- *           properties / accessibility / save).
+ *           shows), Inspector toggle, Settings cog, overflow "..." menu
+ *           (exports / print / properties / accessibility / save).
  *
  * Undo/Redo/Find and Save moved up to the title bar; Record and Share moved to
  * the ribbon tab row (both mirroring React). Slide navigation and zoom live in
@@ -72820,6 +72997,8 @@ class RibbonPrimaryRowComponent {
     broadcast = output();
     openCustomShows = output();
     toggleInspector = output();
+    /** Emitted when the user clicks the Settings cog (opens the Settings dialog). */
+    openSettings = output();
     exportPng = output();
     exportPdf = output();
     exportGif = output();
@@ -72835,6 +73014,28 @@ class RibbonPrimaryRowComponent {
     toolbar = toolbarVisibility(this.hiddenActions);
     overflowItems = computed(() => visibleOverflowItems(this.hiddenActions()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []));
+    presentRoot = viewChild('presentRoot', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentRoot" }] : /* istanbul ignore next */ []));
+    overflowRoot = viewChild('overflowRoot', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowRoot" }] : /* istanbul ignore next */ []));
+    /** Escape dismisses any open dropdown (Present options / overflow). */
+    onDocumentEscape() {
+        this.presentMenuOpen.set(false);
+        this.overflowOpen.set(false);
+    }
+    /** A pointerdown outside a dropdown's trigger + panel dismisses it. */
+    onDocumentPointerDown(event) {
+        const target = event.target;
+        if (!(target instanceof Node)) {
+            return;
+        }
+        if (this.presentMenuOpen() && !this.presentRoot()?.nativeElement.contains(target)) {
+            this.presentMenuOpen.set(false);
+        }
+        if (this.overflowOpen() && !this.overflowRoot()?.nativeElement.contains(target)) {
+            this.overflowOpen.set(false);
+        }
+    }
     onOverflow(key) {
         this.overflowOpen.set(false);
         switch (key) {
@@ -72867,7 +73068,7 @@ class RibbonPrimaryRowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RibbonPrimaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RibbonPrimaryRowComponent, isStandalone: true, selector: "pptx-ribbon-primary-row", inputs: { slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, inspectorOpen: { classPropertyName: "inspectorOpen", publicName: "inspectorOpen", isSignal: true, isRequired: false, transformFunction: null }, commentsOpen: { classPropertyName: "commentsOpen", publicName: "commentsOpen", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null }, hiddenActions: { classPropertyName: "hiddenActions", publicName: "hiddenActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSidebar: "toggleSidebar", toggleComments: "toggleComments", present: "present", presenter: "presenter", broadcast: "broadcast", openCustomShows: "openCustomShows", toggleInspector: "toggleInspector", exportPng: "exportPng", exportPdf: "exportPdf", exportGif: "exportGif", exportVideo: "exportVideo", print: "print", info: "info", a11y: "a11y", save: "save" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RibbonPrimaryRowComponent, isStandalone: true, selector: "pptx-ribbon-primary-row", inputs: { slideCount: { classPropertyName: "slideCount", publicName: "slideCount", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, inspectorOpen: { classPropertyName: "inspectorOpen", publicName: "inspectorOpen", isSignal: true, isRequired: false, transformFunction: null }, commentsOpen: { classPropertyName: "commentsOpen", publicName: "commentsOpen", isSignal: true, isRequired: false, transformFunction: null }, commentCount: { classPropertyName: "commentCount", publicName: "commentCount", isSignal: true, isRequired: false, transformFunction: null }, hiddenActions: { classPropertyName: "hiddenActions", publicName: "hiddenActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSidebar: "toggleSidebar", toggleComments: "toggleComments", present: "present", presenter: "presenter", broadcast: "broadcast", openCustomShows: "openCustomShows", toggleInspector: "toggleInspector", openSettings: "openSettings", exportPng: "exportPng", exportPdf: "exportPdf", exportGif: "exportGif", exportVideo: "exportVideo", print: "print", info: "info", a11y: "a11y", save: "save" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:pointerdown": "onDocumentPointerDown($event)" } }, viewQueries: [{ propertyName: "presentRoot", first: true, predicate: ["presentRoot"], descendants: true, isSignal: true }, { propertyName: "overflowRoot", first: true, predicate: ["overflowRoot"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div class="flex items-center gap-0.5 px-1.5 py-0.5">
 			<!-- Left: slides pane toggle (undo/redo/find moved to the title bar) -->
 			<button
@@ -72903,7 +73104,7 @@ class RibbonPrimaryRowComponent {
 			</button>
 
 			<!-- Present split-button + dropdown -->
-			<div class="relative inline-flex items-center">
+			<div class="relative inline-flex items-center" #presentRoot>
 				<button
 					type="button"
 					class="pptx-rb-pill rounded-r-none"
@@ -72978,8 +73179,19 @@ class RibbonPrimaryRowComponent {
 				<svg lucidePanelRight class="h-4 w-4"></svg>
 			</button>
 
+			<!-- Settings (mirrors React: between the panel toggle and the overflow "...") -->
+			<button
+				type="button"
+				class="pptx-rb-icon text-muted-foreground"
+				[title]="'pptx.toolbar.settingsShortcuts' | translate"
+				[attr.aria-label]="'pptx.toolbar.settings' | translate"
+				(click)="openSettings.emit()"
+			>
+				<svg lucideSettings class="h-3.5 w-3.5"></svg>
+			</button>
+
 			<!-- Overflow menu -->
-			<div class="relative inline-flex items-center">
+			<div class="relative inline-flex items-center" #overflowRoot>
 				<button
 					type="button"
 					class="pptx-rb-icon text-muted-foreground"
@@ -73012,7 +73224,7 @@ class RibbonPrimaryRowComponent {
 				}
 			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucidePanelRight, selector: "svg[lucidePanelRight]" }, { kind: "component", type: LucideMessageSquare, selector: "svg[lucideMessageSquare]" }, { kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucidePanelRight, selector: "svg[lucidePanelRight]" }, { kind: "component", type: LucideMessageSquare, selector: "svg[lucideMessageSquare]" }, { kind: "component", type: LucidePlay, selector: "svg[lucidePlay]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideSettings, selector: "svg[lucideSettings]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RibbonPrimaryRowComponent, decorators: [{
             type: Component,
@@ -73030,6 +73242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         LucideChevronDown,
                         LucidePlus,
                         LucideEllipsis,
+                        LucideSettings,
                     ],
                     template: `
 		<div class="flex items-center gap-0.5 px-1.5 py-0.5">
@@ -73067,7 +73280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 			</button>
 
 			<!-- Present split-button + dropdown -->
-			<div class="relative inline-flex items-center">
+			<div class="relative inline-flex items-center" #presentRoot>
 				<button
 					type="button"
 					class="pptx-rb-pill rounded-r-none"
@@ -73142,8 +73355,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 				<svg lucidePanelRight class="h-4 w-4"></svg>
 			</button>
 
+			<!-- Settings (mirrors React: between the panel toggle and the overflow "...") -->
+			<button
+				type="button"
+				class="pptx-rb-icon text-muted-foreground"
+				[title]="'pptx.toolbar.settingsShortcuts' | translate"
+				[attr.aria-label]="'pptx.toolbar.settings' | translate"
+				(click)="openSettings.emit()"
+			>
+				<svg lucideSettings class="h-3.5 w-3.5"></svg>
+			</button>
+
 			<!-- Overflow menu -->
-			<div class="relative inline-flex items-center">
+			<div class="relative inline-flex items-center" #overflowRoot>
 				<button
 					type="button"
 					class="pptx-rb-icon text-muted-foreground"
@@ -73178,7 +73402,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 		</div>
 	`,
                 }]
-        }], propDecorators: { slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], inspectorOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorOpen", required: false }] }], commentsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentsOpen", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], hiddenActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenActions", required: false }] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], toggleComments: [{ type: i0.Output, args: ["toggleComments"] }], present: [{ type: i0.Output, args: ["present"] }], presenter: [{ type: i0.Output, args: ["presenter"] }], broadcast: [{ type: i0.Output, args: ["broadcast"] }], openCustomShows: [{ type: i0.Output, args: ["openCustomShows"] }], toggleInspector: [{ type: i0.Output, args: ["toggleInspector"] }], exportPng: [{ type: i0.Output, args: ["exportPng"] }], exportPdf: [{ type: i0.Output, args: ["exportPdf"] }], exportGif: [{ type: i0.Output, args: ["exportGif"] }], exportVideo: [{ type: i0.Output, args: ["exportVideo"] }], print: [{ type: i0.Output, args: ["print"] }], info: [{ type: i0.Output, args: ["info"] }], a11y: [{ type: i0.Output, args: ["a11y"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+        }], propDecorators: { slideCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideCount", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], inspectorOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorOpen", required: false }] }], commentsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentsOpen", required: false }] }], commentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentCount", required: false }] }], hiddenActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenActions", required: false }] }], toggleSidebar: [{ type: i0.Output, args: ["toggleSidebar"] }], toggleComments: [{ type: i0.Output, args: ["toggleComments"] }], present: [{ type: i0.Output, args: ["present"] }], presenter: [{ type: i0.Output, args: ["presenter"] }], broadcast: [{ type: i0.Output, args: ["broadcast"] }], openCustomShows: [{ type: i0.Output, args: ["openCustomShows"] }], toggleInspector: [{ type: i0.Output, args: ["toggleInspector"] }], openSettings: [{ type: i0.Output, args: ["openSettings"] }], exportPng: [{ type: i0.Output, args: ["exportPng"] }], exportPdf: [{ type: i0.Output, args: ["exportPdf"] }], exportGif: [{ type: i0.Output, args: ["exportGif"] }], exportVideo: [{ type: i0.Output, args: ["exportVideo"] }], print: [{ type: i0.Output, args: ["print"] }], info: [{ type: i0.Output, args: ["info"] }], a11y: [{ type: i0.Output, args: ["a11y"] }], save: [{ type: i0.Output, args: ["save"] }], presentRoot: [{ type: i0.ViewChild, args: ['presentRoot', { isSignal: true }] }], overflowRoot: [{ type: i0.ViewChild, args: ['overflowRoot', { isSignal: true }] }], onDocumentEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }] } });
 
 /**
  * ribbon-tab-list.component.ts: the ribbon's tab strip row, split out of
@@ -73612,6 +73842,7 @@ class RibbonComponent {
 				(broadcast)="broadcast.emit()"
 				(openCustomShows)="openCustomShows.emit()"
 				(toggleInspector)="toggleInspector.emit()"
+				(openSettings)="requestSettings()"
 				(exportPng)="exportPng.emit()"
 				(exportPdf)="exportPdf.emit()"
 				(exportGif)="exportGif.emit()"
@@ -73733,7 +73964,7 @@ class RibbonComponent {
 				/>
 			</div>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "component", type: RibbonPrimaryRowComponent, selector: "pptx-ribbon-primary-row", inputs: ["slideCount", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount", "hiddenActions"], outputs: ["toggleSidebar", "toggleComments", "present", "presenter", "broadcast", "openCustomShows", "toggleInspector", "exportPng", "exportPdf", "exportGif", "exportVideo", "print", "info", "a11y", "save"] }, { kind: "component", type: RibbonTabListComponent, selector: "pptx-ribbon-tab-list", inputs: ["activeTab", "canEdit", "collabConnected", "connectedCount", "ribbonExpanded", "hiddenActions"], outputs: ["selectTab", "record", "share", "toggleRibbonExpanded"] }, { kind: "component", type: RibbonContentComponent, selector: "pptx-ribbon-content", inputs: ["activeTab", "slideIndex", "slideCount", "canEdit", "selectedElement", "formatPainterActive", "canActivateFormatPainter", "exporting", "hasMacros", "hiddenActions", "accountAuth"], outputs: ["selectTab", "find", "share", "openFile", "openRecentFile", "createPresentation", "save", "savePpsx", "savePptm", "packageForSharing", "signatures", "info", "print", "toggleFormatPainter", "exportPng", "exportPdf", "exportGif", "exportVideo", "copySlideAsImage", "replace", "openSmartArtDialog", "openEquationDialog", "openPassword", "openFontEmbedding", "openVersionHistory", "openSettings"] }, { kind: "component", type: RibbonContentSecondaryComponent, selector: "pptx-ribbon-content-secondary", inputs: ["activeTab", "slideIndex", "slideCount", "canEdit", "selectedElement", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToShape", "eyedropperActive", "themeGalleryOpen", "spellCheckEnabled", "showSubtitles", "hiddenActions"], outputs: ["present", "presenter", "record", "presentFromBeginning", "rehearseTimings", "toggleSubtitles", "openSubtitleSettings", "recordFromBeginning", "recordFromCurrent", "spellCheckChange", "broadcast", "info", "print", "comments", "a11y", "link", "openSorter", "openMasterView", "toggleNotes", "toggleInspector", "drawToolChange", "toggleThemeGallery", "toggleGrid", "toggleRulers", "toggleGuides", "toggleSelectionPane", "openCustomShows", "toggleSnapToGrid", "toggleSnapToShape", "addGuide", "zoomToFit", "toggleEyedropper", "openSetUpSlideShow", "openCompare", "openShortcuts", "openSettings"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: RibbonPrimaryRowComponent, selector: "pptx-ribbon-primary-row", inputs: ["slideCount", "sidebarCollapsed", "inspectorOpen", "commentsOpen", "commentCount", "hiddenActions"], outputs: ["toggleSidebar", "toggleComments", "present", "presenter", "broadcast", "openCustomShows", "toggleInspector", "openSettings", "exportPng", "exportPdf", "exportGif", "exportVideo", "print", "info", "a11y", "save"] }, { kind: "component", type: RibbonTabListComponent, selector: "pptx-ribbon-tab-list", inputs: ["activeTab", "canEdit", "collabConnected", "connectedCount", "ribbonExpanded", "hiddenActions"], outputs: ["selectTab", "record", "share", "toggleRibbonExpanded"] }, { kind: "component", type: RibbonContentComponent, selector: "pptx-ribbon-content", inputs: ["activeTab", "slideIndex", "slideCount", "canEdit", "selectedElement", "formatPainterActive", "canActivateFormatPainter", "exporting", "hasMacros", "hiddenActions", "accountAuth"], outputs: ["selectTab", "find", "share", "openFile", "openRecentFile", "createPresentation", "save", "savePpsx", "savePptm", "packageForSharing", "signatures", "info", "print", "toggleFormatPainter", "exportPng", "exportPdf", "exportGif", "exportVideo", "copySlideAsImage", "replace", "openSmartArtDialog", "openEquationDialog", "openPassword", "openFontEmbedding", "openVersionHistory", "openSettings"] }, { kind: "component", type: RibbonContentSecondaryComponent, selector: "pptx-ribbon-content-secondary", inputs: ["activeTab", "slideIndex", "slideCount", "canEdit", "selectedElement", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToShape", "eyedropperActive", "themeGalleryOpen", "spellCheckEnabled", "showSubtitles", "hiddenActions"], outputs: ["present", "presenter", "record", "presentFromBeginning", "rehearseTimings", "toggleSubtitles", "openSubtitleSettings", "recordFromBeginning", "recordFromCurrent", "spellCheckChange", "broadcast", "info", "print", "comments", "a11y", "link", "openSorter", "openMasterView", "toggleNotes", "toggleInspector", "drawToolChange", "toggleThemeGallery", "toggleGrid", "toggleRulers", "toggleGuides", "toggleSelectionPane", "openCustomShows", "toggleSnapToGrid", "toggleSnapToShape", "addGuide", "zoomToFit", "toggleEyedropper", "openSetUpSlideShow", "openCompare", "openShortcuts", "openSettings"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
@@ -73768,6 +73999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 				(broadcast)="broadcast.emit()"
 				(openCustomShows)="openCustomShows.emit()"
 				(toggleInspector)="toggleInspector.emit()"
+				(openSettings)="requestSettings()"
 				(exportPng)="exportPng.emit()"
 				(exportPdf)="exportPdf.emit()"
 				(exportGif)="exportGif.emit()"
@@ -86445,7 +86677,8 @@ class SlideSizeCardComponent {
 			<h3 class="icard__heading">{{ 'pptx.slideSize.title' | translate }}</h3>
 			<div class="icard__grid2">
 				<label class="icard__row">
-					<span class="icard__label">{{ 'pptx.slideSize.width' | translate }}</span>
+					<!-- Compact "W"/"H" labels, matching React's SlideSizeCard. -->
+					<span class="icard__label">W</span>
 					<input
 						type="number"
 						class="icard__input icard__input--number"
@@ -86456,7 +86689,7 @@ class SlideSizeCardComponent {
 					/>
 				</label>
 				<label class="icard__row">
-					<span class="icard__label">{{ 'pptx.slideSize.height' | translate }}</span>
+					<span class="icard__label">H</span>
 					<input
 						type="number"
 						class="icard__input icard__input--number"
@@ -86477,7 +86710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 			<h3 class="icard__heading">{{ 'pptx.slideSize.title' | translate }}</h3>
 			<div class="icard__grid2">
 				<label class="icard__row">
-					<span class="icard__label">{{ 'pptx.slideSize.width' | translate }}</span>
+					<!-- Compact "W"/"H" labels, matching React's SlideSizeCard. -->
+					<span class="icard__label">W</span>
 					<input
 						type="number"
 						class="icard__input icard__input--number"
@@ -86488,7 +86722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 					/>
 				</label>
 				<label class="icard__row">
-					<span class="icard__label">{{ 'pptx.slideSize.height' | translate }}</span>
+					<span class="icard__label">H</span>
 					<input
 						type="number"
 						class="icard__input icard__input--number"
@@ -86568,7 +86802,7 @@ class SlideThemeOverridePanelComponent {
 		<div class="override">
 			<label class="toggle">
 				<input type="checkbox" [checked]="active()" (change)="toggle($event)" />
-				<span>Use slide color override</span>
+				<span>{{ 'pptx.themeOverride.enableOverride' | translate }}</span>
 			</label>
 			@if (active()) {
 				@for (alias of aliases; track alias) {
@@ -86584,15 +86818,15 @@ class SlideThemeOverridePanelComponent {
 				}
 			}
 		</div>
-	`, isInline: true, styles: [".override{display:grid;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--pptx-inspector-border, #444);font-size:11px}.toggle{display:flex;align-items:center;gap:7px}.mapping{display:grid;grid-template-columns:90px 16px 1fr;align-items:center;gap:6px}.mapping span{overflow:hidden;text-overflow:ellipsis;color:var(--pptx-inspector-muted, #aaa)}i{width:14px;height:14px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px}select{box-sizing:border-box;min-width:0;width:100%;padding:3px 5px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:var(--pptx-inspector-input-bg, #2d2d2d);color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".override{display:grid;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--pptx-inspector-border, #444);font-size:11px}.toggle{display:flex;align-items:center;gap:7px}.mapping{display:grid;grid-template-columns:90px 16px 1fr;align-items:center;gap:6px}.mapping span{overflow:hidden;text-overflow:ellipsis;color:var(--pptx-inspector-muted, #aaa)}i{width:14px;height:14px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px}select{box-sizing:border-box;min-width:0;width:100%;padding:3px 5px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;background:var(--pptx-inspector-input-bg, #2d2d2d);color:inherit}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SlideThemeOverridePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-slide-theme-override-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'pptx-slide-theme-override-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: `
 		<div class="override">
 			<label class="toggle">
 				<input type="checkbox" [checked]="active()" (change)="toggle($event)" />
-				<span>Use slide color override</span>
+				<span>{{ 'pptx.themeOverride.enableOverride' | translate }}</span>
 			</label>
 			@if (active()) {
 				@for (alias of aliases; track alias) {
@@ -87972,9 +88206,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
-/** Pixel width of each thumbnail clipping box inside the panel. */
-const THUMB_W$1 = 150;
-const THUMB_CARD_CHROME_HEIGHT = 31;
+/** Pixel width of each thumbnail clipping box inside the panel. Slightly
+ *  narrower than the panel so the slide-number column fits to its left
+ *  (React SlideItem lays the number beside, not below, the preview). */
+const THUMB_W$1 = 132;
+const THUMB_CARD_CHROME_HEIGHT = 12;
 /**
  * SlidesPanelComponent: vertical slide-strip for the editor sidebar.
  *
@@ -88110,7 +88346,7 @@ class SlidesPanelComponent {
         return this.editor.sections().findIndex((section) => section.id === sectionId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SlidesPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SlidesPanelComponent, isStandalone: true, selector: "pptx-slides-panel", inputs: { canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"pptx-ng-spanel\">\n\t<!-- Scrollable slide list -->\n\t<div\n\t\t#scrollViewport\n\t\tclass=\"pptx-ng-spanel-scroll\"\n\t\trole=\"listbox\"\n\t\t[attr.aria-label]=\"'pptx.sections.slides' | translate\"\n\t\t(scroll)=\"onScroll()\"\n\t>\n\t\t<div\n\t\t\tclass=\"pptx-ng-spanel-space\"\n\t\t\t[attr.data-virtualized]=\"shouldVirtualize() ? 'true' : null\"\n\t\t\t[style.height.px]=\"shouldVirtualize() ? virtualRange().totalHeight : null\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"pptx-ng-spanel-window\"\n\t\t\t\t[class.is-virtualized]=\"shouldVirtualize()\"\n\t\t\t\t[style.top.px]=\"shouldVirtualize() ? virtualRange().offsetY : null\"\n\t\t\t>\n\t\t\t\t@for (item of renderedSlides(); track item.slide.id) {\n\t\t\t\t\t@let slide = item.slide;\n\t\t\t\t\t@let i = item.index;\n\t\t\t\t\t@if (item.sectionStart) {\n\t\t\t\t\t\t<header class=\"pptx-ng-section-header\" [attr.data-section-id]=\"item.section?.id\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-section-toggle\"\n\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"!item.section?.collapsed\"\n\t\t\t\t\t\t\t\t(click)=\"item.section && editor.sectionOps.toggle(item.section.id)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{{ item.section?.collapsed ? '\u25B8' : '\u25BE' }}</span>\n\t\t\t\t\t\t\t\t<strong>{{\n\t\t\t\t\t\t\t\t\titem.section?.name ?? ('pptx.slides.ungroupedSlides' | translate)\n\t\t\t\t\t\t\t\t}}</strong>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t@if (item.section) {\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-section-actions\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"onRenameSection(item.section.id, item.section.name)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u270E\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === 0\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'up')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === editor.sections().length - 1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'down')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.delete(item.section.id)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u00D7\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</header>\n\t\t\t\t\t}\n\t\t\t\t\t@if (!item.section?.collapsed) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-card\"\n\t\t\t\t\t\t\t[class.is-active]=\"i === activeIndex()\"\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t[attr.aria-selected]=\"i === activeIndex()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.notes.slideN' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- Thumbnail (clickable to select) -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-thumb-btn\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slidesPanel.goToSlide' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t\t(click)=\"select.emit(i)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<!-- Clipping wrapper: neutralises the 1rem auto margin from SlideCanvas -->\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-spanel-clip\" [ngStyle]=\"clipStyle()\">\n\t\t\t\t\t\t\t\t\t<pptx-slide-canvas\n\t\t\t\t\t\t\t\t\t\t[slide]=\"slide\"\n\t\t\t\t\t\t\t\t\t\t[templateElements]=\"editor.templateElementsBySlideId()[slide.id] ?? []\"\n\t\t\t\t\t\t\t\t\t\t[canvasSize]=\"canvasSize()\"\n\t\t\t\t\t\t\t\t\t\t[mediaDataUrls]=\"mediaDataUrls()\"\n\t\t\t\t\t\t\t\t\t\t[zoom]=\"thumbZoom()\"\n\t\t\t\t\t\t\t\t\t\t[editable]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[autoFit]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[interactive]=\"false\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Slide number badge -->\n\t\t\t\t\t\t\t<span class=\"pptx-ng-spanel-num\" aria-hidden=\"true\">{{ i + 1 }}</span>\n\n\t\t\t\t\t\t\t<!-- Per-card action toolbar (visible on hover / focus-within) -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-actions\"\n\t\t\t\t\t\t\t\trole=\"toolbar\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slideMenu.slideActions' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.ribbon.duplicateSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.duplicate' | translate\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDuplicate(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideCopy class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.slidesPanel.deleteSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.delete' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"editor.slides().length <= 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDelete(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideTrash2 class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === 0\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveUp(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowUp class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === editor.slides().length - 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveDown(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowDown class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\n\t<!-- Footer: add new slide -->\n\t<footer class=\"pptx-ng-spanel-footer\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"pptx-ng-spanel-add\"\n\t\t\t[attr.aria-label]=\"'pptx.sections.addSlide' | translate\"\n\t\t\t(click)=\"onAddSlide()\"\n\t\t>\n\t\t\t<svg lucidePlus class=\"h-3.5 w-3.5\"></svg> {{ 'pptx.sections.addSlide' | translate }}\n\t\t</button>\n\t</footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.pptx-ng-spanel{display:flex;flex-direction:column;height:100%;background:#1e1e1e;color:#e5e5e5;border-right:1px solid rgba(255,255,255,.08);overflow:hidden}.pptx-ng-spanel-scroll{flex:1;overflow-y:auto;padding:.5rem .375rem}.pptx-ng-spanel-space{position:relative}.pptx-ng-spanel-window{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-spanel-window.is-virtualized{position:absolute;inset-inline:0}.pptx-ng-section-header{display:flex;align-items:center;gap:.2rem;min-height:1.75rem;color:#ffffff94}.pptx-ng-section-toggle{display:flex;align-items:center;gap:.35rem;min-width:0;flex:1;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.pptx-ng-section-toggle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}.pptx-ng-section-actions{display:flex}.pptx-ng-section-actions button{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:.2rem;background:transparent;color:inherit;cursor:pointer}.pptx-ng-section-actions button:hover:not(:disabled){background:#3b82f659;color:#fff}.pptx-ng-section-actions button:disabled{opacity:.3}.pptx-ng-spanel-card{position:relative;border-radius:.375rem;border:2px solid transparent;background:transparent;transition:border-color .15s,background .15s}.pptx-ng-spanel-card:hover,.pptx-ng-spanel-card:focus-within{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-spanel-card.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-spanel-thumb-btn{display:block;width:100%;padding:.375rem .375rem 0;border:none;background:transparent;cursor:pointer;color:inherit;line-height:0}.pptx-ng-spanel-thumb-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.25rem}.pptx-ng-spanel-clip{overflow:hidden;border-radius:2px}.pptx-ng-spanel-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-spanel-num{display:block;text-align:center;font-size:.625rem;line-height:1.6;color:#ffffff73;-webkit-user-select:none;user-select:none;padding-bottom:.25rem}.pptx-ng-spanel-actions{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:.125rem;opacity:0;pointer-events:none;transition:opacity .12s}.pptx-ng-spanel-card:hover .pptx-ng-spanel-actions,.pptx-ng-spanel-card:focus-within .pptx-ng-spanel-actions{opacity:1;pointer-events:auto}.pptx-ng-spanel-action{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;padding:0;border:none;border-radius:.25rem;background:#1e1e1ed9;color:#e5e5e5;font-size:.6875rem;cursor:pointer;transition:background .12s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-spanel-action:hover:not([disabled]){background:#3b82f6bf}.pptx-ng-spanel-action[disabled]{opacity:.3;cursor:not-allowed}.pptx-ng-spanel-footer{flex-shrink:0;padding:.5rem .375rem;border-top:1px solid rgba(255,255,255,.08)}.pptx-ng-spanel-add{display:block;width:100%;padding:.4375rem 0;border:1px dashed rgba(255,255,255,.2);border-radius:.375rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.pptx-ng-spanel-add:hover{background:#3b82f626;border-color:#3b82f6;color:#e5e5e5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToShape", "guideCommand", "spellCheck", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SlidesPanelComponent, isStandalone: true, selector: "pptx-slides-panel", inputs: { canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"pptx-ng-spanel\">\n\t<!-- Scrollable slide list -->\n\t<div\n\t\t#scrollViewport\n\t\tclass=\"pptx-ng-spanel-scroll\"\n\t\trole=\"listbox\"\n\t\t[attr.aria-label]=\"'pptx.sections.slides' | translate\"\n\t\t(scroll)=\"onScroll()\"\n\t>\n\t\t<div\n\t\t\tclass=\"pptx-ng-spanel-space\"\n\t\t\t[attr.data-virtualized]=\"shouldVirtualize() ? 'true' : null\"\n\t\t\t[style.height.px]=\"shouldVirtualize() ? virtualRange().totalHeight : null\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"pptx-ng-spanel-window\"\n\t\t\t\t[class.is-virtualized]=\"shouldVirtualize()\"\n\t\t\t\t[style.top.px]=\"shouldVirtualize() ? virtualRange().offsetY : null\"\n\t\t\t>\n\t\t\t\t@for (item of renderedSlides(); track item.slide.id) {\n\t\t\t\t\t@let slide = item.slide;\n\t\t\t\t\t@let i = item.index;\n\t\t\t\t\t@if (item.sectionStart) {\n\t\t\t\t\t\t<header class=\"pptx-ng-section-header\" [attr.data-section-id]=\"item.section?.id\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-section-toggle\"\n\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"!item.section?.collapsed\"\n\t\t\t\t\t\t\t\t(click)=\"item.section && editor.sectionOps.toggle(item.section.id)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{{ item.section?.collapsed ? '\u25B8' : '\u25BE' }}</span>\n\t\t\t\t\t\t\t\t<strong>{{\n\t\t\t\t\t\t\t\t\titem.section?.name ?? ('pptx.slides.ungroupedSlides' | translate)\n\t\t\t\t\t\t\t\t}}</strong>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t@if (item.section) {\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-section-actions\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"onRenameSection(item.section.id, item.section.name)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u270E\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === 0\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'up')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === editor.sections().length - 1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'down')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.delete(item.section.id)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u00D7\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</header>\n\t\t\t\t\t}\n\t\t\t\t\t@if (!item.section?.collapsed) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-card\"\n\t\t\t\t\t\t\t[class.is-active]=\"i === activeIndex()\"\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t[attr.aria-selected]=\"i === activeIndex()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.notes.slideN' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- Thumbnail (clickable to select). Slide number sits to the LEFT\n\t\t\t\t\t\t\t     of the preview (React SlideItem parity), not below it. -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-thumb-btn\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slidesPanel.goToSlide' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t\t(click)=\"select.emit(i)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<!-- Slide number badge (left column) -->\n\t\t\t\t\t\t\t\t<span class=\"pptx-ng-spanel-num\" aria-hidden=\"true\">{{ i + 1 }}</span>\n\n\t\t\t\t\t\t\t\t<!-- Clipping wrapper: neutralises the 1rem auto margin from SlideCanvas -->\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-spanel-clip\" [ngStyle]=\"clipStyle()\">\n\t\t\t\t\t\t\t\t\t<pptx-slide-canvas\n\t\t\t\t\t\t\t\t\t\t[slide]=\"slide\"\n\t\t\t\t\t\t\t\t\t\t[templateElements]=\"editor.templateElementsBySlideId()[slide.id] ?? []\"\n\t\t\t\t\t\t\t\t\t\t[canvasSize]=\"canvasSize()\"\n\t\t\t\t\t\t\t\t\t\t[mediaDataUrls]=\"mediaDataUrls()\"\n\t\t\t\t\t\t\t\t\t\t[zoom]=\"thumbZoom()\"\n\t\t\t\t\t\t\t\t\t\t[editable]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[autoFit]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[interactive]=\"false\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Per-card action toolbar (visible on hover / focus-within) -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-actions\"\n\t\t\t\t\t\t\t\trole=\"toolbar\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slideMenu.slideActions' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.ribbon.duplicateSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.duplicate' | translate\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDuplicate(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideCopy class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.slidesPanel.deleteSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.delete' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"editor.slides().length <= 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDelete(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideTrash2 class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === 0\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveUp(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowUp class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === editor.slides().length - 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveDown(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowDown class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\n\t<!-- Footer: add new slide -->\n\t<footer class=\"pptx-ng-spanel-footer\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"pptx-ng-spanel-add\"\n\t\t\t[attr.aria-label]=\"'pptx.sections.addSlide' | translate\"\n\t\t\t(click)=\"onAddSlide()\"\n\t\t>\n\t\t\t<svg lucidePlus class=\"h-3.5 w-3.5\"></svg> {{ 'pptx.sections.addSlide' | translate }}\n\t\t</button>\n\t</footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.pptx-ng-spanel{display:flex;flex-direction:column;height:100%;background:var(--pptx-secondary, #1e1e1e);color:var(--pptx-foreground, #e5e5e5);border-right:1px solid var(--pptx-border, rgba(255, 255, 255, .08));overflow:hidden}.pptx-ng-spanel-scroll{flex:1;overflow-y:auto;padding:.5rem .375rem}.pptx-ng-spanel-space{position:relative}.pptx-ng-spanel-window{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-spanel-window.is-virtualized{position:absolute;inset-inline:0}.pptx-ng-section-header{display:flex;align-items:center;gap:.2rem;min-height:1.75rem;color:var(--pptx-muted-foreground, rgba(255, 255, 255, .58))}.pptx-ng-section-toggle{display:flex;align-items:center;gap:.35rem;min-width:0;flex:1;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.pptx-ng-section-toggle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}.pptx-ng-section-actions{display:flex}.pptx-ng-section-actions button{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:.2rem;background:transparent;color:inherit;cursor:pointer}.pptx-ng-section-actions button:hover:not(:disabled){background:color-mix(in srgb,var(--pptx-primary, #3b82f6) 35%,transparent);color:var(--pptx-foreground, #fff)}.pptx-ng-section-actions button:disabled{opacity:.3}.pptx-ng-spanel-card{position:relative;border-radius:.375rem;border:2px solid transparent;background:transparent;transition:border-color .15s,background .15s}.pptx-ng-spanel-card:hover,.pptx-ng-spanel-card:focus-within{background:color-mix(in srgb,var(--pptx-foreground, #fff) 5%,transparent);border-color:color-mix(in srgb,var(--pptx-foreground, #fff) 15%,transparent)}.pptx-ng-spanel-card.is-active{border-color:var(--pptx-primary, #3b82f6);background:color-mix(in srgb,var(--pptx-primary, #3b82f6) 10%,transparent)}.pptx-ng-spanel-thumb-btn{display:flex;align-items:center;gap:.25rem;width:100%;padding:.375rem;border:none;background:transparent;cursor:pointer;color:inherit;line-height:0}.pptx-ng-spanel-thumb-btn:focus-visible{outline:2px solid var(--pptx-ring, #3b82f6);outline-offset:2px;border-radius:.25rem}.pptx-ng-spanel-clip{overflow:hidden;border-radius:2px}.pptx-ng-spanel-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-spanel-num{flex:0 0 auto;width:1.1rem;text-align:right;font-size:.625rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--pptx-muted-foreground, rgba(255, 255, 255, .45));-webkit-user-select:none;user-select:none}.pptx-ng-spanel-card.is-active .pptx-ng-spanel-num{color:var(--pptx-primary, #3b82f6);font-weight:500}.pptx-ng-spanel-actions{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:.125rem;opacity:0;pointer-events:none;transition:opacity .12s}.pptx-ng-spanel-card:hover .pptx-ng-spanel-actions,.pptx-ng-spanel-card:focus-within .pptx-ng-spanel-actions{opacity:1;pointer-events:auto}.pptx-ng-spanel-action{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;padding:0;border:none;border-radius:.25rem;background:color-mix(in srgb,var(--pptx-popover, #1e1e1e) 85%,transparent);color:var(--pptx-popover-foreground, #e5e5e5);font-size:.6875rem;cursor:pointer;transition:background .12s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-spanel-action:hover:not([disabled]){background:color-mix(in srgb,var(--pptx-primary, #3b82f6) 75%,transparent);color:var(--pptx-primary-foreground, #fff)}.pptx-ng-spanel-action[disabled]{opacity:.3;cursor:not-allowed}.pptx-ng-spanel-footer{flex-shrink:0;padding:.5rem .375rem;border-top:1px solid var(--pptx-border, rgba(255, 255, 255, .08))}.pptx-ng-spanel-add{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%;padding:.25rem .5rem;border:none;border-radius:.25rem;background:transparent;color:var(--pptx-muted-foreground, rgba(255, 255, 255, .6));font-size:.6875rem;cursor:pointer;transition:background .15s,color .15s}.pptx-ng-spanel-add:hover{background:color-mix(in srgb,var(--pptx-foreground, #fff) 8%,transparent);color:var(--pptx-foreground, #e5e5e5)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom", "editable", "showGrid", "showRulers", "showGuides", "snapToGrid", "snapToShape", "guideCommand", "spellCheck", "snapToGuides", "autoFit", "interactive", "presenting", "selectedIds", "editingId", "editTemplateMode", "templateElements", "drawTool", "drawColor", "drawWidth"], outputs: ["elementSelect", "backgroundClick", "transformStart", "transformUpdate", "contextMenu", "textEditStart", "textCommit", "textCancel", "textFormat", "rotateUpdate", "marqueeSelect", "inkStrokeComplete", "eraserHit", "cellCommit", "tableChange"] }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SlidesPanelComponent, decorators: [{
             type: Component,
@@ -88123,7 +88359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         LucideArrowUp,
                         LucideArrowDown,
                         LucidePlus,
-                    ], template: "<div class=\"pptx-ng-spanel\">\n\t<!-- Scrollable slide list -->\n\t<div\n\t\t#scrollViewport\n\t\tclass=\"pptx-ng-spanel-scroll\"\n\t\trole=\"listbox\"\n\t\t[attr.aria-label]=\"'pptx.sections.slides' | translate\"\n\t\t(scroll)=\"onScroll()\"\n\t>\n\t\t<div\n\t\t\tclass=\"pptx-ng-spanel-space\"\n\t\t\t[attr.data-virtualized]=\"shouldVirtualize() ? 'true' : null\"\n\t\t\t[style.height.px]=\"shouldVirtualize() ? virtualRange().totalHeight : null\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"pptx-ng-spanel-window\"\n\t\t\t\t[class.is-virtualized]=\"shouldVirtualize()\"\n\t\t\t\t[style.top.px]=\"shouldVirtualize() ? virtualRange().offsetY : null\"\n\t\t\t>\n\t\t\t\t@for (item of renderedSlides(); track item.slide.id) {\n\t\t\t\t\t@let slide = item.slide;\n\t\t\t\t\t@let i = item.index;\n\t\t\t\t\t@if (item.sectionStart) {\n\t\t\t\t\t\t<header class=\"pptx-ng-section-header\" [attr.data-section-id]=\"item.section?.id\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-section-toggle\"\n\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"!item.section?.collapsed\"\n\t\t\t\t\t\t\t\t(click)=\"item.section && editor.sectionOps.toggle(item.section.id)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{{ item.section?.collapsed ? '\u25B8' : '\u25BE' }}</span>\n\t\t\t\t\t\t\t\t<strong>{{\n\t\t\t\t\t\t\t\t\titem.section?.name ?? ('pptx.slides.ungroupedSlides' | translate)\n\t\t\t\t\t\t\t\t}}</strong>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t@if (item.section) {\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-section-actions\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"onRenameSection(item.section.id, item.section.name)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u270E\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === 0\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'up')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === editor.sections().length - 1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'down')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.delete(item.section.id)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u00D7\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</header>\n\t\t\t\t\t}\n\t\t\t\t\t@if (!item.section?.collapsed) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-card\"\n\t\t\t\t\t\t\t[class.is-active]=\"i === activeIndex()\"\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t[attr.aria-selected]=\"i === activeIndex()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.notes.slideN' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- Thumbnail (clickable to select) -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-thumb-btn\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slidesPanel.goToSlide' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t\t(click)=\"select.emit(i)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<!-- Clipping wrapper: neutralises the 1rem auto margin from SlideCanvas -->\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-spanel-clip\" [ngStyle]=\"clipStyle()\">\n\t\t\t\t\t\t\t\t\t<pptx-slide-canvas\n\t\t\t\t\t\t\t\t\t\t[slide]=\"slide\"\n\t\t\t\t\t\t\t\t\t\t[templateElements]=\"editor.templateElementsBySlideId()[slide.id] ?? []\"\n\t\t\t\t\t\t\t\t\t\t[canvasSize]=\"canvasSize()\"\n\t\t\t\t\t\t\t\t\t\t[mediaDataUrls]=\"mediaDataUrls()\"\n\t\t\t\t\t\t\t\t\t\t[zoom]=\"thumbZoom()\"\n\t\t\t\t\t\t\t\t\t\t[editable]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[autoFit]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[interactive]=\"false\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Slide number badge -->\n\t\t\t\t\t\t\t<span class=\"pptx-ng-spanel-num\" aria-hidden=\"true\">{{ i + 1 }}</span>\n\n\t\t\t\t\t\t\t<!-- Per-card action toolbar (visible on hover / focus-within) -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-actions\"\n\t\t\t\t\t\t\t\trole=\"toolbar\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slideMenu.slideActions' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.ribbon.duplicateSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.duplicate' | translate\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDuplicate(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideCopy class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.slidesPanel.deleteSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.delete' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"editor.slides().length <= 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDelete(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideTrash2 class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === 0\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveUp(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowUp class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === editor.slides().length - 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveDown(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowDown class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\n\t<!-- Footer: add new slide -->\n\t<footer class=\"pptx-ng-spanel-footer\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"pptx-ng-spanel-add\"\n\t\t\t[attr.aria-label]=\"'pptx.sections.addSlide' | translate\"\n\t\t\t(click)=\"onAddSlide()\"\n\t\t>\n\t\t\t<svg lucidePlus class=\"h-3.5 w-3.5\"></svg> {{ 'pptx.sections.addSlide' | translate }}\n\t\t</button>\n\t</footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.pptx-ng-spanel{display:flex;flex-direction:column;height:100%;background:#1e1e1e;color:#e5e5e5;border-right:1px solid rgba(255,255,255,.08);overflow:hidden}.pptx-ng-spanel-scroll{flex:1;overflow-y:auto;padding:.5rem .375rem}.pptx-ng-spanel-space{position:relative}.pptx-ng-spanel-window{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-spanel-window.is-virtualized{position:absolute;inset-inline:0}.pptx-ng-section-header{display:flex;align-items:center;gap:.2rem;min-height:1.75rem;color:#ffffff94}.pptx-ng-section-toggle{display:flex;align-items:center;gap:.35rem;min-width:0;flex:1;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.pptx-ng-section-toggle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}.pptx-ng-section-actions{display:flex}.pptx-ng-section-actions button{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:.2rem;background:transparent;color:inherit;cursor:pointer}.pptx-ng-section-actions button:hover:not(:disabled){background:#3b82f659;color:#fff}.pptx-ng-section-actions button:disabled{opacity:.3}.pptx-ng-spanel-card{position:relative;border-radius:.375rem;border:2px solid transparent;background:transparent;transition:border-color .15s,background .15s}.pptx-ng-spanel-card:hover,.pptx-ng-spanel-card:focus-within{background:#ffffff0d;border-color:#ffffff26}.pptx-ng-spanel-card.is-active{border-color:#3b82f6;background:#3b82f61a}.pptx-ng-spanel-thumb-btn{display:block;width:100%;padding:.375rem .375rem 0;border:none;background:transparent;cursor:pointer;color:inherit;line-height:0}.pptx-ng-spanel-thumb-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.25rem}.pptx-ng-spanel-clip{overflow:hidden;border-radius:2px}.pptx-ng-spanel-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-spanel-num{display:block;text-align:center;font-size:.625rem;line-height:1.6;color:#ffffff73;-webkit-user-select:none;user-select:none;padding-bottom:.25rem}.pptx-ng-spanel-actions{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:.125rem;opacity:0;pointer-events:none;transition:opacity .12s}.pptx-ng-spanel-card:hover .pptx-ng-spanel-actions,.pptx-ng-spanel-card:focus-within .pptx-ng-spanel-actions{opacity:1;pointer-events:auto}.pptx-ng-spanel-action{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;padding:0;border:none;border-radius:.25rem;background:#1e1e1ed9;color:#e5e5e5;font-size:.6875rem;cursor:pointer;transition:background .12s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-spanel-action:hover:not([disabled]){background:#3b82f6bf}.pptx-ng-spanel-action[disabled]{opacity:.3;cursor:not-allowed}.pptx-ng-spanel-footer{flex-shrink:0;padding:.5rem .375rem;border-top:1px solid rgba(255,255,255,.08)}.pptx-ng-spanel-add{display:block;width:100%;padding:.4375rem 0;border:1px dashed rgba(255,255,255,.2);border-radius:.375rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.pptx-ng-spanel-add:hover{background:#3b82f626;border-color:#3b82f6;color:#e5e5e5}\n"] }]
+                    ], template: "<div class=\"pptx-ng-spanel\">\n\t<!-- Scrollable slide list -->\n\t<div\n\t\t#scrollViewport\n\t\tclass=\"pptx-ng-spanel-scroll\"\n\t\trole=\"listbox\"\n\t\t[attr.aria-label]=\"'pptx.sections.slides' | translate\"\n\t\t(scroll)=\"onScroll()\"\n\t>\n\t\t<div\n\t\t\tclass=\"pptx-ng-spanel-space\"\n\t\t\t[attr.data-virtualized]=\"shouldVirtualize() ? 'true' : null\"\n\t\t\t[style.height.px]=\"shouldVirtualize() ? virtualRange().totalHeight : null\"\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"pptx-ng-spanel-window\"\n\t\t\t\t[class.is-virtualized]=\"shouldVirtualize()\"\n\t\t\t\t[style.top.px]=\"shouldVirtualize() ? virtualRange().offsetY : null\"\n\t\t\t>\n\t\t\t\t@for (item of renderedSlides(); track item.slide.id) {\n\t\t\t\t\t@let slide = item.slide;\n\t\t\t\t\t@let i = item.index;\n\t\t\t\t\t@if (item.sectionStart) {\n\t\t\t\t\t\t<header class=\"pptx-ng-section-header\" [attr.data-section-id]=\"item.section?.id\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-section-toggle\"\n\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"!item.section?.collapsed\"\n\t\t\t\t\t\t\t\t(click)=\"item.section && editor.sectionOps.toggle(item.section.id)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{{ item.section?.collapsed ? '\u25B8' : '\u25BE' }}</span>\n\t\t\t\t\t\t\t\t<strong>{{\n\t\t\t\t\t\t\t\t\titem.section?.name ?? ('pptx.slides.ungroupedSlides' | translate)\n\t\t\t\t\t\t\t\t}}</strong>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t@if (item.section) {\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-section-actions\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"onRenameSection(item.section.id, item.section.name)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u270E\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === 0\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'up')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"sectionIndex(item.section.id) === editor.sections().length - 1\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.move(item.section.id, 'down')\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t\t(click)=\"editor.sectionOps.delete(item.section.id)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\u00D7\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</header>\n\t\t\t\t\t}\n\t\t\t\t\t@if (!item.section?.collapsed) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-card\"\n\t\t\t\t\t\t\t[class.is-active]=\"i === activeIndex()\"\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t[attr.aria-selected]=\"i === activeIndex()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.notes.slideN' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- Thumbnail (clickable to select). Slide number sits to the LEFT\n\t\t\t\t\t\t\t     of the preview (React SlideItem parity), not below it. -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-thumb-btn\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slidesPanel.goToSlide' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t\t(click)=\"select.emit(i)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<!-- Slide number badge (left column) -->\n\t\t\t\t\t\t\t\t<span class=\"pptx-ng-spanel-num\" aria-hidden=\"true\">{{ i + 1 }}</span>\n\n\t\t\t\t\t\t\t\t<!-- Clipping wrapper: neutralises the 1rem auto margin from SlideCanvas -->\n\t\t\t\t\t\t\t\t<div class=\"pptx-ng-spanel-clip\" [ngStyle]=\"clipStyle()\">\n\t\t\t\t\t\t\t\t\t<pptx-slide-canvas\n\t\t\t\t\t\t\t\t\t\t[slide]=\"slide\"\n\t\t\t\t\t\t\t\t\t\t[templateElements]=\"editor.templateElementsBySlideId()[slide.id] ?? []\"\n\t\t\t\t\t\t\t\t\t\t[canvasSize]=\"canvasSize()\"\n\t\t\t\t\t\t\t\t\t\t[mediaDataUrls]=\"mediaDataUrls()\"\n\t\t\t\t\t\t\t\t\t\t[zoom]=\"thumbZoom()\"\n\t\t\t\t\t\t\t\t\t\t[editable]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[autoFit]=\"false\"\n\t\t\t\t\t\t\t\t\t\t[interactive]=\"false\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Per-card action toolbar (visible on hover / focus-within) -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-actions\"\n\t\t\t\t\t\t\t\trole=\"toolbar\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.slideMenu.slideActions' | translate: { n: i + 1 }\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.ribbon.duplicateSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.duplicate' | translate\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDuplicate(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideCopy class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.slidesPanel.deleteSlide' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.arrange.delete' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"editor.slides().length <= 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onDelete(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideTrash2 class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveUp' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === 0\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveUp(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowUp class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tclass=\"pptx-ng-spanel-action\"\n\t\t\t\t\t\t\t\t\tdata-pptx-compact\n\t\t\t\t\t\t\t\t\t[title]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'pptx.sections.moveDown' | translate\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"i === editor.slides().length - 1\"\n\t\t\t\t\t\t\t\t\t(click)=\"onMoveDown(i)\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<svg lucideArrowDown class=\"h-3.5 w-3.5\"></svg>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\n\t<!-- Footer: add new slide -->\n\t<footer class=\"pptx-ng-spanel-footer\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"pptx-ng-spanel-add\"\n\t\t\t[attr.aria-label]=\"'pptx.sections.addSlide' | translate\"\n\t\t\t(click)=\"onAddSlide()\"\n\t\t>\n\t\t\t<svg lucidePlus class=\"h-3.5 w-3.5\"></svg> {{ 'pptx.sections.addSlide' | translate }}\n\t\t</button>\n\t</footer>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.pptx-ng-spanel{display:flex;flex-direction:column;height:100%;background:var(--pptx-secondary, #1e1e1e);color:var(--pptx-foreground, #e5e5e5);border-right:1px solid var(--pptx-border, rgba(255, 255, 255, .08));overflow:hidden}.pptx-ng-spanel-scroll{flex:1;overflow-y:auto;padding:.5rem .375rem}.pptx-ng-spanel-space{position:relative}.pptx-ng-spanel-window{display:flex;flex-direction:column;gap:.375rem}.pptx-ng-spanel-window.is-virtualized{position:absolute;inset-inline:0}.pptx-ng-section-header{display:flex;align-items:center;gap:.2rem;min-height:1.75rem;color:var(--pptx-muted-foreground, rgba(255, 255, 255, .58))}.pptx-ng-section-toggle{display:flex;align-items:center;gap:.35rem;min-width:0;flex:1;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.pptx-ng-section-toggle strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}.pptx-ng-section-actions{display:flex}.pptx-ng-section-actions button{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:.2rem;background:transparent;color:inherit;cursor:pointer}.pptx-ng-section-actions button:hover:not(:disabled){background:color-mix(in srgb,var(--pptx-primary, #3b82f6) 35%,transparent);color:var(--pptx-foreground, #fff)}.pptx-ng-section-actions button:disabled{opacity:.3}.pptx-ng-spanel-card{position:relative;border-radius:.375rem;border:2px solid transparent;background:transparent;transition:border-color .15s,background .15s}.pptx-ng-spanel-card:hover,.pptx-ng-spanel-card:focus-within{background:color-mix(in srgb,var(--pptx-foreground, #fff) 5%,transparent);border-color:color-mix(in srgb,var(--pptx-foreground, #fff) 15%,transparent)}.pptx-ng-spanel-card.is-active{border-color:var(--pptx-primary, #3b82f6);background:color-mix(in srgb,var(--pptx-primary, #3b82f6) 10%,transparent)}.pptx-ng-spanel-thumb-btn{display:flex;align-items:center;gap:.25rem;width:100%;padding:.375rem;border:none;background:transparent;cursor:pointer;color:inherit;line-height:0}.pptx-ng-spanel-thumb-btn:focus-visible{outline:2px solid var(--pptx-ring, #3b82f6);outline-offset:2px;border-radius:.25rem}.pptx-ng-spanel-clip{overflow:hidden;border-radius:2px}.pptx-ng-spanel-clip ::ng-deep .pptx-ng-canvas-wrapper{margin:0!important}.pptx-ng-spanel-num{flex:0 0 auto;width:1.1rem;text-align:right;font-size:.625rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--pptx-muted-foreground, rgba(255, 255, 255, .45));-webkit-user-select:none;user-select:none}.pptx-ng-spanel-card.is-active .pptx-ng-spanel-num{color:var(--pptx-primary, #3b82f6);font-weight:500}.pptx-ng-spanel-actions{position:absolute;top:.25rem;right:.25rem;display:flex;flex-direction:column;gap:.125rem;opacity:0;pointer-events:none;transition:opacity .12s}.pptx-ng-spanel-card:hover .pptx-ng-spanel-actions,.pptx-ng-spanel-card:focus-within .pptx-ng-spanel-actions{opacity:1;pointer-events:auto}.pptx-ng-spanel-action{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;padding:0;border:none;border-radius:.25rem;background:color-mix(in srgb,var(--pptx-popover, #1e1e1e) 85%,transparent);color:var(--pptx-popover-foreground, #e5e5e5);font-size:.6875rem;cursor:pointer;transition:background .12s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-spanel-action:hover:not([disabled]){background:color-mix(in srgb,var(--pptx-primary, #3b82f6) 75%,transparent);color:var(--pptx-primary-foreground, #fff)}.pptx-ng-spanel-action[disabled]{opacity:.3;cursor:not-allowed}.pptx-ng-spanel-footer{flex-shrink:0;padding:.5rem .375rem;border-top:1px solid var(--pptx-border, rgba(255, 255, 255, .08))}.pptx-ng-spanel-add{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%;padding:.25rem .5rem;border:none;border-radius:.25rem;background:transparent;color:var(--pptx-muted-foreground, rgba(255, 255, 255, .6));font-size:.6875rem;cursor:pointer;transition:background .15s,color .15s}.pptx-ng-spanel-add:hover{background:color-mix(in srgb,var(--pptx-foreground, #fff) 8%,transparent);color:var(--pptx-foreground, #e5e5e5)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], scrollViewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }] } });
 
 class StatusBarComponent {
@@ -91005,21 +91241,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * LaTeX -> MathML conversion and the template catalogue are unit testable in
  * isolation.
  */
-/** Pre-defined equation templates covering common mathematical formulas. */
-const TEMPLATES = [
-    { label: 'Fraction', latex: '\\frac{a}{b}' },
-    { label: 'Quadratic', latex: 'x=\\frac{-b\\pm\\sqrt{b^{2}-4ac}}{2a}' },
-    { label: 'Pythagorean', latex: 'a^{2}+b^{2}=c^{2}' },
-    { label: 'Sum', latex: '\\sum_{i=1}^{n}{a_{i}}' },
-    { label: 'Integral', latex: '\\int_{a}^{b}{f(x)}dx' },
-    { label: 'Square Root', latex: '\\sqrt{x^{2}+y^{2}}' },
-    { label: 'Limit', latex: '\\lim_{x\\to\\infty}{f(x)}' },
-    { label: "Euler's", latex: 'e^{i\\pi}+1=0' },
-    { label: 'Matrix 2x2', latex: '\\left[a,b;c,d\\right]' },
-    { label: 'Binomial', latex: '\\left(a+b\\right)^{n}' },
-    { label: 'Derivative', latex: '\\frac{dy}{dx}' },
-    { label: 'Trig Identity', latex: '\\sin^{2}\\theta+\\cos^{2}\\theta=1' },
-];
+/**
+ * Pre-defined equation templates covering common mathematical formulas
+ * (the shared catalogue every binding's equation dialog renders).
+ */
+const TEMPLATES = EQUATION_TEMPLATES;
 /** Convert a LaTeX string to a MathML markup string, empty on any failure. */
 function latexToMathml(latex) {
     if (!latex.trim()) {
@@ -91045,25 +91271,6 @@ function latexToMathml(latex) {
  * MathML preview each (computed once), highlighting the one matching the
  * current LaTeX and emitting `select` when a template is clicked.
  */
-/**
- * Maps each built-in template's English label to its shared i18n key (the same
- * keys the React equation editor uses), so the gallery renders localized labels
- * without changing the framework-agnostic TEMPLATES list.
- */
-const TEMPLATE_I18N_KEYS = {
-    Fraction: 'pptx.equation.template.fraction',
-    Quadratic: 'pptx.equation.template.quadratic',
-    Pythagorean: 'pptx.equation.template.pythagorean',
-    Sum: 'pptx.equation.template.sum',
-    Integral: 'pptx.equation.template.integral',
-    'Square Root': 'pptx.equation.template.squareRoot',
-    Limit: 'pptx.equation.template.limit',
-    "Euler's": 'pptx.equation.template.euler',
-    'Matrix 2x2': 'pptx.equation.template.matrix',
-    Binomial: 'pptx.equation.template.binomial',
-    Derivative: 'pptx.equation.template.derivative',
-    'Trig Identity': 'pptx.equation.template.trigIdentity',
-};
 class EquationTemplateGalleryComponent {
     /** Current LaTeX source (drives the active-template highlight). */
     activeLatex = input('', /* @ts-ignore */
@@ -91075,7 +91282,6 @@ class EquationTemplateGalleryComponent {
     templates = TEMPLATES.map((tmpl) => ({
         ...tmpl,
         mathml: this.sanitizer.bypassSecurityTrustHtml(latexToMathml(tmpl.latex)),
-        i18nKey: TEMPLATE_I18N_KEYS[tmpl.label] ?? tmpl.label,
     }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EquationTemplateGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EquationTemplateGalleryComponent, isStandalone: true, selector: "pptx-equation-template-gallery", inputs: { activeLatex: { classPropertyName: "activeLatex", publicName: "activeLatex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, ngImport: i0, template: `