@dashadmin/dash-boilerplate 1.3.16

package/dist/index.js

@@ -0,0 +1,827 @@
+import { jsx as c, jsxs as y, Fragment as U } from "react/jsx-runtime";
+import A, { createContext as $, useState as v, useCallback as T, useEffect as p, useMemo as E, useContext as V, useTransition as _, Suspense as J } from "react";
+import { ErrorBoundary as G } from "react-error-boundary";
+import K from "@mui/material/CssBaseline";
+import { ThemeProvider as Q, createTheme as X } from "@mui/material";
+import { updateDomCssVariables as I, dashStorage as Y } from "@dashadmin/dash-utils";
+import { useDispatch as B } from "react-redux";
+import { syncDeviceStoreToLocalStorage as Z, syncLocalStorageToDeviceStore as D, AuthPersistenceService as f } from "@dashadmin/dash-auth";
+import { DASH_REDUX_ACTIONS as S } from "@dashadmin/dash-admin-state";
+import { ACTION_UPDATE_AUTH as P } from "@dashadmin/dash-admin-state/src/redux/reducers/Auth";
+import z from "@dashadmin/dash-admin/src/contexts/auth/DASHAuthenticationService";
+const M = (t, e) => e.split(".").reduce((o, r) => o ? o[r] : null, t), N = (t, e) => !e || !t ? t : Object.keys(e).reduce((o, r) => o.replace(new RegExp(`%\\{${r}\\}`, "g"), String(e[r])), t), ee = [
+  { locale: "en", name: "English" },
+  { locale: "es", name: "Español" }
+], Ce = (t) => {
+  const {
+    translations: e,
+    initialLocale: o = "es",
+    fallbackLocale: r = "en",
+    locales: a = ee,
+    onLocaleChange: s
+  } = t;
+  let n = o;
+  return {
+    translate: (i, b) => {
+      const C = e[n] || e[r] || {}, x = M(C, i);
+      if (typeof x == "string")
+        return N(x, b);
+      if (n !== r) {
+        const j = e[r] || {}, R = M(j, i);
+        if (typeof R == "string")
+          return N(R, b);
+      }
+      return i;
+    },
+    changeLocale: async (i) => e[i] ? (n = i, localStorage.setItem("dash-user-locale", i), s?.(i), Promise.resolve()) : Promise.reject(new Error(`Locale '${i}' not found`)),
+    getLocale: () => n,
+    getLocales: () => a,
+    getMessages: (i) => e[i] || {}
+  };
+}, H = "dash:locale-change", te = {
+  i18nProvider: null,
+  locale: "es",
+  setI18nProvider: () => {
+  },
+  setLocale: () => {
+  }
+}, q = $(te), Ee = ({
+  children: t,
+  defaultLocale: e = "es"
+}) => {
+  const [o, r] = v(null), [a, s] = v(() => typeof window < "u" && localStorage.getItem("dash-user-locale") || e), n = T(async (l) => {
+    console.log("🌐 I18nBridgeProviderLight: Setting bridged i18nProvider", {
+      providerLocale: l?.getLocale?.(),
+      desiredLocale: a
+    }), r(l);
+    const u = l?.getLocale?.();
+    if (u && u !== a && l?.changeLocale) {
+      console.log(`🌐 I18nBridgeProviderLight: Provider locale (${u}) differs from desired (${a}), switching...`);
+      try {
+        await l.changeLocale(a), console.log(`🌐 I18nBridgeProviderLight: Successfully switched provider to ${a}`);
+      } catch (m) {
+        console.warn("🌐 I18nBridgeProviderLight: Failed to switch provider locale:", m);
+      }
+    } else l?.getLocale && s(l.getLocale());
+  }, [a]);
+  p(() => {
+    const l = async (u) => {
+      const g = u.detail?.locale;
+      if (g && g !== a) {
+        if (console.log("🌐 I18nBridgeProviderLight: Received locale change event:", g), o?.changeLocale)
+          try {
+            await o.changeLocale(g);
+          } catch (i) {
+            console.warn("Failed to change provider locale:", i);
+          }
+        s(g);
+      }
+    };
+    return window.addEventListener(H, l), () => {
+      window.removeEventListener(H, l);
+    };
+  }, [o, a]);
+  const d = E(() => ({
+    i18nProvider: o,
+    locale: a,
+    setI18nProvider: n,
+    setLocale: s
+  }), [o, a, n]);
+  return /* @__PURE__ */ c(q.Provider, { value: d, children: t });
+}, k = () => V(q), Pe = () => {
+  const { i18nProvider: t } = k();
+  return E(() => t?.getLocales ? t.getLocales() : [], [t]);
+}, Be = () => {
+  const { i18nProvider: t, setLocale: e } = k();
+  return T(async (r) => {
+    t?.changeLocale && (await t.changeLocale(r), e(r));
+  }, [t, e]);
+}, ke = () => {
+  const { locale: t } = k();
+  return t;
+}, Ie = () => {
+  const { i18nProvider: t } = k();
+  return T((o, r) => t?.translate ? t.translate(o, r) : o, [t]);
+}, O = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32px" height="32px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 16 16"><g><path style="opacity:1" fill="#FFFFFF" d="M11.506 12.388q0.306 0.011 0.617 0.008v1.281h-0.89a2 2 0 0 1 -0.898 -0.215 1.24 1.24 0 0 1 -0.629 -0.761 2.5 2.5 0 0 1 -0.094 -0.554q-0.006 -1.082 -0.004 -2.163h-0.609q0.002 -0.398 -0.004 -0.796a616 616 0 0 0 -1.676 2.023 657 657 0 0 0 2.069 2.46q-0.935 0.012 -1.874 0.008L6.003 11.61q-0.006 1.035 -0.004 2.069H4.485q0.004 -2.983 -0.008 -5.966 -0.661 -0.21 -0.863 -0.875a2 2 0 0 1 -0.039 -0.258q-0.008 -2.108 0 -4.217 0.12 -0.356 0.48 -0.246 0.153 0.079 0.191 0.246l0.008 3.272q0.05 0.116 0.168 0.066 0.035 -0.027 0.051 -0.066l0.008 -3.264q0.095 -0.329 0.433 -0.269 0.191 0.059 0.238 0.254l0.008 3.272q0.065 0.14 0.195 0.055l0.023 -0.039 0.008 -3.264q0.086 -0.321 0.418 -0.285 0.197 0.057 0.254 0.254a352 352 0 0 1 0.016 3.295q0.062 0.109 0.176 0.051 0.029 -0.028 0.043 -0.066l0.008 -3.28q0.045 -0.17 0.207 -0.238 0.25 -0.074 0.41 0.129a0.5 0.5 0 0 1 0.047 0.109q0.014 1.063 0.012 2.128 0.002 1.088 -0.012 2.175 -0.137 0.844 -0.96 1.078a301 301 0 0 0 0 3.006q0.753 -1.005 1.503 -2.011 1.05 -0.006 2.101 -0.004 0.002 -0.519 -0.004 -1.039a1.82 1.82 0 0 1 -1.281 -1.101q-0.197 -0.504 -0.211 -1.046a4.7 4.7 0 0 1 0.383 -2.03q0.242 -0.547 0.668 -0.964 0.395 -0.364 0.929 -0.445 0.695 -0.056 1.218 0.398 0.476 0.438 0.73 1.035 0.513 1.212 0.32 2.514a2.26 2.26 0 0 1 -0.484 1.07 1.75 1.75 0 0 1 -0.754 0.5v1.109h0.992v1.265h-0.992q-0.002 1.042 0.004 2.085 0.05 0.323 0.379 0.32"/></g></svg>', oe = () => /* @__PURE__ */ c("span", { dangerouslySetInnerHTML: { __html: O } }), ze = ({
+  message: t,
+  showMessage: e = !1
+}) => /* @__PURE__ */ y("div", { children: [
+  /* @__PURE__ */ y("div", { className: "initial-loader", children: [
+    /* @__PURE__ */ c("div", { className: "initial-loader-spinner" }),
+    /* @__PURE__ */ c("span", { className: "initial-loader-icon", children: /* @__PURE__ */ c(oe, {}) })
+  ] }),
+  e && t && /* @__PURE__ */ c("div", { className: "initial-loader-text", children: t })
+] }), Ae = `<div class="initial-loader">
+    <div class="initial-loader-spinner">
+        <span class="initial-loader-icon">
+        ${O}
+        </span>
+    </div>
+    <div class="initial-loader-text"></div>
+</div>`, Te = () => {
+  if (typeof document > "u" || document.getElementById("critical-loading-styles")) return;
+  const t = document.createElement("style");
+  t.id = "critical-loading-styles", t.textContent = `
+        .initial-loader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: var(--text-color, #fff);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            z-index: 9999;
+        }
+        .initial-loader-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255,255,255,0.1);
+            border-top-color: var(--primary-color, #3f51b5);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .initial-loader-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 16px;
+            height: 16px;
+            transform: translate(-50%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+        }
+        .initial-loader-text {
+            margin-top: 16px;
+            font-size: 14px;
+            opacity: 0.7;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    `, document.head.appendChild(t);
+};
+class Re extends A.Component {
+  constructor(e) {
+    super(e), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError(e) {
+    return { hasError: !0, error: e };
+  }
+  componentDidCatch(e, o) {
+    console.error("CustomErrorBoundary caught error:", e, o), this.props.onError?.(e, o);
+  }
+  handleReload = () => {
+    window.location.reload();
+  };
+  render() {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ y(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          backgroundColor: "var(--bodybg-primary, #121212)",
+          color: "var(--text-color, #ffffff)",
+          flexDirection: "column",
+          gap: "20px"
+        },
+        children: [
+          /* @__PURE__ */ c("h2", { children: "Something went wrong" }),
+          /* @__PURE__ */ c("p", { style: { opacity: 0.8 }, children: this.state.error?.message }),
+          /* @__PURE__ */ c(
+            "button",
+            {
+              onClick: this.handleReload,
+              style: {
+                padding: "10px 20px",
+                backgroundColor: "var(--primary-color, #007bff)",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: 500
+              },
+              children: "Reload Page"
+            }
+          )
+        ]
+      }
+    ) : this.props.children;
+  }
+}
+const re = ({ error: t, resetErrorBoundary: e }) => /* @__PURE__ */ y(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100vh",
+      gap: "16px",
+      color: "var(--text-color)",
+      backgroundColor: "var(--bodybg-primary)"
+    },
+    children: [
+      /* @__PURE__ */ c("h1", { style: { margin: 0, fontSize: "1.5rem" }, children: "Something went wrong" }),
+      /* @__PURE__ */ c("p", { style: { margin: 0, opacity: 0.8 }, children: t?.message || "Unknown error" }),
+      /* @__PURE__ */ c(
+        "button",
+        {
+          onClick: e,
+          style: {
+            padding: "8px 24px",
+            backgroundColor: "var(--primary-color)",
+            color: "var(--primary-contrast)",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: 500
+          },
+          children: "Try Again"
+        }
+      )
+    ]
+  }
+), ne = () => /* @__PURE__ */ y(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100vh",
+      backgroundColor: "var(--bodybg-primary)"
+    },
+    children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: "loading-spinner",
+          style: {
+            width: "40px",
+            height: "40px",
+            border: "3px solid rgba(255,255,255,0.1)",
+            borderTopColor: "var(--primary-color)",
+            borderRadius: "50%",
+            animation: "spin 1s linear infinite"
+          }
+        }
+      ),
+      /* @__PURE__ */ c("style", { children: `
+            @keyframes spin {
+                to { transform: rotate(360deg); }
+            }
+        ` })
+    ]
+  }
+), De = ({
+  children: t,
+  onReset: e,
+  showSplash: o = !0
+}) => {
+  const [r, a] = _(), [s, n] = v(!0);
+  return A.useEffect(() => {
+    a(() => {
+      n(!1);
+    });
+  }, []), /* @__PURE__ */ y(U, { children: [
+    /* @__PURE__ */ c(G, { FallbackComponent: re, onReset: () => {
+      e ? e() : window.location.reload();
+    }, children: /* @__PURE__ */ c(J, { fallback: /* @__PURE__ */ c(ne, {}), children: t }) }),
+    o && /* @__PURE__ */ c("div", { className: !r && !s ? "dash-splash fade-out" : "dash-splash" })
+  ] });
+}, ae = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  gap: "16px",
+  color: "var(--text-color, #333)",
+  backgroundColor: "var(--background-color, #fff)"
+}, ie = {
+  margin: 0,
+  fontSize: "1.25rem",
+  fontWeight: 500,
+  color: "#f44336"
+}, se = {
+  marginTop: "16px",
+  padding: "8px 16px",
+  backgroundColor: "#1976d2",
+  color: "white",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: 500
+}, Me = ({
+  error: t,
+  message: e = "Failed to initialize application",
+  onRetry: o = () => window.location.reload(),
+  retryLabel: r = "Retry",
+  containerStyle: a,
+  messageStyle: s,
+  buttonStyle: n
+}) => {
+  const d = t instanceof Error ? t.message : t || e;
+  return /* @__PURE__ */ y("div", { style: { ...ae, ...a }, children: [
+    /* @__PURE__ */ c("h6", { style: { ...ie, ...s }, children: d }),
+    /* @__PURE__ */ c(
+      "button",
+      {
+        onClick: o,
+        style: { ...se, ...n },
+        children: r
+      }
+    )
+  ] });
+}, le = ({
+  message: t = "Failed to load application",
+  onRetry: e = () => window.location.reload(),
+  retryLabel: o = "Retry",
+  containerStyle: r,
+  messageStyle: a,
+  buttonStyle: s
+}) => {
+  const n = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    color: "#000000",
+    gap: "12px"
+  }, d = {
+    padding: "8px 24px",
+    backgroundColor: "#57005aff",
+    color: "#fff",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ y("div", { style: { ...n, ...r }, children: [
+    /* @__PURE__ */ c("h1", { style: a, children: t }),
+    /* @__PURE__ */ c(
+      "button",
+      {
+        onClick: e,
+        style: { ...d, ...s },
+        children: o
+      }
+    )
+  ] });
+}, Ne = ({
+  importFn: t,
+  delay: e = 100,
+  ErrorFallback: o = le,
+  errorMessage: r = "Failed to load application"
+}) => A.lazy(() => new Promise((a) => {
+  setTimeout(() => {
+    t().then((s) => {
+      a({ default: s.default });
+    }).catch((s) => {
+      console.error("Failed to load application:", s), a({
+        default: () => /* @__PURE__ */ c(
+          o,
+          {
+            error: s,
+            message: r
+          }
+        )
+      });
+    });
+  }, e);
+})), F = (t, e) => {
+  if (typeof document > "u") return e;
+  const o = getComputedStyle(document.documentElement).getPropertyValue(t).trim(), r = parseInt(o, 10);
+  return isNaN(r) ? e : r;
+}, h = (t) => typeof document > "u" ? null : getComputedStyle(document.documentElement).getPropertyValue(t).trim() || null, ce = (t) => {
+  const e = {}, o = `--${t}`, r = h(`--primary-color${o}`);
+  r && (e.primaryColor = r);
+  const a = h(`--primary-contrast${o}`);
+  a && (e.primaryContrast = a);
+  const s = h(`--secondary-color${o}`);
+  s && (e.secondaryColor = s);
+  const n = h(`--bodybg-primary${o}`);
+  n && (e.bodyBgPrimary = n);
+  const d = h(`--bodybg-secondary${o}`);
+  d && (e.bodyBgSecondary = d);
+  const l = h(`--component-bg${o}`);
+  l && (e.componentBg = l);
+  const u = h(`--text-color${o}`);
+  u && (e.textColor = u);
+  const m = h(`--text-contrast${o}`);
+  m && (e.textContrast = m);
+  const g = h(`--heading-color${o}`);
+  g && (e.headingColor = g);
+  const i = h(`--link-color${o}`);
+  i && (e.linkColor = i);
+  const b = h(`--border-color${o}`);
+  return b && (e.borderColor = b), e;
+}, de = (t, e) => {
+  const o = ce(t), r = F("--font-size-base", 14), a = F("--border-radius-base", 6), { palette: s, colorSchemes: n, defaultColorScheme: d, ...l } = e || {};
+  return X({
+    breakpoints: {
+      keys: ["xs", "sm", "md", "lg", "xl"],
+      values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 }
+    },
+    palette: {
+      mode: t,
+      primary: {
+        main: o.primaryColor,
+        contrastText: o.primaryContrast
+      },
+      secondary: {
+        main: o.secondaryColor
+      },
+      background: {
+        default: o.bodyBgPrimary,
+        paper: o.componentBg
+      },
+      text: {
+        primary: o.textColor,
+        secondary: o.textContrast
+      },
+      divider: o.borderColor
+    },
+    typography: {
+      fontFamily: '"Montserrat", "Roboto", "Helvetica", "Arial", sans-serif',
+      fontSize: r
+    },
+    shape: {
+      borderRadius: a
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            transition: "all 0.2s ease-in-out",
+            textTransform: "none"
+          }
+        }
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          body: {
+            backgroundColor: o.bodyBgPrimary,
+            color: o.textColor
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundImage: "none"
+          }
+        }
+      }
+    },
+    ...l
+  });
+}, W = $(null), He = () => {
+  const t = V(W);
+  if (!t)
+    throw new Error("useDashThemeContextLight must be used within a DashThemeProviderLight");
+  return t;
+}, Fe = ({
+  children: t,
+  extendedOptions: e,
+  defaultMode: o
+}) => {
+  const [r, a] = v(() => {
+    if (typeof document > "u") return o || "dark";
+    const i = document.documentElement.getAttribute("data-theme");
+    return i === "light" || i === "dark" ? i : o || "dark";
+  }), [s, n] = v(0), d = E(() => de(r, e), [r, e, s]), l = (i) => {
+    a(i), typeof document < "u" && (document.documentElement.setAttribute("data-theme", i), localStorage.setItem("theme", i), I(i));
+  }, u = () => {
+    l(r === "dark" ? "light" : "dark");
+  }, m = () => {
+    n((i) => i + 1);
+  };
+  p(() => {
+    if (typeof document > "u") return;
+    const i = new MutationObserver((b) => {
+      b.forEach((C) => {
+        if (C.type === "attributes" && C.attributeName === "data-theme") {
+          const x = document.documentElement.getAttribute("data-theme");
+          (x === "light" || x === "dark") && x !== r && a(x);
+        }
+      });
+    });
+    return i.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme"]
+    }), () => i.disconnect();
+  }, [r]), p(() => {
+    typeof document > "u" || I(r);
+  }, [r]), p(() => {
+    if (typeof window > "u") return;
+    const i = () => {
+      console.log("DashThemeProviderLight: Refreshing theme from CSS variables"), m();
+    };
+    return window.addEventListener("DASHTRefreshTheme", i), () => window.removeEventListener("DASHTRefreshTheme", i);
+  }, []);
+  const g = E(
+    () => ({
+      theme: d,
+      currentMode: r,
+      setMode: l,
+      toggleMode: u,
+      refreshTheme: m
+    }),
+    [d, r]
+  );
+  return /* @__PURE__ */ y(Q, { theme: d, children: [
+    /* @__PURE__ */ c(K, {}),
+    /* @__PURE__ */ c(W.Provider, { value: g, children: t })
+  ] });
+}, $e = (t) => {
+  const e = B();
+  p(() => {
+    (() => {
+      console.log("🔍 Bootstrap: Checking for persisted auth data...");
+      const r = f.getUser(), a = f.getToken(), s = JSON.parse(Y.getItem("authenticated") || "false"), n = f.getAuth();
+      if (console.log("🔍 Bootstrap: Persisted data check:", {
+        hasStoredUser: !!r,
+        hasStoredToken: !!a,
+        isAuthenticated: s,
+        hasPersistedAuth: !!n,
+        currentReduxAuth: t
+      }), s && r && a && !t) {
+        console.log("🔄 Bootstrap: Restoring auth session to Redux from localStorage");
+        let d = r;
+        if (typeof r == "string") {
+          console.error("❌ Bootstrap: Stored user is string, this should not happen");
+          try {
+            d = JSON.parse(r);
+          } catch {
+            console.error("❌ Bootstrap: Cannot parse user string, clearing auth data"), f.clearAuth();
+            return;
+          }
+        }
+        e(
+          S.updateAuth(P, {
+            user: d,
+            authenticated: !0,
+            auth: n?.auth || null
+          })
+        ), console.log("✅ Bootstrap: Redux state restored from persisted data");
+      }
+    })();
+  }, [e, t]);
+}, Ve = () => {
+  const t = B();
+  p(() => {
+    const e = (o) => {
+      console.log("🔐 Bootstrap: Received logout event", o.detail), t(
+        S.updateAuth(P, {
+          user: null,
+          authenticated: !1,
+          auth: null
+        })
+      ), f.clearAuth(), localStorage.clear();
+    };
+    return window.addEventListener("auth:logout", e), () => {
+      window.removeEventListener("auth:logout", e);
+    };
+  }, [t]);
+}, qe = () => {
+  const [t, e] = v(!0), [o, r] = v(null), a = B();
+  return p(() => {
+    t && (async () => {
+      try {
+        console.log("🚀 Bootstrap: Starting app initialization..."), await Z();
+        const n = await z.initializeApp(!0);
+        if (console.log("🔍 Bootstrap: Initialization result:", n), n.success) {
+          if (console.log("✅ Bootstrap: Auto-login successful"), a(
+            S.updateAuth(P, {
+              user: n.user,
+              authenticated: !0,
+              auth: n.auth || null
+            })
+          ), window.DashIPCService?.speak(`${n.user?.name}, Bienvenido!`), await D(), r(null), n.redirectAfterLogin) {
+            console.log("🔄 Bootstrap: Emitting auth:redirect event", n.redirectAfterLogin);
+            const d = new CustomEvent("auth:redirect", {
+              detail: { to: n.redirectAfterLogin }
+            });
+            window.dispatchEvent(d);
+          }
+        } else {
+          console.log("ℹ️ Bootstrap: No valid authentication found");
+          const d = f.getAuth();
+          if (d && d.auth) {
+            console.log("🔄 Bootstrap: Found persisted auth data, attempting token initialization...");
+            try {
+              const l = await z.initializeFromToken();
+              if (l.success) {
+                if (console.log("✅ Bootstrap: Token initialization successful"), a(
+                  S.updateAuth(P, {
+                    user: l.user,
+                    authenticated: !0,
+                    auth: l.auth || null
+                  })
+                ), await D(), r(null), l.redirectAfterLogin) {
+                  console.log(
+                    "🔄 Bootstrap: Emitting auth:redirect event",
+                    l.redirectAfterLogin
+                  );
+                  const u = new CustomEvent("auth:redirect", {
+                    detail: { to: l.redirectAfterLogin }
+                  });
+                  window.dispatchEvent(u);
+                }
+              } else
+                console.log("❌ Bootstrap: Token initialization failed:", l.error), r(null), f.clearAuth();
+            } catch (l) {
+              console.error("❌ Bootstrap: Token initialization error:", l), r(null), f.clearAuth();
+            }
+          } else
+            console.log("ℹ️ Bootstrap: No persisted auth data found"), f.clearAuth();
+        }
+      } catch (n) {
+        console.error("❌ Bootstrap: App initialization failed:", n), r("Failed to initialize application");
+      } finally {
+        e(!1);
+      }
+    })();
+  }, [a, t]), { isLoading: t, initializationError: o };
+}, Oe = () => {
+  p(() => {
+    const e = new URLSearchParams(window.location.search).get("redirect");
+    e && e !== "/login" && (console.log("ℹ️ RedirectTO: Setting redirect to by searchParams to:", e), z.setPendingRedirect(e));
+  }, []);
+}, ue = "dash:locale-change", We = (t = ["es", "en"], e = "es") => {
+  const o = B();
+  p(() => {
+    if (typeof window > "u") return;
+    const a = new URLSearchParams(window.location.search).get("lang"), s = localStorage.getItem("dash-user-locale");
+    let n = e;
+    a && t.includes(a) ? n = a : s && t.includes(s) && (n = s), s !== n ? (console.log(`🌐 Bootstrap: Locale change detected: ${s} -> ${n}`), localStorage.setItem("dash-user-locale", n)) : console.log(`🌐 Bootstrap: Initializing locale from storage: ${n}`), console.log(`🌐 Bootstrap: Dispatching locale to Redux: ${n}`), o(S.switchLanguage(n)), console.log(`🌐 Bootstrap: Emitting locale change event: ${n}`), window.dispatchEvent(new CustomEvent(ue, {
+      detail: { locale: n }
+    }));
+  }, [o, t, e]);
+}, je = () => {
+  const [t, e] = v(
+    typeof window < "u" ? window.location.pathname : "/"
+  );
+  return p(() => {
+    if (typeof window > "u") return;
+    const o = () => {
+      const r = window.location.pathname;
+      r !== t && (console.log("🔍 Bootstrap: URL changed from", t, "to", r), e(r));
+    };
+    return window.addEventListener("popstate", o), () => window.removeEventListener("popstate", o);
+  }, [t]), t;
+}, Ue = (t = "dark") => {
+  p(() => {
+    if (typeof document > "u") return;
+    const e = localStorage.getItem("theme"), o = e === "light" || e === "dark" ? e : t;
+    document.documentElement.setAttribute("data-theme", o), e || localStorage.setItem("theme", o);
+  }, [t]);
+}, _e = (t) => {
+  if (typeof document > "u" || typeof localStorage > "u") return;
+  const e = localStorage.getItem("theme"), o = e === "light" || e === "dark" ? e : t;
+  document.documentElement.setAttribute("data-theme", o), e || localStorage.setItem("theme", o);
+  try {
+    I(o), console.log("🎨 Bootstrap: Initialized theme variables for:", o);
+  } catch (r) {
+    console.warn("Failed to initialize theme variables:", r);
+  }
+}, Je = async () => {
+  if (typeof window > "u") return;
+  const t = window.electronStore;
+  if (t) {
+    const e = await t.syncToLocalStorage();
+    Object.entries(e).forEach(([o, r]) => {
+      window.localStorage.setItem(o, JSON.stringify(r));
+    });
+  }
+}, Ge = async () => {
+  if (!(typeof window > "u") && window.electronStore)
+    try {
+      const t = await window.electronStore.syncToLocalStorage();
+      Object.entries(t).forEach(([e, o]) => {
+        window.localStorage.setItem(e, JSON.stringify(o));
+      }), console.log("✅ Electron store synced to localStorage");
+    } catch (t) {
+      console.error("❌ Failed to sync Electron store:", t);
+    }
+}, Ke = () => typeof window < "u" && !!window.electronStore, Qe = async (t, e) => {
+  if (typeof window > "u") return e;
+  if (window.electronStore)
+    try {
+      return await window.electronStore.get(t);
+    } catch {
+      return e;
+    }
+  const o = localStorage.getItem(t);
+  if (o)
+    try {
+      return JSON.parse(o);
+    } catch {
+      return o;
+    }
+  return e;
+}, Xe = async (t, e) => {
+  if (!(typeof window > "u")) {
+    if (window.electronStore)
+      try {
+        await window.electronStore.set(t, e);
+      } catch (o) {
+        console.error("Failed to set Electron store value:", o);
+      }
+    localStorage.setItem(t, JSON.stringify(e));
+  }
+}, L = (t, e) => {
+  if (typeof document > "u") return e;
+  const o = getComputedStyle(document.documentElement).getPropertyValue(t).trim(), r = parseInt(o, 10);
+  return isNaN(r) ? e : r;
+}, Ye = (t, e = "") => typeof document > "u" ? e : getComputedStyle(document.documentElement).getPropertyValue(t).trim() || e, w = {
+  sidebarLargeWidth: 255,
+  sidebarSmallWidth: 64,
+  sidebarHorizontalHeight: 120,
+  logoVerticalMaxWidth: 130,
+  logoVerticalMaxHeight: 130,
+  logoHorizontalMaxWidth: 200,
+  logoHorizontalMaxHeight: 60
+}, ge = () => ({
+  sidebarLargeWidth: L("--sidebar-large-width", w.sidebarLargeWidth),
+  sidebarSmallWidth: L("--sidebar-small-width", w.sidebarSmallWidth),
+  sidebarHorizontalHeight: L("--sidebar-horizontal-height", w.sidebarHorizontalHeight),
+  logoVerticalMaxWidth: L("--logo-vertical-max-width", w.logoVerticalMaxWidth),
+  logoVerticalMaxHeight: L("--logo-vertical-max-height", w.logoVerticalMaxHeight),
+  logoHorizontalMaxWidth: L("--logo-horizontal-max-width", w.logoHorizontalMaxWidth),
+  logoHorizontalMaxHeight: L("--logo-horizontal-max-height", w.logoHorizontalMaxHeight)
+}), Ze = (t = {}) => {
+  const e = {
+    ...w,
+    ...ge(),
+    ...t.layoutDimensions
+  };
+  return {
+    appName: t.appName || "Dash App",
+    horizontalLogo: t.horizontalLogo,
+    squaredLogo: t.squaredLogo,
+    loginBackground: t.loginBackground,
+    sidebarPosition: t.sidebarPosition || "left",
+    ...e,
+    // Padding configuration (derived from sidebar sizes)
+    paddingHorizontal: e.sidebarLargeWidth,
+    paddingVertical: e.sidebarHorizontalHeight
+  };
+};
+export {
+  De as AppWrapperLight,
+  Re as CustomErrorBoundary,
+  w as DEFAULT_LAYOUT_DIMENSIONS,
+  W as DashThemeContext,
+  Fe as DashThemeProviderLight,
+  le as DefaultAppLoadErrorFallback,
+  Me as DefaultInitializationErrorFallback,
+  Ae as GlobalLoaderHtmlMarkup,
+  ze as GlobalSmallLoader,
+  q as I18nBridgeContext,
+  Ee as I18nBridgeProviderLight,
+  Ze as createDefaultPanelSettings,
+  Ne as createLazyAppLoader,
+  Ce as createSimpleI18nProvider,
+  L as getCssVariableNumber,
+  Ye as getCssVariableString,
+  Qe as getElectronStoreValue,
+  ge as getLayoutDimensionsFromCss,
+  _e as initializeThemeEarly,
+  Te as injectCriticalStyles,
+  Ke as isElectron,
+  Xe as setElectronStoreValue,
+  Je as syncElectronStore,
+  Ge as syncElectronStoreToLocalStorage,
+  qe as useAppInitialization,
+  Be as useBridgedChangeLocaleLight,
+  ke as useBridgedLocaleLight,
+  Pe as useBridgedLocalesLight,
+  He as useDashThemeContextLight,
+  Ue as useEarlyThemeInit,
+  k as useI18nBridgeLight,
+  $e as useInitializeReduxFromPersisted,
+  Ve as useLogoutEventListener,
+  je as usePathnameTracker,
+  Oe as usePendingRedirect,
+  Ie as useTranslateLight,
+  We as useUrlLocaleDetection
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dashadmin/dash-boilerplate",
+  "version": "1.3.16",
+  "private": false,
+  "main": "src/index.ts",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint --ext .ts,.tsx .",
+    "format": "pnpm prettier --write .",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/material": "^7.3.10",
+    "@dashadmin/dash-admin-state": "workspace:*",
+    "@dashadmin/dash-auth": "workspace:*",
+    "@dashadmin/dash-auto-admin": "workspace:*",
+    "@dashadmin/dash-axios-hook": "workspace:*",
+    "@dashadmin/dash-constants": "workspace:*",
+    "@dashadmin/dash-utils": "workspace:*",
+    "numeral": "^2.0.6",
+    "react": "latest",
+    "react-admin": "5.14.7",
+    "react-dom": "latest",
+    "react-error-boundary": "^4.0.0",
+    "react-redux": "latest",
+    "@dashadmin/dash-admin": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/numeral": "^2.0.5",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@dashadmin/dash-eslint": "workspace:*",
+    "@dashadmin/dash-prettier": "workspace:*",
+    "@dashadmin/dash-tsconfig": "workspace:*",
+    "typescript": "latest",
+    "vite": "^5.2.0",
+    "rollup": "^4.0.0"
+  },
+  "publishConfig": {
+    "name": "@dashadmin/dash-boilerplate",
+    "access": "public",
+    "main": "dist/index.js",
+    "exports": {
+      ".": {
+        "import": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ]
+}

package/src/index.ts

@@ -0,0 +1,84 @@
+/**
+ * dash-boilerplate
+ * 
+ * Shared boilerplate code for Dash lightweight applications.
+ * Provides i18n, theming, components, and utilities for both
+ * public and private app flows.
+ */
+
+// i18n module
+export {
+    createSimpleI18nProvider,
+    I18nBridgeProviderLight,
+    useI18nBridgeLight,
+    useBridgedLocalesLight,
+    useBridgedChangeLocaleLight,
+    useBridgedLocaleLight,
+    useTranslateLight,
+    I18nBridgeContext,
+} from './i18n';
+export type {
+    SimpleI18nProvider,
+    LocaleDefinition,
+    TranslationMessages,
+    TranslationsMap,
+    I18nBridgeProviderLightProps,
+    CreateSimpleI18nProviderOptions,
+} from './i18n';
+
+// Components module
+export {
+    GlobalSmallLoader,
+    GlobalLoaderHtmlMarkup,
+    injectCriticalStyles,
+    CustomErrorBoundary,
+    AppWrapperLight,
+    // Default fallback components
+    DefaultInitializationErrorFallback,
+    DefaultAppLoadErrorFallback,
+    createLazyAppLoader,
+} from './components';
+export type {
+    GlobalSmallLoaderProps,
+    CustomErrorBoundaryProps,
+    AppWrapperLightProps,
+    DefaultErrorFallbackProps,
+    DefaultLoadingFallbackProps,
+    CreateLazyAppLoaderOptions,
+} from './components';
+
+// Theme module
+export {
+    DashThemeProviderLight,
+    useDashThemeContextLight,
+    DashThemeContext,
+} from './theme';
+export type {
+    DashThemeContextType,
+    DashThemeProviderLightProps,
+} from './theme';
+
+// Utils module
+export {
+    useInitializeReduxFromPersisted,
+    useLogoutEventListener,
+    useAppInitialization,
+    usePendingRedirect,
+    useUrlLocaleDetection,
+    usePathnameTracker,
+    useEarlyThemeInit,
+    initializeThemeEarly,
+    syncElectronStore,
+    // Electron store utilities
+    syncElectronStoreToLocalStorage,
+    isElectron,
+    getElectronStoreValue,
+    setElectronStoreValue,
+    // CSS Variable utilities
+    getCssVariableNumber,
+    getCssVariableString,
+    getLayoutDimensionsFromCss,
+    createDefaultPanelSettings,
+    DEFAULT_LAYOUT_DIMENSIONS,
+} from './utils';
+export type { AppInitializationResult, LayoutDimensions, PanelSettingsOptions } from './utils';