pptx-react-viewer 1.23.0 → 1.24.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import react__default from 'react';
+import * as React$1 from 'react';
+import React$1__default from 'react';
 import { Options } from 'html2canvas-pro';
 
 //#region src/core/types/actions.d.ts
@@ -3709,6 +3709,126 @@ interface PptxTableData {
   /** Right-to-left table layout from `a:tblPr/@rtl`. */
   rtl?: boolean;
 }
+/**
+ * A single fill reference within a table style section.
+ *
+ * @example
+ * ```ts
+ * const fill: ParsedTableStyleFill = {
+ *   schemeColor: "accent1",
+ *   tint: 40000,   // 40% tint
+ * };
+ * // => satisfies ParsedTableStyleFill
+ * ```
+ */
+interface ParsedTableStyleFill {
+  /** Theme colour key (e.g. `accent1`, `dk1`). */
+  schemeColor: string;
+  /** Tint value (0-100 000). */
+  tint?: number;
+  /** Shade value (0-100 000). */
+  shade?: number;
+}
+/**
+ * A single entry in the parsed table style map.
+ *
+ * Contains fill colours for whole-table, banded rows/columns, first/last
+ * row, and first/last column sections.
+ *
+ * @example
+ * ```ts
+ * const entry: ParsedTableStyleEntry = {
+ *   styleId: "{5C22544A-7EE6-4342-B048-85BDC9FD1C3A}",
+ *   styleName: "Medium Style 2 - Accent 1",
+ *   accentKey: "accent1",
+ *   wholeTblFill: { schemeColor: "accent1", tint: 20000 },
+ *   band1HFill:   { schemeColor: "accent1", tint: 40000 },
+ *   firstRowFill: { schemeColor: "accent1" },
+ * };
+ * // => satisfies ParsedTableStyleEntry
+ * ```
+ */
+/** Text properties from a:tcTxStyle in a table style section. */
+interface ParsedTableStyleText {
+  /** Font bold. */
+  bold?: boolean;
+  /** Font italic. */
+  italic?: boolean;
+  /** Font colour as theme scheme key. */
+  fontSchemeColor?: string;
+  /** Font colour tint (0-100 000). */
+  fontTint?: number;
+  /** Font colour shade (0-100 000). */
+  fontShade?: number;
+}
+/**
+ * Table background style (CT_TableBackgroundStyle, ECMA-376 §21.1.3.7).
+ *
+ * Corresponds to the `<a:tblBg>` child of `<a:tblStyle>`. Currently
+ * captures only the resolved scheme-fill colour (verbatim XML for fill
+ * / effect references is preserved separately by the save path).
+ */
+interface ParsedTableBackground {
+  /** Solid fill (resolved from `a:fill > a:solidFill > a:schemeClr`). */
+  fill?: ParsedTableStyleFill;
+  /** Has an `a:effectLst` child that should be round-tripped. */
+  hasEffectLst?: boolean;
+}
+interface ParsedTableStyleEntry {
+  styleId: string;
+  styleName?: string;
+  /** Dominant accent key derived from fills (e.g. `accent1`). */
+  accentKey?: string;
+  /** Table-level background (`<a:tblBg>`). */
+  tableBackground?: ParsedTableBackground;
+  wholeTblFill?: ParsedTableStyleFill;
+  band1HFill?: ParsedTableStyleFill;
+  band2HFill?: ParsedTableStyleFill;
+  band1VFill?: ParsedTableStyleFill;
+  band2VFill?: ParsedTableStyleFill;
+  firstRowFill?: ParsedTableStyleFill;
+  lastRowFill?: ParsedTableStyleFill;
+  firstColFill?: ParsedTableStyleFill;
+  lastColFill?: ParsedTableStyleFill;
+  /** Corner cell fills (`<a:seCell>`, `<a:swCell>`, `<a:neCell>`, `<a:nwCell>`). */
+  seCellFill?: ParsedTableStyleFill;
+  swCellFill?: ParsedTableStyleFill;
+  neCellFill?: ParsedTableStyleFill;
+  nwCellFill?: ParsedTableStyleFill;
+  /** Per-role text styling from a:tcTxStyle. */
+  wholeTblText?: ParsedTableStyleText;
+  firstRowText?: ParsedTableStyleText;
+  lastRowText?: ParsedTableStyleText;
+  firstColText?: ParsedTableStyleText;
+  lastColText?: ParsedTableStyleText;
+  band1HText?: ParsedTableStyleText;
+  band2HText?: ParsedTableStyleText;
+  band1VText?: ParsedTableStyleText;
+  band2VText?: ParsedTableStyleText;
+  seCellText?: ParsedTableStyleText;
+  swCellText?: ParsedTableStyleText;
+  neCellText?: ParsedTableStyleText;
+  nwCellText?: ParsedTableStyleText;
+}
+/**
+ * Map of GUID → table style entry.
+ *
+ * Parsed from `ppt/tableStyles.xml` and indexed by the style GUID
+ * referenced in `a:tblPr@tblStyle`.
+ *
+ * @example
+ * ```ts
+ * const styles: ParsedTableStyleMap = {
+ *   "{5C22544A-7EE6-4342-B048-85BDC9FD1C3A}": {
+ *     styleId: "{5C22544A-7EE6-4342-B048-85BDC9FD1C3A}",
+ *     styleName: "Medium Style 2 - Accent 1",
+ *     accentKey: "accent1",
+ *   },
+ * };
+ * // => satisfies ParsedTableStyleMap
+ * ```
+ */
+type ParsedTableStyleMap = Record<string, ParsedTableStyleEntry>;
 //#endregion
 //#region src/core/types/elements.d.ts
 /**
@@ -4656,6 +4776,268 @@ interface PptxCompatibilityWarning {
   elementId?: string;
   xmlPath?: string;
 }
+/**
+ * Resolved hex values for the 12 theme colour slots.
+ *
+ * @example
+ * ```ts
+ * const scheme: PptxThemeColorScheme = {
+ *   dk1: "#000000", lt1: "#FFFFFF",
+ *   dk2: "#1F497D", lt2: "#EEECE1",
+ *   accent1: "#4F81BD", accent2: "#C0504D",
+ *   accent3: "#9BBB59", accent4: "#8064A2",
+ *   accent5: "#4BACC6", accent6: "#F79646",
+ *   hlink: "#0000FF", folHlink: "#800080",
+ * };
+ * // => satisfies PptxThemeColorScheme
+ * ```
+ */
+interface PptxThemeColorScheme {
+  dk1: string;
+  lt1: string;
+  dk2: string;
+  lt2: string;
+  accent1: string;
+  accent2: string;
+  accent3: string;
+  accent4: string;
+  accent5: string;
+  accent6: string;
+  hlink: string;
+  folHlink: string;
+}
+/**
+ * A font-family triplet for major or minor theme fonts.
+ *
+ * Supports Latin, East Asian, and Complex Script font families.
+ *
+ * @example
+ * ```ts
+ * const fonts: PptxThemeFontGroup = {
+ *   latin: "Calibri Light",
+ *   eastAsia: "MS PGothic",
+ *   complexScript: "Arial",
+ * };
+ * // => satisfies PptxThemeFontGroup
+ * ```
+ */
+interface PptxThemeFontGroup {
+  latin?: string;
+  eastAsia?: string;
+  complexScript?: string;
+  /**
+   * Per-script typeface overrides (`<a:font script="Hans|Hant|Arab|Hebr|
+   * Thai|Beng|Gujr|Khmr|Knda|…"/>` per ECMA-376 §20.1.4.1.16). Keyed by
+   * the four-letter ISO 15924 script tag from the `script` attribute.
+   *
+   * Phase 4 Stream A / M4.
+   */
+  byScript?: Record<string, string>;
+}
+/**
+ * Theme font scheme — major (headings) and minor (body) font families.
+ *
+ * @example
+ * ```ts
+ * const scheme: PptxThemeFontScheme = {
+ *   majorFont: { latin: "Calibri Light" },
+ *   minorFont: { latin: "Calibri", eastAsia: "MS PGothic" },
+ * };
+ * // => satisfies PptxThemeFontScheme
+ * ```
+ */
+interface PptxThemeFontScheme {
+  majorFont?: PptxThemeFontGroup;
+  minorFont?: PptxThemeFontGroup;
+}
+/**
+ * A single fill style entry from the theme format scheme.
+ * Each entry is one of: solid, gradient, pattern, or no fill.
+ * The raw XML node is also stored so that `phClr` substitution can happen
+ * at resolution time.
+ *
+ * @example
+ * ```ts
+ * const solidFill: PptxThemeFillStyle = {
+ *   kind: "solid",
+ *   color: "#4F81BD",
+ *   opacity: 1,
+ * };
+ *
+ * const gradientFill: PptxThemeFillStyle = {
+ *   kind: "gradient",
+ *   gradientAngle: 90,
+ *   gradientType: "linear",
+ *   gradientStops: [
+ *     { color: "#4F81BD", position: 0 },
+ *     { color: "#1F497D", position: 1 },
+ *   ],
+ * };
+ * // => satisfies PptxThemeFillStyle
+ * ```
+ */
+interface PptxThemeFillStyle {
+  /**
+   * Discriminator for the fill type.
+   *
+   * `'group'` corresponds to `<a:grpFill/>` — a fill that inherits the
+   * containing group shape's fill at render time. Captured for round-trip
+   * preservation in `fmtScheme/fillStyleLst`.
+   */
+  kind: 'solid' | 'gradient' | 'pattern' | 'none' | 'group';
+  /** Pre-resolved colour (may be `undefined` when `phClr`-dependent). */
+  color?: string;
+  opacity?: number;
+  /** Gradient-specific fields (only present when `kind === "gradient"`). */
+  gradientStops?: Array<{
+    color: string;
+    position: number;
+    opacity?: number;
+  }>;
+  gradientAngle?: number;
+  gradientType?: 'linear' | 'radial';
+  gradientCss?: string;
+  /** Pattern-specific fields (only present when `kind === "pattern"`). */
+  patternPreset?: string;
+  patternBackgroundColor?: string;
+  /** Raw XML node preserved for `phClr` re-resolution. */
+  rawNode?: unknown;
+}
+/**
+ * A single line style entry from `a:lnStyleLst`.
+ * Provides width, dash, join, cap, and optional fill colour.
+ *
+ * @example
+ * ```ts
+ * const line: PptxThemeLineStyle = {
+ *   width: 1.5,
+ *   color: "#4F81BD",
+ *   dash: "solid",
+ *   lineJoin: "round",
+ *   lineCap: "flat",
+ * };
+ * // => satisfies PptxThemeLineStyle
+ * ```
+ */
+interface PptxThemeLineStyle {
+  /** Line width in pixels (converted from EMU). */
+  width?: number;
+  color?: string;
+  opacity?: number;
+  dash?: string;
+  lineJoin?: 'round' | 'bevel' | 'miter';
+  lineCap?: 'flat' | 'rnd' | 'sq';
+  compoundLine?: 'sng' | 'dbl' | 'thickThin' | 'thinThick' | 'tri';
+  /** Raw XML node preserved for `phClr` re-resolution. */
+  rawNode?: unknown;
+}
+/**
+ * A single effect style entry from `a:effectStyleLst`.
+ * Each entry may define shadow, glow, soft-edge, reflection, blur,
+ * and optionally a 3-D scene/shape.
+ *
+ * @example
+ * ```ts
+ * const dropShadow: PptxThemeEffectStyle = {
+ *   shadowColor: "#000000",
+ *   shadowBlur: 4,
+ *   shadowOffsetX: 2,
+ *   shadowOffsetY: 3,
+ *   shadowOpacity: 0.4,
+ * };
+ * // => satisfies PptxThemeEffectStyle
+ * ```
+ */
+interface PptxThemeEffectStyle {
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowOpacity?: number;
+  glowColor?: string;
+  glowRadius?: number;
+  glowOpacity?: number;
+  softEdgeRadius?: number;
+  innerShadowColor?: string;
+  innerShadowOpacity?: number;
+  innerShadowBlur?: number;
+  innerShadowOffsetX?: number;
+  innerShadowOffsetY?: number;
+  reflectionBlurRadius?: number;
+  reflectionStartOpacity?: number;
+  reflectionEndOpacity?: number;
+  reflectionEndPosition?: number;
+  reflectionDirection?: number;
+  reflectionRotation?: number;
+  reflectionDistance?: number;
+  /** 3D scene/camera from `a:scene3d` on the effect style (idx 3 typically). */
+  scene3d?: Pptx3DScene;
+  /** 3D shape extrusion/bevel from `a:sp3d` on the effect style (idx 3 typically). */
+  shape3d?: Pptx3DShape;
+  /** Raw XML node preserved for `phClr` re-resolution. */
+  rawNode?: unknown;
+}
+/**
+ * The full parsed format scheme from `a:fmtScheme` inside `a:themeElements`.
+ * Contains three fill style lists and one line/effect style list each,
+ * at three intensity levels: subtle (idx 1), moderate (idx 2), intense (idx 3).
+ *
+ * OOXML reference indices:
+ * - fillStyleLst:   idx 1-3  (used by `a:fillRef @idx` 1-3)
+ * - lnStyleLst:     idx 1-3  (used by `a:lnRef @idx` 1-3)
+ * - effectStyleLst:  idx 1-3  (used by `a:effectRef @idx` 1-3)
+ * - bgFillStyleLst:  idx 1-3  (used by `a:fillRef @idx` 1001-1003)
+ *
+ * @example
+ * ```ts
+ * const fmt: PptxThemeFormatScheme = {
+ *   name: "Office",
+ *   fillStyles: [solidFill, gradientFill, intenseFill],
+ *   lineStyles: [thinLine, mediumLine, thickLine],
+ *   effectStyles: [subtle, moderate, intense],
+ *   backgroundFillStyles: [solidBg, gradientBg, intenseBg],
+ * };
+ * // => satisfies PptxThemeFormatScheme
+ * ```
+ */
+interface PptxThemeFormatScheme {
+  /** The `@name` attribute of the format scheme. */
+  name?: string;
+  /** Fill styles at indices 1-3 (subtle, moderate, intense). */
+  fillStyles: PptxThemeFillStyle[];
+  /** Line styles at indices 1-3. */
+  lineStyles: PptxThemeLineStyle[];
+  /** Effect styles at indices 1-3. */
+  effectStyles: PptxThemeEffectStyle[];
+  /** Background fill styles at indices 1-3 (referenced via idx 1001-1003). */
+  backgroundFillStyles: PptxThemeFillStyle[];
+}
+/**
+ * Full parsed theme object available to renderers.
+ *
+ * @example
+ * ```ts
+ * const theme: PptxTheme = {
+ *   name: "Office Theme",
+ *   colorScheme: { dk1: "#000", lt1: "#FFF", /* … *\/ },
+ *   fontScheme: {
+ *     majorFont: { latin: "Calibri Light" },
+ *     minorFont: { latin: "Calibri" },
+ *   },
+ * };
+ * // => satisfies PptxTheme
+ * ```
+ */
+interface PptxTheme {
+  /** Theme name from `a:theme @name`. */
+  name?: string;
+  /** Resolved colour scheme. */
+  colorScheme?: PptxThemeColorScheme;
+  /** Resolved font scheme. */
+  fontScheme?: PptxThemeFontScheme;
+  /** Format scheme — fill, line, effect and background fill style matrices. */
+  formatScheme?: PptxThemeFormatScheme;
+}
 //#endregion
 //#region src/core/types/transition.d.ts
 /**
@@ -4911,6 +5293,32 @@ interface PptxSlideSyncProperties {
   partPath?: string;
   relationshipId?: string;
 }
+/**
+ * A named custom slide show (`p:custShowLst / p:custShow`).
+ *
+ * Custom shows define ordered subsets of slides that can be presented
+ * independently of the full deck.
+ *
+ * @example
+ * ```ts
+ * const show: PptxCustomShow = {
+ *   name: "Executive Summary",
+ *   id: "0",
+ *   slideRIds: ["rId2", "rId5", "rId8"],
+ * };
+ * // => satisfies PptxCustomShow
+ * ```
+ */
+interface PptxCustomShow {
+  /** Custom show name. */
+  name: string;
+  /** Custom show id. */
+  id: string;
+  /** Ordered list of slide relationship IDs included in this custom show. */
+  slideRIds: string[];
+  /** Original `p:custShow` subtree used to preserve unmodelled attributes and extensions. */
+  rawXml?: XmlObject;
+}
 
 //#region src/theme/types.d.ts
 /**
@@ -5226,6 +5634,49 @@ interface CollaborationConfig {
    */
   writeBackDebounceMs?: number;
 }
