@zentauri-ui/zentauri-components 2.1.8 → 2.1.9

package/dist/ui/code-diff.js

@@ -0,0 +1,302 @@
+"use client";
+'use strict';
+
+var chunkPAISX7YL_js = require('../chunk-PAISX7YL.js');
+var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+require('../chunk-PZ5AY32C.js');
+var diff = require('diff');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var codeDiffVariants = classVarianceAuthority.cva(chunkPAISX7YL_js.zuiCodeDiffBase, {
+  variants: {
+    appearance: chunkPAISX7YL_js.zuiCodeDiffAppearances,
+    size: chunkPAISX7YL_js.zuiCodeDiffSizes
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md"
+  }
+});
+var codeDiffLineNumberVariants = classVarianceAuthority.cva(chunkPAISX7YL_js.zuiCodeDiffLineNumberBase, {
+  variants: {
+    type: {
+      added: chunkPAISX7YL_js.zuiCodeDiffLineAdded,
+      removed: chunkPAISX7YL_js.zuiCodeDiffLineRemoved,
+      unchanged: chunkPAISX7YL_js.zuiCodeDiffLineUnchanged
+    }
+  },
+  defaultVariants: {
+    type: "unchanged"
+  }
+});
+var codeDiffLineContentVariants = classVarianceAuthority.cva(chunkPAISX7YL_js.zuiCodeDiffLineContentBase, {
+  variants: {
+    type: {
+      added: chunkPAISX7YL_js.zuiCodeDiffLineAdded,
+      removed: chunkPAISX7YL_js.zuiCodeDiffLineRemoved,
+      unchanged: chunkPAISX7YL_js.zuiCodeDiffLineUnchanged
+    }
+  },
+  defaultVariants: {
+    type: "unchanged"
+  }
+});
+function computeDiff(oldCode, newCode) {
+  const changes = diff.diffLines(oldCode, newCode);
+  const lines = [];
+  let oldLineNum = 1;
+  let newLineNum = 1;
+  for (const change of changes) {
+    const changeLines = change.value.replace(/\n$/, "").split("\n");
+    for (const content of changeLines) {
+      if (change.added) {
+        lines.push({
+          type: "added",
+          content,
+          oldLineNumber: null,
+          newLineNumber: newLineNum++
+        });
+      } else if (change.removed) {
+        lines.push({
+          type: "removed",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: null
+        });
+      } else {
+        lines.push({
+          type: "unchanged",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: newLineNum++
+        });
+      }
+    }
+  }
+  return lines;
+}
+function toSplitRows(lines) {
+  const rows = [];
+  let i = 0;
+  while (i < lines.length) {
+    const current = lines[i];
+    if (current.type === "unchanged") {
+      rows.push({ oldLine: current, newLine: current });
+      i++;
+    } else if (current.type === "removed") {
+      const removedBlock = [];
+      while (i < lines.length && lines[i].type === "removed") {
+        removedBlock.push(lines[i]);
+        i++;
+      }
+      const addedBlock = [];
+      while (i < lines.length && lines[i].type === "added") {
+        addedBlock.push(lines[i]);
+        i++;
+      }
+      const maxLen = Math.max(removedBlock.length, addedBlock.length);
+      for (let j = 0; j < maxLen; j++) {
+        rows.push({
+          oldLine: j < removedBlock.length ? removedBlock[j] : null,
+          newLine: j < addedBlock.length ? addedBlock[j] : null
+        });
+      }
+    } else if (current.type === "added") {
+      const addedBlock = [];
+      while (i < lines.length && lines[i].type === "added") {
+        addedBlock.push(lines[i]);
+        i++;
+      }
+      for (const added of addedBlock) {
+        rows.push({ oldLine: null, newLine: added });
+      }
+    } else {
+      i++;
+    }
+  }
+  return rows;
+}
+function LineNumberCell({
+  lineNumber,
+  type,
+  showLineNumbers
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: codeDiffLineNumberVariants({ type }),
+      style: { width: showLineNumbers ? "4.5rem" : "2rem" },
+      children: showLineNumbers && lineNumber !== null ? lineNumber : ""
+    }
+  );
+}
+function LineContentCell({
+  line,
+  type,
+  showGutterMarkers
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("td", { className: codeDiffLineContentVariants({ type }), children: [
+    showGutterMarkers ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-4 select-none text-center", children: type === "added" ? "+" : type === "removed" ? "-" : " " }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: line || " " })
+  ] });
+}
+function UnifiedView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full border-collapse table-fixed", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: lines.map((line, idx) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LineNumberCell,
+      {
+        lineNumber: line.oldLineNumber,
+        type: line.type,
+        showLineNumbers
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LineNumberCell,
+      {
+        lineNumber: line.newLineNumber,
+        type: line.type,
+        showLineNumbers
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LineContentCell,
+      {
+        line: line.content,
+        type: line.type,
+        showGutterMarkers
+      }
+    )
+  ] }, idx)) }) });
+}
+function SplitView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers
+}) {
+  const rows = toSplitRows(lines);
+  return /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse table-fixed", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: showLineNumbers ? "4.5rem" : "2rem" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("col", {}),
+      /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: showLineNumbers ? "4.5rem" : "2rem" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("col", {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LineNumberCell,
+        {
+          lineNumber: row.oldLine?.oldLineNumber ?? null,
+          type: row.oldLine?.type ?? "unchanged",
+          showLineNumbers
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LineContentCell,
+        {
+          line: row.oldLine?.content ?? "",
+          type: row.oldLine?.type ?? "unchanged",
+          showGutterMarkers
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LineNumberCell,
+        {
+          lineNumber: row.newLine?.newLineNumber ?? null,
+          type: row.newLine?.type ?? "unchanged",
+          showLineNumbers
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LineContentCell,
+        {
+          line: row.newLine?.content ?? "",
+          type: row.newLine?.type ?? "unchanged",
+          showGutterMarkers
+        }
+      )
+    ] }, idx)) })
+  ] });
+}
+function CodeDiffBase({
+  className,
+  appearance,
+  size,
+  oldCode,
+  newCode,
+  viewType = "unified",
+  showLineNumbers = true,
+  showGutterMarkers = true,
+  oldTitle = "Old",
+  newTitle = "New",
+  ref,
+  as: Wrapper = "div",
+  ...rest
+}) {
+  const lines = react.useMemo(
+    () => computeDiff(oldCode ?? "", newCode ?? ""),
+    [oldCode, newCode]
+  );
+  const hasChanges = lines.some(
+    (l) => l.type === "added" || l.type === "removed"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "code-diff",
+      className: chunkZS5756ZC_js.cn(codeDiffVariants({ appearance, size }), className),
+      ...rest,
+      children: [
+        hasChanges ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium", children: [
+            lines.filter((l) => l.type === "added").length,
+            " additions",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1", children: "\u2022" }),
+            " ",
+            lines.filter((l) => l.type === "removed").length,
+            " deletions"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-[color:var(--zui-code-diff-header-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-header-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]", children: [
+            oldTitle,
+            " \u2192 ",
+            newTitle
+          ] })
+        ] }) : null,
+        viewType === "split" ? /* @__PURE__ */ jsxRuntime.jsx(
+          SplitView,
+          {
+            lines,
+            showLineNumbers,
+            showGutterMarkers
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          UnifiedView,
+          {
+            lines,
+            showLineNumbers,
+            showGutterMarkers
+          }
+        )
+      ]
+    }
+  );
+}
+CodeDiffBase.displayName = "CodeDiff";
+function CodeDiff(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CodeDiffBase, { ...props });
+}
+CodeDiff.displayName = "CodeDiff";
+
+exports.CodeDiff = CodeDiff;
+exports.codeDiffLineContentVariants = codeDiffLineContentVariants;
+exports.codeDiffLineNumberVariants = codeDiffLineNumberVariants;
+exports.codeDiffVariants = codeDiffVariants;
+//# sourceMappingURL=code-diff.js.map
+//# sourceMappingURL=code-diff.js.map

