@1agh/maude 0.58.0 → 0.58.1

package/apps/studio/artboard-hug-commit.ts

@@ -0,0 +1,30 @@
+/**
+ * @file artboard-hug-commit.ts
+ * @purpose Pure decision for what the Artboard Inspector's Height field
+ *          should do when a value is committed (issue #79 — typing a height
+ *          while the artboard hugs its content silently did nothing; Width
+ *          worked because it has no such mode). Kept framework-free + in a
+ *          .ts file so it's unit-testable (app.jsx is bundled JSX, and its
+ *          module-scope `createRoot(...).render(...)` makes it unsafe to
+ *          import directly in a test) — same shape as sizing-mode.ts.
+ */
+
+export type HeightCommitAction =
+  | { kind: 'resize'; height: number }
+  | { kind: 'promote-to-fixed'; height: number }
+  | { kind: 'noop' };
+
+/**
+ * Fixed mode: a typed height is an ordinary resize, same lane as Width.
+ * Hug mode (DDR-027 Design Decision 1 — height is a content-driven floor,
+ * not an exact size): a typed height now PROMOTES the artboard to Fixed at
+ * that height — the same "freeze current height" write the Hug/Fixed
+ * segmented toggle already performs, just seeded from the typed value
+ * instead of the last measured one — rather than being silently dropped.
+ */
+export function resolveHeightCommit(fixed: boolean, typedHeight: number): HeightCommitAction {
+  const height =
+    Number.isFinite(typedHeight) && typedHeight > 0 ? Math.round(typedHeight) : undefined;
+  if (height == null) return { kind: 'noop' };
+  return fixed ? { kind: 'resize', height } : { kind: 'promote-to-fixed', height };
+}

package/apps/studio/client/app.jsx

@@ -20,6 +20,7 @@ import { GRID_KEYWORD_UNITS, parseTrackList, serializeTrackList } from '../grid-
 // Inspector's paper-preset picker, same "pull only pure math/data" shape as
 // canvas-cursors.ts above.
 import { PAPER_PRESETS, resolvePrintArtboard } from '../print/units.ts';
+import { resolveHeightCommit } from '../artboard-hug-commit.ts';
 import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 // The single "what is the hub link doing" rule, shared with the cloud rail's
 // connect note so the two surfaces can never disagree. Pure data + strings —
@@ -42,6 +43,7 @@ import { FilePreview, sanitizeDisplayText } from './panels/file-preview.jsx';
 import SetupChecklistDialog, { useSetupReadiness } from './panels/SetupChecklist.jsx';
 import TimelinePanel from './panels/TimelinePanel.jsx';
 import { parseCompTimeline } from './panels/timeline-parse.js';
+import { durationFramesForDrop, probeMediaDuration } from './panels/timeline-media-cache.js';
 import GenerateDialog from './generate-dialog.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
 import SettingsPanel from './panels/SettingsPanel.jsx';
