pptx-react-viewer 4.18.0 → 4.19.0

package/dist/viewer/index.d.ts

@@ -1,4 +1,4 @@
-import { PptxTheme, PptxTransitionType, PptxSlideTransition, PptxElement, PptxSlide, PptxAnimationPreset, ConnectorArrowType, XmlObject, PptxHandler, PptxData, PptxElementAnimation, ShapeStyle, StrokeDashType, PptxNativeAnimation, PptxThemePreset, PptxThemeColorScheme, PptxThemeFontScheme } from '@christophervr/ooxml-core/pptx';
+import { PptxTheme, PptxThemeColorRef, PptxLayoutPreview, PptxTransitionType, PptxSlideTransition, PptxElement, PptxSlide, PptxAnimationPreset, ConnectorArrowType, XmlObject, PptxHandler, PptxData, PptxElementAnimation, ShapeStyle, StrokeDashType, PptxNativeAnimation, PptxThemePreset, PptxThemeColorScheme, PptxThemeFontScheme } from 'ooxml-core/pptx';
 import * as Y from 'yjs';
 import { Doc } from 'yjs';
 import * as React from 'react';
@@ -1207,6 +1207,25 @@ declare const RIBBON_CONTROL_CATALOG: {
     };
   };
   readonly smartArtDesign: {
+    readonly createGraphic: {
+      readonly label: 'Create Graphic';
+      readonly controls: {
+        readonly addShape: 'Add Shape';
+        readonly addBullet: 'Add Bullet';
+        readonly textPane: 'Text Pane';
+        readonly promote: 'Promote';
+        readonly demote: 'Demote';
+        readonly rightToLeft: 'Right to Left';
+        readonly moveUp: 'Move Up';
+        readonly moveDown: 'Move Down';
+      };
+    };
+    readonly layouts: {
+      readonly label: 'Layouts';
+      readonly controls: {
+        readonly gallery: 'Layouts gallery';
+      };
+    };
     readonly smartArtStyles: {
       readonly label: 'SmartArt Styles';
       readonly controls: {
@@ -1214,6 +1233,13 @@ declare const RIBBON_CONTROL_CATALOG: {
         readonly gallery: 'SmartArt Styles gallery';
       };
     };
+    readonly reset: {
+      readonly label: 'Reset';
+      readonly controls: {
+        readonly resetGraphic: 'Reset Graphic';
+        readonly convert: 'Convert';
+      };
+    };
   };
 };
 //#endregion
