@akairos/typeset-studio 0.2.0 → 0.2.2

package/src/server/index.ts

@@ -18,7 +18,7 @@ app.get("/api/health", (c) => {
   return c.json({
     status: "ok",
     name: "Typeset Studio Server",
-    version: "0.1.0",
+    version: "0.2.2",
     time: new Date().toISOString(),
   });
 });

package/src/server/routes/fonts.ts

@@ -1,5 +1,5 @@
 import { Hono } from "hono";
-import { registerServerFonts, scanLocalFonts } from "../../core/font-loader";
+import { registerServerFonts } from "../../core/font-loader";
 
 export const fontsRouter = new Hono();
 

package/src/server/routes/templates.ts

@@ -1,20 +1,38 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, unlinkSync, writeFileSync } from "fs";
-import { join } from "path";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
 import { Hono } from "hono";
 import { getDefaultConfig } from "../../core/engine";
 import { TemplateSlot, TypesetConfig } from "../../core/types";
 
-const TEMPLATES_DIR = join(process.cwd(), "data", "templates");
+export function resolveDataDir(): string {
+  if (process.env.TYPESET_DATA_DIR) {
+    return process.env.TYPESET_DATA_DIR;
+  }
+  const currentDir = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
+  const candidateLib = resolve(currentDir, "../../data");
+  if (existsSync(candidateLib)) return candidateLib;
+  const candidateSrc = resolve(currentDir, "../../../data");
+  if (existsSync(candidateSrc)) return candidateSrc;
+  const candidateCwd = resolve(process.cwd(), "data");
+  if (existsSync(candidateCwd)) return candidateCwd;
+  return candidateLib;
+}
+
+const TEMPLATES_DIR = join(resolveDataDir(), "templates");
 
 function ensureTemplatesDir(): void {
   if (!existsSync(TEMPLATES_DIR)) {
-    mkdirSync(TEMPLATES_DIR, { recursive: true });
+    try {
+      mkdirSync(TEMPLATES_DIR, { recursive: true });
+    } catch {
+      // Ignore write errors in read-only environments
+    }
   }
   seedDefaultTemplates();
 }
 
