@k2b/ui 0.50.0 → 0.52.0

package/dist/ssr/inputs/markdown/MarkdownSelectionToolbar.js

@@ -0,0 +1,293 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<div style=\"", "\">", "", "", "", "", "", "", "", "</div>"];
+import { i18n } from "@k2b/stdlib";
+import { batch, createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { SelectionToolbar } from "../../actions/SelectionToolbar";
+import { Toolbar } from "../../actions/Toolbar";
+import { useLocale } from "../../intl/locale";
+import { insertLink, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleNumberedList, toggleQuote } from "./actions";
+import { computeActiveFormats } from "./active-formats";
+const selectionMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      bold: "Bold",
+      italic: "Italic",
+      inlineCode: "Inline code",
+      link: "Link",
+      bulletList: "Bullet list",
+      numberedList: "Numbered list",
+      quote: "Quote",
+      selectionFormatting: "Format selection"
+    },
+    de: {
+      bold: "Fett",
+      italic: "Kursiv",
+      inlineCode: "Inline-Code",
+      link: "Link",
+      bulletList: "Aufzählung",
+      numberedList: "Nummerierte Liste",
+      quote: "Zitat",
+      selectionFormatting: "Auswahl formatieren"
+    }
+  }
+});
+export const checkSelectionMessages = () => selectionMessages.check();
+
+/**
+ * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is
+ * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.
+ */
+export const textRangeBox = (layer, surface, start, end) => {
+  const walker = document.createTreeWalker(layer, 4 /* NodeFilter.SHOW_TEXT */);
+  let offset = 0;
+  let from;
+  let to;
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const length = node.textContent?.length ?? 0;
+    if (!from && start <= offset + length) from = [node, start - offset];
+    if (end <= offset + length) {
+      to = [node, end - offset];
+      break;
+    }
+    offset += length;
+  }
+  if (!from || !to) return null;
+  const range = document.createRange();
+  range.setStart(...from);
+  range.setEnd(...to);
+  const rects = Array.from(range.getClientRects()).filter(rect => rect.width > 0 || rect.height > 0);
+  const first = rects[0];
+  if (!first) return null;
+  const line = rects.filter(rect => Math.abs(rect.top - first.top) < 4);
+  const multiline = line.length < rects.length;
+  const right = multiline ? layer.getBoundingClientRect().right : Math.max(...line.map(rect => rect.right));
+  const visible = surface.getBoundingClientRect();
+  if (first.bottom <= visible.top || first.top >= visible.bottom) return null;
+  return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.height);
+};
+/**
+ * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and
+ * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go
+ * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch
+ * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It
+ * listens to the textarea itself, so editors without it carry none of its code.
+ */
+export function MarkdownSelectionToolbar(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.textarea;
+    },
+    children: textarea => _$createComponent(SelectionFormatting, {
+      get textarea() {
+        return textarea();
+      }
+    })
+  });
+}
+function SelectionFormatting(props) {
+  const locale = useLocale();
+  const messages = () => selectionMessages.resolve([locale()]).t;
+  const textarea = props.textarea;
+  // The editor's surface and its presentation layer: the same text as the textarea, laid out the same way.
+  const surface = textarea.parentElement ?? textarea;
+  const layer = surface.querySelector(".k2b-markdown-editor__preview") ?? surface;
+  const [revision, setRevision] = createSignal(0);
+  const bump = () => setRevision(value => value + 1);
+  const [finePointer, setFinePointer] = createSignal(false);
+  const [dragging, setDragging] = createSignal(false);
+  const [textFocused, setTextFocused] = createSignal(document.activeElement === textarea);
+  const [toolbarFocused, setToolbarFocused] = createSignal(false);
+  const [dismissed, setDismissed] = createSignal();
+  let root;
+  const selectionKey = () => `${textarea.selectionStart}:${textarea.selectionEnd}`;
+  const anchor = () => {
+    revision();
+    if (textarea.disabled || !finePointer() || dragging() || !(textFocused() || toolbarFocused())) return null;
+    if (textarea.selectionStart === textarea.selectionEnd || dismissed() === selectionKey()) return null;
+    return textRangeBox(layer, surface, textarea.selectionStart, textarea.selectionEnd);
+  };
+
+  // Escape closes the toolbar for that one selection: a collapsed selection forgets it, so selecting the same words
+  // again shows it again.
+  createEffect(() => {
+    revision();
+    if (textarea.selectionStart === textarea.selectionEnd) setDismissed(undefined);
+  });
+  onMount(() => {
+    const query = window.matchMedia("(pointer: coarse)");
+    const update = () => setFinePointer(!query.matches);
+    update();
+    const press = () => {
+      setDismissed(undefined);
+      setDragging(true);
+      const release = () => {
+        setDragging(false);
+        document.removeEventListener("pointerup", release, true);
+        document.removeEventListener("pointercancel", release, true);
+      };
+      document.addEventListener("pointerup", release, true);
+      document.addEventListener("pointercancel", release, true);
+    };
+    const key = event => {
+      if (event.key === "Escape") {
+        if (event.defaultPrevented || !anchor()) return;
+        event.preventDefault();
+        setDismissed(selectionKey());
+        return;
+      }
+      // Selection changes can arrive as one event, so the next key that may select again forgets Escape too.
+      if (!["Shift", "Control", "Meta", "Alt"].includes(event.key)) setDismissed(undefined);
+    };
+    const focus = () => setTextFocused(true);
+    const blur = event => batch(() => {
+      // Tab into the toolbar keeps it open: the toolbar takes the focus in the same move.
+      if (event.relatedTarget instanceof Node && root?.contains(event.relatedTarget)) setToolbarFocused(true);
+      setTextFocused(false);
+    });
+    const selection = () => {
+      if (document.activeElement === textarea) bump();
+    };
+    // The presentation layer renders a frame after an edit; the toolbar measures again once it did.
+    const layerElement = layer;
+    const layerObserver = new MutationObserver(bump);
+    layerObserver.observe(layerElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    query.addEventListener("change", update);
+    textarea.addEventListener("pointerdown", press);
+    textarea.addEventListener("keydown", key);
+    textarea.addEventListener("focus", focus);
+    textarea.addEventListener("blur", blur);
+    textarea.addEventListener("input", bump);
+    // The toolbar hides while its line is scrolled away and shows again when it returns.
+    textarea.addEventListener("scroll", bump);
+    document.addEventListener("selectionchange", selection);
+    onCleanup(() => {
+      layerObserver.disconnect();
+      query.removeEventListener("change", update);
+      textarea.removeEventListener("pointerdown", press);
+      textarea.removeEventListener("keydown", key);
+      textarea.removeEventListener("focus", focus);
+      textarea.removeEventListener("blur", blur);
+      textarea.removeEventListener("input", bump);
+      textarea.removeEventListener("scroll", bump);
+      document.removeEventListener("selectionchange", selection);
+    });
+  });
+  const run = format => () => format(textarea);
+  const formats = createMemo(() => {
+    revision();
+    return computeActiveFormats(textarea);
+  });
+  const pressed = format => formats().has(format);
+
+  // Touch devices keep their own selection menu: the toolbar is not rendered there at all, so nothing of it mounts
+  // or animates.
+  return _$createComponent(Show, {
+    get when() {
+      return finePointer();
+    },
+    get children() {
+      return _$createComponent(SelectionToolbar, {
+        get label() {
+          return messages().selectionFormatting;
+        },
+        anchor: anchor,
+        onEscape: () => {
+          setDismissed(selectionKey());
+          textarea.focus();
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$ssrStyleProperty("display:", "contents"), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().bold;
+            },
+            icon: "ti ti-bold",
+            get pressed() {
+              return pressed("bold");
+            },
+            keys: "mod+b",
+            get onClick() {
+              return run(toggleBold);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().italic;
+            },
+            icon: "ti ti-italic",
+            get pressed() {
+              return pressed("italic");
+            },
+            keys: "mod+i",
+            get onClick() {
+              return run(toggleItalic);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().inlineCode;
+            },
+            icon: "ti ti-code",
+            get pressed() {
+              return pressed("code");
+            },
+            keys: "mod+e",
+            get onClick() {
+              return run(toggleCode);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().link;
+            },
+            icon: "ti ti-link",
+            keys: "mod+k",
+            get onClick() {
+              return run(insertLink);
+            }
+          })), _$escape(_$createComponent(Toolbar.Separator, {})), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().bulletList;
+            },
+            icon: "ti ti-list",
+            get pressed() {
+              return pressed("bullet");
+            },
+            keys: "mod+shift+8",
+            get onClick() {
+              return run(toggleBulletList);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().numberedList;
+            },
+            icon: "ti ti-list-numbers",
+            get pressed() {
+              return pressed("ordered");
+            },
+            keys: "mod+shift+7",
+            get onClick() {
+              return run(toggleNumberedList);
+            }
+          })), _$escape(_$createComponent(Toolbar.Action, {
+            get label() {
+              return messages().quote;
+            },
+            icon: "ti ti-quote",
+            get pressed() {
+              return pressed("quote");
+            },
+            get onClick() {
+              return run(toggleQuote);
+            }
+          })));
+        }
+      });
+    }
+  });
+}
+//# sourceMappingURL=MarkdownSelectionToolbar.js.map

