pptx-react-viewer 4.62.0 → 4.62.2

package/dist/viewer/index.d.ts

@@ -14,7 +14,6 @@ export { CollaborationState } from 'ooxml-core/collab';
 import * as Y from 'yjs';
 import { Doc } from 'yjs';
 
-//#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").
@@ -136,8 +135,6 @@ interface ShapeQuickStyle {
   name: string;
   style: Partial<ShapeStyle>;
 }
-//#endregion
-//#region src/viewer/hooks/collaboration/types.d.ts
 /** Connection lifecycle states for the Yjs WebSocket provider. */
 type ConnectionStatus$1 = 'disconnected' | 'connecting' | 'connected' | 'error';
 /**
@@ -194,15 +191,11 @@ interface CollaborationContextValue {
   /** Called by the document sync with the write-back status (undefined clears it). */
   reportWriteBack?: (state: CollaborationWriteBackState | undefined) => void;
 }
-//#endregion
-//#region src/viewer/hooks/useLoadNotifications.d.ts
 /** What `onLoad` reports: the same detail the Svelte and vanilla bindings send. */
 interface ViewerLoadDetail {
   slideCount: number;
   canvasSize: CanvasSize;
 }
-//#endregion
-//#region src/viewer/types-ui.d.ts
 /**
  * Base handle interface for file viewer components.
  * Defined locally to avoid dependency on external file-viewer plugin packages.
@@ -760,10 +753,7 @@ interface PowerPointViewerHandle extends FileViewerHandle, PowerPointViewerAPI,
   getContent: () => Promise<Uint8Array>;
 }
 
-//#region src/viewer/utils/animation-effects.d.ts
 declare function getAnimationInitialStyle(preset: PptxAnimationPreset | undefined, nativeAnimation?: PptxNativeAnimation): React__default.CSSProperties;
-//#endregion
-//#region src/viewer/PowerPointViewer.d.ts
 /**
  * Root React component for the PowerPoint viewer/editor.
  *
@@ -774,8 +764,6 @@ declare function getAnimationInitialStyle(preset: PptxAnimationPreset | undefine
  * access (e.g. serialising the current content for saving).
  */
 declare const PowerPointViewer: React.ForwardRefExoticComponent<PowerPointViewerProps & React.RefAttributes<PowerPointViewerHandle>>;
