@arcote.tech/arc-ds 0.5.2 → 0.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.5.6",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -25,10 +25,12 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.5.2",
+    "@arcote.tech/arc": "^0.5.6",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/bento-card/bento-card.tsx

@@ -1,5 +1,4 @@
 import { Box } from "../box/box";
-import { useBentoSpan } from "../bento-grid/bento-grid";
 import { motion } from "framer-motion";
 import { Plus } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
@@ -13,7 +12,6 @@ export interface BentoCardProps {
   onEdit: () => void;
   emptyLabel?: ReactNode;
   className?: string;
-  span?: string;
   children?: ReactNode;
 }
 
@@ -26,45 +24,39 @@ export function BentoCard({
   onEdit,
   emptyLabel,
   className,
-  span,
   children,
 }: BentoCardProps) {
-  const autoSpan = useBentoSpan();
-  const resolvedSpan = span ?? autoSpan;
-
   return (
-    <div className={`h-full ${resolvedSpan} ${className ?? ""}`.trim()}>
-      <motion.div
-        layoutId={layoutId}
-        className="h-full"
-        style={{ opacity: isModalOpen ? 0 : 1 }}
+    <motion.div
+      layoutId={layoutId}
+      className={className}
+      style={{ opacity: isModalOpen ? 0 : 1 }}
+    >
+      <Box
+        layout={false}
+        className="group relative cursor-pointer p-5 hover:shadow-lg transition-all duration-300 hover:scale-[1.01]"
+        onClick={onEdit}
       >
-        <Box
-          layout={false}
-          className="group relative cursor-pointer p-5 hover:shadow-lg transition-all duration-300 h-full min-h-[140px] hover:scale-[1.01]"
-          onClick={onEdit}
-        >
-          <div className="flex items-center gap-2.5 mb-3">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
-              <Icon className="h-4 w-4 text-primary" />
-            </div>
-            <span className="text-sm font-semibold">{title}</span>
+        <div className="flex items-center gap-2.5 mb-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+            <Icon className="h-4 w-4 text-primary" />
           </div>
+          <span className="text-sm font-semibold">{title}</span>
+        </div>
 
-          {isEmpty ? (
-            <div className="flex flex-col items-center justify-center gap-2 py-4 border-2 border-dashed border-muted-foreground/15 rounded-xl transition-colors group-hover:border-primary/30">
-              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-primary/10">
-                <Plus className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
-              </div>
-              {emptyLabel && (
-                <span className="text-xs text-muted-foreground">{emptyLabel}</span>
-              )}
+        {isEmpty ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-4 border-2 border-dashed border-muted-foreground/15 rounded-xl transition-colors group-hover:border-primary/30">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-primary/10">
+              <Plus className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
             </div>
-          ) : (
-            <div className="flex flex-col gap-2">{children}</div>
-          )}
-        </Box>
-      </motion.div>
-    </div>
+            {emptyLabel && (
+              <span className="text-xs text-muted-foreground">{emptyLabel}</span>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">{children}</div>
+        )}
+      </Box>
+    </motion.div>
   );
 }

package/src/ds/bento-grid/bento-grid.tsx

@@ -1,51 +1,38 @@
-import { Children, createContext, useContext, type ReactNode } from "react";
+import { Children, useMemo, type ReactNode } from "react";
 
 export interface BentoGridProps {
   children: ReactNode;
   className?: string;
 }
 
-type BentoGridItemContext = {
-  index: number;
-  count: number;
-};
-
-const BentoItemContext = createContext<BentoGridItemContext | null>(null);
-
-/**
- * Hook for children to read their grid span class.
- * Returns the appropriate Tailwind class (e.g., "md:row-span-2", "md:col-span-3")
- * or empty string for normal cells.
- */
-export function useBentoSpan(): string {
-  const ctx = useContext(BentoItemContext);
-  if (!ctx) return "";
-  const { index, count } = ctx;
-
-  if (count < 5) return "";
-  if (index === 0) return "md:row-span-2";
-  if (index === count - 1 && (count === 6 || count === 8)) return "md:col-span-3";
-  return "";
-}
-
 /**
- * Responsive bento grid with auto-layout based on child count.
+ * Responsive multi-column layout. Children are distributed round-robin into
+ * 3 columns; each column is a flex-col so items take their natural height.
+ * No row-spanning, no fixed row heights, no auto-layout magic — every item
+ * controls its own size and renders exactly as tall as its content.
  *
- * Children call useBentoSpan() to get their grid span class.
- * No wrapper divs — children control their own layout.
+ * Breakpoints: 1 column (mobile), 2 (md), 3 (lg+). Children are always
+ * distributed across 3 buckets; on narrower viewports the buckets stack via
+ * the outer `grid-cols-*` utilities.
  */
 export function BentoGrid({ children, className }: BentoGridProps) {
-  const items = Children.toArray(children);
-  const count = items.length;
-
-  if (count === 0) return null;
+  const columns = useMemo(() => {
+    const items = Children.toArray(children);
+    const cols: ReactNode[][] = [[], [], []];
+    items.forEach((item, i) => {
+      cols[i % 3].push(item);
+    });
+    return cols;
+  }, [children]);
 
   return (
-    <div className={`grid grid-cols-1 md:grid-cols-3 gap-3 ${className ?? ""}`}>
-      {items.map((child, index) => (
-        <BentoItemContext.Provider key={index} value={{ index, count }}>
-          {child}
-        </BentoItemContext.Provider>
+    <div
+      className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 items-start ${className ?? ""}`}
+    >
+      {columns.map((col, i) => (
+        <div key={i} className="flex flex-col gap-3">
+          {col}
+        </div>
       ))}
     </div>
   );

package/src/ds/button/button.tsx

@@ -21,6 +21,8 @@ export const buttonVariants = cva(
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        "outline-dashed":
+          "border border-dashed border-border/60 bg-transparent text-muted-foreground hover:border-border hover:text-foreground",
         destructive: "bg-destructive text-white hover:bg-destructive/90",
         link: "text-primary underline-offset-4 hover:underline",
       },

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

@@ -5,6 +5,7 @@ import { SearchSelect } from "../search-select/search-select";
 import { Send, Globe } from "lucide-react";
 import { useState, type ReactNode } from "react";
 import type { ChatModel, SendMessageOptions } from "./types";
+import { useChatLabels } from "./chat-labels";
 
 interface ChatInputProps {
   onSend: (message: string, options: SendMessageOptions) => void;
@@ -12,10 +13,18 @@ interface ChatInputProps {
   defaultModel?: string;
   /** Extra toolbar content (e.g., attach menu) rendered after web search toggle */
   toolbar?: ReactNode;
-  /** Label for web search toggle */
-  webSearchLabel?: string;
-  /** Placeholder for message input */
-  placeholder?: string;
+  /** Show the model selector dropdown. Default true. */
+  showModelSelector?: boolean;
+  /** Show the web search toggle. Default true. */
+  showWebSearch?: boolean;
+  /**
+   * Render slot for the send button. Receives `onClick` and `disabled` —
+   * consumer wires them to its own button. Defaults to a `<Button icon={Send}>`.
+   */
+  renderSendButton?: (props: {
+    onClick: () => void;
+    disabled: boolean;
+  }) => ReactNode;
   /** Disable input (e.g., during generation) */
   disabled?: boolean;
 }
@@ -25,10 +34,12 @@ export function ChatInput({
   models,
   defaultModel,
   toolbar,
-  webSearchLabel = "Web",
-  placeholder = "Type a message...",
+  showModelSelector = true,
+  showWebSearch = true,
+  renderSendButton,
   disabled = false,
 }: ChatInputProps) {
+  const labels = useChatLabels();
   const [message, setMessage] = useState("");
   const [model, setModel] = useState(defaultModel ?? models[0]?.value ?? "");
   const [webSearch, setWebSearch] = useState(false);
@@ -41,51 +52,65 @@ export function ChatInput({
     setMessage("");
   };
 
+  // Hide the toolbar row entirely if there's nothing in it
+  const hasToolbar = showModelSelector || showWebSearch || toolbar;
+  const sendDisabled = disabled || !message.trim();
+
   return (
     <Box className={`p-3 space-y-2 ${disabled ? "opacity-50 pointer-events-none" : ""}`}>
       {/* Input + send */}
-      <div className="flex items-end gap-2">
+      <div className="flex items-center gap-2">
         <div className="flex-1">
           <TextareaField
             value={message}
             onChange={(val) => setMessage(val ?? "")}
-            placeholder={disabled ? "Generowanie..." : placeholder}
+            placeholder={disabled ? labels.placeholderGenerating : labels.placeholder}
             rows={1}
           />
         </div>
-        <Button
-          size="sm"
-          icon={Send}
-          onClick={handleSend}
-          disabled={disabled || !message.trim()}
-        />
+        {renderSendButton ? (
+          renderSendButton({ onClick: handleSend, disabled: sendDisabled })
+        ) : (
+          <Button
+            size="sm"
+            icon={Send}
+            onClick={handleSend}
+            disabled={sendDisabled}
+          />
+        )}
       </div>
 
       {/* Toolbar */}
-      <div className="flex items-center gap-1.5">
-        <div className="w-[130px]">
-          <SearchSelect
-            value={model}
-            onChange={setModel}
-            options={models}
-            placeholder="Model..."
-            position="absolute"
-            direction="up"
-            size="sm"
-            allowClear={false}
-          />
-        </div>
+      {hasToolbar && (
+        <div className="flex items-center gap-1.5">
+          {showModelSelector && (
+            <div className="w-[130px]">
+              <SearchSelect
+                value={model}
+                onChange={setModel}
+                options={models}
+                placeholder={labels.modelPlaceholder}
+                position="absolute"
+                direction="up"
+                size="sm"
+                allowClear={false}
+              />
+            </div>
+          )}
 
-        <Button
-          variant={webSearch ? "default" : "ghost"}
-          size="xs"
-          icon={Globe}
-          label={webSearchLabel}
-          onClick={() => setWebSearch((v) => !v)}
-        />
+          {showWebSearch && (
+            <Button
+              variant={webSearch ? "default" : "ghost"}
+              size="xs"
+              icon={Globe}
+              label={labels.webSearchLabel}
+              onClick={() => setWebSearch((v) => !v)}
+            />
+          )}
 
-        {toolbar}
-      </div>
+          {toolbar}
+        </div>
+      )}
     </Box>
   );
 }

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

@@ -0,0 +1,89 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+export interface ChatLabels {
+  // ChatInput
+  placeholder: string;
+  placeholderGenerating: string;
+  modelPlaceholder: string;
+  webSearchLabel: string;
+  // QuestionTabs (wizard)
+  submitLabel: string;
+  customPlaceholder: string;
+  nextLabel: string;
+  backLabel: string;
+  summaryTitle: string;
+  editLabel: string;
+  noAnswerLabel: string;
+  questionOfLabel: (current: number, total: number) => string;
+  /** Secondary button in QuestionTabs — "Continue discussion" instead of answering */
+  discussLabel: string;
+  // ChatMessage
+  questionsLabel: string;
+  answerLabel: string;
+  // Tool execution log (rendered by chat-component)
+  toolCallingLabel: string;
+  toolDoneLabel: string;
+  errorLabel: string;
+  // askQuestions tool view
+  answerBelowLabel: string;
+  // completeStage tool view
+  stageCompleteLabel: string;
+  advanceStageLabel: string;
+  continueStageLabel: string;
+  stageAdvancedLabel: string;
+  stageContinuedLabel: string;
+  /** Label for the "Przejdź do następnego" button on the final stage. */
+  finishConsultationLabel: string;
+}
+
+export const defaultChatLabels: ChatLabels = {
+  placeholder: "Type a message...",
+  placeholderGenerating: "Generating...",
+  modelPlaceholder: "Model...",
+  webSearchLabel: "Web",
+  submitLabel: "Submit",
+  customPlaceholder: "Custom answer...",
+  nextLabel: "Next",
+  backLabel: "Back",
+  summaryTitle: "Summary",
+  editLabel: "Edit",
+  noAnswerLabel: "No answer",
+  questionOfLabel: (current, total) => `Question ${current} of ${total}`,
+  discussLabel: "Continue discussion",
+  questionsLabel: "questions to answer",
+  answerLabel: "Answer",
+  toolCallingLabel: "Executing...",
+  toolDoneLabel: "Done",
+  errorLabel: "Error",
+  answerBelowLabel: "Answer the questions below",
+  stageCompleteLabel: "Stage complete",
+  advanceStageLabel: "Go to next stage",
+  continueStageLabel: "Keep talking",
+  stageAdvancedLabel: "Moved to next stage",
+  stageContinuedLabel: "Staying on this stage",
+  finishConsultationLabel: "Finish consultation",
+};
+
+const ChatLabelsContext = createContext<ChatLabels>(defaultChatLabels);
+
+export function ChatLabelsProvider({
+  labels,
+  children,
+}: {
+  labels?: Partial<ChatLabels>;
+  children: ReactNode;
+}) {
+  const merged = useMemo<ChatLabels>(
+    () => ({ ...defaultChatLabels, ...labels }),
+    [labels],
+  );
+  return (
+    <ChatLabelsContext.Provider value={merged}>
+      {children}
+    </ChatLabelsContext.Provider>
+  );
+}
+
+export function useChatLabels(): ChatLabels {
+  return useContext(ChatLabelsContext);
+}

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

@@ -1,25 +1,23 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Button } from "../button/button";
 import { Bot, User, MessageSquare } from "lucide-react";
 import type { ChatMessageData } from "./types";
 import { ToolUseBlock } from "./tool-use-block";
+import { useChatLabels } from "./chat-labels";
 
 interface ChatMessageProps {
   message: ChatMessageData;
   onAnswerQuestions?: () => void;
   onToolUseClick?: (link: string) => void;
-  /** Label for questions count, e.g. "questions to answer" */
-  questionsLabel?: string;
-  /** Label for the answer button */
-  answerLabel?: string;
 }
 
 export function ChatMessage({
   message,
   onAnswerQuestions,
   onToolUseClick,
-  questionsLabel = "questions to answer",
-  answerLabel = "Answer",
 }: ChatMessageProps) {
+  const { questionsLabel, answerLabel } = useChatLabels();
   const isUser = message.role === "user";
   const hasUnansweredQuestions =
     message.questions && message.questions.length > 0;
@@ -50,18 +48,11 @@ export function ChatMessage({
               : "bg-card border border-border rounded-tl-sm"
           }`}
         >
-          {message.content.split("\n").map((line, i) => (
-            <p key={i} className={i > 0 ? "mt-1.5" : ""}>
-              {line.startsWith("• ") ? (
-                <span className="flex items-start gap-1.5 text-left">
-                  <span className="text-primary mt-px">•</span>
-                  <span>{line.slice(2)}</span>
-                </span>
-              ) : (
-                line
-              )}
-            </p>
-          ))}
+          <div 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">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {message.content}
+            </ReactMarkdown>
+          </div>
           {message.isStreaming && (
             <span className="inline-block w-1.5 h-4 bg-foreground/60 animate-pulse ml-0.5 -mb-0.5" />
           )}

package/src/ds/chat/chat-tool-log.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { CheckCircle2, Loader2, AlertCircle } from "lucide-react";
+import { CheckCircle2, Loader2, AlertCircle, ArrowUpRight } from "lucide-react";
 
 export interface ChatToolLogProps {
   /** Tool label displayed in the header */
@@ -12,6 +12,13 @@ export interface ChatToolLogProps {
   icon?: string;
   /** Additional details rendered below the label */
   children?: ReactNode;
+  /**
+   * Optional click handler. When provided, the log becomes interactive
+   * (button) and shows a navigation indicator. Useful for jumping to
+   * the underlying domain object (e.g. the strategy page that the tool
+   * just mutated).
+   */
+  onClick?: () => void;
 }
 
 export function ChatToolLog({
@@ -19,6 +26,7 @@ export function ChatToolLog({
   calling,
   error,
   children,
+  onClick,
 }: ChatToolLogProps) {
   const hasError = !!error;
 
@@ -40,9 +48,17 @@ export function ChatToolLog({
       ? "text-blue-700 dark:text-blue-400"
       : "text-green-700 dark:text-green-400";
 
+  const isClickable = !!onClick && !calling && !hasError;
+  const Component = isClickable ? "button" : "div";
+  const interactiveCls = isClickable
+    ? "cursor-pointer hover:bg-green-500/10 text-left"
+    : "";
+
   return (
-    <div
-      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor}`}
+    <Component
+      type={isClickable ? "button" : undefined}
+      onClick={isClickable ? onClick : undefined}
+      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor} ${interactiveCls}`}
     >
       <div className={`mt-0.5 shrink-0 ${iconColor}`}>
         {hasError ? (
@@ -66,6 +82,9 @@ export function ChatToolLog({
           </div>
         )}
       </div>
-    </div>
+      {isClickable && (
+        <ArrowUpRight className="h-3.5 w-3.5 mt-0.5 shrink-0 text-muted-foreground" />
+      )}
+    </Component>
   );
 }

package/src/ds/chat/chat-tool-question.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { MessageCircleQuestion, CheckCircle2 } from "lucide-react";
+import { MessageCircleQuestion, User } from "lucide-react";
 
 export interface ChatToolQuestionProps {
   /** Whether the tool is waiting for user response */
@@ -12,23 +12,23 @@ export function ChatToolQuestion({
   calling,
   children,
 }: ChatToolQuestionProps) {
-  const borderColor = calling
-    ? "border-amber-500/20 bg-amber-500/5"
-    : "border-green-500/20 bg-green-500/5";
+  // Calling = waiting for user → amber accent.
+  // Answered → primary (purple) so it visually matches user message bubbles.
+  const containerColor = calling
+    ? "border border-amber-500/20 bg-amber-500/5"
+    : "border border-primary/20 bg-primary/10";
 
-  const iconColor = calling
-    ? "text-amber-500"
-    : "text-green-500";
+  const iconColor = calling ? "text-amber-500" : "text-primary";
 
   return (
     <div
-      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor}`}
+      className={`flex items-start gap-3 w-full rounded-xl p-3 transition-colors ${containerColor}`}
     >
       <div className={`mt-0.5 shrink-0 ${iconColor}`}>
         {calling ? (
           <MessageCircleQuestion className="h-4 w-4" />
         ) : (
-          <CheckCircle2 className="h-4 w-4" />
+          <User className="h-4 w-4" />
         )}
       </div>
       <div className="flex-1 min-w-0 space-y-2 text-sm">{children}</div>

package/src/ds/chat/chat.tsx

@@ -32,20 +32,22 @@ export interface ChatProps {
   sidebar?: ReactNode;
   /** Extra toolbar content for ChatInput (attach menu, etc.) */
   toolbar?: ReactNode;
+  /** Show the model selector dropdown in ChatInput. Default true. */
+  showModelSelector?: boolean;
+  /** Show the web search toggle in ChatInput. Default true. */
+  showWebSearch?: boolean;
+  /**
+   * Render slot for ChatInput's send button. Receives `onClick` and
+   * `disabled` — caller renders its own button (e.g. branded with a logo).
+   */
+  renderSendButton?: (props: {
+    onClick: () => void;
+    disabled: boolean;
+  }) => ReactNode;
   /** Max width class for the message area */
   maxWidth?: string;
   /** Disable input (during generation) */
   disabled?: boolean;
-  /** Labels for i18n */
-  labels?: {
-    questionsLabel?: string;
-    answerLabel?: string;
-    webSearchLabel?: string;
-    placeholder?: string;
-    submitLabel?: string;
-    completedLabel?: string;
-    customPlaceholder?: string;
-  };
 }
 
 export function Chat({
@@ -58,9 +60,11 @@ export function Chat({
   header,
   sidebar,
   toolbar,
+  showModelSelector = true,
+  showWebSearch = true,
+  renderSendButton,
   maxWidth = "max-w-3xl",
   disabled = false,
-  labels,
 }: ChatProps) {
   const { inputOverride } = useChatInput();
   const [answeringMessageId, setAnsweringMessageId] = useState<string | null>(
@@ -103,8 +107,6 @@ export function Chat({
                   : undefined
               }
               onToolUseClick={onToolUseClick}
-              questionsLabel={labels?.questionsLabel}
-              answerLabel={labels?.answerLabel}
             />
           ))}
           <div ref={messagesEndRef} />
@@ -121,9 +123,6 @@ export function Chat({
                 onAnswerQuestions?.(answeringMessageId!, answers);
                 setAnsweringMessageId(null);
               }}
-              submitLabel={labels?.submitLabel}
-              completedLabel={labels?.completedLabel}
-              customPlaceholder={labels?.customPlaceholder}
             />
           ) : (
             <ChatInput
@@ -131,8 +130,9 @@ export function Chat({
               models={models}
               defaultModel={defaultModel}
               toolbar={toolbar}
-              webSearchLabel={labels?.webSearchLabel}
-              placeholder={labels?.placeholder}
+              showModelSelector={showModelSelector}
+              showWebSearch={showWebSearch}
+              renderSendButton={renderSendButton}
               disabled={disabled}
             />
           )}