@keyfunc/keybricks-ds 1.0.0

package/components/data/data.prompt.md

@@ -0,0 +1,33 @@
+Data lists: `DataTable` (hairline table, mono cells, selectable, dense preview mode) and `ListRow` (expandable workflow rows in a `Card pad={false}`).
+
+```jsx
+<DataTable selectable columns={[
+  {key:"module",label:"Module"},
+  {key:"code",label:"Code",mono:true},
+  {key:"cur",label:"Current Value"},
+  {key:"next",label:"New Value"},
+]} rows={[{module:"Financial Settings",code:"FIN_CURRENCY_DEFAULT",cur:"USD",next:"EUR"}]}/>
+<ListRow icon="chart-line" title="Business Analysis" meta="1 document" trailing="1 item"/>
+```
+
+dense mode = 29px rows/11px headers for the pipeline data-preview drawer.
+
+`Pagination` (addition) sits under a table:
+
+```jsx
+<Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/>
+```
+
+`KeyValue`/`KeyValueList` and `DiffValue` (additions) — formalize the label/value and before→after patterns used throughout config and confirmation steps:
+
+```jsx
+<KeyValueList rows={[{label:"Node Type",value:"Data Source · Detail Sheet"},{label:"Node Name",value:"Sales Orders"}]}/>
+<DiffValue from="USD" to="EUR" tone="warning"/>
+<DiffValue to="8" tone="success"/>
+```
+
+`CodeBlock` (addition) — SQL Preview / JSON export display with a copy button:
+
+```jsx
+<CodeBlock language="sql" code={"SELECT * FROM sales_orders"}/>
+```

package/components/display/Avatar.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/**
+ * Initials avatar (tinted from the category palette). The source file ships no avatar
+ * imagery — people render as initials unless you pass a real `src`. Addition.
+ */
+export interface AvatarProps {
+  name?: string;
+  /** Real image URL; omit for initials */
+  src?: string;
+  size?: number;
+  style?: React.CSSProperties;
+}
+export declare function Avatar(props: AvatarProps): JSX.Element;
+/** Overlapping avatar row with a +N overflow chip. */
+export interface AvatarGroupProps {
+  names?: string[];
+  size?: number;
+  max?: number;
+  style?: React.CSSProperties;
+}
+export declare function AvatarGroup(props: AvatarGroupProps): JSX.Element;

