@arcote.tech/arc-ds 0.7.7 → 0.7.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "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.7",
+    "@arcote.tech/arc": "^0.7.9",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

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

@@ -7,6 +7,18 @@ import { useState, type ReactNode } from "react";
 import type { ChatModel, SendMessageOptions } from "./types";
 import { useChatLabels } from "./chat-labels";
 
+/**
+ * Slot props dla custom textarea — używane przez `renderTextarea` żeby
+ * wymienić default TextareaField na np. VoiceTextarea z `@arcote.tech/arc-ai-voice`.
+ * Wszystkie pola są wymagane (provider musi je podpiąć), poza placeholder/rows.
+ */
+export interface ChatInputTextareaSlotProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  rows?: number;
+}
+
 interface ChatInputProps {
   onSend: (message: string, options: SendMessageOptions) => void;
   models: ChatModel[];
@@ -25,6 +37,12 @@ interface ChatInputProps {
     onClick: () => void;
     disabled: boolean;
   }) => ReactNode;
+  /**
+   * Slot na pole tekstowe — default to `<TextareaField>`. Konsumer może
+   * podpiąć `VoiceTextarea` z `@arcote.tech/arc-ai-voice` aby włączyć
+   * dyktowanie głosowe bez sprzęgania DS z fragmentem AI.
+   */
+  renderTextarea?: (props: ChatInputTextareaSlotProps) => ReactNode;
   /** Disable input (e.g., during generation) */
   disabled?: boolean;
 }
