@keyfunc/keybricks-ds 1.0.2 → 1.0.4

package/components/display/AvatarGroup.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { computed } from 'vue'
+import Avatar from './Avatar.vue'
+const props = defineProps({ names: { type: Array, default: () => [] }, size: { type: Number, default: 24 }, max: { type: Number, default: 4 }, style: Object })
+const shown = computed(() => props.names.slice(0, props.max))
+const rest = computed(() => props.names.length - shown.value.length)
+</script>
+<template>
+  <div :style="{ display: 'flex', alignItems: 'center', ...style }">
+    <Avatar v-for="(n, i) in shown" :key="n + i" :name="n" :size="size" :style="{ marginLeft: i ? -8 : 0, boxShadow: 'var(--ring-surface)' }" />
+    <span v-if="rest > 0" :style="{ marginLeft: -8, width: size, height: size, borderRadius: 'var(--radius-full)', background: 'var(--bg-active)', color: 'var(--text-secondary)', boxShadow: 'var(--ring-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontSize: Math.max(9, Math.round(size * .38)) }">+{{ rest }}</span>
+  </div>
+</template>

package/components/display/Badge.vue

@@ -1,20 +1,4 @@
 <script setup>
-import { computed } from 'vue'
-import Icon from '../icons/Icon.vue'
-const badgeTones = { success: 'var(--success)', danger: 'var(--danger)', warning: 'var(--warning)', pending: 'var(--dot-neutral)', info: 'var(--action-primary)' }
-// StatusBadge — circular status badge with white ring (node error/warning dots, step icons).
-const props = defineProps({ tone: { type: String, default: 'danger' }, icon: String, size: { type: Number, default: 20 }, ring: { type: Boolean, default: true }, style: Object })
-const iconSize = computed(() => Math.round(props.size * .6))
-</script>
-<template>
-  <span :style="{ width: size, height: size, borderRadius: 'var(--radius-full)', background: badgeTones[tone], boxShadow: ring ? 'var(--ring-surface)' : 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)', flexShrink: 0, ...style }">
-    <Icon v-if="icon" :name="icon" :size="iconSize" :stroke-width="2.5" />
-  </span>
-</template>
-
-<!-- Badge — inline tinted text badge (table statuses: Completed / Failed / Partial). -->
-<!--
-<script setup name="Badge">
 const tones = {
   success: { background: 'var(--success-bg)', color: 'var(--success-text)' },
   danger: { background: 'var(--danger-bg)', color: 'var(--danger-text)' },
@@ -27,21 +11,3 @@ defineProps({ tone: { type: String, default: 'neutral' }, style: Object })
 <template>
   <span :style="{ display: 'inline-flex', alignItems: 'center', height: 20, padding: '0 8px', borderRadius: 'var(--radius-full)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-xs)', lineHeight: 1, letterSpacing: 'var(--tracking-xs)', ...tones[tone], ...style }"><slot /></span>
 </template>
--->
-
-<!-- IconTile — category icon tile — the signature tinted square. kind: palette 40/r14 · node 48/r16 · row 32/r8 (hairline). -->
-<!--
-<script setup name="IconTile">
-import { computed } from 'vue'
-import Icon from '../icons/Icon.vue'
-const dims = { palette: { box: 40, r: 'var(--radius-tile)', icon: 18 }, node: { box: 48, r: 'var(--radius-node)', icon: 22 }, row: { box: 32, r: 'var(--radius-md)', icon: 16 } }
-const props = defineProps({ icon: String, hue: { type: String, default: 'source' }, kind: { type: String, default: 'palette' }, style: Object })
-const t = computed(() => dims[props.kind])
-const tinted = computed(() => props.kind !== 'row')
-</script>
-<template>
-  <span :style="{ width: t.box, height: t.box, borderRadius: t.r, background: tinted ? `var(--cat-${hue}-bg)` : 'var(--bg-surface)', border: tinted ? 'none' : '1px solid var(--border-control)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: tinted ? `var(--cat-${hue})` : 'var(--text-body)', flexShrink: 0, boxSizing: 'border-box', ...style }">
-    <Icon :name="icon" :size="t.icon" :stroke-width="2" />
-  </span>
-</template>
--->

package/components/display/Card.vue

@@ -11,18 +11,3 @@ defineProps({ title: String, dense: Boolean, pad: { type: Boolean, default: true
     <slot />
   </div>
 </template>
-
-<!-- StatCard — dashboard stat card: muted 13px label + light 24px number + optional chart slot. -->
-<!--
-<script setup name="StatCard">
-import Card from './Card.vue'
-defineProps({ label: String, value: [String, Number], dense: Boolean, style: Object })
-</script>
-<template>
-  <Card :dense="dense" :style="{ display: 'flex', flexDirection: 'column', gap: 12, ...style }">
-    <span 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)">{{ label }}</span>
-    <slot />
-    <span v-if="value != null" style="font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num);line-height:var(--leading-num);letter-spacing:var(--tracking-num);color:var(--text-primary)">{{ value }}</span>
-  </Card>
-</template>
--->

package/components/display/Donut.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({ size: { type: Number, default: 128 }, thickness: { type: Number, default: 7.68 }, segments: Array, value: { type: Number, default: 75 }, label: [String, Number], style: Object })
+const R = computed(() => props.size / 2 - props.thickness / 2 - props.size * .02)
+const C = computed(() => 2 * Math.PI * R.value)
+const segs = computed(() => props.segments || [{ value: props.value, color: 'var(--chart-blue)' }])
+const arcs = computed(() => { let offset = 0; return segs.value.map(s => { const len = (s.value / 100) * C.value; const a = { ...s, len, offset }; offset += len; return a }) })
+</script>
+<template>
+  <div :style="{ position: 'relative', width: size, height: size, ...style }">
+    <svg :width="size" :height="size" style="transform:rotate(-90deg)">
+      <circle :cx="size / 2" :cy="size / 2" :r="R" fill="none" stroke="var(--track)" :stroke-width="thickness" />
+      <circle v-for="(s, i) in arcs" :key="i" :cx="size / 2" :cy="size / 2" :r="R" fill="none" :stroke="s.color" :stroke-width="thickness" :stroke-dasharray="`${s.len} ${C - s.len}`" :stroke-dashoffset="-s.offset" stroke-linecap="butt" />
+    </svg>
+    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:var(--weight-light);font-size:20px;letter-spacing:var(--tracking-xl);color:var(--text-primary)">{{ label != null ? label : `${value}%` }}</div>
+  </div>
+</template>

package/components/display/IconTile.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+const dims = { palette: { box: 40, r: 'var(--radius-tile)', icon: 18 }, node: { box: 48, r: 'var(--radius-node)', icon: 22 }, row: { box: 32, r: 'var(--radius-md)', icon: 16 } }
+const props = defineProps({ icon: String, hue: { type: String, default: 'source' }, kind: { type: String, default: 'palette' }, style: Object })
+const t = computed(() => dims[props.kind])
+const tinted = computed(() => props.kind !== 'row')
+</script>
+<template>
+  <span :style="{ width: t.box, height: t.box, borderRadius: t.r, background: tinted ? `var(--cat-${hue}-bg)` : 'var(--bg-surface)', border: tinted ? 'none' : '1px solid var(--border-control)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: tinted ? `var(--cat-${hue})` : 'var(--text-body)', flexShrink: 0, boxSizing: 'border-box', ...style }">
+    <Icon :name="icon" :size="t.icon" :stroke-width="2" />
+  </span>
+</template>

package/components/display/MiniBars.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({ bars: { type: Array, default: () => [40, 65, 50, 80, 60, 90, 70] }, width: { type: Number, default: 248 }, height: { type: Number, default: 96 }, color: { type: String, default: 'var(--chart-blue)' }, style: Object })
+const gap = 6
+const bw = computed(() => (props.width - gap * (props.bars.length - 1)) / props.bars.length)
+</script>
+<template>
+  <svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" :style="{ display: 'block', ...style }">
+    <rect v-for="(b, i) in bars" :key="i" :x="i * (bw + gap)" :y="height - (b / 100) * height" :width="bw" :height="(b / 100) * height" rx="2" :fill="color" opacity=".85" />
+  </svg>
+</template>

package/components/display/ProgressBar.vue

@@ -13,57 +13,3 @@ defineProps({ label: String, value: { type: Number, default: 50 }, color: { type
     </div>
   </div>
 </template>
-
-<!-- Donut — ring/donut chart. segments: [{value, color}]; centered light numeral. -->
-<!--
-<script setup name="Donut">
-import { computed } from 'vue'
-const props = defineProps({ size: { type: Number, default: 128 }, thickness: { type: Number, default: 7.68 }, segments: Array, value: { type: Number, default: 75 }, label: [String, Number], style: Object })
-const R = computed(() => props.size / 2 - props.thickness / 2 - props.size * .02)
-const C = computed(() => 2 * Math.PI * R.value)
-const segs = computed(() => props.segments || [{ value: props.value, color: 'var(--chart-blue)' }])
-const arcs = computed(() => { let offset = 0; return segs.value.map(s => { const len = (s.value / 100) * C.value; const a = { ...s, len, offset }; offset += len; return a }) })
-</script>
-<template>
-  <div :style="{ position: 'relative', width: size, height: size, ...style }">
-    <svg :width="size" :height="size" style="transform:rotate(-90deg)">
-      <circle :cx="size / 2" :cy="size / 2" :r="R" fill="none" stroke="var(--track)" :stroke-width="thickness" />
-      <circle v-for="(s, i) in arcs" :key="i" :cx="size / 2" :cy="size / 2" :r="R" fill="none" :stroke="s.color" :stroke-width="thickness" :stroke-dasharray="`${s.len} ${C - s.len}`" :stroke-dashoffset="-s.offset" stroke-linecap="butt" />
-    </svg>
-    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:var(--weight-light);font-size:20px;letter-spacing:var(--tracking-xl);color:var(--text-primary)">{{ label != null ? label : `${value}%` }}</div>
-  </div>
-</template>
--->
-
-<!-- AreaChart — area line chart (Revenue Trend): 1.22px blue line + fading gradient fill. points: 0–100 values. -->
-<!--
-<script setup name="AreaChart">
-import { computed } from 'vue'
-const props = defineProps({ points: { type: Array, default: () => [65, 75, 60, 85, 70, 90, 85, 95, 100] }, width: { type: Number, default: 350 }, height: { type: Number, default: 128 }, color: { type: String, default: 'var(--chart-blue)' }, style: Object })
-const gid = 'g' + Math.round(Math.random() * 1e6)
-const step = computed(() => props.width / (props.points.length - 1))
-const line = computed(() => props.points.map((p, i) => `${i ? 'L' : 'M'} ${i * step.value} ${props.height - (p / 100) * props.height * .48 - props.height * .5}`).join(' '))
-</script>
-<template>
-  <svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" :style="{ display: 'block', ...style }">
-    <defs><linearGradient :id="gid" x1="0" y1="0" x2="0" y2="1"><stop offset="0" :stop-color="color" stop-opacity=".3" /><stop offset="1" :stop-color="color" stop-opacity="0" /></linearGradient></defs>
-    <path :d="`${line} L ${width} ${height} L 0 ${height} Z`" :fill="`url(#${gid})`" />
-    <path :d="line" fill="none" :stroke="color" stroke-width="1.22" />
-  </svg>
-</template>
--->
-
-<!-- MiniBars — mini bar chart used in stat cards. bars: 0–100 values. -->
-<!--
-<script setup name="MiniBars">
-import { computed } from 'vue'
-const props = defineProps({ bars: { type: Array, default: () => [40, 65, 50, 80, 60, 90, 70] }, width: { type: Number, default: 248 }, height: { type: Number, default: 96 }, color: { type: String, default: 'var(--chart-blue)' }, style: Object })
-const gap = 6
-const bw = computed(() => (props.width - gap * (props.bars.length - 1)) / props.bars.length)
-</script>
-<template>
-  <svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" :style="{ display: 'block', ...style }">
-    <rect v-for="(b, i) in bars" :key="i" :x="i * (bw + gap)" :y="height - (b / 100) * height" :width="bw" :height="(b / 100) * height" rx="2" :fill="color" opacity=".85" />
-  </svg>
-</template>
--->

package/components/display/StatCard.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Card from './Card.vue'
+defineProps({ label: String, value: [String, Number], dense: Boolean, style: Object })
+</script>
+<template>
+  <Card :dense="dense" :style="{ display: 'flex', flexDirection: 'column', gap: 12, ...style }">
+    <span 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)">{{ label }}</span>
+    <slot />
+    <span v-if="value != null" style="font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num);line-height:var(--leading-num);letter-spacing:var(--tracking-num);color:var(--text-primary)">{{ value }}</span>
+  </Card>
+</template>

package/components/display/StatusBadge.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+// Circular status badge with white ring (node error/warning dots, step icons).
+const badgeTones = { success: 'var(--success)', danger: 'var(--danger)', warning: 'var(--warning)', pending: 'var(--dot-neutral)', info: 'var(--action-primary)' }
+const props = defineProps({ tone: { type: String, default: 'danger' }, icon: String, size: { type: Number, default: 20 }, ring: { type: Boolean, default: true }, style: Object })
+</script>
+<template>
+  <span :style="{ width: size + 'px', height: size + 'px', borderRadius: 'var(--radius-full)', background: badgeTones[tone], boxShadow: ring ? 'var(--ring-surface)' : 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)', flexShrink: 0, ...style }">
+    <Icon v-if="icon" :name="icon" :size="Math.round(size * .6)" :stroke-width="2.5" />
+  </span>
+</template>

package/components/feedback/ActivityItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconTile } from '../display/Badge.vue'
+import IconTile from '../display/Badge.vue'
 // Activity feed row: 32px icon tile + 13px/500 title + 12px meta + optional right action.
 defineProps({ icon: { type: String, default: 'file-text' }, title: String, meta: String, action: String, style: Object })
 </script>
@@ -13,34 +13,3 @@ defineProps({ icon: { type: String, default: 'file-text' }, title: String, meta:
     <span v-if="action" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);color:var(--text-secondary);cursor:pointer">{{ action }}</span>
   </div>
 </template>
-
-<!-- DotActivity — compact dot activity row (Recent Activities card): 8px status dot + 12px text + 11px time. -->
-<!--
-<script setup name="DotActivity">
-import { computed } from 'vue'
-const tonesMap = { success: 'var(--success)', warning: 'var(--warning)', danger: 'var(--danger)', info: 'var(--action-primary)', neutral: 'var(--dot-neutral)' }
-const props = defineProps({ tone: { type: String, default: 'success' }, text: String, time: String, style: Object })
-const dot = computed(() => tonesMap[props.tone])
-</script>
-<template>
-  <div :style="{ display: 'flex', gap: 8, alignItems: 'flex-start', ...style }">
-    <span :style="{ width: 8, height: 8, borderRadius: 'var(--radius-full)', background: dot, marginTop: 5, flexShrink: 0 }" />
-    <div style="display:flex;flex-direction:column;min-width:0">
-      <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ text }}</span>
-      <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted)">{{ time }}</span>
-    </div>
-  </div>
-</template>
--->
-
-<!-- LogViewer — mono log lines ("[14:30] Task started: Import") — Menlo 11px on inset panel. -->
-<!--
-<script setup name="LogViewer">
-defineProps({ lines: { type: Array, default: () => [] }, height: [Number, String], style: Object })
-</script>
-<template>
-  <div :style="{ background: 'var(--bg-inset)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 6, overflowY: 'auto', height, boxSizing: 'border-box', ...style }">
-    <span v-for="(l, i) in lines" :key="i" :style="{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', color: typeof l === 'object' ? (l.color || 'var(--text-body)') : 'var(--text-body)', whiteSpace: 'pre' }">{{ typeof l === 'object' ? l.text : l }}</span>
-  </div>
-</template>
--->

package/components/feedback/Alert.vue

@@ -21,39 +21,3 @@ const t = computed(() => alertTones[props.tone])
     <slot name="action" />
   </div>
 </template>
-
-<!-- EmptyState — 22px muted glyph, 13px/500 title, 12px hint, optional action. -->
-<!--
-<script setup name="EmptyState">
-import Icon from '../icons/Icon.vue'
-defineProps({ icon: { type: String, default: 'file-text' }, title: String, hint: String, style: Object })
-</script>
-<template>
-  <div :style="{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '40px 24px', textAlign: 'center', ...style }">
-    <span style="color:var(--text-muted);margin-bottom:6px"><Icon :name="icon" :size="22" :stroke-width="1.5" /></span>
-    <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-    <span v-if="hint" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary);max-width:320px">{{ hint }}</span>
-    <span v-if="$slots.action" style="padding-top:10px"><slot name="action" /></span>
-  </div>
-</template>
--->
-
-<!-- Skeleton — loading placeholder block. -->
-<!--
-<script setup name="Skeleton">
-defineProps({ width: { type: [String, Number], default: '100%' }, height: { type: [String, Number], default: 12 }, radius: { type: String, default: 'var(--radius-sm)' }, style: Object })
-</script>
-<template>
-  <span :style="{ display: 'block', width, height, borderRadius: radius, background: 'var(--skeleton)', animation: 'kb-pulse 1.4s var(--ease-in-out) infinite', ...style }" />
-</template>
--->
-
-<!-- Spinner — indeterminate spinner (task-running affordance). -->
-<!--
-<script setup name="Spinner">
-defineProps({ size: { type: Number, default: 16 }, color: { type: String, default: 'var(--action-primary)' }, style: Object })
-</script>
-<template>
-  <span :style="{ display: 'inline-block', width: size, height: size, borderRadius: 'var(--radius-full)', border: '2px solid var(--track)', borderTopColor: color, animation: 'kb-spin .7s linear infinite', ...style }" />
-</template>
--->

package/components/feedback/DotActivity.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { computed } from 'vue'
+const tonesMap = { success: 'var(--success)', warning: 'var(--warning)', danger: 'var(--danger)', info: 'var(--action-primary)', neutral: 'var(--dot-neutral)' }
+const props = defineProps({ tone: { type: String, default: 'success' }, text: String, time: String, style: Object })
+const dot = computed(() => tonesMap[props.tone])
+</script>
+<template>
+  <div :style="{ display: 'flex', gap: 8, alignItems: 'flex-start', ...style }">
+    <span :style="{ width: 8, height: 8, borderRadius: 'var(--radius-full)', background: dot, marginTop: 5, flexShrink: 0 }" />
+    <div style="display:flex;flex-direction:column;min-width:0">
+      <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ text }}</span>
+      <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted)">{{ time }}</span>
+    </div>
+  </div>
+</template>

