@flanksource/clicky-ui 0.3.47 → 0.3.49

package/dist/comments/CommentThreadList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThreadList.cjs","sources":["../../src/comments/CommentThreadList.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\nimport { copyText } from \"../components/clipboard\";\nimport { Markdown } from \"../data/Markdown\";\nimport { Tabs } from \"../layout/Tabs\";\nimport { Modal } from \"../overlay/Modal\";\nimport { CommentCard } from \"./CommentCard\";\nimport { buildReplyMap, getRoots, sortReplies } from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentThreadListProps = {\n  comments: Comment[];\n  config: CommentConfig;\n  compact?: boolean;\n  /** Expand each thread immediately (roots and their replies), exposing actions such as Reply. */\n  defaultExpanded?: boolean;\n  /** Extra content rendered above each root card (e.g. an anchor label). */\n  renderRootMeta?: (comment: Comment) => ReactNode;\n  /** Props merged onto each thread wrapper (e.g. for scroll anchoring). */\n  getThreadProps?: (comment: Comment) => HTMLAttributes<HTMLDivElement>;\n  /** Custom body renderer forwarded to each card. */\n  renderBody?: (body: string) => ReactNode;\n  /** Serialize a root and its replies for Copy and the Markdown preview. */\n  threadToMarkdown?: (thread: readonly Comment[]) => string;\n  onUpdateStatus?: (id: string, status: string) => void | Promise<void>;\n  onClose?: (id: string) => void | Promise<void>;\n  onChecklistToggle?: (id: string, index: number) => void;\n  onDelete?: (id: string) => void;\n  /** Submit a reply to `parent`. Presence enables the inline reply affordance. */\n  onReply?: (parent: Comment, body: string) => void | Promise<void>;\n};\n\nfunction ReplyInput({\n  onSubmit,\n  onCancel,\n}: {\n  onSubmit: (body: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [body, setBody] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  async function send() {\n    if (!body.trim() || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    try {\n      await onSubmit(body.trim());\n      setBody(\"\");\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n  return (\n    <div className=\"ml-6 flex gap-1.5 py-1\" aria-busy={submitting}>\n      <input\n        autoFocus\n        value={body}\n        disabled={submitting}\n        onChange={(e) => setBody(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            void send();\n          }\n          if (e.key === \"Escape\") onCancel();\n        }}\n        placeholder=\"Write a reply…\"\n        data-testid=\"comment-reply-input\"\n        className=\"h-7 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary/40\"\n      />\n      <Button\n        size=\"sm\"\n        className=\"h-7 text-xs\"\n        disabled={submitting || !body.trim()}\n        onClick={() => void send()}\n      >\n        Send\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Renders a list of threaded comments: each root with its sorted replies and an\n * optional inline reply box. Fully controlled — mutations route through the\n * id-keyed callbacks.\n */\nexport function CommentThreadList({\n  comments,\n  config,\n  compact = false,\n  defaultExpanded = false,\n  renderRootMeta,\n  getThreadProps,\n  renderBody,\n  threadToMarkdown,\n  onUpdateStatus,\n  onClose,\n  onChecklistToggle,\n  onDelete,\n  onReply,\n}: CommentThreadListProps) {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  // Maximizing is owned here, not by the card: a thread is the unit a reader\n  // wants enlarged, and only this list knows a root's replies.\n  const [maximizedRootId, setMaximizedRootId] = useState<string | null>(null);\n  const [maximizedTab, setMaximizedTab] = useState<\"thread\" | \"markdown\">(\n    \"thread\",\n  );\n  // Which message in the maximized thread has its reply composer open.\n  const [modalReplyTo, setModalReplyTo] = useState<string | null>(null);\n  const roots = getRoots(comments);\n  const replyMap = buildReplyMap(comments);\n\n  if (roots.length === 0) return null;\n\n  const maximizedRoot = roots.find((root) => root.id === maximizedRootId);\n  const maximizedThread = maximizedRoot\n    ? [maximizedRoot, ...sortReplies(replyMap.get(maximizedRoot.id) ?? [])]\n    : [];\n\n  function closeMaximized() {\n    setMaximizedRootId(null);\n    setModalReplyTo(null);\n    setMaximizedTab(\"thread\");\n  }\n\n  function cardHandlers(id: string) {\n    return {\n      ...(onUpdateStatus\n        ? { onUpdateStatus: (status: string) => onUpdateStatus(id, status) }\n        : {}),\n      ...(onClose ? { onClose: () => onClose(id) } : {}),\n      ...(onChecklistToggle\n        ? { onChecklistToggle: (index: number) => onChecklistToggle(id, index) }\n        : {}),\n      ...(onDelete ? { onDelete: () => onDelete(id) } : {}),\n    };\n  }\n\n  return (\n    <>\n      <div className=\"space-y-2\">\n        {roots.map((root) => {\n          const replies = sortReplies(replyMap.get(root.id) ?? []);\n          const thread = [root, ...replies];\n          const threadProps = getThreadProps?.(root) ?? {};\n          return (\n            <div\n              key={root.id}\n              data-testid=\"comment-thread-block\"\n              data-comment-id={root.id}\n              {...threadProps}\n              className={cn(\"space-y-1.5 p-1\", threadProps.className)}\n            >\n              {renderRootMeta ? (\n                <div className=\"px-1\">{renderRootMeta(root)}</div>\n              ) : null}\n              <CommentCard\n                comment={root}\n                config={config}\n                compact={compact}\n                defaultExpanded={defaultExpanded}\n                onMaximize={() => setMaximizedRootId(root.id)}\n                {...(threadToMarkdown\n                  ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                  : {})}\n                {...(renderBody ? { renderBody } : {})}\n                {...cardHandlers(root.id)}\n                {...(onReply ? { onReply: () => setReplyingTo(root.id) } : {})}\n              />\n              {replies.length > 0 && (\n                <div className=\"space-y-1.5\">\n                  {replies.map((reply) => (\n                    <CommentCard\n                      key={reply.id}\n                      comment={reply}\n                      config={config}\n                      compact={compact}\n                      defaultExpanded={defaultExpanded}\n                      onMaximize={() => setMaximizedRootId(root.id)}\n                      {...(threadToMarkdown\n                        ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(reply.id)}\n                    />\n                  ))}\n                </div>\n              )}\n              {onReply && replyingTo === root.id && (\n                <ReplyInput\n                  onCancel={() => setReplyingTo(null)}\n                  onSubmit={async (body) => {\n                    await onReply(root, body);\n                    setReplyingTo(null);\n                  }}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      {maximizedRoot && (\n        <Modal open onClose={closeMaximized} title=\"Comment thread\" size=\"lg\">\n          <div className=\"space-y-3\" data-testid=\"comment-thread-modal\">\n            {threadToMarkdown && (\n              <Tabs\n                tabs={[\n                  { id: \"thread\", label: \"Thread\" },\n                  { id: \"markdown\", label: \"Markdown\" },\n                ]}\n                value={maximizedTab}\n                onChange={(tab) =>\n                  setMaximizedTab(tab === \"markdown\" ? \"markdown\" : \"thread\")\n                }\n              />\n            )}\n            {maximizedTab === \"markdown\" && threadToMarkdown ? (\n              <Markdown text={threadToMarkdown(maximizedThread)} />\n            ) : (\n              <div className=\"space-y-2\">\n                {/* No onMaximize inside: the thread is already maximized. */}\n                {maximizedThread.map((message) => (\n                  <div key={message.id} className=\"space-y-1.5\">\n                    <CommentCard\n                      comment={message}\n                      config={config}\n                      defaultExpanded\n                      {...(threadToMarkdown\n                        ? {\n                            onCopy: () =>\n                              copyText(threadToMarkdown(maximizedThread)),\n                          }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(message.id)}\n                      {...(onReply\n                        ? { onReply: () => setModalReplyTo(message.id) }\n                        : {})}\n                    />\n                    {onReply && modalReplyTo === message.id && (\n                      <ReplyInput\n                        onCancel={() => setModalReplyTo(null)}\n                        onSubmit={async (body) => {\n                          await onReply(maximizedRoot, body);\n                          setModalReplyTo(null);\n                        }}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </Modal>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useRef","jsxs","jsx","Button","getRoots","buildReplyMap","sortReplies","Fragment","cn","CommentCard","copyText","Modal","Tabs","Markdown"],"mappings":"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"}
+{"version":3,"file":"CommentThreadList.cjs","sources":["../../src/comments/CommentThreadList.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\nimport { copyText } from \"../components/clipboard\";\nimport { Markdown } from \"../data/Markdown\";\nimport { Tabs } from \"../layout/Tabs\";\nimport { Modal } from \"../overlay/Modal\";\nimport { CommentCard } from \"./CommentCard\";\nimport { buildReplyMap, getRoots, sortReplies } from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentThreadListProps = {\n  comments: Comment[];\n  config: CommentConfig;\n  compact?: boolean;\n  /** Expand each thread immediately (roots and their replies), exposing actions such as Reply. */\n  defaultExpanded?: boolean;\n  /** Extra content rendered above each root card (e.g. an anchor label). */\n  renderRootMeta?: (comment: Comment) => ReactNode;\n  /** Extra content rendered with each root thread, including its maximized view. */\n  renderRootDetails?: (comment: Comment) => ReactNode;\n  /** Props merged onto each thread wrapper (e.g. for scroll anchoring). */\n  getThreadProps?: (comment: Comment) => HTMLAttributes<HTMLDivElement>;\n  /** Custom body renderer forwarded to each card. */\n  renderBody?: (body: string) => ReactNode;\n  /** Serialize a root and its replies for Copy and the Markdown preview. */\n  threadToMarkdown?: (thread: readonly Comment[]) => string;\n  onUpdateStatus?: (id: string, status: string) => void | Promise<void>;\n  onClose?: (id: string) => void | Promise<void>;\n  onChecklistToggle?: (id: string, index: number) => void;\n  onDelete?: (id: string) => void;\n  /** Submit a reply to `parent`. Presence enables the inline reply affordance. */\n  onReply?: (parent: Comment, body: string) => void | Promise<void>;\n};\n\nfunction ReplyInput({\n  onSubmit,\n  onCancel,\n}: {\n  onSubmit: (body: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [body, setBody] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  async function send() {\n    if (!body.trim() || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    try {\n      await onSubmit(body.trim());\n      setBody(\"\");\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n  return (\n    <div className=\"ml-6 flex gap-1.5 py-1\" aria-busy={submitting}>\n      <input\n        autoFocus\n        value={body}\n        disabled={submitting}\n        onChange={(e) => setBody(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            void send();\n          }\n          if (e.key === \"Escape\") onCancel();\n        }}\n        placeholder=\"Write a reply…\"\n        data-testid=\"comment-reply-input\"\n        className=\"h-7 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary/40\"\n      />\n      <Button\n        size=\"sm\"\n        className=\"h-7 text-xs\"\n        disabled={submitting || !body.trim()}\n        onClick={() => void send()}\n      >\n        Send\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Renders a list of threaded comments: each root with its sorted replies and an\n * optional inline reply box. Fully controlled — mutations route through the\n * id-keyed callbacks.\n */\nexport function CommentThreadList({\n  comments,\n  config,\n  compact = false,\n  defaultExpanded = false,\n  renderRootMeta,\n  renderRootDetails,\n  getThreadProps,\n  renderBody,\n  threadToMarkdown,\n  onUpdateStatus,\n  onClose,\n  onChecklistToggle,\n  onDelete,\n  onReply,\n}: CommentThreadListProps) {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  // Maximizing is owned here, not by the card: a thread is the unit a reader\n  // wants enlarged, and only this list knows a root's replies.\n  const [maximizedRootId, setMaximizedRootId] = useState<string | null>(null);\n  const [maximizedTab, setMaximizedTab] = useState<\"thread\" | \"markdown\">(\n    \"thread\",\n  );\n  // Which message in the maximized thread has its reply composer open.\n  const [modalReplyTo, setModalReplyTo] = useState<string | null>(null);\n  const roots = getRoots(comments);\n  const replyMap = buildReplyMap(comments);\n\n  if (roots.length === 0) return null;\n\n  const maximizedRoot = roots.find((root) => root.id === maximizedRootId);\n  const maximizedThread = maximizedRoot\n    ? [maximizedRoot, ...sortReplies(replyMap.get(maximizedRoot.id) ?? [])]\n    : [];\n\n  function closeMaximized() {\n    setMaximizedRootId(null);\n    setModalReplyTo(null);\n    setMaximizedTab(\"thread\");\n  }\n\n  function cardHandlers(id: string) {\n    return {\n      ...(onUpdateStatus\n        ? { onUpdateStatus: (status: string) => onUpdateStatus(id, status) }\n        : {}),\n      ...(onClose ? { onClose: () => onClose(id) } : {}),\n      ...(onChecklistToggle\n        ? { onChecklistToggle: (index: number) => onChecklistToggle(id, index) }\n        : {}),\n      ...(onDelete ? { onDelete: () => onDelete(id) } : {}),\n    };\n  }\n\n  return (\n    <>\n      <div className=\"space-y-2\">\n        {roots.map((root) => {\n          const replies = sortReplies(replyMap.get(root.id) ?? []);\n          const thread = [root, ...replies];\n          const threadProps = getThreadProps?.(root) ?? {};\n          return (\n            <div\n              key={root.id}\n              data-testid=\"comment-thread-block\"\n              data-comment-id={root.id}\n              {...threadProps}\n              className={cn(\"space-y-1.5 p-1\", threadProps.className)}\n            >\n              {renderRootMeta ? (\n                <div className=\"px-1\">{renderRootMeta(root)}</div>\n              ) : null}\n              <CommentCard\n                comment={root}\n                config={config}\n                compact={compact}\n                defaultExpanded={defaultExpanded}\n                onMaximize={() => setMaximizedRootId(root.id)}\n                {...(threadToMarkdown\n                  ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                  : {})}\n                {...(renderBody ? { renderBody } : {})}\n                {...cardHandlers(root.id)}\n                {...(onReply ? { onReply: () => setReplyingTo(root.id) } : {})}\n              />\n              {renderRootDetails?.(root)}\n              {replies.length > 0 && (\n                <div className=\"space-y-1.5\">\n                  {replies.map((reply) => (\n                    <CommentCard\n                      key={reply.id}\n                      comment={reply}\n                      config={config}\n                      compact={compact}\n                      defaultExpanded={defaultExpanded}\n                      onMaximize={() => setMaximizedRootId(root.id)}\n                      {...(threadToMarkdown\n                        ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(reply.id)}\n                    />\n                  ))}\n                </div>\n              )}\n              {onReply && replyingTo === root.id && (\n                <ReplyInput\n                  onCancel={() => setReplyingTo(null)}\n                  onSubmit={async (body) => {\n                    await onReply(root, body);\n                    setReplyingTo(null);\n                  }}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      {maximizedRoot && (\n        <Modal open onClose={closeMaximized} title=\"Comment thread\" size=\"lg\">\n          <div className=\"space-y-3\" data-testid=\"comment-thread-modal\">\n            {threadToMarkdown && (\n              <Tabs\n                tabs={[\n                  { id: \"thread\", label: \"Thread\" },\n                  { id: \"markdown\", label: \"Markdown\" },\n                ]}\n                value={maximizedTab}\n                onChange={(tab) =>\n                  setMaximizedTab(tab === \"markdown\" ? \"markdown\" : \"thread\")\n                }\n              />\n            )}\n            {maximizedTab === \"markdown\" && threadToMarkdown ? (\n              <Markdown text={threadToMarkdown(maximizedThread)} />\n            ) : (\n              <div className=\"space-y-2\">\n                {/* No onMaximize inside: the thread is already maximized. */}\n                {maximizedThread.map((message) => (\n                  <div key={message.id} className=\"space-y-1.5\">\n                    <CommentCard\n                      comment={message}\n                      config={config}\n                      defaultExpanded\n                      {...(threadToMarkdown\n                        ? {\n                            onCopy: () =>\n                              copyText(threadToMarkdown(maximizedThread)),\n                          }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(message.id)}\n                      {...(onReply\n                        ? { onReply: () => setModalReplyTo(message.id) }\n                        : {})}\n                    />\n                    {message.id === maximizedRoot.id &&\n                      renderRootDetails?.(maximizedRoot)}\n                    {onReply && modalReplyTo === message.id && (\n                      <ReplyInput\n                        onCancel={() => setModalReplyTo(null)}\n                        onSubmit={async (body) => {\n                          await onReply(maximizedRoot, body);\n                          setModalReplyTo(null);\n                        }}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </Modal>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useRef","jsxs","jsx","Button","getRoots","buildReplyMap","sortReplies","Fragment","cn","CommentCard","copyText","Modal","Tabs","Markdown"],"mappings":"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"}

