pptx-react-viewer 1.1.4 → 1.1.5

package/dist/index.mjs

@@ -1,11 +1,12 @@
 import * as React10 from 'react';
-import React10__default, { createContext, useState, useEffect, useMemo, Suspense, useCallback, forwardRef, useRef, useSyncExternalStore, useImperativeHandle, useContext, useLayoutEffect } from 'react';
+import React10__default, { createContext, useState, useEffect, useMemo, Suspense, useCallback, forwardRef, useRef, useSyncExternalStore, useImperativeHandle, useContext, useLayoutEffect, useDeferredValue } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom/client';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { LuMessageSquare, LuEyeOff, LuSettings, LuX, LuCast, LuShieldCheck, LuPlus, LuPanelLeftClose, LuStickyNote, LuMonitor, LuColumns2, LuPresentation, LuMinus, LuClock, LuDownload, LuTrash2, LuCheck, LuLock, LuEye, LuFileText, LuType, LuLoader, LuShieldAlert, LuSignature, LuInfo, LuTriangleAlert, LuPrinter, LuPenTool, LuWifi, LuWifiOff, LuUsers, LuCopy, LuMonitorOff, LuChevronLeft, LuChevronRight, LuPlay, LuPause, LuPanelLeft, LuUndo, LuRedo, LuSearch, LuShare2, LuPanelRight, LuFolderOpen, LuVideo, LuImage, LuClipboardPaste, LuScissors, LuPaintbrush, LuChevronDown, LuSquare, LuDatabase, LuLayers, LuAArrowUp, LuAArrowDown, LuRemoveFormatting, LuHighlighter, LuList, LuListOrdered, LuIndentDecrease, LuIndentIncrease, LuChevronUp, LuPalette, LuPencil, LuPaintBucket, LuSparkles, LuCaptions, LuSpellCheck, LuGitCompare, LuPipette, LuCaseSensitive, LuReplace, LuTimer, LuMousePointer2, LuEraser, LuGripVertical, LuUpload, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuLink, LuGrid2X2, LuCopyPlus, LuEllipsis, LuCircle, LuMoveRight, LuTriangle, LuDiamond, LuAlignLeft, LuAlignCenter, LuAlignRight, LuAlignJustify, LuSpline, LuSettings2, LuMove, LuRadio, LuArrowDown, LuArrowUp, LuArrowRight, LuArrowLeft, LuReply, LuRotateCw, LuBookmark } from 'react-icons/lu';
 import { hasShapeProperties, hasTextProperties, SWITCHABLE_LAYOUT_TYPES, isCalloutShape, getCalloutLeaderLineGeometry, buildCalloutLeaderLineSvgPath, getCalloutViewBoxBounds, isInkElement, getLinkedTextBoxSegments, isImageLikeElement, getSubstituteFontFamily, PptxHandler, EncryptedFileError, guidePxToEmu, guideEmuToPx, THEME_COLOR_SCHEME_KEYS, hslToRgb, PRESET_COLOR_MAP, elementActionToPptxAction, mergeShapes, SvgExporter, applyDrawingColorTransforms as applyDrawingColorTransforms$1, getPresetShapeClipPath, svgPathToPolygons, polygonsToSvgPath, EMU_PER_PX as EMU_PER_PX$1, chartDataChangeType, chartDataUpdatePoint, chartDataAddCategory, chartDataRemoveCategory, chartDataAddSeries, chartDataRemoveSeries, getOleObjectTypeLabel, pptxActionToElementAction, hasNonTrivialOverride, COLOR_MAP_ALIAS_KEYS, DEFAULT_COLOR_MAP, addSmartArtNodeAsChild, updateSmartArtNodeText, removeSmartArtNode, switchSmartArtLayout } from 'pptx-viewer-core';
+import DOMPurify from 'dompurify';
 import { useTranslation } from 'react-i18next';
 import html2canvasPro from 'html2canvas-pro';
 import JSZip from 'jszip';
