@keyfunc/keybricks-ds 1.0.2 → 1.0.4

package/components/forms/Radio.vue

@@ -1,16 +1,25 @@
 <script setup>
-import { computed } from 'vue'
-// Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected.
-const dims = { sm: { box: 13, dot: 6 }, md: { box: 16, dot: 8 } }
-const props = defineProps({ checked: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+import { ref, computed } from 'vue'
+// Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected. Hover darkens the ring, focus shows the 2px ring, disabled = 50% opacity.
+// description renders a muted second line under the label.
+const dims = { sm: { box: 13, dot: 6, font: 'var(--text-xs)' }, md: { box: 16, dot: 8, font: 'var(--text-sm)' } }
+const props = defineProps({ checked: Boolean, label: String, description: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
 const emit = defineEmits(['change'])
 const d = computed(() => dims[props.size] || dims.md)
+const hover = ref(false), focus = ref(false)
+const ring = computed(() => props.checked ? 'var(--action-primary)' : hover.value && !props.disabled ? 'var(--text-muted)' : 'var(--checkbox-border)')
+const pick = () => { if (!props.disabled) emit('change', true) }
 </script>
 <template>
-  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 6, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('change', true)">
-    <span :style="{ width: d.box + 'px', height: d.box + 'px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', border: `1.5px solid ${checked ? 'var(--action-primary)' : 'var(--checkbox-border)'}`, background: 'var(--bg-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'var(--t-hover)' }">
-      <span v-if="checked" :style="{ width: d.dot + 'px', height: d.dot + 'px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }" />
+  <label role="radio" :aria-checked="checked" :aria-disabled="disabled || undefined" :tabindex="disabled ? -1 : 0"
+    @mouseenter="hover = true" @mouseleave="hover = false" @focus="focus = true" @blur="focus = false" @click="pick" @keydown.space.prevent="pick" @keydown.enter.prevent="pick"
+    :style="{ display: 'inline-flex', alignItems: description ? 'flex-start' : 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: '8px', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, outline: 'none', ...style }">
+    <span :style="{ width: d.box + 'px', height: d.box + 'px', marginTop: description ? '1px' : 0, borderRadius: 'var(--radius-full)', boxSizing: 'border-box', border: `1.5px solid ${ring}`, background: 'var(--bg-surface)', boxShadow: focus && !disabled ? '0 0 0 2px var(--focus-ring)' : 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'var(--t-hover)' }">
+      <span v-if="checked" :style="{ width: d.dot + 'px', height: d.dot + 'px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }"></span>
+    </span>
+    <span v-if="label || description" style="display:flex;flex-direction:column;gap:2px">
+      <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: d.font, lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
+      <span v-if="description" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:16px;color:var(--text-muted)">{{ description }}</span>
     </span>
-    <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
   </label>
 </template>

package/components/forms/RadioGroup.vue

@@ -1,11 +1,29 @@
 <script setup>
+import { computed } from 'vue'
 import Radio from './Radio.vue'
-// Vertical or horizontal group of Radios.
-defineProps({ options: { type: Array, default: () => [] }, modelValue: String, row: Boolean, size: { type: String, default: 'md' }, style: Object })
+// RadioGroup — single choice. Vertical (default) or `row`. options: string[] | { label, value, description?, disabled? }[].
+// Arrow keys move between enabled options. variant="cards" renders bordered selectable cards. v-model.
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, row: Boolean, size: { type: String, default: 'md' }, variant: { type: String, default: 'plain' }, disabled: Boolean, style: Object })
 const emit = defineEmits(['update:modelValue'])
+const opts = computed(() => props.options.map(o => typeof o === 'string' ? { label: o, value: o } : o))
+const enabled = computed(() => opts.value.filter(o => !o.disabled && !props.disabled))
+function onKey(e) {
+  if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(e.key) || !enabled.value.length) return
+  e.preventDefault()
+  const i = enabled.value.findIndex(o => o.value === props.modelValue), n = enabled.value.length
+  const next = (e.key === 'ArrowDown' || e.key === 'ArrowRight') ? enabled.value[(i + 1) % n] : enabled.value[(i - 1 + n) % n]
+  emit('update:modelValue', next.value)
+}
+const pick = (o) => { if (!(o.disabled || props.disabled)) emit('update:modelValue', o.value) }
 </script>
 <template>
-  <div :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: (row ? 16 : 10) + 'px', ...style }">
-    <Radio v-for="o in options" :key="o" :label="o" :size="size" :checked="modelValue === o" @change="emit('update:modelValue', o)" />
+  <div v-if="variant === 'cards'" role="radiogroup" @keydown="onKey" :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: '8px', ...style }">
+    <div v-for="o in opts" :key="o.value" @click="pick(o)"
+      :style="{ flex: row ? 1 : 'none', padding: '10px 12px', borderRadius: 'var(--radius-md)', border: `1px solid ${modelValue === o.value ? 'var(--action-primary)' : 'var(--border-card)'}`, background: modelValue === o.value ? 'var(--soft-bg)' : 'var(--bg-surface)', cursor: (o.disabled || disabled) ? 'not-allowed' : 'pointer', opacity: (o.disabled || disabled) ? .5 : 1, transition: 'var(--t-hover)' }">
+      <Radio :checked="modelValue === o.value" :label="o.label" :description="o.description" :size="size" :disabled="o.disabled || disabled" :style="{ opacity: 1, cursor: 'inherit' }" @change="pick(o)" />
+    </div>
+  </div>
+  <div v-else role="radiogroup" @keydown="onKey" :style="{ display: 'flex', flexDirection: row ? 'row' : 'column', gap: (row ? 16 : 10) + 'px', ...style }">
+    <Radio v-for="o in opts" :key="o.value" :label="o.label" :description="o.description" :size="size" :disabled="o.disabled || disabled" :checked="modelValue === o.value" @change="pick(o)" />
   </div>
 </template>

