@zzclub/pipeline 0.13.2 → 0.16.0

package/src/providers/publish-core.ts

@@ -8,6 +8,9 @@ import type { PipelineConfig, ResolvedWorkspacePaths } from "../config";
 import type { PublishResult, PublishTarget, WorkflowState } from "../state";
 import { getPublishProvider, type PublishRouteContext } from "./index";
 import { reportProgress } from "../monitor/recorder";
+import { join } from "node:path";
+import { resolveConfigRelativePath } from "../config";
+import { readArticleTheme, snapshotArticleTheme, type ArticleThemePackage } from "../article-theme";
 
 export interface PublishTargetError {
   route: string;
@@ -54,6 +57,7 @@ export function filterIdempotent(
   existingResults: PublishResult[],
   contentVersion: number,
   renderVersion: number,
+  themeHashes?: Map<string, string | null>,
 ): PublishTarget[] {
   return targets.filter((target) => {
     const existing = existingResults.find(
@@ -64,7 +68,8 @@ export function filterIdempotent(
         r.content_version === contentVersion &&
         r.render_version === renderVersion,
     );
-    return !existing;
+    // 模板变化必须重新导出；旧结果无模板时继续兼容。
+    return !existing || (themeHashes && (existing.article_theme_hash ?? null) !== (themeHashes.get(`${target.route}@${target.account}`) ?? null));
   });
 }
 
@@ -92,11 +97,32 @@ export async function executePublishTargets(
   const { state, targets, dryRun, config, workspacePaths, onResult } = params;
 
   const deduped = dedupeTargets(targets);
+  const themes = new Map<string, ArticleThemePackage>();
+  const themeHashes = new Map<string, string | null>();
+  const themeErrors = new Map<string, unknown>();
+  for (const target of deduped) {
+    if (target.route !== "wechat-article") continue;
+    const account = config.wx.accounts[target.account] ?? config.wx.accounts[config.wx.defaultAccount];
+    const selected = state.intent.article_theme || resolveConfigRelativePath(account?.articleTheme);
+    if (!selected) continue;
+    const key = `${target.route}@${target.account}`;
+    try {
+      const source = await readArticleTheme(selected);
+      const theme = dryRun ? source : await snapshotArticleTheme(source, join(state.workspace_root, ".zzhub-media", "article-themes"));
+      themes.set(key, theme);
+      themeHashes.set(key, theme.hash);
+    } catch (error) {
+      // 一个账号的模板损坏不阻断其他发布目标，结果仍按原契约逐个记录。
+      themeHashes.set(key, "invalid");
+      themeErrors.set(key, error);
+    }
+  }
   const filtered = filterIdempotent(
     deduped,
     state.publish.results,
     state.artifacts.content_version,
     state.artifacts.render_version,
+    themeHashes,
   );
 
   const results: PublishResult[] = [];
@@ -106,6 +132,9 @@ export async function executePublishTargets(
     reportProgress({ stage: "publish.targets", message: "正在发布", current: results.length, total: filtered.length, unit: "targets", route: target.route, account: target.account });
     let result: PublishResult;
     try {
+      const previous = state.publish.results.find(item => item.route === target.route && item.account === target.account);
+      if (previous?.detail?.includes("WX_RESULT_UNKNOWN")) throw new Error("WX_RESULT_UNKNOWN: 上次发送结果未知，请检查草稿箱后再通过 reset --mode publish 明确重试");
+      if (themeErrors.has(`${target.route}@${target.account}`)) throw themeErrors.get(`${target.route}@${target.account}`);
       const provider = getPublishProvider(target.route);
       const ctx: PublishRouteContext = {
         state,
@@ -113,6 +142,7 @@ export async function executePublishTargets(
         config,
         workspacePaths,
         accountOverride: target.account,
+        articleTheme: themes.get(`${target.route}@${target.account}`),
       };
       const providerResult = await provider(ctx);
       result = {
@@ -121,6 +151,7 @@ export async function executePublishTargets(
         account: target.account,
         content_version: state.artifacts.content_version,
         render_version: state.artifacts.render_version,
+        article_theme_hash: themeHashes.get(`${target.route}@${target.account}`) ?? null,
       };
     } catch (err) {
       const error: PublishTargetError = {

package/src/providers/wechat.test.ts

@@ -10,8 +10,13 @@ import {
   resolveFilenameFromUrl,
   resolveDraftMediaId,
   readResponseBodyWithLimit,
+  createWechatNewspic,
 } from "./wechat";
 
+test("贴图配文按 UTF-8 长度校验，上传前拒绝超限内容", async () => {
+  await expect(createWechatNewspic({ content: "😀".repeat(512) + "a" } as any)).rejects.toThrow("贴图配文过长");
+});
+
 describe("resolveDraftMediaId", () => {
   test("extracts media_id from a successful draft response", () => {
     expect(resolveDraftMediaId({ code: 0, data: { media_id: "media-1" } }))
@@ -193,6 +198,13 @@ describe("extractImageUrls", () => {
 });
 
 describe("replaceImageUrls", () => {
+  test("replaces large Base64 sources and preserves literal replacement URLs", () => {
+    const src = `data:image/png;base64,${"A".repeat(3_400_000)}`;
+    const url = "https://example.com/image.png?value=$&";
+    expect(replaceImageUrls(`<img src="${src}" data-src="${src}">`, { [src]: url }))
+      .toBe(`<img src="${url}" data-src="${url}">`);
+  });
+
   test("replaces URLs using the mapping", () => {
     const html = '<img src="https://old.com/img.png">';
     const result = replaceImageUrls(html, { "https://old.com/img.png": "https://new.com/img.png" });

package/src/providers/wechat.ts

@@ -94,7 +94,7 @@ export function resolveDraftMediaId(
       ? record.media_id
       : null;
   if (!mediaId) {
-    throw new Error("WeChat draft API response did not include media_id");
+    throw new Error("WX_RESULT_UNKNOWN: WeChat draft API response did not include media_id");
   }
   return mediaId;
 }
@@ -130,6 +130,8 @@ interface BaseWechatPublishInput {
   timeout?: number;
   config: PipelineConfig;
   noteId?: string | null;
+  /** 同一运行的同一发布版本复用幂等标识。 */
+  idempotencyKey?: string;
   nezusBaseUrl?: string | null;
   nezusPat?: string | null;
 }
@@ -140,6 +142,8 @@ export interface WechatDraftInput extends BaseWechatPublishInput {
 }
 
 export interface WechatNewspicInput extends BaseWechatPublishInput {
+  /** 明确选择配图时，不从正文中的示例语法补充图片。 */
+  explicitPhotos?: boolean;
   content: string;
   existingDraftMediaId?: string | null;
 }
@@ -170,6 +174,7 @@ export function fillWxAccountConfig(source?: WxAccountConfig): WxAccountConfig {
     appId: source?.appId ?? "",
     appSecret: source?.appSecret ?? "",
     customCss: source?.customCss ?? null,
+    ...(source?.articleTheme ? { articleTheme: source.articleTheme } : {}),
     theme: source?.theme ?? { editorVars: {}, exportTheme: {} },
   } as WxAccountConfig;
 }
@@ -186,7 +191,9 @@ function getWxRuntimeConfig(
     accountOverride || config.wx.defaultAccount,
   );
   const configuredAccount = config.wx.accounts[accountName];
-  if (!configuredAccount) {
+  // 云端 worker 以每个任务的环境变量注入凭据，不要求把用户账号写进基础 config。
+  const hasInjectedCredentials = Boolean(process.env.WX_APPID && process.env.WX_APPSECRET && process.env.ZZCLUB_PAT);
+  if (!configuredAccount && !hasInjectedCredentials) {
     throw new Error(`Unknown wx account: ${accountName}`);
   }
   const accountConfig = fillWxAccountConfig(configuredAccount);
@@ -276,8 +283,8 @@ export function replaceImageUrls(html: string, imageUrlMap: Record<string, strin
     if (!orig || !wx) {
       continue;
     }
-    const escaped = orig.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
-    replaced = replaced.replace(new RegExp(escaped, "g"), wx);
+    // Base64 图片地址可能数 MB，按字面替换，避免超大正则及替换串转义。
+    replaced = replaced.replaceAll(orig, () => wx);
   }
   return replaced;
 }
@@ -320,28 +327,51 @@ export async function readResponseBodyWithLimit(
   return body.buffer;
 }
 
+/** 服务端错误只保留分类和脱敏提示，正文及凭据不进入 Pipeline 状态。 */
+function serviceError(response: Response, payload: unknown, mutating: boolean): Error {
+  const detail = asRecord(payload);
+  const code = String(asRecord(detail.data).code || "WX_SERVICE_ERROR").replace(/[^A-Z0-9_]/g, "").slice(0, 80);
+  if (mutating && response.status >= 500 && !code.startsWith("WX_")) return unknownResult();
+  if (mutating && response.status >= 500 && code === "WX_SERVICE_ERROR") return unknownResult();
+  const message = String(detail.statusMessage || detail.message || "发布服务请求失败")
+    .replace(/Bearer\s+[^\s"',}]+/gi, "Bearer [redacted]")
+    .replace(/(["']?(?:access_token|token|pat|appSecret|secret)["']?\s*[:=]\s*)["']?[^\s"'&,}]+["']?/gi, "$1[redacted]");
+  const requestId = response.headers.get("x-request-id") || String(detail.requestId || "");
+  const trace = /^[a-zA-Z0-9_-]{1,100}$/.test(requestId) ? ` [request ${requestId}]` : "";
+  return new Error(`API request failed with status ${response.status}: ${code}: ${message.slice(0, 300)}${trace}`);
+}
+
+function unknownResult(): Error {
+  return new Error("WX_RESULT_UNKNOWN: 请求结果未确认，请检查公众号草稿箱后再决定是否重试");
+}
+
+/** 网络、响应读取及 JSON 解析中断都可能发生在上游已经写入之后。 */
+async function requestWechat(url: string, options: RequestInit, timeout: number): Promise<unknown> {
+  const mutating = /\/draft\/(?:add|update|delete)$/.test(url);
+  let response: Response;
+  let payload: unknown;
+  try {
+    response = await fetch(url, { ...options, signal: AbortSignal.timeout(timeout) });
+    const responseText = await response.text();
+    try { payload = responseText ? JSON.parse(responseText) : {}; }
+    catch {
+      if (response.ok || mutating) throw new Error("invalid response");
+      payload = {};
+    }
+  } catch (error) {
+    if (mutating) throw unknownResult();
+    throw error;
+  }
+  if (!response.ok) throw serviceError(response, payload, mutating);
+  return payload;
+}
+
 async function requestJson(
   url: string,
   options: { method: string; headers?: Record<string, string>; body?: unknown },
   timeout: number,
 ): Promise<unknown> {
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), timeout);
-  try {
-    const response = await fetch(url, {
-      method: options.method,
-      headers: options.headers,
-      body: options.body ? JSON.stringify(options.body) : undefined,
-      signal: controller.signal,
-    });
-    const responseText = await response.text();
-    if (!response.ok) {
-      throw new Error(`API request failed with status ${response.status}: ${responseText}`);
-    }
-    return responseText ? JSON.parse(responseText) : {};
-  } finally {
-    clearTimeout(timeoutId);
-  }
+  return requestWechat(url, { ...options, body: options.body ? JSON.stringify(options.body) : undefined }, timeout);
 }
 
 async function requestFormData(
@@ -349,23 +379,7 @@ async function requestFormData(
   options: { method: string; headers?: Record<string, string>; body: FormData },
   timeout: number,
 ): Promise<unknown> {
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), timeout);
-  try {
-    const response = await fetch(url, {
-      method: options.method,
-      headers: options.headers,
-      body: options.body,
-      signal: controller.signal,
-    });
-    const responseText = await response.text();
-    if (!response.ok) {
-      throw new Error(`API request failed with status ${response.status}: ${responseText}`);
-    }
-    return responseText ? JSON.parse(responseText) : {};
-  } finally {
-    clearTimeout(timeoutId);
-  }
+  return requestWechat(url, options, timeout);
 }
 
 async function sleep(ms: number): Promise<void> {
@@ -639,6 +653,7 @@ export async function createWechatDraft(input: WechatDraftInput): Promise<Record
       headers: {
         "Content-Type": "application/json",
         Authorization: `Bearer ${runtime.pat}`,
+        ...(input.idempotencyKey ? { "Idempotency-Key": input.idempotencyKey } : {}),
       },
       body: draftBody,
     },
@@ -672,13 +687,18 @@ export async function createWechatDraft(input: WechatDraftInput): Promise<Record
 }
 
 export async function createWechatNewspic(input: WechatNewspicInput): Promise<Record<string, unknown>> {
+  // 配文超限时在上传图片前拒绝，避免微信返回不明确的 45166。
+  if (Buffer.byteLength(input.content, "utf8") > 2048)
+    throw new Error("贴图配文过长，请精简至 2KB 以内；完整文章可保留在内容图中");
   const runtime = getWxRuntimeConfig(input.config, input.account);
-  const fallbackPhotos = extractImageUrls(input.content);
+  const fallbackPhotos = input.explicitPhotos ? [] : extractImageUrls(input.content);
   const photos = parsePhotos(input.photos);
   const finalPhotos = mergePhotoLists(photos, fallbackPhotos);
   if (finalPhotos.length === 0) {
     throw new Error("No photos available for wx newspic upload");
   }
+  if (finalPhotos.length > 20)
+    throw new Error("微信贴图最多支持 20 张配图");
 
   const tokenTimeout = resolveTimeout(TOKEN_TIMEOUT, runtime.timeout, input.timeout);
   const uploadTimeout = resolveTimeout(UPLOAD_TIMEOUT, runtime.timeout, input.timeout);
@@ -726,6 +746,7 @@ export async function createWechatNewspic(input: WechatNewspicInput): Promise<Re
       headers: {
         "Content-Type": "application/json",
         Authorization: `Bearer ${runtime.pat}`,
+        ...(input.idempotencyKey ? { "Idempotency-Key": input.idempotencyKey } : {}),
       },
       body: draftBody,
     },

package/src/render-branding.ts

@@ -16,7 +16,7 @@ export function resolveRenderBranding(config: PipelineConfig, account: string):
   const branding = config.render.branding;
   const selected = branding.accounts[account];
   const visual = getVisualParams(account);
-  const logo = selected?.logo ?? branding.logo ?? config.imgx.icon;
+  const logo = process.env.ZZHUB_PIPELINE_BRANDING_LOGO?.trim() || (selected?.logo ?? branding.logo ?? config.imgx.icon);
   return {
     logo: logo === null ? resolveInputPath(visual?.fallback_icon ?? join(ICONS_DIR, "logo.png")) : resolveBrandLogo(logo),
     footerText: selected?.footerText ?? branding.footerText ?? visual?.footer ?? config.wx.accounts[account]?.name ?? "",

package/src/schema/config.ts

@@ -53,6 +53,16 @@ const WechatThemeOverridesSchema = withObjectDefault(
   z.object({
     editorVars: z.record(z.string(), z.string()).default({}),
     exportTheme: withObjectDefault(WechatExportThemeOverridesSchema),
+    syntaxPresets: z.record(z.string(), z.string()).optional(),
+    structure: z.object({
+      numberedHeadings: z.boolean().optional(),
+      headingLabel: z.string().optional(),
+      quoteLabel: z.string().optional(),
+      calloutPresets: z.record(z.string(), z.object({
+        title: z.string().optional(),
+        icon: z.string().optional(),
+      })).optional(),
+    }).optional(),
   }),
 );
 
@@ -67,6 +77,8 @@ const WxAccountConfigSchema = z.object({
   appId: z.string().default(""),
   appSecret: z.string().default(""),
   customCss: z.string().nullable().default(null),
+  /** 账号默认的本地正文模板，未配置时保持原样式。 */
+  articleTheme: z.string().nullable().optional(),
   theme: WechatThemeOverridesSchema,
 });
 

package/src/schema/state.ts

@@ -260,6 +260,7 @@ const ImagesSchema = withObjectDefault(
 );
 
 const PublishResultSchema = z.object({
+  article_theme_hash: z.string().nullable().optional(),
   route: RoutePrimarySchema,
   account: trimmedString("default"),
   status: PublishResultStatusSchema,
@@ -273,6 +274,7 @@ const PublishResultSchema = z.object({
 const PublishResultsSchema = withObjectDefault(
   z.object({
     results: z.array(PublishResultSchema).default([]),
+    attempt: z.number().int().nonnegative().optional(),
   }),
 );
 
@@ -310,7 +312,10 @@ const IntentSchema = withObjectDefault(
       .transform((arr) => arr.filter((s) => s.trim().length > 0)),
     style_hint: z.string().nullable().default(null),
     cover_theme: z.string().trim().min(1).nullable().default(null),
+    article_theme: z.string().nullable().optional(),
     newspic_render: NewspicRenderSpecSchema.nullable().default(null),
+    // 用户确认的贴图副本文件，正文不进入状态文件。
+    newspic_file: z.string().optional(),
     requires: IntentRequiresSchema,
     existing_draft_media_id: z.string().nullable().default(null),
     note_id: z.string().nullable().default(null),

package/src/wechat-preview/assets/browser-dist/.vite/manifest.json

@@ -1,8 +1,28 @@
 {
+  "_wechat-renderer-D1jHoaM2.js": {
+    "file": "assets/wechat-renderer-D1jHoaM2.js",
+    "name": "wechat-renderer"
+  },
   "src/wechat-preview/browser/editor-export.ts": {
     "file": "editor-export.js",
     "name": "editor-export",
     "src": "src/wechat-preview/browser/editor-export.ts",
-    "isEntry": true
+    "isEntry": true,
+    "imports": [
+      "_wechat-renderer-D1jHoaM2.js"
+    ]
+  },
+  "src/wechat-preview/browser/studio/studio.html": {
+    "file": "studio.js",
+    "name": "studio",
+    "src": "src/wechat-preview/browser/studio/studio.html",
+    "isEntry": true,
+    "imports": [
+      "_wechat-renderer-D1jHoaM2.js"
+    ]
+  },
+  "style.css": {
+    "file": "assets/style-C9-YtTIm.css",
+    "src": "style.css"
   }
 }

package/src/wechat-preview/assets/browser-dist/assets/style-C9-YtTIm.css

@@ -0,0 +1 @@
+:root{--bg-main: #f8fafc;--bg-panel: #ffffff;--border: #e2e8f0;--border-focus: #ca6093;--text-main: #1e293b;--text-muted: #64748b;--brand: #ca6093;--brand-hover: #b35082;--brand-light: rgba(202, 96, 147, .08);--success: #10b981;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--text-main);background:var(--bg-main);height:100vh;display:flex;flex-direction:column;overflow:hidden}.studio-header{height:52px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:10}.brand-section{display:flex;align-items:center;gap:10px}.brand-logo{font-size:18px}.brand-title{font-size:15px;font-weight:700;color:var(--text-main);letter-spacing:-.01em}.brand-badge{font-size:11px;font-weight:600;background:var(--brand-light);color:var(--brand);padding:2px 8px;border-radius:999px}.header-controls{display:flex;align-items:center;gap:12px}.account-select-wrap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}.account-select{padding:5px 10px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text-main);outline:none;cursor:pointer}.account-select:focus{border-color:var(--border-focus)}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-main);transition:all .15s ease;text-decoration:none}.btn:hover{background:#f1f5f9}.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}.btn-success{background:#059669;color:#fff;border-color:#059669}.btn-success:hover{background:#047857;border-color:#047857}.studio-body{flex:1;display:flex;min-height:0;overflow:hidden}.panel{display:flex;flex-direction:column;background:var(--bg-panel);min-height:0}.panel-header{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc}.panel-title{font-size:13px;font-weight:650;color:var(--text-main);display:flex;align-items:center;gap:6px}.left-panel{width:360px;border-right:1px solid var(--border);flex-shrink:0}.tab-nav{display:flex;border-bottom:1px solid var(--border);background:#f8fafc}.tab-btn{flex:1;padding:10px 12px;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:var(--brand);background:#fff;border-bottom-color:var(--brand)}.tab-content{flex:1;overflow-y:auto;padding:16px}.config-section{margin-bottom:22px}.section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:6px}.form-group{margin-bottom:14px}.form-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-main);margin-bottom:6px}.form-val{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.slider-input{width:100%;accent-color:var(--brand);cursor:pointer}.color-input-row{display:flex;align-items:center;gap:8px}.color-picker{-webkit-appearance:none;appearance:none;border:1px solid var(--border);border-radius:6px;width:32px;height:32px;cursor:pointer;padding:2px;background:#fff}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.color-hex{flex:1;padding:6px 10px;font-family:var(--font-mono);font-size:12px;border:1px solid var(--border);border-radius:6px;color:var(--text-main)}.switch-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px}.switch-toggle{position:relative;display:inline-block;width:38px;height:20px}.switch-toggle input{opacity:0;width:0;height:0}.slider-round{position:absolute;cursor:pointer;inset:0;background-color:#cbd5e1;transition:.2s;border-radius:20px}.slider-round:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.slider-round{background-color:var(--brand)}input:checked+.slider-round:before{transform:translate(18px)}.css-editor{width:100%;height:140px;font-family:var(--font-mono);font-size:12px;line-height:1.5;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fafbfc;color:#0f172a;resize:vertical;outline:none}.css-editor:focus{border-color:var(--border-focus);background:#fff}.syntax-card{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px;background:#fff;transition:border-color .15s}.syntax-card:hover{border-color:#cbd5e1}.syntax-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.syntax-card-title{font-size:13px;font-weight:650;color:var(--text-main)}.syntax-card-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:#f1f5f9;color:var(--text-muted)}.syntax-card-desc{font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.4}.syntax-code-snippet{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;font-family:var(--font-mono);font-size:11px;color:#334155;white-space:pre-wrap;margin-bottom:8px}.syntax-btn-insert{width:100%;padding:4px 8px;font-size:11px;font-weight:600;border:1px dashed var(--border);border-radius:4px;background:#fafbfc;color:var(--brand);cursor:pointer}.syntax-btn-insert:hover{background:var(--brand-light);border-color:var(--brand)}.editor-panel{flex:1;border-right:1px solid var(--border);min-width:320px}.editor-toolbar{display:flex;gap:8px;align-items:center}.editor-textarea{flex:1;width:100%;border:none;outline:none;resize:none;padding:16px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:#1e293b;background:#fff}.editor-footer{padding:6px 16px;border-top:1px solid var(--border);background:#fafbfc;font-size:11px;color:var(--text-muted);display:flex;justify-content:space-between}.preview-panel{width:480px;flex-shrink:0;background:#f1f5f9}.preview-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px}.device-frame{width:430px;min-height:680px;background:#fff;border-radius:18px;box-shadow:0 10px 30px #00000014,0 1px 3px #0000000d;overflow:hidden;display:flex;flex-direction:column;border:1px solid #e2e8f0}.device-notch-bar{height:28px;background:#fafbfc;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;font-weight:600;color:#64748b}.device-screen{flex:1;padding:20px 16px 36px;box-sizing:border-box;overflow-y:auto}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:#1e293b;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 6px 18px #00000026;opacity:0;transform:translateY(10px);transition:all .25s ease;pointer-events:auto}.toast.show{opacity:1;transform:translateY(0)}.toast.toast-success{background:#065f46;border:1px solid #10b981}.preset-group{margin-bottom:10px;padding:10px 12px;background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s}.preset-group:hover{border-color:#cbd5e1}.preset-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.preset-title{font-size:12px;font-weight:650;color:var(--text-main);display:flex;align-items:center;gap:5px}.preset-select{width:100%;padding:5px 8px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text-main);outline:none;cursor:pointer;transition:border-color .15s}.preset-select:focus{border-color:var(--brand)}.preset-desc{font-size:11px;color:var(--text-muted);margin-top:5px;line-height:1.4;padding-left:2px}.btn-extract-css{padding:2px 7px;font-size:11px;font-weight:550;color:var(--brand);background:#fff;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn-extract-css:hover{background:#f1f5f9;border-color:var(--brand)}#studio-editor-host{display:none}