@1agh/maude 0.41.0 → 0.43.0

package/apps/studio/canvas-shell.tsx

@@ -41,6 +41,7 @@ import { AnnotationsLayer } from './annotations-layer.tsx';
 import { ArtboardMarqueeOverlay } from './artboard-marquee.tsx';
 import {
   type ArtboardRect,
+  PhotoPreviewBridge,
   SnapGuideOverlay,
   useArtboardsContext,
   useDragStateContext,
@@ -88,6 +89,7 @@ import {
 import { ElementMarqueeOverlay } from './marquee-overlay.tsx';
 import { MeasureOverlay } from './measure-overlay.tsx';
 import { ParticipantsChrome } from './participants-chrome.tsx';
+import { mountCaret, placeCaretAt } from './text-caret.ts';
 import { ToolPalette } from './tool-palette.tsx';
 import { UndoHud } from './undo-hud.tsx';
 import {
@@ -327,6 +329,22 @@ const HALO_CSS = `
   outline-offset: 1px;
   border-radius: 1px;
   cursor: text;
+  /* Unify the caret with the annotation editors (CARET_FIX_STYLE in
+     annotations-layer.tsx) — same accent, visible against any background.
+     No compositing trigger here (no translateZ/will-change) so WebKit keeps
+     blinking the native caret. */
+  caret-color: var(--maude-hud-accent, #4a63e7);
+}
+/* Dogfood fix — hover affordance for the same leaf-text elements the dblclick
+   handler above enters edit mode on. The :not(:empty):not(:has(> *)) selector
+   proxies "all children are text nodes" (the exact isLeafText check happens
+   in JS on dblclick — this only needs to be a good-enough visual hint). Loses
+   to an active draw/annotation tool's !important global cursor override
+   (use-tool-mode.tsx), so it only shows in Move mode, same as the edit itself.
+   NOTE: keep this comment backtick-free — it lives inside a JS template
+   literal and a stray backtick closes it early (bun parse fail). */
+[data-cd-id]:not(:empty):not(:has(> *)):hover {
+  cursor: text;
 }
 /* Phase 12.1 (DDR-138) — in-canvas drag-to-reorder (Figma-style). Dragging a
    SELECTED element floats it with the cursor (via transform, applied inline —
@@ -549,6 +567,18 @@ function getLastLayersArtboardId(): string | null {
   }
 }
 
+// DDR-148 — an artboard hosting a <VideoComp> stamps a `[data-comp-id]`
+// element inside it (see video-comp.tsx). Gates the artboard-chrome context
+// menu's "Open Timeline" entry to artboards that actually have a sequence.
+function artboardHasVideo(artboardId: string | null | undefined): boolean {
+  if (typeof document === 'undefined' || !artboardId) return false;
+  try {
+    return !!document.querySelector(`[data-dc-screen="${CSS.escape(artboardId)}"] [data-comp-id]`);
+  } catch {
+    return false;
+  }
+}
+
 function postLayersTree(artboardId: string | null | undefined): void {
   if (typeof document === 'undefined' || !artboardId) return;
   const root = document.querySelector(`[data-dc-screen="${CSS.escape(artboardId)}"]`);
@@ -1440,6 +1470,34 @@ function buildRegistry(deps: {
             }
           },
         },
+        {
+          // feature-photo-editor (Task 16) — only on a content-addressed `<img>`.
+          // Selects it (so the Inspector derives the Photo target from the
+          // selection's `photoAsset`) + opens the Inspector on the Photo tab.
+          id: 'edit-photo',
+          label: 'Edit Photo…',
+          hidden: (target) => {
+            const el = target.el as HTMLImageElement | null;
+            if (el?.tagName?.toLowerCase() !== 'img') return true;
+            return !/assets\/[0-9a-f]{8}\.[a-z0-9]+/i.test(el.getAttribute?.('src') || '');
+          },
+          onSelect: (target) => {
+            if (target.el) {
+              selSet.replace(
+                hoverTargetToSelection({
+                  el: target.el,
+                  cdId: target.cdId ?? null,
+                  artboardId: target.artboardId ?? null,
+                } as HoverTarget)
+              );
+            }
+            try {
+              window.parent.postMessage({ dgn: 'open-inspector', tab: 'photo' }, '*');
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
         {
           id: 'select-layer',
           label: 'Select layer',
@@ -1631,6 +1689,29 @@ function buildRegistry(deps: {
         fitItem,
         resetItem,
       ],
+      [
+        // DDR-148 — only meaningful (and only enabled) on a video-comp
+        // artboard; scopes + opens the shell's Timeline dock.
+        {
+          id: 'open-timeline',
+          label: 'Open Timeline',
+          shortcut: '⌘⇧T',
+          disabled: (target) => !artboardHasVideo(target.artboardId),
+          disabledHint: 'This artboard has no video sequence',
+          onSelect: (target) => {
+            if (!target.artboardId) return;
+            focusArtboard(target.artboardId);
+            try {
+              window.parent.postMessage(
+                { dgn: 'open-timeline-request', artboardId: target.artboardId },
+                '*'
+              );
+            } catch {
+              /* detached / cross-origin */
+            }
+          },
+        },
+      ],
       [
         // G7 — align commands. Six modes; gated on ≥ 2 selected artboards
         // (alignment is well-defined with 2). Primary surface is the
@@ -2134,6 +2215,9 @@ function CanvasRouter({
     if (!host) return;
     let editing: HTMLElement | null = null;
     let original = '';
+    // Unified custom blinking caret (text-caret.ts) — mounted for the whole
+    // edit session, disposed in teardown. Hides the native caret while up.
+    let caretDispose: (() => void) | null = null;
     // DDR-150 P1 — the committed-but-unconfirmed edit, so a shell rejection
     // (dynamic/mixed content the engine refuses) can revert the optimistic
     // contenteditable text instead of letting it silently vanish on the next
@@ -2150,6 +2234,8 @@ function CanvasRouter({
       }
     };
     function teardown(elx: HTMLElement): void {
+      caretDispose?.();
+      caretDispose = null;
       elx.removeAttribute('contenteditable');
       elx.classList.remove('dc-text-editing');
       elx.removeEventListener('blur', onBlur, true);
@@ -2169,8 +2255,22 @@ function CanvasRouter({
       const cdId = elx.getAttribute('data-cd-id');
       if (!cdId) return;
       const file = deriveFile();
+      // For `{variable}` text the engine needs to know WHICH rendered instance
+      // this is (a `.map()` renders one source element N×) — its index among
+      // same-cd-id nodes — plus the pre-edit text to target the right array
+      // item. Harmless for literal text (the engine ignores both there).
+      let occurrence = 0;
       try {
-        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file, text }, '*');
+        const sameId = Array.from(document.querySelectorAll(`[data-cd-id="${CSS.escape(cdId)}"]`));
+        occurrence = Math.max(0, sameId.indexOf(elx));
+      } catch {
+        /* querySelectorAll/CSS.escape unavailable — occurrence stays 0 */
+      }
+      try {
+        window.parent.postMessage(
+          { dgn: 'edit-text', id: cdId, file, text, occurrence, before: original.trim() },
+          '*'
+        );
       } catch {
         /* detached / cross-origin */
       }
@@ -2187,9 +2287,36 @@ function CanvasRouter({
           key: '',
           before: original.trim(),
           after: text,
+          // Carry the occurrence so undo/redo can re-target a `{variable}` edit
+          // (the .map()/component-prop resolution needs it — canvas-edit.ts).
+          occurrence,
         })
       );
     }
+    // Enter contenteditable edit mode on a leaf-text `stamped` element, caret
+    // placed at (clientX, clientY) rather than a full select-all (that used to
+    // force a delete-and-retype for any edit that isn't a full replace).
+    // `caretRangeFromPoint` (WebKit/Chromium) and its standardized successor
+    // `caretPositionFromPoint` (Firefox + newer engines) both resolve the
+    // exact character under the pointer; select-all-contents is the fallback
+    // only when neither exists. Extracted so both the native dblclick path
+    // AND the annotation Text-tool's click-through (maude:enter-text-edit,
+    // dispatched from annotations-layer.tsx when its own click lands on an
+    // existing editable element) share one entry point.
+    function enterEditModeAt(stamped: HTMLElement, clientX: number, clientY: number): void {
+      if (editing) return;
+      editing = stamped;
+      original = stamped.textContent ?? '';
+      stamped.setAttribute('contenteditable', 'plaintext-only');
+      stamped.classList.add('dc-text-editing');
+      stamped.addEventListener('blur', onBlur, true);
+      stamped.addEventListener('keydown', onKey, true);
+      stamped.focus();
+      // Unified placement chain (text-caret.ts) — the annotation editors use
+      // the exact same helper, so caret-at-click can never diverge per surface.
+      placeCaretAt(stamped, window, { x: clientX, y: clientY });
+      caretDispose = mountCaret(stamped, window);
+    }
     const onDbl = (e: MouseEvent): void => {
       if (editing) return;
       const t = e.target as HTMLElement | null;
@@ -2229,22 +2356,32 @@ function CanvasRouter({
       }
       e.preventDefault();
       e.stopPropagation();
-      editing = stamped;
-      original = stamped.textContent ?? '';
-      stamped.setAttribute('contenteditable', 'plaintext-only');
-      stamped.classList.add('dc-text-editing');
-      stamped.addEventListener('blur', onBlur, true);
-      stamped.addEventListener('keydown', onKey, true);
-      stamped.focus();
-      try {
-        const range = document.createRange();
-        range.selectNodeContents(stamped);
-        const sel = window.getSelection();
-        sel?.removeAllRanges();
-        sel?.addRange(range);
-      } catch {
-        /* selection API unavailable */
+      // Phase 6 (unified-text-editing) — only offer inline edit where the
+      // engine will actually save: the build-time data-cd-editable marker
+      // (canvas-pipeline.ts) mirrors applyTextEdit's acceptance. The DOM-only
+      // isLeafText heuristic above can't tell `<p>Total: {1 + 1} items</p>`
+      // (mixed source, engine refuses, DDR-150 dead end) from honest static
+      // text — the AST-stamped marker can.
+      if (!stamped.hasAttribute('data-cd-editable')) {
+        showCanvasToast(
+          'This text is filled in from code (a variable) — edit it via chat or /design:edit.'
+        );
+        return;
       }
+      enterEditModeAt(stamped, e.clientX, e.clientY);
+    };
+    // Dogfood fix — the annotation Text tool's click-through: clicking an
+    // existing editable element with the Text (T) tool active should edit
+    // THAT text in place instead of dropping a new standalone annotation on
+    // top of it. annotations-layer.tsx hit-tests past its own input-capture
+    // overlay and dispatches this when the click resolves to a leaf-text
+    // `[data-cd-id]` element; canvas-shell owns the DOM/contentEditable side
+    // of editing, so it's the one that must act on it.
+    const onEnterTextEdit = (e: Event): void => {
+      const detail = (e as CustomEvent<{ el?: HTMLElement; clientX?: number; clientY?: number }>)
+        .detail;
+      if (!detail?.el || !host.contains(detail.el)) return;
+      enterEditModeAt(detail.el, detail.clientX ?? 0, detail.clientY ?? 0);
     };
     // The shell rejected the last inline text edit — revert the optimistic
     // contenteditable text so the canvas reflects the true (unsaved) source
@@ -2266,9 +2403,11 @@ function CanvasRouter({
     // Capture phase so we beat the fit-to-view dblclick handler.
     host.addEventListener('dblclick', onDbl, true);
     window.addEventListener('message', onEditReverted);
+    document.addEventListener('maude:enter-text-edit', onEnterTextEdit);
     return () => {
       host.removeEventListener('dblclick', onDbl, true);
       window.removeEventListener('message', onEditReverted);
+      document.removeEventListener('maude:enter-text-edit', onEnterTextEdit);
       if (editing) teardown(editing);
     };
   }, [hostRef, selSet]);
@@ -2378,6 +2517,7 @@ function CanvasRouter({
         alignArtboards={alignArtboards}
       />
       <SnapGuideOverlay />
+      <PhotoPreviewBridge />
       <UndoHud />
       <CursorsOverlay />
       <AiBanner />