@@ -8262,11 +8264,17 @@ function ArtboardKnobs({
     onResizeArtboard?.(artboardId, resolved.widthPx, resolved.heightPx);
     onSetArtboardPrint?.(artboardId, next);
   };
-  const setHug = (nextFixed) => {
+  const setHug = (nextFixed, explicitHeight) => {
     if (!artboardId) return;
-    const freezeHeight = nextFixed && Number.isFinite(h) ? Math.round(h) : undefined;
+    const src = Number.isFinite(explicitHeight) ? explicitHeight : h;
+    const freezeHeight = nextFixed && Number.isFinite(src) ? Math.round(src) : undefined;
     onSetArtboardHug?.(artboardId, nextFixed, freezeHeight);
   };
+  const commitHeight = (n) => {
+    const action = resolveHeightCommit(fixed, n);
+    if (action.kind === 'resize') commitSize(null, action.height);
+    else if (action.kind === 'promote-to-fixed') setHug(true, action.height);
+  };
   const commitStyle = (patch) => {
     if (!artboardId) return;
     onSetArtboardStyle?.(artboardId, patch);
@@ -8292,11 +8300,7 @@ function ArtboardKnobs({
           lead="H"
           steppers={false}
           scrub={fixed}
-          onCommit={(n) => {
-            // Hug — height is content-driven; ignore a typed value rather
-            // than silently switching modes.
-            if (fixed) commitSize(null, n);
-          }}
+          onCommit={commitHeight}
         />
       </div>
       <div style={{ padding: '0 12px 8px' }}>
@@ -14919,10 +14923,11 @@ function App() {
                   // fresh "New Cut" canvas only when no artboard opted in.
                   let upgraded = false;
                   for (const c of clips) {
+                    const probedSec = await probeMediaDuration(c.src).catch(() => null);
                     const body = {
                       canvas,
                       lane: c.mediaKind === 'audio' && upgraded ? 'audio' : 'storyline',
-                      durationInFrames: Math.round(fps * 3),
+                      durationInFrames: durationFramesForDrop(fps, probedSec),
                       mediaTag: c.mediaKind === 'audio' ? 'Audio' : 'Video',
                       src: c.src,
                     };
@@ -14993,6 +14998,12 @@ function App() {
                     continue;
                   }
                   const isAudio = mediaTag === 'Audio';
+                  // Video clips carry a real duration — probe it so the drop
+                  // lands at the clip's own length instead of a fixed 3s that
+                  // the user then has to drag out by hand. Images have no
+                  // inherent duration, so they keep the fallback.
+                  const probedSec =
+                    mediaTag === 'Video' ? await probeMediaDuration(up.path).catch(() => null) : null;
                   const body = { canvas, artboardId, mediaTag, src: up.path };
                   if (pos && (isAudio || pos.lane === 'audio')) {
                     body.lane = 'audio';
@@ -15005,7 +15016,7 @@ function App() {
                       body.index = slot;
                       slot += 1; // multiple files insert in order
                     }
-                    body.durationInFrames = Math.round(fps * 3);
+                    body.durationInFrames = durationFramesForDrop(fps, probedSec);
                   } else if (pos?.lane === 'overlay' && !isAudio) {
                     if ((timelineSequences || []).length === 0) {
                       // First clip of a greenfield comp = the BASE layer →
@@ -15015,14 +15026,14 @@ function App() {
                       body.lane = 'overlay';
                       body.from = Math.max(0, pos.frame ?? 0);
                     }
-                    body.durationInFrames = Math.round(fps * 3);
+                    body.durationInFrames = durationFramesForDrop(fps, probedSec);
                   } else if (!isAudio) {
                     // Default container rule: a video/image drop ANYWHERE on the
                     // timeline lands in the storyline (append = hard cut at the
                     // end; the caret gives it an index). The old lane-less
                     // append refused hard-cut series ("no transition to clone").
                     body.lane = 'storyline';
-                    body.durationInFrames = Math.round(fps * 3);
+                    body.durationInFrames = durationFramesForDrop(fps, probedSec);
                   } else {
                     // Audio without a caret → audio band, from the start.
                     body.lane = 'audio';

package/apps/studio/client/panels/timeline-media-cache.js

@@ -80,7 +80,10 @@ export function stripBucket(widthPx) {
   return 7;
 }
 
-async function extractStrip(url, count) {
+/** Hidden <video>, loaded and waited on through `loadedmetadata`/`canplay` so
+ *  `.duration`/`.videoWidth`/`.videoHeight` are readable. Caller owns cleanup
+ *  (`video.remove()`) once done with it. */
+async function loadVideoMetadata(url, timeoutMs) {
   const video = document.createElement('video');
   video.muted = true;
   video.playsInline = true;
@@ -99,7 +102,7 @@ async function extractStrip(url, count) {
   }
   try {
     await new Promise((res, rej) => {
-      const to = setTimeout(() => rej(new Error('metadata timeout')), 8000);
+      const to = setTimeout(() => rej(new Error('metadata timeout')), timeoutMs);
       const ok = () => {
         clearTimeout(to);
         res();
@@ -114,6 +117,39 @@ async function extractStrip(url, count) {
     });
   } catch (err) {
     video.remove();
+    throw err;
+  }
+  return video;
+}
+
+/** Real duration (seconds) of a video/audio src, probed via a hidden <video>
+ *  element — never throws, resolves null on failure so callers (e.g. the
+ *  timeline drop handler) can fall back to a default duration cleanly. */
+export async function probeMediaDuration(url) {
+  let video;
+  try {
+    video = await loadVideoMetadata(url, 6000);
+  } catch {
+    return null;
+  }
+  const dur = video.duration;
+  video.remove();
+  return Number.isFinite(dur) && dur > 0 ? dur : null;
+}
+
+/** durationInFrames for a clip dropped on the timeline: the real probed
+ *  duration when available, else a fallback (probe failure, or synthetic
+ *  content with no inherent duration like a title/image). */
+export function durationFramesForDrop(fps, probedSeconds, fallbackSeconds = 3) {
+  const sec = Number.isFinite(probedSeconds) && probedSeconds > 0 ? probedSeconds : fallbackSeconds;
+  return Math.max(1, Math.round(fps * sec));
+}
+
+async function extractStrip(url, count) {
+  let video;
+  try {
+    video = await loadVideoMetadata(url, 8000);
+  } catch (err) {
     console.warn('[timeline] filmstrip extraction failed for', url, err?.message || err);
     throw err;
   }

package/apps/studio/clip-ops.ts

@@ -1802,26 +1802,51 @@ export function applyMoveClipToOverlay(
     });
   }
   const mediaStart = directMediaTagStart(source, clip);
-  if (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null) {
-    throw new CanvasEditError('only a media clip with a direct source can move between layers', {
-      canvas: canvasAbsPath,
-      id: stableId,
-    });
+  const isPlaceholder = clip.placeholder != null;
+  if (!isPlaceholder && (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null)) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
+  }
+  if (isPlaceholder && clip.durationInFrames == null) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
   }
   const start = clipAbsoluteStart(source, canvasAbsPath, artboardId, stableId);
-  const trim =
-    numAttrText(source, mediaStart, 'trimBefore') ??
-    numAttrText(source, mediaStart, 'startFrom') ??
-    0;
-  const rate = numAttrText(source, mediaStart, 'playbackRate') ?? 1;
-  const ins = applyInsertClipAt(canvasAbsPath, source, artboardId, {
-    lane: 'overlay',
-    from: start,
-    durationInFrames: clip.durationInFrames,
-    mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
-    src: clip.mediaSrc,
-  });
-  let out = graftMediaAttrs(canvasAbsPath, ins.source, artboardId, ins.stableId, trim, rate);
+  // A placeholder slate has no media element to graft trim/rate onto — it
+  // rides over as-is (prompt + kind), never as media.
+  const ins = isPlaceholder
+    ? applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'overlay',
+        from: start,
+        durationInFrames: clip.durationInFrames as number,
+        placeholder: {
+          prompt: clip.placeholder?.prompt ?? '',
+          kind: clip.placeholder?.kind ?? 'veo',
+        },
+      })
+    : applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'overlay',
+        from: start,
+        durationInFrames: clip.durationInFrames as number,
+        mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
+        src: clip.mediaSrc,
+      });
+  let out = isPlaceholder
+    ? ins.source
+    : graftMediaAttrs(
+        canvasAbsPath,
+        ins.source,
+        artboardId,
+        ins.stableId,
+        numAttrText(source, mediaStart as number, 'trimBefore') ??
+          numAttrText(source, mediaStart as number, 'startFrom') ??
+          0,
+        numAttrText(source, mediaStart as number, 'playbackRate') ?? 1
+      );
   const again = enumerateClips(canvasAbsPath, out, artboardId);
   const insertedHash = again.clips.find((c) => c.stableId === ins.stableId)?.contentHash ?? null;
   const original = again.clips.find(
@@ -1861,24 +1886,48 @@ export function applyMoveClipToStoryline(
     throw new CanvasEditError('already a storyline beat', { canvas: canvasAbsPath, id: stableId });
   }
   const mediaStart = directMediaTagStart(source, clip);
-  if (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null) {
-    throw new CanvasEditError('only a media clip with a direct source can move between layers', {
-      canvas: canvasAbsPath,
-      id: stableId,
-    });
+  const isPlaceholder = clip.placeholder != null;
+  if (!isPlaceholder && (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null)) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
   }
-  const trim =
-    numAttrText(source, mediaStart, 'trimBefore') ??
-    numAttrText(source, mediaStart, 'startFrom') ??
-    0;
-  const rate = numAttrText(source, mediaStart, 'playbackRate') ?? 1;
-  const ins = applyInsertClipAt(canvasAbsPath, source, artboardId, {
-    lane: 'storyline',
-    durationInFrames: clip.durationInFrames,
-    mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
-    src: clip.mediaSrc,
-  });
-  let out = graftMediaAttrs(canvasAbsPath, ins.source, artboardId, ins.stableId, trim, rate);
+  if (isPlaceholder && clip.durationInFrames == null) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
+  }
+  // A placeholder slate has no media element to graft trim/rate onto — it
+  // rides over as-is (prompt + kind), never as media.
+  const ins = isPlaceholder
+    ? applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'storyline',
+        durationInFrames: clip.durationInFrames as number,
+        placeholder: {
+          prompt: clip.placeholder?.prompt ?? '',
+          kind: clip.placeholder?.kind ?? 'veo',
+        },
+      })
+    : applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'storyline',
+        durationInFrames: clip.durationInFrames as number,
+        mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
+        src: clip.mediaSrc,
+      });
+  let out = isPlaceholder
+    ? ins.source
+    : graftMediaAttrs(
+        canvasAbsPath,
+        ins.source,
+        artboardId,
+        ins.stableId,
+        numAttrText(source, mediaStart as number, 'trimBefore') ??
+          numAttrText(source, mediaStart as number, 'startFrom') ??
+          0,
+        numAttrText(source, mediaStart as number, 'playbackRate') ?? 1
+      );
   const again = enumerateClips(canvasAbsPath, out, artboardId);
   const insertedHash = again.clips.find((c) => c.stableId === ins.stableId)?.contentHash ?? null;
   const original = again.clips.find(