@mirror-physics/fractal-ui 0.2.0-next.49 → 0.2.0-next.50

package/dist/index.cjs

@@ -278,7 +278,7 @@ Button.displayName = "Button";
 var import_react = require("react");
 var import_react_codemirror = __toESM(require("@uiw/react-codemirror"), 1);
 var import_language = require("@codemirror/language");
-var import_language_data = require("@codemirror/language-data");
+var import_lang_json = require("@codemirror/lang-json");
 var import_view = require("@codemirror/view");
 var import_highlight = require("@lezer/highlight");
 var import_fractal_icons = require("@mirror-physics/fractal-icons");
@@ -299,7 +299,7 @@ var codeTheme = import_view.EditorView.theme({
   ".cm-line": { padding: "0 12px" },
   ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--fg-primary)" },
   ".cm-gutters": {
-    backgroundColor: "var(--bg-surface-1)",
+    backgroundColor: "var(--bg-canvas)",
     borderRight: "1px solid var(--border-subtle)",
     color: "var(--fg-tertiary)"
   },
@@ -324,43 +324,30 @@ var codeTheme = import_view.EditorView.theme({
 var fractalHighlightStyle = import_language.HighlightStyle.define([
   { tag: import_highlight.tags.comment, color: "var(--fg-tertiary)", fontStyle: "italic" },
   { tag: [import_highlight.tags.keyword, import_highlight.tags.controlKeyword, import_highlight.tags.operatorKeyword], color: "var(--purple-default)" },
-  { tag: [import_highlight.tags.string, import_highlight.tags.special(import_highlight.tags.string)], color: "var(--success-default)" },
+  { tag: [import_highlight.tags.string, import_highlight.tags.special(import_highlight.tags.string)], color: "var(--purple-default)" },
   { tag: [import_highlight.tags.number, import_highlight.tags.bool, import_highlight.tags.null], color: "var(--orange-default)" },
   { tag: [import_highlight.tags.function(import_highlight.tags.variableName), import_highlight.tags.labelName], color: "var(--accent-default)" },
   { tag: [import_highlight.tags.typeName, import_highlight.tags.className, import_highlight.tags.namespace], color: "var(--pink-default)" },
-  { tag: [import_highlight.tags.propertyName, import_highlight.tags.attributeName], color: "var(--fg-primary)" },
-  { tag: [import_highlight.tags.operator, import_highlight.tags.punctuation, import_highlight.tags.bracket], color: "var(--fg-secondary)" },
+  { tag: [import_highlight.tags.propertyName, import_highlight.tags.attributeName], color: "var(--success-default)" },
+  { tag: [import_highlight.tags.operator, import_highlight.tags.punctuation], color: "var(--fg-secondary)" },
+  { tag: import_highlight.tags.bracket, color: "var(--accent-default)" },
   { tag: [import_highlight.tags.heading, import_highlight.tags.strong], color: "var(--fg-primary)", fontWeight: "600" },
   { tag: import_highlight.tags.emphasis, fontStyle: "italic" },
   { tag: import_highlight.tags.link, color: "var(--accent-default)", textDecoration: "underline" },
   { tag: import_highlight.tags.invalid, color: "var(--error-default)", textDecoration: "underline wavy" }
 ]);
-function findLanguage(language, fileName) {
-  const normalized = language?.trim();
-  if (normalized && !["text", "txt", "plaintext", "plain"].includes(normalized.toLowerCase())) {
-    return import_language.LanguageDescription.matchLanguageName(import_language_data.languages, normalized, true);
+var jsonSupport = (0, import_lang_json.json)();
+var JSON_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["json", "jsonl", "ndjson", "geojson"]);
+function resolveLanguage(language, fileName) {
+  const normalized = language?.trim().toLowerCase();
+  const extension = fileName?.split(/[?#]/, 1)[0].split(".").pop()?.toLowerCase();
+  if (normalized && JSON_LANGUAGE_NAMES.has(normalized) || extension && JSON_LANGUAGE_NAMES.has(extension)) {
+    return { label: normalized === "jsonl" || extension === "jsonl" ? "JSONL" : "JSON", support: jsonSupport };
   }
-  return fileName ? import_language.LanguageDescription.matchFilename(import_language_data.languages, fileName) : null;
-}
-function useLanguageSupport(language, fileName) {
-  const description = (0, import_react.useMemo)(() => findLanguage(language, fileName), [fileName, language]);
-  const [support, setSupport] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    let cancelled = false;
-    setSupport(null);
-    if (!description) return () => {
-      cancelled = true;
-    };
-    void description.load().then((loaded) => {
-      if (!cancelled) setSupport(loaded);
-    }).catch(() => {
-      if (!cancelled) setSupport(null);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [description]);
-  return { description, support };
+  if (normalized && !["text", "txt", "plaintext", "plain"].includes(normalized)) {
+    return { label: language?.trim(), support: null };
+  }
+  return { support: null };
 }
 function CodeBlock({
   value,
@@ -381,7 +368,7 @@ function CodeBlock({
   className,
   ...props
 }) {
-  const { description, support } = useLanguageSupport(language, fileName);
+  const resolvedLanguage = (0, import_react.useMemo)(() => resolveLanguage(language, fileName), [fileName, language]);
   const [copyStatus, setCopyStatus] = (0, import_react.useState)("idle");
   const copyResetTimer = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => () => {
@@ -390,10 +377,11 @@ function CodeBlock({
   const extensions = (0, import_react.useMemo)(() => [
     codeTheme,
     (0, import_language.syntaxHighlighting)(fractalHighlightStyle),
-    ...support ? [support] : [],
+    ...resolvedLanguage.support ? [resolvedLanguage.support] : [],
+    ...lineNumbers ? [(0, import_language.foldGutter)(), (0, import_view.lineNumbers)()] : [],
     ...wrap ? [import_view.EditorView.lineWrapping] : []
-  ], [support, wrap]);
-  const languageLabel = language?.trim() || description?.name;
+  ], [lineNumbers, resolvedLanguage.support, wrap]);
+  const languageLabel = resolvedLanguage.label;
   const toolbarLabel = label ?? fileName ?? languageLabel;
   const surfaceLabel = ariaLabel ?? (fileName ? `${fileName} ${editable ? "editor" : "viewer"}` : `Code ${editable ? "editor" : "viewer"}`);
   const copyCode = async () => {
@@ -449,8 +437,8 @@ function CodeBlock({
             extensions,
             theme: "none",
             basicSetup: {
-              lineNumbers,
-              foldGutter: lineNumbers,
+              lineNumbers: false,
+              foldGutter: false,
               drawSelection: editable,
               highlightActiveLine: editable,
               highlightActiveLineGutter: editable,