@1agh/maude 1.2.0 → 1.3.1

package/apps/studio/canvas-lib.tsx

@@ -475,6 +475,17 @@ button.dc-artboard-label {
   width: 100%;
 }
 button.dc-artboard-label:focus-visible { outline: 2px solid var(--maude-hud-accent, #d63b1f); outline-offset: -2px; }
+input.dc-artboard-rename {
+  appearance: none;
+  border-width: 0 0 1px 0;
+  font: inherit;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  text-transform: none;
+  outline: 2px solid var(--maude-hud-accent, #d63b1f);
+  outline-offset: -2px;
+}
 /* DDR-148 — video-artboard badge, overlaid top-right of the header. Opens
    the timeline panel (same postMessage the context-menu entry sends). */
 .dc-canvas .dc-artboard-video-badge {
@@ -2447,6 +2458,25 @@ export function DCArtboard({
   // edited), so it never ratchets up from a previously-larger measured value
   // the way feeding `rect.h` back as the floor would.
   const heightFloor = typeof height === 'number' ? height : VP_GRID.h;
+  // Plan T25/L08 — rename in place: double-click the name, Enter commits (the
+  // shell writes the `label` prop), Escape or an unchanged name cancels.
+  const [renaming, setRenaming] = useState(false);
+  const renameDoneRef = useRef(false);
+  const commitRename = (value: string) => {
+    if (renameDoneRef.current) return;
+    renameDoneRef.current = true;
+    setRenaming(false);
+    const next = value.trim();
+    if (!next || next === label) return;
+    try {
+      window.parent.postMessage(
+        { dgn: 'rename-artboard-request', artboardId: id, label: next },
+        '*'
+      );
+    } catch {
+      /* detached / cross-origin */
+    }
+  };
   const articleRef = useRef<HTMLElement | null>(null);
   const measured = useArtboardBounds(articleRef as RefObject<HTMLElement | null>);
   useEffect(() => {
@@ -2590,24 +2620,58 @@ export function DCArtboard({
         }}
         {...handleProps}
       >
-        <button
-          type="button"
-          className="dc-artboard-label sku"
-          // a11y-auditor (T3 review) — the kind chip is aria-hidden (decorative,
-          // redundant with the Inspector's Kind picker), so a non-digital kind
-          // must still reach the artboard's own accessible name or it's
-          // invisible to AT users entirely.
-          aria-label={
-            resolvedKind !== 'digital' ? `Artboard ${label}, ${resolvedKind}` : `Artboard ${label}`
-          }
-        >
-          {resolvedKind !== 'digital' ? (
-            <span className="dc-artboard-kind-chip" aria-hidden="true">
-              <ArtboardKindIcon kind={resolvedKind} />
-            </span>
-          ) : null}
-          {label}
-        </button>
+        {renaming ? (
+          <input
+            className="dc-artboard-label sku dc-artboard-rename"
+            data-testid={`artboard-rename-${id}`}
+            aria-label="Artboard name"
+            defaultValue={label}
+            maxLength={80}
+            // biome-ignore lint/a11y/noAutofocus: the rename field opens on the designer's own double-click
+            autoFocus
+            onFocus={(e) => e.currentTarget.select()}
+            // The label is the drag handle; typing and clicking in the field
+            // must not start a move or reach the canvas shortcuts.
+            onPointerDown={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === 'Enter') commitRename(e.currentTarget.value);
+              else if (e.key === 'Escape') {
+                renameDoneRef.current = true;
+                setRenaming(false);
+              }
+            }}
+            onBlur={(e) => commitRename(e.currentTarget.value)}
+          />
+        ) : (
+          <button
+            type="button"
+            className="dc-artboard-label sku"
+            onDoubleClick={(e) => {
+              if (isReadOnlyCanvas()) return;
+              e.stopPropagation();
+              renameDoneRef.current = false;
+              setRenaming(true);
+            }}
+            // a11y-auditor (T3 review) — the kind chip is aria-hidden (decorative,
+            // redundant with the Inspector's Kind picker), so a non-digital kind
+            // must still reach the artboard's own accessible name or it's
+            // invisible to AT users entirely.
+            aria-label={
+              resolvedKind !== 'digital'
+                ? `Artboard ${label}, ${resolvedKind}`
+                : `Artboard ${label}`
+            }
+          >
+            {resolvedKind !== 'digital' ? (
+              <span className="dc-artboard-kind-chip" aria-hidden="true">
+                <ArtboardKindIcon kind={resolvedKind} />
+              </span>
+            ) : null}
+            {label}
+          </button>
+        )}
         {hasVideo ? (
           <button
             type="button"

package/apps/studio/canvas-list-watch.ts

@@ -25,9 +25,28 @@
 
 import path from 'node:path';
 
-import { canvasSlugFromRel, findHtmlFiles, SKIP_DIRS } from './api.ts';
+import {
+  canvasSlugFromRel,
+  findFiles,
+  findHtmlFiles,
+  PREVIEW_ASSET_EXTS,
+  SKIP_DIRS,
+} from './api.ts';
 import type { Context } from './context.ts';
 
+/**
+ * Supporting files the tree lists beside the canvases (images, fonts, media —
+ * the same `PREVIEW_ASSET_EXTS` `/_index-data` walks). A new one written from
+ * outside the app — an agent's export, a teammate's image arriving through
+ * sync — is a tree change too; without it the row stayed missing until
+ * something else reloaded the tree (plan T17/L03). Sidecars and stylesheets are
+ * deliberately NOT here: they are rewritten on every edit, and the tree nests
+ * them under their canvas anyway.
+ */
+function isListedFile(low: string): boolean {
+  return PREVIEW_ASSET_EXTS.some((x) => low.endsWith(x));
+}
+
 /** Burst-collapse window. A new canvas writes both `.tsx` and `.meta.json`; a
  * git checkout touches many files at once — one snapshot per quiet window. */
 export const CANVAS_LIST_DEBOUNCE_MS = 150;
@@ -59,7 +78,8 @@ export function isCanvasCandidate(rel: string, groupPaths: string[]): boolean {
   // canvases costs one recompute and emits nothing.
   const last = p.slice(p.lastIndexOf('/') + 1);
   const looksLikeDir = !last.includes('.');
-  if (!looksLikeDir && !low.endsWith('.tsx') && !low.endsWith('.html')) return false;
+  if (!looksLikeDir && !low.endsWith('.tsx') && !low.endsWith('.html') && !isListedFile(low))
+    return false;
   const segs = p.split('/');
   for (const s of segs) {
     if (!s) return false;
@@ -123,6 +143,11 @@ export function createCanvasListWatch(
         continue; // group dir missing / unreadable — treat as empty
       }
       for (const f of files) out.add(f);
+      try {
+        for (const f of await findFiles(groupAbs, groupRel, PREVIEW_ASSET_EXTS)) out.add(f);
+      } catch {
+        /* unreadable — the canvases above still diff */
+      }
     }
     return out;
   }
@@ -137,6 +162,12 @@ export function createCanvasListWatch(
     // render/open/build sink without re-validating against /_index-data.
     const prefix = `${ctx.paths.designRel.replace(/^\/+|\/+$/g, '')}/`;
     const relOut = rel.startsWith(prefix) ? rel.slice(prefix.length) : rel;
+    if (isListedFile(rel.toLowerCase())) {
+      // Not a canvas: its own action and no slug, so no consumer mistakes an
+      // image for a canvas to close, retarget or adopt.
+      ctx.bus.emit('canvas-list-update', { action: `file-${action}`, rel: relOut });
+      return;
+    }
     ctx.bus.emit('canvas-list-update', {
       action,
       rel: relOut,

package/apps/studio/canvas-notice-message.ts

@@ -0,0 +1,16 @@
+import type { Notice } from './notifications.tsx';
+
+/** Canvas content can send text, never shell actions or executable markup. */
+export function acceptCanvasNotice(
+  event: Pick<MessageEvent, 'origin' | 'source' | 'data'>,
+  expectedOrigin: string,
+  activeWindow: Window | null | undefined
+): Notice | null {
+  if (!activeWindow || event.origin !== expectedOrigin || event.source !== activeWindow)
+    return null;
+  const data = event.data;
+  if (data?.dgn !== 'canvas-notice' || typeof data.message !== 'string' || !data.message.trim())
+    return null;
+  if (!['info', 'success', 'error', 'warning', 'undo'].includes(data.kind)) return null;
+  return { title: data.message.slice(0, 4000), kind: data.kind, group: 'canvas' };
+}

package/apps/studio/canvas-notifications.tsx

@@ -0,0 +1,19 @@
+import { createRoot } from 'react-dom/client';
+import { type NoticeKind, NotificationHost, notifyCanvasText } from './notifications.tsx';
+
+/** Embedded canvases use the shell's stack. Standalone canvases own one host. */
+export function showCanvasToast(message: string, kind: NoticeKind = 'info'): void {
+  if (typeof document === 'undefined') return;
+  if (window.parent !== window) {
+    window.parent.postMessage({ dgn: 'canvas-notice', message, kind }, '*');
+    return;
+  }
+  let host = document.getElementById('maude-canvas-notifications');
+  if (!host) {
+    host = document.createElement('div');
+    host.id = 'maude-canvas-notifications';
+    document.body.appendChild(host);
+    createRoot(host).render(<NotificationHost />);
+  }
+  notifyCanvasText(message, kind);
+}

package/apps/studio/canvas-shell.tsx

@@ -2448,16 +2448,67 @@ function CanvasRouter({
   // sink so an `edit-source` command's do()/undo() reaches the main-origin-only
   // `/_api/edit-*` write — which the untrusted canvas iframe can't call (DDR-054).
   // It posts `dgn:'apply-edit'` to the parent shell, which performs the write.
+  //
+  // The shell answers with `dgn:'apply-edit-result'`. do()/undo() await it, so
+  // a refusal (a teammate changed the value since — audit 2026-09-13 P1 #5 —
+  // or any failed write) rejects, the stack keeps the entry instead of moving
+  // its cursor, and the user is told why.
   useEffect(() => {
-    const applyFn: EditSourceApplyFn = (apply) => {
-      try {
-        window.parent.postMessage({ dgn: 'apply-edit', ...apply }, '*');
-      } catch {
-        /* detached / cross-origin teardown — nothing to apply */
+    const pending = new Map<
+      string,
+      { resolve: () => void; reject: (err: Error) => void; timer: ReturnType<typeof setTimeout> }
+    >();
+    const onResult = (event: MessageEvent) => {
+      if (event.source !== window.parent) return;
+      const data = event.data as
+        | { dgn?: unknown; requestId?: unknown; ok?: unknown; error?: unknown; conflict?: unknown }
+        | undefined;
+      if (data?.dgn !== 'apply-edit-result' || typeof data.requestId !== 'string') return;
+      const entry = pending.get(data.requestId);
+      if (!entry) return;
+      pending.delete(data.requestId);
+      clearTimeout(entry.timer);
+      if (data.ok === true) {
+        entry.resolve();
+        return;
       }
+      const reason = typeof data.error === 'string' && data.error ? data.error : 'the edit failed';
+      // A conflict's reason already reads as a sentence ("color was changed by
+      // someone else — kept their value"); it applies to undo and redo alike.
+      showCanvasToast(data.conflict === true ? reason : `Couldn't apply — ${reason}`, 'warning');
+      entry.reject(new Error(reason));
     };
+    window.addEventListener('message', onResult);
+    let sequence = 0;
+    const applyFn: EditSourceApplyFn = (apply) =>
+      new Promise<void>((resolve, reject) => {
+        sequence += 1;
+        const requestId = `${Date.now().toString(36)}-${sequence}-${Math.random().toString(36).slice(2, 8)}`;
+        // Generous: the shell serializes these writes behind any in-flight one.
+        const timer = setTimeout(() => {
+          pending.delete(requestId);
+          reject(new Error('the edit was not confirmed'));
+        }, 30_000);
+        pending.set(requestId, { resolve, reject, timer });
+        try {
+          window.parent.postMessage({ dgn: 'apply-edit', requestId, ...apply }, '*');
+        } catch {
+          /* detached / cross-origin teardown — nothing to apply */
+          pending.delete(requestId);
+          clearTimeout(timer);
+          reject(new Error('the canvas is detached'));
+        }
+      });
     undoSinks.setSink('editSourceApplyFn', applyFn);
-    return () => undoSinks.setSink('editSourceApplyFn', undefined);
+    return () => {
+      window.removeEventListener('message', onResult);
+      for (const entry of pending.values()) {
+        clearTimeout(entry.timer);
+        entry.reject(new Error('the canvas closed'));
+      }
+      pending.clear();
+      undoSinks.setSink('editSourceApplyFn', undefined);
+    };
   }, [undoSinks]);
 
   // Phase 12.1 — reorder undo. Same origin-split shape as editSourceApplyFn: