@keyfunc/keybricks-ds 1.0.0

package/components/brand/brandMotifs.js

@@ -0,0 +1,210 @@
+/* Keybricks brand motifs — generative geometry for BrandVisual.
+   Every motif is authored against one canvas (1200×400) and expressed in fractions of W/H,
+   so a single component renders at any size. Deterministic: seeded PRNG per motif. */
+
+const seeded = (s) => { let a = s >>> 0; return () => { a = (a * 1664525 + 1013904223) >>> 0; return a / 4294967296; }; };
+const lerp = (a, b, t) => a + (b - a) * t;
+const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
+const n = (v) => Math.round(v * 10) / 10;
+
+export const motifList = ["orbit", "entropy", "focal", "manifold", "tesseract", "meridian", "ledger"];
+export const motifLabels = {
+  orbit: "Orbit — concentric arcs",
+  entropy: "Entropy — crystal and dust",
+  focal: "Focal — depth-of-field lattice",
+  manifold: "Manifold — parametric surface",
+  tesseract: "Tesseract — nested cubes",
+  meridian: "Meridian — bent meridians",
+  ledger: "Ledger — scale and cursor",
+};
+
+const LINE = "#51a2ff", BRIGHT = "#93c5fd", HI = "#dbeafe";
+
+/** Returns { viewBox, els } — els are plain SVG element descriptors: { t, ...attrs }. */
+export function buildMotif(motif = "orbit", W = 1200, H = 400) {
+  const rnd = seeded(motif.length * 7919 + 104729);
+  const els = [];
+  const push = (t, a) => els.push({ t, ...a });
+  const line = (d, o, w = 1, stroke = LINE, filter) => push("path", { d, fill: "none", stroke, "stroke-opacity": o, "stroke-width": w, ...(filter ? { filter } : null) });
+  const dot = (x, y, r, fill, o) => push("circle", { cx: n(x), cy: n(y), r: n(r), fill, "fill-opacity": o });
+  const ring = (x, y, r, o, w = 1.5, stroke = HI) => push("circle", { cx: n(x), cy: n(y), r: n(r), fill: "none", stroke, "stroke-opacity": o, "stroke-width": w });
+  const marker = (x, y, s = 1) => { dot(x, y, 4.5 * s, HI, 1); ring(x, y, 12 * s, 0.55); ring(x, y, 25 * s, 0.22, 1.2, BRIGHT); };
+  const grid = (cols, rows, o = 0.14) => {
+    for (let i = 1; i < rows; i++) line(`M 0 ${n(H * i / rows)} L ${W} ${n(H * i / rows)}`, o, 1, BRIGHT);
+    for (let i = 1; i < cols; i++) line(`M ${n(W * i / cols)} 0 L ${n(W * i / cols)} ${H}`, o, 1, BRIGHT);
+  };
+
+  if (motif === "orbit") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg)" });
+    push("ellipse", { cx: n(W * 0.72), cy: n(H * 0.2), rx: n(W * 0.36), ry: n(H * 0.78), fill: "url(#kbv-core)" });
+    push("ellipse", { cx: n(W * 0.12), cy: n(H * 0.92), rx: n(W * 0.28), ry: n(H * 0.5), fill: "url(#kbv-glow)", opacity: 0.55 });
+    grid(4, 3);
+    const cx = W * 0.84, cy = H * 1.06;
+    const arc = (r, a1, a2) => {
+      const p = (a) => [cx + r * Math.cos(a * Math.PI / 180), cy + r * Math.sin(a * Math.PI / 180)];
+      const [x1, y1] = p(a1), [x2, y2] = p(a2);
+      return `M ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 0 1 ${n(x2)} ${n(y2)}`;
+    };
+    const wedge = (r, a1, a2) => `M ${n(cx)} ${n(cy)} L ${arc(r, a1, a2).slice(2)} Z`;
+    push("path", { d: wedge(H * 1.24, 194, 248), fill: LINE, opacity: 0.2 });
+    push("path", { d: wedge(H * 1.24, 248, 262), fill: BRIGHT, opacity: 0.16 });
+    push("path", { d: wedge(H * 0.86, 206, 252), fill: "#155dfc", opacity: 0.42 });
+    [[1.62, 0.2], [1.28, 0.34], [0.98, 0.5], [0.7, 0.66], [0.44, 0.4]].forEach(([k, o], i) =>
+      line(arc(H * k, 178, 272), o, i === 2 ? 1.5 : 1, i > 1 ? BRIGHT : LINE));
+    marker(W * 0.34, H * 0.78);
+    dot(W * 0.25, H * 0.28, 3, HI, 0.9);
+    dot(W * 0.11, H * 0.6, 2.5, BRIGHT, 0.7);
+    dot(W * 0.75, H * 0.28, 2.5, HI, 0.6);
+  }
+
+  if (motif === "entropy") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg-d)" });
+    push("ellipse", { cx: n(W * 0.74), cy: n(H * 0.35), rx: n(W * 0.4), ry: n(H * 0.82), fill: "url(#kbv-core)" });
+    push("ellipse", { cx: n(W * 0.18), cy: n(H * 0.95), rx: n(W * 0.3), ry: n(H * 0.5), fill: "url(#kbv-glow)", opacity: 0.45 });
+    const NX = 11, NY = 6, NZ = 3, nuc = [8.2, 1.1, 2.05];
+    const sx = W * 0.042, sy = H * 0.072, sz = H * 0.132, nx = W * 0.745, ny = H * 0.335;
+    const iso = (x, y, z) => [nx + ((x - nuc[0]) - (y - nuc[1])) * sx, ny + ((x - nuc[0]) + (y - nuc[1])) * sy - (z - nuc[2]) * sz];
+    const nodes = new Map();
+    for (let x = 0; x < NX; x++) for (let y = 0; y < NY; y++) for (let z = 0; z < NZ; z++) {
+      const dn = Math.hypot((x - nuc[0]) * 0.92, (y - nuc[1]) * 0.72, (z - nuc[2]) * 1.15);
+      const order = clamp(1 - (dn - 1.5) / 5.4 + (rnd() - 0.5) * 0.24, 0, 1);
+      if (order < 0.1 && rnd() < 0.66) continue;
+      const c = iso(x, y, z), chaos = Math.pow(1 - order, 1.75);
+      nodes.set(`${x},${y},${z}`, { px: c[0] + (rnd() - 0.5) * W * 0.17 * chaos, py: c[1] + (rnd() - 0.5) * H * 0.52 * chaos, order, depth: x + y - z * 1.2 });
+    }
+    for (const [k, p] of nodes) {
+      const [x, y, z] = k.split(",").map(Number);
+      [[x + 1, y, z], [x, y + 1, z], [x, y, z + 1]].forEach((q) => {
+        const b = nodes.get(q.join(","));
+        if (!b) return;
+        const o = Math.min(p.order, b.order);
+        if (o < 0.28 && rnd() < 0.62) return;
+        const near = clamp(1 - (p.depth + 5) / 16, 0, 1);
+        const d = `M ${n(p.px)} ${n(p.py)} L ${n(b.px)} ${n(b.py)}`;
+        if (o > 0.82) line(d, 0.34, 3.4, BRIGHT, "url(#kbv-b2)");
+        line(d, lerp(0.05, 0.62, Math.pow(o, 1.2)) * lerp(0.55, 1.15, near), lerp(1, 1.5, o), o > 0.7 ? BRIGHT : LINE);
+      });
+    }
+    for (const [, p] of nodes) {
+      const near = clamp(1 - (p.depth + 5) / 16, 0, 1);
+      dot(p.px, p.py, lerp(1.1, 3.2, near) * lerp(0.65, 1, p.order), p.order > 0.72 ? HI : BRIGHT, lerp(0.2, 0.95, p.order * 0.65 + near * 0.35));
+    }
+    for (let i = 0; i < 34; i++) {
+      const x = rnd() * W * 0.42, y = rnd() * H, L = lerp(W * 0.004, W * 0.022, rnd());
+      const a = Math.atan2(ny - y, nx - x) + (rnd() - 0.5) * 0.7;
+      line(`M ${n(x)} ${n(y)} L ${n(x + Math.cos(a) * L)} ${n(y + Math.sin(a) * L)}`, lerp(0.07, 0.3, rnd()), 1, BRIGHT, rnd() < 0.45 ? "url(#kbv-b1)" : undefined);
+    }
+    for (let i = 0; i < 18; i++) dot(rnd() * W * 0.46, rnd() * H, lerp(0.6, 1.7, rnd()), BRIGHT, lerp(0.12, 0.42, rnd()));
+    push("circle", { cx: n(nx), cy: n(ny), r: n(H * 0.06), fill: LINE, "fill-opacity": 0.3, filter: "url(#kbv-b3)" });
+    marker(nx, ny);
+  }
+
+  if (motif === "focal") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg-v)" });
+    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.3), rx: n(W * 0.42), ry: n(H * 0.5), fill: "url(#kbv-glow)" });
+    const R = 11, C = 15, pts = [];
+    for (let i = 0; i <= R; i++) {
+      const t = i / R, y = lerp(H * 0.26, H * 1.02, Math.pow(t, 1.4)), half = lerp(W * 0.17, W * 0.6, Math.pow(t, 1.08));
+      const row = [];
+      for (let j = 0; j <= C; j++) row.push([W * 0.48 + lerp(-half, half, j / C) - W * 0.04 * (1 - t), y - H * 0.03 * Math.sin(j / C * Math.PI * 1.6)]);
+      pts.push({ row, t });
+    }
+    pts.forEach(({ row, t }) => {
+      line(row.map(([x, y], j) => `${j ? "L" : "M"} ${n(x)} ${n(y)}`).join(" "), lerp(0.08, 0.42, t), 1, t > 0.6 ? BRIGHT : LINE);
+    });
+    for (let j = 0; j <= C; j += 1) {
+      line(pts.map(({ row }, i) => `${i ? "L" : "M"} ${n(row[j][0])} ${n(row[j][1])}`).join(" "), j % 3 === 0 ? 0.2 : 0.09, 1, LINE);
+    }
+    pts.forEach(({ row, t }) => row.forEach(([x, y]) => dot(x, y, lerp(1, 3, t), t > 0.55 ? HI : BRIGHT, lerp(0.22, 0.9, t))));
+    marker(W * 0.82, H * 0.34, 0.9);
+  }
+
+  if (motif === "manifold") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg-v)" });
+    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.32), rx: n(W * 0.42), ry: n(H * 0.46), fill: "url(#kbv-glow)" });
+    const V = 9, U = 16, span = W * 0.46;
+    const f = (u, v) => {
+      const t = v / V, x = lerp(W * 0.5 - span * (0.35 + 0.65 * t), W * 0.5 + span * (0.35 + 0.65 * t), u / U);
+      const y = lerp(H * 0.27, H * 1.03, Math.pow(t, 1.5));
+      const z = Math.sin(u / U * Math.PI * 2.2 + t * 3) * Math.cos(t * 2.4) * H * 0.077 * (0.4 + t);
+      return [x, y - z, z];
+    };
+    for (let v = 0; v <= V; v++) {
+      let d = "", peak = null, pz = -1e9;
+      for (let u = 0; u <= U; u++) { const [x, y, z] = f(u, v); d += `${u ? " L " : "M "}${n(x)} ${n(y)}`; if (z > pz) { pz = z; peak = [x, y]; } }
+      const t = v / V;
+      line(d, lerp(0.15, 0.55, t), 1.2, t > 0.7 ? BRIGHT : LINE);
+      if (v === 6) marker(peak[0], peak[1], 0.9);
+    }
+    for (let u = 0; u <= U; u += 2) {
+      let d = "";
+      for (let v = 0; v <= V; v++) { const [x, y] = f(u, v); d += `${v ? " L " : "M "}${n(x)} ${n(y)}`; }
+      line(d, 0.14, 1.2);
+    }
+  }
+
+  if (motif === "tesseract") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg)" });
+    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.46), rx: n(W * 0.4), ry: n(H * 0.56), fill: "url(#kbv-core)" });
+    const cx = W * 0.5, cy = H * 0.5;
+    const cube = (r, rt, o, c, w) => {
+      const p = [];
+      for (let i = 0; i < 4; i++) { const a = rt + i * Math.PI / 2; p.push([cx + r * Math.cos(a), cy + r * Math.sin(a) * 0.82]); }
+      const up = p.map(([x, y]) => [x, y - r * 0.62]);
+      for (let i = 0; i < 4; i++) {
+        const j = (i + 1) % 4;
+        line(`M ${n(p[i][0])} ${n(p[i][1])} L ${n(p[j][0])} ${n(p[j][1])}`, o, w, c);
+        line(`M ${n(up[i][0])} ${n(up[i][1])} L ${n(up[j][0])} ${n(up[j][1])}`, o, w, c);
+        line(`M ${n(p[i][0])} ${n(p[i][1])} L ${n(up[i][0])} ${n(up[i][1])}`, o * 0.8, w, c);
+      }
+      return { p, up };
+    };
+    const A = cube(H * 0.44, Math.PI / 4 + 0.2, 0.32, LINE, 1.2);
+    const B = cube(H * 0.218, Math.PI / 4 + 0.55, 0.75, BRIGHT, 1.4);
+    for (let i = 0; i < 4; i++) {
+      line(`M ${n(A.p[i][0])} ${n(A.p[i][1])} L ${n(B.p[i][0])} ${n(B.p[i][1])}`, 0.22, 1.2);
+      line(`M ${n(A.up[i][0])} ${n(A.up[i][1])} L ${n(B.up[i][0])} ${n(B.up[i][1])}`, 0.22, 1.2);
+    }
+    marker(B.up[1][0], B.up[1][1], 0.85);
+    dot(W * 0.14, H * 0.79, 2.5, HI, 0.65);
+    dot(W * 0.87, H * 0.2, 2.5, HI, 0.65);
+  }
+
+  if (motif === "meridian") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg-v)" });
+    push("ellipse", { cx: n(W * 0.5), cy: n(H * 0.5), rx: n(W * 0.34), ry: n(H * 0.62), fill: "url(#kbv-core)" });
+    const cx = W * 0.5, cy = H * 0.5;
+    for (let j = 0; j <= 12; j++) {
+      const x0 = lerp(W * 0.06, W * 0.94, j / 12), k = (x0 - cx) / (W * 0.5);
+      let d = "";
+      for (let i = 0; i <= 24; i++) {
+        const y = lerp(-H * 0.04, H * 1.04, i / 24);
+        const bend = k * W * 0.055 * Math.exp(-Math.pow((y - cy) / (H * 0.42), 2));
+        d += `${i ? " L " : "M "}${n(x0 + bend)} ${n(y)}`;
+      }
+      line(d, lerp(0.42, 0.16, Math.abs(k)), Math.abs(k) < 0.2 ? 1.4 : 1, Math.abs(k) < 0.35 ? BRIGHT : LINE);
+    }
+    line(`M 0 ${n(cy)} L ${W} ${n(cy)}`, 0.14, 1, BRIGHT);
+    marker(cx, cy);
+    dot(W * 0.2, H * 0.22, 2.5, BRIGHT, 0.6);
+    dot(W * 0.84, H * 0.78, 2, BRIGHT, 0.5);
+  }
+
+  if (motif === "ledger") {
+    push("rect", { width: W, height: H, fill: "url(#kbv-bg-d)" });
+    push("ellipse", { cx: n(W * 0.5), cy: n(H * 1.04), rx: n(W * 0.46), ry: n(H * 0.66), fill: "url(#kbv-glow)" });
+    grid(8, 4, 0.12);
+    for (let i = 1; i < 40; i++) {
+      const x = W * i / 40, major = i % 5 === 0;
+      line(`M ${n(x)} ${n(H * 0.68)} L ${n(x)} ${n(H * 0.68 + (major ? H * 0.09 : H * 0.045))}`, major ? 0.5 : 0.24, 1, major ? BRIGHT : LINE);
+    }
+    const cur = W * 0.48;
+    line(`M ${n(cur)} 0 L ${n(cur)} ${H}`, 0.6, 1.4, HI);
+    line(`M ${n(cur)} 0 L ${n(cur)} ${H}`, 0.22, 4, BRIGHT, "url(#kbv-b2)");
+    marker(cur, H * 0.42, 0.9);
+    dot(W * 0.18, H * 0.22, 2.5, BRIGHT, 0.55);
+    dot(W * 0.72, H * 0.72, 2, BRIGHT, 0.45);
+  }
+
+  return { viewBox: `0 0 ${W} ${H}`, els };
+}

