@trdrs/quickcharts 1.0.1 → 1.2.0

package/dist/index.js

@@ -8949,24 +8949,52 @@ var OPERATOR_GLYPHS = {
 
 // src/ui/chrome/dialog.ts
 function openDialog(options) {
-  const scrim = h("div", { class: "qc-scrim qc-dialog-scrim" });
+  const scrim = h("div", { class: `qc-scrim qc-dialog-scrim${options.scrimClassName ? ` ${options.scrimClassName}` : ""}` });
   const box = h("div", { class: `qc-overlay qc-dialog${options.className ? ` ${options.className}` : ""}`, role: options.ariaRole ?? "dialog", "aria-modal": "true", "aria-label": options.label, "data-role": options.role });
   if (options.width) box.style.width = `${options.width}px`;
   stopPointer(box);
   scrim.appendChild(box);
+  if (options.exitMs) scrim.dataset.state = "opening";
   let isOpen = true;
   const previouslyFocused = document.activeElement;
   const escape = pushEscapeOwner();
   let untrack = () => void 0;
-  const close = () => {
-    if (!isOpen) return;
+  let removed = false;
+  let exitTimer = null;
+  const remove = () => {
+    if (removed) return;
+    removed = true;
+    if (exitTimer !== null) clearTimeout(exitTimer);
+    scrim.remove();
+    options.onClose?.();
+  };
+  const close = (closeOptions) => {
+    if (!isOpen) {
+      if (closeOptions?.animate === false) remove();
+      return;
+    }
     isOpen = false;
+    options.onClosing?.();
     escape.release();
     untrack();
     document.removeEventListener("keydown", onKey, true);
-    scrim.remove();
-    options.onClose?.();
     previouslyFocused?.focus?.();
+    const reduceMotion = document.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    if (closeOptions?.animate === false || !options.exitMs || reduceMotion) {
+      remove();
+      return;
+    }
+    scrim.dataset.state = "closing";
+    scrim.style.pointerEvents = "none";
+    box.inert = true;
+    box.removeAttribute("role");
+    box.removeAttribute("aria-modal");
+    box.setAttribute("aria-hidden", "true");
+    const onAnimationEnd = (event) => {
+      if (event.target === box) remove();
+    };
+    box.addEventListener("animationend", onAnimationEnd, { once: true });
+    exitTimer = setTimeout(remove, options.exitMs + 50);
   };
   const onKey = (event) => {
     if (event.key === "Escape" && ownsEscape(escape.token)) {
@@ -8998,6 +9026,10 @@ function openDialog(options) {
   const handle = { element: box, close, open: () => isOpen };
   options.build(box, handle);
   (layerFor(options.host) ?? options.host).appendChild(scrim);
+  if (options.exitMs) {
+    scrim.getBoundingClientRect();
+    scrim.dataset.state = "open";
+  }
   untrack = trackOverlay(options.host, close);
   document.addEventListener("keydown", onKey, true);
   const target = options.initialFocus?.(box) ?? focusables(box)[0] ?? null;
@@ -14974,6 +15006,7 @@ function mountChartLegend(container, strings, controls) {
       update(next) {
         chip = next;
         row2.dataset.qcHidden = String(chip.hidden);
+        row2.title = chip.description ?? "";
         rowMark.element.hidden = !chip.mark;
         if (!chip.mark) {
           dropMark?.();
@@ -15008,7 +15041,7 @@ function mountChartLegend(container, strings, controls) {
         if (chip.tone && !chip.hidden && !chip.note) value.dataset.qcTone = chip.tone;
         else delete value.dataset.qcTone;
         gear.hidden = !chip.hasInputs || !controls.onSettings;
-        nameButton(gear, strings.t("legend.indicatorSettings"));
+        nameButton(gear, chip.settingsLabel ?? strings.t("legend.indicatorSettings"));
         collapse.hidden = !chip.pane || !controls.onPaneOp || chip.hidden;
         collapse.replaceChildren(controls.icons.glyph(chip.collapsed ? ICONS.paneRestore : ICONS.paneCollapse, { size: 18 }));
         nameButton(collapse, strings.t(chip.collapsed ? "legend.restorePane" : "legend.collapsePane"));
@@ -15021,6 +15054,7 @@ function mountChartLegend(container, strings, controls) {
           eye.dataset.hidden = eyeState;
         }
         nameButton(eye, strings.t(chip.hidden ? "legend.showIndicator" : "legend.hideIndicator"));
+        eye.hidden = chip.hideable === false;
         remove.hidden = !chip.removable || !controls.onRemove;
         nameButton(remove, chip.removeLabel ?? strings.t("legend.removeCompare"));
       },
@@ -15566,6 +15600,7 @@ function openMarketStatus(anchor, deps) {
 
 // src/widget/legend.ts
 var COMPARE_ROW_PREFIX = "cmp:";
+var HOST_ROW_PREFIX = "host:";
 function barIndexAt(bars, time) {
   if (bars.length === 0) return -1;
   if (time === null) return bars.length - 1;
@@ -15594,10 +15629,12 @@ function attachLegendPlane(deps) {
       push: () => void 0,
       setHeader: () => void 0,
       setDot: () => void 0,
+      setHostRows: () => void 0,
       destroy: () => void 0
     };
   }
   let destroyed = false;
+  const hostRows = /* @__PURE__ */ new Map();
   const paneRemembered = /* @__PURE__ */ new Map();
   const paneKeys = () => {
     const keys = { 0: "main" };
@@ -15653,6 +15690,11 @@ function attachLegendPlane(deps) {
       }
     } : {},
     onSettings: (id, rect) => {
+      const host2 = hostRows.get(id);
+      if (host2) {
+        host2.onSettings?.();
+        return;
+      }
       if (deps.openIndicatorSettings(id)) return;
       const inst = deps.indicators.list().find((i) => i.id === id);
       if (!inst) return;
@@ -15723,7 +15765,21 @@ function attachLegendPlane(deps) {
         const remembered = paneRemembered.get(`study:${row2.id}`);
         return { ...row2, paneIndex, maximized: remembered !== void 0 && !row2.collapsed && (deps.chart.panes()[paneIndex]?.getHeight() ?? 0) > remembered };
       }),
-      ...(deps.compare?.chips(hovered) ?? []).map((row2) => ({ ...row2, paneIndex: deps.compare.handle.paneIndexOf(row2.id.slice(COMPARE_ROW_PREFIX.length)) ?? 0 }))
+      ...(deps.compare?.chips(hovered) ?? []).map((row2) => ({ ...row2, paneIndex: deps.compare.handle.paneIndexOf(row2.id.slice(COMPARE_ROW_PREFIX.length)) ?? 0 })),
+      ...[...hostRows].map(([id, row2]) => ({
+        id,
+        title: row2.title,
+        inputs: row2.inputs,
+        value: null,
+        note: row2.status,
+        description: row2.description,
+        settingsLabel: row2.settingsLabel,
+        hidden: false,
+        hideable: false,
+        removable: false,
+        hasInputs: !!row2.onSettings,
+        paneIndex: 0
+      }))
     ]);
     const tops = {};
     let top = 0;
@@ -15766,6 +15822,12 @@ function attachLegendPlane(deps) {
   };
   deps.chart.subscribeCrosshairMove(onCrosshair);
   return {
+    setHostRows(rows2) {
+      if (destroyed) return;
+      hostRows.clear();
+      for (const row2 of rows2) hostRows.set(`${HOST_ROW_PREFIX}${row2.id}`, { ...row2 });
+      paint();
+    },
     push() {
       paint();
     },
@@ -15791,6 +15853,7 @@ function attachLegendPlane(deps) {
     },
     destroy() {
       destroyed = true;
+      hostRows.clear();
       resize?.disconnect();
       observed.clear();
       deps.chart.unsubscribeCrosshairMove(onCrosshair);
@@ -16929,7 +16992,13 @@ function registerChartCommands(deps) {
     available: () => features.history && handle.history.canRedo(),
     execute: () => handle.history.redo()
   });
-  add({ id: "chart.indicators.open", scope: "chart", label: "chrome.indicators", available: () => ui.indicatorPicker, execute: () => deps.indicatorsOpen() });
+  add({
+    id: "chart.indicators.open",
+    scope: "chart",
+    label: "chrome.indicators",
+    available: () => ui.indicatorPicker,
+    execute: (arg) => deps.indicatorsOpen(arg && typeof arg === "object" && "collection" in arg && typeof arg.collection === "string" ? arg.collection : void 0)
+  });
   const isInstance = (arg) => !!arg && typeof arg === "object" && typeof arg.id === "string" && typeof arg.definition === "object";
   add({
     id: "chart.indicators.add",
@@ -18726,7 +18795,7 @@ function createChartInstance(deps) {
     level: () => menuLevel,
     formatter: () => symbolFormatter,
     compareOpen: (mode, changeFrom) => compare?.openDialog(mode, changeFrom),
-    indicatorsOpen: () => deps.doors.showIndicatorPicker(),
+    indicatorsOpen: (collection) => deps.doors.showIndicatorPicker(collection),
     symbolSearchOpen: () => deps.doors.openSearch({ mode: "search", chart: handle }),
     drawingVerbs: () => drawings2.verbs
   });
@@ -18773,6 +18842,7 @@ function createChartInstance(deps) {
   }
   return {
     handle,
+    setLegendRows: (rows2) => legend2.setHostRows(rows2),
     screenshot: () => chart.takeScreenshot(),
     repaintTheme() {
       applyLook();
@@ -20596,7 +20666,7 @@ function openIndicatorPicker(deps) {
   } catch {
   }
   let query = "";
-  let collection = "builtin";
+  let collection = deps.initialCollection === "favorites" || collections?.some((row2) => row2.id === deps.initialCollection) ? deps.initialCollection : "builtin";
   let generation = 0;
   let controller = null;
   let busy = false;
@@ -20909,6 +20979,7 @@ function buildSearchSurface(deps, box, frame) {
     markDisposers = [];
     for (const drop of drops) drop();
   };
+  let scopeMarkDisposer = null;
   const input = h("input", { type: "text", role: "combobox", class: "qc-search-input", "aria-label": t("search.placeholder"), placeholder: t("search.placeholder"), autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": "true", "aria-controls": listId, spellcheck: "false", value: query });
   const clear = button2({ label: t("search.clear"), icon: deps.icons.glyph(ICONS.clear, { size: 18 }), className: "qc-search-op", onClick: () => setQuery("") });
   const rule = compare ? null : h("span", { class: "qc-search-rule", "aria-hidden": "true" });
@@ -20948,25 +21019,37 @@ function buildSearchSurface(deps, box, frame) {
   const classes = compare ? null : deps.classes();
   let strip = null;
   const classChips = /* @__PURE__ */ new Map();
-  if (classes && classes.length > 0) {
+  const searchScope = deps.scope?.() ?? null;
+  if (classes && classes.length > 0 || searchScope) {
     strip = h("div", { class: "qc-search-classes", role: "group", "aria-label": t("search.classFilter") });
-    const all = [{ id: "", label: t("search.allClasses") }, ...classes.map((id) => ({ id, label: deps.classNames?.[id] ?? id }))];
-    for (const c of all) {
-      const chip = button2({
-        label: c.label,
-        text: c.label,
-        className: "qc-chip qc-search-class",
-        pressed: c.id === cls,
-        onClick: () => {
-          cls = c.id;
-          for (const [id, b] of classChips) b.setAttribute("aria-pressed", String(id === cls));
-          active = -1;
-          search2.search(serverQuery(), cls);
-          render();
-        }
-      });
-      classChips.set(c.id, chip);
-      strip.appendChild(chip);
+    if (classes && classes.length > 0) {
+      const all = [{ id: "", label: t("search.allClasses") }, ...classes.map((id) => ({ id, label: deps.classNames?.[id] ?? id }))];
+      for (const c of all) {
+        const chip = button2({
+          label: c.label,
+          text: c.label,
+          className: "qc-chip qc-search-class",
+          pressed: c.id === cls,
+          onClick: () => {
+            cls = c.id;
+            for (const [id, b] of classChips) b.setAttribute("aria-pressed", String(id === cls));
+            active = -1;
+            search2.search(serverQuery(), cls);
+            render();
+          }
+        });
+        classChips.set(c.id, chip);
+        strip.appendChild(chip);
+      }
+    }
+    if (searchScope) {
+      const mark = h("span", { class: "qc-search-scope-mark", "aria-hidden": "true" });
+      const drop = searchScope.mark?.({ host: mark, size: SOURCE_MARK_SIZE });
+      if (typeof drop === "function") {
+        mark.dataset.qcHost = "true";
+        scopeMarkDisposer = drop;
+      } else if (mark.childNodes.length === 0) mark.textContent = searchScope.label.charAt(0).toUpperCase();
+      strip.appendChild(h("span", { class: "qc-search-scope", "aria-label": searchScope.label }, mark, h("span", {}, searchScope.label)));
     }
   }
   const list = h("div", { class: "qc-search-list", role: "listbox", id: listId, "aria-label": t("search.results") });
@@ -21135,6 +21218,8 @@ function buildSearchSurface(deps, box, frame) {
   setDisabled(clear, false);
   return {
     teardown() {
+      scopeMarkDisposer?.();
+      scopeMarkDisposer = null;
       releaseMarks();
       search2.dispose();
       observer?.disconnect();
@@ -21150,6 +21235,8 @@ function openSearchDialog(deps) {
     host: deps.host,
     label: title,
     className: `qc-search-dialog qc-search-dialog--${mode}`,
+    scrimClassName: "qc-search-dialog-scrim",
+    exitMs: 140,
     // The compare family (compare, and a compare row's change-symbol) shares one role for a host
     // test to find; a symbol search, with or without a chart behind it, is the other.
     role: mode === "compare" || mode === "change-symbol" ? "compare-dialog" : "symbol-search",
@@ -21929,127 +22016,238 @@ var TOGGLE_ROWS = [
   { leaf: "grid", label: "settings.gridLines" },
   { leaf: "sessions", label: "settings.sessionShading" }
 ];
+var nextSettingsId = 0;
 function mountSettingsMenu(deps) {
   const t = () => deps.i18n.t;
-  let menu2 = null;
+  const settingsId = ++nextSettingsId;
+  let dialog = null;
+  let content = null;
+  let activePage = "appearance";
+  let committed = false;
+  let initial = null;
   const controls = [];
   const retireControls = () => {
     for (const control of controls) control.destroy();
     controls.length = 0;
   };
-  const trigger = button2({ label: t()("settings.menu"), icon: deps.icons.glyph(ICONS.settings), className: "qc-toolbar-button", onClick: () => toggleMenu(trigger, open2) });
+  const trigger = button2({
+    label: t()("settings.menu"),
+    icon: deps.icons.glyph(ICONS.settings),
+    className: "qc-toolbar-button",
+    onClick: () => {
+      if (dialog) {
+        if (dialog.open()) dialog.close();
+        return;
+      }
+      open2();
+    }
+  });
   trigger.setAttribute("aria-haspopup", "dialog");
   trigger.setAttribute("aria-expanded", "false");
   const apply = (partial) => {
     deps.commands.execute("chart.appearance.apply", { appearance: partial });
   };
+  const refresh = () => {
+    if (!dialog?.open() || !content) return;
+    retireControls();
+    content.replaceChildren();
+    buildContent(content);
+  };
+  const pageDefinitions = () => [
+    { id: "appearance", label: t()("settings.sectionAppearance"), icon: STYLE_ICONS.candles },
+    { id: "display", label: t()("settings.sectionDisplay"), icon: ICONS.template },
+    { id: "scale", label: t()("settings.sectionScale"), icon: ICONS.ruler },
+    ...deps.ui.settingsTheme ? [{ id: "theme", label: t()("settings.sectionTheme"), icon: ICONS.settings }] : []
+  ];
+  const showPage = (page, focus = false) => {
+    activePage = page;
+    refresh();
+    if (focus) content?.querySelector(`[data-settings-page="${page}"]`)?.focus();
+  };
+  const buildAppearancePage = (panel) => {
+    const appearance = activeChart(deps).appearance().appearance;
+    const canApply = deps.commands.available("chart.appearance.apply");
+    panel.appendChild(menuHeading(t()("settings.sectionAppearance")));
+    for (const row2 of COLOR_ROWS) {
+      const label2 = t()(row2.label);
+      const value = appearance[row2.leaf];
+      const control = createColorControl(t(), {
+        label: label2,
+        value,
+        opacity: readColor(value)?.alpha ?? 1,
+        disabled: !canApply,
+        closeOnPick: true,
+        onPick: (color2) => {
+          control.update(color2);
+          apply({ [row2.leaf]: color2 });
+        },
+        openPanel: (anchor, palette, onClosed) => openInlinePanel(anchor, palette, anchor.closest(".qc-settings-row") ?? anchor, onClosed)
+      });
+      controls.push(control);
+      panel.appendChild(fieldRow(label2, control.element, { className: "qc-settings-row" }));
+    }
+  };
+  const buildDisplayPage = (panel) => {
+    const appearance = activeChart(deps).appearance().appearance;
+    const canApply = deps.commands.available("chart.appearance.apply");
+    panel.appendChild(menuHeading(t()("settings.sectionDisplay")));
+    for (const row2 of TOGGLE_ROWS) {
+      panel.appendChild(switchRow({ label: t()(row2.label), checked: appearance[row2.leaf], disabled: !canApply, onChange: (on) => apply({ [row2.leaf]: on }) }));
+    }
+  };
+  const choice = (label2, checked, disabled, onSelect) => {
+    const row2 = h("button", {
+      type: "button",
+      class: "qc-chart-settings-choice",
+      role: "radio",
+      "aria-checked": String(checked),
+      disabled
+    }, h("span", { class: "qc-chart-settings-radio", "aria-hidden": "true" }), h("span", { class: "qc-chart-settings-choice-label" }, label2));
+    row2.addEventListener("click", onSelect);
+    return row2;
+  };
+  const buildScalePage = (panel) => {
+    const scale = activeChart(deps).scaleMode();
+    panel.appendChild(menuHeading(t()("settings.sectionScale")));
+    const group = h("div", { class: "qc-chart-settings-choices", role: "radiogroup", "aria-label": t()("settings.sectionScale") });
+    for (const option of SCALE_MODE_OPTIONS) {
+      const id = `chart.scale.${option.id}`;
+      group.appendChild(choice(commandLabel(deps, id), option.id === scale, option.id !== scale && !deps.commands.available(id), () => {
+        deps.commands.execute(id);
+        refresh();
+      }));
+    }
+    panel.appendChild(group);
+  };
+  const buildThemePage = (panel) => {
+    const mode = deps.widget.theme.mode();
+    panel.appendChild(menuHeading(t()("settings.sectionTheme")));
+    const group = h("div", { class: "qc-chart-settings-choices", role: "radiogroup", "aria-label": t()("settings.sectionTheme") });
+    for (const themeMode of THEME_MODES) {
+      const id = `widget.theme.${themeMode}`;
+      group.appendChild(choice(commandLabel(deps, id), themeMode === mode, themeMode !== mode && !deps.commands.available(id), () => {
+        deps.commands.execute(id);
+        refresh();
+      }));
+    }
+    panel.appendChild(group);
+  };
+  const buildContent = (body) => {
+    const pages = pageDefinitions();
+    if (!pages.some((page) => page.id === activePage)) activePage = "appearance";
+    const panelId = `qc-chart-settings-panel-${settingsId}`;
+    const selectedTabId = `qc-chart-settings-tab-${settingsId}-${activePage}`;
+    const nav = h("div", { class: "qc-chart-settings-nav", role: "tablist", "aria-orientation": "vertical", "aria-label": t()("settings.menu") });
+    const panel = h("section", { id: panelId, class: "qc-chart-settings-panel", role: "tabpanel", "aria-labelledby": selectedTabId, tabindex: "0" });
+    pages.forEach((page, index) => {
+      const selected = page.id === activePage;
+      const tab = h("button", {
+        id: `qc-chart-settings-tab-${settingsId}-${page.id}`,
+        type: "button",
+        class: "qc-chart-settings-nav-item",
+        role: "tab",
+        "aria-selected": String(selected),
+        "aria-controls": panelId,
+        tabindex: selected ? "0" : "-1",
+        "data-settings-page": page.id
+      }, deps.icons.glyph(page.icon, { size: 20 }), h("span", {}, page.label));
+      tab.addEventListener("click", () => showPage(page.id, true));
+      tab.addEventListener("keydown", (event) => {
+        let next = index;
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") next = (index + 1) % pages.length;
+        else if (event.key === "ArrowUp" || event.key === "ArrowLeft") next = (index - 1 + pages.length) % pages.length;
+        else if (event.key === "Home") next = 0;
+        else if (event.key === "End") next = pages.length - 1;
+        else return;
+        event.preventDefault();
+        showPage(pages[next].id, true);
+      });
+      nav.appendChild(tab);
+    });
+    if (activePage === "appearance") buildAppearancePage(panel);
+    else if (activePage === "display") buildDisplayPage(panel);
+    else if (activePage === "scale") buildScalePage(panel);
+    else buildThemePage(panel);
+    body.append(nav, panel);
+  };
+  const restoreInitialState = () => {
+    if (!initial) return;
+    const chart = activeChart(deps);
+    deps.commands.execute("chart.appearance.apply", { appearance: initial.appearance });
+    if (chart.scaleMode() !== initial.scale) deps.commands.execute(`chart.scale.${initial.scale}`);
+    if (deps.ui.settingsTheme && deps.widget.theme.mode() !== initial.theme) deps.commands.execute(`widget.theme.${initial.theme}`);
+  };
   const open2 = () => {
-    menu2 = openMenu({
+    const chart = activeChart(deps);
+    activePage = "appearance";
+    committed = false;
+    initial = {
+      appearance: { ...chart.appearance().appearance },
+      scale: chart.scaleMode(),
+      theme: deps.widget.theme.mode()
+    };
+    dialog = openDialog({
       host: deps.overlays,
-      anchor: trigger,
       label: t()("settings.menu"),
-      role: "dialog",
-      className: "qc-settings-menu",
-      width: 280,
-      align: "end",
-      build(body, handle) {
-        retireControls();
-        const chart = activeChart(deps);
-        const appearance = chart.appearance().appearance;
-        const canApply = deps.commands.available("chart.appearance.apply");
-        body.appendChild(menuHeading(t()("settings.sectionAppearance")));
-        for (const row2 of COLOR_ROWS) {
-          const label2 = t()(row2.label);
-          const value = appearance[row2.leaf];
-          const control = createColorControl(t(), {
-            label: label2,
-            value,
-            opacity: readColor(value)?.alpha ?? 1,
-            disabled: !canApply,
-            closeOnPick: true,
-            onPick: (color2) => {
-              control.update(color2);
-              apply({ [row2.leaf]: color2 });
-            },
-            openPanel: (anchor, content, onClosed) => openInlinePanel(anchor, content, anchor.closest(".qc-settings-row") ?? anchor, () => {
-              onClosed();
-              handle.reposition();
-            })
-          });
-          controls.push(control);
-          body.appendChild(fieldRow(label2, control.element, { className: "qc-settings-row" }));
-        }
-        body.appendChild(menuSeparator());
-        body.appendChild(menuHeading(t()("settings.sectionDisplay")));
-        for (const row2 of TOGGLE_ROWS) {
-          body.appendChild(switchRow({ label: t()(row2.label), checked: appearance[row2.leaf], disabled: !canApply, onChange: (on) => apply({ [row2.leaf]: on }) }));
-        }
-        body.appendChild(menuSeparator());
-        body.appendChild(menuHeading(t()("settings.sectionScale")));
-        const scale = chart.scaleMode();
-        for (const option of SCALE_MODE_OPTIONS) {
-          const id = `chart.scale.${option.id}`;
-          body.appendChild(
-            menuItem({
-              text: commandLabel(deps, id),
-              role: "menuitemradio",
-              checked: option.id === scale,
-              disabled: option.id !== scale && !deps.commands.available(id),
-              onSelect: () => {
-                deps.commands.execute(id);
-                handle.refresh();
-              }
-            })
-          );
-        }
-        body.appendChild(menuSeparator());
-        body.appendChild(
-          menuItem({
-            text: commandLabel(deps, "chart.appearance.reset"),
-            disabled: !deps.commands.available("chart.appearance.reset"),
-            onSelect: () => {
-              deps.commands.execute("chart.appearance.reset");
-              handle.refresh();
+      className: "qc-settings-menu qc-chart-settings-dialog",
+      scrimClassName: "qc-chart-settings-scrim",
+      exitMs: 180,
+      width: 750,
+      build(box, handle) {
+        content = h("div", { class: "qc-dialog-body qc-chart-settings-body" });
+        const footer = h("div", { class: "qc-chart-settings-footer" });
+        const reset = button2({
+          label: commandLabel(deps, "chart.appearance.reset"),
+          text: commandLabel(deps, "chart.appearance.reset"),
+          className: "qc-chart-settings-reset",
+          disabled: !deps.commands.available("chart.appearance.reset"),
+          onClick: () => {
+            deps.commands.execute("chart.appearance.reset");
+            refresh();
+          }
+        });
+        const actions2 = h("div", { class: "qc-chart-settings-actions" });
+        actions2.append(
+          button2({ label: t()("drawing.cancel"), text: t()("drawing.cancel"), className: "qc-chart-settings-cancel", onClick: () => handle.close() }),
+          button2({
+            label: t()("drawing.ok"),
+            text: t()("drawing.ok"),
+            className: "qc-button--primary qc-chart-settings-ok",
+            onClick: () => {
+              committed = true;
+              handle.close();
             }
           })
         );
-        if (deps.ui.settingsTheme) {
-          body.appendChild(menuSeparator());
-          body.appendChild(menuHeading(t()("settings.sectionTheme")));
-          const mode = deps.widget.theme.mode();
-          for (const themeMode of THEME_MODES) {
-            const id = `widget.theme.${themeMode}`;
-            body.appendChild(
-              menuItem({
-                text: commandLabel(deps, id),
-                role: "menuitemradio",
-                checked: themeMode === mode,
-                disabled: themeMode !== mode && !deps.commands.available(id),
-                onSelect: () => {
-                  deps.commands.execute(id);
-                  handle.refresh();
-                }
-              })
-            );
-          }
-        }
+        footer.append(reset, actions2);
+        box.append(dialogTitle(t()("drawing.settings"), t()("layouts.close"), () => handle.close(), deps.icons), content, footer);
+        buildContent(content);
+      },
+      initialFocus: (box) => box.querySelector('[role="tab"][aria-selected="true"]'),
+      onClosing: () => {
+        trigger.setAttribute("aria-expanded", "false");
+        if (!committed) restoreInitialState();
       },
       onClose: () => {
         retireControls();
-        menu2 = null;
+        content = null;
+        dialog = null;
+        initial = null;
+        trigger.setAttribute("aria-expanded", "false");
       }
     });
+    trigger.setAttribute("aria-expanded", "true");
   };
   const sync = () => {
     name(trigger, t()("settings.menu"));
-    menu2?.refresh();
+    refresh();
   };
   sync();
   return {
     element: trigger,
     sync,
     destroy() {
-      menu2?.close();
+      dialog?.close({ animate: false });
       trigger.remove();
     }
   };
@@ -23034,14 +23232,54 @@ function mountReplayTransport(deps) {
   };
   const offStrings = i18n.onChange(sync);
   sync();
+  let destroyed = false;
   return {
     element: bar,
+    enter() {
+      const view = bar.ownerDocument.defaultView;
+      const reduceMotion = typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (destroyed || !bar.isConnected) return;
+      if (reduceMotion) {
+        bar.dataset.state = "open";
+        return;
+      }
+      bar.dataset.state = "opening";
+      bar.getBoundingClientRect();
+      bar.dataset.state = "open";
+    },
     sync,
-    destroy() {
+    destroy({ animate = false } = {}) {
+      if (destroyed) return;
+      destroyed = true;
       releasePicking();
       for (const handle2 of [...open2]) handle2.close();
       offStrings();
-      bar.remove();
+      const view = bar.ownerDocument.defaultView;
+      const reduceMotion = typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (!animate || reduceMotion || !bar.isConnected || !view) {
+        bar.remove();
+        return;
+      }
+      bar.style.pointerEvents = "none";
+      bar.inert = true;
+      bar.removeAttribute("role");
+      bar.setAttribute("aria-hidden", "true");
+      let timer = null;
+      const remove = () => {
+        if (timer !== null) clearTimeout(timer);
+        bar.remove();
+      };
+      const onTransitionEnd = (event) => {
+        if (event.target === bar) remove();
+      };
+      bar.dataset.state = "closing";
+      const transitionDuration = view.getComputedStyle(bar).transitionDuration;
+      if (!transitionDuration.split(",").some((value) => Number.parseFloat(value) > 0)) {
+        remove();
+        return;
+      }
+      bar.addEventListener("transitionend", onTransitionEnd, { once: true });
+      timer = setTimeout(remove, 240);
     }
   };
 }
@@ -23065,12 +23303,12 @@ function mountChrome(deps) {
   };
   prefetchSearch();
   disposers.push(() => {
-    searchDialog?.close();
+    searchDialog?.close({ animate: false });
     searchOwner.dispose();
     deps.doors.openSearch = () => void 0;
   });
   disposers.push(i18n.onChange(() => {
-    searchDialog?.close();
+    searchDialog?.close({ animate: false });
     searchOwner.dispose();
     searchOwner = createSearchSessionOwner(deps.datafeed, { pageSize: 50 });
     prefetchSearch();
@@ -23086,8 +23324,8 @@ function mountChrome(deps) {
   let replayOwner = null;
   let replayBar = null;
   const replayWasUp = /* @__PURE__ */ new WeakMap();
-  const releaseReplayRow = () => {
-    replayBar?.destroy();
+  const releaseReplayRow = (animate = true) => {
+    replayBar?.destroy({ animate });
     replayBar = null;
     replayOwner = null;
   };
@@ -23104,18 +23342,19 @@ function mountChrome(deps) {
       replayOwner = target;
       replayBar = mountReplayTransport({ chrome: overlays, i18n, icons: deps.icons, commands: target.commands, handle: target.chart, bars: target.bars, intraday: target.intraday });
       deps.panes.after(replayBar.element);
+      replayBar.enter();
     }
     replayBar?.sync();
   };
   disposers.push(() => {
     deps.doors.replayChanged = () => void 0;
-    releaseReplayRow();
+    releaseReplayRow(false);
   });
   deps.doors.notify = notify;
   let indicatorDialog = null;
-  deps.doors.showIndicatorPicker = () => {
+  deps.doors.showIndicatorPicker = (initialCollection) => {
     if (!ui.indicatorPicker || indicatorDialog?.open()) return;
-    indicatorDialog = openIndicatorPicker({ ...ctx, access: deps.access, storage: deps.storage, indicatorPicker: deps.indicatorPicker });
+    indicatorDialog = openIndicatorPicker({ ...ctx, access: deps.access, storage: deps.storage, indicatorPicker: deps.indicatorPicker, initialCollection });
   };
   disposers.push(() => {
     indicatorDialog?.close();
@@ -23125,7 +23364,7 @@ function mountChrome(deps) {
     if (disposed) return;
     if (request.mode !== "compare" && !ui.symbolSearch && !request.onPick) return;
     if (request.mode === "compare" && !features.compare) return;
-    searchDialog?.close();
+    searchDialog?.close({ animate: false });
     searchDialog = openSearchDialog({
       host: overlays,
       i18n,
@@ -23138,6 +23377,7 @@ function mountChrome(deps) {
       recents: widget.recents,
       classes: () => deps.feedConfig()?.classes ?? null,
       classNames: deps.classNames,
+      scope: deps.scope,
       painters: deps.painters,
       curated: request.chart?.compare.symbols() ?? [],
       request
@@ -23727,6 +23967,9 @@ function createChart(options) {
     // Read on demand, because the chrome mounts below this object: a host asks for the slot when it
     // has a door to put there, which is always after the widget exists.
     chrome: {
+      legendRows: (chartId, rows2) => {
+        if (!disposed) instances.get(chartId)?.setLegendRows(rows2);
+      },
       topBar: (slot) => chrome2.topBarSlot(slot),
       toolbarButton: (options2) => chrome2.toolbarButton(options2),
       iconDiagnostics: () => iconDiagnostics.list()
@@ -23783,6 +24026,7 @@ function createChart(options) {
     datafeed: options.datafeed,
     feedConfig: () => feedConfig,
     classNames: options.search?.classNames,
+    scope: options.search?.scope,
     painters,
     indicatorPicker: options.indicatorPicker,
     access: options.access,
@@ -23845,7 +24089,6 @@ function openSymbolSearch(options) {
   return {
     close() {
       dialog.close();
-      teardown();
     }
   };
 }