@@ -37,6 +55,7 @@ export function ChatInput({
   showModelSelector = true,
   showWebSearch = true,
   renderSendButton,
+  renderTextarea,
   disabled = false,
 }: ChatInputProps) {
   const labels = useChatLabels();
@@ -61,12 +80,23 @@ export function ChatInput({
       {/* Input + send */}
       <div className="flex items-center gap-2">
         <div className="flex-1">
-          <TextareaField
-            value={message}
-            onChange={(val) => setMessage(val ?? "")}
-            placeholder={disabled ? labels.placeholderGenerating : labels.placeholder}
-            rows={1}
-          />
+          {renderTextarea ? (
+            renderTextarea({
+              value: message,
+              onChange: setMessage,
+              placeholder: disabled
+                ? labels.placeholderGenerating
+                : labels.placeholder,
+              rows: 1,
+            })
+          ) : (
+            <TextareaField
+              value={message}
+              onChange={(val) => setMessage(val ?? "")}
+              placeholder={disabled ? labels.placeholderGenerating : labels.placeholder}
+              rows={1}
+            />
+          )}
         </div>
         {renderSendButton ? (
           renderSendButton({ onClick: handleSend, disabled: sendDisabled })

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

@@ -1,39 +1,45 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
 
 export interface ChatLabels {
-  // ChatInput
+  // HTML attribute strings (placeholder na <input>/<textarea>) muszą zostać
+  // `string` — DOM attribute API nie przyjmuje ReactNode.
   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;
+  // Wszystkie poniższe są renderowane w drzewie React (Button label, span,
+  // h2 itp.) — `ReactNode` pozwala używać `<Trans>...</Trans>` żeby labels
+  // reagowały na zmianę locale runtime'owo.
+  webSearchLabel: ReactNode;
+  // QuestionTabs (wizard)
+  submitLabel: ReactNode;
+  nextLabel: ReactNode;
+  backLabel: ReactNode;
+  summaryTitle: ReactNode;
+  editLabel: ReactNode;
+  noAnswerLabel: ReactNode;
+  questionOfLabel: (current: number, total: number) => ReactNode;
   /** Secondary button in QuestionTabs — "Continue discussion" instead of answering */
-  discussLabel: string;
+  discussLabel: ReactNode;
   // ChatMessage
-  questionsLabel: string;
-  answerLabel: string;
-  // Tool execution log (rendered by chat-component)
+  questionsLabel: ReactNode;
+  answerLabel: ReactNode;
+  // Tool execution log + error fallback — używane też w template literals
+  // (`${chatLabels.errorLabel}: ...`) i jako `content` ChatMessage. Stąd
+  // string, nie ReactNode.
   toolCallingLabel: string;
   toolDoneLabel: string;
   errorLabel: string;
   // askQuestions tool view
-  answerBelowLabel: string;
+  answerBelowLabel: ReactNode;
   // completeStage tool view
-  stageCompleteLabel: string;
-  advanceStageLabel: string;
-  continueStageLabel: string;
-  stageAdvancedLabel: string;
-  stageContinuedLabel: string;
+  stageCompleteLabel: ReactNode;
+  advanceStageLabel: ReactNode;
+  continueStageLabel: ReactNode;
+  stageAdvancedLabel: ReactNode;
+  stageContinuedLabel: ReactNode;
   /** Label for the "Przejdź do następnego" button on the final stage. */
-  finishConsultationLabel: string;
+  finishConsultationLabel: ReactNode;
 }
 
 export const defaultChatLabels: ChatLabels = {

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

@@ -48,14 +48,13 @@ export function ChatMessage({
               : "bg-card border border-border rounded-tl-sm"
           }`}
         >
-          <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">
+          <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]}>
               {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" />
-          )}
         </div>
 
         {/* Tool uses */}

package/src/ds/chat/chat.tsx

@@ -6,7 +6,7 @@ import type {
   SendMessageOptions,
 } from "./types";
 import { ChatMessage } from "./chat-message";
-import { ChatInput } from "./chat-input";
+import { ChatInput, type ChatInputTextareaSlotProps } from "./chat-input";
 import { useChatInput } from "./chat-input-provider";
 import { QuestionTabs } from "./question-tabs";
 
@@ -44,6 +44,11 @@ export interface ChatProps {
     onClick: () => void;
     disabled: boolean;
   }) => ReactNode;
+  /**
+   * Slot na pole tekstowe w ChatInput — przekazywane do `<ChatInput>`.
+   * Konsumer może podać `VoiceTextarea` z `@arcote.tech/arc-ai-voice`.
+   */
+  renderTextarea?: (props: ChatInputTextareaSlotProps) => ReactNode;
   /** Max width class for the message area */
   maxWidth?: string;
   /** Disable input (during generation) */
@@ -63,6 +68,7 @@ export function Chat({
   showModelSelector = true,
   showWebSearch = true,
   renderSendButton,
+  renderTextarea,
   maxWidth = "max-w-3xl",
   disabled = false,
 }: ChatProps) {
@@ -133,6 +139,7 @@ export function Chat({
               showModelSelector={showModelSelector}
               showWebSearch={showWebSearch}
               renderSendButton={renderSendButton}
+              renderTextarea={renderTextarea}
               disabled={disabled}
             />
           )}

package/src/ds/form/fields/textarea-field.tsx

@@ -10,10 +10,17 @@ export interface TextareaFieldProps {
   onChange?: (value: string) => void;
   rows?: number;
   maxHeight?: number;
+  /** Klasa na OUTER divie (label + pole). */
   className?: string;
+  /**
+   * Klasa dorzucona do INNER contentEditable. Używaj gdy chcesz nadpisać
+   * padding (np. zostawić miejsce na absolute-positioned ikonę po prawej)
+   * albo dodatkowe modyfikatory typografii.
+   */
+  inputClassName?: string;
 }
 
-export function TextareaField({ label, placeholder, value, onChange, rows = 1, maxHeight, className }: TextareaFieldProps) {
+export function TextareaField({ label, placeholder, value, onChange, rows = 1, maxHeight, className, inputClassName }: TextareaFieldProps) {
   const fieldCtx = useContext(FormFieldContext);
   const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
   const ref = useRef<HTMLDivElement>(null);
@@ -66,6 +73,7 @@ export function TextareaField({ label, placeholder, value, onChange, rows = 1, m
           "whitespace-pre-wrap break-words",
           maxHeight && "overflow-y-auto",
           "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none",
+          inputClassName,
         )}
         style={{
           minHeight,

package/src/ds/suggestion-list/suggestion-list.tsx

@@ -28,6 +28,13 @@ export interface SuggestionListProps<T> {
   placeholder?: string;
   max?: number;
   initialCloud?: InitialCloudConfig;
+  /**
+   * Po dodaniu itemu (z sugestii, custom lub cloudu) ustaw focus na pierwszy
+   * fokusowalny input/textarea/contenteditable wewnątrz nowo wyrenderowanego
+   * elementu i zamknij dropdown wyszukiwania. Przydatne gdy `renderItem`
+   * zawiera pole tekstowe (np. URL kanału) i user ma od razu wpisywać dane.
+   */
+  focusItemOnAdd?: boolean;
 }
 
 const defaultGetKey = <T,>(item: T) => String(item);
@@ -49,12 +56,16 @@ export function SuggestionList<T>({
   placeholder = "Wyszukaj...",
   max,
   initialCloud,
+  focusItemOnAdd = false,
 }: SuggestionListProps<T>) {
   const [inputValue, setInputValue] = useState("");
   const [isEditing, setIsEditing] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   // Once user interacts (adds/removes or clicks "more"), we leave cloud mode permanently
   const [cloudDismissed, setCloudDismissed] = useState(false);
+  // Index świeżo dodanego itemu — wyzwala useEffect który ustawia focus na
+  // pierwszy input w jego wrapperze (tylko gdy focusItemOnAdd === true).
+  const [pendingFocusIndex, setPendingFocusIndex] = useState<number | null>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -112,16 +123,42 @@ export function SuggestionList<T>({
     }
   }, [activeIndex, isEditing]);
 
+  // Auto-focus pierwszego inputa w nowo dodanym itemie. Effect odpala się po
+  // commit (DOM gotowy) — szukamy wrappera po data-suggestion-item-index i
+  // pierwszego focusable child. requestAnimationFrame daje pewność że motion
+  // ukończył mount (item rozwija się z height 0).
+  useEffect(() => {
+    if (pendingFocusIndex === null) return;
+    if (!containerRef.current) return;
+    const target = pendingFocusIndex;
+    setPendingFocusIndex(null);
+    requestAnimationFrame(() => {
+      const wrapper = containerRef.current?.querySelector<HTMLElement>(
+        `[data-suggestion-item-index="${target}"]`,
+      );
+      const input = wrapper?.querySelector<HTMLElement>(
+        "input, textarea, [contenteditable='true']",
+      );
+      input?.focus();
+    });
+  }, [pendingFocusIndex, safeItems.length]);
+
   const addItem = useCallback(
     (item: T) => {
       if (max && safeItems.length >= max) return;
+      const newIndex = safeItems.length;
       onChange([...safeItems, item]);
       setInputValue("");
       setActiveIndex(0);
       setCloudDismissed(true);
-      requestAnimationFrame(() => inputRef.current?.focus());
+      if (focusItemOnAdd) {
+        setIsEditing(false);
+        setPendingFocusIndex(newIndex);
+      } else {
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }
     },
-    [safeItems, onChange, max],
+    [safeItems, onChange, max, focusItemOnAdd],
   );
 
   const removeItemByIndex = useCallback(
@@ -213,14 +250,20 @@ export function SuggestionList<T>({
   const addFromCloud = useCallback(
     (item: T) => {
       if (max && safeItems.length >= max) return;
+      const newIndex = safeItems.length;
       onChange([...safeItems, item]);
       setInputValue("");
       setActiveIndex(0);
       setCloudDismissed(true);
-      setIsEditing(true);
-      requestAnimationFrame(() => inputRef.current?.focus());
+      if (focusItemOnAdd) {
+        setIsEditing(false);
+        setPendingFocusIndex(newIndex);
+      } else {
+        setIsEditing(true);
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }
     },
-    [safeItems, onChange, max],
+    [safeItems, onChange, max, focusItemOnAdd],
   );
 
   // ── Cloud view ──────────────────────────────────────────────
@@ -301,6 +344,7 @@ export function SuggestionList<T>({
         {safeItems.map((item, index) => (
           <motion.div
             key={`${getKey(item)}-${index}`}
+            data-suggestion-item-index={index}
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}

package/src/index.ts

@@ -110,6 +110,7 @@ export { Chat } from "./ds/chat/chat";
 export type { ChatProps } from "./ds/chat/chat";
 export { ChatMessage } from "./ds/chat/chat-message";
 export { ChatInput } from "./ds/chat/chat-input";
+export type { ChatInputTextareaSlotProps } from "./ds/chat/chat-input";
 export { QuestionTabs } from "./ds/chat/question-tabs";
 export { ToolUseBlock } from "./ds/chat/tool-use-block";
 export { ChatToolLog } from "./ds/chat/chat-tool-log";

package/src/layout/layout.tsx

@@ -48,11 +48,11 @@ export function Layout({ children }: { children?: ReactNode }) {
 function SubNavSlot() {
   const content = useDynamicSlotContent("sub-nav");
   if (content.length === 0) return null;
-  // `relative z-30` creates an explicit stacking context at Z.BASE so any
-  // popovers inside the sub-nav (SearchSelect absolute dropdown, etc.) paint
-  // above the main content area that follows it in document flow.
+  // `relative z-20` creates an explicit stacking context below the toolbar
+  // (Z.BASE = 30) so the sub-nav doesn't paint over the fixed toolbar, but
+  // still sits above the main content area that follows in document flow.
   return (
-    <div className="relative z-30 flex justify-center py-2">
+    <div className="relative z-20 flex justify-center py-2">
       <Box layoutId="sub-nav" className="flex items-center gap-1 px-3 py-2">
         {content}
       </Box>
@@ -167,33 +167,36 @@ function DesktopToolbar() {
   return (
     <>
       <div
-        data-arc-toolbar="left"
         className="fixed left-4 top-4"
         style={{ zIndex: zIndex("workspace") }}
       >
         <Box layout={false} className="flex flex-col px-3 py-2">
-          {renderSlot("toolbar-left", { className: "flex items-center gap-2" })}
+          <div data-arc-toolbar="left">
+            {renderSlot("toolbar-left", { className: "flex items-center gap-2" })}
+          </div>
           <ExpandedSection targetId="workspace" />
         </Box>
       </div>
 
       <div
-        data-arc-toolbar="center"
         className="fixed left-1/2 top-4 max-w-[calc(100vw-26rem)] -translate-x-1/2"
         style={{ zIndex: zIndex("center") }}
       >
         <Box layout={false} className="flex min-w-0 items-center px-3 py-2">
-          {renderSlot("toolbar-center", { className: "flex min-w-0 flex-1 items-center gap-1" })}
+          <div data-arc-toolbar="center" className="flex min-w-0 flex-1">
+            {renderSlot("toolbar-center", { className: "flex min-w-0 flex-1 items-center gap-1" })}
+          </div>
         </Box>
       </div>
 
       <div
-        data-arc-toolbar="right"
         className="fixed right-4 top-4"
         style={{ zIndex: zIndex("settings") }}
       >
         <Box layout={false} className="flex flex-col px-3 py-2">
-          {renderSlot("toolbar-right", { className: "flex items-center gap-2" })}
+          <div data-arc-toolbar="right">
+            {renderSlot("toolbar-right", { className: "flex items-center gap-2" })}
+          </div>
           <ExpandedSection targetId="settings" />
         </Box>
       </div>