@arkcit/engine-react 0.3.8 → 0.3.10

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/engine.js

@@ -58,7 +58,7 @@ var NodeErrorBoundary = class extends React.Component {
 };
 
 // src/engine/ReactWebEngineRoot.tsx
-import React4, { useRef, useState as useState2 } from "react";
+import React4, { useEffect, useRef, useState as useState2 } from "react";
 
 // src/rendering/resolveResolvedReactNode.ts
 import {
@@ -387,6 +387,111 @@ var useUIEngineState = () => {
   };
 };
 
+// src/engine/tablistController.ts
+var TAB_ACTION_SELECTOR = '[role="tab"],[data-saas-preview-tab-panel-id]';
+var asHTMLElement = (value) => value instanceof HTMLElement ? value : null;
+var closestHTMLElement = (target, selector) => {
+  const element = target;
+  return typeof (element == null ? void 0 : element.closest) === "function" ? asHTMLElement(element.closest(selector)) : null;
+};
+var queryByIdOrNodeId = (root, id) => {
+  var _a, _b;
+  if (!id) return null;
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    const escapedId = CSS.escape(id);
+    return asHTMLElement(root.querySelector(`#${escapedId},[data-node-id="${escapedId}"]`));
+  }
+  return (_b = (_a = Array.from(root.querySelectorAll("[id]")).find((element) => element.id === id)) != null ? _a : Array.from(root.querySelectorAll("[data-node-id]")).find(
+    (element) => element.getAttribute("data-node-id") === id
+  )) != null ? _b : null;
+};
+var readHashTargetId = (element) => {
+  var _a, _b;
+  const href = (_b = (_a = element.getAttribute("href")) == null ? void 0 : _a.trim()) != null ? _b : "";
+  const hashIndex = href.indexOf("#");
+  return hashIndex >= 0 ? href.slice(hashIndex + 1).trim() : "";
+};
+var readTabPanelId = (element) => {
+  var _a, _b;
+  return ((_a = element.getAttribute("data-saas-preview-tab-panel-id")) == null ? void 0 : _a.trim()) || ((_b = element.getAttribute("aria-controls")) == null ? void 0 : _b.trim()) || readHashTargetId(element);
+};
+var readTabSectionId = (element) => {
+  var _a, _b, _c;
+  return ((_a = element.getAttribute("data-saas-preview-tab-section-id")) == null ? void 0 : _a.trim()) || ((_c = (_b = element.closest("[data-saas-preview-tab-section-id]")) == null ? void 0 : _b.getAttribute("data-saas-preview-tab-section-id")) == null ? void 0 : _c.trim()) || "";
+};
+var isDisabledTabAction = (element) => element.getAttribute("aria-disabled") === "true" || element instanceof HTMLButtonElement && element.disabled;
+var getTabListTabs = (tabList) => Array.from(tabList.querySelectorAll('[role="tab"]')).filter(
+  (tab) => tab.closest('[role="tablist"]') === tabList
+);
+var findMatchingTab = (root, action) => {
+  var _a;
+  const panelId = readTabPanelId(action);
+  if (!panelId) return null;
+  const sectionId = readTabSectionId(action);
+  return (_a = Array.from(root.querySelectorAll('[role="tab"]')).find((tab) => {
+    if (readTabPanelId(tab) !== panelId) return false;
+    return !sectionId || readTabSectionId(tab) === sectionId;
+  })) != null ? _a : null;
+};
+var applyTablistSelection = (root, activeTab) => {
+  const tabList = activeTab.closest('[role="tablist"]');
+  if (!tabList || !root.contains(tabList)) return false;
+  const tabs = getTabListTabs(tabList);
+  if (!tabs.includes(activeTab) || isDisabledTabAction(activeTab)) return true;
+  const panelByTab = /* @__PURE__ */ new Map();
+  for (const tab of tabs) {
+    const panel = queryByIdOrNodeId(root, readTabPanelId(tab));
+    if (panel) {
+      panelByTab.set(tab, panel);
+    }
+  }
+  const activePanel = panelByTab.get(activeTab);
+  if (!activePanel || panelByTab.size === 0) return false;
+  for (const tab of tabs) {
+    const selected = tab === activeTab;
+    tab.setAttribute("aria-selected", selected ? "true" : "false");
+    tab.tabIndex = selected ? 0 : -1;
+  }
+  for (const panel of panelByTab.values()) {
+    const selected = panel === activePanel;
+    panel.hidden = !selected;
+    panel.setAttribute("aria-hidden", selected ? "false" : "true");
+    if (selected) {
+      panel.style.removeProperty("display");
+    } else {
+      panel.style.display = "none";
+    }
+  }
+  return true;
+};
+var initializeTablistPanels = (root) => {
+  var _a, _b;
+  const tabLists = Array.from(root.querySelectorAll('[role="tablist"]'));
+  for (const tabList of tabLists) {
+    const tabs = getTabListTabs(tabList);
+    const activeTab = (_b = (_a = tabs.find(
+      (tab) => tab.getAttribute("aria-selected") === "true" && !isDisabledTabAction(tab)
+    )) != null ? _a : tabs.find((tab) => !isDisabledTabAction(tab))) != null ? _b : null;
+    if (activeTab) {
+      applyTablistSelection(root, activeTab);
+    }
+  }
+};
+var bindTablistController = (root) => {
+  initializeTablistPanels(root);
+  const handleClick = (event) => {
+    const action = closestHTMLElement(event.target, TAB_ACTION_SELECTOR);
+    if (!action || !root.contains(action) || isDisabledTabAction(action)) return;
+    const tab = action.getAttribute("role") === "tab" ? action : findMatchingTab(root, action);
+    if (!tab || !applyTablistSelection(root, tab)) return;
+    event.preventDefault();
+  };
+  root.addEventListener("click", handleClick, true);
+  return () => {
+    root.removeEventListener("click", handleClick, true);
+  };
+};
+
 // src/engine/ReactWebEngineRoot.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var INTERNAL_STUDIO_NODE_TYPES = /* @__PURE__ */ new Set();
