@skrillex1224/playwright-toolkit 2.1.209 → 2.1.211

package/dist/index.js

@@ -408,6 +408,33 @@ function createInternalLogger(moduleName, explicitLogger) {
   };
 }
 
+// src/internals/viewport.js
+var toPositiveInt = (value) => {
+  const number = Math.round(Number(value) || 0);
+  return number > 0 ? number : 0;
+};
+var resolveCurrentViewportSize = async (page, fallback = {}) => {
+  const directViewport = page?.viewportSize?.();
+  const directWidth = toPositiveInt(directViewport?.width);
+  const directHeight = toPositiveInt(directViewport?.height);
+  if (directWidth && directHeight) {
+    return {
+      width: directWidth,
+      height: directHeight
+    };
+  }
+  const measuredViewport = await page?.evaluate?.(() => ({
+    width: window.innerWidth || document.documentElement?.clientWidth || document.body?.clientWidth || 0,
+    height: window.innerHeight || document.documentElement?.clientHeight || document.body?.clientHeight || 0
+  })).catch(() => null);
+  const fallbackWidth = toPositiveInt(fallback?.width);
+  const fallbackHeight = toPositiveInt(fallback?.height);
+  return {
+    width: toPositiveInt(measuredViewport?.width) || fallbackWidth || 1,
+    height: toPositiveInt(measuredViewport?.height) || fallbackHeight || 1
+  };
+};
+
 // src/internals/screenshot.js
 var logger = createInternalLogger("Screenshot");
 var DEFAULT_TIMEOUT_MS = 5e3;
