@jay-framework/aiditor 0.19.6 → 0.19.7

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.
@@ -23,11 +23,14 @@
23
23
  --harmony-shadow-sm: 0 1px 4px rgba(22, 45, 61, 0.06);
24
24
  --harmony-shadow-md: 0 4px 24px rgba(22, 45, 61, 0.1);
25
25
  --harmony-shadow-lg: 0 8px 40px rgba(22, 45, 61, 0.12);
26
+ --harmony-shadow-add-btn:
27
+ 0 1px 2px rgba(22, 45, 61, 0.05), 0 4px 14px rgba(22, 45, 61, 0.1),
28
+ 0 10px 28px rgba(22, 45, 61, 0.08);
26
29
  --harmony-radius-sm: 6px;
27
30
  --harmony-radius-md: 10px;
28
31
  --harmony-radius-lg: 16px;
29
32
  --harmony-radius-pill: 999px;
30
- --harmony-sidebar-width: 52px;
33
+ --harmony-sidebar-width: 72px;
31
34
  --harmony-global-bar-height: 52px;
32
35
  --harmony-secondary-bar-height: 44px;
33
36
  --harmony-font: "Madefor", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -180,18 +183,31 @@ body {
180
183
  flex: 1;
181
184
  display: flex;
182
185
  flex-direction: column;
186
+ align-items: center;
183
187
  min-height: 0;
184
- padding: 20px 28px 72px;
185
- overflow: hidden;
188
+ padding: 20px 40px 72px;
189
+ overflow-x: visible;
190
+ overflow-y: hidden;
191
+ }
192
+
193
+ .canvas-stage-shell {
194
+ position: relative;
195
+ flex: 1;
196
+ display: flex;
197
+ flex-direction: column;
198
+ min-height: 0;
199
+ max-width: 100%;
200
+ align-self: center;
186
201
  }
187
202
 
