najm-kit 0.0.7

package/dist/json.mjs

@@ -0,0 +1,839 @@
+import * as React3 from 'react';
+import React3__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { keymap, EditorView, Decoration, ViewPlugin } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { EditorSelection, EditorState, RangeSetBuilder } from '@codemirror/state';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import * as LucideIcons from 'lucide-react';
+import { LoaderCircleIcon, Loader2, AlertCircle, ClipboardPaste, Copy, RotateCcw } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+
+// src/json/JsonViewer.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var defaultJsonViewColors = {
+  toolName: "#10b981",
+  langCode: "#f59e0b",
+  phrase: "#06b6d4",
+  bracket: "#9ca3af",
+  key: "#a78bfa",
+  string: "#34d399",
+  number: "#f472b6",
+  background: "#1f2937"
+};
+function buildStudioTheme(colors, fullPage = false) {
+  return EditorView.theme(
+    {
+      "&": {
+        backgroundColor: colors.background,
+        fontSize: "0.8125rem",
+        fontFamily: "'JetBrains Mono', monospace",
+        height: fullPage ? "100%" : "auto",
+        minHeight: fullPage ? 0 : void 0
+      },
+      ".cm-scroller": {
+        backgroundColor: colors.background,
+        overflow: "auto"
+      },
+      ".cm-content": {
+        backgroundColor: colors.background,
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+        color: "#e2e8f0"
+      },
+      ".cm-gutters": {
+        backgroundColor: colors.background,
+        color: colors.bracket + "88",
+        borderRight: "none",
+        fontFamily: "'JetBrains Mono', monospace",
+        fontSize: "0.8125rem"
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: colors.bracket + "11"
+      },
+      ".cm-activeLine": {
+        backgroundColor: colors.bracket + "0D"
+      },
+      ".cm-selectionBackground": {
+        backgroundColor: colors.bracket + "33"
+      },
+      ".cm-line": {
+        padding: "0 0.75rem"
+      },
+      "@media (max-width: 640px)": {
+        "&": {
+          fontSize: "0.75rem"
+        },
+        ".cm-gutters": {
+          display: "none"
+        },
+        ".cm-line": {
+          padding: "0 0.5rem"
+        },
+        ".cm-content": {
+          paddingTop: "0.375rem",
+          paddingBottom: "0.375rem"
+        }
+      }
+    },
+    { dark: true }
+  );
+}
+function buildJsonHighlightStyle(colors) {
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.string, color: colors.string },
+    { tag: tags.number, color: colors.number },
+    { tag: tags.propertyName, color: colors.key },
+    { tag: tags.bool, color: colors.number },
+    { tag: tags.null, color: colors.number },
+    { tag: tags.bracket, color: colors.bracket },
+    { tag: tags.squareBracket, color: colors.bracket },
+    { tag: tags.brace, color: colors.bracket },
+    { tag: tags.punctuation, color: colors.bracket }
+  ]);
+  return syntaxHighlighting(highlightStyle);
+}
+function JsonViewer({ value, colors = defaultJsonViewColors, className, maxHeight = "240px" }) {
+  const fullPage = maxHeight === "none";
+  const text = useMemo(() => {
+    if (typeof value === "string") return value;
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }, [value]);
+  const theme = useMemo(() => buildStudioTheme(colors, fullPage), [colors, fullPage]);
+  const highlightStyle = useMemo(() => buildJsonHighlightStyle(colors), [colors]);
+  const selectAllKeymap = useMemo(
+    () => keymap.of([
+      {
+        key: "Mod-a",
+        run: (view) => {
+          view.dispatch({
+            selection: EditorSelection.range(0, view.state.doc.length)
+          });
+          return true;
+        }
+      }
+    ]),
+    []
+  );
+  const extensions = useMemo(
+    () => [
+      json(),
+      theme,
+      highlightStyle,
+      EditorView.lineWrapping,
+      EditorState.readOnly.of(true),
+      selectAllKeymap
+    ],
+    [theme, highlightStyle, selectAllKeymap]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-border",
+        fullPage ? "relative flex-1 min-h-0 overflow-hidden" : "overflow-hidden",
+        className
+      ),
+      style: { backgroundColor: colors.background, maxHeight },
+      children: /* @__PURE__ */ jsx(
+        CodeMirror,
+        {
+          value: text,
+          className: fullPage ? "absolute inset-0" : "text-xs",
+          height: fullPage ? "100%" : "auto",
+          extensions,
+          editable: true,
+          basicSetup: {
+            lineNumbers: fullPage,
+            highlightActiveLineGutter: false,
+            highlightActiveLine: false,
+            foldGutter: false,
+            dropCursor: false,
+            allowMultipleSelections: false,
+            indentOnInput: false,
+            bracketMatching: true,
+            closeBrackets: false,
+            autocompletion: false,
+            searchKeymap: false
+          }
+        }
+      )
+    }
+  );
+}
+function toPascalCase(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function isImageSource(value) {
+  return value.startsWith("/") || value.startsWith("./") || value.startsWith("../") || value.startsWith("http://") || value.startsWith("https://") || value.startsWith("data:image/") || /\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i.test(value);
+}
+function isComponentSource(value) {
+  return typeof value === "function" || Boolean(value && typeof value === "object" && "$$typeof" in value);
+}
+var NIcon = ({
+  icon = "circle",
+  size = 24,
+  alt = "",
+  className,
+  style,
+  onClick,
+  ...rest
+}) => {
+  const dimensionStyle = {
+    width: size,
+    height: size,
+    ...style
+  };
+  if (React3__default.isValidElement(icon)) {
+    return React3__default.cloneElement(icon, {
+      className: cn(icon.props.className, className),
+      onClick,
+      ...rest
+    });
+  }
+  if (icon && typeof icon === "object" && "src" in icon) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: icon.alt ?? alt,
+        className: cn("inline-block shrink-0 object-contain", className),
+        src: icon.src,
+        style: dimensionStyle,
+        onClick,
+        ...rest
+      }
+    );
+  }
+  if (isComponentSource(icon)) {
+    const IconComponent = icon;
+    return /* @__PURE__ */ jsx(IconComponent, { size, className, onClick, style, ...rest });
+  }
+  if (typeof icon === "string") {
+    if (isImageSource(icon)) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt,
+          className: cn("inline-block shrink-0 object-contain", className),
+          src: icon,
+          style: dimensionStyle,
+          onClick,
+          ...rest
+        }
+      );
+    }
+    const pascalCaseIcon = toPascalCase(icon);
+    if (LucideIcons[pascalCaseIcon]) {
+      const LucideIcon = LucideIcons[pascalCaseIcon];
+      return /* @__PURE__ */ jsx(LucideIcon, { size, className, onClick, style, ...rest });
+    }
+    return null;
+  }
+  return null;
+};
+NIcon.displayName = "NIcon";
+var buttonVariants = cva(
+  [
+    "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none transition-all",
+    "disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "h-auto p-0 text-primary underline-offset-4 hover:underline",
+        success: "bg-emerald-600 text-white shadow-xs hover:bg-emerald-700",
+        warning: "bg-amber-400 text-slate-950 shadow-xs hover:bg-amber-500",
+        info: "bg-sky-600 text-white shadow-xs hover:bg-sky-700",
+        soft: "bg-primary/10 text-primary shadow-none hover:bg-primary/15",
+        subtle: "bg-muted text-foreground shadow-none hover:bg-muted/80",
+        plain: "bg-transparent shadow-none hover:bg-transparent"
+      },
+      size: {
+        "2xs": "h-5 gap-1 px-1.5 text-[11px] [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        md: "h-9 px-4 py-2 has-[>svg]:px-3",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        xl: "h-12 px-8 text-base [&_svg:not([class*='size-'])]:size-5",
+        "2xl": "h-14 px-10 text-base [&_svg:not([class*='size-'])]:size-5",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10 [&_svg:not([class*='size-'])]:size-5",
+        "icon-xl": "size-12 [&_svg:not([class*='size-'])]:size-5"
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        default: "rounded-md",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        full: "rounded-full"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: "default",
+      fullWidth: false
+    }
+  }
+);
+function isPromiseLike(value) {
+  return Boolean(value && typeof value.then === "function");
+}
+var defaultLoader = /* @__PURE__ */ jsx(LoaderCircleIcon, { "aria-hidden": "true", className: "animate-spin" });
+function renderIcon(icon) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
+}
+var Button = React3.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    rounded,
+    fullWidth,
+    asChild = false,
+    loading = false,
+    autoLoading = true,
+    disabledWhileLoading = true,
+    loadingText,
+    loader = defaultLoader,
+    loaderPosition = "left",
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    onClick,
+    ...props
+  }, ref) => {
+    const [pending, setPending] = React3.useState(false);
+    const isLoading = loading || pending;
+    const isDisabled = disabled || disabledWhileLoading && isLoading;
+    const Comp = asChild ? Slot : "button";
+    const handleClick = React3.useCallback(
+      (event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        const result = onClick?.(event);
+        if (autoLoading && isPromiseLike(result)) {
+          setPending(true);
+          void result.then(
+            () => setPending(false),
+            () => setPending(false)
+          );
+        }
+      },
+      [autoLoading, isDisabled, onClick]
+    );
+    const content = loadingText && isLoading ? loadingText : children;
+    const loaderNode = isLoading ? loader : null;
+    const leftIconNode = renderIcon(leftIcon);
+    const rightIconNode = renderIcon(rightIcon);
+    const showCenteredLoader = Boolean(loaderNode && loaderPosition === "center");
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-slot": "button",
+        "data-loading": isLoading || void 0,
+        "data-disabled": isDisabled || void 0,
+        "aria-busy": isLoading || void 0,
+        "aria-disabled": asChild && isDisabled ? true : void 0,
+        disabled: !asChild ? isDisabled : void 0,
+        className: cn(buttonVariants({ variant, size, rounded, fullWidth, className })),
+        onClick: handleClick,
+        ...props,
+        children: showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
+            leftIconNode,
+            content,
+            rightIconNode
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
+          content,
+          loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function buildStudioTheme2(colors) {
+  return EditorView.theme(
+    {
+      "&": {
+        backgroundColor: colors.background,
+        fontSize: "0.875rem",
+        fontFamily: "'JetBrains Mono', monospace",
+        height: "100%",
+        minHeight: 0
+      },
+      ".cm-scroller": {
+        backgroundColor: colors.background,
+        overflow: "auto"
+      },
+      ".cm-content": {
+        caretColor: colors.phrase,
+        backgroundColor: colors.background,
+        paddingTop: "1rem",
+        paddingBottom: "1rem",
+        color: "#e2e8f0"
+      },
+      ".cm-gutters": {
+        backgroundColor: colors.background,
+        color: colors.bracket + "88",
+        borderRight: "none",
+        fontFamily: "'JetBrains Mono', monospace",
+        fontSize: "0.875rem"
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: colors.bracket + "11"
+      },
+      ".cm-activeLine": {
+        backgroundColor: colors.bracket + "0D"
+      },
+      ".cm-selectionBackground": {
+        backgroundColor: colors.bracket + "33"
+      },
+      ".cm-cursor": {
+        borderLeftColor: colors.phrase
+      },
+      ".cm-line": {
+        padding: "0 1rem"
+      },
+      "@media (max-width: 640px)": {
+        "&": {
+          fontSize: "0.75rem"
+        },
+        ".cm-gutters": {
+          display: "none"
+        },
+        ".cm-content": {
+          paddingTop: "0.5rem",
+          paddingBottom: "0.5rem"
+        },
+        ".cm-line": {
+          padding: "0 0.5rem"
+        }
+      }
+    },
+    { dark: true }
+  );
+}
+function buildJsonHighlightStyle2(colors) {
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.string, color: colors.string },
+    { tag: tags.number, color: colors.number },
+    { tag: tags.propertyName, color: colors.key },
+    { tag: tags.bool, color: colors.number },
+    { tag: tags.null, color: colors.number },
+    { tag: tags.bracket, color: colors.bracket },
+    { tag: tags.squareBracket, color: colors.bracket },
+    { tag: tags.brace, color: colors.bracket },
+    { tag: tags.punctuation, color: colors.bracket }
+  ]);
+  return syntaxHighlighting(highlightStyle);
+}
+function buildDuplicateStringHighlight(colors) {
+  const duplicateMark = Decoration.mark({
+    attributes: {
+      style: `background-color: ${colors.phrase}22; box-shadow: inset 0 0 0 1px ${colors.phrase}55; border-radius: 3px;`
+    }
+  });
+  const collectDuplicateRanges = (doc) => {
+    const stringPattern = /"(?:\\.|[^"\\])*"/g;
+    const occurrences = /* @__PURE__ */ new Map();
+    let match;
+    while ((match = stringPattern.exec(doc)) !== null) {
+      const token = match[0];
+      const after = doc.slice(match.index + token.length).match(/^\s*:/);
+      if (after) continue;
+      let value = "";
+      try {
+        value = JSON.parse(token);
+      } catch {
+        continue;
+      }
+      if (typeof value !== "string" || value.trim().length === 0) continue;
+      const ranges = occurrences.get(value) ?? [];
+      ranges.push({ from: match.index, to: match.index + token.length });
+      occurrences.set(value, ranges);
+    }
+    return Array.from(occurrences.values()).filter((ranges) => ranges.length > 1).flat();
+  };
+  return ViewPlugin.fromClass(
+    class {
+      decorations;
+      constructor(view) {
+        this.decorations = this.build(view);
+      }
+      update(update) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = this.build(update.view);
+        }
+      }
+      build(view) {
+        const builder = new RangeSetBuilder();
+        const ranges = collectDuplicateRanges(view.state.doc.toString());
+        ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+        for (const range of ranges) {
+          builder.add(range.from, range.to, duplicateMark);
+        }
+        return builder.finish();
+      }
+    },
+    {
+      decorations: (plugin) => plugin.decorations
+    }
+  );
+}
+function buildStatusStringHighlight() {
+  const marks = {
+    fail: Decoration.mark({
+      attributes: {
+        style: "background-color: rgba(239, 68, 68, 0.18); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45); border-radius: 3px;"
+      }
+    }),
+    low_confidence: Decoration.mark({
+      attributes: {
+        style: "background-color: rgba(245, 158, 11, 0.18); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45); border-radius: 3px;"
+      }
+    }),
+    pass: Decoration.mark({
+      attributes: {
+        style: "background-color: rgba(16, 185, 129, 0.18); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.45); border-radius: 3px;"
+      }
+    }),
+    pending: Decoration.mark({
+      attributes: {
+        style: "background-color: rgba(148, 163, 184, 0.14); color: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35); border-radius: 3px;"
+      }
+    }),
+    missing: Decoration.mark({
+      attributes: {
+        style: "background-color: rgba(239, 68, 68, 0.18); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45); border-radius: 3px;"
+      }
+    }),
+    extra: Decoration.mark({
+      attributes: {
+        style: "background-color: rgba(245, 158, 11, 0.18); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45); border-radius: 3px;"
+      }
+    })
+  };
+  return ViewPlugin.fromClass(
+    class {
+      decorations;
+      constructor(view) {
+        this.decorations = this.build(view);
+      }
+      update(update) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = this.build(update.view);
+        }
+      }
+      build(view) {
+        const builder = new RangeSetBuilder();
+        const doc = view.state.doc.toString();
+        const ranges = [];
+        const pattern = /"status"\s*:\s*"(fail|low_confidence|pass|pending)"/g;
+        let match;
+        while ((match = pattern.exec(doc)) !== null) {
+          const status = match[1];
+          const valueStart = match.index + match[0].lastIndexOf(`"${status}"`);
+          ranges.push({ from: valueStart, to: valueStart + status.length + 2, mark: marks[status] });
+        }
+        const toolArrayPattern = /"(missingTools|extraTools)"\s*:\s*\[([\s\S]*?)\]/g;
+        let arrayMatch;
+        while ((arrayMatch = toolArrayPattern.exec(doc)) !== null) {
+          const key = arrayMatch[1];
+          const content = arrayMatch[2] ?? "";
+          const contentStart = arrayMatch.index + arrayMatch[0].indexOf(content);
+          const stringPattern = /"(?:\\.|[^"\\])*"/g;
+          let stringMatch;
+          while ((stringMatch = stringPattern.exec(content)) !== null) {
+            const from = contentStart + stringMatch.index;
+            const to = from + stringMatch[0].length;
+            ranges.push({ from, to, mark: key === "missingTools" ? marks.missing : marks.extra });
+          }
+        }
+        ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+        for (const range of ranges) builder.add(range.from, range.to, range.mark);
+        return builder.finish();
+      }
+    },
+    {
+      decorations: (plugin) => plugin.decorations
+    }
+  );
+}
+function JsonEditor({
+  value,
+  onChange,
+  onSave,
+  onReset,
+  onCancel,
+  dirty,
+  parseError,
+  saveError,
+  saveSuccess,
+  loading,
+  saving,
+  colors,
+  lineCount,
+  itemCount,
+  itemLabel,
+  loadingLabel,
+  readOnly = false,
+  smartPasteLabel,
+  onSmartPaste,
+  onCopy,
+  copyLabel,
+  headerMiddle,
+  statusAddon,
+  showActions = true,
+  highlightDuplicateStrings = false,
+  highlightStatusStrings = false
+}) {
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  const dirtyRef = useRef(dirty);
+  dirtyRef.current = dirty;
+  const parseErrorRef = useRef(parseError);
+  parseErrorRef.current = parseError;
+  const savingRef = useRef(saving);
+  savingRef.current = saving;
+  const customKeymap = useMemo(
+    () => keymap.of([
+      {
+        key: "Mod-s",
+        run: () => {
+          if (dirtyRef.current && !parseErrorRef.current && !savingRef.current) {
+            onSaveRef.current();
+          }
+          return true;
+        }
+      }
+    ]),
+    []
+  );
+  const selectAllKeymap = useMemo(
+    () => keymap.of([
+      {
+        key: "Mod-a",
+        run: (view) => {
+          view.dispatch({
+            selection: EditorSelection.range(0, view.state.doc.length)
+          });
+          return true;
+        }
+      }
+    ]),
+    []
+  );
+  const theme = useMemo(() => buildStudioTheme2(colors), [colors]);
+  const highlightStyle = useMemo(() => buildJsonHighlightStyle2(colors), [colors]);
+  const duplicateStringHighlight = useMemo(
+    () => buildDuplicateStringHighlight(colors),
+    [colors]
+  );
+  const statusStringHighlight = useMemo(() => buildStatusStringHighlight(), []);
+  const extensions = useMemo(
+    () => [
+      json(),
+      theme,
+      highlightStyle,
+      customKeymap,
+      selectAllKeymap,
+      EditorView.lineWrapping,
+      ...highlightDuplicateStrings ? [duplicateStringHighlight] : [],
+      ...highlightStatusStrings ? [statusStringHighlight] : []
+    ],
+    [
+      json,
+      theme,
+      highlightStyle,
+      customKeymap,
+      selectAllKeymap,
+      highlightDuplicateStrings,
+      duplicateStringHighlight,
+      highlightStatusStrings,
+      statusStringHighlight
+    ]
+  );
+  const handleChange = useCallback(
+    (newValue) => {
+      onChange(newValue);
+    },
+    [onChange]
+  );
+  const statusMessage = useMemo(() => {
+    if (loading) return { text: loadingLabel, type: "loading" };
+    if (saving) return { text: "Saving...", type: "saving" };
+    if (saveError) return { text: saveError.slice(0, 120), type: "error" };
+    if (dirty) {
+      if (parseError) return { text: `JSON error: ${parseError.slice(0, 120)}`, type: "error" };
+      return { text: "Valid JSON - unsaved changes", type: "success" };
+    }
+    return { text: readOnly ? "Read-only" : "Saved", type: "idle" };
+  }, [loading, saving, saveError, dirty, parseError, loadingLabel, readOnly]);
+  const dotClass = saving ? "bg-amber-400 animate-ping" : !saving && dirty && parseError ? "bg-rose-500" : !saving && dirty && !parseError ? "bg-amber-400" : "bg-emerald-600";
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0", style: { backgroundColor: colors.background }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex items-center justify-between gap-3 border-b px-3 py-2 shrink-0 sm:px-4",
+        style: { borderColor: colors.bracket + "44", minHeight: "44px" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            statusMessage.type === "loading" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: statusMessage.text }),
+            statusMessage.type === "saving" && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-xs text-amber-400 animate-pulse", children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+              " ",
+              statusMessage.text
+            ] }),
+            statusMessage.type === "error" && /* @__PURE__ */ jsxs("span", { className: "truncate text-xs text-rose-400", children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 inline mr-1" }),
+              " ",
+              statusMessage.text
+            ] }),
+            statusMessage.type === "success" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-emerald-400", children: statusMessage.text }),
+            statusMessage.type === "idle" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs", style: { color: colors.bracket }, children: statusMessage.text }),
+            statusAddon && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: statusAddon })
+          ] }),
+          headerMiddle && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center gap-1.5 md:flex", children: headerMiddle }),
+          showActions && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 overflow-x-auto", children: [
+            onSmartPaste && /* @__PURE__ */ jsxs(Button, { variant: "secondary", disabled: saving || loading, onClick: onSmartPaste, title: "Paste & merge JSON from clipboard", className: "gap-1.5 whitespace-nowrap px-2 sm:px-3", children: [
+              /* @__PURE__ */ jsx(ClipboardPaste, { className: "h-3.5 w-3.5 mr-1" }),
+              /* @__PURE__ */ jsx("span", { children: smartPasteLabel ?? "Paste" })
+            ] }),
+            onCopy && /* @__PURE__ */ jsxs(Button, { variant: "outline", disabled: loading, onClick: onCopy, title: "Copy JSON to clipboard", className: "gap-1.5 whitespace-nowrap px-2 sm:px-3", children: [
+              /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5 mr-1" }),
+              copyLabel ?? "Copy"
+            ] }),
+            /* @__PURE__ */ jsxs(Button, { variant: "ghost", disabled: !dirty || saving, onClick: onReset, title: "Reset all JSON changes", className: "gap-1.5 whitespace-nowrap px-2 sm:px-3", children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "h-3.5 w-3.5 mr-1" }),
+              "Reset All"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative overflow-hidden", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin mr-2" }),
+      " ",
+      loadingLabel
+    ] }) : /* @__PURE__ */ jsx(
+      CodeMirror,
+      {
+        value,
+        className: "absolute inset-0",
+        height: "100%",
+        extensions,
+        onChange: handleChange,
+        editable: !readOnly && !saving,
+        basicSetup: {
+          lineNumbers: true,
+          highlightActiveLineGutter: true,
+          highlightActiveLine: true,
+          foldGutter: false,
+          dropCursor: false,
+          allowMultipleSelections: false,
+          indentOnInput: true,
+          bracketMatching: true,
+          closeBrackets: true,
+          autocompletion: false,
+          searchKeymap: false
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid gap-1.5 border-t px-3 py-2 text-[11px] shrink-0 sm:flex sm:items-center sm:justify-between sm:px-4 sm:py-1.5",
+        style: { color: colors.bracket, borderColor: colors.bracket + "33" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-4 sm:flex", children: [
+            /* @__PURE__ */ jsx("span", { children: "Edit freely - copy, paste, find & replace" }),
+            /* @__PURE__ */ jsx("span", { children: "Ctrl+S to save" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 justify-start sm:flex-1 sm:justify-center sm:px-4", children: saveSuccess && /* @__PURE__ */ jsx("span", { className: "text-emerald-400 truncate", children: saveSuccess }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              lineCount,
+              " lines"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              itemCount,
+              " ",
+              itemLabel
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: `inline-block h-2 w-2 rounded-full ${dotClass}` }),
+              /* @__PURE__ */ jsx("span", { className: dirty ? "text-amber-400" : "text-emerald-400", children: saving ? "Saving\u2026" : dirty ? "Modified" : "Saved" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var TableStoreContext = createContext(null);
+var useTableStore = { use: {} };
+var handler = {
+  get: (_, prop) => () => {
+    const store = useContext(TableStoreContext);
+    if (!store) throw new Error("useTableStore must be used within NTable");
+    return store.use[prop]();
+  }
+};
+useTableStore.use = new Proxy({}, handler);
+function formatJsonValue(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value ?? null, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+function NTableJson() {
+  const viewMode = useTableStore.use.viewMode();
+  const renderJson = useTableStore.use.renderJson();
+  const jsonValue = useTableStore.use.jsonValue();
+  if (viewMode !== "json") return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx("pre", { className: "h-full min-h-0 overflow-auto rounded-md border border-border bg-muted/40 p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) });
+}
+
+export { JsonEditor, JsonViewer, NTableJson };