@k2b/ui 0.1.0-rc.0

package/dist/ssr/inputs/index.js

@@ -0,0 +1,23 @@
+export { AutocompleteEditor } from "./AutocompleteEditor";
+export { AutocompleteSelect } from "./AutocompleteSelect";
+export { Checkbox } from "./Checkbox";
+export { CheckboxCard } from "./CheckboxCard";
+export { ColorInput, PinInput, Slider } from "./ChoiceInputs";
+export { Combobox } from "./Combobox";
+export { abbreviations } from "./completion";
+export { DatePicker, DateRangePicker, DateTimePicker } from "./DatePicker";
+export { FileDropzone, ImageCropper, ImageInput } from "./FileInputs";
+export { DEFAULT_ICON_GROUPS, DEFAULT_ICON_OPTIONS } from "./icon-options";
+export { clampImageCropRect, createCroppedImageCanvas, createCroppedImageDataUrl, getInitialImageCropRect, imageCropRectToPixels, normalizeImageCropRotation, resizeImageCropAroundCenter, rotateImageCropRight } from "./image-crop";
+export { MultiSelectInput } from "./MultiSelectInput";
+export { MarkdownEditor } from "./markdown/MarkdownEditor";
+export { NumberInput } from "./NumberInput";
+export { Select } from "./Select";
+export { SelectChip } from "./SelectChip";
+export { IconInput } from "./SpecialInputs";
+export { Switch } from "./Switch";
+export { TagEditor } from "./TagEditor";
+export { TagsInput } from "./TagsInput";
+export { createTemplateEditorPanesLayout, TemplateEditor, TemplatePreview, TemplateSampleData } from "./TemplateEditor";
+export { TextInput } from "./TextInput";
+//# sourceMappingURL=index.js.map

