question-bank-framework 0.0.0-stage → 0.1.0

package/framework/components/quiz-list.tsx

@@ -0,0 +1,118 @@
+// Framework-owned: eject with `qb reveal framework/components/quiz-list.tsx`.
+
+import { useEffect, useState } from 'react';
+import { Link } from '@tanstack/react-router';
+import { Trash2 } from 'lucide-react';
+import { useBank } from '../../core/config.tsx';
+import type { QuizSession } from '../../core/types.ts';
+import { isAnswerProvided, scoreAnswers } from '../../core/types.ts';
+import { Button } from './ui/button';
+import { deleteQuiz, listQuizzes } from '../lib/quiz-storage.ts';
+
+export function QuizList() {
+  const bank = useBank();
+  const [quizzes, setQuizzes] = useState<QuizSession[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [deleteError, setDeleteError] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    listQuizzes(bank.namespace).then((items) => {
+      if (active) setQuizzes(items);
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [bank.namespace]);
+
+  const removeQuiz = async (quiz: QuizSession) => {
+    setDeletingId(quiz.id);
+    setDeleteError(false);
+    try {
+      await deleteQuiz(bank.namespace, quiz.id);
+      setQuizzes((current) => current.filter((item) => item.id !== quiz.id));
+    } catch {
+      setDeleteError(true);
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  return (
+    <div className="grid gap-8">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 className="m-0 text-3xl font-bold tracking-tight text-gray-900">My quizzes</h1>
+          <p className="mt-2 text-base text-gray-600">Pick up where you left off. Your answers are saved as you go.</p>
+        </div>
+        <Button asChild>
+          <Link to="/">Build a quiz</Link>
+        </Button>
+      </div>
+
+      {loading ? (
+        <div className="py-16 text-center text-sm text-gray-600">Loading your quizzes...</div>
+      ) : quizzes.length > 0 ? (
+        <div>
+          {deleteError && (
+            <p role="alert" className="mb-3 text-sm text-red-700">
+              Could not delete that quiz. Please try again.
+            </p>
+          )}
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            {quizzes.map((quiz) => {
+              const questions = quiz.questionIds
+                .map((id) => bank.questionById.get(id))
+                .filter((question) => question !== undefined);
+              const answeredCount = questions.filter((question) =>
+                isAnswerProvided(question, quiz.answers[question.id]),
+              ).length;
+              const score = scoreAnswers(questions, quiz.answers);
+              return (
+                <div key={quiz.id} className="group relative">
+                  <Link
+                    to="/quiz/$quizId"
+                    params={{ quizId: quiz.id }}
+                    className="block rounded-xl border border-gray-200 bg-white p-5 transition-colors hover:border-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
+                  >
+                    <h2 className="m-0 pr-10 text-lg font-semibold text-gray-900">{quiz.title}</h2>
+                    <p className="mt-2 text-sm text-gray-700">
+                      {quiz.questionIds.length} {quiz.questionIds.length === 1 ? 'question' : 'questions'}
+                    </p>
+                    <p className="mt-1 text-sm text-gray-600">
+                      {answeredCount} of {quiz.questionIds.length} answered
+                      {score.gradeable > 0 && ` • ${score.correct}/${score.gradeable} correct`}
+                    </p>
+                  </Link>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon-xs"
+                    aria-label={`Delete ${quiz.title}`}
+                    title="Delete quiz"
+                    disabled={deletingId === quiz.id}
+                    onClick={() => removeQuiz(quiz)}
+                    className="absolute right-3 top-3 rounded-full border-red-200 bg-white text-red-600 opacity-0 shadow-sm transition-opacity hover:border-red-300 hover:bg-red-50 hover:text-red-700 focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
+                  >
+                    <Trash2 aria-hidden="true" />
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="mx-auto max-w-xl py-16 text-center">
+          <h2 className="m-0 text-xl font-semibold text-gray-900">No quizzes yet</h2>
+          <p className="mt-2 text-base text-gray-600">Choose questions from the bank and turn them into a quiz that remembers your progress.</p>
+          <Button asChild className="mt-6">
+            <Link to="/">Browse questions</Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/framework/components/quiz-page.tsx

@@ -0,0 +1,454 @@
+// Framework-owned: eject with `qb reveal framework/components/quiz-page.tsx`.
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Link, useParams } from '@tanstack/react-router';
+import { Check, Pencil, X } from 'lucide-react';
+import { useBank } from '../../core/config.tsx';
+import type { QuestionStatus, QuizAnswer, QuizSession } from '../../core/types.ts';
+import {
+  getCorrectIds,
+  isAnswerCorrect,
+  isAnswerProvided,
+  isChoiceQuestion,
+  questionKind,
+  questionKindLabels,
+  scoreAnswers,
+  toSelectedIds,
+} from '../../core/types.ts';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { MarkdownContent } from './markdown-content';
+import { setQuestionStatus } from '../lib/question-status-storage.ts';
+import { getQuiz, saveQuizLocally, saveQuizProgress } from '../lib/quiz-storage.ts';
+import { cn } from '../lib/utils.ts';
+
+const optionLetter = (index: number): string => String.fromCharCode(65 + index);
+
+export function QuizPage() {
+  const bank = useBank();
+  const { quizId } = useParams({ from: '/quiz/$quizId' });
+  const [session, setSession] = useState<QuizSession | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [shownAnswerId, setShownAnswerId] = useState<string | null>(null);
+  const [checked, setChecked] = useState<Record<string, boolean>>({});
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState('');
+  const titleInputRef = useRef<HTMLInputElement>(null);
+  const quizQuestions = useMemo(
+    () =>
+      session?.questionIds.map((id) => bank.questionById.get(id)).filter((question) => question !== undefined) ?? [],
+    [session, bank],
+  );
+  const activeIndex = Math.min(session?.currentQuestion ?? 0, Math.max(quizQuestions.length - 1, 0));
+  const activeQuestion = quizQuestions[activeIndex];
+
+  useEffect(() => {
+    let active = true;
+    setShownAnswerId(null);
+    setChecked({});
+    getQuiz(bank.namespace, quizId).then((quiz) => {
+      if (active) setSession(quiz);
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [quizId, bank.namespace]);
+
+  useEffect(() => {
+    if (!session) return;
+    saveQuizLocally(bank.namespace, session);
+    if (session.id.startsWith('local_')) return;
+    setSaving(true);
+    const timeout = window.setTimeout(() => {
+      saveQuizProgress(
+        bank.namespace,
+        session,
+        { title: session.title, answers: session.answers, currentQuestion: session.currentQuestion, completed: session.completed },
+      )
+        .then(() => setSaving(false))
+        .catch(() => setSaving(false));
+    }, 500);
+    return () => window.clearTimeout(timeout);
+  }, [session, bank.namespace]);
+
+  useEffect(() => {
+    if (editingTitle) {
+      titleInputRef.current?.focus();
+      titleInputRef.current?.select();
+    }
+  }, [editingTitle]);
+
+  const goToQuestion = (index: number) => {
+    setShownAnswerId(null);
+    setSession((current) => (current ? { ...current, currentQuestion: index, completed: false } : current));
+  };
+
+  const updateWrittenAnswer = (value: string) => {
+    if (!activeQuestion) return;
+    setSession((current) =>
+      current ? { ...current, completed: false, answers: { ...current.answers, [activeQuestion.id]: value } } : current,
+    );
+  };
+
+  const setChoiceAnswer = (questionId: string, value: string[]) => {
+    setChecked((current) => (current[questionId] ? { ...current, [questionId]: false } : current));
+    setSession((current) =>
+      current ? { ...current, completed: false, answers: { ...current.answers, [questionId]: value } } : current,
+    );
+  };
+
+  const toggleOption = (questionId: string, optionId: string, single: boolean) => {
+    if (!activeQuestion) return;
+    const current = toSelectedIds(activeQuestion, session?.answers[questionId]);
+    if (single) {
+      setChoiceAnswer(questionId, current[0] === optionId ? [] : [optionId]);
+    } else {
+      setChoiceAnswer(
+        questionId,
+        current.includes(optionId) ? current.filter((id) => id !== optionId) : [...current, optionId],
+      );
+    }
+  };
+
+  const checkAnswer = () => {
+    if (!activeQuestion) return;
+    setChecked((current) => ({ ...current, [activeQuestion.id]: true }));
+    if (bank.answers[activeQuestion.id]) setShownAnswerId(activeQuestion.id);
+  };
+
+  const updateQuestionStatus = (status: QuestionStatus) => {
+    if (!activeQuestion) return;
+    void setQuestionStatus(bank.namespace, activeQuestion.id, status);
+    setShownAnswerId(null);
+    setSession((current) =>
+      current
+        ? {
+            ...current,
+            currentQuestion: Math.min(activeIndex + 1, quizQuestions.length - 1),
+            completed: activeIndex === quizQuestions.length - 1,
+          }
+        : current,
+    );
+  };
+
+  const startEditingTitle = () => {
+    if (!session) return;
+    setTitleDraft(session.title);
+    setEditingTitle(true);
+  };
+
+  const saveTitle = () => {
+    const title = titleDraft.trim();
+    if (!title) return;
+    setSession((current) => (current ? { ...current, title } : current));
+    setEditingTitle(false);
+  };
+
+  if (loading) return <div className="py-16 text-center text-sm text-gray-600">Opening your quiz...</div>;
+
+  if (!session || !activeQuestion || quizQuestions.length === 0) {
+    return (
+      <div className="mx-auto max-w-xl py-16 text-center">
+        <h1 className="text-2xl font-bold text-gray-900">Quiz not found</h1>
+        <p className="mt-2 text-base text-gray-600">This practice set may have been removed from this browser.</p>
+        <Button asChild className="mt-6">
+          <Link to="/quizzes">Back to My quizzes</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const answer: QuizAnswer | undefined = session.answers[activeQuestion.id];
+  const suggestedAnswer = bank.answers[activeQuestion.id];
+  const isSuggestedAnswerShown = shownAnswerId === activeQuestion.id;
+  const choice = isChoiceQuestion(activeQuestion);
+  const kind = questionKind(activeQuestion);
+  const selectedIds = toSelectedIds(activeQuestion, answer);
+  const hasSelection = isAnswerProvided(activeQuestion, answer);
+  const isChecked = checked[activeQuestion.id] === true;
+  const correctness = isChecked ? isAnswerCorrect(activeQuestion, answer) : null;
+  const correctIds = getCorrectIds(activeQuestion);
+  const score = scoreAnswers(quizQuestions, session.answers);
+
+  return (
+    <div className="mx-auto grid max-w-3xl gap-6">
+      <Link to="/quizzes" className="text-sm font-semibold text-gray-600 hover:text-gray-900">
+        Back to My quizzes
+      </Link>
+
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        {editingTitle ? (
+          <form
+            className="flex min-w-0 flex-1 items-center gap-2"
+            onSubmit={(event) => {
+              event.preventDefault();
+              saveTitle();
+            }}
+          >
+            <Input
+              ref={titleInputRef}
+              aria-label="Quiz title"
+              value={titleDraft}
+              onChange={(event) => setTitleDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') setEditingTitle(false);
+              }}
+              className="h-auto min-w-0 border-gray-300 px-2 py-1 text-2xl font-bold tracking-tight md:text-3xl"
+            />
+            <Button type="submit" size="icon-sm" aria-label="Save title" title="Save title" disabled={!titleDraft.trim()}>
+              <Check aria-hidden="true" />
+            </Button>
+            <Button type="button" variant="ghost" size="icon-sm" aria-label="Cancel title edit" title="Cancel" onClick={() => setEditingTitle(false)}>
+              <X aria-hidden="true" />
+            </Button>
+          </form>
+        ) : (
+          <div className="flex min-w-0 items-center gap-2">
+            <h1 className="m-0 text-3xl font-bold tracking-tight text-gray-900">{session.title}</h1>
+            <Button type="button" variant="ghost" size="icon-xs" aria-label="Edit quiz title" title="Edit quiz title" onClick={startEditingTitle}>
+              <Pencil aria-hidden="true" />
+            </Button>
+          </div>
+        )}
+        <span className="text-sm text-gray-600">{saving ? 'Saving...' : 'Saved'}</span>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <p className="m-0 text-base font-semibold text-gray-900">
+          Question {activeIndex + 1} of {quizQuestions.length}
+        </p>
+        {score.gradeable > 0 && (
+          <Badge variant="secondary" aria-label={`Quiz score: ${score.correct} of ${score.gradeable} correct`}>
+            {score.correct}/{score.gradeable} correct
+          </Badge>
+        )}
+        {session.completed && (
+          <Badge variant="outline" className="border-green-300 bg-green-50 text-green-800">
+            Quiz complete
+          </Badge>
+        )}
+      </div>
+
+      {session.completed && score.gradeable > 0 && (
+        <section aria-label="Quiz results" className="rounded-xl border border-gray-200 bg-gray-50 p-5">
+          <h2 className="m-0 text-lg font-semibold text-gray-900">
+            You scored {score.correct} of {score.gradeable}
+          </h2>
+          <ol className="mt-3 grid gap-1.5">
+            {quizQuestions.map((question, index) => {
+              const result = isAnswerCorrect(question, session.answers[question.id]);
+              return (
+                <li key={question.id}>
+                  <button
+                    type="button"
+                    onClick={() => goToQuestion(index)}
+                    className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-gray-100"
+                    aria-label={`Review question ${index + 1}: ${question.title} — ${result === null ? 'written' : result ? 'correct' : 'incorrect'}`}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        'flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold',
+                        result === true && 'bg-green-600 text-white',
+                        result === false && 'bg-red-600 text-white',
+                        result === null && 'bg-gray-200 text-gray-700',
+                      )}
+                    >
+                      {result === true ? <Check className="size-3" /> : result === false ? <X className="size-3" /> : index + 1}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate text-gray-900">{question.title}</span>
+                    <span className="shrink-0 text-xs text-gray-500">
+                      {result === null ? 'Written' : result ? 'Correct' : 'Incorrect'}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+        </section>
+      )}
+
+      <section className="rounded-xl border border-gray-200 bg-white p-5">
+        <div className="flex flex-wrap items-center gap-2">
+          <h2 className="m-0 flex-1 text-xl font-semibold text-gray-900">{activeQuestion.title}</h2>
+          <Badge variant="outline">{questionKindLabels[kind]}</Badge>
+        </div>
+        <p className="mt-1 font-mono text-xs text-gray-500">{activeQuestion.id}</p>
+        {activeQuestion.tags.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            {activeQuestion.tags.map((tag) => (
+              <Badge key={tag} variant="secondary">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+        <MarkdownContent content={activeQuestion.prompt} className="mt-4 text-base leading-relaxed text-gray-800" />
+
+        {choice ? (
+          <div className="mt-6">
+            <p id="quiz-choices-label" className="text-sm font-semibold text-gray-900">
+              {kind === 'single' ? 'Choose one answer' : 'Choose all that apply'}
+            </p>
+            <div role={kind === 'single' ? 'radiogroup' : 'group'} aria-labelledby="quiz-choices-label" className="mt-2 grid gap-2">
+              {(activeQuestion.options ?? []).map((option, index) => {
+                const selected = selectedIds.includes(option.id);
+                const isCorrectOption = correctIds.includes(option.id);
+                const showCorrectness = isChecked;
+                return (
+                  <label
+                    key={option.id}
+                    className={cn(
+                      'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
+                      !showCorrectness && selected && 'border-gray-900 bg-gray-50',
+                      !showCorrectness && !selected && 'border-gray-300 bg-white hover:border-gray-500',
+                      showCorrectness && isCorrectOption && 'border-green-600 bg-green-50',
+                      showCorrectness && !isCorrectOption && selected && 'border-red-600 bg-red-50',
+                      showCorrectness && !isCorrectOption && !selected && 'border-gray-200 bg-white opacity-70',
+                    )}
+                  >
+                    <input
+                      type={kind === 'single' ? 'radio' : 'checkbox'}
+                      name={`quiz-choice-${activeQuestion.id}`}
+                      checked={selected}
+                      onChange={() => toggleOption(activeQuestion.id, option.id, kind === 'single')}
+                      className="mt-1 size-4 shrink-0 accent-gray-900"
+                      aria-label={`Option ${optionLetter(index)}`}
+                    />
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold',
+                        showCorrectness && isCorrectOption
+                          ? 'border-green-600 bg-green-600 text-white'
+                          : showCorrectness && selected
+                            ? 'border-red-600 bg-red-600 text-white'
+                            : selected
+                              ? 'border-gray-900 bg-gray-900 text-white'
+                              : 'border-gray-300 bg-white text-gray-600',
+                      )}
+                    >
+                      {optionLetter(index)}
+                    </span>
+                    <MarkdownContent content={option.text} className="min-w-0 flex-1 text-base leading-7" />
+                    {showCorrectness && isCorrectOption && (
+                      <Badge variant="outline" className="shrink-0 border-green-600 bg-white text-green-800">
+                        Correct
+                      </Badge>
+                    )}
+                    {showCorrectness && !isCorrectOption && selected && (
+                      <Badge variant="outline" className="shrink-0 border-red-600 bg-white text-red-800">
+                        Yours
+                      </Badge>
+                    )}
+                  </label>
+                );
+              })}
+            </div>
+
+            {isChecked && correctness !== null && (
+              <div
+                role="status"
+                className={cn(
+                  'mt-4 rounded-lg border p-4 text-sm font-medium',
+                  correctness ? 'border-green-300 bg-green-50 text-green-900' : 'border-red-300 bg-red-50 text-red-900',
+                )}
+              >
+                {correctness
+                  ? 'Correct — nice work.'
+                  : `Not quite. Correct answer${correctIds.length > 1 ? 's' : ''}: ${correctIds
+                      .map((id) => {
+                        const index = (activeQuestion.options ?? []).findIndex((o) => o.id === id);
+                        return index >= 0 ? optionLetter(index) : id;
+                      })
+                      .join(', ')}`}
+              </div>
+            )}
+
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Button onClick={checkAnswer} disabled={!hasSelection} variant={isChecked ? 'outline' : 'default'}>
+                {isChecked ? 'Checked' : 'Check answer'}
+              </Button>
+              {suggestedAnswer && (
+                <Button
+                  variant="outline"
+                  aria-expanded={isSuggestedAnswerShown}
+                  aria-controls="suggested-answer"
+                  onClick={() => setShownAnswerId(isSuggestedAnswerShown ? null : activeQuestion.id)}
+                >
+                  {isSuggestedAnswerShown ? 'Hide explanation' : 'Show explanation'}
+                </Button>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="mt-6">
+            <label htmlFor="quiz-answer" className="text-sm font-semibold text-gray-900">
+              Your answer
+            </label>
+            <textarea
+              id="quiz-answer"
+              value={typeof answer === 'string' ? answer : ''}
+              onChange={(event) => updateWrittenAnswer(event.target.value)}
+              placeholder="Write your working or notes here..."
+              className="mt-2 block min-h-40 w-full resize-y rounded-lg border border-gray-300 bg-white p-3 text-base leading-relaxed text-gray-900 outline-none placeholder:text-gray-400"
+            />
+          </div>
+        )}
+
+        {suggestedAnswer && (choice ? isSuggestedAnswerShown : true) && (
+          <div className="mt-5">
+            {!choice && (
+              <Button
+                variant="outline"
+                aria-expanded={isSuggestedAnswerShown}
+                aria-controls="suggested-answer"
+                onClick={() => setShownAnswerId(isSuggestedAnswerShown ? null : activeQuestion.id)}
+              >
+                {isSuggestedAnswerShown ? 'Hide answer' : 'Show answer'}
+              </Button>
+            )}
+            {isSuggestedAnswerShown && (
+              <section id="suggested-answer" className="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
+                <h3 className="m-0 text-base font-semibold text-gray-900">
+                  {choice ? 'Explanation' : 'Suggested answer'}
+                </h3>
+                <MarkdownContent content={suggestedAnswer} className="mt-3 text-sm leading-relaxed text-gray-800" />
+              </section>
+            )}
+          </div>
+        )}
+
+        <div className="mt-6 flex flex-wrap items-center justify-between gap-3">
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => goToQuestion(Math.max(activeIndex - 1, 0))} disabled={activeIndex === 0}>
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => goToQuestion(Math.min(activeIndex + 1, quizQuestions.length - 1))}
+              disabled={activeIndex === quizQuestions.length - 1}
+            >
+              Next
+            </Button>
+          </div>
+          <div className="ml-auto flex flex-wrap items-center justify-end gap-2">
+            <Button variant="outline" onClick={() => updateQuestionStatus('unanswered')} disabled={session.completed}>
+              Skip
+            </Button>
+            <Button onClick={() => updateQuestionStatus('revisit')} disabled={session.completed} className="bg-amber-400 text-gray-950 hover:bg-amber-500">
+              Revisit
+            </Button>
+            <Button onClick={() => updateQuestionStatus('complete')} disabled={session.completed}>
+              {session.completed ? 'Quiz complete' : 'Mark as complete'}
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/framework/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from '../../lib/utils.ts'
+import { Slot } from "radix-ui"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/framework/components/ui/button.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from '../../lib/utils.ts'
+import { Slot } from "radix-ui"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }