@arkcit/engine-react 0.3.2 → 0.3.4

package/dist/engine.d.ts

@@ -4,6 +4,7 @@ import { UIEngineProps, UINodeSize, UINodeWrapperProps } from '@arkcit/engine-co
 import { UINode } from '@arkcit/engine-schema';
 import { UIRuntimeAdapter } from '@arkcit/engine-runtime';
 import { r as renderReactNode } from './renderReactNode-DmxD8hot.js';
+export { StaticReactWebEngineRoot } from './static-engine.js';
 import '@arkcit/engine-render-layer';
 
 type EngineWarningFallbackProps = {

package/dist/engine.js

@@ -501,8 +501,104 @@ var ReactWebEngineRoot = ({
   });
   return /* @__PURE__ */ jsx6("div", { className: "flex h-full min-w-0 w-full flex-wrap content-start items-start gap-3", children: schema.nodes.map((node) => /* @__PURE__ */ jsx6(React4.Fragment, { children: renderSafeEngineNode(node) }, node.id)) });
 };
+
+// src/engine/StaticReactWebEngineRoot.tsx
+import React5 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var INTERNAL_STUDIO_NODE_TYPES2 = /* @__PURE__ */ new Set();
+var STUDIO_CANVAS_OVERLAY_ROOT_ID2 = "studio-canvas-overlay-root";
+var STUDIO_MIN_WIDTH_PCT2 = 5;
+var STUDIO_MIN_HEIGHT_PCT2 = 5;
+var STUDIO_MIN_HEIGHT_PX2 = 20;
+var NOOP_RUNTIME2 = {
+  get: () => void 0,
+  dispatch: () => void 0
+};
+var EMPTY_UI_REGISTRY2 = {};
+var EMPTY_INLINE_MEMBERSHIP = Object.freeze({
+  Form: /* @__PURE__ */ new Set(),
+  FormWizard: /* @__PURE__ */ new Set(),
+  StepForm: /* @__PURE__ */ new Set()
+});
+var isFormInteractiveTarget2 = (_target) => false;
+var createStaticRef = (value) => ({
+  current: value
+});
+var NOOP_SETTER = (_value) => void 0;
+var StaticReactWebEngineRoot = ({
+  schema,
+  registry = EMPTY_UI_REGISTRY2,
+  store,
+  nodeWrapper,
+  dependencies
+}) => {
+  const runtime = store != null ? store : NOOP_RUNTIME2;
+  const NodeWrapper = nodeWrapper != null ? nodeWrapper : dependencies.StudioNodeWrapper;
+  const setInlineEditing = NOOP_SETTER;
+  const setDropdownOpenByNodeId = NOOP_SETTER;
+  const setWizardActiveStepByNodeId = NOOP_SETTER;
+  const setAccordionOpenIdsByNodeId = NOOP_SETTER;
+  const setExpandablePanelOpenByNodeId = NOOP_SETTER;
+  const resizeStateRef = createStaticRef(null);
+  const pinchStateRef = createStaticRef(null);
+  const overlaysByNodeId = {};
+  const isStudioRendererContext = false;
+  const renderNode = (node, studioSizing) => renderReactNode({
+    node,
+    runtime,
+    registry,
+    schemaNodes: schema.nodes,
+    renderSafeNode: renderSafeEngineNode,
+    internalStudioNodeTypes: INTERNAL_STUDIO_NODE_TYPES2,
+    overlaysByNodeId,
+    onInlineTextEdit: void 0,
+    isStudioRendererContext,
+    dropdownOpenByNodeId: {},
+    setDropdownOpenByNodeId,
+    captureFieldFocus: () => void 0,
+    selectedNodeId: null,
+    wizardActiveStepByNodeId: {},
+    accordionOpenIdsByNodeId: {},
+    expandablePanelOpenByNodeId: {},
+    setWizardActiveStepByNodeId,
+    setAccordionOpenIdsByNodeId,
+    setExpandablePanelOpenByNodeId,
+    onNodeClick: void 0,
+    setInlineEditing,
+    studioSizing,
+    dependencies: dependencies.renderReactNodeDependencies
+  });
+  const renderSafeEngineNode = (node) => dependencies.renderSafeNode({
+    node,
+    registry,
+    runtime,
+    schemaNodes: schema.nodes,
+    renderNode,
+    isStudioRendererContext,
+    overlaysByNodeId,
+    selectedNodeId: null,
+    onNodeClick: void 0,
+    onInlineTextEdit: void 0,
+    onNodeResize: void 0,
+    onNodeResizeStart: void 0,
+    onNodeResizeEnd: void 0,
+    inlineEditing: null,
+    setInlineEditing,
+    ancestorTypeMembership: EMPTY_INLINE_MEMBERSHIP,
+    resizeStateRef,
+    pinchStateRef,
+    minWidthPct: STUDIO_MIN_WIDTH_PCT2,
+    minHeightPct: STUDIO_MIN_HEIGHT_PCT2,
+    minHeightPx: STUDIO_MIN_HEIGHT_PX2,
+    overlayRootId: STUDIO_CANVAS_OVERLAY_ROOT_ID2,
+    NodeWrapper,
+    isFormInteractiveTarget: isFormInteractiveTarget2
+  });
+  return /* @__PURE__ */ jsx7("div", { className: "flex h-full min-w-0 w-full flex-wrap content-start items-start gap-3", children: schema.nodes.map((node) => /* @__PURE__ */ jsx7(React5.Fragment, { children: renderSafeEngineNode(node) }, node.id)) });
+};
 export {
   EngineWarningFallback_default as EngineWarningFallback,
   NodeErrorBoundary,
-  ReactWebEngineRoot
+  ReactWebEngineRoot,
+  StaticReactWebEngineRoot
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { applyContentComposition, applyNavigationComposition } from './composition.js';
 export { applyRenderDirectives } from './directives.js';
 export { EngineWarningFallback, NodeErrorBoundary, ReactWebEngineRoot } from './engine.js';
+export { StaticReactWebEngineRoot } from './static-engine.js';
 export { useUIEngineEffects, useUIEngineState } from './hooks.js';
 export { buildAccordionItems, buildCoverContent, buildCoverMedia, buildExpandablePanelChildren, buildScrollRevealChildren, materializeAccordionItems, materializeBoundTable, materializeChildContent, materializeCoverContent, materializeExpandablePanelContent, materializeTabsContent } from './materialization.js';
 export { BoundTableColumn, BoundTableRow, ReactNodeRenderPlan, ResolvedBoundTableData, ResolvedReactNode, buildNodeResetToken, configurePreviewLinkBehavior, finalizeRenderedNode, getGridItemWrapperProps, normalizeRenderableChild, prepareRenderableChildren, resolveBoundTableData, resolveReactNodePlan, resolveResolvedReactNode, toBoolean } from './rendering.js';

package/dist/index.js

@@ -879,6 +879,101 @@ var ReactWebEngineRoot = ({
   return /* @__PURE__ */ jsx9("div", { className: "flex h-full min-w-0 w-full flex-wrap content-start items-start gap-3", children: schema.nodes.map((node) => /* @__PURE__ */ jsx9(React7.Fragment, { children: renderSafeEngineNode(node) }, node.id)) });
 };
 
+// src/engine/StaticReactWebEngineRoot.tsx
+import React8 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var INTERNAL_STUDIO_NODE_TYPES2 = /* @__PURE__ */ new Set();
+var STUDIO_CANVAS_OVERLAY_ROOT_ID2 = "studio-canvas-overlay-root";
+var STUDIO_MIN_WIDTH_PCT2 = 5;
+var STUDIO_MIN_HEIGHT_PCT2 = 5;
+var STUDIO_MIN_HEIGHT_PX2 = 20;
+var NOOP_RUNTIME2 = {
+  get: () => void 0,
+  dispatch: () => void 0
+};
+var EMPTY_UI_REGISTRY2 = {};
+var EMPTY_INLINE_MEMBERSHIP = Object.freeze({
+  Form: /* @__PURE__ */ new Set(),
+  FormWizard: /* @__PURE__ */ new Set(),
+  StepForm: /* @__PURE__ */ new Set()
+});
+var isFormInteractiveTarget2 = (_target) => false;
+var createStaticRef = (value) => ({
+  current: value
+});
+var NOOP_SETTER = (_value) => void 0;
+var StaticReactWebEngineRoot = ({
+  schema,
+  registry = EMPTY_UI_REGISTRY2,
+  store,
+  nodeWrapper,
+  dependencies
+}) => {
+  const runtime = store != null ? store : NOOP_RUNTIME2;
+  const NodeWrapper = nodeWrapper != null ? nodeWrapper : dependencies.StudioNodeWrapper;
+  const setInlineEditing = NOOP_SETTER;
+  const setDropdownOpenByNodeId = NOOP_SETTER;
+  const setWizardActiveStepByNodeId = NOOP_SETTER;
+  const setAccordionOpenIdsByNodeId = NOOP_SETTER;
+  const setExpandablePanelOpenByNodeId = NOOP_SETTER;
+  const resizeStateRef = createStaticRef(null);
+  const pinchStateRef = createStaticRef(null);
+  const overlaysByNodeId = {};
+  const isStudioRendererContext = false;
+  const renderNode = (node, studioSizing) => renderReactNode({
+    node,
+    runtime,
+    registry,
+    schemaNodes: schema.nodes,
+    renderSafeNode: renderSafeEngineNode,
+    internalStudioNodeTypes: INTERNAL_STUDIO_NODE_TYPES2,
+    overlaysByNodeId,
+    onInlineTextEdit: void 0,
+    isStudioRendererContext,
+    dropdownOpenByNodeId: {},
+    setDropdownOpenByNodeId,
+    captureFieldFocus: () => void 0,
+    selectedNodeId: null,
+    wizardActiveStepByNodeId: {},
+    accordionOpenIdsByNodeId: {},
+    expandablePanelOpenByNodeId: {},
+    setWizardActiveStepByNodeId,
+    setAccordionOpenIdsByNodeId,
+    setExpandablePanelOpenByNodeId,
+    onNodeClick: void 0,
+    setInlineEditing,
+    studioSizing,
+    dependencies: dependencies.renderReactNodeDependencies
+  });
+  const renderSafeEngineNode = (node) => dependencies.renderSafeNode({
+    node,
+    registry,
+    runtime,
+    schemaNodes: schema.nodes,
+    renderNode,
+    isStudioRendererContext,
+    overlaysByNodeId,
+    selectedNodeId: null,
+    onNodeClick: void 0,
+    onInlineTextEdit: void 0,
+    onNodeResize: void 0,
+    onNodeResizeStart: void 0,
+    onNodeResizeEnd: void 0,
+    inlineEditing: null,
+    setInlineEditing,
+    ancestorTypeMembership: EMPTY_INLINE_MEMBERSHIP,
+    resizeStateRef,
+    pinchStateRef,
+    minWidthPct: STUDIO_MIN_WIDTH_PCT2,
+    minHeightPct: STUDIO_MIN_HEIGHT_PCT2,
+    minHeightPx: STUDIO_MIN_HEIGHT_PX2,
+    overlayRootId: STUDIO_CANVAS_OVERLAY_ROOT_ID2,
+    NodeWrapper,
+    isFormInteractiveTarget: isFormInteractiveTarget2
+  });
+  return /* @__PURE__ */ jsx10("div", { className: "flex h-full min-w-0 w-full flex-wrap content-start items-start gap-3", children: schema.nodes.map((node) => /* @__PURE__ */ jsx10(React8.Fragment, { children: renderSafeEngineNode(node) }, node.id)) });
+};
+
 // src/hooks/useUIEngineEffects.ts
 import { useEffect, useLayoutEffect, useMemo } from "react";
 var useUIEngineEffects = ({
@@ -968,8 +1063,8 @@ var useUIEngineEffects = ({
 };
 
 // src/materialization/contentStudio.tsx
-import React8 from "react";
-import { Fragment as Fragment3, jsx as jsx10 } from "react/jsx-runtime";
+import React9 from "react";
+import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
 var COVER_MEDIA_FRAME_CLASSNAME = "h-56 w-full overflow-hidden rounded-xl bg-surface ring-1 ring-border/60";
 var buildCoverMedia = ({
   mediaSource,
@@ -978,7 +1073,7 @@ var buildCoverMedia = ({
 }) => {
   if (mediaSource === "none") return void 0;
   if (mediaSource === "image" && mediaSrc) {
-    return /* @__PURE__ */ jsx10("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx11(
       "img",
       {
         src: mediaSrc,
@@ -988,7 +1083,7 @@ var buildCoverMedia = ({
     ) });
   }
   if (mediaSource === "video" && mediaSrc) {
-    return /* @__PURE__ */ jsx10("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx11(
       "video",
       {
         src: mediaSrc,
@@ -1006,11 +1101,11 @@ var buildCoverContent = ({
 }) => {
   const actionChildren = rawChildren.filter((child) => child.type === "Button" || child.type === "Link");
   const contentChildren = rawChildren.filter((child) => child.type !== "Button" && child.type !== "Link");
-  const resolvedActionChildren = actionChildren.map((child) => /* @__PURE__ */ jsx10("span", { className: "inline-flex align-middle", children: renderSafeNode(child) }, child.id));
-  const resolvedContentChildren = contentChildren.map((child) => /* @__PURE__ */ jsx10(React8.Fragment, { children: renderSafeNode(child) }, child.id));
+  const resolvedActionChildren = actionChildren.map((child) => /* @__PURE__ */ jsx11("span", { className: "inline-flex align-middle", children: renderSafeNode(child) }, child.id));
+  const resolvedContentChildren = contentChildren.map((child) => /* @__PURE__ */ jsx11(React9.Fragment, { children: renderSafeNode(child) }, child.id));
   return {
-    actions: resolvedActionChildren.length > 0 ? resolvedActionChildren.length === 1 ? resolvedActionChildren[0] : /* @__PURE__ */ jsx10(Fragment3, { children: resolvedActionChildren }) : void 0,
-    children: resolvedContentChildren.length > 0 ? resolvedContentChildren.length === 1 ? resolvedContentChildren[0] : /* @__PURE__ */ jsx10(Fragment3, { children: resolvedContentChildren }) : null
+    actions: resolvedActionChildren.length > 0 ? resolvedActionChildren.length === 1 ? resolvedActionChildren[0] : /* @__PURE__ */ jsx11(Fragment3, { children: resolvedActionChildren }) : void 0,
+    children: resolvedContentChildren.length > 0 ? resolvedContentChildren.length === 1 ? resolvedContentChildren[0] : /* @__PURE__ */ jsx11(Fragment3, { children: resolvedContentChildren }) : null
   };
 };
 var buildScrollRevealChildren = ({
@@ -1020,13 +1115,13 @@ var buildScrollRevealChildren = ({
   fallbackChildren
 }) => {
   if (rawChildren.length > 0) {
-    return rawChildren.length === 1 ? /* @__PURE__ */ jsx10(React8.Fragment, { children: renderSafeNode(rawChildren[0]) }, rawChildren[0].id) : /* @__PURE__ */ jsx10(Fragment3, { children: rawChildren.map((child) => /* @__PURE__ */ jsx10(React8.Fragment, { children: renderSafeNode(child) }, child.id)) });
+    return rawChildren.length === 1 ? /* @__PURE__ */ jsx11(React9.Fragment, { children: renderSafeNode(rawChildren[0]) }, rawChildren[0].id) : /* @__PURE__ */ jsx11(Fragment3, { children: rawChildren.map((child) => /* @__PURE__ */ jsx11(React9.Fragment, { children: renderSafeNode(child) }, child.id)) });
   }
   return normalizeRenderableChild2(fallbackChildren);
 };
 
 // src/materialization/materializeBoundTable.tsx
-import React9 from "react";
+import React10 from "react";
 
 // src/rendering/resolveBoundTableData.ts
 var resolveBoundTableData = ({
@@ -1117,16 +1212,16 @@ var materializeBoundTable = ({
   delete componentProps.useBindingData;
   if (columns.length === 0) return null;
   delete componentProps.children;
-  const headerNode = React9.createElement(
+  const headerNode = React10.createElement(
     TableComponent.Header,
     null,
-    React9.createElement(
+    React10.createElement(
       TableComponent.Row,
       null,
       ...columns.map(
         (column, columnIndex) => {
           var _a, _b, _c;
-          return React9.createElement(
+          return React10.createElement(
             TableComponent.Head,
             { key: `table-head-${String((_a = column.key) != null ? _a : columnIndex)}` },
             String((_c = (_b = column.header) != null ? _b : column.key) != null ? _c : `Column ${columnIndex + 1}`)
@@ -1135,20 +1230,20 @@ var materializeBoundTable = ({
       )
     )
   );
-  const bodyNode = React9.createElement(
+  const bodyNode = React10.createElement(
     TableComponent.Body,
     null,
     ...pagedRows.map(
       (row, rowIndex) => {
         var _a;
-        return React9.createElement(
+        return React10.createElement(
           TableComponent.Row,
           { key: `table-row-${String((_a = row.id) != null ? _a : rowIndex)}` },
           ...columns.map((column, columnIndex) => {
             var _a2, _b;
             const key = String((_a2 = column.key) != null ? _a2 : "").trim();
             const value = key ? row[key] : "";
-            return React9.createElement(
+            return React10.createElement(
               TableComponent.Cell,
               { key: `table-cell-${String((_b = row.id) != null ? _b : rowIndex)}-${key || columnIndex}` },
               value == null ? "" : String(value)
@@ -1158,7 +1253,7 @@ var materializeBoundTable = ({
       }
     )
   );
-  return React9.createElement(
+  return React10.createElement(
     TableComponent,
     omitInternalProps(componentProps),
     headerNode,
@@ -1167,25 +1262,25 @@ var materializeBoundTable = ({
 };
 
 // src/materialization/navigationStudio.tsx
-import React10 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import React11 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var buildAccordionItems = (accordionChildren, renderSafeNode) => accordionChildren.map((child, index) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const childProps = (_a = child.props) != null ? _a : {};
   return {
     id: String((_c = (_b = childProps.id) != null ? _b : child.id) != null ? _c : `item-${index + 1}`),
     title: String((_d = childProps.title) != null ? _d : `Section ${index + 1}`),
-    content: ((_e = child.children) != null ? _e : []).length > 0 ? /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: ((_f = child.children) != null ? _f : []).map((nested) => /* @__PURE__ */ jsx11(React10.Fragment, { children: renderSafeNode(nested) }, nested.id)) }) : String((_g = childProps.content) != null ? _g : ""),
+    content: ((_e = child.children) != null ? _e : []).length > 0 ? /* @__PURE__ */ jsx12("div", { className: "space-y-2", children: ((_f = child.children) != null ? _f : []).map((nested) => /* @__PURE__ */ jsx12(React11.Fragment, { children: renderSafeNode(nested) }, nested.id)) }) : String((_g = childProps.content) != null ? _g : ""),
     disabled: Boolean(childProps.disabled)
   };
 });
 var buildExpandablePanelChildren = (panelChildren, renderSafeNode) => {
   if (panelChildren.length === 0) return void 0;
-  return /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: panelChildren.map((child) => /* @__PURE__ */ jsx11(React10.Fragment, { children: renderSafeNode(child) }, child.id)) });
+  return /* @__PURE__ */ jsx12("div", { className: "space-y-2", children: panelChildren.map((child) => /* @__PURE__ */ jsx12(React11.Fragment, { children: renderSafeNode(child) }, child.id)) });
 };
 
 // src/rendering/finalizeRenderedNode.tsx
-import React11 from "react";
+import React12 from "react";
 
 // src/rendering/previewLinkBehavior.ts
 var configurePreviewLinkBehavior = (componentProps) => {
@@ -1199,6 +1294,11 @@ var configurePreviewLinkBehavior = (componentProps) => {
 };
 
 // src/rendering/finalizeRenderedNode.tsx
+var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
+var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
+var hasExplicitStudioSizing = (studioSizing) => Boolean(
+  studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
+);
 var finalizeRenderedNode = ({
   node,
   children,
@@ -1210,6 +1310,10 @@ var finalizeRenderedNode = ({
   plans: providedPlans,
   dependencies
 }) => {
+  if (RESPONSIVE_MEDIA_NODE_TYPES.has(node.type) && hasExplicitStudioSizing(studioSizing)) {
+    const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
+    componentProps.className = [currentClassName, RESPONSIVE_MEDIA_CLASS_NAME].filter(Boolean).join(" ");
+  }
   const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
     node,
     componentProps,
@@ -1247,11 +1351,11 @@ var finalizeRenderedNode = ({
   const finalComponentProps = dependencies.omitStudioProps(componentProps);
   if (children && children.length > 0) {
     if (node.type === "Cover" || node.type === "Tabs" || node.type === "Accordion") {
-      return React11.createElement(registryComponent, finalComponentProps);
+      return React12.createElement(registryComponent, finalComponentProps);
     }
-    return React11.createElement(registryComponent, finalComponentProps, children);
+    return React12.createElement(registryComponent, finalComponentProps, children);
   }
-  return React11.createElement(registryComponent, finalComponentProps);
+  return React12.createElement(registryComponent, finalComponentProps);
 };
 
 // src/rendering/nodeResetToken.ts
@@ -1283,8 +1387,8 @@ var buildNodeResetToken = (node) => {
 };
 
 // src/rendering/renderChildren.tsx
-import React12, { isValidElement as isValidElement2 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import React13, { isValidElement as isValidElement2 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var toBoolean = (value) => {
   if (typeof value === "boolean") return value;
   if (typeof value === "string") return value.toLowerCase() === "true";
@@ -1295,7 +1399,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__ */ jsx12(React12.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
+    return value.map((item, index) => /* @__PURE__ */ jsx13(React13.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
   }
   if (value && typeof value === "object") {
     const candidate = value;
@@ -1342,6 +1446,7 @@ export {
   EngineWarningFallback_default as EngineWarningFallback,
   NodeErrorBoundary,
   ReactWebEngineRoot,
+  StaticReactWebEngineRoot,
   applyContentComposition,
   applyNavigationComposition,
   applyRenderDirectives,

package/dist/rendering.js

@@ -174,6 +174,11 @@ var materializeBoundTable = ({
 };
 
 // src/rendering/finalizeRenderedNode.tsx
+var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
+var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
+var hasExplicitStudioSizing = (studioSizing) => Boolean(
+  studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
+);
 var finalizeRenderedNode = ({
   node,
   children,
@@ -185,6 +190,10 @@ var finalizeRenderedNode = ({
   plans: providedPlans,
   dependencies
 }) => {
+  if (RESPONSIVE_MEDIA_NODE_TYPES.has(node.type) && hasExplicitStudioSizing(studioSizing)) {
+    const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
+    componentProps.className = [currentClassName, RESPONSIVE_MEDIA_CLASS_NAME].filter(Boolean).join(" ");
+  }
   const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
     node,
     componentProps,

package/dist/static-engine.d.ts

@@ -0,0 +1,49 @@
+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';
+import { UIRuntimeAdapter } from '@arkcit/engine-runtime';
+import { r as renderReactNode } from './renderReactNode-DmxD8hot.js';
+import '@arkcit/engine-render-layer';
+
+type RenderSafeNodeArgs<TInlineEditing> = {
+    node: UINode;
+    registry: NonNullable<UIEngineProps["registry"]>;
+    runtime: UIRuntimeAdapter;
+    schemaNodes: UINode[];
+    renderNode: (node: UINode, studioSizing?: {
+        widthPct: number | null;
+        heightPct: number | null;
+        heightPx: number | null;
+    }) => React__default.ReactNode;
+    isStudioRendererContext: boolean;
+    overlaysByNodeId: Record<string, unknown>;
+    selectedNodeId: string | null;
+    onNodeClick: UIEngineProps["onNodeClick"];
+    onInlineTextEdit: UIEngineProps["onInlineTextEdit"];
+    onNodeResize: UIEngineProps["onNodeResize"];
+    onNodeResizeStart: UIEngineProps["onNodeResizeStart"];
+    onNodeResizeEnd: UIEngineProps["onNodeResizeEnd"];
+    inlineEditing: TInlineEditing | null;
+    setInlineEditing: React__default.Dispatch<React__default.SetStateAction<TInlineEditing | null>>;
+    ancestorTypeMembership: Record<string, Set<string>>;
+    resizeStateRef: React__default.MutableRefObject<unknown>;
+    pinchStateRef: React__default.MutableRefObject<unknown>;
+    minWidthPct: number;
+    minHeightPct: number;
+    minHeightPx: number;
+    overlayRootId: string;
+    NodeWrapper: React__default.ComponentType<UINodeWrapperProps>;
+    isFormInteractiveTarget: (target: HTMLElement | null) => boolean;
+};
+type StaticReactWebEngineRootDependencies<TInlineEditing> = {
+    renderSafeNode: (args: RenderSafeNodeArgs<TInlineEditing>) => React__default.ReactNode;
+    StudioNodeWrapper: React__default.ComponentType<UINodeWrapperProps>;
+    renderReactNodeDependencies: Parameters<typeof renderReactNode<TInlineEditing>>[0]["dependencies"];
+};
+type StaticReactWebEngineRootArgs<TInlineEditing> = UIEngineProps & {
+    dependencies: StaticReactWebEngineRootDependencies<TInlineEditing>;
+};
+declare const StaticReactWebEngineRoot: <TInlineEditing = unknown>({ schema, registry, store, nodeWrapper, dependencies, }: StaticReactWebEngineRootArgs<TInlineEditing>) => react_jsx_runtime.JSX.Element;
+
+export { StaticReactWebEngineRoot };

package/dist/static-engine.js

@@ -0,0 +1,375 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/engine/StaticReactWebEngineRoot.tsx
+import React3 from "react";
+
+// src/engine/EngineWarningFallback.tsx
+import { jsx } from "react/jsx-runtime";
+var EngineWarningFallback = ({ message }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "alert",
+    className: "rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900",
+    children: message
+  }
+);
+var EngineWarningFallback_default = EngineWarningFallback;
+
+// src/rendering/resolveResolvedReactNode.ts
+import {
+  resolveResolvedNode
+} from "@arkcit/engine-render-layer";
+
+// src/rendering/prepareRenderableChildren.tsx
+import React2 from "react";
+import {
+  resolveChildContentDescriptor,
+  resolveChildDescriptors
+} from "@arkcit/engine-render-layer";
+
+// src/rendering/gridItemWrapperProps.ts
+var getGridItemWrapperProps = (colSpan) => ({
+  className: "w-full min-w-0",
+  style: {
+    gridColumn: `span ${colSpan} / span ${colSpan}`
+  }
+});
+
+// src/materialization/materializeChildContent.tsx
+import React from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var materializeChildContent = ({
+  descriptor,
+  renderSafeNode
+}) => {
+  if (descriptor.kind === "empty") {
+    return null;
+  }
+  const renderDescriptor = (childDescriptor) => {
+    if (childDescriptor.kind === "grid-item") {
+      return /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
+    }
+    return /* @__PURE__ */ jsx2(React.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
+  };
+  if (descriptor.kind === "single") {
+    return renderDescriptor(descriptor.child);
+  }
+  return /* @__PURE__ */ jsx2(Fragment, { children: descriptor.children.map(renderDescriptor) });
+};
+
+// src/rendering/prepareRenderableChildren.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var prepareRenderableChildren = ({
+  node,
+  internalStudioNodeTypes,
+  renderSafeNode,
+  childDescriptors,
+  childContentDescriptor
+}) => {
+  const resolvedDescriptors = childDescriptors != null ? childDescriptors : resolveChildDescriptors({
+    node,
+    internalStudioNodeTypes
+  });
+  const children = resolvedDescriptors.map((descriptor) => {
+    if (descriptor.kind === "grid-item") {
+      return /* @__PURE__ */ jsx3("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(descriptor.colSpan)), { children: renderSafeNode(descriptor.child) }), descriptor.child.id);
+    }
+    return /* @__PURE__ */ jsx3(React2.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
+  });
+  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
+    childDescriptors: resolvedDescriptors
+  });
+  const resolvedChildContent = materializeChildContent({
+    descriptor: resolvedChildContentDescriptor,
+    renderSafeNode
+  });
+  return {
+    children,
+    resolvedChildContent,
+    childDescriptors: resolvedDescriptors,
+    childContentDescriptor: resolvedChildContentDescriptor
+  };
+};
+
+// src/rendering/resolveResolvedReactNode.ts
+var resolveResolvedReactNode = ({
+  node,
+  runtime,
+  registry,
+  internalStudioNodeTypes,
+  renderSafeNode,
+  isStudioRendererContext,
+  studioSizing
+}) => {
+  const registryEntry = registry[node.type];
+  if (!registryEntry) {
+    return null;
+  }
+  const resolvedNode = resolveResolvedNode({
+    node,
+    runtime,
+    internalStudioNodeTypes,
+    isStudioRendererContext,
+    studioSizing
+  });
+  const { children, resolvedChildContent } = prepareRenderableChildren({
+    node,
+    internalStudioNodeTypes,
+    renderSafeNode,
+    childDescriptors: resolvedNode.childDescriptors,
+    childContentDescriptor: resolvedNode.childContentDescriptor
+  });
+  return __spreadProps(__spreadValues({}, resolvedNode), {
+    registryEntry,
+    children,
+    resolvedChildContent
+  });
+};
+
+// src/rendering/renderReactNode.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var renderReactNode = ({
+  node,
+  runtime,
+  registry,
+  schemaNodes,
+  renderSafeNode,
+  internalStudioNodeTypes,
+  overlaysByNodeId,
+  onInlineTextEdit,
+  isStudioRendererContext,
+  dropdownOpenByNodeId,
+  setDropdownOpenByNodeId,
+  captureFieldFocus,
+  selectedNodeId,
+  wizardActiveStepByNodeId,
+  accordionOpenIdsByNodeId,
+  expandablePanelOpenByNodeId,
+  setWizardActiveStepByNodeId,
+  setAccordionOpenIdsByNodeId,
+  setExpandablePanelOpenByNodeId,
+  onNodeClick,
+  setInlineEditing,
+  studioSizing,
+  dependencies
+}) => {
+  try {
+    const resolvedNode = resolveResolvedReactNode({
+      node,
+      runtime,
+      registry,
+      internalStudioNodeTypes,
+      renderSafeNode,
+      isStudioRendererContext,
+      studioSizing
+    });
+    if (!resolvedNode) {
+      return /* @__PURE__ */ jsx4(
+        EngineWarningFallback_default,
+        {
+          message: `Unknown component type "${node.type}" for node "${node.id}".`
+        }
+      );
+    }
+    const {
+      registryEntry,
+      componentProps,
+      renderBindingProps,
+      children,
+      resolvedChildContent,
+      contentPlans,
+      navigationPlans,
+      renderDirectivePlans,
+      finalRenderPlans
+    } = resolvedNode;
+    dependencies.applyStudioOverlayComponentProps({
+      node,
+      componentProps,
+      runtime,
+      overlaysByNodeId,
+      renderBindingProps,
+      resolvedChildContent,
+      onInlineTextEdit,
+      isStudioRendererContext,
+      dropdownOpenByNodeId,
+      setDropdownOpenByNodeId
+    });
+    const contentNode = dependencies.applyContentComposition({
+      node,
+      componentProps,
+      isStudioRendererContext,
+      internalStudioNodeTypes,
+      schemaNodes,
+      onInlineTextEdit,
+      captureFieldFocus,
+      renderSafeNode,
+      normalizeRenderableChild: dependencies.normalizeRenderableChild,
+      findNodeById: dependencies.findNodeById,
+      runtime,
+      plans: contentPlans
+    });
+    if (contentNode) {
+      return contentNode;
+    }
+    dependencies.applyRenderDirectives({
+      node,
+      componentProps,
+      renderBindingProps,
+      runtime,
+      plans: renderDirectivePlans
+    });
+    dependencies.applyNavigationComposition({
+      node,
+      componentProps,
+      isStudioRendererContext,
+      selectedNodeId: selectedNodeId != null ? selectedNodeId : null,
+      wizardActiveStepByNodeId,
+      accordionOpenIdsByNodeId,
+      expandablePanelOpenByNodeId,
+      runtime,
+      setWizardActiveStepByNodeId,
+      setAccordionOpenIdsByNodeId,
+      setExpandablePanelOpenByNodeId,
+      onNodeClick,
+      onInlineTextEdit,
+      renderSafeNode,
+      normalizeRenderableChild: dependencies.normalizeRenderableChild,
+      captureFieldFocus,
+      setInlineEditing,
+      internalStudioNodeTypes,
+      plans: navigationPlans
+    });
+    return dependencies.finalizeRenderedNode({
+      node,
+      children,
+      componentProps,
+      registryComponent: registryEntry.Component,
+      runtime,
+      isStudioRendererContext,
+      studioSizing,
+      plans: finalRenderPlans
+    });
+  } catch (e) {
+    return /* @__PURE__ */ jsx4(
+      EngineWarningFallback_default,
+      {
+        message: `Renderer fallback: node "${node.type}" (${node.id}) could not be resolved.`
+      }
+    );
+  }
+};
+
+// src/engine/StaticReactWebEngineRoot.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var INTERNAL_STUDIO_NODE_TYPES = /* @__PURE__ */ new Set();
+var STUDIO_CANVAS_OVERLAY_ROOT_ID = "studio-canvas-overlay-root";
+var STUDIO_MIN_WIDTH_PCT = 5;
+var STUDIO_MIN_HEIGHT_PCT = 5;
+var STUDIO_MIN_HEIGHT_PX = 20;
+var NOOP_RUNTIME = {
+  get: () => void 0,
+  dispatch: () => void 0
+};
+var EMPTY_UI_REGISTRY = {};
+var EMPTY_INLINE_MEMBERSHIP = Object.freeze({
+  Form: /* @__PURE__ */ new Set(),
+  FormWizard: /* @__PURE__ */ new Set(),
+  StepForm: /* @__PURE__ */ new Set()
+});
+var isFormInteractiveTarget = (_target) => false;
+var createStaticRef = (value) => ({
+  current: value
+});
+var NOOP_SETTER = (_value) => void 0;
+var StaticReactWebEngineRoot = ({
+  schema,
+  registry = EMPTY_UI_REGISTRY,
+  store,
+  nodeWrapper,
+  dependencies
+}) => {
+  const runtime = store != null ? store : NOOP_RUNTIME;
+  const NodeWrapper = nodeWrapper != null ? nodeWrapper : dependencies.StudioNodeWrapper;
+  const setInlineEditing = NOOP_SETTER;
+  const setDropdownOpenByNodeId = NOOP_SETTER;
+  const setWizardActiveStepByNodeId = NOOP_SETTER;
+  const setAccordionOpenIdsByNodeId = NOOP_SETTER;
+  const setExpandablePanelOpenByNodeId = NOOP_SETTER;
+  const resizeStateRef = createStaticRef(null);
+  const pinchStateRef = createStaticRef(null);
+  const overlaysByNodeId = {};
+  const isStudioRendererContext = false;
+  const renderNode = (node, studioSizing) => renderReactNode({
+    node,
+    runtime,
+    registry,
+    schemaNodes: schema.nodes,
+    renderSafeNode: renderSafeEngineNode,
+    internalStudioNodeTypes: INTERNAL_STUDIO_NODE_TYPES,
+    overlaysByNodeId,
+    onInlineTextEdit: void 0,
+    isStudioRendererContext,
+    dropdownOpenByNodeId: {},
+    setDropdownOpenByNodeId,
+    captureFieldFocus: () => void 0,
+    selectedNodeId: null,
+    wizardActiveStepByNodeId: {},
+    accordionOpenIdsByNodeId: {},
+    expandablePanelOpenByNodeId: {},
+    setWizardActiveStepByNodeId,
+    setAccordionOpenIdsByNodeId,
+    setExpandablePanelOpenByNodeId,
+    onNodeClick: void 0,
+    setInlineEditing,
+    studioSizing,
+    dependencies: dependencies.renderReactNodeDependencies
+  });
+  const renderSafeEngineNode = (node) => dependencies.renderSafeNode({
+    node,
+    registry,
+    runtime,
+    schemaNodes: schema.nodes,
+    renderNode,
+    isStudioRendererContext,
+    overlaysByNodeId,
+    selectedNodeId: null,
+    onNodeClick: void 0,
+    onInlineTextEdit: void 0,
+    onNodeResize: void 0,
+    onNodeResizeStart: void 0,
+    onNodeResizeEnd: void 0,
+    inlineEditing: null,
+    setInlineEditing,
+    ancestorTypeMembership: EMPTY_INLINE_MEMBERSHIP,
+    resizeStateRef,
+    pinchStateRef,
+    minWidthPct: STUDIO_MIN_WIDTH_PCT,
+    minHeightPct: STUDIO_MIN_HEIGHT_PCT,
+    minHeightPx: STUDIO_MIN_HEIGHT_PX,
+    overlayRootId: STUDIO_CANVAS_OVERLAY_ROOT_ID,
+    NodeWrapper,
+    isFormInteractiveTarget
+  });
+  return /* @__PURE__ */ jsx5("div", { className: "flex h-full min-w-0 w-full flex-wrap content-start items-start gap-3", children: schema.nodes.map((node) => /* @__PURE__ */ jsx5(React3.Fragment, { children: renderSafeEngineNode(node) }, node.id)) });
+};
+export {
+  StaticReactWebEngineRoot
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arkcit/engine-react",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "sideEffects": false,
   "description": "React-specific renderer package for the Arkcit engine platform.",
@@ -35,6 +35,11 @@
       "import": "./dist/engine.js",
       "default": "./dist/engine.js"
     },
+    "./static-engine": {
+      "types": "./dist/static-engine.d.ts",
+      "import": "./dist/static-engine.js",
+      "default": "./dist/static-engine.js"
+    },
     "./hooks": {
       "types": "./dist/hooks.d.ts",
       "import": "./dist/hooks.js",