@timbal-ai/timbal-react 0.8.2 → 1.0.0

package/dist/app.cjs

@@ -40,6 +40,7 @@ __export(app_exports, {
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   CHART_PALETTE: () => CHART_PALETTE,
+  COLOR_UTILITY_PREFIXES: () => COLOR_UTILITY_PREFIXES,
   ChartArtifactView: () => ChartArtifactView,
   ChartPanel: () => ChartPanel,
   ConnectionRow: () => ConnectionRow,
@@ -59,6 +60,7 @@ __export(app_exports, {
   FilterBar: () => FilterBar,
   FloatingUnsavedChangesBar: () => FloatingUnsavedChangesBar,
   FormSection: () => FormSection,
+  HOUSE_RULES: () => HOUSE_RULES,
   INTEGRATION_CATALOG_CARD_HEIGHT_CLASS: () => INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
   InfoCard: () => InfoCard,
   IntegrationCard: () => IntegrationCard,
@@ -70,7 +72,10 @@ __export(app_exports, {
   Page: () => Page,
   PageHeader: () => PageHeader,
   PlanBadge: () => PlanBadge,
+  RESERVED_GRADIENT_TOKENS: () => RESERVED_GRADIENT_TOKENS,
   ResourceCard: () => ResourceCard,
+  SEMANTIC_COLOR_TOKENS: () => SEMANTIC_COLOR_TOKENS,
+  SLOP_BUDGETS: () => SLOP_BUDGETS,
   SearchInput: () => SearchInput,
   Section: () => Section,
   SettingsSection: () => SettingsSection,
@@ -81,11 +86,13 @@ __export(app_exports, {
   StatusDot: () => StatusDot,
   SubNav: () => SubNav,
   SurfaceCard: () => SurfaceCard,
+  TAILWIND_PALETTE_COLORS: () => TAILWIND_PALETTE_COLORS,
   THEME_AGENT_INSTRUCTIONS: () => THEME_AGENT_INSTRUCTIONS,
   TIMBAL_THEME_PRESETS: () => TIMBAL_THEME_PRESETS,
   ThemePresetGallery: () => ThemePresetGallery,
   TimbalChat: () => TimbalChat,
   TimbalThemeStyle: () => TimbalThemeStyle,
+  UI_REVIEW_AGENT_INSTRUCTIONS: () => UI_REVIEW_AGENT_INSTRUCTIONS,
   appFilterBarClass: () => appFilterBarClass,
   appPageColumnClass: () => appPageColumnClass,
   appSearchInputClass: () => appSearchInputClass,
@@ -99,15 +106,202 @@ __export(app_exports, {
   connectionRowListClass: () => connectionRowListClass,
   createTimbalTheme: () => createTimbalTheme,
   ensureThemeFontLink: () => ensureThemeFontLink,
+  formatLintReport: () => formatLintReport,
   getStoredThemePreset: () => getStoredThemePreset,
   getThemePreset: () => getThemePreset,
+  lintGeneratedUi: () => lintGeneratedUi,
+  reviewGeneratedUi: () => reviewGeneratedUi,
   themeToCss: () => themeToCss,
   useAppCopilotContext: () => useAppCopilotContext,
   useAppShellChat: () => useAppShellChat
 });
 module.exports = __toCommonJS(app_exports);
 
+// src/design/ui-vocabulary.ts
+var SEMANTIC_COLOR_TOKENS = [
+  // shadcn-style base tokens
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  // sidebar scope
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  // timbal chrome extensions
+  "elevated-from",
+  "elevated-to",
+  "modal-from",
+  "modal-to",
+  "playground-from",
+  "playground-via",
+  "playground-to",
+  "composer-bg",
+  "composer-border",
+  "composer-border-focus",
+  "bubble-user",
+  "bubble-user-foreground",
+  "code-block-bg",
+  "code-header-bg"
+];
+var RESERVED_GRADIENT_TOKENS = [
+  "primary-fill-from",
+  "primary-fill-to",
+  "primary-fill-hover-from",
+  "primary-fill-hover-to",
+  "primary-fill-active-from",
+  "primary-fill-active-to",
+  "secondary-fill-hover-from",
+  "secondary-fill-hover-to",
+  "secondary-fill-active-from",
+  "secondary-fill-active-to",
+  "destructive-fill-hover-from",
+  "destructive-fill-hover-to",
+  "destructive-fill-active-from",
+  "destructive-fill-active-to",
+  "ghost-fill-hover",
+  "ghost-fill-active",
+  "elevated-from",
+  "elevated-to",
+  "modal-from",
+  "modal-to",
+  "playground-from",
+  "playground-via",
+  "playground-to"
+];
+var TAILWIND_PALETTE_COLORS = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var COLOR_UTILITY_PREFIXES = [
+  "bg",
+  "text",
+  "border",
+  "ring",
+  "from",
+  "via",
+  "to",
+  "fill",
+  "stroke",
+  "decoration",
+  "outline",
+  "shadow",
+  "divide",
+  "accent",
+  "caret"
+];
+var SLOP_BUDGETS = {
+  /** Max decorative/standalone icons rendered in a single generated file. */
+  maxIconsPerView: 6,
+  /** Max consecutive list rows separated by an explicit border/divider before
+   *  it reads as a "ruled table" — prefer spacing or zebra instead. */
+  maxRowDividers: 2
+};
+var HOUSE_RULES = [
+  {
+    id: "semantic-color",
+    rule: "Color only through semantic tokens \u2014 never a raw palette color, hex, or oklch literal.",
+    why: "The theme generator owns every color; hardcoding breaks dark mode and rebranding.",
+    slop: `<span className="text-blue-600 bg-green-50">`,
+    good: `<span className="text-primary bg-muted">`
+  },
+  {
+    id: "no-decorative-icons",
+    rule: "Icons must earn their place (action, nav, or status). Never add an icon beside a label that already says the thing.",
+    why: "An icon on every tile/card is the #1 tell of generated slop.",
+    slop: `<StatTile label={<><BarChart2 /> Revenue</>} value="$95k" />`,
+    good: `<StatTile label="Revenue" value="$95k" />`
+  },
+  {
+    id: "neutral-trend",
+    rule: "Don't put a colored trend pill on every metric. Use a trend only when the delta is the point, and keep it muted.",
+    why: "Loud green/red pills everywhere are noise, not signal.",
+    slop: `<MetricTile trend="+8%" className="text-green-500" />`,
+    good: `<MetricTile label="Win rate" value="50%" />`
+  },
+  {
+    id: "values-normal-weight",
+    rule: "Metric values use normal font weight, not bold.",
+    why: "Giant bold numbers read as a template; normal weight reads as a product.",
+    slop: `<span className="text-3xl font-bold tabular-nums">$322k</span>`,
+    good: `<span className="text-2xl font-normal tabular-nums">$322k</span>`
+  },
+  {
+    id: "no-card-in-card",
+    rule: "Don't nest a bordered card inside another bordered card. Group with spacing or a Section instead.",
+    why: "Card-in-card doubles borders and shadows for no information gain."
+  },
+  {
+    id: "no-row-dividers",
+    rule: "Don't put a divider between every list row. Use spacing or zebra striping.",
+    why: "A rule under every row turns a clean list into a dense ledger."
+  },
+  {
+    id: "no-data-gradient",
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground). Never on a data card, tile, or table.",
+    why: "Gradient stat cards are the canonical 'AI dashboard' look."
+  },
+  {
+    id: "compose-from-blocks",
+    rule: "Build from premade blocks (MetricRow, MetricChartCard, DataTable, IntegrationCard). Drop to raw primitives only when no block fits.",
+    why: "Slop appears the moment generation falls below the curated block layer."
+  },
+  {
+    id: "use-kit-controls",
+    rule: "Use the kit's controls (SearchInput, Select, DropdownMenu, FieldInput, FieldSelect) \u2014 never hand-roll an input/trigger surface (`border-input rounded-* bg-\u2026`).",
+    why: "Hand-rolled controls drift from the shared control-surface skin and look foreign next to kit controls.",
+    slop: `<button className="rounded-lg border border-input bg-transparent px-3 h-9">`,
+    good: `<SelectTrigger><SelectValue /></SelectTrigger>`
+  }
+];
+
 // src/app/agent-instructions.ts
+var ANTI_SLOP_CHECKLIST = HOUSE_RULES.map((r) => {
+  const pair = r.slop && r.good ? `
+  - slop: \`${r.slop}\`
+  - good: \`${r.good}\`` : "";
+  return `- **${r.id}** \u2014 ${r.rule} (${r.why})${pair}`;
+}).join("\n");
 var APP_KIT_AGENT_INSTRUCTIONS = `
 ## App kit (@timbal-ai/timbal-react/app)
 
@@ -155,7 +349,15 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | **Modals** | Use \`AppConfirmDialog\` for destructive/export confirmations. |
 | **Metrics** | Overview KPIs \u2192 \`MetricRow\` or \`MetricChartCard\` (not four separate heavy cards). Values use **normal** font weight, not bold. |
 | **Integrations** | Catalog \u2192 \`IntegrationCard\` grid; connected list \u2192 \`ConnectionRow\` inside \`ConnectionRowList\`. Footer CTAs: \`Button variant="secondary"\`. |
-| **Anti-slop** | No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+| **Anti-slop** | Follow the **anti-slop checklist** below. No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+
+### Anti-slop checklist (required \u2014 output is linted against this)
+
+Generated UIs are checked by \`lintGeneratedUi\` and rejected on any error. Self-review against these before returning code (icon budget: ${SLOP_BUDGETS.maxIconsPerView} per view; at most ${SLOP_BUDGETS.maxRowDividers} ruled rows before it reads as a ledger):
+
+${ANTI_SLOP_CHECKLIST}
+
+The cause of slop is dropping **below** the curated block layer into raw primitives + free Tailwind. Stay on the blocks; reach for primitives only when no block fits, and even then keep colors on semantic tokens.
 
 ### Accessibility (required)
 
@@ -181,7 +383,8 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | \`useAppShellChat\` | Custom open/close trigger when \`hideChatTrigger\` on shell. |
 | \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, children. |
 | \`Section\` | Titled block inside a page. |
-| \`SubNav\` | In-page tabs: \`items\`, \`activeId\`, \`onChange\`. |
+| \`SubNav\` | **Section switcher** (Overview / Reports pill bar): \`items\`, \`activeId\`, \`onChange\`. Never use Radix/shadcn \`Tabs\` \u2014 it is not in this package. Switch panels with state or the router. |
+| **Menus** | **Select** = short list, no search. **Combobox** = searchable (same trigger as Select). **Command** only inside \`PopoverContent variant="list"\` or Combobox \u2014 never padded default Popover. See \`examples/app-kit/src/recipes/primitives-catalog.ts\`. |
 | \`Breadcrumbs\` | Trail: \`items: [{ label, href? }]\`. |
 | \`Button\` | Actions \u2014 \`variant="secondary"\` for catalog/secondary CTAs; \`variant="default"\` for primary. |
 | \`StatTile\` | Single KPI in its own card (grid of scattered stats). Prefer \`MetricRow\` for a unified overview strip. |
@@ -237,19 +440,36 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 
 Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
 
-### Recipe index (\`examples/app-kit/recipes/\`)
+### Block recipes \u2014 compose these (don't clone wholesale)
+
+Ready-made **section patterns** assembled from the components above. Each is a composition to rebuild in your own domain with your data \u2014 **not** an importable component. Reach for a block before dropping to raw primitives.
+
+**Settings**
+- **Project settings** \u2014 General / Usage / Danger sections; the floating save bar appears on first edit. Compose \`SettingsSection\` + \`FieldInput\`/\`FieldSwitch\` + \`FieldRow\` + \`InfoCard\` + \`DangerZone\` + \`FloatingUnsavedChangesBar\`.
+- **Settings form** \u2014 compact stacked form for one concern (profile, billing). Compose \`FormSection\` + \`FieldInput\`/\`FieldSelect\`/\`FieldTextarea\`.
 
-| Recipe file | Components to study |
-|-------------|---------------------|
-| \`metrics-row.tsx\` | \`Page\`, \`MetricRow\` |
-| \`analytics-card.tsx\` | \`MetricChartCard\`, \`Button\` |
-| \`integrations-grid.tsx\` | \`IntegrationCard\`, \`ConnectionRowList\`, \`PlanBadge\` |
-| \`table-with-filters.tsx\` | \`FilterBar\`, \`DataTable\` |
-| \`settings-page.tsx\` | \`SettingsSection\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
-| \`resource-gallery.tsx\` | \`ResourceCard\`, \`StatusDot\`, \`Sparkline\` |
-| \`charts-panel.tsx\` | \`ChartPanel\`, \`ChartArtifact\` |
-| \`copilot-overlay.tsx\` | \`AppShell\`, \`AppChatPanel\` |
-| \`theme-presets.tsx\` | \`ThemePresetGallery\`, \`applyTimbalTheme\` |
+**Data & metrics**
+- **Metrics row** \u2014 KPI strip in one elevated card. Compose \`MetricRow\` + \`MetricTile\`.
+- **Analytics card** \u2014 selectable KPI tiles driving a shared chart. Compose \`MetricChartCard\` + \`LineAreaChart\`.
+- **Charts panel** \u2014 embedded chart artifact. Compose \`ChartPanel\` + \`ChartArtifactView\`.
+- **Table + filters** \u2014 \`FilterBar\` above a sortable \`DataTable\` (+ \`StatusBadge\` in cells).
+
+**Collections**
+- **Integrations grid** \u2014 connector catalog + connected list. Compose \`IntegrationCard\` + \`PlanBadge\` + \`ConnectionRowList\` (\`IntegrationsEmptyState\` when empty).
+- **Resource gallery** \u2014 project / agent / dataset cards. Compose \`ResourceCard\` + \`StatusDot\` + \`Sparkline\`.
+
+**Overlays & flows** (animate automatically)
+- **Confirm & destructive** \u2014 confirm/cancel modal or destructive alert. Compose \`AppConfirmDialog\` (or \`AlertDialog\`) + \`Button\`; never hand-roll a \`Dialog\` for confirms.
+- **Detail sheet** \u2014 slide-over edit panel without leaving the list. Compose \`Sheet\` + \`Field*\` + \`Button\` + \`Separator\`.
+
+**States & auth**
+- **Empty states** \u2014 no-data / no-results / first-run. Compose \`EmptyState\` + \`Card\` + \`Button\`.
+- **Sign-in card** \u2014 centered auth entry. Compose \`Card\` + \`Input\` + \`Label\` + \`Button\`.
+
+**Shells & theming**
+- **Minimal shell** \u2014 \`AppShell\` + \`Page\` (no sidebar/chat).
+- **Copilot overlay** \u2014 \`AppShell\` + floating \`AppChatPanel\`.
+- **Theme presets** \u2014 \`ThemePresetGallery\` + \`applyTimbalTheme\` (never hand-author OKLCH).
 
 ### Typical compositions
 
@@ -260,6 +480,7 @@ Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/
 - **Integrations** \u2014 grid of \`IntegrationCard\`; \`ConnectionRowList\` for connected providers; \`IntegrationsEmptyState\` when empty.
 - **Resource gallery** \u2014 grid of \`ResourceCard\`.
 - **Copilot-assisted app** \u2014 \`AppCopilotProvider\` + \`AppShell\` with \`chat={<AppChatPanel workforceId="\u2026" />}\`.
+- **Motion is automatic** \u2014 Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Select, Tooltip, Toast, and Accordion/Collapsible animate out of the box (fade/zoom/slide/height) via the engine inlined in \`styles.css\`. Do not add a separate animation library or hand-write \`@keyframes\`.
 
 ### Example imports
 
@@ -295,6 +516,211 @@ import {
 - For rich in-chat widgets, use **artifacts** (\`ARTIFACT_AGENT_INSTRUCTIONS\`) \u2014 app kit is for the **host application shell**.
 `.trim();
 
+// src/design/ui-lint.ts
+var PALETTE_GROUP = TAILWIND_PALETTE_COLORS.join("|");
+var PREFIX_GROUP = COLOR_UTILITY_PREFIXES.join("|");
+var RAW_COLOR_RE = new RegExp(
+  `(?:^|[\\s"'\`:])(?:[a-z-]+:)*(?:${PREFIX_GROUP})-(?:${PALETTE_GROUP})-\\d{2,3}(?:/\\d{1,3})?`,
+  "g"
+);
+var COLOR_LITERAL_RE = /#[0-9a-fA-F]{3,8}\b|\b(?:oklch|rgba?|hsla?)\s*\(/g;
+var INLINE_STYLE_COLOR_RE = /style=\{\{[^}]*\b(?:color|background|backgroundColor|borderColor|fill|stroke)\b/;
+var BOLD_VALUE_RE = /text-(?:xl|2xl|3xl|4xl|5xl|6xl)[^"'`]*\bfont-(?:bold|extrabold|black|semibold)|font-(?:bold|extrabold|black|semibold)[^"'`]*text-(?:xl|2xl|3xl|4xl|5xl|6xl)/;
+var GRADIENT_RE = /\bbg-(?:gradient|linear|radial|conic)-/;
+var GRADIENT_DIRECTIONS = /* @__PURE__ */ new Set([
+  "t",
+  "tr",
+  "r",
+  "br",
+  "b",
+  "bl",
+  "l",
+  "tl"
+]);
+var ICON_IMPORT_RE = /from\s+["']lucide-react["']/;
+var RAW_CONTROL_SURFACE_RE = /\bborder-input\b/;
+var RESERVED_GRADIENT_SET = new Set(RESERVED_GRADIENT_TOKENS);
+function stripVariants(util) {
+  return util.replace(/^(?:[a-z-]+:)*/, "");
+}
+function isCommentOrImport(line) {
+  const t = line.trim();
+  return t.startsWith("//") || t.startsWith("*") || t.startsWith("/*") || t.startsWith("import ") || t.startsWith("export ");
+}
+function lintGeneratedUi(source, options = {}) {
+  const maxIcons = options.maxIconsPerView ?? SLOP_BUDGETS.maxIconsPerView;
+  const maxRowDividers = options.maxRowDividers ?? SLOP_BUDGETS.maxRowDividers;
+  const findings = [];
+  const lines = source.split("\n");
+  let usesLucide = false;
+  let iconUsageCount = 0;
+  let dividerRunCount = 0;
+  const lucideNames = /* @__PURE__ */ new Set();
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNo = i + 1;
+    if (ICON_IMPORT_RE.test(line)) {
+      usesLucide = true;
+      const named = line.match(/\{([^}]*)\}/);
+      if (named) {
+        for (const raw of named[1].split(",")) {
+          const name = raw.trim().split(/\s+as\s+/)[0].trim();
+          if (name) lucideNames.add(name);
+        }
+      }
+      continue;
+    }
+    if (isCommentOrImport(line)) continue;
+    const rawColors = line.match(RAW_COLOR_RE);
+    if (rawColors) {
+      for (const m of rawColors) {
+        findings.push({
+          rule: "raw-color",
+          severity: "error",
+          line: lineNo,
+          message: "Hardcoded palette color. Use a semantic token (text-primary, bg-muted, border-border, text-muted-foreground, \u2026) so dark mode and rebranding work.",
+          snippet: m.trim().replace(/^["'`:\s]+/, "")
+        });
+      }
+    }
+    const literals = line.match(COLOR_LITERAL_RE);
+    if (literals) {
+      findings.push({
+        rule: "color-literal",
+        severity: "error",
+        line: lineNo,
+        message: "Hardcoded color literal. Colors must come from the theme generator (createTimbalTheme) and semantic tokens \u2014 never inline hex/oklch/rgb.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (INLINE_STYLE_COLOR_RE.test(line)) {
+      findings.push({
+        rule: "inline-style-color",
+        severity: "error",
+        line: lineNo,
+        message: "Inline style color. Move color to a semantic Tailwind token on className.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (RAW_CONTROL_SURFACE_RE.test(line)) {
+      findings.push({
+        rule: "raw-control-surface",
+        severity: "warn",
+        line: lineNo,
+        message: "Hand-rolled control surface (border-input). Use a kit control \u2014 SearchInput, Select, DropdownMenu, FieldInput, FieldSelect \u2014 so it matches every other control.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (BOLD_VALUE_RE.test(line)) {
+      findings.push({
+        rule: "bold-metric",
+        severity: "warn",
+        line: lineNo,
+        message: "Bold large value. House style: metric values use font-normal, not bold \u2014 bold giant numbers read as a template.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (GRADIENT_RE.test(line)) {
+      const fromTo = line.match(
+        new RegExp(`(?:from|via|to)-([a-z-]+)`, "g")
+      );
+      const colorStops = (fromTo ?? []).map((u) => stripVariants(u).replace(/^(?:from|via|to)-/, "")).filter((token) => !GRADIENT_DIRECTIONS.has(token));
+      const allReserved = colorStops.length > 0 && colorStops.every((token) => RESERVED_GRADIENT_SET.has(token));
+      if (!allReserved) {
+        findings.push({
+          rule: "data-gradient",
+          severity: "warn",
+          line: lineNo,
+          message: "Gradient outside chrome. Gradients are reserved for buttons / elevated / modal / playground \u2014 never a data card, tile, or table.",
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    }
+    if (/\b(?:border-t|border-b|divide-y)\b/.test(line)) {
+      dividerRunCount++;
+      if (dividerRunCount === maxRowDividers + 1) {
+        findings.push({
+          rule: "row-divider",
+          severity: "warn",
+          line: lineNo,
+          message: "Divider on every row. Prefer spacing (gap-*) or zebra striping over a rule under each list item.",
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    } else if (line.trim() !== "" && !line.includes("className")) {
+      if (!/^\s*[)>}/]/.test(line)) dividerRunCount = 0;
+    }
+    if (usesLucide && lucideNames.size > 0) {
+      for (const name of lucideNames) {
+        const usage = new RegExp(`<${name}\\b`, "g");
+        const hits = line.match(usage);
+        if (hits) iconUsageCount += hits.length;
+      }
+    }
+  }
+  if (usesLucide && iconUsageCount > maxIcons) {
+    findings.push({
+      rule: "icon-spam",
+      severity: "warn",
+      line: 1,
+      message: `Too many icons (${iconUsageCount} > ${maxIcons}). Icons should mark actions/nav/status \u2014 not decorate every label, tile, and card.`,
+      snippet: `${iconUsageCount} lucide-react icon usages`
+    });
+  }
+  const effectiveErrors = findings.filter(
+    (f) => f.severity === "error" || options.strict && f.severity === "warn"
+  ).length;
+  return {
+    findings,
+    errorCount: findings.filter((f) => f.severity === "error").length,
+    warnCount: findings.filter((f) => f.severity === "warn").length,
+    ok: effectiveErrors === 0
+  };
+}
+function formatLintReport(findings) {
+  if (findings.length === 0) return "";
+  const lines = findings.slice().sort((a, b) => a.line - b.line).map((f) => {
+    const tag = f.severity === "error" ? "ERROR" : "warn ";
+    return `  ${tag} L${f.line} [${f.rule}] ${f.message}
+        \u2192 ${f.snippet}`;
+  });
+  const errs = findings.filter((f) => f.severity === "error").length;
+  const warns = findings.filter((f) => f.severity === "warn").length;
+  return `Anti-slop review: ${errs} error(s), ${warns} warning(s)
+${lines.join("\n")}`;
+}
+
+// src/design/ui-review.ts
+function reviewGeneratedUi(source, options = {}) {
+  const lint = lintGeneratedUi(source, options);
+  const report = formatLintReport(lint.findings);
+  if (lint.ok) {
+    return { lint, passed: true, report, revisionPrompt: null };
+  }
+  const revisionPrompt = [
+    "The generated UI failed the Timbal anti-slop review. Fix every issue below, then return the corrected code only.",
+    "",
+    report,
+    "",
+    "Rules: colors come only from semantic tokens (text-primary, bg-muted, border-border, text-muted-foreground, \u2026) \u2014 never palette colors, hex, or oklch. Icons mark actions/nav/status, not decoration. Metric values use font-normal. No gradients on data surfaces. No divider under every row. Do not change anything that already passed."
+  ].join("\n");
+  return { lint, passed: false, report, revisionPrompt };
+}
+var UI_REVIEW_AGENT_INSTRUCTIONS = `
+## Self-review before returning UI (anti-slop)
+
+Before you output any generated UI code, silently re-read it and fix anything that matches the slop checklist \u2014 this is the same rubric an automated linter applies, so output that fails it will be rejected and sent back:
+
+- **No hardcoded colors.** Every color is a semantic token (\`text-primary\`, \`bg-muted\`, \`border-border\`, \`text-muted-foreground\`, \`bg-destructive\`, \u2026). No \`text-blue-600\`, no \`#hex\`, no \`oklch(...)\`, no \`style={{ color }}\`.
+- **No decorative icons.** An icon must mark an action, nav target, or status. Remove icons that sit beside a label that already says the thing. Aim for very few icons per view.
+- **Muted, sparse trends.** No colored up/down pill on every metric. Show a trend only when the change is the point.
+- **Normal-weight values.** Metric numbers use \`font-normal\`, never \`font-bold\` at large sizes.
+- **No card-in-card, no per-row dividers, no gradients on data surfaces.** Group with spacing/Sections; reserve gradients for chrome.
+- **Compose from blocks.** Prefer \`MetricRow\` / \`MetricChartCard\` / \`DataTable\` / \`IntegrationCard\` over hand-assembled primitives.
+
+If a check fails, fix it and re-read once more. Only return code that would pass clean.
+`.trim();
+
 // src/design/oklch.ts
 var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 var round = (n, digits) => {
@@ -1615,6 +2041,38 @@ var ThemePresetGallery = ({
 var import_react3 = require("motion/react");
 var import_react4 = require("react");
 
+// src/design/control-surface.ts
+var CONTROL_SIZE = {
+  sm: "h-9 px-3",
+  default: "h-10 px-3"
+};
+var CONTROL_SHAPE = {
+  field: "rounded-lg",
+  pill: "rounded-full"
+};
+var controlSurfaceClass = cn(
+  TIMBAL_V2_SECONDARY_CHROME,
+  "text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10",
+  "focus-within:ring-2 focus-within:ring-foreground/10",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "data-[placeholder]:text-muted-foreground"
+);
+function controlClass(options = {}, className) {
+  const { size = "default", shape = "field" } = options;
+  return cn(controlSurfaceClass, CONTROL_SIZE[size], CONTROL_SHAPE[shape], className);
+}
+var overlayAnimationClass = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var overlaySurfaceClass = cn(
+  "z-[80] border border-border bg-popover text-popover-foreground shadow-card",
+  overlayAnimationClass
+);
+var overlayListPanelClass = cn(
+  overlaySurfaceClass,
+  "overflow-hidden rounded-lg p-0 outline-hidden"
+);
+
 // src/design/app-classes.ts
 var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
 var appShellTopbarInsetClass = "w-full px-4 md:px-6";
@@ -1648,18 +2106,13 @@ var appFilterBarClass = cn(
   "flex flex-wrap items-center gap-2",
   studioTopbarPillHeightClass
 );
-var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
+var appSearchInputClass = controlClass({}, "inline-flex items-center gap-2");
 var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
 var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
 var appFieldClass = "flex flex-col gap-1.5";
 var appFieldLabelClass = "text-sm font-medium text-foreground";
 var appFieldHintClass = "text-xs text-muted-foreground";
-var appInputClass = cn(
-  studioSecondaryChromeClass,
-  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
-  "placeholder:text-muted-foreground/70",
-  "focus-visible:ring-2 focus-visible:ring-foreground/10"
-);
+var appInputClass = controlClass({}, "w-full");
 var appEmptyStateClass = cn(
   appSurfaceCardClass,
   "flex flex-col items-center justify-center gap-2 py-12 text-center"
@@ -7572,6 +8025,7 @@ function TimbalChat({
   Breadcrumbs,
   Button,
   CHART_PALETTE,
+  COLOR_UTILITY_PREFIXES,
   ChartArtifactView,
   ChartPanel,
   ConnectionRow,
@@ -7591,6 +8045,7 @@ function TimbalChat({
   FilterBar,
   FloatingUnsavedChangesBar,
   FormSection,
+  HOUSE_RULES,
   INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
   InfoCard,
   IntegrationCard,
@@ -7602,7 +8057,10 @@ function TimbalChat({
   Page,
   PageHeader,
   PlanBadge,
+  RESERVED_GRADIENT_TOKENS,
   ResourceCard,
+  SEMANTIC_COLOR_TOKENS,
+  SLOP_BUDGETS,
   SearchInput,
   Section,
   SettingsSection,
@@ -7613,11 +8071,13 @@ function TimbalChat({
   StatusDot,
   SubNav,
   SurfaceCard,
+  TAILWIND_PALETTE_COLORS,
   THEME_AGENT_INSTRUCTIONS,
   TIMBAL_THEME_PRESETS,
   ThemePresetGallery,
   TimbalChat,
   TimbalThemeStyle,
+  UI_REVIEW_AGENT_INSTRUCTIONS,
   appFilterBarClass,
   appPageColumnClass,
   appSearchInputClass,
@@ -7631,8 +8091,11 @@ function TimbalChat({
   connectionRowListClass,
   createTimbalTheme,
   ensureThemeFontLink,
+  formatLintReport,
   getStoredThemePreset,
   getThemePreset,
+  lintGeneratedUi,
+  reviewGeneratedUi,
   themeToCss,
   useAppCopilotContext,
   useAppShellChat