@01.software/sdk 0.2.9-dev.260310.cf511cb → 0.2.9-dev.260311.892250f

package/dist/ui/code-block.cjs

@@ -0,0 +1,182 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/ui/CodeBlock/index.tsx
+var CodeBlock_exports = {};
+__export(CodeBlock_exports, {
+  CodeBlock: () => CodeBlock,
+  highlight: () => highlight
+});
+module.exports = __toCommonJS(CodeBlock_exports);
+var import_react2 = __toESM(require("react"), 1);
+
+// src/ui/CodeBlock/highlight.ts
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_hast_util_to_jsx_runtime = require("hast-util-to-jsx-runtime");
+var import_shiki = require("shiki");
+var LANGUAGE_ALIASES = {
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  py: "python",
+  rb: "ruby",
+  plaintext: "text"
+};
+function normalizeLanguage(lang) {
+  return LANGUAGE_ALIASES[lang] || lang;
+}
+function highlight(code, lang, theme = "github-dark") {
+  return __async(this, null, function* () {
+    const normalized = normalizeLanguage(lang);
+    try {
+      const hast = yield (0, import_shiki.codeToHast)(code, {
+        lang: normalized,
+        theme
+      });
+      return (0, import_hast_util_to_jsx_runtime.toJsxRuntime)(hast, { Fragment: import_react.Fragment, jsx: import_jsx_runtime.jsx, jsxs: import_jsx_runtime.jsxs });
+    } catch (e) {
+      const hast = yield (0, import_shiki.codeToHast)(code, { lang: "text", theme });
+      return (0, import_hast_util_to_jsx_runtime.toJsxRuntime)(hast, { Fragment: import_react.Fragment, jsx: import_jsx_runtime.jsx, jsxs: import_jsx_runtime.jsxs });
+    }
+  });
+}
+
+// src/ui/CodeBlock/index.tsx
+function CodeBlock({
+  code,
+  language = "typescript",
+  theme = "github-dark",
+  className,
+  initial,
+  showLineNumbers = false,
+  showCopyButton = true
+}) {
+  const [nodes, setNodes] = (0, import_react2.useState)(initial);
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    void highlight(code, language, theme).then((el) => {
+      if (!cancelled) setNodes(el);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, theme]);
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }, () => {
+    });
+  };
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className, style: { position: "relative" } }, showCopyButton && /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": "Copy code",
+      style: {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        zIndex: 1,
+        padding: "4px 8px",
+        fontSize: 12,
+        lineHeight: 1,
+        border: "1px solid rgba(255,255,255,0.2)",
+        borderRadius: 4,
+        background: "rgba(0,0,0,0.3)",
+        color: "#ccc",
+        cursor: "pointer",
+        opacity: 0.7,
+        transition: "opacity 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.opacity = "1";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.opacity = "0.7";
+      }
+    },
+    copied ? "Copied!" : "Copy"
+  ), showLineNumbers && nodes ? /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        padding: "1em 0.5em 1em 1em",
+        textAlign: "right",
+        userSelect: "none",
+        color: "rgba(255,255,255,0.3)",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    code.split("\n").map((_, i) => /* @__PURE__ */ import_react2.default.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, overflow: "auto" } }, nodes)) : nodes != null ? nodes : /* @__PURE__ */ import_react2.default.createElement(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "1em",
+        overflow: "auto",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement("code", null, code)
+  ));
+}
+//# sourceMappingURL=code-block.cjs.map