package/components/display/Avatar.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+const palette = ["var(--cat-join)", "var(--cat-source)", "var(--cat-transform)", "var(--cat-merge)", "var(--cat-output)"];
+function initials(name = "") {
+  const parts = name.trim().split(/\s+/);
+  if (!parts[0]) return "?";
+  if (/[\u4e00-\u9fff]/.test(name)) return name.slice(-2);
+  return (parts[0][0] + (parts[1] ? parts[1][0] : "")).toUpperCase();
+}
+
+/** Initials avatar — the source file ships no avatar imagery, so people render as tinted initials. */
+export function Avatar({ name = "", src, size = 28, style }) {
+  const hue = palette[[...name].reduce((a, c) => a + c.charCodeAt(0), 0) % palette.length];
+  if (src) return <img src={src} alt={name} style={{ width: size, height: size, borderRadius: "var(--radius-full)", objectFit: "cover", flexShrink: 0, ...style }} />;
+  return (
+    <span title={name} style={{ width: size, height: size, borderRadius: "var(--radius-full)", background: "var(--bg-hover)", color: hue, display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: Math.max(9, Math.round(size * .4)), letterSpacing: 0, flexShrink: 0, boxSizing: "border-box", border: "1px solid var(--border-card)", ...style }}>
+      {initials(name)}
+    </span>
+  );
+}
+
+/** Overlapping avatar row (assignees on a task). */
+export function AvatarGroup({ names = [], size = 24, max = 4, style }) {
+  const shown = names.slice(0, max), rest = names.length - shown.length;
+  return (
+    <div style={{ display: "flex", alignItems: "center", ...style }}>
+      {shown.map((n, i) => <Avatar key={n + i} name={n} size={size} style={{ marginLeft: i ? -8 : 0, boxShadow: "var(--ring-surface)" }} />)}
+      {rest > 0 ? <span style={{ marginLeft: -8, width: size, height: size, borderRadius: "var(--radius-full)", background: "var(--bg-active)", color: "var(--text-secondary)", boxShadow: "var(--ring-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontSize: Math.max(9, Math.round(size * .38)) }}>+{rest}</span> : null}
+    </div>
+  );
+}

package/components/display/Avatar.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+const palette = ['var(--cat-join)', 'var(--cat-source)', 'var(--cat-transform)', 'var(--cat-merge)', 'var(--cat-output)']
+function initials(name = '') {
+  const parts = name.trim().split(/\s+/)
+  if (!parts[0]) return '?'
+  if (/[\u4e00-\u9fff]/.test(name)) return name.slice(-2)
+  return (parts[0][0] + (parts[1] ? parts[1][0] : '')).toUpperCase()
+}
+// Initials avatar — the source file ships no avatar imagery, so people render as tinted initials.
+const props = defineProps({ name: { type: String, default: '' }, src: String, size: { type: Number, default: 28 }, style: Object })
+const hue = computed(() => palette[[...props.name].reduce((a, c) => a + c.charCodeAt(0), 0) % palette.length])
+</script>
+<template>
+  <img v-if="src" :src="src" :alt="name" :style="{ width: size, height: size, borderRadius: 'var(--radius-full)', objectFit: 'cover', flexShrink: 0, ...style }" />
+  <span v-else :title="name" :style="{ width: size, height: size, borderRadius: 'var(--radius-full)', background: 'var(--bg-hover)', color: hue, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: Math.max(9, Math.round(size * .4)), letterSpacing: 0, flexShrink: 0, boxSizing: 'border-box', border: '1px solid var(--border-card)', ...style }">{{ initials(name) }}</span>
+</template>
+
+<!-- AvatarGroup — overlapping avatar row (assignees on a task). -->
+<!--
+<script setup name="AvatarGroup">
+import { computed } from 'vue'
+import Avatar from './Avatar.vue'
+const props = defineProps({ names: { type: Array, default: () => [] }, size: { type: Number, default: 24 }, max: { type: Number, default: 4 }, style: Object })
+const shown = computed(() => props.names.slice(0, props.max))
+const rest = computed(() => props.names.length - shown.value.length)
+</script>
+<template>
+  <div :style="{ display: 'flex', alignItems: 'center', ...style }">
+    <Avatar v-for="(n, i) in shown" :key="n + i" :name="n" :size="size" :style="{ marginLeft: i ? -8 : 0, boxShadow: 'var(--ring-surface)' }" />
+    <span v-if="rest > 0" :style="{ marginLeft: -8, width: size, height: size, borderRadius: 'var(--radius-full)', background: 'var(--bg-active)', color: 'var(--text-secondary)', boxShadow: 'var(--ring-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontSize: Math.max(9, Math.round(size * .38)) }">+{{ rest }}</span>
+  </div>
+</template>
+-->

package/components/display/Badge.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/** Solid circular badge with 2px white ring — error/warning dots on nodes, stepper circles. */
+export interface StatusBadgeProps {
+  tone?: "success" | "danger" | "warning" | "pending" | "info";
+  /** Optional glyph (check, x, bug, clock, ...) */
+  icon?: string;
+  /** Diameter px (13 node dot · 20 overlay · 32 stepper) */
+  size?: number;
+  ring?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function StatusBadge(props: StatusBadgeProps): JSX.Element;
+/** Tinted pill text badge for table statuses. 20px, 11px/500. */
+export interface BadgeProps {
+  tone?: "success" | "danger" | "warning" | "info" | "neutral";
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Badge(props: BadgeProps): JSX.Element;
+/** Tinted category icon tile. hue: source|join|transform|merge|output; kind: palette 40/r14 · node 48/r16 · row 32/r8. */
+export interface IconTileProps {
+  icon: string;
+  hue?: "source" | "join" | "transform" | "merge" | "output";
+  kind?: "palette" | "node" | "row";
+  style?: React.CSSProperties;
+}
+export declare function IconTile(props: IconTileProps): JSX.Element;

package/components/display/Badge.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const badgeTones = {
+  success: "var(--success)", danger: "var(--danger)", warning: "var(--warning)",
+  pending: "var(--dot-neutral)", info: "var(--action-primary)",
+};
+
+/** Circular status badge with white ring (node error/warning dots, step icons). */
+export function StatusBadge({ tone = "danger", icon, size = 20, ring = true, style }) {
+  return (
+    <span style={{ width: size, height: size, borderRadius: "var(--radius-full)", background: badgeTones[tone], boxShadow: ring ? "var(--ring-surface)" : "none", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--on-accent)", flexShrink: 0, ...style }}>
+      {icon ? <Icon name={icon} size={Math.round(size * .6)} strokeWidth={2.5} /> : null}
+    </span>
+  );
+}
+
+/** Inline tinted text badge (table statuses: Completed / Failed / Partial). */
+export function Badge({ tone = "neutral", children, style }) {
+  const tones = {
+    success: { background: "var(--success-bg)", color: "var(--success-text)" },
+    danger: { background: "var(--danger-bg)", color: "var(--danger-text)" },
+    warning: { background: "var(--warning-bg)", color: "var(--warning-text)" },
+    info: { background: "var(--info-bg)", color: "var(--action-primary)" },
+    neutral: { background: "var(--bg-hover)", color: "var(--text-body)" },
+  };
+  return <span style={{ display: "inline-flex", alignItems: "center", height: 20, padding: "0 8px", borderRadius: "var(--radius-full)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", lineHeight: 1, letterSpacing: "var(--tracking-xs)", ...tones[tone], ...style }}>{children}</span>;
+}
+
+/** Category icon tile — the signature tinted square. kind: palette 40/r14 · node 48/r16 · row 32/r8 (hairline). */
+export function IconTile({ icon, hue = "source", kind = "palette", style }) {
+  const dims = { palette: { box: 40, r: "var(--radius-tile)", icon: 18 }, node: { box: 48, r: "var(--radius-node)", icon: 22 }, row: { box: 32, r: "var(--radius-md)", icon: 16 } };
+  const t = dims[kind];
+  const tinted = kind !== "row";
+  return (
+    <span style={{ width: t.box, height: t.box, borderRadius: t.r, background: tinted ? `var(--cat-${hue}-bg)` : "var(--bg-surface)", border: tinted ? "none" : "1px solid var(--border-control)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: tinted ? `var(--cat-${hue})` : "var(--text-body)", flexShrink: 0, boxSizing: "border-box", ...style }}>
+      <Icon name={icon} size={t.icon} strokeWidth={2} />
+    </span>
+  );
+}

package/components/display/Badge.vue

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

package/components/display/Card.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * White r10 hairline card, 21px padding (17px dense). Never elevated. Work in progress.
+ */
+export interface CardProps {
+  /** 13px/500 header row */
+  title?: string;
+  /** Right-aligned header slot */
+  action?: React.ReactNode;
+  /** 17px padding */
+  dense?: boolean;
+  /** false = no padding (list containers) */
+  pad?: boolean;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Card(props: CardProps): JSX.Element;
+/** Stat card: muted label + 24px/300 numeral + optional chart child. */
+export interface StatCardProps {
+  label: string;
+  value?: string | number;
+  /** 17px padding */
+  dense?: boolean;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function StatCard(props: StatCardProps): JSX.Element;

package/components/display/Card.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+/** White surface card — r10, hairline rgba(229,229,229,.6) border, flat. */
+export function Card({ title, action, dense, pad = true, children, style }) {
+  return (
+    <div style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxSizing: "border-box", padding: pad ? (dense ? "var(--card-pad-sm)" : "var(--card-pad)") : 0, ...style }}>
+      {title ? (
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
+          <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>
+          {action}
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+/** Dashboard stat card: muted 13px label + light 24px number + optional chart slot. */
+export function StatCard({ label, value, dense, children, style }) {
+  return (
+    <Card dense={dense} style={{ display: "flex", flexDirection: "column", gap: 12, ...style }}>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-secondary)" }}>{label}</span>
+      {children}
+      {value != null ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: "var(--text-num)", lineHeight: "var(--leading-num)", letterSpacing: "var(--tracking-num)", color: "var(--text-primary)" }}>{value}</span> : null}
+    </Card>
+  );
+}

package/components/display/Card.vue

@@ -0,0 +1,28 @@
+<script setup>
+// White surface card — r10, hairline rgba(229,229,229,.6) border, flat.
+defineProps({ title: String, dense: Boolean, pad: { type: Boolean, default: true }, style: Object })
+</script>
+<template>
+  <div :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxSizing: 'border-box', padding: pad ? (dense ? 'var(--card-pad-sm)' : 'var(--card-pad)') : 0, ...style }">
+    <div v-if="title" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+      <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>
+      <slot name="action" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<!-- StatCard — dashboard stat card: muted 13px label + light 24px number + optional chart slot. -->
+<!--
+<script setup name="StatCard">
+import Card from './Card.vue'
+defineProps({ label: String, value: [String, Number], dense: Boolean, style: Object })
+</script>
+<template>
+  <Card :dense="dense" :style="{ display: 'flex', flexDirection: 'column', gap: 12, ...style }">
+    <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-secondary)">{{ label }}</span>
+    <slot />
+    <span v-if="value != null" style="font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num);line-height:var(--leading-num);letter-spacing:var(--tracking-num);color:var(--text-primary)">{{ value }}</span>
+  </Card>
+</template>
+-->

package/components/display/Divider.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/** Hairline rule, optionally labeled or vertical. Addition — formalizes the ad-hoc 1px separator div used everywhere. */
+export interface DividerProps {
+  label?: string;
+  vertical?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Divider(props: DividerProps): JSX.Element;

package/components/display/Divider.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+/** Hairline rule. Pass `label` for a centered caption ("OR", "Advanced Settings"); `vertical` for a column rule. */
+export function Divider({ label, vertical, style }) {
+  if (vertical) return <span style={{ width: 1, alignSelf: "stretch", background: "var(--border-subtle)", ...style }} />;
+  if (!label) return <div style={{ height: 1, background: "var(--border-subtle)", ...style }} />;
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 12, ...style }}>
+      <div style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)", whiteSpace: "nowrap" }}>{label}</span>
+      <div style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />
+    </div>
+  );
+}

package/components/display/Divider.vue

@@ -0,0 +1,13 @@
+<script setup>
+// Hairline rule. Pass `label` for a centered caption ("OR", "Advanced Settings"); `vertical` for a column rule.
+defineProps({ label: String, vertical: Boolean, style: Object })
+</script>
+<template>
+  <span v-if="vertical" :style="{ width: 1, alignSelf: 'stretch', background: 'var(--border-subtle)', ...style }" />
+  <div v-else-if="!label" :style="{ height: 1, background: 'var(--border-subtle)', ...style }" />
+  <div v-else :style="{ display: 'flex', alignItems: 'center', gap: 12, ...style }">
+    <div style="flex:1;height:1px;background:var(--border-subtle)" />
+    <span style="font-family:var(--font-sans);font-size:var(--text-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted);white-space:nowrap">{{ label }}</span>
+    <div style="flex:1;height:1px;background:var(--border-subtle)" />
+  </div>
+</template>

package/components/display/Kbd.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** Keyboard shortcut keycap row (20px, mono). Addition — for a power-user data tool's shortcut hints. */
+export interface KbdProps {
+  keys?: string[];
+  style?: React.CSSProperties;
+}
+export declare function Kbd(props: KbdProps): JSX.Element;

package/components/display/Kbd.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+/** Keyboard shortcut hint, e.g. <Kbd keys={["⌘","K"]}/>. */
+export function Kbd({ keys = [], style }) {
+  return (
+    <span style={{ display: "inline-flex", gap: 3, ...style }}>
+      {keys.map((k, i) => (
+        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{k}</span>
+      ))}
+    </span>
+  );
+}

package/components/display/Kbd.vue

@@ -0,0 +1,9 @@
+<script setup>
+// Keyboard shortcut hint, e.g. <Kbd :keys="['⌘','K']"/>.
+defineProps({ keys: { type: Array, default: () => [] }, style: Object })
+</script>
+<template>
+  <span :style="{ display: 'inline-flex', gap: 3, ...style }">
+    <span v-for="(k, i) in keys" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
+  </span>
+</template>

package/components/display/ProgressBar.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/** Labeled 6px progress bar (Expense Distribution). */
+export interface ProgressBarProps {
+  label?: string;
+  /** 0–100 */
+  value?: number;
+  color?: string;
+  showValue?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+/** Ring chart with centered 20px/300 numeral (Budget vs Actual, Task Distribution). */
+export interface DonutProps {
+  size?: number;
+  thickness?: number;
+  /** Multi-segment mode: [{value(0-100), color}] */
+  segments?: { value: number; color: string }[];
+  /** Single-value mode 0–100 */
+  value?: number;
+  /** Center text override */
+  label?: string;
+  style?: React.CSSProperties;
+}
+export declare function Donut(props: DonutProps): JSX.Element;
+/** Blue 1.22px line + gradient area (Revenue Trend). */
+export interface AreaChartProps {
+  points?: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+export declare function AreaChart(props: AreaChartProps): JSX.Element;
+/** Rounded mini bar chart for stat cards. */
+export interface MiniBarsProps {
+  bars?: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+export declare function MiniBars(props: MiniBarsProps): JSX.Element;

package/components/display/ProgressBar.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+/** Labeled horizontal progress bar (Expense Distribution rows). */
+export function ProgressBar({ label, value = 50, color = "var(--chart-blue)", showValue = true, style }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 4, ...style }}>
+      {label != null ? (
+        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)" }}>
+          <span style={{ color: "var(--text-body)" }}>{label}</span>
+          {showValue ? <span style={{ color: "var(--text-heading)" }}>{value}%</span> : null}
+        </div>
+      ) : null}
+      <div style={{ height: 6, borderRadius: "var(--radius-full)", background: "var(--track)", overflow: "hidden" }}>
+        <div style={{ width: `${value}%`, height: "100%", borderRadius: "var(--radius-full)", background: color, transition: "width .3s ease" }} />
+      </div>
+    </div>
+  );
+}
+
+/** Ring/donut chart. segments: [{value, color}]; centered light numeral. */
+export function Donut({ size = 128, thickness = 7.68, segments, value = 75, label, style }) {
+  const r = (size - thickness) / 2 - (size * .1 - thickness / 2 > 0 ? size * .1 - thickness / 2 : 0);
+  const R = size / 2 - thickness / 2 - size * .02;
+  const C = 2 * Math.PI * R;
+  const segs = segments || [{ value, color: "var(--chart-blue)" }];
+  let offset = 0;
+  return (
+    <div style={{ position: "relative", width: size, height: size, ...style }}>
+      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
+        <circle cx={size / 2} cy={size / 2} r={R} fill="none" stroke="var(--track)" strokeWidth={thickness} />
+        {segs.map((s, i) => {
+          const len = (s.value / 100) * C;
+          const el = <circle key={i} cx={size / 2} cy={size / 2} r={R} fill="none" stroke={s.color} strokeWidth={thickness} strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-offset} strokeLinecap="butt" />;
+          offset += len;
+          return el;
+        })}
+      </svg>
+      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: 20, letterSpacing: "var(--tracking-xl)", color: "var(--text-primary)" }}>{label != null ? label : `${value}%`}</div>
+    </div>
+  );
+}
+
+/** Area line chart (Revenue Trend): 1.22px blue line + fading gradient fill. points: 0–100 values. */
+export function AreaChart({ points = [65, 75, 60, 85, 70, 90, 85, 95, 100], width = 350, height = 128, color = "var(--chart-blue)", style }) {
+  const step = width / (points.length - 1);
+  const ys = points.map((p) => height - (p / 100) * height * .48 - height * .5);
+  const line = ys.map((y, i) => `${i ? "L" : "M"} ${i * step} ${y}`).join(" ");
+  const id = React.useId ? React.useId().replace(/:/g, "") : "g" + Math.round(Math.random() * 1e6);
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: "block", ...style }}>
+      <defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={color} stopOpacity=".3" /><stop offset="1" stopColor={color} stopOpacity="0" /></linearGradient></defs>
+      <path d={`${line} L ${width} ${height} L 0 ${height} Z`} fill={`url(#${id})`} />
+      <path d={line} fill="none" stroke={color} strokeWidth="1.22" />
+    </svg>
+  );
+}
+
+/** Mini bar chart used in stat cards. bars: 0–100 values. */
+export function MiniBars({ bars = [40, 65, 50, 80, 60, 90, 70], width = 248, height = 96, color = "var(--chart-blue)", style }) {
+  const gap = 6;
+  const bw = (width - gap * (bars.length - 1)) / bars.length;
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: "block", ...style }}>
+      {bars.map((b, i) => {
+        const h = (b / 100) * height;
+        return <rect key={i} x={i * (bw + gap)} y={height - h} width={bw} height={h} rx={2} fill={color} opacity={.85} />;
+      })}
+    </svg>
+  );
+}