package/dist/ui/code-diff.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/code-diff/variants.ts","../../src/ui/code-diff/code-diff-base.tsx","../../src/ui/code-diff/code-diff.tsx"],"names":["cva","zuiCodeDiffBase","zuiCodeDiffAppearances","zuiCodeDiffSizes","zuiCodeDiffLineNumberBase","zuiCodeDiffLineAdded","zuiCodeDiffLineRemoved","zuiCodeDiffLineUnchanged","zuiCodeDiffLineContentBase","diffLines","jsx","jsxs","useMemo","cn"],"mappings":"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","file":"code-diff.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiCodeDiffAppearances,\n  zuiCodeDiffBase,\n  zuiCodeDiffLineAdded,\n  zuiCodeDiffLineContentBase,\n  zuiCodeDiffLineNumberBase,\n  zuiCodeDiffLineRemoved,\n  zuiCodeDiffLineUnchanged,\n  zuiCodeDiffSizes,\n} from \"../../design-system/code-diff\";\n\nexport const codeDiffVariants = cva(zuiCodeDiffBase, {\n  variants: {\n    appearance: zuiCodeDiffAppearances,\n    size: zuiCodeDiffSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const codeDiffLineNumberVariants = cva(zuiCodeDiffLineNumberBase, {\n  variants: {\n    type: {\n      added: zuiCodeDiffLineAdded,\n      removed: zuiCodeDiffLineRemoved,\n      unchanged: zuiCodeDiffLineUnchanged,\n    },\n  },\n  defaultVariants: {\n    type: \"unchanged\",\n  },\n});\n\nexport const codeDiffLineContentVariants = cva(zuiCodeDiffLineContentBase, {\n  variants: {\n    type: {\n      added: zuiCodeDiffLineAdded,\n      removed: zuiCodeDiffLineRemoved,\n      unchanged: zuiCodeDiffLineUnchanged,\n    },\n  },\n  defaultVariants: {\n    type: \"unchanged\",\n  },\n});\n","\"use client\";\n\nimport { diffLines } from \"diff\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { CodeDiffBaseProps, DiffLine } from \"./types\";\nimport {\n  codeDiffLineContentVariants,\n  codeDiffLineNumberVariants,\n  codeDiffVariants,\n} from \"./variants\";\n\nfunction computeDiff(oldCode: string, newCode: string): DiffLine[] {\n  const changes = diffLines(oldCode, newCode);\n  const lines: DiffLine[] = [];\n  let oldLineNum = 1;\n  let newLineNum = 1;\n\n  for (const change of changes) {\n    const changeLines = change.value.replace(/\\n$/, \"\").split(\"\\n\");\n    for (const content of changeLines) {\n      if (change.added) {\n        lines.push({\n          type: \"added\",\n          content,\n          oldLineNumber: null,\n          newLineNumber: newLineNum++,\n        });\n      } else if (change.removed) {\n        lines.push({\n          type: \"removed\",\n          content,\n          oldLineNumber: oldLineNum++,\n          newLineNumber: null,\n        });\n      } else {\n        lines.push({\n          type: \"unchanged\",\n          content,\n          oldLineNumber: oldLineNum++,\n          newLineNumber: newLineNum++,\n        });\n      }\n    }\n  }\n  return lines;\n}\n\ninterface SplitRow {\n  oldLine: DiffLine | null;\n  newLine: DiffLine | null;\n}\n\nfunction toSplitRows(lines: DiffLine[]): SplitRow[] {\n  const rows: SplitRow[] = [];\n  let i = 0;\n\n  while (i < lines.length) {\n    const current = lines[i]!;\n\n    if (current.type === \"unchanged\") {\n      rows.push({ oldLine: current, newLine: current });\n      i++;\n    } else if (current.type === \"removed\") {\n      const removedBlock: DiffLine[] = [];\n      while (i < lines.length && lines[i]!.type === \"removed\") {\n        removedBlock.push(lines[i]!);\n        i++;\n      }\n      const addedBlock: DiffLine[] = [];\n      while (i < lines.length && lines[i]!.type === \"added\") {\n        addedBlock.push(lines[i]!);\n        i++;\n      }\n      const maxLen = Math.max(removedBlock.length, addedBlock.length);\n      for (let j = 0; j < maxLen; j++) {\n        rows.push({\n          oldLine: j < removedBlock.length ? removedBlock[j]! : null,\n          newLine: j < addedBlock.length ? addedBlock[j]! : null,\n        });\n      }\n    } else if (current.type === \"added\") {\n      const addedBlock: DiffLine[] = [];\n      while (i < lines.length && lines[i]!.type === \"added\") {\n        addedBlock.push(lines[i]!);\n        i++;\n      }\n      for (const added of addedBlock) {\n        rows.push({ oldLine: null, newLine: added });\n      }\n    } else {\n      i++;\n    }\n  }\n  return rows;\n}\n\nfunction LineNumberCell({\n  lineNumber,\n  type,\n  showLineNumbers,\n}: {\n  lineNumber: number | null;\n  type: DiffLine[\"type\"];\n  showLineNumbers: boolean;\n}) {\n  return (\n    <td\n      className={codeDiffLineNumberVariants({ type })}\n      style={{ width: showLineNumbers ? \"4.5rem\" : \"2rem\" }}\n    >\n      {showLineNumbers && lineNumber !== null ? lineNumber : \"\"}\n    </td>\n  );\n}\n\nfunction LineContentCell({\n  line,\n  type,\n  showGutterMarkers,\n}: {\n  line: string;\n  type: DiffLine[\"type\"];\n  showGutterMarkers: boolean;\n}) {\n  return (\n    <td className={codeDiffLineContentVariants({ type })}>\n      {showGutterMarkers ? (\n        <span className=\"inline-block w-4 select-none text-center\">\n          {type === \"added\" ? \"+\" : type === \"removed\" ? \"-\" : \" \"}\n        </span>\n      ) : null}\n      <span>{line || \" \"}</span>\n    </td>\n  );\n}\n\nfunction UnifiedView({\n  lines,\n  showLineNumbers,\n  showGutterMarkers,\n}: {\n  lines: DiffLine[];\n  showLineNumbers: boolean;\n  showGutterMarkers: boolean;\n}) {\n  return (\n    <table className=\"w-full border-collapse table-fixed\">\n      <tbody>\n        {lines.map((line, idx) => (\n          <tr key={idx}>\n            <LineNumberCell\n              lineNumber={line.oldLineNumber}\n              type={line.type}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineNumberCell\n              lineNumber={line.newLineNumber}\n              type={line.type}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineContentCell\n              line={line.content}\n              type={line.type}\n              showGutterMarkers={showGutterMarkers}\n            />\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\nfunction SplitView({\n  lines,\n  showLineNumbers,\n  showGutterMarkers,\n}: {\n  lines: DiffLine[];\n  showLineNumbers: boolean;\n  showGutterMarkers: boolean;\n}) {\n  const rows = toSplitRows(lines);\n\n  return (\n    <table className=\"w-full border-collapse table-fixed\">\n      <colgroup>\n        <col style={{ width: showLineNumbers ? \"4.5rem\" : \"2rem\" }} />\n        <col />\n        <col style={{ width: showLineNumbers ? \"4.5rem\" : \"2rem\" }} />\n        <col />\n      </colgroup>\n      <tbody>\n        {rows.map((row, idx) => (\n          <tr key={idx}>\n            <LineNumberCell\n              lineNumber={row.oldLine?.oldLineNumber ?? null}\n              type={row.oldLine?.type ?? \"unchanged\"}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineContentCell\n              line={row.oldLine?.content ?? \"\"}\n              type={row.oldLine?.type ?? \"unchanged\"}\n              showGutterMarkers={showGutterMarkers}\n            />\n            <LineNumberCell\n              lineNumber={row.newLine?.newLineNumber ?? null}\n              type={row.newLine?.type ?? \"unchanged\"}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineContentCell\n              line={row.newLine?.content ?? \"\"}\n              type={row.newLine?.type ?? \"unchanged\"}\n              showGutterMarkers={showGutterMarkers}\n            />\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\nexport function CodeDiffBase({\n  className,\n  appearance,\n  size,\n  oldCode,\n  newCode,\n  viewType = \"unified\",\n  showLineNumbers = true,\n  showGutterMarkers = true,\n  oldTitle = \"Old\",\n  newTitle = \"New\",\n  ref,\n  as: Wrapper = \"div\",\n  ...rest\n}: CodeDiffBaseProps) {\n  const lines = useMemo(\n    () => computeDiff(oldCode ?? \"\", newCode ?? \"\"),\n    [oldCode, newCode],\n  );\n  const hasChanges = lines.some(\n    (l) => l.type === \"added\" || l.type === \"removed\",\n  );\n\n  return (\n    <Wrapper\n      ref={ref}\n      data-slot=\"code-diff\"\n      className={cn(codeDiffVariants({ appearance, size }), className)}\n      {...rest}\n    >\n      {hasChanges ? (\n        <div className=\"sticky top-0 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2\">\n          <span className=\"text-xs font-medium\">\n            {lines.filter((l) => l.type === \"added\").length} additions{\" \"}\n            <span className=\"mx-1\">&bull;</span>{\" \"}\n            {lines.filter((l) => l.type === \"removed\").length} deletions\n          </span>\n          <span className=\"text-xs text-[color:var(--zui-code-diff-header-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-header-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]\">\n            {oldTitle} &rarr; {newTitle}\n          </span>\n        </div>\n      ) : null}\n      {viewType === \"split\" ? (\n        <SplitView\n          lines={lines}\n          showLineNumbers={showLineNumbers}\n          showGutterMarkers={showGutterMarkers}\n        />\n      ) : (\n        <UnifiedView\n          lines={lines}\n          showLineNumbers={showLineNumbers}\n          showGutterMarkers={showGutterMarkers}\n        />\n      )}\n    </Wrapper>\n  );\n}\n\nCodeDiffBase.displayName = \"CodeDiff\";\n","import { CodeDiffBase } from \"./code-diff-base\";\nimport type { CodeDiffProps } from \"./types\";\n\nexport function CodeDiff(props: CodeDiffProps) {\n  return <CodeDiffBase {...props} />;\n}\n\nCodeDiff.displayName = \"CodeDiff\";\n"]}