package/dist/ui/code-block.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/CodeBlock/index.tsx","../../src/ui/CodeBlock/highlight.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useState, type JSX } from 'react'\nimport { highlight, type BundledTheme } from './highlight'\n\nexport type { BundledTheme }\nexport { highlight }\n\nexport interface CodeBlockProps {\n  /** Code string to highlight */\n  code: string\n  /** Language identifier (e.g. 'typescript', 'js', 'python') */\n  language?: string\n  /** Shiki theme name. Default: 'github-dark' */\n  theme?: BundledTheme\n  /** CSS class for the wrapper */\n  className?: string\n  /** Pre-rendered JSX from server component via `highlight()` */\n  initial?: JSX.Element\n  /** Show line numbers. Default: false */\n  showLineNumbers?: boolean\n  /** Show copy button. Default: true */\n  showCopyButton?: boolean\n}\n\n/**\n * Syntax-highlighted code block using shiki.\n *\n * @example Basic usage\n * ```tsx\n * <CodeBlock code=\"const x = 1\" language=\"typescript\" />\n * ```\n *\n * @example With server pre-rendering (Next.js)\n * ```tsx\n * // Server Component\n * const initial = await highlight(code, 'typescript')\n * return <CodeBlock code={code} language=\"typescript\" initial={initial} />\n * ```\n *\n * @example As RichTextContent block renderer\n * ```tsx\n * <RichTextContent\n *   data={data}\n *   blocks={{\n *     Code: ({ node }) => (\n *       <CodeBlock code={node.fields.code} language={node.fields.language} />\n *     ),\n *   }}\n * />\n * ```\n */\nexport function CodeBlock({\n  code,\n  language = 'typescript',\n  theme = 'github-dark',\n  className,\n  initial,\n  showLineNumbers = false,\n  showCopyButton = true,\n}: CodeBlockProps) {\n  const [nodes, setNodes] = useState<JSX.Element | undefined>(initial)\n  const [copied, setCopied] = useState(false)\n\n  useEffect(() => {\n    let cancelled = false\n    void highlight(code, language, theme).then((el) => {\n      if (!cancelled) setNodes(el)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language, theme])\n\n  const handleCopy = () => {\n    void navigator.clipboard.writeText(code).then(() => {\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    }, () => {})\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative' }}>\n      {showCopyButton && (\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label=\"Copy code\"\n          style={{\n            position: 'absolute',\n            top: 8,\n            right: 8,\n            zIndex: 1,\n            padding: '4px 8px',\n            fontSize: 12,\n            lineHeight: 1,\n            border: '1px solid rgba(255,255,255,0.2)',\n            borderRadius: 4,\n            background: 'rgba(0,0,0,0.3)',\n            color: '#ccc',\n            cursor: 'pointer',\n            opacity: 0.7,\n            transition: 'opacity 0.15s',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7'\n          }}\n        >\n          {copied ? 'Copied!' : 'Copy'}\n        </button>\n      )}\n      {showLineNumbers && nodes ? (\n        <div style={{ display: 'flex' }}>\n          <div\n            aria-hidden\n            style={{\n              padding: '1em 0.5em 1em 1em',\n              textAlign: 'right',\n              userSelect: 'none',\n              color: 'rgba(255,255,255,0.3)',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            {code.split('\\n').map((_, i) => (\n              <div key={i}>{i + 1}</div>\n            ))}\n          </div>\n          <div style={{ flex: 1, overflow: 'auto' }}>{nodes}</div>\n        </div>\n      ) : (\n        nodes ?? (\n          <pre\n            style={{\n              margin: 0,\n              padding: '1em',\n              overflow: 'auto',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            <code>{code}</code>\n          </pre>\n        )\n      )}\n    </div>\n  )\n}\n","import type { JSX } from 'react'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { codeToHast, type BundledLanguage, type BundledTheme } from 'shiki'\n\nexport type { BundledLanguage, BundledTheme }\n\n/** Normalize language aliases to shiki-compatible language IDs */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  js: 'javascript',\n  ts: 'typescript',\n  sh: 'bash',\n  shell: 'bash',\n  yml: 'yaml',\n  py: 'python',\n  rb: 'ruby',\n  plaintext: 'text',\n}\n\nfunction normalizeLanguage(lang: string): string {\n  return LANGUAGE_ALIASES[lang] || lang\n}\n\n/**\n * Highlight code to JSX using shiki.\n * Works in both Server and Client components.\n *\n * @example Server Component\n * ```tsx\n * const highlighted = await highlight('const x = 1', 'typescript')\n * return <div>{highlighted}</div>\n * ```\n */\nexport async function highlight(\n  code: string,\n  lang: string,\n  theme: BundledTheme = 'github-dark',\n): Promise<JSX.Element> {\n  const normalized = normalizeLanguage(lang)\n  try {\n    const hast = await codeToHast(code, {\n      lang: normalized as BundledLanguage,\n      theme,\n    })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  } catch {\n    // Fallback to plain text if language is not supported\n    const hast = await codeToHast(code, { lang: 'text', theme })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAqD;;;ACDrD,mBAAyB;AACzB,yBAA0B;AAC1B,sCAA6B;AAC7B,mBAAoE;AAKpE,IAAM,mBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AACb;AAEA,SAAS,kBAAkB,MAAsB;AAC/C,SAAO,iBAAiB,IAAI,KAAK;AACnC;AAYA,SAAsB,UACpB,MACA,MACA,QAAsB,eACA;AAAA;AACtB,UAAM,aAAa,kBAAkB,IAAI;AACzC,QAAI;AACF,YAAM,OAAO,UAAM,yBAAW,MAAM;AAAA,QAClC,MAAM;AAAA,QACN;AAAA,MACF,CAAC;AACD,iBAAO,8CAAa,MAAM,EAAE,iCAAU,6BAAK,8BAAK,CAAC;AAAA,IACnD,SAAQ;AAEN,YAAM,OAAO,UAAM,yBAAW,MAAM,EAAE,MAAM,QAAQ,MAAM,CAAC;AAC3D,iBAAO,8CAAa,MAAM,EAAE,iCAAU,6BAAK,8BAAK,CAAC;AAAA,IACnD;AAAA,EACF;AAAA;;;ADCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AACnB,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAkC,OAAO;AACnE,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAE1C,+BAAU,MAAM;AACd,QAAI,YAAY;AAChB,SAAK,UAAU,MAAM,UAAU,KAAK,EAAE,KAAK,CAAC,OAAO;AACjD,UAAI,CAAC,UAAW,UAAS,EAAE;AAAA,IAC7B,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,QAAM,aAAa,MAAM;AACvB,SAAK,UAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAClD,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,GAAG,MAAM;AAAA,IAAC,CAAC;AAAA,EACb;AAEA,SACE,8BAAAC,QAAA,cAAC,SAAI,WAAsB,OAAO,EAAE,UAAU,WAAW,KACtD,kBACC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAW;AAAA,MACX,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MACA,cAAc,CAAC,MAAM;AACnB,UAAE,cAAc,MAAM,UAAU;AAAA,MAClC;AAAA,MACA,cAAc,CAAC,MAAM;AACnB,UAAE,cAAc,MAAM,UAAU;AAAA,MAClC;AAAA;AAAA,IAEC,SAAS,YAAY;AAAA,EACxB,GAED,mBAAmB,QAClB,8BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,OAAO,KAC5B,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA;AAAA,IAEC,KAAK,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,MACxB,8BAAAA,QAAA,cAAC,SAAI,KAAK,KAAI,IAAI,CAAE,CACrB;AAAA,EACH,GACA,8BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,MAAM,GAAG,UAAU,OAAO,KAAI,KAAM,CACpD,IAEA,wBACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA;AAAA,IAEA,8BAAAA,QAAA,cAAC,cAAM,IAAK;AAAA,EACd,CAGN;AAEJ;","names":["import_react","React"]}

package/dist/ui/code-block.d.cts

@@ -0,0 +1,62 @@
+import { JSX } from 'react';
+import { BundledTheme } from 'shiki';
+export { BundledTheme } from 'shiki';
+
+/**
+ * Highlight code to JSX using shiki.
+ * Works in both Server and Client components.
+ *
+ * @example Server Component
+ * ```tsx
+ * const highlighted = await highlight('const x = 1', 'typescript')
+ * return <div>{highlighted}</div>
+ * ```
+ */
+declare function highlight(code: string, lang: string, theme?: BundledTheme): Promise<JSX.Element>;
+
+interface CodeBlockProps {
+    /** Code string to highlight */
+    code: string;
+    /** Language identifier (e.g. 'typescript', 'js', 'python') */
+    language?: string;
+    /** Shiki theme name. Default: 'github-dark' */
+    theme?: BundledTheme;
+    /** CSS class for the wrapper */
+    className?: string;
+    /** Pre-rendered JSX from server component via `highlight()` */
+    initial?: JSX.Element;
+    /** Show line numbers. Default: false */
+    showLineNumbers?: boolean;
+    /** Show copy button. Default: true */
+    showCopyButton?: boolean;
+}
+/**
+ * Syntax-highlighted code block using shiki.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CodeBlock code="const x = 1" language="typescript" />
+ * ```
+ *
+ * @example With server pre-rendering (Next.js)
+ * ```tsx
+ * // Server Component
+ * const initial = await highlight(code, 'typescript')
+ * return <CodeBlock code={code} language="typescript" initial={initial} />
+ * ```
+ *
+ * @example As RichTextContent block renderer
+ * ```tsx
+ * <RichTextContent
+ *   data={data}
+ *   blocks={{
+ *     Code: ({ node }) => (
+ *       <CodeBlock code={node.fields.code} language={node.fields.language} />
+ *     ),
+ *   }}
+ * />
+ * ```
+ */
+declare function CodeBlock({ code, language, theme, className, initial, showLineNumbers, showCopyButton, }: CodeBlockProps): JSX.Element;
+
+export { CodeBlock, type CodeBlockProps, highlight };

package/dist/ui/code-block.d.ts

@@ -0,0 +1,62 @@
+import { JSX } from 'react';
+import { BundledTheme } from 'shiki';
+export { BundledTheme } from 'shiki';
+
+/**
+ * Highlight code to JSX using shiki.
+ * Works in both Server and Client components.
+ *
+ * @example Server Component
+ * ```tsx
+ * const highlighted = await highlight('const x = 1', 'typescript')
+ * return <div>{highlighted}</div>
+ * ```
+ */
+declare function highlight(code: string, lang: string, theme?: BundledTheme): Promise<JSX.Element>;
+
+interface CodeBlockProps {
+    /** Code string to highlight */
+    code: string;
+    /** Language identifier (e.g. 'typescript', 'js', 'python') */
+    language?: string;
+    /** Shiki theme name. Default: 'github-dark' */
+    theme?: BundledTheme;
+    /** CSS class for the wrapper */
+    className?: string;
+    /** Pre-rendered JSX from server component via `highlight()` */
+    initial?: JSX.Element;
+    /** Show line numbers. Default: false */
+    showLineNumbers?: boolean;
+    /** Show copy button. Default: true */
+    showCopyButton?: boolean;
+}
+/**
+ * Syntax-highlighted code block using shiki.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CodeBlock code="const x = 1" language="typescript" />
+ * ```
+ *
+ * @example With server pre-rendering (Next.js)
+ * ```tsx
+ * // Server Component
+ * const initial = await highlight(code, 'typescript')
+ * return <CodeBlock code={code} language="typescript" initial={initial} />
+ * ```
+ *
+ * @example As RichTextContent block renderer
+ * ```tsx
+ * <RichTextContent
+ *   data={data}
+ *   blocks={{
+ *     Code: ({ node }) => (
+ *       <CodeBlock code={node.fields.code} language={node.fields.language} />
+ *     ),
+ *   }}
+ * />
+ * ```
+ */
+declare function CodeBlock({ code, language, theme, className, initial, showLineNumbers, showCopyButton, }: CodeBlockProps): JSX.Element;
+
+export { CodeBlock, type CodeBlockProps, highlight };

package/dist/ui/code-block.js

@@ -0,0 +1,152 @@
+"use client";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/ui/CodeBlock/index.tsx
+import React, { useEffect, useState } from "react";
+
+// src/ui/CodeBlock/highlight.ts
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { codeToHast } from "shiki";
+var LANGUAGE_ALIASES = {
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  py: "python",
+  rb: "ruby",
+  plaintext: "text"
+};
+function normalizeLanguage(lang) {
+  return LANGUAGE_ALIASES[lang] || lang;
+}
+function highlight(code, lang, theme = "github-dark") {
+  return __async(this, null, function* () {
+    const normalized = normalizeLanguage(lang);
+    try {
+      const hast = yield codeToHast(code, {
+        lang: normalized,
+        theme
+      });
+      return toJsxRuntime(hast, { Fragment, jsx, jsxs });
+    } catch (e) {
+      const hast = yield codeToHast(code, { lang: "text", theme });
+      return toJsxRuntime(hast, { Fragment, jsx, jsxs });
+    }
+  });
+}
+
+// src/ui/CodeBlock/index.tsx
+function CodeBlock({
+  code,
+  language = "typescript",
+  theme = "github-dark",
+  className,
+  initial,
+  showLineNumbers = false,
+  showCopyButton = true
+}) {
+  const [nodes, setNodes] = useState(initial);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    void highlight(code, language, theme).then((el) => {
+      if (!cancelled) setNodes(el);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, theme]);
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }, () => {
+    });
+  };
+  return /* @__PURE__ */ React.createElement("div", { className, style: { position: "relative" } }, showCopyButton && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": "Copy code",
+      style: {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        zIndex: 1,
+        padding: "4px 8px",
+        fontSize: 12,
+        lineHeight: 1,
+        border: "1px solid rgba(255,255,255,0.2)",
+        borderRadius: 4,
+        background: "rgba(0,0,0,0.3)",
+        color: "#ccc",
+        cursor: "pointer",
+        opacity: 0.7,
+        transition: "opacity 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.opacity = "1";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.opacity = "0.7";
+      }
+    },
+    copied ? "Copied!" : "Copy"
+  ), showLineNumbers && nodes ? /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        padding: "1em 0.5em 1em 1em",
+        textAlign: "right",
+        userSelect: "none",
+        color: "rgba(255,255,255,0.3)",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    code.split("\n").map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto" } }, nodes)) : nodes != null ? nodes : /* @__PURE__ */ React.createElement(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "1em",
+        overflow: "auto",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    /* @__PURE__ */ React.createElement("code", null, code)
+  ));
+}
+export {
+  CodeBlock,
+  highlight
+};
+//# sourceMappingURL=code-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/CodeBlock/index.tsx","../../src/ui/CodeBlock/highlight.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useState, type JSX } from 'react'\nimport { highlight, type BundledTheme } from './highlight'\n\nexport type { BundledTheme }\nexport { highlight }\n\nexport interface CodeBlockProps {\n  /** Code string to highlight */\n  code: string\n  /** Language identifier (e.g. 'typescript', 'js', 'python') */\n  language?: string\n  /** Shiki theme name. Default: 'github-dark' */\n  theme?: BundledTheme\n  /** CSS class for the wrapper */\n  className?: string\n  /** Pre-rendered JSX from server component via `highlight()` */\n  initial?: JSX.Element\n  /** Show line numbers. Default: false */\n  showLineNumbers?: boolean\n  /** Show copy button. Default: true */\n  showCopyButton?: boolean\n}\n\n/**\n * Syntax-highlighted code block using shiki.\n *\n * @example Basic usage\n * ```tsx\n * <CodeBlock code=\"const x = 1\" language=\"typescript\" />\n * ```\n *\n * @example With server pre-rendering (Next.js)\n * ```tsx\n * // Server Component\n * const initial = await highlight(code, 'typescript')\n * return <CodeBlock code={code} language=\"typescript\" initial={initial} />\n * ```\n *\n * @example As RichTextContent block renderer\n * ```tsx\n * <RichTextContent\n *   data={data}\n *   blocks={{\n *     Code: ({ node }) => (\n *       <CodeBlock code={node.fields.code} language={node.fields.language} />\n *     ),\n *   }}\n * />\n * ```\n */\nexport function CodeBlock({\n  code,\n  language = 'typescript',\n  theme = 'github-dark',\n  className,\n  initial,\n  showLineNumbers = false,\n  showCopyButton = true,\n}: CodeBlockProps) {\n  const [nodes, setNodes] = useState<JSX.Element | undefined>(initial)\n  const [copied, setCopied] = useState(false)\n\n  useEffect(() => {\n    let cancelled = false\n    void highlight(code, language, theme).then((el) => {\n      if (!cancelled) setNodes(el)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language, theme])\n\n  const handleCopy = () => {\n    void navigator.clipboard.writeText(code).then(() => {\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    }, () => {})\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative' }}>\n      {showCopyButton && (\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label=\"Copy code\"\n          style={{\n            position: 'absolute',\n            top: 8,\n            right: 8,\n            zIndex: 1,\n            padding: '4px 8px',\n            fontSize: 12,\n            lineHeight: 1,\n            border: '1px solid rgba(255,255,255,0.2)',\n            borderRadius: 4,\n            background: 'rgba(0,0,0,0.3)',\n            color: '#ccc',\n            cursor: 'pointer',\n            opacity: 0.7,\n            transition: 'opacity 0.15s',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7'\n          }}\n        >\n          {copied ? 'Copied!' : 'Copy'}\n        </button>\n      )}\n      {showLineNumbers && nodes ? (\n        <div style={{ display: 'flex' }}>\n          <div\n            aria-hidden\n            style={{\n              padding: '1em 0.5em 1em 1em',\n              textAlign: 'right',\n              userSelect: 'none',\n              color: 'rgba(255,255,255,0.3)',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            {code.split('\\n').map((_, i) => (\n              <div key={i}>{i + 1}</div>\n            ))}\n          </div>\n          <div style={{ flex: 1, overflow: 'auto' }}>{nodes}</div>\n        </div>\n      ) : (\n        nodes ?? (\n          <pre\n            style={{\n              margin: 0,\n              padding: '1em',\n              overflow: 'auto',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            <code>{code}</code>\n          </pre>\n        )\n      )}\n    </div>\n  )\n}\n","import type { JSX } from 'react'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { codeToHast, type BundledLanguage, type BundledTheme } from 'shiki'\n\nexport type { BundledLanguage, BundledTheme }\n\n/** Normalize language aliases to shiki-compatible language IDs */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  js: 'javascript',\n  ts: 'typescript',\n  sh: 'bash',\n  shell: 'bash',\n  yml: 'yaml',\n  py: 'python',\n  rb: 'ruby',\n  plaintext: 'text',\n}\n\nfunction normalizeLanguage(lang: string): string {\n  return LANGUAGE_ALIASES[lang] || lang\n}\n\n/**\n * Highlight code to JSX using shiki.\n * Works in both Server and Client components.\n *\n * @example Server Component\n * ```tsx\n * const highlighted = await highlight('const x = 1', 'typescript')\n * return <div>{highlighted}</div>\n * ```\n */\nexport async function highlight(\n  code: string,\n  lang: string,\n  theme: BundledTheme = 'github-dark',\n): Promise<JSX.Element> {\n  const normalized = normalizeLanguage(lang)\n  try {\n    const hast = await codeToHast(code, {\n      lang: normalized as BundledLanguage,\n      theme,\n    })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  } catch {\n    // Fallback to plain text if language is not supported\n    const hast = await codeToHast(code, { lang: 'text', theme })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  }\n}\n"],"mappings":"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","names":[]}