pptx-vanilla-viewer 3.37.0 → 3.38.0

package/dist/styles.css

@@ -23,6 +23,112 @@
 	--pptx-radius: 0.5rem;
 }
 
+/* ── Inspector baseline for bare form markup ─────────────────────────── */
+.pptxv-inspector :where(input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='range']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset']):not([type='hidden']), textarea) {
+	box-sizing: border-box;
+	min-width: 0;
+	height: 26px;
+	margin: 0;
+	padding: 2px 6px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-background);
+	color: var(--pptx-foreground);
+	font: inherit;
+	font-size: 12px;
+}
+.pptxv-inspector :where(textarea) {
+	display: block;
+	width: 100%;
+	height: auto;
+	min-height: 52px;
+	resize: vertical;
+}
+.pptxv-inspector :where(input, textarea)::placeholder { color: var(--pptx-muted-foreground); opacity: 1; }
+.pptxv-inspector :where(input, textarea):disabled { opacity: 0.5; }
+.pptxv-inspector :where(input[type='color']) {
+	box-sizing: border-box;
+	flex: none;
+	width: 28px;
+	height: 20px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid var(--pptx-border);
+	border-radius: 4px;
+	background: none;
+	cursor: pointer;
+}
+.pptxv-inspector :where(fieldset) {
+	min-width: 0;
+	margin: 0 0 8px;
+	padding: 0;
+	border: 0;
+}
+.pptxv-inspector :where(legend) {
+	margin-bottom: 4px;
+	padding: 0;
+	color: var(--pptx-foreground);
+	font-size: 11px;
+	font-weight: 600;
+}
+
+/* One field per row: caption on the left, control on the right. A checkbox
+   or radio goes first and its caption follows it, as in PowerPoint's panes.
+   Only unclassed labels (and the chart helpers' field classes, which carry no
+   rule of their own) take part: a classed label such as `.pptxv-field` has its
+   own layout, and these flex declarations would otherwise leak into it. */
+.pptxv-inspector-section :where(label:not([class]), .pptxv-exhaustive-field, .pptxv-chart-filters-range-field) {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px 8px;
+	min-width: 0;
+	margin-bottom: 6px;
+	color: var(--pptx-muted-foreground);
+	font-size: 11px;
+}
+/* A field toggled off with the hidden attribute must stay off: the flex
+   display above would otherwise override the user-agent display: none. */
+.pptxv-inspector-section :where(label:not([class]), .pptxv-exhaustive-field, .pptxv-chart-filters-range-field)[hidden] { display: none; }
+.pptxv-inspector-section :where(label:not([class]), .pptxv-exhaustive-field, .pptxv-chart-filters-range-field) > :where(input, textarea, select, pptx-ui-select) {
+	flex: 0 1 60%;
+	margin-left: auto;
+}
+.pptxv-inspector-section :where(label:not([class]), .pptxv-exhaustive-field, .pptxv-chart-filters-range-field) > :where(input[type='color']) {
+	flex: none;
+	margin-left: auto;
+}
+.pptxv-inspector-section :where(label:not([class]), .pptxv-exhaustive-field, .pptxv-chart-filters-range-field) > :where(pptx-ui-checkbox, pptx-ui-radio, input[type='checkbox'], input[type='radio']) {
+	flex: none;
+	order: -1;
+}
+.pptxv-inspector-section :where(label:not([class]), .pptxv-exhaustive-field, .pptxv-chart-filters-range-field) > :where(textarea) {
+	flex-basis: 100%;
+	margin-left: 0;
+}
+
+/* Chart sub-blocks: a gap and a rule between the groups instead of one run. */
+.pptxv-inspector :where(.pptxv-chart-advanced, .pptxv-chart-exhaustive, .pptxv-chart-subtype, .pptxv-chart-filters, .pptxv-chart-usershapes) {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: 1px solid var(--pptx-border);
+}
+.pptxv-inspector :where(.pptxv-chart-advanced, .pptxv-chart-exhaustive, .pptxv-chart-subtype, .pptxv-chart-filters, .pptxv-chart-usershapes)[hidden] { display: none; }
+.pptxv-inspector :where(.pptxv-chart-advanced, .pptxv-chart-exhaustive, .pptxv-chart-filters, .pptxv-chart-usershapes) :where(button:not([class]), .pptxv-chart-clear-series-color) {
+	min-height: 24px;
+	padding: 2px 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-secondary);
+	color: var(--pptx-secondary-foreground);
+	font: inherit;
+	font-size: 11px;
+	cursor: pointer;
+}
+.pptxv-inspector :where(.pptxv-chart-clear-series-color) { margin-bottom: 6px; }
+.pptxv-inspector :where(.pptxv-chart-clear-series-color)[hidden] { display: none; }
+
+
 .pptxv {
 	position: relative;
 	display: flex;
@@ -1131,7 +1237,12 @@
 .pptxv-smartart-layout-button:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
 .pptxv-smartart-layout-button.is-active { border-color: var(--pptx-primary); background: color-mix(in srgb, var(--pptx-primary) 16%, transparent); color: var(--pptx-primary); }
 .pptxv-smartart-nodes { display: flex; max-height: 208px; flex-direction: column; gap: 5px; overflow-y: auto; }
-.pptxv-smartart-node { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 5px; }
+/* One row per node: index, text, fill, font colour, bold, italic; the
+   hierarchy actions (inspector-extras-css.ts) wrap onto a second row under
+   the text. With two columns the six controls used to scatter over four. */
+.pptxv-smartart-node { display: grid; grid-template-columns: 20px minmax(0, 1fr) repeat(4, auto); align-items: center; gap: 5px; }
+.pptxv-smartart-node > input[type='color'] { width: 22px; height: 22px; }
+.pptxv-smartart-node > button { min-width: 22px; height: 22px; padding: 0 4px; border: 1px solid var(--pptx-border); border-radius: var(--pptx-radius); background: transparent; color: var(--pptx-foreground); font: inherit; font-weight: 600; cursor: pointer; }
 .pptxv-smartart-node-index { color: var(--pptx-muted-foreground); text-align: center; }
 .pptxv-smartart-node-input { min-width: 0; height: 26px; box-sizing: border-box; padding: 2px 6px; border: 1px solid var(--pptx-border); border-radius: var(--pptx-radius); background: var(--pptx-background); color: var(--pptx-foreground); font: inherit; }
 .pptxv-smartart-node-input:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
@@ -2870,8 +2981,6 @@
 .pptxv-ole-edit-table input:focus { background: var(--pptx-accent); outline: none; }
 .pptxv-ole-edit-paragraphs, .pptxv-ole-edit-deck { display: flex; flex-direction: column; gap: 8px; }
 .pptxv-ole-edit-paragraphs textarea { padding: 6px 8px; border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-muted); color: inherit; resize: vertical; }
