@sitecore-content-sdk/react 2.2.1 → 2.3.0-beta.atoms.20260721120640

package/dist/cjs/components/DesignLibrary/StudioComponentWrapper.js

@@ -0,0 +1,62 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioComponentWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const atoms_1 = require("../../atoms");
+const SitecoreProvider_1 = require("../SitecoreProvider");
+/**
+ * Client component that renders a pre-fetched Studio (NCC) component layout.
+ *
+ * Expects `document` to be provided (fetched server-side by
+ * `StudioComponentServerWrapper`, from Design Library document updates, or any other
+ * preview path that supplies a layout `Document`). Renders `null` when no layout
+ * is available.
+ * @param {StudioComponentWrapperProps} props component props
+ * @internal
+ */
+const StudioComponentWrapper = ({ document, fields, params, }) => {
+    const { atomsConfig } = (0, SitecoreProvider_1.useSitecore)();
+    const NCComponent = (0, react_1.useMemo)(() => {
+        if (!document || !atomsConfig)
+            return null;
+        return (0, atoms_1.createNCC)(document, atomsConfig.registry);
+    }, [document, atomsConfig]);
+    if (!NCComponent)
+        return null;
+    return react_1.default.createElement(NCComponent, { fields: fields, params: params });
+};
+exports.StudioComponentWrapper = StudioComponentWrapper;

package/dist/cjs/components/DesignLibrary/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.noopLoadImportMap = exports.DesignLibraryErrorBoundary = exports.DesignLibrary = void 0;
+exports.noopLoadImportMap = exports.DesignLibraryErrorBoundary = exports.DesignLibraryLowCodeComponent = exports.DesignLibrary = void 0;
 var DesignLibrary_1 = require("./DesignLibrary");
 Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
+var DesignLibraryLowCodeComponent_1 = require("./DesignLibraryLowCodeComponent");
+Object.defineProperty(exports, "DesignLibraryLowCodeComponent", { enumerable: true, get: function () { return DesignLibraryLowCodeComponent_1.DesignLibraryLowCodeComponent; } });
 var DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
 Object.defineProperty(exports, "DesignLibraryErrorBoundary", { enumerable: true, get: function () { return DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary; } });
 var loadImportMap_1 = require("./loadImportMap");

package/dist/cjs/components/Placeholder/placeholder-utils.js

@@ -12,6 +12,7 @@ const layout_1 = require("@sitecore-content-sdk/content/layout");
 const content_1 = require("@sitecore-content-sdk/content");
 const HiddenRendering_1 = require("../HiddenRendering");
 const FEaaS_1 = require("../FEaaS");
