{open && (

{initial}

{user ? user.username : "未登录"}

{user ? `id: ${user.id || ""}` : "去登录解锁所有功能"}

{isPro ? "Pro" : "Free"} {subStatus === "past_due" ? "⚠️ 续费失败，请更新支付方式" : (isPro ? "已订阅 · $19.99/月" : "未订阅")}

credits 余额

{creditsBalance} {creditsTotal ? `/ ${creditsTotal}` : ""} credits {!isPro && ( )}

{isAdmin && quotaUsd > 0 && (

内部美元额度（admin）

本会话 ${Number(liveCost || 0).toFixed(4)} · 已用 ${Number(usedUsd).toFixed(4)} / ${Number(quotaUsd).toFixed(2)} · 剩余 ${Number(remainingUsd).toFixed(4)} {totalTokens ? ` · ${Number(totalTokens).toLocaleString()} tokens` : ""}

)}

{!user && ( )} {isPro && ( )} {isAdmin && ( )} {user && ( <>

)}

); } // ---------- Composer (used both in home and bottom of workspace) ---------- function Composer({ value, onChange, imageData, imageName, onPickImage, onClearImage, style, onStyleChange, onSubmit, busy = false, onStop, showStyle = true, large = false, placeholder = "描述你想要的角色、物件或场景…", }) { const fileRef = useRef(null); const [dragOver, setDragOver] = useState(false); const canSubmit = !!String(value || "").trim(); // Paste / drop handlers are only wired when the caller accepts images // (onPickImage present) — pure-text composers keep default behavior. const acceptsImage = typeof onPickImage === "function"; const onPrimary = () => { if (busy) { onStop?.(); return; } onSubmit?.(); }; const readImageFile = (f) => { if (!f || !/^image\//i.test(f.type || "")) return false; const reader = new FileReader(); reader.onload = () => onPickImage?.(reader.result, f.name || "粘贴图片.png"); reader.readAsDataURL(f); return true; }; // Root-level paste catches the textarea's paste via bubbling. Plain-text // pastes fall through untouched (no preventDefault unless an image file // is actually consumed). const onPaste = (e) => { if (!acceptsImage) return; const files = Array.from(e.clipboardData?.files || []); const img = files.find((f) => /^image\//i.test(f.type || "")); if (img && readImageFile(img)) e.preventDefault(); }; const onDragOver = (e) => { if (!acceptsImage) return; e.preventDefault(); setDragOver(true); }; const onDragLeave = () => setDragOver(false); const onDrop = (e) => { if (!acceptsImage) return; e.preventDefault(); setDragOver(false); const files = Array.from(e.dataTransfer?.files || []); const img = files.find((f) => /^image\//i.test(f.type || "")); if (img) readImageFile(img); }; return (

{imageData && (

{imageName || "参考图"}

)}

onChange(e.target.value)}
        placeholder={placeholder}
        onKeyDown={(e) => {
          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
            e.preventDefault();
            onPrimary();
          }
        }}
      />
      <div className="composer-bar">
        <button
          className="icon-btn"
          data-track-id="composer_add_image"
          title="添加参考图"
          onClick={() => fileRef.current?.click()}
        >
          <I.Image size={17} />
        </button>
        <input
          ref={fileRef} type="file" accept="image/*" hidden
          onChange={(e) => {
            readImageFile(e.target.files?.[0]);
            e.target.value = ""; // re-picking the same file must re-fire
          }}
        />

{showStyle && (
          <div className="style-group">
            <span className="style-label">纹理风格：</span>
            <div className="style-pills">
              <button
                className={"style-pill" + (style === "pixel" ? " active" : "")}
                data-track-id="composer_style_pixel"
                onClick={() => onStyleChange("pixel")}
              >
                像素
              </button>
              <button
                className={"style-pill" + (style === "pbr" ? " active" : "")}
                data-track-id="composer_style_pbr"
                onClick={() => onStyleChange("pbr")}
              >
                PBR
              </button>
            </div>
          </div>
        )}

<button
          className={"send-btn" + (busy ? " stop" : "")}
          data-track-id={busy ? "composer_stop" : "composer_submit"}
          onClick={onPrimary}
          disabled={!busy && !canSubmit}
          title={busy ? "中止进程" : "生成 (Ctrl/⌘ + Enter)"}
          aria-label={busy ? "中止进程" : "发送"}
        >
          {busy ? <span className="send-stop-square" aria-hidden="true" /> : <I.Send size={16} />}
        </button>
      </div>
    </div>
  );
}

