@funnest/charts-ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,9 +1,5 @@
 // src/trading-chart.tsx
-import {
-  createChart,
-  darkTheme,
-  lightTheme
-} from "@funnest/charts";
+import "@funnest/charts";
 
 // ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/dist/preact.mjs
 var n;
@@ -313,6 +309,7 @@ var STRINGS = {
     settingHighLow: "\uCD5C\uACE0\xB7\uCD5C\uC800 \uD45C\uC2DC",
     settingLastPrice: "\uD604\uC7AC\uAC00 \uC120",
     settingVolume: "\uAC70\uB798\uB7C9",
+    settingNavButtons: "\uD655\uB300\xB7\uC774\uB3D9 \uBC84\uD2BC",
     settingGridH: "\uAC00\uB85C \uACA9\uC790",
     settingGridV: "\uC138\uB85C \uACA9\uC790",
     resetDefaults: "\uAE30\uBCF8\uAC12\uC73C\uB85C",
@@ -367,7 +364,17 @@ var STRINGS = {
     symbols: "\uC885\uBAA9",
     searching: "\uAC80\uC0C9 \uC911",
     searchHint: "\u2191\u2193 \uC774\uB3D9 \xB7 Enter \uC120\uD0DD \xB7 Esc \uB2EB\uAE30",
-    current: "\uD604\uC7AC"
+    current: "\uD604\uC7AC",
+    layout: "\uD654\uBA74 \uBD84\uD560",
+    sync: "\uCE78 \uB3D9\uAE30\uD654",
+    syncCrosshair: "\uC2ED\uC790\uC120",
+    syncTime: "\uC2DC\uAC04 \uBC94\uC704",
+    syncSymbol: "\uC885\uBAA9",
+    syncInterval: "\uC8FC\uAE30",
+    syncHint: "\uCF1C\uBA74 \uBAA8\uB4E0 \uCE78\uC774 \uAC19\uC774 \uC6C0\uC9C1\uC5EC\uC694",
+    maximizePane: "\uC774 \uCE78 \uD06C\uAC8C \uBCF4\uAE30",
+    restorePane: "\uBD84\uD560 \uD654\uBA74\uC73C\uB85C",
+    pane: "\uCE78"
   },
   en: {
     searchSymbol: "Symbol search",
@@ -409,6 +416,7 @@ var STRINGS = {
     settingHighLow: "High/low markers",
     settingLastPrice: "Last price line",
     settingVolume: "Volume",
+    settingNavButtons: "Zoom & scroll buttons",
     settingGridH: "Horizontal grid",
     settingGridV: "Vertical grid",
     resetDefaults: "Reset",
@@ -461,7 +469,17 @@ var STRINGS = {
     symbols: "Symbols",
     searching: "Searching",
     searchHint: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc close",
-    current: "Current"
+    current: "Current",
+    layout: "Layout",
+    sync: "Sync panes",
+    syncCrosshair: "Crosshair",
+    syncTime: "Time range",
+    syncSymbol: "Symbol",
+    syncInterval: "Interval",
+    syncHint: "Linked panes move together",
+    maximizePane: "Maximize pane",
+    restorePane: "Back to split view",
+    pane: "Pane"
   }
 };
 function resolutionLabel(resolution, locale, form = "short") {
@@ -595,6 +613,12 @@ var FunnestMark = () => /* @__PURE__ */ a2("svg", { width: "20", height: "20", v
   /* @__PURE__ */ a2("path", { d: "M7 13.5C9.5 21.5 17 23.5 23.4 11.2", stroke: "#fff", "stroke-width": "3.2", "stroke-linecap": "round" }),
   /* @__PURE__ */ a2("circle", { cx: "24.6", cy: "8.6", r: "2.9", fill: "#FFD43B" })
 ] });
+var LinkIcon = () => /* @__PURE__ */ a2(Icon, { children: [
+  /* @__PURE__ */ a2("path", { d: "M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1" }),
+  /* @__PURE__ */ a2("path", { d: "M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1" })
+] });
+var MaximizeIcon = () => /* @__PURE__ */ a2(Icon, { size: 16, children: /* @__PURE__ */ a2("path", { d: "M11 4h5v5M9 16H4v-5M16 4l-5 5M4 16l5-5" }) });
+var RestoreIcon = () => /* @__PURE__ */ a2(Icon, { size: 16, children: /* @__PURE__ */ a2("path", { d: "M15 9h-4V5M5 11h4v4M11 9l5-5M9 11l-5 5" }) });
 
 // ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/hooks/dist/hooks.mjs
 var t2;
@@ -885,251 +909,6 @@ function SelectionBar({ ctx }) {
   ] });
 }
 