package/components/forms/Switch.d.ts

@@ -1,31 +1,39 @@
 import * as React from "react";
-/** 34×20 switch for settings-style booleans. Addition — not in the source file. */
+/**
+ * Switch — 36×20 pill (lg 44×24), 16/20px knob, 160ms ease-out slide. Controlled.
+ * Variants: knob glyph (icon or one character), text inside the pill, captions beside it,
+ * a semantic red→green tone, and an async gate that shows a spinner in the knob.
+ */
 export interface SwitchProps {
   checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: string;
-  size?: "md" | "sm";
+  onChange?(next: boolean): void;
   disabled?: boolean;
-  style?: React.CSSProperties;
-}
-export declare function Switch(props: SwitchProps): JSX.Element;
-/** 16px (sm: 13px) radio. Addition — not in the source file. */
-export interface RadioProps {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
+  /** sm 28×16 · md 36×20 (default) · lg 44×24 — use lg whenever the knob carries a glyph */
+  size?: "sm" | "md" | "lg";
+  /** primary = action blue on / border-strong off · semantic = success on / danger off */
+  tone?: "primary" | "semantic";
+  /** Explicit track colors; override tone. Prefer tokens. */
+  onColor?: string;
+  offColor?: string;
+  /** Icon inside the knob, or a pair for each state */
+  knobIcon?: string | { on: string; off: string };
+  /** ONE letter or ONE CJK character inside the knob, or a pair */
+  knobText?: string | { on: string; off: string };
+  /** Text inside the pill opposite the knob — keep it to 1–3 characters */
+  insideOn?: string;
+  insideOff?: string;
+  /** Alias for the insideOn/insideOff pair */
+  inlinePrompt?: { on: string; off: string };
+  /** Single caption to the right (settings rows) — text-body, state-independent */
   label?: string;
-  size?: "md" | "sm";
-  disabled?: boolean;
-  style?: React.CSSProperties;
-}
-export declare function Radio(props: RadioProps): JSX.Element;
-/** Radio set; `row` lays them horizontally. */
-export interface RadioGroupProps {
-  options?: string[];
-  value?: string;
-  onChange?: (value: string) => void;
-  row?: boolean;
-  size?: "md" | "sm";
+  /** Captions beside the pill; the active side takes text-heading */
+  labelOn?: string;
+  labelOff?: string;
+  /** Controlled loading: spinner in the knob, input inert */
+  loading?: boolean;
+  /** Async gate — Switch shows loading until it settles; flips only on truthy */
+  beforeChange?(next: boolean): Promise<boolean> | boolean;
   style?: React.CSSProperties;
 }
-export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export declare function Switch(props: SwitchProps): JSX.Element;
+export default Switch;

package/components/forms/Switch.jsx

@@ -1,40 +1,92 @@
 import React from "react";
+import { Icon } from "../icons/Icon.jsx";
 
