pptx-vanilla-viewer 0.12.0 → 0.14.0

package/dist/styles.css

@@ -38,7 +38,7 @@
 .pptxv:focus { outline: none; }
 .pptxv:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -2px; }
 .pptxv :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pptx-ring) !important; outline-offset: 2px; }
-.pptxv :is(button, [role='button']) { min-width: 24px; min-height: 24px; touch-action: manipulation; }
+.pptxv :is(button, [role='button']):not([role='switch']):not([data-pptx-compact]) { min-width: 24px; min-height: 24px; touch-action: manipulation; }
 @media (prefers-reduced-motion: reduce) {
 	.pptxv *, .pptxv *::before, .pptxv *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
 }
@@ -157,6 +157,12 @@
 	flex-direction: column;
 	gap: 8px;
 }
+/* Virtualized rail: block layout for the absolute-positioned window. :where()
+   keeps specificity at one class so the mobile and presenting display:none
+   rules below still win (a naked two-class rule, or the inline style this
+   replaces, would override them). */
+.pptxv-thumbs:where(.pptxv-thumbs-virtualized) { display: block; }
+.pptxv-thumbs[hidden] { display: none; }
 .pptxv-thumb {
 	display: flex;
 	align-items: flex-start;
@@ -519,21 +525,104 @@
 	font-size: 12px;
 }
 .pptxv-inspector[hidden] { display: none; }
-.pptxv-inspector-header {
+/* React-style tab strip: [Elements | Properties | Comments]. */
+.pptxv-inspector-tabs {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	gap: 2px;
+	padding: 6px 8px;
+	border-bottom: 1px solid var(--pptx-border);
+}
+.pptxv-inspector-tab {
+	padding: 4px 8px;
+	border: none;
+	border-radius: 4px;
+	background: var(--pptx-muted);
+	color: var(--pptx-muted-foreground);
+	font: inherit;
+	font-size: 11px;
+	cursor: pointer;
+}
+.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); }
+/* Elements tab: layer-order rows. */
+.pptxv-inspector-layer-list { display: flex; flex-direction: column; gap: 2px; }
+.pptxv-inspector-layer-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
 	width: 100%;
-	padding: 8px 12px;
+	padding: 4px 8px;
 	border: none;
-	border-bottom: 1px solid var(--pptx-border);
+	border-radius: 4px;
 	background: transparent;
-	color: var(--pptx-foreground);
+	color: inherit;
 	font: inherit;
-	font-weight: 600;
+	text-align: left;
+	cursor: pointer;
+}
+.pptxv-inspector-layer-row:hover { background: var(--pptx-muted); }
+.pptxv-inspector-layer-row.is-selected { background: color-mix(in srgb, var(--pptx-primary) 25%, transparent); color: var(--pptx-primary); }
+.pptxv-inspector-layer-num { min-width: 16px; color: var(--pptx-muted-foreground); text-align: right; }
+.pptxv-inspector-layer-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* No-selection Properties deck panel + Comments tab. */
+.pptxv-inspector-row-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
+.pptxv-inspector-deck[hidden] { display: none; }
+.pptxv-inspector-deck-btn {
+	width: 100%;
+	margin-top: 4px;
+	padding: 5px 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-muted);
+	color: inherit;
+	font: inherit;
+	font-size: 11px;
+	cursor: pointer;
+}
+.pptxv-inspector-deck-btn:hover { background: var(--pptx-accent); }
+.pptxv-inspector-deck-btn:disabled { opacity: 0.5; cursor: default; }
+.pptxv-inspector-deck-btn-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
+.pptxv-inspector-theme-select { width: 100%; margin-bottom: 6px; }
+.pptxv-inspector-override-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
+.pptxv-inspector-override-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 6px; }
+.pptxv-inspector-override-row .pptxv-inspector-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pptxv-inspector-override-swatch {
+	width: 14px;
+	height: 14px;
+	border: 1px solid var(--pptx-border);
+	border-radius: 3px;
+	flex-shrink: 0;
+}
+.pptxv-inspector-comment { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--pptx-border) 60%, transparent); }
+.pptxv-inspector-comment.is-resolved { opacity: 0.6; }
+.pptxv-inspector-comment-meta { font-size: 11px; font-weight: 600; }
+.pptxv-inspector-comment-text { margin: 2px 0 4px; }
+.pptxv-inspector-comment-actions { display: flex; gap: 6px; }
+.pptxv-inspector-comment-action {
+	padding: 2px 6px;
+	border: none;
+	border-radius: 4px;
+	background: var(--pptx-muted);
+	color: var(--pptx-muted-foreground);
+	font: inherit;
+	font-size: 10px;
 	cursor: pointer;
 }
