@flytedan/flytebot-design-system 0.7.1 → 0.8.0

package/package.json

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

package/styles/components.css

@@ -3738,27 +3738,188 @@
   border-color: var(--danger-border);
 }
 
-/* uniform staging strip — one row, scrolls sideways */
-.fd-filestrip {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 1px 1px 3px;
+/* ============ Custom scrollbar (utility) ============ */
+/* .fd-scrollbar — the one on-brand thin scrollbar treatment, applicable to any
+   scrollable container (vertical or horizontal). Named distinctly from the
+   unrelated, pre-existing .fd-scroll (the app SHELL's own main scrollable
+   region, styles/components.css's "Misc layout helpers" section — flex:1 +
+   padding, nothing to do with scrollbar appearance) to avoid colliding with
+   it. Originally a one-off on .fd-filestrip; generalized so every scrollable
+   list/panel in the kit (e.g. VirtualList) renders the same custom thumb
+   instead of the browser default. Firefox via scrollbar-width/scrollbar-color,
+   everything else via the ::-webkit-scrollbar pseudo-elements; both read the
+   same border tokens so light/dark theming (see tokens.css's
+   [data-theme="dark"] overrides of --border-strong) is automatic. */
+.fd-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--border-strong) transparent;
 }
-.fd-filestrip::-webkit-scrollbar {
+.fd-scrollbar::-webkit-scrollbar {
+  width: 6px;
   height: 6px;
 }
-.fd-filestrip::-webkit-scrollbar-thumb {
+.fd-scrollbar::-webkit-scrollbar-thumb {
   background: var(--border-strong);
   border-radius: 99px;
 }
-.fd-filestrip::-webkit-scrollbar-track {
+.fd-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+.fd-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* ============ Data list (VirtualList / TransferList / EntityRow) ============ */
+/* Each mounted row is absolutely positioned (top:0 + transform:translateY(index *
+   itemHeight)) inside VirtualList's totalHeight track, so when an item's index
+   changes — a resort, or rows closing a gap after one above them is removed —
+   React reuses the same DOM node (keyed by the caller's keyOf) and it slides to
+   its new slot instead of snapping. transform, not top, for the animated property:
+   compositor-only, no layout thrash even with ~50 rows mounted at once. */
+.fd-vlist-row {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: transform var(--dur-base) var(--ease);
+}
+.fd-vlist-row-content {
+  height: 100%;
+}
+/* A freshly-added row (e.g. the destination side right after a move) gets a brief
+   fade/scale-in instead of popping in instantly. Scale/opacity only — never
+   `transform: translateY(...)` here, which would fight the row's own positioning
+   transform above; this lives on the row's CONTENT wrapper, one level in. */
+.fd-vlist-row-enter {
+  animation: fd-vlist-row-in var(--dur-base) var(--ease) both;
+}
+@keyframes fd-vlist-row-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fd-vlist-row {
+    transition: none;
+  }
+  .fd-vlist-row-enter {
+    animation: none;
+  }
+}
+/* The "whole result set is being replaced" overlay (VirtualList's `refreshing`
+   prop) — a scrim over the full panel with a small centered spinner+label card,
+   while the PREVIOUS rows stay mounted and visible underneath. .fd-vlist-wrap is
+   the non-scrolling positioning root (a sibling of the scrolling .fd-vlist itself)
+   so the scrim always covers the full visible panel regardless of scroll offset. */
+.fd-vlist-wrap {
+  position: relative;
+}
+.fd-vlist-refresh-scrim {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--scrim);
+  border-radius: var(--r-md);
+  z-index: 5;
+}
+.fd-vlist-refresh-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  box-shadow: var(--e-2);
+  color: var(--text);
+}
+
+/* EntityRow — a real card per row (not flat text): distinct surface from the
+   list's own background, hairline border, soft rest elevation, a stronger hover
+   elevation as the drag affordance. Same border/radius/shadow vocabulary Card
+   itself uses (--r-md here rather than Card's --r-lg — a compact list row reads
+   better with the tighter radius; --e-1/--e-2 are the same elevation tokens). */
+.fd-erow {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  box-shadow: var(--e-1);
+  transition:
+    box-shadow var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+.fd-erow:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--e-2);
+}
+.fd-erow[draggable="true"]:active {
+  cursor: grabbing;
+}
+/* The dragged card itself, mid-drag (see TransferList's pointer-based custom drag
+   — native HTML5 drag images are a static snapshot, not a live element, so a
+   persistent tilt-and-follow needs real pointer tracking instead). */
+.fd-erow-dragging {
+  box-shadow: var(--e-2);
+  border-color: var(--border-strong);
+}
+/* The gray placeholder left in a dragged row's original slot — reads as an
+   obviously-empty slot, not a still-there-but-faded real row. */
+.fd-erow-placeholder {
+  height: 100%;
+  border-radius: var(--r-md);
+  background: var(--surface-2);
+  border: 1px dashed var(--border-strong);
+  opacity: 0.6;
+}
+
+/* TransferList's full-panel drop overlay — extends the existing subtle
+   dragOverSide border-color change into real visual weight: a dashed blue
+   border and a translucent brand scrim across the WHOLE target side, with
+   a centered card (not bare text) telling the user what dropping here does —
+   the same "small card floating over the list" language the refresh overlay
+   already uses, so the two read as one consistent pattern. */
+.fd-tlist-drop-overlay {
+  position: absolute;
+  inset: 6px;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--brand);
+  border-radius: var(--r-md);
+  background: var(--surface-brand);
+  opacity: 0.92;
+  z-index: 6;
+  pointer-events: none;
+  text-align: center;
+  padding: 16px;
+}
+.fd-tlist-drop-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border-brand);
+  border-radius: var(--r-md);
+  box-shadow: var(--e-2);
+  color: var(--brand);
+}
+
+/* uniform staging strip — one row, scrolls sideways */
+.fd-filestrip {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 1px 1px 3px;
+}
 .fd-cell {
   position: relative;
   flex: none;