@flytedan/flytebot-design-system 0.8.2 → 0.9.1

package/package.json

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

package/styles/components.css

@@ -3787,8 +3787,11 @@
   /* Shorter than the row's own fixed slot, not 100% of it — the leftover space
      at the bottom of each slot is what reads as a gap between cards, without
      touching itemHeight itself (that number is load-bearing for the
-     scroll/virtualization math in VirtualList.tsx, not just visual spacing). */
-  height: calc(100% - 6px);
+     scroll/virtualization math in VirtualList.tsx, not just visual spacing).
+     The size comes from VirtualList's `rowGap` prop via this custom property,
+     since the right gap depends on how tall and heavy the row is; the literal
+     fallback only applies to markup that sets neither. */
+  height: calc(100% - var(--fd-vlist-gap, 6px));
 }
 /* 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
@@ -3851,18 +3854,127 @@
    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: 1px solid var(--erow-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),
+    background var(--dur-fast) var(--ease),
     transform var(--dur-fast) var(--ease);
 }
 .fd-erow:hover {
-  border-color: var(--border-strong);
+  border-color: var(--erow-border-hover);
   box-shadow: var(--e-2);
 }
+/* The row's one non-default state colour: this row exists but can't be used
+   (a school with no sellable inventory). Fill, border and title all move, so
+   it survives being scanned at a glance down a long list — a border-only
+   treatment disappears at 60px row pitch. Tokens are --erow-danger-*, defined
+   for both grounds; on dark the fill can't separate from a near-black panel by
+   luminance, so the border and the title colour carry it there. */
+.fd-erow-danger {
+  background: var(--erow-danger-fill);
+  border-color: var(--erow-danger-border);
+}
+.fd-erow-danger:hover {
+  border-color: var(--erow-danger-border);
+}
+.fd-erow-danger .fd-erow-title {
+  color: var(--erow-danger-text);
+}
+
+/* The row's own two-line body: title line, then the aligned metric strip. The
+   strip line only exists when there are metrics or an accessory, so a plain
+   name-only row is still exactly one line tall. */
+.fd-erow-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+}
+.fd-erow-titleline {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+/* The title keeps a floor and the meta is what gives way. Previously the title was
+   "flex: 1; min-width: 0" against a "flex: none" meta, which means the title is the
+   ONLY thing that can shrink — so in a narrow panel (a two-pane transfer list at ~245px
+   per side) a row carrying three figures squeezed the school name to zero width and the
+   row lost its identity entirely. A row you cannot name is a row you cannot act on,
+   which makes the name the last thing that should go, not the first. */
+.fd-erow-title {
+  flex: 1 1 auto;
+  min-width: 45%;
+  font-weight: var(--w-semibold);
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fd-erow-meta {
+  flex: 0 1 auto;
+  min-width: 0;
+  font-size: var(--overline-size);
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fd-erow-strip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+/* Fixed-width cells, not auto-sized ones: the whole point of the strip is that
+   the same column lands at the same x on every row (and on the totals line in
+   TransferList's footer, which renders this very component with the same
+   widths), which auto width cannot give you when the numbers differ in digits. */
+.fd-erow-metrics {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  /* Cells are fixed-width, so a strip wider than the row it's in has to lose the
+     tail rather than push it: without this the overflowing cells paint straight
+     through whatever is pinned to the end of the strip. Clipping the last column
+     is the right failure here — the alternative is columns that shift row to row,
+     which is the one thing an aligned strip must never do. */
+  overflow: hidden;
+}
+.fd-erow-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  font-size: var(--overline-size);
+  color: var(--text-2);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fd-erow-metric > .ph {
+  font-size: 12px;
+  color: var(--text-muted);
+  flex: none;
+}
+.fd-erow-metric-value {
+  font-weight: var(--w-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fd-erow-metric.is-danger > .ph {
+  color: var(--danger-text);
+}
+.fd-erow-accessory {
+  margin-left: auto;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+}
 .fd-erow[draggable="true"]:active {
   cursor: grabbing;
 }
@@ -3914,6 +4026,159 @@
   box-shadow: var(--e-2);
   color: var(--brand);
 }
+/* TransferList's per-side slots. The footer is where a running totals line goes;
+   it sits on the panel, not on a card, and is separated by a rule rather than a
+   gap so it reads as a summary OF the list rather than another row IN it. */
+.fd-tlist-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.fd-tlist-footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding-top: 8px;
+  /* Indented to the x a row's own body starts at, so a totals strip in here lands
+     under the columns it totals rather than a card's width to the left of them.
+     The sum is the card's border and padding-left plus the drag grip and its gap
+     — every row in a TransferList is a drag source, so it is the same on all of
+     them. Spelled out rather than collapsed to 37px so it stays checkable against
+     .fd-erow if that padding ever moves. */
+  padding-left: calc(1px + 12px + 14px + 10px);
+  border-top: 1px solid var(--border);
+  font-size: var(--overline-size);
+  color: var(--text-2);
+}
+
+/* --- ScoreMeter — a small categorical 0-100 bar, optionally a trigger ------ */
+.fd-scoremeter {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.fd-scoremeter-rail {
+  display: block;
+  flex: none;
+}
+.fd-scoremeter-value {
+  font-size: var(--overline-size);
+  font-weight: var(--w-semibold);
+  color: var(--text-2);
+  min-width: 2ch;
+  text-align: right;
+}
+/* The trigger is a real button (keyboard-operable, and skipped by TransferList's
+   drag arming, which ignores any pointerdown inside a button) — so it has to be
+   stripped of the browser's own button chrome and given this kit's own. */
+.fd-scoremeter-button {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  padding: 2px 5px;
+  margin: -2px -5px;
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+.fd-scoremeter-button:hover {
+  background: var(--surface-3);
+  border-color: var(--border);
+}
+.fd-scoremeter-button.is-open {
+  background: var(--surface-brand);
+  border-color: var(--border-brand);
+}
+
+/* --- importance scale: the tag, and the score breakdown it appears in ------ */
+.fd-imp-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  padding: 2px 7px;
+  border: 1px solid transparent;
+  border-radius: var(--r-full);
+  font-size: var(--overline-size);
+  line-height: var(--overline-lh);
+  font-weight: var(--w-semibold);
+  white-space: nowrap;
+}
+.fd-imp-tag > .ph {
+  font-size: 12px;
+}
+.fd-imp-tag.is-md {
+  padding: 4px 10px;
+  font-size: var(--label-size);
+}
+.fd-imp-tag.is-md > .ph {
+  font-size: 14px;
+}
+.fd-prefbreak {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.fd-prefbreak-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+.fd-prefbreak-score {
+  font-size: var(--h4-size);
+  font-weight: var(--w-bold);
+  color: var(--text);
+}
+.fd-prefbreak-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.fd-prefbreak-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+/* A criterion that earned nothing is dimmed rather than hidden — the reason a
+   score is low is exactly the rows that contributed zero. */
+.fd-prefbreak-item.is-unmet {
+  opacity: 0.55;
+}
+.fd-prefbreak-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fd-prefbreak-label {
+  font-size: var(--body-sm-size);
+  line-height: var(--body-sm-lh);
+  color: var(--text);
+}
+.fd-prefbreak-note {
+  font-size: var(--overline-size);
+  color: var(--text-muted);
+}
+.fd-prefbreak-val {
+  flex: none;
+  font-size: var(--body-sm-size);
+  color: var(--text-2);
+}
+.fd-prefbreak-sep {
+  color: var(--text-muted);
+  padding: 0 2px;
+}
 
 /* uniform staging strip — one row, scrolls sideways */
 .fd-filestrip {

package/styles/tokens.css

@@ -63,6 +63,33 @@
   --csi-ramp-1:#F1F4F5;--csi-ramp-2:#D9EDE6;--csi-ramp-3:#A9DECB;
   --csi-ramp-4:#6CC7AE;--csi-ramp-5:#2E9E85;--csi-ramp-6:#0B5F50;
 
+  /* criterion importance — the five-level planner priority scale, ordered
+     Nudge < Lean < Priority < Driver < Deal-breaker on a slate -> blue -> indigo
+     -> amber -> red ramp. Same shape as the CSI ramp above (fill/edge/text/mark
+     per stop) because it is used the same two ways: `mark` is the solid the meter
+     segments and glyphs are drawn in, `fill`+`edge` tint a criterion card's
+     background and border, `text` is the AA-safe label colour ON that fill.
+     Deliberately NOT aliases of --info/--warn/--danger: importance is an ordered
+     scale, not a status, and a Driver criterion is not a warning. */
+  --imp-1-fill:#EEF0F3;--imp-1-edge:#D2D7DF;--imp-1-text:#414958;--imp-1-mark:#7C8698;
+  --imp-2-fill:#DEEBF7;--imp-2-edge:#C3DDF1;--imp-2-text:#144674;--imp-2-mark:#2272BA;
+  --imp-3-fill:#E7E3F8;--imp-3-edge:#C9C1EE;--imp-3-text:#342A6B;--imp-3-mark:#6E5BC9;
+  --imp-4-fill:#FDF1DA;--imp-4-edge:#F0D49A;--imp-4-text:#6B4A05;--imp-4-mark:#BD800A;
+  --imp-5-fill:#FCE7E5;--imp-5-edge:#F2BDB8;--imp-5-text:#7A241D;--imp-5-mark:#D0473D;
+
+  /* EntityRow — the list card's own hairline, and its one non-default row tone.
+     The border is a purpose-built token rather than --border because an EntityRow
+     card is --surface-2 sitting on a --surface panel, and those two differ by only
+     1.06:1 in light mode: the gap between two cards is invisible unless the
+     hairline itself carries it. --erow-border is 1.46:1 against the panel and
+     1.38:1 against the card (vs --border's 1.23 / 1.16), which is what actually
+     makes the gap read. --erow-border-hover keeps a distinct hover step on top. */
+  --erow-border:#CFD6E0;
+  --erow-border-hover:#B6C0CE;
+  --erow-danger-fill:#FCE9E6;
+  --erow-danger-border:#EFB7B1;
+  --erow-danger-text:#7A241D;
+
   --ok-fill:#DFF3E8;--ok-border:#A8DDC2;--ok-text:#0E5233;--ok-solid:#34A26B;--ok-emph:#57C68C;
   --warn-fill:#FDF1DA;--warn-border:#F0D49A;--warn-text:#6B4A05;--warn-solid:#C8890B;
   --danger-fill:#FCE7E5;--danger-border:#F2BDB8;--danger-text:#7A241D;--danger-solid:#D0473D;
@@ -190,6 +217,25 @@
   --danger-fill:#2E1512;--danger-border:#5E2A24;--danger-text:#F0A79F;
   --info-fill:#12283D;--info-border:#1E3F5E;--info-text:#9CC7EC;
 
+  /* importance ramp on dark ground — see the :root block above for what each stop
+     is for. Same five hues, re-struck so `text` stays AA on `fill` and `mark`
+     clears 3:1 against the dark meter rail (--surface-3). */
+  --imp-1-fill:#23272E;--imp-1-edge:#333A44;--imp-1-text:#A3ACB9;--imp-1-mark:#8892A0;
+  --imp-2-fill:#12283D;--imp-2-edge:#1E3F5E;--imp-2-text:#9CC7EC;--imp-2-mark:#6FA8E8;
+  --imp-3-fill:#221C3D;--imp-3-edge:#372E5C;--imp-3-text:#BFB4F2;--imp-3-mark:#9B8DE0;
+  --imp-4-fill:#2C2210;--imp-4-edge:#5C4614;--imp-4-text:#E9C377;--imp-4-mark:#E0A93F;
+  --imp-5-fill:#2E1512;--imp-5-edge:#5E2A24;--imp-5-text:#F0A79F;--imp-5-mark:#E2756B;
+
+  /* EntityRow — see the :root block above. On dark ground the hairline does even
+     more of the work (1.56:1 against the panel), since --surface-2 and --surface
+     sit only 1.09:1 apart here too. A dark red row fill cannot separate from a
+     near-black panel by luminance, so the danger row reads by border and hue. */
+  --erow-border:#333A44;
+  --erow-border-hover:#4A5260;
+  --erow-danger-fill:#331813;
+  --erow-danger-border:#7A342C;
+  --erow-danger-text:#F0A79F;
+
   /* chat kit — see the :root block above */
   --chat-code-bg:#12151B;
   --code-kw:#B3A6F0;--code-str:#E9C377;--code-num:#EFA8BE;--code-com:#6C7686;