@trdrs/quickcharts 5.2.0 → 5.3.0

package/dist/index.js

@@ -25,6 +25,7 @@ import {
   IMAGE_ERROR_MESSAGES,
   INERT_PROPS,
   INPUT_PROPS,
+  LIGHT_THEME,
   MAGNET_LABELS,
   MAGNET_STRENGTHS,
   MIXED_LEVEL_COLORS,
@@ -113,7 +114,7 @@ import {
   withRow,
   withoutColumn,
   withoutRow
-} from "./chunk-Q3DCXQDW.js";
+} from "./chunk-FRZFOTMO.js";
 import {
   ResourceAbortError,
   memorySaveLoadAdapter
@@ -1552,8 +1553,16 @@ var picker = {
   "picker.noMatches": "No matching indicators.",
   "picker.collections": "Indicator collections",
   "picker.personal": "Personal",
+  /** The rail's heading over the shipped definitions. */
   "picker.builtin": "Built-in",
+  /** The rail's collection of shipped technical indicators, under Built-in. */
+  "picker.technicals": "Technicals",
   "picker.favorites": "Favorites",
+  /** The kind filters: their group's name, the filter that shows every kind, and the chart's own
+   *  kind beside the kinds a host declares. */
+  "picker.kindFilter": "Type",
+  "picker.allKinds": "All",
+  "picker.indicators": "Indicators",
   "picker.thousands": " K",
   "picker.name": "Name",
   "picker.author": "Author",
@@ -1789,26 +1798,26 @@ function readingDirection(i18n) {
   return BUILT_IN_LOCALES.find((l) => l.code === i18n.locale())?.dir ?? "ltr";
 }
 var chartDictionaries = createDictionaryLoader(en, {
-  de: () => import("./de-SUDTTPQ3.js"),
-  fr: () => import("./fr-7KQC4IJH.js"),
-  es: () => import("./es-FOBXUK2X.js"),
-  it: () => import("./it-PMSTWZDL.js"),
-  ca_ES: () => import("./ca_ES-WJWH5BXU.js"),
-  pl: () => import("./pl-4HCG3T3J.js"),
-  sv: () => import("./sv-4XVUXYK6.js"),
-  tr: () => import("./tr-HMAZXSJM.js"),
-  ru: () => import("./ru-LFHCSDBV.js"),
-  pt: () => import("./pt-6LTNN653.js"),
-  id_ID: () => import("./id_ID-SI25N57C.js"),
-  ms_MY: () => import("./ms_MY-U4EE5Q4V.js"),
-  th: () => import("./th-WM2PVA24.js"),
-  vi: () => import("./vi-ITFBV5B7.js"),
-  ja: () => import("./ja-PABDRAXV.js"),
-  ko: () => import("./ko-JHRYYFCV.js"),
-  zh: () => import("./zh-ZGU2RI7K.js"),
-  zh_TW: () => import("./zh_TW-PNINSQ6F.js"),
-  ar: () => import("./ar-TG26ZCCE.js"),
-  he_IL: () => import("./he_IL-2T6XBA6D.js")
+  de: () => import("./de-D5WWQLT5.js"),
+  fr: () => import("./fr-L5EPUMNA.js"),
+  es: () => import("./es-6TM3Z6CQ.js"),
+  it: () => import("./it-TUILRXJ5.js"),
+  ca_ES: () => import("./ca_ES-OF2NGA3A.js"),
+  pl: () => import("./pl-XLOQLQVW.js"),
+  sv: () => import("./sv-3JTSBHQN.js"),
+  tr: () => import("./tr-RWKHFLUS.js"),
+  ru: () => import("./ru-2KVG2H7U.js"),
+  pt: () => import("./pt-TZWQOZ5P.js"),
+  id_ID: () => import("./id_ID-MMY4EQSL.js"),
+  ms_MY: () => import("./ms_MY-ABJSZCPH.js"),
+  th: () => import("./th-O3CHCMEU.js"),
+  vi: () => import("./vi-D2CXSN5R.js"),
+  ja: () => import("./ja-7QY2FLXF.js"),
+  ko: () => import("./ko-RWI5JOO2.js"),
+  zh: () => import("./zh-KBHIBNWP.js"),
+  zh_TW: () => import("./zh_TW-474AC5C4.js"),
+  ar: () => import("./ar-BBRV6CC4.js"),
+  he_IL: () => import("./he_IL-PXH4KNDC.js")
 });
 var dynamic = (t) => t;
 var source = null;
@@ -1989,7 +1998,8 @@ var THEME_ROLES = [
   // rows it runs beside.
   { id: "chrome.scrollThumb", family: "chrome", kind: "color", description: "The thumb of the thin bar beside a list the viewer scrolls, such as the search results or the indicator list." },
   { id: "chrome.radius", family: "chrome", kind: "length", description: "Corner radius of a control." },
-  { id: "chrome.radiusLarge", family: "chrome", kind: "length", description: "Corner radius of a panel, dialog, or menu." },
+  { id: "chrome.radiusLarge", family: "chrome", kind: "length", description: "Corner radius of a panel or menu." },
+  { id: "chrome.radiusDialog", family: "chrome", kind: "length", description: "Corner radius of a dialog." },
   // ── overlay: menus, dialogs, popovers, and what sits behind them ────────────────────────────
   { id: "overlay.surface", family: "overlay", kind: "color", description: "The fill of a floating menu, dialog, or popover." },
   { id: "overlay.separator", family: "overlay", kind: "color", description: "The rule between groups inside a menu or panel." },
@@ -5199,6 +5209,27 @@ function mergePartialChartSettings(first, second) {
 function copyPartialChartSettings(partial) {
   return mergePartialChartSettings({}, partial);
 }
+var MODE_LEAVES = (() => {
+  const light = chartSettingsDefaults(LIGHT_THEME);
+  const dark = SHAPE;
+  const paths = /* @__PURE__ */ new Set();
+  for (const [section, leaves] of Object.entries(dark)) {
+    for (const [leaf, value] of Object.entries(leaves)) if (light[section]?.[leaf] !== value) paths.add(`${section}.${leaf}`);
+  }
+  return paths;
+})();
+function hasModeLeaves(partial) {
+  return Object.entries(partial).some(([section, leaves]) => Object.keys(leaves ?? {}).some((leaf) => MODE_LEAVES.has(`${section}.${leaf}`)));
+}
+function withoutModeLeaves(partial) {
+  const out = {};
+  for (const [section, leaves] of Object.entries(partial)) {
+    for (const [leaf, value] of Object.entries(leaves ?? {})) {
+      if (!MODE_LEAVES.has(`${section}.${leaf}`)) (out[section] ??= {})[leaf] = value;
+    }
+  }
+  return out;
+}
 function settingsFromAppearance(appearance, isColor) {
   if (!appearance || typeof appearance !== "object" || Array.isArray(appearance)) return { settings: {}, rejected: [] };
   const old = appearance;
@@ -10285,11 +10316,13 @@ var ICONS = {
   textItalic: { viewBox: "0 0 28 28", body: '<path fill="none" stroke="currentColor" d="M12 6.5h7M9 21.5h7M15.5 6.5l-3 15"/>' },
   close18: { viewBox: "0 0 18 18", body: '<path d="M4.5 4.5l9 9M13.5 4.5l-9 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>' },
   chevronDown18: { viewBox: "0 0 18 18", body: solid(polyline([[4.4, 7.25], [9, 11.3], [13.6, 7.25]], 1.5)) },
-  // The indicator picker's marks, on the grids its rows were drawn for.
-  pickerStar: { viewBox: "0 0 18 18", body: '<path fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" d="M9 2.13L11.057 6.168L15.534 6.877L12.329 10.082L13.038 14.558L9 12.5L4.962 14.558L5.671 10.082L2.466 6.877L6.943 6.168z"/>' },
-  pickerStarFilled: { viewBox: "0 0 18 18", body: '<path fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" d="M9 2.13L11.057 6.168L15.534 6.877L12.329 10.082L13.038 14.558L9 12.5L4.962 14.558L5.671 10.082L2.466 6.877L6.943 6.168z"/>' },
-  plus24: { viewBox: "0 0 24 24", body: '<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' },
-  search24: { viewBox: "0 0 24 24", body: '<circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>' },
+  // The indicator picker's marks. A row's star on the 18 grid, a one-unit outline or the filled
+  // shape; the rail's Favorites, an outlined star on the 28 grid; and the rail's built-in indicators,
+  // a trend line over a run of columns.
+  pickerStar: { viewBox: "0 0 18 18", body: '<path stroke="currentColor" d="M9 2.13l1.903 3.855.116.236.26.038 4.255.618-3.079 3.001-.188.184.044.259.727 4.237-3.805-2L9 12.434l-.233.122-3.805 2.001.727-4.237.044-.26-.188-.183-3.079-3.001 4.255-.618.26-.038.116-.236L9 2.13z"/>' },
+  pickerStarFilled: { viewBox: "0 0 18 18", body: '<path fill="currentColor" d="M9 1l2.35 4.76 5.26.77-3.8 3.7.9 5.24L9 13l-4.7 2.47.9-5.23-3.8-3.71 5.25-.77L9 1z"/>' },
+  pickerFavorites: { viewBox: "0 0 28 28", body: '<path fill="currentColor" fill-rule="evenodd" d="m17.13 9.74 7.37.9-5.44 5.06L20.4 23 14 19.38 7.6 23l1.34-7.3-5.44-5.06 7.37-.9L14 3l3.13 6.74Zm3.99 2-3.68 3.42.9 4.96L14 17.66l-4.34 2.46.9-4.96-3.68-3.42 5-.6L14 6.56l2.12 4.56 5 .61Z"/>' },
+  pickerTechnicals: { viewBox: "0 0 28 28", body: '<path fill="currentColor" d="m22.85 7.85-4.58 4.59a2.5 2.5 0 0 1-3.54 0l-3.17-3.17a1.5 1.5 0 0 0-2.12 0l-4.59 4.58-.7-.7 4.58-4.59a2.5 2.5 0 0 1 3.54 0l3.17 3.17a1.5 1.5 0 0 0 2.12 0l4.59-4.58.7.7ZM11 22h-1v-8h1v8Zm12 0h-1v-8h1v8ZM8 22H7v-6h1v6Zm6 0h-1v-6h1v6Zm6 0h-1v-6h1v6Zm-3 0h-1v-4h1v4ZM5 22H4v-3h1v3Z"/>' },
   // The note beside a switch that needs a sentence.
   info: { viewBox: "0 0 18 18", body: solid(disc(9, 9, 8) + disc(9, 5, 1, true) + polygon([[7, 8], [10, 8], [10, 14], [8.5, 14], [8.5, 9.5], [7, 9.5]], true)) },
   // The short tip beside a setting's label: a disc with a question mark cut through it, its hook
@@ -10398,7 +10431,6 @@ function openDialog(options2) {
   scrim.appendChild(box2);
   const motion = options2.motion !== false;
   if (options2.veil === false) scrim.dataset.qcVeil = "none";
-  if (options2.passThrough) scrim.dataset.qcPass = "true";
   if (motion) scrim.dataset.state = "opening";
   let isOpen = true;
   const previouslyFocused = document.activeElement;
@@ -11527,7 +11559,6 @@ function openDialog2(options2) {
     ...options2.width === void 0 ? {} : { width: options2.width },
     ...options2.veil === void 0 ? {} : { veil: options2.veil },
     ...options2.motion === void 0 ? {} : { motion: options2.motion },
-    ...options2.passThrough === void 0 ? {} : { passThrough: options2.passThrough },
     build(element, dialog) {
       box2 = element;
       closeBox = () => dialog.close();
@@ -15143,6 +15174,7 @@ function serializeChartContent(content) {
     axis: content.priceAxis,
     indicators: content.indicators.map(savedIndicatorFields),
     settings: content.settings,
+    ...content.settingsMode ? { settingsMode: content.settingsMode } : {},
     compares: content.compares,
     panes: content.panes,
     ...content.drawings ? { drawings: content.drawings } : {},
@@ -15165,6 +15197,7 @@ function parseChartContent(content) {
     indicators: indicators2,
     settings: read?.settings,
     settingsRejected: read?.rejected,
+    settingsMode: raw.settingsMode === "light" || raw.settingsMode === "dark" ? raw.settingsMode : void 0,
     drawings: Array.isArray(raw.drawings) ? raw.drawings : void 0,
     compares: raw.compares,
     // An earlier blob carries no order of its own, and its panes stand in the order it stores what
@@ -18125,7 +18158,7 @@ var byMeaning = (table) => table;
 var CONTROL_ICONS = byMeaning({
   // The top bar and the widget's menus.
   compare: [ICONS.comparePlus],
-  indicators: [ICONS.indicators],
+  indicators: [ICONS.indicators, ICONS.pickerTechnicals],
   replay: [ICONS.replay],
   undo: [ICONS.undo],
   redo: [ICONS.redo],
@@ -18162,15 +18195,15 @@ var CONTROL_ICONS = byMeaning({
   close: [ICONS.close, ICONS.closeThin, ICONS.dialogClose],
   remove: [ICONS.close18, ICONS.removeRow],
   delete: [ICONS.trash, ICONS.trash28],
-  add: [ICONS.plus, ICONS.plusThin, ICONS.plus24],
+  add: [ICONS.plus, ICONS.plusThin],
   bold: [ICONS.textBold],
   italic: [ICONS.textItalic],
-  search: [ICONS.search, ICONS.search24],
+  search: [ICONS.search],
   clear: [ICONS.clear],
   open: [ICONS.folder],
   rename: [ICONS.pencil],
   duplicate: [ICONS.clone],
-  favorite: [ICONS.star, ICONS.pickerStar],
+  favorite: [ICONS.star, ICONS.pickerStar, ICONS.pickerFavorites],
   favorited: [ICONS.starFilled, ICONS.pickerStarFilled],
   sortAscending: [ICONS.sortUp, ICONS.sortUpRow],
   sortDescending: [ICONS.sortDown, ICONS.sortDownRow],
@@ -20386,9 +20419,9 @@ function mountScaleControls(deps) {
   stopPointer(modes);
   const unit = h("div", { class: "qc-scale-unit", "data-role": "scale-unit" });
   deps.chrome.appendChild(unit);
-  const plus2 = h("button", { type: "button", class: "qc-scale-plus", "data-role": "scale-plus" });
-  plus2.hidden = true;
-  deps.chrome.appendChild(plus2);
+  const plus = h("button", { type: "button", class: "qc-scale-plus", "data-role": "scale-plus" });
+  plus.hidden = true;
+  deps.chrome.appendChild(plus);
   let placed = null;
   let pressing = null;
   let releasing = false;
@@ -20403,7 +20436,7 @@ function mountScaleControls(deps) {
     const at2 = anchor();
     return at2 !== null && clientX >= at2.left && clientX < at2.right && clientY >= at2.top && clientY < at2.bottom;
   };
-  plus2.addEventListener("click", (event) => {
+  plus.addEventListener("click", (event) => {
     const at2 = anchor();
     if (at2) deps.openPriceMenu(at2, event.detail === 0);
   });
@@ -20444,19 +20477,19 @@ function mountScaleControls(deps) {
     const scale = box2 ? deps.box() : null;
     if (!box2 || !scale) {
       placed = null;
-      plus2.hidden = true;
+      plus.hidden = true;
       return;
     }
     const plotLeft = scale.side === "right" ? scale.left - box2.paneWidth : scale.left + scale.width;
     const left = plotLeft + box2.left;
     const was = placed;
     placed = { left, top: scale.top + box2.top, width: box2.width, height: box2.height, y: scale.top + box2.y, side: scale.side };
-    if (was && !plus2.hidden && was.left === placed.left && was.top === placed.top && was.width === placed.width && was.height === placed.height) return;
-    plus2.hidden = false;
-    plus2.style.left = `${placed.left}px`;
-    plus2.style.top = `${placed.top}px`;
-    plus2.style.width = `${placed.width}px`;
-    plus2.style.height = `${placed.height}px`;
+    if (was && !plus.hidden && was.left === placed.left && was.top === placed.top && was.width === placed.width && was.height === placed.height) return;
+    plus.hidden = false;
+    plus.style.left = `${placed.left}px`;
+    plus.style.top = `${placed.top}px`;
+    plus.style.width = `${placed.width}px`;
+    plus.style.height = `${placed.height}px`;
   };
   auto.addEventListener("click", () => {
     deps.toggleAutoScale();
@@ -20475,7 +20508,7 @@ function mountScaleControls(deps) {
     name(auto, t("chrome.autoScale"));
     log.textContent = t("chrome.logScaleMark");
     name(log, t("chrome.logScale"));
-    name(plus2, t("chrome.priceLevelMenu"));
+    name(plus, t("chrome.priceLevelMenu"));
   };
   const sync = () => {
     const box2 = deps.box();
@@ -20561,7 +20594,7 @@ function mountScaleControls(deps) {
       deps.gestures.removeEventListener("click", onClick, true);
       modes.remove();
       unit.remove();
-      plus2.remove();
+      plus.remove();
     }
   };
 }
@@ -21977,6 +22010,7 @@ function createChartInstance(deps) {
   let menuLevel = null;
   let drawingPrefs = readDrawingPreferences();
   let viewerPartial = {};
+  let leavesMode = deps.theme.mode();
   const canvas = () => canvasTheme(deps.theme.get());
   const hostPartial = (() => {
     const named2 = readPartialChartSettings(deps.settings ?? {}, paintableColor).settings;
@@ -23417,6 +23451,9 @@ function createChartInstance(deps) {
       // factory colors and the host's brand as though a viewer had chosen every one of them, and a
       // reopen under another theme or another brand would then be stuck with the old ones.
       settings: copyPartialChartSettings(viewerPartial),
+      // The mode a leaf that follows the mode was chosen in, so a reopen in the other mode lets the
+      // mode in effect paint it.
+      ...hasModeLeaves(viewerPartial) ? { settingsMode: leavesMode } : {},
       compares: compare?.serialize() ?? [],
       // The order the panes stand in, top to bottom, those waiting to be drawn included.
       panes: paneOps.order(),
@@ -23437,16 +23474,19 @@ function createChartInstance(deps) {
     const { dropped } = indicators2.restore(parsed.indicators);
     writeHidden();
     if (dropped > 0) deps.doors.notify("info", i18n.t("toast.indicatorsNotCarried", { count: dropped }));
-    if (parsed.settings) handle.applySettings(parsed.settings);
+    if (parsed.settings) handle.applySettings(inMode(parsed.settings, parsed.settingsMode));
     compare?.restore(parsed.compares);
     paneOps.arrange(parsed.panes);
     if (deps.drawings.mode === "combined" && parsed.drawings) drawings2.handle?.restore(parsed.drawings);
     const extensionsComplete = extensions.host.restore(parsed.ext);
     return dropped === 0 && extensionsComplete;
   }
+  function inMode(settings2, mode) {
+    return mode && mode !== leavesMode ? withoutModeLeaves(settings2) : settings2;
+  }
   function applyHistoryContent(next) {
     if (disposed) return;
-    viewerPartial = copyPartialChartSettings(next.settings);
+    viewerPartial = copyPartialChartSettings(inMode(next.settings, next.settingsMode));
     applyLook();
     applyContent({
       symbol: next.symbol,
@@ -23773,8 +23813,16 @@ function createChartInstance(deps) {
     setLegendRows: (rows2) => legend2.setHostRows(rows2),
     screenshot: () => extensions.host.capture(() => chart.takeScreenshot(), () => ({ width: chart.chartElement().clientWidth, height: chart.chartElement().clientHeight })),
     repaintTheme() {
+      const mode = deps.theme.mode();
+      const switched = mode !== leavesMode && hasModeLeaves(viewerPartial);
+      leavesMode = mode;
+      if (switched) viewerPartial = withoutModeLeaves(viewerPartial);
       applyLook();
       legend2.setDot(session2.state());
+      if (switched) {
+        deps.contentChanged?.();
+        history2.changed();
+      }
     },
     relabel() {
       applyTimezone();
@@ -25479,6 +25527,7 @@ function openIndicatorSettings(deps) {
 }
 
 // src/ui/chrome/indicatorPickerData.ts
+var INDICATOR_KIND = "indicator";
 var record2 = (value) => !!value && typeof value === "object" && !Array.isArray(value);
 var text = (value) => typeof value === "string" && value.trim().length > 0;
 var builtinIds = new Set(BUILT_IN_INDICATORS2.map((d) => d.id));
@@ -25507,12 +25556,26 @@ function pickerCollections(value) {
     return null;
   }
 }
-function pickerRows(value) {
+function pickerKinds(value) {
+  try {
+    if (value === void 0) return [];
+    if (!Array.isArray(value)) return null;
+    const result = [];
+    for (const row2 of value) {
+      if (!record2(row2) || !text(row2.id) || row2.id === INDICATOR_KIND || !text(row2.label)) return null;
+      result.push({ id: row2.id, label: row2.label });
+    }
+    return unique(result.map((row2) => row2.id)) ? result : null;
+  } catch {
+    return null;
+  }
+}
+function pickerRows(value, kinds = []) {
   try {
     if (!record2(value) || value.kind !== "ok" || !Array.isArray(value.items) || value.builtIns !== void 0 && !Array.isArray(value.builtIns)) return null;
     const items2 = [];
     for (const row2 of value.items) {
-      if (!record2(row2) || !text(row2.id) || builtinIds.has(row2.id) || ["builtin", "favorites", "add", "favorite"].includes(row2.id) || !text(row2.title) || !optionalText(row2.description) || !optionalText(row2.author) || !count(row2.favoriteCount) || row2.favorite !== void 0 && typeof row2.favorite !== "boolean") return null;
+      if (!record2(row2) || !text(row2.id) || builtinIds.has(row2.id) || ["builtin", "favorites", "add", "favorite"].includes(row2.id) || !text(row2.title) || !optionalText(row2.description) || !optionalText(row2.author) || !count(row2.favoriteCount) || row2.favorite !== void 0 && typeof row2.favorite !== "boolean" || row2.kind !== void 0 && (typeof row2.kind !== "string" || row2.kind !== INDICATOR_KIND && !kinds.includes(row2.kind))) return null;
       const verbs = actions(row2.actions);
       if (!verbs || !text(row2.primaryAction) || !verbs.some((a) => a.id === row2.primaryAction)) return null;
       items2.push({
@@ -25522,6 +25585,7 @@ function pickerRows(value) {
         actions: verbs,
         ...row2.description !== void 0 ? { description: row2.description } : {},
         ...row2.author !== void 0 ? { author: row2.author } : {},
+        ...row2.kind !== void 0 ? { kind: row2.kind } : {},
         ...row2.favorite !== void 0 ? { favorite: row2.favorite } : {},
         ...row2.favoriteCount !== void 0 ? { favoriteCount: row2.favoriteCount } : {}
       });
@@ -25539,11 +25603,17 @@ function pickerRows(value) {
   }
 }
 
+// src/ui/chrome/searchField.ts
+function searchField(icons, input, ...trailing) {
+  return h("div", { class: "qc-search-field" }, icons.glyph(ICONS.search, { size: 28, className: "qc-search-magnifier" }), input, h("span", { class: "qc-search-actions-field" }, ...trailing));
+}
+function searchClear(icons, label3, onClear) {
+  return button2({ label: label3, icon: icons.glyph(ICONS.clear, { size: 18 }), className: "qc-search-op", onClick: onClear });
+}
+
 // src/ui/chrome/indicatorPicker.ts
 var FAVORITES_KEY = "quickcharts.indicatorFavorites.v1";
 var star = (icons, filled) => icons.glyph(filled ? ICONS.pickerStarFilled : ICONS.pickerStar, { size: 18 });
-var plus = (icons) => icons.glyph(ICONS.plus24, { size: 18 });
-var searchGlyph = (icons) => icons.glyph(ICONS.search24, { size: 18 });
 function freshInstanceId(definitionId, existing) {
   const taken = new Set(existing.map((i) => i.id));
   let n = 1;
@@ -25559,12 +25629,20 @@ function openIndicatorPicker(deps) {
   const t = (key, ...args) => deps.i18n.t(key, ...args);
   const source3 = deps.indicatorPicker;
   let collections = null;
+  let kinds = [];
   let hostValid = !source3;
-  try {
-    collections = source3 ? pickerCollections(source3.collections) : [];
-    hostValid = collections !== null && (!source3 || typeof source3.list === "function" && typeof source3.act === "function");
-  } catch {
-  }
+  const readHost = () => {
+    try {
+      collections = source3 ? pickerCollections(source3.collections) : [];
+      kinds = source3 ? pickerKinds(source3.kinds) : [];
+      hostValid = collections !== null && kinds !== null && (!source3 || typeof source3.list === "function" && typeof source3.act === "function");
+    } catch {
+      collections = null;
+      kinds = null;
+      hostValid = false;
+    }
+  };
+  readHost();
   let favorites = [];
   try {
     const stored = JSON.parse(deps.storage?.get(FAVORITES_KEY) ?? "[]");
@@ -25573,6 +25651,7 @@ function openIndicatorPicker(deps) {
   }
   let query = "";
   let collection = deps.initialCollection === "favorites" || collections?.some((row2) => row2.id === deps.initialCollection) ? deps.initialCollection : "builtin";
+  let kind = null;
   let generation = 0;
   let controller = null;
   let busy = false;
@@ -25602,14 +25681,20 @@ function openIndicatorPicker(deps) {
       offLocale();
     },
     build(box2, dialog) {
-      const input = h("input", { type: "search", class: "qc-picker-search", role: "searchbox", "aria-label": t("picker.search"), placeholder: t("picker.search"), autocomplete: "off", spellcheck: "false" });
+      const input = h("input", { type: "text", class: "qc-search-input qc-picker-search", role: "searchbox", "aria-label": t("picker.search"), placeholder: t("picker.search"), autocomplete: "off", spellcheck: "false" });
+      const clear = searchClear(deps.icons, t("search.clear"), () => {
+        input.value = "";
+        setQuery("");
+        input.focus();
+      });
+      clear.hidden = true;
+      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 status2 = h("div", { class: "qc-picker-status qc-secondary", role: "status", "aria-live": "polite" });
-      const close = button2({ label: t("search.close"), icon: deps.icons.glyph(ICONS.dialogClose, { size: 18 }), className: "qc-dialog-close", onClick: () => dialog.close() });
       let pendingFocus = null;
-      const actionButton = (label3, content, run, disabled = false, focusKey) => {
-        const button3 = h("button", { type: "button", class: "qc-picker-action", "aria-label": label3, title: label3, "data-picker-focus": focusKey }, content ?? h("span", {}, label3));
+      const actionButton = (label3, content, run, disabled = false, focusKey, className = "qc-picker-action") => {
+        const button3 = h("button", { type: "button", class: className, "aria-label": label3, title: label3, "data-picker-focus": focusKey }, content ?? h("span", {}, label3));
         button3.disabled = disabled;
         button3.addEventListener("click", (event) => {
           event.stopPropagation();
@@ -25654,9 +25739,9 @@ function openIndicatorPicker(deps) {
           render();
         }
       };
-      const toggle = (kind, id, favorite, hosted) => {
+      const toggle = (kind2, id, favorite, hosted) => {
         if (hosted) {
-          void act({ kind, id }, "favorite", !favorite);
+          void act({ kind: kind2, id }, "favorite", !favorite);
           return;
         }
         favorites = favorite ? favorites.filter((value) => value !== id) : [...favorites, id];
@@ -25669,8 +25754,12 @@ function openIndicatorPicker(deps) {
       const buildRow = (options2) => {
         const row2 = h("div", { class: "qc-picker-row", role: "row" });
         const key = (action) => JSON.stringify([options2.kind, options2.id, action]);
-        const favoriteCell = h("div", { role: "cell" });
-        if (options2.favorite !== void 0) favoriteCell.append(actionButton(t(options2.favorite ? "picker.unfavorite" : "picker.favorite", { name: options2.title }), star(deps.icons, options2.favorite), () => toggle(options2.kind, options2.id, options2.favorite, options2.hostedFavorite === true), options2.hostedFavorite === true && (busy || loading) || !!source3 && !available, key("favorite")));
+        const favoriteCell = h("div", { role: "cell", class: "qc-picker-star-cell" });
+        if (options2.favorite !== void 0) {
+          const toggleStar = actionButton(t(options2.favorite ? "picker.unfavorite" : "picker.favorite", { name: options2.title }), star(deps.icons, options2.favorite), () => toggle(options2.kind, options2.id, options2.favorite, options2.hostedFavorite === true), options2.hostedFavorite === true && (busy || loading) || !!source3 && !available, key("favorite"), "qc-picker-star");
+          toggleStar.setAttribute("aria-pressed", String(options2.favorite));
+          favoriteCell.append(toggleStar);
+        }
         const label3 = options2.permitted ? options2.title : t("picker.notPermitted", { name: options2.title });
         const name2 = h("button", { type: "button", class: "qc-picker-name", "data-qc-item": "", tabindex: "-1", ...options2.builtin ? { "data-indicator": options2.id } : { "data-picker-item": options2.id }, "aria-label": options2.builtin && options2.permitted ? t("picker.add", { name: options2.title }) : label3, title: options2.description ?? label3 }, options2.title);
         name2.disabled = !options2.permitted;
@@ -25685,11 +25774,6 @@ function openIndicatorPicker(deps) {
           if (personal && rows2.items.find((item) => item.id === options2.id)?.primaryAction === action.id) continue;
           actions2.append(actionButton(action.label, hostIcon(action.icon), () => void act({ kind: options2.kind, id: options2.id }, action.id), busy || loading || action.disabled === true, key("action:" + action.id)));
         }
-        if (options2.builtin) {
-          const button3 = actionButton(t("picker.add", { name: options2.title }), plus(deps.icons), options2.primary, !options2.permitted, key("add"));
-          button3.dataset.pickerAdd = options2.id;
-          actions2.append(button3);
-        }
         const total2 = options2.count;
         const compact2 = total2 === void 0 ? 0 : total2 < 1e3 ? total2 : total2 < 1e4 ? Math.round(total2 / 100) / 10 : Math.round(total2 / 1e3);
         const count2 = total2 === void 0 ? "" : new Intl.NumberFormat(deps.i18n.tag()).format(compact2) + (total2 >= 1e3 ? t("picker.thousands") : "");
@@ -25699,27 +25783,31 @@ function openIndicatorPicker(deps) {
         });
         return row2;
       };
+      const admitted = (rowKind) => kind === null || kind === rowKind;
       const render = () => {
         const focused = document.activeElement;
         if (focused && list.contains(focused)) pendingFocus = focused.dataset.pickerFocus ?? null;
         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");
         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)));
         const body = h("div", { role: "rowgroup" });
-        if (collection === "builtin" || collection === "favorites") {
+        if ((collection === "builtin" || collection === "favorites") && admitted(INDICATOR_KIND)) {
           for (const definition of filterDefinitions(t, query)) {
             const metadata = rows2.builtIns.find((row2) => row2.id === definition.id);
             const favorite = metadata?.favorite ?? favorites.includes(definition.id);
             if (collection === "favorites" && !favorite) continue;
             if (!offered(definition)) continue;
             if (!indicatorShown(deps.access, definition) || !commandShown(deps.access, "chart.indicators.add")) continue;
-            body.append(buildRow({ id: definition.id, kind: "builtin", title: t(definition.nameKey), description: t(definition.descriptionKey), author: t("picker.builtin"), 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 }));
+            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) {
           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 }));
         }
@@ -25753,7 +25841,7 @@ function openIndicatorPicker(deps) {
         try {
           const result = await source3.list({ collection, query, builtInIds: BUILT_IN_INDICATORS2.filter(offered).map((d) => d.id) }, pending.signal);
           if (!dialog.open() || revision !== generation) return;
-          const parsed = pickerRows(result);
+          const parsed = pickerRows(result, (kinds ?? []).map((row2) => row2.id));
           if (parsed) {
             rows2 = parsed;
             available = true;
@@ -25767,25 +25855,47 @@ function openIndicatorPicker(deps) {
           }
         }
       };
+      const setQuery = (next) => {
+        query = next;
+        clear.hidden = next === "";
+        void refresh();
+      };
       const renderNavigation = () => {
         replace(nav);
-        const navigation = [{ id: "favorites", label: t("picker.favorites"), group: t("picker.personal"), icon: null }, ...(collections ?? []).map((row2) => ({ ...row2, icon: hostIcon(row2.icon) })), { id: "builtin", label: t("picker.builtin"), group: "", icon: deps.icons.glyph(ICONS.indicators, { size: 28 }) }];
+        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 }) }];
+        let section = null;
         let group;
         for (const item of navigation) {
-          if (item.group && item.group !== group) nav.append(h("div", { class: "qc-picker-group" }, item.group));
-          group = item.group;
-          const button3 = h("button", { type: "button", class: "qc-picker-collection", "data-picker-collection": item.id }, item.id === "favorites" ? star(deps.icons, false) : item.icon, h("span", {}, item.label));
+          if (!section || !!item.group && item.group !== group) {
+            section = h("div", { class: "qc-picker-section" }, item.group ? h("div", { class: "qc-picker-group" }, item.group) : null);
+            nav.append(section);
+            group = item.group;
+          }
+          const button3 = h("button", { type: "button", class: "qc-picker-collection", "data-picker-collection": item.id }, h("span", { class: "qc-picker-collection-icon" }, item.icon), h("span", { class: "qc-picker-collection-label" }, item.label));
           button3.addEventListener("click", () => {
             collection = item.id;
             void refresh();
           });
-          nav.append(button3);
+          section.append(button3);
         }
       };
-      input.addEventListener("input", () => {
-        query = input.value;
-        void refresh();
-      });
+      const renderKinds = () => {
+        const declared = kinds ?? [];
+        if (kind !== null && kind !== INDICATOR_KIND && !declared.some((row2) => row2.id === kind)) kind = null;
+        const group = h("div", { class: "qc-search-class-group", role: "group", "aria-label": t("picker.kindFilter") });
+        for (const entry of [{ id: "", label: t("picker.allKinds") }, { id: INDICATOR_KIND, label: t("picker.indicators") }, ...declared]) {
+          const chip = button2({ label: entry.label, text: entry.label, className: "qc-chip qc-search-class", pressed: (entry.id || null) === kind, onClick: () => {
+            kind = entry.id || null;
+            render();
+          } });
+          chip.dataset.pickerKind = entry.id;
+          group.append(chip);
+        }
+        replace(strip, group);
+        strip.hidden = declared.length === 0;
+      };
+      input.addEventListener("input", () => setQuery(input.value));
       input.addEventListener("keydown", (event) => {
         if (event.key === "ArrowDown" && roveFocus(list, event)) event.preventDefault();
       });
@@ -25795,27 +25905,21 @@ function openIndicatorPicker(deps) {
           input.focus();
         } else if (roveFocus(list, event)) event.preventDefault();
       });
-      box2.append(h("div", { class: "qc-picker-header" }, h("span", { class: "qc-title" }, t("picker.title")), close), h("div", { class: "qc-picker-searchbar" }, searchGlyph(deps.icons), input), h("div", { class: "qc-picker-body" }, nav, h("div", { class: "qc-picker-content" }, h("div", { class: "qc-picker-tabs" }, h("span", { class: "qc-picker-tab" }, t("picker.title"))), list, status2)));
+      box2.append(searchField(deps.icons, input, clear), strip, h("div", { class: "qc-picker-body" }, nav, h("div", { class: "qc-picker-content" }, list, status2)));
+      renderKinds();
       renderNavigation();
       redraw = render;
       offLocale = deps.i18n.onChange(() => {
         if (!dialog.open()) return;
         box2.setAttribute("aria-label", t("picker.title"));
-        box2.querySelector(".qc-title").textContent = t("picker.title");
-        box2.querySelector(".qc-picker-tab").textContent = t("picker.title");
         input.placeholder = t("picker.search");
         input.setAttribute("aria-label", t("picker.search"));
-        name(close, t("search.close"));
+        name(clear, t("search.clear"));
         nav.setAttribute("aria-label", t("picker.collections"));
         list.setAttribute("aria-label", t("picker.title"));
-        try {
-          collections = source3 ? pickerCollections(source3.collections) : [];
-          hostValid = collections !== null && (!source3 || typeof source3.list === "function" && typeof source3.act === "function");
-        } catch {
-          collections = null;
-          hostValid = false;
-        }
+        readHost();
         if (!["builtin", "favorites", ...(collections ?? []).map((row2) => row2.id)].includes(collection)) collection = "builtin";
+        renderKinds();
         renderNavigation();
         void refresh();
       });
@@ -25994,7 +26098,7 @@ function buildSearchSurface(deps, box2, frame2) {
   };
   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 clear = searchClear(deps.icons, t("search.clear"), () => setQuery(""));
   const rule = offerOps ? h("span", { class: "qc-search-rule", "aria-hidden": "true" }) : null;
   const showClear = (shown2) => {
     clear.hidden = !shown2;
@@ -26027,8 +26131,7 @@ function buildSearchSurface(deps, box2, frame2) {
     }
     setOps(opsOpen);
   }
-  const actions2 = h("span", { class: "qc-search-actions-field" }, clear, rule, offerOps ? ops : null, offerOps ? opsToggle : null);
-  const field = h("div", { class: "qc-search-field" }, deps.icons.glyph(ICONS.search, { size: 28, className: "qc-search-magnifier" }), input, actions2);
+  const field = searchField(deps.icons, input, clear, rule, offerOps ? ops : null, offerOps ? opsToggle : null);
   const classes = compare ? null : deps.classes();
   const branches = classes ? classBranches(classes) : [];
   const allShown = display.allClasses !== false;
@@ -26185,9 +26288,9 @@ function buildSearchSurface(deps, box2, frame2) {
         }
         option.appendChild(source3);
         if (compare) {
-          const actions3 = h("span", { class: "qc-search-actions" });
+          const actions2 = h("span", { class: "qc-search-actions" });
           for (const p of PLACEMENTS2) {
-            actions3.appendChild(
+            actions2.appendChild(
               button2({
                 label: t(p.label),
                 text: t(p.label),
@@ -26199,7 +26302,7 @@ function buildSearchSurface(deps, box2, frame2) {
               })
             );
           }
-          option.appendChild(actions3);
+          option.appendChild(actions2);
         }
       }
       option.addEventListener("click", () => act(entry));
@@ -29881,8 +29984,8 @@ function createChartSettingsDialog(deps) {
       role: "chart-settings",
       width: 750,
       veil: false,
-      passThrough: true,
-      // Escape, the close and the host's teardown end the session as the dialog begins to close.
+      // Escape, the close, a press outside the dialog and the host's teardown end the session as
+      // the dialog begins to close.
       onClosing: () => {
         if (s && !s.settled) cancel(s);
       },