From d8517449ac1f4016fdadb8cf8962e9c3862f505c Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 18 Apr 2026 21:56:40 +0800
Subject: [PATCH] Fix LibTV composer overlay scale

---
 .../canvas/LiblibVideoCanvasReplica.tsx       | 236 +++++++++++-------
 1 file changed, 143 insertions(+), 93 deletions(-)

diff --git a/components/canvas/LiblibVideoCanvasReplica.tsx b/components/canvas/LiblibVideoCanvasReplica.tsx
index a79a3d90b..074a299b8 100644
--- a/components/canvas/LiblibVideoCanvasReplica.tsx
+++ b/components/canvas/LiblibVideoCanvasReplica.tsx
@@ -328,6 +328,11 @@ const CANVAS_EXTENT = 20000;
 const OFFICIAL_NODE_GAP = 100;
 const OFFICIAL_TEXT_RESOURCE_HEIGHT = 232;
 const OFFICIAL_TEXT_RESOURCE_WIDTH = 350;
+const OFFICIAL_IMAGE_TOOLBAR_SCALE = 0.7;
+const OFFICIAL_COMPOSER_SCALE = 0.47;
+const PROMPT_COMPOSER_BASE_WIDTH = 895;
+const PROMPT_COMPOSER_BASE_HEIGHT = 286;
+const PRESET_COMPOSER_BASE_HEIGHT = 238;
 
 const TARGET_AVATAR =
   "https://liblibai-online.liblib.cloud/web/1656e2f1b3c74f1ba823b610f1b2cbdf/0c3eb5e2-1dc0-405c-a823-07b2570237f8.jpg?x-oss-process=image/resize,w_100,m_lfit/format,webp";
