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

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeCatalog = serializeCatalog;
+/**
+ * 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
+ */
+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/cjs/atoms/create-ncc.js

@@ -0,0 +1,75 @@
+"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.createNCC = createNCC;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@json-render/react");
+const react_3 = require("@json-render/react");
+const SitecoreProvider_1 = require("../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
+ */
+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 } = (0, SitecoreProvider_1.useSitecore)();
+        const [store] = (0, react_1.useState)(() => (0, react_3.createStateStore)(Object.assign(Object.assign({}, initialState), { fields,
+            params })));
+        (0, react_1.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] = (0, react_1.useState)(() => handlers(() => (updater) => store.update(updater(store.getSnapshot())), () => store.getSnapshot()));
+        return (react_1.default.createElement("div", { className: `component ${(params === null || params === void 0 ? void 0 : params.styles) || ''}`, id: (params === null || params === void 0 ? void 0 : params.RenderingIdentifier) || '' },
+            react_1.default.createElement(react_2.StateProvider, { store: store },
+                react_1.default.createElement(react_2.VisibilityProvider, null,
+                    react_1.default.createElement(react_2.ActionProvider, { handlers: resolvedHandlers, navigate: atomsConfig === null || atomsConfig === void 0 ? void 0 : atomsConfig.navigate },
+                        react_1.default.createElement(react_2.ValidationProvider, null,
+                            react_1.default.createElement(react_2.Renderer, { spec: doc, registry: registry })))))));
+    };
+    Generated.displayName = doc.name;
+    return Generated;
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineAtomsCatalog = defineAtomsCatalog;
+const core_1 = require("@json-render/core");
+const react_1 = require("@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
+ */
+function defineAtomsCatalog(input) {
+    return (0, core_1.defineCatalog)(react_1.schema, input);
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineAtomsRegistry = void 0;
+const react_1 = require("@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
+ */
+exports.defineAtomsRegistry = react_1.defineRegistry;

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileFieldSchema = exports.imageFieldSchema = exports.linkFieldSchema = exports.dateFieldSchema = exports.richTextFieldSchema = exports.textFieldSchema = void 0;
+/** Zod schemas for Sitecore field types, for use in defineAtomsCatalog prop definitions. */
+const zod_1 = require("zod");
+const schema_utils_1 = require("./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
+ */
+const textFieldSchema = (extra) => (0, schema_utils_1.withPropMeta)(zod_1.z.object(Object.assign({ value: zod_1.z.union([zod_1.z.string(), zod_1.z.number()]).optional() }, extra)), { control: 'Single-Line Text', fieldType: 'Text' });
+exports.textFieldSchema = textFieldSchema;
+/**
+ * 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
+ */
+const richTextFieldSchema = (extra) => (0, schema_utils_1.withPropMeta)(zod_1.z.object(Object.assign({ value: zod_1.z.string().optional() }, extra)), { control: 'Rich Text', fieldType: 'RichText' });
+exports.richTextFieldSchema = richTextFieldSchema;
+/**
+ * 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
+ */
+const dateFieldSchema = (extra) => (0, schema_utils_1.withPropMeta)(zod_1.z.object(Object.assign({ value: zod_1.z.string().optional() }, extra)), { control: 'Date', fieldType: 'Date' });
+exports.dateFieldSchema = dateFieldSchema;
+/**
+ * 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
+ */
+const linkFieldSchema = (extra) => (0, schema_utils_1.withPropMeta)(zod_1.z.object(Object.assign({ value: zod_1.z.looseObject({
+        href: zod_1.z.string().optional(),
+        className: zod_1.z.string().optional(),
+        class: zod_1.z.string().optional(),
+        title: zod_1.z.string().optional(),
+        target: zod_1.z.string().optional(),
+        text: zod_1.z.string().optional(),
+        anchor: zod_1.z.string().optional(),
+        querystring: zod_1.z.string().optional(),
+        linktype: zod_1.z.string().optional(),
+    }) }, extra)), { control: 'Link', fieldType: 'Link' });
+exports.linkFieldSchema = linkFieldSchema;
+/**
+ * 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
+ */
+const imageFieldSchema = (extra) => (0, schema_utils_1.withPropMeta)(zod_1.z.object(Object.assign({ value: zod_1.z
+        .looseObject({
+        src: zod_1.z.string().optional(),
+        alt: zod_1.z.string().optional(),
+        width: zod_1.z.union([zod_1.z.string(), zod_1.z.number()]).optional(),
+        height: zod_1.z.union([zod_1.z.string(), zod_1.z.number()]).optional(),
+        class: zod_1.z.string().optional(),
+    })
+        .optional() }, extra)), { control: 'Image', fieldType: 'Image' });
+exports.imageFieldSchema = imageFieldSchema;
+/**
+ * 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
+ */
+const fileFieldSchema = (extra) => (0, schema_utils_1.withPropMeta)(zod_1.z.object(Object.assign({ value: zod_1.z.looseObject({
+        src: zod_1.z.string().optional(),
+        title: zod_1.z.string().optional(),
+        displayName: zod_1.z.string().optional(),
+    }) }, extra)), { control: 'File', fieldType: 'File' });
+exports.fileFieldSchema = fileFieldSchema;

package/dist/cjs/atoms/index.js

@@ -0,0 +1,35 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNCC = exports.fileFieldSchema = exports.imageFieldSchema = exports.linkFieldSchema = exports.dateFieldSchema = exports.richTextFieldSchema = exports.textFieldSchema = exports.withPropMeta = exports.serializeCatalog = exports.defineAtomsRegistry = exports.defineAtomsCatalog = void 0;
+var define_atoms_catalog_1 = require("./define-atoms-catalog");
+Object.defineProperty(exports, "defineAtomsCatalog", { enumerable: true, get: function () { return define_atoms_catalog_1.defineAtomsCatalog; } });
+var define_atoms_registry_1 = require("./define-atoms-registry");
+Object.defineProperty(exports, "defineAtomsRegistry", { enumerable: true, get: function () { return define_atoms_registry_1.defineAtomsRegistry; } });
+var catalog_serializer_1 = require("./catalog-serializer");
+Object.defineProperty(exports, "serializeCatalog", { enumerable: true, get: function () { return catalog_serializer_1.serializeCatalog; } });
+var schema_utils_1 = require("./schema-utils");
+Object.defineProperty(exports, "withPropMeta", { enumerable: true, get: function () { return schema_utils_1.withPropMeta; } });
+var field_schemas_1 = require("./field-schemas");
+Object.defineProperty(exports, "textFieldSchema", { enumerable: true, get: function () { return field_schemas_1.textFieldSchema; } });
+Object.defineProperty(exports, "richTextFieldSchema", { enumerable: true, get: function () { return field_schemas_1.richTextFieldSchema; } });
+Object.defineProperty(exports, "dateFieldSchema", { enumerable: true, get: function () { return field_schemas_1.dateFieldSchema; } });
+Object.defineProperty(exports, "linkFieldSchema", { enumerable: true, get: function () { return field_schemas_1.linkFieldSchema; } });
+Object.defineProperty(exports, "imageFieldSchema", { enumerable: true, get: function () { return field_schemas_1.imageFieldSchema; } });
+Object.defineProperty(exports, "fileFieldSchema", { enumerable: true, get: function () { return field_schemas_1.fileFieldSchema; } });
+var create_ncc_1 = require("./create-ncc");
+Object.defineProperty(exports, "createNCC", { enumerable: true, get: function () { return create_ncc_1.createNCC; } });
+__exportStar(require("./re-exports"), exports);

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoundProp = void 0;
+const react_1 = require("@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
+ */
+exports.useBoundProp = react_1.useBoundProp;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withPropMeta = withPropMeta;
+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
+ */
+function withPropMeta(schema, meta) {
+    const s = schema;
+    if (typeof s.meta === 'function') {
+        return s.meta({ [META_KEY]: meta });
+    }
+    return schema;
+}

package/dist/cjs/atoms/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -46,6 +46,8 @@ const SitecoreProvider_1 = require("../../components/SitecoreProvider");
 const Placeholder_1 = require("../Placeholder");
 const DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
 const ErrorBoundary_1 = require("../ErrorBoundary");
+const atoms_1 = require("../../atoms");
+const atoms_2 = require("@sitecore-content-sdk/content/atoms");
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
 let { postToDesignLibrary } = editing;
 const __mockDependencies = (mocks) => {
@@ -70,7 +72,7 @@ exports.__mockDependencies = __mockDependencies;
  */
 const DesignLibrary = () => {
     var _a, _b;
-    const { page, loadImportMap } = (0, SitecoreProvider_1.useSitecore)();
+    const { page, loadImportMap, atomsConfig } = (0, SitecoreProvider_1.useSitecore)();
     const route = page.layout.sitecore.route;
     const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
     const uid = rendering === null || rendering === void 0 ? void 0 : rendering.uid;
@@ -143,6 +145,10 @@ const DesignLibrary = () => {
             });
             const importMapEvent = getDesignLibraryImportMapEvent(uid, importMap);
             postToDesignLibrary(importMapEvent);
+            if (atomsConfig === null || atomsConfig === void 0 ? void 0 : atomsConfig.catalog) {
+                const catalogPayload = (0, atoms_1.serializeCatalog)(atomsConfig.catalog);
+                postToDesignLibrary((0, atoms_2.getDesignLibraryAtomsCatalogEvent)(catalogPayload));
+            }
             const propsEvent = getDesignLibraryComponentPropsEvent(uid, propsState.fields, propsState.params);
             postToDesignLibrary(propsEvent);
         })();
@@ -151,7 +157,7 @@ const DesignLibrary = () => {
             cancelled = true;
             unsubscribe && unsubscribe();
         };
-    }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState]);
+    }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState, atomsConfig]);
     return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary, { uid: uid, renderKey: renderKey },
         react_1.default.createElement(Placeholder_1.PlaceholderMetadata, { rendering: rendering },
             react_1.default.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));

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

