@zzclub/pipeline 0.1.0

package/dist/assets/imgx/assets/browser/obstacle-flow.js

@@ -0,0 +1,326 @@
+export function createObstacleFlowRuntime(options) {
+  const {
+    prepareWithSegments,
+    layoutNextLineRange,
+    obstacleGap,
+    minSlotWidth,
+    renderLine,
+    renderImage,
+  } = options;
+
+  const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+  function compareCursor(a, b) {
+    if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
+    return a.graphemeIndex - b.graphemeIndex;
+  }
+
+  function clampIntervals(intervals, width) {
+    const sorted = intervals
+      .map(interval => ({
+        left: Math.max(0, interval.left),
+        right: Math.min(width, interval.right),
+      }))
+      .filter(interval => interval.right - interval.left >= minSlotWidth)
+      .sort((a, b) => a.left - b.left);
+
+    const merged = [];
+    for (const interval of sorted) {
+      const last = merged[merged.length - 1];
+      if (last && interval.left <= last.right) {
+        last.right = Math.max(last.right, interval.right);
+        continue;
+      }
+      merged.push({ ...interval });
+    }
+
+    return merged.map(interval => ({ left: interval.left, width: interval.right - interval.left }));
+  }
+
+  function getIntervalsForBand(y, lineHeight, width, obstacles) {
+    let intervals = [{ left: 0, right: width }];
+    const bandTop = y;
+    const bandBottom = y + lineHeight;
+
+    for (const obstacle of obstacles) {
+      const obstacleTop = obstacle.y;
+      const obstacleBottom = obstacle.y + (obstacle.occupiedHeight ?? obstacle.height);
+      if (bandBottom <= obstacleTop || bandTop >= obstacleBottom) continue;
+
+      const next = [];
+      for (const interval of intervals) {
+        const obstacleLeft = Math.max(interval.left, obstacle.x - obstacleGap);
+        const obstacleRight = Math.min(interval.right, obstacle.x + obstacle.width + obstacleGap);
+        if (obstacleRight <= interval.left || obstacleLeft >= interval.right) {
+          next.push(interval);
+          continue;
+        }
+        if (obstacleLeft - interval.left >= minSlotWidth) {
+          next.push({ left: interval.left, right: obstacleLeft });
+        }
+        if (interval.right - obstacleRight >= minSlotWidth) {
+          next.push({ left: obstacleRight, right: interval.right });
+        }
+      }
+      intervals = next.length > 0 ? next : intervals;
+    }
+
+    const clamped = clampIntervals(intervals, width);
+    return clamped.length > 0 ? clamped : [{ left: 0, width }];
+  }
+
+  function chooseLine(prepared, cursor, intervals) {
+    let best = null;
+    for (const interval of intervals) {
+      const line = layoutNextLineRange(prepared, cursor, interval.width);
+      if (line === null) continue;
+      if (best === null || compareCursor(line.end, best.line.end) > 0) {
+        best = { line, interval };
+      }
+    }
+    return best;
+  }
+
+  function applyTextIndent(intervals, indent) {
+    if (!indent || indent <= 0) return intervals;
+    return intervals
+      .map(interval => ({
+        left: interval.left + indent,
+        width: interval.width - indent,
+      }))
+      .filter(interval => interval.width >= minSlotWidth);
+  }
+
+  function segmentToGraphemes(text) {
+    return Array.from(graphemeSegmenter.segment(text), entry => entry.segment);
+  }
+
+  function materializeLineText(prepared, line) {
+    if (line.start.segmentIndex === line.end.segmentIndex) {
+      const segment = prepared.segments[line.start.segmentIndex] || "";
+      const graphemes = segmentToGraphemes(segment);
+      return graphemes.slice(line.start.graphemeIndex, line.end.graphemeIndex).join("");
+    }
+
+    const parts = [];
+    for (let segmentIndex = line.start.segmentIndex; segmentIndex <= line.end.segmentIndex; segmentIndex++) {
+      const segment = prepared.segments[segmentIndex] || "";
+      const graphemes = segmentToGraphemes(segment);
+      if (segmentIndex === line.start.segmentIndex) {
+        parts.push(graphemes.slice(line.start.graphemeIndex).join(""));
+        continue;
+      }
+      if (segmentIndex === line.end.segmentIndex) {
+        parts.push(graphemes.slice(0, line.end.graphemeIndex).join(""));
+        continue;
+      }
+      parts.push(segment);
+    }
+    return parts.join("");
+  }
+
+  function normalizeObstacles(width, height, bodyImages) {
+    const obstacles = [];
+    for (const bodyImage of bodyImages) {
+      const obstacle = {
+        x: Math.max(0, Math.min(width - bodyImage.width, bodyImage.x)),
+        y: Math.max(0, Math.min(height - bodyImage.height, bodyImage.y)),
+        width: Math.min(width, bodyImage.width),
+        height: Math.min(height, bodyImage.height),
+        occupiedHeight: Math.min(height, bodyImage.height),
+        src: bodyImage.src,
+        alt: bodyImage.alt || "body image",
+        caption: bodyImage.caption || "",
+        captionHeight: bodyImage.caption ? 50 : 0,
+      };
+      obstacles.push(obstacle);
+    }
+    return obstacles;
+  }
+
+  function toCaptionLines(obstacles, width, height) {
+    const lines = [];
+    for (const obstacle of obstacles) {
+      if (!obstacle.caption) continue;
+      const captionY = obstacle.y + obstacle.height + 10;
+      if (captionY + 40 > height) continue;
+      lines.push({
+        text: obstacle.caption,
+        x: obstacle.x,
+        y: captionY,
+        className: "body-caption",
+        maxWidth: Math.min(obstacle.width, width - obstacle.x),
+      });
+      obstacle.occupiedHeight += obstacle.captionHeight + 10;
+    }
+    return lines;
+  }
+
+  function layoutPage(preparedBlocks, width, height, bodyImages, startBlockIndex, startCursor) {
+    const obstacles = normalizeObstacles(width, height, bodyImages);
+    const captionLines = toCaptionLines(obstacles, width, height);
+    const lines = [];
+    let y = 0;
+    let currentBlockIndex = startBlockIndex;
+    let cursor = startCursor;
+    let progressed = false;
+
+    for (let index = startBlockIndex; index < preparedBlocks.length; index++) {
+      const block = preparedBlocks[index];
+      currentBlockIndex = index;
+      const textIndent = block.textIndent ?? 0;
+      let firstLineOfBlock = cursor.segmentIndex === 0 && cursor.graphemeIndex === 0;
+      if (cursor.segmentIndex === 0 && cursor.graphemeIndex === 0) {
+        y += block.gapBefore ?? 0;
+      }
+
+      while (true) {
+        if (y + block.lineHeight > height) {
+          return {
+            lines,
+            images: obstacles,
+            captionLines,
+            nextBlockIndex: currentBlockIndex,
+            nextCursor: cursor,
+            done: false,
+            progressed,
+            textBottom: lines.length > 0 ? lines[lines.length - 1].y : 0,
+          };
+        }
+        const intervals = applyTextIndent(
+          getIntervalsForBand(y, block.lineHeight, width, obstacles),
+          textIndent,
+        );
+        const choice = chooseLine(block.prepared, cursor, intervals);
+        if (choice === null || compareCursor(choice.line.end, cursor) <= 0) break;
+        lines.push({
+          text: materializeLineText(block.prepared, choice.line),
+          x: choice.interval.left,
+          y,
+          className: block.className,
+          bullet: firstLineOfBlock ? block.bullet : undefined,
+          bulletX: firstLineOfBlock && textIndent > 0 ? choice.interval.left - textIndent : undefined,
+        });
+        cursor = choice.line.end;
+        y += block.lineHeight;
+        progressed = true;
+        firstLineOfBlock = false;
+      }
+
+      const intervals = applyTextIndent(
+        getIntervalsForBand(y, block.lineHeight, width, obstacles),
+        textIndent,
+      );
+      const nextChoice = y + block.lineHeight <= height ? chooseLine(block.prepared, cursor, intervals) : null;
+      if (nextChoice !== null && compareCursor(nextChoice.line.end, cursor) > 0) {
+        return {
+          lines,
+          images: obstacles,
+          captionLines,
+          nextBlockIndex: currentBlockIndex,
+          nextCursor: cursor,
+          done: false,
+          progressed,
+          textBottom: lines.length > 0 ? lines[lines.length - 1].y : 0,
+        };
+      }
+
+      y += block.gapAfter ?? 0;
+      cursor = { segmentIndex: 0, graphemeIndex: 0 };
+      currentBlockIndex = index + 1;
+      if (y > height) {
+        return {
+          lines,
+          images: obstacles,
+          captionLines,
+          nextBlockIndex: currentBlockIndex,
+          nextCursor: cursor,
+          done: false,
+          progressed,
+          textBottom: lines.length > 0 ? lines[lines.length - 1].y : 0,
+        };
+      }
+    }
+
+    // textBottom: y position after the last rendered line (before gapAfter of last block)
+    const textBottom = lines.length > 0 ? lines[lines.length - 1].y : 0;
+    return {
+      lines,
+      images: obstacles,
+      captionLines,
+      nextBlockIndex: preparedBlocks.length,
+      nextCursor: { segmentIndex: 0, graphemeIndex: 0 },
+      done: true,
+      progressed,
+      textBottom,
+    };
+  }
+
+  function layoutBlocks(blocks, width, height, bodyImages) {
+    const preparedBlocks = blocks.map(block => ({
+      ...block,
+      prepared: prepareWithSegments(block.text, block.font, { whiteSpace: "pre-wrap" }),
+    }));
+    const result = layoutPage(
+      preparedBlocks,
+      width,
+      height,
+      bodyImages,
+      0,
+      { segmentIndex: 0, graphemeIndex: 0 },
+    );
+    for (const obstacle of result.images) {
+      renderImage(obstacle);
+    }
+    for (const line of result.captionLines) {
+      renderLine(line.text, line.x, line.y, {
+        className: line.className,
+        maxWidth: line.maxWidth,
+      });
+    }
+    for (const line of result.lines) {
+      renderLine(line.text, line.x, line.y, {
+        className: line.className,
+      });
+    }
+  }
+
+  function paginateBlocks(blocks, width, height, bodyImages, options = {}) {
+    const preparedBlocks = blocks.map(block => ({
+      ...block,
+      prepared: prepareWithSegments(block.text, block.font, { whiteSpace: "pre-wrap" }),
+    }));
+    const pages = [];
+    let blockIndex = 0;
+    let cursor = { segmentIndex: 0, graphemeIndex: 0 };
+    let imageIndex = 0;
+    const pageImageLimit = typeof options.pageImageLimit === "number" ? options.pageImageLimit : 2;
+    const pageImageGroups = Array.isArray(options.pageImageGroups) ? options.pageImageGroups : null;
+
+    while (blockIndex < blocks.length) {
+      const pageImages = pageImageGroups
+        ? pageImageGroups[pages.length] ?? []
+        : bodyImages.slice(imageIndex, imageIndex + pageImageLimit);
+      const result = layoutPage(preparedBlocks, width, height, pageImages, blockIndex, cursor);
+      if (!result.progressed && result.lines.length === 0) break;
+      pages.push({
+        lines: [...result.lines, ...result.captionLines],
+        images: result.images,
+        textBottom: result.textBottom ?? 0,
+      });
+      blockIndex = result.nextBlockIndex;
+      cursor = result.nextCursor;
+      if (!pageImageGroups) {
+        imageIndex += pageImages.length;
+      }
+      if (result.done) break;
+    }
+
+    return pages;
+  }
+
+  return {
+    layoutBlocks,
+    paginateBlocks,
+  };
+}

