@akairos/typeset-studio 0.2.4 → 0.2.6

package/dist/index.html

@@ -11,8 +11,8 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css" />
-    <script type="module" crossorigin src="/assets/index-C9J0f4Lf.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-3Ko1UCBU.css">
+    <script type="module" crossorigin src="/assets/index-X9ezH_RG.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-JCv_QmUn.css">
   </head>
   <body class="bg-[#fafafa] dark:bg-[#000000] text-[#171717] dark:text-[#ededed] antialiased selection:bg-[#eaeaea] selection:text-[#000000] dark:selection:bg-[#333333] dark:selection:text-[#ffffff] overflow-hidden">
     <div id="root"></div>

package/dist/lib/adapter.js

@@ -2,7 +2,7 @@ import {
   adapter_default,
   plugin,
   typesetStudioAdapter
-} from "./index-qhpfzwj4.js";
+} from "./index-p8ttqbs6.js";
 import"./index-37x76zdn.js";
 export {
   typesetStudioAdapter,

package/dist/lib/{canvas-renderer-cxnar75n.js → canvas-renderer-4jg80agt.js}

@@ -5,7 +5,7 @@ import {
   renderTypesetResultToPngs,
   resolveCanvasFont,
   resolveCanvasFontFamily
-} from "./index-zdhqg5f0.js";
+} from "./index-bf1zs3mv.js";
 import {
   registerServerFonts,
   scanLocalFonts

package/dist/lib/{index-zdhqg5f0.js → index-bf1zs3mv.js}

@@ -60,6 +60,233 @@ function computeStageDimensions(spec, safeArea, contentBottomGap = 20) {
   };
 }
 
