@keyfunc/keybricks-ds 1.0.0

package/components/forms/Select.vue

@@ -0,0 +1,16 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+// Native select styled per Keybricks. size md 36/r8 · sm 25/r4 (table rows). disabled = inset fill (matches Input readonly), 50% opacity; error = red border.
+const props = defineProps({ modelValue: String, options: { type: Array, default: () => [] }, size: { type: String, default: 'md' }, placeholder: String, disabled: Boolean, error: Boolean, style: Object })
+defineEmits(['update:modelValue'])
+</script>
+<template>
+  <div :style="{ position: 'relative', display: 'inline-flex', ...style }">
+    <select :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" :disabled="disabled"
+      :style="{ appearance: 'none', height: size === 'sm' ? 25 : 36, borderRadius: size === 'sm' ? 'var(--radius-sm)' : 'var(--radius-md)', border: `1px solid ${error ? 'var(--danger)' : 'var(--border-control)'}`, background: disabled ? 'var(--bg-inset)' : 'var(--bg-surface)', padding: size === 'sm' ? '0 26px 0 10px' : '0 32px 0 12px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: disabled ? 'var(--text-secondary)' : modelValue ? 'var(--text-primary)' : 'var(--text-muted)', outline: 'none', cursor: disabled ? 'not-allowed' : 'pointer', width: '100%', opacity: disabled ? .5 : 1 }">
+      <option v-if="placeholder" value="" disabled hidden>{{ placeholder }}</option>
+      <option v-for="o in options" :key="o" :value="o">{{ o }}</option>
+    </select>
+    <span :style="{ position: 'absolute', right: size === 'sm' ? 8 : 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: 'var(--text-muted)' }"><Icon name="chevron-down" :size="size === 'sm' ? 12 : 14" /></span>
+  </div>
+</template>

package/components/forms/Slider.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+/** Range slider with filled blue track, ring knob, drag value bubble and optional min/max labels. */
+export interface SliderProps {
+  value?: number; min?: number; max?: number; step?: number;
+  /** Show min/max labels under the track */
+  labels?: boolean;
+  /** Always show the value bubble (default: only while dragging) */
+  showValue?: boolean;
+  unit?: string;
+  disabled?: boolean;
+  width?: number | string;
+  onChange?: (value: number) => void;
+  style?: React.CSSProperties;
+}

