@texion/react 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1304 @@
+import {
+  HighlightOverlay
+} from "./chunk-T56S7VW3.js";
+
+// src/hooks/useTexion.ts
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import {
+  createContent,
+  isTextFormat as isTextFormat2,
+  isTexionContent,
+  createRegistry
+} from "@texion/core";
+
+// src/controllers/attachments.ts
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { createController } from "@texion/core";
+
+// src/dom/drop.ts
+function isFileDrag(transfer) {
+  return Array.from(transfer.types).includes("Files");
+}
+function filesFromDrop(transfer) {
+  const items = Array.from(transfer.items ?? []);
+  const hasFolders = items.some(
+    (item) => item.webkitGetAsEntry?.()?.isDirectory
+  );
+  const files = items.length ? items.flatMap((item) => {
+    if (item.webkitGetAsEntry?.()?.isDirectory) {
+      return [];
+    }
+    const file = item.getAsFile();
+    return file ? [file] : [];
+  }) : Array.from(transfer.files);
+  return { files, hasFolders };
+}
+
+// src/dom/paste.ts
+import { detectMarkdown } from "@texion/core";
+function readClipboard(clipboard, threshold) {
+  const files = Array.from(clipboard.files ?? []);
+  if (files.length) {
+    return { files };
+  }
+  if (threshold === void 0) {
+    return { files };
+  }
+  const text = clipboard.getData("text/plain");
+  return threshold !== void 0 && text.length >= threshold && detectMarkdown(text) ? { files, attachmentText: text } : { files };
+}
+
+// src/dom/picker.ts
+var markdownAccept = ".md,.markdown,.mdown,.mkd,text/markdown,text/x-markdown";
+var accepted = {
+  markdown: markdownAccept,
+  text: ".txt,text/plain",
+  pdf: ".pdf,application/pdf",
+  docx: ".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  json: ".json,application/json,text/json",
+  csv: ".csv,text/csv,application/csv",
+  image: ".png,.jpg,.jpeg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp"
+};
+function acceptForFormats(formats = Object.keys(accepted), adapters) {
+  if (adapters)
+    return adapters.filter((adapter) => formats.includes(adapter.format)).flatMap((adapter) => [
+      ...adapter.extensions.map((extension) => `.${extension}`),
+      ...adapter.mimeTypes
+    ]).join(",");
+  return formats.flatMap((format) => accepted[format] ?? []).join(",");
+}
+function takeFiles(input) {
+  const files = Array.from(input.files ?? []);
+  input.value = "";
+  return files;
+}
+
+// src/controllers/presentation.ts
+var defaultPasteThreshold = 1e4;
+
+// src/controllers/attachments.ts
+function useAttachmentController(options) {
+  const [controller] = useState(() => createController(options));
+  const snapshot = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  const documents = useMemo(
+    () => Object.freeze(
+      snapshot.documents.filter((document) => document.id !== "text")
+    ),
+    [snapshot]
+  );
+  const inputRef = useRef(null);
+  const dragDepth = useRef(0);
+  const [isDragging, setDragging] = useState(false);
+  const [inputError, setInputError] = useState();
+  const initialAttachments = useRef([...options.initialAttachments ?? []]);
+  useEffect(() => {
+    initialAttachments.current.forEach(addDocument);
+    return () => controller.clear();
+  }, [controller]);
+  const enabled = options.attachments !== false;
+  function addDocument(input) {
+    return controller.add(
+      typeof input === "string" ? { text: input, source: "paste", name: "Pasted Markdown" } : input
+    );
+  }
+  function getRootProps(props = {}) {
+    return {
+      ...props,
+      "data-dragging": isDragging || void 0,
+      onDragEnter(event) {
+        props.onDragEnter?.(event);
+        if (!event.defaultPrevented && enabled && isFileDrag(event.dataTransfer)) {
+          event.preventDefault();
+          dragDepth.current++;
+          setDragging(true);
+        }
+      },
+      onDragOver(event) {
+        props.onDragOver?.(event);
+        if (!event.defaultPrevented && enabled && isFileDrag(event.dataTransfer)) {
+          event.preventDefault();
+        }
+      },
+      onDragLeave(event) {
+        props.onDragLeave?.(event);
+        if (enabled && isFileDrag(event.dataTransfer)) {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (!dragDepth.current) {
+            setDragging(false);
+          }
+        }
+      },
+      onDrop(event) {
+        props.onDrop?.(event);
+        dragDepth.current = 0;
+        setDragging(false);
+        if (event.defaultPrevented || !enabled || !isFileDrag(event.dataTransfer)) {
+          return;
+        }
+        event.preventDefault();
+        const result = filesFromDrop(event.dataTransfer);
+        setInputError(
+          result.hasFolders ? "Folders are not supported. Select individual supported files." : void 0
+        );
+        result.files.forEach(addDocument);
+      }
+    };
+  }
+  function getInputProps(props = {}) {
+    return {
+      ...props,
+      ref: inputRef,
+      type: "file",
+      multiple: true,
+      accept: props.accept ?? acceptForFormats(
+        options.acceptedFormats ?? options.adapters?.map((adapter) => adapter.format),
+        options.adapters
+      ),
+      disabled: !enabled || props.disabled,
+      onChange(event) {
+        props.onChange?.(event);
+        const files = takeFiles(event.currentTarget);
+        if (enabled && !event.defaultPrevented) {
+          files.forEach(addDocument);
+        }
+      }
+    };
+  }
+  function handlePaste(event) {
+    if (event.defaultPrevented || !enabled) {
+      return;
+    }
+    const clipboard = readClipboard(
+      event.clipboardData,
+      options.pasteAsAttachment ? options.pasteAttachmentThreshold ?? defaultPasteThreshold : void 0
+    );
+    if (clipboard.files.length || clipboard.attachmentText !== void 0) {
+      event.preventDefault();
+      clipboard.files.forEach(addDocument);
+      if (clipboard.attachmentText !== void 0) {
+        addDocument(clipboard.attachmentText);
+      }
+    }
+  }
+  return {
+    controller,
+    snapshot,
+    documents,
+    isDragging,
+    inputError,
+    addDocument,
+    getRootProps,
+    getInputProps,
+    handlePaste,
+    openPicker: () => inputRef.current?.click()
+  };
+}
+
+// src/hooks/useSourceInput.ts
+import { useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import {
+  createHighlightModel,
+  defaultHighlightLimits,
+  sourceWarnings,
+  detectTextFormat,
+  isTextFormat
+} from "@texion/core";
+
+// src/controllers/text.ts
+function shouldSubmit(event, composing) {
+  return event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey && !composing && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229;
+}
+
+// src/hooks/useSourceInput.ts
+var nativeValue = (value) => value.replace(/\r\n?/g, "\n");
+function useSourceInput(options = {}) {
+  const [internalValue, setInternalValue] = useState2(
+    nativeValue(options.defaultValue ?? "")
+  );
+  const value = nativeValue(options.value ?? internalValue);
+  const valueRef = useRef2(value);
+  valueRef.current = value;
+  const composing = useRef2(false);
+  const [isComposing, setComposing] = useState2(false);
+  const [selection, setSelection] = useState2({
+    start: 0,
+    end: 0,
+    direction: "none"
+  });
+  const maxCharacters = options.maxHighlightCharacters ?? defaultHighlightLimits.maxCharacters;
+  const highlight = options.highlight !== false && !isComposing;
+  const language = options.language ?? "markdown";
+  const getFormat = () => language === "auto" ? detectTextFormat(
+    valueRef.current,
+    options.allowedFormats,
+    options.adapters ?? []
+  ) : language;
+  const format = getFormat();
+  const warnings = useMemo2(
+    () => isComposing ? [] : sourceWarnings(value, format, maxCharacters),
+    [value, format, maxCharacters, isComposing]
+  );
+  const highlightModel = useMemo2(
+    () => createHighlightModel(value, {
+      enabled: highlight,
+      maxCharacters,
+      format: isTextFormat(format) ? format : "text"
+    }),
+    [value, highlight, maxCharacters, format]
+  );
+  function setValue(next) {
+    next = nativeValue(next);
+    if (next === valueRef.current) {
+      return;
+    }
+    valueRef.current = next;
+    if (options.value === void 0) {
+      setInternalValue(next);
+    }
+    options.onChange?.(next);
+  }
+  function readSelection(element) {
+    const next = {
+      start: element.selectionStart,
+      end: element.selectionEnd,
+      direction: element.selectionDirection
+    };
+    setSelection(
+      (previous) => previous.start === next.start && previous.end === next.end && previous.direction === next.direction ? previous : next
+    );
+  }
+  function getTextareaProps(props = {}) {
+    return {
+      ...props,
+      value,
+      onChange(event) {
+        props.onChange?.(event);
+        if (!event.defaultPrevented) {
+          setValue(event.currentTarget.value);
+        }
+        readSelection(event.currentTarget);
+      },
+      onSelect(event) {
+        props.onSelect?.(event);
+        readSelection(event.currentTarget);
+      },
+      onCompositionStart(event) {
+        composing.current = true;
+        setComposing(true);
+        props.onCompositionStart?.(event);
+      },
+      onCompositionEnd(event) {
+        composing.current = false;
+        setComposing(false);
+        if (event.currentTarget.value !== valueRef.current) {
+          setValue(event.currentTarget.value);
+        }
+        props.onCompositionEnd?.(event);
+      },
+      onKeyDown(event) {
+        props.onKeyDown?.(event);
+        if (!event.defaultPrevented && options.onSubmit && options.submitOnEnter && shouldSubmit(event, composing.current)) {
+          event.preventDefault();
+          options.onSubmit();
+        }
+      }
+    };
+  }
+  return {
+    value,
+    format,
+    getFormat,
+    warnings,
+    setValue,
+    selection,
+    isComposing,
+    isComposingNow: () => composing.current,
+    getValue: () => valueRef.current,
+    highlightModel,
+    getTextareaProps
+  };
+}
+
+// src/hooks/useTexion.ts
+function useTexion(options = {}) {
+  const [adapters] = useState3(() => createRegistry(options.adapters));
+  if (options.formats && (!options.formats.length || options.formats.some(
+    (format) => !adapters.some((adapter) => adapter.format === format)
+  ))) {
+    throw new RangeError("Choose at least one registered format.");
+  }
+  if (options.defaultContent !== void 0 && !isTexionContent(options.defaultContent)) {
+    throw new TypeError("Invalid initial Texion content.");
+  }
+  const attachments = useAttachmentController(
+    options.formats && !options.acceptedFormats ? { ...options, acceptedFormats: options.formats } : options
+  );
+  const { controller, snapshot } = attachments;
+  const submitting = useRef3(false);
+  const richComposing = useRef3(false);
+  const originalSource = useRef3(
+    options.defaultContent ? options.defaultContent.originalSource : options.defaultValue
+  );
+  const [isSubmitting, setSubmitting] = useState3(false);
+  const [submitError, setSubmitError] = useState3();
+  const preferredFormats = options.formats ?? [
+    "markdown",
+    ...adapters.map((adapter) => adapter.format)
+  ];
+  const allowedSourceFormats = [...new Set(preferredFormats)].filter(
+    (format) => adapters.some(
+      (adapter) => adapter.kind !== "binary" && adapter.format === format
+    )
+  );
+  const allowedTextFormats = allowedSourceFormats.filter(isTextFormat2);
+  const defaultValue = options.defaultContent?.source ?? options.defaultValue;
+  const input = useSourceInput({
+    language: options.format ?? options.defaultContent?.format ?? "auto",
+    allowedFormats: allowedSourceFormats,
+    adapters,
+    ...defaultValue === void 0 ? {} : { defaultValue },
+    highlight: options.highlight ?? false,
+    ...options.maxHighlightCharacters === void 0 ? {} : { maxHighlightCharacters: options.maxHighlightCharacters },
+    onChange: () => controller.remove("text"),
+    submitOnEnter: options.submitOnEnter !== false,
+    onSubmit: () => {
+      void submit();
+    }
+  });
+  useEffect2(() => {
+    const document = controller.getSnapshot().documents.find((candidate) => candidate.id === "text");
+    if (document && document.format !== input.format) {
+      controller.remove("text");
+    }
+  }, [controller, input.format]);
+  const textDocument = snapshot.documents.find(
+    (document) => document.id === "text"
+  );
+  async function submit() {
+    if (input.isComposingNow() || richComposing.current || submitting.current) {
+      return false;
+    }
+    const text = input.getValue();
+    const format = input.getFormat();
+    if (!text.trim() && !attachments.documents.length) {
+      return false;
+    }
+    submitting.current = true;
+    setSubmitting(true);
+    setSubmitError(void 0);
+    try {
+      controller.setText(text.trim() ? text : "", format);
+      const captured = controller.getSnapshot().documents;
+      const settled = await Promise.all(
+        captured.map((document) => controller.whenSettled(document.id))
+      );
+      const current = controller.getSnapshot().documents;
+      const textChanged = input.getValue() !== text || input.getFormat() !== format;
+      const hasUnreadyDocuments = settled.some(
+        (document) => !document || document.status !== "ready"
+      );
+      const documentsChanged = settled.length !== current.length || settled.some((document, index) => document !== current[index]);
+      if (textChanged || hasUnreadyDocuments || documentsChanged) {
+        return false;
+      }
+      const primary = current.find((document) => document.id === "text");
+      const documents = Object.freeze(
+        current.filter((document) => document.id !== "text")
+      );
+      await options.onSubmit?.({
+        text,
+        documents,
+        attachments: documents,
+        content: createContent(
+          text,
+          originalSource.current === void 0 ? { format } : { format, originalSource: originalSource.current }
+        ),
+        ...primary ? { textDocument: primary } : {}
+      });
+      return true;
+    } catch (error) {
+      setSubmitError(
+        error instanceof Error ? error.message : "Submission failed."
+      );
+      return false;
+    } finally {
+      submitting.current = false;
+      setSubmitting(false);
+    }
+  }
+  function getTextareaProps(props = {}) {
+    return input.getTextareaProps({
+      ...props,
+      onPaste(event) {
+        props.onPaste?.(event);
+        if (!input.isComposingNow()) {
+          attachments.handlePaste(event);
+        }
+      }
+    });
+  }
+  function getRichEditorProps(props = {}) {
+    if (input.format !== "markdown") {
+      throw new Error(
+        "Plain text, JSON and CSV use source editing; only Markdown supports rich conversion."
+      );
+    }
+    return {
+      formats: options.format && options.format !== "auto" ? [options.format].filter(isTextFormat2) : allowedTextFormats ?? ["markdown", "json", "csv"],
+      ...props,
+      value: input.value,
+      onChange(source) {
+        props.onChange?.(source);
+        input.setValue(source);
+      },
+      onImport(source) {
+        originalSource.current ??= source;
+        props.onImport?.(source);
+      },
+      onCompositionChange(composing) {
+        richComposing.current = composing;
+        props.onCompositionChange?.(composing);
+      },
+      onSubmit() {
+        props.onSubmit?.();
+        void submit();
+      },
+      submitOnEnter: options.submitOnEnter ?? false,
+      ...options.attachments === false ? {} : {
+        onFiles(files) {
+          files.forEach(attachments.addDocument);
+          props.onFiles?.(files);
+        }
+      }
+    };
+  }
+  return {
+    content: createContent(
+      input.value,
+      originalSource.current === void 0 ? { format: input.format } : { format: input.format, originalSource: originalSource.current }
+    ),
+    format: input.format,
+    warnings: input.warnings,
+    getRichEditorProps,
+    text: input.value,
+    textDocument,
+    selection: input.selection,
+    isComposing: input.isComposing,
+    highlightModel: input.highlightModel,
+    documents: attachments.documents,
+    isDragging: attachments.isDragging,
+    isSubmitting,
+    inputError: attachments.inputError,
+    submitError,
+    setText: input.setValue,
+    addDocument: attachments.addDocument,
+    removeDocument: controller.remove,
+    cancelDocument: controller.cancel,
+    clear() {
+      input.setValue("");
+      originalSource.current = void 0;
+      richComposing.current = false;
+      controller.clear();
+    },
+    submit,
+    openPicker: attachments.openPicker,
+    getRootProps: attachments.getRootProps,
+    getTextareaProps,
+    getInputProps: attachments.getInputProps
+  };
+}
+
+// src/hooks/useDocument.ts
+import { useEffect as useEffect3, useState as useState4, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { createController as createController2 } from "@texion/core";
+function useDocument(input, options = {}) {
+  const [controller] = useState4(() => createController2(options));
+  const [current, setCurrent] = useState4();
+  const snapshot = useSyncExternalStore2(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  useEffect3(() => {
+    if (input === void 0) {
+      setCurrent(void 0);
+      return;
+    }
+    const id = controller.add(input);
+    setCurrent({ input, id });
+    return () => {
+      controller.remove(id);
+    };
+  }, [controller, input]);
+  return current?.input === input ? snapshot.documents.find((document) => document.id === current?.id) : void 0;
+}
+
+// src/components/TexionInput.tsx
+import { isTextFormat as isTextFormat3 } from "@texion/core";
+import { Suspense as Suspense2, lazy as lazy2, useEffect as useEffect5, useId, useState as useState6 } from "react";
+
+// src/components/AttachmentList.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AttachmentList({
+  documents,
+  onRemove,
+  onCancel,
+  onPreview
+}) {
+  if (!documents.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "texion-attachments", "aria-label": "Attachments", children: documents.map((document) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx("span", { children: document.name }),
+    " ",
+    /* @__PURE__ */ jsx("span", { role: "status", children: document.status }),
+    document.status === "processing" && document.progress && /* @__PURE__ */ jsxs("span", { className: "texion-document-progress", role: "status", children: [
+      document.progress.phase === "pending-consent" ? "Waiting for OCR approval" : document.progress.phase === "initializing-ocr" ? "Loading OCR engine" : document.progress.phase === "ocr" ? `Recognizing page ${document.progress.pageNumber ?? document.progress.done + 1} \xB7 ${document.progress.done}/${document.progress.total} complete` : `Extracting page ${document.progress.done} of ${document.progress.total}`,
+      /* @__PURE__ */ jsx(
+        "progress",
+        {
+          "aria-label": `Processing ${document.name}`,
+          value: document.progress.done,
+          max: Math.max(1, document.progress.total)
+        }
+      )
+    ] }),
+    document.error && /* @__PURE__ */ jsx("span", { role: "alert", children: document.error.message }),
+    document.warnings.map((warning, i) => /* @__PURE__ */ jsx("span", { role: "status", children: warning.message }, i)),
+    onPreview && document.status === "ready" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPreview(document.id),
+        "aria-label": `Preview ${document.name}`,
+        children: "Preview"
+      }
+    ),
+    onCancel && (document.status === "pending" || document.status === "processing") && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onCancel(document.id),
+        "aria-label": `Cancel ${document.name}`,
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onRemove(document.id),
+        "aria-label": `Remove ${document.name}`,
+        children: "Remove"
+      }
+    )
+  ] }, document.id)) });
+}
+
+// src/components/DocumentViewer.tsx
+import { Suspense, useMemo as useMemo3 } from "react";
+
+// src/renderers/registry.ts
+import { lazy } from "react";
+var DefaultMarkdownRenderer = lazy(() => import("./markdown-QTRYMUXO.js"));
+var JsonRenderer = lazy(() => import("./json-BEWG6XTV.js"));
+var CsvRenderer = lazy(() => import("./csv-COGONMFA.js"));
+var ImageRenderer = lazy(() => import("./image-TKOV52M6.js"));
+function defaultRenderer(format) {
+  switch (format) {
+    case "json":
+      return JsonRenderer;
+    case "csv":
+      return CsvRenderer;
+    case "image":
+      return ImageRenderer;
+    default:
+      return DefaultMarkdownRenderer;
+  }
+}
+
+// src/components/DocumentViewer.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DocumentViewer({
+  document: supplied,
+  input,
+  content,
+  format,
+  options,
+  className,
+  renderer,
+  renderers
+}) {
+  const documentInput = useMemo3(() => {
+    const value = input ?? content;
+    if (typeof value === "string" && format) {
+      return { text: value, format };
+    }
+    if (value && typeof value === "object" && "text" in value && typeof value.text === "string" && format) {
+      return { ...value, format };
+    }
+    return value;
+  }, [input, content, format]);
+  const processed = useDocument(supplied ? void 0 : documentInput, options);
+  const document = supplied ?? processed;
+  const Renderer = renderer ?? (document ? renderers?.[document.format] : void 0) ?? defaultRenderer(document?.format);
+  const preview = useMemo3(
+    () => document?.status === "ready" ? document.getPreview?.() : void 0,
+    [document]
+  );
+  if (document?.status === "error") {
+    return /* @__PURE__ */ jsx2("p", { role: "alert", children: document.error?.message });
+  }
+  if (!document || document.status !== "ready") {
+    return /* @__PURE__ */ jsx2("p", { role: "status", children: "Preparing document\u2026" });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      className: className ?? "texion-viewer",
+      "aria-label": `Preview of ${document.name}`,
+      children: [
+        document.warnings.map((warning, i) => /* @__PURE__ */ jsx2("p", { role: "status", children: warning.message }, i)),
+        preview?.warnings.filter(
+          (warning) => !document.warnings.some(
+            (existing) => existing.code === warning.code && existing.message === warning.message
+          )
+        ).map((warning, i) => /* @__PURE__ */ jsx2("p", { role: "status", children: warning.message }, i)),
+        preview && /* @__PURE__ */ jsx2(Suspense, { fallback: /* @__PURE__ */ jsx2("p", { role: "status", children: "Loading preview\u2026" }), children: /* @__PURE__ */ jsx2(Renderer, { preview, document }) })
+      ]
+    }
+  );
+}
+
+// src/components/HighlightedTextarea.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect4,
+  useLayoutEffect,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var useClientLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
+var mirrorProperties = [
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "fontStretch",
+  "fontKerning",
+  "fontFeatureSettings",
+  "fontVariationSettings",
+  "fontVariantLigatures",
+  "lineHeight",
+  "letterSpacing",
+  "wordSpacing",
+  "textAlign",
+  "textIndent",
+  "textTransform",
+  "textRendering",
+  "tabSize",
+  "direction",
+  "unicodeBidi",
+  "writingMode",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "color",
+  "wordBreak",
+  "overflowWrap",
+  "lineBreak"
+];
+var HighlightedTextareaSurface = forwardRef(function HighlightedTextareaSurface2({ textareaProps, model, wrapperClassName }, forwardedRef) {
+  const textareaRef = useRef4(null);
+  const viewportRef = useRef4(null);
+  const [layout, setLayout] = useState5();
+  const [forcedColors, setForcedColors] = useState5(false);
+  const value = String(textareaProps.value ?? "");
+  const requested = model.enabled && !!value && model.text === value && !forcedColors;
+  const syncScroll = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea && viewportRef.current) {
+      viewportRef.current.scrollTop = textarea.scrollTop;
+      viewportRef.current.scrollLeft = textarea.scrollLeft;
+    }
+  }, []);
+  const synchronize = useCallback(() => {
+    const textarea = textareaRef.current;
+    const view = textarea?.ownerDocument.defaultView;
+    if (!textarea || !view) {
+      return;
+    }
+    const computed = view.getComputedStyle(textarea);
+    const content = {
+      ...Object.fromEntries(
+        mirrorProperties.map((property) => [property, computed[property]])
+      ),
+      boxSizing: "border-box",
+      margin: 0,
+      border: 0,
+      width: textarea.clientWidth,
+      minHeight: textarea.clientHeight,
+      whiteSpace: textarea.wrap === "off" ? "pre" : "pre-wrap",
+      WebkitTextFillColor: "currentColor"
+    };
+    const next = {
+      left: textarea.offsetLeft + textarea.clientLeft,
+      top: textarea.offsetTop + textarea.clientTop,
+      width: textarea.clientWidth,
+      height: textarea.clientHeight,
+      content
+    };
+    setLayout(
+      (previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next
+    );
+    syncScroll();
+  }, [syncScroll]);
+  useClientLayoutEffect(() => {
+    if (requested) {
+      synchronize();
+    }
+  });
+  useClientLayoutEffect(() => {
+    if (!requested) {
+      return;
+    }
+    const textarea = textareaRef.current;
+    const view = textarea?.ownerDocument.defaultView;
+    if (!textarea || !view) {
+      return;
+    }
+    let mounted = true;
+    const refresh = () => {
+      if (mounted) {
+        synchronize();
+      }
+    };
+    const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(refresh);
+    resize?.observe(textarea);
+    if (textarea.parentElement) {
+      resize?.observe(textarea.parentElement);
+    }
+    const mutation = new MutationObserver(refresh);
+    for (let element = textarea; element; element = element.parentElement) {
+      mutation.observe(element, {
+        attributes: true,
+        attributeFilter: ["style", "class", "dir", "wrap"]
+      });
+    }
+    view.addEventListener("resize", refresh);
+    const fonts = textarea.ownerDocument.fonts;
+    void fonts?.ready.then(refresh);
+    fonts?.addEventListener("loadingdone", refresh);
+    return () => {
+      mounted = false;
+      resize?.disconnect();
+      mutation.disconnect();
+      view.removeEventListener("resize", refresh);
+      fonts?.removeEventListener("loadingdone", refresh);
+    };
+  }, [requested, synchronize]);
+  useEffect4(() => {
+    const media = textareaRef.current?.ownerDocument.defaultView?.matchMedia?.(
+      "(forced-colors: active)"
+    );
+    if (!media) {
+      return;
+    }
+    const update = () => setForcedColors(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  const active = requested && !!layout;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: ["texion-highlighted-textarea", wrapperClassName].filter(Boolean).join(" "),
+      "data-highlighted": active || void 0,
+      "data-highlight-reason": model.reason,
+      style: { position: "relative", display: "grid", minWidth: 0 },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: (node) => {
+              textareaRef.current = node;
+              if (typeof forwardedRef === "function") {
+                forwardedRef(node);
+              } else if (forwardedRef) {
+                forwardedRef.current = node;
+              }
+            },
+            style: {
+              display: "block",
+              boxSizing: "border-box",
+              minWidth: 0,
+              width: "100%",
+              ...textareaProps.style,
+              ...active ? { WebkitTextFillColor: "transparent", caretColor: "currentColor" } : {}
+            },
+            onScroll: (event) => {
+              syncScroll();
+              textareaProps.onScroll?.(event);
+            }
+          }
+        ),
+        active && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: viewportRef,
+            "data-texion-overlay-viewport": "",
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              pointerEvents: "none",
+              userSelect: "none",
+              overflow: "hidden",
+              direction: layout.content.direction,
+              left: layout.left,
+              top: layout.top,
+              width: layout.width,
+              height: layout.height
+            },
+            children: /* @__PURE__ */ jsx3(HighlightOverlay, { model, style: layout.content })
+          }
+        )
+      ]
+    }
+  );
+});
+var HighlightedTextarea = forwardRef(function HighlightedTextarea2({
+  value,
+  defaultValue,
+  onChange,
+  language = "markdown",
+  highlight = true,
+  maxHighlightCharacters,
+  wrapperClassName,
+  ...props
+}, ref) {
+  const input = useSourceInput({
+    language,
+    highlight,
+    ...value === void 0 ? {} : { value },
+    ...defaultValue === void 0 ? {} : { defaultValue },
+    ...onChange === void 0 ? {} : { onChange },
+    ...maxHighlightCharacters === void 0 ? {} : { maxHighlightCharacters }
+  });
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      HighlightedTextareaSurface,
+      {
+        ref,
+        textareaProps: input.getTextareaProps(props),
+        model: input.highlightModel,
+        wrapperClassName
+      }
+    ),
+    input.warnings.map((warning, index) => /* @__PURE__ */ jsx3("p", { role: "status", children: warning.message }, index))
+  ] });
+});
+
+// src/components/TexionInput.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var RichEditor = lazy2(() => import("./RichMarkdownEditor-OAHLD4XC.js"));
+function TexionInput({
+  placeholder = "Drop a file, paste, or write\u2026",
+  renderers,
+  label = "Message",
+  preview = false,
+  previewImages = false,
+  previewPosition = "above",
+  className = "texion-input",
+  mode = "source",
+  live = true,
+  modeSwitch = mode === "rich",
+  submitLabel = "Submit",
+  maxRichCharacters = 5e4,
+  ...options
+}) {
+  const [position, setPosition] = useState6(previewPosition);
+  useEffect5(() => setPosition(previewPosition), [previewPosition]);
+  const [editorMode, setEditorMode] = useState6(mode);
+  useEffect5(() => setEditorMode(mode), [mode]);
+  const texion = useTexion({
+    ...options,
+    format: options.format ?? options.defaultContent?.format ?? (editorMode === "rich" ? "markdown" : "auto"),
+    highlight: editorMode === "source" && !!options.highlight
+  });
+  const canUseRich = texion.format === "markdown";
+  const id = useId();
+  const [previewId, setPreviewId] = useState6();
+  const [showTextPreview, setShowTextPreview] = useState6(false);
+  const [showImagePreviews, setShowImagePreviews] = useState6(previewImages);
+  useEffect5(() => setShowImagePreviews(previewImages), [previewImages]);
+  const images = texion.documents.filter(
+    (document) => document.format === "image" && document.status === "ready"
+  );
+  const selected = texion.documents.find(
+    (document) => document.id === previewId
+  );
+  const previews = /* @__PURE__ */ jsxs4("div", { className: "texion-input-previews", children: [
+    texion.warnings.map((warning, index) => /* @__PURE__ */ jsx4("p", { role: "status", children: warning.message }, index)),
+    texion.textDocument?.error && /* @__PURE__ */ jsx4("p", { role: "alert", children: texion.textDocument.error.message }),
+    preview && !!texion.text.trim() && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": showTextPreview,
+        onClick: () => setShowTextPreview((value) => !value),
+        children: showTextPreview ? "Hide message preview" : "Preview message"
+      }
+    ),
+    preview && showTextPreview && !!texion.text.trim() && /* @__PURE__ */ jsx4(
+      DocumentViewer,
+      {
+        format: texion.format,
+        content: texion.text,
+        options: options.formats && !options.acceptedFormats ? { ...options, acceptedFormats: options.formats } : options,
+        ...renderers ? { renderers } : {}
+      }
+    ),
+    texion.isDragging && /* @__PURE__ */ jsx4("p", { role: "status", children: "Drop supported files here" }),
+    texion.inputError && /* @__PURE__ */ jsx4("p", { role: "alert", children: texion.inputError }),
+    images.length > 0 && /* @__PURE__ */ jsxs4("label", { children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: "checkbox",
+          checked: showImagePreviews,
+          onChange: (event) => {
+            setShowImagePreviews(event.currentTarget.checked);
+            setPreviewId(void 0);
+          }
+        }
+      ),
+      "Show image previews"
+    ] }),
+    /* @__PURE__ */ jsx4(
+      AttachmentList,
+      {
+        documents: texion.documents,
+        onRemove: texion.removeDocument,
+        onCancel: texion.cancelDocument,
+        onPreview: preview ? setPreviewId : void 0
+      }
+    ),
+    showImagePreviews && images.map((document) => /* @__PURE__ */ jsx4(
+      DocumentViewer,
+      {
+        document,
+        ...renderers ? { renderers } : {}
+      },
+      document.id
+    )),
+    preview && selected && !(showImagePreviews && selected.format === "image") && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => setPreviewId(void 0), children: "Close preview" }),
+      /* @__PURE__ */ jsx4(
+        DocumentViewer,
+        {
+          document: selected,
+          ...renderers ? { renderers } : {}
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs4("div", { ...texion.getRootProps({ className }), children: [
+    /* @__PURE__ */ jsxs4("label", { children: [
+      "Preview position",
+      /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          value: position,
+          onChange: (event) => setPosition(event.currentTarget.value),
+          children: [
+            /* @__PURE__ */ jsx4("option", { value: "above", children: "Above input" }),
+            /* @__PURE__ */ jsx4("option", { value: "below", children: "Below input" })
+          ]
+        }
+      )
+    ] }),
+    position === "above" && previews,
+    /* @__PURE__ */ jsx4("label", { htmlFor: id, children: label }),
+    modeSwitch && canUseRich && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setEditorMode((value) => value === "rich" ? "source" : "rich"),
+        children: editorMode === "rich" ? "Edit Markdown source" : "Edit rich content"
+      }
+    ),
+    editorMode === "rich" && canUseRich ? /* @__PURE__ */ jsx4(Suspense2, { fallback: /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading rich editor\u2026" }), children: /* @__PURE__ */ jsx4(
+      RichEditor,
+      {
+        ...texion.getRichEditorProps({
+          formats: options.format && options.format !== "auto" ? [options.format].filter(isTextFormat3) : options.formats?.filter(isTextFormat3) ?? [
+            "markdown",
+            "json",
+            "csv"
+          ],
+          id,
+          label,
+          placeholder,
+          live,
+          maxCharacters: maxRichCharacters,
+          onRequestSource: () => setEditorMode("source")
+        })
+      }
+    ) }) : /* @__PURE__ */ jsx4(
+      HighlightedTextareaSurface,
+      {
+        textareaProps: texion.getTextareaProps({ id, placeholder }),
+        model: texion.highlightModel
+      }
+    ),
+    position === "below" && previews,
+    options.attachments !== false && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          ...texion.getInputProps({
+            hidden: true,
+            "aria-label": "Choose files"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: texion.openPicker, children: "Attach files" })
+    ] }),
+    texion.submitError && /* @__PURE__ */ jsx4("p", { role: "alert", children: texion.submitError }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          void texion.submit();
+        },
+        disabled: texion.isSubmitting,
+        children: texion.isSubmitting ? "Submitting\u2026" : submitLabel
+      }
+    )
+  ] });
+}
+
+// src/hooks/useMarkdownInput.ts
+function useMarkdownInput(options = {}) {
+  return useSourceInput({ ...options, language: "markdown" });
+}
+
+// src/components/TexionViewer.tsx
+import { isTexionContent as isTexionContent2 } from "@texion/core";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function TexionViewer({ content, ...props }) {
+  if (!isTexionContent2(content)) {
+    return /* @__PURE__ */ jsx5("p", { role: "alert", children: "Unsupported Texion content." });
+  }
+  return /* @__PURE__ */ jsx5(
+    DocumentViewer,
+    {
+      ...props,
+      content: content.source,
+      format: content.format
+    }
+  );
+}
+
+// src/hooks/useTexionAttachments.ts
+function useTexionAttachments(options = {}) {
+  const attachments = useAttachmentController(options);
+  function getTextareaProps(props = {}) {
+    return {
+      ...props,
+      onPaste(event) {
+        props.onPaste?.(event);
+        attachments.handlePaste(event);
+      }
+    };
+  }
+  return {
+    documents: attachments.documents,
+    isDragging: attachments.isDragging,
+    inputError: attachments.inputError,
+    addDocument: attachments.addDocument,
+    removeDocument: attachments.controller.remove,
+    cancelDocument: attachments.controller.cancel,
+    clear: attachments.controller.clear,
+    whenSettled: attachments.controller.whenSettled,
+    waitForIdle: attachments.controller.waitForIdle,
+    openPicker: attachments.openPicker,
+    getRootProps: attachments.getRootProps,
+    getInputProps: attachments.getInputProps,
+    getTextareaProps,
+    handlePaste: attachments.handlePaste
+  };
+}
+
+// src/components/TexionMessageViewer.tsx
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { isTexionMessage } from "@texion/core";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function SavedAttachment({
+  attachment,
+  resolve,
+  options,
+  renderers
+}) {
+  const [open, setOpen] = useState7(false);
+  const [result, setResult] = useState7();
+  useEffect6(() => {
+    if (!open || !resolve) return;
+    const operation = new AbortController();
+    setResult(void 0);
+    void Promise.resolve().then(() => resolve(attachment, operation.signal)).then((input) => {
+      if (operation.signal.aborted) return;
+      const value = input && typeof input === "object" && "arrayBuffer" in input ? new File([input], attachment.name, {
+        type: attachment.mimeType || input.type
+      }) : input;
+      setResult({
+        attachment,
+        ...value === void 0 ? {} : { input: value }
+      });
+    }).catch((error) => {
+      if (!operation.signal.aborted)
+        setResult({
+          attachment,
+          error: error instanceof Error ? error.message : "The attachment could not be restored."
+        });
+    });
+    return () => operation.abort();
+  }, [open, resolve, attachment]);
+  const current = result?.attachment === attachment ? result : void 0;
+  return /* @__PURE__ */ jsxs5("li", { className: "texion-saved-attachment", children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx6("strong", { children: attachment.name }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        attachment.format,
+        " \xB7 ",
+        attachment.size.toLocaleString(),
+        " bytes"
+      ] })
+    ] }),
+    resolve ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((value) => !value),
+        children: open ? `Close ${attachment.name}` : `Preview ${attachment.name}`
+      }
+    ) : /* @__PURE__ */ jsx6("p", { children: "Original attachment requires a host resolver." }),
+    open && resolve && /* @__PURE__ */ jsx6("div", { className: "texion-saved-attachment-preview", children: !current ? /* @__PURE__ */ jsx6("p", { role: "status", children: "Restoring attachment\u2026" }) : current.error ? /* @__PURE__ */ jsx6("p", { role: "alert", children: current.error }) : current.input === void 0 ? /* @__PURE__ */ jsx6("p", { role: "status", children: "The original attachment is not available." }) : /* @__PURE__ */ jsx6(
+      DocumentViewer,
+      {
+        input: current.input,
+        format: attachment.format,
+        ...options ? { options } : {},
+        ...renderers ? { renderers } : {}
+      }
+    ) })
+  ] });
+}
+function TexionMessageViewer({
+  message,
+  resolveAttachment,
+  options,
+  renderers,
+  className = "texion-message"
+}) {
+  if (!isTexionMessage(message))
+    return /* @__PURE__ */ jsx6("p", { role: "alert", children: "Invalid Texion message." });
+  return /* @__PURE__ */ jsxs5("section", { className, "aria-label": "Saved message", children: [
+    message.content.source.trim() && /* @__PURE__ */ jsx6(
+      TexionViewer,
+      {
+        content: message.content,
+        ...options ? { options } : {},
+        ...renderers ? { renderers } : {}
+      }
+    ),
+    message.attachments.length > 0 && /* @__PURE__ */ jsx6("ul", { "aria-label": "Saved attachments", children: message.attachments.map((attachment) => /* @__PURE__ */ jsx6(
+      SavedAttachment,
+      {
+        attachment,
+        resolve: resolveAttachment,
+        options,
+        renderers
+      },
+      attachment.id
+    )) })
+  ] });
+}
+
+// src/hooks/useOcrApproval.ts
+import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef5, useState as useState8 } from "react";
+function useOcrApproval() {
+  const [pending, setPending] = useState8([]);
+  const requests = useRef5(
+    /* @__PURE__ */ new Map()
+  );
+  const next = useRef5(0);
+  const requestApproval = useCallback2(
+    (request) => {
+      if (request.signal.aborted) return Promise.resolve(false);
+      const id = `ocr-approval-${++next.current}`;
+      return new Promise((resolve) => {
+        const abort = () => finish(false);
+        function finish(approved) {
+          if (!requests.current.delete(id)) return;
+          request.signal.removeEventListener("abort", abort);
+          setPending((values) => values.filter((value) => value.id !== id));
+          resolve(approved);
+        }
+        requests.current.set(id, { finish });
+        request.signal.addEventListener("abort", abort, { once: true });
+        setPending((values) => [...values, { id, request }]);
+      });
+    },
+    []
+  );
+  const approve = useCallback2(
+    (id) => requests.current.get(id)?.finish(true),
+    []
+  );
+  const deny = useCallback2(
+    (id) => requests.current.get(id)?.finish(false),
+    []
+  );
+  useEffect7(
+    () => () => {
+      for (const request of [...requests.current.values()])
+        request.finish(false);
+    },
+    []
+  );
+  return { pending, requestApproval, approve, deny };
+}
+export {
+  AttachmentList,
+  DocumentViewer,
+  HighlightedTextarea,
+  TexionInput,
+  TexionMessageViewer,
+  TexionViewer,
+  useDocument,
+  useMarkdownInput,
+  useOcrApproval,
+  useSourceInput,
+  useTexion,
+  useTexionAttachments
+};
+//# sourceMappingURL=index.js.map