cc-transcript-react 0.1.0

package/dist/index.js

@@ -0,0 +1,690 @@
+import {
+  expandEvents,
+  extractMessageBlocks,
+  extractTextFromContentBlock,
+  filterHiddenEvents,
+  joinContentText
+} from "./chunk-6AADMKTL.js";
+
+// src/react/ClaudeCodeTranscript.tsx
+import { useMemo } from "react";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+// src/react/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  prefix: "cct-"
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/react/context.ts
+import { createContext, useContext } from "react";
+var TranscriptContext = createContext(null);
+var TranscriptProvider = TranscriptContext.Provider;
+function useTranscriptContext() {
+  const ctx = useContext(TranscriptContext);
+  if (!ctx) {
+    throw new Error("useTranscriptContext must be used within a TranscriptProvider");
+  }
+  return ctx;
+}
+
+// src/react/components/ContentBlockCard.tsx
+import { useState as useState2 } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { format } from "date-fns";
+
+// src/react/components/block-classification.ts
+var SECONDARY_BLOCK_TYPES = [
+  "thinking",
+  "tool_use",
+  "tool_result",
+  "tool_group",
+  "skill_group",
+  "local_command",
+  "local_command_output",
+  "local_command_group"
+];
+function isSecondaryBlock(block) {
+  return SECONDARY_BLOCK_TYPES.includes(block.blockType);
+}
+function isTodoTool(toolName) {
+  return toolName === "TodoWrite" || toolName === "TodoRead";
+}
+function isAskUserQuestionTool(toolName) {
+  return toolName === "AskUserQuestion";
+}
+function shouldExpandByDefault(block) {
+  if (!isSecondaryBlock(block)) return true;
+  if (block.blockType === "tool_group") {
+    const content = block.content;
+    const toolName = content?.name;
+    if (toolName && (isTodoTool(toolName) || isAskUserQuestionTool(toolName))) return true;
+  }
+  return false;
+}
+
+// src/react/components/block-styles.ts
+import {
+  User,
+  Bot,
+  Wrench,
+  Sparkles,
+  Terminal
+} from "lucide-react";
+import { createElement } from "react";
+var PROSE_BASE = "cct-prose cct-prose-sm cct-max-w-none";
+var PROSE_CODE_RESET = "prose-code:cct-rounded prose-code:cct-px-1 prose-code:cct-py-0.5 prose-code:before:cct-content-none prose-code:after:cct-content-none";
+var PROSE_COLOR_OVERRIDES = [
+  "prose-strong:cct-text-[var(--cct-text-primary)]",
+  "prose-a:cct-text-[var(--cct-text-primary)] prose-a:cct-underline",
+  "prose-blockquote:cct-text-[var(--cct-text-secondary)] prose-blockquote:cct-border-[var(--cct-border-default)]",
+  "prose-hr:cct-border-[var(--cct-border-default)]",
+  "prose-th:cct-border-[var(--cct-border-default)] prose-td:cct-border-[var(--cct-border-default)]",
+  "prose-figcaption:cct-text-[var(--cct-text-tertiary)]",
+  "prose-kbd:cct-text-[var(--cct-text-primary)]"
+].join(" ");
+var PROSE_TEXT = `${PROSE_BASE} cct-text-[var(--cct-text-body)] prose-headings:cct-text-[var(--cct-text-primary)] ${PROSE_COLOR_OVERRIDES} ${PROSE_CODE_RESET} prose-code:cct-bg-[var(--cct-bg-code)] prose-code:cct-text-[var(--cct-text-primary)] prose-pre:cct-bg-[var(--cct-bg-code)] prose-pre:cct-text-[var(--cct-text-primary)]`;
+var PROSE_THINKING = `${PROSE_BASE} cct-text-[var(--cct-thinking-text)] prose-headings:cct-text-[var(--cct-thinking-text)] prose-strong:cct-text-[var(--cct-thinking-text)] prose-a:cct-text-[var(--cct-thinking-text)] prose-a:cct-underline prose-blockquote:cct-text-[var(--cct-thinking-text)] prose-blockquote:cct-border-[var(--cct-thinking-code-bg)] prose-hr:cct-border-[var(--cct-thinking-code-bg)] prose-kbd:cct-text-[var(--cct-thinking-text)] ${PROSE_CODE_RESET} prose-code:cct-bg-[var(--cct-thinking-code-bg)] prose-code:cct-text-[var(--cct-thinking-code-text)] prose-pre:cct-bg-[var(--cct-thinking-pre-bg)] prose-pre:cct-text-[var(--cct-thinking-text)]`;
+var PROSE_SKILL = `${PROSE_BASE} prose-headings:cct-mt-3 prose-headings:cct-mb-2 prose-p:cct-my-1 prose-ul:cct-my-1 prose-ol:cct-my-1 prose-li:cct-my-0.5 prose-pre:cct-my-2`;
+function getBlockContainerStyle(block) {
+  if (isSecondaryBlock(block)) {
+    return {
+      wrapper: "cct-ml-4",
+      container: "cct-border cct-border-[var(--cct-border-default)] cct-bg-[var(--cct-bg-secondary)]",
+      header: "cct-px-3 cct-py-2"
+    };
+  }
+  const borderColor = block.eventType === "user" ? "cct-border-[var(--cct-user-border)]" : "cct-border-[var(--cct-assistant-border)]";
+  const bgColor = block.eventType === "user" ? "cct-bg-[var(--cct-user-bg)]" : "cct-bg-[var(--cct-assistant-bg)]";
+  return {
+    wrapper: "",
+    container: `cct-border-2 ${borderColor} ${bgColor}`,
+    header: "cct-px-4 cct-py-3"
+  };
+}
+var ICON_CLASS = "cct-h-4 cct-w-4";
+function icon(component) {
+  return createElement(component, { className: ICON_CLASS });
+}
+function getIcon(block) {
+  if (block.blockType === "local_command" || block.blockType === "local_command_output" || block.blockType === "local_command_group") {
+    return icon(Terminal);
+  }
+  if (block.blockType === "skill_group") {
+    return icon(Sparkles);
+  }
+  if (block.blockType === "tool_use" || block.blockType === "tool_result" || block.blockType === "tool_group") {
+    return icon(Wrench);
+  }
+  if (block.eventType === "tool_use" || block.eventType === "tool_result") {
+    return icon(Wrench);
+  }
+  if (block.blockType === "thinking") {
+    return icon(Sparkles);
+  }
+  if (block.eventType === "user") {
+    return icon(User);
+  }
+  return icon(Bot);
+}
+function getIconStyle(block) {
+  if (isSecondaryBlock(block)) {
+    return "cct-bg-[var(--cct-secondary-icon-bg)] cct-text-[var(--cct-text-tertiary)]";
+  }
+  if (block.eventType === "user") {
+    return "cct-bg-[var(--cct-user-icon-bg)] cct-text-[var(--cct-user-icon-text)]";
+  }
+  return "cct-bg-[var(--cct-assistant-icon-bg)] cct-text-[var(--cct-assistant-icon-text)]";
+}
+
+// src/react/components/PermalinkButton.tsx
+import { useState } from "react";
+import { Check, Link2 } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+function PermalinkButton({ blockId }) {
+  const [copied, setCopied] = useState(false);
+  const { generatePermalink, copyToClipboard } = useTranscriptContext();
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    const defaultUrl = typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}#event-${blockId}` : `#event-${blockId}`;
+    const url = generatePermalink ? generatePermalink(blockId) : defaultUrl;
+    if (copyToClipboard) {
+      await copyToClipboard(url);
+    } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+      await navigator.clipboard.writeText(url);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "cct-appearance-none cct-border-0 cct-bg-transparent cct-rounded cct-p-1 cct-text-[var(--cct-text-muted)] cct-opacity-0 cct-transition-all hover:cct-bg-[var(--cct-bg-code)] hover:cct-text-[var(--cct-text-secondary)] group-hover:cct-opacity-100",
+      title: "Copy link to this block",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "cct-h-3.5 cct-w-3.5 cct-text-[var(--cct-success)]" }) : /* @__PURE__ */ jsx(Link2, { className: "cct-h-3.5 cct-w-3.5" })
+    }
+  );
+}
+
+// src/react/components/MarkdownContent.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MarkdownContent({
+  text,
+  proseClass
+}) {
+  const { codeTheme, codeCustomStyle } = useTranscriptContext();
+  const defaultCodeStyle = {
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem",
+    margin: 0,
+    ...codeCustomStyle
+  };
+  return /* @__PURE__ */ jsx2("div", { className: proseClass, children: /* @__PURE__ */ jsx2(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        code({ className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          const code = String(children).replace(/\n$/, "");
+          if (match) {
+            return /* @__PURE__ */ jsx2(
+              SyntaxHighlighter,
+              {
+                language: match[1],
+                style: codeTheme,
+                customStyle: defaultCodeStyle,
+                children: code
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx2("code", { className, ...props, children });
+        }
+      },
+      children: text
+    }
+  ) });
+}
+
+// src/react/components/renderers/TextRenderer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TextRenderer({ block }) {
+  const { classNames } = useTranscriptContext();
+  const content = block.content;
+  const text = typeof content === "string" ? content : content?.text;
+  if (typeof text !== "string") return null;
+  return /* @__PURE__ */ jsx3(
+    MarkdownContent,
+    {
+      text,
+      proseClass: cn(PROSE_TEXT, classNames?.markdown)
+    }
+  );
+}
+
+// src/react/components/renderers/ThinkingRenderer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ThinkingRenderer({ block }) {
+  const { classNames } = useTranscriptContext();
+  const content = block.content;
+  const thinking = content?.thinking;
+  return /* @__PURE__ */ jsx4(
+    MarkdownContent,
+    {
+      text: thinking,
+      proseClass: cn(PROSE_THINKING, classNames?.markdown)
+    }
+  );
+}
+
+// src/react/components/CodeBlock.tsx
+import { Prism as SyntaxHighlighter2 } from "react-syntax-highlighter";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function CodeBlock({
+  children,
+  language = "json",
+  maxHeight = "300px",
+  className
+}) {
+  const { codeTheme, codeCustomStyle } = useTranscriptContext();
+  return /* @__PURE__ */ jsx5(
+    SyntaxHighlighter2,
+    {
+      language,
+      style: codeTheme,
+      customStyle: {
+        fontSize: "0.75rem",
+        borderRadius: "0.5rem",
+        margin: 0,
+        maxHeight,
+        overflow: "auto",
+        ...codeCustomStyle
+      },
+      className: cn(className),
+      children
+    }
+  );
+}
+
+// src/react/components/renderers/TodoRenderer.tsx
+import { CheckCircle2, CircleDot, Circle } from "lucide-react";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function extractTodos(toolName, input, resultContent) {
+  if (toolName === "TodoWrite") {
+    const inputObj = input;
+    if (inputObj?.todos && Array.isArray(inputObj.todos)) {
+      return inputObj.todos;
+    }
+  }
+  if (toolName === "TodoRead") {
+    if (resultContent) {
+      let parsed = resultContent;
+      if (typeof resultContent === "string") {
+        try {
+          parsed = JSON.parse(resultContent);
+        } catch {
+          return null;
+        }
+      }
+      const resultObj = parsed;
+      if (Array.isArray(resultObj)) return resultObj;
+      if (resultObj && "todos" in resultObj && Array.isArray(resultObj.todos)) return resultObj.todos;
+    }
+  }
+  return null;
+}
+function TodoListBlock({ todos }) {
+  if (todos.length === 0) {
+    return /* @__PURE__ */ jsx6("div", { className: "cct-text-sm cct-text-[var(--cct-text-tertiary)] cct-italic", children: "No tasks" });
+  }
+  return /* @__PURE__ */ jsx6("div", { className: "cct-space-y-1.5", children: todos.map((todo, i) => /* @__PURE__ */ jsxs("div", { className: "cct-flex cct-items-start cct-gap-2", children: [
+    todo.status === "completed" && /* @__PURE__ */ jsx6(CheckCircle2, { className: "cct-h-4 cct-w-4 cct-text-[var(--cct-todo-completed)] cct-flex-shrink-0 cct-mt-0.5" }),
+    todo.status === "in_progress" && /* @__PURE__ */ jsx6(CircleDot, { className: "cct-h-4 cct-w-4 cct-text-[var(--cct-todo-in-progress)] cct-flex-shrink-0 cct-mt-0.5" }),
+    todo.status === "pending" && /* @__PURE__ */ jsx6(Circle, { className: "cct-h-4 cct-w-4 cct-text-[var(--cct-todo-pending)] cct-flex-shrink-0 cct-mt-0.5" }),
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: cn(
+          "cct-text-sm",
+          todo.status === "completed" && "cct-text-[var(--cct-text-tertiary)] cct-line-through",
+          todo.status === "in_progress" && "cct-text-[var(--cct-selected-text)] cct-font-medium",
+          todo.status === "pending" && "cct-text-[var(--cct-text-body)]"
+        ),
+        children: todo.content
+      }
+    )
+  ] }, i)) });
+}
+
+// src/react/components/renderers/AskUserQuestionRenderer.tsx
+import { Circle as Circle2, CircleDot as CircleDot2, MessageCircleQuestion, Pencil } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function extractAskUserQuestions(input) {
+  const inputObj = input;
+  if (inputObj?.questions && Array.isArray(inputObj.questions)) return inputObj.questions;
+  return null;
+}
+function parseUserAnswers(resultContent) {
+  const answers = {};
+  let contentStr;
+  if (typeof resultContent === "string") {
+    contentStr = resultContent;
+  } else if (Array.isArray(resultContent)) {
+    contentStr = resultContent.map((c) => extractTextFromContentBlock(c)).join("");
+  } else {
+    return answers;
+  }
+  const regex = /"([^"]+)"="([^"]+)"/g;
+  let match;
+  while ((match = regex.exec(contentStr)) !== null) {
+    answers[match[1]] = match[2];
+  }
+  return answers;
+}
+function isOptionSelected(answer, options) {
+  return options.some((opt) => opt.label === answer);
+}
+function AskUserQuestionBlock({
+  questions,
+  answers
+}) {
+  if (questions.length === 0) {
+    return /* @__PURE__ */ jsx7("div", { className: "cct-text-sm cct-text-[var(--cct-text-tertiary)] cct-italic", children: "No questions" });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "cct-space-y-4", children: questions.map((q, i) => {
+    const answer = answers[q.question];
+    const isOtherAnswer = answer && !isOptionSelected(answer, q.options);
+    return /* @__PURE__ */ jsxs2("div", { className: "cct-rounded-[var(--cct-border-radius-sm)] cct-border cct-border-[var(--cct-border-default)] cct-bg-[var(--cct-bg-primary)] cct-p-3", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "cct-mb-1 cct-flex cct-items-center cct-gap-1.5 cct-text-xs cct-font-medium cct-text-[var(--cct-text-tertiary)]", children: [
+        /* @__PURE__ */ jsx7(MessageCircleQuestion, { className: "cct-h-3.5 cct-w-3.5" }),
+        q.header
+      ] }),
+      /* @__PURE__ */ jsx7("div", { className: "cct-mb-3 cct-font-medium cct-text-[var(--cct-text-primary)]", children: q.question }),
+      /* @__PURE__ */ jsxs2("div", { className: "cct-space-y-2", children: [
+        q.options.map((opt, j) => {
+          const isSelected = answer === opt.label;
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: cn(
+                "cct-flex cct-items-start cct-gap-2 cct-rounded-md cct-p-2 cct-transition-colors",
+                isSelected && "cct-bg-[var(--cct-selected-bg)]"
+              ),
+              children: [
+                isSelected ? /* @__PURE__ */ jsx7(CircleDot2, { className: "cct-mt-0.5 cct-h-4 cct-w-4 cct-flex-shrink-0 cct-text-[var(--cct-selected-icon)]" }) : /* @__PURE__ */ jsx7(Circle2, { className: "cct-mt-0.5 cct-h-4 cct-w-4 cct-flex-shrink-0 cct-text-[var(--cct-text-disabled)]" }),
+                /* @__PURE__ */ jsxs2("div", { className: "cct-min-w-0 cct-flex-1", children: [
+                  /* @__PURE__ */ jsx7("span", { className: cn("cct-text-sm", isSelected ? "cct-font-medium cct-text-[var(--cct-selected-text)]" : "cct-text-[var(--cct-text-body)]"), children: opt.label }),
+                  opt.description && /* @__PURE__ */ jsx7("p", { className: "cct-mt-0.5 cct-text-xs cct-text-[var(--cct-text-tertiary)]", children: opt.description })
+                ] })
+              ]
+            },
+            j
+          );
+        }),
+        isOtherAnswer && /* @__PURE__ */ jsxs2("div", { className: "cct-mt-2 cct-flex cct-items-start cct-gap-2 cct-rounded-md cct-border-t cct-border-[var(--cct-border-subtle)] cct-bg-[var(--cct-selected-bg)] cct-p-2 cct-pt-3", children: [
+          /* @__PURE__ */ jsx7(Pencil, { className: "cct-mt-0.5 cct-h-4 cct-w-4 cct-flex-shrink-0 cct-text-[var(--cct-selected-icon)]" }),
+          /* @__PURE__ */ jsxs2("div", { className: "cct-min-w-0 cct-flex-1", children: [
+            /* @__PURE__ */ jsx7("span", { className: "cct-text-xs cct-font-medium cct-text-[var(--cct-text-tertiary)]", children: "Other" }),
+            /* @__PURE__ */ jsx7("p", { className: "cct-text-sm cct-font-medium cct-text-[var(--cct-selected-text)]", children: answer })
+          ] })
+        ] }),
+        !answer && /* @__PURE__ */ jsx7("div", { className: "cct-mt-2 cct-text-xs cct-italic cct-text-[var(--cct-text-muted)]", children: "Waiting for answer..." })
+      ] })
+    ] }, i);
+  }) });
+}
+
+// src/react/components/renderers/ToolGroupRenderer.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function ToolGroupRenderer({ block }) {
+  const content = block.content;
+  const toolName = content?.name;
+  const input = content?.input;
+  const resultBlock = block.toolResultBlock;
+  const resultContent = resultBlock?.content;
+  const resultData = resultContent?.content;
+  if (toolName && isTodoTool(toolName)) {
+    const todos = extractTodos(toolName, input, resultData);
+    if (todos) return /* @__PURE__ */ jsx8(TodoListBlock, { todos });
+  }
+  if (toolName && isAskUserQuestionTool(toolName)) {
+    const questions = extractAskUserQuestions(input);
+    if (questions) {
+      const answers = parseUserAnswers(resultData);
+      return /* @__PURE__ */ jsx8(AskUserQuestionBlock, { questions, answers });
+    }
+  }
+  const displayResult = joinContentText(resultData, {
+    fallback: (c) => JSON.stringify(c, null, 2)
+  }) || JSON.stringify(resultData, null, 2);
+  return /* @__PURE__ */ jsxs3("div", { className: "cct-space-y-3", children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx8("div", { className: "cct-mb-1 cct-text-xs cct-font-medium cct-text-[var(--cct-text-muted)]", children: "Input" }),
+      /* @__PURE__ */ jsx8(CodeBlock, { children: JSON.stringify(input, null, 2) })
+    ] }),
+    resultBlock && /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx8("div", { className: "cct-mb-1 cct-text-xs cct-font-medium cct-text-[var(--cct-text-muted)]", children: "Result" }),
+      /* @__PURE__ */ jsx8(CodeBlock, { children: displayResult })
+    ] })
+  ] });
+}
+
+// src/react/components/renderers/SkillGroupRenderer.tsx
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function SkillGroupRenderer({ block }) {
+  const { classNames } = useTranscriptContext();
+  const content = block.content;
+  const input = content?.input;
+  const resultBlock = block.toolResultBlock;
+  const resultContent = resultBlock?.content;
+  const resultData = resultContent?.content;
+  const skillContentBlock = block.skillContentBlock;
+  const skillContent = skillContentBlock?.content;
+  const skillText = joinContentText(skillContent);
+  return /* @__PURE__ */ jsxs4("div", { className: "cct-space-y-3", children: [
+    resultData && /* @__PURE__ */ jsxs4("div", { className: "cct-flex cct-items-center cct-gap-2 cct-text-sm", children: [
+      /* @__PURE__ */ jsx9(Check2, { className: "cct-h-4 cct-w-4 cct-text-[var(--cct-success)]" }),
+      /* @__PURE__ */ jsx9("span", { className: "cct-text-[var(--cct-text-secondary)]", children: resultData })
+    ] }),
+    skillText && /* @__PURE__ */ jsxs4("div", { className: "cct-border cct-border-[var(--cct-border-default)] cct-rounded-[var(--cct-border-radius-sm)] cct-p-3 cct-bg-[var(--cct-bg-primary)]", children: [
+      /* @__PURE__ */ jsx9("div", { className: "cct-mb-2 cct-text-xs cct-font-medium cct-text-[var(--cct-text-muted)]", children: "Skill Content" }),
+      /* @__PURE__ */ jsx9(
+        MarkdownContent,
+        {
+          text: skillText,
+          proseClass: cn(PROSE_SKILL, classNames?.markdown)
+        }
+      )
+    ] }),
+    !skillText && /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx9("div", { className: "cct-mb-1 cct-text-xs cct-font-medium cct-text-[var(--cct-text-muted)]", children: "Input" }),
+      /* @__PURE__ */ jsx9(CodeBlock, { maxHeight: "200px", children: JSON.stringify(input, null, 2) })
+    ] })
+  ] });
+}
+
+// src/react/components/renderers/LocalCommandRenderer.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function extractCommandOutput(content) {
+  const match = content.match(/<local-command-stdout>([\s\S]*?)<\/local-command-stdout>/);
+  return match ? match[1].trim() : content;
+}
+function LocalCommandGroupRenderer({ block }) {
+  const { classNames } = useTranscriptContext();
+  return /* @__PURE__ */ jsxs5("div", { className: "cct-space-y-3", children: [
+    /* @__PURE__ */ jsx10("div", { className: "cct-text-sm cct-text-[var(--cct-text-tertiary)] cct-italic", children: "Command executed" }),
+    block.childBlocks && block.childBlocks.length > 0 && /* @__PURE__ */ jsx10("div", { className: "cct-space-y-2 cct-border-l-2 cct-border-[var(--cct-border-default)] cct-pl-3", children: block.childBlocks.map((child) => /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx10("div", { className: "cct-mb-1 cct-text-xs cct-font-medium cct-text-[var(--cct-text-muted)]", children: child.label.text }),
+      child.blockType === "local_command_output" ? /* @__PURE__ */ jsx10("pre", { className: "cct-max-h-[200px] cct-overflow-auto cct-whitespace-pre-wrap cct-rounded-[var(--cct-border-radius-sm)] cct-bg-[var(--cct-bg-secondary)] cct-p-2 cct-font-mono cct-text-xs cct-text-[var(--cct-text-secondary)]", children: typeof child.content === "string" ? extractCommandOutput(child.content) : "" }) : child.blockType === "compact_summary" ? /* @__PURE__ */ jsx10("div", { className: "cct-max-h-[300px] cct-overflow-auto cct-rounded-[var(--cct-border-radius-sm)] cct-bg-[var(--cct-summary-bg)] cct-p-3 cct-text-xs cct-text-[var(--cct-text-body)]", children: /* @__PURE__ */ jsx10("pre", { className: "cct-whitespace-pre-wrap cct-font-mono", children: typeof child.content === "string" ? child.content : "" }) }) : /* @__PURE__ */ jsx10("div", { className: cn("cct-prose cct-prose-sm cct-max-w-none cct-text-[var(--cct-text-secondary)]", classNames?.markdown), children: typeof child.content === "string" ? child.content : "" })
+    ] }, child.id)) })
+  ] });
+}
+function LocalCommandRenderer() {
+  return /* @__PURE__ */ jsx10("div", { className: "cct-text-sm cct-text-[var(--cct-text-tertiary)] cct-italic", children: "Command executed" });
+}
+function LocalCommandOutputRenderer({ block }) {
+  const output = typeof block.content === "string" ? extractCommandOutput(block.content) : "";
+  if (!output) {
+    return /* @__PURE__ */ jsx10("div", { className: "cct-text-sm cct-text-[var(--cct-text-muted)] cct-italic", children: "(no output)" });
+  }
+  return /* @__PURE__ */ jsx10("pre", { className: "cct-max-h-[300px] cct-overflow-auto cct-whitespace-pre-wrap cct-rounded-[var(--cct-border-radius-sm)] cct-bg-[var(--cct-bg-secondary)] cct-p-3 cct-font-mono cct-text-xs cct-text-[var(--cct-text-secondary)]", children: output });
+}
+
+// src/react/components/renderers/ToolUseRenderer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ToolUseRenderer({ block }) {
+  const content = block.content;
+  const input = content?.input;
+  return /* @__PURE__ */ jsx11(CodeBlock, { maxHeight: "400px", children: JSON.stringify(input, null, 2) });
+}
+function ToolResultRenderer({ block }) {
+  const content = block.content;
+  const resultContent = content?.content;
+  const displayContent = joinContentText(resultContent, {
+    fallback: (c) => JSON.stringify(c, null, 2)
+  }) || JSON.stringify(resultContent, null, 2);
+  return /* @__PURE__ */ jsx11(CodeBlock, { maxHeight: "400px", children: displayContent });
+}
+function StandaloneToolEventRenderer({ block }) {
+  const payload = block.content;
+  const input = payload?.input || payload?.result || payload;
+  return /* @__PURE__ */ jsx11(CodeBlock, { maxHeight: "400px", children: JSON.stringify(input, null, 2) });
+}
+
+// src/react/components/renderers/FallbackRenderer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function FallbackRenderer({ block }) {
+  return /* @__PURE__ */ jsx12("pre", { className: "cct-max-h-[300px] cct-overflow-auto cct-whitespace-pre-wrap cct-text-xs cct-text-[var(--cct-text-secondary)]", children: JSON.stringify(block.content, null, 2) });
+}
+
+// src/react/components/renderers/index.tsx
+import { Fragment, jsx as jsx13 } from "react/jsx-runtime";
+var DEFAULT_RENDERERS = {
+  text: TextRenderer,
+  thinking: ThinkingRenderer,
+  tool_group: ToolGroupRenderer,
+  skill_group: SkillGroupRenderer,
+  local_command_group: LocalCommandGroupRenderer,
+  local_command: LocalCommandRenderer,
+  local_command_output: LocalCommandOutputRenderer,
+  tool_use: ToolUseRenderer,
+  tool_result: ToolResultRenderer
+};
+function BlockContent({ block }) {
+  const { customBlockRenderers } = useTranscriptContext();
+  if (customBlockRenderers && block.blockType === "tool_group") {
+    const content = block.content;
+    const toolName = content?.name;
+    if (toolName && customBlockRenderers[toolName]) {
+      const result = customBlockRenderers[toolName](block);
+      if (result !== null) return /* @__PURE__ */ jsx13(Fragment, { children: result });
+    }
+  }
+  if (customBlockRenderers && customBlockRenderers[block.blockType]) {
+    const result = customBlockRenderers[block.blockType](block);
+    if (result !== null) return /* @__PURE__ */ jsx13(Fragment, { children: result });
+  }
+  if (block.eventType === "tool_use" || block.eventType === "tool_result") {
+    if (!DEFAULT_RENDERERS[block.blockType]) {
+      return /* @__PURE__ */ jsx13(StandaloneToolEventRenderer, { block });
+    }
+  }
+  const Renderer = DEFAULT_RENDERERS[block.blockType];
+  if (Renderer) {
+    return /* @__PURE__ */ jsx13(Renderer, { block });
+  }
+  return /* @__PURE__ */ jsx13(FallbackRenderer, { block });
+}
+
+// src/react/components/ContentBlockCard.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function ContentBlockCard({ block }) {
+  const { classNames } = useTranscriptContext();
+  const isSecondary = isSecondaryBlock(block);
+  const [expanded, setExpanded] = useState2(() => shouldExpandByDefault(block));
+  const styles = getBlockContainerStyle(block);
+  if (!isSecondary) {
+    return /* @__PURE__ */ jsx14("div", { className: cn(styles.wrapper, classNames?.blockWrapper), children: /* @__PURE__ */ jsxs6("div", { className: cn("cct-group cct-overflow-hidden cct-rounded-[var(--cct-border-radius)]", styles.container, classNames?.primaryBlock), children: [
+      /* @__PURE__ */ jsxs6("div", { className: cn("cct-flex cct-items-center cct-justify-between", styles.header, classNames?.primaryHeader), children: [
+        /* @__PURE__ */ jsxs6("div", { className: "cct-flex cct-items-center cct-gap-2", children: [
+          /* @__PURE__ */ jsx14("span", { className: cn("cct-flex cct-h-6 cct-w-6 cct-items-center cct-justify-center cct-rounded-full", getIconStyle(block), classNames?.icon), children: getIcon(block) }),
+          /* @__PURE__ */ jsx14("span", { className: cn("cct-font-medium cct-text-[var(--cct-text-primary)]", classNames?.label), children: block.label.text })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: cn("cct-flex cct-items-center cct-gap-2 cct-text-sm cct-text-[var(--cct-text-tertiary)]", classNames?.timestamp), children: [
+          /* @__PURE__ */ jsx14("span", { children: format(new Date(block.timestamp), "HH:mm:ss") }),
+          /* @__PURE__ */ jsx14(PermalinkButton, { blockId: block.id })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx14("div", { className: cn("cct-border-t cct-border-[var(--cct-border-subtle)] cct-px-4 cct-py-3", classNames?.primaryContent), children: /* @__PURE__ */ jsx14(BlockContent, { block }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx14("div", { className: cn(styles.wrapper, classNames?.blockWrapper), children: /* @__PURE__ */ jsxs6("div", { className: cn("cct-group cct-overflow-hidden cct-rounded-[var(--cct-border-radius)]", styles.container, classNames?.secondaryBlock), children: [
+    /* @__PURE__ */ jsxs6("div", { className: cn("cct-flex cct-w-full cct-items-center cct-justify-between", styles.header, classNames?.secondaryHeader), children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          className: "cct-appearance-none cct-border-0 cct-bg-transparent cct-flex cct-min-w-0 cct-flex-1 cct-items-center cct-gap-2 cct-text-left cct-transition-colors hover:cct-bg-[var(--cct-bg-secondary)]",
+          onClick: () => setExpanded(!expanded),
+          children: [
+            /* @__PURE__ */ jsx14("span", { className: cn("cct-flex cct-h-5 cct-w-5 cct-items-center cct-justify-center cct-rounded-full", getIconStyle(block), classNames?.icon), children: getIcon(block) }),
+            /* @__PURE__ */ jsx14("span", { className: cn("cct-text-sm cct-font-medium cct-text-[var(--cct-text-secondary)]", classNames?.label), children: block.label.text }),
+            block.label.params && /* @__PURE__ */ jsx14("code", { className: "cct-rounded cct-bg-[var(--cct-bg-code)] cct-px-1 cct-py-0.5 cct-text-xs cct-font-normal cct-text-[var(--cct-text-body)]", children: block.label.params })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: cn("cct-flex cct-items-center cct-gap-2 cct-text-xs cct-text-[var(--cct-text-tertiary)]", classNames?.timestamp), children: [
+        /* @__PURE__ */ jsx14("span", { children: format(new Date(block.timestamp), "HH:mm:ss") }),
+        /* @__PURE__ */ jsx14(PermalinkButton, { blockId: block.id }),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "cct-appearance-none cct-border-0 cct-bg-transparent cct-p-0.5 hover:cct-bg-[var(--cct-bg-code)] cct-rounded",
+            children: expanded ? /* @__PURE__ */ jsx14(ChevronDown, { className: "cct-h-3 cct-w-3" }) : /* @__PURE__ */ jsx14(ChevronRight, { className: "cct-h-3 cct-w-3" })
+          }
+        )
+      ] })
+    ] }),
+    expanded && /* @__PURE__ */ jsx14("div", { className: cn("cct-border-t cct-border-[var(--cct-border-subtle)] cct-px-3 cct-py-2", classNames?.secondaryContent), children: /* @__PURE__ */ jsx14(BlockContent, { block }) })
+  ] }) });
+}
+
+// src/react/ClaudeCodeTranscript.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ClaudeCodeTranscript({
+  events,
+  projectPath,
+  colorScheme = "light",
+  className,
+  classNames,
+  theme,
+  customBlockRenderers,
+  generatePermalink,
+  copyToClipboard
+}) {
+  const displayBlocks = useMemo(() => {
+    const filtered = filterHiddenEvents(events);
+    return expandEvents(filtered, projectPath);
+  }, [events, projectPath]);
+  const resolvedCodeTheme = useMemo(() => {
+    if (theme?.codeTheme) return theme.codeTheme;
+    return colorScheme === "dark" ? oneDark : oneLight;
+  }, [theme?.codeTheme, colorScheme]);
+  const contextValue = useMemo(() => ({
+    colorScheme,
+    classNames,
+    codeTheme: resolvedCodeTheme,
+    codeCustomStyle: theme?.codeCustomStyle,
+    customBlockRenderers,
+    generatePermalink,
+    copyToClipboard
+  }), [colorScheme, classNames, resolvedCodeTheme, theme?.codeCustomStyle, customBlockRenderers, generatePermalink, copyToClipboard]);
+  if (displayBlocks.length === 0) {
+    return /* @__PURE__ */ jsx15(TranscriptProvider, { value: contextValue, children: /* @__PURE__ */ jsx15(
+      "div",
+      {
+        "data-cct-root": true,
+        "data-cct-theme": colorScheme,
+        className: cn(
+          "cct-rounded-[var(--cct-border-radius)] cct-border cct-border-dashed cct-border-[var(--cct-border-default)] cct-bg-[var(--cct-bg-primary)] cct-p-8 cct-text-center",
+          classNames?.emptyState
+        ),
+        children: /* @__PURE__ */ jsx15("p", { className: "cct-text-[var(--cct-text-tertiary)]", children: "No events." })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx15(TranscriptProvider, { value: contextValue, children: /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-cct-root": true,
+      "data-cct-theme": colorScheme,
+      className: cn("cct-space-y-3", className, classNames?.root),
+      children: displayBlocks.map((block) => /* @__PURE__ */ jsx15(
+        "div",
+        {
+          id: `event-${block.id}`,
+          className: cn("cct-scroll-mt-20", classNames?.blockWrapper),
+          children: /* @__PURE__ */ jsx15(ContentBlockCard, { block })
+        },
+        block.id
+      ))
+    }
+  ) });
+}
+export {
+  ClaudeCodeTranscript,
+  expandEvents,
+  extractMessageBlocks,
+  filterHiddenEvents
+};
+//# sourceMappingURL=index.js.map