@lalalic/markcut 1.0.0

package/src/utils/index.ts

@@ -0,0 +1,168 @@
+/**
+ * Pure helpers, no AI, no network, no React.
+ * Pure helpers — no AI, no network, no React.
+ */
+
+export function uid(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+const KEBAB = /[^a-zA-Z0-9_-]+/g;
+export function toClassName(s: string): string {
+  return (s || "").replace(KEBAB, "-").replace(/^-+|-+$/g, "");
+}
+
+export function toPlaybackRate(rate: number): number {
+  // remotion clamps to (0.0625, 16)
+  if (!isFinite(rate) || rate <= 0) return 1;
+  return Math.min(16, Math.max(0.0625, rate));
+}
+
+export function cssJS(css?: string | Record<string, unknown>): Record<string, unknown> {
+  if (!css) return {};
+  if (typeof css === "object") return css;
+  const out: Record<string, string> = {};
+  for (const decl of css.split(";")) {
+    const i = decl.indexOf(":");
+    if (i < 0) continue;
+    const k = decl.slice(0, i).trim();
+    const v = decl.slice(i + 1).trim();
+    if (!k) continue;
+    const camel = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    out[camel] = v;
+  }
+  return out;
+}
+
+/**
+ * Walk a stream tree depth-first. Visitor returns false to stop descending.
+ */
+export type StreamNode = { id?: string; type?: string; children?: StreamNode[]; [k: string]: unknown };
+export function walkDown<T extends StreamNode>(
+  node: T,
+  visit: (n: T, parent: T | null, depth: number) => boolean | void,
+  parent: T | null = null,
+  depth = 0,
+): void {
+  const keep = visit(node, parent, depth);
+  if (keep === false) return;
+  if (Array.isArray(node.children)) {
+    for (const c of node.children) walkDown(c as T, visit, node, depth + 1);
+  }
+}
+
+/**
+ * Compute duration of a stream subtree, in seconds.
+ *
+ * Compute duration of a stream subtree, in seconds.
+ *
+ *  - rhythm streams use their pre-set durationInSeconds (set by host)
+ *  - leaf actions use action.end as default
+ *  - series sums children, subtracting transition overlaps
+ *  - sequence (parallel) takes max child duration
+ *  - background children do not contribute
+ *  - actions[].streamRef is unsupported in lite (no template instancing)
+ */
+export interface DurationStream extends StreamNode {
+  type?: string;
+  isSeries?: boolean;
+  isBackground?: boolean;
+  transition?: string;
+  transitionTime?: number;
+  durationInSeconds?: number;
+  actions?: Array<{ start?: number; end?: number; startFrom?: number; endAt?: number }>;
+  children?: DurationStream[];
+}
+
+export function getDurationInSeconds(stream: DurationStream, update = true): number {
+  if (!stream) return 0;
+
+  if (stream.type === "rhythm") {
+    return stream.durationInSeconds ?? 0;
+  }
+
+  // include: if src is set, treat as leaf (duration from action end).
+  // Otherwise fall back to inline children (legacy).
+  if (stream.type === "include") {
+    if (stream.src) {
+      // External reference — use action end (like other leaves)
+      const last = stream.actions?.[stream.actions.length - 1];
+      const d = last?.end ?? 0;
+      if (update) stream.durationInSeconds = d;
+      return d;
+    }
+    // Inline children fallback (legacy) — parallel max
+    const children = stream.children ?? [];
+    if (children.length && update) {
+      for (const child of children) {
+        getDurationInSeconds(child, update);
+      }
+    }
+    const visible = children.filter((c) => !c.isBackground);
+    let total = 0;
+    for (const c of visible) {
+      const d = c.durationInSeconds ?? 0;
+      if (d > total) total = d;
+    }
+    if (update) stream.durationInSeconds = total;
+    return total;
+  }
+
+  // scene is a container (like folder) — falls through to general children logic
+  // leaf with actions
+  if (!stream.children?.length) {
+    const last = stream.actions?.[stream.actions.length - 1];
+    const d = last?.end ?? 0;
+    if (update) stream.durationInSeconds = d;
+    return d;
+  }
+
+  let total = 0;
+  for (const child of stream.children) {
+    getDurationInSeconds(child, update);
+  }
+
+  const visible = stream.children.filter((c) => !c.isBackground);
+  if (stream.isSeries) {
+    const overlap = stream.transition ? (stream.transitionTime ?? 0.5) : 0;
+    for (let i = 0; i < visible.length; i++) {
+      const c = visible[i]!;
+      const d = c.durationInSeconds ?? 0;
+      total += d;
+      if (i > 0 && overlap > 0) total -= overlap;
+    }
+  } else {
+    for (const c of visible) {
+      const d = c.durationInSeconds ?? 0;
+      if (d > total) total = d;
+    }
+  }
+
+  if (update) stream.durationInSeconds = total;
+  return total;
+}
+
+/** WebVTT parsing — supports plain "MM:SS.mmm" or "HH:MM:SS.mmm". */
+export const VTT_REG = /^(?:(\d+):)?(\d{1,2}):(\d{2})(?:\.(\d{1,3}))?$/;
+export function vttSecond(t: string): number {
+  const m = VTT_REG.exec(t.trim());
+  if (!m) return 0;
+  const [, h = "0", mm = "0", ss = "0", ms = "0"] = m;
+  return Number(h) * 3600 + Number(mm) * 60 + Number(ss) + Number(ms.padEnd(3, "0")) / 1000;
+}
+
+export interface Cue { startFrom: number; endAt: number; text: string }
+export function parseVTT(src: string): Cue[] {
+  const cues: Cue[] = [];
+  const blocks = src.replace(/\r\n/g, "\n").split(/\n\n+/);
+  for (const b of blocks) {
+    const lines = b.split("\n").filter(Boolean);
+    const tline = lines.find((l) => l.includes("-->"));
+    if (!tline) continue;
+    const [a, z] = tline.split("-->").map((s) => s.trim());
+    if (!a || !z) continue;
+    const text = lines.slice(lines.indexOf(tline) + 1).join("\n").trim();
+    cues.push({ startFrom: vttSecond(a), endAt: vttSecond(z), text });
+  }
+  return cues;
+}

package/src/utils/tween.ts

@@ -0,0 +1,118 @@
+/**
+ * Tween animation resolver for JSX components rendered via react-jsx-parser.
+ *
+ * Makes `tween(from, to, easing?)` expressions work inside component JSX
+ * by providing it as a binding to JsxParser. The tween function uses
+ * Remotion's `interpolate()` with the current frame to produce animated values.
+ *
+ * Usage in markdown JSX:
+ *   <StatCounter value={tween(0, 100)} />
+ *   <div style={{ background: tween('#000', '#FFF', 'easeOut') }} />
+ *   <div style={{ borderRadius: tween(0, 100, 'easeOut') }} />
+ */
+import * as React from "react";
+import { interpolate, useCurrentFrame, Easing } from "remotion";
+
+/** Built-in easing name → Remotion easing function. */
+const EASING_MAP: Record<string, ((t: number) => number) | undefined> = {
+  linear: undefined,
+  ease: Easing.ease,
+  easeIn: Easing.in(Easing.ease),
+  easeOut: Easing.out(Easing.ease),
+  easeInOut: Easing.inOut(Easing.ease),
+};
+
+/** Check if a value looks like a hex color string. */
+function isHexColor(v: unknown): v is string {
+  return typeof v === "string" && /^#[0-9a-fA-F]{3,8}$/.test(v);
+}
+
+/** Parse a hex color (#RGB, #RRGGBB) to a number. */
+function hexToNumber(hex: string): number {
+  const s = hex.replace(/^#/, "");
+  if (s.length === 3) {
+    return parseInt(s[0]! + s[0] + s[1]! + s[1] + s[2]! + s[2], 16);
+  }
+  return parseInt(s, 16);
+}
+
+/** Lerp between two numbers. */
+function lerp(a: number, b: number, t: number): number {
+  return a + (b - a) * t;
+}
+
+/**
+ * React hook that creates tween-related bindings for react-jsx-parser.
+ *
+ * Returns an object with:
+ *   - `tween(from, to, easing?)` — frame-interpolated value (number or hex color)
+ *   - `interpolate` — Remotion's interpolate function (for advanced use)
+ *
+ * Must be called at the top level of a React component (per Rules of Hooks).
+ *
+ * @example
+ *   const bindings = useTweenBindings(action);
+ *   <JsxParser bindings={{ ...stream.data, ...bindings }} />
+ */
+export function useTweenBindings(action: { start?: number; end?: number }): Record<string, unknown> {
+  const frame = useCurrentFrame();
+  const actionDurationFrames = Math.max(1, Math.floor(((action.end ?? 1) - (action.start ?? 0)) * 30));
+
+  // Per-render cache: cleared each time frame changes.
+  // Only lives for one render — avoids re-computing the same tween()
+  // call if it appears multiple times in the JSX on the same frame.
+  const cacheRef = React.useRef<Map<string, number | string>>(new Map());
+  const prevFrameRef = React.useRef(frame);
+
+  if (prevFrameRef.current !== frame) {
+    cacheRef.current = new Map();
+    prevFrameRef.current = frame;
+  }
+
+  const tween = React.useCallback(
+    (from: unknown, to: unknown, easing?: string): unknown => {
+      const key = `${from},${to},${easing || "linear"}`;
+      const cached = cacheRef.current.get(key);
+      if (cached !== undefined) return cached;
+
+      const easingFn = easing ? EASING_MAP[easing] : undefined;
+
+      // Color tween: interpolate each channel
+      if (isHexColor(from) && isHexColor(to)) {
+        const fromNum = hexToNumber(from);
+        const toNum = hexToNumber(to);
+        const t = actionDurationFrames > 0
+          ? interpolate(frame, [0, actionDurationFrames], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+              easing: easingFn,
+            })
+          : 1;
+        const r = Math.round(lerp((fromNum >> 16) & 0xff, (toNum >> 16) & 0xff, t));
+        const g = Math.round(lerp((fromNum >> 8) & 0xff, (toNum >> 8) & 0xff, t));
+        const b = Math.round(lerp(fromNum & 0xff, toNum & 0xff, t));
+        const val = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+        cacheRef.current.set(key, val);
+        return val;
+      }
+
+      // Numeric tween
+      const fromNum = Number(from);
+      const toNum = Number(to);
+      if (!Number.isFinite(fromNum) || !Number.isFinite(toNum)) {
+        return to;
+      }
+
+      const val = interpolate(frame, [0, actionDurationFrames], [fromNum, toNum], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: easingFn,
+      });
+      cacheRef.current.set(key, val);
+      return val;
+    },
+    [frame, actionDurationFrames],
+  );
+
+  return { tween, interpolate };
+}