-// src/components/overlay.tsx
-import { formatCompact, formatPrice } from "@funnest/charts";
-
-// src/components/symbol-avatar.tsx
-function hue(text) {
-  let h3 = 0;
-  for (const ch of text) h3 = (h3 * 31 + ch.charCodeAt(0)) % 360;
-  return h3;
-}
-function SymbolAvatar({ info, size = 24 }) {
-  const [failed, setFailed] = d2(false);
-  A2(() => setFailed(false), [info.logoUrl]);
-  const style = { width: `${size}px`, height: `${size}px`, fontSize: `${Math.round(size * 0.46)}px` };
-  if (info.logoUrl && !failed) {
-    return /* @__PURE__ */ a2("img", { class: "fnc-avatar", src: info.logoUrl, alt: "", style, onError: () => setFailed(true) });
-  }
-  const h3 = hue(info.symbol);
-  return /* @__PURE__ */ a2(
-    "span",
-    {
-      class: "fnc-avatar fnc-avatar-initial",
-      "aria-hidden": "true",
-      style: { ...style, background: `hsl(${h3} 70% 50% / 0.16)`, color: `hsl(${h3} 60% 42%)` },
-      children: (info.name || info.symbol).trim().charAt(0).toUpperCase()
-    }
-  );
-}
-
-// src/components/overlay.tsx
-var ZOOM_STEP = 1.25;
-var CONTROL_OFFSET = 52;
-var dirClass = (v3) => v3 > 0 ? "fnc-up" : v3 < 0 ? "fnc-down" : "fnc-flat";
-function IndicatorItem({ ctx, item }) {
-  const t3 = STRINGS[ctx.store.get().locale];
-  return /* @__PURE__ */ a2(
-    "div",
-    {
-      class: item.visible ? "fnc-ind" : "fnc-ind fnc-ind-hidden",
-      role: "button",
-      tabIndex: 0,
-      "aria-label": `${item.title} ${t3.indicatorSettings}`,
-      onClick: (e3) => {
-        if (e3.target.closest(".fnc-ind-actions")) return;
-        ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } });
-      },
-      onKeyDown: (e3) => e3.key === "Enter" && ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
-      children: [
-        /* @__PURE__ */ a2(
-          "button",
-          {
-            class: "fnc-ind-btn fnc-ind-eye",
-            title: item.visible ? t3.hide : t3.show,
-            "aria-label": `${item.title} ${item.visible ? t3.hide : t3.show}`,
-            "aria-pressed": !item.visible,
-            onClick: (e3) => {
-              e3.stopPropagation();
-              ctx.chart.setIndicatorVisible(item.id, !item.visible);
-            },
-            children: item.visible ? /* @__PURE__ */ a2(EyeIcon, {}) : /* @__PURE__ */ a2(EyeOffIcon, {})
-          }
-        ),
-        /* @__PURE__ */ a2("span", { class: "fnc-ind-title", children: item.title }),
-        item.visible && item.values.map((v3) => /* @__PURE__ */ a2("b", { style: { color: v3.color }, title: v3.label, children: v3.value })),
-        /* @__PURE__ */ a2("span", { class: "fnc-ind-actions", children: [
-          /* @__PURE__ */ a2(
-            "button",
-            {
-              class: "fnc-ind-btn",
-              title: t3.indicatorSettings,
-              "aria-label": `${item.title} ${t3.indicatorSettings}`,
-              onClick: () => ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
-              children: /* @__PURE__ */ a2(GearIcon, {})
-            }
-          ),
-          /* @__PURE__ */ a2(
-            "button",
-            {
-              class: "fnc-ind-btn",
-              title: t3.removeIndicator,
-              "aria-label": `${item.title} ${t3.removeIndicator}`,
-              onClick: () => ctx.chart.removeIndicator(item.id),
-              children: /* @__PURE__ */ a2(SmallCloseIcon, {})
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function Legend({ ctx }) {
-  const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
-  const [hover, setHover] = d2(null);
-  const [, refresh] = _2((n2) => n2 + 1, 0);
-  const [collapsed, setCollapsed] = d2(false);
-  A2(() => {
-    const offs = [
-      ctx.chart.on(
-        "crosshairMove",
-        (info) => setHover(info ? { bar: info.bar, prev: ctx.chart.bars[info.index - 1], index: info.index } : null)
-      ),
-      ctx.chart.on("dataChange", () => refresh(void 0))
-    ];
-    return () => offs.forEach((off) => off());
-  }, [ctx.chart]);
-  const ref = T2(null);
-  A2(() => {
-    const el = ref.current;
-    if (!el) return;
-    const update = () => ctx.chart.setTopInset(el.offsetTop + el.offsetHeight + 4);
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [ctx.chart]);
-  if (!s3.symbol) return /* @__PURE__ */ a2("div", { class: "fnc-legend", ref });
-  const bars = ctx.chart.bars;
-  const bar = hover?.bar ?? bars[bars.length - 1];
-  const prev = hover ? hover.prev : bars[bars.length - 2];
-  const fmt = (p3) => formatPrice(p3, s3.symbol.pricePrecision);
-  let values = null;
-  if (bar) {
-    const cls = dirClass(bar.close - bar.open);
-    const change = prev ? bar.close - prev.close : 0;
-    const pct = prev && prev.close ? change / prev.close * 100 : 0;
-    const sign = change > 0 ? "+" : "";
-    values = /* @__PURE__ */ a2("div", { class: "fnc-legend-values", children: [
-      /* @__PURE__ */ a2("span", { children: [
-        t3.open,
-        " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.open) })
-      ] }),
-      /* @__PURE__ */ a2("span", { children: [
-        t3.high,
-        " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.high) })
-      ] }),
-      /* @__PURE__ */ a2("span", { children: [
-        t3.low,
-        " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.low) })
-      ] }),
-      /* @__PURE__ */ a2("span", { children: [
-        t3.close_,
-        " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.close) })
-      ] }),
-      /* @__PURE__ */ a2("b", { class: dirClass(change), children: [
-        sign,
-        fmt(change),
-        " (",
-        sign,
-        pct.toFixed(2),
-        "%)"
-      ] }),
-      bar.volume !== void 0 && /* @__PURE__ */ a2("span", { children: [
-        t3.volume,
-        " ",
-        /* @__PURE__ */ a2("b", { class: "fnc-flat", children: formatCompact(bar.volume, s3.locale) })
-      ] })
-    ] });
-  }
-  const items = s3.indicators.length ? ctx.chart.indicatorLegend(hover?.index) : [];
-  const overlayItems = items.filter((i3) => i3.overlay);
-  const paneLegends = s3.layout.panes.filter((p3) => p3.kind === "indicator").map((pane) => ({ pane, item: items.find((i3) => i3.id === pane.id) }));
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-legend", ref, children: [
-      /* @__PURE__ */ a2("div", { class: "fnc-legend-title", children: [
-        ctx.showLogo && /* @__PURE__ */ a2(SymbolAvatar, { info: s3.symbol, size: 18 }),
-        /* @__PURE__ */ a2("b", { children: s3.symbol.name }),
-        /* @__PURE__ */ a2("span", { children: "\xB7" }),
-        /* @__PURE__ */ a2("span", { children: resolutionLabel(s3.resolution, s3.locale) }),
-        /* @__PURE__ */ a2("span", { children: "\xB7" }),
-        /* @__PURE__ */ a2("span", { children: s3.symbol.exchange }),
-        s3.loading && /* @__PURE__ */ a2("span", { class: "fnc-spinner", role: "status" })
-      ] }),
-      values,
-      !collapsed && overlayItems.map((item) => /* @__PURE__ */ a2(IndicatorItem, { ctx, item })),
-      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a2("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, title: t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a2("span", {}) }) : /* @__PURE__ */ a2("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, title: t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a2(CollapseLeftIcon, {}) }))
-    ] }),
-    paneLegends.map(
-      ({ pane, item }) => item && /* @__PURE__ */ a2("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a2(IndicatorItem, { ctx, item }) })
-    )
-  ] });
-}
-function NavControls({ ctx }) {
-  const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
-  const { plotWidth, panesHeight } = s3.layout;
-  if (plotWidth <= 0) return null;
-  const top = panesHeight - CONTROL_OFFSET;
-  const page = () => Math.max(1, Math.round(plotWidth / ctx.chart.timeScale.barSpacing / 3));
-  const button = (label, onClick, icon) => /* @__PURE__ */ a2("button", { class: "fnc-btn", title: label, "aria-label": label, onClick, children: icon });
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-nav", style: { left: `${plotWidth / 2}px`, top: `${top}px` }, children: [
-      button(t3.zoomOut, () => ctx.chart.zoom(1 / ZOOM_STEP), /* @__PURE__ */ a2(MinusIcon, {})),
-      button(t3.zoomIn, () => ctx.chart.zoom(ZOOM_STEP), /* @__PURE__ */ a2(PlusIcon, {})),
-      button(t3.scrollBack, () => ctx.chart.scrollBars(-page()), /* @__PURE__ */ a2(ChevronLeftIcon, {})),
-      button(t3.scrollForward, () => ctx.chart.scrollBars(page()), /* @__PURE__ */ a2(ChevronRightIcon, {})),
-      button(t3.resetView, () => ctx.chart.resetView(), /* @__PURE__ */ a2(ResetIcon, {}))
-    ] }),
-    !s3.atRealtime && /* @__PURE__ */ a2(
-      "button",
-      {
-        class: "fnc-realtime",
-        style: { left: `${plotWidth - 44}px`, top: `${top}px` },
-        title: t3.toRealtime,
-        "aria-label": t3.toRealtime,
-        onClick: () => ctx.chart.scrollToRealtime(),
-        children: /* @__PURE__ */ a2(ToRealtimeIcon, {})
-      }
-    )
-  ] });
-}
-var ATTRIBUTION_URL = "https://charts.funnest.xyz/?utm_source=chart&utm_medium=attribution";
-function Attribution({ ctx }) {
-  const s3 = useStore(ctx.store);
-  const { panesHeight, plotWidth } = s3.layout;
-  if (!ctx.attribution || plotWidth <= 0) return null;
-  const label = s3.locale === "ko" ? "Funnest \uCC28\uD2B8" : "Charts by Funnest";
-  return /* @__PURE__ */ a2(
-    "a",
-    {
-      class: "fnc-attribution",
-      href: ATTRIBUTION_URL,
-      target: "_blank",
-      rel: "noopener",
-      title: label,
-      "aria-label": label,
-      style: { top: `${panesHeight - 36}px` },
-      children: [
-        /* @__PURE__ */ a2(FunnestMark, {}),
-        /* @__PURE__ */ a2("span", { children: "funnest" })
-      ]
-    }
-  );
-}
-function Overlay({ ctx }) {
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2(Attribution, { ctx }),
-    /* @__PURE__ */ a2(Legend, { ctx }),
-    /* @__PURE__ */ a2(NavControls, { ctx }),
-    /* @__PURE__ */ a2(SelectionBar, { ctx })
-  ] });
-}
-
 // src/components/chart-type-menu.tsx
 var TYPES = [
   { type: "candles", label: "candles", icon: CandlesIcon },
@@ -1213,7 +992,8 @@ var SECTIONS = [
     toggles: [
       { key: "highLowMarkers", label: "settingHighLow" },
       { key: "lastPriceLine", label: "settingLastPrice" },
-      { key: "volume", label: "settingVolume" }
+      { key: "volume", label: "settingVolume" },
+      { key: "navigationButtons", label: "settingNavButtons" }
     ]
   },
   {
@@ -1330,7 +1110,7 @@ function defaultSeries(type, params) {
 }
 function StyleControls({
   t: t3,
-  row,
+  row: row2,
   onChange
 }) {
   return /* @__PURE__ */ a2($, { children: [
@@ -1339,8 +1119,8 @@ function StyleControls({
       {
         type: "checkbox",
         class: "fnc-check",
-        checked: row.visible,
-        "aria-label": row.visible ? t3.hide : t3.show,
+        checked: row2.visible,
+        "aria-label": row2.visible ? t3.hide : t3.show,
         onChange: (e3) => onChange({ visible: e3.currentTarget.checked })
       }
     ),
@@ -1349,12 +1129,12 @@ function StyleControls({
       {
         type: "color",
         class: "fnc-color",
-        value: row.color,
+        value: row2.color,
         "aria-label": t3.color,
         onInput: (e3) => onChange({ color: e3.currentTarget.value })
       }
     ),
-    /* @__PURE__ */ a2("select", { class: "fnc-select fnc-select-width", value: row.width, "aria-label": t3.lineWidth, onChange: (e3) => onChange({ width: Number(e3.currentTarget.value) }), children: WIDTHS.map((w3) => /* @__PURE__ */ a2("option", { value: w3, children: [
+    /* @__PURE__ */ a2("select", { class: "fnc-select fnc-select-width", value: row2.width, "aria-label": t3.lineWidth, onChange: (e3) => onChange({ width: Number(e3.currentTarget.value) }), children: WIDTHS.map((w3) => /* @__PURE__ */ a2("option", { value: w3, children: [
       w3,
       "px"
     ] })) })
@@ -1480,9 +1260,9 @@ function IndicatorSettings({ ctx, id }) {
         )
       ] })),
       styles.length > 0 && /* @__PURE__ */ a2("div", { class: "fnc-section", children: t3.style }),
-      styles.map((row, i3) => /* @__PURE__ */ a2("div", { class: "fnc-row", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-row-label fnc-row-label-wide", children: row.label }),
-        /* @__PURE__ */ a2(StyleControls, { t: t3, row, onChange: (p3) => setStyles(styles.map((s3, j2) => j2 === i3 ? { ...s3, ...p3 } : s3)) })
+      styles.map((row2, i3) => /* @__PURE__ */ a2("div", { class: "fnc-row", children: [
+        /* @__PURE__ */ a2("span", { class: "fnc-row-label fnc-row-label-wide", children: row2.label }),
+        /* @__PURE__ */ a2(StyleControls, { t: t3, row: row2, onChange: (p3) => setStyles(styles.map((s3, j2) => j2 === i3 ? { ...s3, ...p3 } : s3)) })
       ] }))
     ] }),
     /* @__PURE__ */ a2("div", { class: "fnc-form-actions", children: [
@@ -1603,19 +1383,216 @@ function IntervalPicker({ ctx }) {
   ] });
 }
 
-// src/components/slot.tsx
-function Slot({ el }) {
-  const ref = T2(null);
-  F2(() => {
-    ref.current?.appendChild(el);
-    return () => el.remove();
-  }, [el]);
-  return /* @__PURE__ */ a2("div", { class: "fnc-slot-host", ref });
+// src/layouts.ts
+var row = (...children) => ({ dir: "row", children });
+var col = (...children) => ({ dir: "col", children });
+var LAYOUTS = {
+  "1": 0,
+  "2-cols": row(0, 1),
+  "2-rows": col(0, 1),
+  "3-cols": row(0, 1, 2),
+  "3-rows": col(0, 1, 2),
+  "3-left": row(0, col(1, 2)),
+  "3-top": col(0, row(1, 2)),
+  "4-grid": col(row(0, 1), row(2, 3)),
+  "4-cols": row(0, 1, 2, 3),
+  "4-left": row(0, col(1, 2, 3)),
+  "6-grid": col(row(0, 1, 2), row(3, 4, 5)),
+  "8-grid": col(row(0, 1, 2, 3), row(4, 5, 6, 7))
+};
+var LAYOUT_GROUPS = [
+  ["1"],
+  ["2-cols", "2-rows"],
+  ["3-cols", "3-rows", "3-left", "3-top"],
+  ["4-grid", "4-cols", "4-left"],
+  ["6-grid", "8-grid"]
+];
+var MAX_PANES = 8;
+function isLayoutId(value) {
+  return typeof value === "string" && value in LAYOUTS;
+}
+function paneCount(node) {
+  if (typeof node === "number") return 1;
+  let n2 = 0;
+  for (const child of node.children) n2 += paneCount(child);
+  return n2;
+}
+function sizesFor(sizes, key, count) {
+  const s3 = sizes[key];
+  return s3 && s3.length === count && s3.every((v3) => Number.isFinite(v3) && v3 > 0) ? s3 : Array(count).fill(1);
+}
+function resizePair(weights, i3, deltaFraction, min = 0.12) {
+  const total = weights.reduce((a5, b2) => a5 + b2, 0);
+  const a4 = weights[i3];
+  const b = weights[i3 + 1];
+  const pair = a4 + b;
+  const delta = deltaFraction * total;
+  const nextA = Math.min(pair * (1 - min), Math.max(pair * min, a4 + delta));
+  const next = [...weights];
+  next[i3] = nextA;
+  next[i3 + 1] = pair - nextA;
+  return next;
+}
+function layoutRects(node, x2 = 0, y3 = 0, w3 = 20, h3 = 16, gap = 1.6) {
+  if (typeof node === "number") return [{ x: x2, y: y3, w: w3, h: h3 }];
+  const n2 = node.children.length;
+  const out = [];
+  node.children.forEach((child, i3) => {
+    if (node.dir === "row") {
+      const cw = (w3 - gap * (n2 - 1)) / n2;
+      out.push(...layoutRects(child, x2 + i3 * (cw + gap), y3, cw, h3, gap));
+    } else {
+      const ch = (h3 - gap * (n2 - 1)) / n2;
+      out.push(...layoutRects(child, x2, y3 + i3 * (ch + gap), w3, ch, gap));
+    }
+  });
+  return out;
 }
 
-// src/components/symbol-search.tsx
-import { formatPrice as formatPrice2 } from "@funnest/charts";
-var DEBOUNCE_MS = 150;
+// src/components/layout-menu.tsx
+function LayoutGlyph({ id }) {
+  return /* @__PURE__ */ a2("svg", { width: "20", height: "16", viewBox: "0 0 20 16", "aria-hidden": "true", children: layoutRects(LAYOUTS[id]).map((r3) => /* @__PURE__ */ a2("rect", { x: r3.x + 0.5, y: r3.y + 0.5, width: Math.max(0, r3.w - 1), height: Math.max(0, r3.h - 1), rx: "1.5", fill: "none", stroke: "currentColor", "stroke-width": "1.2" })) });
+}
+function usePopover() {
+  const [open, setOpen] = d2(false);
+  const ref = T2(null);
+  A2(() => {
+    if (!open) return;
+    const onDown = (e3) => !ref.current?.contains(e3.target) && setOpen(false);
+    const onKey = (e3) => e3.key === "Escape" && setOpen(false);
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  return { open, setOpen, ref };
+}
+var SYNC_KEYS = [
+  { key: "crosshair", label: "syncCrosshair" },
+  { key: "time", label: "syncTime" },
+  { key: "symbol", label: "syncSymbol" },
+  { key: "interval", label: "syncInterval" }
+];
+function LayoutMenu({ ctx, multi }) {
+  const s3 = useStore(ctx.store);
+  const m3 = useStore(multi.store);
+  const t3 = STRINGS[s3.locale];
+  const layout = usePopover();
+  const sync = usePopover();
+  const anySync = Object.values(m3.sync).some(Boolean);
+  return /* @__PURE__ */ a2($, { children: [
+    /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: layout.ref, children: [
+      /* @__PURE__ */ a2(
+        "button",
+        {
+          class: "fnc-btn fnc-btn-wide fnc-btn-layout",
+          title: t3.layout,
+          "aria-label": t3.layout,
+          "aria-haspopup": "menu",
+          "aria-expanded": layout.open,
+          onClick: () => layout.setOpen(!layout.open),
+          children: [
+            /* @__PURE__ */ a2(LayoutGlyph, { id: m3.layout }),
+            /* @__PURE__ */ a2(ChevronDownIcon, {})
+          ]
+        }
+      ),
+      layout.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-layout-menu", role: "menu", "aria-label": t3.layout, children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-layout-row", children: [
+        /* @__PURE__ */ a2("span", { class: "fnc-layout-count", children: group[0].split("-")[0] }),
+        group.map((id) => /* @__PURE__ */ a2(
+          "button",
+          {
+            class: "fnc-layout-opt",
+            role: "menuitemradio",
+            "aria-checked": id === m3.layout,
+            "aria-label": `${t3.layout} ${id}`,
+            title: id,
+            onClick: () => {
+              multi.setLayout(id);
+              layout.setOpen(false);
+            },
+            children: /* @__PURE__ */ a2(LayoutGlyph, { id })
+          }
+        ))
+      ] })) })
+    ] }),
+    /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: sync.ref, children: [
+      /* @__PURE__ */ a2(
+        "button",
+        {
+          class: "fnc-btn fnc-btn-sync",
+          title: t3.sync,
+          "aria-label": t3.sync,
+          "aria-haspopup": "menu",
+          "aria-expanded": sync.open,
+          "aria-pressed": anySync,
+          onClick: () => sync.setOpen(!sync.open),
+          children: /* @__PURE__ */ a2(LinkIcon, {})
+        }
+      ),
+      sync.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-sync-menu", role: "menu", "aria-label": t3.sync, children: [
+        /* @__PURE__ */ a2("div", { class: "fnc-menu-title", children: [
+          t3.sync,
+          /* @__PURE__ */ a2("small", { children: t3.syncHint })
+        ] }),
+        SYNC_KEYS.map(({ key, label }) => /* @__PURE__ */ a2(
+          "button",
+          {
+            class: "fnc-menu-item fnc-sync-item",
+            role: "menuitemcheckbox",
+            "aria-checked": m3.sync[key],
+            onClick: () => multi.setSync({ [key]: !m3.sync[key] }),
+            children: [
+              /* @__PURE__ */ a2("span", { children: t3[label] }),
+              /* @__PURE__ */ a2("span", { class: "fnc-switch", "data-on": m3.sync[key] ? "true" : "false", "aria-hidden": "true" })
+            ]
+          }
+        ))
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/slot.tsx
+function Slot({ el, fixed = false }) {
+  const ref = T2(null);
+  F2(() => {
+    ref.current?.appendChild(el);
+    return () => el.remove();
+  }, [el]);
+  return /* @__PURE__ */ a2("div", { class: fixed ? "fnc-slot-host fnc-slot-host-fixed" : "fnc-slot-host", ref });
+}
+
+// src/components/symbol-avatar.tsx
+function hue(text) {
+  let h3 = 0;
+  for (const ch of text) h3 = (h3 * 31 + ch.charCodeAt(0)) % 360;
+  return h3;
+}
+function SymbolAvatar({ info, size = 24 }) {
+  const [failed, setFailed] = d2(false);
+  A2(() => setFailed(false), [info.logoUrl]);
+  const style = { width: `${size}px`, height: `${size}px`, fontSize: `${Math.round(size * 0.46)}px` };
+  if (info.logoUrl && !failed) {
+    return /* @__PURE__ */ a2("img", { class: "fnc-avatar", src: info.logoUrl, alt: "", style, onError: () => setFailed(true) });
+  }
+  const h3 = hue(info.symbol);
+  return /* @__PURE__ */ a2(
+    "span",
+    {
+      class: "fnc-avatar fnc-avatar-initial",
+      "aria-hidden": "true",
+      style: { ...style, background: `hsl(${h3} 70% 50% / 0.16)`, color: `hsl(${h3} 60% 42%)` },
+      children: (info.name || info.symbol).trim().charAt(0).toUpperCase()
+    }
+  );
+}
+
+// src/components/symbol-search.tsx
+import { formatPrice } from "@funnest/charts";
+var DEBOUNCE_MS = 150;
 var RECENT_KEY = "recent-symbols";
 var FAVORITE_KEY = "favorite-symbols";
 var MAX_RECENT = 8;
@@ -1712,7 +1689,7 @@ function SymbolSearch({ ctx }) {
     else return;
     e3.preventDefault();
   };
-  const row = (info, index, isRecent) => {
+  const row2 = (info, index, isRecent) => {
     const cat = categoryOf(info);
     const fav = isFavorite(info);
     const change = info.changePercent ?? 0;
@@ -1757,7 +1734,7 @@ function SymbolSearch({ ctx }) {
           ] }),
           info.sparkline && /* @__PURE__ */ a2(Sparkline, { values: info.sparkline, up }),
           info.price !== void 0 && /* @__PURE__ */ a2("span", { class: "fnc-sr-quote", children: [
-            /* @__PURE__ */ a2("b", { children: formatPrice2(info.price, info.pricePrecision) }),
+            /* @__PURE__ */ a2("b", { children: formatPrice(info.price, info.pricePrecision) }),
             info.changePercent !== void 0 && /* @__PURE__ */ a2("span", { class: trend, children: [
               change > 0 ? "\u2191 " : change < 0 ? "\u2193 " : "",
               Math.abs(info.changePercent).toFixed(2),
@@ -1825,9 +1802,9 @@ function SymbolSearch({ ctx }) {
           /* @__PURE__ */ a2("span", { children: t3.recentSearches }),
           /* @__PURE__ */ a2("button", { class: "fnc-link", onClick: () => save(RECENT_KEY, [], setRecent), children: t3.clearRecent })
         ] }),
-        recentRows.map((info, i3) => row(info, i3, true)),
+        recentRows.map((info, i3) => row2(info, i3, true)),
         (recentRows.length > 0 || view.kind === "favorites") && /* @__PURE__ */ a2("div", { class: "fnc-sr-section", children: view.kind === "favorites" ? t3.favorites : t3.symbols }),
-        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a2("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => row(info, recentRows.length + i3, false)),
+        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a2("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => row2(info, recentRows.length + i3, false)),
         !loading && rows.length === 0 && /* @__PURE__ */ a2("div", { class: "fnc-empty", children: view.kind === "favorites" && favorites.length === 0 ? t3.noFavorites : t3.noResults })
       ] })
     ] }),
@@ -1900,6 +1877,7 @@ function Toolbar({ ctx }) {
         ]
       }
     ),
+    ctx.multi && /* @__PURE__ */ a2(LayoutMenu, { ctx, multi: ctx.multi }),
     /* @__PURE__ */ a2("div", { class: "fnc-spacer" }),
     ctx.drawingToolbar && /* @__PURE__ */ a2(
       "button",
@@ -1912,7 +1890,7 @@ function Toolbar({ ctx }) {
         children: /* @__PURE__ */ a2(PencilIcon, {})
       }
     ),
-    /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbarEnd }),
+    /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbarEnd, fixed: true }),
     /* @__PURE__ */ a2(
       "button",
       {
@@ -1940,126 +1918,382 @@ function Toolbar({ ctx }) {
   ] });
 }
 
-// src/storage.ts
-function createStorage(prefix) {
-  const memory = /* @__PURE__ */ new Map();
-  const ls = (() => {
-    try {
-      return prefix && typeof localStorage !== "undefined" ? localStorage : null;
-    } catch {
-      return null;
-    }
-  })();
-  const full = (key) => `${prefix}:${key}`;
-  return {
-    get(key, fallback) {
-      try {
-        const raw = ls ? ls.getItem(full(key)) : memory.get(key) ?? null;
-        return raw === null ? fallback : JSON.parse(raw);
-      } catch {
-        return fallback;
-      }
-    },
-    set(key, value) {
-      const raw = JSON.stringify(value);
-      try {
-        if (ls) ls.setItem(full(key), raw);
-        else memory.set(key, raw);
-      } catch {
-        memory.set(key, raw);
-      }
-    }
-  };
-}
-
-// src/styles.ts
-var CSS = (
-  /* css */
-  `
-.fnc-root {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  background: var(--fnc-bg);
-  color: var(--fnc-text);
-  font-family: var(--fnc-font);
-  font-size: 14px;
-  line-height: 1.4;
-  -webkit-font-smoothing: antialiased;
-  overflow: hidden;
-}
-.fnc-root *, .fnc-root *::before, .fnc-root *::after { box-sizing: border-box; }
-.fnc-root.fnc-pseudo-fullscreen { position: fixed; inset: 0; z-index: 2147483000; }
-:where(.fnc-root) button {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: 0;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.fnc-root button:focus-visible { outline: 2px solid var(--fnc-accent); outline-offset: 1px; }
+// src/pane.tsx
+import { createChart } from "@funnest/charts";
 
-/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.fnc-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 48px;
-  padding: 0 8px;
-  border-bottom: 1px solid var(--fnc-border);
-  flex: none;
-}
-.fnc-symbol {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 36px;
-  max-width: 220px;
-  padding: 0 10px 0 8px;
-  border-radius: var(--fnc-radius);
-  font-weight: 700;
-  font-size: 15px;
-  flex: none;
-}
-.fnc-symbol .fnc-icon { color: var(--fnc-text-2); display: flex; }
-.fnc-symbol-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.fnc-symbol:not(:disabled):hover, .fnc-btn:hover, .fnc-chip:hover { background: var(--fnc-surface); }
-.fnc-symbol:disabled { cursor: default; }
-.fnc-sep { width: 1px; height: 20px; background: var(--fnc-border); margin: 0 4px; flex: none; }
-.fnc-intervals {
-  display: flex;
-  gap: 2px;
-  overflow-x: auto;
-  scrollbar-width: none;
-  min-width: 0;
-}
-.fnc-intervals::-webkit-scrollbar { display: none; }
-.fnc-chip {
-  height: 32px;
-  padding: 0 10px;
-  border-radius: var(--fnc-radius);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fnc-text-2);
-  white-space: nowrap;
-  flex: none;
+// src/components/overlay.tsx
+import { formatCompact, formatPrice as formatPrice2 } from "@funnest/charts";
+var ZOOM_STEP = 1.25;
+var CONTROL_OFFSET = 52;
+var dirClass = (v3) => v3 > 0 ? "fnc-up" : v3 < 0 ? "fnc-down" : "fnc-flat";
+function IndicatorItem({ ctx, item }) {
+  const t3 = STRINGS[ctx.store.get().locale];
+  return /* @__PURE__ */ a2(
+    "div",
+    {
+      class: item.visible ? "fnc-ind" : "fnc-ind fnc-ind-hidden",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `${item.title} ${t3.indicatorSettings}`,
+      onClick: (e3) => {
+        if (e3.target.closest(".fnc-ind-actions")) return;
+        ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } });
+      },
+      onKeyDown: (e3) => e3.key === "Enter" && ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
+      children: [
+        /* @__PURE__ */ a2(
+          "button",
+          {
+            class: "fnc-ind-btn fnc-ind-eye",
+            title: item.visible ? t3.hide : t3.show,
+            "aria-label": `${item.title} ${item.visible ? t3.hide : t3.show}`,
+            "aria-pressed": !item.visible,
+            onClick: (e3) => {
+              e3.stopPropagation();
+              ctx.chart.setIndicatorVisible(item.id, !item.visible);
+            },
+            children: item.visible ? /* @__PURE__ */ a2(EyeIcon, {}) : /* @__PURE__ */ a2(EyeOffIcon, {})
+          }
+        ),
+        /* @__PURE__ */ a2("span", { class: "fnc-ind-title", children: item.title }),
+        item.visible && item.values.map((v3) => /* @__PURE__ */ a2("b", { style: { color: v3.color }, title: v3.label, children: v3.value })),
+        /* @__PURE__ */ a2("span", { class: "fnc-ind-actions", children: [
+          /* @__PURE__ */ a2(
+            "button",
+            {
+              class: "fnc-ind-btn",
+              title: t3.indicatorSettings,
+              "aria-label": `${item.title} ${t3.indicatorSettings}`,
+              onClick: () => ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
+              children: /* @__PURE__ */ a2(GearIcon, {})
+            }
+          ),
+          /* @__PURE__ */ a2(
+            "button",
+            {
+              class: "fnc-ind-btn",
+              title: t3.removeIndicator,
+              "aria-label": `${item.title} ${t3.removeIndicator}`,
+              onClick: () => ctx.chart.removeIndicator(item.id),
+              children: /* @__PURE__ */ a2(SmallCloseIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
-.fnc-chip[aria-pressed='true'] { color: var(--fnc-text); background: var(--fnc-surface); }
-.fnc-spacer { flex: 1; min-width: 8px; }
-.fnc-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: var(--fnc-radius);
-  color: var(--fnc-text-2);
+function Legend({ ctx }) {
+  const s3 = useStore(ctx.store);
+  const t3 = STRINGS[s3.locale];
+  const [hover, setHover] = d2(null);
+  const [, refresh] = _2((n2) => n2 + 1, 0);
+  const [collapsed, setCollapsed] = d2(false);
+  A2(() => {
+    const offs = [
+      ctx.chart.on(
+        "crosshairMove",
+        (info) => setHover(info ? { bar: info.bar, prev: ctx.chart.bars[info.index - 1], index: info.index } : null)
+      ),
+      ctx.chart.on("dataChange", () => refresh(void 0))
+    ];
+    return () => offs.forEach((off) => off());
+  }, [ctx.chart]);
+  const ref = T2(null);
+  A2(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => ctx.chart.setTopInset(el.offsetTop + el.offsetHeight + 4);
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ctx.chart]);
+  if (!s3.symbol) return /* @__PURE__ */ a2("div", { class: "fnc-legend", ref });
+  const bars = ctx.chart.bars;
+  const bar = hover?.bar ?? bars[bars.length - 1];
+  const prev = hover ? hover.prev : bars[bars.length - 2];
+  const fmt = (p3) => formatPrice2(p3, s3.symbol.pricePrecision);
+  let values = null;
+  if (bar) {
+    const cls = dirClass(bar.close - bar.open);
+    const change = prev ? bar.close - prev.close : 0;
+    const pct = prev && prev.close ? change / prev.close * 100 : 0;
+    const sign = change > 0 ? "+" : "";
+    values = /* @__PURE__ */ a2("div", { class: "fnc-legend-values", children: [
+      /* @__PURE__ */ a2("span", { children: [
+        t3.open,
+        " ",
+        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.open) })
+      ] }),
+      /* @__PURE__ */ a2("span", { children: [
+        t3.high,
+        " ",
+        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.high) })
+      ] }),
+      /* @__PURE__ */ a2("span", { children: [
+        t3.low,
+        " ",
+        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.low) })
+      ] }),
+      /* @__PURE__ */ a2("span", { children: [
+        t3.close_,
+        " ",
+        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.close) })
+      ] }),
+      /* @__PURE__ */ a2("b", { class: dirClass(change), children: [
+        sign,
+        fmt(change),
+        " (",
+        sign,
+        pct.toFixed(2),
+        "%)"
+      ] }),
+      bar.volume !== void 0 && /* @__PURE__ */ a2("span", { children: [
+        t3.volume,
+        " ",
+        /* @__PURE__ */ a2("b", { class: "fnc-flat", children: formatCompact(bar.volume, s3.locale) })
+      ] })
+    ] });
+  }
+  const items = s3.indicators.length ? ctx.chart.indicatorLegend(hover?.index) : [];
+  const overlayItems = items.filter((i3) => i3.overlay);
+  const paneLegends = s3.layout.panes.filter((p3) => p3.kind === "indicator").map((pane) => ({ pane, item: items.find((i3) => i3.id === pane.id) }));
+  return /* @__PURE__ */ a2($, { children: [
+    /* @__PURE__ */ a2("div", { class: "fnc-legend", ref, children: [
+      /* @__PURE__ */ a2("div", { class: "fnc-legend-title", children: [
+        ctx.showLogo && /* @__PURE__ */ a2(SymbolAvatar, { info: s3.symbol, size: 18 }),
+        /* @__PURE__ */ a2("b", { children: s3.symbol.name }),
+        /* @__PURE__ */ a2("span", { children: "\xB7" }),
+        /* @__PURE__ */ a2("span", { children: resolutionLabel(s3.resolution, s3.locale) }),
+        /* @__PURE__ */ a2("span", { children: "\xB7" }),
+        /* @__PURE__ */ a2("span", { children: s3.symbol.exchange }),
+        s3.loading && /* @__PURE__ */ a2("span", { class: "fnc-spinner", role: "status" })
+      ] }),
+      values,
+      !collapsed && overlayItems.map((item) => /* @__PURE__ */ a2(IndicatorItem, { ctx, item })),
+      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a2("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, title: t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a2("span", {}) }) : /* @__PURE__ */ a2("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, title: t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a2(CollapseLeftIcon, {}) }))
+    ] }),
+    paneLegends.map(
+      ({ pane, item }) => item && /* @__PURE__ */ a2("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a2(IndicatorItem, { ctx, item }) })
+    )
+  ] });
+}
+function NavControls({ ctx }) {
+  const s3 = useStore(ctx.store);
+  const t3 = STRINGS[s3.locale];
+  const [showButtons, setShowButtons] = d2(ctx.chart.settings.navigationButtons);
+  A2(() => ctx.chart.on("settingsChange", (settings) => setShowButtons(settings.navigationButtons)), [ctx.chart]);
+  const { plotWidth, panesHeight } = s3.layout;
+  if (plotWidth <= 0) return null;
+  const top = panesHeight - CONTROL_OFFSET;
+  const page = () => Math.max(1, Math.round(plotWidth / ctx.chart.timeScale.barSpacing / 3));
+  const button = (label, onClick, icon) => /* @__PURE__ */ a2("button", { class: "fnc-btn", title: label, "aria-label": label, onClick, children: icon });
+  return /* @__PURE__ */ a2($, { children: [
+    showButtons && /* @__PURE__ */ a2("div", { class: "fnc-nav", style: { left: `${plotWidth / 2}px`, top: `${top}px` }, children: [
+      button(t3.zoomOut, () => ctx.chart.zoom(1 / ZOOM_STEP), /* @__PURE__ */ a2(MinusIcon, {})),
+      button(t3.zoomIn, () => ctx.chart.zoom(ZOOM_STEP), /* @__PURE__ */ a2(PlusIcon, {})),
+      button(t3.scrollBack, () => ctx.chart.scrollBars(-page()), /* @__PURE__ */ a2(ChevronLeftIcon, {})),
+      button(t3.scrollForward, () => ctx.chart.scrollBars(page()), /* @__PURE__ */ a2(ChevronRightIcon, {})),
+      button(t3.resetView, () => ctx.chart.resetView(), /* @__PURE__ */ a2(ResetIcon, {}))
+    ] }),
+    !s3.atRealtime && /* @__PURE__ */ a2(
+      "button",
+      {
+        class: "fnc-realtime",
+        style: { left: `${plotWidth - 44}px`, top: `${top}px` },
+        title: t3.toRealtime,
+        "aria-label": t3.toRealtime,
+        onClick: () => ctx.chart.scrollToRealtime(),
+        children: /* @__PURE__ */ a2(ToRealtimeIcon, {})
+      }
+    )
+  ] });
+}
+var ATTRIBUTION_URL = "https://charts.funnest.xyz/?utm_source=chart&utm_medium=attribution";
+function Attribution({ ctx }) {
+  const s3 = useStore(ctx.store);
+  const { panesHeight, plotWidth } = s3.layout;
+  if (!ctx.attribution || plotWidth <= 0) return null;
+  const label = s3.locale === "ko" ? "Funnest \uCC28\uD2B8" : "Charts by Funnest";
+  return /* @__PURE__ */ a2(
+    "a",
+    {
+      class: "fnc-attribution",
+      href: ATTRIBUTION_URL,
+      target: "_blank",
+      rel: "noopener",
+      title: label,
+      "aria-label": label,
+      style: { top: `${panesHeight - 36}px` },
+      children: [
+        /* @__PURE__ */ a2(FunnestMark, {}),
+        /* @__PURE__ */ a2("span", { children: "funnest" })
+      ]
+    }
+  );
+}
+function PaneTools({ ctx }) {
+  return ctx.multi ? /* @__PURE__ */ a2(PaneMaximize, { ctx, multi: ctx.multi }) : null;
+}
+function PaneMaximize({ ctx, multi }) {
+  const s3 = useStore(ctx.store);
+  const m3 = useStore(multi.store);
+  if (s3.layout.plotWidth <= 0 || m3.narrow || m3.layout === "1" && m3.maximized === null) return null;
+  const t3 = STRINGS[s3.locale];
+  const maximized = m3.maximized !== null;
+  const label = maximized ? t3.restorePane : t3.maximizePane;
+  return /* @__PURE__ */ a2(
+    "button",
+    {
+      class: "fnc-btn fnc-pane-max",
+      style: { left: `${s3.layout.plotWidth - 36}px` },
+      title: `${label} (Alt+Enter)`,
+      "aria-label": label,
+      "aria-pressed": maximized,
+      onClick: () => {
+        const index = multi.store.get().active;
+        multi.toggleMaximize(index);
+      },
+      children: maximized ? /* @__PURE__ */ a2(RestoreIcon, {}) : /* @__PURE__ */ a2(MaximizeIcon, {})
+    }
+  );
+}
+function Overlay({ ctx }) {
+  return /* @__PURE__ */ a2($, { children: [
+    /* @__PURE__ */ a2(Attribution, { ctx }),
+    /* @__PURE__ */ a2(Legend, { ctx }),
+    /* @__PURE__ */ a2(NavControls, { ctx }),
+    /* @__PURE__ */ a2(SelectionBar, { ctx }),
+    /* @__PURE__ */ a2(PaneTools, { ctx })
+  ] });
+}
+
+// src/shell.ts
+import { darkTheme, lightTheme } from "@funnest/charts";
+
+// src/storage.ts
+function createStorage(prefix) {
+  const memory = /* @__PURE__ */ new Map();
+  const ls = (() => {
+    try {
+      return prefix && typeof localStorage !== "undefined" ? localStorage : null;
+    } catch {
+      return null;
+    }
+  })();
+  const full = (key) => `${prefix}:${key}`;
+  return {
+    get(key, fallback) {
+      try {
+        const raw = ls ? ls.getItem(full(key)) : memory.get(key) ?? null;
+        return raw === null ? fallback : JSON.parse(raw);
+      } catch {
+        return fallback;
+      }
+    },
+    set(key, value) {
+      const raw = JSON.stringify(value);
+      try {
+        if (ls) ls.setItem(full(key), raw);
+        else memory.set(key, raw);
+      } catch {
+        memory.set(key, raw);
+      }
+    }
+  };
+}
+
+// src/styles.ts
+var CSS = (
+  /* css */
+  `
+.fnc-root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--fnc-bg);
+  color: var(--fnc-text);
+  font-family: var(--fnc-font);
+  font-size: 14px;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+.fnc-root *, .fnc-root *::before, .fnc-root *::after { box-sizing: border-box; }
+.fnc-root.fnc-pseudo-fullscreen { position: fixed; inset: 0; z-index: 2147483000; }
+:where(.fnc-root) button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.fnc-root button:focus-visible { outline: 2px solid var(--fnc-accent); outline-offset: 1px; }
+
+/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.fnc-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 48px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--fnc-border);
+  flex: none;
+}
+.fnc-symbol {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  max-width: 220px;
+  padding: 0 10px 0 8px;
+  border-radius: var(--fnc-radius);
+  font-weight: 700;
+  font-size: 15px;
+  /* The symbol gives way first when the toolbar is tight: its name truncates, never overlaps. */
+  flex: 0 1 auto;
+  min-width: 36px;
+  overflow: hidden;
+}
+.fnc-symbol .fnc-icon { color: var(--fnc-text-2); display: flex; }
+.fnc-symbol-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fnc-symbol:not(:disabled):hover, .fnc-btn:hover, .fnc-chip:hover { background: var(--fnc-surface); }
+.fnc-symbol:disabled { cursor: default; }
+.fnc-sep { width: 1px; height: 20px; background: var(--fnc-border); margin: 0 4px; flex: none; }
+.fnc-intervals {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  min-width: 0;
+}
+.fnc-intervals::-webkit-scrollbar { display: none; }
+.fnc-chip {
+  height: 32px;
+  padding: 0 10px;
+  border-radius: var(--fnc-radius);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fnc-text-2);
+  white-space: nowrap;
+  flex: none;
+}
+.fnc-chip[aria-pressed='true'] { color: var(--fnc-text); background: var(--fnc-surface); }
+.fnc-spacer { flex: 1; min-width: 8px; }
+.fnc-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--fnc-radius);
+  color: var(--fnc-text-2);
   flex: none;
 }
 .fnc-btn:hover { color: var(--fnc-text); }
