clipwise 0.7.1 → 0.9.0

package/dist/compose/frame-worker.js

@@ -7,13 +7,11 @@ 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 TITLE_BAR_HEIGHT = 48;
+var TRAFFIC_LIGHT_RADIUS = 6.5;
+var TRAFFIC_LIGHTS_START_X = 22;
+var TRAFFIC_LIGHT_GAP = 20;
+var URL_PILL_HEIGHT = 30;
 var IPHONE_BEZEL = { sides: 12, top: 50, bottom: 34 };
 var IPHONE_OUTER_RADIUS = 47;
 var IPHONE_INNER_RADIUS = 39;
@@ -26,38 +24,89 @@ 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;
+function buildBrowserChromeSvg(width, darkMode, dpr = 1, url = "localhost") {
+  const c = darkMode ? {
+    bgTop: "#3c3c3e",
+    bgBottom: "#343436",
+    border: "#232325",
+    pillBg: "#28282a",
+    pillBorder: "#48484b",
+    text: "#d8d8da",
+    icon: "#a8a8ac",
+    iconDim: "#5f5f63"
+  } : {
+    bgTop: "#f8f7f6",
+    bgBottom: "#eeedeb",
+    border: "#d8d6d3",
+    pillBg: "#ffffff",
+    pillBorder: "#dedcd9",
+    text: "#3a3a3c",
+    icon: "#6f6f72",
+    iconDim: "#bdbdc0"
+  };
+  const h = TITLE_BAR_HEIGHT * dpr;
+  const midY = h / 2;
   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 s = 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}"/>
+    { cx: tlStartX, fill: "#ff5f57", stroke: "#e0443e" },
+    { cx: tlStartX + tlGap, fill: "#febc2e", stroke: "#d89e24" },
+    { cx: tlStartX + tlGap * 2, fill: "#28c840", stroke: "#1ea133" }
+  ].map((l) => `<circle cx="${l.cx}" cy="${midY}" r="${tlR}" fill="${l.fill}" stroke="${l.stroke}" stroke-width="${0.5 * s}"/>`).join("\n    ");
+  const navX = tlStartX + tlGap * 2 + 34 * s;
+  const back = `<path d="M ${navX + 4 * s} ${midY - 6 * s} l ${-6 * s} ${6 * s} l ${6 * s} ${6 * s}"
+      fill="none" stroke="${c.icon}" stroke-width="${1.8 * s}" stroke-linecap="round" stroke-linejoin="round"/>`;
+  const fwdX = navX + 28 * s;
+  const forward = `<path d="M ${fwdX - 4 * s} ${midY - 6 * s} l ${6 * s} ${6 * s} l ${-6 * s} ${6 * s}"
+      fill="none" stroke="${c.iconDim}" stroke-width="${1.8 * s}" stroke-linecap="round" stroke-linejoin="round"/>`;
+  const relX = fwdX + 28 * s;
+  const reload = `<path d="M ${relX + 6 * s} ${midY - 3.5 * s} a ${6 * s} ${6 * s} 0 1 0 ${1.2 * s} ${5.5 * s}"
+      fill="none" stroke="${c.icon}" stroke-width="${1.7 * s}" stroke-linecap="round"/>
+    <path d="M ${relX + 6.4 * s} ${midY - 7.5 * s} l ${0.4 * s} ${4.6 * s} l ${-4.6 * s} ${-0.4 * s} z" fill="${c.icon}"/>`;
+  const fontSize = 12.5 * dpr;
+  const pillH = URL_PILL_HEIGHT * dpr;
+  const pillW = Math.max(200 * s, Math.min(width * 0.42, 520 * s));
+  const pillX = (width - pillW) / 2;
+  const pillY = midY - pillH / 2;
+  const textW = url.length * fontSize * 0.56;
+  const lockX = width / 2 - textW / 2 - 16 * s;
+  const lockY = midY - 5 * s;
+  const padlock = `
+    <rect x="${lockX}" y="${lockY + 4 * s}" width="${9 * s}" height="${7 * s}" rx="${1.5 * s}" fill="${c.icon}"/>
+    <path d="M ${lockX + 2 * s} ${lockY + 4 * s} v ${-2 * s} a ${2.5 * s} ${2.5 * s} 0 0 1 ${5 * s} 0 v ${2 * s}"
+      fill="none" stroke="${c.icon}" stroke-width="${1.4 * s}"/>`;
+  const dotsX = width - 26 * s;
+  const dots = [-4.5, 0, 4.5].map((dy) => `<circle cx="${dotsX}" cy="${midY + dy * s}" r="${1.6 * s}" fill="${c.icon}"/>`).join("");
+  const avatar = `
+    <circle cx="${width - 56 * s}" cy="${midY}" r="${11 * s}" fill="url(#cwAvatar)"/>
+    <text x="${width - 56 * s}" y="${midY + 4 * s}" text-anchor="middle"
+      font-family="system-ui, -apple-system, sans-serif" font-size="${10.5 * dpr}" font-weight="600" fill="#ffffff">S</text>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${h}">
+    <defs>
+      <linearGradient id="cwChromeBg" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0" stop-color="${c.bgTop}"/>
+        <stop offset="1" stop-color="${c.bgBottom}"/>
+      </linearGradient>
+      <linearGradient id="cwAvatar" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0" stop-color="#818cf8"/>
+        <stop offset="1" stop-color="#6366f1"/>
+      </linearGradient>
+    </defs>
+    <rect width="${width}" height="${h}" fill="url(#cwChromeBg)"/>
+    <rect y="${h - s}" width="${width}" height="${s}" fill="${c.border}"/>
     ${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>
+    ${back}
+    ${forward}
+    ${reload}
+    <rect x="${pillX}" y="${pillY}" width="${pillW}" height="${pillH}"
+          rx="${pillH / 2}" ry="${pillH / 2}" fill="${c.pillBg}" stroke="${c.pillBorder}" stroke-width="${s}"/>
+    ${padlock}
+    <text x="${width / 2 + 7 * s}" y="${midY + fontSize * 0.35}" text-anchor="middle"
+          font-family="system-ui, -apple-system, sans-serif" font-size="${fontSize}" fill="${c.text}">${url}</text>
+    ${dots}
+    ${avatar}
   </svg>`;
 }
 function buildIPhoneFrameSvg(totalWidth, totalHeight, screenWidth, screenHeight, darkMode, dpr = 1) {
@@ -203,9 +252,9 @@ async function applyMobileFrame(frameBuffer, deviceType, darkMode, frameWidth, f
     { input: maskedScreen, left: bezel.sides, top: bezel.top }
   ]).png().toBuffer();
 }
