pptx-vanilla-viewer 3.48.0 → 3.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1206,6 +1206,8 @@
1206
1206
  margin-bottom: 8px;
1207
1207
  }
1208
1208
  .pptxv-inspector-row-label { color: var(--_pptx-muted-foreground); }
1209
+ .pptxv-inspector-fields-section { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--_pptx-border); }
1210
+ .pptxv-inspector-fields-section:last-child { border-bottom: none; }
1209
1211
  /* Fill & Stroke: one group per target (picker, theme grid, recent colours). */
1210
1212
  .pptxv-inspector-color-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
1211
1213
  .pptxv-inspector-color-group > .pptxv-inspector-row { margin-bottom: 0; }
@@ -1247,17 +1249,6 @@
1247
1249
  }
1248
1250
  .pptxv-smartart-layout-button:hover { background: var(--_pptx-accent); color: var(--_pptx-accent-foreground); }
1249
1251
  .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); }
1250
- .pptxv-smartart-nodes { display: flex; max-height: 208px; flex-direction: column; gap: 5px; overflow-y: auto; }
1251
- /* One row per node: index, text, fill, font colour, bold, italic; the
1252
- hierarchy actions (inspector-extras-css.ts) wrap onto a second row under
1253
- the text. With two columns the six controls used to scatter over four. */
1254
- .pptxv-smartart-node { display: grid; grid-template-columns: 20px minmax(0, 1fr) repeat(4, auto); align-items: center; gap: 5px; }
1255
- .pptxv-smartart-node > input[type='color'] { width: 22px; height: 22px; }
1256
- .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; }
1257
- .pptxv-smartart-node-index { color: var(--_pptx-muted-foreground); text-align: center; }
1258
- .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; }
1259
- .pptxv-smartart-node-input:focus-visible { outline: 2px solid var(--_pptx-ring); outline-offset: -1px; }
1260
-
1261
1252
  /* Select / checkbox / range fields (text/image/table inspector sections). */
1262
1253
  .pptxv-field-select,
1263
1254
  .pptxv-field-checkbox,
@@ -1725,68 +1716,9 @@
1725
1716
  .pptxv-dropdown-item:hover { background: var(--_pptx-accent); color: var(--_pptx-accent-foreground); }
1726
1717
  .pptxv-dropdown-item.is-selected { font-weight: 600; color: var(--_pptx-primary); }
1727
1718
 