188
203
  .canvas-window {
204
+ position: relative;
189
205
  flex: 1;
190
206
  display: flex;
191
207
  flex-direction: column;
192
208
  min-height: 0;
193
- max-width: 1280px;
194
209
  width: 100%;
210
+ max-width: 100%;
195
211
  margin: 0 auto;
196
212
  background: var(--harmony-bg-surface);
197
213
  border: 1px solid var(--harmony-border);
@@ -199,6 +215,38 @@ body {
199
215
  box-shadow: var(--harmony-shadow-md);
200
216
  overflow: hidden;
201
217
  }
218
+ .stage-resize-handle {
219
+ position: absolute;
220
+ top: 50%;
221
+ z-index: 12;
222
+ width: 10px;
223
+ height: 56px;
224
+ border: 1px solid var(--harmony-border-strong);
225
+ border-radius: var(--harmony-radius-pill);
226
+ background: var(--harmony-bg-surface);
227
+ box-shadow: var(--harmony-shadow-sm);
228
+ cursor: col-resize;
229
+ touch-action: none;
230
+ }
231
+ .stage-resize-handle::before {
232
+ content: "";
233
+ position: absolute;
234
+ top: 50%;
235
+ left: 50%;
236
+ width: 2px;
237
+ height: 20px;
238
+ margin: -10px 0 0 -1px;
239
+ border-radius: 1px;
240
+ background: var(--harmony-border-strong);
241
+ }
242
+ .stage-resize-handle-left {
243
+ left: 0;
244
+ transform: translate(calc(-100% - 8px), -50%);
245
+ }
246
+ .stage-resize-handle-right {
247
+ right: 0;
248
+ transform: translate(calc(100% + 8px), -50%);
249
+ }
202
250
 
203
251
  .canvas-chrome {
204
252
  flex-shrink: 0;
@@ -384,6 +432,10 @@ body {
384
432
  opacity: 0.5;
385
433
  cursor: not-allowed;
386
434
  }
435
+ .aiditor-publish-btn {
436
+ min-width: 88px;
437
+ border-radius: var(--harmony-radius-sm);
438
+ }
387
439
 
388
440
  .harmony-btn-secondary {
389
441
  background: var(--harmony-bg-surface);
@@ -416,13 +468,233 @@ body {
416
468
  /* inherits harmony-btn-secondary */
417
469
  }
418
470
 
419
- .harmony-editor-body,
420
- .harmony-sidebar,
471
+ /* ── Harmony floating rail (Add + settings) ── */
472
+ .harmony-editor-body {
473
+ flex: 1;
474
+ display: flex;
475
+ min-height: 0;
476
+ overflow: hidden;
477
+ position: relative;
478
+ }
479
+ .harmony-float-rail {
480
+ position: absolute;
481
+ inset: 0;
482
+ z-index: 30;
483
+ pointer-events: none;
484
+ }
485
+ .harmony-add-btn {
486
+ position: absolute;
487
+ top: 16px;
488
+ left: 16px;
489
+ display: inline-flex;
490
+ align-items: center;
491
+ justify-content: center;
492
+ gap: 4px;
493
+ padding: 8px 14px;
494
+ background: var(--harmony-bg-surface);
495
+ color: var(--harmony-text);
496
+ border: 1px solid var(--harmony-border);
497
+ border-radius: var(--harmony-radius-md);
498
+ box-shadow: var(--harmony-shadow-add-btn);
499
+ font-size: 13px;
500
+ font-weight: 600;
501
+ font-family: var(--harmony-font);
502
+ cursor: pointer;
503
+ white-space: nowrap;
504
+ line-height: 1.2;
505
+ pointer-events: auto;
506
+ }
507
+ .harmony-add-btn:hover {
508
+ background: var(--harmony-bg-hover);
509
+ border-color: var(--harmony-border-strong);
510
+ box-shadow:
511
+ 0 2px 4px rgba(22, 45, 61, 0.06),
512
+ 0 6px 18px rgba(22, 45, 61, 0.12),
513
+ 0 12px 32px rgba(22, 45, 61, 0.09);
514
+ }
515
+ .harmony-add-btn:disabled {
516
+ opacity: 0.5;
517
+ cursor: not-allowed;
518
+ }
519
+ .harmony-add-btn-open {
520
+ background: var(--harmony-bg-hover);
521
+ border-color: var(--harmony-border-strong);
522
+ box-shadow:
523
+ inset 0 1px 2px rgba(22, 45, 61, 0.06),
524
+ 0 1px 2px rgba(22, 45, 61, 0.04);
525
+ }
526
+ .harmony-stage-icon-btn {
527
+ position: absolute;
528
+ left: 20px;
529
+ bottom: 20px;
530
+ z-index: 25;
531
+ display: flex;
532
+ align-items: center;
533
+ justify-content: center;
534
+ width: auto;
535
+ height: auto;
536
+ padding: 4px;
537
+ background: none;
538
+ border: none;
539
+ box-shadow: none;
540
+ color: var(--harmony-text);
541
+ font-size: 22px;
542
+ line-height: 1;
543
+ cursor: pointer;
544
+ opacity: 0.72;
545
+ }
546
+ .harmony-stage-icon-btn:hover {
547
+ opacity: 1;
548
+ color: var(--harmony-text);
549
+ }
550
+ .harmony-stage-icon-btn:disabled {
551
+ opacity: 0.35;
552
+ cursor: not-allowed;
553
+ }
554
+ .harmony-add-flyout-backdrop {
555
+ display: none;
556
+ position: fixed;
557
+ inset: 0;
558
+ z-index: 34;
559
+ background: transparent;
560
+ }
561
+ .harmony-add-flyout-backdrop.harmony-add-flyout-visible {
562
+ display: block;
563
+ }
564
+ .harmony-add-flyout {
565
+ display: none;
566
+ position: absolute;
567
+ top: 56px;
568
+ left: 16px;
569
+ z-index: 35;
570
+ flex-direction: column;
571
+ gap: 8px;
572
+ padding: 0;
573
+ background: transparent;
574
+ border: none;
575
+ box-shadow: none;
576
+ min-width: 0;
577
+ }
578
+ .harmony-add-flyout.harmony-add-flyout-visible {
579
+ display: flex;
580
+ }
581
+ .harmony-add-flyout-item {
582
+ display: flex;
583
+ align-items: center;
584
+ gap: 12px;
585
+ width: 220px;
586
+ padding: 10px 12px;
587
+ background: var(--harmony-bg-surface);
588
+ color: var(--harmony-text);
589
+ border: 1px solid var(--harmony-border);
590
+ border-radius: var(--harmony-radius-md);
591
+ box-shadow: var(--harmony-shadow-md);
592
+ cursor: pointer;
593
+ text-align: left;
594
+ font-family: var(--harmony-font);
595
+ }
596
+ .harmony-add-flyout-item:hover {
597
+ border-color: var(--harmony-border-strong);
598
+ box-shadow: var(--harmony-shadow-lg);
599
+ }
600
+ .harmony-add-flyout-thumb {
601
+ flex-shrink: 0;
602
+ width: 40px;
603
+ height: 40px;
604
+ border-radius: var(--harmony-radius-sm);
605
+ border: 1px solid var(--harmony-border);
606
+ background-size: 24px 24px;
607
+ background-position: center;
608
+ background-repeat: no-repeat;
609
+ }
610
+ .harmony-add-flyout-thumb-pages {
611
+ background-color: #e8f0ff;
612
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2' stroke='%23116dff' stroke-width='1.5'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' stroke='%23116dff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
613
+ }
614
+ .harmony-add-flyout-thumb-elements {
615
+ background-color: #fff4e8;
616
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5' stroke='%23f5a623' stroke-width='1.5'/%3E%3C/svg%3E");
617
+ }
618
+ .harmony-add-flyout-label {
619
+ font-size: 14px;
620
+ font-weight: 500;
621
+ color: var(--harmony-text);
622
+ }
623
+ .harmony-elements-panel {
624
+ position: absolute;
625
+ top: 0;
626
+ left: 0;
627
+ bottom: 0;
628
+ z-index: 32;
629
+ width: 280px;
630
+ display: flex;
631
+ flex-direction: column;
632
+ background: var(--harmony-bg-surface);
633
+ border-right: 1px solid var(--harmony-border);
634
+ box-shadow: var(--harmony-shadow-md);
635
+ }
636
+ .harmony-elements-panel-header {
637
+ flex-shrink: 0;
638
+ display: flex;
639
+ align-items: center;
640
+ justify-content: space-between;
641
+ gap: 8px;
642
+ padding: 14px 16px;
643
+ border-bottom: 1px solid var(--harmony-border);
644
+ }
645
+ .harmony-elements-panel-title {
646
+ font-size: 14px;
647
+ font-weight: 600;
648
+ color: var(--harmony-text);
649
+ }
650
+ .harmony-elements-panel-close {
651
+ background: none;
652
+ border: none;
653
+ color: var(--harmony-text-muted);
654
+ font-size: 20px;
655
+ cursor: pointer;
656
+ line-height: 1;
657
+ padding: 0 4px;
658
+ }
659
+ .harmony-elements-panel-close:hover {
660
+ color: var(--harmony-text);
661
+ }
662
+ .harmony-elements-panel-body {
663
+ flex: 1;
664
+ min-height: 0;
665
+ overflow-y: auto;
666
+ padding: 12px;
667
+ display: flex;
668
+ flex-direction: column;
669
+ gap: 8px;
670
+ }
671
+ .harmony-elements-panel-hint {
672
+ margin: 0;
673
+ font-size: 12px;
674
+ color: var(--harmony-text-secondary);
675
+ line-height: 1.45;
676
+ }
421
677
  .harmony-secondary-bar {
422
678
  display: none !important;
423
679
  }
424
680
  .harmony-workspace {
425
- display: contents;
681
+ flex: 1;
682
+ display: flex;
683
+ flex-direction: column;
684
+ min-width: 0;
685
+ min-height: 0;
686
+ overflow: hidden;
687
+ }
688
+ .sr-only {
689
+ position: absolute;
690
+ width: 1px;
691
+ height: 1px;
692
+ padding: 0;
693
+ margin: -1px;
694
+ overflow: hidden;
695
+ clip: rect(0, 0, 0, 0);
696
+ white-space: nowrap;
697
+ border: 0;
426
698
  }
427
699
  .preview-visual-tools {
428
700
  display: flex;
@@ -468,17 +740,31 @@ body {
468
740
  flex: 1;
469
741
  display: flex;
470
742
  flex-direction: column;
743
+ align-items: center;
471
744
  min-height: 0;
472
- padding: 20px 28px 72px;
745
+ padding: 20px 40px 72px;
473
746
  gap: 10px;
474
- overflow: hidden;
747
+ overflow-x: visible;
748
+ overflow-y: hidden;
749
+ }
750
+ .canvas-stage-shell {
751
+ position: relative;
752
+ flex: 1;
753
+ display: flex;
754
+ flex-direction: column;
755
+ min-height: 0;
756
+ max-width: 100%;
757
+ align-self: center;
475
758
  }
476
759
  .harmony-canvas-window,
477
760
  .canvas-window {
761
+ position: relative;
478
762
  flex: 1;
479
763
  display: flex;
480
764
  flex-direction: column;
481
765
  min-height: 0;
766
+ width: 100%;
767
+ max-width: 100%;
482
768
  background: var(--harmony-bg-surface);
483
769
  border: 1px solid var(--harmony-border);
484
770
  border-radius: var(--harmony-radius-lg);
@@ -563,16 +849,6 @@ body {
563
849
  border: none;
564
850
  display: block;
565
851
  }
566
- .preview-frame-tablet {
567
- align-self: center;
568
- width: 768px;
569
- max-width: 100%;
570
- }
571
- .preview-frame-mobile {
572
- align-self: center;
573
- width: 390px;
574
- max-width: 100%;
575
- }
576
852
 
577
853
  /* ── Visual annotations ── */
578
854
  .visual-overlay {
@@ -742,22 +1018,21 @@ body {
742
1018
  color: var(--harmony-danger);
743
1019
  border-color: var(--harmony-danger);
744
1020
  }
745
- .visual-annotation-run {
746
- background: var(--harmony-primary);
747
- color: #fff;
748
- border: none;
1021
+ .visual-annotation-minimize {
1022
+ display: inline-flex;
1023
+ align-items: center;
1024
+ justify-content: center;
1025
+ background: transparent;
1026
+ color: var(--harmony-text-muted);
1027
+ border: 1px solid var(--harmony-border);
749
1028
  border-radius: var(--harmony-radius-sm);
750
- padding: 4px 10px;
751
- font-size: 11px;
752
- font-weight: 600;
1029
+ padding: 4px 6px;
753
1030
  cursor: pointer;
1031
+ line-height: 0;
754
1032
  }
755
- .visual-annotation-run:hover {
756
- background: var(--harmony-primary-hover);
757
- }
758
- .visual-annotation-run:disabled {
759
- opacity: 0.45;
760
- cursor: not-allowed;
1033
+ .visual-annotation-minimize:hover {
1034
+ color: var(--harmony-primary);
1035
+ border-color: var(--harmony-primary);
761
1036
  }
762
1037
  .visual-annotation-instruction {
763
1038
  width: 100%;
@@ -865,7 +1140,6 @@ body {
865
1140
  }
866
1141
 
867
1142
  .video-record-btn {
868
- border-color: var(--harmony-primary) !important;
869
1143
  color: var(--harmony-primary) !important;
870
1144
  }
871
1145
  .video-record-active {
@@ -1447,14 +1721,19 @@ body {
1447
1721
  flex: 1;
1448
1722
  }
1449
1723
 
1450
- /* ── Add Page slideover ── */
1724
+ /* ── Add Page modal (Harmony-style centered dialog) ── */
1451
1725
  .add-page-overlay {
1452
1726
  position: fixed;
1453
1727
  inset: 0;
1454
1728
  z-index: 300;
1455
- background: rgba(22, 45, 61, 0.35);
1729
+ background: rgba(255, 255, 255, 0.72);
1730
+ backdrop-filter: blur(14px);
1731
+ -webkit-backdrop-filter: blur(14px);
1456
1732
  display: flex;
1457
- justify-content: flex-end;
1733
+ align-items: center;
1734
+ justify-content: center;
1735
+ padding: 40px 48px;
1736
+ box-sizing: border-box;
1458
1737
  }
1459
1738
  .project-settings-overlay {
1460
1739
  position: fixed;
@@ -1467,89 +1746,456 @@ body {
1467
1746
  padding: 24px;
1468
1747
  box-sizing: border-box;
1469
1748
  }
1470
- .project-settings-dialog {
1749
+ .add-menu-picker-overlay {
1750
+ position: fixed;
1751
+ inset: 0;
1752
+ z-index: 360;
1753
+ background: rgba(22, 45, 61, 0.45);
1754
+ display: flex;
1755
+ align-items: center;
1756
+ justify-content: center;
1757
+ padding: 24px;
1758
+ box-sizing: border-box;
1759
+ }
1760
+ .add-menu-picker-dialog {
1471
1761
  background: var(--harmony-bg-surface);
1472
1762
  border: 1px solid var(--harmony-border);
1473
1763
  border-radius: var(--harmony-radius-lg);
1474
- width: min(520px, 100%);
1764
+ width: min(480px, 100%);
1475
1765
  max-height: min(80vh, 640px);
1476
1766
  display: flex;
1477
1767
  flex-direction: column;
1478
1768
  overflow: hidden;
1479
1769
  box-shadow: var(--harmony-shadow-lg);
1480
1770
  }
1481
- .project-settings-header {
1771
+ .add-menu-picker-dialog--browse {
1772
+ width: min(720px, 100%);
1773
+ max-height: min(85vh, 720px);
1774
+ }
1775
+ .add-menu-picker-header {
1482
1776
  display: flex;
1483
1777
  align-items: center;
1484
- justify-content: space-between;
1778
+ gap: 8px;
1485
1779
  padding: 14px 16px;
1486
1780
  border-bottom: 1px solid var(--harmony-border);
1487
1781
  background: var(--harmony-bg-subtle);
1488
1782
  }
1489
- .project-settings-title {
1783
+ .add-menu-picker-title {
1784
+ flex: 1;
1490
1785
  font-size: 14px;
1491
1786
  font-weight: 600;
1492
1787
  color: var(--harmony-text);
1493
1788
  }
1494
- .project-settings-close {
1789
+ .add-menu-picker-back,
1790
+ .add-menu-picker-close {
1495
1791
  background: none;
1496
1792
  border: none;
1497
1793
  color: var(--harmony-text-muted);
1498
- font-size: 20px;
1794
+ font-size: 13px;
1499
1795
  cursor: pointer;
1500
1796
  line-height: 1;
1797
+ padding: 4px 6px;
1501
1798
  }
1502
- .project-settings-body {
1503
- padding: 14px 16px;
1799
+ .add-menu-picker-close {
1800
+ font-size: 20px;
1801
+ }
1802
+ .add-menu-picker-back:hover,
1803
+ .add-menu-picker-close:hover {
1804
+ color: var(--harmony-text);
1805
+ }
1806
+ .add-menu-picker-body {
1807
+ padding: 12px 16px 16px;
1504
1808
  overflow: auto;
1505
1809
  display: flex;
1506
1810
  flex-direction: column;
1507
- gap: 12px;
1811
+ gap: 6px;
1812
+ flex: 1;
1813
+ min-height: 0;
1508
1814
  }
1509
- .add-page-slideover {
1510
- width: min(480px, 100vw);
1511
- height: 100%;
1815
+ .add-menu-picker-hint {
1816
+ font-size: 12px;
1817
+ color: var(--harmony-text-muted);
1818
+ margin: 0;
1819
+ }
1820
+ .add-menu-picker-plugin-btn,
1821
+ .add-menu-picker-component-card {
1822
+ display: flex;
1823
+ flex-direction: column;
1824
+ align-items: flex-start;
1825
+ gap: 2px;
1826
+ width: 100%;
1827
+ text-align: left;
1828
+ padding: 10px 12px;
1829
+ border: 1px solid var(--harmony-border);
1830
+ border-radius: var(--harmony-radius-md);
1512
1831
  background: var(--harmony-bg-surface);
1513
- border-left: 1px solid var(--harmony-border);
1832
+ color: var(--harmony-text);
1833
+ font-family: var(--harmony-font);
1834
+ font-size: 13px;
1835
+ cursor: pointer;
1836
+ }
1837
+ .add-menu-picker-plugin-btn:hover,
1838
+ .add-menu-picker-component-card:hover {
1839
+ background: var(--harmony-bg-hover);
1840
+ border-color: var(--harmony-border-strong);
1841
+ }
1842
+ .add-menu-picker-plugin-meta,
1843
+ .add-menu-picker-component-sub {
1844
+ font-size: 11px;
1845
+ color: var(--harmony-text-muted);
1846
+ }
1847
+ .add-menu-picker-browse {
1848
+ flex: 1;
1849
+ min-height: 0;
1514
1850
  display: flex;
1515
1851
  flex-direction: column;
1516
- box-shadow: var(--harmony-shadow-lg);
1517
- position: relative;
1852
+ gap: 10px;
1518
1853
  }
1519
- .add-page-header {
1854
+ .add-menu-picker-plugin-tabs {
1855
+ display: flex;
1856
+ flex-wrap: wrap;
1857
+ gap: 6px;
1858
+ }
1859
+ .add-menu-picker-plugin-tab {
1860
+ padding: 6px 12px;
1861
+ border: 1px solid var(--harmony-border);
1862
+ border-radius: 999px;
1863
+ background: var(--harmony-bg-surface);
1864
+ color: var(--harmony-text-muted);
1865
+ font-family: var(--harmony-font);
1866
+ font-size: 12px;
1867
+ cursor: pointer;
1868
+ }
1869
+ .add-menu-picker-plugin-tab:hover {
1870
+ background: var(--harmony-bg-hover);
1871
+ color: var(--harmony-text);
1872
+ }
1873
+ .add-menu-picker-plugin-tab--selected {
1874
+ background: var(--harmony-bg-subtle);
1875
+ color: var(--harmony-text);
1876
+ font-weight: 600;
1877
+ border-color: var(--harmony-border-strong);
1878
+ }
1879
+ .add-menu-picker-browse-layout {
1880
+ display: flex;
1881
+ gap: 0;
1882
+ flex: 1;
1883
+ min-height: 0;
1884
+ border: 1px solid var(--harmony-border);
1885
+ border-radius: var(--harmony-radius-md);
1886
+ overflow: hidden;
1887
+ }
1888
+ .add-menu-picker-sidebar {
1889
+ display: flex;
1890
+ flex-direction: column;
1891
+ width: 168px;
1892
+ flex-shrink: 0;
1893
+ border-right: 1px solid var(--harmony-border);
1894
+ background: var(--harmony-bg-subtle);
1895
+ overflow-y: auto;
1896
+ padding: 8px 6px;
1897
+ gap: 2px;
1898
+ }
1899
+ .add-menu-picker-category-btn {
1900
+ display: flex;
1901
+ align-items: center;
1902
+ justify-content: space-between;
1903
+ gap: 8px;
1904
+ width: 100%;
1905
+ text-align: left;
1906
+ padding: 8px 10px;
1907
+ border: none;
1908
+ border-radius: var(--harmony-radius-md);
1909
+ background: transparent;
1910
+ color: var(--harmony-text);
1911
+ font-family: var(--harmony-font);
1912
+ font-size: 13px;
1913
+ cursor: pointer;
1914
+ }
1915
+ .add-menu-picker-category-btn:hover {
1916
+ background: var(--harmony-bg-hover);
1917
+ }
1918
+ .add-menu-picker-category-btn--selected {
1919
+ background: var(--harmony-bg-surface);
1920
+ font-weight: 600;
1921
+ box-shadow: inset 0 0 0 1px var(--harmony-border);
1922
+ }
1923
+ .add-menu-picker-category-count {
1924
+ font-size: 11px;
1925
+ color: var(--harmony-text-muted);
1926
+ }
1927
+ .add-menu-picker-main {
1928
+ flex: 1;
1929
+ min-width: 0;
1930
+ display: flex;
1931
+ flex-direction: column;
1932
+ padding: 14px 16px 16px;
1933
+ overflow: hidden;
1934
+ }
1935
+ .add-menu-picker-main-title {
1936
+ margin: 0 0 12px;
1937
+ font-size: 18px;
1938
+ font-weight: 600;
1939
+ color: var(--harmony-text);
1940
+ }
1941
+ .add-menu-picker-subcategories {
1942
+ display: flex;
1943
+ flex-wrap: nowrap;
1944
+ gap: 8px;
1945
+ overflow-x: auto;
1946
+ flex: 1;
1947
+ min-width: 0;
1948
+ scrollbar-width: none;
1949
+ -webkit-overflow-scrolling: touch;
1950
+ }
1951
+ .add-menu-picker-subcategories::-webkit-scrollbar {
1952
+ display: none;
1953
+ }
1954
+ .add-menu-picker-subcategory-scroll {
1955
+ display: flex;
1956
+ align-items: center;
1957
+ gap: 6px;
1958
+ margin-bottom: 14px;
1959
+ min-width: 0;
1960
+ }
1961
+ .add-menu-picker-subcategory-scroll-btn {
1962
+ flex-shrink: 0;
1963
+ width: 28px;
1964
+ height: 28px;
1965
+ border: 1px solid var(--harmony-border);
1966
+ border-radius: var(--harmony-radius-sm);
1967
+ background: var(--harmony-bg-surface);
1968
+ color: var(--harmony-text-muted);
1969
+ font-size: 16px;
1970
+ line-height: 1;
1971
+ cursor: pointer;
1972
+ padding: 0;
1973
+ }
1974
+ .add-menu-picker-subcategory-scroll-btn:hover {
1975
+ color: var(--harmony-text);
1976
+ background: var(--harmony-bg-hover);
1977
+ }
1978
+ .add-menu-picker-subcategory-btn {
1979
+ display: inline-flex;
1980
+ align-items: center;
1981
+ gap: 6px;
1982
+ flex-shrink: 0;
1983
+ padding: 6px 12px;
1984
+ border: none;
1985
+ border-radius: 999px;
1986
+ background: transparent;
1987
+ color: var(--harmony-text-muted);
1988
+ font-family: var(--harmony-font);
1989
+ font-size: 13px;
1990
+ cursor: pointer;
1991
+ white-space: nowrap;
1992
+ }
1993
+ .add-menu-picker-subcategory-btn:hover {
1994
+ color: var(--harmony-text);
1995
+ background: var(--harmony-bg-hover);
1996
+ }
1997
+ .add-menu-picker-subcategory-btn--selected {
1998
+ background: var(--harmony-bg-subtle);
1999
+ color: var(--harmony-text);
2000
+ font-weight: 600;
2001
+ box-shadow: inset 0 0 0 1px var(--harmony-border);
2002
+ }
2003
+ .add-menu-picker-subcategory-count {
2004
+ font-size: 12px;
2005
+ color: var(--harmony-text-muted);
2006
+ font-weight: 400;
2007
+ }
2008
+ .add-menu-picker-search-row {
1520
2009
  display: flex;
1521
2010
  align-items: center;
1522
2011
  gap: 8px;
2012
+ margin-bottom: 10px;
2013
+ min-width: 0;
2014
+ }
2015
+ .add-menu-picker-search-field {
2016
+ flex: 1;
2017
+ min-width: 0;
2018
+ display: flex;
2019
+ align-items: center;
2020
+ gap: 8px;
2021
+ padding: 8px 12px;
2022
+ border: 1px solid var(--harmony-border);
2023
+ border-radius: 999px;
2024
+ background: var(--harmony-bg-surface);
2025
+ }
2026
+ .add-menu-picker-search-icon {
2027
+ color: var(--harmony-text-muted);
2028
+ font-size: 14px;
2029
+ line-height: 1;
2030
+ flex-shrink: 0;
2031
+ }
2032
+ .add-menu-picker-search-input {
2033
+ flex: 1;
2034
+ min-width: 0;
2035
+ border: none;
2036
+ background: transparent;
2037
+ color: var(--harmony-text);
2038
+ font-family: var(--harmony-font);
2039
+ font-size: 13px;
2040
+ outline: none;
2041
+ }
2042
+ .add-menu-picker-search-input::placeholder {
2043
+ color: var(--harmony-text-muted);
2044
+ }
2045
+ .add-menu-picker-search-clear {
2046
+ flex-shrink: 0;
2047
+ background: none;
2048
+ border: none;
2049
+ color: var(--harmony-text-muted);
2050
+ font-size: 16px;
2051
+ line-height: 1;
2052
+ cursor: pointer;
2053
+ padding: 0 2px;
2054
+ }
2055
+ .add-menu-picker-search-clear:hover {
2056
+ color: var(--harmony-text);
2057
+ }
2058
+ .add-menu-picker-search-summary {
2059
+ margin: 0 0 12px;
2060
+ font-size: 13px;
2061
+ color: var(--harmony-text-muted);
2062
+ }
2063
+ .add-menu-picker-browse-layout--search {
2064
+ border: none;
2065
+ }
2066
+ .add-menu-picker-browse-layout--search .add-menu-picker-main {
2067
+ padding-top: 0;
2068
+ }
2069
+ .add-menu-picker-browse-content {
2070
+ display: grid;
2071
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
2072
+ gap: 10px;
2073
+ overflow-y: auto;
2074
+ flex: 1;
2075
+ min-height: 0;
2076
+ align-content: start;
2077
+ }
2078
+ .add-menu-picker-browse-row {
2079
+ display: contents;
2080
+ }
2081
+ .add-menu-picker-section-title {
2082
+ margin: 8px 0 4px;
2083
+ font-size: 13px;
2084
+ font-weight: 600;
2085
+ color: var(--harmony-text-muted);
2086
+ text-transform: uppercase;
2087
+ letter-spacing: 0.04em;
2088
+ grid-column: 1 / -1;
2089
+ }
2090
+ .add-menu-picker-browse-content .add-menu-picker-component-card {
2091
+ width: auto;
2092
+ }
2093
+ .add-menu-picker-component-card {
2094
+ min-height: 72px;
2095
+ }
2096
+ .add-menu-picker-component-title {
2097
+ font-weight: 500;
2098
+ overflow: hidden;
2099
+ text-overflow: ellipsis;
2100
+ white-space: nowrap;
2101
+ max-width: 100%;
2102
+ }
2103
+ .add-menu-picker-component-card--browse-only {
2104
+ opacity: 0.6;
2105
+ cursor: default;
2106
+ }
2107
+ .project-settings-dialog {
2108
+ background: var(--harmony-bg-surface);
2109
+ border: 1px solid var(--harmony-border);
2110
+ border-radius: var(--harmony-radius-lg);
2111
+ width: min(520px, 100%);
2112
+ max-height: min(80vh, 640px);
2113
+ display: flex;
2114
+ flex-direction: column;
2115
+ overflow: hidden;
2116
+ box-shadow: var(--harmony-shadow-lg);
2117
+ }
2118
+ .project-settings-header {
2119
+ display: flex;
2120
+ align-items: center;
2121
+ justify-content: space-between;
1523
2122
  padding: 14px 16px;
1524
2123
  border-bottom: 1px solid var(--harmony-border);
1525
- flex-shrink: 0;
1526
2124
  background: var(--harmony-bg-subtle);
1527
2125
  }
1528
- .add-page-title {
2126
+ .project-settings-title {
1529
2127
  font-size: 14px;
1530
2128
  font-weight: 600;
1531
2129
  color: var(--harmony-text);
2130
+ }
2131
+ .project-settings-close {
2132
+ background: none;
2133
+ border: none;
2134
+ color: var(--harmony-text-muted);
2135
+ font-size: 20px;
2136
+ cursor: pointer;
2137
+ line-height: 1;
2138
+ }
2139
+ .project-settings-body {
2140
+ padding: 14px 16px;
2141
+ overflow: auto;
2142
+ display: flex;
2143
+ flex-direction: column;
2144
+ gap: 12px;
2145
+ }
2146
+ .add-page-slideover {
2147
+ width: min(920px, 100%);
2148
+ max-height: min(88vh, 860px);
2149
+ height: auto;
2150
+ background: var(--harmony-bg-surface);
2151
+ border: 1px solid var(--harmony-border);
2152
+ border-radius: var(--harmony-radius-lg);
2153
+ display: flex;
2154
+ flex-direction: column;
2155
+ box-shadow:
2156
+ 0 24px 80px rgba(22, 45, 61, 0.16),
2157
+ 0 8px 24px rgba(22, 45, 61, 0.08);
2158
+ position: relative;
2159
+ overflow: hidden;
2160
+ }
2161
+ .add-page-header {
2162
+ display: flex;
2163
+ align-items: center;
2164
+ gap: 12px;
2165
+ padding: 20px 28px;
2166
+ border-bottom: 1px solid var(--harmony-border);
2167
+ flex-shrink: 0;
2168
+ background: var(--harmony-bg-surface);
2169
+ }
2170
+ .add-page-title {
2171
+ font-size: 20px;
2172
+ font-weight: 700;
2173
+ color: var(--harmony-text);
1532
2174
  flex: 1;
2175
+ letter-spacing: -0.02em;
1533
2176
  }
1534
2177
  .add-page-close {
1535
2178
  background: none;
1536
2179
  border: none;
1537
2180
  color: var(--harmony-text-muted);
1538
- font-size: 20px;
2181
+ font-size: 22px;
1539
2182
  cursor: pointer;
1540
2183
  line-height: 1;
1541
- padding: 0 4px;
2184
+ padding: 4px;
2185
+ border-radius: var(--harmony-radius-sm);
1542
2186
  }
1543
2187
  .add-page-close:hover {
1544
2188
  color: var(--harmony-text);
2189
+ background: var(--harmony-bg-hover);
1545
2190
  }
1546
2191
  .add-page-body {
1547
2192
  flex: 1;
1548
2193
  overflow: auto;
1549
- padding: 14px 16px;
2194
+ padding: 24px 28px;
1550
2195
  display: flex;
1551
2196
  flex-direction: column;
1552
- gap: 16px;
2197
+ gap: 20px;
2198
+ min-height: 0;
1553
2199
  }
1554
2200
  .add-page-section-label {
1555
2201
  font-size: 11px;
@@ -1609,11 +2255,13 @@ body {
1609
2255
  position: absolute;
1610
2256
  inset: 0;
1611
2257
  z-index: 10;
1612
- background: rgba(22, 45, 61, 0.4);
2258
+ background: rgba(255, 255, 255, 0.6);
2259
+ backdrop-filter: blur(8px);
2260
+ -webkit-backdrop-filter: blur(8px);
1613
2261
  display: flex;
1614
2262
  align-items: center;
1615
2263
  justify-content: center;
1616
- padding: 16px;
2264
+ padding: 24px;
1617
2265
  box-sizing: border-box;
1618
2266
  }
1619
2267
  .add-page-brief-fill-panel {
@@ -1865,6 +2513,16 @@ body {
1865
2513
  .add-menu-panel .add-page-plugin-chips {
1866
2514
  margin-top: 0;
1867
2515
  }
2516
+ .annotation-add-menu-panel .add-page-plugin-chips,
2517
+ .add-menu-panel .add-page-plugin-chips {
2518
+ align-items: stretch;
2519
+ }
2520
+ .annotation-add-menu-panel .add-page-plugin-chip,
2521
+ .add-menu-panel .add-page-plugin-chip {
2522
+ width: 100%;
2523
+ max-width: 100%;
2524
+ box-sizing: border-box;
2525
+ }
1868
2526
  .add-menu-panel .add-page-btn,
1869
2527
  .add-menu-panel .add-page-manage-link,
1870
2528
  .add-menu-panel .add-page-hint,
@@ -1981,9 +2639,26 @@ body {
1981
2639
  padding: 2px 6px;
1982
2640
  font-size: 10px;
1983
2641
  color: var(--harmony-text-secondary);
1984
- display: flex;
2642
+ display: inline-flex;
1985
2643
  align-items: center;
1986
2644
  gap: 4px;
2645
+ max-width: 100%;
2646
+ min-width: 0;
2647
+ }
2648
+ .add-page-plugin-chip-text {
2649
+ flex: 1 1 auto;
2650
+ min-width: 0;
2651
+ overflow: hidden;
2652
+ text-overflow: ellipsis;
2653
+ white-space: nowrap;
2654
+ }
2655
+ .add-page-plugin-chip-sub {
2656
+ color: var(--harmony-text-muted);
2657
+ margin-left: 4px;
2658
+ }
2659
+ .add-page-plugin-chip-remove,
2660
+ .add-page-plugin-chip-at {
2661
+ flex-shrink: 0;
1987
2662
  }
1988
2663
  .add-page-plugin-chip-remove {
1989
2664
  background: none;
@@ -2191,15 +2866,19 @@ body {
2191
2866
  }
2192
2867
  .add-page-footer {
2193
2868
  display: flex;
2194
- gap: 8px;
2195
- padding: 12px 16px;
2869
+ gap: 12px;
2870
+ justify-content: flex-end;
2871
+ padding: 16px 28px 20px;
2196
2872
  border-top: 1px solid var(--harmony-border);
2197
2873
  flex-shrink: 0;
2198
- background: var(--harmony-bg-subtle);
2874
+ background: var(--harmony-bg-surface);
2875
+ }
2876
+ .add-page-footer .add-page-btn {
2877
+ flex: 0 0 auto;
2878
+ min-width: 120px;
2199
2879
  }
2200
2880
  .add-page-btn {
2201
- flex: 1;
2202
- padding: 10px;
2881
+ padding: 10px 20px;
2203
2882
  border-radius: var(--harmony-radius-pill);
2204
2883
  font-size: 13px;
2205
2884
  font-weight: 600;