@keyfunc/keybricks-ds 1.0.0

package/components/feedback/Menu.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ContextMenu } from "./ContextMenu.jsx";
+
+/** Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click. */
+export function Menu({ trigger, items = [], onSelect, align = "start", style }) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  return (
+    <div ref={ref} style={{ position: "relative", display: "inline-flex", ...style }}>
+      <span onClick={() => setOpen((o) => !o)}>{trigger}</span>
+      {open ? (
+        <div style={{ position: "absolute", top: "calc(100% + 6px)", [align === "end" ? "right" : "left"]: 0, zIndex: "var(--z-menu)" }}>
+          <ContextMenu items={items} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/feedback/Menu.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import ContextMenu from './ContextMenu.vue'
+// Click-to-open dropdown menu anchored under its trigger (vs. ContextMenu, which opens at a click point). Closes on outside click.
+const props = defineProps({ items: { type: Array, default: () => [] }, align: { type: String, default: 'start' }, style: Object })
+const emit = defineEmits(['select'])
+const open = ref(false)
+const root = ref(null)
+function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
+onMounted(() => document.addEventListener('mousedown', onDoc))
+onUnmounted(() => document.removeEventListener('mousedown', onDoc))
+function select(l) { open.value = false; emit('select', l) }
+</script>
+<template>
+  <div ref="root" :style="{ position: 'relative', display: 'inline-flex', ...style }">
+    <span @click="open = !open"><slot name="trigger" /></span>
+    <div v-if="open" :style="{ position: 'absolute', top: 'calc(100% + 6px)', [align === 'end' ? 'right' : 'left']: 0, zIndex: 'var(--z-menu)' }">
+      <ContextMenu :items="items" @select="select" />
+    </div>
+  </div>
+</template>

package/components/feedback/Modal.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+/** Hover tooltip (11px, inverted surface). Addition — not in the source file. */
+export interface TooltipProps {
+  label?: string;
+  placement?: "top" | "bottom" | "left" | "right";
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+/** Centered dialog with scrim, title/subtitle, close, footer slot. Addition. */
+export interface ModalProps {
+  open?: boolean;
+  title?: string;
+  subtitle?: string;
+  onClose?: () => void;
+  /** Right-aligned footer buttons */
+  footer?: React.ReactNode;
+  width?: number;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Modal(props: ModalProps): JSX.Element;
+/** Single toast notification. Addition. */
+export interface ToastProps {
+  tone?: "success" | "danger" | "warning" | "info";
+  title?: string;
+  meta?: string;
+  onClose?: () => void;
+  style?: React.CSSProperties;
+}
+export declare function Toast(props: ToastProps): JSX.Element;
+/** Fixed bottom-right toast stack. */
+export interface ToastStackProps {
+  toasts?: { id: string | number; tone?: string; title?: string; meta?: string }[];
+  onDismiss?: (id: string | number) => void;
+  style?: React.CSSProperties;
+}
+export declare function ToastStack(props: ToastStackProps): JSX.Element;

package/components/feedback/Modal.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconButton } from "../buttons/IconButton.jsx";
+
+/** Hover tooltip — 11px, inverted surface, 6px offset. Wraps its children. */
+export function Tooltip({ label, placement = "top", children, style }) {
+  const [show, setShow] = React.useState(false);
+  const pos = {
+    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 },
+  }[placement];
+  return (
+    <span style={{ position: "relative", display: "inline-flex", ...style }} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
+      {children}
+      {show ? (
+        <span 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>
+      ) : null}
+    </span>
+  );
+}
+
+/** Centered modal dialog with scrim. width defaults to 440. */
+export function Modal({ open, title, subtitle, onClose, footer, width = 440, children, style }) {
+  if (!open) return null;
+  return (
+    <div style={{ position: "fixed", inset: 0, zIndex: "var(--z-modal)", background: "var(--bg-scrim)", display: "flex", alignItems: "center", justifyContent: "center", animation: "kb-fade-in var(--dur-fast) var(--ease-out)" }} onClick={onClose}>
+      <div onClick={(e) => e.stopPropagation()}
+        style={{ width, maxWidth: "92vw", background: "var(--bg-raised)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-modal)", animation: "kb-rise var(--dur) var(--ease-out)", ...style }}>
+        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", padding: "17px 17px 0" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
+            {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
+          </div>
+          <IconButton icon="x" size="md" onClick={onClose} label="Close" />
+        </div>
+        {children ? <div style={{ padding: "16px 17px 0" }}>{children}</div> : null}
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: 17 }}>{footer}</div>
+      </div>
+    </div>
+  );
+}
+
+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)" } };
+
+/** Single toast row. */
+export function Toast({ tone = "success", title, meta, onClose, style }) {
+  const t = toastTones[tone];
+  return (
+    <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", flexDirection: "column", flex: 1, minWidth: 0 }}>
+        <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
+        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+      </div>
+      {onClose ? <IconButton icon="x" size="xs" muted onClick={onClose} label="Dismiss" /> : null}
+    </div>
+  );
+}
+
+/** Fixed bottom-right stack of toasts. */
+export function ToastStack({ toasts = [], onDismiss, style }) {
+  return (
+    <div style={{ position: "fixed", right: 24, bottom: 24, zIndex: "var(--z-toast)", display: "flex", flexDirection: "column", gap: 8, ...style }}>
+      {toasts.map((t) => <Toast key={t.id} tone={t.tone} title={t.title} meta={t.meta} onClose={() => onDismiss && onDismiss(t.id)} />)}
+    </div>
+  );
+}

package/components/feedback/Modal.vue

@@ -0,0 +1,65 @@
+<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'])
+</script>
+<template>
+  <div v-if="open" style="position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg-scrim);display:flex;align-items:center;justify-content:center;animation:kb-fade-in var(--dur-fast) var(--ease-out)" @click="emit('close')">
+    <div @click.stop :style="{ width, maxWidth: '92vw', background: 'var(--bg-raised)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-modal)', animation: 'kb-rise var(--dur) var(--ease-out)', ...style }">
+      <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:17px 17px 0">
+        <div style="display:flex;flex-direction:column;gap:4px">
+          <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="subtitle" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ subtitle }}</span>
+        </div>
+        <IconButton icon="x" size="md" label="Close" @click="emit('close')" />
+      </div>
+      <div v-if="$slots.default" style="padding:16px 17px 0"><slot /></div>
+      <div style="display:flex;justify-content:flex-end;gap:8px;padding:17px"><slot name="footer" /></div>
+    </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/Stepper.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/** Horizontal wizard stepper — 32px circles (done green + check, current blue, pending outlined), 11px labels, hairline connectors. */
+export interface StepperProps {
+  steps?: { label: string; icon?: string }[];
+  /** Index of the current step */
+  current?: number;
+  style?: React.CSSProperties;
+}
+export declare function Stepper(props: StepperProps): JSX.Element;