package/components/feedback/EmptyState.vue

@@ -0,0 +1,12 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+defineProps({ icon: { type: String, default: 'file-text' }, title: String, hint: String, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '40px 24px', textAlign: 'center', ...style }">
+    <span style="color:var(--text-muted);margin-bottom:6px"><Icon :name="icon" :size="22" :stroke-width="1.5" /></span>
+    <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
+    <span v-if="hint" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary);max-width:320px">{{ hint }}</span>
+    <span v-if="$slots.action" style="padding-top:10px"><slot name="action" /></span>
+  </div>
+</template>

package/components/feedback/LogViewer.vue

@@ -0,0 +1,8 @@
+<script setup>
+defineProps({ lines: { type: Array, default: () => [] }, height: [Number, String], style: Object })
+</script>
+<template>
+  <div :style="{ background: 'var(--bg-inset)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 6, overflowY: 'auto', height, boxSizing: 'border-box', ...style }">
+    <span v-for="(l, i) in lines" :key="i" :style="{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', color: typeof l === 'object' ? (l.color || 'var(--text-body)') : 'var(--text-body)', whiteSpace: 'pre' }">{{ typeof l === 'object' ? l.text : l }}</span>
+  </div>
+</template>

package/components/feedback/Modal.vue

@@ -1,25 +1,4 @@
 <script setup>