-const switchDims = { sm: { w: 28, h: 16, knob: 12 }, md: { w: 34, h: 20, knob: 16 } };
-/** Switch — 34×20 (sm: 28×16) track, knob. Keybricks has no switch in the source file; this follows the button radii + action color. */
-export function Switch({ checked, onChange, label, size = "md", disabled, style }) {
-  const d = switchDims[size] || switchDims.md;
-  return (
-    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 8, cursor: disabled ? "default" : "pointer", opacity: disabled ? .5 : 1, ...style }}
-      onClick={() => !disabled && onChange && onChange(!checked)}>
-      <span style={{ width: d.w, height: d.h, borderRadius: "var(--radius-full)", background: checked ? "var(--action-primary)" : "var(--track)", position: "relative", flexShrink: 0, transition: "var(--t-hover)" }}>
-        <span style={{ position: "absolute", top: 2, left: checked ? d.w - d.knob - 2 : 2, width: d.knob, height: d.knob, borderRadius: "var(--radius-full)", background: "var(--on-accent)", boxShadow: "0 1px 2px rgba(0,0,0,.2)", transition: "left var(--dur-fast) var(--ease-out)" }} />
-      </span>
-      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
-    </label>
-  );
-}
+/**
+ * Switch — 36×20 pill, 16px knob, 160ms ease-out slide.
+ *
+ * checked / onChange(next)   controlled boolean
+ * disabled                   50% opacity, no pointer
+ * size                       "md" (36×20, default) | "lg" (44×24 — needed for knobIcon / knobText)
+ * tone                       "primary" (default, action blue) | "semantic" (red off → green on)
+ * onColor / offColor         explicit track colors; override tone
+ * knobIcon / knobText        glyph inside the knob: string | { on, off }. knobText is ONE letter or ONE CJK character.
+ * insideOn / insideOff       text inside the pill on the far side of the knob (short — "ON"/"OFF", "开"/"关", "Y"/"N")
+ * labelOn / labelOff         captions beside the pill; active caption takes text-heading, inactive takes text-muted
+ * loading                    controlled: knob shows a spinner, input is inert
+ * beforeChange(next) => Promise|boolean
+ *                            async gate — Switch enters loading, flips only if the promise resolves truthy
+ * inlinePrompt               (Vue-friendly alias of insideOn/insideOff pair {on,off})
+ */
 
-const radioDims = { sm: { box: 13, dot: 6 }, md: { box: 16, dot: 8 } };
-/** Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected. */
-export function Radio({ checked, onChange, label, size = "md", disabled, style }) {
-  const d = radioDims[size] || radioDims.md;
-  return (
-    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 6, cursor: disabled ? "default" : "pointer", opacity: disabled ? .5 : 1, ...style }}
-      onClick={() => !disabled && onChange && onChange(true)}>
-      <span style={{ width: d.box, height: d.box, borderRadius: "var(--radius-full)", boxSizing: "border-box", border: `1.5px solid ${checked ? "var(--action-primary)" : "var(--checkbox-border)"}`, background: "var(--bg-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "var(--t-hover)" }}>
-        {checked ? <span style={{ width: d.dot, height: d.dot, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }} /> : null}
-      </span>
-      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
-    </label>
-  );
-}
+const SIZES = {
+  sm: { w: 28, h: 16, knob: 12, pad: 2, inside: 9, glyph: 8, label: "var(--text-xs)" },
+  md: { w: 36, h: 20, knob: 16, pad: 2, inside: 10, glyph: 10, label: "var(--text-sm)" },
+  lg: { w: 44, h: 24, knob: 20, pad: 2, inside: 11, glyph: 12, label: "var(--text-sm)" }
+};
+
+const pick = (v, on) => (v && typeof v === "object" ? (on ? v.on : v.off) : v);
+
+export function Switch({ checked = false, onChange, disabled, size = "md", tone = "primary", onColor, offColor, knobIcon, knobText, insideOn, insideOff, inlinePrompt, label, labelOn, labelOff, loading: loadingProp, beforeChange, style }) {
+  // `label` = single caption to the right, shown in text-body regardless of state (settings-row usage)
+  const single = label != null && labelOn == null && labelOff == null;
+  const [busy, setBusy] = React.useState(false);
+  const alive = React.useRef(true);
+  React.useEffect(() => () => { alive.current = false; }, []);
+  const loading = loadingProp || busy;
+  const s = SIZES[size] || SIZES.md;
+  if (inlinePrompt) { insideOn = insideOn ?? inlinePrompt.on; insideOff = insideOff ?? inlinePrompt.off; }
+  const hasInside = insideOn != null || insideOff != null;
+  // inside text needs a wider track so the knob never covers the word
+  const insideExtra = hasInside ? Math.max(0, Math.max(String(insideOn ?? "").length, String(insideOff ?? "").length) * (s.inside * .68) + 6 - (s.w - s.knob - s.pad * 2)) : 0;
+  const w = s.w + insideExtra;
+
+  const onTrack = onColor || (tone === "semantic" ? "var(--success)" : "var(--action-primary)");
+  const offTrack = offColor || (tone === "semantic" ? "var(--danger)" : "var(--border-strong)");
+  const track = checked ? onTrack : offTrack;
+  const inert = disabled || loading;
+
+  const flip = async () => {
+    if (inert) return;
+    const next = !checked;
+    if (beforeChange) {
+      setBusy(true);
+      let ok = false;
+      try { ok = await beforeChange(next); } catch (e) { ok = false; }
+      if (!alive.current) return;
+      setBusy(false);
+      if (!ok) return;
+    }
+    onChange && onChange(next);
+  };
 
-/** Vertical or horizontal group of Radios. */
-export function RadioGroup({ options = [], value, onChange, row, size = "md", style }) {
-  return (
-    <div style={{ display: "flex", flexDirection: row ? "row" : "column", gap: row ? 16 : 10, ...style }}>
-      {options.map((o) => <Radio key={o} label={o} size={size} checked={value === o} onChange={() => onChange && onChange(o)} />)}
-    </div>
-  );
+  const glyphIcon = pick(knobIcon, checked);
+  const glyphText = pick(knobText, checked);
+  const knobX = checked ? w - s.knob - s.pad : s.pad;
+
+  const knob = <span aria-hidden="true" style={{ position: "absolute", top: s.pad, left: knobX, width: s.knob, height: s.knob, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", boxShadow: "0 1px 2px rgba(0,0,0,.18)", transition: "left 160ms ease-out", display: "flex", alignItems: "center", justifyContent: "center", color: track, fontSize: s.glyph, lineHeight: 1, fontWeight: 600, fontFamily: "var(--font-sans)", overflow: "hidden" }}>
+    {loading
+      ? <span style={{ width: s.glyph, height: s.glyph, borderRadius: "50%", border: `1.5px solid ${track}`, borderRightColor: "transparent", animation: "kb-spin 720ms linear infinite" }}></span>
+      : glyphIcon ? <Icon name={glyphIcon} size={s.glyph} strokeWidth={2.5} />
+      : glyphText ? <span>{String(glyphText).slice(0, 1)}</span> : null}
+  </span>;
+
+  const insideStyle = (side) => ({ position: "absolute", top: 0, bottom: 0, [side]: s.pad + 4, display: "flex", alignItems: "center", fontSize: s.inside, lineHeight: 1, fontWeight: 600, fontFamily: "var(--font-sans)", letterSpacing: ".2px", color: "var(--on-accent)", transition: "opacity 160ms ease-out", pointerEvents: "none", whiteSpace: "nowrap" });
+
+  const pill = <span role="switch" aria-checked={checked} aria-busy={loading || undefined} aria-disabled={disabled || undefined} tabIndex={inert ? -1 : 0} onClick={flip}
+    onKeyDown={e => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); flip(); } }}
+    style={{ position: "relative", display: "inline-block", width: w, height: s.h, borderRadius: "var(--radius-full)", background: track, transition: "background 160ms ease-out", cursor: inert ? (loading ? "progress" : "not-allowed") : "pointer", flexShrink: 0, verticalAlign: "middle", outline: "none" }}>
+    {hasInside && <span style={{ ...insideStyle("left"), opacity: checked ? 1 : 0 }}>{insideOn}</span>}
+    {hasInside && <span style={{ ...insideStyle("right"), opacity: checked ? 0 : 1 }}>{insideOff}</span>}
+    {knob}
+  </span>;
+
+  if (single) return <span style={{ display: "inline-flex", alignItems: "center", gap: 8, opacity: disabled ? .5 : 1, ...style }}>{pill}<span onClick={flip} style={{ fontSize: s.label, lineHeight: 1, fontFamily: "var(--font-sans)", fontWeight: 500, color: "var(--text-body)", cursor: inert ? "default" : "pointer", userSelect: "none" }}>{label}</span></span>;
+  if (labelOn == null && labelOff == null) return <span style={{ display: "inline-flex", alignItems: "center", opacity: disabled ? .5 : 1, ...style }}>{pill}</span>;
+
+  const cap = (text, active) => text == null ? null : <span style={{ fontSize: s.label, lineHeight: 1, fontFamily: "var(--font-sans)", fontWeight: active ? 500 : 400, color: active ? "var(--text-heading)" : "var(--text-muted)", transition: "color 160ms ease-out", cursor: inert ? "default" : "pointer", userSelect: "none" }} onClick={flip}>{text}</span>;
+  return <span style={{ display: "inline-flex", alignItems: "center", gap: 8, opacity: disabled ? .5 : 1, ...style }}>
+    {cap(labelOff, !checked)}{pill}{cap(labelOn, checked)}
+  </span>;
 }