@@ -1431,6 +1457,8 @@ interface RibbonCommandView {
   expanded?: boolean;
   hidden?: boolean;
   compact?: boolean;
+  /** Opens a menu or panel: draws PowerPoint's drop-down chevron after the label. */
+  caret?: boolean;
   badge?: number;
   /** Commands with the same column share a vertical stack. */
   column?: number;
@@ -1613,7 +1641,7 @@ interface CompatToastsViewState {
   bottomInset?: number;
   translate?: ChromeTranslate;
 }
-type DialogFooterVariant = 'secondary' | 'primary' | 'warning';
+type DialogFooterVariant = 'secondary' | 'primary' | 'warning' | 'danger';
 type DialogFooterIcon = 'trash' | 'pen' | 'restore' | 'print' | 'check';
 interface DialogFooterAction {
   /** Stable id echoed back in the `dialog-footer-request` intent. */
@@ -1623,6 +1651,12 @@ interface DialogFooterAction {
   variant?: DialogFooterVariant;
   icon?: DialogFooterIcon;
   disabled?: boolean;
+  /** Work in flight: the button is disabled, `aria-busy` and shows a spinner. */
+  busy?: boolean;
+  /** Tooltip (`title`) for an action whose label needs a longer hint. */
+  title?: string;
+  /** `start` pins a tertiary action (Remove link, Reset all) to the left edge. */
+  align?: 'start' | 'end';
   /** Optional `data-testid` stamped on the button. */
   testId?: string;
 }
@@ -1690,6 +1724,38 @@ interface ElementClipboardPayload {
   element: PptxElement;
   isTemplate: boolean;
 }
+/** One placeholder outline, already positioned in unscaled slide space. */
+interface LayoutPreviewFrame {
+  /** Stable key for list rendering. */
+  key: string;
+  type: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+/** Everything a binding needs to render one thumbnail. */
+interface LayoutPreviewGeometry {
+  /** Outer box, in CSS pixels. */
+  boxWidth: number;
+  boxHeight: number;
+  /** Inner surface size, in unscaled slide pixels. */
+  surfaceWidth: number;
+  surfaceHeight: number;
+  /** Factor to apply as `transform: scale(...)` on the inner surface. */
+  scale: number;
+  backgroundColor: string;
+  /**
+   * Border width for placeholder outlines, pre-divided by {@link scale}.
+   *
+   * The outlines live inside the scaled surface, so a plain 1.5px border
+   * would be multiplied down to a hairline that vanishes at thumbnail size.
+   * Dividing here keeps the drawn width constant on screen whatever the
+   * slide dimensions are.
+   */
+  frameBorderWidth: number;
+  frames: LayoutPreviewFrame[];
+}
 //#endregion
 //#region src/render/command-search.d.ts
 /**
@@ -1737,7 +1803,7 @@ interface AccountAuthConfig {
 //#endregion
 //#region src/render/ribbon-galleries/gallery-types.d.ts
 /** Every gallery the ribbon offers. */
-type RibbonGalleryId = 'shapeStyles' | 'shapeEffects' | 'wordArtStyles' | 'pictureStyles' | 'pictureCorrections' | 'pictureColor' | 'pictureArtisticEffects' | 'bullets' | 'numbering' | 'tableStyles' | 'chartStyles' | 'chartColors' | 'chartQuickLayout' | 'smartArtStyles' | 'smartArtColors' | 'themeColors' | 'themeFonts';
+type RibbonGalleryId = 'shapeStyles' | 'shapeEffects' | 'wordArtStyles' | 'pictureStyles' | 'pictureCorrections' | 'pictureColor' | 'pictureArtisticEffects' | 'bullets' | 'numbering' | 'tableStyles' | 'chartStyles' | 'chartColors' | 'chartQuickLayout' | 'smartArtStyles' | 'smartArtColors' | 'smartArtLayouts' | 'smartArtAddShape' | 'smartArtAddBullet' | 'smartArtTextPane' | 'smartArtPromote' | 'smartArtDemote' | 'smartArtRightToLeft' | 'smartArtMoveUp' | 'smartArtMoveDown' | 'smartArtResetGraphic' | 'smartArtConvert' | 'themeColors' | 'themeFonts';
 /** One tile. */
 interface RibbonGalleryItem {
   /** Stable within its gallery; what `applyRibbonGalleryItem` takes. */
@@ -1784,6 +1850,22 @@ interface RibbonGalleryDescriptor {
   sections: RibbonGallerySection[];
   /** True when the selection cannot take this gallery (trigger disabled). */
   disabled: boolean;
+  /**
+   * Set when the entry is a one-button command (PowerPoint's Add Shape, Reset
+   * Graphic, ...) rather than a gallery: the element draws a plain command, a
+   * click picks its only item and no panel opens.
+   */
+  command?: RibbonGalleryCommandView;
+}
+/** How a command-style entry draws (see {@link RibbonGalleryDescriptor.command}). */
+interface RibbonGalleryCommandView {
+  /** SVG path data on a 20px grid. */
+  iconPath: string;
+  /** Icon above the label (PowerPoint's large button) instead of beside it. */
+  large?: boolean;
+  /** i18n key and English fallback of the tooltip, e.g. why the command is unavailable. */
+  hintKey?: string;
+  hint?: string;
 }
 //#endregion
 //#region src/render/viewport-fit.d.ts
@@ -1848,13 +1930,67 @@ interface RibbonInsertState {
   headerFooterAvailable?: boolean;
   translate?: (key: string) => string;
 }
+/** One row of a menu or select; labels are translated by the view unless `label` is set. */
+interface RibbonHomeItem {
+  readonly value: string;
+  /** Ready-made text (a font family, a layout name); wins over `labelKey`. */
+  readonly label?: string;
+  readonly labelKey?: string;
+  readonly fallback?: string;
+  readonly description?: string;
+  readonly descriptionKey?: string;
+  /** Heading of the group this row opens; consecutive rows share one heading. */
+  readonly group?: string;
+  readonly groupKey?: string;
+  readonly checked?: boolean;
+  readonly disabled?: boolean;
+  /** Preview typeface of a font row. */
+  readonly fontFamily?: string;
+  /** Shared artwork key shown before the label (a shape glyph or ribbon icon). */
+  readonly icon?: string;
+  /** Preserved test or automation hooks (`data-pptx-merge-op`, ...). */
+  readonly attrs?: Readonly<Record<string, string>>;
+  /** Draws a divider above the row. */
+  readonly separator?: boolean;
+}
 interface RibbonHomeControlState {
   disabled?: boolean;
   /** Omit for ordinary commands; a boolean reflects `aria-pressed`. */
   pressed?: boolean;
-  /** Popover triggers only: reflects `aria-expanded` while the native popover is open. */
+  /** Reserved for hosts that mirror their own popover; shared popovers set it themselves. */
   expanded?: boolean;
   hidden?: boolean;
+  /** Select, number, colour bar and checked menu row. */
+  value?: string | number;
+  /** Menu or select rows that replace the spec's static ones. */
+  items?: readonly RibbonHomeItem[];
+  /** Colour popover content; the trigger shows `value` in its bar. */
+  colour?: RibbonHomeColourModel;
+  /** Layout gallery content. */
+  layouts?: RibbonHomeLayoutModel;
+  /** Embedded gallery content. */
+  gallery?: {
+    descriptor: RibbonGalleryDescriptor | undefined;
+    disabled?: boolean;
+  };
+}
+interface RibbonHomeColourModel {
+  /** The deck's theme colour map; the popover derives the theme palette from it. */
+  themeColors?: Readonly<Record<string, string>>;
+  /** Theme reference of the current colour (highlights its swatch). */
+  selectedRef?: PptxThemeColorRef;
+  /** Recently used colours, newest first. */
+  recent?: readonly string[];
+}
+interface RibbonHomeLayoutModel {
+  layouts: readonly {
+    path: string;
+    name: string;
+  }[];
+  /** Marks the active tile; omitted by New Slide. */
+  current?: string;
+  /** Artwork data by layout path; tiles render name-only until it arrives. */
+  previews?: Readonly<Record<string, PptxLayoutPreview>> | ReadonlyMap<string, PptxLayoutPreview>;
 }
 /** State key of a control: its id, or `id#part` when several buttons share one id. */
 type RibbonHomeKey = RibbonControlId | `${RibbonControlId}#${string}`;
@@ -2095,9 +2231,18 @@ declare global {
     'pptx-ui-ribbon-draw': PptxUiRibbonDrawElement;
   }
 }
+//#endregion
+//#region src/web-components/ribbon-home-layout.d.ts
+/**
+ * Draws a layout's real artwork inside a tile's scaled surface. The artwork is
+ * element rendering that each binding owns; return a disposer to release it.
+ */
+type HomeLayoutArtwork = (preview: PptxLayoutPreview, geometry: LayoutPreviewGeometry, container: HTMLElement) => (() => void) | void;
 interface PptxUiRibbonHomeElement extends HTMLElement {
   state: RibbonHomeViewState;
-  /** Wrapper (or button) of a control id, where a host mounts or anchors its native popover. */
+  /** Draws a layout's real artwork inside a gallery tile; the host owns element rendering. */
+  layoutArtwork: HomeLayoutArtwork | undefined;
+  /** Wrapper (or button) of a control id. */
   anchor(id: string): HTMLElement | undefined;
 }
 declare global {
@@ -2112,6 +2257,9 @@ declare global {
     'pptx-ui-ribbon-home-arrange-flip': PptxUiRibbonHomeElement;
     'pptx-ui-ribbon-home-arrange-order': PptxUiRibbonHomeElement;
     'pptx-ui-ribbon-home-arrange-edit': PptxUiRibbonHomeElement;
+    'pptx-ui-ribbon-home-font-picker': PptxUiRibbonHomeElement;
+    'pptx-ui-ribbon-home-arrange-painter': PptxUiRibbonHomeElement;
+    'pptx-ui-ribbon-home-arrange-shape': PptxUiRibbonHomeElement;
   }
 }
 interface PptxUiRibbonTransitionsElement extends HTMLElement {

package/dist/viewer/index.js

@@ -1,96 +1,96 @@
 'use strict';
 
-var chunkCJ3GYPF6_js = require('../chunk-CJ3GYPF6.js');
-require('../chunk-UWRUG37I.js');
-var chunkSJJ4AOLI_js = require('../chunk-SJJ4AOLI.js');
-var chunk7T64DQTQ_js = require('../chunk-7T64DQTQ.js');
-var chunkXZQNOZA6_js = require('../chunk-XZQNOZA6.js');
-require('../chunk-2GRLCBMP.js');
+var chunkQSBL4SL6_js = require('../chunk-QSBL4SL6.js');
+require('../chunk-H7FXW2Q3.js');
+var chunkFNO4C3LU_js = require('../chunk-FNO4C3LU.js');
+var chunkWAUDRNBY_js = require('../chunk-WAUDRNBY.js');
+var chunkE3TLDJPS_js = require('../chunk-E3TLDJPS.js');
+require('../chunk-LKL6DQ55.js');
 require('../chunk-4VNS5WPM.js');
 
 
 
 Object.defineProperty(exports, "CollaborationStatusIndicator", {
   enumerable: true,
-  get: function () { return chunkCJ3GYPF6_js.CollaborationStatusIndicator; }
+  get: function () { return chunkQSBL4SL6_js.CollaborationStatusIndicator; }
 });
 Object.defineProperty(exports, "PowerPointViewer", {
   enumerable: true,
-  get: function () { return chunkCJ3GYPF6_js.PowerPointViewer; }
+  get: function () { return chunkQSBL4SL6_js.PowerPointViewer; }
 });
 Object.defineProperty(exports, "UserAvatarBar", {
   enumerable: true,
-  get: function () { return chunkCJ3GYPF6_js.UserAvatarBar; }
+  get: function () { return chunkQSBL4SL6_js.UserAvatarBar; }
 });
 Object.defineProperty(exports, "CollaborationProvider", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.CollaborationProvider; }
+  get: function () { return chunkFNO4C3LU_js.CollaborationProvider; }
 });
 Object.defineProperty(exports, "RemoteUserCursors", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.RemoteUserCursors; }
+  get: function () { return chunkFNO4C3LU_js.RemoteUserCursors; }
 });
 Object.defineProperty(exports, "isAudienceTab", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.isAudienceTab; }