-import { ref, computed } from 'vue'
-// Tooltip — hover tooltip — 11px, inverted surface, 6px offset. Wraps its children.
-const props = defineProps({ label: String, placement: { type: String, default: 'top' }, style: Object })
-const show = ref(false)
-const pos = computed(() => ({
-  top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 6 },
-  bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 6 },
-  left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 6 },
-  right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 6 },
-}[props.placement]))
-</script>
-<template>
-  <span :style="{ position: 'relative', display: 'inline-flex', ...style }" @mouseenter="show = true" @mouseleave="show = false">
-    <slot />
-    <span v-if="show" :style="{ position: 'absolute', zIndex: 'var(--z-tooltip)', whiteSpace: 'nowrap', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-md)', padding: '5px 8px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', boxShadow: 'var(--shadow-menu)', pointerEvents: 'none', animation: 'kb-fade-in var(--dur-fast) var(--ease-out)', ...pos }">{{ label }}</span>
-  </span>
-</template>
-
-<!-- Modal — centered modal dialog with scrim. width defaults to 440. -->
-<!--
-<script setup name="Modal">
 import IconButton from '../buttons/IconButton.vue'
 defineProps({ open: Boolean, title: String, subtitle: String, width: { type: Number, default: 440 }, style: Object })
 const emit = defineEmits(['close'])
