@timbal-ai/timbal-react 1.6.1 → 1.7.0

package/dist/{chunk-UVPXH4MB.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.",
@@ -579,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)-/;
@@ -601,11 +611,26 @@ 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 = [];
@@ -685,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",
@@ -836,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 ";
@@ -2031,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";
@@ -2054,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",
@@ -2144,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;
@@ -2209,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",
           {
@@ -2293,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",
@@ -2312,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 })
     }
   );
 };
@@ -2450,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
@@ -2460,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
 };

package/dist/cli/timbal-ui-lint.mjs

@@ -86,6 +86,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)-/;
@@ -108,11 +109,26 @@ 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 = [];
@@ -192,7 +208,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",
@@ -343,6 +369,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 ";