package/components/buttons/ActionChip.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/** Tinted bulk-action chip (comparison-table actions). 30px, r8, 12px/500. */
+export interface ActionChipProps {
+  /** success #ecfdf5/#007a55 · warning #fff7ed/#ca3500 · neutral #f5f5f5/#525252 · info · danger */
+  tone?: "success" | "warning" | "neutral" | "info" | "danger";
+  onClick?: () => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function ActionChip(props: ActionChipProps): JSX.Element;

package/components/buttons/ActionChip.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const chipTones = {
+  success: { background: "var(--success-bg)", color: "var(--success-text)" },
+  warning: { background: "var(--warning-bg)", color: "var(--warning-text)" },
+  neutral: { background: "var(--bg-hover)", color: "var(--text-body)" },
+  info: { background: "var(--info-bg)", color: "var(--action-primary)" },
+  danger: { background: "var(--danger-bg)", color: "var(--danger-text)" },
+};
+
+/** Tinted bulk-action chip ("Mark as New", "Mark as Overwrite", "Skip Selected"). */
+export function ActionChip({ tone = "neutral", children, onClick, style }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <button type="button" onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+      style={{ height: 30, padding: "0 12px", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", display: "inline-flex", alignItems: "center", filter: hover ? "brightness(1.06) saturate(1.05)" : "none", transition: "var(--t-hover),filter var(--dur-fast) var(--ease-out)", ...chipTones[tone], ...style }}>
+      {children}
+    </button>
+  );
+}

package/components/buttons/ActionChip.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ref, computed } from 'vue'
+const chipTones = {
+  success: { background: 'var(--success-bg)', color: 'var(--success-text)' },
+  warning: { background: 'var(--warning-bg)', color: 'var(--warning-text)' },
+  neutral: { background: 'var(--bg-hover)', color: 'var(--text-body)' },
+  info: { background: 'var(--info-bg)', color: 'var(--action-primary)' },
+  danger: { background: 'var(--danger-bg)', color: 'var(--danger-text)' },
+}
+// Tinted bulk-action chip ("Mark as New", "Mark as Overwrite", "Skip Selected").
+const props = defineProps({ tone: { type: String, default: 'neutral' }, style: Object })
+defineEmits(['click'])
+const hover = ref(false)
+const s = computed(() => ({ height: 30, padding: '0 12px', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', display: 'inline-flex', alignItems: 'center', filter: hover.value ? 'brightness(1.06) saturate(1.05)' : 'none', transition: 'var(--t-hover),filter var(--dur-fast) var(--ease-out)', ...chipTones[props.tone], ...props.style }))
+</script>
+<template>
+  <button type="button" @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false" :style="s"><slot /></button>
+</template>

package/components/buttons/Button.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+/**
+ * Keybricks button — flat, hairline, 13px default.
+ */
+export interface ButtonProps {
+  /** primary (blue #155dfc) | dark (#171717, e.g. "AI Assistant") | outline | ghost | primary-soft (blue tint toggle, e.g. "Data Preview") | danger (solid red, destructive) | danger-soft (red tint, e.g. "Remove") | text (no background/border ever — underlines on hover, e.g. "View all", "Cancel") */
+  variant?: "primary" | "dark" | "outline" | "ghost" | "primary-soft" | "danger" | "danger-soft" | "text";
+  /** sm 30px/12px text (panel actions) | md 32px/13px (default) | lg 35.5px r10 medium (wizard footers) */
+  size?: "sm" | "md" | "lg";
+  /** Icon glyph name */
+  icon?: string;
+  iconSize?: number;
+  /** Where `icon` renders relative to the label (default "left") */
+  iconPosition?: "left" | "right";
+  /** Force 500 weight (nav/footer emphasis) */
+  medium?: boolean;
+  disabled?: boolean;
+  /** Shows a spinner in place of the icon and disables interaction, keeping width stable */
+  loading?: boolean;
+  /** Stretches to fill its container */
+  fullWidth?: boolean;
+  /** Square, icon-only mode — hides children, requires `label` for accessibility */
+  iconOnly?: boolean;
+  /** aria-label, required when iconOnly */
+  label?: string;
+  /** Force the press (mouse-down) styling — for specimens and controlled toggles */
+  pressed?: boolean;
+  /** Force the keyboard-focus ring — for specimens */
+  focused?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Button(props: ButtonProps): JSX.Element;
+/** Attached row of Buttons sharing one outline (e.g. a segmented "Day / Week / Month" action group). */
+export interface ButtonGroupProps {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;

package/components/buttons/Button.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const btnBase = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", border: "1px solid transparent", cursor: "pointer", whiteSpace: "nowrap", boxSizing: "border-box", background: "transparent", transition: "var(--t-hover)" };
+
+const variants = {
+  primary: { background: "var(--action-primary)", color: "var(--on-accent)" },
+  dark: { background: "var(--action-dark)", color: "var(--action-dark-fg)" },
+  outline: { background: "var(--bg-surface)", color: "var(--text-body)", borderColor: "var(--border-control)" },
+  ghost: { color: "var(--text-body)" },
+  "primary-soft": { background: "var(--soft-bg)", color: "var(--action-primary)", borderColor: "var(--soft-border)" },
+  danger: { background: "var(--danger)", color: "var(--on-accent)" },
+  "danger-soft": { background: "var(--danger-bg)", color: "var(--danger-text)" },
+  text: { color: "var(--text-secondary)", padding: "0", height: "auto" },
+};
+const hovers = {
+  primary: "var(--action-primary-hover)", dark: "var(--action-dark-hover)",
+  outline: "var(--bg-hover)", ghost: "var(--bg-hover)", "primary-soft": "var(--soft-hover)",
+  danger: "var(--danger-text)", "danger-soft": "var(--danger-bg)",
+};
+/** Press (mouse-down) fills — one step past hover. */
+const presses = {
+  primary: "var(--action-primary-active)", dark: "var(--action-dark-active)",
+  outline: "var(--bg-press)", ghost: "var(--bg-press)", "primary-soft": "var(--soft-active)",
+  danger: "var(--danger-active)", "danger-soft": "var(--danger-soft-active)",
+};
+/** Variants that change text color (+ underline) on hover instead of a background wash. */
+const colorHoverVariants = { text: "var(--text-heading)" };
+const sizes = {
+  sm: { height: 30, padding: "6px 12px", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", letterSpacing: 0, borderRadius: "var(--radius-md)" },
+  md: { height: 32, padding: "6px 12px", borderRadius: "var(--radius-md)" },
+  lg: { height: 35.5, padding: "8px 16px", fontWeight: "var(--weight-medium)", borderRadius: "var(--radius-lg)" },
+};
+const iconOnlyPad = { sm: 0, md: 0, lg: 0 };
+const iconOnlyBox = { sm: 30, md: 32, lg: 36 };
+
+function Spinner({ size, color }) {
+  return <span style={{ display: "inline-block", width: size, height: size, borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", opacity: .9, color, animation: "kb-spin .7s linear infinite", flexShrink: 0 }} />;
+}
+
+/** Keybricks button. variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm | md | lg. Interaction states: hover (one step darker) · press (two steps, set via mouse-down) · keyboard focus ring · loading · disabled. */
+export function Button({ variant = "primary", size = "md", icon, iconSize, iconPosition = "left", medium, disabled, loading, fullWidth, iconOnly, label, pressed, focused, children, style, onClick, ...rest }) {
+  const [hover, setHover] = React.useState(false);
+  const [press, setPress] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const busy = disabled || loading;
+  const isPressed = press || pressed;
+  const isFocused = focus || focused;
+  const s = {
+    ...btnBase, ...sizes[size], ...variants[variant],
+    ...(medium ? { fontWeight: "var(--weight-medium)" } : null),
+    ...(fullWidth ? { width: "100%" } : null),
+    ...(iconOnly ? { width: iconOnlyBox[size], padding: iconOnlyPad[size], gap: 0 } : null),
+    ...(busy ? { opacity: .55, cursor: "default" } : null),
+    ...style,
+  };
+  if (!busy) {
+    if (colorHoverVariants[variant]) {
+      if (hover || isPressed) { s.color = colorHoverVariants[variant]; s.textDecoration = "underline"; }
+      if (isPressed) s.opacity = .7;
+    } else if (isPressed) {
+      s.background = presses[variant];
+    } else if (hover) {
+      s.background = hovers[variant];
+    }
+    if (isFocused) s.boxShadow = "var(--ring-focus)";
+  }
+  const iSize = iconSize || (size === "sm" ? 12 : 14);
+  const leading = loading ? <Spinner size={iSize} color={s.color} /> : (icon && iconPosition === "left" ? <Icon name={icon} size={iSize} /> : null);
+  const trailing = !loading && icon && iconPosition === "right" ? <Icon name={icon} size={iSize} /> : null;
+  return (
+    <button type="button" data-press="own" style={s} disabled={busy} aria-label={iconOnly ? label : undefined} onClick={onClick}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
+      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
+      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPress(true); }} onKeyUp={() => setPress(false)}
+      onFocus={(e) => { try { setFocus(e.target.matches(":focus-visible")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)} {...rest}>
+      {leading}
+      {iconOnly ? null : children}
+      {trailing}
+    </button>
+  );
+}
+
+/** Attached row of Buttons sharing one outline (segmented action group). Children should be <Button variant="outline"> or similar. */
+export function ButtonGroup({ children, style }) {
+  const items = React.Children.toArray(children);
+  return (
+    <div style={{ display: "inline-flex", ...style }}>
+      {items.map((child, i) => React.cloneElement(child, {
+        key: i,
+        style: {
+          ...(child.props.style || {}),
+          borderRadius: 0,
+          ...(i === 0 ? { borderTopLeftRadius: "var(--radius-md)", borderBottomLeftRadius: "var(--radius-md)" } : null),
+          ...(i === items.length - 1 ? { borderTopRightRadius: "var(--radius-md)", borderBottomRightRadius: "var(--radius-md)" } : null),
+          marginLeft: i === 0 ? 0 : -1,
+        },
+      }))}
+    </div>
+  );
+}

package/components/buttons/Button.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed, ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+
+const btnBase = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', border: '1px solid transparent', cursor: 'pointer', whiteSpace: 'nowrap', boxSizing: 'border-box', background: 'transparent', transition: 'var(--t-hover)' }
+const variants = {
+  primary: { background: 'var(--action-primary)', color: 'var(--on-accent)' },
+  dark: { background: 'var(--action-dark)', color: 'var(--action-dark-fg)' },
+  outline: { background: 'var(--bg-surface)', color: 'var(--text-body)', borderColor: 'var(--border-control)' },
+  ghost: { color: 'var(--text-body)' },
+  'primary-soft': { background: 'var(--soft-bg)', color: 'var(--action-primary)', borderColor: 'var(--soft-border)' },
+  danger: { background: 'var(--danger)', color: 'var(--on-accent)' },
+  'danger-soft': { background: 'var(--danger-bg)', color: 'var(--danger-text)' },
+  text: { color: 'var(--text-secondary)', padding: '0', height: 'auto' },
+}
+const hovers = { primary: 'var(--action-primary-hover)', dark: 'var(--action-dark-hover)', outline: 'var(--bg-hover)', ghost: 'var(--bg-hover)', 'primary-soft': 'var(--soft-hover)', danger: 'var(--danger-text)', 'danger-soft': 'var(--danger-bg)' }
+const presses = { primary: 'var(--action-primary-active)', dark: 'var(--action-dark-active)', outline: 'var(--bg-press)', ghost: 'var(--bg-press)', 'primary-soft': 'var(--soft-active)', danger: 'var(--danger-active)', 'danger-soft': 'var(--danger-soft-active)' }
+const colorHoverVariants = { text: 'var(--text-heading)' }
+const sizes = {
+  sm: { height: 30, padding: '6px 12px', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', letterSpacing: 0, borderRadius: 'var(--radius-md)' },
+  md: { height: 32, padding: '6px 12px', borderRadius: 'var(--radius-md)' },
+  lg: { height: 35.5, padding: '8px 16px', fontWeight: 'var(--weight-medium)', borderRadius: 'var(--radius-lg)' },
+}
+const iconOnlyPad = { sm: 0, md: 0, lg: 0 }
+const iconOnlyBox = { sm: 30, md: 32, lg: 36 }
+
+// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm | md | lg.
+const props = defineProps({
+  variant: { type: String, default: 'primary' }, size: { type: String, default: 'md' },
+  icon: String, iconSize: Number, iconPosition: { type: String, default: 'left' },
+  medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,
+  label: String, pressed: Boolean, focused: Boolean, style: Object,
+})
+defineEmits(['click'])
+const hover = ref(false), press = ref(false), focus = ref(false)
+const busy = computed(() => props.disabled || props.loading)
+const isPressed = computed(() => press.value || props.pressed)
+const isFocused = computed(() => focus.value || props.focused)
+const s = computed(() => {
+  const base = { ...btnBase, ...sizes[props.size], ...variants[props.variant],
+    ...(props.medium ? { fontWeight: 'var(--weight-medium)' } : null),
+    ...(props.fullWidth ? { width: '100%' } : null),
+    ...(props.iconOnly ? { width: iconOnlyBox[props.size], padding: iconOnlyPad[props.size], gap: 0 } : null),
+    ...(busy.value ? { opacity: .55, cursor: 'default' } : null), ...props.style }
+  if (!busy.value) {
+    if (colorHoverVariants[props.variant]) {
+      if (hover.value || isPressed.value) { base.color = colorHoverVariants[props.variant]; base.textDecoration = 'underline' }
+      if (isPressed.value) base.opacity = .7
+    } else if (isPressed.value) base.background = presses[props.variant]
+    else if (hover.value) base.background = hovers[props.variant]
+    if (isFocused.value) base.boxShadow = 'var(--ring-focus)'
+  }
+  return base
+})
+const iSize = computed(() => props.iconSize || (props.size === 'sm' ? 12 : 14))
+</script>
+<template>
+  <button type="button" data-press="own" :style="s" :disabled="busy" :aria-label="iconOnly ? label : undefined"
+    @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
+    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
+    <span v-if="loading" :style="{ display: 'inline-block', width: iSize, height: iSize, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" />
+    <Icon v-else-if="icon && iconPosition === 'left'" :name="icon" :size="iSize" />
+    <slot v-if="!iconOnly" />
+    <Icon v-if="!loading && icon && iconPosition === 'right'" :name="icon" :size="iSize" />
+  </button>
+</template>
+
+<!-- ButtonGroup — attached row of Buttons sharing one outline (segmented action group). -->
+<!--
+<script setup name="ButtonGroup">
+import { useSlots, computed } from 'vue'
+const props = defineProps({ style: Object })
+const slots = useSlots()
+const items = computed(() => slots.default ? slots.default() : [])
+</script>
+<template>
+  <div :style="{ display: 'inline-flex', ...style }">
+    <template v-for="(child, i) in items" :key="i">
+      <component :is="child" :style="{ borderRadius: 0,
+        ...(i === 0 ? { borderTopLeftRadius: 'var(--radius-md)', borderBottomLeftRadius: 'var(--radius-md)' } : null),
+        ...(i === items.length - 1 ? { borderTopRightRadius: 'var(--radius-md)', borderBottomRightRadius: 'var(--radius-md)' } : null),
+        marginLeft: i === 0 ? 0 : -1 }" />
+    </template>
+  </div>
+</template>
+-->

package/components/buttons/IconButton.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+/** Square ghost icon button used in toolbars, headers, and panel chrome. */
+export interface IconButtonProps {
+  /** Icon glyph name */
+  icon: string;
+  /** xs 22/r8 · sm 26/r4 (view toggle) · md 28/r8 (toolbar) · lg 34/r8 (top bar) */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** Pressed/selected state (#f5f5f5 wash) */
+  active?: boolean;
+  /** Muted #a1a1a1 glyph */
+  muted?: boolean;
+  /** Red glyph + red-tint hover, for destructive icon actions */
+  danger?: boolean;
+  disabled?: boolean;
+  /** Shows a spinner in place of the icon and disables interaction */
+  loading?: boolean;
+  /** aria-label */
+  label?: string;
+  /** Force the press (mouse-down) styling — for specimens */
+  pressed?: boolean;
+  /** Force the keyboard-focus ring — for specimens */
+  focused?: boolean;
+  onClick?: () => void;
+  style?: React.CSSProperties;
+}
+export declare function IconButton(props: IconButtonProps): JSX.Element;

package/components/buttons/IconButton.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const ibSizes = { xs: { box: 22, icon: 14, radius: "var(--radius-md)" }, sm: { box: 26, icon: 14, radius: "var(--radius-sm)" }, md: { box: 28, icon: 16, radius: "var(--radius-md)" }, lg: { box: 34, icon: 18, radius: "var(--radius-md)" } };
+
+/** Square ghost icon button (toolbar/back/bell/view toggles). size: xs 22 | sm 26 | md 28 | lg 34. danger tints red; loading shows a spinner and disables interaction. States: hover · press · keyboard focus ring · active (persistent toggle-on) · disabled. */
+export function IconButton({ icon, size = "md", active, muted, danger, disabled, loading, label, pressed, focused, style, onClick, ...rest }) {
+  const [hover, setHover] = React.useState(false);
+  const [press, setPress] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const t = ibSizes[size];
+  const busy = disabled || loading;
+  const isPressed = (press || pressed) && !busy;
+  const color = danger ? "var(--danger)" : muted ? "var(--text-muted)" : "var(--text-body)";
+  const bg = isPressed ? (danger ? "var(--danger-soft-active)" : "var(--bg-press)")
+    : active ? "var(--bg-active)"
+    : hover && !busy ? (danger ? "var(--danger-bg)" : "var(--bg-hover)") : "transparent";
+  return (
+    <button type="button" data-press="own" aria-label={label} disabled={busy} onClick={onClick}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
+      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
+      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setPress(true); }} onKeyUp={() => setPress(false)}
+      onFocus={(e) => { try { setFocus(e.target.matches(":focus-visible")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)}
+      style={{ width: t.box, height: t.box, borderRadius: t.radius, border: "none", cursor: busy ? "default" : "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", background: bg, color, opacity: busy ? .5 : 1, boxShadow: (focus || focused) && !busy ? "var(--ring-focus)" : "none", transition: "var(--t-hover)", padding: 0, flexShrink: 0, ...style }} {...rest}>
+      {loading ? <span style={{ display: "inline-block", width: t.icon, height: t.icon, borderRadius: "var(--radius-full)", border: "2px solid currentColor", borderTopColor: "transparent", animation: "kb-spin .7s linear infinite" }} /> : <Icon name={icon} size={t.icon} />}
+    </button>
+  );
+}

package/components/buttons/IconButton.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+const ibSizes = { xs: { box: 22, icon: 14, radius: 'var(--radius-md)' }, sm: { box: 26, icon: 14, radius: 'var(--radius-sm)' }, md: { box: 28, icon: 16, radius: 'var(--radius-md)' }, lg: { box: 34, icon: 18, radius: 'var(--radius-md)' } }
+// Square ghost icon button (toolbar/back/bell/view toggles). size: xs 22 | sm 26 | md 28 | lg 34.
+const props = defineProps({ icon: String, size: { type: String, default: 'md' }, active: Boolean, muted: Boolean, danger: Boolean, disabled: Boolean, loading: Boolean, label: String, pressed: Boolean, focused: Boolean, style: Object })
+defineEmits(['click'])
+const hover = ref(false), press = ref(false), focus = ref(false)
+const t = computed(() => ibSizes[props.size])
+const busy = computed(() => props.disabled || props.loading)
+const isPressed = computed(() => (press.value || props.pressed) && !busy.value)
+const color = computed(() => props.danger ? 'var(--danger)' : props.muted ? 'var(--text-muted)' : 'var(--text-body)')
+const bg = computed(() => isPressed.value ? (props.danger ? 'var(--danger-soft-active)' : 'var(--bg-press)') : props.active ? 'var(--bg-active)' : (hover.value && !busy.value ? (props.danger ? 'var(--danger-bg)' : 'var(--bg-hover)') : 'transparent'))
+const s = computed(() => ({ width: t.value.box, height: t.value.box, borderRadius: t.value.radius, border: 'none', cursor: busy.value ? 'default' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: bg.value, color: color.value, opacity: busy.value ? .5 : 1, boxShadow: (focus.value || props.focused) && !busy.value ? 'var(--ring-focus)' : 'none', transition: 'var(--t-hover)', padding: 0, flexShrink: 0, ...props.style }))
+</script>
+<template>
+  <button type="button" data-press="own" :aria-label="label" :disabled="busy" @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false" @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false" @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false" :style="s">
+    <span v-if="loading" :style="{ display: 'inline-block', width: t.icon, height: t.icon, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', animation: 'kb-spin .7s linear infinite' }" />
+    <Icon v-else :name="icon" :size="t.icon" />
+  </button>
+</template>

package/components/buttons/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x70" name="Buttons dir" subtitle="Full card: Components → Button" -->
+<!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 { Button } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<Button icon="send">Submit</Button>);
+</script></body></html>

package/components/buttons/buttons.prompt.md

@@ -0,0 +1,19 @@
+Buttons: `Button` (primary/dark/outline/ghost/primary-soft; sm/md/lg), `IconButton` (square ghost), `ActionChip` (tinted bulk actions).
+
+```jsx
+<Button icon="send">Submit</Button>
+<Button variant="dark" icon="sparkles">AI Assistant</Button>
+<Button variant="ghost" icon="play">Run Test</Button>
+<Button variant="text">Cancel</Button>
+<Button variant="primary-soft" icon="eye" size="sm">Data Preview</Button>
+<Button variant="danger" icon="trash-2">Delete Node</Button>
+<Button loading>Submit</Button>
+<Button icon="bell" iconOnly label="Notifications" variant="outline"/>
+<Button fullWidth icon="upload">Upload Configuration File</Button>
+<ButtonGroup><Button variant="outline" size="sm">Day</Button><Button variant="outline" size="sm">Week</Button></ButtonGroup>
+<IconButton icon="bell" size="lg"/>
+<IconButton icon="trash-2" danger label="Delete"/>
+<ActionChip tone="success">Mark as New</ActionChip>
+```
+
+Primary = the single blue CTA per view. Dark = brand-level actions (AI Assistant, Show). Ghost text buttons sit beside the CTA ("Back", "Run Test"). `text` = no background/border ever, underlines on hover — for tertiary actions like "Cancel"/"View all", never a page's main action. Danger/danger-soft = destructive actions. lg (r10, 500 weight) only in wizard footers. `loading` swaps the icon for a spinner and disables the button without changing its size; `iconOnly` needs a `label` for accessibility; `ButtonGroup` fuses adjacent buttons into one segmented control or a split button (main action + attached icon-only).

package/components/charts/Bar3D.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface Bar3DSeries { name: string; values: number[]; color?: string; }
+/** 3D cuboid bars — categories on x, series as depth rows or stacked; drag to orbit. */
+export interface Bar3DProps {
+  series?: Bar3DSeries[];
+  categories?: string[];
+  mode?: "grouped" | "stacked";
+  width?: number; height?: number;
+  yaw?: number; pitch?: number;
+  /** Fraction of each cell left empty, 0–1 */ gap?: number;
+  interactive?: boolean;
+  valueFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function Bar3D(props: Bar3DProps): JSX.Element;