package/dist/assets/imgx/assets/icons/clover.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- 四叶草 - 四个圆形叶片 + 茎 -->
+  <!-- 左叶 -->
+  <ellipse cx="35" cy="50" rx="18" ry="13" fill="#22a854" transform="rotate(-45 35 50)"/>
+  <!-- 右叶 -->
+  <ellipse cx="65" cy="50" rx="18" ry="13" fill="#22a854" transform="rotate(45 65 50)"/>
+  <!-- 上叶 -->
+  <ellipse cx="50" cy="35" rx="13" ry="18" fill="#27c25e" transform="rotate(45 50 35)"/>
+  <!-- 下叶 -->
+  <ellipse cx="50" cy="65" rx="13" ry="18" fill="#27c25e" transform="rotate(-45 50 65)"/>
+  <!-- 中心 -->
+  <circle cx="50" cy="50" r="7" fill="#1a8a40"/>
+  <!-- 茎 -->
+  <path d="M50 57 Q55 70 52 82" stroke="#1a8a40" stroke-width="3" fill="none" stroke-linecap="round"/>
+</svg>

package/dist/assets/imgx/assets/icons/openclaw-logo.svg

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Lobster Claw Silhouette -->
+  <path d="M60 10 C30 10 15 35 15 55 C15 75 30 95 45 100 L45 110 L55 110 L55 100 C55 100 60 102 65 100 L65 110 L75 110 L75 100 C90 95 105 75 105 55 C105 35 90 10 60 10Z" fill="url(#lobster-gradient)" class="claw-body"/>
+  <!-- Left Claw -->
+  <path d="M20 45 C5 40 0 50 5 60 C10 70 20 65 25 55 C28 48 25 45 20 45Z" fill="url(#lobster-gradient)" class="claw-left"/>
+  <!-- Right Claw -->
+  <path d="M100 45 C115 40 120 50 115 60 C110 70 100 65 95 55 C92 48 95 45 100 45Z" fill="url(#lobster-gradient)" class="claw-right"/>
+  <!-- Antenna -->
+  <path d="M45 15 Q35 5 30 8" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round"/>
+  <path d="M75 15 Q85 5 90 8" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round"/>
+  <!-- Eyes -->
+  <circle cx="45" cy="35" r="6" fill="#0d1117"/>
+  <circle cx="75" cy="35" r="6" fill="#0d1117"/>
+  <circle cx="46" cy="34" r="2" fill="#00e5ff"/>
+  <circle cx="76" cy="34" r="2" fill="#00e5ff"/>
+  <defs>
+    <linearGradient id="lobster-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff4d4d"/>
+      <stop offset="100%" stop-color="#e8312a"/>
+    </linearGradient>
+  </defs>
+</svg>