@@ -43570,7 +43571,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
       }
       function useSyncExternalStore$2(subscribe3, getSnapshot2) {
-        didWarnOld18Alpha || void 0 === React97.startTransition || (didWarnOld18Alpha = true, console.error(
+        didWarnOld18Alpha || void 0 === React100.startTransition || (didWarnOld18Alpha = true, console.error(
           "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
         ));
         var value = getSnapshot2();
@@ -43580,7 +43581,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState85({
+        cachedValue = useState86({
           inst: { value, getSnapshot: getSnapshot2 }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -43618,8 +43619,8 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot2();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React97 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState85 = React97.useState, useEffect72 = React97.useEffect, useLayoutEffect7 = React97.useLayoutEffect, useDebugValue = React97.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      exports$1.useSyncExternalStore = void 0 !== React97.useSyncExternalStore ? React97.useSyncExternalStore : shim;
+      var React100 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is2, useState86 = React100.useState, useEffect72 = React100.useEffect, useLayoutEffect7 = React100.useLayoutEffect, useDebugValue = React100.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      exports$1.useSyncExternalStore = void 0 !== React100.useSyncExternalStore ? React100.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
   }
@@ -43642,7 +43643,7 @@ var require_with_selector_development = __commonJS({
         return x2 === y && (0 !== x2 || 1 / x2 === 1 / y) || x2 !== x2 && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React97 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef73 = React97.useRef, useEffect72 = React97.useEffect, useMemo41 = React97.useMemo, useDebugValue = React97.useDebugValue;
+      var React100 = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is2, useSyncExternalStore3 = shim.useSyncExternalStore, useRef73 = React100.useRef, useEffect72 = React100.useEffect, useMemo41 = React100.useMemo, useDebugValue = React100.useDebugValue;
       exports$1.useSyncExternalStoreWithSelector = function(subscribe3, getSnapshot2, getServerSnapshot2, selector, isEqual) {
         var instRef = useRef73(null);
         if (null === instRef.current) {
@@ -74074,6 +74075,13 @@ function hasDistinctScriptFonts(fonts) {
   }
   return Boolean(fonts.eastAsia) && fonts.eastAsia !== base || Boolean(fonts.complexScript) && fonts.complexScript !== base || Boolean(fonts.symbol) && fonts.symbol !== base;
 }
+function sanitizeMathMl(markup) {
+  const purify = DOMPurify;
+  if (typeof purify.sanitize !== "function") {
+    return markup;
+  }
+  return purify.sanitize(markup, { USE_PROFILES: { mathMl: true, svg: true } });
+}
 function renderScriptAwareText(text2, needsScriptFonts, scriptFonts, baseFontFamily, keyPrefix) {
   if (!needsScriptFonts || !text2) {
     return text2;
@@ -74164,14 +74172,15 @@ function renderSegmentContent(elementId, segmentIndex, textValue, lines, needsSc
 }
 function renderEquationSegment(elementId, segmentIndex, equationXml, equationNumber) {
   const mathml = convertOmmlToMathMl(equationXml);
-  const equationContent = mathml ? /* @__PURE__ */ jsx(
+  const safeMathml = mathml ? sanitizeMathMl(mathml) : "";
+  const equationContent = safeMathml ? /* @__PURE__ */ jsx(
     "span",
     {
       className: "inline-block align-middle",
       style: {
         fontFamily: '"Cambria Math", "STIX Two Math", serif'
       },
-      dangerouslySetInnerHTML: { __html: mathml }
+      dangerouslySetInnerHTML: { __html: safeMathml }
     }
   ) : /* @__PURE__ */ jsx("span", { className: "inline-block px-1 py-0.5 rounded text-xs bg-gray-200/20 text-gray-400 italic", children: "Equation" });
   if (equationNumber) {
@@ -86528,7 +86537,7 @@ function ResizeHandle({
     }
   );
 }
-function SlideThumbnail({
+function SlideThumbnailImpl({
   slide,
   templateElements,
   canvasSize
@@ -86766,6 +86775,37 @@ function ThumbnailTable({
   }
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-[10px] text-muted-foreground pointer-events-none", children: "Table" });
 }
+function arePropsEqual(prev, next) {
+  if (prev.slide.id !== next.slide.id) {
+    return false;
+  }
+  if (prev.slide.isDirty !== next.slide.isDirty) {
+    return false;
+  }
+  if (prev.slide.hidden !== next.slide.hidden) {
+    return false;
+  }
+  if (prev.slide.elements !== next.slide.elements) {
+    return false;
+  }
+  if (prev.slide.backgroundColor !== next.slide.backgroundColor) {
+    return false;
+  }
+  if (prev.slide.backgroundImage !== next.slide.backgroundImage) {
+    return false;
+  }
+  if (prev.slide.backgroundGradient !== next.slide.backgroundGradient) {
+    return false;
+  }
+  if (prev.templateElements !== next.templateElements) {
+    return false;
+  }
+  if (prev.canvasSize.width !== next.canvasSize.width || prev.canvasSize.height !== next.canvasSize.height) {
+    return false;
+  }
+  return true;
+}
+var SlideThumbnail = React10__default.memo(SlideThumbnailImpl, arePropsEqual);
 function ContextMenu({
   contextMenuState,
   mode,
@@ -90499,7 +90539,7 @@ function BendingProcessRenderer({
     }
   );
 }
-function SmartArtRenderer({
+function SmartArtRendererImpl({
   element: element2,
   className = ""
 }) {
@@ -90610,6 +90650,30 @@ function renderLayout(layoutType, element2, nodes, palette, style) {
   }
   return /* @__PURE__ */ jsx(ListRenderer, { element: element2, nodes, palette, style });
 }
+function arePropsEqual2(prev, next) {
+  if (prev.className !== next.className) {
+    return false;
+  }
+  if (prev.element.id !== next.element.id) {
+    return false;
+  }
+  if (prev.element.type !== next.element.type) {
+    return false;
+  }
+  if (prev.element.width !== next.element.width || prev.element.height !== next.element.height) {
+    return false;
+  }
+  if (prev.element.x !== next.element.x || prev.element.y !== next.element.y) {
+    return false;
+  }
+  const prevData = prev.element.type === "smartArt" ? prev.element.smartArtData : void 0;
+  const nextData = next.element.type === "smartArt" ? next.element.smartArtData : void 0;
+  if (prevData !== nextData) {
+    return false;
+  }
+  return true;
+}
+var SmartArtRenderer = React10__default.memo(SmartArtRendererImpl, arePropsEqual2);
 function ZoomElementRenderer({
   element: element2,
   slides,
@@ -93553,7 +93617,7 @@ function SectionBlock({
     )
   ] });
 }
-function SlideCard({
+function SlideCardImpl({
   slide,
   index,
   isActive,
@@ -93607,6 +93671,49 @@ function SlideCard({
     }
   );
 }
+function arePropsEqual3(prev, next) {
+  if (prev.slide.id !== next.slide.id) {
+    return false;
+  }
+  if (prev.slide.isDirty !== next.slide.isDirty) {
+    return false;
+  }
+  if (prev.slide.hidden !== next.slide.hidden) {
+    return false;
+  }
+  if (prev.slide.elements !== next.slide.elements) {
+    return false;
+  }
+  if (prev.index !== next.index) {
+    return false;
+  }
+  if (prev.isActive !== next.isActive) {
+    return false;
+  }
+  if (prev.isDragTarget !== next.isDragTarget) {
+    return false;
+  }
+  if (prev.isSelected !== next.isSelected) {
+    return false;
+  }
+  if (prev.selectedCount !== next.selectedCount) {
+    return false;
+  }
+  if (prev.selectionOrder !== next.selectionOrder) {
+    return false;
+  }
+  if (prev.canEdit !== next.canEdit) {
+    return false;
+  }
+  if (prev.canvasSize.width !== next.canvasSize.width || prev.canvasSize.height !== next.canvasSize.height) {
+    return false;
+  }
+  if (prev.onSlideClick !== next.onSlideClick || prev.onDoubleClick !== next.onDoubleClick || prev.onContextMenu !== next.onContextMenu || prev.onDragStart !== next.onDragStart || prev.onDragOver !== next.onDragOver || prev.onDragLeave !== next.onDragLeave || prev.onDrop !== next.onDrop) {
+    return false;
+  }
+  return true;
+}
+var SlideCard = React10__default.memo(SlideCardImpl, arePropsEqual3);
 function SorterContextMenu({
   x: x2,
   y,
@@ -94400,6 +94507,14 @@ function getCurrentParagraphIndex(editorEl, segments) {
   }
   return paraIdx;
 }
+var CSS_VALUE_SAFE = /^[a-zA-Z0-9 _,.\-+#'%/]{1,100}$/;
+function isCssValueSafe(value) {
+  if (value === void 0 || value === null) {
+    return false;
+  }
+  const str = String(value);
+  return str.length > 0 && CSS_VALUE_SAFE.test(str);
+}
 function deriveStyleFromElement(element2, inheritedStyle) {
   const style = { ...inheritedStyle };
   const tagName = element2.tagName.toLowerCase();
@@ -94532,17 +94647,17 @@ function segmentsToEditorHtml(segments) {
       if (segment.style.strikethrough) {
         inlineStyles.push("text-decoration:line-through");
       }
-      if (segment.style.color) {
+      if (segment.style.color && isCssValueSafe(segment.style.color)) {
         inlineStyles.push(`color:${segment.style.color}`);
       }
-      if (segment.style.fontSize) {
-        inlineStyles.push(`font-size:${segment.style.fontSize}pt`);
+      if (segment.style.fontSize && Number.isFinite(Number(segment.style.fontSize))) {
+        inlineStyles.push(`font-size:${Number(segment.style.fontSize)}pt`);
       }
-      if (segment.style.fontFamily) {
+      if (segment.style.fontFamily && isCssValueSafe(segment.style.fontFamily)) {
         inlineStyles.push(`font-family:${segment.style.fontFamily}`);
       }
       const text2 = escapeHtml(segment.text);
-      if (segment.style.hyperlink) {
+      if (segment.style.hyperlink && isUrlSafe(segment.style.hyperlink)) {
         const href = escapeHtml(segment.style.hyperlink);
         return `<a href="${href}" style="color:#4a9eff;text-decoration:underline;cursor:pointer" data-hyperlink="${href}">${text2}</a>`;
       }
@@ -94625,7 +94740,8 @@ function renderRichNotesSegments(segments) {
       if (segment.style.fontFamily) {
         style.fontFamily = segment.style.fontFamily;
       }
-      if (segment.style.hyperlink) {
+      if (segment.style.hyperlink && isUrlSafe(segment.style.hyperlink)) {
+        const safeHref = segment.style.hyperlink;
         style.color = "#4a9eff";
         style.textDecoration = "underline";
         style.cursor = "pointer";
@@ -94633,11 +94749,11 @@ function renderRichNotesSegments(segments) {
           /* @__PURE__ */ jsx(
             "a",
             {
-              href: segment.style.hyperlink,
+              href: safeHref,
               style,
               onClick: (e2) => {
                 e2.preventDefault();
-                window.open(segment.style.hyperlink, "_blank");
+                safeOpenUrl(safeHref);
               },
               children: segment.text
             },
@@ -95189,7 +95305,7 @@ function useSlideNotes({
     const href = target.getAttribute("data-hyperlink") || target.getAttribute("href");
     if (href && (e2.ctrlKey || e2.metaKey)) {
       e2.preventDefault();
-      window.open(href, "_blank");
+      safeOpenUrl(href);
     }
   }, []);
   return {
@@ -96862,7 +96978,7 @@ function renderNotesSegments(segments) {
     return React10__default.createElement("span", { key: `seg-${index}`, style }, segment.text);
   });
 }
-function ScaledSlidePreview({
+function ScaledSlidePreviewImpl({
   slide,
   templateElements,
   canvasSize,
@@ -97009,6 +97125,40 @@ function ScaledSlidePreview({
     }
   );
 }
+function arePropsEqual4(prev, next) {
+  if (prev.slide.id !== next.slide.id) {
+    return false;
+  }
+  if (prev.slide.isDirty !== next.slide.isDirty) {
+    return false;
+  }
+  if (prev.slide.hidden !== next.slide.hidden) {
+    return false;
+  }
+  if (prev.slide.elements !== next.slide.elements) {
+    return false;
+  }
+  if (prev.slide.backgroundColor !== next.slide.backgroundColor) {
+    return false;
+  }
+  if (prev.slide.backgroundImage !== next.slide.backgroundImage) {
+    return false;
+  }
+  if (prev.slide.backgroundGradient !== next.slide.backgroundGradient) {
+    return false;
+  }
+  if (prev.templateElements !== next.templateElements) {
+    return false;
+  }
+  if (prev.canvasSize.width !== next.canvasSize.width || prev.canvasSize.height !== next.canvasSize.height) {
+    return false;
+  }
+  if (prev.className !== next.className) {
+    return false;
+  }
+  return true;
+}
+var ScaledSlidePreview = React10__default.memo(ScaledSlidePreviewImpl, arePropsEqual4);
 function PresenterView({
   slides,
   currentSlideIndex,
@@ -111312,6 +111462,13 @@ function convertOmmlToLatex(omml) {
   }
   return ommlChildrenToLatex(oMath);
 }
+function sanitizeMathMl2(markup) {
+  const purify = DOMPurify;
+  if (typeof purify.sanitize !== "function") {
+    return markup;
+  }
+  return purify.sanitize(markup, { USE_PROFILES: { mathMl: true, svg: true } });
+}
 var TEMPLATES = [
   {
     label: "Fraction",
@@ -111377,7 +111534,8 @@ var TEMPLATES = [
 var TEMPLATE_MATHML = TEMPLATES.map((tmpl) => {
   try {
     const tmplOmml = convertLatexToOmml(tmpl.latex);
-    return convertOmmlToMathMl(tmplOmml);
+    const raw = convertOmmlToMathMl(tmplOmml);
+    return raw ? sanitizeMathMl2(raw) : "";
   } catch {
     return "";
   }
@@ -111389,7 +111547,7 @@ function MathMlPreview({ mathml }) {
       return;
     }
     if (mathml) {
-      containerRef.current.innerHTML = mathml;
+      containerRef.current.innerHTML = sanitizeMathMl2(mathml);
     } else {
       containerRef.current.innerHTML = "";
     }
@@ -111417,6 +111575,7 @@ function EquationEditorDialog({
     return convertOmmlToLatex(existingOmml);
   }, [existingOmml]);
   const [latex, setLatex] = useState(initialLatex);
+  const deferredLatex = useDeferredValue(latex);
   const textareaRef = useRef(null);
   useEffect(() => {
     if (isOpen) {
@@ -111425,17 +111584,17 @@ function EquationEditorDialog({
     }
   }, [isOpen, initialLatex]);
   const { mathml, omml } = useMemo(() => {
-    if (!latex.trim()) {
+    if (!deferredLatex.trim()) {
       return { mathml: "", omml: {} };
     }
     try {
-      const ommlObj = convertLatexToOmml(latex);
+      const ommlObj = convertLatexToOmml(deferredLatex);
       const mathmlStr = convertOmmlToMathMl(ommlObj);
       return { mathml: mathmlStr, omml: ommlObj };
     } catch {
       return { mathml: "", omml: {} };
     }
-  }, [latex]);
+  }, [deferredLatex]);
   const handleInsert = useCallback(() => {
     if (!latex.trim()) {
       return;
@@ -114170,6 +114329,7 @@ function useEditorHistory(input) {
   const historyFutureRef = useRef([]);
   const lastHistorySnapshotRef = useRef(null);
   const lastHistorySerializedRef = useRef("");
+  const lastCheapHashRef = useRef("");
   const isApplyingHistoryRef = useRef(false);
   const unlockHistoryTimerRef = useRef(null);
   const [canUndo, setCanUndo] = useState(false);
@@ -114311,15 +114471,21 @@ function useEditorHistory(input) {
     if (hasActivePointerInteraction()) {
       return;
     }
+    const cheapHash = `${slides.length}|${activeSlideIndex}|${canvasSize.width}x${canvasSize.height}|${slides.map((s) => `${s.id}:${s.elements.length}`).join("/")}`;
+    if (cheapHash === lastCheapHashRef.current) {
+      return;
+    }
     const snapshot2 = buildHistorySnapshot();
     const serialized = JSON.stringify(snapshot2);
     if (serialized === lastHistorySerializedRef.current) {
+      lastCheapHashRef.current = cheapHash;
       return;
     }
     const previousSnapshot = lastHistorySnapshotRef.current;
     if (!previousSnapshot) {
       lastHistorySnapshotRef.current = cloneHistorySnapshot(snapshot2);
       lastHistorySerializedRef.current = serialized;
+      lastCheapHashRef.current = cheapHash;
       updateHistoryAvailability();
       return;
     }
@@ -114330,13 +114496,18 @@ function useEditorHistory(input) {
     historyFutureRef.current = [];
     lastHistorySnapshotRef.current = cloneHistorySnapshot(snapshot2);
     lastHistorySerializedRef.current = serialized;
+    lastCheapHashRef.current = cheapHash;
     updateHistoryAvailability();
   }, [
+    activeSlideIndex,
     buildHistorySnapshot,
+    canvasSize.height,
+    canvasSize.width,
     error2,
     hasActivePointerInteraction,
     loading2,
     pointerCommitNonce,
+    slides,
     updateHistoryAvailability
   ]);
   return {
@@ -118048,7 +118219,8 @@ async function storeAudienceContent(content) {
     const tx = db.transaction(STORE_NAME2, "readwrite");
     const store = tx.objectStore(STORE_NAME2);
     const bytes = content instanceof Uint8Array ? content : new Uint8Array(content);
-    store.put(bytes, CONTENT_KEY);
+    const record = { bytes, createdAt: Date.now() };
+    store.put(record, CONTENT_KEY);
     tx.oncomplete = () => {
       db.close();
       resolve2();
@@ -118081,14 +118253,34 @@ async function clearAudienceContent() {
 var PRESENTER_CHANNEL_NAME = "pptx-viewer-presenter";
 var AUDIENCE_HASH = "#pptx-audience";
 var PRESENTER_MSG_ORIGIN = "pptx-viewer-presenter";
+var AUDIENCE_NONCE_KEY = "nonce";
+function generateSessionId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `s${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+}
+function parseAudienceNonce() {
+  const hash = window.location.hash;
+  if (!hash.startsWith(AUDIENCE_HASH)) {
+    return null;
+  }
+  const trailing = hash.slice(AUDIENCE_HASH.length);
+  if (!trailing) {
+    return null;
+  }
+  const params2 = new URLSearchParams(trailing.replace(/^[&;?]/, ""));
+  return params2.get(AUDIENCE_NONCE_KEY);
+}
 function isAudienceTab() {
-  return window.location.hash === AUDIENCE_HASH;
+  return window.location.hash.startsWith(AUDIENCE_HASH);
 }
 function usePresenterWindow(input) {
   const { currentSlideIndex, isPresenterMode, content } = input;
   const audienceWindowRef = useRef(null);
   const channelRef = useRef(null);
   const pollTimerRef = useRef(null);
+  const sessionIdRef = useRef("");
   const getChannel2 = useCallback(() => {
     if (!channelRef.current) {
       channelRef.current = new BroadcastChannel(PRESENTER_CHANNEL_NAME);
@@ -118100,10 +118292,14 @@ function usePresenterWindow(input) {
   }, []);
   const syncSlideToAudience = useCallback(
     (slideIndex) => {
+      if (!sessionIdRef.current) {
+        return;
+      }
       const msg = {
         origin: PRESENTER_MSG_ORIGIN,
         type: "presenter-slide-change",
-        slideIndex
+        slideIndex,
+        sessionId: sessionIdRef.current
       };
       try {
         getChannel2().postMessage(msg);
@@ -118113,13 +118309,16 @@ function usePresenterWindow(input) {
     [getChannel2]
   );
   const closeAudienceWindow = useCallback(() => {
-    try {
-      const exitMsg = {
-        origin: PRESENTER_MSG_ORIGIN,
-        type: "presenter-exit"
-      };
-      getChannel2().postMessage(exitMsg);
-    } catch {
+    if (sessionIdRef.current) {
+      try {
+        const exitMsg = {
+          origin: PRESENTER_MSG_ORIGIN,
+          type: "presenter-exit",
+          sessionId: sessionIdRef.current
+        };
+        getChannel2().postMessage(exitMsg);
+      } catch {
+      }
     }
     const win = audienceWindowRef.current;
     if (win && !win.closed) {
@@ -118129,6 +118328,7 @@ function usePresenterWindow(input) {
       }
     }
     audienceWindowRef.current = null;
+    sessionIdRef.current = "";
     if (pollTimerRef.current !== null) {
       clearInterval(pollTimerRef.current);
       pollTimerRef.current = null;
@@ -118139,20 +118339,53 @@ function usePresenterWindow(input) {
     if (isAudienceWindowOpen()) {
       closeAudienceWindow();
     }
-    if (content) {
-      void storeAudienceContent(content);
-    }
-    const url = new URL(window.location.href);
-    url.hash = AUDIENCE_HASH;
-    const win = window.open(url.toString(), "_blank");
-    if (!win) {
+    const blankWin = window.open("about:blank", "_blank");
+    if (!blankWin) {
       return false;
     }
-    audienceWindowRef.current = win;
+    audienceWindowRef.current = blankWin;
+    const sessionId = generateSessionId();
+    sessionIdRef.current = sessionId;
+    const audienceUrl = new URL(window.location.href);
+    const params2 = new URLSearchParams();
+    params2.set(AUDIENCE_NONCE_KEY, sessionId);
+    audienceUrl.hash = `${AUDIENCE_HASH}&${params2.toString()}`;
+    const navigateOrClose = (ok) => {
+      const win = audienceWindowRef.current;
+      if (!win || win.closed) {
+        return;
+      }
+      if (!ok) {
+        try {
+          win.close();
+        } catch {
+        }
+        audienceWindowRef.current = null;
+        sessionIdRef.current = "";
+        return;
+      }
+      try {
+        win.location.replace(audienceUrl.toString());
+      } catch {
+        try {
+          win.close();
+        } catch {
+        }
+        audienceWindowRef.current = null;
+        sessionIdRef.current = "";
+      }
+    };
+    if (content) {
+      void storeAudienceContent(content).then(() => navigateOrClose(true)).catch(() => navigateOrClose(false));
+    } else {
+      navigateOrClose(true);
+    }
     window.setTimeout(() => syncSlideToAudience(currentSlideIndex), 1500);
     pollTimerRef.current = setInterval(() => {
-      if (win.closed) {
+      const win = audienceWindowRef.current;
+      if (!win || win.closed) {
         audienceWindowRef.current = null;
+        sessionIdRef.current = "";
         if (pollTimerRef.current !== null) {
           clearInterval(pollTimerRef.current);
           pollTimerRef.current = null;
@@ -118180,6 +118413,13 @@ function usePresenterWindow(input) {
       closeAudienceWindow();
     }
   }, [isPresenterMode, closeAudienceWindow]);
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      void clearAudienceContent();
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, []);
   return {
     openAudienceWindow,
     closeAudienceWindow,
@@ -118217,6 +118457,7 @@ function useAudienceMode(input) {
     if (!isAudienceTab()) {
       return;
     }
+    const expectedSessionId = parseAudienceNonce();
     let channel;
     try {
       channel = new BroadcastChannel(PRESENTER_CHANNEL_NAME);
@@ -118228,6 +118469,9 @@ function useAudienceMode(input) {
       if (!data || data.origin !== PRESENTER_MSG_ORIGIN) {
         return;
       }
+      if (expectedSessionId && data.sessionId !== expectedSessionId) {
+        return;
+      }
       if (data.type === "presenter-slide-change") {
         onSetActiveSlideIndex(data.slideIndex);
       }
@@ -119161,6 +119405,12 @@ function useTouchGestures(input) {
   callbacksRef.current = callbacks;
   const scaleRef = useRef(currentScale);
   scaleRef.current = currentScale;
+  const [targetVersion, setTargetVersion] = useState(0);
+  const lastTargetRef = useRef(null);
+  if (targetRef.current !== lastTargetRef.current) {
+    lastTargetRef.current = targetRef.current;
+    queueMicrotask(() => setTargetVersion((v) => v + 1));
+  }
   useEffect(() => {
     const el = targetRef.current;
     if (!el || !enabled) {
@@ -119249,7 +119499,7 @@ function useTouchGestures(input) {
       el.removeEventListener("touchcancel", handleTouchCancel);
       cancelLongPress();
     };
-  }, [targetRef, enabled]);
+  }, [targetRef, enabled, targetVersion]);
 }
 
 // src/viewer/utils/dom-helpers.ts
@@ -119270,11 +119520,31 @@ function safeConfirm(message) {
     return false;
   }
 }
+function sanitizeDownloadFilename(input) {
+  if (typeof input !== "string" || input.trim().length === 0) {
+    return "presentation.pptx";
+  }
+  let cleaned = input.replace(/[\x00-\x1f\x7f"\\/:*?<>|]/g, "_").replace(/\.\./g, "__").replace(/^\.+/, "").trim();
+  if (cleaned.length === 0) {
+    return "presentation.pptx";
+  }
+  if (cleaned.length > 200) {
+    const dot = cleaned.lastIndexOf(".");
+    if (dot > 0 && cleaned.length - dot <= 16) {
+      const ext = cleaned.slice(dot);
+      cleaned = cleaned.slice(0, 200 - ext.length) + ext;
+    } else {
+      cleaned = cleaned.slice(0, 200);
+    }
+  }
+  return cleaned;
+}
 function downloadBlob(blob, filename) {
+  const safeName = sanitizeDownloadFilename(filename);
   const url = URL.createObjectURL(blob);
   const a2 = document.createElement("a");
   a2.href = url;
-  a2.download = filename;
+  a2.download = safeName;
   document.body.appendChild(a2);
   a2.click();
   setTimeout(() => {
@@ -119705,27 +119975,82 @@ function openAutosaveDb2() {
     req.onerror = () => reject(req.error);
   });
 }
-async function saveToIndexedDb(filePath, data) {
+async function deleteOldestAutosaveEntry() {
   const db = await openAutosaveDb2();
-  return new Promise((resolve2, reject) => {
-    const tx = db.transaction(STORE_NAME3, "readwrite");
-    const store = tx.objectStore(STORE_NAME3);
-    store.put({
-      key: filePath,
-      data,
-      timestamp: Date.now(),
-      size: data.byteLength
-    });
-    tx.oncomplete = () => {
-      db.close();
-      resolve2(true);
-    };
-    tx.onerror = () => {
-      db.close();
-      reject(tx.error);
-    };
+  return new Promise((resolve2) => {
+    try {
+      const tx = db.transaction(STORE_NAME3, "readwrite");
+      const store = tx.objectStore(STORE_NAME3);
+      let oldestKey = null;
+      let oldestTimestamp = Infinity;
+      const cursorReq = store.openCursor();
+      cursorReq.onsuccess = () => {
+        const cursor = cursorReq.result;
+        if (cursor) {
+          const value = cursor.value;
+          if (typeof value.timestamp === "number" && value.timestamp < oldestTimestamp) {
+            oldestTimestamp = value.timestamp;
+            oldestKey = cursor.primaryKey;
+          }
+          cursor.continue();
+        } else if (oldestKey !== null) {
+          store.delete(oldestKey);
+        }
+      };
+      tx.oncomplete = () => {
+        db.close();
+        resolve2(oldestKey !== null);
+      };
+      tx.onerror = () => {
+        db.close();
+        resolve2(false);
+      };
+    } catch {
+      try {
+        db.close();
+      } catch {
+      }
+      resolve2(false);
+    }
   });
 }
+function putAutosaveRecord(filePath, data) {
+  return openAutosaveDb2().then(
+    (db) => new Promise((resolve2, reject) => {
+      const tx = db.transaction(STORE_NAME3, "readwrite");
+      const store = tx.objectStore(STORE_NAME3);
+      store.put({
+        key: filePath,
+        data,
+        timestamp: Date.now(),
+        size: data.byteLength
+      });
+      tx.oncomplete = () => {
+        db.close();
+        resolve2(true);
+      };
+      tx.onerror = () => {
+        db.close();
+        reject(tx.error);
+      };
+    })
+  );
+}
+async function saveToIndexedDb(filePath, data) {
+  try {
+    return await putAutosaveRecord(filePath, data);
+  } catch (err) {
+    const errName = err instanceof Error || err instanceof DOMException ? err.name : "";
+    if (errName !== "QuotaExceededError") {
+      throw err;
+    }
+    const deleted = await deleteOldestAutosaveEntry();
+    if (!deleted) {
+      throw err;
+    }
+    return putAutosaveRecord(filePath, data);
+  }
+}
 function useAutosave(input) {
   const {
     isDirty,
@@ -119842,6 +120167,25 @@ function collectReferencedFontFamilies(slides) {
   }
   return families;
 }
+var FONT_NAME_UNSAFE_CHARS = /["\\\n\r;}<>]/;
+var FONT_FORMAT_ALLOWED = /* @__PURE__ */ new Set([
+  "truetype",
+  "opentype",
+  "woff",
+  "woff2",
+  "svg",
+  "embedded-opentype"
+]);
+var FONT_DATA_URL_PATTERN = /^data:font\/[a-z0-9+.-]+(?:;charset=[a-z0-9-]+)?;base64,[A-Za-z0-9+/=]+$/i;
+function isFontDataUrlSafe(url) {
+  if (typeof url !== "string" || url.length === 0) {
+    return false;
+  }
+  if (url.startsWith("blob:")) {
+    return true;
+  }
+  return FONT_DATA_URL_PATTERN.test(url);
+}
 function useFontInjection({ embeddedFonts, slides }) {
   useEffect(() => {
     if (!embeddedFonts.length) {
@@ -119849,17 +120193,28 @@ function useFontInjection({ embeddedFonts, slides }) {
     }
     const styleEl = document.createElement("style");
     styleEl.id = EMBEDDED_FONTS_STYLE_ID;
-    const cssRules = embeddedFonts.map((font) => {
+    const cssRules = embeddedFonts.flatMap((font) => {
+      if (typeof font.name !== "string" || font.name.length === 0 || FONT_NAME_UNSAFE_CHARS.test(font.name)) {
+        return [];
+      }
+      if (!isFontDataUrlSafe(font.dataUrl)) {
+        return [];
+      }
+      const fontFormat = font.format ?? "truetype";
+      if (!FONT_FORMAT_ALLOWED.has(fontFormat)) {
+        return [];
+      }
       const fontWeight = font.bold ? "700" : "400";
       const fontStyleCss = font.italic ? "italic" : "normal";
-      const fontFormat = font.format ?? "truetype";
-      return `@font-face {
+      return [
+        `@font-face {
 	font-family: "${font.name}";
 	src: url("${font.dataUrl}") format("${fontFormat}");
 	font-weight: ${fontWeight};
 	font-style: ${fontStyleCss};
 	font-display: swap;
-}`;
+}`
+      ];
     }).join("\n");
     styleEl.textContent = cssRules;
     document.head.appendChild(styleEl);
@@ -119888,7 +120243,7 @@ function useFontInjection({ embeddedFonts, slides }) {
     const linkEl = document.createElement("link");
     linkEl.id = GOOGLE_FONTS_LINK_ID;
     linkEl.rel = "stylesheet";
-    linkEl.href = `https://fonts.googleapis.com/css2?${googleFamilies.map((f) => `family=${GOOGLE_FONTS_AVAILABLE[f]}`).join("&")}&display=swap`;
+    linkEl.href = `https://fonts.googleapis.com/css2?${googleFamilies.map((f) => `family=${encodeURIComponent(GOOGLE_FONTS_AVAILABLE[f])}`).join("&")}&display=swap`;
     document.head.appendChild(linkEl);
     return () => {
       const existing = document.getElementById(GOOGLE_FONTS_LINK_ID);
@@ -119904,13 +120259,18 @@ function useFontInjection({ embeddedFonts, slides }) {
     }
     const styleEl = document.createElement("style");
     styleEl.id = SYMBOL_FONTS_STYLE_ID;
-    const rules = neededSymbolFonts.map(
-      (font) => `@font-face {
+    const rules = neededSymbolFonts.flatMap((font) => {
+      if (typeof font !== "string" || FONT_NAME_UNSAFE_CHARS.test(font)) {
+        return [];
+      }
+      return [
+        `@font-face {
 	font-family: "${font}";
 	src: local("${font}"), local("${font} Regular");
 	font-display: swap;
 }`
-    ).join("\n");
+      ];
+    }).join("\n");
     styleEl.textContent = rules;
     document.head.appendChild(styleEl);
     return () => {
@@ -120053,16 +120413,17 @@ function useLoadContent({
             `[pptx] Large file detected (${fileSizeMB.toFixed(1)} MB). Loading may use significant memory.`
           );
         }
-        if (handlerRef.current) {
-          handlerRef.current.dispose();
-          handlerRef.current = null;
-        }
+        const previousHandler = handlerRef.current;
         const handler = new PptxHandler();
         const parsed = await handler.load(buffer);
         if (cancelled || token !== renderTokenRef.current) {
           handler.dispose();
           return;
         }
+        if (previousHandler) {
+          previousHandler.dispose();
+        }
+        handlerRef.current = null;
         const mediaElements = [];
         for (const slide of parsed.slides) {
           collectMediaElements(slide.elements, mediaElements);
@@ -120107,6 +120468,7 @@ function useLoadContent({
           })
         );
         const { paths: imagePaths, refs: imageRefs } = collectImagePaths(parsed.slides);
+        let nextSlides = parsed.slides;
         if (imagePaths.size > 0) {
           const resolvedMap = /* @__PURE__ */ new Map();
           await Promise.all(
@@ -120120,15 +120482,47 @@ function useLoadContent({
               }
             })
           );
+          const elementPatches = /* @__PURE__ */ new Map();
           for (const ref of imageRefs) {
             const url = resolvedMap.get(ref.path);
-            if (url) {
-              ref.element[ref.field] = url;
+            if (!url) {
+              continue;
             }
+            const id2 = ref.element.id;
+            const existing = elementPatches.get(id2) ?? {};
+            existing[ref.field] = url;
+            elementPatches.set(id2, existing);
+          }
+          if (elementPatches.size > 0) {
+            const patchElements = (elements) => {
+              let mutated = false;
+              const next = elements.map((el) => {
+                let updated = el;
+                const patch = elementPatches.get(el.id);
+                if (patch) {
+                  updated = { ...el, ...patch };
+                }
+                if (updated.type === "group" && updated.children?.length) {
+                  const newChildren = patchElements(updated.children);
+                  if (newChildren !== updated.children) {
+                    updated = { ...updated, children: newChildren };
+                  }
+                }
+                if (updated !== el) {
+                  mutated = true;
+                }
+                return updated;
+              });
+              return mutated ? next : elements;
+            };
+            nextSlides = parsed.slides.map((s) => {
+              const newElements = patchElements(s.elements);
+              return newElements === s.elements ? s : { ...s, elements: newElements };
+            });
           }
         }
         handlerRef.current = handler;
-        setSlides(parsed.slides);
+        setSlides(nextSlides);
         setTemplateElementsBySlideId({});
         setCanvasSize({
           width: parsed.width ?? DEFAULT_CANVAS_WIDTH,
@@ -121302,7 +121696,19 @@ function injectFontFaces(svg, fontFaces) {
   if (!fontFaces.length) {
     return svg;
   }
-  const styleBlock = `<style type="text/css">${fontFaces.map((f) => f.css).join("\n")}</style>`;
+  const safeFontFaces = fontFaces.filter((f) => {
+    if (f.css.toLowerCase().includes("</style")) {
+      console.warn(
+        `[export-svg] Dropping @font-face entry for "${f.family}" containing "</style" \u2014 would break out of the <style> block.`
+      );
+      return false;
+    }
+    return true;
+  });
+  if (!safeFontFaces.length) {
+    return svg;
+  }
+  const styleBlock = `<style type="text/css">${safeFontFaces.map((f) => f.css).join("\n")}</style>`;
   if (svg.includes("<defs>")) {
     return svg.replace("<defs>", `<defs>${styleBlock}`);
   }
@@ -121628,7 +122034,7 @@ function useExportHandlers(input) {
     activeSlideIndexForGuides,
     modalControls
   });
-  const handleExportPng = async () => {
+  const handleExportPng = useCallback(async () => {
     const stageEl = canvasStageRef.current;
     if (!stageEl) {
       return;
@@ -121640,8 +122046,8 @@ function useExportHandlers(input) {
     } catch (err) {
       console.error("[PowerPointViewer] PNG export failed:", err);
     }
-  };
-  const handleExportPdf = async () => {
+  }, [canvasStageRef, activeSlideIndex, activeSlide?.backgroundColor]);
+  const handleExportPdf = useCallback(async () => {
     if (!canvasStageRef.current) {
       return;
     }
@@ -121682,8 +122088,8 @@ function useExportHandlers(input) {
       exportAbortRef.current = null;
       setExportModalOpen(false);
     }
-  };
-  const handleExportNotesPdf = async () => {
+  }, [canvasStageRef, slides.length, setActiveSlideIndex, activeSlideIndex]);
+  const handleExportNotesPdf = useCallback(async () => {
     if (!canvasStageRef.current) {
       return;
     }
@@ -121726,8 +122132,8 @@ function useExportHandlers(input) {
       exportAbortRef.current = null;
       setExportModalOpen(false);
     }
-  };
-  const handleCopySlideAsImage = async () => {
+  }, [canvasStageRef, slides, setActiveSlideIndex, activeSlideIndex]);
+  const handleCopySlideAsImage = useCallback(async () => {
     const stageEl = canvasStageRef.current;
     if (!stageEl) {
       return;
@@ -121739,8 +122145,8 @@ function useExportHandlers(input) {
     } catch (err) {
       console.error("[PowerPointViewer] Copy slide as image failed:", err);
     }
-  };
-  const handleExportVideo = async () => {
+  }, [canvasStageRef, activeSlide?.backgroundColor]);
+  const handleExportVideo = useCallback(async () => {
     if (!canvasStageRef.current) {
       return;
     }
@@ -121782,8 +122188,8 @@ function useExportHandlers(input) {
       exportAbortRef.current = null;
       setExportModalOpen(false);
     }
-  };
-  const handleExportGif = async () => {
+  }, [canvasStageRef, slides.length, setActiveSlideIndex, activeSlideIndex]);
+  const handleExportGif = useCallback(async () => {
     if (!canvasStageRef.current) {
       return;
     }
@@ -121821,7 +122227,7 @@ function useExportHandlers(input) {
       exportAbortRef.current = null;
       setExportModalOpen(false);
     }
-  };
+  }, [canvasStageRef, slides.length, setActiveSlideIndex, activeSlideIndex]);
   const handleCancelExport = useCallback(() => {
     exportAbortRef.current?.abort();
     exportAbortRef.current = null;
@@ -121847,6 +122253,15 @@ function useExportHandlers(input) {
     exportStatusMessage
   };
 }
+function escapeHtmlAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function safeDataImageSrc(src) {
+  if (typeof src !== "string" || !src.startsWith("data:image/")) {
+    return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=";
+  }
+  return escapeHtmlAttr(src);
+}
 function openPrintWindow(title, bodyHtml, orientation, colorFilter, frameSlides) {
   const printWindow = window.open("", "_blank", "noopener,noreferrer");
   if (!printWindow) {
@@ -122029,7 +122444,7 @@ function usePrintHandlers(input) {
       const slideImages = slideIndices.map((idx) => allImages[idx]).filter(Boolean);
       if (settings.printWhat === "slides") {
         const bodyHtml = slideImages.map(
-          (img, i3) => `<section class="page slide-page"><img class="slide-img" src="${img}" alt="Slide ${slideIndices[i3] + 1}" /></section>`
+          (img, i3) => `<section class="page slide-page"><img class="slide-img" src="${safeDataImageSrc(img)}" alt="Slide ${slideIndices[i3] + 1}" /></section>`
         ).join("");
         openPrintWindow(
           "Slides",
@@ -122045,7 +122460,7 @@ function usePrintHandlers(input) {
           const idx = slideIndices[i3];
           const notes = slides[idx]?.notes?.trim() || "";
           return `<section class="page notes-page">
-  <img class="notes-slide" src="${img}" alt="Slide ${idx + 1}" />
+  <img class="notes-slide" src="${safeDataImageSrc(img)}" alt="Slide ${idx + 1}" />
   <div class="notes-text">${escapeHtml2(notes)}</div>
 </section>`;
         }).join("");
@@ -122077,14 +122492,14 @@ function usePrintHandlers(input) {
           if (isThreePerPage) {
             const rows = Array.from({ length: spp }, (_, cellIndex) => {
               const img = pageImgs[cellIndex];
-              const slideCell = img ? `<div class="handout-cell"><img src="${img}" alt="Slide ${slideIndices[i3 + cellIndex] + 1}" /></div>` : `<div class="handout-cell"></div>`;
+              const slideCell = img ? `<div class="handout-cell"><img src="${safeDataImageSrc(img)}" alt="Slide ${slideIndices[i3 + cellIndex] + 1}" /></div>` : `<div class="handout-cell"></div>`;
               return `<div class="handout-row-3">${slideCell}${buildNoteLines()}</div>`;
             }).join("");
             pages.push(`<section class="page"><div class="handout-grid-3">${rows}</div></section>`);
           } else {
             const cells = Array.from({ length: spp }, (_, cellIndex) => {
               const img = pageImgs[cellIndex];
-              return img ? `<div class="handout-cell"><img src="${img}" alt="Slide ${slideIndices[i3 + cellIndex] + 1}" /></div>` : `<div class="handout-cell"></div>`;
+              return img ? `<div class="handout-cell"><img src="${safeDataImageSrc(img)}" alt="Slide ${slideIndices[i3 + cellIndex] + 1}" /></div>` : `<div class="handout-cell"></div>`;
             }).join("");
             pages.push(
               `<section class="page"><div class="handout-grid" style="grid-template-columns: repeat(${grid.columns}, minmax(0, 1fr)); grid-template-rows: repeat(${grid.rows}, minmax(0, 1fr));">${cells}</div></section>`