@tandryukha/aidemo 0.8.0 → 0.15.0

package/src/variants.ts

@@ -60,7 +60,7 @@ export async function loadVariants(path: string): Promise<Variant[]> {
 
 export interface RenderVariantsOptions {
   /** Chrome record options shared by every variant. */
-  record?: Pick<RecordOptions, "profileDir" | "headed" | "capture">;
+  record?: Pick<RecordOptions, "profileDir" | "fresh" | "headed" | "capture">;
   /** Re-synthesize narration even if unchanged. */
   forceVoice?: boolean;
 }

package/src/voice-local.ts

@@ -13,7 +13,7 @@ import {
   ttsModelCacheDir,
 } from "./config.js";
 import { runFfmpeg } from "./ffmpeg.js";
-import { exists, log } from "./util.js";
+import { exists, log, sleep } from "./util.js";
 
 /**
  * In-process TTS: Kokoro-82M ONNX on CPU via kokoro-js — no server, no key.
@@ -211,6 +211,12 @@ export class LocalVoiceProvider implements VoiceProvider {
     const tts = await this.tts.catch(() => null);
     await tts?.model?.dispose().catch(() => {});
     this.tts = null;
+    // The session release resolves before onnxruntime's native worker threads
+    // have fully wound down; a process exit that follows immediately (CLI end,
+    // MCP client close) can race that teardown and abort with a shutdown-time
+    // "libc++abi: mutex lock failed" on macOS (issue #19). Purely cosmetic —
+    // the run already succeeded — but a short grace keeps exits off the race.
+    await sleep(500);
   }
 }
 

package/src/voice.ts

@@ -119,14 +119,70 @@ function buildInstructions(plan: VoicePlan): string {
   return parts.join(" ") || "Clear, friendly, natural narration.";
 }
 
+/**
+ * Kokoro (local TTS) voice ids look like af_heart / am_adam / bf_emma — a
+ * two-letter language+gender prefix and an underscore. No OpenAI voice
+ * contains an underscore, so a storyboard authored for the local provider but
+ * run without AIDEMO_TTS_PROVIDER=local would otherwise reach api.openai.com
+ * and die mid-run on an opaque `400 Invalid value: 'af_heart'` (issue #22).
+ * Catch it up-front, before any scene is synthesized, with the actual fix.
+ * Custom OPENAI_BASE_URL servers are exempt: an OpenAI-compatible Kokoro
+ * server (Kokoro-FastAPI, speaches) legitimately serves these ids.
+ */
+const KOKORO_VOICE_ID_RE = /^[a-z]{2}_[a-z0-9_]+$/;
+
+function assertVoiceIdsMatchProvider(storyboard: Storyboard): void {
+  if (openAiBaseUrl()) return;
+  const offender = storyboard.scenes
+    .map((s) => planFor(storyboard, s.voice).voiceId)
+    .find((v) => KOKORO_VOICE_ID_RE.test(v));
+  if (!offender) return;
+  throw new Error(
+    `voiceId "${offender}" is a Kokoro voice, but the active TTS provider is ` +
+      `OpenAI — the request would fail with "400 Invalid value: '${offender}'". ` +
+      `Run with AIDEMO_TTS_PROVIDER=local (needs: npm install kokoro-js) to ` +
+      `synthesize it in-process, or pick an OpenAI voice (marin, alloy, verse, …). ` +
+      `The provider is selected by the AIDEMO_TTS_PROVIDER env var (or the ` +
+      `--tts flag on voice/render), not by the storyboard.`
+  );
+}
+
 function planFor(storyboard: Storyboard, sceneVoice?: VoicePlan): VoicePlan {
+  const pronounce =
+    storyboard.voice?.pronounce || sceneVoice?.pronounce
+      ? { ...(storyboard.voice?.pronounce ?? {}), ...(sceneVoice?.pronounce ?? {}) }
+      : undefined;
   return {
     voiceId: sceneVoice?.voiceId ?? storyboard.voice?.voiceId ?? "marin",
     instructions: sceneVoice?.instructions ?? storyboard.voice?.instructions,
     speed: sceneVoice?.speed ?? storyboard.voice?.speed,
+    ...(pronounce ? { pronounce } : {}),
   };
 }
 
+/**
+ * Apply `voice.pronounce` to the text handed to TTS: whole-word, case-sensitive
+ * substitutions (longest key first so "SQL Server" wins over "SQL"). The
+ * narration itself — and so the script-timed captions — keeps the written
+ * form; only the spoken audio changes.
+ */
+export function applyPronounce(text: string, map?: Record<string, string>): string {
+  if (!map) return text;
+  const keys = Object.keys(map)
+    .filter((k) => k.trim())
+    .sort((a, b) => b.length - a.length);
+  let out = text;
+  for (const k of keys) {
+    const esc = k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    // Word-ish boundaries that also work for keys with punctuation ("k8s", "C#").
+    out = out.replace(
+      new RegExp(`(^|[^\\p{L}\\p{N}_])${esc}(?=$|[^\\p{L}\\p{N}_])`, "gu"),
+      (_m, pre: string) => `${pre}${map[k]}`
+    );
+  }
+  return out;
+}
+
 /**
  * Identity of a scene's audio = its narration + the resolved voice plan (+ the
  * TTS provider when non-default; for the local provider that includes the
@@ -201,6 +257,7 @@ export async function generateVoice(
   // The audio identity key: local audio also changes with the quantization.
   const providerKey =
     providerName === "local" ? `local:${kokoroDtype()}` : providerName;
+  if (providerName === "openai") assertVoiceIdsMatchProvider(storyboard);
   if (providerName === "local") warnLocalLangCoverage(project.lang);
   const base = openAiBaseUrl();
   step(
@@ -276,7 +333,9 @@ export async function generateVoice(
           scene.narration.length > 48 ? "…" : ""
         }" (${plan.voiceId})`
       );
-      const audio = await provider().synthesize({ text: scene.narration, plan });
+      const spoken = applyPronounce(scene.narration, plan.pronounce);
+      if (spoken !== scene.narration) log(`  pronounce → "${spoken.slice(0, 64)}…"`);
+      const audio = await provider().synthesize({ text: spoken, plan });
       await fs.writeFile(outPath, audio);
       const durationMs = await probeDurationMs(outPath);
       manifest.scenes.push({ id: scene.id, file: outPath, durationMs, hash });

package/src/walkthrough.ts

@@ -0,0 +1,250 @@
+/**
+ * Multi-artifact export from one take: a keyboard-navigable HTML walkthrough
+ * (one card per scene: payoff frame + narration + timestamp), a Markdown
+ * guide (README/SOP-ready), the SRT/VTT captions, and a JSON manifest — all
+ * derived from the FINAL video and compose's report.json, so the frames show
+ * exactly what the video shows (zoom, cursor, overlays, frame). No re-take,
+ * no re-encode: one `ffmpeg -ss` per scene.
+ */
+
+import { promises as fs } from "node:fs";
+import { resolve, isAbsolute, basename } from "node:path";
+import { Project } from "./project.js";
+import { ComposeReportSchema, type Storyboard } from "./types.js";
+import { runFfmpeg } from "./ffmpeg.js";
+import { ensureDir, exists, readJson, writeJson, log, step } from "./util.js";
+
+export interface WalkthroughOptions {
+  /** Output directory. Default <dir>/output/walkthrough (walkthrough.<lang> for variants). */
+  outDir?: string;
+  /** Frame width in px (aspect kept). Default 960. */
+  width?: number;
+}
+
+export interface WalkthroughScene {
+  index: number;
+  id: string;
+  title: string;
+  narration: string;
+  /** Content time in the final video, ms. */
+  startMs: number;
+  endMs: number;
+  /** Frame file (relative to the walkthrough dir). */
+  image: string;
+}
+
+export interface WalkthroughResult {
+  dir: string;
+  index: string;
+  guide: string;
+  manifest: string;
+  scenes: WalkthroughScene[];
+  captions: { srt?: string; vtt?: string };
+}
+
+const esc = (s: string): string =>
+  s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+const mmss = (ms: number): string => {
+  const s = Math.floor(ms / 1000);
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+};
+
+export async function exportWalkthrough(
+  project: Project,
+  storyboard: Storyboard,
+  opts: WalkthroughOptions = {}
+): Promise<WalkthroughResult> {
+  const video = project.outputPath;
+  if (!(await exists(video))) {
+    throw new Error(`no video at ${video} — run 'aidemo render ${project.dir}' (or compose) first`);
+  }
+  if (!(await exists(project.reportPath))) {
+    throw new Error(`no report at ${project.reportPath} — re-run 'aidemo compose ${project.dir}'`);
+  }
+  const report = ComposeReportSchema.parse(await readJson(project.reportPath));
+  const width = Math.max(240, Math.round(opts.width ?? 960));
+  const dir = opts.outDir
+    ? isAbsolute(opts.outDir)
+      ? opts.outDir
+      : resolve(process.cwd(), opts.outDir)
+    : project.p("output", project.lang ? `walkthrough.${project.lang}` : "walkthrough");
+  await ensureDir(dir);
+  step(`Exporting walkthrough (${report.scenes.length} scene(s), ${width}px frames)`);
+
+  const byId = new Map(storyboard.scenes.map((s) => [s.id, s]));
+  const introMs = storyboard.intro?.durationMs ?? 0;
+  const scenes: WalkthroughScene[] = [];
+  let t = introMs;
+  for (let i = 0; i < report.scenes.length; i++) {
+    const r = report.scenes[i];
+    const sb = byId.get(r.id);
+    const startMs = t;
+    const endMs = t + r.targetMs;
+    t = endMs;
+    // Payoff frame: near the end of the scene (actions done, overlays and
+    // holds visible), never the first frames (which still show the previous
+    // screen while a navigation lands).
+    const seekMs = Math.max(startMs, endMs - Math.min(600, Math.max(100, r.targetMs * 0.25)));
+    const image = `scene-${String(i + 1).padStart(2, "0")}-${r.id.replace(/[^\w.-]+/g, "_")}.png`;
+    await runFfmpeg([
+      "-ss",
+      (seekMs / 1000).toFixed(3),
+      "-i",
+      video,
+      "-frames:v",
+      "1",
+      "-vf",
+      `scale=${width}:-2`,
+      "-update",
+      "1",
+      resolve(dir, image),
+    ]);
+    scenes.push({
+      index: i + 1,
+      id: r.id,
+      title: sb?.title ?? r.id,
+      narration: sb?.narration ?? "",
+      startMs,
+      endMs,
+      image,
+    });
+    log(`scene ${r.id}: ${mmss(startMs)} → ${image}`);
+  }
+
+  // Captions travel with the walkthrough (players and LMSs want the files).
+  const captions: { srt?: string; vtt?: string } = {};
+  for (const [key, src] of [
+    ["srt", project.captionsSrtPath],
+    ["vtt", project.captionsVttPath],
+  ] as const) {
+    if (await exists(src)) {
+      const dst = resolve(dir, basename(src));
+      await fs.copyFile(src, dst);
+      captions[key] = dst;
+    }
+  }
+
+  const videoRel = `../${basename(video)}`;
+  const title = storyboard.title;
+  const guide = resolve(dir, "guide.md");
+  await fs.writeFile(
+    guide,
+    [
+      `# ${title}`,
+      "",
+      `Video: [${basename(video)}](${videoRel}) · ${mmss(report.durationMs)}`,
+      "",
+      ...scenes.flatMap((s) => [
+        `## ${s.index}. ${s.title}`,
+        "",
+        `![${s.title}](${s.image})`,
+        "",
+        s.narration,
+        "",
+        `_${mmss(s.startMs)}–${mmss(s.endMs)}_`,
+        "",
+      ]),
+    ].join("\n")
+  );
+
+  const index = resolve(dir, "index.html");
+  await fs.writeFile(index, renderHtml(title, videoRel, scenes, report.durationMs));
+  const manifest = resolve(dir, "walkthrough.json");
+  await writeJson(manifest, {
+    title,
+    video: videoRel,
+    durationMs: report.durationMs,
+    scenes,
+    captions: Object.fromEntries(Object.entries(captions).map(([k, v]) => [k, basename(v)])),
+  });
+  log(`walkthrough → ${index}`);
+  return { dir, index, guide, manifest, scenes, captions };
+}
+
+function renderHtml(
+  title: string,
+  videoRel: string,
+  scenes: WalkthroughScene[],
+  durationMs: number
+): string {
+  const cards = scenes
+    .map(
+      (s) => `
+    <section class="scene" id="s${s.index}" data-start="${(s.startMs / 1000).toFixed(2)}">
+      <img src="${esc(s.image)}" alt="${esc(s.title)}" loading="lazy">
+      <div class="meta">
+        <div class="step">${s.index} / ${scenes.length}</div>
+        <h2>${esc(s.title)}</h2>
+        <p>${esc(s.narration)}</p>
+        <button class="jump" type="button">▶ ${mmss(s.startMs)}</button>
+      </div>
+    </section>`
+    )
+    .join("\n");
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)} — walkthrough</title>
+<style>
+  :root { color-scheme: light dark; --fg: #111; --muted: #666; --bg: #fff; --card: #f6f7f9; --accent: #3b82f6; }
+  @media (prefers-color-scheme: dark) { :root { --fg: #eef; --muted: #aab; --bg: #0e1118; --card: #171b26; } }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
+  header { padding: 24px 24px 8px; max-width: 1100px; margin: 0 auto; }
+  header h1 { margin: 0 0 4px; font-size: 24px; }
+  header .hint { color: var(--muted); font-size: 13px; }
+  video { display: block; width: 100%; max-width: 1100px; margin: 12px auto 24px; border-radius: 10px; background: #000; }
+  main { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; display: grid; gap: 20px; }
+  .scene { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; background: var(--card); border-radius: 12px; padding: 14px; scroll-margin-top: 16px; outline: 2px solid transparent; }
+  .scene.active { outline-color: var(--accent); }
+  .scene img { width: 100%; height: auto; border-radius: 8px; display: block; }
+  .meta { display: flex; flex-direction: column; gap: 6px; }
+  .step { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
+  h2 { margin: 0; font-size: 18px; }
+  p { margin: 0; }
+  .jump { align-self: flex-start; margin-top: auto; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; }
+  @media (max-width: 720px) { .scene { grid-template-columns: 1fr; } }
+</style>
+</head>
+<body>
+<header>
+  <h1>${esc(title)}</h1>
+  <div class="hint">${scenes.length} steps · ${mmss(durationMs)} · ← → to move between steps, Enter to play from a step</div>
+</header>
+<video id="v" src="${esc(videoRel)}" controls preload="metadata"></video>
+<main>${cards}
+</main>
+<script>
+(() => {
+  const v = document.getElementById("v");
+  const scenes = Array.from(document.querySelectorAll(".scene"));
+  let cur = 0;
+  const activate = (i, scroll) => {
+    cur = Math.max(0, Math.min(scenes.length - 1, i));
+    scenes.forEach((s, k) => s.classList.toggle("active", k === cur));
+    if (scroll) scenes[cur].scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+  const play = (i) => { activate(i, false); v.currentTime = Number(scenes[cur].dataset.start || 0); v.play().catch(() => {}); v.scrollIntoView({ behavior: "smooth", block: "start" }); };
+  scenes.forEach((s, i) => { s.addEventListener("click", () => activate(i, false)); s.querySelector(".jump").addEventListener("click", (e) => { e.stopPropagation(); play(i); }); });
+  document.addEventListener("keydown", (e) => {
+    if (e.target && /input|textarea/i.test(e.target.tagName)) return;
+    if (e.key === "ArrowRight" || e.key === "j") { activate(cur + 1, true); e.preventDefault(); }
+    else if (e.key === "ArrowLeft" || e.key === "k") { activate(cur - 1, true); e.preventDefault(); }
+    else if (e.key === "Enter") { play(cur); e.preventDefault(); }
+  });
+  v.addEventListener("timeupdate", () => {
+    const t = v.currentTime;
+    let i = 0;
+    scenes.forEach((s, k) => { if (t >= Number(s.dataset.start || 0)) i = k; });
+    if (i !== cur) activate(i, false);
+  });
+  activate(0, false);
+})();
+</script>
+</body>
+</html>
+`;
+}

package/src/zoom.ts

@@ -1,4 +1,5 @@
 import type { ZoomConfig } from "./types.js";
+import { type Key, piecewiseExpr } from "./expr.js";
 
 /**
  * Screen-Studio-style auto-zoom, rendered at compose time with ffmpeg's
@@ -12,9 +13,37 @@ import type { ZoomConfig } from "./types.js";
  * and in again — the camera stays zoomed and *pans* between them.
  *
  * Everything is emitted as piecewise smoothstep ffmpeg expressions over output
- * time (`on/fps`), one channel each for zoom, center-x and center-y.
+ * time (`on/fps`), one channel each for zoom, center-x and center-y — as a FLAT
+ * gated sum, and simplified to a key budget, because a long take's worth of
+ * focus points overflows ffmpeg's expression parser otherwise (see expr.ts).
  */
 
+/**
+ * Per-channel key budget. zoom/x/y are three INDEPENDENT expressions, so this
+ * is per channel; it is deliberately well under ffmpeg's ~100-term AST cliff
+ * because each term references the time expression three times.
+ */
+const KEY_BUDGET = 56;
+
+/**
+ * Smallest slice of the page, in LOGICAL (storyboard) pixels, that a zoom is
+ * allowed to leave visible horizontally. A scale tuned on a 1440px desktop
+ * viewport crops a 430px mobile take to ribbons — 1.35x cost the question
+ * headline its left edge on every click (issue #38). Anything at or below this
+ * width stops zooming further in.
+ */
+const MIN_VISIBLE_LOGICAL_WIDTH = 360;
+
+/**
+ * Cap `scale` so a zoom never leaves less than MIN_VISIBLE_LOGICAL_WIDTH of the
+ * page in frame. Returns the configured scale unchanged on desktop-width takes.
+ */
+export function clampScaleForWidth(scale: number, logicalWidth: number): number {
+  if (logicalWidth <= 0) return scale;
+  const max = Math.max(1.05, logicalWidth / MIN_VISIBLE_LOGICAL_WIDTH);
+  return Math.min(scale, max);
+}
+
 /** A focus point in FINAL video time, coordinates in output-video pixels. */
 export interface ZoomEvent {
   tMs: number;
@@ -24,11 +53,6 @@ export interface ZoomEvent {
   holdMs?: number;
 }
 
-interface Key {
-  t: number; // seconds
-  v: number;
-}
-
 /** Append a keyframe, nudging time forward to keep the channel monotonic. */
 function pushKey(keys: Key[], t: number, v: number): void {
   const last = keys[keys.length - 1];
@@ -36,34 +60,6 @@ function pushKey(keys: Key[], t: number, v: number): void {
   keys.push({ t, v });
 }
 
-const num = (n: number): string => {
-  const s = n.toFixed(4).replace(/\.?0+$/, "");
-  return s === "" || s === "-" ? "0" : s;
-};
-
-/**
- * Piecewise expression over `T` (a time expression in seconds): holds the
- * first value before the first key, smoothsteps between keys, holds the last
- * value after the last key.
- */
-function piecewise(keys: Key[], T: string): string {
-  let expr = num(keys[keys.length - 1].v);
-  for (let i = keys.length - 2; i >= 0; i--) {
-    const a = keys[i];
-    const b = keys[i + 1];
-    let seg: string;
-    if (a.v === b.v || b.t - a.t < 1e-6) {
-      seg = num(a.v);
-    } else {
-      const p = `((${T}-${num(a.t)})/${num(b.t - a.t)})`;
-      seg = `(${num(a.v)}+(${num(b.v - a.v)})*${p}*${p}*(3-2*${p}))`;
-    }
-    expr = `if(lt(${T},${num(b.t)}),${seg},${expr})`;
-  }
-  // Guard the span before the first key (p would be negative in seg 0).
-  return `if(lt(${T},${num(keys[0].t)}),${num(keys[0].v)},${expr})`;
-}
-
 /**
  * Build the zoom/pan keyframes for all three channels.
  * Exported for tests/debugging; buildZoomFilter is the real entry point.
@@ -147,6 +143,42 @@ export function planZoom(
   return { z, cx, cy };
 }
 
+/**
+ * Plan the zoom, thinning focus events until every channel fits KEY_BUDGET.
+ *
+ * A long take can carry forty-plus focus points, and each one costs a handful
+ * of keys per channel — more than ffmpeg's expression evaluator will take
+ * (see expr.ts). Simplifying the CURVE is the wrong lever here: the zoom
+ * channel is a train of bounces, and smoothing it enough to fit flattens the
+ * zoom out of existence. Dropping whole focus points keeps every surviving
+ * beat at full amplitude, evenly spread across the demo — the same trade the
+ * author would make by hand, and it is logged so it is not a surprise.
+ */
+function planWithinBudget(
+  events: ZoomEvent[],
+  cfg: ZoomConfig,
+  outW: number,
+  outH: number,
+  durMs: number
+): { plan: ReturnType<typeof planZoom>; dropped: number } {
+  let use = events;
+  for (let i = 0; i < 24; i++) {
+    const plan = planZoom(use, cfg, outW, outH, durMs);
+    if (!plan) return { plan, dropped: 0 };
+    const worst = Math.max(plan.z.length, plan.cx.length, plan.cy.length);
+    if (worst <= KEY_BUDGET || use.length <= 2) {
+      return { plan, dropped: events.length - use.length };
+    }
+    // Thin proportionally to the overshoot, keeping an even spread.
+    const keep = Math.max(2, Math.floor((use.length * KEY_BUDGET) / worst));
+    const step = use.length / keep;
+    const next: ZoomEvent[] = [];
+    for (let k = 0; k < keep; k++) next.push(use[Math.floor(k * step)]);
+    use = next;
+  }
+  return { plan: planZoom(use, cfg, outW, outH, durMs), dropped: events.length - use.length };
+}
+
 /**
  * Full `-vf` filter string applying the auto-zoom to a CFR video of
  * outW x outH at `fps`, or null when there is nothing to zoom. For SD-ish
@@ -159,18 +191,32 @@ export function buildZoomFilter(
   outW: number,
   outH: number,
   durMs: number,
-  fps: number
+  fps: number,
+  /** Storyboard (logical) viewport width, for the narrow-viewport scale cap. */
+  logicalWidth = outW,
+  /** Called when focus events had to be thinned to fit the key budget. */
+  onThin?: (dropped: number, total: number) => void
 ): string | null {
-  const plan = planZoom(events, cfg, outW, outH, durMs);
+  const capped: ZoomConfig = {
+    ...cfg,
+    scale: clampScaleForWidth(cfg.scale, logicalWidth),
+  };
+  const clamped = events.map((e) =>
+    e.scale == null
+      ? e
+      : { ...e, scale: clampScaleForWidth(e.scale, logicalWidth) }
+  );
+  const { plan, dropped } = planWithinBudget(clamped, capped, outW, outH, durMs);
   if (!plan) return null;
+  if (dropped > 0) onThin?.(dropped, clamped.length);
 
   const up = outW < 1600 ? 2 : 1;
   const T = `on/${fps}`;
-  const zExpr = piecewise(plan.z, T);
   const scaleKeys = (keys: Key[]): Key[] =>
     keys.map((k) => ({ t: k.t, v: k.v * up }));
-  const cxExpr = piecewise(scaleKeys(plan.cx), T);
-  const cyExpr = piecewise(scaleKeys(plan.cy), T);
+  const zExpr = piecewiseExpr(plan.z, T, "smooth");
+  const cxExpr = piecewiseExpr(scaleKeys(plan.cx), T, "smooth");
+  const cyExpr = piecewiseExpr(scaleKeys(plan.cy), T, "smooth");
 
   const xExpr = `clip(${cxExpr}-(iw/zoom)/2,0,iw-iw/zoom)`;
   const yExpr = `clip(${cyExpr}-(ih/zoom)/2,0,ih-ih/zoom)`;