@1agh/maude 0.39.1 → 0.41.0

package/README.md

@@ -11,7 +11,7 @@ A personal marketplace of Claude Code plugins. Two plugins today, plus a `maude`
 
 | Plugin | What it does |
 | ------ | ------------ |
-| **`design`** | Canvas-first iteration on TSX/JSX mocks under `.design/` — element selection via Cmd+Click, auto-managed dev server, chained UX/DS critique. |
+| **`design`** | Canvas-first iteration on TSX/JSX mocks under `.design/` — element selection via Cmd+Click, auto-managed dev server, chained UX/DS critique. Canvases can also be **video-comps** (Remotion compositions previewed in-app, exported to MP4/GIF through Maude's own capture engine — no extra install). |
 | **`flow`** | Generic agentic workflow loop with a second-brain `.ai/` workspace. `/flow:plan`, `/flow:execute`, `/flow:utils-verify`, `/flow:validate`, `/flow:done`, `/flow:init`, `/flow:record-ddr`, `/flow:scenario`, …. Project-agnostic via `<project>` placeholders + per-repo `.ai/workflows.config.json`. |
 
 Plus the **`maude`** CLI — `maude init` scaffolds a fresh `.ai/` workspace from the flow plugin skeleton; `maude design serve` boots the design dev server. The legacy `mdcc` alias still works (prints a deprecation warning) and will be removed in v0.17.x.

package/apps/studio/ai-banner.tsx

@@ -43,9 +43,9 @@ const BANNER_CSS = `
   background: var(--maude-hud-accent-tint, oklch(92% 0.040 55));
   color: var(--maude-chrome-fg-0, #111);
   border: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.16));
-  border-radius: var(--radius-md, 4px);
+  border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  font-family: system-ui, -apple-system, sans-serif;
   font-weight: 500;
   font-size: 12px;
   line-height: 1.2;

package/apps/studio/annotations-context-toolbar.tsx

@@ -827,9 +827,52 @@ export function AnnotationContextToolbar({
   // fall through to the generic bar below.
   const soleMedia =
     selectedStrokes.length === 1 &&
-    (selectedStrokes[0]?.tool === 'image' || selectedStrokes[0]?.tool === 'link')
+    (selectedStrokes[0]?.tool === 'image' ||
+      selectedStrokes[0]?.tool === 'link' ||
+      selectedStrokes[0]?.tool === 'mediaref')
       ? selectedStrokes[0]
       : null;
+  if (soleMedia?.tool === 'mediaref') {
+    // DDR-150 dogfood — a media-reference chip has no color to set (the generic
+    // swatch palette was meaningless noise). Focused panel: filename + delete.
+    const mr = soleMedia;
+    return (
+      <div
+        ref={ref}
+        className="dc-annot-ctx"
+        role="toolbar"
+        aria-label="Media reference properties"
+        style={{ display: 'flex', top: -9999, left: -9999 }}
+      >
+        <span
+          className="dc-annot-ctx-label"
+          style={{
+            padding: '0 8px',
+            fontSize: 12,
+            opacity: 0.85,
+            maxWidth: 220,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+          title={`${mr.mediaKind} · ${mr.src}`}
+        >
+          {mr.mediaKind === 'audio' ? '♪ ' : '▶ '}
+          {mr.title}
+        </span>
+        <div className="dc-annot-ctx-sep" />
+        <button
+          type="button"
+          className="dc-annot-ctx-ibtn dc-annot-ctx-ibtn--danger"
+          aria-label="Delete media reference"
+          title="Delete"
+          onClick={remove}
+        >
+          <IconTrash />
+        </button>
+      </div>
+    );
+  }
   if (soleMedia?.tool === 'image') {
     const img = soleMedia;
     const commitAlt = (value: string) => {

package/apps/studio/annotations-layer.tsx

@@ -93,6 +93,12 @@ import {
   linkCardLayout,
   listPrefixedBody,
   listPrefixedLine,
+  MEDIAREF_AUDIO_GLYPH,
+  MEDIAREF_DEFAULT_H,
+  MEDIAREF_DEFAULT_W,
+  MEDIAREF_VIDEO_GLYPH,
+  MEDIAREF_VIDEO_H,
+  type MediaRefStroke,
   normalizeBox,
   normalizeRect,
   normalizeSticky,
@@ -380,6 +386,19 @@ function resolveAssetHref(href: string): string {
   return /^assets\//.test(href) ? `/${canvasDesignRel()}/${href}` : href;
 }
 
+/**
+ * DDR-150 dogfood #8 — true when a pointer/click event targets the inline
+ * media player inside a mediaref chip. Every document-capture annotation
+ * handler early-returns on it, so the player's native controls (and its
+ * click-to-toggle) work instead of starting a stroke select/drag/draw.
+ * (NOT a stopPropagation guard — that would also kill React's delegated
+ * listeners, which attach later on the capture path.)
+ */
+function isMediaPlayerTarget(e: Event): boolean {
+  const t = e.target as Element | null;
+  return !!(t && typeof t.closest === 'function' && t.closest('[data-mediaref-player]'));
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles
 
@@ -1057,11 +1076,36 @@ export function AnnotationsLayer() {
       }
       if (m.dgn === 'annotation-select-all') {
         if (annotSel) annotSel.replace(strokes.map((s) => s.id));
+        return;
+      }
+      // Stage F3 — the shell's AssetPicker (main-origin, DDR-054) resolved a new
+      // asset for an ImageStroke/MediaRefStroke's "Replace…" context-menu entry;
+      // the canvas iframe owns the annotation model, so the shell REQUESTS the
+      // swap here rather than writing strokes itself. `href`/`src` mirrors each
+      // stroke shape (ImageStroke.href / MediaRefStroke.src) — swap whichever key
+      // the target stroke actually carries, everything else survives byte-for-byte.
+      if (
+        m.dgn === 'replace-annotation-media' &&
+        typeof (m as { id?: unknown }).id === 'string' &&
+        typeof (m as { path?: unknown }).path === 'string'
+      ) {
+        const id = (m as { id: string }).id;
+        const path = (m as { path: string }).path;
+        const before = strokesRef.current;
+        const target = before.find((s) => s.id === id);
+        if (!target || (target.tool !== 'image' && target.tool !== 'mediaref')) return;
+        const after = before.map((s) => {
+          if (s.id !== id) return s;
+          return target.tool === 'image'
+            ? ({ ...s, href: path } as ImageStroke)
+            : ({ ...s, src: path } as MediaRefStroke);
+        });
+        commitStrokes(before, after, 'replace media');
       }
     };
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [annotSel, strokes, setVisible]);
+  }, [annotSel, strokes, setVisible, commitStrokes]);
 
   // Document-level toggle: Shift+P (presentation). Annotation-shortcut help is
   // owned by the dev-server menubar (Help button); we no longer ship an
@@ -1167,15 +1211,63 @@ export function AnnotationsLayer() {
     [commitStrokes, annotSel]
   );
 
+  // Media reference (DDR-150 P4): a video/audio file dropped on the canvas BODY
+  // becomes a versioned reference chip (NOT a source insert, NOT a played
+  // element) carrying its assets/ path — the "nahazet klipy → agent z toho udělá
+  // video" artifact. Upload to assets/, then commit a MediaRefStroke; on failure
+  // toast. No poster probe in v1 — a media glyph tile (▶/♪) + filename.
+  const createMediaReference = useCallback(
+    (file: File, mediaKind: 'video' | 'audio', world: [number, number]) => {
+      const w = MEDIAREF_DEFAULT_W;
+      // Video chips are taller — they host the inline 16:9 player (dogfood #8).
+      const h = mediaKind === 'video' ? MEDIAREF_VIDEO_H : MEDIAREF_DEFAULT_H;
+      void uploadAsset(file).then((res) => {
+        if (!('path' in res)) {
+          showCanvasToast(`Couldn't add ${mediaKind}: ${res.error}`);
+          return;
+        }
+        const id = rid();
+        const ref: MediaRefStroke = {
+          id,
+          tool: 'mediaref',
+          x: world[0] - w / 2,
+          y: world[1] - h / 2,
+          w,
+          h,
+          src: res.path,
+          mediaKind,
+          title: (file.name || res.path).slice(0, 300),
+        };
+        const before = strokesRef.current;
+        commitStrokes(before, [...before, ref], `add ${mediaKind} reference`);
+        annotSel?.replace([id]);
+        const sizeMb = file.size / (1024 * 1024);
+        showCanvasToast(
+          `Added ${mediaKind} reference · ${res.path}${sizeMb > 20 ? ' · ⚠ >20 MB rides git + sync' : ''}`
+        );
+      });
+    },
+    [commitStrokes, annotSel]
+  );
+
   const mediaCallbacks = useMemo(
-    () => ({ onImage: createImageFromFile, onLink: createLink }),
-    [createImageFromFile, createLink]
+    () => ({ onImage: createImageFromFile, onLink: createLink, onMedia: createMediaReference }),
+    [createImageFromFile, createLink, createMediaReference]
   );
   // Media intake is paste/drop only (per product steer — no toolbar buttons):
   // drop an image / URL or Cmd+V a clipboard image / link straight onto the
   // canvas. The hook owns the dragover/drop/paste wiring; the create callbacks
   // hold the commit/undo sink + screenToWorld.
