@coderyo/ui-shell 1.0.3 → 1.1.0

package/dist/index.js

@@ -73,7 +73,11 @@ function saveIndicatorConfig(symbol, interval, config) {
 }
 
 // src/settings-panel.ts
-import { DEFAULT_INDICATOR_CONFIG } from "@coderyo/indicators";
+import {
+  DEFAULT_INDICATOR_CONFIG,
+  disableIndicatorLayer,
+  listActiveIndicatorLayers
+} from "@coderyo/indicators";
 import { t } from "@coderyo/i18n";
 function mountSettingsPanel(parent, opts = {}) {
   let open = false;
@@ -88,12 +92,27 @@ function mountSettingsPanel(parent, opts = {}) {
   btn.title = t("settings.title", "\u8A2D\u5B9A");
   btn.textContent = "\u2699";
   btn.style.cssText = "background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:14px;";
-  const panel = document.createElement("div");
-  panel.style.cssText = "display:none;position:absolute;right:0;top:100%;margin-top:4px;width:280px;max-height:70vh;overflow:auto;padding:0;background:#161b22;border:1px solid #30363d;border-radius:6px;box-shadow:0 8px 24px #01040988;z-index:30;";
+  const overlay = document.createElement("div");
+  overlay.style.cssText = "display:none;position:fixed;inset:0;z-index:2000;background:#01040999;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;";
+  const dialog = document.createElement("div");
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.style.cssText = "width:min(420px,100%);max-height:min(85vh,640px);display:flex;flex-direction:column;background:#161b22;border:1px solid #30363d;border-radius:8px;box-shadow:0 16px 48px #010409cc;overflow:hidden;";
+  const header = document.createElement("div");
+  header.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #30363d;";
+  const title = document.createElement("span");
+  title.textContent = t("settings.title", "\u8A2D\u5B9A");
+  title.style.cssText = "font-size:14px;font-weight:600;color:#e6edf3;";
+  const closeBtn = document.createElement("button");
+  closeBtn.type = "button";
+  closeBtn.textContent = "\xD7";
+  closeBtn.title = t("settings.close", "\u95DC\u9589");
+  closeBtn.style.cssText = "background:transparent;border:none;color:#8b949e;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;";
+  header.append(title, closeBtn);
   const tabs = document.createElement("div");
-  tabs.style.cssText = "display:flex;border-bottom:1px solid #30363d;";
+  tabs.style.cssText = "display:flex;border-bottom:1px solid #30363d;flex-shrink:0;";
   const content = document.createElement("div");
-  content.style.cssText = "padding:10px 12px;font-size:12px;";
+  content.style.cssText = "padding:10px 12px;font-size:12px;overflow:auto;flex:1;min-height:0;";
   const tabIds = [
     ["chart", t("settings.tab.chart", "\u5716\u8868")],
     ["drawing", t("settings.tab.drawing", "\u7E6A\u5716")],
@@ -125,16 +144,16 @@ function mountSettingsPanel(parent, opts = {}) {
     row.append(input, document.createTextNode(label));
     return row;
   };
-  const actionButton = (label, onClick) => {
-    const btn2 = document.createElement("button");
-    btn2.type = "button";
-    btn2.textContent = label;
-    btn2.style.cssText = "display:block;width:100%;margin-top:10px;padding:6px 10px;border-radius:4px;border:1px solid #f85149;background:#21262d;color:#f85149;cursor:pointer;font-size:12px;";
-    btn2.onclick = (e) => {
+  const actionButton = (label, onClick, danger = true) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.textContent = label;
+    b.style.cssText = `display:block;width:100%;margin-top:10px;padding:6px 10px;border-radius:4px;border:1px solid ${danger ? "#f85149" : "#30363d"};background:#21262d;color:${danger ? "#f85149" : "#e6edf3"};cursor:pointer;font-size:12px;`;
+    b.onclick = (e) => {
       e.stopPropagation();
       onClick();
     };
-    return btn2;
+    return b;
   };
   const numberField = (label, value, onChange) => {
     const row = document.createElement("label");
@@ -148,6 +167,49 @@ function mountSettingsPanel(parent, opts = {}) {
     row.appendChild(input);
     return row;
   };
+  const renderLayerList = () => {
+    const layers = listActiveIndicatorLayers(indicatorConfig);
+    const section = document.createElement("div");
+    section.style.marginBottom = "12px";
+    const heading = document.createElement("div");
+    heading.textContent = t("settings.ind.layers", "\u6307\u6A19\u5716\u5C64");
+    heading.style.cssText = "font-weight:600;color:#e6edf3;margin-bottom:6px;font-size:12px;";
+    section.appendChild(heading);
+    if (layers.length === 0) {
+      const empty = document.createElement("div");
+      empty.textContent = t("settings.ind.layersEmpty", "\u76EE\u524D\u6C92\u6709\u6307\u6A19");
+      empty.style.cssText = "color:#8b949e;font-size:11px;";
+      section.appendChild(empty);
+      return section;
+    }
+    for (const layer of layers) {
+      const row = document.createElement("div");
+      row.style.cssText = "display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;margin-bottom:4px;border-radius:4px;background:#0d1117;border:1px solid #30363d;";
+      const meta = document.createElement("div");
+      meta.style.cssText = "min-width:0;";
+      const name = document.createElement("div");
+      name.textContent = layer.label;
+      name.style.cssText = "color:#e6edf3;font-size:12px;";
+      const target = document.createElement("div");
+      target.textContent = layer.target === "main" ? t("settings.ind.layerMain", "\u4E3B\u5716") : t("settings.ind.layerPane", "\u526F\u5716");
+      target.style.cssText = "color:#8b949e;font-size:10px;margin-top:2px;";
+      meta.append(name, target);
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.textContent = t("settings.ind.layerRemove", "\u79FB\u9664");
+      remove.title = t("settings.ind.layerRemove", "\u79FB\u9664");
+      remove.style.cssText = "flex-shrink:0;padding:2px 8px;border-radius:4px;border:1px solid #f85149;background:transparent;color:#f85149;cursor:pointer;font-size:11px;";
+      remove.onclick = (e) => {
+        e.stopPropagation();
+        indicatorConfig = disableIndicatorLayer(indicatorConfig, layer.id);
+        opts.onIndicatorConfigChange?.(indicatorConfig);
+        renderContent();
+      };
+      row.append(meta, remove);
+      section.appendChild(row);
+    }
+    return section;
+  };
   const renderContent = () => {
     content.replaceChildren();
     if (tab === "chart") {
@@ -166,31 +228,43 @@ function mountSettingsPanel(parent, opts = {}) {
           opts.onReturnToCursorChange?.(v);
         })
       );
-      if (opts.onClearAllDrawings) {
-        content.appendChild(
-          actionButton(t("settings.drawing.clearAll", "\u6E05\u9664\u6240\u6709\u756B\u7DDA"), () => {
-            opts.onClearAllDrawings?.();
-            renderContent();
-          })
-        );
-      }
+      content.appendChild(
+        actionButton(t("settings.drawing.clearAll", "\u6E05\u9664\u6240\u6709\u756B\u7DDA"), () => {
+          opts.onClearAllDrawings?.();
+          renderContent();
+        })
+      );
     } else {
+      content.appendChild(renderLayerList());
+      content.appendChild(
+        checkbox(t("settings.ind.volume", "\u6210\u4EA4\u91CF\u526F\u5716"), indicatorConfig.showVolume, (v) => {
+          indicatorConfig = { ...indicatorConfig, showVolume: v };
+          opts.onIndicatorConfigChange?.(indicatorConfig);
+          renderContent();
+        })
+      );
+      const divider = document.createElement("div");
+      divider.style.cssText = "height:1px;background:#30363d;margin:10px 0;";
+      content.appendChild(divider);
       content.appendChild(
         checkbox(t("settings.ind.macd", "MACD \u7A97\u683C"), indicatorConfig.showMacd, (v) => {
           indicatorConfig = { ...indicatorConfig, showMacd: v };
           opts.onIndicatorConfigChange?.(indicatorConfig);
+          renderContent();
         })
       );
       content.appendChild(
         checkbox(t("settings.ind.rsi", "RSI \u7A97\u683C"), indicatorConfig.showRsi, (v) => {
           indicatorConfig = { ...indicatorConfig, showRsi: v };
           opts.onIndicatorConfigChange?.(indicatorConfig);
+          renderContent();
         })
       );
       content.appendChild(
         checkbox(t("settings.ind.kdj", "KDJ \u7A97\u683C"), indicatorConfig.showKdj, (v) => {
           indicatorConfig = { ...indicatorConfig, showKdj: v };
           opts.onIndicatorConfigChange?.(indicatorConfig);
+          renderContent();
         })
       );
       const src = document.createElement("label");
@@ -215,6 +289,7 @@ function mountSettingsPanel(parent, opts = {}) {
         checkbox(t("settings.ind.ema", "EMA \u758A\u52A0"), indicatorConfig.showEma, (v) => {
           indicatorConfig = { ...indicatorConfig, showEma: v };
           opts.onIndicatorConfigChange?.(indicatorConfig);
+          renderContent();
         })
       );
       content.appendChild(
@@ -227,6 +302,7 @@ function mountSettingsPanel(parent, opts = {}) {
         checkbox(t("settings.ind.boll", "BOLL \u901A\u9053"), indicatorConfig.showBoll, (v) => {
           indicatorConfig = { ...indicatorConfig, showBoll: v };
           opts.onIndicatorConfigChange?.(indicatorConfig);
+          renderContent();
         })
       );
       content.appendChild(
@@ -265,37 +341,50 @@ function mountSettingsPanel(parent, opts = {}) {
           opts.onIndicatorConfigChange?.(indicatorConfig);
         })
       );
-      if (opts.onClearAllIndicators) {
-        content.appendChild(
-          actionButton(t("settings.ind.clearAll", "\u6E05\u7A7A\u6240\u6709\u6307\u6A19"), () => {
-            opts.onClearAllIndicators?.();
-            if (opts.indicatorConfig) indicatorConfig = { ...opts.indicatorConfig };
-            renderContent();
-          })
-        );
-      }
+      content.appendChild(
+        actionButton(t("settings.ind.clearAll", "\u6E05\u7A7A\u6240\u6709\u6307\u6A19"), () => {
+          opts.onClearAllIndicators?.();
+          if (opts.indicatorConfig) indicatorConfig = { ...opts.indicatorConfig };
+          renderContent();
+        })
+      );
     }
   };
-  renderTabs();
-  renderContent();
-  panel.append(tabs, content);
-  btn.onclick = (e) => {
-    e.stopPropagation();
-    open = !open;
+  const setOpen = (next) => {
+    open = next;
+    overlay.style.display = open ? "flex" : "none";
     if (open) {
       if (opts.indicatorConfig) indicatorConfig = { ...opts.indicatorConfig };
       renderContent();
     }
-    panel.style.display = open ? "block" : "none";
   };
-  const close = () => {
-    open = false;
-    panel.style.display = "none";
+  renderTabs();
+  renderContent();
+  dialog.append(header, tabs, content);
+  overlay.appendChild(dialog);
+  document.body.appendChild(overlay);
+  btn.onclick = (e) => {
+    e.stopPropagation();
+    setOpen(!open);
   };
-  document.addEventListener("click", close);
-  panel.onclick = (e) => e.stopPropagation();
-  wrap.append(btn, panel);
+  closeBtn.onclick = (e) => {
+    e.stopPropagation();
+    setOpen(false);
+  };
+  overlay.onclick = () => setOpen(false);
+  dialog.onclick = (e) => e.stopPropagation();
+  const onKey = (e) => {
+    if (e.key === "Escape" && open) setOpen(false);
+  };
+  document.addEventListener("keydown", onKey);
+  wrap.append(btn);
   parent.appendChild(wrap);
+  const origRemove = wrap.remove.bind(wrap);
+  wrap.remove = () => {
+    document.removeEventListener("keydown", onKey);
+    overlay.remove();
+    origRemove();
+  };
   return wrap;
 }
 
@@ -713,6 +802,9 @@ function createI18nProvider(defaultLocale = "zh-TW") {
   };
 }
 
+// src/chart-layout.ts
+import { t as t7 } from "@coderyo/i18n";
+
 // src/context-menu.ts
 import { t as t3 } from "@coderyo/i18n";
 function attachChartContextMenu(chartHost, opts = {}) {
@@ -778,7 +870,7 @@ function mountCrosshairLegend(chartHost, opts = {}) {
   title.style.cssText = "color:#8b949e;margin-bottom:2px;";
   const body = document.createElement("div");
   box.append(title, body);
-  chartHost.appendChild(box);
+  if (chartHost) chartHost.appendChild(box);
   const fmt2 = (n) => n == null ? "\u2014" : n.toLocaleString(void 0, { maximumFractionDigits: 2 });
   const render = (payload) => {
     const parts = [opts.symbol, opts.interval].filter(Boolean);
@@ -811,7 +903,7 @@ import { t as t4 } from "@coderyo/i18n";
 function mountDrawingPropertiesPanel(parent, opts = {}) {
   const panel = document.createElement("aside");
   panel.className = "tv-drawing-props";
-  panel.style.cssText = "display:none;width:220px;flex-shrink:0;border-left:1px solid #30363d;background:#161b22;padding:10px 12px;font-size:12px;color:#e6edf3;overflow:auto;";
+  panel.style.cssText = "display:none;width:100%;max-width:200px;flex-shrink:0;border-left:1px solid #30363d;background:#161b22;padding:10px 12px;font-size:12px;color:#e6edf3;overflow:auto;box-sizing:border-box;";
   const title = document.createElement("div");
   title.textContent = t4("drawing.props.title", "\u7E6A\u5716\u5C6C\u6027");
   title.style.cssText = "font-weight:600;margin-bottom:10px;";
@@ -889,6 +981,414 @@ function mountIndicatorPaneHost(parent) {
   return host;
 }
 
+// src/layout-schema.ts
+var LAYOUT_SCHEMA_VERSION = 1;
+var DEFAULT_LAYOUT_SCHEMA = {
+  version: 1,
+  columns: 12,
+  rows: 12,
+  widgets: [
+    { id: "topBar", col: 0, row: 0, colSpan: 12, rowSpan: 1 },
+    { id: "leftToolbar", col: 0, row: 1, colSpan: 1, rowSpan: 10 },
+    { id: "chartHost", col: 1, row: 1, colSpan: 9, rowSpan: 6 },
+    { id: "indicatorHost", col: 1, row: 7, colSpan: 9, rowSpan: 2 },
+    { id: "statusBar", col: 1, row: 9, colSpan: 9, rowSpan: 1 },
+    { id: "propertiesPanel", col: 10, row: 1, colSpan: 2, rowSpan: 9 },
+    { id: "bottomToolbar", col: 0, row: 11, colSpan: 12, rowSpan: 1 }
+  ]
+};
+function layoutStorageKey(layoutId) {
+  return `tradview:layout:v${LAYOUT_SCHEMA_VERSION}:${layoutId}`;
+}
+function resolveLayoutSchema(partial) {
+  if (!partial) return cloneLayoutSchema(DEFAULT_LAYOUT_SCHEMA);
+  return normalizeLayoutSchema(partial);
+}
+function cloneLayoutSchema(schema) {
+  return {
+    version: 1,
+    columns: schema.columns,
+    rows: schema.rows,
+    widgets: schema.widgets.map((w) => ({ ...w }))
+  };
+}
+function normalizeLayoutSchema(input) {
+  const columns = Math.max(4, Math.min(24, input.columns || 12));
+  const rows = Math.max(4, Math.min(24, input.rows || 12));
+  const widgets = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const w of input.widgets ?? []) {
+    if (!isLayoutWidgetId(w.id) || seen.has(w.id)) continue;
+    seen.add(w.id);
+    widgets.push(clampPlacement(w, columns, rows));
+  }
+  for (const d of DEFAULT_LAYOUT_SCHEMA.widgets) {
+    if (!seen.has(d.id)) widgets.push({ ...d });
+  }
+  return { version: 1, columns, rows, widgets };
+}
+function clampPlacement(w, columns, rows) {
+  const colSpan = Math.max(1, Math.min(columns, w.colSpan || 1));
+  const rowSpan = Math.max(1, Math.min(rows, w.rowSpan || 1));
+  const col = Math.max(0, Math.min(columns - colSpan, w.col || 0));
+  const row = Math.max(0, Math.min(rows - rowSpan, w.row || 0));
+  return { id: w.id, col, row, colSpan, rowSpan };
+}
+function isLayoutWidgetId(id) {
+  return id === "topBar" || id === "leftToolbar" || id === "bottomToolbar" || id === "chartHost" || id === "indicatorHost" || id === "statusBar" || id === "propertiesPanel";
+}
+function loadLayoutSchema(layoutId) {
+  try {
+    const raw = localStorage.getItem(layoutStorageKey(layoutId));
+    if (!raw) return null;
+    return normalizeLayoutSchema(JSON.parse(raw));
+  } catch {
+    return null;
+  }
+}
+function saveLayoutSchema(layoutId, schema) {
+  try {
+    localStorage.setItem(layoutStorageKey(layoutId), JSON.stringify(normalizeLayoutSchema(schema)));
+  } catch {
+  }
+}
+function getWidgetPlacement(schema, id) {
+  return schema.widgets.find((w) => w.id === id);
+}
+
+// src/layout-engine.ts
+function createLayoutGrid(opts) {
+  let schema = cloneLayoutSchema(opts.schema);
+  const cells = /* @__PURE__ */ new Map();
+  const root = document.createElement("div");
+  root.className = "tv-layout-root";
+  root.style.cssText = "display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;height:100%;box-sizing:border-box;";
+  const grid = document.createElement("div");
+  grid.className = "tv-layout-grid";
+  grid.style.cssText = "display:grid;flex:1;min-height:0;min-width:0;width:100%;position:relative;gap:0;";
+  root.appendChild(grid);
+  for (const w of schema.widgets) {
+    const cell = document.createElement("div");
+    cell.className = `tv-layout-cell tv-layout-cell--${w.id}`;
+    cell.dataset.widgetId = w.id;
+    cell.style.cssText = "min-width:0;min-height:0;overflow:hidden;position:relative;box-sizing:border-box;";
+    const el = opts.widgets[w.id];
+    if (el) {
+      el.style.width = "100%";
+      el.style.height = "100%";
+      el.style.minWidth = "0";
+      el.style.minHeight = "0";
+      if (w.id === "chartHost") el.style.position = "relative";
+      cell.appendChild(el);
+    }
+    cells.set(w.id, cell);
+    grid.appendChild(cell);
+  }
+  let editorCtl = null;
+  const applySchema = (next, features) => {
+    schema = cloneLayoutSchema(next);
+    applyGridTemplate(grid, schema, features);
+    for (const w of schema.widgets) {
+      const cell = cells.get(w.id);
+      if (!cell) continue;
+      applyPlacementStyle(cell, w);
+      const visible = widgetVisible(w.id, features);
+      cell.style.display = visible ? "" : "none";
+      cell.style.pointerEvents = visible ? "" : "none";
+    }
+    editorCtl?.refresh(schema);
+  };
+  const enableEditor = (enabled) => {
+    if (enabled) {
+      if (!editorCtl) {
+        editorCtl = new LayoutEditorController(grid, cells, schema, (s) => {
+          schema = s;
+          opts.onSchemaChange?.(s);
+        });
+      }
+      editorCtl.enable(true);
+      root.classList.add("tv-layout--edit");
+    } else {
+      editorCtl?.enable(false);
+      root.classList.remove("tv-layout--edit");
+    }
+  };
+  applySchema(schema, opts.features);
+  if (opts.editor) enableEditor(true);
+  return {
+    root,
+    grid,
+    cells,
+    applySchema,
+    enableEditor,
+    getSchema: () => cloneLayoutSchema(schema),
+    setSchema: (s) => {
+      schema = cloneLayoutSchema(s);
+      applySchema(schema, opts.features);
+    },
+    destroyEditor: () => {
+      editorCtl?.destroy();
+      editorCtl = null;
+    }
+  };
+}
+function widgetVisible(id, f) {
+  switch (id) {
+    case "topBar":
+      return f.showTopBar;
+    case "leftToolbar":
+      return f.showLeftToolbar;
+    case "bottomToolbar":
+      return f.showBottomToolbar;
+    case "statusBar":
+      return f.showStatusBar;
+    case "propertiesPanel":
+      return f.showPropertiesPanel;
+    case "chartHost":
+    case "indicatorHost":
+      return true;
+    default:
+      return true;
+  }
+}
+var LEFT_TOOLBAR_COL_PX = 44;
+function applyGridTemplate(grid, schema, features) {
+  const narrowToolbar = features?.showLeftToolbar ?? false;
+  if (narrowToolbar && schema.columns >= 2) {
+    grid.style.gridTemplateColumns = `${LEFT_TOOLBAR_COL_PX}px repeat(${schema.columns - 1}, minmax(0, 1fr))`;
+  } else {
+    grid.style.gridTemplateColumns = `repeat(${schema.columns}, minmax(0, 1fr))`;
+  }
+  grid.style.gridTemplateRows = `repeat(${schema.rows}, minmax(0, 1fr))`;
+}
+function applyPlacementStyle(cell, w) {
+  cell.style.gridColumn = `${w.col + 1} / span ${w.colSpan}`;
+  cell.style.gridRow = `${w.row + 1} / span ${w.rowSpan}`;
+}
+var LayoutEditorController = class {
+  constructor(grid, cells, schema, onChange) {
+    this.grid = grid;
+    this.cells = cells;
+    this.schema = schema;
+    this.onChange = onChange;
+  }
+  grid;
+  cells;
+  schema;
+  onChange;
+  enabled = false;
+  drag = null;
+  resize = null;
+  cleanups = [];
+  refresh(schema) {
+    this.schema = cloneLayoutSchema(schema);
+    for (const w of this.schema.widgets) {
+      const cell = this.cells.get(w.id);
+      if (cell) applyPlacementStyle(cell, w);
+    }
+  }
+  enable(on) {
+    if (this.enabled === on) return;
+    this.enabled = on;
+    if (on) this.bind();
+    else this.unbind();
+  }
+  destroy() {
+    this.enable(false);
+  }
+  bind() {
+    for (const [id, cell] of this.cells) {
+      const handle = document.createElement("div");
+      handle.className = "tv-layout-drag-handle";
+      handle.title = `Drag ${id}`;
+      handle.style.cssText = "position:absolute;top:2px;left:2px;z-index:20;padding:2px 6px;font-size:10px;background:#388bfd;color:#fff;border-radius:3px;cursor:grab;user-select:none;opacity:0.85;";
+      handle.textContent = id;
+      const resize = document.createElement("div");
+      resize.className = "tv-layout-resize-handle";
+      resize.title = "Resize";
+      resize.style.cssText = "position:absolute;right:2px;bottom:2px;width:12px;height:12px;z-index:20;background:#388bfd;border-radius:2px;cursor:nwse-resize;opacity:0.85;";
+      cell.style.outline = "1px dashed #388bfd";
+      cell.appendChild(handle);
+      cell.appendChild(resize);
+      const onDragDown = (ev) => {
+        ev.preventDefault();
+        const p = getPlacement(this.schema, id);
+        if (!p) return;
+        this.drag = { id, startX: ev.clientX, startY: ev.clientY, origin: { ...p } };
+        handle.setPointerCapture(ev.pointerId);
+      };
+      const onDragMove = (ev) => {
+        if (!this.drag || this.drag.id !== id) return;
+        const delta = pixelDeltaToGrid(this.grid, this.schema, ev.clientX - this.drag.startX, ev.clientY - this.drag.startY);
+        const next = clampPlacement2(
+          {
+            ...this.drag.origin,
+            col: this.drag.origin.col + delta.dCol,
+            row: this.drag.origin.row + delta.dRow
+          },
+          this.schema
+        );
+        updatePlacement(this.schema, next);
+        applyPlacementStyle(cell, next);
+      };
+      const onDragUp = (ev) => {
+        if (!this.drag || this.drag.id !== id) return;
+        this.drag = null;
+        handle.releasePointerCapture(ev.pointerId);
+        this.onChange(cloneLayoutSchema(this.schema));
+      };
+      const onResizeDown = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const p = getPlacement(this.schema, id);
+        if (!p) return;
+        this.resize = { id, startX: ev.clientX, startY: ev.clientY, origin: { ...p } };
+        resize.setPointerCapture(ev.pointerId);
+      };
+      const onResizeMove = (ev) => {
+        if (!this.resize || this.resize.id !== id) return;
+        const delta = pixelDeltaToGrid(this.grid, this.schema, ev.clientX - this.resize.startX, ev.clientY - this.resize.startY);
+        const next = clampPlacement2(
+          {
+            ...this.resize.origin,
+            colSpan: this.resize.origin.colSpan + delta.dCol,
+            rowSpan: this.resize.origin.rowSpan + delta.dRow
+          },
+          this.schema
+        );
+        updatePlacement(this.schema, next);
+        applyPlacementStyle(cell, next);
+      };
+      const onResizeUp = (ev) => {
+        if (!this.resize || this.resize.id !== id) return;
+        this.resize = null;
+        resize.releasePointerCapture(ev.pointerId);
+        this.onChange(cloneLayoutSchema(this.schema));
+      };
+      handle.addEventListener("pointerdown", onDragDown);
+      handle.addEventListener("pointermove", onDragMove);
+      handle.addEventListener("pointerup", onDragUp);
+      resize.addEventListener("pointerdown", onResizeDown);
+      resize.addEventListener("pointermove", onResizeMove);
+      resize.addEventListener("pointerup", onResizeUp);
+      this.cleanups.push(() => {
+        handle.remove();
+        resize.remove();
+        cell.style.outline = "";
+      });
+    }
+  }
+  unbind() {
+    for (const fn of this.cleanups) fn();
+    this.cleanups.length = 0;
+    this.drag = null;
+    this.resize = null;
+  }
+};
+function getPlacement(schema, id) {
+  return schema.widgets.find((w) => w.id === id);
+}
+function updatePlacement(schema, p) {
+  const i = schema.widgets.findIndex((w) => w.id === p.id);
+  if (i >= 0) schema.widgets[i] = p;
+}
+function clampPlacement2(p, schema) {
+  const colSpan = Math.max(1, Math.min(schema.columns - p.col, p.colSpan));
+  const rowSpan = Math.max(1, Math.min(schema.rows - p.row, p.rowSpan));
+  const col = Math.max(0, Math.min(schema.columns - colSpan, p.col));
+  const row = Math.max(0, Math.min(schema.rows - rowSpan, p.row));
+  return { ...p, col, row, colSpan, rowSpan };
+}
+function pixelDeltaToGrid(grid, schema, dx, dy) {
+  const rect = grid.getBoundingClientRect();
+  const cellW = rect.width / schema.columns;
+  const cellH = rect.height / schema.rows;
+  return {
+    dCol: cellW > 0 ? Math.round(dx / cellW) : 0,
+    dRow: cellH > 0 ? Math.round(dy / cellH) : 0
+  };
+}
+
+// src/layer/compositor-shell.ts
+function createCompositorShell(opts) {
+  const cells = /* @__PURE__ */ new Map();
+  const root = document.createElement("div");
+  root.className = "tv-layout-root tv-layout-root--compositor";
+  root.style.cssText = "display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;height:100%;box-sizing:border-box;position:relative;";
+  const grid = document.createElement("div");
+  grid.className = "tv-compositor-shell-grid";
+  grid.style.cssText = "position:absolute;inset:0;overflow:hidden;visibility:hidden;pointer-events:none;z-index:0;";
+  root.appendChild(grid);
+  const widgetIds = [
+    "topBar",
+    "leftToolbar",
+    "bottomToolbar",
+    "chartHost",
+    "indicatorHost",
+    "statusBar",
+    "propertiesPanel"
+  ];
+  for (const id of widgetIds) {
+    const cell = document.createElement("div");
+    cell.className = `tv-layout-cell tv-layout-cell--${id}`;
+    cell.dataset.widgetId = id;
+    cell.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;box-sizing:border-box;";
+    const el = opts.widgets[id];
+    if (el) {
+      el.style.width = "100%";
+      el.style.height = "100%";
+      el.style.minWidth = "0";
+      el.style.minHeight = "0";
+      if (id === "chartHost") el.style.position = "relative";
+      cell.appendChild(el);
+    }
+    cells.set(id, cell);
+    grid.appendChild(cell);
+  }
+  return { root, grid, cells };
+}
+function applyCompositorShellFeatures(_cells, _features) {
+}
+
+// src/layer/compositor-shell-sync.ts
+var SHELL_FEATURE_KEYS = [
+  "showTopBar",
+  "showLeftToolbar",
+  "showBottomToolbar",
+  "showStatusBar",
+  "showPropertiesPanel",
+  "showCrosshairLegend"
+];
+function shellLayerMatchesFeature(layer, feature) {
+  switch (feature) {
+    case "showTopBar":
+      return layer.type === "shell.topBar" || layer.widgetKey === "topBar";
+    case "showLeftToolbar":
+      return layer.type === "shell.leftToolbar" || layer.widgetKey === "leftToolbar";
+    case "showBottomToolbar":
+      return layer.type === "shell.bottomToolbar" || layer.widgetKey === "bottomToolbar";
+    case "showStatusBar":
+      return layer.type === "shell.statusBar" || layer.widgetKey === "statusBar";
+    case "showPropertiesPanel":
+      return layer.type === "shell.propertiesPanel" || layer.widgetKey === "propertiesPanel";
+    case "showCrosshairLegend":
+      return layer.type === "overlay.crosshairLegend" || layer.widgetKey === "crosshairLegend";
+    default:
+      return false;
+  }
+}
+function syncCompositorShellVisibilityFromFeatures(controller, features) {
+  const pageLayers = controller.getLayersForActivePage();
+  for (const feature of SHELL_FEATURE_KEYS) {
+    const visible = features[feature];
+    for (const layer of pageLayers) {
+      if (shellLayerMatchesFeature(layer, feature)) {
+        controller.setLayerVisible(layer.id, visible);
+      }
+    }
+  }
+}
+
 // src/layout-features.ts
 var DEFAULT_LAYOUT_FEATURES = {
   showTopBar: false,
@@ -1072,7 +1572,7 @@ var DRAWING_TOOLS = [
 ];
 var MOBILE_MQ = "(max-width: 768px)";
 function mountToolButtons(parent, activeTool, onSelect, layout) {
-  const btnStyle = layout === "column" ? "width:36px;height:32px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:14px;" : "min-width:40px;height:36px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:14px;padding:0 8px;";
+  const btnStyle = layout === "column" ? "width:32px;height:28px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:13px;padding:0;" : "min-width:36px;height:32px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:13px;padding:0 6px;";
   const activeStyle = btnStyle.replace("#21262d", "#388bfd").replace("#e6edf3", "#fff");
   const buttons = /* @__PURE__ */ new Map();
   for (const tool of DRAWING_TOOLS) {
@@ -1095,21 +1595,26 @@ function mountToolButtons(parent, activeTool, onSelect, layout) {
 }
 function mountChartLayout(root, opts = {}) {
   let layoutFeatures = resolveLayoutFeatures(opts);
+  const layoutId = opts.layoutId ?? "default";
+  root.replaceChildren();
   root.style.display = "flex";
   root.style.flexDirection = "column";
-  root.style.height = "100%";
-  root.style.width = "100%";
+  root.style.height = root.style.height || "100%";
+  root.style.width = root.style.width || "100%";
   root.style.minWidth = "0";
   root.style.boxSizing = "border-box";
-  root.style.overflow = "visible";
-  const themeProvider = opts.themeProvider ?? createThemeProvider();
-  const i18nProvider = opts.i18n ?? createI18nProvider();
-  themeProvider.subscribe((theme) => {
+  root.style.overflow = "hidden";
+  const useAutoTheme = opts.autoThemeProvider !== false;
+  const useAutoI18n = opts.autoI18n !== false;
+  const themeProvider = opts.themeProvider ?? (useAutoTheme ? createThemeProvider() : void 0);
+  const i18nProvider = opts.i18n ?? (useAutoI18n ? createI18nProvider() : void 0);
+  themeProvider?.subscribe((theme) => {
     root.style.background = theme === "dark" ? "#0d1117" : "#f6f8fa";
   });
   let activeTool = opts.activeDrawingTool ?? "cursor";
   let setActiveDesktop = null;
   let setActiveMobile = null;
+  let lastSelectedDrawing = null;
   const setActiveDrawingTool = (tool) => {
     activeTool = tool;
     setActiveDesktop?.(tool);
@@ -1119,69 +1624,173 @@ function mountChartLayout(root, opts = {}) {
     setActiveDrawingTool(tool);
     opts.onDrawingToolSelect?.(tool);
   };
-  const headerSlot = document.createElement("div");
-  headerSlot.className = "tv-layout-header";
-  headerSlot.style.cssText = "display:none;flex-shrink:0;width:100%;min-width:0;overflow:visible;position:relative;z-index:30;";
-  const body = document.createElement("div");
-  body.className = "tv-layout-body";
-  body.style.cssText = "display:flex;flex:1;min-height:0;min-width:0;overflow:hidden;position:relative;z-index:0;";
-  const leftAside = document.createElement("aside");
-  leftAside.style.cssText = "width:48px;border-right:1px solid #30363d;background:#161b22;display:flex;flex-direction:column;align-items:center;padding:8px 4px;gap:8px;flex-shrink:0;";
-  const bottomBar = document.createElement("div");
-  bottomBar.style.cssText = "display:none;flex-shrink:0;gap:6px;padding:6px 8px;border-top:1px solid #30363d;background:#161b22;overflow-x:auto;";
-  const chartColumn = document.createElement("div");
-  chartColumn.style.cssText = "display:flex;flex-direction:column;flex:1;min-height:0;";
+  const topBarHost = document.createElement("div");
+  topBarHost.className = "tv-layout-header";
+  topBarHost.style.cssText = "width:100%;min-width:0;overflow:visible;position:relative;z-index:30;";
+  const leftToolbar = document.createElement("aside");
+  leftToolbar.style.cssText = "width:100%;height:100%;max-width:44px;border-right:1px solid #30363d;background:#161b22;display:flex;flex-direction:column;align-items:center;padding:4px 2px;gap:4px;box-sizing:border-box;overflow:hidden;";
+  const bottomToolbar = document.createElement("div");
+  bottomToolbar.style.cssText = "width:100%;height:100%;gap:6px;padding:6px 8px;border-top:1px solid #30363d;background:#161b22;overflow-x:auto;box-sizing:border-box;display:flex;flex-direction:row;";
+  const chartMain = document.createElement("div");
+  chartMain.className = "tv-chart-main-mount";
+  chartMain.style.cssText = "width:100%;height:100%;min-height:120px;position:relative;overflow:hidden;box-sizing:border-box;";
+  const chartVolume = document.createElement("div");
+  chartVolume.className = "tv-chart-volume-mount";
+  chartVolume.style.cssText = "width:100%;height:100%;min-height:48px;position:relative;overflow:hidden;box-sizing:border-box;";
   const chartHost = document.createElement("div");
-  chartHost.style.cssText = "flex:1;min-height:0;width:100%;height:100%;position:relative;overflow:hidden;";
-  chartColumn.appendChild(chartHost);
-  const indicatorHost = mountIndicatorPaneHost(chartColumn);
-  const statusBar = mountStatusBar(chartColumn, opts.statusBar ?? {});
-  body.appendChild(chartColumn);
-  const propertiesPanel = mountDrawingPropertiesPanel(body, {
+  chartHost.className = "tv-chart-grid-anchor";
+  chartHost.style.cssText = "width:100%;height:100%;min-height:0;position:relative;overflow:hidden;box-sizing:border-box;";
+  const indicatorMount = document.createElement("div");
+  indicatorMount.style.cssText = "width:100%;height:100%;min-height:0;display:flex;flex-direction:column;";
+  const indicatorHost = mountIndicatorPaneHost(indicatorMount);
+  indicatorHost.style.flex = "1";
+  const statusMount = document.createElement("div");
+  statusMount.style.cssText = "width:100%;height:100%;";
+  const statusBar = mountStatusBar(statusMount, opts.statusBar ?? {});
+  const propertiesMount = document.createElement("div");
+  propertiesMount.style.cssText = "width:100%;height:100%;min-height:0;";
+  const propertiesPanel = mountDrawingPropertiesPanel(propertiesMount, {
     onStyleChange: opts.onDrawingStyleChange
   });
-  opts.onDrawingSelectionBind?.(propertiesPanel.bind);
-  root.appendChild(headerSlot);
-  root.appendChild(body);
-  root.appendChild(bottomBar);
-  let topBar = headerSlot;
+  const layerCompositorManaged = opts.layerCompositorManaged === true;
+  const drawingOverlay = chartMain;
+  let loaded = null;
+  let layoutSchema = resolveLayoutSchema(null);
+  if (!layerCompositorManaged) {
+    loaded = opts.layout !== void 0 && opts.layout !== null ? resolveLayoutSchema(opts.layout) : opts.layoutPersist ? loadLayoutSchema(layoutId) : null;
+    layoutSchema = resolveLayoutSchema(loaded);
+  }
+  const persistLayout = (schema) => {
+    if (layerCompositorManaged) return;
+    layoutSchema = resolveLayoutSchema(schema);
+    if (opts.layoutPersist) saveLayoutSchema(layoutId, layoutSchema);
+    opts.onLayoutChange?.(layoutSchema);
+  };
+  let layoutShell;
+  if (layerCompositorManaged) {
+    layoutShell = createCompositorShell({
+      widgets: {
+        topBar: topBarHost,
+        leftToolbar,
+        bottomToolbar,
+        chartHost,
+        indicatorHost: indicatorMount,
+        statusBar: statusMount,
+        propertiesPanel: propertiesMount
+      }
+    });
+  } else {
+    layoutShell = createLayoutGrid({
+      schema: layoutSchema,
+      features: layoutFeatures,
+      editor: opts.layoutEditor ?? false,
+      onSchemaChange: persistLayout,
+      widgets: {
+        topBar: topBarHost,
+        leftToolbar,
+        bottomToolbar,
+        chartHost,
+        indicatorHost: indicatorMount,
+        statusBar: statusMount,
+        propertiesPanel: propertiesMount
+      }
+    });
+  }
+  root.appendChild(layoutShell.root);
+  let topBar = topBarHost;
   let setActiveInterval = () => {
   };
-  const crosshairLegend = mountCrosshairLegend(chartHost, { symbol: opts.initialSymbol });
+  const crosshairLegend = mountCrosshairLegend(
+    layerCompositorManaged ? void 0 : chartMain,
+    { symbol: opts.initialSymbol }
+  );
   let detachContextMenu = () => {
   };
   let shortcutsBound = false;
+  let disposeMobileMq = null;
+  const mountToolbarActions = (parent, compact) => {
+    const settings = opts.settings;
+    if (!settings?.onClearAllDrawings && !settings?.onClearAllIndicators) return;
+    const spacer = document.createElement("div");
+    spacer.style.flex = compact ? "1" : "0";
+    spacer.style.minHeight = compact ? "4px" : "0";
+    parent.appendChild(spacer);
+    const mk = (label, fn) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.textContent = compact ? label === t7("toolbar.clearDrawings", "\u6E05\u9664\u7E6A\u5716") ? "\u2327" : "\u2205" : label;
+      b.style.cssText = compact ? "width:32px;height:24px;font-size:10px;background:#21262d;color:#f85149;border:1px solid #30363d;border-radius:4px;cursor:pointer;" : "min-width:36px;height:28px;font-size:10px;background:#21262d;color:#f85149;border:1px solid #30363d;border-radius:4px;cursor:pointer;padding:0 4px;";
+      b.onclick = () => fn?.();
+      return b;
+    };
+    if (settings.onClearAllDrawings) {
+      parent.appendChild(mk(t7("toolbar.clearDrawings", "\u6E05\u9664\u7E6A\u5716"), settings.onClearAllDrawings));
+    }
+    if (settings.onClearAllIndicators) {
+      parent.appendChild(mk(t7("toolbar.clearIndicators", "\u6E05\u9664\u6307\u6A19"), settings.onClearAllIndicators));
+    }
+  };
   const mountLeftToolbar = () => {
-    if (leftAside.parentElement) return;
-    const desktopTools = mountToolButtons(leftAside, activeTool, onToolSelect, "column");
+    leftToolbar.replaceChildren();
+    const desktopTools = mountToolButtons(leftToolbar, activeTool, onToolSelect, "column");
     setActiveDesktop = desktopTools.setActive;
-    body.insertBefore(leftAside, chartColumn);
-    bottomBar.style.flexDirection = "row";
-    const mobileTools = mountToolButtons(bottomBar, activeTool, onToolSelect, "row");
+    mountToolbarActions(leftToolbar, true);
+    bottomToolbar.replaceChildren();
+    const mobileTools = mountToolButtons(bottomToolbar, activeTool, onToolSelect, "row");
     setActiveMobile = mobileTools.setActive;
-    const mq = window.matchMedia(MOBILE_MQ);
-    const applyLayout = () => {
-      const mobile = mq.matches;
-      leftAside.style.display = mobile ? "none" : "flex";
-      const showBottom = layoutFeatures.showBottomToolbar !== false;
-      bottomBar.style.display = mobile && showBottom ? "flex" : "none";
-    };
-    mq.addEventListener("change", applyLayout);
-    applyLayout();
+    mountToolbarActions(bottomToolbar, false);
   };
-  const unmountLeftToolbar = () => {
-    leftAside.remove();
-    bottomBar.innerHTML = "";
-    setActiveDesktop = null;
-    setActiveMobile = null;
+  const chartAreaColStart = () => layoutFeatures.showLeftToolbar ? 2 : 1;
+  const applyPropertiesPanelLayout = (drawing) => {
+    const showPanel = layoutFeatures.showPropertiesPanel && drawing != null;
+    propertiesPanel.el.style.display = showPanel ? "block" : "none";
+    if (layerCompositorManaged) return;
+    const propsCell = layoutShell.cells.get("propertiesPanel");
+    const chartCell = layoutShell.cells.get("chartHost");
+    const indCell = layoutShell.cells.get("indicatorHost");
+    const statusCell = layoutShell.cells.get("statusBar");
+    if (!propsCell || !chartCell) return;
+    const cw = getWidgetPlacement(layoutSchema, "chartHost");
+    const iw = getWidgetPlacement(layoutSchema, "indicatorHost");
+    const sw = getWidgetPlacement(layoutSchema, "statusBar");
+    const pw = getWidgetPlacement(layoutSchema, "propertiesPanel");
+    const applyPlacement = (cell, p) => {
+      cell.style.gridColumn = `${p.col + 1} / span ${p.colSpan}`;
+      cell.style.gridRow = `${p.row + 1} / span ${p.rowSpan}`;
+    };
+    if (showPanel) {
+      propsCell.style.display = "";
+      if (pw) applyPlacement(propsCell, pw);
+      if (cw) applyPlacement(chartCell, cw);
+      if (indCell && iw) {
+        indCell.style.display = "";
+        applyPlacement(indCell, iw);
+      }
+      if (statusCell && sw) applyPlacement(statusCell, sw);
+    } else {
+      propsCell.style.display = "none";
+      const end = layoutSchema.columns + 1;
+      const start = chartAreaColStart();
+      chartCell.style.gridColumn = `${start} / ${end}`;
+      if (cw) chartCell.style.gridRow = `${cw.row + 1} / span ${cw.rowSpan}`;
+      if (indCell && iw) {
+        indCell.style.display = "";
+        indCell.style.gridColumn = `${start} / ${end}`;
+        indCell.style.gridRow = `${iw.row + 1} / span ${iw.rowSpan}`;
+      }
+      if (statusCell && sw) {
+        statusCell.style.gridColumn = `${start} / ${end}`;
+        statusCell.style.gridRow = `${sw.row + 1} / span ${sw.rowSpan}`;
+      }
+    }
   };
   const applyLayoutFeatures = () => {
     const f = layoutFeatures;
     if (f.showTopBar) {
-      headerSlot.replaceChildren();
-      headerSlot.style.display = "";
+      topBarHost.replaceChildren();
       const mounted = mountTopBar(
-        headerSlot,
+        topBarHost,
         Object.assign(opts, {
           symbolInput: f.symbolInput,
           showSettings: f.showSettings,
@@ -1196,18 +1805,44 @@ function mountChartLayout(root, opts = {}) {
       topBar = mounted.el;
       setActiveInterval = mounted.setActiveInterval;
     } else {
-      headerSlot.replaceChildren();
-      headerSlot.style.display = "none";
-      topBar = headerSlot;
-    }
-    if (f.showLeftToolbar) mountLeftToolbar();
-    else unmountLeftToolbar();
-    crosshairLegend.el.style.display = f.showCrosshairLegend ? "" : "none";
-    statusBar.el.style.display = f.showStatusBar ? "" : "none";
-    propertiesPanel.el.style.display = f.showPropertiesPanel ? "" : "none";
+      topBarHost.replaceChildren();
+      topBar = topBarHost;
+    }
+    if (f.showLeftToolbar || f.showBottomToolbar) mountLeftToolbar();
+    else {
+      leftToolbar.replaceChildren();
+      bottomToolbar.replaceChildren();
+      setActiveDesktop = null;
+      setActiveMobile = null;
+    }
+    if (!layerCompositorManaged) {
+      layoutShell.applySchema(layoutSchema, f);
+    }
+    disposeMobileMq?.();
+    const mq = window.matchMedia(MOBILE_MQ);
+    const applyMobileTools = () => {
+      const features = layoutFeatures;
+      const mobile = mq.matches;
+      if (features.showLeftToolbar) {
+        leftToolbar.style.display = mobile ? "none" : "flex";
+      }
+      if (features.showBottomToolbar) {
+        bottomToolbar.style.display = mobile ? "flex" : "none";
+        const bottomCell = layoutShell.cells.get("bottomToolbar");
+        if (bottomCell) {
+          bottomCell.style.display = mobile && features.showBottomToolbar ? "" : "none";
+        }
+      }
+    };
+    mq.addEventListener("change", applyMobileTools);
+    disposeMobileMq = () => mq.removeEventListener("change", applyMobileTools);
+    applyMobileTools();
+    if (!layerCompositorManaged) {
+      crosshairLegend.el.style.display = f.showCrosshairLegend ? "" : "none";
+    }
     detachContextMenu();
     if (f.showContextMenu) {
-      detachContextMenu = attachChartContextMenu(chartHost, {
+      detachContextMenu = attachChartContextMenu(chartMain, {
         actions: opts.contextMenuActions
       });
     }
@@ -1215,10 +1850,36 @@ function mountChartLayout(root, opts = {}) {
       bindShortcutsModal();
       shortcutsBound = true;
     }
+    applyPropertiesPanelLayout(lastSelectedDrawing);
   };
+  const handleDrawingSelection = (drawing) => {
+    lastSelectedDrawing = drawing;
+    propertiesPanel.bind(drawing);
+    applyPropertiesPanelLayout(drawing);
+  };
+  opts.onDrawingSelectionBind?.(propertiesPanel.bind);
   applyLayoutFeatures();
+  applyPropertiesPanelLayout(null);
+  let boundCompositorController = null;
+  const syncCompositorShellVisibility = layerCompositorManaged ? (controller) => {
+    syncCompositorShellVisibilityFromFeatures(controller, layoutFeatures);
+  } : void 0;
+  const syncCompositorShellVisibilityIfBound = () => {
+    if (boundCompositorController) {
+      syncCompositorShellVisibilityFromFeatures(boundCompositorController, layoutFeatures);
+    }
+  };
+  const bindLayerCompositorController = layerCompositorManaged ? (controller) => {
+    boundCompositorController = controller;
+    syncCompositorShellVisibilityFromFeatures(controller, layoutFeatures);
+  } : void 0;
   return {
-    chartHost,
+    layoutRoot: layoutShell.root,
+    layoutGrid: layoutShell.grid,
+    chartHost: chartMain,
+    chartMain,
+    chartVolume,
+    drawingOverlay,
     indicatorHost,
     topBar,
     setActiveInterval,
@@ -1227,86 +1888,1950 @@ function mountChartLayout(root, opts = {}) {
     detachContextMenu,
     setActiveDrawingTool,
     propertiesPanel,
+    handleDrawingSelection,
+    syncCompositorShellVisibility,
+    bindLayerCompositorController,
     setLayoutFeatures: (patch) => {
       layoutFeatures = mergeLayoutFeatures(layoutFeatures, patch);
       applyLayoutFeatures();
+      syncCompositorShellVisibilityIfBound();
     },
-    getLayoutFeatures: () => ({ ...layoutFeatures })
+    getLayoutFeatures: () => ({ ...layoutFeatures }),
+    getLayoutSchema: () => layerCompositorManaged ? layoutSchema : layoutShell.getSchema(),
+    setLayoutSchema: (schema) => {
+      if (layerCompositorManaged) return;
+      layoutSchema = resolveLayoutSchema(schema);
+      const grid = layoutShell;
+      grid.setSchema(layoutSchema);
+      grid.applySchema(layoutSchema, layoutFeatures);
+      persistLayout(layoutSchema);
+    },
+    enableLayoutEditor: (enabled) => {
+      if (layerCompositorManaged) return;
+      layoutShell.enableEditor(enabled);
+    },
+    saveLayout: () => {
+      if (layerCompositorManaged) return;
+      persistLayout(layoutShell.getSchema());
+    }
   };
 }
 
-// src/drawing-context-menu.ts
-import { t as t7 } from "@coderyo/i18n";
-function openDrawingContextMenu(clientX, clientY, drawing, handlers) {
-  const menu = document.createElement("div");
-  menu.style.cssText = "position:fixed;z-index:60;min-width:168px;padding:4px 0;background:#161b22;border:1px solid #30363d;border-radius:6px;box-shadow:0 8px 24px #01040988;";
-  menu.style.left = `${clientX}px`;
-  menu.style.top = `${clientY}px`;
-  const add = (label, fn, disabled = false) => {
-    if (!fn) return;
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.textContent = label;
-    btn.disabled = disabled;
-    btn.style.cssText = "display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:transparent;color:#e6edf3;font-size:12px;cursor:pointer;";
-    if (disabled) btn.style.opacity = "0.45";
-    btn.onclick = () => {
-      fn();
-      close();
+// src/layer/types.ts
+var LAYER_PRESET_VERSION = 2;
+
+// src/layer/overlay-mount.ts
+var OVERLAY_LAYER_TYPES = [
+  "overlay.crosshairLegend",
+  "overlay.drawing"
+];
+function isOverlayLayerType(type) {
+  return OVERLAY_LAYER_TYPES.includes(type);
+}
+function syncOverlayLayersToMain(layers, pageId) {
+  const main = layers.find((l) => l.type === "chart.main" && l.pageId === pageId);
+  if (!main) return;
+  const legend = layers.find(
+    (l) => l.type === "overlay.crosshairLegend" && l.pageId === pageId
+  );
+  if (legend) {
+    legend.frame = {
+      x: main.frame.x,
+      y: main.frame.y,
+      w: Math.min(0.35, main.frame.w),
+      h: Math.min(0.1, main.frame.h)
     };
-    menu.appendChild(btn);
-  };
+  }
+  const drawing = layers.find((l) => l.type === "overlay.drawing" && l.pageId === pageId);
   if (drawing) {
-    const locked = Boolean(drawing.meta?.locked);
-    add(t7("drawing.ctx.delete", "\u522A\u9664"), handlers.onDelete);
-    add(t7("drawing.ctx.copy", "\u8907\u88FD"), handlers.onCopy);
-    add(
-      locked ? t7("drawing.ctx.unlock", "\u89E3\u9396") : t7("drawing.ctx.lock", "\u9396\u5B9A"),
-      handlers.onToggleLock
-    );
-    if (drawing.type === "text") {
-      add(t7("drawing.ctx.editText", "\u7DE8\u8F2F\u6587\u5B57"), handlers.onEditText);
+    drawing.frame = {
+      x: main.frame.x,
+      y: main.frame.y,
+      w: main.frame.w,
+      h: main.frame.h
+    };
+    if (drawing.zIndex <= main.zIndex) {
+      drawing.zIndex = main.zIndex + 2;
     }
-    add(t7("drawing.ctx.deselect", "\u53D6\u6D88\u9078\u53D6"), handlers.onDeselect);
   }
-  document.body.appendChild(menu);
-  const close = () => {
-    menu.remove();
-    document.removeEventListener("click", close);
-  };
-  setTimeout(() => document.addEventListener("click", close), 0);
-  return close;
+}
+function syncAllOverlayLayersToMain(layers) {
+  const pageIds = [...new Set(layers.map((l) => l.pageId))];
+  for (const pageId of pageIds) {
+    syncOverlayLayersToMain(layers, pageId);
+  }
+}
+function getDrawingOverlayVisible(controller) {
+  const drawing = controller.getLayersForActivePage().find((l) => l.type === "overlay.drawing");
+  return drawing?.visible ?? true;
+}
+function ensureOverlayLayers(layers, pageId) {
+  const main = layers.find((l) => l.type === "chart.main" && l.pageId === pageId);
+  if (!main) return layers;
+  const out = [...layers];
+  if (!out.some((l) => l.type === "overlay.crosshairLegend" && l.pageId === pageId)) {
+    out.push({
+      id: `layer-crosshairLegend-${pageId}`,
+      pageId,
+      type: "overlay.crosshairLegend",
+      widgetKey: "crosshairLegend",
+      frame: { x: main.frame.x, y: main.frame.y, w: 0.2, h: 0.08 },
+      zIndex: main.zIndex + 5,
+      visible: true,
+      locked: false
+    });
+  }
+  if (!out.some((l) => l.type === "overlay.drawing" && l.pageId === pageId)) {
+    out.push({
+      id: `layer-drawingOverlay-${pageId}`,
+      pageId,
+      type: "overlay.drawing",
+      widgetKey: "drawingOverlay",
+      frame: { ...main.frame },
+      zIndex: main.zIndex + 3,
+      visible: true,
+      locked: false
+    });
+  }
+  syncOverlayLayersToMain(out, pageId);
+  return out;
 }
 
-// src/code-snippet-panel.ts
-function mountCodeSnippetPanel(parent, getCode) {
-  const wrap = document.createElement("details");
-  wrap.style.cssText = "flex-shrink:0;border-top:1px solid #30363d;background:#161b22;padding:6px 12px;font-size:11px;color:#8b949e;";
-  const summary = document.createElement("summary");
-  summary.textContent = "\u5D4C\u5165\u7A0B\u5F0F\u78BC\uFF08\u6574\u5408\u65B9\uFF09";
-  summary.style.cssText = "cursor:pointer;color:#58a6ff;user-select:none;";
-  const pre = document.createElement("pre");
-  pre.style.cssText = "margin:8px 0 0;padding:10px;background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#e6edf3;font-size:11px;overflow:auto;max-height:160px;white-space:pre-wrap;";
-  const copyBtn = document.createElement("button");
-  copyBtn.type = "button";
-  copyBtn.textContent = "\u8907\u88FD";
-  copyBtn.style.cssText = "margin-top:6px;padding:4px 10px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:11px;";
-  copyBtn.onclick = () => {
-    const code = getCode();
-    pre.textContent = code;
-    void navigator.clipboard.writeText(code);
+// src/layer/chart-pane-mount.ts
+var CHART_PANE_LAYER_TYPES = [
+  "chart.main",
+  "chart.volume",
+  "chart.indicator",
+  "chart.host",
+  "chart.indicatorHost"
+];
+var DEFAULT_SYNC_TIME_SCALE_GROUP = "chart-timescale";
+function isChartPaneLayerType(type) {
+  return CHART_PANE_LAYER_TYPES.includes(type);
+}
+function widgetKeyForChartPaneType(type) {
+  switch (type) {
+    case "chart.main":
+      return "chartMain";
+    case "chart.volume":
+      return "chartVolume";
+    case "chart.indicator":
+    case "chart.indicatorHost":
+      return "chartIndicator";
+    case "chart.host":
+      return "chartMain";
+    default:
+      return null;
+  }
+}
+function paneIdFromWidgetKey(widgetKey) {
+  switch (widgetKey) {
+    case "chartMain":
+    case "chartHost":
+      return "main";
+    case "chartVolume":
+      return "volume";
+    case "chartIndicator":
+    case "indicatorHost":
+      return "indicator";
+    default:
+      return null;
+  }
+}
+function expandLegacyChartHostLayers(layers) {
+  return splitLegacyChartHost(layers).layers;
+}
+function splitLegacyChartHost(layers) {
+  const host = layers.find((l) => l.type === "chart.host");
+  if (!host || layers.some((l) => l.type === "chart.main")) {
+    return { layers, idRemap: /* @__PURE__ */ new Map() };
+  }
+  const mainRatio = 0.65;
+  const main = {
+    ...host,
+    id: `${host.id}-main`,
+    type: "chart.main",
+    widgetKey: "chartMain",
+    frame: {
+      x: host.frame.x,
+      y: host.frame.y,
+      w: host.frame.w,
+      h: host.frame.h * mainRatio
+    },
+    syncTimeScaleGroupId: host.syncTimeScaleGroupId
   };
-  wrap.ontoggle = () => {
-    if (wrap.open) pre.textContent = getCode();
+  const volume = {
+    ...host,
+    id: `${host.id}-volume`,
+    type: "chart.volume",
+    widgetKey: "chartVolume",
+    frame: {
+      x: host.frame.x,
+      y: host.frame.y + host.frame.h * mainRatio,
+      w: host.frame.w,
+      h: host.frame.h * (1 - mainRatio)
+    },
+    zIndex: host.zIndex + 1,
+    syncTimeScaleGroupId: host.syncTimeScaleGroupId
   };
-  wrap.append(summary, pre, copyBtn);
-  parent.appendChild(wrap);
-  return wrap;
+  const rest = layers.filter((l) => l.id !== host.id);
+  const idRemap = /* @__PURE__ */ new Map([[host.id, [main.id, volume.id]]]);
+  return { layers: [...rest, main, volume], idRemap };
+}
+function syncCrosshairLegendToMain(layers) {
+  syncAllOverlayLayersToMain(layers);
+}
+function upgradeIndicatorHostType(layers) {
+  return layers.map((l) => {
+    if (l.type !== "chart.indicatorHost") return l;
+    return {
+      ...l,
+      type: "chart.indicator",
+      widgetKey: l.widgetKey === "indicatorHost" ? "chartIndicator" : l.widgetKey,
+      syncTimeScaleGroupId: l.syncTimeScaleGroupId
+    };
+  });
 }
 
-// src/pine-editor-panel.ts
-import { compilePineLite } from "@coderyo/pine-lite";
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+// src/layer/normalize.ts
+var SHELL_TYPES = [
+  "shell.topBar",
+  "shell.leftToolbar",
+  "shell.bottomToolbar",
+  "shell.statusBar",
+  "shell.propertiesPanel"
+];
+var CHART_TYPES = [
+  "chart.host",
+  "chart.main",
+  "chart.volume",
+  "chart.indicator",
+  "chart.indicatorHost"
+];
+var OVERLAY_TYPES = ["overlay.crosshairLegend", "overlay.drawing"];
+function isLayerType(t12) {
+  return SHELL_TYPES.includes(t12) || CHART_TYPES.includes(t12) || OVERLAY_TYPES.includes(t12) || t12 === "group";
+}
+function clamp01(n) {
+  if (!Number.isFinite(n)) return 0;
+  return Math.min(1, Math.max(0, n));
+}
+function clampFrame(frame) {
+  const w = Math.min(1, Math.max(0.02, clamp01(frame.w)));
+  const h = Math.min(1, Math.max(0.02, clamp01(frame.h)));
+  const x = clamp01(frame.x);
+  const y = clamp01(frame.y);
+  return {
+    x: Math.min(x, 1 - w),
+    y: Math.min(y, 1 - h),
+    w,
+    h
+  };
+}
+function normalizeLayoutPreset(input) {
+  const pages = input.pages?.length > 0 ? input.pages.map((p) => ({
+    id: String(p.id || "page-1"),
+    title: String(p.title || "Page 1")
+  })) : [{ id: "page-1", title: "\u5716\u8868" }];
+  const pageIds = new Set(pages.map((p) => p.id));
+  const defaultPageId = pages[0].id;
+  const layers = [];
+  const seenLayer = /* @__PURE__ */ new Set();
+  for (const raw of input.layers ?? []) {
+    if (!raw?.id || seenLayer.has(raw.id)) continue;
+    if (!isLayerType(raw.type)) continue;
+    seenLayer.add(raw.id);
+    const pageId = pageIds.has(raw.pageId) ? raw.pageId : defaultPageId;
+    layers.push({
+      id: raw.id,
+      pageId,
+      type: raw.type,
+      widgetKey: String(raw.widgetKey || raw.id),
+      frame: clampFrame(raw.frame ?? { x: 0, y: 0, w: 1, h: 1 }),
+      zIndex: Math.round(Number.isFinite(raw.zIndex) ? raw.zIndex : 0),
+      visible: raw.visible !== false,
+      locked: raw.locked === true,
+      groupId: raw.groupId,
+      syncTimeScaleGroupId: raw.syncTimeScaleGroupId
+    });
+  }
+  const { layers: splitLayers, idRemap } = splitLegacyChartHost(layers);
+  let migrated = upgradeIndicatorHostType(splitLayers);
+  for (const pageId of pageIds) {
+    migrated = ensureOverlayLayers(migrated, pageId);
+  }
+  syncAllOverlayLayersToMain(migrated);
+  migrated.sort((a, b) => a.zIndex - b.zIndex);
+  migrated.forEach((l, i) => {
+    l.zIndex = i;
+  });
+  const migratedIds = new Set(migrated.map((l) => l.id));
+  const groups = [];
+  const seenGroup = /* @__PURE__ */ new Set();
+  for (const g of input.groups ?? []) {
+    if (!g?.id || seenGroup.has(g.id)) continue;
+    seenGroup.add(g.id);
+    const layerIds = (g.layerIds ?? []).flatMap((id) => idRemap.get(id) ?? [id]).filter((id) => migratedIds.has(id));
+    if (layerIds.length === 0) continue;
+    groups.push({
+      id: g.id,
+      name: g.name,
+      layerIds
+    });
+  }
+  const revisionRaw = Number(input.revision);
+  const revision = Number.isFinite(revisionRaw) && revisionRaw >= 1 ? Math.floor(revisionRaw) : 1;
+  return {
+    version: LAYER_PRESET_VERSION,
+    revision,
+    id: String(input.id || "unnamed"),
+    name: String(input.name || input.id || "Untitled"),
+    author: input.author === "user" ? "user" : "integrator",
+    readonly: input.readonly === true,
+    forkedFrom: input.forkedFrom,
+    pages,
+    layers: migrated,
+    groups
+  };
+}
+function cloneLayoutPreset(preset) {
+  return normalizeLayoutPreset({
+    ...preset,
+    pages: preset.pages.map((p) => ({ ...p })),
+    layers: preset.layers.map((l) => ({ ...l, frame: { ...l.frame } })),
+    groups: preset.groups.map((g) => ({ ...g, layerIds: [...g.layerIds] }))
+  });
+}
+
+// src/layer/grid-to-preset.ts
+var WIDGET_META = {
+  topBar: { layerId: "layer-topBar", type: "shell.topBar", widgetKey: "topBar", z: 10 },
+  leftToolbar: { layerId: "layer-leftToolbar", type: "shell.leftToolbar", widgetKey: "leftToolbar", z: 20 },
+  indicatorHost: {
+    layerId: "layer-chartIndicator",
+    type: "chart.indicator",
+    widgetKey: "chartIndicator",
+    z: 45
+  },
+  statusBar: { layerId: "layer-statusBar", type: "shell.statusBar", widgetKey: "statusBar", z: 50 },
+  propertiesPanel: {
+    layerId: "layer-propertiesPanel",
+    type: "shell.propertiesPanel",
+    widgetKey: "propertiesPanel",
+    z: 60
+  },
+  bottomToolbar: { layerId: "layer-bottomToolbar", type: "shell.bottomToolbar", widgetKey: "bottomToolbar", z: 70 }
+};
+var MAIN_VOLUME_RATIO = 0.65;
+function chartHostLayers(w, columns, rows, pageId) {
+  const frame = {
+    x: w.col / columns,
+    y: w.row / rows,
+    w: w.colSpan / columns,
+    h: w.rowSpan / rows
+  };
+  const mainH = frame.h * MAIN_VOLUME_RATIO;
+  return [
+    {
+      id: "layer-chartMain",
+      pageId,
+      type: "chart.main",
+      widgetKey: "chartMain",
+      frame: { x: frame.x, y: frame.y, w: frame.w, h: mainH },
+      zIndex: 30,
+      visible: true,
+      locked: false
+    },
+    {
+      id: "layer-chartVolume",
+      pageId,
+      type: "chart.volume",
+      widgetKey: "chartVolume",
+      frame: { x: frame.x, y: frame.y + mainH, w: frame.w, h: frame.h - mainH },
+      zIndex: 35,
+      visible: true,
+      locked: false
+    }
+  ];
+}
+function layoutSchemaToPreset(schema = DEFAULT_LAYOUT_SCHEMA, opts = {}) {
+  const columns = schema.columns || 12;
+  const rows = schema.rows || 12;
+  const pageId = "page-1";
+  const layers = [];
+  for (const w of schema.widgets) {
+    if (w.id === "chartHost") {
+      layers.push(...chartHostLayers(w, columns, rows, pageId));
+      continue;
+    }
+    const meta = WIDGET_META[w.id];
+    if (!meta) continue;
+    layers.push({
+      id: meta.layerId,
+      pageId,
+      type: meta.type,
+      widgetKey: meta.widgetKey,
+      frame: {
+        x: w.col / columns,
+        y: w.row / rows,
+        w: w.colSpan / columns,
+        h: w.rowSpan / rows
+      },
+      zIndex: meta.z,
+      visible: true,
+      locked: false
+    });
+  }
+  const chartMain = layers.find((l) => l.widgetKey === "chartMain");
+  if (chartMain) {
+    layers.push({
+      id: "layer-crosshairLegend",
+      pageId,
+      type: "overlay.crosshairLegend",
+      widgetKey: "crosshairLegend",
+      frame: {
+        x: chartMain.frame.x,
+        y: chartMain.frame.y,
+        w: Math.min(0.35, chartMain.frame.w),
+        h: Math.min(0.1, chartMain.frame.h)
+      },
+      zIndex: chartMain.zIndex + 5,
+      visible: true,
+      locked: false
+    });
+    layers.push({
+      id: "layer-drawingOverlay",
+      pageId,
+      type: "overlay.drawing",
+      widgetKey: "drawingOverlay",
+      frame: { ...chartMain.frame },
+      zIndex: chartMain.zIndex + 3,
+      visible: true,
+      locked: false
+    });
+  }
+  return normalizeLayoutPreset({
+    version: LAYER_PRESET_VERSION,
+    id: opts.id ?? "vendor-default",
+    name: opts.name ?? "TradView \u9810\u8A2D",
+    author: "integrator",
+    readonly: false,
+    pages: [{ id: pageId, title: "\u5716\u8868" }],
+    layers,
+    groups: []
+  });
+}
+
+// src/layer/default-presets.ts
+var VENDOR_DEFAULT_PRESET = layoutSchemaToPreset(void 0, {
+  id: "vendor-default",
+  name: "TradView \u9810\u8A2D"
+});
+var VENDOR_COMPACT_PRESET = normalizeLayoutPreset({
+  ...layoutSchemaToPreset(void 0, { id: "vendor-compact", name: "\u7CBE\u7C21\u5716\u8868" }),
+  layers: layoutSchemaToPreset(void 0).layers.map((l) => {
+    if (l.widgetKey === "propertiesPanel") {
+      return { ...l, visible: false, frame: { ...l.frame, w: 1e-3, h: 1e-3 } };
+    }
+    if (l.widgetKey === "leftToolbar") {
+      return { ...l, frame: { x: 0, y: 0.06, w: 0.04, h: 0.88 } };
+    }
+    if (l.widgetKey === "chartMain") {
+      return { ...l, frame: { x: 0.04, y: 0.06, w: 0.96, h: 0.4 } };
+    }
+    if (l.widgetKey === "chartVolume") {
+      return { ...l, frame: { x: 0.04, y: 0.46, w: 0.96, h: 0.16 } };
+    }
+    if (l.widgetKey === "chartIndicator") {
+      return { ...l, frame: { x: 0.04, y: 0.68, w: 0.96, h: 0.22 } };
+    }
+    return l;
+  })
+});
+var VENDOR_DUAL_SYNC_PRESET = normalizeLayoutPreset({
+  ...layoutSchemaToPreset(void 0, { id: "vendor-dual-sync", name: "\u96D9\u6642\u9593\u8EF8\u5206\u7D44" }),
+  layers: layoutSchemaToPreset(void 0).layers.map((l) => {
+    if (l.type === "chart.main" || l.type === "chart.volume") {
+      return { ...l, syncTimeScaleGroupId: "prices" };
+    }
+    if (l.type === "chart.indicator") {
+      return { ...l, syncTimeScaleGroupId: "osc" };
+    }
+    return l;
+  })
+});
+var BUILTIN_PRESETS = [
+  VENDOR_DEFAULT_PRESET,
+  VENDOR_COMPACT_PRESET,
+  VENDOR_DUAL_SYNC_PRESET
+];
+function getBuiltinPreset(id) {
+  return BUILTIN_PRESETS.find((p) => p.id === id);
+}
+
+// src/layer/preset-store.ts
+var INDEX_KEY = "tradview:preset:v2:index";
+function presetStorageKey(id) {
+  return `tradview:preset:v2:${id}`;
+}
+function readIndex() {
+  try {
+    const raw = localStorage.getItem(INDEX_KEY);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? arr.filter((id) => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function writeIndex(ids) {
+  try {
+    localStorage.setItem(INDEX_KEY, JSON.stringify([...new Set(ids)]));
+  } catch {
+  }
+}
+function listPresets() {
+  const out = BUILTIN_PRESETS.map((p) => ({
+    id: p.id,
+    name: p.name,
+    author: p.author,
+    readonly: p.readonly,
+    builtin: true
+  }));
+  for (const id of readIndex()) {
+    if (BUILTIN_PRESETS.some((p) => p.id === id)) continue;
+    const loaded = loadPreset(id);
+    if (loaded) {
+      out.push({
+        id: loaded.id,
+        name: loaded.name,
+        author: loaded.author,
+        readonly: loaded.readonly,
+        builtin: false
+      });
+    }
+  }
+  return out;
+}
+function loadPreset(id) {
+  const builtin = getBuiltinPreset(id);
+  if (builtin) return cloneLayoutPreset(builtin);
+  try {
+    const raw = localStorage.getItem(presetStorageKey(id));
+    if (!raw) return null;
+    return normalizeLayoutPreset(JSON.parse(raw));
+  } catch {
+    return null;
+  }
+}
+function savePreset(preset) {
+  const normalized = normalizeLayoutPreset(preset);
+  if (getBuiltinPreset(normalized.id)) {
+    throw new Error(`Cannot overwrite builtin preset: ${normalized.id}`);
+  }
+  try {
+    localStorage.setItem(presetStorageKey(normalized.id), JSON.stringify(normalized));
+    const ids = readIndex();
+    if (!ids.includes(normalized.id)) {
+      writeIndex([...ids, normalized.id]);
+    }
+  } catch {
+  }
+}
+function deleteUserPreset(id) {
+  if (getBuiltinPreset(id)) return false;
+  try {
+    localStorage.removeItem(presetStorageKey(id));
+    writeIndex(readIndex().filter((x) => x !== id));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function forkPreset(sourceId, newId, newName) {
+  const src = loadPreset(sourceId);
+  if (!src) return null;
+  const forked = normalizeLayoutPreset({
+    ...cloneLayoutPreset(src),
+    id: newId,
+    name: newName,
+    author: "user",
+    readonly: false,
+    forkedFrom: sourceId
+  });
+  savePreset(forked);
+  return forked;
+}
+function resolvePreset(id) {
+  if (id && typeof id === "object") return normalizeLayoutPreset(id);
+  if (typeof id === "string") {
+    const loaded = loadPreset(id);
+    if (loaded) return loaded;
+  }
+  return cloneLayoutPreset(getBuiltinPreset("vendor-default"));
+}
+
+// src/layer/group-utils.ts
+function getLayersBoundingBox(layers) {
+  if (layers.length === 0) return null;
+  let minX = 1;
+  let minY = 1;
+  let maxX = 0;
+  let maxY = 0;
+  for (const l of layers) {
+    const f = l.frame;
+    minX = Math.min(minX, f.x);
+    minY = Math.min(minY, f.y);
+    maxX = Math.max(maxX, f.x + f.w);
+    maxY = Math.max(maxY, f.y + f.h);
+  }
+  const w = maxX - minX;
+  const h = maxY - minY;
+  if (w <= 0 || h <= 0) return null;
+  return { x: minX, y: minY, w, h };
+}
+function moveLayerFrames(frames, dx, dy) {
+  return frames.map(
+    (f) => clampFrame({
+      ...f,
+      x: f.x + dx,
+      y: f.y + dy
+    })
+  );
+}
+function resizeGroupFrames(members, oldBbox, newBbox) {
+  const ow = Math.max(oldBbox.w, 0.02);
+  const oh = Math.max(oldBbox.h, 0.02);
+  const nw = Math.max(newBbox.w, 0.02);
+  const nh = Math.max(newBbox.h, 0.02);
+  return members.map((m) => {
+    const f = m.frame;
+    const relX = (f.x - oldBbox.x) / ow;
+    const relY = (f.y - oldBbox.y) / oh;
+    const relW = f.w / ow;
+    const relH = f.h / oh;
+    return clampFrame({
+      x: newBbox.x + relX * nw,
+      y: newBbox.y + relY * nh,
+      w: relW * nw,
+      h: relH * nh
+    });
+  });
+}
+function clampBBox(frame) {
+  return clampFrame(frame);
+}
+
+// src/layer/layer-controller.ts
+var LayerController = class {
+  preset;
+  listeners = /* @__PURE__ */ new Set();
+  focusListeners = /* @__PURE__ */ new Set();
+  interactionDepth = 0;
+  pageIdSeq = 0;
+  activePageId;
+  /** P2: active chart pane layer (click-to-focus). */
+  focusedPaneLayerId = null;
+  /** Monotonic preset revision (Bridge `host.layer.setPreset`). */
+  presetRevision;
+  constructor(initial) {
+    this.preset = cloneLayoutPreset(initial);
+    this.presetRevision = this.preset.revision ?? 1;
+    this.activePageId = this.preset.pages[0]?.id ?? "page-1";
+  }
+  getPreset() {
+    return cloneLayoutPreset(this.preset);
+  }
+  /** True while pointer drag/resize/marquee is active — blocks setPreset. */
+  isInteracting() {
+    return this.interactionDepth > 0;
+  }
+  beginInteraction() {
+    this.interactionDepth++;
+  }
+  endInteraction() {
+    this.interactionDepth = Math.max(0, this.interactionDepth - 1);
+  }
+  setPreset(next) {
+    if (this.isInteracting()) return false;
+    this.preset = cloneLayoutPreset(next);
+    this.presetRevision = this.preset.revision ?? 1;
+    if (!this.preset.pages.some((p) => p.id === this.activePageId)) {
+      this.activePageId = this.preset.pages[0]?.id ?? "page-1";
+    }
+    this.emit();
+    return true;
+  }
+  getLayersForActivePage() {
+    return this.preset.layers.filter((l) => l.pageId === this.activePageId).sort((a, b) => a.zIndex - b.zIndex);
+  }
+  getFocusedPaneLayerId() {
+    return this.focusedPaneLayerId;
+  }
+  getFocusedPaneId() {
+    const layer = this.focusedPaneLayerId ? this.getLayer(this.focusedPaneLayerId) : void 0;
+    return layer ? paneIdFromWidgetKey(layer.widgetKey) : null;
+  }
+  /** Raise z-index among chart panes only; does not rebuild compositor DOM. */
+  focusChartPane(layerId) {
+    const layer = this.getLayer(layerId);
+    if (!layer || layer.pageId !== this.activePageId || !isChartPaneLayerType(layer.type)) {
+      return;
+    }
+    if (this.focusedPaneLayerId === layerId) return;
+    this.focusedPaneLayerId = layerId;
+    const chartLayers = this.getLayersForActivePage().filter(
+      (l) => isChartPaneLayerType(l.type)
+    );
+    const maxZ = Math.max(...chartLayers.map((l) => l.zIndex), layer.zIndex);
+    const FOCUS_Z_CAP = 500;
+    if (layer.zIndex < maxZ) layer.zIndex = Math.min(maxZ + 1, FOCUS_Z_CAP);
+    this.notifyFocus();
+  }
+  subscribeFocus(listener) {
+    this.focusListeners.add(listener);
+    return () => this.focusListeners.delete(listener);
+  }
+  notifyFocus() {
+    for (const fn of this.focusListeners) fn();
+  }
+  afterChartMainFrameChange(pageIds) {
+    const ids = pageIds ? [...new Set(pageIds)] : [...new Set(this.preset.layers.map((l) => l.pageId))];
+    for (const pageId of ids) {
+      syncOverlayLayersToMain(this.preset.layers, pageId);
+    }
+  }
+  setActivePage(pageId) {
+    if (!this.preset.pages.some((p) => p.id === pageId)) return false;
+    if (this.activePageId === pageId) return false;
+    this.activePageId = pageId;
+    this.focusedPaneLayerId = null;
+    this.emit();
+    this.notifyFocus();
+    return true;
+  }
+  addPage(title) {
+    const suffix = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${++this.pageIdSeq}`;
+    const id = `page-${suffix}`;
+    const pageTitle = title?.trim() || `Page ${this.preset.pages.length + 1}`;
+    this.preset.pages.push({ id, title: pageTitle });
+    const templatePageId = this.activePageId;
+    const templateLayers = this.preset.layers.filter((l) => l.pageId === templatePageId);
+    const maxZ = Math.max(-1, ...this.preset.layers.map((l) => l.zIndex));
+    let z = maxZ + 1;
+    for (const tpl of templateLayers) {
+      this.preset.layers.push({
+        ...tpl,
+        id: `${tpl.id}-${id}`,
+        pageId: id,
+        frame: { ...tpl.frame },
+        zIndex: z++,
+        groupId: void 0
+      });
+    }
+    this.activePageId = id;
+    this.focusedPaneLayerId = null;
+    this.emit();
+    return id;
+  }
+  renamePage(pageId, title) {
+    const page = this.preset.pages.find((p) => p.id === pageId);
+    if (!page) return false;
+    const trimmed = title.trim();
+    if (!trimmed) return false;
+    page.title = trimmed;
+    this.emit();
+    return true;
+  }
+  removePage(pageId) {
+    if (this.preset.pages.length <= 1) return false;
+    const idx = this.preset.pages.findIndex((p) => p.id === pageId);
+    if (idx < 0) return false;
+    this.preset.pages.splice(idx, 1);
+    this.preset.layers = this.preset.layers.filter((l) => l.pageId !== pageId);
+    for (const g of [...this.preset.groups]) {
+      g.layerIds = g.layerIds.filter((lid) => this.getLayer(lid)?.pageId !== pageId);
+      if (g.layerIds.length === 0) {
+        this.preset.groups = this.preset.groups.filter((x) => x.id !== g.id);
+      }
+    }
+    if (this.activePageId === pageId) {
+      const nextPage = this.preset.pages[idx] ?? this.preset.pages[idx - 1];
+      this.activePageId = nextPage?.id ?? this.preset.pages[0].id;
+      this.focusedPaneLayerId = null;
+    }
+    this.emit();
+    return true;
+  }
+  getLayer(layerId) {
+    return this.preset.layers.find((l) => l.id === layerId);
+  }
+  /**
+   * @public Set time-scale sync group for a chart pane layer (`''` clears → independent).
+   */
+  setLayerSyncGroup(layerId, groupId) {
+    const layer = this.getLayer(layerId);
+    if (!layer || !isChartPaneLayerType(layer.type)) return false;
+    const trimmed = groupId == null ? "" : String(groupId).trim();
+    layer.syncTimeScaleGroupId = trimmed.length > 0 ? trimmed : void 0;
+    this.emit();
+    return true;
+  }
+  getGroup(groupId) {
+    return this.preset.groups.find((g) => g.id === groupId);
+  }
+  /** Layer ids that move/resize together (group members or singleton). */
+  getTransformLayerIds(layerId) {
+    const layer = this.getLayer(layerId);
+    if (!layer?.groupId) return [layerId];
+    const group = this.getGroup(layer.groupId);
+    if (!group || group.layerIds.length === 0) return [layerId];
+    return group.layerIds.filter((id) => {
+      const l = this.getLayer(id);
+      return l && l.pageId === this.activePageId && !l.locked;
+    });
+  }
+  getGroupMemberLayers(groupId) {
+    const group = this.getGroup(groupId);
+    if (!group) return [];
+    return group.layerIds.map((id) => this.getLayer(id)).filter((l) => !!l && l.pageId === this.activePageId);
+  }
+  setLayerFrame(layerId, frame) {
+    const ids = this.getTransformLayerIds(layerId);
+    if (ids.length === 1) {
+      const layer = this.getLayer(layerId);
+      if (!layer) return;
+      layer.frame = clampFrame(frame);
+      if (layer.type === "overlay.drawing") {
+        const main = this.preset.layers.find(
+          (l) => l.type === "chart.main" && l.pageId === layer.pageId
+        );
+        if (main) main.frame = clampFrame(frame);
+      }
+      if (layer.type === "chart.main" || layer.type === "overlay.drawing") {
+        this.afterChartMainFrameChange([layer.pageId]);
+      }
+      this.emit();
+      return;
+    }
+    const members = ids.map((id) => this.getLayer(id)).filter(Boolean);
+    const oldBbox = getLayersBoundingBox(members);
+    if (!oldBbox) return;
+    const target = frame;
+    const newFrames = resizeGroupFrames(members, oldBbox, target);
+    members.forEach((m, i) => {
+      m.frame = newFrames[i];
+    });
+    if (members.some((m) => m.type === "chart.main" || m.type === "overlay.drawing")) {
+      this.afterChartMainFrameChange(members.map((m) => m.pageId));
+    }
+    this.emit();
+  }
+  expandTransformIds(layerIds) {
+    const expanded = /* @__PURE__ */ new Set();
+    for (const id of layerIds) {
+      for (const tid of this.getTransformLayerIds(id)) expanded.add(tid);
+    }
+    return [...expanded];
+  }
+  moveLayers(layerIds, dx, dy) {
+    const unique = this.expandTransformIds(layerIds);
+    const layers = unique.map((id) => this.getLayer(id)).filter(Boolean);
+    if (layers.length === 0) return;
+    const frames = moveLayerFrames(
+      layers.map((l) => l.frame),
+      dx,
+      dy
+    );
+    layers.forEach((l, i) => {
+      l.frame = frames[i];
+    });
+    if (layers.some((l) => l.type === "chart.main" || l.type === "overlay.drawing")) {
+      this.afterChartMainFrameChange(layers.map((l) => l.pageId));
+    }
+    this.emit();
+  }
+  resizeLayersFromBbox(layerIds, newBbox) {
+    const unique = this.expandTransformIds(layerIds);
+    const members = unique.map((id) => this.getLayer(id)).filter((l) => !!l);
+    if (members.length === 0) return;
+    if (members.length === 1) {
+      members[0].frame = clampFrame(newBbox);
+      if (members[0].type === "chart.main" || members[0].type === "overlay.drawing") {
+        this.afterChartMainFrameChange([members[0].pageId]);
+      }
+      this.emit();
+      return;
+    }
+    const oldBbox = getLayersBoundingBox(members);
+    if (!oldBbox) return;
+    const newFrames = resizeGroupFrames(members, oldBbox, newBbox);
+    members.forEach((m, i) => {
+      m.frame = newFrames[i];
+    });
+    if (members.some((m) => m.type === "chart.main" || m.type === "overlay.drawing")) {
+      this.afterChartMainFrameChange(members.map((m) => m.pageId));
+    }
+    this.emit();
+  }
+  setLayerVisible(layerId, visible) {
+    const ids = this.syncGroupLayerIds(layerId);
+    for (const id of ids) {
+      const layer = this.getLayer(id);
+      if (layer) layer.visible = visible;
+    }
+    this.emit();
+  }
+  setLayerLocked(layerId, locked) {
+    const ids = this.syncGroupLayerIds(layerId);
+    for (const id of ids) {
+      const layer = this.getLayer(id);
+      if (layer) layer.locked = locked;
+    }
+    this.emit();
+  }
+  syncGroupLayerIds(layerId) {
+    const layer = this.getLayer(layerId);
+    if (!layer?.groupId) return [layerId];
+    const group = this.getGroup(layer.groupId);
+    if (!group?.layerIds.length) return [layerId];
+    const onPage = group.layerIds.filter((id) => {
+      const l = this.getLayer(id);
+      return l && l.pageId === this.activePageId;
+    });
+    return onPage.length > 0 ? onPage : [layerId];
+  }
+  bumpZIndex(layerId, delta) {
+    const ordered = this.getLayersForActivePage();
+    const idx = ordered.findIndex((l) => l.id === layerId);
+    if (idx < 0) return;
+    const swap = idx + delta;
+    if (swap < 0 || swap >= ordered.length) return;
+    const a = ordered[idx];
+    const b = ordered[swap];
+    const tz = a.zIndex;
+    a.zIndex = b.zIndex;
+    b.zIndex = tz;
+    this.preset.layers.sort((x, y) => x.zIndex - y.zIndex);
+    this.preset.layers.forEach((l, i) => {
+      l.zIndex = i;
+    });
+    this.emit();
+  }
+  reorderLayers(orderedIds) {
+    const pageLayers = this.preset.layers.filter((l) => l.pageId === this.activePageId);
+    const byId = new Map(pageLayers.map((l) => [l.id, l]));
+    let z = 0;
+    for (const id of orderedIds) {
+      const layer = byId.get(id);
+      if (layer) layer.zIndex = z++;
+    }
+    for (const layer of pageLayers) {
+      if (!orderedIds.includes(layer.id)) layer.zIndex = z++;
+    }
+    this.preset.layers.sort((a, b) => a.zIndex - b.zIndex);
+    this.emit();
+  }
+  createBindGroup(layerIds, name) {
+    const unique = [...new Set(layerIds)].filter((id) => {
+      const l = this.getLayer(id);
+      return l && l.pageId === this.activePageId;
+    });
+    if (unique.length < 2) return null;
+    for (const g of this.preset.groups) {
+      for (const id of unique) {
+        const idx = g.layerIds.indexOf(id);
+        if (idx >= 0) g.layerIds.splice(idx, 1);
+      }
+      if (g.layerIds.length === 0) {
+        this.preset.groups = this.preset.groups.filter((x) => x.id !== g.id);
+      }
+    }
+    for (const id of unique) {
+      const layer = this.getLayer(id);
+      if (layer) delete layer.groupId;
+    }
+    const groupId = `group-${Date.now()}`;
+    const group = { id: groupId, name, layerIds: unique };
+    this.preset.groups.push(group);
+    for (const id of unique) {
+      const layer = this.getLayer(id);
+      if (layer) layer.groupId = groupId;
+    }
+    this.emit();
+    return groupId;
+  }
+  dissolveGroup(groupId) {
+    const group = this.getGroup(groupId);
+    if (!group) return;
+    for (const id of group.layerIds) {
+      const layer = this.getLayer(id);
+      if (layer?.groupId === groupId) delete layer.groupId;
+    }
+    this.preset.groups = this.preset.groups.filter((g) => g.id !== groupId);
+    this.emit();
+  }
+  removeLayerFromGroup(layerId) {
+    const layer = this.getLayer(layerId);
+    if (!layer?.groupId) return;
+    const groupId = layer.groupId;
+    delete layer.groupId;
+    const group = this.getGroup(groupId);
+    if (!group) return;
+    group.layerIds = group.layerIds.filter((id) => id !== layerId);
+    if (group.layerIds.length === 0) {
+      this.preset.groups = this.preset.groups.filter((g) => g.id !== groupId);
+    }
+    this.emit();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  emit() {
+    for (const fn of this.listeners) fn();
+  }
+};
+
+// src/layer/layer-editor.ts
+var HANDLE_CURSORS = {
+  nw: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  se: "nwse-resize"
+};
+var EPS = 1e-6;
+function framesEqual(a, b, eps = EPS) {
+  return Math.abs(a.x - b.x) < eps && Math.abs(a.y - b.y) < eps && Math.abs(a.w - b.w) < eps && Math.abs(a.h - b.h) < eps;
+}
+function frameIntersects(a, b) {
+  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function setWrapContentPassthrough(wrap, passthrough) {
+  for (const child of wrap.children) {
+    if (child.classList.contains("tv-layer-handle")) continue;
+    child.style.pointerEvents = passthrough ? "none" : "";
+  }
+}
+function clearWrapContentPassthrough(wrap) {
+  for (const child of wrap.children) {
+    if (child.classList.contains("tv-layer-handle")) continue;
+    child.style.pointerEvents = "";
+  }
+}
+function attachLayerEditor(compositorRoot, opts) {
+  const { controller, onPresetChange, onMarqueeSelect } = opts;
+  let enabled = false;
+  let abort = null;
+  let captureEl = null;
+  let capturePointerId = null;
+  const releaseCapture = () => {
+    if (captureEl && capturePointerId !== null) {
+      try {
+        captureEl.releasePointerCapture(capturePointerId);
+      } catch {
+      }
+    }
+    if (capturePointerId !== null && controller.isInteracting()) {
+      controller.endInteraction();
+    }
+    captureEl = null;
+    capturePointerId = null;
+  };
+  const setCapture = (el, pointerId) => {
+    releaseCapture();
+    captureEl = el;
+    capturePointerId = pointerId;
+    controller.beginInteraction();
+    try {
+      el.setPointerCapture(pointerId);
+    } catch {
+      controller.endInteraction();
+      captureEl = null;
+      capturePointerId = null;
+    }
+  };
+  const normDelta = (dxPx, dyPx) => {
+    const w = compositorRoot.clientWidth || 1;
+    const h = compositorRoot.clientHeight || 1;
+    return { dx: dxPx / w, dy: dyPx / h };
+  };
+  const applyWrapStyle = (wrap, frame) => {
+    wrap.style.left = `${frame.x * 100}%`;
+    wrap.style.top = `${frame.y * 100}%`;
+    wrap.style.width = `${frame.w * 100}%`;
+    wrap.style.height = `${frame.h * 100}%`;
+  };
+  const decorateWrap = (wrap, layerId) => {
+    wrap.querySelectorAll(".tv-layer-handle").forEach((el) => el.remove());
+    const layer = controller.getLayer(layerId);
+    if (!layer || layer.locked) {
+      wrap.classList.remove("tv-layer-editable");
+      wrap.style.cursor = "";
+      wrap.style.outline = "";
+      clearWrapContentPassthrough(wrap);
+      return;
+    }
+    wrap.classList.add("tv-layer-editable");
+    wrap.style.cursor = "move";
+    setWrapContentPassthrough(wrap, true);
+    if (wrap.dataset.focused === "1") {
+      wrap.style.outline = "2px solid #58a6ff";
+      wrap.style.outlineOffset = "-2px";
+    } else {
+      wrap.style.outline = "1px dashed #58a6ff88";
+      wrap.style.outlineOffset = "";
+    }
+    const handles = ["nw", "ne", "sw", "se"];
+    for (const h of handles) {
+      const handle = document.createElement("div");
+      handle.className = `tv-layer-handle tv-layer-handle-${h}`;
+      handle.dataset.handle = h;
+      handle.style.cssText = [
+        "position:absolute",
+        "width:8px",
+        "height:8px",
+        "background:#58a6ff",
+        "border:1px solid #0d1117",
+        "border-radius:2px",
+        "z-index:2",
+        `cursor:${HANDLE_CURSORS[h]}`,
+        h.includes("n") ? "top:-4px" : "bottom:-4px",
+        h.includes("w") ? "left:-4px" : "right:-4px"
+      ].join(";");
+      wrap.appendChild(handle);
+    }
+  };
+  const commitChange = () => {
+    onPresetChange?.();
+  };
+  const computeResizeBbox = (startBbox, corner, dx, dy) => {
+    const newBbox = { ...startBbox };
+    if (corner.includes("e")) newBbox.w = startBbox.w + dx;
+    if (corner.includes("w")) {
+      newBbox.x = startBbox.x + dx;
+      newBbox.w = startBbox.w - dx;
+    }
+    if (corner.includes("s")) newBbox.h = startBbox.h + dy;
+    if (corner.includes("n")) {
+      newBbox.y = startBbox.y + dy;
+      newBbox.h = startBbox.h - dy;
+    }
+    return clampFrame(newBbox);
+  };
+  const bindMarquee = (signal) => {
+    compositorRoot.addEventListener(
+      "pointerdown",
+      (e) => {
+        if (!e.shiftKey) return;
+        if (e.target.closest(".tv-layer-wrap")) return;
+        e.preventDefault();
+        const rootRect = compositorRoot.getBoundingClientRect();
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const marquee = document.createElement("div");
+        marquee.className = "tv-layer-marquee";
+        marquee.style.cssText = "position:absolute;border:1px dashed #58a6ff;background:#58a6ff22;pointer-events:none;z-index:9999;";
+        compositorRoot.appendChild(marquee);
+        setCapture(compositorRoot, e.pointerId);
+        const updateMarquee = (cx, cy) => {
+          const x1 = Math.min(startX, cx) - rootRect.left;
+          const y1 = Math.min(startY, cy) - rootRect.top;
+          const x2 = Math.max(startX, cx) - rootRect.left;
+          const y2 = Math.max(startY, cy) - rootRect.top;
+          marquee.style.left = `${x1}px`;
+          marquee.style.top = `${y1}px`;
+          marquee.style.width = `${x2 - x1}px`;
+          marquee.style.height = `${y2 - y1}px`;
+        };
+        const onMove = (ev) => updateMarquee(ev.clientX, ev.clientY);
+        const onUp = (ev) => {
+          releaseCapture();
+          compositorRoot.removeEventListener("pointermove", onMove);
+          compositorRoot.removeEventListener("pointerup", onUp);
+          compositorRoot.removeEventListener("pointercancel", onUp);
+          const w = compositorRoot.clientWidth || 1;
+          const h = compositorRoot.clientHeight || 1;
+          const sel = clampFrame({
+            x: (Math.min(startX, ev.clientX) - rootRect.left) / w,
+            y: (Math.min(startY, ev.clientY) - rootRect.top) / h,
+            w: Math.abs(ev.clientX - startX) / w,
+            h: Math.abs(ev.clientY - startY) / h
+          });
+          marquee.remove();
+          if (sel.w < EPS && sel.h < EPS) return;
+          const hits = controller.getLayersForActivePage().filter((l) => frameIntersects(l.frame, sel)).map((l) => l.id);
+          if (hits.length > 0) onMarqueeSelect?.(hits);
+        };
+        updateMarquee(startX, startY);
+        compositorRoot.addEventListener("pointermove", onMove, { signal });
+        compositorRoot.addEventListener("pointerup", onUp, { signal });
+        compositorRoot.addEventListener("pointercancel", onUp, { signal });
+      },
+      { signal }
+    );
+  };
+  const bindWrap = (wrap, signal) => {
+    const layerId = wrap.dataset.layerId;
+    if (!layerId) return;
+    const layer = controller.getLayer(layerId);
+    if (!layer || layer.locked) return;
+    const transformIds = () => controller.getTransformLayerIds(layerId);
+    const onPointerDownMove = (e) => {
+      if (e.target.classList.contains("tv-layer-handle")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const ids = transformIds();
+      const members = ids.map((id) => controller.getLayer(id)).filter(Boolean);
+      const startFrames = members.map((m) => ({ ...m.frame }));
+      const startX = e.clientX;
+      const startY = e.clientY;
+      setCapture(wrap, e.pointerId);
+      wrap.classList.add("tv-layer-dragging");
+      const onMove = (ev) => {
+        const { dx, dy } = normDelta(ev.clientX - startX, ev.clientY - startY);
+        const moved = startFrames.map(
+          (f) => clampFrame({ ...f, x: f.x + dx, y: f.y + dy })
+        );
+        compositorRoot.querySelectorAll(".tv-layer-wrap").forEach((el) => {
+          const w = el;
+          const lid = w.dataset.layerId;
+          if (!lid || !ids.includes(lid)) return;
+          const idx = ids.indexOf(lid);
+          if (idx >= 0) applyWrapStyle(w, moved[idx]);
+        });
+      };
+      const onUp = (ev) => {
+        releaseCapture();
+        wrap.classList.remove("tv-layer-dragging");
+        wrap.removeEventListener("pointermove", onMove);
+        wrap.removeEventListener("pointerup", onUp);
+        wrap.removeEventListener("pointercancel", onUp);
+        const { dx, dy } = normDelta(ev.clientX - startX, ev.clientY - startY);
+        if (Math.abs(dx) > EPS || Math.abs(dy) > EPS) {
+          controller.moveLayers(ids, dx, dy);
+          commitChange();
+        }
+      };
+      wrap.addEventListener("pointermove", onMove, { signal });
+      wrap.addEventListener("pointerup", onUp, { signal });
+      wrap.addEventListener("pointercancel", onUp, { signal });
+    };
+    wrap.addEventListener("pointerdown", onPointerDownMove, { signal });
+    wrap.querySelectorAll(".tv-layer-handle").forEach((handleEl) => {
+      const handle = handleEl;
+      const corner = handle.dataset.handle;
+      handle.addEventListener(
+        "pointerdown",
+        (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const ids = transformIds();
+          const members = ids.map((id) => controller.getLayer(id)).filter(Boolean);
+          let startBbox;
+          if (members.length === 1) {
+            startBbox = { ...members[0].frame };
+          } else {
+            startBbox = getLayersBoundingBox(members);
+          }
+          if (!startBbox) return;
+          const startX = e.clientX;
+          const startY = e.clientY;
+          setCapture(handle, e.pointerId);
+          const onMove = (ev) => {
+            const { dx, dy } = normDelta(ev.clientX - startX, ev.clientY - startY);
+            const newBbox = computeResizeBbox(startBbox, corner, dx, dy);
+            if (ids.length === 1) {
+              applyWrapStyle(wrap, newBbox);
+            } else {
+              const resized = resizeGroupFrames(members, startBbox, newBbox);
+              compositorRoot.querySelectorAll(".tv-layer-wrap").forEach((el) => {
+                const w = el;
+                const lid = w.dataset.layerId;
+                if (!lid || !ids.includes(lid)) return;
+                const idx = ids.indexOf(lid);
+                if (idx >= 0) applyWrapStyle(w, resized[idx]);
+              });
+            }
+          };
+          const onUp = (ev) => {
+            releaseCapture();
+            handle.removeEventListener("pointermove", onMove);
+            handle.removeEventListener("pointerup", onUp);
+            handle.removeEventListener("pointercancel", onUp);
+            const { dx, dy } = normDelta(ev.clientX - startX, ev.clientY - startY);
+            const newBbox = computeResizeBbox(startBbox, corner, dx, dy);
+            if (!framesEqual(newBbox, startBbox) && (Math.abs(dx) > EPS || Math.abs(dy) > EPS)) {
+              controller.resizeLayersFromBbox(ids, newBbox);
+              commitChange();
+            }
+          };
+          handle.addEventListener("pointermove", onMove, { signal });
+          handle.addEventListener("pointerup", onUp, { signal });
+          handle.addEventListener("pointercancel", onUp, { signal });
+        },
+        { signal }
+      );
+    });
+  };
+  const cleanupEditChrome = () => {
+    compositorRoot.classList.remove("tv-layer-edit-mode");
+    compositorRoot.querySelectorAll(".tv-layer-marquee").forEach((el) => el.remove());
+    compositorRoot.querySelectorAll(".tv-layer-wrap").forEach((w) => {
+      const el = w;
+      el.classList.remove("tv-layer-editable", "tv-layer-dragging");
+      el.style.outline = "";
+      el.style.cursor = "";
+      el.querySelectorAll(".tv-layer-handle").forEach((h) => h.remove());
+      clearWrapContentPassthrough(el);
+    });
+    compositorRoot.style.zIndex = "";
+  };
+  const rebind = () => {
+    releaseCapture();
+    abort?.abort();
+    if (!enabled) {
+      cleanupEditChrome();
+      return;
+    }
+    compositorRoot.classList.add("tv-layer-edit-mode");
+    compositorRoot.style.zIndex = "80";
+    abort = new AbortController();
+    const { signal } = abort;
+    bindMarquee(signal);
+    compositorRoot.querySelectorAll(".tv-layer-wrap").forEach((w) => {
+      const wrap = w;
+      const layerId = wrap.dataset.layerId;
+      if (!layerId) return;
+      decorateWrap(wrap, layerId);
+      bindWrap(wrap, signal);
+    });
+  };
+  return {
+    setEnabled(next) {
+      enabled = next;
+      rebind();
+    },
+    isEnabled: () => enabled,
+    rebind,
+    destroy: () => {
+      enabled = false;
+      releaseCapture();
+      abort?.abort();
+      cleanupEditChrome();
+    }
+  };
+}
+
+// src/layer/compositor.ts
+function resolveWidgetEl(widgets, layer) {
+  const key = layer.widgetKey;
+  if (layer.type === "overlay.drawing") {
+    return widgets.drawingOverlay ?? widgets.chartMain ?? widgets.chartHost;
+  }
+  return widgets[key] ?? (layer.widgetKey === "chartMain" ? widgets.chartHost : void 0) ?? (layer.widgetKey === "chartIndicator" ? widgets.indicatorHost : void 0);
+}
+function applyWrapFrame(wrap, layer) {
+  wrap.style.left = `${layer.frame.x * 100}%`;
+  wrap.style.top = `${layer.frame.y * 100}%`;
+  wrap.style.width = `${layer.frame.w * 100}%`;
+  wrap.style.height = `${layer.frame.h * 100}%`;
+  wrap.style.zIndex = String(layer.zIndex + 1);
+}
+function layerStructureSignature(layers, activePageId) {
+  return `${activePageId}|${layers.map((l) => `${l.id}:${l.type}:${l.widgetKey}:${l.visible}:${l.locked}`).join("|")}`;
+}
+function wrapPointerEventsForLayer(layer, editorEnabled) {
+  if (layer.locked) return "none";
+  if (isOverlayLayerType(layer.type)) return "none";
+  if (isChartPaneLayerType(layer.type) && editorEnabled) return "none";
+  return "auto";
+}
+function mountLayerCompositor(parent, opts) {
+  const controller = new LayerController(opts.preset);
+  const wrappers = /* @__PURE__ */ new Map();
+  let lastStructureSig = "";
+  const root = document.createElement("div");
+  root.className = "tv-layer-compositor";
+  root.style.cssText = "position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5;";
+  parent.style.position = parent.style.position || "relative";
+  parent.appendChild(root);
+  const editor = attachLayerEditor(root, {
+    controller,
+    onPresetChange: () => opts.onPresetChange?.(controller.getPreset()),
+    onMarqueeSelect: opts.onMarqueeSelect
+  });
+  const applyFocusStyles = () => {
+    const focused = controller.focusedPaneLayerId;
+    for (const [id, wrap] of wrappers) {
+      const layer = controller.getLayer(id);
+      if (!layer || !isChartPaneLayerType(layer.type)) continue;
+      const active = id === focused;
+      wrap.dataset.focused = active ? "1" : "0";
+      wrap.style.outline = active ? "2px solid #58a6ff" : "none";
+      wrap.style.outlineOffset = active ? "-2px" : "";
+    }
+  };
+  const patchFocusVisuals = (layers) => {
+    for (const layer of layers) {
+      const wrap = wrappers.get(layer.id);
+      if (wrap) applyWrapFrame(wrap, layer);
+    }
+    applyFocusStyles();
+  };
+  const patchLayoutFrames = (layers, patchOpts = {}) => {
+    patchFocusVisuals(layers);
+    if (patchOpts.rebind !== false) editor.rebind();
+  };
+  const ensureDefaultChartFocus = (chartPaneIds) => {
+    if (controller.focusedPaneLayerId && !chartPaneIds.includes(controller.focusedPaneLayerId)) {
+      controller.focusedPaneLayerId = chartPaneIds[chartPaneIds.length - 1] ?? null;
+    }
+    if (!controller.focusedPaneLayerId && chartPaneIds.length > 0) {
+      controller.focusedPaneLayerId = chartPaneIds[chartPaneIds.length - 1];
+    }
+  };
+  const bindChartPanePointer = (wrap, layer) => {
+    wrap.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0 || controller.isInteracting()) return;
+      const prev = controller.focusedPaneLayerId;
+      if (prev === layer.id) return;
+      queueMicrotask(() => {
+        if (controller.isInteracting()) return;
+        controller.focusChartPane(layer.id);
+        opts.onChartPaneFocus?.(controller.getFocusedPaneId());
+      });
+    });
+  };
+  const syncRootPointerEvents = () => {
+    root.style.pointerEvents = editor.isEnabled() ? "auto" : "none";
+  };
+  const apply = () => {
+    syncRootPointerEvents();
+    const preset = controller.getPreset();
+    const layers = preset.layers.filter((l) => l.pageId === controller.activePageId && l.visible).sort((a, b) => a.zIndex - b.zIndex);
+    if (opts.hideLegacyGrid) opts.hideLegacyGrid.style.visibility = "hidden";
+    const chartPaneIds = layers.filter((l) => isChartPaneLayerType(l.type)).map((l) => l.id);
+    ensureDefaultChartFocus(chartPaneIds);
+    const structureSig = layerStructureSignature(layers, controller.activePageId);
+    if (structureSig === lastStructureSig && wrappers.size > 0) {
+      patchLayoutFrames(layers);
+      return;
+    }
+    lastStructureSig = structureSig;
+    root.replaceChildren();
+    wrappers.clear();
+    const editorOn = editor.isEnabled();
+    for (const layer of layers) {
+      if (layer.type === "overlay.drawing") continue;
+      const el = resolveWidgetEl(opts.widgets, layer);
+      if (!el) continue;
+      const wrap = document.createElement("div");
+      wrap.className = "tv-layer-wrap";
+      if (isChartPaneLayerType(layer.type)) wrap.classList.add("tv-chart-pane-wrap");
+      if (isOverlayLayerType(layer.type)) wrap.classList.add("tv-overlay-wrap");
+      wrap.dataset.layerId = layer.id;
+      wrap.dataset.widgetKey = layer.widgetKey;
+      wrap.dataset.layerType = layer.type;
+      if (layer.groupId) wrap.dataset.groupId = layer.groupId;
+      const pe = wrapPointerEventsForLayer(layer, editorOn);
+      wrap.style.cssText = [
+        "position:absolute",
+        "overflow:visible",
+        "box-sizing:border-box",
+        `pointer-events:${pe}`
+      ].join(";");
+      applyWrapFrame(wrap, layer);
+      if (isChartPaneLayerType(layer.type) && !layer.locked && !editorOn) {
+        bindChartPanePointer(wrap, layer);
+      }
+      if (layer.type === "overlay.crosshairLegend") {
+        el.style.pointerEvents = "none";
+      }
+      el.style.width = "100%";
+      el.style.height = "100%";
+      el.style.minWidth = "0";
+      el.style.minHeight = "0";
+      el.style.overflow = layer.type === "overlay.crosshairLegend" ? "visible" : "hidden";
+      wrap.appendChild(el);
+      root.appendChild(wrap);
+      wrappers.set(layer.id, wrap);
+    }
+    applyFocusStyles();
+    editor.rebind();
+  };
+  const unsubLayout = controller.subscribe(apply);
+  const unsubFocus = controller.subscribeFocus(() => {
+    const visible = controller.getLayersForActivePage().filter((l) => l.visible);
+    patchFocusVisuals(visible);
+  });
+  apply();
+  return {
+    root,
+    controller,
+    apply,
+    enableLayerEditor: (enabled) => {
+      editor.setEnabled(enabled);
+      syncRootPointerEvents();
+      apply();
+    },
+    isLayerEditorEnabled: () => editor.isEnabled(),
+    destroy: () => {
+      unsubLayout();
+      unsubFocus();
+      editor.destroy();
+      root.remove();
+      if (opts.hideLegacyGrid) opts.hideLegacyGrid.style.visibility = "";
+    }
+  };
+}
+
+// src/layer/layer-panel.ts
+import { t as t8 } from "@coderyo/i18n";
+function mountLayerPanel(parent, controller, opts = {}) {
+  const panel = document.createElement("aside");
+  panel.className = "tv-layer-panel";
+  panel.style.cssText = "display:none;position:fixed;right:12px;top:72px;width:240px;max-height:min(70vh,480px);z-index:2100;background:#161b22;border:1px solid #30363d;border-radius:8px;box-shadow:0 8px 24px #01040999;flex-direction:column;overflow:hidden;font-size:11px;color:#e6edf3;";
+  const header = document.createElement("div");
+  header.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #30363d;flex-shrink:0;";
+  const title = document.createElement("span");
+  title.textContent = t8("layer.panel.title", "\u5716\u5C64");
+  title.style.fontWeight = "600";
+  const closeBtn = document.createElement("button");
+  closeBtn.type = "button";
+  closeBtn.textContent = "\xD7";
+  closeBtn.style.cssText = "background:transparent;border:none;color:#8b949e;font-size:18px;cursor:pointer;line-height:1;";
+  header.append(title, closeBtn);
+  const groupBar = document.createElement("div");
+  groupBar.style.cssText = "display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid #30363d;flex-shrink:0;flex-wrap:wrap;";
+  const createGroupBtn = document.createElement("button");
+  createGroupBtn.type = "button";
+  createGroupBtn.textContent = t8("layer.panel.createGroup", "\u5EFA\u7ACB\u7FA4\u7D44");
+  createGroupBtn.style.cssText = "flex:1;min-width:0;padding:4px 6px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:10px;";
+  const removeFromGroupBtn = document.createElement("button");
+  removeFromGroupBtn.type = "button";
+  removeFromGroupBtn.textContent = t8("layer.panel.removeFromGroup", "\u79FB\u51FA\u7FA4\u7D44");
+  removeFromGroupBtn.style.cssText = createGroupBtn.style.cssText;
+  const ungroupBtn = document.createElement("button");
+  ungroupBtn.type = "button";
+  ungroupBtn.textContent = t8("layer.panel.ungroup", "\u89E3\u6563\u7FA4\u7D44");
+  ungroupBtn.style.cssText = createGroupBtn.style.cssText;
+  groupBar.append(createGroupBtn, removeFromGroupBtn, ungroupBtn);
+  const list = document.createElement("div");
+  list.style.cssText = "overflow:auto;flex:1;min-height:0;padding:6px 4px;";
+  const footer = document.createElement("div");
+  footer.style.cssText = "padding:8px;border-top:1px solid #30363d;flex-shrink:0;";
+  const saveBtn = document.createElement("button");
+  saveBtn.type = "button";
+  saveBtn.textContent = t8("layer.panel.saveAs", "\u53E6\u5B58\u70BA\u6211\u7684\u7BC4\u672C");
+  saveBtn.style.cssText = "width:100%;padding:6px 8px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:11px;";
+  footer.appendChild(saveBtn);
+  panel.append(header, groupBar, list, footer);
+  parent.appendChild(panel);
+  let open = false;
+  const selected = /* @__PURE__ */ new Set();
+  let dragLayerId = null;
+  const btnStyle = "width:24px;height:22px;padding:0;border:1px solid #30363d;border-radius:3px;background:#21262d;cursor:pointer;font-size:10px;";
+  const render = () => {
+    list.replaceChildren();
+    const layers = [...controller.getLayersForActivePage()].sort((a, b) => b.zIndex - a.zIndex);
+    for (const id of [...selected]) {
+      if (!layers.some((l) => l.id === id)) selected.delete(id);
+    }
+    createGroupBtn.disabled = selected.size < 2;
+    const selectedWithGroup = layers.filter((l) => selected.has(l.id) && l.groupId);
+    ungroupBtn.disabled = selectedWithGroup.length === 0;
+    const singleInGroup = selected.size === 1 && [...selected].some((id) => controller.getLayer(id)?.groupId);
+    removeFromGroupBtn.disabled = !singleInGroup;
+    for (const layer of layers) {
+      const row = document.createElement("div");
+      row.draggable = !layer.locked;
+      row.dataset.layerId = layer.id;
+      row.style.cssText = "display:flex;align-items:center;gap:4px;padding:4px 6px;margin-bottom:2px;border-radius:4px;background:#0d1117;border:1px solid #21262d;cursor:grab;";
+      row.ondragstart = (e) => {
+        if (layer.locked) return;
+        dragLayerId = layer.id;
+        e.dataTransfer?.setData("text/plain", layer.id);
+        if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+        row.style.opacity = "0.55";
+      };
+      row.ondragend = () => {
+        row.style.opacity = "";
+        dragLayerId = null;
+      };
+      row.ondragover = (e) => {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      };
+      row.ondrop = (e) => {
+        e.preventDefault();
+        if (!dragLayerId || dragLayerId === layer.id) return;
+        const visual = [...controller.getLayersForActivePage()].sort(
+          (a, b) => b.zIndex - a.zIndex
+        );
+        const ids = visual.map((l) => l.id);
+        const from = ids.indexOf(dragLayerId);
+        const to = ids.indexOf(layer.id);
+        if (from < 0 || to < 0) return;
+        ids.splice(from, 1);
+        ids.splice(to, 0, dragLayerId);
+        controller.reorderLayers([...ids].reverse());
+        dragLayerId = null;
+      };
+      const pick = document.createElement("input");
+      pick.type = "checkbox";
+      pick.checked = selected.has(layer.id);
+      pick.title = t8("layer.panel.select", "\u9078\u53D6");
+      pick.style.cssText = "width:14px;height:14px;cursor:pointer;flex-shrink:0;";
+      pick.onchange = () => {
+        if (pick.checked) selected.add(layer.id);
+        else selected.delete(layer.id);
+        render();
+      };
+      const eye = document.createElement("button");
+      eye.type = "button";
+      eye.textContent = layer.visible ? "\u{1F441}" : "\u2014";
+      eye.title = t8("layer.panel.visibility", "\u986F\u793A");
+      eye.style.cssText = btnStyle;
+      const lock = document.createElement("button");
+      lock.type = "button";
+      lock.textContent = layer.locked ? "\u{1F512}" : "\u{1F513}";
+      lock.title = t8("layer.panel.lock", "\u9396\u5B9A");
+      lock.style.cssText = btnStyle;
+      const label = document.createElement("span");
+      const groupTag = layer.groupId ? ` [${layer.groupId.slice(-4)}]` : "";
+      label.textContent = `${layer.widgetKey}${groupTag}`;
+      label.style.cssText = "flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+      let syncIn = null;
+      if (isChartPaneLayerType(layer.type)) {
+        syncIn = document.createElement("input");
+        syncIn.type = "text";
+        syncIn.placeholder = t8("layer.panel.syncGroup", "\u6642\u9593\u8EF8\u7D44");
+        syncIn.value = layer.syncTimeScaleGroupId ?? "";
+        syncIn.title = t8(
+          "layer.panel.syncGroupHint",
+          "\u76F8\u540C\u7D44\u540D\u540C\u6B65\u7E2E\u653E\uFF1B\u7559\u7A7A\u5247\u7368\u7ACB"
+        );
+        syncIn.style.cssText = "width:52px;flex-shrink:0;padding:2px 4px;font-size:10px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:3px;";
+        syncIn.onchange = () => {
+          controller.setLayerSyncGroup(layer.id, syncIn.value);
+        };
+      }
+      const zUp = document.createElement("button");
+      zUp.type = "button";
+      zUp.textContent = "\u25B2";
+      zUp.title = "z+";
+      zUp.style.cssText = btnStyle;
+      const zDown = document.createElement("button");
+      zDown.type = "button";
+      zDown.textContent = "\u25BC";
+      zDown.title = "z-";
+      zDown.style.cssText = btnStyle;
+      eye.onclick = () => controller.setLayerVisible(layer.id, !layer.visible);
+      lock.onclick = () => controller.setLayerLocked(layer.id, !layer.locked);
+      zUp.onclick = () => controller.bumpZIndex(layer.id, 1);
+      zDown.onclick = () => controller.bumpZIndex(layer.id, -1);
+      if (syncIn) row.append(pick, eye, lock, label, syncIn, zUp, zDown);
+      else row.append(pick, eye, lock, label, zUp, zDown);
+      list.appendChild(row);
+    }
+  };
+  createGroupBtn.onclick = () => {
+    const ids = [...selected];
+    if (ids.length < 2) return;
+    controller.createBindGroup(ids);
+    selected.clear();
+    render();
+  };
+  removeFromGroupBtn.onclick = () => {
+    const id = [...selected][0];
+    if (!id) return;
+    controller.removeLayerFromGroup(id);
+    render();
+  };
+  ungroupBtn.onclick = () => {
+    const groupIds = /* @__PURE__ */ new Set();
+    for (const id of selected) {
+      const layer = controller.getLayer(id);
+      if (layer?.groupId) groupIds.add(layer.groupId);
+    }
+    for (const gid of groupIds) controller.dissolveGroup(gid);
+    render();
+  };
+  const unsub = controller.subscribe(render);
+  render();
+  closeBtn.onclick = () => {
+    open = false;
+    panel.style.display = "none";
+  };
+  saveBtn.onclick = () => opts.onSaveAsPreset?.(controller.getPreset());
+  return {
+    el: panel,
+    destroy: () => {
+      unsub();
+      panel.remove();
+    },
+    toggle: () => {
+      open = !open;
+      panel.style.display = open ? "flex" : "none";
+      return open;
+    },
+    selectLayers(layerIds) {
+      selected.clear();
+      for (const id of layerIds) selected.add(id);
+      render();
+    }
+  };
+}
+
+// src/layer/page-navigator.ts
+import { t as t9 } from "@coderyo/i18n";
+function mountPageNavigator(parent, controller, opts = {}) {
+  const mq = opts.narrowMq ?? "(max-width: 768px)";
+  const nav = document.createElement("nav");
+  nav.className = "tv-page-navigator";
+  nav.style.cssText = "display:none;align-items:center;gap:4px;padding:4px 8px;border-top:1px solid #30363d;background:#161b22;flex-shrink:0;flex-wrap:wrap;font-size:11px;color:#e6edf3;";
+  const tabs = document.createElement("div");
+  tabs.style.cssText = "display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0;";
+  const actions = document.createElement("div");
+  actions.style.cssText = "display:flex;gap:4px;flex-shrink:0;";
+  const addBtn = document.createElement("button");
+  addBtn.type = "button";
+  addBtn.title = t9("page.nav.add", "\u65B0\u589E\u9801\u9762");
+  addBtn.textContent = "+";
+  addBtn.style.cssText = "width:28px;height:24px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:14px;line-height:1;";
+  const renameBtn = document.createElement("button");
+  renameBtn.type = "button";
+  renameBtn.title = t9("page.nav.rename", "\u91CD\u65B0\u547D\u540D");
+  renameBtn.textContent = "\u270E";
+  renameBtn.style.cssText = "width:28px;height:24px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:12px;";
+  const delBtn = document.createElement("button");
+  delBtn.type = "button";
+  delBtn.title = t9("page.nav.delete", "\u522A\u9664\u9801\u9762");
+  delBtn.textContent = "\xD7";
+  delBtn.style.cssText = renameBtn.style.cssText;
+  actions.append(addBtn, renameBtn, delBtn);
+  nav.append(tabs, actions);
+  parent.appendChild(nav);
+  const tabBtnStyle = "padding:4px 10px;background:#21262d;color:#8b949e;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:11px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+  const tabBtnActiveStyle = tabBtnStyle.replace("#21262d", "#388bfd").replace("#8b949e", "#fff");
+  const refresh = () => {
+    tabs.replaceChildren();
+    const preset = controller.getPreset();
+    for (const page of preset.pages) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.textContent = page.title;
+      btn.title = page.title;
+      btn.style.cssText = page.id === controller.activePageId ? tabBtnActiveStyle : tabBtnStyle;
+      btn.onclick = () => {
+        if (controller.setActivePage(page.id)) {
+          opts.onPageChange?.(page.id);
+        }
+      };
+      tabs.appendChild(btn);
+    }
+    delBtn.disabled = preset.pages.length <= 1;
+  };
+  addBtn.onclick = () => {
+    const title = window.prompt(t9("page.nav.addPrompt", "\u65B0\u9801\u9762\u540D\u7A31"), "");
+    const id = controller.addPage(title ?? void 0);
+    opts.onPageChange?.(id);
+  };
+  renameBtn.onclick = () => {
+    const page = controller.getPreset().pages.find((p) => p.id === controller.activePageId);
+    if (!page) return;
+    let title = window.prompt(t9("page.nav.renamePrompt", "\u9801\u9762\u540D\u7A31"), page.title);
+    if (title == null) return;
+    while (title !== null && !controller.renamePage(page.id, title)) {
+      title = window.prompt(
+        t9("page.nav.renameEmpty", "\u540D\u7A31\u4E0D\u53EF\u70BA\u7A7A\uFF0C\u8ACB\u91CD\u65B0\u8F38\u5165"),
+        title
+      );
+      if (title == null) return;
+    }
+  };
+  delBtn.onclick = () => {
+    const page = controller.getPreset().pages.find((p) => p.id === controller.activePageId);
+    if (!page || controller.getPreset().pages.length <= 1) return;
+    if (!window.confirm(t9("page.nav.deleteConfirm", `\u522A\u9664\u300C${page.title}\u300D\uFF1F`))) return;
+    controller.removePage(page.id);
+    opts.onPageChange?.(controller.activePageId);
+  };
+  const media = window.matchMedia(mq);
+  const syncVisible = () => {
+    nav.style.display = opts.alwaysVisible || media.matches ? "flex" : "none";
+  };
+  media.addEventListener("change", syncVisible);
+  syncVisible();
+  const unsub = controller.subscribe(refresh);
+  refresh();
+  return {
+    el: nav,
+    destroy: () => {
+      unsub();
+      media.removeEventListener("change", syncVisible);
+      nav.remove();
+    },
+    refresh
+  };
+}
+
+// src/layer/bind-layer-time-scale-sync.ts
+function bindLayerTimeScaleSync(chart, controller, options) {
+  const apply = () => {
+    chart.applyTimeScaleSyncFromLayers(
+      controller.getPreset().layers,
+      controller.activePageId
+    );
+    options?.onSync?.();
+  };
+  apply();
+  return controller.subscribe(apply);
+}
+
+// src/layer/merge-preset.ts
+function upsertById(current, incoming) {
+  if (!incoming?.length) return current.map((x) => ({ ...x }));
+  const map = new Map(current.map((x) => [x.id, { ...x }]));
+  for (const item of incoming) {
+    if (!item?.id) continue;
+    map.set(item.id, { ...item });
+  }
+  return [...map.values()];
+}
+function mergePages(current, incoming) {
+  return upsertById(current, incoming);
+}
+function mergeLayers(current, incoming) {
+  if (!incoming?.length) return current.map((l) => ({ ...l, frame: { ...l.frame } }));
+  const map = new Map(current.map((l) => [l.id, { ...l, frame: { ...l.frame } }]));
+  for (const raw of incoming) {
+    if (!raw?.id) continue;
+    const prev = map.get(raw.id);
+    map.set(raw.id, {
+      ...prev ?? raw,
+      ...raw,
+      frame: { ...prev?.frame ?? raw.frame ?? { x: 0, y: 0, w: 1, h: 1 } }
+    });
+  }
+  return [...map.values()];
+}
+function mergeGroups(current, incoming) {
+  if (!incoming?.length) {
+    return current.map((g) => ({ ...g, layerIds: [...g.layerIds] }));
+  }
+  const map = new Map(current.map((g) => [g.id, { ...g, layerIds: [...g.layerIds] }]));
+  for (const raw of incoming) {
+    if (!raw?.id) continue;
+    map.set(raw.id, {
+      id: raw.id,
+      name: raw.name ?? map.get(raw.id)?.name,
+      layerIds: [...raw.layerIds ?? map.get(raw.id)?.layerIds ?? []]
+    });
+  }
+  return [...map.values()];
+}
+function mergeLayoutPreset(current, partial) {
+  return normalizeLayoutPreset({
+    ...current,
+    ...partial,
+    version: LAYER_PRESET_VERSION,
+    pages: mergePages(current.pages, partial.pages),
+    layers: mergeLayers(current.layers, partial.layers),
+    groups: mergeGroups(current.groups, partial.groups)
+  });
+}
+
+// src/layer/resolve-pane-layers.ts
+import {
+  isValidLayerBridgePane,
+  resolvePaneLayerIds as resolvePaneLayerIdsCore
+} from "@coderyo/core";
+var PANE_TO_LAYER_TYPE = {
+  main: "chart.main",
+  volume: "chart.volume",
+  indicator: "chart.indicator"
+};
+function layerTypeForBridgePane(pane) {
+  return PANE_TO_LAYER_TYPE[pane];
+}
+function resolvePaneLayerIds(preset, pane, opts) {
+  return resolvePaneLayerIdsCore(preset, pane, opts);
+}
+
+// src/drawing-context-menu.ts
+import { t as t10 } from "@coderyo/i18n";
+function openDrawingContextMenu(clientX, clientY, drawing, handlers) {
+  const menu = document.createElement("div");
+  menu.style.cssText = "position:fixed;z-index:60;min-width:168px;padding:4px 0;background:#161b22;border:1px solid #30363d;border-radius:6px;box-shadow:0 8px 24px #01040988;";
+  menu.style.left = `${clientX}px`;
+  menu.style.top = `${clientY}px`;
+  const add = (label, fn, disabled = false) => {
+    if (!fn) return;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = label;
+    btn.disabled = disabled;
+    btn.style.cssText = "display:block;width:100%;text-align:left;padding:8px 12px;border:none;background:transparent;color:#e6edf3;font-size:12px;cursor:pointer;";
+    if (disabled) btn.style.opacity = "0.45";
+    btn.onclick = () => {
+      fn();
+      close();
+    };
+    menu.appendChild(btn);
+  };
+  if (drawing) {
+    const locked = Boolean(drawing.meta?.locked);
+    add(t10("drawing.ctx.delete", "\u522A\u9664"), handlers.onDelete);
+    add(t10("drawing.ctx.copy", "\u8907\u88FD"), handlers.onCopy);
+    add(
+      locked ? t10("drawing.ctx.unlock", "\u89E3\u9396") : t10("drawing.ctx.lock", "\u9396\u5B9A"),
+      handlers.onToggleLock
+    );
+    if (drawing.type === "text") {
+      add(t10("drawing.ctx.editText", "\u7DE8\u8F2F\u6587\u5B57"), handlers.onEditText);
+    }
+    add(t10("drawing.ctx.deselect", "\u53D6\u6D88\u9078\u53D6"), handlers.onDeselect);
+  }
+  document.body.appendChild(menu);
+  const close = () => {
+    menu.remove();
+    document.removeEventListener("click", close);
+  };
+  setTimeout(() => document.addEventListener("click", close), 0);
+  return close;
+}
+
+// src/code-snippet-panel.ts
+function mountCodeSnippetPanel(parent, getCode) {
+  const wrap = document.createElement("details");
+  wrap.style.cssText = "flex-shrink:0;border-top:1px solid #30363d;background:#161b22;padding:6px 12px;font-size:11px;color:#8b949e;";
+  const summary = document.createElement("summary");
+  summary.textContent = "\u5D4C\u5165\u7A0B\u5F0F\u78BC\uFF08\u6574\u5408\u65B9\uFF09";
+  summary.style.cssText = "cursor:pointer;color:#58a6ff;user-select:none;";
+  const pre = document.createElement("pre");
+  pre.style.cssText = "margin:8px 0 0;padding:10px;background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#e6edf3;font-size:11px;overflow:auto;max-height:160px;white-space:pre-wrap;";
+  const copyBtn = document.createElement("button");
+  copyBtn.type = "button";
+  copyBtn.textContent = "\u8907\u88FD";
+  copyBtn.style.cssText = "margin-top:6px;padding:4px 10px;background:#21262d;color:#e6edf3;border:1px solid #30363d;border-radius:4px;cursor:pointer;font-size:11px;";
+  copyBtn.onclick = () => {
+    const code = getCode();
+    pre.textContent = code;
+    void navigator.clipboard.writeText(code);
+  };
+  wrap.ontoggle = () => {
+    if (wrap.open) pre.textContent = getCode();
+  };
+  wrap.append(summary, pre, copyBtn);
+  parent.appendChild(wrap);
+  return wrap;
+}
+
+// src/pine-editor-panel.ts
+import { compilePineLite } from "@coderyo/pine-lite";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from "@codemirror/language";
 import { linter } from "@codemirror/lint";
 import { EditorState } from "@codemirror/state";
@@ -1319,7 +3844,7 @@ import {
   lineNumbers,
   placeholder
 } from "@codemirror/view";
-import { t as t8 } from "@coderyo/i18n";
+import { t as t11 } from "@coderyo/i18n";
 
 // src/pine-language.ts
 import { StreamLanguage } from "@codemirror/language";
@@ -1379,10 +3904,10 @@ function createPineLinter(onStatus) {
     const src = view.state.doc.toString();
     const result = compilePineLite(src);
     if (result.ok) {
-      onStatus?.(t8("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA"), true);
+      onStatus?.(t11("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA"), true);
       return [];
     }
-    onStatus?.(result.errors[0] ?? t8("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4"), false);
+    onStatus?.(result.errors[0] ?? t11("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4"), false);
     return pineDiagnosticsToCm(src, result.diagnostics ?? []);
   });
 }
@@ -1411,16 +3936,16 @@ function mountPineEditorPanel(parent, opts = {}) {
   wrap.open = true;
   wrap.style.cssText = "flex-shrink:0;border-top:1px solid #30363d;background:#161b22;max-height:220px;display:flex;flex-direction:column;";
   const summary = document.createElement("summary");
-  summary.textContent = t8("pine.editor.title", "Pine \u8173\u672C\u7DE8\u8F2F\u5668");
+  summary.textContent = t11("pine.editor.title", "Pine \u8173\u672C\u7DE8\u8F2F\u5668");
   summary.style.cssText = "cursor:pointer;color:#58a6ff;user-select:none;padding:6px 12px;font-size:12px;flex-shrink:0;";
   const toolbar = document.createElement("div");
   toolbar.style.cssText = "display:flex;align-items:center;gap:8px;padding:0 12px 6px;flex-shrink:0;";
   const status = document.createElement("span");
   status.style.cssText = "font-size:11px;color:#8b949e;flex:1;";
-  status.textContent = t8("pine.status.idle", "\u5C31\u7DD2");
+  status.textContent = t11("pine.status.idle", "\u5C31\u7DD2");
   const applyBtn = document.createElement("button");
   applyBtn.type = "button";
-  applyBtn.textContent = t8("pine.apply", "\u5957\u7528\u81F3\u5716\u8868");
+  applyBtn.textContent = t11("pine.apply", "\u5957\u7528\u81F3\u5716\u8868");
   applyBtn.style.cssText = "padding:4px 10px;background:#238636;color:#fff;border:1px solid #2ea043;border-radius:4px;cursor:pointer;font-size:11px;";
   const host = document.createElement("div");
   host.style.cssText = "flex:1;min-height:120px;max-height:160px;overflow:hidden;border-top:1px solid #30363d;";
@@ -1435,10 +3960,10 @@ function mountPineEditorPanel(parent, opts = {}) {
     savePineScriptPreference(src);
     if (r.ok) {
       status.style.color = "#3fb950";
-      status.textContent = t8("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA");
+      status.textContent = t11("pine.status.ok", "\u8A9E\u6CD5\u6B63\u78BA");
     } else {
       status.style.color = "#f85149";
-      status.textContent = r.errors[0] ?? t8("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4");
+      status.textContent = r.errors[0] ?? t11("pine.status.error", "\u8A9E\u6CD5\u932F\u8AA4");
     }
   };
   const extensions = [
@@ -1456,7 +3981,7 @@ function mountPineEditorPanel(parent, opts = {}) {
       status.textContent = msg;
     }),
     keymap.of([...defaultKeymap, ...historyKeymap]),
-    placeholder(t8("pine.placeholder", "// plot(sma(close, 20))")),
+    placeholder(t11("pine.placeholder", "// plot(sma(close, 20))")),
     EditorView.updateListener.of((u) => {
       if (!u.docChanged) return;
       if (debounceTimer) clearTimeout(debounceTimer);
@@ -1485,29 +4010,70 @@ function mountPineEditorPanel(parent, opts = {}) {
   };
 }
 export {
+  BUILTIN_PRESETS,
+  CHART_PANE_LAYER_TYPES,
   DEFAULT_LAYOUT_FEATURES,
+  DEFAULT_LAYOUT_SCHEMA,
+  DEFAULT_SYNC_TIME_SCALE_GROUP,
   GRID_SETTING_KEY,
+  LAYER_PRESET_VERSION,
+  LAYOUT_SCHEMA_VERSION,
+  LayerController,
+  OVERLAY_LAYER_TYPES,
   PINE_SCRIPT_STORAGE_KEY,
   RETURN_CURSOR_KEY,
   THEME_STORAGE_KEY,
+  VENDOR_COMPACT_PRESET,
+  VENDOR_DEFAULT_PRESET,
+  VENDOR_DUAL_SYNC_PRESET,
+  applyCompositorShellFeatures,
   applyThemeToDocument,
   attachChartContextMenu,
+  attachLayerEditor,
+  bindLayerTimeScaleSync,
   bindShortcutsModal,
+  clampBBox,
+  clampFrame,
+  cloneLayoutPreset,
+  cloneLayoutSchema,
+  createCompositorShell,
   createDemoLayoutOptions,
   createI18nProvider,
+  createLayoutGrid,
   createSymbolSearchDialog,
   createThemeProvider,
+  deleteUserPreset,
+  ensureOverlayLayers,
+  expandLegacyChartHostLayers,
+  forkPreset,
+  getBuiltinPreset,
+  getDrawingOverlayVisible,
+  getLayersBoundingBox,
+  getWidgetPlacement,
+  isChartPaneLayerType,
+  isOverlayLayerType,
+  isValidLayerBridgePane as isValidBridgeLayerPane,
+  layerTypeForBridgePane,
+  layoutSchemaToPreset,
+  layoutStorageKey,
+  listPresets,
   loadIndicatorConfig,
+  loadLayoutSchema,
   loadPineScriptPreference,
+  loadPreset,
   loadReturnToCursorPreference,
   loadShowGridPreference,
   loadTheme,
   mergeLayoutFeatures,
+  mergeLayoutPreset,
   mountChartLayout,
   mountCodeSnippetPanel,
   mountCrosshairLegend,
   mountDrawingPropertiesPanel,
+  mountLayerCompositor,
+  mountLayerPanel,
   mountLogoSlot,
+  mountPageNavigator,
   mountPineEditorPanel,
   mountSettingsPanel as mountSettingsMenu,
   mountSettingsPanel,
@@ -1516,14 +4082,32 @@ export {
   mountSymbolSearchDialogTrigger,
   mountThemeToggle,
   mountTopBar,
+  moveLayerFrames,
+  normalizeLayoutPreset,
+  normalizeLayoutSchema,
   openDrawingContextMenu,
   openShortcutsModal,
+  paneIdFromWidgetKey,
   pineLanguage,
+  presetStorageKey,
+  resizeGroupFrames,
   resolveLayoutFeatures,
+  resolveLayoutSchema,
+  resolvePaneLayerIds,
+  resolvePreset,
   saveIndicatorConfig,
+  saveLayoutSchema,
   savePineScriptPreference,
+  savePreset,
   saveReturnToCursorPreference,
   saveShowGridPreference,
-  saveTheme
+  saveTheme,
+  splitLegacyChartHost,
+  syncAllOverlayLayersToMain,
+  syncCompositorShellVisibilityFromFeatures,
+  syncCrosshairLegendToMain,
+  syncOverlayLayersToMain,
+  upgradeIndicatorHostType,
+  widgetKeyForChartPaneType
 };
 //# sourceMappingURL=index.js.map