@1agh/maude 0.28.0 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/comments-overlay.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       comments-overlay.tsx — FigJam-style in-place comments overlay
- * @scope      plugins/design/dev-server/comments-overlay.tsx
+ * @scope      apps/studio/comments-overlay.tsx
  * @purpose    Renders DS-styled comment pins (Phase 6 Task 2), the in-place
  *             composer bubble (Task 3), and the thread popover (Task 4)
  *             inside the canvas iframe. Sibling to `annotations-layer` —
@@ -81,6 +81,9 @@ export interface OverlayComment {
   id: string;
   file: string;
   selector: string;
+  /** Occurrence index among `querySelectorAll(selector)` — disambiguates a
+   * component repeated within one artboard. Absent (old comments) → first. */
+  index?: number;
   bounds: OverlayBounds | null;
   text: string;
   status: 'open' | 'resolved';
@@ -138,7 +141,10 @@ function deriveFile(): string | null {
 // halo chrome at z-index 5) instead of being portaled into `.dc-world` where
 // it would lose the stacking battle.
 
-function screenRectFor(selector: string): {
+function screenRectFor(
+  selector: string,
+  index?: number
+): {
   x: number;
   y: number;
   w: number;
@@ -147,7 +153,11 @@ function screenRectFor(selector: string): {
   if (!selector) return null;
   let el: HTMLElement | null = null;
   try {
-    el = document.querySelector(selector) as HTMLElement | null;
+    // index disambiguates a component repeated within one artboard (querySelector
+    // alone would always grab the first match). Absent/0 → first.
+    const all = document.querySelectorAll(selector);
+    const i = index && index > 0 && index < all.length ? index : 0;
+    el = (all[i] ?? all[0] ?? null) as HTMLElement | null;
   } catch {
     return null;
   }
@@ -316,6 +326,7 @@ export function CommentsOverlay(): React.ReactNode {
       const payload = {
         file: sel.file,
         selector: sel.selector,
+        index: sel.index,
         dom_path: sel.dom_path,
         tag: sel.tag,
         classes: sel.classes,
@@ -453,6 +464,7 @@ export function CommentsOverlay(): React.ReactNode {
         return (
           <CommentThread
             comment={focused}
+            sequence={indexById.get(focused.id) ?? 0}
             onClose={() => {
               setFocusedId(null);
               // Drop the canvas halo when the thread closes — symmetric with
@@ -745,7 +757,7 @@ function CommentPin({
       // Live screen-coord lookup mirrors SelectionHalos in canvas-shell.tsx.
       // Falls back to stored bounds (a screen-coord capture at create time)
       // when the target element is gone — better than vanishing entirely.
-      let pos = screenRectFor(comment.selector);
+      let pos = screenRectFor(comment.selector, comment.index);
       if (!pos && comment.bounds) {
         pos = {
           x: comment.bounds.x,
@@ -925,12 +937,14 @@ function CommentComposer({
 
 function CommentThread({
   comment,
+  sequence,
   onClose,
   onPatch,
   onDelete,
   onReply,
 }: {
   comment: OverlayComment;
+  sequence: number;
   onClose: () => void;
   onPatch: (patch: Record<string, unknown>) => void;
   onDelete: () => void;
@@ -1027,6 +1041,11 @@ function CommentThread({
     >
       <div className="cm-thread__head" id={headId}>
         <div className="cm-thread__head-row">
+          {/* Plan C P18 — pin/sequence badge in the popover header (parity with
+              `.design/ui/Studio.tsx` thread popover). */}
+          <span className="cm-thread__seq" aria-hidden="true">
+            {sequence}
+          </span>
           <span className="cm-thread__author">{comment.author?.trim() || 'unknown'}</span>
           <span className="cm-thread__time">{formatRelativeTime(comment.created)}</span>
           <button
@@ -1159,7 +1178,7 @@ function computeThreadAnchor(comment: OverlayComment): { x: number; y: number }
   // Resolve target's live screen rect; popover drops below the pin with small
   // breathing room. Stored bounds (capture-time screen coords) are the
   // last-resort fallback for orphaned pins.
-  const rect = comment.selector ? screenRectFor(comment.selector) : null;
+  const rect = comment.selector ? screenRectFor(comment.selector, comment.index) : null;
   if (rect) {
     // Pin sits at (rect.right - 12, rect.top - 12). Place popover at the same
     // x for visual continuity, 16px below the top so it clears the pin.
@@ -1184,7 +1203,7 @@ function computeAnchor(state: ComposerState): { x: number; y: number } {
     return { x: state.clientX, y: state.clientY + 8 };
   }
   if (state.selection.selector) {
-    const rect = screenRectFor(state.selection.selector);
+    const rect = screenRectFor(state.selection.selector, state.selection.index);
     if (rect) {
       return { x: rect.x, y: rect.y + rect.h + 8 };
     }

package/{plugins/design/dev-server → apps/studio}/context-menu.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       context-menu.tsx — Phase 4.1 right-click context menu
- * @scope      plugins/design/dev-server/context-menu.tsx
+ * @scope      apps/studio/context-menu.tsx
  * @purpose    Floating, context-aware right-click menu. The router calls
  *             `openContextMenu({ clientX, clientY, target })`; the menu
  *             resolves the section list via the ContextRegistry and renders
@@ -20,8 +20,8 @@
  */
 
 import {
-  type ReactNode,
   createContext,
+  type ReactNode,
   useCallback,
   useContext,
   useEffect,

package/{plugins/design/dev-server → apps/studio}/contextual-toolbar.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       contextual-toolbar.tsx — T30 (Wave 3)
- * @scope      plugins/design/dev-server/contextual-toolbar.tsx
+ * @scope      apps/studio/contextual-toolbar.tsx
  * @purpose    Selection-anchored floating chrome for ELEMENT selections
  *             (cd-id entries in the selection set). Mirrors the
  *             MultiArtboardToolbar pattern but scopes to user content inside
@@ -30,6 +30,7 @@
 
 import { useEffect, useRef } from 'react';
 
+import { resolveSelectionEl } from './dom-selection.ts';
 import { useSelectionSet } from './use-selection-set.tsx';
 
 const CTX_TOOLBAR_CSS = `
@@ -159,9 +160,7 @@ export function ContextualToolbar() {
       let yMax = Number.NEGATIVE_INFINITY;
       let any = false;
       for (const sel of elementSelections) {
-        const node = sel.id
-          ? document.querySelector(`[data-cd-id="${sel.id}"]`)
-          : document.querySelector(sel.selector);
+        const node = resolveSelectionEl(document, sel);
         if (!node) continue;
         const r = (node as HTMLElement).getBoundingClientRect();
         if (r.width === 0 && r.height === 0) continue;
@@ -228,9 +227,7 @@ export function ContextualToolbar() {
         title="Add comment on this element"
         onClick={() => {
           if (!primary) return;
-          const node = primary.id
-            ? document.querySelector(`[data-cd-id="${primary.id}"]`)
-            : document.querySelector(primary.selector);
+          const node = resolveSelectionEl(document, primary);
           openComposerForSelection(primary, node);
         }}
       >

package/{plugins/design/dev-server → apps/studio}/cursors-overlay.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       cursors-overlay.tsx — foreign peer cursors rendered on the canvas
- * @scope      plugins/design/dev-server/cursors-overlay.tsx
+ * @scope      apps/studio/cursors-overlay.tsx
  * @purpose    Renders one colored SVG arrow + name label per foreign peer at
  *             their published world coords, transformed through the local
  *             viewport so the cursor anchors to canvas content (not to my