-function seedDefaultTemplates(): void {
-  const presets: TypesetConfig[] = [
+export const BUILTIN_PRESETS: TypesetConfig[] = [
     {
       ...getDefaultConfig("wechat-cover-2.35"),
       id: "tpl_wechat_cover_minimal",
@@ -325,13 +343,21 @@ function seedDefaultTemplates(): void {
     },
   ];
 
-  for (const preset of presets) {
+function seedDefaultTemplates(): void {
+  if (!existsSync(TEMPLATES_DIR)) return;
+  for (const preset of BUILTIN_PRESETS) {
     const filePath = join(TEMPLATES_DIR, `${preset.id}.json`);
-    writeFileSync(filePath, JSON.stringify(preset, null, 2), "utf-8");
+    if (!existsSync(filePath)) {
+      try {
+        writeFileSync(filePath, JSON.stringify(preset, null, 2), "utf-8");
+      } catch {
+        // Ignore write failures in package directories
+      }
+    }
   }
 }
 
-const DEFAULT_SETTINGS_PATH = join(process.cwd(), "data", "default-template.json");
+const DEFAULT_SETTINGS_PATH = join(resolveDataDir(), "default-template.json");
 
 export const BUILTIN_SLOT_DEFAULTS: Record<TemplateSlot, string> = {
   article_cover: "tpl_wechat_cover_minimal",
@@ -411,7 +437,21 @@ export function setDefaultTemplateId(id: string): void {
 }
 
 export function findTemplateByKeyOrName(key: string): TypesetConfig | null {
-  ensureTemplatesDir();
+  const lowerKey = key.trim().toLowerCase();
+
+  // 1. Direct match in built-in memory presets
+  const builtin = BUILTIN_PRESETS.find(
+    (p) => p.id?.toLowerCase() === lowerKey || p.name.toLowerCase() === lowerKey,
+  );
+  if (builtin) return builtin;
+
+  // 2. Partial match in built-in memory presets
+  const builtinPartial = BUILTIN_PRESETS.find((p) => p.name.toLowerCase().includes(lowerKey));
+  if (builtinPartial) return builtinPartial;
+
+  // 3. Scan disk if templates directory exists
+  if (!existsSync(TEMPLATES_DIR)) return null;
+
   const directPath = join(TEMPLATES_DIR, `${key}.json`);
   if (existsSync(directPath)) {
     try {
@@ -421,10 +461,10 @@ export function findTemplateByKeyOrName(key: string): TypesetConfig | null {
     }
   }
 
-  // Scan all templates
+  // Scan all templates on disk
   const files = readdirSync(TEMPLATES_DIR).filter((f) => f.endsWith(".json"));
-  const lowerKey = key.trim().toLowerCase();
 
+  const templates: TypesetConfig[] = [];
   for (const file of files) {
     try {
       const content = readFileSync(join(TEMPLATES_DIR, file), "utf-8");
@@ -432,25 +472,14 @@ export function findTemplateByKeyOrName(key: string): TypesetConfig | null {
       if (tpl.id?.toLowerCase() === lowerKey || tpl.name.toLowerCase() === lowerKey) {
         return tpl;
       }
+      templates.push(tpl);
     } catch {
       // ignore
     }
   }
 
-  // Partial match by name
-  for (const file of files) {
-    try {
-      const content = readFileSync(join(TEMPLATES_DIR, file), "utf-8");
-      const tpl = JSON.parse(content) as TypesetConfig;
-      if (tpl.name.toLowerCase().includes(lowerKey)) {
-        return tpl;
-      }
-    } catch {
-      // ignore
-    }
-  }
-
-  return null;
+  // 精确匹配优先，名称模糊匹配复用已读取的模板。
+  return templates.find((tpl) => tpl.name.toLowerCase().includes(lowerKey)) ?? null;
 }
 
 export const templatesRouter = new Hono();

package/src/web/App.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import { toPng } from "html-to-image";
 import { AuthModal } from "./components/AuthModal";
 import { CanvasViewport } from "./components/CanvasViewport";
 import { EditorSidebar } from "./components/EditorSidebar";
@@ -197,7 +196,6 @@ export const App: React.FC = () => {
           }
         }
         if (exportSucceeded) {
-          setIsExporting(false);
           return;
         }
       }

package/src/web/components/EditorSidebar.tsx

@@ -56,6 +56,26 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({
     const file = e.target.files?.[0];
     if (!file) return;
 
+    // 上传失败时仍可用本地图片继续编辑。
+    const addUploadedImage = (src: string) => onAddImage({
+      src,
+      alt: file.name,
+      caption: "",
+      x: 40,
+      y: 400,
+      width: 440,
+      height: 300,
+      captionHeight: 36,
+      layoutPreset: "auto",
+    });
+    const readLocalImage = () => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result === "string") addUploadedImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    };
+
     setIsUploading(true);
     try {
       const formData = new FormData();
@@ -69,56 +89,12 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({
 
       const data = await res.json();
       if (data.ok && data.url) {
-        onAddImage({
-          src: data.url,
-          alt: file.name,
-          caption: "",
-          x: 40,
-          y: 400,
-          width: 440,
-          height: 300,
-          captionHeight: 36,
-          layoutPreset: "auto",
-        });
+        addUploadedImage(data.url);
       } else {
-        // Fallback to FileReader base64
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          if (event.target?.result) {
-            onAddImage({
-              src: event.target.result as string,
-              alt: file.name,
-              caption: "",
-              x: 40,
-              y: 400,
-              width: 440,
-              height: 300,
-              captionHeight: 36,
-              layoutPreset: "auto",
-            });
-          }
-        };
-        reader.readAsDataURL(file);
+        readLocalImage();
       }
     } catch {
-      // Fallback to base64
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        if (event.target?.result) {
-          onAddImage({
-            src: event.target.result as string,
-            alt: file.name,
-            caption: "",
-            x: 40,
-            y: 400,
-            width: 440,
-            height: 300,
-            captionHeight: 36,
-            layoutPreset: "auto",
-          });
-        }
-      };
-      reader.readAsDataURL(file);
+      readLocalImage();
     } finally {
       setIsUploading(false);
       if (fileInputRef.current) fileInputRef.current.value = "";
@@ -375,7 +351,7 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({
                           <select
                             value={img.layoutPreset || "auto"}
                             onChange={(e) =>
-                              onUpdateImage(img.id, { layoutPreset: e.target.value as any })
+                              onUpdateImage(img.id, { layoutPreset: e.target.value as FlowImage["layoutPreset"] })
                             }
                             className="w-full bg-white dark:bg-[#181818] border border-[#d4d4d4] dark:border-[#262626] rounded px-1.5 py-1 text-black dark:text-white text-[11px] focus:outline-none"
                           >

package/src/web/components/Header.tsx

@@ -52,7 +52,7 @@ export const Header: React.FC<HeaderProps> = ({
           </span>
           <span>Typeset Studio</span>
         </div>
-        <span className="text-xs text-[#888888] dark:text-[#555555] font-mono hidden md:inline">v0.1.0</span>
+        <span className="text-xs text-[#888888] dark:text-[#555555] font-mono hidden md:inline">v0.2.2</span>
         <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-[#f5f5f5] dark:bg-[#111111] border border-[#e5e5e5] dark:border-[#222222] text-[11px] text-emerald-600 dark:text-[#00e676]">
           <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-[#00e676] animate-pulse" />
           <span className="font-mono">Ready</span>

package/src/web/components/TemplateModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Check, FolderPlus, Trash2, X, Sparkles, Star, Tag, ChevronDown } from "lucide-react";
+import { Check, FolderPlus, Trash2, X, Sparkles, Star } from "lucide-react";
 import { TemplateSlot, TypesetConfig } from "../../core/types";
 
 interface TemplateModalProps {
@@ -20,12 +20,6 @@ interface SlotsResponse {
   };
 }
 
-const SLOT_LABELS: Record<TemplateSlot, string> = {
-  article_cover: "文章封面 (2.35:1)",
-  newspic_cover: "贴图封面 (3:4)",
-  newspic_content: "贴图内容 (3:4)",
-};
-
 export const TemplateModal: React.FC<TemplateModalProps> = ({
   isOpen,
   onClose,
@@ -114,7 +108,6 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({
         id: undefined, // auto generate
         name: templateName.trim(),
         slot: saveSlot !== "none" ? saveSlot : undefined,
-        images: currentConfig.images ? [...currentConfig.images] : undefined,
       };
 
       const res = await fetch("/api/templates", {
@@ -192,7 +185,7 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({
               />
               <select
                 value={saveSlot}
-                onChange={(e) => setSaveSlot(e.target.value as any)}
+                onChange={(e) => setSaveSlot(e.target.value as TemplateSlot | "none")}
                 className="bg-white dark:bg-[#0a0a0a] border border-[#d4d4d4] dark:border-[#2a2a2a] rounded px-2 py-1.5 text-xs text-black dark:text-white focus:outline-none focus:border-black dark:focus:border-[#444444]"
               >
                 <option value="article_cover">槽位: 文章封面 (2.35:1)</option>
@@ -224,11 +217,7 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({
                 <span>默认槽位配置账号:</span>
                 <select
                   value={account}
-                  onChange={(e) => {
-                    const acc = e.target.value;
-                    setAccount(acc);
-                    fetchSlots(acc);
-                  }}
+                  onChange={(e) => setAccount(e.target.value)}
                   className="bg-white dark:bg-[#141414] border border-[#d4d4d4] dark:border-[#2a2a2a] rounded px-2 py-0.5 text-xs text-black dark:text-white focus:outline-none font-mono"
                 >
                   <option value="default">default (主账号)</option>

package/src/web/hooks/useTypeset.ts

@@ -27,9 +27,23 @@ const INITIAL_MARKDOWN = `# 大模型纯算法排版深度剖析
 - 任意画板比例智能自适应
 `;
 
+// 统一预设配图的页内序号计算，手动坐标和自由图层保持原样。
+function resolvePresetImage(
+  image: FlowImage,
+  images: FlowImage[],
+  stageWidth: number,
+  stageHeight: number,
+): FlowImage {
+  if (image.isAbsolute || !image.layoutPreset || image.layoutPreset === "custom") return image;
+  const page = image.pageIndex || 1;
+  const indexOnPage = images.filter((item) => (item.pageIndex || 1) === page)
+    .findIndex((item) => item.id === image.id);
+  return resolveImagePlacement(image, indexOnPage, stageWidth, stageHeight);
+}
+
 export function useTypeset() {
-  const [aspectRatio, setAspectRatio] = useState<AspectRatioType>("longform-3-4");
   const [config, setConfig] = useState<TypesetConfig>(() => getDefaultConfig("longform-3-4"));
+  const aspectRatio = config.aspectRatio;
   const [markdown, setMarkdown] = useState<string>(INITIAL_MARKDOWN);
   const [images, setImages] = useState<FlowImage[]>([
     {
@@ -117,7 +131,6 @@ export function useTypeset() {
   }, []);
 
   const switchAspectRatio = (ratio: AspectRatioType) => {
-    setAspectRatio(ratio);
     const spec = getCanvasSpec(ratio);
     const nextDefault = getDefaultConfig(ratio);
     const { stageWidth, stageHeight } = computeStageDimensions(
@@ -125,24 +138,7 @@ export function useTypeset() {
       nextDefault.algorithm.safeArea,
       nextDefault.algorithm.contentBottomGap,
     );
-    setImages((prev) =>
-      prev.map((img) => {
-        if (!img.isAbsolute && img.layoutPreset && img.layoutPreset !== "custom") {
-          const page = img.pageIndex || 1;
-          const samePageList = prev.filter((im) => (im.pageIndex || 1) === page);
-          const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === img.id));
-          const resolved = resolveImagePlacement(img, indexOnPage, stageWidth, stageHeight);
-          return {
-            ...img,
-            x: resolved.x,
-            y: resolved.y,
-            width: resolved.width,
-            height: resolved.height,
-          };
-        }
-        return img;
-      }),
-    );
+    setImages((prev) => prev.map((image) => resolvePresetImage(image, prev, stageWidth, stageHeight)));
     setConfig((prev) => {
       return {
         ...prev,
@@ -235,28 +231,15 @@ export function useTypeset() {
 
       // If non-custom flow preset, recalculate clean coordinates based on its page index
       if (!updatedImg.isAbsolute && updatedImg.layoutPreset && updatedImg.layoutPreset !== "custom") {
-        const page = updatedImg.pageIndex || 1;
-        const samePageList = nextImages.filter((im) => (im.pageIndex || 1) === page);
-        const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === id));
-
         const spec = getCanvasSpec(aspectRatio);
         const { stageWidth, stageHeight } = computeStageDimensions(
           spec,
           config.algorithm.safeArea,
           config.algorithm.contentBottomGap,
         );
-        const resolved = resolveImagePlacement(updatedImg, indexOnPage, stageWidth, stageHeight);
-        return nextImages.map((im) =>
-          im.id === id
-            ? {
-                ...im,
-                x: resolved.x,
-                y: resolved.y,
-                width: resolved.width,
-                height: resolved.height,
-              }
-            : im,
-        );
+        return nextImages.map((image) => image.id === id
+          ? resolvePresetImage(image, nextImages, stageWidth, stageHeight)
+          : image);
       }
 
       return nextImages;
@@ -272,22 +255,7 @@ export function useTypeset() {
         config.algorithm.safeArea,
         config.algorithm.contentBottomGap,
       );
-      return remaining.map((img) => {
-        if (!img.isAbsolute && img.layoutPreset && img.layoutPreset !== "custom") {
-          const page = img.pageIndex || 1;
-          const samePageList = remaining.filter((im) => (im.pageIndex || 1) === page);
-          const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === img.id));
-          const resolved = resolveImagePlacement(img, indexOnPage, stageWidth, stageHeight);
-          return {
-            ...img,
-            x: resolved.x,
-            y: resolved.y,
-            width: resolved.width,
-            height: resolved.height,
-          };
-        }
-        return img;
-      });
+      return remaining.map((image) => resolvePresetImage(image, remaining, stageWidth, stageHeight));
     });
   };
 
@@ -309,28 +277,12 @@ export function useTypeset() {
         config.algorithm.contentBottomGap,
       );
 
-      return next.map((img) => {
-        if (!img.isAbsolute && img.layoutPreset && img.layoutPreset !== "custom") {
-          const page = img.pageIndex || 1;
-          const samePageList = next.filter((im) => (im.pageIndex || 1) === page);
-          const indexOnPage = Math.max(0, samePageList.findIndex((im) => im.id === img.id));
-          const resolved = resolveImagePlacement(img, indexOnPage, stageWidth, stageHeight);
-          return {
-            ...img,
-            x: resolved.x,
-            y: resolved.y,
-            width: resolved.width,
-            height: resolved.height,
-          };
-        }
-        return img;
-      });
+      return next.map((image) => resolvePresetImage(image, next, stageWidth, stageHeight));
     });
   };
 
   const loadTemplate = (tpl: TypesetConfig) => {
     setConfig(tpl);
-    setAspectRatio(tpl.aspectRatio);
     if (tpl.images) {
       setImages((prev) => applyTemplateImages(prev, tpl.images));
     }