@kinetixui/ui 0.10.0 → 0.12.0

package/src/components/data-grid.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const DEFAULT_WIDTH = 160;
+const DEFAULT_MIN_WIDTH = 60;
+const DEFAULT_ROW_HEIGHT = 40;
+
+export interface DataGridColumn<TData> {
+  id: string;
+  header: React.ReactNode;
+  /** rendered cell content */
+  cell: (row: TData, rowIndex: number) => React.ReactNode;
+  /** raw comparable value — required for `sortable` and used to seed inline edits */
+  value?: (row: TData) => string | number;
+  width?: number;
+  minWidth?: number;
+  /** fixed to this side, not draggable, and excluded from the reorder sequence */
+  pinned?: "left" | "right";
+  sortable?: boolean;
+  /** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
+  editable?: boolean;
+  onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
+}
+
+export interface DataGridProps<TData> {
+  columns: DataGridColumn<TData>[];
+  data: TData[];
+  /** viewport height — a number (px) or any CSS height value; enables row virtualization */
+  height: number | string;
+  rowHeight?: number;
+  overscan?: number;
+  getRowId?: (row: TData, index: number) => React.Key;
+  className?: string;
+}
+
+type SortState = { columnId: string; direction: "asc" | "desc" } | null;
+
+/**
+ * DataGrid — the "product on its own" the `COMPONENT-ADDITIONS.md` Tier 3
+ * entry calls for: row-virtualized (same fixed-row-height windowing as
+ * `VirtualList`), with column resize, drag-to-reorder, left/right pin, single-
+ * column sort, and double-click-to-edit cells. `DataTable` stays the
+ * TanStack-Table-light option for a plain sortable/paginated table; reach for
+ * `DataGrid` once the row count or column-manipulation needs outgrow it.
+ *
+ * Deliberately out of scope: column *virtualization* (only rows are
+ * windowed — a grid with enough columns to need it is rare enough that this
+ * isn't worth the added complexity) and multi-column sort. Rendered as ARIA
+ * `grid`/`row`/`columnheader`/`gridcell` divs rather than a real `<table>` —
+ * sticky-positioned pinned columns and a sticky header row need that
+ * flexibility, at the cost of the native table-navigation semantics
+ * `DataTable` still gets for free.
+ */
+function DataGrid<TData>({
+  columns,
+  data,
+  height,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  overscan = 6,
+  getRowId,
+  className,
+}: DataGridProps<TData>) {
+  const columnById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+  const [order, setOrder] = React.useState(() => columns.map((c) => c.id));
+  const [widths, setWidths] = React.useState<Record<string, number>>(() =>
+    Object.fromEntries(columns.map((c) => [c.id, c.width ?? DEFAULT_WIDTH])),
+  );
+  const [sort, setSort] = React.useState<SortState>(null);
+  const [editing, setEditing] = React.useState<{ rowIndex: number; columnId: string } | null>(null);
+  const dragIdRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    const knownIds = columns.map((c) => c.id);
+    const known = new Set(knownIds);
+    setOrder((prev) => {
+      const kept = prev.filter((id) => known.has(id));
+      const added = knownIds.filter((id) => !kept.includes(id));
+      return [...kept, ...added];
+    });
+    setWidths((prev) => {
+      const next = { ...prev };
+      for (const c of columns) if (!(c.id in next)) next[c.id] = c.width ?? DEFAULT_WIDTH;
+      return next;
+    });
+  }, [columns]);
+
+  const leftPinned = columns.filter((c) => c.pinned === "left");
+  const rightPinned = columns.filter((c) => c.pinned === "right");
+  const unpinnedOrdered = order
+    .filter((id) => columnById.get(id) && !columnById.get(id)!.pinned)
+    .map((id) => columnById.get(id)!);
+  const renderedColumns = [...leftPinned, ...unpinnedOrdered, ...rightPinned];
+
+  const leftOffsets = React.useMemo(() => {
+    const offsets: Record<string, number> = {};
+    let acc = 0;
+    for (const c of leftPinned) {
+      offsets[c.id] = acc;
+      acc += widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    }
+    return offsets;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, widths]);
+
+  const rightOffsets = React.useMemo(() => {
+    const offsets: Record<string, number> = {};
+    let acc = 0;
+    for (const c of [...rightPinned].reverse()) {
+      offsets[c.id] = acc;
+      acc += widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    }
+    return offsets;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, widths]);
+
+  const totalWidth = renderedColumns.reduce((sum, c) => sum + (widths[c.id] ?? c.width ?? DEFAULT_WIDTH), 0);
+
+  const sortedData = React.useMemo(() => {
+    if (!sort) return data;
+    const col = columnById.get(sort.columnId);
+    if (!col?.value) return data;
+    const indexed = data.map((row, index) => ({ row, index }));
+    indexed.sort((a, b) => {
+      const av = col.value!(a.row);
+      const bv = col.value!(b.row);
+      if (av === bv) return a.index - b.index;
+      const cmp = av < bv ? -1 : 1;
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+    return indexed.map((entry) => entry.row);
+  }, [data, sort, columnById]);
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [viewportHeight, setViewportHeight] = React.useState(typeof height === "number" ? height : 0);
+
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const totalHeight = sortedData.length * rowHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const visibleCount = Math.ceil(viewportHeight / rowHeight) + overscan * 2;
+  const endIndex = Math.min(sortedData.length, startIndex + Math.max(visibleCount, 0));
+  const visibleRows = sortedData.slice(startIndex, endIndex);
+
+  function toggleSort(columnId: string) {
+    setSort((prev) => {
+      if (!prev || prev.columnId !== columnId) return { columnId, direction: "asc" };
+      if (prev.direction === "asc") return { columnId, direction: "desc" };
+      return null;
+    });
+  }
+
+  function beginResize(columnId: string, minWidth: number, startX: number, startWidth: number) {
+    const handleMove = (ev: PointerEvent) => {
+      setWidths((prev) => ({ ...prev, [columnId]: Math.max(minWidth, startWidth + (ev.clientX - startX)) }));
+    };
+    const handleUp = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+  }
+
+  function commitEdit(column: DataGridColumn<TData>, row: TData, rowIndex: number, value: string) {
+    column.onCellEdit?.(row, rowIndex, value);
+    setEditing(null);
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      role="grid"
+      className={cn("relative overflow-auto rounded-md border font-sans text-sm", className)}
+      style={{ height }}
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+    >
+      <div style={{ width: totalWidth, minWidth: "100%" }}>
+        <div role="row" className="sticky top-0 z-[2] flex border-b bg-background">
+          {renderedColumns.map((column) => {
+            const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+            const pinnedStyle: React.CSSProperties =
+              column.pinned === "left"
+                ? { position: "sticky", left: leftOffsets[column.id], zIndex: 3 }
+                : column.pinned === "right"
+                  ? { position: "sticky", right: rightOffsets[column.id], zIndex: 3 }
+                  : {};
+            const isSorted = sort?.columnId === column.id;
+            return (
+              <div
+                key={column.id}
+                role="columnheader"
+                {...(column.sortable
+                  ? { "aria-sort": isSorted ? (sort!.direction === "asc" ? "ascending" : "descending") : "none" }
+                  : {})}
+                draggable={!column.pinned}
+                onDragStart={() => {
+                  dragIdRef.current = column.id;
+                }}
+                onDragOver={(e) => {
+                  if (!column.pinned) e.preventDefault();
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  const draggedId = dragIdRef.current;
+                  dragIdRef.current = null;
+                  if (!draggedId || draggedId === column.id) return;
+                  setOrder((prev) => {
+                    const next = prev.filter((id) => id !== draggedId);
+                    const targetIndex = next.indexOf(column.id);
+                    next.splice(targetIndex, 0, draggedId);
+                    return next;
+                  });
+                }}
+                onClick={() => column.sortable && toggleSort(column.id)}
+                className={cn(
+                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
+                  column.sortable && "cursor-pointer hover:text-foreground",
+                  column.pinned && "bg-background",
+                )}
+                style={{ width, ...pinnedStyle }}
+              >
+                <span className="truncate">{column.header}</span>
+                {column.sortable && isSorted && (
+                  <span aria-hidden="true" className="text-xs">
+                    {sort!.direction === "asc" ? "▲" : "▼"}
+                  </span>
+                )}
+                <div
+                  onPointerDown={(e) => {
+                    e.stopPropagation();
+                    beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
+                  }}
+                  className="absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-primary/50"
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div style={{ height: totalHeight, position: "relative" }}>
+          {visibleRows.map((row, i) => {
+            const rowIndex = startIndex + i;
+            return (
+              <div
+                key={getRowId ? getRowId(row, rowIndex) : rowIndex}
+                role="row"
+                className="absolute flex w-full border-b hover:bg-muted/50"
+                style={{ top: rowIndex * rowHeight, height: rowHeight }}
+              >
+                {renderedColumns.map((column) => {
+                  const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+                  const pinnedStyle: React.CSSProperties =
+                    column.pinned === "left"
+                      ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 }
+                      : column.pinned === "right"
+                        ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 }
+                        : {};
+                  const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  return (
+                    <div
+                      key={column.id}
+                      role="gridcell"
+                      onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
+                      className={cn("flex shrink-0 items-center px-2", column.pinned && "bg-background")}
+                      style={{ width, ...pinnedStyle }}
+                    >
+                      {isEditing ? (
+                        <input
+                          autoFocus
+                          defaultValue={column.value ? String(column.value(row)) : ""}
+                          className="h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring"
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value);
+                            else if (e.key === "Escape") setEditing(null);
+                          }}
+                          onBlur={(e) => commitEdit(column, row, rowIndex, e.currentTarget.value)}
+                        />
+                      ) : (
+                        <span className="truncate">{column.cell(row, rowIndex)}</span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { DataGrid };

package/src/components/diff-viewer.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface DiffViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  oldText: string;
+  newText: string;
+  /** "unified" (one interleaved column, like `git diff`) or "split" (two columns, side by side). Default "unified". */
+  mode?: "unified" | "split";
+  /** column headers, `mode="split"` only */
+  oldLabel?: string;
+  newLabel?: string;
+}
+
+type DiffOp =
+  | { type: "equal"; oldLine: number; newLine: number; text: string }
+  | { type: "remove"; oldLine: number; text: string }
+  | { type: "add"; newLine: number; text: string };
+
+/**
+ * Line-based LCS diff (the same longest-common-subsequence backtrack
+ * `git diff`'s line mode is built on), hand-rolled rather than pulled from
+ * a package: it needs to behave identically across all four platforms, and
+ * a ~30-line DP table is easier to keep in lockstep across React/Compose/
+ * SwiftUI/Flutter than four bindings to (or ports of) someone else's diff
+ * library. O(n·m) time and space — fine for a config file or a token
+ * snapshot, the sizes this dev-tool surface actually sees; not meant for
+ * multi-thousand-line files.
+ */
+function computeLineDiff(oldText: string, newText: string): DiffOp[] {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const n = oldLines.length;
+  const m = newLines.length;
+
+  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i]![j] = oldLines[i] === newLines[j] ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!);
+    }
+  }
+
+  const ops: DiffOp[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (oldLines[i] === newLines[j]) {
+      ops.push({ type: "equal", oldLine: i + 1, newLine: j + 1, text: oldLines[i]! });
+      i++;
+      j++;
+    } else if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {
+      ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i]! });
+      i++;
+    } else {
+      ops.push({ type: "add", newLine: j + 1, text: newLines[j]! });
+      j++;
+    }
+  }
+  while (i < n) {
+    ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i]! });
+    i++;
+  }
+  while (j < m) {
+    ops.push({ type: "add", newLine: j + 1, text: newLines[j]! });
+    j++;
+  }
+  return ops;
+}
+
+/**
+ * DiffViewer — a side-by-side / inline text diff with line markers and
+ * gutter line numbers (token diffs, config changes — the site itself could
+ * use this for a "what changed between versions" view). `split` mode
+ * doesn't pair adjacent remove/add runs onto the same row the way GitHub's
+ * split view does — each op renders in its own column, blank on the other
+ * side — a deliberate simplification over that extra alignment heuristic.
+ * Gap-fill addition (not in the original Figma source).
+ */
+const DiffViewer = React.forwardRef<HTMLDivElement, DiffViewerProps>(
+  ({ oldText, newText, mode = "unified", oldLabel = "Before", newLabel = "After", className, ...props }, ref) => {
+    const ops = React.useMemo(() => computeLineDiff(oldText, newText), [oldText, newText]);
+
+    return (
+      <div ref={ref} className={cn("overflow-auto rounded-md border font-mono text-xs", className)} {...props}>
+        {mode === "split" ? (
+          <SplitDiff ops={ops} oldLabel={oldLabel} newLabel={newLabel} />
+        ) : (
+          <UnifiedDiff ops={ops} />
+        )}
+      </div>
+    );
+  },
+);
+DiffViewer.displayName = "DiffViewer";
+
+function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
+  return (
+    <div role="table">
+      {ops.map((op, i) => (
+        <div
+          key={i}
+          role="row"
+          className={cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10")}
+        >
+          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+            {op.type !== "add" ? op.oldLine : ""}
+          </span>
+          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+            {op.type !== "remove" ? op.newLine : ""}
+          </span>
+          <span
+            className={cn(
+              "w-4 shrink-0 select-none text-center",
+              op.type === "add" && "text-success",
+              op.type === "remove" && "text-destructive",
+            )}
+          >
+            {op.type === "add" ? "+" : op.type === "remove" ? "−" : ""}
+          </span>
+          <span className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SplitDiff({ ops, oldLabel, newLabel }: { ops: DiffOp[]; oldLabel: string; newLabel: string }) {
+  return (
+    <div role="table">
+      <div className="flex border-b bg-muted/40 text-muted-foreground">
+        <div className="flex-1 px-2 py-1">{oldLabel}</div>
+        <div className="flex-1 border-l px-2 py-1">{newLabel}</div>
+      </div>
+      {ops.map((op, i) => (
+        <div key={i} role="row" className="flex">
+          <div className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
+            <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
+              {op.type !== "add" ? op.oldLine : ""}
+            </span>
+            <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "add" ? op.text : ""}</span>
+          </div>
+          <div className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
+            <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
+              {op.type !== "remove" ? op.newLine : ""}
+            </span>
+            <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "remove" ? op.text : ""}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { DiffViewer };

package/src/components/json-viewer.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronRight, Copy } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface JsonViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  data: unknown;
+  /** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
+  expandDepth?: number;
+  hideCopy?: boolean;
+}
+
+/**
+ * JsonViewer — a collapsible, syntax-colored tree for arbitrary JSON data
+ * (API responses, registry payloads, token diffs — a dev-tool surface the
+ * site itself needs for `/docs/kinetixui-json` and friends). Distinct from
+ * `TreeView`: this renders a *data structure* (object/array/primitive),
+ * not a caller-composed hierarchy of `TreeItem`s, so expand state is
+ * per-node uncontrolled rather than a lifted `expanded` prop — there's no
+ * stable "value" to key a node by beyond its position in the data, and
+ * nothing external needs to drive which nodes are open. Value colors reuse
+ * the existing semantic tokens (`--success`/`--info`/`--warning`) rather
+ * than introducing a separate syntax-highlighting palette. Gap-fill
+ * addition (not in the original Figma source).
+ */
+const JsonViewer = React.forwardRef<HTMLDivElement, JsonViewerProps>(
+  ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      } catch {
+        // clipboard unavailable — no-op
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("relative overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs", className)}
+        {...props}
+      >
+        {!hideCopy && (
+          <button
+            type="button"
+            onClick={copy}
+            aria-label="Copy JSON"
+            className="absolute right-2 top-2 inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+          </button>
+        )}
+        <div role="tree">
+          <JsonNode value={data} depth={0} expandDepth={expandDepth} isLast />
+        </div>
+      </div>
+    );
+  },
+);
+JsonViewer.displayName = "JsonViewer";
+
+function JsonNode({
+  name,
+  value,
+  depth,
+  expandDepth,
+  isLast,
+}: {
+  name?: string;
+  value: unknown;
+  depth: number;
+  expandDepth: number;
+  isLast: boolean;
+}) {
+  const isContainer = value !== null && typeof value === "object";
+  const [expanded, setExpanded] = React.useState(depth < expandDepth);
+
+  if (!isContainer) {
+    return (
+      <div role="treeitem" style={{ paddingLeft: depth * 16 }}>
+        {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+        <JsonPrimitive value={value} />
+        {!isLast && <span className="text-muted-foreground">,</span>}
+      </div>
+    );
+  }
+
+  const isArray = Array.isArray(value);
+  const entries: [string, unknown][] = isArray
+    ? (value as unknown[]).map((v, i) => [String(i), v])
+    : Object.entries(value as Record<string, unknown>);
+  const openBracket = isArray ? "[" : "{";
+  const closeBracket = isArray ? "]" : "}";
+
+  if (entries.length === 0) {
+    return (
+      <div role="treeitem" style={{ paddingLeft: depth * 16 + 20 }}>
+        {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+        <span>
+          {openBracket}
+          {closeBracket}
+        </span>
+        {!isLast && <span className="text-muted-foreground">,</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div role="treeitem" aria-expanded={expanded}>
+      <div style={{ paddingLeft: depth * 16 }} className="flex items-start gap-1">
+        <button
+          type="button"
+          onClick={() => setExpanded((e) => !e)}
+          aria-label={expanded ? "Collapse" : "Expand"}
+          className="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
+        >
+          <ChevronRight className={cn("size-3 transition-transform", expanded && "rotate-90")} />
+        </button>
+        <span>
+          {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+          <span>{openBracket}</span>
+          {!expanded && (
+            <span className="text-muted-foreground">
+              {" "}
+              {entries.length} {isArray ? "item" : "key"}
+              {entries.length === 1 ? "" : "s"}{" "}
+            </span>
+          )}
+          {!expanded && <span>{closeBracket}</span>}
+          {!expanded && !isLast && <span className="text-muted-foreground">,</span>}
+        </span>
+      </div>
+      {expanded && (
+        <>
+          {entries.map(([key, val], i) => (
+            <JsonNode
+              key={key}
+              name={isArray ? undefined : key}
+              value={val}
+              depth={depth + 1}
+              expandDepth={expandDepth}
+              isLast={i === entries.length - 1}
+            />
+          ))}
+          <div style={{ paddingLeft: depth * 16 }}>
+            <span>{closeBracket}</span>
+            {!isLast && <span className="text-muted-foreground">,</span>}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function JsonPrimitive({ value }: { value: unknown }) {
+  if (value === null) return <span className="italic text-muted-foreground">null</span>;
+  if (value === undefined) return <span className="italic text-muted-foreground">undefined</span>;
+  if (typeof value === "string") return <span className="text-success">{JSON.stringify(value)}</span>;
+  if (typeof value === "number") return <span className="text-info">{value}</span>;
+  if (typeof value === "boolean") return <span className="text-warning">{String(value)}</span>;
+  return <span>{String(value)}</span>;
+}
+
+export { JsonViewer };