@skrillex1224/playwright-toolkit 2.1.208 → 2.1.210

package/dist/index.cjs

@@ -4549,7 +4549,7 @@ var Logger = {
 var import_delay2 = __toESM(require("delay"), 1);
 
 // src/internals/watermarkify.js
-var SCREENSHOT_WATERMARKIFY_HOST_ID = "__pk_screenshot_watermarkify__";
+var import_sharp = __toESM(require("sharp"), 1);
 var DEFAULT_TIMEZONE_OFFSET = 8;
 var DEFAULT_RESOLVER_TIMEOUT_MS = 180;
 var DEFAULT_IP_LOOKUP_TIMEOUT_MS = 1e4;
@@ -4560,6 +4560,11 @@ var DEFAULT_WATERMARK_CELL_HEIGHT = 330;
 var DEFAULT_STRIP_LOGO_URL = "https://static.heartbitai.com/geo/icon/favicon.png";
 var DEFAULT_IP_LOOKUP_URL = "http://myip.ipip.net";
 var DEFAULT_LOGO_FETCH_TIMEOUT_MS = 2500;
+var DEFAULT_STRIP_HEIGHT = 78;
+var DEFAULT_STRIP_PADDING_LEFT = 20;
+var DEFAULT_STRIP_PADDING_RIGHT = 22;
+var DEFAULT_STRIP_GAP = 16;
+var DEFAULT_STRIP_LABEL_WIDTH = 56;
 var WEAK_LOCATION_VALUES = /* @__PURE__ */ new Set(["cn", "\u4E2D\u56FD"]);
 var LOCATION_NETWORK_SUFFIX_PATTERNS = [
   /(?:中国)?移动$/i,
@@ -4595,13 +4600,6 @@ var shortenTail = (value, maxLen = 80) => {
   if (!text || text.length <= maxLen) return text;
   return `${text.slice(0, Math.max(0, maxLen - 1)).trimEnd()}\u2026`;
 };
-var shortenMiddle = (value, maxLen = 56, headLen = 32, tailLen = 14) => {
-  const text = toInline(value, Math.max(maxLen * 2, maxLen + headLen + tailLen));
-  if (!text || text.length <= maxLen) return text;
-  const safeHeadLen = Math.max(4, Math.min(headLen, maxLen - 5));
-  const safeTailLen = Math.max(4, Math.min(tailLen, maxLen - safeHeadLen - 1));
-  return `${text.slice(0, safeHeadLen).trimEnd()}\u2026${text.slice(-safeTailLen).trimStart()}`;
-};
 var padDatePart = (value) => String(value).padStart(2, "0");
 var formatUtcOffsetLabel = (offsetHours = DEFAULT_TIMEZONE_OFFSET) => {
   const sign = offsetHours >= 0 ? "+" : "-";
@@ -4777,8 +4775,8 @@ var resolveWithCustomResolver = async (page, baseMeta, options = {}) => {
         url: baseMeta.url,
         hostname: baseMeta.hostname,
         title: baseMeta.title,
+        prompt: baseMeta.prompt,
         query: baseMeta.query,
-        taskId: baseMeta.taskId,
         serverAddr,
         signal: controller?.signal
       })).catch(() => null),
@@ -4914,22 +4912,23 @@ var resolveEnrichment = async (page, baseMeta, options) => {
   }
   return merged;
 };
