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

package/src/lib/widgets/Row.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import ButtonGroup from './ButtonGroup.svelte';
+	import Select from './Select.svelte';
+	import SelectMulti from './SelectMulti.svelte';
+	import RadioGroup from './Radio.svelte';
+	import Cascader from './Cascader.svelte';
+	import TreeSelect from './TreeSelect.svelte';
+	import Slider from './Slider.svelte';
+	import Switch from './Switch.svelte';
+	import TextInput from './TextInput.svelte';
+	import NumberInput from './NumberInput.svelte';
+	import DatePicker from './DatePicker.svelte';
+	import Text from './Text.svelte';
+	import Form from './Form.svelte';
+	import Row from './Row.svelte';
+	import Chart from './Chart.svelte';
+	import MultipleChoiceQuestion from './MultipleChoiceQuestion.svelte';
+	import ShortAnswerQuestion from './ShortAnswerQuestion.svelte';
+	import Quiz from './Quiz.svelte';
+	import Incomplete from './Incomplete.svelte';
+
+	interface GridCol {
+		span?: number;
+		offset?: number;
+		align?: 'top' | 'middle' | 'bottom';
+		widget?: any;
+	}
+	interface Props {
+		id?: string;
+		cols: GridCol[];
+		/** 列间距（px），类似 antd Row 的 gutter */
+		gutter?: number;
+		/** 水平排列：left / center / right / between */
+		justify?: 'left' | 'center' | 'right' | 'between';
+		/** 垂直对齐：top / middle / bottom */
+		align?: 'top' | 'middle' | 'bottom';
+		/** 子组件事件冒泡（子组件无行为语义，透传即可） */
+		onchange?: (value: any) => void;
+	}
+
+	let { id, cols, gutter, justify, align, onchange }: Props = $props();
+
+	// 计算每列 grid span（24 栅格）：显式 span 优先，无 span 均分剩余
+	function computeSpans(cols: GridCol[]): number[] {
+		const spans = cols.map(c =>
+			typeof c.span === 'number' && c.span >= 1 && c.span <= 24 ? Math.round(c.span) : undefined
+		);
+		const fixedTotal = spans.reduce<number>((acc, s) => acc + (s ?? 0), 0);
+		const autoCount = spans.filter(s => s === undefined).length;
+		let autoSpan = 0;
+		if (autoCount > 0) {
+			const remaining = 24 - fixedTotal;
+			// 剩余栅格不足时占满整行（grid auto-flow 会自动换行），避免被挤进窄列导致文字竖排
+			if (remaining <= 0) {
+				autoSpan = 24;
+			} else {
+				autoSpan = Math.max(Math.floor(remaining / autoCount), 1);
+			}
+		}
+		return spans.map(s => s ?? autoSpan);
+	}
+
+	const colAlign: Record<string, string> = { top: 'start', middle: 'center', bottom: 'end' };
+	const rowAlign: Record<string, string> = { top: 'start', middle: 'center', bottom: 'end' };
+	const rowJustify: Record<string, string> = {
+		left: 'start', center: 'center', right: 'end', between: 'space-between'
+	};
+</script>
+
+<div
+	class="widget-grid-row"
+	data-row-id={id}
+	style={[
+		gutter !== undefined ? `--row-gutter: ${gutter}px` : '',
+		`justify-content: ${rowJustify[justify || 'left']}`,
+		`align-items: ${rowAlign[align || 'middle']}`
+	].filter(Boolean).join('; ')}
+>
+	{#each cols as col, ci (ci)}
+		{@const span = computeSpans(cols)[ci]}
+		{@const offset = typeof col.offset === 'number' && col.offset >= 0 ? Math.round(col.offset) : 0}
+		<div
+		class="widget-grid-col"
+		data-col-index={ci}
+		data-field-type={col.widget?.type}
+		style={[
+			`grid-column: ${offset > 0 ? `${offset + 1} / span ${span}` : `span ${span}`}`,
+			col.align ? `align-self: ${colAlign[col.align]}` : ''
+		].filter(Boolean).join('; ')}
+	>
+		{#if col.widget}
+			<!-- 子组件包裹 div：data-field-id 供编辑器字段级定位（col 自身不带，便于双击 col 空白打开 col 面板） -->
+			<div class="widget-grid-field" data-field-id={col.widget.id} data-field-type={col.widget.type}>
+				{#if col.widget.type === 'button'}
+					<Button {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'button-group'}
+					<ButtonGroup {...col.widget} choices={col.widget.choices ?? []} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'select'}
+					<Select {...col.widget} choices={col.widget.choices ?? []} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'select-multi'}
+					<SelectMulti {...col.widget} choices={col.widget.choices ?? []} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'radio-group'}
+					<RadioGroup {...col.widget} choices={col.widget.choices ?? []} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'cascade'}
+					<Cascader {...col.widget} choices={col.widget.choices ?? []} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'tree-select'}
+					<TreeSelect {...col.widget} choices={col.widget.choices ?? []} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'slider'}
+					<Slider {...col.widget} min={col.widget.min ?? 0} max={col.widget.max ?? 100} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'switch'}
+					<Switch {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'text-input'}
+					<TextInput {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'number-input'}
+					<NumberInput {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'date-picker'}
+					<DatePicker {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'text'}
+					<Text {...col.widget} />
+				{:else if col.widget.type === 'form'}
+					<Form {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'row'}
+					<Row {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'chart-line' || col.widget.type === 'chart-bar' || col.widget.type === 'chart-pie' || col.widget.type === 'chart-scatter'}
+					<Chart {...col.widget} type={col.widget.type} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'multiple-choice-question'}
+					<MultipleChoiceQuestion {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'short-answer-question'}
+					<ShortAnswerQuestion {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'quiz'}
+					<Quiz {...col.widget} onchange={(v) => onchange?.(v)} />
+				{:else if col.widget.type === 'incomplete'}
+					<Incomplete {...col.widget} onchange={(v: any) => onchange?.(v)} />
+				{/if}
+			</div>
+		{/if}
+	</div>
+	{/each}
+</div>

