weml-monaco 0.5.2 → 0.7.0

package/dist/panel.cjs

@@ -0,0 +1,1314 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/panel/index.ts
+var panel_exports = {};
+__export(panel_exports, {
+  PANEL_CLASS: () => PANEL_CLASS,
+  PANEL_CSS: () => PANEL_CSS,
+  createWemlPanel: () => createWemlPanel,
+  injectPanelStyles: () => injectPanelStyles
+});
+module.exports = __toCommonJS(panel_exports);
+
+// src/panel/panes.ts
+var MIN_BODY = 48;
+var HEADER = 22;
+function createPanes(specs, state, save) {
+  const root = document.createElement("div");
+  root.className = "weml-panes";
+  const collapsed = new Set(state.collapsed ?? []);
+  const weights = { ...state.weights };
+  const cleanups = [];
+  const panes = specs.map((spec) => {
+    const pane = document.createElement("section");
+    pane.className = "pane";
+    pane.setAttribute("data-group", spec.id);
+    const sash = document.createElement("div");
+    sash.className = "sash";
+    sash.setAttribute("aria-hidden", "true");
+    const header = document.createElement("div");
+    header.className = "pane-header";
+    header.setAttribute("role", "button");
+    header.tabIndex = 0;
+    header.textContent = spec.title;
+    const body = document.createElement("div");
+    body.className = spec.fill ? "pane-body fill" : "pane-body";
+    body.append(spec.body);
+    pane.append(sash, header, body);
+    root.append(pane);
+    return { spec, pane, sash, header };
+  });
+  const isOpen = (id) => !collapsed.has(id);
+  const layout = () => {
+    const known = panes.filter((p) => isOpen(p.spec.id)).map((p) => weights[p.spec.id]).filter((w) => w !== void 0);
+    const fallback = known.length > 0 ? known.reduce((sum, w) => sum + w, 0) / known.length : 1;
+    let openAbove = false;
+    for (const { spec, pane, header } of panes) {
+      const open = isOpen(spec.id);
+      pane.classList.toggle("collapsed", !open);
+      header.setAttribute("aria-expanded", String(open));
+      pane.style.flex = open ? `${weights[spec.id] ?? fallback} 1 0px` : "0 0 auto";
+      pane.classList.toggle("resizable", open && openAbove);
+      openAbove || (openAbove = open);
+    }
+  };
+  const persist = () => {
+    state.collapsed = [...collapsed];
+    state.weights = { ...weights };
+    save();
+  };
+  panes.forEach(({ spec, pane, sash, header }, index) => {
+    const toggle = () => {
+      if (collapsed.has(spec.id)) collapsed.delete(spec.id);
+      else collapsed.add(spec.id);
+      persist();
+      layout();
+    };
+    header.addEventListener("click", toggle);
+    header.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggle();
+      }
+    });
+    sash.addEventListener("pointerdown", (event) => {
+      if (!pane.classList.contains("resizable")) return;
+      const above = panes.slice(0, index).reverse().find((p) => isOpen(p.spec.id));
+      if (!above) return;
+      event.preventDefault();
+      sash.setPointerCapture?.(event.pointerId);
+      sash.classList.add("active");
+      for (const open of panes.filter((p) => isOpen(p.spec.id))) {
+        weights[open.spec.id] = open.pane.getBoundingClientRect().height;
+      }
+      const startY = event.clientY;
+      const aboveStart = weights[above.spec.id];
+      const paneStart = weights[spec.id];
+      const min = HEADER + MIN_BODY;
+      const move = (moveEvent) => {
+        const total = aboveStart + paneStart;
+        const aboveHeight = Math.min(Math.max(aboveStart + moveEvent.clientY - startY, min), total - min);
+        weights[above.spec.id] = aboveHeight;
+        weights[spec.id] = total - aboveHeight;
+        layout();
+      };
+      const end = () => {
+        sash.classList.remove("active");
+        sash.removeEventListener("pointermove", move);
+        persist();
+      };
+      sash.addEventListener("pointermove", move);
+      sash.addEventListener("pointerup", end, { once: true });
+      sash.addEventListener("pointercancel", end, { once: true });
+    });
+    sash.addEventListener("dblclick", () => {
+      for (const key of Object.keys(weights)) delete weights[key];
+      persist();
+      layout();
+    });
+  });
+  layout();
+  const onScroll = (event) => {
+    const target = event.target;
+    if (target instanceof HTMLElement && target.matches(".pane-body, .scroll")) {
+      target.classList.toggle("scrolled", target.scrollTop > 0);
+    }
+  };
+  root.addEventListener("scroll", onScroll, true);
+  cleanups.push(() => root.removeEventListener("scroll", onScroll, true));
+  return {
+    element: root,
+    dispose: () => cleanups.forEach((cleanup) => cleanup())
+  };
+}
+
+// src/panel/dom.ts
+function element(tag, options = {}, children = []) {
+  const node = document.createElement(tag);
+  if (options.className) node.className = options.className;
+  if (options.text !== void 0) node.textContent = options.text;
+  if (options.title) node.title = options.title;
+  node.append(...children);
+  return node;
+}
+var ICONS = {
+  search: '<circle cx="7" cy="7" r="4.5"/><path d="M10.3 10.3L14 14"/>',
+  copy: '<rect x="5.5" y="5.5" width="8" height="8" rx="1"/><path d="M3.5 10.5h-1v-8h8v1"/>',
+  insert: '<path d="M13 3v5.5a2 2 0 0 1-2 2H4"/><path d="M6.5 8L4 10.5 6.5 13"/>',
+  wrap: '<path d="M5.5 3H3.5v10h2"/><path d="M10.5 3h2v10h-2"/><path d="M6.5 8h3"/>',
+  add: '<path d="M8 3.5v9M3.5 8h9"/>'
+};
+function icon(name) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("aria-hidden", "true");
+  svg.innerHTML = ICONS[name];
+  return svg;
+}
+function button(options, onClick) {
+  const node = element("button", { className: options.className, text: options.text, title: options.title });
+  node.type = options.type ?? "button";
+  if (options.icon) {
+    node.append(icon(options.icon));
+    if (options.title) node.setAttribute("aria-label", options.title);
+  }
+  if (onClick) node.addEventListener("click", onClick);
+  return node;
+}
+
+// src/panel/searchPane.ts
+function createSearchPane(search, memory) {
+  const account = element("div", { className: "account" });
+  const query = element("input", { className: "grow" });
+  query.type = "text";
+  query.placeholder = "Search\u2026";
+  query.setAttribute("aria-label", "Search suggestions");
+  const lang = element("input", { className: "weml-lang", title: "Language code, e.g. en" });
+  lang.type = "text";
+  lang.placeholder = "lang";
+  lang.setAttribute("aria-label", "Language");
+  const searchButton = button({ icon: "search", title: "Search", className: "icon", type: "submit" });
+  const form = element("form", {}, [element("div", { className: "row" }, [query, lang, searchButton])]);
+  form.hidden = true;
+  const status = element("div", { className: "status" });
+  status.setAttribute("aria-live", "polite");
+  const results = element("ol", { className: "results scroll" });
+  const root = element("section", {}, [account, form, status, results]);
+  lang.value = memory.get()?.lang ?? "";
+  lang.addEventListener("input", () => memory.set({ lang: lang.value }));
+  let generation = 0;
+  let disposed = false;
+  const renderResults = (state) => {
+    searchButton.disabled = !!state.loading;
+    status.className = state.error ? "status error" : "status";
+    status.textContent = state.loading ? "Searching\u2026" : state.error ?? (state.query && state.results?.length === 0 ? `Nothing found for \u201C${state.query}\u201D` : "");
+    results.replaceChildren();
+    (state.results ?? []).forEach((suggestion, index) => {
+      const item = element("li");
+      item.append(element("span", { className: "number", text: String(index + 1) }));
+      const meta = element("div", { className: "meta" });
+      const paraId = element("span", { className: "field" }, [
+        element("span", { className: "label", text: "ParaId " }),
+        element("span", { className: "value", text: suggestion.paraId || "\u2014" })
+      ]);
+      if (suggestion.paraId) {
+        paraId.append(button({ icon: "copy", title: "Copy ParaId", className: "icon flat" }, () => search.copy(suggestion.paraId)));
+      }
+      meta.append(paraId, element("span", { className: "field" }, [
+        element("span", { className: "label", text: "BookCode " }),
+        element("span", { className: "value", text: suggestion.bookCode || "\u2014" })
+      ]));
+      item.append(meta, element("div", { className: "title", text: suggestion.title }));
+      if (suggestion.link) {
+        const link = suggestion.link;
+        item.append(element("div", { className: "link" }, [
+          element("code", { text: link }),
+          element("div", { className: "actions" }, [
+            button({ icon: "copy", title: "Copy link", className: "icon flat" }, () => search.copy(link)),
+            button(
+              {
+                icon: "insert",
+                title: "Insert the link in place of the selection (the selection becomes its label)",
+                className: "icon flat primary"
+              },
+              () => search.insertLink(index)
+            )
+          ])
+        ]));
+      }
+      results.append(item);
+    });
+  };
+  const clearResults = () => {
+    generation++;
+    renderResults({ query: null, results: [] });
+  };
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const text = query.value.trim();
+    if (!text) {
+      clearResults();
+      return;
+    }
+    const current = ++generation;
+    renderResults({ query: text, loading: true });
+    search.search(text, lang.value.trim()).then(
+      (found) => {
+        if (!disposed && current === generation) renderResults({ query: text, results: found });
+      },
+      (error) => {
+        if (!disposed && current === generation) {
+          renderResults({ query: text, error: error instanceof Error ? error.message : "Search failed" });
+        }
+      }
+    );
+  });
+  const renderState = (state) => {
+    account.replaceChildren();
+    const fallback = state.kind === "not-configured" ? void 0 : state.defaultLanguage || (state.kind === "signed-in" ? "en" : void 0);
+    if (!lang.value && fallback) lang.value = fallback;
+    const signedIn = state.kind === "signed-in";
+    account.hidden = signedIn;
+    form.hidden = !signedIn;
+    if (!signedIn) clearResults();
+    if (state.kind === "not-configured") {
+      account.append(element("span", { text: state.message }));
+      if (state.canOpenSettings && search.openSettings) {
+        account.append(button({ text: "Open Settings", className: "link" }, () => search.openSettings?.()));
+      }
+    } else if (state.kind === "signed-out") {
+      const failure = element("span", { className: "status error" });
+      const signIn = () => {
+        failure.textContent = "";
+        Promise.resolve(search.signIn()).catch((error) => {
+          if (!disposed) failure.textContent = error instanceof Error ? error.message : "Sign-in failed";
+        });
+      };
+      account.append(button({ text: "Sign in", className: "full", title: "Sign in to EGW Writings" }, signIn), failure);
+    }
+  };
+  const refresh = () => {
+    Promise.resolve(search.getState()).then(
+      (state) => {
+        if (!disposed) renderState(state);
+      },
+      () => {
+        if (!disposed) renderState({ kind: "not-configured", message: "Search is not available." });
+      }
+    );
+  };
+  const unsubscribe = search.onDidChangeState(refresh);
+  refresh();
+  return {
+    element: root,
+    dispose: () => {
+      disposed = true;
+      unsubscribe();
+    }
+  };
+}
+
+// src/panel/styles.ts
+var PANEL_CLASS = "weml-panel";
+var STYLE_ID = "weml-panel-styles";
+var PANEL_CSS = `
+.weml-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-family: var(--vscode-font-family, system-ui, sans-serif);
+    font-size: var(--vscode-font-size, 13px);
+    /* A webview's own; a host page's (Mantine: 1.55) would make every row taller than in VS Code. */
+    line-height: normal;
+    color: var(--vscode-foreground);
+}
+
+/* Panes, like the Explorer's (Outline, Timeline): the panel's height is shared by the open panes,
+   each scrolls on its own, a collapsed one is just its 22px header; the sash on a pane's top edge
+   resizes it against the open pane above. */
+.weml-panel .weml-panes { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
+.weml-panel .pane { position: relative; display: flex; flex-direction: column; min-height: 22px; overflow: hidden; }
+.weml-panel .pane:not(.collapsed) { min-height: 70px; }
+/* The border colours fall back to editorWidget.border: Monaco defines no sideBar*, panel or widget
+   colours, only the editor's own, and without it the panes and results run into each other. */
+.weml-panel .pane + .pane { border-top: 1px solid var(--vscode-sideBarSectionHeader-border, var(--vscode-panel-border, var(--vscode-editorWidget-border, transparent))); }
+.weml-panel .pane-header {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex: none;
+    height: 22px;
+    padding: 0 8px 0 2px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));
+    background: var(--vscode-sideBarSectionHeader-background, transparent);
+}
+.weml-panel .pane-header::before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    flex: none;
+    /* chevron-right, turned down when open */
+    background: currentColor;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / 16px no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / 16px no-repeat;
+    transform: rotate(90deg);
+    transition: transform .1s;
+}
+.weml-panel .pane.collapsed .pane-header::before { transform: none; }
+.weml-panel .pane-header:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
+.weml-panel .pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 12px 12px 20px; }
+.weml-panel .pane.collapsed .pane-body { display: none; }
+/* A pane that lays itself out (the search): nothing scrolls but its .scroll part. */
+.weml-panel .pane-body.fill { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
+.weml-panel .pane-body.fill > section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
+.weml-panel .pane-body.fill > section > * { flex: none; }
+.weml-panel .pane-body.fill .scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 12px; }
+
+.weml-panel .sash { position: absolute; top: -2px; left: 0; right: 0; height: 4px; z-index: 10; display: none; }
+.weml-panel .pane.resizable .sash { display: block; cursor: ns-resize; }
+.weml-panel .sash:hover, .weml-panel .sash.active {
+    background: var(--vscode-sash-hoverBorder, var(--vscode-focusBorder));
+    transition: background .1s .2s;
+}
+
+.weml-panel .pane-body section { margin-bottom: 14px; }
+.weml-panel .pane-body section:last-child { margin-bottom: 0; }
+.weml-panel h2 {
+    margin: 0 0 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    color: var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));
+    opacity: .8;
+}
+.weml-panel [hidden] { display: none !important; }
+.weml-panel .row { display: flex; gap: 6px; margin-bottom: 6px; }
+.weml-panel input, .weml-panel select, .weml-panel button {
+    box-sizing: border-box;
+    min-width: 0;
+    font-family: inherit;
+    font-size: inherit;
+    color: var(--vscode-input-foreground);
+    background: var(--vscode-input-background);
+    border: 1px solid var(--vscode-input-border, transparent);
+    border-radius: 2px;
+    padding: 4px 6px;
+    /* 26px with the padding and border, VS Code's input and button height (the icon buttons too). */
+    line-height: 16px;
+}
+.weml-panel select { height: 26px; padding-block: 0; }
+.weml-panel select {
+    color: var(--vscode-dropdown-foreground);
+    background: var(--vscode-dropdown-background);
+    border-color: var(--vscode-dropdown-border, transparent);
+}
+.weml-panel input:focus, .weml-panel select:focus, .weml-panel button:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
+.weml-panel .full { width: 100%; }
+.weml-panel .grow { flex: 1 1 auto; }
+.weml-panel .weml-lang { flex: 0 0 44px; }
+
+/* Icon buttons: a square with a 16px inline SVG; the name is in title / aria-label. */
+.weml-panel button.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+}
+.weml-panel button.icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
+.weml-panel button.icon.flat {
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: none;
+    color: var(--vscode-icon-foreground, var(--vscode-foreground));
+    border-radius: 3px;
+}
+.weml-panel button.icon.flat:hover { background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, .2)); }
+/* The main action of a row: the same small square, filled like a primary button. */
+.weml-panel button.icon.flat.primary { color: var(--vscode-button-foreground); background: var(--vscode-button-background); }
+.weml-panel button.icon.flat.primary:hover { background: var(--vscode-button-hoverBackground); }
+
+/* The tag picker: an input with its action inside (as the find widget's toggles), and a list drawn
+   as the quick pick \u2014 rows, matched characters, group separators \u2014 on the quick input's colours,
+   which VS Code and Monaco (its own command palette) both define. */
+.weml-panel .tool-field {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    box-sizing: border-box;
+    height: 26px;
+    padding-right: 2px;
+    background: var(--vscode-input-background);
+    border: 1px solid var(--vscode-input-border, transparent);
+    border-radius: 2px;
+}
+.weml-panel .tool-field:focus-within { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
+.weml-panel .tool-field input { flex: 1 1 auto; height: 24px; border: none; background: none; }
+.weml-panel .tool-field input:focus { outline: none; }
+.weml-panel .tool-field input::placeholder, .weml-panel input::placeholder { color: var(--vscode-input-placeholderForeground); }
+.weml-panel button[aria-disabled="true"] { opacity: .5; cursor: default; }
+.weml-panel button.icon.flat.primary[aria-disabled="true"]:hover { background: var(--vscode-button-background); }
+.weml-panel .tool-list {
+    position: fixed;
+    z-index: 1000;
+    box-sizing: border-box;
+    overflow-y: auto;
+    padding: 4px 0;
+    color: var(--vscode-quickInput-foreground, var(--vscode-foreground));
+    background: var(--vscode-quickInput-background, var(--vscode-editorWidget-background));
+    border: 1px solid var(--vscode-widget-border, var(--vscode-editorWidget-border, transparent));
+    border-radius: 3px;
+    box-shadow: 0 0 8px 2px var(--vscode-widget-shadow, rgba(0, 0, 0, .36));
+}
+.weml-panel .tool-group + .tool-group { margin-top: 4px; border-top: 1px solid var(--vscode-pickerGroup-border, transparent); }
+.weml-panel .tool-group-label {
+    padding: 2px 8px 0;
+    text-align: right;
+    font-size: 11px;
+    line-height: 16px;
+    color: var(--vscode-pickerGroup-foreground, var(--vscode-descriptionForeground));
+}
+.weml-panel .tool-option {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 22px;
+    padding: 0 8px;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.weml-panel .tool-option:hover { background: var(--vscode-list-hoverBackground); }
+.weml-panel .tool-option.active {
+    color: var(--vscode-quickInputList-focusForeground, var(--vscode-list-activeSelectionForeground));
+    background: var(--vscode-quickInputList-focusBackground, var(--vscode-list-activeSelectionBackground));
+}
+.weml-panel .tool-option .highlight { font-weight: 600; color: var(--vscode-list-highlightForeground); }
+.weml-panel .tool-option.active .highlight { color: var(--vscode-list-focusHighlightForeground, var(--vscode-list-highlightForeground)); }
+.weml-panel .tool-kind { margin-left: auto; font-size: 11px; color: var(--vscode-descriptionForeground); }
+.weml-panel .tool-option.active .tool-kind { color: inherit; opacity: .8; }
+.weml-panel .tool-empty { padding: 2px 8px; color: var(--vscode-descriptionForeground); }
+
+/* Scrollbars like the workbench's lists: thin, theme-coloured, shown while the pointer is over the
+   scrolling area; a shadow under the top edge once the content is scrolled. */
+.weml-panel .pane-body, .weml-panel .scroll { scrollbar-gutter: stable; }
+/* Chromium ignores every ::-webkit-scrollbar rule on an element whose scrollbar-color or
+   scrollbar-width is set - and scrollbar-color inherits - drawing its standard scrollbar with arrow
+   buttons instead. Reset both, whoever set them, so the rules below apply. */
+.weml-panel, .weml-panel *, .weml-panel *::before, .weml-panel *::after { scrollbar-color: auto !important; scrollbar-width: auto !important; }
+.weml-panel ::-webkit-scrollbar { width: 10px; height: 10px; }
+.weml-panel ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+.weml-panel ::-webkit-scrollbar-track, .weml-panel ::-webkit-scrollbar-corner { background: transparent; }
+.weml-panel ::-webkit-scrollbar-thumb { background: transparent; }
+.weml-panel .pane-body:hover::-webkit-scrollbar-thumb, .weml-panel .scroll:hover::-webkit-scrollbar-thumb { background: var(--vscode-scrollbarSlider-background); }
+.weml-panel ::-webkit-scrollbar-thumb:hover { background: var(--vscode-scrollbarSlider-hoverBackground) !important; }
+.weml-panel ::-webkit-scrollbar-thumb:active { background: var(--vscode-scrollbarSlider-activeBackground) !important; }
+.weml-panel .pane-body.scrolled, .weml-panel .scroll.scrolled { box-shadow: var(--vscode-scrollbar-shadow, rgba(0, 0, 0, .4)) 0 6px 6px -6px inset; }
+.weml-panel button {
+    cursor: pointer;
+    color: var(--vscode-button-foreground);
+    background: var(--vscode-button-background);
+    border: 1px solid var(--vscode-button-border, transparent);
+}
+.weml-panel button:hover { background: var(--vscode-button-hoverBackground); }
+.weml-panel button:disabled { opacity: .6; cursor: default; }
+.weml-panel button.secondary {
+    color: var(--vscode-button-secondaryForeground);
+    background: var(--vscode-button-secondaryBackground);
+}
+.weml-panel button.secondary:hover { background: var(--vscode-button-secondaryHoverBackground); }
+.weml-panel button.link {
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--vscode-textLink-foreground);
+}
+.weml-panel button.link:hover { background: none; color: var(--vscode-textLink-activeForeground); text-decoration: underline; }
+
+/* Search suggestions */
+.weml-panel .account { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 8px; color: var(--vscode-descriptionForeground); }
+.weml-panel .status { color: var(--vscode-descriptionForeground); margin: 4px 0; }
+.weml-panel .status.error { color: var(--vscode-errorForeground); }
+.weml-panel .results { list-style: none; margin: 0; padding: 0; }
+.weml-panel .results li {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 8px;
+    padding: 6px 0;
+    border-top: 1px solid var(--vscode-widget-border, var(--vscode-panel-border, var(--vscode-editorWidget-border)));
+}
+.weml-panel .results li:last-child { border-bottom: 1px solid var(--vscode-widget-border, var(--vscode-panel-border, var(--vscode-editorWidget-border))); }
+.weml-panel .results .number { grid-row: span 3; color: var(--vscode-descriptionForeground); font-variant-numeric: tabular-nums; }
+.weml-panel .results .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
+.weml-panel .results .label { color: var(--vscode-descriptionForeground); font-size: 11px; }
+.weml-panel .results .value { font-family: var(--vscode-editor-font-family); }
+.weml-panel .results .title { margin: 2px 0; overflow-wrap: anywhere; }
+.weml-panel .results .field { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
+/* The link and its actions share one box: the code, then Copy and Insert in a row under it. */
+.weml-panel .results .link {
+    margin-top: 2px;
+    padding: 4px 6px 2px;
+    border-radius: 3px;
+    background: var(--vscode-textPreformat-background, var(--vscode-textCodeBlock-background));
+}
+.weml-panel .results .link code {
+    display: block;
+    padding: 0;
+    background: none;
+    font-family: var(--vscode-editor-font-family);
+    font-size: 11px;
+    overflow-wrap: anywhere;
+    color: var(--vscode-textPreformat-foreground);
+}
+.weml-panel .results .link .actions { display: flex; justify-content: flex-end; gap: 2px; margin-top: 2px; }
+.weml-panel .dim { color: var(--vscode-descriptionForeground); }
+`;
+function injectPanelStyles(doc = document) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = PANEL_CSS;
+  doc.head.appendChild(style);
+}
+
+// ../weml-language-core/src/generated/schema.ts
+var ENUMS = {
+  "entity-type": {
+    "id": "entity-type",
+    "title": "Entity type",
+    "values": [
+      {
+        "value": "addressee",
+        "name": "Addressee",
+        "description": "For Letter it means person whom this letter is addressed to."
+      },
+      {
+        "value": "date",
+        "name": "Date",
+        "description": "Date entity. For LT/MS it means date when document was written. Optional value contains single date, range of dates (two date via `...`) or two different date via `,` \u2014 all of dates must be in ISO 8601 format."
+      },
+      {
+        "value": "place",
+        "name": "Place",
+        "description": "Place. For Lt/Ms it means place where manuscript was written"
+      },
+      {
+        "value": "topic",
+        "name": "Topic",
+        "description": "Topic entity. For topical index it marks whole topic. For dictionary it marks topic in the header."
+      },
+      {
+        "value": "topic-word",
+        "name": "Topic word",
+        "description": "Topic word entity. For topical index it marks the main term of a topic. For dictionary it marks topic in the regular paragraph."
+      }
+    ]
+  },
+  "horizontal-alignment": {
+    "id": "horizontal-alignment",
+    "title": "Horizontal Alignment",
+    "values": [
+      {
+        "value": "left",
+        "name": "Left",
+        "description": "Align text to the left"
+      },
+      {
+        "value": "center",
+        "name": "Center",
+        "description": "Align text to the center"
+      },
+      {
+        "value": "right",
+        "name": "Right",
+        "description": "Align text to the right"
+      }
+    ]
+  },
+  "figure-alignment": {
+    "id": "figure-alignment",
+    "title": "Figure Alignment",
+    "values": [
+      {
+        "value": "left",
+        "name": "Left",
+        "description": "Align to the left"
+      },
+      {
+        "value": "center",
+        "name": "Center",
+        "description": "Align to the center"
+      },
+      {
+        "value": "right",
+        "name": "Right",
+        "description": "Align to the right"
+      },
+      {
+        "value": "justify",
+        "name": "Justify",
+        "description": "Full-width alignment"
+      }
+    ]
+  },
+  "list-type": {
+    "id": "list-type",
+    "title": "List Type",
+    "values": [
+      {
+        "value": "unordered",
+        "name": "Unordered",
+        "description": "Unordered list. Each item is marked with a bullet."
+      },
+      {
+        "value": "ordered",
+        "name": "Ordered",
+        "description": "Ordered list. Each item is marked with a number."
+      }
+    ]
+  },
+  "non-egw-type": {
+    "id": "non-egw-type",
+    "title": "Non-EGW Type",
+    "values": [
+      {
+        "value": "appendix",
+        "name": "Appendix",
+        "description": "Non-EGW Appendix"
+      },
+      {
+        "value": "comment",
+        "name": "Comment",
+        "description": "Non-EGW Commentary"
+      },
+      {
+        "value": "foreword",
+        "name": "Foreword",
+        "description": "Non-EGW Foreword"
+      },
+      {
+        "value": "intro",
+        "name": "Intro",
+        "description": "Non-EGW Introduction"
+      },
+      {
+        "value": "note",
+        "name": "Note",
+        "description": "Non-EGW Note"
+      },
+      {
+        "value": "preface",
+        "name": "Preface",
+        "description": "Non-EGW Preface"
+      },
+      {
+        "value": "text",
+        "name": "Text",
+        "description": "Non-EGW Text"
+      }
+    ]
+  },
+  "note-types": {
+    "id": "note-types",
+    "title": "Note types",
+    "values": [
+      {
+        "value": "footnote",
+        "name": "Footnote",
+        "description": "Placed at the bottom of the page."
+      },
+      {
+        "value": "chapter-endnote",
+        "name": "Chapter End Note",
+        "description": "Placed at the end of the chapter."
+      },
+      {
+        "value": "book-endnote",
+        "name": "Book End Note",
+        "description": "Placed at the end of the book"
+      }
+    ]
+  },
+  "paragraph-role": {
+    "id": "paragraph-role",
+    "title": "Paragraph role",
+    "values": [
+      {
+        "value": "address",
+        "name": "Address",
+        "description": "Paragraph contains address. For letter it means address of the addressee"
+      },
+      {
+        "value": "addressee",
+        "name": "Addressee",
+        "description": "Paragraph contains addressee. For letter it means addressee name"
+      },
+      {
+        "value": "author",
+        "name": "Author",
+        "description": "Paragraph contains author name."
+      },
+      {
+        "value": "date",
+        "name": "Date",
+        "description": "Paragraph contains date."
+      },
+      {
+        "value": "place",
+        "name": "Place",
+        "description": "Paragraph contains place."
+      },
+      {
+        "value": "introduction",
+        "name": "Introduction",
+        "description": "Paragraph contains introduction text."
+      },
+      {
+        "value": "letterhead",
+        "name": "Letterhead",
+        "description": "Paragraph contains letter header."
+      },
+      {
+        "value": "salutation",
+        "name": "Salutation",
+        "description": "Paragraph contains salutation."
+      },
+      {
+        "value": "signature-date",
+        "name": "Signature Date",
+        "description": "Paragraph contains signature date."
+      },
+      {
+        "value": "signature-line",
+        "name": "Signature Line",
+        "description": "Paragraph contains signature line."
+      },
+      {
+        "value": "signature-source",
+        "name": "Signature Source",
+        "description": "Paragraph contains signature source."
+      },
+      {
+        "value": "bible-text",
+        "name": "Bible Text",
+        "description": "Paragraph contains Bible text."
+      },
+      {
+        "value": "devotional-text",
+        "name": "Devotional Text",
+        "description": "Paragraph contains devotional text."
+      },
+      {
+        "value": "poem-source",
+        "name": "Poem Source",
+        "description": "Paragraph contains poem source."
+      },
+      {
+        "value": "publication-info",
+        "name": "Publication Info",
+        "description": "Paragraph contains publication info."
+      },
+      {
+        "value": "title",
+        "name": "Title",
+        "description": "Paragraph contains title."
+      }
+    ]
+  },
+  "paragraph-type": {
+    "id": "paragraph-type",
+    "title": "Paragraph type",
+    "values": [
+      {
+        "value": "blockquote",
+        "name": "Blockquote",
+        "description": "Blockquote"
+      },
+      {
+        "value": "paragraph",
+        "name": "Paragraph",
+        "description": "Paragraph"
+      },
+      {
+        "value": "poem",
+        "name": "Poem",
+        "description": "Poem. Lines are separated with <br/>"
+      }
+    ]
+  },
+  "paragraphs-group-type": {
+    "id": "paragraphs-group-type",
+    "title": "Paragraphs group type",
+    "values": [
+      {
+        "value": "frame",
+        "name": "Frame",
+        "description": "Blockquote with several paragraphs"
+      }
+    ]
+  },
+  "publication-type": {
+    "id": "publication-type",
+    "title": "Publication Type",
+    "values": [
+      {
+        "value": "bible",
+        "name": "Bible",
+        "description": "Bible translation"
+      },
+      {
+        "value": "bible-commentary",
+        "name": "Bible Commentary",
+        "description": "Bible commentaries"
+      },
+      {
+        "value": "book",
+        "name": "Book",
+        "description": "Paginated book"
+      },
+      {
+        "value": "devotional",
+        "name": "Devotional",
+        "description": "Daily devotional"
+      },
+      {
+        "value": "dictionary",
+        "name": "Dictionary",
+        "description": "Dictionary"
+      },
+      {
+        "value": "manuscript-volume",
+        "name": "Manuscript Volume",
+        "description": "One of EGW Lt&Ms bound volumes"
+      },
+      {
+        "value": "periodical/page-break",
+        "name": "Periodical",
+        "description": "Periodical with page markers"
+      },
+      {
+        "value": "periodical/no-page-break",
+        "name": "Periodical",
+        "description": "Periodical without page markers"
+      },
+      {
+        "value": "topical-index",
+        "name": "Topical Index",
+        "description": "Topical index"
+      },
+      {
+        "value": "scripture-index",
+        "name": "Scripture Index",
+        "description": "Scripture index"
+      }
+    ]
+  },
+  "text-direction": {
+    "id": "text-direction",
+    "title": "Text Direction",
+    "values": [
+      {
+        "value": "ltr",
+        "name": "Left to right",
+        "description": "Text is written from left to right"
+      },
+      {
+        "value": "rtl",
+        "name": "Right to left",
+        "description": "Text is written from right to left"
+      }
+    ]
+  },
+  "text-formatting": {
+    "id": "text-formatting",
+    "title": "Text formatting",
+    "values": [
+      {
+        "value": "bold",
+        "name": "Bold",
+        "description": "Bold text"
+      },
+      {
+        "value": "italic",
+        "name": "Italic",
+        "description": "Italic text"
+      },
+      {
+        "value": "underline",
+        "name": "Underline",
+        "description": "Underlined text"
+      },
+      {
+        "value": "superscript",
+        "name": "Superscript",
+        "description": "Superscript text"
+      },
+      {
+        "value": "subscript",
+        "name": "Subscript",
+        "description": "Subscript text"
+      },
+      {
+        "value": "small-caps",
+        "name": "Small Caps",
+        "description": "Small caps text"
+      },
+      {
+        "value": "all-caps",
+        "name": "All Caps",
+        "description": "All caps text"
+      },
+      {
+        "value": "overline",
+        "name": "Overline",
+        "description": "Overlined text"
+      }
+    ]
+  },
+  "vertical-alignment": {
+    "id": "vertical-alignment",
+    "title": "Vertical Alignment",
+    "values": [
+      {
+        "value": "top",
+        "name": "Top alignment",
+        "description": "Align text to the top"
+      },
+      {
+        "value": "center",
+        "name": "Center alignment",
+        "description": "Align text to the center"
+      },
+      {
+        "value": "bottom",
+        "name": "Bottom alignment",
+        "description": "Align text to the bottom"
+      }
+    ]
+  }
+};
+
+// ../weml-language-core/src/toolbar/toolModel.ts
+var WRAP_INLINE_TAGS = ["w-color", "w-lang", "w-non-egw", "w-entity", "w-sent", "a"];
+var WRAP_OPTIONS = [
+  ...(ENUMS["text-formatting"]?.values ?? []).map((v) => ({
+    value: `w-format:${v.value}`,
+    label: `w-format.${v.value}`,
+    tag: "w-format",
+    type: v.value
+  })),
+  ...WRAP_INLINE_TAGS.map((t) => ({ value: t, label: t, tag: t }))
+];
+var TOOL_GROUPS = ["Containers", "Blocks", "Inlines"];
+var ANCHOR_SNIPPET_ID = "a (anchor)";
+var INSERT_TOOLS = [
+  ...["w-para", "w-heading", "w-para-group", "w-toc"].map((tag) => ({ label: tag, id: tag, group: "Containers" })),
+  // A new section of <body>: a <div id> with its container, or with a page break (the docs list
+  // `w-page` among the containers too: a <div> holds one container or one `w-page`).
+  ...["div + w-para", "div + w-heading", "div + w-para-group", "div + w-toc", "div + w-page"].map((id) => ({
+    label: id,
+    id,
+    group: "Containers",
+    documentOnly: true
+  })),
+  { label: "w-text-block", id: "w-text-block", group: "Blocks" },
+  { label: "table", id: "table (with row)", group: "Blocks" },
+  { label: "w-list", id: "w-list (with item)", group: "Blocks" },
+  { label: "figure", id: "figure (with caption)", group: "Blocks" },
+  { label: "hr", id: "hr", group: "Blocks" },
+  ...["w-note", "w-page", "br"].map((tag) => ({ label: tag, id: tag, group: "Inlines" })),
+  { label: ANCHOR_SNIPPET_ID, id: ANCHOR_SNIPPET_ID, group: "Inlines" }
+];
+var TOOL_ITEMS = (() => {
+  const items = [
+    ...INSERT_TOOLS.map((tool) => ({
+      value: tool.label,
+      label: tool.label,
+      group: tool.group,
+      action: { kind: "insert", snippetId: tool.id },
+      ...tool.documentOnly ? { documentOnly: true } : {}
+    })),
+    ...WRAP_OPTIONS.map((option) => ({
+      value: option.value,
+      // `a` wraps as a link; the anchor is an insert of its own.
+      label: option.tag === "a" ? "a (link)" : option.label,
+      group: "Inlines",
+      action: { kind: "wrap", option }
+    }))
+  ];
+  return TOOL_GROUPS.flatMap((group) => items.filter((item) => item.group === group));
+})();
+function toolItemsFor(mode = "file") {
+  return mode === "paragraph" ? TOOL_ITEMS.filter((item) => !item.documentOnly) : TOOL_ITEMS;
+}
+function filterToolItems(query, items = TOOL_ITEMS) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return items.map((item) => ({ item, matches: [] }));
+  const found = [];
+  for (const item of items) {
+    const at = item.label.toLowerCase().indexOf(needle);
+    if (at >= 0) found.push({ item, matches: [[at, at + needle.length]] });
+  }
+  return found;
+}
+
+// src/panel/toolPicker.ts
+var PAGE = 8;
+var MAX_LIST_HEIGHT = 320;
+var pickers = 0;
+function createToolPicker(tools, state, mode = "file") {
+  const items = toolItemsFor(mode);
+  const id = `weml-tool-picker-${++pickers}`;
+  const input = element("input", { className: "tool-input" });
+  input.type = "text";
+  input.placeholder = "Tag to wrap or insert";
+  input.spellcheck = false;
+  input.autocomplete = "off";
+  input.setAttribute("role", "combobox");
+  input.setAttribute("aria-label", "Tag to wrap or insert");
+  input.setAttribute("aria-autocomplete", "list");
+  input.setAttribute("aria-expanded", "false");
+  input.setAttribute("aria-controls", `${id}-list`);
+  const action = button({ className: "icon flat primary" }, () => apply());
+  const field = element("div", { className: "tool-field" }, [input, action]);
+  const list = element("div", { className: "tool-list" });
+  list.id = `${id}-list`;
+  list.setAttribute("role", "listbox");
+  list.hidden = true;
+  list.addEventListener("mousedown", (event) => event.preventDefault());
+  const view = () => input.ownerDocument.defaultView;
+  let chosen = items.find((item) => item.value === state.get()?.tool);
+  let shown = [];
+  let active = -1;
+  const updateAction = () => {
+    const label = !chosen ? "Choose a tag first" : chosen.action.kind === "wrap" ? `Wrap selection in ${chosen.label}` : `Insert ${chosen.label}`;
+    action.replaceChildren(icon(chosen?.action.kind === "insert" ? "add" : "wrap"));
+    action.title = label;
+    action.setAttribute("aria-label", label);
+    action.setAttribute("aria-disabled", String(!chosen));
+  };
+  const apply = () => {
+    if (!chosen) return;
+    if (chosen.action.kind === "wrap") tools.wrap(chosen.action.option);
+    else tools.insertSnippet(chosen.action.snippetId);
+  };
+  const choose = (item) => {
+    chosen = item;
+    input.value = item.label;
+    state.set({ tool: item.value });
+    updateAction();
+    close();
+  };
+  const query = () => chosen && input.value === chosen.label ? "" : input.value;
+  const optionId = (index) => `${id}-option-${index}`;
+  const setActive = (index) => {
+    list.querySelector(".tool-option.active")?.classList.remove("active");
+    active = shown.length ? Math.max(0, Math.min(shown.length - 1, index)) : -1;
+    const node = active >= 0 ? list.querySelector(`#${optionId(active)}`) : null;
+    node?.classList.add("active");
+    node?.scrollIntoView?.({ block: "nearest" });
+    if (node) input.setAttribute("aria-activedescendant", node.id);
+    else input.removeAttribute("aria-activedescendant");
+  };
+  const render = () => {
+    shown = filterToolItems(query(), items);
+    list.replaceChildren();
+    if (!shown.length) {
+      list.append(element("div", { className: "tool-empty", text: "No such tag" }));
+    }
+    let index = 0;
+    for (const group of TOOL_GROUPS) {
+      const inGroup = shown.filter((match) => match.item.group === group);
+      if (!inGroup.length) continue;
+      const node = element("div", { className: "tool-group" });
+      node.setAttribute("role", "group");
+      node.setAttribute("aria-label", group);
+      node.append(element("div", { className: "tool-group-label", text: group }));
+      for (const match of inGroup) {
+        const at = index++;
+        const option = element("div", { className: "tool-option" }, [
+          highlighted(match),
+          element("span", { className: "tool-kind", text: match.item.action.kind })
+        ]);
+        option.id = optionId(at);
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", String(match.item === chosen));
+        option.addEventListener("click", () => choose(match.item));
+        node.append(option);
+      }
+      list.append(node);
+    }
+    const current = shown.findIndex((match) => match.item === chosen);
+    setActive(current >= 0 ? current : 0);
+  };
+  const place = () => {
+    const rect = field.getBoundingClientRect();
+    const below = (view()?.innerHeight ?? 0) - rect.bottom - 8;
+    list.style.left = `${rect.left}px`;
+    list.style.top = `${rect.bottom}px`;
+    list.style.width = `${rect.width}px`;
+    list.style.maxHeight = `${Math.max(88, Math.min(MAX_LIST_HEIGHT, below))}px`;
+  };
+  const open = () => {
+    if (list.hidden) {
+      list.hidden = false;
+      input.setAttribute("aria-expanded", "true");
+      view()?.addEventListener("resize", close);
+      view()?.addEventListener("scroll", onScroll, true);
+    }
+    render();
+    place();
+  };
+  function close() {
+    if (list.hidden) return;
+    list.hidden = true;
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+    view()?.removeEventListener("resize", close);
+    view()?.removeEventListener("scroll", onScroll, true);
+  }
+  function onScroll(event) {
+    if (event.target !== list) close();
+  }
+  let keepSelection = false;
+  input.addEventListener("focus", () => {
+    if (chosen && input.value === chosen.label) {
+      input.select();
+      keepSelection = true;
+    }
+    open();
+  });
+  input.addEventListener("mouseup", (event) => {
+    if (keepSelection) event.preventDefault();
+    keepSelection = false;
+  });
+  input.addEventListener("click", () => {
+    if (list.hidden) open();
+  });
+  input.addEventListener("input", () => {
+    if (!input.value && chosen) {
+      chosen = void 0;
+      state.set({});
+      updateAction();
+    }
+    open();
+  });
+  input.addEventListener("blur", () => {
+    close();
+    input.value = chosen?.label ?? "";
+  });
+  input.addEventListener("keydown", (event) => {
+    const moves = { ArrowDown: 1, ArrowUp: -1, PageDown: PAGE, PageUp: -PAGE };
+    if (event.key in moves) {
+      event.preventDefault();
+      if (list.hidden) open();
+      else setActive(active + moves[event.key]);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const match = list.hidden ? void 0 : shown[active];
+      if (match) choose(match.item);
+    } else if (event.key === "Escape") {
+      if (list.hidden) return;
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      input.value = chosen?.label ?? "";
+    } else if (event.key === "Tab") {
+      close();
+    }
+  });
+  input.value = chosen?.label ?? "";
+  updateAction();
+  return {
+    element: element("div", { className: "tool-picker" }, [field, list]),
+    dispose: close
+  };
+}
+function highlighted({ item, matches }) {
+  const label = element("span", { className: "tool-label" });
+  let at = 0;
+  for (const [start, end] of matches) {
+    if (start > at) label.append(item.label.slice(at, start));
+    label.append(element("span", { className: "highlight", text: item.label.slice(start, end) }));
+    at = end;
+  }
+  if (at < item.label.length) label.append(item.label.slice(at));
+  return label;
+}
+
+// src/panel/toolsPane.ts
+function createToolsPane(tools, options) {
+  const root = element("div");
+  const picker = createToolPicker(tools, options.state, options.mode);
+  root.append(element("section", {}, [element("h2", { text: "Wrap or insert" }), picker.element]));
+  if (options.mode === "file") {
+    root.append(element("section", {}, [
+      element("h2", { text: "Document" }),
+      button({ text: "Renumber div ids (1\u2026n)", className: "full" }, () => tools.renumber())
+    ]));
+  }
+  return { element: root, dispose: picker.dispose };
+}
+
+// src/panel/panel.ts
+var TOOLS = "tools";
+var SEARCH = "suggestions";
+function createWemlPanel(host, options = {}) {
+  if (options.injectStyles !== false) injectPanelStyles();
+  let memory = {};
+  try {
+    const stored = host.storage?.get();
+    if (stored && typeof stored === "object") memory = { ...stored };
+  } catch {
+  }
+  const save = () => {
+    try {
+      host.storage?.set(memory);
+    } catch {
+    }
+  };
+  const toolsPane = createToolsPane(host.tools, {
+    mode: options.mode ?? "file",
+    state: {
+      get: () => memory.modules?.[TOOLS],
+      set: (value) => {
+        memory.modules = { ...memory.modules, [TOOLS]: value };
+        save();
+      }
+    }
+  });
+  const specs = [{ id: TOOLS, title: "Tools", body: toolsPane.element }];
+  const search = host.search ? createSearchPane(host.search, {
+    get: () => memory.modules?.[SEARCH],
+    set: (value) => {
+      memory.modules = { ...memory.modules, [SEARCH]: value };
+      save();
+    }
+  }) : void 0;
+  if (search) {
+    specs.push({ id: SEARCH, title: "Search Suggestions", body: search.element, fill: true });
+  }
+  const panes = createPanes(specs, memory, save);
+  const element2 = document.createElement("div");
+  element2.className = options.monacoTheme === false ? PANEL_CLASS : `${PANEL_CLASS} monaco-component`;
+  element2.append(panes.element);
+  options.container?.append(element2);
+  return {
+    element: element2,
+    dispose: () => {
+      toolsPane.dispose();
+      search?.dispose();
+      panes.dispose();
+      element2.remove();
+    }
+  };
+}
+//# sourceMappingURL=panel.cjs.map