@schandlergarcia/sf-web-components 1.8.0 → 1.9.0

package/dist/components/library/theme/AppThemeProvider.d.ts

@@ -1,51 +1,14 @@
-export function useThemeMode(): {
-    mode: string;
-    theme: {
-        colors: {
-            brand: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            accent: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-        };
-        fonts: {
-            sans: string;
-            mono: string;
-        };
-        radius: {
-            sm: string;
-            md: string;
-            lg: string;
-        };
-        spacing: {
-            pageX: string;
-            pageY: string;
-        };
-    };
+import React from "react";
+import { Tokens } from "./tokens";
+export type ThemeMode = "light" | "dark";
+export interface ThemeModeContextValue {
+    mode: ThemeMode;
+    theme: Tokens;
     toggle: () => void;
-};
-export default function AppThemeProvider({ initialMode, children }: {
-    initialMode?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function useThemeMode(): ThemeModeContextValue;
+export interface AppThemeProviderProps {
+    initialMode?: ThemeMode;
+    children: React.ReactNode;
+}
+export default function AppThemeProvider({ initialMode, children }: AppThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/theme/AppThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppThemeProvider.js","sources":["../../../../src/components/library/theme/AppThemeProvider.jsx"],"sourcesContent":["import React from \"react\";\nimport { tokens, getTokenCSSProperties } from \"./tokens\";\n\nconst ThemeModeContext = React.createContext({\n  mode: \"light\",\n  theme: tokens,\n  toggle: () => {}\n});\n\nconst STORAGE_KEY = \"app-color-mode\";\n\nfunction applyHtmlDarkClass(mode) {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n}\n\nfunction applyTokenCSSProperties() {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  const props = getTokenCSSProperties();\n  for (const [key, value] of Object.entries(props)) {\n    root.style.setProperty(key, value);\n  }\n}\n\nexport function useThemeMode() {\n  return React.useContext(ThemeModeContext);\n}\n\nexport default function AppThemeProvider({ initialMode = \"light\", children }) {\n  const [mode, setMode] = React.useState(initialMode);\n\n  React.useEffect(() => {\n    applyTokenCSSProperties();\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      const stored = window.localStorage.getItem(STORAGE_KEY);\n      if (stored === \"light\" || stored === \"dark\") setMode(stored);\n    } catch {\n      // ignore\n    }\n  }, []);\n\n  React.useEffect(() => {\n    applyHtmlDarkClass(mode);\n    try {\n      window.localStorage.setItem(STORAGE_KEY, mode);\n    } catch {\n      // ignore\n    }\n  }, [mode]);\n\n  const value = React.useMemo(\n    () => ({\n      mode,\n      theme: tokens,\n      toggle: () => setMode((m) => (m === \"dark\" ? \"light\" : \"dark\"))\n    }),\n    [mode]\n  );\n\n  return <ThemeModeContext.Provider value={value}>{children}</ThemeModeContext.Provider>;\n}\n"],"names":["ThemeModeContext","React","tokens","STORAGE_KEY","applyHtmlDarkClass","mode","root","applyTokenCSSProperties","props","getTokenCSSProperties","key","value","useThemeMode","AppThemeProvider","initialMode","children","setMode","stored","m","jsx"],"mappings":";;;AAGA,MAAMA,IAAmBC,EAAM,cAAc;AAAA,EAC3C,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC,GAEKC,IAAc;AAEpB,SAASC,EAAmBC,GAAM;AAChC,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAS,SAAQC,EAAK,UAAU,IAAI,MAAM,IACzCA,EAAK,UAAU,OAAO,MAAM;AACnC;AAEA,SAASC,IAA0B;AACjC,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMD,IAAO,SAAS,iBAChBE,IAAQC,EAAA;AACd,aAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQH,CAAK;AAC7C,IAAAF,EAAK,MAAM,YAAYI,GAAKC,CAAK;AAErC;AAEO,SAASC,IAAe;AAC7B,SAAOX,EAAM,WAAWD,CAAgB;AAC1C;AAEA,SAAwBa,EAAiB,EAAE,aAAAC,IAAc,SAAS,UAAAC,KAAY;AAC5E,QAAM,CAACV,GAAMW,CAAO,IAAIf,EAAM,SAASa,CAAW;AAElDb,EAAAA,EAAM,UAAU,MAAM;AACpB,IAAAM,EAAA;AAAA,EACF,GAAG,CAAA,CAAE,GAELN,EAAM,UAAU,MAAM;AACpB,QAAI;AACF,YAAMgB,IAAS,OAAO,aAAa,QAAQd,CAAW;AACtD,OAAIc,MAAW,WAAWA,MAAW,aAAgBA,CAAM;AAAA,IAC7D,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAA,CAAE,GAELhB,EAAM,UAAU,MAAM;AACpB,IAAAG,EAAmBC,CAAI;AACvB,QAAI;AACF,aAAO,aAAa,QAAQF,GAAaE,CAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAACA,CAAI,CAAC;AAET,QAAMM,IAAQV,EAAM;AAAA,IAClB,OAAO;AAAA,MACL,MAAAI;AAAA,MACA,OAAOH;AAAA,MACP,QAAQ,MAAMc,EAAQ,CAACE,MAAOA,MAAM,SAAS,UAAU,MAAO;AAAA,IAAA;AAAA,IAEhE,CAACb,CAAI;AAAA,EAAA;AAGP,SAAO,gBAAAc,EAACnB,EAAiB,UAAjB,EAA0B,OAAAW,GAAe,UAAAI,EAAA,CAAS;AAC5D;"}
+{"version":3,"file":"AppThemeProvider.js","sources":["../../../../src/components/library/theme/AppThemeProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { tokens, getTokenCSSProperties, Tokens } from \"./tokens\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\nexport interface ThemeModeContextValue {\n  mode: ThemeMode;\n  theme: Tokens;\n  toggle: () => void;\n}\n\nconst ThemeModeContext = React.createContext<ThemeModeContextValue>({\n  mode: \"light\",\n  theme: tokens,\n  toggle: () => {}\n});\n\nconst STORAGE_KEY = \"app-color-mode\";\n\nfunction applyHtmlDarkClass(mode: ThemeMode): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n}\n\nfunction applyTokenCSSProperties(): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  const props = getTokenCSSProperties();\n  for (const [key, value] of Object.entries(props)) {\n    root.style.setProperty(key, value);\n  }\n}\n\nexport function useThemeMode(): ThemeModeContextValue {\n  return React.useContext(ThemeModeContext);\n}\n\nexport interface AppThemeProviderProps {\n  initialMode?: ThemeMode;\n  children: React.ReactNode;\n}\n\nexport default function AppThemeProvider({ initialMode = \"light\", children }: AppThemeProviderProps) {\n  const [mode, setMode] = React.useState<ThemeMode>(initialMode);\n\n  React.useEffect(() => {\n    applyTokenCSSProperties();\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      const stored = window.localStorage.getItem(STORAGE_KEY);\n      if (stored === \"light\" || stored === \"dark\") setMode(stored);\n    } catch {\n      // ignore\n    }\n  }, []);\n\n  React.useEffect(() => {\n    applyHtmlDarkClass(mode);\n    try {\n      window.localStorage.setItem(STORAGE_KEY, mode);\n    } catch {\n      // ignore\n    }\n  }, [mode]);\n\n  const value = React.useMemo(\n    () => ({\n      mode,\n      theme: tokens,\n      toggle: () => setMode((m) => (m === \"dark\" ? \"light\" : \"dark\"))\n    }),\n    [mode]\n  );\n\n  return <ThemeModeContext.Provider value={value}>{children}</ThemeModeContext.Provider>;\n}\n"],"names":["ThemeModeContext","React","tokens","STORAGE_KEY","applyHtmlDarkClass","mode","root","applyTokenCSSProperties","props","getTokenCSSProperties","key","value","useThemeMode","AppThemeProvider","initialMode","children","setMode","stored","m","jsx"],"mappings":";;;AAWA,MAAMA,IAAmBC,EAAM,cAAqC;AAAA,EAClE,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC,GAEKC,IAAc;AAEpB,SAASC,EAAmBC,GAAuB;AACjD,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAS,SAAQC,EAAK,UAAU,IAAI,MAAM,IACzCA,EAAK,UAAU,OAAO,MAAM;AACnC;AAEA,SAASC,IAAgC;AACvC,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMD,IAAO,SAAS,iBAChBE,IAAQC,EAAA;AACd,aAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQH,CAAK;AAC7C,IAAAF,EAAK,MAAM,YAAYI,GAAKC,CAAK;AAErC;AAEO,SAASC,IAAsC;AACpD,SAAOX,EAAM,WAAWD,CAAgB;AAC1C;AAOA,SAAwBa,EAAiB,EAAE,aAAAC,IAAc,SAAS,UAAAC,KAAmC;AACnG,QAAM,CAACV,GAAMW,CAAO,IAAIf,EAAM,SAAoBa,CAAW;AAE7Db,EAAAA,EAAM,UAAU,MAAM;AACpB,IAAAM,EAAA;AAAA,EACF,GAAG,CAAA,CAAE,GAELN,EAAM,UAAU,MAAM;AACpB,QAAI;AACF,YAAMgB,IAAS,OAAO,aAAa,QAAQd,CAAW;AACtD,OAAIc,MAAW,WAAWA,MAAW,aAAgBA,CAAM;AAAA,IAC7D,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAA,CAAE,GAELhB,EAAM,UAAU,MAAM;AACpB,IAAAG,EAAmBC,CAAI;AACvB,QAAI;AACF,aAAO,aAAa,QAAQF,GAAaE,CAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAACA,CAAI,CAAC;AAET,QAAMM,IAAQV,EAAM;AAAA,IAClB,OAAO;AAAA,MACL,MAAAI;AAAA,MACA,OAAOH;AAAA,MACP,QAAQ,MAAMc,EAAQ,CAACE,MAAOA,MAAM,SAAS,UAAU,MAAO;AAAA,IAAA;AAAA,IAEhE,CAACb,CAAI;AAAA,EAAA;AAGP,SAAO,gBAAAc,EAACnB,EAAiB,UAAjB,EAA0B,OAAAW,GAAe,UAAAI,EAAA,CAAS;AAC5D;"}

package/dist/components/library/theme/tokens.d.ts

@@ -1,48 +1,49 @@
+/**
+ * Design tokens — single source of truth for branding.
+ *
+ * To rebrand a command center:
+ *   1. Swap the `brand` palette (use any Tailwind-style color scale)
+ *   2. Swap the `accent` palette
+ *   3. Change `fonts.sans` in _app.js (next/font import)
+ *
+ * AppThemeProvider injects these as CSS custom properties on :root,
+ * and tailwind.config.js references them via var(--color-brand-*).
+ */
+export interface ColorShades {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+export interface Tokens {
+    colors: {
+        brand: ColorShades;
+        accent: ColorShades;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        pageX: string;
+        pageY: string;
+    };
+}
+export declare const tokens: Tokens;
 /**
  * Generates CSS custom property assignments from the token palettes.
  * Used by AppThemeProvider to inject on :root at runtime.
  */
-export function getTokenCSSProperties(): {};
-export namespace tokens {
-    namespace colors {
-        let brand: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        let accent: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-    }
-    namespace fonts {
-        let sans: string;
-        let mono: string;
-    }
-    namespace radius {
-        let sm: string;
-        let md: string;
-        let lg: string;
-    }
-    namespace spacing {
-        let pageX: string;
-        let pageY: string;
-    }
-}
+export declare function getTokenCSSProperties(): Record<string, string>;

package/dist/components/library/theme/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../src/components/library/theme/tokens.jsx"],"sourcesContent":["/**\n * Design tokens — single source of truth for branding.\n *\n * To rebrand a command center:\n *   1. Swap the `brand` palette (use any Tailwind-style color scale)\n *   2. Swap the `accent` palette\n *   3. Change `fonts.sans` in _app.js (next/font import)\n *\n * AppThemeProvider injects these as CSS custom properties on :root,\n * and tailwind.config.js references them via var(--color-brand-*).\n */\n\nexport const tokens = {\n  colors: {\n    brand: {\n      50: \"#EEF2FF\",\n      100: \"#E0E7FF\",\n      200: \"#C7D2FE\",\n      300: \"#A5B4FC\",\n      400: \"#818CF8\",\n      500: \"#6366F1\",\n      600: \"#4F46E5\",\n      700: \"#4338CA\",\n      800: \"#3730A3\",\n      900: \"#312E81\",\n      950: \"#1E1B4E\",\n    },\n    accent: {\n      50: \"#ECFEFF\",\n      100: \"#CFFAFE\",\n      200: \"#A5F3FC\",\n      300: \"#67E8F9\",\n      400: \"#22D3EE\",\n      500: \"#06B6D4\",\n      600: \"#0891B2\",\n      700: \"#0E7490\",\n      800: \"#155E75\",\n      900: \"#164E63\",\n      950: \"#083344\",\n    },\n  },\n\n  fonts: {\n    sans: \"Inter\",\n    mono: \"JetBrains Mono\",\n  },\n\n  radius: {\n    sm: \"0.5rem\",\n    md: \"0.75rem\",\n    lg: \"1rem\",\n  },\n\n  spacing: {\n    pageX: \"1.25rem\",\n    pageY: \"1.25rem\",\n  },\n};\n\n/**\n * Generates CSS custom property assignments from the token palettes.\n * Used by AppThemeProvider to inject on :root at runtime.\n */\nexport function getTokenCSSProperties() {\n  const props = {};\n  for (const [palette, shades] of Object.entries(tokens.colors)) {\n    for (const [shade, value] of Object.entries(shades)) {\n      props[`--color-${palette}-${shade}`] = value;\n    }\n  }\n  return props;\n}\n"],"names":["tokens","getTokenCSSProperties","props","palette","shades","shade","value"],"mappings":"AAYO,MAAMA,IAAS;AAAA,EACpB,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EACP;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAGR,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAGN,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAMO,SAASC,IAAwB;AACtC,QAAMC,IAAQ,CAAA;AACd,aAAW,CAACC,GAASC,CAAM,KAAK,OAAO,QAAQJ,EAAO,MAAM;AAC1D,eAAW,CAACK,GAAOC,CAAK,KAAK,OAAO,QAAQF,CAAM;AAChD,MAAAF,EAAM,WAAWC,CAAO,IAAIE,CAAK,EAAE,IAAIC;AAG3C,SAAOJ;AACT;"}
+{"version":3,"file":"tokens.js","sources":["../../../../src/components/library/theme/tokens.tsx"],"sourcesContent":["/**\n * Design tokens — single source of truth for branding.\n *\n * To rebrand a command center:\n *   1. Swap the `brand` palette (use any Tailwind-style color scale)\n *   2. Swap the `accent` palette\n *   3. Change `fonts.sans` in _app.js (next/font import)\n *\n * AppThemeProvider injects these as CSS custom properties on :root,\n * and tailwind.config.js references them via var(--color-brand-*).\n */\n\nexport interface ColorShades {\n  50: string;\n  100: string;\n  200: string;\n  300: string;\n  400: string;\n  500: string;\n  600: string;\n  700: string;\n  800: string;\n  900: string;\n  950: string;\n}\n\nexport interface Tokens {\n  colors: {\n    brand: ColorShades;\n    accent: ColorShades;\n  };\n  fonts: {\n    sans: string;\n    mono: string;\n  };\n  radius: {\n    sm: string;\n    md: string;\n    lg: string;\n  };\n  spacing: {\n    pageX: string;\n    pageY: string;\n  };\n}\n\nexport const tokens: Tokens = {\n  colors: {\n    brand: {\n      50: \"#EEF2FF\",\n      100: \"#E0E7FF\",\n      200: \"#C7D2FE\",\n      300: \"#A5B4FC\",\n      400: \"#818CF8\",\n      500: \"#6366F1\",\n      600: \"#4F46E5\",\n      700: \"#4338CA\",\n      800: \"#3730A3\",\n      900: \"#312E81\",\n      950: \"#1E1B4E\",\n    },\n    accent: {\n      50: \"#ECFEFF\",\n      100: \"#CFFAFE\",\n      200: \"#A5F3FC\",\n      300: \"#67E8F9\",\n      400: \"#22D3EE\",\n      500: \"#06B6D4\",\n      600: \"#0891B2\",\n      700: \"#0E7490\",\n      800: \"#155E75\",\n      900: \"#164E63\",\n      950: \"#083344\",\n    },\n  },\n\n  fonts: {\n    sans: \"Inter\",\n    mono: \"JetBrains Mono\",\n  },\n\n  radius: {\n    sm: \"0.5rem\",\n    md: \"0.75rem\",\n    lg: \"1rem\",\n  },\n\n  spacing: {\n    pageX: \"1.25rem\",\n    pageY: \"1.25rem\",\n  },\n};\n\n/**\n * Generates CSS custom property assignments from the token palettes.\n * Used by AppThemeProvider to inject on :root at runtime.\n */\nexport function getTokenCSSProperties(): Record<string, string> {\n  const props: Record<string, string> = {};\n  for (const [palette, shades] of Object.entries(tokens.colors)) {\n    for (const [shade, value] of Object.entries(shades)) {\n      props[`--color-${palette}-${shade}`] = value;\n    }\n  }\n  return props;\n}\n"],"names":["tokens","getTokenCSSProperties","props","palette","shades","shade","value"],"mappings":"AA8CO,MAAMA,IAAiB;AAAA,EAC5B,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EACP;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAGR,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAGN,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAMO,SAASC,IAAgD;AAC9D,QAAMC,IAAgC,CAAA;AACtC,aAAW,CAACC,GAASC,CAAM,KAAK,OAAO,QAAQJ,EAAO,MAAM;AAC1D,eAAW,CAACK,GAAOC,CAAK,KAAK,OAAO,QAAQF,CAAM;AAChD,MAAAF,EAAM,WAAWC,CAAO,IAAIE,CAAK,EAAE,IAAIC;AAG3C,SAAOJ;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/library/cards/SemanticMetricCard.tsx

@@ -36,7 +36,7 @@ export default function SemanticMetricCard({
   loading = false,
   ...rest
 }: SemanticMetricCardProps) {
-  const metric = React.useMemo(() => getSemanticMetric(semanticId, metricId), [semanticId, metricId]);
+  const metric = React.useMemo(() => getSemanticMetric(semanticId, metricId ?? ""), [semanticId, metricId]);
 
   const resolvedTitle = title ?? metric?.title ?? metricId ?? "Metric";
   const resolvedSubtitle = subtitle ?? metric?.subtitle;

package/src/components/library/cards/SemanticTableCard.tsx

@@ -4,7 +4,7 @@ import { getSemanticDataset } from "../data/chartDataProvider";
 
 export interface SemanticTableCardProps extends Omit<TableCardProps, "data" | "columns"> {
   semanticId: string;
-  dataOverride?: unknown[];
+  dataOverride?: Record<string, unknown>[];
   columnsOverride?: TableColumn[];
   compact?: boolean;
   striped?: boolean;
@@ -35,8 +35,8 @@ export default function SemanticTableCard({
   const ds = React.useMemo(() => getSemanticDataset(semanticId), [semanticId]);
   const table = ds?.table;
 
-  const resolvedColumns = columnsOverride ?? table?.columns ?? [];
-  const resolvedData = dataOverride ?? table?.rows ?? [];
+  const resolvedColumns = (columnsOverride ?? table?.columns ?? []) as TableColumn[];
+  const resolvedData = (dataOverride ?? table?.rows ?? []) as Record<string, unknown>[];
   const resolvedTitle = title ?? table?.title ?? ds?.title ?? "Table";
   const resolvedSubtitle = subtitle ?? table?.subtitle;
 

package/src/components/library/chat/{ChatBar.jsx → ChatBar.tsx}

@@ -9,7 +9,8 @@ import {
 } from "@heroicons/react/24/outline";
 import ChatMessageList from "./ChatMessageList";
 import ChatInput from "./ChatInput";
-import useChatState from "./useChatState";
+import useChatState, { UseChatStateOptions, ChatMessage } from "./useChatState";
+import { ChatMessageData } from "./ChatMessage";
 
 const BACKDROP_VARIANTS = {
   hidden: { opacity: 0 },
@@ -23,11 +24,22 @@ const PANEL_VARIANTS = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { type: "spring", damping: 28, stiffness: 380 },
+    transition: { type: "spring" as const, damping: 28, stiffness: 380 },
   },
   exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } },
 };
 
+export interface ChatBarProps {
+  onSend?: UseChatStateOptions["onSend"];
+  suggestions?: string[];
+  placeholder?: string;
+  title?: string;
+  initialMessages?: UseChatStateOptions["initialMessages"];
+  className?: string;
+  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
+  onOpenInTab?: (messages: ChatMessage[]) => void;
+}
+
 /**
  * Command-palette style AI chat bar.
  *
@@ -41,17 +53,16 @@ const PANEL_VARIANTS = {
 export default function ChatBar({
   onSend,
   suggestions = [],
-  placeholder = "Ask a question\u2026",
+  placeholder = "Ask a question…",
   title = "AI Assistant",
   initialMessages = [],
   className = "",
-  panelHeight,
   renderAvatar,
   onOpenInTab,
-}) {
+}: ChatBarProps) {
   const [open, setOpen] = useState(false);
   const [portalVisible, setPortalVisible] = useState(false);
-  const panelRef = useRef(null);
+  const panelRef = useRef<HTMLDivElement>(null);
   const chat = useChatState({ initialMessages, onSend });
   const isEmpty = chat.messages.length === 0;
 
@@ -62,7 +73,7 @@ export default function ChatBar({
   }, [open]);
 
   useEffect(() => {
-    function onKey(e) {
+    function onKey(e: KeyboardEvent) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
         setOpen((prev) => !prev);
@@ -79,7 +90,7 @@ export default function ChatBar({
     return () => { document.body.style.overflow = ""; };
   }, [open]);
 
-  function handleSend(content) {
+  function handleSend(content: string) {
     if (!open) setOpen(true);
     chat.sendMessage(content);
   }

package/src/components/library/chat/{ChatInput.jsx → ChatInput.tsx}

@@ -1,16 +1,18 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { PaperAirplaneIcon, StopCircleIcon } from "@heroicons/react/24/solid";
 
+export interface ChatInputProps {
+  onSend?: (content: string) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  onStop?: () => void;
+  placeholder?: string;
+  maxRows?: number;
+}
+
 /**
  * Chat input with auto-resize textarea, Send button, and keyboard shortcuts.
  * Enter sends, Shift+Enter inserts newline.
- *
- * @param {Function} onSend — (content: string) => void
- * @param {boolean}  disabled — disable input while agent is processing
- * @param {boolean}  isLoading — show stop button instead of send
- * @param {Function} onStop — optional: called when stop is clicked
- * @param {string}   placeholder
- * @param {number}   maxRows — max visible rows before scroll (default 6)
  */
 export default function ChatInput({
   onSend,
@@ -19,9 +21,9 @@ export default function ChatInput({
   onStop,
   placeholder = "Type a message…",
   maxRows = 6,
-}) {
+}: ChatInputProps) {
   const [value, setValue] = useState("");
-  const textareaRef = useRef(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     const ta = textareaRef.current;
@@ -41,7 +43,7 @@ export default function ChatInput({
     }
   }
 
-  function handleKeyDown(e) {
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();

package/src/components/library/chat/{ChatMessage.jsx → ChatMessage.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
 import { renderSchemaComponent } from "@/components/workspace/ComponentRegistry";
-import ChatToolCall from "./ChatToolCall";
+import ChatToolCall, { ToolCall } from "./ChatToolCall";
 import { UserCircleIcon, CpuChipIcon } from "@heroicons/react/24/solid";
 
-function cx(...classes) {
+function cx(...classes: (string | boolean | undefined)[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
@@ -11,9 +11,9 @@ function cx(...classes) {
  * Lightweight inline formatter for assistant messages.
  * Handles code blocks, inline code, bold, italic, and line breaks.
  */
-function formatContent(text) {
+function formatContent(text: string): React.ReactNode {
   if (!text) return null;
-  const parts = [];
+  const parts: React.ReactNode[] = [];
   let key = 0;
 
   const codeBlockRegex = /```(\w*)\n?([\s\S]*?)```/g;
@@ -46,7 +46,7 @@ function formatContent(text) {
   return parts;
 }
 
-function formatInline(text) {
+function formatInline(text: string): React.ReactNode {
   const tokens = text.split(/(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g);
   return tokens.map((token, i) => {
     if (token.startsWith("**") && token.endsWith("**")) {
@@ -74,13 +74,26 @@ function formatInline(text) {
   });
 }
 
+export interface ChatMessageData {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content?: string;
+  components?: unknown[];
+  toolCalls?: ToolCall[];
+  isError?: boolean;
+  isStreaming?: boolean;
+  timestamp?: string;
+}
+
+export interface ChatMessageProps {
+  message: ChatMessageData;
+  avatar?: React.ReactNode;
+}
+
 /**
  * Renders a single chat message.
- *
- * @param {Object} message — { id, role, content, components?, toolCalls?, isError?, isStreaming?, timestamp? }
- * @param {React.ReactNode} avatar — custom avatar override
  */
-export default function ChatMessage({ message, avatar }) {
+export default function ChatMessage({ message, avatar }: ChatMessageProps) {
   const isUser = message.role === "user";
   const isSystem = message.role === "system";
   const isAssistant = message.role === "assistant";

package/src/components/library/chat/{ChatMessageList.jsx → ChatMessageList.tsx}

@@ -1,17 +1,19 @@
 import React, { useRef, useEffect } from "react";
-import ChatMessage from "./ChatMessage";
+import ChatMessage, { ChatMessageData } from "./ChatMessage";
 import ChatTypingIndicator from "./ChatTypingIndicator";
 import ChatSuggestions from "./ChatSuggestions";
 
+export interface ChatMessageListProps {
+  messages?: ChatMessageData[];
+  isLoading?: boolean;
+  isStreaming?: boolean;
+  suggestions?: string[];
+  onSuggestion?: (text: string) => void;
+  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
+}
+
 /**
  * Scrollable message area with auto-scroll to latest message.
- *
- * @param {Array}     messages — array of message objects
- * @param {boolean}   isLoading — show typing indicator
- * @param {boolean}   isStreaming — agent is streaming (show different indicator text)
- * @param {string[]}  suggestions — follow-up suggestions shown after last assistant message
- * @param {Function}  onSuggestion — (text) => void
- * @param {Function}  renderAvatar — (message) => ReactNode, optional per-message avatar
  */
 export default function ChatMessageList({
   messages = [],
@@ -20,9 +22,9 @@ export default function ChatMessageList({
   suggestions = [],
   onSuggestion,
   renderAvatar,
-}) {
-  const bottomRef = useRef(null);
-  const containerRef = useRef(null);
+}: ChatMessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });

package/src/components/library/chat/{ChatPanel.jsx → ChatPanel.tsx}

@@ -2,23 +2,26 @@ import React from "react";
 import ChatMessageList from "./ChatMessageList";
 import ChatInput from "./ChatInput";
 import ChatWelcome from "./ChatWelcome";
-import useChatState from "./useChatState";
+import useChatState, { UseChatStateOptions } from "./useChatState";
+import { ChatMessageData } from "./ChatMessage";
 import { TrashIcon } from "@heroicons/react/24/outline";
 
+export interface ChatPanelProps {
+  title?: string;
+  onSend?: UseChatStateOptions["onSend"];
+  initialMessages?: UseChatStateOptions["initialMessages"];
+  welcomeTitle?: string;
+  welcomeSubtitle?: string;
+  suggestions?: string[];
+  placeholder?: string;
+  className?: string;
+  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
+  showHeader?: boolean;
+}
+
 /**
  * All-in-one chat panel. Composes ChatMessageList, ChatInput, ChatWelcome,
  * and useChatState into a single drop-in component.
- *
- * @param {string}   title — panel header title
- * @param {Function} onSend — async (userMessage, history, helpers) => assistantMessage?
- * @param {Array}    initialMessages — seed messages
- * @param {string}   welcomeTitle — welcome screen heading
- * @param {string}   welcomeSubtitle — welcome screen description
- * @param {string[]} suggestions — starter and follow-up prompts
- * @param {string}   placeholder — input placeholder
- * @param {string}   className — additional classes on the root container
- * @param {Function} renderAvatar — (message) => ReactNode
- * @param {boolean}  showHeader — show the title bar (default true)
  */
 export default function ChatPanel({
   title = "AI Assistant",
@@ -31,7 +34,7 @@ export default function ChatPanel({
   className = "",
   renderAvatar,
   showHeader = true,
-}) {
+}: ChatPanelProps) {
   const chat = useChatState({ initialMessages, onSend });
 
   const isEmpty = chat.messages.length === 0;

package/src/components/library/chat/{ChatSuggestions.jsx → ChatSuggestions.tsx}

@@ -1,13 +1,14 @@
-import React from "react";
 import { SparklesIcon } from "@heroicons/react/24/outline";
 
+export interface ChatSuggestionsProps {
+  suggestions?: string[];
+  onSelect?: (suggestion: string) => void;
+}
+
 /**
  * Quick-action prompt buttons. Place above the input or after an assistant message.
- *
- * @param {string[]} suggestions — prompt strings
- * @param {Function} onSelect — (suggestion) => void
  */
-export default function ChatSuggestions({ suggestions = [], onSelect }) {
+export default function ChatSuggestions({ suggestions = [], onSelect }: ChatSuggestionsProps) {
   if (!suggestions.length) return null;
 
   return (

package/src/components/library/chat/{ChatToolCall.jsx → ChatToolCall.tsx}

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import Spinner from "../ui/Spinner";
 import {
   WrenchScrewdriverIcon,
@@ -7,6 +7,18 @@ import {
   ChevronDownIcon,
 } from "@heroicons/react/24/outline";
 
+export interface ToolCall {
+  id?: string;
+  name: string;
+  args?: unknown;
+  status: "running" | "complete" | "error";
+  result?: unknown;
+}
+
+export interface ChatToolCallProps {
+  toolCall: ToolCall;
+}
+
 const STATUS_CONFIG = {
   running: {
     icon: <Spinner size="xs" tone="brand" label="Running" />,
@@ -30,10 +42,8 @@ const STATUS_CONFIG = {
 
 /**
  * Displays an agent tool call / function execution step.
- *
- * @param {Object} toolCall — { id?, name, args?, status: "running"|"complete"|"error", result? }
  */
-export default function ChatToolCall({ toolCall }) {
+export default function ChatToolCall({ toolCall }: ChatToolCallProps) {
   const [expanded, setExpanded] = useState(false);
   const config = STATUS_CONFIG[toolCall.status] ?? STATUS_CONFIG.running;
   const hasDetails = toolCall.args || toolCall.result;

package/src/components/library/chat/{ChatTypingIndicator.jsx → ChatTypingIndicator.tsx}

@@ -1,10 +1,13 @@
-import React from "react";
 import { CpuChipIcon } from "@heroicons/react/24/solid";
 
+export interface ChatTypingIndicatorProps {
+  label?: string;
+}
+
 /**
  * Animated typing indicator shown while the agent is processing.
  */
-export default function ChatTypingIndicator({ label = "Thinking" }) {
+export default function ChatTypingIndicator({ label = "Thinking" }: ChatTypingIndicatorProps) {
   return (
     <div className="flex items-start gap-3">
       <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 dark:bg-brand-900/40">

package/src/components/library/chat/{ChatWelcome.jsx → ChatWelcome.tsx}

@@ -2,14 +2,16 @@ import React from "react";
 import { CpuChipIcon } from "@heroicons/react/24/solid";
 import ChatSuggestions from "./ChatSuggestions";
 
+export interface ChatWelcomeProps {
+  title?: string;
+  subtitle?: string;
+  suggestions?: string[];
+  onSuggestion?: (text: string) => void;
+  icon?: React.ReactNode;
+}
+
 /**
  * Empty-state welcome screen shown before the first message.
- *
- * @param {string} title — welcome heading
- * @param {string} subtitle — description text
- * @param {string[]} suggestions — starter prompt suggestions
- * @param {Function} onSuggestion — (text) => void
- * @param {React.ReactNode} icon — custom icon override
  */
 export default function ChatWelcome({
   title = "How can I help?",
@@ -17,7 +19,7 @@ export default function ChatWelcome({
   suggestions = [],
   onSuggestion,
   icon,
-}) {
+}: ChatWelcomeProps) {
   return (
     <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
       {icon ?? (

package/src/components/library/chat/index.tsx

@@ -0,0 +1,26 @@
+export { default as ChatPanel } from "./ChatPanel";
+export { default as ChatBar } from "./ChatBar";
+export { default as ChatMessageList } from "./ChatMessageList";
+export { default as ChatMessage } from "./ChatMessage";
+export { default as ChatInput } from "./ChatInput";
+export { default as ChatTypingIndicator } from "./ChatTypingIndicator";
+export { default as ChatSuggestions } from "./ChatSuggestions";
+export { default as ChatToolCall } from "./ChatToolCall";
+export { default as ChatWelcome } from "./ChatWelcome";
+export { default as useChatState } from "./useChatState";
+
+export type { ChatPanelProps } from "./ChatPanel";
+export type { ChatBarProps } from "./ChatBar";
+export type { ChatMessageListProps } from "./ChatMessageList";
+export type { ChatMessageProps, ChatMessageData } from "./ChatMessage";
+export type { ChatInputProps } from "./ChatInput";
+export type { ChatTypingIndicatorProps } from "./ChatTypingIndicator";
+export type { ChatSuggestionsProps } from "./ChatSuggestions";
+export type { ChatToolCallProps, ToolCall } from "./ChatToolCall";
+export type { ChatWelcomeProps } from "./ChatWelcome";
+export type {
+  UseChatStateOptions,
+  UseChatStateReturn,
+  ChatMessage as ChatMessageType,
+  ChatStateHelpers,
+} from "./useChatState";