-.pptxv-inspector-header:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
+.pptxv-inspector-comment-action:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
+.pptxv-inspector-comment-add[hidden] { display: none; }
+.pptxv-inspector-comment-input {
+	width: 100%;
+	margin-top: 6px;
+	padding: 6px 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-background);
+	color: var(--pptx-foreground);
+	font: inherit;
+	font-size: 12px;
+	resize: vertical;
+}
 .pptxv-inspector-body { padding: 10px 12px; }
 .pptxv-inspector-body[hidden] { display: none; }
 .pptxv-inspector-empty { color: var(--pptx-muted-foreground); margin: 0; }
@@ -718,12 +807,16 @@
 }
 
 /* ── Tab content + groups ────────────────────────────────────────────── */
+/* One horizontal row (React: flex flex-nowrap + overflow-x) instead of the
+ * old two-row wrap; each group is a column with its label below the buttons. */
 .pptxv-ribbon-tab-content {
 	display: flex;
-	flex-wrap: wrap;
-	align-items: flex-start;
+	flex-wrap: nowrap;
+	align-items: stretch;
 	gap: 2px;
-	padding: 6px 8px;
+	padding: 4px 8px;
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 .pptxv-ribbon-tab-content[hidden] { display: none; }
 /* Design tab theme galleries: .pptxv-btn is a fixed 28x28 icon-button
@@ -741,21 +834,33 @@
 }
 .pptxv-rgroup {
 	display: flex;
+	flex: none;
 	flex-direction: column;
 	align-items: center;
+	justify-content: space-between;
 	gap: 2px;
 	padding: 2px 8px;
-	border-right: 1px solid var(--pptx-border);
+	border-right: 1px solid color-mix(in srgb, var(--pptx-border) 40%, transparent);
 }
 .pptxv-rgroup:last-child { border-right: none; }
-.pptxv-rgroup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
+.pptxv-rgroup-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
+/* Sentence-case tiny muted label below each group (React: 9px, no uppercase). */
 .pptxv-rgroup-label {
 	font-size: 9px;
+	line-height: 1;
 	color: var(--pptx-muted-foreground);
-	text-transform: uppercase;
-	letter-spacing: 0.03em;
 }
 .pptxv-rgroup .pptxv-btn.is-active { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
+/* Labelled pill button (React's pill token): icon + text on a muted chip. */
+.pptxv-btn.pptxv-btn-pill {
+	width: auto;
+	gap: 6px;
+	padding: 0 10px;
+	background: var(--pptx-muted);
+	font-size: 12px;
+	white-space: nowrap;
+}
+.pptxv-btn-label { font-size: 12px; }
 
 /* ── Shape insert grid ───────────────────────────────────────────────── */
 .pptxv-shape-grid {
@@ -904,6 +1009,124 @@
 .pptxv-backstage nav button{display:flex;align-items:center;gap:12px;white-space:normal}.pptxv-backstage nav button>span:first-child{display:grid;width:17px;flex:none;place-items:center}
 
 
+/* ── Primary-row quick actions ──────────────────────────────────────────── */
+.pptxv-primary-sep { width: 1px; align-self: stretch; margin: 0 4px; background: color-mix(in srgb, var(--pptx-border) 40%, transparent); }
+/* React-style "Present" split button + its options dropdown. */
+.pptxv-present-split { position: relative; display: inline-flex; align-items: stretch; border-left: 1px solid var(--pptx-border); }
+.pptxv-present-main {
+	padding: 2px 8px;
+	border: none;
+	background: transparent;
+	color: var(--pptx-foreground);
+	font: inherit;
+	font-size: 12px;
+	cursor: pointer;
+}
+.pptxv-present-main:hover { background: var(--pptx-accent); }
+.pptxv-present-caret {
+	display: inline-flex;
+	align-items: center;
+	padding: 0 4px;
+	border: none;
+	border-left: 1px solid var(--pptx-border);
+	background: transparent;
+	color: var(--pptx-foreground);
+	cursor: pointer;
+}
+.pptxv-present-caret:hover, .pptxv-present-caret.is-active { background: var(--pptx-accent); }
+.pptxv-present-caret svg { width: 12px; height: 12px; }
+/* Right-aligned popover menus (Present options + "..." overflow). */
+.pptxv-primary-menu {
+	position: absolute;
+	top: calc(100% + 4px);
+	right: 0;
+	z-index: 40;
+	min-width: 190px;
+	max-height: 320px;
+	overflow-y: auto;
+	padding: 4px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-card);
+	color: var(--pptx-card-foreground);
+	box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
+}
+.pptxv-primary-menu[hidden] { display: none; }
+.pptxv-primary-menu-item {
+	display: block;
+	width: 100%;
+	padding: 6px 8px;
+	border: none;
+	border-radius: 4px;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-size: 12px;
+	text-align: left;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.pptxv-primary-menu-item:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
+.pptxv-primary-menu-sep { margin: 4px 0; border-top: 1px solid color-mix(in srgb, var(--pptx-border) 60%, transparent); }
+.pptxv-primary-menu-host { position: relative; display: inline-flex; }
+/* Custom-shows quick action ("+ Show"). */
+.pptxv-show-btn {
+	padding: 2px 8px;
+	border: none;
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-muted);
+	color: var(--pptx-foreground);
+	font: inherit;
+	font-size: 11px;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.pptxv-show-btn:hover { background: var(--pptx-accent); }
+/* ── Tab-row right-side actions ── */
+/* Right side of the tab row: Record + Share, matching React's TabRowActions. */
+.pptxv-tabrow-spacer { flex: 1; }
+.pptxv-tabrow-actions { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
+.pptxv-tabrow-record {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 3px 9px;
+	border: none;
+	border-radius: 3px;
+	background: transparent;
+	color: var(--pptx-muted-foreground);
+	font: inherit;
+	font-size: 11px;
+	font-weight: 500;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.pptxv-tabrow-record:hover { background: var(--pptx-accent); color: var(--pptx-foreground); }
+.pptxv-tabrow-record-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
+.pptxv-tabrow-share, .pptxv-tabrow-share.pptxv-btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	width: auto;
+	height: auto;
+	padding: 3px 10px;
+	border: none;
+	border-radius: 3px;
+	background: var(--pptx-primary);
+	color: var(--pptx-primary-foreground, #fff);
+	font: inherit;
+	font-size: 11px;
+	font-weight: 500;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.pptxv-tabrow-share:hover, .pptxv-tabrow-share.pptxv-btn:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--pptx-primary) 90%, #000);
+	color: var(--pptx-primary-foreground, #fff);
+}
+.pptxv-tabrow-share svg { width: 12px; height: 12px; }
+
+
 .pptxv-props-overlay { position:fixed; inset:0; z-index:210; display:grid; place-items:center; background:#0009; }
 .pptxv-props-scrim { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; }
 .pptxv-props-dialog { position:relative; width:min(680px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; border:1px solid var(--pptx-border); border-radius:10px; background:var(--pptx-card); color:var(--pptx-card-foreground); box-shadow:0 24px 80px #0008; }
@@ -1505,6 +1728,111 @@
 }
 
 
+/* ── Docked Animation panel ──────────────────────────────────────────── */
+.pptxv-inspector-animation {
+	display: grid;
+	gap: 6px;
+	flex: none;
+	padding: 8px 10px;
+	border-top: 1px solid var(--pptx-border);
+	max-height: 40%;
+	overflow-y: auto;
+	font-size: 11px;
+}
+.pptxv-inspector-animation[hidden] { display: none; }
+.pptxv-anim-header { display: flex; align-items: center; justify-content: space-between; }
+.pptxv-anim-preview-btn {
+	padding: 2px 6px;
+	border: none;
+	border-radius: var(--pptx-radius);
+	background: transparent;
+	color: var(--pptx-primary);
+	font-size: 10px;
+	cursor: pointer;
+}
+.pptxv-anim-preview-btn:hover { background: var(--pptx-accent); }
+.pptxv-anim-field { display: grid; gap: 2px; font-size: 11px; }
+.pptxv-anim-field > span { color: var(--pptx-muted-foreground); }
+.pptxv-anim-field :is(select, input) {
+	min-width: 0;
+	width: 100%;
+	padding: 3px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-muted);
+	color: var(--pptx-foreground);
+}
+.pptxv-anim-options { display: grid; gap: 6px; }
+.pptxv-anim-options[hidden] { display: none; }
+.pptxv-anim-direction { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.pptxv-anim-direction > span { flex-basis: 100%; }
+.pptxv-anim-direction-btn {
+	padding: 3px 6px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-muted);
+	color: var(--pptx-muted-foreground);
+	font-size: 10px;
+	cursor: pointer;
+}
+.pptxv-anim-direction-btn:hover:not(:disabled) { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
+.pptxv-anim-direction-btn.is-active {
+	border-color: var(--pptx-primary);
+	background: color-mix(in srgb, var(--pptx-primary) 20%, transparent);
+	color: var(--pptx-primary);
+}
+.pptxv-anim-timeline { display: grid; gap: 4px; }
+.pptxv-anim-timeline[hidden] { display: none; }
+.pptxv-anim-bar {
+	position: relative;
+	height: 22px;
+	overflow: hidden;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: color-mix(in srgb, var(--pptx-muted) 50%, transparent);
+}
+.pptxv-anim-bar-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
+.pptxv-anim-bar-seg.is-entrance { background: rgb(34 197 94 / 0.6); }
+.pptxv-anim-bar-seg.is-emphasis { background: rgb(234 179 8 / 0.6); }
+.pptxv-anim-bar-seg.is-exit { background: rgb(239 68 68 / 0.6); }
+.pptxv-anim-bar-seg.is-none { background: color-mix(in srgb, var(--pptx-muted-foreground) 40%, transparent); }
+.pptxv-anim-bar-seg.is-selected { outline: 1px solid var(--pptx-ring); }
+
+/* ── Comments tab: threads, replies, edit-in-place ───────────────────── */
+.pptxv-inspector-comment-badge {
+	margin-left: 6px;
+	padding: 1px 6px;
+	border-radius: 999px;
+	background: rgb(34 197 94 / 0.25);
+	color: rgb(34 197 94);
+	font-size: 9px;
+	font-weight: 500;
+}
+.pptxv-inspector-comment.is-reply {
+	border-bottom: none;
+	padding: 4px 0 4px 8px;
+	border-left: 2px solid color-mix(in srgb, var(--pptx-primary) 40%, transparent);
+}
+.pptxv-inspector-comment-replies { margin-top: 4px; display: grid; gap: 2px; }
+.pptxv-inspector-comment-replies-toggle {
+	margin-top: 4px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: var(--pptx-muted-foreground);
+	font-size: 10px;
+	text-align: left;
+	cursor: pointer;
+}
+.pptxv-inspector-comment-replies-toggle:hover { color: var(--pptx-foreground); }
+.pptxv-inspector-comment-edit,
+.pptxv-inspector-comment-reply-form { display: grid; gap: 4px; margin-top: 4px; }
+.pptxv-inspector-comment-reply-form {
+	padding-left: 8px;
+	border-left: 2px solid color-mix(in srgb, var(--pptx-primary) 40%, transparent);
+}
+
+
 .pptxv-account { display: flex; flex-direction: column; gap: 28px; max-width: 640px; margin-top: 24px; }
 .pptxv-account-section { padding: 20px; border: 1px solid var(--pptx-border); border-radius: 8px; background: var(--pptx-card); color: var(--pptx-card-foreground); }
 .pptxv-account-section h2 { margin: 0 0 14px; font-size: 14px; }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-vanilla-viewer",
-	"version": "0.12.0",
+	"version": "0.14.0",
 	"description": "Zero-framework PowerPoint viewer: render PPTX slides in the browser with plain DOM, no React/Vue/Angular required.",
 	"keywords": [
 		"javascript",
@@ -56,8 +56,10 @@
 	},
 	"dependencies": {
 		"dompurify": "^3.4.12",
+		"fast-xml-parser": "^5.10.1",
 		"html2canvas-pro": "^2.2.4",
 		"jspdf": "^4.2.1",
+		"jszip": "^3.10.1",
 		"lucide": "^1.25.0"
 	},
 	"devDependencies": {
@@ -71,10 +73,6 @@
 		"y-websocket": "^3.0.0",
 		"yjs": "^13.6.31"
 	},
-	"peerDependencies": {
-		"fast-xml-parser": "^5.10.1",
-		"jszip": "^3.10.1"
-	},
 	"optionalDependencies": {
 		"y-webrtc": "^10.3.0",
 		"y-websocket": "^3.0.0",