+  get: function () { return chunkFNO4C3LU_js.isAudienceTab; }
 });
 Object.defineProperty(exports, "parseAudienceNonce", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.parseAudienceNonce; }
+  get: function () { return chunkFNO4C3LU_js.parseAudienceNonce; }
 });
 Object.defineProperty(exports, "useCollaborativeHistory", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.useCollaborativeHistory; }
+  get: function () { return chunkFNO4C3LU_js.useCollaborativeHistory; }
 });
 Object.defineProperty(exports, "useCollaborativeState", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.useCollaborativeState; }
+  get: function () { return chunkFNO4C3LU_js.useCollaborativeState; }
 });
 Object.defineProperty(exports, "usePresenceTracking", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.usePresenceTracking; }
+  get: function () { return chunkFNO4C3LU_js.usePresenceTracking; }
 });
 Object.defineProperty(exports, "useThemeSwitching", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.useThemeSwitching; }
+  get: function () { return chunkFNO4C3LU_js.useThemeSwitching; }
 });
 Object.defineProperty(exports, "useYjsProvider", {
   enumerable: true,
-  get: function () { return chunkSJJ4AOLI_js.useYjsProvider; }
+  get: function () { return chunkFNO4C3LU_js.useYjsProvider; }
 });
 Object.defineProperty(exports, "getAnimationInitialStyle", {
   enumerable: true,
-  get: function () { return chunk7T64DQTQ_js.getAnimationInitialStyle; }
+  get: function () { return chunkWAUDRNBY_js.getAnimationInitialStyle; }
 });
 Object.defineProperty(exports, "clearAudienceContent", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.clearAudienceContent; }
