@usefragments/ui 1.0.0

package/dist/codeblock.js

@@ -0,0 +1,561 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { TabsRoot, TabsList, Tab, TabsPanel } from "./components/Tabs/index.js";
+import styles from "./components/CodeBlock/CodeBlock.module.scss.js";
+let _codeToHtml = null;
+let _shikiLoadPromise = null;
+let _shikiFailed = false;
+async function loadShikiDeps() {
+  if (_codeToHtml) return;
+  if (_shikiFailed) return;
+  if (!_shikiLoadPromise) {
+    _shikiLoadPromise = (async () => {
+      try {
+        const shiki = await import("shiki");
+        _codeToHtml = shiki.codeToHtml;
+      } catch {
+        _shikiFailed = true;
+      }
+    })();
+  }
+  await _shikiLoadPromise;
+}
+const LANGUAGE_ALIASES = {
+  ts: "typescript",
+  js: "javascript",
+  text: "plaintext"
+};
+function CopyIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+    }
+  );
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function dedent(str) {
+  const lines = str.split("\n");
+  let minIndent = Infinity;
+  for (const line of lines) {
+    if (line.trim() === "") continue;
+    const match = line.match(/^(\s*)/);
+    if (match) {
+      minIndent = Math.min(minIndent, match[1].length);
+    }
+  }
+  if (minIndent === Infinity || minIndent === 0) {
+    return str;
+  }
+  return lines.map((line) => line.slice(minIndent)).join("\n");
+}
+function normalizeIndentation(str) {
+  var _a, _b;
+  const lines = str.split("\n");
+  if (lines.length <= 1) return str;
+  let minIndent = Infinity;
+  const firstLineIndent = ((_a = lines[0].match(/^(\s*)/)) == null ? void 0 : _a[1].length) ?? 0;
+  for (let i = 1; i < lines.length; i += 1) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+    const indent = ((_b = line.match(/^(\s*)/)) == null ? void 0 : _b[1].length) ?? 0;
+    minIndent = Math.min(minIndent, indent);
+  }
+  if (firstLineIndent > 0) {
+    minIndent = Math.min(minIndent, firstLineIndent);
+  }
+  if (minIndent === Infinity || minIndent === 0) return str;
+  return lines.map((line) => {
+    var _a2;
+    return line.slice(Math.min(minIndent, ((_a2 = line.match(/^(\s*)/)) == null ? void 0 : _a2[1].length) ?? 0));
+  }).join("\n");
+}
+function trimTrailingWhitespace(str) {
+  return str.split("\n").map((line) => line.replace(/[ \t]+$/g, "")).join("\n");
+}
+function findTagEnd(line) {
+  let quote = null;
+  let escaped = false;
+  let braceDepth = 0;
+  let bracketDepth = 0;
+  let parenDepth = 0;
+  for (let i = 1; i < line.length; i += 1) {
+    const char = line[i];
+    if (quote) {
+      if (char === "\\" && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (char === quote && !escaped) {
+        quote = null;
+      }
+      escaped = false;
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+      continue;
+    }
+    if (char === "{") braceDepth += 1;
+    else if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+    else if (char === "[") bracketDepth += 1;
+    else if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    else if (char === "(") parenDepth += 1;
+    else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+    else if (char === ">" && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+      return i;
+    }
+  }
+  return -1;
+}
+function splitJsxAttributes(attrs) {
+  const parts = [];
+  let current = "";
+  let quote = null;
+  let escaped = false;
+  let braceDepth = 0;
+  let bracketDepth = 0;
+  let parenDepth = 0;
+  for (const char of attrs) {
+    if (quote) {
+      current += char;
+      if (char === "\\" && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (char === quote && !escaped) {
+        quote = null;
+      }
+      escaped = false;
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+      current += char;
+      continue;
+    }
+    if (char === "{") braceDepth += 1;
+    else if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+    else if (char === "[") bracketDepth += 1;
+    else if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    else if (char === "(") parenDepth += 1;
+    else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+    if (/\s/.test(char) && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+      if (current.trim().length > 0) {
+        parts.push(current.trim());
+        current = "";
+      }
+      continue;
+    }
+    current += char;
+  }
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+  return parts;
+}
+function formatLongJsxTagLine(line) {
+  var _a;
+  const maxInlineLength = 110;
+  if (line.length <= maxInlineLength) return line;
+  const indent = ((_a = line.match(/^(\s*)/)) == null ? void 0 : _a[1]) ?? "";
+  const trimmed = line.trimStart();
+  if (!trimmed.startsWith("<") || trimmed.startsWith("</") || trimmed.startsWith("<!") || trimmed.startsWith("<?")) {
+    return line;
+  }
+  const tagEnd = findTagEnd(trimmed);
+  if (tagEnd === -1) return line;
+  if (trimmed.slice(tagEnd + 1).trim().length > 0) return line;
+  const rawTagBody = trimmed.slice(1, tagEnd).trim();
+  const isSelfClosing = rawTagBody.endsWith("/");
+  const tagBody = isSelfClosing ? rawTagBody.slice(0, -1).trimEnd() : rawTagBody;
+  const firstSpace = tagBody.search(/\s/);
+  if (firstSpace === -1) return line;
+  const tagName = tagBody.slice(0, firstSpace);
+  if (!/^[A-Za-z][\w.:-]*$/.test(tagName)) return line;
+  const attrsSource = tagBody.slice(firstSpace).trim();
+  if (!attrsSource.includes("=") && !attrsSource.includes("{...")) return line;
+  const attrs = splitJsxAttributes(attrsSource);
+  if (attrs.length === 0) return line;
+  const attrIndent = `${indent}  `;
+  const close = isSelfClosing ? "/>" : ">";
+  return [
+    `${indent}<${tagName}`,
+    ...attrs.map((attr) => `${attrIndent}${attr}`),
+    `${indent}${close}`
+  ].join("\n");
+}
+function formatLongJsxTags(code) {
+  return code.split("\n").flatMap((line) => formatLongJsxTagLine(line).split("\n")).join("\n");
+}
+function normalizeCode(code) {
+  const trimmed = code.trim();
+  if (trimmed.length === 0) return "";
+  const normalized = normalizeIndentation(trimmed);
+  const dedented = dedent(normalized);
+  const withoutTrailingWhitespace = trimTrailingWhitespace(dedented);
+  return formatLongJsxTags(withoutTrailingWhitespace);
+}
+function parseLineSpec(spec) {
+  const lines = /* @__PURE__ */ new Set();
+  if (!spec) return lines;
+  for (const item of spec) {
+    if (typeof item === "number") {
+      lines.add(item);
+    } else if (typeof item === "string") {
+      const rangeMatch = item.match(/^(\d+)-(\d+)$/);
+      if (rangeMatch) {
+        const start = parseInt(rangeMatch[1], 10);
+        const end = parseInt(rangeMatch[2], 10);
+        for (let i = start; i <= end; i++) {
+          lines.add(i);
+        }
+      } else {
+        const num = parseInt(item, 10);
+        if (!isNaN(num)) {
+          lines.add(num);
+        }
+      }
+    }
+  }
+  return lines;
+}
+function processShikiHtml(html, options) {
+  const { showLineNumbers, startLineNumber, highlightLines, addedLines, removedLines } = options;
+  const hasDiff = addedLines.size > 0 || removedLines.size > 0;
+  if (!showLineNumbers && highlightLines.size === 0 && !hasDiff) {
+    return html;
+  }
+  const codeMatch = html.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+  if (!codeMatch) return html;
+  const codeContent = codeMatch[1];
+  const lines = codeContent.split("\n");
+  const processedLines = lines.map((line, index) => {
+    const lineNum = index + 1;
+    const displayLineNum = startLineNumber + index;
+    const isHighlighted = highlightLines.has(lineNum);
+    const isAdded = addedLines.has(lineNum);
+    const isRemoved = removedLines.has(lineNum);
+    const lineClasses = ["line"];
+    if (isHighlighted) lineClasses.push("highlighted");
+    if (isAdded) lineClasses.push("diff-added");
+    if (isRemoved) lineClasses.push("diff-removed");
+    const lineClass = lineClasses.join(" ");
+    const diffMarker = isAdded ? "+" : isRemoved ? "-" : " ";
+    if (showLineNumbers || hasDiff) {
+      const lineNumHtml = showLineNumbers ? `<span class="line-number">${displayLineNum}</span>` : "";
+      const diffMarkerHtml = hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : "";
+      return `<span class="${lineClass}">${lineNumHtml}${diffMarkerHtml}${line}</span>`;
+    }
+    return `<span class="${lineClass}">${line}</span>`;
+  });
+  return html.replace(/<code[^>]*>[\s\S]*?<\/code>/, `<code>${processedLines.join("\n")}</code>`);
+}
+const CodeBlockBase = React.forwardRef(function CodeBlock2({
+  code,
+  language = "tsx",
+  theme = "one-dark-pro",
+  showCopy = true,
+  title,
+  filename,
+  caption,
+  showLineNumbers = false,
+  startLineNumber = 1,
+  highlightLines,
+  addedLines,
+  removedLines,
+  wordWrap = false,
+  maxHeight,
+  collapsible = false,
+  defaultCollapsed = false,
+  collapsedLines = 5,
+  compact = false,
+  persistentCopy = false,
+  copyPlacement = "auto",
+  bg,
+  onCopy,
+  className,
+  ...htmlProps
+}, ref) {
+  const [copied, setCopied] = useState(false);
+  const [highlight, setHighlight] = useState({ html: "", loading: true });
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const trimmedCode = useMemo(() => normalizeCode(code), [code]);
+  const codeLines = trimmedCode.split("\n");
+  const totalLines = codeLines.length;
+  const shouldShowCollapse = collapsible && totalLines > collapsedLines;
+  const visibleCode = shouldShowCollapse && isCollapsed ? codeLines.slice(0, collapsedLines).join("\n") : trimmedCode;
+  const highlightSet = useMemo(() => parseLineSpec(highlightLines), [highlightLines]);
+  const addedSet = useMemo(() => parseLineSpec(addedLines), [addedLines]);
+  const removedSet = useMemo(() => parseLineSpec(removedLines), [removedLines]);
+  const hasDiff = addedSet.size > 0 || removedSet.size > 0;
+  const resolvedCopyPlacement = copyPlacement === "auto" ? filename ? "header" : "overlay" : copyPlacement;
+  const shouldShowHeaderCopy = showCopy && !persistentCopy && resolvedCopyPlacement === "header";
+  const shouldShowOverlayCopy = showCopy && !persistentCopy && resolvedCopyPlacement === "overlay";
+  const shouldRenderHeader = Boolean(filename) || shouldShowHeaderCopy;
+  useEffect(() => {
+    let cancelled = false;
+    setHighlight((prev) => ({ ...prev, loading: true }));
+    const run = async () => {
+      await loadShikiDeps();
+      const fallbackHtml = `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`;
+      if (_shikiFailed || !_codeToHtml) {
+        if (_shikiFailed && process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] CodeBlock: shiki is not installed. Install it with: npm install shiki"
+          );
+        }
+        return fallbackHtml;
+      }
+      try {
+        const resolvedLang = LANGUAGE_ALIASES[language] || language;
+        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme });
+        return processShikiHtml(html, {
+          showLineNumbers,
+          startLineNumber,
+          highlightLines: highlightSet,
+          addedLines: addedSet,
+          removedLines: removedSet
+        });
+      } catch (err) {
+        if (process.env.NODE_ENV !== "production") {
+          console.error("Syntax highlighting failed:", err);
+        }
+        return fallbackHtml;
+      }
+    };
+    run().then((html) => {
+      if (!cancelled) {
+        setHighlight({ html, loading: false });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    visibleCode,
+    language,
+    theme,
+    showLineNumbers,
+    startLineNumber,
+    highlightSet,
+    addedSet,
+    removedSet
+  ]);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(trimmedCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      onCopy == null ? void 0 : onCopy();
+    } catch (err) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Failed to copy:", err);
+      }
+    }
+  }, [trimmedCode, onCopy]);
+  const toggleCollapsed = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const classNames = [
+    styles.container,
+    showLineNumbers && styles.withLineNumbers,
+    hasDiff && styles.withDiff,
+    wordWrap && styles.wordWrap,
+    compact && styles.compact,
+    className
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [
+    styles.wrapper,
+    persistentCopy && styles.persistentCopyWrapper,
+    shouldShowOverlayCopy && styles.withCopyOverlay
+  ].filter(Boolean).join(" ");
+  const codeContainerStyle = maxHeight ? { maxHeight, overflow: "auto" } : {};
+  const wrapperStyle = bg ? { ["--fui-code-bg"]: bg } : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref, ...htmlProps, className: classNames, "data-theme": "dark", children: [
+    title && /* @__PURE__ */ jsx("div", { className: styles.title, children: title }),
+    /* @__PURE__ */ jsxs("div", { className: wrapperClasses, style: wrapperStyle, children: [
+      shouldRenderHeader && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.filename, children: filename ?? "" }),
+        shouldShowHeaderCopy && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopy,
+            className: `${styles.copyButton} ${copied ? styles.copied : ""}`,
+            "aria-label": copied ? "Copied!" : "Copy code",
+            children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: styles.icon }) : /* @__PURE__ */ jsx(CopyIcon, { className: styles.icon })
+          }
+        )
+      ] }),
+      shouldShowOverlayCopy && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: `${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`,
+          "aria-label": copied ? "Copied!" : "Copy code",
+          children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: styles.icon }) : /* @__PURE__ */ jsx(CopyIcon, { className: styles.icon })
+        }
+      ),
+      highlight.loading ? /* @__PURE__ */ jsx("div", { className: styles.loading, style: codeContainerStyle, children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: visibleCode }) }) }) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.codeContainer,
+          style: codeContainerStyle,
+          dangerouslySetInnerHTML: { __html: highlight.html }
+        }
+      ),
+      persistentCopy && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: `${styles.persistentCopy} ${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`,
+          "aria-label": copied ? "Copied!" : "Copy code",
+          children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: styles.icon }) : /* @__PURE__ */ jsx(CopyIcon, { className: styles.icon })
+        }
+      ),
+      shouldShowCollapse && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggleCollapsed,
+          className: styles.collapseButton,
+          "aria-expanded": !isCollapsed,
+          "aria-label": isCollapsed ? "Expand code" : "Collapse code",
+          children: isCollapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.icon }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Show ",
+              totalLines - collapsedLines,
+              " more lines"
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ChevronUpIcon, { className: styles.icon }),
+            /* @__PURE__ */ jsx("span", { children: "Show less" })
+          ] })
+        }
+      )
+    ] }),
+    caption && /* @__PURE__ */ jsx("div", { className: styles.caption, children: caption })
+  ] });
+});
+function TabbedCodeBlock({
+  tabs,
+  defaultTab,
+  value,
+  onValueChange,
+  showCopy = true,
+  copyPlacement = "auto",
+  showLineNumbers = false,
+  theme,
+  tabsVariant = "pills",
+  wordWrap,
+  maxHeight,
+  className,
+  onCopy
+}) {
+  var _a, _b;
+  const defaultValue = defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value) || ((_b = tabs[0]) == null ? void 0 : _b.label) || "";
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(TabsRoot, { defaultValue, value, onValueChange, children: [
+    /* @__PURE__ */ jsx(TabsList, { variant: tabsVariant, children: tabs.map((tab, index) => {
+      const tabValue = tab.value ?? tab.label;
+      return /* @__PURE__ */ jsx(Tab, { value: tabValue, children: tab.label }, `${tabValue}-${index}`);
+    }) }),
+    tabs.map((tab, index) => {
+      const tabValue = tab.value ?? tab.label;
+      return /* @__PURE__ */ jsx(TabsPanel, { value: tabValue, flush: true, className: styles.tabbedPanel, children: /* @__PURE__ */ jsx(
+        CodeBlockBase,
+        {
+          code: tab.code,
+          language: tab.language,
+          theme,
+          showCopy,
+          copyPlacement,
+          showLineNumbers,
+          wordWrap,
+          maxHeight,
+          onCopy: onCopy ? () => onCopy(tab.label) : void 0
+        }
+      ) }, `${tabValue}-panel-${index}`);
+    })
+  ] }) });
+}
+const CodeBlock = Object.assign(CodeBlockBase, {
+  Tabbed: TabbedCodeBlock
+});
+export {
+  CodeBlock,
+  TabbedCodeBlock
+};