+/** Snapshot of a single element's animation state at a point in the timeline. */
+interface ElementAnimationState {
+  /** Whether the element should be visible. */
+  visible: boolean;
+  /** CSS animation shorthand to apply (undefined = no active animation). */
+  cssAnimation: string | undefined;
+}
+/** The unit system used for ruler display. */
+type RulerUnit = 'inches' | 'centimetres';
+//#endregion
+//#region src/render/text-field-substitution.d.ts
+/**
+ * Text-field placeholder substitution, shared by every binding's text
+ * renderer.
+ *
+ * Pure string logic: resolves OOXML field runs (slide number, date/time,
+ * header/footer, document properties, slide title) into their display text.
+ * Extracted from the React `viewer/utils/text-field-substitution` module so
+ * every binding substitutes identically.
+ */
+/** Context for substituting field placeholders (slide number, date/time, header/footer, etc.). */
+interface FieldSubstitutionContext {
+  slideNumber?: number;
+  dateTimeText?: string;
+  /** OOXML date-format pattern from header/footer settings (e.g. "M/d/yyyy"). */
+  dateFormat?: string;
+  /** Footer text from PptxHeaderFooter settings. */
+  footerText?: string;
+  /** Header text from PptxHeaderFooter settings. */
+  headerText?: string;
+  /** Custom document properties for `docproperty` field substitution (keyed by property name). */
+  customProperties?: ReadonlyArray<{
+    name: string;
+    value: string;
+  }>;
+  /** Locale string for date/time formatting (e.g. "en-US"). Falls back to browser default. */
+  locale?: string;
+  /** Title text extracted from the first title placeholder on the slide. */
+  slideTitle?: string;
+}
+//#endregion
+//#region src/render/text-case-transform.d.ts
+type ChangeCaseMode = 'sentence' | 'lower' | 'upper' | 'capitalize' | 'toggle';
 /**
  * A font supplied by the host application. The package never ships fonts:
  * applications provide a licensed URL, data URL, or blob URL for their users.
@@ -5237,6 +5688,11 @@ interface ViewerFontSource {
   weight?: string | number;
   style?: 'normal' | 'italic';
 }
+/** In-memory clipboard payload stored when an element is copied or cut. */
+interface ElementClipboardPayload {
+  element: PptxElement;
+  isTemplate: boolean;
+}
 //#endregion
 //#region src/render/account.d.ts
 /** Local-only display profile shown in File > Account. Never sent anywhere; purely cosmetic. */
