@k2b/ui 0.34.0 → 0.36.0

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

@@ -0,0 +1,1155 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<div class=\"k2b-ste-size-picker\">", "", "</div>"],
+  _tmpl$2 = "<i class=\"ti ti-table\" aria-hidden=\"true\"></i>",
+  _tmpl$3 = ["<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\">", "</div></div>"],
+  _tmpl$4 = ["<div class=\"k2b-ste-size-row\">", "</div>"],
+  _tmpl$5 = ["<button type=\"button\" tabindex=\"-1\"", "></button>"],
+  _tmpl$6 = ["<label class=\"k2b-ste-recovery-label\">", "<textarea class=\"k2b-ste-recovery\" readonly", "></textarea></label>"],
+  _tmpl$7 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$8 = "<i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i>",
+  _tmpl$9 = ["<div class=\"k2b-ste-table-sheet-heading\"><span", ">", "</span>", "</div>"],
+  _tmpl$0 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$1 = ["<span class=\"k2b-ste-check\"", "><i class=\"ti ti-alert-triangle\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$10 = ["<div class=\"k2b-ste-status\" role=\"status\"><span>", "</span>", "</div>"],
+  _tmpl$11 = ["<div class=\"k2b-ste-toolbar-slot\">", "</div>"],
+  _tmpl$12 = ["<div class=\"k2b-ste-loading\" role=\"status\"", ">", "</div>"],
+  _tmpl$13 = ["<div class=\"k2b-ste-floating-menu\"", " style=\"", "\">", "</div>"],
+  _tmpl$14 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
+  _tmpl$15 = ["<div class=\"k2b-ste-notice\"><div class=\"k2b-ste-notice-content\">", "", "</div>", "</div>"],
+  _tmpl$16 = ["<div class=\"", "\"", "><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\">", "</div></div>"],
+  _tmpl$17 = ["<div><span style=\"", "\"></span></div>"],
+  _tmpl$18 = ["<span>", "</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() {
+                return _$ssr(_tmpl$, _$escape(_$createComponent(NumberInput, {
+                  get label() {
+                    return t().rows;
+                  },
+                  get value() {
+                    return rows();
+                  },
+                  onValueChange: setRows,
+                  min: 1,
+                  get max() {
+                    return props.maxRows;
+                  },
+                  step: 1
+                })), _$escape(_$createComponent(NumberInput, {
+                  get label() {
+                    return t().columns;
+                  },
+                  get value() {
+                    return columns();
+                  },
+                  onValueChange: setColumns,
+                  min: 1,
+                  get max() {
+                    return props.maxColumns;
+                  },
+                  step: 1
+                })));
+              }
+            }), _$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, {
+    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 _$ssr(_tmpl$2);
+    }
+  }), _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("aria-label", _$escape(t().insertTable, true), false), _$ssrAttribute("aria-label", _$escape(t().insertTable, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return Array.from({
+        length: Math.min(9, props.maxRows)
+      }, (_, index) => index + 1);
+    },
+    children: r => _$ssr(_tmpl$4, _$escape(_$createComponent(For, {
+      get each() {
+        return Array.from({
+          length: Math.min(10, props.maxColumns)
+        }, (_, index) => index + 1);
+      },
+      children: c => _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(t().insertSize({
+        rows: r,
+        columns: c
+      }), true), false) + _$ssrAttribute("data-selected", r <= (rows() ?? 0) && c <= (columns() ?? 0) ? "true" : _$escape(undefined, true), false))
+    })))
+  })), _$escape(t().insertSize({
+    rows: rows() ?? 0,
+    columns: columns() ?? 0
+  })))];
+}
+
+/** 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() {
+                  return _$ssr(_tmpl$6, _$escape(labels.recoveredInput), _$ssrAttribute("value", _$escape(text, true), false));
+                }
+              }), _$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 => _$ssr(_tmpl$9, _$ssrAttribute("title", _$escape(menuHeading(), true), false), _$escape(menuHeading()), _$escape(_$createComponent(Button, {
+          variant: "ghost",
+          onClick: close,
+          get children() {
+            return t().done;
+          }
+        })));
+      },
+      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, {
+          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 [_$ssr(_tmpl$7, _$ssrAttribute("class", props.readOnly ? "ti ti-copy" : floating ? "ti ti-dots" : "ti ti-table", false)), trigger?.text ?? (props.readOnly ? t().copyTable : undefined), _$createComponent(Show, {
+              get when() {
+                return trigger?.text;
+              },
+              get children() {
+                return _$ssr(_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() {
+          return _$ssr(_tmpl$0, `ti ti-${_$escape(command, true)}`);
+        }
+      });
+    }
+  });
+  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 _$ssr(_tmpl$16, `k2b-text-editor ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mode", _$escape(mode(), true), false) + _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(props.loading || !ready(), true), false), _$escape(announcement()), _$escape(_$createComponent(Show, {
+    get when() {
+      return !props.presentation || "status" in props || check();
+    },
+    get children() {
+      return _$ssr(_tmpl$10, _$escape(props.status), _$escape(_$createComponent(Show, {
+        get when() {
+          return check();
+        },
+        get children() {
+          return [_$ssr(_tmpl$1, _$ssrAttribute("title", missingSeparator() ? _$escape(t().checkSeparatorDetail, true) : _$escape(t().checkTableDetail, true), false), _$escape(t().checkTable)), _$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 missingSeparator() ? t().reviewMarkdown : t().completeColumns;
+            }
+          })];
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(!props.readOnly && mode() !== "plain"))() && props.toolbar !== false;
+    },
+    get children() {
+      return _$ssr(_tmpl$11, _$escape(_$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() {
+                          return _$ssr(_tmpl$0, `ti ti-${_$escape(icon, true)}`);
+                        }
+                      });
+                    },
+                    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
+          })];
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.loading || !ready();
+    },
+    get children() {
+      return _$ssr(_tmpl$12, _$ssrAttribute("aria-label", _$escape(t().loading, true), false), _$escape(_$createComponent(For, {
+        each: [82, 100, 68, 0, 96, 74],
+        children: width => _$ssr(_tmpl$17, _$ssrStyleProperty("width:", `${_$escape(width, true)}%`))
+      })));
+    }
+  })), _$ssrAttribute("class", props.presentation ? "k2b-ste-app-host" : "k2b-ste-host", false), _$ssrAttribute("hidden", props.loading || !ready(), true), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(cell() && mode() === "formatted"))() && !menuBlocked();
+    },
+    get children() {
+      return _$ssr(_tmpl$13, _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false), _$ssrStyle(menuPosition()), _$escape(menu(true)));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return notice() || recovery() !== undefined;
+    },
+    get children() {
+      return _$ssr(_tmpl$15, _$escape(_$createComponent(Show, {
+        get when() {
+          return notice();
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!notice()?.images)() && props.onAttachImages;
+            },
+            get fallback() {
+              return _$ssr(_tmpl$18, _$escape(notice()?.message));
+            },
+            get children() {
+              return _$createComponent(Button, {
+                size: "sm",
+                variant: "ghost",
+                get disabled() {
+                  return blocked();
+                },
+                onClick: () => props.onAttachImages?.(),
+                get children() {
+                  return notice()?.message;
+                }
+              });
+            }
+          });
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return recovery() !== undefined;
+        },
+        get children() {
+          return [_$ssr(_tmpl$6, _$escape(t().recoveredInput), _$ssrAttribute("value", _$escape(recovery(), true), false)), _$createComponent(Button, {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => {
+              setRecovery(undefined);
+              if (notice()?.message === t().cellRemoved) setNotice(undefined);
+            },
+            get children() {
+              return t().discardRecovery;
+            }
+          })];
+        }
+      })), _$escape(_$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 _$ssr(_tmpl$14);
+            }
+          });
+        }
+      })));
+    }
+  })));
+}
+//# sourceMappingURL=TextEditor.js.map