package/dist/ssr/inputs/markdown/MarkdownSelectionToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/markdown/MarkdownSelectionToolbar.tsx"],"sourcesContent":["import { i18n } from \"@k2b/stdlib\";\nimport { batch, createEffect, createMemo, createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { SelectionToolbar } from \"../../actions/SelectionToolbar\";\nimport { Toolbar } from \"../../actions/Toolbar\";\nimport { useLocale } from \"../../intl/locale\";\nimport { insertLink, toggleBold, toggleBulletList, toggleCode, toggleItalic, toggleNumberedList, toggleQuote } from \"./actions\";\nimport { computeActiveFormats } from \"./active-formats\";\n\nconst selectionMessages = i18n.define({\n  baseLocale: \"en\",\n  messages: {\n    en: {\n      bold: \"Bold\",\n      italic: \"Italic\",\n      inlineCode: \"Inline code\",\n      link: \"Link\",\n      bulletList: \"Bullet list\",\n      numberedList: \"Numbered list\",\n      quote: \"Quote\",\n      selectionFormatting: \"Format selection\",\n    },\n    de: {\n      bold: \"Fett\",\n      italic: \"Kursiv\",\n      inlineCode: \"Inline-Code\",\n      link: \"Link\",\n      bulletList: \"Aufzählung\",\n      numberedList: \"Nummerierte Liste\",\n      quote: \"Zitat\",\n      selectionFormatting: \"Auswahl formatieren\",\n    },\n  },\n});\n\nexport const checkSelectionMessages = () => selectionMessages.check();\n\n/**\n * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is\n * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.\n */\nexport const textRangeBox = (layer: HTMLElement, surface: HTMLElement, start: number, end: number): DOMRect | null => {\n  const walker = document.createTreeWalker(layer, 4 /* NodeFilter.SHOW_TEXT */);\n  let offset = 0;\n  let from: [Node, number] | undefined;\n  let to: [Node, number] | undefined;\n  for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n    const length = node.textContent?.length ?? 0;\n    if (!from && start <= offset + length) from = [node, start - offset];\n    if (end <= offset + length) {\n      to = [node, end - offset];\n      break;\n    }\n    offset += length;\n  }\n  if (!from || !to) return null;\n  const range = document.createRange();\n  range.setStart(...from);\n  range.setEnd(...to);\n  const rects = Array.from(range.getClientRects()).filter((rect) => rect.width > 0 || rect.height > 0);\n  const first = rects[0];\n  if (!first) return null;\n  const line = rects.filter((rect) => Math.abs(rect.top - first.top) < 4);\n  const multiline = line.length < rects.length;\n  const right = multiline ? layer.getBoundingClientRect().right : Math.max(...line.map((rect) => rect.right));\n  const visible = surface.getBoundingClientRect();\n  if (first.bottom <= visible.top || first.top >= visible.bottom) return null;\n  return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.height);\n};\n\nexport type MarkdownSelectionToolbarProps = {\n  /** The editor's textarea, from `MarkdownEditor`'s `textareaRef`. The toolbar attaches once it is there. */\n  textarea: HTMLTextAreaElement | undefined;\n};\n\n/**\n * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and\n * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go\n * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch\n * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It\n * listens to the textarea itself, so editors without it carry none of its code.\n */\nexport function MarkdownSelectionToolbar(props: MarkdownSelectionToolbarProps): JSX.Element {\n  return <Show when={props.textarea}>{(textarea) => <SelectionFormatting textarea={textarea()} />}</Show>;\n}\n\nfunction SelectionFormatting(props: { textarea: HTMLTextAreaElement }): JSX.Element {\n  const locale = useLocale();\n  const messages = () => selectionMessages.resolve([locale()]).t;\n  const textarea = props.textarea;\n  // The editor's surface and its presentation layer: the same text as the textarea, laid out the same way.\n  const surface = textarea.parentElement ?? textarea;\n  const layer = surface.querySelector<HTMLElement>(\".k2b-markdown-editor__preview\") ?? surface;\n  const [revision, setRevision] = createSignal(0);\n  const bump = () => setRevision((value) => value + 1);\n  const [finePointer, setFinePointer] = createSignal(false);\n  const [dragging, setDragging] = createSignal(false);\n  const [textFocused, setTextFocused] = createSignal(document.activeElement === textarea);\n  const [toolbarFocused, setToolbarFocused] = createSignal(false);\n  const [dismissed, setDismissed] = createSignal<string>();\n  let root: HTMLDivElement | undefined;\n\n  const selectionKey = () => `${textarea.selectionStart}:${textarea.selectionEnd}`;\n  const anchor = () => {\n    revision();\n    if (textarea.disabled || !finePointer() || dragging() || !(textFocused() || toolbarFocused())) return null;\n    if (textarea.selectionStart === textarea.selectionEnd || dismissed() === selectionKey()) return null;\n    return textRangeBox(layer, surface, textarea.selectionStart, textarea.selectionEnd);\n  };\n\n  // Escape closes the toolbar for that one selection: a collapsed selection forgets it, so selecting the same words\n  // again shows it again.\n  createEffect(() => {\n    revision();\n    if (textarea.selectionStart === textarea.selectionEnd) setDismissed(undefined);\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(\"(pointer: coarse)\");\n    const update = () => setFinePointer(!query.matches);\n    update();\n    const press = () => {\n      setDismissed(undefined);\n      setDragging(true);\n      const release = () => {\n        setDragging(false);\n        document.removeEventListener(\"pointerup\", release, true);\n        document.removeEventListener(\"pointercancel\", release, true);\n      };\n      document.addEventListener(\"pointerup\", release, true);\n      document.addEventListener(\"pointercancel\", release, true);\n    };\n    const key = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        if (event.defaultPrevented || !anchor()) return;\n        event.preventDefault();\n        setDismissed(selectionKey());\n        return;\n      }\n      // Selection changes can arrive as one event, so the next key that may select again forgets Escape too.\n      if (![\"Shift\", \"Control\", \"Meta\", \"Alt\"].includes(event.key)) setDismissed(undefined);\n    };\n    const focus = () => setTextFocused(true);\n    const blur = (event: FocusEvent) =>\n      batch(() => {\n        // Tab into the toolbar keeps it open: the toolbar takes the focus in the same move.\n        if (event.relatedTarget instanceof Node && root?.contains(event.relatedTarget)) setToolbarFocused(true);\n        setTextFocused(false);\n      });\n    const selection = () => {\n      if (document.activeElement === textarea) bump();\n    };\n    // The presentation layer renders a frame after an edit; the toolbar measures again once it did.\n    const layerElement = layer;\n    const layerObserver = new MutationObserver(bump);\n    layerObserver.observe(layerElement, { childList: true, subtree: true, characterData: true });\n    query.addEventListener(\"change\", update);\n    textarea.addEventListener(\"pointerdown\", press);\n    textarea.addEventListener(\"keydown\", key);\n    textarea.addEventListener(\"focus\", focus);\n    textarea.addEventListener(\"blur\", blur);\n    textarea.addEventListener(\"input\", bump);\n    // The toolbar hides while its line is scrolled away and shows again when it returns.\n    textarea.addEventListener(\"scroll\", bump);\n    document.addEventListener(\"selectionchange\", selection);\n    onCleanup(() => {\n      layerObserver.disconnect();\n      query.removeEventListener(\"change\", update);\n      textarea.removeEventListener(\"pointerdown\", press);\n      textarea.removeEventListener(\"keydown\", key);\n      textarea.removeEventListener(\"focus\", focus);\n      textarea.removeEventListener(\"blur\", blur);\n      textarea.removeEventListener(\"input\", bump);\n      textarea.removeEventListener(\"scroll\", bump);\n      document.removeEventListener(\"selectionchange\", selection);\n    });\n  });\n\n  const run = (format: (textarea: HTMLTextAreaElement) => void) => () => format(textarea);\n  const formats = createMemo(() => {\n    revision();\n    return computeActiveFormats(textarea);\n  });\n  const pressed = (format: string) => formats().has(format);\n\n  // Touch devices keep their own selection menu: the toolbar is not rendered there at all, so nothing of it mounts\n  // or animates.\n  return (\n    <Show when={finePointer()}>\n      <SelectionToolbar\n        label={messages().selectionFormatting}\n        anchor={anchor}\n        onEscape={() => {\n          setDismissed(selectionKey());\n          textarea.focus();\n        }}\n      >\n        <div\n          ref={root}\n          style={{ display: \"contents\" }}\n          onFocusIn={() => setToolbarFocused(true)}\n          onFocusOut={(event) => {\n            if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) setToolbarFocused(false);\n          }}\n        >\n          <Toolbar.Action label={messages().bold} icon=\"ti ti-bold\" pressed={pressed(\"bold\")} keys=\"mod+b\" onClick={run(toggleBold)} />\n          <Toolbar.Action\n            label={messages().italic}\n            icon=\"ti ti-italic\"\n            pressed={pressed(\"italic\")}\n            keys=\"mod+i\"\n            onClick={run(toggleItalic)}\n          />\n          <Toolbar.Action\n            label={messages().inlineCode}\n            icon=\"ti ti-code\"\n            pressed={pressed(\"code\")}\n            keys=\"mod+e\"\n            onClick={run(toggleCode)}\n          />\n          <Toolbar.Action label={messages().link} icon=\"ti ti-link\" keys=\"mod+k\" onClick={run(insertLink)} />\n          <Toolbar.Separator />\n          <Toolbar.Action\n            label={messages().bulletList}\n            icon=\"ti ti-list\"\n            pressed={pressed(\"bullet\")}\n            keys=\"mod+shift+8\"\n            onClick={run(toggleBulletList)}\n          />\n          <Toolbar.Action\n            label={messages().numberedList}\n            icon=\"ti ti-list-numbers\"\n            pressed={pressed(\"ordered\")}\n            keys=\"mod+shift+7\"\n            onClick={run(toggleNumberedList)}\n          />\n          <Toolbar.Action label={messages().quote} icon=\"ti ti-quote\" pressed={pressed(\"quote\")} onClick={run(toggleQuote)} />\n        </div>\n      </SelectionToolbar>\n    </Show>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/markdown/SlashCommands.js