package/dist/comments/CommentThreadList.d.ts

@@ -8,6 +8,8 @@ export type CommentThreadListProps = {
     defaultExpanded?: boolean;
     /** Extra content rendered above each root card (e.g. an anchor label). */
     renderRootMeta?: (comment: Comment) => ReactNode;
+    /** Extra content rendered with each root thread, including its maximized view. */
+    renderRootDetails?: (comment: Comment) => ReactNode;
     /** Props merged onto each thread wrapper (e.g. for scroll anchoring). */
     getThreadProps?: (comment: Comment) => HTMLAttributes<HTMLDivElement>;
     /** Custom body renderer forwarded to each card. */
@@ -26,5 +28,5 @@ export type CommentThreadListProps = {
  * optional inline reply box. Fully controlled — mutations route through the
  * id-keyed callbacks.
  */
-export declare function CommentThreadList({ comments, config, compact, defaultExpanded, renderRootMeta, getThreadProps, renderBody, threadToMarkdown, onUpdateStatus, onClose, onChecklistToggle, onDelete, onReply, }: CommentThreadListProps): import("react").JSX.Element | null;
+export declare function CommentThreadList({ comments, config, compact, defaultExpanded, renderRootMeta, renderRootDetails, getThreadProps, renderBody, threadToMarkdown, onUpdateStatus, onClose, onChecklistToggle, onDelete, onReply, }: CommentThreadListProps): import("react").JSX.Element | null;
 //# sourceMappingURL=CommentThreadList.d.ts.map

package/dist/comments/CommentThreadList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThreadList.d.ts","sourceRoot":"","sources":["../../src/comments/CommentThreadList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC;IACjD,yEAAyE;IACzE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,cAAc,CAAC,cAAc,CAAC,CAAC;IACtE,mDAAmD;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,KAAK,MAAM,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnE,CAAC;AAsDF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,OAAe,EACf,eAAuB,EACvB,cAAc,EACd,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,OAAO,GACR,EAAE,sBAAsB,sCA8JxB"}
+{"version":3,"file":"CommentThreadList.d.ts","sourceRoot":"","sources":["../../src/comments/CommentThreadList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC;IACjD,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC;IACpD,yEAAyE;IACzE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,cAAc,CAAC,cAAc,CAAC,CAAC;IACtE,mDAAmD;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,KAAK,MAAM,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnE,CAAC;AAsDF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,OAAe,EACf,eAAuB,EACvB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,OAAO,GACR,EAAE,sBAAsB,sCAiKxB"}

package/dist/comments/CommentThreadList.js

@@ -65,6 +65,7 @@ function CommentThreadList({
   compact = false,
   defaultExpanded = false,
   renderRootMeta,
+  renderRootDetails,
   getThreadProps,
   renderBody,
   threadToMarkdown,
@@ -126,6 +127,7 @@ function CommentThreadList({
                 ...onReply ? { onReply: () => setReplyingTo(root.id) } : {}
               }
             ),
+            renderRootDetails == null ? void 0 : renderRootDetails(root),
             replies.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: replies.map((reply) => /* @__PURE__ */ jsx(
               CommentCard,
               {
@@ -182,6 +184,7 @@ function CommentThreadList({
             ...onReply ? { onReply: () => setModalReplyTo(message.id) } : {}
           }
         ),
+        message.id === maximizedRoot.id && (renderRootDetails == null ? void 0 : renderRootDetails(maximizedRoot)),
         onReply && modalReplyTo === message.id && /* @__PURE__ */ jsx(
           ReplyInput,
           {

package/dist/comments/CommentThreadList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThreadList.js","sources":["../../src/comments/CommentThreadList.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\nimport { copyText } from \"../components/clipboard\";\nimport { Markdown } from \"../data/Markdown\";\nimport { Tabs } from \"../layout/Tabs\";\nimport { Modal } from \"../overlay/Modal\";\nimport { CommentCard } from \"./CommentCard\";\nimport { buildReplyMap, getRoots, sortReplies } from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentThreadListProps = {\n  comments: Comment[];\n  config: CommentConfig;\n  compact?: boolean;\n  /** Expand each thread immediately (roots and their replies), exposing actions such as Reply. */\n  defaultExpanded?: boolean;\n  /** Extra content rendered above each root card (e.g. an anchor label). */\n  renderRootMeta?: (comment: Comment) => ReactNode;\n  /** Props merged onto each thread wrapper (e.g. for scroll anchoring). */\n  getThreadProps?: (comment: Comment) => HTMLAttributes<HTMLDivElement>;\n  /** Custom body renderer forwarded to each card. */\n  renderBody?: (body: string) => ReactNode;\n  /** Serialize a root and its replies for Copy and the Markdown preview. */\n  threadToMarkdown?: (thread: readonly Comment[]) => string;\n  onUpdateStatus?: (id: string, status: string) => void | Promise<void>;\n  onClose?: (id: string) => void | Promise<void>;\n  onChecklistToggle?: (id: string, index: number) => void;\n  onDelete?: (id: string) => void;\n  /** Submit a reply to `parent`. Presence enables the inline reply affordance. */\n  onReply?: (parent: Comment, body: string) => void | Promise<void>;\n};\n\nfunction ReplyInput({\n  onSubmit,\n  onCancel,\n}: {\n  onSubmit: (body: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [body, setBody] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  async function send() {\n    if (!body.trim() || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    try {\n      await onSubmit(body.trim());\n      setBody(\"\");\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n  return (\n    <div className=\"ml-6 flex gap-1.5 py-1\" aria-busy={submitting}>\n      <input\n        autoFocus\n        value={body}\n        disabled={submitting}\n        onChange={(e) => setBody(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            void send();\n          }\n          if (e.key === \"Escape\") onCancel();\n        }}\n        placeholder=\"Write a reply…\"\n        data-testid=\"comment-reply-input\"\n        className=\"h-7 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary/40\"\n      />\n      <Button\n        size=\"sm\"\n        className=\"h-7 text-xs\"\n        disabled={submitting || !body.trim()}\n        onClick={() => void send()}\n      >\n        Send\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Renders a list of threaded comments: each root with its sorted replies and an\n * optional inline reply box. Fully controlled — mutations route through the\n * id-keyed callbacks.\n */\nexport function CommentThreadList({\n  comments,\n  config,\n  compact = false,\n  defaultExpanded = false,\n  renderRootMeta,\n  getThreadProps,\n  renderBody,\n  threadToMarkdown,\n  onUpdateStatus,\n  onClose,\n  onChecklistToggle,\n  onDelete,\n  onReply,\n}: CommentThreadListProps) {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  // Maximizing is owned here, not by the card: a thread is the unit a reader\n  // wants enlarged, and only this list knows a root's replies.\n  const [maximizedRootId, setMaximizedRootId] = useState<string | null>(null);\n  const [maximizedTab, setMaximizedTab] = useState<\"thread\" | \"markdown\">(\n    \"thread\",\n  );\n  // Which message in the maximized thread has its reply composer open.\n  const [modalReplyTo, setModalReplyTo] = useState<string | null>(null);\n  const roots = getRoots(comments);\n  const replyMap = buildReplyMap(comments);\n\n  if (roots.length === 0) return null;\n\n  const maximizedRoot = roots.find((root) => root.id === maximizedRootId);\n  const maximizedThread = maximizedRoot\n    ? [maximizedRoot, ...sortReplies(replyMap.get(maximizedRoot.id) ?? [])]\n    : [];\n\n  function closeMaximized() {\n    setMaximizedRootId(null);\n    setModalReplyTo(null);\n    setMaximizedTab(\"thread\");\n  }\n\n  function cardHandlers(id: string) {\n    return {\n      ...(onUpdateStatus\n        ? { onUpdateStatus: (status: string) => onUpdateStatus(id, status) }\n        : {}),\n      ...(onClose ? { onClose: () => onClose(id) } : {}),\n      ...(onChecklistToggle\n        ? { onChecklistToggle: (index: number) => onChecklistToggle(id, index) }\n        : {}),\n      ...(onDelete ? { onDelete: () => onDelete(id) } : {}),\n    };\n  }\n\n  return (\n    <>\n      <div className=\"space-y-2\">\n        {roots.map((root) => {\n          const replies = sortReplies(replyMap.get(root.id) ?? []);\n          const thread = [root, ...replies];\n          const threadProps = getThreadProps?.(root) ?? {};\n          return (\n            <div\n              key={root.id}\n              data-testid=\"comment-thread-block\"\n              data-comment-id={root.id}\n              {...threadProps}\n              className={cn(\"space-y-1.5 p-1\", threadProps.className)}\n            >\n              {renderRootMeta ? (\n                <div className=\"px-1\">{renderRootMeta(root)}</div>\n              ) : null}\n              <CommentCard\n                comment={root}\n                config={config}\n                compact={compact}\n                defaultExpanded={defaultExpanded}\n                onMaximize={() => setMaximizedRootId(root.id)}\n                {...(threadToMarkdown\n                  ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                  : {})}\n                {...(renderBody ? { renderBody } : {})}\n                {...cardHandlers(root.id)}\n                {...(onReply ? { onReply: () => setReplyingTo(root.id) } : {})}\n              />\n              {replies.length > 0 && (\n                <div className=\"space-y-1.5\">\n                  {replies.map((reply) => (\n                    <CommentCard\n                      key={reply.id}\n                      comment={reply}\n                      config={config}\n                      compact={compact}\n                      defaultExpanded={defaultExpanded}\n                      onMaximize={() => setMaximizedRootId(root.id)}\n                      {...(threadToMarkdown\n                        ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(reply.id)}\n                    />\n                  ))}\n                </div>\n              )}\n              {onReply && replyingTo === root.id && (\n                <ReplyInput\n                  onCancel={() => setReplyingTo(null)}\n                  onSubmit={async (body) => {\n                    await onReply(root, body);\n                    setReplyingTo(null);\n                  }}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      {maximizedRoot && (\n        <Modal open onClose={closeMaximized} title=\"Comment thread\" size=\"lg\">\n          <div className=\"space-y-3\" data-testid=\"comment-thread-modal\">\n            {threadToMarkdown && (\n              <Tabs\n                tabs={[\n                  { id: \"thread\", label: \"Thread\" },\n                  { id: \"markdown\", label: \"Markdown\" },\n                ]}\n                value={maximizedTab}\n                onChange={(tab) =>\n                  setMaximizedTab(tab === \"markdown\" ? \"markdown\" : \"thread\")\n                }\n              />\n            )}\n            {maximizedTab === \"markdown\" && threadToMarkdown ? (\n              <Markdown text={threadToMarkdown(maximizedThread)} />\n            ) : (\n              <div className=\"space-y-2\">\n                {/* No onMaximize inside: the thread is already maximized. */}\n                {maximizedThread.map((message) => (\n                  <div key={message.id} className=\"space-y-1.5\">\n                    <CommentCard\n                      comment={message}\n                      config={config}\n                      defaultExpanded\n                      {...(threadToMarkdown\n                        ? {\n                            onCopy: () =>\n                              copyText(threadToMarkdown(maximizedThread)),\n                          }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(message.id)}\n                      {...(onReply\n                        ? { onReply: () => setModalReplyTo(message.id) }\n                        : {})}\n                    />\n                    {onReply && modalReplyTo === message.id && (\n                      <ReplyInput\n                        onCancel={() => setModalReplyTo(null)}\n                        onSubmit={async (body) => {\n                          await onReply(maximizedRoot, body);\n                          setModalReplyTo(null);\n                        }}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </Modal>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentThreadList.js","sources":["../../src/comments/CommentThreadList.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\nimport { copyText } from \"../components/clipboard\";\nimport { Markdown } from \"../data/Markdown\";\nimport { Tabs } from \"../layout/Tabs\";\nimport { Modal } from \"../overlay/Modal\";\nimport { CommentCard } from \"./CommentCard\";\nimport { buildReplyMap, getRoots, sortReplies } from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentThreadListProps = {\n  comments: Comment[];\n  config: CommentConfig;\n  compact?: boolean;\n  /** Expand each thread immediately (roots and their replies), exposing actions such as Reply. */\n  defaultExpanded?: boolean;\n  /** Extra content rendered above each root card (e.g. an anchor label). */\n  renderRootMeta?: (comment: Comment) => ReactNode;\n  /** Extra content rendered with each root thread, including its maximized view. */\n  renderRootDetails?: (comment: Comment) => ReactNode;\n  /** Props merged onto each thread wrapper (e.g. for scroll anchoring). */\n  getThreadProps?: (comment: Comment) => HTMLAttributes<HTMLDivElement>;\n  /** Custom body renderer forwarded to each card. */\n  renderBody?: (body: string) => ReactNode;\n  /** Serialize a root and its replies for Copy and the Markdown preview. */\n  threadToMarkdown?: (thread: readonly Comment[]) => string;\n  onUpdateStatus?: (id: string, status: string) => void | Promise<void>;\n  onClose?: (id: string) => void | Promise<void>;\n  onChecklistToggle?: (id: string, index: number) => void;\n  onDelete?: (id: string) => void;\n  /** Submit a reply to `parent`. Presence enables the inline reply affordance. */\n  onReply?: (parent: Comment, body: string) => void | Promise<void>;\n};\n\nfunction ReplyInput({\n  onSubmit,\n  onCancel,\n}: {\n  onSubmit: (body: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [body, setBody] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  async function send() {\n    if (!body.trim() || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    try {\n      await onSubmit(body.trim());\n      setBody(\"\");\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n  return (\n    <div className=\"ml-6 flex gap-1.5 py-1\" aria-busy={submitting}>\n      <input\n        autoFocus\n        value={body}\n        disabled={submitting}\n        onChange={(e) => setBody(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            void send();\n          }\n          if (e.key === \"Escape\") onCancel();\n        }}\n        placeholder=\"Write a reply…\"\n        data-testid=\"comment-reply-input\"\n        className=\"h-7 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary/40\"\n      />\n      <Button\n        size=\"sm\"\n        className=\"h-7 text-xs\"\n        disabled={submitting || !body.trim()}\n        onClick={() => void send()}\n      >\n        Send\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Renders a list of threaded comments: each root with its sorted replies and an\n * optional inline reply box. Fully controlled — mutations route through the\n * id-keyed callbacks.\n */\nexport function CommentThreadList({\n  comments,\n  config,\n  compact = false,\n  defaultExpanded = false,\n  renderRootMeta,\n  renderRootDetails,\n  getThreadProps,\n  renderBody,\n  threadToMarkdown,\n  onUpdateStatus,\n  onClose,\n  onChecklistToggle,\n  onDelete,\n  onReply,\n}: CommentThreadListProps) {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  // Maximizing is owned here, not by the card: a thread is the unit a reader\n  // wants enlarged, and only this list knows a root's replies.\n  const [maximizedRootId, setMaximizedRootId] = useState<string | null>(null);\n  const [maximizedTab, setMaximizedTab] = useState<\"thread\" | \"markdown\">(\n    \"thread\",\n  );\n  // Which message in the maximized thread has its reply composer open.\n  const [modalReplyTo, setModalReplyTo] = useState<string | null>(null);\n  const roots = getRoots(comments);\n  const replyMap = buildReplyMap(comments);\n\n  if (roots.length === 0) return null;\n\n  const maximizedRoot = roots.find((root) => root.id === maximizedRootId);\n  const maximizedThread = maximizedRoot\n    ? [maximizedRoot, ...sortReplies(replyMap.get(maximizedRoot.id) ?? [])]\n    : [];\n\n  function closeMaximized() {\n    setMaximizedRootId(null);\n    setModalReplyTo(null);\n    setMaximizedTab(\"thread\");\n  }\n\n  function cardHandlers(id: string) {\n    return {\n      ...(onUpdateStatus\n        ? { onUpdateStatus: (status: string) => onUpdateStatus(id, status) }\n        : {}),\n      ...(onClose ? { onClose: () => onClose(id) } : {}),\n      ...(onChecklistToggle\n        ? { onChecklistToggle: (index: number) => onChecklistToggle(id, index) }\n        : {}),\n      ...(onDelete ? { onDelete: () => onDelete(id) } : {}),\n    };\n  }\n\n  return (\n    <>\n      <div className=\"space-y-2\">\n        {roots.map((root) => {\n          const replies = sortReplies(replyMap.get(root.id) ?? []);\n          const thread = [root, ...replies];\n          const threadProps = getThreadProps?.(root) ?? {};\n          return (\n            <div\n              key={root.id}\n              data-testid=\"comment-thread-block\"\n              data-comment-id={root.id}\n              {...threadProps}\n              className={cn(\"space-y-1.5 p-1\", threadProps.className)}\n            >\n              {renderRootMeta ? (\n                <div className=\"px-1\">{renderRootMeta(root)}</div>\n              ) : null}\n              <CommentCard\n                comment={root}\n                config={config}\n                compact={compact}\n                defaultExpanded={defaultExpanded}\n                onMaximize={() => setMaximizedRootId(root.id)}\n                {...(threadToMarkdown\n                  ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                  : {})}\n                {...(renderBody ? { renderBody } : {})}\n                {...cardHandlers(root.id)}\n                {...(onReply ? { onReply: () => setReplyingTo(root.id) } : {})}\n              />\n              {renderRootDetails?.(root)}\n              {replies.length > 0 && (\n                <div className=\"space-y-1.5\">\n                  {replies.map((reply) => (\n                    <CommentCard\n                      key={reply.id}\n                      comment={reply}\n                      config={config}\n                      compact={compact}\n                      defaultExpanded={defaultExpanded}\n                      onMaximize={() => setMaximizedRootId(root.id)}\n                      {...(threadToMarkdown\n                        ? { onCopy: () => copyText(threadToMarkdown(thread)) }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(reply.id)}\n                    />\n                  ))}\n                </div>\n              )}\n              {onReply && replyingTo === root.id && (\n                <ReplyInput\n                  onCancel={() => setReplyingTo(null)}\n                  onSubmit={async (body) => {\n                    await onReply(root, body);\n                    setReplyingTo(null);\n                  }}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      {maximizedRoot && (\n        <Modal open onClose={closeMaximized} title=\"Comment thread\" size=\"lg\">\n          <div className=\"space-y-3\" data-testid=\"comment-thread-modal\">\n            {threadToMarkdown && (\n              <Tabs\n                tabs={[\n                  { id: \"thread\", label: \"Thread\" },\n                  { id: \"markdown\", label: \"Markdown\" },\n                ]}\n                value={maximizedTab}\n                onChange={(tab) =>\n                  setMaximizedTab(tab === \"markdown\" ? \"markdown\" : \"thread\")\n                }\n              />\n            )}\n            {maximizedTab === \"markdown\" && threadToMarkdown ? (\n              <Markdown text={threadToMarkdown(maximizedThread)} />\n            ) : (\n              <div className=\"space-y-2\">\n                {/* No onMaximize inside: the thread is already maximized. */}\n                {maximizedThread.map((message) => (\n                  <div key={message.id} className=\"space-y-1.5\">\n                    <CommentCard\n                      comment={message}\n                      config={config}\n                      defaultExpanded\n                      {...(threadToMarkdown\n                        ? {\n                            onCopy: () =>\n                              copyText(threadToMarkdown(maximizedThread)),\n                          }\n                        : {})}\n                      {...(renderBody ? { renderBody } : {})}\n                      {...cardHandlers(message.id)}\n                      {...(onReply\n                        ? { onReply: () => setModalReplyTo(message.id) }\n                        : {})}\n                    />\n                    {message.id === maximizedRoot.id &&\n                      renderRootDetails?.(maximizedRoot)}\n                    {onReply && modalReplyTo === message.id && (\n                      <ReplyInput\n                        onCancel={() => setModalReplyTo(null)}\n                        onSubmit={async (body) => {\n                          await onReply(maximizedRoot, body);\n                          setModalReplyTo(null);\n                        }}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </Modal>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/CodeLine.cjs

@@ -2,20 +2,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const useTheme = require("../hooks/use-theme.cjs");
 const codeHighlight = require("./code-highlight.cjs");
 const HighlightedTokens = require("./HighlightedTokens.cjs");
 function CodeLine({ code, language, className }) {
   const [tokens, setTokens] = react.useState(void 0);
+  const theme = useTheme.useResolvedTheme();
   react.useEffect(() => {
     let cancelled = false;
     setTokens(void 0);
-    codeHighlight.highlightToLines(code, { lang: language }).then((out) => {
+    codeHighlight.highlightToLines(code, { lang: language, theme: theme === "dark" ? "github-dark" : "github-light" }).then((out) => {
       if (!cancelled) setTokens(out == null ? void 0 : out[0]);
     });
     return () => {
       cancelled = true;
     };
-  }, [code, language]);
+  }, [code, language, theme]);
   return /* @__PURE__ */ jsxRuntime.jsx("code", { className: ["whitespace-pre font-mono", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedTokens.HighlightedTokens, { tokens, content: code }) });
 }
 exports.CodeLine = CodeLine;

package/dist/data/CodeLine.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeLine.cjs","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":["useState","useEffect","highlightToLines","jsx","HighlightedTokens"],"mappings":";;;;;;AAaO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAsC,MAAS;AAE3EC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnBC,kBAAAA,iBAAiB,MAAM,EAAE,MAAM,SAAA,CAAU,EAAE,KAAK,CAAC,QAAQ;AACvD,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,wCACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAAC,2BAAAA,IAACC,kBAAAA,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;;"}
+{"version":3,"file":"CodeLine.cjs","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useResolvedTheme } from \"../hooks/use-theme\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n  const theme = useResolvedTheme();\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language, theme: theme === \"dark\" ? \"github-dark\" : \"github-light\" }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, theme]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":["useState","useResolvedTheme","useEffect","highlightToLines","jsx","HighlightedTokens"],"mappings":";;;;;;;AAcO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAsC,MAAS;AAC3E,QAAM,QAAQC,SAAAA,iBAAA;AAEdC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnBC,kBAAAA,iBAAiB,MAAM,EAAE,MAAM,UAAU,OAAO,UAAU,SAAS,gBAAgB,eAAA,CAAgB,EAAE,KAAK,CAAC,QAAQ;AACjH,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,wCACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAAC,2BAAAA,IAACC,kBAAAA,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;;"}

package/dist/data/CodeLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeLine.d.ts","sourceRoot":"","sources":["../../src/data/CodeLine.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BAmBpE"}
+{"version":3,"file":"CodeLine.d.ts","sourceRoot":"","sources":["../../src/data/CodeLine.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BAoBpE"}

package/dist/data/CodeLine.js

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { useResolvedTheme } from "../hooks/use-theme.js";
 import { highlightToLines } from "./code-highlight.js";
 import { HighlightedTokens } from "./HighlightedTokens.js";
 function CodeLine({ code, language, className }) {
   const [tokens, setTokens] = useState(void 0);
+  const theme = useResolvedTheme();
   useEffect(() => {
     let cancelled = false;
     setTokens(void 0);
-    highlightToLines(code, { lang: language }).then((out) => {
+    highlightToLines(code, { lang: language, theme: theme === "dark" ? "github-dark" : "github-light" }).then((out) => {
       if (!cancelled) setTokens(out == null ? void 0 : out[0]);
     });
     return () => {
       cancelled = true;
     };
-  }, [code, language]);
+  }, [code, language, theme]);
   return /* @__PURE__ */ jsx("code", { className: ["whitespace-pre font-mono", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx(HighlightedTokens, { tokens, content: code }) });
 }
 export {

package/dist/data/CodeLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeLine.js","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsC,MAAS;AAE3E,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnB,qBAAiB,MAAM,EAAE,MAAM,SAAA,CAAU,EAAE,KAAK,CAAC,QAAQ;AACvD,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,6BACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAA,oBAAC,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;"}
+{"version":3,"file":"CodeLine.js","sources":["../../src/data/CodeLine.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useResolvedTheme } from \"../hooks/use-theme\";\nimport { highlightToLines, type HighlightedLine } from \"./code-highlight\";\nimport { HighlightedTokens } from \"./HighlightedTokens\";\n\nexport interface CodeLineProps {\n  code: string;\n  /** Shiki language id; without one the line renders as plain text. */\n  language?: string;\n  className?: string;\n}\n\n// CodeLine paints a single source line, syntax-highlighted, inline — the line a\n// stack frame or trace node ran, shown without the gutter and frame of a block.\nexport function CodeLine({ code, language, className }: CodeLineProps) {\n  const [tokens, setTokens] = useState<HighlightedLine | undefined>(undefined);\n  const theme = useResolvedTheme();\n\n  useEffect(() => {\n    let cancelled = false;\n    setTokens(undefined);\n    highlightToLines(code, { lang: language, theme: theme === \"dark\" ? \"github-dark\" : \"github-light\" }).then((out) => {\n      if (!cancelled) setTokens(out?.[0]);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, theme]);\n\n  return (\n    <code className={[\"whitespace-pre font-mono\", className].filter(Boolean).join(\" \")}>\n      <HighlightedTokens tokens={tokens} content={code} />\n    </code>\n  );\n}\n"],"names":[],"mappings":";;;;;AAcO,SAAS,SAAS,EAAE,MAAM,UAAU,aAA4B;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsC,MAAS;AAC3E,QAAM,QAAQ,iBAAA;AAEd,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,cAAU,MAAS;AACnB,qBAAiB,MAAM,EAAE,MAAM,UAAU,OAAO,UAAU,SAAS,gBAAgB,eAAA,CAAgB,EAAE,KAAK,CAAC,QAAQ;AACjH,UAAI,CAAC,UAAW,WAAU,2BAAM,EAAE;AAAA,IACpC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,6BACG,QAAA,EAAK,WAAW,CAAC,4BAA4B,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC/E,UAAA,oBAAC,qBAAkB,QAAgB,SAAS,MAAM,GACpD;AAEJ;"}

package/dist/data/DataTable.cjs

@@ -159,6 +159,8 @@ function DataTableInner({
   isRowClickable,
   getRowHref,
   renderExpandedRow,
+  expandedRowIds,
+  onExpandedRowIdsChange,
   renderCard,
   detailStyle = "row",
   detailDialogTitle,
@@ -237,7 +239,7 @@ function DataTableInner({
     if (boundedFilters) onBoundedFiltersChange == null ? void 0 : onBoundedFiltersChange(updated);
     else setNumberFilters(updated);
   };
-  const [expandedRows, setExpandedRows] = react.useState({});
+  const [localExpandedRows, setLocalExpandedRows] = react.useState({});
   const [detailRow, setDetailRow] = react.useState(null);
   const [localGroupingMode, setLocalGroupingMode] = react.useState(defaultGroupingMode);
   const [localGlobalFilter, setLocalGlobalFilter] = react.useState("");
@@ -1028,7 +1030,8 @@ function DataTableInner({
   const rowStream = react.useMemo(() => {
     const withExpansion = (record) => {
       const row = { kind: "row", record };
-      if (detailStyle !== "row" || !renderExpandedRow || !expandedRows[record.id]) {
+      const expanded = expandedRowIds ? expandedRowIds.includes(record.id) : localExpandedRows[record.id];
+      if (detailStyle !== "row" || !renderExpandedRow || !expanded) {
         return [row];
       }
       const content = renderExpandedRow(record.row, {
@@ -1050,7 +1053,8 @@ function DataTableInner({
     visibleSorted,
     detailStyle,
     renderExpandedRow,
-    expandedRows,
+    expandedRowIds,
+    localExpandedRows,
     effectiveColumns,
     visibleColumns,
     filterActionsByColumn
@@ -1576,7 +1580,7 @@ function DataTableInner({
                             return /* @__PURE__ */ jsxRuntime.jsx("tr", { ...rowHooks, className: "align-top", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border-b border-border/60 p-density-2", children: renderCard(record.row) }) }, record.id);
                           }
                           const href = getRowHref == null ? void 0 : getRowHref(record.row);
-                          const expanded = expandedRows[record.id] ?? false;
+                          const expanded = expandedRowIds ? expandedRowIds.includes(record.id) : localExpandedRows[record.id] ?? false;
                           const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
                             columns: effectiveColumns,
                             visibleColumns,
@@ -1592,10 +1596,16 @@ function DataTableInner({
                           const activateRow = () => {
                             if (selectionClickEnabled) toggleRowSelection(record);
                             if (expandsInline) {
-                              setExpandedRows((current) => ({
-                                ...current,
-                                [record.id]: !current[record.id]
-                              }));
+                              if (expandedRowIds) {
+                                onExpandedRowIdsChange == null ? void 0 : onExpandedRowIdsChange(
+                                  expanded ? expandedRowIds.filter((id) => id !== record.id) : [...expandedRowIds, record.id]
+                                );
+                              } else {
+                                setLocalExpandedRows((current) => ({
+                                  ...current,
+                                  [record.id]: !current[record.id]
+                                }));
+                              }
                             }
                             if (opensDialog) setDetailRow(record);
                             if (rowClickEnabled) onRowClick == null ? void 0 : onRowClick(record.row);