@@ -434,7 +461,7 @@ var normalizeQuality = (value, type) => {
 };
 var buildFullPageClip = (metrics, viewport, maxClipHeight) => {
   const contentSize = metrics && typeof metrics === "object" ? metrics.contentSize || null : null;
-  const width = Math.max(1, Math.ceil(contentSize?.width || viewport.width || 1));
+  const width = Math.max(1, Math.ceil(viewport.width || contentSize?.width || 1));
   let height = Math.max(1, Math.ceil(contentSize?.height || viewport.height || 1));
   if (maxClipHeight > 0) {
     height = Math.min(height, maxClipHeight);
@@ -471,7 +498,7 @@ var capturePageScreenshot = async (page, options = {}) => {
     const session = await context.newCDPSession(page);
     try {
       const metrics = await session.send("Page.getLayoutMetrics");
-      const viewport = page.viewportSize() || { width: 1280, height: 720 };
+      const viewport = await resolveCurrentViewportSize(page);
       const captureParams = {
         format: type,
         fromSurface: true,
@@ -924,6 +951,9 @@ var ProxyMeterRuntime = {
   getProxyMeterSnapshot
 };
 
+// src/internals/constants.js
+var PageRuntimeStateKey = "__playwright_toolkit_runtime_state__";
+
 // src/runtime-env.js
 var BROWSER_PROFILE_SCHEMA_VERSION = 1;
 var rememberedRuntimeState = null;
@@ -1430,6 +1460,7 @@ var RuntimeEnv = {
   parseInput(input = {}, actor = "") {
     const runtime2 = tryParseJSON(input?.runtime) || {};
     const resolvedActor = String(actor || input?.actor || "").trim();
+    const query = String(input?.query || "").trim();
     const cookies = normalizeCookies(runtime2?.cookies);
     const cookieMap = buildCookieMap(cookies);
     const localStorage = normalizeLocalStorage(runtime2?.local_storage);
@@ -1453,6 +1484,7 @@ var RuntimeEnv = {
       actor: resolvedActor,
       runtime: normalizedRuntime,
       envId,
+      query,
       auth,
       cookies,
       cookieMap,
@@ -1520,6 +1552,12 @@ var RuntimeEnv = {
   async applyToPage(page, source = {}, options = {}) {
     if (!page) return;
     const state = normalizeRuntimeState(source, options?.actor || "");
+    Object.defineProperty(page, PageRuntimeStateKey, {
+      configurable: true,
+      enumerable: false,
+      writable: true,
+      value: state
+    });
     const localStorage = state.localStorage || {};
     const sessionStorage = state.sessionStorage || {};
     const cookies = (state.cookies || []).map((cookie) => {
@@ -4521,7 +4559,7 @@ var Logger = {
 import delay2 from "delay";
 
 // src/internals/watermarkify.js
-var SCREENSHOT_WATERMARKIFY_HOST_ID = "__pk_screenshot_watermarkify__";
+import sharp from "sharp";
 var DEFAULT_TIMEZONE_OFFSET = 8;
 var DEFAULT_RESOLVER_TIMEOUT_MS = 180;
 var DEFAULT_IP_LOOKUP_TIMEOUT_MS = 1e4;
@@ -4532,6 +4570,26 @@ 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_ONE_LINE_HEIGHT = 78;
+var DEFAULT_STRIP_WRAPPED_MIN_HEIGHT = 108;
+var DEFAULT_STRIP_PADDING_LEFT = 22;
+var DEFAULT_STRIP_PADDING_RIGHT = 28;
+var DEFAULT_STRIP_GAP = 18;
+var DEFAULT_STRIP_LABEL_WIDTH = 56;
+var DEFAULT_STRIP_PROMPT_MAX_SAFE_CHARS = 180;
+var DEFAULT_STRIP_PROMPT_MIN_TOTAL_WIDTH = 320;
+var DEFAULT_STRIP_PROMPT_PREFERRED_WIDTH_RATIO = 0.58;
+var DEFAULT_STRIP_ZONE_GAP = 18;
+var DEFAULT_STRIP_PROMPT_TRAILING_PADDING = 16;
+var DEFAULT_STRIP_LABEL_FONT_SIZE = 14.5;
+var DEFAULT_STRIP_VALUE_FONT_SIZE = 15.5;
+var DEFAULT_STRIP_VALUE_PADDING = 10;
+var DEFAULT_STRIP_LABEL_PADDING = 14;
+var DEFAULT_STRIP_SECTION_GAP = DEFAULT_STRIP_GAP + 16;
+var DEFAULT_STRIP_LINE_HEIGHT_RATIO = 1.28;
+var DEFAULT_STRIP_PROMPT_MAX_LINES = 3;
+var DEFAULT_STRIP_CONTENT_SAFE_PADDING_X = 12;
+var DEFAULT_STRIP_TEXT_WIDTH_SAFETY = 10;
 var WEAK_LOCATION_VALUES = /* @__PURE__ */ new Set(["cn", "\u4E2D\u56FD"]);
 var LOCATION_NETWORK_SUFFIX_PATTERNS = [
   /(?:中国)?移动$/i,
@@ -4556,6 +4614,7 @@ var LOCATION_NETWORK_SUFFIX_PATTERNS = [
   /digitalocean$/i
 ];
 var cachedStripLogoSrcPromise = null;
+var cachedEnrichmentByContext = /* @__PURE__ */ new WeakMap();
 var normalizeText = (value) => String(value || "").trim();
 var toInline = (value, maxLen = 200) => {
   const text = normalizeText(value);
@@ -4567,12 +4626,14 @@ 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 shortenByCharacters = (value, maxChars = 80) => {
+  const text = normalizeWhitespace(value);
+  if (!text) return "";
+  const chars = Array.from(text);
+  if (chars.length <= maxChars) {
+    return text;
+  }
+  return `${chars.slice(0, Math.max(0, maxChars - 1)).join("").trimEnd()}\u2026`;
 };
 var padDatePart = (value) => String(value).padStart(2, "0");
 var formatUtcOffsetLabel = (offsetHours = DEFAULT_TIMEZONE_OFFSET) => {
@@ -4646,6 +4707,29 @@ var fillEnrichment = (target, source) => {
   }
   return target;
 };
+var readCachedEnrichment = (page) => {
+  const context = page && typeof page.context === "function" ? page.context() : null;
+  if (!context) {
+    return null;
+  }
+  const cached = cachedEnrichmentByContext.get(context);
+  return cached && typeof cached === "object" ? cached : null;
+};
+var writeCachedEnrichment = (page, source) => {
+  const context = page && typeof page.context === "function" ? page.context() : null;
+  if (!context || !source || typeof source !== "object") {
+    return;
+  }
+  const current = cachedEnrichmentByContext.get(context) || {};
+  const next = {
+    ip: toInline(source.ip || current.ip, 80),
+    location: toInline(source.location || current.location, 80)
+  };
+  if (!next.ip && !next.location) {
+    return;
+  }
+  cachedEnrichmentByContext.set(context, next);
+};
 var getHostname = (url) => {
   try {
     const parsed = new URL(url);
@@ -4749,8 +4833,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),
@@ -4775,44 +4859,43 @@ var openProbePage = async (page) => {
   if (!context) {
     return null;
   }
+  const browser = typeof context.browser === "function" ? context.browser() : null;
+  if (browser && typeof browser.newContext === "function") {
+    const probeContext = await browser.newContext().catch(() => null);
+    if (probeContext && typeof probeContext.newPage === "function") {
+      const probePage = await probeContext.newPage().catch(async () => {
+        await probeContext.close().catch(() => {
+        });
+        return null;
+      });
+      if (probePage) {
+        return {
+          page: probePage,
+          close: async () => {
+            await probeContext.close().catch(() => {
+            });
+          }
+        };
+      }
+    } else {
+      await probeContext?.close?.().catch(() => {
+      });
+    }
+  }
   if (typeof context.newPage === "function") {
     try {
-      const probePage2 = await context.newPage();
+      const probePage = await context.newPage();
       return {
-        page: probePage2,
+        page: probePage,
         close: async () => {
-          await probePage2.close().catch(() => {
+          await probePage.close().catch(() => {
           });
         }
       };
     } catch {
     }
   }
-  const browser = typeof context.browser === "function" ? context.browser() : null;
-  if (!browser || typeof browser.newContext !== "function") {
-    return null;
-  }
-  const probeContext = await browser.newContext().catch(() => null);
-  if (!probeContext || typeof probeContext.newPage !== "function") {
-    await probeContext?.close?.().catch(() => {
-    });
-    return null;
-  }
-  const probePage = await probeContext.newPage().catch(async () => {
-    await probeContext.close().catch(() => {
-    });
-    return null;
-  });
-  if (!probePage) {
-    return null;
-  }
-  return {
-    page: probePage,
-    close: async () => {
-      await probeContext.close().catch(() => {
-      });
-    }
-  };
+  return null;
 };
 var resolveWithIpLookup = async (page, options = {}) => {
   if (!page || typeof page.context !== "function" || options.ipLookup === false) {
@@ -4857,10 +4940,14 @@ var resolveWithIpLookup = async (page, options = {}) => {
 };
 var resolveEnrichment = async (page, baseMeta, options) => {
   const response = options.response && typeof options.response === "object" ? options.response : null;
+  const cached = readCachedEnrichment(page);
   const merged = {
     ip: toInline(options.ip, 80),
     location: toInline(options.location, 80)
   };
+  if (!merged.ip || !merged.location) {
+    fillEnrichment(merged, cached);
+  }
   if (!merged.ip || !merged.location) {
     fillEnrichment(
       merged,
@@ -4884,24 +4971,31 @@ var resolveEnrichment = async (page, baseMeta, options) => {
       merged.location = headerLocation || merged.location;
     }
   }
+  writeCachedEnrichment(page, merged);
   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 = shortenByCharacters(
+    normalizeWhitespace(prompt) || "-",
+    DEFAULT_STRIP_PROMPT_MAX_SAFE_CHARS
+  ) || "-";
+  const ipValue = normalizeWhitespace(ip) || "-";
+  const locationValue = normalizeWhitespace(location) || "-";
   return [
     {
-      kind: "taskId",
-      label: "TaskID",
-      value: toInline(taskId, 240) || "-",
-      rawValue: toInline(taskId, 240) || "-"
+      kind: "prompt",
+      label: "Prompt",
+      value: promptValue,
+      rawValue: promptValue
     },
     {
       kind: "time",
@@ -4912,25 +5006,50 @@ var buildStripSegments = ({ taskId, captureTime, ip, location }) => {
     {
       kind: "location",
       label: "Loc",
-      value: shortenTail(location, 24) || "-",
-      rawValue: toInline(location, 80) || "-"
+      value: locationValue,
+      rawValue: locationValue
     },
     {
       kind: "ip",
       label: "IP",
-      value: toInline(ip, 28) || "-",
-      rawValue: toInline(ip, 80) || "-"
+      value: ipValue,
+      rawValue: ipValue
     }
   ];
 };
+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 resolvePromptFields = (options = {}, fallbackTitle = "") => {
+  const query = normalizeText(options.query);
+  const prompt = query || normalizeText(options.prompt) || 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,
@@ -4973,8 +5092,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: normalizeWhitespace(source.prompt),
+    query: normalizeWhitespace(source.query),
     ipLookup: source.ipLookup !== false,
     ipLookupTimeoutMs: Number.isFinite(ipLookupTimeoutMsRaw) ? ipLookupTimeoutMsRaw : DEFAULT_IP_LOOKUP_TIMEOUT_MS,
     resolver: typeof source.resolver === "function" ? source.resolver : null,
@@ -4993,16 +5112,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()
   ]);
@@ -5010,13 +5129,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
@@ -5026,396 +5145,509 @@ var resolveScreenshotWatermarkifyMeta = async (page, options = {}) => {
     stripLogoSrc
   };
 };
-var installScreenshotWatermarkify = async (page, 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 (!page || !meta || !hasWatermark && !hasStrip) {
-    return async () => {
-    };
+var buildFontFamily = () => 'MiSans, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif';
+var buildStripSegmentLayout = (segment, options = {}) => {
+  const label = normalizeWhitespace(segment?.label || "");
+  const rawValue = normalizeWhitespace(segment?.rawValue || segment?.value || "-") || "-";
+  const labelFontSize = DEFAULT_STRIP_LABEL_FONT_SIZE;
+  const valueFontSize = DEFAULT_STRIP_VALUE_FONT_SIZE;
+  const labelWidth = Math.max(
+    DEFAULT_STRIP_LABEL_WIDTH,
+    estimateTextWidth(label, labelFontSize) + DEFAULT_STRIP_LABEL_PADDING
+  );
+  const rawValueWidth = Math.max(
+    24,
+    estimateTextWidth(rawValue, valueFontSize) + DEFAULT_STRIP_VALUE_PADDING
+  );
+  const maxValueWidth = Math.max(0, Number(options.valueMaxWidth) || 0);
+  const renderValue = maxValueWidth > 0 ? fitTextWithEllipsis(rawValue, Math.max(18, maxValueWidth - DEFAULT_STRIP_VALUE_PADDING), valueFontSize) : rawValue;
+  const valueWidth = maxValueWidth > 0 ? Math.max(24, Math.min(maxValueWidth, estimateTextWidth(renderValue, valueFontSize) + DEFAULT_STRIP_VALUE_PADDING)) : rawValueWidth;
+  return {
+    ...segment,
+    label,
+    rawValue,
+    renderValue,
+    labelFontSize,
+    valueFontSize,
+    labelWidth,
+    valueWidth,
+    segmentWidth: labelWidth + valueWidth,
+    rowHeight: Math.round(Math.max(labelFontSize, valueFontSize) * 1.42)
+  };
+};
+var buildStripRowLayout = (segments, overrides = {}) => {
+  const safeSegments = Array.isArray(segments) ? segments : [];
+  const sectionGap = DEFAULT_STRIP_SECTION_GAP;
+  const layouts = safeSegments.map((segment, index) => buildStripSegmentLayout(segment, {
+    valueMaxWidth: overrides?.valueMaxWidths?.[index]
+  }));
+  const totalWidth = layouts.reduce((sum, segment) => sum + segment.segmentWidth, 0) + Math.max(0, layouts.length - 1) * sectionGap;
+  const rowHeight = layouts.reduce((max, segment) => Math.max(max, segment.rowHeight || 0), 0);
+  return {
+    sectionGap,
+    layouts,
+    totalWidth,
+    rowHeight
+  };
+};
+var fitTextWithEllipsis = (chars, maxWidth, fontSize) => {
+  const safeChars = Array.isArray(chars) ? chars.slice() : Array.from(String(chars || ""));
+  if (!safeChars.length) {
+    return "-";
+  }
+  if (estimateTextWidth(safeChars.join(""), fontSize) <= maxWidth) {
+    return safeChars.join("").trim() || "-";
   }
-  await page.evaluate(({ hostId, watermarkifyMeta, defaults }) => {
-    const previousHost = document.getElementById(hostId);
-    if (previousHost && typeof previousHost.__pkCleanup === "function") {
-      previousHost.__pkCleanup();
+  while (safeChars.length > 1 && estimateTextWidth(`${safeChars.join("").trimEnd()}\u2026`, fontSize) > maxWidth) {
+    safeChars.pop();
+  }
+  return `${safeChars.join("").trimEnd()}\u2026` || "\u2026";
+};
+var splitTextToLines = (value, maxWidth, fontSize, maxLines = 2) => {
+  const chars = Array.from(normalizeWhitespace(value) || "-");
+  const safeMaxWidth = Math.max(18, maxWidth - DEFAULT_STRIP_TEXT_WIDTH_SAFETY);
+  if (!chars.length) {
+    return { lines: ["-"], truncated: false };
+  }
+  const lines = [];
+  let cursor = 0;
+  let truncated = false;
+  while (cursor < chars.length && lines.length < maxLines) {
+    while (cursor < chars.length && chars[cursor] === " ") {
+      cursor += 1;
     }
-    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);
-        }
+    if (cursor >= chars.length) {
+      break;
+    }
+    const isLastLine = lines.length === maxLines - 1;
+    const lineChars = [];
+    while (cursor < chars.length) {
+      const nextChars = [...lineChars, chars[cursor]];
+      const remaining = cursor < chars.length - 1;
+      const previewText = nextChars.join("") + (isLastLine && remaining ? "\u2026" : "");
+      if (estimateTextWidth(previewText, fontSize) <= safeMaxWidth || lineChars.length === 0) {
+        lineChars.push(chars[cursor]);
+        cursor += 1;
+        continue;
       }
-      watermarkNode.replaceChildren(fragment);
-    };
-    let resizeFrame = 0;
-    const queueWatermarkRender = () => {
-      if (!watermarkNode.isConnected) return;
-      cancelAnimationFrame(resizeFrame);
-      resizeFrame = requestAnimationFrame(() => {
-        renderWatermark();
+      break;
+    }
+    while (cursor < chars.length && chars[cursor] === " ") {
+      cursor += 1;
+    }
+    if (isLastLine && cursor < chars.length) {
+      lines.push(fitTextWithEllipsis([...lineChars, ...chars.slice(cursor)], safeMaxWidth, fontSize));
+      truncated = true;
+      cursor = chars.length;
+      continue;
+    }
+    lines.push(lineChars.join("").trim() || "-");
+  }
+  return {
+    lines: lines.length > 0 ? lines : ["-"],
+    truncated
+  };
+};
+var resolveMetadataMinValueWidth = (segment) => {
+  switch (segment?.kind) {
+    case "time":
+      return Math.max(148, estimateTextWidth("2026-04-23 21:27:16 UTC+8", DEFAULT_STRIP_VALUE_FONT_SIZE) + 8);
+    case "ip":
+      return Math.max(108, estimateTextWidth("255.255.255.255", DEFAULT_STRIP_VALUE_FONT_SIZE) + 8);
+    case "location":
+      return 76;
+    default:
+      return 56;
+  }
+};
+var buildMetadataRowLayout = (segments, contentWidth) => {
+  const safeSegments = Array.isArray(segments) ? segments.filter(Boolean) : [];
+  const naturalRow = buildStripRowLayout(safeSegments);
+  if (!safeSegments.length || naturalRow.totalWidth <= contentWidth) {
+    return naturalRow;
+  }
+  const sectionGap = naturalRow.sectionGap;
+  const totalLabelWidth = naturalRow.layouts.reduce((sum, segment) => sum + segment.labelWidth, 0);
+  const availableValueWidth = Math.max(
+    72,
+    Math.floor(contentWidth - totalLabelWidth - Math.max(0, safeSegments.length - 1) * sectionGap)
+  );
+  const minValueWidths = naturalRow.layouts.map((segment) => resolveMetadataMinValueWidth(segment));
+  const naturalValueWidths = naturalRow.layouts.map((segment) => segment.valueWidth);
+  const valueWidths = naturalValueWidths.slice();
+  let overflow = naturalRow.totalWidth - contentWidth;
+  const shrinkOrder = ["location", "ip", "time"];
+  shrinkOrder.forEach((kind) => {
+    if (overflow <= 0) return;
+    naturalRow.layouts.forEach((segment, index) => {
+      if (overflow <= 0 || segment.kind !== kind) return;
+      const minWidth = minValueWidths[index];
+      const reducible = Math.max(0, valueWidths[index] - minWidth);
+      if (!reducible) return;
+      const reduction = Math.min(reducible, overflow);
+      valueWidths[index] -= reduction;
+      overflow -= reduction;
+    });
+  });
+  if (overflow > 0) {
+    const minTotalWidth = minValueWidths.reduce((sum, width) => sum + width, 0);
+    if (minTotalWidth > availableValueWidth) {
+      const flexibleIndexes = naturalRow.layouts.map((segment, index) => ({ segment, index })).filter(({ segment }) => segment.kind !== "time");
+      let extraOverflow = minTotalWidth - availableValueWidth;
+      flexibleIndexes.forEach(({ index }) => {
+        if (extraOverflow <= 0) return;
+        const minFloor = 40;
+        const reducible = Math.max(0, minValueWidths[index] - minFloor);
+        if (!reducible) return;
+        const reduction = Math.min(reducible, extraOverflow);
+        valueWidths[index] -= reduction;
+        extraOverflow -= reduction;
       });
-    };
-    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 buildStripRowLayout(safeSegments, {
+    valueMaxWidths: valueWidths
   });
-  return async () => {
-    await page.evaluate((hostId) => {
-      const host = document.getElementById(hostId);
-      if (host && typeof host.__pkCleanup === "function") {
-        host.__pkCleanup();
-      }
-      host?.remove();
-    }, SCREENSHOT_WATERMARKIFY_HOST_ID).catch(() => {
-    });
+};
+var buildPromptWrapLayout = (segment, contentWidth) => {
+  const label = normalizeWhitespace(segment?.label || "Prompt") || "Prompt";
+  const rawValue = normalizeWhitespace(segment?.rawValue || segment?.value || "-") || "-";
+  const labelFontSize = DEFAULT_STRIP_LABEL_FONT_SIZE;
+  const valueFontSize = DEFAULT_STRIP_VALUE_FONT_SIZE;
+  const labelWidth = Math.max(
+    DEFAULT_STRIP_LABEL_WIDTH,
+    estimateTextWidth(label, labelFontSize) + DEFAULT_STRIP_LABEL_PADDING
+  );
+  const safeTotalWidth = Math.max(labelWidth + 56, Number(contentWidth) || 0);
+  const valueWidth = Math.max(
+    56,
+    safeTotalWidth - labelWidth - DEFAULT_STRIP_CONTENT_SAFE_PADDING_X
+  );
+  const result = splitTextToLines(rawValue, valueWidth, valueFontSize, DEFAULT_STRIP_PROMPT_MAX_LINES);
+  const lineHeight = Math.max(18, Math.round(valueFontSize * DEFAULT_STRIP_LINE_HEIGHT_RATIO));
+  const lineWidths = result.lines.map((line) => estimateTextWidth(line, valueFontSize) + DEFAULT_STRIP_VALUE_PADDING);
+  const measuredValueWidth = Math.min(
+    valueWidth,
+    Math.max(56, ...lineWidths)
+  );
+  const rowHeight = Math.round(Math.max(labelFontSize, valueFontSize) * 1.42);
+  return {
+    mode: result.lines.length === 1 ? "single" : "wrapped",
+    label,
+    rawValue,
+    labelFontSize,
+    labelWidth,
+    valueFontSize,
+    valueWidth,
+    lines: result.lines,
+    truncated: result.truncated,
+    lineHeight,
+    blockHeight: result.lines.length === 1 ? rowHeight : Math.max(lineHeight, result.lines.length * lineHeight),
+    totalWidth: labelWidth + measuredValueWidth
+  };
+};
+var buildStripLayout = (segments, contentWidth) => {
+  const safeSegments = Array.isArray(segments) ? segments.filter(Boolean) : [];
+  const promptSegment = safeSegments.find((segment) => segment.kind === "prompt") || safeSegments[0] || null;
+  const metadataSegments = safeSegments.filter((segment) => segment !== promptSegment);
+  const zoneGap = DEFAULT_STRIP_ZONE_GAP;
+  let metadataRow = buildMetadataRowLayout(
+    metadataSegments,
+    Math.max(220, contentWidth)
+  );
+  let metadataStartX = Math.max(0, contentWidth - (metadataRow?.totalWidth || 0));
+  let promptAvailableWidth = Math.max(
+    220,
+    metadataStartX - zoneGap - DEFAULT_STRIP_PROMPT_TRAILING_PADDING
+  );
+  if (promptAvailableWidth < DEFAULT_STRIP_PROMPT_MIN_TOTAL_WIDTH && metadataSegments.length > 0) {
+    const tighterMetadataWidth = Math.max(180, contentWidth - DEFAULT_STRIP_PROMPT_MIN_TOTAL_WIDTH - zoneGap);
+    metadataRow = buildMetadataRowLayout(metadataSegments, tighterMetadataWidth);
+    metadataStartX = Math.max(0, contentWidth - (metadataRow?.totalWidth || 0));
+    promptAvailableWidth = Math.max(
+      220,
+      metadataStartX - zoneGap - DEFAULT_STRIP_PROMPT_TRAILING_PADDING
+    );
+  }
+  const preferredPromptWidth = Math.min(
+    promptAvailableWidth,
+    Math.max(280, Math.round(contentWidth * DEFAULT_STRIP_PROMPT_PREFERRED_WIDTH_RATIO))
+  );
+  let promptRow = buildPromptWrapLayout(promptSegment, preferredPromptWidth);
+  if (promptRow?.truncated && promptAvailableWidth > preferredPromptWidth + 24) {
+    promptRow = buildPromptWrapLayout(promptSegment, promptAvailableWidth);
+  }
+  const contentHeight = Math.max(
+    promptRow?.blockHeight || 0,
+    metadataRow?.rowHeight || 0,
+    24
+  );
+  const verticalPadding = contentHeight > (metadataRow?.rowHeight || 0) ? 18 : 16;
+  const stripHeight = Math.max(
+    contentHeight > (metadataRow?.rowHeight || 0) ? DEFAULT_STRIP_WRAPPED_MIN_HEIGHT : DEFAULT_STRIP_ONE_LINE_HEIGHT,
+    Math.ceil(contentHeight + verticalPadding * 2)
+  );
+  return {
+    mode: "zoned",
+    height: stripHeight,
+    contentHeight,
+    promptRow,
+    promptStartX: 0,
+    metadataRow,
+    metadataStartX
   };
 };
+var renderStripRow = (row, options = {}) => {
+  const startX = Number(options.startX) || 0;
+  const centerY = Number(options.centerY) || 0;
+  const fontFamily = String(options.fontFamily || "");
+  const showDividers = options.showDividers !== false;
+  const layouts = Array.isArray(row?.layouts) ? row.layouts : [];
+  if (!layouts.length) {
+    return "";
+  }
+  const rowHeight = Math.max(18, Number(row?.rowHeight) || 18);
+  const dividerHalfHeight = Math.max(12, Math.round(rowHeight * 0.56));
+  const sectionGap = Math.max(0, Number(row?.sectionGap) || 0);
+  const svgSegments = [];
+  let currentX = startX;
+  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.54"
+                font-family="${fontFamily}"
+                font-size="${segment.labelFontSize}"
+                font-weight="650"
+                dominant-baseline="middle"
+            >${label}</text>
+            <text
+                x="${valueX}"
+                y="${centerY}"
+                fill="#111111"
+                font-family="${fontFamily}"
+                font-size="${segment.valueFontSize}"
+                font-weight="${segment.kind === "prompt" ? 760 : 710}"
+                dominant-baseline="middle"
+            >${value}</text>
+        `);
+    currentX += segment.segmentWidth;
+    if (showDividers && index < layouts.length - 1) {
+      const lineX = currentX + Math.round(sectionGap / 2);
+      svgSegments.push(`
+                <line
+                    x1="${lineX}"
+                    y1="${centerY - dividerHalfHeight}"
+                    x2="${lineX}"
+                    y2="${centerY + dividerHalfHeight}"
+                    stroke="#94a3b8"
+                    stroke-opacity="0.34"
+                    stroke-width="1"
+                />
+            `);
+      currentX += sectionGap;
+    }
+  });
+  return svgSegments.join("");
+};
+var renderStripDivider = (x, centerY, height) => {
+  const safeX = Number(x) || 0;
+  const safeCenterY = Number(centerY) || 0;
+  const safeHeight = Math.max(18, Number(height) || 18);
+  const halfHeight = Math.max(12, Math.round(safeHeight * 0.56));
+  return `
+        <line
+            x1="${safeX}"
+            y1="${safeCenterY - halfHeight}"
+            x2="${safeX}"
+            y2="${safeCenterY + halfHeight}"
+            stroke="#94a3b8"
+            stroke-opacity="0.34"
+            stroke-width="1"
+        />
+    `;
+};
+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 (!hasWatermark && !hasStrip) {
+    return "";
+  }
+  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>
+                `);
+      }
+    }
+    parts.push(`<g id="watermarks">${stamps.join("")}</g>`);
+  }
+  if (hasStrip) {
+    const logoSize = 28;
+    const logoX = DEFAULT_STRIP_PADDING_LEFT;
+    const contentStartX = logoX + logoSize + DEFAULT_STRIP_GAP;
+    const contentWidth = width - contentStartX - DEFAULT_STRIP_PADDING_RIGHT;
+    const stripLayout = buildStripLayout(meta.stripSegments, contentWidth);
+    const stripHeight = stripLayout.height;
+    const stripY = height - stripHeight;
+    const logoY = Number((stripY + (stripHeight - logoSize) / 2).toFixed(2));
+    let stripContentSvg = "";
+    const centerY = stripY + stripHeight / 2 + 1;
+    const promptRow = stripLayout.promptRow;
+    const metadataRow = stripLayout.metadataRow;
+    const promptParts = [];
+    const hasPrompt = Boolean(promptRow?.label);
+    const hasMetadata = Array.isArray(metadataRow?.layouts) && metadataRow.layouts.length > 0;
+    const zoneDividerX = hasPrompt && hasMetadata ? contentStartX + stripLayout.metadataStartX - DEFAULT_STRIP_ZONE_GAP / 2 : null;
+    if (promptRow?.mode === "single") {
+      promptParts.push(renderStripRow({
+        layouts: [
+          {
+            kind: "prompt",
+            label: promptRow.label,
+            renderValue: promptRow.lines[0] || "-",
+            labelFontSize: promptRow.labelFontSize,
+            valueFontSize: promptRow.valueFontSize,
+            labelWidth: promptRow.labelWidth,
+            segmentWidth: promptRow.labelWidth + promptRow.valueWidth
+          }
+        ],
+        sectionGap: 0,
+        rowHeight: promptRow.blockHeight
+      }, {
+        startX: contentStartX + stripLayout.promptStartX,
+        centerY,
+        fontFamily,
+        showDividers: false
+      }));
+    } else if (promptRow) {
+      const promptStartX = contentStartX + stripLayout.promptStartX;
+      const labelX = promptStartX;
+      const valueX = promptStartX + promptRow.labelWidth;
+      const blockTop = centerY - promptRow.blockHeight / 2;
+      const labelY = centerY;
+      promptParts.push(`
+                <text
+                    x="${labelX}"
+                    y="${labelY}"
+                    fill="#111111"
+                    fill-opacity="0.54"
+                    font-family="${fontFamily}"
+                    font-size="${promptRow.labelFontSize}"
+                    font-weight="650"
+                    dominant-baseline="middle"
+                >${escapeXml(promptRow.label)}</text>
+            `);
+      promptRow.lines.forEach((line, index) => {
+        const lineY = blockTop + index * promptRow.lineHeight + promptRow.lineHeight / 2;
+        promptParts.push(`
+                    <text
+                        x="${valueX}"
+                        y="${lineY}"
+                        fill="#111111"
+                        font-family="${fontFamily}"
+                        font-size="${promptRow.valueFontSize}"
+                        font-weight="760"
+                        dominant-baseline="middle"
+                    >${escapeXml(line)}</text>
+                `);
+      });
+    }
+    stripContentSvg = [
+      promptParts.join(""),
+      zoneDividerX == null ? "" : renderStripDivider(
+        zoneDividerX,
+        centerY,
+        Math.max(promptRow?.blockHeight || 0, metadataRow?.rowHeight || 0)
+      ),
+      renderStripRow(metadataRow, {
+        startX: contentStartX + stripLayout.metadataStartX,
+        centerY,
+        fontFamily,
+        showDividers: true
+      })
+    ].join("");
+    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}" />` : ""}
+                ${stripContentSvg}
+            </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 = sharp(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
 var logger11 = createInternalLogger("Share");
@@ -5495,6 +5727,20 @@ var normalizeShare = (share) => {
     xurl: normalizeXurl(source.xurl)
   };
 };
+var resolveCaptureScreenWatermarkify = (page, optionValue) => {
+  if (optionValue === false) {
+    return normalizeScreenshotWatermarkify(false);
+  }
+  const runtimeQuery = String(page?.[PageRuntimeStateKey]?.query || "").trim();
+  if (optionValue == null || optionValue === true) {
+    return normalizeScreenshotWatermarkify(runtimeQuery ? { query: runtimeQuery } : true);
+  }
+  const optionSource = optionValue && typeof optionValue === "object" ? optionValue : {};
+  return normalizeScreenshotWatermarkify({
+    ...runtimeQuery ? { query: runtimeQuery } : {},
+    ...optionSource
+  });
+};
 var getByPathSegments = (source, pathSegments) => {
   if (!Array.isArray(pathSegments) || pathSegments.length === 0) return void 0;
   let current = source;
@@ -5818,14 +6064,12 @@ var Share = {
    * @returns {Promise<string>} base64 png
    */
   async captureScreen(page, options = {}) {
-    const originalViewport = page.viewportSize();
-    const defaultBuffer = Math.round((originalViewport?.height || 1080) / 2);
+    const originalViewport = await resolveCurrentViewportSize(page);
+    const defaultBuffer = Math.round((originalViewport.height || 1080) / 2);
     const buffer = options.buffer ?? defaultBuffer;
     const restore = options.restore ?? false;
     const maxHeight = options.maxHeight ?? 8e3;
-    const screenshotWatermarkify = normalizeScreenshotWatermarkify(options.watermarkify ?? true);
-    let cleanupScreenshotWatermarkify = async () => {
-    };
+    const screenshotWatermarkify = resolveCaptureScreenWatermarkify(page, options.watermarkify);
     try {
       const maxScrollHeight = await page.evaluate(() => {
         let maxHeight2 = document.body.scrollHeight;
@@ -5849,23 +6093,26 @@ var Share = {
       });
       const targetHeight = Math.min(maxScrollHeight + buffer, maxHeight);
       await page.setViewportSize({
-        width: originalViewport?.width || 1280,
+        width: originalViewport.width,
         height: targetHeight
       });
       await delay2(1e3);
-      if (screenshotWatermarkify.enabled) {
-        const watermarkifyMeta = await resolveScreenshotWatermarkifyMeta(page, screenshotWatermarkify);
-        cleanupScreenshotWatermarkify = await installScreenshotWatermarkify(page, watermarkifyMeta);
-        await delay2(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) => {
@@ -5878,9 +6125,7 @@ var Share = {
             el.classList.remove("__pk_expanded__");
           });
         });
-        if (originalViewport) {
-          await page.setViewportSize(originalViewport);
-        }
+        await page.setViewportSize(originalViewport);
       }
     }
   }