@@ -494,6 +599,7 @@ var ReactWebEngineRoot = ({
   const resizeStateRef = useRef(null);
   const pinchStateRef = useRef(null);
   const pendingFieldFocusRef = useRef(null);
+  const rootRef = useRef(null);
   const { ancestorTypeMembership, overlaysByNodeId, captureFieldFocus } = dependencies.useUIEngineEffects({
     schema,
     runtime,
@@ -558,7 +664,19 @@ var ReactWebEngineRoot = ({
     InlineTextEditorComponent: InlineTextEditor,
     isFormInteractiveTarget
   });
-  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)) });
+  useEffect(() => {
+    const root = rootRef.current;
+    return root ? bindTablistController(root) : void 0;
+  }, [schema]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref: rootRef,
+      "data-arkcit-engine-root": true,
+      className: "flex 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
@@ -653,7 +771,14 @@ var StaticReactWebEngineRoot = ({
     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)) });
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-arkcit-engine-root": true,
+      className: "flex 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,

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,
@@ -435,7 +436,7 @@ var NodeErrorBoundary = class extends React4.Component {
 };
 
 // src/engine/ReactWebEngineRoot.tsx
-import React7, { useRef, useState as useState2 } from "react";
+import React7, { useEffect, useRef, useState as useState2 } from "react";
 
 // src/rendering/resolveResolvedReactNode.ts
 import {
@@ -764,6 +765,111 @@ var useUIEngineState = () => {
   };
 };
 
