@timbal-ai/timbal-react 1.6.0 → 1.7.0

package/dist/{chunk-6SQMTBPL.esm.js → chunk-M5IBJBEY.esm.js}

@@ -2,9 +2,11 @@ import {
   SIDEBAR_INSET_PX_EXPANDED,
   STORAGE_KEYS,
   ShellInsetProvider,
+  ShellNavProvider,
   studioChromeShellStyle,
-  studioSidebarWidthTransition
-} from "./chunk-ELEY66OH.esm.js";
+  studioSidebarWidthTransition,
+  useOptionalShellNav
+} from "./chunk-XOCOZU7J.esm.js";
 import {
   ChartArtifactView,
   LineAreaChart,
@@ -16,7 +18,7 @@ import {
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-WQIQW7EM.esm.js";
+} from "./chunk-7AGIAQE6.esm.js";
 import {
   Checkbox,
   CopyButton,
@@ -29,7 +31,7 @@ import {
   SelectTrigger,
   SelectValue,
   Skeleton
-} from "./chunk-NO5AWNWT.esm.js";
+} from "./chunk-7WU3IKAN.esm.js";
 import {
   PillSegmentedTabs
 } from "./chunk-R4RQT2XQ.esm.js";
@@ -45,7 +47,7 @@ import {
   TIMBAL_V2_SWITCH_TRACK_OFF,
   TimbalV2Button,
   controlClass
-} from "./chunk-MBS7XHV2.esm.js";
+} from "./chunk-45NXD3IG.esm.js";
 import {
   cn
 } from "./chunk-EDEKQYSU.esm.js";
@@ -178,6 +180,13 @@ var HOUSE_RULES = [
     slop: `<span className="text-blue-600 bg-green-50">`,
     good: `<span className="text-primary bg-muted">`
   },
