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

package/dist/index.js

@@ -168,7 +168,7 @@ Button.displayName = "Button";
 // src/components/CodeBlock/CodeBlock.tsx
 import { useEffect, useMemo, useRef, useState as useState2 } from "react";
 import CodeMirror from "@uiw/react-codemirror";
-import { HighlightStyle, foldGutter, syntaxHighlighting } from "@codemirror/language";
+import { HighlightStyle, foldGutter, foldService, syntaxHighlighting } from "@codemirror/language";
 import { json } from "@codemirror/lang-json";
 import { EditorView, lineNumbers as lineNumberGutter } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
@@ -184,7 +184,7 @@ var codeTheme = EditorView.theme({
   ".cm-scroller": {
     fontFamily: "var(--font-mono)",
     lineHeight: "1.55",
-    overscrollBehavior: "contain"
+    overscrollBehavior: "none"
   },
   ".cm-content": { padding: "10px 0" },
   ".cm-line": { padding: "0 12px" },
@@ -194,8 +194,28 @@ var codeTheme = EditorView.theme({
     borderRight: "1px solid var(--border-subtle)",
     color: "var(--fg-tertiary)"
   },
-  ".cm-lineNumbers .cm-gutterElement": { padding: "0 10px 0 12px" },
-  ".cm-foldGutter .cm-gutterElement": { padding: "0 8px 0 2px" },
+  ".cm-lineNumbers .cm-gutterElement": { padding: "0 10px 0 4px" },
+  ".cm-foldGutter": { width: "14px" },
+  ".cm-foldGutter .cm-gutterElement": {
+    display: "flex",
+    width: "14px",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 1px 0 0"
+  },
+  ".cm-foldGutter .cm-gutterElement > span": {
+    display: "inline-flex",
+    width: "12px",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0",
+    color: "var(--fg-tertiary)",
+    lineHeight: "1",
+    transform: "translateY(-1px)",
+    transition: "color 120ms ease"
+  },
+  ".cm-foldGutter .cm-gutterElement > span:hover": { color: "var(--fg-secondary)" },
   ".cm-activeLine, .cm-activeLineGutter": { backgroundColor: "var(--bg-surface-1)" },
   ".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": {
     backgroundColor: "var(--accent-surface-stroke) !important"
@@ -229,16 +249,40 @@ var fractalHighlightStyle = HighlightStyle.define([
 ]);
 var jsonSupport = json();
 var JSON_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["json", "jsonl", "ndjson", "geojson"]);
+var JSON_LINES_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["jsonl", "ndjson"]);
+var jsonLinesFoldSupport = foldService.of((state, lineStart, lineEnd) => {
+  const line = state.doc.sliceString(lineStart, lineEnd);
+  const firstContentIndex = line.search(/\S/);
+  if (firstContentIndex < 0) return null;
+  const lastContentIndex = line.search(/\s*$/) - 1;
+  const openingCharacter = line[firstContentIndex];
+  const closingCharacter = line[lastContentIndex];
+  const isContainer = openingCharacter === "{" && closingCharacter === "}" || openingCharacter === "[" && closingCharacter === "]";
+  if (!isContainer || lastContentIndex - firstContentIndex < 2) return null;
+  try {
+    const parsed = JSON.parse(line.slice(firstContentIndex, lastContentIndex + 1));
+    if (parsed === null || typeof parsed !== "object") return null;
+  } catch {
+    return null;
+  }
+  return {
+    from: lineStart + firstContentIndex + 1,
+    to: lineStart + lastContentIndex
+  };
+});
 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 };
+    const isJsonLines = Boolean(
+      normalized && JSON_LINES_LANGUAGE_NAMES.has(normalized) || extension && JSON_LINES_LANGUAGE_NAMES.has(extension)
+    );
+    return { label: isJsonLines ? "JSONL" : "JSON", support: jsonSupport, isJsonLines };
   }
   if (normalized && !["text", "txt", "plaintext", "plain"].includes(normalized)) {
-    return { label: language?.trim(), support: null };
+    return { label: language?.trim(), support: null, isJsonLines: false };
   }
-  return { support: null };
+  return { support: null, isJsonLines: false };
 }
 function CodeBlock({
   value,
@@ -269,9 +313,10 @@ function CodeBlock({
     codeTheme,
     syntaxHighlighting(fractalHighlightStyle),
     ...resolvedLanguage.support ? [resolvedLanguage.support] : [],
+    ...resolvedLanguage.isJsonLines ? [jsonLinesFoldSupport] : [],
     ...lineNumbers ? [foldGutter(), lineNumberGutter()] : [],
     ...wrap ? [EditorView.lineWrapping] : []
-  ], [lineNumbers, resolvedLanguage.support, wrap]);
+  ], [lineNumbers, resolvedLanguage.isJsonLines, resolvedLanguage.support, wrap]);
   const languageLabel = resolvedLanguage.label;
   const toolbarLabel = label ?? fileName ?? languageLabel;
   const surfaceLabel = ariaLabel ?? (fileName ? `${fileName} ${editable ? "editor" : "viewer"}` : `Code ${editable ? "editor" : "viewer"}`);