@flytedan/flytebot-design-system 0.51.5 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.51.5",
+  "version": "0.52.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -3066,11 +3066,13 @@
   display: none;
 }
 /* The Filter button, and Clear all right after it. Beside each other while the main column has
-   room for both and a chip; below 30rem (the two, a gap and one chip at its max) Clear all stacks
-   under the button, still in this column and never on a row of the chips' own. The column is
-   exactly as wide as what is in it either way, so the chips always start one gap from it. The
-   switch is a container query on the main column, not a wrapping flex row: a wrapped row takes
-   its cap as its width and leaves a hole beside the button. */
+   room for both and a chip; when the actions beside the main column leave it under 30rem (the two,
+   a gap and one chip at its max) Clear all stacks under the button, still in this column and
+   never on a row of the chips' own. The column is exactly as wide as what is in it either way, so
+   the chips always start one gap from it. The switch is a container query on the main column, not
+   a wrapping flex row: a wrapped row takes its cap as its width and leaves a hole beside the
+   button. A bar under 30rem wide is the phone layout below, which puts Clear all beside the
+   button again. */
 .fd-filterbar-main {
   container-type: inline-size;
 }
@@ -3080,7 +3082,7 @@
   align-items: center;
   gap: var(--s-sm) var(--s-md);
 }
-@container (max-width: 30rem) {
+@container (width < 30rem) {
   .fd-filterbar-trigger {
     flex-direction: column;
     align-items: flex-start;
@@ -3127,11 +3129,16 @@
   .fd-filterbar-trigger {
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: center;
   }
   .fd-filterbar-chips {
     flex: none;
     min-height: 0;
   }
+  /* No chips, no row: an empty chips area would still add a row gap under the button. */
+  .fd-filterbar-chips:empty {
+    display: none;
+  }
 }
 /* MP-282: seen live at 375px — a chip whose value is long (a full campaign name) painted
    637px wide inside a 297px-wide bar instead of respecting it, because .fd-tag is `flex:
@@ -7996,3 +8003,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;
+  }
+}