@k2b/cloud 0.6.0-rc.0

package/src/shared/markdown/client.ts

@@ -0,0 +1,130 @@
+/**
+ * Initialize Mermaid diagrams within a container element.
+ * Call this in onMount() of your client-side component.
+ *
+ * @param container - The container element containing rendered markdown
+ */
+export async function initMermaid(container: HTMLElement): Promise<void> {
+  const mermaid = (await import("mermaid")).default;
+  // Initialize mermaid with theme detection
+  const isDark = document.documentElement.classList.contains("dark");
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: "base",
+    themeVariables: isDark
+      ? {
+          darkMode: true,
+          background: "#09090b",
+          textColor: "#e5e7eb",
+          lineColor: "#6b7280",
+          primaryTextColor: "#e5e7eb",
+          secondaryTextColor: "#e5e7eb",
+          tertiaryTextColor: "#e5e7eb",
+          noteTextColor: "#e5e7eb",
+          mainBkg: "#111827",
+          secondBkg: "#1f2937",
+          tertiaryColor: "#374151",
+        }
+      : {
+          darkMode: false,
+          background: "#ffffff",
+          textColor: "#111827",
+          lineColor: "#6b7280",
+          primaryTextColor: "#111827",
+          secondaryTextColor: "#111827",
+          tertiaryTextColor: "#111827",
+          noteTextColor: "#111827",
+          mainBkg: "#ffffff",
+          secondBkg: "#f9fafb",
+          tertiaryColor: "#f3f4f6",
+        },
+  });
+
+  // Find mermaid blocks (rendered with fixed-height container from server)
+  const mermaidBlocks = container.querySelectorAll(".md-mermaid-block");
+  if (mermaidBlocks.length === 0) return;
+
+  const renderPromises = Array.from(mermaidBlocks).map(async (block, index) => {
+    const codeElement = block.querySelector("code.language-mermaid");
+    const innerContainer = block.querySelector(".h-full.w-full.flex") as HTMLElement;
+    if (!codeElement || !innerContainer) return;
+
+    const code = codeElement.textContent || "";
+    const mermaidId = `mermaid-${index}-${Date.now()}`;
+
+    try {
+      // Render mermaid to SVG
+      const { svg } = await mermaid.render(mermaidId, code);
+
+      // Remove loading indicator and hidden pre
+      const loading = innerContainer.querySelector(".md-mermaid-loading");
+      const pre = innerContainer.querySelector("pre");
+      loading?.remove();
+      pre?.remove();
+
+      // Create container for SVG with scaling
+      const svgContainer = document.createElement("div");
+      svgContainer.className = "flex items-center justify-center w-full h-full";
+      svgContainer.innerHTML = svg;
+
+      // Scale SVG to fit container
+      const svgElement = svgContainer.querySelector("svg");
+      if (svgElement) {
+        svgElement.style.maxWidth = "100%";
+        svgElement.style.maxHeight = "100%";
+        svgElement.style.width = "auto";
+        svgElement.style.height = "auto";
+      }
+
+      innerContainer.appendChild(svgContainer);
+    } catch (error) {
+      // Show error
+      const loading = innerContainer.querySelector(".md-mermaid-loading");
+      if (loading) {
+        loading.innerHTML = `
+            <div class="flex flex-col items-center gap-2 text-red-500">
+              <i class="ti ti-alert-circle text-xl"></i>
+              <span class="text-sm">Invalid mermaid syntax</span>
+            </div>
+          `;
+      }
+    }
+  });
+
+  await Promise.all(renderPromises);
+}
+
+/**
+ * Set external links to open in new tab.
+ * Call this in onMount() of your client-side component.
+ *
+ * @param container - The container element containing rendered markdown
+ */
+export function initExternalLinks(container: HTMLElement): void {
+  const links = container.querySelectorAll("a");
+  links.forEach((link) => {
+    if (link.href && !link.href.startsWith(window.location.origin)) {
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+    }
+  });
+}
+
+/**
+ * Initialize all markdown enhancements (Mermaid + external links).
+ * KaTeX is rendered server-side and doesn't need client initialization.
+ * Call this in onMount() of your client-side component.
+ *
+ * @param container - The container element containing rendered markdown
+ */
+export async function initMarkdownEnhancements(container: HTMLElement): Promise<void> {
+  await initMermaid(container);
+  initExternalLinks(container);
+}
+
+export const markdownClient = {
+  initMermaid,
+  initExternalLinks,
+  initEnhancements: initMarkdownEnhancements,
+  initMarkdownEnhancements,
+} as const;

