@schandlergarcia/sf-web-components 1.8.0 → 1.9.1

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/dist/components/workspace/ComponentRegistry.d.ts

@@ -1,143 +1,119 @@
-export function getComponentRegistry(): {
-    NarrativeSummary({ summary, title }: {
-        summary: any;
-        title: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    MetricsStrip({ metrics, title, collapsible, collapsed: initialCollapsed }: {
-        metrics?: never[] | undefined;
-        title: any;
-        collapsible?: boolean | undefined;
-        collapsed?: boolean | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    ItemList({ items, title, onItemClick }: {
-        items?: never[] | undefined;
-        title: any;
-        onItemClick: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    DataTable({ title, subtitle, columns, data, rows, searchable, sortable, paginated, pageSize }: {
-        title: any;
-        subtitle: any;
-        columns?: never[] | undefined;
-        data?: never[] | undefined;
-        rows: any;
-        searchable?: boolean | undefined;
-        sortable?: boolean | undefined;
-        paginated?: boolean | undefined;
-        pageSize?: number | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    DataChart({ title, subtitle, chartType, data, height }: {
-        title: any;
-        subtitle: any;
-        chartType?: string | undefined;
-        data?: never[] | undefined;
-        height?: number | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    MetricCard({ title, label, value, trend, change, changeType, color, icon, description }: {
-        title: any;
-        label: any;
-        value: any;
-        trend: any;
-        change: any;
-        changeType: any;
-        color: any;
-        icon: any;
-        description: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }: {
-        title: any;
-        subtitle: any;
-        status: any;
-        items: any;
-        layout: any;
-        showProgress: any;
-        showTimestamp: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    ActionList({ actions, title, onAction }: {
-        actions?: never[] | undefined;
-        title: any;
-        onAction: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    CalloutCard({ title, message, tone }: {
-        title: any;
-        message: any;
-        tone?: string | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export interface Metric {
+    label: string;
+    value: string | number;
+    trend?: string | number | null;
+}
+export interface MetricsStripProps {
+    metrics?: Metric[];
+    title?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+}
+export interface ListItem {
+    id?: string;
+    title?: string;
+    name?: string;
+    description?: string;
+    status?: "critical" | "warning" | string;
+    actions?: Array<string | {
+        label: string;
+    }>;
+}
+export interface ItemListProps {
+    items?: ListItem[];
+    title?: string;
+    onItemClick?: (item: ListItem) => void;
+}
+export interface TableColumn {
+    key: string;
+    label: string;
+}
+export interface DataTableProps {
+    title?: string;
+    subtitle?: string;
+    columns?: TableColumn[];
+    data?: any[];
+    rows?: any[];
+    searchable?: boolean;
+    sortable?: boolean;
+    paginated?: boolean;
+    pageSize?: number;
+}
+export interface DataPoint {
+    x: number;
+    y: number;
+    [key: string]: any;
+}
+export interface DataChartProps {
+    title?: string;
+    subtitle?: string;
+    chartType?: string;
+    data?: DataPoint[];
+    height?: number;
+}
+export interface MetricCardComponentProps {
+    title?: string;
+    label?: string;
+    value?: string | number;
+    trend?: string | number;
+    change?: string | number;
+    changeType?: string;
+    color?: string;
+    icon?: React.ReactNode;
+    description?: string;
+}
+export interface StatusCardComponentProps {
+    title?: string;
+    subtitle?: string;
+    status?: string;
+    items?: any[];
+    layout?: string;
+    showProgress?: boolean;
+    showTimestamp?: boolean;
+}
+export interface ActionListProps {
+    actions?: Array<string | {
+        label: string;
+    }>;
+    title?: string;
+    onAction?: (action: string | {
+        label: string;
+    }) => void;
+}
+export interface CalloutCardProps {
+    title?: string;
+    message?: string;
+    tone?: "neutral" | "success" | "warning" | "danger";
+}
+export interface SpacerProps {
+    size?: "sm" | "md" | "lg";
+}
+export interface NarrativeSummaryProps {
+    summary?: string;
+    title?: string;
+}
+export interface SchemaComponent {
+    id?: string;
+    type: string;
+    props?: Record<string, any>;
+}
+declare const BUILTIN_COMPONENTS: {
+    NarrativeSummary({ summary, title }: NarrativeSummaryProps): import("react/jsx-runtime").JSX.Element;
+    MetricsStrip({ metrics, title, collapsible, collapsed: initialCollapsed }: MetricsStripProps): import("react/jsx-runtime").JSX.Element;
+    ItemList({ items, title, onItemClick }: ItemListProps): import("react/jsx-runtime").JSX.Element;
+    DataTable({ title, subtitle, columns, data, rows, searchable, sortable, paginated, pageSize }: DataTableProps): import("react/jsx-runtime").JSX.Element;
+    DataChart({ title, subtitle, chartType, data, height }: DataChartProps): import("react/jsx-runtime").JSX.Element;
+    MetricCard({ title, label, value, trend, change, changeType, color, icon, description }: MetricCardComponentProps): import("react/jsx-runtime").JSX.Element;
+    StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }: StatusCardComponentProps): import("react/jsx-runtime").JSX.Element;
+    ActionList({ actions, title, onAction }: ActionListProps): import("react/jsx-runtime").JSX.Element;
+    CalloutCard({ title, message, tone }: CalloutCardProps): import("react/jsx-runtime").JSX.Element;
     Divider(): import("react/jsx-runtime").JSX.Element;
-    Spacer({ size }: {
-        size?: string | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
+    Spacer({ size }: SpacerProps): import("react/jsx-runtime").JSX.Element;
 };
-export function registerComponent(type: any, Component: any): void;
-export function registerComponents(map: any): void;
-export function renderSchemaComponent(component: any, index: any): import("react/jsx-runtime").JSX.Element;
-export function renderSchema(components?: any[]): import("react/jsx-runtime").JSX.Element[];
+export declare function getComponentRegistry(): Record<string, React.ComponentType<any>>;
+export declare function registerComponent(type: string, Component: React.ComponentType<any>): void;
+export declare function registerComponents(map: Record<string, React.ComponentType<any>>): void;
+export declare function renderSchemaComponent(component: SchemaComponent, index: number): React.ReactElement;
+export declare function renderSchema(components?: SchemaComponent[]): React.ReactElement[];
 export default BUILTIN_COMPONENTS;
-declare namespace BUILTIN_COMPONENTS {
-    function NarrativeSummary({ summary, title }: {
-        summary: any;
-        title: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    function MetricsStrip({ metrics, title, collapsible, collapsed: initialCollapsed }: {
-        metrics?: never[] | undefined;
-        title: any;
-        collapsible?: boolean | undefined;
-        collapsed?: boolean | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    function ItemList({ items, title, onItemClick }: {
-        items?: never[] | undefined;
-        title: any;
-        onItemClick: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    function DataTable({ title, subtitle, columns, data, rows, searchable, sortable, paginated, pageSize }: {
-        title: any;
-        subtitle: any;
-        columns?: never[] | undefined;
-        data?: never[] | undefined;
-        rows: any;
-        searchable?: boolean | undefined;
-        sortable?: boolean | undefined;
-        paginated?: boolean | undefined;
-        pageSize?: number | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    function DataChart({ title, subtitle, chartType, data, height }: {
-        title: any;
-        subtitle: any;
-        chartType?: string | undefined;
-        data?: never[] | undefined;
-        height?: number | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    function MetricCard({ title, label, value, trend, change, changeType, color, icon, description }: {
-        title: any;
-        label: any;
-        value: any;
-        trend: any;
-        change: any;
-        changeType: any;
-        color: any;
-        icon: any;
-        description: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    function StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }: {
-        title: any;
-        subtitle: any;
-        status: any;
-        items: any;
-        layout: any;
-        showProgress: any;
-        showTimestamp: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    function ActionList({ actions, title, onAction }: {
-        actions?: never[] | undefined;
-        title: any;
-        onAction: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    function CalloutCard({ title, message, tone }: {
-        title: any;
-        message: any;
-        tone?: string | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-    function Divider(): import("react/jsx-runtime").JSX.Element;
-    function Spacer({ size }: {
-        size?: string | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
-}