pptx-vanilla-viewer 0.6.0 → 0.7.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
@@ -133,7 +133,7 @@
133
133
  .pptxv-cmdsearch-item { cursor: pointer; }
134
134
  .pptxv-cmdsearch-item:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
135
135
  .pptxv-cmdsearch-empty { color: var(--pptx-muted-foreground); }
136
- @media (max-width: 767px) { .pptxv-titlebar { display: none; } }
136
+ @media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) { .pptxv-titlebar { display: none; } }
137
137
 
138
138
  /* ── Body: thumbnail rail + viewport ─────────────────────────────────── */
139
139
  .pptxv-body { display: flex; flex: 1; min-height: 0; }
@@ -373,41 +373,13 @@
373
373
  .pptxv-statusbar-zoom:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
374
374
  .pptxv.pptxv-presenting .pptxv-statusbar { display: none; }
375
375
 
376
- /* ── Compact mobile navigation ───────────────────────────────────────── */
377
- .pptxv-mobile-nav { display: none; }
378
- @media (max-width: 767px) {
376
+ @media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {
379
377
  .pptxv-ribbon,
380
378
  .pptxv-thumbs,
381
379
  .pptxv-inspector,
382
380
  .pptxv-statusbar { display: none; }
383
381
  .pptxv-viewport { padding: 10px; }
384
- .pptxv-mobile-nav {
385
- display: grid;
386
- grid-template-columns: auto minmax(48px, 1fr) auto auto auto minmax(42px, auto) auto auto;
387
- align-items: center;
388
- gap: 2px;
389
- min-height: 52px;
390
- padding: 6px max(10px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom));
391
- border-top: 1px solid var(--pptx-border);
392
- background: var(--pptx-card);
393
- color: var(--pptx-card-foreground);
394
- }
395
- .pptxv-mobile-nav-btn {
396
- width: 36px;
397
- height: 36px;
398
- border-radius: 8px;
399
- }
400
- .pptxv-mobile-nav-btn svg { width: 18px; height: 18px; }
401
- .pptxv-mobile-nav-counter,
402
- .pptxv-mobile-nav-zoom {
403
- justify-self: center;
404
- font-size: 11px;
405
- font-variant-numeric: tabular-nums;
406
- white-space: nowrap;
407
- }
408
- .pptxv-mobile-nav-counter { color: var(--pptx-muted-foreground); }
409
- }
410
- .pptxv.pptxv-presenting .pptxv-mobile-nav { display: none; }
382
+ }
411
383
 
412
384
  /* ── Placeholder (element types without a renderer yet) ──────────────── */
413
385
  .pptxv-placeholder {
@@ -499,7 +471,7 @@
499
471
  /* ── Property inspector ──────────────────────────────────────────────── */
500
472
  .pptxv-inspector {
501
473
  flex: none;
502
- width: 232px;
474
+ width: 288px;
503
475
  overflow-y: auto;
504
476
  border-left: 1px solid var(--pptx-border);
505
477
  background: var(--pptx-card);
@@ -551,6 +523,30 @@
551
523
  }
552
524
  .pptxv-inspector-row-label { color: var(--pptx-muted-foreground); }
553
525
 
526
+ /* Compact SmartArt layout switcher and editable text pane. */
527
+ .pptxv-smartart-label { display: block; margin-bottom: 6px; color: var(--pptx-muted-foreground); }
528
+ .pptxv-smartart-layout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
529
+ .pptxv-smartart-layout-button {
530
+ min-width: 0;
531
+ padding: 6px 3px;
532
+ border: 1px solid var(--pptx-border);
533
+ border-radius: var(--pptx-radius);
534
+ background: transparent;
535
+ color: var(--pptx-muted-foreground);
536
+ font: inherit;
537
+ font-size: 10px;
538
+ cursor: pointer;
539
+ overflow: hidden;
540
+ text-overflow: ellipsis;
541
+ }
542
+ .pptxv-smartart-layout-button:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
543
+ .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); }
544
+ .pptxv-smartart-nodes { display: flex; max-height: 208px; flex-direction: column; gap: 5px; overflow-y: auto; }
545
+ .pptxv-smartart-node { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 5px; }
546
+ .pptxv-smartart-node-index { color: var(--pptx-muted-foreground); text-align: center; }
547
+ .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; }
548
+ .pptxv-smartart-node-input:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
549
+
554
550
  /* Select / checkbox / range fields (text/image/table inspector sections). */