package/components/display/ProgressBar.vue

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

package/components/display/Tag.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/** Small removable filter tag (22px, full radius). Addition — distinct from Badge/ActionChip. */
+export interface TagProps {
+  children?: React.ReactNode;
+  onRemove?: () => void;
+  tone?: "neutral" | "info";
+  style?: React.CSSProperties;
+}
+export declare function Tag(props: TagProps): JSX.Element;

package/components/display/Tag.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const tones = { neutral: { bg: "var(--bg-hover)", fg: "var(--text-body)" }, info: { bg: "var(--info-bg)", fg: "var(--info-fg)" } };
+
+/** Small removable filter tag — distinct from Badge (status) and ActionChip (bulk action). */
+export function Tag({ children, onRemove, tone = "neutral", style }) {
+  const t = tones[tone] || tones.neutral;
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, height: 22, padding: onRemove ? "0 6px 0 10px" : "0 10px", borderRadius: "var(--radius-full)", background: t.bg, color: t.fg, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: "var(--weight-medium)", letterSpacing: "var(--tracking-xs)", ...style }}>
+      {children}
+      {onRemove ? <button type="button" onClick={onRemove} style={{ border: "none", background: "transparent", cursor: "pointer", color: "inherit", opacity: .7, display: "flex", padding: 0 }}><Icon name="x" size={11} /></button> : null}
+    </span>
+  );
+}