+  {
+    id: "chart-token-color",
+    rule: "Pass chart and theme color tokens directly (var(--chart-1)) \u2014 never wrap them in hsl(), rgb(), or oklch().",
+    why: "The --chart-N and theme tokens are already full OKLCH colors. Wrapping them in hsl()/rgb() is invalid CSS, so the chart renders empty/uncolored \u2014 and the build still passes, so it's a silent runtime bug.",
+    slop: `<Cell fill="hsl(var(--chart-1))" />`,
+    good: `<Cell fill="var(--chart-1)" />`
+  },
   {
     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.",
@@ -224,7 +233,11 @@ var HOUSE_RULES = [
   {
     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."
+    why: "Slop appears the moment generation falls below the curated block layer.",
+    // "Should have used a block" is a judgement about absence, not a textual
+    // pattern — no high-precision deterministic check exists, so this stays
+    // prompt-only rather than risk false-positives blocking valid UIs.
+    enforcement: "prompt-only"
   },
   {
     id: "use-kit-controls",
@@ -305,7 +318,7 @@ The content region is a **padded scroll area** by default \u2014 great for stack
 - Give the filling child **\`min-h-0 flex-1\`** (or \`h-full\`) so its own scroll/footer resolves \u2014 e.g. \`<TimbalChat className="min-h-0 flex-1" />\`, or a two-pane row where each pane is \`min-h-0 overflow-y-auto\`.
 
 \`\`\`tsx
-<AppShell contentFill topbar={<div className="flex justify-end p-4"><ModeToggle /></div>}>
+<AppShell contentFill>                          {/* no global topbar / theme switch */}
   <Page fill>                                  {/* headerless: omit title */}
     <TimbalChat workforceId="\u2026" className="min-h-0 flex-1" />
   </Page>
@@ -409,6 +422,8 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 
 Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipContent\` chrome (see \`src/ui/chart.tsx\`). Series colors default to \`--chart-1..6\`; override those CSS tokens to rebrand every chart.
 
+> **React 19 requirement \u2014 do not hand-roll SVG charts to work around this.** recharts under React 19 crashes (\`Cannot assign to read only property 'lanes'\`, blank route) when \`immer\` resolves to **11.0.0**. The fix is a dependency override in the app's \`package.json\` \u2014 \`"overrides": { "immer": ">=11.0.1" }\` (Yarn: \`"resolutions"\`) \u2014 **not** a code change. Always keep using \`LineAreaChart\` / \`PieChart\` / \`ChartPanel\`; never replace them with raw SVG/CSS charts.
+
 | Component | Use for |
 |-----------|---------|
 | \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Bar fills use theme gradients automatically. Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\`, \`dots\`, \`gridLines\`, \`tooltipIndicator\`, \`layout\` (\`flush\` \u2014 hides axes by default; category + values on hover tooltip), \`showXAxis\` / \`showYAxis\` to opt back in, \`clipTicks\` (truncates long axis labels when axes are on), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
@@ -573,6 +588,7 @@ var RAW_COLOR_RE = new RegExp(
   "g"
 );
 var COLOR_LITERAL_RE = /#[0-9a-fA-F]{3,8}\b|\b(?:oklch|rgba?|hsla?)\s*\(/g;
+var COLOR_FN_WRAPPING_VAR_RE = /\b(?:hsl|hsla|rgb|rgba|oklch|oklab|lab|lch|hwb|color)\s*\(\s*var\(\s*--/i;
 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)-/;
@@ -589,15 +605,32 @@ var GRADIENT_DIRECTIONS = /* @__PURE__ */ new Set([
 var ICON_IMPORT_RE = /from\s+["']lucide-react["']/;
 var RAW_CONTROL_SURFACE_RE = /\bborder-input\b/;
 var COLORED_HOVER_RE = /\bhover:(?:bg|from|to|via)-(?:primary|destructive|success|warn|danger|blue|emerald|green|amber|red|indigo|violet|purple|pink|rose|sky|cyan|teal|lime|yellow|orange|fuchsia)\b/;
+var TREND_CONTEXT_RE = /\b(?:trend|delta|TrendingUp|TrendingDown|ArrowUp|ArrowDown|ArrowUpRight|ArrowDownRight|MoveUp|MoveDown)\b|[+\-]\d+(?:\.\d+)?\s*%/;
+var TREND_COLOR_RE = /\b(?:text|bg|border)-(?:success|destructive|emerald|green|lime|teal|red|rose|orange|amber)(?:-\d{2,3})?(?:\/\d{1,3})?\b/;
 var RESERVED_GRADIENT_SET = new Set(RESERVED_GRADIENT_TOKENS);
 function stripVariants(util) {
   return util.replace(/^(?:[a-z-]+:)*/, "");
 }
+function describeArg(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "an array";
+  const t = typeof value;
+  if (t === "object") {
+    const keys = Object.keys(value).slice(0, 4);
+    return keys.length ? `an object with keys { ${keys.join(", ")} }` : "an object";
+  }
+  return `a ${t}`;
+}
 function isCommentOrImport(line) {
   const t = line.trim();
   return t.startsWith("//") || t.startsWith("*") || t.startsWith("/*") || t.startsWith("import ") || t.startsWith("export ");
 }
 function lintGeneratedUi(source, options = {}) {
+  if (typeof source !== "string") {
+    throw new TypeError(
+      `lintGeneratedUi(source, options?) expects the generated code as a string, but received ${describeArg(source)}. Pass the raw .tsx source \u2014 lintGeneratedUi(code) \u2014 not an object like { filename, source } and not a previous LintResult.`
+    );
+  }
   const maxIcons = options.maxIconsPerView ?? SLOP_BUDGETS.maxIconsPerView;
   const maxRowDividers = options.maxRowDividers ?? SLOP_BUDGETS.maxRowDividers;
   const findings = [];
@@ -632,6 +665,16 @@ function lintGeneratedUi(source, options = {}) {
     if (cardMatch) {
       const isSelfClosing = /\/>/.test(line) && line.indexOf(cardMatch[0]) < line.indexOf("/>");
       if (!isSelfClosing) {
+        if (openCards.length > 0) {
+          const parentCard = openCards[openCards.length - 1];
+          findings.push({
+            rule: "no-card-in-card",
+            severity: "warn",
+            line: lineNo,
+            message: `Card inside card. A <${cardMatch[1]}> is nested inside the <${parentCard.type}> opened on L${parentCard.line}. Double borders/shadows add no information \u2014 group with spacing or a <Section> instead.`,
+            snippet: line.trim().slice(0, 120)
+          });
+        }
         openCards.push({ type: cardMatch[1], line: lineNo });
       }
     }
@@ -667,7 +710,17 @@ function lintGeneratedUi(source, options = {}) {
         });
       }
     }
-    const literals = line.match(COLOR_LITERAL_RE);
+    const wrapsTokenInColorFn = COLOR_FN_WRAPPING_VAR_RE.test(line);
+    if (wrapsTokenInColorFn) {
+      findings.push({
+        rule: "chart-token-color-fn",
+        severity: "error",
+        line: lineNo,
+        message: "Color function wrapping a token (e.g. hsl(var(--chart-1))). The --chart-N and theme tokens are already OKLCH colors \u2014 wrapping them in hsl()/rgb() is invalid CSS and renders an empty/uncolored chart (the build still passes). Pass the token directly: var(--chart-1), or let the app-kit charts use --chart-N automatically.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    const literals = wrapsTokenInColorFn ? null : line.match(COLOR_LITERAL_RE);
     if (literals) {
       findings.push({
         rule: "color-literal",
@@ -704,6 +757,15 @@ function lintGeneratedUi(source, options = {}) {
         snippet: line.trim().slice(0, 120)
       });
     }
+    if (TREND_CONTEXT_RE.test(line) && TREND_COLOR_RE.test(line)) {
+      findings.push({
+        rule: "neutral-trend",
+        severity: "warn",
+        line: lineNo,
+        message: "Colored trend indicator. House style: don't tint deltas green/red on every metric \u2014 show a trend only when the change is the point, and keep it muted (text-muted-foreground).",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
     if (BOLD_VALUE_RE.test(line)) {
       findings.push({
         rule: "bold-metric",
@@ -809,6 +871,11 @@ function lintGeneratedUi(source, options = {}) {
   };
 }
 function formatLintReport(findings) {
+  if (!Array.isArray(findings)) {
+    throw new TypeError(
+      `formatLintReport(findings) expects the findings array, but received ${describeArg(findings)}. Pass result.findings \u2014 formatLintReport(lintGeneratedUi(code).findings) \u2014 not the whole LintResult.`
+    );
+  }
   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 ";
@@ -2004,20 +2071,20 @@ function useAppShellChat() {
 }
 
 // src/app/layout/app-shell-nav-context.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var AppShellNavContext = createContext3(null);
-var AppShellNavProvider = AppShellNavContext.Provider;
+var AppShellNavProvider = ShellNavProvider;
+var NAV_NOOP = {
+  open: false,
+  setOpen: () => {
+  },
+  toggle: () => {
+  }
+};
 function useAppShellNav() {
-  return useContext3(AppShellNavContext) ?? {
-    open: false,
-    setOpen: () => {
-    },
-    toggle: () => {
-    }
-  };
+  return useOptionalShellNav() ?? NAV_NOOP;
 }
 
 // src/app/layout/AppShell.tsx
+import { MenuIcon } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -2027,6 +2094,12 @@ var floatingTriggerClass = cn(
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   "bottom-6 right-6 max-sm:bottom-4 max-sm:right-4"
 );
+var floatingNavTriggerClass = cn(
+  "aui-app-shell-nav-trigger-fixed fixed left-4 top-4 z-30 inline-flex size-10 items-center justify-center rounded-xl md:hidden",
+  "border border-border/60 bg-card/85 text-foreground shadow-card-elevated backdrop-blur-xl supports-backdrop-filter:bg-card/75",
+  "transition-colors hover:bg-card",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
 var floatingPanelClass = cn(
   "aui-app-shell-chat-float fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border/60 shadow-card-elevated",
   "bg-card/85 backdrop-blur-xl supports-backdrop-filter:bg-card/75",
@@ -2117,12 +2190,14 @@ var AppShell = ({
   navOpen: navOpenProp,
   defaultNavOpen = false,
   onNavOpenChange,
+  mobileSidebarTrigger = "auto",
   className,
   mainClassName,
   contentFill = false
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
+  const showFloatingNavTrigger = Boolean(sidebar) && mobileSidebarTrigger !== "none" && !(mobileSidebarTrigger === "topbar") && !topbarContent;
   const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState2(defaultNavOpen);
   const isNavControlled = navOpenProp !== void 0;
   const navOpen = isNavControlled ? navOpenProp : uncontrolledNavOpen;
@@ -2182,6 +2257,17 @@ var AppShell = ({
       style: studioChromeShellStyle,
       children: [
         sidebar,
+        showFloatingNavTrigger && !navOpen ? /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Open navigation",
+            "aria-expanded": false,
+            onClick: () => setNavOpen(true),
+            className: floatingNavTriggerClass,
+            children: /* @__PURE__ */ jsx7(MenuIcon, { className: "size-5", "aria-hidden": true })
+          }
+        ) : null,
         sidebar && navOpen ? /* @__PURE__ */ jsx7(
           "button",
           {
@@ -2266,7 +2352,7 @@ var AppShellChatTrigger = ({
 };
 
 // src/app/layout/AppShellSidebarTrigger.tsx
-import { MenuIcon } from "lucide-react";
+import { MenuIcon as MenuIcon2 } from "lucide-react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var AppShellSidebarTrigger = ({
   label = "Open navigation",
@@ -2285,7 +2371,7 @@ var AppShellSidebarTrigger = ({
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10",
         className
       ),
-      children: /* @__PURE__ */ jsx9(MenuIcon, { className: "size-5", "aria-hidden": true })
+      children: /* @__PURE__ */ jsx9(MenuIcon2, { className: "size-5", "aria-hidden": true })
     }
   );
 };
@@ -2423,9 +2509,9 @@ var Stack = ({
 );
 
 // src/app/copilot/app-copilot-context.tsx
-import { createContext as createContext4, useContext as useContext4 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-var AppCopilotContext = createContext4(null);
+var AppCopilotContext = createContext3(null);
 var AppCopilotProvider = ({
   value,
   children
@@ -2433,7 +2519,7 @@ var AppCopilotProvider = ({
   return /* @__PURE__ */ jsx14(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
-  return useContext4(AppCopilotContext) ?? {};
+  return useContext3(AppCopilotContext) ?? {};
 }
 
 // src/app/chat/AppChatPanel.tsx

package/dist/{chunk-HSL36SJ4.esm.js → chunk-PMMI7LBV.esm.js}

@@ -16,11 +16,12 @@ import {
   studioSidebarEntriesTransition,
   studioSidebarEntryItemVariants,
   studioSidebarWidthTransition,
+  useOptionalShellNav,
   useShellInsetReporter
-} from "./chunk-ELEY66OH.esm.js";
+} from "./chunk-XOCOZU7J.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-TMP7RIA7.esm.js";
+} from "./chunk-VKXOHVDE.esm.js";
 import {
   Composer,
   TimbalChat,
@@ -43,7 +44,7 @@ import {
   studioTopbarIconPillClass,
   studioTopbarPillHeightClass,
   useTimbalRuntime
-} from "./chunk-WQIQW7EM.esm.js";
+} from "./chunk-7AGIAQE6.esm.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -51,7 +52,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-24B4I4XC.esm.js";
+} from "./chunk-64RHAJVG.esm.js";
 import {
   PillSegmentedTabs
 } from "./chunk-R4RQT2XQ.esm.js";
@@ -63,7 +64,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger
-} from "./chunk-MBS7XHV2.esm.js";
+} from "./chunk-45NXD3IG.esm.js";
 import {
   cn
 } from "./chunk-EDEKQYSU.esm.js";
@@ -1119,14 +1120,25 @@ var StudioSidebar = ({
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [mobileBreakpointPx]);
+  const shellNav = useOptionalShellNav();
+  const isControlled = mobileOpenProp !== void 0;
+  const usingShellNav = !isControlled && shellNav !== null;
   const [internalMobileOpen, setInternalMobileOpen] = useState5(false);
-  const mobileOpen = mobileOpenProp ?? internalMobileOpen;
+  const mobileOpen = isControlled ? mobileOpenProp : usingShellNav ? shellNav.open : internalMobileOpen;
   const setMobileOpen = useCallback3(
     (next) => {
-      if (mobileOpenProp === void 0) setInternalMobileOpen(next);
+      if (isControlled) {
+        onMobileOpenChangeProp?.(next);
+        return;
+      }
+      if (usingShellNav) {
+        shellNav.setOpen(next);
+      } else {
+        setInternalMobileOpen(next);
+      }
       onMobileOpenChangeProp?.(next);
     },
-    [mobileOpenProp, onMobileOpenChangeProp]
+    [isControlled, usingShellNav, shellNav, onMobileOpenChangeProp]
   );
   const handleSelect = useCallback3(
     (id) => {

package/dist/{chunk-TMP7RIA7.esm.js → chunk-VKXOHVDE.esm.js}

@@ -1,9 +1,9 @@
 import {
   studioTopbarPillHeightClass
-} from "./chunk-WQIQW7EM.esm.js";
+} from "./chunk-7AGIAQE6.esm.js";
 import {
   controlSurfaceClass
-} from "./chunk-MBS7XHV2.esm.js";
+} from "./chunk-45NXD3IG.esm.js";
 import {
   cn
 } from "./chunk-EDEKQYSU.esm.js";

package/dist/{chunk-ELEY66OH.esm.js → chunk-XOCOZU7J.esm.js}

@@ -119,6 +119,14 @@ function useShellInsetReporter() {
   return useContext(ShellInsetContext);
 }
 
+// src/layout/shell-nav-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ShellNavContext = createContext2(null);
+var ShellNavProvider = ShellNavContext.Provider;
+function useOptionalShellNav() {
+  return useContext2(ShellNavContext);
+}
+
 export {
   SIDEBAR_WIDTH_PX,
   SIDEBAR_WIDTH_COLLAPSED_PX,
@@ -138,5 +146,7 @@ export {
   studioSidebarDrawerTransition,
   studioSidebarBackdropTransition,
   ShellInsetProvider,
-  useShellInsetReporter
+  useShellInsetReporter,
+  ShellNavProvider,
+  useOptionalShellNav
 };