@01.software/sdk 0.2.9-dev.260305.4f1735b → 0.2.9-dev.260306.2ae88fe

package/README.md

@@ -419,18 +419,38 @@ formatOrderName([
 
 ### RichTextContent
 
-React component for rendering Payload CMS Lexical rich text.
+React component for rendering Payload CMS Lexical rich text. Two variants:
+
+- **`RichTextContent`** — Base component with maximum flexibility (`converters`, `blocks`, `disableDefaultConverters`)
+- **`StyledRichTextContent`** — Headless component with slot-based customization (`components` prop)
 
 ```tsx
-import { RichTextContent } from '@01.software/sdk'
+import { RichTextContent, StyledRichTextContent } from '@01.software/sdk/components'
 
-;<RichTextContent
+// Base: full converter control
+<RichTextContent
   data={content}
   className="prose"
-  internalDocToHref={(args) => `/posts/${args.doc.slug}`}
+  internalDocToHref={({ linkNode }) => `/posts/${linkNode.fields.doc?.value?.slug}`}
   blocks={{
-    Iframe: ({ url }) => <iframe src={url} />,
-    Player: ({ videoId }) => <VideoPlayer id={videoId} />,
+    Iframe: ({ node }) => <iframe src={node.fields.url} />,
+    Player: ({ node }) => <VideoPlayer url={node.fields.url} />,
+  }}
+/>
+
+// Headless: component slots (Radix-style)
+<StyledRichTextContent
+  data={content}
+  components={{
+    Heading: ({ tag: Tag, children }) => (
+      <Tag className={Tag === 'h1' ? 'text-4xl font-bold' : 'text-2xl'}>{children}</Tag>
+    ),
+    Link: ({ href, children, target, rel }) => (
+      <a href={href} target={target} rel={rel} className="text-blue-600 underline">{children}</a>
+    ),
+    Upload: ({ src, alt, width, height }) => (
+      <img src={src} alt={alt} width={width} height={height} className="rounded-lg" />
+    ),
   }}
 />
 ```

package/dist/{auth-3qWmYUln.d.cts → auth-7rMGkvN0.d.cts}

@@ -1,5 +1,5 @@
 import { Sort, Where } from 'payload';
-import './payload-types-Bpi16SHO.cjs';
+import './payload-types-Dp1qa5_Z.cjs';
 
 declare class SDKError extends Error {
     readonly code: string;

package/dist/{auth-BfGmV75P.d.ts → auth-wTPFmG0W.d.ts}

@@ -1,5 +1,5 @@
 import { Sort, Where } from 'payload';
-import './payload-types-Bpi16SHO.js';
+import './payload-types-Dp1qa5_Z.js';
 
 declare class SDKError extends Error {
     readonly code: string;

package/dist/auth.d.cts

@@ -1,3 +1,3 @@
-export { J as JwtPayload, q as createApiKey, o as createServerToken, p as decodeServerToken, r as parseApiKey, v as verifyServerToken } from './auth-3qWmYUln.cjs';
+export { J as JwtPayload, q as createApiKey, o as createServerToken, p as decodeServerToken, r as parseApiKey, v as verifyServerToken } from './auth-7rMGkvN0.cjs';
 import 'payload';
-import './payload-types-Bpi16SHO.cjs';
+import './payload-types-Dp1qa5_Z.cjs';

package/dist/auth.d.ts

@@ -1,3 +1,3 @@
-export { J as JwtPayload, q as createApiKey, o as createServerToken, p as decodeServerToken, r as parseApiKey, v as verifyServerToken } from './auth-BfGmV75P.js';
+export { J as JwtPayload, q as createApiKey, o as createServerToken, p as decodeServerToken, r as parseApiKey, v as verifyServerToken } from './auth-wTPFmG0W.js';
 import 'payload';
-import './payload-types-Bpi16SHO.js';
+import './payload-types-Dp1qa5_Z.js';

package/dist/components.cjs

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -67,38 +79,211 @@ var __async = (__this, __arguments, generator) => {
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
+  CodeBlock: () => CodeBlock,
   FormRenderer: () => FormRenderer,
   Image: () => Image,
   RichTextContent: () => RichTextContent,
+  StyledRichTextContent: () => StyledRichTextContent,
+  highlight: () => highlight,
   toSubmissionData: () => toSubmissionData
 });
 module.exports = __toCommonJS(components_exports);
 
 // src/components/RichTextContent/index.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react3 = require("@payloadcms/richtext-lexical/react");
+
+// src/components/RichTextContent/styled.tsx
 var import_react = __toESM(require("react"), 1);
-var import_react2 = require("@payloadcms/richtext-lexical/react");
+function createComponentConverters(components, internalDocToHref) {
+  const converters = {};
+  if (components.Heading) {
+    const Heading = components.Heading;
+    converters.heading = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(Heading, { tag: node.tag, node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.Paragraph) {
+    const Paragraph = components.Paragraph;
+    converters.paragraph = ({ node, nodesToJSX }) => {
+      const children = nodesToJSX({ nodes: node.children });
+      return /* @__PURE__ */ import_react.default.createElement(Paragraph, { isEmpty: !(children == null ? void 0 : children.length), node }, (children == null ? void 0 : children.length) ? children : /* @__PURE__ */ import_react.default.createElement("br", null));
+    };
+  }
+  if (components.Blockquote) {
+    const Blockquote = components.Blockquote;
+    converters.quote = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(Blockquote, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.List) {
+    const List = components.List;
+    converters.list = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(List, { tag: node.tag, listType: node.listType, node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.ListItem) {
+    const ListItem = components.ListItem;
+    converters.listitem = ({ node, nodesToJSX }) => {
+      const hasSubLists = node.children.some(
+        (child) => child.type === "list"
+      );
+      return /* @__PURE__ */ import_react.default.createElement(
+        ListItem,
+        {
+          hasSubLists,
+          checked: node.checked,
+          value: node.value,
+          node
+        },
+        nodesToJSX({ nodes: node.children })
+      );
+    };
+  }
+  if (components.Link) {
+    const Link = components.Link;
+    const resolveHref = (node) => {
+      var _a;
+      if (node.fields.linkType === "internal") {
+        return internalDocToHref ? internalDocToHref({ linkNode: node }) : "#";
+      }
+      return (_a = node.fields.url) != null ? _a : "";
+    };
+    converters.link = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(
+      Link,
+      {
+        href: resolveHref(node),
+        rel: node.fields.newTab ? "noopener noreferrer" : void 0,
+        target: node.fields.newTab ? "_blank" : void 0,
+        node
+      },
+      nodesToJSX({ nodes: node.children })
+    );
+    converters.autolink = ({ node, nodesToJSX }) => {
+      var _a;
+      return /* @__PURE__ */ import_react.default.createElement(
+        Link,
+        {
+          href: (_a = node.fields.url) != null ? _a : "",
+          rel: node.fields.newTab ? "noopener noreferrer" : void 0,
+          target: node.fields.newTab ? "_blank" : void 0,
+          node
+        },
+        nodesToJSX({ nodes: node.children })
+      );
+    };
+  }
+  if (components.HorizontalRule) {
+    const HorizontalRule = components.HorizontalRule;
+    converters.horizontalrule = /* @__PURE__ */ import_react.default.createElement(HorizontalRule, null);
+  }
+  if (components.Upload) {
+    const Upload = components.Upload;
+    converters.upload = ({ node }) => {
+      var _a;
+      const uploadNode = node;
+      if (typeof uploadNode.value !== "object") return null;
+      const doc = uploadNode.value;
+      return /* @__PURE__ */ import_react.default.createElement(
+        Upload,
+        {
+          src: doc.url,
+          alt: ((_a = uploadNode.fields) == null ? void 0 : _a.alt) || (doc == null ? void 0 : doc.alt) || "",
+          width: doc.width,
+          height: doc.height,
+          mimeType: doc.mimeType,
+          filename: doc.filename,
+          sizes: doc.sizes,
+          node
+        }
+      );
+    };
+  }
+  if (components.Table) {
+    const Table = components.Table;
+    converters.table = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(Table, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.TableRow) {
+    const TableRow = components.TableRow;
+    converters.tablerow = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(TableRow, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.TableCell) {
+    const TableCell = components.TableCell;
+    converters.tablecell = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(
+      TableCell,
+      {
+        tag: node.headerState > 0 ? "th" : "td",
+        colSpan: node.colSpan > 1 ? node.colSpan : void 0,
+        rowSpan: node.rowSpan > 1 ? node.rowSpan : void 0,
+        backgroundColor: node.backgroundColor || void 0,
+        node
+      },
+      nodesToJSX({ nodes: node.children })
+    );
+  }
+  return converters;
+}
+function StyledRichTextContent(_a) {
+  var _b = _a, {
+    components = {},
+    internalDocToHref,
+    blocks,
+    textState
+  } = _b, props = __objRest(_b, [
+    "components",
+    "internalDocToHref",
+    "blocks",
+    "textState"
+  ]);
+  const converters = createComponentConverters(components, internalDocToHref);
+  return /* @__PURE__ */ import_react.default.createElement(
+    RichTextContent,
+    __spreadProps(__spreadValues({}, props), {
+      internalDocToHref,
+      converters,
+      blocks,
+      textState
+    })
+  );
+}
+
+// src/components/RichTextContent/index.tsx
+function hyphenToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function createTextStateConverter(state) {
+  const defaultTextConverter = import_react3.TextJSXConverter.text;
+  return (_a) => {
+    var _b = _a, { node } = _b, rest = __objRest(_b, ["node"]);
+    var _a2, _b2;
+    const base = defaultTextConverter(__spreadValues({ node }, rest));
+    const nodeState = node.$;
+    if (!nodeState || typeof nodeState !== "object") return base;
+    const style = {};
+    for (const stateKey in nodeState) {
+      const stateValue = nodeState[stateKey];
+      if (!stateValue) continue;
+      const css = (_b2 = (_a2 = state[stateKey]) == null ? void 0 : _a2[stateValue]) == null ? void 0 : _b2.css;
+      if (css) {
+        for (const prop in css) {
+          const val = css[prop];
+          if (val) style[hyphenToCamel(prop)] = val;
+        }
+      }
+    }
+    if (Object.keys(style).length === 0) return base;
+    return /* @__PURE__ */ import_react2.default.createElement("span", { style }, base);
+  };
+}
 function RichTextContent({
   data,
   className,
   internalDocToHref,
-  blocks
+  converters,
+  blocks,
+  disableDefaultConverters,
+  textState
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RichText,
-    {
-      data,
-      className,
-      converters: __spreadProps(__spreadValues(__spreadValues({}, import_react2.defaultJSXConverters), (0, import_react2.LinkJSXConverter)({
-        internalDocToHref
-      })), {
-        blocks: blocks ? blocks : void 0
-      })
-    }
-  );
+  const baseConverters = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, disableDefaultConverters ? {} : import_react3.defaultJSXConverters), (0, import_react3.LinkJSXConverter)({ internalDocToHref })), textState ? { text: createTextStateConverter(textState) } : {}), converters), blocks ? { blocks } : {});
+  return /* @__PURE__ */ import_react2.default.createElement(import_react3.RichText, { data, className, converters: baseConverters });
 }
 
 // src/components/FormRenderer/index.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/components/FormRenderer/countries.ts
 var COUNTRIES = [
@@ -437,15 +622,15 @@ function FormRenderer({
   renderButton
 }) {
   var _a;
-  const [values, setValues] = (0, import_react3.useState)(
+  const [values, setValues] = (0, import_react4.useState)(
     () => getInitialValues(form.fields)
   );
-  const [isSubmitting, setIsSubmitting] = (0, import_react3.useState)(false);
-  const submittingRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const [isSubmitting, setIsSubmitting] = (0, import_react4.useState)(false);
+  const submittingRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     setValues(getInitialValues(form.fields));
   }, [form.id]);
-  const handleChange = (0, import_react3.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (name, value) => {
       setValues((prev) => __spreadProps(__spreadValues({}, prev), { [name]: value }));
     },
@@ -469,14 +654,14 @@ function FormRenderer({
       value: (_a2 = values[field.name]) != null ? _a2 : "",
       onChange: (v) => handleChange(field.name, v)
     };
-    const el = /* @__PURE__ */ import_react3.default.createElement(
+    const el = /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         key: (_b = field.id) != null ? _b : field.name,
         className: fieldClassName,
         style
       },
-      field.label && /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: field.name }, field.label),
+      field.label && /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: field.name }, field.label),
       input
     );
     return renderField ? renderField(field, context, el) : el;
@@ -486,7 +671,7 @@ function FormRenderer({
     return wrapField(
       field,
       style,
-      /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         "select",
         {
           id: field.name,
@@ -495,8 +680,8 @@ function FormRenderer({
           required: (_b = field.required) != null ? _b : false,
           onChange: (e) => handleChange(field.name, e.target.value)
         },
-        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, placeholder || "Select\u2026"),
-        options.map((opt) => /* @__PURE__ */ import_react3.default.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+        /* @__PURE__ */ import_react4.default.createElement("option", { value: "" }, placeholder || "Select\u2026"),
+        options.map((opt) => /* @__PURE__ */ import_react4.default.createElement("option", { key: opt.value, value: opt.value }, opt.label))
       )
     );
   };
@@ -508,7 +693,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "text",
@@ -525,7 +710,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "email",
@@ -541,7 +726,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "number",
@@ -562,7 +747,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "textarea",
             {
               id: field.name,
@@ -578,14 +763,14 @@ function FormRenderer({
           value: (_j = values[field.name]) != null ? _j : false,
           onChange: (v) => handleChange(field.name, v)
         };
-        const el = /* @__PURE__ */ import_react3.default.createElement(
+        const el = /* @__PURE__ */ import_react4.default.createElement(
           "div",
           {
             key: (_k = field.id) != null ? _k : field.name,
             className: fieldClassName,
             style
           },
-          /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "checkbox",
@@ -595,7 +780,7 @@ function FormRenderer({
               required: (_l = field.required) != null ? _l : false,
               onChange: (e) => handleChange(field.name, e.target.checked)
             }
-          ), field.label && /* @__PURE__ */ import_react3.default.createElement("span", null, field.label))
+          ), field.label && /* @__PURE__ */ import_react4.default.createElement("span", null, field.label))
         );
         return renderField ? renderField(field, context, el) : el;
       }
@@ -612,7 +797,7 @@ function FormRenderer({
         return renderSelectField(field, style, US_STATES);
       case "message":
         if (renderMessage && field.message) {
-          return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
+          return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
         }
         return null;
       default:
@@ -620,7 +805,7 @@ function FormRenderer({
     }
   };
   const buttonLabel = form.submitButtonLabel || "Submit";
-  return /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       type: "submit",
@@ -632,7 +817,7 @@ function FormRenderer({
 }
 
 // src/components/Image/index.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/utils/image.ts
 var IMAGE_SIZES = [384, 768, 1536];
@@ -697,8 +882,8 @@ function Image({
   imageRendering
 }) {
   var _a, _b;
-  const [loaded, setLoaded] = (0, import_react4.useState)(false);
-  const firedRef = (0, import_react4.useRef)(false);
+  const [loaded, setLoaded] = (0, import_react5.useState)(false);
+  const firedRef = (0, import_react5.useRef)(false);
   const isPixelRendering = imageRendering === "pixelated" || imageRendering === "crisp-edges";
   const placeholder = placeholderProp != null ? placeholderProp : isPixelRendering ? "none" : "blur";
   const loading = priority ? "eager" : loadingProp != null ? loadingProp : "lazy";
@@ -710,13 +895,13 @@ function Image({
     type: placeholder
   });
   const placeholderColor = !hasLqip && "backgroundColor" in placeholderStyle ? placeholderStyle.backgroundColor : void 0;
-  const fireLoad = (0, import_react4.useCallback)(() => {
+  const fireLoad = (0, import_react5.useCallback)(() => {
     if (firedRef.current) return;
     firedRef.current = true;
     setLoaded(true);
     onLoad == null ? void 0 : onLoad();
   }, [onLoad]);
-  const imgRef = (0, import_react4.useCallback)(
+  const imgRef = (0, import_react5.useCallback)(
     (node) => {
       if (node && node.complete && node.naturalWidth > 0) {
         fireLoad();
@@ -747,7 +932,7 @@ function Image({
     opacity: loaded ? 1 : 0,
     transition: "opacity 0.3s ease"
   }), imgStyle);
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ import_react5.default.createElement(
     "img",
     {
       "aria-hidden": true,
@@ -760,7 +945,7 @@ function Image({
         transform: "scale(1.1)"
       })
     }
-  ), placeholderColor && /* @__PURE__ */ import_react4.default.createElement(
+  ), placeholderColor && /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       "aria-hidden": true,
@@ -768,7 +953,7 @@ function Image({
         backgroundColor: placeholderColor
       })
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react5.default.createElement(
     "img",
     {
       ref: imgRef,
@@ -786,4 +971,130 @@ function Image({
     }
   ));
 }
+
+// src/components/CodeBlock/index.tsx
+var import_react7 = __toESM(require("react"), 1);
+
+// src/components/CodeBlock/highlight.ts
+var import_react6 = 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_react6.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_react6.Fragment, jsx: import_jsx_runtime.jsx, jsxs: import_jsx_runtime.jsxs });
+    }
+  });
+}
+
+// src/components/CodeBlock/index.tsx
+function CodeBlock({
+  code,
+  language = "typescript",
+  theme = "github-dark",
+  className,
+  initial,
+  showLineNumbers = false,
+  showCopyButton = true
+}) {
+  const [nodes, setNodes] = (0, import_react7.useState)(initial);
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  (0, import_react7.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_react7.default.createElement("div", { className, style: { position: "relative" } }, showCopyButton && /* @__PURE__ */ import_react7.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_react7.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react7.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_react7.default.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ import_react7.default.createElement("div", { style: { flex: 1, overflow: "auto" } }, nodes)) : nodes != null ? nodes : /* @__PURE__ */ import_react7.default.createElement(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "1em",
+        overflow: "auto",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    /* @__PURE__ */ import_react7.default.createElement("code", null, code)
+  ));
+}
 //# sourceMappingURL=components.cjs.map