+const StudioComponentServerWrapper_1 = require("../DesignLibrary/StudioComponentServerWrapper");
 /**
  * Get the renderings for the specified placeholder from the rendering layout data.
  * @param {ComponentRendering | RouteData } rendering rendering data
@@ -109,7 +110,7 @@ function getChildComponentProps(placeholderProps, componentRendering) {
  * @returns {ContentSDKComponet | null} component implementation or null if no component map is provided
  */
 const getComponentForRendering = (renderingDefinition, placeholderName, componentMap, hiddenRenderingComponent, missingComponentComponent) => {
-    var _a, _b;
+    var _a, _b, _c;
     const logUnknownComponentError = (variant) => {
         console.error(`Placeholder ${placeholderName} contains unknown component ${renderingDefinition.componentName}${variant ? ` (${variant})` : ''}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
     };
@@ -127,6 +128,16 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
             componentType: 'universal',
         };
     }
+    if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.ComponentRef) {
+        return {
+            component: (props) => {
+                var _a;
+                return (react_1.default.createElement(StudioComponentServerWrapper_1.StudioComponentServerWrapper, { componentRef: props.rendering.params.ComponentRef, fieldNames: (_a = props.rendering.params) === null || _a === void 0 ? void 0 : _a.fieldNames, fields: props.fields, params: props.params }));
+            },
+            isEmpty: false,
+            componentType: 'server',
+        };
+    }
     let component = null;
     if (!componentMap || componentMap.size === 0) {
         console.warn(`No components were available in component map to service request for component ${renderingDefinition}`);
@@ -175,7 +186,7 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
         };
     }
     // Render SXA Rendering Variant if available
-    const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
+    const exportName = (_b = renderingDefinition.params) === null || _b === void 0 ? void 0 : _b.FieldNames;
     const renderedComponent = exportName && exportName !== sharedTypes_1.DEFAULT_EXPORT_NAME
         ? component[exportName]
         : component.default ||
@@ -189,7 +200,7 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
             componentType: 'universal',
         };
     }
-    const dynamic = !!((_b = renderedComponent.render) === null || _b === void 0 ? void 0 : _b.preload) ||
+    const dynamic = !!((_c = renderedComponent.render) === null || _c === void 0 ? void 0 : _c.preload) ||
         renderingDefinition.componentName === FEaaS_1.BYOC_WRAPPER_RENDERING_NAME;
     // all dynamic elements will have a separate render prop
     return {

package/dist/cjs/components/SitecoreProvider.js

@@ -56,12 +56,13 @@ exports.ImportMapReactContext = react_1.default.createContext(undefined);
  * @param {SitecoreProviderProps['page']} props.page - The page data.
  * @param {SitecoreProviderProps['componentMap']} props.componentMap - The component map.
  * @param {SitecoreProviderProps['loadImportMap']} props.loadImportMap - Optional function to load the import map for Design Library variant generation. When omitted, an empty import map is used (ex: code generation is disabled).
+ * @param {SitecoreProviderProps['atomsConfig']} props.atomsConfig - Atoms config (catalog + registry) for rendering low-code components.
  * @param {React.ReactNode} props.children - The children to render.
  * @returns {React.ReactNode} The SitecoreProvider component.
  * @public
  */
 const SitecoreProvider = (props) => {
-    const { api, page: propsPage, componentMap, loadImportMap = loadImportMap_1.noopLoadImportMap, children } = props;
+    const { api, page: propsPage, componentMap, loadImportMap = loadImportMap_1.noopLoadImportMap, atomsConfig, children, } = props;
     const [page, setPageInternal] = (0, react_1.useState)(propsPage);
     // Memoize setPage callback
     const setPage = (0, react_1.useCallback)((value) => {
@@ -80,7 +81,8 @@ const SitecoreProvider = (props) => {
         api,
         componentMap,
         loadImportMap,
-    }), [page, setPage, api, componentMap, loadImportMap]);
+        atomsConfig,
+    }), [page, setPage, api, componentMap, loadImportMap, atomsConfig]);
     return (react_1.default.createElement(exports.SitecoreProviderReactContext.Provider, { value: contextValue }, children));
 };
 exports.SitecoreProvider = SitecoreProvider;

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withDatasourceCheck = exports.withSitecore = exports.withEditorChromes = exports.ErrorComponent = exports.useSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.noopLoadImportMap = exports.DesignLibraryErrorBoundary = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.renderEmptyPlaceholder = exports.PlaceholderMetadata = exports.AppPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
-exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withPlaceholder = exports.withAppPlaceholder = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = void 0;
+exports.withSitecore = exports.withEditorChromes = exports.ErrorComponent = exports.useSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.noopLoadImportMap = exports.DesignLibraryErrorBoundary = exports.DesignLibraryLowCodeComponent = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.renderEmptyPlaceholder = exports.PlaceholderMetadata = exports.AppPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.fileFieldSchema = exports.imageFieldSchema = exports.linkFieldSchema = exports.dateFieldSchema = exports.richTextFieldSchema = exports.textFieldSchema = exports.withPropMeta = exports.defineAtomsRegistry = exports.defineAtomsCatalog = exports.useBoundProp = exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withPlaceholder = exports.withAppPlaceholder = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = void 0;
 var core_1 = require("@sitecore-content-sdk/core");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
@@ -56,6 +56,7 @@ Object.defineProperty(exports, "FEaaSServerWrapper", { enumerable: true, get: fu
 Object.defineProperty(exports, "BYOCServerWrapper", { enumerable: true, get: function () { return FEaaS_1.BYOCServerWrapper; } });
 var DesignLibrary_1 = require("./components/DesignLibrary");
 Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
+Object.defineProperty(exports, "DesignLibraryLowCodeComponent", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibraryLowCodeComponent; } });
 Object.defineProperty(exports, "DesignLibraryErrorBoundary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibraryErrorBoundary; } });
 Object.defineProperty(exports, "noopLoadImportMap", { enumerable: true, get: function () { return DesignLibrary_1.noopLoadImportMap; } });
 var Link_1 = require("./components/Link");
@@ -91,3 +92,14 @@ var ClientEditingChromesUpdate_1 = require("./components/ClientEditingChromesUpd
 Object.defineProperty(exports, "ClientEditingChromesUpdate", { enumerable: true, get: function () { return ClientEditingChromesUpdate_1.ClientEditingChromesUpdate; } });
 var site_1 = require("@sitecore-content-sdk/content/site");
 Object.defineProperty(exports, "SitePathService", { enumerable: true, get: function () { return site_1.SitePathService; } });
+var atoms_1 = require("./atoms");
+Object.defineProperty(exports, "useBoundProp", { enumerable: true, get: function () { return atoms_1.useBoundProp; } });
+Object.defineProperty(exports, "defineAtomsCatalog", { enumerable: true, get: function () { return atoms_1.defineAtomsCatalog; } });
+Object.defineProperty(exports, "defineAtomsRegistry", { enumerable: true, get: function () { return atoms_1.defineAtomsRegistry; } });
+Object.defineProperty(exports, "withPropMeta", { enumerable: true, get: function () { return atoms_1.withPropMeta; } });
+Object.defineProperty(exports, "textFieldSchema", { enumerable: true, get: function () { return atoms_1.textFieldSchema; } });
+Object.defineProperty(exports, "richTextFieldSchema", { enumerable: true, get: function () { return atoms_1.richTextFieldSchema; } });
+Object.defineProperty(exports, "dateFieldSchema", { enumerable: true, get: function () { return atoms_1.dateFieldSchema; } });
+Object.defineProperty(exports, "linkFieldSchema", { enumerable: true, get: function () { return atoms_1.linkFieldSchema; } });
+Object.defineProperty(exports, "imageFieldSchema", { enumerable: true, get: function () { return atoms_1.imageFieldSchema; } });
+Object.defineProperty(exports, "fileFieldSchema", { enumerable: true, get: function () { return atoms_1.fileFieldSchema; } });

package/dist/esm/atoms/catalog-serializer.js

@@ -0,0 +1,40 @@
+/**
+ * Serialize a json-render Catalog into the payload shape expected by Design Studio.
+ * @param { Catalog<any, AtomsCatalogInput> } catalog - The json-render Catalog to serialize
+ * @returns Serialized catalog for the Design Library event
+ * @internal
+ */
+export function serializeCatalog(catalog) {
+    const { version, components, actions } = catalog.data;
+    const serializedComponents = Object.entries(components).map(([name, component]) => {
+        var _a;
+        const serializedComponent = {
+            name,
+            propsSchema: component.props.toJSONSchema(),
+            description: component.description,
+            slots: (_a = component.slots) !== null && _a !== void 0 ? _a : ['default'],
+            allowedChildren: component.allowedChildren,
+            allowedParents: component.allowedParents,
+            example: component.example,
+        };
+        if (component.version)
+            serializedComponent.version = component.version;
+        return serializedComponent;
+    });
+    const serializedActions = Object.entries(actions).map(([name, action]) => {
+        const serializedAction = {
+            name,
+            description: action.description,
+        };
+        if (action.params)
+            serializedAction.paramsSchema = action.params.toJSONSchema();
+        return serializedAction;
+    });
+    const serializedCatalog = {
+        components: serializedComponents,
+        actions: serializedActions,
+    };
+    if (version)
+        serializedCatalog.version = version;
+    return serializedCatalog;
+}

package/dist/esm/atoms/create-ncc.js

@@ -0,0 +1,39 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Renderer, StateProvider, ActionProvider, VisibilityProvider, ValidationProvider, } from '@json-render/react';
+import { createStateStore } from '@json-render/react';
+import { useSitecore } from '../components/SitecoreProvider';
+/**
+ * Creates a React functional component that renders the given Component Layout document
+ * using json-render's Renderer. The document's flat element map is passed as a spec.
+ * @param {Document} doc - Component Layout document (flat spec format)
+ * @param {DefineRegistryResult} registryResult - The registry from defineAtomsRegistry
+ * @returns {FC<NCCProps>} FC that accepts runtime props merged into spec state
+ * @internal
+ */
+export function createNCC(doc, registryResult) {
+    var _a;
+    const { registry, handlers } = registryResult;
+    const initialState = Object.assign({}, ((_a = doc.state) !== null && _a !== void 0 ? _a : {}));
+    const Generated = ({ fields, params }) => {
+        const { atomsConfig } = useSitecore();
+        const [store] = useState(() => createStateStore(Object.assign(Object.assign({}, initialState), { fields,
+            params })));
+        useEffect(() => {
+            const snapshot = store.getSnapshot();
+            store.update({
+                fields: Object.assign(Object.assign({}, snapshot.fields), fields),
+                params: Object.assign(Object.assign({}, snapshot.params), params),
+            });
+        }, [fields, params, store]);
+        const [resolvedHandlers] = useState(() => handlers(() => (updater) => store.update(updater(store.getSnapshot())), () => store.getSnapshot()));
+        return (React.createElement("div", { className: `component ${(params === null || params === void 0 ? void 0 : params.styles) || ''}`, id: (params === null || params === void 0 ? void 0 : params.RenderingIdentifier) || '' },
+            React.createElement(StateProvider, { store: store },
+                React.createElement(VisibilityProvider, null,
+                    React.createElement(ActionProvider, { handlers: resolvedHandlers, navigate: atomsConfig === null || atomsConfig === void 0 ? void 0 : atomsConfig.navigate },
+                        React.createElement(ValidationProvider, null,
+                            React.createElement(Renderer, { spec: doc, registry: registry })))))));
+    };
+    Generated.displayName = doc.name;
+    return Generated;
+}

package/dist/esm/atoms/define-atoms-catalog.js

@@ -0,0 +1,41 @@
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react';
+/**
+ * Define an atoms catalog from component and action definitions.
+ *
+ * Pass component/action definitions exactly as json-render expects them.
+ * The returned catalog carries full type information so `defineAtomsRegistry`
+ * can infer props per component.
+ * @param {T} input - Catalog input with `components` and optionally `actions`
+ * @returns A typed json-render Catalog
+ * @example
+ * ```ts
+ * import { z } from 'zod';
+ * import { defineAtomsCatalog } from '@sitecore-content-sdk/react';
+ *
+ * const catalog = defineAtomsCatalog({
+ *   components: {
+ *     Button: {
+ *       props: z.object({ label: z.string(), variant: z.enum(['primary', 'secondary']) }),
+ *       description: 'A clickable button',
+ *       slots: ['default'],
+ *     },
+ *     Card: {
+ *       props: z.object({ title: z.string() }),
+ *       description: 'A content card',
+ *       slots: ['default'],
+ *     },
+ *   },
+ *   actions: {
+ *     submit: {
+ *       params: z.object({ formId: z.string() }),
+ *       description: 'Submit a form',
+ *     },
+ *   },
+ * });
+ * ```
+ * @public
+ */
+export function defineAtomsCatalog(input) {
+    return defineCatalog(schema, input);
+}

package/dist/esm/atoms/define-atoms-registry.js

@@ -0,0 +1,33 @@
+'use client';
+import { defineRegistry } from '@json-render/react';
+/**
+ * Define an atoms registry that maps catalog definitions to React implementations.
+ *
+ * Each component receives `{ props, children, emit, on, bindings, loading }`
+ * @param catalog - The catalog created by defineAtomsCatalog
+ * @param options - Component and action implementations
+ * @returns Registry result with component registry and action handlers
+ * @example
+ *
+ * ```tsx
+ * import { defineAtomsRegistry } from '@sitecore-content-sdk/react';
+ *
+ * const { registry, handlers, executeAction } = defineAtomsRegistry(catalog, {
+ *   components: {
+ *     Button: ({ props, children, emit }) => (
+ *       <button onClick={() => emit('press')}>{props.label}{children}</button>
+ *     ),
+ *     Card: ({ props, children }) => (
+ *       <div className="card"><h2>{props.title}</h2>{children}</div>
+ *     ),
+ *   },
+ *   actions: {
+ *     submit: async (params) => {
+ *       await fetch('/api/submit', { method: 'POST', body: JSON.stringify(params) });
+ *     },
+ *   },
+ * });
+ * ```
+ * @public
+ */
+export const defineAtomsRegistry = defineRegistry;

package/dist/esm/atoms/field-schemas.js

@@ -0,0 +1,79 @@
+/** Zod schemas for Sitecore field types, for use in defineAtomsCatalog prop definitions. */
+import { z } from 'zod';
+import { withPropMeta } from './schema-utils';
+/**
+ * Zod schema for a Sitecore Single-Line Text.
+ * Mirrors the Sitecore Text component (`Text.tsx` in `@sitecore-content-sdk/react`).
+ * @param {z.ZodRawShape} [extra] - Optional additional shape to merge into the schema.
+ * @returns A ZodObject with `value?: string | number` and DS control/fieldType hints attached.
+ * @public
+ */
+export const textFieldSchema = (extra) => withPropMeta(z.object(Object.assign({ value: z.union([z.string(), z.number()]).optional() }, extra)), { control: 'Single-Line Text', fieldType: 'Text' });
+/**
+ * Zod schema for a Sitecore Rich Text field.
+ * Mirrors the Sitecore Rich Text component (`RichText.tsx` in `@sitecore-content-sdk/react`).
+ * @param {z.ZodRawShape} [extra] - Optional additional shape to merge into the schema.
+ * @returns A ZodObject with `value?: string` and DS control/fieldType hints attached.
+ * @public
+ */
+export const richTextFieldSchema = (extra) => withPropMeta(z.object(Object.assign({ value: z.string().optional() }, extra)), { control: 'Rich Text', fieldType: 'RichText' });
+/**
+ * Zod schema for a Sitecore Date field.
+ * Mirrors the field shape used in the Date component (`Date.tsx` in `@sitecore-content-sdk/react`).
+ * @param {z.ZodRawShape} [extra] - Optional additional shape to merge into the schema.
+ * @returns A ZodObject with `value?: string` and DS control/fieldType hints attached.
+ * @public
+ */
+export const dateFieldSchema = (extra) => withPropMeta(z.object(Object.assign({ value: z.string().optional() }, extra)), { control: 'Date', fieldType: 'Date' });
+/**
+ * Zod schema for a Sitecore Link field.
+ * Mirrors the Sitecore Link component (`Link.tsx` in `@sitecore-content-sdk/react`).
+ * The inner value object uses `z.looseObject` to allow arbitrary Sitecore-added attributes,
+ * matching the `[attributeName: string]: unknown` index signature on `LinkFieldValue`.
+ * @param {z.ZodRawShape} [extra] - Optional additional shape to merge into the outer schema.
+ * @returns A ZodObject with `value: LinkFieldValue` and DS control/fieldType hints attached.
+ * @public
+ */
+export const linkFieldSchema = (extra) => withPropMeta(z.object(Object.assign({ value: z.looseObject({
+        href: z.string().optional(),
+        className: z.string().optional(),
+        class: z.string().optional(),
+        title: z.string().optional(),
+        target: z.string().optional(),
+        text: z.string().optional(),
+        anchor: z.string().optional(),
+        querystring: z.string().optional(),
+        linktype: z.string().optional(),
+    }) }, extra)), { control: 'Link', fieldType: 'Link' });
+/**
+ * Zod schema for a Sitecore Image field.
+ * Mirrors the Sitecore Image component (`Image.tsx` in `@sitecore-content-sdk/react`).
+ * The inner value object uses `z.looseObject` to allow arbitrary HTML attributes,
+ * matching the `[attributeName: string]: unknown` index signature on `ImageFieldValue`.
+ * @param {z.ZodRawShape} [extra] - Optional additional shape to merge into the outer schema.
+ * @returns A ZodObject with `value?: ImageFieldValue` and DS control/fieldType hints attached.
+ * @public
+ */
+export const imageFieldSchema = (extra) => withPropMeta(z.object(Object.assign({ value: z
+        .looseObject({
+        src: z.string().optional(),
+        alt: z.string().optional(),
+        width: z.union([z.string(), z.number()]).optional(),
+        height: z.union([z.string(), z.number()]).optional(),
+        class: z.string().optional(),
+    })
+        .optional() }, extra)), { control: 'Image', fieldType: 'Image' });
+/**
+ * Zod schema for a Sitecore File field.
+ * Mirrors the Sitecore File component (`File.tsx` in `@sitecore-content-sdk/react`).
+ * The inner value object uses `z.looseObject` to allow arbitrary extra properties,
+ * matching the `[propName: string]: unknown` index signature on `FileFieldValue`.
+ * @param {z.ZodRawShape} [extra] - Optional additional shape to merge into the outer schema.
+ * @returns A ZodObject with `value: FileFieldValue` and DS control/fieldType hints attached.
+ * @public
+ */
+export const fileFieldSchema = (extra) => withPropMeta(z.object(Object.assign({ value: z.looseObject({
+        src: z.string().optional(),
+        title: z.string().optional(),
+        displayName: z.string().optional(),
+    }) }, extra)), { control: 'File', fieldType: 'File' });

package/dist/esm/atoms/index.js

@@ -0,0 +1,7 @@
+export { defineAtomsCatalog } from './define-atoms-catalog';
+export { defineAtomsRegistry } from './define-atoms-registry';
+export { serializeCatalog } from './catalog-serializer';
+export { withPropMeta } from './schema-utils';
+export { textFieldSchema, richTextFieldSchema, dateFieldSchema, linkFieldSchema, imageFieldSchema, fileFieldSchema, } from './field-schemas';
+export { createNCC } from './create-ncc';
+export * from './re-exports';

package/dist/esm/atoms/re-exports.js

@@ -0,0 +1,21 @@
+import { useBoundProp as useBoundPropInternal } from '@json-render/react';
+/**
+ * Hook for two-way bound props. Returns `[value, setValue]` where:
+ *
+ * - `value` is the already-resolved prop value (passed through from render props)
+ * - `setValue` writes back to the bound state path (no-op if not bound)
+ *
+ * Designed to work with the `bindings` map that the renderer provides when
+ * a prop uses `{ $bindState: "/path" }` or `{ $bindItem: "field" }`.
+ * @example
+ * ```tsx
+ * import { useBoundProp } from '@sitecore-content-sdk/react';
+ *
+ * const Input: ComponentRenderer = ({ props, bindings }) => {
+ *   const [value, setValue] = useBoundProp<string>(props.value, bindings?.value);
+ *   return <input value={value ?? ""} onChange={(e) => setValue(e.target.value)} />;
+ * };
+ * ```
+ * @public
+ */
+export const useBoundProp = useBoundPropInternal;

package/dist/esm/atoms/schema-utils.js

@@ -0,0 +1,16 @@
+const META_KEY = 'meta';
+/**
+ * Attach editor hint (e.g. control type, fieldType) to a prop schema. Metadata is stored under a key that
+ * survives JSON Schema conversion for Design Studio.
+ * @param {import('zod').ZodType} schema - Zod type for the prop
+ * @param {PropMeta} meta - Editor metadata (e.g. control, fieldType)
+ * @returns The same Zod type with meta attached (or schema unchanged if .meta is not callable)
+ * @public
+ */
+export function withPropMeta(schema, meta) {
+    const s = schema;
+    if (typeof s.meta === 'function') {
+        return s.meta({ [META_KEY]: meta });
+    }
+    return schema;
+}

package/dist/esm/atoms/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/DesignLibrary/DesignLibrary.js

@@ -10,6 +10,8 @@ import { useSitecore } from '../../components/SitecoreProvider';
 import { Placeholder, PlaceholderMetadata } from '../Placeholder';
 import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
 import { ErrorComponent } from '../ErrorBoundary';
+import { serializeCatalog } from '../../atoms';
+import { getDesignLibraryAtomsCatalogEvent } from '@sitecore-content-sdk/content/atoms';
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
 let { postToDesignLibrary } = editing;
 export const __mockDependencies = (mocks) => {
@@ -33,7 +35,7 @@ export const __mockDependencies = (mocks) => {
  */
 export const DesignLibrary = () => {
     var _a, _b;
-    const { page, loadImportMap } = useSitecore();
+    const { page, loadImportMap, atomsConfig } = useSitecore();
     const route = page.layout.sitecore.route;
     const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
     const uid = rendering === null || rendering === void 0 ? void 0 : rendering.uid;
@@ -106,6 +108,10 @@ export const DesignLibrary = () => {
             });
             const importMapEvent = getDesignLibraryImportMapEvent(uid, importMap);
             postToDesignLibrary(importMapEvent);
+            if (atomsConfig === null || atomsConfig === void 0 ? void 0 : atomsConfig.catalog) {
+                const catalogPayload = serializeCatalog(atomsConfig.catalog);
+                postToDesignLibrary(getDesignLibraryAtomsCatalogEvent(catalogPayload));
+            }
             const propsEvent = getDesignLibraryComponentPropsEvent(uid, propsState.fields, propsState.params);
             postToDesignLibrary(propsEvent);
         })();
@@ -114,7 +120,7 @@ export const DesignLibrary = () => {
             cancelled = true;
             unsubscribe && unsubscribe();
         };
-    }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState]);
+    }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState, atomsConfig]);
     return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(DesignLibraryErrorBoundary, { uid: uid, renderKey: renderKey },
         React.createElement(PlaceholderMetadata, { rendering: rendering },
             React.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));

package/dist/esm/components/DesignLibrary/DesignLibraryLowCodeComponent.js

@@ -0,0 +1,71 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { useSitecore } from '../SitecoreProvider';
+import { serializeCatalog } from '../../atoms';
+import { StudioComponentWrapper } from './StudioComponentWrapper';
+import * as editing from '@sitecore-content-sdk/content/editing';
+import * as atoms from '@sitecore-content-sdk/content/atoms';
+import { DesignLibraryErrorBoundary } from '../..';
+let { postToDesignLibrary, getDesignLibraryStatusEvent, DesignLibraryStatus } = editing;
+let { addDocumentUpdateHandler, getDesignLibraryAtomsCatalogEvent, sendAtomsErrorEvent, addComponentPropsUpdateHandler, } = atoms;
+export const __mockDependencies = (mocks) => {
+    if (mocks.postToDesignLibrary) {
+        postToDesignLibrary = mocks.postToDesignLibrary;
+    }
+    if (mocks.sendAtomsErrorEvent) {
+        sendAtomsErrorEvent = mocks.sendAtomsErrorEvent;
+    }
+    if (mocks.addDocumentUpdateHandler) {
+        addDocumentUpdateHandler = mocks.addDocumentUpdateHandler;
+    }
+    if (mocks.addComponentPropsUpdateHandler) {
+        addComponentPropsUpdateHandler = mocks.addComponentPropsUpdateHandler;
+    }
+};
+/**
+ * Design Library Low Code component.
+ *
+ * Facilitates the communication between the Design Studio and the Rendering Host when previewing a low code component built with the Atoms.
+ * - On mount, it serializes the atoms catalog and sends it to the Design Studio via the `atoms:catalog` event.
+ * - Receives Component model data updates via document update handler and renders the low code component
+ * via `StudioComponentWrapper` (same client path as Studio / NCC preview elsewhere).
+ * @internal
+ */
+export const DesignLibraryLowCodeComponent = () => {
+    var _a;
+    const { atomsConfig } = useSitecore();
+    const [currentDocument, setCurrentDocument] = useState(null);
+    const [renderKey, setRenderKey] = useState(0);
+    const [fields, setFields] = useState();
+    const [params, setParams] = useState();
+    useEffect(() => {
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, 'low-code-component'));
+    }, []);
+    useEffect(() => {
+        const unsubscribe = addComponentPropsUpdateHandler((updatedFields, updatedParams) => {
+            setFields(updatedFields);
+            setParams(updatedParams);
+        });
+        return () => unsubscribe();
+    }, []);
+    useEffect(() => {
+        if (!(atomsConfig === null || atomsConfig === void 0 ? void 0 : atomsConfig.catalog)) {
+            sendAtomsErrorEvent('No atoms catalog provided', 'atoms-missing');
+            return;
+        }
+        const payload = serializeCatalog(atomsConfig.catalog);
+        postToDesignLibrary(getDesignLibraryAtomsCatalogEvent(payload));
+        const unsubDocumentUpdate = addDocumentUpdateHandler((updatedDocument) => {
+            setCurrentDocument(updatedDocument);
+            setRenderKey((k) => k + 1);
+        });
+        return () => unsubDocumentUpdate();
+    }, [atomsConfig]);
+    useEffect(() => {
+        if (renderKey === 0)
+            return;
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, 'low-code-component'));
+    }, [renderKey]);
+    return (React.createElement(DesignLibraryErrorBoundary, { uid: (_a = currentDocument === null || currentDocument === void 0 ? void 0 : currentDocument.name) !== null && _a !== void 0 ? _a : 'design-library-low-code-component', renderKey: renderKey },
+        React.createElement(StudioComponentWrapper, { document: currentDocument, fields: fields, params: params })));
+};