package/src/lib/widgets/Select.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+  import { normalizeRemoteChoices, parseChoices, resolveChoiceValue, type RemoteChoice } from './remoteChoices';
+  interface Props {
+    choices: string[];
+    label?: string;
+    default?: string;
+    /** 远端数据源 URL：设置后运行时 fetch 拉取选项，choices 作为初始/后备选项 */
+    url?: string;
+    /** 是否可搜索：开启后下拉面板内置搜索框，按 key/value 与 label 过滤选项 */
+    searchable?: boolean;
+    hint?: string;
+    /** 是否必填（select 必有选中值，仅语义标记） */
+    required?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: string | string[]) => void;
+  }
+  let {
+    choices,
+    label = '',
+    default: initial,
+    url = '',
+    searchable = false,
+    hint = '',
+    required = false,
+    disabled = false,
+    onchange
+  }: Props = $props();
+
+  // 远端选项：拉取成功后覆盖本地 choices（value=表单取值，label=展示文案）
+  // 加载失败静默处理：回落本地 choices，均无数据时下拉显示灰色"暂无数据"
+  let remoteChoices = $state<RemoteChoice[] | null>(null);
+  let loading = $state(false);
+
+  // 初始选中值：default → choices[0] 的 key → 远端第一项
+  let val = $state(initial ?? parseChoices(choices)[0]?.value ?? '');
+
+  $effect(() => {
+    if (!url) 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;
+        // 当前值不在远端取值中时：default/本地值按 label 映射到远端 value，否则回落第一项
+        if (!list.some(r => r.value === val)) {
+          const mapped = initial !== undefined ? resolveChoiceValue(initial, list) : val;
+          val = list.some(r => r.value === mapped) ? mapped : list[0].value;
+          onchange(val);
+        }
+      } catch {
+        // 加载失败：静默回落本地 choices
+      } finally {
+        if (!cancelled) loading = false;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  /** 展示条目：远端拉取成功用 {value,label}；否则本地 choices（支持 key:label 格式） */
+  const items = $derived(remoteChoices ?? parseChoices(choices));
+
+  // ---------- searchable 模式：自定义下拉（触发按钮 + 搜索框 + 滚动选项列表） ----------
+  let open = $state(false);
+  /** 搜索关键字（按 value/key 与 label 过滤，大小写不敏感） */
+  let query = $state('');
+  let searchEl: HTMLInputElement | undefined = $state();
+  let rootEl: HTMLElement | undefined = $state();
+
+  /** 当前选中项展示文案（value 与 label 不同时优先 label） */
+  const display = $derived(items.find(it => it.value === val)?.label ?? '');
+
+  /** 展示用的选项列表：searchable 模式按关键字过滤，普通模式全量 */
+  const filtered = $derived.by(() => {
+    if (!searchable) return items;
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(it => it.value.toLowerCase().includes(q) || it.label.toLowerCase().includes(q));
+  });
+
+  // 外部点击关闭面板
+  $effect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootEl && !rootEl.contains(e.target as Node)) open = false;
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  });
+
+  // 打开面板时清空关键字并聚焦搜索框（仅 searchable 模式有搜索框）
+  $effect(() => {
+    if (open && searchable) {
+      query = '';
+      if (searchEl) searchEl.focus();
+    }
+  });
+
+  function toggleOpen() {
+    if (disabled) return;
+    open = !open;
+  }
+
+  /** 选中某选项：回填 value 并关闭面板 */
+  function pick(v: string) {
+    if (disabled) return;
+    val = v;
+    open = false;
+    onchange(v);
+  }
+</script>
+
+<div class="selector" bind:this={rootEl}>
+  {#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 widget-select-content">
+    <button type="button" class="cas-input" onclick={toggleOpen} aria-expanded={open} {disabled}>
+      <span class="cas-input-text" class:cas-placeholder={!display}>
+        {loading ? '加载中…' : display || '请选择'}
+      </span>
+      <span class="cas-arrow" class:cas-arrow-open={open} aria-hidden="true">▾</span>
+    </button>
+    {#if open}
+      <div class="cas-panel cas-panel-single">
+        {#if searchable}
+          <div class="cas-search">
+            <input
+              type="text"
+              class="cas-search-input"
+              bind:this={searchEl}
+              bind:value={query}
+              placeholder="搜索选项…"
+            />
+          </div>
+        {/if}
+        <div class="cas-menu cas-menu-full" role="menu">
+          {#each filtered as it (it.value)}
+            <button
+              type="button"
+              class="cas-option"
+              class:cas-option-active={val === it.value}
+              onclick={() => pick(it.value)}
+            >
+              <span class="cas-option-label">{it.label}</span>
+            </button>
+          {/each}
+          {#if filtered.length === 0}
+            <div class="cas-empty">{loading ? '加载中…' : query.trim() ? '无匹配选项' : '暂无数据'}</div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .widget-select-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  .cas-input {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    text-align: left;
+  }
+  .cas-input:hover { border-color: #4096ff; }
+  .cas-input:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+  /* 禁用态：置灰 + 禁止交互 */
+  .cas-input:disabled {
+    background-color: #f5f5f5;
+    color: rgba(0, 0, 0, 0.25);
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+  .cas-input:disabled:hover { border-color: #d9d9d9; }
+
+  .cas-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+  .cas-placeholder { color: rgba(0, 0, 0, 0.45); }
+  .cas-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+  .cas-arrow-open { transform: rotate(180deg); }
+
+  /* 可搜索面板：纵向排搜索框 + 选项列表 */
+  .cas-panel {
+    position: absolute;
+    z-index: 50;
+    top: calc(100% + 4px);
+    left: 0;
+    display: flex;
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  }
+  .cas-panel-single {
+    flex-direction: column;
+    min-width: 100%;
+    width: auto;
+  }
+  .cas-search {
+    padding: 0.5rem;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .cas-search-input {
+    width: 100%;
+    padding: 0.375rem 0.625rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+    box-sizing: border-box;
+  }
+  .cas-search-input:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+  .cas-menu {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 0.375rem;
+  }
+  .cas-menu-full {
+    width: 100%;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .cas-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.88);
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.15s ease;
+  }
+  .cas-option:hover { background: #f5f5f5; }
+  .cas-option-active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
+  .cas-option-active:hover { background: #bae0ff; }
+  .cas-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .cas-empty {
+    padding: 0.75rem 0.5rem;
+    font-size: 0.8125rem;
+    color: rgba(0, 0, 0, 0.45);
+    text-align: center;
+  }
+</style>

package/src/lib/widgets/SelectMulti.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { normalizeRemoteChoices, parseChoice, parseChoices, resolveChoiceValue, 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[];
+    /** 远端数据源 URL：设置后运行时 fetch 拉取选项，choices 作为初始/后备选项 */
+    url?: string;
+    /** 选项排列方向：vertical 纵向（默认）/ horizontal 横向 */
+    direction?: 'vertical' | 'horizontal';
+    /** 自定义布局：每行列数（设置后按 N 列网格排列，优先于 direction） */
+    columns?: number;
+    hint?: string;
+    /** 是否必填：至少勾选一项 */
+    required?: boolean;
+    /** 校验失败提示文案 */
+    message?: string;
+    /** 外部（form 提交时）传入的错误信息 */
+    error?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: string | string[]) => void;
+  }
+  let { choices, label = '', default: initial, url = '', direction = 'vertical', columns = 0, hint = '', required = false, message = '', error = '', disabled = false, onchange }: Props = $props();
+
+  // 初始勾选值：default 可能是 key、label 或 key:label 原文，统一解析为 key 体系；
+  // 对象数组 choices 时 default 写 label 也映射回 value
+  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(
+    Array.isArray(initial)
+      ? initial.map(mapInitial)
+      : (initial ? [mapInitial(initial)] : [])
+  );
+  let localError = $state('');
+
+  // 远端选项：拉取成功后覆盖本地 choices（value=表单取值，label=展示文案）
+  // 加载失败静默处理：回落本地 choices，均无数据时显示灰色"暂无数据"
+  let remoteChoices = $state<RemoteChoice[] | null>(null);
+  let loading = $state(false);
+
+  $effect(() => {
+    if (!url) 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，剔除仍不在远端取值中的项
+        if (val.length > 0) {
+          const mapped = val.map(v => resolveChoiceValue(v, list));
+          const filtered = mapped.filter(v => list.some(r => r.value === v));
+          if (filtered.join(',') !== val.join(',')) {
+            val = filtered;
+            onchange(val);
+          }
+        }
+      } catch {
+        // 加载失败：静默回落本地 choices
+      } finally {
+        if (!cancelled) loading = false;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  function validate(v: string[]): string {
+    if (required && v.length === 0) return message || (label ? `请填写${label}` : '请至少选择一项');
+    return '';
+  }
+
+  const shownError = $derived(error || localError);
+  /** 展示条目：远端拉取成功用 {value,label}；否则本地 choices（支持 key:label 格式与对象数组） */
+  const items = $derived(remoteChoices ?? localItems);
+</script>
+
+<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="checkbox-group"
+            data-direction={columns >= 1 ? 'grid' : direction}
+            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 it (it.value)}
+                <label class="checkbox-item">
+                    <input
+                        type="checkbox"
+                        value={it.value}
+                        checked={val.includes(it.value)}
+                        {disabled}
+                        onchange={(e) => {
+                            const target = e.target as HTMLInputElement;
+                            if (target.checked) {
+                                val = [...val, it.value];
+                            } else {
+                                val = val.filter(v => v !== it.value);
+                            }
+                            localError = validate(val);
+                            onchange(val);
+                        }}
+                    />
+                    <span>{it.label}</span>
+                </label>
+            {/each}
+        </div>
+        {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+    </div>
+</div>

package/src/lib/widgets/ShortAnswerQuestion.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  interface Props {
+    question: string;
+    placeholder?: string;
+    correctAnswer?: string;
+    correctAnswers?: string[];
+    showFeedback?: boolean;
+    /** 是否禁用：禁用后输入框与提交按钮不可交互 */
+    disabled?: boolean;
+    onchange: (value: { answer: string; isCorrect?: boolean }) => void;
+  }
+  let { question, placeholder = 'Type your answer here...', correctAnswer = undefined, correctAnswers = undefined, showFeedback = false, disabled = false, onchange }: Props = $props();
+  let answer = $state('');
+  let hasAnswered = $state(false);
+  let isCorrect: boolean | undefined = $state(undefined);
+
+  function submit() {
+    if (disabled) return;
+    const val = answer.trim();
+    if (!val) return;
+    hasAnswered = true;
+    const normalized = (correctAnswers && correctAnswers.length > 0) ? correctAnswers : (correctAnswer !== undefined ? [correctAnswer] : undefined);
+    const correct = normalized ? normalized.some(a => a.toLowerCase() === val.toLowerCase()) : undefined;
+    isCorrect = correct;
+    onchange({ answer: val, isCorrect: correct });
+  }
+
+  function feedbackMessage() {
+    if (!hasAnswered || !showFeedback) return '';
+    const hasAnswers = (correctAnswers && correctAnswers.length > 0) || (correctAnswer !== undefined);
+    if (!hasAnswers) return `Your answer: ${answer.trim()}`;
+    if (correctAnswers && correctAnswers.length > 0) {
+      return isCorrect ? '✓ Correct!' : `✗ Incorrect. Accepted answers: ${(correctAnswers || []).join(', ')}`;
+    }
+    return isCorrect ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctAnswer}`;
+  }
+</script>
+
+<div class="widget-saq">
+  <div class="saq-question">{question}</div>
+  <div class="saq-input-container">
+    <input
+      type="text"
+      bind:value={answer}
+      {placeholder}
+      onkeydown={(e) => { if (e.key === 'Enter' && !hasAnswered && !disabled) submit(); }}
+      disabled={disabled || (hasAnswered && showFeedback)}
+      class={`saq-input ${hasAnswered && showFeedback ? (isCorrect ? 'saq-input-correct' : 'saq-input-incorrect') : ''}`}
+    />
+    {#if !hasAnswered}
+      <button class="saq-submit" onclick={submit} disabled={disabled || !answer.trim()}>Submit</button>
+    {/if}
+  </div>
+  {#if hasAnswered && showFeedback && feedbackMessage()}
+    <div class={`saq-feedback ${isCorrect ? 'correct' : 'incorrect'}`}>{feedbackMessage()}</div>
+  {/if}
+</div>

package/src/lib/widgets/Slider.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  interface Props {
+    min: number;
+    max: number;
+    step?: number;
+    label?: string;
+    default?: number;
+    hint?: string;
+    /** 是否必填（slider 始终有值，仅语义标记） */
+    required?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    onchange: (value: number) => void;
+  }
+  let { min, max, step = 1, label = '', default: initial = min, hint = '', required = false, disabled = false, onchange }: Props = $props();
+  let value = $state(initial);
+</script>
+
+<div class="widget-slider">
+  {#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="slider-container">
+      <div class="slider-values">
+        <span class="min-value">{min}</span>
+        <span class="current-value">{value}</span>
+        <span class="max-value">{max}</span>
+      </div>
+      <input
+        type="range"
+        bind:value
+        {min}
+        {max}
+        {step}
+        {disabled}
+        onmouseup={() => onchange(value)}
+        ontouchend={() => onchange(value)}
+      />
+    </div>
+  </div>
+</div>