@@ -0,0 +1,339 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<div popover=\"manual\" class=\"k2b-autocomplete__options\" data-commands", " role=\"presentation\">", "</div>"],
+  _tmpl$2 = ["<label class=\"k2b-dropdown__search\"><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"search\" role=\"combobox\"", " aria-expanded=\"true\"", " aria-autocomplete=\"list\"", " autocomplete=\"off\" spellcheck=\"false\" enterkeyhint=\"go\"", "></label>"];
+import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { CommandList, commandListKey, commandOptionId, createCommandNavigator } from "../../actions/CommandList";
+import { dockCommandList, followComposer } from "../../actions/command-dock";
+import { commandPlace } from "../../actions/command-items";
+import { useCommandMessages } from "../../actions/command-messages";
+import { detectQuery } from "../completion";
+import { isInCodeZone } from "./code-zone";
+/** Replaces a range of the text the way typing would, so undo keeps working; an empty text deletes. */
+const replace = (textarea, start, end, text) => {
+  textarea.focus();
+  textarea.setSelectionRange(start, end);
+  if (start === end && text === "") return;
+  try {
+    if (document.execCommand?.(text === "" ? "delete" : "insertText", false, text)) return;
+  } catch {
+    // Fall through to the standards-based replacement.
+  }
+  textarea.setRangeText(text, start, end, "end");
+  textarea.dispatchEvent(new Event("input", {
+    bubbles: true
+  }));
+};
+const trigger = {
+  trigger: "/",
+  suggest: () => []
+};
+
+/**
+ * Slash commands for a `MarkdownEditor`: `/` at the start of a line or after a space opens the entries docked above the
+ * composer, as wide as it is. Place it beside the editor and pass the editor's textarea. It listens to the textarea itself, so editors without
+ * commands carry none of it: native listeners run before the editor's own, and a key it uses is marked handled with
+ * `preventDefault`, which the editor respects.
+ */
+export function SlashCommands(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.textarea;
+    },
+    children: textarea => _$createComponent(AttachedCommands, {
+      get textarea() {
+        return textarea();
+      },
+      get items() {
+        return props.items;
+      },
+      get composer() {
+        return props.composer;
+      }
+    })
+  });
+}
+function AttachedCommands(props) {
+  const messages = useCommandMessages();
+  const textarea = props.textarea;
+  const id = `${textarea.id || "k2b-markdown"}-commands`;
+  const composer = () => props.composer ?? textarea.closest(".k2b-markdown-editor") ?? textarea;
+  const [context, setContext] = createSignal(null);
+  /**
+   * The list as a command left it: the `/query` is gone from the text, but the list stays at its slash while the
+   * command runs or after it failed, until the person types, leaves, or presses Escape.
+   */
+  const [held, setHeld] = createSignal();
+  /** Where Escape closed the commands; they stay closed while the caret stays in that `/query`. */
+  let dismissedAt = null;
+  /**
+   * How deep the list is. A further list has its own search field: the `/query` leaves the text, the focus moves into
+   * the field, and the composer's text stays as it is while the person searches.
+   */
+  const [depth, setDepth] = createSignal(0);
+  const [search, setSearch] = createSignal("");
+  let searchField;
+  /** Set while this part moves the focus between the text and the search field itself. */
+  let moving = false;
+  /** Puts the focus back in the text at `at`, where the slash stood. */
+  const focusText = at => {
+    moving = true;
+    try {
+      textarea.focus();
+      textarea.setSelectionRange(at, at);
+    } finally {
+      moving = false;
+    }
+  };
+  /** Set while this part edits the text itself, so its own edit does not count as the person typing. */
+  let editing = false;
+  let popover;
+  const edit = (start, end, text) => {
+    editing = true;
+    try {
+      replace(textarea, start, end, text);
+    } finally {
+      editing = false;
+    }
+  };
+  const nav = createCommandNavigator({
+    items: () => props.items,
+    query: () => depth() > 0 ? search() : context()?.query ?? held()?.query ?? "",
+    onText: item => {
+      // After a command failed, the held list has no `/query` left; a snippet goes where it stood.
+      const current = context();
+      const start = current?.start ?? held()?.start;
+      if (start === undefined) return;
+      close();
+      edit(start, current?.end ?? start, item.text ?? "");
+    },
+    beforeRun: () => {
+      const current = context();
+      if (!current) return;
+      // The list stays where it was while the `/query` leaves the text.
+      setHeld({
+        start: current.start,
+        query: current.query
+      });
+      setContext(null);
+      edit(current.start, current.end, "");
+    },
+    // While the `/query` is in the text, the context leaves it out; once a command removed it, the text is as it is.
+    context: () => {
+      const current = context();
+      const start = current?.start ?? held()?.start ?? textarea.selectionStart;
+      const place = commandPlace(textarea.value, start, current?.end ?? start);
+      return {
+        ...place,
+        selection: current ? {
+          start,
+          end: start
+        } : {
+          start: textarea.selectionStart,
+          end: textarea.selectionEnd
+        },
+        insert: text => edit(textarea.selectionStart, textarea.selectionEnd, text)
+      };
+    },
+    // A finished command leaves the focus in the text where the slash stood; its outcome, if any, shows in the list's place.
+    afterRun: () => {
+      const at = held()?.start;
+      close();
+      if (at !== undefined && document.activeElement !== textarea) focusText(at);
+    },
+    active: () => context() !== null || held() !== undefined,
+    onStep: next => {
+      const previous = depth();
+      if (next === 0) {
+        // Back to the first list: the typed `/query` comes back, and the text has the focus again. The list keeps its
+        // place throughout: the context returns before the held state goes, and the focus is in the text before the
+        // search field leaves, since a browser blurs a focused field that is removed, which would close the list.
+        const at = held();
+        if (at) {
+          const text = `/${at.query}`;
+          setContext({
+            start: at.start,
+            end: at.start + text.length,
+            text,
+            query: at.query,
+            completion: trigger
+          });
+          setHeld(undefined);
+          moving = true;
+          try {
+            edit(at.start, at.start, text);
+          } finally {
+            moving = false;
+          }
+        }
+        setDepth(0);
+        setSearch("");
+        return;
+      }
+      setDepth(next);
+      setSearch("");
+      if (previous === 0) {
+        // Into a further list: the `/query` leaves the text, and the list stays where it was.
+        const current = context();
+        if (current) {
+          setHeld({
+            start: current.start,
+            query: current.query
+          });
+          setContext(null);
+          edit(current.start, current.end, "");
+        }
+      }
+      queueMicrotask(() => {
+        moving = true;
+        try {
+          searchField?.focus({
+            preventScroll: true
+          });
+        } finally {
+          moving = false;
+        }
+      });
+    }
+  });
+  // Entries on their way, or a list that could not load, show too, so the person sees what happens.
+  const open = createMemo(() => nav.outcome() !== undefined || held() !== undefined || context() !== null && (nav.step() !== undefined || nav.entries().length > 0 || nav.load().state !== "ready"));
+  const close = () => {
+    setContext(null);
+    setHeld(undefined);
+    setDepth(0);
+    setSearch("");
+    nav.reset();
+  };
+  const detect = () => {
+    if (editing) return;
+    // Typing after a command ran or failed moves on: the held list closes, the command keeps running.
+    if (held()) close();
+    const found = document.activeElement === textarea ? detectQuery(textarea, [trigger], {
+      isExcluded: isInCodeZone
+    }) : null;
+    // Commands start at the line start or after a space, never inside `https://` or after a bracket.
+    const usable = found && (found.start === 0 || /\s/.test(textarea.value[found.start - 1] ?? "")) ? found : null;
+    if (usable?.start !== context()?.start) {
+      if (usable?.start !== dismissedAt) dismissedAt = null;
+      close();
+    }
+    if (usable && usable.start !== dismissedAt) {
+      // A new `/` takes the place at once, even from an outcome still in its least time.
+      if (usable.start !== context()?.start) nav.clearOutcome();
+      setContext(usable);
+    }
+  };
+  /** The person typed: an outcome clears once it showed long enough, and a new `/` opens the list. */
+  const typed = () => {
+    if (!editing) nav.typedOn();
+    detect();
+  };
+  /** An outcome's button leaves the focus in the text, where the person goes on writing. */
+  const backToText = () => {
+    if (document.activeElement === textarea) return;
+    moving = true;
+    try {
+      textarea.focus({
+        preventScroll: true
+      });
+    } finally {
+      moving = false;
+    }
+  };
+  const position = () => {
+    if (!popover?.isConnected) return;
+    if (!popover.matches(":popover-open")) popover.showPopover?.();
+    dockCommandList(popover, composer());
+  };
+
+  // The textarea points at the list while it shows, as a combobox does.
+  createEffect(() => {
+    const marked = nav.entries()[nav.active()];
+    // In a further list the search field points at it instead.
+    const pointing = open() && depth() === 0 && !nav.outcome();
+    const active = pointing && marked && !marked.disabled ? commandOptionId(id, nav.active()) : undefined;
+    if (pointing) textarea.setAttribute("aria-controls", id);else if (textarea.getAttribute("aria-controls") === id) textarea.removeAttribute("aria-controls");
+    if (active) textarea.setAttribute("aria-activedescendant", active);else if (textarea.getAttribute("aria-activedescendant")?.startsWith(`${id}-`)) textarea.removeAttribute("aria-activedescendant");
+  });
+  // Opening, and entries that arrive while the `/` waits, such as from a reactive source, show the list.
+  createEffect(() => {
+    if (!open()) return;
+    queueMicrotask(position);
+    // The composer grows with its text, and a phone's keyboard moves the visible viewport.
+    onCleanup(followComposer(composer(), position));
+  });
+  onMount(() => {
+    const key = event => {
+      if (!open() || event.defaultPrevented) return;
+      const current = context();
+      if (event.key === "Escape" && !current) {
+        // Escape stops a running command and closes the list it held, or clears an outcome at once.
+        event.preventDefault();
+        nav.abort();
+        nav.clearOutcome();
+        close();
+        return;
+      }
+      // An outcome is no list: other keys are the person writing on.
+      if (!current && nav.outcome()) return;
+      if (commandListKey(nav, event, current?.query ?? "")) event.preventDefault();else if (event.key === "Escape" && current) {
+        event.preventDefault();
+        dismissedAt = current.start;
+        close();
+      }
+    };
+    const selection = () => {
+      if (document.activeElement === textarea && !held()) detect();
+    };
+    const blur = event => {
+      if (moving || event.relatedTarget instanceof Node && popover?.contains(event.relatedTarget)) return;
+      close();
+      dismissedAt = null;
+    };
+    textarea.addEventListener("keydown", key);
+    textarea.addEventListener("input", typed);
+    textarea.addEventListener("blur", blur);
+    document.addEventListener("selectionchange", selection);
+    // A `/` typed while this module loaded opens the list now.
+    detect();
+    onCleanup(() => {
+      textarea.removeEventListener("keydown", key);
+      textarea.removeEventListener("input", typed);
+      textarea.removeEventListener("blur", blur);
+      document.removeEventListener("selectionchange", selection);
+      popover?.hidePopover?.();
+    });
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$ssrAttribute("data-outcome", _$escape(nav.outcome()?.state, true), false), _$escape(_$createComponent(CommandList, {
+        onOutcomeAction: backToText,
+        navigator: nav,
+        id: id,
+        get label() {
+          return messages().commands;
+        },
+        get query() {
+          return nav.query;
+        },
+        get header() {
+          return _$createComponent(Show, {
+            get when() {
+              return depth() > 0;
+            },
+            get children() {
+              return _$ssr(_tmpl$2, _$ssrAttribute("aria-label", _$escape(nav.step()?.next?.label, true), false), _$ssrAttribute("aria-controls", _$escape(id, true), false), _$ssrAttribute("aria-activedescendant", nav.entries()[nav.active()] && !nav.entries()[nav.active()].disabled ? _$escape(commandOptionId(id, nav.active()), true) : _$escape(undefined, true), false), _$ssrAttribute("placeholder", _$escape(nav.step()?.next?.label, true), false) + _$ssrAttribute("value", _$escape(search(), true), false) + _$ssrAttribute("readonly", _$escape(nav.busy(), true), false));
+            }
+          });
+        }
+      })));
+    }
+  });
+}
+//# sourceMappingURL=SlashCommands.js.map