@supernal/interface-nextjs 1.0.30 → 1.0.32

package/dist/index.js

@@ -1175,9 +1175,8 @@ var import_remark_directive = __toESM(require("remark-directive"));
 var import_rehype_katex = __toESM(require("rehype-katex"));
 
 // src/components/CodeBlock.tsx
-var import_react6 = __toESM(require("react"));
-var import_react_syntax_highlighter = require("react-syntax-highlighter");
-var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
+var import_react6 = require("react");
+var import_prism_react_renderer = require("prism-react-renderer");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function CodeBlock({ children, className, inline, theme = "dark" }) {
   const [copied, setCopied] = (0, import_react6.useState)(false);
@@ -1196,7 +1195,7 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
       "button",
       {
         onClick: handleCopy,
-        className: `absolute top-2 right-2 px-3 py-1.5 text-xs font-medium rounded transition-all ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-gray-200" : "bg-gray-200 hover:bg-gray-300 text-gray-700"} ${copied ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
+        className: `absolute top-2 right-2 px-3 py-1.5 text-xs font-medium rounded transition-all z-10 ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-gray-200" : "bg-gray-200 hover:bg-gray-300 text-gray-700"} ${copied ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
         "aria-label": "Copy code",
         children: copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
@@ -1207,19 +1206,44 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
         ] })
       }
     ),
-    import_react6.default.createElement(import_react_syntax_highlighter.Prism, {
-      language,
-      style: theme === "dark" ? import_prism.vscDarkPlus : import_prism.vs,
-      customStyle: {
-        margin: 0,
-        borderRadius: "0.5rem",
-        fontSize: "0.875rem",
-        padding: "1rem"
-      },
-      showLineNumbers: true,
-      wrapLines: true,
-      children
-    })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_prism_react_renderer.Highlight,
+      {
+        theme: theme === "dark" ? import_prism_react_renderer.themes.vsDark : import_prism_react_renderer.themes.vsLight,
+        code: children.trim(),
+        language,
+        children: ({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "pre",
+          {
+            className: highlightClassName,
+            style: {
+              ...style,
+              margin: 0,
+              borderRadius: "0.5rem",
+              fontSize: "0.875rem",
+              padding: "1rem",
+              overflow: "auto"
+            },
+            children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...getLineProps({ line }), style: { display: "table-row" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "span",
+                {
+                  style: {
+                    display: "table-cell",
+                    textAlign: "right",
+                    paddingRight: "1em",
+                    userSelect: "none",
+                    opacity: 0.5
+                  },
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "table-cell" }, children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ...getTokenProps({ token }) }, key)) })
+            ] }, i))
+          }
+        )
+      }
+    )
   ] });
 }
 

package/dist/index.mjs

@@ -1113,9 +1113,8 @@ import remarkDirective from "remark-directive";
 import rehypeKatex from "rehype-katex";
 
 // src/components/CodeBlock.tsx
-import React5, { useState as useState3 } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus, vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { useState as useState3 } from "react";
+import { Highlight, themes } from "prism-react-renderer";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function CodeBlock({ children, className, inline, theme = "dark" }) {
   const [copied, setCopied] = useState3(false);
@@ -1134,7 +1133,7 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
       "button",
       {
         onClick: handleCopy,
-        className: `absolute top-2 right-2 px-3 py-1.5 text-xs font-medium rounded transition-all ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-gray-200" : "bg-gray-200 hover:bg-gray-300 text-gray-700"} ${copied ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
+        className: `absolute top-2 right-2 px-3 py-1.5 text-xs font-medium rounded transition-all z-10 ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-gray-200" : "bg-gray-200 hover:bg-gray-300 text-gray-700"} ${copied ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
         "aria-label": "Copy code",
         children: copied ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx6("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
@@ -1145,19 +1144,44 @@ function CodeBlock({ children, className, inline, theme = "dark" }) {
         ] })
       }
     ),
-    React5.createElement(SyntaxHighlighter, {
-      language,
-      style: theme === "dark" ? vscDarkPlus : vs,
-      customStyle: {
-        margin: 0,
-        borderRadius: "0.5rem",
-        fontSize: "0.875rem",
-        padding: "1rem"
-      },
-      showLineNumbers: true,
-      wrapLines: true,
-      children
-    })
+    /* @__PURE__ */ jsx6(
+      Highlight,
+      {
+        theme: theme === "dark" ? themes.vsDark : themes.vsLight,
+        code: children.trim(),
+        language,
+        children: ({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx6(
+          "pre",
+          {
+            className: highlightClassName,
+            style: {
+              ...style,
+              margin: 0,
+              borderRadius: "0.5rem",
+              fontSize: "0.875rem",
+              padding: "1rem",
+              overflow: "auto"
+            },
+            children: tokens.map((line, i) => /* @__PURE__ */ jsxs2("div", { ...getLineProps({ line }), style: { display: "table-row" }, children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    display: "table-cell",
+                    textAlign: "right",
+                    paddingRight: "1em",
+                    userSelect: "none",
+                    opacity: 0.5
+                  },
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { style: { display: "table-cell" }, children: line.map((token, key) => /* @__PURE__ */ jsx6("span", { ...getTokenProps({ token }) }, key)) })
+            ] }, i))
+          }
+        )
+      }
+    )
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supernal/interface-nextjs",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Next.js integration for Supernal Intelligence Interface - enables agentic UX with one line of code",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,16 +25,13 @@
     "@supernal/interface": "*",
     "next": "^14.0.0 || ^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@supernal/interface": "file:../",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "react-syntax-highlighter": "^15.5.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
@@ -63,12 +60,13 @@
   },
   "dependencies": {
     "cac": "^6.7.14",
+    "katex": "^0.16.11",
+    "mermaid": "^11.4.1",
+    "prism-react-renderer": "^2.4.1",
     "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0",
-    "remark-math": "^6.0.0",
-    "remark-directive": "^3.0.0",
     "rehype-katex": "^7.0.0",
-    "mermaid": "^11.4.1",
-    "katex": "^0.16.11"
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0"
   }
 }