@strata-ds/core 2.1.0 → 2.1.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useMemo, useCallback, useEffect, createContext, useContext } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useCallback, createContext, useContext } from 'react';
 import { extendTheme, ChakraProvider, Box, Flex, Text, Image, Button, VStack, HStack } from '@chakra-ui/react';
 
 function _arrayLikeToArray(r, a) {
@@ -10,6 +10,10 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -35,6 +39,9 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 function _classCallCheck(a, n) {
   if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
@@ -57,6 +64,31 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -128,6 +160,11 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
 function _regenerator() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e,
@@ -236,6 +273,11 @@ function _regeneratorDefine(e, r, n, t) {
     }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
@@ -270,6 +312,106 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
+var _excluded$3 = ["class"];
+/**
+ * Convert a StrataNode styles object into a ComponentProperty record and a
+ * class attribute string. CSS properties (all keys except "class") are mapped
+ * to ComponentProperty entries so that resolveComponentStyles() in
+ * ComponentFactory applies them as inline CSS.
+ */
+function parseStrataStyles(styles) {
+  var _ref = styles || {},
+    className = _ref["class"],
+    styleProps = _objectWithoutProperties(_ref, _excluded$3);
+  var properties = {};
+  Object.entries(styleProps).forEach(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      k = _ref3[0],
+      v = _ref3[1];
+    if (v != null) {
+      properties[k] = {
+        value: String(v),
+        unit: null,
+        type: "string",
+        comment: ""
+      };
+    }
+  });
+  return {
+    properties: properties,
+    className: className != null ? String(className) : undefined
+  };
+}
+/**
+ * Convert a flat array of backend StrataNode children into a
+ * Record<string, ComponentNode> keyed by child.role or array index.
+ */
+function strataChildrenToRecord(children) {
+  var result = {};
+  children.forEach(function (child, index) {
+    var key = child.role != null ? String(child.role) : String(index);
+    var _parseStrataStyles = parseStrataStyles(child.styles),
+      properties = _parseStrataStyles.properties,
+      className = _parseStrataStyles.className;
+    var attributes = {};
+    if (className != null) {
+      attributes["class"] = className;
+    }
+    var grandchildren = strataChildrenToRecord(child.children || []);
+    result[key] = {
+      linkedElement: {
+        htmlTag: child.tag || "div",
+        attributes: attributes
+      },
+      textContent: child.textContent,
+      properties: Object.keys(properties).length > 0 ? properties : undefined,
+      children: Object.keys(grandchildren).length > 0 ? grandchildren : null
+    };
+  });
+  return result;
+}
+/**
+ * Normalize a raw component payload from the Strata backend into the
+ * legacy `ComponentNode` shape expected by `StrataComponentFactory` and
+ * `ComponentRegistryService`.
+ *
+ * Handles two cases:
+ *  1. `nodes[]` format  — backend shape: `{ name, nodes: [StrataNode, …] }`
+ *  2. Legacy shape      — already has `linkedElement`; returned unchanged.
+ *
+ * @param raw - The raw component object from the design-system payload.
+ * @returns A fully-formed `ComponentNode`.
+ */
+function normalizeComponentNode(raw) {
+  // Already in legacy shape — pass through unchanged.
+  if ((raw === null || raw === void 0 ? void 0 : raw.linkedElement) != null) {
+    return raw;
+  }
+  // Not in nodes[] format either — return as-is so existing fallbacks apply.
+  if (!Array.isArray(raw === null || raw === void 0 ? void 0 : raw.nodes) || raw.nodes.length === 0) {
+    return raw;
+  }
+  var rootNode = raw.nodes[0];
+  var _parseStrataStyles2 = parseStrataStyles(rootNode.styles),
+    properties = _parseStrataStyles2.properties,
+    className = _parseStrataStyles2.className;
+  var attributes = {};
+  if (className != null) {
+    attributes["class"] = className;
+  }
+  var children = strataChildrenToRecord(rootNode.children || []);
+  return {
+    displayName: raw.name || raw.displayName,
+    linkedElement: {
+      htmlTag: rootNode.tag || "div",
+      attributes: attributes
+    },
+    textContent: rootNode.textContent,
+    properties: Object.keys(properties).length > 0 ? properties : undefined,
+    children: Object.keys(children).length > 0 ? children : null
+  };
+}
+
 var _excluded$2 = ["children", "style", "className"],
   _excluded2$2 = ["children", "style", "className"],
   _excluded3$1 = ["key", "ref", "children", "style", "className"];
@@ -283,6 +425,7 @@ var StrataComponentFactory = /*#__PURE__*/function () {
     // Create component with enhanced attribute handling
     function createComponent(componentName, componentData, designSystem) {
       var _this = this;
+      componentData = normalizeComponentNode(componentData);
       var Component = function Component(_ref) {
         var children = _ref.children,
           style = _ref.style,
@@ -307,6 +450,7 @@ var StrataComponentFactory = /*#__PURE__*/function () {
     key: "createSubComponent",
     value: function createSubComponent(componentName, componentData, designSystem) {
       var _this2 = this;
+      componentData = normalizeComponentNode(componentData);
       var SubComponent = function SubComponent(_ref2) {
         var children = _ref2.children,
           style = _ref2.style,
@@ -661,6 +805,7 @@ var StrataComponentFactory = /*#__PURE__*/function () {
   }, {
     key: "validateComponent",
     value: function validateComponent(componentData) {
+      componentData = normalizeComponentNode(componentData);
       var errors = [];
       // Check for required linked element attributes
       if (componentData.linkedElement) {
@@ -751,7 +896,6 @@ var ComponentRegistryService = /*#__PURE__*/function () {
         console.warn("\u26A0\uFE0F Invalid component name:", name);
         return "UnknownComponent";
       }
-      console.log("\uD83D\uDD0D formatComponentName INPUT: \"".concat(name, "\""));
       // Remove any file extensions
       var cleanName = name.replace(/\.[^/.]+$/, "");
       // Handle various naming conventions and convert to PascalCase
@@ -782,7 +926,6 @@ var ComponentRegistryService = /*#__PURE__*/function () {
       if (!result) {
         result = "UnknownComponent";
       }
-      console.log("\uD83D\uDCDD FINAL CONVERSION: \"".concat(name, "\" \u2192 \"").concat(result, "\""));
       return result;
     }
     // Test method to verify PascalCase conversion
@@ -802,12 +945,11 @@ var ComponentRegistryService = /*#__PURE__*/function () {
     key: "registerComponent",
     value: function registerComponent(componentName, componentData, designSystem) {
       var _this2 = this;
-      console.log("\uD83D\uDD04 REGISTER COMPONENT CALLED with: \"".concat(componentName, "\""));
+      componentData = normalizeComponentNode(componentData);
       // Use PascalCase for the main component name
       var pascalCaseName = this.formatComponentName(componentName);
       // Store mapping for debugging and reverse lookup
       this.originalToPascalMap.set(componentName, pascalCaseName);
-      console.log("\uD83D\uDCDD MAPPING STORED: \"".concat(componentName, "\" \u2192 \"").concat(pascalCaseName, "\""));
       // Create the main component
       var MainComponent = StrataComponentFactory.createComponent(pascalCaseName, componentData, designSystem);
       // Create sub-components recursively with proper PascalCase
@@ -817,7 +959,6 @@ var ComponentRegistryService = /*#__PURE__*/function () {
             childName = _ref2[0],
             childData = _ref2[1];
           var childComponentName = _this2.formatComponentName(childName);
-          console.log("\uD83D\uDCDD Nested conversion: \"".concat(childName, "\" \u2192 \"").concat(childComponentName, "\""));
           // Store nested component mapping
           _this2.originalToPascalMap.set("".concat(componentName, ".").concat(childName), "".concat(pascalCaseName, ".").concat(childComponentName));
           MainComponent[childComponentName] = StrataComponentFactory.createSubComponent(childComponentName, childData, designSystem);
@@ -827,8 +968,6 @@ var ComponentRegistryService = /*#__PURE__*/function () {
       }
       // Register with PascalCase name only for cleaner API
       this.registry[pascalCaseName] = MainComponent;
-      console.log("\u2705 Registered: \"".concat(pascalCaseName, "\""));
-      console.log("\uD83D\uDCCA Current registry:", Object.keys(this.registry));
       this.notifyListeners();
     }
     // Recursively add nested components with mapping
@@ -893,10 +1032,6 @@ var ComponentRegistryService = /*#__PURE__*/function () {
     key: "syncWithDesignSystem",
     value: function syncWithDesignSystem(designSystem) {
       var _this4 = this;
-      console.log("🔄 SYNC WITH DESIGN SYSTEM CALLED");
-      console.log("🔍 Design system components:", Object.keys(designSystem.components));
-      // Test PascalCase conversion before proceeding
-      this.testPascalCaseConversion();
       // Clear existing registry and mappings
       this.registry = {};
       this.originalToPascalMap.clear();
@@ -905,11 +1040,8 @@ var ComponentRegistryService = /*#__PURE__*/function () {
         var _ref6 = _slicedToArray(_ref5, 2),
           componentName = _ref6[0],
           componentData = _ref6[1];
-        console.log("\uD83D\uDD04 Processing component from design system: \"".concat(componentName, "\""));
         _this4.registerComponent(componentName, componentData, designSystem);
       });
-      console.log("✅ Sync completed. Final registry:", Object.keys(this.registry));
-      console.log("🗺️ Component mapping:", Array.from(this.originalToPascalMap.entries()));
       this.notifyListeners();
     }
     // Subscribe to registry changes
@@ -928,7 +1060,6 @@ var ComponentRegistryService = /*#__PURE__*/function () {
     key: "notifyListeners",
     value: function notifyListeners() {
       var currentRegistry = this.getRegistry();
-      console.log("📋 FINAL REGISTRY STATE:", Object.keys(currentRegistry));
       this.listeners.forEach(function (listener) {
         return listener(currentRegistry);
       });
@@ -974,14 +1105,15 @@ var StrataProvider = function StrataProvider(_ref) {
     _ref$syncEnabled = _ref.syncEnabled,
     syncEnabled = _ref$syncEnabled === void 0 ? false : _ref$syncEnabled,
     _ref$syncUrl = _ref.syncUrl,
-    syncUrl = _ref$syncUrl === void 0 ? "http://localhost:4000" : _ref$syncUrl,
+    syncUrl = _ref$syncUrl === void 0 ? "" : _ref$syncUrl,
     _ref$syncInterval = _ref.syncInterval,
     syncInterval = _ref$syncInterval === void 0 ? 3000 : _ref$syncInterval,
     syncToken = _ref.syncToken,
     snapshotCdnBase = _ref.snapshotCdnBase,
     projectId = _ref.projectId,
     onSyncError = _ref.onSyncError,
-    onSyncSuccess = _ref.onSyncSuccess;
+    onSyncSuccess = _ref.onSyncSuccess,
+    onSyncStart = _ref.onSyncStart;
   var _useState = useState(userDesignSystem || initialData || {
       variables: {},
       components: {},
@@ -1010,13 +1142,43 @@ var StrataProvider = function StrataProvider(_ref) {
   // value. This keeps the callback stable and prevents the polling interval
   // from being continuously reset after each successful sync.
   var lastSyncedStringRef = useRef(null);
+  // Refs for lifecycle callbacks so that syncDesignSystem does not need to
+  // close over them. Inline functions passed by the consumer (e.g. anonymous
+  // arrow functions) would otherwise change identity on every render, forcing
+  // the polling interval to restart after each render cycle.
+  var onSyncStartRef = useRef(onSyncStart);
+  var onSyncSuccessRef = useRef(onSyncSuccess);
+  var onSyncErrorRef = useRef(onSyncError);
+  useEffect(function () {
+    onSyncStartRef.current = onSyncStart;
+    onSyncSuccessRef.current = onSyncSuccess;
+    onSyncErrorRef.current = onSyncError;
+  });
   // Derive the CDN snapshot URL once — used in both syncDesignSystem and the
   // polling effect so the condition is computed in a single place.
   var snapshotUrl = useMemo(function () {
-    return snapshotCdnBase && projectId ? "".concat(snapshotCdnBase, "/snapshots/").concat(projectId, "/strata.json") : null;
+    if (!snapshotCdnBase || !projectId) return null;
+    var base = snapshotCdnBase.replace(/\/+$/, "");
+    // Prevent duplication: if the base already includes /snapshots, just append the projectId
+    if (base.endsWith("/snapshots")) return "".concat(base, "/").concat(projectId, "/strata.json");
+    // Otherwise append the standard /snapshots/ path
+    return "".concat(base, "/snapshots/").concat(projectId, "/strata.json");
   }, [snapshotCdnBase, projectId]);
+  /** Normalize all components in a design-system payload from the nodes[]
+   *  backend format into the legacy ComponentNode shape. */
+  var normalizeComponents = useCallback(function (data) {
+    return _objectSpread2(_objectSpread2({}, data), {}, {
+      components: Object.fromEntries(Object.entries(data.components).map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          name = _ref3[0],
+          comp = _ref3[1];
+        return [name, normalizeComponentNode(comp)];
+      }))
+    });
+  }, []);
   var syncDesignSystem = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-    var headers, remoteData, res, data, _yield$Promise$all, _yield$Promise$all2, variablesRes, componentsRes, customRes, _yield$Promise$all3, _yield$Promise$all4, variables, components, custom, newDataString, _t;
+    var _onSyncStartRef$curre;
+    var headers, remoteData, res, _onSyncErrorRef$curre, data, _onSyncErrorRef$curre2, _yield$Promise$all, _yield$Promise$all2, variablesRes, componentsRes, customRes, _yield$Promise$all3, _yield$Promise$all4, variables, components, custom, newDataString, _onSyncSuccessRef$cur, _onSyncErrorRef$curre3, _t;
     return _regenerator().w(function (_context) {
       while (1) switch (_context.p = _context.n) {
         case 0:
@@ -1027,8 +1189,8 @@ var StrataProvider = function StrataProvider(_ref) {
           return _context.a(2);
         case 1:
           setSyncStatus("syncing");
+          (_onSyncStartRef$curre = onSyncStartRef.current) === null || _onSyncStartRef$curre === void 0 || _onSyncStartRef$curre.call(onSyncStartRef);
           _context.p = 2;
-          console.log("🔄 Starting design system sync...");
           headers = syncToken ? {
             Authorization: "Bearer ".concat(syncToken)
           } : {};
@@ -1047,7 +1209,7 @@ var StrataProvider = function StrataProvider(_ref) {
             break;
           }
           setSyncStatus("error");
-          onSyncError === null || onSyncError === void 0 || onSyncError({
+          (_onSyncErrorRef$curre = onSyncErrorRef.current) === null || _onSyncErrorRef$curre === void 0 || _onSyncErrorRef$curre.call(onSyncErrorRef, {
             code: res.status,
             message: "CDN fetch failed: ".concat(res.status, " ").concat(res.statusText),
             source: "cdn"
@@ -1070,7 +1232,7 @@ var StrataProvider = function StrataProvider(_ref) {
           }
           console.warn("[strata] Invalid snapshot shape received from CDN — skipping update.");
           setSyncStatus("error");
-          onSyncError === null || onSyncError === void 0 || onSyncError({
+          (_onSyncErrorRef$curre2 = onSyncErrorRef.current) === null || _onSyncErrorRef$curre2 === void 0 || _onSyncErrorRef$curre2.call(onSyncErrorRef, {
             code: 0,
             message: "Invalid snapshot shape: missing variables or components",
             source: "cdn"
@@ -1085,6 +1247,10 @@ var StrataProvider = function StrataProvider(_ref) {
               components: {}
             }
           };
+          // Normalize all components from nodes[] format into the legacy
+          // ComponentNode shape so that useDynamicComponents and the registry
+          // always receive consistently-shaped data.
+          remoteData = normalizeComponents(remoteData);
           _context.n = 14;
           break;
         case 8:
@@ -1136,34 +1302,26 @@ var StrataProvider = function StrataProvider(_ref) {
               components: {}
             }
           };
+          // Normalize all components from nodes[] format into the legacy
+          // ComponentNode shape so that useDynamicComponents and the registry
+          // always receive consistently-shaped data.
+          remoteData = normalizeComponents(remoteData);
         case 14:
           // Only update if data actually changed (compared against the last synced
           // snapshot via ref, so this callback stays stable across renders).
           newDataString = JSON.stringify(remoteData);
           if (lastSyncedStringRef.current !== newDataString) {
-            console.log("🔄 Design system data changed, updating...");
             lastSyncedStringRef.current = newDataString;
             setDesignSystem(remoteData);
-            Object.entries(remoteData.components).forEach(function (_ref3) {
-              var _ref4 = _slicedToArray(_ref3, 2),
-                componentName = _ref4[0],
-                componentData = _ref4[1];
-              if (!strataRegistry.hasComponent(componentName)) {
-                strataRegistry.registerComponent(componentName, componentData, remoteData);
-              }
-            });
+            strataRegistry.syncWithDesignSystem(remoteData);
             setSyncVersion(function (prev) {
               return prev + 1;
             });
             setSyncStatus("success");
             setLastSynced(new Date());
-            onSyncSuccess === null || onSyncSuccess === void 0 || onSyncSuccess(remoteData);
-            console.log("✅ Design system synced successfully");
-            console.log("📊 Components available:", Object.keys(remoteData.components));
-            console.log("🎨 Variables available:", Object.keys(remoteData.variables));
+            (_onSyncSuccessRef$cur = onSyncSuccessRef.current) === null || _onSyncSuccessRef$cur === void 0 || _onSyncSuccessRef$cur.call(onSyncSuccessRef, remoteData);
           } else {
             setSyncStatus("idle");
-            console.log("⚡ Design system already up to date");
           }
           _context.n = 16;
           break;
@@ -1172,7 +1330,7 @@ var StrataProvider = function StrataProvider(_ref) {
           _t = _context.v;
           console.error("❌ Sync failed:", _t);
           setSyncStatus("error");
-          onSyncError === null || onSyncError === void 0 || onSyncError({
+          (_onSyncErrorRef$curre3 = onSyncErrorRef.current) === null || _onSyncErrorRef$curre3 === void 0 || _onSyncErrorRef$curre3.call(onSyncErrorRef, {
             code: 0,
             message: _t instanceof Error ? _t.message : String(_t),
             source: snapshotUrl ? "cdn" : "sync"
@@ -1181,7 +1339,7 @@ var StrataProvider = function StrataProvider(_ref) {
           return _context.a(2);
       }
     }, _callee, null, [[2, 15]]);
-  })), [syncEnabled, syncUrl, syncToken, snapshotUrl, onSyncSuccess, onSyncError]);
+  })), [syncEnabled, syncUrl, syncToken, snapshotUrl, normalizeComponents]);
   // Force sync function for manual triggering
   var forceSync = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
     return _regenerator().w(function (_context2) {
@@ -1197,12 +1355,10 @@ var StrataProvider = function StrataProvider(_ref) {
   // Polling for real-time updates
   useEffect(function () {
     if (!syncEnabled || !snapshotUrl && !syncUrl) return;
-    console.log("🔄 Starting sync polling...");
     var interval = setInterval(syncDesignSystem, syncInterval);
     // Initial sync
     syncDesignSystem();
     return function () {
-      console.log("🔄 Stopping sync polling...");
       clearInterval(interval);
     };
   }, [syncEnabled, syncUrl, snapshotUrl, syncInterval, syncDesignSystem]);
@@ -1508,6 +1664,27 @@ var useCardData = function useCardData() {
     componentName: 'card'
   });
 };
+// Hook for custom components
+var useCustomComponent = function useCustomComponent(componentName) {
+  return useComponentData({
+    componentName: componentName,
+    fallbackToDefault: false
+  });
+};
+// Hook to get all available components
+var useAvailableComponents = function useAvailableComponents() {
+  var _designSystem$custom2;
+  var _useStrata2 = useStrata(),
+    designSystem = _useStrata2.designSystem;
+  return {
+    baseComponents: Object.keys(designSystem.components).filter(function (key) {
+      var _designSystem$custom;
+      return !((_designSystem$custom = designSystem.custom) !== null && _designSystem$custom !== void 0 && (_designSystem$custom = _designSystem$custom.components) !== null && _designSystem$custom !== void 0 && _designSystem$custom[key]);
+    }),
+    customComponents: Object.keys(((_designSystem$custom2 = designSystem.custom) === null || _designSystem$custom2 === void 0 ? void 0 : _designSystem$custom2.components) || {}),
+    allComponents: Object.keys(designSystem.components)
+  };
+};
 
 // "use client";
 // import * as React from "react";
@@ -2808,52 +2985,36 @@ var useDynamicComponents = function useDynamicComponents() {
   var _useStrata = useStrata(),
     designSystem = _useStrata.designSystem,
     syncVersion = _useStrata.syncVersion;
-  var _useState = useState(strataRegistry.getRegistry()),
+  // Synchronously populate the registry from the design system on first render
+  // so that components from `initialData` are available without a render flash.
+  var _useState = useState(function () {
+      if (Object.keys(designSystem.components).length > 0) {
+        strataRegistry.syncWithDesignSystem(designSystem);
+      }
+      return strataRegistry.getRegistry();
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     registry = _useState2[0],
     setRegistry = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isInitialized = _useState4[0],
-    setIsInitialized = _useState4[1];
-  // Sync components when design system changes
+  // Re-sync when the design system changes (e.g. after a live sync poll)
   useEffect(function () {
-    console.log('🔄 useDynamicComponents: Design system changed', {
-      components: Object.keys(designSystem.components),
-      syncVersion: syncVersion
-    });
     if (Object.keys(designSystem.components).length > 0) {
-      console.log('🔄 Syncing registry with design system...');
-      // Sync the entire registry with the current design system
       strataRegistry.syncWithDesignSystem(designSystem);
-      setIsInitialized(true);
     }
   }, [designSystem, syncVersion]);
-  // Subscribe to registry changes
+  // Subscribe to registry changes so state stays in sync
   useEffect(function () {
-    console.log('🔄 useDynamicComponents: Subscribing to registry changes');
     var unsubscribe = strataRegistry.subscribe(function (newRegistry) {
-      console.log('🔄 Registry updated:', Object.keys(newRegistry));
       setRegistry(newRegistry);
     });
     return unsubscribe;
   }, []);
-  console.log('📋 useDynamicComponents returning registry:', {
-    registryKeys: Object.keys(registry),
-    isInitialized: isInitialized,
-    hasRoboForm: 'RoboForm' in registry
-  });
   return registry;
 };
 
 // This hook provides direct access to all components in PascalCase
 var useComponents = function useComponents() {
-  var dynamicComponents = useDynamicComponents();
-  console.log('🔄 useComponents returning:', {
-    componentCount: Object.keys(dynamicComponents).length,
-    componentNames: Object.keys(dynamicComponents)
-  });
-  return dynamicComponents;
+  return useDynamicComponents();
 };
 
 var StrataDebug = function StrataDebug() {
@@ -2969,6 +3130,74 @@ var StrataDebug = function StrataDebug() {
   });
 };
 
+/**
+ * `StrataErrorBoundary` wraps sections of your app that render synced
+ * Strata components.  When a component throws during render, this boundary
+ * catches the error so the rest of the page stays functional.
+ *
+ * @example
+ * ```tsx
+ * <StrataErrorBoundary fallback={<p>Component failed to load.</p>}>
+ *   <MyStrataComponent />
+ * </StrataErrorBoundary>
+ * ```
+ */
+var StrataErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  function StrataErrorBoundary(props) {
+    var _this;
+    _classCallCheck(this, StrataErrorBoundary);
+    _this = _callSuper(this, StrataErrorBoundary, [props]);
+    _this.state = {
+      hasError: false,
+      error: null
+    };
+    return _this;
+  }
+  _inherits(StrataErrorBoundary, _React$Component);
+  return _createClass(StrataErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      var _this$props$onError, _this$props;
+      (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props, error, info);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError && this.state.error) {
+        var fallback = this.props.fallback;
+        if (typeof fallback === "function") {
+          return fallback(this.state.error);
+        }
+        if (fallback !== undefined) {
+          return fallback;
+        }
+        return jsxs("div", {
+          style: {
+            padding: "12px 16px",
+            border: "1px solid #f87171",
+            borderRadius: "6px",
+            backgroundColor: "#fff1f1",
+            color: "#b91c1c",
+            fontSize: "0.875rem"
+          },
+          children: [jsx("strong", {
+            children: "Strata component error:"
+          }), " ", this.state.error.message || "An unknown error occurred."]
+        });
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true,
+        error: error
+      };
+    }
+  }]);
+}(React.Component);
+
 //working
 // "use client";
 // import { useDynamicComponents } from './useDynamicComponents';
@@ -3045,5 +3274,4 @@ var AutoForm = function AutoForm(_ref2) {
   return /*#__PURE__*/React.createElement(FormComponent, props, children);
 };
 
-export { AutoForm, Card, DefaultCard, DynamicComponent, StrataComponentFactory, StrataDebug, StrataProvider, strataRegistry, useComponent, useComponents, useDynamicComponents, useStrata };
-//# sourceMappingURL=index.esm.js.map
+export { AutoForm, Card, DefaultCard, DynamicComponent, StrataComponentFactory, StrataDebug, StrataErrorBoundary, StrataProvider, strataRegistry, useAvailableComponents, useCardData, useComponent, useComponentData, useComponents, useCustomComponent, useDynamicComponents, useStrata };