reframe-video 0.1.0 → 0.1.2

package/preview/src/panel.ts

@@ -200,6 +200,39 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
       }
     }
 
+    // --- beats (semantic groups) ---
+    const beats: Extract<TimelineIR, { kind: "beat" }>[] = [];
+    const beatOf = new Map<string, string>();
+    const walkBeats = (tl: TimelineIR, owner?: string) => {
+      if (tl.kind === "beat") {
+        beats.push(tl);
+        tl.children.forEach((c) => walkBeats(c, tl.name));
+        return;
+      }
+      if ("label" in tl && tl.label !== undefined && owner) beatOf.set(tl.label, owner);
+      if ("children" in tl) tl.children.forEach((c) => walkBeats(c, owner));
+    };
+    if (ir.timeline) walkBeats(ir.timeline);
+    if (beats.length > 0) {
+      root.append(el("h3", {}, "Beats"));
+      for (const b of beats) {
+        const card = el("div", { class: "step-card beat-card" },
+          el("div", {}, `${b.name} `, el("span", { class: "kind" }, "(beat)")),
+        );
+        const gapRow = makeControl("gap", b.gap ?? 0, store.hasTimelineEdit(b.name, "gap"),
+          (v) => store.setTimelineParam(b.name, "gap", Number(v)),
+          () => store.unsetTimelineParam(b.name, "gap"));
+        gapRow.prepend(el("label", {}, "gap"));
+        card.append(gapRow);
+        const scaleRow = makeControl("scale", b.scale ?? 1, store.hasTimelineEdit(b.name, "scale"),
+          (v) => store.setTimelineParam(b.name, "scale", Number(v)),
+          () => store.unsetTimelineParam(b.name, "scale"));
+        scaleRow.prepend(el("label", {}, "scale"));
+        card.append(scaleRow);
+        root.append(card);
+      }
+    }
+
     // --- labeled timeline steps ---
     const steps: Extract<TimelineIR, { label?: string }>[] = [];
     const walkTl = (tl: TimelineIR) => {
@@ -211,9 +244,10 @@ export function buildPanel(store: EditorStore, root: HTMLElement) {
       root.append(el("h3", {}, "Timeline"));
       for (const step of steps) {
         const label = step.label!;
-        const card = el("div", { class: "step-card" },
-          el("div", {}, `${label} `, el("span", { class: "kind" }, `(${step.kind})`)),
-        );
+        const beatName = beatOf.get(label);
+        const head = el("div", {}, `${label} `, el("span", { class: "kind" }, `(${step.kind})`));
+        if (beatName) head.append(el("span", { class: "badge" }, ` ↳ ${beatName}`));
+        const card = el("div", { class: "step-card" }, head);
         const durRow = makeControl(
           "duration",
           "duration" in step ? (step.duration ?? 0.5) : 0.5,

package/preview/src/store.ts

@@ -15,6 +15,7 @@ import {
   type OverlayDoc,
   type PropValue,
   type SceneIR,
+  type TimelineIR,
 } from "@reframe/core";
 
 export type ChangeKind = "value" | "structure";
@@ -91,12 +92,37 @@ export class EditorStore {
     this.recompose("structure");
   }
 
-  setTimelineParam(label: string, key: "duration" | "ease" | "stagger", value: number | string) {
+  setTimelineParam(
+    label: string,
+    key: "duration" | "ease" | "stagger" | "at" | "gap" | "scale" | "order",
+    value: number | string,
+  ) {
     ((this.draft.timeline ??= {})[label] ??= {})[key] = value as never;
     this.recompose("value");
   }
 
-  unsetTimelineParam(label: string, key: "duration" | "ease" | "stagger") {
+  /** Labeled motionPath steps with their (possibly overlay-edited) waypoints —
+   *  drives the preview's draggable handles and is exposed on window.__store. */
+  motionPaths(): { label: string; points: [number, number][] }[] {
+    const out: { label: string; points: [number, number][] }[] = [];
+    const walk = (tl: TimelineIR) => {
+      if (tl.kind === "motionPath" && tl.label) out.push({ label: tl.label, points: tl.points });
+      if ("children" in tl) tl.children.forEach(walk);
+    };
+    if (this.compiled.ir.timeline) walk(this.compiled.ir.timeline);
+    return out;
+  }
+
+  /** A dragged waypoint writes the whole points array as a timeline patch. */
+  setMotionPathPoints(label: string, points: [number, number][]) {
+    ((this.draft.timeline ??= {})[label] ??= {}).points = points;
+    this.recompose("value");
+  }
+
+  unsetTimelineParam(
+    label: string,
+    key: "duration" | "ease" | "stagger" | "at" | "gap" | "scale" | "order",
+  ) {
     delete this.draft.timeline?.[label]?.[key];
     this.prune();
     this.recompose("structure");

package/preview/src/virtual.d.ts

@@ -1,4 +1,12 @@
 declare module "virtual:reframe-user-scenes" {
   import type { SceneIR } from "@reframe/core";
-  export const userScenes: { name: string; load: () => Promise<{ default: SceneIR }> }[];
+  export const userScenes: {
+    name: string;
+    /** Absolute directory containing the scene file. */
+    dir: string;
+    load: () => Promise<{ default: SceneIR }>;
+  }[];
 }
+
+/** Absolute path of examples/scenes (injected by vite define; "" when packaged). */
+declare const __REFRAME_EXAMPLES_DIR__: string;

package/preview/vite.config.ts

@@ -1,5 +1,5 @@
 import { existsSync, readFileSync, readdirSync } from "node:fs";
-import { basename, join, resolve } from "node:path";
+import { basename, dirname, join, resolve } from "node:path";
 import { defineConfig, type Plugin } from "vite";
 
 const PKG_ROOT = resolve(__dirname, "..");
@@ -31,7 +31,7 @@ const userScenesPlugin: Plugin = {
     if (id !== "\0reframe-user-scenes") return undefined;
     const entries = userScenes().map(
       (s) =>
-        `  { name: ${JSON.stringify(s.name)}, load: () => import(${JSON.stringify(`/@fs${s.path}`)}) },`,
+        `  { name: ${JSON.stringify(s.name)}, dir: ${JSON.stringify(dirname(s.path))}, load: () => import(${JSON.stringify(`/@fs${s.path}`)}) },`,
     );
     return `export const userScenes = [\n${entries.join("\n")}\n];\n`;
   },
@@ -39,6 +39,7 @@ const userScenesPlugin: Plugin = {
 
 export default defineConfig({
   plugins: [userScenesPlugin],
+  define: { __REFRAME_EXAMPLES_DIR__: '""' }, // packaged preview ships no examples
   resolve: {
     alias: {
       "@reframe/core": resolve(PKG_ROOT, "dist", "index.js"),