package/dist/ui/code-diff.mjs

@@ -0,0 +1,297 @@
+"use client";
+import { zuiCodeDiffBase, zuiCodeDiffSizes, zuiCodeDiffAppearances, zuiCodeDiffLineNumberBase, zuiCodeDiffLineUnchanged, zuiCodeDiffLineRemoved, zuiCodeDiffLineAdded, zuiCodeDiffLineContentBase } from '../chunk-GP3FUS2H.mjs';
+import { cn } from '../chunk-4D54YOL6.mjs';
+import '../chunk-J5LGTIGS.mjs';
+import { diffLines } from 'diff';
+import { useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var codeDiffVariants = cva(zuiCodeDiffBase, {
+  variants: {
+    appearance: zuiCodeDiffAppearances,
+    size: zuiCodeDiffSizes
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md"
+  }
+});
+var codeDiffLineNumberVariants = cva(zuiCodeDiffLineNumberBase, {
+  variants: {
+    type: {
+      added: zuiCodeDiffLineAdded,
+      removed: zuiCodeDiffLineRemoved,
+      unchanged: zuiCodeDiffLineUnchanged
+    }
+  },
+  defaultVariants: {
+    type: "unchanged"
+  }
+});
+var codeDiffLineContentVariants = cva(zuiCodeDiffLineContentBase, {
+  variants: {
+    type: {
+      added: zuiCodeDiffLineAdded,
+      removed: zuiCodeDiffLineRemoved,
+      unchanged: zuiCodeDiffLineUnchanged
+    }
+  },
+  defaultVariants: {
+    type: "unchanged"
+  }
+});
+function computeDiff(oldCode, newCode) {
+  const changes = diffLines(oldCode, newCode);
+  const lines = [];
+  let oldLineNum = 1;
+  let newLineNum = 1;
+  for (const change of changes) {
+    const changeLines = change.value.replace(/\n$/, "").split("\n");
+    for (const content of changeLines) {
+      if (change.added) {
+        lines.push({
+          type: "added",
+          content,
+          oldLineNumber: null,
+          newLineNumber: newLineNum++
+        });
+      } else if (change.removed) {
+        lines.push({
+          type: "removed",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: null
+        });
+      } else {
+        lines.push({
+          type: "unchanged",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: newLineNum++
+        });
+      }
+    }
+  }
+  return lines;
+}
+function toSplitRows(lines) {
+  const rows = [];
+  let i = 0;
+  while (i < lines.length) {
+    const current = lines[i];
+    if (current.type === "unchanged") {
+      rows.push({ oldLine: current, newLine: current });
+      i++;
+    } else if (current.type === "removed") {
+      const removedBlock = [];
+      while (i < lines.length && lines[i].type === "removed") {
+        removedBlock.push(lines[i]);
+        i++;
+      }
+      const addedBlock = [];
+      while (i < lines.length && lines[i].type === "added") {
+        addedBlock.push(lines[i]);
+        i++;
+      }
+      const maxLen = Math.max(removedBlock.length, addedBlock.length);
+      for (let j = 0; j < maxLen; j++) {
+        rows.push({
+          oldLine: j < removedBlock.length ? removedBlock[j] : null,
+          newLine: j < addedBlock.length ? addedBlock[j] : null
+        });
+      }
+    } else if (current.type === "added") {
+      const addedBlock = [];
+      while (i < lines.length && lines[i].type === "added") {
+        addedBlock.push(lines[i]);
+        i++;
+      }
+      for (const added of addedBlock) {
+        rows.push({ oldLine: null, newLine: added });
+      }
+    } else {
+      i++;
+    }
+  }
+  return rows;
+}
+function LineNumberCell({
+  lineNumber,
+  type,
+  showLineNumbers
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: codeDiffLineNumberVariants({ type }),
+      style: { width: showLineNumbers ? "4.5rem" : "2rem" },
+      children: showLineNumbers && lineNumber !== null ? lineNumber : ""
+    }
+  );
+}
+function LineContentCell({
+  line,
+  type,
+  showGutterMarkers
+}) {
+  return /* @__PURE__ */ jsxs("td", { className: codeDiffLineContentVariants({ type }), children: [
+    showGutterMarkers ? /* @__PURE__ */ jsx("span", { className: "inline-block w-4 select-none text-center", children: type === "added" ? "+" : type === "removed" ? "-" : " " }) : null,
+    /* @__PURE__ */ jsx("span", { children: line || " " })
+  ] });
+}
+function UnifiedView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers
+}) {
+  return /* @__PURE__ */ jsx("table", { className: "w-full border-collapse table-fixed", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, idx) => /* @__PURE__ */ jsxs("tr", { children: [
+    /* @__PURE__ */ jsx(
+      LineNumberCell,
+      {
+        lineNumber: line.oldLineNumber,
+        type: line.type,
+        showLineNumbers
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LineNumberCell,
+      {
+        lineNumber: line.newLineNumber,
+        type: line.type,
+        showLineNumbers
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LineContentCell,
+      {
+        line: line.content,
+        type: line.type,
+        showGutterMarkers
+      }
+    )
+  ] }, idx)) }) });
+}
+function SplitView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers
+}) {
+  const rows = toSplitRows(lines);
+  return /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse table-fixed", children: [
+    /* @__PURE__ */ jsxs("colgroup", { children: [
+      /* @__PURE__ */ jsx("col", { style: { width: showLineNumbers ? "4.5rem" : "2rem" } }),
+      /* @__PURE__ */ jsx("col", {}),
+      /* @__PURE__ */ jsx("col", { style: { width: showLineNumbers ? "4.5rem" : "2rem" } }),
+      /* @__PURE__ */ jsx("col", {})
+    ] }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, idx) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx(
+        LineNumberCell,
+        {
+          lineNumber: row.oldLine?.oldLineNumber ?? null,
+          type: row.oldLine?.type ?? "unchanged",
+          showLineNumbers
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LineContentCell,
+        {
+          line: row.oldLine?.content ?? "",
+          type: row.oldLine?.type ?? "unchanged",
+          showGutterMarkers
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LineNumberCell,
+        {
+          lineNumber: row.newLine?.newLineNumber ?? null,
+          type: row.newLine?.type ?? "unchanged",
+          showLineNumbers
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LineContentCell,
+        {
+          line: row.newLine?.content ?? "",
+          type: row.newLine?.type ?? "unchanged",
+          showGutterMarkers
+        }
+      )
+    ] }, idx)) })
+  ] });
+}
+function CodeDiffBase({
+  className,
+  appearance,
+  size,
+  oldCode,
+  newCode,
+  viewType = "unified",
+  showLineNumbers = true,
+  showGutterMarkers = true,
+  oldTitle = "Old",
+  newTitle = "New",
+  ref,
+  as: Wrapper = "div",
+  ...rest
+}) {
+  const lines = useMemo(
+    () => computeDiff(oldCode ?? "", newCode ?? ""),
+    [oldCode, newCode]
+  );
+  const hasChanges = lines.some(
+    (l) => l.type === "added" || l.type === "removed"
+  );
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "code-diff",
+      className: cn(codeDiffVariants({ appearance, size }), className),
+      ...rest,
+      children: [
+        hasChanges ? /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", children: [
+            lines.filter((l) => l.type === "added").length,
+            " additions",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "mx-1", children: "\u2022" }),
+            " ",
+            lines.filter((l) => l.type === "removed").length,
+            " deletions"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-[color:var(--zui-code-diff-header-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-header-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]", children: [
+            oldTitle,
+            " \u2192 ",
+            newTitle
+          ] })
+        ] }) : null,
+        viewType === "split" ? /* @__PURE__ */ jsx(
+          SplitView,
+          {
+            lines,
+            showLineNumbers,
+            showGutterMarkers
+          }
+        ) : /* @__PURE__ */ jsx(
+          UnifiedView,
+          {
+            lines,
+            showLineNumbers,
+            showGutterMarkers
+          }
+        )
+      ]
+    }
+  );
+}
+CodeDiffBase.displayName = "CodeDiff";
+function CodeDiff(props) {
+  return /* @__PURE__ */ jsx(CodeDiffBase, { ...props });
+}
+CodeDiff.displayName = "CodeDiff";
+
+export { CodeDiff, codeDiffLineContentVariants, codeDiffLineNumberVariants, codeDiffVariants };
+//# sourceMappingURL=code-diff.mjs.map
+//# sourceMappingURL=code-diff.mjs.map