// ---------- Model picker (LLM provider dropdown) ----------
// Hidden if the model endpoint is unavailable; otherwise it stays as the
// lightweight in-composer switcher for picking the runtime LLM.
function ModelPicker() {
  const [open, setOpen] = useState(false);
  const [available, setAvailable] = useState([]);
  const [selected, setSelected] = useState(null);
  const [enabled, setEnabled] = useState(false);
  const ref = useRef(null);

// Load real list from /api/admin/llm_model on mount. The route is
  // login-gated; if the user cannot reach it, keep the easter egg hidden.
  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const r = await window.MFAPI.admin.getLlmModel();
        if (!alive) return;
        setAvailable(r.available || []);
        setSelected(r.model);
        setEnabled(true);
      } catch {
        if (!alive) return;
        setSelected("gemini-3.1-pro-preview");
        setEnabled(false);
      }
    })();
    return () => { alive = false; };
  }, []);

useEffect(() => {
    if (!open) return;
    const close = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, [open]);

if (!enabled) return null;

// Build model rows from the server's known list with vendor + tag tags.
  const items = available.map((id) => ({
    id,
    label: id,
    vendor: id.startsWith("claude") ? "Anthropic" : id.startsWith("gemini") ? "Google" : "Other",
    tag: id.includes("flash") || id.includes("haiku") ? "FAST"
       : id.includes("opus") ? "OPUS"
       : id.includes("3.1") ? "PRO"
       : "STD",
  }));
  const cur = items.find((m) => m.id === selected) || items[0] || { id: selected, label: selected || "—", tag: "" };
  return (
    <div className="model-picker" ref={ref}>
      <button className="model-trigger" data-track-id="model_picker_open" onClick={() => setOpen((v) => !v)} title="选择推理模型">
        <span className="model-trigger-name">{cur.label}</span>
        <I.ChevronDown size={12} style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .15s" }} />
      </button>
      {open && (
        <div className="model-menu">
          <div className="model-menu-head">推理模型</div>
          {items.map((m) => (
            <button
              key={m.id}
              className={"model-item" + (m.id === selected ? " active" : "")}
              data-track-id={`model_picker_select_${m.id}`}
              onClick={() => onPick(m.id)}
            >
              <span className="model-item-tag">{m.tag}</span>
              <span className="model-item-main">
                <span className="model-item-name">{m.label}</span>
                <span className="model-item-vendor">{m.vendor}</span>
              </span>
              {m.id === selected && <I.Check size={14} />}
            </button>
          ))}
          <div className="model-menu-divider" />
          <button className="model-item add" data-track-id="model_picker_add_model" onClick={() => { setOpen(false); window.location.hash = "#/settings/models"; }}>
            <span className="model-item-tag plus">+</span>
            <span className="model-item-main">
              <span className="model-item-name">添加模型…</span>
              <span className="model-item-vendor">支持 DeepSeek · OpenAI · Google · Claude</span>
            </span>
          </button>
        </div>
      )}
    </div>
  );
}
function DirToggle({ value, onChange }) {
  return (
    <div className="dir-toggle">
      {[1, 2, 4, 8].map((n) => (
        <button
          key={n}
          data-track-id={`dir_toggle_${n}`}
          className={value === n ? "active" : ""}
          onClick={() => onChange(n)}
          title={n === 1 ? "单向" : n === 2 ? "左右镜像" : n === 4 ? "前后左右" : "八方向"}
        >
          @{n}
        </button>
      ))}
    </div>
  );
}

// ---------- Stage progress card ----------
function StageRow({ name, detail, time, status }) {
  return (
    <div className="stage-row">
      <div className={"stage-status " + status}>
        {status === "done" && <I.Check size={11} />}
        {status === "active" && <I.Loader size={11} />}
        {status === "error" && <I.X size={11} />}
      </div>
      <div>
        <span className="stage-name">{name}</span>
        {detail && <span className="stage-detail">{detail}</span>}
      </div>
      <div className="stage-time">{time}</div>
    </div>
  );
}

function StageCard({ stages }) {
  return (
    <div className="stage-card">
      <div className="stage-list">
        {stages.map((s) => <StageRow key={s.name} {...s} />)}
      </div>
    </div>
  );
}

// ---------- Spec card ----------
function SpecCard({ spec }) {
  return (
    <div className="info-card">
      <div className="info-card-head">
        <I.Cpu className="ico" />
        <span>Analyst — 模型规格</span>
      </div>
      <dl className="spec-grid">
        <dt>名称</dt><dd>{spec.name}</dd>
        <dt>分辨率</dt><dd>{spec.resolution}</dd>
        <dt>对称</dt><dd>{spec.symmetric ? "true" : "false"}</dd>
        <dt>骨骼组</dt><dd>{spec.groups}</dd>
      </dl>
    </div>
  );
}

// ---------- Animation editor ----------
const ANIM_PRESETS = ["待机", "走路", "奔跑", "攻击", "受击", "死亡", "跳跃", "飞行"];

