@arcote.tech/arc-ds 0.7.11 → 0.7.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.7.11",
+  "version": "0.7.13",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -30,7 +30,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.11",
+    "@arcote.tech/arc": "^0.7.13",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/chat/chat-message.tsx

@@ -1,7 +1,6 @@
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { Markdown } from "../markdown/markdown";
 import { Button } from "../button/button";
-import { Bot, User, MessageSquare } from "lucide-react";
+import { Bot, User, MessageSquare, Loader2 } from "lucide-react";
 import type { ChatMessageData } from "./types";
 import { ToolUseBlock } from "./tool-use-block";
 import { useChatLabels } from "./chat-labels";
@@ -21,6 +20,12 @@ export function ChatMessage({
   const isUser = message.role === "user";
   const hasUnansweredQuestions =
     message.questions && message.questions.length > 0;
+  // Empty assistant bubble in streaming state = LLM still thinking / waiting
+  // for first chunk. Show a spinner so the UI doesn't look frozen — the
+  // pulsing caret on `data-streaming` only works once there's a `last-child`
+  // to attach to.
+  const showStreamingPlaceholder =
+    !isUser && message.isStreaming && !message.content;
 
   return (
     <div className={`flex gap-3 ${isUser ? "flex-row-reverse" : ""}`}>
@@ -48,13 +53,13 @@ export function ChatMessage({
               : "bg-card border border-border rounded-tl-sm"
           }`}
         >
-          <div
-            data-streaming={message.isStreaming || undefined}
-            className="chat-markdown space-y-2 text-left [&_p]:m-0 [&_ul]:my-1 [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:pl-5 [&_li]:my-0.5 [&_a]:text-primary [&_a]:underline [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_pre]:bg-muted [&_pre]:p-2 [&_pre]:rounded [&_pre]:text-xs [&_pre]:overflow-x-auto [&_strong]:font-semibold [&_em]:italic [&_h1]:text-base [&_h1]:font-semibold [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:text-sm [&_h3]:font-medium [&_blockquote]:border-l-2 [&_blockquote]:border-primary/30 [&_blockquote]:pl-3 [&_blockquote]:italic data-[streaming]:[&_>*:last-child]:after:content-[''] data-[streaming]:[&_>*:last-child]:after:inline-block data-[streaming]:[&_>*:last-child]:after:w-[0.4em] data-[streaming]:[&_>*:last-child]:after:h-[1em] data-[streaming]:[&_>*:last-child]:after:bg-foreground/60 data-[streaming]:[&_>*:last-child]:after:animate-pulse data-[streaming]:[&_>*:last-child]:after:ml-0.5 data-[streaming]:[&_>*:last-child]:after:align-text-bottom">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {showStreamingPlaceholder ? (
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          ) : (
+            <Markdown isStreaming={message.isStreaming}>
               {message.content}
-            </ReactMarkdown>
-          </div>
+            </Markdown>
+          )}
         </div>
 
         {/* Tool uses */}

package/src/ds/markdown/markdown.tsx

@@ -0,0 +1,216 @@
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "../../lib/utils";
+
+export interface MarkdownProps {
+  /** Surowy markdown (GFM) do wyrenderowania. */
+  children: string;
+  /** Dodatkowe klasy na wrapperze (np. typografia z kontekstu konsumenta). */
+  className?: string;
+  /**
+   * Pulsujący caret na końcu ostatniego bloku — dla treści strumieniowanej.
+   * Steruje `data-streaming` na wrapperze.
+   */
+  isStreaming?: boolean;
+}
+
+// WAŻNE: wszystkie className to STATYCZNE literały — Tailwind v4 skanuje źródła
+// DS przez `@source` i generuje tylko klasy obecne dosłownie w kodzie. Żadnej
+// dynamicznej konkatenacji nazw klas. `node` (hast) jest odfiltrowywany z każdego
+// mapowania, żeby nie trafił na DOM. `className` z react-markdown (np.
+// `language-ts` na code, `task-list-item` na li) mergujemy przez `cn` —
+// spread `{...props}` PO `className="…"` nadpisałby nasze klasy.
+const components: Components = {
+  p: ({ node, className, ...props }) => (
+    <p className={cn("my-2 leading-relaxed", className)} {...props} />
+  ),
+  ul: ({ node, className, ...props }) => (
+    <ul
+      className={cn(
+        "my-2 ml-5 list-disc space-y-1 marker:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  ol: ({ node, className, ...props }) => (
+    <ol
+      className={cn(
+        "my-2 ml-5 list-decimal space-y-1 marker:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  li: ({ node, className, ...props }) => {
+    // GFM oznacza pozycje task-listy klasą `task-list-item` i wstawia checkbox
+    // jako pierwsze dziecko — wtedy bez punktora, w jednej linii z checkboxem.
+    const isTask =
+      typeof className === "string" && className.includes("task-list-item");
+    return (
+      <li
+        className={cn(
+          isTask
+            ? "-ml-5 flex list-none items-start gap-2"
+            : "pl-1 [&>ol]:mt-1 [&>ol]:mb-0 [&>ul]:mt-1 [&>ul]:mb-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+  input: ({ node, className, ...props }) => (
+    // GFM renderuje `<input type=checkbox disabled checked?>` — read-only,
+    // żeby React nie ostrzegał o kontrolce bez `onChange`.
+    <input
+      className={cn("mt-1 accent-primary", className)}
+      readOnly
+      {...props}
+    />
+  ),
+  h1: ({ node, className, ...props }) => (
+    <h1 className={cn("mt-4 mb-2 text-lg font-semibold", className)} {...props} />
+  ),
+  h2: ({ node, className, ...props }) => (
+    <h2
+      className={cn("mt-4 mb-2 text-base font-semibold", className)}
+      {...props}
+    />
+  ),
+  h3: ({ node, className, ...props }) => (
+    <h3
+      className={cn("mt-3 mb-1.5 text-sm font-semibold", className)}
+      {...props}
+    />
+  ),
+  h4: ({ node, className, ...props }) => (
+    <h4 className={cn("mt-3 mb-1 text-sm font-medium", className)} {...props} />
+  ),
+  h5: ({ node, className, ...props }) => (
+    <h5
+      className={cn(
+        "mt-2 mb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ node, className, ...props }) => (
+    <h6
+      className={cn(
+        "mt-2 mb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  a: ({ node, className, ...props }) => (
+    <a
+      className={cn(
+        "text-primary underline underline-offset-2 break-words hover:opacity-80",
+        className,
+      )}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+    />
+  ),
+  code: ({ node, className, ...props }) => (
+    // Inline code. Wewnątrz `pre` tło/padding/rozmiar resetuje override `pre`
+    // (selektor `pre > code` ma wyższą specyficzność) — brak podwójnego tła.
+    <code
+      className={cn(
+        "rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  pre: ({ node, className, ...props }) => (
+    <pre
+      className={cn(
+        "my-2 overflow-x-auto rounded-md bg-muted p-3 text-xs [&>code]:bg-transparent [&>code]:p-0 [&>code]:font-mono [&>code]:text-inherit",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  blockquote: ({ node, className, ...props }) => (
+    <blockquote
+      className={cn(
+        "my-2 border-l-2 border-primary/30 pl-3 text-muted-foreground italic",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  hr: ({ node, className, ...props }) => (
+    <hr className={cn("my-4 border-t border-border", className)} {...props} />
+  ),
+  table: ({ node, className, ...props }) => (
+    <div className="my-2 overflow-x-auto">
+      <table
+        className={cn("w-full border-collapse text-sm", className)}
+        {...props}
+      />
+    </div>
+  ),
+  thead: ({ node, className, ...props }) => (
+    <thead className={cn("bg-muted", className)} {...props} />
+  ),
+  th: ({ node, className, ...props }) => (
+    <th
+      className={cn(
+        "border border-border px-3 py-1.5 text-left font-semibold",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  td: ({ node, className, ...props }) => (
+    <td className={cn("border border-border px-3 py-1.5", className)} {...props} />
+  ),
+  del: ({ node, className, ...props }) => (
+    <del className={cn("line-through opacity-70", className)} {...props} />
+  ),
+  img: ({ node, className, ...props }) => (
+    <img
+      className={cn("my-2 max-w-full rounded-md", className)}
+      loading="lazy"
+      {...props}
+    />
+  ),
+  strong: ({ node, className, ...props }) => (
+    <strong className={cn("font-semibold", className)} {...props} />
+  ),
+  em: ({ node, className, ...props }) => (
+    <em className={cn("italic", className)} {...props} />
+  ),
+};
+
+/**
+ * Renderuje markdown (GFM) spójnie z theme DS (zmienne CSS, dark mode). Pokrywa
+ * pełny zakres GFM: listy (z punktorami/numerami + zagnieżdżone), task-listy,
+ * tabele (z poziomym scrollem), nagłówki h1–h6, code inline/blok, blockquote,
+ * hr, linki (external w nowej karcie), strikethrough, obrazy.
+ *
+ * `isStreaming` dokleja pulsujący caret na końcu ostatniego bloku — wrapper
+ * ustawia `data-streaming`, a caret celuje w `[&>*:last-child]::after`
+ * (bezpośrednie ostatnie dziecko, nie głębiej np. w `<li>`).
+ */
+export function Markdown({ children, className, isStreaming }: MarkdownProps) {
+  return (
+    <div
+      data-streaming={isStreaming || undefined}
+      className={cn(
+        "text-left break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        "data-[streaming]:[&>*:last-child]:after:ml-0.5 data-[streaming]:[&>*:last-child]:after:inline-block data-[streaming]:[&>*:last-child]:after:h-[1em] data-[streaming]:[&>*:last-child]:after:w-[0.4em] data-[streaming]:[&>*:last-child]:after:animate-pulse data-[streaming]:[&>*:last-child]:after:bg-foreground/60 data-[streaming]:[&>*:last-child]:after:align-text-bottom data-[streaming]:[&>*:last-child]:after:content-['']",
+        className,
+      )}
+    >
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/index.ts

@@ -105,6 +105,10 @@ export { ExpandablePanel } from "./layout/expandable-panel";
 export { useExpandable } from "./layout/use-expandable";
 export type { UseExpandableReturn } from "./layout/use-expandable";
 
+// Markdown
+export { Markdown } from "./ds/markdown/markdown";
+export type { MarkdownProps } from "./ds/markdown/markdown";
+
 // Chat
 export { Chat } from "./ds/chat/chat";
 export type { ChatProps } from "./ds/chat/chat";