@jay-framework/aiditor 0.19.7 → 0.21.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/actions/cancel-agent-task.jay-action +1 -0
- package/dist/actions/cancel-agent-task.jay-action.d.ts +1 -0
- package/dist/actions/get-contract-inspector-tags.jay-action +9 -0
- package/dist/actions/get-contract-inspector-tags.jay-action.d.ts +6 -0
- package/dist/actions/get-page-assets.jay-action +10 -0
- package/dist/actions/get-page-assets.jay-action.d.ts +7 -0
- package/dist/actions/get-page-meta.jay-action +9 -0
- package/dist/actions/get-page-meta.jay-action.d.ts +6 -0
- package/dist/actions/save-page-assets.jay-action +8 -0
- package/dist/actions/save-page-assets.jay-action.d.ts +5 -0
- package/dist/actions/save-page-meta.jay-action +8 -0
- package/dist/actions/save-page-meta.jay-action.d.ts +5 -0
- package/dist/actions/sync-detected-page-assets.jay-action +12 -0
- package/dist/actions/sync-detected-page-assets.jay-action.d.ts +10 -0
- package/dist/agent-kit-template/plugin/aiditor-add-menu.md +24 -0
- package/dist/index.client.d.ts +331 -43
- package/dist/index.client.js +9987 -2675
- package/dist/index.d.ts +137 -8
- package/dist/index.js +799 -80
- package/dist/pages/aiditor/page.css +1139 -71
- package/dist/pages/aiditor/page.jay-html +2794 -651
- package/dist/pages/aiditor/page.jay-html.d.ts +1039 -0
- package/package.json +18 -9
- package/plugin.yaml +12 -0
|
@@ -152,6 +152,7 @@
|
|
|
152
152
|
flex-direction: column;
|
|
153
153
|
align-items: center;
|
|
154
154
|
min-height: 0;
|
|
155
|
+
position: relative;
|
|
155
156
|
padding: 20px 40px 72px;
|
|
156
157
|
overflow-x: visible;
|
|
157
158
|
overflow-y: hidden;
|
|
@@ -462,19 +463,31 @@
|
|
|
462
463
|
text-transform: uppercase;
|
|
463
464
|
color: var(--harmony-text-muted);
|
|
464
465
|
}
|
|
465
|
-
.harmony-routes-panel-section-title + .harmony-routes-panel-item,
|
|
466
|
-
.harmony-routes-panel-item + .harmony-routes-panel-section-title {
|
|
466
|
+
.harmony-routes-panel-section-title + .harmony-routes-panel-item-row,
|
|
467
|
+
.harmony-routes-panel-item-row + .harmony-routes-panel-section-title {
|
|
467
468
|
margin-top: 4px;
|
|
468
469
|
padding-top: 14px;
|
|
469
470
|
border-top: 1px solid var(--harmony-border);
|
|
470
471
|
}
|
|
472
|
+
.harmony-routes-panel-item-row {
|
|
473
|
+
display: flex;
|
|
474
|
+
align-items: center;
|
|
475
|
+
width: 100%;
|
|
476
|
+
}
|
|
477
|
+
.harmony-routes-panel-item-row:hover {
|
|
478
|
+
background: var(--harmony-bg-hover);
|
|
479
|
+
}
|
|
480
|
+
.harmony-routes-panel-item-row--selected {
|
|
481
|
+
background: var(--harmony-primary-soft);
|
|
482
|
+
}
|
|
471
483
|
.harmony-routes-panel-item {
|
|
472
484
|
display: flex;
|
|
473
485
|
align-items: center;
|
|
474
486
|
gap: 8px;
|
|
475
|
-
|
|
487
|
+
flex: 1;
|
|
488
|
+
min-width: 0;
|
|
476
489
|
box-sizing: border-box;
|
|
477
|
-
padding: 9px 16px;
|
|
490
|
+
padding: 9px 8px 9px 16px;
|
|
478
491
|
border: none;
|
|
479
492
|
background: transparent;
|
|
480
493
|
color: var(--harmony-text);
|
|
@@ -484,10 +497,9 @@
|
|
|
484
497
|
cursor: pointer;
|
|
485
498
|
}
|
|
486
499
|
.harmony-routes-panel-item:hover {
|
|
487
|
-
background:
|
|
500
|
+
background: transparent;
|
|
488
501
|
}
|
|
489
502
|
.harmony-routes-panel-item--selected {
|
|
490
|
-
background: var(--harmony-primary-soft);
|
|
491
503
|
color: var(--harmony-primary);
|
|
492
504
|
font-weight: 600;
|
|
493
505
|
}
|
|
@@ -505,6 +517,35 @@
|
|
|
505
517
|
text-overflow: ellipsis;
|
|
506
518
|
white-space: nowrap;
|
|
507
519
|
}
|
|
520
|
+
.harmony-routes-panel-open-tab {
|
|
521
|
+
flex-shrink: 0;
|
|
522
|
+
display: inline-flex;
|
|
523
|
+
align-items: center;
|
|
524
|
+
justify-content: center;
|
|
525
|
+
width: 32px;
|
|
526
|
+
height: 32px;
|
|
527
|
+
margin-right: 8px;
|
|
528
|
+
padding: 0;
|
|
529
|
+
border: none;
|
|
530
|
+
border-radius: var(--harmony-radius-sm);
|
|
531
|
+
background: transparent;
|
|
532
|
+
color: var(--harmony-text-muted);
|
|
533
|
+
cursor: pointer;
|
|
534
|
+
transition: color 0.12s ease, background 0.12s ease;
|
|
535
|
+
}
|
|
536
|
+
.harmony-routes-panel-open-tab:hover {
|
|
537
|
+
color: var(--harmony-text);
|
|
538
|
+
background: transparent;
|
|
539
|
+
}
|
|
540
|
+
.harmony-routes-panel-open-tab:focus-visible {
|
|
541
|
+
outline: 2px solid var(--harmony-primary);
|
|
542
|
+
outline-offset: 1px;
|
|
543
|
+
}
|
|
544
|
+
.harmony-routes-panel-open-tab-icon {
|
|
545
|
+
display: block;
|
|
546
|
+
width: 18px;
|
|
547
|
+
height: 18px;
|
|
548
|
+
}
|
|
508
549
|
.harmony-routes-panel-empty {
|
|
509
550
|
margin: 0;
|
|
510
551
|
padding: 16px;
|
|
@@ -513,6 +554,135 @@
|
|
|
513
554
|
text-align: center;
|
|
514
555
|
}
|
|
515
556
|
|
|
557
|
+
/* Floating instance switcher (Harmony dynamic-page toolbar) */
|
|
558
|
+
.harmony-instance-switcher {
|
|
559
|
+
position: absolute;
|
|
560
|
+
z-index: 55;
|
|
561
|
+
display: flex;
|
|
562
|
+
align-items: stretch;
|
|
563
|
+
max-width: min(420px, calc(100% - 24px));
|
|
564
|
+
background: var(--harmony-bg-surface);
|
|
565
|
+
border: 1px solid var(--harmony-border);
|
|
566
|
+
border-radius: 999px;
|
|
567
|
+
box-shadow: 0 4px 16px rgba(22, 45, 61, 0.12), 0 1px 3px rgba(22, 45, 61, 0.08);
|
|
568
|
+
pointer-events: auto;
|
|
569
|
+
}
|
|
570
|
+
.harmony-instance-switcher-drag {
|
|
571
|
+
flex-shrink: 0;
|
|
572
|
+
display: flex;
|
|
573
|
+
align-items: center;
|
|
574
|
+
justify-content: center;
|
|
575
|
+
width: 34px;
|
|
576
|
+
border: none;
|
|
577
|
+
border-right: 1px solid var(--harmony-border);
|
|
578
|
+
border-radius: 999px 0 0 999px;
|
|
579
|
+
background: transparent;
|
|
580
|
+
color: var(--harmony-text-muted);
|
|
581
|
+
cursor: grab;
|
|
582
|
+
padding: 0;
|
|
583
|
+
touch-action: none;
|
|
584
|
+
user-select: none;
|
|
585
|
+
}
|
|
586
|
+
.harmony-instance-switcher-drag:active { cursor: grabbing; }
|
|
587
|
+
.harmony-instance-switcher-drag-dots {
|
|
588
|
+
display: grid;
|
|
589
|
+
grid-template-columns: repeat(2, 4px);
|
|
590
|
+
gap: 3px;
|
|
591
|
+
}
|
|
592
|
+
.harmony-instance-switcher-drag-dots span {
|
|
593
|
+
width: 4px;
|
|
594
|
+
height: 4px;
|
|
595
|
+
border-radius: 50%;
|
|
596
|
+
background: currentColor;
|
|
597
|
+
opacity: 0.55;
|
|
598
|
+
}
|
|
599
|
+
.harmony-instance-switcher-main {
|
|
600
|
+
display: flex;
|
|
601
|
+
align-items: center;
|
|
602
|
+
min-width: 0;
|
|
603
|
+
gap: 10px;
|
|
604
|
+
padding: 8px 12px 8px 10px;
|
|
605
|
+
}
|
|
606
|
+
.harmony-instance-switcher-label {
|
|
607
|
+
flex: 1;
|
|
608
|
+
min-width: 0;
|
|
609
|
+
overflow: hidden;
|
|
610
|
+
text-overflow: ellipsis;
|
|
611
|
+
white-space: nowrap;
|
|
612
|
+
font-size: 13px;
|
|
613
|
+
font-weight: 500;
|
|
614
|
+
color: var(--harmony-text);
|
|
615
|
+
}
|
|
616
|
+
.harmony-instance-switcher-trigger {
|
|
617
|
+
flex-shrink: 0;
|
|
618
|
+
display: inline-flex;
|
|
619
|
+
align-items: center;
|
|
620
|
+
gap: 6px;
|
|
621
|
+
border: none;
|
|
622
|
+
border-radius: 999px;
|
|
623
|
+
background: var(--harmony-bg-subtle, #f4f5f7);
|
|
624
|
+
color: var(--harmony-text-secondary);
|
|
625
|
+
font-size: 12px;
|
|
626
|
+
font-family: var(--harmony-font);
|
|
627
|
+
padding: 5px 10px;
|
|
628
|
+
cursor: pointer;
|
|
629
|
+
white-space: nowrap;
|
|
630
|
+
}
|
|
631
|
+
.harmony-instance-switcher-trigger:hover {
|
|
632
|
+
background: var(--harmony-bg-hover);
|
|
633
|
+
color: var(--harmony-text);
|
|
634
|
+
}
|
|
635
|
+
.harmony-instance-switcher-trigger--open {
|
|
636
|
+
background: var(--harmony-primary-soft);
|
|
637
|
+
color: var(--harmony-primary);
|
|
638
|
+
}
|
|
639
|
+
.harmony-instance-switcher-chevron {
|
|
640
|
+
font-size: 10px;
|
|
641
|
+
line-height: 1;
|
|
642
|
+
}
|
|
643
|
+
.harmony-instance-switcher-menu {
|
|
644
|
+
position: absolute;
|
|
645
|
+
left: 0;
|
|
646
|
+
top: calc(100% + 8px);
|
|
647
|
+
min-width: max(100%, 220px);
|
|
648
|
+
max-width: min(320px, calc(100vw - 48px));
|
|
649
|
+
max-height: 280px;
|
|
650
|
+
overflow-y: auto;
|
|
651
|
+
background: var(--harmony-bg-surface);
|
|
652
|
+
border: 1px solid var(--harmony-border);
|
|
653
|
+
border-radius: var(--harmony-radius-md, 10px);
|
|
654
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
655
|
+
padding: 6px 0;
|
|
656
|
+
}
|
|
657
|
+
.harmony-instance-switcher-menu--above {
|
|
658
|
+
top: auto;
|
|
659
|
+
bottom: calc(100% + 8px);
|
|
660
|
+
}
|
|
661
|
+
.harmony-instance-switcher-item {
|
|
662
|
+
display: block;
|
|
663
|
+
width: 100%;
|
|
664
|
+
box-sizing: border-box;
|
|
665
|
+
border: none;
|
|
666
|
+
background: transparent;
|
|
667
|
+
color: var(--harmony-text);
|
|
668
|
+
font-size: 13px;
|
|
669
|
+
font-family: var(--harmony-font);
|
|
670
|
+
text-align: left;
|
|
671
|
+
padding: 9px 14px;
|
|
672
|
+
cursor: pointer;
|
|
673
|
+
overflow: hidden;
|
|
674
|
+
text-overflow: ellipsis;
|
|
675
|
+
white-space: nowrap;
|
|
676
|
+
}
|
|
677
|
+
.harmony-instance-switcher-item:hover {
|
|
678
|
+
background: var(--harmony-bg-hover);
|
|
679
|
+
}
|
|
680
|
+
.harmony-instance-switcher-item--selected {
|
|
681
|
+
background: var(--harmony-primary-soft);
|
|
682
|
+
color: var(--harmony-primary);
|
|
683
|
+
font-weight: 600;
|
|
684
|
+
}
|
|
685
|
+
|
|
516
686
|
.aiditor-logo {
|
|
517
687
|
font-size: 17px;
|
|
518
688
|
font-weight: 700;
|
|
@@ -594,14 +764,17 @@
|
|
|
594
764
|
}
|
|
595
765
|
.harmony-float-rail {
|
|
596
766
|
position: absolute;
|
|
597
|
-
|
|
767
|
+
top: 16px;
|
|
768
|
+
left: 16px;
|
|
598
769
|
z-index: 30;
|
|
770
|
+
display: flex;
|
|
771
|
+
flex-direction: column;
|
|
772
|
+
align-items: flex-start;
|
|
773
|
+
gap: 8px;
|
|
599
774
|
pointer-events: none;
|
|
600
775
|
}
|
|
601
776
|
.harmony-add-btn {
|
|
602
|
-
position:
|
|
603
|
-
top: 16px;
|
|
604
|
-
left: 16px;
|
|
777
|
+
position: static;
|
|
605
778
|
display: inline-flex;
|
|
606
779
|
align-items: center;
|
|
607
780
|
justify-content: center;
|
|
@@ -636,6 +809,63 @@
|
|
|
636
809
|
inset 0 1px 2px rgba(22, 45, 61, 0.06),
|
|
637
810
|
0 1px 2px rgba(22, 45, 61, 0.04);
|
|
638
811
|
}
|
|
812
|
+
.harmony-stage-action-btn {
|
|
813
|
+
width: 40px;
|
|
814
|
+
min-width: 40px;
|
|
815
|
+
height: 40px;
|
|
816
|
+
padding: 0;
|
|
817
|
+
gap: 0;
|
|
818
|
+
overflow: hidden;
|
|
819
|
+
transition:
|
|
820
|
+
width 0.22s ease,
|
|
821
|
+
min-width 0.22s ease,
|
|
822
|
+
padding 0.22s ease,
|
|
823
|
+
gap 0.22s ease,
|
|
824
|
+
background 0.15s ease,
|
|
825
|
+
border-color 0.15s ease,
|
|
826
|
+
box-shadow 0.15s ease;
|
|
827
|
+
}
|
|
828
|
+
.harmony-stage-action-icon {
|
|
829
|
+
display: inline-flex;
|
|
830
|
+
align-items: center;
|
|
831
|
+
justify-content: center;
|
|
832
|
+
flex-shrink: 0;
|
|
833
|
+
width: 40px;
|
|
834
|
+
height: 40px;
|
|
835
|
+
color: var(--harmony-text);
|
|
836
|
+
}
|
|
837
|
+
.harmony-stage-action-icon svg {
|
|
838
|
+
display: block;
|
|
839
|
+
width: 24px;
|
|
840
|
+
height: 24px;
|
|
841
|
+
}
|
|
842
|
+
.harmony-stage-action-label {
|
|
843
|
+
display: inline-block;
|
|
844
|
+
max-width: 0;
|
|
845
|
+
opacity: 0;
|
|
846
|
+
overflow: hidden;
|
|
847
|
+
white-space: nowrap;
|
|
848
|
+
margin-left: 0;
|
|
849
|
+
transition:
|
|
850
|
+
max-width 0.22s ease,
|
|
851
|
+
opacity 0.18s ease,
|
|
852
|
+
margin-left 0.22s ease;
|
|
853
|
+
}
|
|
854
|
+
.harmony-stage-action-btn:hover,
|
|
855
|
+
.harmony-stage-action-btn:focus-visible,
|
|
856
|
+
.harmony-stage-action-btn.harmony-add-btn-open {
|
|
857
|
+
width: auto;
|
|
858
|
+
min-width: 40px;
|
|
859
|
+
padding-right: 14px;
|
|
860
|
+
gap: 2px;
|
|
861
|
+
}
|
|
862
|
+
.harmony-stage-action-btn:hover .harmony-stage-action-label,
|
|
863
|
+
.harmony-stage-action-btn:focus-visible .harmony-stage-action-label,
|
|
864
|
+
.harmony-stage-action-btn.harmony-add-btn-open .harmony-stage-action-label {
|
|
865
|
+
max-width: 12rem;
|
|
866
|
+
opacity: 1;
|
|
867
|
+
margin-left: -4px;
|
|
868
|
+
}
|
|
639
869
|
.harmony-stage-icon-btn {
|
|
640
870
|
position: absolute;
|
|
641
871
|
left: 20px;
|
|
@@ -799,6 +1029,7 @@
|
|
|
799
1029
|
flex-direction: column;
|
|
800
1030
|
align-items: center;
|
|
801
1031
|
min-height: 0;
|
|
1032
|
+
position: relative;
|
|
802
1033
|
padding: 20px 40px 72px;
|
|
803
1034
|
gap: 10px;
|
|
804
1035
|
overflow-x: visible;
|
|
@@ -851,14 +1082,54 @@
|
|
|
851
1082
|
.harmony-url-bar-wrap { flex: 1; min-width: 0; }
|
|
852
1083
|
.url-bar-wrap { flex: 1; min-width: 200px; }
|
|
853
1084
|
.url-bar {
|
|
1085
|
+
display: flex;
|
|
1086
|
+
align-items: center;
|
|
1087
|
+
gap: 4px;
|
|
854
1088
|
font-size: 12px;
|
|
855
1089
|
font-family: var(--harmony-mono);
|
|
856
1090
|
color: var(--harmony-text-secondary);
|
|
857
1091
|
background: var(--harmony-bg-surface);
|
|
858
1092
|
border: 1px solid var(--harmony-border);
|
|
859
1093
|
border-radius: var(--harmony-radius-sm);
|
|
860
|
-
padding:
|
|
861
|
-
|
|
1094
|
+
padding: 4px 4px 4px 12px;
|
|
1095
|
+
}
|
|
1096
|
+
.url-bar-text {
|
|
1097
|
+
flex: 1;
|
|
1098
|
+
min-width: 0;
|
|
1099
|
+
overflow: hidden;
|
|
1100
|
+
text-overflow: ellipsis;
|
|
1101
|
+
white-space: nowrap;
|
|
1102
|
+
}
|
|
1103
|
+
.url-bar-open-tab {
|
|
1104
|
+
flex-shrink: 0;
|
|
1105
|
+
display: inline-flex;
|
|
1106
|
+
align-items: center;
|
|
1107
|
+
justify-content: center;
|
|
1108
|
+
width: 28px;
|
|
1109
|
+
height: 28px;
|
|
1110
|
+
padding: 0;
|
|
1111
|
+
border: none;
|
|
1112
|
+
border-radius: var(--harmony-radius-sm);
|
|
1113
|
+
background: transparent;
|
|
1114
|
+
color: var(--harmony-text-muted);
|
|
1115
|
+
cursor: pointer;
|
|
1116
|
+
transition: color 0.12s ease, background 0.12s ease;
|
|
1117
|
+
}
|
|
1118
|
+
.url-bar-open-tab:hover:not(:disabled) {
|
|
1119
|
+
color: var(--harmony-text);
|
|
1120
|
+
background: var(--harmony-bg-hover);
|
|
1121
|
+
}
|
|
1122
|
+
.url-bar-open-tab:disabled {
|
|
1123
|
+
opacity: 0.4;
|
|
1124
|
+
cursor: default;
|
|
1125
|
+
}
|
|
1126
|
+
.url-bar-open-tab:focus-visible {
|
|
1127
|
+
outline: 2px solid var(--harmony-primary);
|
|
1128
|
+
outline-offset: 1px;
|
|
1129
|
+
}
|
|
1130
|
+
.url-bar-open-tab .harmony-routes-panel-open-tab-icon {
|
|
1131
|
+
width: 24px;
|
|
1132
|
+
height: 24px;
|
|
862
1133
|
}
|
|
863
1134
|
|
|
864
1135
|
.preview-loading { font-size: 13px; color: var(--harmony-text-muted); }
|
|
@@ -1107,6 +1378,19 @@
|
|
|
1107
1378
|
.visual-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
|
|
1108
1379
|
.visual-attachment-remove-file { background: transparent; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
|
|
1109
1380
|
.visual-attachment-remove-file:hover { color: var(--harmony-danger); }
|
|
1381
|
+
.visual-attachment-chip-actions {
|
|
1382
|
+
display: flex;
|
|
1383
|
+
flex-direction: column;
|
|
1384
|
+
align-items: center;
|
|
1385
|
+
gap: 2px;
|
|
1386
|
+
flex-shrink: 0;
|
|
1387
|
+
}
|
|
1388
|
+
.visual-attachment-number {
|
|
1389
|
+
font-size: 10px;
|
|
1390
|
+
font-weight: 600;
|
|
1391
|
+
color: var(--harmony-primary);
|
|
1392
|
+
line-height: 1;
|
|
1393
|
+
}
|
|
1110
1394
|
.file-input-hidden { display: none; }
|
|
1111
1395
|
.visual-error { font-size: 12px; color: var(--harmony-danger); }
|
|
1112
1396
|
.visual-submit-error { font-size: 12px; color: var(--harmony-danger); margin: 0; padding: 0 2px; }
|
|
@@ -1387,14 +1671,46 @@
|
|
|
1387
1671
|
flex-direction: column;
|
|
1388
1672
|
gap: 10px;
|
|
1389
1673
|
padding: 14px 16px;
|
|
1390
|
-
overflow:
|
|
1674
|
+
overflow: hidden;
|
|
1391
1675
|
box-shadow: var(--harmony-shadow-lg);
|
|
1392
1676
|
}
|
|
1677
|
+
.video-review-body {
|
|
1678
|
+
display: flex;
|
|
1679
|
+
flex-direction: column;
|
|
1680
|
+
gap: 10px;
|
|
1681
|
+
min-height: 0;
|
|
1682
|
+
flex: 1 1 auto;
|
|
1683
|
+
}
|
|
1684
|
+
.video-review-tools {
|
|
1685
|
+
display: inline-flex;
|
|
1686
|
+
flex-wrap: nowrap;
|
|
1687
|
+
gap: 2px;
|
|
1688
|
+
align-items: center;
|
|
1689
|
+
width: fit-content;
|
|
1690
|
+
}
|
|
1691
|
+
.video-review-tools .visual-tool-btn {
|
|
1692
|
+
padding: 7px 8px;
|
|
1693
|
+
min-width: 28px;
|
|
1694
|
+
}
|
|
1695
|
+
.video-review-capture-root {
|
|
1696
|
+
flex: 0 1 auto;
|
|
1697
|
+
min-height: 0;
|
|
1698
|
+
max-height: min(56vh, 480px);
|
|
1699
|
+
overflow: hidden;
|
|
1700
|
+
}
|
|
1701
|
+
.video-review-capture-root .preview-frame {
|
|
1702
|
+
width: 100%;
|
|
1703
|
+
height: auto;
|
|
1704
|
+
min-height: 0;
|
|
1705
|
+
max-height: min(56vh, 480px);
|
|
1706
|
+
object-fit: contain;
|
|
1707
|
+
display: block;
|
|
1708
|
+
}
|
|
1393
1709
|
.snapshot-panel { width: min(1200px, 96vw); overflow: hidden; }
|
|
1394
1710
|
.video-review-header, .snapshot-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
1395
1711
|
.video-review-title, .snapshot-title { font-size: 15px; font-weight: 600; color: var(--harmony-text); margin: 0; }
|
|
1396
1712
|
.video-review-meta { font-size: 12px; color: var(--harmony-text-muted); }
|
|
1397
|
-
.
|
|
1713
|
+
.snapshot-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
|
|
1398
1714
|
.video-review-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
|
|
1399
1715
|
.video-play-pause-btn {
|
|
1400
1716
|
flex-shrink: 0;
|
|
@@ -1446,6 +1762,53 @@
|
|
|
1446
1762
|
}
|
|
1447
1763
|
.video-review-primary:hover, .snapshot-primary:hover { background: var(--harmony-primary-hover); }
|
|
1448
1764
|
.video-review-primary:disabled, .snapshot-primary:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
1765
|
+
.harmony-modal-close {
|
|
1766
|
+
background: none;
|
|
1767
|
+
border: none;
|
|
1768
|
+
color: var(--harmony-text-muted);
|
|
1769
|
+
cursor: pointer;
|
|
1770
|
+
padding: 4px;
|
|
1771
|
+
line-height: 0;
|
|
1772
|
+
display: inline-flex;
|
|
1773
|
+
align-items: center;
|
|
1774
|
+
justify-content: center;
|
|
1775
|
+
border-radius: var(--harmony-radius-sm);
|
|
1776
|
+
flex-shrink: 0;
|
|
1777
|
+
}
|
|
1778
|
+
.harmony-modal-close:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
|
|
1779
|
+
.video-review-close-confirm-overlay {
|
|
1780
|
+
position: fixed;
|
|
1781
|
+
inset: 0;
|
|
1782
|
+
z-index: 380;
|
|
1783
|
+
background: rgba(22, 45, 61, 0.45);
|
|
1784
|
+
display: flex;
|
|
1785
|
+
align-items: center;
|
|
1786
|
+
justify-content: center;
|
|
1787
|
+
padding: 24px;
|
|
1788
|
+
box-sizing: border-box;
|
|
1789
|
+
}
|
|
1790
|
+
.video-review-close-confirm-dialog {
|
|
1791
|
+
background: var(--harmony-bg-surface);
|
|
1792
|
+
border: 1px solid var(--harmony-border);
|
|
1793
|
+
border-radius: var(--harmony-radius-lg);
|
|
1794
|
+
width: min(400px, 100%);
|
|
1795
|
+
padding: 20px 24px;
|
|
1796
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
1797
|
+
display: flex;
|
|
1798
|
+
flex-direction: column;
|
|
1799
|
+
gap: 16px;
|
|
1800
|
+
}
|
|
1801
|
+
.video-review-close-confirm-msg {
|
|
1802
|
+
margin: 0;
|
|
1803
|
+
font-size: 14px;
|
|
1804
|
+
line-height: 1.45;
|
|
1805
|
+
color: var(--harmony-text);
|
|
1806
|
+
}
|
|
1807
|
+
.video-review-close-confirm-actions {
|
|
1808
|
+
display: flex;
|
|
1809
|
+
justify-content: flex-end;
|
|
1810
|
+
gap: 8px;
|
|
1811
|
+
}
|
|
1449
1812
|
.snapshot-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
|
|
1450
1813
|
.snapshot-close:hover { color: var(--harmony-text); }
|
|
1451
1814
|
.snapshot-body { display: flex; gap: 14px; flex: 1; min-height: 0; overflow: hidden; }
|
|
@@ -1500,9 +1863,9 @@
|
|
|
1500
1863
|
backdrop-filter: blur(14px);
|
|
1501
1864
|
-webkit-backdrop-filter: blur(14px);
|
|
1502
1865
|
display: flex;
|
|
1503
|
-
align-items:
|
|
1504
|
-
justify-content:
|
|
1505
|
-
padding:
|
|
1866
|
+
align-items: stretch;
|
|
1867
|
+
justify-content: stretch;
|
|
1868
|
+
padding: 16px;
|
|
1506
1869
|
box-sizing: border-box;
|
|
1507
1870
|
}
|
|
1508
1871
|
.project-settings-overlay {
|
|
@@ -1542,22 +1905,108 @@
|
|
|
1542
1905
|
width: min(720px, 100%);
|
|
1543
1906
|
max-height: min(85vh, 720px);
|
|
1544
1907
|
}
|
|
1545
|
-
.add-menu-picker-
|
|
1908
|
+
.add-menu-picker-overlay--full {
|
|
1909
|
+
padding: 16px;
|
|
1910
|
+
align-items: stretch;
|
|
1911
|
+
justify-content: stretch;
|
|
1912
|
+
background: rgba(255, 255, 255, 0.72);
|
|
1913
|
+
backdrop-filter: blur(14px);
|
|
1914
|
+
-webkit-backdrop-filter: blur(14px);
|
|
1915
|
+
}
|
|
1916
|
+
.add-menu-picker-dismiss-confirm-overlay {
|
|
1917
|
+
position: fixed;
|
|
1918
|
+
inset: 0;
|
|
1919
|
+
z-index: 380;
|
|
1920
|
+
background: rgba(22, 45, 61, 0.45);
|
|
1546
1921
|
display: flex;
|
|
1547
1922
|
align-items: center;
|
|
1923
|
+
justify-content: center;
|
|
1924
|
+
padding: 24px;
|
|
1925
|
+
box-sizing: border-box;
|
|
1926
|
+
}
|
|
1927
|
+
.add-menu-picker-dismiss-confirm-dialog {
|
|
1928
|
+
background: var(--harmony-bg-surface);
|
|
1929
|
+
border: 1px solid var(--harmony-border);
|
|
1930
|
+
border-radius: var(--harmony-radius-lg);
|
|
1931
|
+
width: min(400px, 100%);
|
|
1932
|
+
padding: 20px 24px;
|
|
1933
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
1934
|
+
display: flex;
|
|
1935
|
+
flex-direction: column;
|
|
1936
|
+
gap: 16px;
|
|
1937
|
+
}
|
|
1938
|
+
.add-menu-picker-dismiss-confirm-msg {
|
|
1939
|
+
margin: 0;
|
|
1940
|
+
font-size: 14px;
|
|
1941
|
+
line-height: 1.45;
|
|
1942
|
+
color: var(--harmony-text);
|
|
1943
|
+
}
|
|
1944
|
+
.add-menu-picker-dismiss-confirm-actions {
|
|
1945
|
+
display: flex;
|
|
1946
|
+
justify-content: flex-end;
|
|
1548
1947
|
gap: 8px;
|
|
1549
|
-
|
|
1948
|
+
}
|
|
1949
|
+
.add-menu-picker-dialog--full {
|
|
1950
|
+
width: 100%;
|
|
1951
|
+
height: 100%;
|
|
1952
|
+
max-height: none;
|
|
1953
|
+
box-shadow:
|
|
1954
|
+
0 24px 80px rgba(22, 45, 61, 0.16),
|
|
1955
|
+
0 8px 24px rgba(22, 45, 61, 0.08);
|
|
1956
|
+
}
|
|
1957
|
+
.add-menu-picker-dialog--browse.add-menu-picker-dialog--full {
|
|
1958
|
+
width: 100%;
|
|
1959
|
+
height: 100%;
|
|
1960
|
+
max-height: none;
|
|
1961
|
+
}
|
|
1962
|
+
.add-menu-picker-header {
|
|
1963
|
+
display: flex;
|
|
1964
|
+
align-items: center;
|
|
1965
|
+
gap: 12px;
|
|
1966
|
+
padding: 20px 28px;
|
|
1550
1967
|
border-bottom: 1px solid var(--harmony-border);
|
|
1551
|
-
|
|
1968
|
+
flex-shrink: 0;
|
|
1969
|
+
background: var(--harmony-bg-surface);
|
|
1552
1970
|
}
|
|
1553
1971
|
.add-menu-picker-title {
|
|
1554
1972
|
flex: 1;
|
|
1555
|
-
font-size:
|
|
1556
|
-
font-weight:
|
|
1973
|
+
font-size: 20px;
|
|
1974
|
+
font-weight: 700;
|
|
1557
1975
|
color: var(--harmony-text);
|
|
1976
|
+
letter-spacing: -0.02em;
|
|
1558
1977
|
}
|
|
1559
|
-
.add-menu-picker-back,
|
|
1978
|
+
.add-menu-picker-header-back,
|
|
1560
1979
|
.add-menu-picker-close {
|
|
1980
|
+
background: none;
|
|
1981
|
+
border: none;
|
|
1982
|
+
color: var(--harmony-text-muted);
|
|
1983
|
+
cursor: pointer;
|
|
1984
|
+
line-height: 1;
|
|
1985
|
+
padding: 4px;
|
|
1986
|
+
border-radius: var(--harmony-radius-sm);
|
|
1987
|
+
}
|
|
1988
|
+
.add-menu-picker-header-back {
|
|
1989
|
+
display: inline-flex;
|
|
1990
|
+
align-items: center;
|
|
1991
|
+
justify-content: center;
|
|
1992
|
+
flex-shrink: 0;
|
|
1993
|
+
line-height: 0;
|
|
1994
|
+
overflow: visible;
|
|
1995
|
+
}
|
|
1996
|
+
.add-menu-picker-header-back-icon {
|
|
1997
|
+
display: block;
|
|
1998
|
+
flex-shrink: 0;
|
|
1999
|
+
width: 30px;
|
|
2000
|
+
height: 30px;
|
|
2001
|
+
color: black;
|
|
2002
|
+
}
|
|
2003
|
+
.add-menu-picker-close { font-size: 22px; }
|
|
2004
|
+
.add-menu-picker-header-back:hover,
|
|
2005
|
+
.add-menu-picker-close:hover {
|
|
2006
|
+
color: var(--harmony-text);
|
|
2007
|
+
background: var(--harmony-bg-hover);
|
|
2008
|
+
}
|
|
2009
|
+
.add-menu-picker-back {
|
|
1561
2010
|
background: none;
|
|
1562
2011
|
border: none;
|
|
1563
2012
|
color: var(--harmony-text-muted);
|
|
@@ -1566,9 +2015,7 @@
|
|
|
1566
2015
|
line-height: 1;
|
|
1567
2016
|
padding: 4px 6px;
|
|
1568
2017
|
}
|
|
1569
|
-
.add-menu-picker-
|
|
1570
|
-
.add-menu-picker-back:hover,
|
|
1571
|
-
.add-menu-picker-close:hover { color: var(--harmony-text); }
|
|
2018
|
+
.add-menu-picker-back:hover { color: var(--harmony-text); }
|
|
1572
2019
|
.add-menu-picker-body {
|
|
1573
2020
|
padding: 12px 16px 16px;
|
|
1574
2021
|
overflow: auto;
|
|
@@ -1789,7 +2236,7 @@
|
|
|
1789
2236
|
}
|
|
1790
2237
|
.add-menu-picker-search-icon {
|
|
1791
2238
|
color: var(--harmony-text-muted);
|
|
1792
|
-
font-size:
|
|
2239
|
+
font-size: 30px;
|
|
1793
2240
|
line-height: 1;
|
|
1794
2241
|
flex-shrink: 0;
|
|
1795
2242
|
}
|
|
@@ -1803,6 +2250,10 @@
|
|
|
1803
2250
|
font-size: 13px;
|
|
1804
2251
|
outline: none;
|
|
1805
2252
|
}
|
|
2253
|
+
.add-menu-picker-search-input::-webkit-search-cancel-button {
|
|
2254
|
+
-webkit-appearance: none;
|
|
2255
|
+
display: none;
|
|
2256
|
+
}
|
|
1806
2257
|
.add-menu-picker-search-input::placeholder {
|
|
1807
2258
|
color: var(--harmony-text-muted);
|
|
1808
2259
|
}
|
|
@@ -1811,10 +2262,10 @@
|
|
|
1811
2262
|
background: none;
|
|
1812
2263
|
border: none;
|
|
1813
2264
|
color: var(--harmony-text-muted);
|
|
1814
|
-
font-size:
|
|
2265
|
+
font-size: 22px;
|
|
1815
2266
|
line-height: 1;
|
|
1816
2267
|
cursor: pointer;
|
|
1817
|
-
padding: 0
|
|
2268
|
+
padding: 0 4px;
|
|
1818
2269
|
}
|
|
1819
2270
|
.add-menu-picker-search-clear:hover { color: var(--harmony-text); }
|
|
1820
2271
|
.add-menu-picker-search-summary {
|
|
@@ -1830,12 +2281,13 @@
|
|
|
1830
2281
|
}
|
|
1831
2282
|
.add-menu-picker-browse-content {
|
|
1832
2283
|
display: grid;
|
|
1833
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
1834
|
-
gap:
|
|
2284
|
+
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
|
|
2285
|
+
gap: 12px;
|
|
1835
2286
|
overflow-y: auto;
|
|
1836
2287
|
flex: 1;
|
|
1837
2288
|
min-height: 0;
|
|
1838
2289
|
align-content: start;
|
|
2290
|
+
grid-auto-rows: minmax(152px, auto);
|
|
1839
2291
|
}
|
|
1840
2292
|
.add-menu-picker-browse-row {
|
|
1841
2293
|
display: contents;
|
|
@@ -1854,16 +2306,114 @@
|
|
|
1854
2306
|
}
|
|
1855
2307
|
.add-menu-picker-component-card {
|
|
1856
2308
|
min-height: 72px;
|
|
2309
|
+
overflow: hidden;
|
|
2310
|
+
box-sizing: border-box;
|
|
2311
|
+
}
|
|
2312
|
+
.add-menu-picker-component-card--preview,
|
|
2313
|
+
.add-menu-picker-component-card--info {
|
|
2314
|
+
display: flex;
|
|
2315
|
+
flex-direction: column;
|
|
2316
|
+
align-items: stretch;
|
|
2317
|
+
gap: 6px;
|
|
2318
|
+
padding: 8px;
|
|
2319
|
+
min-height: 0;
|
|
2320
|
+
height: 100%;
|
|
2321
|
+
text-align: left;
|
|
2322
|
+
}
|
|
2323
|
+
.add-menu-picker-component-card--preview {
|
|
2324
|
+
min-height: 152px;
|
|
2325
|
+
}
|
|
2326
|
+
.add-menu-picker-component-card--info {
|
|
2327
|
+
min-height: 72px;
|
|
2328
|
+
justify-content: flex-start;
|
|
2329
|
+
padding: 10px 12px;
|
|
2330
|
+
gap: 0;
|
|
2331
|
+
}
|
|
2332
|
+
.add-menu-picker-component-preview {
|
|
2333
|
+
display: flex;
|
|
2334
|
+
align-items: center;
|
|
2335
|
+
justify-content: center;
|
|
2336
|
+
width: 100%;
|
|
2337
|
+
height: 112px;
|
|
2338
|
+
flex: 0 0 112px;
|
|
2339
|
+
border-radius: 6px;
|
|
2340
|
+
overflow: hidden;
|
|
2341
|
+
background: var(--harmony-bg-subtle);
|
|
2342
|
+
border: 1px solid var(--harmony-border);
|
|
2343
|
+
}
|
|
2344
|
+
.add-menu-picker-component-thumb {
|
|
2345
|
+
display: block;
|
|
2346
|
+
width: 100%;
|
|
2347
|
+
height: 100%;
|
|
2348
|
+
object-fit: contain;
|
|
2349
|
+
object-position: center;
|
|
2350
|
+
padding: 6px;
|
|
2351
|
+
box-sizing: border-box;
|
|
2352
|
+
}
|
|
2353
|
+
.add-menu-picker-component-thumb--animated {
|
|
2354
|
+
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
2355
|
+
}
|
|
2356
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
2357
|
+
.add-menu-picker-component-card--preview:hover .add-menu-picker-component-thumb--animated,
|
|
2358
|
+
.add-menu-picker-component-card--preview:focus-visible .add-menu-picker-component-thumb--animated {
|
|
2359
|
+
transform: scale(1.06);
|
|
2360
|
+
}
|
|
2361
|
+
}
|
|
2362
|
+
.add-menu-picker-component-info-icon {
|
|
2363
|
+
display: none;
|
|
2364
|
+
}
|
|
2365
|
+
.add-menu-picker-component-card--preview .add-menu-picker-component-title,
|
|
2366
|
+
.add-menu-picker-component-card--info .add-menu-picker-component-title {
|
|
2367
|
+
width: 100%;
|
|
2368
|
+
flex-shrink: 0;
|
|
2369
|
+
white-space: nowrap;
|
|
2370
|
+
overflow: hidden;
|
|
2371
|
+
text-overflow: ellipsis;
|
|
2372
|
+
line-height: 1.35;
|
|
2373
|
+
font-size: 12px;
|
|
1857
2374
|
}
|
|
1858
2375
|
.add-menu-picker-component-card--browse-only {
|
|
1859
2376
|
opacity: 0.6;
|
|
1860
2377
|
cursor: default;
|
|
1861
2378
|
}
|
|
2379
|
+
.add-menu-picker-component-card--selected {
|
|
2380
|
+
border-color: var(--harmony-primary);
|
|
2381
|
+
background: var(--harmony-primary-soft);
|
|
2382
|
+
box-shadow: inset 0 0 0 1px var(--harmony-primary);
|
|
2383
|
+
}
|
|
2384
|
+
.add-menu-picker-category-selected-count {
|
|
2385
|
+
color: var(--harmony-primary);
|
|
2386
|
+
font-weight: 600;
|
|
2387
|
+
}
|
|
2388
|
+
.add-menu-picker-subcategory-selected-count {
|
|
2389
|
+
color: var(--harmony-primary);
|
|
2390
|
+
font-weight: 600;
|
|
2391
|
+
}
|
|
2392
|
+
.add-menu-picker-footer {
|
|
2393
|
+
display: flex;
|
|
2394
|
+
justify-content: flex-end;
|
|
2395
|
+
padding: 12px 16px 16px;
|
|
2396
|
+
border-top: 1px solid var(--harmony-border);
|
|
2397
|
+
flex-shrink: 0;
|
|
2398
|
+
}
|
|
2399
|
+
.add-menu-picker-done-btn {
|
|
2400
|
+
min-width: 120px;
|
|
2401
|
+
}
|
|
2402
|
+
.add-menu-picker-done-btn:disabled {
|
|
2403
|
+
opacity: 0.5;
|
|
2404
|
+
cursor: not-allowed;
|
|
2405
|
+
}
|
|
2406
|
+
.add-menu-picker-load-more-row {
|
|
2407
|
+
display: flex;
|
|
2408
|
+
justify-content: center;
|
|
2409
|
+
padding: 12px 0 4px;
|
|
2410
|
+
grid-column: 1 / -1;
|
|
2411
|
+
}
|
|
2412
|
+
.add-menu-picker-load-more-btn {
|
|
2413
|
+
min-width: 200px;
|
|
2414
|
+
}
|
|
1862
2415
|
.add-menu-picker-component-title {
|
|
1863
2416
|
font-weight: 500;
|
|
1864
|
-
overflow: hidden;
|
|
1865
|
-
text-overflow: ellipsis;
|
|
1866
|
-
white-space: nowrap;
|
|
1867
2417
|
max-width: 100%;
|
|
1868
2418
|
}
|
|
1869
2419
|
.project-settings-dialog {
|
|
@@ -1889,9 +2439,9 @@
|
|
|
1889
2439
|
.project-settings-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
|
|
1890
2440
|
.project-settings-body { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
|
|
1891
2441
|
.add-page-slideover {
|
|
1892
|
-
width:
|
|
1893
|
-
|
|
1894
|
-
height:
|
|
2442
|
+
width: 100%;
|
|
2443
|
+
height: 100%;
|
|
2444
|
+
min-height: 0;
|
|
1895
2445
|
background: var(--harmony-bg-surface);
|
|
1896
2446
|
border: 1px solid var(--harmony-border);
|
|
1897
2447
|
border-radius: var(--harmony-radius-lg);
|
|
@@ -1915,390 +2465,1454 @@
|
|
|
1915
2465
|
.add-page-title { font-size: 20px; font-weight: 700; color: var(--harmony-text); flex: 1; letter-spacing: -0.02em; }
|
|
1916
2466
|
.add-page-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; border-radius: var(--harmony-radius-sm); }
|
|
1917
2467
|
.add-page-close:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
|
|
1918
|
-
.add-page-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
2468
|
+
.add-page-subheader {
|
|
2469
|
+
display: flex;
|
|
2470
|
+
flex-shrink: 0;
|
|
2471
|
+
border-bottom: 1px solid var(--harmony-border);
|
|
2472
|
+
background: var(--harmony-bg-surface);
|
|
2473
|
+
}
|
|
2474
|
+
.add-page-layout {
|
|
2475
|
+
flex: 1;
|
|
2476
|
+
display: flex;
|
|
2477
|
+
min-height: 0;
|
|
2478
|
+
overflow: hidden;
|
|
2479
|
+
}
|
|
2480
|
+
.add-page-main {
|
|
2481
|
+
flex: 1;
|
|
2482
|
+
min-width: 0;
|
|
2483
|
+
display: flex;
|
|
2484
|
+
flex-direction: column;
|
|
2485
|
+
min-height: 0;
|
|
2486
|
+
}
|
|
2487
|
+
.add-page-main-scroll {
|
|
2488
|
+
flex: 1;
|
|
2489
|
+
overflow: auto;
|
|
2490
|
+
padding: 20px 28px;
|
|
2491
|
+
display: flex;
|
|
2492
|
+
flex-direction: column;
|
|
2493
|
+
gap: 20px;
|
|
2494
|
+
min-height: 0;
|
|
2495
|
+
}
|
|
2496
|
+
.add-page-tabs {
|
|
2497
|
+
flex: 1;
|
|
2498
|
+
display: flex;
|
|
2499
|
+
gap: 4px;
|
|
2500
|
+
padding: 0 28px;
|
|
2501
|
+
min-width: 0;
|
|
2502
|
+
}
|
|
2503
|
+
.add-page-tab {
|
|
2504
|
+
background: none;
|
|
2505
|
+
border: none;
|
|
2506
|
+
border-bottom: 2px solid transparent;
|
|
2507
|
+
margin-bottom: -1px;
|
|
2508
|
+
padding: 12px 16px;
|
|
2509
|
+
font-size: 13px;
|
|
1929
2510
|
font-weight: 600;
|
|
2511
|
+
color: var(--harmony-text-muted);
|
|
1930
2512
|
cursor: pointer;
|
|
1931
|
-
|
|
2513
|
+
border-radius: var(--harmony-radius-sm) var(--harmony-radius-sm) 0 0;
|
|
1932
2514
|
}
|
|
1933
|
-
.add-page-
|
|
1934
|
-
.add-page-
|
|
1935
|
-
|
|
2515
|
+
.add-page-tab:hover { color: var(--harmony-text); background: var(--harmony-bg-hover); }
|
|
2516
|
+
.add-page-tab--active {
|
|
2517
|
+
color: var(--harmony-text);
|
|
2518
|
+
border-bottom-color: var(--harmony-primary);
|
|
2519
|
+
}
|
|
2520
|
+
.add-page-tab--generating {
|
|
2521
|
+
color: var(--harmony-primary);
|
|
2522
|
+
}
|
|
2523
|
+
.add-page-brief-generating-overlay {
|
|
2524
|
+
position: absolute;
|
|
2525
|
+
inset: 0;
|
|
2526
|
+
z-index: 3;
|
|
1936
2527
|
display: flex;
|
|
1937
|
-
flex-
|
|
2528
|
+
flex-direction: column;
|
|
1938
2529
|
align-items: center;
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
2530
|
+
justify-content: center;
|
|
2531
|
+
gap: 10px;
|
|
2532
|
+
background: rgba(255, 255, 255, 0.78);
|
|
2533
|
+
backdrop-filter: blur(6px);
|
|
2534
|
+
-webkit-backdrop-filter: blur(6px);
|
|
1942
2535
|
border-radius: var(--harmony-radius-sm);
|
|
1943
|
-
|
|
1944
|
-
|
|
2536
|
+
pointer-events: auto;
|
|
2537
|
+
}
|
|
2538
|
+
.add-page-brief-generating-overlay .add-page-hint {
|
|
2539
|
+
margin: 0;
|
|
2540
|
+
font-size: 13px;
|
|
1945
2541
|
color: var(--harmony-text-secondary);
|
|
1946
|
-
margin-bottom: 8px;
|
|
1947
2542
|
}
|
|
1948
|
-
.add-page-
|
|
1949
|
-
|
|
2543
|
+
.add-page-brief-generating-stop {
|
|
2544
|
+
flex: 0;
|
|
2545
|
+
padding: 4px 12px;
|
|
2546
|
+
font-size: 12px;
|
|
2547
|
+
}
|
|
2548
|
+
.add-page-textarea:disabled {
|
|
2549
|
+
opacity: 0.55;
|
|
2550
|
+
cursor: not-allowed;
|
|
2551
|
+
}
|
|
2552
|
+
.add-page-discard-confirm-overlay {
|
|
1950
2553
|
position: absolute;
|
|
1951
2554
|
inset: 0;
|
|
1952
|
-
z-index:
|
|
1953
|
-
background: rgba(
|
|
1954
|
-
backdrop-filter: blur(8px);
|
|
1955
|
-
-webkit-backdrop-filter: blur(8px);
|
|
2555
|
+
z-index: 30;
|
|
2556
|
+
background: rgba(22, 45, 61, 0.45);
|
|
1956
2557
|
display: flex;
|
|
1957
2558
|
align-items: center;
|
|
1958
2559
|
justify-content: center;
|
|
1959
2560
|
padding: 24px;
|
|
1960
2561
|
box-sizing: border-box;
|
|
1961
2562
|
}
|
|
1962
|
-
.add-page-
|
|
2563
|
+
.add-page-discard-confirm-dialog {
|
|
1963
2564
|
background: var(--harmony-bg-surface);
|
|
1964
2565
|
border: 1px solid var(--harmony-border);
|
|
1965
|
-
border-radius: var(--harmony-radius-
|
|
1966
|
-
width: min(
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
padding: 14px 16px;
|
|
2566
|
+
border-radius: var(--harmony-radius-lg);
|
|
2567
|
+
width: min(400px, 100%);
|
|
2568
|
+
padding: 20px 24px;
|
|
2569
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
1970
2570
|
display: flex;
|
|
1971
2571
|
flex-direction: column;
|
|
1972
|
-
gap:
|
|
1973
|
-
box-shadow: var(--harmony-shadow-lg);
|
|
2572
|
+
gap: 16px;
|
|
1974
2573
|
}
|
|
1975
|
-
.add-page-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
min-height: 64px;
|
|
1980
|
-
background: var(--harmony-bg-surface);
|
|
2574
|
+
.add-page-discard-confirm-msg {
|
|
2575
|
+
margin: 0;
|
|
2576
|
+
font-size: 14px;
|
|
2577
|
+
line-height: 1.45;
|
|
1981
2578
|
color: var(--harmony-text);
|
|
1982
|
-
border: 1px solid var(--harmony-border);
|
|
1983
|
-
border-radius: var(--harmony-radius-sm);
|
|
1984
|
-
padding: 8px;
|
|
1985
|
-
font-size: 12px;
|
|
1986
|
-
font-family: var(--harmony-mono);
|
|
1987
|
-
resize: vertical;
|
|
1988
|
-
box-sizing: border-box;
|
|
1989
2579
|
}
|
|
1990
|
-
.add-page-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
text-align: center;
|
|
1995
|
-
color: var(--harmony-text-muted);
|
|
1996
|
-
font-size: 12px;
|
|
1997
|
-
cursor: pointer;
|
|
2580
|
+
.add-page-discard-confirm-actions {
|
|
2581
|
+
display: flex;
|
|
2582
|
+
justify-content: flex-end;
|
|
2583
|
+
gap: 8px;
|
|
1998
2584
|
}
|
|
1999
|
-
.add-page-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2585
|
+
.add-page-tab-panel {
|
|
2586
|
+
display: flex;
|
|
2587
|
+
flex-direction: column;
|
|
2588
|
+
gap: 8px;
|
|
2589
|
+
flex: 1;
|
|
2590
|
+
min-height: 0;
|
|
2591
|
+
}
|
|
2592
|
+
.add-page-tab-panel .add-page-textarea {
|
|
2593
|
+
flex: 1;
|
|
2594
|
+
min-height: 200px;
|
|
2595
|
+
}
|
|
2596
|
+
.add-page-tab-editor {
|
|
2597
|
+
display: flex;
|
|
2598
|
+
flex-direction: column;
|
|
2599
|
+
gap: 8px;
|
|
2600
|
+
flex: 1;
|
|
2601
|
+
min-height: 0;
|
|
2602
|
+
}
|
|
2603
|
+
.add-page-references { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
|
|
2604
|
+
.asset-mention-autocomplete {
|
|
2605
|
+
position: fixed;
|
|
2606
|
+
z-index: 12000;
|
|
2607
|
+
min-width: 280px;
|
|
2608
|
+
max-width: min(420px, calc(100vw - 16px));
|
|
2609
|
+
max-height: 320px;
|
|
2610
|
+
display: flex;
|
|
2611
|
+
flex-direction: column;
|
|
2008
2612
|
overflow: hidden;
|
|
2613
|
+
padding: 0;
|
|
2009
2614
|
border: 1px solid var(--harmony-border);
|
|
2010
|
-
|
|
2615
|
+
border-radius: var(--harmony-radius-md);
|
|
2616
|
+
background: var(--harmony-bg-surface);
|
|
2617
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
2011
2618
|
}
|
|
2012
|
-
.
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2619
|
+
.asset-mention-autocomplete[hidden] {
|
|
2620
|
+
display: none !important;
|
|
2621
|
+
}
|
|
2622
|
+
.asset-mention-autocomplete--above {
|
|
2623
|
+
transform: translateY(-100%);
|
|
2624
|
+
}
|
|
2625
|
+
.asset-mention-header {
|
|
2626
|
+
display: flex;
|
|
2627
|
+
align-items: center;
|
|
2628
|
+
gap: 6px;
|
|
2629
|
+
padding: 6px 8px;
|
|
2630
|
+
border-bottom: 1px solid var(--harmony-border);
|
|
2631
|
+
flex-shrink: 0;
|
|
2632
|
+
min-width: 0;
|
|
2633
|
+
}
|
|
2634
|
+
.asset-mention-header-back {
|
|
2635
|
+
flex-shrink: 0;
|
|
2636
|
+
width: 28px;
|
|
2637
|
+
height: 28px;
|
|
2019
2638
|
border: none;
|
|
2020
|
-
border-radius:
|
|
2021
|
-
|
|
2022
|
-
|
|
2639
|
+
border-radius: var(--harmony-radius-sm);
|
|
2640
|
+
background: transparent;
|
|
2641
|
+
color: var(--harmony-text-muted);
|
|
2642
|
+
font-size: 16px;
|
|
2643
|
+
line-height: 1;
|
|
2644
|
+
cursor: pointer;
|
|
2645
|
+
}
|
|
2646
|
+
.asset-mention-header-back:hover {
|
|
2647
|
+
background: var(--harmony-bg-hover);
|
|
2648
|
+
color: var(--harmony-text);
|
|
2649
|
+
}
|
|
2650
|
+
.asset-mention-header-title {
|
|
2651
|
+
flex: 1;
|
|
2652
|
+
min-width: 0;
|
|
2023
2653
|
font-size: 12px;
|
|
2654
|
+
font-weight: 600;
|
|
2655
|
+
color: var(--harmony-text-muted);
|
|
2656
|
+
overflow: hidden;
|
|
2657
|
+
text-overflow: ellipsis;
|
|
2658
|
+
white-space: nowrap;
|
|
2659
|
+
}
|
|
2660
|
+
.asset-mention-header-search-toggle,
|
|
2661
|
+
.asset-mention-header-search-close {
|
|
2662
|
+
flex-shrink: 0;
|
|
2663
|
+
width: 28px;
|
|
2664
|
+
height: 28px;
|
|
2665
|
+
border: none;
|
|
2666
|
+
border-radius: var(--harmony-radius-sm);
|
|
2667
|
+
background: transparent;
|
|
2668
|
+
color: var(--harmony-text-muted);
|
|
2669
|
+
font-size: 22px;
|
|
2024
2670
|
line-height: 1;
|
|
2025
2671
|
cursor: pointer;
|
|
2026
|
-
padding: 0;
|
|
2027
2672
|
}
|
|
2028
|
-
.
|
|
2029
|
-
|
|
2030
|
-
|
|
2673
|
+
.asset-mention-header-search-toggle {
|
|
2674
|
+
font-size: 24px;
|
|
2675
|
+
}
|
|
2676
|
+
.asset-mention-header-search-toggle:hover,
|
|
2677
|
+
.asset-mention-header-search-close:hover {
|
|
2678
|
+
background: var(--harmony-bg-hover);
|
|
2679
|
+
color: var(--harmony-text);
|
|
2680
|
+
}
|
|
2681
|
+
.asset-mention-header-search-field {
|
|
2031
2682
|
flex: 1;
|
|
2032
|
-
min-width:
|
|
2683
|
+
min-width: 0;
|
|
2684
|
+
display: flex;
|
|
2685
|
+
align-items: center;
|
|
2686
|
+
gap: 6px;
|
|
2687
|
+
padding: 4px 10px;
|
|
2688
|
+
border: 1px solid var(--harmony-border);
|
|
2689
|
+
border-radius: 999px;
|
|
2033
2690
|
background: var(--harmony-bg-surface);
|
|
2691
|
+
}
|
|
2692
|
+
.asset-mention-header-search-icon {
|
|
2693
|
+
color: var(--harmony-text-muted);
|
|
2694
|
+
font-size: 22px;
|
|
2695
|
+
line-height: 1;
|
|
2696
|
+
flex-shrink: 0;
|
|
2697
|
+
}
|
|
2698
|
+
.asset-mention-header-search-input {
|
|
2699
|
+
flex: 1;
|
|
2700
|
+
min-width: 0;
|
|
2701
|
+
border: none;
|
|
2702
|
+
background: transparent;
|
|
2703
|
+
color: var(--harmony-text);
|
|
2704
|
+
font-family: var(--harmony-font);
|
|
2705
|
+
font-size: 13px;
|
|
2706
|
+
outline: none;
|
|
2707
|
+
}
|
|
2708
|
+
.asset-mention-header-search-input::-webkit-search-cancel-button {
|
|
2709
|
+
-webkit-appearance: none;
|
|
2710
|
+
display: none;
|
|
2711
|
+
}
|
|
2712
|
+
.asset-mention-header-search-input::placeholder {
|
|
2713
|
+
color: var(--harmony-text-muted);
|
|
2714
|
+
}
|
|
2715
|
+
.asset-mention-list {
|
|
2716
|
+
overflow: auto;
|
|
2717
|
+
padding: 4px;
|
|
2718
|
+
flex: 1;
|
|
2719
|
+
min-height: 0;
|
|
2720
|
+
}
|
|
2721
|
+
.asset-mention-option {
|
|
2722
|
+
display: flex;
|
|
2723
|
+
align-items: center;
|
|
2724
|
+
gap: 8px;
|
|
2725
|
+
width: 100%;
|
|
2726
|
+
padding: 8px 10px;
|
|
2727
|
+
border: none;
|
|
2728
|
+
border-radius: var(--harmony-radius-sm);
|
|
2729
|
+
background: transparent;
|
|
2034
2730
|
color: var(--harmony-text);
|
|
2731
|
+
text-align: left;
|
|
2732
|
+
cursor: pointer;
|
|
2733
|
+
font: inherit;
|
|
2734
|
+
}
|
|
2735
|
+
.asset-mention-option:hover,
|
|
2736
|
+
.asset-mention-option--active {
|
|
2737
|
+
background: var(--harmony-bg-hover);
|
|
2738
|
+
}
|
|
2739
|
+
.asset-mention-option-thumb {
|
|
2740
|
+
width: 20px;
|
|
2741
|
+
height: 20px;
|
|
2742
|
+
border-radius: 3px;
|
|
2743
|
+
object-fit: cover;
|
|
2744
|
+
flex-shrink: 0;
|
|
2745
|
+
}
|
|
2746
|
+
.asset-mention-option-icon {
|
|
2747
|
+
width: 20px;
|
|
2748
|
+
height: 20px;
|
|
2749
|
+
display: inline-flex;
|
|
2750
|
+
align-items: center;
|
|
2751
|
+
justify-content: center;
|
|
2752
|
+
flex-shrink: 0;
|
|
2753
|
+
font-size: 12px;
|
|
2754
|
+
color: var(--harmony-text-muted);
|
|
2755
|
+
border-radius: 3px;
|
|
2756
|
+
background: var(--harmony-bg-subtle);
|
|
2757
|
+
}
|
|
2758
|
+
.asset-mention-option-icon--at {
|
|
2759
|
+
font-weight: 700;
|
|
2760
|
+
color: var(--harmony-primary);
|
|
2761
|
+
background: var(--harmony-primary-soft);
|
|
2762
|
+
}
|
|
2763
|
+
.asset-mention-option-icon--nav {
|
|
2764
|
+
font-size: 16px;
|
|
2765
|
+
font-weight: 600;
|
|
2766
|
+
color: var(--harmony-text-muted);
|
|
2767
|
+
}
|
|
2768
|
+
.asset-mention-option-icon--back {
|
|
2769
|
+
font-size: 14px;
|
|
2770
|
+
font-weight: 600;
|
|
2771
|
+
color: var(--harmony-text-muted);
|
|
2772
|
+
}
|
|
2773
|
+
.asset-mention-option--nav .asset-mention-option-title {
|
|
2774
|
+
font-weight: 500;
|
|
2775
|
+
}
|
|
2776
|
+
.asset-mention-option-text {
|
|
2777
|
+
display: flex;
|
|
2778
|
+
flex-direction: column;
|
|
2779
|
+
min-width: 0;
|
|
2780
|
+
gap: 1px;
|
|
2781
|
+
}
|
|
2782
|
+
.asset-mention-option-title {
|
|
2783
|
+
font-size: 13px;
|
|
2784
|
+
font-weight: 600;
|
|
2785
|
+
line-height: 1.3;
|
|
2786
|
+
overflow: hidden;
|
|
2787
|
+
text-overflow: ellipsis;
|
|
2788
|
+
white-space: nowrap;
|
|
2789
|
+
}
|
|
2790
|
+
.asset-mention-option-subtitle {
|
|
2791
|
+
font-size: 11px;
|
|
2792
|
+
color: var(--harmony-text-muted);
|
|
2793
|
+
line-height: 1.2;
|
|
2794
|
+
overflow: hidden;
|
|
2795
|
+
text-overflow: ellipsis;
|
|
2796
|
+
white-space: nowrap;
|
|
2797
|
+
}
|
|
2798
|
+
.add-page-body { flex: 1; overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
|
|
2799
|
+
.add-page-section-label { font-size: 11px; font-weight: 600; color: var(--harmony-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
|
|
2800
|
+
.add-page-tab-editor-actions {
|
|
2801
|
+
display: flex;
|
|
2802
|
+
justify-content: flex-end;
|
|
2803
|
+
flex-shrink: 0;
|
|
2804
|
+
margin-top: 8px;
|
|
2805
|
+
}
|
|
2806
|
+
.add-page-btn--compact {
|
|
2807
|
+
flex: 0 0 auto;
|
|
2808
|
+
padding: 6px 14px;
|
|
2809
|
+
font-size: 12px;
|
|
2810
|
+
min-width: 0;
|
|
2811
|
+
}
|
|
2812
|
+
.add-page-references-row {
|
|
2813
|
+
display: flex;
|
|
2814
|
+
align-items: center;
|
|
2815
|
+
gap: 8px;
|
|
2816
|
+
}
|
|
2817
|
+
.add-page-references-row .add-page-dropzone {
|
|
2818
|
+
flex: 1;
|
|
2819
|
+
min-width: 0;
|
|
2820
|
+
margin: 0;
|
|
2821
|
+
}
|
|
2822
|
+
.add-page-references-row .add-page-btn--compact {
|
|
2823
|
+
flex-shrink: 0;
|
|
2824
|
+
white-space: nowrap;
|
|
2825
|
+
}
|
|
2826
|
+
.add-page-suggested-route {
|
|
2827
|
+
display: flex;
|
|
2828
|
+
flex-wrap: wrap;
|
|
2829
|
+
align-items: center;
|
|
2830
|
+
gap: 8px;
|
|
2831
|
+
background: var(--harmony-bg-subtle);
|
|
2035
2832
|
border: 1px solid var(--harmony-border);
|
|
2036
2833
|
border-radius: var(--harmony-radius-sm);
|
|
2037
2834
|
padding: 8px 10px;
|
|
2038
|
-
font-size:
|
|
2039
|
-
|
|
2835
|
+
font-size: 12px;
|
|
2836
|
+
color: var(--harmony-text-secondary);
|
|
2837
|
+
margin-bottom: 8px;
|
|
2838
|
+
}
|
|
2839
|
+
.add-page-suggested-route code { font-family: var(--harmony-mono); color: var(--harmony-primary); }
|
|
2840
|
+
.add-page-brief-fill-popover {
|
|
2841
|
+
position: absolute;
|
|
2842
|
+
inset: 0;
|
|
2843
|
+
z-index: 10;
|
|
2844
|
+
background: rgba(255, 255, 255, 0.6);
|
|
2845
|
+
backdrop-filter: blur(8px);
|
|
2846
|
+
-webkit-backdrop-filter: blur(8px);
|
|
2847
|
+
display: flex;
|
|
2848
|
+
align-items: center;
|
|
2849
|
+
justify-content: center;
|
|
2850
|
+
padding: 24px;
|
|
2040
2851
|
box-sizing: border-box;
|
|
2041
2852
|
}
|
|
2042
|
-
.add-page-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
width: 100
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2853
|
+
.add-page-brief-fill-popover-stack {
|
|
2854
|
+
display: flex;
|
|
2855
|
+
flex-direction: column;
|
|
2856
|
+
align-items: center;
|
|
2857
|
+
gap: 10px;
|
|
2858
|
+
width: min(420px, 100%);
|
|
2859
|
+
max-height: 90%;
|
|
2860
|
+
}
|
|
2861
|
+
.add-page-brief-fill-stop-confirm {
|
|
2862
|
+
align-self: center;
|
|
2863
|
+
max-width: 100%;
|
|
2864
|
+
white-space: normal;
|
|
2865
|
+
text-align: center;
|
|
2866
|
+
flex-wrap: wrap;
|
|
2867
|
+
justify-content: center;
|
|
2868
|
+
}
|
|
2869
|
+
.add-page-brief-fill-panel {
|
|
2870
|
+
background: var(--harmony-bg-surface);
|
|
2871
|
+
border: 1px solid var(--harmony-border);
|
|
2872
|
+
border-radius: var(--harmony-radius-md);
|
|
2873
|
+
width: 100%;
|
|
2874
|
+
max-height: 100%;
|
|
2875
|
+
overflow: auto;
|
|
2876
|
+
padding: 14px 16px;
|
|
2877
|
+
display: flex;
|
|
2878
|
+
flex-direction: column;
|
|
2879
|
+
gap: 10px;
|
|
2880
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
2881
|
+
}
|
|
2882
|
+
.add-page-brief-fill-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
2883
|
+
.add-page-brief-fill-title { font-size: 13px; font-weight: 600; color: var(--harmony-text); }
|
|
2884
|
+
.add-page-brief-fill-context {
|
|
2885
|
+
width: 100%;
|
|
2886
|
+
min-height: 64px;
|
|
2887
|
+
background: var(--harmony-bg-surface);
|
|
2888
|
+
color: var(--harmony-text);
|
|
2889
|
+
border: 1px solid var(--harmony-border);
|
|
2890
|
+
border-radius: var(--harmony-radius-sm);
|
|
2891
|
+
padding: 8px;
|
|
2892
|
+
font-size: 12px;
|
|
2893
|
+
font-family: var(--harmony-mono);
|
|
2894
|
+
resize: vertical;
|
|
2895
|
+
box-sizing: border-box;
|
|
2896
|
+
}
|
|
2897
|
+
.add-page-brief-fill-dropzone {
|
|
2898
|
+
border: 1px dashed var(--harmony-border-strong);
|
|
2899
|
+
border-radius: var(--harmony-radius-md);
|
|
2900
|
+
padding: 14px;
|
|
2901
|
+
text-align: center;
|
|
2902
|
+
color: var(--harmony-text-muted);
|
|
2903
|
+
font-size: 12px;
|
|
2904
|
+
cursor: pointer;
|
|
2905
|
+
}
|
|
2906
|
+
.add-page-brief-fill-dropzone-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
|
|
2907
|
+
.add-page-brief-fill-context:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
2908
|
+
.add-page-brief-fill-dropzone:focus { outline: none; border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
|
|
2909
|
+
.add-page-brief-fill-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
2910
|
+
.add-page-brief-fill-thumb {
|
|
2911
|
+
position: relative;
|
|
2912
|
+
width: 72px;
|
|
2913
|
+
height: 72px;
|
|
2914
|
+
border-radius: var(--harmony-radius-sm);
|
|
2915
|
+
overflow: hidden;
|
|
2916
|
+
border: 1px solid var(--harmony-border);
|
|
2917
|
+
background: var(--harmony-bg-subtle);
|
|
2918
|
+
}
|
|
2919
|
+
.add-page-brief-fill-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
2920
|
+
.add-page-brief-fill-thumb-remove {
|
|
2921
|
+
position: absolute;
|
|
2922
|
+
top: 2px;
|
|
2923
|
+
right: 2px;
|
|
2924
|
+
background: rgba(22, 45, 61, 0.7);
|
|
2925
|
+
color: #fff;
|
|
2926
|
+
border: none;
|
|
2927
|
+
border-radius: 3px;
|
|
2928
|
+
width: 18px;
|
|
2929
|
+
height: 18px;
|
|
2930
|
+
font-size: 12px;
|
|
2931
|
+
line-height: 1;
|
|
2932
|
+
cursor: pointer;
|
|
2933
|
+
padding: 0;
|
|
2934
|
+
}
|
|
2935
|
+
.add-page-brief-fill-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
|
|
2936
|
+
.add-page-route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
2937
|
+
.add-page-route-input {
|
|
2938
|
+
flex: 1;
|
|
2939
|
+
min-width: 160px;
|
|
2940
|
+
background: var(--harmony-bg-surface);
|
|
2941
|
+
color: var(--harmony-text);
|
|
2942
|
+
border: 1px solid var(--harmony-border);
|
|
2943
|
+
border-radius: var(--harmony-radius-sm);
|
|
2944
|
+
padding: 8px 10px;
|
|
2945
|
+
font-size: 13px;
|
|
2946
|
+
font-family: var(--harmony-mono);
|
|
2947
|
+
box-sizing: border-box;
|
|
2948
|
+
}
|
|
2949
|
+
.add-page-route-input:focus { border-color: var(--harmony-primary); outline: none; box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
|
|
2950
|
+
.add-page-route-input--error { border-color: var(--harmony-danger); }
|
|
2951
|
+
.add-page-route-input--error:focus { border-color: var(--harmony-danger); box-shadow: 0 0 0 3px var(--harmony-danger-soft); }
|
|
2952
|
+
.add-page-route-badge { font-size: 10px; color: var(--harmony-primary); background: var(--harmony-primary-soft); padding: 2px 8px; border-radius: 4px; }
|
|
2953
|
+
.add-page-field-error { font-size: 12px; color: var(--harmony-danger); margin-top: 4px; }
|
|
2954
|
+
.add-page-hint { font-size: 12px; color: var(--harmony-text-muted); margin-top: 4px; }
|
|
2955
|
+
.add-page-textarea {
|
|
2956
|
+
width: 100%;
|
|
2957
|
+
min-height: 120px;
|
|
2958
|
+
background: var(--harmony-bg-surface);
|
|
2959
|
+
color: var(--harmony-text);
|
|
2960
|
+
border: 1px solid var(--harmony-border);
|
|
2961
|
+
border-radius: var(--harmony-radius-sm);
|
|
2962
|
+
padding: 10px;
|
|
2963
|
+
font-size: 12px;
|
|
2964
|
+
font-family: var(--harmony-mono);
|
|
2965
|
+
resize: none;
|
|
2966
|
+
box-sizing: border-box;
|
|
2967
|
+
outline: none;
|
|
2968
|
+
}
|
|
2969
|
+
.add-page-textarea-wrap {
|
|
2970
|
+
position: relative;
|
|
2971
|
+
flex: 1;
|
|
2972
|
+
display: flex;
|
|
2973
|
+
min-height: 0;
|
|
2974
|
+
}
|
|
2975
|
+
.add-page-textarea-wrap .add-page-textarea {
|
|
2976
|
+
flex: 1;
|
|
2977
|
+
}
|
|
2978
|
+
.add-page-fill-image-btn {
|
|
2979
|
+
position: absolute;
|
|
2980
|
+
bottom: 8px;
|
|
2981
|
+
right: 8px;
|
|
2982
|
+
width: 32px;
|
|
2983
|
+
height: 32px;
|
|
2984
|
+
padding: 0;
|
|
2985
|
+
display: grid;
|
|
2986
|
+
place-items: center;
|
|
2987
|
+
line-height: 0;
|
|
2988
|
+
font-size: 0;
|
|
2989
|
+
background: var(--harmony-bg-surface);
|
|
2990
|
+
border: 1px solid var(--harmony-border);
|
|
2991
|
+
border-radius: var(--harmony-radius-sm);
|
|
2992
|
+
color: var(--harmony-text-muted);
|
|
2993
|
+
cursor: pointer;
|
|
2994
|
+
box-shadow: 0 1px 2px rgba(22, 45, 61, 0.08);
|
|
2995
|
+
z-index: 2;
|
|
2996
|
+
}
|
|
2997
|
+
.add-page-fill-image-btn:hover:not(:disabled) {
|
|
2998
|
+
color: var(--harmony-text);
|
|
2999
|
+
background: var(--harmony-bg-hover);
|
|
3000
|
+
border-color: var(--harmony-border-strong);
|
|
3001
|
+
}
|
|
3002
|
+
.add-page-fill-image-btn:disabled {
|
|
3003
|
+
opacity: 0.5;
|
|
3004
|
+
cursor: not-allowed;
|
|
3005
|
+
}
|
|
3006
|
+
.add-page-fill-image-icon {
|
|
3007
|
+
width: 24px;
|
|
3008
|
+
height: 24px;
|
|
3009
|
+
display: block;
|
|
3010
|
+
margin: auto;
|
|
3011
|
+
flex-shrink: 0;
|
|
3012
|
+
overflow: visible;
|
|
3013
|
+
}
|
|
3014
|
+
.add-page-textarea:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
|
|
3015
|
+
.add-page-dropzone {
|
|
3016
|
+
border: 1px dashed var(--harmony-border-strong);
|
|
3017
|
+
border-radius: var(--harmony-radius-md);
|
|
3018
|
+
padding: 12px 16px;
|
|
3019
|
+
text-align: center;
|
|
3020
|
+
color: var(--harmony-text-muted);
|
|
3021
|
+
font-size: 12px;
|
|
3022
|
+
display: flex;
|
|
3023
|
+
align-items: center;
|
|
3024
|
+
justify-content: center;
|
|
3025
|
+
gap: 12px;
|
|
3026
|
+
flex-wrap: nowrap;
|
|
3027
|
+
}
|
|
3028
|
+
.add-page-dropzone-text {
|
|
3029
|
+
flex: 0 1 auto;
|
|
3030
|
+
}
|
|
3031
|
+
.add-page-dropzone-separator {
|
|
3032
|
+
flex: 0 0 auto;
|
|
3033
|
+
color: var(--harmony-text-muted);
|
|
3034
|
+
}
|
|
3035
|
+
.add-page-dropzone .add-page-btn--compact {
|
|
3036
|
+
flex: 0 0 auto;
|
|
3037
|
+
}
|
|
3038
|
+
.add-page-dropzone--disabled {
|
|
3039
|
+
opacity: 0.45;
|
|
3040
|
+
cursor: not-allowed;
|
|
3041
|
+
pointer-events: none;
|
|
3042
|
+
}
|
|
3043
|
+
.add-page-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
|
|
3044
|
+
.add-page-chip {
|
|
3045
|
+
display: flex;
|
|
3046
|
+
align-items: center;
|
|
3047
|
+
gap: 8px;
|
|
3048
|
+
background: var(--harmony-bg-subtle);
|
|
3049
|
+
border: 1px solid var(--harmony-border);
|
|
3050
|
+
border-radius: var(--harmony-radius-sm);
|
|
3051
|
+
padding: 6px 8px;
|
|
3052
|
+
font-size: 11px;
|
|
3053
|
+
}
|
|
3054
|
+
.add-page-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--harmony-text-secondary); }
|
|
3055
|
+
.add-page-chip-path { font-size: 10px; color: var(--harmony-text-muted); font-family: var(--harmony-mono); }
|
|
3056
|
+
.add-page-chip select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; padding: 2px 4px; }
|
|
3057
|
+
.add-page-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
|
|
3058
|
+
.add-page-chip-remove:hover { color: var(--harmony-danger); }
|
|
3059
|
+
.add-page-plugins {
|
|
3060
|
+
border: 1px solid var(--harmony-border);
|
|
3061
|
+
border-radius: var(--harmony-radius-md);
|
|
3062
|
+
padding: 10px;
|
|
3063
|
+
margin-top: 8px;
|
|
3064
|
+
display: flex;
|
|
3065
|
+
flex-direction: column;
|
|
3066
|
+
gap: 12px;
|
|
3067
|
+
max-height: 320px;
|
|
3068
|
+
overflow: auto;
|
|
3069
|
+
}
|
|
3070
|
+
.add-menu-panel.add-page-plugins,
|
|
3071
|
+
.annotation-add-menu-panel.add-menu-panel {
|
|
3072
|
+
max-height: min(320px, 42vh);
|
|
3073
|
+
overflow: hidden;
|
|
3074
|
+
gap: 8px;
|
|
3075
|
+
min-height: 0;
|
|
3076
|
+
display: flex;
|
|
3077
|
+
flex-direction: column;
|
|
3078
|
+
}
|
|
3079
|
+
.add-menu-panel .add-page-plugins-zone-title { flex-shrink: 0; }
|
|
3080
|
+
.add-menu-panel .add-menu-panel-attached { flex: 0 1 auto; min-height: 0; max-height: 120px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
|
|
3081
|
+
.add-menu-panel .add-page-plugin-chips { margin-top: 0; }
|
|
3082
|
+
.annotation-add-menu-panel .add-page-plugin-chips,
|
|
3083
|
+
.add-menu-panel .add-page-plugin-chips { align-items: stretch; }
|
|
3084
|
+
.annotation-add-menu-panel .add-page-plugin-chip,
|
|
3085
|
+
.add-menu-panel .add-page-plugin-chip { width: 100%; max-width: 100%; box-sizing: border-box; }
|
|
3086
|
+
.add-menu-panel .add-page-btn,
|
|
3087
|
+
.add-menu-panel .add-page-manage-link,
|
|
3088
|
+
.add-menu-panel .add-page-hint,
|
|
3089
|
+
.add-menu-panel .add-page-field-error,
|
|
3090
|
+
.add-menu-panel .add-menu-route-params,
|
|
3091
|
+
.add-menu-panel .add-page-suggested-route,
|
|
3092
|
+
.add-menu-panel .add-menu-route-confirm { flex-shrink: 0; }
|
|
3093
|
+
.add-menu-panel .add-menu-popover { flex-shrink: 0; min-height: 180px; max-height: min(240px, 36vh); margin-top: 4px; }
|
|
3094
|
+
.add-menu-panel .add-menu-nav { min-height: 140px; }
|
|
3095
|
+
.add-page-plugins-zone-title { font-size: 11px; font-weight: 600; color: var(--harmony-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
|
|
3096
|
+
.add-page-plugin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--harmony-border); }
|
|
3097
|
+
.add-page-plugin-row:last-child { border-bottom: none; }
|
|
3098
|
+
.add-page-plugin-label { flex: 1; color: var(--harmony-text-secondary); }
|
|
3099
|
+
.add-page-plugin-btn {
|
|
3100
|
+
background: var(--harmony-bg-subtle);
|
|
3101
|
+
color: var(--harmony-text-secondary);
|
|
3102
|
+
border: 1px solid var(--harmony-border);
|
|
3103
|
+
border-radius: var(--harmony-radius-sm);
|
|
3104
|
+
padding: 2px 8px;
|
|
3105
|
+
font-size: 10px;
|
|
3106
|
+
cursor: pointer;
|
|
3107
|
+
}
|
|
3108
|
+
.add-page-plugin-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
|
|
3109
|
+
.add-page-plugin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
3110
|
+
.add-page-plugin-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
|
|
3111
|
+
.add-page-setup-ok { color: var(--harmony-success); font-size: 10px; }
|
|
3112
|
+
.add-page-setup-warn { color: var(--harmony-warning); font-size: 10px; }
|
|
3113
|
+
.add-page-setup-error { color: var(--harmony-danger); font-size: 10px; }
|
|
3114
|
+
.add-page-plugin-contract { padding-left: 0; font-size: 11px; color: var(--harmony-text-muted); display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
|
|
3115
|
+
.add-page-plugin-contract-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--harmony-border); }
|
|
3116
|
+
.add-page-plugin-contract-row:last-child { border-bottom: none; }
|
|
3117
|
+
.add-page-plugin-contract-name { flex: 1; color: var(--harmony-text-secondary); font-size: 11px; }
|
|
3118
|
+
.add-page-plugin-contract-added { font-size: 10px; color: var(--harmony-success); }
|
|
3119
|
+
.add-page-plugin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
|
|
3120
|
+
.add-page-plugin-chip {
|
|
3121
|
+
background: var(--harmony-bg-subtle);
|
|
3122
|
+
border: 1px solid var(--harmony-border);
|
|
3123
|
+
border-radius: var(--harmony-radius-sm);
|
|
3124
|
+
padding: 2px 6px;
|
|
3125
|
+
font-size: 10px;
|
|
3126
|
+
color: var(--harmony-text-secondary);
|
|
3127
|
+
display: inline-flex;
|
|
3128
|
+
align-items: center;
|
|
3129
|
+
gap: 4px;
|
|
3130
|
+
max-width: 100%;
|
|
3131
|
+
min-width: 0;
|
|
3132
|
+
}
|
|
3133
|
+
.add-page-plugin-chip-text {
|
|
3134
|
+
flex: 1 1 auto;
|
|
3135
|
+
min-width: 0;
|
|
3136
|
+
overflow: hidden;
|
|
3137
|
+
text-overflow: ellipsis;
|
|
3138
|
+
white-space: nowrap;
|
|
3139
|
+
}
|
|
3140
|
+
.add-page-plugin-chip-thumb {
|
|
3141
|
+
width: 32px;
|
|
3142
|
+
height: 32px;
|
|
3143
|
+
border-radius: 6px;
|
|
3144
|
+
object-fit: cover;
|
|
3145
|
+
flex-shrink: 0;
|
|
3146
|
+
border: 1px solid var(--harmony-border);
|
|
3147
|
+
background: var(--harmony-bg-subtle);
|
|
3148
|
+
}
|
|
3149
|
+
.add-page-plugin-chip-info-icon {
|
|
3150
|
+
display: flex;
|
|
3151
|
+
align-items: center;
|
|
3152
|
+
justify-content: center;
|
|
3153
|
+
width: 32px;
|
|
3154
|
+
height: 32px;
|
|
3155
|
+
border-radius: 6px;
|
|
3156
|
+
flex-shrink: 0;
|
|
3157
|
+
background: var(--harmony-bg-subtle);
|
|
3158
|
+
border: 1px solid var(--harmony-border);
|
|
3159
|
+
color: var(--harmony-text-muted);
|
|
3160
|
+
font-size: 14px;
|
|
3161
|
+
line-height: 1;
|
|
3162
|
+
}
|
|
3163
|
+
.add-page-plugin-chip-sub {
|
|
3164
|
+
color: var(--harmony-text-muted);
|
|
3165
|
+
margin-left: 4px;
|
|
3166
|
+
}
|
|
3167
|
+
.add-page-plugin-chip-remove,
|
|
3168
|
+
.add-page-plugin-chip-at {
|
|
3169
|
+
flex-shrink: 0;
|
|
3170
|
+
}
|
|
3171
|
+
.add-page-plugin-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; padding: 0 2px; }
|
|
3172
|
+
.add-page-plugins-warn { font-size: 11px; color: var(--harmony-warning); margin-top: 4px; }
|
|
3173
|
+
.add-page-install-live { font-size: 11px; color: var(--harmony-text-muted); }
|
|
3174
|
+
.add-page-local-plugin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--harmony-border); }
|
|
3175
|
+
.add-page-local-plugin-form input {
|
|
3176
|
+
background: var(--harmony-bg-surface);
|
|
3177
|
+
color: var(--harmony-text);
|
|
3178
|
+
border: 1px solid var(--harmony-border);
|
|
3179
|
+
border-radius: var(--harmony-radius-sm);
|
|
3180
|
+
padding: 4px 6px;
|
|
3181
|
+
font-size: 11px;
|
|
3182
|
+
}
|
|
3183
|
+
.add-page-plugin-picker {
|
|
3184
|
+
width: 100%;
|
|
3185
|
+
background: var(--harmony-bg-surface);
|
|
3186
|
+
color: var(--harmony-text);
|
|
3187
|
+
border: 1px solid var(--harmony-border);
|
|
3188
|
+
border-radius: var(--harmony-radius-sm);
|
|
3189
|
+
font-size: 12px;
|
|
3190
|
+
padding: 6px 8px;
|
|
3191
|
+
margin-top: 6px;
|
|
3192
|
+
}
|
|
3193
|
+
.add-page-manage-link { font-size: 11px; color: var(--harmony-primary); cursor: pointer; margin-top: 6px; background: none; border: none; padding: 0; text-align: left; }
|
|
3194
|
+
.annotation-binding { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
|
|
3195
|
+
.annotation-add-menu { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
|
|
3196
|
+
.annotation-add-menu-toggle { background: none; border: none; color: var(--harmony-primary); font-size: 11px; cursor: pointer; padding: 0; text-align: left; }
|
|
3197
|
+
.annotation-add-menu-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--harmony-text-secondary); }
|
|
3198
|
+
.change-request-add-menu { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--harmony-border); border-radius: var(--harmony-radius-md); background: var(--harmony-bg-subtle); }
|
|
3199
|
+
.add-menu-route-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
|
|
3200
|
+
.add-menu-popover {
|
|
3201
|
+
border: 1px solid var(--harmony-border);
|
|
3202
|
+
border-radius: var(--harmony-radius-sm);
|
|
3203
|
+
padding: 8px;
|
|
3204
|
+
background: var(--harmony-bg-subtle);
|
|
3205
|
+
margin-top: 6px;
|
|
3206
|
+
display: flex;
|
|
3207
|
+
flex-direction: column;
|
|
3208
|
+
gap: 6px;
|
|
3209
|
+
min-height: 0;
|
|
3210
|
+
max-width: 100%;
|
|
3211
|
+
max-height: min(320px, 50vh);
|
|
3212
|
+
overflow: hidden;
|
|
3213
|
+
}
|
|
3214
|
+
.add-menu-popover-header {
|
|
3215
|
+
display: flex;
|
|
3216
|
+
justify-content: space-between;
|
|
3217
|
+
align-items: center;
|
|
3218
|
+
font-size: 11px;
|
|
3219
|
+
font-weight: 600;
|
|
3220
|
+
color: var(--harmony-text-secondary);
|
|
3221
|
+
border-bottom: 1px solid var(--harmony-border);
|
|
3222
|
+
padding-bottom: 4px;
|
|
3223
|
+
margin-bottom: 4px;
|
|
3224
|
+
flex-shrink: 0;
|
|
3225
|
+
}
|
|
3226
|
+
.add-menu-popover-header button { background: none; border: none; color: var(--harmony-text-muted); font-size: 14px; cursor: pointer; padding: 0 4px; }
|
|
3227
|
+
.add-menu-popover-header button:hover { color: var(--harmony-text); }
|
|
3228
|
+
.add-menu-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; -webkit-overflow-scrolling: touch; }
|
|
3229
|
+
.add-menu-nav-row { display: contents; }
|
|
3230
|
+
.add-menu-nav-btn {
|
|
3231
|
+
background: var(--harmony-bg-surface);
|
|
3232
|
+
color: var(--harmony-text-secondary);
|
|
3233
|
+
border: 1px solid var(--harmony-border);
|
|
3234
|
+
border-radius: var(--harmony-radius-sm);
|
|
3235
|
+
padding: 4px 8px;
|
|
3236
|
+
font-size: 11px;
|
|
3237
|
+
cursor: pointer;
|
|
3238
|
+
text-align: left;
|
|
3239
|
+
}
|
|
3240
|
+
.add-menu-nav-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); border-color: var(--harmony-primary); }
|
|
3241
|
+
.add-menu-item-btn {
|
|
3242
|
+
background: var(--harmony-primary);
|
|
3243
|
+
color: #fff;
|
|
3244
|
+
border: none;
|
|
3245
|
+
border-radius: var(--harmony-radius-sm);
|
|
3246
|
+
padding: 4px 8px;
|
|
3247
|
+
font-size: 11px;
|
|
3248
|
+
cursor: pointer;
|
|
3249
|
+
text-align: left;
|
|
3250
|
+
}
|
|
3251
|
+
.add-menu-item-btn:hover { background: var(--harmony-primary-hover); }
|
|
3252
|
+
.annotation-binding-preview { font-size: 10px; color: var(--harmony-success); margin: 0; }
|
|
3253
|
+
.annotation-binding-panel label { display: flex; flex-direction: column; gap: 2px; }
|
|
3254
|
+
.annotation-binding-panel select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; }
|
|
3255
|
+
.annotation-binding-scope-row { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
3256
|
+
.annotation-binding-install {
|
|
3257
|
+
background: var(--harmony-primary);
|
|
3258
|
+
color: #fff;
|
|
3259
|
+
border: none;
|
|
3260
|
+
border-radius: var(--harmony-radius-sm);
|
|
3261
|
+
padding: 4px 8px;
|
|
3262
|
+
font-size: 10px;
|
|
3263
|
+
cursor: pointer;
|
|
3264
|
+
align-self: flex-start;
|
|
3265
|
+
}
|
|
3266
|
+
.add-page-footer {
|
|
3267
|
+
display: flex;
|
|
3268
|
+
gap: 12px;
|
|
3269
|
+
justify-content: flex-end;
|
|
3270
|
+
padding: 16px 28px 20px;
|
|
3271
|
+
border-top: 1px solid var(--harmony-border);
|
|
3272
|
+
flex-shrink: 0;
|
|
3273
|
+
background: var(--harmony-bg-surface);
|
|
3274
|
+
}
|
|
3275
|
+
.add-page-footer .add-page-btn { flex: 0 0 auto; min-width: 120px; }
|
|
3276
|
+
.add-page-btn { padding: 10px 20px; border-radius: var(--harmony-radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--harmony-border); }
|
|
3277
|
+
.add-page-btn-cancel { background: var(--harmony-bg-surface); color: var(--harmony-text-secondary); }
|
|
3278
|
+
.add-page-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
|
|
3279
|
+
.add-page-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
3280
|
+
.add-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
3281
|
+
.add-page-hidden-file { display: none; }
|
|
3282
|
+
|
|
3283
|
+
/* Legacy class aliases (kept for compatibility) */
|
|
3284
|
+
.main-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
|
|
3285
|
+
.main-top-bar { display: none; }
|
|
3286
|
+
.preview-stack { display: contents; }
|
|
3287
|
+
.preview-url-row { display: none; }
|
|
3288
|
+
.reset-btn {
|
|
3289
|
+
background: var(--harmony-bg-surface);
|
|
3290
|
+
border: 1px solid var(--harmony-border);
|
|
3291
|
+
color: var(--harmony-text-secondary);
|
|
3292
|
+
cursor: pointer;
|
|
3293
|
+
font-size: 14px;
|
|
3294
|
+
padding: 8px 12px;
|
|
3295
|
+
border-radius: var(--harmony-radius-pill);
|
|
3296
|
+
line-height: 1;
|
|
3297
|
+
}
|
|
3298
|
+
.reset-btn:hover { color: var(--harmony-text); border-color: var(--harmony-border-strong); }
|
|
3299
|
+
.route-picker-stack { display: contents; }
|
|
3300
|
+
|
|
3301
|
+
.stage-place-toolbar {
|
|
3302
|
+
display: flex;
|
|
3303
|
+
align-items: center;
|
|
3304
|
+
gap: 10px;
|
|
3305
|
+
margin-bottom: 8px;
|
|
3306
|
+
padding: 6px 12px;
|
|
3307
|
+
background: var(--harmony-bg-surface);
|
|
3308
|
+
border: 1px solid var(--harmony-primary);
|
|
3309
|
+
border-radius: var(--harmony-radius-pill);
|
|
3310
|
+
font-size: 12px;
|
|
3311
|
+
color: var(--harmony-text);
|
|
3312
|
+
}
|
|
3313
|
+
.stage-place-toolbar-cancel {
|
|
3314
|
+
background: transparent;
|
|
3315
|
+
border: 1px solid var(--harmony-border);
|
|
3316
|
+
border-radius: 4px;
|
|
3317
|
+
padding: 2px 8px;
|
|
3318
|
+
font-size: 11px;
|
|
3319
|
+
cursor: pointer;
|
|
3320
|
+
}
|
|
3321
|
+
|
|
3322
|
+
/* Page info panel (DL #26) */
|
|
3323
|
+
.page-info-panel {
|
|
3324
|
+
position: fixed;
|
|
3325
|
+
z-index: 100;
|
|
3326
|
+
width: min(480px, calc(100vw - 48px));
|
|
3327
|
+
height: min(640px, calc(100vh - 100px));
|
|
3328
|
+
max-height: min(640px, calc(100vh - 100px));
|
|
3329
|
+
display: flex;
|
|
3330
|
+
flex-direction: column;
|
|
3331
|
+
background: var(--harmony-bg-surface);
|
|
3332
|
+
border: 1px solid var(--harmony-border);
|
|
3333
|
+
border-radius: var(--harmony-radius-lg);
|
|
3334
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
3335
|
+
pointer-events: auto;
|
|
3336
|
+
overflow: hidden;
|
|
3337
|
+
font-family: var(--harmony-font);
|
|
3338
|
+
}
|
|
3339
|
+
.page-info-panel-header {
|
|
3340
|
+
display: flex;
|
|
3341
|
+
align-items: flex-start;
|
|
3342
|
+
justify-content: space-between;
|
|
3343
|
+
gap: 12px;
|
|
3344
|
+
padding: 14px 16px 12px;
|
|
3345
|
+
border-bottom: 1px solid var(--harmony-border);
|
|
3346
|
+
flex-shrink: 0;
|
|
3347
|
+
cursor: grab;
|
|
3348
|
+
user-select: none;
|
|
3349
|
+
background: var(--harmony-bg-surface);
|
|
3350
|
+
}
|
|
3351
|
+
.page-info-panel-header:active { cursor: grabbing; }
|
|
3352
|
+
.page-info-panel-header-text {
|
|
3353
|
+
display: flex;
|
|
3354
|
+
flex-direction: column;
|
|
3355
|
+
gap: 4px;
|
|
3356
|
+
min-width: 0;
|
|
3357
|
+
}
|
|
3358
|
+
.page-info-panel-title {
|
|
3359
|
+
font-size: 18px;
|
|
3360
|
+
font-weight: 700;
|
|
3361
|
+
color: var(--harmony-text);
|
|
3362
|
+
letter-spacing: -0.02em;
|
|
3363
|
+
line-height: 1.2;
|
|
3364
|
+
}
|
|
3365
|
+
.page-info-panel-subtitle {
|
|
3366
|
+
font-size: 12px;
|
|
3367
|
+
line-height: 1.35;
|
|
3368
|
+
color: var(--harmony-text-secondary);
|
|
3369
|
+
}
|
|
3370
|
+
.page-info-panel-body {
|
|
3371
|
+
flex: 1;
|
|
3372
|
+
min-height: 0;
|
|
3373
|
+
overflow: auto;
|
|
3374
|
+
padding: 14px 16px 16px;
|
|
3375
|
+
display: flex;
|
|
3376
|
+
flex-direction: column;
|
|
3377
|
+
gap: 14px;
|
|
3378
|
+
}
|
|
3379
|
+
.page-info-section {
|
|
3380
|
+
display: flex;
|
|
3381
|
+
flex-direction: column;
|
|
3382
|
+
gap: 8px;
|
|
3383
|
+
}
|
|
3384
|
+
.page-info-route-card {
|
|
3385
|
+
padding: 12px;
|
|
3386
|
+
border-radius: var(--harmony-radius-md);
|
|
3387
|
+
background: var(--harmony-bg-subtle);
|
|
3388
|
+
border: 1px solid var(--harmony-border);
|
|
3389
|
+
}
|
|
3390
|
+
.page-info-route-highlight {
|
|
3391
|
+
outline: 2px solid var(--harmony-primary);
|
|
3392
|
+
outline-offset: 2px;
|
|
3393
|
+
}
|
|
3394
|
+
.page-info-route-header {
|
|
3395
|
+
display: flex;
|
|
3396
|
+
align-items: center;
|
|
3397
|
+
justify-content: space-between;
|
|
3398
|
+
gap: 8px;
|
|
3399
|
+
}
|
|
3400
|
+
.page-info-route-actions {
|
|
3401
|
+
display: inline-flex;
|
|
3402
|
+
align-items: center;
|
|
3403
|
+
gap: 4px;
|
|
3404
|
+
flex-shrink: 0;
|
|
3405
|
+
}
|
|
3406
|
+
.page-info-route-icon-btn {
|
|
3407
|
+
display: inline-flex;
|
|
3408
|
+
align-items: center;
|
|
3409
|
+
justify-content: center;
|
|
3410
|
+
width: 18px;
|
|
3411
|
+
height: 28px;
|
|
3412
|
+
padding: 0;
|
|
3413
|
+
border: none;
|
|
3414
|
+
border-radius: var(--harmony-radius-sm);
|
|
3415
|
+
background: transparent;
|
|
3416
|
+
color: var(--harmony-text-muted);
|
|
3417
|
+
cursor: pointer;
|
|
3418
|
+
flex-shrink: 0;
|
|
3419
|
+
overflow: visible;
|
|
3420
|
+
}
|
|
3421
|
+
.page-info-route-icon-btn:hover {
|
|
3422
|
+
color: var(--harmony-text);
|
|
3423
|
+
background: var(--harmony-bg-hover);
|
|
3424
|
+
}
|
|
3425
|
+
.page-info-route-icon {
|
|
3426
|
+
display: block;
|
|
3427
|
+
width: 22px;
|
|
3428
|
+
height: 22px;
|
|
3429
|
+
overflow: visible;
|
|
3430
|
+
}
|
|
3431
|
+
.page-info-route-field {
|
|
3432
|
+
display: flex;
|
|
3433
|
+
align-items: stretch;
|
|
3434
|
+
gap: 8px;
|
|
3435
|
+
}
|
|
3436
|
+
.page-info-route-field--error .page-info-route-value,
|
|
3437
|
+
.page-info-route-field--error .page-info-route-input {
|
|
3438
|
+
border-color: var(--harmony-danger);
|
|
3439
|
+
box-shadow: 0 0 0 1px var(--harmony-danger-soft, rgba(220, 38, 38, 0.15));
|
|
3440
|
+
}
|
|
3441
|
+
.page-info-route-problem {
|
|
3442
|
+
display: inline-flex;
|
|
3443
|
+
align-items: center;
|
|
3444
|
+
justify-content: center;
|
|
3445
|
+
flex-shrink: 0;
|
|
3446
|
+
align-self: center;
|
|
3447
|
+
width: 28px;
|
|
3448
|
+
height: 28px;
|
|
3449
|
+
color: var(--harmony-danger);
|
|
3450
|
+
cursor: help;
|
|
3451
|
+
}
|
|
3452
|
+
.page-info-route-problem-icon {
|
|
3453
|
+
display: block;
|
|
3454
|
+
width: 20px;
|
|
3455
|
+
height: 20px;
|
|
3456
|
+
}
|
|
3457
|
+
.page-info-route-missing-params {
|
|
3458
|
+
display: flex;
|
|
3459
|
+
flex-wrap: wrap;
|
|
3460
|
+
gap: 6px;
|
|
3461
|
+
margin-top: 8px;
|
|
3462
|
+
}
|
|
3463
|
+
.page-info-param-chip--add {
|
|
3464
|
+
cursor: pointer;
|
|
3465
|
+
border: 1px dashed var(--harmony-primary);
|
|
3466
|
+
background: var(--harmony-bg-surface);
|
|
3467
|
+
}
|
|
3468
|
+
.page-info-param-chip--add:hover {
|
|
3469
|
+
background: var(--harmony-primary-soft);
|
|
3470
|
+
}
|
|
3471
|
+
.page-info-route-change-confirm-overlay {
|
|
3472
|
+
position: fixed;
|
|
3473
|
+
inset: 0;
|
|
3474
|
+
z-index: 200;
|
|
3475
|
+
display: flex;
|
|
3476
|
+
align-items: center;
|
|
3477
|
+
justify-content: center;
|
|
3478
|
+
padding: 24px;
|
|
3479
|
+
background: rgba(15, 23, 42, 0.45);
|
|
3480
|
+
pointer-events: auto;
|
|
3481
|
+
}
|
|
3482
|
+
.page-info-route-change-confirm-dialog {
|
|
3483
|
+
width: min(480px, 100%);
|
|
3484
|
+
padding: 20px;
|
|
3485
|
+
border-radius: var(--harmony-radius-lg);
|
|
3486
|
+
background: var(--harmony-bg-surface);
|
|
3487
|
+
border: 1px solid var(--harmony-border);
|
|
3488
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
3489
|
+
}
|
|
3490
|
+
.page-info-route-change-confirm-title {
|
|
3491
|
+
margin: 0 0 8px;
|
|
3492
|
+
font-size: 18px;
|
|
3493
|
+
font-weight: 700;
|
|
3494
|
+
color: var(--harmony-text);
|
|
3495
|
+
}
|
|
3496
|
+
.page-info-route-change-confirm-body {
|
|
3497
|
+
margin: 0 0 16px;
|
|
3498
|
+
font-size: 13px;
|
|
3499
|
+
line-height: 1.5;
|
|
3500
|
+
color: var(--harmony-text-secondary);
|
|
3501
|
+
}
|
|
3502
|
+
.page-info-route-change-confirm-routes {
|
|
3503
|
+
margin: 0 0 16px;
|
|
3504
|
+
padding: 10px 12px;
|
|
3505
|
+
border-radius: var(--harmony-radius-sm);
|
|
3506
|
+
background: var(--harmony-bg-subtle);
|
|
3507
|
+
font-family: var(--harmony-mono);
|
|
3508
|
+
font-size: 12px;
|
|
3509
|
+
line-height: 1.5;
|
|
3510
|
+
color: var(--harmony-text);
|
|
3511
|
+
word-break: break-all;
|
|
3512
|
+
}
|
|
3513
|
+
.page-info-route-change-confirm-actions {
|
|
3514
|
+
display: flex;
|
|
3515
|
+
justify-content: flex-end;
|
|
3516
|
+
gap: 8px;
|
|
3517
|
+
}
|
|
3518
|
+
.page-info-route-value {
|
|
3519
|
+
flex: 1;
|
|
3520
|
+
min-width: 0;
|
|
3521
|
+
display: block;
|
|
3522
|
+
font-family: var(--harmony-mono);
|
|
3523
|
+
font-size: 12px;
|
|
3524
|
+
line-height: 1.4;
|
|
3525
|
+
color: var(--harmony-text);
|
|
3526
|
+
background: var(--harmony-bg-surface);
|
|
3527
|
+
border: 1px solid var(--harmony-border);
|
|
3528
|
+
border-radius: var(--harmony-radius-sm);
|
|
3529
|
+
padding: 8px 10px;
|
|
3530
|
+
word-break: break-all;
|
|
3531
|
+
}
|
|
3532
|
+
.page-info-route-input {
|
|
3533
|
+
width: 100%;
|
|
3534
|
+
box-sizing: border-box;
|
|
3535
|
+
font-family: var(--harmony-mono);
|
|
3536
|
+
font-size: 12px;
|
|
3537
|
+
padding: 8px 10px;
|
|
3538
|
+
border: 1px solid var(--harmony-border);
|
|
3539
|
+
border-radius: var(--harmony-radius-sm);
|
|
3540
|
+
background: var(--harmony-bg-surface);
|
|
3541
|
+
color: var(--harmony-text);
|
|
3542
|
+
}
|
|
3543
|
+
.page-info-route-input:focus {
|
|
3544
|
+
outline: none;
|
|
3545
|
+
border-color: var(--harmony-primary);
|
|
3546
|
+
box-shadow: 0 0 0 3px var(--harmony-primary-soft);
|
|
3547
|
+
}
|
|
3548
|
+
.page-info-planned-route { margin-top: 4px; }
|
|
3549
|
+
.page-info-route-params {
|
|
3550
|
+
display: flex;
|
|
3551
|
+
flex-wrap: wrap;
|
|
3552
|
+
align-items: center;
|
|
3553
|
+
gap: 6px;
|
|
3554
|
+
}
|
|
3555
|
+
.page-info-param-chip {
|
|
3556
|
+
font-family: var(--harmony-mono);
|
|
3557
|
+
font-size: 11px;
|
|
3558
|
+
padding: 2px 8px;
|
|
3559
|
+
border-radius: var(--harmony-radius-pill);
|
|
3560
|
+
background: var(--harmony-primary-soft);
|
|
3561
|
+
color: var(--harmony-primary);
|
|
3562
|
+
}
|
|
3563
|
+
.page-info-route-confirm {
|
|
3564
|
+
margin-top: 8px;
|
|
3565
|
+
padding-top: 10px;
|
|
3566
|
+
border-top: 1px solid var(--harmony-border);
|
|
3567
|
+
}
|
|
3568
|
+
.page-info-route-confirm-actions {
|
|
3569
|
+
display: flex;
|
|
3570
|
+
justify-content: flex-end;
|
|
3571
|
+
gap: 8px;
|
|
3572
|
+
margin-top: 8px;
|
|
3573
|
+
}
|
|
3574
|
+
.page-info-route-confirm-actions .harmony-btn-primary,
|
|
3575
|
+
.page-info-route-confirm-actions .harmony-btn-secondary {
|
|
3576
|
+
flex: 0 0 auto;
|
|
3577
|
+
min-width: 0;
|
|
3578
|
+
padding: 6px 12px;
|
|
2054
3579
|
font-size: 12px;
|
|
2055
|
-
font-family: var(--harmony-mono);
|
|
2056
|
-
resize: vertical;
|
|
2057
|
-
box-sizing: border-box;
|
|
2058
|
-
outline: none;
|
|
2059
3580
|
}
|
|
2060
|
-
.
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
3581
|
+
.page-info-field-error {
|
|
3582
|
+
margin: 0;
|
|
3583
|
+
font-size: 12px;
|
|
3584
|
+
color: var(--harmony-danger);
|
|
3585
|
+
}
|
|
3586
|
+
.page-info-hint {
|
|
3587
|
+
margin: 0;
|
|
3588
|
+
font-size: 12px;
|
|
3589
|
+
line-height: 1.4;
|
|
3590
|
+
color: var(--harmony-text-secondary);
|
|
3591
|
+
}
|
|
3592
|
+
.page-info-hint.page-info-loading { font-style: italic; }
|
|
3593
|
+
.page-info-empty {
|
|
3594
|
+
margin: 0;
|
|
3595
|
+
padding: 12px;
|
|
3596
|
+
font-size: 12px;
|
|
3597
|
+
line-height: 1.45;
|
|
3598
|
+
color: var(--harmony-text-secondary);
|
|
2065
3599
|
text-align: center;
|
|
2066
|
-
|
|
3600
|
+
border: 1px dashed var(--harmony-border);
|
|
3601
|
+
border-radius: var(--harmony-radius-md);
|
|
3602
|
+
background: var(--harmony-bg-subtle);
|
|
3603
|
+
}
|
|
3604
|
+
.page-info-duplicate-warning {
|
|
2067
3605
|
font-size: 12px;
|
|
3606
|
+
line-height: 1.4;
|
|
3607
|
+
color: #92400e;
|
|
3608
|
+
background: var(--harmony-warning-soft);
|
|
3609
|
+
border: 1px solid #fcd34d;
|
|
3610
|
+
border-radius: var(--harmony-radius-md);
|
|
3611
|
+
padding: 10px 12px;
|
|
2068
3612
|
}
|
|
2069
|
-
.
|
|
2070
|
-
.add-page-chip {
|
|
3613
|
+
.page-info-component-list {
|
|
2071
3614
|
display: flex;
|
|
2072
|
-
|
|
3615
|
+
flex-direction: column;
|
|
2073
3616
|
gap: 8px;
|
|
3617
|
+
}
|
|
3618
|
+
.page-info-component-card {
|
|
3619
|
+
width: 100%;
|
|
3620
|
+
cursor: pointer;
|
|
3621
|
+
text-align: left;
|
|
3622
|
+
}
|
|
3623
|
+
.page-info-component-card .add-menu-picker-component-info-icon {
|
|
3624
|
+
display: flex;
|
|
3625
|
+
align-items: center;
|
|
3626
|
+
justify-content: center;
|
|
3627
|
+
width: 28px;
|
|
3628
|
+
height: 28px;
|
|
3629
|
+
flex-shrink: 0;
|
|
3630
|
+
border-radius: 6px;
|
|
2074
3631
|
background: var(--harmony-bg-subtle);
|
|
2075
3632
|
border: 1px solid var(--harmony-border);
|
|
2076
|
-
|
|
2077
|
-
|
|
3633
|
+
font-size: 14px;
|
|
3634
|
+
color: var(--harmony-primary);
|
|
3635
|
+
margin-bottom: 2px;
|
|
3636
|
+
}
|
|
3637
|
+
.page-info-component-subtitle {
|
|
2078
3638
|
font-size: 11px;
|
|
3639
|
+
color: var(--harmony-text-muted);
|
|
3640
|
+
font-family: var(--harmony-mono);
|
|
3641
|
+
line-height: 1.35;
|
|
3642
|
+
margin-top: 2px;
|
|
3643
|
+
word-break: break-all;
|
|
2079
3644
|
}
|
|
2080
|
-
.
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
3645
|
+
.page-info-component-keyline {
|
|
3646
|
+
margin-top: 6px;
|
|
3647
|
+
font-family: var(--harmony-mono);
|
|
3648
|
+
font-size: 10px;
|
|
3649
|
+
font-weight: 600;
|
|
3650
|
+
letter-spacing: 0.02em;
|
|
3651
|
+
text-transform: uppercase;
|
|
3652
|
+
color: var(--harmony-text-secondary);
|
|
3653
|
+
}
|
|
3654
|
+
.page-info-component-card.add-menu-picker-component-card--selected .page-info-component-keyline {
|
|
3655
|
+
color: var(--harmony-primary);
|
|
3656
|
+
}
|
|
3657
|
+
.page-info-duplicate-badge {
|
|
3658
|
+
margin-top: 6px;
|
|
3659
|
+
align-self: flex-start;
|
|
3660
|
+
font-size: 10px;
|
|
3661
|
+
font-weight: 600;
|
|
3662
|
+
color: #92400e;
|
|
3663
|
+
background: var(--harmony-warning-soft);
|
|
3664
|
+
border: 1px solid #fcd34d;
|
|
3665
|
+
border-radius: var(--harmony-radius-pill);
|
|
3666
|
+
padding: 2px 8px;
|
|
3667
|
+
}
|
|
3668
|
+
.page-info-main-view {
|
|
2090
3669
|
display: flex;
|
|
2091
3670
|
flex-direction: column;
|
|
2092
|
-
gap:
|
|
2093
|
-
max-height: 320px;
|
|
2094
|
-
overflow: auto;
|
|
3671
|
+
gap: 14px;
|
|
2095
3672
|
}
|
|
2096
|
-
.
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
3673
|
+
.page-info-inspector {
|
|
3674
|
+
display: flex;
|
|
3675
|
+
flex-direction: column;
|
|
3676
|
+
gap: 10px;
|
|
3677
|
+
flex: 1;
|
|
2101
3678
|
min-height: 0;
|
|
3679
|
+
padding-bottom: 24px;
|
|
3680
|
+
}
|
|
3681
|
+
.page-info-inspector-contract {
|
|
3682
|
+
margin: 0 0 8px;
|
|
3683
|
+
font-size: 12px;
|
|
3684
|
+
font-weight: 600;
|
|
3685
|
+
color: var(--harmony-text);
|
|
3686
|
+
font-family: var(--harmony-mono);
|
|
3687
|
+
}
|
|
3688
|
+
.page-info-inspector-error {
|
|
3689
|
+
margin: 0;
|
|
3690
|
+
font-size: 12px;
|
|
3691
|
+
line-height: 1.4;
|
|
3692
|
+
color: var(--harmony-danger);
|
|
3693
|
+
}
|
|
3694
|
+
.page-info-tag-list {
|
|
3695
|
+
list-style: none;
|
|
3696
|
+
margin: 0 0 12px;
|
|
3697
|
+
padding: 0;
|
|
2102
3698
|
display: flex;
|
|
2103
3699
|
flex-direction: column;
|
|
3700
|
+
gap: 4px;
|
|
2104
3701
|
}
|
|
2105
|
-
.
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
.add-menu-panel .add-page-plugin-chip { width: 100%; max-width: 100%; box-sizing: border-box; }
|
|
2112
|
-
.add-menu-panel .add-page-btn,
|
|
2113
|
-
.add-menu-panel .add-page-manage-link,
|
|
2114
|
-
.add-menu-panel .add-page-hint,
|
|
2115
|
-
.add-menu-panel .add-page-field-error,
|
|
2116
|
-
.add-menu-panel .add-menu-route-params,
|
|
2117
|
-
.add-menu-panel .add-page-suggested-route,
|
|
2118
|
-
.add-menu-panel .add-menu-route-confirm { flex-shrink: 0; }
|
|
2119
|
-
.add-menu-panel .add-menu-popover { flex-shrink: 0; min-height: 180px; max-height: min(240px, 36vh); margin-top: 4px; }
|
|
2120
|
-
.add-menu-panel .add-menu-nav { min-height: 140px; }
|
|
2121
|
-
.add-page-plugins-zone-title { font-size: 11px; font-weight: 600; color: var(--harmony-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
|
|
2122
|
-
.add-page-plugin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--harmony-border); }
|
|
2123
|
-
.add-page-plugin-row:last-child { border-bottom: none; }
|
|
2124
|
-
.add-page-plugin-label { flex: 1; color: var(--harmony-text-secondary); }
|
|
2125
|
-
.add-page-plugin-btn {
|
|
2126
|
-
background: var(--harmony-bg-subtle);
|
|
2127
|
-
color: var(--harmony-text-secondary);
|
|
2128
|
-
border: 1px solid var(--harmony-border);
|
|
3702
|
+
.page-info-tag-row {
|
|
3703
|
+
display: grid;
|
|
3704
|
+
grid-template-columns: 1fr auto auto;
|
|
3705
|
+
gap: 6px 8px;
|
|
3706
|
+
align-items: center;
|
|
3707
|
+
padding: 8px 10px;
|
|
2129
3708
|
border-radius: var(--harmony-radius-sm);
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
3709
|
+
background: var(--harmony-bg-surface);
|
|
3710
|
+
border: 1px solid var(--harmony-border);
|
|
3711
|
+
font-size: 11px;
|
|
2133
3712
|
}
|
|
2134
|
-
.
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
.
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
.
|
|
2145
|
-
|
|
2146
|
-
|
|
3713
|
+
.page-info-tag-row.page-info-tag--used {
|
|
3714
|
+
border-color: rgba(0, 168, 98, 0.35);
|
|
3715
|
+
background: var(--harmony-success-soft);
|
|
3716
|
+
}
|
|
3717
|
+
.page-info-tag-path {
|
|
3718
|
+
font-family: var(--harmony-mono);
|
|
3719
|
+
font-size: 11px;
|
|
3720
|
+
color: var(--harmony-text);
|
|
3721
|
+
word-break: break-word;
|
|
3722
|
+
}
|
|
3723
|
+
.page-info-tag-kind-pill {
|
|
3724
|
+
font-size: 9px;
|
|
3725
|
+
font-weight: 700;
|
|
3726
|
+
letter-spacing: 0.04em;
|
|
3727
|
+
text-transform: uppercase;
|
|
3728
|
+
color: var(--harmony-text-muted);
|
|
2147
3729
|
background: var(--harmony-bg-subtle);
|
|
2148
|
-
border:
|
|
2149
|
-
border-radius: var(--harmony-radius-sm);
|
|
3730
|
+
border-radius: var(--harmony-radius-pill);
|
|
2150
3731
|
padding: 2px 6px;
|
|
2151
|
-
|
|
2152
|
-
color: var(--harmony-text-secondary);
|
|
2153
|
-
display: inline-flex;
|
|
2154
|
-
align-items: center;
|
|
2155
|
-
gap: 4px;
|
|
2156
|
-
max-width: 100%;
|
|
2157
|
-
min-width: 0;
|
|
3732
|
+
white-space: nowrap;
|
|
2158
3733
|
}
|
|
2159
|
-
.
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
3734
|
+
.page-info-tag-status {
|
|
3735
|
+
font-size: 10px;
|
|
3736
|
+
font-weight: 600;
|
|
3737
|
+
border-radius: var(--harmony-radius-pill);
|
|
3738
|
+
padding: 2px 8px;
|
|
2164
3739
|
white-space: nowrap;
|
|
2165
3740
|
}
|
|
2166
|
-
.
|
|
3741
|
+
.page-info-tag-status--bound {
|
|
3742
|
+
color: var(--harmony-success);
|
|
3743
|
+
background: rgba(0, 168, 98, 0.12);
|
|
3744
|
+
}
|
|
3745
|
+
.page-info-tag-status--available {
|
|
2167
3746
|
color: var(--harmony-text-muted);
|
|
2168
|
-
|
|
3747
|
+
background: var(--harmony-bg-subtle);
|
|
2169
3748
|
}
|
|
2170
|
-
.
|
|
2171
|
-
|
|
2172
|
-
|
|
3749
|
+
.page-info-tag-sample {
|
|
3750
|
+
grid-column: 1 / -1;
|
|
3751
|
+
margin: 0;
|
|
3752
|
+
font-family: var(--harmony-mono);
|
|
3753
|
+
font-size: 10px;
|
|
3754
|
+
color: var(--harmony-text-secondary);
|
|
3755
|
+
word-break: break-all;
|
|
3756
|
+
background: transparent;
|
|
2173
3757
|
}
|
|
2174
|
-
.add-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
color: var(--harmony-text);
|
|
2181
|
-
border: 1px solid var(--harmony-border);
|
|
2182
|
-
border-radius: var(--harmony-radius-sm);
|
|
2183
|
-
padding: 4px 6px;
|
|
2184
|
-
font-size: 11px;
|
|
3758
|
+
.add-menu-dock-backdrop {
|
|
3759
|
+
position: fixed;
|
|
3760
|
+
inset: 0;
|
|
3761
|
+
z-index: 94;
|
|
3762
|
+
background: rgba(22, 45, 61, 0.12);
|
|
3763
|
+
pointer-events: auto;
|
|
2185
3764
|
}
|
|
2186
|
-
.add-
|
|
2187
|
-
|
|
3765
|
+
.add-menu-dock-panel {
|
|
3766
|
+
position: fixed;
|
|
3767
|
+
width: min(624px, calc(100vw - 48px));
|
|
3768
|
+
height: min(680px, calc(100vh - 120px));
|
|
3769
|
+
max-height: min(680px, calc(100vh - 120px));
|
|
3770
|
+
z-index: 95;
|
|
2188
3771
|
background: var(--harmony-bg-surface);
|
|
2189
|
-
color: var(--harmony-text);
|
|
2190
|
-
border: 1px solid var(--harmony-border);
|
|
2191
|
-
border-radius: var(--harmony-radius-sm);
|
|
2192
|
-
font-size: 12px;
|
|
2193
|
-
padding: 6px 8px;
|
|
2194
|
-
margin-top: 6px;
|
|
2195
|
-
}
|
|
2196
|
-
.add-page-manage-link { font-size: 11px; color: var(--harmony-primary); cursor: pointer; margin-top: 6px; background: none; border: none; padding: 0; text-align: left; }
|
|
2197
|
-
.annotation-binding { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
|
|
2198
|
-
.annotation-add-menu { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
|
|
2199
|
-
.annotation-add-menu-toggle { background: none; border: none; color: var(--harmony-primary); font-size: 11px; cursor: pointer; padding: 0; text-align: left; }
|
|
2200
|
-
.annotation-add-menu-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--harmony-text-secondary); }
|
|
2201
|
-
.change-request-add-menu { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--harmony-border); border-radius: var(--harmony-radius-md); background: var(--harmony-bg-subtle); }
|
|
2202
|
-
.add-menu-route-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
|
|
2203
|
-
.add-menu-popover {
|
|
2204
3772
|
border: 1px solid var(--harmony-border);
|
|
2205
|
-
border-radius: var(--harmony-radius-
|
|
2206
|
-
|
|
2207
|
-
background: var(--harmony-bg-subtle);
|
|
2208
|
-
margin-top: 6px;
|
|
3773
|
+
border-radius: var(--harmony-radius-lg);
|
|
3774
|
+
box-shadow: var(--harmony-shadow-lg);
|
|
2209
3775
|
display: flex;
|
|
2210
3776
|
flex-direction: column;
|
|
2211
|
-
gap: 6px;
|
|
2212
|
-
min-height: 0;
|
|
2213
|
-
max-width: 100%;
|
|
2214
|
-
max-height: min(320px, 50vh);
|
|
2215
3777
|
overflow: hidden;
|
|
3778
|
+
pointer-events: auto;
|
|
2216
3779
|
}
|
|
2217
|
-
.add-menu-
|
|
3780
|
+
.add-menu-dock-header {
|
|
2218
3781
|
display: flex;
|
|
2219
|
-
justify-content: space-between;
|
|
2220
3782
|
align-items: center;
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
color: var(--harmony-text-secondary);
|
|
3783
|
+
gap: 8px;
|
|
3784
|
+
padding: 12px 14px;
|
|
2224
3785
|
border-bottom: 1px solid var(--harmony-border);
|
|
2225
|
-
padding-bottom: 4px;
|
|
2226
|
-
margin-bottom: 4px;
|
|
2227
3786
|
flex-shrink: 0;
|
|
3787
|
+
cursor: grab;
|
|
3788
|
+
user-select: none;
|
|
2228
3789
|
}
|
|
2229
|
-
.add-menu-
|
|
2230
|
-
.add-menu-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
3790
|
+
.add-menu-dock-header:active { cursor: grabbing; }
|
|
3791
|
+
.add-menu-dock-title {
|
|
3792
|
+
flex: 1;
|
|
3793
|
+
font-size: 18px;
|
|
3794
|
+
font-weight: 700;
|
|
3795
|
+
color: var(--harmony-text);
|
|
3796
|
+
letter-spacing: -0.02em;
|
|
3797
|
+
}
|
|
3798
|
+
.add-menu-dock-subhint {
|
|
3799
|
+
margin: 0;
|
|
3800
|
+
padding: 8px 18px 0;
|
|
3801
|
+
font-size: 12px;
|
|
3802
|
+
line-height: 1.35;
|
|
2235
3803
|
color: var(--harmony-text-secondary);
|
|
2236
|
-
|
|
2237
|
-
border-radius: var(--harmony-radius-sm);
|
|
2238
|
-
padding: 4px 8px;
|
|
2239
|
-
font-size: 11px;
|
|
2240
|
-
cursor: pointer;
|
|
2241
|
-
text-align: left;
|
|
3804
|
+
flex-shrink: 0;
|
|
2242
3805
|
}
|
|
2243
|
-
.add-menu-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
padding:
|
|
2250
|
-
font-size: 11px;
|
|
2251
|
-
cursor: pointer;
|
|
2252
|
-
text-align: left;
|
|
3806
|
+
.add-menu-dock-body {
|
|
3807
|
+
flex: 1;
|
|
3808
|
+
min-height: 0;
|
|
3809
|
+
overflow: hidden;
|
|
3810
|
+
display: flex;
|
|
3811
|
+
flex-direction: column;
|
|
3812
|
+
padding: 0 0 12px;
|
|
2253
3813
|
}
|
|
2254
|
-
.add-menu-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
3814
|
+
.add-menu-dock-body .add-menu-picker-browse {
|
|
3815
|
+
flex: 1;
|
|
3816
|
+
min-height: 0;
|
|
3817
|
+
display: flex;
|
|
3818
|
+
flex-direction: column;
|
|
3819
|
+
overflow: hidden;
|
|
3820
|
+
}
|
|
3821
|
+
.add-menu-dock-body .add-menu-picker-browse-layout {
|
|
3822
|
+
flex: 1;
|
|
3823
|
+
min-height: 0;
|
|
3824
|
+
}
|
|
3825
|
+
.add-menu-picker-component-card--stage-place { cursor: grab; }
|
|
3826
|
+
.add-menu-picker-component-card--stage-place:active { cursor: grabbing; }
|
|
3827
|
+
.stage-drop-catcher {
|
|
3828
|
+
position: absolute;
|
|
3829
|
+
inset: 0;
|
|
3830
|
+
z-index: 10;
|
|
3831
|
+
cursor: grabbing;
|
|
3832
|
+
background: rgba(17, 109, 255, 0.08);
|
|
3833
|
+
outline: 2px dashed var(--harmony-primary);
|
|
3834
|
+
outline-offset: -2px;
|
|
3835
|
+
touch-action: none;
|
|
3836
|
+
}
|
|
3837
|
+
.stage-drop-catcher-hint {
|
|
3838
|
+
position: absolute;
|
|
3839
|
+
top: 12px;
|
|
3840
|
+
left: 50%;
|
|
3841
|
+
transform: translateX(-50%);
|
|
3842
|
+
padding: 6px 12px;
|
|
3843
|
+
background: rgba(22, 45, 61, 0.85);
|
|
2261
3844
|
color: #fff;
|
|
2262
|
-
border:
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
cursor: pointer;
|
|
2267
|
-
align-self: flex-start;
|
|
3845
|
+
border-radius: 8px;
|
|
3846
|
+
font-size: 12px;
|
|
3847
|
+
pointer-events: none;
|
|
3848
|
+
white-space: nowrap;
|
|
2268
3849
|
}
|
|
2269
|
-
.
|
|
3850
|
+
.stage-drop-ghost {
|
|
3851
|
+
position: fixed;
|
|
3852
|
+
z-index: 10000;
|
|
3853
|
+
transform: translate(-7px, -7px);
|
|
3854
|
+
pointer-events: none;
|
|
2270
3855
|
display: flex;
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
padding: 16px 28px 20px;
|
|
2274
|
-
border-top: 1px solid var(--harmony-border);
|
|
2275
|
-
flex-shrink: 0;
|
|
2276
|
-
background: var(--harmony-bg-surface);
|
|
3856
|
+
align-items: flex-start;
|
|
3857
|
+
gap: 8px;
|
|
2277
3858
|
}
|
|
2278
|
-
.
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
.
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
.reset-btn {
|
|
3859
|
+
.stage-drop-ghost-marker {
|
|
3860
|
+
flex: 0 0 auto;
|
|
3861
|
+
width: 14px;
|
|
3862
|
+
height: 14px;
|
|
3863
|
+
border-radius: 50%;
|
|
3864
|
+
background: var(--harmony-primary);
|
|
3865
|
+
border: 2px solid #fff;
|
|
3866
|
+
box-shadow: var(--harmony-shadow-sm);
|
|
3867
|
+
}
|
|
3868
|
+
.stage-drop-ghost-hint {
|
|
3869
|
+
max-width: 220px;
|
|
3870
|
+
padding: 6px 10px;
|
|
2291
3871
|
background: var(--harmony-bg-surface);
|
|
2292
|
-
border: 1px solid var(--harmony-
|
|
2293
|
-
|
|
3872
|
+
border: 1px solid var(--harmony-primary);
|
|
3873
|
+
border-radius: 6px;
|
|
3874
|
+
font-size: 12px;
|
|
3875
|
+
line-height: 1.35;
|
|
3876
|
+
color: var(--harmony-text-primary);
|
|
3877
|
+
box-shadow: var(--harmony-shadow-sm);
|
|
3878
|
+
white-space: normal;
|
|
3879
|
+
}
|
|
3880
|
+
.stage-drop-banner {
|
|
3881
|
+
position: absolute;
|
|
3882
|
+
top: 8px;
|
|
3883
|
+
left: 50%;
|
|
3884
|
+
transform: translateX(-50%);
|
|
3885
|
+
z-index: 5;
|
|
3886
|
+
display: flex;
|
|
3887
|
+
align-items: center;
|
|
3888
|
+
gap: 8px;
|
|
3889
|
+
padding: 6px 10px;
|
|
3890
|
+
background: rgba(0, 0, 0, 0.75);
|
|
3891
|
+
color: #fff;
|
|
3892
|
+
border-radius: 8px;
|
|
3893
|
+
font-size: 12px;
|
|
3894
|
+
}
|
|
3895
|
+
.stage-drop-banner-cancel {
|
|
3896
|
+
background: transparent;
|
|
3897
|
+
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
3898
|
+
color: #fff;
|
|
3899
|
+
border-radius: 4px;
|
|
3900
|
+
padding: 2px 8px;
|
|
2294
3901
|
cursor: pointer;
|
|
2295
|
-
font-size: 14px;
|
|
2296
|
-
padding: 8px 12px;
|
|
2297
|
-
border-radius: var(--harmony-radius-pill);
|
|
2298
|
-
line-height: 1;
|
|
2299
3902
|
}
|
|
2300
|
-
.
|
|
2301
|
-
|
|
3903
|
+
.aiditor-toast {
|
|
3904
|
+
position: fixed;
|
|
3905
|
+
bottom: 24px;
|
|
3906
|
+
left: 50%;
|
|
3907
|
+
transform: translateX(-50%);
|
|
3908
|
+
z-index: 120;
|
|
3909
|
+
padding: 10px 16px;
|
|
3910
|
+
background: rgba(0, 0, 0, 0.85);
|
|
3911
|
+
color: #fff;
|
|
3912
|
+
border-radius: 8px;
|
|
3913
|
+
font-size: 13px;
|
|
3914
|
+
pointer-events: none;
|
|
3915
|
+
}
|
|
2302
3916
|
</style>
|
|
2303
3917
|
<script type="application/jay-data">
|
|
2304
3918
|
data:
|
|
@@ -2340,14 +3954,24 @@ data:
|
|
|
2340
3954
|
isSelected: boolean
|
|
2341
3955
|
checkGlyph: string
|
|
2342
3956
|
cssClass: string
|
|
2343
|
-
|
|
3957
|
+
rowCssClass: string
|
|
3958
|
+
showPagesPanelEmptySearch: boolean
|
|
3959
|
+
showInstanceSwitcher: boolean
|
|
3960
|
+
showInstanceSwitcherMenu: boolean
|
|
3961
|
+
instanceSwitcherRows:
|
|
2344
3962
|
- path: string
|
|
3963
|
+
label: string
|
|
2345
3964
|
isSelected: boolean
|
|
2346
|
-
checkGlyph: string
|
|
2347
3965
|
cssClass: string
|
|
2348
|
-
|
|
2349
|
-
|
|
3966
|
+
instanceSwitcherCurrentLabel: string
|
|
3967
|
+
instanceSwitcherCountLabel: string
|
|
3968
|
+
instanceSwitcherTriggerClass: string
|
|
3969
|
+
instanceSwitcherLeft: string
|
|
3970
|
+
instanceSwitcherTop: string
|
|
3971
|
+
instanceSwitcherTransform: string
|
|
3972
|
+
instanceSwitcherMenuOpensAbove: boolean
|
|
2350
3973
|
showSnapshotNav: boolean
|
|
3974
|
+
showSnowflakeFeatures: boolean
|
|
2351
3975
|
showSnapshotPanel: boolean
|
|
2352
3976
|
snapshotNavBtnClass: string
|
|
2353
3977
|
snapshotNavBtnLabel: string
|
|
@@ -2360,6 +3984,8 @@ data:
|
|
|
2360
3984
|
cssClass: string
|
|
2361
3985
|
showSnapshotPanelEmptySearch: boolean
|
|
2362
3986
|
showAddMenuPickerModal: boolean
|
|
3987
|
+
showAddMenuPickerDismissConfirm: boolean
|
|
3988
|
+
addMenuPickerDismissConfirmMessage: string
|
|
2363
3989
|
showAddMenuPickerLoading: boolean
|
|
2364
3990
|
showAddMenuPickerEmpty: boolean
|
|
2365
3991
|
showAddMenuPickerBrowse: boolean
|
|
@@ -2375,8 +4001,15 @@ data:
|
|
|
2375
4001
|
showAddMenuPickerComponents: boolean
|
|
2376
4002
|
showAddMenuPickerNoComponents: boolean
|
|
2377
4003
|
showAddMenuPickerNoSearchResults: boolean
|
|
4004
|
+
showAddMenuPickerLoadMore: boolean
|
|
4005
|
+
addMenuPickerLoadMoreLabel: string
|
|
4006
|
+
showAddMenuPickerDone: boolean
|
|
4007
|
+
addMenuPickerDoneDisabled: boolean
|
|
4008
|
+
addMenuPickerDoneLabel: string
|
|
2378
4009
|
addMenuPickerDialogClass: string
|
|
4010
|
+
addMenuPickerOverlayClass: string
|
|
2379
4011
|
addMenuPickerHeaderTitle: string
|
|
4012
|
+
showAddMenuPickerHeaderBack: boolean
|
|
2380
4013
|
addMenuPickerBrowseCategoryTitle: string
|
|
2381
4014
|
addMenuPickerSearchSummary: string
|
|
2382
4015
|
addMenuPickerSearchQuery: string
|
|
@@ -2386,6 +4019,8 @@ data:
|
|
|
2386
4019
|
navKey: string
|
|
2387
4020
|
label: string
|
|
2388
4021
|
itemCount: number
|
|
4022
|
+
selectedCount: number
|
|
4023
|
+
showSelectedCount: boolean
|
|
2389
4024
|
isSelected: boolean
|
|
2390
4025
|
cssClass: string
|
|
2391
4026
|
addMenuPickerSubCategoryFilterRows:
|
|
@@ -2393,7 +4028,11 @@ data:
|
|
|
2393
4028
|
navKey: string
|
|
2394
4029
|
label: string
|
|
2395
4030
|
itemCount: number
|
|
4031
|
+
selectedCount: number
|
|
2396
4032
|
showCount: boolean
|
|
4033
|
+
showSelectedCount: boolean
|
|
4034
|
+
showSubCategoryCount: boolean
|
|
4035
|
+
subCategoryCountLabel: string
|
|
2397
4036
|
isSelected: boolean
|
|
2398
4037
|
cssClass: string
|
|
2399
4038
|
addMenuPickerBrowseRows:
|
|
@@ -2404,8 +4043,165 @@ data:
|
|
|
2404
4043
|
isPickable: boolean
|
|
2405
4044
|
showPickable: boolean
|
|
2406
4045
|
showBrowseOnly: boolean
|
|
4046
|
+
isItemSelected: boolean
|
|
4047
|
+
cardCssClass: string
|
|
4048
|
+
showThumbnail: boolean
|
|
4049
|
+
showInfoIcon: boolean
|
|
4050
|
+
thumbnailUrl: string
|
|
4051
|
+
isAnimatedThumbnail: boolean
|
|
4052
|
+
thumbCssClass: string
|
|
4053
|
+
showPageInfoPanel: boolean
|
|
4054
|
+
pageInfoPanelLeft: number
|
|
4055
|
+
pageInfoPanelTop: number
|
|
4056
|
+
addMenuDockLeft: number
|
|
4057
|
+
addMenuDockTop: number
|
|
4058
|
+
pageInfoComponentRows:
|
|
4059
|
+
- rowKey: string
|
|
4060
|
+
detectedKey: string
|
|
4061
|
+
title: string
|
|
4062
|
+
pluginName: string
|
|
4063
|
+
contractName: string
|
|
4064
|
+
componentKey: string
|
|
4065
|
+
showDuplicateBadge: boolean
|
|
4066
|
+
showComponentKey: boolean
|
|
4067
|
+
showContractSubtitle: boolean
|
|
4068
|
+
contractSubtitle: string
|
|
4069
|
+
isSelected: boolean
|
|
4070
|
+
rowClass: string
|
|
4071
|
+
showPageInfoComponentsEmpty: boolean
|
|
4072
|
+
showPageInfoLoading: boolean
|
|
4073
|
+
showPageInfoComponentsLoading: boolean
|
|
4074
|
+
pageInfoDisplayRoute: string
|
|
4075
|
+
pageInfoDraftRoute: string
|
|
4076
|
+
pageInfoRouteFieldClass: string
|
|
4077
|
+
pageInfoRouteProblemTooltip: string
|
|
4078
|
+
showPageInfoRouteProblem: boolean
|
|
4079
|
+
showPageInfoRouteEditing: boolean
|
|
4080
|
+
showPageInfoRouteEditBtn: boolean
|
|
4081
|
+
showPageInfoRouteApproveBtn: boolean
|
|
4082
|
+
showPageInfoRouteCancelEditBtn: boolean
|
|
4083
|
+
showPageInfoRouteMissingParamChips: boolean
|
|
4084
|
+
pageInfoMissingParamRows:
|
|
4085
|
+
- rowKey: string
|
|
4086
|
+
name: string
|
|
4087
|
+
chipLabel: string
|
|
4088
|
+
showPageInfoRouteChangeConfirm: boolean
|
|
4089
|
+
pageInfoRouteChangeConfirmFrom: string
|
|
4090
|
+
pageInfoRouteChangeConfirmTo: string
|
|
4091
|
+
showPageInfoRouteMigration: boolean
|
|
4092
|
+
showPageInfoRouteParams: boolean
|
|
4093
|
+
pageInfoRouteParamRows:
|
|
4094
|
+
- rowKey: string
|
|
4095
|
+
name: string
|
|
4096
|
+
pageInfoParamCollisionWarning: string
|
|
4097
|
+
pageInfoRouteParamHint: string
|
|
4098
|
+
pageInfoPlannedRoute: string
|
|
4099
|
+
showPageInfoRouteParamConfirm: boolean
|
|
4100
|
+
pageInfoPendingRouteParamTitle: string
|
|
4101
|
+
pageInfoDuplicateKeyWarning: string
|
|
4102
|
+
showPageInfoDuplicateWarning: boolean
|
|
4103
|
+
pageInfoRouteSectionClass: string
|
|
4104
|
+
showPageInfoMainView: boolean
|
|
4105
|
+
showPageInfoInspectorDetail: boolean
|
|
4106
|
+
showPageInfoHeaderBack: boolean
|
|
4107
|
+
pageInfoInspectorDetailTitle: string
|
|
4108
|
+
showPageInfoInspectorLoading: boolean
|
|
4109
|
+
showPageInfoInspectorNoContract: boolean
|
|
4110
|
+
showPageInfoInspectorHasTags: boolean
|
|
4111
|
+
showPageInfoInspectorError: boolean
|
|
4112
|
+
pageInfoInspectorError: string
|
|
4113
|
+
pageInfoInspectorTagRows:
|
|
4114
|
+
- rowKey: string
|
|
4115
|
+
tagPath: string
|
|
4116
|
+
tagKind: string
|
|
4117
|
+
tagDescription: string
|
|
4118
|
+
usedInTemplate: boolean
|
|
4119
|
+
tagUsageClass: string
|
|
4120
|
+
showTagSamples: boolean
|
|
4121
|
+
tagSampleText: string
|
|
4122
|
+
showTagBound: boolean
|
|
4123
|
+
showTagAvailable: boolean
|
|
4124
|
+
showAddMenuDock: boolean
|
|
4125
|
+
showAddMenuDockLoading: boolean
|
|
4126
|
+
showAddMenuDockEmpty: boolean
|
|
4127
|
+
showAddMenuDockBrowse: boolean
|
|
4128
|
+
addMenuDockSearchQuery: string
|
|
4129
|
+
showAddMenuDockBrowseLayout: boolean
|
|
4130
|
+
showAddMenuDockSubCategoryFilters: boolean
|
|
4131
|
+
addMenuDockBrowseCategoryTitle: string
|
|
4132
|
+
showAddMenuDockComponents: boolean
|
|
4133
|
+
showAddMenuDockLoadMore: boolean
|
|
4134
|
+
showAddMenuDockNoComponents: boolean
|
|
4135
|
+
showAddMenuDockNoSearchResults: boolean
|
|
4136
|
+
showAddMenuDockSearchBack: boolean
|
|
4137
|
+
showAddMenuDockSearchClear: boolean
|
|
4138
|
+
showAddMenuDockBrowseTitle: boolean
|
|
4139
|
+
showAddMenuDockSearchSummary: boolean
|
|
4140
|
+
addMenuDockBrowseLayoutClass: string
|
|
4141
|
+
addMenuDockLoadMoreLabel: string
|
|
4142
|
+
addMenuDockLeftNavRows:
|
|
4143
|
+
- rowKey: string
|
|
4144
|
+
navKey: string
|
|
4145
|
+
label: string
|
|
4146
|
+
itemCount: number
|
|
4147
|
+
selectedCount: number
|
|
4148
|
+
showSelectedCount: boolean
|
|
4149
|
+
isSelected: boolean
|
|
4150
|
+
cssClass: string
|
|
4151
|
+
addMenuDockSubCategoryFilterRows:
|
|
4152
|
+
- rowKey: string
|
|
4153
|
+
navKey: string
|
|
4154
|
+
label: string
|
|
4155
|
+
itemCount: number
|
|
4156
|
+
selectedCount: number
|
|
4157
|
+
showCount: boolean
|
|
4158
|
+
showSelectedCount: boolean
|
|
4159
|
+
showSubCategoryCount: boolean
|
|
4160
|
+
subCategoryCountLabel: string
|
|
4161
|
+
isSelected: boolean
|
|
4162
|
+
cssClass: string
|
|
4163
|
+
addMenuDockBrowseRows:
|
|
4164
|
+
- rowKey: string
|
|
4165
|
+
isSectionHeader: boolean
|
|
4166
|
+
label: string
|
|
4167
|
+
itemId: string
|
|
4168
|
+
isPickable: boolean
|
|
4169
|
+
showPickable: boolean
|
|
4170
|
+
showBrowseOnly: boolean
|
|
4171
|
+
isItemSelected: boolean
|
|
4172
|
+
cardCssClass: string
|
|
4173
|
+
showThumbnail: boolean
|
|
4174
|
+
showInfoIcon: boolean
|
|
4175
|
+
thumbnailUrl: string
|
|
4176
|
+
isAnimatedThumbnail: boolean
|
|
4177
|
+
thumbCssClass: string
|
|
4178
|
+
showAddMenuDockSearchMode: boolean
|
|
4179
|
+
addMenuDockSearchSummary: string
|
|
4180
|
+
showAssetMentionPanel: boolean
|
|
4181
|
+
assetMentionLeft: number
|
|
4182
|
+
assetMentionTop: number
|
|
4183
|
+
assetMentionOpensAbove: boolean
|
|
4184
|
+
assetMentionHeaderTitle: string
|
|
4185
|
+
showAssetMentionHeaderBack: boolean
|
|
4186
|
+
showAssetMentionSearchField: boolean
|
|
4187
|
+
assetMentionSearchQuery: string
|
|
4188
|
+
assetMentionRows:
|
|
4189
|
+
- rowKey: string
|
|
4190
|
+
rowIndex: number
|
|
4191
|
+
rowKind: string
|
|
4192
|
+
title: string
|
|
4193
|
+
subtitle: string
|
|
4194
|
+
thumbnailUrl: string
|
|
4195
|
+
showThumbnail: boolean
|
|
4196
|
+
showInfoIcon: boolean
|
|
4197
|
+
showAtIcon: boolean
|
|
4198
|
+
showNavIcon: boolean
|
|
4199
|
+
cssClass: string
|
|
4200
|
+
showToastMessage: boolean
|
|
4201
|
+
toastMessage: string
|
|
2407
4202
|
isPreviewMode: boolean
|
|
2408
4203
|
previewUrlBar: string
|
|
4204
|
+
previewUrlBarOpenTabDisabled: boolean
|
|
2409
4205
|
previewLoading: boolean
|
|
2410
4206
|
previewError: string
|
|
2411
4207
|
selectedPreviewPath: string
|
|
@@ -2472,6 +4268,7 @@ data:
|
|
|
2472
4268
|
name: string
|
|
2473
4269
|
thumbUrl: string
|
|
2474
4270
|
annotationId: string
|
|
4271
|
+
numberLabel: string
|
|
2475
4272
|
addMenuSectionOpen: boolean
|
|
2476
4273
|
showAddMenuControls: boolean
|
|
2477
4274
|
showMarkerAddMenuChips: boolean
|
|
@@ -2481,6 +4278,10 @@ data:
|
|
|
2481
4278
|
itemId: string
|
|
2482
4279
|
title: string
|
|
2483
4280
|
subtitle: string
|
|
4281
|
+
tooltip: string
|
|
4282
|
+
showThumbnail: boolean
|
|
4283
|
+
showInfoIcon: boolean
|
|
4284
|
+
thumbnailUrl: string
|
|
2484
4285
|
crAddMenuParamCollisionWarning: string
|
|
2485
4286
|
crAddMenuRouteParamHint: string
|
|
2486
4287
|
showCrAddMenuRouteParams: boolean
|
|
@@ -2504,11 +4305,13 @@ data:
|
|
|
2504
4305
|
name: string
|
|
2505
4306
|
thumbUrl: string
|
|
2506
4307
|
annotationId: string
|
|
4308
|
+
numberLabel: string
|
|
2507
4309
|
recordingDraftAttachmentChips:
|
|
2508
4310
|
- key: string
|
|
2509
4311
|
name: string
|
|
2510
4312
|
thumbUrl: string
|
|
2511
4313
|
annotationId: string
|
|
4314
|
+
numberLabel: string
|
|
2512
4315
|
showRecordingDraftPopover: boolean
|
|
2513
4316
|
showVisualAnnotationsPanel: boolean
|
|
2514
4317
|
showVisualSubmitError: boolean
|
|
@@ -2518,16 +4321,17 @@ data:
|
|
|
2518
4321
|
isVideoRecording: boolean
|
|
2519
4322
|
videoRecordTooltip: string
|
|
2520
4323
|
videoRecordDisabled: boolean
|
|
4324
|
+
showFreezeBtn: boolean
|
|
2521
4325
|
freezeDisabled: boolean
|
|
2522
4326
|
sendToAgentDisabled: boolean
|
|
2523
4327
|
sendToAgentTooltip: string
|
|
2524
4328
|
showVideoReviewModal: boolean
|
|
4329
|
+
showVideoReviewCloseConfirm: boolean
|
|
2525
4330
|
videoReviewPreparing: boolean
|
|
2526
4331
|
videoReviewReady: boolean
|
|
2527
4332
|
videoReviewError: boolean
|
|
2528
4333
|
videoReviewErrorText: string
|
|
2529
4334
|
videoReviewObjectUrl: string
|
|
2530
|
-
videoModalToolNoneOn: boolean
|
|
2531
4335
|
videoModalToolPointOn: boolean
|
|
2532
4336
|
videoModalToolAreaOn: boolean
|
|
2533
4337
|
videoPointDisplayItems:
|
|
@@ -2535,6 +4339,8 @@ data:
|
|
|
2535
4339
|
leftPct: number
|
|
2536
4340
|
topPct: number
|
|
2537
4341
|
indexLabel: string
|
|
4342
|
+
markerOpen: boolean
|
|
4343
|
+
markerEditMode: boolean
|
|
2538
4344
|
showVideoPointMarkers: boolean
|
|
2539
4345
|
videoAreaDisplayItems:
|
|
2540
4346
|
- id: string
|
|
@@ -2543,6 +4349,8 @@ data:
|
|
|
2543
4349
|
widthPct: number
|
|
2544
4350
|
heightPct: number
|
|
2545
4351
|
indexLabel: string
|
|
4352
|
+
markerOpen: boolean
|
|
4353
|
+
markerEditMode: boolean
|
|
2546
4354
|
showVideoAreaItems: boolean
|
|
2547
4355
|
videoAreaDraftLeftPct: number
|
|
2548
4356
|
videoAreaDraftTopPct: number
|
|
@@ -2553,6 +4361,7 @@ data:
|
|
|
2553
4361
|
- id: string
|
|
2554
4362
|
kindLabel: string
|
|
2555
4363
|
instruction: string
|
|
4364
|
+
showPopover: boolean
|
|
2556
4365
|
runDisabled: boolean
|
|
2557
4366
|
quickSendDisabled: boolean
|
|
2558
4367
|
leftPct: number
|
|
@@ -2564,6 +4373,7 @@ data:
|
|
|
2564
4373
|
name: string
|
|
2565
4374
|
thumbUrl: string
|
|
2566
4375
|
annotationId: string
|
|
4376
|
+
numberLabel: string
|
|
2567
4377
|
addMenuSectionOpen: boolean
|
|
2568
4378
|
showAddMenuControls: boolean
|
|
2569
4379
|
showMarkerAddMenuChips: boolean
|
|
@@ -2573,6 +4383,10 @@ data:
|
|
|
2573
4383
|
itemId: string
|
|
2574
4384
|
title: string
|
|
2575
4385
|
subtitle: string
|
|
4386
|
+
tooltip: string
|
|
4387
|
+
showThumbnail: boolean
|
|
4388
|
+
showInfoIcon: boolean
|
|
4389
|
+
thumbnailUrl: string
|
|
2576
4390
|
crAddMenuParamCollisionWarning: string
|
|
2577
4391
|
crAddMenuRouteParamHint: string
|
|
2578
4392
|
showCrAddMenuRouteParams: boolean
|
|
@@ -2647,6 +4461,7 @@ data:
|
|
|
2647
4461
|
name: string
|
|
2648
4462
|
thumbUrl: string
|
|
2649
4463
|
annotationId: string
|
|
4464
|
+
numberLabel: string
|
|
2650
4465
|
addMenuSectionOpen: boolean
|
|
2651
4466
|
showAddMenuControls: boolean
|
|
2652
4467
|
showMarkerAddMenuChips: boolean
|
|
@@ -2656,6 +4471,10 @@ data:
|
|
|
2656
4471
|
itemId: string
|
|
2657
4472
|
title: string
|
|
2658
4473
|
subtitle: string
|
|
4474
|
+
tooltip: string
|
|
4475
|
+
showThumbnail: boolean
|
|
4476
|
+
showInfoIcon: boolean
|
|
4477
|
+
thumbnailUrl: string
|
|
2659
4478
|
crAddMenuParamCollisionWarning: string
|
|
2660
4479
|
crAddMenuRouteParamHint: string
|
|
2661
4480
|
showCrAddMenuRouteParams: boolean
|
|
@@ -2670,6 +4489,10 @@ data:
|
|
|
2670
4489
|
showSnapshotSubmitError: boolean
|
|
2671
4490
|
snapshotSubmitError: string
|
|
2672
4491
|
showAddPageComposer: boolean
|
|
4492
|
+
showAddPageContentTab: boolean
|
|
4493
|
+
showAddPageDesignTab: boolean
|
|
4494
|
+
addPageContentTabClass: string
|
|
4495
|
+
addPageDesignTabClass: string
|
|
2673
4496
|
addPageRoute: string
|
|
2674
4497
|
addPageContentMd: string
|
|
2675
4498
|
addPageDesignMd: string
|
|
@@ -2730,15 +4553,6 @@ data:
|
|
|
2730
4553
|
projectLocalPluginName: string
|
|
2731
4554
|
projectLocalPackageName: string
|
|
2732
4555
|
projectLocalPath: string
|
|
2733
|
-
showAddMenuPanel: boolean
|
|
2734
|
-
showAddMenuChips: boolean
|
|
2735
|
-
addMenuChipRows:
|
|
2736
|
-
- rowKey: string
|
|
2737
|
-
itemId: string
|
|
2738
|
-
title: string
|
|
2739
|
-
subtitle: string
|
|
2740
|
-
annotationId?: string
|
|
2741
|
-
showAddMenuEmptyHint: boolean
|
|
2742
4556
|
addMenuParamCollisionWarning: string
|
|
2743
4557
|
addMenuRouteParamHint: string
|
|
2744
4558
|
showAddMenuRouteParams: boolean
|
|
@@ -2772,12 +4586,24 @@ data:
|
|
|
2772
4586
|
briefFillContextNotes: string
|
|
2773
4587
|
briefFillPopoverError: string
|
|
2774
4588
|
showBriefFillPopoverError: boolean
|
|
2775
|
-
|
|
4589
|
+
briefFillContentDisabled: boolean
|
|
4590
|
+
briefFillDesignDisabled: boolean
|
|
2776
4591
|
briefFillInputDisabled: boolean
|
|
2777
4592
|
briefFillDropzoneClass: string
|
|
2778
4593
|
addPageBriefFillGenerateDisabled: boolean
|
|
2779
|
-
|
|
2780
|
-
|
|
4594
|
+
contentTabGeneratingHint: string
|
|
4595
|
+
designTabGeneratingHint: string
|
|
4596
|
+
showContentTabGeneratingHint: boolean
|
|
4597
|
+
showDesignTabGeneratingHint: boolean
|
|
4598
|
+
contentGenError: string
|
|
4599
|
+
designGenError: string
|
|
4600
|
+
showContentTabGenError: boolean
|
|
4601
|
+
showDesignTabGenError: boolean
|
|
4602
|
+
addPageContentMdDisabled: boolean
|
|
4603
|
+
addPageDesignMdDisabled: boolean
|
|
4604
|
+
addPageReferencesDisabled: boolean
|
|
4605
|
+
addPageReferencesDropzoneClass: string
|
|
4606
|
+
showAddPageDiscardConfirm: boolean
|
|
2781
4607
|
showBriefFillThumbnails: boolean
|
|
2782
4608
|
addPageBriefFillThumbRows:
|
|
2783
4609
|
- rowKey: string
|
|
@@ -2790,7 +4616,7 @@ data:
|
|
|
2790
4616
|
</script>
|
|
2791
4617
|
</head>
|
|
2792
4618
|
<body>
|
|
2793
|
-
<div class="app-root">
|
|
4619
|
+
<div class="app-root" ref="appRoot">
|
|
2794
4620
|
|
|
2795
4621
|
<div class="setup-screen" if="!isMainVisible">
|
|
2796
4622
|
<h2 class="setup-title">AIditor</h2>
|
|
@@ -2805,7 +4631,7 @@ data:
|
|
|
2805
4631
|
<div class="editor-topbar-left harmony-global-left">
|
|
2806
4632
|
<span class="aiditor-logo"><span class="aiditor-logo-ai">AI</span>ditor</span>
|
|
2807
4633
|
<div class="harmony-page-select-wrap">
|
|
2808
|
-
<span class="harmony-page-label">
|
|
4634
|
+
<span class="harmony-page-label">Pages</span>
|
|
2809
4635
|
<button
|
|
2810
4636
|
type="button"
|
|
2811
4637
|
class="{pageNavBtnClass}"
|
|
@@ -2865,42 +4691,44 @@ data:
|
|
|
2865
4691
|
class="harmony-routes-panel-search-input"
|
|
2866
4692
|
ref="pagesPanelSearchInput"
|
|
2867
4693
|
value="{pagesPanelSearchQuery}"
|
|
2868
|
-
placeholder="Search routes
|
|
2869
|
-
aria-label="Search routes
|
|
4694
|
+
placeholder="Search routes…"
|
|
4695
|
+
aria-label="Search routes"
|
|
2870
4696
|
/>
|
|
2871
4697
|
</div>
|
|
2872
4698
|
<div class="harmony-routes-panel-body">
|
|
2873
|
-
<p class="harmony-routes-panel-empty" if="showPagesPanelEmptySearch">No routes
|
|
2874
|
-
<
|
|
2875
|
-
type="button"
|
|
4699
|
+
<p class="harmony-routes-panel-empty" if="showPagesPanelEmptySearch">No routes match your search.</p>
|
|
4700
|
+
<div
|
|
2876
4701
|
forEach="filteredPageRouteRows"
|
|
2877
4702
|
trackBy="url"
|
|
2878
|
-
class="{
|
|
2879
|
-
data-route-url="{url}"
|
|
2880
|
-
data-routes-panel-route=""
|
|
2881
|
-
>
|
|
2882
|
-
<span class="harmony-routes-panel-check">{checkGlyph}</span>
|
|
2883
|
-
<span class="harmony-routes-panel-item-label">{label}</span>
|
|
2884
|
-
</button>
|
|
2885
|
-
<p class="harmony-routes-panel-section-title" if="showRoutesPanelUrlInstances">URL instances</p>
|
|
2886
|
-
<button
|
|
2887
|
-
type="button"
|
|
2888
|
-
forEach="filteredUrlInstanceRows"
|
|
2889
|
-
trackBy="path"
|
|
2890
|
-
class="{cssClass}"
|
|
2891
|
-
data-preview-path="{path}"
|
|
2892
|
-
data-routes-panel-url-instance=""
|
|
4703
|
+
class="{rowCssClass}"
|
|
2893
4704
|
>
|
|
2894
|
-
<
|
|
2895
|
-
|
|
2896
|
-
|
|
4705
|
+
<button
|
|
4706
|
+
type="button"
|
|
4707
|
+
class="{cssClass}"
|
|
4708
|
+
data-route-url="{url}"
|
|
4709
|
+
data-routes-panel-route=""
|
|
4710
|
+
>
|
|
4711
|
+
<span class="harmony-routes-panel-check">{checkGlyph}</span>
|
|
4712
|
+
<span class="harmony-routes-panel-item-label">{label}</span>
|
|
4713
|
+
</button>
|
|
4714
|
+
<button
|
|
4715
|
+
type="button"
|
|
4716
|
+
class="harmony-routes-panel-open-tab"
|
|
4717
|
+
data-route-url="{url}"
|
|
4718
|
+
data-routes-panel-open-tab=""
|
|
4719
|
+
aria-label="Open route in new tab"
|
|
4720
|
+
title="Open in new tab"
|
|
4721
|
+
>
|
|
4722
|
+
<span class="harmony-routes-panel-open-tab-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 5C11.6642 5 12 5.33579 12 5.75C12 6.16421 11.6642 6.5 11.25 6.5H7C6.72421 6.5 6.5 6.72421 6.5 7V17C6.5 17.2758 6.72421 17.5 7 17.5H17C17.2758 17.5 17.5 17.2758 17.5 17V12.75C17.5 12.3358 17.8358 12 18.25 12C18.6642 12 19 12.3358 19 12.75V17C19 18.1042 18.1042 19 17 19H7C5.89579 19 5 18.1042 5 17V7C5 5.89579 5.89579 5 7 5H11.25Z" fill="currentColor"/><path d="M18.25 5C18.6642 5 19 5.33579 19 5.75V9.25C19 9.66421 18.6642 10 18.25 10C17.8358 10 17.5 9.66421 17.5 9.25V7.56055L15.2803 9.78027C14.9874 10.0732 14.5126 10.0732 14.2197 9.78027C13.9268 9.48738 13.9268 9.01262 14.2197 8.71973L16.4395 6.5H14.75C14.3358 6.5 14 6.16421 14 5.75C14 5.33579 14.3358 5 14.75 5H18.25Z" fill="currentColor"/></svg></span>
|
|
4723
|
+
</button>
|
|
4724
|
+
</div>
|
|
2897
4725
|
</div>
|
|
2898
4726
|
</div>
|
|
2899
4727
|
</div>
|
|
2900
4728
|
|
|
2901
4729
|
<div
|
|
2902
4730
|
class="harmony-routes-panel-overlay"
|
|
2903
|
-
if="showSnapshotPanel"
|
|
4731
|
+
if="showSnapshotNav && showSnapshotPanel"
|
|
2904
4732
|
ref="snapshotPanelOverlay"
|
|
2905
4733
|
role="dialog"
|
|
2906
4734
|
aria-modal="true"
|
|
@@ -2942,11 +4770,26 @@ data:
|
|
|
2942
4770
|
<div class="harmony-float-rail" aria-label="Editor tools">
|
|
2943
4771
|
<button
|
|
2944
4772
|
type="button"
|
|
2945
|
-
class="harmony-add-btn harmony-
|
|
4773
|
+
class="harmony-add-btn harmony-stage-action-btn harmony-stage-add-btn"
|
|
4774
|
+
ref="harmonyStageAddBtn"
|
|
4775
|
+
disabled="isRunning"
|
|
4776
|
+
aria-label="Add request — browse elements and place on the page"
|
|
4777
|
+
title="Add request — browse elements and place on the page"
|
|
4778
|
+
>
|
|
4779
|
+
<span class="harmony-stage-action-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 8C12.4142 8 12.75 8.33579 12.75 8.75V10.25H14.25C14.6642 10.25 15 10.5858 15 11C15 11.4142 14.6642 11.75 14.25 11.75H12.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V11.75H9.75C9.33579 11.75 9 11.4142 9 11C9 10.5858 9.33579 10.25 9.75 10.25H11.25V8.75C11.25 8.33579 11.5858 8 12 8Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 5C18.2142 5 19 5.78579 19 6.75V15.25C19 16.2142 18.2142 17 17.25 17H8.97656L6.16602 18.874C5.93595 19.0274 5.64031 19.0415 5.39648 18.9111C5.15262 18.7806 5 18.5266 5 18.25V6.75C5 5.78579 5.78579 5 6.75 5H17.25ZM6.75 6.5C6.61421 6.5 6.5 6.61421 6.5 6.75V16.8486L8.33398 15.626L8.42969 15.5713C8.52938 15.5242 8.63886 15.5 8.75 15.5H17.25C17.3858 15.5 17.5 15.3858 17.5 15.25V6.75C17.5 6.61421 17.3858 6.5 17.25 6.5H6.75Z" fill="currentColor"/></svg></span>
|
|
4780
|
+
<span class="harmony-stage-action-label">+ Add Request</span>
|
|
4781
|
+
</button>
|
|
4782
|
+
<button
|
|
4783
|
+
type="button"
|
|
4784
|
+
class="harmony-add-btn harmony-stage-action-btn harmony-add-page-btn"
|
|
2946
4785
|
ref="harmonyAddPageBtn"
|
|
2947
4786
|
disabled="isRunning"
|
|
2948
|
-
aria-label="Add
|
|
2949
|
-
|
|
4787
|
+
aria-label="Add page — create a new page"
|
|
4788
|
+
title="Add page — create a new page"
|
|
4789
|
+
>
|
|
4790
|
+
<span class="harmony-stage-action-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16.25 14.5C16.6642 14.5 17 14.8358 17 15.25V16.5H18.25C18.6642 16.5 19 16.8358 19 17.25C19 17.6642 18.6642 18 18.25 18H17V19.25C17 19.6642 16.6642 20 16.25 20C15.8358 20 15.5 19.6642 15.5 19.25V18H14.25C13.8358 18 13.5 17.6642 13.5 17.25C13.5 16.8358 13.8358 16.5 14.25 16.5H15.5V15.25C15.5 14.8358 15.8358 14.5 16.25 14.5ZM15 4C16.1 4 17 4.9 17 6V12.25C17 12.66 16.66 13 16.25 13C15.84 13 15.5 12.66 15.5 12.25V6C15.5 5.72 15.28 5.5 15 5.5H7C6.72 5.5 6.5 5.72 6.5 6V16C6.5 16.28 6.72 16.5 7 16.5H11.25C11.66 16.5 12 16.84 12 17.25C12 17.66 11.66 18 11.25 18H7C5.9 18 5 17.1 5 16V6C5 4.9 5.9 4 7 4H15ZM13.25 10.5C13.6642 10.5 14 10.8358 14 11.25C14 11.6642 13.6642 12 13.25 12H8.75C8.33579 12 8 11.6642 8 11.25C8 10.8358 8.33579 10.5 8.75 10.5H13.25ZM13.25 7.5C13.6642 7.5 14 7.83579 14 8.25C14 8.66421 13.6642 9 13.25 9H8.75C8.33579 9 8 8.66421 8 8.25C8 7.83579 8.33579 7.5 8.75 7.5H13.25Z" fill="currentColor"/></svg></span>
|
|
4791
|
+
<span class="harmony-stage-action-label">Add Page</span>
|
|
4792
|
+
</button>
|
|
2950
4793
|
</div>
|
|
2951
4794
|
|
|
2952
4795
|
<div class="harmony-workspace">
|
|
@@ -2966,8 +4809,33 @@ data:
|
|
|
2966
4809
|
<div class="stage-resize-handle stage-resize-handle-right" ref="stageResizeRight" title="Drag to resize stage" aria-label="Resize stage width"></div>
|
|
2967
4810
|
<div class="canvas-window harmony-canvas-window">
|
|
2968
4811
|
<div class="canvas-chrome harmony-canvas-chrome">
|
|
4812
|
+
<div class="harmony-canvas-chrome-left canvas-chrome-left">
|
|
4813
|
+
<button
|
|
4814
|
+
type="button"
|
|
4815
|
+
class="harmony-add-btn harmony-stage-action-btn harmony-page-info-btn"
|
|
4816
|
+
ref="harmonyAssetsBtn"
|
|
4817
|
+
disabled="isRunning"
|
|
4818
|
+
aria-label="Page info — route and components"
|
|
4819
|
+
title="Page info — route and components"
|
|
4820
|
+
>
|
|
4821
|
+
<span class="harmony-stage-action-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M14.25 11.5C14.6642 11.5 15 11.8358 15 12.25C15 12.6642 14.6642 13 14.25 13H9.75C9.33579 13 9 12.6642 9 12.25C9 11.8358 9.33579 11.5 9.75 11.5H14.25Z" fill="currentColor"/><path d="M14.25 8.5C14.6642 8.5 15 8.83579 15 9.25C15 9.66421 14.6642 10 14.25 10H9.75C9.33579 10 9 9.66421 9 9.25C9 8.83579 9.33579 8.5 9.75 8.5H14.25Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 5C17.1 5 18 5.9 18 7V17C18 18.1 17.1 19 16 19H8C6.9 19 6 18.1 6 17V7C6 5.9 6.9 5 8 5H16ZM8 6.5C7.72 6.5 7.5 6.72 7.5 7V17C7.5 17.28 7.72 17.5 8 17.5H16C16.28 17.5 16.5 17.28 16.5 17V7C16.5 6.72 16.28 6.5 16 6.5H8Z" fill="currentColor"/></svg></span>
|
|
4822
|
+
<span class="harmony-stage-action-label">Page Info</span>
|
|
4823
|
+
</button>
|
|
4824
|
+
</div>
|
|
2969
4825
|
<div class="url-bar-wrap harmony-url-bar-wrap">
|
|
2970
|
-
<div class="url-bar">
|
|
4826
|
+
<div class="url-bar">
|
|
4827
|
+
<span class="url-bar-text">{previewUrlBar}</span>
|
|
4828
|
+
<button
|
|
4829
|
+
type="button"
|
|
4830
|
+
class="url-bar-open-tab"
|
|
4831
|
+
ref="previewUrlBarOpenTabBtn"
|
|
4832
|
+
disabled="previewUrlBarOpenTabDisabled"
|
|
4833
|
+
aria-label="Open preview in new tab"
|
|
4834
|
+
title="Open in new tab"
|
|
4835
|
+
>
|
|
4836
|
+
<span class="harmony-routes-panel-open-tab-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.25 5C11.6642 5 12 5.33579 12 5.75C12 6.16421 11.6642 6.5 11.25 6.5H7C6.72421 6.5 6.5 6.72421 6.5 7V17C6.5 17.2758 6.72421 17.5 7 17.5H17C17.2758 17.5 17.5 17.2758 17.5 17V12.75C17.5 12.3358 17.8358 12 18.25 12C18.6642 12 19 12.3358 19 12.75V17C19 18.1042 18.1042 19 17 19H7C5.89579 19 5 18.1042 5 17V7C5 5.89579 5.89579 5 7 5H11.25Z" fill="currentColor"/><path d="M18.25 5C18.6642 5 19 5.33579 19 5.75V9.25C19 9.66421 18.6642 10 18.25 10C17.8358 10 17.5 9.66421 17.5 9.25V7.56055L15.2803 9.78027C14.9874 10.0732 14.5126 10.0732 14.2197 9.78027C13.9268 9.48738 13.9268 9.01262 14.2197 8.71973L16.4395 6.5H14.75C14.3358 6.5 14 6.16421 14 5.75C14 5.33579 14.3358 5 14.75 5H18.25Z" fill="currentColor"/></svg></span>
|
|
4837
|
+
</button>
|
|
4838
|
+
</div>
|
|
2971
4839
|
</div>
|
|
2972
4840
|
<div class="canvas-chrome-right harmony-breakpoint-tools" if="showVisualToolbar">
|
|
2973
4841
|
<button type="button" class="{breakpointDesktopOn ? visual-tool-on} visual-tool-btn" ref="breakpointDesktopBtn" title="Desktop (1280px)"><svg width="16" height="13" viewBox="0 0 16 13" fill="none"><rect x="0.7" y="0.7" width="14.6" height="9.1" rx="1.1" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 9.8v2M10.5 9.8v2M3.5 11.8h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>
|
|
@@ -3047,13 +4915,16 @@ data:
|
|
|
3047
4915
|
<div class="visual-attachment-chip">
|
|
3048
4916
|
<img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
|
|
3049
4917
|
<span class="visual-attachment-name">{name}</span>
|
|
3050
|
-
<
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
4918
|
+
<div class="visual-attachment-chip-actions">
|
|
4919
|
+
<button
|
|
4920
|
+
type="button"
|
|
4921
|
+
class="visual-attachment-remove-file"
|
|
4922
|
+
data-annotation-id="{annotationId}"
|
|
4923
|
+
data-att-key="{key}"
|
|
4924
|
+
aria-label="Remove attachment"
|
|
4925
|
+
>×</button>
|
|
4926
|
+
<span class="visual-attachment-number">{numberLabel}</span>
|
|
4927
|
+
</div>
|
|
3057
4928
|
</div>
|
|
3058
4929
|
</div>
|
|
3059
4930
|
</div>
|
|
@@ -3084,35 +4955,6 @@ data:
|
|
|
3084
4955
|
data-annotation-id="{id}"
|
|
3085
4956
|
value="{instruction}"
|
|
3086
4957
|
></textarea>
|
|
3087
|
-
<div class="annotation-add-menu">
|
|
3088
|
-
<div class="annotation-add-menu-panel add-menu-panel">
|
|
3089
|
-
<div class="add-menu-panel-attached">
|
|
3090
|
-
<div if="showMarkerAddMenuChips">
|
|
3091
|
-
<div class="add-page-plugins-zone-title">Add Menu on this marker</div>
|
|
3092
|
-
<div class="add-page-plugin-chips">
|
|
3093
|
-
<span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
|
|
3094
|
-
</div>
|
|
3095
|
-
</div>
|
|
3096
|
-
<p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
|
|
3097
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
|
|
3098
|
-
<p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
|
|
3099
|
-
<p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
|
|
3100
|
-
<div class="add-menu-route-params" if="showCrAddMenuRouteParams">
|
|
3101
|
-
<span class="add-page-hint">Route params:</span>
|
|
3102
|
-
<button type="button" class="add-page-param-btn" forEach="crAddMenuRouteParamRows" trackBy="rowKey" data-cr-route-param="1" data-param="{name}">[{name}]</button>
|
|
3103
|
-
</div>
|
|
3104
|
-
<div class="add-page-suggested-route" if="showCrPlannedRoutePanel">
|
|
3105
|
-
<div class="add-page-section-label">Planned page route</div>
|
|
3106
|
-
<input type="text" class="add-page-route-input cr-planned-route-input" value="{crPlannedRoute}" placeholder="/products/[slug]" />
|
|
3107
|
-
</div>
|
|
3108
|
-
<div class="add-menu-route-confirm" if="showCrRouteParamConfirm">
|
|
3109
|
-
<p>Adding <strong>{crPendingRouteParamTitle}</strong> requires a dynamic route. Files change only after the agent completes the task.</p>
|
|
3110
|
-
<button type="button" class="add-page-btn add-page-btn-primary" data-cr-route-param-confirm="1">Add anyway</button>
|
|
3111
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
|
|
3112
|
-
</div>
|
|
3113
|
-
</div>
|
|
3114
|
-
</div>
|
|
3115
|
-
</div>
|
|
3116
4958
|
<div class="visual-annotation-files">
|
|
3117
4959
|
<div class="visual-attach-row">
|
|
3118
4960
|
<button type="button" class="visual-attach-btn visual-annotation-attach" data-annotation-id="{id}">
|
|
@@ -3123,13 +4965,16 @@ data:
|
|
|
3123
4965
|
<div class="visual-attachment-chip">
|
|
3124
4966
|
<img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
|
|
3125
4967
|
<span class="visual-attachment-name">{name}</span>
|
|
3126
|
-
<
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
4968
|
+
<div class="visual-attachment-chip-actions">
|
|
4969
|
+
<button
|
|
4970
|
+
type="button"
|
|
4971
|
+
class="visual-attachment-remove-file"
|
|
4972
|
+
data-annotation-id="{annotationId}"
|
|
4973
|
+
data-att-key="{key}"
|
|
4974
|
+
aria-label="Remove attachment"
|
|
4975
|
+
>×</button>
|
|
4976
|
+
<span class="visual-attachment-number">{numberLabel}</span>
|
|
4977
|
+
</div>
|
|
3133
4978
|
</div>
|
|
3134
4979
|
</div>
|
|
3135
4980
|
</div>
|
|
@@ -3142,8 +4987,58 @@ data:
|
|
|
3142
4987
|
><svg class="tool-send-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M14 2L7 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M14 2L9.5 14L7 9L2 6.5L14 2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
|
|
3143
4988
|
</div>
|
|
3144
4989
|
</div>
|
|
3145
|
-
</div>
|
|
3146
|
-
<p class="visual-submit-error" if="showVisualSubmitError">{visualSubmitError}</p>
|
|
4990
|
+
</div>
|
|
4991
|
+
<p class="visual-submit-error" if="showVisualSubmitError">{visualSubmitError}</p>
|
|
4992
|
+
</div>
|
|
4993
|
+
</div>
|
|
4994
|
+
<div
|
|
4995
|
+
class="harmony-instance-switcher"
|
|
4996
|
+
if="showInstanceSwitcher"
|
|
4997
|
+
ref="instanceSwitcher"
|
|
4998
|
+
style="top: {instanceSwitcherTop}; left: {instanceSwitcherLeft}; transform: {instanceSwitcherTransform};"
|
|
4999
|
+
role="group"
|
|
5000
|
+
aria-label="URL instance"
|
|
5001
|
+
>
|
|
5002
|
+
<button
|
|
5003
|
+
type="button"
|
|
5004
|
+
class="harmony-instance-switcher-drag"
|
|
5005
|
+
ref="instanceSwitcherDragHandle"
|
|
5006
|
+
aria-label="Drag instance switcher"
|
|
5007
|
+
>
|
|
5008
|
+
<span class="harmony-instance-switcher-drag-dots" aria-hidden="true">
|
|
5009
|
+
<span></span><span></span><span></span><span></span><span></span><span></span>
|
|
5010
|
+
</span>
|
|
5011
|
+
</button>
|
|
5012
|
+
<div class="harmony-instance-switcher-main">
|
|
5013
|
+
<span class="harmony-instance-switcher-label">{instanceSwitcherCurrentLabel}</span>
|
|
5014
|
+
<button
|
|
5015
|
+
type="button"
|
|
5016
|
+
class="{instanceSwitcherTriggerClass}"
|
|
5017
|
+
ref="instanceSwitcherTrigger"
|
|
5018
|
+
aria-expanded="{showInstanceSwitcherMenu}"
|
|
5019
|
+
aria-haspopup="listbox"
|
|
5020
|
+
>
|
|
5021
|
+
<span>{instanceSwitcherCountLabel}</span>
|
|
5022
|
+
<span class="harmony-instance-switcher-chevron" aria-hidden="true">▾</span>
|
|
5023
|
+
</button>
|
|
5024
|
+
</div>
|
|
5025
|
+
<div
|
|
5026
|
+
class="{instanceSwitcherMenuOpensAbove ? harmony-instance-switcher-menu--above} harmony-instance-switcher-menu"
|
|
5027
|
+
if="showInstanceSwitcherMenu"
|
|
5028
|
+
ref="instanceSwitcherMenu"
|
|
5029
|
+
role="listbox"
|
|
5030
|
+
aria-label="URL instances"
|
|
5031
|
+
>
|
|
5032
|
+
<button
|
|
5033
|
+
type="button"
|
|
5034
|
+
forEach="instanceSwitcherRows"
|
|
5035
|
+
trackBy="path"
|
|
5036
|
+
class="{cssClass}"
|
|
5037
|
+
data-instance-switcher-item=""
|
|
5038
|
+
data-instance-path="{path}"
|
|
5039
|
+
role="option"
|
|
5040
|
+
aria-selected="{isSelected}"
|
|
5041
|
+
>{label}</button>
|
|
3147
5042
|
</div>
|
|
3148
5043
|
</div>
|
|
3149
5044
|
|
|
@@ -3185,11 +5080,12 @@ data:
|
|
|
3185
5080
|
type="button"
|
|
3186
5081
|
class="visual-tool-btn freeze-btn"
|
|
3187
5082
|
ref="freezeBtn"
|
|
5083
|
+
if="showFreezeBtn"
|
|
3188
5084
|
disabled="freezeDisabled"
|
|
3189
5085
|
title="Freeze the current page state"
|
|
3190
5086
|
aria-label="Freeze the current page state"
|
|
3191
5087
|
><span class="tool-glyph" aria-hidden="true">❄</span></button>
|
|
3192
|
-
<span class="tool-group-sep"></span>
|
|
5088
|
+
<span class="tool-group-sep" if="showFreezeBtn"></span>
|
|
3193
5089
|
<button
|
|
3194
5090
|
type="button"
|
|
3195
5091
|
class="visual-tool-btn send-to-agent-btn"
|
|
@@ -3254,57 +5150,6 @@ data:
|
|
|
3254
5150
|
</div>
|
|
3255
5151
|
</div>
|
|
3256
5152
|
|
|
3257
|
-
<div class="add-menu-picker-overlay" if="showAddMenuPickerModal" ref="addMenuPickerOverlay" role="dialog" aria-modal="true" aria-label="Add elements">
|
|
3258
|
-
<div class="{addMenuPickerDialogClass}" ref="addMenuPickerDialog">
|
|
3259
|
-
<div class="add-menu-picker-header">
|
|
3260
|
-
<span class="add-menu-picker-title">{addMenuPickerHeaderTitle}</span>
|
|
3261
|
-
<button type="button" class="add-menu-picker-close" ref="addMenuPickerCloseBtn" aria-label="Close">×</button>
|
|
3262
|
-
</div>
|
|
3263
|
-
<div class="add-menu-picker-body">
|
|
3264
|
-
<p class="add-menu-picker-hint" if="showAddMenuPickerLoading">Loading plugin catalog…</p>
|
|
3265
|
-
<p class="add-menu-picker-hint" if="showAddMenuPickerEmpty">No Add Menu items yet. Install plugins in Project settings, then try again.</p>
|
|
3266
|
-
<div class="add-menu-picker-browse" if="showAddMenuPickerBrowse">
|
|
3267
|
-
<div class="add-menu-picker-search-row">
|
|
3268
|
-
<button type="button" class="add-menu-picker-back" if="showAddMenuPickerSearchBack" data-add-menu-picker-search-back="1" aria-label="Back to browse">‹</button>
|
|
3269
|
-
<div class="add-menu-picker-search-field">
|
|
3270
|
-
<span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
|
|
3271
|
-
<input type="search" class="add-menu-picker-search-input" ref="addMenuPickerSearchInput" placeholder="Search elements…" value="{addMenuPickerSearchQuery}" />
|
|
3272
|
-
<button type="button" class="add-menu-picker-search-clear" if="showAddMenuPickerSearchClear" data-add-menu-picker-search-clear="1" aria-label="Clear search">×</button>
|
|
3273
|
-
</div>
|
|
3274
|
-
</div>
|
|
3275
|
-
<div class="{addMenuPickerBrowseLayoutClass}">
|
|
3276
|
-
<nav class="add-menu-picker-sidebar" if="showAddMenuPickerBrowseLayout" aria-label="Categories">
|
|
3277
|
-
<button type="button" class="{cssClass}" forEach="addMenuPickerLeftNavRows" trackBy="rowKey" data-add-menu-picker-left-nav="1" data-nav-key="{navKey}">
|
|
3278
|
-
<span class="add-menu-picker-category-label">{label}</span>
|
|
3279
|
-
<span class="add-menu-picker-category-count">{itemCount}</span>
|
|
3280
|
-
</button>
|
|
3281
|
-
</nav>
|
|
3282
|
-
<div class="add-menu-picker-main">
|
|
3283
|
-
<h2 class="add-menu-picker-main-title" if="showAddMenuPickerBrowseTitle">{addMenuPickerBrowseCategoryTitle}</h2>
|
|
3284
|
-
<p class="add-menu-picker-search-summary" if="showAddMenuPickerSearchSummary">{addMenuPickerSearchSummary}</p>
|
|
3285
|
-
<div class="add-menu-picker-subcategory-scroll" if="showAddMenuPickerSubCategoryFilters">
|
|
3286
|
-
<button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollPrev" data-add-menu-picker-subcategory-scroll="1" data-direction="prev" aria-label="Scroll filters left">‹</button>
|
|
3287
|
-
<div class="add-menu-picker-subcategories" ref="addMenuPickerSubCategoryFilters">
|
|
3288
|
-
<button type="button" class="{cssClass}" forEach="addMenuPickerSubCategoryFilterRows" trackBy="rowKey" data-add-menu-picker-subcategory-filter="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showCount">{itemCount}</span></button>
|
|
3289
|
-
</div>
|
|
3290
|
-
<button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollNext" data-add-menu-picker-subcategory-scroll="1" data-direction="next" aria-label="Scroll filters right">›</button>
|
|
3291
|
-
</div>
|
|
3292
|
-
<div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents">
|
|
3293
|
-
<div class="add-menu-picker-browse-row" forEach="addMenuPickerBrowseRows" trackBy="rowKey">
|
|
3294
|
-
<h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
|
|
3295
|
-
<button type="button" class="add-menu-picker-component-card" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}"><span class="add-menu-picker-component-title">{label}</span></button>
|
|
3296
|
-
<div class="add-menu-picker-component-card add-menu-picker-component-card--browse-only" if="showBrowseOnly"><span class="add-menu-picker-component-title" title="{label}">{label}</span></div>
|
|
3297
|
-
</div>
|
|
3298
|
-
</div>
|
|
3299
|
-
<p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
|
|
3300
|
-
<p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
|
|
3301
|
-
</div>
|
|
3302
|
-
</div>
|
|
3303
|
-
</div>
|
|
3304
|
-
</div>
|
|
3305
|
-
</div>
|
|
3306
|
-
</div>
|
|
3307
|
-
|
|
3308
5153
|
<div class="project-settings-overlay" if="showProjectSettingsModal" ref="projectSettingsOverlay" role="dialog" aria-modal="true" aria-label="Project settings">
|
|
3309
5154
|
<div class="project-settings-dialog">
|
|
3310
5155
|
<div class="project-settings-header">
|
|
@@ -3356,120 +5201,442 @@ data:
|
|
|
3356
5201
|
</div>
|
|
3357
5202
|
</div>
|
|
3358
5203
|
|
|
3359
|
-
<div class="add-page-overlay" if="showAddPageComposer" ref="addPageOverlay" role="dialog" aria-modal="true" aria-label="Add Page">
|
|
5204
|
+
<div class="add-page-overlay" if="showAddPageComposer && !showAddMenuPickerModal" ref="addPageOverlay" role="dialog" aria-modal="true" aria-label="Add Page">
|
|
3360
5205
|
<div class="add-page-slideover" ref="addPageSlideover">
|
|
3361
5206
|
<div class="add-page-header">
|
|
3362
5207
|
<span class="add-page-title">Add Page</span>
|
|
3363
5208
|
<button type="button" class="add-page-close" ref="addPageCloseBtn" aria-label="Close">×</button>
|
|
3364
5209
|
</div>
|
|
3365
|
-
<div class="add-page-
|
|
3366
|
-
<
|
|
3367
|
-
<
|
|
3368
|
-
<
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
<
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
5210
|
+
<div class="add-page-subheader">
|
|
5211
|
+
<div class="add-page-tabs" role="tablist" aria-label="Page brief sections">
|
|
5212
|
+
<button type="button" class="{addPageContentTabClass}" ref="addPageContentTabBtn" role="tab" aria-selected="showAddPageContentTab">Content</button>
|
|
5213
|
+
<button type="button" class="{addPageDesignTabClass}" ref="addPageDesignTabBtn" role="tab" aria-selected="showAddPageDesignTab">Design</button>
|
|
5214
|
+
</div>
|
|
5215
|
+
</div>
|
|
5216
|
+
<div class="add-page-layout">
|
|
5217
|
+
<div class="add-page-main">
|
|
5218
|
+
<div class="add-page-main-scroll">
|
|
5219
|
+
<section class="add-page-tab-panel" if="showAddPageContentTab" role="tabpanel">
|
|
5220
|
+
<div>
|
|
5221
|
+
<div class="add-page-section-label">Page URL*</div>
|
|
5222
|
+
<div class="add-page-route-row">
|
|
5223
|
+
<input type="text" class="add-page-route-input {showAddPageRouteError ? add-page-route-input--error}" ref="addPageRouteInput" value="{addPageRoute}" placeholder="/pricing or /products/[slug]" />
|
|
5224
|
+
<span class="add-page-route-badge" if="addPageIsDynamicRoute">Dynamic route</span>
|
|
5225
|
+
</div>
|
|
5226
|
+
<p class="add-page-field-error" if="showAddPageRouteError">{addPageRouteError}</p>
|
|
5227
|
+
<p class="add-page-field-error" if="addMenuParamCollisionWarning">{addMenuParamCollisionWarning}</p>
|
|
5228
|
+
<p class="add-page-hint" if="addMenuRouteParamHint">{addMenuRouteParamHint}</p>
|
|
5229
|
+
<div class="add-menu-route-params" ref="addPageRouteParamsPanel" if="showAddMenuRouteParams">
|
|
5230
|
+
<span class="add-page-hint">Route params:</span>
|
|
5231
|
+
<button type="button" class="add-page-param-btn" forEach="addMenuRouteParamRows" trackBy="rowKey" data-add-menu-param="1" data-param="{name}">[{name}]</button>
|
|
5232
|
+
</div>
|
|
5233
|
+
<div class="add-menu-route-confirm" if="showAddMenuRouteParamConfirm" ref="addMenuPanel">
|
|
5234
|
+
<p><strong>This component needs a dynamic page route</strong></p>
|
|
5235
|
+
<p>Adding <strong>{addMenuPendingRouteParamTitle}</strong> will require updating the page URL. Files change only after the agent completes the task.</p>
|
|
5236
|
+
<button type="button" class="add-page-btn add-page-btn-primary" data-add-menu-route-confirm="1">Add anyway</button>
|
|
5237
|
+
<button type="button" class="add-page-btn add-page-btn-cancel" data-add-menu-route-cancel="1">Cancel</button>
|
|
5238
|
+
</div>
|
|
5239
|
+
<div class="add-page-suggested-route" if="showSuggestedRouteBanner">
|
|
5240
|
+
<span>Suggested route: <code>{suggestedRouteLabel}</code></span>
|
|
5241
|
+
<button type="button" class="add-page-btn add-page-btn-primary" ref="addPageSuggestedRouteApplyBtn" style="flex:0;padding:4px 10px;font-size:11px">Apply route</button>
|
|
5242
|
+
<button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageSuggestedRouteDismissBtn" style="flex:0;padding:4px 10px;font-size:11px">Dismiss</button>
|
|
5243
|
+
</div>
|
|
5244
|
+
</div>
|
|
5245
|
+
<div class="add-page-tab-editor">
|
|
5246
|
+
<div class="add-page-section-label">Content</div>
|
|
5247
|
+
<p class="add-page-hint">Behavior, plugins, contracts, interactions, copy.</p>
|
|
5248
|
+
<div class="add-page-textarea-wrap">
|
|
5249
|
+
<textarea class="add-page-textarea" ref="addPageContentMd" placeholder="# Pricing page - Headless: none (static marketing page) - Show 3 tiers: Starter / Pro / Enterprise" value="{addPageContentMd}" disabled="addPageContentMdDisabled"></textarea>
|
|
5250
|
+
<div class="add-page-brief-generating-overlay" if="showContentTabGeneratingHint">
|
|
5251
|
+
<p class="add-page-hint">{contentTabGeneratingHint}</p>
|
|
5252
|
+
<button type="button" class="add-page-btn add-page-btn-cancel add-page-brief-generating-stop" ref="addPageBriefFillStopContentBtn">Stop</button>
|
|
5253
|
+
</div>
|
|
5254
|
+
<button type="button" class="add-page-fill-image-btn" ref="addPageFillContentFromImageBtn" title="Fill content from images to inspire the new page — page snapshot, Figma export, or any reference site" aria-label="Fill content from images" disabled="briefFillContentDisabled"><svg class="add-page-fill-image-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" overflow="visible" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></button>
|
|
5255
|
+
</div>
|
|
5256
|
+
<p class="add-page-field-error" if="showContentTabGenError">{contentGenError}</p>
|
|
5257
|
+
</div>
|
|
5258
|
+
</section>
|
|
5259
|
+
<section class="add-page-tab-panel" if="showAddPageDesignTab" role="tabpanel">
|
|
5260
|
+
<div class="add-page-tab-editor">
|
|
5261
|
+
<div class="add-page-section-label">Design</div>
|
|
5262
|
+
<p class="add-page-hint">Layout, colors, typography, breakpoints.</p>
|
|
5263
|
+
<div class="add-page-textarea-wrap">
|
|
5264
|
+
<textarea class="add-page-textarea" ref="addPageDesignMd" placeholder="- Match site header from home - Hero: centered H1, muted subtitle (#888)" value="{addPageDesignMd}" disabled="addPageDesignMdDisabled"></textarea>
|
|
5265
|
+
<div class="add-page-brief-generating-overlay" if="showDesignTabGeneratingHint">
|
|
5266
|
+
<p class="add-page-hint">{designTabGeneratingHint}</p>
|
|
5267
|
+
<button type="button" class="add-page-btn add-page-btn-cancel add-page-brief-generating-stop" ref="addPageBriefFillStopDesignBtn">Stop</button>
|
|
5268
|
+
</div>
|
|
5269
|
+
<button type="button" class="add-page-fill-image-btn" ref="addPageFillDesignFromImageBtn" title="Fill design from images to inspire the new page — page snapshot, Figma export, or any reference site" aria-label="Fill design from images" disabled="briefFillDesignDisabled"><svg class="add-page-fill-image-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" overflow="visible" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></button>
|
|
5270
|
+
</div>
|
|
5271
|
+
<p class="add-page-field-error" if="showDesignTabGenError">{designGenError}</p>
|
|
5272
|
+
<p class="add-page-hint" if="addPageShowDesignHint">Add a mock or screenshot for better layout fidelity.</p>
|
|
5273
|
+
</div>
|
|
5274
|
+
</section>
|
|
5275
|
+
<section class="add-page-references">
|
|
5276
|
+
<div class="add-page-references-row">
|
|
5277
|
+
<div class="{addPageReferencesDropzoneClass}" ref="addPageReferenceDrop">
|
|
5278
|
+
<span class="add-page-dropzone-text">Drop <strong>REFERENCES</strong> files here</span>
|
|
5279
|
+
<span class="add-page-dropzone-separator">or</span>
|
|
5280
|
+
<button type="button" class="add-page-btn add-page-btn-cancel add-page-btn--compact" ref="addPageAttachReferenceBtn" disabled="addPageReferencesDisabled">Upload from Computer</button>
|
|
5281
|
+
</div>
|
|
5282
|
+
</div>
|
|
5283
|
+
<input type="file" class="add-page-hidden-file" ref="addPageReferenceFileInput" multiple disabled="addPageReferencesDisabled" />
|
|
5284
|
+
<p class="add-page-hint" if="showAddPageUploadHint">{addPageUploadHint}</p>
|
|
5285
|
+
<div class="add-page-chips" ref="addPageAttachmentsList" if="showAddPageAttachments">
|
|
5286
|
+
<div class="add-page-chip" forEach="addPageAttachmentRows" trackBy="rowKey">
|
|
5287
|
+
<span class="add-page-chip-name">{filename}</span>
|
|
5288
|
+
<select data-attachment-id="{id}" value="{role}">
|
|
5289
|
+
<option value="reference">Reference</option>
|
|
5290
|
+
<option value="asset">Asset</option>
|
|
5291
|
+
</select>
|
|
5292
|
+
<span class="add-page-chip-path">{path}</span>
|
|
5293
|
+
<button type="button" class="add-page-chip-remove" data-add-page-remove="{id}">×</button>
|
|
5294
|
+
</div>
|
|
5295
|
+
</div>
|
|
5296
|
+
</section>
|
|
5297
|
+
<p class="add-page-field-error" if="showAddPageComposerError">{addPageComposerError}</p>
|
|
5298
|
+
<p class="add-page-hint" if="showAddPageRunningHint">{addPageRunningHint}</p>
|
|
3389
5299
|
</div>
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
</span>
|
|
5300
|
+
</div>
|
|
5301
|
+
</div>
|
|
5302
|
+
<div class="add-page-footer">
|
|
5303
|
+
<button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageCancelBtn">Cancel</button>
|
|
5304
|
+
<button type="button" class="add-page-btn add-page-btn-primary" ref="addPageCreateBtn" disabled="addPageCreateDisabled">Create page</button>
|
|
5305
|
+
</div>
|
|
5306
|
+
<div class="add-page-brief-fill-popover" if="showBriefFillPopover" ref="addPageBriefFillPopover">
|
|
5307
|
+
<div class="add-page-brief-fill-popover-stack">
|
|
5308
|
+
<div class="add-page-brief-fill-panel">
|
|
5309
|
+
<div class="add-page-brief-fill-header">
|
|
5310
|
+
<span class="add-page-brief-fill-title">Fill from image</span>
|
|
5311
|
+
<button type="button" class="add-page-close" ref="addPageBriefFillCloseBtn" aria-label="Close">×</button>
|
|
3401
5312
|
</div>
|
|
3402
|
-
<p class="add-page-hint"
|
|
3403
|
-
<
|
|
5313
|
+
<p class="add-page-hint">Add at least one screenshot. Optional notes help the AI (e.g. Image 1 = desktop, Image 2 = mobile).</p>
|
|
5314
|
+
<label class="add-page-hint">Context notes
|
|
5315
|
+
<textarea class="add-page-brief-fill-context" ref="addPageBriefFillContextNotes" placeholder="Route: /pricing Match header from home Image 2 = mobile frame" value="{briefFillContextNotes}" disabled="briefFillInputDisabled"></textarea>
|
|
5316
|
+
</label>
|
|
5317
|
+
<div class="{briefFillDropzoneClass}" ref="addPageBriefFillDropzone" tabindex="0">Paste (⌘V), drag-drop, or click to upload (max 5 images)</div>
|
|
5318
|
+
<input type="file" class="add-page-hidden-file" ref="addPageBriefFillFileInput" accept="image/*" multiple disabled="briefFillInputDisabled" />
|
|
5319
|
+
<div class="add-page-brief-fill-thumbs" ref="addPageBriefFillThumbnails" if="showBriefFillThumbnails">
|
|
5320
|
+
<div class="add-page-brief-fill-thumb" forEach="addPageBriefFillThumbRows" trackBy="rowKey">
|
|
5321
|
+
<img src="{thumbUrl}" alt="{name}" />
|
|
5322
|
+
<button type="button" class="add-page-brief-fill-thumb-remove" data-brief-fill-remove="{index}" disabled="removeDisabled">×</button>
|
|
5323
|
+
</div>
|
|
3404
5324
|
</div>
|
|
3405
|
-
<
|
|
3406
|
-
|
|
3407
|
-
<
|
|
3408
|
-
<button type="button" class="add-page-btn add-page-btn-primary"
|
|
3409
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-add-menu-route-cancel="1">Cancel</button>
|
|
5325
|
+
<p class="add-page-field-error" if="showBriefFillPopoverError">{briefFillPopoverError}</p>
|
|
5326
|
+
<div class="add-page-brief-fill-actions">
|
|
5327
|
+
<button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageBriefFillCancelBtn">Cancel</button>
|
|
5328
|
+
<button type="button" class="add-page-btn add-page-btn-primary" ref="addPageBriefFillGenerateBtn" disabled="addPageBriefFillGenerateDisabled" style="flex:0">Generate</button>
|
|
3410
5329
|
</div>
|
|
3411
5330
|
</div>
|
|
3412
|
-
</
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
5331
|
+
</div>
|
|
5332
|
+
</div>
|
|
5333
|
+
<div class="add-page-discard-confirm-overlay" if="showAddPageDiscardConfirm" ref="addPageDiscardConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm discard Add Page draft">
|
|
5334
|
+
<div class="add-page-discard-confirm-dialog">
|
|
5335
|
+
<p class="add-page-discard-confirm-msg">Discard Add Page draft? Unsaved content, design notes, and attachments will be lost.</p>
|
|
5336
|
+
<div class="add-page-discard-confirm-actions">
|
|
5337
|
+
<button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageDiscardDismissBtn">Keep editing</button>
|
|
5338
|
+
<button type="button" class="add-page-btn add-page-btn-primary" ref="addPageDiscardConfirmBtn" style="flex:0">Discard</button>
|
|
3417
5339
|
</div>
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
5340
|
+
</div>
|
|
5341
|
+
</div>
|
|
5342
|
+
</div>
|
|
5343
|
+
</div>
|
|
5344
|
+
|
|
5345
|
+
<div
|
|
5346
|
+
class="page-info-panel"
|
|
5347
|
+
if="showPageInfoPanel"
|
|
5348
|
+
ref="pageInfoPanel"
|
|
5349
|
+
role="dialog"
|
|
5350
|
+
aria-label="Page info"
|
|
5351
|
+
style="left: {pageInfoPanelLeft}px; top: {pageInfoPanelTop}px;"
|
|
5352
|
+
>
|
|
5353
|
+
<div class="page-info-panel-header" ref="pageInfoPanelHeader">
|
|
5354
|
+
<button type="button" class="add-menu-picker-header-back" if="showPageInfoHeaderBack" ref="pageInfoInspectorBackBtn" aria-label="Back to page info"><svg class="add-menu-picker-header-back-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9.21973 8.46978C9.51262 8.17688 9.98738 8.17688 10.2803 8.46978C10.5731 8.76268 10.5731 9.23745 10.2803 9.53032L8.56055 11.2501H17.25C17.6642 11.2501 18 11.5858 18 12.0001C17.9999 12.4142 17.6642 12.75 17.25 12.7501H8.56055L10.2803 14.4698C10.5731 14.7627 10.5731 15.2375 10.2803 15.5303C9.9874 15.8232 9.51261 15.8231 9.21973 15.5303L6.21973 12.5303C6.18773 12.4983 6.15977 12.4636 6.13477 12.4278C6.10404 12.3837 6.07744 12.3365 6.05664 12.2862C6.0359 12.2359 6.02106 12.1838 6.01172 12.1309C6.00423 12.0884 6.00001 12.0447 6 12.0001C6 11.9548 6.00403 11.9103 6.01172 11.8672C6.02081 11.8164 6.03505 11.7663 6.05469 11.7178L6.05859 11.7081C6.07937 11.6589 6.10545 11.6125 6.13574 11.5694C6.16035 11.5344 6.18842 11.5011 6.21973 11.4698L9.21973 8.46978Z" fill="currentColor"/></svg></button>
|
|
5355
|
+
<div class="page-info-panel-header-text">
|
|
5356
|
+
<span class="page-info-panel-title" if="showPageInfoMainView">Page info</span>
|
|
5357
|
+
<span class="page-info-panel-title" if="showPageInfoInspectorDetail">{pageInfoInspectorDetailTitle}</span>
|
|
5358
|
+
<span class="page-info-panel-subtitle" if="showPageInfoMainView">Components on this page and what is bound in the template</span>
|
|
5359
|
+
</div>
|
|
5360
|
+
<button type="button" class="add-menu-picker-close" ref="pageInfoPanelCloseBtn" aria-label="Close">×</button>
|
|
5361
|
+
</div>
|
|
5362
|
+
<div class="page-info-panel-body" ref="pageInfoPanelBody">
|
|
5363
|
+
<div class="page-info-main-view" if="showPageInfoMainView">
|
|
5364
|
+
<div class="page-info-route-card page-info-route-section {pageInfoRouteSectionClass}">
|
|
5365
|
+
<div class="page-info-route-header">
|
|
5366
|
+
<div class="add-page-section-label">Route</div>
|
|
5367
|
+
<div class="page-info-route-actions">
|
|
5368
|
+
<button type="button" class="page-info-route-icon-btn" if="showPageInfoRouteEditBtn" ref="pageInfoRouteEditBtn" aria-label="Edit route"><svg class="page-info-route-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8561 5C16.503 5.00007 17.1344 5.25785 17.5964 5.71973C18.0566 6.18008 18.3161 6.80074 18.3161 7.45996C18.3161 8.49028 17.9061 9.46781 17.1911 10.1953L16.0964 11.29L10.2858 17.0801C10.0636 17.3023 9.78408 17.4628 9.47625 17.5371L9.47722 17.5381L6.5573 18.2676L6.55242 18.2686C5.63667 18.4909 4.81423 17.6687 5.03679 16.7529L5.03777 16.748L5.76824 13.8281C5.8395 13.5241 5.99394 13.2413 6.22527 13.0195L12.0251 7.21973L13.1159 6.12988C13.8492 5.39662 14.8313 5.00005 15.8561 5ZM7.26433 14.1016C7.25283 14.1123 7.23682 14.1341 7.2282 14.1729C7.22678 14.1792 7.22491 14.186 7.22332 14.1924L6.59246 16.7119L9.11394 16.082L9.12371 16.0801C9.15223 16.0734 9.18971 16.0551 9.22527 16.0195L14.9948 10.249L13.0553 8.30957L7.26433 14.1016ZM15.8561 6.5C15.2213 6.50005 14.623 6.74396 14.1764 7.19043L14.1169 7.25L16.0661 9.19922L16.1257 9.13965C16.5677 8.68771 16.8161 8.08737 16.8161 7.45996C16.8161 7.19934 16.7153 6.95987 16.5358 6.78027C16.3579 6.60243 16.109 6.50008 15.8561 6.5Z" fill="currentColor"/></svg></button>
|
|
5369
|
+
<button type="button" class="page-info-route-icon-btn" if="showPageInfoRouteApproveBtn" ref="pageInfoRouteApproveBtn" aria-label="Apply route change"><svg class="page-info-route-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M13.7539 9.52051C14.0189 9.20219 14.4912 9.15886 14.8096 9.42383C15.1278 9.6888 15.1711 10.1612 14.9062 10.4795L11.5762 14.4795C11.4247 14.6614 11.1963 14.7616 10.96 14.749C10.7235 14.7363 10.5061 14.6122 10.375 14.415L9.04492 12.415C8.81594 12.0702 8.91016 11.6043 9.25488 11.375C9.59974 11.146 10.0656 11.2402 10.2949 11.585L11.0674 12.7471L13.7539 9.52051Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5ZM12 6.5C8.97 6.5 6.5 8.97 6.5 12C6.5 15.03 8.97 17.5 12 17.5C15.03 17.5 17.5 15.03 17.5 12C17.5 8.97 15.03 6.5 12 6.5Z" fill="currentColor"/></svg></button>
|
|
5370
|
+
<button type="button" class="page-info-route-icon-btn" if="showPageInfoRouteCancelEditBtn" ref="pageInfoRouteCancelEditBtn" aria-label="Cancel route edit"><svg class="page-info-route-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M13.7197 9.21973C14.0126 8.92683 14.4874 8.92683 14.7803 9.21973C15.0732 9.51262 15.0732 9.98738 14.7803 10.2803L13.0605 12L14.7803 13.7197C15.0732 14.0126 15.0732 14.4874 14.7803 14.7803C14.4874 15.0732 14.0126 15.0732 13.7197 14.7803L12 13.0605L10.2803 14.7803C9.98738 15.0732 9.51262 15.0732 9.21973 14.7803C8.92683 14.4874 8.92683 14.0126 9.21973 13.7197L10.9395 12L9.21973 10.2803C8.92683 9.98738 8.92683 9.51262 9.21973 9.21973C9.51262 8.92683 9.98738 8.92683 10.2803 9.21973L12 10.9395L13.7197 9.21973Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5ZM12 6.5C8.97 6.5 6.5 8.97 6.5 12C6.5 15.03 8.97 17.5 12 17.5C15.03 17.5 17.5 15.03 17.5 12C17.5 8.97 15.03 6.5 12 6.5Z" fill="currentColor"/></svg></button>
|
|
3438
5371
|
</div>
|
|
3439
|
-
</
|
|
3440
|
-
<
|
|
3441
|
-
|
|
5372
|
+
</div>
|
|
5373
|
+
<div class="page-info-route-field {pageInfoRouteFieldClass}">
|
|
5374
|
+
<code class="page-info-route-value" if="!showPageInfoRouteEditing">{pageInfoDisplayRoute}</code>
|
|
5375
|
+
<input type="text" class="page-info-route-input" if="showPageInfoRouteEditing" ref="pageInfoRouteInput" value="{pageInfoDraftRoute}" placeholder="/products/[slug]" />
|
|
5376
|
+
<span class="page-info-route-problem" if="showPageInfoRouteProblem" title="{pageInfoRouteProblemTooltip}"><svg class="page-info-route-problem-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 3L21 8.29289V15.7071L15.7071 21H8.29289L3 15.7071V8.29289L8.29289 3H15.7071ZM15.293 4H8.706L4 8.706V15.293L8.707 20H15.292L20 15.292V8.707L15.293 4ZM12 15C12.5523 15 13 15.4477 13 16C13 16.5128 12.614 16.9355 12.1166 16.9933L12 17C11.4477 17 11 16.5523 11 16C11 15.4872 11.386 15.0645 11.8834 15.0067L12 15ZM12 7C12.5523 7 13 7.44772 13 8V12C13 12.5128 12.614 12.9355 12.1166 12.9933L12 13C11.4477 13 11 12.5523 11 12V8C11 7.48716 11.386 7.06449 11.8834 7.00673L12 7Z" fill="currentColor"/></svg></span>
|
|
5377
|
+
</div>
|
|
5378
|
+
<div class="page-info-route-missing-params" if="showPageInfoRouteMissingParamChips">
|
|
5379
|
+
<button type="button" class="page-info-param-chip page-info-param-chip--add" forEach="pageInfoMissingParamRows" trackBy="rowKey" data-page-info-missing-param="{name}">{chipLabel}</button>
|
|
5380
|
+
</div>
|
|
5381
|
+
<p class="page-info-field-error" if="pageInfoParamCollisionWarning">{pageInfoParamCollisionWarning}</p>
|
|
5382
|
+
<div class="page-info-route-confirm" if="showPageInfoRouteParamConfirm">
|
|
5383
|
+
<p class="page-info-hint">Adding <strong>{pageInfoPendingRouteParamTitle}</strong> needs a dynamic route.</p>
|
|
5384
|
+
<div class="page-info-route-confirm-actions">
|
|
5385
|
+
<button type="button" class="harmony-btn-secondary" ref="pageInfoRouteParamCancelBtn">Cancel</button>
|
|
5386
|
+
<button type="button" class="harmony-btn-primary" ref="pageInfoRouteParamConfirmBtn">Update route</button>
|
|
5387
|
+
</div>
|
|
5388
|
+
</div>
|
|
3442
5389
|
</div>
|
|
3443
|
-
<div class="
|
|
3444
|
-
|
|
3445
|
-
<
|
|
5390
|
+
<div class="page-info-duplicate-warning" if="showPageInfoDuplicateWarning">{pageInfoDuplicateKeyWarning}</div>
|
|
5391
|
+
<div class="page-info-section">
|
|
5392
|
+
<div class="add-page-section-label">On this page</div>
|
|
5393
|
+
<p class="page-info-empty" if="showPageInfoComponentsEmpty">No headless components in page.jay-html yet.</p>
|
|
5394
|
+
<p class="page-info-hint page-info-loading" if="showPageInfoComponentsLoading">Scanning page template…</p>
|
|
5395
|
+
<div class="page-info-component-list" if="!showPageInfoComponentsEmpty">
|
|
5396
|
+
<button type="button" class="{rowClass}" forEach="pageInfoComponentRows" trackBy="rowKey" data-page-info-component="1" data-detected-key="{detectedKey}" title="{title}">
|
|
5397
|
+
<span class="add-menu-picker-component-info-icon" aria-hidden="true">▦</span>
|
|
5398
|
+
<span class="add-menu-picker-component-title">{title}</span>
|
|
5399
|
+
<span class="page-info-component-subtitle" if="showContractSubtitle">{contractSubtitle}</span>
|
|
5400
|
+
<span class="page-info-component-keyline" if="showComponentKey">key: {componentKey}</span>
|
|
5401
|
+
<span class="page-info-duplicate-badge" if="showDuplicateBadge">duplicate key</span>
|
|
5402
|
+
</button>
|
|
5403
|
+
</div>
|
|
3446
5404
|
</div>
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
5405
|
+
</div>
|
|
5406
|
+
<div class="page-info-inspector" if="showPageInfoInspectorDetail">
|
|
5407
|
+
<p class="page-info-hint page-info-loading" if="showPageInfoInspectorLoading">Loading contract tags…</p>
|
|
5408
|
+
<p class="page-info-hint" if="showPageInfoInspectorNoContract">This component has no headless contract (for example a Jay full-stack component). Only plugin headless components expose contract tags.</p>
|
|
5409
|
+
<p class="page-info-inspector-error" if="showPageInfoInspectorError">{pageInfoInspectorError}</p>
|
|
5410
|
+
<ul class="page-info-tag-list" if="showPageInfoInspectorHasTags">
|
|
5411
|
+
<li class="page-info-tag-row {tagUsageClass}" forEach="pageInfoInspectorTagRows" trackBy="rowKey" title="{tagDescription}">
|
|
5412
|
+
<span class="page-info-tag-path">{tagPath}</span>
|
|
5413
|
+
<span class="page-info-tag-kind-pill">{tagKind}</span>
|
|
5414
|
+
<span class="page-info-tag-status page-info-tag-status--bound" if="showTagBound">bound</span>
|
|
5415
|
+
<span class="page-info-tag-status page-info-tag-status--available" if="showTagAvailable">available</span>
|
|
5416
|
+
<code class="page-info-tag-sample" if="showTagSamples">{tagSampleText}</code>
|
|
5417
|
+
</li>
|
|
5418
|
+
</ul>
|
|
5419
|
+
</div>
|
|
5420
|
+
</div>
|
|
5421
|
+
</div>
|
|
5422
|
+
|
|
5423
|
+
<div class="page-info-route-change-confirm-overlay" if="showPageInfoRouteChangeConfirm" ref="pageInfoRouteChangeConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm page route change">
|
|
5424
|
+
<div class="page-info-route-change-confirm-dialog">
|
|
5425
|
+
<h3 class="page-info-route-change-confirm-title">Change page URL?</h3>
|
|
5426
|
+
<p class="page-info-route-change-confirm-body">The page URL is about to change. This can affect links across the site and may affect agent conversation history for this page. The agent will implement this route change now, including moving page files and fixing links that still point to the old URL.</p>
|
|
5427
|
+
<div class="page-info-route-change-confirm-routes">{pageInfoRouteChangeConfirmFrom} → {pageInfoRouteChangeConfirmTo}</div>
|
|
5428
|
+
<div class="page-info-route-change-confirm-actions">
|
|
5429
|
+
<button type="button" class="harmony-btn-secondary" ref="pageInfoRouteChangeCancelBtn">Cancel</button>
|
|
5430
|
+
<button type="button" class="harmony-btn-primary" ref="pageInfoRouteChangeConfirmBtn">Yes, change route</button>
|
|
5431
|
+
</div>
|
|
5432
|
+
</div>
|
|
5433
|
+
</div>
|
|
5434
|
+
|
|
5435
|
+
<div class="add-menu-dock-backdrop" if="showAddMenuDock" ref="addMenuDockBackdrop" aria-hidden="true"></div>
|
|
5436
|
+
|
|
5437
|
+
<div
|
|
5438
|
+
class="add-menu-dock-panel"
|
|
5439
|
+
if="showAddMenuDock"
|
|
5440
|
+
ref="addMenuDockPanel"
|
|
5441
|
+
role="dialog"
|
|
5442
|
+
aria-label="+ Add Requests"
|
|
5443
|
+
style="left: {addMenuDockLeft}px; top: {addMenuDockTop}px;"
|
|
5444
|
+
>
|
|
5445
|
+
<div class="add-menu-dock-header" ref="addMenuDockHeader">
|
|
5446
|
+
<span class="add-menu-dock-title">+ Add Requests</span>
|
|
5447
|
+
<button type="button" class="add-menu-picker-close" ref="addMenuDockCloseBtn" aria-label="Close">×</button>
|
|
5448
|
+
</div>
|
|
5449
|
+
<p class="add-menu-dock-subhint">Drag elements onto the page preview to place them. Click reference items to add @mentions when a marker is focused.</p>
|
|
5450
|
+
<div class="add-menu-dock-body">
|
|
5451
|
+
<p class="add-menu-picker-hint" if="showAddMenuDockLoading">Loading catalog…</p>
|
|
5452
|
+
<p class="add-menu-picker-hint" if="showAddMenuDockEmpty">No catalog items — install plugins and run setup.</p>
|
|
5453
|
+
<div class="add-menu-picker-browse" if="showAddMenuDockBrowse">
|
|
5454
|
+
<div class="add-menu-picker-search-row">
|
|
5455
|
+
<button type="button" class="add-menu-picker-back" if="showAddMenuDockSearchBack" data-add-menu-dock-search-back="1" aria-label="Back to browse">‹</button>
|
|
5456
|
+
<div class="add-menu-picker-search-field">
|
|
5457
|
+
<span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
|
|
5458
|
+
<input type="search" class="add-menu-picker-search-input" ref="addMenuDockSearchInput" placeholder="Search elements…" value="{addMenuDockSearchQuery}" />
|
|
5459
|
+
<button type="button" class="add-menu-picker-search-clear" if="showAddMenuDockSearchClear" data-add-menu-dock-search-clear="1" aria-label="Clear search">×</button>
|
|
5460
|
+
</div>
|
|
5461
|
+
</div>
|
|
5462
|
+
<div class="{addMenuDockBrowseLayoutClass}">
|
|
5463
|
+
<nav class="add-menu-picker-sidebar" if="showAddMenuDockBrowseLayout" aria-label="Categories">
|
|
5464
|
+
<button type="button" class="{cssClass}" forEach="addMenuDockLeftNavRows" trackBy="rowKey" data-add-menu-dock-left-nav="1" data-nav-key="{navKey}">
|
|
5465
|
+
<span class="add-menu-picker-category-label">{label}</span>
|
|
5466
|
+
<span class="add-menu-picker-category-count">
|
|
5467
|
+
<span class="add-menu-picker-category-selected-count" if="showSelectedCount">{selectedCount}</span><span if="showSelectedCount"> / </span>{itemCount}
|
|
5468
|
+
</span>
|
|
5469
|
+
</button>
|
|
5470
|
+
</nav>
|
|
5471
|
+
<div class="add-menu-picker-main">
|
|
5472
|
+
<h2 class="add-menu-picker-main-title" if="showAddMenuDockBrowseTitle">{addMenuDockBrowseCategoryTitle}</h2>
|
|
5473
|
+
<p class="add-menu-picker-search-summary" if="showAddMenuDockSearchSummary">{addMenuDockSearchSummary}</p>
|
|
5474
|
+
<div class="add-menu-picker-subcategory-scroll" if="showAddMenuDockSubCategoryFilters">
|
|
5475
|
+
<div class="add-menu-picker-subcategories">
|
|
5476
|
+
<button type="button" class="{cssClass}" forEach="addMenuDockSubCategoryFilterRows" trackBy="rowKey" data-add-menu-dock-subcategory="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showSubCategoryCount">{subCategoryCountLabel}</span></button>
|
|
5477
|
+
</div>
|
|
5478
|
+
</div>
|
|
5479
|
+
<div class="add-menu-picker-browse-content" if="showAddMenuDockComponents">
|
|
5480
|
+
<div class="add-menu-picker-browse-row" forEach="addMenuDockBrowseRows" trackBy="rowKey">
|
|
5481
|
+
<h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
|
|
5482
|
+
<button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showThumbnail"><img class="{thumbCssClass}" src="{thumbnailUrl}" alt="" /></span><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
|
|
5483
|
+
<div class="add-menu-picker-component-card add-menu-picker-component-card--browse-only" if="showBrowseOnly"><span class="add-menu-picker-component-title" title="{label}">{label}</span></div>
|
|
5484
|
+
</div>
|
|
5485
|
+
<div class="add-menu-picker-load-more-row" if="showAddMenuDockLoadMore">
|
|
5486
|
+
<button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-dock-load-more="1">{addMenuDockLoadMoreLabel}</button>
|
|
5487
|
+
</div>
|
|
5488
|
+
</div>
|
|
5489
|
+
<p class="add-menu-picker-hint" if="showAddMenuDockNoComponents">No components in this group.</p>
|
|
5490
|
+
<p class="add-menu-picker-hint" if="showAddMenuDockNoSearchResults">No elements match your search.</p>
|
|
3452
5491
|
</div>
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
5492
|
+
</div>
|
|
5493
|
+
</div>
|
|
5494
|
+
</div>
|
|
5495
|
+
</div>
|
|
5496
|
+
|
|
5497
|
+
<div class="aiditor-toast" if="showToastMessage" role="status" aria-live="polite">{toastMessage}</div>
|
|
5498
|
+
|
|
5499
|
+
<div
|
|
5500
|
+
class="{assetMentionOpensAbove ? asset-mention-autocomplete--above} asset-mention-autocomplete"
|
|
5501
|
+
if="showAssetMentionPanel"
|
|
5502
|
+
ref="assetMentionPanel"
|
|
5503
|
+
role="listbox"
|
|
5504
|
+
style="left: {assetMentionLeft}px; top: {assetMentionTop}px;"
|
|
5505
|
+
>
|
|
5506
|
+
<div class="asset-mention-header">
|
|
5507
|
+
<button
|
|
5508
|
+
type="button"
|
|
5509
|
+
class="asset-mention-header-back"
|
|
5510
|
+
if="showAssetMentionHeaderBack"
|
|
5511
|
+
ref="assetMentionHeaderBack"
|
|
5512
|
+
aria-label="Back"
|
|
5513
|
+
>←</button>
|
|
5514
|
+
<div class="asset-mention-header-search-field" if="showAssetMentionSearchField">
|
|
5515
|
+
<span class="asset-mention-header-search-icon" aria-hidden="true">⌕</span>
|
|
5516
|
+
<input
|
|
5517
|
+
type="search"
|
|
5518
|
+
class="asset-mention-header-search-input"
|
|
5519
|
+
ref="assetMentionHeaderSearchInput"
|
|
5520
|
+
placeholder="Search assets…"
|
|
5521
|
+
value="{assetMentionSearchQuery}"
|
|
5522
|
+
aria-label="Search assets"
|
|
5523
|
+
/>
|
|
5524
|
+
<button
|
|
5525
|
+
type="button"
|
|
5526
|
+
class="asset-mention-header-search-close"
|
|
5527
|
+
ref="assetMentionHeaderSearchClose"
|
|
5528
|
+
aria-label="Close search"
|
|
5529
|
+
>×</button>
|
|
5530
|
+
</div>
|
|
5531
|
+
<span class="asset-mention-header-title" if="!showAssetMentionSearchField">{assetMentionHeaderTitle}</span>
|
|
5532
|
+
<button
|
|
5533
|
+
type="button"
|
|
5534
|
+
class="asset-mention-header-search-toggle"
|
|
5535
|
+
if="!showAssetMentionSearchField"
|
|
5536
|
+
ref="assetMentionHeaderSearchToggle"
|
|
5537
|
+
aria-label="Search assets"
|
|
5538
|
+
>⌕</button>
|
|
5539
|
+
</div>
|
|
5540
|
+
<div class="asset-mention-list">
|
|
5541
|
+
<button
|
|
5542
|
+
type="button"
|
|
5543
|
+
class="{cssClass}"
|
|
5544
|
+
forEach="assetMentionRows"
|
|
5545
|
+
trackBy="rowKey"
|
|
5546
|
+
ref="assetMentionRow"
|
|
5547
|
+
role="option"
|
|
5548
|
+
data-asset-mention-row-index="{rowIndex}"
|
|
5549
|
+
>
|
|
5550
|
+
<img if="showThumbnail" class="asset-mention-option-thumb" src="{thumbnailUrl}" alt="" />
|
|
5551
|
+
<span if="showInfoIcon" class="asset-mention-option-icon" aria-hidden="true">▦</span>
|
|
5552
|
+
<span if="showAtIcon" class="asset-mention-option-icon asset-mention-option-icon--at" aria-hidden="true">@</span>
|
|
5553
|
+
<span if="showNavIcon" class="asset-mention-option-icon asset-mention-option-icon--nav" aria-hidden="true">›</span>
|
|
5554
|
+
<span class="asset-mention-option-text">
|
|
5555
|
+
<span class="asset-mention-option-title">{title}</span>
|
|
5556
|
+
<span class="asset-mention-option-subtitle" if="subtitle">{subtitle}</span>
|
|
5557
|
+
</span>
|
|
5558
|
+
</button>
|
|
5559
|
+
</div>
|
|
5560
|
+
</div>
|
|
5561
|
+
|
|
5562
|
+
<div class="stage-drop-ghost" ref="stageDropGhost" aria-hidden="true" style="display: none;">
|
|
5563
|
+
<span class="stage-drop-ghost-marker"></span>
|
|
5564
|
+
<span class="stage-drop-ghost-hint"></span>
|
|
5565
|
+
</div>
|
|
5566
|
+
|
|
5567
|
+
<div
|
|
5568
|
+
ref="assetMentionCaretMirror"
|
|
5569
|
+
aria-hidden="true"
|
|
5570
|
+
style="position: absolute; visibility: hidden; pointer-events: none;"
|
|
5571
|
+
><span ref="assetMentionCaretMirrorSpan"></span></div>
|
|
5572
|
+
|
|
5573
|
+
<div class="{addMenuPickerOverlayClass}" if="showAddMenuPickerModal" ref="addMenuPickerOverlay" role="dialog" aria-modal="true" aria-label="Add Assets">
|
|
5574
|
+
<div class="{addMenuPickerDialogClass}" ref="addMenuPickerDialog">
|
|
5575
|
+
<div class="add-menu-picker-header">
|
|
5576
|
+
<button type="button" class="add-menu-picker-header-back" if="showAddMenuPickerHeaderBack" ref="addMenuPickerBackBtn" aria-label="Back to Add Page"><svg class="add-menu-picker-header-back-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9.21973 8.46978C9.51262 8.17688 9.98738 8.17688 10.2803 8.46978C10.5731 8.76268 10.5731 9.23745 10.2803 9.53032L8.56055 11.2501H17.25C17.6642 11.2501 18 11.5858 18 12.0001C17.9999 12.4142 17.6642 12.75 17.25 12.7501H8.56055L10.2803 14.4698C10.5731 14.7627 10.5731 15.2375 10.2803 15.5303C9.9874 15.8232 9.51261 15.8231 9.21973 15.5303L6.21973 12.5303C6.18773 12.4983 6.15977 12.4636 6.13477 12.4278C6.10404 12.3837 6.07744 12.3365 6.05664 12.2862C6.0359 12.2359 6.02106 12.1838 6.01172 12.1309C6.00423 12.0884 6.00001 12.0447 6 12.0001C6 11.9548 6.00403 11.9103 6.01172 11.8672C6.02081 11.8164 6.03505 11.7663 6.05469 11.7178L6.05859 11.7081C6.07937 11.6589 6.10545 11.6125 6.13574 11.5694C6.16035 11.5344 6.18842 11.5011 6.21973 11.4698L9.21973 8.46978Z" fill="currentColor"/></svg></button>
|
|
5577
|
+
<span class="add-menu-picker-title">{addMenuPickerHeaderTitle}</span>
|
|
5578
|
+
<button type="button" class="add-menu-picker-close" ref="addMenuPickerCloseBtn" aria-label="Close">×</button>
|
|
5579
|
+
</div>
|
|
5580
|
+
<div class="add-menu-picker-body">
|
|
5581
|
+
<p class="add-menu-picker-hint" if="showAddMenuPickerLoading">Loading plugin catalog…</p>
|
|
5582
|
+
<p class="add-menu-picker-hint" if="showAddMenuPickerEmpty">No Add Menu items yet. Install plugins in Project settings, then try again.</p>
|
|
5583
|
+
<div class="add-menu-picker-browse" if="showAddMenuPickerBrowse">
|
|
5584
|
+
<div class="add-menu-picker-search-row">
|
|
5585
|
+
<button type="button" class="add-menu-picker-back" if="showAddMenuPickerSearchBack" data-add-menu-picker-search-back="1" aria-label="Back to browse">‹</button>
|
|
5586
|
+
<div class="add-menu-picker-search-field">
|
|
5587
|
+
<span class="add-menu-picker-search-icon" aria-hidden="true">⌕</span>
|
|
5588
|
+
<input type="search" class="add-menu-picker-search-input" ref="addMenuPickerSearchInput" placeholder="Search elements…" value="{addMenuPickerSearchQuery}" />
|
|
5589
|
+
<button type="button" class="add-menu-picker-search-clear" if="showAddMenuPickerSearchClear" data-add-menu-picker-search-clear="1" aria-label="Clear search">×</button>
|
|
3463
5590
|
</div>
|
|
3464
5591
|
</div>
|
|
3465
|
-
<
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
5592
|
+
<div class="{addMenuPickerBrowseLayoutClass}">
|
|
5593
|
+
<nav class="add-menu-picker-sidebar" if="showAddMenuPickerBrowseLayout" aria-label="Categories">
|
|
5594
|
+
<button type="button" class="{cssClass}" forEach="addMenuPickerLeftNavRows" trackBy="rowKey" data-add-menu-picker-left-nav="1" data-nav-key="{navKey}">
|
|
5595
|
+
<span class="add-menu-picker-category-label">{label}</span>
|
|
5596
|
+
<span class="add-menu-picker-category-count">
|
|
5597
|
+
<span class="add-menu-picker-category-selected-count" if="showSelectedCount">{selectedCount}</span><span if="showSelectedCount"> / </span>{itemCount}
|
|
5598
|
+
</span>
|
|
5599
|
+
</button>
|
|
5600
|
+
</nav>
|
|
5601
|
+
<div class="add-menu-picker-main">
|
|
5602
|
+
<h2 class="add-menu-picker-main-title" if="showAddMenuPickerBrowseTitle">{addMenuPickerBrowseCategoryTitle}</h2>
|
|
5603
|
+
<p class="add-menu-picker-search-summary" if="showAddMenuPickerSearchSummary">{addMenuPickerSearchSummary}</p>
|
|
5604
|
+
<div class="add-menu-picker-subcategory-scroll" if="showAddMenuPickerSubCategoryFilters">
|
|
5605
|
+
<button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollPrev" data-add-menu-picker-subcategory-scroll="1" data-direction="prev" aria-label="Scroll filters left">‹</button>
|
|
5606
|
+
<div class="add-menu-picker-subcategories" ref="addMenuPickerSubCategoryFilters">
|
|
5607
|
+
<button type="button" class="{cssClass}" forEach="addMenuPickerSubCategoryFilterRows" trackBy="rowKey" data-add-menu-picker-subcategory-filter="1" data-nav-key="{navKey}"><span>{label}</span><span class="add-menu-picker-subcategory-count" if="showSubCategoryCount">{subCategoryCountLabel}</span></button>
|
|
5608
|
+
</div>
|
|
5609
|
+
<button type="button" class="add-menu-picker-subcategory-scroll-btn" if="showAddMenuPickerSubCategoryScrollNext" data-add-menu-picker-subcategory-scroll="1" data-direction="next" aria-label="Scroll filters right">›</button>
|
|
5610
|
+
</div>
|
|
5611
|
+
<div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents">
|
|
5612
|
+
<div class="add-menu-picker-browse-row" forEach="addMenuPickerBrowseRows" trackBy="rowKey">
|
|
5613
|
+
<h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
|
|
5614
|
+
<button type="button" class="{cardCssClass}" if="showPickable" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showThumbnail"><img class="{thumbCssClass}" src="{thumbnailUrl}" alt="" /></span><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
|
|
5615
|
+
<div class="add-menu-picker-component-card add-menu-picker-component-card--browse-only" if="showBrowseOnly"><span class="add-menu-picker-component-title" title="{label}">{label}</span></div>
|
|
5616
|
+
</div>
|
|
5617
|
+
<div class="add-menu-picker-load-more-row" if="showAddMenuPickerLoadMore">
|
|
5618
|
+
<button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-picker-load-more="1">{addMenuPickerLoadMoreLabel}</button>
|
|
5619
|
+
</div>
|
|
5620
|
+
</div>
|
|
5621
|
+
<p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
|
|
5622
|
+
<p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
|
|
5623
|
+
</div>
|
|
3470
5624
|
</div>
|
|
3471
5625
|
</div>
|
|
3472
5626
|
</div>
|
|
5627
|
+
<div class="add-menu-picker-footer" if="showAddMenuPickerDone">
|
|
5628
|
+
<button type="button" class="harmony-btn-primary add-menu-picker-done-btn" data-add-menu-picker-done="1" disabled="addMenuPickerDoneDisabled">{addMenuPickerDoneLabel}</button>
|
|
5629
|
+
</div>
|
|
5630
|
+
</div>
|
|
5631
|
+
</div>
|
|
5632
|
+
|
|
5633
|
+
<div class="add-menu-picker-dismiss-confirm-overlay" if="showAddMenuPickerDismissConfirm" ref="addMenuPickerDismissConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm close">
|
|
5634
|
+
<div class="add-menu-picker-dismiss-confirm-dialog">
|
|
5635
|
+
<p class="add-menu-picker-dismiss-confirm-msg">{addMenuPickerDismissConfirmMessage}</p>
|
|
5636
|
+
<div class="add-menu-picker-dismiss-confirm-actions">
|
|
5637
|
+
<button type="button" class="harmony-btn-secondary" data-add-menu-picker-dismiss-cancel="1">Cancel</button>
|
|
5638
|
+
<button type="button" class="harmony-btn-primary" data-add-menu-picker-dismiss-confirm="1">Close anyway</button>
|
|
5639
|
+
</div>
|
|
3473
5640
|
</div>
|
|
3474
5641
|
</div>
|
|
3475
5642
|
|
|
@@ -3494,15 +5661,13 @@ data:
|
|
|
3494
5661
|
<h2 class="video-review-title">Review recording</h2>
|
|
3495
5662
|
<p class="video-review-meta" if="videoReviewReady">{videoTimeLabel}</p>
|
|
3496
5663
|
</div>
|
|
3497
|
-
<button type="button" class="
|
|
5664
|
+
<button type="button" class="harmony-modal-close" ref="videoReviewCloseBtn" aria-label="Close"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M11.0214 0.219132C10.7292 -0.0730476 10.2555 -0.0730476 9.96334 0.219132L5.69238 4.49009L1.42142 0.219132C1.12924 -0.0730477 0.655524 -0.0730475 0.363345 0.219132C0.0743381 0.508139 0.0707425 0.97559 0.355269 1.26901L4.64238 5.69009L0.217383 10.1151C-0.0725663 10.405 -0.0725667 10.8751 0.217383 11.1651C0.507332 11.455 0.977433 11.455 1.26738 11.1651L5.69238 6.74009L10.1174 11.1651C10.4073 11.455 10.8774 11.455 11.1674 11.1651C11.4573 10.8751 11.4573 10.405 11.1674 10.1151L6.74238 5.69009L11.0295 1.26901C11.314 0.97559 11.3104 0.508138 11.0214 0.219132Z" fill="currentColor"/></svg></button>
|
|
3498
5665
|
</div>
|
|
3499
5666
|
<p if="videoReviewPreparing">Preparing recording…</p>
|
|
3500
5667
|
<p class="preview-error" if="videoReviewError">{videoReviewErrorText}</p>
|
|
3501
5668
|
<!-- Must mount while preparing: refs.videoReviewPlayer must exist before videoReviewReady flips true. -->
|
|
3502
|
-
<div if="videoReviewPreparing || videoReviewReady">
|
|
5669
|
+
<div class="video-review-body" if="videoReviewPreparing || videoReviewReady">
|
|
3503
5670
|
<div class="video-review-tools">
|
|
3504
|
-
<button type="button" class="{videoModalToolNoneOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolNoneBtn" title="Select and pan the video" aria-label="Select and pan the video"><span class="tool-glyph" aria-hidden="true">☒</span></button>
|
|
3505
|
-
<span class="tool-group-sep"></span>
|
|
3506
5671
|
<button type="button" class="{videoModalToolPointOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolPointBtn" title="Add a point marker" aria-label="Add a point marker"><span class="tool-glyph" aria-hidden="true">⊚</span></button>
|
|
3507
5672
|
<button type="button" class="{videoModalToolAreaOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolAreaBtn" title="Add an area marker" aria-label="Add an area marker"><span class="tool-glyph" aria-hidden="true">▢</span></button>
|
|
3508
5673
|
</div>
|
|
@@ -3518,19 +5683,33 @@ data:
|
|
|
3518
5683
|
></video>
|
|
3519
5684
|
<div class="{videoModalOverlayPointerNone ? visual-overlay-none} visual-overlay" ref="videoReviewOverlay">
|
|
3520
5685
|
<div
|
|
3521
|
-
class="point-marker"
|
|
5686
|
+
class="{markerOpen ? point-marker-open} {markerEditMode ? marker-edit-mode} point-marker"
|
|
3522
5687
|
forEach="videoPointDisplayItems"
|
|
3523
5688
|
trackBy="id"
|
|
5689
|
+
ref="visualAnnotationMarker"
|
|
5690
|
+
data-visual-annotation-marker="{id}"
|
|
3524
5691
|
style="left: {leftPct}%; top: {topPct}%;"
|
|
3525
5692
|
>
|
|
3526
5693
|
<span class="point-marker-idx">{indexLabel}</span>
|
|
3527
5694
|
</div>
|
|
3528
5695
|
<div
|
|
3529
|
-
class="area-rect"
|
|
5696
|
+
class="{markerOpen ? area-rect-open} {markerEditMode ? marker-edit-mode} area-rect"
|
|
3530
5697
|
forEach="videoAreaDisplayItems"
|
|
3531
5698
|
trackBy="id"
|
|
5699
|
+
ref="visualAnnotationMarker"
|
|
5700
|
+
data-visual-annotation-marker="{id}"
|
|
3532
5701
|
style="left: {leftPct}%; top: {topPct}%; width: {widthPct}%; height: {heightPct}%;"
|
|
3533
|
-
|
|
5702
|
+
>
|
|
5703
|
+
<span class="area-marker-idx">{indexLabel}</span>
|
|
5704
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-nw" data-area-resize-handle="nw"></div>
|
|
5705
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-n" data-area-resize-handle="n"></div>
|
|
5706
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-ne" data-area-resize-handle="ne"></div>
|
|
5707
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-e" data-area-resize-handle="e"></div>
|
|
5708
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-se" data-area-resize-handle="se"></div>
|
|
5709
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-s" data-area-resize-handle="s"></div>
|
|
5710
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-sw" data-area-resize-handle="sw"></div>
|
|
5711
|
+
<div if="markerEditMode" class="area-resize-handle area-resize-w" data-area-resize-handle="w"></div>
|
|
5712
|
+
</div>
|
|
3534
5713
|
<div
|
|
3535
5714
|
class="area-rect area-rect-draft"
|
|
3536
5715
|
if="showVideoAreaDraftRect"
|
|
@@ -3539,7 +5718,7 @@ data:
|
|
|
3539
5718
|
</div>
|
|
3540
5719
|
<div class="visual-popovers" if="showVideoAnnotationPopoversAtPlayhead">
|
|
3541
5720
|
<div
|
|
3542
|
-
class="{popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
|
|
5721
|
+
class="{!showPopover ? visual-popover-hidden} {popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
|
|
3543
5722
|
forEach="videoAnnotationRows"
|
|
3544
5723
|
trackBy="id"
|
|
3545
5724
|
ref="videoAnnotationRow"
|
|
@@ -3550,6 +5729,12 @@ data:
|
|
|
3550
5729
|
<span class="visual-annotation-kind">{kindLabel}</span>
|
|
3551
5730
|
<div class="visual-annotation-actions">
|
|
3552
5731
|
<button type="button" class="visual-annotation-remove" title="Remove annotation">Remove</button>
|
|
5732
|
+
<button
|
|
5733
|
+
type="button"
|
|
5734
|
+
class="visual-annotation-minimize"
|
|
5735
|
+
title="Minimize comment"
|
|
5736
|
+
aria-label="Minimize comment"
|
|
5737
|
+
><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M4 6l3 3 3-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
|
3553
5738
|
</div>
|
|
3554
5739
|
</div>
|
|
3555
5740
|
<textarea
|
|
@@ -3558,35 +5743,6 @@ data:
|
|
|
3558
5743
|
data-annotation-id="{id}"
|
|
3559
5744
|
value="{instruction}"
|
|
3560
5745
|
></textarea>
|
|
3561
|
-
<div class="annotation-add-menu">
|
|
3562
|
-
<div class="annotation-add-menu-panel add-menu-panel">
|
|
3563
|
-
<div class="add-menu-panel-attached">
|
|
3564
|
-
<div if="showMarkerAddMenuChips">
|
|
3565
|
-
<div class="add-page-plugins-zone-title">Add Menu on this marker</div>
|
|
3566
|
-
<div class="add-page-plugin-chips">
|
|
3567
|
-
<span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
|
|
3568
|
-
</div>
|
|
3569
|
-
</div>
|
|
3570
|
-
<p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
|
|
3571
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
|
|
3572
|
-
<p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
|
|
3573
|
-
<p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
|
|
3574
|
-
<div class="add-menu-route-params" if="showCrAddMenuRouteParams">
|
|
3575
|
-
<span class="add-page-hint">Route params:</span>
|
|
3576
|
-
<button type="button" class="add-page-param-btn" forEach="crAddMenuRouteParamRows" trackBy="rowKey" data-cr-route-param="1" data-param="{name}">[{name}]</button>
|
|
3577
|
-
</div>
|
|
3578
|
-
<div class="add-page-suggested-route" if="showCrPlannedRoutePanel">
|
|
3579
|
-
<div class="add-page-section-label">Planned page route</div>
|
|
3580
|
-
<input type="text" class="add-page-route-input cr-planned-route-input" value="{crPlannedRoute}" placeholder="/products/[slug]" />
|
|
3581
|
-
</div>
|
|
3582
|
-
<div class="add-menu-route-confirm" if="showCrRouteParamConfirm">
|
|
3583
|
-
<p>Adding <strong>{crPendingRouteParamTitle}</strong> requires a dynamic route. Files change only after the agent completes the task.</p>
|
|
3584
|
-
<button type="button" class="add-page-btn add-page-btn-primary" data-cr-route-param-confirm="1">Add anyway</button>
|
|
3585
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
|
|
3586
|
-
</div>
|
|
3587
|
-
</div>
|
|
3588
|
-
</div>
|
|
3589
|
-
</div>
|
|
3590
5746
|
<div class="visual-annotation-files">
|
|
3591
5747
|
<div class="visual-attach-row">
|
|
3592
5748
|
<button type="button" class="visual-attach-btn visual-video-annotation-attach" data-annotation-id="{id}">
|
|
@@ -3597,13 +5753,16 @@ data:
|
|
|
3597
5753
|
<div class="visual-attachment-chip">
|
|
3598
5754
|
<img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
|
|
3599
5755
|
<span class="visual-attachment-name">{name}</span>
|
|
3600
|
-
<
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
5756
|
+
<div class="visual-attachment-chip-actions">
|
|
5757
|
+
<button
|
|
5758
|
+
type="button"
|
|
5759
|
+
class="visual-attachment-remove-file"
|
|
5760
|
+
data-annotation-id="{annotationId}"
|
|
5761
|
+
data-att-key="{key}"
|
|
5762
|
+
aria-label="Remove attachment"
|
|
5763
|
+
>×</button>
|
|
5764
|
+
<span class="visual-attachment-number">{numberLabel}</span>
|
|
5765
|
+
</div>
|
|
3607
5766
|
</div>
|
|
3608
5767
|
</div>
|
|
3609
5768
|
</div>
|
|
@@ -3637,14 +5796,24 @@ data:
|
|
|
3637
5796
|
<p class="visual-submit-error" if="showVideoSubmitError">{videoSubmitError}</p>
|
|
3638
5797
|
<p class="visual-submit-progress" if="showVideoSubmitProgress">{videoSubmitProgress}</p>
|
|
3639
5798
|
<div class="video-review-actions">
|
|
3640
|
-
<button type="button" class="video-review-secondary" ref="
|
|
5799
|
+
<button type="button" class="video-review-secondary" ref="videoReviewCancelBtn">Cancel</button>
|
|
3641
5800
|
<button type="button" class="video-review-primary" ref="videoReviewSendBtn" disabled="videoSendDisabled">Send</button>
|
|
3642
5801
|
</div>
|
|
3643
5802
|
</div>
|
|
3644
5803
|
</div>
|
|
3645
5804
|
</div>
|
|
3646
5805
|
|
|
3647
|
-
<div class="
|
|
5806
|
+
<div class="video-review-close-confirm-overlay" if="showVideoReviewCloseConfirm" ref="videoReviewCloseConfirmOverlay" role="alertdialog" aria-modal="true" aria-live="polite" aria-label="Confirm close review">
|
|
5807
|
+
<div class="video-review-close-confirm-dialog">
|
|
5808
|
+
<p class="video-review-close-confirm-msg">Close review? Unsent annotations will be lost unless you cancel.</p>
|
|
5809
|
+
<div class="video-review-close-confirm-actions">
|
|
5810
|
+
<button type="button" class="harmony-btn-secondary" ref="videoReviewCloseConfirmCancelBtn">Cancel</button>
|
|
5811
|
+
<button type="button" class="harmony-btn-primary" ref="videoReviewCloseConfirmBtn">Close anyway</button>
|
|
5812
|
+
</div>
|
|
5813
|
+
</div>
|
|
5814
|
+
</div>
|
|
5815
|
+
|
|
5816
|
+
<div class="snapshot-overlay" if="showSnowflakeFeatures && showSnapshotModal" ref="snapshotBackdrop" tabindex="-1" role="dialog" aria-modal="true" aria-label="Snapshot annotation">
|
|
3648
5817
|
<div class="snapshot-panel">
|
|
3649
5818
|
<div class="snapshot-header">
|
|
3650
5819
|
<h2 class="snapshot-title">Snapshot Annotation</h2>
|
|
@@ -3718,35 +5887,6 @@ data:
|
|
|
3718
5887
|
data-annotation-id="{id}"
|
|
3719
5888
|
value="{instruction}"
|
|
3720
5889
|
></textarea>
|
|
3721
|
-
<div class="annotation-add-menu">
|
|
3722
|
-
<div class="annotation-add-menu-panel add-menu-panel">
|
|
3723
|
-
<div class="add-menu-panel-attached">
|
|
3724
|
-
<div if="showMarkerAddMenuChips">
|
|
3725
|
-
<div class="add-page-plugins-zone-title">Add Menu on this marker</div>
|
|
3726
|
-
<div class="add-page-plugin-chips">
|
|
3727
|
-
<span class="add-page-plugin-chip" forEach="markerAddMenuChips" trackBy="rowKey"><span class="add-page-plugin-chip-text" title="{title}">{title}<span class="add-page-plugin-chip-sub">{subtitle}</span></span><button type="button" class="add-page-plugin-chip-remove" data-marker-add-menu-remove="1" data-item-id="{itemId}" title="Remove">×</button><button type="button" class="add-page-plugin-chip-at" data-marker-add-menu-at-title="1" data-title="{title}" title="Insert @Title">@</button></span>
|
|
3728
|
-
</div>
|
|
3729
|
-
</div>
|
|
3730
|
-
<p class="add-page-hint" if="showMarkerAddMenuEmptyHint">No resources attached on this marker — click + Add to pick from the catalog.</p>
|
|
3731
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-marker-add-menu-open="1">+ Add</button>
|
|
3732
|
-
<p class="add-page-field-error" if="crAddMenuParamCollisionWarning">{crAddMenuParamCollisionWarning}</p>
|
|
3733
|
-
<p class="add-page-hint" if="crAddMenuRouteParamHint">{crAddMenuRouteParamHint}</p>
|
|
3734
|
-
<div class="add-menu-route-params" if="showCrAddMenuRouteParams">
|
|
3735
|
-
<span class="add-page-hint">Route params:</span>
|
|
3736
|
-
<button type="button" class="add-page-param-btn" forEach="crAddMenuRouteParamRows" trackBy="rowKey" data-cr-route-param="1" data-param="{name}">[{name}]</button>
|
|
3737
|
-
</div>
|
|
3738
|
-
<div class="add-page-suggested-route" if="showCrPlannedRoutePanel">
|
|
3739
|
-
<div class="add-page-section-label">Planned page route</div>
|
|
3740
|
-
<input type="text" class="add-page-route-input cr-planned-route-input" value="{crPlannedRoute}" placeholder="/products/[slug]" />
|
|
3741
|
-
</div>
|
|
3742
|
-
<div class="add-menu-route-confirm" if="showCrRouteParamConfirm">
|
|
3743
|
-
<p>Adding <strong>{crPendingRouteParamTitle}</strong> requires a dynamic route. Files change only after the agent completes the task.</p>
|
|
3744
|
-
<button type="button" class="add-page-btn add-page-btn-primary" data-cr-route-param-confirm="1">Add anyway</button>
|
|
3745
|
-
<button type="button" class="add-page-btn add-page-btn-cancel" data-cr-route-param-cancel="1">Cancel</button>
|
|
3746
|
-
</div>
|
|
3747
|
-
</div>
|
|
3748
|
-
</div>
|
|
3749
|
-
</div>
|
|
3750
5890
|
<div class="visual-annotation-files">
|
|
3751
5891
|
<div class="visual-attach-row">
|
|
3752
5892
|
<button type="button" class="visual-attach-btn snapshot-annotation-attach" data-annotation-id="{id}">
|
|
@@ -3757,13 +5897,16 @@ data:
|
|
|
3757
5897
|
<div class="visual-attachment-chip">
|
|
3758
5898
|
<img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
|
|
3759
5899
|
<span class="visual-attachment-name">{name}</span>
|
|
3760
|
-
<
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
5900
|
+
<div class="visual-attachment-chip-actions">
|
|
5901
|
+
<button
|
|
5902
|
+
type="button"
|
|
5903
|
+
class="visual-attachment-remove-file"
|
|
5904
|
+
data-annotation-id="{annotationId}"
|
|
5905
|
+
data-att-key="{key}"
|
|
5906
|
+
aria-label="Remove attachment"
|
|
5907
|
+
>×</button>
|
|
5908
|
+
<span class="visual-attachment-number">{numberLabel}</span>
|
|
5909
|
+
</div>
|
|
3767
5910
|
</div>
|
|
3768
5911
|
</div>
|
|
3769
5912
|
</div>
|