@strata-ds/core 2.1.0 → 2.1.1

package/dist/components/DynamicComponentDebug.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const StrataDebug: React.FC;
-//# sourceMappingURL=DynamicComponentDebug.d.ts.map

package/dist/components/DynamicComponents.d.ts

@@ -9,4 +9,3 @@ export declare const AutoForm: React.FC<{
     children?: React.ReactNode;
     [key: string]: any;
 }>;
-//# sourceMappingURL=DynamicComponents.d.ts.map

package/dist/components/StrataErrorBoundary.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+interface StrataErrorBoundaryProps {
+    children: React.ReactNode;
+    /**
+     * Optional fallback UI to render when an error is caught.
+     * If not provided, a minimal error message is shown.
+     */
+    fallback?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /**
+     * Optional callback invoked when an error is caught, useful for
+     * logging to an external error-reporting service.
+     */
+    onError?: (error: Error, info: React.ErrorInfo) => void;
+}
+interface StrataErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * `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>
+ * ```
+ */
+export declare class StrataErrorBoundary extends React.Component<StrataErrorBoundaryProps, StrataErrorBoundaryState> {
+    constructor(props: StrataErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): StrataErrorBoundaryState;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/card-ui/Card.d.ts

@@ -37,4 +37,3 @@ declare const Card: {
     TotalAmount: ({ children, fontSize, fontWeight, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Card;
-//# sourceMappingURL=Card.d.ts.map

package/dist/components/card-ui/DefaultCard.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const DefaultCard: React.FC;
-//# sourceMappingURL=DefaultCard.d.ts.map

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
 export { DefaultCard } from './card-ui/DefaultCard';
 export { default as Card } from './card-ui/Card';
 export { StrataDebug } from './DynamicComponentDebug';
-//# sourceMappingURL=index.d.ts.map
+export { StrataErrorBoundary } from './StrataErrorBoundary';

package/dist/data/index.d.ts

@@ -1,2 +1 @@
 export * from "./mock.types";
-//# sourceMappingURL=index.d.ts.map

package/dist/data/mock.types.d.ts

@@ -41,6 +41,8 @@ export interface ComponentNode {
     variant?: string;
     variants?: Record<string, ComponentVariant>;
     states?: Record<string, Record<string, ComponentProperty>>;
+    /** Backend nodes[] format — normalised at runtime by normalizeComponentNode() */
+    nodes?: any[];
 }
 export interface DesignSystemData {
     metadata?: {
@@ -67,4 +69,3 @@ export interface CustomDesignSystemData {
     variables: Record<string, DesignToken>;
     components: Record<string, ComponentNode>;
 }
-//# sourceMappingURL=mock.types.d.ts.map

package/dist/hook/useCardData.d.ts

@@ -368,4 +368,3 @@ export declare const useAvailableComponents: () => {
     allComponents: string[];
 };
 export {};
-//# sourceMappingURL=useCardData.d.ts.map

package/dist/hook/useComponent.d.ts

@@ -1,4 +1,3 @@
 export declare const useComponent: (componentName: string) => (import("react").ComponentType<import("../registry/ComponentFactory").DynamicComponentProps> & {
     [subComponentName: string]: import("react").ComponentType<import("../registry/ComponentFactory").DynamicComponentProps>;
 }) | null;
-//# sourceMappingURL=useComponent.d.ts.map

package/dist/hook/useComponents.d.ts

@@ -1,2 +1 @@
 export declare const useComponents: () => import("../registry/ComponentRegistry").ComponentRegistry;
-//# sourceMappingURL=useComponents.d.ts.map

package/dist/hook/useDynamicComponents.d.ts

@@ -1,3 +1,2 @@
 import { ComponentRegistry } from '../registry/ComponentRegistry';
 export declare const useDynamicComponents: () => ComponentRegistry;
-//# sourceMappingURL=useDynamicComponents.d.ts.map

package/dist/index.d.ts

@@ -45,6 +45,8 @@ interface ComponentNode {
     variant?: string;
     variants?: Record<string, ComponentVariant>;
     states?: Record<string, Record<string, ComponentProperty>>;
+    /** Backend nodes[] format — normalised at runtime by normalizeComponentNode() */
+    nodes?: any[];
 }
 interface DesignSystemData {
     metadata?: {
@@ -126,6 +128,11 @@ interface StrataProviderProps {
         source: string;
     }) => void;
     onSyncSuccess?: (data: DesignSystemData) => void;
+    /**
+     * Callback invoked immediately before each sync request is sent.
+     * Use this to show a loading indicator or log sync lifecycle events.
+     */
+    onSyncStart?: () => void;
 }
 declare const StrataProvider: React__default.FC<StrataProviderProps>;
 
@@ -171,6 +178,42 @@ declare const Card: {
 
 declare const StrataDebug: React__default.FC;
 
+interface StrataErrorBoundaryProps {
+    children: React__default.ReactNode;
+    /**
+     * Optional fallback UI to render when an error is caught.
+     * If not provided, a minimal error message is shown.
+     */
+    fallback?: React__default.ReactNode | ((error: Error) => React__default.ReactNode);
+    /**
+     * Optional callback invoked when an error is caught, useful for
+     * logging to an external error-reporting service.
+     */
+    onError?: (error: Error, info: React__default.ErrorInfo) => void;
+}
+interface StrataErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * `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>
+ * ```
+ */
+declare class StrataErrorBoundary extends React__default.Component<StrataErrorBoundaryProps, StrataErrorBoundaryState> {
+    constructor(props: StrataErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): StrataErrorBoundaryState;
+    componentDidCatch(error: Error, info: React__default.ErrorInfo): void;
+    render(): React__default.ReactNode;
+}
+
 interface CardProps {
     children?: React__default.ReactNode;
     width?: string;
@@ -436,5 +479,375 @@ declare const AutoForm: React__default.FC<{
     [key: string]: any;
 }>;
 
-export { AutoForm, Card, DefaultCard, DynamicComponent, StrataComponentFactory, StrataDebug, StrataProvider, strataRegistry, useComponent, useComponents, useDynamicComponents, useStrata };
+interface UseComponentDataOptions {
+    componentName?: string;
+    fallbackToDefault?: boolean;
+}
+declare const useComponentData: (options?: UseComponentDataOptions) => {
+    data: {
+        card: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            fontFamily: string;
+        };
+        container: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            borderRadius: string;
+            boxShadow: string;
+            overflow: string;
+        };
+        header: {
+            padding: string;
+            borderBottom: string;
+            borderColor: string;
+        };
+        headerContent: {
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+        };
+        headerTitle: {
+            text: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        headerTimer: {
+            text: string;
+            fontSize: string;
+            fontFamily: string;
+            color: string;
+        };
+        body: {
+            padding: string;
+        };
+        bodyDriver: {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            alignItems: string;
+            gap: string;
+        };
+        bodyImage: {
+            src: string;
+            alt: string;
+            width: string;
+            height: string;
+            borderRadius: string;
+            objectFit: string;
+        };
+        bodyInfo: {
+            flexGrow: string;
+        };
+        bodyName: {
+            text: string;
+            fontWeight: string;
+            color: string;
+        };
+        bodySpan: {
+            text: string;
+            fontSize: string;
+            color: string;
+        };
+        bodyActions: {
+            gap: string;
+        };
+        route: {
+            paddingX: string;
+            paddingBottom: string;
+        };
+        routeContainer: {
+            gap: string;
+        };
+        payment: {
+            paddingX: string;
+            paddingBottom: string;
+        };
+        paymentContainer: {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+        };
+        cardNumber: {
+            text: string;
+            color: string;
+            fontWeight: string;
+            fontSize: string;
+        };
+        cardType: {
+            text: string;
+            fontSize: string;
+            color: string;
+        };
+        totalSection: {
+            paddingX: string;
+            paddingY: string;
+        };
+        totalLabel: {
+            text: string;
+            color: string;
+            fontWeight: string;
+        };
+        totalAmount: {
+            text: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+    } | null;
+    hasData: boolean;
+    componentName: string;
+    syncVersion: number;
+};
+declare const useCardData: () => {
+    data: {
+        card: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            fontFamily: string;
+        };
+        container: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            borderRadius: string;
+            boxShadow: string;
+            overflow: string;
+        };
+        header: {
+            padding: string;
+            borderBottom: string;
+            borderColor: string;
+        };
+        headerContent: {
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+        };
+        headerTitle: {
+            text: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        headerTimer: {
+            text: string;
+            fontSize: string;
+            fontFamily: string;
+            color: string;
+        };
+        body: {
+            padding: string;
+        };
+        bodyDriver: {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            alignItems: string;
+            gap: string;
+        };
+        bodyImage: {
+            src: string;
+            alt: string;
+            width: string;
+            height: string;
+            borderRadius: string;
+            objectFit: string;
+        };
+        bodyInfo: {
+            flexGrow: string;
+        };
+        bodyName: {
+            text: string;
+            fontWeight: string;
+            color: string;
+        };
+        bodySpan: {
+            text: string;
+            fontSize: string;
+            color: string;
+        };
+        bodyActions: {
+            gap: string;
+        };
+        route: {
+            paddingX: string;
+            paddingBottom: string;
+        };
+        routeContainer: {
+            gap: string;
+        };
+        payment: {
+            paddingX: string;
+            paddingBottom: string;
+        };
+        paymentContainer: {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+        };
+        cardNumber: {
+            text: string;
+            color: string;
+            fontWeight: string;
+            fontSize: string;
+        };
+        cardType: {
+            text: string;
+            fontSize: string;
+            color: string;
+        };
+        totalSection: {
+            paddingX: string;
+            paddingY: string;
+        };
+        totalLabel: {
+            text: string;
+            color: string;
+            fontWeight: string;
+        };
+        totalAmount: {
+            text: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+    } | null;
+    hasData: boolean;
+    componentName: string;
+    syncVersion: number;
+};
+declare const useCustomComponent: (componentName: string) => {
+    data: {
+        card: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            fontFamily: string;
+        };
+        container: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            borderRadius: string;
+            boxShadow: string;
+            overflow: string;
+        };
+        header: {
+            padding: string;
+            borderBottom: string;
+            borderColor: string;
+        };
+        headerContent: {
+            display: string;
+            justifyContent: string;
+            alignItems: string;
+        };
+        headerTitle: {
+            text: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        headerTimer: {
+            text: string;
+            fontSize: string;
+            fontFamily: string;
+            color: string;
+        };
+        body: {
+            padding: string;
+        };
+        bodyDriver: {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            alignItems: string;
+            gap: string;
+        };
+        bodyImage: {
+            src: string;
+            alt: string;
+            width: string;
+            height: string;
+            borderRadius: string;
+            objectFit: string;
+        };
+        bodyInfo: {
+            flexGrow: string;
+        };
+        bodyName: {
+            text: string;
+            fontWeight: string;
+            color: string;
+        };
+        bodySpan: {
+            text: string;
+            fontSize: string;
+            color: string;
+        };
+        bodyActions: {
+            gap: string;
+        };
+        route: {
+            paddingX: string;
+            paddingBottom: string;
+        };
+        routeContainer: {
+            gap: string;
+        };
+        payment: {
+            paddingX: string;
+            paddingBottom: string;
+        };
+        paymentContainer: {
+            backgroundColor: string;
+            borderRadius: string;
+            padding: string;
+        };
+        cardNumber: {
+            text: string;
+            color: string;
+            fontWeight: string;
+            fontSize: string;
+        };
+        cardType: {
+            text: string;
+            fontSize: string;
+            color: string;
+        };
+        totalSection: {
+            paddingX: string;
+            paddingY: string;
+        };
+        totalLabel: {
+            text: string;
+            color: string;
+            fontWeight: string;
+        };
+        totalAmount: {
+            text: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+    } | null;
+    hasData: boolean;
+    componentName: string;
+    syncVersion: number;
+};
+declare const useAvailableComponents: () => {
+    baseComponents: string[];
+    customComponents: string[];
+    allComponents: string[];
+};
+
+export { AutoForm, Card, DefaultCard, DynamicComponent, StrataComponentFactory, StrataDebug, StrataErrorBoundary, StrataProvider, strataRegistry, useAvailableComponents, useCardData, useComponent, useComponentData, useComponents, useCustomComponent, useDynamicComponents, useStrata };
 export type { CardComponent, CardProps, ComponentNode, ComponentProperty, ComponentVariant, CustomDesignSystemData, DesignSystemData, DesignToken, FilterType, LinkedElement, SelectedItem, SelectedType, TokenType };