flexdesk 0.17.0 → 0.17.2

package/dist/tiles.js

@@ -35,8 +35,8 @@ import {
   purge,
   resize,
   strideDownsampleShared
-} from "./chunk-MCIXFNVF.js";
-import "./chunk-Q36EPT2R.js";
+} from "./chunk-RMTRWWEO.js";
+import "./chunk-LWV23YVE.js";
 import {
   isHexColor
 } from "./chunk-CVMCZZX2.js";

package/dist/widgets.js

@@ -14,9 +14,6 @@ import {
   renderMarkdown,
   setHelpProvider
 } from "./chunk-JKZLNKG6.js";
-import {
-  AutocompleteField
-} from "./chunk-QWQJUDPD.js";
 import {
   TAB_LEVELS,
   createTabs
@@ -41,30 +38,51 @@ import {
 } from "./chunk-D3COLZZ2.js";
 import {
   ACTIONS,
+  AutocompleteField,
+  CELL_EDITORS,
   CellEditorHost,
   CellSelection,
   DEFAULT_HISTORY_LIMIT,
   DataTable,
+  EDITOR_MESSAGES,
   ISO_DATE,
   ISO_DATETIME,
   PAGING_HARD_LIMIT,
   PAGING_SOFT_LIMIT,
   StagedHistory,
   attachInlineRenamer,
+  createBoolEditor,
   createChipsFilter,
+  createChoiceEditor,
+  createDateTimeEditor,
+  createMultiTextEditor,
+  createNumberEditor,
   createRafResizeObserver,
   createTextEditor,
+  dateOrder,
   detectSeries,
+  editorTypeOf,
   formatDate,
+  formatDateTimeForEdit,
   formatDuration,
+  formatNumberForEdit,
+  fromTSV,
   matchDateFilter,
   matchDurationFilter,
+  normalizeOptions,
+  numberSeparators,
+  parseBool,
+  parseChoice,
   parseDatePeriod,
+  parseDateTime,
   parseDateValue,
   parseDuration,
+  parseNumber,
   projectSeries,
-  resolvePaging
-} from "./chunk-Q36EPT2R.js";
+  resolvePaging,
+  toTSV,
+  tsvCell
+} from "./chunk-LWV23YVE.js";
 import {
   ColorField,
   DEFAULT_WINDOW_STORAGE_KEY,
@@ -3921,6 +3939,51 @@ function fitNumber(n, { min, max, step }) {
   if (lo != null && at(k) < lo) k = Math.ceil((lo - base) / s - EPS);
   return at(k);
 }
+function filterBox(onInput) {
+  const label = el2("label", "twm-settings__search");
+  const input = el2("input", "twm-settings__search-input");
+  input.type = "search";
+  input.placeholder = "Filter settings\u2026";
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  input.setAttribute("aria-label", "Filter settings");
+  input.addEventListener("input", () => onInput(input.value));
+  label.append(icon("search"), input);
+  return { label, input };
+}
+function categoryNav(onSelect) {
+  const nav = el2("nav", "twm-settings__nav");
+  nav.setAttribute("aria-label", "Settings categories");
+  nav.addEventListener("click", (e) => {
+    const btn = e.target.closest?.("[data-category]");
+    if (btn && nav.contains(btn)) onSelect(btn.dataset.category);
+  });
+  return nav;
+}
+function paintCategories(nav, categories, active) {
+  const buttons = categories.map((cat) => {
+    const b = el2("button", "twm-settings__cat");
+    b.type = "button";
+    b.dataset.category = cat.id;
+    if (cat.id === active) {
+      b.classList.add("twm-settings__cat--active");
+      b.setAttribute("aria-current", "page");
+    }
+    b.append(icon(cat.icon || "tune"), el2("span", "twm-settings__cat-label", cat.label ?? cat.id));
+    if (cat.description) b.title = String(cat.description);
+    return b;
+  });
+  nav.replaceChildren(...buttons);
+}
+function resetAllButton(onClick) {
+  const b = el2("button", "twm-btn twm-settings__reset-all");
+  b.type = "button";
+  b.append(icon("restart_alt"), el2("span", "", "Reset all"));
+  b.addEventListener("click", () => {
+    onClick();
+  });
+  return b;
+}
 var SettingsView = class extends ComponentBase {
   /**
    * @param {object}    o
@@ -3930,6 +3993,8 @@ var SettingsView = class extends ComponentBase {
    * @param {string}   [o.category] the category shown first (default: the first)
    * @param {number}   [o.textDebounceMs]
    * @param {string}   [o.title='Settings']  the sidebar heading
+   * @param {boolean}  [o.sidebar=true]  false leaves the sidebar (filter,
+   *        categories, *Reset all*) out, for a `SettingsCategories` elsewhere
    */
   constructor({
     store,
@@ -3938,6 +4003,7 @@ var SettingsView = class extends ComponentBase {
     category = null,
     textDebounceMs = SETTINGS_TEXT_DEBOUNCE_MS,
     title = "Settings",
+    sidebar = true,
     logger
   } = {}) {
     super({ eventBus, logger });
@@ -3953,6 +4019,8 @@ var SettingsView = class extends ComponentBase {
     this._query = "";
     this._debounceMs = textDebounceMs;
     this._title = title;
+    this._sidebar = sidebar !== false;
+    this._listeners = /* @__PURE__ */ new Set();
     this.root = null;
     this._nav = null;
     this._content = null;
@@ -3966,36 +4034,19 @@ var SettingsView = class extends ComponentBase {
   mount(container) {
     if (this.root) return this.root;
     const root = el2("div", "twm-settings");
-    const side = el2("aside", "twm-settings__sidebar");
-    const head = el2("div", "twm-settings__sidebar-title");
-    head.append(icon("settings"), el2("span", "", this._title));
-    const search = el2("label", "twm-settings__search");
-    const input = el2("input", "twm-settings__search-input");
-    input.type = "search";
-    input.placeholder = "Filter settings\u2026";
-    input.autocomplete = "off";
-    input.spellcheck = false;
-    input.setAttribute("aria-label", "Filter settings");
-    input.addEventListener("input", () => this.setQuery(input.value));
-    search.append(icon("search"), input);
-    this._search = input;
-    const nav = el2("nav", "twm-settings__nav");
-    nav.setAttribute("aria-label", "Settings categories");
-    nav.addEventListener("click", (e) => {
-      const btn = e.target.closest?.("[data-category]");
-      if (btn && nav.contains(btn)) this.selectCategory(btn.dataset.category);
-    });
-    this._nav = nav;
-    const resetAll = el2("button", "twm-btn twm-settings__reset-all");
-    resetAll.type = "button";
-    resetAll.append(icon("restart_alt"), el2("span", "", "Reset all"));
-    resetAll.addEventListener("click", () => {
-      this.resetAll();
-    });
-    side.append(head, search, nav, resetAll);
+    if (this._sidebar) {
+      const side = el2("aside", "twm-settings__sidebar");
+      const head = el2("div", "twm-settings__sidebar-title");
+      head.append(icon("settings"), el2("span", "", this._title));
+      const search = filterBox((text) => this.setQuery(text));
+      this._search = search.input;
+      this._nav = categoryNav((id) => this.selectCategory(id));
+      side.append(head, search.label, this._nav, resetAllButton(() => this.resetAll()));
+      root.append(side);
+    }
     const content = el2("div", "twm-settings__content");
     this._content = content;
-    root.append(side, content);
+    root.append(content);
     this.root = root;
     container.appendChild(root);
     this._mounted = true;
@@ -4006,6 +4057,7 @@ var SettingsView = class extends ComponentBase {
     this._subs.push(this.eventBus.on("settings:registered", (p) => this.#onRegistered(p)));
     this.#paintNav();
     this.#paintContent();
+    this.#notify();
     return root;
   }
   /** The category on screen (its id), or null. */
@@ -4016,6 +4068,19 @@ var SettingsView = class extends ComponentBase {
   getQuery() {
     return this._query;
   }
+  /** True while the filter is in effect (its trimmed text is not empty). */
+  isFiltering() {
+    return this.#searching();
+  }
+  /**
+   * `fn({ category, query })` after every change of the category, the filter
+   * or the registered categories, until the view is disposed. Answers the
+   * unsubscribe.
+   */
+  subscribe(fn) {
+    this._listeners.add(fn);
+    return () => this._listeners.delete(fn);
+  }
   /** Show one category; clears the filter. */
   selectCategory(id) {
     if (!this.root) return;
@@ -4025,6 +4090,7 @@ var SettingsView = class extends ComponentBase {
     if (this._search) this._search.value = "";
     this.#paintNav();
     this.#paintContent();
+    this.#notify();
   }
   /** Search every category; an empty query goes back to the category. */
   setQuery(query) {
@@ -4034,6 +4100,7 @@ var SettingsView = class extends ComponentBase {
     if (this._search && this._search.value !== q) this._search.value = q;
     this.#paintNav();
     this.#paintContent();
+    this.#notify();
   }
   /** Reset one category after `confirm`; resolves true when it was reset. */
   async resetCategory(id = this.getCategory()) {
@@ -4079,6 +4146,7 @@ var SettingsView = class extends ComponentBase {
     this._nav = null;
     this._content = null;
     this._search = null;
+    this._listeners.clear();
     super.dispose();
   }
   // ── store events ─────────────────────────────────────────────────────
@@ -4097,10 +4165,11 @@ var SettingsView = class extends ComponentBase {
     const touches = this.#searching() || !this._rows.size || paths.some((p) => schema[p]?.category === active);
     if (touches) {
       this.#paintContent();
-      return;
+    } else {
+      this.#flushAll();
+      this.#syncAll();
     }
-    this.#flushAll();
-    this.#syncAll();
+    this.#notify();
   }
   /** True while a filter is in effect: the trimmed query is not empty. */
   #searching() {
@@ -4122,20 +4191,13 @@ var SettingsView = class extends ComponentBase {
     return cats.find((c) => c.id === this._category) ?? cats[0] ?? null;
   }
   #paintNav() {
-    const active = this.#searching() ? null : this.getCategory();
-    const buttons = this.store.getCategories().map((cat) => {
-      const b = el2("button", "twm-settings__cat");
-      b.type = "button";
-      b.dataset.category = cat.id;
-      if (cat.id === active) {
-        b.classList.add("twm-settings__cat--active");
-        b.setAttribute("aria-current", "page");
-      }
-      b.append(icon(cat.icon || "tune"), el2("span", "twm-settings__cat-label", cat.label ?? cat.id));
-      if (cat.description) b.title = String(cat.description);
-      return b;
-    });
-    this._nav.replaceChildren(...buttons);
+    if (!this._nav) return;
+    paintCategories(this._nav, this.store.getCategories(), this.#searching() ? null : this.getCategory());
+  }
+  /** Tell the listeners, after the content is drawn (it settles the category). */
+  #notify() {
+    const state = { category: this.getCategory(), query: this._query };
+    for (const fn of [...this._listeners]) fn(state);
   }
   #paintContent() {
     this.#flushAll();
@@ -4400,6 +4462,54 @@ var SettingsView = class extends ComponentBase {
     }
   }
 };
+var SettingsCategories = class extends ComponentBase {
+  /**
+   * @param {object}       o
+   * @param {SettingsView} o.view  the view it lists the categories of
+   */
+  constructor({ view, logger } = {}) {
+    if (!(view instanceof SettingsView)) {
+      throw new TypeError("SettingsCategories: `view` must be a SettingsView");
+    }
+    super({ eventBus: view.eventBus, logger });
+    this.view = view;
+    this.root = null;
+    this._search = null;
+    this._nav = null;
+    this._unsubscribe = null;
+  }
+  /** Build the list into `container` (once). */
+  mount(container) {
+    if (this.root) return this.root;
+    const view = this.view;
+    const root = el2("div", "twm-settings-categories");
+    const search = filterBox((text) => view.setQuery(text));
+    this._search = search.input;
+    this._nav = categoryNav((id) => view.selectCategory(id));
+    root.append(search.label, this._nav, resetAllButton(() => view.resetAll()));
+    this.root = root;
+    container.appendChild(root);
+    this._mounted = true;
+    this._unsubscribe = view.subscribe(() => this.#paint());
+    this.#paint();
+    return root;
+  }
+  dispose() {
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+    this.root?.remove();
+    this.root = null;
+    this._search = null;
+    this._nav = null;
+    super.dispose();
+  }
+  #paint() {
+    const view = this.view;
+    const q = view.getQuery();
+    if (this._search.value !== q) this._search.value = q;
+    paintCategories(this._nav, view.store.getCategories(), view.isFiltering() ? null : view.getCategory());
+  }
+};
 function settingsViewContent(opts = {}) {
   return (hostEl, props = {}) => {
     const view = new SettingsView({ ...opts, category: props?.category ?? opts.category ?? null });
@@ -6630,7 +6740,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
       this.container = existingContainer;
       this.rootEl = existingContainer.querySelector(".twm-notification-center");
       this.listEl = existingContainer.querySelector(".twm-notification-center__list");
-      this.liveRegionEl = existingContainer.querySelector(".notification-center__live-region");
+      this.liveRegionEl = existingContainer.querySelector(".twm-notification-center__live-region");
       this._mounted = true;
       this.#subscribeEvents();
       this.#claimToastBus();
@@ -6644,7 +6754,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
     this.listEl = document.createElement("div");
     this.listEl.className = "twm-notification-center__list";
     this.liveRegionEl = document.createElement("div");
-    this.liveRegionEl.className = "notification-center__live-region";
+    this.liveRegionEl.className = "twm-notification-center__live-region";
     this.liveRegionEl.setAttribute("aria-live", "polite");
     this.liveRegionEl.setAttribute("aria-atomic", "true");
     this.liveRegionEl.style.position = "absolute";
@@ -7067,7 +7177,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
     if (!this.#summaryEl) {
       const more2 = document.createElement("button");
       more2.type = "button";
-      more2.className = "notification twm-notification--summary";
+      more2.className = "twm-notification twm-notification--summary";
       more2.addEventListener("click", () => {
         const held = [...this.held];
         try {
@@ -7194,8 +7304,8 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
   #patchItem(entry, notification) {
     const item = entry.el;
     if (entry.severity !== notification.severity) {
-      if (entry.severity) item.classList.remove(`notification--${entry.severity}`);
-      item.classList.add("notification", `notification--${notification.severity}`);
+      if (entry.severity) item.classList.remove(`twm-notification--${entry.severity}`);
+      item.classList.add("twm-notification", `twm-notification--${notification.severity}`);
       entry.severity = notification.severity;
     }
     if (entry.titleEl) _NotificationCenter.#setText(entry.titleEl, notification.title);
@@ -8337,6 +8447,7 @@ export {
   ALERT_LEVELS,
   ActionDropdown,
   AutocompleteField,
+  CELL_EDITORS,
   COLUMN_FIT,
   CONVERSATION_COMPOSER_MAX_PX,
   CONVERSATION_PIN_WITHIN_PX,
@@ -8352,6 +8463,7 @@ export {
   DataTable,
   DocumentOutline,
   DragReorder,
+  EDITOR_MESSAGES,
   FactTable,
   HelpModal,
   ISO_DATE,
@@ -8373,6 +8485,7 @@ export {
   SCALAR_TYPES,
   SETTINGS_TEXT_DEBOUNCE_MS,
   STEP_STATES,
+  SettingsCategories,
   SettingsView,
   SlideOutPanel,
   SliderField,
@@ -8390,11 +8503,16 @@ export {
   attachInlineRenamer,
   barCovered,
   createAlertLog,
+  createBoolEditor,
   createChipsFilter,
+  createChoiceEditor,
+  createDateTimeEditor,
   createDetailHeader,
   createDocumentOutline,
   createFactTable,
   createMenuBar,
+  createMultiTextEditor,
+  createNumberEditor,
   createRafResizeObserver,
   createRecordList,
   createScrollLock,
@@ -8406,14 +8524,19 @@ export {
   createTreeCategory,
   createTreeItem,
   createTreeNode,
+  dateOrder,
   dayLabel,
   detectSeries,
+  editorTypeOf,
   endsTextSelection,
   filterTree,
   fitColumns,
   formatDate,
+  formatDateTimeForEdit,
   formatDuration,
   formatElapsed,
+  formatNumberForEdit,
+  fromTSV,
   getToastBus,
   helpCategories,
   helpCopy,
@@ -8438,12 +8561,18 @@ export {
   mountGalleryPicker,
   normalizeHex,
   normalizeLevel,
+  normalizeOptions,
+  numberSeparators,
   openConfirm,
   openForm,
   openModal,
+  parseBool,
+  parseChoice,
   parseDatePeriod,
+  parseDateTime,
   parseDateValue,
   parseDuration,
+  parseNumber,
   projectSeries,
   refTypesFor,
   renderMarkdown,
@@ -8466,12 +8595,14 @@ export {
   showSelectDialog,
   suppressNativeContextMenu,
   thumbGeometry,
+  toTSV,
   toastError,
   toastInfo,
   toastSuccess,
   toastWarn,
   toggleCategory,
   toggleNode,
+  tsvCell,
   updateDetailHeader,
   wheelStripSideways,
   worstLevel