@@ -2111,7 +2345,9 @@ var CSS = (
 
 /* \u2500\u2500 Chart body & overlays \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .fnc-body { position: relative; display: flex; flex: 1; min-height: 0; }
-.fnc-stage { position: relative; flex: 1; min-width: 0; }
+.fnc-main { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
+.fnc-stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
+.fnc-slot-bottom { flex: none; min-width: 0; }
 .fnc-chart-host, .fnc-overlay { position: absolute; inset: 0; }
 
 /* \u2500\u2500 Drawing tool bar (left) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -2278,6 +2514,8 @@ var CSS = (
 /* \u2500\u2500 Slots: host-app UI inside the widget (collapse when empty) \u2500\u2500 */
 .fnc-slot:empty { display: none; }
 .fnc-slot-host { display: flex; align-self: stretch; min-width: 0; flex: 0 1 auto; }
+/* Buttons next to the gear keep their size (they'd otherwise slide under it on phones). */
+.fnc-slot-host-fixed { flex: none; }
 .fnc-slot-toolbar { position: relative; display: flex; align-items: center; min-width: 0; padding-left: 9px; margin-left: 4px; }
 .fnc-slot-toolbar::before {
   content: '';
@@ -2686,13 +2924,124 @@ var CSS = (
 .fnc-action-primary { background: var(--fnc-accent); color: #fff; }
 .fnc-action-danger { flex: 0 0 auto; padding: 0 16px; color: var(--fnc-danger, #F04452); background: none; }
 
+/* \u2500\u2500 Narrow phones (\u2264 400px): drop the menu chevrons and separators so every button fits \u2500\u2500 */
+@media (max-width: 400px) {
+  .fnc-toolbar .fnc-btn-wide > svg:last-child { display: none; }
+  .fnc-toolbar .fnc-btn-wide { padding: 0 3px; }
+  .fnc-toolbar > .fnc-sep { display: none; }
+  .fnc-toolbar > .fnc-spacer { min-width: 0; }
+}
+
+/* \u2500\u2500 Multi-chart (split panes) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.fnc-grid { display: flex; flex: 1; min-width: 0; min-height: 0; }
+.fnc-split { display: flex; min-width: 0; min-height: 0; }
+.fnc-split-row { flex-direction: row; }
+.fnc-split-col { flex-direction: column; }
+.fnc-pane { position: relative; display: flex; min-width: 0; min-height: 0; }
+.fnc-pane > .fnc-stage { flex: 1; min-height: 0; }
+.fnc-split-on .fnc-pane-active::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--fnc-accent);
+  pointer-events: none;
+  z-index: 3;
+}
+.fnc-splitter { position: relative; flex: none; background: var(--fnc-border); z-index: 4; touch-action: none; }
+.fnc-splitter::after { content: ''; position: absolute; }
+.fnc-splitter-row { width: 1px; cursor: col-resize; }
+.fnc-splitter-row::after { inset: 0 -4px; }
+.fnc-splitter-col { height: 1px; cursor: row-resize; }
+.fnc-splitter-col::after { inset: -4px 0; }
+.fnc-splitter:hover { background: var(--fnc-accent); }
+.fnc-resizing-x, .fnc-resizing-x * { cursor: col-resize !important; user-select: none; }
+.fnc-resizing-y, .fnc-resizing-y * { cursor: row-resize !important; user-select: none; }
+.fnc-parking { display: none; }
+/* Navigation controls follow the hovered pane, not the whole widget. */
+.fnc-multi .fnc-body:hover .fnc-nav { opacity: 0; }
+.fnc-multi .fnc-stage:hover .fnc-nav, .fnc-multi .fnc-nav:focus-within { opacity: 1; }
+.fnc-pane-max {
+  position: absolute;
+  top: 6px;
+  width: 28px;
+  height: 28px;
+  opacity: 0;
+  background: var(--fnc-bg);
+  pointer-events: auto;
+  z-index: 2;
+}
+.fnc-stage:hover .fnc-pane-max, .fnc-pane-max:focus-visible, .fnc-pane-max[aria-pressed='true'] { opacity: 1; }
+@media (hover: none) { .fnc-pane-max { opacity: 0.7; } }
+.fnc-pane-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-bottom: 1px solid var(--fnc-border);
+}
+.fnc-pane-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  height: 30px;
+  padding: 0 10px 0 6px;
+  border-radius: var(--fnc-radius);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fnc-text-2);
+  white-space: nowrap;
+}
+.fnc-pane-tab small { font-size: 12px; font-weight: 400; color: var(--fnc-text-2); }
+.fnc-pane-tab[aria-selected='true'] { background: var(--fnc-surface); color: var(--fnc-text); }
+.fnc-pane-tab-num {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  background: var(--fnc-surface);
+  font-size: 11px;
+}
+.fnc-pane-tab[aria-selected='true'] .fnc-pane-tab-num { background: var(--fnc-accent); color: #fff; }
+.fnc-layout-menu { min-width: 0; gap: 2px; padding: 8px; }
+.fnc-layout-row { display: flex; align-items: center; gap: 2px; }
+.fnc-layout-count { width: 16px; flex: none; font-size: 12px; color: var(--fnc-text-2); text-align: center; }
+.fnc-layout-opt {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 32px;
+  border-radius: var(--fnc-radius);
+  color: var(--fnc-text-2);
+}
+.fnc-layout-opt:hover { background: var(--fnc-surface); color: var(--fnc-text); }
+.fnc-layout-opt[aria-checked='true'] { background: var(--fnc-surface); color: var(--fnc-accent); }
+.fnc-sync-menu { min-width: 220px; }
+.fnc-menu-title { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; font-size: 13px; font-weight: 600; color: var(--fnc-text); }
+.fnc-menu-title small { font-size: 12px; font-weight: 400; color: var(--fnc-text-2); }
+.fnc-sync-item { justify-content: space-between; }
+.fnc-sync-item[aria-checked='true'] { background: none; color: var(--fnc-text); }
+.fnc-sync-item:hover { background: var(--fnc-surface); }
+.fnc-sync-item .fnc-switch { display: inline-block; transform: scale(0.8); transform-origin: right center; }
+.fnc-switch[data-on='true'] { background: var(--fnc-accent); }
+.fnc-switch[data-on='true']::after { transform: translateX(16px); }
+.fnc-btn-sync[aria-pressed='true'] { color: var(--fnc-accent); }
+
 /* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @media (max-width: 640px) {
-  .fnc-toolbar { padding: 0 4px; }
+  .fnc-toolbar { padding: 0 4px; gap: 2px; }
+  .fnc-toolbar .fnc-btn { width: 32px; height: 32px; }
+  .fnc-toolbar .fnc-btn-wide, .fnc-toolbar .fnc-btn-label { width: auto; padding: 0 6px; }
+  .fnc-toolbar .fnc-sep { margin: 0 2px; }
   .fnc-symbol { max-width: 140px; padding: 0 8px 0 6px; }
+  /* Logo only on phones; the name is in the chart legend right below. */
+  .fnc-toolbar .fnc-symbol:has(.fnc-avatar) :is(.fnc-symbol-name, .fnc-icon) { display: none; }
   .fnc-chip { padding: 0 8px; }
   .fnc-btn-screenshot { display: none; }
   .fnc-btn-label span { display: none; }
+  .fnc-btn-sync { display: none; }
   .fnc-intervals { display: none; }
   .fnc-interval-current { display: inline; }
   .fnc-interval-menu { left: auto; right: -40px; }
@@ -2715,7 +3064,7 @@ var CSS = (
   .fnc-dialog.fnc-search-dialog { width: 100%; height: 100%; }
   .fnc-sr-footer, .fnc-sr-side, .fnc-hide-mobile, .fnc-sr-spark { display: none; }
   /* The interval button must stay whole; the symbol name truncates instead. */
-  .fnc-symbol { flex: 0 1 auto; min-width: 0; }
+  .fnc-symbol { flex: 0 1 auto; min-width: 36px; }
   /* MA rows wrap to two lines: [label \u2713 color width \xD7] / [source period] */
   .fnc-rows .fnc-row { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--fnc-border); }
   /* Basis = row \u2212 indent(52) \u2212 gap(8) \u2212 period(72): too wide for line 1, so it always wraps. */
@@ -2734,21 +3083,7 @@ function injectStyles(doc = document) {
   doc.head.appendChild(style);
 }
 
-// src/trading-chart.tsx
-var DEFAULT_INTERVAL_GROUPS = [
-  { id: "minutes", intervals: ["1", "5", "15", "30"] },
-  { id: "hours", intervals: ["60", "240"] },
-  { id: "days", intervals: ["1D", "1W", "1M", "3M", "6M", "12M"] }
-];
-var DEFAULT_FAVORITE_INTERVALS = ["1", "5", "15", "60", "240", "1D"];
-var stockLike = (i3) => i3.type === "stock" || i3.type === "etf" || i3.type === "index";
-var DEFAULT_SEARCH_CATEGORIES = [
-  { id: "all", label: { ko: "\uC804\uCCB4", en: "All" }, match: () => true },
-  { id: "kr-stock", label: { ko: "\uAD6D\uB0B4\uC8FC\uC2DD", en: "KR stocks" }, match: (i3) => stockLike(i3) && i3.country === "KR" },
-  { id: "global-stock", label: { ko: "\uD574\uC678\uC8FC\uC2DD", en: "Global stocks" }, match: (i3) => stockLike(i3) && i3.country !== "KR" },
-  { id: "crypto", label: { ko: "\uCF54\uC778", en: "Crypto" }, match: (i3) => i3.type === "crypto" },
-  { id: "futures", label: { ko: "\uC120\uBB3C", en: "Futures" }, match: (i3) => i3.type === "futures" }
-];
+// src/shell.ts
 var THEME_VARS = {
   background: "--fnc-bg",
   surface: "--fnc-surface",
@@ -2767,37 +3102,19 @@ function applyThemeVars(el, theme) {
   el.style.setProperty("--fnc-radius", `${theme.radius}px`);
 }
 function div(className, parent) {
-  const el = document.createElement("div");
-  el.className = className;
-  parent?.appendChild(el);
-  return el;
-}
-function createTradingChart(container, options) {
-  const {
-    datafeed,
-    symbol,
-    resolution = "1D",
-    intervalGroups = DEFAULT_INTERVAL_GROUPS,
-    favoriteIntervals,
-    onFavoriteIntervalsChange,
-    searchCategories = DEFAULT_SEARCH_CATEGORIES,
-    storageKey = "funnest-charts",
-    searchHotkey = true,
-    symbolLogo = true,
-    drawingToolbar = true,
-    chartType = "candles",
-    attribution = true,
-    colorScheme = "system",
-    ...chartOptions
-  } = options;
-  const locale = chartOptions.locale ?? "ko";
-  const displayTimezone = chartOptions.displayTimezone ?? (locale === "ko" ? "Asia/Seoul" : Intl.DateTimeFormat().resolvedOptions().timeZone);
-  const storage = createStorage(storageKey);
+  const el = document.createElement("div");
+  el.className = className;
+  parent?.appendChild(el);
+  return el;
+}
+function createShell(container, options) {
   injectStyles(container.ownerDocument);
+  const storage = createStorage(options.storageKey);
   const win = container.ownerDocument.defaultView;
   const darkQuery = win?.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
-  let scheme = colorScheme;
-  let themePatch = { ...chartOptions.theme };
+  let scheme = options.colorScheme;
+  let themePatch = { ...options.theme };
+  let panes = () => [];
   const isDark = () => scheme === "system" ? !!darkQuery?.matches : scheme === "dark";
   const resolveTheme = () => ({ ...isDark() ? darkTheme : lightTheme, ...themePatch });
   let theme = resolveTheme();
@@ -2813,33 +3130,138 @@ function createTradingChart(container, options) {
     toolbar: div("fnc-slot fnc-slot-toolbar"),
     toolbarEnd: div("fnc-slot fnc-slot-toolbar-end"),
     belowToolbar: div("fnc-slot fnc-slot-below-toolbar", root),
+    bottom: div("fnc-slot fnc-slot-bottom"),
     footer: div("fnc-slot fnc-slot-footer")
   };
   const body = div("fnc-body", root);
-  const drawbarHost = drawingToolbar ? div("fnc-drawbar-host", body) : null;
-  const stage = div("fnc-stage", body);
-  const chartHost = div("fnc-chart-host", stage);
-  const overlayHost = div("fnc-overlay", stage);
+  const drawbarHost = options.drawingToolbar ? div("fnc-drawbar-host", body) : null;
+  const main = div("fnc-main", body);
+  main.appendChild(slots.bottom);
   root.appendChild(slots.footer);
-  const chart = createChart(chartHost, { ...chartOptions, theme, datafeed, displayTimezone });
   const refreshScheme = () => {
     theme = resolveTheme();
     applyScheme();
-    chart.setTheme(theme);
+    for (const p3 of panes()) p3.chart.setTheme(theme);
   };
   const onSchemeChange = () => scheme === "system" && refreshScheme();
   darkQuery?.addEventListener?.("change", onSchemeChange);
-  chart.setChartType(chartType);
+  let favoriteIntervals = storage.get("favorite-intervals", [...options.favoriteIntervals]);
+  let drawbarCollapsed = storage.get("drawbar-collapsed", false);
+  const broadcast = (patch) => {
+    for (const p3 of panes()) p3.store.set(patch);
+  };
+  const isNativeFullscreen = () => document.fullscreenElement === root;
+  const isFullscreen = () => isNativeFullscreen() || root.classList.contains("fnc-pseudo-fullscreen");
+  const onFullscreenChange = () => broadcast({ fullscreen: isFullscreen() });
+  document.addEventListener("fullscreenchange", onFullscreenChange);
+  const pseudo = (on) => {
+    root.classList.toggle("fnc-pseudo-fullscreen", on);
+    onFullscreenChange();
+  };
+  return {
+    root,
+    toolbarHost,
+    body,
+    drawbarHost,
+    main,
+    slots,
+    storage,
+    theme: () => theme,
+    sharedState: () => ({ fullscreen: isFullscreen(), favoriteIntervals, drawbarCollapsed }),
+    setPanes: (get) => {
+      panes = get;
+    },
+    setTheme: (patch) => {
+      themePatch = { ...themePatch, ...patch };
+      refreshScheme();
+    },
+    setColorScheme: (next) => {
+      scheme = next;
+      refreshScheme();
+    },
+    isFullscreen,
+    toggleFullscreen: () => {
+      if (isNativeFullscreen()) void document.exitFullscreen();
+      else if (root.classList.contains("fnc-pseudo-fullscreen")) pseudo(false);
+      else if (root.requestFullscreen && document.fullscreenEnabled) root.requestFullscreen().catch(() => pseudo(true));
+      else pseudo(true);
+    },
+    setDrawbarCollapsed: (collapsed) => {
+      drawbarCollapsed = collapsed;
+      storage.set("drawbar-collapsed", collapsed);
+      broadcast({ drawbarCollapsed });
+    },
+    toggleFavoriteInterval: (res) => {
+      favoriteIntervals = favoriteIntervals.includes(res) ? favoriteIntervals.filter((r3) => r3 !== res) : [...favoriteIntervals, res];
+      storage.set("favorite-intervals", favoriteIntervals);
+      broadcast({ favoriteIntervals });
+      options.onFavoriteIntervalsChange?.(favoriteIntervals);
+    },
+    destroy: () => {
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+      darkQuery?.removeEventListener?.("change", onSchemeChange);
+      if (isNativeFullscreen()) void document.exitFullscreen();
+      root.remove();
+    }
+  };
+}
+function bindWidgetKeys(shell, active, searchHotkey, extra) {
+  const { root } = shell;
+  const onKeyDown = (e3) => {
+    const pane = active();
+    if (!pane) return;
+    const s3 = pane.store.get();
+    if (searchHotkey && (e3.ctrlKey || e3.metaKey) && e3.key.toLowerCase() === "k" && pane.canSearch && !s3.dialog) {
+      e3.preventDefault();
+      pane.store.set({ searchOpen: true });
+      return;
+    }
+    if (e3.key === "Escape" && !e3.defaultPrevented && (s3.searchOpen || s3.dialog)) {
+      e3.preventDefault();
+      pane.store.set(s3.searchOpen ? { searchOpen: false } : { dialog: null });
+      return;
+    }
+    if (e3.key === "Escape" && root.classList.contains("fnc-pseudo-fullscreen") && !s3.searchOpen && !s3.dialog) {
+      shell.toggleFullscreen();
+      return;
+    }
+    if (extra?.(e3)) e3.preventDefault();
+  };
+  const onKeyUp = (e3) => {
+    const pane = active();
+    if (!pane) return;
+    const s3 = pane.store.get();
+    if (e3.key === "Escape" && (s3.searchOpen || s3.dialog)) pane.store.set(s3.searchOpen ? { searchOpen: false } : { dialog: null });
+  };
+  document.addEventListener("keydown", onKeyDown);
+  document.addEventListener("keyup", onKeyUp);
+  return () => {
+    document.removeEventListener("keydown", onKeyDown);
+    document.removeEventListener("keyup", onKeyUp);
+  };
+}
+
+// src/pane.tsx
+function createPane(shell, config) {
+  const stage = div("fnc-stage");
+  const chartHost = div("fnc-chart-host", stage);
+  const overlayHost = div("fnc-overlay", stage);
+  const chart = createChart(chartHost, {
+    ...config.chartOptions,
+    theme: shell.theme(),
+    datafeed: config.datafeed,
+    displayTimezone: config.displayTimezone
+  });
+  chart.setChartType(config.chartType);
   const store = new Store({
-    locale,
+    locale: config.chartOptions.locale ?? "ko",
     symbol: null,
-    resolution,
+    resolution: config.resolution,
     loading: false,
     layout: chart.layout,
     atRealtime: true,
-    fullscreen: false,
     searchOpen: false,
-    chartType,
+    chartType: config.chartType,
     drawingTool: null,
     selection: null,
     drawingCount: 0,
@@ -2847,12 +3269,11 @@ function createTradingChart(container, options) {
     magnet: chart.magnetEnabled,
     indicators: chart.getIndicators(),
     dialog: null,
-    favoriteIntervals: storage.get("favorite-intervals", [...favoriteIntervals ?? DEFAULT_FAVORITE_INTERVALS]),
-    drawbarCollapsed: storage.get("drawbar-collapsed", false)
+    ...shell.sharedState()
   });
   const syncRealtime = () => store.set({ atRealtime: chart.isAtRealtime() });
   const offs = [
-    chart.on("symbolChange", (info) => store.set({ symbol: info, resolution: chart.currentResolution ?? resolution })),
+    chart.on("symbolChange", (info) => store.set({ symbol: info, resolution: chart.currentResolution ?? store.get().resolution })),
     chart.on("loadingChange", (loading) => store.set({ loading })),
     chart.on("layoutChange", (layout) => store.set({ layout })),
     chart.on("visibleRangeChange", syncRealtime),
@@ -2862,7 +3283,7 @@ function createTradingChart(container, options) {
     chart.on("drawingsChange", (drawings) => store.set({ drawingCount: drawings.length })),
     chart.on("indicatorsChange", (indicators) => store.set({ indicators })),
     chart.on("magnetChange", (magnet) => store.set({ magnet })),
-    chart.on("chartTypeChange", (chartType2) => store.set({ chartType: chartType2 }))
+    chart.on("chartTypeChange", (chartType) => store.set({ chartType }))
   ];
   const load = (sym, res) => {
     store.set({ resolution: res });
@@ -2871,61 +3292,27 @@ function createTradingChart(container, options) {
       store.set({ loading: false });
     });
   };
-  const isNativeFullscreen = () => document.fullscreenElement === root;
-  const onFullscreenChange = () => store.set({ fullscreen: isNativeFullscreen() || root.classList.contains("fnc-pseudo-fullscreen") });
-  const onKeyDown = (e3) => {
-    const s3 = store.get();
-    if (searchHotkey && (e3.ctrlKey || e3.metaKey) && e3.key.toLowerCase() === "k" && datafeed.searchSymbols && !s3.dialog) {
-      e3.preventDefault();
-      store.set({ searchOpen: true });
-      return;
-    }
-    if (e3.key === "Escape" && !e3.defaultPrevented && (s3.searchOpen || s3.dialog)) {
-      e3.preventDefault();
-      store.set(s3.searchOpen ? { searchOpen: false } : { dialog: null });
-      return;
-    }
-    if (e3.key === "Escape" && root.classList.contains("fnc-pseudo-fullscreen") && !s3.searchOpen && !s3.dialog) {
-      root.classList.remove("fnc-pseudo-fullscreen");
-      onFullscreenChange();
-    }
-  };
-  const onKeyUp = (e3) => {
-    const s3 = store.get();
-    if (e3.key === "Escape" && (s3.searchOpen || s3.dialog)) store.set(s3.searchOpen ? { searchOpen: false } : { dialog: null });
-  };
-  document.addEventListener("fullscreenchange", onFullscreenChange);
-  document.addEventListener("keydown", onKeyDown);
-  document.addEventListener("keyup", onKeyUp);
   const ctx = {
-    root,
+    root: shell.root,
     chart,
-    datafeed,
+    datafeed: config.datafeed,
     store,
-    storage,
-    intervalGroups,
-    searchCategories,
-    displayTimezone,
-    showLogo: symbolLogo,
-    drawingToolbar,
-    attribution,
-    slots,
-    setDrawbarCollapsed: (collapsed) => {
-      store.set({ drawbarCollapsed: collapsed });
-      storage.set("drawbar-collapsed", collapsed);
-    },
+    storage: shell.storage,
+    intervalGroups: config.intervalGroups,
+    searchCategories: config.searchCategories,
+    displayTimezone: config.displayTimezone,
+    showLogo: config.symbolLogo,
+    drawingToolbar: config.drawingToolbar,
+    attribution: config.attribution,
+    slots: shell.slots,
+    multi: config.multi,
+    setDrawbarCollapsed: shell.setDrawbarCollapsed,
     selectSymbol: (sym) => void load(sym, store.get().resolution),
     selectResolution: (res) => {
       const current = store.get().symbol;
       if (current) void load(current.symbol, res);
     },
-    toggleFavoriteInterval: (res) => {
-      const current = store.get().favoriteIntervals;
-      const next = current.includes(res) ? current.filter((r3) => r3 !== res) : [...current, res];
-      store.set({ favoriteIntervals: next });
-      storage.set("favorite-intervals", next);
-      onFavoriteIntervalsChange?.(next);
-    },
+    toggleFavoriteInterval: shell.toggleFavoriteInterval,
     setSearchOpen: (open) => store.set({ searchOpen: open }),
     screenshot: () => {
       const s3 = store.get();
@@ -2938,61 +3325,491 @@ function createTradingChart(container, options) {
         setTimeout(() => URL.revokeObjectURL(a4.href), 1e3);
       });
     },
-    toggleFullscreen: () => {
-      if (isNativeFullscreen()) {
-        void document.exitFullscreen();
-      } else if (root.classList.contains("fnc-pseudo-fullscreen")) {
-        root.classList.remove("fnc-pseudo-fullscreen");
-        onFullscreenChange();
-      } else if (root.requestFullscreen && document.fullscreenEnabled) {
-        root.requestFullscreen().catch(() => {
-          root.classList.add("fnc-pseudo-fullscreen");
-          onFullscreenChange();
-        });
-      } else {
-        root.classList.add("fnc-pseudo-fullscreen");
-        onFullscreenChange();
-      }
-    }
+    toggleFullscreen: shell.toggleFullscreen
   };
-  Q(/* @__PURE__ */ a2(Toolbar, { ctx }), toolbarHost);
   Q(/* @__PURE__ */ a2(Overlay, { ctx }), overlayHost);
-  if (drawbarHost) Q(/* @__PURE__ */ a2(DrawingToolbar, { ctx }), drawbarHost);
-  void load(symbol, resolution);
   return {
+    stage,
     chart,
-    slots,
-    setSymbol: (sym, res) => load(sym, res ?? store.get().resolution),
+    store,
+    ctx,
+    canSearch: typeof config.datafeed.searchSymbols === "function",
+    load,
+    destroy: () => {
+      offs.forEach((off) => off());
+      Q(null, overlayHost);
+      chart.destroy();
+      stage.remove();
+    }
+  };
+}
+
+// src/trading-chart.tsx
+var DEFAULT_INTERVAL_GROUPS = [
+  { id: "minutes", intervals: ["1", "5", "15", "30"] },
+  { id: "hours", intervals: ["60", "240"] },
+  { id: "days", intervals: ["1D", "1W", "1M", "3M", "6M", "12M"] }
+];
+var DEFAULT_FAVORITE_INTERVALS = ["1", "5", "15", "60", "240", "1D"];
+var stockLike = (i3) => i3.type === "stock" || i3.type === "etf" || i3.type === "index";
+var DEFAULT_SEARCH_CATEGORIES = [
+  { id: "all", label: { ko: "\uC804\uCCB4", en: "All" }, match: () => true },
+  { id: "kr-stock", label: { ko: "\uAD6D\uB0B4\uC8FC\uC2DD", en: "KR stocks" }, match: (i3) => stockLike(i3) && i3.country === "KR" },
+  { id: "global-stock", label: { ko: "\uD574\uC678\uC8FC\uC2DD", en: "Global stocks" }, match: (i3) => stockLike(i3) && i3.country !== "KR" },
+  { id: "crypto", label: { ko: "\uCF54\uC778", en: "Crypto" }, match: (i3) => i3.type === "crypto" },
+  { id: "futures", label: { ko: "\uC120\uBB3C", en: "Futures" }, match: (i3) => i3.type === "futures" }
+];
+function defaultDisplayTimezone(locale, explicit) {
+  return explicit ?? (locale === "ko" ? "Asia/Seoul" : Intl.DateTimeFormat().resolvedOptions().timeZone);
+}
+function createTradingChart(container, options) {
+  const {
+    datafeed,
+    symbol,
+    resolution = "1D",
+    intervalGroups = DEFAULT_INTERVAL_GROUPS,
+    favoriteIntervals,
+    onFavoriteIntervalsChange,
+    searchCategories = DEFAULT_SEARCH_CATEGORIES,
+    storageKey = "funnest-charts",
+    searchHotkey = true,
+    symbolLogo = true,
+    drawingToolbar = true,
+    chartType = "candles",
+    attribution = true,
+    colorScheme = "system",
+    theme,
+    ...chartOptions
+  } = options;
+  const displayTimezone = defaultDisplayTimezone(chartOptions.locale ?? "ko", chartOptions.displayTimezone);
+  const shell = createShell(container, {
+    colorScheme,
+    theme,
+    storageKey,
+    drawingToolbar,
+    favoriteIntervals: favoriteIntervals ?? DEFAULT_FAVORITE_INTERVALS,
+    onFavoriteIntervalsChange
+  });
+  const pane = createPane(shell, {
+    datafeed,
+    chartOptions,
+    displayTimezone,
+    resolution,
+    chartType,
+    intervalGroups,
+    searchCategories,
+    symbolLogo,
+    drawingToolbar,
+    attribution
+  });
+  shell.main.insertBefore(pane.stage, shell.slots.bottom);
+  shell.setPanes(() => [pane]);
+  const unbindKeys = bindWidgetKeys(shell, () => pane, searchHotkey);
+  Q(/* @__PURE__ */ a2(Toolbar, { ctx: pane.ctx }), shell.toolbarHost);
+  if (shell.drawbarHost) Q(/* @__PURE__ */ a2(DrawingToolbar, { ctx: pane.ctx }), shell.drawbarHost);
+  void pane.load(symbol, resolution);
+  return {
+    chart: pane.chart,
+    slots: shell.slots,
+    setSymbol: (sym, res) => pane.load(sym, res ?? pane.store.get().resolution),
     setResolution: (res) => {
-      const current = store.get().symbol;
-      return current ? load(current.symbol, res) : Promise.resolve();
+      const current = pane.store.get().symbol;
+      return current ? pane.load(current.symbol, res) : Promise.resolve();
     },
-    setLocale: (locale2) => {
-      chart.setLocale(locale2);
-      store.set({ locale: locale2 });
+    setLocale: (locale) => {
+      pane.chart.setLocale(locale);
+      pane.store.set({ locale });
     },
-    save: () => chart.save(),
-    load: (state) => chart.load(state),
-    setTheme: (patch) => {
-      themePatch = { ...themePatch, ...patch };
-      refreshScheme();
+    save: () => pane.chart.save(),
+    load: (state) => pane.chart.load(state),
+    setTheme: shell.setTheme,
+    setColorScheme: shell.setColorScheme,
+    destroy: () => {
+      unbindKeys();
+      Q(null, shell.toolbarHost);
+      if (shell.drawbarHost) Q(null, shell.drawbarHost);
+      pane.destroy();
+      shell.destroy();
+    }
+  };
+}
+
+// src/multi-chart.tsx
+import { parseChartState } from "@funnest/charts";
+var DEFAULT_SYNC = { crosshair: true, time: false, symbol: false, interval: false };
+function PaneTab({ pane, index, active, onSelect }) {
+  const s3 = useStore(pane.store);
+  const t3 = STRINGS[s3.locale];
+  return /* @__PURE__ */ a2("button", { class: "fnc-pane-tab", role: "tab", "aria-selected": active, onClick: onSelect, children: [
+    /* @__PURE__ */ a2("span", { class: "fnc-pane-tab-num", children: index + 1 }),
+    s3.symbol?.name ?? `${t3.pane} ${index + 1}`,
+    /* @__PURE__ */ a2("small", { children: resolutionLabel(s3.resolution, s3.locale) })
+  ] });
+}
+function PaneTabs({ multi, panes }) {
+  const m3 = useStore(multi.store);
+  const visible = panes().slice(0, paneCount(LAYOUTS[m3.layout]));
+  if (!m3.narrow || visible.length < 2) return null;
+  return /* @__PURE__ */ a2("div", { class: "fnc-pane-tabs", role: "tablist", children: visible.map((p3, i3) => /* @__PURE__ */ a2(PaneTab, { pane: p3, index: i3, active: i3 === m3.active, onSelect: () => multi.activate(i3) })) });
+}
+function createMultiChart(container, options) {
+  const {
+    datafeed,
+    panes: paneSpecs,
+    layout: initialLayout = "1",
+    sync: initialSync,
+    narrowWidth = 640,
+    resolution = "1D",
+    intervalGroups = DEFAULT_INTERVAL_GROUPS,
+    favoriteIntervals,
+    onFavoriteIntervalsChange,
+    searchCategories = DEFAULT_SEARCH_CATEGORIES,
+    storageKey = "funnest-charts",
+    searchHotkey = true,
+    symbolLogo = true,
+    drawingToolbar = true,
+    chartType = "candles",
+    attribution = true,
+    colorScheme = "system",
+    theme,
+    ...chartOptions
+  } = options;
+  if (paneSpecs.length === 0) throw new Error("funnest-charts: createMultiChart needs at least one pane");
+  const displayTimezone = defaultDisplayTimezone(chartOptions.locale ?? "ko", chartOptions.displayTimezone);
+  const shell = createShell(container, {
+    colorScheme,
+    theme,
+    storageKey,
+    drawingToolbar,
+    favoriteIntervals: favoriteIntervals ?? DEFAULT_FAVORITE_INTERVALS,
+    onFavoriteIntervalsChange
+  });
+  shell.root.classList.add("fnc-multi");
+  const tabsHost = div("fnc-pane-tabs-host");
+  shell.root.insertBefore(tabsHost, shell.body);
+  const grid = div("fnc-grid");
+  shell.main.insertBefore(grid, shell.slots.bottom);
+  const parking = div("fnc-parking", shell.root);
+  const listeners = /* @__PURE__ */ new Map();
+  const emit = (event, payload) => {
+    for (const l3 of listeners.get(event) ?? []) l3(payload);
+  };
+  let stateQueued = false;
+  const queueState = () => {
+    if (stateQueued) return;
+    stateQueued = true;
+    queueMicrotask(() => {
+      stateQueued = false;
+      emit("stateChange", void 0);
+    });
+  };
+  const store = new Store({
+    layout: isLayoutId(initialLayout) ? initialLayout : "1",
+    sync: { ...DEFAULT_SYNC, ...initialSync },
+    active: 0,
+    maximized: null,
+    narrow: false
+  });
+  let sizes = {};
+  const panes = [];
+  const cells = [];
+  let driver = -1;
+  const visibleCount = () => Math.min(paneCount(LAYOUTS[store.get().layout]), MAX_PANES);
+  const visible = () => panes.slice(0, visibleCount());
+  const controls = {
+    store,
+    setLayout: (layout) => setLayout(layout),
+    setSync: (patch) => setSync(patch),
+    activate: (index) => activate(index),
+    toggleMaximize: (index) => toggleMaximize(index)
+  };
+  function makePane(index, spec) {
+    const pane = createPane(shell, {
+      datafeed,
+      chartOptions,
+      displayTimezone,
+      resolution: spec.resolution ?? resolution,
+      chartType,
+      intervalGroups,
+      searchCategories,
+      symbolLogo,
+      drawingToolbar,
+      // One badge for the whole widget, not one per pane.
+      attribution: attribution && index === 0,
+      multi: controls
+    });
+    const cell = div("fnc-pane");
+    cell.appendChild(pane.stage);
+    const touch = () => {
+      driver = panes.indexOf(pane);
+      if (driver >= 0 && driver !== store.get().active) activate(driver);
+    };
+    cell.addEventListener("pointerdown", touch, true);
+    cell.addEventListener("wheel", () => driver = panes.indexOf(pane), { capture: true, passive: true });
+    const c3 = pane.chart;
+    c3.on("crosshairMove", (info) => {
+      if (!store.get().sync.crosshair || info?.source === "sync") return;
+      for (const other of visible()) if (other !== pane) other.chart.setSyncedCrosshair(info ? info.time : null);
+    });
+    c3.on("visibleRangeChange", () => {
+      if (!store.get().sync.time || panes[driver] !== pane) return;
+      broadcastTime(pane);
+    });
+    c3.on("symbolChange", (info) => {
+      queueState();
+      if (panes[store.get().active] !== pane) return;
+      const res = c3.currentResolution;
+      const { sync } = store.get();
+      if (!sync.symbol && !sync.interval) return;
+      for (const other of visible()) {
+        if (other === pane) continue;
+        const sym = sync.symbol ? info.symbol : other.chart.symbolInfo?.symbol;
+        const r3 = sync.interval && res ? res : other.chart.currentResolution ?? other.store.get().resolution;
+        if (sym && (sym !== other.chart.symbolInfo?.symbol || r3 !== other.chart.currentResolution)) void other.load(sym, r3);
+      }
+    });
+    c3.on("stateChange", queueState);
+    panes[index] = pane;
+    cells[index] = cell;
+    void pane.load(spec.symbol, spec.resolution ?? resolution);
+    return pane;
+  }
+  function broadcastTime(from) {
+    const range = from.chart.getVisibleTimeRange();
+    if (!range) return;
+    const res = from.chart.currentResolution;
+    for (const other of visible()) {
+      if (other !== from && other.chart.currentResolution === res) other.chart.setVisibleTimeRange(range);
+    }
+  }
+  function ensurePanes(count) {
+    for (let i3 = panes.length; i3 < count; i3++) {
+      const src = panes[store.get().active] ?? panes[0];
+      const spec = paneSpecs[i3] ?? {
+        symbol: src?.chart.symbolInfo?.symbol ?? paneSpecs[0].symbol,
+        resolution: src?.chart.currentResolution ?? src?.store.get().resolution ?? resolution
+      };
+      makePane(i3, spec);
+    }
+  }
+  function buildNode(node, path, layout) {
+    if (typeof node === "number") return cells[node];
+    const box = div(`fnc-split fnc-split-${node.dir}`);
+    const key = `${layout}:${path}`;
+    const weights = sizesFor(sizes, key, node.children.length);
+    const children = node.children.map((child, i3) => {
+      const el = buildNode(child, path ? `${path}.${i3}` : String(i3), layout);
+      el.style.flex = `${weights[i3]} 1 0px`;
+      return el;
+    });
+    children.forEach((el, i3) => {
+      box.appendChild(el);
+      if (i3 < children.length - 1) box.appendChild(makeSplitter(box, node.dir, key, i3, children));
+    });
+    return box;
+  }
+  function makeSplitter(box, dir, key, i3, children) {
+    const bar = div(`fnc-splitter fnc-splitter-${dir}`);
+    bar.setAttribute("role", "separator");
+    bar.setAttribute("aria-orientation", dir === "row" ? "vertical" : "horizontal");
+    let last = null;
+    const apply = (next) => {
+      sizes = { ...sizes, [key]: next };
+      next.forEach((w3, j2) => children[j2].style.flex = `${w3} 1 0px`);
+      queueState();
+    };
+    bar.addEventListener("pointerdown", (e3) => {
+      bar.setPointerCapture(e3.pointerId);
+      last = dir === "row" ? e3.clientX : e3.clientY;
+      shell.root.classList.add(dir === "row" ? "fnc-resizing-x" : "fnc-resizing-y");
+    });
+    bar.addEventListener("pointermove", (e3) => {
+      if (last === null) return;
+      const pos = dir === "row" ? e3.clientX : e3.clientY;
+      const length = dir === "row" ? box.clientWidth : box.clientHeight;
+      if (length <= 0) return;
+      apply(resizePair(sizesFor(sizes, key, children.length), i3, (pos - last) / length));
+      last = pos;
+    });
+    const end = () => {
+      last = null;
+      shell.root.classList.remove("fnc-resizing-x", "fnc-resizing-y");
+    };
+    bar.addEventListener("pointerup", end);
+    bar.addEventListener("pointercancel", end);
+    bar.addEventListener("dblclick", () => apply(Array(children.length).fill(1)));
+    return bar;
+  }
+  function renderGrid() {
+    const s3 = store.get();
+    const count = visibleCount();
+    for (let i3 = 0; i3 < panes.length; i3++) {
+      if (i3 >= count) parking.appendChild(cells[i3]);
+      cells[i3].classList.toggle("fnc-pane-active", i3 === s3.active && count > 1);
+    }
+    const single = s3.maximized ?? (s3.narrow ? s3.active : null);
+    const top = single !== null && single < count ? cells[single] : buildNode(LAYOUTS[s3.layout], "", s3.layout);
+    top.style.flex = "1 1 0px";
+    grid.replaceChildren(top);
+    shell.root.classList.toggle("fnc-split-on", count > 1 && single === null);
+  }
+  function bindToolbar() {
+    const pane = panes[store.get().active];
+    Q(/* @__PURE__ */ a2(Toolbar, { ctx: pane.ctx }, store.get().active), shell.toolbarHost);
+    if (shell.drawbarHost) Q(/* @__PURE__ */ a2(DrawingToolbar, { ctx: pane.ctx }, store.get().active), shell.drawbarHost);
+  }
+  function activate(index) {
+    const s3 = store.get();
+    if (index < 0 || index >= visibleCount() || index === s3.active) return;
+    panes[s3.active]?.chart.setDrawingTool(null);
+    store.set({ active: index, maximized: s3.maximized === null ? null : index });
+    bindToolbar();
+    renderGrid();
+    emit("activeChange", { index, chart: panes[index].chart });
+    queueState();
+  }
+  function setLayout(layout) {
+    if (!isLayoutId(layout)) return;
+    const count = paneCount(LAYOUTS[layout]);
+    ensurePanes(count);
+    const s3 = store.get();
+    for (const p3 of panes.slice(count)) p3.chart.setSyncedCrosshair(null);
+    store.set({ layout, maximized: null, active: Math.min(s3.active, count - 1) });
+    if (s3.active !== store.get().active) bindToolbar();
+    renderGrid();
+    emit("layoutChange", { layout, panes: count });
+    queueState();
+  }
+  function setSync(patch) {
+    const before = store.get().sync;
+    const sync = { ...before, ...patch };
+    store.set({ sync });
+    const active = panes[store.get().active];
+    if (!sync.crosshair) for (const p3 of panes) p3.chart.setSyncedCrosshair(null);
+    if (sync.time && !before.time) broadcastTime(active);
+    if (sync.symbol && !before.symbol || sync.interval && !before.interval) {
+      const info = active.chart.symbolInfo;
+      const res = active.chart.currentResolution;
+      for (const other of visible()) {
+        if (other === active || !info) continue;
+        const sym = sync.symbol ? info.symbol : other.chart.symbolInfo?.symbol ?? info.symbol;
+        const r3 = sync.interval && res ? res : other.chart.currentResolution ?? other.store.get().resolution;
+        if (sym !== other.chart.symbolInfo?.symbol || r3 !== other.chart.currentResolution) void other.load(sym, r3);
+      }
+    }
+    queueState();
+  }
+  function toggleMaximize(index) {
+    const s3 = store.get();
+    const target = index ?? s3.active;
+    if (s3.maximized !== null) store.set({ maximized: null });
+    else if (visibleCount() > 1) {
+      if (target !== s3.active) activate(target);
+      store.set({ maximized: target });
+    }
+    renderGrid();
+  }
+  makePane(0, paneSpecs[0]);
+  ensurePanes(Math.max(visibleCount(), Math.min(paneSpecs.length, MAX_PANES)));
+  shell.setPanes(() => panes);
+  bindToolbar();
+  Q(/* @__PURE__ */ a2(PaneTabs, { multi: controls, panes: () => panes }), tabsHost);
+  renderGrid();
+  const resize = new ResizeObserver(() => {
+    const narrow = shell.root.clientWidth > 0 && shell.root.clientWidth < narrowWidth;
+    if (narrow === store.get().narrow) return;
+    store.set({ narrow });
+    renderGrid();
+  });
+  resize.observe(shell.root);
+  const unbindKeys = bindWidgetKeys(
+    shell,
+    () => panes[store.get().active] ?? null,
+    searchHotkey,
+    (e3) => {
+      if (!e3.altKey || e3.ctrlKey || e3.metaKey) return false;
+      if (e3.key === "Enter") {
+        toggleMaximize();
+        return true;
+      }
+      const digit = /^Digit([1-8])$/.exec(e3.code)?.[1];
+      if (!digit) return false;
+      activate(Number(digit) - 1);
+      return true;
+    }
+  );
+  const save = () => {
+    const s3 = store.get();
+    return { version: 1, layout: s3.layout, sync: { ...s3.sync }, active: s3.active, sizes: { ...sizes }, panes: panes.map((p3) => p3.chart.save()) };
+  };
+  return {
+    slots: shell.slots,
+    get charts() {
+      return visible().map((p3) => p3.chart);
     },
-    setColorScheme: (next) => {
-      scheme = next;
-      refreshScheme();
+    get activeChart() {
+      return panes[store.get().active].chart;
+    },
+    get activeIndex() {
+      return store.get().active;
+    },
+    get layout() {
+      return store.get().layout;
+    },
+    get sync() {
+      return { ...store.get().sync };
+    },
+    setLayout,
+    setSync,
+    activate,
+    toggleMaximize,
+    setSymbol: (sym, res) => {
+      const pane = panes[store.get().active];
+      return pane.load(sym, res ?? pane.store.get().resolution);
+    },
+    setResolution: (res) => {
+      const pane = panes[store.get().active];
+      const current = pane.store.get().symbol;
+      return current ? pane.load(current.symbol, res) : Promise.resolve();
+    },
+    setLocale: (locale) => {
+      for (const p3 of panes) {
+        p3.chart.setLocale(locale);
+        p3.store.set({ locale });
+      }
+    },
+    setTheme: shell.setTheme,
+    setColorScheme: shell.setColorScheme,
+    save,
+    load: async (input) => {
+      const raw = input;
+      if (!raw || typeof raw !== "object" || raw.version !== 1 || !Array.isArray(raw.panes) || raw.panes.length === 0) {
+        throw new Error("funnest-charts: unsupported multi-chart state (expected version 1)");
+      }
+      const states = raw.panes.slice(0, MAX_PANES).map((p3) => parseChartState(p3));
+      sizes = raw.sizes && typeof raw.sizes === "object" ? { ...raw.sizes } : {};
+      const layout = isLayoutId(raw.layout) ? raw.layout : "1";
+      ensurePanes(Math.max(states.length, paneCount(LAYOUTS[layout])));
+      store.set({ sync: { ...DEFAULT_SYNC, ...raw.sync } });
+      setLayout(layout);
+      activate(Math.min(Math.max(0, Number(raw.active) || 0), visibleCount() - 1));
+      await Promise.all(states.map((state, i3) => panes[i3].chart.load(state)));
+    },
+    on: (event, listener) => {
+      let set = listeners.get(event);
+      if (!set) listeners.set(event, set = /* @__PURE__ */ new Set());
+      set.add(listener);
+      return () => set.delete(listener);
     },
     destroy: () => {
-      offs.forEach((off) => off());
-      document.removeEventListener("fullscreenchange", onFullscreenChange);
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("keyup", onKeyUp);
-      darkQuery?.removeEventListener?.("change", onSchemeChange);
-      if (isNativeFullscreen()) void document.exitFullscreen();
-      Q(null, toolbarHost);
-      Q(null, overlayHost);
-      if (drawbarHost) Q(null, drawbarHost);
-      chart.destroy();
-      root.remove();
+      unbindKeys();
+      resize.disconnect();
+      Q(null, shell.toolbarHost);
+      if (shell.drawbarHost) Q(null, shell.drawbarHost);
+      Q(null, tabsHost);
+      for (const p3 of panes) p3.destroy();
+      listeners.clear();
+      shell.destroy();
     }
   };
 }
@@ -3000,6 +3817,11 @@ export {
   DEFAULT_FAVORITE_INTERVALS,
   DEFAULT_INTERVAL_GROUPS,
   DEFAULT_SEARCH_CATEGORIES,
+  LAYOUTS,
+  LAYOUT_GROUPS,
+  MAX_PANES,
+  createMultiChart,
   createTradingChart,
+  paneCount,
   resolutionLabel
 };