@@ -39,27 +18,3 @@ const emit = defineEmits(['close'])
     </div>
   </div>
 </template>
--->
-
-<!-- Toast — single toast row. -->
-<!--
-<script setup name="Toast">
-import { computed } from 'vue'
-import Icon from '../icons/Icon.vue'
-import IconButton from '../buttons/IconButton.vue'
-const toastTones = { success: { icon: 'circle-check', color: 'var(--success-strong)' }, danger: { icon: 'triangle-alert', color: 'var(--danger)' }, warning: { icon: 'triangle-alert', color: 'var(--warning)' }, info: { icon: 'info', color: 'var(--action-primary)' } }
-const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, style: Object })
-const emit = defineEmits(['close'])
-const t = computed(() => toastTones[props.tone])
-</script>
-<template>
-  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: 10, minWidth: 280, maxWidth: 380, background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
-    <span :style="{ color: t.color, display: 'inline-flex', marginTop: 1 }"><Icon :name="t.icon" :size="16" /></span>
-    <div style="display:flex;flex-direction:column;flex:1;min-width:0">
-      <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ meta }}</span>
-    </div>
-    <IconButton v-if="dismissible" icon="x" size="xs" muted label="Dismiss" @click="emit('close')" />
-  </div>
-</template>
--->

package/components/feedback/Skeleton.vue