package/components/forms/Slider.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+/** Range slider: blue filled track, 16px knob, optional min/max labels and a value bubble while dragging (or always with showValue). */
+export function Slider({ value = 50, min = 0, max = 100, step = 1, labels, showValue, unit = "", disabled, width, onChange, style }) {
+  const [drag, setDrag] = React.useState(false);
+  const pct = ((value - min) / (max - min)) * 100;
+  const track = React.useRef(null);
+  const set = (clientX) => { const r = track.current.getBoundingClientRect(); const p = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); const raw = min + p * (max - min); const snapped = Math.round(raw / step) * step; onChange && onChange(Math.min(max, Math.max(min, snapped))); };
+  React.useEffect(() => { if (!drag) return; const mv = (e) => set(e.clientX), up = () => setDrag(false); document.addEventListener("mousemove", mv); document.addEventListener("mouseup", up); return () => { document.removeEventListener("mousemove", mv); document.removeEventListener("mouseup", up); }; }, [drag]);
+  return (
+    <div style={{ width, opacity: disabled ? .5 : 1, ...style }}>
+      <div ref={track} onMouseDown={disabled ? undefined : (e) => { setDrag(true); set(e.clientX); }} style={{ position: "relative", height: 20, display: "flex", alignItems: "center", cursor: disabled ? "not-allowed" : "pointer" }}>
+        <div style={{ position: "absolute", left: 0, right: 0, height: 6, borderRadius: "var(--radius-full)", background: "var(--track)" }}></div>
+        <div style={{ position: "absolute", left: 0, width: pct + "%", height: 6, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }}></div>
+        <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", width: 16, height: 16, borderRadius: "var(--radius-full)", background: "var(--bg-surface)", border: "2px solid var(--action-primary)", boxSizing: "border-box", boxShadow: "0 1px 2px rgba(0,0,0,.15)" }}></span>
+        {(drag || showValue) && <span style={{ position: "absolute", left: pct + "%", transform: "translateX(-50%)", bottom: 22, background: "var(--tooltip-bg)", color: "var(--tooltip-fg)", borderRadius: "var(--radius-sm)", padding: "2px 6px", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", whiteSpace: "nowrap", pointerEvents: "none" }}>{value}{unit}</span>}
+      </div>
+      {labels && <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 4, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}><span>{min}{unit}</span><span>{max}{unit}</span></div>}
+    </div>
+  );
+}

package/components/forms/Slider.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { ref, computed, onUnmounted, watch } from 'vue'
+// Range slider: blue filled track, 16px knob, drag value bubble, optional min/max labels.
+const props = defineProps({ modelValue: { type: Number, default: 50 }, min: { type: Number, default: 0 }, max: { type: Number, default: 100 }, step: { type: Number, default: 1 }, labels: Boolean, showValue: Boolean, unit: { type: String, default: '' }, disabled: Boolean, width: [Number, String], style: Object })
+const emit = defineEmits(['update:modelValue'])
+const drag = ref(false), track = ref(null)
+const pct = computed(() => ((props.modelValue - props.min) / (props.max - props.min)) * 100)
+function set(clientX) { const r = track.value.getBoundingClientRect(); const p = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); const raw = props.min + p * (props.max - props.min); emit('update:modelValue', Math.min(props.max, Math.max(props.min, Math.round(raw / props.step) * props.step))) }
+const mv = (e) => set(e.clientX), up = () => drag.value = false
+watch(drag, (on) => { if (on) { document.addEventListener('mousemove', mv); document.addEventListener('mouseup', up) } else { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up) } })
+onUnmounted(up)
+</script>
+<template>
+  <div :style="{ width: typeof width === 'number' ? width + 'px' : width, opacity: disabled ? .5 : 1, ...style }">
+    <div ref="track" @mousedown="!disabled && (drag = true, set($event.clientX))" :style="{ position: 'relative', height: '20px', display: 'flex', alignItems: 'center', cursor: disabled ? 'not-allowed' : 'pointer' }">
+      <div style="position:absolute;left:0;right:0;height:6px;border-radius:var(--radius-full);background:var(--track)" />
+      <div :style="{ position: 'absolute', left: 0, width: pct + '%', height: '6px', borderRadius: 'var(--radius-full)', background: 'var(--action-primary)' }" />
+      <span :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', width: '16px', height: '16px', borderRadius: 'var(--radius-full)', background: 'var(--bg-surface)', border: '2px solid var(--action-primary)', boxSizing: 'border-box', boxShadow: '0 1px 2px rgba(0,0,0,.15)' }" />
+      <span v-if="drag || showValue" :style="{ position: 'absolute', left: pct + '%', transform: 'translateX(-50%)', bottom: '22px', background: 'var(--tooltip-bg)', color: 'var(--tooltip-fg)', borderRadius: 'var(--radius-sm)', padding: '2px 6px', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', whiteSpace: 'nowrap', pointerEvents: 'none' }">{{ modelValue }}{{ unit }}</span>
+    </div>
+    <div v-if="labels" style="display:flex;justify-content:space-between;padding-top:4px;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted)"><span>{{ min }}{{ unit }}</span><span>{{ max }}{{ unit }}</span></div>
+  </div>
+</template>

