@nklisch/pi-agile-workflow 0.15.3

package/work-view/crates/cli/src/board/assets/components.css

@@ -0,0 +1,290 @@
+/*
+ * Component library for Substrate Board (epic-substrate-board)
+ * Generated by /ux-ui-design:components on 2026-05-31
+ * Depends on: tokens.css (link it FIRST). Themes across all 6 accents
+ *   ([data-accent]) and light/dark ([data-theme] / system) automatically —
+ *   every value is a var(--token); no hard-coded colors.
+ *
+ * Aesthetic (from the data-dense terminal palette):
+ *   depth   = flat + thin borders, faint glow only on primary action
+ *   corners = sharp (radius-sm on controls, radius-md on cards)
+ *   density = dense (compact padding, mono data, ~30px hit targets)
+ *
+ * Read-only board: no destructive/edit controls this epic.
+ *
+ * Components:
+ *   actions   .btn (primary/ghost, --sm, states)
+ *   forms     .input (+ --search), .select
+ *   nav       .tabs/.tab (view-switcher), .seg (segmented), .filter-bar/.filter-chip,
+ *             .theme-picker (composite shipped control)
+ *   data      .chip (kind, outline x5), .badge (status x3), .count, .table
+ *   feedback  .alert (info/warning/danger — diagnostics), .empty, .spinner
+ *   unique    .item-card (+ --epic/--feature/--story, states), .kanban-col,
+ *             .dep-node (dependency view), .detail-drawer (read-only item detail)
+ *
+ * Edit by re-running /ux-ui-design:components (it preserves this header).
+ */
+
+/* ============================================================ ACTIONS */
+.btn {
+  font: var(--font-weight-semibold) var(--font-size-sm)/1 var(--font-sans);
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: 8px 14px; border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-bg-secondary); color: var(--color-text-primary);
+  cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s, opacity .14s;
+}
+.btn:hover { border-color: var(--color-accent); }
+.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+.btn:active { transform: translateY(0.5px); }
+.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
+
+.btn-primary {
+  background: var(--color-accent); color: var(--color-text-inverse);
+  border-color: var(--color-accent);
+}
+.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: 0 0 0 1px var(--color-accent), 0 0 14px -4px var(--color-accent); }
+
+.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-secondary); }
+.btn-ghost:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
+
+.btn--sm { padding: 5px 10px; font-size: var(--font-size-xs); }
+.btn--icon { padding: 7px; }
+
+/* ============================================================ FORMS */
+.input {
+  font: var(--font-weight-regular) var(--font-size-sm)/1.2 var(--font-mono);
+  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border); background: var(--color-bg-tertiary);
+  color: var(--color-text-primary); transition: border-color .14s, box-shadow .14s;
+}
+.input::placeholder { color: var(--color-text-tertiary); }
+.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-muted); }
+.input:disabled { opacity: .5; cursor: not-allowed; }
+
+.input-search { position: relative; display: inline-flex; align-items: center; }
+.input-search .input { padding-left: 30px; }
+.input-search::before {
+  content: "⌕"; position: absolute; left: 10px; color: var(--color-text-tertiary);
+  font: var(--font-size-base)/1 var(--font-mono); pointer-events: none;
+}
+
+.select {
+  font: var(--font-weight-semibold) var(--font-size-xs)/1 var(--font-mono);
+  padding: 7px 26px 7px 9px; border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-strong); background: var(--color-bg-tertiary);
+  color: var(--color-text-primary); cursor: pointer; appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 14px) 53%, calc(100% - 9px) 53%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
+}
+.select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
+
+/* ============================================================ NAVIGATION */
+/* view-switcher tabs */
+.tabs { display: inline-flex; gap: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px; background: var(--color-bg-tertiary); }
+.tab {
+  font: var(--font-weight-semibold) var(--font-size-xs)/1 var(--font-sans);
+  padding: 6px 12px; border: 0; border-radius: calc(var(--radius-sm) - 1px);
+  background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: background .14s, color .14s;
+}
+.tab:hover { color: var(--color-text-primary); }
+.tab[aria-selected="true"] { background: var(--color-accent); color: var(--color-text-inverse); }
+
+/* segmented control (mode toggle) */
+.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
+.seg-btn {
+  font: var(--font-weight-semibold) var(--font-size-xs)/1 var(--font-mono);
+  padding: 6px 10px; border: 0; background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary); cursor: pointer; transition: background .14s, color .14s;
+}
+.seg-btn + .seg-btn { border-left: 1px solid var(--color-border-strong); }
+.seg-btn:hover { color: var(--color-text-primary); }
+.seg-btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text-inverse); }
+
+/* filter bar */
+.filter-bar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
+.filter-chip {
+  font: var(--font-weight-semibold) var(--font-size-xs)/1.4 var(--font-mono);
+  padding: 4px 9px; border-radius: var(--radius-full);
+  border: 1px solid var(--color-border-strong); background: var(--color-bg-secondary);
+  color: var(--color-text-secondary); cursor: pointer; transition: background .14s, border-color .14s, color .14s;
+}
+.filter-chip:hover { color: var(--color-text-primary); }
+.filter-chip[aria-pressed="true"] { background: var(--color-accent-muted); border-color: var(--color-accent); color: var(--color-text-primary); }
+.filter-chip .x { opacity: .6; margin-left: 4px; }
+
+/* auto-hide toggle (released/archived) */
+.toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font: var(--font-weight-medium) var(--font-size-xs)/1.3 var(--font-mono); color: var(--color-text-secondary); white-space: nowrap; background: transparent; border: 0; padding: 0; text-align: left; }
+.toggle .track { flex: 0 0 auto; }
+.toggle .track { width: 30px; height: 16px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; transition: background .14s; }
+.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg-secondary); transition: left .14s; }
+.toggle[aria-pressed="true"] .track { background: var(--color-accent); }
+.toggle[aria-pressed="true"] .track::after { left: 16px; }
+
+/* theme picker — composite shipped control (accent + mode) */
+.theme-picker { display: inline-flex; gap: var(--space-2); align-items: center; }
+.theme-picker .lbl { font: var(--font-weight-semibold) var(--font-size-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-tertiary); }
+
+/* ============================================================ DATA DISPLAY */
+/* kind chip — outline, colored per --kind-* */
+.chip {
+  font: var(--font-weight-semibold) 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
+  padding: 1px 6px; border-radius: var(--radius-sm); border: 1.5px solid var(--kind-backlog); color: var(--kind-backlog);
+  display: inline-block; white-space: nowrap;
+}
+.chip--epic    { border-color: var(--kind-epic);    color: var(--kind-epic); }
+.chip--feature { border-color: var(--kind-feature); color: var(--kind-feature); }
+.chip--story   { border-color: var(--kind-story);   color: var(--kind-story); }
+.chip--release { border-color: var(--kind-release); color: var(--kind-release); }
+.chip--backlog { border-color: var(--kind-backlog); color: var(--kind-backlog); }
+
+/* status badge — filled */
+.badge {
+  font: var(--font-weight-semibold) 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
+  padding: 1px 6px; border-radius: var(--radius-sm); color: #fff; display: inline-block; white-space: nowrap;
+}
+.badge--ready   { background: var(--status-ready); }
+.badge--blocked { background: var(--status-blocked); }
+.badge--done    { background: var(--color-text-tertiary); }
+
+/* count pill */
+.count { font: var(--font-weight-semibold) var(--font-size-xs)/1 var(--font-mono); color: var(--color-text-secondary); background: var(--color-bg-tertiary); border-radius: var(--radius-full); padding: 1px 7px; }
+
+/* table (table view) */
+.table { width: 100%; border-collapse: collapse; font: var(--font-size-sm)/1.4 var(--font-sans); }
+.table th {
+  text-align: left; font: var(--font-weight-semibold) var(--font-size-xs)/1.4 var(--font-mono);
+  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary);
+  padding: 8px 10px; border-bottom: 1px solid var(--color-border-strong); cursor: pointer; white-space: nowrap; user-select: none;
+}
+.table th:hover { color: var(--color-text-primary); }
+.table th .sort { color: var(--color-accent); margin-left: 4px; }
+.table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
+.table td.mono { font-family: var(--font-mono); color: var(--color-text-secondary); }
+.table tbody tr:hover { background: var(--color-bg-tertiary); }
+
+/* ============================================================ FEEDBACK */
+.alert {
+  display: flex; gap: var(--space-2); align-items: flex-start; padding: 10px 12px;
+  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-info); background: var(--color-bg-secondary);
+  font: var(--font-size-sm)/1.45 var(--font-sans); color: var(--color-text-primary);
+}
+.alert .ico { font-family: var(--font-mono); color: var(--color-info); font-weight: 700; }
+.alert--info    { border-left-color: var(--color-info); }   .alert--info .ico    { color: var(--color-info); }
+.alert--warning { border-left-color: var(--color-warning); } .alert--warning .ico { color: var(--color-warning); }
+.alert--danger  { border-left-color: var(--color-danger); }  .alert--danger .ico  { color: var(--color-danger); }
+.alert .body small { display: block; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-xs); margin-top: 2px; }
+
+.empty {
+  text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-text-tertiary);
+  border: 1px dashed var(--color-border); border-radius: var(--radius-md); font: var(--font-size-sm)/1.5 var(--font-sans);
+}
+.empty .glyph { font-size: 22px; opacity: .6; display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); }
+
+.spinner {
+  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
+  border: 2px solid var(--color-border-strong); border-top-color: var(--color-accent);
+  animation: spin .7s linear infinite; vertical-align: middle;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
+
+/* ============================================================ PROJECT-UNIQUE */
+/* item-card — the shared substrate item card (the board's core unit) */
+.item-card {
+  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
+  border-left: 3px solid var(--kind-backlog); border-radius: var(--radius-md);
+  padding: 11px 12px; transition: border-color .14s, box-shadow .14s, transform .06s;
+  cursor: pointer;
+}
+.item-card:hover { border-color: var(--color-border-strong); box-shadow: 0 2px 12px -6px rgba(0,0,0,.5); }
+.item-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+.item-card:focus-within, .item-card.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
+.item-card.is-blocked { opacity: .82; }
+.item-card--epic    { border-left-color: var(--kind-epic); }
+.item-card--feature { border-left-color: var(--kind-feature); }
+.item-card--story   { border-left-color: var(--kind-story); }
+.item-card--release { border-left-color: var(--kind-release); }
+.item-card--compact { min-height: 142px; }
+
+.item-card .ic-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
+.item-card .ic-id { font: var(--font-weight-semibold) 12.5px/1.3 var(--font-mono); letter-spacing: 0; color: var(--color-text-primary); overflow-wrap: anywhere; }
+.item-card .ic-body { color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: 1.45; }
+.item-card .ic-body.is-empty { color: var(--color-text-tertiary); font-style: italic; }
+/* rendered markdown body affordances */
+.item-card .ic-body code { font-family: var(--font-mono); background: var(--color-bg-tertiary); padding: 0 4px; border-radius: 2px; }
+.item-card .ic-body strong { color: var(--color-text-primary); }
+.item-card .ic-meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: 7px; color: var(--color-text-tertiary); font: 10.5px/1.4 var(--font-mono); }
+.item-card .ic-meta .dep { color: var(--color-text-tertiary); }
+.item-card .ic-meta .dep .arrow { color: var(--color-accent); }
+.item-card--compact .ic-meta { max-height: 46px; overflow: hidden; }
+
+/* kanban column header */
+.kanban-col-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
+.kanban-col-head .title { font: var(--font-weight-semibold) var(--font-size-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary); }
+
+/* dependency-view node + edges */
+.dep-node {
+  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
+  border-radius: var(--radius-md); padding: 10px 12px; display: grid; gap: 6px;
+}
+.dep-node.is-blocked { border-color: color-mix(in srgb, var(--status-blocked) 50%, var(--color-border)); }
+.dep-node .dn-head { display: flex; align-items: center; gap: var(--space-2); }
+.dep-node .ic-id { min-width: 0; overflow-wrap: anywhere; }
+.dep-node .edges { display: grid; gap: 3px; font: 11px/1.4 var(--font-mono); }
+.dep-node .edge { display: flex; gap: 6px; align-items: center; color: var(--color-text-secondary); }
+.dep-node .edge span:last-child { min-width: 0; overflow-wrap: anywhere; }
+.dep-node .edge .up   { color: var(--color-text-tertiary); }   /* depends_on (upstream) */
+.dep-node .edge .down { color: var(--color-accent); }          /* unblocks (downstream) */
+.dep-node .edge .met  { color: var(--status-ready); }
+.dep-node .edge .unmet{ color: var(--status-blocked); }
+
+/* read-only item detail drawer */
+.detail-drawer {
+  background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md); width: 380px; max-width: 100%; padding: var(--space-4);
+  box-shadow: -8px 0 40px -16px rgba(0,0,0,.6);
+}
+.detail-drawer .dd-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
+.detail-drawer .dd-id { font: var(--font-weight-semibold) var(--font-size-base)/1.2 var(--font-mono); color: var(--color-text-primary); }
+.detail-drawer .dd-close { margin-left: auto; }
+.detail-drawer .dd-frontmatter { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font: var(--font-size-xs)/1.5 var(--font-mono); margin-bottom: var(--space-3); }
+.detail-drawer .dd-frontmatter dt { color: var(--color-text-tertiary); }
+.detail-drawer .dd-frontmatter dd { margin: 0; color: var(--color-text-primary); }
+.detail-drawer .dd-md { font: var(--font-size-sm)/1.55 var(--font-sans); color: var(--color-text-primary); }
+.detail-drawer .dd-md h4 { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-size-sm); }
+.detail-drawer .dd-md code { font-family: var(--font-mono); background: var(--color-bg-tertiary); padding: 0 4px; border-radius: 2px; }
+
+/* size-detected item detail surface */
+.detail-scrim {
+  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
+  padding: var(--space-6); background: rgba(0,0,0,.55);
+}
+.detail-drawer.as-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; border-radius: 0; overflow-y: auto; }
+.detail-drawer.w-narrow { width: 380px; }
+.detail-drawer.w-wide { width: 560px; }
+
+.item-modal {
+  position: relative; z-index: 50; width: min(760px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
+  background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
+  box-shadow: 0 24px 80px -24px rgba(0,0,0,.7); overflow: hidden;
+}
+.item-modal .m-head { display: flex; align-items: center; gap: var(--space-2); padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
+.item-modal .m-id { font: var(--font-weight-semibold) var(--font-size-lg)/1.2 var(--font-mono); color: var(--color-text-primary); }
+.item-modal .m-scroll { overflow-y: auto; padding: 18px; }
+
+/* rich markdown rendering shared by detail stories */
+.md .reading { max-width: 68ch; }
+.md h1 { font: var(--font-weight-bold) var(--font-size-xl)/1.25 var(--font-sans); margin: 0 0 10px; letter-spacing: 0; }
+.md h2 { font: var(--font-weight-semibold) var(--font-size-base)/1.3 var(--font-sans); margin: 20px 0 8px; border-bottom: 1px solid var(--color-border); padding-bottom: 5px; }
+.md h3 { font: var(--font-weight-semibold) var(--font-size-sm)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-tertiary); margin: 16px 0 6px; }
+.md p { margin: 0 0 10px; font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-secondary); }
+.md ul { margin: 0 0 10px; padding-left: 18px; }
+.md li { font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-secondary); margin: 3px 0; }
+.md code { font-family: var(--font-mono); font-size: .85em; background: var(--color-bg-tertiary); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--color-text-primary); }
+.md pre { margin: 0 0 12px; padding: 12px; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-tertiary); }
+.md pre code { padding: 0; background: transparent; }
+.md blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--color-border-strong); color: var(--color-text-secondary); }
+.md a { color: var(--color-text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
+.md strong { color: var(--color-text-primary); }