-.pptxv-ole-edit-deck-row { display: flex; flex-direction: column; gap: 4px; color: var(--pptx-muted-foreground); }
-.pptxv-ole-edit-deck-row input { padding: 6px 8px; border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-muted); color: var(--pptx-foreground); }
 /* Touch target: matches MIN_TOUCH_TARGET_PX (44) from pptx-viewer-shared's
    render/responsive module, below MOBILE_BREAKPOINT (768). The workspace
    Comments pane's "Add Comment" button (comments-panel.ts) carries no class
@@ -2883,17 +2992,6 @@
 }
 
 
-/* ── Dialog shell override: the Options dialog is wider than parity dialogs ── */
-.pptxv-options-dialog { width: min(56rem, calc(100vw - 32px)); height: min(620px, 88vh); }
-.pptxv-options-dialog .pptxv-parity-body { flex: 1; min-height: 0; padding: 0; gap: 0; }
-.pptxv-options-body { display: flex; flex: 1; min-height: 0; }
-.pptxv-options-nav { display: flex; flex-direction: column; gap: 2px; flex: none; width: 172px; overflow-y: auto; padding: 8px; border-right: 1px solid var(--pptx-border); }
-.pptxv-options-nav button { padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--pptx-foreground); font: inherit; font-size: 12px; text-align: left; cursor: pointer; white-space: nowrap; }
-.pptxv-options-nav button:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
-.pptxv-options-nav button.is-active { background: color-mix(in srgb, var(--pptx-primary) 14%, transparent); color: var(--pptx-primary); font-weight: 600; }
-.pptxv-options-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px; font-size: 12px; }
-.pptxv-options-headline { margin: 0 0 12px; font-size: 12px; font-weight: 600; }
-
 /* ── Sections + control rows ── */
 .pptxv-options-section { margin: 0 0 16px; }
 .pptxv-options-section > h3 { margin: 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--pptx-border); color: var(--pptx-muted-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@@ -2908,17 +3006,6 @@
 	gap: 2px;
 	font-size: 12px;
 }
