@arkcit/engine-react 0.3.9 → 0.3.10

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

@@ -436,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 {
@@ -765,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();
@@ -872,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,
@@ -936,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
@@ -1031,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,
@@ -1063,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;

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.9",
+  "version": "0.3.10",
   "type": "module",
   "sideEffects": false,
   "description": "React-specific renderer package for the Arkcit engine platform.",