package/components/forms/Switch.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/** 34×20 switch for settings-style booleans. Addition — not in the source file. */
+export interface SwitchProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  size?: "md" | "sm";
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Switch(props: SwitchProps): JSX.Element;
+/** 16px (sm: 13px) radio. Addition — not in the source file. */
+export interface RadioProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  size?: "md" | "sm";
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Radio(props: RadioProps): JSX.Element;
+/** Radio set; `row` lays them horizontally. */
+export interface RadioGroupProps {
+  options?: string[];
+  value?: string;
+  onChange?: (value: string) => void;
+  row?: boolean;
+  size?: "md" | "sm";
+  style?: React.CSSProperties;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;

package/components/forms/Switch.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+const switchDims = { sm: { w: 28, h: 16, knob: 12 }, md: { w: 34, h: 20, knob: 16 } };
+/** Switch — 34×20 (sm: 28×16) track, knob. Keybricks has no switch in the source file; this follows the button radii + action color. */
+export function Switch({ checked, onChange, label, size = "md", disabled, style }) {
+  const d = switchDims[size] || switchDims.md;
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 8, cursor: disabled ? "default" : "pointer", opacity: disabled ? .5 : 1, ...style }}
+      onClick={() => !disabled && onChange && onChange(!checked)}>
+      <span style={{ width: d.w, height: d.h, borderRadius: "var(--radius-full)", background: checked ? "var(--action-primary)" : "var(--track)", position: "relative", flexShrink: 0, transition: "var(--t-hover)" }}>
+        <span style={{ position: "absolute", top: 2, left: checked ? d.w - d.knob - 2 : 2, width: d.knob, height: d.knob, borderRadius: "var(--radius-full)", background: "var(--on-accent)", boxShadow: "0 1px 2px rgba(0,0,0,.2)", transition: "left var(--dur-fast) var(--ease-out)" }} />
+      </span>
+      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
+    </label>
+  );
+}
+
+const radioDims = { sm: { box: 13, dot: 6 }, md: { box: 16, dot: 8 } };
+/** Radio — 16px (sm: 13px) circle, 1.5px border, filled dot when selected. */
+export function Radio({ checked, onChange, label, size = "md", disabled, style }) {
+  const d = radioDims[size] || radioDims.md;
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", lineHeight: "var(--leading-sm)", gap: 6, cursor: disabled ? "default" : "pointer", opacity: disabled ? .5 : 1, ...style }}
+      onClick={() => !disabled && onChange && onChange(true)}>
+      <span style={{ width: d.box, height: d.box, borderRadius: "var(--radius-full)", boxSizing: "border-box", border: `1.5px solid ${checked ? "var(--action-primary)" : "var(--checkbox-border)"}`, background: "var(--bg-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "var(--t-hover)" }}>
+        {checked ? <span style={{ width: d.dot, height: d.dot, borderRadius: "var(--radius-full)", background: "var(--action-primary)" }} /> : null}
+      </span>
+      {label ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-body)" }}>{label}</span> : null}
+    </label>
+  );
+}
+
+/** Vertical or horizontal group of Radios. */
+export function RadioGroup({ options = [], value, onChange, row, size = "md", style }) {
+  return (
+    <div style={{ display: "flex", flexDirection: row ? "row" : "column", gap: row ? 16 : 10, ...style }}>
+      {options.map((o) => <Radio key={o} label={o} size={size} checked={value === o} onChange={() => onChange && onChange(o)} />)}
+    </div>
+  );
+}

package/components/forms/Switch.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { computed } from 'vue'
+// Switch — 34×20 (sm: 28×16) track, knob.
+const dims = { sm: { w: 28, h: 16, knob: 12 }, md: { w: 34, h: 20, knob: 16 } }
+const props = defineProps({ modelValue: Boolean, label: String, size: { type: String, default: 'md' }, disabled: Boolean, style: Object })
+const emit = defineEmits(['update:modelValue'])
+const d = computed(() => dims[props.size] || dims.md)
+</script>
+<template>
+  <label :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', lineHeight: 'var(--leading-sm)', gap: 8, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .5 : 1, ...style }" @click="!disabled && emit('update:modelValue', !modelValue)">
+    <span :style="{ width: d.w + 'px', height: d.h + 'px', borderRadius: 'var(--radius-full)', background: modelValue ? 'var(--action-primary)' : 'var(--track)', position: 'relative', flexShrink: 0, transition: 'var(--t-hover)' }">
+      <span :style="{ position: 'absolute', top: '2px', left: (modelValue ? d.w - d.knob - 2 : 2) + 'px', width: d.knob + 'px', height: d.knob + 'px', borderRadius: 'var(--radius-full)', background: 'var(--on-accent)', boxShadow: '0 1px 2px rgba(0,0,0,.2)', transition: 'left var(--dur-fast) var(--ease-out)' }" />
+    </span>
+    <span v-if="label" :style="{ fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-body)' }">{{ label }}</span>
+  </label>
+</template>

package/components/forms/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x60" name="Forms dir" subtitle="Full cards: Components → Input / Select / Checkbox / 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 { Input } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<Input placeholder="See Components tab for full states" style={{maxWidth:320}}/>);
+</script></body></html>

package/components/forms/forms.prompt.md

@@ -0,0 +1,23 @@
+Form controls, split by component (each with its own specimen card covering default/disabled/error/edge cases): `Field` (label wrapper, now with `hint`/`error`), `Input`/`Textarea` (readOnly/disabled/error, `Textarea` adds `showCount`+`maxLength`), `Select` (md/sm, `placeholder`, disabled, error), `SearchInput` (bordered/bare, built-in clear button, disabled), `Checkbox` (checked/indeterminate/disabled, md/sm), `NumberStepper` (disables at `min`/`max`), `Dropzone` (empty/uploaded via `file`+`onRemove`/error/disabled).
+
+```jsx
+<Field label="Node Name" required error="Node Name is required"><Input error/></Field>
+<Field label="Node Description" hint="Keep it under 120 characters">
+  <Textarea showCount maxLength={120} value={text} onChange={e=>setText(e.target.value)}/>
+</Field>
+<Select options={["New","Overwrite","Skip"]} placeholder="Choose an action"/>
+<SearchInput defaultValue="Budget 2026"/>
+<Checkbox label="3 of 7 selected" indeterminate/>
+<NumberStepper value={500} max={500}/>
+<Dropzone file="migration-config.json" onRemove={remove}/>
+```
+
+Everything is 12px text in 36px controls; readOnly inputs go #fafafa; disabled = 50% opacity; error = red border + red helper text via `Field`'s `error` prop.
+
+
+`Switch` / `Radio` / `RadioGroup` (additions, not in the source file):
+
+```jsx
+<Switch label="Debug Mode" checked={on} onChange={setOn}/>
+<RadioGroup options={["New","Overwrite","Skip"]} value={v} onChange={setV}/>
+```