package/dist/ssr/inputs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AutocompleteEditor","AutocompleteSelect","Checkbox","CheckboxCard","ColorInput","PinInput","Slider","Combobox","abbreviations","DatePicker","DateRangePicker","DateTimePicker","FileDropzone","ImageCropper","ImageInput","DEFAULT_ICON_GROUPS","DEFAULT_ICON_OPTIONS","clampImageCropRect","createCroppedImageCanvas","createCroppedImageDataUrl","getInitialImageCropRect","imageCropRectToPixels","normalizeImageCropRotation","resizeImageCropAroundCenter","rotateImageCropRight","MultiSelectInput","MarkdownEditor","NumberInput","Select","SelectChip","IconInput","Switch","TagEditor","TagsInput","createTemplateEditorPanesLayout","TemplateEditor","TemplatePreview","TemplateSampleData","TextInput"],"sources":["inputs/index.ts"],"sourcesContent":["export type { AutocompleteEditorProps } from \"./AutocompleteEditor\";\nexport { AutocompleteEditor } from \"./AutocompleteEditor\";\nexport type {\n  AutocompleteSelectOption,\n  AutocompleteSelectProps,\n  AutocompleteSelectSearchResult,\n} from \"./AutocompleteSelect\";\nexport { AutocompleteSelect } from \"./AutocompleteSelect\";\nexport type { CheckboxProps } from \"./Checkbox\";\nexport { Checkbox } from \"./Checkbox\";\nexport type { CheckboxCardProps } from \"./CheckboxCard\";\nexport { CheckboxCard } from \"./CheckboxCard\";\nexport type {\n  ColorInputProps,\n  PinInputProps,\n  SliderProps,\n} from \"./ChoiceInputs\";\nexport { ColorInput, PinInput, Slider } from \"./ChoiceInputs\";\nexport type { ComboboxOption, ComboboxProps } from \"./Combobox\";\nexport { Combobox } from \"./Combobox\";\nexport type { ChoiceOption, ChoiceOptionsLoader } from \"./choice\";\nexport type {\n  Completion,\n  QueryContext,\n  SuggestContext,\n  Suggestion,\n} from \"./completion\";\nexport { abbreviations } from \"./completion\";\nexport type {\n  DatePickerBaseProps,\n  DatePickerProps,\n  DatePreset,\n  DateRangePickerProps,\n  DateRangeValue,\n  DateTimePickerProps,\n  DurationPreset,\n} from \"./DatePicker\";\nexport { DatePicker, DateRangePicker, DateTimePicker } from \"./DatePicker\";\nexport type { FileDropzoneProps, ImageCropperProps, ImageInputProps } from \"./FileInputs\";\nexport { FileDropzone, ImageCropper, ImageInput } from \"./FileInputs\";\nexport type { DateContext, FieldProps, MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nexport { DEFAULT_ICON_GROUPS, DEFAULT_ICON_OPTIONS } from \"./icon-options\";\nexport type {\n  ImageCropAspect,\n  ImageCropOutput,\n  ImageCropRect,\n  ImageCropRotation,\n  ImageCropSize,\n  ImageCropSource,\n  ImageCropState,\n} from \"./image-crop\";\nexport {\n  clampImageCropRect,\n  createCroppedImageCanvas,\n  createCroppedImageDataUrl,\n  getInitialImageCropRect,\n  imageCropRectToPixels,\n  normalizeImageCropRotation,\n  resizeImageCropAroundCenter,\n  rotateImageCropRight,\n} from \"./image-crop\";\nexport type {\n  MultiSelectFetchDataFn,\n  MultiSelectInputProps,\n  MultiSelectOption,\n} from \"./MultiSelectInput\";\nexport { MultiSelectInput } from \"./MultiSelectInput\";\nexport type { MarkdownEditorProps } from \"./markdown/MarkdownEditor\";\nexport { MarkdownEditor } from \"./markdown/MarkdownEditor\";\nexport type { NumberInputProps } from \"./NumberInput\";\nexport { NumberInput } from \"./NumberInput\";\nexport type { SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from \"./Select\";\nexport { Select } from \"./Select\";\nexport type { SelectChipOption, SelectChipProps } from \"./SelectChip\";\nexport { SelectChip } from \"./SelectChip\";\nexport type { IconInputProps, IconOption } from \"./SpecialInputs\";\nexport { IconInput } from \"./SpecialInputs\";\nexport type { SwitchProps } from \"./Switch\";\nexport { Switch } from \"./Switch\";\nexport type { TagEditorItem, TagEditorLabels, TagEditorProps, TagEditorValue } from \"./TagEditor\";\nexport { TagEditor } from \"./TagEditor\";\nexport type { TagsInputProps } from \"./TagsInput\";\nexport { TagsInput } from \"./TagsInput\";\nexport type {\n  TemplateEditorLayout,\n  TemplateEditorProps,\n  TemplatePreviewProps,\n  TemplateSampleDataProps,\n  TemplateVariable,\n  TemplateVariableKind,\n} from \"./TemplateEditor\";\nexport {\n  createTemplateEditorPanesLayout,\n  TemplateEditor,\n  TemplatePreview,\n  TemplateSampleData,\n} from \"./TemplateEditor\";\nexport type { TextInputProps } from \"./TextInput\";\nexport { TextInput } from \"./TextInput\";\n"],"mappings":"AACA,SAASA,kBAAkB,QAAQ,sBAAsB;AAMzD,SAASC,kBAAkB,QAAQ,sBAAsB;AAEzD,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,YAAY,QAAQ,gBAAgB;AAM7C,SAASC,UAAU,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAE7D,SAASC,QAAQ,QAAQ,YAAY;AAQrC,SAASC,aAAa,QAAQ,cAAc;AAU5C,SAASC,UAAU,EAAEC,eAAe,EAAEC,cAAc,QAAQ,cAAc;AAE1E,SAASC,YAAY,EAAEC,YAAY,EAAEC,UAAU,QAAQ,cAAc;AAErE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAU1E,SACEC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzBC,uBAAuB,EACvBC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,oBAAoB,QACf,cAAc;AAMrB,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,WAAW,QAAQ,eAAe;AAE3C,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,SAASC,MAAM,QAAQ,UAAU;AAEjC,SAASC,SAAS,QAAQ,aAAa;AAEvC,SAASC,SAAS,QAAQ,aAAa;AASvC,SACEC,+BAA+B,EAC/BC,cAAc,EACdC,eAAe,EACfC,kBAAkB,QACb,kBAAkB;AAEzB,SAASC,SAAS,QAAQ,aAAa","ignoreList":[]}

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