@@ -0,0 +1,6 @@
+<script setup>
+defineProps({ width: { type: [String, Number], default: '100%' }, height: { type: [String, Number], default: 12 }, radius: { type: String, default: 'var(--radius-sm)' }, style: Object })
+</script>
+<template>
+  <span :style="{ display: 'block', width, height, borderRadius: radius, background: 'var(--skeleton)', animation: 'kb-pulse 1.4s var(--ease-in-out) infinite', ...style }" />
+</template>

package/components/feedback/Spinner.vue

@@ -0,0 +1,6 @@
+<script setup>
+defineProps({ size: { type: Number, default: 16 }, color: { type: String, default: 'var(--action-primary)' }, style: Object })
+</script>
+<template>
+  <span :style="{ display: 'inline-block', width: size, height: size, borderRadius: 'var(--radius-full)', border: '2px solid var(--track)', borderTopColor: color, animation: 'kb-spin .7s linear infinite', ...style }" />
+</template>

package/components/feedback/Toast.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+import IconButton from '../buttons/IconButton.vue'
+const toastTones = { success: { icon: 'circle-check', color: 'var(--success-strong)' }, danger: { icon: 'triangle-alert', color: 'var(--danger)' }, warning: { icon: 'triangle-alert', color: 'var(--warning)' }, info: { icon: 'info', color: 'var(--action-primary)' } }
+const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, style: Object })
+const emit = defineEmits(['close'])
+const t = computed(() => toastTones[props.tone])
+</script>
+<template>
+  <div :style="{ display: 'flex', alignItems: 'flex-start', gap: 10, minWidth: 280, maxWidth: 380, background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
+    <span :style="{ color: t.color, display: 'inline-flex', marginTop: 1 }"><Icon :name="t.icon" :size="16" /></span>
+    <div style="display:flex;flex-direction:column;flex:1;min-width:0">
+      <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
+      <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ meta }}</span>
+    </div>
+    <IconButton v-if="dismissible" icon="x" size="xs" muted label="Dismiss" @click="emit('close')" />
+  </div>
+</template>