package/components/icons/Icon.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * Lucide-style stroke icon from the Keybricks glyph map.
+ */
+export interface IconProps {
+  /** Glyph name, e.g. "search", "database", "shuffle", "chevron-down" */
+  name: string;
+  /** Rendered size in px (default 16; the UI uses 14/16/18/22) */
+  size?: number;
+  /** Stroke width on the 24-grid (default 2) */
+  strokeWidth?: number;
+  /** Overrides currentColor */
+  color?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Icon(props: IconProps): JSX.Element;
+/** name → inner SVG markup (24-grid) */
+export declare const ICON_PATHS: Record<string, string>;

package/components/icons/Icon.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+// Keybricks icon set — the source file uses Lucide stroke glyphs (24-grid, stroke 2,
+// round caps/joins, currentColor) rendered at 14/16px. Path data below is from the
+// public Lucide set, matching the glyphs used across Keyfunc UI v8.
+export const ICON_PATHS = {
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  bell: '<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>',
+  sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
+  "panel-left": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/>',
+  house: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+  file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
+  "file-text": '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
+  "file-check": '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m9 15 2 2 4-4"/>',
+  "layout-grid": '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
+  database: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>',
+  scale: '<path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>',
+  network: '<rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/>',
+  folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+  "folder-open": '<path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>',
+  "folder-cog": '<path d="M10.5 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3"/><circle cx="18" cy="18" r="3"/><path d="M18 14v1"/><path d="M18 21v1"/><path d="M22 18h-1"/><path d="M15 18h-1"/><path d="m21.2 16.2-.9.5"/><path d="m15.7 19.3-.9.5"/><path d="m21.2 19.8-.9-.5"/><path d="m15.7 16.7-.9-.5"/>',
+  settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+  "settings-2": '<path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/>',
+  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+  "circle-help": '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+  box: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
+  workflow: '<rect width="8" height="8" x="3" y="3" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect width="8" height="8" x="13" y="13" rx="2"/>',
+  shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+  "refresh-cw": '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+  "chart-line": '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/>',
+  "chart-column": '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
+  "chart-no-axes-column": '<line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/>',
+  "list-todo": '<rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>',
+  "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+  target: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
+  "book-open": '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "chevron-up": '<path d="m18 15-6-6-6 6"/>',
+  "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+  "arrow-right-left": '<path d="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/>',
+  table: '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
+  layers: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+  "grid-3x3": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/>',
+  "text-search": '<path d="M21 6H3"/><path d="M10 12H3"/><path d="M10 18H3"/><circle cx="17" cy="15" r="3"/><path d="m21 19-1.9-1.9"/>',
+  shuffle: '<path d="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22"/><path d="m18 2 4 4-4 4"/><path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2"/><path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8"/><path d="m18 14 4 4-4 4"/>',
+  split: '<path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"/><path d="m15 9 6-6"/>',
+  menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
+  list: '<line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/>',
+  funnel: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
+  "sliders-horizontal": '<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>',
+  "trending-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
+  code: '<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>',
+  merge: '<path d="m8 6 4-4 4 4"/><path d="M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22"/><path d="m20 22-5-5"/>',
+  upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
+  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  minus: '<path d="M5 12h14"/>',
+  ellipsis: '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
+  play: '<polygon points="6 3 20 12 6 21 6 3"/>',
+  send: '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>',
+  eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+  copy: '<rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  "trash-2": '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+  clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
+  "undo-2": '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>',
+  "redo-2": '<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"/>',
+  history: '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
+  bug: '<path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/>',
+  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  "triangle-alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
+};
+
+import { FEATHER_PATHS } from "./feather-paths.js";
+
+/** Lucide-style stroke icon. name: key of ICON_PATHS (core set) or any Feather icon name (feather-paths.js fallback); size in px; strokeWidth defaults to 2 (24-grid). Browse both sets with keywords in the Icon Gallery card. */
+export function Icon({ name, size = 16, strokeWidth = 2, color, style, className }) {
+  const body = ICON_PATHS[name] || FEATHER_PATHS[name] || "";
+  return (
+    <svg
+      width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
+      className={className}
+      style={{ display: "block", flexShrink: 0, color, ...style }}
+      dangerouslySetInnerHTML={{ __html: body }}
+    />
+  );
+}

package/components/icons/Icon.prompt.md

@@ -0,0 +1,8 @@
+Stroke icon component embedding the Lucide glyphs used across Keybricks; use for every icon — never emoji or hand-drawn SVG.
+
+```jsx
+<Icon name="search" size={16} />
+<Icon name="database" size={18} color="var(--cat-source)" />
+```
+
+Sizes in the product: 14 (dense chrome), 16 (nav/buttons), 18 (palette tiles), 22 (node tiles). Color inherits `currentColor`. Categories pair hue + tint bg: source `database/table/layers/grid-3x3`, join `text-search/shuffle`, transform `sliders-horizontal/split/arrow-right-left/menu/funnel/chart-no-axes-column/trending-up/code`, merge `database/merge`, output `table/layers/grid-3x3`.

package/components/icons/Icon.vue

@@ -0,0 +1,12 @@
+<script setup>
+// Keybricks icon set — Lucide stroke glyphs (24-grid, stroke 2, round caps/joins, currentColor), rendered at 14/16px.
+// Full path dictionary mirrors icons/Icon.jsx's ICON_PATHS (80+ entries) — see that file for the complete list.
+import { VUE_ICON_PATHS } from './icon-paths.js'
+import { FEATHER_PATHS } from './feather-paths.js'
+const props = defineProps({ name: String, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 2 }, color: String, style: Object })
+const body = (n) => VUE_ICON_PATHS[n] || FEATHER_PATHS[n] || ''
+</script>
+<template>
+  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" stroke="currentColor" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"
+    :style="{ display: 'block', flexShrink: 0, color, ...style }" v-html="body(name)" />
+</template>

