pptx-vanilla-viewer 3.38.0 → 3.40.0

package/dist/styles.css

@@ -146,6 +146,9 @@
 	 * and clips text). Mirrors the React theme.css rule. */
 	-webkit-text-size-adjust: none;
 	text-size-adjust: none;
+	/* Own stacking context: the slide, selection handles and every overlay inside stay
+	 * below whatever the host page stacks above the viewer (a drawer, a dialog). */
+	isolation: isolate;
 }
 .pptxv *, .pptxv *::before, .pptxv *::after { box-sizing: border-box; }
 .pptxv:focus { outline: none; }
@@ -1012,6 +1015,9 @@
 	border-bottom: 1px solid var(--pptx-border);
 }
 .pptxv-inspector-tab {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
 	padding: 4px 8px;
 	border: none;
 	border-radius: 4px;
@@ -1021,6 +1027,7 @@
 	font-size: 11px;
 	cursor: pointer;
 }
+.pptxv-inspector-tab svg { flex: none; width: 14px; height: 14px; }
 .pptxv-inspector-tab:hover { color: var(--pptx-foreground); background: var(--pptx-accent); }
 .pptxv-inspector-tab.is-active { background: var(--pptx-primary); color: var(--pptx-primary-foreground, #fff); }
 /* Below this width, matches isDensePanelCompact()/MOBILE_BREAKPOINT (768) in
@@ -2815,8 +2822,8 @@
 	.pptxv-mobile-toolbar-ai .pptxv-ai-toggle.is-active { color: var(--pptx-primary); background: transparent; }
 	.pptxv-mobile-share { min-width: 44px; background: var(--pptx-primary); color: var(--pptx-primary-foreground); }
 	.pptxv-mobile-actions { display: contents; }
-	.pptxv-mobile-actions > pptx-ui-mobile-bar { position: relative; z-index: 50; flex: none; }
-	.pptxv-mobile-sheet-host { position: absolute; z-index: 48; inset: 0 0 56px; display: flex; align-items: end; }
+	.pptxv-mobile-actions > pptx-ui-mobile-bar { position: relative; z-index: 70; flex: none; }
+	.pptxv-mobile-sheet-host { position: absolute; z-index: 69; inset: 0 0 56px; display: flex; align-items: end; }
 	.pptxv-mobile-sheet-host[hidden] { display: none; }
 	.pptxv-mobile-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(0 0 0 / 40%); }
 	.pptxv-mobile-sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-height: min(70dvh, 620px); border: 1px solid var(--pptx-border); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--pptx-background); box-shadow: 0 -12px 36px rgb(0 0 0 / 35%); transition: transform 150ms ease-out; }
@@ -2833,14 +2840,24 @@
 	.pptxv-mobile-comment-actions { display: flex; flex-wrap: wrap; gap: 6px; }
 	.pptxv-mobile-comment-actions button, .pptxv-mobile-comment-add button { min-height: 44px !important; padding: 6px 10px; border: 1px solid var(--pptx-border); border-radius: var(--pptx-radius); background: var(--pptx-muted); color: var(--pptx-foreground); }
 	.pptxv-mobile-comment-add { display: grid; gap: 6px; padding-top: 10px; }
-	.pptxv-mobile-slide-list button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; border: 1px solid var(--pptx-border); border-radius: 8px; background: var(--pptx-muted); color: inherit; text-align: left; }
+	.pptxv-mobile-slide-list button { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; border: 1px solid var(--pptx-border); border-radius: 8px; background: var(--pptx-muted); color: inherit; text-align: left; }
 	.pptxv-mobile-slide-list button.is-active { border-color: var(--pptx-primary); color: var(--pptx-primary); }
 	.pptxv-mobile-slide-num { min-width: 18px; color: var(--pptx-muted-foreground); font-size: 11px; text-align: right; }
 	.pptxv-mobile-slide-list button.is-active .pptxv-mobile-slide-num { color: var(--pptx-primary); }
 	/* The thumbnail is a scaled stage: it must clip and never stretch. */
-	.pptxv-mobile-slide-frame { display: block; flex: none; overflow: hidden; border: 1px solid var(--pptx-border); border-radius: 4px; background: #fff; }
+	.pptxv-mobile-slide-frame { position: relative; display: block; flex: none; overflow: hidden; border: 1px solid var(--pptx-border); border-radius: 4px; background: #fff; }
 	.pptxv-mobile-slide-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-	.pptxv-mobile-sheet .pptxv-inspector { display: flex; width: 100%; max-height: 55dvh; border: 0; }
+	/* Sheet children take the whole row: the body is a wrapping flex row, so a bare grid or
+	   column would shrink to its content (the half-width comment box) instead of filling it. */
+	.pptxv-mobile-sheet-body > :is(.pptxv-mobile-comment, .pptxv-mobile-comment-add, .pptxv-mobile-slide-list, pptx-ui-mobile-insert, .pptxv-inspector) { flex: 1 1 100%; min-width: 0; }
+	.pptxv-mobile-comment-add > button, .pptxv-mobile-comment-actions > button { flex: 1 1 0; }
+	.pptxv-mobile-comment-add > button { width: 100%; }
+	/* The Format sheet is one column. The inspector is a block on desktop (tab strip over the
+	   panes); a flex row here laid the strip and the properties side by side and clipped them. */
+	.pptxv-mobile-sheet .pptxv-inspector { display: block; width: 100%; max-height: 55dvh; overflow-x: hidden; border: 0; background: transparent; }
+	.pptxv-mobile-sheet .pptxv-inspector-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; padding: 0 0 8px; background: var(--pptx-background); }
+	.pptxv-mobile-sheet .pptxv-inspector-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+	.pptxv-mobile-sheet .pptxv-inspector-body, .pptxv-mobile-sheet .pptxv-inspector-section { min-width: 0; max-width: 100%; }
 	.pptxv.pptxv-presenting .pptxv-mobile-toolbar,
 	.pptxv.pptxv-presenting .pptxv-mobile-actions > pptx-ui-mobile-bar,
 	.pptxv.pptxv-presenting .pptxv-mobile-sheet-host { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-vanilla-viewer",
-	"version": "3.38.0",
+	"version": "3.40.0",
 	"description": "pptx-viewer for vanilla JS: a zero-framework PowerPoint viewer and editor to render, edit, present, and export PPTX slides with plain DOM, no React/Vue/Angular required.",
 	"keywords": [
 		"javascript",
@@ -107,8 +107,8 @@
 		"jspdf": "^4.2.1",
 		"jszip": "^3.10.2",
 		"lucide": "^1.54.0",
-		"ooxml-core": "^1.14.0",
-		"ooxml-ui": "^1.14.0",
+		"ooxml-core": "^1.16.0",
+		"ooxml-ui": "^1.16.0",
 		"opentype.js": "^2.0.0"
 	},
 	"devDependencies": {