@bongos/core 1.17.1 → 1.17.3

package/modules/hall-ui/public/style.css

@@ -105,6 +105,22 @@ html[data-theme="dark"] body { background: var(--bg); }
   html:not([data-theme]) body { background: var(--bg); }
 }
 
+/* ---------- table of contents (task 2166) ----------
+   Section banners in file order — grep "----------" to jump:
+     tokens + dark theme (ABOVE — the theming contract; never move/rename)
+     base · app shell · responsive shell · cards (.scroll) · stat tiles
+     Standing layout (section rail) · legacy page chrome compat
+     ledger tables · filters / pager / buttons · profile / standing
+     rank badges + tooltip · karma / acclaim · achievements · dev curve
+     onboarding checklist · welcome panel + setup selector · landing
+     goals · work-board task cards · ranks page
+     security / roster / admin leftovers (dead — removed by task 2179)
+     toast + overlays · misc shared bits · widget one-offs (wizard, triage,
+     goal inbox) · hall-kit components (END — the shared kit, task 2166).
+   New page-SPECIFIC styles belong in that page's own <page>.css (the
+   primer.css precedent), not here; new SHARED components join the kit
+   section at the end. */
+
 /* ---------- base ---------- */
 
 * { box-sizing: border-box; }
@@ -1746,3 +1762,155 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .np-kv span { color: var(--ink-faint); font-size: 0.85rem; min-width: 12rem; }
 .np-kv code, .np-steps code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 4px; word-break: break-all; }
 .np-done { margin-top: 0.5rem; }