@@ -3154,15 +3159,24 @@ function CharacterPresetToolbar({
 
   return (
     <>
-      <div
-        className={cn(
-          "pointer-events-auto absolute flex h-[58px] items-center gap-5 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]",
-          anchor
-            ? "origin-bottom -translate-x-1/2 -translate-y-full scale-[0.7]"
-            : "left-1/2 top-[168px] origin-top -translate-x-1/2 scale-[0.7]"
-        )}
-        style={anchor ? { left: anchor.centerX, top: anchor.topY - (24 * anchor.zoom + 10) } : undefined}
-      >
+	      <div
+	        className="pointer-events-auto absolute flex h-[58px] items-center gap-5 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
+	        style={
+	          anchor
+	            ? {
+	                left: anchor.centerX,
+	                top: anchor.topY - (24 * anchor.zoom + 10),
+	                transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
+	                transformOrigin: "bottom center",
+	              }
+	            : {
+	                left: "50%",
+	                top: 168,
+	                transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
+	                transformOrigin: "top center",
+	              }
+	        }
+	      >
         <SceneTool active={toolbarMenu === "panorama"} kind="panorama" label="全景" badge="NEW" onClick={() => setToolbarMenu((current) => current === "panorama" ? null : "panorama")} />
         <SceneTool active={toolbarMenu === "orbit"} kind="orbit" label="多角度" onClick={() => setToolbarMenu((current) => current === "orbit" ? null : "orbit")} />
         <SceneTool active={toolbarMenu === "lighting"} kind="lighting" label="打光" onClick={() => setToolbarMenu((current) => current === "lighting" ? null : "lighting")} />
@@ -3287,16 +3301,20 @@ function PresetFloatingToolbar({
   anchor?: PresetControlAnchor;
   items: Array<[string, string]>;
 }) {
-  return (
-    <div
-      className={cn(
-        "pointer-events-auto absolute flex h-[58px] items-center gap-2 rounded-[16px] border border-white/8 bg-[#262626]/96 px-4 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]",
-        anchor
-          ? "origin-bottom -translate-x-1/2 -translate-y-full scale-[0.7]"
-          : "left-1/2 top-[94px] -translate-x-1/2"
-      )}
-      style={anchor ? { left: anchor.centerX, top: anchor.topY - 14 } : undefined}
-    >
+	return (
+	  <div
+	    className="pointer-events-auto absolute flex h-[58px] items-center gap-2 rounded-[16px] border border-white/8 bg-[#262626]/96 px-4 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
+	    style={
+	      anchor
+	        ? {
+	            left: anchor.centerX,
+	            top: anchor.topY - (24 * anchor.zoom + 10),
+	            transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
+	            transformOrigin: "bottom center",
+	          }
+	        : { left: "50%", top: 94, transform: "translateX(-50%)" }
+	    }
+	  >
       {items.map(([label, message]) => (
         <button
           className="flex h-10 items-center gap-2 rounded-[10px] px-3 text-[15px] hover:bg-white/8 hover:text-white"
@@ -3510,48 +3528,64 @@ function PresetComposerPanel({
     setDraftPrompt(prompt);
   }, [prompt]);
 
-  return (
-    <div
-      className={cn(
-        "pointer-events-auto absolute h-[238px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]",
-        anchor
-          ? "origin-top -translate-x-1/2 scale-[0.47]"
-          : "bottom-[64px] left-1/2 origin-bottom -translate-x-1/2 scale-[0.47]"
-      )}
-      style={anchor ? { left: anchor.centerX, top: anchor.bottomY + 10 } : undefined}
-    >
-      <button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
-      <div className="mb-5 flex items-center gap-3">
-        <span className="rounded-[10px] border border-white/10 bg-[#292929] px-3 py-2 text-[14px] text-white/62">{title}</span>
-        {thumbnailUrl ? (
-          <div className="h-[54px] w-[54px] overflow-hidden rounded-[10px]">
-            <img alt="" className="h-full w-full object-cover" src={thumbnailUrl} />
-          </div>
-        ) : null}
-      </div>
-      <textarea
-        className="h-[78px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/38"
-        onChange={(event) => setDraftPrompt(event.target.value)}
-        placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
-        value={draftPrompt}
-      />
-      <div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[17px] text-white/78">
-        <ComposerControl label="Lib Nano Pro" icon="◉" dropdown onClick={() => toast.info("模型选择接口待接入。")} />
-        <ComposerControl label="16:9" icon="▭" dropdown onClick={() => toast.info("比例选择接口待接入。")} />
-        <ComposerControl label="2K" dropdown onClick={() => toast.info("清晰度选择接口待接入。")} />
-        <ComposerControl label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
-        <ComposerControl label="1张" dropdown onClick={() => toast.info("生成数量接口待接入。")} />
-        <ComposerControl label={credit} icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
-        <button
-          className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
-          onClick={() => toast.info(submitMessage)}
-          type="button"
-        >
-          ↑
-        </button>
-      </div>
-    </div>
-  );
+	return (
+	  <div
+	    className="pointer-events-auto absolute overflow-visible"
+	    style={
+	      anchor
+	        ? {
+	            height: PRESET_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
+	            left: anchor.centerX,
+	            top: anchor.bottomY + 10,
+	            transform: "translateX(-50%)",
+	            width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
+	          }
+	        : {
+	            bottom: 64,
+	            height: PRESET_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
+	            left: "50%",
+	            transform: "translateX(-50%)",
+	            width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
+	          }
+	    }
+	  >
+	    <div
+	      className="relative h-[238px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]"
+	      style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
+	    >
+	      <button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
+	      <div className="mb-5 flex items-center gap-3">
+	        <span className="rounded-[10px] border border-white/10 bg-[#292929] px-3 py-2 text-[14px] text-white/62">{title}</span>
+	        {thumbnailUrl ? (
+	          <div className="h-[54px] w-[54px] overflow-hidden rounded-[10px]">
+	            <img alt="" className="h-full w-full object-cover" src={thumbnailUrl} />
+	          </div>
+	        ) : null}
+	      </div>
+	      <textarea
+	        className="h-[78px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/38"
+	        onChange={(event) => setDraftPrompt(event.target.value)}
+	        placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
+	        value={draftPrompt}
+	      />
+	      <div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[17px] text-white/78">
+	        <ComposerControl label="Lib Nano Pro" icon="◉" dropdown onClick={() => toast.info("模型选择接口待接入。")} />
+	        <ComposerControl label="16:9" icon="▭" dropdown onClick={() => toast.info("比例选择接口待接入。")} />
+	        <ComposerControl label="2K" dropdown onClick={() => toast.info("清晰度选择接口待接入。")} />
+	        <ComposerControl label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
+	        <ComposerControl label="1张" dropdown onClick={() => toast.info("生成数量接口待接入。")} />
+	        <ComposerControl label={credit} icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
+	        <button
+	          className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
+	          onClick={() => toast.info(submitMessage)}
+	          type="button"
+	        >
+	          ↑
+	        </button>
+	      </div>
+	    </div>
+	  </div>
+	);
 }
 
 function CharacterThreeViewScene() {
@@ -3848,14 +3882,29 @@ function PromptComposer({
 
   return (
     <div
-      className={cn(
-        "pointer-events-auto absolute h-[286px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]",
+      className="pointer-events-auto absolute overflow-visible"
+      style={
         anchor
-          ? "origin-top -translate-x-1/2 scale-[0.47]"
-          : "bottom-[64px] left-1/2 origin-bottom -translate-x-1/2 scale-[0.47]"
-      )}
-      style={anchor ? { left: anchor.centerX, top: anchor.bottomY + 10 } : undefined}
+          ? {
+              height: PROMPT_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
+              left: anchor.centerX,
+              top: anchor.bottomY + 10,
+              transform: "translateX(-50%)",
+              width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
+            }
+          : {
+              bottom: 64,
+              height: PROMPT_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
+            }
+      }
     >
+      <div
+        className="relative h-[286px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]"
+        style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
+      >
       <button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
       <div className="flex items-center gap-3">
         {[
@@ -3926,32 +3975,33 @@ function PromptComposer({
         value={prompt}
       />
 
-      <div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[18px] text-white/78">
-        <ComposerControl active={menu === "model"} label={settings.model} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
-        <ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
-        <ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
-        <ComposerControl active={menu === "camera"} label={settings.camera} icon="▣" onClick={() => setMenu((current) => current === "camera" ? null : "camera")} />
-        <ComposerControl active={menu === "panorama"} label={settings.panorama} icon="♫" onClick={() => setMenu((current) => current === "panorama" ? null : "panorama")} />
-        <ComposerControl active={menu === "translate"} label="文" onClick={() => setMenu((current) => current === "translate" ? null : "translate")} />
-        <ComposerControl active={menu === "settings"} label="" icon="⌘" onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
-        <ComposerControl active={menu === "count"} label={settings.count} dropdown onClick={() => setMenu((current) => current === "count" ? null : "count")} />
-        <ComposerControl label="14" icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
-        <button
-          className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
-          onClick={() =>
-            onSubmit
-              ? onSubmit({
-                  prompt,
-                  references,
-                  settings,
-                  slashScene,
-                })
-              : toast.info("角色三视图生成接口待接入。")
-          }
-          type="button"
-        >
-          ↑
-        </button>
+        <div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[18px] text-white/78">
+          <ComposerControl active={menu === "model"} label={settings.model} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
+          <ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
+          <ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
+          <ComposerControl active={menu === "camera"} label={settings.camera} icon="▣" onClick={() => setMenu((current) => current === "camera" ? null : "camera")} />
+          <ComposerControl active={menu === "panorama"} label={settings.panorama} icon="♫" onClick={() => setMenu((current) => current === "panorama" ? null : "panorama")} />
+          <ComposerControl active={menu === "translate"} label="文" onClick={() => setMenu((current) => current === "translate" ? null : "translate")} />
+          <ComposerControl active={menu === "settings"} label="" icon="⌘" onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
+          <ComposerControl active={menu === "count"} label={settings.count} dropdown onClick={() => setMenu((current) => current === "count" ? null : "count")} />
+          <ComposerControl label="14" icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
+          <button
+            className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
+            onClick={() =>
+              onSubmit
+                ? onSubmit({
+                    prompt,
+                    references,
+                    settings,
+                    slashScene,
+                  })
+                : toast.info("角色三视图生成接口待接入。")
+            }
+            type="button"
+          >
+            ↑
+          </button>
+        </div>
       </div>
     </div>
   );