@frontlit/text-editor 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/index.js

@@ -1,14 +1,14 @@
 "use client";
-import React5, { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
-import { Node, getSchema, generateText } from '@tiptap/core';
-import { useEditor, EditorContent } from '@tiptap/react';
+import React5, { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext, useId } from 'react';
+import { Node, Extension, getSchema, generateText } from '@tiptap/core';
+import { useEditor, EditorContent, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import Link from '@tiptap/extension-link';
 import { TableRow, Table, TableCell, TableHeader } from '@tiptap/extension-table';
 import Image from '@tiptap/extension-image';
 import Dropcursor from '@tiptap/extension-dropcursor';
-import Gapcursor from '@tiptap/extension-gapcursor';
+import Gapcursor$1 from '@tiptap/extension-gapcursor';
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 import Heading from '@tiptap/extension-heading';
 import Highlight from '@tiptap/extension-highlight';
@@ -18,12 +18,17 @@ import typescript from 'highlight.js/lib/languages/typescript';
 import json from 'highlight.js/lib/languages/json';
 import css from 'highlight.js/lib/languages/css';
 import xml from 'highlight.js/lib/languages/xml';
-import { Undo2, Redo2, ChevronDown, Bold, Italic, Underline, Code, Link as Link$1, List, ListOrdered, Quote, Plus, Minus, Table as Table$1, Image as Image$1, Trash2, Strikethrough, X, Check, Copy } from 'lucide-react';
+import Code from '@tiptap/extension-code';
+import { Undo2, Redo2, ChevronDown, Bold, Italic, Underline, Code as Code$1, Link as Link$1, List, ListOrdered, Quote, Plus, Minus, Table as Table$1, Image as Image$1, Trash2, Strikethrough, X, Check, OctagonAlert, CircleAlert, Info, Lightbulb, StickyNote, Copy } from 'lucide-react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from '@tiptap/pm/model';
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import CodeBlock from '@tiptap/extension-code-block';
+import { Gapcursor, TrailingNode } from '@tiptap/extensions';
 import { renderToReactElement } from '@tiptap/static-renderer';
+import { DynamicIcon } from 'lucide-react/dynamic';
 
 // src/editor.tsx
 
@@ -58,6 +63,92 @@ var CodeMirrorNode = Node.create({
     return ["pre", HTMLAttributes, 0];
   }
 });
+var CALLOUT_TYPES = ["note", "tip", "info", "warning", "danger"];
+function attr(name, fallback = null) {
+  return {
+    [name]: {
+      default: fallback,
+      parseHTML: (element) => {
+        const value = element.getAttribute(`data-${name}`);
+        if (value === null) return fallback;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return fallback;
+        }
+      },
+      renderHTML: (attributes) => attributes[name] === null || attributes[name] === void 0 ? {} : { [`data-${name}`]: JSON.stringify(attributes[name]) }
+    }
+  };
+}
+function block(name, spec) {
+  const tag = `div[data-docs-block="${name}"]`;
+  return Node.create({
+    name,
+    group: spec.group,
+    content: spec.content,
+    atom: spec.atom,
+    defining: true,
+    isolating: true,
+    addAttributes() {
+      return Object.assign(
+        {},
+        ...Object.entries(spec.attrs ?? {}).map(([key, value]) => attr(key, value))
+      );
+    },
+    parseHTML() {
+      return [{ tag }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return spec.atom ? ["div", { ...HTMLAttributes, "data-docs-block": name }] : ["div", { ...HTMLAttributes, "data-docs-block": name }, 0];
+    }
+  });
+}
+var DocsCode = Code.extend({ excludes: "" });
+function createDocsBlockExtensions() {
+  return [
+    DocsCode,
+    block("callout", {
+      group: "block",
+      content: "block+",
+      attrs: { type: null, title: null }
+    }),
+    block("tabs", { group: "block", content: "tab+" }),
+    block("tab", { content: "block+", attrs: { label: "" } }),
+    block("steps", { group: "block", content: "step+" }),
+    block("step", { content: "block+" }),
+    block("cards", { group: "block", content: "card+" }),
+    block("card", {
+      content: "block*",
+      attrs: { title: "", href: null, icon: null }
+    }),
+    block("accordions", {
+      group: "block",
+      content: "accordion+",
+      attrs: { type: null }
+    }),
+    block("accordion", { content: "block+", attrs: { title: "" } }),
+    block("codeGroup", { group: "block", content: "codeBlock+" }),
+    block("typeTable", { group: "block", atom: true, attrs: { rows: [] } })
+  ];
+}
+var CodeBlockTitle = Extension.create({
+  name: "codeBlockTitle",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["codeBlock"],
+        attributes: {
+          title: {
+            default: null,
+            parseHTML: (element) => element.getAttribute("data-title"),
+            renderHTML: (attributes) => attributes.title ? { "data-title": attributes.title } : {}
+          }
+        }
+      }
+    ];
+  }
+});
 
 // src/extensions.ts
 lowlight.registerLanguage("javascript", javascript);