@@ -5356,6 +5812,20 @@ interface LocaleCatalogEntry {
  */
 declare const LOCALE_CATALOG: readonly LocaleCatalogEntry[];
 
+//#region src/viewer/types-core.d.ts
+/**
+ * Union of all shape preset types that the viewer can insert or render.
+ * Maps to OOXML `a:prstGeom` preset values (e.g. "rect", "ellipse").
+ * Includes basic shapes, arrows, connectors, and freeform paths.
+ */
+type SupportedShapeType = 'rect' | 'roundRect' | 'ellipse' | 'triangle' | 'rtTriangle' | 'diamond' | 'cylinder' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'hexagon' | 'octagon' | 'chevron' | 'star5' | 'star6' | 'star8' | 'plus' | 'heart' | 'cloud' | 'sun' | 'moon' | 'pie' | 'plaque' | 'teardrop' | 'line' | 'rtArrow' | 'leftArrow' | 'upArrow' | 'downArrow' | 'connector' | 'freeform';
+/** The pixel dimensions of the slide canvas (presentation slide size). */
+interface CanvasSize {
+  /** Width of the canvas in CSS pixels. */
+  width: number;
+  /** Height of the canvas in CSS pixels. */
+  height: number;
+}
 //#endregion
 //#region src/theme/context.d.ts
 interface ViewerThemeProviderProps {
@@ -5370,7 +5840,7 @@ interface ViewerThemeProviderProps {
  * for advanced use-cases where you want to wrap multiple viewers or
  * share a theme across a wider subtree.
  */
-declare function ViewerThemeProvider({ theme, children }: ViewerThemeProviderProps): react.JSX.Element;
+declare function ViewerThemeProvider({ theme, children }: ViewerThemeProviderProps): React$1.JSX.Element;
 /**
  * Returns the active `ViewerTheme` (if any) from the nearest
  * `ViewerThemeProvider`.
@@ -5388,6 +5858,35 @@ interface FileViewerHandle {
   /** Get the current content of the file (for saving) */
   getContent: () => Promise<string | Uint8Array>;
 }
+/**
+ * State of an active marquee (rubber-band) selection rectangle.
+ * Created when the user clicks and drags on the canvas background,
+ * and used to compute which elements fall within the selection area.
+ */
+interface MarqueeSelectionState {
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  additive: boolean;
+  baseSelectionIds?: string[];
+}
+/** Tracks which table cell is selected and/or actively being edited. */
+interface TableCellEditorState {
+  rowIndex: number;
+  columnIndex: number;
+  /** When true the cell has an active text input. */
+  isEditing?: boolean;
+  /** Optional multi-cell selection (Shift+Click range). Each entry is {row, col}. */
+  selectedCells?: Array<{
+    row: number;
+    col: number;
+  }>;
+}
+/** Identifies one of the ribbon-style toolbar tabs (home, insert, text, etc.). */
+type ToolbarSection = 'file' | 'home' | 'insert' | 'text' | 'arrange' | 'draw' | 'design' | 'transitions' | 'animations' | 'slideShow' | 'record' | 'review' | 'view' | 'help';
+/** The active drawing/inking tool selected in the Draw toolbar tab. */
+type DrawingTool = 'select' | 'pen' | 'highlighter' | 'eraser' | 'freeform';
 interface PowerPointViewerProps {
   /** PowerPoint content as Uint8Array */
   content: Uint8Array;
@@ -5578,8 +6077,361 @@ interface PowerPointViewerHandle extends FileViewerHandle, PowerPointViewerAPI {
   getContent: () => Promise<Uint8Array>;
 }
 
+//#region src/viewer/hooks/useAutosave.d.ts
+type AutosaveStatus = {
+  state: 'idle';
+} | {
+  state: 'disabled';
+  reason: string;
+} | {
+  state: 'saving';
+} | {
+  state: 'saved';
+  timestamp: number;
+} | {
+  state: 'error';
+  message: string;
+};
+//#endregion
+//#region src/viewer/utils/table-band-style.d.ts
+/** Context for resolving table style colours from the theme. */
+interface TableStyleContext {
+  tableStyleMap?: ParsedTableStyleMap;
+  theme?: PptxTheme;
+}
+//#endregion
+//#region src/viewer/components/canvas/canvas-types.d.ts
+interface ZoomViewport {
+  canvasViewportRef: React$1__default.RefObject<HTMLDivElement | null>;
+  editWrapperRef: React$1__default.RefObject<HTMLDivElement | null>;
+  canvasStageRef: React$1__default.RefObject<HTMLDivElement | null>;
+  editorScale: number;
+}
+interface SlideCanvasProps {
+  activeSlide: PptxSlide | undefined;
+  templateElements: PptxElement[];
+  canvasSize: CanvasSize;
+  zoom: ZoomViewport;
+  mode: ViewerMode;
+  canEdit: boolean;
+  editTemplateMode: boolean;
+  selectedElementIdSet: Set<string>;
+  selectedElement: PptxElement | null;
+  inlineEditingElementId: string | null;
+  inlineEditingText: string;
+  spellCheckEnabled: boolean;
+  mediaDataUrls: Map<string, string>;
+  tableEditorState: TableCellEditorState | null;
+  marqueeSelectionState: MarqueeSelectionState | null;
+  snapLines: Array<{
+    axis: string;
+    position: number;
+  }>;
+  showGrid: boolean;
+  /** Grid spacing in CSS px (derived from PPTX gridSpacing EMUs). */
+  gridSpacingPx?: number;
+  showRulers: boolean;
+  /** Unit system for rulers (default: inches). */
+  rulerUnit?: RulerUnit;
+  guides: Array<{
+    id: string;
+    axis: 'h' | 'v';
+    position: number;
+  }>;
+  presentationElementStates?: Map<string, ElementAnimationState>;
+  presentationKeyframesCss?: string;
+  onClick: (elementId: string, e: React$1__default.MouseEvent) => void;
+  onDoubleClick: (elementId: string, e: React$1__default.MouseEvent) => void;
+  onMouseDown: (elementId: string, e: React$1__default.MouseEvent) => void;
+  onContextMenu: (elementId: string, e: React$1__default.MouseEvent) => void;
+  /** Called when the user presses mouse down on empty canvas space. */
+  onCanvasMouseDown?: (e: React$1__default.MouseEvent) => void;
+  onResizePointerDown: (elementId: string, e: React$1__default.MouseEvent, handle: string) => void;
+  onAdjustmentPointerDown: (elementId: string, e: React$1__default.MouseEvent) => void;
+  /** Commit a new rotation (degrees) when the on-canvas rotate handle is dragged. */
+  onRotate?: (elementId: string, rotationDeg: number) => void;
+  onInlineEditChange: (text: string) => void;
+  onInlineEditCommit: () => void;
+  onInlineEditCancel: () => void;
+  onTableCellSelect: (cell: Omit<TableCellEditorState, 'elementId'> | null, elementId: string) => void;
+  /** Called when an edited table cell should be committed. */
+  onCommitCellEdit?: (elementId: string, rowIndex: number, colIndex: number, text: string) => void;
+  /**
+   * Commit a partial update to a SmartArt element from inline (on-canvas) node
+   * editing. Routed to the same element-update path the inspector uses (undo/redo
+   * + dirty marking). When absent, inline SmartArt editing is disabled.
+   */
+  onUpdateSmartArtElement?: (elementId: string, updates: Partial<PptxElement>) => void;
+  /**
+   * Apply a text-style toggle (Ctrl/Cmd+B/I/U) to the element being
+   * inline-edited. Routed to the same updateSelectedTextStyle path as the
+   * toolbar. When absent, the inline formatting shortcuts are inert.
+   */
+  onFormatText?: (updates: Partial<TextStyle>) => void;
+  /** Called when table column widths are resized. */
+  onResizeTableColumns?: (elementId: string, newWidths: number[]) => void;
+  /** Called when a table row is resized. */
+  onResizeTableRow?: (elementId: string, rowIndex: number, newHeight: number) => void;
+  /** Find & Replace results (all matches across all slides). */
+  findResults?: Array<{
+    slideIndex: number;
+    elementId: string;
+    segmentIndex: number;
+    startOffset: number;
+    length: number;
+  }>;
+  /** Index of the currently focused find result (-1 for none). */
+  findResultIndex?: number;
+  /** Index of the currently visible slide (needed to filter find results). */
+  activeSlideIndex?: number;
+  /** Currently active drawing tool ("select" means no drawing overlay). */
+  activeTool?: DrawingTool;
+  /** Stroke colour for pen / highlighter. */
+  drawingColor?: string;
+  /** Stroke width for pen / highlighter. */
+  drawingWidth?: number;
+  /** Ref that is true while a pointer stroke is in progress. */
+  isDrawingRef?: React$1__default.RefObject<boolean>;
+  /** Called when a completed ink stroke should be added to the slide. */
+  onAddInkElement?: (ink: InkPptxElement) => void;
+  /** Called when a freeform drawing stroke should be added as a shape element. */
+  onAddFreeformShape?: (shape: ShapePptxElement) => void;
+  /** Called when the eraser tool removes an ink element. */
+  onEraseInkElement?: (elementId: string) => void;
+  /** Called when a shape-level action is clicked (e.g. slide jump, URL). */
+  onActionClick?: (elementId: string, action: PptxAction) => void;
+  /** Called when a text-level hyperlink is clicked. */
+  onHyperlinkClick?: (url: string) => void;
+  /** Comments for the current slide (used for on-canvas markers). */
+  comments?: PptxComment[];
+  /** Whether to show comment markers on the slide canvas. */
+  showCommentMarkers?: boolean;
+  /** Called when a comment marker is clicked. */
+  onCommentMarkerClick?: (commentId: string) => void;
+  onMoveGuide?: (guideId: string, position: number) => void;
+  onDeleteGuide?: (guideId: string) => void;
+  onCreateGuideFromRuler?: (axis: 'h' | 'v', positionPx: number) => void;
+  /** When true, shows connection sites on shapes and enables connector drawing. */
+  connectorCreationMode?: boolean;
+  /** Called when a new connector is created between two shapes. */
+  onCreateConnector?: (connector: ConnectorPptxElement) => void;
+  /** All slides in the presentation (for zoom element thumbnails). */
+  allSlides?: readonly PptxSlide[];
+  /** Callback fired when a zoom element is clicked in presentation mode. */
+  onZoomClick?: (targetSlideIndex: number, returnSlideIndex: number) => void;
+  /** Index of the current slide (for zoom return navigation). */
+  sourceSlideIndex?: number;
+  /** Context for text field placeholder substitution (slide number, header/footer, etc.). */
+  fieldContext?: FieldSubstitutionContext;
+  /** Theme + table style map for resolving table band/header colours. */
+  tableStyleContext?: TableStyleContext;
+  /** Optional collaboration cursor overlay rendered on top of the canvas. */
+  collaborationOverlay?: React$1__default.ReactNode;
+}
+//#endregion
+//#region src/viewer/components/toolbar/toolbar-types.d.ts
+interface ToolbarProps {
+  fileName?: string;
+  mode: ViewerMode;
+  canEdit: boolean;
+  isNarrowViewport: boolean;
+  isSidebarCollapsed: boolean;
+  isInspectorPaneOpen: boolean;
+  isCompactToolbarOpen: boolean;
+  toolbarSection: ToolbarSection;
+  scale: number;
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+  findReplaceOpen: boolean;
+  selectedElement: PptxElement | null;
+  tableEditorState?: TableCellEditorState | null;
+  editTemplateMode: boolean;
+  newShapeType: SupportedShapeType;
+  activeTool: DrawingTool;
+  drawingColor: string;
+  drawingWidth: number;
+  clipboardPayload: ElementClipboardPayload | null;
+  onSetMode: (mode: ViewerMode) => void;
+  onToggleSidebar: () => void;
+  onToggleInspector: () => void;
+  /** Opens the inspector pane and switches to the properties tab (for animation panel). */
+  onOpenAnimationPanel: () => void;
+  /** Adds an animation preset to the selected element. */
+  onAddAnimation?: (preset: string, group: 'entrance' | 'emphasis' | 'exit') => void;
+  /** Removes all animations from the selected element. */
+  onRemoveAnimation?: () => void;
+  onToggleCompactToolbar: () => void;
+  onSetToolbarSection: (section: ToolbarSection) => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onZoomToFit: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onToggleFindReplace: () => void;
+  onSetNewShapeType: (type: SupportedShapeType) => void;
+  onAddTextBox: () => void;
+  onAddShape: () => void;
+  onAddTable: () => void;
+  onAddChart?: (chartType: PptxChartType) => void;
+  onAddSmartArt: () => void;
+  onAddEquation: () => void;
+  onAddActionButton: (shapeType: string) => void;
+  onInsertField?: (fieldType: string, value?: string) => void;
+  onOpenHeaderFooter?: () => void;
+  onOpenImagePicker: () => void;
+  onOpenMediaPicker: () => void;
+  onSetActiveTool: (tool: DrawingTool) => void;
+  onSetDrawingColor: (color: string) => void;
+  onSetDrawingWidth: (width: number) => void;
+  onSetEditTemplateMode: (mode: boolean) => void;
+  spellCheckEnabled: boolean;
+  showGrid: boolean;
+  showRulers: boolean;
+  snapToGrid: boolean;
+  snapToShape: boolean;
+  onSetSpellCheckEnabled: (enabled: boolean) => void;
+  onSetShowGrid: (enabled: boolean) => void;
+  onSetShowRulers: (enabled: boolean) => void;
+  onSetSnapToGrid: (enabled: boolean) => void;
+  onSetSnapToShape: (enabled: boolean) => void;
+  onAddGuide: (axis: 'h' | 'v') => void;
+  onAlignElements: (align: string) => void;
+  onDistributeElements: (axis: string) => void;
+  canDistribute: boolean;
+  onCopy: () => void;
+  onCut: () => void;
+  onPaste: () => void;
+  onFlip: (direction: 'horizontal' | 'vertical') => void;
+  onMoveLayer: (direction: string) => void;
+  onMoveLayerToEdge: (direction: string) => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  /** Open another presentation (File ▸ Open). Hidden when not provided. */
+  onOpenFile?: () => void;
+  onOpenRecentFile?: (key: string) => void;
+  onCreatePresentation: (templateId: string) => void;
+  onExportPng: () => void;
+  onExportPdf: () => void;
+  onExportVideo: () => void;
+  onExportGif: () => void;
+  onPackageForSharing: () => void;
+  onOpenShareDialog?: () => void;
+  onSaveAsPptx: () => void;
+  onSaveAsPpsx: () => void;
+  onSaveAsPptm: () => void;
+  hasMacros: boolean;
+  onCopySlideAsImage: () => void;
+  onPrint: () => void;
+  onToggleShortcuts: () => void;
+  onOpenSettings?: () => void;
+  onRunAccessibilityCheck: () => void;
+  onToggleSlideSorter: () => void;
+  onUpdateTextStyle: (updates: Partial<TextStyle>) => void;
+  /** Rewrite the selected text's characters (PowerPoint's Aa "Change Case" dropdown). */
+  onTransformTextCase: (mode: ChangeCaseMode) => void;
+  isOverflowMenuOpen: boolean;
+  onSetOverflowMenuOpen: (open: boolean) => void;
+  layoutOptions: Array<{
+    path: string;
+    name: string;
+  }>;
+  onInsertSlideFromLayout: (path: string, name?: string) => void;
+  customShows: PptxCustomShow[];
+  activeCustomShowId: string | null;
+  onSetActiveCustomShowId: (id: string | null) => void;
+  onCreateCustomShow: () => void;
+  onRenameActiveCustomShow: () => void;
+  onDeleteActiveCustomShow: () => void;
+  onToggleCurrentSlideInActiveShow: () => void;
+  isCurrentSlideInActiveShow: boolean;
+  onToggleVersionHistory?: () => void;
+  onOpenPasswordProtection?: () => void;
+  onOpenDocumentProperties?: () => void;
+  onOpenFontEmbedding?: () => void;
+  onOpenDigitalSignatures?: () => void;
+  onEnterMasterView: () => void;
+  onCloseMasterView: () => void;
+  onEnterPresenterView?: () => void;
+  onEnterRehearsalMode?: () => void;
+  onToggleThemeEditor: () => void;
+  isThemeEditorOpen: boolean;
+  onToggleThemeGallery: () => void;
+  isThemeGalleryOpen: boolean;
+  onCompare?: () => void;
+  onToggleComments?: () => void;
+  isCommentsPanelOpen?: boolean;
+  spellCheckActive?: boolean;
+  slideCommentCount?: number;
+  formatPainterActive?: boolean;
+  onToggleFormatPainter?: () => void;
+  canActivateFormatPainter?: boolean;
+  isSelectionPaneOpen?: boolean;
+  onToggleSelectionPane?: () => void;
+  eyedropperActive?: boolean;
+  onToggleEyedropper?: () => void;
+  onOpenSetUpSlideShow?: () => void;
+  onOpenBroadcastDialog?: () => void;
+  onToggleSubtitles?: () => void;
+  showSubtitles?: boolean;
+  activeSlide?: PptxSlide;
+  onTransitionChange: (updates: Partial<PptxSlideTransition>) => void;
+  onApplyTransitionToAll: () => void;
+  /** Host-supplied list of toolbar buttons/ribbon tabs to hide. See `PowerPointViewerProps.hiddenActions`. */
+  hiddenActions?: readonly ToolbarActionId[];
+}
+//#endregion
+//#region src/viewer/hooks/useViewerBuildingBlocks.d.ts
+interface UseViewerBuildingBlocksInput {
+  /** PPTX content as ArrayBuffer/Uint8Array, or null/undefined while no file is loaded. */
+  content: ArrayBuffer | Uint8Array | null | undefined;
+  /** Whether editing actions are enabled. Defaults to false (view-only). */
+  canEdit?: boolean;
+  /** Original file path, used for autosave recovery. */
+  filePath?: string;
+  /** Display name for the toolbar's file-name-aware controls (e.g. title bar hosts build themselves). */
+  fileName?: string;
+  /** Whether the built-in autosave-to-localStorage recovery timer is active. Defaults to true. */
+  autosaveEnabled?: boolean;
+  /** Display name used as the author for comments. */
+  userName?: string;
+  /** Host-supplied list of toolbar buttons/ribbon tabs to hide. */
+  hiddenActions?: readonly ToolbarActionId[];
+  /** Imperative handle ref, exposing the same `PowerPointViewerHandle` API `PowerPointViewer` does. */
+  handle?: React.ForwardedRef<PowerPointViewerHandle>;
+  onContentChange?: (content: Uint8Array) => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  onActiveSlideChange?: (index: number) => void;
+  onModeChange?: (mode: ViewerMode) => void;
+  onZoomChange?: (zoom: number) => void;
+  onSelectionChange?: (ids: string[]) => void;
+  onSlideCountChange?: (count: number) => void;
+  /** Fired by the toolbar's "Settings" button; the host owns rendering that dialog. */
+  onOpenSettings?: () => void;
+  /** Fired by the toolbar's "Header & Footer" button; the host owns rendering that panel. */
+  onOpenHeaderFooter?: () => void;
+  /** Fired by the toolbar's "Share" button; the host owns rendering that dialog. */
+  onOpenShareDialog?: () => void;
+}
+interface ViewerBuildingBlocksResult {
+  /** Flat, self-contained props for the standalone `<Toolbar>` component. */
+  toolbarProps: ToolbarProps;
+  /** Flat, self-contained props for the standalone `<SlideCanvas>` component. */
+  canvasProps: SlideCanvasProps;
+  /** Current viewer mode (edit, view, present, master). */
+  mode: ViewerMode;
+  /** True while the initial parse of `content` is in progress. */
+  loading: boolean;
+  /** Parse error message, or null. */
+  error: string | null;
+  /** Current autosave-to-localStorage recovery status. */
+  autosaveStatus: AutosaveStatus;
+}
+declare function useViewerBuildingBlocks(input: UseViewerBuildingBlocksInput): ViewerBuildingBlocksResult;
+
 //#region src/viewer/utils/animation-effects.d.ts
-declare function getAnimationInitialStyle(preset: PptxAnimationPreset | undefined, nativeAnimation?: PptxNativeAnimation): react__default.CSSProperties;
+declare function getAnimationInitialStyle(preset: PptxAnimationPreset | undefined, nativeAnimation?: PptxNativeAnimation): React$1__default.CSSProperties;
 //#endregion
 //#region src/viewer/PowerPointViewer.d.ts
 /**
@@ -5591,8 +6443,14 @@ declare function getAnimationInitialStyle(preset: PptxAnimationPreset | undefine
  * Uses `forwardRef` to expose a `PowerPointViewerHandle` for imperative
  * access (e.g. serialising the current content for saving).
  */
-declare const PowerPointViewer: react.ForwardRefExoticComponent<PowerPointViewerProps & react.RefAttributes<PowerPointViewerHandle>>;
+declare const PowerPointViewer: React$1.ForwardRefExoticComponent<PowerPointViewerProps & React$1.RefAttributes<PowerPointViewerHandle>>;
 
+//#region src/viewer/components/Toolbar.d.ts
+declare function Toolbar(p: ToolbarProps): React$1__default.ReactElement;
+//#endregion
+//#region src/viewer/components/SlideCanvas.d.ts
+declare function SlideCanvas({ activeSlide, templateElements, canvasSize, zoom, mode, canEdit, editTemplateMode, selectedElementIdSet, selectedElement, inlineEditingElementId, inlineEditingText, spellCheckEnabled, mediaDataUrls, tableEditorState, marqueeSelectionState, snapLines, showGrid, gridSpacingPx, showRulers, rulerUnit, guides, presentationElementStates, presentationKeyframesCss, onClick, onDoubleClick, onMouseDown, onContextMenu, onCanvasMouseDown, onResizePointerDown, onAdjustmentPointerDown, onRotate, onInlineEditChange, onInlineEditCommit, onInlineEditCancel, onTableCellSelect, onCommitCellEdit, onUpdateSmartArtElement, onFormatText, onResizeTableColumns, onResizeTableRow, findResults, findResultIndex, activeSlideIndex, activeTool, drawingColor, drawingWidth, isDrawingRef, onAddInkElement, onAddFreeformShape, onEraseInkElement, onActionClick, onHyperlinkClick, comments, showCommentMarkers, onCommentMarkerClick, onMoveGuide, onDeleteGuide, onCreateGuideFromRuler, connectorCreationMode, onCreateConnector, allSlides, onZoomClick, sourceSlideIndex, fieldContext, tableStyleContext, collaborationOverlay }: SlideCanvasProps): React$1.JSX.Element;
+//#endregion
 //#region src/lib/canvas-export.d.ts
 /**
  * A drop-in replacement for `html2canvas(element, options)` that first
@@ -5612,5 +6470,5 @@ declare const PowerPointViewer: react.ForwardRefExoticComponent<PowerPointViewer
  */
 declare function renderToCanvas(element: HTMLElement, options?: Partial<Options>): Promise<HTMLCanvasElement>;
 
-export { AVATAR_COLOR_SWATCHES, DEFAULT_VIEWER_PROFILE, LOCALE_CATALOG, PowerPointViewer, THEME_CATALOG, VIEWER_PREFS_STORAGE_KEY, ViewerThemeProvider, clearAllLocalViewerData, clearStoredViewerPrefs, defaultCssVars, defaultRadius, defaultThemeColors, getAnimationInitialStyle, getLocalStorageUsageSummary, readStoredViewerPrefs, renderToCanvas, resolveProfileInitial, resolveThemeCatalogEntry, saveViewerProfile, themeToCssVars, useViewerTheme, vermilionDarkColors, vermilionDarkTheme, vermilionLightColors, vermilionLightTheme, vermilionRadius, writeStoredViewerPrefs };
-export type { AccountAuthConfig, LocalStorageUsageSummary, LocaleCatalogEntry, PowerPointViewerAPI, PowerPointViewerHandle, PowerPointViewerProps, StoredViewerPrefs, ThemeCatalogEntry, ToolbarActionId, ToolbarButtonId, ToolbarTabId, ViewerMode, ViewerProfile, ViewerTheme, ViewerThemeColors };
+export { AVATAR_COLOR_SWATCHES, DEFAULT_VIEWER_PROFILE, LOCALE_CATALOG, PowerPointViewer, SlideCanvas, THEME_CATALOG, Toolbar, VIEWER_PREFS_STORAGE_KEY, ViewerThemeProvider, clearAllLocalViewerData, clearStoredViewerPrefs, defaultCssVars, defaultRadius, defaultThemeColors, getAnimationInitialStyle, getLocalStorageUsageSummary, readStoredViewerPrefs, renderToCanvas, resolveProfileInitial, resolveThemeCatalogEntry, saveViewerProfile, themeToCssVars, useViewerBuildingBlocks, useViewerTheme, vermilionDarkColors, vermilionDarkTheme, vermilionLightColors, vermilionLightTheme, vermilionRadius, writeStoredViewerPrefs };
+export type { AccountAuthConfig, LocalStorageUsageSummary, LocaleCatalogEntry, PowerPointViewerAPI, PowerPointViewerHandle, PowerPointViewerProps, SlideCanvasProps, StoredViewerPrefs, ThemeCatalogEntry, ToolbarActionId, ToolbarButtonId, ToolbarProps, ToolbarTabId, UseViewerBuildingBlocksInput, ViewerBuildingBlocksResult, ViewerMode, ViewerProfile, ViewerTheme, ViewerThemeColors };