+  get: function () { return chunkE3TLDJPS_js.clearAudienceContent; }
 });
 Object.defineProperty(exports, "forgetSessionDeck", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.forgetSessionDeck; }
+  get: function () { return chunkE3TLDJPS_js.forgetSessionDeck; }
 });
 Object.defineProperty(exports, "getSessionTabId", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.getSessionTabId; }
+  get: function () { return chunkE3TLDJPS_js.getSessionTabId; }
 });
 Object.defineProperty(exports, "loadAudienceContent", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.loadAudienceContent; }
+  get: function () { return chunkE3TLDJPS_js.loadAudienceContent; }
 });
 Object.defineProperty(exports, "loadSessionDeck", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.loadSessionDeck; }
+  get: function () { return chunkE3TLDJPS_js.loadSessionDeck; }
 });
 Object.defineProperty(exports, "rememberSessionDeck", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.rememberSessionDeck; }
+  get: function () { return chunkE3TLDJPS_js.rememberSessionDeck; }
 });
 Object.defineProperty(exports, "restoreSessionDeck", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.restoreSessionDeck; }
+  get: function () { return chunkE3TLDJPS_js.restoreSessionDeck; }
 });
 Object.defineProperty(exports, "storeAudienceContent", {
   enumerable: true,
-  get: function () { return chunkXZQNOZA6_js.storeAudienceContent; }
+  get: function () { return chunkE3TLDJPS_js.storeAudienceContent; }
 });