-  useCanvasMediaDrop({ enabled: visible, screenToWorld, callbacks: mediaCallbacks });
+  //
+  // DDR-150 dogfood #8 — intake was gated on `visible` (annotations toggled on),
+  // so with annotations hidden (⇧P) a Finder drop silently did NOTHING. Intake
+  // now stays live whenever we're not presenting; the committed stroke simply
+  // shows once annotations are visible again.
+  useCanvasMediaDrop({
+    enabled: !(chrome?.present ?? false),
+    screenToWorld,
+    callbacks: mediaCallbacks,
+  });
 
   const eraseAt = useCallback(
     (wx: number, wy: number) => {
@@ -1636,6 +1728,7 @@ export function AnnotationsLayer() {
           t === 'sticky' ||
           t === 'image' ||
           t === 'link' ||
+          t === 'mediaref' ||
           t === 'section')
       ) {
         return id;
@@ -1644,6 +1737,7 @@ export function AnnotationsLayer() {
     };
 
     const onDown = (e: PointerEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       if (e.button !== 0) return;
       if (e.metaKey || e.ctrlKey) return; // escape hatch into element-selection
       const target = e.target as Element | null;
@@ -1937,6 +2031,7 @@ export function AnnotationsLayer() {
     if (typeof document === 'undefined') return;
     if (tool !== 'move') return;
     const onDbl = (e: MouseEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       const target = e.target as Element | null;
       const node = target?.closest?.('[data-id][data-tool]');
       if (!node) return;
@@ -2460,6 +2555,7 @@ export function AnnotationsLayer() {
     if (typeof document === 'undefined') return;
     if (tool !== 'move') return;
     const onDown = (e: PointerEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       if (e.button !== 0) return;
       const dot = (e.target as Element | null)?.closest?.('.dc-annot-conn-dot');
       if (!dot) return;
@@ -2575,6 +2671,7 @@ export function AnnotationsLayer() {
     // propagation WITHOUT preventDefault, so the native contextmenu event
     // (which opens OUR menu above) still follows.
     const onDown = (e: PointerEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       if (e.button !== 2) return;
       if (!strokeAt(e.target as Element | null)) return;
       e.stopImmediatePropagation();
@@ -2665,9 +2762,27 @@ export function AnnotationsLayer() {
         if (members) annotSel.replace(members);
       } else if (action === 'ungroup') {
         store.ungroupSelection(sel);
+      } else if (action === 'replace') {
+        // Stage F3 — "Replace…" on an ImageStroke/MediaRefStroke. The canvas
+        // REQUESTS (untrusted-origin postMessage, DDR-054); the main-origin shell
+        // opens the AssetPicker and posts the picked path back down (handled by
+        // the `replace-annotation-media` listener above, which owns the write —
+        // this model has no data-cd-id, so it can't ride edit-attr like F2).
+        if (sel.length !== 1) return;
+        const target = strokesById.get(sel[0] as string);
+        if (!target || (target.tool !== 'image' && target.tool !== 'mediaref')) return;
+        const before = target.tool === 'image' ? target.href : target.src;
+        try {
+          window.parent.postMessage(
+            { dgn: 'replace-annotation-media-request', id: target.id, before },
+            '*'
+          );
+        } catch {
+          /* detached / cross-origin teardown */
+        }
       }
     },
-    [annotSel, copySelection, pasteStrokesText]
+    [annotSel, copySelection, pasteStrokesText, strokesById]
   );
 
   // FigJam v3 — first time a multi-selection lands, surface the group /
@@ -2724,6 +2839,10 @@ export function AnnotationsLayer() {
           onCancelEdit={cancelEditing}
         />
       ) : null}
+      {/* DDR-150 dogfood #8 — inline players for media-reference chips (HTML
+          overlay in the world div; see MediaRefPlayers for why not
+          foreignObject). */}
+      <MediaRefPlayers worldRef={worldRef} strokes={renderStrokes} visible={visible} />
       <AnnotationContextToolbar
         editingId={
           editingTarget?.kind === 'anchored'
@@ -2740,6 +2859,10 @@ export function AnnotationsLayer() {
           pos={ctxMenu}
           selCount={annotSel.selectedIds.length}
           canUngroup={selectedStrokes.some((s) => (s.groupIds?.length ?? 0) > 0)}
+          canReplace={
+            selectedStrokes.length === 1 &&
+            (selectedStrokes[0]?.tool === 'image' || selectedStrokes[0]?.tool === 'mediaref')
+          }
           onAction={onMenuAction}
           onClose={() => setCtxMenu(null)}
         />
@@ -3110,6 +3233,92 @@ function AnnotationsSvg({
   );
 }
 
+/**
+ * DDR-150 dogfood #8 — the mediaref chips' inline players, rendered as PLAIN
+ * HTML absolutely positioned in the world div (which carries the pan/zoom CSS
+ * transform), NOT as SVG foreignObject: Chromium hit-tests foreignObject
+ * content under a transformed ancestor in the un-transformed coordinate space,
+ * so real clicks miss the player at most zoom levels. HTML children of the
+ * transformed div hit-test correctly. The [data-mediaref-player] attr keeps
+ * every document-capture annotation handler out (isMediaPlayerTarget guard).
+ */
+function MediaRefPlayers({
+  worldRef,
+  strokes,
+  visible,
+}: {
+  worldRef: React.RefObject<HTMLElement | null>;
+  strokes: readonly Stroke[];
+  visible: boolean;
+}) {
+  const target = worldRef.current;
+  if (!target || !visible) return null;
+  const HEADER = 26;
+  const refs = strokes.filter(
+    (s): s is MediaRefStroke => s.tool === 'mediaref' && !!s.src && Math.abs(s.h) > HEADER + 12
+  );
+  if (refs.length === 0) return null;
+  return createPortal(
+    <>
+      {refs.map((s) => {
+        const x = Math.min(s.x, s.x + s.w);
+        const y = Math.min(s.y, s.y + s.h);
+        const w = Math.abs(s.w);
+        const h = Math.abs(s.h);
+        const mediaUrl = resolveAssetHref(s.src);
+        const isAudio = s.mediaKind === 'audio';
+        return (
+          <div
+            key={`mrp-${s.id}`}
+            data-mediaref-player="1"
+            style={{
+              position: 'absolute',
+              left: x + 4,
+              top: y + HEADER,
+              width: Math.max(8, w - 8),
+              height: Math.max(8, h - HEADER - 4),
+              borderRadius: 6,
+              overflow: 'hidden',
+              zIndex: 4,
+            }}
+          >
+            {isAudio ? (
+              // biome-ignore lint/a11y/useMediaCaption: user-dropped reference media — there is no caption source to point a <track> at.
+              <audio
+                controls
+                preload="metadata"
+                src={mediaUrl}
+                style={{ width: '100%', height: '100%' }}
+              />
+            ) : (
+              // biome-ignore lint/a11y/useMediaCaption: user-dropped reference media — no caption source exists for an arbitrary dragged-in clip.
+              <video
+                // Chromium's native controls already toggle play/pause on a
+                // content-area click (a custom click listener would double-fire
+                // against it and cancel itself out — verified live). The router
+                // overlay-skip + the annotation-handler guards are what make
+                // these native interactions reachable.
+                controls
+                preload="metadata"
+                playsInline
+                src={mediaUrl}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'contain',
+                  background: '#000',
+                  display: 'block',
+                }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </>,
+    target
+  );
+}
+
 function TextEditor({
   anchorId,
   host,
@@ -3165,6 +3374,7 @@ function TextEditor({
   useEffect(() => {
     if (typeof document === 'undefined') return;
     const onDown = (e: PointerEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       const el = ref.current;
       if (!el) return;
       if (el.contains(e.target as Node)) return;
@@ -3427,6 +3637,7 @@ function StandaloneTextEditor({
   useEffect(() => {
     if (typeof document === 'undefined') return;
     const onDown = (e: PointerEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       const el = ref.current;
       if (!el) return;
       if (el.contains(e.target as Node)) return;
@@ -3586,12 +3797,15 @@ function AnnotationContextMenu({
   pos,
   selCount,
   canUngroup,
+  canReplace,
   onAction,
   onClose,
 }: {
   pos: { x: number; y: number };
   selCount: number;
   canUngroup: boolean;
+  /** Stage F3 — exactly one ImageStroke/MediaRefStroke is selected. */
+  canReplace: boolean;
   onAction: (action: string) => void;
   onClose: () => void;
 }) {
@@ -3609,6 +3823,7 @@ function AnnotationContextMenu({
     if (nx !== at.x || ny !== at.y) setAt({ x: nx, y: ny });
     el.querySelector<HTMLButtonElement>('button.dc-menu-item:not([disabled])')?.focus();
     const onDown = (e: PointerEvent) => {
+      if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event
       if (!el.contains(e.target as Node)) onClose();
     };
     const onKey = (e: KeyboardEvent) => {
@@ -3657,6 +3872,7 @@ function AnnotationContextMenu({
       {item('cut', 'Cut', '⌘X')}
       {item('paste', 'Paste', '⌘V')}
       {item('duplicate', 'Duplicate', '⌘D')}
+      {canReplace ? item('replace', 'Replace…') : null}
       <div className="dc-menu-sep" aria-hidden="true" />
       {item('front', 'Bring to front', ']')}
       {item('forward', 'Bring forward', '⌘]')}
@@ -4176,6 +4392,91 @@ function StrokeNodeBase({
       </g>
     );
   }
+  if (stroke.tool === 'mediaref') {
+    // DDR-150 P4 + dogfood #8 — reference chip with a REAL inline player.
+    // LIVE-RENDER ONLY: the <foreignObject> + <video>/<audio> below never
+    // persist — the model serializer still writes the sanitizer-safe data-*
+    // card (foreignObject is stripped by sanitizeAnnotationSvg by design).
+    // The 26px header strip (badge + filename) is the select/drag handle; the
+    // player area is fenced off from the annotation handlers by the
+    // [data-mediaref-player] window-capture guard.
+    const x = Math.min(stroke.x, stroke.x + stroke.w);
+    const y = Math.min(stroke.y, stroke.y + stroke.h);
+    const w = Math.abs(stroke.w);
+    const h = Math.abs(stroke.h);
+    const HEADER = 26;
+    const isAudio = stroke.mediaKind === 'audio';
+    const mediaUrl = stroke.src ? resolveAssetHref(stroke.src) : '';
+    const shownTitle = clampLinkTitle(stroke.title, Math.max(8, Math.floor((w - 40) / 7)));
+    const textFont = {
+      fontFamily: 'var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+    } as const;
+    return (
+      <g
+        data-id={stroke.id}
+        data-tool="mediaref"
+        data-src={stroke.src}
+        data-media-kind={stroke.mediaKind}
+        data-title={stroke.title}
+        pointerEvents={hitMode}
+      >
+        <rect
+          x={x}
+          y={y}
+          width={w}
+          height={h}
+          rx={8}
+          ry={8}
+          fill={LINK_CARD_FILL}
+          stroke={LINK_CARD_STROKE}
+          strokeWidth={1}
+          vectorEffect="non-scaling-stroke"
+          filter="url(#dc-sticky-shadow)"
+        />
+        <svg
+          x={x + 8}
+          y={y + 5}
+          width={16}
+          height={16}
+          viewBox="0 0 24 24"
+          fill={LINK_GLYPH_STROKE}
+          stroke="none"
+          aria-hidden="true"
+        >
+          <path d={isAudio ? MEDIAREF_AUDIO_GLYPH : MEDIAREF_VIDEO_GLYPH} />
+        </svg>
+        <text
+          x={x + 30}
+          y={y + 9}
+          fontSize={11}
+          fill={LINK_TITLE_FILL}
+          fontWeight={600}
+          dominantBaseline="hanging"
+          style={textFont}
+        >
+          {shownTitle}
+        </text>
+        {/* The inline player itself is an HTML overlay portaled beside this SVG
+            (MediaRefPlayers below) — NOT a foreignObject: Chromium hit-tests
+            foreignObject content under a CSS-transformed ancestor in the WRONG
+            coordinate space (the un-panned/un-zoomed one), so real clicks miss
+            the player at most zoom levels while elementFromPoint lies that
+            they'd land. Plain HTML in the transformed world hit-tests right. */}
+        {!mediaUrl ? (
+          <text
+            x={x + 30}
+            y={y + HEADER + 10}
+            fontSize={10}
+            fill={LINK_DOMAIN_FILL}
+            dominantBaseline="hanging"
+            style={textFont}
+          >
+            (missing media reference)
+          </text>
+        ) : null}
+      </g>
+    );
+  }
   if (stroke.tool === 'section') {
     const x = Math.min(stroke.x, stroke.x + stroke.w);
     const y = Math.min(stroke.y, stroke.y + stroke.h);