1728
- /* ── Swatch colour picker ────────────────────────────────────────────── */
1729
- .pptxv-swatch-picker { position: relative; display: inline-flex; }
1730
- .pptxv-swatch-trigger { flex-direction: column; height: 28px; padding: 2px 6px; gap: 0; }
1731
- .pptxv-swatch-swab { display: block; width: 16px; height: 3px; border-radius: 1px; margin-top: 1px; }
1732
- .pptxv-swatch-menu {
1733
- /* Positioned by attachAnchoredPopup (position: fixed + inline top/left),
1734
- which escapes the ribbon row's overflow-x clip (issue #183). */
1735
- z-index: 30;
1736
- padding: 8px;
1737
- border: 1px solid var(--_pptx-border);
1738
- border-radius: var(--_pptx-radius);
1739
- background: var(--_pptx-card);
1740
- color: var(--_pptx-card-foreground);
1741
- box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
1742
- }
1743
- .pptxv-swatch-menu[hidden] { display: none; }
1744
- /* B6: "Recent colours" row (ui/recent-colors-row.ts), shared by the swatch
1745
- picker's popup menu and the property inspector's colour inputs. */
1746
- .pptxv-recent-colors[hidden] { display: none; }
1747
- .pptxv-recent-colors-label {
1748
- margin-bottom: 4px;
1749
- color: var(--_pptx-muted-foreground);
1750
- font-size: 10px;
1751
- text-transform: uppercase;
1752
- letter-spacing: 0.04em;
1753
- }
1754
- .pptxv-swatch-standard-label {
1755
- margin-bottom: 4px;
1756
- color: var(--_pptx-muted-foreground);
1757
- font-size: 10px;
1758
- text-transform: uppercase;
1759
- letter-spacing: 0.04em;
1760
- }
1761
- .pptxv-swatch-grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 4px; margin-bottom: 6px; }
1762
- .pptxv-swatch {
1763
- width: 20px;
1764
- height: 20px;
1765
- padding: 0;
1766
- border: 1px solid var(--_pptx-border);
1767
- border-radius: 50%;
1768
- cursor: pointer;
1769
- }
1770
- .pptxv-swatch:hover { transform: scale(1.15); }
1771
- .pptxv-swatch.is-selected { outline: 2px solid var(--_pptx-ring); outline-offset: 1px; }
1772
- .pptxv-swatch-custom {
1773
- display: flex;
1774
- align-items: center;
1775
- justify-content: space-between;
1776
- gap: 6px;
1777
- font-size: 11px;
1778
- color: var(--_pptx-muted-foreground);
1779
- cursor: pointer;
1780
- }
1781
- .pptxv-swatch-custom-input {
1782
- width: 20px;
1783
- height: 20px;
1784
- padding: 0;
1785
- border: 1px solid var(--_pptx-border);
1786
- border-radius: 4px;
1787
- background: none;
1788
- cursor: pointer;
1789
- }
1719
+ /* B6: "Recent colours" row (ui/recent-colors-row.ts, the shared colour grid) under the
1720
+ property inspector's colour inputs. */
1721
+ .pptxv-recent-colors { margin-top: 4px; }
1790
1722
 
1791
1723
  /* ── Find & Replace docked panel ─────────────────────────────────────── */
1792
1724
  .pptxv-findreplace {
@@ -1988,134 +1920,6 @@
1988
1920
  .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}}
1989
1921
 
1990
1922
 
