@arkcit/engine-react 0.3.8 → 0.3.9

package/README.md

@@ -1,51 +1,23 @@
-# @arkcit/engine-react
+# arkcit-engine-react
 
-Concrete React renderer package for the Arkcit platform.
+Adapter React du moteur Arkcit.
 
-## Position In The Flow
+## Comprendre le projet
 
-```text
-@arkcit/engine-schema
-@arkcit/engine-runtime
-@arkcit/engine-core
-@arkcit/engine-render-layer
-        ↓
-@arkcit/engine-react
-        ↓
-@arkcit/engine
-        ↓
-@arkcit/react-ui
-@arkcit/studio preview adapters
-@arkcit/docs-shell
-```
+- [SUMMARY.md](docs/SUMMARY.md) - explication courte du projet et liens architecture.
+- [ARCHITECTURE.md](docs/ARCHITECTURE.md) - carte visuelle, couches et flux.
+- [DECOUPLING.md](docs/DECOUPLING.md) - refactor, decouplage, couverture et risques.
+- [ROADMAP.md](docs/ROADMAP.md) - reste-a-faire uniquement.
+- [NOTES.md](docs/NOTES.md) - log nettoyable des acquis et decisions.
+- [ENVIRONNEMENT.md](docs/ENVIRONNEMENT.md) - variables d'environnement detectees.
+- [GOUVERNANCE.md](docs/GOUVERNANCE.md) - maintenance, validation et production.
+- [AGENTS.md](AGENTS.md) - consignes de travail pour Codex et agents.
 
-## What Goes In
+## Commandes utiles
 
-- neutral resolved-node contracts
-- shared engine primitives
-- React-specific rendering needs
-
-## What Comes Out
-
-- React rendering helpers
-- React engine root pieces
-- React-specific composition/materialization utilities
-
-## Responsibilities
-
-- own React-only rendering behavior
-- keep React-specific utilities out of neutral engine layers
-- expose reusable React renderer seams to `@arkcit/engine`
-
-## Do Not Put Here
-
-- canonical schema rules
-- runtime contract ownership
-- Angular or React Native behavior
-
-## Main Consumers
-
-- `@arkcit/engine`
-- `@arkcit/react-ui`
-- `@arkcit/studio`
-- `@arkcit/docs-shell`
+- `npm run typecheck`
+- `npm run test`
+- `npm run test:smoke`
+- `npm run test:unit`
+- `npm run test:coverage`
+- `npm run build`

package/dist/composition.js

