@neetru/sdk 3.4.1 → 3.4.2

package/dist/react.mjs

@@ -1,7 +1,566 @@
-import * as React from 'react';
+import * as React2 from 'react';
 
 // src/react.ts
 
+// src/types.ts
+var DEFAULT_BASE_URL = "https://api.neetru.com";
+
+// src/account-bar.ts
+var h = React2.createElement;
+var DEFAULT_LABELS = {
+  accountButton: "Abrir menu da conta",
+  appsButton: "Seus produtos Neetru",
+  appsTitle: "Trocar de produto",
+  myAccount: "Minha conta Neetru",
+  accountSettings: "Configura\xE7\xF5es da conta",
+  signOut: "Sair",
+  currentBadge: "Atual",
+  emptyProducts: "Nenhum outro produto dispon\xEDvel."
+};
+async function fetchNeetruAccountBar(client) {
+  const auth = client.auth;
+  const idToken = typeof auth?.getIdToken === "function" ? auth.getIdToken() : null;
+  if (!idToken) return null;
+  const config = client.config;
+  const baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+  const fetchFn = config.fetch ?? globalThis.fetch;
+  const url = `${baseUrl}/api/sdk/v1/account/bar`;
+  try {
+    const res = await fetchFn(url, {
+      headers: { authorization: `Bearer ${idToken}`, accept: "application/json" }
+    });
+    if (!res.ok) return null;
+    const body = await res.json();
+    if (!body || typeof body !== "object" || !body.account) return null;
+    return {
+      account: {
+        displayName: String(body.account.displayName ?? ""),
+        email: String(body.account.email ?? ""),
+        photoUrl: body.account.photoUrl ?? null
+      },
+      accountUrl: String(body.accountUrl ?? "https://minhaconta.neetru.com"),
+      products: Array.isArray(body.products) ? body.products.filter(
+        (p) => !!p && typeof p.slug === "string" && typeof p.url === "string"
+      ) : []
+    };
+  } catch {
+    return null;
+  }
+}
+function initialsFrom(nameOrEmail) {
+  const s = (nameOrEmail ?? "").trim();
+  if (!s) return "?";
+  const local = s.includes("@") ? s.split("@")[0] : s;
+  const parts = local.split(/[\s._-]+/).filter(Boolean);
+  if (parts.length === 0) return local.slice(0, 1).toUpperCase();
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+var C = {
+  bg: "#ffffff",
+  bgHover: "#f5f5f5",
+  fg: "#0a0a0a",
+  muted: "#666666",
+  border: "#0a0a0a",
+  borderSoft: "#e5e5e5"
+};
+var SQUARE = 0;
+function WaffleIcon({ size = 18, color = C.fg }) {
+  const dots = [0, 1, 2].flatMap((r) => [0, 1, 2].map((c) => ({ r, c })));
+  const gap = size / 3;
+  const dot = Math.max(2, size / 7);
+  return h(
+    "svg",
+    { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": true, style: { display: "block" } },
+    dots.map(
+      ({ r, c }) => h("rect", {
+        key: `${r}-${c}`,
+        x: c * gap + (gap - dot) / 2,
+        y: r * gap + (gap - dot) / 2,
+        width: dot,
+        height: dot,
+        fill: color
+      })
+    )
+  );
+}
+function focusables(container) {
+  if (!container) return [];
+  return Array.from(
+    container.querySelectorAll(
+      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+}
+function NeetruAccountBar({
+  client,
+  currentProductSlug,
+  settingsUrl,
+  onSignOut,
+  fetchBar,
+  labels,
+  className
+}) {
+  const L = { ...DEFAULT_LABELS, ...labels };
+  const seedAccount = React2.useMemo(() => {
+    try {
+      const u = client.auth.getUser();
+      if (!u) return null;
+      return {
+        displayName: u.displayName || u.email || "",
+        email: u.email || "",
+        photoUrl: u.photoURL ?? null
+      };
+    } catch {
+      return null;
+    }
+  }, [client]);
+  const [data, setData] = React2.useState(null);
+  const [open, setOpen] = React2.useState(null);
+  const [signingOut, setSigningOut] = React2.useState(false);
+  const containerRef = React2.useRef(null);
+  const accountBtnRef = React2.useRef(null);
+  const appsBtnRef = React2.useRef(null);
+  const popoverRef = React2.useRef(null);
+  React2.useEffect(() => {
+    let cancelled = false;
+    const run = fetchBar ?? fetchNeetruAccountBar;
+    Promise.resolve(run(client)).then((res) => {
+      if (!cancelled && res) setData(res);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, fetchBar]);
+  const account = data?.account ?? seedAccount;
+  const accountUrl = data?.accountUrl ?? "https://minhaconta.neetru.com";
+  const products = data?.products ?? [];
+  const closeAndRefocus = React2.useCallback((which) => {
+    setOpen(null);
+    const trigger = which === "apps" ? appsBtnRef.current : accountBtnRef.current;
+    trigger?.focus();
+  }, []);
+  React2.useEffect(() => {
+    if (!open) return;
+    const first = focusables(popoverRef.current)[0];
+    first?.focus();
+    const onDocMouseDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(null);
+      }
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    return () => document.removeEventListener("mousedown", onDocMouseDown);
+  }, [open]);
+  const onPopoverKeyDown = React2.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        closeAndRefocus(open);
+        return;
+      }
+      const items = focusables(popoverRef.current);
+      if (items.length === 0) return;
+      const idx = items.indexOf(document.activeElement);
+      if (e.key === "Tab") {
+        if (e.shiftKey && idx <= 0) {
+          e.preventDefault();
+          items[items.length - 1].focus();
+        } else if (!e.shiftKey && idx === items.length - 1) {
+          e.preventDefault();
+          items[0].focus();
+        }
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        items[(idx + 1) % items.length].focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        items[(idx - 1 + items.length) % items.length].focus();
+      }
+    },
+    [open, closeAndRefocus]
+  );
+  const handleSignOut = React2.useCallback(async () => {
+    if (signingOut) return;
+    setSigningOut(true);
+    try {
+      await client.auth.signOut();
+    } catch {
+    } finally {
+      setSigningOut(false);
+      setOpen(null);
+      onSignOut?.();
+    }
+  }, [client, signingOut, onSignOut]);
+  if (!account) return null;
+  const initials = initialsFrom(account.displayName || account.email);
+  const avatarInner = account.photoUrl ? h("img", {
+    src: account.photoUrl,
+    alt: "",
+    width: 32,
+    height: 32,
+    style: { width: 32, height: 32, objectFit: "cover", display: "block" }
+  }) : h(
+    "span",
+    {
+      "aria-hidden": true,
+      style: {
+        width: 32,
+        height: 32,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: C.fg,
+        color: "#ffffff",
+        fontSize: 13,
+        fontWeight: 700,
+        letterSpacing: "0.02em"
+      }
+    },
+    initials
+  );
+  const iconBtnStyle = (active) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 36,
+    height: 36,
+    padding: 0,
+    borderRadius: SQUARE,
+    border: `1px solid ${active ? C.border : C.borderSoft}`,
+    backgroundColor: active ? C.bgHover : C.bg,
+    color: C.fg,
+    cursor: "pointer",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    overflow: "hidden"
+  });
+  const appsButton = h(
+    "button",
+    {
+      type: "button",
+      ref: appsBtnRef,
+      "aria-label": L.appsButton,
+      "aria-haspopup": "menu",
+      "aria-expanded": open === "apps",
+      "data-neetru-appswitcher-button": "true",
+      onClick: () => setOpen((o) => o === "apps" ? null : "apps"),
+      style: iconBtnStyle(open === "apps")
+    },
+    h(WaffleIcon, {})
+  );
+  const accountButton = h(
+    "button",
+    {
+      type: "button",
+      ref: accountBtnRef,
+      "aria-label": `${L.accountButton}${account.displayName ? ` (${account.displayName})` : ""}`,
+      "aria-haspopup": "menu",
+      "aria-expanded": open === "account",
+      "data-neetru-account-button": "true",
+      onClick: () => setOpen((o) => o === "account" ? null : "account"),
+      style: { ...iconBtnStyle(open === "account"), width: 36, height: 36 }
+    },
+    avatarInner
+  );
+  const popoverStyle = {
+    position: "absolute",
+    top: "calc(100% + 6px)",
+    right: 0,
+    minWidth: 260,
+    maxWidth: 320,
+    backgroundColor: C.bg,
+    border: `1px solid ${C.border}`,
+    borderRadius: SQUARE,
+    zIndex: 1e3,
+    color: C.fg,
+    fontFamily: "inherit"
+    // BMW: sem sombra/glassmorphism — borda sólida define o recorte.
+  };
+  const menuItemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    padding: "10px 14px",
+    background: "transparent",
+    border: "none",
+    borderTop: `1px solid ${C.borderSoft}`,
+    color: C.fg,
+    fontSize: 14,
+    fontWeight: 400,
+    textAlign: "left",
+    textDecoration: "none",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    fontFamily: "inherit"
+  };
+  const hoverHandlers = {
+    onMouseEnter: (e) => {
+      e.currentTarget.style.backgroundColor = C.bgHover;
+    },
+    onMouseLeave: (e) => {
+      e.currentTarget.style.backgroundColor = "transparent";
+    }
+  };
+  const accountPopover = open === "account" ? h(
+    "div",
+    {
+      ref: popoverRef,
+      role: "menu",
+      "aria-label": L.accountButton,
+      "data-neetru-account-menu": "true",
+      onKeyDown: onPopoverKeyDown,
+      style: popoverStyle
+    },
+    // Header identidade
+    h(
+      "div",
+      { style: { display: "flex", gap: 12, alignItems: "center", padding: 14 } },
+      h(
+        "span",
+        {
+          "aria-hidden": true,
+          style: {
+            width: 40,
+            height: 40,
+            flexShrink: 0,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+            backgroundColor: account.photoUrl ? "transparent" : C.fg,
+            color: "#ffffff",
+            fontSize: 15,
+            fontWeight: 700
+          }
+        },
+        account.photoUrl ? h("img", {
+          src: account.photoUrl,
+          alt: "",
+          width: 40,
+          height: 40,
+          style: { width: 40, height: 40, objectFit: "cover", display: "block" }
+        }) : initials
+      ),
+      h(
+        "span",
+        { style: { display: "flex", flexDirection: "column", minWidth: 0 } },
+        h(
+          "span",
+          {
+            style: {
+              fontWeight: 700,
+              fontSize: 14,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          account.displayName || account.email
+        ),
+        account.email ? h(
+          "span",
+          {
+            style: {
+              color: C.muted,
+              fontSize: 12,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          account.email
+        ) : null
+      )
+    ),
+    // Minha conta Neetru
+    h(
+      "a",
+      {
+        role: "menuitem",
+        href: accountUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: menuItemStyle,
+        ...hoverHandlers
+      },
+      L.myAccount
+    ),
+    // Configurações da conta (deste produto)
+    settingsUrl ? h(
+      "a",
+      { role: "menuitem", href: settingsUrl, style: menuItemStyle, ...hoverHandlers },
+      L.accountSettings
+    ) : null,
+    // Sair
+    h(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        onClick: handleSignOut,
+        disabled: signingOut,
+        "data-neetru-signout": "true",
+        style: { ...menuItemStyle, cursor: signingOut ? "not-allowed" : "pointer" },
+        ...hoverHandlers
+      },
+      signingOut ? `${L.signOut}\u2026` : L.signOut
+    )
+  ) : null;
+  const appsPopover = open === "apps" ? h(
+    "div",
+    {
+      ref: popoverRef,
+      role: "menu",
+      "aria-label": L.appsTitle,
+      "data-neetru-appswitcher-menu": "true",
+      onKeyDown: onPopoverKeyDown,
+      style: { ...popoverStyle, minWidth: 280 }
+    },
+    h(
+      "div",
+      {
+        style: {
+          padding: "12px 14px 8px",
+          fontSize: 11,
+          fontWeight: 700,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: C.muted
+        }
+      },
+      L.appsTitle
+    ),
+    products.length === 0 ? h(
+      "div",
+      { style: { padding: "4px 14px 16px", fontSize: 13, color: C.muted } },
+      L.emptyProducts
+    ) : h(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 1,
+          padding: 1,
+          backgroundColor: C.borderSoft
+        }
+      },
+      products.map((p) => {
+        const isCurrent = !!currentProductSlug && p.slug === currentProductSlug;
+        return h(
+          "a",
+          {
+            key: p.slug,
+            role: "menuitem",
+            href: p.url,
+            "aria-current": isCurrent ? "true" : void 0,
+            "data-neetru-product": p.slug,
+            "data-current": isCurrent ? "true" : void 0,
+            title: p.name,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 6,
+              padding: "14px 8px",
+              textDecoration: "none",
+              color: C.fg,
+              backgroundColor: isCurrent ? C.bgHover : C.bg,
+              cursor: "pointer",
+              boxSizing: "border-box"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = C.bgHover;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = isCurrent ? C.bgHover : C.bg;
+            }
+          },
+          // Tile/ícone
+          p.iconUrl ? h("img", {
+            src: p.iconUrl,
+            alt: "",
+            width: 32,
+            height: 32,
+            style: { width: 32, height: 32, objectFit: "cover", display: "block" }
+          }) : h(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                width: 32,
+                height: 32,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: C.fg,
+                color: "#ffffff",
+                fontSize: 13,
+                fontWeight: 700
+              }
+            },
+            initialsFrom(p.name)
+          ),
+          h(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                fontWeight: isCurrent ? 700 : 400,
+                textAlign: "center",
+                lineHeight: 1.2,
+                maxWidth: "100%",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                width: "100%"
+              }
+            },
+            p.name
+          ),
+          isCurrent ? h(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                fontWeight: 700,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase",
+                color: C.muted
+              }
+            },
+            L.currentBadge
+          ) : null
+        );
+      })
+    )
+  ) : null;
+  return h(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      "data-neetru-account-bar": "true",
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        // Superfície de cliente = sempre claro (dark é staff-only).
+        colorScheme: "light",
+        fontFamily: "inherit"
+      }
+    },
+    appsButton,
+    accountButton,
+    accountPopover,
+    appsPopover
+  );
+}
+
 // src/firestore-compat.ts
 function toDbQuery(constraints) {
   const whereFilters = [];
@@ -42,9 +601,9 @@ function CheckoutLink({
   noAutoRedirect,
   ...rest
 }) {
-  const [submitting, setSubmitting] = React.useState(false);
+  const [submitting, setSubmitting] = React2.useState(false);
   const checkout = client.checkout;
-  const handleClick = React.useCallback(
+  const handleClick = React2.useCallback(
     async (event) => {
       event.preventDefault();
       if (submitting) return;
@@ -71,7 +630,7 @@ function CheckoutLink({
     },
     [submitting, checkout, productId, planId, callbackUrl, tenantType, tenantId, noAutoRedirect, onIntentCreated, onError]
   );
-  return React.createElement(
+  return React2.createElement(
     "a",
     {
       ...rest,
@@ -87,7 +646,7 @@ var NEETRU_FLAME_PATH = "M 281 5.163 C 240.659 26.308, 211.260 52.739, 187.750 8
 var NEETRU_FLAME_VIEWBOX = "0 0 527 760";
 var NEETRU_FLAME_ASPECT = 527 / 760;
 function NeetruFlameIcon({ fill, size = 16 }) {
-  return React.createElement(
+  return React2.createElement(
     "svg",
     {
       viewBox: NEETRU_FLAME_VIEWBOX,
@@ -96,7 +655,7 @@ function NeetruFlameIcon({ fill, size = 16 }) {
       "aria-hidden": true,
       style: { flexShrink: 0 }
     },
-    React.createElement("path", { d: NEETRU_FLAME_PATH, fill })
+    React2.createElement("path", { d: NEETRU_FLAME_PATH, fill })
   );
 }
 var NEETRU_LOGIN_BUTTON_THEME = {
@@ -115,11 +674,11 @@ function NeetruLoginButton({
   disabled,
   ...rest
 }) {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isHover, setIsHover] = React.useState(false);
+  const [isLoading, setIsLoading] = React2.useState(false);
+  const [isHover, setIsHover] = React2.useState(false);
   const colors = NEETRU_LOGIN_BUTTON_THEME[theme];
   const isDisabled = Boolean(disabled) || isLoading;
-  const handleClick = React.useCallback(async () => {
+  const handleClick = React2.useCallback(async () => {
     if (isDisabled) return;
     setIsLoading(true);
     try {
@@ -131,7 +690,7 @@ function NeetruLoginButton({
       setIsLoading(false);
     }
   }, [client, redirectUri, scope, postLoginRedirect, isDisabled, onError]);
-  return React.createElement(
+  return React2.createElement(
     "button",
     {
       ...rest,
@@ -168,15 +727,15 @@ function NeetruLoginButton({
         ...style
       }
     },
-    React.createElement(NeetruFlameIcon, { fill: colors.fg }),
-    React.createElement("span", null, isLoading ? "Entrando\u2026" : label)
+    React2.createElement(NeetruFlameIcon, { fill: colors.fg }),
+    React2.createElement("span", null, isLoading ? "Entrando\u2026" : label)
   );
 }
-var EntitlementContext = React.createContext({
+var EntitlementContext = React2.createContext({
   readonly: false
 });
 function useEntitlementContext() {
-  return React.useContext(EntitlementContext);
+  return React2.useContext(EntitlementContext);
 }
 function EntitlementGate({
   client,
@@ -187,12 +746,12 @@ function EntitlementGate({
   loading,
   children
 }) {
-  const [state, setState] = React.useState({
+  const [state, setState] = React2.useState({
     status: "loading"
   });
   const resolvedSlug = productSlug ?? client.config.productId ?? "";
   const resolvedTenantId = client.config.tenantId;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     let cancelled = false;
     const run = async () => {
       try {
@@ -228,15 +787,15 @@ function EntitlementGate({
     };
   }, [client, feature, resolvedSlug, resolvedTenantId]);
   if (state.status === "loading") {
-    return React.createElement(React.Fragment, null, loading ?? null);
+    return React2.createElement(React2.Fragment, null, loading ?? null);
   }
   const result = state.result;
   const allowed = result?.allowed === true;
   const isReadonly = !allowed && (mode === "readonly" || result?.behavior === "readonly");
   if (!allowed && mode === "block" && !isReadonly) {
-    return React.createElement(React.Fragment, null, fallback ?? null);
+    return React2.createElement(React2.Fragment, null, fallback ?? null);
   }
-  return React.createElement(
+  return React2.createElement(
     EntitlementContext.Provider,
     {
       value: {
@@ -281,17 +840,17 @@ function useCollection(source, options) {
   const sourceKey = serializeSource(
     source
   );
-  const [state, setState] = React.useState({
+  const [state, setState] = React2.useState({
     data: null,
     isLoading: sourceKey !== null,
     error: null,
     isStale: false,
     lastUpdated: null
   });
-  const mountedRef = React.useRef(true);
-  const sourceRef = React.useRef(source);
+  const mountedRef = React2.useRef(true);
+  const sourceRef = React2.useRef(source);
   sourceRef.current = source;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     mountedRef.current = true;
     const current = sourceRef.current;
     if (!current || sourceKey === null) {
@@ -360,17 +919,17 @@ function useDoc(ref, options) {
   const intervalMs = options?.intervalMs ?? DEFAULT_INTERVAL_MS;
   const poll = options?.poll ?? false;
   const refKey = ref && ref.id ? `${ref.collection}/${ref.id}` : null;
-  const [state, setState] = React.useState({
+  const [state, setState] = React2.useState({
     data: null,
     isLoading: refKey !== null,
     error: null,
     isStale: false,
     lastUpdated: null
   });
-  const mountedRef = React.useRef(true);
-  const refRef = React.useRef(ref);
+  const mountedRef = React2.useRef(true);
+  const refRef = React2.useRef(ref);
   refRef.current = ref;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     mountedRef.current = true;
     const current = refRef.current;
     if (!current || refKey === null) {
@@ -443,7 +1002,7 @@ function resolveAuth(input) {
 function useUser(input, options) {
   const timeoutMs = options?.timeoutMs ?? 8e3;
   const auth = resolveAuth(input);
-  const [state, setState] = React.useState(() => {
+  const [state, setState] = React2.useState(() => {
     let seeded = null;
     try {
       seeded = auth.getUser();
@@ -452,8 +1011,8 @@ function useUser(input, options) {
     }
     return { user: seeded, isLoading: seeded === null, error: null };
   });
-  const mountedRef = React.useRef(true);
-  React.useEffect(() => {
+  const mountedRef = React2.useRef(true);
+  React2.useEffect(() => {
     mountedRef.current = true;
     let settled = false;
     const timer = setTimeout(() => {
@@ -485,6 +1044,6 @@ function useUser(input, options) {
   return state;
 }
 
-export { CheckoutLink, EntitlementGate, NeetruLoginButton, useCollection, useDoc, useEntitlementContext, useUser };
+export { CheckoutLink, EntitlementGate, NeetruAccountBar, NeetruLoginButton, fetchNeetruAccountBar, initialsFrom, useCollection, useDoc, useEntitlementContext, useUser };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map