package/components/icons/Unicon.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+/** Unicons line-style glyph rendered from the official Unicons CDN webfont (uil-*). 1,206 names — see assets/icons/unicons-index.json for the name + keyword index. */
+export interface UniconProps {
+  /** Unicons name without the uil- prefix, e.g. "chart-pie-alt" */
+  name: string;
+  /** Font size in px (default 16) */
+  size?: number;
+  color?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}

package/components/icons/Unicon.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+let uniconsCss = false;
+function ensureUniconsCss() {
+  if (uniconsCss || document.getElementById("kb-unicons-css")) { uniconsCss = true; return; }
+  const l = document.createElement("link");
+  l.id = "kb-unicons-css"; l.rel = "stylesheet";
+  l.href = "https://unicons.iconscout.com/release/v4.0.8/css/line.css";
+  document.head.appendChild(l); uniconsCss = true;
+}
+
+/** Unicons line icon (iconscout.com/unicons, Apache 2.0) — 1,206 glyphs loaded from the official Unicons CDN webfont. name is the Unicons id without the "uil-" prefix (e.g. "chart-pie-alt"). Browse names + keywords in the Unicons gallery card; keyword index lives in assets/icons/unicons-index.json. */
+export function Unicon({ name, size = 16, color, style, className }) {
+  React.useEffect(ensureUniconsCss, []);
+  return <i aria-hidden="true" className={"uil uil-" + name + (className ? " " + className : "")} style={{ fontSize: size, lineHeight: 1, display: "inline-block", flexShrink: 0, fontStyle: "normal", color, ...style }}></i>;
+}

package/components/icons/Unicon.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { onMounted } from 'vue'
+// Unicons line icon — 1,206 glyphs from the official Unicons CDN webfont. name = Unicons id without "uil-".
+const props = defineProps({ name: String, size: { type: Number, default: 16 }, color: String, style: Object })
+onMounted(() => {
+  if (document.getElementById('kb-unicons-css')) return
+  const l = document.createElement('link')
+  l.id = 'kb-unicons-css'; l.rel = 'stylesheet'
+  l.href = 'https://unicons.iconscout.com/release/v4.0.8/css/line.css'
+  document.head.appendChild(l)
+})
+</script>
+<template>
+  <i aria-hidden="true" :class="'uil uil-' + name" :style="{ fontSize: size + 'px', lineHeight: 1, display: 'inline-block', flexShrink: 0, fontStyle: 'normal', color, ...style }" />
+</template>

package/components/icons/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x60" name="Icons dir" subtitle="Full card: Components → Icons" -->
+<!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 { Icon } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<div style={{display:"flex",gap:10}}><Icon name="search"/><Icon name="database"/><Icon name="shuffle"/></div>);
+</script></body></html>