clipwise 0.2.1 → 0.3.0

package/dist/compose/frame-worker.js

@@ -0,0 +1,649 @@
+// src/compose/frame-worker.ts
+import { parentPort } from "worker_threads";
+
+// src/compose/compose-frame.ts
+import sharp7 from "sharp";
+
+// src/effects/frame.ts
+import sharp from "sharp";
+var TITLE_BAR_HEIGHT = 40;
+var TRAFFIC_LIGHT_Y = 14;
+var TRAFFIC_LIGHT_RADIUS = 6;
+var TRAFFIC_LIGHTS_START_X = 16;
+var TRAFFIC_LIGHT_GAP = 22;
+var ADDRESS_BAR_HEIGHT = 24;
+var ADDRESS_BAR_MARGIN = 70;
+var IPHONE_BEZEL = { sides: 12, top: 50, bottom: 34 };
+var IPHONE_OUTER_RADIUS = 47;
+var IPHONE_INNER_RADIUS = 39;
+var IPHONE_ISLAND = { width: 120, height: 36 };
+var IPHONE_HOME_BAR = { width: 134, height: 5 };
+var IPAD_BEZEL = { sides: 20, top: 24, bottom: 24 };
+var IPAD_OUTER_RADIUS = 18;
+var IPAD_INNER_RADIUS = 12;
+var ANDROID_BEZEL = { sides: 8, top: 32, bottom: 20 };
+var ANDROID_OUTER_RADIUS = 35;
+var ANDROID_INNER_RADIUS = 30;
+var ANDROID_CAMERA_RADIUS = 6;
+function buildBrowserChromeSvg(width, darkMode, dpr = 1) {
+  const bg = darkMode ? "#2d2d2d" : "#e8e8e8";
+  const addressBg = darkMode ? "#1a1a1a" : "#ffffff";
+  const addressBorder = darkMode ? "#444444" : "#d0d0d0";
+  const textColor = darkMode ? "#999999" : "#666666";
+  const tbarH = TITLE_BAR_HEIGHT * dpr;
+  const tlY = TRAFFIC_LIGHT_Y * dpr;
+  const tlR = TRAFFIC_LIGHT_RADIUS * dpr;
+  const tlStartX = TRAFFIC_LIGHTS_START_X * dpr;
+  const tlGap = TRAFFIC_LIGHT_GAP * dpr;
+  const aBarH = ADDRESS_BAR_HEIGHT * dpr;
+  const aBarMargin = ADDRESS_BAR_MARGIN * dpr;
+  const fontSize = 12 * dpr;
+  const trafficLights = [
+    { cx: tlStartX, fill: "#ff5f57" },
+    { cx: tlStartX + tlGap, fill: "#febc2e" },
+    { cx: tlStartX + tlGap * 2, fill: "#28c840" }
+  ].map(
+    (light) => `<circle cx="${light.cx}" cy="${tlY}" r="${tlR}" fill="${light.fill}"/>`
+  ).join("\n    ");
+  const addressBarWidth = width - aBarMargin * 2;
+  const addressBarX = aBarMargin;
+  const addressBarY = (tbarH - aBarH) / 2;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${tbarH}">
+    <rect width="${width}" height="${tbarH}" fill="${bg}"/>
+    ${trafficLights}
+    <rect x="${addressBarX}" y="${addressBarY}" width="${addressBarWidth}" height="${aBarH}"
+          rx="${6 * dpr}" ry="${6 * dpr}" fill="${addressBg}" stroke="${addressBorder}" stroke-width="${dpr}"/>
+    <text x="${width / 2}" y="${tlY + 4 * dpr}" text-anchor="middle"
+          font-family="system-ui, -apple-system, sans-serif" font-size="${fontSize}" fill="${textColor}">
+      localhost
+    </text>
+  </svg>`;
+}
+function buildIPhoneFrameSvg(totalWidth, totalHeight, screenWidth, screenHeight, darkMode, dpr = 1) {
+  const bezelColor = darkMode ? "#1a1a1a" : "#f5f5f7";
+  const islandColor = darkMode ? "#000000" : "#1a1a1a";
+  const homeBarColor = darkMode ? "#555555" : "#333333";
+  const bezelTop = IPHONE_BEZEL.top * dpr;
+  const bezelBottom = IPHONE_BEZEL.bottom * dpr;
+  const bezelSides = IPHONE_BEZEL.sides * dpr;
+  const outerRadius = IPHONE_OUTER_RADIUS * dpr;
+  const innerRadius = IPHONE_INNER_RADIUS * dpr;
+  const islandW = IPHONE_ISLAND.width * dpr;
+  const islandH = IPHONE_ISLAND.height * dpr;
+  const homeBarW = IPHONE_HOME_BAR.width * dpr;
+  const homeBarH = IPHONE_HOME_BAR.height * dpr;
+  const islandX = (totalWidth - islandW) / 2;
+  const islandY = (bezelTop - islandH) / 2 + 4 * dpr;
+  const homeBarX = (totalWidth - homeBarW) / 2;
+  const homeBarY = totalHeight - bezelBottom / 2 - homeBarH / 2;
+  const screenX = bezelSides;
+  const screenY = bezelTop;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${totalWidth}" height="${totalHeight}">
+    <!-- Device body -->
+    <rect width="${totalWidth}" height="${totalHeight}"
+          rx="${outerRadius}" ry="${outerRadius}" fill="${bezelColor}"/>
+    <!-- Screen cutout (transparent) -->
+    <rect x="${screenX}" y="${screenY}" width="${screenWidth}" height="${screenHeight}"
+          rx="${innerRadius}" ry="${innerRadius}" fill="black"/>
+    <!-- Dynamic Island pill -->
+    <rect x="${islandX}" y="${islandY}" width="${islandW}" height="${islandH}"
+          rx="${islandH / 2}" ry="${islandH / 2}" fill="${islandColor}"/>
+    <!-- Home indicator bar -->
+    <rect x="${homeBarX}" y="${homeBarY}" width="${homeBarW}" height="${homeBarH}"
+          rx="${homeBarH / 2}" ry="${homeBarH / 2}" fill="${homeBarColor}"/>
+  </svg>`;
+}
+function buildIPadFrameSvg(totalWidth, totalHeight, screenWidth, screenHeight, darkMode, dpr = 1) {
+  const bezelColor = darkMode ? "#1a1a1a" : "#f5f5f7";
+  const cameraColor = darkMode ? "#2a2a2a" : "#3a3a3a";
+  const screenX = IPAD_BEZEL.sides * dpr;
+  const screenY = IPAD_BEZEL.top * dpr;
+  const cameraCx = totalWidth / 2;
+  const cameraCy = IPAD_BEZEL.top * dpr / 2;
+  const outerRadius = IPAD_OUTER_RADIUS * dpr;
+  const innerRadius = IPAD_INNER_RADIUS * dpr;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${totalWidth}" height="${totalHeight}">
+    <!-- Device body -->
+    <rect width="${totalWidth}" height="${totalHeight}"
+          rx="${outerRadius}" ry="${outerRadius}" fill="${bezelColor}"/>
+    <!-- Screen cutout -->
+    <rect x="${screenX}" y="${screenY}" width="${screenWidth}" height="${screenHeight}"
+          rx="${innerRadius}" ry="${innerRadius}" fill="black"/>
+    <!-- Front camera dot -->
+    <circle cx="${cameraCx}" cy="${cameraCy}" r="${4 * dpr}" fill="${cameraColor}"/>
+  </svg>`;
+}
+function buildAndroidFrameSvg(totalWidth, totalHeight, screenWidth, screenHeight, darkMode, dpr = 1) {
+  const bezelColor = darkMode ? "#1a1a1a" : "#e8e8e8";
+  const cameraColor = darkMode ? "#2a2a2a" : "#3a3a3a";
+  const screenX = ANDROID_BEZEL.sides * dpr;
+  const screenY = ANDROID_BEZEL.top * dpr;
+  const cameraCx = totalWidth / 2;
+  const cameraCy = ANDROID_BEZEL.top * dpr / 2;
+  const outerRadius = ANDROID_OUTER_RADIUS * dpr;
+  const innerRadius = ANDROID_INNER_RADIUS * dpr;
+  const cameraR = ANDROID_CAMERA_RADIUS * dpr;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${totalWidth}" height="${totalHeight}">
+    <!-- Device body -->
+    <rect width="${totalWidth}" height="${totalHeight}"
+          rx="${outerRadius}" ry="${outerRadius}" fill="${bezelColor}"/>
+    <!-- Screen cutout -->
+    <rect x="${screenX}" y="${screenY}" width="${screenWidth}" height="${screenHeight}"
+          rx="${innerRadius}" ry="${innerRadius}" fill="black"/>
+    <!-- Punch-hole camera -->
+    <circle cx="${cameraCx}" cy="${cameraCy}" r="${cameraR}" fill="${cameraColor}"/>
+  </svg>`;
+}
+function buildScreenMaskSvg(width, height, radius) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+    <rect width="${width}" height="${height}" rx="${radius}" ry="${radius}" fill="white"/>
+  </svg>`;
+}
+async function applyMobileFrame(frameBuffer, deviceType, darkMode, frameWidth, frameHeight, dpr = 1) {
+  let bezel;
+  let innerRadius;
+  switch (deviceType) {
+    case "iphone":
+      bezel = {
+        sides: IPHONE_BEZEL.sides * dpr,
+        top: IPHONE_BEZEL.top * dpr,
+        bottom: IPHONE_BEZEL.bottom * dpr
+      };
+      innerRadius = IPHONE_INNER_RADIUS * dpr;
+      break;
+    case "ipad":
+      bezel = {
+        sides: IPAD_BEZEL.sides * dpr,
+        top: IPAD_BEZEL.top * dpr,
+        bottom: IPAD_BEZEL.bottom * dpr
+      };
+      innerRadius = IPAD_INNER_RADIUS * dpr;
+      break;
+    case "android":
+      bezel = {
+        sides: ANDROID_BEZEL.sides * dpr,
+        top: ANDROID_BEZEL.top * dpr,
+        bottom: ANDROID_BEZEL.bottom * dpr
+      };
+      innerRadius = ANDROID_INNER_RADIUS * dpr;
+      break;
+  }
+  const totalWidth = frameWidth + bezel.sides * 2;
+  const totalHeight = frameHeight + bezel.top + bezel.bottom;
+  let frameSvg;
+  switch (deviceType) {
+    case "iphone":
+      frameSvg = buildIPhoneFrameSvg(totalWidth, totalHeight, frameWidth, frameHeight, darkMode, dpr);
+      break;
+    case "ipad":
+      frameSvg = buildIPadFrameSvg(totalWidth, totalHeight, frameWidth, frameHeight, darkMode, dpr);
+      break;
+    case "android":
+      frameSvg = buildAndroidFrameSvg(totalWidth, totalHeight, frameWidth, frameHeight, darkMode, dpr);
+      break;
+  }
+  const maskSvg = buildScreenMaskSvg(frameWidth, frameHeight, innerRadius);
+  const maskedScreen = await sharp(frameBuffer).resize(frameWidth, frameHeight, { fit: "fill" }).composite([
+    {
+      input: Buffer.from(maskSvg),
+      blend: "dest-in"
+    }
+  ]).png().toBuffer();
+  const canvas = await sharp({
+    create: {
+      width: totalWidth,
+      height: totalHeight,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 }
+    }
+  }).png().toBuffer();
+  return sharp(canvas).composite([
+    { input: Buffer.from(frameSvg), left: 0, top: 0 },
+    { input: maskedScreen, left: bezel.sides, top: bezel.top }
+  ]).png().toBuffer();
+}
+async function applyDeviceFrame(frameBuffer, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || config.type === "none") return frameBuffer;
+  switch (config.type) {
+    case "browser": {
+      const tbarH = TITLE_BAR_HEIGHT * dpr;
+      const totalHeight = frameHeight + tbarH;
+      const chromeSvg = buildBrowserChromeSvg(frameWidth, config.darkMode, dpr);
+      const chromeBuffer = Buffer.from(chromeSvg);
+      const canvas = await sharp({
+        create: {
+          width: frameWidth,
+          height: totalHeight,
+          channels: 4,
+          background: { r: 0, g: 0, b: 0, alpha: 0 }
+        }
+      }).png().toBuffer();
+      return sharp(canvas).composite([
+        { input: chromeBuffer, left: 0, top: 0 },
+        { input: frameBuffer, left: 0, top: tbarH }
+      ]).png().toBuffer();
+    }
+    case "iphone":
+    case "ipad":
+    case "android":
+      return applyMobileFrame(frameBuffer, config.type, config.darkMode, frameWidth, frameHeight, dpr);
+    default:
+      return frameBuffer;
+  }
+}
+
+// src/effects/cursor.ts
+import sharp2 from "sharp";
+function buildCursorSvg(size, color) {
+  const s = size;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 24 24" shape-rendering="geometricPrecision">
+    <path d="M4 0 L4 22 L10 16 L16 24 L20 22 L14 14 L22 14 Z"
+          fill="${color}" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
+  </svg>`;
+}
+function buildClickRippleSvg(radius, color, progress) {
+  const currentRadius = radius * progress;
+  const opacity = Math.max(0, 1 - progress);
+  const size = Math.ceil(radius * 2 + 4);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" shape-rendering="geometricPrecision">
+    <circle cx="${size / 2}" cy="${size / 2}" r="${currentRadius}"
+            fill="none" stroke="${color}" stroke-width="2"
+            opacity="${opacity.toFixed(3)}"/>
+    <circle cx="${size / 2}" cy="${size / 2}" r="${currentRadius * 0.6}"
+            fill="${color}" opacity="${(opacity * 0.4).toFixed(3)}"/>
+  </svg>`;
+}
+async function renderCursor(frameBuffer, position, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled) return frameBuffer;
+  const size = Math.round(config.size * dpr);
+  const cursorSvg = buildCursorSvg(size, config.color);
+  const cursorBuffer = Buffer.from(cursorSvg);
+  const left = Math.max(0, Math.min(Math.round(position.x * dpr), frameWidth - 1));
+  const top = Math.max(0, Math.min(Math.round(position.y * dpr), frameHeight - 1));
+  return sharp2(frameBuffer).composite([{ input: cursorBuffer, left, top }]).png().toBuffer();
+}
+async function renderClickEffect(frameBuffer, position, config, progress, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || !config.clickEffect) return frameBuffer;
+  const radius = config.clickRadius * dpr;
+  const clampedProgress = Math.max(0, Math.min(1, progress));
+  const rippleSvg = buildClickRippleSvg(radius, config.clickColor, clampedProgress);
+  const rippleBuffer = Buffer.from(rippleSvg);
+  const rippleSize = Math.ceil(radius * 2 + 4);
+  const px = Math.round(position.x * dpr);
+  const py = Math.round(position.y * dpr);
+  const left = Math.max(0, Math.min(px - Math.round(rippleSize / 2), frameWidth - rippleSize));
+  const top = Math.max(0, Math.min(py - Math.round(rippleSize / 2), frameHeight - rippleSize));
+  return sharp2(frameBuffer).composite([{ input: rippleBuffer, left, top }]).png().toBuffer();
+}
+async function renderCursorHighlight(frameBuffer, position, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || !config.highlight) return frameBuffer;
+  const r = config.highlightRadius * dpr;
+  const size = Math.ceil(r * 2 + 4);
+  const cx = size / 2;
+  const cy = size / 2;
+  const highlightSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" shape-rendering="geometricPrecision">
+    <defs>
+      <radialGradient id="glow">
+        <stop offset="0%" stop-color="${config.highlightColor}" />
+        <stop offset="70%" stop-color="${config.highlightColor}" />
+        <stop offset="100%" stop-color="transparent" />
+      </radialGradient>
+    </defs>
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="url(#glow)" />
+  </svg>`;
+  const px = Math.round(position.x * dpr);
+  const py = Math.round(position.y * dpr);
+  const left = Math.max(0, Math.min(px - Math.round(cx), frameWidth - size));
+  const top = Math.max(0, Math.min(py - Math.round(cy), frameHeight - size));
+  return sharp2(frameBuffer).composite([{ input: Buffer.from(highlightSvg), left, top }]).png().toBuffer();
+}
+async function renderCursorTrail(frameBuffer, positions, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || !config.trail || positions.length < 2) {
+    return frameBuffer;
+  }
+  const segments = [];
+  for (let i = 1; i < positions.length; i++) {
+    const opacity = i / positions.length * 0.6;
+    const strokeWidth = (1 + i / positions.length * 2) * dpr;
+    const p1 = positions[i - 1];
+    const p2 = positions[i];
+    segments.push(
+      `<line x1="${p1.x * dpr}" y1="${p1.y * dpr}" x2="${p2.x * dpr}" y2="${p2.y * dpr}"
+            stroke="${config.trailColor}" stroke-width="${strokeWidth.toFixed(1)}"
+            stroke-linecap="round" opacity="${opacity.toFixed(3)}"/>`
+    );
+  }
+  const trailSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision">
+    ${segments.join("\n    ")}
+  </svg>`;
+  return sharp2(frameBuffer).composite([{ input: Buffer.from(trailSvg), left: 0, top: 0 }]).png().toBuffer();
+}
+
+// src/effects/zoom.ts
+import sharp3 from "sharp";
+async function applyZoom(frameBuffer, focusPoint, scale, frameWidth, frameHeight) {
+  if (scale <= 1) return frameBuffer;
+  const cropWidth = Math.round(frameWidth / scale);
+  const cropHeight = Math.round(frameHeight / scale);
+  let left = Math.round(focusPoint.x - cropWidth / 2);
+  let top = Math.round(focusPoint.y - cropHeight / 2);
+  left = Math.max(0, Math.min(left, frameWidth - cropWidth));
+  top = Math.max(0, Math.min(top, frameHeight - cropHeight));
+  return sharp3(frameBuffer).extract({ left, top, width: cropWidth, height: cropHeight }).resize(frameWidth, frameHeight, { kernel: sharp3.kernel.lanczos3 }).png().toBuffer();
+}
+
+// src/effects/background.ts
+import sharp4 from "sharp";
+function parseGradient(value) {
+  const match = value.match(
+    /linear-gradient\(\s*([\d.]+)deg\s*,\s*(.+)\s*\)/
+  );
+  if (!match) {
+    return { angle: 135, stops: [{ color: value, offset: "100%" }] };
+  }
+  const angle = parseFloat(match[1]);
+  const stopsRaw = match[2].split(",").map((s) => s.trim());
+  const stops = stopsRaw.map((stop) => {
+    const parts = stop.trim().split(/\s+/);
+    return {
+      color: parts[0],
+      offset: parts[1] ?? "0%"
+    };
+  });
+  return { angle, stops };
+}
+function angleToGradientCoords(angle) {
+  const rad = (angle - 90) * Math.PI / 180;
+  const x1 = 50 - Math.cos(rad) * 50;
+  const y1 = 50 - Math.sin(rad) * 50;
+  const x2 = 50 + Math.cos(rad) * 50;
+  const y2 = 50 + Math.sin(rad) * 50;
+  return {
+    x1: `${x1.toFixed(1)}%`,
+    y1: `${y1.toFixed(1)}%`,
+    x2: `${x2.toFixed(1)}%`,
+    y2: `${y2.toFixed(1)}%`
+  };
+}
+function buildBackgroundSvg(config, width, height) {
+  if (config.type === "solid") {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+      <rect width="${width}" height="${height}" fill="${config.value}"/>
+    </svg>`;
+  }
+  const { angle, stops } = parseGradient(config.value);
+  const coords = angleToGradientCoords(angle);
+  const stopElements = stops.map((s) => `<stop offset="${s.offset}" stop-color="${s.color}"/>`).join("\n        ");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+    <defs>
+      <linearGradient id="bg" x1="${coords.x1}" y1="${coords.y1}" x2="${coords.x2}" y2="${coords.y2}">
+        ${stopElements}
+      </linearGradient>
+    </defs>
+    <rect width="${width}" height="${height}" fill="url(#bg)"/>
+  </svg>`;
+}
+async function applyBackground(frameBuffer, config, outputWidth, outputHeight) {
+  const padding = config.padding;
+  const contentWidth = outputWidth - padding * 2;
+  const contentHeight = outputHeight - padding * 2;
+  if (contentWidth <= 0 || contentHeight <= 0) {
+    return frameBuffer;
+  }
+  const resizedFrame = await sharp4(frameBuffer).resize(contentWidth, contentHeight, { fit: "fill" }).png().toBuffer();
+  const bgSvg = buildBackgroundSvg(config, outputWidth, outputHeight);
+  const bgBuffer = Buffer.from(bgSvg);
+  const radius = config.borderRadius;
+  const roundedMask = Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${contentWidth}" height="${contentHeight}">
+      <rect width="${contentWidth}" height="${contentHeight}" rx="${radius}" ry="${radius}" fill="#ffffff"/>
+    </svg>`
+  );
+  const maskedFrame = await sharp4(resizedFrame).composite([
+    {
+      input: roundedMask,
+      blend: "dest-in"
+    }
+  ]).png().toBuffer();
+  const composites = [];
+  if (config.shadow) {
+    const shadowSvg = Buffer.from(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${outputWidth}" height="${outputHeight}">
+        <defs>
+          <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+            <feDropShadow dx="0" dy="4" stdDeviation="16" flood-color="rgba(0,0,0,0.3)"/>
+          </filter>
+        </defs>
+        <rect x="${padding}" y="${padding}" width="${contentWidth}" height="${contentHeight}"
+              rx="${radius}" ry="${radius}" fill="rgba(0,0,0,0.15)" filter="url(#shadow)"/>
+      </svg>`
+    );
+    composites.push({ input: shadowSvg, left: 0, top: 0 });
+  }
+  composites.push({ input: maskedFrame, left: padding, top: padding });
+  return sharp4(bgBuffer).resize(outputWidth, outputHeight).composite(composites).png().toBuffer();
+}
+
+// src/effects/keystroke.ts
+import sharp5 from "sharp";
+async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, config, frameWidth, frameHeight, dpr = 1) {
+  if (!config.enabled || keystrokes.length === 0) return frameBuffer;
+  const recentKeys = keystrokes.filter(
+    (k) => frameTimestamp - k.timestamp < config.fadeAfter
+  );
+  if (recentKeys.length === 0) return frameBuffer;
+  const displayText = recentKeys.map((k) => k.key).join("");
+  if (displayText.length === 0) return frameBuffer;
+  const fontSize = config.fontSize * dpr;
+  const padding = config.padding * dpr;
+  const charWidth = fontSize * 0.62;
+  const textWidth = Math.ceil(displayText.length * charWidth);
+  const hudPadH = padding * 2;
+  const hudPadV = padding * 1.5;
+  const hudWidth = Math.min(textWidth + hudPadH * 2, frameWidth - 40 * dpr);
+  const hudHeight = Math.ceil(fontSize + hudPadV * 2);
+  const newest = recentKeys[recentKeys.length - 1];
+  const age = frameTimestamp - newest.timestamp;
+  const fadeStart = config.fadeAfter * 0.6;
+  const opacity = age > fadeStart ? Math.max(0, 1 - (age - fadeStart) / (config.fadeAfter - fadeStart)) : 1;
+  if (opacity <= 0) return frameBuffer;
+  const margin = 30 * dpr;
+  let hudX;
+  const hudY = frameHeight - hudHeight - margin;
+  switch (config.position) {
+    case "bottom-left":
+      hudX = margin;
+      break;
+    case "bottom-right":
+      hudX = frameWidth - hudWidth - margin;
+      break;
+    case "bottom-center":
+    default:
+      hudX = Math.round((frameWidth - hudWidth) / 2);
+      break;
+  }
+  const maxChars = Math.floor((hudWidth - hudPadH * 2) / charWidth);
+  const truncated = displayText.length > maxChars ? displayText.slice(-maxChars) : displayText;
+  const escaped = truncated.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const hudSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <rect x="${hudX}" y="${hudY}" width="${hudWidth}" height="${hudHeight}"
+          rx="${8 * dpr}" ry="${8 * dpr}" fill="${config.backgroundColor}" opacity="${opacity.toFixed(3)}" />
+    <text x="${hudX + hudPadH}" y="${hudY + hudPadV + fontSize * 0.75}"
+          font-family="monospace, Menlo, Consolas" font-size="${fontSize}"
+          fill="${config.textColor}" opacity="${opacity.toFixed(3)}">${escaped}</text>
+  </svg>`;
+  return sharp5(frameBuffer).composite([{ input: Buffer.from(hudSvg), left: 0, top: 0 }]).png().toBuffer();
+}
+
+// src/effects/watermark.ts
+import sharp6 from "sharp";
+async function renderWatermark(frameBuffer, config, frameWidth, frameHeight) {
+  if (!config.enabled || !config.text) return frameBuffer;
+  const charWidth = config.fontSize * 0.62;
+  const textWidth = Math.ceil(config.text.length * charWidth);
+  const margin = 16;
+  let x;
+  let y;
+  switch (config.position) {
+    case "top-left":
+      x = margin;
+      y = margin + config.fontSize;
+      break;
+    case "top-right":
+      x = frameWidth - textWidth - margin;
+      y = margin + config.fontSize;
+      break;
+    case "bottom-left":
+      x = margin;
+      y = frameHeight - margin;
+      break;
+    case "bottom-right":
+    default:
+      x = frameWidth - textWidth - margin;
+      y = frameHeight - margin;
+      break;
+  }
+  const escaped = config.text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const watermarkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <text x="${x}" y="${y}"
+          font-family="system-ui, -apple-system, sans-serif" font-size="${config.fontSize}"
+          font-weight="600" fill="${config.color}"
+          opacity="${config.opacity.toFixed(3)}">${escaped}</text>
+  </svg>`;
+  return sharp6(frameBuffer).composite([{ input: Buffer.from(watermarkSvg), left: 0, top: 0 }]).png().toBuffer();
+}
+
+// src/compose/compose-frame.ts
+function getFrameOffset(config, dpr = 1) {
+  if (!config.enabled) return { left: 0, top: 0 };
+  switch (config.type) {
+    case "browser":
+      return { left: 0, top: 40 * dpr };
+    case "iphone":
+      return { left: 12 * dpr, top: 50 * dpr };
+    case "ipad":
+      return { left: 20 * dpr, top: 24 * dpr };
+    case "android":
+      return { left: 8 * dpr, top: 32 * dpr };
+    default:
+      return { left: 0, top: 0 };
+  }
+}
+async function composeFrame(frame, effects, output, context) {
+  let buffer = frame.screenshot;
+  const meta = await sharp7(buffer).metadata();
+  let width = meta.width ?? frame.viewport.width;
+  let height = meta.height ?? frame.viewport.height;
+  const dpr = Math.round(width / frame.viewport.width);
+  const ctx = {
+    zoomScale: context?.zoomScale ?? 1,
+    clickProgress: context?.clickProgress ?? null,
+    cursorTrail: context?.cursorTrail ?? []
+  };
+  if (effects.deviceFrame.enabled) {
+    buffer = await applyDeviceFrame(buffer, effects.deviceFrame, width, height, dpr);
+    const meta2 = await sharp7(buffer).metadata();
+    width = meta2.width ?? width;
+    height = meta2.height ?? height;
+  }
+  if (effects.cursor.enabled && effects.cursor.highlight && frame.cursorPosition) {
+    buffer = await renderCursorHighlight(
+      buffer,
+      frame.cursorPosition,
+      effects.cursor,
+      width,
+      height,
+      dpr
+    );
+  }
+  if (effects.cursor.enabled && effects.cursor.trail && ctx.cursorTrail.length >= 2) {
+    buffer = await renderCursorTrail(
+      buffer,
+      ctx.cursorTrail,
+      effects.cursor,
+      width,
+      height,
+      dpr
+    );
+  }
+  if (effects.cursor.enabled && frame.cursorPosition) {
+    buffer = await renderCursor(
+      buffer,
+      frame.cursorPosition,
+      effects.cursor,
+      width,
+      height,
+      dpr
+    );
+  }
+  if (effects.cursor.enabled && effects.cursor.clickEffect && frame.clickPosition) {
+    const progress = ctx.clickProgress ?? frame.clickProgress ?? 0.5;
+    buffer = await renderClickEffect(
+      buffer,
+      frame.clickPosition,
+      effects.cursor,
+      progress,
+      width,
+      height,
+      dpr
+    );
+  }
+  if (effects.keystroke.enabled && frame.keystrokes) {
+    buffer = await renderKeystrokeHud(
+      buffer,
+      frame.keystrokes,
+      frame.timestamp,
+      effects.keystroke,
+      width,
+      height,
+      dpr
+    );
+  }
+  const scale = ctx.zoomScale;
+  if (effects.zoom.enabled && scale > 1) {
+    const rawFocus = frame.clickPosition ?? frame.cursorPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 };
+    const offset = getFrameOffset(effects.deviceFrame, dpr);
+    const focusPoint = {
+      x: rawFocus.x * dpr + offset.left,
+      y: rawFocus.y * dpr + offset.top
+    };
+    buffer = await applyZoom(buffer, focusPoint, scale, width, height);
+  }
+  buffer = await applyBackground(buffer, effects.background, output.width, output.height);
+  if (effects.watermark.enabled) {
+    buffer = await renderWatermark(buffer, effects.watermark, output.width, output.height);
+  }
+  buffer = await sharp7(buffer).resize(output.width, output.height, {
+    fit: "fill",
+    kernel: sharp7.kernel.lanczos3
+  }).png().toBuffer();
+  return { index: frame.index, buffer, timestamp: frame.timestamp };
+}
+
+// src/compose/frame-worker.ts
+parentPort.on("message", async (msg) => {
+  try {
+    const { taskId, frame, effects, output, context } = msg;
+    const frameWithBuffer = {
+      ...frame,
+      screenshot: Buffer.from(frame.screenshot)
+    };
+    const result = await composeFrame(frameWithBuffer, effects, output, context);
+    const reply = {
+      taskId,
+      index: result.index,
+      timestamp: result.timestamp,
+      buffer: result.buffer
+    };
+    parentPort.postMessage(reply);
+  } catch (err) {
+    const reply = {
+      taskId: msg.taskId,
+      index: msg.frame.index,
+      timestamp: msg.frame.timestamp,
+      buffer: Buffer.alloc(0),
+      error: err instanceof Error ? err.message : String(err)
+    };
+    parentPort.postMessage(reply);
+  }
+});