@arcote.tech/arc-ds 0.5.2 → 0.5.6

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

@@ -1,29 +1,40 @@
 import { Box } from "../box/box";
 import { Button } from "../button/button";
 import { TextareaField } from "../form";
-import { Send, Check } from "lucide-react";
-import { useState } from "react";
+import { ArrowLeft, ArrowRight, Check, MessageCircle, Pencil, Send } from "lucide-react";
+import { Fragment, useState } from "react";
 import type { Question, QuestionAnswers } from "./types";
+import { useChatLabels } from "./chat-labels";
 
 interface QuestionTabsProps {
   questions: Question[];
-  onSubmit: (answers: QuestionAnswers) => void;
-  /** Label for submit button */
-  submitLabel?: string;
-  /** Label for completed count, e.g. "completed" */
-  completedLabel?: string;
-  /** Placeholder for custom answer input */
-  customPlaceholder?: string;
+  /**
+   * Called when user finishes answering. `wantsToDiscuss` is true when the
+   * user clicked the secondary "Continue discussion" button — consumers
+   * should forward this to the LLM so it knows to switch from question
+   * mode to open-ended conversation.
+   */
+  onSubmit: (
+    answers: QuestionAnswers,
+    options: { wantsToDiscuss: boolean },
+  ) => void;
 }
 