@@ -69,6 +160,7 @@ var createExtensions = ({
   placeholder
 } = {}) => [
   StarterKit.configure({
+    code: false,
     codeBlock: false,
     // Configured/replaced explicitly below (custom options or a
     // `.extend()`) — disabled here to avoid tiptap's duplicate-extension
@@ -109,7 +201,7 @@ var createExtensions = ({
     color: "hsl(var(--foreground))",
     width: 2
   }),
-  Gapcursor,
+  Gapcursor$1,
   CodeBlockLowlight.configure({
     lowlight
   }),
@@ -128,7 +220,9 @@ var createExtensions = ({
     }
   }),
   Highlight,
-  CodeMirrorNode
+  CodeMirrorNode,
+  CodeBlockTitle,
+  ...createDocsBlockExtensions()
 ];
 var LinkEditorPopover = ({
   editor,
@@ -296,6 +390,394 @@ var LinkEditorPopover = ({
   );
 };
 var link_editor_popover_default = LinkEditorPopover;
+var input = "h-7 min-w-0 rounded border border-input bg-card px-2 text-xs text-foreground placeholder:text-muted-foreground";
+var smallButton = "inline-flex h-7 items-center gap-1 rounded px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
+var paragraph = (text = "") => text ? { type: "paragraph", content: [{ type: "text", text }] } : { type: "paragraph" };
+var docsBlockTemplates = {
+  callout: {
+    label: "Callout",
+    content: { type: "callout", attrs: { type: "info" }, content: [paragraph()] }
+  },
+  tabs: {
+    label: "Tabs",
+    content: {
+      type: "tabs",
+      content: ["Tab 1", "Tab 2"].map((label) => ({
+        type: "tab",
+        attrs: { label },
+        content: [paragraph()]
+      }))
+    }
+  },
+  steps: {
+    label: "Steps",
+    content: {
+      type: "steps",
+      content: [
+        {
+          type: "step",
+          content: [{ type: "heading", attrs: { level: 3 } }, paragraph()]
+        }
+      ]
+    }
+  },
+  cards: {
+    label: "Cards",
+    content: { type: "cards", content: [{ type: "card", attrs: { title: "Card" } }] }
+  },
+  accordions: {
+    label: "Accordion",
+    content: {
+      type: "accordions",
+      content: [
+        { type: "accordion", attrs: { title: "Question" }, content: [paragraph()] }
+      ]
+    }
+  },
+  codeGroup: {
+    label: "Code group",
+    content: {
+      type: "codeGroup",
+      content: [
+        { type: "codeBlock", attrs: { language: "bash", title: "Terminal" } },
+        { type: "codeBlock", attrs: { language: "ts", title: "index.ts" } }
+      ]
+    }
+  },
+  typeTable: {
+    label: "Type table",
+    content: {
+      type: "typeTable",
+      attrs: {
+        rows: [
+          {
+            name: "name",
+            type: "string",
+            default: null,
+            description: null,
+            required: false
+          }
+        ]
+      }
+    }
+  }
+};
+var childTemplates = {
+  tabs: (count) => ({
+    type: "tab",
+    attrs: { label: `Tab ${count + 1}` },
+    content: [paragraph()]
+  }),
+  steps: () => ({
+    type: "step",
+    content: [{ type: "heading", attrs: { level: 3 } }, paragraph()]
+  }),
+  cards: () => ({ type: "card", attrs: { title: "Card" } }),
+  accordions: () => ({
+    type: "accordion",
+    attrs: { title: "Question" },
+    content: [paragraph()]
+  }),
+  codeGroup: () => ({ type: "codeBlock", attrs: { language: null, title: "Code" } })
+};
+var childLabels = {
+  tabs: "Add tab",
+  steps: "Add step",
+  cards: "Add card",
+  accordions: "Add item",
+  codeGroup: "Add code block"
+};
+function BlockFrame({
+  label,
+  props,
+  children,
+  fields
+}) {
+  const { node, editor, getPos, deleteNode } = props;
+  const add = childTemplates[node.type.name];
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "te-block", "data-block": node.type.name, children: [
+    /* @__PURE__ */ jsxs("div", { className: "te-block__bar", contentEditable: false, children: [
+      /* @__PURE__ */ jsx("span", { className: "te-block__label", children: label }),
+      fields,
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1", children: [
+        add && editor.isEditable && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: smallButton,
+            onClick: () => {
+              const pos = getPos();
+              const current = typeof pos === "number" ? editor.state.doc.nodeAt(pos) : null;
+              if (typeof pos !== "number" || current?.type !== node.type) return;
+              const child = editor.schema.nodeFromJSON(add(current.childCount));
+              const end = current.childCount;
+              if (!current.canReplace(end, end, Fragment$1.from(child))) return;
+              const at = pos + current.nodeSize - 1;
+              editor.view.dispatch(
+                editor.state.tr.insert(at, child).scrollIntoView()
+              );
+              editor.view.focus();
+            },
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+              childLabels[node.type.name]
+            ]
+          }
+        ),
+        editor.isEditable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: smallButton,
+            "aria-label": `Remove ${label.toLowerCase()}`,
+            title: `Remove ${label.toLowerCase()}`,
+            onClick: deleteNode,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    children ?? /* @__PURE__ */ jsx(NodeViewContent, { className: "te-block__content" })
+  ] });
+}
+function ItemFrame({
+  props,
+  fields
+}) {
+  const { editor, getPos, deleteNode, node } = props;
+  const pos = getPos();
+  const parent = typeof pos === "number" ? editor.state.doc.resolve(pos).parent : null;
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "te-block-item", "data-block": node.type.name, children: [
+    (fields || (parent?.childCount ?? 0) > 1) && /* @__PURE__ */ jsxs("div", { className: "te-block__bar", contentEditable: false, children: [
+      fields,
+      (parent?.childCount ?? 0) > 1 && editor.isEditable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${smallButton} ml-auto`,
+          "aria-label": "Remove item",
+          title: "Remove item",
+          onClick: deleteNode,
+          children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(NodeViewContent, { className: "te-block__content" })
+  ] });
+}
+function TextField({
+  props,
+  name,
+  placeholder,
+  nullable,
+  className = "w-40"
+}) {
+  const value = props.node.attrs[name] ?? "";
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: `${input} ${className}`,
+      "aria-label": placeholder,
+      placeholder,
+      value,
+      disabled: !props.editor.isEditable,
+      onChange: (event) => props.updateAttributes({
+        [name]: nullable && !event.target.value ? null : event.target.value
+      })
+    }
+  );
+}
+function CalloutView(props) {
+  return /* @__PURE__ */ jsx(
+    BlockFrame,
+    {
+      label: "Callout",
+      props,
+      fields: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: input,
+            "aria-label": "Callout type",
+            value: props.node.attrs.type ?? "info",
+            disabled: !props.editor.isEditable,
+            onChange: (event) => props.updateAttributes({ type: event.target.value }),
+            children: CALLOUT_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            props,
+            name: "title",
+            placeholder: "Title (optional)",
+            nullable: true
+          }
+        )
+      ] })
+    }
+  );
+}
+function CodeBlockView(props) {
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "te-block-code", children: [
+    /* @__PURE__ */ jsxs("div", { className: "te-block__bar", contentEditable: false, children: [
+      /* @__PURE__ */ jsx(TextField, { props, name: "title", placeholder: "File name", nullable: true }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          props,
+          name: "language",
+          placeholder: "Language",
+          nullable: true,
+          className: "w-24"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) })
+  ] });
+}
+function TypeTableView(props) {
+  const rows = props.node.attrs.rows ?? [];
+  const editable = props.editor.isEditable;
+  const update = (index, patch) => props.updateAttributes({
+    rows: rows.map((row, i) => i === index ? { ...row, ...patch } : row)
+  });
+  const text = (index, key) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: `${input} w-full`,
+      "aria-label": key,
+      placeholder: key,
+      value: rows[index][key] ?? "",
+      disabled: !editable,
+      onChange: (event) => update(index, {
+        [key]: (key === "default" || key === "description") && !event.target.value ? null : event.target.value
+      })
+    }
+  );
+  return /* @__PURE__ */ jsx(BlockFrame, { label: "Type table", props, children: /* @__PURE__ */ jsxs("div", { contentEditable: false, className: "te-block__content", children: [
+    /* @__PURE__ */ jsxs("table", { className: "te-block-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Prop" }),
+        /* @__PURE__ */ jsx("th", { children: "Type" }),
+        /* @__PURE__ */ jsx("th", { children: "Default" }),
+        /* @__PURE__ */ jsx("th", { children: "Description" }),
+        /* @__PURE__ */ jsx("th", { children: "Required" }),
+        /* @__PURE__ */ jsx("th", {})
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: row names are edited in place.
+        /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: text(index, "name") }),
+          /* @__PURE__ */ jsx("td", { children: text(index, "type") }),
+          /* @__PURE__ */ jsx("td", { children: text(index, "default") }),
+          /* @__PURE__ */ jsx("td", { children: text(index, "description") }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Required",
+              checked: row.required,
+              disabled: !editable,
+              onChange: (event) => update(index, { required: event.target.checked })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: smallButton,
+              "aria-label": "Remove row",
+              disabled: !editable || rows.length === 1,
+              onClick: () => props.updateAttributes({
+                rows: rows.filter((_, i) => i !== index)
+              }),
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+            }
+          ) })
+        ] }, index)
+      )) })
+    ] }),
+    editable && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: smallButton,
+        onClick: () => props.updateAttributes({
+          rows: [
+            ...rows,
+            {
+              name: `prop${rows.length + 1}`,
+              type: "string",
+              default: null,
+              description: null,
+              required: false
+            }
+          ]
+        }),
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+          "Add row"
+        ]
+      }
+    )
+  ] }) });
+}
+var views = {
+  callout: CalloutView,
+  tabs: (props) => /* @__PURE__ */ jsx(BlockFrame, { label: "Tabs", props }),
+  tab: (props) => /* @__PURE__ */ jsx(
+    ItemFrame,
+    {
+      props,
+      fields: /* @__PURE__ */ jsx(TextField, { props, name: "label", placeholder: "Tab label" })
+    }
+  ),
+  steps: (props) => /* @__PURE__ */ jsx(BlockFrame, { label: "Steps", props }),
+  step: (props) => /* @__PURE__ */ jsx(ItemFrame, { props }),
+  cards: (props) => /* @__PURE__ */ jsx(BlockFrame, { label: "Cards", props }),
+  card: (props) => /* @__PURE__ */ jsx(
+    ItemFrame,
+    {
+      props,
+      fields: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TextField, { props, name: "title", placeholder: "Title" }),
+        /* @__PURE__ */ jsx(TextField, { props, name: "href", placeholder: "Link (/docs/\u2026)", nullable: true }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            props,
+            name: "icon",
+            placeholder: "Icon (e.g. Rocket)",
+            nullable: true,
+            className: "w-32"
+          }
+        )
+      ] })
+    }
+  ),
+  accordions: (props) => /* @__PURE__ */ jsx(BlockFrame, { label: "Accordion", props }),
+  accordion: (props) => /* @__PURE__ */ jsx(
+    ItemFrame,
+    {
+      props,
+      fields: /* @__PURE__ */ jsx(TextField, { props, name: "title", placeholder: "Title" })
+    }
+  ),
+  codeGroup: (props) => /* @__PURE__ */ jsx(BlockFrame, { label: "Code group", props }),
+  typeTable: TypeTableView
+};
+function withDocsBlockViews(extensions, profile) {
+  return extensions.map((extension) => {
+    const view = views[extension.name] ?? (profile === "documentation" && extension.name === "codeBlock" ? CodeBlockView : void 0);
+    if (!view || !(extension instanceof Node)) return extension;
+    return extension.extend({
+      addNodeView() {
+        return ReactNodeViewRenderer(view);
+      }
+    });
+  });
+}
 var iconButtonBase = "inline-flex h-8 w-8 items-center justify-center rounded border border-transparent text-foreground transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
 function IconButton({
   icon: Icon,
@@ -473,7 +955,7 @@ var Toolbar = ({
       /* @__PURE__ */ jsx(
         IconButton,
         {
-          icon: Code,
+          icon: Code$1,
           label: "Inline code",
           active: editor.isActive("code"),
           onClick: () => editor.chain().focus().toggleCode().run()
@@ -563,7 +1045,7 @@ var Toolbar = ({
                     setActivePopover(null);
                   },
                   children: [
-                    /* @__PURE__ */ jsx(Code, { className: "size-4" }),
+                    /* @__PURE__ */ jsx(Code$1, { className: "size-4" }),
                     "Code block"
                   ]
                 }
@@ -601,6 +1083,22 @@ var Toolbar = ({
                   ]
                 }
               ),
+              profile === "documentation" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
+                Object.entries(docsBlockTemplates).map(([name, block2]) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full rounded px-2.5 py-2 text-sm hover:bg-muted",
+                    onClick: () => {
+                      editor.chain().focus().insertContent(block2.content).run();
+                      setActivePopover(null);
+                    },
+                    children: block2.label
+                  },
+                  name
+                ))
+              ] }),
               editor.isActive("table") && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
                 /* @__PURE__ */ jsx(
@@ -797,7 +1295,7 @@ var InlineBubbleMenu = ({
           /* @__PURE__ */ jsx(
             InlineButton,
             {
-              icon: Code,
+              icon: Code$1,
               label: "Inline code",
               active: editor.isActive("code"),
               onClick: () => editor.chain().focus().toggleCode().run()
@@ -882,6 +1380,8 @@ function isSafeDocsUrl(value, image = false) {
 function createDocsExtensions() {
   return [
     StarterKit.configure({
+      code: false,
+      codeBlock: false,
       document: false,
       underline: false,
       link: false,
@@ -899,7 +1399,10 @@ function createDocsExtensions() {
     Table.configure({ resizable: false }),
     TableRow,
     TableCell.extend({ content: "paragraph" }),
-    TableHeader.extend({ content: "paragraph" })
+    TableHeader.extend({ content: "paragraph" }),
+    CodeBlock,
+    CodeBlockTitle,
+    ...createDocsBlockExtensions()
   ];
 }
 getSchema(createDocsExtensions());
@@ -931,10 +1434,19 @@ var Editor = Object.assign(
     const lastSerializedContentRef = useRef(JSON.stringify(initialContent ?? empty_doc_default));
     const refreshRef = useRef(refresh);
     const extensions = useMemo(
-      () => profile === "documentation" ? [
-        ...createDocsExtensions(),
-        Placeholder.configure({ placeholder: placeholder || "Write something\u2026" })
-      ] : createExtensions({ placeholder }),
+      () => withDocsBlockViews(
+        profile === "documentation" ? [
+          ...createDocsExtensions(),
+          Placeholder.configure({
+            placeholder: placeholder || "Write something\u2026"
+          }),
+          // Editing only: lets authors type before or after a block that
+          // starts or ends the doc. Empty paragraphs are not saved to Markdown.
+          Gapcursor,
+          TrailingNode
+        ] : createExtensions({ placeholder }),
+        profile ?? "default"
+      ),
       [placeholder, profile]
     );
     const changeTimeoutRef = useRef(null);
@@ -1289,10 +1801,12 @@ function textFromChildren(node) {
 function RenderedCodeBlock({
   node,
   children,
-  language
+  language,
+  title
 }) {
   const source = extractTextFromNode(node) || textFromChildren(children);
   return /* @__PURE__ */ jsxs("div", { className: "te-code-block", children: [
+    title && /* @__PURE__ */ jsx("div", { className: "te-code-block__title", children: title }),
     /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children }) }),
     /* @__PURE__ */ jsx(CopyCodeButton, { source })
   ] });
@@ -1328,6 +1842,148 @@ function extractDocsHeadings(json2) {
   if (json2) walk(json2);
   return headings;
 }
+function DocsTabs({
+  labels,
+  children,
+  className
+}) {
+  const id = useId();
+  const [active, setActive] = useState(0);
+  const panels = React5.Children.toArray(children);
+  function onKeyDown(event, index) {
+    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (!step) return;
+    event.preventDefault();
+    const next = (index + step + labels.length) % labels.length;
+    setActive(next);
+    document.getElementById(`${id}-tab-${next}`)?.focus();
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", className: "te-tabs__list", children: labels.map((label, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        id: `${id}-tab-${index}`,
+        type: "button",
+        role: "tab",
+        "aria-selected": index === active,
+        "aria-controls": `${id}-panel-${index}`,
+        tabIndex: index === active ? 0 : -1,
+        className: "te-tabs__tab",
+        onClick: () => setActive(index),
+        onKeyDown: (event) => onKeyDown(event, index),
+        children: label
+      },
+      index
+    )) }),
+    panels.map((panel, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${id}-panel-${index}`,
+        role: "tabpanel",
+        "aria-labelledby": `${id}-tab-${index}`,
+        hidden: index !== active,
+        className: "te-tabs__panel",
+        children: panel
+      },
+      index
+    ))
+  ] });
+}
+var childAttrs = (node) => {
+  const attrs = [];
+  node.forEach((child) => {
+    attrs.push(child.attrs);
+  });
+  return attrs;
+};
+var CALLOUT_ICONS = {
+  note: StickyNote,
+  tip: Lightbulb,
+  info: Info,
+  warning: CircleAlert,
+  danger: OctagonAlert
+};
+function Callout({ node, children }) {
+  const type = node.attrs.type ?? "info";
+  const Icon = CALLOUT_ICONS[type] ?? Info;
+  return /* @__PURE__ */ jsxs("div", { className: "te-callout", "data-type": type, role: "note", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "te-callout__icon", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: "te-callout__body", children: [
+      node.attrs.title && /* @__PURE__ */ jsx("p", { className: "te-callout__title", children: node.attrs.title }),
+      children
+    ] })
+  ] });
+}
+function Tabs({ node, children }) {
+  return /* @__PURE__ */ jsx(DocsTabs, { className: "te-tabs", labels: childAttrs(node).map((attrs) => attrs.label), children });
+}
+function CodeGroup({ node, children }) {
+  const labels = childAttrs(node).map(
+    (attrs, index) => attrs.title ?? attrs.language ?? `Code ${index + 1}`
+  );
+  return /* @__PURE__ */ jsx(DocsTabs, { className: "te-tabs te-code-group", labels, children });
+}
+function Steps({ children }) {
+  return /* @__PURE__ */ jsx("ol", { className: "te-steps", children });
+}
+function Step({ children }) {
+  return /* @__PURE__ */ jsx("li", { className: "te-step", children });
+}
+function Cards({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "te-cards", children });
+}
+var iconName = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Za-z])([0-9])/g, "$1-$2").toLowerCase();
+function Card({ node, children }) {
+  const { title, href, icon } = node.attrs;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(DynamicIcon, { name: iconName(icon), className: "te-card__icon", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "te-card__title", children: title }),
+    node.childCount > 0 && /* @__PURE__ */ jsx("div", { className: "te-card__body", children })
+  ] });
+  return href ? /* @__PURE__ */ jsx("a", { className: "te-card", href, children: body }) : /* @__PURE__ */ jsx("div", { className: "te-card", children: body });
+}
+function Accordions({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "te-accordions", children });
+}
+function Accordion({ node, children }) {
+  return /* @__PURE__ */ jsxs("details", { className: "te-accordion", children: [
+    /* @__PURE__ */ jsx("summary", { className: "te-accordion__title", children: node.attrs.title }),
+    /* @__PURE__ */ jsx("div", { className: "te-accordion__body", children })
+  ] });
+}
+function TypeTable({ node }) {
+  const rows = node.attrs.rows ?? [];
+  return /* @__PURE__ */ jsx("div", { className: "te-type-table", children: /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "Prop" }),
+      /* @__PURE__ */ jsx("th", { children: "Type" }),
+      /* @__PURE__ */ jsx("th", { children: "Default" }),
+      /* @__PURE__ */ jsx("th", { children: "Description" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsxs("td", { children: [
+        /* @__PURE__ */ jsx("code", { children: row.name }),
+        row.required && /* @__PURE__ */ jsx("span", { className: "te-type-table__required", children: " (required)" })
+      ] }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("code", { children: row.type }) }),
+      /* @__PURE__ */ jsx("td", { children: row.default === null ? "\u2014" : /* @__PURE__ */ jsx("code", { children: row.default }) }),
+      /* @__PURE__ */ jsx("td", { children: row.description ?? "" })
+    ] }, row.name)) })
+  ] }) });
+}
+var docsBlockMapping = {
+  callout: Callout,
+  tabs: Tabs,
+  tab: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  codeGroup: CodeGroup,
+  steps: Steps,
+  step: Step,
+  cards: Cards,
+  card: Card,
+  accordions: Accordions,
+  accordion: Accordion,
+  typeTable: TypeTable
+};
 var typographyClasses = (typography) => [
   typography?.fontFamily,
   typography?.fontSize,
@@ -1419,7 +2075,16 @@ function TextRenderer({
           const Tag = profile === "documentation" ? `h${level}` : "h3";
           return /* @__PURE__ */ jsx(Tag, { id, className: classes, children });
         },
-        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx(RenderedCodeBlock, { node, language: node?.attrs?.language, children }),
+        ...docsBlockMapping,
+        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx(
+          RenderedCodeBlock,
+          {
+            node,
+            language: node?.attrs?.language,
+            title: node?.attrs?.title,
+            children
+          }
+        ),
         codeMirror: ({ node, children }) => /* @__PURE__ */ jsx(RenderedCodeBlock, { node, children })
       },
       markMapping: {
@@ -1487,7 +2152,7 @@ function normalizeTextEditorContent(json2) {
   const text = typeof json2 === "string" ? json2.replace(/\r\n?/g, "\n") : "";
   return {
     type: "doc",
-    content: text ? text.split(/\n{2,}/).map((paragraph) => createParagraphNode(paragraph)) : []
+    content: text ? text.split(/\n{2,}/).map((paragraph2) => createParagraphNode(paragraph2)) : []
   };
 }