@flytedan/flytebot-design-system 0.51.6 → 0.52.0

package/dist/index.cjs

@@ -159,8 +159,8 @@ __export(index_exports, {
   Select: () => Select,
   SessionKit: () => SessionKit,
   SessionProvider: () => SessionProvider,
+  SessionScreen: () => SessionScreen,
   SidebarNav: () => SidebarNav,
-  SignInPage: () => SignInPage,
   Skeleton: () => Skeleton,
   SkeletonText: () => SkeletonText,
   Slider: () => Slider,
@@ -8806,197 +8806,47 @@ function ProfilePage({
   ] });
 }
 
-// src/components/platform/SignInPage.tsx
+// src/components/platform/SessionScreen.tsx
 var React55 = __toESM(require("react"), 1);
 var import_jsx_runtime81 = require("react/jsx-runtime");
-function SignInPage({ productName, onSignIn, continueAs, error }) {
-  const [signingIn, setSigningIn] = React55.useState(false);
-  const [resuming, setResuming] = React55.useState(false);
-  function handleSignIn() {
-    setSigningIn(true);
-    onSignIn();
-  }
-  function handleContinue() {
-    setResuming(true);
-    continueAs.onContinue().finally(() => setResuming(false));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-    "div",
-    {
-      style: {
-        position: "relative",
-        display: "grid",
-        placeItems: "center",
-        minHeight: "100vh",
-        padding: "24px 16px",
-        boxSizing: "border-box",
-        overflow: "hidden",
-        background: "radial-gradient(circle at 15% 15%, var(--blue-700) 0%, transparent 45%), radial-gradient(circle at 85% 85%, var(--blue-600) 0%, transparent 40%), linear-gradient(160deg, var(--navy) 0%, var(--blue-950) 55%, var(--blue-900) 100%)"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-          "div",
-          {
-            "aria-hidden": true,
-            style: {
-              position: "absolute",
-              inset: 0,
-              backgroundImage: "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)",
-              backgroundSize: "48px 48px",
-              maskImage: "radial-gradient(circle at 50% 40%, black, transparent 70%)"
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-          "div",
-          {
-            style: {
-              position: "relative",
-              width: "100%",
-              maxWidth: 408,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { style: { marginBottom: "var(--s-32)" }, "data-theme": "dark", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(FlytedeskMark, { size: "lg" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-                "div",
-                {
-                  style: {
-                    width: "100%",
-                    borderRadius: "var(--r-2xl)",
-                    overflow: "hidden",
-                    boxShadow: "0 24px 64px -12px rgba(2, 8, 20, 0.55), 0 2px 8px rgba(2, 8, 20, 0.3)"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                      "div",
-                      {
-                        style: {
-                          height: 4,
-                          background: "linear-gradient(90deg, var(--blue-400), var(--blue-600), var(--navy))"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          flexDirection: "column",
-                          gap: "var(--s-20)",
-                          alignItems: "center",
-                          textAlign: "center",
-                          padding: "var(--s-8) 0"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("h1", { className: "fd-h3", style: { color: "var(--navy)" }, children: productName }),
-                            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "fd-body-sm fd-muted", style: { marginTop: "var(--s-4)" }, children: continueAs ? "Your session timed out, but you're likely still signed in" : "Sign in with your flytedesk workspace account" })
-                          ] }),
-                          error ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { role: "alert", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Banner, { tone: "danger", title: error }) }) : null,
-                          continueAs ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                              Button,
-                              {
-                                variant: "primary",
-                                style: { width: "100%" },
-                                loading: resuming,
-                                disabled: resuming,
-                                onClick: handleContinue,
-                                children: resuming ? "Resuming\u2026" : `Continue as ${continueAs.name}`
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                              "button",
-                              {
-                                type: "button",
-                                className: "fd-body-sm fd-muted",
-                                style: {
-                                  background: "none",
-                                  border: "none",
-                                  cursor: "pointer",
-                                  textDecoration: "underline",
-                                  padding: 0
-                                },
-                                disabled: resuming,
-                                onClick: continueAs.onDecline,
-                                children: "Not you? Sign in with flytedesk ID"
-                              }
-                            )
-                          ] }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                            Button,
-                            {
-                              variant: "primary",
-                              style: { width: "100%" },
-                              loading: signingIn,
-                              disabled: signingIn,
-                              onClick: handleSignIn,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-                                "span",
-                                {
-                                  style: {
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    gap: "var(--s-8)",
-                                    flexWrap: "nowrap"
-                                  },
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(GoogleGlyph, {}),
-                                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { children: signingIn ? "Signing in\u2026" : "Sign in with flytedesk ID" })
-                                  ]
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "fd-body-sm fd-muted", style: { fontSize: "12px" }, children: "One account, every flytedesk app." })
-                        ]
-                      }
-                    ) })
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function GoogleGlyph() {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      "path",
-      {
-        fill: "#4285F4",
-        d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.87 2.68-6.62Z"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      "path",
-      {
-        fill: "#34A853",
-        d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.81.54-1.84.87-3.04.87-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      "path",
-      {
-        fill: "#FBBC05",
-        d: "M3.97 10.73A5.4 5.4 0 0 1 3.68 9c0-.6.1-1.19.29-1.73V4.94H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.06l3.01-2.33Z"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      "path",
-      {
-        fill: "#EA4335",
-        d: "M9 3.58c1.32 0 2.51.45 3.44 1.35l2.59-2.59C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.94l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"
-      }
-    )
-  ] });
+var COPY = {
+  "signing-in": { busy: "Signing you in\u2026" },
+  "session-expired": { busy: "Your session expired \u2014 signing you back in\u2026" },
+  "signing-out": { busy: "Signing you out\u2026" },
+  reconnecting: { busy: "Reconnecting\u2026" },
+  "sign-in-failed": { failure: "We couldn't sign you in" },
+  "load-failed": { failure: "We couldn't load your session" }
+};
+function SessionScreen({ kind, error, onRetry, productName }) {
+  const copy = COPY[kind];
+  const busyMessage = "busy" in copy ? copy.busy : null;
+  const failureTitle = "failure" in copy ? copy.failure : null;
+  const [announced, setAnnounced] = React55.useState("");
+  React55.useEffect(() => {
+    setAnnounced(busyMessage ?? "");
+  }, [busyMessage]);
+  const titleRef = React55.useRef(null);
+  const failed = failureTitle !== null;
+  React55.useEffect(() => {
+    titleRef.current?.focus({ preventScroll: true });
+  }, [failed]);
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("main", { className: "fd-session-screen", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "fd-session-screen-inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "fd-session-screen-mark", "data-theme": "dark", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(FlytedeskMark, { size: "lg" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "fd-session-screen-frame", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "fd-session-screen-stripe" }),
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "fd-session-screen-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("h1", { ref: titleRef, tabIndex: -1, className: "fd-h3 fd-session-screen-title", children: productName }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { role: "status", "aria-live": "polite", className: "fd-session-screen-status", children: busyMessage !== null ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "fd-spinner fd-spinner-lg fd-session-screen-spinner", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "fd-body fd-session-screen-message", children: announced })
+        ] }) : null }),
+        failureTitle !== null ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "fd-session-screen-failure", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Banner, { tone: "danger", title: failureTitle, detail: error ?? void 0 }),
+          onRetry !== null ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { variant: "primary", block: true, onClick: onRetry, children: "Try again" }) : null
+        ] }) : null
+      ] }) })
+    ] })
+  ] }) });
 }
 
 // src/components/platform/RoadmapTimeline.tsx
@@ -14866,8 +14716,8 @@ function useDocumentTitle(routeTitle, appName) {
   Select,
   SessionKit,
   SessionProvider,
+  SessionScreen,
   SidebarNav,
-  SignInPage,
   Skeleton,
   SkeletonText,
   Slider,