npm - @mevdragon/vidfarm-devcli - Versions diffs - 0.5.1 → 0.5.3 - Mend

@mevdragon/vidfarm-devcli 0.5.1 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/src/cli.js +1 -1
package/dist/src/devcli/composition-edit.js +287 -0
package/package.json +2 -1

package/dist/src/cli.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { parseArgs } from "node:util";
 import { spawnSync } from "node:child_process";
 import { Readable } from "node:stream";
 import { pipeline } from "node:stream/promises";
-import { computeCompositionGaps, insertMediaLayer, inspectComposition, replaceLayerWithMedia } from "./services/composition-edit.js";
+import { computeCompositionGaps, insertMediaLayer, inspectComposition, replaceLayerWithMedia } from "./devcli/composition-edit.js";
 // vidfarm-devcli — command-line bridge for the Vidfarm video studio. The
 // `serve` command boots the FULL editor locally (single origin, disk-backed
 // records + storage) so power users edit compositions on disk while a browser

package/dist/src/devcli/composition-edit.js ADDED Viewed

@@ -0,0 +1,287 @@
+// Composition editing for the devcli — parse a composition.html on disk, find
+// its blank timeline gaps and scene layers, and insert / replace a media clip.
+// This is the local-agent counterpart to the browser editor's applyAddLayerAction
+// (demo/src/HyperframesStudioEditor.tsx): it emits clips with the SAME data-*
+// attributes and inline styles so `vidfarm serve` live-morphs them and `publish`
+// pushes them identically to a browser-made edit. Pure DOM (linkedom) — no
+// ffmpeg, no network.
+import { parseHTML } from "linkedom";
+const round3 = (v) => Number(v.toFixed(3));
+const clampPercent = (v) => Math.min(100, Math.max(0, v));
+function serialize(document) {
+    return `<!doctype html>\n${document.documentElement.outerHTML}`;
+}
+function reduceAspectRatio(width, height) {
+    if (!width || !height || width <= 0 || height <= 0)
+        return null;
+    const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
+    const w = Math.round(width);
+    const h = Math.round(height);
+    const g = gcd(w, h) || 1;
+    return `${w / g}:${h / g}`;
+}
+function numAttr(node, name) {
+    const raw = Number.parseFloat(node?.getAttribute?.(name) ?? "");
+    return Number.isFinite(raw) ? raw : NaN;
+}
+function stylePercent(node, prop) {
+    const raw = node?.style?.[prop];
+    if (!raw)
+        return undefined;
+    const match = raw.match(/(-?\d+(?:\.\d+)?)\s*%/);
+    return match ? Number(match[1]) : undefined;
+}
+// A clip fills the canvas if it's a timeline proxy, an explicit full-canvas
+// marker, or its geometry is ~0,0,100,100. Mirrors the editor's isFullCanvas.
+function isFullCanvasNode(node) {
+    if (node?.getAttribute?.("data-vf-timeline-proxy") === "video")
+        return true;
+    if (node?.getAttribute?.("data-vf-full-canvas") === "true")
+        return true;
+    const x = stylePercent(node, "left");
+    const y = stylePercent(node, "top");
+    const w = stylePercent(node, "width");
+    const h = stylePercent(node, "height");
+    return x !== undefined && y !== undefined && w !== undefined && h !== undefined
+        && x <= 0.5 && y <= 0.5 && w >= 99.5 && h >= 99.5;
+}
+function readCompositionDoc(html) {
+    const { document } = parseHTML(html);
+    const root = document.querySelector("[data-composition-id]");
+    if (!root)
+        throw new Error("Composition root ([data-composition-id]) not found in composition.html.");
+    return { document, root };
+}
+function collectClips(root) {
+    return Array.from(root.querySelectorAll("[data-start]"));
+}
+function layerSummary(node) {
+    const start = numAttr(node, "data-start");
+    const duration = numAttr(node, "data-duration");
+    const track = numAttr(node, "data-track-index");
+    return {
+        key: node.getAttribute("data-hf-id") || node.id || "",
+        kind: node.getAttribute("data-layer-kind"),
+        label: node.getAttribute("data-label"),
+        slug: node.getAttribute("data-hf-slug"),
+        start: Number.isFinite(start) ? start : 0,
+        duration: Number.isFinite(duration) ? duration : 0,
+        track: Number.isFinite(track) ? track : 0,
+        is_timeline_proxy: node.getAttribute("data-vf-timeline-proxy") === "video",
+        is_full_canvas: isFullCanvasNode(node),
+        src: node.getAttribute("src") || node.getAttribute("data-src") || null
+    };
+}
+// Blank spans where NO canvas-filling layer is on screen — the "gaps" an agent
+// fills. Overlays (text/caption/audio) don't count. Mirrors the editor's
+// computeTimelineGaps.
+export function computeCompositionGaps(html) {
+    const { root } = readCompositionDoc(html);
+    const totalDuration = numAttr(root, "data-duration");
+    return gapsFromClips(collectClips(root), Number.isFinite(totalDuration) ? totalDuration : 0);
+}
+function gapsFromClips(clips, totalDuration) {
+    const MIN_GAP = 0.2;
+    if (!Number.isFinite(totalDuration) || totalDuration <= 0)
+        return [];
+    const intervals = [];
+    for (const node of clips) {
+        const kind = (node.getAttribute("data-layer-kind") ?? "").toLowerCase();
+        const isProxy = node.getAttribute("data-vf-timeline-proxy") === "video";
+        const start = numAttr(node, "data-start");
+        const duration = numAttr(node, "data-duration");
+        if ((isProxy || ["video", "image", "html", "shape"].includes(kind)) && Number.isFinite(start) && Number.isFinite(duration) && duration > 0) {
+            intervals.push({ start, end: start + duration });
+        }
+    }
+    intervals.sort((a, b) => a.start - b.start);
+    const merged = [];
+    for (const interval of intervals) {
+        const last = merged[merged.length - 1];
+        if (last && interval.start <= last.end + 0.001)
+            last.end = Math.max(last.end, interval.end);
+        else
+            merged.push({ start: Math.max(0, interval.start), end: interval.end });
+    }
+    const gaps = [];
+    let cursor = 0;
+    for (const interval of merged) {
+        if (interval.start - cursor >= MIN_GAP) {
+            gaps.push({ start: round3(cursor), end: round3(interval.start), duration: round3(interval.start - cursor) });
+        }
+        cursor = Math.max(cursor, interval.end);
+    }
+    if (totalDuration - cursor >= MIN_GAP) {
+        gaps.push({ start: round3(cursor), end: round3(totalDuration), duration: round3(totalDuration - cursor) });
+    }
+    return gaps;
+}
+// Full read-out for `vidfarm pull` / agent grounding: dimensions, scenes, gaps.
+export function inspectComposition(html) {
+    const { root } = readCompositionDoc(html);
+    const clips = collectClips(root);
+    const totalDuration = numAttr(root, "data-duration");
+    const width = numAttr(root, "data-width");
+    const height = numAttr(root, "data-height");
+    const w = Number.isFinite(width) ? width : null;
+    const h = Number.isFinite(height) ? height : null;
+    return {
+        composition_id: root.getAttribute("data-composition-id"),
+        duration_seconds: Number.isFinite(totalDuration) ? totalDuration : 0,
+        width: w,
+        height: h,
+        aspect_ratio: reduceAspectRatio(w, h),
+        layers: clips.map(layerSummary),
+        gaps: gapsFromClips(clips, Number.isFinite(totalDuration) ? totalDuration : 0)
+    };
+}
+function resolveLayerNode(root, key) {
+    const trimmed = key.trim();
+    if (!trimmed)
+        return null;
+    const escaped = trimmed.replace(/["\\]/g, "\\$&");
+    return root.querySelector(`[data-hf-id="${escaped}"]`)
+        ?? root.querySelector(`[data-hf-slug="${escaped}"]`)
+        ?? root.querySelector(`#${escaped.replace(/[^\w-]/g, "")}`)
+        ?? null;
+}
+function nextAutoTrack(clips) {
+    return clips.reduce((max, node) => {
+        const track = numAttr(node, "data-track-index");
+        return Number.isFinite(track) ? Math.max(max, track + 1) : max;
+    }, 0);
+}
+// Enforce "one clip per (track, time)": if the requested track collides with an
+// existing clip's time range, walk upward to the next free lane.
+function findNonCollidingTrack(clips, range, excludeId) {
+    const end = range.start + range.duration;
+    let track = Math.max(0, Math.floor(range.track));
+    const collides = (t) => clips.some((node) => {
+        if ((node.getAttribute("data-hf-id") || node.id) === excludeId)
+            return false;
+        if (numAttr(node, "data-track-index") !== t)
+            return false;
+        const s = numAttr(node, "data-start");
+        const d = numAttr(node, "data-duration");
+        if (!Number.isFinite(s) || !Number.isFinite(d))
+            return false;
+        return s < end && (s + d) > range.start;
+    });
+    while (collides(track))
+        track += 1;
+    return track;
+}
+function buildMediaClip(document, opts, id, track, geom) {
+    const node = document.createElement(opts.kind === "video" ? "video" : "img");
+    node.id = id;
+    node.setAttribute("data-hf-id", id);
+    node.setAttribute("data-layer-mode", "publish");
+    node.setAttribute("data-layer-kind", opts.kind);
+    node.setAttribute("data-viral-note", `AI generated ${opts.kind} (devcli).`);
+    node.setAttribute("data-start", String(round3(geom.start)));
+    node.setAttribute("data-duration", String(round3(geom.duration)));
+    node.setAttribute("data-end", String(round3(geom.start + geom.duration)));
+    node.setAttribute("data-track-index", String(track));
+    node.setAttribute("data-label", opts.label || (opts.kind === "video" ? "AI video" : "AI image"));
+    node.className = "clip";
+    if (opts.slug)
+        node.setAttribute("data-hf-slug", opts.slug);
+    const styles = [
+        "position:absolute",
+        `left:${clampPercent(geom.x)}%`,
+        `top:${clampPercent(geom.y)}%`,
+        `width:${clampPercent(geom.width)}%`,
+        `height:${clampPercent(geom.height)}%`,
+        `z-index:${track}`,
+        "overflow:hidden",
+        `object-fit:${opts.objectFit || "cover"}`
+    ];
+    node.setAttribute("src", opts.src);
+    if (opts.kind === "video") {
+        node.setAttribute("playsinline", "");
+        node.setAttribute("preload", "auto");
+        const wantsAudio = opts.muted === false || (opts.volume !== undefined && opts.volume > 0);
+        if (!wantsAudio)
+            node.setAttribute("muted", "");
+        node.setAttribute("data-volume", String(opts.volume ?? 1));
+        const ps = String(round3(opts.playbackStart ?? 0));
+        node.setAttribute("data-media-start", ps);
+        node.setAttribute("data-playback-start", ps);
+        styles.push("background:#050604");
+    }
+    node.setAttribute("style", `${styles.join(";")};`);
+    return node;
+}
+// Insert a NEW media clip. Returns { html, layerKey } — the layerKey resolves in
+// the editor / later CLI calls. Auto-picks a collision-free track.
+export function insertMediaLayer(html, opts) {
+    if (!opts.src?.trim())
+        throw new Error("insertMediaLayer requires a src media URL.");
+    const { document, root } = readCompositionDoc(html);
+    const clips = collectClips(root);
+    const totalDuration = numAttr(root, "data-duration");
+    const dur = Number.isFinite(totalDuration) ? totalDuration : 0;
+    const start = Math.max(0, dur > 0 ? Math.min(dur - 0.1, opts.start ?? 0) : (opts.start ?? 0));
+    const remaining = dur > 0 ? Math.max(0.1, dur - start) : 4;
+    const duration = Math.max(0.1, dur > 0 ? Math.min(opts.duration ?? Math.min(4, remaining), remaining) : (opts.duration ?? 4));
+    const providedKey = opts.layerKey?.trim();
+    const genKey = providedKey && /^[A-Za-z][\w-]{0,63}$/.test(providedKey)
+        ? providedKey
+        : `vf-gen-${Date.now().toString(36)}`;
+    const id = genKey.startsWith("element_") ? genKey : `element_${genKey}`;
+    const initialTrack = opts.track !== undefined && Number.isFinite(opts.track) ? Math.max(0, Math.floor(opts.track)) : nextAutoTrack(clips);
+    const track = findNonCollidingTrack(clips, { start, duration, track: initialTrack }, id);
+    const node = buildMediaClip(document, opts, id, track, {
+        start,
+        duration,
+        x: opts.x ?? 0,
+        y: opts.y ?? 0,
+        width: opts.width ?? 100,
+        height: opts.height ?? 100
+    });
+    root.append(node);
+    return { html: serialize(document), layerKey: id };
+}
+// Replace an existing scene/layer with a generated media clip, taking over its
+// timing + geometry (full-canvas when it was a proxy / full-canvas fill).
+export function replaceLayerWithMedia(html, targetKey, opts) {
+    if (!opts.src?.trim())
+        throw new Error("replaceLayerWithMedia requires a src media URL.");
+    const { document, root } = readCompositionDoc(html);
+    const target = resolveLayerNode(root, targetKey);
+    if (!target)
+        throw new Error(`Layer to replace not found: ${targetKey}`);
+    const start = opts.start ?? numAttr(target, "data-start");
+    const durationRaw = opts.duration ?? numAttr(target, "data-duration");
+    const trackRaw = opts.track ?? numAttr(target, "data-track-index");
+    const fullCanvas = isFullCanvasNode(target);
+    const geom = fullCanvas
+        ? { x: 0, y: 0, width: 100, height: 100 }
+        : {
+            x: opts.x ?? stylePercent(target, "left") ?? 0,
+            y: opts.y ?? stylePercent(target, "top") ?? 0,
+            width: opts.width ?? stylePercent(target, "width") ?? 100,
+            height: opts.height ?? stylePercent(target, "height") ?? 100
+        };
+    const providedKey = opts.layerKey?.trim();
+    const targetId = target.getAttribute("data-hf-id") || target.id || "";
+    const genKey = providedKey && providedKey !== targetKey && /^[A-Za-z][\w-]{0,63}$/.test(providedKey)
+        ? providedKey
+        : `vf-gen-${Date.now().toString(36)}`;
+    const id = genKey.startsWith("element_") ? genKey : `element_${genKey}`;
+    // Remove the old node, then insert the replacement in its slot.
+    if (target.parentNode)
+        target.parentNode.removeChild(target);
+    const clips = collectClips(root);
+    const initialTrack = Number.isFinite(trackRaw) ? Math.max(0, Math.floor(trackRaw)) : nextAutoTrack(clips);
+    const track = findNonCollidingTrack(clips, { start: Number.isFinite(start) ? start : 0, duration: Number.isFinite(durationRaw) ? durationRaw : 4, track: initialTrack }, id);
+    const node = buildMediaClip(document, opts, id, track, {
+        start: Number.isFinite(start) ? start : 0,
+        duration: Number.isFinite(durationRaw) && durationRaw > 0 ? durationRaw : 4,
+        ...geom
+    });
+    root.append(node);
+    void targetId;
+    return { html: serialize(document), layerKey: id };
+}
+//# sourceMappingURL=composition-edit.js.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mevdragon/vidfarm-devcli",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Local bridge for the Vidfarm Trackpad Editor. Point it at a template id, edit composition.html on disk (Claude Code, Codex, etc.), preview live in the browser at https://vidfarm.cc/editor/.",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist/src/cli.js",
+    "dist/src/devcli/**/*.js",
     "README.md",
     "SKILL.director.md",
     "SKILL.platform.md",