package/src/shared/markdown/extensions/code.ts

@@ -0,0 +1,105 @@
+/**
+ * Code extension for marked
+ *
+ * Renders code blocks and inline code with consistent styling.
+ * Uses the dependency-free stdlib highlighter for common languages. Custom
+ * documentation languages stay shallow on purpose: highlighting must never
+ * change source text or require a browser-side parser.
+ */
+
+import { type Highlighter, highlight } from "@k2b/stdlib";
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml } from "../shared";
+
+const gqlHighlighter = highlight.compile([
+  { kind: "comment", match: /#[^\n]*/ },
+  { kind: "string", match: /"""[\s\S]*?"""|"(?:\\[\s\S]|[^"\\])*"/ },
+  { kind: "variable", match: /\$[a-zA-Z_][a-zA-Z0-9_]*/ },
+  {
+    kind: "keyword",
+    match: /\b(?:query|mutation|subscription|fragment|on|type|input|enum|interface|union|scalar|schema|extend|directive)\b/,
+  },
+  { kind: "number", match: /\b-?\d+(?:\.\d+)?\b/ },
+  { kind: "operator", match: /[!$():=@[\]{|}]+/ },
+]);
+
+const yamlHighlighter = highlight.compile([
+  { kind: "comment", match: /#[^\n]*/ },
+  { kind: "string", match: /"(?:\\[\s\S]|[^"\\])*"|'(?:''|[^'])*'/ },
+  { kind: "variable", match: /[&*!][a-zA-Z_][a-zA-Z0-9_-]*/ },
+  { kind: "keyword", match: /\b(?:true|false|null|yes|no|on|off)\b/i },
+  { kind: "number", match: /\b-?\d+(?:\.\d+)?\b/ },
+  { kind: "operator", match: /---|\.\.\.|[|>{}[\],:&*!?-]+/ },
+]);
+
+const languageHighlighters: Readonly<Record<string, Highlighter>> = {
+  bash: highlight.presets.shell,
+  gql: gqlHighlighter,
+  graphql: gqlHighlighter,
+  javascript: highlight.presets.code,
+  js: highlight.presets.code,
+  jsx: highlight.presets.code,
+  script: highlight.presets.code,
+  sh: highlight.presets.shell,
+  shell: highlight.presets.shell,
+  ts: highlight.presets.code,
+  tsx: highlight.presets.code,
+  typescript: highlight.presets.code,
+  yaml: yamlHighlighter,
+  yml: yamlHighlighter,
+  zsh: highlight.presets.shell,
+};
+
+const renderCode = (source: string, language?: string): string => {
+  const highlighter = language ? languageHighlighters[language.toLowerCase()] : undefined;
+  return highlighter ? highlighter(source) : escapeHtml(source);
+};
+
+export function codeExtension(): MarkedExtension {
+  return {
+    renderer: {
+      code(token: Tokens.Code): string {
+        const { text, lang } = token;
+        const langLower = lang?.toLowerCase();
+        const renderedCode = renderCode(text, langLower);
+        const isMermaid = langLower === "mermaid";
+
+        // Language class for syntax highlighting / mermaid detection
+        const langClass = lang ? ` language-${escapeHtml(lang)}` : "";
+
+        // Special rendering for mermaid blocks with fixed height container
+        if (isMermaid) {
+          return (
+            `<div class="md-mermaid-block my-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" style="height: 400px;">` +
+            `<div class="h-full w-full flex items-center justify-center p-4">` +
+            `<pre class="hidden"><code class="language-mermaid">${renderedCode}</code></pre>` +
+            `<div class="md-mermaid-loading text-dimmed text-sm flex items-center gap-2">` +
+            `<i class="ti ti-loader-2 animate-spin"></i> Loading diagram...` +
+            `</div>` +
+            `</div>` +
+            `</div>`
+          );
+        }
+
+        // Language badge if specified
+        const langBadge = lang
+          ? `<span class="absolute top-2 right-2 text-xs text-gray-400 dark:text-gray-500 font-mono select-none">${escapeHtml(lang)}</span>`
+          : "";
+
+        return (
+          `<div class="md-code-block relative my-3">` +
+          langBadge +
+          `<pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md p-4 overflow-x-auto">` +
+          `<code class="text-sm font-mono text-gray-800 dark:text-gray-200 whitespace-pre${langClass}">${renderedCode}</code>` +
+          `</pre>` +
+          `</div>`
+        );
+      },
+
+      codespan(token: Tokens.Codespan): string {
+        const escapedCode = escapeHtml(token.text);
+        return `<code class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono">${escapedCode}</code>`;
+      },
+    },
+  };
+}

