@threadlabs/looma 0.1.0

package/editor/chunk-NOOV344H.js

@@ -0,0 +1,783 @@
+// src/table-context-menu.ts
+var TAG = "ui-editor-table-context-menu";
+function dispatchTableAction(element, action) {
+  element.dispatchEvent(
+    new CustomEvent("looma-editor-table-action", {
+      detail: { action },
+      bubbles: true,
+      composed: true
+    })
+  );
+}
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorTableContextMenuElement extends HTMLElement {
+    static get observedAttributes() {
+      return [
+        "open",
+        "cell-background",
+        "can-add-row-before",
+        "can-add-row-after",
+        "can-add-column-before",
+        "can-add-column-after",
+        "can-delete-row",
+        "can-delete-column",
+        "can-delete-table",
+        "can-merge-cells",
+        "can-split-cell"
+      ];
+    }
+    getBoolAttr(name) {
+      return this.hasAttribute(name) && this.getAttribute(name) !== "false";
+    }
+    connectedCallback() {
+      this.render();
+      this.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+      this.removeEventListener("click", this.onClick);
+    }
+    attributeChangedCallback() {
+      this.render();
+    }
+    onClick(e) {
+      const target = e.target;
+      const trigger = target?.closest("[data-action]");
+      const action = trigger?.getAttribute("data-action");
+      if (action) {
+        dispatchTableAction(this, action);
+      }
+    }
+    render() {
+      const open = this.getBoolAttr("open");
+      this.hidden = !open;
+      if (!open) return;
+      const currentBackground = this.getAttribute("cell-background");
+      const backgroundActions = [
+        { action: "background-none", label: "Default", value: null, swatch: null },
+        { action: "background-gray", label: "Gray", value: "#f3f4f6", swatch: "#f3f4f6" },
+        { action: "background-yellow", label: "Yellow", value: "#fef3c7", swatch: "#fef3c7" },
+        { action: "background-blue", label: "Blue", value: "#dbeafe", swatch: "#dbeafe" },
+        { action: "background-green", label: "Green", value: "#dcfce7", swatch: "#dcfce7" },
+        { action: "background-red", label: "Red", value: "#fee2e2", swatch: "#fee2e2" }
+      ];
+      const sections = [
+        {
+          heading: "Cell background",
+          backgrounds: backgroundActions
+        },
+        {
+          heading: "Structure",
+          actions: [
+            { action: "add-row-before", label: "Add row above", can: "can-add-row-before" },
+            { action: "add-row-after", label: "Add row below", can: "can-add-row-after" },
+            { action: "add-column-before", label: "Add column left", can: "can-add-column-before" },
+            { action: "add-column-after", label: "Add column right", can: "can-add-column-after" }
+          ]
+        },
+        {
+          heading: "Cells",
+          actions: [
+            { action: "merge-cells", label: "Merge cells", can: "can-merge-cells" },
+            { action: "split-cell", label: "Split cell", can: "can-split-cell" }
+          ]
+        },
+        {
+          heading: "Table",
+          actions: [
+            { action: "delete-row", label: "Delete row", can: "can-delete-row", tone: "danger" },
+            { action: "delete-column", label: "Delete column", can: "can-delete-column", tone: "danger" },
+            { action: "delete-table", label: "Delete table", can: "can-delete-table", tone: "danger" }
+          ]
+        }
+      ];
+      const availableSections = sections.map((section) => {
+        if ("backgrounds" in section) {
+          return section;
+        }
+        return {
+          ...section,
+          actions: section.actions.filter((action) => this.getBoolAttr(action.can))
+        };
+      }).filter((section) => "backgrounds" in section ? section.backgrounds.length > 0 : section.actions.length > 0);
+      let html = '<div class="ui-editor-table-context-menu" role="menu">';
+      availableSections.forEach((section, sectionIndex) => {
+        if (sectionIndex > 0) {
+          html += '<div class="ui-editor-table-context-menu__sep"></div>';
+        }
+        html += '<div class="ui-editor-table-context-menu__section" role="none">';
+        html += `<div class="ui-editor-table-context-menu__heading" role="presentation">${section.heading}</div>`;
+        if ("backgrounds" in section) {
+          html += '<div class="ui-editor-table-context-menu__swatches" role="group" aria-label="Cell background">';
+          section.backgrounds.forEach((background) => {
+            const isSelected = (background.value ?? "") === (currentBackground ?? "");
+            html += `<button type="button" class="ui-editor-table-context-menu__swatch-button" role="menuitemradio" aria-checked="${isSelected ? "true" : "false"}" data-action="${background.action}"${isSelected ? ' data-selected="true"' : ""}><span class="ui-editor-table-context-menu__swatch${background.swatch ? "" : " ui-editor-table-context-menu__swatch--default"}"${background.swatch ? ` style="--ui-editor-table-context-swatch:${background.swatch}"` : ""}></span><span class="ui-editor-table-context-menu__swatch-label">${background.label}</span></button>`;
+          });
+          html += "</div>";
+        } else {
+          section.actions.forEach((action) => {
+            const tone = "tone" in action ? action.tone : void 0;
+            html += `<button type="button" role="menuitem" data-action="${action.action}"${tone ? ` data-tone="${tone}"` : ""}>${action.label}</button>`;
+          });
+        }
+        html += "</div>";
+      });
+      html += "</div>";
+      this.innerHTML = html;
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG)) {
+    customElements.define(TAG, UIEditorTableContextMenuElement);
+  }
+}
+
+// src/table-toolbar.ts
+var TAG2 = "ui-editor-table-toolbar";
+function dispatchTableAction2(element, action) {
+  element.dispatchEvent(
+    new CustomEvent("looma-editor-table-action", {
+      detail: { action },
+      bubbles: true,
+      composed: true
+    })
+  );
+}
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorTableToolbarElement extends HTMLElement {
+    #overflowOpen = false;
+    static get observedAttributes() {
+      return [
+        "open",
+        "cell-alignment",
+        "can-add-row-after",
+        "can-add-column-after",
+        "can-add-row-before",
+        "can-add-column-before",
+        "can-delete-row",
+        "can-delete-column",
+        "can-delete-table",
+        "can-merge-cells",
+        "can-split-cell"
+      ];
+    }
+    getBoolAttr(name) {
+      return this.hasAttribute(name) && this.getAttribute(name) !== "false";
+    }
+    getAlignmentAttr() {
+      const value = this.getAttribute("cell-alignment");
+      if (value === "center") {
+        return "align-center";
+      }
+      if (value === "right") {
+        return "align-right";
+      }
+      return "align-left";
+    }
+    connectedCallback() {
+      this.render();
+      this.addEventListener("click", this.onClick);
+      document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+    }
+    disconnectedCallback() {
+      this.removeEventListener("click", this.onClick);
+      document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+    }
+    attributeChangedCallback() {
+      this.render();
+    }
+    onClick = (event) => {
+      const target = event.target.closest("[data-action]");
+      if (!target) {
+        return;
+      }
+      if (target.dataset.action === "toggle-overflow") {
+        this.#overflowOpen = !this.#overflowOpen;
+        this.render();
+        return;
+      }
+      const action = target.dataset.action;
+      if (!action) {
+        return;
+      }
+      this.#overflowOpen = false;
+      this.render();
+      dispatchTableAction2(this, action);
+    };
+    onDocumentPointerDown = (event) => {
+      if (!this.#overflowOpen) {
+        return;
+      }
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      if (path.includes(this)) {
+        return;
+      }
+      if (event.target instanceof Node && this.contains(event.target)) {
+        return;
+      }
+      this.#overflowOpen = false;
+      this.render();
+    };
+    render() {
+      const open = this.getBoolAttr("open");
+      this.hidden = !open;
+      if (!open) {
+        this.#overflowOpen = false;
+        return;
+      }
+      const activeAlignment = this.getAlignmentAttr();
+      const alignmentActions = [
+        { action: "align-left", label: "Left" },
+        { action: "align-center", label: "Center" },
+        { action: "align-right", label: "Right" }
+      ];
+      const structuralActions = [
+        { action: "add-row-after", label: "Add row", can: "can-add-row-after" },
+        { action: "add-column-after", label: "Add column", can: "can-add-column-after" }
+      ].filter((action) => this.getBoolAttr(action.can));
+      const overflowSections = [
+        {
+          heading: "Structure",
+          actions: [
+            { action: "add-row-before", label: "Add row above", can: "can-add-row-before" },
+            { action: "add-column-before", label: "Add column left", can: "can-add-column-before" }
+          ]
+        },
+        {
+          heading: "Table",
+          actions: [
+            { action: "delete-row", label: "Delete row", can: "can-delete-row", tone: "danger" },
+            { action: "delete-column", label: "Delete column", can: "can-delete-column", tone: "danger" },
+            { action: "delete-table", label: "Delete table", can: "can-delete-table", tone: "danger" }
+          ]
+        }
+      ];
+      const availableOverflowSections = overflowSections.map((section) => ({
+        ...section,
+        actions: section.actions.filter((action) => this.getBoolAttr(action.can))
+      })).filter((section) => section.actions.length > 0);
+      this.innerHTML = [
+        '<div class="ui-editor-table-toolbar" role="toolbar" aria-label="Table actions">',
+        '<div class="ui-editor-table-toolbar__group" role="group" aria-label="Cell alignment">',
+        alignmentActions.map(
+          (action) => `<button type="button" data-action="${action.action}" aria-pressed="${action.action === activeAlignment ? "true" : "false"}" data-active="${action.action === activeAlignment ? "true" : "false"}">${action.label}</button>`
+        ).join(""),
+        "</div>",
+        structuralActions.length > 0 ? '<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>' : "",
+        structuralActions.length > 0 ? '<div class="ui-editor-table-toolbar__group" role="group" aria-label="Table structure">' : "",
+        structuralActions.map(
+          (action) => `<button type="button" data-action="${action.action}">${action.label}</button>`
+        ).join(""),
+        structuralActions.length > 0 ? "</div>" : "",
+        availableOverflowSections.length > 0 ? '<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>' : "",
+        availableOverflowSections.length > 0 ? '<div class="ui-editor-table-toolbar__overflow">' : "",
+        availableOverflowSections.length > 0 ? `<button type="button" class="ui-editor-table-toolbar__more" data-action="toggle-overflow" aria-haspopup="menu" aria-expanded="${this.#overflowOpen ? "true" : "false"}">Table options</button>` : "",
+        availableOverflowSections.length > 0 && this.#overflowOpen ? [
+          '<div class="ui-editor-table-toolbar__menu" role="menu" aria-label="More table actions">',
+          availableOverflowSections.map(
+            (section) => [
+              '<div class="ui-editor-table-toolbar__menu-section" role="none">',
+              `<div class="ui-editor-table-toolbar__menu-heading" role="presentation">${section.heading}</div>`,
+              section.actions.map((action) => {
+                const tone = "tone" in action ? action.tone : void 0;
+                return `<button type="button" role="menuitem" data-action="${action.action}"${tone ? ` data-tone="${tone}"` : ""}>${action.label}</button>`;
+              }).join(""),
+              "</div>"
+            ].join("")
+          ).join(""),
+          "</div>"
+        ].join("") : "",
+        availableOverflowSections.length > 0 ? "</div>" : "",
+        "</div>"
+      ].join("");
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG2)) {
+    customElements.define(TAG2, UIEditorTableToolbarElement);
+  }
+}
+
+// src/insert-table-grid.ts
+var TAG3 = "ui-editor-insert-table-grid";
+var DEFAULT_MAX_ROWS = 8;
+var DEFAULT_MAX_COLS = 8;
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorInsertTableGridElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["open", "max-rows", "max-cols"];
+    }
+    #maxRows = DEFAULT_MAX_ROWS;
+    #maxCols = DEFAULT_MAX_COLS;
+    #selectedRows = 3;
+    #selectedCols = 3;
+    #previewRows = null;
+    #previewCols = null;
+    #withHeaderRow = true;
+    #selectionPinned = false;
+    connectedCallback() {
+      this.#maxRows = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-rows") ?? String(DEFAULT_MAX_ROWS), 10) || DEFAULT_MAX_ROWS));
+      this.#maxCols = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-cols") ?? String(DEFAULT_MAX_COLS), 10) || DEFAULT_MAX_COLS));
+      this.render();
+      this.addEventListener("click", this.onClick);
+      this.addEventListener("mouseover", this.onMouseOver);
+    }
+    disconnectedCallback() {
+      this.removeEventListener("click", this.onClick);
+      this.removeEventListener("mouseover", this.onMouseOver);
+    }
+    attributeChangedCallback(name) {
+      if (name === "max-rows") this.#maxRows = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-rows") ?? String(DEFAULT_MAX_ROWS), 10) || DEFAULT_MAX_ROWS));
+      if (name === "max-cols") this.#maxCols = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-cols") ?? String(DEFAULT_MAX_COLS), 10) || DEFAULT_MAX_COLS));
+      this.render();
+    }
+    onClick(e) {
+      const cell = e.target.closest("[data-row][data-col]");
+      if (cell) {
+        this.#selectedRows = parseInt(cell.getAttribute("data-row") ?? "1", 10);
+        this.#selectedCols = parseInt(cell.getAttribute("data-col") ?? "1", 10);
+        this.#previewRows = null;
+        this.#previewCols = null;
+        this.#selectionPinned = true;
+        this.updateSelectionPreview();
+        return;
+      }
+      const target = e.target.closest("[data-insert-table]");
+      if (target) {
+        const checkbox = this.querySelector('input[type="checkbox"]');
+        const withHeaderRow = checkbox?.checked ?? this.#withHeaderRow;
+        this.dispatchEvent(
+          new CustomEvent("looma-editor-insert-table", {
+            detail: { rows: this.#selectedRows, cols: this.#selectedCols, withHeaderRow },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    }
+    onMouseOver(e) {
+      if (this.#selectionPinned) {
+        return;
+      }
+      const cell = e.target.closest("[data-row][data-col]");
+      if (cell) {
+        const nextRows = parseInt(cell.getAttribute("data-row") ?? "1", 10);
+        const nextCols = parseInt(cell.getAttribute("data-col") ?? "1", 10);
+        if (nextRows === this.#previewRows && nextCols === this.#previewCols) {
+          return;
+        }
+        this.#previewRows = nextRows;
+        this.#previewCols = nextCols;
+        this.updateSelectionPreview();
+      }
+    }
+    updateSelectionPreview() {
+      const activeRows = this.#previewRows ?? this.#selectedRows;
+      const activeCols = this.#previewCols ?? this.#selectedCols;
+      const hint = this.querySelector(".ui-editor-insert-table-grid__hint");
+      if (hint) {
+        hint.textContent = this.#selectionPinned ? `${this.#selectedRows} \xD7 ${this.#selectedCols} selected` : `${activeRows} \xD7 ${activeCols}`;
+      }
+      const cells = this.querySelectorAll("[data-row][data-col]");
+      for (const cell of cells) {
+        const row = parseInt(cell.getAttribute("data-row") ?? "1", 10);
+        const col = parseInt(cell.getAttribute("data-col") ?? "1", 10);
+        const selected = row <= activeRows && col <= activeCols;
+        cell.classList.toggle("ui-editor-insert-table-grid__cell--selected", selected);
+        cell.setAttribute("aria-pressed", selected ? "true" : "false");
+      }
+    }
+    render() {
+      const open = this.hasAttribute("open") && this.getAttribute("open") !== "false";
+      this.hidden = !open;
+      if (!open) return;
+      let html = '<div class="ui-editor-insert-table-grid">';
+      html += `<p class="ui-editor-insert-table-grid__hint">${this.#selectedRows} \xD7 ${this.#selectedCols}</p>`;
+      html += '<div class="ui-editor-insert-table-grid__grid" role="group" aria-label="Table dimensions">';
+      for (let r = 1; r <= this.#maxRows; r++) {
+        for (let c = 1; c <= this.#maxCols; c++) {
+          const selected = r <= this.#selectedRows && c <= this.#selectedCols;
+          html += `<button type="button" data-row="${r}" data-col="${c}" aria-label="${r} rows by ${c} columns" aria-pressed="${selected ? "true" : "false"}" class="ui-editor-insert-table-grid__cell${selected ? " ui-editor-insert-table-grid__cell--selected" : ""}"></button>`;
+        }
+      }
+      html += "</div>";
+      html += '<label class="ui-editor-insert-table-grid__header"><input type="checkbox" checked /> Header row</label>';
+      html += '<button type="button" data-insert-table>Insert table</button>';
+      html += "</div>";
+      this.innerHTML = html;
+      const checkbox = this.querySelector('input[type="checkbox"]');
+      if (checkbox) {
+        checkbox.checked = this.#withHeaderRow;
+        checkbox.addEventListener("change", () => {
+          this.#withHeaderRow = checkbox.checked;
+        });
+      }
+      this.updateSelectionPreview();
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG3)) {
+    customElements.define(TAG3, UIEditorInsertTableGridElement);
+  }
+}
+
+// src/table-overlay.ts
+var TAG4 = "ui-editor-table-overlay";
+var DEFAULT_ROWS = 3;
+var DEFAULT_COLS = 3;
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorTableOverlayElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["open", "rows", "cols"];
+    }
+    #rows = DEFAULT_ROWS;
+    #cols = DEFAULT_COLS;
+    #activeControlKey = null;
+    connectedCallback() {
+      this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
+      this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
+      this.render();
+      this.addEventListener("click", this.onClick);
+      this.addEventListener("pointerover", this.onPointerOver);
+      this.addEventListener("pointerout", this.onPointerOut);
+      this.addEventListener("focusin", this.onFocusIn);
+      this.addEventListener("focusout", this.onFocusOut);
+    }
+    disconnectedCallback() {
+      this.removeEventListener("click", this.onClick);
+      this.removeEventListener("pointerover", this.onPointerOver);
+      this.removeEventListener("pointerout", this.onPointerOut);
+      this.removeEventListener("focusin", this.onFocusIn);
+      this.removeEventListener("focusout", this.onFocusOut);
+    }
+    attributeChangedCallback(name) {
+      if (name === "rows") this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
+      if (name === "cols") this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
+      this.render();
+    }
+    #readBoundedNumber(name, fallback) {
+      const parsed = parseInt(this.getAttribute(name) ?? String(fallback), 10);
+      if (!Number.isFinite(parsed)) {
+        return fallback;
+      }
+      return Math.min(100, Math.max(1, parsed));
+    }
+    onClick = (event) => {
+      const target = event.target.closest("[data-action]");
+      if (!target) {
+        return;
+      }
+      const action = target.getAttribute("data-action");
+      const boundaryIndex = parseInt(target.getAttribute("data-boundary-index") ?? "-1", 10);
+      if (!action || !Number.isFinite(boundaryIndex) || boundaryIndex < 0) {
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent("looma-editor-table-overlay-action", {
+          detail: { action, boundaryIndex },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    onPointerOver = (event) => {
+      const control = event.target.closest("[data-control-key]");
+      this.#setActiveControl(control?.dataset.controlKey ?? null);
+    };
+    onPointerOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      const nextControl = relatedTarget instanceof Element ? relatedTarget.closest("[data-control-key]") : null;
+      this.#setActiveControl(nextControl?.dataset.controlKey ?? null);
+    };
+    onFocusIn = (event) => {
+      const control = event.target.closest("[data-control-key]");
+      this.#setActiveControl(control?.dataset.controlKey ?? null);
+    };
+    onFocusOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      const nextControl = relatedTarget instanceof Element ? relatedTarget.closest("[data-control-key]") : null;
+      this.#setActiveControl(nextControl?.dataset.controlKey ?? null);
+    };
+    #setActiveControl(controlKey) {
+      if (this.#activeControlKey === controlKey) {
+        return;
+      }
+      this.#activeControlKey = controlKey;
+      this.#syncActiveControl();
+    }
+    #syncActiveControl() {
+      const controls = this.querySelectorAll("[data-control-key]");
+      controls.forEach((control) => {
+        control.dataset.active = this.#activeControlKey && control.dataset.controlKey === this.#activeControlKey ? "true" : "false";
+      });
+    }
+    render() {
+      const open = this.hasAttribute("open") && this.getAttribute("open") !== "false";
+      this.hidden = !open;
+      if (!open) {
+        this.#setActiveControl(null);
+        return;
+      }
+      let html = '<div class="ui-editor-table-overlay" aria-label="Table insertion controls">';
+      html += `<div class="ui-editor-table-overlay__rows" style="--ui-editor-table-overlay-row-boundaries:${this.#rows + 1};">`;
+      for (let i = 0; i <= this.#rows; i++) {
+        const action = i === 0 ? "add-row-before" : "add-row-after";
+        const controlKey = `row:${i}`;
+        html += `<button type="button" class="ui-editor-table-overlay__control ui-editor-table-overlay__control--row" data-action="${action}" data-boundary-index="${i}" data-control-key="${controlKey}" data-active="${this.#activeControlKey === controlKey ? "true" : "false"}" aria-label="Add row"><span class="ui-editor-table-overlay__handle" aria-hidden="true">+</span></button>`;
+      }
+      html += "</div>";
+      html += `<div class="ui-editor-table-overlay__cols" style="--ui-editor-table-overlay-col-boundaries:${this.#cols + 1};">`;
+      for (let i = 0; i <= this.#cols; i++) {
+        const action = i === 0 ? "add-column-before" : "add-column-after";
+        const controlKey = `col:${i}`;
+        html += `<button type="button" class="ui-editor-table-overlay__control ui-editor-table-overlay__control--col" data-action="${action}" data-boundary-index="${i}" data-control-key="${controlKey}" data-active="${this.#activeControlKey === controlKey ? "true" : "false"}" aria-label="Add column"><span class="ui-editor-table-overlay__handle" aria-hidden="true">+</span></button>`;
+      }
+      html += "</div>";
+      html += "</div>";
+      this.innerHTML = html;
+      this.#syncActiveControl();
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG4)) {
+    customElements.define(TAG4, UIEditorTableOverlayElement);
+  }
+}
+
+// src/slash-menu.ts
+var TAG5 = "ui-editor-slash-menu";
+var MOBILE_BREAKPOINT = 768;
+var MENU_HEIGHT_ESTIMATE = 320;
+var MENU_WIDTH = 280;
+var OFFSET = 8;
+function finiteCoordinate(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function normalizeAnchorRect(value) {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const rect = value;
+  const x = finiteCoordinate(rect.x);
+  const y = finiteCoordinate(rect.y);
+  const width = finiteCoordinate(rect.width);
+  const height = finiteCoordinate(rect.height);
+  const left = finiteCoordinate(rect.left) ?? x;
+  const top = finiteCoordinate(rect.top) ?? y;
+  const right = finiteCoordinate(rect.right) ?? (left !== null && width !== null ? left + width : null);
+  const bottom = finiteCoordinate(rect.bottom) ?? (top !== null && height !== null ? top + height : null);
+  if (left === null || top === null || right === null || bottom === null) {
+    return null;
+  }
+  return { left, top, right, bottom };
+}
+function dispatchSlashMenuEvent(element, name, detail) {
+  element.dispatchEvent(
+    new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true
+    })
+  );
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorSlashMenuElement extends HTMLElement {
+    #open = false;
+    #query = "";
+    #items = [];
+    #selectedIndex = 0;
+    #anchorRect = null;
+    #normalizedAnchorRect = null;
+    get open() {
+      return this.#open;
+    }
+    set open(value) {
+      this.#open = Boolean(value);
+      this.render();
+    }
+    get query() {
+      return this.#query;
+    }
+    set query(value) {
+      this.#query = typeof value === "string" ? value : "";
+      this.render();
+    }
+    get items() {
+      return this.#items;
+    }
+    set items(value) {
+      this.#items = Array.isArray(value) ? value : [];
+      this.render();
+    }
+    get selectedIndex() {
+      return this.#selectedIndex;
+    }
+    set selectedIndex(value) {
+      this.#selectedIndex = Number.isFinite(value) ? Math.max(0, value) : 0;
+      this.render();
+    }
+    get anchorRect() {
+      return this.#anchorRect;
+    }
+    set anchorRect(value) {
+      const normalized = normalizeAnchorRect(value);
+      this.#anchorRect = normalized ? value : null;
+      this.#normalizedAnchorRect = normalized;
+      this.render();
+    }
+    connectedCallback() {
+      this.setAttribute("role", "listbox");
+      this.setAttribute("aria-label", "Insert block");
+      this.addEventListener("mousedown", this.onMouseDown);
+      this.addEventListener("click", this.onClick);
+      this.addEventListener("mouseover", this.onMouseOver);
+      window.addEventListener("resize", this.onViewportChange);
+      window.addEventListener("scroll", this.onViewportChange, true);
+      this.render();
+    }
+    disconnectedCallback() {
+      this.removeEventListener("mousedown", this.onMouseDown);
+      this.removeEventListener("click", this.onClick);
+      this.removeEventListener("mouseover", this.onMouseOver);
+      window.removeEventListener("resize", this.onViewportChange);
+      window.removeEventListener("scroll", this.onViewportChange, true);
+    }
+    onMouseDown = (event) => {
+      event.preventDefault();
+    };
+    onClick = (event) => {
+      const target = event.target.closest("[data-index]");
+      if (!target) {
+        return;
+      }
+      const index = Number.parseInt(target.dataset.index ?? "", 10);
+      if (!Number.isFinite(index)) {
+        return;
+      }
+      dispatchSlashMenuEvent(this, "looma-editor-slash-menu-select", {
+        index
+      });
+    };
+    onMouseOver = (event) => {
+      const target = event.target.closest("[data-index]");
+      if (!target) {
+        return;
+      }
+      const index = Number.parseInt(target.dataset.index ?? "", 10);
+      if (!Number.isFinite(index) || index === this.#selectedIndex) {
+        return;
+      }
+      this.#selectedIndex = index;
+      this.render();
+      dispatchSlashMenuEvent(
+        this,
+        "looma-editor-slash-menu-highlight",
+        { index }
+      );
+    };
+    onViewportChange = () => {
+      if (this.#open) {
+        this.applyHostPosition();
+      }
+    };
+    applyHostPosition() {
+      const rect = this.#normalizedAnchorRect;
+      if (!rect) {
+        this.style.display = "none";
+        return;
+      }
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      this.style.display = "block";
+      this.style.position = "fixed";
+      this.style.zIndex = "500";
+      if (viewportWidth < MOBILE_BREAKPOINT) {
+        this.style.left = "0";
+        this.style.right = "0";
+        this.style.bottom = "0";
+        this.style.top = "";
+        this.style.width = "100%";
+        this.style.maxHeight = "60dvh";
+        return;
+      }
+      let top;
+      const spaceBelow = viewportHeight - rect.bottom - OFFSET;
+      const spaceAbove = rect.top - OFFSET;
+      if (spaceBelow >= MENU_HEIGHT_ESTIMATE || spaceBelow >= spaceAbove) {
+        top = rect.bottom + OFFSET;
+      } else {
+        top = rect.top - OFFSET - MENU_HEIGHT_ESTIMATE;
+      }
+      let left = rect.left;
+      if (left + MENU_WIDTH > viewportWidth - 8) {
+        left = viewportWidth - MENU_WIDTH - 8;
+      }
+      if (left < 8) {
+        left = 8;
+      }
+      this.style.top = `${Math.max(8, top)}px`;
+      this.style.left = `${left}px`;
+      this.style.right = "";
+      this.style.bottom = "";
+      this.style.width = `${MENU_WIDTH}px`;
+      this.style.maxHeight = "";
+    }
+    render() {
+      const visible = this.#open && this.#items.length > 0 && this.#normalizedAnchorRect;
+      this.hidden = !visible;
+      if (!visible) {
+        return;
+      }
+      this.applyHostPosition();
+      const query = this.#query.trim();
+      const items = this.#items.map((item, index) => {
+        const activeClass = index === this.#selectedIndex ? " ui-editor-slash-menu__item--active" : "";
+        return [
+          `<li`,
+          ` class="ui-editor-slash-menu__item${activeClass}"`,
+          ` role="option"`,
+          ` aria-selected="${index === this.#selectedIndex ? "true" : "false"}"`,
+          ` data-index="${index}"`,
+          `>`,
+          `<span class="ui-editor-slash-menu__icon" aria-hidden="true">${escapeHtml(item.icon)}</span>`,
+          `<span class="ui-editor-slash-menu__body">`,
+          `<span class="ui-editor-slash-menu__title">${escapeHtml(item.title)}</span>`,
+          `<span class="ui-editor-slash-menu__description">${escapeHtml(item.description)}</span>`,
+          `</span>`,
+          `</li>`
+        ].join("");
+      }).join("");
+      this.innerHTML = [
+        `<div class="ui-editor-slash-menu">`,
+        `<div class="ui-editor-slash-menu__header" aria-hidden="true">`,
+        `<span class="ui-editor-slash-menu__header-label">Insert</span>`,
+        query ? `<span class="ui-editor-slash-menu__header-query">${escapeHtml(query)}</span>` : "",
+        `</div>`,
+        `<ul class="ui-editor-slash-menu__list" role="presentation">${items}</ul>`,
+        `<div class="ui-editor-slash-menu__footer" aria-hidden="true">`,
+        `<kbd>\u2191\u2193</kbd> navigate &nbsp;\xB7&nbsp; <kbd>\u21B5</kbd> insert &nbsp;\xB7&nbsp; <kbd>Esc</kbd> close`,
+        `</div>`,
+        `</div>`
+      ].join("");
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG5)) {
+    customElements.define(TAG5, UIEditorSlashMenuElement);
+  }
+}
+
+// src/toolbar.ts
+var TAG6 = "ui-editor-toolbar";
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorToolbarElement extends HTMLElement {
+    connectedCallback() {
+      if (!this.hasAttribute("role")) {
+        this.setAttribute("role", "toolbar");
+      }
+      if (!this.hasAttribute("aria-label")) {
+        this.setAttribute("aria-label", "Editor toolbar");
+      }
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG6)) {
+    customElements.define(TAG6, UIEditorToolbarElement);
+  }
+}