package/components/forms/Combobox.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import Icon from '../icons/Icon.vue'
-import { inputBase } from './Input.vue'
+import { inputBase } from './input-base.js'
 // Typeahead single-select: type to filter options, click or Enter to pick; "No results" empty row.
 const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Select...' }, disabled: Boolean, error: Boolean, width: [Number, String], style: Object })
 const emit = defineEmits(['update:modelValue'])

package/components/forms/DatePicker.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
-import { inputBase } from './Input.vue'
+import { inputBase } from './input-base.js'
 // Date picker: input with calendar glyph opening a month-grid popover — Monday-first, today outlined, selected filled. v-model is "YYYY-MM-DD".
 const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December']
 const pad = (n) => String(n).padStart(2, '0')

package/components/forms/Input.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-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%" };
+import { inputBase } from "./input-base.js";
+export { inputBase };
 
 /** Text input, 36px r8. readOnly = #fafafa inset; disabled = 50% opacity; error = red border + ring. */
 export function Input({ readOnly, disabled, error, style, ...rest }) {

package/components/forms/Input.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue'
-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%' }
+import { inputBase } from './input-base.js'
 // Text input, 36px r8. v-model. readonly = inset fill; disabled = 50% opacity; error = red border + ring.
+// Multiline variant lives in Textarea.vue.
 const props = defineProps({ modelValue: String, readonly: Boolean, disabled: Boolean, error: Boolean, style: Object })
 defineEmits(['update:modelValue'])
 const focus = ref(false)
@@ -13,26 +14,3 @@ const s = computed(() => ({ ...inputBase, ...(props.readonly ? { background: 'va
 <template>
   <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :readonly="readonly" :disabled="disabled" @focus="focus = true" @blur="focus = false" :style="s" />
 </template>
-
-<!-- Textarea — multiline textarea, r8, default 90px tall. showCount + maxLength renders a bottom-right "n/max" counter (red past the limit). -->
-<!--
-<script setup name="Textarea">
-import { ref, computed } from 'vue'
-import { inputBase } from './Input.vue'
-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: 90, resize: 'vertical', paddingBottom: props.showCount ? 22 : 8,
-  ...((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" />
-    <span v-if="showCount" :style="{ position: 'absolute', right: 10, bottom: 7, 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/Radio.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/** Radio — 16px (sm: 13px) circle; filled action-blue dot when selected. Hover darkens the ring, focus shows the 2px ring. */
+export interface RadioProps {
+  checked?: boolean;
+  onChange?: (checked: true) => void;
+  label?: string;
+  /** Muted second line under the label */
+  description?: string;
+  size?: "sm" | "md";
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Radio(props: RadioProps): JSX.Element;
+/** Single choice from a small set. Arrow keys move between enabled options. */
+export interface RadioGroupProps {
+  options?: Array<string | { label: string; value: string; description?: string; disabled?: boolean }>;
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Horizontal layout */
+  row?: boolean;
+  size?: "sm" | "md";
+  /** plain (default) · cards — each option is a bordered selectable card */
+  variant?: "plain" | "cards";
+  /** Disables the whole group */
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;

package/components/forms/Radio.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const radioDims = { sm: { box: 13, dot: 6, font: "var(--text-xs)" }, md: { box: 16, dot: 8, font: "var(--text-sm)" } };
+
+/**
+ * Radio — 16px (sm: 13px) circle, 1.5px border, filled action-blue dot when selected.
+ * hover darkens the ring; keyboard focus shows the 2px focus ring; disabled = 50% opacity.
+ * description renders a muted second line under the label (settings-style choices).
+ */
+export function Radio({ checked, onChange, label, description, size = "md", disabled, style }) {
+  const d = radioDims[size] || radioDims.md;
+  const [hover, setHover] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const ring = checked ? "var(--action-primary)" : hover && !disabled ? "var(--text-muted)" : "var(--checkbox-border)";
+  return (
+    <label role="radio" aria-checked={!!checked} aria-disabled={disabled || undefined} tabIndex={disabled ? -1 : 0}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
+      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); !disabled && onChange && onChange(true); } }}
+      style={{ display: "inline-flex", alignItems: description ? "flex-start" : "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 8, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, outline: "none", ...style }}
+      onClick={() => !disabled && onChange && onChange(true)}>
+      <span style={{ width: d.box, height: d.box, marginTop: description ? 1 : 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)" }}>
+        {checked ? <span style={{ width: d.dot, height: d.dot, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }}></span> : null}
+      </span>
+      {label || description ? <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: d.font, lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
+        {description ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "16px", color: "var(--text-muted)" }}>{description}</span> : null}
+      </span> : null}
+    </label>
+  );
+}
+
+/**
+ * RadioGroup — single choice from a small set. Vertical (default) or `row`.
+ * options: string[] | { label, value, description?, disabled? }[]
+ * Arrow keys move the selection between enabled options (WAI-ARIA radiogroup).
+ * variant="cards" renders each option as a bordered selectable card (plan pickers, migration strategies).
+ */
+export function RadioGroup({ options = [], value, onChange, row, size = "md", variant = "plain", disabled, style }) {
+  const opts = options.map((o) => (typeof o === "string" ? { label: o, value: o } : o));
+  const enabled = opts.filter((o) => !o.disabled && !disabled);
+  const onKey = (e) => {
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key) || !enabled.length) return;
+    e.preventDefault();
+    const i = enabled.findIndex((o) => o.value === value);
+    const next = e.key === "ArrowDown" || e.key === "ArrowRight" ? enabled[(i + 1) % enabled.length] : enabled[(i - 1 + enabled.length) % enabled.length];
+    onChange && onChange(next.value);
+  };
+  if (variant === "cards") {
+    return (
+      <div role="radiogroup" onKeyDown={onKey} style={{ display: "flex", flexDirection: row ? "row" : "column", gap: 8, ...style }}>
+        {opts.map((o) => {
+          const on = value === o.value, off = o.disabled || disabled;
+          return <div key={o.value} onClick={() => !off && onChange && onChange(o.value)}
+            style={{ flex: row ? 1 : "none", padding: "10px 12px", borderRadius: "var(--radius-md)", border: `1px solid ${on ? "var(--action-primary)" : "var(--border-card)"}`, background: on ? "var(--soft-bg)" : "var(--bg-surface)", cursor: off ? "not-allowed" : "pointer", opacity: off ? .5 : 1, transition: "var(--t-hover)" }}>
+            <Radio checked={on} onChange={() => onChange && onChange(o.value)} label={o.label} description={o.description} size={size} disabled={off} style={{ opacity: 1, cursor: "inherit" }} />
+          </div>;
+        })}
+      </div>
+    );
+  }
+  return (
+    <div role="radiogroup" onKeyDown={onKey} style={{ display: "flex", flexDirection: row ? "row" : "column", gap: row ? 16 : 10, ...style }}>
+      {opts.map((o) => <Radio key={o.value} label={o.label} description={o.description} size={size} disabled={o.disabled || disabled} checked={value === o.value} onChange={() => onChange && onChange(o.value)} />)}
+    </div>
+  );
+}