feat(admin): extract KPIStat, EmptyState, LoadingState primitives; tighten AdminBadge palette

Phase 2 pattern extraction from the design/ui-revamp-2026-06 spec.

- KPIStat: extract the stat card pattern from DashboardClient (used four
  times inline). Supports tone (default/primary/accent/warning/danger)
  and an optional trend indicator. Reuses .admin-stat-card* CSS classes.
- EmptyState: generic centered icon + title + description + single
  primary CTA. Action renders as <Link> when href is provided, else a
  <button>; both use .ha-btn-primary.
- LoadingState: skeleton list driven by .ha-skeleton. Renders an
  optional ha-eyebrow label above N rows (icon tile + label + value
  placeholders). Each row uses the new admin design tokens.
- AdminBadge: tighten variants to the new design tokens. Legacy
  variant= prop kept for back-compat (default/success/warning/danger/
  info); new tone= prop adds neutral/primary/accent/success. All
  colors now reference --admin-* tokens; no hardcoded hex values.
  Added a 1px tone-aware border for stronger definition on the cream
  canvas. AdminStatusBadge + AdminCountBadge updated to use the new
  tone prop directly.
- design-system/index.tsx: re-export KPIStat, EmptyState, LoadingState
  from the design-system barrel alongside AdminBadge.

npx tsc --noEmit clean.

src/components/admin/KPIStat.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
+
+type KPITone = "default" | "primary" | "accent" | "warning" | "danger";
+
+type KPIStatProps = {
+  /** Eyebrow label above the value (e.g. "Today's Orders") */
+  label: string;
+  /** The primary value to display. Accepts a node so callers can pass formatted strings, JSX, etc. */
+  value: ReactNode;
+  /** Optional icon element (typically a lucide-react icon) shown in the leading tile. */
+  icon?: ReactNode;
+  /** Controls the icon tile's background + icon color. Defaults to "default". */
+  tone?: KPITone;
+  /** Optional trend indicator rendered next to the value. */
+  trend?: { value: string; direction: "up" | "down" | "flat" };
+  /** Extra class names appended to the card. */
+  className?: string;
+};
+
+// Tone -> icon-tile background / icon color. Pulled from --admin-* tokens
+// introduced in the Phase 1 palette unification. No hardcoded hex values.
+const toneStyles: Record<KPITone, { bg: string; fg: string }> = {
+  default: { bg: "var(--admin-bg-subtle)", fg: "var(--admin-text-secondary)" },
+  primary: { bg: "var(--admin-primary-soft)", fg: "var(--admin-primary)" },
+  accent: { bg: "var(--admin-accent-soft)", fg: "var(--admin-accent)" },
+  warning: { bg: "var(--admin-warning-soft)", fg: "var(--admin-warning)" },
+  danger: { bg: "var(--admin-danger-soft)", fg: "var(--admin-danger)" },
+};
+
+// Trend direction -> icon + color. "up" reads as positive (primary),
+// "down" as negative (danger), "flat" as neutral.
+const trendStyles: Record<"up" | "down" | "flat", { Icon: typeof ArrowUp; color: string }> = {
+  up: { Icon: ArrowUp, color: "var(--admin-primary)" },
+  down: { Icon: ArrowDown, color: "var(--admin-danger)" },
+  flat: { Icon: ArrowRight, color: "var(--admin-text-muted)" },
+};
+
+/**
+ * KPIStat — compact metric card for admin surfaces.
+ *
+ * Extracted from the inline pattern previously duplicated four times in
+ * `DashboardClient.tsx`. Reuses the `.admin-stat-card*` classes from
+ * `admin-design-system.css` for the shell, then applies tone-aware
+ * background/foreground via inline `var(--admin-*)` styles.
+ */
+export default function KPIStat({
+  label,
+  value,
+  icon,
+  tone = "default",
+  trend,
+  className = "",
+}: KPIStatProps) {
+  const { bg, fg } = toneStyles[tone];
+
+  return (
+    <div className={`admin-stat-card ${className}`.trim()}>
+      <div className="admin-stat-card-inner">
+        {icon && (
+          <div
+            className="admin-stat-icon"
+            style={{ backgroundColor: bg, color: fg }}
+          >
+            {icon}
+          </div>
+        )}
+        <div className="admin-stat-body">
+          <span className="admin-stat-label">{label}</span>
+          <div className="flex items-baseline gap-2">
+            <span className="admin-stat-value">{value}</span>
+            {trend && <TrendIndicator trend={trend} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TrendIndicator({
+  trend,
+}: {
+  trend: { value: string; direction: "up" | "down" | "flat" };
+}) {
+  const { Icon, color } = trendStyles[trend.direction];
+  return (
+    <span
+      className="inline-flex items-center gap-0.5 text-[0.6875rem] font-semibold"
+      style={{ color }}
+    >
+      <Icon className="h-3 w-3" strokeWidth={2.25} aria-hidden="true" />
+      {trend.value}
+    </span>
+  );
+}