@@ -219,6 +219,7 @@ var materializeTabsContent = ({
   renderSafeNode,
   normalizeRenderableChild
 }) => tabs.map((tab) => ({
+  disabled: Boolean(tab.disabled),
   id: tab.id,
   title: tab.title,
   label: tab.label,

package/dist/engine.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { UIEngineProps, UINodeSize, UINodeWrapperProps } from '@arkcit/engine-core';
 import { UINode } from '@arkcit/engine-schema';
@@ -10,7 +9,7 @@ import '@arkcit/engine-render-layer';
 type EngineWarningFallbackProps = {
     message: string;
 };
-declare const EngineWarningFallback: ({ message }: EngineWarningFallbackProps) => react_jsx_runtime.JSX.Element;
+declare const EngineWarningFallback: ({ message }: EngineWarningFallbackProps) => React__default.JSX.Element;
 
 type NodeErrorBoundaryProps = {
     nodeId: string;
@@ -27,7 +26,7 @@ declare class NodeErrorBoundary extends React__default.Component<NodeErrorBounda
     componentDidUpdate(prevProps: Readonly<{
         resetToken: string;
     }>): void;
-    render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 }
 
 type ReactWebUseUIEngineEffectsArgs = {
@@ -92,6 +91,6 @@ type ReactWebEngineRootDependencies<TInlineEditing = unknown> = {
 type ReactWebEngineRootArgs<TInlineEditing = unknown> = UIEngineProps & {
     dependencies: ReactWebEngineRootDependencies<TInlineEditing>;
 };
-declare const ReactWebEngineRoot: <TInlineEditing = unknown>({ schema, registry, store, onNodeClick, onInlineTextEdit, onNodeResize, onNodeResizeStart, onNodeResizeEnd, onNodeDragStart, onNodeDragOverTarget, onNodeDropTarget, selectedNodeId, nodeWrapper, dependencies, }: ReactWebEngineRootArgs<TInlineEditing>) => react_jsx_runtime.JSX.Element;
+declare const ReactWebEngineRoot: <TInlineEditing = unknown>({ schema, registry, store, onNodeClick, onInlineTextEdit, onNodeResize, onNodeResizeStart, onNodeResizeEnd, onNodeDragStart, onNodeDragOverTarget, onNodeDropTarget, selectedNodeId, nodeWrapper, dependencies, }: ReactWebEngineRootArgs<TInlineEditing>) => React__default.JSX.Element;
 
 export { EngineWarningFallback, NodeErrorBoundary, ReactWebEngineRoot, type ReactWebEngineRootArgs, type ReactWebEngineRootDependencies, type ReactWebRenderSafeNodeArgs, type ReactWebUseUIEngineEffectsArgs, type ReactWebUseUIEngineEffectsResult };

package/dist/index.d.ts

@@ -11,4 +11,3 @@ export { ComponentRegistry, ComponentRegistryEntry } from '@arkcit/engine-core';
 import 'react';
 import '@arkcit/engine-schema';
 import '@arkcit/engine-runtime';
-import 'react/jsx-runtime';

package/dist/index.js

@@ -219,6 +219,7 @@ var materializeTabsContent = ({
   renderSafeNode,
   normalizeRenderableChild: normalizeRenderableChild2
 }) => tabs.map((tab) => ({
+  disabled: Boolean(tab.disabled),
   id: tab.id,
   title: tab.title,
   label: tab.label,
@@ -1344,7 +1345,10 @@ import React12 from "react";
 var configurePreviewLinkBehavior = (componentProps) => {
   const existingOnClick = componentProps.onClick;
   componentProps.onClick = (event) => {
-    event.preventDefault();
+    const href = componentProps.href;
+    if (!(typeof href === "string" && href.startsWith("#"))) {
+      event.preventDefault();
+    }
     if (typeof existingOnClick === "function") {
       existingOnClick(event);
     }
@@ -1352,6 +1356,7 @@ var configurePreviewLinkBehavior = (componentProps) => {
 };
 
 // src/rendering/finalizeRenderedNode.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
 var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover", "Document"]);
 var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
 var RESPONSIVE_TEXT_NODE_TYPES = /* @__PURE__ */ new Set([
@@ -1394,6 +1399,45 @@ var RESPONSIVE_TEXT_CLASS_NAME = "max-md:!h-auto";
 var hasExplicitStudioSizing = (studioSizing) => Boolean(
   studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
 );
+var buildExplicitSizingWrapperStyle = (studioSizing) => {
+  if (!hasExplicitStudioSizing(studioSizing)) return null;
+  return __spreadValues(__spreadValues(__spreadValues({}, (studioSizing == null ? void 0 : studioSizing.widthPct) !== null && (studioSizing == null ? void 0 : studioSizing.widthPct) !== void 0 ? {
+    width: `${studioSizing.widthPct}%`,
+    flexBasis: `${studioSizing.widthPct}%`,
+    maxWidth: "100%"
+  } : {}), (studioSizing == null ? void 0 : studioSizing.heightPx) !== null && (studioSizing == null ? void 0 : studioSizing.heightPx) !== void 0 ? { height: `${studioSizing.heightPx}px` } : {}), (studioSizing == null ? void 0 : studioSizing.heightPx) === null && (studioSizing == null ? void 0 : studioSizing.heightPct) !== null && (studioSizing == null ? void 0 : studioSizing.heightPct) !== void 0 ? { height: `${studioSizing.heightPct}%` } : {});
+};
+var removeExplicitSizingFromComponentStyle = (componentProps, shouldWrapExplicitSizing) => {
+  if (!shouldWrapExplicitSizing) return;
+  const currentStyle = componentProps.style && typeof componentProps.style === "object" ? __spreadValues({}, componentProps.style) : null;
+  if (!currentStyle) return;
+  delete currentStyle.width;
+  delete currentStyle.flexBasis;
+  delete currentStyle.maxWidth;
+  delete currentStyle.height;
+  componentProps.style = currentStyle;
+};
+var removeInternalLayoutProps = (componentProps) => {
+  delete componentProps.fullBleed;
+};
+var wrapExplicitlySizedNode = ({
+  nodeId,
+  nodeType,
+  element,
+  wrapperStyle
+}) => {
+  if (!wrapperStyle) return element;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      "data-node-id": nodeId,
+      "data-node-type": nodeType,
+      className: "relative min-w-0 max-w-full flex-none",
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsx13("div", { className: "min-w-0 max-w-full", style: { width: "100%", height: "100%" }, children: element })
+    }
+  );
+};
 var finalizeRenderedNode = ({
   node,
   children,
@@ -1436,6 +1480,9 @@ var finalizeRenderedNode = ({
       delete componentProps.layout;
     }
   }
+  const explicitSizingWrapperStyle = !isStudioRendererContext ? buildExplicitSizingWrapperStyle(studioSizing) : null;
+  removeExplicitSizingFromComponentStyle(componentProps, explicitSizingWrapperStyle !== null);
+  removeInternalLayoutProps(componentProps);
   if (plans.some((plan) => plan.kind === "table-fallback")) {
     const tableNode = materializeBoundTable({
       nodeId: node.id,
@@ -1444,17 +1491,31 @@ var finalizeRenderedNode = ({
       TableComponent: registryComponent
     });
     if (tableNode) {
-      return tableNode;
+      return wrapExplicitlySizedNode({
+        nodeId: node.id,
+        nodeType: node.type,
+        element: tableNode,
+        wrapperStyle: explicitSizingWrapperStyle
+      });
     }
   }
   const finalComponentProps = dependencies.omitStudioProps(componentProps);
+  let renderedElement;
   if (children && children.length > 0) {
     if (node.type === "Cover" || node.type === "Tabs" || node.type === "Accordion") {
-      return React12.createElement(registryComponent, finalComponentProps);
+      renderedElement = React12.createElement(registryComponent, finalComponentProps);
+    } else {
+      renderedElement = React12.createElement(registryComponent, finalComponentProps, children);
     }
-    return React12.createElement(registryComponent, finalComponentProps, children);
+  } else {
+    renderedElement = React12.createElement(registryComponent, finalComponentProps);
   }
-  return React12.createElement(registryComponent, finalComponentProps);
+  return wrapExplicitlySizedNode({
+    nodeId: node.id,
+    nodeType: node.type,
+    element: renderedElement,
+    wrapperStyle: explicitSizingWrapperStyle
+  });
 };
 
 // src/rendering/nodeResetToken.ts
@@ -1487,7 +1548,7 @@ var buildNodeResetToken = (node) => {
 
 // src/rendering/renderChildren.tsx
 import React13, { isValidElement as isValidElement2 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var toBoolean = (value) => {
   if (typeof value === "boolean") return value;
   if (typeof value === "string") return value.toLowerCase() === "true";
@@ -1498,7 +1559,7 @@ var normalizeRenderableChild = (value) => {
   if (typeof value === "string" || typeof value === "number") return value;
   if (isValidElement2(value)) return value;
   if (Array.isArray(value)) {
-    return value.map((item, index) => /* @__PURE__ */ jsx13(React13.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
+    return value.map((item, index) => /* @__PURE__ */ jsx14(React13.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
   }
   if (value && typeof value === "object") {
     const candidate = value;

package/dist/materialization.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { UINode } from '@arkcit/engine-schema';
 import { UIRuntimeAdapter } from '@arkcit/engine-runtime';
@@ -13,15 +12,15 @@ declare const buildCoverContent: ({ rawChildren, renderSafeNode, }: {
     rawChildren: UINode[];
     renderSafeNode: (node: UINode) => React__default.ReactNode;
 }) => {
-    actions: react_jsx_runtime.JSX.Element | undefined;
-    children: react_jsx_runtime.JSX.Element | null;
+    actions: React__default.JSX.Element | undefined;
+    children: React__default.JSX.Element | null;
 };
 declare const buildScrollRevealChildren: ({ rawChildren, renderSafeNode, normalizeRenderableChild, fallbackChildren, }: {
     rawChildren: UINode[];
     renderSafeNode: (node: UINode) => React__default.ReactNode;
     normalizeRenderableChild: (value: unknown) => React__default.ReactNode;
     fallbackChildren: unknown;
-}) => string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+}) => string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 
 type TableComponentShape = {
     Header: React__default.ComponentType<Record<string, unknown>>;
@@ -46,8 +45,8 @@ declare const materializeCoverContent: ({ descriptor, renderSafeNode, }: {
     descriptor: CoverContentDescriptor;
     renderSafeNode: (node: UINode) => React__default.ReactNode;
 }) => {
-    actions: react_jsx_runtime.JSX.Element | undefined;
-    children: react_jsx_runtime.JSX.Element | null;
+    actions: React__default.JSX.Element | undefined;
+    children: React__default.JSX.Element | null;
 };
 
 declare const materializeAccordionItems: ({ items, renderSafeNode, }: {
@@ -57,30 +56,31 @@ declare const materializeAccordionItems: ({ items, renderSafeNode, }: {
     id: string;
     title: string;
     disabled: boolean;
-    content: string | react_jsx_runtime.JSX.Element;
+    content: string | React__default.JSX.Element;
 }[];
 declare const materializeExpandablePanelContent: ({ descriptor, renderSafeNode, }: {
     descriptor: ExpandablePanelContentDescriptor;
     renderSafeNode: (node: UINode) => React__default.ReactNode;
-}) => react_jsx_runtime.JSX.Element | undefined;
+}) => React__default.JSX.Element | undefined;
 
 declare const materializeTabsContent: ({ tabs, renderSafeNode, normalizeRenderableChild, }: {
     tabs: TabsContentDescriptor[];
     renderSafeNode: (node: UINode) => React__default.ReactNode;
     normalizeRenderableChild: (value: unknown) => React__default.ReactNode;
 }) => {
+    disabled: boolean;
     id: string;
     title: unknown;
     label: unknown;
-    content: string | number | bigint | boolean | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element[] | null | undefined;
+    content: string | number | bigint | boolean | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element[] | null | undefined;
 }[];
 
 declare const buildAccordionItems: (accordionChildren: UINode[], renderSafeNode: (node: UINode) => React__default.ReactNode) => {
     id: string;
     title: string;
-    content: string | react_jsx_runtime.JSX.Element;
+    content: string | React__default.JSX.Element;
     disabled: boolean;
 }[];
-declare const buildExpandablePanelChildren: (panelChildren: UINode[], renderSafeNode: (node: UINode) => React__default.ReactNode) => react_jsx_runtime.JSX.Element | undefined;
+declare const buildExpandablePanelChildren: (panelChildren: UINode[], renderSafeNode: (node: UINode) => React__default.ReactNode) => React__default.JSX.Element | undefined;
 
 export { buildAccordionItems, buildCoverContent, buildCoverMedia, buildExpandablePanelChildren, buildScrollRevealChildren, materializeAccordionItems, materializeBoundTable, materializeChildContent, materializeCoverContent, materializeExpandablePanelContent, materializeTabsContent };

package/dist/materialization.js

@@ -342,6 +342,7 @@ var materializeTabsContent = ({
   renderSafeNode,
   normalizeRenderableChild
 }) => tabs.map((tab) => ({
+  disabled: Boolean(tab.disabled),
   id: tab.id,
   title: tab.title,
   label: tab.label,

package/dist/rendering.d.ts

@@ -2,7 +2,6 @@ import React__default from 'react';
 import { FinalRenderPlan, ResolvedNodeChildDescriptor, ResolvedNodeContentDescriptor, ResolvedNodeBase, ResolvedEngineNode } from '@arkcit/engine-render-layer';
 import { UINode } from '@arkcit/engine-schema';
 import { UIRuntimeAdapter } from '@arkcit/engine-runtime';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 export { R as RenderReactNodeArgs, a as RenderReactNodeDependencies, r as renderReactNode } from './renderReactNode-xwA81IXf.js';
 import { ComponentRegistry } from '@arkcit/engine-core';
 
@@ -56,7 +55,7 @@ type PrepareRenderableChildrenArgs = {
     childContentDescriptor?: ResolvedNodeContentDescriptor;
 };
 declare const prepareRenderableChildren: ({ node, internalStudioNodeTypes, renderSafeNode, childDescriptors, childContentDescriptor, }: PrepareRenderableChildrenArgs) => {
-    children: react_jsx_runtime.JSX.Element[];
+    children: React__default.JSX.Element[];
     resolvedChildContent: React__default.ReactNode;
     childDescriptors: ResolvedNodeChildDescriptor[];
     childContentDescriptor: ResolvedNodeContentDescriptor;

package/dist/rendering.js

@@ -25,7 +25,10 @@ import React2 from "react";
 var configurePreviewLinkBehavior = (componentProps) => {
   const existingOnClick = componentProps.onClick;
   componentProps.onClick = (event) => {
-    event.preventDefault();
+    const href = componentProps.href;
+    if (!(typeof href === "string" && href.startsWith("#"))) {
+      event.preventDefault();
+    }
     if (typeof existingOnClick === "function") {
       existingOnClick(event);
     }
@@ -174,6 +177,7 @@ var materializeBoundTable = ({
 };
 
 // src/rendering/finalizeRenderedNode.tsx
+import { jsx } from "react/jsx-runtime";
 var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover", "Document"]);
 var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
 var RESPONSIVE_TEXT_NODE_TYPES = /* @__PURE__ */ new Set([
@@ -216,6 +220,45 @@ var RESPONSIVE_TEXT_CLASS_NAME = "max-md:!h-auto";
 var hasExplicitStudioSizing = (studioSizing) => Boolean(
   studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
 );
+var buildExplicitSizingWrapperStyle = (studioSizing) => {
+  if (!hasExplicitStudioSizing(studioSizing)) return null;
+  return __spreadValues(__spreadValues(__spreadValues({}, (studioSizing == null ? void 0 : studioSizing.widthPct) !== null && (studioSizing == null ? void 0 : studioSizing.widthPct) !== void 0 ? {
+    width: `${studioSizing.widthPct}%`,
+    flexBasis: `${studioSizing.widthPct}%`,
+    maxWidth: "100%"
+  } : {}), (studioSizing == null ? void 0 : studioSizing.heightPx) !== null && (studioSizing == null ? void 0 : studioSizing.heightPx) !== void 0 ? { height: `${studioSizing.heightPx}px` } : {}), (studioSizing == null ? void 0 : studioSizing.heightPx) === null && (studioSizing == null ? void 0 : studioSizing.heightPct) !== null && (studioSizing == null ? void 0 : studioSizing.heightPct) !== void 0 ? { height: `${studioSizing.heightPct}%` } : {});
+};
+var removeExplicitSizingFromComponentStyle = (componentProps, shouldWrapExplicitSizing) => {
+  if (!shouldWrapExplicitSizing) return;
+  const currentStyle = componentProps.style && typeof componentProps.style === "object" ? __spreadValues({}, componentProps.style) : null;
+  if (!currentStyle) return;
+  delete currentStyle.width;
+  delete currentStyle.flexBasis;
+  delete currentStyle.maxWidth;
+  delete currentStyle.height;
+  componentProps.style = currentStyle;
+};
+var removeInternalLayoutProps = (componentProps) => {
+  delete componentProps.fullBleed;
+};
+var wrapExplicitlySizedNode = ({
+  nodeId,
+  nodeType,
+  element,
+  wrapperStyle
+}) => {
+  if (!wrapperStyle) return element;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-node-id": nodeId,
+      "data-node-type": nodeType,
+      className: "relative min-w-0 max-w-full flex-none",
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsx("div", { className: "min-w-0 max-w-full", style: { width: "100%", height: "100%" }, children: element })
+    }
+  );
+};
 var finalizeRenderedNode = ({
   node,
   children,
@@ -258,6 +301,9 @@ var finalizeRenderedNode = ({
       delete componentProps.layout;
     }
   }
+  const explicitSizingWrapperStyle = !isStudioRendererContext ? buildExplicitSizingWrapperStyle(studioSizing) : null;
+  removeExplicitSizingFromComponentStyle(componentProps, explicitSizingWrapperStyle !== null);
+  removeInternalLayoutProps(componentProps);
   if (plans.some((plan) => plan.kind === "table-fallback")) {
     const tableNode = materializeBoundTable({
       nodeId: node.id,
@@ -266,17 +312,31 @@ var finalizeRenderedNode = ({
       TableComponent: registryComponent
     });
     if (tableNode) {
-      return tableNode;
+      return wrapExplicitlySizedNode({
+        nodeId: node.id,
+        nodeType: node.type,
+        element: tableNode,
+        wrapperStyle: explicitSizingWrapperStyle
+      });
     }
   }
   const finalComponentProps = dependencies.omitStudioProps(componentProps);
+  let renderedElement;
   if (children && children.length > 0) {
     if (node.type === "Cover" || node.type === "Tabs" || node.type === "Accordion") {
-      return React2.createElement(registryComponent, finalComponentProps);
+      renderedElement = React2.createElement(registryComponent, finalComponentProps);
+    } else {
+      renderedElement = React2.createElement(registryComponent, finalComponentProps, children);
     }
-    return React2.createElement(registryComponent, finalComponentProps, children);
+  } else {
+    renderedElement = React2.createElement(registryComponent, finalComponentProps);
   }
-  return React2.createElement(registryComponent, finalComponentProps);
+  return wrapExplicitlySizedNode({
+    nodeId: node.id,
+    nodeType: node.type,
+    element: renderedElement,
+    wrapperStyle: explicitSizingWrapperStyle
+  });
 };
 
 // src/rendering/gridItemWrapperProps.ts
@@ -353,7 +413,7 @@ import {
 
 // src/materialization/materializeChildContent.tsx
 import React3 from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var materializeChildContent = ({
   descriptor,
   renderSafeNode
@@ -363,7 +423,7 @@ var materializeChildContent = ({
   }
   const renderDescriptor = (childDescriptor) => {
     if (childDescriptor.kind === "grid-item") {
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         "div",
         __spreadProps(__spreadValues({}, getGridItemWrapperProps(
           childDescriptor.colSpan,
@@ -376,22 +436,22 @@ var materializeChildContent = ({
         childDescriptor.child.id
       );
     }
-    return /* @__PURE__ */ jsx(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
+    return /* @__PURE__ */ jsx2(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
   };
   if (descriptor.kind === "single") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
+      descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
       renderDescriptor(descriptor.child)
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
+    descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
     descriptor.children.map(renderDescriptor)
   ] });
 };
 
 // src/rendering/prepareRenderableChildren.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var prepareRenderableChildren = ({
   node,
   internalStudioNodeTypes,
@@ -405,7 +465,7 @@ var prepareRenderableChildren = ({
   });
   const children = resolvedDescriptors.map((descriptor) => {
     if (descriptor.kind === "grid-item") {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "div",
         __spreadProps(__spreadValues({}, getGridItemWrapperProps(
           descriptor.colSpan,
@@ -418,10 +478,10 @@ var prepareRenderableChildren = ({
         descriptor.child.id
       );
     }
-    return /* @__PURE__ */ jsx2(React4.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
+    return /* @__PURE__ */ jsx3(React4.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
   });
   const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
-  const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
+  const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
   const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
     childDescriptors: resolvedDescriptors
   });
@@ -439,7 +499,7 @@ var prepareRenderableChildren = ({
 
 // src/rendering/renderChildren.tsx
 import React5, { isValidElement as isValidElement2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var toBoolean = (value) => {
   if (typeof value === "boolean") return value;
   if (typeof value === "string") return value.toLowerCase() === "true";
@@ -450,7 +510,7 @@ var normalizeRenderableChild = (value) => {
   if (typeof value === "string" || typeof value === "number") return value;
   if (isValidElement2(value)) return value;
   if (Array.isArray(value)) {
-    return value.map((item, index) => /* @__PURE__ */ jsx3(React5.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
+    return value.map((item, index) => /* @__PURE__ */ jsx4(React5.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
   }
   if (value && typeof value === "object") {
     const candidate = value;
@@ -468,8 +528,8 @@ var normalizeRenderableChild = (value) => {
 };
 
 // src/engine/EngineWarningFallback.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var EngineWarningFallback = ({ message }) => /* @__PURE__ */ jsx4(
+import { jsx as jsx5 } from "react/jsx-runtime";
+var EngineWarningFallback = ({ message }) => /* @__PURE__ */ jsx5(
   "div",
   {
     role: "alert",
@@ -518,7 +578,7 @@ var resolveResolvedReactNode = ({
 };
 
 // src/rendering/renderReactNode.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var renderReactNode = ({
   node,
   runtime,
@@ -555,7 +615,7 @@ var renderReactNode = ({
       studioSizing
     });
     if (!resolvedNode) {
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(
         EngineWarningFallback_default,
         {
           message: `Unknown component type "${node.type}" for node "${node.id}".`
@@ -641,7 +701,7 @@ var renderReactNode = ({
       plans: finalRenderPlans
     });
   } catch (e) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       EngineWarningFallback_default,
       {
         message: `Renderer fallback: node "${node.type}" (${node.id}) could not be resolved.`

package/dist/static-engine.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { UIEngineProps, UINodeWrapperProps } from '@arkcit/engine-core';
 import { UINode } from '@arkcit/engine-schema';
@@ -44,6 +43,6 @@ type StaticReactWebEngineRootDependencies<TInlineEditing = unknown> = {
 type StaticReactWebEngineRootArgs<TInlineEditing = unknown> = UIEngineProps & {
     dependencies: StaticReactWebEngineRootDependencies<TInlineEditing>;
 };
-declare const StaticReactWebEngineRoot: <TInlineEditing = unknown>({ schema, registry, store, nodeWrapper, dependencies, }: StaticReactWebEngineRootArgs<TInlineEditing>) => react_jsx_runtime.JSX.Element;
+declare const StaticReactWebEngineRoot: <TInlineEditing = unknown>({ schema, registry, store, nodeWrapper, dependencies, }: StaticReactWebEngineRootArgs<TInlineEditing>) => React__default.JSX.Element;
 
 export { StaticReactWebEngineRoot, type StaticReactWebEngineRootArgs, type StaticReactWebEngineRootDependencies, type StaticRenderSafeNodeArgs };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arkcit/engine-react",
   "private": false,
-  "version": "0.3.8",
+  "version": "0.3.9",
   "type": "module",
   "sideEffects": false,
   "description": "React-specific renderer package for the Arkcit engine platform.",