@@ -0,0 +1,109 @@
+"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.DesignLibraryLowCodeComponent = exports.__mockDependencies = void 0;
+const react_1 = __importStar(require("react"));
+const SitecoreProvider_1 = require("../SitecoreProvider");
+const atoms_1 = require("../../atoms");
+const StudioComponentWrapper_1 = require("./StudioComponentWrapper");
+const editing = __importStar(require("@sitecore-content-sdk/content/editing"));
+const atoms = __importStar(require("@sitecore-content-sdk/content/atoms"));
+const __1 = require("../..");
+let { postToDesignLibrary, getDesignLibraryStatusEvent, DesignLibraryStatus } = editing;
+let { addDocumentUpdateHandler, getDesignLibraryAtomsCatalogEvent, sendAtomsErrorEvent, addComponentPropsUpdateHandler, } = atoms;
+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;
+    }
+};
+exports.__mockDependencies = __mockDependencies;
+/**
+ * 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
+ */
+const DesignLibraryLowCodeComponent = () => {
+    var _a;
+    const { atomsConfig } = (0, SitecoreProvider_1.useSitecore)();
+    const [currentDocument, setCurrentDocument] = (0, react_1.useState)(null);
+    const [renderKey, setRenderKey] = (0, react_1.useState)(0);
+    const [fields, setFields] = (0, react_1.useState)();
+    const [params, setParams] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, 'low-code-component'));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = addComponentPropsUpdateHandler((updatedFields, updatedParams) => {
+            setFields(updatedFields);
+            setParams(updatedParams);
+        });
+        return () => unsubscribe();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!(atomsConfig === null || atomsConfig === void 0 ? void 0 : atomsConfig.catalog)) {
+            sendAtomsErrorEvent('No atoms catalog provided', 'atoms-missing');
+            return;
+        }
+        const payload = (0, atoms_1.serializeCatalog)(atomsConfig.catalog);
+        postToDesignLibrary(getDesignLibraryAtomsCatalogEvent(payload));
+        const unsubDocumentUpdate = addDocumentUpdateHandler((updatedDocument) => {
+            setCurrentDocument(updatedDocument);
+            setRenderKey((k) => k + 1);
+        });
+        return () => unsubDocumentUpdate();
+    }, [atomsConfig]);
+    (0, react_1.useEffect)(() => {
+        if (renderKey === 0)
+            return;
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, 'low-code-component'));
+    }, [renderKey]);
+    return (react_1.default.createElement(__1.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_1.default.createElement(StudioComponentWrapper_1.StudioComponentWrapper, { document: currentDocument, fields: fields, params: params })));
+};
+exports.DesignLibraryLowCodeComponent = DesignLibraryLowCodeComponent;

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

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioComponentServerWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const StudioComponentWrapper_1 = require("./StudioComponentWrapper");
+const core_1 = require("@sitecore-content-sdk/core");
+const content_1 = require("@sitecore-content-sdk/content");
+const tools_1 = require("@sitecore-content-sdk/core/tools");
+/**
+ * Server component for Studio (NCC) components. Fetches the component layout
+ * `Document` from MMS server-side and renders the client `StudioComponentWrapper`.
+ * @param {StudioComponentServerWrapperProps} props incoming props
+ * @returns rendered `StudioComponentWrapper`
+ * @internal
+ */
+const StudioComponentServerWrapper = async (props) => {
+    const componentRef = props.componentRef || '';
+    if (!componentRef)
+        return null;
+    const path = extractVariantPathFromComponentRef(componentRef, props.fieldNames);
+    if (!path)
+        return null;
+    const document = await fetchDocument(path);
+    if (!document)
+        return null;
+    return react_1.default.createElement(StudioComponentWrapper_1.StudioComponentWrapper, { document: document, fields: props.fields, params: props.params });
+};
+exports.StudioComponentServerWrapper = StudioComponentServerWrapper;
+/**
+ * Extracts the variant path from a component reference.
+ * @param {string} componentRef The component reference string.
+ * @param {string} fieldNames The field names to extract the variant path for.
+ * @returns {string} The variant path.
+ * @internal
+ */
+function extractVariantPathFromComponentRef(componentRef, fieldNames = 'default') {
+    const paths = componentRef.split('|').reduce((acc, part) => {
+        const path = part.trim();
+        const segments = path.split('/');
+        const variant = segments[segments.length - 1];
+        acc.set(variant, path);
+        return acc;
+    }, new Map());
+    const path = paths.get(fieldNames) || paths.get('default') || null;
+    if (!path) {
+        console.warn(`StudioComponentServerWrapper: failed to extract path from ComponentRef "${componentRef}" with fieldNames "${fieldNames}". ` +
+            'Ensure the ComponentRef is in the expected format and that the correct fieldNames are provided.');
+    }
+    return path;
+}
+/**
+ * Prefix for MMS component paths in componentRef. The final URL will be resolved as `${host}/${MMS_COMPONENT_PATH_PREFIX}/${path}`.
+ */
+const MMS_COMPONENT_PATH_PREFIX = 'mms';
+/**
+ * Fetch a Studio component layout `Document` by reference.
+ * @param {string} path extracted component reference (path) from `params.ComponentRef`
+ * @returns {Promise<Document | null>} the resolved component layout, or `null` on missing path, fetch failure, or un-parseable body.
+ */
+async function fetchDocument(path) {
+    let url;
+    try {
+        const pathWithMmsPrefix = path.startsWith('/')
+            ? `/${MMS_COMPONENT_PATH_PREFIX}${path}`
+            : `/${MMS_COMPONENT_PATH_PREFIX}/${path}`;
+        const hostURL = (0, tools_1.resolveEdgeUrl)();
+        url = new URL(pathWithMmsPrefix, hostURL).toString();
+    }
+    catch (err) {
+        console.error(`StudioComponentServerWrapper: failed to resolve component from "${path}"`, err);
+        return null;
+    }
+    let response;
+    try {
+        const fetcher = new core_1.NativeDataFetcher({ debugger: content_1.debug.layout });
+        response = await fetcher.get(url);
+    }
+    catch (error) {
+        console.error(`StudioComponentServerWrapper: failed to fetch component layout from ${url}`, error);
+        return null;
+    }
+    try {
+        const document = JSON.parse(response.data);
+        return document;
+    }
+    catch (err) {
+        console.error(`StudioComponentServerWrapper: failed to parse component layout response from ${url}`, err);
+        return null;
+    }
+}