@keyfunc/keybricks-ds 1.0.2 → 1.0.3

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/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/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/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'])