@sarchauhan/chat 0.0.0-stage → 0.0.1

package/dist/motion/icon-swap.css

@@ -0,0 +1,30 @@
+/* transitions-dev — 09-icon-swap.md (verbatim) */
+
+.t-icon-swap {
+  position: relative;
+  display: inline-grid;
+}
+.t-icon-swap .t-icon {
+  grid-area: 1 / 1;
+  transition:
+    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
+    filter    var(--icon-swap-dur) var(--icon-swap-ease),
+    transform var(--icon-swap-dur) var(--icon-swap-ease);
+  will-change: opacity, filter, transform;
+}
+.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
+.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
+  opacity: 1;
+  filter: blur(0);
+  transform: scale(1);
+}
+.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
+.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
+  opacity: 0;
+  filter: blur(var(--icon-swap-blur));
+  transform: scale(var(--icon-swap-start-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-icon-swap .t-icon { transition: none !important; }
+}

package/dist/motion/index.css

@@ -0,0 +1,6 @@
+@import "./tokens.css";
+@import "./text-states-swap.css";
+@import "./icon-swap.css";
+@import "./success-check.css";
+@import "./menu-dropdown.css";
+@import "./error-state-shake.css";

package/dist/motion/menu-dropdown.css

@@ -0,0 +1,35 @@
+/* transitions-dev — 05-menu-dropdown.md (verbatim) */
+
+.t-dropdown {
+  transform-origin: top left;
+  transform: scale(var(--dropdown-pre-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--dropdown-open-dur) var(--dropdown-ease),
+    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
+  will-change: transform, opacity;
+}
+.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
+.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
+.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
+.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
+.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
+
+.t-dropdown.is-open {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+.t-dropdown.is-closing {
+  transform: scale(var(--dropdown-closing-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--dropdown-close-dur) var(--dropdown-ease),
+    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-dropdown { transition: none !important; }
+}

package/dist/motion/success-check.css

@@ -0,0 +1,51 @@
+/* transitions-dev — 10-success-check.md (verbatim) */
+
+/* Wrapper drives the appear animation; it doesn't own any
+   sizing or color so you can drop in any icon. */
+.t-success-check {
+  display: inline-block;
+  transform-origin: center;
+  opacity: 0;
+  will-change: transform, opacity, filter;
+}
+/* overflow: visible keeps the stroke from clipping while it
+   draws; display: block kills the inline whitespace under SVGs. */
+.t-success-check svg { display: block; overflow: visible; }
+/* Stroke-draw setup. Replace 20 with the result of
+   path.getTotalLength() for your path; round caps mean any
+   sub-pixel overshoot is invisible. */
+.t-success-check svg path {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+}
+
+.t-success-check[data-state="in"] {
+  animation:
+    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
+    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
+    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
+    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
+}
+.t-success-check[data-state="in"] svg path {
+  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
+}
+
+@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes t-check-rotate {
+  from { transform: rotate(var(--check-rotate-from)); }
+  to   { transform: rotate(0deg); }
+}
+@keyframes t-check-blur {
+  from { filter: blur(var(--check-blur-from)); }
+  to   { filter: blur(0); }
+}
+@keyframes t-check-bob {
+  from { translate: 0 var(--check-y-amount); }
+  to   { translate: 0 0; }
+}
+@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-check { animation: none !important; opacity: 1; }
+  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
+}

package/dist/motion/text-states-swap.css

@@ -0,0 +1,28 @@
+/* transitions-dev — 04-text-states-swap.md (verbatim) */
+
+.t-text-swap {
+  display: inline-block;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition:
+    transform var(--text-swap-dur) var(--text-swap-ease),
+    filter    var(--text-swap-dur) var(--text-swap-ease),
+    opacity   var(--text-swap-dur) var(--text-swap-ease);
+  will-change: transform, filter, opacity;
+}
+.t-text-swap.is-exit {
+  transform: translateY(calc(var(--text-swap-translate-y) * -1));
+  filter: blur(var(--text-swap-blur));
+  opacity: 0;
+}
+.t-text-swap.is-enter-start {
+  transform: translateY(var(--text-swap-translate-y));
+  filter: blur(var(--text-swap-blur));
+  opacity: 0;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-text-swap { transition: none !important; }
+}

package/dist/motion/tokens.css

@@ -0,0 +1,96 @@
+/* transitions-dev — install block scoped to .chat-root so host pages
+   do not inherit global :root motion vars. Variable names are unchanged.
+   Source: https://github.com/Jakubantalik/transitions-dev/blob/main/skills/transitions-dev/_root.css */
+
+.chat-root {
+  /* Card resize */
+  --resize-dur: 300ms;
+  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Number pop-in */
+  --digit-dur: 500ms;
+  --digit-distance: 8px;
+  --digit-stagger: 70ms;
+  --digit-blur: 2px;
+  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
+  --digit-dir-x: 0;
+  --digit-dir-y: 1;
+  /* Notification badge */
+  --badge-slide-dur: 260ms;
+  --badge-pop-dur: 500ms;
+  --badge-pop-close-dur: 180ms;
+  --badge-fade-dur: 400ms;
+  --badge-fade-close-dur: 180ms;
+  --badge-blur: 2px;
+  --badge-offset-x: -8.2px;
+  --badge-offset-y: 12.4px;
+  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
+  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  /* Text states swap */
+  --text-swap-dur: 200ms;
+  --text-swap-translate-y: 8px;
+  --text-swap-blur: 2px;
+  --text-swap-ease: ease-out;
+  /* Menu dropdown */
+  --dropdown-open-dur: 250ms;
+  --dropdown-close-dur: 150ms;
+  --dropdown-pre-scale: 0.97;
+  --dropdown-closing-scale: 0.99;
+  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Modal open / close */
+  --modal-open-dur: 250ms;
+  --modal-close-dur: 150ms;
+  --modal-scale: 0.96;
+  --modal-scale-close: 0.96;
+  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Panel reveal */
+  --panel-open-dur: 400ms;
+  --panel-close-dur: 350ms;
+  --panel-translate-y: 100px;
+  --panel-blur: 2px;
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Page side-by-side */
+  --page-slide-dur: 200ms;
+  --page-fade-dur: 200ms;
+  --page-slide-distance: 8px;
+  --page-blur: 3px;
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Icon swap */
+  --icon-swap-dur: 200ms;
+  --icon-swap-blur: 2px;
+  --icon-swap-start-scale: 0.25;
+  --icon-swap-ease: ease-in-out;
+  /* Success check — defaults from the recipe; tool chips override locally */
+  --check-opacity-dur: 550ms;
+  --check-rotate-dur: 550ms;
+  --check-rotate-from: 80deg;
+  --check-bob-dur: 450ms;
+  --check-y-amount: 40px;
+  --check-blur-dur: 500ms;
+  --check-blur-from: 10px;
+  --check-path-dur: 550ms;
+  --check-path-delay: 80ms;
+  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
+  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Avatar group hover */
+  --avatar-lift: -4px;
+  --avatar-dur: 320ms;
+  --avatar-scale: 1.05;
+  --avatar-falloff: 0.45;
+  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
+  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
+  /* Error state shake */
+  --shake-distance: 6px;
+  --shake-overshoot: 4px;
+  --shake-dur-a: 80ms;
+  --shake-dur-b: 60ms;
+  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --revert-hold: 3000ms;
+  --revert-dur: 280ms;
+}

package/dist/styles.css

@@ -0,0 +1,11 @@
+@import "@fontsource/geist-sans/latin.css";
+@import "@fontsource/geist-mono/latin.css";
+@import "@sarchauhan/code-markdown/styles.css";
+@import "./theme/typography.css";
+@import "./markdown.css";
+@import "./chat.css";
+@import "./chat.select.css";
+@import "./blocks.css";
+@import "./chips.css";
+@import "./widgets.css";
+@import "./motion/index.css";

package/dist/theme/tokens.css

@@ -0,0 +1,253 @@
+/**
+ * Chat design tokens.
+ *
+ * Vercel restraint, content-first reading column: calm neutrals, clear
+ * turn-taking. Hierarchy comes from type and spacing; color only marks
+ * real state (streaming, approval, error). Chrome stays quiet. See
+ * /design.md — do not invent a parallel visual system.
+ */
+
+.chat-root,
+.chat-root[data-theme="light"] {
+  color-scheme: light;
+
+  /* Surfaces */
+  --chat-bg: #f7f7f8;
+  --chat-bg-elevated: #ffffff;
+  --chat-fg: #0d0d0d;
+  --chat-fg-muted: #6e6e80;
+  --chat-fg-subtle: #8e8ea0;
+
+  /* Conversation roles */
+  --chat-user-bg: #ececf1;
+  --chat-user-fg: #0d0d0d;
+  --chat-assistant-fg: #0d0d0d;
+
+  /* Chrome */
+  --chat-border: rgba(0, 0, 0, 0.08);
+  --chat-border-strong: rgba(0, 0, 0, 0.12);
+  --chat-ring: rgba(0, 0, 0, 0.18);
+  --chat-overlay: rgba(247, 247, 248, 0.92);
+  --chat-composer-bg: #ffffff;
+  --chat-composer-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 4px 16px rgba(0, 0, 0, 0.04);
+  --chat-control-bg: rgba(0, 0, 0, 0.04);
+  --chat-control-hover: rgba(0, 0, 0, 0.07);
+  --chat-primary: #0d0d0d;
+  --chat-primary-fg: #ffffff;
+  --chat-danger: #b42318;
+  --chat-accent: #10a37f;
+  --chat-warning: #d97706;
+  --chat-success: #059669;
+
+  /* Type — Geist tryout (opt-in, falls back to system) */
+  --chat-font-sans: "Geist Sans", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  --chat-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale — 11 / 12 / 13 / 14 / 15.5 / 16 / 18 / 22 */
+  --chat-fs-11: 0.6875rem;
+  --chat-fs-12: 0.75rem;
+  --chat-fs-13: 0.8125rem;
+  --chat-fs-14: 0.875rem;
+  --chat-fs-15: 0.9375rem;
+  --chat-fs-155: 0.975rem;
+  --chat-fs-16: 1rem;
+  --chat-fs-18: 1.125rem;
+  --chat-fs-22: 1.375rem;
+
+  /* Legacy aliases — keep for compat, all map to scale */
+  --chat-text: var(--chat-fs-155);
+  --chat-text-sm: var(--chat-fs-14);
+  --chat-text-xs: var(--chat-fs-12);
+
+  /* Leading — paired to size */
+  --chat-leading-none: 1;
+  --chat-leading-tight: 1.25;
+  --chat-leading-snug: 1.35;
+  --chat-leading-normal: 1.5;
+  --chat-leading-relaxed: 1.7;
+  --chat-leading: var(--chat-leading-relaxed);
+  --chat-leading-body: var(--chat-leading-relaxed);
+  --chat-leading-ui: var(--chat-leading-snug);
+  --chat-leading-heading: var(--chat-leading-tight);
+
+  /* Weight — 400 / 500 / 600 / 700 only */
+  --chat-weight-regular: 400;
+  --chat-weight-medium: 500;
+  --chat-weight-semibold: 600;
+  --chat-weight-bold: 700;
+
+  /* Tracking */
+  --chat-tracking-tighter: -0.03em;
+  --chat-tracking-tight: -0.02em;
+  --chat-tracking-snug: -0.015em;
+  --chat-tracking-normal: -0.01em;
+  --chat-tracking-wide: 0.03em;
+
+  /* Semantic type — body / heading / label / caption / code */
+  --chat-body-size: var(--chat-fs-155);
+  --chat-body-leading: 1.65;
+  --chat-body-weight: var(--chat-weight-regular);
+  --chat-body-tracking: -0.011em;
+
+  --chat-body-sm-size: var(--chat-fs-14);
+  --chat-body-sm-leading: var(--chat-leading-normal);
+  --chat-body-sm-weight: var(--chat-weight-regular);
+
+  --chat-heading-1-size: var(--chat-fs-22);
+  --chat-heading-1-leading: var(--chat-leading-tight);
+  --chat-heading-1-weight: var(--chat-weight-semibold);
+  --chat-heading-1-tracking: var(--chat-tracking-tighter);
+
+  --chat-heading-2-size: var(--chat-fs-16);
+  --chat-heading-2-leading: var(--chat-leading-tight);
+  --chat-heading-2-weight: var(--chat-weight-semibold);
+  --chat-heading-2-tracking: var(--chat-tracking-tight);
+
+  --chat-label-size: var(--chat-fs-11);
+  --chat-label-leading: var(--chat-leading-tight);
+  --chat-label-weight: var(--chat-weight-medium);
+  --chat-label-tracking: var(--chat-tracking-wide);
+
+  --chat-caption-size: var(--chat-fs-12);
+  --chat-caption-leading: var(--chat-leading-snug);
+  --chat-caption-weight: var(--chat-weight-regular);
+
+  --chat-code-size: 0.875em;
+  --chat-code-leading: var(--chat-leading-normal);
+  --chat-code-weight: var(--chat-weight-regular);
+  /* Radius — unified control radius, lg only for composer/bubble/root */
+  --chat-radius-xs: 0.25rem;
+  --chat-radius-sm: 0.5rem;
+  --chat-radius-md: 0.5rem;
+  --chat-radius: 0.5rem;
+  --chat-radius-lg: 1rem;
+  --chat-radius-pill: 999px;
+  --chat-radius-full: 999px;
+  /* Legacy aliases */
+  --chat-radius-card: var(--chat-radius);
+  --chat-radius-control: var(--chat-radius);
+  --chat-space-05: 0.125rem;
+  --chat-space-1: 0.25rem;
+  --chat-space-1_5: 0.375rem;
+  --chat-space-2: 0.5rem;
+  --chat-space-2_5: 0.625rem;
+  --chat-space-3: 0.75rem;
+  --chat-space-3_5: 0.875rem;
+  --chat-space-4: 1rem;
+  --chat-space-5: 1.25rem;
+  --chat-space-6: 1.5rem;
+  --chat-space-8: 2rem;
+  --chat-column: 48rem;
+  --chat-composer-space: 9.5rem;
+  --chat-composer-fade: 0.5rem;
+  --chat-transition: 160ms ease;
+}
+
+.chat-root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --chat-bg: #212121;
+  --chat-bg-elevated: #2f2f2f;
+  --chat-fg: #ececec;
+  --chat-fg-muted: #b4b4b4;
+  --chat-fg-subtle: #8f8f8f;
+
+  --chat-user-bg: #303030;
+  --chat-user-fg: #ececec;
+  --chat-assistant-fg: #ececec;
+
+  --chat-border: rgba(255, 255, 255, 0.08);
+  --chat-border-strong: rgba(255, 255, 255, 0.14);
+  --chat-ring: rgba(255, 255, 255, 0.22);
+  --chat-overlay: rgba(33, 33, 33, 0.92);
+  --chat-composer-bg: #2f2f2f;
+  --chat-composer-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 6px 18px rgba(0, 0, 0, 0.22);
+  --chat-control-bg: rgba(255, 255, 255, 0.06);
+  --chat-control-hover: rgba(255, 255, 255, 0.1);
+  --chat-primary: #ececec;
+  --chat-primary-fg: #212121;
+  --chat-danger: #f97066;
+  --chat-accent: #1a7f64;
+  --chat-warning: #fbbf24;
+  --chat-success: #34d399;
+}
+
+@media (prefers-color-scheme: dark) {
+  .chat-root[data-theme="system"] {
+    color-scheme: dark;
+
+    --chat-bg: #212121;
+    --chat-bg-elevated: #2f2f2f;
+    --chat-fg: #ececec;
+    --chat-fg-muted: #b4b4b4;
+    --chat-fg-subtle: #8e8ea0;
+
+    --chat-user-bg: #303030;
+    --chat-user-fg: #ececec;
+    --chat-assistant-fg: #ececec;
+
+    --chat-border: rgba(255, 255, 255, 0.08);
+    --chat-border-strong: rgba(255, 255, 255, 0.14);
+    --chat-ring: rgba(255, 255, 255, 0.22);
+    --chat-overlay: rgba(33, 33, 33, 0.92);
+    --chat-composer-bg: #2f2f2f;
+    --chat-composer-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.08),
+      0 6px 18px rgba(0, 0, 0, 0.22);
+    --chat-control-bg: rgba(255, 255, 255, 0.06);
+    --chat-control-hover: rgba(255, 255, 255, 0.1);
+    --chat-primary: #ececec;
+    --chat-primary-fg: #212121;
+    --chat-danger: #f97066;
+    --chat-accent: #1a7f64;
+    --chat-warning: #fbbf24;
+    --chat-success: #34d399;
+  }
+}
+
+/* Responsive type & layout — mobile / tablet / desktop */
+@media (max-width: 640px) {
+  .chat-root,
+  .chat-root[data-theme="light"],
+  .chat-root[data-theme="dark"],
+  .chat-root[data-theme="system"] {
+    --chat-body-size: var(--chat-fs-15);
+    --chat-body-sm-size: var(--chat-fs-13);
+    --chat-heading-1-size: var(--chat-fs-18);
+    --chat-heading-2-size: var(--chat-fs-15);
+    --chat-caption-size: var(--chat-fs-11);
+    --chat-column: 100%;
+    --chat-composer-space: 8.5rem;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1024px) {
+  .chat-root,
+  .chat-root[data-theme="light"],
+  .chat-root[data-theme="dark"],
+  .chat-root[data-theme="system"] {
+    --chat-body-size: var(--chat-fs-155);
+    --chat-heading-1-size: var(--chat-fs-22);
+    --chat-heading-2-size: var(--chat-fs-16);
+    --chat-column: 42rem;
+    --chat-composer-space: 9rem;
+  }
+}
+
+@media (min-width: 1025px) {
+  .chat-root,
+  .chat-root[data-theme="light"],
+  .chat-root[data-theme="dark"],
+  .chat-root[data-theme="system"] {
+    --chat-body-size: var(--chat-fs-155);
+    --chat-heading-1-size: var(--chat-fs-22);
+    --chat-heading-2-size: var(--chat-fs-16);
+    --chat-column: 48rem;
+    --chat-composer-space: 9.5rem;
+  }
+}

package/dist/theme/typography.css

@@ -0,0 +1,115 @@
+/**
+ * Typography primitives — scoped to .chat-root
+ * Professional reading scale: all sizes flow through --chat-* tokens.
+ * Use these classes or the CSS vars directly; never hard-code rem/px.
+ */
+
+.chat-root {
+  font-family: var(--chat-font-sans);
+  font-size: var(--chat-body-size);
+  line-height: var(--chat-body-leading);
+  font-weight: var(--chat-body-weight);
+  letter-spacing: var(--chat-body-tracking);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+  font-synthesis: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+/* Headings — display hierarchy via tracking + weight, not color */
+.chat-text-heading-1,
+.chat-text-display {
+  font-size: var(--chat-heading-1-size);
+  line-height: var(--chat-heading-1-leading);
+  font-weight: var(--chat-heading-1-weight);
+  letter-spacing: var(--chat-heading-1-tracking);
+}
+
+.chat-text-heading-2,
+.chat-text-heading {
+  font-size: var(--chat-heading-2-size);
+  line-height: var(--chat-heading-2-leading);
+  font-weight: var(--chat-heading-2-weight);
+  letter-spacing: var(--chat-heading-2-tracking);
+}
+
+/* Body — reading column */
+.chat-text-body {
+  font-size: var(--chat-body-size);
+  line-height: var(--chat-body-leading);
+  font-weight: var(--chat-body-weight);
+  letter-spacing: var(--chat-body-tracking);
+}
+
+.chat-text-body-sm {
+  font-size: var(--chat-body-sm-size);
+  line-height: var(--chat-body-sm-leading);
+  font-weight: var(--chat-body-sm-weight);
+  letter-spacing: var(--chat-tracking-normal);
+}
+
+/* Label / caption — metadata, tool states, timestamps */
+.chat-text-label {
+  font-size: var(--chat-label-size);
+  line-height: var(--chat-label-leading);
+  font-weight: var(--chat-label-weight);
+  letter-spacing: var(--chat-label-tracking);
+  text-transform: uppercase;
+}
+
+.chat-text-caption {
+  font-size: var(--chat-caption-size);
+  line-height: var(--chat-caption-leading);
+  font-weight: var(--chat-caption-weight);
+  letter-spacing: var(--chat-tracking-normal);
+}
+
+.chat-text-caption-strong {
+  font-size: var(--chat-caption-size);
+  line-height: var(--chat-caption-leading);
+  font-weight: var(--chat-weight-medium);
+  letter-spacing: var(--chat-tracking-normal);
+}
+
+/* Code — mono, slightly smaller in context */
+.chat-text-code,
+.chat-text-mono {
+  font-family: var(--chat-font-mono);
+  font-size: var(--chat-code-size);
+  line-height: var(--chat-code-leading);
+  font-weight: var(--chat-code-weight);
+  font-variant-ligatures: none;
+}
+
+/* UI — controls, inputs, selects, buttons (snug leading, 14px) */
+.chat-text-ui {
+  font-size: var(--chat-fs-14);
+  line-height: var(--chat-leading-ui);
+  font-weight: var(--chat-weight-regular);
+  letter-spacing: var(--chat-tracking-normal);
+}
+
+.chat-text-ui-sm {
+  font-size: var(--chat-fs-13);
+  line-height: var(--chat-leading-ui);
+  font-weight: var(--chat-weight-regular);
+  letter-spacing: var(--chat-tracking-normal);
+}
+
+.chat-text-ui-strong {
+  font-size: var(--chat-fs-14);
+  line-height: var(--chat-leading-ui);
+  font-weight: var(--chat-weight-medium);
+  letter-spacing: var(--chat-tracking-normal);
+}
+
+/* Utilities — paired padding for vertical rhythm */
+.chat-pad-body {
+  padding-block: 0.15rem;
+}
+
+.chat-pad-ui {
+  padding-block: 0.3rem;
+}