@threadlabs/looma 0.30.9 → 0.31.1

package/components/shared/icons.js

@@ -63,6 +63,7 @@ export const icons = {
   "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
   "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
   "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
+  "superscript": [["path",{"d":"m4 19 8-8"}],["path",{"d":"m12 19-8-8"}],["path",{"d":"M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06"}]],
   "table": [["path",{"d":"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"}]],
   "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
   "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],

package/components/ui-affordance-scope/ui-affordance-scope.html

@@ -1,4 +1,4 @@
-<template component="ui-affordance-scope" controller="./ui-affordance-scope.js">
+<template component="ui-affordance-scope" module="./ui-affordance-scope.js">
   <defs>
     <prop name="nearRadius" type="number" default="16">How close, in pixels, the pointer must come to reveal an affordance.</prop>
     <prop name="guide" type="keyword" values="dot, none" default="dot"

package/components/ui-affordance-scope/ui-affordance-scope.js

@@ -6,7 +6,7 @@ function distance(point, rect) {
   return Math.hypot(dx, dy);
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const owner = element.ownerDocument.defaultView;
   let anchors = [];
@@ -70,8 +70,3 @@ function connect(host) {
     clear();
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-avatar/ui-avatar.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-avatar" controller="./ui-avatar.js">
+<template component="ui-avatar" module="./ui-avatar.js">
   <defs>
     <prop name="src" type="string"
     >The image to show, cropped to fill the circle. Until it loads, or if it fails, the avatar shows initials instead. An img element authored inside the avatar

package/components/ui-avatar/ui-avatar.js

@@ -6,7 +6,7 @@ function toInitials(value) {
 }
 
 // Shows an authored <img>, else the `src` image, else initials, and tracks whether the image loaded.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const managed = host.refs.image;
   let active;
@@ -51,8 +51,3 @@ function connect(host) {
     active?.removeEventListener("error", onError);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-avatar-group/ui-avatar-group.html

@@ -1,4 +1,4 @@
-<template component="ui-avatar-group" controller="./ui-avatar-group.js">
+<template component="ui-avatar-group" module="./ui-avatar-group.js">
   <defs>
     <prop name="max" type="number" default="5"
     >How many avatars to show. The rest are hidden and counted in a +N badge after the last visible one. Fractions round down, and 0 hides every avatar behind

package/components/ui-avatar-group/ui-avatar-group.js

@@ -1,6 +1,6 @@
 // Hides avatars beyond `max`, counts them into the "+N" badge, and overlaps the rest. Projected
 // avatars are component roots, which this component's styles do not reach, so the overlap is inline.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const update = () => {
     const max = Number(host.props.max.value);
@@ -31,8 +31,3 @@ function connect(host) {
     observer.disconnect();
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-button/ui-button.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-button" controller="./ui-button.js">
+<template component="ui-button" module="./ui-button.js">
   <defs>
     <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card, field" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is

package/components/ui-button/ui-button.js

@@ -1,5 +1,5 @@
 // Loading actions retain focus but cannot activate, navigate, submit, or notify click consumers.
-function connect(host) {
+export function connect(host) {
   const onClick = (event) => {
     if (!host.props.loading.value && !host.props.pending.value) return;
     event.preventDefault();
@@ -8,8 +8,3 @@ function connect(host) {
   host.element.addEventListener("click", onClick, true);
   return () => host.element.removeEventListener("click", onClick, true);
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-checkbox/ui-checkbox.html

@@ -1,4 +1,4 @@
-<template component="ui-checkbox" controller="./ui-checkbox.js">
+<template component="ui-checkbox" module="./ui-checkbox.js">
   <defs>
     <prop name="label" type="string" default="">An accessible name for a checkbox without a visible label slot. It names the native input.</prop>
     <prop name="checked" type="boolean" default="false"

package/components/ui-checkbox/ui-checkbox.js

@@ -5,7 +5,7 @@ import { trackTrigger } from "../shared/trigger.js";
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
 // A form reset returns the control to `checked`. Vue writes the checked attribute on every render, so
 // the native default alone cannot hold it there.
-function connect(host) {
+export function connect(host) {
   const input = host.refs.input;
   describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
@@ -33,8 +33,3 @@ function connect(host) {
     input.removeEventListener("change", onChange);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-combobox/ui-combobox.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-badge/ui-badge.html">
 <link rel="component" href="../ui-tooltip/ui-tooltip.html">
-<template component="ui-combobox" controller="./ui-combobox.js">
+<template component="ui-combobox" module="./ui-combobox.js">
   <defs>
     <prop name="label" type="string" default=""
     >The field's label, tied to its input and shown above it; required adds an asterisk. It also names the suggestion list. Pair it with

package/components/ui-combobox/ui-combobox.js

@@ -21,7 +21,7 @@ function authoredOptions(container) {
   });
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const uid = `ui-combobox-${++comboboxes}`;
@@ -580,8 +580,3 @@ function connect(host) {
     surface.destroy();
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-context-menu/ui-context-menu.html

@@ -1,4 +1,4 @@
-<template component="ui-context-menu" controller="./ui-context-menu.js">
+<template component="ui-context-menu" module="./ui-context-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the context menu is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the element whose context click (right-click, long-press, Shift+F10, or the Menu key) opens the menu.</prop>

package/components/ui-context-menu/ui-context-menu.js

@@ -5,7 +5,7 @@ function disabled(item) {
   return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const menuSurface = host.refs.menu;
@@ -157,8 +157,3 @@ function connect(host) {
     closeOverlay(document, overlayId);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-dialog/ui-dialog.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
-<template component="ui-dialog" controller="./ui-dialog.js">
+<template component="ui-dialog" module="./ui-dialog.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the dialog is open initially or when set externally.</prop>
     <prop name="modal" type="boolean" default="false"

package/components/ui-dialog/ui-dialog.js

@@ -54,7 +54,7 @@ function observeContentHeight(dialog, refs) {
   return { reset, destroy() { reset(); observer.disconnect(); motion.removeEventListener("change", onMotionChange); } };
 }
 
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const dialog = element.localName === "dialog" ? element : element.querySelector("dialog");
@@ -186,8 +186,3 @@ function connect(host) {
     closeOverlay(document, overlayId);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-disclosure/ui-disclosure.html

@@ -1,4 +1,4 @@
-<template component="ui-disclosure" controller="./ui-disclosure.js">
+<template component="ui-disclosure" module="./ui-disclosure.js">
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>

package/components/ui-disclosure/ui-disclosure.js

@@ -34,7 +34,7 @@ function leaveGroup(document, name, member) {
 }
 
 // `open` sets the disclosure initially and whenever it changes; the trigger toggles the state.
-function connect(host) {
+export function connect(host) {
   const document = host.element.ownerDocument;
   const [trigger, stopTracking] = trackTrigger(host);
   host.state.contentId = `ui-disclosure-${++disclosures}`;
@@ -119,8 +119,3 @@ function connect(host) {
     host.refs.panel.removeEventListener("beforematch", onBeforematch);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editable/ui-editable.html

@@ -1,4 +1,4 @@
-<template component="ui-editable" controller="./ui-editable.js">
+<template component="ui-editable" module="./ui-editable.js">
   <defs>
     <prop name="value" type="string" default=""
     >The displayed value, and the text the editor starts from. It is not a form field: nothing is submitted with a form, so a form that needs the value copies

package/components/ui-editable/ui-editable.js

@@ -3,7 +3,7 @@ function triggerFor(event) {
 }
 
 /** Owns the display/edit transition so authors only provide value and label. */
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const { preview, input } = host.refs;
@@ -119,8 +119,3 @@ function connect(host) {
     document.removeEventListener("pointerdown", onDocumentPointerdown, true);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-block-actions/ui-editor-block-actions.html

@@ -1,6 +1,6 @@
 <link rel="component" href="../ui-menu/ui-menu.html">
 <link rel="component" href="../ui-menu-item/ui-menu-item.html">
-<template component="ui-editor-block-actions" controller="./ui-editor-block-actions.js">
+<template component="ui-editor-block-actions" module="./ui-editor-block-actions.js">
   <defs>
     <prop name="for" type="string" default="">The id of the button that opens the menu and anchors it.</prop>
     <prop name="placement" type="keyword" values="bottom-start, top-start" default="bottom-start"

package/components/ui-editor-block-actions/ui-editor-block-actions.js

@@ -1,5 +1,5 @@
 // Reports the menu's choice as a block action.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const onSelect = (event) => {
     if (event.target !== element && element.contains(event.target)) host.dispatch("action", { action: event.detail.value });
@@ -7,8 +7,3 @@ function connect(host) {
   element.addEventListener("select", onSelect);
   return () => element.removeEventListener("select", onSelect);
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-chip-editor/ui-editor-chip-editor.html

@@ -2,7 +2,7 @@
 <link rel="component" href="../ui-input/ui-input.html">
 <link rel="component" href="../ui-radio-group/ui-radio-group.html">
 <link rel="component" href="../ui-swatch/ui-swatch.html">
-<template component="ui-editor-chip-editor" controller="./ui-editor-chip-editor.js">
+<template component="ui-editor-chip-editor" module="./ui-editor-chip-editor.js">
   <defs>
     <prop name="label" type="string" default="">The chip's text, shown in the field as the reader edits it.</prop>
     <prop name="color" type="keyword" values="neutral, blue, green, yellow, red, purple" default="neutral">The chip's colour, checked among the swatches.</prop>

package/components/ui-editor-chip-editor/ui-editor-chip-editor.js

@@ -1,6 +1,6 @@
 // Reports the chip's text and colour as they change, and Enter or Escape in the text field as done.
 // A colour chosen with the pointer returns focus to the text; the arrow keys stay among the swatches.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const text = () => element.querySelector("[data-chip-label]");
   const onInput = (event) => {
@@ -26,8 +26,3 @@ function connect(host) {
     element.removeEventListener("keydown", onKeyDown);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-code-language/ui-editor-code-language.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-combobox/ui-combobox.html">
-<template component="ui-editor-code-language" controller="./ui-editor-code-language.js">
+<template component="ui-editor-code-language" module="./ui-editor-code-language.js">
   <defs>
     <prop name="value" type="string" default="auto">The code block's language, or auto to detect it.</prop>
     <prop name="languages" type="list(object({ value: string, label: string }))"

package/components/ui-editor-code-language/ui-editor-code-language.js

@@ -1,5 +1,5 @@
 // Reports a chosen language; typing a filter is not a choice.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const onValueChange = (event) => {
     if (event.target !== element && event.detail?.kind === "selection" && event.detail.value) host.dispatch("language", { value: event.detail.value });
@@ -7,8 +7,3 @@ function connect(host) {
   element.addEventListener("value-change", onValueChange);
   return () => element.removeEventListener("value-change", onValueChange);
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-footnote-editor/ui-editor-footnote-editor.html

@@ -0,0 +1,57 @@
+<link rel="component" href="../ui-stack/ui-stack.html">
+<link rel="component" href="../ui-form-field/ui-form-field.html">
+<link rel="component" href="../ui-input-group/ui-input-group.html">
+<link rel="component" href="../ui-input/ui-input.html">
+<link rel="component" href="../ui-textarea/ui-textarea.html">
+<link rel="component" href="../ui-button/ui-button.html">
+<template component="ui-editor-footnote-editor" module="./ui-editor-footnote-editor.js">
+  <defs>
+    <prop name="label" type="string" default="">The footnote's label, which its references and its note share, shown between [^ and ].</prop>
+    <prop name="note" type="string" default="">The note's text, shown in the note field, with each block of a longer note on its own line.</prop>
+    <prop name="editable" type="boolean" default="false"
+    >Whether the note's text can be edited here. A note with formatting or more than one block shows its text read-only; Go to note edits it in the
+      document.</prop>
+    <prop name="error" type="string" default="">Why the label field's label was not used. While set, the field is invalid and shows it.</prop>
+    <state name="base" type="string" value="ui-editor-footnote-editor"></state>
+    <event name="text" type="object">
+      <prop name="text" required type="string"></prop>
+      The note's text changed.
+    </event>
+    <event name="label" type="object">
+      <prop name="label" required type="string"></prop>
+      A new label was committed: the label field changed and lost focus, or Enter was pressed in it.
+    </event>
+    <event name="go" type="object">Go to note was pressed.</event>
+    <event name="done" type="object">Enter or Escape was pressed in a field, to close the editor and return to the reference.</event>
+  </defs>
+  <div role="dialog" aria-label="Edit footnote">
+    <ui-stack gap="s">
+      <ui-form-field from:invalid="$error != ''">
+        <label slot="label" from:for="concat($base, '-label')">Label</label>
+        <ui-input-group>
+          <span slot="prefix">[^</span>
+          <ui-input data-footnote-label from:id="concat($base, '-label')" size="sm" autocomplete="off" from:value="$label"></ui-input>
+          <span slot="suffix">]</span>
+        </ui-input-group>
+        <span slot="error">{$error}</span>
+      </ui-form-field>
+      <ui-form-field>
+        <label slot="label" from:for="concat($base, '-note')">Note</label>
+        <ui-input-group multiline>
+          <ui-textarea
+            data-footnote-note
+            from:id="concat($base, '-note')"
+            size="sm"
+            rows="2"
+            autosize
+            placeholder="Write the note"
+            from:readonly="not $editable"
+            from:value="$note"
+          ></ui-textarea>
+          <ui-button slot="action" size="sm" data-footnote-go>Go to note</ui-button>
+        </ui-input-group>
+        <span $if="not $editable" slot="help">This note has formatting, so it is edited in the document.</span>
+      </ui-form-field>
+    </ui-stack>
+  </div>
+</template>

package/components/ui-editor-footnote-editor/ui-editor-footnote-editor.js

@@ -0,0 +1,38 @@
+// Gives each editor its own field ids, reports the note's text as it changes and a label when it is
+// committed, Go to note when pressed, and Enter or Escape in a field as done.
+export function connect(host) {
+  const element = host.element;
+  if (host.state.base === "ui-editor-footnote-editor") host.state.base = `ui-editor-footnote-editor-${Math.random().toString(36).slice(2, 11)}`;
+  const within = (event, selector) => {
+    const match = event.target.closest?.(selector);
+    return match && element.contains(match) ? match : null;
+  };
+  const onInput = (event) => {
+    if (within(event, "[data-footnote-note]")) host.dispatch("text", { text: event.target.value });
+  };
+  const onChange = (event) => {
+    if (within(event, "[data-footnote-label]") && typeof event.target.value === "string") host.dispatch("label", { label: event.target.value.trim() });
+  };
+  const onClick = (event) => {
+    if (within(event, "[data-footnote-go]")) host.dispatch("go", {});
+  };
+  // The editor handles Enter and Escape itself, so the overlay around it does not also act on them.
+  const onKeyDown = (event) => {
+    const label = within(event, "[data-footnote-label]");
+    if ((event.key !== "Enter" && event.key !== "Escape") || !(label || within(event, "[data-footnote-note]"))) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (label && event.key === "Enter") host.dispatch("label", { label: event.target.value.trim() });
+    host.dispatch("done", {});
+  };
+  element.addEventListener("input", onInput);
+  element.addEventListener("change", onChange);
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeyDown);
+  return () => {
+    element.removeEventListener("input", onInput);
+    element.removeEventListener("change", onChange);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeyDown);
+  };
+}

package/components/ui-editor-image-toolbar/ui-editor-image-toolbar.html

@@ -9,7 +9,7 @@
 <link rel="component" href="../ui-input/ui-input.html">
 <link rel="component" href="../ui-cluster/ui-cluster.html">
 <link rel="component" href="../ui-button/ui-button.html">
-<template component="ui-editor-image-toolbar" controller="./ui-editor-image-toolbar.js">
+<template component="ui-editor-image-toolbar" module="./ui-editor-image-toolbar.js">
   <defs>
     <prop name="placement" type="keyword" values="block, center, wrap-left, wrap-right" default="block"
     >How the selected image sits in the text; its command shows as pressed.</prop>

package/components/ui-editor-image-toolbar/ui-editor-image-toolbar.js

@@ -1,6 +1,6 @@
 // Gives each toolbar its own ids for its tooltips and description popover, reports placement,
 // description, and delete requests, and keeps the description draft tied to the image it opened for.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-image-toolbar") host.state.base = `ui-editor-image-toolbar-${Math.random().toString(36).slice(2, 11)}`;
   let target = null;
@@ -48,8 +48,3 @@ function connect(host) {
     element.removeEventListener("submit", onSubmit);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -1,4 +1,4 @@
-<template component="ui-editor-insert-table-grid" controller="./ui-editor-insert-table-grid.js">
+<template component="ui-editor-insert-table-grid" module="./ui-editor-insert-table-grid.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the grid is shown.</prop>
     <prop name="maxRows" type="integer" default="8">The most rows the grid offers (at most 10).</prop>

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js

@@ -4,7 +4,7 @@ function bounded(value, fallback) {
 }
 
 // Lays out the grid cells and inserts the chosen size by pointer or keyboard.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   let selected = { rows: 3, cols: 3 };
   let preview = null;
@@ -103,8 +103,3 @@ function connect(host) {
     host.refs.header.removeEventListener("change", onChange);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-link-card/ui-editor-link-card.html

@@ -6,7 +6,7 @@
 <link rel="component" href="../ui-button/ui-button.html">
 <link rel="component" href="../ui-icon-button/ui-icon-button.html">
 <link rel="component" href="../ui-tooltip/ui-tooltip.html">
-<template component="ui-editor-link-card" controller="./ui-editor-link-card.js">
+<template component="ui-editor-link-card" module="./ui-editor-link-card.js">
   <defs>
     <prop name="href" type="string" default="">The link's destination, shown when there is no label.</prop>
     <prop name="openHref" type="string" default=""

package/components/ui-editor-link-card/ui-editor-link-card.js

@@ -1,6 +1,6 @@
 // Gives each card its own tooltip ids and reports edit and remove requests without taking focus
 // from the editor.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-link-card") host.state.base = `ui-editor-link-card-${Math.random().toString(36).slice(2, 11)}`;
   const action = (event) => {
@@ -20,8 +20,3 @@ function connect(host) {
     element.removeEventListener("click", onClick);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-link-form/ui-editor-link-form.html

@@ -8,7 +8,7 @@
 <link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
 <link rel="component" href="../ui-search-result-row/ui-search-result-row.html">
 <link rel="component" href="../ui-checkbox/ui-checkbox.html">
-<template component="ui-editor-link-form" controller="./ui-editor-link-form.js">
+<template component="ui-editor-link-form" module="./ui-editor-link-form.js">
   <defs>
     <prop name="existing" type="boolean" default="false">Whether the link already exists, so the heading reads Edit link rather than Add link.</prop>
     <prop name="searchable" type="boolean" default="false"

package/components/ui-editor-link-form/ui-editor-link-form.js

@@ -1,6 +1,6 @@
 // Gives each form its own field ids, reports field changes and choices, saves on Enter in a field,
 // closes on Escape, and moves between the search field and its results with the arrow keys.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-link-form") host.state.base = `ui-editor-link-form-${Math.random().toString(36).slice(2, 11)}`;
   const within = (event, selector) => {
@@ -64,8 +64,3 @@ function connect(host) {
     element.removeEventListener("submit", onSubmit);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-editor-mention-menu-item/ui-editor-mention-menu-item.html">
-<template component="ui-editor-mention-menu" controller="./ui-editor-mention-menu.js">
+<template component="ui-editor-mention-menu" module="./ui-editor-mention-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the menu is open.</prop>
     <prop name="query" type="string" default="">The text typed after the @.</prop>

package/components/ui-editor-mention-menu/ui-editor-mention-menu.js

@@ -2,7 +2,7 @@ import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the @ and derives its rows; the template renders them.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
@@ -66,8 +66,3 @@ function connect(host) {
     element.removeEventListener("mouseover", onMouseover);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -1,7 +1,7 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <link rel="component" href="../ui-editor-slash-menu-item/ui-editor-slash-menu-item.html">
 <link rel="component" href="../ui-editor-slash-menu-group/ui-editor-slash-menu-group.html">
-<template component="ui-editor-slash-menu" controller="./ui-editor-slash-menu.js">
+<template component="ui-editor-slash-menu" module="./ui-editor-slash-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the menu is open.</prop>
     <prop name="query" type="string" default="">The text typed after the slash.</prop>

package/components/ui-editor-slash-menu/ui-editor-slash-menu.js

@@ -2,7 +2,7 @@ import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the slash and tracks the highlighted item; the template renders the items.
-function connect(host) {
+export function connect(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
@@ -72,8 +72,3 @@ function connect(host) {
     element.removeEventListener("mouseover", onMouseover);
   };
 }
-
-/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
-export default function controller(host) {
-  host.on("connect", () => connect(host));
-}

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -1,5 +1,5 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
-<template component="ui-editor-table-context-menu" controller="./ui-editor-table-context-menu.js">
+<template component="ui-editor-table-context-menu" module="./ui-editor-table-context-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Shows the menu at the position owned by the editor integration.</prop>
     <prop name="scope" type="keyword" values="cell, row, column" default="cell">Keeps structure actions relevant to a cell, row handle, or column handle.</prop>