-.pptxv-options-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; padding: 2px 0; }
-.pptxv-options-row.is-indent { padding-left: 22px; }
-label.pptxv-options-row { cursor: pointer; }
-.pptxv-options-row-label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
-.pptxv-options-info { display: inline-grid; place-items: center; width: 13px; height: 13px; flex: none; border: 1px solid currentcolor; border-radius: 50%; color: var(--pptx-primary); font-size: 9px; font-style: normal; cursor: help; opacity: .75; }
-.pptxv-options-row select, .pptxv-options-row input[type='text'], .pptxv-options-row input[type='number'] { max-width: 55%; padding: 5px 7px; border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-muted); color: inherit; font: inherit; font-size: 12px; }
-.pptxv-options-row input[type='number'] { width: 72px; text-align: right; }
-.pptxv-options-row input[type='text'] { width: 180px; }
-.pptxv-options-row pptx-ui-checkbox { flex: none; }
-.pptxv-options-unit { color: var(--pptx-muted-foreground); font-size: 11px; }
-.pptxv-options-number { display: inline-flex; align-items: center; gap: 6px; }
 .pptxv-options-action { padding: 6px 11px; border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-muted); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
 .pptxv-options-action:hover:not(:disabled) { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
 .pptxv-options-action:disabled { opacity: .45; cursor: default; }
@@ -2967,23 +3054,6 @@ label.pptxv-options-row { cursor: pointer; }
    opacity/pointer-events on mousemove; !important here is required to win
    over that inline style regardless of the JS auto-show timer. */
 .pptxv.pptxv-no-show-popup .pptxv-present-toolbar-wrap { opacity: 0 !important; pointer-events: none !important; }
-@media (max-width: 767px) {
-	.pptxv-options-body { flex-direction: column; }
-	.pptxv-options-nav { flex-direction: row; width: 100%; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--pptx-border); }
-	/* Matches isDensePanelCompact()/MOBILE_BREAKPOINT (768) in
-	   pptx-viewer-shared: getDensePanelTouchTargetPx(width) returns
-	   MIN_TOUCH_TARGET_PX (44). Every schema-driven control row (toggle /
-	   select / number / text, across every tab) gets a touch-sized hit area:
-	   the row itself (a <label> for a toggle, so enlarging it is enough there)
-	   and each select/text/number control. */
-	.pptxv-options-row { min-height: 44px; }
-	.pptxv-options-row select, .pptxv-options-row input[type='text'], .pptxv-options-row input[type='number'] { min-height: 44px; }
-	/* The category rail's own tab buttons are discrete one-per-row controls
-	   too, so they get the same touch target as everything else in this
-	   dialog below the breakpoint - CLAUDE.md Rule 1 (React's SettingsDialog
-	   navBtnStyle already covers its own nav for the same reason). */
-	.pptxv-options-nav button { min-height: 44px; }
-}
 
 
 .pptxv-motion-path-row { display: grid; gap: 2px; font-size: 11px; }
@@ -3257,7 +3327,7 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
 .pptxv-text3d-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 
 /* ── Chart data grid ─────────────────────────────────────────────────── */
