@leviosa-ai/detail-page-editor 0.6.0 → 0.6.1

package/components/detail-page/detail-page-editor.tsx

@@ -23,10 +23,7 @@ import {
 import { CanvasStoreContext } from "./canvas-observer";
 import { LeviosaCanvasWorkspace } from "./leviosa-canvas-workspace";
 import { DetailPagePagesTimeline } from "./detail-page-pages-timeline";
-import {
-  SidePanel as LeviosaSidePanel,
-  ZoomButtons as LeviosaZoomButtons,
-} from "@leviosa-ai/canvas";
+import { SidePanel as LeviosaSidePanel } from "@leviosa-ai/canvas";
 import { createCanvasStore } from "@leviosa-ai/canvas/store";
 import { collectFontRequests } from "@leviosa-ai/canvas/render/use-document-fonts";
 import { ensureCanvasKey } from "../../lib/detail-page-canvas/canvas-key";
@@ -709,10 +706,6 @@ export function DetailPageEditor({
             {findReplace}
             <DetailPagePagesTimeline store={store} />
           </LeviosaCanvasWorkspace>
-          {/* 배율은 오른쪽 아래로 — 가운데 아래는 삽입 띠 자리다(작업 영역이 그린다). */}
-          <div className="absolute bottom-4 right-4 z-20 rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface/95 px-2 py-1 shadow-sm backdrop-blur-sm">
-            <LeviosaZoomButtons store={store} />
-          </div>
         </div>
       </div>
     );

package/components/detail-page/detail-page-pages-timeline.tsx

@@ -23,6 +23,19 @@ type StoreLike = {
   selectPage: (id: string) => void;
 };
 
+/**
+ * 이 띠가 차지하는 높이와, 떠 있는지 여부.
+ *
+ * 아래 띠(삽입·배율)가 이 위로 비켜서야 하는데, 그 셈을 작업 영역이 따로 하면
+ * 두 벌이 갈라진다 — 여기가 정본이고 높이는 아래 style 로 자기가 쓴다.
+ */
+export const PAGES_TIMELINE_HEIGHT = 53;
+
+export function pagesTimelineVisible(store: unknown): boolean {
+  const pages = (store as StoreLike | null)?.pages;
+  return Array.isArray(pages) && pages.length >= 2;
+}
+
 export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline({
   store,
 }: {
@@ -36,11 +49,12 @@ export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline
   );
   const activeId = s.activePage?.id;
 
-  if (s.pages.length < 2) return null;
+  if (!pagesTimelineVisible(s)) return null;
 
   return (
     <div
       data-dp-pages-timeline=""
+      style={{ minHeight: PAGES_TIMELINE_HEIGHT }}
       className="pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex items-center gap-1.5 overflow-x-auto border-t border-dpe-ink-200 bg-dpe-surface/95 px-3 py-1.5 backdrop-blur-sm"
     >
       {s.pages.map((page, index) => {

package/components/detail-page/leviosa-canvas-workspace.tsx

@@ -31,12 +31,17 @@ import { CanvasInsertToolbar } from "./canvas-insert-toolbar";
 import { CanvasOverlayHost } from "./canvas-overlay-host";
 import { CanvasSelectionTools } from "./canvas-selection-tools";
 import { DetailPagePageToolbar } from "./detail-page-page-toolbar";
+import {
+  PAGES_TIMELINE_HEIGHT,
+  pagesTimelineVisible,
+} from "./detail-page-pages-timeline";
 import { detailPageThumbnailBus } from "./detail-page-thumbnail-bus";
 import { GifAnimator } from "./gif-animator";
 import { GroupDrillIn } from "./group-drill-in";
 import { HoverHighlightOverlay } from "./hover-highlight-overlay";
 import { CanvasSectionHeightHandle } from "./section-height-handle";
 import { loadEditorFont } from "../../lib/detail-page-canvas/editor-fonts";
+import { ZoomButtons } from "@leviosa-ai/canvas";
 import { CanvasView } from "@leviosa-ai/canvas/render/canvas-view";
 import { useCanvasVersion } from "@leviosa-ai/canvas/use-canvas";
 import type { CanvasStore } from "@leviosa-ai/canvas/store";
@@ -49,6 +54,9 @@ const clamp = (v: number, lo: number, hi: number) =>
 /** 썸네일 해상도. 페이지 패널의 칸이 작아 이 정도면 충분하다. */
 const THUMB_PIXEL_RATIO = 0.12;
 
+/** 아래 띠가 가장자리·화면 목록에서 떨어지는 거리. */
+const DOCK_GAP = 16;
+
 export function LeviosaCanvasWorkspace({
   store,
   gap = 4,
@@ -299,19 +307,37 @@ export function LeviosaCanvasWorkspace({
 
       {children}
 
-      {/* 삽입 띠 — 글상자·기본 도형을 좌측 패널까지 가지 않고 넣는다. 화면 아래 가운데는
-          피그마·캔바가 모두 쓰는 자리라 손이 먼저 간다(배율은 오른쪽 아래로 비켰다). */}
+      {/* 아래 띠 한 줄 — 가운데는 삽입(글상자·기본 도형), 오른쪽 끝은 배율. 화면 아래
+          가운데는 피그마·캔바가 모두 쓰는 자리라 손이 먼저 간다.
+
+          화면 목록(가로 띠)이 떠 있으면 그 높이만큼 위로 비킨다 — 안 그러면 두 띠가
+          겹쳐서 아래 것이 안 눌린다. 높이와 표시 규칙은 그 띠가 들고 있다. */}
       <div
-        data-dp-insert-dock=""
+        data-dp-bottom-dock=""
         style={{
           position: "absolute",
-          left: "50%",
-          bottom: 16,
-          transform: "translateX(-50%)",
+          left: 0,
+          right: 0,
+          bottom: pagesTimelineVisible(store)
+            ? PAGES_TIMELINE_HEIGHT + DOCK_GAP
+            : DOCK_GAP,
           zIndex: 30,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
         }}
       >
-        <CanvasInsertToolbar store={store} />
+        <div data-dp-insert-dock="" style={{ pointerEvents: "auto" }}>
+          <CanvasInsertToolbar store={store} />
+        </div>
+        <div
+          data-dp-zoom-dock=""
+          style={{ position: "absolute", right: DOCK_GAP, pointerEvents: "auto" }}
+          className="rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface/95 px-2 py-1 shadow-sm backdrop-blur-sm"
+        >
+          <ZoomButtons store={store} />
+        </div>
       </div>
 
       {store.activePage ? (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface.",
   "type": "module",
   "license": "UNLICENSED",