@linxin666/dsh-client-ui-task-board 0.4.4 → 0.4.6

package/src/client/board.module.css

@@ -30,7 +30,21 @@
 
 /* --- board frame -------------------------------------------------------------- */
 
+/* Board geometry and motion tokens. Every single-line control on the board —
+   the header's buttons, its pickers, its search box, the form inputs — takes
+   its height, radius and spacing from this one place, so a control never
+   drifts off the header's shared track as its padding is tuned. Declared on
+   the board root, which also contains every overlay the board mounts. */
 .board {
+  --dsh-tb-control-h: 30px;
+  --dsh-tb-control-radius: 8px;
+  --dsh-tb-control-gap: 8px;
+  --dsh-tb-icon-size: 30px;
+  --dsh-tb-hit-size: 44px;
+  --dsh-tb-motion-enter: 160ms;
+  --dsh-tb-motion-close: 140ms;
+  --dsh-tb-ease: cubic-bezier(0.2, 0, 0, 1);
+
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -51,6 +65,20 @@
   flex: none;
 }
 
+/* The right-hand toolbar. Filters, view toggles and the create action ride one
+   row on the shared control height, pushed against the trailing edge by their
+   own container so the identity block (title + host meta) and the toolbar read
+   as two groups instead of one undifferentiated strip. */
+.boardTools {
+  display: flex;
+  align-items: center;
+  gap: var(--dsh-tb-control-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
 .boardTitle {
   margin: 0;
   font-size: 16px;
@@ -68,12 +96,14 @@
 .search {
   flex: 0 1 260px;
   min-width: 120px;
-  padding: 6px 10px;
+  box-sizing: border-box;
+  height: var(--dsh-tb-control-h);
+  padding: 0 10px;
   font-size: 13px;
   color: var(--dsw-alias-label-primary);
   background: var(--dsw-specific-input-major);
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
+  border-radius: var(--dsh-tb-control-radius);
   outline: none;
 }
 
@@ -190,11 +220,17 @@
 
 /* --- cards -------------------------------------------------------------------- */
 
+/* The card is an article; the stretched .cardOpen button is its keyboard and
+   accessibility target. Content sits above the button (z-index 1) so the
+   badges keep their own tooltips, and the article's click handler opens the
+   detail for any click that is not a quick action. */
 .card {
+  position: relative;
   display: flex;
+  flex: none;
   flex-direction: column;
   gap: 6px;
-  padding: 10px 12px;
+  padding: 10px 12px 10px 14px;
   text-align: left;
   background: var(--dsw-alias-bg-base);
   border: 1px solid var(--dsw-alias-border-l2);
@@ -202,20 +238,87 @@
   cursor: pointer;
   color: var(--dsw-alias-label-primary);
   font-family: inherit;
+  overflow: hidden;
   transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
 }
 
+.card > :not(.cardOpen) {
+  position: relative;
+  z-index: 1;
+}
+
+/* State stripe: the latest execution's outcome, readable while scanning a
+   column without reading the run count. No tone (never ran, archived) paints
+   nothing. */
+.card::before {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.card[data-tone='running']::before { background: var(--dsw-alias-state-warn-primary); }
+.card[data-tone='succeeded']::before { background: var(--dsw-alias-state-success-primary); }
+.card[data-tone='failed']::before { background: var(--dsw-alias-state-error-primary); }
+.card[data-tone='cancelled']::before { background: var(--dsw-alias-label-tertiary); }
+
 .card:hover {
   box-shadow: var(--dsw-shadow-lv2);
   border-color: var(--dsw-alias-border-l3);
   transform: translateY(-1px);
 }
 
+/* Dense columns scroll fast; a lift per hovered row reads as jitter. */
+.card[data-compact]:hover {
+  box-shadow: none;
+  transform: none;
+}
+
 .card[data-status='running'] {
   border-color: var(--dsw-alias-state-warn-primary);
 }
 
+.cardOpen {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.cardOpen:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: -2px;
+}
+
+.cardTitleRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.cardKind {
+  flex: none;
+  margin-top: 1px;
+  padding: 0 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
 .cardTitle {
+  min-width: 0;
   font-size: 13px;
   font-weight: 600;
   line-height: 1.35;
@@ -225,6 +328,31 @@
   -webkit-box-orient: vertical;
 }
 
+.card[data-compact] {
+  gap: 2px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.card[data-compact] .cardTitle {
+  font-size: 12px;
+  font-weight: 500;
+  -webkit-line-clamp: 1;
+}
+
+/* Provider decorations join the meta row as inline chips, never a full-width
+   row of their own; an empty decoration takes no space. */
+.cardDecoration {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+
+.cardDecoration:empty {
+  display: none;
+}
+
 .cardExcerpt {
   font-size: 12px;
   line-height: 1.4;
@@ -235,22 +363,31 @@
   -webkit-box-orient: vertical;
 }
 
+/* The meta line holds values that all have to stay readable — the update
+   stamp, the label/schedule/roll-up chips and the run count — so it wraps
+   instead of squeezing the stamp down to an unreadable stub on a narrow
+   column, and the stamp itself keeps its full width. */
 .cardMeta {
   display: flex;
   align-items: center;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 4px 8px;
   font-size: 11px;
   color: var(--dsw-alias-label-tertiary);
 }
 
 .cardTime {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: max-content;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .cardSchedule {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   flex: none;
   min-width: 0;
   font-size: 12px;
@@ -266,6 +403,11 @@
   flex: none;
 }
 
+.cardRun[data-declared] {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+
 .cardRun[data-result='failed'] {
   color: var(--dsw-alias-state-error-primary);
 }
@@ -275,10 +417,88 @@
 }
 
 .cardSession {
+  display: inline-flex;
+  align-items: center;
   flex: none;
   color: var(--dsw-alias-state-business-primary);
 }
 
+/* A quick action on a card: a compact icon button above the open control. */
+.cardAction {
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: -4px -4px -4px 0;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.cardAction:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.cardAction:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+/* Recency groups inside a settled column. */
+.cardGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cardGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 2px 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cardGroupCount {
+  font-weight: 400;
+}
+
+.cardGroupHeader .linkButton {
+  margin-left: auto;
+  font-size: 11px;
+}
+
+/* Per-column density switch in the column header. */
+.densityToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.densityToggle:hover,
+.densityToggle[data-active='true'] {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.densityToggle:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
 .cardRunningLabel {
   font-size: 11px;
   color: var(--dsw-alias-state-warn-primary);
@@ -300,57 +520,74 @@
 
 /* --- buttons ------------------------------------------------------------------ */
 
-.primaryButton {
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dsw-alias-label-primary-foreground);
-  background: var(--dsw-alias-button-info-fill);
-  border: none;
-  border-radius: 8px;
+/* One geometry, three roles. Every filled, outlined and icon control on the
+   board takes its height, radius and inner alignment from the board tokens, so
+   the header's buttons, the detail footer's actions and every modal footer sit
+   on one track, and a state change (selected, disabled, pending) can never
+   resize the control. Filled actions use the matched primary-action set
+   (button-primary-fill / button-primary-hover / label-primary-foreground) and
+   never a cross-family pair. */
+.primaryButton,
+.ghostButton,
+.dangerButton,
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: var(--dsh-tb-control-h);
+  border-radius: var(--dsh-tb-control-radius);
   cursor: pointer;
   white-space: nowrap;
+  font-family: inherit;
 }
 
-.primaryButton:hover:not(:disabled) {
-  background: var(--dsw-alias-button-info-hover);
+.primaryButton,
+.dangerButton {
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 600;
 }
 
-.primaryButton:disabled {
-  opacity: 0.5;
-  cursor: default;
+.primaryButton {
+  color: var(--dsw-alias-label-primary-foreground);
+  background: var(--dsw-alias-button-primary-fill);
+  border: 1px solid transparent;
+}
+
+.dangerButton {
+  color: var(--dsw-alias-label-primary-foreground);
+  background: var(--dsw-alias-state-error-primary);
+  border: 1px solid transparent;
 }
 
 .ghostButton {
-  padding: 5px 12px;
-  font-size: 12px;
+  padding: 0 12px;
+  font-size: 13px;
   color: var(--dsw-alias-label-primary);
   background: transparent;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
-  cursor: pointer;
-  white-space: nowrap;
 }
 
-.ghostButton:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
+/* Selected view toggle. The outlined control keeps its box and only changes
+   role colour, so pressing a toggle cannot move the toolbar around it. */
+.ghostButton[data-active='true'] {
+  color: var(--dsw-alias-label-primary-foreground);
+  background: var(--dsw-alias-button-primary-fill);
+  border-color: transparent;
 }
 
-.ghostButton:disabled {
-  opacity: 0.45;
-  cursor: default;
+.primaryButton:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover);
 }
 
-.dangerButton {
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #fff;
-  background: var(--dsw-alias-state-error-primary);
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  white-space: nowrap;
+.ghostButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.ghostButton[data-active='true']:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover);
 }
 
 .dangerButton:hover:not(:disabled) {
@@ -361,31 +598,48 @@
   filter: brightness(0.94);
 }
 
+.primaryButton:disabled,
 .dangerButton:disabled {
   opacity: 0.5;
   cursor: default;
 }
 
+.ghostButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* Icon-only control: a 30px box on the control track whose pointer target is
+   expanded to the 44px minimum without changing what the eye sees. */
 .iconButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
+  position: relative;
+  width: var(--dsh-tb-icon-size);
   padding: 0;
   background: transparent;
-  border: none;
-  border-radius: 6px;
+  border: 1px solid transparent;
   color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font-size: 13px;
 }
 
-.iconButton:hover {
+.iconButton::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--dsh-tb-hit-size);
+  height: var(--dsh-tb-hit-size);
+  transform: translate(-50%, -50%);
+}
+
+.iconButton:hover:not(:disabled) {
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-primary);
 }
 
+.iconButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 .linkButton {
   padding: 0;
   font-size: 12px;
@@ -402,6 +656,12 @@
 
 /* --- modals ------------------------------------------------------------------- */
 
+/* Enter and exit are one motion pair: the backdrop fades while the surface
+   rises from exactly the origin it returns to (8px down, 98% scale, centred).
+   `usePresence` keeps the node mounted through the exit leg and paints
+   `data-state="closing"`, so the reverse leg always runs instead of the node
+   vanishing; both legs keep the surface's dimensions, so nothing behind the
+   overlay reflows. */
 .modalBackdrop {
   position: fixed;
   inset: 0;
@@ -410,6 +670,41 @@
   align-items: center;
   justify-content: center;
   background: var(--dsw-alias-bg-mask-1);
+  animation: dshTbBackdropIn var(--dsh-tb-motion-enter) var(--dsh-tb-ease) both;
+}
+
+.modalBackdrop[data-state='closing'] {
+  animation: dshTbBackdropOut var(--dsh-tb-motion-close) var(--dsh-tb-ease) both;
+}
+
+.modal,
+.detail {
+  animation: dshTbSurfaceIn var(--dsh-tb-motion-enter) var(--dsh-tb-ease) both;
+}
+
+.modalBackdrop[data-state='closing'] .modal,
+.modalBackdrop[data-state='closing'] .detail {
+  animation: dshTbSurfaceOut var(--dsh-tb-motion-close) var(--dsh-tb-ease) both;
+}
+
+@keyframes dshTbBackdropIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dshTbBackdropOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes dshTbSurfaceIn {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes dshTbSurfaceOut {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: translateY(8px) scale(0.98); }
 }
 
 .modal {
@@ -449,6 +744,65 @@
   margin-top: 4px;
 }
 
+/* Label manager (label cleanup): a titled overlay with one row per label in
+   use, each carrying its usage count and the two ledger-wide transitions. */
+.modalHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.modalHeader > .modalTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.tagManageList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tagManageRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsh-tb-control-radius);
+}
+
+.tagManageName {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.tagManageCount {
+  flex: none;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tagManageInput {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.tagManageMerge {
+  flex: 1 0 100%;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 /* --- form sections (create/edit dialog) --------------------------------------
  * The task form groups its configuration into collapsible regions so the
  * dialog fits without a scrollbar: only the content region starts open, and
@@ -550,13 +904,18 @@
   color: var(--dsw-alias-label-secondary);
 }
 
+/* Single-line fields (and the multi-line ones, which only grow past the
+   minimum) share the control height, the control radius and the control
+   border, so an input never sits taller than the button beside it. */
 .input {
-  padding: 7px 10px;
+  box-sizing: border-box;
+  min-height: var(--dsh-tb-control-h);
+  padding: 6px 10px;
   font-size: 13px;
   color: var(--dsw-alias-label-primary);
   background: var(--dsw-specific-input-major);
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
+  border-radius: var(--dsh-tb-control-radius);
   outline: none;
   resize: vertical;
   font-family: inherit;
@@ -567,12 +926,14 @@
 }
 
 .select {
-  padding: 7px 10px;
+  box-sizing: border-box;
+  height: var(--dsh-tb-control-h);
+  padding: 0 10px;
   font-size: 13px;
   color: var(--dsw-alias-label-primary);
   background: var(--dsw-specific-input-major);
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
+  border-radius: var(--dsh-tb-control-radius);
   outline: none;
   font-family: inherit;
   max-width: 100%;
@@ -715,12 +1076,14 @@
 
 .schedulePreset {
   flex: none;
-  padding: 7px 8px;
+  box-sizing: border-box;
+  height: var(--dsh-tb-control-h);
+  padding: 0 8px;
   font-size: 12.5px;
   color: var(--dsw-alias-label-primary);
   background: var(--dsw-specific-input-major);
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
+  border-radius: var(--dsh-tb-control-radius);
   outline: none;
 }
 
@@ -762,6 +1125,38 @@
   overflow-y: auto;
 }
 
+/* --- clamped long content (detail description / prompt) ---------------------
+ * A long markdown body renders behind a fixed clamp with a fade into the
+ * detail surface; the expand toggle exists only when the content really
+ * overflows the clamp (measured at runtime), so short texts are untouched.
+ * The clamp height is read back by ClampedMarkdown through getComputedStyle —
+ * keep the pixel value here only.
+ * --------------------------------------------------------------------------- */
+
+.clampBody {
+  position: relative;
+}
+
+.clampBody[data-clamped='true'] {
+  max-height: 160px;
+  overflow: hidden;
+}
+
+.clampBody[data-clamped='true']::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 44px;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--dsw-alias-bg-base));
+}
+
+.clampToggle {
+  align-self: flex-start;
+}
+
 .executionList {
   list-style: none;
   margin: 0;
@@ -847,6 +1242,11 @@
     padding: 10px;
   }
 
+  /* The header stacks in source order: identity (back control + title), then the
+     host stamp on its own line, then the toolbar, which wraps inside itself —
+     the search takes a full line, the picker and the actions share the next. No
+     order overrides: the toolbar is one group now, and reordering its children
+     from outside the group is what would break this layout. */
   .boardHeader {
     align-items: center;
     flex-wrap: wrap;
@@ -855,30 +1255,37 @@
 
   .backButton {
     flex: 0 0 auto;
-    order: 1;
   }
 
   .boardTitle {
     flex: 1 1 auto;
-    order: 2;
   }
 
   .boardHeader > .detailMeta {
     flex: 1 0 100%;
     margin-left: 0;
-    order: 3;
   }
 
-  .search {
+  .boardTools {
     flex: 1 0 100%;
+    margin-left: 0;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .boardTools > .search {
+    flex: 1 0 100%;
+    min-width: 0;
+  }
+
+  .boardTools > .projectFilter {
+    flex: 1 1 auto;
     min-width: 0;
-    order: 4;
   }
 
-  .boardHeader > button:not(.backButton) {
+  .boardTools > button {
     flex: 1 1 0;
     min-width: 0;
-    order: 5;
   }
 
   .columns {
@@ -1036,7 +1443,6 @@
  * --------------------------------------------------------------------------- */
 
 /* --- one themed focus-visible ring (approx 2px, 2px offset) --- */
-.card:focus-visible,
 .primaryButton:focus-visible,
 .ghostButton:focus-visible,
 .dangerButton:focus-visible,
@@ -1133,6 +1539,22 @@
   .cardSpinner {
     animation: none;
   }
+
+  /* Overlay lifecycle without spatial travel: the backdrop and the surface keep
+     a short reversible fade, so entering and leaving stay perceptible and the
+     surface still spends the same time on screen before `usePresence`
+     unmounts it. */
+  .modalBackdrop,
+  .modal,
+  .detail {
+    animation: dshTbBackdropIn var(--dsh-tb-motion-close) linear both;
+  }
+
+  .modalBackdrop[data-state='closing'],
+  .modalBackdrop[data-state='closing'] .modal,
+  .modalBackdrop[data-state='closing'] .detail {
+    animation: dshTbBackdropOut var(--dsh-tb-motion-close) linear both;
+  }
 }
 
 /* --- task tags (issue #1521) ---------------------------------------------------
@@ -1168,7 +1590,10 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
-  margin: 0 0 10px;
+  /* The board's own row rhythm spaces this row from the header and the
+     columns; a local margin would double it. */
+  margin: 0;
+  flex: none;
 }
 
 .tagFilterLabel {