-var buildWatermarkStamp = ({ taskId, captureTime, ip, location }) => {
+var buildWatermarkStamp = ({ prompt, captureTime, ip, location }) => {
   const parts = [
-    `TaskID ${shortenMiddle(taskId, 56, 24, 16) || "-"}`,
+    `Prompt ${shortenTail(prompt, 40) || "-"}`,
     `Time ${captureTime}`,
     `Loc ${shortenTail(location, 20) || "-"}`,
     `IP ${toInline(ip, 24) || "-"}`
   ];
   return parts.join(" | ");
 };
-var buildStripSegments = ({ taskId, captureTime, ip, location }) => {
+var buildStripSegments = ({ prompt, captureTime, ip, location }) => {
+  const promptValue = toInline(prompt, 240) || "-";
   return [
     {
-      kind: "taskId",
-      label: "TaskID",
-      value: toInline(taskId, 240) || "-",
-      rawValue: toInline(taskId, 240) || "-"
+      kind: "prompt",
+      label: "Prompt",
+      value: promptValue,
+      rawValue: promptValue
     },
     {
       kind: "time",
@@ -4951,14 +4950,58 @@ var buildStripSegments = ({ taskId, captureTime, ip, location }) => {
     }
   ];
 };
+var escapeXml = (value) => String(value || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var estimateTextWidth = (value, fontSize = 16) => {
+  const text = String(value || "");
+  let width = 0;
+  for (const char of text) {
+    if (/\s/.test(char)) {
+      width += fontSize * 0.34;
+    } else if (/[\u4e00-\u9fff\u3400-\u4dbf\u3040-\u30ff\uac00-\ud7af]/.test(char)) {
+      width += fontSize * 0.92;
+    } else if (/[A-Z0-9]/.test(char)) {
+      width += fontSize * 0.62;
+    } else {
+      width += fontSize * 0.56;
+    }
+  }
+  return Math.ceil(width);
+};
+var fitTextToWidth = (value, maxWidth, fontSize = 16) => {
+  const text = normalizeWhitespace(value);
+  if (!text) return "-";
+  const safeMaxWidth = Math.max(fontSize * 3, Number(maxWidth) || 0);
+  if (estimateTextWidth(text, fontSize) <= safeMaxWidth) {
+    return text;
+  }
+  const ellipsis = "\u2026";
+  const ellipsisWidth = estimateTextWidth(ellipsis, fontSize);
+  let current = "";
+  for (const char of text) {
+    const next = current + char;
+    if (estimateTextWidth(next, fontSize) + ellipsisWidth > safeMaxWidth) {
+      break;
+    }
+    current = next;
+  }
+  return `${current.trimEnd()}${ellipsis}`;
+};
+var resolvePromptFields = (options = {}, fallbackTitle = "") => {
+  const query = normalizeText(options.query);
+  const prompt = normalizeText(options.prompt) || query || normalizeText(fallbackTitle) || "\u672A\u63D0\u4F9B Prompt";
+  return {
+    prompt,
+    query: query || prompt
+  };
+};
 var createBaseWatermarkifyOptions = () => ({
   enabled: true,
   timezoneOffsetHours: DEFAULT_TIMEZONE_OFFSET,
   response: null,
   ip: "",
   location: "",
+  prompt: "",
   query: "",
-  taskId: "",
   ipLookup: true,
   ipLookupTimeoutMs: DEFAULT_IP_LOOKUP_TIMEOUT_MS,
   resolver: null,
@@ -5001,8 +5044,8 @@ var normalizeScreenshotWatermarkify = (value) => {
     response: source.response ?? null,
     ip: normalizeText(source.ip),
     location: normalizeText(source.location),
-    query: toInline(source.query, 140),
-    taskId: toInline(source.taskId, 120),
+    prompt: toInline(source.prompt, 220),
+    query: toInline(source.query, 220),
     ipLookup: source.ipLookup !== false,
     ipLookupTimeoutMs: Number.isFinite(ipLookupTimeoutMsRaw) ? ipLookupTimeoutMsRaw : DEFAULT_IP_LOOKUP_TIMEOUT_MS,
     resolver: typeof source.resolver === "function" ? source.resolver : null,
@@ -5021,16 +5064,16 @@ var resolveScreenshotWatermarkifyMeta = async (page, options = {}) => {
   const url = normalizeText(page?.url?.()) || "about:blank";
   const title = normalizeText(await page.title().catch(() => "")) || "\u672A\u547D\u540D\u9875\u9762";
   const hostname = getHostname(url);
-  const query = normalizeText(options.query) || title || "\u672A\u63D0\u4F9B Query";
-  const taskId = normalizeText(options.taskId) || "-";
-  const captureTime = formatTimestampForUtcOffset(/* @__PURE__ */ new Date(), timezoneOffsetHours);
+  const { prompt, query } = resolvePromptFields(options, title);
+  const capturedAt = options.capturedAt instanceof Date ? options.capturedAt : new Date(options.capturedAt || Date.now());
+  const captureTime = formatTimestampForUtcOffset(capturedAt, timezoneOffsetHours);
   const [enrichment, stripLogoSrc] = await Promise.all([
     resolveEnrichment(page, {
       url,
       hostname,
       title,
-      query,
-      taskId
+      prompt,
+      query
     }, options),
     resolveStripLogoSrc()
   ]);
@@ -5038,13 +5081,13 @@ var resolveScreenshotWatermarkifyMeta = async (page, options = {}) => {
   const location = enrichment.location || "-";
   return {
     watermarkText: buildWatermarkStamp({
-      taskId,
+      prompt,
       captureTime,
       ip,
       location
     }),
     stripSegments: buildStripSegments({
-      taskId,
+      prompt,
       captureTime,
       ip,
       location
@@ -5054,395 +5097,199 @@ var resolveScreenshotWatermarkifyMeta = async (page, options = {}) => {
     stripLogoSrc
   };
 };
-var installScreenshotWatermarkify = async (page, meta) => {
+var buildFontFamily = () => 'MiSans, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif';
+var buildStripSegmentLayouts = (segments, contentWidth) => {
+  const safeSegments = Array.isArray(segments) ? segments : [];
+  const sectionGap = DEFAULT_STRIP_GAP + 16;
+  const labelWidth = DEFAULT_STRIP_LABEL_WIDTH;
+  const promptFontSize = 15;
+  const otherFontSizes = {
+    time: 17,
+    location: 17,
+    ip: 17
+  };
+  const maxValueWidths = {
+    time: 290,
+    location: 220,
+    ip: 160
+  };
+  const promptSegment = safeSegments.find((segment) => segment?.kind === "prompt") || null;
+  const fixedSegments = safeSegments.filter((segment) => segment?.kind !== "prompt");
+  const fixedLayouts = fixedSegments.map((segment) => {
+    const fontSize = otherFontSizes[segment.kind] || 17;
+    const maxValueWidth = maxValueWidths[segment.kind] || 220;
+    const renderValue = fitTextToWidth(segment.rawValue || segment.value || "-", maxValueWidth, fontSize);
+    const valueWidth = Math.min(maxValueWidth, estimateTextWidth(renderValue, fontSize) + 8);
+    return {
+      ...segment,
+      fontSize,
+      labelWidth,
+      renderValue,
+      segmentWidth: labelWidth + valueWidth
+    };
+  });
+  const fixedWidth = fixedLayouts.reduce((sum, segment) => sum + segment.segmentWidth, 0);
+  const totalGapWidth = Math.max(0, safeSegments.length - 1) * sectionGap;
+  const promptValueWidth = Math.max(
+    180,
+    Math.floor(contentWidth - fixedWidth - totalGapWidth - labelWidth)
+  );
+  const promptLayout = promptSegment ? {
+    ...promptSegment,
+    fontSize: promptFontSize,
+    labelWidth,
+    renderValue: fitTextToWidth(promptSegment.rawValue || promptSegment.value || "-", promptValueWidth, promptFontSize),
+    segmentWidth: labelWidth + promptValueWidth
+  } : null;
+  return [
+    ...promptLayout ? [promptLayout] : [],
+    ...fixedLayouts
+  ];
+};
+var buildWatermarkifySvg = (meta, imageWidth, imageHeight) => {
   const hasWatermark = meta?.watermark?.enabled !== false && normalizeText(meta?.watermarkText);
   const hasStrip = meta?.strip?.enabled !== false && Array.isArray(meta?.stripSegments) && meta.stripSegments.length > 0;
-  if (!page || !meta || !hasWatermark && !hasStrip) {
-    return async () => {
-    };
+  if (!hasWatermark && !hasStrip) {
+    return "";
   }
-  await page.evaluate(({ hostId, watermarkifyMeta, defaults }) => {
-    const previousHost = document.getElementById(hostId);
-    if (previousHost && typeof previousHost.__pkCleanup === "function") {
-      previousHost.__pkCleanup();
-    }
-    previousHost?.remove();
-    const mountPoint = document.body || document.documentElement;
-    if (!mountPoint) return;
-    const createNode = (tagName, className) => {
-      const node = document.createElement(tagName);
-      if (className) node.className = className;
-      return node;
-    };
-    const safeText = (value) => String(value || "").trim();
-    const host = document.createElement("div");
-    host.id = hostId;
-    host.style.position = "fixed";
-    host.style.inset = "0";
-    host.style.width = "100vw";
-    host.style.height = "100vh";
-    host.style.pointerEvents = "none";
-    host.style.zIndex = "2147483646";
-    const shadow = host.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = `
-            :host {
-                all: initial;
-                position: fixed;
-                inset: 0;
-                width: 100vw;
-                height: 100vh;
-                pointer-events: none;
-                z-index: 2147483646;
-            }
-
-            .root {
-                position: absolute;
-                inset: 0;
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                pointer-events: none;
-                font-family: MiSans, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
-            }
-
-            .watermark {
-                position: absolute;
-                inset: 0;
-                overflow: hidden;
-                pointer-events: none;
-            }
-
-            .wmStamp {
-                position: absolute;
-                left: 0;
-                top: 0;
-                transform-origin: left center;
-                pointer-events: none;
-                white-space: nowrap;
-            }
-
-            .wmStampText {
-                color: rgba(17, 17, 17, var(--wm-opacity, 0.15));
-                font-size: 19px;
-                font-weight: 720;
-                line-height: 1;
-                letter-spacing: 0.032em;
-                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.44);
-                -webkit-text-stroke: 0.22px rgba(255, 255, 255, 0.12);
-                font-variant-numeric: tabular-nums;
-                filter: saturate(0.92);
-            }
-
-            .strip {
-                position: absolute;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                min-height: 78px;
-                padding: 0 22px 0 20px;
-                display: flex;
-                align-items: center;
-                overflow: hidden;
-                border-top: 1px solid rgba(17, 17, 17, 0.1);
-                background:
-                    linear-gradient(180deg, rgba(255, 255, 255, 0.995) 0%, rgba(248, 248, 247, 0.985) 100%);
-                box-shadow:
-                    0 -22px 48px rgba(15, 23, 42, 0.1),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.92);
-                backdrop-filter: blur(16px);
-                -webkit-backdrop-filter: blur(16px);
-            }
-
-            .strip::before {
-                content: "";
-                position: absolute;
-                left: 20px;
-                right: 52%;
-                top: 0;
-                height: 2px;
-                border-radius: 999px;
-                background: linear-gradient(
-                    90deg,
-                    rgba(17, 17, 17, 0.98) 0%,
-                    rgba(17, 17, 17, 0.68) 24%,
-                    rgba(17, 17, 17, 0.08) 58%,
-                    rgba(17, 17, 17, 0) 100%
-                );
-            }
-
-            .stripInner {
-                position: relative;
-                z-index: 1;
-                display: flex;
-                align-items: center;
-                gap: 16px;
-                width: 100%;
-                min-width: 0;
-            }
-
-            .stripLogo {
-                position: relative;
-                width: 28px;
-                height: 28px;
-                flex: none;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-
-            .stripLogoImg {
-                width: 28px;
-                height: 28px;
-                object-fit: contain;
-                display: block;
-            }
-
-            .segments {
-                display: flex;
-                align-items: center;
-                gap: 0;
-                flex: 1 1 auto;
-                min-width: 0;
-                white-space: nowrap;
-            }
-
-            .segment {
-                position: relative;
-                display: inline-flex;
-                align-items: center;
-                gap: 10px;
-                min-width: 0;
-                flex: none;
-                padding-right: 16px;
-                margin-right: 16px;
-            }
-
-            .segment:not(:last-child)::after {
-                content: "";
-                position: absolute;
-                top: 50%;
-                right: 0;
-                width: 1px;
-                height: 25px;
-                transform: translateY(-50%);
-                background: linear-gradient(
-                    180deg,
-                    rgba(148, 163, 184, 0) 0%,
-                    rgba(148, 163, 184, 0.34) 24%,
-                    rgba(148, 163, 184, 0.34) 76%,
-                    rgba(148, 163, 184, 0) 100%
-                );
-            }
-
-            .segmentTaskId {
-                flex: 1 1 auto;
-                max-width: none;
-                min-width: 0;
-            }
-
-            .label {
-                width: 52px;
-                color: rgba(17, 17, 17, 0.42);
-                font-size: 12px;
-                font-weight: 600;
-                line-height: 1;
-                letter-spacing: 0.01em;
-                flex: none;
-                display: inline-flex;
-                align-items: center;
-                justify-content: flex-start;
-            }
-
-            .value {
-                color: #111111;
-                font-size: 18px;
-                font-weight: 710;
-                line-height: 1;
-                min-width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-variant-numeric: tabular-nums;
-                display: inline-flex;
-                align-items: center;
-            }
-
-            .segmentTaskId .value {
-                color: #101010;
-                font-size: 15px;
-                font-weight: 760;
-                letter-spacing: -0.01em;
-            }
-
-            .segmentTime .value {
-                color: #202020;
-                font-size: 17px;
-                font-weight: 700;
-            }
-
-            .segmentLocation .value,
-            .segmentIp .value {
-                color: #2a2a2a;
-                font-size: 17px;
-                font-weight: 700;
-            }
-
-        `;
-    const root = createNode("div", "root");
-    const watermarkNode = createNode("div", "watermark");
-    const stripNode = createNode("div", "strip");
-    const stripInner = createNode("div", "stripInner");
-    const stripLogo = createNode("div", "stripLogo");
-    const stripLogoImg = createNode("img", "stripLogoImg");
-    const stripSegmentsNode = createNode("div", "segments");
-    stripLogoImg.alt = "";
-    stripLogoImg.decoding = "async";
-    stripLogoImg.referrerPolicy = "no-referrer";
-    stripLogoImg.src = safeText(watermarkifyMeta?.stripLogoSrc) || defaults.logoUrl;
-    stripLogo.appendChild(stripLogoImg);
-    stripInner.appendChild(stripLogo);
-    stripInner.appendChild(stripSegmentsNode);
-    stripNode.appendChild(stripInner);
-    root.appendChild(watermarkNode);
-    root.appendChild(stripNode);
-    shadow.appendChild(style);
-    shadow.appendChild(root);
-    mountPoint.appendChild(host);
-    const buildSegmentNode = (segment) => {
-      const kind = String(segment?.kind || "").trim();
-      const label = String(segment?.label || "").trim();
-      const value = String(segment?.value || "").trim();
-      const rawValue = String(segment?.rawValue || value).trim();
-      const classSuffix = kind ? ` segment${kind.slice(0, 1).toUpperCase()}${kind.slice(1)}` : "";
-      const segmentNode = createNode("span", `segment${classSuffix}`);
-      const labelNode = createNode("span", "label");
-      const valueNode = createNode("span", "value");
-      labelNode.textContent = label;
-      valueNode.textContent = value;
-      segmentNode.title = rawValue ? `${label} ${rawValue}` : label;
-      segmentNode.appendChild(labelNode);
-      segmentNode.appendChild(valueNode);
-      return segmentNode;
-    };
-    const renderStrip = () => {
-      const stripSegments = Array.isArray(watermarkifyMeta?.stripSegments) ? watermarkifyMeta.stripSegments : [];
-      if (!watermarkifyMeta?.strip?.enabled || stripSegments.length === 0) {
-        stripNode.remove();
-        return;
-      }
-      const fragment = document.createDocumentFragment();
-      for (const segment of stripSegments) {
-        fragment.appendChild(buildSegmentNode(segment));
-      }
-      stripSegmentsNode.replaceChildren(fragment);
-    };
-    const waitForLogo = async () => {
-      if (!stripLogoImg.getAttribute("src")) {
-        return;
-      }
-      await new Promise((resolve) => {
-        let settled = false;
-        const done = () => {
-          if (settled) return;
-          settled = true;
-          resolve();
-        };
-        const fail = () => {
-          if (settled) return;
-          stripLogo.remove();
-          done();
-        };
-        const timeoutDone = () => {
-          if (settled) return;
-          done();
-        };
-        if (stripLogoImg.complete && stripLogoImg.naturalWidth > 0) {
-          done();
-          return;
-        }
-        if (stripLogoImg.complete && stripLogoImg.naturalWidth === 0) {
-          fail();
-          return;
-        }
-        stripLogoImg.addEventListener("load", done, { once: true });
-        stripLogoImg.addEventListener("error", fail, { once: true });
-        setTimeout(timeoutDone, 2500);
-      });
-    };
-    const renderWatermark = () => {
-      const stampText = safeText(watermarkifyMeta?.watermarkText);
-      if (!watermarkifyMeta?.watermark?.enabled || !stampText) {
-        watermarkNode.remove();
-        return;
-      }
-      const cellWidth = Math.max(680, Number(watermarkifyMeta.watermark.cellWidth) || defaults.cellWidth);
-      const cellHeight = Math.max(260, Number(watermarkifyMeta.watermark.cellHeight) || defaults.cellHeight);
-      const rotateDeg = Number(watermarkifyMeta.watermark.rotateDeg) || defaults.rotateDeg;
-      const opacity = Math.min(0.22, Math.max(0.05, Number(watermarkifyMeta.watermark.opacity) || defaults.opacity));
-      const width = watermarkNode.clientWidth || window.innerWidth || document.documentElement.clientWidth || cellWidth;
-      const height = watermarkNode.clientHeight || window.innerHeight || document.documentElement.clientHeight || cellHeight;
-      const rowOffset = Math.round(cellWidth * 0.24);
-      const startX = -Math.round(cellWidth * 0.16);
-      const startY = -Math.round(cellHeight * 0.12);
-      const cols = Math.ceil((width + cellWidth * 1.1) / cellWidth) + 1;
-      const rows = Math.ceil((height + cellHeight * 0.9) / cellHeight) + 1;
-      const fragment = document.createDocumentFragment();
-      for (let row = 0; row < rows; row += 1) {
-        for (let col = 0; col < cols; col += 1) {
-          const stamp = createNode("div", "wmStamp");
-          const stampTextNode = createNode("div", "wmStampText");
-          const x = startX + col * cellWidth + (row % 2 ? rowOffset : 0);
-          const y = startY + row * cellHeight + (row % 2 ? 14 : -8);
-          stamp.style.transform = `translate(${x}px, ${y}px) rotate(${rotateDeg}deg)`;
-          stampTextNode.style.setProperty("--wm-opacity", String(opacity));
-          stampTextNode.textContent = stampText;
-          stamp.appendChild(stampTextNode);
-          fragment.appendChild(stamp);
-        }
+  const width = Math.max(1, Number(imageWidth) || 1);
+  const height = Math.max(1, Number(imageHeight) || 1);
+  const fontFamily = escapeXml(buildFontFamily());
+  const parts = [];
+  if (hasWatermark) {
+    const stampText = escapeXml(normalizeText(meta.watermarkText));
+    const cellWidth = Math.max(680, Number(meta.watermark?.cellWidth) || DEFAULT_WATERMARK_CELL_WIDTH);
+    const cellHeight = Math.max(260, Number(meta.watermark?.cellHeight) || DEFAULT_WATERMARK_CELL_HEIGHT);
+    const rotateDeg = Number(meta.watermark?.rotateDeg) || DEFAULT_WATERMARK_ROTATE_DEG;
+    const opacity = Math.min(0.22, Math.max(0.05, Number(meta.watermark?.opacity) || DEFAULT_WATERMARK_OPACITY));
+    const rowOffset = Math.round(cellWidth * 0.24);
+    const startX = -Math.round(cellWidth * 0.16);
+    const startY = -Math.round(cellHeight * 0.12);
+    const cols = Math.ceil((width + cellWidth * 1.1) / cellWidth) + 1;
+    const rows = Math.ceil((height + cellHeight * 0.9) / cellHeight) + 1;
+    const stamps = [];
+    for (let row = 0; row < rows; row += 1) {
+      for (let col = 0; col < cols; col += 1) {
+        const x = startX + col * cellWidth + (row % 2 ? rowOffset : 0);
+        const y = startY + row * cellHeight + (row % 2 ? 14 : -8);
+        stamps.push(`
+                    <g transform="translate(${x} ${y}) rotate(${rotateDeg})">
+                        <text
+                            x="0"
+                            y="0"
+                            fill="#111111"
+                            fill-opacity="${opacity}"
+                            stroke="#ffffff"
+                            stroke-opacity="0.12"
+                            stroke-width="0.22"
+                            font-family="${fontFamily}"
+                            font-size="19"
+                            font-weight="720"
+                            letter-spacing="0.6"
+                        >${stampText}</text>
+                    </g>
+                `);
       }
-      watermarkNode.replaceChildren(fragment);
-    };
-    let resizeFrame = 0;
-    const queueWatermarkRender = () => {
-      if (!watermarkNode.isConnected) return;
-      cancelAnimationFrame(resizeFrame);
-      resizeFrame = requestAnimationFrame(() => {
-        renderWatermark();
-      });
-    };
-    const handleResize = () => {
-      queueWatermarkRender();
-    };
-    host.__pkCleanup = () => {
-      cancelAnimationFrame(resizeFrame);
-      window.removeEventListener("resize", handleResize);
-    };
-    renderStrip();
-    renderWatermark();
-    queueWatermarkRender();
-    window.addEventListener("resize", handleResize, { passive: true });
-    return waitForLogo();
-  }, {
-    hostId: SCREENSHOT_WATERMARKIFY_HOST_ID,
-    watermarkifyMeta: meta,
-    defaults: {
-      opacity: DEFAULT_WATERMARK_OPACITY,
-      rotateDeg: DEFAULT_WATERMARK_ROTATE_DEG,
-      cellWidth: DEFAULT_WATERMARK_CELL_WIDTH,
-      cellHeight: DEFAULT_WATERMARK_CELL_HEIGHT,
-      logoUrl: DEFAULT_STRIP_LOGO_URL
     }
-  });
-  return async () => {
-    await page.evaluate((hostId) => {
-      const host = document.getElementById(hostId);
-      if (host && typeof host.__pkCleanup === "function") {
-        host.__pkCleanup();
+    parts.push(`<g id="watermarks">${stamps.join("")}</g>`);
+  }
+  if (hasStrip) {
+    const stripHeight = DEFAULT_STRIP_HEIGHT;
+    const stripY = height - stripHeight;
+    const logoSize = 28;
+    const logoX = DEFAULT_STRIP_PADDING_LEFT;
+    const logoY = stripY + Math.round((stripHeight - logoSize) / 2);
+    const contentStartX = logoX + logoSize + DEFAULT_STRIP_GAP;
+    const contentWidth = width - contentStartX - DEFAULT_STRIP_PADDING_RIGHT;
+    const centerY = stripY + stripHeight / 2 + 1;
+    const layouts = buildStripSegmentLayouts(meta.stripSegments, contentWidth);
+    const svgSegments = [];
+    let currentX = contentStartX;
+    layouts.forEach((segment, index) => {
+      const label = escapeXml(segment.label || "");
+      const value = escapeXml(segment.renderValue || "-");
+      const labelX = currentX;
+      const valueX = currentX + segment.labelWidth;
+      svgSegments.push(`
+                <text
+                    x="${labelX}"
+                    y="${centerY}"
+                    fill="#111111"
+                    fill-opacity="0.42"
+                    font-family="${fontFamily}"
+                    font-size="12"
+                    font-weight="600"
+                    dominant-baseline="middle"
+                >${label}</text>
+                <text
+                    x="${valueX}"
+                    y="${centerY}"
+                    fill="#111111"
+                    font-family="${fontFamily}"
+                    font-size="${segment.fontSize}"
+                    font-weight="${segment.kind === "prompt" ? 760 : 710}"
+                    dominant-baseline="middle"
+                >${value}</text>
+            `);
+      currentX += segment.segmentWidth;
+      if (index < layouts.length - 1) {
+        const lineX = currentX + 8;
+        svgSegments.push(`
+                    <line
+                        x1="${lineX}"
+                        y1="${stripY + 26}"
+                        x2="${lineX}"
+                        y2="${stripY + stripHeight - 26}"
+                        stroke="#94a3b8"
+                        stroke-opacity="0.34"
+                        stroke-width="1"
+                    />
+                `);
+        currentX += DEFAULT_STRIP_GAP + 16;
       }
-      host?.remove();
-    }, SCREENSHOT_WATERMARKIFY_HOST_ID).catch(() => {
     });
-  };
+    parts.push(`
+            <g id="strip">
+                <rect x="0" y="${stripY}" width="${width}" height="${stripHeight}" fill="#ffffff" fill-opacity="0.985" />
+                <rect x="0" y="${stripY}" width="${width}" height="1" fill="#111111" fill-opacity="0.10" />
+                <rect x="${DEFAULT_STRIP_PADDING_LEFT}" y="${stripY}" width="${Math.max(120, Math.round(width * 0.42))}" height="2" fill="url(#stripAccent)" />
+                ${meta.stripLogoSrc ? `<image href="${escapeXml(meta.stripLogoSrc)}" x="${logoX}" y="${logoY}" width="${logoSize}" height="${logoSize}" />` : ""}
+                ${svgSegments.join("")}
+            </g>
+        `);
+  }
+  return `
+        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+            <defs>
+                <linearGradient id="stripAccent" x1="0%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%" stop-color="#111111" stop-opacity="0.98" />
+                    <stop offset="24%" stop-color="#111111" stop-opacity="0.68" />
+                    <stop offset="58%" stop-color="#111111" stop-opacity="0.08" />
+                    <stop offset="100%" stop-color="#111111" stop-opacity="0" />
+                </linearGradient>
+            </defs>
+            ${parts.join("")}
+        </svg>
+    `;
+};
+var watermarkifyScreenshotBuffer = async (buffer, meta) => {
+  const hasWatermark = meta?.watermark?.enabled !== false && normalizeText(meta?.watermarkText);
+  const hasStrip = meta?.strip?.enabled !== false && Array.isArray(meta?.stripSegments) && meta.stripSegments.length > 0;
+  if (!Buffer.isBuffer(buffer) || !meta || !hasWatermark && !hasStrip) {
+    return buffer;
+  }
+  const image = (0, import_sharp.default)(buffer, { failOn: "none" });
+  const metadata = await image.metadata().catch(() => null);
+  const width = Math.max(1, Number(metadata?.width) || 0);
+  const height = Math.max(1, Number(metadata?.height) || 0);
+  if (!width || !height) {
+    return buffer;
+  }
+  const overlaySvg = buildWatermarkifySvg(meta, width, height);
+  if (!overlaySvg) {
+    return buffer;
+  }
+  return await image.composite([{ input: Buffer.from(overlaySvg), top: 0, left: 0 }]).png().toBuffer();
 };
 
 // src/share.js
@@ -5852,8 +5699,6 @@ var Share = {
     const restore = options.restore ?? false;
     const maxHeight = options.maxHeight ?? 8e3;
     const screenshotWatermarkify = normalizeScreenshotWatermarkify(options.watermarkify ?? true);
-    let cleanupScreenshotWatermarkify = async () => {
-    };
     try {
       const maxScrollHeight = await page.evaluate(() => {
         let maxHeight2 = document.body.scrollHeight;
@@ -5881,19 +5726,22 @@ var Share = {
         height: targetHeight
       });
       await (0, import_delay2.default)(1e3);
-      if (screenshotWatermarkify.enabled) {
-        const watermarkifyMeta = await resolveScreenshotWatermarkifyMeta(page, screenshotWatermarkify);
-        cleanupScreenshotWatermarkify = await installScreenshotWatermarkify(page, watermarkifyMeta);
-        await (0, import_delay2.default)(120);
-      }
-      const buffer_ = await capturePageScreenshot(page, {
+      const capturedAt = /* @__PURE__ */ new Date();
+      const rawBuffer = await capturePageScreenshot(page, {
         fullPage: true,
         type: "png",
         maxClipHeight: targetHeight
       });
+      if (!screenshotWatermarkify.enabled) {
+        return rawBuffer.toString("base64");
+      }
+      const watermarkifyMeta = await resolveScreenshotWatermarkifyMeta(page, {
+        ...screenshotWatermarkify,
+        capturedAt
+      });
+      const buffer_ = await watermarkifyScreenshotBuffer(rawBuffer, watermarkifyMeta);
       return buffer_.toString("base64");
     } finally {
-      await cleanupScreenshotWatermarkify();
       if (restore) {
         await page.evaluate(() => {
           document.querySelectorAll(".__pk_expanded__").forEach((el) => {