-//#endregion
-//#region src/viewer/i18n/types.d.ts
 /** What the viewer passes `translate`: exactly the params of the call. */
 interface PptxTranslateParams {
   readonly defaultValue?: string;
@@ -788,8 +776,6 @@ interface PptxTranslateParams {
  * translation": the viewer then shows its built-in English text.
  */
 type PptxTranslate = (key: string, params?: PptxTranslateParams) => string | null | undefined;
-//#endregion
-//#region src/viewer/i18n/provider.d.ts
 interface PptxI18nProviderProps {
   /**
    * Translates a viewer key; see {@link PptxTranslate}. Keep it referentially stable (a
@@ -814,7 +800,6 @@ interface PptxI18nProviderProps {
  */
 declare function PptxI18nProvider({ translate, locale, children }: PptxI18nProviderProps): ReactElement;
 
-//#region src/viewer/hooks/useThemeSwitching.d.ts
 interface UseThemeSwitchingInput {
   /** Ref to the PptxHandler instance. */
   handlerRef: RefObject<PptxHandler | null>;
@@ -871,8 +856,6 @@ interface ThemeSwitchingResult {
  * ```
  */
 declare function useThemeSwitching(input: UseThemeSwitchingInput): ThemeSwitchingResult;
-//#endregion
-//#region ../../../../node_modules/.bun/lib0@0.2.119/node_modules/lib0/observable.d.ts
 /**
  * Handles named events.
  *
@@ -912,8 +895,6 @@ declare class Observable<N> {
   emit(name: N, args: Array<any>): void;
   destroy(): void;
 }
-//#endregion
-//#region ../../../../node_modules/.bun/y-protocols@1.0.7+dd3713061a4ad7f6/node_modules/y-protocols/awareness.d.ts
 /**
  * @typedef {Object} MetaClientState
  * @property {number} MetaClientState.clock
@@ -990,8 +971,6 @@ type MetaClientState = {
    */
   lastUpdated: number;
 };
-//#endregion
-//#region src/viewer/hooks/collaboration/useYjsProvider.d.ts
 interface UseYjsProviderInput {
   /**
    * Collaboration config, or `undefined` when collaboration is inactive. The
@@ -1030,8 +1009,6 @@ interface UseYjsProviderResult {
  * (or the full/headless viewer) to attach a host-owned external session.
  */
 declare function useYjsProvider({ config: inputConfig }: UseYjsProviderInput): UseYjsProviderResult;
-//#endregion
-//#region src/viewer/hooks/collaboration/usePresenceTracking.d.ts
 interface UsePresenceTrackingInput {
   awareness: Awareness | BorrowedCollaborationAwareness | null;
   localClientId: number | null;
@@ -1050,8 +1027,6 @@ interface UsePresenceTrackingResult {
   broadcastPresence: (update: Partial<Omit<UserPresence, 'clientId'>>) => void;
 }
 declare function usePresenceTracking({ awareness, localClientId, userName, userColor, userAvatar, role, canvasWidth, canvasHeight }: UsePresenceTrackingInput): UsePresenceTrackingResult;
-//#endregion
-//#region src/viewer/hooks/collaboration/useCollaborativeState.d.ts
 interface UseCollaborativeStateInput {
   /**
    * Collaboration config, or `undefined` when collaboration is inactive. The
@@ -1064,8 +1039,6 @@ interface UseCollaborativeStateInput {
   canvasHeight: number;
 }
 declare function useCollaborativeState({ config: requested, canvasWidth, canvasHeight }: UseCollaborativeStateInput): CollaborationContextValue | null;
-//#endregion
-//#region src/viewer/hooks/collaboration/useCollaborativeHistory.d.ts
 interface UseCollaborativeHistoryInput {
   /** The local user's client ID (from Yjs awareness). */
   localClientId: number | null;
@@ -1089,8 +1062,6 @@ interface UseCollaborativeHistoryResult {
   canRedo: boolean;
 }
 declare function useCollaborativeHistory({ localClientId: _localClientId, handleUndo, handleRedo, canUndo, canRedo }: UseCollaborativeHistoryInput): UseCollaborativeHistoryResult;
-//#endregion
-//#region src/viewer/hooks/presentation-mode/usePresenterWindow.d.ts
 /**
  * Parse the session nonce from the current page URL hash. Returns null if the
  * hash is not in the expected `#pptx-audience&nonce=<uuid>` form.
@@ -1099,7 +1070,6 @@ declare function parseAudienceNonce(): string | null;
 /** Returns true if the current page was opened as an audience tab. */
 declare function isAudienceTab(): boolean;
 
-//#region src/viewer/components/collaboration/CollaborationProvider.d.ts
 interface CollaborationProviderProps {
   /** Collaboration config, or `undefined`/omitted while no session is active. */
   config?: CollaborationConfig;
@@ -1108,8 +1078,6 @@ interface CollaborationProviderProps {
   children: React__default.ReactNode;
 }
 declare function CollaborationProvider({ config, canvasWidth, canvasHeight, children }: CollaborationProviderProps): React__default.ReactElement;
-//#endregion
-//#region src/viewer/components/collaboration/RemoteUserCursors.d.ts
 interface RemoteUserCursorsProps {
   /** Presence data for remote users. */
   remoteUsers: UserPresence[];
@@ -1121,8 +1089,6 @@ interface RemoteUserCursorsProps {
   canvasHeight: number;
 }
 declare function RemoteUserCursors({ remoteUsers, activeSlideIndex, canvasWidth, canvasHeight }: RemoteUserCursorsProps): React__default.ReactElement | null;
-//#endregion
-//#region src/viewer/components/collaboration/UserAvatarBar.d.ts
 interface UserAvatarBarProps {
   /** Remote user presence data. */
   remoteUsers: UserPresence[];
@@ -1138,8 +1104,6 @@ interface UserAvatarBarProps {
   maxVisible?: number;
 }
 declare function UserAvatarBar({ remoteUsers, localUserName, localUserColor, localUserAvatar, status, maxVisible }: UserAvatarBarProps): React__default.ReactElement | null;
-//#endregion
-//#region src/viewer/components/collaboration/CollaborationStatusIndicator.d.ts
 interface CollaborationStatusIndicatorProps {
   /** Current WebSocket connection status. */
   status: ConnectionStatus$1;

package/dist/viewer/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQIETGQJD_js = require('../chunk-QIETGQJD.js');
+var chunkJSVQTF3Z_js = require('../chunk-JSVQTF3Z.js');
 require('../chunk-F6WCYCHV.js');
 var chunkTXVGYIO6_js = require('../chunk-TXVGYIO6.js');
 var chunk5KFSMXI4_js = require('../chunk-5KFSMXI4.js');
@@ -11,19 +11,19 @@ var pptx = require('ooxml-ui/pptx');
 
 Object.defineProperty(exports, "CollaborationStatusIndicator", {
   enumerable: true,
-  get: function () { return chunkQIETGQJD_js.CollaborationStatusIndicator; }
+  get: function () { return chunkJSVQTF3Z_js.CollaborationStatusIndicator; }
 });
 Object.defineProperty(exports, "PowerPointViewer", {
   enumerable: true,
-  get: function () { return chunkQIETGQJD_js.PowerPointViewer; }
+  get: function () { return chunkJSVQTF3Z_js.PowerPointViewer; }
 });
 Object.defineProperty(exports, "PptxI18nProvider", {
   enumerable: true,
-  get: function () { return chunkQIETGQJD_js.PptxI18nProvider; }
+  get: function () { return chunkJSVQTF3Z_js.PptxI18nProvider; }
 });
 Object.defineProperty(exports, "UserAvatarBar", {
   enumerable: true,
-  get: function () { return chunkQIETGQJD_js.UserAvatarBar; }
+  get: function () { return chunkJSVQTF3Z_js.UserAvatarBar; }
 });
 Object.defineProperty(exports, "CollaborationProvider", {
   enumerable: true,

package/dist/viewer/index.mjs

@@ -1,4 +1,4 @@
-export { CollaborationStatusIndicator, PowerPointViewer, PptxI18nProvider, UserAvatarBar } from '../chunk-WLTJX2JE.mjs';
+export { CollaborationStatusIndicator, PowerPointViewer, PptxI18nProvider, UserAvatarBar } from '../chunk-ELMWZISD.mjs';
 import '../chunk-NE5JQMED.mjs';
 export { CollaborationProvider, RemoteUserCursors, clearAudienceContent, isAudienceTab, loadAudienceContent, parseAudienceNonce, storeAudienceContent, useCollaborativeHistory, useCollaborativeState, usePresenceTracking, useThemeSwitching, useYjsProvider } from '../chunk-FYQVCABH.mjs';
 export { getAnimationInitialStyle } from '../chunk-MR3ZSEHS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-react-viewer",
-	"version": "4.62.0",
+	"version": "4.62.2",
 	"description": "pptx-viewer for React: a PowerPoint viewer and editor component to render, edit, and export PPTX slides in the browser.",
 	"keywords": [
 		"editor",
@@ -31,6 +31,7 @@
 	},
 	"files": [
 		"dist/",
+		"src/styles/theme.css",
 		"CHANGELOG.md",
 		"LICENSE",
 		"NOTICE",
@@ -124,14 +125,14 @@
 	"dependencies": {
 		"clsx": "^2.1.1",
 		"dompurify": "^3.4.17",
-		"html2canvas-pro": "^2.5.2",
-		"ooxml-core": "^1.37.0",
-		"ooxml-ui": "^1.39.0",
+		"html2canvas-pro": "^2.5.4",
+		"ooxml-core": "^1.37.1",
+		"ooxml-ui": "^1.39.2",
 		"opentype.js": "^2.0.0",
 		"tailwind-merge": "^3.7.0"
 	},
 	"devDependencies": {
-		"@ai-sdk/react": "^4.0.154",
+		"@ai-sdk/react": "^4.0.161",
 		"@tailwindcss/cli": "^4.3.3",
 		"@types/dompurify": "^3.2.0",
 		"@types/opentype.js": "^1.3.10",
@@ -140,7 +141,7 @@
 		"esbuild": "^0.28.2",
 		"pptx-viewer-core": "^4.13.5",
 		"tailwindcss": "^4.3.3",
-		"tsdown": "^0.23.1",
+		"tsdown": "^0.23.4",
 		"tsup": "^9.0.0",
 		"typescript": "^7.0.2",
 		"vitest": "^5.0.5",

package/src/styles/theme.css

@@ -0,0 +1,205 @@
+/*
+ * pptx-viewer: theme tokens
+ *
+ * Reusable @theme block that maps Tailwind semantic color tokens to --pptx-*
+ * CSS custom properties.  Import this file into any Tailwind v4 entry-point
+ * that renders <PowerPointViewer>.
+ *
+ *   @import "pptx-viewer/theme.css";   // from published package
+ *   @import "../packages/react/src/styles/theme.css";  // from monorepo
+ *
+ * All colours follow shared Office tokens when the --pptx-* properties
+ * are not set.  Override them via the `theme` prop on the component or by
+ * setting the custom properties in your own CSS.
+ */
+
+@theme inline {
+	/* ── Semantic colors ─────────────────────────────────────────────── */
+	--color-background: var(--pptx-background, var(--office-background, #ffffff));
+	--color-foreground: var(--pptx-foreground, var(--office-foreground, #1f2937));
+
+	--color-card: var(--pptx-card, var(--office-surface, #f3f4f6));
+	--color-card-foreground: var(--pptx-card-foreground, var(--office-foreground, #1f2937));
+
+	--color-popover: var(--pptx-popover, var(--office-popover, var(--office-background, #ffffff)));
+	--color-popover-foreground: var(
+		--pptx-popover-foreground,
+		var(--office-popover-foreground, var(--office-foreground, #1f2937))
+	);
+
+	--color-primary: var(--pptx-primary, var(--office-accent, #2563eb));
+	--color-primary-foreground: var(
+		--pptx-primary-foreground,
+		var(--office-accent-foreground, #ffffff)
+	);
+
+	--color-secondary: var(--pptx-secondary, var(--office-surface, #f3f4f6));
+	--color-secondary-foreground: var(--pptx-secondary-foreground, var(--office-foreground, #1f2937));
+
+	--color-muted: var(--pptx-muted, var(--office-surface, #f3f4f6));
+	--color-muted-foreground: var(--pptx-muted-foreground, var(--office-muted-foreground, #6b7280));
+
+	--color-accent: var(--pptx-accent, var(--office-selected, #e5e7eb));
+	--color-accent-foreground: var(--pptx-accent-foreground, var(--office-foreground, #1f2937));
+
+	--color-destructive: var(--pptx-destructive, var(--office-danger, #b91c1c));
+	--color-destructive-foreground: var(
+		--pptx-destructive-foreground,
+		var(--office-danger-foreground, #ffffff)
+	);
+
+	--color-border: var(--pptx-border, var(--office-border, #d1d5db));
+	--color-input: var(--pptx-input, var(--office-border, #d1d5db));
+	--color-ring: var(--pptx-ring, var(--office-ring, #2563eb));
+
+	/* ── Radius ──────────────────────────────────────────────────────── */
+	--radius-sm: calc(var(--pptx-radius, var(--office-radius, 4px)) - 4px);
+	--radius-md: calc(var(--pptx-radius, var(--office-radius, 4px)) - 2px);
+	--radius-lg: var(--pptx-radius, var(--office-radius, 4px));
+	--radius-xl: calc(var(--pptx-radius, var(--office-radius, 4px)) + 4px);
+}
+
+/* ── Reduced motion ──────────────────────────────────────────────────
+ * When the OS prefers-reduced-motion OR the user manually enables it
+ * via the .pptx-reduced-motion class, disable all CSS animations and
+ * transitions throughout the viewer.
+ */
+@media (prefers-reduced-motion: reduce) {
+	[data-pptx-viewer] *,
+	[data-pptx-viewer] *::before,
+	[data-pptx-viewer] *::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+.pptx-reduced-motion *,
+.pptx-reduced-motion *::before,
+.pptx-reduced-motion *::after {
+	animation-duration: 0.01ms !important;
+	animation-iteration-count: 1 !important;
+	transition-duration: 0.01ms !important;
+	scroll-behavior: auto !important;
+}
+
+/* ── Text autosizing. Slide text is laid out against fixed PowerPoint canvas
+ * geometry and the viewer scales the whole slide as one unit. Mobile browsers
+ * (and responsive iframes) may otherwise inflate only the glyphs, which
+ * changes line wrapping and clips text even though the deck is correct.
+ */
+[data-pptx-viewer] {
+	font-family: var(--pptx-font, var(--office-font, system-ui, sans-serif));
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+
+/* ── Hardware acceleration (Options > Advanced > "Disable hardware
+ * graphics acceleration"). Strips the GPU-compositing hints (will-change,
+ * backface-visibility, perspective) transitions/3D effects rely on, for
+ * users on underpowered/unstable graphics drivers. See
+ * `resolveOptionRootClasses` in pptx-viewer-shared.
+ */
+[data-pptx-viewer].pptx-no-hw-accel *,
+[data-pptx-viewer].pptx-no-hw-accel *::before,
+[data-pptx-viewer].pptx-no-hw-accel *::after {
+	will-change: auto !important;
+	backface-visibility: visible !important;
+	perspective: none !important;
+}
+
+/* ── Display optimization (Options > General > "Optimize for compatibility")
+ * Drops shadow/blur/blend-mode effects across the viewer, mirroring
+ * PowerPoint's own degraded-effects mode for older/weaker hardware. See
+ * `resolveOptionRootClasses` in pptx-viewer-shared.
+ */
+[data-pptx-viewer].pptx-compat-display *,
+[data-pptx-viewer].pptx-compat-display *::before,
+[data-pptx-viewer].pptx-compat-display *::after {
+	box-shadow: none !important;
+	backdrop-filter: none !important;
+	-webkit-backdrop-filter: none !important;
+	mix-blend-mode: normal !important;
+}
+
+/* ── Custom scrollbar styling ───────────────────────────────────────
+ * Thin, subtle scrollbars that match the dark theme. Uses both the
+ * WebKit pseudo-elements and the standard scrollbar-* properties.
+ */
+:where([data-pptx-viewer]) {
+	scrollbar-width: thin;
+	scrollbar-color: var(--pptx-border, var(--office-border, #d1d5db)) transparent;
+}
+
+:where([data-pptx-viewer]) ::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+:where([data-pptx-viewer]) ::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+:where([data-pptx-viewer]) ::-webkit-scrollbar-thumb {
+	background-color: var(--pptx-border, var(--office-border, #d1d5db));
+	border-radius: 3px;
+}
+
+:where([data-pptx-viewer]) ::-webkit-scrollbar-thumb:hover {
+	background-color: var(--pptx-muted-foreground, var(--office-muted-foreground, #6b7280));
+}
+
+:where([data-pptx-viewer]) ::-webkit-scrollbar-corner {
+	background: transparent;
+}
+
+/* ── Button press feedback ──────────────────────────────────────────
+ * Subtle scale-down on press for all interactive elements in the
+ * toolbar and status bar areas.
+ */
+[data-pptx-viewer] [role='toolbar'] button,
+[data-pptx-viewer] [role='toolbar'] [role='button'] {
+	transition:
+		transform 0.1s ease,
+		opacity 0.1s ease;
+}
+
+/* ── Focus indicators ────────────────────────────────────────────────
+ * Ensure keyboard focus is visible on interactive slide elements.
+ */
+[data-pptx-element]:focus-visible {
+	outline: 2px solid var(--pptx-ring, var(--office-ring, #2563eb));
+	outline-offset: 2px;
+	z-index: 999;
+}
+
+:where([data-pptx-viewer])
+	:where(button, a, input, select, textarea, [tabindex]):not(
+		[data-pptx-search-input]
+	):focus-visible {
+	outline: 2px solid var(--pptx-ring, var(--office-ring, #2563eb)) !important;
+	outline-offset: 2px;
+}
+
+:where([data-pptx-viewer])
+	:where(button, [role='button']):where(
+		:not([role='switch']):not([data-pptx-compact]):not([data-pptx-backstage-nav-item])
+	) {
+	min-width: 24px;
+	min-height: 24px;
+	touch-action: manipulation;
+}
+
+@media (forced-colors: active) {
+	:where([data-pptx-viewer])
+		:where(button, a, input, select, textarea, [tabindex]):not(
+			[data-pptx-search-input]
+		):focus-visible {
+		outline-color: Highlight;
+	}
+	:where([data-pptx-viewer]) [data-pptx-search-surface]:focus-within {
+		outline: 2px solid Highlight;
+		outline-offset: 2px;
+	}
+}