+
+export default Switch;

package/components/forms/Switch.vue

@@ -1,16 +1,61 @@
 <script setup>
-import { computed } from 'vue'
-// Switch — 34×20 (sm: 28×16) track, knob.
-const dims = { sm: { w: 28, h: 16, knob: 12 }, md: { w: 34, h: 20, knob: 16 } }
-const props = defineProps({ modelValue: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
-const emit = defineEmits(['update:modelValue'])
-const d = computed(() => dims[props.size] || dims.md)
+import { ref, computed, onBeforeUnmount } from 'vue'
+import Icon from '../icons/Icon.vue'
+// Switch — 36×20 pill (lg 44×24), 16/20px knob, 160ms slide. v-model:checked.
+// tone "primary" | "semantic" (red off → green on); onColor/offColor override.
+// knobIcon / knobText: string | { on, off } — knobText is ONE letter or ONE CJK char.
+// insideOn / insideOff: text inside the pill opposite the knob. labelOn / labelOff: captions beside the pill.
+// loading: controlled spinner. beforeChange(next) → Promise|boolean gates the flip and shows loading meanwhile.
+const props = defineProps({
+  checked: Boolean, disabled: Boolean, loading: Boolean,
+  size: { type: String, default: 'md' }, tone: { type: String, default: 'primary' },
+  onColor: String, offColor: String,
+  knobIcon: [String, Object], knobText: [String, Object],
+  insideOn: String, insideOff: String, label: String, labelOn: String, labelOff: String,
+  beforeChange: Function, style: Object
+})
+const emit = defineEmits(['update:checked', 'change'])
+const SIZES = { sm: { w: 28, h: 16, knob: 12, pad: 2, inside: 9, glyph: 8 }, md: { w: 36, h: 20, knob: 16, pad: 2, inside: 10, glyph: 10 }, lg: { w: 44, h: 24, knob: 20, pad: 2, inside: 11, glyph: 12 } }
+const s = computed(() => SIZES[props.size] || SIZES.md)
+const busy = ref(false); let alive = true; onBeforeUnmount(() => { alive = false })
+const isLoading = computed(() => props.loading || busy.value)
+const inert = computed(() => props.disabled || isLoading.value)
+const hasInside = computed(() => props.insideOn != null || props.insideOff != null)
+const width = computed(() => { if (!hasInside.value) return s.value.w; const n = Math.max((props.insideOn || '').length, (props.insideOff || '').length); return s.value.w + Math.max(0, n * (s.value.inside * .68) + 6 - (s.value.w - s.value.knob - s.value.pad * 2)) })
+const track = computed(() => props.checked ? (props.onColor || (props.tone === 'semantic' ? 'var(--success)' : 'var(--action-primary)')) : (props.offColor || (props.tone === 'semantic' ? 'var(--danger)' : 'var(--border-strong)')))
+const pick = (v) => v && typeof v === 'object' ? (props.checked ? v.on : v.off) : v
+const glyphIcon = computed(() => pick(props.knobIcon))
+const glyphText = computed(() => { const t = pick(props.knobText); return t ? String(t).slice(0, 1) : '' })
+const knobX = computed(() => props.checked ? width.value - s.value.knob - s.value.pad : s.value.pad)
+async function flip() {
+  if (inert.value) return
+  const next = !props.checked
+  if (props.beforeChange) {
+    busy.value = true; let ok = false
+    try { ok = await props.beforeChange(next) } catch (e) { ok = false }
+    if (!alive) return
+    busy.value = false
+    if (!ok) return
+  }
+  emit('update:checked', next); emit('change', next)
+}
+const insideStyle = (side, on) => ({ position: 'absolute', top: 0, bottom: 0, [side]: (s.value.pad + 4) + 'px', display: 'flex', alignItems: 'center', fontSize: s.value.inside + 'px', lineHeight: 1, fontWeight: 600, fontFamily: 'var(--font-sans)', letterSpacing: '.2px', color: 'var(--on-accent)', transition: 'opacity 160ms ease-out', pointerEvents: 'none', whiteSpace: 'nowrap', opacity: on === props.checked ? 1 : 0 })
+const cap = (active) => ({ fontSize: props.size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 1, fontFamily: 'var(--font-sans)', fontWeight: active ? 500 : 400, color: active ? 'var(--text-heading)' : 'var(--text-muted)', transition: 'color 160ms ease-out', cursor: inert.value ? 'default' : 'pointer', userSelect: 'none' })
 </script>
 <template>
-  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 8, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('update:modelValue', !modelValue)">
-    <span :style="{ width: d.w + 'px', height: d.h + 'px', borderRadius: 'var(--radius-full)', background: modelValue ? 'var(--action-primary)' : 'var(--track)', position: 'relative', flexShrink: 0, transition: 'var(--t-hover)' }">
-      <span :style="{ position: 'absolute', top: '2px', left: (modelValue ? d.w - d.knob - 2 : 2) + 'px', width: d.knob + 'px', height: d.knob + 'px', borderRadius: 'var(--radius-full)', background: 'var(--on-accent)', boxShadow: '0 1px 2px rgba(0,0,0,.2)', transition: 'left var(--dur-fast) var(--ease-out)' }" />
+  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: '8px', opacity: disabled ? .5 : 1, ...style }">
+    <span v-if="labelOff != null" :style="cap(!checked)" @click="flip">{{ labelOff }}</span>
+    <span role="switch" :aria-checked="checked" :aria-busy="isLoading || undefined" :aria-disabled="disabled || undefined" :tabindex="inert ? -1 : 0" @click="flip" @keydown.space.prevent="flip" @keydown.enter.prevent="flip"
+      :style="{ position: 'relative', display: 'inline-block', width: width + 'px', height: s.h + 'px', borderRadius: 'var(--radius-full)', background: track, transition: 'background 160ms ease-out', cursor: inert ? (isLoading ? 'progress' : 'not-allowed') : 'pointer', flexShrink: 0, verticalAlign: 'middle', outline: 'none' }">
+      <span v-if="hasInside" :style="insideStyle('left', true)">{{ insideOn }}</span>
+      <span v-if="hasInside" :style="insideStyle('right', false)">{{ insideOff }}</span>
+      <span aria-hidden="true" :style="{ position: 'absolute', top: s.pad + 'px', left: knobX + 'px', width: s.knob + 'px', height: s.knob + 'px', borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', boxShadow: '0 1px 2px rgba(0,0,0,.18)', transition: 'left 160ms ease-out', display: 'flex', alignItems: 'center', justifyContent: 'center', color: track, fontSize: s.glyph + 'px', lineHeight: 1, fontWeight: 600, fontFamily: 'var(--font-sans)', overflow: 'hidden' }">
+        <span v-if="isLoading" :style="{ width: s.glyph + 'px', height: s.glyph + 'px', borderRadius: '50%', border: '1.5px solid ' + track, borderRightColor: 'transparent', animation: 'kb-spin 720ms linear infinite' }"></span>
+        <Icon v-else-if="glyphIcon" :name="glyphIcon" :size="s.glyph" :stroke-width="2.5" />
+        <span v-else-if="glyphText">{{ glyphText }}</span>
+      </span>
     </span>
-    <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
-  </label>
+    <span v-if="labelOn != null" :style="cap(checked)" @click="flip">{{ labelOn }}</span>
+    <span v-if="label != null && labelOn == null && labelOff == null" :style="{ fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 1, fontFamily: 'var(--font-sans)', fontWeight: 500, color: 'var(--text-body)', cursor: inert ? 'default' : 'pointer', userSelect: 'none' }" @click="flip">{{ label }}</span>
+  </span>
 </template>

package/components/forms/Textarea.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { inputBase } from './input-base.js'
+// Multiline textarea, r8, default 90px tall. v-model. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit).
+const props = defineProps({ modelValue: String, rows: { type: Number, default: 4 }, error: Boolean, disabled: Boolean, showCount: Boolean, maxLength: Number, style: Object })
+defineEmits(['update:modelValue'])
+const focus = ref(false)
+const len = computed(() => (props.modelValue || '').length)
+const over = computed(() => props.maxLength != null && len.value > props.maxLength)
+const s = computed(() => ({ ...inputBase, height: '90px', resize: 'vertical', paddingBottom: props.showCount ? '22px' : '8px',
+  ...((props.error || over.value) ? { borderColor: 'var(--danger)' } : null),
+  ...(focus.value && !props.disabled ? { borderColor: (props.error || over.value) ? 'var(--danger)' : 'var(--focus-border)', boxShadow: `0 0 0 2px ${(props.error || over.value) ? 'var(--danger-bg)' : 'var(--focus-ring)'}` } : null),
+  ...(props.disabled ? { opacity: .5, cursor: 'not-allowed', background: 'var(--bg-inset)' } : null), ...props.style }))
+</script>
+<template>
+  <div style="position:relative">
+    <textarea :rows="rows" :disabled="disabled" :maxlength="showCount ? undefined : maxLength" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @focus="focus = true" @blur="focus = false" :style="s"></textarea>
+    <span v-if="showCount" :style="{ position: 'absolute', right: '10px', bottom: '7px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: over ? 'var(--danger)' : 'var(--text-muted)' }">{{ len }}{{ maxLength != null ? `/${maxLength}` : '' }}</span>
+  </div>
+</template>

package/components/forms/forms.prompt.md

@@ -15,9 +15,12 @@ Form controls, split by component (each with its own specimen card covering defa
 Everything is 12px text in 36px controls; readOnly inputs go #fafafa; disabled = 50% opacity; error = red border + red helper text via `Field`'s `error` prop.
 
 
-`Switch` / `Radio` / `RadioGroup` (additions, not in the source file):
+`Switch` / `Radio` / `RadioGroup` (additions, not in the source file). Switch: default 36×20 blue-on / border-strong-off; `size="lg"` (44×24) whenever the knob carries a glyph — `knobIcon` (string or `{on,off}`) or `knobText` (ONE letter / ONE CJK char); `insideOn`/`insideOff` put 1–3 characters inside the pill; `labelOn`/`labelOff` put captions on both sides with the active one in text-heading; `tone="semantic"` = danger off → success on, only for states with consequence (a live integration, a kill switch); `beforeChange` async-gates the flip with a spinner in the knob, `loading` does the same under your control.
 
 ```jsx
 <Switch label="Debug Mode" checked={on} onChange={setOn}/>
+<Switch size="lg" tone="semantic" knobIcon={{on:"check",off:"x"}} checked={live} beforeChange={n=>api.setLive(n)}/>
+<Switch labelOff="Monthly" labelOn="Annual" checked={annual} onChange={setAnnual}/>
 <RadioGroup options={["New","Overwrite","Skip"]} value={v} onChange={setV}/>
+<RadioGroup variant="cards" row value={m} onChange={setM} options={[{label:"Merge",value:"merge",description:"Keep target values, add new keys"},{label:"Overwrite",value:"overwrite",description:"Target takes source values"}]}/>
 ```

package/components/forms/input-base.js

@@ -0,0 +1,3 @@
+// Shared base style for text-like controls (Input, Textarea, Combobox, DatePicker).
+// Lives in a plain module because <script setup> cannot export values.
+export const inputBase = { height: 'var(--h-input)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-control)', background: 'var(--bg-surface)', padding: '8px 12px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-primary)', outline: 'none', boxSizing: 'border-box', width: '100%' }

package/components/index.d.ts

@@ -65,6 +65,7 @@ export * from "./forms/Field";
 export * from "./forms/Input";
 export * from "./forms/MultiSelect";
 export * from "./forms/NumberStepper";
+export * from "./forms/Radio";
 export * from "./forms/SearchInput";
 export * from "./forms/Select";
 export * from "./forms/Slider";

package/components/index.js

@@ -80,10 +80,11 @@ export { Field } from "./forms/Field.jsx";
 export { Input, Textarea } from "./forms/Input.jsx";
 export { MultiSelect } from "./forms/MultiSelect.jsx";
 export { NumberStepper } from "./forms/NumberStepper.jsx";
+export { Radio, RadioGroup } from "./forms/Radio.jsx";
 export { SearchInput } from "./forms/SearchInput.jsx";
 export { Select } from "./forms/Select.jsx";
 export { Slider } from "./forms/Slider.jsx";
-export { Radio, RadioGroup, Switch } from "./forms/Switch.jsx";
+export { Switch } from "./forms/Switch.jsx";
 
 /* icons/ */
 export { ICON_PATHS, Icon } from "./icons/Icon.jsx";

package/components/navigation/Breadcrumb.vue

@@ -62,28 +62,6 @@ const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(
   </nav>
 </template>
 
-<!-- ThemeToggle — flips <html data-theme> and persists to localStorage("kb-theme"). Pass `dark` (v-model) to control it externally. -->
-<!--
-<script setup name="ThemeToggle">
-import { ref, computed, watch, onMounted } from 'vue'
-import Icon from '../icons/Icon.vue'
-const props = defineProps({ size: { type: Number, default: 34 }, dark: { type: Boolean, default: null }, style: Object })
-const emit = defineEmits(['update:dark'])
-const darkState = ref(false)
-const dark = computed(() => props.dark != null ? props.dark : darkState.value)
-const hover = ref(false)
-onMounted(() => { darkState.value = document.documentElement.dataset.theme === 'dark' })
-watch(dark, (v) => { if (props.dark != null) return; document.documentElement.dataset.theme = v ? 'dark' : 'light'; try { localStorage.setItem('kb-theme', v ? 'dark' : 'light') } catch (e) {} })
-function toggle() { if (props.dark != null) emit('update:dark', !dark.value); else darkState.value = !darkState.value }
-</script>
-<template>
-  <button type="button" :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'" @click="toggle" @mouseenter="hover = true" @mouseleave="hover = false"
-    :style="{ width: size, height: size, borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: hover ? 'var(--bg-hover)' : 'transparent', color: 'var(--text-body)', padding: 0, transition: 'var(--t-hover)', ...style }">
-    <Icon :name="dark ? 'sparkles' : 'moon'" :size="18" />
-  </button>
-</template>
--->
-
 <!-- applyStoredTheme() — reads the persisted theme and applies it before first paint. Call once at app start (main.js): -->
 <!--
 export function applyStoredTheme() {

package/components/navigation/PageHeading.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({ title: String, subtitle: String, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column', gap: 4, ...style }">
+    <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:var(--tracking-lg);color:var(--text-primary)">{{ title }}</span>
+    <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-secondary)">{{ subtitle }}</span>
+  </div>
+</template>

package/components/navigation/PageToolbar.vue

@@ -0,0 +1,15 @@
+<script setup>
+import IconButton from '../buttons/IconButton.vue'
+defineProps({ title: String, status: { type: String, default: '• Editing' }, showBack: Boolean, style: Object })
+const emit = defineEmits(['back'])
+</script>
+<template>
+  <div :style="{ height: 'var(--topbar-h)', background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', boxSizing: 'border-box', flexShrink: 0, ...style }">
+    <div style="display:flex;align-items:center;gap:8px">
+      <IconButton v-if="showBack" icon="chevron-left" size="md" @click="emit('back')" />
+      <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
+      <span v-if="status" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-muted);margin-left:6px">{{ status }}</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:8px"><slot name="actions" /></div>
+  </div>
+</template>

package/components/navigation/ThemeToggle.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import Icon from '../icons/Icon.vue'
+const props = defineProps({ size: { type: Number, default: 34 }, dark: { type: Boolean, default: null }, style: Object })
+const emit = defineEmits(['update:dark'])
+const darkState = ref(false)
+const dark = computed(() => props.dark != null ? props.dark : darkState.value)
+const hover = ref(false)
+onMounted(() => { darkState.value = document.documentElement.dataset.theme === 'dark' })
+watch(dark, (v) => { if (props.dark != null) return; document.documentElement.dataset.theme = v ? 'dark' : 'light'; try { localStorage.setItem('kb-theme', v ? 'dark' : 'light') } catch (e) {} })
+function toggle() { if (props.dark != null) emit('update:dark', !dark.value); else darkState.value = !darkState.value }
+</script>
+<template>
+  <button type="button" :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'" @click="toggle" @mouseenter="hover = true" @mouseleave="hover = false"
+    :style="{ width: size, height: size, borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: hover ? 'var(--bg-hover)' : 'transparent', color: 'var(--text-body)', padding: 0, transition: 'var(--t-hover)', ...style }">
+    <Icon :name="dark ? 'sparkles' : 'moon'" :size="18" />
+  </button>
+</template>

package/components/navigation/TopBar.vue

@@ -17,35 +17,3 @@ const emit = defineEmits(['search'])
     </div>
   </header>
 </template>
-
-<!-- PageToolbar — editor toolbar: back chevron, 14px/600 title, "• Editing" status, right action slot. -->
-<!--
-<script setup name="PageToolbar">
-import IconButton from '../buttons/IconButton.vue'
-defineProps({ title: String, status: { type: String, default: '• Editing' }, showBack: Boolean, style: Object })
-const emit = defineEmits(['back'])
-</script>
-<template>
-  <div :style="{ height: 'var(--topbar-h)', background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', boxSizing: 'border-box', flexShrink: 0, ...style }">
-    <div style="display:flex;align-items:center;gap:8px">
-      <IconButton v-if="showBack" icon="chevron-left" size="md" @click="emit('back')" />
-      <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
-      <span v-if="status" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-muted);margin-left:6px">{{ status }}</span>
-    </div>
-    <div style="display:flex;align-items:center;gap:8px"><slot name="actions" /></div>
-  </div>
-</template>
--->
-
-<!-- PageHeading — page heading block: 15px/500 title + 13px muted subtitle. -->
-<!--
-<script setup name="PageHeading">
-defineProps({ title: String, subtitle: String, style: Object })
-</script>
-<template>
-  <div :style="{ display: 'flex', flexDirection: 'column', gap: 4, ...style }">
-    <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:var(--tracking-lg);color:var(--text-primary)">{{ title }}</span>
-    <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-secondary)">{{ subtitle }}</span>
-  </div>
-</template>
--->

package/components/pipeline/NodeCard.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref } from 'vue'
 import Icon from '../icons/Icon.vue'
-import { IconTile, StatusBadge } from '../display/Badge.vue'
+import IconTile from '../display/IconTile.vue'
+import StatusBadge from '../display/StatusBadge.vue'
 /**
  * Canvas node card — 220×90, r16, soft shadow. Selected = blue border + blue-100 ring.
  * badge: "error" | "warning" | "clock" overlay on the icon tile.

package/components/pipeline/PaletteItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { IconTile } from '../display/Badge.vue'
+import IconTile from '../display/IconTile.vue'
 // Palette grid tile — 40px tinted icon + 10px two-line label.
 defineProps({ icon: String, hue: String, label: String, style: Object })
 defineEmits(['click'])

package/components/pipeline/PalettePanel.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconTile } from "../display/Badge.jsx";
 import { ViewToggle } from "../tabs/ViewToggle.jsx";
+import { PIPELINE_CATALOG } from "./pipeline-catalog.js";
 
 /** Palette grid tile — 40px tinted icon + 10px two-line label. */
 export function PaletteItem({ icon, hue, label, onClick, style }) {
@@ -27,14 +28,7 @@ export function PaletteListItem({ icon, hue, label, onClick, style }) {
   );
 }
 
-/** The full component set of the pipeline editor, verbatim from the file. */
-export const PIPELINE_CATALOG = [
-  { label: "Data Source", icon: "table", hue: "source", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
-  { label: "Data Join", icon: "text-search", hue: "join", items: [{ label: "Lookup Data", icon: "text-search" }, { label: "Association Match", icon: "shuffle" }] },
-  { label: "Data Transformation", icon: "sliders-horizontal", hue: "transform", items: [{ label: "Field Value Calculation", icon: "sliders-horizontal" }, { label: "Field Split", icon: "split" }, { label: "Row to Column", icon: "arrow-right-left" }, { label: "Column to Row", icon: "menu" }, { label: "Multi-Condition Judge", icon: "funnel" }, { label: "Regional Calculation", icon: "chart-no-axes-column" }, { label: "Advanced Transformation", icon: "trending-up" }, { label: "JS Enhanced Processing", icon: "code" }] },
-  { label: "Data Merge", icon: "database", hue: "merge", items: [{ label: "Group Calculation", icon: "database" }, { label: "Concat Merge", icon: "merge" }] },
-  { label: "Data Output", icon: "table", hue: "output", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
-];
+export { PIPELINE_CATALOG };
 
 /** 240px "Components" palette panel with list/grid toggle and collapsible hued categories. */
 export function PalettePanel({ catalog = PIPELINE_CATALOG, height = "100%", onPick, style }) {