package/src/shared/markdown/extensions/guided-help.ts

@@ -0,0 +1,100 @@
+import type { MarkedExtension, Tokens } from "marked";
+
+type GuidedBlock = "compare" | "reference" | "steps";
+
+const guidedBlocks = new Set<GuidedBlock>(["compare", "reference", "steps"]);
+const headingMetaPattern = /\s+\{icon="([a-z0-9-]+)"\}\s*$/i;
+
+const slug = (value: string): string =>
+  value
+    .toLocaleLowerCase()
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "") || "section";
+
+const headingTitleTokens = (token: Tokens.Heading, hasMetadata: boolean): Tokens.Heading["tokens"] => {
+  if (!hasMetadata) return token.tokens;
+
+  const tokens = [...token.tokens];
+  const trailingToken = tokens.at(-1);
+  if (trailingToken?.type !== "text") return tokens;
+
+  const raw = trailingToken.raw.replace(headingMetaPattern, "");
+  const text = trailingToken.text.replace(headingMetaPattern, "");
+  if (!raw && !text) {
+    tokens.pop();
+  } else {
+    tokens[tokens.length - 1] = { ...trailingToken, raw, text };
+  }
+
+  return tokens;
+};
+
+/**
+ * Help-only Markdown affordances. The source stays useful as plain Markdown:
+ * the directives merely add reading semantics to otherwise ordinary lists.
+ */
+export function guidedHelpExtension(): MarkedExtension {
+  const headingIds = new Map<string, number>();
+
+  return {
+    hooks: {
+      preprocess(source) {
+        headingIds.clear();
+        return source;
+      },
+    },
+    renderer: {
+      paragraph(token: Tokens.Paragraph) {
+        if (token.tokens.length !== 1 || token.tokens[0]?.type !== "strong") return false;
+        return `<p class="help-eyebrow">${this.parser.parseInline(token.tokens)}</p>`;
+      },
+      heading(token: Tokens.Heading) {
+        const metadata = token.text.match(headingMetaPattern);
+        const title = metadata ? token.text.slice(0, metadata.index).trim() : token.text;
+        const baseId = slug(title);
+        const occurrence = headingIds.get(baseId) ?? 0;
+        headingIds.set(baseId, occurrence + 1);
+        const id = occurrence === 0 ? baseId : `${baseId}-${occurrence + 1}`;
+
+        if (token.depth === 2) {
+          const icon = metadata?.[1] ? `ti ti-${metadata[1]}` : "ti ti-point";
+          return `<h2 id="${id}" class="help-section-title" data-help-icon="${icon}">
+  <span class="help-section-icon" aria-hidden="true"><i class="${icon}"></i></span>
+  <span>${this.parser.parseInline(headingTitleTokens(token, Boolean(metadata)))}</span>
+</h2>`;
+        }
+
+        return `<h${token.depth} id="${id}">${this.parser.parseInline(token.tokens)}</h${token.depth}>`;
+      },
+    },
+    extensions: [
+      {
+        name: "guidedHelpBlock",
+        level: "block",
+        start(source) {
+          return source.match(/^:::(?:compare|reference|steps)\b/)?.index;
+        },
+        tokenizer(source) {
+          const match = source.match(/^:::(compare|reference|steps)[ \t]*\n([\s\S]*?)\n:::(?:\n|$)/);
+          if (!match) return undefined;
+          const kind = match[1] as GuidedBlock;
+          if (!guidedBlocks.has(kind)) return undefined;
+          const content = match[2]?.trim() ?? "";
+          return {
+            type: "guidedHelpBlock",
+            raw: match[0],
+            kind,
+            tokens: this.lexer.blockTokens(content),
+          };
+        },
+        renderer(token: Tokens.Generic) {
+          const kind = token.kind as GuidedBlock;
+          return `<div class="help-${kind}">${this.parser.parse(token.tokens as Tokens.Generic[])}</div>`;
+        },
+        childTokens: ["tokens"],
+      },
+    ],
+  };
+}