+// src/engine/tablistController.ts
+var TAB_ACTION_SELECTOR = '[role="tab"],[data-saas-preview-tab-panel-id]';
+var asHTMLElement = (value) => value instanceof HTMLElement ? value : null;
+var closestHTMLElement = (target, selector) => {
+  const element = target;
+  return typeof (element == null ? void 0 : element.closest) === "function" ? asHTMLElement(element.closest(selector)) : null;
+};
+var queryByIdOrNodeId = (root, id) => {
+  var _a, _b;
+  if (!id) return null;
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    const escapedId = CSS.escape(id);
+    return asHTMLElement(root.querySelector(`#${escapedId},[data-node-id="${escapedId}"]`));
+  }
+  return (_b = (_a = Array.from(root.querySelectorAll("[id]")).find((element) => element.id === id)) != null ? _a : Array.from(root.querySelectorAll("[data-node-id]")).find(
+    (element) => element.getAttribute("data-node-id") === id
+  )) != null ? _b : null;
+};
+var readHashTargetId = (element) => {
+  var _a, _b;
+  const href = (_b = (_a = element.getAttribute("href")) == null ? void 0 : _a.trim()) != null ? _b : "";
+  const hashIndex = href.indexOf("#");
+  return hashIndex >= 0 ? href.slice(hashIndex + 1).trim() : "";
+};
+var readTabPanelId = (element) => {
+  var _a, _b;
+  return ((_a = element.getAttribute("data-saas-preview-tab-panel-id")) == null ? void 0 : _a.trim()) || ((_b = element.getAttribute("aria-controls")) == null ? void 0 : _b.trim()) || readHashTargetId(element);
+};
+var readTabSectionId = (element) => {
+  var _a, _b, _c;
+  return ((_a = element.getAttribute("data-saas-preview-tab-section-id")) == null ? void 0 : _a.trim()) || ((_c = (_b = element.closest("[data-saas-preview-tab-section-id]")) == null ? void 0 : _b.getAttribute("data-saas-preview-tab-section-id")) == null ? void 0 : _c.trim()) || "";
+};
+var isDisabledTabAction = (element) => element.getAttribute("aria-disabled") === "true" || element instanceof HTMLButtonElement && element.disabled;
+var getTabListTabs = (tabList) => Array.from(tabList.querySelectorAll('[role="tab"]')).filter(
+  (tab) => tab.closest('[role="tablist"]') === tabList
+);
+var findMatchingTab = (root, action) => {
+  var _a;
+  const panelId = readTabPanelId(action);
+  if (!panelId) return null;
+  const sectionId = readTabSectionId(action);
+  return (_a = Array.from(root.querySelectorAll('[role="tab"]')).find((tab) => {
+    if (readTabPanelId(tab) !== panelId) return false;
+    return !sectionId || readTabSectionId(tab) === sectionId;
+  })) != null ? _a : null;
+};
+var applyTablistSelection = (root, activeTab) => {
+  const tabList = activeTab.closest('[role="tablist"]');
+  if (!tabList || !root.contains(tabList)) return false;
+  const tabs = getTabListTabs(tabList);
+  if (!tabs.includes(activeTab) || isDisabledTabAction(activeTab)) return true;
+  const panelByTab = /* @__PURE__ */ new Map();
+  for (const tab of tabs) {
+    const panel = queryByIdOrNodeId(root, readTabPanelId(tab));
+    if (panel) {
+      panelByTab.set(tab, panel);
+    }
+  }
+  const activePanel = panelByTab.get(activeTab);
+  if (!activePanel || panelByTab.size === 0) return false;
+  for (const tab of tabs) {
+    const selected = tab === activeTab;
+    tab.setAttribute("aria-selected", selected ? "true" : "false");
+    tab.tabIndex = selected ? 0 : -1;
+  }
+  for (const panel of panelByTab.values()) {
+    const selected = panel === activePanel;
+    panel.hidden = !selected;
+    panel.setAttribute("aria-hidden", selected ? "false" : "true");
+    if (selected) {
+      panel.style.removeProperty("display");
+    } else {
+      panel.style.display = "none";
+    }
+  }
+  return true;
+};
+var initializeTablistPanels = (root) => {
+  var _a, _b;
+  const tabLists = Array.from(root.querySelectorAll('[role="tablist"]'));
+  for (const tabList of tabLists) {
+    const tabs = getTabListTabs(tabList);
+    const activeTab = (_b = (_a = tabs.find(
+      (tab) => tab.getAttribute("aria-selected") === "true" && !isDisabledTabAction(tab)
+    )) != null ? _a : tabs.find((tab) => !isDisabledTabAction(tab))) != null ? _b : null;
+    if (activeTab) {
+      applyTablistSelection(root, activeTab);
+    }
+  }
+};
+var bindTablistController = (root) => {
+  initializeTablistPanels(root);
+  const handleClick = (event) => {
+    const action = closestHTMLElement(event.target, TAB_ACTION_SELECTOR);
+    if (!action || !root.contains(action) || isDisabledTabAction(action)) return;
+    const tab = action.getAttribute("role") === "tab" ? action : findMatchingTab(root, action);
+    if (!tab || !applyTablistSelection(root, tab)) return;
+    event.preventDefault();
+  };
+  root.addEventListener("click", handleClick, true);
+  return () => {
+    root.removeEventListener("click", handleClick, true);
+  };
+};
+
 // src/engine/ReactWebEngineRoot.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
 var INTERNAL_STUDIO_NODE_TYPES = /* @__PURE__ */ new Set();
@@ -871,6 +977,7 @@ var ReactWebEngineRoot = ({
   const resizeStateRef = useRef(null);
   const pinchStateRef = useRef(null);
   const pendingFieldFocusRef = useRef(null);
+  const rootRef = useRef(null);
   const { ancestorTypeMembership, overlaysByNodeId, captureFieldFocus } = dependencies.useUIEngineEffects({
     schema,
     runtime,
@@ -935,7 +1042,19 @@ var ReactWebEngineRoot = ({
     InlineTextEditorComponent: InlineTextEditor,
     isFormInteractiveTarget
   });
-  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)) });
+  useEffect(() => {
+    const root = rootRef.current;
+    return root ? bindTablistController(root) : void 0;
+  }, [schema]);
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ref: rootRef,
+      "data-arkcit-engine-root": true,
+      className: "flex 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
@@ -1030,11 +1149,18 @@ var StaticReactWebEngineRoot = ({
     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)) });
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-arkcit-engine-root": true,
+      className: "flex 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";
+import { useEffect as useEffect2, useLayoutEffect, useMemo } from "react";
 var useUIEngineEffects = ({
   schema,
   runtime,
@@ -1062,13 +1188,13 @@ var useUIEngineEffects = ({
     pendingFieldFocusRef.current = null;
     dependencies.restorePendingFieldFocus(pending);
   }, [dependencies, schema, pendingFieldFocusRef]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!runtime.subscribe) return;
     return runtime.subscribe(() => {
       setVersion((previous) => previous + 1);
     });
   }, [runtime, setVersion]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!onNodeResize) return;
     const handleMouseMove = (event) => {
       const state = resizeStateRef.current;
@@ -1344,7 +1470,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 +1481,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 +1524,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 +1605,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 +1616,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 +1673,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 +1684,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/dist/static-engine.js

@@ -427,7 +427,14 @@ var StaticReactWebEngineRoot = ({
     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)) });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-arkcit-engine-root": true,
+      className: "flex 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.8",
+  "version": "0.3.10",
   "type": "module",
   "sideEffects": false,
   "description": "React-specific renderer package for the Arkcit engine platform.",