+
+/* ---- task 1471: idea-inbox triage cue (Home widget, Metic+) ---- */
+/* Shared .count-pill — work.html defines its own page-scoped copy; the hall
+   index widget needs the same look, so it lives in the shared sheet now. */
+.count-pill {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 18px; padding: 0 6px; margin-left: 8px;
+  border-radius: 999px; background: var(--surface-2); color: var(--ink-soft);
+  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
+  vertical-align: 2px;
+}
+.triage-inbox { list-style: none; margin: 0; padding: 0; }
+.triage-inbox__item {
+  display: flex; align-items: baseline; gap: 0.5rem;
+  padding: 0.3rem 0; border-top: 1px solid var(--rule-soft);
+}
+.triage-inbox__item:first-child { border-top: 0; }
+.triage-inbox__link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.triage-inbox__kind {
+  flex: 0 0 auto; font-size: 11px; color: var(--ink-faint);
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+.triage-inbox__empty { color: var(--ink-faint); padding: 0.3rem 0; }
+
+/* Goal inbox (task 1954, ADR 0112) — the home-page two-sided membership queue:
+   invitations to accept + join-requests to approve. Matches the home widgets'
+   card language (.scroll host); each row is body-left / actions-right. */
+.ginbox { list-style: none; margin: 0 0 4px; padding: 0; }
+.ginbox__sec-h {
+  margin: 14px 0 6px; font-size: 12px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint);
+}
+.ginbox__item {
+  display: flex; align-items: flex-start; gap: 12px;
+  padding: 9px 0; border-top: 1px solid var(--rule-soft);
+}
+.ginbox__item:first-child { border-top: 0; }
+.ginbox__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ginbox__goal { font-weight: 600; font-size: 13.5px; }
+.ginbox__sub { font-size: 12.5px; color: var(--ink-soft); }
+.ginbox__note { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
+.ginbox__actions { flex: 0 0 auto; display: flex; gap: 6px; }
+.ginbox__pending { font-size: 12.5px; margin: 10px 0 0; color: var(--ink-soft); }
+
+/* ---------- hall-kit components (task 2166) ----------
+   Styles for the shared kit (hall-kit.js / window.OTBKit): pager bar,
+   filter-bar disclosure + chips, tab strip, empty state, skeleton shimmer,
+   collapsible card. The kit reuses .ledger/.pager/.filters/.setup__tab/
+   .rail-link defined above; only what is new lives here. The .pager--paged
+   block is promoted VERBATIM from work.html's page-local <style> (task 1931)
+   so every page can render the standard bar — work.html's identical copy
+   retires with task 2170 (duplicate rules, no visual change meanwhile). */
+
+.pager--paged { justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
+.pager__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.pager__perpage {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; color: var(--ink-faint);
+}
+.pager__perpage select { height: 30px; padding: 2px 8px; font-size: 13px; }
+.pager__page {
+  font-size: 12.5px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: center;
+}
+.pager__nav .pager__btn:disabled { opacity: 0.4; cursor: default; }
+
+/* filter-bar disclosure ("Filters" button) + removable active-filter chips */
+.filters__more-count { margin-left: 6px; }
+.filters--overflow {
+  padding: 10px 12px;
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  margin-bottom: 14px;
+}
+.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px;
+  font-size: 12.5px;
+  color: var(--accent-text);
+  background: var(--accent-weak);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
+  border-radius: 999px;
+  cursor: pointer;
+}
+.chip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); }
+
+/* tab strip — the .setup__tab idiom in the .setup__toggle frame, promoted */
+.kit-tabs {
+  display: inline-flex;
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  margin: 0 0 14px;
+}
+.kit-tabs .setup__tab { white-space: nowrap; }
+.kit-tabs .setup__tab .count-pill { margin-left: 6px; }
+
+/* empty state — one short line + at most one action link */
+.empty-state { padding: 6px 0; }
+.empty-state p { margin: 0; font-size: 13px; color: var(--ink-faint); }
+.empty-state__action { display: inline-block; margin-top: 6px; font-size: 13px; }
+
+/* skeleton shimmer — standard-height placeholder rows while data loads, so
+   cards don't jump; derives from the ink/bg tokens like everything else */
+.kit-skel {
+  display: inline-block;
+  width: 60%;
+  min-width: 80px;
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--ink) 7%, var(--bg-card)) 25%,
+    color-mix(in srgb, var(--ink) 13%, var(--bg-card)) 45%,
+    color-mix(in srgb, var(--ink) 7%, var(--bg-card)) 65%);
+  background-size: 200% 100%;
+  animation: kit-skel-shimmer 1.2s ease-in-out infinite;
+}
+.kit-skel-row td { border-bottom: 1px solid var(--rule-soft); }
+@keyframes kit-skel-shimmer {
+  from { background-position: 120% 0; }
+  to   { background-position: -80% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-skel { animation: none; }
+}
+
+/* collapsible card body — the Work-backlog <details> idiom, generalized */
+.kit-collapse__summary {
+  cursor: pointer;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.kit-collapse__summary .scroll__h { display: inline; margin: 0; }
+.kit-collapse__body { margin-top: 12px; }
+
+/* ---- Home dashboard (task 2169) ---- */
+/* Stat tiles are links now — inherit ink, reveal affordance on hover. */
+a.stat-tile { color: inherit; }
+a.stat-tile:hover {
+  text-decoration: none;
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
+}
+/* Projects card header: title left, "Start a project" disclosure right. */
+.proj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.proj-head .scroll__h { margin: 0; }
+/* The over-budget "More" row — one quiet line, not a card. */
+.home-more { margin: 0; font-size: 13px; color: var(--ink-soft); }

package/modules/hall-ui/public/work.css

@@ -0,0 +1,194 @@
+/* work.css — page-local styles for the Work Board (task 2170; extracted from
+   work.html's old inline <style> per the hall placement rules). Only what the
+   shared kit doesn't carry lives here: in-flight actions, claimable task
+   cards (dense 2-line layout), history list, bulk toolbar. Shared pieces —
+   .pager--paged, .count-pill, .kit-tabs, .filters overflow — are in
+   style.css. Everything derives from the shared design tokens so instance
+   packs reskin this page along with the rest of the hall. */
+
+.kbd {
+  display: inline-block;
+  padding: 0 6px;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  background: var(--surface-2);
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--ink-soft);
+}
+
+.wip-builder { color: var(--ink); font-weight: 600; }
+.wip-builder small { color: var(--ink-soft); font-weight: 400; }
+
+/* Filtered-count line under the filter bar. */
+.claim-count-line {
+  margin: 0 0 10px;
+  font-size: 12.5px;
+  color: var(--ink-faint);
+}
+
+/* ---- #616 / task 2170: claim/release actions + the dense task card ---- */
+
+/* task 2170 (owner call 2026-07-10): denser 2-line cards. The card keeps its
+   grid but tightens padding and type, actions go horizontal, and the touches
+   path-dump becomes a "✎ N files" chip with the full list in the tooltip. */
+.task { padding: 8px 12px; gap: 2px 12px; }
+.task__title { font-size: 13px; line-height: 1.35; }
+.task__meta { margin-top: 1px; row-gap: 2px; }
+
+.task__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+/* Claim is the primary action — filled accent so it reads above Copy. */
+.task__claim {
+  background: var(--accent);
+  border: 1px solid var(--accent-deep);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 5px 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 150ms, opacity 150ms;
+}
+.task__claim:hover { background: var(--accent-deep); }
+.task__claim:disabled { opacity: 0.55; cursor: default; }
+
+/* Files a claimable task is responsible for — a compact count chip in the
+   meta row; the full path list rides the tooltip (task 2170 density pass). */
+.task__touches {
+  color: var(--ink-faint);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: help;
+}
+
+.task__tag--newcomer {
+  background: var(--ok-weak);
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
+}
+.task__tag--mine {
+  background: var(--accent-weak);
+  color: var(--accent-text);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+/* task 1498 / ADR 0084: per-task rank floor. Outlined + emphasized (not a
+   filled tag) so a gated task reads as "authority required", distinct from
+   the filled newcomer tag. */
+.task__tag--rank {
+  background: transparent;
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+/* task 1752: the open (no floor) state — muted/neutral so "Any rank" reads as
+   "open to all", not as a warning like the gated --rank tag above. */
+.task__tag--rank-open {
+  background: transparent;
+  color: var(--ink-faint);
+  border-color: var(--border);
+}
+/* task 1753: the whole card is clickable → toggles selection (task 1869). */
+.task { cursor: pointer; }
+.backlog-count { font-size: 13px; color: var(--ink-faint); margin-left: 8px; }
+#backlog-list .history__row { cursor: pointer; }
+
+/* In-flight table: release action on the viewer's own claims. */
+.wip__action { text-align: right; white-space: nowrap; }
+.wip__release {
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  color: var(--ink-soft);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 11px;
+  cursor: pointer;
+  transition: background 150ms, color 150ms, border-color 150ms;
+}
+.wip__release:hover:not(:disabled) {
+  background: var(--danger-weak);
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
+}
+.wip__release:disabled { opacity: 0.55; cursor: default; }
+.wip__mine-none { color: var(--ink-faint); }
+.wip__row--mine { background: var(--accent-weak); }
+
+/* Recently-shipped history. */
+.history { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
+.history__row {
+  display: flex; align-items: baseline; gap: 12px;
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.history__row:last-child { border-bottom: none; }
+.history__id {
+  font-weight: 600; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; min-width: 3.2em;
+}
+.history__title { flex: 1 1 auto; color: var(--ink); min-width: 0; }
+.history__when { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
+
+@media (max-width: 640px) {
+  .task__actions { grid-column: 2; justify-self: start; }
+}
+
+/* ---- task 1759: multi-select + the bottom bulk-action toolbar ---- */
+
+.wip__select-cell { width: 1%; text-align: center; }
+.wip__select { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
+
+.bulk-toolbar {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  background: var(--ink);
+  color: var(--bg-card);
+  padding: 10px 16px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  max-width: min(92vw, 720px);
+}
+.bulk-toolbar[hidden] { display: none; }
+.bulk-toolbar__count { font-size: 13px; font-weight: 600; white-space: nowrap; }
+.bulk-toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.bulk-toolbar__btn {
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: var(--bg-card);
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 6px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 150ms, opacity 150ms;
+}
+.bulk-toolbar__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
+.bulk-toolbar__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.bulk-toolbar__clear {
+  background: transparent;
+  border: none;
+  color: var(--bg-card);
+  opacity: 0.75;
+  font-size: 12.5px;
+  cursor: pointer;
+  padding: 4px 6px;
+}
+.bulk-toolbar__clear:hover { opacity: 1; }
+
+@media (max-width: 640px) {
+  .bulk-toolbar { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
+}