@k2b/ui 0.33.0 → 0.35.0

package/dist/browser/text-editor/TextEditor.js

@@ -0,0 +1,1358 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-ste-size-picker><!$><!/><!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i class="ti ti-table"aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div popover=auto class=k2b-ste-size-popover role=dialog tabindex=-1><div class=k2b-ste-size-grid role=group></div><div class=k2b-ste-size-caption role=status>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-ste-size-row>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button tabindex=-1>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<label class=k2b-ste-recovery-label><!$><!/><textarea class=k2b-ste-recovery readonly>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-down"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-ste-table-sheet-heading><span></span><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-ste-check><i class="ti ti-alert-triangle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-ste-status role=status><span></span><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-ste-toolbar-slot>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-ste-loading role=status>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-ste-floating-menu>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-ste-notice><div class=k2b-ste-notice-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div><span class=k2b-ste-announcement role=status aria-live=polite aria-atomic=true></span><!$><!/><!$><!/><!$><!/><div></div><!$><!/><div role=status aria-live=polite aria-atomic=true>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div><span>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span>`);
+import { history, historyKeymap, redo, undo } from "@codemirror/commands";
+import { EditorView, keymap } from "@codemirror/view";
+import { clipboard } from "@k2b/stdlib/solid";
+import { createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { Button, IconButton } from "../actions/Button";
+import { Dropdown } from "../actions/Dropdown";
+import { SegmentedControl } from "../actions/SegmentedControl";
+import { Toolbar } from "../actions/Toolbar";
+import { Kbd } from "../content/Kbd";
+import { dialogCore } from "../feedback/dialog-core";
+import { NumberInput } from "../inputs/NumberInput";
+import { LocaleProvider, useLocale } from "../intl/locale";
+import { formatShortcut, keyboardPlatform } from "../intl/shortcut";
+import BottomSheet, { bottomSheetAdaptiveOptions } from "../layout/BottomSheet";
+import { createTextEditor } from "./engine";
+import { commands, formatLabels } from "./format";
+import { findTables, inspectTableStructure } from "./markdown-table";
+import { textEditorMessages } from "./messages";
+import { copyTable, editTableSource, formatActiveCell, runMenuAction, runTableAction, tableActionEnabled } from "./table";
+/** Shared table-size control: pointer grid on desktop, large fields in a phone sheet. */
+export function TableSizePicker(props) {
+  const locale = useLocale();
+  const t = () => textEditorMessages.resolve([locale()]).t;
+  const [rows, setRows] = createSignal(3);
+  const [columns, setColumns] = createSignal(3);
+  const [expanded, setExpanded] = createSignal(false);
+  const id = createUniqueId();
+  const abort = new AbortController();
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+    abort.abort();
+  });
+  let trigger;
+  let popup;
+  const reset = () => {
+    setRows(Math.min(3, props.maxRows));
+    setColumns(Math.min(3, props.maxColumns));
+  };
+  const choose = (r, c) => {
+    popup.hidePopover();
+    if (!disposed && !props.disabled) props.onPick({
+      rows: r,
+      columns: c
+    });
+  };
+  const open = async () => {
+    if (disposed || props.disabled || expanded()) return;
+    reset();
+    if (!window.matchMedia("(max-width: 47.999rem)").matches) {
+      popup.showPopover();
+      const anchor = trigger.getBoundingClientRect(),
+        box = popup.getBoundingClientRect();
+      popup.style.left = `${Math.max(8, Math.min(anchor.left, innerWidth - box.width - 8))}px`;
+      popup.style.top = `${Math.max(8, anchor.top > box.height + 8 ? anchor.top - box.height - 8 : Math.min(anchor.bottom + 8, innerHeight - box.height - 8))}px`;
+      popup.focus();
+      return;
+    }
+    setExpanded(true);
+    const chosen = await dialogCore.open((close, context) => _$createComponent(LocaleProvider, {
+      get locale() {
+        return locale();
+      },
+      get children() {
+        return _$createComponent(BottomSheet, {
+          get onDismiss() {
+            return context.requestDismiss;
+          },
+          get children() {
+            return [_$createComponent(BottomSheet.Header, {
+              get title() {
+                return t().insertTable;
+              },
+              get close() {
+                return context.requestDismiss;
+              }
+            }), _$createComponent(BottomSheet.Body, {
+              get children() {
+                var _el$ = _$getNextElement(_tmpl$),
+                  _el$2 = _el$.firstChild,
+                  [_el$3, _co$] = _$getNextMarker(_el$2.nextSibling),
+                  _el$4 = _el$3.nextSibling,
+                  [_el$5, _co$2] = _$getNextMarker(_el$4.nextSibling);
+                _$insert(_el$, _$createComponent(NumberInput, {
+                  get label() {
+                    return t().rows;
+                  },
+                  get value() {
+                    return rows();
+                  },
+                  onValueChange: setRows,
+                  min: 1,
+                  get max() {
+                    return props.maxRows;
+                  },
+                  step: 1
+                }), _el$3, _co$);
+                _$insert(_el$, _$createComponent(NumberInput, {
+                  get label() {
+                    return t().columns;
+                  },
+                  get value() {
+                    return columns();
+                  },
+                  onValueChange: setColumns,
+                  min: 1,
+                  get max() {
+                    return props.maxColumns;
+                  },
+                  step: 1
+                }), _el$5, _co$2);
+                return _el$;
+              }
+            }), _$createComponent(BottomSheet.Footer, {
+              get children() {
+                return _$createComponent(Button, {
+                  get disabled() {
+                    return !rows() || !columns();
+                  },
+                  onClick: () => {
+                    const r = rows(),
+                      c = columns();
+                    if (r && c) close({
+                      rows: r,
+                      columns: c
+                    });
+                  },
+                  get children() {
+                    return t().insertSize({
+                      rows: rows() ?? 0,
+                      columns: columns() ?? 0
+                    });
+                  }
+                });
+              }
+            })];
+          }
+        });
+      }
+    }), {
+      ...bottomSheetAdaptiveOptions,
+      ariaLabel: t().insertTable,
+      history: true,
+      signal: abort.signal
+    });
+    setExpanded(false);
+    if (chosen && !disposed && !props.disabled) props.onPick(chosen);
+  };
+  onMount(() => props.onReady?.(() => void open()));
+  const keyboard = event => {
+    const directions = {
+      ArrowUp: [-1, 0],
+      ArrowDown: [1, 0],
+      ArrowLeft: [0, -1],
+      ArrowRight: [0, 1]
+    };
+    const direction = directions[event.key];
+    if (direction) {
+      event.preventDefault();
+      setRows(Math.max(1, Math.min(Math.min(9, props.maxRows), (rows() ?? 1) + direction[0])));
+      setColumns(Math.max(1, Math.min(Math.min(10, props.maxColumns), (columns() ?? 1) + direction[1])));
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      choose(rows() ?? 1, columns() ?? 1);
+    } else if (event.key === "Escape") trigger.focus();
+  };
+  return [_$createComponent(IconButton, {
+    ref(r$) {
+      var _ref$ = trigger;
+      typeof _ref$ === "function" ? _ref$(r$) : trigger = r$;
+    },
+    variant: "ghost",
+    get ["class"]() {
+      return props.class;
+    },
+    get size() {
+      return props.size ?? "sm";
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get label() {
+      return t().insertTable;
+    },
+    "aria-haspopup": "dialog",
+    "aria-controls": id,
+    get ["aria-expanded"]() {
+      return expanded();
+    },
+    get tooltip() {
+      return t().insertTable;
+    },
+    onMouseDown: event => event.preventDefault(),
+    onClick: () => void open(),
+    get children() {
+      return _$getNextElement(_tmpl$2);
+    }
+  }), (() => {
+    var _el$7 = _$getNextElement(_tmpl$3),
+      _el$8 = _el$7.firstChild,
+      _el$9 = _el$8.nextSibling;
+    _$addEventListener(_el$7, "toggle", () => setExpanded(popup.matches(":popover-open")));
+    _el$7.$$keydown = keyboard;
+    var _ref$2 = popup;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$7) : popup = _el$7;
+    _$setAttribute(_el$7, "id", id);
+    _$insert(_el$8, _$createComponent(For, {
+      get each() {
+        return Array.from({
+          length: Math.min(9, props.maxRows)
+        }, (_, index) => index + 1);
+      },
+      children: r => (() => {
+        var _el$0 = _$getNextElement(_tmpl$4);
+        _$insert(_el$0, _$createComponent(For, {
+          get each() {
+            return Array.from({
+              length: Math.min(10, props.maxColumns)
+            }, (_, index) => index + 1);
+          },
+          children: c => (() => {
+            var _el$1 = _$getNextElement(_tmpl$5);
+            _el$1.$$click = () => choose(r, c);
+            _el$1.addEventListener("pointerenter", () => {
+              setRows(r);
+              setColumns(c);
+            });
+            _$effect(_p$ => {
+              var _v$3 = t().insertSize({
+                  rows: r,
+                  columns: c
+                }),
+                _v$4 = r <= (rows() ?? 0) && c <= (columns() ?? 0) ? "true" : undefined;
+              _v$3 !== _p$.e && _$setAttribute(_el$1, "aria-label", _p$.e = _v$3);
+              _v$4 !== _p$.t && _$setAttribute(_el$1, "data-selected", _p$.t = _v$4);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            _$runHydrationEvents();
+            return _el$1;
+          })()
+        }));
+        return _el$0;
+      })()
+    }));
+    _$insert(_el$9, () => t().insertSize({
+      rows: rows() ?? 0,
+      columns: columns() ?? 0
+    }));
+    _$effect(_p$ => {
+      var _v$ = t().insertTable,
+        _v$2 = t().insertTable;
+      _v$ !== _p$.e && _$setAttribute(_el$7, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$8, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    _$runHydrationEvents();
+    return _el$7;
+  })()];
+}
+
+/** Shared table controls for a host-owned toolbar (`toolbar={false}`). */
+
+const toolbar = [["bold", "bold"], ["italic", "italic"], ["heading", "heading"], ["bulletList", "list"], ["orderedList", "list-numbers"], ["quote", "quote"], ["link", "link"], ["code", "code"], ["table", "table"], ["rule", "separator"]];
+const actionIcons = {
+  rowAbove: "row-insert-top",
+  rowBelow: "row-insert-bottom",
+  colLeft: "column-insert-left",
+  colRight: "column-insert-right",
+  alignLeft: "align-left",
+  alignCenter: "align-center",
+  alignRight: "align-right",
+  deleteRow: "row-remove",
+  deleteCol: "column-remove",
+  moveRowUp: "arrow-up",
+  moveRowDown: "arrow-down",
+  moveColLeft: "arrow-left",
+  moveColRight: "arrow-right",
+  toggleHeader: "table-row",
+  deleteTable: "trash"
+};
+const isInlineCommand = command => inlineCommands.has(command);
+const shortcuts = {
+  bold: "mod+b",
+  italic: "mod+i",
+  link: "mod+k"
+};
+const inlineCommands = new Set(["bold", "italic", "code", "link", "strike"]);
+
+/** A Markdown text field with app-injected collaboration and a directly editable table view. */
+export function TextEditor(props) {
+  const locale = useLocale();
+  const t = () => textEditorMessages.resolve([locale()]).t;
+  const [mode, setMode] = createSignal(props.mode ?? "formatted");
+  const [ready, setReady] = createSignal(false);
+  const [recovery, setRecovery] = createSignal();
+  const [notice, setNotice] = createSignal();
+  const [cell, setCell] = createSignal();
+  const [localSource, setLocalSource] = createSignal(false);
+  const [announcement, setAnnouncement] = createSignal("");
+  const [check, setCheck] = createSignal(false);
+  const [missingSeparator, setMissingSeparator] = createSignal(false);
+  const [active, setActive] = createSignal(false);
+  const [documentRevision, setDocumentRevision] = createSignal(0);
+  const [phoneMenu, setPhoneMenu] = createSignal(false);
+  const [platform, setPlatform] = createSignal("other");
+  createEffect(() => {
+    const target = cell();
+    target?.setAttribute("data-active", "");
+    onCleanup(() => target?.removeAttribute("data-active"));
+  });
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+    const text = recovery();
+    if (text !== undefined) detachedRecovery(text);
+  });
+  // A local draft can outlive an island during navigation. Keep its recovery
+  // surface in the shared dialog root so disposal never silently drops it.
+  const detachedRecovery = text => {
+    const language = locale();
+    const labels = t();
+    const beforeUnload = event => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", beforeUnload);
+    const show = () => void dialogCore.open((close, context) => {
+      context.setDismissHandler(() => {});
+      return _$createComponent(LocaleProvider, {
+        locale: language,
+        get children() {
+          return _$createComponent(BottomSheet, {
+            handle: false,
+            onDismiss: () => {},
+            get children() {
+              return [_$createComponent(BottomSheet.Header, {
+                get title() {
+                  return labels.recoveredInput;
+                }
+              }), _$createComponent(BottomSheet.Body, {
+                get children() {
+                  var _el$10 = _$getNextElement(_tmpl$6),
+                    _el$12 = _el$10.firstChild,
+                    [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
+                    _el$11 = _el$13.nextSibling;
+                  _$insert(_el$10, () => labels.recoveredInput, _el$13, _co$3);
+                  _$setProperty(_el$11, "value", text);
+                  return _el$10;
+                }
+              }), _$createComponent(BottomSheet.Footer, {
+                get children() {
+                  return _$createComponent(Button, {
+                    variant: "ghost",
+                    onClick: () => close("discard"),
+                    get children() {
+                      return labels.discardRecovery;
+                    }
+                  });
+                }
+              })];
+            }
+          });
+        }
+      });
+    }, {
+      ...bottomSheetAdaptiveOptions,
+      ariaLabel: labels.recoveredInput
+    }).then(result => {
+      if (result === "discard") window.removeEventListener("beforeunload", beforeUnload);
+      // The shared dialog root closes on each island disposal. Retain the
+      // draft across subsequent navigation until the person explicitly discards it.
+      else queueMicrotask(show);
+    });
+    show();
+  };
+  let menuOpen = false;
+  let pointerAnchor;
+  let floatingTrigger;
+  const tableTriggers = new Set();
+  let frame = 0;
+  const [menuPosition, setMenuPosition] = createSignal({
+    left: "0px",
+    top: "0px"
+  });
+  let root;
+  let mount;
+  let editor;
+  const menuBlocked = () => !!props.loading || !ready() || recovery() !== undefined;
+  const blocked = () => !!props.readOnly || menuBlocked();
+  const updateCheck = () => {
+    const issue = mode() === "plain" ? {
+      extraCells: false,
+      missingSeparator: false
+    } : inspectTableStructure(editor?.view.state.doc.toString() ?? props.initialValue ?? "");
+    const needsCheck = issue.extraCells || issue.missingSeparator;
+    setMissingSeparator(issue.missingSeparator);
+    setCheck(needsCheck);
+    props.onTableCheck?.(needsCheck);
+  };
+  const positionMenu = () => {
+    const target = cell();
+    if (!target) return;
+    const wrap = target.closest(".k2b-ste-table");
+    const table = wrap?.querySelector("table");
+    if (!target.isConnected || !wrap || !table || mode() !== "formatted") {
+      menuOpen = false;
+      setCell(undefined);
+      checkFocus();
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    const bounds = root.getBoundingClientRect();
+    const right = Math.min(table.getBoundingClientRect().right, wrap.getBoundingClientRect().right);
+    const position = props.readOnly ? {
+      left: `${wrap.getBoundingClientRect().left - bounds.left}px`,
+      top: `${wrap.getBoundingClientRect().bottom - bounds.top - (window.matchMedia("(max-width: 47.999rem)").matches ? 44 : 0)}px`
+    } : {
+      left: `${right - bounds.left - 24}px`,
+      top: `${rect.top - bounds.top + (rect.height - 24) / 2}px`
+    };
+    setMenuPosition(pointerAnchor ?? position);
+  };
+  const schedulePosition = () => {
+    if (!frame) frame = requestAnimationFrame(() => {
+      frame = 0;
+      positionMenu();
+    });
+  };
+  const unavailable = () => !!props.host?.structure && !props.host.structure.available();
+  const actionDisabled = action => {
+    documentRevision();
+    const wrap = cell()?.closest(".k2b-ste-table");
+    return blocked() || !editor || !wrap || !tableActionEnabled(editor.view, wrap, action);
+  };
+  const isMove = action => action.startsWith("move");
+  const runAction = action => {
+    const wrap = cell()?.closest(".k2b-ste-table");
+    const focused = document.activeElement;
+    const menuElement = focused instanceof HTMLElement ? focused.closest('[role="menu"]') : null;
+    if (editor && wrap && !actionDisabled(action)) runMenuAction(editor.view, wrap, action);
+    // The phone move sheet remains usable for another move. Local structural
+    // focus belongs to the cell only after the menu has closed.
+    if (isMove(action) && focused instanceof HTMLElement && menuElement) {
+      const restore = () => {
+        if (disposed || !menuElement.isConnected) return;
+        const target = focused.isConnected && !focused.matches(":disabled") ? focused : menuElement.querySelector('[role^="menuitem"]:not(:disabled)');
+        target?.focus({
+          preventScroll: true
+        });
+      };
+      restore();
+      queueMicrotask(restore);
+    }
+  };
+  const moveKeys = {
+    moveRowUp: "alt+arrowup",
+    moveRowDown: "alt+arrowdown",
+    moveColLeft: "alt+arrowleft",
+    moveColRight: "alt+arrowright"
+  };
+  const shortActionLabels = {
+    rowAbove: "menuAbove",
+    rowBelow: "menuBelow",
+    moveRowUp: "menuUp",
+    moveRowDown: "menuDown",
+    deleteRow: "menuDelete",
+    colLeft: "menuInsertLeft",
+    colRight: "menuInsertRight",
+    moveColLeft: "menuMoveLeft",
+    moveColRight: "menuMoveRight",
+    deleteCol: "menuDelete"
+  };
+  const menuRow = () => {
+    documentRevision();
+    return t().menuRow(Number(cell()?.dataset.r ?? 0));
+  };
+  const menuColumn = () => {
+    documentRevision();
+    const column = Number(cell()?.dataset.c ?? 0);
+    const header = cell()?.closest(".k2b-ste-table")?.querySelector(`.k2b-ste-cell[data-r="0"][data-c="${column}"]`);
+    return t().menuColumn(header?.dataset.raw || t().column(column + 1));
+  };
+  const menuHeading = () => `${menuRow()} · ${menuColumn()}`;
+  const actionItem = (action, choice) => ({
+    get label() {
+      return phoneMenu() && action in shortActionLabels ? t()[shortActionLabels[action]] : t()[action];
+    },
+    icon: `ti ti-${actionIcons[action]}`,
+    get disabled() {
+      return actionDisabled(action);
+    },
+    immediate: true,
+    trailing: moveKeys[action] ? _$createComponent(Kbd, {
+      get keys() {
+        return moveKeys[action];
+      }
+    }) : action === "rowBelow" ? _$createComponent(Kbd, {
+      keys: "enter"
+    }) : undefined,
+    variant: action === "deleteRow" || action === "deleteCol" || action === "deleteTable" ? "danger" : undefined,
+    closeOnSelect: !isMove(action),
+    action: () => runAction(action),
+    ...choice
+  });
+  const [copying, setCopying] = createSignal(false);
+  const tableCopy = clipboard.createWriter({
+    write: ({
+      view,
+      wrap,
+      format
+    }) => copyTable(view, wrap, format)
+  });
+  const copy = async format => {
+    const wrap = cell()?.closest(".k2b-ste-table");
+    if (!editor || !wrap || copying()) return;
+    setCopying(true);
+    setNotice({
+      message: t().copyingTable
+    });
+    const success = await tableCopy.copy({
+      view: editor.view,
+      wrap,
+      format
+    });
+    if (disposed) return;
+    setCopying(false);
+    setNotice({
+      message: success ? format === "table" ? t().copiedTable : t().copiedMarkdown : t().copyFailed
+    });
+  };
+  const copyItems = () => [{
+    get label() {
+      return phoneMenu() && !props.readOnly ? t().menuCopy : t().copyTable;
+    },
+    icon: "ti ti-copy",
+    get disabled() {
+      return copying();
+    },
+    immediate: true,
+    action: () => {
+      void copy("table");
+    }
+  }, {
+    get label() {
+      return phoneMenu() && !props.readOnly ? t().menuMarkdown : t().copyMarkdown;
+    },
+    icon: "ti ti-markdown",
+    get disabled() {
+      return copying();
+    },
+    immediate: true,
+    action: () => {
+      void copy("markdown");
+    }
+  }];
+  const items = () => {
+    if (props.readOnly) return copyItems();
+    const align = () => {
+      documentRevision();
+      return cell()?.parentElement?.style.textAlign || "left";
+    };
+    return [{
+      get sectionLabel() {
+        return menuHeading();
+      },
+      items: []
+    }, {
+      get sectionLabel() {
+        return menuRow();
+      },
+      items: ["rowAbove", "rowBelow", "moveRowUp", "moveRowDown", "deleteRow"].map(action => actionItem(action))
+    }, {
+      get sectionLabel() {
+        return menuColumn();
+      },
+      items: ["colLeft", "colRight", "moveColLeft", "moveColRight"].map(action => actionItem(action))
+    }, {
+      sectionLabel: t().alignment,
+      layout: "row",
+      items: ["alignLeft", "alignCenter", "alignRight"].map((action, index) => actionItem(action, {
+        choice: "radio",
+        class: "k2b-ste-align-choice",
+        ariaLabel: t()[action],
+        checked: () => align() === ["left", "center", "right"][index]
+      }))
+    }, {
+      items: [actionItem("deleteCol")]
+    }, {
+      sectionLabel: t().table,
+      items: [actionItem("toggleHeader", {
+        choice: "checkbox",
+        class: "k2b-ste-header-choice",
+        checked: () => {
+          documentRevision();
+          return cell()?.closest(".k2b-ste-table")?.dataset.header === "true";
+        }
+      }), {
+        label: t().editMarkdown,
+        icon: "ti ti-markdown",
+        action: () => {
+          const wrap = cell()?.closest(".k2b-ste-table");
+          if (editor && wrap) editTableSource(editor.view, wrap);
+        }
+      }, ...copyItems(), actionItem("deleteTable"), ...(unavailable() ? [{
+        label: t().structureUnavailable,
+        disabled: true
+      }] : [])]
+    }];
+  };
+  const preserveSelection = event => event.preventDefault();
+  const menuChange = open => {
+    menuOpen = open;
+  };
+  const menuClose = () => {
+    menuOpen = false;
+    pointerAnchor = undefined;
+    schedulePosition();
+    queueMicrotask(() => {
+      if (disposed) return;
+      const focused = document.activeElement;
+      if (focused instanceof HTMLElement && focused.matches(".k2b-ste-cell-menu, .k2b-ste-table-tool")) cell()?.focus();
+      checkFocus();
+    });
+  };
+  const menu = (floating, trigger) => // A sheet owns its item inventory until it closes. Replace that owner when
+  // edit access changes so an already open sheet cannot retain edit entries.
+  _$createComponent(Show, {
+    get when() {
+      return props.readOnly ? "read" : "write";
+    },
+    keyed: true,
+    children: _access => _$createComponent(Dropdown, {
+      get items() {
+        return items();
+      },
+      phone: "sheet",
+      get sheetTop() {
+        return props.readOnly ? undefined : close => (() => {
+          var _el$16 = _$getNextElement(_tmpl$9),
+            _el$17 = _el$16.firstChild,
+            _el$18 = _el$17.nextSibling,
+            [_el$19, _co$4] = _$getNextMarker(_el$18.nextSibling);
+          _$insert(_el$17, menuHeading);
+          _$insert(_el$16, _$createComponent(Button, {
+            variant: "ghost",
+            onClick: close,
+            get children() {
+              return t().done;
+            }
+          }), _el$19, _co$4);
+          _$effect(() => _$setAttribute(_el$17, "title", menuHeading()));
+          return _el$16;
+        })();
+      },
+      menuClass: "k2b-ste-table-menu",
+      get position() {
+        return floating ? "right-start" : trigger?.position ?? "bottom-right";
+      },
+      width: "18rem",
+      get label() {
+        return _$memo(() => !!props.readOnly)() ? t().copyTable : t().tableMenu;
+      },
+      get disabled() {
+        return menuBlocked() || localSource() || !cell()?.isConnected;
+      },
+      onOpenChange: menuChange,
+      onClose: menuClose,
+      get children() {
+        return _$createComponent(Dropdown.Trigger, {
+          ref: element => {
+            if (floating) floatingTrigger = element;else {
+              tableTriggers.add(element);
+              onCleanup(() => tableTriggers.delete(element));
+            }
+          },
+          get ["class"]() {
+            return floating ? props.readOnly ? "k2b-ste-cell-menu k2b-ste-copy-menu" : "k2b-ste-cell-menu" : `k2b-ste-tool k2b-ste-table-tool ${trigger?.class ?? ""}`;
+          },
+          variant: "ghost",
+          get size() {
+            return trigger?.size ?? "sm";
+          },
+          get iconOnly() {
+            return _$memo(() => !!!trigger?.text)() && !props.readOnly;
+          },
+          get label() {
+            return trigger?.text ?? (props.readOnly ? t().copyTable : t().tableMenu);
+          },
+          "aria-pressed": !floating ? true : undefined,
+          onMouseDown: preserveSelection,
+          get children() {
+            return [(() => {
+              var _el$14 = _$getNextElement(_tmpl$7);
+              _$effect(() => _$className(_el$14, props.readOnly ? "ti ti-copy" : floating ? "ti ti-dots" : "ti ti-table"));
+              return _el$14;
+            })(), _$memo(() => trigger?.text ?? (props.readOnly ? t().copyTable : undefined)), _$createComponent(Show, {
+              get when() {
+                return trigger?.text;
+              },
+              get children() {
+                return _$getNextElement(_tmpl$8);
+              }
+            })];
+          }
+        });
+      }
+    })
+  });
+  const runFormat = command => {
+    if (!editor || blocked()) return;
+    if (cell()?.isConnected && isInlineCommand(command) && formatActiveCell(editor.view, command)) return;
+    commands[command](editor.view);
+  };
+  const checkFocus = () => {
+    if (disposed) return;
+    // A host toolbar sits outside this root. Native popover focus moves before
+    // its toggle callback, but Dropdown already exposes its synchronous state.
+    if (menuOpen || [...tableTriggers, floatingTrigger].some(trigger => trigger?.isConnected && trigger.getAttribute("aria-expanded") === "true")) return;
+    const focused = document.activeElement;
+    setLocalSource(focused instanceof HTMLElement && !!focused.closest(".k2b-ste-table-source"));
+    const inside = focused instanceof Node && root.contains(focused);
+    setActive(inside);
+    if (!inside || focused === editor?.view.contentDOM) setCell(undefined);else if (!cell()?.isConnected) setCell(undefined);
+  };
+  const formatMenu = command => _$createComponent(Dropdown, {
+    phone: "sheet",
+    get label() {
+      return t()[command];
+    },
+    get disabled() {
+      return blocked() || command === "heading" && !!cell();
+    },
+    onOpenChange: menuChange,
+    onClose: menuClose,
+    get items() {
+      return command === "heading" ? [{
+        items: ["heading1", "heading2", "heading3"].map((name, index) => ({
+          label: t()[name],
+          icon: `ti ti-h-${index + 1}`,
+          action: () => runFormat(name)
+        }))
+      }] : [{
+        label: t().inlineCode,
+        icon: "ti ti-code",
+        action: () => runFormat("code")
+      }, {
+        label: t().codeBlock,
+        icon: "ti ti-source-code",
+        disabled: !!cell(),
+        action: () => runFormat("codeBlock")
+      }, {
+        label: t().strike,
+        icon: "ti ti-strikethrough",
+        trailing: _$createComponent(Kbd, {
+          keys: "mod+shift+x"
+        }),
+        action: () => runFormat("strike")
+      }];
+    },
+    get children() {
+      return _$createComponent(Dropdown.Trigger, {
+        "class": "k2b-ste-tool",
+        variant: "ghost",
+        size: "sm",
+        iconOnly: true,
+        get label() {
+          return t()[command];
+        },
+        onMouseDown: preserveSelection,
+        get children() {
+          var _el$20 = _$getNextElement(_tmpl$7);
+          _$className(_el$20, `ti ti-${command}`);
+          return _el$20;
+        }
+      });
+    }
+  });
+  const selectMode = next => {
+    const restoreEditorFocus = !!editor?.view.contentDOM.contains(document.activeElement);
+    menuOpen = false;
+    setCell(undefined);
+    setMode(next);
+    props.onModeChange?.(next);
+    if (restoreEditorFocus) queueMicrotask(() => editor?.view.focus());
+  };
+  onMount(() => {
+    setPlatform(keyboardPlatform());
+    const menuMedia = window.matchMedia("(max-width: 47.999rem)");
+    const menuViewport = () => setPhoneMenu(menuMedia.matches);
+    menuViewport();
+    menuMedia.addEventListener("change", menuViewport);
+    onCleanup(() => menuMedia.removeEventListener("change", menuViewport));
+    // A standalone editor has no binding history; collaboration supplies its own instead.
+    const nativeHistory = !props.host?.undo;
+    editor = createTextEditor({
+      parent: mount,
+      doc: props.initialValue,
+      mode: mode(),
+      label: props.label,
+      readOnly: props.readOnly,
+      placeholder: props.placeholder,
+      presentation: props.presentation,
+      extensions: [nativeHistory ? [history(), keymap.of(historyKeymap)] : [], formatLabels.of({
+        get link() {
+          return t().link;
+        },
+        column: column => t().column(column)
+      }), EditorView.updateListener.of(update => {
+        schedulePosition();
+        if (update.docChanged) queueMicrotask(() => setDocumentRevision(revision => revision + 1));
+      }), props.extensions ?? []],
+      host: {
+        ...props.host,
+        undo: props.host?.undo ?? (() => editor && undo(editor.view)),
+        redo: props.host?.redo ?? (() => editor && redo(editor.view)),
+        boundary: props.host?.boundary ?? (() => {}),
+        cellLabel: (row, column, name) => t().cellLabel({
+          row,
+          column,
+          name
+        }),
+        actionLabel: name => t()[name],
+        sourceLabels: () => ({
+          edit: t().editMarkdown,
+          valid: t().markdownValid,
+          invalid: t().markdownInvalid,
+          changed: t().markdownChanged,
+          structural: t().markdownStructural,
+          applying: t().applyingTable,
+          applyFailed: t().markdownApplyFailed,
+          done: phoneMenu() ? t().done : t().showTable,
+          discard: t().discardMarkdown,
+          continue: t().continueMarkdown,
+          line: t().markdownLine,
+          separator: (header, separator) => t().markdownSeparator({
+            header,
+            separator
+          }),
+          extra: t().markdownExtra,
+          complete: t().completeColumns
+        }),
+        maxLength: props.maxLength,
+        maxPasteCells: props.maxPasteCells ?? 2000,
+        onRecovery: text => {
+          if (disposed) detachedRecovery(text);else setRecovery(previous => previous === undefined ? text : `${previous}\n\n${text}`);
+        },
+        onError: code => setNotice({
+          message: t()[code]
+        })
+      },
+      onChange: text => {
+        props.onChange?.(text);
+        queueMicrotask(updateCheck);
+      },
+      onDroppedImages: (count, files) => {
+        if (props.onDroppedImages?.(count, files) !== true) setNotice({
+          message: t().imageHint,
+          images: true
+        });
+      }
+    });
+    const focus = event => {
+      if (!(event instanceof CustomEvent) || !(event.detail.cell instanceof HTMLElement)) return;
+      setActive(true);
+      if (!menuOpen) pointerAnchor = undefined;
+      setCell(event.detail.cell);
+      positionMenu();
+    };
+    const structureAnnouncement = event => {
+      if (!(event instanceof CustomEvent)) return;
+      const detail = event.detail;
+      if (detail && typeof detail === "object" && "rows" in detail && "columns" in detail && typeof detail.rows === "number" && typeof detail.columns === "number") setAnnouncement(t().tableChanged({
+        rows: detail.rows,
+        columns: detail.columns
+      }));
+    };
+    const focusChange = () => queueMicrotask(checkFocus);
+    let pointerCheck;
+    const pointer = event => {
+      if (event.target instanceof Node && root.contains(event.target)) setActive(true);
+      // After the press moved focus: a host toolbar control that keeps focus in the cell keeps it active.
+      else if (!menuOpen) {
+        clearTimeout(pointerCheck);
+        pointerCheck = setTimeout(checkFocus);
+      }
+    };
+    const keyboardMenu = event => {
+      if (menuBlocked()) return;
+      focus(event);
+      if (event instanceof CustomEvent) {
+        const bounds = root.getBoundingClientRect();
+        const anchor = event.detail.anchor instanceof HTMLElement ? event.detail.anchor.getBoundingClientRect() : undefined;
+        if (anchor || typeof event.detail.x === "number") {
+          pointerAnchor = {
+            left: `${(anchor?.left ?? event.detail.x) - bounds.left}px`,
+            top: `${(anchor?.bottom ?? event.detail.y) - bounds.top}px`
+          };
+          positionMenu();
+        }
+      }
+      queueMicrotask(() => {
+        if (disposed || !cell()?.isConnected) return;
+        const tableTrigger = [...tableTriggers].find(trigger => trigger.isConnected);
+        const trigger = (window.matchMedia("(max-width: 47.999rem)").matches && tableTrigger?.isConnected ? tableTrigger : undefined) ?? floatingTrigger;
+        trigger?.click();
+      });
+    };
+    const mutations = new MutationObserver(schedulePosition);
+    mutations.observe(mount, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    const resize = new ResizeObserver(schedulePosition);
+    resize.observe(mount);
+    // Safari blurs a contenteditable on mouse-down without focusing the radio.
+    // Keep the caret and phone toolbar stationary until the view switch runs.
+    const viewMouseDown = event => {
+      if (event.target instanceof Element && event.target.closest(".k2b-ste-views")) event.preventDefault();
+    };
+    root.addEventListener("mousedown", viewMouseDown);
+    document.addEventListener("focusin", focusChange);
+    document.addEventListener("pointerdown", pointer);
+    root.addEventListener("k2b-ste-table-structure", structureAnnouncement);
+    root.addEventListener("k2b-ste-cell-focus", focus);
+    root.addEventListener("k2b-ste-cell-blur", focusChange);
+    root.addEventListener("k2b-ste-cell-menu", keyboardMenu);
+    const tableScroll = event => {
+      if (menuOpen && event.target instanceof HTMLElement && event.target.classList.contains("k2b-ste-table") && floatingTrigger?.getAttribute("aria-expanded") === "true") floatingTrigger.click();
+      schedulePosition();
+    };
+    window.addEventListener("scroll", tableScroll, true);
+    window.addEventListener("resize", schedulePosition);
+    const viewport = window.visualViewport;
+    const keyboard = () => root.style.setProperty("--k2b-ste-keyboard", `${Math.max(0, window.innerHeight - (viewport?.height ?? window.innerHeight) - (viewport?.offsetTop ?? 0))}px`);
+    viewport?.addEventListener("resize", keyboard);
+    viewport?.addEventListener("scroll", keyboard);
+    keyboard();
+    setReady(true);
+    updateCheck();
+    props.onReady?.(editor, {
+      tableActive: () => mode() === "formatted" && !!cell()?.isConnected,
+      TableMenu: trigger => menu(false, trigger),
+      formatCell: format => !!editor && !blocked() && !!cell()?.isConnected && formatActiveCell(editor.view, format),
+      notify: message => setNotice({
+        message
+      })
+    });
+    onCleanup(() => {
+      clearTimeout(pointerCheck);
+      mutations.disconnect();
+      resize.disconnect();
+      cancelAnimationFrame(frame);
+      root.removeEventListener("mousedown", viewMouseDown);
+      document.removeEventListener("focusin", focusChange);
+      document.removeEventListener("pointerdown", pointer);
+      root.removeEventListener("k2b-ste-table-structure", structureAnnouncement);
+      root.removeEventListener("k2b-ste-cell-focus", focus);
+      root.removeEventListener("k2b-ste-cell-blur", focusChange);
+      root.removeEventListener("k2b-ste-cell-menu", keyboardMenu);
+      window.removeEventListener("scroll", tableScroll, true);
+      window.removeEventListener("resize", schedulePosition);
+      viewport?.removeEventListener("resize", keyboard);
+      viewport?.removeEventListener("scroll", keyboard);
+      editor?.destroy();
+    });
+  });
+  createEffect(() => {
+    if (props.mode !== undefined) setMode(props.mode);
+  });
+  createEffect(() => {
+    if (ready()) {
+      const next = mode();
+      // Rendering the grid consults reactive host availability. Those reads
+      // must not turn a history notification into a nested mode reconfigure.
+      untrack(() => {
+        menuOpen = false;
+        setCell(undefined);
+        editor?.setMode(next);
+        updateCheck();
+      });
+    }
+  });
+  createEffect(() => {
+    const label = props.label;
+    if (ready()) untrack(() => editor?.setLabel(label));
+  });
+  createEffect(() => {
+    const readOnly = !!props.readOnly || !!props.loading || recovery() !== undefined;
+    if (ready()) untrack(() => editor?.setReadOnly(readOnly));
+  });
+  createEffect(() => {
+    documentRevision();
+    const disabled = blocked() || unavailable();
+    if (ready()) root.querySelectorAll(".k2b-ste-addColumn").forEach(button => {
+      button.disabled = disabled;
+    });
+  });
+  return (() => {
+    var _el$21 = _$getNextElement(_tmpl$15),
+      _el$22 = _el$21.firstChild,
+      _el$49 = _el$22.nextSibling,
+      [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling),
+      _el$51 = _el$50.nextSibling,
+      [_el$52, _co$10] = _$getNextMarker(_el$51.nextSibling),
+      _el$53 = _el$52.nextSibling,
+      [_el$54, _co$11] = _$getNextMarker(_el$53.nextSibling),
+      _el$33 = _el$54.nextSibling,
+      _el$55 = _el$33.nextSibling,
+      [_el$56, _co$12] = _$getNextMarker(_el$55.nextSibling),
+      _el$35 = _el$56.nextSibling;
+    var _ref$3 = root;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$21) : root = _el$21;
+    _$insert(_el$22, announcement);
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return !props.presentation || "status" in props || check();
+      },
+      get children() {
+        var _el$23 = _$getNextElement(_tmpl$1),
+          _el$24 = _el$23.firstChild,
+          _el$29 = _el$24.nextSibling,
+          [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
+        _$insert(_el$24, () => props.status);
+        _$insert(_el$23, _$createComponent(Show, {
+          get when() {
+            return check();
+          },
+          get children() {
+            return [(() => {
+              var _el$25 = _$getNextElement(_tmpl$0),
+                _el$26 = _el$25.firstChild,
+                _el$27 = _el$26.nextSibling,
+                [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling);
+              _$insert(_el$25, () => t().checkTable, _el$28, _co$5);
+              _$effect(() => _$setAttribute(_el$25, "title", missingSeparator() ? t().checkSeparatorDetail : t().checkTableDetail));
+              return _el$25;
+            })(), _$createComponent(Button, {
+              size: "sm",
+              variant: "ghost",
+              get disabled() {
+                return blocked() || !missingSeparator() && unavailable();
+              },
+              get hidden() {
+                return props.readOnly;
+              },
+              get tooltip() {
+                return _$memo(() => !!missingSeparator())() ? t().checkSeparatorDetail : _$memo(() => !!unavailable())() ? t().structureUnavailable : t().checkTableDetail;
+              },
+              onMouseDown: preserveSelection,
+              onClick: () => {
+                if (!editor) return;
+                if (missingSeparator()) {
+                  selectMode("source");
+                  queueMicrotask(() => editor?.view.focus());
+                  return;
+                }
+                const table = findTables(editor.view.state.doc.toString()).find(table => table.lines.some(row => row.cells.length > table.columns));
+                if (table) runTableAction(editor.view, table.from, 0, 0, "completeColumns");
+              },
+              get children() {
+                return _$memo(() => !!missingSeparator())() ? t().reviewMarkdown : t().completeColumns;
+              }
+            })];
+          }
+        }), _el$30, _co$6);
+        return _el$23;
+      }
+    }), _el$50, _co$1);
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(!props.readOnly && mode() !== "plain"))() && props.toolbar !== false;
+      },
+      get children() {
+        var _el$31 = _$getNextElement(_tmpl$10);
+        _$insert(_el$31, _$createComponent(Toolbar, {
+          "class": "k2b-ste-toolbar",
+          get label() {
+            return t().formatting;
+          },
+          get children() {
+            return [_$createComponent(For, {
+              get each() {
+                return [toolbar.slice(0, 3), toolbar.slice(3, 6), toolbar.slice(6)];
+              },
+              children: group => _$createComponent(Toolbar.Group, {
+                "class": "k2b-ste-tool-group",
+                get children() {
+                  return _$createComponent(For, {
+                    each: group,
+                    children: ([command, icon]) => command === "heading" || command === "code" ? formatMenu(command) : _$createComponent(Show, {
+                      get when() {
+                        return _$memo(() => !!(command === "table" && mode() === "formatted"))() && cell()?.isConnected;
+                      },
+                      get fallback() {
+                        return _$createComponent(IconButton, {
+                          "class": "k2b-ste-tool",
+                          variant: "ghost",
+                          size: "sm",
+                          get label() {
+                            return t()[command];
+                          },
+                          get tooltip() {
+                            return _$memo(() => !!shortcuts[command])() ? `${t()[command]} (${formatShortcut(shortcuts[command] ?? "", {
+                              platform: platform(),
+                              locale: locale()
+                            }).label})` : t()[command];
+                          },
+                          get disabled() {
+                            return blocked() || !!cell() && !inlineCommands.has(command) && command !== "table";
+                          },
+                          onMouseDown: preserveSelection,
+                          onClick: () => runFormat(command),
+                          get children() {
+                            var _el$57 = _$getNextElement(_tmpl$7);
+                            _$className(_el$57, `ti ti-${icon}`);
+                            return _el$57;
+                          }
+                        });
+                      },
+                      get children() {
+                        return menu(false);
+                      }
+                    })
+                  });
+                }
+              })
+            }), _$createComponent(SegmentedControl, {
+              "class": "k2b-ste-views",
+              size: "sm",
+              get ariaLabel() {
+                return t().view;
+              },
+              get value() {
+                return mode() === "source" ? "source" : "formatted";
+              },
+              get options() {
+                return [{
+                  value: "formatted",
+                  label: t().formatted,
+                  icon: "ti ti-typography"
+                }, {
+                  value: "source",
+                  label: t().source,
+                  icon: "ti ti-markdown"
+                }];
+              },
+              onValueChange: selectMode
+            })];
+          }
+        }));
+        return _el$31;
+      }
+    }), _el$52, _co$10);
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return props.loading || !ready();
+      },
+      get children() {
+        var _el$32 = _$getNextElement(_tmpl$11);
+        _$insert(_el$32, _$createComponent(For, {
+          each: [82, 100, 68, 0, 96, 74],
+          children: width => (() => {
+            var _el$58 = _$getNextElement(_tmpl$16),
+              _el$59 = _el$58.firstChild;
+            _$setStyleProperty(_el$59, "width", `${width}%`);
+            return _el$58;
+          })()
+        }));
+        _$effect(() => _$setAttribute(_el$32, "aria-label", t().loading));
+        return _el$32;
+      }
+    }), _el$54, _co$11);
+    var _ref$4 = mount;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$33) : mount = _el$33;
+    _$insert(_el$21, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(cell() && mode() === "formatted"))() && !menuBlocked();
+      },
+      get children() {
+        var _el$34 = _$getNextElement(_tmpl$12);
+        _$insert(_el$34, () => menu(true));
+        _$effect(_p$ => {
+          var _v$5 = props.readOnly ? "true" : undefined,
+            _v$6 = menuPosition();
+          _v$5 !== _p$.e && _$setAttribute(_el$34, "data-readonly", _p$.e = _v$5);
+          _p$.t = _$style(_el$34, _v$6, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$34;
+      }
+    }), _el$56, _co$12);
+    _$insert(_el$35, _$createComponent(Show, {
+      get when() {
+        return notice() || recovery() !== undefined;
+      },
+      get children() {
+        var _el$36 = _$getNextElement(_tmpl$14),
+          _el$37 = _el$36.firstChild,
+          _el$42 = _el$37.firstChild,
+          [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
+          _el$44 = _el$43.nextSibling,
+          [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling),
+          _el$47 = _el$37.nextSibling,
+          [_el$48, _co$0] = _$getNextMarker(_el$47.nextSibling);
+        _$insert(_el$37, _$createComponent(Show, {
+          get when() {
+            return notice();
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!notice()?.images)() && props.onAttachImages;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$60 = _$getNextElement(_tmpl$17);
+                  _$insert(_el$60, () => notice()?.message);
+                  return _el$60;
+                })();
+              },
+              get children() {
+                return _$createComponent(Button, {
+                  size: "sm",
+                  variant: "ghost",
+                  get disabled() {
+                    return blocked();
+                  },
+                  onClick: () => props.onAttachImages?.(),
+                  get children() {
+                    return notice()?.message;
+                  }
+                });
+              }
+            });
+          }
+        }), _el$43, _co$8);
+        _$insert(_el$37, _$createComponent(Show, {
+          get when() {
+            return recovery() !== undefined;
+          },
+          get children() {
+            return [(() => {
+              var _el$38 = _$getNextElement(_tmpl$6),
+                _el$40 = _el$38.firstChild,
+                [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
+                _el$39 = _el$41.nextSibling;
+              _$insert(_el$38, () => t().recoveredInput, _el$41, _co$7);
+              _$effect(() => _$setProperty(_el$39, "value", recovery()));
+              return _el$38;
+            })(), _$createComponent(Button, {
+              size: "sm",
+              variant: "ghost",
+              onClick: () => {
+                setRecovery(undefined);
+                if (notice()?.message === t().cellRemoved) setNotice(undefined);
+              },
+              get children() {
+                return t().discardRecovery;
+              }
+            })];
+          }
+        }), _el$45, _co$9);
+        _$insert(_el$36, _$createComponent(Show, {
+          get when() {
+            return notice();
+          },
+          get children() {
+            return _$createComponent(IconButton, {
+              size: "sm",
+              variant: "ghost",
+              get label() {
+                return t().dismiss;
+              },
+              onClick: () => setNotice(undefined),
+              get children() {
+                return _$getNextElement(_tmpl$13);
+              }
+            });
+          }
+        }), _el$48, _co$0);
+        return _el$36;
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$7 = `k2b-text-editor ${props.class ?? ""}`,
+        _v$8 = mode(),
+        _v$9 = props.readOnly ? "true" : undefined,
+        _v$0 = active() ? "true" : undefined,
+        _v$1 = props.loading || !ready(),
+        _v$10 = props.presentation ? "k2b-ste-app-host" : "k2b-ste-host",
+        _v$11 = props.loading || !ready();
+      _v$7 !== _p$.e && _$className(_el$21, _p$.e = _v$7);
+      _v$8 !== _p$.t && _$setAttribute(_el$21, "data-mode", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setAttribute(_el$21, "data-readonly", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$setAttribute(_el$21, "data-active", _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setAttribute(_el$21, "aria-busy", _p$.i = _v$1);
+      _v$10 !== _p$.n && _$className(_el$33, _p$.n = _v$10);
+      _v$11 !== _p$.s && _$setProperty(_el$33, "hidden", _p$.s = _v$11);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
+    });
+    return _el$21;
+  })();
+}
+_$delegateEvents(["keydown", "click"]);
+//# sourceMappingURL=TextEditor.js.map