@flytedan/flytebot-design-system 0.51.6 → 0.53.0

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.51.6",
+  "version": "0.53.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
   "author": "flytedesk",
-  "homepage": "https://github.com/flytedan/flytebot-design-system#readme",
+  "homepage": "https://github.com/Flytedesk/flytebot-design-system#readme",
   "keywords": [
     "react",
     "design-system",
@@ -14,10 +14,10 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/flytedan/flytebot-design-system.git"
+    "url": "git+ssh://git@github.com/Flytedesk/flytebot-design-system.git"
   },
   "bugs": {
-    "url": "https://github.com/flytedan/flytebot-design-system/issues"
+    "url": "https://github.com/Flytedesk/flytebot-design-system/issues"
   },
   "files": [
     "README.md",

package/styles/components.css

@@ -4232,6 +4232,8 @@
   padding: 0;
   display: flex;
   flex-direction: column;
+  /* Wider than the label-to-bar gap in .fd-funnel-btn, so each label groups with the bar beneath it. */
+  gap: 14px;
 }
 /* See the identical rule on .fd-barlist-row: Tooltip's trigger wrapper shrink-wraps its
    content by default, but here the trigger is the whole step row. */
@@ -8003,3 +8005,146 @@ button.fd-erow-metric:focus-visible {
     display: none;
   }
 }
+
+/* ============ SessionScreen (MP-288) ============
+   The one full-viewport screen every flytedesk ID app shows while its session is not
+   usable (signing in, recovering an expired session, signing out, reconnecting, or a
+   failure with a Try again). Permanently dark backdrop, like the sign-in page it replaces; the
+   card follows the active theme, and the wordmark is forced to its white variant (see
+   SessionScreen.tsx) so it reads against the backdrop in either.
+
+   `--fd-session-screen-min-height` is the one sizing hook: unset, the screen fills the
+   viewport; a docs preview (or any framed embed) sets it on an ancestor to a fixed height.
+   dvh is applied only where supported — a var() holding an unsupported unit is invalid at
+   computed-value time and would drop the declaration instead of falling back. */
+.fd-session-screen {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: var(--fd-session-screen-min-height, 100vh);
+  padding: var(--s-24) var(--s-16);
+  box-sizing: 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%);
+}
+@supports (min-height: 100dvh) {
+  .fd-session-screen {
+    min-height: var(--fd-session-screen-min-height, 100dvh);
+  }
+}
+.fd-session-screen::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: radial-gradient(circle at 50% 40%, black, transparent 70%);
+  pointer-events: none;
+}
+.fd-session-screen-inner {
+  position: relative;
+  width: 100%;
+  max-width: 408px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.fd-session-screen-mark {
+  margin-bottom: var(--s-32);
+}
+.fd-session-screen-frame {
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--r-2xl);
+  overflow: hidden;
+  box-shadow: 0 24px 64px -12px rgba(2, 8, 20, 0.55), 0 2px 8px rgba(2, 8, 20, 0.3);
+}
+.fd-session-screen-stripe {
+  height: 4px;
+  background: linear-gradient(90deg, var(--blue-400), var(--blue-600), var(--navy));
+}
+.fd-session-screen-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--s-8) 0;
+  text-align: center;
+  min-width: 0;
+}
+.fd-session-screen-body > * {
+  min-width: 0;
+  max-width: 100%;
+}
+.fd-session-screen-title {
+  margin: 0;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+/* Focus lands here programmatically (see SessionScreen.tsx); it is not a control, so it
+   draws no ring of its own. */
+.fd-session-screen .fd-session-screen-title:focus-visible {
+  box-shadow: none;
+}
+/* The status region stays mounted (empty) on a failure so a retry is announced into an
+   existing live region; only a region with content takes space, so the body needs no
+   flex gap that an empty region would double. */
+.fd-session-screen-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-12);
+}
+.fd-session-screen-status:not(:empty) {
+  margin-top: var(--s-20);
+}
+.fd-session-screen-spinner {
+  color: var(--brand);
+}
+.fd-session-screen-message {
+  margin: 0;
+  min-height: 1.5em;
+  color: var(--text-2);
+}
+.fd-session-screen-failure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-16);
+  margin-top: var(--s-20);
+  width: 100%;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+/* Phone: a smaller wordmark and a tighter gutter so the card never crowds the edge. */
+@media (max-width: 479px) {
+  .fd-session-screen {
+    padding: var(--s-16) var(--s-12);
+  }
+  .fd-session-screen-mark {
+    margin-bottom: var(--s-24);
+  }
+  .fd-session-screen .fd-brand-mark img {
+    height: 26px;
+  }
+}
+/* Tablet and up: more air around the card. */
+@media (min-width: 768px) {
+  .fd-session-screen {
+    padding: var(--s-48) var(--s-24);
+  }
+  .fd-session-screen-inner {
+    max-width: 440px;
+  }
+}
+/* Reduced motion: the rotating ring becomes a slow pulse (same as the other indeterminate
+   indicators above); [data-motion="reduce"] already stops every animation outright. */
+@media (prefers-reduced-motion: reduce) {
+  .fd-spinner.fd-session-screen-spinner {
+    animation: fd-pulse 1.6s ease-in-out infinite;
+  }
+}