package/dist/assets/imgx/assets/icons/zzclub-logo-gray.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446.8 446.8">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ccc;
+      }
+
+      .cls-2 {
+        fill: none;
+        stroke: #ccc;
+        stroke-miterlimit: 10;
+        stroke-width: 10px;
+      }
+    </style>
+  </defs>
+  <g id="_图层_1-2" data-name="图层 1">
+    <path class="cls-2" d="M55.51,363.1C23.97,325.24,5,276.54,5,223.4,5,102.78,102.78,5,223.4,5c54.85,0,104.98,20.22,143.34,53.61"/>
+    <path class="cls-2" d="M387.72,79.53c33.67,38.43,54.08,88.77,54.08,143.87,0,120.62-97.78,218.4-218.4,218.4-58.26,0-111.2-22.82-150.36-60"/>
+    <g>
+      <path class="cls-1" d="M89.56,81.07v46.78c0,4.2,3.94,7.6,8.8,7.6h132.97c7.57,0,11.61,7.71,6.61,12.62l-157.95,155.15c-1.41,1.39-2.19,3.17-2.19,5.02v12.26c0,6.92,9.85,10.24,15.28,5.15l255.31-239.42c5.19-4.87,1.19-12.75-6.48-12.75H98.36c-4.86,0-8.8,3.4-8.8,7.6Z"/>
+      <path class="cls-1" d="M363.12,133.88v-16.59c0-6.92-9.85-10.24-15.28-5.15l-255.69,239.78c-5.19,4.87-1.19,12.75,6.48,12.75h261.57c4.86,0,8.8-3.4,8.8-7.6v-47.32c0-4.2-3.94-7.6-8.8-7.6h-148.54c-7.61,0-11.63-7.77-6.56-12.66l155.79-150.55c1.44-1.39,2.24-3.2,2.24-5.06Z"/>
+    </g>
+  </g>
+</svg>