@genispace/geniapp 0.3.0 → 0.4.0

package/dist/MultiPageRenderer-D7rlHY8l.js

@@ -0,0 +1,537 @@
+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 { useNavigate as Q } from "react-router-dom";
+import { useTranslation as B } 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";
+function ye() {
+  const [e, a] = $(F());
+  return R(() => te(() => {
+    a(F());
+  }), []), e;
+}
+z.lazy(() => import("./Grid24EditableCanvas-C5xiiXdZ.js"));
+z.lazy(() => import("./MobileFlowCanvas-DctpXMPy.js"));
+function C(e) {
+  return !!e && e.type === "grid-24";
+}
+const _e = {}, ke = ({
+  components: e,
+  appConfig: a,
+  layoutConfig: n,
+  pageParams: m,
+  pageId: r,
+  tabId: u
+}) => {
+  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(
+    "button",
+    {
+      type: "button",
+      onClick: E,
+      "aria-label": o("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")
+      ]
+    },
+    "__subpage_back__"
+  ) : null, L = y && e[0]?.type === "FilterPanel" && !!e[0]?.props?.sticky, N = M((l, p, g = "") => /* @__PURE__ */ t(
+    ae,
+    {
+      component: l,
+      appConfig: a,
+      pageParams: m,
+      pageId: r,
+      tabId: u,
+      nestingLevel: 0
+    },
+    `${g}${l.id || l.type}-${p}`
+  ), [a, m, r, u]), H = (l) => ({
+    top: "top",
+    bottom: "bottom",
+    "bottom-left": "bottom-left",
+    "bottom-center": "bottom-center",
+    "bottom-right": "bottom-right",
+    "bottom-second": "bottom-second",
+    left: "left",
+    "left-top": "left-top",
+    "left-center": "left-center",
+    "left-bottom": "left-bottom",
+    right: "right",
+    "right-top": "right-top",
+    "right-bottom": "right-bottom",
+    header: "header",
+    "middle-left": "middle-left",
+    "middle-center": "middle-center",
+    "middle-right": "middle-right",
+    middle: "middle"
+  })[l] || l, S = I(() => {
+    if (!n || C(n) || !n.componentPositions)
+      return null;
+    const l = n, p = {
+      top: [],
+      bottom: [],
+      "bottom-left": [],
+      "bottom-center": [],
+      "bottom-right": [],
+      "bottom-second": [],
+      left: [],
+      "left-top": [],
+      "left-center": [],
+      "left-bottom": [],
+      right: [],
+      "right-top": [],
+      "right-bottom": [],
+      header: [],
+      "middle-left": [],
+      "middle-center": [],
+      "middle-right": [],
+      middle: []
+    }, g = [];
+    return e.forEach((b) => {
+      const x = l.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 });
+      } 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(
+    "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}` } : {};
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            style: K,
+            className: "w-full flex-shrink-0",
+            children: N(x, b, p)
+          },
+          `${p}${x.id || x.type}-${b}`
+        );
+      })
+    }
+  ), [N, n, c]);
+  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(
+      oe,
+      {
+        config: n,
+        components: e,
+        nestingLevel: 0,
+        appConfig: a,
+        pageParams: m,
+        pageId: r,
+        tabId: u,
+        forceMobileFlow: f,
+        mobileFlowInsert: _
+      }
+    ) });
+  if (n && S) {
+    let l = "all-vertical";
+    n.preset && Object.keys(le).includes(n.preset) ? l = n.preset : l = {
+      "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] || []
+      );
+      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;
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            className: T ? "contents" : "w-full",
+            children: N(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 b.length === 0 ? null : /* @__PURE__ */ t(
+        "div",
+        {
+          className: `layout-area-${g} min-h-0 min-w-0`,
+          children: W(b, `${g}-`)
+        },
+        g
+      );
+    }) });
+  }
+  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(
+          "div",
+          {
+            className: "space-y-1",
+            children: [
+              N(p, l, "fallback-"),
+              N(g, l + 1, "fallback-")
+            ]
+          },
+          `fallback-header-${p.id || p.type}-${l}`
+        )
+      ), l++;
+      continue;
+    }
+    P.push(N(p, l, "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 });
+}, Ne = (e) => {
+  const a = [], n = (m) => {
+    for (const r of m) {
+      if (r.type === "Container" && r.children) {
+        n(r.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);
+        continue;
+      }
+      if (r.type === "Card" && r.props?.content) {
+        n([r.props.content]);
+        continue;
+      }
+      r.props?.followPageRefresh === !0 && a.push(r.id);
+    }
+  };
+  return n(e), a;
+}, Pe = ({
+  pageConfig: e,
+  pageId: a,
+  isActive: n
+}) => {
+  const m = j(null), r = j([]), u = M(() => e?.components ? Ne(e.components) : [], [e?.components]), c = M(() => {
+    const i = Date.now(), h = r.current;
+    if (typeof window < "u") {
+      const f = new CustomEvent("page-auto-refresh-trigger", {
+        detail: {
+          timestamp: i,
+          pageId: a,
+          componentIds: h,
+          source: "page-auto-refresh"
+        }
+      });
+      window.dispatchEvent(f);
+    }
+  }, [a]);
+  R(() => {
+    const i = e?.autoRefresh;
+    if (!n || !i?.enabled) {
+      m.current && (clearInterval(m.current), m.current = null);
+      return;
+    }
+    const h = u();
+    if (r.current = h, h.length === 0)
+      return;
+    const f = i.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(() => {
+    if (m.current && e?.autoRefresh?.enabled) {
+      const i = u();
+      r.current = i;
+    }
+  }, [e?.components, e?.autoRefresh?.enabled, u]);
+}, Ee = "1rem";
+function Me() {
+  return X(
+    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;
+  }
+  return null;
+}
+function Te() {
+  const { t: e } = B("workbench"), { isEditMode: a } = me(), [n, m] = $(!1), r = j(null), [u, c] = $(null);
+  return R(() => {
+    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)));
+    };
+    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);
+      };
+    }
+    return window.addEventListener("resize", h), () => window.removeEventListener("resize", h);
+  }, [a, n]), n ? 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(
+      "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" },
+        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__ */ 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(
+            ue,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => m(!0),
+              className: "mt-1 h-8 gap-1.5 rounded-full bg-white/80 px-3.5 text-xs font-medium text-slate-600 shadow-sm hover:bg-white dark:bg-neutral-800/80 dark:text-neutral-300 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ t(ee, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+                e("coming_soon.preview", "Preview page")
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  );
+}
+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(
+    `page-${e.pageId}`,
+    i.customStyles,
+    ""
+  );
+  return /* @__PURE__ */ d(xe, { value: r, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: O(
+          "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"
+        ),
+        style: s.style,
+        children: /* @__PURE__ */ d(
+          "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"
+            ),
+            style: !o && f ? { paddingBottom: Ee } : void 0,
+            children: [
+              /* @__PURE__ */ d(
+                we,
+                {
+                  tabId: e.id,
+                  pageId: e.pageId,
+                  initialParams: e.urlParams || {},
+                  children: [
+                    /* @__PURE__ */ t(Ie, {}),
+                    /* @__PURE__ */ t(
+                      ve,
+                      {
+                        pageConfig: i,
+                        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") })
+                          ] })
+                        ] }) }) : /* @__PURE__ */ t(
+                          ke,
+                          {
+                            components: i.components || [],
+                            appConfig: a,
+                            layoutConfig: i.layout,
+                            pageParams: e.urlParams,
+                            pageId: e.pageId,
+                            tabId: e.id
+                          },
+                          `layout-${e.id}`
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              a?.showPublishHistory && a?.publishHistoryPageKey && e.pageId !== a.publishHistoryPageKey && /* @__PURE__ */ t("div", { className: "mt-8 flex justify-center pb-2", children: /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "text-xs text-neutral-400 transition-colors hover:text-neutral-500 dark:text-neutral-600 dark:hover:text-neutral-500",
+                  onClick: () => window.dispatchEvent(
+                    new CustomEvent("workbench-open-tab", {
+                      detail: {
+                        pageId: a.publishHistoryPageKey,
+                        navigationTitle: u("publish_history_nav", "Publish History"),
+                        icon: "history",
+                        urlParams: {}
+                      }
+                    })
+                  ),
+                  children: u("view_publish_history", "View publish history")
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    i?.comingSoon?.enabled && /* @__PURE__ */ t(Te, {})
+  ] });
+});
+G.displayName = "TabContent";
+const Oe = ({
+  tabs: e,
+  activeTabId: a,
+  appConfig: n,
+  availableParameters: m = []
+}) => {
+  const { t: r } = B(["workbench", "common"]), u = D(), c = Me(), i = I(() => {
+    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]);
+  return Pe({
+    pageConfig: f?.pageConfig ?? {
+      layout: pe([]),
+      components: []
+    },
+    pageId: f?.pageId ?? "",
+    isActive: !!f
+  }), R(() => {
+    if (!u || c === 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") })
+    ] }),
+    /* @__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__ */ 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__ */ 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__ */ 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__ */ 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("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("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(
+      "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"
+        },
+        "aria-hidden": !s,
+        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(
+              "button",
+              {
+                onClick: () => {
+                  window.location.reload();
+                },
+                className: "btn btn-primary",
+                children: r("multi_page_renderer.reload", "Reload")
+              }
+            )
+          ] }) }) : null,
+          _ && /* @__PURE__ */ t(
+            G,
+            {
+              tab: o,
+              appConfig: n,
+              availableParameters: m,
+              isEmpty: !o.pageConfig?.components?.length,
+              isTabActive: s
+            }
+          )
+        ]
+      },
+      o.id
+    );
+  }) });
+};
+export {
+  Oe as M,
+  ke as P
+};
+//# sourceMappingURL=MultiPageRenderer-D7rlHY8l.js.map