1991
- .pptxv-smartart-dialog-layer {
1992
- position: fixed;
1993
- inset: 0;
1994
- z-index: 1200;
1995
- display: flex;
1996
- align-items: center;
1997
- justify-content: center;
1998
- }
1999
- .pptxv-smartart-dialog-layer[hidden] { display: none; }
2000
- .pptxv-smartart-dialog-backdrop {
2001
- position: absolute;
2002
- inset: 0;
2003
- width: 100%;
2004
- height: 100%;
2005
- padding: 0;
2006
- border: 0;
2007
- background: rgb(0 0 0 / 0.5);
2008
- cursor: default;
2009
- }
2010
- .pptxv-smartart-dialog {
2011
- position: relative;
2012
- z-index: 1;
2013
- display: flex;
2014
- flex-direction: column;
2015
- width: min(600px, 90vw);
2016
- max-height: 80vh;
2017
- overflow: hidden;
2018
- border: 1px solid var(--_pptx-border);
2019
- border-radius: 8px;
2020
- background: var(--_pptx-background);
2021
- color: var(--_pptx-foreground);
2022
- box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
2023
- }
2024
- .pptxv-smartart-dialog:focus { outline: none; }
2025
- .pptxv-smartart-dialog-header,
2026
- .pptxv-smartart-dialog-footer {
2027
- display: flex;
2028
- align-items: center;
2029
- padding: 12px 16px;
2030
- }
2031
- .pptxv-smartart-dialog-header {
2032
- justify-content: space-between;
2033
- border-bottom: 1px solid var(--_pptx-border);
2034
- }
2035
- .pptxv-smartart-dialog-header h2 { margin: 0; font-size: 14px; font-weight: 500; }
2036
- .pptxv-smartart-dialog-close {
2037
- display: grid;
2038
- width: 28px;
2039
- height: 28px;
2040
- padding: 0;
2041
- place-items: center;
2042
- border: 0;
2043
- border-radius: var(--_pptx-radius);
2044
- background: transparent;
2045
- color: inherit;
2046
- font: inherit;
2047
- font-size: 20px;
2048
- line-height: 1;
2049
- cursor: pointer;
2050
- }
2051
- .pptxv-smartart-dialog-close:hover { background: var(--_pptx-muted); }
2052
- .pptxv-smartart-dialog-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
2053
- .pptxv-smartart-categories {
2054
- flex: 0 0 160px;
2055
- padding: 8px 0;
2056
- border-right: 1px solid var(--_pptx-border);
2057
- }
2058
- .pptxv-smartart-category {
2059
- display: block;
2060
- width: 100%;
2061
- padding: 6px 12px;
2062
- border: 0;
2063
- background: transparent;
2064
- color: inherit;
2065
- font: inherit;
2066
- font-size: 12px;
2067
- text-align: left;
2068
- cursor: pointer;
2069
- }
2070
- .pptxv-smartart-category:hover { background: var(--_pptx-muted); }
2071
- .pptxv-smartart-category.is-active { background: var(--_pptx-primary); color: #fff; }
2072
- .pptxv-smartart-gallery { flex: 1; min-width: 0; overflow-y: auto; padding: 12px; }
2073
- .pptxv-smartart-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
2074
- .pptxv-smartart-option {
2075
- display: flex;
2076
- min-width: 0;
2077
- padding: 8px;
2078
- align-items: center;
2079
- flex-direction: column;
2080
- gap: 4px;
2081
- border: 1px solid var(--_pptx-border);
2082
- border-radius: var(--_pptx-radius);
2083
- background: transparent;
2084
- color: inherit;
2085
- font: inherit;
2086
- cursor: pointer;
2087
- }
2088
- .pptxv-smartart-option:hover { background: color-mix(in srgb, var(--_pptx-muted) 50%, transparent); }
2089
- .pptxv-smartart-option.is-selected {
2090
- border-color: var(--_pptx-primary);
2091
- background: color-mix(in srgb, var(--_pptx-primary) 20%, transparent);
2092
- }
2093
- .pptxv-smartart-option-preview {
2094
- display: grid;
2095
- width: 64px;
2096
- height: 48px;
2097
- place-items: center;
2098
- border-radius: var(--_pptx-radius);
2099
- background: var(--_pptx-muted);
2100
- color: var(--_pptx-primary);
2101
- }
2102
- .pptxv-smartart-option-preview svg { width: 30px; height: 30px; }
2103
- .pptxv-smartart-option-label { font-size: 10px; line-height: 1.25; text-align: center; }
2104
- .pptxv-smartart-dialog-footer {
2105
- justify-content: flex-end;
2106
- gap: 8px;
2107
- border-top: 1px solid var(--_pptx-border);
2108
- }
2109
- .pptxv-smartart-dialog button:focus-visible { outline: 2px solid var(--_pptx-ring); outline-offset: 1px; }
2110
-
2111
- @media (max-width: 767px) {
2112
- .pptxv-smartart-dialog-layer { align-items: flex-end; }
2113
- .pptxv-smartart-dialog { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; }
2114
- .pptxv-smartart-categories { flex-basis: 120px; }
2115
- .pptxv-smartart-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2116
- }
2117
-
2118
-
2119
1923
  .pptxv-tpl-dialog-layer {
2120
1924
  position: fixed;
2121
1925
  inset: 0;
@@ -3323,67 +3127,8 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
3323
3127
  .pptxv-text3d-bevel-label { color: var(--_pptx-muted-foreground); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
3324
3128
  .pptxv-text3d-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
3325
3129
 
3326
- /* ── Chart data grid ─────────────────────────────────────────────────── */
3327
- .pptxv-chart-grid { display: grid; gap: 4px; margin: 6px 0; max-width: 100%; overflow-x: auto; }
3328
- .pptxv-chart-grid[hidden] { display: none; }
3329
- .pptxv-chart-grid-toolbar { display: flex; justify-content: flex-end; gap: 4px; }
3330
- .pptxv-chart-grid-btn {
3331
- padding: 2px 6px;
3332
- border: 1px solid var(--_pptx-border);
3333
- border-radius: var(--_pptx-radius);
3334
- background: var(--_pptx-muted);
3335
- color: var(--_pptx-foreground);
3336
- font: inherit;
3337
- font-size: 10px;
3338
- cursor: pointer;
3339
- }
3340
- .pptxv-chart-grid-btn:hover:not(:disabled) { background: var(--_pptx-accent); color: var(--_pptx-accent-foreground); }
3341
- .pptxv-chart-grid-table { width: 100%; border-collapse: collapse; font-size: 11px; }
3342
- .pptxv-chart-grid-table th, .pptxv-chart-grid-table td { padding: 1px; min-width: 72px; }
3343
- .pptxv-chart-grid-table th { font-weight: 400; }
3344
- .pptxv-chart-grid-table :is(th, td) { display: table-cell; white-space: nowrap; }
3345
- .pptxv-chart-grid-cell {
3346
- box-sizing: border-box;
3347
- width: 100%;
3348
- min-width: 52px;
3349
- padding: 2px 4px;
3350
- border: 1px solid var(--_pptx-border);
3351
- border-radius: var(--_pptx-radius);
3352
- background: var(--_pptx-background);
3353
- color: var(--_pptx-foreground);
3354
- font: inherit;
3355
- font-size: 11px;
3356
- }
3357
- .pptxv-chart-grid-cell:focus-visible { outline: 2px solid var(--_pptx-ring); outline-offset: -1px; }
3358
- /* Ring-highlight for the cell matching the on-canvas chart part selection. */
3359
- .pptxv-chart-grid-cell-highlight { outline: 2px solid var(--_pptx-ring); outline-offset: -1px; }
3360
- .pptxv-chart-grid-remove {
3361
- margin-left: 2px;
3362
- padding: 0 3px;
3363
- border: none;
3364
- background: transparent;
3365
- color: var(--_pptx-muted-foreground);
3366
- font: inherit;
3367
- cursor: pointer;
3368
- }
3369
- .pptxv-chart-grid-remove:hover { color: var(--_pptx-destructive); }
3370
- /* Below this width, matches isDensePanelCompact()/MOBILE_BREAKPOINT (768) in
3371
- pptx-viewer-shared: getDenseGridLayoutPlan(width) returns
3372
- stickyFirstColumn: true, minCellWidthPx: 64, and
3373
- getDensePanelTouchTargetPx(width) returns MIN_TOUCH_TARGET_PX (44). Pins
3374
- the category-label column so a value scrolled into view still reads
3375
- against its row, and gives the add/remove controls a touch-sized hit area. */
3376
- @media (max-width: 767px) {
3377
- .pptxv-chart-grid-table th, .pptxv-chart-grid-table td { min-width: 64px; }
3378
- .pptxv-chart-grid-table th:first-child, .pptxv-chart-grid-table td:first-child {
3379
- position: sticky;
3380
- left: 0;
3381
- z-index: 1;
3382
- background: var(--_pptx-background);
3383
- }
3384
- .pptxv-chart-grid-table thead th:first-child { z-index: 2; }
3385
- .pptxv-chart-grid-btn, .pptxv-chart-grid-remove { min-width: 44px !important; min-height: 44px !important; }
3386
- }
3130
+ /* ── Chart data sheet (the shared pptx-ui-chart-data-sheet styles itself) ── */
3131
+ .pptxv-chart-sheet { margin: 6px 0; }
3387
3132
 
3388
3133
  /* ── Table data grid ─────────────────────────────────────────────────── */
3389
3134
  .pptxv-table-grid-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
@@ -3890,25 +3635,6 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
3890
3635
  font-weight: 600;
3891
3636
  }
3892
3637
 
3893
- /* ── SmartArt text pane: per-node hierarchy actions ──────────────────── */
3894
- .pptxv-smartart-hierarchy {
3895
- display: flex;
3896
- flex-wrap: wrap;
3897
- grid-column: 2 / -1;
3898
- gap: 4px;
3899
- margin-top: 2px;
3900
- }
3901
- .pptxv-smartart-hierarchy button {
3902
- padding: 1px 6px;
3903
- border: 1px solid var(--_pptx-border);
3904
- border-radius: var(--_pptx-radius);
3905
- background: transparent;
3906
- color: var(--_pptx-muted-foreground);
3907
- font: inherit;
3908
- font-size: 10px;
3909
- cursor: pointer;
3910
- }
3911
- .pptxv-smartart-hierarchy button:hover { background: var(--_pptx-accent); color: var(--_pptx-accent-foreground); }
3912
3638
 
3913
3639
  /* ── OLE editor dialog: nested deck tab ──────────────────────────────── */
3914
3640
  .pptxv-ole-edit-content { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@@ -4666,60 +4392,6 @@ svg[data-pptx-motion-path-overlay] [data-pptx-motion-path-handle] { pointer-even
4666
4392
  .pptxv-outline-view-input:read-only { cursor: default; }
4667
4393
 
4668
4394
 
4669
- .pptxv-export-progress-backdrop {
4670
- position: fixed;
4671
- inset: 0;
4672
- z-index: 1200;
4673
- display: flex;
4674
- align-items: center;
4675
- justify-content: center;
4676
- background: rgba(0, 0, 0, 0.6);
4677
- backdrop-filter: blur(4px);
4678
- }
4679
- .pptxv-export-progress-panel {
4680
- width: min(92vw, 384px);
4681
- border: 1px solid var(--_pptx-border, #33334d);
4682
- border-radius: calc(var(--_pptx-radius, 6px) + 6px);
4683
- background: var(--_pptx-popover, #111827);
4684
- color: var(--_pptx-popover-foreground, #f3f4f6);
4685
- padding: 24px;
4686
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
4687
- font-family: system-ui, sans-serif;
4688
- }
4689
- .pptxv-export-progress-panel h3 {
4690
- margin: 0 0 16px;
4691
- font-size: 14px;
4692
- font-weight: 600;
4693
- }
4694
- .pptxv-export-progress-track {
4695
- height: 10px;
4696
- width: 100%;
4697
- overflow: hidden;
4698
- border-radius: 9999px;
4699
- background: var(--_pptx-muted, #1f2937);
4700
- margin-bottom: 12px;
4701
- }
4702
- .pptxv-export-progress-fill {
4703
- height: 100%;
4704
- border-radius: 9999px;
4705
- background: var(--_pptx-primary, #6366f1);
4706
- transition: width 0.3s ease-out;
4707
- }
4708
- .pptxv-export-progress-status {
4709
- display: flex;
4710
- align-items: center;
4711
- justify-content: space-between;
4712
- margin-bottom: 16px;
4713
- font-size: 12px;
4714
- color: var(--_pptx-muted-foreground, #94a3b8);
4715
- }
4716
- .pptxv-export-progress-pct { font-variant-numeric: tabular-nums; }
4717
- .pptxv-export-progress-actions {
4718
- display: flex;
4719
- justify-content: flex-end;
4720
- }
4721
-
4722
-
4723
4395
  .pptxv-sr-only {
4724
4396
  position: absolute;
4725
4397
  width: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pptx-vanilla-viewer",
3
- "version": "3.48.0",
3
+ "version": "3.50.0",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "javascript",
@@ -107,8 +107,8 @@
107
107
  "jspdf": "^4.2.1",
108
108
  "jszip": "^3.10.2",
109
109
  "lucide": "^1.57.0",
110
- "ooxml-core": "^1.24.2",
111
- "ooxml-ui": "^1.24.0",
110
+ "ooxml-core": "^1.25.0",
111
+ "ooxml-ui": "^1.26.0",
112
112
  "opentype.js": "^2.0.0"
113
113
  },
114
114
  "devDependencies": {