@panphora/bevel 0.1.0

package/dist/react/components/code-editor.js

@@ -0,0 +1,695 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  EditorView,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  drawSelection,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  highlightActiveLine,
+  keymap,
+  ViewPlugin,
+  Decoration
+} from "@codemirror/view";
+import { EditorState, Prec, Compartment, RangeSetBuilder, countColumn } from "@codemirror/state";
+import {
+  codeFolding,
+  foldGutter,
+  foldKeymap,
+  indentOnInput,
+  indentUnit,
+  bracketMatching,
+  syntaxHighlighting,
+  HighlightStyle,
+  toggleFold
+} from "@codemirror/language";
+import { history, historyKeymap, defaultKeymap, indentWithTab, indentMore, indentLess, undo, redo } from "@codemirror/commands";
+import {
+  searchKeymap,
+  highlightSelectionMatches,
+  search,
+  openSearchPanel,
+  closeSearchPanel,
+  searchPanelOpen,
+  findNext,
+  findPrevious,
+  replaceNext,
+  replaceAll,
+  getSearchQuery,
+  setSearchQuery,
+  SearchQuery
+} from "@codemirror/search";
+import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap, startCompletion } from "@codemirror/autocomplete";
+import { html } from "@codemirror/lang-html";
+import { tags as t } from "@lezer/highlight";
+import { color } from "@uiw/codemirror-extensions-color";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { useBevel } from "../provider.js";
+import { Button } from "./button.js";
+const WRAP_STORAGE_KEY = "bevel.code-editor.wrap";
+const FONT = "var(--bevel-font-mono)";
+const wrapCompartment = new Compartment();
+const darkCompartment = new Compartment();
+function coarsePointer() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
+}
+function storedWrap(coarse) {
+  try {
+    const stored = localStorage.getItem(WRAP_STORAGE_KEY);
+    if (stored !== null) return stored === "on";
+  } catch {
+    return coarse;
+  }
+  return coarse;
+}
+function rememberWrap(on) {
+  try {
+    localStorage.setItem(WRAP_STORAGE_KEY, on ? "on" : "off");
+  } catch {
+    return false;
+  }
+  return true;
+}
+const HANGING_COLUMNS = 2;
+const hangingLines = /* @__PURE__ */ new Map();
+function hangingLine(columns) {
+  let decoration = hangingLines.get(columns);
+  if (!decoration) {
+    const width = columns + HANGING_COLUMNS;
+    decoration = Decoration.line({ attributes: { style: `padding-left: calc(6px + ${width}ch); text-indent: -${width}ch` } });
+    hangingLines.set(columns, decoration);
+  }
+  return decoration;
+}
+function hangingDecorations(view) {
+  const builder = new RangeSetBuilder();
+  const { doc, tabSize } = view.state;
+  let last = -1;
+  for (const { from, to } of view.visibleRanges) {
+    for (let position = from; position <= to; ) {
+      const line = doc.lineAt(position);
+      if (line.from > last) {
+        builder.add(line.from, line.from, hangingLine(countColumn(/^[ \t]*/.exec(line.text)[0], tabSize)));
+        last = line.from;
+      }
+      position = line.to + 1;
+    }
+  }
+  return builder.finish();
+}
+const hangingIndent = ViewPlugin.fromClass(class {
+  decorations = Decoration.none;
+  constructor(view) {
+    this.decorations = hangingDecorations(view);
+  }
+  update(update) {
+    if (update.docChanged || update.viewportChanged) this.decorations = hangingDecorations(update.view);
+  }
+}, { decorations: (plugin) => plugin.decorations });
+const wrapExtension = (on) => on ? [EditorView.lineWrapping, hangingIndent] : [];
+const bevelHighlight = HighlightStyle.define([
+  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: "var(--bevel-syn-comment)", fontStyle: "italic" },
+  { tag: [t.tagName, t.standard(t.tagName)], color: "var(--bevel-syn-tag)", fontWeight: "500" },
+  { tag: [t.angleBracket, t.punctuation, t.separator, t.derefOperator], color: "var(--bevel-syn-punct)" },
+  { tag: [t.attributeName, t.propertyName, t.definition(t.propertyName)], color: "var(--bevel-syn-plum)" },
+  { tag: [t.attributeValue, t.string, t.special(t.string), t.docString], color: "var(--bevel-syn-string)" },
+  { tag: [t.keyword, t.controlKeyword, t.moduleKeyword, t.operatorKeyword], color: "var(--bevel-syn-tag)", fontWeight: "500" },
+  { tag: [t.definitionKeyword, t.modifier, t.self], color: "var(--bevel-syn-tag)" },
+  { tag: [t.number, t.integer, t.float, t.bool, t.atom, t.unit, t.literal, t.color], color: "var(--bevel-syn-rust)" },
+  { tag: [t.variableName, t.definition(t.variableName)], color: "var(--bevel-ink)" },
+  { tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName], color: "var(--bevel-syn-plum)", fontWeight: "500" },
+  { tag: [t.className, t.typeName, t.namespace], color: "var(--bevel-syn-rust)" },
+  { tag: [t.operator, t.compareOperator, t.arithmeticOperator, t.logicOperator], color: "var(--bevel-syn-punct)" },
+  { tag: [t.regexp, t.escape], color: "var(--bevel-syn-rust)" },
+  { tag: [t.meta, t.processingInstruction, t.documentMeta], color: "var(--bevel-faint)" },
+  { tag: t.link, color: "var(--bevel-syn-string)", textDecoration: "underline" },
+  { tag: t.heading, color: "var(--bevel-syn-tag)", fontWeight: "600" },
+  { tag: t.strong, fontWeight: "600" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: [t.invalid, t.deleted], color: "var(--bevel-syn-invalid)", textDecoration: "underline wavy var(--bevel-syn-invalid)" },
+  { tag: t.inserted, color: "var(--bevel-teal)" }
+]);
+const themes = /* @__PURE__ */ new Map();
+function bevelEditorTheme(coarse) {
+  let theme = themes.get(coarse);
+  if (theme) return theme;
+  theme = EditorView.theme({
+    "&": { color: "var(--bevel-ink)", backgroundColor: "var(--bevel-surface)", fontSize: coarse ? "16px" : "12.5px", fontFamily: FONT, height: "100%" },
+    "&.cm-focused": { outline: "none" },
+    ".cm-scroller": { fontFamily: FONT, lineHeight: coarse ? "1.65" : "20px", overflow: "auto", WebkitOverflowScrolling: "touch", overscrollBehavior: "contain" },
+    ".cm-content": { padding: "10px 0 55vh 0", caretColor: "var(--bevel-brass)", WebkitTextSizeAdjust: "100%" },
+    ".cm-cursor, .cm-dropCursor": { borderLeft: "2px solid var(--bevel-brass)", marginLeft: "-1px" },
+    "&.cm-focused .cm-cursor": { borderLeftColor: "var(--bevel-brass)" },
+    ".cm-selectionBackground, ::selection": { background: "var(--bevel-brass-soft)" },
+    "&.cm-focused .cm-selectionBackground, &.cm-focused ::selection": { background: "color-mix(in srgb, var(--bevel-brass) 26%, transparent)" },
+    ".cm-selectionMatch": {
+      background: "color-mix(in srgb, var(--bevel-teal) 20%, transparent)",
+      borderBottom: "1px solid color-mix(in srgb, var(--bevel-teal) 55%, transparent)"
+    },
+    ".cm-activeLine": { background: "var(--bevel-sunk)" },
+    ".cm-gutters": {
+      background: "var(--bevel-sunk)",
+      color: "var(--bevel-faint)",
+      borderRight: "1px solid var(--bevel-line)",
+      fontFamily: FONT,
+      fontSize: "12px",
+      userSelect: "none"
+    },
+    ".cm-activeLineGutter": { background: "color-mix(in srgb, var(--bevel-brass-soft) 60%, var(--bevel-sunk))", color: "var(--bevel-brass)", fontWeight: "500" },
+    // A phone has no fold gutter, so the line numbers give back the width the triangles took.
+    ".cm-lineNumbers .cm-gutterElement": coarse ? { padding: "0 6px 0 4px" } : { minWidth: "44px", padding: "0 10px 0 0", boxSizing: "border-box", font: `12px/20px ${FONT}`, color: "var(--bevel-faint)" },
+    ".cm-foldGutter .cm-gutterElement": { padding: "0 4px", color: "var(--bevel-line-2)" },
+    ".cm-foldGutter .cm-activeLineGutter": { background: "color-mix(in srgb, var(--bevel-brass-soft) 60%, var(--bevel-sunk))", color: "var(--bevel-brass)" },
+    ".cm-foldGutter .cm-gutterElement:hover": { color: "var(--bevel-brass)" },
+    ".cm-foldPlaceholder": {
+      background: "var(--bevel-face)",
+      border: "1px solid var(--bevel-line-2)",
+      color: "var(--bevel-muted)",
+      borderRadius: "0",
+      padding: "0 6px",
+      margin: "0 2px",
+      fontSize: "11px"
+    },
+    ".cm-matchingBracket, &.cm-focused .cm-matchingBracket": {
+      background: "color-mix(in srgb, var(--bevel-brass) 22%, transparent)",
+      outline: "1px solid color-mix(in srgb, var(--bevel-brass) 60%, transparent)",
+      color: "inherit"
+    },
+    ".cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket": { background: "var(--bevel-ox-soft)", outline: "1px solid var(--bevel-ox)" },
+    ".cm-specialChar": { color: "var(--bevel-ox)" },
+    ".cm-panels": { background: "var(--bevel-ground)", color: "var(--bevel-ink)", borderColor: "var(--bevel-line-2)" },
+    ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--bevel-line-2)" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--bevel-line-2)" },
+    ".cm-panel.cm-search": { padding: "6px 8px", display: "flex", flexDirection: "column", gap: "6px", font: `500 11px/1.5 ${FONT}` },
+    ".cm-panel.cm-search [data-bevel-find-row]": { display: "flex", alignItems: "center", gap: "6px", minWidth: "0" },
+    ".cm-panel.cm-search [data-bevel-find-row][hidden]": { display: "none" },
+    ".cm-panel.cm-search label": {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      fontSize: "11px",
+      letterSpacing: ".06em",
+      textTransform: "uppercase",
+      color: "var(--bevel-muted)",
+      whiteSpace: "nowrap"
+    },
+    ".cm-panel.cm-search input[type=checkbox]": { accentColor: "var(--bevel-brass)", margin: "0 2px 0 0" },
+    // 16px, never smaller: a focused input under 16px makes iOS zoom the whole page.
+    ".cm-textfield": {
+      flex: "1 1 auto",
+      minWidth: "0",
+      fontFamily: FONT,
+      fontSize: "16px",
+      padding: "5px 8px",
+      color: "var(--bevel-ink)",
+      background: "var(--bevel-surface)",
+      border: "1px solid var(--bevel-line-2)",
+      borderRadius: "0"
+    },
+    ".cm-textfield:focus": { outline: "none", borderColor: "var(--bevel-brass)" },
+    ".cm-button": {
+      flex: "0 0 auto",
+      fontFamily: FONT,
+      fontSize: "11px",
+      letterSpacing: ".08em",
+      textTransform: "uppercase",
+      padding: "5px 10px",
+      minWidth: "32px",
+      color: "var(--bevel-ink)",
+      background: "var(--bevel-face)",
+      backgroundImage: "none",
+      borderRadius: "0",
+      border: "2px solid",
+      borderColor: "var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi)"
+    },
+    ".cm-button:active, .cm-button[aria-expanded=true]": {
+      backgroundImage: "none",
+      background: "var(--bevel-face-in)",
+      borderColor: "var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in)"
+    },
+    ".cm-panel.cm-search [name=close]": {
+      position: "static",
+      padding: "2px 7px",
+      minWidth: "0",
+      color: "var(--bevel-muted)",
+      fontSize: "15px",
+      background: "none",
+      border: "0"
+    },
+    ".cm-tooltip": { background: "var(--bevel-surface)", border: "1px solid var(--bevel-line-2)", boxShadow: "var(--bevel-shadow)", color: "var(--bevel-ink)", borderRadius: "0" },
+    ".cm-tooltip.cm-tooltip-autocomplete > ul": { fontFamily: FONT, fontSize: "13px", maxHeight: "16em" },
+    ".cm-tooltip.cm-tooltip-autocomplete > ul > li": { padding: "3px 10px", borderBottom: "1px solid var(--bevel-line)" },
+    ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": { background: "var(--bevel-sunk)", color: "var(--bevel-ink)", boxShadow: "inset 2px 0 0 var(--bevel-brass)" },
+    ".cm-completionLabel": { color: "var(--bevel-ink)" },
+    ".cm-completionMatchedText": { textDecoration: "none", color: "var(--bevel-brass)", fontWeight: "600" },
+    ".cm-completionDetail": { color: "var(--bevel-faint)", fontStyle: "normal", fontSize: "11px" },
+    ".cm-completionIcon": { color: "var(--bevel-muted)", opacity: "1", paddingRight: "12px" },
+    ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionIcon": { color: "var(--bevel-brass)" },
+    ".cm-searchMatch": { background: "color-mix(in srgb, var(--bevel-brass) 24%, transparent)" },
+    ".cm-searchMatch.cm-searchMatch-selected": { background: "color-mix(in srgb, var(--bevel-brass) 55%, transparent)", outline: "1px solid var(--bevel-brass)" },
+    ".cm-placeholder": { color: "var(--bevel-faint)" }
+  });
+  themes.set(coarse, theme);
+  return theme;
+}
+function findPanel(coarse) {
+  return (view) => {
+    const dom = document.createElement("div");
+    dom.className = "cm-search";
+    const rows = [document.createElement("div"), document.createElement("div")];
+    for (const row of rows) {
+      row.setAttribute("data-bevel-find-row", "");
+      dom.append(row);
+    }
+    rows[1].hidden = coarse;
+    const field = (name, label) => {
+      const input = document.createElement("input");
+      input.className = "cm-textfield";
+      input.name = name;
+      input.setAttribute("aria-label", label);
+      input.placeholder = label;
+      return input;
+    };
+    const press = (name, label, text) => {
+      const button = document.createElement("button");
+      button.className = "cm-button";
+      button.type = "button";
+      button.name = name;
+      button.setAttribute("aria-label", label);
+      button.textContent = text;
+      return button;
+    };
+    const toggle = (name, label, text) => {
+      const box = document.createElement("input");
+      box.type = "checkbox";
+      box.name = name;
+      const wrapper = document.createElement("label");
+      wrapper.append(box, document.createTextNode(text));
+      wrapper.title = label;
+      return [wrapper, box];
+    };
+    const searchField = field("search", "Find");
+    searchField.setAttribute("main-field", "true");
+    const previous = press("previous", "Previous match", "\u2039");
+    const next = press("next", "Next match", "\u203A");
+    const more = press("more", "Search options", "\u2026");
+    more.setAttribute("aria-expanded", String(!coarse));
+    const close = press("close", "Close find", "\xD7");
+    rows[0].append(searchField, previous, next, more, close);
+    const replaceField = field("replace", "Replace");
+    const replaceOne = press("replace", "Replace this match", "Replace");
+    const replaceEvery = press("replaceAll", "Replace every match", "All");
+    const [caseLabel, caseBox] = toggle("case", "Match case", "Aa");
+    const [regexpLabel, regexpBox] = toggle("regexp", "Regular expression", ".*");
+    const [wordLabel, wordBox] = toggle("word", "Whole word", "ab|");
+    rows[1].append(replaceField, replaceOne, replaceEvery, caseLabel, regexpLabel, wordLabel);
+    const commit = () => view.dispatch({
+      effects: setSearchQuery.of(new SearchQuery({
+        search: searchField.value,
+        replace: replaceField.value,
+        caseSensitive: caseBox.checked,
+        regexp: regexpBox.checked,
+        wholeWord: wordBox.checked
+      }))
+    });
+    for (const input of [searchField, replaceField]) input.addEventListener("input", commit);
+    for (const box of [caseBox, regexpBox, wordBox]) box.addEventListener("change", commit);
+    const run = (command) => () => {
+      command(view);
+    };
+    previous.addEventListener("click", run(findPrevious));
+    next.addEventListener("click", run(findNext));
+    replaceOne.addEventListener("click", run(replaceNext));
+    replaceEvery.addEventListener("click", run(replaceAll));
+    close.addEventListener("click", () => {
+      closeSearchPanel(view);
+      view.focus();
+    });
+    more.addEventListener("click", () => {
+      rows[1].hidden = !rows[1].hidden;
+      more.setAttribute("aria-expanded", String(!rows[1].hidden));
+    });
+    for (const input of [searchField, replaceField]) input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        (event.shiftKey ? findPrevious : findNext)(view);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        closeSearchPanel(view);
+        view.focus();
+      }
+    });
+    return {
+      dom,
+      top: true,
+      mount() {
+        const query = getSearchQuery(view.state);
+        searchField.value = query.search;
+        replaceField.value = query.replace;
+        caseBox.checked = query.caseSensitive;
+        regexpBox.checked = query.regexp;
+        wordBox.checked = query.wholeWord;
+      },
+      update(update) {
+        if (dom.contains(dom.ownerDocument.activeElement)) return;
+        for (const transaction of update.transactions) {
+          for (const effect of transaction.effects) {
+            if (!effect.is(setSearchQuery)) continue;
+            searchField.value = effect.value.search;
+            replaceField.value = effect.value.replace;
+            caseBox.checked = effect.value.caseSensitive;
+            regexpBox.checked = effect.value.regexp;
+            wordBox.checked = effect.value.wholeWord;
+          }
+        }
+      }
+    };
+  };
+}
+function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFindChange }) {
+  return [
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    // The fold triangles are too small to hit with a thumb, so a phone folds from the toolbar.
+    coarse ? codeFolding() : foldGutter({
+      markerDOM(open) {
+        const marker = document.createElement("span");
+        marker.textContent = open ? "\u25BE" : "\u25B8";
+        marker.setAttribute("aria-hidden", "true");
+        return marker;
+      }
+    }),
+    drawSelection({ cursorBlinkRate: 1e3 }),
+    dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    EditorState.tabSize.of(2),
+    indentUnit.of("  "),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion({ activateOnTyping: true, closeOnBlur: false, maxRenderedOptions: 40, icons: true, selectOnOpen: !coarse }),
+    highlightActiveLine(),
+    highlightSelectionMatches({ minSelectionLength: 2, wholeWords: false }),
+    search({ top: true, createPanel: findPanel(coarse) }),
+    color,
+    html({ matchClosingTags: true, autoCloseTags: true, selfClosingTags: false }),
+    syntaxHighlighting(bevelHighlight, { fallback: true }),
+    ...coarse ? [] : [rectangularSelection(), crosshairCursor()],
+    wrapCompartment.of(wrapExtension(wrapped)),
+    darkCompartment.of(EditorView.darkTheme.of(dark)),
+    bevelEditorTheme(coarse),
+    EditorView.contentAttributes.of({
+      autocorrect: "off",
+      autocapitalize: "off",
+      autocomplete: "off",
+      spellcheck: "false",
+      "aria-label": "Source"
+    }),
+    Prec.highest(keymap.of([
+      { key: "Mod-s", preventDefault: true, run: () => (onSave(), true) },
+      { key: "Mod-Shift-s", preventDefault: true, run: () => (onSave(), true) },
+      { key: "Mod-]", preventDefault: true, run: indentMore },
+      { key: "Mod-[", preventDefault: true, run: indentLess }
+    ])),
+    keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, indentWithTab]),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) onDocChange();
+      const open = searchPanelOpen(update.state);
+      if (open !== searchPanelOpen(update.startState)) onFindChange(open);
+    })
+  ];
+}
+const TOOLS = {
+  undo: { label: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u21B6" }), name: "Undo" },
+  redo: { label: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u21B7" }), name: "Redo" },
+  find: { label: "Find" },
+  outdent: { label: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u21E4" }), name: "Outdent" },
+  indent: { label: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u21E5" }), name: "Indent" },
+  wrap: { label: "Wrap" },
+  fold: { label: "Fold" },
+  suggest: { label: "Suggest" }
+};
+const BAR_ACTIONS = ["undo", "redo", "find", "outdent", "indent", "wrap", "fold", "suggest"];
+const TOOLBAR_ACTIONS = ["undo", "redo", "find", "outdent", "indent", "wrap"];
+const CodeEditorContext = createContext(null);
+function useCodeEditor() {
+  const context = useContext(CodeEditorContext);
+  if (!context) throw new Error("Bevel code editor parts must be rendered inside CodeEditor.Root");
+  return context;
+}
+function useResolvedDark(mode) {
+  const [system, setSystem] = useState(false);
+  useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined") return;
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setSystem(query.matches);
+    apply();
+    query.addEventListener("change", apply);
+    return () => query.removeEventListener("change", apply);
+  }, [mode]);
+  return mode === "dark" || mode === "system" && system;
+}
+function useKeyboardInset(root) {
+  useEffect(() => {
+    const viewport = typeof window === "undefined" ? null : window.visualViewport;
+    if (!viewport) return;
+    const apply = () => {
+      const element = root.current;
+      if (!element) return;
+      const inset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
+      element.style.setProperty("--bevel-keyboard-inset", `${Math.round(inset)}px`);
+      if (inset > 80) element.setAttribute("data-bevel-react-keyboard", "");
+      else element.removeAttribute("data-bevel-react-keyboard");
+    };
+    apply();
+    viewport.addEventListener("resize", apply);
+    viewport.addEventListener("scroll", apply);
+    return () => {
+      viewport.removeEventListener("resize", apply);
+      viewport.removeEventListener("scroll", apply);
+      root.current?.style.removeProperty("--bevel-keyboard-inset");
+    };
+  }, [root]);
+}
+const RootPart = nativePart("div", "bevel-r-code-editor");
+const TabPart = nativePart("div", "bevel-r-code-editor__tab");
+const NamePart = nativePart("span", "bevel-r-code-editor__name");
+const HostPart = nativePart("span", "bevel-r-code-editor__host");
+const DotPart = nativePart("i", "bevel-r-code-editor__dot");
+const SpacerPart = nativePart("span", "bevel-r-code-editor__spacer");
+const ToolbarPart = nativePart("div", "bevel-r-code-editor__toolbar");
+const ToolPart = nativePart("button", "bevel-r-code-editor__tool");
+const SurfacePart = nativePart("div", "bevel-r-code-editor__surface");
+const StatusPart = nativePart("div", "bevel-r-code-editor__status");
+const MetaPart = nativePart("span", "bevel-r-code-editor__meta");
+const BarPart = nativePart("div", "bevel-r-code-editor__bar");
+const BarToolsPart = nativePart("div", "bevel-r-code-editor__bar-tools");
+function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, defaultWrap, onWrapChange, onViewChange, extensions, ref, children, ...props }) {
+  const [view, setView] = useState(null);
+  const viewRef = useRef(null);
+  const root = useRef(null);
+  const merged = useMergedRefs(ref, root);
+  const coarse = useMemo(coarsePointer, []);
+  const initialWrap = useMemo(() => defaultWrap ?? storedWrap(coarse), []);
+  const [isDirty, setDirty] = useControllableState({ value: dirty, defaultValue: defaultDirty, onChange: onDirtyChange });
+  const [wrapped, setWrap] = useControllableState({ value: wrap, defaultValue: initialWrap, onChange: onWrapChange });
+  const [findOpen, setFindOpen] = useState(false);
+  const { mode } = useBevel();
+  const dark = useResolvedDark(mode);
+  const latest = useRef({ onSave, onViewChange, wrapped });
+  latest.current = { onSave, onViewChange, wrapped };
+  useKeyboardInset(root);
+  const save = useCallback(() => {
+    const current = viewRef.current;
+    if (!current) return;
+    latest.current.onSave?.(current.state.doc.toString(), current);
+  }, []);
+  const register = useCallback((next) => {
+    viewRef.current = next;
+    setView(next);
+    latest.current.onViewChange?.(next);
+  }, []);
+  const run = useCallback((action) => {
+    const current = viewRef.current;
+    if (!current) return;
+    if (action === "undo") undo(current);
+    else if (action === "redo") redo(current);
+    else if (action === "outdent") indentLess(current);
+    else if (action === "indent") indentMore(current);
+    else if (action === "fold") toggleFold(current);
+    else if (action === "suggest") startCompletion(current);
+    else if (action === "find") {
+      if (searchPanelOpen(current.state)) {
+        closeSearchPanel(current);
+        current.focus();
+      } else openSearchPanel(current);
+      return;
+    } else if (action === "wrap") {
+      setWrap(!latest.current.wrapped, { reason: "toolbar" });
+    }
+    current.focus();
+  }, [setWrap]);
+  const mounted = useMemo(() => codeEditorExtensions({
+    coarse,
+    wrapped: initialWrap,
+    dark,
+    onSave: save,
+    onDocChange: () => setDirty(true, { reason: "edit" }),
+    onFindChange: setFindOpen
+  }), []);
+  useEffect(() => {
+    view?.dispatch({ effects: wrapCompartment.reconfigure(wrapExtension(wrapped)) });
+  }, [view, wrapped]);
+  useEffect(() => {
+    view?.dispatch({ effects: darkCompartment.reconfigure(EditorView.darkTheme.of(dark)) });
+  }, [view, dark]);
+  const settled = useRef(false);
+  useEffect(() => {
+    if (!settled.current) {
+      settled.current = true;
+      return;
+    }
+    rememberWrap(wrapped);
+  }, [wrapped]);
+  const context = useMemo(() => ({
+    view,
+    register,
+    doc,
+    coarse,
+    dark,
+    wrapped,
+    dirty: isDirty,
+    setDirty,
+    findOpen,
+    extensions: extensions ? [...mounted, ...extensions] : mounted,
+    root,
+    save,
+    run
+  }), [view, register, doc, coarse, dark, wrapped, isDirty, setDirty, findOpen, extensions, mounted, save, run]);
+  return /* @__PURE__ */ jsx(CodeEditorContext, { value: context, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, children }) });
+}
+function Dirty({ children, hidden, ...props }) {
+  const { dirty } = useCodeEditor();
+  return /* @__PURE__ */ jsx(DotPart, { title: "Unsaved changes", ...props, hidden: hidden ?? !dirty, children });
+}
+function Tool({ action, children, onClick, ...props }) {
+  const { wrapped, findOpen, run } = useCodeEditor();
+  const tool = action ? TOOLS[action] : void 0;
+  const pressed = action === "wrap" ? wrapped : action === "find" ? findOpen : void 0;
+  return /* @__PURE__ */ jsx(
+    ToolPart,
+    {
+      type: "button",
+      "aria-label": tool?.name,
+      "aria-pressed": pressed,
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented && action) run(action);
+      },
+      children: children ?? tool?.label
+    }
+  );
+}
+function Save({ children, disabled, onClick, ...props }) {
+  const { dirty, save } = useCodeEditor();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "primary",
+      size: "small",
+      ...props,
+      disabled: disabled ?? !dirty,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) save();
+      },
+      children: children ?? "Save"
+    }
+  );
+}
+function Toolbar({ children, ...props }) {
+  return /* @__PURE__ */ jsx(ToolbarPart, { role: "toolbar", "aria-label": "Editor actions", ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    TOOLBAR_ACTIONS.map((action) => /* @__PURE__ */ jsx(Tool, { action }, action)),
+    /* @__PURE__ */ jsx(SpacerPart, {}),
+    /* @__PURE__ */ jsx(Dirty, {}),
+    /* @__PURE__ */ jsx(Save, {})
+  ] }) });
+}
+function KeyboardBar({ children, ...props }) {
+  return /* @__PURE__ */ jsx(BarPart, { role: "toolbar", "aria-label": "Editor actions above the keyboard", ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BarToolsPart, { children: BAR_ACTIONS.map((action) => /* @__PURE__ */ jsx(Tool, { action }, action)) }),
+    /* @__PURE__ */ jsx(Dirty, {}),
+    /* @__PURE__ */ jsx(Save, {})
+  ] }) });
+}
+function Status({ children, ...props }) {
+  const { dirty } = useCodeEditor();
+  return /* @__PURE__ */ jsx(StatusPart, { ...props, children: children ?? /* @__PURE__ */ jsx(MetaPart, { children: dirty ? "Unsaved changes" : "Saved" }) });
+}
+function Surface({ ref, ...props }) {
+  const { doc, extensions, register } = useCodeEditor();
+  const host = useRef(null);
+  const merged = useMergedRefs(ref, host);
+  const latest = useRef({ doc, extensions, register });
+  latest.current = { doc, extensions, register };
+  useEffect(() => {
+    const parent = host.current;
+    if (!parent) return;
+    const { doc: text, extensions: set, register: attach } = latest.current;
+    const view = new EditorView({ state: EditorState.create({ doc: text, extensions: set }), parent });
+    attach(view);
+    return () => {
+      attach(null);
+      view.destroy();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(SurfacePart, { ...props, ref: merged });
+}
+const CodeEditor = {
+  Root,
+  Tab: TabPart,
+  Name: NamePart,
+  Host: HostPart,
+  Dirty,
+  Spacer: SpacerPart,
+  Toolbar,
+  Tool,
+  Save,
+  Surface,
+  Status,
+  Meta: MetaPart,
+  KeyboardBar,
+  BarTools: BarToolsPart
+};
+export {
+  CodeEditor,
+  bevelEditorTheme,
+  bevelHighlight,
+  coarsePointer,
+  codeEditorExtensions,
+  darkCompartment,
+  rememberWrap,
+  storedWrap,
+  useCodeEditor,
+  wrapCompartment,
+  wrapExtension
+};