package/src/shared/markdown/extensions/images.ts

@@ -0,0 +1,79 @@
+/**
+ * Images extension for marked
+ *
+ * Renders images with the same visual style as the CodeMirror editor:
+ * - Centered figure with max-height constraint
+ * - Rounded border
+ * - Optional caption from alt text
+ *
+ * Supports an optional Pandoc/HFM-style size suffix on the URL:
+ *
+ *     ![alt](https://example.com/photo.png =400x300)   // both
+ *     ![alt](https://example.com/photo.png =400x)      // width only
+ *     ![alt](https://example.com/photo.png =x300)      // height only
+ *
+ * Marked's default tokenizer treats the trailing ` =WxH` as part of the
+ * URL — we parse and strip it here before emitting the `<img>` tag.
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml, IMAGE_STYLES } from "../shared";
+
+const SIZE_SUFFIX_REGEX = /\s+=(\d+)?x(\d+)?$/;
+
+type ParsedImage = {
+  href: string;
+  width: string | null;
+  height: string | null;
+};
+
+const parseImageUrl = (href: string): ParsedImage => {
+  const match = SIZE_SUFFIX_REGEX.exec(href);
+  if (!match) return { href, width: null, height: null };
+  return {
+    href: href.slice(0, match.index),
+    width: match[1] ?? null,
+    height: match[2] ?? null,
+  };
+};
+
+export function imagesExtension(): MarkedExtension {
+  return {
+    renderer: {
+      image(token: Tokens.Image): string {
+        const { href: rawHref, title, text: alt } = token;
+        const { href, width, height } = parseImageUrl(rawHref);
+
+        // Build the image element
+        const imgAttrs = [`src="${escapeHtml(href)}"`, `alt="${escapeHtml(alt || "")}"`, `loading="lazy"`, `class="${IMAGE_STYLES.img}"`];
+
+        if (title) imgAttrs.push(`title="${escapeHtml(title)}"`);
+        if (width) imgAttrs.push(`width="${width}"`);
+        if (height) imgAttrs.push(`height="${height}"`);
+
+        // Inline style overrides the global `max-height: 400px` from
+        // IMAGE_STYLES.img only when the user opted into a custom size.
+        if (width || height) {
+          const styles: string[] = ["max-height: none"];
+          if (width) styles.push(`max-width: ${width}px`);
+          imgAttrs.push(`style="${styles.join("; ")}"`);
+        }
+
+        const imgHtml = `<img ${imgAttrs.join(" ")} />`;
+
+        // Build caption if alt text provided
+        const captionHtml = alt ? `<figcaption class="${IMAGE_STYLES.caption}">${escapeHtml(alt)}</figcaption>` : "";
+
+        // Wrap in figure for centering
+        return (
+          `<div class="${IMAGE_STYLES.wrapper}">` +
+          `<figure class="${IMAGE_STYLES.figure}">` +
+          imgHtml +
+          captionHtml +
+          `</figure>` +
+          `</div>`
+        );
+      },
+    },
+  };
+}

package/src/shared/markdown/extensions/info-blocks.ts

@@ -0,0 +1,97 @@
+/**
+ * Info Blocks Extension for Marked
+ *
+ * Renders custom info blocks with syntax:
+ * :::note
+ * Content here
+ * :::
+ *
+ * The type follows the colons directly — `::: note` with a space does not
+ * match. An optional argument after the type overrides the label:
+ * `:::warning Before deleting`.
+ *
+ * Supported types: note, info, success, warning, danger
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { NOTICE_CARD_CLASSES, NOTICE_CARD_ICONS, type NoticeTone } from "@k2b/ui";
+import { escapeHtml } from "../shared";
+
+type BlockType = "note" | "info" | "success" | "warning" | "danger";
+
+const blockConfig: Record<BlockType, { label: string; tone: NoticeTone }> = {
+  note: {
+    label: "Note",
+    tone: "neutral",
+  },
+  info: {
+    label: "Info",
+    tone: "info",
+  },
+  success: {
+    label: "Success",
+    tone: "success",
+  },
+  warning: {
+    label: "Warning",
+    tone: "warning",
+  },
+  danger: {
+    label: "Danger",
+    tone: "danger",
+  },
+};
+
+const renderInlineContent = (content: string): string => {
+  return content
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>")
+    .replace(/`([^`]+)`/g, '<code class="bg-black/10 dark:bg-white/10 px-1 py-0.5 rounded text-sm">$1</code>')
+    .replace(/\n/g, "<br>");
+};
+
+export function infoBlocksExtension(): MarkedExtension {
+  return {
+    extensions: [
+      {
+        name: "infoBlock",
+        level: "block",
+        start(src: string) {
+          return src.match(/^:::/)?.index;
+        },
+        tokenizer(src: string) {
+          const match = src.match(/^:::(\w+)(?:[ \t]+([^\n]+))?\s*\n([\s\S]*?)\n:::/);
+          if (!match) return undefined;
+
+          const typeStr = match[1]?.toLowerCase() as BlockType;
+          if (!blockConfig[typeStr]) return undefined;
+
+          return {
+            type: "infoBlock",
+            raw: match[0],
+            blockType: typeStr,
+            title: match[2]?.trim(),
+            content: match[3]?.trim() ?? "",
+          };
+        },
+        renderer(token: Tokens.Generic) {
+          const blockType = token.blockType as BlockType;
+          const config = blockConfig[blockType];
+          const content = escapeHtml(token.content as string);
+          const title = escapeHtml((token.title as string | undefined) ?? config.label);
+          const renderedContent = renderInlineContent(content);
+
+          return `<aside class="${NOTICE_CARD_CLASSES.root}" data-tone="${config.tone}">
+  <div class="${NOTICE_CARD_CLASSES.inner}">
+    <i class="${NOTICE_CARD_ICONS[config.tone]} ${NOTICE_CARD_CLASSES.icon}" aria-hidden="true"></i>
+    <div class="${NOTICE_CARD_CLASSES.content}">
+      <p class="${NOTICE_CARD_CLASSES.title}">${title}</p>
+      <div class="${NOTICE_CARD_CLASSES.body}">${renderedContent}</div>
+    </div>
+  </div>
+</aside>`;
+        },
+      },
+    ],
+  };
+}

package/src/shared/markdown/extensions/katex.ts

@@ -0,0 +1,120 @@
+/**
+ * KaTeX extension for marked
+ *
+ * Renders LaTeX math expressions server-side:
+ * - Inline: $..$ or \(..\)
+ * - Block: $$...$$ or \[..\] or ```math
+ */
+
+import katex from "katex";
+import type { MarkedExtension, Tokens } from "marked";
+
+/**
+ * Token shape produced by the math tokenizers below. The marked extension API
+ * types renderer params as `Tokens.Generic` (open `[index: string]: any`), so
+ * we narrow at the call boundary by reading `latex` off the typed sub-shape.
+ */
+type MathToken = Tokens.Generic & { latex: string };
+
+function renderBlockMath(latex: string): string {
+  try {
+    const html = katex.renderToString(latex, {
+      throwOnError: false,
+      displayMode: true,
+    });
+    return `<div class="md-katex-block my-3 flex items-center justify-center">${html}</div>`;
+  } catch {
+    return `<div class="md-katex-block my-3 flex items-center justify-center text-red-500 text-sm"><i class="ti ti-alert-circle mr-1"></i> Invalid LaTeX</div>`;
+  }
+}
+
+function renderInlineMath(latex: string): string {
+  try {
+    const html = katex.renderToString(latex, {
+      throwOnError: false,
+      displayMode: false,
+    });
+    return `<span class="md-katex-inline">${html}</span>`;
+  } catch {
+    return `<span class="md-katex-inline text-red-500 font-mono text-sm">$${latex}$</span>`;
+  }
+}
+
+export function katexExtension(): MarkedExtension {
+  return {
+    extensions: [
+      // ```math code blocks
+      {
+        name: "mathCodeBlock",
+        level: "block",
+        start(src: string) {
+          const match = src.match(/^```math/m);
+          return match ? match.index : undefined;
+        },
+        tokenizer(src: string) {
+          const match = /^```math\n([\s\S]*?)\n```/.exec(src);
+          if (match) {
+            return {
+              type: "mathCodeBlock",
+              raw: match[0],
+              latex: match[1]!.trim(),
+            };
+          }
+          return undefined;
+        },
+        renderer(token: Tokens.Generic) {
+          const latex = (token as MathToken).latex;
+          return renderBlockMath(latex);
+        },
+      },
+      // Block math with $$ ... $$
+      {
+        name: "blockMath",
+        level: "block",
+        start(src: string) {
+          const match = src.match(/\$\$/);
+          return match ? match.index : undefined;
+        },
+        tokenizer(src: string) {
+          const match = /^\$\$([\s\S]+?)\$\$/.exec(src);
+          if (match) {
+            return {
+              type: "blockMath",
+              raw: match[0],
+              latex: match[1]!.trim(),
+            };
+          }
+          return undefined;
+        },
+        renderer(token: Tokens.Generic) {
+          const latex = (token as MathToken).latex;
+          return renderBlockMath(latex);
+        },
+      },
+      // Inline math with $ ... $
+      {
+        name: "inlineMath",
+        level: "inline",
+        start(src: string) {
+          const match = src.match(/(?<!\$)\$(?!\$)/);
+          return match ? match.index : undefined;
+        },
+        tokenizer(src: string) {
+          const match = /^(?<!\$)\$(?!\$)([^$\n]+)\$(?!\$)/.exec(src);
+          if (match) {
+            return {
+              type: "inlineMath",
+              raw: match[0],
+              latex: match[1]!.trim(),
+            };
+          }
+          return undefined;
+        },
+        renderer(token: Tokens.Generic) {
+          const latex = (token as MathToken).latex;
+          return renderInlineMath(latex);
+        },
+      },
+    ],
+  };
+}

package/src/shared/markdown/extensions/links.ts

@@ -0,0 +1,43 @@
+/**
+ * Links extension for marked
+ *
+ * Renders links with the same visual style as the CodeMirror editor:
+ * - Shows [label] in bold followed by an arrow icon
+ * - Opens in new tab with noopener,noreferrer
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml, LINK_STYLES } from "../shared";
+
+export type LinksExtensionOptions = {
+  /** Open external links in a new tab by default. */
+  externalTarget?: "_blank" | "_self";
+  /** Existing content keeps `_blank`; help opts into in-app navigation. */
+  internalTarget?: "_blank" | "_self";
+};
+
+const isExternalHref = (href: string) => /^(?:https?:)?\/\//i.test(href);
+
+export function linksExtension(options: LinksExtensionOptions = {}): MarkedExtension {
+  return {
+    renderer: {
+      link(token: Tokens.Link): string {
+        const { href, title, text } = token;
+
+        // Build title attribute if provided
+        const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+
+        // Match CodeMirror style: [label] with arrow icon
+        const target = isExternalHref(href) ? (options.externalTarget ?? "_blank") : (options.internalTarget ?? "_blank");
+        const targetAttrs = target === "_blank" ? ' target="_blank" rel="noopener noreferrer"' : "";
+
+        return (
+          `<a href="${escapeHtml(href)}"${titleAttr}${targetAttrs} class="${LINK_STYLES.link}">` +
+          `<span class="${LINK_STYLES.label}">[${escapeHtml(text)}]</span>` +
+          `<i class="${LINK_STYLES.icon} ti ti-arrow-up-right text-xs" aria-hidden="true"></i>` +
+          `</a>`
+        );
+      },
+    },
+  };
+}