pptx-react-viewer 3.21.0 → 4.1.0

package/CHANGELOG.md

@@ -7,6 +7,29 @@ A release listed with no entries carried no Conventional Commit in this package'
 scope: scripts/release-plan.mjs re-releases a package whenever any of its files
 change, not only on conventional ones.
 
+## [4.0.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-react-viewer@4.0.0) - 2026-09-18
+
+### Bug Fixes
+
+- **core:** Switch to emf-converter's unified convertMetafileToDataUrl (by @ChristopherVR) ([70a2ea5](https://github.com/ChristopherVR/pptx-viewer/commit/70a2ea5059af31627dfa1f0a7ebe5e12219804bb))
+
+## [3.21.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-react-viewer@3.21.0) - 2026-09-17
+
+### Features
+
+- **shared:** Support host-owned collaboration sessions (by @Sudhansh6) ([cd44eb3](https://github.com/ChristopherVR/pptx-viewer/commit/cd44eb3e79ff6d23e9b92d6f9b0a4eb4ea4f228e))
+- **react:** Attach viewers to host collaboration sessions (by @Sudhansh6) ([ad55608](https://github.com/ChristopherVR/pptx-viewer/commit/ad556085dd83b7013fc5b92d7203b74bf4111f8a))
+
+### Bug Fixes
+
+- **shared:** Preserve consecutive collaborative text breaks (by @Sudhansh6) ([10d1667](https://github.com/ChristopherVR/pptx-viewer/commit/10d1667b3b41cf650985324b2accf7b006bf53c1))
+- **react:** Preserve the public provider awareness type (by @Sudhansh6) ([67d5120](https://github.com/ChristopherVR/pptx-viewer/commit/67d5120932665ee07a48256d92363fd8c8cb6688))
+- **build:** Keep collaboration on the host Yjs runtime (by @Sudhansh6) ([1148601](https://github.com/ChristopherVR/pptx-viewer/commit/114860156b8a82967a85655464e7833bb0fd2644))
+- **react:** Retain snapshots when host callbacks change (by @Sudhansh6) ([47e5751](https://github.com/ChristopherVR/pptx-viewer/commit/47e575159b7e7bfac84bcd7d0c514869e856173e))
+- **react:** Honor external readiness before queued edits (by @Sudhansh6) ([dae37ed](https://github.com/ChristopherVR/pptx-viewer/commit/dae37ed9370d11f11f337e0192c15c7e26ded3cf))
+- **shared:** Unify host session readiness and writeback (by @Sudhansh6) ([4635d01](https://github.com/ChristopherVR/pptx-viewer/commit/4635d01dd9f0d6cd48cfbd3f1ad9968acfd02906))
+- **react:** Preserve accepted drafts when host readiness changes (by @Sudhansh6) ([b1c25cb](https://github.com/ChristopherVR/pptx-viewer/commit/b1c25cbc692f32f693e838ff0a21ca8c919655f4))
+
 ## [3.20.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-react-viewer@3.20.1) - 2026-09-17
 
 ### Bug Fixes

package/dist/{AiChatPanel-UD756KAU.mjs → AiChatPanel-C3ACRWOY.mjs}

@@ -1,7 +1,7 @@
-import { deckIdFromBridge, isAiAvailable, createAiChatSession, toolCanvasTarget, createChatHistoryStore, focusTargetChips, isTwoTableFocus, mergeTablesDirective, humanizeDiffLine, buildDeckContext, describeToolActivity, summarizeToolArgs, toolLabel } from './chunk-TOOKJUPG.mjs';
-import { cn } from './chunk-HZEOZUUH.mjs';
-import './chunk-TMTQJAGK.mjs';
-import './chunk-R664EPDC.mjs';
+import { deckIdFromBridge, isAiAvailable, createAiChatSession, toolCanvasTarget, createChatHistoryStore, focusTargetChips, isTwoTableFocus, mergeTablesDirective, humanizeDiffLine, buildDeckContext, describeToolActivity, summarizeToolArgs, toolLabel } from './chunk-GRAARMUW.mjs';
+import { cn } from './chunk-WLWAYLL6.mjs';
+import './chunk-Q6QJOD56.mjs';
+import './chunk-PC7H3C5W.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useMemo, useRef, useState, useEffect, useReducer, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

package/dist/{AiChatPanel-B3QM7MIC.js → AiChatPanel-GQNSKMP6.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkH7QPQ4OR_js = require('./chunk-H7QPQ4OR.js');
-var chunkSUZIFHXI_js = require('./chunk-SUZIFHXI.js');
-require('./chunk-T6V342NP.js');
-require('./chunk-M24DEOP6.js');
+var chunkMQHMMB6V_js = require('./chunk-MQHMMB6V.js');
+var chunkPUALTXTU_js = require('./chunk-PUALTXTU.js');
+require('./chunk-SK2CZQ6P.js');
+require('./chunk-NXGUR2DO.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var reactI18next = require('react-i18next');
@@ -23,7 +23,7 @@ function useAiChat(bridge, config) {
     setInitError(void 0);
     void (async () => {
       try {
-        const available = await chunkH7QPQ4OR_js.isAiAvailable();
+        const available = await chunkMQHMMB6V_js.isAiAvailable();
         if (cancelled) {
           return;
         }
@@ -31,7 +31,7 @@ function useAiChat(bridge, config) {
           setState("unavailable");
           return;
         }
-        const built = await chunkH7QPQ4OR_js.createAiChatSession(bridge, configRef.current);
+        const built = await chunkMQHMMB6V_js.createAiChatSession(bridge, configRef.current);
         if (cancelled) {
           return;
         }
@@ -137,7 +137,7 @@ function withDeckContext(inner, bridge, strategy) {
       }
       let context = "";
       try {
-        context = await chunkH7QPQ4OR_js.buildDeckContext(bridge, { strategy, focus: {} });
+        context = await chunkMQHMMB6V_js.buildDeckContext(bridge, { strategy, focus: {} });
       } catch {
         context = "";
       }
@@ -200,7 +200,7 @@ function useAiConversation(useChat, session, config, bridge, options = {}) {
         continue;
       }
       seen.add(call.toolCallId);
-      onToolTargetRef.current?.(chunkH7QPQ4OR_js.toolCanvasTarget(call.toolName, call.input));
+      onToolTargetRef.current?.(chunkMQHMMB6V_js.toolCanvasTarget(call.toolName, call.input));
     }
   }, [chat.messages]);
   const send = react.useCallback(
@@ -276,7 +276,7 @@ function deriveTitle(messages) {
 }
 function useAiHistory(input) {
   const { deckId, messages, setMessages } = input;
-  const store = react.useMemo(() => input.store ?? chunkH7QPQ4OR_js.createChatHistoryStore(), [input.store]);
+  const store = react.useMemo(() => input.store ?? chunkMQHMMB6V_js.createChatHistoryStore(), [input.store]);
   const [activeChatId, setActiveChatId] = react.useState(newChatId);
   const [chats, setChats] = react.useState([]);
   const createdAtRef = react.useRef(Date.now());
@@ -419,7 +419,7 @@ function AiComposer({
         disabled: value.trim().length === 0,
         title: t("pptx.ai.send"),
         "aria-label": t("pptx.ai.send"),
-        className: chunkSUZIFHXI_js.cn(
+        className: chunkPUALTXTU_js.cn(
           "shrink-0 rounded-sm p-1.5 transition-colors",
           value.trim().length === 0 ? "text-muted-foreground/50" : "bg-primary text-primary-foreground hover:bg-primary/90"
         ),
@@ -442,15 +442,15 @@ function AiFocusBar({
   onClearPicks
 }) {
   const { t } = reactI18next.useTranslation();
-  const chips = chunkH7QPQ4OR_js.focusTargetChips(targets, slides);
-  const twoTables = chunkH7QPQ4OR_js.isTwoTableFocus(targets, slides);
+  const chips = chunkMQHMMB6V_js.focusTargetChips(targets, slides);
+  const twoTables = chunkMQHMMB6V_js.isTwoTableFocus(targets, slides);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border bg-secondary/30", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1 px-2.5 py-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: t("pptx.ai.focusScope") }),
       chips.map((chip) => /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: chunkSUZIFHXI_js.cn(
+          className: chunkPUALTXTU_js.cn(
             "inline-flex max-w-[10rem] items-center rounded-full px-2 py-0.5 text-[11px]",
             hasPicks || isPinned ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground"
           ),
@@ -466,7 +466,7 @@ function AiFocusBar({
           {
             type: "button",
             onClick: () => onSendDirective(
-              chunkH7QPQ4OR_js.mergeTablesDirective(
+              chunkMQHMMB6V_js.mergeTablesDirective(
                 twoTables.slideIndex,
                 twoTables.elementIdA,
                 twoTables.elementIdB
@@ -487,7 +487,7 @@ function AiFocusBar({
             title: t("pptx.ai.pickElement"),
             "aria-label": t("pptx.ai.pickAria"),
             "aria-pressed": pickMode,
-            className: chunkSUZIFHXI_js.cn(
+            className: chunkPUALTXTU_js.cn(
               "rounded-sm p-1 max-md:min-w-[44px]! max-md:min-h-[44px]! flex items-center justify-center",
               pickMode ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
             ),
@@ -566,7 +566,7 @@ function AiHistoryList({ chats, activeChatId, onResume, onDelete }) {
       {
         type: "button",
         onClick: () => onResume(chat.id),
-        className: chunkSUZIFHXI_js.cn(
+        className: chunkPUALTXTU_js.cn(
           "flex min-w-0 flex-1 items-start gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent",
           chat.id === activeChatId && "bg-accent/60"
         ),
@@ -721,26 +721,26 @@ function AiToolCallCard({ part }) {
   const failed = part.state === "output-error";
   const done = part.state === "output-available";
   const running = !failed && !done;
-  const activity = chunkH7QPQ4OR_js.describeToolActivity(part.toolName, part.input, running ? "present" : "past");
+  const activity = chunkMQHMMB6V_js.describeToolActivity(part.toolName, part.input, running ? "present" : "past");
   const Icon = ICONS[activity.icon] ?? lu.LuWrench;
-  const rawSummary = chunkH7QPQ4OR_js.summarizeToolArgs(part.input);
+  const rawSummary = chunkMQHMMB6V_js.summarizeToolArgs(part.input);
   const statusLabel = failed ? t("pptx.ai.toolFailed") : done ? t("pptx.ai.toolDone") : t("pptx.ai.toolRunning");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[12px]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Icon,
         {
-          className: chunkSUZIFHXI_js.cn(
+          className: chunkPUALTXTU_js.cn(
             "w-3.5 h-3.5 shrink-0",
             failed ? "text-destructive" : "text-muted-foreground"
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkSUZIFHXI_js.cn("truncate", failed ? "text-destructive" : "text-foreground"), children: activity.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkPUALTXTU_js.cn("truncate", failed ? "text-destructive" : "text-foreground"), children: activity.label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
         {
-          className: chunkSUZIFHXI_js.cn(
+          className: chunkPUALTXTU_js.cn(
             "ml-auto inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[10px]",
             failed ? "bg-destructive/15 text-destructive" : done ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
           ),
@@ -757,7 +757,7 @@ function AiToolCallCard({ part }) {
     rawSummary && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group mt-0.5 pl-5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer list-none text-[10px] text-muted-foreground/70 hover:text-muted-foreground", children: t("pptx.ai.toolDetails") }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 break-words font-mono text-[10px] text-muted-foreground/80", children: [
-        chunkH7QPQ4OR_js.toolLabel(part.toolName),
+        chunkMQHMMB6V_js.toolLabel(part.toolName),
         ": ",
         rawSummary
       ] })
@@ -788,7 +788,7 @@ function AiMessageList({ messages, isStreaming, bridge }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: chunkSUZIFHXI_js.cn(
+            className: chunkPUALTXTU_js.cn(
               "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full",
               isUser ? "bg-secondary text-muted-foreground" : "bg-primary/15 text-primary"
             ),
@@ -835,7 +835,7 @@ function AiMessageList({ messages, isStreaming, bridge }) {
 }
 function AiProposalCard({ proposal, onAccept, onReject }) {
   const { t } = reactI18next.useTranslation();
-  const lines = proposal.summary.map(chunkH7QPQ4OR_js.humanizeDiffLine);
+  const lines = proposal.summary.map(chunkMQHMMB6V_js.humanizeDiffLine);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-primary/40 bg-primary/5 p-2.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-primary", children: t("pptx.ai.proposedChange") }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12px] font-medium text-foreground", children: proposal.label }),
@@ -1043,7 +1043,7 @@ function AiChatPanel({
 }) {
   const { t } = reactI18next.useTranslation();
   const { state, session, initError } = useAiChat(bridge, config);
-  const deckId = react.useMemo(() => chunkH7QPQ4OR_js.deckIdFromBridge(bridge), [bridge]);
+  const deckId = react.useMemo(() => chunkMQHMMB6V_js.deckIdFromBridge(bridge), [bridge]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/{Area3DChartScene-435BFPLY.js → Area3DChartScene-3I6KB2DN.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
-var chunkT6V342NP_js = require('./chunk-T6V342NP.js');
+var chunkSK2CZQ6P_js = require('./chunk-SK2CZQ6P.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -23,7 +23,7 @@ function Area3DChartScene({
       return;
     }
     let disposed = false;
-    void chunkT6V342NP_js.mountAreaChart3D(container, options, stableInteraction).then((handle) => {
+    void chunkSK2CZQ6P_js.mountAreaChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {

package/dist/{Area3DChartScene-MQKUWVMS.mjs → Area3DChartScene-4TPNRYXS.mjs}

@@ -1,5 +1,5 @@
 import { useStableChart3DInteraction, useLatestRef } from './chunk-T6GFCLSM.mjs';
-import { mountAreaChart3D } from './chunk-TMTQJAGK.mjs';
+import { mountAreaChart3D } from './chunk-Q6QJOD56.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{Bar3DChartScene-D4GMQGPN.mjs → Bar3DChartScene-V45IUIT7.mjs}

@@ -1,5 +1,5 @@
 import { useStableChart3DInteraction, useLatestRef } from './chunk-T6GFCLSM.mjs';
-import { mountBarChart3D } from './chunk-TMTQJAGK.mjs';
+import { mountBarChart3D } from './chunk-Q6QJOD56.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{Bar3DChartScene-KEYLVYJA.js → Bar3DChartScene-ZSCATOYF.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
-var chunkT6V342NP_js = require('./chunk-T6V342NP.js');
+var chunkSK2CZQ6P_js = require('./chunk-SK2CZQ6P.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -23,7 +23,7 @@ function Bar3DChartScene({
       return;
     }
     let disposed = false;
-    void chunkT6V342NP_js.mountBarChart3D(container, options, stableInteraction).then((handle) => {
+    void chunkSK2CZQ6P_js.mountBarChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {

package/dist/{Line3DChartScene-B3AWFXE4.mjs → Line3DChartScene-DCQJEZK6.mjs}

@@ -1,5 +1,5 @@
 import { useStableChart3DInteraction, useLatestRef } from './chunk-T6GFCLSM.mjs';
-import { mountLineChart3D } from './chunk-TMTQJAGK.mjs';
+import { mountLineChart3D } from './chunk-Q6QJOD56.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{Line3DChartScene-JYGXLE56.js → Line3DChartScene-DK55LQ2D.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
-var chunkT6V342NP_js = require('./chunk-T6V342NP.js');
+var chunkSK2CZQ6P_js = require('./chunk-SK2CZQ6P.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -23,7 +23,7 @@ function Line3DChartScene({
       return;
     }
     let disposed = false;
-    void chunkT6V342NP_js.mountLineChart3D(container, options, stableInteraction).then((handle) => {
+    void chunkSK2CZQ6P_js.mountLineChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {

package/dist/{Model3DScene-JF5J6N6W.js → Model3DScene-2WNP4XBP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkT6V342NP_js = require('./chunk-T6V342NP.js');
+var chunkSK2CZQ6P_js = require('./chunk-SK2CZQ6P.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -14,7 +14,7 @@ function Model3DScene({ modelUrl, interactive, width, height }) {
       return;
     }
     let disposed = false;
-    void chunkT6V342NP_js.mountModel3D(container, modelUrl, { width, height, interactive }).then((handle) => {
+    void chunkSK2CZQ6P_js.mountModel3D(container, modelUrl, { width, height, interactive }).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {

package/dist/{Model3DScene-4TG4YRVM.mjs → Model3DScene-SA5XMR2D.mjs}

@@ -1,4 +1,4 @@
-import { mountModel3D } from './chunk-TMTQJAGK.mjs';
+import { mountModel3D } from './chunk-Q6QJOD56.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{PieChart3DScene-4BQ6PR7P.mjs → PieChart3DScene-HC2ZWL42.mjs}

@@ -1,5 +1,5 @@
 import { useStableChart3DInteraction, useLatestRef } from './chunk-T6GFCLSM.mjs';
-import { mountPieChart3D } from './chunk-TMTQJAGK.mjs';
+import { mountPieChart3D } from './chunk-Q6QJOD56.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{PieChart3DScene-CCQWSH3W.js → PieChart3DScene-Q75D66HS.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
-var chunkT6V342NP_js = require('./chunk-T6V342NP.js');
+var chunkSK2CZQ6P_js = require('./chunk-SK2CZQ6P.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -21,7 +21,7 @@ function PieChart3DScene({
       return;
     }
     let disposed = false;
-    void chunkT6V342NP_js.mountPieChart3D(container, options, stableInteraction).then((handle) => {
+    void chunkSK2CZQ6P_js.mountPieChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {

package/dist/{SmartArt3DScene-QZGIABOK.mjs → SmartArt3DScene-D4VNNPHS.mjs}

@@ -1,6 +1,6 @@
 import { useLatestRef } from './chunk-T6GFCLSM.mjs';
 import { OrbitControls } from './chunk-MV2GCDBR.mjs';
-import { WebGLRenderer, Scene, Color, PerspectiveCamera, AmbientLight, DirectionalLight, Group, MeshStandardMaterial, Mesh, EdgesGeometry, LineBasicMaterial, LineSegments, PlaneGeometry, MeshBasicMaterial, Euler, Vector3, BufferGeometry, Line, Shape, ExtrudeGeometry, CanvasTexture, SRGBColorSpace, LinearFilter, RepeatWrapping } from './chunk-7TAWW5QQ.mjs';
+import { WebGLRenderer, Scene, Color, PerspectiveCamera, AmbientLight, DirectionalLight, Group, MeshStandardMaterial, Mesh, EdgesGeometry, LineBasicMaterial, LineSegments, PlaneGeometry, MeshBasicMaterial, DoubleSide, Euler, Vector3, BufferGeometry, Line, Shape, ExtrudeGeometry, CanvasTexture, SRGBColorSpace, LinearFilter, RepeatWrapping } from './chunk-7TAWW5QQ.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -159,9 +159,12 @@ function buildLabelPlane(m, textStyle) {
   const planeMaterial = new MeshBasicMaterial({
     map: tex.texture,
     transparent: true,
-    depthWrite: false
+    depthWrite: false,
+    depthTest: false,
+    side: DoubleSide
   });
   const plane = new Mesh(planeGeo, planeMaterial);
+  plane.renderOrder = 1;
   const euler = new Euler(m.rotation.x, m.rotation.y, m.rotation.z);
   const offset = new Vector3(0, 0, m.depth + m.bevel + 0.4).applyEuler(euler);
   plane.position.set(m.position.x + offset.x, m.position.y + offset.y, m.position.z + offset.z);
@@ -218,6 +221,13 @@ function buildMeshGroup(model, textStyle) {
         }
       }
     },
+    forEachLabelPlane(fn) {
+      for (const entry of labelEntries) {
+        if (entry.plane) {
+          fn(entry.plane);
+        }
+      }
+    },
     dispose() {
       for (const d of blockDisposables) {
         d.dispose();
@@ -229,6 +239,17 @@ function buildMeshGroup(model, textStyle) {
   };
 }
 var FOV = 42;
+function expandForMesh(expand, m) {
+  const hx = m.halfWidth + m.bevel;
+  const hy = m.halfHeight + m.bevel;
+  const hz = m.depth / 2 + m.bevel;
+  const midZ = m.position.z + m.depth / 2;
+  const cosY = Math.cos(m.rotation.y);
+  const sinY = Math.sin(m.rotation.y);
+  const worldHalfX = Math.abs(hx * cosY) + Math.abs(hz * sinY);
+  const worldHalfZ = Math.abs(hx * sinY) + Math.abs(hz * cosY);
+  expand(m.position.x, m.position.y, midZ, worldHalfX, hy, worldHalfZ);
+}
 function contentSphere(model) {
   let minX = Infinity;
   let minY = Infinity;
@@ -236,32 +257,36 @@ function contentSphere(model) {
   let maxX = -Infinity;
   let maxY = -Infinity;
   let maxZ = -Infinity;
-  const expand = (x, y, z, r) => {
-    minX = Math.min(minX, x - r);
-    minY = Math.min(minY, y - r);
-    minZ = Math.min(minZ, z - r);
-    maxX = Math.max(maxX, x + r);
-    maxY = Math.max(maxY, y + r);
-    maxZ = Math.max(maxZ, z + r);
+  const expand = (x, y, z, rx, ry, rz) => {
+    minX = Math.min(minX, x - rx);
+    minY = Math.min(minY, y - ry);
+    minZ = Math.min(minZ, z - rz);
+    maxX = Math.max(maxX, x + rx);
+    maxY = Math.max(maxY, y + ry);
+    maxZ = Math.max(maxZ, z + rz);
   };
   for (const m of model.meshes) {
-    const r = Math.max(m.halfWidth, m.halfHeight) + m.depth + m.bevel;
-    expand(m.position.x, m.position.y, m.position.z, r);
+    expandForMesh(expand, m);
   }
   for (const c of model.connectors) {
     for (const p of c.points) {
-      expand(p.x, p.y, p.z, 1);
+      expand(p.x, p.y, p.z, 1, 1, 1);
     }
   }
   if (!Number.isFinite(minX)) {
-    const fallback = Math.max(model.bounds.width, model.bounds.height) / 2 || 1;
-    return { cx: 0, cy: 0, cz: 0, radius: fallback };
+    const halfW = model.bounds.width / 2 || 1;
+    const halfH = model.bounds.height / 2 || 1;
+    const fallback = Math.max(halfW, halfH);
+    return { cx: 0, cy: 0, cz: 0, radius: fallback, halfW, halfH, halfD: 1 };
   }
   return {
     cx: (minX + maxX) / 2,
     cy: (minY + maxY) / 2,
     cz: (minZ + maxZ) / 2,
-    radius: 0.5 * Math.hypot(maxX - minX, maxY - minY, maxZ - minZ) || 1
+    radius: 0.5 * Math.hypot(maxX - minX, maxY - minY, maxZ - minZ) || 1,
+    halfW: (maxX - minX) / 2,
+    halfH: (maxY - minY) / 2,
+    halfD: (maxZ - minZ) / 2
   };
 }
 function frameDistance(radius, aspect) {
@@ -270,6 +295,83 @@ function frameDistance(radius, aspect) {
   const minFov = Math.min(vFov, hFov);
   return radius / Math.sin(minFov / 2) * 1.1;
 }
+var FRAME_FILL = 0.92;
+function placeCamera(bounds, family, dist) {
+  const { cx, cy, cz, radius } = bounds;
+  const elevation = cameraElevation(family, radius, dist);
+  return {
+    position: [cx + radius * 0.25, cy + elevation, cz + dist],
+    target: [cx, cy, cz],
+    dist
+  };
+}
+function projectedFill(bounds, placement, aspect) {
+  const vFov = FOV * Math.PI / 180;
+  const tanV = Math.tan(vFov / 2);
+  const tanH = tanV * aspect;
+  const [px, py, pz] = placement.position;
+  const [tx, ty, tz] = placement.target;
+  let fx = tx - px, fy = ty - py, fz = tz - pz;
+  const fl = Math.hypot(fx, fy, fz) || 1;
+  fx /= fl;
+  fy /= fl;
+  fz /= fl;
+  let rx = -fz, rz = fx;
+  const rl = Math.hypot(rx, rz) || 1;
+  rx /= rl;
+  rz /= rl;
+  const ux = -rz * fy, uy = rz * fx - rx * fz, uz = rx * fy;
+  let worst = 0;
+  for (const sx of [-1, 1]) {
+    for (const sy of [-1, 1]) {
+      for (const sz of [-1, 1]) {
+        const dx = bounds.cx + sx * bounds.halfW - px;
+        const dy = bounds.cy + sy * bounds.halfH - py;
+        const dz = bounds.cz + sz * bounds.halfD - pz;
+        const depth = dx * fx + dy * fy + dz * fz;
+        if (depth <= 1e-6) {
+          return Infinity;
+        }
+        const x = Math.abs(dx * rx + dz * rz) / (depth * tanH);
+        const y = Math.abs(dx * ux + dy * uy + dz * uz) / (depth * tanV);
+        worst = Math.max(worst, x, y);
+      }
+    }
+  }
+  return worst;
+}
+function fitCamera(bounds, family, aspect) {
+  let dist = frameDistance(bounds.radius, aspect);
+  let placement = placeCamera(bounds, family, dist);
+  for (let step = 0; step < 8; step++) {
+    const fill = projectedFill(bounds, placement, aspect);
+    if (!Number.isFinite(fill)) {
+      dist *= 2;
+    } else {
+      const ratio = fill / FRAME_FILL;
+      if (Math.abs(ratio - 1) < 0.01) {
+        break;
+      }
+      dist *= ratio;
+    }
+    placement = placeCamera(bounds, family, dist);
+  }
+  return placement;
+}
+var CAROUSEL_ELEVATION_DEG = 34;
+function cameraElevation(family, radius, dist) {
+  if (family === "cycle" || family === "radial") {
+    return dist * Math.tan(CAROUSEL_ELEVATION_DEG * Math.PI / 180);
+  }
+  return radius * 0.3;
+}
+function billboardLabels(built, camera) {
+  built.forEachLabelPlane((plane) => {
+    const dx = camera.position.x - plane.position.x;
+    const dz = camera.position.z - plane.position.z;
+    plane.rotation.set(0, Math.atan2(dx, dz), 0);
+  });
+}
 function mountSmartArt3D(canvas, model, width, height, options = {}) {
   const renderer = new WebGLRenderer({ canvas, antialias: true, alpha: !options.background });
   renderer.setPixelRatio(
@@ -283,12 +385,14 @@ function mountSmartArt3D(canvas, model, width, height, options = {}) {
   if (options.background) {
     scene.background = new Color(options.background);
   }
-  const { cx, cy, cz, radius } = contentSphere(model);
+  const bounds = contentSphere(model);
+  const { cx, cy, cz, radius } = bounds;
   const aspect = width / Math.max(1, height);
-  const dist = frameDistance(radius, aspect);
+  const placement = fitCamera(bounds, model.family, aspect);
+  const { dist } = placement;
   const camera = new PerspectiveCamera(FOV, aspect, 0.1, dist * 8 + radius * 4);
-  camera.position.set(cx + radius * 0.25, cy + radius * 0.3, cz + dist);
-  camera.lookAt(cx, cy, cz);
+  camera.position.set(...placement.position);
+  camera.lookAt(...placement.target);
   scene.add(new AmbientLight(16777215, 0.62));
   const key = new DirectionalLight(16777215, 0.95);
   key.position.set(cx + radius, cy + radius * 1.4, cz + dist);
@@ -324,6 +428,7 @@ function mountSmartArt3D(canvas, model, width, height, options = {}) {
       return;
     }
     frame = requestAnimationFrame(renderLoop);
+    billboardLabels(built, camera);
     controls?.update();
     renderer.render(scene, camera);
   };