pptx-vanilla-viewer 3.49.0 → 3.50.0

package/dist/styles.css

@@ -1206,6 +1206,8 @@
 	margin-bottom: 8px;
 }
 .pptxv-inspector-row-label { color: var(--_pptx-muted-foreground); }
+.pptxv-inspector-fields-section { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--_pptx-border); }
+.pptxv-inspector-fields-section:last-child { border-bottom: none; }
 /* Fill & Stroke: one group per target (picker, theme grid, recent colours). */
 .pptxv-inspector-color-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
 .pptxv-inspector-color-group > .pptxv-inspector-row { margin-bottom: 0; }
@@ -1247,17 +1249,6 @@
 }
 .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; }
-/* 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; }
-
 /* Select / checkbox / range fields (text/image/table inspector sections). */
 .pptxv-field-select,
 .pptxv-field-checkbox,
@@ -1725,26 +1716,9 @@
 .pptxv-dropdown-item:hover { background: var(--_pptx-accent); color: var(--_pptx-accent-foreground); }
 .pptxv-dropdown-item.is-selected { font-weight: 600; color: var(--_pptx-primary); }
 
-/* B6: "Recent colours" row (ui/recent-colors-row.ts) under the property
-   inspector's colour inputs. */
-.pptxv-recent-colors[hidden] { display: none; }
-.pptxv-recent-colors-label {
-	margin-bottom: 4px;
-	color: var(--_pptx-muted-foreground);
-	font-size: 10px;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-.pptxv-swatch-grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 4px; margin-bottom: 6px; }
-.pptxv-swatch {
-	width: 20px;
-	height: 20px;
-	padding: 0;
-	border: 1px solid var(--_pptx-border);
-	border-radius: 50%;
-	cursor: pointer;
-}
-.pptxv-swatch:hover { transform: scale(1.15); }
+/* B6: "Recent colours" row (ui/recent-colors-row.ts, the shared colour grid) under the
+   property inspector's colour inputs. */
+.pptxv-recent-colors { margin-top: 4px; }
 
 /* ── Find & Replace docked panel ─────────────────────────────────────── */
 .pptxv-findreplace {
@@ -1946,134 +1920,6 @@
 .pptxv-version-history{position:absolute;z-index:210;inset:0 0 0 auto;display:flex;width:min(320px,100%);flex-direction:column;border-left:1px solid var(--_pptx-border);background:var(--_pptx-background);color:var(--_pptx-foreground);box-shadow:-18px 0 48px #0005}.pptxv-version-history>header{display:flex;min-height:48px;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid var(--_pptx-border)}.pptxv-version-history h2{flex:1;margin:0;font-size:14px}.pptxv-version-history button{border:0;border-radius:6px;padding:6px 9px;background:transparent;color:inherit}.pptxv-version-history button:hover{background:var(--_pptx-accent)}.pptxv-version-content{flex:1;overflow:auto;color:var(--_pptx-muted-foreground);font-size:12px}.pptxv-version-empty{padding:32px 14px;text-align:center}.pptxv-version-content article{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px;border-bottom:1px solid var(--_pptx-border)}.pptxv-version-content article strong{color:var(--_pptx-foreground);font-weight:500}.pptxv-version-content article p{grid-column:1/-1;margin:0;font-size:10px}.pptxv-version-content article footer{grid-column:1/-1;display:flex;gap:6px;margin-top:8px}.pptxv-version-content .is-primary{background:color-mix(in srgb,var(--_pptx-primary) 20%,transparent);color:var(--_pptx-primary)}.pptxv-version-content .is-danger{color:#f87171}@media(max-width:600px){.pptxv-info-dialog{position:fixed;inset:auto 0 0;width:100%;max-height:88dvh;border-radius:16px 16px 0 0}.pptxv-version-history{position:fixed;top:auto;height:min(72dvh,560px);border-top:1px solid var(--_pptx-border);border-left:0}}
 
 
-.pptxv-smartart-dialog-layer {
-	position: fixed;
-	inset: 0;
-	z-index: 1200;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.pptxv-smartart-dialog-layer[hidden] { display: none; }
-.pptxv-smartart-dialog-backdrop {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	border: 0;
-	background: rgb(0 0 0 / 0.5);
-	cursor: default;
-}
-.pptxv-smartart-dialog {
-	position: relative;
-	z-index: 1;
-	display: flex;
-	flex-direction: column;
-	width: min(600px, 90vw);
-	max-height: 80vh;
-	overflow: hidden;
-	border: 1px solid var(--_pptx-border);
-	border-radius: 8px;
-	background: var(--_pptx-background);
-	color: var(--_pptx-foreground);
-	box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
-}
-.pptxv-smartart-dialog:focus { outline: none; }
-.pptxv-smartart-dialog-header,
-.pptxv-smartart-dialog-footer {
-	display: flex;
-	align-items: center;
-	padding: 12px 16px;
-}
-.pptxv-smartart-dialog-header {
-	justify-content: space-between;
-	border-bottom: 1px solid var(--_pptx-border);
-}
-.pptxv-smartart-dialog-header h2 { margin: 0; font-size: 14px; font-weight: 500; }
-.pptxv-smartart-dialog-close {
-	display: grid;
-	width: 28px;
-	height: 28px;
-	padding: 0;
-	place-items: center;
-	border: 0;
-	border-radius: var(--_pptx-radius);
-	background: transparent;
-	color: inherit;
-	font: inherit;
-	font-size: 20px;
-	line-height: 1;
-	cursor: pointer;
-}
-.pptxv-smartart-dialog-close:hover { background: var(--_pptx-muted); }
-.pptxv-smartart-dialog-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
-.pptxv-smartart-categories {
-	flex: 0 0 160px;
-	padding: 8px 0;
-	border-right: 1px solid var(--_pptx-border);
-}
-.pptxv-smartart-category {
-	display: block;
-	width: 100%;
-	padding: 6px 12px;
-	border: 0;
-	background: transparent;
-	color: inherit;
-	font: inherit;
-	font-size: 12px;
-	text-align: left;
-	cursor: pointer;
-}
-.pptxv-smartart-category:hover { background: var(--_pptx-muted); }
-.pptxv-smartart-category.is-active { background: var(--_pptx-primary); color: #fff; }
-.pptxv-smartart-gallery { flex: 1; min-width: 0; overflow-y: auto; padding: 12px; }
-.pptxv-smartart-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
-.pptxv-smartart-option {
-	display: flex;
-	min-width: 0;
-	padding: 8px;
-	align-items: center;
-	flex-direction: column;
-	gap: 4px;
-	border: 1px solid var(--_pptx-border);
-	border-radius: var(--_pptx-radius);
-	background: transparent;
-	color: inherit;
-	font: inherit;
-	cursor: pointer;
-}
-.pptxv-smartart-option:hover { background: color-mix(in srgb, var(--_pptx-muted) 50%, transparent); }
-.pptxv-smartart-option.is-selected {
-	border-color: var(--_pptx-primary);
-	background: color-mix(in srgb, var(--_pptx-primary) 20%, transparent);
-}
-.pptxv-smartart-option-preview {
-	display: grid;
-	width: 64px;
-	height: 48px;
-	place-items: center;
-	border-radius: var(--_pptx-radius);
-	background: var(--_pptx-muted);
-	color: var(--_pptx-primary);
-}
-.pptxv-smartart-option-preview svg { width: 30px; height: 30px; }
-.pptxv-smartart-option-label { font-size: 10px; line-height: 1.25; text-align: center; }
-.pptxv-smartart-dialog-footer {
-	justify-content: flex-end;
-	gap: 8px;
-	border-top: 1px solid var(--_pptx-border);
-}
-.pptxv-smartart-dialog button:focus-visible { outline: 2px solid var(--_pptx-ring); outline-offset: 1px; }
-
-@media (max-width: 767px) {
-	.pptxv-smartart-dialog-layer { align-items: flex-end; }
-	.pptxv-smartart-dialog { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; }
-	.pptxv-smartart-categories { flex-basis: 120px; }
-	.pptxv-smartart-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-
-
 .pptxv-tpl-dialog-layer {
 	position: fixed;
 	inset: 0;
@@ -3281,67 +3127,8 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
 .pptxv-text3d-bevel-label { color: var(--_pptx-muted-foreground); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
 .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; 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 {
-	padding: 2px 6px;
-	border: 1px solid var(--_pptx-border);
-	border-radius: var(--_pptx-radius);
-	background: var(--_pptx-muted);
-	color: var(--_pptx-foreground);
-	font: inherit;
-	font-size: 10px;
-	cursor: pointer;
-}
-.pptxv-chart-grid-btn:hover:not(:disabled) { background: var(--_pptx-accent); color: var(--_pptx-accent-foreground); }
-.pptxv-chart-grid-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-.pptxv-chart-grid-table th, .pptxv-chart-grid-table td { padding: 1px; min-width: 72px; }
-.pptxv-chart-grid-table th { font-weight: 400; }
-.pptxv-chart-grid-table :is(th, td) { display: table-cell; white-space: nowrap; }
-.pptxv-chart-grid-cell {
-	box-sizing: border-box;
-	width: 100%;
-	min-width: 52px;
-	padding: 2px 4px;
-	border: 1px solid var(--_pptx-border);
-	border-radius: var(--_pptx-radius);
-	background: var(--_pptx-background);
-	color: var(--_pptx-foreground);
-	font: inherit;
-	font-size: 11px;
-}
-.pptxv-chart-grid-cell:focus-visible { outline: 2px solid var(--_pptx-ring); outline-offset: -1px; }
-/* Ring-highlight for the cell matching the on-canvas chart part selection. */
-.pptxv-chart-grid-cell-highlight { outline: 2px solid var(--_pptx-ring); outline-offset: -1px; }
-.pptxv-chart-grid-remove {
-	margin-left: 2px;
-	padding: 0 3px;
-	border: none;
-	background: transparent;
-	color: var(--_pptx-muted-foreground);
-	font: inherit;
-	cursor: pointer;
-}
-.pptxv-chart-grid-remove:hover { color: var(--_pptx-destructive); }
-/* Below this width, matches isDensePanelCompact()/MOBILE_BREAKPOINT (768) in
-   pptx-viewer-shared: getDenseGridLayoutPlan(width) returns
-   stickyFirstColumn: true, minCellWidthPx: 64, and
-   getDensePanelTouchTargetPx(width) returns MIN_TOUCH_TARGET_PX (44). Pins
-   the category-label column so a value scrolled into view still reads
-   against its row, and gives the add/remove controls a touch-sized hit area. */
-@media (max-width: 767px) {
-	.pptxv-chart-grid-table th, .pptxv-chart-grid-table td { min-width: 64px; }
-	.pptxv-chart-grid-table th:first-child, .pptxv-chart-grid-table td:first-child {
-		position: sticky;
-		left: 0;
-		z-index: 1;
-		background: var(--_pptx-background);
-	}
-	.pptxv-chart-grid-table thead th:first-child { z-index: 2; }
-	.pptxv-chart-grid-btn, .pptxv-chart-grid-remove { min-width: 44px !important; min-height: 44px !important; }
-}
+/* ── Chart data sheet (the shared pptx-ui-chart-data-sheet styles itself) ── */
+.pptxv-chart-sheet { margin: 6px 0; }
 
 /* ── Table data grid ─────────────────────────────────────────────────── */
 .pptxv-table-grid-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
@@ -3848,25 +3635,6 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
 	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; }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-vanilla-viewer",
-	"version": "3.49.0",
+	"version": "3.50.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.57.0",
-		"ooxml-core": "^1.24.3",
-		"ooxml-ui": "^1.25.0",
+		"ooxml-core": "^1.25.0",
+		"ooxml-ui": "^1.26.0",
 		"opentype.js": "^2.0.0"
 	},
 	"devDependencies": {