@genispace/geniapp 0.4.0 → 0.5.1

package/dist/{MultiPageRenderer-D7rlHY8l.js → MultiPageRenderer-DftFCAIJ.js}

@@ -1,56 +1,61 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import z, { useState as $, useEffect as R, useCallback as M, useMemo as I, useRef as j, useSyncExternalStore as X, useLayoutEffect as q, memo as U } from "react";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useState as C, useEffect as I, useCallback as R, useMemo as B, useRef as D, useSyncExternalStore as K, useLayoutEffect as X, memo as U } from "react";
 import { useNavigate as Q } from "react-router-dom";
-import { useTranslation as B } from "react-i18next";
+import { useTranslation as L } from "react-i18next";
 import { ChevronLeft as J, Rocket as Z, Eye as ee } from "lucide-react";
-import { aJ as F, aK as te, aB as V, av as D, E as A, aL as re, aM as ne, aN as ae, d as oe, aO as O, L as le, w as ie, aP as se, aQ as ce, aR as de, aS as ue, aT as me, i as pe, aU as he, aV as v, aW as ge, aX as fe, aY as be, aZ as xe, a_ as we, a$ as ve } from "./components/renderers/runtime-nH-w5aCf.js";
+import { a5 as z, a6 as te, a0 as V, W as O, E as G, a7 as re, a8 as ne, a9 as ae, d as oe, aa as F, L as le, w as ie, ab as se, ac as ce, ad as de, ae as ue, af as me, i as pe, ag as he, ah as y, ai as ge, aj as fe, ak as be, al as xe, am as we, an as ve } from "./components/renderers/runtime-DX1LfmqO.js";
 function ye() {
-  const [e, a] = $(F());
-  return R(() => te(() => {
-    a(F());
+  const [e, n] = C(z());
+  return I(() => te(() => {
+    n(z());
   }), []), e;
 }
-z.lazy(() => import("./Grid24EditableCanvas-C5xiiXdZ.js"));
-z.lazy(() => import("./MobileFlowCanvas-DctpXMPy.js"));
-function C(e) {
+function j(e) {
   return !!e && e.type === "grid-24";
 }
 const _e = {}, ke = ({
   components: e,
-  appConfig: a,
-  layoutConfig: n,
+  appConfig: n,
+  layoutConfig: r,
   pageParams: m,
-  pageId: r,
-  tabId: u
+  pageId: l,
+  tabId: a,
+  renderComponent: c
 }) => {
-  const c = V(), i = D(), h = A(), { previewOnly: f } = se(), { t: o } = B("workbench"), s = Q(), k = ye(), y = i && k && !!a?.subPageBackButton, E = M(() => {
-    const l = re();
-    l && s(ne(l), { replace: !0 });
-  }, [s]), _ = y ? /* @__PURE__ */ d(
+  const d = V(), s = O(), f = G(), { previewOnly: v } = se(), { t: i } = L("workbench"), p = Q(), N = ye(), _ = s && N && !!n?.subPageBackButton, M = R(() => {
+    const o = re();
+    o && p(ne(o), { replace: !0 });
+  }, [p]), k = _ ? /* @__PURE__ */ u(
     "button",
     {
       type: "button",
-      onClick: E,
-      "aria-label": o("mobile.back", "Back"),
+      onClick: M,
+      "aria-label": i("mobile.back", "Back"),
       className: "flex w-fit items-center gap-1 text-sm text-indigo-600",
       children: [
         /* @__PURE__ */ t(J, { className: "h-4 w-4" }),
-        o("mobile.back", "Back")
+        i("mobile.back", "Back")
       ]
     },
     "__subpage_back__"
-  ) : null, L = y && e[0]?.type === "FilterPanel" && !!e[0]?.props?.sticky, N = M((l, p, g = "") => /* @__PURE__ */ t(
+  ) : null, S = _ && e[0]?.type === "FilterPanel" && !!e[0]?.props?.sticky, P = R((o, h, g = "") => c ? c(o, h, {
+    appConfig: n,
+    pageParams: m,
+    pageId: l,
+    tabId: a,
+    keyPrefix: g
+  }) : /* @__PURE__ */ t(
     ae,
     {
-      component: l,
-      appConfig: a,
+      component: o,
+      appConfig: n,
       pageParams: m,
-      pageId: r,
-      tabId: u,
+      pageId: l,
+      tabId: a,
       nestingLevel: 0
     },
-    `${g}${l.id || l.type}-${p}`
-  ), [a, m, r, u]), H = (l) => ({
+    `${g}${o.id || o.type}-${h}`
+  ), [n, m, l, c, a]), H = (o) => ({
     top: "top",
     bottom: "bottom",
     "bottom-left": "bottom-left",
@@ -69,10 +74,10 @@ const _e = {}, ke = ({
     "middle-center": "middle-center",
     "middle-right": "middle-right",
     middle: "middle"
-  })[l] || l, S = I(() => {
-    if (!n || C(n) || !n.componentPositions)
+  })[o] || o, $ = B(() => {
+    if (!r || j(r) || !r.componentPositions)
       return null;
-    const l = n, p = {
+    const o = r, h = {
       top: [],
       bottom: [],
       "bottom-left": [],
@@ -93,64 +98,64 @@ const _e = {}, ke = ({
       middle: []
     }, g = [];
     return e.forEach((b) => {
-      const x = l.componentPositions?.[b.id];
+      const x = o.componentPositions?.[b.id];
       if (x?.area) {
         const w = H(x.area);
-        p[w] ? p[w].push({ component: b, order: x.order || 0 }) : g.push({ component: b, order: 0 });
+        h[w] ? h[w].push({ component: b, order: x.order || 0 }) : g.push({ component: b, order: 0 });
       } else
         g.push({ component: b, order: 0 });
-    }), Object.keys(p).forEach((b) => {
-      p[b].sort((x, w) => x.order - w.order);
-    }), p.top.push(...g), p;
-  }, [e, n]), W = M((l, p = "") => /* @__PURE__ */ t(
+    }), Object.keys(h).forEach((b) => {
+      h[b].sort((x, w) => x.order - w.order);
+    }), h.top.push(...g), h;
+  }, [e, r]), W = R((o, h = "") => /* @__PURE__ */ t(
     "div",
     {
       className: "w-full h-full flex flex-col",
-      style: { gap: c ? "0.75rem" : "1rem" },
-      children: l.map((g, b) => {
-        const x = g.component || g, T = n.componentPositions?.[x.id]?.span || x.props?.span || 1, K = T > 1 ? { gridColumn: `span ${T}` } : {};
+      style: { gap: d ? "0.75rem" : "1rem" },
+      children: o.map((g, b) => {
+        const x = g.component || g, T = r.componentPositions?.[x.id]?.span || x.props?.span || 1, q = T > 1 ? { gridColumn: `span ${T}` } : {};
         return /* @__PURE__ */ t(
           "div",
           {
-            style: K,
+            style: q,
             className: "w-full flex-shrink-0",
-            children: N(x, b, p)
+            children: P(x, b, h)
           },
-          `${p}${x.id || x.type}-${b}`
+          `${h}${x.id || x.type}-${b}`
         );
       })
     }
-  ), [N, n, c]);
+  ), [P, r, d]);
   if (!e || e.length === 0)
-    return /* @__PURE__ */ t("div", { className: "flex min-h-[240px] items-center justify-center py-16", children: /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: o("page_empty_hint", "This page has no content yet.") }) });
-  if (C(n) || !n || n.componentPositions, n && C(n))
-    return /* @__PURE__ */ t("div", { className: O("h-full w-full min-h-0", h && "flex flex-1 flex-col"), children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ t("div", { className: "flex min-h-[240px] items-center justify-center py-16", children: /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: i("page_empty_hint", "This page has no content yet.") }) });
+  if (j(r) || !r || r.componentPositions, r && j(r))
+    return /* @__PURE__ */ t("div", { className: F("h-full w-full min-h-0", f && "flex flex-1 flex-col"), children: /* @__PURE__ */ t(
       oe,
       {
-        config: n,
+        config: r,
         components: e,
         nestingLevel: 0,
-        appConfig: a,
+        appConfig: n,
         pageParams: m,
-        pageId: r,
-        tabId: u,
-        forceMobileFlow: f,
-        mobileFlowInsert: _
+        pageId: l,
+        tabId: a,
+        forceMobileFlow: v,
+        mobileFlowInsert: k
       }
     ) });
-  if (n && S) {
-    let l = "all-vertical";
-    n.preset && Object.keys(le).includes(n.preset) ? l = n.preset : l = {
+  if (r && $) {
+    let o = "all-vertical";
+    r.preset && Object.keys(le).includes(r.preset) ? o = r.preset : o = {
       "all-vertical": "all-vertical",
       "top1-bottom2": "top1-bottom2",
       "top1-bottom2-equal": "top1-bottom2-equal",
       "left1-right2": "left1-right2",
       "top1-bottom3": "top1-bottom3"
-    }[n.preset] || "all-vertical";
-    const p = ie(l);
-    if (c) {
-      const g = p.flatMap(
-        (b) => S?.[b] || []
+    }[r.preset] || "all-vertical";
+    const h = ie(o);
+    if (d) {
+      const g = h.flatMap(
+        (b) => $?.[b] || []
       );
       return /* @__PURE__ */ t("div", { className: "mobile-flow-layout flex w-full flex-col gap-3", children: g.map((b, x) => {
         const w = b.component || b, T = w?.type === "FilterPanel" && !!w?.props?.sticky;
@@ -158,14 +163,14 @@ const _e = {}, ke = ({
           "div",
           {
             className: T ? "contents" : "w-full",
-            children: N(w, x, "mobile-")
+            children: P(w, x, "mobile-")
           },
           `mobile-${w.id || w.type}-${x}`
         );
       }) });
     }
-    return /* @__PURE__ */ t("div", { className: `layout-grid layout-${l} h-full w-full`, children: p.map((g) => {
-      const b = S?.[g] || [];
+    return /* @__PURE__ */ t("div", { className: `layout-grid layout-${o} h-full w-full`, children: h.map((g) => {
+      const b = $?.[g] || [];
       return b.length === 0 ? null : /* @__PURE__ */ t(
         "div",
         {
@@ -176,135 +181,135 @@ const _e = {}, ke = ({
       );
     }) });
   }
-  const P = [];
-  for (let l = 0; l < e.length; l++) {
-    const p = e[l], g = e[l + 1];
-    if (p?.type === "Title" && g?.type === "Paragraph") {
-      P.push(
-        /* @__PURE__ */ d(
+  const E = [];
+  for (let o = 0; o < e.length; o++) {
+    const h = e[o], g = e[o + 1];
+    if (h?.type === "Title" && g?.type === "Paragraph") {
+      E.push(
+        /* @__PURE__ */ u(
           "div",
           {
             className: "space-y-1",
             children: [
-              N(p, l, "fallback-"),
-              N(g, l + 1, "fallback-")
+              P(h, o, "fallback-"),
+              P(g, o + 1, "fallback-")
             ]
           },
-          `fallback-header-${p.id || p.type}-${l}`
+          `fallback-header-${h.id || h.type}-${o}`
         )
-      ), l++;
+      ), o++;
       continue;
     }
-    P.push(N(p, l, "fallback-"));
+    E.push(P(h, o, "fallback-"));
   }
-  const Y = y ? L ? [P[0], _, ...P.slice(1)] : [_, ...P] : P;
-  return /* @__PURE__ */ t("div", { className: c ? "mobile-flow-layout space-y-3 w-full" : "space-y-4 w-full", children: Y });
+  const Y = _ ? S ? [E[0], k, ...E.slice(1)] : [k, ...E] : E;
+  return /* @__PURE__ */ t("div", { className: d ? "mobile-flow-layout space-y-3 w-full" : "space-y-4 w-full", children: Y });
 }, Ne = (e) => {
-  const a = [], n = (m) => {
-    for (const r of m) {
-      if (r.type === "Container" && r.children) {
-        n(r.children);
+  const n = [], r = (m) => {
+    for (const l of m) {
+      if (l.type === "Container" && l.children) {
+        r(l.children);
         continue;
       }
-      if (r.type === "Tabs" && r.props?.items) {
-        for (const c of r.props.items)
-          c.children && n(c.children), c.components && n(c.components);
+      if (l.type === "Tabs" && l.props?.items) {
+        for (const c of l.props.items)
+          c.children && r(c.children), c.components && r(c.components);
         continue;
       }
-      if (r.type === "Card" && r.props?.content) {
-        n([r.props.content]);
+      if (l.type === "Card" && l.props?.content) {
+        r([l.props.content]);
         continue;
       }
-      r.props?.followPageRefresh === !0 && a.push(r.id);
+      l.props?.followPageRefresh === !0 && n.push(l.id);
     }
   };
-  return n(e), a;
+  return r(e), n;
 }, Pe = ({
   pageConfig: e,
-  pageId: a,
-  isActive: n
+  pageId: n,
+  isActive: r
 }) => {
-  const m = j(null), r = j([]), u = M(() => e?.components ? Ne(e.components) : [], [e?.components]), c = M(() => {
-    const i = Date.now(), h = r.current;
+  const m = D(null), l = D([]), a = R(() => e?.components ? Ne(e.components) : [], [e?.components]), c = R(() => {
+    const d = Date.now(), s = l.current;
     if (typeof window < "u") {
       const f = new CustomEvent("page-auto-refresh-trigger", {
         detail: {
-          timestamp: i,
-          pageId: a,
-          componentIds: h,
+          timestamp: d,
+          pageId: n,
+          componentIds: s,
           source: "page-auto-refresh"
         }
       });
       window.dispatchEvent(f);
     }
-  }, [a]);
-  R(() => {
-    const i = e?.autoRefresh;
-    if (!n || !i?.enabled) {
+  }, [n]);
+  I(() => {
+    const d = e?.autoRefresh;
+    if (!r || !d?.enabled) {
       m.current && (clearInterval(m.current), m.current = null);
       return;
     }
-    const h = u();
-    if (r.current = h, h.length === 0)
+    const s = a();
+    if (l.current = s, s.length === 0)
       return;
-    const f = i.interval * 1e3;
+    const f = d.interval * 1e3;
     return m.current = setInterval(() => {
       c();
     }, f), c(), () => {
       m.current && (clearInterval(m.current), m.current = null);
     };
-  }, [e?.autoRefresh?.enabled, e?.autoRefresh?.interval, n, u, c]), R(() => {
+  }, [e?.autoRefresh?.enabled, e?.autoRefresh?.interval, r, a, c]), I(() => {
     if (m.current && e?.autoRefresh?.enabled) {
-      const i = u();
-      r.current = i;
+      const d = a();
+      l.current = d;
     }
-  }, [e?.components, e?.autoRefresh?.enabled, u]);
+  }, [e?.components, e?.autoRefresh?.enabled, a]);
 }, Ee = "1rem";
 function Me() {
-  return X(
+  return K(
     ce,
     de,
     () => 0
   );
 }
 function Re(e) {
-  for (let a = e?.parentElement ?? null; a; a = a.parentElement) {
-    const { overflowY: n } = getComputedStyle(a);
-    if (n === "auto" || n === "scroll") return a;
+  for (let n = e?.parentElement ?? null; n; n = n.parentElement) {
+    const { overflowY: r } = getComputedStyle(n);
+    if (r === "auto" || r === "scroll") return n;
   }
   return null;
 }
-function Te() {
-  const { t: e } = B("workbench"), { isEditMode: a } = me(), [n, m] = $(!1), r = j(null), [u, c] = $(null);
-  return R(() => {
+function Ie() {
+  const { t: e } = L("workbench"), { isEditMode: n } = me(), [r, m] = C(!1), l = D(null), [a, c] = C(null);
+  return I(() => {
     m(!1);
-  }, [a]), q(() => {
-    if (n) return;
-    const i = Re(r.current), h = () => {
-      const f = i ? i.getBoundingClientRect() : { top: 0, bottom: window.innerHeight }, o = document.querySelector(".workbench-bottom-tab-nav"), s = o ? o.getBoundingClientRect().top : Number.POSITIVE_INFINITY;
-      c(Math.max(0, Math.round(Math.min(f.bottom, s) - f.top)));
+  }, [n]), X(() => {
+    if (r) return;
+    const d = Re(l.current), s = () => {
+      const f = d ? d.getBoundingClientRect() : { top: 0, bottom: window.innerHeight }, v = document.querySelector(".workbench-bottom-tab-nav"), i = v ? v.getBoundingClientRect().top : Number.POSITIVE_INFINITY;
+      c(Math.max(0, Math.round(Math.min(f.bottom, i) - f.top)));
     };
-    if (h(), i && typeof ResizeObserver < "u") {
-      const f = new ResizeObserver(h);
-      return f.observe(i), window.addEventListener("resize", h), () => {
-        f.disconnect(), window.removeEventListener("resize", h);
+    if (s(), d && typeof ResizeObserver < "u") {
+      const f = new ResizeObserver(s);
+      return f.observe(d), window.addEventListener("resize", s), () => {
+        f.disconnect(), window.removeEventListener("resize", s);
       };
     }
-    return window.addEventListener("resize", h), () => window.removeEventListener("resize", h);
-  }, [a, n]), n ? null : (
+    return window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
+  }, [n, r]), r ? null : (
     // z-40 clears the sticky FilterPanel (z-30) which shares the tab wrapper's stacking context.
-    /* @__PURE__ */ t("div", { ref: r, className: "absolute inset-0 z-40 bg-white/70 backdrop-blur-md dark:bg-neutral-900/70", children: /* @__PURE__ */ d(
+    /* @__PURE__ */ t("div", { ref: l, className: "absolute inset-0 z-40 bg-white/70 backdrop-blur-md dark:bg-neutral-900/70", children: /* @__PURE__ */ u(
       "div",
       {
         className: "sticky top-0 flex max-h-full flex-col items-center justify-center gap-4 px-6",
-        style: { height: u != null ? `${u}px` : "100dvh" },
+        style: { height: a != null ? `${a}px` : "100dvh" },
         children: [
           /* @__PURE__ */ t("span", { className: "flex size-14 items-center justify-center rounded-full bg-indigo-50 text-indigo-500 dark:bg-indigo-950/40 dark:text-indigo-300", children: /* @__PURE__ */ t(Z, { className: "h-6 w-6", strokeWidth: 1.6, "aria-hidden": "true" }) }),
-          /* @__PURE__ */ d("div", { className: "flex select-none flex-col items-center gap-1 text-center", children: [
+          /* @__PURE__ */ u("div", { className: "flex select-none flex-col items-center gap-1 text-center", children: [
             /* @__PURE__ */ t("span", { className: "text-lg font-semibold tracking-tight text-slate-800 dark:text-neutral-100", children: e("coming_soon.title", "Coming Soon") }),
             /* @__PURE__ */ t("span", { className: "text-sm leading-snug text-slate-500 dark:text-neutral-400", children: e("coming_soon.description", "This page is under construction — stay tuned.") })
           ] }),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ u(
             ue,
             {
               variant: "outline",
@@ -322,60 +327,66 @@ function Te() {
     ) })
   );
 }
-const Ie = () => null, G = U(({ tab: e, appConfig: a, availableParameters: n, isEmpty: m, isTabActive: r = !0 }) => {
-  const { t: u } = B(["workbench", "common"]), c = e.pageConfig, i = fe(e.pageId, c) ?? c, h = V(), f = D(), o = A(), s = be(
+const Te = () => null, A = U(({ tab: e, appConfig: n, availableParameters: r, isEmpty: m, isTabActive: l = !0, renderPage: a }) => {
+  const { t: c } = L(["workbench", "common"]), d = e.pageConfig, s = fe(e.pageId, d) ?? d, f = V(), v = O(), i = G(), p = be(
     `page-${e.pageId}`,
-    i.customStyles,
+    s.customStyles,
     ""
   );
-  return /* @__PURE__ */ d(xe, { value: r, children: [
+  return /* @__PURE__ */ u(xe, { value: l, children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: O(
+        className: F(
           "h-full w-full min-h-0 bg-neutral-50 dark:bg-neutral-900",
-          s.className,
-          o ? "flex flex-col overflow-hidden" : h ? "overflow-y-auto overflow-x-hidden overscroll-none mobile-no-scrollbar" : "overflow-auto custom-scrollbar pt-4"
+          p.className,
+          i ? "flex flex-col overflow-hidden" : f ? "overflow-y-auto overflow-x-hidden overscroll-none mobile-no-scrollbar" : "overflow-auto custom-scrollbar pt-4"
         ),
-        style: s.style,
-        children: /* @__PURE__ */ d(
+        style: p.style,
+        children: /* @__PURE__ */ u(
           "div",
           {
-            className: O(
-              o ? "flex min-h-0 flex-1 flex-col p-3 sm:p-4 md:p-5" : h ? "px-2 pt-2" : "px-4 pb-4"
+            className: F(
+              i ? "flex min-h-0 flex-1 flex-col p-3 sm:p-4 md:p-5" : f ? "px-2 pt-2" : "px-4 pb-4"
             ),
-            style: !o && f ? { paddingBottom: Ee } : void 0,
+            style: !i && v ? { paddingBottom: Ee } : void 0,
             children: [
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ u(
                 we,
                 {
                   tabId: e.id,
                   pageId: e.pageId,
                   initialParams: e.urlParams || {},
                   children: [
-                    /* @__PURE__ */ t(Ie, {}),
+                    /* @__PURE__ */ t(Te, {}),
                     /* @__PURE__ */ t(
                       ve,
                       {
-                        pageConfig: i,
+                        pageConfig: s,
                         pageId: e.pageId,
                         tabId: e.id,
-                        isTabActive: r,
-                        availableParameters: n,
-                        children: m ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center min-h-[60vh]", children: /* @__PURE__ */ d("div", { className: "text-center max-w-md mx-auto", children: [
-                          /* @__PURE__ */ t("div", { className: "inline-flex items-center justify-center p-4 bg-primary/10 rounded-full mb-4", children: v("layout-grid", "w-12 h-12 text-primary") }),
-                          /* @__PURE__ */ t("h3", { className: "text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2", children: u("multi_page_renderer.start_building", "Start Building Your Page") }),
-                          /* @__PURE__ */ t("p", { className: "text-neutral-500 dark:text-neutral-400 mb-6", children: u("multi_page_renderer.start_building_description", "Drag components from the component library on the right to here to start building your page") }),
-                          /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-2 text-sm text-neutral-400 dark:text-neutral-500", children: [
-                            v("arrow-right", "w-4 h-4"),
-                            /* @__PURE__ */ t("span", { children: u("multi_page_renderer.drag_component_hint", "Drag components here") })
+                        isTabActive: l,
+                        availableParameters: r,
+                        children: m ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center min-h-[60vh]", children: /* @__PURE__ */ u("div", { className: "text-center max-w-md mx-auto", children: [
+                          /* @__PURE__ */ t("div", { className: "inline-flex items-center justify-center p-4 bg-primary/10 rounded-full mb-4", children: y("layout-grid", "w-12 h-12 text-primary") }),
+                          /* @__PURE__ */ t("h3", { className: "text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2", children: c("multi_page_renderer.start_building", "Start Building Your Page") }),
+                          /* @__PURE__ */ t("p", { className: "text-neutral-500 dark:text-neutral-400 mb-6", children: c("multi_page_renderer.start_building_description", "Drag components from the component library on the right to here to start building your page") }),
+                          /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-2 text-sm text-neutral-400 dark:text-neutral-500", children: [
+                            y("arrow-right", "w-4 h-4"),
+                            /* @__PURE__ */ t("span", { children: c("multi_page_renderer.drag_component_hint", "Drag components here") })
                           ] })
-                        ] }) }) : /* @__PURE__ */ t(
+                        ] }) }) : a ? a({
+                          pageId: e.pageId,
+                          tabId: e.id,
+                          pageConfig: s,
+                          appConfig: n,
+                          pageParams: e.urlParams || {}
+                        }) : /* @__PURE__ */ t(
                           ke,
                           {
-                            components: i.components || [],
-                            appConfig: a,
-                            layoutConfig: i.layout,
+                            components: s.components || [],
+                            appConfig: n,
+                            layoutConfig: s.layout,
                             pageParams: e.urlParams,
                             pageId: e.pageId,
                             tabId: e.id
@@ -387,7 +398,7 @@ const Ie = () => null, G = U(({ tab: e, appConfig: a, availableParameters: n, is
                   ]
                 }
               ),
-              a?.showPublishHistory && a?.publishHistoryPageKey && e.pageId !== a.publishHistoryPageKey && /* @__PURE__ */ t("div", { className: "mt-8 flex justify-center pb-2", children: /* @__PURE__ */ t(
+              n?.showPublishHistory && n?.publishHistoryPageKey && e.pageId !== n.publishHistoryPageKey && /* @__PURE__ */ t("div", { className: "mt-8 flex justify-center pb-2", children: /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
@@ -395,14 +406,14 @@ const Ie = () => null, G = U(({ tab: e, appConfig: a, availableParameters: n, is
                   onClick: () => window.dispatchEvent(
                     new CustomEvent("workbench-open-tab", {
                       detail: {
-                        pageId: a.publishHistoryPageKey,
-                        navigationTitle: u("publish_history_nav", "Publish History"),
+                        pageId: n.publishHistoryPageKey,
+                        navigationTitle: c("publish_history_nav", "Publish History"),
                         icon: "history",
                         urlParams: {}
                       }
                     })
                   ),
-                  children: u("view_publish_history", "View publish history")
+                  children: c("view_publish_history", "View publish history")
                 }
               ) })
             ]
@@ -410,99 +421,100 @@ const Ie = () => null, G = U(({ tab: e, appConfig: a, availableParameters: n, is
         )
       }
     ),
-    i?.comingSoon?.enabled && /* @__PURE__ */ t(Te, {})
+    s?.comingSoon?.enabled && /* @__PURE__ */ t(Ie, {})
   ] });
 });
-G.displayName = "TabContent";
-const Oe = ({
+A.displayName = "TabContent";
+const De = ({
   tabs: e,
-  activeTabId: a,
-  appConfig: n,
-  availableParameters: m = []
+  activeTabId: n,
+  appConfig: r,
+  availableParameters: m = [],
+  renderPage: l
 }) => {
-  const { t: r } = B(["workbench", "common"]), u = D(), c = Me(), i = I(() => {
+  const { t: a } = L(["workbench", "common"]), c = O(), d = Me(), s = B(() => {
     if (e.length === 0) return null;
-    if (a && e.some((s) => s.id === a)) return a;
-    const o = e.find((s) => s.isActive);
-    return o ? o.id : e.length === 1 ? e[0].id : e[0]?.id ?? null;
-  }, [e, a]), h = I(() => e.map((o) => {
-    const s = o.id === i, k = !!o.hasError, y = !!o.isLoading, E = k && !y, _ = !!o.pageConfig && !y && !k;
-    return { tab: o, isActive: s, hasError: k, isLoading: y, showError: E, showContent: _ };
-  }), [e, i]), f = I(() => h.find((s) => s.isActive && s.showContent)?.tab ?? null, [h]);
+    if (n && e.some((p) => p.id === n)) return n;
+    const i = e.find((p) => p.isActive);
+    return i ? i.id : e.length === 1 ? e[0].id : e[0]?.id ?? null;
+  }, [e, n]), f = B(() => e.map((i) => {
+    const p = i.id === s, N = !!i.hasError, _ = !!i.isLoading, M = N && !_, k = !!i.pageConfig && !_ && !N;
+    return { tab: i, isActive: p, hasError: N, isLoading: _, showError: M, showContent: k };
+  }), [e, s]), v = B(() => f.find((p) => p.isActive && p.showContent)?.tab ?? null, [f]);
   return Pe({
-    pageConfig: f?.pageConfig ?? {
+    pageConfig: v?.pageConfig ?? {
       layout: pe([]),
       components: []
     },
-    pageId: f?.pageId ?? "",
-    isActive: !!f
-  }), R(() => {
-    if (!u || c === 0)
+    pageId: v?.pageId ?? "",
+    isActive: !!v
+  }), I(() => {
+    if (!c || d === 0)
       return;
-    const o = window.setTimeout(he, 280);
-    return () => window.clearTimeout(o);
-  }, [u, i, c]), !i || e.length === 0 ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center h-full w-full p-8 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-neutral-900 dark:to-neutral-800", children: /* @__PURE__ */ d("div", { className: "max-w-4xl mx-auto text-center", children: [
-    /* @__PURE__ */ d("div", { className: "mb-8", children: [
-      /* @__PURE__ */ t("div", { className: "inline-flex items-center justify-center p-3 bg-primary/10 rounded-full mb-6", children: v("layout-grid", "w-8 h-8 text-primary") }),
-      /* @__PURE__ */ t("h1", { className: "text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-600 mb-4", children: r("multi_page_renderer.welcome_title", "Welcome to Workbench") }),
-      /* @__PURE__ */ t("p", { className: "text-lg text-neutral-600 dark:text-neutral-300 max-w-2xl mx-auto leading-relaxed", children: r("multi_page_renderer.welcome_description", "Quickly build enterprise applications through drag-and-drop visual interface, supporting rich component library, data binding, custom styles and real-time preview, making it easy to develop professional applications") })
+    const i = window.setTimeout(he, 280);
+    return () => window.clearTimeout(i);
+  }, [c, s, d]), !s || e.length === 0 ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center h-full w-full p-8 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-neutral-900 dark:to-neutral-800", children: /* @__PURE__ */ u("div", { className: "max-w-4xl mx-auto text-center", children: [
+    /* @__PURE__ */ u("div", { className: "mb-8", children: [
+      /* @__PURE__ */ t("div", { className: "inline-flex items-center justify-center p-3 bg-primary/10 rounded-full mb-6", children: y("layout-grid", "w-8 h-8 text-primary") }),
+      /* @__PURE__ */ t("h1", { className: "text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-600 mb-4", children: a("multi_page_renderer.welcome_title", "Welcome to Workbench") }),
+      /* @__PURE__ */ t("p", { className: "text-lg text-neutral-600 dark:text-neutral-300 max-w-2xl mx-auto leading-relaxed", children: a("multi_page_renderer.welcome_description", "Quickly build enterprise applications through drag-and-drop visual interface, supporting rich component library, data binding, custom styles and real-time preview, making it easy to develop professional applications") })
     ] }),
-    /* @__PURE__ */ d("div", { className: "grid md:grid-cols-3 gap-6 mb-10", children: [
-      /* @__PURE__ */ d("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:shadow-md transition-shadow", children: [
-        /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-blue-500/10 w-fit mx-auto mb-4", children: v("layout-panel-top", "w-8 h-8 text-blue-500") }),
-        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100", children: r("multi_page_renderer.feature_visual_drag", "Visual Drag & Drop") }),
-        /* @__PURE__ */ t("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: r("multi_page_renderer.feature_visual_drag_description", "30+ component types including forms, tables, charts, containers, supporting custom styles and interactions") })
+    /* @__PURE__ */ u("div", { className: "grid md:grid-cols-3 gap-6 mb-10", children: [
+      /* @__PURE__ */ u("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:shadow-md transition-shadow", children: [
+        /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-blue-500/10 w-fit mx-auto mb-4", children: y("layout-panel-top", "w-8 h-8 text-blue-500") }),
+        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100", children: a("multi_page_renderer.feature_visual_drag", "Visual Drag & Drop") }),
+        /* @__PURE__ */ t("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: a("multi_page_renderer.feature_visual_drag_description", "30+ component types including forms, tables, charts, containers, supporting custom styles and interactions") })
       ] }),
-      /* @__PURE__ */ d("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:shadow-md transition-shadow", children: [
-        /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-purple-500/10 w-fit mx-auto mb-4", children: v("database", "w-8 h-8 text-purple-500") }),
-        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100", children: r("multi_page_renderer.feature_data_binding", "Smart Data Binding") }),
-        /* @__PURE__ */ t("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: r("multi_page_renderer.feature_data_binding_description", "Seamlessly connect enterprise data sources, supporting real-time data display and business logic configuration") })
+      /* @__PURE__ */ u("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:shadow-md transition-shadow", children: [
+        /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-purple-500/10 w-fit mx-auto mb-4", children: y("database", "w-8 h-8 text-purple-500") }),
+        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100", children: a("multi_page_renderer.feature_data_binding", "Smart Data Binding") }),
+        /* @__PURE__ */ t("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: a("multi_page_renderer.feature_data_binding_description", "Seamlessly connect enterprise data sources, supporting real-time data display and business logic configuration") })
       ] }),
-      /* @__PURE__ */ d("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:shadow-md transition-shadow", children: [
-        /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-emerald-500/10 w-fit mx-auto mb-4", children: v("sparkles", "w-8 h-8 text-emerald-500") }),
-        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100", children: r("multi_page_renderer.feature_component_communication", "Component Communication") }),
-        /* @__PURE__ */ t("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: r("multi_page_renderer.feature_component_communication_description", "Support parameter passing and event triggering, building complex business processes and user interactions") })
+      /* @__PURE__ */ u("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-sm border border-neutral-200 dark:border-neutral-700 hover:shadow-md transition-shadow", children: [
+        /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-emerald-500/10 w-fit mx-auto mb-4", children: y("sparkles", "w-8 h-8 text-emerald-500") }),
+        /* @__PURE__ */ t("h3", { className: "text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100", children: a("multi_page_renderer.feature_component_communication", "Component Communication") }),
+        /* @__PURE__ */ t("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: a("multi_page_renderer.feature_component_communication_description", "Support parameter passing and event triggering, building complex business processes and user interactions") })
       ] })
     ] }),
-    /* @__PURE__ */ d("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-8 shadow-sm border border-neutral-200 dark:border-neutral-700", children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-2 mb-4", children: [
-        v("arrow-right", "w-5 h-5 text-primary"),
-        /* @__PURE__ */ t("h3", { className: "text-xl font-semibold text-neutral-900 dark:text-neutral-100", children: r("multi_page_renderer.start_creating_title", "Start Creating Your First Page") })
+    /* @__PURE__ */ u("div", { className: "bg-white dark:bg-neutral-800 rounded-lg p-8 shadow-sm border border-neutral-200 dark:border-neutral-700", children: [
+      /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-2 mb-4", children: [
+        y("arrow-right", "w-5 h-5 text-primary"),
+        /* @__PURE__ */ t("h3", { className: "text-xl font-semibold text-neutral-900 dark:text-neutral-100", children: a("multi_page_renderer.start_creating_title", "Start Creating Your First Page") })
       ] }),
-      /* @__PURE__ */ t("p", { className: "text-neutral-600 dark:text-neutral-400 mb-6", children: r("multi_page_renderer.start_creating_description", "Click the navigation menu to open a page, or create a new page configuration through edit mode") }),
-      /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-4", children: [
-        /* @__PURE__ */ d("div", { className: "flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-lg", children: [
-          v("mouse-pointer-click", "w-4 h-4 text-primary"),
-          /* @__PURE__ */ t("span", { className: "text-sm font-medium text-primary", children: r("multi_page_renderer.select_page", "Select Page") })
+      /* @__PURE__ */ t("p", { className: "text-neutral-600 dark:text-neutral-400 mb-6", children: a("multi_page_renderer.start_creating_description", "Click the navigation menu to open a page, or create a new page configuration through edit mode") }),
+      /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ u("div", { className: "flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-lg", children: [
+          y("mouse-pointer-click", "w-4 h-4 text-primary"),
+          /* @__PURE__ */ t("span", { className: "text-sm font-medium text-primary", children: a("multi_page_renderer.select_page", "Select Page") })
         ] }),
-        /* @__PURE__ */ t("span", { className: "text-neutral-400", children: r("multi_page_renderer.or", "or") }),
-        /* @__PURE__ */ d("div", { className: "flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-lg", children: [
-          v("edit", "w-4 h-4 text-primary"),
-          /* @__PURE__ */ t("span", { className: "text-sm font-medium text-primary", children: r("multi_page_renderer.enable_edit_mode", "Enable Edit Mode") })
+        /* @__PURE__ */ t("span", { className: "text-neutral-400", children: a("multi_page_renderer.or", "or") }),
+        /* @__PURE__ */ u("div", { className: "flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-lg", children: [
+          y("edit", "w-4 h-4 text-primary"),
+          /* @__PURE__ */ t("span", { className: "text-sm font-medium text-primary", children: a("multi_page_renderer.enable_edit_mode", "Enable Edit Mode") })
         ] })
       ] })
     ] })
-  ] }) }) : /* @__PURE__ */ t("div", { className: "h-full w-full overflow-hidden relative", children: h.map(({ tab: o, isActive: s, hasError: k, isLoading: y, showError: E, showContent: _ }) => {
-    const L = c === 0 ? 8 : c * 24;
-    return /* @__PURE__ */ d(
+  ] }) }) : /* @__PURE__ */ t("div", { className: "h-full w-full overflow-hidden relative", children: f.map(({ tab: i, isActive: p, hasError: N, isLoading: _, showError: M, showContent: k }) => {
+    const S = d === 0 ? 8 : d * 24;
+    return /* @__PURE__ */ u(
       "div",
       {
         className: "absolute inset-0 h-full w-full",
         style: {
-          opacity: s ? 1 : 0,
-          zIndex: s ? 10 : 0,
-          pointerEvents: s ? "auto" : "none",
-          transform: s ? "translateX(0)" : `translateX(${L}px)`,
-          transition: u ? "opacity 0.24s ease, transform 0.24s ease" : "opacity 0.2s ease-in-out, transform 0.2s ease-in-out",
-          willChange: s ? "opacity, transform" : "auto"
+          opacity: p ? 1 : 0,
+          zIndex: p ? 10 : 0,
+          pointerEvents: p ? "auto" : "none",
+          transform: p ? "translateX(0)" : `translateX(${S}px)`,
+          transition: c ? "opacity 0.24s ease, transform 0.24s ease" : "opacity 0.2s ease-in-out, transform 0.2s ease-in-out",
+          willChange: p ? "opacity, transform" : "auto"
         },
-        "aria-hidden": !s,
+        "aria-hidden": !p,
         children: [
-          y ? /* @__PURE__ */ t("div", { className: "h-full overflow-hidden p-4", children: /* @__PURE__ */ t(ge, { preset: "dashboard" }) }) : null,
-          E ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center h-full pt-4", children: /* @__PURE__ */ d("div", { className: "text-center max-w-md mx-auto p-6", children: [
-            v("alert-circle", "w-16 h-16 text-status-error mx-auto mb-4"),
-            /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2", children: r("multi_page_renderer.page_load_failed", "Page Load Failed") }),
-            /* @__PURE__ */ t("p", { className: "text-red-600 dark:text-red-400 mb-4", children: typeof o.errorMessage == "string" ? o.errorMessage : r("multi_page_renderer.unknown_error", "Unknown error") }),
+          _ ? /* @__PURE__ */ t("div", { className: "h-full overflow-hidden p-4", children: /* @__PURE__ */ t(ge, { preset: "dashboard" }) }) : null,
+          M ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center h-full pt-4", children: /* @__PURE__ */ u("div", { className: "text-center max-w-md mx-auto p-6", children: [
+            y("alert-circle", "w-16 h-16 text-status-error mx-auto mb-4"),
+            /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2", children: a("multi_page_renderer.page_load_failed", "Page Load Failed") }),
+            /* @__PURE__ */ t("p", { className: "text-red-600 dark:text-red-400 mb-4", children: typeof i.errorMessage == "string" ? i.errorMessage : a("multi_page_renderer.unknown_error", "Unknown error") }),
             /* @__PURE__ */ t(
               "button",
               {
@@ -510,28 +522,29 @@ const Oe = ({
                   window.location.reload();
                 },
                 className: "btn btn-primary",
-                children: r("multi_page_renderer.reload", "Reload")
+                children: a("multi_page_renderer.reload", "Reload")
               }
             )
           ] }) }) : null,
-          _ && /* @__PURE__ */ t(
-            G,
+          k && /* @__PURE__ */ t(
+            A,
             {
-              tab: o,
-              appConfig: n,
+              tab: i,
+              appConfig: r,
               availableParameters: m,
-              isEmpty: !o.pageConfig?.components?.length,
-              isTabActive: s
+              isEmpty: !i.pageConfig?.components?.length,
+              isTabActive: p,
+              renderPage: l
             }
           )
         ]
       },
-      o.id
+      i.id
     );
   }) });
 };
 export {
-  Oe as M,
+  De as M,
   ke as P
 };
-//# sourceMappingURL=MultiPageRenderer-D7rlHY8l.js.map
+//# sourceMappingURL=MultiPageRenderer-DftFCAIJ.js.map