package/dist/viewer/index.mjs

@@ -1,7 +1,7 @@
-export { CollaborationStatusIndicator, PowerPointViewer, UserAvatarBar } from '../chunk-NWWE7I6R.mjs';
-import '../chunk-5OYCO5WW.mjs';
-export { CollaborationProvider, RemoteUserCursors, isAudienceTab, parseAudienceNonce, useCollaborativeHistory, useCollaborativeState, usePresenceTracking, useThemeSwitching, useYjsProvider } from '../chunk-SJJY4B4V.mjs';
-export { getAnimationInitialStyle } from '../chunk-X5O53JPT.mjs';
-export { clearAudienceContent, forgetSessionDeck, getSessionTabId, loadAudienceContent, loadSessionDeck, rememberSessionDeck, restoreSessionDeck, storeAudienceContent } from '../chunk-EDQ436NK.mjs';
-import '../chunk-IDZ7S2O3.mjs';
+export { CollaborationStatusIndicator, PowerPointViewer, UserAvatarBar } from '../chunk-YL7IPY2B.mjs';
+import '../chunk-VX52VUBD.mjs';
+export { CollaborationProvider, RemoteUserCursors, isAudienceTab, parseAudienceNonce, useCollaborativeHistory, useCollaborativeState, usePresenceTracking, useThemeSwitching, useYjsProvider } from '../chunk-OCUCBRXU.mjs';
+export { getAnimationInitialStyle } from '../chunk-LE3JUNIR.mjs';
+export { clearAudienceContent, forgetSessionDeck, getSessionTabId, loadAudienceContent, loadSessionDeck, rememberSessionDeck, restoreSessionDeck, storeAudienceContent } from '../chunk-YYVPC6KI.mjs';
+import '../chunk-Q4HRYUEP.mjs';
 import '../chunk-XGB3TDIC.mjs';

package/dist/viewer/index.mjs.br

@@ -1 +1 @@
-�@���]�hp]���
7��T�y����ʱ�5�a��k�D�̶%AAoW.���v'f���d��l���x��-=_�/x�aŠ����?�!����~�AY�-&�~s��)}�"\��P�6"�@%�(x+Fn.W��8�1k;ܛ%478Xi�u��c���#��V�e���*��EHJB���ug�L���o>�7���+�=�՝�0Y	��9Q�997$�j-o�Q��oq@��R��`:\����:*h����� �Z�sb���G��H)r3��T�L�U
+�@��\�}��R];*�“����75���o5�a��	Y�%�mK���]s9}�.��� ���B�p�8^�d���K������F����O��$�n�6��$;�Y�ܯW(OmG(E%�E�h&"�@%�(x+�W�+�+�iȚ�f��	Vj����1�������e��xv����z���������JR��M��&�}e�'��=�s��N��b'�

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-react-viewer",
-	"version": "4.18.0",
+	"version": "4.19.0",
 	"description": "pptx-viewer for React: a PowerPoint viewer and editor component to render, edit, and export PPTX slides in the browser.",
 	"keywords": [
 		"editor",