pptx-react-viewer 4.62.1 → 4.63.0

package/CHANGELOG.md

@@ -7,6 +7,19 @@ A release listed with no entries carried no Conventional Commit in this package'
 scope: scripts/release-plan.mjs releases whenever any published file changes, not only on
 conventional commits.
 
+## [4.63.0](https://github.com/ChristopherVR/ooxml/releases/tag/pptx-react-viewer@4.63.0) - 2026-11-04
+
+### Features
+
+- **embedding:** Connect office products to shared onedrive storage ([b8620c1](https://github.com/ChristopherVR/ooxml/commit/b8620c13a4903aa27fed365d113153cad76ed29f))
+- **collab:** Merge concurrent onedrive document edits ([194529b](https://github.com/ChristopherVR/ooxml/commit/194529b06c63f994eed5d1d4b7e82759e17a704b))
+
+## [4.62.2](https://github.com/ChristopherVR/ooxml/releases/tag/pptx-react-viewer@4.62.2) - 2026-11-03
+
+### Bug Fixes
+
+- **release:** Publish pptx-angular-viewer from its built dist ([#240](https://github.com/ChristopherVR/ooxml/issues/240)) ([8015762](https://github.com/ChristopherVR/ooxml/commit/8015762a9eb2852cbaa4bc57bd0e7d6912802bd3))
+
 ## [4.62.1](https://github.com/ChristopherVR/ooxml/releases/tag/pptx-react-viewer@4.62.1) - 2026-11-03
 
 ### Styling

package/README.md

@@ -353,3 +353,12 @@ for registration and runtime switching. Existing English imports are unchanged.
 ## License
 
 [Apache-2.0](LICENSE). Please keep the [`NOTICE`](NOTICE) file with redistributions.
+
+## OneDrive integration
+
+Use the optional shared `ooxml-core/embedding/onedrive` connection with host-supplied Microsoft
+sign-in. See the [Office package and integration reference](https://github.com/ChristopherVR/ooxml/blob/main/docs/onedrive-integration.md#powerpoint-pptx)
+for this product's load/save API, native storage wiring, sharing permissions and conflict recovery.
+The [testing guide](https://github.com/ChristopherVR/ooxml/blob/main/docs/onedrive-testing.md)
+separates test-local transports from live Microsoft acceptance. No simulation service is shipped;
+OneDrive storage does not provide Microsoft Office coauthoring or automatic document merging.

package/dist/{chunk-HNNMNFA2.js → chunk-G5XPJCS5.js}

@@ -2795,7 +2795,7 @@ function AccountPage() {
       return void 0;
     });
   };
-  const version = "4.62.1" ;
+  const version = "4.63.0" ;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 max-w-[700px] space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cardClass, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "flex items-center gap-2 text-sm font-semibold", children: [

package/dist/{chunk-KHFBKZWP.mjs → chunk-XCOYNPXR.mjs}

@@ -2790,7 +2790,7 @@ function AccountPage() {
       return void 0;
     });
   };
-  const version = "4.62.1" ;
+  const version = "4.63.0" ;
   return /* @__PURE__ */ jsxs("div", { className: "mt-8 max-w-[700px] space-y-6", children: [
     /* @__PURE__ */ jsxs("section", { className: cardClass, children: [
       /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 text-sm font-semibold", children: [

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkHNNMNFA2_js = require('./chunk-HNNMNFA2.js');
+var chunkG5XPJCS5_js = require('./chunk-G5XPJCS5.js');
 require('./chunk-F6WCYCHV.js');
 var chunkTXVGYIO6_js = require('./chunk-TXVGYIO6.js');
 var chunk5KFSMXI4_js = require('./chunk-5KFSMXI4.js');
@@ -12,83 +12,83 @@ var i18n = require('ooxml-ui/pptx/i18n');
 
 Object.defineProperty(exports, "PowerPointViewer", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.PowerPointViewer; }
+  get: function () { return chunkG5XPJCS5_js.PowerPointViewer; }
 });
 Object.defineProperty(exports, "PptxI18nProvider", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.PptxI18nProvider; }
+  get: function () { return chunkG5XPJCS5_js.PptxI18nProvider; }
 });
 Object.defineProperty(exports, "SlideCanvas", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.SlideCanvas; }
+  get: function () { return chunkG5XPJCS5_js.SlideCanvas; }
 });
 Object.defineProperty(exports, "SlideTemplateGalleryDialog", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.SlideTemplateGalleryDialog; }
+  get: function () { return chunkG5XPJCS5_js.SlideTemplateGalleryDialog; }
 });
 Object.defineProperty(exports, "SlideTemplatePreview", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.SlideTemplatePreview; }
+  get: function () { return chunkG5XPJCS5_js.SlideTemplatePreview; }
 });
 Object.defineProperty(exports, "SlidesPane", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.SlidesPaneSidebar; }
+  get: function () { return chunkG5XPJCS5_js.SlidesPaneSidebar; }
 });
 Object.defineProperty(exports, "THEME_CATALOG", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.THEME_CATALOG; }
+  get: function () { return chunkG5XPJCS5_js.THEME_CATALOG; }
 });
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.Toolbar; }
+  get: function () { return chunkG5XPJCS5_js.Toolbar; }
 });
 Object.defineProperty(exports, "ViewerThemeProvider", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.ViewerThemeProvider; }
+  get: function () { return chunkG5XPJCS5_js.ViewerThemeProvider; }
 });
 Object.defineProperty(exports, "defaultCssVars", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.defaultCssVars; }
+  get: function () { return chunkG5XPJCS5_js.defaultCssVars; }
 });
 Object.defineProperty(exports, "defaultRadius", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.defaultRadius; }
