@genispace/geniapp 0.5.0 → 0.5.1

package/dist/MultiPageRenderer-DftFCAIJ.js

@@ -0,0 +1,550 @@
+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 L } from "react-i18next";
+import { ChevronLeft as J, Rocket as Z, Eye as ee } from "lucide-react";
+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, n] = C(z());
+  return I(() => te(() => {
+    n(z());
+  }), []), e;
+}
+function j(e) {
+  return !!e && e.type === "grid-24";
+}
+const _e = {}, ke = ({
+  components: e,
+  appConfig: n,
+  layoutConfig: r,
+  pageParams: m,
+  pageId: l,
+  tabId: a,
+  renderComponent: c
+}) => {
+  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: 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" }),
+        i("mobile.back", "Back")
+      ]
+    },
+    "__subpage_back__"
+  ) : 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: o,
+      appConfig: n,
+      pageParams: m,
+      pageId: l,
+      tabId: a,
+      nestingLevel: 0
+    },
+    `${g}${o.id || o.type}-${h}`
+  ), [n, m, l, c, a]), H = (o) => ({
+    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"
+  })[o] || o, $ = B(() => {
+    if (!r || j(r) || !r.componentPositions)
+      return null;
+    const o = r, h = {
+      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 = o.componentPositions?.[b.id];
+      if (x?.area) {
+        const w = H(x.area);
+        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(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: 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: q,
+            className: "w-full flex-shrink-0",
+            children: P(x, b, h)
+          },
+          `${h}${x.id || x.type}-${b}`
+        );
+      })
+    }
+  ), [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: 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: r,
+        components: e,
+        nestingLevel: 0,
+        appConfig: n,
+        pageParams: m,
+        pageId: l,
+        tabId: a,
+        forceMobileFlow: v,
+        mobileFlowInsert: k
+      }
+    ) });
+  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"
+    }[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;
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            className: T ? "contents" : "w-full",
+            children: P(w, x, "mobile-")
+          },
+          `mobile-${w.id || w.type}-${x}`
+        );
+      }) });
+    }
+    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",
+        {
+          className: `layout-area-${g} min-h-0 min-w-0`,
+          children: W(b, `${g}-`)
+        },
+        g
+      );
+    }) });
+  }
+  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: [
+              P(h, o, "fallback-"),
+              P(g, o + 1, "fallback-")
+            ]
+          },
+          `fallback-header-${h.id || h.type}-${o}`
+        )
+      ), o++;
+      continue;
+    }
+    E.push(P(h, o, "fallback-"));
+  }
+  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 n = [], r = (m) => {
+    for (const l of m) {
+      if (l.type === "Container" && l.children) {
+        r(l.children);
+        continue;
+      }
+      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 (l.type === "Card" && l.props?.content) {
+        r([l.props.content]);
+        continue;
+      }
+      l.props?.followPageRefresh === !0 && n.push(l.id);
+    }
+  };
+  return r(e), n;
+}, Pe = ({
+  pageConfig: e,
+  pageId: n,
+  isActive: r
+}) => {
+  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: d,
+          pageId: n,
+          componentIds: s,
+          source: "page-auto-refresh"
+        }
+      });
+      window.dispatchEvent(f);
+    }
+  }, [n]);
+  I(() => {
+    const d = e?.autoRefresh;
+    if (!r || !d?.enabled) {
+      m.current && (clearInterval(m.current), m.current = null);
+      return;
+    }
+    const s = a();
+    if (l.current = s, s.length === 0)
+      return;
+    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, r, a, c]), I(() => {
+    if (m.current && e?.autoRefresh?.enabled) {
+      const d = a();
+      l.current = d;
+    }
+  }, [e?.components, e?.autoRefresh?.enabled, a]);
+}, Ee = "1rem";
+function Me() {
+  return K(
+    ce,
+    de,
+    () => 0
+  );
+}
+function Re(e) {
+  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 Ie() {
+  const { t: e } = L("workbench"), { isEditMode: n } = me(), [r, m] = C(!1), l = D(null), [a, c] = C(null);
+  return I(() => {
+    m(!1);
+  }, [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 (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", 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: 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: 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__ */ 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__ */ u(
+            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 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}`,
+    s.customStyles,
+    ""
+  );
+  return /* @__PURE__ */ u(xe, { value: l, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: F(
+          "h-full w-full min-h-0 bg-neutral-50 dark:bg-neutral-900",
+          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: p.style,
+        children: /* @__PURE__ */ u(
+          "div",
+          {
+            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: !i && v ? { paddingBottom: Ee } : void 0,
+            children: [
+              /* @__PURE__ */ u(
+                we,
+                {
+                  tabId: e.id,
+                  pageId: e.pageId,
+                  initialParams: e.urlParams || {},
+                  children: [
+                    /* @__PURE__ */ t(Te, {}),
+                    /* @__PURE__ */ t(
+                      ve,
+                      {
+                        pageConfig: s,
+                        pageId: e.pageId,
+                        tabId: e.id,
+                        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") })
+                          ] })
+                        ] }) }) : a ? a({
+                          pageId: e.pageId,
+                          tabId: e.id,
+                          pageConfig: s,
+                          appConfig: n,
+                          pageParams: e.urlParams || {}
+                        }) : /* @__PURE__ */ t(
+                          ke,
+                          {
+                            components: s.components || [],
+                            appConfig: n,
+                            layoutConfig: s.layout,
+                            pageParams: e.urlParams,
+                            pageId: e.pageId,
+                            tabId: e.id
+                          },
+                          `layout-${e.id}`
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              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",
+                  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: n.publishHistoryPageKey,
+                        navigationTitle: c("publish_history_nav", "Publish History"),
+                        icon: "history",
+                        urlParams: {}
+                      }
+                    })
+                  ),
+                  children: c("view_publish_history", "View publish history")
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    s?.comingSoon?.enabled && /* @__PURE__ */ t(Ie, {})
+  ] });
+});
+A.displayName = "TabContent";
+const De = ({
+  tabs: e,
+  activeTabId: n,
+  appConfig: r,
+  availableParameters: m = [],
+  renderPage: l
+}) => {
+  const { t: a } = L(["workbench", "common"]), c = O(), d = Me(), s = B(() => {
+    if (e.length === 0) return null;
+    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: v?.pageConfig ?? {
+      layout: pe([]),
+      components: []
+    },
+    pageId: v?.pageId ?? "",
+    isActive: !!v
+  }), I(() => {
+    if (!c || d === 0)
+      return;
+    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__ */ 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__ */ 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__ */ 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__ */ 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: 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: 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: 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: 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": !p,
+        children: [
+          _ ? /* @__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",
+              {
+                onClick: () => {
+                  window.location.reload();
+                },
+                className: "btn btn-primary",
+                children: a("multi_page_renderer.reload", "Reload")
+              }
+            )
+          ] }) }) : null,
+          k && /* @__PURE__ */ t(
+            A,
+            {
+              tab: i,
+              appConfig: r,
+              availableParameters: m,
+              isEmpty: !i.pageConfig?.components?.length,
+              isTabActive: p,
+              renderPage: l
+            }
+          )
+        ]
+      },
+      i.id
+    );
+  }) });
+};
+export {
+  De as M,
+  ke as P
+};
+//# sourceMappingURL=MultiPageRenderer-DftFCAIJ.js.map