@@ -0,0 +1,516 @@
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<button type=\"button\" class=\"k2b-markdown-editor__tool\"", " tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$2 = ["<div class=\"k2b-markdown-editor__placeholder\" aria-hidden=\"true\">", "</div>"],
+  _tmpl$3 = ["<div class=\"k2b-markdown-editor__stats\" aria-hidden=\"true\"", "><span>", " ", "</span><span>", " ", "</span><span>", " ", "</span></div>"],
+  _tmpl$4 = "<div class=\"k2b-autocomplete__status\" role=\"status\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>Loading suggestions</div>",
+  _tmpl$5 = ["<div popover=\"manual\" class=\"k2b-autocomplete__options\" role=\"presentation\"", "><div", " class=\"k2b-autocomplete__listbox\" role=\"listbox\"", ">", "", "", "</div></div>"],
+  _tmpl$6 = ["<div class=\"k2b-markdown-editor\" role=\"group\"", " style=\"", "\">", "<div class=\"k2b-markdown-editor__surface\">", "<div class=\"k2b-markdown-editor__preview\" aria-hidden=\"true\"></div>", "</div>", "", "</div>"],
+  _tmpl$7 = ["<div class=\"k2b-autocomplete__status\" data-error=\"true\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i><span>", "</span><button type=\"button\">", "</button></div>"],
+  _tmpl$8 = ["<div", " class=\"k2b-autocomplete__option\" role=\"option\"", "><span>", "</span>", "</div>"],
+  _tmpl$9 = ["<small>", "</small>"];
+import { highlight } from "@k2b/stdlib";
+import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../../internal/field";
+import { useUiMessages } from "../../intl/messages";
+import { abbreviations as abbreviationsCompletion, buildSuggestContext, collectKnownLabels, createCompletionBehaviorState, detectQuery, displayLabel, renderWithOverlay, resolveSuggestions } from "../completion";
+import { resolveMaybeAccessor } from "../field-contract";
+import { computeActiveFormats } from "./active-formats";
+import { handleListContinuation, handleShortcut, handleSmartPaste } from "./behaviors";
+import { isInCodeZone } from "./code-zone";
+import Toolbar from "./Toolbar";
+export function MarkdownEditor(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  let textarea;
+  let preview;
+  let dropdown;
+  let completionAbort = null;
+  let completionTimer = null;
+  let overlayFrame;
+  let overlayInitialized = false;
+  let renderPendingOverlay;
+  const completionBehavior = createCompletionBehaviorState();
+  const [textareaSignal, setTextareaSignal] = createSignal(null);
+  const [activeFormats, setActiveFormats] = createSignal(new Set());
+  const [composing, setComposing] = createSignal(false);
+  const [localValue, setLocalValue] = createSignal(resolveMaybeAccessor(props.value) ?? "");
+  const error = () => resolveMaybeAccessor(props.error);
+  const [state, setState] = createSignal(null);
+  const [loading, setLoading] = createSignal(false);
+  const [completionError, setCompletionError] = createSignal(null);
+  const [dropdownOpen, setDropdownOpen] = createSignal(false);
+  const completionId = createUniqueId();
+  const listboxId = `${meta.controlId}-${completionId}-suggestions`;
+  const optionId = index => `${listboxId}-${index}`;
+  const activeSuggestion = () => {
+    const current = state();
+    return current?.suggestions[current.selectedIndex] ?? null;
+  };
+  const mergedCompletions = createMemo(() => {
+    const merged = [];
+    if (props.abbreviations && Object.keys(props.abbreviations).length > 0) {
+      merged.push(abbreviationsCompletion(props.abbreviations));
+    }
+    if (props.completions) merged.push(...props.completions);
+    return merged.length > 0 ? merged : undefined;
+  });
+  const knownLabels = createMemo(() => collectKnownLabels(mergedCompletions()));
+  createEffect(() => {
+    const incoming = resolveMaybeAccessor(props.value);
+    if (incoming !== undefined && incoming !== null && incoming !== untrack(localValue)) {
+      setLocalValue(incoming);
+    }
+  });
+  createEffect(() => {
+    const target = localValue();
+    if (!composing() && textarea && textarea.value !== target) {
+      textarea.value = target;
+    }
+  });
+  createEffect(() => {
+    if (!preview) return;
+    const value = localValue();
+    const labels = knownLabels();
+    const current = state();
+    const active = activeSuggestion();
+    const ghost = current && active ? {
+      at: current.context.end,
+      text: active.text.slice(current.context.text.length)
+    } : undefined;
+    const anchor = current && !ghost ? {
+      at: current.context.end
+    } : undefined;
+    renderPendingOverlay = () => {
+      if (!preview) return;
+      preview.innerHTML = renderWithOverlay(value, text => highlight.markdown(text, {
+        knownLabels: labels
+      }), {
+        ghost,
+        anchor
+      });
+      if (textarea) {
+        preview.scrollTop = textarea.scrollTop;
+        preview.scrollLeft = textarea.scrollLeft;
+      }
+      if (dropdown?.matches(":popover-open")) positionDropdown();
+    };
+    if (!overlayInitialized) {
+      overlayInitialized = true;
+      renderPendingOverlay();
+      renderPendingOverlay = undefined;
+      return;
+    }
+    if (overlayFrame !== undefined) return;
+    overlayFrame = requestAnimationFrame(() => {
+      overlayFrame = undefined;
+      const render = renderPendingOverlay;
+      renderPendingOverlay = undefined;
+      render?.();
+    });
+  });
+  const updateActiveFormats = () => {
+    if (textarea) setActiveFormats(computeActiveFormats(textarea));
+  };
+  const closeDropdown = () => {
+    if (dropdown?.matches(":popover-open")) dropdown.hidePopover();
+    setDropdownOpen(false);
+  };
+  const clearCompletion = () => {
+    completionAbort?.abort();
+    completionAbort = null;
+    if (completionTimer) clearTimeout(completionTimer);
+    completionTimer = null;
+    setState(null);
+    setLoading(false);
+    setCompletionError(null);
+    closeDropdown();
+  };
+  const positionDropdown = () => {
+    if (!dropdown?.isConnected || !preview?.isConnected || !textarea?.isConnected) {
+      return;
+    }
+    const anchor = preview.querySelector("[data-completion-anchor]");
+    const rect = anchor?.getBoundingClientRect() ?? textarea.getBoundingClientRect();
+    const maxHeight = 260;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openAbove = spaceBelow < maxHeight && rect.top > spaceBelow;
+    const width = Math.min(280, window.innerWidth - 16);
+    const left = Math.min(rect.left, window.innerWidth - width - 8);
+    dropdown.style.setProperty("left", `${Math.max(8, left)}px`, "important");
+    dropdown.style.setProperty("width", `${width}px`, "important");
+    if (openAbove) {
+      dropdown.style.setProperty("top", "auto", "important");
+      dropdown.style.setProperty("bottom", `${window.innerHeight - rect.top + 4}px`, "important");
+    } else {
+      dropdown.style.setProperty("top", `${rect.bottom + 4}px`, "important");
+      dropdown.style.setProperty("bottom", "auto", "important");
+    }
+    if (!dropdown.matches(":popover-open")) dropdown.showPopover();
+  };
+  const isAbortError = error => error instanceof DOMException ? error.name === "AbortError" : Boolean(error && typeof error === "object" && "name" in error && error.name === "AbortError");
+  const applySuggestionList = (context, suggestions) => {
+    const value = localValue();
+    const normalized = context.text.toLowerCase();
+    const usable = suggestions.filter(suggestion => {
+      if (suggestion.textEdit) {
+        const {
+          start,
+          end,
+          text
+        } = suggestion.textEdit;
+        return Number.isInteger(start) && Number.isInteger(end) && start >= 0 && end >= start && end <= value.length && value.slice(start, end) !== text;
+      }
+      return suggestion.text.toLowerCase().startsWith(normalized) && suggestion.text.length > context.text.length;
+    });
+    if (usable.length === 0) {
+      setState(null);
+      closeDropdown();
+      return;
+    }
+    const previous = activeSuggestion()?.text;
+    const retained = previous ? usable.findIndex(suggestion => suggestion.text === previous) : -1;
+    setState({
+      context,
+      suggestions: usable,
+      selectedIndex: retained >= 0 ? retained : 0
+    });
+    if (context.completion.dropdown) {
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    } else {
+      closeDropdown();
+    }
+  };
+  const runAsyncCompletion = async (context, promise, signal) => {
+    try {
+      const suggestions = await promise;
+      if (signal.aborted) return;
+      setLoading(false);
+      applySuggestionList(context, suggestions);
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) return;
+      setLoading(false);
+      setState(null);
+      setCompletionError(error instanceof Error ? error.message : "Suggestions could not be loaded");
+      setDropdownOpen(true);
+      queueMicrotask(positionDropdown);
+    }
+  };
+  const startCompletionResolution = (context, signal) => {
+    if (signal.aborted || !textarea) return;
+    setLoading(true);
+    setCompletionError(null);
+    setDropdownOpen(true);
+    queueMicrotask(positionDropdown);
+    try {
+      const result = resolveSuggestions(context.completion, context.query, buildSuggestContext(textarea, context), signal);
+      if (result.kind === "sync") {
+        setLoading(false);
+        applySuggestionList(context, result.data);
+      } else {
+        void runAsyncCompletion(context, result.promise, signal);
+      }
+    } catch (error) {
+      if (signal.aborted || isAbortError(error)) return;
+      setLoading(false);
+      setState(null);
+      setCompletionError(error instanceof Error ? error.message : "Suggestions could not be loaded");
+      queueMicrotask(positionDropdown);
+    }
+  };
+  const recomputeCompletion = () => {
+    if (!textarea) return;
+    const context = detectQuery(textarea, mergedCompletions(), {
+      isExcluded: isInCodeZone
+    });
+    if (!context) {
+      clearCompletion();
+      return;
+    }
+    completionAbort?.abort();
+    if (completionTimer) clearTimeout(completionTimer);
+    completionTimer = null;
+    completionAbort = new AbortController();
+    const current = state();
+    if (current && (current.context.start !== context.start || current.context.end !== context.end || current.context.text !== context.text || current.context.completion !== context.completion)) {
+      setState(null);
+      closeDropdown();
+    }
+    setCompletionError(null);
+    const delay = Math.max(0, context.completion.debounceMs ?? 0);
+    if (delay === 0) {
+      startCompletionResolution(context, completionAbort.signal);
+    } else {
+      setLoading(false);
+      if (!state()) closeDropdown();
+      const signal = completionAbort.signal;
+      completionTimer = setTimeout(() => {
+        completionTimer = null;
+        startCompletionResolution(context, signal);
+      }, delay);
+    }
+  };
+  const retryCompletion = () => {
+    if (!textarea) return;
+    const context = detectQuery(textarea, mergedCompletions(), {
+      isExcluded: isInCodeZone
+    });
+    if (!context) return clearCompletion();
+    completionAbort?.abort();
+    if (completionTimer) clearTimeout(completionTimer);
+    completionTimer = null;
+    completionAbort = new AbortController();
+    startCompletionResolution(context, completionAbort.signal);
+  };
+  const activateSuggestion = (index = state()?.selectedIndex ?? -1) => {
+    const current = state();
+    const active = current?.suggestions[index];
+    if (!textarea || !current || !active) return false;
+    if (!active.textEdit && active.text === current.context.text) {
+      closeDropdown();
+      setState(null);
+      return false;
+    }
+    const applied = completionBehavior.applySuggestion(textarea, current.context, active);
+    closeDropdown();
+    setState(null);
+    return applied;
+  };
+  const moveSelection = direction => {
+    const current = state();
+    if (!current || current.suggestions.length === 0) return;
+    setState({
+      ...current,
+      selectedIndex: (current.selectedIndex + direction + current.suggestions.length) % current.suggestions.length
+    });
+  };
+  const stats = createMemo(() => {
+    const value = localValue();
+    return {
+      lines: value.length === 0 ? 0 : value.split("\n").length,
+      words: value.match(/\S+/g)?.length ?? 0,
+      chars: value.length
+    };
+  });
+  onMount(() => {
+    if (textarea) setTextareaSignal(textarea);
+    updateActiveFormats();
+    const selectionChange = () => {
+      if (document.activeElement === textarea) {
+        updateActiveFormats();
+        recomputeCompletion();
+      }
+    };
+    // Reposition an OPEN popover only. Calling `positionDropdown` blindly
+    // would `showPopover()` a dropdown that is deliberately closed (a
+    // ghost-only completion keeps state without a dropdown).
+    const reposition = () => {
+      if (dropdown?.matches(":popover-open")) positionDropdown();
+    };
+    document.addEventListener("selectionchange", selectionChange);
+    window.addEventListener("resize", reposition);
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", selectionChange);
+      window.removeEventListener("resize", reposition);
+      if (dropdown?.matches(":popover-open")) dropdown.hidePopover();
+      completionAbort?.abort();
+      if (completionTimer) clearTimeout(completionTimer);
+      if (overlayFrame !== undefined) cancelAnimationFrame(overlayFrame);
+      overlayFrame = undefined;
+      renderPendingOverlay = undefined;
+      completionBehavior.reset();
+    });
+  });
+  const onInput = event => {
+    if (completionBehavior.tryExpand(event.currentTarget, mergedCompletions(), {
+      isExcluded: isInCodeZone
+    })) {
+      return;
+    }
+    setLocalValue(event.currentTarget.value);
+    props.onValueChange?.(event.currentTarget.value);
+    updateActiveFormats();
+    recomputeCompletion();
+  };
+  const onKeyDown = event => {
+    if (!textarea || event.isComposing) return;
+    if (event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && completionBehavior.tryRestore(textarea)) {
+      event.preventDefault();
+      return;
+    }
+    const current = state();
+    const dropdownCompletion = current?.context.completion.dropdown === true;
+    if (current && dropdownCompletion && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      moveSelection(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && current && dropdownCompletion && dropdownOpen()) {
+      event.preventDefault();
+      activateSuggestion();
+      return;
+    }
+    if (event.key === "Tab" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && current) {
+      event.preventDefault();
+      activateSuggestion();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (current) {
+        event.preventDefault();
+        closeDropdown();
+        setState(null);
+        return;
+      }
+      if ((mergedCompletions()?.length ?? 0) > 0) {
+        event.preventDefault();
+        textarea.blur();
+        return;
+      }
+    }
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && props.onSubmit) {
+      event.preventDefault();
+      props.onSubmit();
+      return;
+    }
+    if (handleShortcut(event, textarea)) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && handleListContinuation(textarea)) {
+      event.preventDefault();
+    }
+  };
+  const saveControls = () => [props.toolbarTrailing, _$createComponent(Show, {
+    get when() {
+      return props.onSave;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$ssrAttribute("title", _$escape(messages().saveShortcut, true), false) + _$ssrAttribute("aria-label", _$escape(messages().save, true), false), _$ssrAttribute("disabled", props.disabled || props.saveDisabled || props.saving, true), _$ssrAttribute("class", props.saving ? "ti ti-loader-2 k2b-spin" : "ti ti-device-floppy", false));
+    }
+  })];
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    get fill() {
+      return props.fill;
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$ssrAttribute("aria-labelledby", props.label ? _$escape(meta.labelId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", !props.label ? _$escape(props["aria-label"], true) : _$escape(undefined, true), false) + _$ssrAttribute("data-disabled", props.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-variant", props.variant === "paper" ? "paper" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-editor-lines:", _$escape(String(props.lines ?? 6), true)), _$escape(_$createComponent(Show, {
+        get when() {
+          return !props.noToolbar;
+        },
+        get children() {
+          return _$createComponent(Toolbar, {
+            textarea: textareaSignal,
+            activeFormats: activeFormats,
+            get disabled() {
+              return props.disabled;
+            },
+            get trailing() {
+              return saveControls();
+            }
+          });
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return !localValue() && props.placeholder;
+        },
+        get children() {
+          return _$ssr(_tmpl$2, _$escape(props.placeholder));
+        }
+      })), _$ssrElement("textarea", _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        get name() {
+          return props.name;
+        },
+        "class": "k2b-markdown-editor__input",
+        get disabled() {
+          return props.disabled;
+        },
+        get required() {
+          return props.required;
+        },
+        get spellcheck() {
+          return props.spellcheck ?? true;
+        },
+        get maxLength() {
+          return props.maxLength;
+        }
+      }, () => fieldControlAria(meta, props), {
+        "aria-haspopup": "listbox",
+        "aria-autocomplete": "list",
+        get ["aria-controls"]() {
+          return dropdownOpen() ? listboxId : undefined;
+        },
+        get ["aria-activedescendant"]() {
+          return dropdownOpen() && state() ? optionId(state().selectedIndex) : undefined;
+        }
+      }), undefined, false), _$escape(_$createComponent(Show, {
+        get when() {
+          return (props.showStats ?? true) && !props.disabled;
+        },
+        get children() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("data-empty", stats().chars === 0 ? "true" : _$escape(undefined, true), false), _$escape(stats().lines), stats().lines === 1 ? "line" : "lines", _$escape(stats().words), stats().words === 1 ? "word" : "words", _$escape(stats().chars), stats().chars === 1 ? "char" : "chars");
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return state() || loading() || completionError();
+        },
+        get children() {
+          return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(messages().completionSuggestions, true), false), _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(messages().suggestions, true), false), _$escape(_$createComponent(Show, {
+            get when() {
+              return loading();
+            },
+            get children() {
+              return _$ssr(_tmpl$4);
+            }
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return completionError();
+            },
+            children: message => _$ssr(_tmpl$7, _$escape(message()), _$escape(messages().retry))
+          })), _$escape(_$createComponent(For, {
+            get each() {
+              return state()?.suggestions ?? [];
+            },
+            children: (suggestion, index) => // biome-ignore lint/a11y/useKeyWithClickEvents: the owning textarea handles keyboard activation through aria-activedescendant.
+            _$ssr(_tmpl$8, _$ssrAttribute("id", _$escape(optionId(index()), true), false), _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(state()?.selectedIndex, true), false), _$escape(displayLabel(suggestion, state().context.completion)), _$escape(_$createComponent(Show, {
+              get when() {
+                return suggestion.hint;
+              },
+              children: hint => _$ssr(_tmpl$9, _$escape(hint()))
+            })))
+          })));
+        }
+      })));
+    }
+  });
+}
+export { abbreviations } from "../completion";
+//# sourceMappingURL=MarkdownEditor.js.map