+  get: function () { return chunkG5XPJCS5_js.defaultRadius; }
 });
 Object.defineProperty(exports, "defaultThemeColors", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.defaultThemeColors; }
+  get: function () { return chunkG5XPJCS5_js.defaultThemeColors; }
 });
 Object.defineProperty(exports, "resolveThemeCatalogEntry", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.resolveThemeCatalogEntry; }
+  get: function () { return chunkG5XPJCS5_js.resolveThemeCatalogEntry; }
 });
 Object.defineProperty(exports, "themeToCssVars", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.themeToCssVars; }
+  get: function () { return chunkG5XPJCS5_js.themeToCssVars; }
 });
 Object.defineProperty(exports, "useViewerTheme", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.useViewerTheme; }
+  get: function () { return chunkG5XPJCS5_js.useViewerTheme; }
 });
 Object.defineProperty(exports, "vermilionDarkColors", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.vermilionDarkColors; }
+  get: function () { return chunkG5XPJCS5_js.vermilionDarkColors; }
 });
 Object.defineProperty(exports, "vermilionDarkTheme", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.vermilionDarkTheme; }
+  get: function () { return chunkG5XPJCS5_js.vermilionDarkTheme; }
 });
 Object.defineProperty(exports, "vermilionLightColors", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.vermilionLightColors; }
+  get: function () { return chunkG5XPJCS5_js.vermilionLightColors; }
 });
 Object.defineProperty(exports, "vermilionLightTheme", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.vermilionLightTheme; }
+  get: function () { return chunkG5XPJCS5_js.vermilionLightTheme; }
 });
 Object.defineProperty(exports, "vermilionRadius", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.vermilionRadius; }
+  get: function () { return chunkG5XPJCS5_js.vermilionRadius; }
 });
 Object.defineProperty(exports, "renderToCanvas", {
   enumerable: true,

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { PowerPointViewer, PptxI18nProvider, SlideCanvas, SlideTemplateGalleryDialog, SlideTemplatePreview, SlidesPaneSidebar as SlidesPane, THEME_CATALOG, Toolbar, ViewerThemeProvider, defaultCssVars, defaultRadius, defaultThemeColors, resolveThemeCatalogEntry, themeToCssVars, useViewerTheme, vermilionDarkColors, vermilionDarkTheme, vermilionLightColors, vermilionLightTheme, vermilionRadius } from './chunk-KHFBKZWP.mjs';
+export { PowerPointViewer, PptxI18nProvider, SlideCanvas, SlideTemplateGalleryDialog, SlideTemplatePreview, SlidesPaneSidebar as SlidesPane, THEME_CATALOG, Toolbar, ViewerThemeProvider, defaultCssVars, defaultRadius, defaultThemeColors, resolveThemeCatalogEntry, themeToCssVars, useViewerTheme, vermilionDarkColors, vermilionDarkTheme, vermilionLightColors, vermilionLightTheme, vermilionRadius } from './chunk-XCOYNPXR.mjs';
 import './chunk-NE5JQMED.mjs';
 export { renderToCanvas, useViewerBuildingBlocks } from './chunk-FYQVCABH.mjs';
 export { getAnimationInitialStyle } from './chunk-MR3ZSEHS.mjs';

package/dist/viewer/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkHNNMNFA2_js = require('../chunk-HNNMNFA2.js');
+var chunkG5XPJCS5_js = require('../chunk-G5XPJCS5.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 chunkHNNMNFA2_js.CollaborationStatusIndicator; }
+  get: function () { return chunkG5XPJCS5_js.CollaborationStatusIndicator; }
 });
 Object.defineProperty(exports, "PowerPointViewer", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.PowerPointViewer; }
+  get: function () { return chunkG5XPJCS5_js.PowerPointViewer; }
 });
 Object.defineProperty(exports, "PptxI18nProvider", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.PptxI18nProvider; }
+  get: function () { return chunkG5XPJCS5_js.PptxI18nProvider; }
 });
 Object.defineProperty(exports, "UserAvatarBar", {
   enumerable: true,
-  get: function () { return chunkHNNMNFA2_js.UserAvatarBar; }
+  get: function () { return chunkG5XPJCS5_js.UserAvatarBar; }
 });
 Object.defineProperty(exports, "CollaborationProvider", {
   enumerable: true,

package/dist/viewer/index.mjs

@@ -1,4 +1,4 @@
-export { CollaborationStatusIndicator, PowerPointViewer, PptxI18nProvider, UserAvatarBar } from '../chunk-KHFBKZWP.mjs';
+export { CollaborationStatusIndicator, PowerPointViewer, PptxI18nProvider, UserAvatarBar } from '../chunk-XCOYNPXR.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.1",
+	"version": "4.63.0",
 	"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",
@@ -125,8 +126,8 @@
 		"clsx": "^2.1.1",
 		"dompurify": "^3.4.17",
 		"html2canvas-pro": "^2.5.4",
-		"ooxml-core": "^1.37.1",
-		"ooxml-ui": "^1.39.2",
+		"ooxml-core": "^1.38.0",
+		"ooxml-ui": "^1.40.0",
 		"opentype.js": "^2.0.0",
 		"tailwind-merge": "^3.7.0"
 	},
@@ -138,7 +139,7 @@
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
 		"esbuild": "^0.28.2",
-		"pptx-viewer-core": "^4.13.5",
+		"pptx-viewer-core": "^4.14.0",
 		"tailwindcss": "^4.3.3",
 		"tsdown": "^0.23.4",
 		"tsup": "^9.0.0",

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;
+	}
+}