// ---------- Export card ----------
function ExportCard({ files, ctx, name }) {
  // Real download glue. Each row's [download] button calls a per-extension
  // handler hitting the FastAPI backend (or, for bbmodel, just serializing
  // ctx.bbmodel client-side — bbmodel is just JSON). The "download all" bar
  // grabs the standard /api/export zip + saves it as one blob.
  const safeName = name || "model";

const triggerDownload = (blob, filename) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = filename; document.body.appendChild(a);
    a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 5000);
  };

// Fire-and-forget persistence: every download path also saves the
  // session into My Assets so the asset appears there even when the
  // user only ever clicks .bbmodel or the texture PNG (those paths
  // don't go through /api/export and would otherwise leave nothing on
  // disk). The backend write is idempotent on session_id, so GLB/ZIP
  // paths that already persist via /api/export are harmless to also
  // call here (server-side save_library_record overwrites the same
  // record).
  const persistToLibrary = () => {
    try { window.MFAPI?.library?.save?.(ctx); } catch {}
  };

const downloadAll = () => downloadOne({ ext: "ZIP" });

return (
    <div className="export-card">
      <div className="info-card-head">
        <I.Download className="ico" />
        <span>导出 — 已生成 {files.length} 个文件</span>
      </div>
      <div className="file-grid">
        {files.map((f) => (
          <div key={f.name} className="file-row">
            <div className="file-icon">{f.ext}</div>
            <div className="file-meta">
              <div className="file-name">{f.name}</div>
              <div className="file-size">{f.size}</div>
            </div>
            <button className="dl" data-track-id={`export_download_${String(f.ext || "file").toLowerCase()}`} title="下载" onClick={() => downloadOne(f)}>
              <I.Download size={13} />
            </button>
          </div>
        ))}
      </div>
      <div className="row" style={{ marginTop: 12, gap: 8 }}>
        <button className="primary-btn" data-track-id="export_download_zip" style={{ flex: 1 }} onClick={downloadAll}>
          <I.Download size={14} /> 下载全部 (zip)
        </button>
        <button
          className="ghost-btn"
          data-track-id="export_download_bbmodel"
          onClick={() => downloadOne({ ext: "BB", name: `${safeName}.bbmodel` })}
          title="下载 .bbmodel 后用 Blockbench 打开"
        >
          <I.Folder size={14} /> 下载 .bbmodel
        </button>
      </div>
    </div>
  );
}

function countOutlinerBones(nodes) {
  let count = 0;
  for (const node of (nodes || [])) {
    if (!node || typeof node !== "object") continue;
    count += 1 + countOutlinerBones(node.children || []);
  }
  return count;
}

useEffect(() => {
    if (ready || typeof customElements === "undefined") return;
    let live = true;
    customElements.whenDefined("model-viewer")
      .then(() => { if (live) setReady(true); })
      .catch(() => {});
    return () => { live = false; };
  }, [ready]);

useEffect(() => {
    const viewer = viewerRef.current;
    if (!viewer || !ready) return;
    setLoaded(false);
    const handleLoad = () => {
      setLoaded(true);
      window.requestAnimationFrame?.(() => centerViewer());
      window.setTimeout(centerViewer, 120);
      window.setTimeout(centerViewer, 500);
    };
    viewer.addEventListener?.("load", handleLoad);
    const firstFrame = window.setTimeout(centerViewer, 180);
    const settledFrame = window.setTimeout(centerViewer, 700);
    return () => {
      viewer.removeEventListener?.("load", handleLoad);
      window.clearTimeout(firstFrame);
      window.clearTimeout(settledFrame);
    };
  }, [ready, src, centerViewer]);

useEffect(() => {
    if (!ready) return;
    const frame = frameRef.current;
    if (!frame) return;
    let frameId = 0;
    const scheduleCenter = () => {
      if (frameId) window.cancelAnimationFrame(frameId);
      frameId = window.requestAnimationFrame?.(centerViewer) || window.setTimeout(centerViewer, 0);
    };
    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleCenter) : null;
    observer?.observe(frame);
    window.addEventListener("resize", scheduleCenter);
    scheduleCenter();
    return () => {
      observer?.disconnect();
      window.removeEventListener("resize", scheduleCenter);
      if (frameId) {
        window.cancelAnimationFrame?.(frameId);
        window.clearTimeout?.(frameId);
      }
    };
  }, [ready, centerViewer]);

useEffect(() => {
    const viewer = viewerRef.current;
    if (!viewer || !ready) return;
    try {
      if (animationName) viewer.animationName = animationName;
      if (playing) viewer.play?.();
      else viewer.pause?.();
      centerViewer();
      window.setTimeout(centerViewer, 120);
    } catch {}
  }, [ready, src, animationName, playing, centerViewer]);

if (!ready) {
    const hasCubes = !!(bbmodel && (bbmodel.elements || []).length);
    if (hasCubes) return <window.VoxelPreview bbmodel={bbmodel} cubes={null} />;
    return (
      <div className="glb-viewer-wrap">
        <div className="glb-viewer-fallback">
          GLB preview engine loading
        </div>
      </div>
    );
  }

