@trdrs/quickcharts 5.3.0 → 5.5.0

package/dist/index.js

@@ -53,6 +53,7 @@ import {
   chooseMagnetStrength,
   clampFavoritesPosition,
   commitText,
+  contrastOf,
   createColorControl,
   createColorPalette,
   cursorButtonArmed,
@@ -114,7 +115,7 @@ import {
   withRow,
   withoutColumn,
   withoutRow
-} from "./chunk-FRZFOTMO.js";
+} from "./chunk-ETG46YGK.js";
 import {
   ResourceAbortError,
   memorySaveLoadAdapter
@@ -2309,6 +2310,7 @@ function cssVarName(roleId) {
 function themeDeclarations(theme) {
   return Object.keys(theme).sort().map((roleId) => ({ property: cssVarName(roleId), value: String(theme[roleId]) }));
 }
+var CANVAS_INK_ATTRIBUTE = "data-qc-canvas";
 var STYLE_LAYERS = { tokens: "quickcharts.tokens", chart: "quickcharts.chart" };
 var LAYER_ORDER_STATEMENT = `@layer ${STYLE_LAYERS.tokens}, ${STYLE_LAYERS.chart};`;
 var HOST_LAYER_ORDER = `@layer reset, ${STYLE_LAYERS.tokens}, ${STYLE_LAYERS.chart}, host;`;
@@ -5230,6 +5232,19 @@ function withoutModeLeaves(partial) {
   }
   return out;
 }
+var CANVAS_GROUND = /* @__PURE__ */ new Set(["canvas.background", "canvas.backgroundBottom"]);
+function chartSettingsDefaultsOn(theme, ink) {
+  const floor = chartSettingsDefaults(theme);
+  if (!ink) return floor;
+  const inked = chartSettingsDefaults(ink === "light" ? LIGHT_THEME : DARK_THEME);
+  const out = floor;
+  for (const path of MODE_LEAVES) {
+    if (CANVAS_GROUND.has(path)) continue;
+    const [section, leaf] = path.split(".");
+    out[section][leaf] = inked[section][leaf];
+  }
+  return floor;
+}
 function settingsFromAppearance(appearance, isColor) {
   if (!appearance || typeof appearance !== "object" || Array.isArray(appearance)) return { settings: {}, rejected: [] };
   const old = appearance;
@@ -5310,6 +5325,18 @@ function coerceScaleMode(raw) {
   return SCALE_MODES.includes(raw ?? "") ? raw : "normal";
 }
 
+// src/theme/canvasInk.ts
+function canvasTone(background, beneath) {
+  const light = contrastOf(BUILT_IN_THEMES.light["text.onCanvas"], background, beneath);
+  const dark = contrastOf(BUILT_IN_THEMES.dark["text.onCanvas"], background, beneath);
+  if (light === null || dark === null) return null;
+  return light >= dark ? "light" : "dark";
+}
+function canvasInk(background, mode) {
+  const tone = canvasTone(background, BUILT_IN_THEMES[mode]["canvas.background"]);
+  return tone !== null && tone !== mode ? tone : null;
+}
+
 // src/widget/chartLook.ts
 import { ColorType, LineStyle as LineStyle2 } from "lightweight-charts";
 function chartLookOptions(settings2, canvas, ui) {
@@ -8272,15 +8299,15 @@ var drawable = (shape) => {
   if (rule !== void 0 && rule !== "nonzero" && rule !== "evenodd") return false;
   return width === void 0 || Number.isFinite(width) && width > 0 && width <= GLYPH_LIMITS.strokeWidth;
 };
-function buildGlyph(icon) {
+function buildGlyph(icon, size = GRID) {
   try {
     const paths = icon && Array.isArray(icon.paths) ? icon.paths : [];
     if (paths.length === 0 || paths.length > GLYPH_LIMITS.shapes) return null;
     const shapes = paths.filter(drawable);
     if (shapes.length === 0) return null;
     const root = document.createElementNS(SVG_NS, "svg");
-    set(root, GLYPH_ATTRIBUTES.svg, "width", String(GRID));
-    set(root, GLYPH_ATTRIBUTES.svg, "height", String(GRID));
+    set(root, GLYPH_ATTRIBUTES.svg, "width", String(size));
+    set(root, GLYPH_ATTRIBUTES.svg, "height", String(size));
     set(root, GLYPH_ATTRIBUTES.svg, "viewBox", `0 0 ${GRID} ${GRID}`);
     set(root, GLYPH_ATTRIBUTES.svg, "fill", "none");
     set(root, GLYPH_ATTRIBUTES.svg, "aria-hidden", "true");
@@ -20408,7 +20435,7 @@ function mountNavControls(deps) {
 }
 
 // src/ui/chrome/scaleControls.ts
-var BUTTON = { width: 20, height: 22, gap: 4, foot: 4 };
+var BUTTON = { width: 20, height: 22, gap: 15, foot: 4 };
 var UNIT_BOX = { inset: 4 };
 function mountScaleControls(deps) {
   const t = deps.i18n.t;
@@ -20417,7 +20444,15 @@ function mountScaleControls(deps) {
   const log = h("button", { type: "button", class: "qc-scale-mode", "data-role": "scale-log" });
   modes.append(auto, log);
   stopPointer(modes);
-  const unit = h("div", { class: "qc-scale-unit", "data-role": "scale-unit" });
+  const door = deps.openUnitMenu;
+  const unit = door ? h("button", { type: "button", class: "qc-scale-unit", "data-role": "scale-unit" }) : h("div", { class: "qc-scale-unit", "data-role": "scale-unit" });
+  if (door) {
+    stopPointer(unit);
+    unit.addEventListener("click", (event) => {
+      const box2 = unit.getBoundingClientRect();
+      door({ left: box2.left, top: box2.top, right: box2.right, bottom: box2.bottom }, event.detail === 0);
+    });
+  }
   deps.chrome.appendChild(unit);
   const plus = h("button", { type: "button", class: "qc-scale-plus", "data-role": "scale-plus" });
   plus.hidden = true;
@@ -20509,6 +20544,7 @@ function mountScaleControls(deps) {
     log.textContent = t("chrome.logScaleMark");
     name(log, t("chrome.logScale"));
     name(plus, t("chrome.priceLevelMenu"));
+    if (door) unit.title = t("settings.currencyAndUnit");
   };
   const sync = () => {
     const box2 = deps.box();
@@ -20576,6 +20612,10 @@ function mountScaleControls(deps) {
   deps.gestures.addEventListener("pointerleave", onLeave);
   modes.addEventListener("pointerenter", onControlsEnter);
   modes.addEventListener("pointerleave", onControlsLeave);
+  if (door) {
+    unit.addEventListener("pointerenter", onControlsEnter);
+    unit.addEventListener("pointerleave", onControlsLeave);
+  }
   const offStrings = deps.i18n.onChange(label3);
   label3();
   sync();
@@ -21032,7 +21072,13 @@ function registerChartCommands(deps) {
     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)
+    execute: (arg) => {
+      const field = (key) => {
+        const value = arg && typeof arg === "object" ? arg[key] : void 0;
+        return typeof value === "string" ? value : void 0;
+      };
+      return deps.indicatorsOpen(field("collection"), field("kind"));
+    }
   });
   const isInstance = (arg) => !!arg && typeof arg === "object" && typeof arg.id === "string" && typeof arg.definition === "object";
   add({
@@ -22018,7 +22064,12 @@ function createChartInstance(deps) {
     if (named2.symbol?.session !== void 0 || stored !== "regular" && stored !== "extended") return named2;
     return mergePartialChartSettings({ symbol: { session: stored } }, named2);
   })();
-  const resolveSettings = () => layerChartSettings(chartSettingsDefaults(deps.theme.get()), hostPartial, viewerPartial);
+  const resolveSettings = () => {
+    const theme = deps.theme.get();
+    const laid = layerChartSettings(chartSettingsDefaults(theme), hostPartial, viewerPartial);
+    const ink = canvasInk(laid.canvas.background, deps.theme.mode());
+    return ink ? layerChartSettings(chartSettingsDefaultsOn(theme, ink), hostPartial, viewerPartial) : laid;
+  };
   let eff = resolveSettings();
   const scaleSideOf = (settings2) => settings2.priceScale.placement === "left" ? "left" : "right";
   let scaleSide = scaleSideOf(eff);
@@ -22038,6 +22089,13 @@ function createChartInstance(deps) {
     chrome2.dataset.qcDrawingToolbar = "true";
   }
   deps.container.append(gestures, chrome2);
+  const paintChromeCanvas = () => {
+    chrome2.style.setProperty("--qcd-chart-background", eff.canvas.background);
+    const ink = canvasInk(eff.canvas.background, deps.theme.mode());
+    if (ink) chrome2.setAttribute(CANVAS_INK_ATTRIBUTE, ink);
+    else chrome2.removeAttribute(CANVAS_INK_ATTRIBUTE);
+  };
+  paintChromeCanvas();
   const lookOptions = () => chartLookOptions(eff, canvas(), {
     crosshairLabels: deps.ui.crosshairLabels,
     crosshairHorizontal: deps.ui.crosshairHorizontal,
@@ -22723,7 +22781,8 @@ function createChartInstance(deps) {
     },
     openPriceMenu: (anchor2, keyboard) => {
       menu2?.raisePriceMenu(anchor2, keyboard);
-    }
+    },
+    ...deps.scaleUnitMenu ? { openUnitMenu: (anchor2, keyboard) => deps.scaleUnitMenu?.({ chart: handle, anchor: anchor2, keyboard }) } : {}
   }) : null;
   scalePlus = scaleControls && menu2 ? attachScalePlus({
     chart,
@@ -22956,7 +23015,7 @@ function createChartInstance(deps) {
     marks?.repaint();
     watermark.refresh();
     nav?.sync();
-    chrome2.style.setProperty("--qcd-chart-background", eff.canvas.background);
+    paintChromeCanvas();
     scaleControls?.sync();
     scalePlus?.refresh();
     paneButtons?.sync();
@@ -23768,7 +23827,7 @@ function createChartInstance(deps) {
     crosshairLevel,
     formatter: () => symbolFormatter,
     compareOpen: (mode, changeFrom) => compare?.openDialog(mode, changeFrom),
-    indicatorsOpen: (collection) => deps.doors.showIndicatorPicker(collection),
+    indicatorsOpen: (collection, kind) => deps.doors.showIndicatorPicker(collection, kind),
     symbolSearchOpen: () => deps.doors.openSearch({ mode: "search", chart: handle }),
     drawingVerbs: () => drawings2.verbs
   });
@@ -25543,13 +25602,21 @@ function actions(value) {
   }
   return unique(result.map((a) => a.id)) ? result : null;
 }
+function emptyState2(value) {
+  if (!record2(value) || !text(value.title) || !optionalText(value.text)) return null;
+  const action = value.action === void 0 ? [] : actions([value.action]);
+  if (!action) return null;
+  return { title: value.title, ...value.text !== void 0 ? { text: value.text } : {}, ...value.icon !== void 0 ? { icon: value.icon } : {}, ...action[0] ? { action: action[0] } : {} };
+}
 function pickerCollections(value) {
   try {
     if (!Array.isArray(value)) return null;
     const result = [];
     for (const row2 of value) {
       if (!record2(row2) || !text(row2.id) || ["builtin", "favorites"].includes(row2.id) || !text(row2.label) || !optionalText(row2.group) || row2.layout !== void 0 && row2.layout !== "list" && row2.layout !== "table") return null;
-      result.push({ id: row2.id, label: row2.label, ...row2.icon !== void 0 ? { icon: row2.icon } : {}, ...row2.group !== void 0 ? { group: row2.group } : {}, ...row2.layout !== void 0 ? { layout: row2.layout } : {} });
+      const empty = row2.empty === void 0 ? void 0 : emptyState2(row2.empty);
+      if (empty === null) return null;
+      result.push({ id: row2.id, label: row2.label, ...row2.icon !== void 0 ? { icon: row2.icon } : {}, ...row2.group !== void 0 ? { group: row2.group } : {}, ...row2.layout !== void 0 ? { layout: row2.layout } : {}, ...empty ? { empty } : {} });
     }
     return unique(result.map((row2) => row2.id)) ? result : null;
   } catch {
@@ -25650,8 +25717,10 @@ function openIndicatorPicker(deps) {
   } catch {
   }
   let query = "";
-  let collection = deps.initialCollection === "favorites" || collections?.some((row2) => row2.id === deps.initialCollection) ? deps.initialCollection : "builtin";
-  let kind = null;
+  let hostStarred = false;
+  const starred = () => favorites.length > 0 || hostStarred;
+  let collection = deps.initialCollection === "favorites" && starred() || collections?.some((row2) => row2.id === deps.initialCollection) ? deps.initialCollection : "builtin";
+  let kind = deps.initialKind ?? null;
   let generation = 0;
   let controller = null;
   let busy = false;
@@ -25691,6 +25760,9 @@ function openIndicatorPicker(deps) {
       const strip = h("div", { class: "qc-search-classes" });
       const nav = h("nav", { class: "qc-picker-nav", "aria-label": t("picker.collections") });
       const list = h("div", { class: "qc-picker-list", role: "table", "aria-label": t("picker.title") });
+      const vacant = h("div", { class: "qc-picker-empty" });
+      vacant.hidden = true;
+      let railFavorites = false;
       const status2 = h("div", { class: "qc-picker-status qc-secondary", role: "status", "aria-live": "polite" });
       let pendingFocus = null;
       const actionButton = (label3, content, run, disabled = false, focusKey, className = "qc-picker-action") => {
@@ -25790,7 +25862,7 @@ function openIndicatorPicker(deps) {
         else if (focused && focused !== document.body) pendingFocus = null;
         const selected = (collections ?? []).find((row2) => row2.id === collection);
         list.classList.toggle("qc-picker-list--personal", selected?.layout === "list");
-        list.classList.toggle("qc-picker-list--catalog", collection === "builtin");
+        if (railFavorites !== (starred() || collection === "favorites")) renderNavigation();
         for (const button3 of nav.querySelectorAll("[data-picker-collection]")) button3.setAttribute("aria-pressed", String(button3.getAttribute("data-picker-collection") === collection));
         for (const chip of strip.querySelectorAll("[data-picker-kind]")) chip.setAttribute("aria-pressed", String((chip.getAttribute("data-picker-kind") || null) === kind));
         const headings = h("div", { role: "row", class: "qc-picker-headings" }, ...["", t("picker.name"), t("picker.author"), t("picker.favorites"), ""].map((label3) => h("span", { role: "columnheader" }, label3)));
@@ -25805,13 +25877,31 @@ function openIndicatorPicker(deps) {
             body.append(buildRow({ id: definition.id, kind: "builtin", title: t(definition.nameKey), description: t(definition.descriptionKey), favorite, count: metadata?.favoriteCount, hostedFavorite: metadata?.favorite !== void 0 || !!source3 && loading, actions: metadata?.actions ?? [], primary: () => add(definition), permitted: indicatorPermitted(deps.access, definition) && deps.commands.available("chart.indicators.add"), builtin: definition }));
           }
         }
-        if (collection !== "builtin") for (const item of rows2.items) {
+        for (const item of rows2.items) {
           if (collection === "favorites" && item.favorite !== true) continue;
           if (!admitted(item.kind ?? INDICATOR_KIND)) continue;
           const primary = item.actions.find((action) => action.id === item.primaryAction);
           body.append(buildRow({ id: item.id, kind: "item", title: item.title, description: item.description, author: item.author, favorite: item.favorite, count: item.favoriteCount, hostedFavorite: true, actions: item.actions, primary: () => void act({ kind: "item", id: item.id }, primary.id), permitted: !busy && !loading && !primary.disabled }));
         }
         replace(list, headings, body);
+        const filled = (cell2) => [...body.querySelectorAll(cell2)].some((node) => node.textContent !== "");
+        list.classList.toggle("qc-picker-list--authors", filled(".qc-picker-author"));
+        list.classList.toggle("qc-picker-list--counts", filled(".qc-picker-count"));
+        const empty = selected?.empty && !loading && available && query.trim() === "" && rows2.items.length === 0 ? selected.empty : null;
+        list.hidden = !!empty;
+        vacant.hidden = !empty;
+        strip.hidden = (kinds ?? []).length === 0 || !!empty;
+        if (empty) {
+          const action = empty.action;
+          const mark = buildGlyph(empty.icon, 120);
+          replace(
+            vacant,
+            mark ? h("span", { class: "qc-picker-empty-mark", "aria-hidden": "true" }, mark) : null,
+            h("strong", { class: "qc-picker-empty-title" }, empty.title),
+            empty.text ? h("p", { class: "qc-picker-empty-text" }, empty.text) : null,
+            action ? button2({ label: action.label, text: action.label, className: "qc-button--primary qc-drawing-footer-button qc-picker-empty-action", disabled: busy || action.disabled === true, onClick: () => void act({ kind: "collection", id: collection }, action.id) }) : null
+          );
+        } else replace(vacant);
         if (pendingFocus) {
           const target = [...list.querySelectorAll("[data-picker-focus]")].find((button3) => button3.dataset.pickerFocus === pendingFocus);
           if (target && !target.disabled) target.focus();
@@ -25820,7 +25910,7 @@ function openIndicatorPicker(deps) {
             input.focus();
           }
         }
-        status2.textContent = error || (loading ? t("picker.loading") : body.childElementCount === 0 ? t("picker.noMatches") : "");
+        status2.textContent = error || (loading ? t("picker.loading") : body.childElementCount === 0 && !empty ? t("picker.noMatches") : "");
         list.setAttribute("aria-busy", String(loading || busy));
       };
       const refresh = async () => {
@@ -25845,6 +25935,7 @@ function openIndicatorPicker(deps) {
           if (parsed) {
             rows2 = parsed;
             available = true;
+            hostStarred = parsed.builtIns.some((row2) => row2.favorite === true) || parsed.items.some((item) => item.favorite === true);
           } else error = result?.kind === "unavailable" && typeof result.message === "string" && result.message.trim() ? result.message : t("picker.unavailable");
         } catch {
           if (dialog.open() && revision === generation) error = t("picker.unavailable");
@@ -25862,8 +25953,9 @@ function openIndicatorPicker(deps) {
       };
       const renderNavigation = () => {
         replace(nav);
+        railFavorites = starred() || collection === "favorites";
         const personal = t("picker.personal");
-        const navigation = [{ id: "favorites", label: t("picker.favorites"), group: personal, icon: deps.icons.glyph(ICONS.pickerFavorites, { size: 28 }) }, ...(collections ?? []).map((row2) => ({ ...row2, icon: hostIcon(row2.icon) })), { id: "builtin", label: t("picker.technicals"), group: t("picker.builtin"), icon: deps.icons.glyph(ICONS.pickerTechnicals, { size: 28 }) }];
+        const navigation = [...railFavorites ? [{ id: "favorites", label: t("picker.favorites"), group: personal, icon: deps.icons.glyph(ICONS.pickerFavorites, { size: 28 }) }] : [], ...(collections ?? []).map((row2) => ({ ...row2, icon: hostIcon(row2.icon) })), { id: "builtin", label: t("picker.technicals"), group: t("picker.builtin"), icon: deps.icons.glyph(ICONS.pickerTechnicals, { size: 28 }) }];
         let section = null;
         let group;
         for (const item of navigation) {
@@ -25905,7 +25997,7 @@ function openIndicatorPicker(deps) {
           input.focus();
         } else if (roveFocus(list, event)) event.preventDefault();
       });
-      box2.append(searchField(deps.icons, input, clear), strip, h("div", { class: "qc-picker-body" }, nav, h("div", { class: "qc-picker-content" }, list, status2)));
+      box2.append(searchField(deps.icons, input, clear), strip, h("div", { class: "qc-picker-body" }, nav, h("div", { class: "qc-picker-content" }, list, vacant, status2)));
       renderKinds();
       renderNavigation();
       redraw = render;
@@ -30203,9 +30295,9 @@ function mountChrome(deps) {
   });
   deps.doors.notify = notify;
   let indicatorDialog = null;
-  deps.doors.showIndicatorPicker = (initialCollection) => {
+  deps.doors.showIndicatorPicker = (initialCollection, initialKind) => {
     if (!ui.indicatorPicker || indicatorDialog?.open()) return;
-    indicatorDialog = openIndicatorPicker({ ...ctx, storage: deps.storage, indicatorPicker: deps.indicatorPicker, initialCollection });
+    indicatorDialog = openIndicatorPicker({ ...ctx, storage: deps.storage, indicatorPicker: deps.indicatorPicker, initialCollection, initialKind });
   };
   disposers.push(() => {
     indicatorDialog?.close({ animate: false });
@@ -30706,7 +30798,8 @@ function createChart(options2) {
             }
           },
           doors,
-          painters
+          painters,
+          ...options2.scaleUnitMenu ? { scaleUnitMenu: options2.scaleUnitMenu } : {}
         });
       } catch (error) {
         scope.dispose();