package/dist/ui/code-diff.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/code-diff/variants.ts","../../src/ui/code-diff/code-diff-base.tsx","../../src/ui/code-diff/code-diff.tsx"],"names":["jsx"],"mappings":"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","file":"code-diff.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiCodeDiffAppearances,\n  zuiCodeDiffBase,\n  zuiCodeDiffLineAdded,\n  zuiCodeDiffLineContentBase,\n  zuiCodeDiffLineNumberBase,\n  zuiCodeDiffLineRemoved,\n  zuiCodeDiffLineUnchanged,\n  zuiCodeDiffSizes,\n} from \"../../design-system/code-diff\";\n\nexport const codeDiffVariants = cva(zuiCodeDiffBase, {\n  variants: {\n    appearance: zuiCodeDiffAppearances,\n    size: zuiCodeDiffSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const codeDiffLineNumberVariants = cva(zuiCodeDiffLineNumberBase, {\n  variants: {\n    type: {\n      added: zuiCodeDiffLineAdded,\n      removed: zuiCodeDiffLineRemoved,\n      unchanged: zuiCodeDiffLineUnchanged,\n    },\n  },\n  defaultVariants: {\n    type: \"unchanged\",\n  },\n});\n\nexport const codeDiffLineContentVariants = cva(zuiCodeDiffLineContentBase, {\n  variants: {\n    type: {\n      added: zuiCodeDiffLineAdded,\n      removed: zuiCodeDiffLineRemoved,\n      unchanged: zuiCodeDiffLineUnchanged,\n    },\n  },\n  defaultVariants: {\n    type: \"unchanged\",\n  },\n});\n","\"use client\";\n\nimport { diffLines } from \"diff\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { CodeDiffBaseProps, DiffLine } from \"./types\";\nimport {\n  codeDiffLineContentVariants,\n  codeDiffLineNumberVariants,\n  codeDiffVariants,\n} from \"./variants\";\n\nfunction computeDiff(oldCode: string, newCode: string): DiffLine[] {\n  const changes = diffLines(oldCode, newCode);\n  const lines: DiffLine[] = [];\n  let oldLineNum = 1;\n  let newLineNum = 1;\n\n  for (const change of changes) {\n    const changeLines = change.value.replace(/\\n$/, \"\").split(\"\\n\");\n    for (const content of changeLines) {\n      if (change.added) {\n        lines.push({\n          type: \"added\",\n          content,\n          oldLineNumber: null,\n          newLineNumber: newLineNum++,\n        });\n      } else if (change.removed) {\n        lines.push({\n          type: \"removed\",\n          content,\n          oldLineNumber: oldLineNum++,\n          newLineNumber: null,\n        });\n      } else {\n        lines.push({\n          type: \"unchanged\",\n          content,\n          oldLineNumber: oldLineNum++,\n          newLineNumber: newLineNum++,\n        });\n      }\n    }\n  }\n  return lines;\n}\n\ninterface SplitRow {\n  oldLine: DiffLine | null;\n  newLine: DiffLine | null;\n}\n\nfunction toSplitRows(lines: DiffLine[]): SplitRow[] {\n  const rows: SplitRow[] = [];\n  let i = 0;\n\n  while (i < lines.length) {\n    const current = lines[i]!;\n\n    if (current.type === \"unchanged\") {\n      rows.push({ oldLine: current, newLine: current });\n      i++;\n    } else if (current.type === \"removed\") {\n      const removedBlock: DiffLine[] = [];\n      while (i < lines.length && lines[i]!.type === \"removed\") {\n        removedBlock.push(lines[i]!);\n        i++;\n      }\n      const addedBlock: DiffLine[] = [];\n      while (i < lines.length && lines[i]!.type === \"added\") {\n        addedBlock.push(lines[i]!);\n        i++;\n      }\n      const maxLen = Math.max(removedBlock.length, addedBlock.length);\n      for (let j = 0; j < maxLen; j++) {\n        rows.push({\n          oldLine: j < removedBlock.length ? removedBlock[j]! : null,\n          newLine: j < addedBlock.length ? addedBlock[j]! : null,\n        });\n      }\n    } else if (current.type === \"added\") {\n      const addedBlock: DiffLine[] = [];\n      while (i < lines.length && lines[i]!.type === \"added\") {\n        addedBlock.push(lines[i]!);\n        i++;\n      }\n      for (const added of addedBlock) {\n        rows.push({ oldLine: null, newLine: added });\n      }\n    } else {\n      i++;\n    }\n  }\n  return rows;\n}\n\nfunction LineNumberCell({\n  lineNumber,\n  type,\n  showLineNumbers,\n}: {\n  lineNumber: number | null;\n  type: DiffLine[\"type\"];\n  showLineNumbers: boolean;\n}) {\n  return (\n    <td\n      className={codeDiffLineNumberVariants({ type })}\n      style={{ width: showLineNumbers ? \"4.5rem\" : \"2rem\" }}\n    >\n      {showLineNumbers && lineNumber !== null ? lineNumber : \"\"}\n    </td>\n  );\n}\n\nfunction LineContentCell({\n  line,\n  type,\n  showGutterMarkers,\n}: {\n  line: string;\n  type: DiffLine[\"type\"];\n  showGutterMarkers: boolean;\n}) {\n  return (\n    <td className={codeDiffLineContentVariants({ type })}>\n      {showGutterMarkers ? (\n        <span className=\"inline-block w-4 select-none text-center\">\n          {type === \"added\" ? \"+\" : type === \"removed\" ? \"-\" : \" \"}\n        </span>\n      ) : null}\n      <span>{line || \" \"}</span>\n    </td>\n  );\n}\n\nfunction UnifiedView({\n  lines,\n  showLineNumbers,\n  showGutterMarkers,\n}: {\n  lines: DiffLine[];\n  showLineNumbers: boolean;\n  showGutterMarkers: boolean;\n}) {\n  return (\n    <table className=\"w-full border-collapse table-fixed\">\n      <tbody>\n        {lines.map((line, idx) => (\n          <tr key={idx}>\n            <LineNumberCell\n              lineNumber={line.oldLineNumber}\n              type={line.type}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineNumberCell\n              lineNumber={line.newLineNumber}\n              type={line.type}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineContentCell\n              line={line.content}\n              type={line.type}\n              showGutterMarkers={showGutterMarkers}\n            />\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\nfunction SplitView({\n  lines,\n  showLineNumbers,\n  showGutterMarkers,\n}: {\n  lines: DiffLine[];\n  showLineNumbers: boolean;\n  showGutterMarkers: boolean;\n}) {\n  const rows = toSplitRows(lines);\n\n  return (\n    <table className=\"w-full border-collapse table-fixed\">\n      <colgroup>\n        <col style={{ width: showLineNumbers ? \"4.5rem\" : \"2rem\" }} />\n        <col />\n        <col style={{ width: showLineNumbers ? \"4.5rem\" : \"2rem\" }} />\n        <col />\n      </colgroup>\n      <tbody>\n        {rows.map((row, idx) => (\n          <tr key={idx}>\n            <LineNumberCell\n              lineNumber={row.oldLine?.oldLineNumber ?? null}\n              type={row.oldLine?.type ?? \"unchanged\"}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineContentCell\n              line={row.oldLine?.content ?? \"\"}\n              type={row.oldLine?.type ?? \"unchanged\"}\n              showGutterMarkers={showGutterMarkers}\n            />\n            <LineNumberCell\n              lineNumber={row.newLine?.newLineNumber ?? null}\n              type={row.newLine?.type ?? \"unchanged\"}\n              showLineNumbers={showLineNumbers}\n            />\n            <LineContentCell\n              line={row.newLine?.content ?? \"\"}\n              type={row.newLine?.type ?? \"unchanged\"}\n              showGutterMarkers={showGutterMarkers}\n            />\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\nexport function CodeDiffBase({\n  className,\n  appearance,\n  size,\n  oldCode,\n  newCode,\n  viewType = \"unified\",\n  showLineNumbers = true,\n  showGutterMarkers = true,\n  oldTitle = \"Old\",\n  newTitle = \"New\",\n  ref,\n  as: Wrapper = \"div\",\n  ...rest\n}: CodeDiffBaseProps) {\n  const lines = useMemo(\n    () => computeDiff(oldCode ?? \"\", newCode ?? \"\"),\n    [oldCode, newCode],\n  );\n  const hasChanges = lines.some(\n    (l) => l.type === \"added\" || l.type === \"removed\",\n  );\n\n  return (\n    <Wrapper\n      ref={ref}\n      data-slot=\"code-diff\"\n      className={cn(codeDiffVariants({ appearance, size }), className)}\n      {...rest}\n    >\n      {hasChanges ? (\n        <div className=\"sticky top-0 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2\">\n          <span className=\"text-xs font-medium\">\n            {lines.filter((l) => l.type === \"added\").length} additions{\" \"}\n            <span className=\"mx-1\">&bull;</span>{\" \"}\n            {lines.filter((l) => l.type === \"removed\").length} deletions\n          </span>\n          <span className=\"text-xs text-[color:var(--zui-code-diff-header-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-header-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]\">\n            {oldTitle} &rarr; {newTitle}\n          </span>\n        </div>\n      ) : null}\n      {viewType === \"split\" ? (\n        <SplitView\n          lines={lines}\n          showLineNumbers={showLineNumbers}\n          showGutterMarkers={showGutterMarkers}\n        />\n      ) : (\n        <UnifiedView\n          lines={lines}\n          showLineNumbers={showLineNumbers}\n          showGutterMarkers={showGutterMarkers}\n        />\n      )}\n    </Wrapper>\n  );\n}\n\nCodeDiffBase.displayName = \"CodeDiff\";\n","import { CodeDiffBase } from \"./code-diff-base\";\nimport type { CodeDiffProps } from \"./types\";\n\nexport function CodeDiff(props: CodeDiffProps) {\n  return <CodeDiffBase {...props} />;\n}\n\nCodeDiff.displayName = \"CodeDiff\";\n"]}