@jay-framework/aiditor 0.19.7 → 0.20.0

package/dist/pages/aiditor/page.css

@@ -478,14 +478,17 @@ body {
 }
 .harmony-float-rail {
   position: absolute;
-  inset: 0;
+  top: 16px;
+  left: 16px;
   z-index: 30;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
   pointer-events: none;
 }
 .harmony-add-btn {
-  position: absolute;
-  top: 16px;
-  left: 16px;
+  position: static;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -523,6 +526,63 @@ body {
     inset 0 1px 2px rgba(22, 45, 61, 0.06),
     0 1px 2px rgba(22, 45, 61, 0.04);
 }
+.harmony-stage-action-btn {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  padding: 0;
+  gap: 0;
+  overflow: hidden;
+  transition:
+    width 0.22s ease,
+    min-width 0.22s ease,
+    padding 0.22s ease,
+    gap 0.22s ease,
+    background 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.harmony-stage-action-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  color: var(--harmony-text);
+}
+.harmony-stage-action-icon svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+.harmony-stage-action-label {
+  display: inline-block;
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 0;
+  transition:
+    max-width 0.22s ease,
+    opacity 0.18s ease,
+    margin-left 0.22s ease;
+}
+.harmony-stage-action-btn:hover,
+.harmony-stage-action-btn:focus-visible,
+.harmony-stage-action-btn.harmony-add-btn-open {
+  width: auto;
+  min-width: 40px;
+  padding-right: 14px;
+  gap: 2px;
+}
+.harmony-stage-action-btn:hover .harmony-stage-action-label,
+.harmony-stage-action-btn:focus-visible .harmony-stage-action-label,
+.harmony-stage-action-btn.harmony-add-btn-open .harmony-stage-action-label {
+  max-width: 12rem;
+  opacity: 1;
+  margin-left: -4px;
+}
 .harmony-stage-icon-btn {
   position: absolute;
   left: 20px;
@@ -1491,9 +1551,41 @@ body {
   flex-direction: column;
   gap: 10px;
   padding: 14px 16px;
-  overflow: auto;
+  overflow: hidden;
   box-shadow: var(--harmony-shadow-lg);
 }
+.video-review-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+.video-review-tools {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 2px;
+  align-items: center;
+  width: fit-content;
+}
+.video-review-tools .visual-tool-btn {
+  padding: 7px 8px;
+  min-width: 28px;
+}
+.video-review-capture-root {
+  flex: 0 1 auto;
+  min-height: 0;
+  max-height: min(56vh, 480px);
+  overflow: hidden;
+}
+.video-review-capture-root .preview-frame {
+  width: 100%;
+  height: auto;
+  min-height: 0;
+  max-height: min(56vh, 480px);
+  object-fit: contain;
+  display: block;
+}
 .snapshot-panel {
   width: min(1200px, 96vw);
   overflow: hidden;
@@ -1517,7 +1609,6 @@ body {
   font-size: 12px;
   color: var(--harmony-text-muted);
 }
-.video-review-tools,
 .snapshot-tools {
   display: flex;
   flex-wrap: wrap;
@@ -1615,6 +1706,56 @@ body {
   opacity: 0.45;
   cursor: not-allowed;
 }
+.harmony-modal-close {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  cursor: pointer;
+  padding: 4px;
+  line-height: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--harmony-radius-sm);
+  flex-shrink: 0;
+}
+.harmony-modal-close:hover {
+  color: var(--harmony-text);
+  background: var(--harmony-bg-hover);
+}
+.video-review-close-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 380;
+  background: rgba(22, 45, 61, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+.video-review-close-confirm-dialog {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  width: min(400px, 100%);
+  padding: 20px 24px;
+  box-shadow: var(--harmony-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.video-review-close-confirm-msg {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--harmony-text);
+}
+.video-review-close-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 .snapshot-close {
   background: none;
   border: none;
@@ -1772,36 +1913,120 @@ body {
   width: min(720px, 100%);
   max-height: min(85vh, 720px);
 }
-.add-menu-picker-header {
+.add-menu-picker-overlay--full {
+  padding: 16px;
+  align-items: stretch;
+  justify-content: stretch;
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+.add-menu-picker-dismiss-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 380;
+  background: rgba(22, 45, 61, 0.45);
   display: flex;
   align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+.add-menu-picker-dismiss-confirm-dialog {
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  width: min(400px, 100%);
+  padding: 20px 24px;
+  box-shadow: var(--harmony-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.add-menu-picker-dismiss-confirm-msg {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--harmony-text);
+}
+.add-menu-picker-dismiss-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
   gap: 8px;
-  padding: 14px 16px;
+}
+.add-menu-picker-dialog--full {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  box-shadow:
+    0 24px 80px rgba(22, 45, 61, 0.16),
+    0 8px 24px rgba(22, 45, 61, 0.08);
+}
+.add-menu-picker-dialog--browse.add-menu-picker-dialog--full {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+}
+.add-menu-picker-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 28px;
   border-bottom: 1px solid var(--harmony-border);
-  background: var(--harmony-bg-subtle);
+  flex-shrink: 0;
+  background: var(--harmony-bg-surface);
 }
 .add-menu-picker-title {
   flex: 1;
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 20px;
+  font-weight: 700;
   color: var(--harmony-text);
+  letter-spacing: -0.02em;
 }
-.add-menu-picker-back,
+.add-menu-picker-header-back,
 .add-menu-picker-close {
   background: none;
   border: none;
   color: var(--harmony-text-muted);
-  font-size: 13px;
   cursor: pointer;
   line-height: 1;
-  padding: 4px 6px;
+  padding: 4px;
+  border-radius: var(--harmony-radius-sm);
+}
+.add-menu-picker-header-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+  overflow: visible;
+}
+.add-menu-picker-header-back-icon {
+  display: block;
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  color: black;
 }
 .add-menu-picker-close {
-  font-size: 20px;
+  font-size: 22px;
 }
-.add-menu-picker-back:hover,
+.add-menu-picker-header-back:hover,
 .add-menu-picker-close:hover {
   color: var(--harmony-text);
+  background: var(--harmony-bg-hover);
+}
+.add-menu-picker-back {
+  background: none;
+  border: none;
+  color: var(--harmony-text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 4px 6px;
+}
+.add-menu-picker-back:hover {
+  color: var(--harmony-text);
 }
 .add-menu-picker-body {
   padding: 12px 16px 16px;
@@ -2025,7 +2250,7 @@ body {
 }
 .add-menu-picker-search-icon {
   color: var(--harmony-text-muted);
-  font-size: 14px;
+  font-size: 30px;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -2039,6 +2264,10 @@ body {
   font-size: 13px;
   outline: none;
 }
+.add-menu-picker-search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: none;
+}
 .add-menu-picker-search-input::placeholder {
   color: var(--harmony-text-muted);
 }
@@ -2047,10 +2276,10 @@ body {
   background: none;
   border: none;
   color: var(--harmony-text-muted);
-  font-size: 16px;
+  font-size: 22px;
   line-height: 1;
   cursor: pointer;
-  padding: 0 2px;
+  padding: 0 4px;
 }
 .add-menu-picker-search-clear:hover {
   color: var(--harmony-text);
@@ -2068,12 +2297,13 @@ body {
 }
 .add-menu-picker-browse-content {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  gap: 12px;
   overflow-y: auto;
   flex: 1;
   min-height: 0;
   align-content: start;
+  grid-auto-rows: minmax(152px, auto);
 }
 .add-menu-picker-browse-row {
   display: contents;
@@ -2092,12 +2322,65 @@ body {
 }
 .add-menu-picker-component-card {
   min-height: 72px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
-.add-menu-picker-component-title {
-  font-weight: 500;
+.add-menu-picker-component-card--preview,
+.add-menu-picker-component-card--info {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  padding: 8px;
+  min-height: 0;
+  height: 100%;
+  text-align: left;
+}
+.add-menu-picker-component-card--preview {
+  min-height: 152px;
+}
+.add-menu-picker-component-card--info {
+  min-height: 72px;
+  justify-content: flex-start;
+  padding: 10px 12px;
+  gap: 0;
+}
+.add-menu-picker-component-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 112px;
+  flex: 0 0 112px;
+  border-radius: 6px;
   overflow: hidden;
-  text-overflow: ellipsis;
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+}
+.add-menu-picker-component-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  padding: 6px;
+  box-sizing: border-box;
+}
+.add-menu-picker-component-info-icon {
+  display: none;
+}
+.add-menu-picker-component-card--preview .add-menu-picker-component-title,
+.add-menu-picker-component-card--info .add-menu-picker-component-title {
+  width: 100%;
+  flex-shrink: 0;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.35;
+  font-size: 12px;
+}
+.add-menu-picker-component-title {
+  font-weight: 500;
   max-width: 100%;
 }
 .add-menu-picker-component-card--browse-only {
@@ -2205,34 +2488,31 @@ body {
   letter-spacing: 0.4px;
   margin-bottom: 6px;
 }
-.add-page-section-header-row {
+.add-page-tab-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  margin-top: 8px;
+}
+.add-page-btn--compact {
+  flex: 0 0 auto;
+  padding: 6px 14px;
+  font-size: 12px;
+  min-width: 0;
+}
+.add-page-references-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
-  margin-bottom: 6px;
 }
-.add-page-section-header-row .add-page-section-label {
-  margin-bottom: 0;
+.add-page-references-row .add-page-dropzone {
   flex: 1;
+  min-width: 0;
+  margin: 0;
 }
-.add-page-fill-from-image-btn {
-  background: var(--harmony-bg-subtle);
-  color: var(--harmony-primary);
-  border: 1px solid var(--harmony-border);
-  border-radius: var(--harmony-radius-sm);
-  padding: 4px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
+.add-page-references-row .add-page-btn--compact {
   flex-shrink: 0;
-}
-.add-page-fill-from-image-btn:hover {
-  background: var(--harmony-primary-soft);
-}
-.add-page-fill-from-image-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
+  white-space: nowrap;
 }
 .add-page-suggested-route {
   display: flex;
@@ -2388,8 +2668,15 @@ body {
   outline: none;
   box-shadow: 0 0 0 3px var(--harmony-primary-soft);
 }
-.add-page-route-badge {
-  font-size: 10px;
+.add-page-route-input--error {
+  border-color: var(--harmony-danger);
+}
+.add-page-route-input--error:focus {
+  border-color: var(--harmony-danger);
+  box-shadow: 0 0 0 3px var(--harmony-danger-soft);
+}
+.add-page-route-badge {
+  font-size: 10px;
   color: var(--harmony-primary);
   background: var(--harmony-primary-soft);
   padding: 2px 8px;
@@ -2898,6 +3185,10 @@ body {
   opacity: 0.45;
   cursor: not-allowed;
 }
+.add-page-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
 .add-page-hidden-file {
   display: none;
 }
@@ -2933,6 +3224,714 @@ body {
   color: var(--harmony-text);
   border-color: var(--harmony-border-strong);
 }
-.route-picker-stack {
-  display: contents;
+.stage-place-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  padding: 6px 12px;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-primary);
+  border-radius: var(--harmony-radius-pill);
+  font-size: 12px;
+  color: var(--harmony-text);
+}
+.stage-place-toolbar-cancel {
+  background: transparent;
+  border: 1px solid var(--harmony-border);
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+/* ── Page info panel (DL #26) ── */
+.page-info-panel {
+  position: fixed;
+  z-index: 100;
+  width: min(480px, calc(100vw - 48px));
+  height: min(640px, calc(100vh - 100px));
+  max-height: min(640px, calc(100vh - 100px));
+  display: flex;
+  flex-direction: column;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  box-shadow: var(--harmony-shadow-lg);
+  pointer-events: auto;
+  overflow: hidden;
+  font-family: var(--harmony-font);
+}
+.page-info-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--harmony-border);
+  flex-shrink: 0;
+  cursor: grab;
+  user-select: none;
+  background: var(--harmony-bg-surface);
+}
+.page-info-panel-header:active {
+  cursor: grabbing;
+}
+.page-info-panel-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.page-info-panel-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--harmony-text);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.page-info-panel-subtitle {
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--harmony-text-secondary);
+}
+.page-info-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.page-info-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.page-info-route-card {
+  padding: 12px;
+  border-radius: var(--harmony-radius-md);
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+}
+.page-info-route-highlight {
+  outline: 2px solid var(--harmony-primary);
+  outline-offset: 2px;
+}
+.page-info-route-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.page-info-route-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.page-info-route-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--harmony-radius-sm);
+  background: transparent;
+  color: var(--harmony-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: visible;
+}
+.page-info-route-icon-btn:hover {
+  color: var(--harmony-text);
+  background: var(--harmony-bg-hover);
+}
+.page-info-route-icon {
+  display: block;
+  width: 22px;
+  height: 22px;
+  overflow: visible;
+}
+.page-info-route-field {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+.page-info-route-field--error .page-info-route-value,
+.page-info-route-field--error .page-info-route-input {
+  border-color: var(--harmony-danger);
+  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
+}
+.page-info-route-problem {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: center;
+  width: 28px;
+  height: 28px;
+  color: var(--harmony-danger);
+  cursor: help;
+}
+.page-info-route-problem-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.page-info-route-missing-params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+.page-info-param-chip--add {
+  cursor: pointer;
+  border: 1px dashed var(--harmony-primary);
+  background: var(--harmony-bg-surface);
+}
+.page-info-param-chip--add:hover {
+  background: var(--harmony-primary-soft);
+}
+.page-info-route-change-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(15, 23, 42, 0.45);
+  pointer-events: auto;
+}
+.page-info-route-change-confirm-dialog {
+  width: min(480px, 100%);
+  padding: 20px;
+  border-radius: var(--harmony-radius-lg);
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  box-shadow: var(--harmony-shadow-lg);
+}
+.page-info-route-change-confirm-title {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--harmony-text);
+}
+.page-info-route-change-confirm-body {
+  margin: 0 0 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--harmony-text-secondary);
+}
+.page-info-route-change-confirm-routes {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: var(--harmony-radius-sm);
+  background: var(--harmony-bg-subtle);
+  font-family: var(--harmony-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--harmony-text);
+  word-break: break-all;
+}
+.page-info-route-change-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.page-info-route-value {
+  flex: 1;
+  min-width: 0;
+  display: block;
+  font-family: var(--harmony-mono);
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--harmony-text);
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  padding: 8px 10px;
+  word-break: break-all;
+}
+.page-info-route-input {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--harmony-mono);
+  font-size: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-sm);
+  background: var(--harmony-bg-surface);
+  color: var(--harmony-text);
+}
+.page-info-route-input:focus {
+  outline: none;
+  border-color: var(--harmony-primary);
+  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
+}
+.page-info-planned-route {
+  margin-top: 4px;
+}
+.page-info-route-params {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.page-info-param-chip {
+  font-family: var(--harmony-mono);
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: var(--harmony-radius-pill);
+  background: var(--harmony-primary-soft);
+  color: var(--harmony-primary);
+}
+.page-info-route-confirm {
+  margin-top: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--harmony-border);
+}
+.page-info-route-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+.page-info-route-confirm-actions .harmony-btn-primary,
+.page-info-route-confirm-actions .harmony-btn-secondary {
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: 6px 12px;
+  font-size: 12px;
+}
+.page-info-field-error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--harmony-danger);
+}
+.page-info-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--harmony-text-secondary);
+}
+.page-info-hint.page-info-loading {
+  font-style: italic;
+}
+.page-info-empty {
+  margin: 0;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--harmony-text-secondary);
+  text-align: center;
+  border: 1px dashed var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  background: var(--harmony-bg-subtle);
+}
+.page-info-duplicate-warning {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #92400e;
+  background: var(--harmony-warning-soft);
+  border: 1px solid #fcd34d;
+  border-radius: var(--harmony-radius-md);
+  padding: 10px 12px;
+}
+.page-info-component-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.page-info-component-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.page-info-component-card {
+  width: 100%;
+  cursor: pointer;
+  text-align: left;
+}
+.page-info-component-card .add-menu-picker-component-info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  font-size: 14px;
+  color: var(--harmony-primary);
+  margin-bottom: 2px;
+}
+.page-info-component-subtitle {
+  font-size: 11px;
+  color: var(--harmony-text-muted);
+  font-family: var(--harmony-mono);
+  line-height: 1.35;
+  margin-top: 2px;
+  word-break: break-all;
+}
+.page-info-component-keyline {
+  margin-top: 6px;
+  font-family: var(--harmony-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--harmony-text-secondary);
+}
+.page-info-component-card.add-menu-picker-component-card--selected
+  .page-info-component-keyline {
+  color: var(--harmony-primary);
+}
+.page-info-inspector-error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--harmony-danger);
+}
+.page-info-component-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-md);
+  background: var(--harmony-bg-surface);
+  cursor: pointer;
+  font: inherit;
+  color: var(--harmony-text);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.page-info-component-row:hover {
+  border-color: var(--harmony-border-strong);
+  background: var(--harmony-bg-hover);
+}
+.page-info-component-row--selected {
+  border-color: var(--harmony-primary);
+  background: var(--harmony-primary-soft);
+  box-shadow: var(--harmony-shadow-sm);
+}
+.page-info-component-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.page-info-component-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--harmony-text);
+  line-height: 1.3;
+}
+.page-info-component-contract {
+  font-size: 11px;
+  color: var(--harmony-text-muted);
+  font-family: var(--harmony-mono);
+  line-height: 1.3;
+  word-break: break-all;
+}
+.page-info-component-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.page-info-component-key {
+  font-family: var(--harmony-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--harmony-text-secondary);
+  background: var(--harmony-bg-subtle);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-pill);
+  padding: 2px 8px;
+}
+.page-info-component-row--selected .page-info-component-key {
+  background: rgba(255, 255, 255, 0.7);
+}
+.page-info-duplicate-badge {
+  font-size: 10px;
+  font-weight: 600;
+  color: #92400e;
+  background: var(--harmony-warning-soft);
+  border: 1px solid #fcd34d;
+  border-radius: var(--harmony-radius-pill);
+  padding: 2px 8px;
+}
+.page-info-main-view {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.page-info-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+  min-height: 0;
+  padding-bottom: 24px;
+}
+.page-info-inspector-contract {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--harmony-text);
+  font-family: var(--harmony-mono);
+}
+.page-info-tag-list {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.page-info-tag-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 6px 8px;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: var(--harmony-radius-sm);
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  font-size: 11px;
+}
+.page-info-tag-row.page-info-tag--used {
+  border-color: rgba(0, 168, 98, 0.35);
+  background: var(--harmony-success-soft);
+}
+.page-info-tag-path {
+  font-family: var(--harmony-mono);
+  font-size: 11px;
+  color: var(--harmony-text);
+  word-break: break-word;
+}
+.page-info-tag-kind-pill {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--harmony-text-muted);
+  background: var(--harmony-bg-subtle);
+  border-radius: var(--harmony-radius-pill);
+  padding: 2px 6px;
+  white-space: nowrap;
+}
+.page-info-tag-status {
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: var(--harmony-radius-pill);
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+.page-info-tag-status--bound {
+  color: var(--harmony-success);
+  background: rgba(0, 168, 98, 0.12);
+}
+.page-info-tag-status--available {
+  color: var(--harmony-text-muted);
+  background: var(--harmony-bg-subtle);
+}
+.page-info-tag-sample {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-family: var(--harmony-mono);
+  font-size: 10px;
+  color: var(--harmony-text-secondary);
+  word-break: break-all;
+  background: transparent;
+}
+
+/* ── + Add dock panel ── */
+.add-menu-dock-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 94;
+  background: rgba(22, 45, 61, 0.12);
+  pointer-events: auto;
+}
+.add-menu-dock-panel {
+  position: fixed;
+  width: min(624px, calc(100vw - 48px));
+  height: min(680px, calc(100vh - 120px));
+  max-height: min(680px, calc(100vh - 120px));
+  z-index: 95;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-border);
+  border-radius: var(--harmony-radius-lg);
+  box-shadow: var(--harmony-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+.add-menu-dock-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--harmony-border);
+  flex-shrink: 0;
+  cursor: grab;
+  user-select: none;
+}
+.add-menu-dock-header:active {
+  cursor: grabbing;
+}
+.add-menu-dock-title {
+  flex: 1;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--harmony-text);
+  letter-spacing: -0.02em;
+}
+.add-menu-dock-subhint {
+  margin: 0;
+  padding: 8px 18px 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--harmony-text-secondary);
+  flex-shrink: 0;
+}
+.add-menu-dock-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 12px;
+}
+.add-menu-dock-body .add-menu-picker-browse {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.add-menu-dock-body .add-menu-picker-browse-layout {
+  flex: 1;
+  min-height: 0;
+}
+.add-menu-picker-component-card--stage-place {
+  cursor: grab;
+}
+.add-menu-picker-component-card--stage-place:active {
+  cursor: grabbing;
+}
+
+/* ── Stage drop catcher overlay ── */
+.stage-drop-catcher {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  cursor: grabbing;
+  background: rgba(17, 109, 255, 0.08);
+  outline: 2px dashed var(--harmony-primary);
+  outline-offset: -2px;
+  touch-action: none;
+}
+.stage-drop-catcher-hint {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 12px;
+  background: rgba(22, 45, 61, 0.85);
+  color: #fff;
+  border-radius: 8px;
+  font-size: 12px;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* ── Stage drop ── */
+.visual-overlay.stage-drop-target-active {
+  outline: 2px dashed var(--harmony-primary);
+  outline-offset: -2px;
+}
+.stage-drop-ghost {
+  position: fixed;
+  z-index: 10000;
+  transform: translate(-7px, -7px);
+  pointer-events: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.stage-drop-ghost-marker {
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--harmony-primary);
+  border: 2px solid #fff;
+  box-shadow: var(--harmony-shadow-sm);
+}
+.stage-drop-ghost-hint {
+  max-width: 220px;
+  padding: 6px 10px;
+  background: var(--harmony-bg-surface);
+  border: 1px solid var(--harmony-primary);
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--harmony-text-primary);
+  box-shadow: var(--harmony-shadow-sm);
+  white-space: normal;
+}
+.stage-drop-banner {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  border-radius: 8px;
+  font-size: 12px;
+}
+.stage-drop-banner-cancel {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: #fff;
+  border-radius: 4px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+
+/* ── Toast ── */
+.aiditor-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 120;
+  padding: 10px 16px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  border-radius: 8px;
+  font-size: 13px;
+  pointer-events: none;
 }