clipwise 0.7.1 → 0.7.2

package/dist/compose/frame-worker.js

@@ -460,6 +460,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 +531,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 +561,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}"