@jay-framework/aiditor 0.21.0 → 0.22.0

package/dist/pages/aiditor/page.jay-html

@@ -289,7 +289,7 @@
       padding: 5px 8px;
       background: var(--harmony-bg-surface);
       border: 1px solid var(--harmony-border);
-      border-radius: var(--harmony-radius-pill);
+      border-radius: 8px;
       box-shadow: 0 6px 28px rgba(22, 45, 61, 0.14), 0 2px 6px rgba(22, 45, 61, 0.06);
     }
 
@@ -1669,11 +1669,21 @@
       max-height: 94vh;
       display: flex;
       flex-direction: column;
-      gap: 10px;
-      padding: 14px 16px;
+      gap: 24px;
+      padding: 32px 32px;
       overflow: hidden;
       box-shadow: var(--harmony-shadow-lg);
     }
+    .video-review-panel { position: relative; }
+    .video-review-header { align-items: flex-start; padding-right: 28px; }
+    .video-review-panel .harmony-modal-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 1;
+    }
+    .video-review-header, .snapshot-header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+    .snapshot-header { align-items: center; }
     .video-review-body {
       display: flex;
       flex-direction: column;
@@ -1681,23 +1691,25 @@
       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 {
+      position: relative;
       flex: 0 1 auto;
       min-height: 0;
       max-height: min(56vh, 480px);
       overflow: hidden;
     }
+    .video-review-toolbar-wrap {
+      position: absolute;
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 12;
+      pointer-events: none;
+    }
+    .video-review-toolbar-wrap > * { pointer-events: auto; }
+    .video-review-toolbar-wrap .annotate-dock {
+      border-radius: 8px;
+    }
     .video-review-capture-root .preview-frame {
       width: 100%;
       height: auto;
@@ -1705,11 +1717,15 @@
       max-height: min(56vh, 480px);
       object-fit: contain;
       display: block;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 8px;
+      box-sizing: border-box;
     }
     .snapshot-panel { width: min(1200px, 96vw); overflow: hidden; }
-    .video-review-header, .snapshot-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
     .video-review-title, .snapshot-title { font-size: 15px; font-weight: 600; color: var(--harmony-text); margin: 0; }
-    .video-review-meta { font-size: 12px; color: var(--harmony-text-muted); }
+    .video-review-title { font-size: 20px; }
+    .video-review-subtitle { font-size: 16px; color: var(--harmony-text-secondary); margin: 4px 0 0; line-height: 1.35; }
+    .video-review-time { flex-shrink: 0; font-size: 12px; color: var(--harmony-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
     .snapshot-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
     .video-review-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
     .video-play-pause-btn {
@@ -2094,8 +2110,6 @@
       gap: 0;
       flex: 1;
       min-height: 0;
-      border: 1px solid var(--harmony-border);
-      border-radius: var(--harmony-radius-md);
       overflow: hidden;
     }
     .add-menu-picker-sidebar {
@@ -2103,8 +2117,8 @@
       flex-direction: column;
       width: 168px;
       flex-shrink: 0;
+      align-self: stretch;
       border-right: 1px solid var(--harmony-border);
-      background: var(--harmony-bg-subtle);
       overflow-y: auto;
       padding: 8px 6px;
       gap: 2px;
@@ -2220,7 +2234,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      margin-bottom: 10px;
+      margin-bottom: 0;
       min-width: 0;
     }
     .add-menu-picker-search-field {
@@ -2228,8 +2242,8 @@
       min-width: 0;
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
+      gap: 6px;
+      padding: 5px 10px;
       border: 1px solid var(--harmony-border);
       border-radius: 999px;
       background: var(--harmony-bg-surface);
@@ -2237,7 +2251,7 @@
     .add-menu-picker-search-icon {
       color: var(--harmony-text-muted);
       font-size: 30px;
-      line-height: 1;
+      line-height: 0;
       flex-shrink: 0;
     }
     .add-menu-picker-search-input {
@@ -2280,14 +2294,137 @@
       padding-top: 0;
     }
     .add-menu-picker-browse-content {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+      display: flex;
+      flex-direction: column;
       gap: 12px;
       overflow-y: auto;
       flex: 1;
       min-height: 0;
-      align-content: start;
-      grid-auto-rows: minmax(152px, auto);
+    }
+    .add-menu-folder-breadcrumb {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 2px;
+      font-size: 13px;
+      color: var(--harmony-text-secondary, #666);
+      margin-bottom: 4px;
+    }
+    .add-menu-folder-breadcrumb-segment {
+      background: none;
+      border: none;
+      padding: 0;
+      color: var(--harmony-link, #116dff);
+      cursor: pointer;
+      font: inherit;
+    }
+    .add-menu-folder-breadcrumb-segment:hover {
+      text-decoration: underline;
+    }
+    .add-menu-folder-breadcrumb-sep {
+      color: var(--harmony-text-secondary, #666);
+      pointer-events: none;
+    }
+    .add-menu-folder-breadcrumb-current {
+      color: var(--harmony-text-primary, #162d3d);
+      font-weight: 500;
+    }
+    .add-menu-folder-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 6px;
+      margin-bottom: 2px;
+    }
+    .add-menu-folder-card {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: flex-start;
+      gap: 4px;
+      padding: 6px;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      cursor: pointer;
+      text-align: center;
+      min-height: 0;
+      min-width: 0;
+      font: inherit;
+      color: inherit;
+    }
+    .add-menu-folder-card:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+    .add-menu-folder-card:active {
+      background: rgba(0, 122, 255, 0.14);
+    }
+    /* viewBox is broken in jay-html (compiler emits viewbox); scale path via transform instead. */
+    .add-menu-folder-card-preview {
+      display: flex;
+      align-items: center;
+    }
+    .add-menu-folder-card-preview svg {
+      display: block;
+      width: 95%;
+      height: 100%;
+    }
+    .add-menu-folder-card-label {
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 1.25;
+      word-break: break-word;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      width: 100%;
+      text-align: center;
+      color: var(--harmony-text-primary, #162d3d);
+    }
+    .add-menu-folder-card-count {
+      font-size: 10px;
+      line-height: 1.2;
+      color: var(--harmony-text-secondary, #666);
+      text-align: center;
+    }
+    .add-menu-browse-band--small-strip {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 6px;
+    }
+    .add-menu-browse-band--medium-band {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+      align-items: stretch;
+    }
+    .add-menu-browse-band--slots-3 {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+      align-items: start;
+    }
+    /* S|M|S — one small per side; avoid 2×2 quad + row stretch (tall narrow cards). */
+    .add-menu-browse-band--slots-3 .add-menu-browse-quad {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+      width: 100%;
+      align-self: start;
+    }
+    .add-menu-browse-slot {
+      min-width: 0;
+    }
+    .add-menu-browse-slot--large {
+      grid-column: 1 / -1;
+    }
+    .add-menu-browse-quad {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-rows: repeat(2, minmax(0, 1fr));
+      gap: 4px;
+      min-height: 0;
+      aspect-ratio: 1;
+    }
+    .add-menu-picker-browse-block {
+      display: contents;
     }
     .add-menu-picker-browse-row {
       display: contents;
@@ -2299,13 +2436,32 @@
       color: var(--harmony-text-muted);
       text-transform: uppercase;
       letter-spacing: 0.04em;
-      grid-column: 1 / -1;
     }
-    .add-menu-picker-browse-content .add-menu-picker-component-card {
-      width: auto;
+    .add-menu-picker-component-card--size-large .add-menu-picker-component-preview,
+    .add-menu-picker-component-card--size-medium .add-menu-picker-component-preview {
+      flex: 0 0 auto;
+      width: 100%;
+      height: auto;
+      min-height: 0;
+      aspect-ratio: 10 / 7;
+    }
+    .add-menu-picker-component-card--size-large .add-menu-picker-component-preview {
+      aspect-ratio: 20 / 7;
+    }
+    .add-menu-picker-component-card--size-small .add-menu-picker-component-preview {
+      flex: 0 0 auto;
+      width: 100%;
+      height: auto;
+      min-height: 0;
+      aspect-ratio: 1;
+    }
+    .add-menu-picker-browse-content .add-menu-picker-component-card,
+    .add-menu-browse-band--small-strip .add-menu-picker-component-card,
+    .add-menu-browse-band--medium-band .add-menu-picker-component-card {
+      width: 100%;
     }
     .add-menu-picker-component-card {
-      min-height: 72px;
+      min-height: 0;
       overflow: hidden;
       box-sizing: border-box;
     }
@@ -2321,7 +2477,11 @@
       text-align: left;
     }
     .add-menu-picker-component-card--preview {
-      min-height: 152px;
+      min-height: 0;
+    }
+    .add-menu-picker-component-card--size-small.add-menu-picker-component-card--preview {
+      padding: 6px;
+      gap: 4px;
     }
     .add-menu-picker-component-card--info {
       min-height: 72px;
@@ -2339,20 +2499,35 @@
       border-radius: 6px;
       overflow: hidden;
       background: var(--harmony-bg-subtle);
-      border: 1px solid var(--harmony-border);
+    }
+    .add-menu-picker-component-card--preview .add-menu-picker-component-preview {
+      border: none;
     }
     .add-menu-picker-component-thumb {
       display: block;
       width: 100%;
       height: 100%;
-      object-fit: contain;
+      object-fit: cover;
       object-position: center;
-      padding: 6px;
+      padding: 0;
       box-sizing: border-box;
     }
     .add-menu-picker-component-thumb--animated {
       transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
+    .add-menu-picker-component-thumb--gif {
+      object-fit: cover;
+      padding: 0;
+    }
+    .add-menu-picker-component-preview--html {
+      padding: 0;
+      border: none;
+      background: transparent;
+    }
+    .add-menu-picker-component-preview--html > .am-preview {
+      width: 100%;
+      height: 100%;
+    }
   @media (prefers-reduced-motion: no-preference) {
     .add-menu-picker-component-card--preview:hover .add-menu-picker-component-thumb--animated,
     .add-menu-picker-component-card--preview:focus-visible .add-menu-picker-component-thumb--animated {
@@ -3797,7 +3972,7 @@
     }
     .add-menu-dock-subhint {
       margin: 0;
-      padding: 8px 18px 0;
+      padding: 2px 18px 6px;
       font-size: 12px;
       line-height: 1.35;
       color: var(--harmony-text-secondary);
@@ -3809,7 +3984,7 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
-      padding: 0 0 12px;
+      padding: 0;
     }
     .add-menu-dock-body .add-menu-picker-browse {
       flex: 1;
@@ -3817,10 +3992,20 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      padding: 0;
+      gap: 0;
+    }
+    .add-menu-dock-body .add-menu-picker-search-row {
+      padding: 0 16px 10px;
+      margin-bottom: 0;
+      border-bottom: 1px solid var(--harmony-border);
+      flex-shrink: 0;
     }
     .add-menu-dock-body .add-menu-picker-browse-layout {
       flex: 1;
       min-height: 0;
+      margin: 0;
+      width: 100%;
     }
     .add-menu-picker-component-card--stage-place { cursor: grab; }
     .add-menu-picker-component-card--stage-place:active { cursor: grabbing; }
@@ -4035,21 +4220,111 @@ data:
       subCategoryCountLabel: string
       isSelected: boolean
       cssClass: string
-    addMenuPickerBrowseRows:
+    addMenuPickerBrowseBlocks:
+    - blockKey: string
+      kind: string
+      showSectionHeader: boolean
+      showBand: boolean
+      sectionLabel: string
+      bandKind: string
+      bandCssClass: string
+      showSmallStrip: boolean
+      showMediumBand: boolean
+      stripCells:
+      - rowKey: string
+        isSectionHeader: boolean
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        showBrowseOnly: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+      bandSlots:
+      - slotKey: string
+        slotKind: string
+        slotCssClass: string
+        showMediumSlot: boolean
+        showLargeSlot: boolean
+        showSmallQuad: boolean
+        rowKey: string
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+        quadRows:
+        - rowKey: string
+          label: string
+          itemId: string
+          isPickable: boolean
+          showPickable: boolean
+          isItemSelected: boolean
+          cardCssClass: string
+          showImage: boolean
+          showGif: boolean
+          showHtmlFragment: boolean
+          imageUrl: string
+          gifUrl: string
+          posterUrl: string
+          previewHtml: html-string
+          showGifAutoplay: boolean
+          showGifPoster: boolean
+          showGifReducedInfoIcon: boolean
+          showThumbnail: boolean
+          showInfoIcon: boolean
+          thumbnailUrl: string
+          isAnimatedThumbnail: boolean
+          thumbCssClass: string
+          browseSize: string
+    showAddMenuPickerBreadcrumb: boolean
+    showAddMenuPickerFolderGrid: boolean
+    showAddMenuPickerEmptyFolder: boolean
+    addMenuPickerBrowseBreadcrumbSegments:
+    - segmentKey: string
+      navKey: string
+      label: string
+      isLast: boolean
+    addMenuPickerBrowseFolderRows:
     - rowKey: string
-      isSectionHeader: boolean
+      navKey: string
+      segment: string
       label: string
-      itemId: string
-      isPickable: boolean
-      showPickable: boolean
-      showBrowseOnly: boolean
-      isItemSelected: boolean
-      cardCssClass: string
-      showThumbnail: boolean
-      showInfoIcon: boolean
-      thumbnailUrl: string
-      isAnimatedThumbnail: boolean
-      thumbCssClass: string
+      itemCountLabel: string
+      totalItemCount: number
     showPageInfoPanel: boolean
     pageInfoPanelLeft: number
     pageInfoPanelTop: number
@@ -4160,21 +4435,111 @@ data:
       subCategoryCountLabel: string
       isSelected: boolean
       cssClass: string
-    addMenuDockBrowseRows:
+    addMenuDockBrowseBlocks:
+    - blockKey: string
+      kind: string
+      showSectionHeader: boolean
+      showBand: boolean
+      sectionLabel: string
+      bandKind: string
+      bandCssClass: string
+      showSmallStrip: boolean
+      showMediumBand: boolean
+      stripCells:
+      - rowKey: string
+        isSectionHeader: boolean
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        showBrowseOnly: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+      bandSlots:
+      - slotKey: string
+        slotKind: string
+        slotCssClass: string
+        showMediumSlot: boolean
+        showLargeSlot: boolean
+        showSmallQuad: boolean
+        rowKey: string
+        label: string
+        itemId: string
+        isPickable: boolean
+        showPickable: boolean
+        isItemSelected: boolean
+        cardCssClass: string
+        showImage: boolean
+        showGif: boolean
+        showHtmlFragment: boolean
+        imageUrl: string
+        gifUrl: string
+        posterUrl: string
+        previewHtml: html-string
+        showGifAutoplay: boolean
+        showGifPoster: boolean
+        showGifReducedInfoIcon: boolean
+        showThumbnail: boolean
+        showInfoIcon: boolean
+        thumbnailUrl: string
+        isAnimatedThumbnail: boolean
+        thumbCssClass: string
+        browseSize: string
+        quadRows:
+        - rowKey: string
+          label: string
+          itemId: string
+          isPickable: boolean
+          showPickable: boolean
+          isItemSelected: boolean
+          cardCssClass: string
+          showImage: boolean
+          showGif: boolean
+          showHtmlFragment: boolean
+          imageUrl: string
+          gifUrl: string
+          posterUrl: string
+          previewHtml: html-string
+          showGifAutoplay: boolean
+          showGifPoster: boolean
+          showGifReducedInfoIcon: boolean
+          showThumbnail: boolean
+          showInfoIcon: boolean
+          thumbnailUrl: string
+          isAnimatedThumbnail: boolean
+          thumbCssClass: string
+          browseSize: string
+    showAddMenuDockBreadcrumb: boolean
+    showAddMenuDockFolderGrid: boolean
+    showAddMenuDockEmptyFolder: boolean
+    addMenuDockBrowseBreadcrumbSegments:
+    - segmentKey: string
+      navKey: string
+      label: string
+      isLast: boolean
+    addMenuDockBrowseFolderRows:
     - rowKey: string
-      isSectionHeader: boolean
+      navKey: string
+      segment: string
       label: string
-      itemId: string
-      isPickable: boolean
-      showPickable: boolean
-      showBrowseOnly: boolean
-      isItemSelected: boolean
-      cardCssClass: string
-      showThumbnail: boolean
-      showInfoIcon: boolean
-      thumbnailUrl: string
-      isAnimatedThumbnail: boolean
-      thumbCssClass: string
+      itemCountLabel: string
+      totalItemCount: number
     showAddMenuDockSearchMode: boolean
     addMenuDockSearchSummary: string
     showAssetMentionPanel: boolean
@@ -5446,7 +5811,7 @@ data:
     <span class="add-menu-dock-title">+ Add Requests</span>
     <button type="button" class="add-menu-picker-close" ref="addMenuDockCloseBtn" aria-label="Close">×</button>
   </div>
-  <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>
+  <p class="add-menu-dock-subhint">Browse ready change requests from your plugins. Drag one onto the page preview to mark where it should apply, or click a reference item to @mention it in your instruction.</p>
   <div class="add-menu-dock-body">
     <p class="add-menu-picker-hint" if="showAddMenuDockLoading">Loading catalog…</p>
     <p class="add-menu-picker-hint" if="showAddMenuDockEmpty">No catalog items — install plugins and run setup.</p>
@@ -5476,17 +5841,44 @@ data:
               <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>
             </div>
           </div>
-          <div class="add-menu-picker-browse-content" if="showAddMenuDockComponents">
-            <div class="add-menu-picker-browse-row" forEach="addMenuDockBrowseRows" trackBy="rowKey">
-              <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
-              <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>
-              <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>
+          <div class="add-menu-picker-browse-content" if="showAddMenuDockComponents" ref="addMenuDockBrowseContent">
+            <nav class="add-menu-folder-breadcrumb" if="showAddMenuDockBreadcrumb" aria-label="Folder path">
+              <span forEach="addMenuDockBrowseBreadcrumbSegments" trackBy="segmentKey">
+                <button type="button" class="add-menu-folder-breadcrumb-segment" if="!isLast" data-add-menu-dock-breadcrumb="1" data-nav-key="{navKey}">{label}</button>
+                <span class="add-menu-folder-breadcrumb-sep" if="!isLast">›</span>
+                <span class="add-menu-folder-breadcrumb-current" if="isLast">{label}</span>
+              </span>
+            </nav>
+            <div class="add-menu-folder-grid" if="showAddMenuDockFolderGrid">
+              <button type="button" class="add-menu-folder-card" forEach="addMenuDockBrowseFolderRows" trackBy="rowKey" data-add-menu-dock-folder-nav="1" data-nav-key="{navKey}" title="{label} ({itemCountLabel})">
+                <span class="add-menu-folder-card-preview" aria-hidden="true"><svg width="52" height="52" fill="none" xmlns="http://www.w3.org/2000/svg"><path transform="translate(-1,2) translate(-4.5,-5.5) scale(4)" d="M8.69043 6C9.30186 6.00015 9.86718 6.31743 10.1836 6.84473L10.8828 8.00098H16.2402C17.2043 8.0011 17.9902 8.78684 17.9902 9.75098V17.1914C17.9953 17.2112 18 17.2307 18 17.251C17.9997 17.665 17.6641 18.001 17.25 18.001H6.75C5.78595 18.001 5.00027 17.215 5 16.251V7.75098C5 6.78676 5.78579 6 6.75 6H8.69043Z" fill="#5aa8f0"/></svg></span>
+                <span class="add-menu-folder-card-label">{label}</span>
+                <span class="add-menu-folder-card-count">{itemCountLabel}</span>
+              </button>
+            </div>
+            <div class="add-menu-picker-browse-block" forEach="addMenuDockBrowseBlocks" trackBy="blockKey">
+              <h3 class="add-menu-picker-section-title" if="showSectionHeader">{sectionLabel}</h3>
+              <div if="showBand" class="{bandCssClass}">
+                <div forEach="stripCells" trackBy="rowKey">
+                  <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="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                </div>
+                <div forEach="bandSlots" trackBy="slotKey" class="{slotCssClass}">
+                  <button type="button" class="{cardCssClass}" if="showMediumSlot" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                  <button type="button" class="{cardCssClass}" if="showLargeSlot" data-add-menu-dock-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                  <div class="add-menu-browse-quad" if="showSmallQuad">
+                    <div forEach="quadRows" trackBy="rowKey">
+                      <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="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="add-menu-picker-load-more-row" if="showAddMenuDockLoadMore">
               <button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-dock-load-more="1">{addMenuDockLoadMoreLabel}</button>
             </div>
           </div>
           <p class="add-menu-picker-hint" if="showAddMenuDockNoComponents">No components in this group.</p>
+          <p class="add-menu-picker-hint" if="showAddMenuDockEmptyFolder">No items in this folder.</p>
           <p class="add-menu-picker-hint" if="showAddMenuDockNoSearchResults">No elements match your search.</p>
         </div>
       </div>
@@ -5608,17 +6000,44 @@ data:
               </div>
               <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>
             </div>
-            <div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents">
-              <div class="add-menu-picker-browse-row" forEach="addMenuPickerBrowseRows" trackBy="rowKey">
-                <h3 class="add-menu-picker-section-title" if="isSectionHeader">{label}</h3>
-                <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>
-                <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>
+            <div class="add-menu-picker-browse-content" if="showAddMenuPickerComponents" ref="addMenuPickerBrowseContent">
+              <nav class="add-menu-folder-breadcrumb" if="showAddMenuPickerBreadcrumb" aria-label="Folder path">
+                <span forEach="addMenuPickerBrowseBreadcrumbSegments" trackBy="segmentKey">
+                  <button type="button" class="add-menu-folder-breadcrumb-segment" if="!isLast" data-add-menu-picker-breadcrumb="1" data-nav-key="{navKey}">{label}</button>
+                  <span class="add-menu-folder-breadcrumb-sep" if="!isLast">›</span>
+                  <span class="add-menu-folder-breadcrumb-current" if="isLast">{label}</span>
+                </span>
+              </nav>
+              <div class="add-menu-folder-grid" if="showAddMenuPickerFolderGrid">
+                <button type="button" class="add-menu-folder-card" forEach="addMenuPickerBrowseFolderRows" trackBy="rowKey" data-add-menu-picker-folder-nav="1" data-nav-key="{navKey}" title="{label} ({itemCountLabel})">
+                  <span class="add-menu-folder-card-preview" aria-hidden="true"><svg width="52" height="52" fill="none" xmlns="http://www.w3.org/2000/svg"><path transform="translate(-1,2) translate(-4.5,-5.5) scale(4)" d="M8.69043 6C9.30186 6.00015 9.86718 6.31743 10.1836 6.84473L10.8828 8.00098H16.2402C17.2043 8.0011 17.9902 8.78684 17.9902 9.75098V17.1914C17.9953 17.2112 18 17.2307 18 17.251C17.9997 17.665 17.6641 18.001 17.25 18.001H6.75C5.78595 18.001 5.00027 17.215 5 16.251V7.75098C5 6.78676 5.78579 6 6.75 6H8.69043Z" fill="#5aa8f0"/></svg></span>
+                  <span class="add-menu-folder-card-label">{label}</span>
+                  <span class="add-menu-folder-card-count">{itemCountLabel}</span>
+                </button>
+              </div>
+              <div class="add-menu-picker-browse-block" forEach="addMenuPickerBrowseBlocks" trackBy="blockKey">
+                <h3 class="add-menu-picker-section-title" if="showSectionHeader">{sectionLabel}</h3>
+                <div if="showBand" class="{bandCssClass}">
+                  <div forEach="stripCells" trackBy="rowKey">
+                    <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="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                  </div>
+                  <div forEach="bandSlots" trackBy="slotKey" class="{slotCssClass}">
+                    <button type="button" class="{cardCssClass}" if="showMediumSlot" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                    <button type="button" class="{cardCssClass}" if="showLargeSlot" data-add-menu-picker-item="1" data-item-id="{itemId}" title="{label}" aria-pressed="{isItemSelected}"><span class="add-menu-picker-component-preview" if="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                    <div class="add-menu-browse-quad" if="showSmallQuad">
+                      <div forEach="quadRows" trackBy="rowKey">
+                        <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="showImage"><img class="{thumbCssClass}" src="{imageUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifAutoplay"><img class="add-menu-picker-component-thumb add-menu-picker-component-thumb--gif" src="{gifUrl}" alt="" /></span><span class="add-menu-picker-component-preview" if="showGifPoster"><img class="add-menu-picker-component-thumb" src="{posterUrl}" alt="" /></span><div class="add-menu-picker-component-preview add-menu-picker-component-preview--html" if="showHtmlFragment">{previewHtml}</div><span class="add-menu-picker-component-info-icon" if="showInfoIcon" aria-hidden="true">▦</span><span class="add-menu-picker-component-title">{label}</span></button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div class="add-menu-picker-load-more-row" if="showAddMenuPickerLoadMore">
                 <button type="button" class="harmony-btn-secondary add-menu-picker-load-more-btn" data-add-menu-picker-load-more="1">{addMenuPickerLoadMoreLabel}</button>
               </div>
             </div>
             <p class="add-menu-picker-hint" if="showAddMenuPickerNoComponents">No components in this group.</p>
+            <p class="add-menu-picker-hint" if="showAddMenuPickerEmptyFolder">No items in this folder.</p>
             <p class="add-menu-picker-hint" if="showAddMenuPickerNoSearchResults">No elements match your search.</p>
           </div>
         </div>
@@ -5659,7 +6078,7 @@ data:
     <div class="video-review-header">
       <div>
         <h2 class="video-review-title">Review recording</h2>
-        <p class="video-review-meta" if="videoReviewReady">{videoTimeLabel}</p>
+        <p class="video-review-subtitle">Pause, mark spots on the frame, and add a short comment for each.</p>
       </div>
       <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>
     </div>
@@ -5667,12 +6086,14 @@ data:
     <p class="preview-error" if="videoReviewError">{videoReviewErrorText}</p>
     <!-- Must mount while preparing: refs.videoReviewPlayer must exist before videoReviewReady flips true. -->
     <div class="video-review-body" if="videoReviewPreparing || videoReviewReady">
-      <div class="video-review-tools">
-        <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>
-        <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>
-      </div>
       <input type="file" class="file-input-hidden" ref="videoReviewAttachFileInput" multiple />
       <div class="preview-frame-wrap video-review-capture-root" ref="videoReviewCaptureRoot">
+        <div class="video-review-toolbar-wrap">
+          <div class="annotate-dock preview-visual-tools">
+            <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>
+            <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>
+          </div>
+        </div>
         <video
           class="preview-frame"
           ref="videoReviewPlayer"
@@ -5779,19 +6200,20 @@ data:
       <div class="video-review-transport">
         <button type="button" class="video-play-pause-btn" ref="videoPlayPauseBtn" title="Play or pause" aria-label="Play or pause">{videoPlayPauseGlyph}</button>
         <div class="video-timeline-wrap" ref="videoReviewTimelineWrap">
-        <input type="range" class="video-timeline" ref="videoTimeline" min="0" max="1000" value="0" step="1" />
-        <div class="video-timeline-markers" if="showVideoAnnotationsPanel">
-          <span
-            class="video-timeline-marker"
-            forEach="videoTimelineMarkers"
-            trackBy="key"
-            data-aiditor-timeline-marker=""
-            data-time-sec="{timeSec}"
-            style="left: {leftPct}%;"
-            title="{label}"
-          ></span>
-        </div>
+          <input type="range" class="video-timeline" ref="videoTimeline" min="0" max="1000" value="0" step="1" />
+          <div class="video-timeline-markers" if="showVideoAnnotationsPanel">
+            <span
+              class="video-timeline-marker"
+              forEach="videoTimelineMarkers"
+              trackBy="key"
+              data-aiditor-timeline-marker=""
+              data-time-sec="{timeSec}"
+              style="left: {leftPct}%;"
+              title="{label}"
+            ></span>
+          </div>
         </div>
+        <span class="video-review-time" if="videoReviewReady">{videoTimeLabel}</span>
       </div>
       <p class="visual-submit-error" if="showVideoSubmitError">{videoSubmitError}</p>
       <p class="visual-submit-progress" if="showVideoSubmitProgress">{videoSubmitProgress}</p>