package/components/feedback/Stepper.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Wizard stepper (Upload & Parse → ... → Results). steps: [{label, icon}]; current index; connectors hairline #e5e5e5. */
+export function Stepper({ steps = [], current = 0, style }) {
+  return (
+    <div style={{ display: "flex", alignItems: "flex-start", ...style }}>
+      {steps.map((s, i) => {
+        const done = i < current, is = i === current;
+        return (
+          <React.Fragment key={s.label}>
+            {i > 0 ? <div style={{ flex: 1, height: 2, background: "var(--track)", marginTop: 15.25, marginLeft: 12, marginRight: 12, minWidth: 24 }} /> : null}
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, flexShrink: 0 }}>
+              <span style={{ width: 32, height: 32, borderRadius: "var(--radius-full)", boxSizing: "border-box", display: "inline-flex", alignItems: "center", justifyContent: "center", background: done ? "var(--success)" : is ? "var(--action-primary)" : "var(--bg-surface)", border: done || is ? "none" : "2px solid var(--track)", color: done || is ? "var(--on-accent)" : "var(--text-muted)" }}>
+                <Icon name={done ? "check" : s.icon || "file"} size={16} />
+              </span>
+              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", fontWeight: is ? "var(--weight-medium)" : "var(--weight-regular)", color: is ? "var(--text-heading)" : "var(--text-secondary)", whiteSpace: "nowrap" }}>{s.label}</span>
+            </div>
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/components/feedback/Stepper.vue

@@ -0,0 +1,18 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+// Wizard stepper (Upload & Parse → ... → Results). steps: [{label, icon}]; current index; connectors hairline.
+defineProps({ steps: { type: Array, default: () => [] }, current: { type: Number, default: 0 }, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', alignItems: 'flex-start', ...style }">
+    <template v-for="(s, i) in steps" :key="s.label">
+      <div v-if="i > 0" style="flex:1;height:2px;background:var(--track);margin-top:15.25px;margin-left:12px;margin-right:12px;min-width:24px" />
+      <div style="display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0">
+        <span :style="{ width: 32, height: 32, borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: i < current ? 'var(--success)' : i === current ? 'var(--action-primary)' : 'var(--bg-surface)', border: (i < current || i === current) ? 'none' : '2px solid var(--track)', color: (i < current || i === current) ? 'var(--on-accent)' : 'var(--text-muted)' }">
+          <Icon :name="i < current ? 'check' : (s.icon || 'file')" :size="16" />
+        </span>
+        <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', fontWeight: i === current ? 'var(--weight-medium)' : 'var(--weight-regular)', color: i === current ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap' }">{{ s.label }}</span>
+      </div>
+    </template>
+  </div>
+</template>

package/components/feedback/Timeline.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export interface TimelineItem {
+  icon?: string;
+  tone?: "success" | "danger" | "warning" | "info" | "neutral";
+  title: string;
+  meta?: string;
+  body?: React.ReactNode;
+}
+
+/** Vertical activity timeline: outlined icon nodes on a hairline spine with title/meta/body per event. */
+export interface TimelineProps {
+  items?: TimelineItem[];
+  style?: React.CSSProperties;
+}

package/components/feedback/Timeline.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const tlTones = { success: "var(--success)", danger: "var(--danger)", warning: "var(--warning)", info: "var(--action-primary)", neutral: "var(--dot-neutral)" };
+
+/** Vertical activity timeline (SLDS pattern): icon nodes on a hairline spine, 13px/500 title + 12px meta + optional body, newest first. items: [{icon,tone,title,meta,body}]. */
+export function Timeline({ items = [], style }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", ...style }}>
+      {items.map((it, i) => (
+        <div key={i} style={{ display: "flex", gap: 12 }}>
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
+            <span style={{ width: 26, height: 26, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", border: `1.5px solid ${tlTones[it.tone || "neutral"]}`, color: tlTones[it.tone || "neutral"], display: "inline-flex", alignItems: "center", justifyContent: "center", boxSizing: "border-box", flexShrink: 0 }}>
+              <Icon name={it.icon || "clock"} size={13} />
+            </span>
+            {i < items.length - 1 && <span style={{ width: 1.5, flex: 1, minHeight: 14, background: "var(--border-control)" }}></span>}
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 2, paddingBottom: i < items.length - 1 ? 18 : 0, minWidth: 0, paddingTop: 3 }}>
+            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{it.title}</span>
+            {it.meta && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)" }}>{it.meta}</span>}
+            {it.body && <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)", paddingTop: 4 }}>{it.body}</span>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/feedback/Timeline.vue

@@ -0,0 +1,21 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+const tlTones = { success: 'var(--success)', danger: 'var(--danger)', warning: 'var(--warning)', info: 'var(--action-primary)', neutral: 'var(--dot-neutral)' }
+// Vertical activity timeline: outlined icon nodes on a hairline spine. items: [{icon,tone,title,meta,body}].
+defineProps({ items: { type: Array, default: () => [] }, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column', ...style }">
+    <div v-for="(it, i) in items" :key="i" style="display:flex;gap:12px">
+      <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0">
+        <span :style="{ width: '26px', height: '26px', borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', border: `1.5px solid ${tlTones[it.tone || 'neutral']}`, color: tlTones[it.tone || 'neutral'], display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxSizing: 'border-box' }"><Icon :name="it.icon || 'clock'" :size="13" /></span>
+        <span v-if="i < items.length - 1" style="width:1.5px;flex:1;min-height:14px;background:var(--border-control)" />
+      </div>
+      <div :style="{ display: 'flex', flexDirection: 'column', gap: '2px', paddingBottom: i < items.length - 1 ? '18px' : 0, minWidth: 0, paddingTop: '3px' }">
+        <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--text-heading)">{{ it.title }}</span>
+        <span v-if="it.meta" style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted)">{{ it.meta }}</span>
+        <span v-if="it.body" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body);padding-top:4px">{{ it.body }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/components/feedback/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x70" name="Feedback dir" subtitle="Full cards: Components → Accordion / Overlays / States / etc." -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
+<body><div id="root"></div>
+<script type="text/babel">
+const { Alert } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<Alert tone="info" title="See Components tab for full states"/>);
+</script></body></html>

package/components/feedback/feedback.prompt.md

@@ -0,0 +1,35 @@
+Feedback & flow: `Stepper` (wizard circles), `ContextMenu`, `ActivityItem`/`DotActivity` (feeds), `LogViewer` (mono logs).
+
+```jsx
+<Stepper current={1} steps={[{label:"Upload & Parse",icon:"upload"},{label:"Comparison",icon:"file-text"},{label:"Confirmation",icon:"check"},{label:"Execution",icon:"play"},{label:"Results",icon:"eye"}]}/>
+<ContextMenu items={[{label:"Preview",icon:"eye"},{label:"Duplicate",icon:"copy"},{label:"Delete",icon:"trash-2",danger:true}]}/>
+<ActivityItem title="Model Integration updated" meta="财务分析 • 2 hours ago" action="Open"/>
+<LogViewer lines={["[14:30] Task started: Import"]}/>
+```
+
+Additions (not in the source file): `Tooltip`, `Modal`, `Toast`/`ToastStack`, `Alert`, `EmptyState`, `Skeleton`, `Spinner`.
+
+```jsx
+<Tooltip label="Run a test execution"><Button variant="ghost" icon="play">Run Test</Button></Tooltip>
+<Modal open={o} title="Delete node?" subtitle="This removes its 2 edges." onClose={close}
+  footer={<><Button variant="outline" size="sm" onClick={close}>Cancel</Button><Button size="sm" style={{background:"var(--danger)"}}>Delete Node</Button></>}/>
+<ToastStack toasts={toasts} onDismiss={dismiss}/>
+<Alert tone="warning" title="4 configurations differ">Review before continuing.</Alert>
+<EmptyState icon="file-text" title="No documents yet" hint="..." action={<Button icon="plus" size="sm">New Document</Button>}/>
+<Skeleton width={140} height={13}/> <Spinner/>
+```
+
+`Menu` (addition) — trigger-anchored dropdown (vs. `ContextMenu`, which opens at a click point):
+
+```jsx
+<Menu trigger={<Button variant="dark" icon="chevron-down" size="sm">Show</Button>}
+  items={[{label:"Preview",icon:"eye"},{label:"Export",icon:"download"},{label:"Delete",icon:"trash-2",danger:true}]}/>
+```
+
+`Accordion` (addition) — generic collapsible section, distinct from `ListRow` (workflow-doc specific):
+
+```jsx
+<Accordion title="Retry policy" subtitle="What happens when a task fails" open={open} onToggle={setOpen}>
+  Failed tasks retry up to 3 times with exponential backoff.
+</Accordion>
+```

package/components/forms/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** Checkbox with optional 12px/500 label ("Debug Mode"). md 16px · sm 13px (tables). */
+export interface CheckboxProps {
+  checked?: boolean;
+  /** Dash glyph, same fill as checked — for "some of N selected" parent rows */
+  indeterminate?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  size?: "md" | "sm";
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Checkbox(props: CheckboxProps): JSX.Element;

package/components/forms/Checkbox.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** 16px (sm: 13px) checkbox — 1.5px #d1d5db border, r4; checked = blue fill + white check; indeterminate = blue fill + dash; disabled = 50% opacity. */
+export function Checkbox({ checked, indeterminate, onChange, label, size = "md", disabled, style }) {
+  const box = size === "sm" ? 13 : 16;
+  const filled = checked || indeterminate;
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 6, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .5 : 1, ...style }}
+      onClick={() => !disabled && onChange && onChange(!checked)}>
+      <span style={{ width: box, height: box, borderRadius: 4, boxSizing: "border-box", border: filled ? "none" : "1.5px solid var(--checkbox-border)", background: filled ? "var(--action-primary)" : "var(--bg-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-accent)", flexShrink: 0, transition: "var(--t-hover)" }}>
+        {checked ? <Icon name="check" size={box - 4} strokeWidth={3} /> : indeterminate ? <Icon name="minus" size={box - 4} strokeWidth={3} /> : null}
+      </span>
+      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
+    </label>
+  );
+}

package/components/forms/Checkbox.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+// 16px (sm: 13px) checkbox — 1.5px border, r4; checked = blue fill + white check; indeterminate = blue fill + dash; disabled = 50% opacity.
+const props = defineProps({ checked: Boolean, indeterminate: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+const emit = defineEmits(['change'])
+const box = computed(() => props.size === 'sm' ? 13 : 16)
+const filled = computed(() => props.checked || props.indeterminate)
+</script>
+<template>
+  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 6, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('change', !checked)">
+    <span :style="{ width: box, height: box, borderRadius: 4, boxSizing: 'border-box', border: filled ? 'none' : '1.5px solid var(--checkbox-border)', background: filled ? 'var(--action-primary)' : 'var(--bg-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-accent)', flexShrink: 0, transition: 'var(--t-hover)' }">
+      <Icon v-if="checked" name="check" :size="box - 4" :stroke-width="3" />
+      <Icon v-else-if="indeterminate" name="minus" :size="box - 4" :stroke-width="3" />
+    </span>
+    <span v-if="label" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body)">{{ label }}</span>
+  </label>
+</template>

package/components/forms/Combobox.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+/** Typeahead single-select combobox: type to filter, arrow keys + Enter or click to pick, "No results" empty row. */
+export interface ComboboxProps {
+  options?: string[];
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  width?: number | string;
+  onChange?: (value: string) => void;
+  style?: React.CSSProperties;
+}

package/components/forms/Combobox.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { inputBase } from "./Input.jsx";
+
+/** Typeahead single-select: type to filter options, click or Enter to pick. Chevron toggles the list; shows "No results" when the filter matches nothing. */
+export function Combobox({ options = [], value = "", placeholder = "Select...", disabled, error, width, onChange, style }) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState(null);
+  const [hov, setHov] = React.useState(-1);
+  const root = React.useRef(null);
+  React.useEffect(() => { const h = (e) => { if (root.current && !root.current.contains(e.target)) { setOpen(false); setQuery(null); } }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []);
+  const shown = query == null ? options : options.filter(o => o.toLowerCase().includes(query.toLowerCase()));
+  const pick = (o) => { onChange && onChange(o); setOpen(false); setQuery(null); };
+  return (
+    <div ref={root} style={{ position: "relative", width, ...style }}>
+      <div style={{ position: "relative" }}>
+        <input value={query != null ? query : value} placeholder={placeholder} disabled={disabled}
+          onFocus={() => setOpen(true)} onChange={(e) => { setQuery(e.target.value); setOpen(true); setHov(0); }}
+          onKeyDown={(e) => { if (e.key === "ArrowDown") setHov(Math.min(hov + 1, shown.length - 1)); if (e.key === "ArrowUp") setHov(Math.max(hov - 1, 0)); if (e.key === "Enter" && shown[hov]) pick(shown[hov]); if (e.key === "Escape") { setOpen(false); setQuery(null); } }}
+          style={{ ...inputBase, paddingRight: 32, borderColor: error ? "var(--danger)" : open ? "var(--focus-border)" : "var(--border-control)", boxShadow: open ? "0 0 0 2px var(--focus-ring)" : "none", opacity: disabled ? .5 : 1, cursor: disabled ? "not-allowed" : "text" }} />
+        <button type="button" disabled={disabled} onClick={() => { setOpen(!open); setQuery(null); }} style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", width: 26, height: 26, border: "none", background: "transparent", cursor: "pointer", color: "var(--text-muted)", display: "flex", alignItems: "center", justifyContent: "center", padding: 0 }}>
+          <span style={{ display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={14} /></span>
+        </button>
+      </div>
+      {open && !disabled && <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, zIndex: "var(--z-menu)", background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-menu)", padding: 4, maxHeight: 208, overflowY: "auto" }}>
+        {shown.length === 0 && <div style={{ padding: "8px 10px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>No results</div>}
+        {shown.map((o, i) => <button key={o} type="button" onClick={() => pick(o)} onMouseEnter={() => setHov(i)}
+          style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", padding: "7px 10px", borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", background: hov === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-heading)", textAlign: "left" }}>
+          {o}{o === value && <span style={{ color: "var(--action-primary)", display: "inline-flex" }}><Icon name="check" size={13} /></span>}
+        </button>)}
+      </div>}
+    </div>
+  );
+}

package/components/forms/Combobox.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { inputBase } from './Input.vue'
+// 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'])
+const open = ref(false), query = ref(null), hov = ref(-1), root = ref(null)
+const shown = computed(() => query.value == null ? props.options : props.options.filter(o => o.toLowerCase().includes(query.value.toLowerCase())))
+function pick(o) { emit('update:modelValue', o); open.value = false; query.value = null }
+function onDoc(e) { if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = null } }
+onMounted(() => document.addEventListener('mousedown', onDoc))
+onUnmounted(() => document.removeEventListener('mousedown', onDoc))
+</script>
+<template>
+  <div ref="root" :style="{ position: 'relative', width: typeof width === 'number' ? width + 'px' : width, ...style }">
+    <div style="position:relative">
+      <input :value="query != null ? query : modelValue" :placeholder="placeholder" :disabled="disabled"
+        @focus="open = true" @input="query = $event.target.value; open = true; hov = 0"
+        @keydown.down="hov = Math.min(hov + 1, shown.length - 1)" @keydown.up="hov = Math.max(hov - 1, 0)"
+        @keydown.enter="shown[hov] && pick(shown[hov])" @keydown.esc="open = false; query = null"
+        :style="{ ...inputBase, paddingRight: '32px', borderColor: error ? 'var(--danger)' : open ? 'var(--focus-border)' : 'var(--border-control)', boxShadow: open ? '0 0 0 2px var(--focus-ring)' : 'none', opacity: disabled ? .5 : 1 }" />
+      <button type="button" :disabled="disabled" @click="open = !open; query = null" style="position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;padding:0">
+        <span :style="{ display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="14" /></span>
+      </button>
+    </div>
+    <div v-if="open && !disabled" style="position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-menu);background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:4px;max-height:208px;overflow-y:auto">
+      <div v-if="shown.length === 0" style="padding:8px 10px;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted)">No results</div>
+      <button v-for="(o, i) in shown" :key="o" type="button" @click="pick(o)" @mouseenter="hov = i"
+        :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', padding: '7px 10px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: hov === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-heading)', textAlign: 'left' }">
+        {{ o }}<span v-if="o === modelValue" style="color:var(--action-primary);display:inline-flex"><Icon name="check" :size="13" /></span>
+      </button>
+    </div>
+  </div>
+</template>

package/components/forms/DatePicker.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+/** Date picker input + month-grid popover (Monday-first, today outlined, selected filled). Dates are "YYYY-MM-DD" strings. */
+export interface DatePickerProps {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  width?: number | string;
+  onChange?: (isoDate: string) => void;
+  style?: React.CSSProperties;
+}