-export function QuestionTabs({
-  questions,
-  onSubmit,
-  submitLabel = "Submit",
-  completedLabel = "completed",
-  customPlaceholder = "Custom answer...",
-}: QuestionTabsProps) {
-  const [activeTab, setActiveTab] = useState(0);
+type Step = { type: "question"; index: number } | { type: "summary" };
+
+export function QuestionTabs({ questions, onSubmit }: QuestionTabsProps) {
+  const {
+    submitLabel,
+    nextLabel,
+    backLabel,
+    summaryTitle,
+    editLabel,
+    noAnswerLabel,
+    questionOfLabel,
+    customPlaceholder,
+    discussLabel,
+  } = useChatLabels();
+  const [step, setStep] = useState<Step>({ type: "question", index: 0 });
   const [answers, setAnswers] = useState<QuestionAnswers>(
     () =>
       Object.fromEntries(
@@ -31,69 +42,147 @@ export function QuestionTabs({
       ),
   );
 
-  const current = questions[activeTab];
-  const currentAnswer = answers[current.id] ?? { selected: [], text: "" };
+  const isQuestionStep = step.type === "question";
+  const currentIndex = isQuestionStep ? step.index : -1;
+  const isLastQuestion = currentIndex === questions.length - 1;
 
-  const toggleOption = (option: string) => {
-    const selected = currentAnswer.selected.includes(option)
-      ? currentAnswer.selected.filter((o) => o !== option)
-      : [...currentAnswer.selected, option];
-    setAnswers((prev) => ({
-      ...prev,
-      [current.id]: { ...prev[current.id], selected },
-    }));
+  const goToQuestion = (index: number) =>
+    setStep({ type: "question", index });
+  const goToSummary = () => setStep({ type: "summary" });
+
+  const handleNext = () => {
+    if (!isQuestionStep) return;
+    if (isLastQuestion) {
+      goToSummary();
+    } else {
+      goToQuestion(currentIndex + 1);
+    }
   };
 
-  const setText = (text: string) => {
+  const handleBackFromSummary = () => {
+    goToQuestion(questions.length - 1);
+  };
+
+  const updateAnswer = (
+    questionId: string,
+    updater: (a: { selected: string[]; text: string }) => {
+      selected: string[];
+      text: string;
+    },
+  ) => {
     setAnswers((prev) => ({
       ...prev,
-      [current.id]: { ...prev[current.id], text },
+      [questionId]: updater(prev[questionId] ?? { selected: [], text: "" }),
     }));
   };
 
+  // ─── Summary step ──────────────────────────────────────────────
+  if (step.type === "summary") {
+    return (
+      <Box className="p-0 overflow-hidden">
+        <div className="border-b border-border px-4 py-3">
+          <p className="text-sm font-semibold">{summaryTitle}</p>
+        </div>
+
+        <ul className="divide-y divide-border">
+          {questions.map((q, i) => {
+            const answer = answers[q.id] ?? { selected: [], text: "" };
+            const parts = [
+              ...answer.selected,
+              ...(answer.text.trim() ? [answer.text.trim()] : []),
+            ];
+            const hasAnswer = parts.length > 0;
+            return (
+              <li
+                key={q.id}
+                className="group flex items-start gap-3 px-4 py-2.5"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    {q.label}
+                  </p>
+                  <p
+                    className={`text-sm mt-0.5 ${
+                      hasAnswer ? "" : "italic text-muted-foreground/60"
+                    }`}
+                  >
+                    {hasAnswer ? parts.join(", ") : noAnswerLabel}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  icon={Pencil}
+                  label={editLabel}
+                  onClick={() => goToQuestion(i)}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity"
+                />
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="flex items-center justify-between border-t border-border px-3 py-2 gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            icon={ArrowLeft}
+            label={backLabel}
+            onClick={handleBackFromSummary}
+          />
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              icon={MessageCircle}
+              label={discussLabel}
+              onClick={() => onSubmit(answers, { wantsToDiscuss: true })}
+            />
+            <Button
+              size="sm"
+              icon={Send}
+              label={submitLabel}
+              onClick={() => onSubmit(answers, { wantsToDiscuss: false })}
+            />
+          </div>
+        </div>
+      </Box>
+    );
+  }
+
+  // ─── Question step ─────────────────────────────────────────────
+  const current = questions[currentIndex];
+  const currentAnswer = answers[current.id] ?? { selected: [], text: "" };
   const hasCustomText = currentAnswer.text.trim().length > 0;
 
-  const totalAnswered = questions.filter(
-    (q) =>
-      (answers[q.id]?.selected.length ?? 0) > 0 ||
-      (answers[q.id]?.text ?? "").trim().length > 0,
-  ).length;
+  const toggleOption = (option: string) => {
+    updateAnswer(current.id, (a) => ({
+      ...a,
+      selected: a.selected.includes(option)
+        ? a.selected.filter((o) => o !== option)
+        : [...a.selected, option],
+    }));
+  };
+
+  const setText = (text: string) => {
+    updateAnswer(current.id, (a) => ({ ...a, text }));
+  };
 
   return (
     <Box className="p-0 overflow-hidden">
-      {/* Tabs */}
-      <div className="flex border-b border-border overflow-x-auto">
-        {questions.map((q, i) => {
-          const hasAnswer =
-            (answers[q.id]?.selected.length ?? 0) > 0 ||
-            (answers[q.id]?.text ?? "").trim().length > 0;
-          return (
-            <button
-              key={q.id}
-              type="button"
-              onClick={() => setActiveTab(i)}
-              className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors border-b-2 -mb-px ${
-                i === activeTab
-                  ? "border-primary text-primary"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              {hasAnswer && (
-                <span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
-              )}
-              {q.label}
-            </button>
-          );
-        })}
+      {/* Header */}
+      <div className="border-b border-border px-4 py-3 space-y-1">
+        <p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+          {questionOfLabel(currentIndex + 1, questions.length)}
+        </p>
+        <p className="text-sm font-semibold">{current.label}</p>
+        {current.description && (
+          <p className="text-xs text-muted-foreground">{current.description}</p>
+        )}
       </div>
 
-      {/* Content */}
+      {/* Options */}
       <div className="p-3 space-y-1.5">
-        <p className="text-xs text-muted-foreground mb-2">
-          {current.description}
-        </p>
-
-        {/* Options */}
         {current.options.map((option) => {
           const isSelected = currentAnswer.selected.includes(option);
           return (
@@ -123,7 +212,7 @@ export function QuestionTabs({
           );
         })}
 
-        {/* Custom option */}
+        {/* Custom answer */}
         <div
           className={`flex items-start gap-2.5 w-full rounded-lg px-3 py-2.5 transition-colors ${
             hasCustomText
@@ -153,17 +242,46 @@ export function QuestionTabs({
         </div>
       </div>
 
-      {/* Footer */}
-      <div className="flex items-center justify-between border-t border-border px-3 py-2">
-        <span className="text-[10px] text-muted-foreground">
-          {totalAnswered}/{questions.length} {completedLabel}
-        </span>
-        <Button
-          size="sm"
-          icon={Send}
-          label={submitLabel}
-          onClick={() => onSubmit(answers)}
-        />
+      {/* Footer — progress dots + discuss/next buttons */}
+      <div className="flex items-center justify-between border-t border-border px-3 py-2 gap-2">
+        <div className="flex items-center gap-1">
+          {questions.map((q, i) => {
+            const answered =
+              (answers[q.id]?.selected.length ?? 0) > 0 ||
+              (answers[q.id]?.text ?? "").trim().length > 0;
+            return (
+              <Fragment key={q.id}>
+                <button
+                  type="button"
+                  onClick={() => goToQuestion(i)}
+                  className={`h-1.5 rounded-full transition-all ${
+                    i === currentIndex
+                      ? "w-4 bg-primary"
+                      : answered
+                        ? "w-1.5 bg-primary/60"
+                        : "w-1.5 bg-muted-foreground/30"
+                  }`}
+                  aria-label={q.label}
+                />
+              </Fragment>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            icon={MessageCircle}
+            label={discussLabel}
+            onClick={() => onSubmit(answers, { wantsToDiscuss: true })}
+          />
+          <Button
+            size="sm"
+            icon={ArrowRight}
+            label={nextLabel}
+            onClick={handleNext}
+          />
+        </div>
       </div>
     </Box>
   );

package/src/ds/editable-text/editable-text.tsx

@@ -0,0 +1,107 @@
+import { useRef, useEffect, useCallback } from "react";
+import { cn } from "../../lib/utils";
+
+export interface EditableTextProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** When true, Enter inserts a newline. When false (default), Enter saves and blurs. */
+  multiline?: boolean;
+  className?: string;
+}
+
+/**
+ * A contenteditable div that looks like plain text — no border, no background.
+ * Emits `onChange` on blur or Enter (single-line mode).
+ *
+ * Placeholder is shown via CSS `:empty:before` using a data attribute.
+ */
+export function EditableText({
+  value,
+  onChange,
+  placeholder,
+  multiline = false,
+  className,
+}: EditableTextProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isEditingRef = useRef(false);
+  const lastValueRef = useRef(value);
+
+  // Sync external value → DOM only when not actively editing
+  useEffect(() => {
+    if (isEditingRef.current) return;
+    if (!ref.current) return;
+    const currentText = ref.current.innerText;
+    if (currentText !== value) {
+      ref.current.innerText = value;
+    }
+    lastValueRef.current = value;
+  }, [value]);
+
+  const save = useCallback(() => {
+    if (!ref.current) return;
+    const text = ref.current.innerText.trim();
+    isEditingRef.current = false;
+    if (text !== lastValueRef.current) {
+      lastValueRef.current = text;
+      onChange(text);
+    }
+  }, [onChange]);
+
+  const handleBlur = useCallback(() => {
+    save();
+  }, [save]);
+
+  const handleFocus = useCallback(() => {
+    isEditingRef.current = true;
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        // Revert to last saved value
+        if (ref.current) {
+          ref.current.innerText = lastValueRef.current;
+        }
+        isEditingRef.current = false;
+        ref.current?.blur();
+        return;
+      }
+      if (e.key === "Enter" && !multiline) {
+        e.preventDefault();
+        save();
+        ref.current?.blur();
+      }
+    },
+    [multiline, save],
+  );
+
+  // Prevent pasting rich text — strip to plain text
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      document.execCommand("insertText", false, text);
+    },
+    [],
+  );
+
+  return (
+    <div
+      ref={ref}
+      contentEditable
+      suppressContentEditableWarning
+      data-placeholder={placeholder}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+      className={cn(
+        "min-h-[1.5em] cursor-text outline-none",
+        "empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none",
+        className,
+      )}
+    />
+  );
+}

package/src/ds/form/fields/search-select-field.tsx

@@ -1,15 +1,23 @@
 import { useContext } from "react";
 import type { ReactNode } from "react";
 import { SearchSelect } from "../../search-select/search-select";
-import type { SearchSelectProps } from "../../search-select/search-select";
+import type { SearchSelectOption } from "../../search-select/search-select";
 import { FormFieldContext } from "../field";
 
-export type SearchSelectFieldProps = Omit<SearchSelectProps, "value" | "onChange"> & {
+export interface SearchSelectFieldProps {
+  options: SearchSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  position?: "relative" | "absolute";
+  direction?: "down" | "up";
+  size?: "default" | "sm";
+  renderOption?: (option: SearchSelectOption, isActive: boolean, isSelected: boolean) => ReactNode;
+  allowClear?: boolean;
   label?: ReactNode;
   value?: string;
   onChange?: (value: string) => void;
   className?: string;
-};
+}
 
 export function SearchSelectField({
   label,
@@ -29,9 +37,9 @@ export function SearchSelectField({
         </label>
       )}
       <SearchSelect
-        value={value}
-        onChange={(val) => onChange?.(val)}
         {...rest}
+        value={value}
+        onChange={(val: string) => onChange?.(val)}
       />
       {hasError && (
         <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>