-async function buildBrowserChromeBuffer(viewportWidth, darkMode, dpr = 1) {
+async function buildBrowserChromeBuffer(viewportWidth, darkMode, dpr = 1, url = "localhost") {
   const tbarH = TITLE_BAR_HEIGHT * dpr;
-  const chromeSvg = buildBrowserChromeSvg(viewportWidth, darkMode, dpr);
+  const chromeSvg = buildBrowserChromeSvg(viewportWidth, darkMode, dpr, url);
   return sharp(Buffer.from(chromeSvg)).resize(viewportWidth, tbarH).png().toBuffer();
 }
 async function applyDeviceFrame(frameBuffer, config, frameWidth, frameHeight, dpr = 1) {
@@ -214,7 +263,7 @@ async function applyDeviceFrame(frameBuffer, config, frameWidth, frameHeight, dp
     case "browser": {
       const tbarH = TITLE_BAR_HEIGHT * dpr;
       const totalHeight = frameHeight + tbarH;
-      const chromeSvg = buildBrowserChromeSvg(frameWidth, config.darkMode, dpr);
+      const chromeSvg = buildBrowserChromeSvg(frameWidth, config.darkMode, dpr, config.url);
       const chromeBuffer = Buffer.from(chromeSvg);
       const canvas = await sharp({
         create: {
@@ -460,6 +509,44 @@ import sharp5 from "sharp";
 function escapeXml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function isCJK(ch) {
+  const code = ch.codePointAt(0) ?? 0;
+  return code >= 4352 && code <= 4607 || // 한글 자모
+  code >= 11904 && code <= 40959 || // CJK 부수, 한자
+  code >= 44032 && code <= 55215 || // 한글 음절
+  code >= 63744 && code <= 64255 || // CJK 호환 한자
+  code >= 65072 && code <= 65103 || // CJK 호환 형태
+  code >= 65280 && code <= 65519 || // Full-width 문자
+  code >= 12288 && code <= 12543 || // CJK 기호, 히라가나, 가타카나
+  code >= 12784 && code <= 12799 || // 가타카나 확장
+  code >= 131072 && code <= 195103;
+}
+function displayWidth(text) {
+  let w = 0;
+  for (const ch of text) {
+    w += isCJK(ch) ? 1.7 : 1;
+  }
+  return w;
+}
+function wrapText(text, maxWidth) {
+  if (displayWidth(text) <= maxWidth) return [text];
+  const lines = [];
+  let current = "";
+  let currentWidth = 0;
+  for (const ch of text) {
+    const chWidth = isCJK(ch) ? 1.7 : 1;
+    if (currentWidth + chWidth > maxWidth && current.length > 0) {
+      lines.push(current);
+      current = ch;
+      currentWidth = chWidth;
+    } else {
+      current += ch;
+      currentWidth += chWidth;
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  return lines;
+}
 function buildSessions(keystrokes) {
   const hasSessionIds = keystrokes.some((k) => k.sessionId !== void 0);
   if (!hasSessionIds) {
@@ -493,16 +580,22 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
   const lineGap = Math.round(fontSize * 0.45);
   const charWidth = fontSize * 0.615;
   const maxHudWidth = frameWidth - 60 * dpr;
-  const maxCharsPerLine = Math.max(10, Math.floor((maxHudWidth - hudPadH * 2) / charWidth));
-  const lines = sessions.map(
-    (text) => text.length > maxCharsPerLine ? text.slice(-maxCharsPerLine) : text
-  );
-  const maxLineLen = Math.max(...lines.map((l) => l.length));
+  const maxDisplayWidth = Math.max(10, (maxHudWidth - hudPadH * 2) / charWidth);
+  const wrappedLines = [];
+  sessions.forEach((text, sIdx) => {
+    const wrapped = wrapText(text, maxDisplayWidth);
+    for (const line of wrapped) {
+      wrappedLines.push({ text: line, sessionIdx: sIdx });
+    }
+  });
+  const lines = wrappedLines.map((l) => l.text);
+  const totalLineCount = lines.length;
+  const maxLineDisplayWidth = Math.max(...lines.map((l) => displayWidth(l)));
   const hudWidth = Math.min(
-    Math.ceil(maxLineLen * charWidth) + hudPadH * 2,
+    Math.ceil(maxLineDisplayWidth * charWidth) + hudPadH * 2,
     maxHudWidth
   );
-  const hudHeight = Math.ceil(fontSize * lineCount + lineGap * (lineCount - 1) + hudPadV * 2);
+  const hudHeight = Math.ceil(fontSize * totalLineCount + lineGap * (totalLineCount - 1) + hudPadV * 2);
   const margin = 30 * dpr;
   const hudY = frameHeight - hudHeight - margin;
   let hudX;
@@ -517,18 +610,20 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
     default:
       hudX = Math.round((frameWidth - hudWidth) / 2);
   }
-  const LINE_OPACITY_FACTORS = [0.45, 0.7, 1];
-  const opacityFactors = LINE_OPACITY_FACTORS.slice(-lineCount);
+  const SESSION_OPACITY_FACTORS = [0.45, 0.7, 1];
+  const sessionOpacities = SESSION_OPACITY_FACTORS.slice(-lineCount);
   const rx = (8 * dpr).toFixed(1);
   const boxOp = (globalOpacity * 0.92).toFixed(3);
   const textX = hudX + hudPadH;
   const baselineY = hudY + hudPadV + fontSize * 0.82;
-  const textElements = lines.map((line, i) => {
-    const op = (globalOpacity * opacityFactors[i]).toFixed(3);
+  const textElements = wrappedLines.map(({ text, sessionIdx }, i) => {
+    const sessionPos = sessions.length <= 3 ? sessionIdx : sessionIdx - (sessions.length - 3);
+    const opFactor = sessionOpacities[Math.max(0, sessionPos)] ?? 1;
+    const op = (globalOpacity * opFactor).toFixed(3);
     const lineY = baselineY + i * (fontSize + lineGap);
     return `<text x="${textX}" y="${lineY}"
           font-family="monospace, Menlo, Consolas" font-size="${fontSize}"
-          fill="${config.textColor}" opacity="${op}">${escapeXml(line)}</text>`;
+          fill="${config.textColor}" opacity="${op}">${escapeXml(text)}</text>`;
   }).join("\n    ");
   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}"
@@ -597,7 +692,8 @@ async function buildStaticLayers(effects, output, viewportWidth, dpr) {
     browserChromePng = await buildBrowserChromeBuffer(
       viewportWidth,
       effects.deviceFrame.darkMode,
-      dpr
+      dpr,
+      effects.deviceFrame.url
     );
   }
   return {