@c2-markdown-ui/svelte 0.0.0-stage → 0.4.2

package/src/lib/widgets/MultipleChoiceQuestion.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { parseChoices } from './remoteChoices';
+  interface Props {
+    question: string;
+    choices: string[];
+    correctAnswer?: string;
+    showFeedback?: boolean;
+    /** 是否禁用：禁用后选项不可点击 */
+    disabled?: boolean;
+    onchange: (value: { answer: string; isCorrect?: boolean }) => void;
+  }
+  let { question, choices, correctAnswer = undefined, showFeedback = false, disabled = false, onchange }: Props = $props();
+  let selectedAnswer = $state('');
+  let hasAnswered = $state(false);
+
+  // choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
+  const items = $derived(parseChoices(choices));
+
+  function onSelect(answer: string) {
+    if (disabled) return;
+    selectedAnswer = answer;
+    hasAnswered = true;
+    const isCorrect = correctAnswer ? answer === correctAnswer : undefined;
+    onchange({ answer, isCorrect });
+  }
+
+  function choiceClass(value: string) {
+    let cls = 'mcq-choice';
+    if (hasAnswered && showFeedback && correctAnswer) {
+      if (value === correctAnswer) cls += ' mcq-choice-correct';
+      else if (value === selectedAnswer && value !== correctAnswer) cls += ' mcq-choice-incorrect';
+    } else if (value === selectedAnswer) {
+      cls += ' mcq-choice-selected';
+    }
+    return cls;
+  }
+
+  // 反馈文案：correctAnswer 是 key，展示时映射回 label
+  const correctLabel = $derived(
+    correctAnswer ? (items.find(i => i.value === correctAnswer)?.label ?? correctAnswer) : ''
+  );
+</script>
+
+<div class="widget-mcq">
+  <div class="mcq-question">{question}</div>
+  <div class="mcq-choices">
+    {#each items as item, idx}
+      <button
+        class={choiceClass(item.value)}
+        onclick={() => onSelect(item.value)}
+        disabled={disabled || (hasAnswered && showFeedback)}
+      >{item.label}</button>
+    {/each}
+  </div>
+  {#if hasAnswered && showFeedback && selectedAnswer}
+    <div class={`mcq-feedback ${selectedAnswer === correctAnswer ? 'correct' : 'incorrect'}`}>
+      {#if correctAnswer}
+        {selectedAnswer === correctAnswer ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctLabel}`}
+      {:else}
+        You selected: {selectedAnswer}
+      {/if}
+    </div>
+  {/if}
+
+</div>

package/src/lib/widgets/NumberInput.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  interface Props {
+    label?: string;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 步长（点击上下按钮/方向键的增减量），默认 1 */
+    step?: number;
+    /** 数值精度（小数位数） */
+    precision?: number;
+    default?: number;
+    placeholder?: string;
+    hint?: string;
+    /** 是否必填：空值提交校验不通过 */
+    required?: boolean;
+    /** 校验失败提示文案 */
+    message?: string;
+    /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+    error?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: number | null) => void;
+  }
+  let {
+    label = '',
+    min,
+    max,
+    step = 1,
+    precision,
+    default: initial,
+    placeholder = '',
+    hint = '',
+    required = false,
+    message = '',
+    error = '',
+    disabled = false,
+    onchange
+  }: Props = $props();
+
+  // 输入框显示的原始文本：允许输入中途的临时态（如 "-" / "1."），失焦/回车时规范化
+  let text = $state(initial !== undefined && initial !== null ? format(initial) : '');
+  let localError = $state('');
+
+  /** 显示格式化：设置精度时固定位数小数（如 18 → "18.00"，antd 行为） */
+  function format(v: number): string {
+    if (precision !== undefined && precision >= 0) return v.toFixed(precision);
+    return String(v);
+  }
+
+  /** 文本 → 数字：空串或输入中途态返回 null，非法文本返回 null */
+  function parse(v: string): number | null {
+    const s = v.trim();
+    if (!s || s === '-' || s === '.' || s === '-.' || s === '+' || s === '+.') return null;
+    const n = Number(s);
+    return isNaN(n) ? null : n;
+  }
+
+  /** 应用精度四舍五入 + min/max 钳制 */
+  function normalize(n: number): number {
+    if (precision !== undefined && precision >= 0) n = Number(n.toFixed(precision));
+    if (min !== undefined && n < min) n = min;
+    if (max !== undefined && n > max) n = max;
+    return n;
+  }
+
+  /** 校验当前值：返回错误文案或空串 */
+  function validate(v: number | null): string {
+    if (required && v === null) return message || (label ? `请填写${label}` : '该项为必填项');
+    return '';
+  }
+
+  /** 提交：规范化显示文本并对外发值（空/非法 → null） */
+  function commit() {
+    const n = parse(text);
+    if (n === null) {
+      text = '';
+      localError = validate(null);
+      onchange(null);
+      return;
+    }
+    const v = normalize(n);
+    text = format(v);
+    localError = '';
+    onchange(v);
+  }
+
+  /** 步进：direction 为 1（加）/ -1（减）；空值从 0（或 min/max）起步 */
+  function stepBy(direction: 1 | -1) {
+    const base = parse(text);
+    const start = base ?? 0;
+    const v = normalize(start + step * direction);
+    text = format(v);
+    localError = '';
+    onchange(v);
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      stepBy(1);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      stepBy(-1);
+    } else if (e.key === 'Enter') {
+      commit();
+    }
+  }
+
+  const current = $derived(parse(text));
+  const atMax = $derived(max !== undefined && current !== null && current >= max);
+  const atMin = $derived(min !== undefined && current !== null && current <= min);
+  const shownError = $derived(error || localError);
+</script>
+
+<div class="widget-number-input" class:widget-field-error={!!shownError}>
+  {#if label || hint || required}
+    <div class="widget-label-row">
+      {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+      {#if label}<label>{label}</label>{/if}
+      {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+    </div>
+  {/if}
+  <div class="widget-field-content">
+    <div class="ni-wrap">
+      <input
+        type="text"
+        inputmode="decimal"
+        autocomplete="off"
+        class:widget-input-error={!!shownError}
+        bind:value={text}
+        {placeholder}
+        {disabled}
+        onkeydown={onKeydown}
+        onfocusout={commit}
+        oninput={() => { if (localError) localError = validate(parse(text)); }}
+      />
+      <span class="ni-steps" aria-hidden="true">
+        <button type="button" class="ni-step-up" onclick={() => stepBy(1)} disabled={disabled || atMax} aria-label="增加" tabindex={-1}>
+          <svg viewBox="0 0 10 6" width="10" height="6"><path d="M5 0 L10 6 H0 Z" fill="currentColor" /></svg>
+        </button>
+        <button type="button" class="ni-step-down" onclick={() => stepBy(-1)} disabled={disabled || atMin} aria-label="减少" tabindex={-1}>
+          <svg viewBox="0 0 10 6" width="10" height="6"><path d="M5 6 L0 0 H10 Z" fill="currentColor" /></svg>
+        </button>
+      </span>
+    </div>
+    {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+  </div>
+</div>

package/src/lib/widgets/Quiz.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+  import { parseChoices, type RemoteChoice } from './remoteChoices';
+  interface QuizQuestion {
+    id: string;
+    type: 'mcq' | 'short-answer';
+    question: string;
+    points: number;
+    choices?: string[];
+    correctAnswer?: string;
+    placeholder?: string;
+    correctAnswers?: string[];
+    _streaming?: boolean; // Indicates question is still being streamed
+  }
+
+  interface QuizAnswer {
+    answer: string;
+    isCorrect: boolean;
+    points: number;
+    submitted: boolean;
+  }
+
+  interface QuizState {
+    answers: Record<string, QuizAnswer>;
+    totalScore: number;
+    maxScore: number;
+    questionsAnswered: number;
+    isCompleted: boolean;
+  }
+
+  interface Props {
+    title: string;
+    questions: QuizQuestion[];
+    showScore?: boolean;
+    showProgress?: boolean;
+    passingScore?: number;
+    /** 是否禁用：级联禁用所有题目 */
+    disabled?: boolean;
+    onchange: (value: QuizState) => void;
+    _streaming?: boolean; // Indicates quiz is still being streamed
+    _pending?: { awaitingQuestions?: boolean };
+  }
+
+  let { title, questions = [], showScore = true, showProgress = true, passingScore = undefined, disabled = false, onchange, _streaming = false, _pending }: Props = $props();
+
+  // Filter out incomplete questions that don't have enough data to render
+  const validQuestions = $derived(questions.filter(q => q.id && q.question));
+
+  let answers = $state<Record<string, QuizAnswer>>({});
+  let draftInputs = $state<Record<string, string>>({});
+
+  // Use validQuestions for calculations to handle streaming gracefully
+  const maxScore = $derived(validQuestions.reduce((s, q) => s + q.points, 0));
+  const totalScore = $derived(Object.values(answers).reduce((s, a) => s + a.points, 0));
+  const questionsAnswered = $derived(Object.keys(answers).length);
+  // Only mark as completed when not streaming and all questions answered
+  const isCompleted = $derived(!_streaming && validQuestions.length > 0 && questionsAnswered === validQuestions.length);
+  const progressPercentage = $derived(validQuestions.length > 0 ? Math.round((questionsAnswered / validQuestions.length) * 100) : 0);
+  const scorePercentage = $derived(maxScore > 0 ? Math.round((totalScore / maxScore) * 100) : 0);
+  const isPassing = $derived(passingScore !== undefined ? scorePercentage >= (passingScore as number) : false);
+
+  // Check if we're awaiting questions
+  const awaitingQuestions = $derived(_streaming && validQuestions.length === 0);
+
+  function emitChange() {
+    onchange({
+      answers: { ...answers },
+      totalScore,
+      maxScore,
+      questionsAnswered,
+      isCompleted
+    });
+  }
+
+  // mcq choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
+  const questionItems = $derived<Record<string, RemoteChoice[]>>(
+    Object.fromEntries(validQuestions
+      .filter(q => q.type === 'mcq' && q.choices)
+      .map(q => [q.id, parseChoices(q.choices as string[])]))
+  );
+
+  function onAnswer(questionId: string, userAnswer: string) {
+    if (disabled) return;
+    const q = validQuestions.find(q => q.id === questionId);
+    if (!q || answers[questionId]?.submitted) return;
+
+    let correct = false;
+    if (q.type === 'mcq') {
+      correct = q.correctAnswer === userAnswer;
+    } else if (q.type === 'short-answer') {
+      if (q.correctAnswers) {
+        correct = q.correctAnswers.some(a => a.toLowerCase() === userAnswer.toLowerCase());
+      }
+    }
+
+    answers = { ...answers, [questionId]: { answer: userAnswer, isCorrect: correct, points: correct ? q.points : 0, submitted: true } };
+    if (draftInputs[questionId]) {
+      const { [questionId]: _, ...rest } = draftInputs; // remove draft
+      draftInputs = rest;
+    }
+    emitChange();
+  }
+
+  function submitShort(q: QuizQuestion) {
+    const val = (draftInputs[q.id] || '').trim();
+    if (!val) return;
+    onAnswer(q.id, val);
+  }
+
+  function mcqChoiceClass(q: QuizQuestion, choice: string) {
+    const ans = answers[q.id];
+    let cls = 'quiz-choice';
+    if (ans?.submitted && typeof q.correctAnswer !== 'undefined') {
+      if (choice === q.correctAnswer) cls += ' quiz-choice-correct';
+      else if (choice === ans.answer && choice !== q.correctAnswer) cls += ' quiz-choice-incorrect';
+    }
+    return cls;
+  }
+</script>
+
+<div class="widget-quiz" class:streaming={_streaming}>
+  <div class="quiz-header">
+    <h2 class="quiz-title">{title}{#if _streaming}<span class="streaming-indicator">...</span>{/if}</h2>
+    <div class="quiz-stats">
+      {#if showProgress}
+        <div class="quiz-progress">
+          <span class="quiz-progress-text">
+            Progress: {questionsAnswered}/{_streaming ? `${validQuestions.length}+` : validQuestions.length} questions
+          </span>
+          <div class="quiz-progress-bar">
+            <div class="quiz-progress-fill" style={`width: ${progressPercentage}%`}></div>
+          </div>
+        </div>
+      {/if}
+      {#if showScore}
+        <div class="quiz-score">
+          <span class="quiz-score-text">Score: {totalScore}/{_streaming ? `${maxScore}+` : maxScore} ({scorePercentage}%)</span>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="quiz-questions">
+    {#if awaitingQuestions}
+      <!-- Skeleton loading state while waiting for questions -->
+      <div class="quiz-question quiz-question-skeleton">
+        <div class="quiz-question-header">
+          <h3 class="quiz-question-text skeleton-text">Loading question...</h3>
+          <span class="quiz-question-points skeleton-text">-- pts</span>
+        </div>
+        <div class="quiz-choices">
+          <div class="quiz-choice skeleton-choice"></div>
+          <div class="quiz-choice skeleton-choice"></div>
+          <div class="quiz-choice skeleton-choice"></div>
+        </div>
+      </div>
+    {/if}
+    {#each validQuestions as q (q.id)}
+      {#if q.type === 'mcq'}
+        <div class="quiz-question" class:question-streaming={q._streaming}>
+          <div class="quiz-question-header">
+            <h3 class="quiz-question-text">{q.question}{#if q._streaming}<span class="streaming-indicator">...</span>{/if}</h3>
+            <span class="quiz-question-points">{q.points} pts</span>
+          </div>
+          <div class="quiz-choices">
+            {#if q.choices && q.choices.length > 0}
+              {@const qItems = questionItems[q.id] ?? []}
+              {#each qItems as it}
+                <button class={mcqChoiceClass(q, it.value)} onclick={() => onAnswer(q.id, it.value)} disabled={disabled || answers[q.id]?.submitted || q._streaming}>{it.label}</button>
+              {/each}
+              {#if q._streaming}
+                <div class="quiz-choice skeleton-choice">...</div>
+              {/if}
+            {:else if q._streaming}
+              <div class="quiz-choice skeleton-choice"></div>
+              <div class="quiz-choice skeleton-choice"></div>
+            {/if}
+          </div>
+          {#if answers[q.id]?.submitted}
+            {#if typeof q.correctAnswer !== 'undefined'}
+              {@const correctLabel = (questionItems[q.id] ?? []).find(i => i.value === q.correctAnswer)?.label ?? q.correctAnswer}
+              <div class={`quiz-feedback ${answers[q.id].isCorrect ? 'correct' : 'incorrect'}`}>
+                {answers[q.id].isCorrect ? `✓ Correct! (+${answers[q.id].points} pts)` : `✗ Incorrect. The correct answer is: ${correctLabel}`}
+              </div>
+            {:else}
+              <div class="quiz-feedback">You selected: {answers[q.id].answer}</div>
+            {/if}
+          {/if}
+        </div>
+      {:else}
+        <div class="quiz-question">
+          <div class="quiz-question-header">
+            <h3 class="quiz-question-text">{q.question}</h3>
+            <span class="quiz-question-points">{q.points} pts</span>
+          </div>
+          <div class="quiz-input-container">
+            <input
+              type="text"
+              value={answers[q.id]?.submitted ? answers[q.id].answer : (draftInputs[q.id] || '')}
+              oninput={(e) => { if (!disabled && !answers[q.id]?.submitted) draftInputs[q.id] = (e.target as HTMLInputElement).value; }}
+              onkeydown={(e) => { if (e.key === 'Enter' && !disabled && !answers[q.id]?.submitted) submitShort(q); }}
+              placeholder={q.placeholder || 'Type your answer here...'}
+              disabled={disabled || answers[q.id]?.submitted}
+              class={`quiz-input ${answers[q.id]?.submitted ? ((q.correctAnswers && q.correctAnswers.length > 0) ? (answers[q.id].isCorrect ? 'quiz-input-correct' : 'quiz-input-incorrect') : '') : ''}`}
+            />
+            {#if !answers[q.id]?.submitted}
+              <button class="quiz-submit" onclick={() => submitShort(q)} disabled={disabled || !((draftInputs[q.id] || '').trim())}>Submit</button>
+            {/if}
+          </div>
+          {#if answers[q.id]?.submitted}
+            {#if (q.correctAnswers && q.correctAnswers.length > 0)}
+              <div class={`quiz-feedback ${answers[q.id].isCorrect ? 'correct' : 'incorrect'}`}>
+                {answers[q.id].isCorrect ? `✓ Correct! (+${answers[q.id].points} pts)` : `✗ Incorrect. Accepted answers: ${(q.correctAnswers || []).join(', ') || 'N/A'}`}
+              </div>
+            {:else}
+              <div class="quiz-feedback">Your answer: {answers[q.id].answer}</div>
+            {/if}
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  {#if isCompleted}
+    <div class="quiz-summary">
+      <h3>Quiz Complete!</h3>
+      <div class="quiz-final-score">Final Score: {totalScore}/{maxScore} points ({scorePercentage}%)</div>
+      {#if passingScore !== undefined}
+        <div class={`quiz-result ${isPassing ? 'passed' : 'failed'}`}>
+          {isPassing ? '🎉 Passed!' : '❌ Failed'} (Passing: {passingScore}%)
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if _streaming && validQuestions.length > 0}
+    <!-- Show indicator that more questions may be loading -->
+    <div class="quiz-streaming-footer">
+      <span class="streaming-dots">Loading more content</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .streaming-indicator {
+    animation: pulse 1.5s ease-in-out infinite;
+    opacity: 0.6;
+  }
+
+  .streaming-dots::after {
+    content: '...';
+    animation: dots 1.5s steps(4, end) infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+  }
+
+  @keyframes dots {
+    0%, 20% { content: ''; }
+    40% { content: '.'; }
+    60% { content: '..'; }
+    80%, 100% { content: '...'; }
+  }
+
+  .quiz-question-skeleton {
+    opacity: 0.6;
+  }
+
+  .skeleton-text {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.06) 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 4px;
+  }
+
+  .skeleton-choice {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.06) 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    height: 2.5rem;
+    border-radius: 6px;
+    pointer-events: none;
+  }
+
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  .question-streaming {
+    border-left: 3px solid #1677ff;
+  }
+
+  .quiz-streaming-footer {
+    text-align: center;
+    padding: 0.75rem;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 0.875rem;
+  }
+</style>

package/src/lib/widgets/Radio.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import { normalizeRemoteChoices, parseChoice, parseChoices, type RemoteChoice } from './remoteChoices';
+  interface Props {
+    /** 选项：字符串数组（每项支持 key:label 格式）或对象数组（{key|value,label}，取值为 key/value，展示 label） */
+    choices: string[] | Array<{ value?: string; key?: string; label?: string }>;
+    label?: string;
+    default?: string | string[];
+    /** 按钮样式（参考 antd Radio optionType:button）：渲染为按钮组而非圆点单选 */
+    button?: boolean;
+    /** 远端数据源 URL：设置后运行时 fetch 拉取选项，choices 作为初始/后备选项 */
+    url?: string;
+    /** 选项排列方向：vertical 纵向（默认）/ horizontal 横向；按钮样式默认 horizontal */
+    direction?: 'vertical' | 'horizontal';
+    /** 自定义布局：每行列数（设置后按 N 列网格排列，优先于 direction） */
+    columns?: number;
+    hint?: string;
+    /** 是否必填 */
+    required?: boolean;
+    /** 校验失败提示文案 */
+    message?: string;
+    /** 外部（form 提交时）传入的错误信息 */
+    error?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: string) => void;
+  }
+  let {
+    choices,
+    label = '',
+    default: initial,
+    button = false,
+    url = '',
+    direction,
+    columns = 0,
+    hint = '',
+    required = false,
+    message = '',
+    error = '',
+    disabled = false,
+    onchange
+  }: Props = $props();
+
+  // 初始选中：default 可能是 key、label 或 key:label 原文，统一解析为 key 体系；
+  // 对象数组 choices 时 default 写 label 也映射回 value；无 default 时选中第一项（与 button-group 一致）
+  const localItems = parseChoices(choices);
+  const mapInitial = (v: any): string => {
+    const s = String(v);
+    const hit = localItems.find(it => it.value === s || it.label === s);
+    return hit ? hit.value : parseChoice(s).value;
+  };
+  let val = $state(
+    initial !== undefined && initial !== null && initial !== ''
+      ? mapInitial(Array.isArray(initial) ? initial[0] : initial)
+      : (localItems[0]?.value ?? '')
+  );
+  let localError = $state('');
+
+  // 远端选项：拉取成功后覆盖本地 choices（value=表单取值，label=展示文案）
+  // 加载失败静默处理：回落本地 choices，均无数据时显示灰色"暂无数据"
+  let remoteChoices = $state<RemoteChoice[] | null>(null);
+  let loading = $state(false);
+
+  $effect(() => {
+    if (!url) { remoteChoices = null; return; }
+    loading = true;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json: any = await res.json();
+        if (cancelled) return;
+        const list = normalizeRemoteChoices(json);
+        if (list.length === 0) throw new Error('响应中没有可用选项');
+        remoteChoices = list;
+        // 选中值处理：当前值（可能是本地 label）映射到远端 value，不在远端取值中则回落第一项
+        const mapped = resolveMapped(val, list);
+        if (mapped !== val) {
+          val = mapped;
+          onchange(mapped);
+        }
+      } catch {
+        // 加载失败：静默回落本地 choices
+      } finally {
+        if (!cancelled) loading = false;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  /** 当前值映射到远端取值体系：命中返回远端 value，未命中回落第一项 */
+  function resolveMapped(v: string, list: RemoteChoice[]): string {
+    const hit = list.find(r => r.value === v || r.label === v);
+    if (hit) return hit.value;
+    return list[0]?.value ?? '';
+  }
+
+  function validate(v: string): string {
+    if (required && v === '') return message || (label ? `请填写${label}` : '请至少选择一项');
+    return '';
+  }
+
+  function pick(item: RemoteChoice) {
+    if (disabled) return;
+    val = item.value;
+    localError = validate(val);
+    onchange(item.value);
+  }
+
+  const shownError = $derived(error || localError);
+  /** 展示条目：远端拉取成功用 {value,label}；否则本地 choices（支持 key:label 格式与对象数组） */
+  const items = $derived(remoteChoices ?? localItems);
+</script>
+
+{#if button}
+  <!-- 按钮样式（antd Radio optionType:button）：复用 widget-button-group 视觉 -->
+  <div class="widget-button-group" class:widget-field-error={!!shownError}>
+    {#if label}<label>{label}</label>{/if}
+    <div
+      role="group"
+      aria-label={label}
+      class="radio-button-group"
+      data-direction={columns >= 1 ? 'grid' : (direction || 'horizontal')}
+      style={columns >= 1 ? `grid-template-columns: repeat(${columns}, minmax(0, 1fr))` : ''}
+    >
+      {#if items.length === 0}
+        <div style="color: rgba(0, 0, 0, 0.45); font-size: 13px;">{loading ? '加载中…' : '暂无数据'}</div>
+      {/if}
+      {#each items as item (item.value)}
+        <button
+          type="button"
+          aria-pressed={val === item.value}
+          {disabled}
+          onclick={() => pick(item)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+    {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+  </div>
+{:else}
+  <!-- 默认圆点单选样式（antd Radio） -->
+  <div class="selector-multi" class:widget-field-error={!!shownError}>
+    {#if label || hint || required}
+      <div class="widget-label-row">
+        {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+        {#if label}<div class="selector-multi-label">{label}</div>{/if}
+        {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+      </div>
+    {/if}
+    <div class="widget-field-content">
+      <!-- 选项布局：columns 自定义列数（grid）优先；direction 横向/纵向（默认纵向） -->
+      <div
+        class="radio-group"
+        role="radiogroup"
+        aria-label={label}
+        data-direction={columns >= 1 ? 'grid' : (direction || 'vertical')}
+        style={columns >= 1 ? `grid-template-columns: repeat(${columns}, minmax(0, 1fr))` : ''}
+      >
+        {#if items.length === 0}
+          <div style="color: rgba(0, 0, 0, 0.45); font-size: 13px;">{loading ? '加载中…' : '暂无数据'}</div>
+        {/if}
+        {#each items as item (item.value)}
+          <label class="radio-item">
+            <input
+              type="radio"
+              value={item.value}
+              checked={val === item.value}
+              {disabled}
+              onchange={() => pick(item)}
+            />
+            <span>{item.label}</span>
+          </label>
+        {/each}
+      </div>
+      {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+    </div>
+  </div>
+{/if}