-.pptxv-chart-grid { display: grid; gap: 4px; margin: 6px 0; }
+.pptxv-chart-grid { display: grid; gap: 4px; margin: 6px 0; max-width: 100%; overflow-x: auto; }
 .pptxv-chart-grid[hidden] { display: none; }
 .pptxv-chart-grid-toolbar { display: flex; justify-content: flex-end; gap: 4px; }
 .pptxv-chart-grid-btn {
@@ -3695,6 +3765,184 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
 .pptxv-theme-swatch-grid-swatch.is-selected { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
 
 
+/* ── Media ───────────────────────────────────────────────────────────── */
+.pptxv-media-preview {
+	display: block;
+	width: 100%;
+	max-height: 160px;
+	margin-bottom: 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: #000;
+}
+.pptxv-media-preview[hidden] { display: none; }
+.pptxv-media-poster {
+	display: block;
+	max-width: 100%;
+	max-height: 96px;
+	margin-bottom: 8px;
+	border-radius: var(--pptx-radius);
+	object-fit: contain;
+}
+.pptxv-media-poster[hidden],
+.pptxv-media-poster:not([src]) { display: none; }
+.pptxv-media-reset-trim {
+	align-self: flex-start;
+	margin: 2px 0 8px;
+	padding: 2px 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-secondary);
+	color: var(--pptx-secondary-foreground);
+	font: inherit;
+	font-size: 11px;
+	cursor: pointer;
+}
+.pptxv-media-reset-trim:disabled { opacity: 0.5; cursor: default; }
+.pptxv-media-metadata {
+	display: block;
+	margin-top: 6px;
+	color: var(--pptx-muted-foreground);
+	font-size: 10px;
+	font-variant-numeric: tabular-nums;
+	white-space: pre-line;
+}
+
+/* ── Animation rows ──────────────────────────────────────────────────── */
+.pptxv-effect-sound-row,
+.pptxv-after-animation-row {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 8px;
+	color: var(--pptx-muted-foreground);
+	font-size: 11px;
+}
+.pptxv-effect-sound-controls {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+}
+.pptxv-effect-sound-controls > :first-child { flex: 1; min-width: 0; }
+.pptxv-effect-sound-preview {
+	flex: none;
+	width: 26px;
+	height: 26px;
+	padding: 0;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-secondary);
+	color: var(--pptx-secondary-foreground);
+	font-size: 10px;
+	cursor: pointer;
+}
+.pptxv-effect-sound-preview:disabled { opacity: 0.5; cursor: default; }
+/* The picker opens from the "Other sound..." option; the input itself stays out of sight. */
+.pptxv-effect-sound-file-input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+.pptxv-after-animation-row > label,
+.pptxv-after-animation-color {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+.pptxv-after-animation-row > label > :last-child { flex: 0 1 60%; min-width: 0; }
+.pptxv-after-animation-color[hidden] { display: none; }
+
+/* ── Slide size: rescale prompt ──────────────────────────────────────── */
+.pptxv-slide-size-rescale {
+	display: grid;
+	gap: 6px;
+	margin-top: 8px;
+	padding: 8px;
+	border: 1px solid var(--pptx-primary);
+	border-radius: 6px;
+	background: color-mix(in srgb, var(--pptx-primary) 8%, transparent);
+}
+.pptxv-slide-size-rescale[hidden] { display: none; }
+.pptxv-slide-size-rescale-title { color: var(--pptx-foreground); font-size: 12px; font-weight: 600; }
+.pptxv-slide-size-rescale-description { margin: 0; color: var(--pptx-muted-foreground); font-size: 11px; line-height: 1.4; }
+.pptxv-slide-size-rescale-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
+.pptxv-slide-size-rescale-btn {
+	min-height: 28px;
+	padding: 4px 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: var(--pptx-background);
+	color: var(--pptx-foreground);
+	font: inherit;
+	font-size: 11px;
+	cursor: pointer;
+}
+.pptxv-slide-size-rescale-btn:hover { border-color: var(--pptx-primary); background: var(--pptx-accent); }
+
+/* ── Fill: pattern panel, alt text, tags ─────────────────────────────── */
+.pptxv-inspector-pattern {
+	display: grid;
+	gap: 6px;
+	margin: 4px 0 8px;
+	padding-left: 4px;
+	border-left: 2px solid var(--pptx-border);
+}
+.pptxv-inspector-pattern[hidden],
+.pptxv-inspector-pattern:empty { display: none; }
+.pptxv-accessibility-alt {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 4px;
+	margin-bottom: 8px;
+}
+.pptxv-accessibility-alt-input { width: 100%; }
+.pptxv-accessibility-title-input { flex: 1 1 auto; min-width: 0; }
+.pptxv-tags-toggle-label {
+	color: var(--pptx-foreground);
+	font-size: 11px;
+	font-weight: 600;
+}
+
+/* ── SmartArt text pane: per-node hierarchy actions ──────────────────── */
+.pptxv-smartart-hierarchy {
+	display: flex;
+	flex-wrap: wrap;
+	grid-column: 2 / -1;
+	gap: 4px;
+	margin-top: 2px;
+}
+.pptxv-smartart-hierarchy button {
+	padding: 1px 6px;
+	border: 1px solid var(--pptx-border);
+	border-radius: var(--pptx-radius);
+	background: transparent;
+	color: var(--pptx-muted-foreground);
+	font: inherit;
+	font-size: 10px;
+	cursor: pointer;
+}
+.pptxv-smartart-hierarchy button:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
+
+/* ── OLE editor dialog: nested deck tab ──────────────────────────────── */
+.pptxv-ole-edit-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.pptxv-ole-edit-deck-slide { display: flex; flex-direction: column; gap: 4px; color: var(--pptx-muted-foreground); }
+.pptxv-ole-edit-deck-caption { font-size: 11px; font-weight: 600; }
+.pptxv-ole-edit-deck-slide input {
+	padding: 6px 8px;
+	border: 1px solid var(--pptx-border);
+	border-radius: 4px;
+	background: var(--pptx-muted);
+	color: var(--pptx-foreground);
+	font: inherit;
+}
+
+
 .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; }