555
551
  .pptxv-field-select,
556
552
  .pptxv-field-checkbox,
@@ -648,6 +644,7 @@
648
644
  padding: 4px 8px;
649
645
  border-bottom: 1px solid var(--pptx-border);
650
646
  }
647
+ .pptxv-ribbon-primary:empty { display: none; }
651
648
  .pptxv-ribbon-primary[hidden] { display: none; }
652
649
  /* ── Tab bar ─────────────────────────────────────────────────────────── */
653
650
  .pptxv-ribbon-tabs {
@@ -689,6 +686,11 @@
689
686
  padding: 6px 8px;
690
687
  }
691
688
  .pptxv-ribbon-tab-content[hidden] { display: none; }
689
+ .pptxv-ribbon-insert-content {
690
+ flex-wrap: nowrap;
691
+ overflow-x: auto;
692
+ overflow-y: hidden;
693
+ }
692
694
  .pptxv-rgroup {
693
695
  display: flex;
694
696
  flex-direction: column;
@@ -850,6 +852,146 @@
850
852
  .pptxv-findreplace-status { font-size: 11px; color: var(--pptx-muted-foreground); }
851
853
 
852
854
 
855
+ .pptxv-smartart-dialog-layer {
856
+ position: fixed;
857
+ inset: 0;
858
+ z-index: 1200;
859
+ display: flex;
860
+ align-items: center;
861
+ justify-content: center;
862
+ }
863
+ .pptxv-smartart-dialog-layer[hidden] { display: none; }
864
+ .pptxv-smartart-dialog-backdrop {
865
+ position: absolute;
866
+ inset: 0;
867
+ width: 100%;
868
+ height: 100%;
869
+ padding: 0;
870
+ border: 0;
871
+ background: rgb(0 0 0 / 0.5);
872
+ cursor: default;
873
+ }
874
+ .pptxv-smartart-dialog {
875
+ position: relative;
876
+ z-index: 1;
877
+ display: flex;
878
+ flex-direction: column;
879
+ width: min(600px, 90vw);
880
+ max-height: 80vh;
881
+ overflow: hidden;
882
+ border: 1px solid var(--pptx-border);
883
+ border-radius: 8px;
884
+ background: var(--pptx-background);
885
+ color: var(--pptx-foreground);
886
+ box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
887
+ }
888
+ .pptxv-smartart-dialog:focus { outline: none; }
889
+ .pptxv-smartart-dialog-header,
890
+ .pptxv-smartart-dialog-footer {
891
+ display: flex;
892
+ align-items: center;
893
+ padding: 12px 16px;
894
+ }
895
+ .pptxv-smartart-dialog-header {
896
+ justify-content: space-between;
897
+ border-bottom: 1px solid var(--pptx-border);
898
+ }
899
+ .pptxv-smartart-dialog-header h2 { margin: 0; font-size: 14px; font-weight: 500; }
900
+ .pptxv-smartart-dialog-close {
901
+ display: grid;
902
+ width: 28px;
903
+ height: 28px;
904
+ padding: 0;
905
+ place-items: center;
906
+ border: 0;
907
+ border-radius: var(--pptx-radius);
908
+ background: transparent;
909
+ color: inherit;
910
+ font: inherit;
911
+ font-size: 20px;
912
+ line-height: 1;
913
+ cursor: pointer;
914
+ }
915
+ .pptxv-smartart-dialog-close:hover { background: var(--pptx-muted); }
916
+ .pptxv-smartart-dialog-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
917
+ .pptxv-smartart-categories {
918
+ flex: 0 0 160px;
919
+ padding: 8px 0;
920
+ border-right: 1px solid var(--pptx-border);
921
+ }
922
+ .pptxv-smartart-category {
923
+ display: block;
924
+ width: 100%;
925
+ padding: 6px 12px;
926
+ border: 0;
927
+ background: transparent;
928
+ color: inherit;
929
+ font: inherit;
930
+ font-size: 12px;
931
+ text-align: left;
932
+ cursor: pointer;
933
+ }
934
+ .pptxv-smartart-category:hover { background: var(--pptx-muted); }
935
+ .pptxv-smartart-category.is-active { background: var(--pptx-primary); color: #fff; }
936
+ .pptxv-smartart-gallery { flex: 1; min-width: 0; overflow-y: auto; padding: 12px; }
937
+ .pptxv-smartart-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
938
+ .pptxv-smartart-option {
939
+ display: flex;
940
+ min-width: 0;
941
+ padding: 8px;
942
+ align-items: center;
943
+ flex-direction: column;
944
+ gap: 4px;
945
+ border: 1px solid var(--pptx-border);
946
+ border-radius: var(--pptx-radius);
947
+ background: transparent;
948
+ color: inherit;
949
+ font: inherit;
950
+ cursor: pointer;
951
+ }
952
+ .pptxv-smartart-option:hover { background: color-mix(in srgb, var(--pptx-muted) 50%, transparent); }
953
+ .pptxv-smartart-option.is-selected {
954
+ border-color: var(--pptx-primary);
955
+ background: color-mix(in srgb, var(--pptx-primary) 20%, transparent);
956
+ }
957
+ .pptxv-smartart-option-preview {
958
+ display: grid;
959
+ width: 64px;
960
+ height: 48px;
961
+ place-items: center;
962
+ border-radius: var(--pptx-radius);
963
+ background: var(--pptx-muted);
964
+ color: var(--pptx-primary);
965
+ }
966
+ .pptxv-smartart-option-preview svg { width: 30px; height: 30px; }
967
+ .pptxv-smartart-option-label { font-size: 10px; line-height: 1.25; text-align: center; }
968
+ .pptxv-smartart-dialog-footer {
969
+ justify-content: flex-end;
970
+ gap: 8px;
971
+ border-top: 1px solid var(--pptx-border);
972
+ }
973
+ .pptxv-smartart-dialog-cancel,
974
+ .pptxv-smartart-dialog-insert {
975
+ padding: 6px 12px;
976
+ border: 0;
977
+ border-radius: var(--pptx-radius);
978
+ font: inherit;
979
+ font-size: 12px;
980
+ cursor: pointer;
981
+ }
982
+ .pptxv-smartart-dialog-cancel { background: var(--pptx-muted); color: inherit; }
983
+ .pptxv-smartart-dialog-insert { background: var(--pptx-primary); color: #fff; }
984
+ .pptxv-smartart-dialog-insert:disabled { background: var(--pptx-muted); color: var(--pptx-muted-foreground); cursor: not-allowed; }
985
+ .pptxv-smartart-dialog button:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
986
+
987
+ @media (max-width: 767px) {
988
+ .pptxv-smartart-dialog-layer { align-items: flex-end; }
989
+ .pptxv-smartart-dialog { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; }
990
+ .pptxv-smartart-categories { flex-basis: 120px; }
991
+ .pptxv-smartart-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
992
+ }
993
+
994
+
853
995
  /* ── Modal dialog (Share / Broadcast) ────────────────────────────────── */
854
996
  .pptxv-modal-backdrop {
855
997
  position: fixed;
@@ -1112,12 +1254,23 @@
1112
1254
  }
1113
1255
 
1114
1256
 
1115
- .pptxv-mobile-actions { display: none; }
1116
- @media (max-width: 720px) {
1257
+ .pptxv-mobile-toolbar, .pptxv-mobile-actions { display: none; }
1258
+ @media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {
1117
1259
  .pptxv-ribbon { display: none; }
1260
+ .pptxv-mobile-toolbar { position: relative; z-index: 20; display: flex; flex: none; align-items: center; gap: 4px; min-height: 52px; padding: max(env(safe-area-inset-top), 0px) 8px 4px; border-bottom: 1px solid var(--pptx-border); background: color-mix(in srgb, var(--pptx-muted) 55%, var(--pptx-card)); }
1261
+ .pptxv-mobile-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--pptx-foreground); touch-action: manipulation; }
1262
+ .pptxv-mobile-toolbar-btn:hover:not(:disabled) { background: var(--pptx-accent); }
1263
+ .pptxv-mobile-toolbar-btn:disabled { opacity: .4; }
1264
+ .pptxv-mobile-toolbar-btn svg { width: 20px; height: 20px; }
1265
+ .pptxv-mobile-toolbar-spacer { flex: 1; }
1266
+ .pptxv-mobile-present { color: var(--pptx-primary); }
1267
+ .pptxv-mobile-toolbar-collaboration { display: flex; }
1268
+ .pptxv-mobile-toolbar-collaboration[hidden], .pptxv-mobile-toolbar-collaboration:empty { display: none; }
1269
+ .pptxv-mobile-share { min-width: 44px; background: var(--pptx-primary); color: var(--pptx-primary-foreground); }
1118
1270
  .pptxv-mobile-actions { display: contents; }
1119
- .pptxv-mobile-actions > nav { position: absolute; z-index: 50; right: 0; bottom: 0; left: 0; display: flex; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--pptx-border); background: var(--pptx-card); }
1120
- .pptxv-mobile-actions > nav button { flex: 1; min-width: 44px; border: 0; background: transparent; color: var(--pptx-muted-foreground); font-size: 10px; touch-action: manipulation; }
1271
+ .pptxv-mobile-actions > nav { position: relative; z-index: 50; display: flex; flex: none; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--pptx-border); background: var(--pptx-card); }
1272
+ .pptxv-mobile-actions > nav button { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; border: 0; background: transparent; color: var(--pptx-muted-foreground); font-size: 10px; touch-action: manipulation; }
1273
+ .pptxv-mobile-actions > nav button svg { width: 20px; height: 20px; }
1121
1274
  .pptxv-mobile-actions > nav button[aria-pressed='true'] { color: var(--pptx-primary); }
1122
1275
  .pptxv-mobile-sheet-host { position: absolute; z-index: 48; inset: 0 0 64px; display: flex; align-items: end; }
1123
1276
  .pptxv-mobile-sheet-host[hidden] { display: none; }
@@ -1136,6 +1289,8 @@
1136
1289
  .pptxv-mobile-slide-list button { min-height: 44px; border: 1px solid var(--pptx-border); border-radius: 8px; background: var(--pptx-muted); color: inherit; }
1137
1290
  .pptxv-mobile-slide-list button.is-active { border-color: var(--pptx-primary); color: var(--pptx-primary); }
1138
1291
  .pptxv-mobile-sheet .pptxv-inspector { display: flex; width: 100%; max-height: 55dvh; border: 0; }
1139
- .pptxv-mobile-nav { bottom: calc(72px + env(safe-area-inset-bottom)); }
1292
+ .pptxv.pptxv-presenting .pptxv-mobile-toolbar,
1293
+ .pptxv.pptxv-presenting .pptxv-mobile-actions > nav,
1294
+ .pptxv.pptxv-presenting .pptxv-mobile-sheet-host { display: none; }
1140
1295
  }
1141
1296
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pptx-vanilla-viewer",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "Zero-framework PowerPoint viewer: render PPTX slides in the browser with plain DOM, no React/Vue/Angular required.",
5
5
  "keywords": [
6
6
  "javascript",