return (
    <div className="glb-viewer-wrap">
      <div className="glb-viewer-frame" ref={frameRef}>
        {/* No className= here: Babel-standalone renders that as the literal
            `classname` attribute on custom elements, not `class`. Styling
            lives on `.glb-viewer-frame > model-viewer` instead. */}
        <model-viewer
          ref={viewerRef}
          src={src}
          camera-controls="true"
          auto-rotate="true"
          autoplay={playing ? true : undefined}
          animation-name={animationName || undefined}
          interaction-prompt="none"
          shadow-intensity="0.65"
          exposure="0.95"
          camera-orbit="35deg 70deg auto"
          bounds="tight"
          onLoad={centerViewer}
        />
        {!loaded && <div className="glb-viewer-fallback">Loading GLB preview</div>}
      </div>
    </div>
  );
}

// ---------- Preview pane ----------
function PreviewPane({ session, onClose, onPersist }) {
  const [tab, setTab] = useState("3d");
  const [playing, setPlaying] = useState(true);
  const [time, setTime] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const [refreshErr, setRefreshErr] = useState("");
  // Paint mode: paint directly ON the 3D model (face clicks → atlas pixels)
  // rather than in a separate window. Toggled from the tabs row.
  const [paintMode, setPaintMode] = useState(false);
  const rafRef = useRef();
  // Bumped after each paint stroke so VoxelPreview re-reads
  // session.ctx.texture_png_base64 (mutated in place) and re-paints the
  // cube faces live. PreviewPane owns no setter for ctx, so this tick is
  // the cheap way to force the leaf preview components to re-render.
  const [, forceTick] = useState(0);
  const bumpPreview = useCallback(() => forceTick((n) => n + 1), []);
  // Atlas-paint engine (offscreen canvas mirroring the texture). Drives the
  // on-model painting + the paint toolbar.
  const paint = usePaintEngine(session.ctx, session.spec?.name || "texture", bumpPreview, onPersist);
  const paintEndStroke = paint.endStroke;
  const paintUndo = paint.onUndo;
  const paintRedo = paint.onRedo;
  // End a stroke even if the mouse is released off a face / outside the stage.
  useEffect(() => {
    if (!paintMode) return;
    const up = () => paintEndStroke();
    window.addEventListener("mouseup", up);
    return () => window.removeEventListener("mouseup", up);
  }, [paintMode, paintEndStroke]);
  // Undo/redo keyboard shortcuts while painting: Ctrl/⌘+Z, Ctrl/⌘+Shift+Z, Ctrl+Y.
  useEffect(() => {
    if (!paintMode) return;
    const onKey = (e) => {
      const mod = e.ctrlKey || e.metaKey;
      if (!mod) return;
      const k = (e.key || "").toLowerCase();
      if (k === "z") { e.preventDefault(); e.shiftKey ? paintRedo() : paintUndo(); }
      else if (k === "y") { e.preventDefault(); paintRedo(); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [paintMode, paintUndo, paintRedo]);

// Real animation list pulled from ctx.bbmodel.animations.
  const realAnims = useMemo(() => {
    const list = ((session.ctx?.bbmodel?.animations) || []).filter((a) => a && a.name);
    return list;
  }, [session.ctx]);
  const [anim, setAnim] = useState(() => realAnims[0]?.name || "");
  // Reset selection when ctx swaps to a different session.
  useEffect(() => {
    if (realAnims.length && !realAnims.find((a) => a.name === anim)) {
      setAnim(realAnims[0].name);
    }
  }, [realAnims]);
  const activeAnim = realAnims.find((a) => a.name === anim) || null;
  const animLength = Number(activeAnim?.length) || 1.6;
  const previewElements = session.ctx?.bbmodel?.elements || [];
  const previewFormat = session.ctx?.bbmodel?.meta?.model_format
    || session.ctx?.model_spec?.format
    || session.spec?.format
    || "bedrock_entity";
  const previewCubeCount = previewElements.length;
  const previewTris = previewCubeCount * 12;
  const previewBoneCount = countOutlinerBones(session.ctx?.bbmodel?.outliner || []);
  const previewOriginalGlb = session.ctx?.scratch?.source_glb_url || "";
  const previewTexturedGlb = session.ctx?.scratch?.textured_glb_url || "";
  const [animatedGlbSrc, setAnimatedGlbSrc] = useState("");
  const animationExportKey = activeAnim
    ? [
        session.ctx?.session_id || "",
        activeAnim.name || "",
        realAnims.map((a) => `${a.name}:${a.length || ""}:${Object.keys(a.animators || {}).length}`).join("|"),
      ].join("::")
    : "";
  useEffect(() => {
    let live = true;
    let objectUrl = "";
    setAnimatedGlbSrc("");
    if (!animationExportKey || previewCubeCount || !previewOriginalGlb || !window.MFAPI?.exportGlb || !session.ctx) {
      return () => {};
    }
    (async () => {
      try {
        const blob = await window.MFAPI.exportGlb(session.ctx);
        objectUrl = URL.createObjectURL(blob);
        if (live) setAnimatedGlbSrc(objectUrl);
        else URL.revokeObjectURL(objectUrl);
      } catch {
        if (live) setAnimatedGlbSrc("");
      }
    })();
    return () => {
      live = false;
      if (objectUrl) URL.revokeObjectURL(objectUrl);
    };
  }, [animationExportKey, previewOriginalGlb, previewCubeCount, session.ctx]);
  const previewSourceGlb = animatedGlbSrc || previewTexturedGlb || previewOriginalGlb;
  const previewStats = previewCubeCount
    ? `${previewCubeCount} cubes · ${previewTris} tris`
    : (previewSourceGlb
      ? `${previewBoneCount || 0} bones · GLB preview`
      : (previewBoneCount ? `${previewBoneCount} bones · rig preview` : "0 cubes · 0 tris"));

useEffect(() => {
    let last = performance.now();
    const tick = (t) => {
      const dt = (t - last) / 1000;
      last = t;
      // Loop on the active animation's length (default 1.6s when none).
      if (playing) setTime((p) => (p + dt) % Math.max(0.1, animLength));
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [playing, animLength]);

const fmt = (t) => `${t.toFixed(2)}s / ${animLength.toFixed(2)}s`;

return (
    <section className="preview">
      <div className="preview-tabs">
        <button className={"preview-tab" + (tab === "3d" ? " active" : "")} data-track-id="preview_tab_3d" onClick={() => setTab("3d")}>
          3D 预览
        </button>
        <button className={"preview-tab" + (tab === "tex" ? " active" : "")} data-track-id="preview_tab_texture" onClick={() => setTab("tex")}>
          贴图
        </button>
        <button
          className={"preview-tab" + (paintMode ? " active" : "")}
          data-track-id="preview_toggle_paint"
          disabled={previewSourceGlb && !previewCubeCount}
          title={previewSourceGlb && !previewCubeCount ? "上传的 GLB 暂不支持直接绘制" : "在模型上直接绘制像素"}
          onClick={() => { setTab("3d"); setPaintMode((v) => !v); }}>
          画笔{paintMode ? " ●" : ""}
        </button>
        <div style={{ flex: 1 }} />
        <button className="icon-btn" title="重新生成贴图"
                data-track-id="preview_refresh_texture"
                onClick={onRefreshTexture} disabled={refreshing}>
          <I.Refresh size={15} />
        </button>
        <button className="icon-btn" data-track-id="preview_close" title="关闭预览" onClick={onClose}><I.X size={16} /></button>
      </div>
      {refreshErr && (
        <div style={{ position: "absolute", top: 50, left: 12, right: 12, zIndex: 9,
                       padding: "6px 12px", background: "var(--danger)", color: "white",
                       fontSize: 12, borderRadius: 6 }}>
          {refreshErr}
        </div>
      )}

<div className="preview-stage">
        <div className="preview-grid" />
        <div className="preview-model-area">
          {tab === "3d" && (
            (previewSourceGlb && !previewCubeCount) ? (
              <GlbModelPreview
                src={previewSourceGlb}
                bbmodel={session.ctx?.bbmodel}
                animationName={activeAnim?.name || ""}
                playing={playing}
              />
            ) : (activeAnim && !paintMode) ? (
              // Real bone-driven preview when the user picked an animation.
              <window.AnimatedVoxelPreview
                bbmodel={session.ctx?.bbmodel}
                animation={activeAnim}
                time={time}
                textureB64={session.ctx && session.ctx.texture_png_base64}
              />
            ) : (
              // Static cube view — also the canvas for paint mode (forced
              // static so faces stay put while you draw on them).
              <VoxelPreview
                model={session.model}
                bbmodel={session.ctx && session.ctx.bbmodel}
                cubes={session.ctx && session.ctx.bbmodel
                  ? window.bbmodelToVoxelCubes(session.ctx.bbmodel)
                  : null}
                textureB64={session.ctx && session.ctx.texture_png_base64}
                paint={paintMode ? { active: true, ...paint.controller } : null}
              />
            )
          )}
          {tab === "tex" && <TexturePreview textureB64={session.ctx && session.ctx.texture_png_base64} />}
        </div>

{tab === "3d" && paintMode && <PaintToolbar engine={paint} onClose={() => setPaintMode(false)} />}

<div className="preview-overlay-top">
          <span className="preview-pill">
            <I.Cube size={12} />
            {previewFormat}
          </span>
          <span className="preview-pill" style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>
            {previewStats}
          </span>
          <div style={{ flex: 1 }} />
          <span className="preview-pill">
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--good)" }} />
            就绪
          </span>
        </div>

{tab === "3d" && (
          <div className="preview-overlay-bottom">
            <div className="anim-control-pill">
              <button className="play-circle"
                      data-track-id={playing ? "preview_pause_animation" : "preview_play_animation"}
                      onClick={() => setPlaying(!playing)}
                      disabled={!realAnims.length}
                      title={!realAnims.length ? "没有动画 — 先生成一个" : (playing ? "暂停" : "播放")}>
                {playing ? <I.Pause size={12} /> : <I.Play size={12} />}
              </button>
              <select value={anim} onChange={(e) => { setAnim(e.target.value); setTime(0); }}
                      disabled={!realAnims.length}>
                {realAnims.length === 0 && <option value="">(无动画)</option>}
                {realAnims.map((a) => (
                  <option key={a.name} value={a.name}>{a.name}</option>
                ))}
              </select>
              <span className="anim-time">{realAnims.length ? fmt(time) : "—"}</span>
            </div>
            <div style={{ flex: 1 }} />
            <button className="ghost-btn" data-track-id="preview_export_glb" onClick={onExportGlb}>
              <I.Download size={13} /> 导出
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- Atlas paint engine ----------
// Hand-edit the texture by painting DIRECTLY on the 3D model. This hook owns
// an OFFSCREEN canvas mirroring the model's atlas; VoxelPreview maps a face
// click to an atlas pixel and calls controller.onPaintAtlas, then we write the
// atlas back into ctx.texture_png_base64 IN PLACE and bump the preview so the
// cube faces repaint live. The PaintToolbar renders the controls.
const PAINT_SWATCHES = [
  "#000000", "#ffffff", "#7f7f7f", "#e23b3b", "#e2913b",
  "#e2d23b", "#4caf50", "#3b7fe2", "#7a4ce2", "#c24ca0",
];
const PAINT_UNDO_CAP = 30;

function usePaintEngine(ctx, name, onChange, onPersist) {
  const res = (ctx && ctx.bbmodel && ctx.bbmodel.resolution) || {};
  const atlasW = Math.max(1, +res.width || 64);
  const atlasH = Math.max(1, +res.height || 64);

const canvasRef = useRef(null);   // offscreen atlas canvas
  const gRef = useRef(null);
  const undoRef = useRef([]);
  const redoRef = useRef([]);
  const paintingRef = useRef(false);
  const strokeDirtyRef = useRef(false);  // did this stroke actually paint?
  const applyTimerRef = useRef(null);
  const persistTimerRef = useRef(null);  // debounced persist (server/session)
  const lastWrittenRef = useRef(null);  // data URI WE wrote (don't reload it)
  const loadedSrcRef = useRef(undefined);
  const originalSrcRef = useRef(null);  // pristine atlas — what reset reverts to

const [color, setColor] = useState("#e23b3b");
  // User-defined swatches, picked from the color wheel and persisted so the
  // custom palette sticks across sessions.
  const [customSwatches, setCustomSwatches] = useState(() => {
    try {
      const raw = localStorage.getItem("MESHFORGE_PAINT_SWATCHES_v1");
      const arr = raw ? JSON.parse(raw) : [];
      return Array.isArray(arr) ? arr.filter((s) => typeof s === "string").slice(0, 16) : [];
    } catch { return []; }
  });
  const [brush, setBrush] = useState(1);
  const [eraser, setEraser] = useState(false);
  const [eyedropper, setEyedropper] = useState(false);
  const eyedropperRef = useRef(false);
  useEffect(() => { eyedropperRef.current = eyedropper; }, [eyedropper]);
  const [canUndo, setCanUndo] = useState(false);
  const [canRedo, setCanRedo] = useState(false);

const rawTex = ctx && ctx.texture_png_base64;
  const origSrc = useMemo(() => {
    if (!rawTex || typeof rawTex !== "string") return null;
    return rawTex.startsWith("data:") ? rawTex : `data:image/png;base64,${rawTex}`;
  }, [rawTex]);

// Reload the offscreen canvas only when the atlas changes EXTERNALLY (new
  // session / Meshy refresh / reset). Our own paint write-backs are skipped
  // so they don't wipe the undo stack or the in-progress pixels.
  useEffect(() => {
    if (origSrc && origSrc === lastWrittenRef.current) return;
    if (origSrc === loadedSrcRef.current) return;
    originalSrcRef.current = origSrc;
    loadAtlas(origSrc);
  }, [origSrc, loadAtlas]);

// Persist the painted atlas so it survives a page refresh. Debounced
  // (~900ms) so a drawing burst saves once, not per pixel. The parent wires
  // this to library.save (server) and/or the session store (localStorage).
  const schedulePersist = useCallback(() => {
    if (!onPersist) return;
    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
    persistTimerRef.current = setTimeout(() => {
      persistTimerRef.current = null;
      try { onPersist(ctx); } catch {}
    }, 900);
  }, [onPersist, ctx]);

const scheduleApply = useCallback(() => {
    if (applyTimerRef.current) clearTimeout(applyTimerRef.current);
    applyTimerRef.current = setTimeout(() => {
      applyTimerRef.current = null;
      applyToCtx();
    }, 120);
  }, [applyToCtx]);

const _snapshot = useCallback(() => {
    const g = gRef.current;
    if (!g) return null;
    try { return g.getImageData(0, 0, atlasW, atlasH); } catch { return null; }
  }, [atlasW, atlasH]);

// Snapshot BEFORE a stroke and clear the redo branch (a new edit forks
  // history). Cap the undo stack.
  const pushUndo = useCallback(() => {
    const snap = _snapshot();
    if (!snap) return;
    undoRef.current.push(snap);
    if (undoRef.current.length > PAINT_UNDO_CAP) undoRef.current.shift();
    redoRef.current = [];
    setCanUndo(true);
    setCanRedo(false);
  }, [_snapshot]);

const paintAtlasPixel = useCallback((ax, ay) => {
    const g = gRef.current;
    if (!g) return;
    const half = Math.floor(brush / 2);
    const x0 = ax - half, y0 = ay - half;
    if (eraser) g.clearRect(x0, y0, brush, brush);
    else { g.fillStyle = color; g.fillRect(x0, y0, brush, brush); }
    strokeDirtyRef.current = true;
  }, [brush, eraser, color]);

// 吸色: sample the atlas pixel under the cursor into the current color and
  // drop out of eyedropper mode (one-shot). Transparent pixels are ignored.
  const sampleAtlasPixel = useCallback((ax, ay) => {
    const g = gRef.current;
    if (!g) return;
    try {
      const d = g.getImageData(ax, ay, 1, 1).data;
      if (d[3] === 0) { setEyedropper(false); return; }  // empty texel — nothing to pick
      const hex = "#" + [d[0], d[1], d[2]]
        .map((v) => v.toString(16).padStart(2, "0")).join("");
      setColor(hex);
      setEraser(false);
      setEyedropper(false);
    } catch {}
  }, []);

// Persist + add a wheel-picked color to the custom palette (newest first,
  // deduped against the fixed swatches and existing customs, capped). Also
  // selects it as the active brush color.
  const addCustomSwatch = useCallback((hex) => {
    const c = String(hex || "").trim().toLowerCase();
    if (!/^#[0-9a-f]{6}$/.test(c)) return;
    setColor(hex);
    setEraser(false);
    setEyedropper(false);
    if (PAINT_SWATCHES.some((s) => s.toLowerCase() === c)) return;  // already a fixed swatch
    setCustomSwatches((prev) => {
      const next = [c, ...prev.filter((s) => s.toLowerCase() !== c)].slice(0, 16);
      try { localStorage.setItem("MESHFORGE_PAINT_SWATCHES_v1", JSON.stringify(next)); } catch {}
      return next;
    });
  }, []);

const begin = useCallback(() => {
    paintingRef.current = true;
    strokeDirtyRef.current = false;
    if (!eyedropperRef.current) pushUndo();   // sampling isn't an edit
  }, [pushUndo]);

const endStroke = useCallback(() => {
    if (!paintingRef.current) return;
    paintingRef.current = false;
    if (applyTimerRef.current) { clearTimeout(applyTimerRef.current); applyTimerRef.current = null; }
    if (strokeDirtyRef.current) applyToCtx();   // only persist if we drew
    strokeDirtyRef.current = false;
  }, [applyToCtx]);

const onReset = useCallback(() => {
    loadAtlas(originalSrcRef.current);
    setTimeout(applyToCtx, 60);   // re-export after the async image draw
  }, [loadAtlas, applyToCtx]);

useEffect(() => () => {
    if (applyTimerRef.current) clearTimeout(applyTimerRef.current);
    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
  }, []);

return {
    atlasW, atlasH,
    color, setColor, brush, setBrush, eraser, setEraser,
    eyedropper, setEyedropper, canUndo, canRedo,
    customSwatches, addCustomSwatch, removeCustomSwatch,
    onUndo, onRedo, onReset, onDownloadPng, endStroke,
    // Passed to VoxelPreview; methods are stable useCallbacks. A face hit
    // either samples (eyedropper) or paints (and persists).
    controller: {
      eyedropper,
      isPainting: () => paintingRef.current,
      begin,
      onPaintAtlas: (x, y) => {
        if (eyedropperRef.current) { sampleAtlasPixel(x, y); return; }
        paintAtlasPixel(x, y);
        scheduleApply();
      },
    },
  };
}

// Floating toolbar shown over the 3D preview while paint mode is on.
function PaintToolbar({ engine, onClose }) {
  const { color, setColor, brush, setBrush, eraser, setEraser,
          eyedropper, setEyedropper, canUndo, canRedo, onUndo, onRedo,
          onReset, onDownloadPng, customSwatches = [], addCustomSwatch,
          removeCustomSwatch } = engine;
  return (
    <div className="paint-toolbar paint-toolbar-overlay">
      <label className="paint-color-field" title="选择颜色">
        <input type="color" value={color} data-track-id="paint_color_picker"
               onChange={(e) => { setColor(e.target.value); setEraser(false); }} />
        <span className="paint-color-chip" style={{ background: color }} />
      </label>
      <div className="paint-swatches">
        {PAINT_SWATCHES.map((sw) => (
          <button key={sw} type="button"
                  className={"paint-swatch" + (!eraser && sw.toLowerCase() === color.toLowerCase() ? " active" : "")}
                  style={{ background: sw }} title={sw}
                  data-track-id="paint_swatch"
                  onClick={() => { setColor(sw); setEraser(false); }} />
        ))}
        {customSwatches.map((sw) => (
          <button key={sw} type="button"
                  className={"paint-swatch paint-swatch-custom" + (!eraser && sw.toLowerCase() === color.toLowerCase() ? " active" : "")}
                  style={{ background: sw }} title={`${sw} · 右键删除`}
                  data-track-id="paint_swatch_custom"
                  onClick={() => { setColor(sw); setEraser(false); }}
                  onContextMenu={(e) => { e.preventDefault(); removeCustomSwatch && removeCustomSwatch(sw); }} />
        ))}
        {/* + : pick a color from the wheel and add it to the palette */}
        <label className="paint-swatch paint-swatch-add" title="从色盘取色，加入色卡"
               data-track-id="paint_add_swatch">
          <input type="color" defaultValue={color}
                 onChange={(e) => addCustomSwatch && addCustomSwatch(e.target.value)} />
          <span aria-hidden="true">+</span>
        </label>
      </div>
      <span className="paint-sep" />
      <div className="paint-brushes">
        {[1, 2, 3].map((b) => (
          <button key={b} type="button"
                  className={"paint-btn" + (brush === b ? " active" : "")}
                  data-track-id="paint_brush_size"
                  onClick={() => setBrush(b)}>{b}px</button>
        ))}
      </div>
      <button type="button" className={"paint-btn" + (eraser ? " active" : "")}
              data-track-id="paint_eraser"
              onClick={() => { setEraser((v) => !v); setEyedropper(false); }} title="橡皮擦（涂成透明）">橡皮</button>
      <button type="button" className={"paint-btn" + (eyedropper ? " active" : "")}
              data-track-id="paint_eyedropper"
              onClick={() => { setEyedropper((v) => !v); setEraser(false); }}
              title="吸色：点模型上的某处取色">吸色</button>
      <span className="paint-sep" />
      <button type="button" className="paint-btn"
              data-track-id="paint_undo" onClick={onUndo} disabled={!canUndo} title="撤回 (Ctrl/⌘+Z)">撤回</button>
      <button type="button" className="paint-btn"
              data-track-id="paint_redo" onClick={onRedo} disabled={!canRedo} title="重做 (Ctrl/⌘+Shift+Z)">重做</button>
      <button type="button" className="paint-btn"
              data-track-id="paint_reset" onClick={onReset} title="重新载入原始贴图">重置</button>
      <button type="button" className="paint-btn"
              data-track-id="paint_download_png" onClick={onDownloadPng} title="另存为 PNG">导出</button>
      <span className="paint-sep" />
      <button type="button" className="paint-btn"
              data-track-id="paint_exit" onClick={onClose} title="退出绘制">完成</button>
    </div>
  );
}

if (realSrc) {
    return (
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
        <div style={{
          padding: 12, background: "var(--bg-elev)",
          border: "1px solid var(--line)", borderRadius: 12,
          boxShadow: "var(--shadow-md)",
        }}>
          <img src={realSrc} alt="texture atlas" style={{
            width: 320, height: 320, imageRendering: "pixelated",
            background: "var(--bg-soft)",
          }} />
        </div>
      </div>
    );
  }
  return _TexturePreviewPlaceholder();
}

function _TexturePreviewPlaceholder() {
  // Empty state — no fake atlas pixels, just a hint that the user
  // needs to run build_texture (or wait for the auto-chained one
  // after generate completes).
  return (
    <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
      <div style={{
        padding: "24px 32px", color: "var(--ink-4)",
        textAlign: "center", maxWidth: 320,
      }}>
        <div style={{ fontSize: 36, opacity: 0.3, marginBottom: 8 }}>▦</div>
        <div style={{ fontSize: 13 }}>
          贴图未生成。3D资产管线会在建模后自动跑一次 Meshy 贴图，
          也可以点右上角 <I.Refresh size={11} /> 重新生成。
        </div>
      </div>
    </div>
  );
}

window.MFC = {
  Sidebar, Composer, DirToggle, StageCard, SpecCard,
  AnimationEditor, ExportCard, PreviewPane,
  BrandLogo,
};