@@ -4554,6 +4802,15 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
 .pptxv-run-program-notice-dismiss svg { width: 12px; height: 12px; margin: 0; }
 
 
+.pptxv-region { display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; }
+.pptxv-region-replaced > :not(.pptxv-region) { display: none !important; }
+.pptxv-notes.pptxv-region-replaced[data-collapsed='true'] { display: none; }
+.pptxv-statusbar.pptxv-region { height: auto; flex: none; }
+.pptxv-modal-panel > .pptxv-region,
+.pptxv-parity-dialog > .pptxv-region { height: auto; flex: 1 1 auto; }
+.pptxv-backstage main > .pptxv-region { height: auto; flex: 1 1 auto; }
+
+
 [data-pptx-editor-chrome] [data-pptx-chrome][hidden] { display: none !important; }
 @media (min-width: 768px) {
   [data-pptx-editor-chrome] [data-pptx-title-bar] {
@@ -4658,8 +4915,9 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
     padding: 0; gap: 0; border: 0; scrollbar-width: none;
   }
   [data-pptx-editor-chrome] [data-pptx-chrome="ribbon-tabs"]:has([data-pptx-chrome="ribbon-tab-scroll"]) { overflow: visible; }
+  /* Tabs keep their labels whole; a narrow editor scrolls the strip, as Office does. */
   [data-pptx-editor-chrome] [data-pptx-chrome="ribbon-tabs"] [role="tab"] {
-    position: relative; height: 34px; padding: 8px 14px;
+    position: relative; flex: none; height: 34px; padding: 8px 14px;
     border: 0; border-radius: 0; font-size: 12px; line-height: 18px;
     font-weight: 500; white-space: nowrap; background: transparent;
     color: var(--pptx-muted-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-vanilla-viewer",
-	"version": "3.37.0",
+	"version": "3.38.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.13.0",
-		"ooxml-ui": "^1.13.0",
+		"ooxml-core": "^1.14.0",
+		"ooxml-ui": "^1.14.0",
 		"opentype.js": "^2.0.0"
 	},
 	"devDependencies": {