+// src/core/canvas-style.ts
+var DEFAULT_PATTERN = { pattern: "none", color: "#527561", opacity: 0.12, size: 56 };
+var DEFAULT_BORDER = { style: "none", color: "#527561", endColor: "#d7ad72", width: 3, inset: 32, radius: 24, opacity: 0.8 };
+var PATTERN_LABELS = {
+  none: "无花纹",
+  lines: "横线",
+  grid: "网格",
+  dots: "圆点",
+  diagonal: "斜线",
+  waves: "波浪",
+  rings: "同心圆",
+  burst: "放射线",
+  checker: "棋盘格",
+  grain: "纸张颗粒"
+};
+var BORDER_LABELS = {
+  none: "无边框",
+  solid: "实线",
+  dashed: "虚线",
+  double: "双线",
+  corners: "四角装饰",
+  gradient: "渐变描边"
+};
+function validateCanvasStyle(style) {
+  if (style === undefined)
+    return;
+  if (!style || typeof style !== "object" || Array.isArray(style))
+    throw new RangeError("无效的背景与边框配置");
+  const color = (value) => {
+    if (typeof value !== "string" || !/^#[0-9a-f]{6}$/i.test(value))
+      throw new RangeError("背景装饰颜色必须是六位十六进制颜色");
+  };
+  const number = (value, min, max) => {
+    if (!Number.isFinite(value) || value < min || value > max)
+      throw new RangeError(`背景装饰参数必须在 ${min} 到 ${max} 之间`);
+  };
+  if (style.fill) {
+    const fill = style.fill;
+    if (fill.type === "solid")
+      color(fill.color);
+    else {
+      if (fill.type === "linear")
+        number(fill.angle, 0, 360);
+      else if (fill.type === "radial") {
+        number(fill.position?.x, 0, 100);
+        number(fill.position?.y, 0, 100);
+      } else
+        throw new RangeError("未知背景类型");
+      if (!Array.isArray(fill.stops) || fill.stops.length < 2 || fill.stops.length > 8)
+        throw new RangeError("渐变需要 2 到 8 个颜色节点");
+      for (const stop of fill.stops) {
+        if (!stop)
+          throw new RangeError("无效的渐变节点");
+        color(stop.color);
+        number(stop.offset, 0, 100);
+      }
+    }
+  }
+  if (style.pattern) {
+    const pattern = style.pattern;
+    if (!Object.hasOwn(PATTERN_LABELS, pattern.pattern))
+      throw new RangeError("未知背景花纹");
+    color(pattern.color);
+    number(pattern.opacity, 0, 1);
+    number(pattern.size, 16, 240);
+  }
+  if (style.border) {
+    const border = style.border;
+    if (!Object.hasOwn(BORDER_LABELS, border.style))
+      throw new RangeError("未知边框样式");
+    color(border.color);
+    color(border.endColor);
+    number(border.width, 1, 24);
+    number(border.inset, 0, 200);
+    number(border.radius, 0, 200);
+    number(border.opacity, 0, 1);
+  }
+}
+function drawCanvasFill(ctx, spec, fill) {
+  ctx.save();
+  if (fill.type === "solid")
+    ctx.fillStyle = fill.color;
+  else {
+    let gradient;
+    if (fill.type === "linear") {
+      const angle = fill.angle * Math.PI / 180;
+      const distance = Math.abs(Math.cos(angle)) * spec.width / 2 + Math.abs(Math.sin(angle)) * spec.height / 2;
+      const dx = Math.cos(angle) * distance;
+      const dy = Math.sin(angle) * distance;
+      gradient = ctx.createLinearGradient(spec.width / 2 - dx, spec.height / 2 - dy, spec.width / 2 + dx, spec.height / 2 + dy);
+    } else {
+      const x = spec.width * fill.position.x / 100;
+      const y = spec.height * fill.position.y / 100;
+      const radius = Math.hypot(Math.max(x, spec.width - x), Math.max(y, spec.height - y));
+      gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
+    }
+    for (const stop of fill.stops)
+      gradient.addColorStop(stop.offset / 100, stop.color);
+    ctx.fillStyle = gradient;
+  }
+  ctx.fillRect(0, 0, spec.width, spec.height);
+  ctx.restore();
+}
+function drawCanvasPattern(ctx, spec, decoration) {
+  if (decoration.pattern === "none" || decoration.opacity === 0)
+    return;
+  const { width, height } = spec;
+  const size = Math.max(16, decoration.size);
+  ctx.save();
+  ctx.strokeStyle = ctx.fillStyle = decoration.color;
+  ctx.globalAlpha = decoration.opacity;
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  switch (decoration.pattern) {
+    case "grid":
+    case "lines":
+      if (decoration.pattern === "grid")
+        for (let x = size / 2;x < width; x += size) {
+          ctx.moveTo(x, 0);
+          ctx.lineTo(x, height);
+        }
+      for (let y = size / 2;y < height; y += size) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+      break;
+    case "dots":
+      for (let x = size / 2;x < width; x += size)
+        for (let y = size / 2;y < height; y += size) {
+          ctx.moveTo(x + 2, y);
+          ctx.arc(x, y, 2, 0, Math.PI * 2);
+        }
+      break;
+    case "diagonal":
+      for (let x = -height;x < width; x += size) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x + height, height);
+      }
+      break;
+    case "waves":
+      for (let y = -size;y < height + size; y += size) {
+        ctx.moveTo(0, y);
+        for (let x = 0;x < width; x += size * 2)
+          ctx.bezierCurveTo(x + size * 0.5, y - size * 0.45, x + size * 1.5, y + size * 0.45, x + size * 2, y);
+      }
+      break;
+    case "rings":
+      for (let r = size;r < Math.hypot(width, height); r += size) {
+        ctx.moveTo(width * 0.82 + r, height * 0.18);
+        ctx.arc(width * 0.82, height * 0.18, r, 0, Math.PI * 2);
+      }
+      break;
+    case "burst":
+      for (let a = 0;a < Math.PI * 2; a += Math.PI / Math.max(8, Math.round(size / 3))) {
+        ctx.moveTo(width * 0.8, height * 0.2);
+        ctx.lineTo(width * 0.8 + Math.cos(a) * width * 2, height * 0.2 + Math.sin(a) * height * 2);
+      }
+      break;
+    case "checker":
+      for (let x = 0;x < width; x += size)
+        for (let y = 0;y < height; y += size)
+          if ((Math.round(x / size) + Math.round(y / size)) % 2 === 0)
+            ctx.rect(x, y, size, size);
+      break;
+    case "grain": {
+      let seed = 42;
+      const random = () => {
+        seed = Math.imul(seed, 1664525) + 1013904223 >>> 0;
+        return seed / 4294967296;
+      };
+      for (let i = 0;i < width * height / (size * 3); i++) {
+        const x = random() * width;
+        const y = random() * height;
+        ctx.rect(x, y, 0.6 + random() * 1.2, 0.6 + random() * 1.2);
+      }
+      break;
+    }
+  }
+  if (["dots", "checker", "grain"].includes(decoration.pattern))
+    ctx.fill();
+  else
+    ctx.stroke();
+  ctx.restore();
+}
+function drawCanvasBorder(ctx, spec, border) {
+  if (!border || border.style === "none" || border.opacity === 0)
+    return;
+  const inset = Math.min(border.inset + border.width / 2, Math.min(spec.width, spec.height) / 2 - 1);
+  const width = spec.width - inset * 2;
+  const height = spec.height - inset * 2;
+  ctx.save();
+  ctx.globalAlpha = border.opacity;
+  ctx.lineWidth = border.width;
+  ctx.strokeStyle = border.color;
+  if (border.style === "gradient") {
+    const gradient = ctx.createLinearGradient(0, 0, spec.width, spec.height);
+    gradient.addColorStop(0, border.color);
+    gradient.addColorStop(1, border.endColor);
+    ctx.strokeStyle = gradient;
+  }
+  if (border.style === "dashed")
+    ctx.setLineDash([border.width * 4, border.width * 3]);
+  const outline = (gap) => {
+    ctx.beginPath();
+    ctx.roundRect(inset + gap, inset + gap, width - gap * 2, height - gap * 2, Math.max(0, border.radius - gap));
+    ctx.stroke();
+  };
+  if (border.style === "corners") {
+    const length = Math.min(width, height) * 0.12;
+    for (const x of [inset, spec.width - inset])
+      for (const y of [inset, spec.height - inset]) {
+        const dx = x === inset ? 1 : -1;
+        const dy = y === inset ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(x + dx * length, y);
+        ctx.lineTo(x, y);
+        ctx.lineTo(x, y + dy * length);
+        ctx.stroke();
+      }
+  } else {
+    outline(0);
+    if (border.style === "double")
+      outline(border.width * 3 + 4);
+  }
+  ctx.restore();
+}
+
 // src/core/canvas-draw.ts
 function resolveCanvasFontFamily(fontName, isServer = false) {
   const rawFirst = (fontName || "").split(",")[0] || "";
@@ -107,10 +334,13 @@ function resolveCanvasFont(fontDesc, isServer = false) {
 async function drawPageToContext(ctx, options) {
   const { page, spec, config, totalPageCount = 1, getImage, isServer = false } = options;
   const { algorithm, theme, chrome } = config;
+  validateCanvasStyle(config.canvasStyle);
   ctx.save();
   ctx.fillStyle = theme.bgColor;
   ctx.fillRect(0, 0, spec.width, spec.height);
   ctx.restore();
+  if (config.canvasStyle?.fill)
+    drawCanvasFill(ctx, spec, config.canvasStyle.fill);
   const coverTheme = config.coverTheme;
   const drawCoverImage = async (image) => {
     if (!image)
@@ -127,28 +357,30 @@ async function drawPageToContext(ctx, options) {
     ctx.restore();
   };
   if (coverTheme) {
-    const fill = coverTheme.background.fill;
-    ctx.save();
-    if (fill.type === "solid")
-      ctx.fillStyle = fill.color;
-    else {
-      let gradient;
-      if (fill.type === "linear") {
-        const angle = fill.angle * Math.PI / 180;
-        const dx = Math.cos(angle) * spec.width / 2;
-        const dy = Math.sin(angle) * spec.height / 2;
-        gradient = ctx.createLinearGradient(spec.width / 2 - dx, spec.height / 2 - dy, spec.width / 2 + dx, spec.height / 2 + dy);
-      } else {
-        const x = spec.width * fill.position.x / 100;
-        const y = spec.height * fill.position.y / 100;
-        gradient = ctx.createRadialGradient(x, y, 0, x, y, Math.hypot(spec.width, spec.height));
+    if (!config.canvasStyle?.fill) {
+      const fill = coverTheme.background.fill;
+      ctx.save();
+      if (fill.type === "solid")
+        ctx.fillStyle = fill.color;
+      else {
+        let gradient;
+        if (fill.type === "linear") {
+          const angle = fill.angle * Math.PI / 180;
+          const dx = Math.cos(angle) * spec.width / 2;
+          const dy = Math.sin(angle) * spec.height / 2;
+          gradient = ctx.createLinearGradient(spec.width / 2 - dx, spec.height / 2 - dy, spec.width / 2 + dx, spec.height / 2 + dy);
+        } else {
+          const x = spec.width * fill.position.x / 100;
+          const y = spec.height * fill.position.y / 100;
+          gradient = ctx.createRadialGradient(x, y, 0, x, y, Math.hypot(spec.width, spec.height));
+        }
+        for (const stop of fill.stops)
+          gradient.addColorStop(stop.offset / 100, stop.color);
+        ctx.fillStyle = gradient;
       }
-      for (const stop of fill.stops)
-        gradient.addColorStop(stop.offset / 100, stop.color);
-      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, spec.width, spec.height);
+      ctx.restore();
     }
-    ctx.fillRect(0, 0, spec.width, spec.height);
-    ctx.restore();
     await drawCoverImage(coverTheme.background.image);
     if (coverTheme.background.overlay) {
       ctx.save();
@@ -158,48 +390,52 @@ async function drawPageToContext(ctx, options) {
       ctx.restore();
     }
     const decoration = coverTheme.decoration;
-    ctx.save();
-    ctx.strokeStyle = ctx.fillStyle = decoration.color;
-    ctx.globalAlpha = decoration.opacity;
-    const size = Math.max(8, decoration.size);
-    ctx.beginPath();
-    if (["lines", "grid", "dots"].includes(decoration.pattern)) {
-      for (let x = 0;x < spec.width; x += size) {
-        if (decoration.pattern === "grid") {
-          ctx.moveTo(x, 0);
-          ctx.lineTo(x, spec.height);
+    if (!config.canvasStyle?.pattern) {
+      ctx.save();
+      ctx.strokeStyle = ctx.fillStyle = decoration.color;
+      ctx.globalAlpha = decoration.opacity;
+      const size = Math.max(8, decoration.size);
+      ctx.beginPath();
+      if (["lines", "grid", "dots"].includes(decoration.pattern)) {
+        for (let x = 0;x < spec.width; x += size) {
+          if (decoration.pattern === "grid") {
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, spec.height);
+          }
+          if (decoration.pattern === "dots") {
+            for (let y = 0;y < spec.height; y += size) {
+              ctx.moveTo(x + 2, y);
+              ctx.arc(x, y, 2, 0, Math.PI * 2);
+            }
+          }
         }
-        if (decoration.pattern === "dots") {
+        if (decoration.pattern !== "dots") {
           for (let y = 0;y < spec.height; y += size) {
-            ctx.moveTo(x + 2, y);
-            ctx.arc(x, y, 2, 0, Math.PI * 2);
+            ctx.moveTo(0, y);
+            ctx.lineTo(spec.width, y);
           }
         }
-      }
-      if (decoration.pattern !== "dots") {
-        for (let y = 0;y < spec.height; y += size) {
-          ctx.moveTo(0, y);
-          ctx.lineTo(spec.width, y);
+      } else if (decoration.pattern === "rings") {
+        for (let radius = size;radius < Math.hypot(spec.width, spec.height); radius += size) {
+          ctx.moveTo(spec.width / 2 + radius, spec.height / 2);
+          ctx.arc(spec.width / 2, spec.height / 2, radius, 0, Math.PI * 2);
+        }
+      } else if (decoration.pattern === "burst") {
+        for (let angle = 0;angle < Math.PI * 2; angle += Math.PI / Math.max(8, Math.round(size / 3))) {
+          ctx.moveTo(spec.width / 2, spec.height / 2);
+          ctx.lineTo(spec.width / 2 + Math.cos(angle) * spec.width, spec.height / 2 + Math.sin(angle) * spec.height);
         }
       }
-    } else if (decoration.pattern === "rings") {
-      for (let radius = size;radius < Math.hypot(spec.width, spec.height); radius += size) {
-        ctx.moveTo(spec.width / 2 + radius, spec.height / 2);
-        ctx.arc(spec.width / 2, spec.height / 2, radius, 0, Math.PI * 2);
-      }
-    } else if (decoration.pattern === "burst") {
-      for (let angle = 0;angle < Math.PI * 2; angle += Math.PI / Math.max(8, Math.round(size / 3))) {
-        ctx.moveTo(spec.width / 2, spec.height / 2);
-        ctx.lineTo(spec.width / 2 + Math.cos(angle) * spec.width, spec.height / 2 + Math.sin(angle) * spec.height);
-      }
+      if (decoration.pattern === "dots")
+        ctx.fill();
+      else
+        ctx.stroke();
+      ctx.restore();
     }
-    if (decoration.pattern === "dots")
-      ctx.fill();
-    else
-      ctx.stroke();
-    ctx.restore();
     await drawCoverImage(decoration.image);
   }
+  if (config.canvasStyle?.pattern)
+    drawCanvasPattern(ctx, spec, config.canvasStyle.pattern);
   const { stageX, stageY } = computeStageDimensions(spec, algorithm.safeArea, algorithm.contentBottomGap);
   const isCover = config.aspectRatio === "wechat-cover-2.35";
   const showHeader = chrome?.showHeader ?? !isCover;
@@ -388,6 +624,7 @@ async function drawPageToContext(ctx, options) {
       ctx.restore();
     }
   }
+  drawCanvasBorder(ctx, spec, config.canvasStyle?.border);
 }
 
 // src/core/data-dir.ts
@@ -456,4 +693,4 @@ async function renderTypesetResultToPngs(result) {
   return outputs;
 }
 
-export { getCanvasSpec, computeStageDimensions, resolveCanvasFontFamily, resolveCanvasFont, drawPageToContext, resolveDataDir, renderPageToCanvas, renderPageToPng, renderTypesetResultToPngs };
+export { getCanvasSpec, computeStageDimensions, DEFAULT_PATTERN, DEFAULT_BORDER, validateCanvasStyle, resolveCanvasFontFamily, resolveCanvasFont, drawPageToContext, resolveDataDir, renderPageToCanvas, renderPageToPng, renderTypesetResultToPngs };

package/dist/lib/{index-t9w3p2p9.js → index-hegsbxc0.js}

@@ -1,10 +1,13 @@
 import {
+  DEFAULT_BORDER,
+  DEFAULT_PATTERN,
   computeStageDimensions,
   getCanvasSpec,
   renderPageToPng,
   renderTypesetResultToPngs,
-  resolveDataDir
-} from "./index-zdhqg5f0.js";
+  resolveDataDir,
+  validateCanvasStyle
+} from "./index-bf1zs3mv.js";
 import {
   buildLineTextFromRange,
   getLineTextCache,
@@ -2487,6 +2490,7 @@ function runTypeset(params) {
     throw new RangeError("Invalid page constraints: maxPages must be 0 or at least minPages");
   }
   validateTemplateAssets(images);
+  validateCanvasStyle(config.canvasStyle);
   if (images.some((image) => !image.repeatEveryPage && image.pageIndex != null && (!Number.isInteger(image.pageIndex) || image.pageIndex < 1 || image.pageIndex > 50))) {
     throw new RangeError("Image pageIndex must be an integer between 1 and 50");
   }
@@ -2614,6 +2618,57 @@ function runTypeset(params) {
 // src/server/routes/templates.ts
 import { existsSync, mkdirSync, readdirSync, readFileSync, unlinkSync, writeFileSync } from "fs";
 import { dirname, join } from "path";
+
+// src/core/canvas-presets.ts
+var designs = [
+  { id: "sage", name: "浅草信笺 · 径向渐变 / 圆点", fill: { type: "radial", position: { x: 15, y: 10 }, stops: [{ color: "#f8f6e8", offset: 0 }, { color: "#d0e5d7", offset: 100 }] }, pattern: "dots", ink: "#243c32", accent: "#47785c", texture: "#47785c", border: "solid", size: 48, opacity: 0.16, font: "Songti SC" },
+  { id: "sunset", name: "落日来信 · 线性渐变 / 波浪", fill: { type: "linear", angle: 70, stops: [{ color: "#fff2d8", offset: 0 }, { color: "#f1c2a2", offset: 55 }, { color: "#df9b91", offset: 100 }] }, pattern: "waves", ink: "#663b32", accent: "#ab503d", texture: "#a55f4c", border: "gradient", size: 88, opacity: 0.12, font: "Kaiti SC" },
+  { id: "blueprint", name: "工程蓝图 · 深蓝渐变 / 网格", fill: { type: "linear", angle: 115, stops: [{ color: "#142f48", offset: 0 }, { color: "#071923", offset: 100 }] }, pattern: "grid", ink: "#e6f1ec", accent: "#a1d7c6", texture: "#91c3d0", border: "corners", size: 56, opacity: 0.12, font: "PingFang SC" },
+  { id: "eclipse", name: "月蚀光场 · 径向渐变 / 圆环", fill: { type: "radial", position: { x: 85, y: 12 }, stops: [{ color: "#53747a", offset: 0 }, { color: "#182e38", offset: 45 }, { color: "#0e1d27", offset: 100 }] }, pattern: "rings", ink: "#f1eddf", accent: "#ddba80", texture: "#e3c899", border: "gradient", size: 92, opacity: 0.1, font: "Songti SC" },
+  { id: "paper", name: "旧纸书页 · 纸张颗粒 / 双线框", fill: { type: "solid", color: "#f2ead8" }, pattern: "grain", ink: "#403b30", accent: "#8a503b", texture: "#6b533e", border: "double", size: 24, opacity: 0.16, font: "Songti SC" },
+  { id: "rose", name: "玫瑰邮笺 · 柔粉渐变 / 斜线", fill: { type: "linear", angle: 120, stops: [{ color: "#fff6ef", offset: 0 }, { color: "#efd6d4", offset: 100 }] }, pattern: "diagonal", ink: "#583f45", accent: "#9f5f68", texture: "#ae777a", border: "dashed", size: 64, opacity: 0.1, font: "Kaiti SC" },
+  { id: "checker", name: "黄油棋盘 · 奶油底色 / 棋盘格", fill: { type: "solid", color: "#faf2d9" }, pattern: "checker", ink: "#3c4937", accent: "#66784c", texture: "#b5bb89", border: "solid", size: 104, opacity: 0.1, font: "PingFang SC" },
+  { id: "burst", name: "日光放射 · 暖黄渐变 / 放射线", fill: { type: "radial", position: { x: 80, y: 20 }, stops: [{ color: "#fff7d1", offset: 0 }, { color: "#e8c982", offset: 100 }] }, pattern: "burst", ink: "#58452b", accent: "#976333", texture: "#aa7739", border: "corners", size: 100, opacity: 0.12, font: "PingFang SC" },
+  { id: "ruled", name: "雾蓝手账 · 浅蓝渐变 / 横线", fill: { type: "linear", angle: 90, stops: [{ color: "#f0f5f4", offset: 0 }, { color: "#d3e3e8", offset: 100 }] }, pattern: "lines", ink: "#304d5b", accent: "#4b7484", texture: "#7294a3", border: "double", size: 64, opacity: 0.14, font: "Kaiti SC" }
+];
+var CANVAS_PRESETS = designs.map((design) => {
+  const base = getDefaultConfig("longform-3-4");
+  return {
+    ...base,
+    id: `tpl_canvas_${design.id}`,
+    name: design.name,
+    slot: "newspic_content",
+    images: [],
+    algorithm: {
+      ...base.algorithm,
+      baseFontSize: 42,
+      scaleRatio: 1.3,
+      targetFillRatio: 0.83,
+      safeArea: { top: 126, right: 108, bottom: 110, left: 108 }
+    },
+    typography: { headingFont: design.font, bodyFont: design.font },
+    theme: {
+      ...base.theme,
+      bgColor: design.fill.type === "solid" ? design.fill.color : design.fill.stops[0].color,
+      textColor: design.ink,
+      headingColor: design.ink,
+      accentColor: design.accent,
+      quoteColor: design.accent,
+      captionColor: design.accent,
+      watermarkColor: design.accent
+    },
+    chrome: { ...base.chrome, showHeader: false, showFooter: false },
+    footerText: "",
+    watermarkText: "",
+    canvasStyle: {
+      fill: design.fill,
+      pattern: { ...DEFAULT_PATTERN, pattern: design.pattern, color: design.texture, size: design.size, opacity: design.opacity },
+      border: { ...DEFAULT_BORDER, style: design.border, color: design.accent, endColor: design.texture, width: 2, inset: 38, radius: design.id === "paper" ? 0 : 22, opacity: 0.65 }
+    }
+  };
+});
+
+// src/server/routes/templates.ts
 var TEMPLATES_DIR = join(resolveDataDir(), "templates");
 function ensureTemplatesDir() {
   if (!existsSync(TEMPLATES_DIR)) {
@@ -2628,6 +2683,17 @@ function ensureTemplatesDir() {
       writeFileSync(seedMarker, "1");
     } catch {}
   }
+  const canvasMarker = join(TEMPLATES_DIR, ".canvas-presets-v1");
+  if (!existsSync(canvasMarker)) {
+    try {
+      for (const preset of CANVAS_PRESETS) {
+        const path = join(TEMPLATES_DIR, `${preset.id}.json`);
+        if (!existsSync(path))
+          writeFileSync(path, JSON.stringify(preset, null, 2), "utf-8");
+      }
+      writeFileSync(canvasMarker, "1");
+    } catch {}
+  }
 }
 var BUILTIN_PRESETS = [
   {
@@ -2937,7 +3003,8 @@ var BUILTIN_PRESETS = [
       showFooterText: true,
       showFillRatio: false
     }
-  }
+  },
+  ...CANVAS_PRESETS
 ];
 function seedDefaultTemplates() {
   if (!existsSync(TEMPLATES_DIR))
@@ -3161,6 +3228,7 @@ templatesRouter.post("/", async (c) => {
   }
   try {
     validateTemplateAssets(body.images);
+    validateCanvasStyle(body.canvasStyle);
   } catch (error) {
     return c.json({ ok: false, error: error instanceof Error ? error.message : "无效的模板素材" }, 400);
   }

package/dist/lib/{index-qhpfzwj4.js → index-p8ttqbs6.js}

@@ -103,8 +103,8 @@ async function renderRemoteBatch(studioUrl, body, outputDir, route, kind) {
 }
 async function renderLocalBatch(body, outputDir, route, kind) {
   const [{ resolveTypesetResult }, { renderTypesetResultToPngs }] = await Promise.all([
-    import("./render-xxd348m1.js"),
-    import("./canvas-renderer-cxnar75n.js")
+    import("./render-3043w6s6.js"),
+    import("./canvas-renderer-4jg80agt.js")
   ]);
   const { result } = resolveTypesetResult(body);
   const pngs = await renderTypesetResultToPngs(result);
@@ -131,7 +131,7 @@ async function renderLocalBatch(body, outputDir, route, kind) {
 }
 var typesetStudioAdapter = {
   name: "typeset-studio",
-  version: "0.2.4",
+  version: "0.2.6",
   async doctor() {
     const checks = [];
     const REMOTE_STUDIO_URL = remoteStudioUrl();

package/dist/lib/index.js

@@ -1,14 +1,14 @@
 import {
   plugin,
   typesetStudioAdapter
-} from "./index-qhpfzwj4.js";
+} from "./index-p8ttqbs6.js";
 import {
   applyTemplateImages,
   getDefaultConfig,
   resolveTypesetResult,
   runTypeset,
   validateTemplateAssets
-} from "./index-t9w3p2p9.js";
+} from "./index-hegsbxc0.js";
 import {
   drawPageToContext,
   renderPageToCanvas,
@@ -16,7 +16,7 @@ import {
   renderTypesetResultToPngs,
   resolveCanvasFont,
   resolveCanvasFontFamily
-} from "./index-zdhqg5f0.js";
+} from "./index-bf1zs3mv.js";
 import {
   readFontFamilyName,
   registerServerFonts,

package/dist/lib/{render-xxd348m1.js → render-3043w6s6.js}

@@ -1,8 +1,8 @@
 import {
   renderRouter,
   resolveTypesetResult
-} from "./index-t9w3p2p9.js";
-import"./index-zdhqg5f0.js";
+} from "./index-hegsbxc0.js";
+import"./index-bf1zs3mv.js";
 import"./index-6c43c7h4.js";
 import"./index-37x76zdn.js";
 export {

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@akairos/typeset-studio",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Algorithmic typesetting studio & zzhub-pipeline image renderer plugin",
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/aatrooox/typeset-studio.git"
+    "url": "git+https://github.com/k7airos/typeset-studio.git"
   },
-  "homepage": "https://github.com/aatrooox/typeset-studio#readme",
+  "homepage": "https://github.com/k7airos/typeset-studio#readme",
   "license": "MIT",
   "type": "module",
   "main": "./dist/lib/index.js",

package/src/adapter.ts

@@ -266,7 +266,7 @@ async function renderLocalBatch(
 
 export const typesetStudioAdapter: ImageRenderPlugin = {
   name: "typeset-studio",
-  version: "0.2.4",
+  version: "0.2.6",
 
   async doctor(): Promise<PipelinePluginDoctorCheck[]> {
     const checks: PipelinePluginDoctorCheck[] = [];