@kingsleyweb/bun-ui 0.0.0-stage → 3.0.0-rc.2

package/app/docs/styles/base.css

@@ -0,0 +1,847 @@
+/* Base styles and component classes. Tokens live in tokens.css. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--accent);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.skip-link {
+  position: absolute;
+  left: var(--space-2);
+  top: -40px;
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  z-index: 10;
+}
+
+.skip-link:focus {
+  top: var(--space-2);
+}
+
+/* ---- Frame ---- */
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-4);
+  min-height: var(--header-height);
+  padding: var(--space-2) var(--space-4);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.app-brand {
+  font-weight: 650;
+  font-size: var(--text-lg);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.app-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.app-header-end {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+  min-width: 0;
+}
+
+.app-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.app-nav {
+  flex: 0 0 var(--nav-width);
+  padding: var(--space-4) var(--space-2);
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.app-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.app-nav-link {
+  display: block;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.app-nav .app-nav-sub {
+  margin-top: var(--space-1);
+  padding-left: var(--space-3);
+}
+
+.app-nav-sub .app-nav-link {
+  font-size: var(--text-sm);
+}
+
+.app-nav-link:hover {
+  background: var(--surface-2);
+}
+
+.app-nav-link[aria-current="page"] {
+  background: var(--info-bg);
+  color: var(--info-text);
+  font-weight: 600;
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+  padding: var(--space-5);
+}
+
+.app-main:focus {
+  outline: none;
+}
+
+.screen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-width: 1400px;
+}
+
+.screen-title {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+
+.bootstrap-screen {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  padding: var(--space-4);
+}
+
+.bootstrap-title {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+
+/* ---- Components ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+
+.btn:hover {
+  background: var(--surface-2);
+}
+
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.btn-primary:hover {
+  background: var(--accent);
+  filter: brightness(1.08);
+}
+
+.btn-danger {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: var(--danger-contrast);
+}
+
+.btn-danger:hover {
+  background: var(--danger);
+  filter: brightness(1.08);
+}
+
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+}
+
+.btn-sm {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  font-weight: 550;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.badge-neutral {
+  background: var(--neutral-bg);
+  color: var(--neutral-text);
+}
+
+.badge-info {
+  background: var(--info-bg);
+  color: var(--info-text);
+}
+
+.badge-success {
+  background: var(--success-bg);
+  color: var(--success-text);
+}
+
+.badge-warning {
+  background: var(--warning-bg);
+  color: var(--warning-text);
+}
+
+.badge-danger {
+  background: var(--danger-bg);
+  color: var(--danger-text);
+}
+
+.badge-accent {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  padding: 2px var(--space-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  max-width: 100%;
+}
+
+.chip-label {
+  color: var(--text-muted);
+}
+
+.chip-value {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  min-width: 0;
+}
+
+.card-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border);
+}
+
+.card-title {
+  margin: 0;
+  font-size: var(--text-lg);
+}
+
+.card-body {
+  padding: var(--space-4);
+}
+
+.input {
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: var(--text-sm);
+}
+
+.search {
+  flex: 0 1 260px;
+  min-width: 0;
+}
+
+/*
+ * A search placed straight in a screen's column (the Workers page, the queue
+ * filter under a card title): there the flex basis above would be a HEIGHT,
+ * and the box grew 260px tall. Size it by width instead.
+ */
+.screen > .search,
+.queues-search {
+  flex: none;
+  width: min(100%, 260px);
+}
+
+.table-wrap {
+  overflow: auto;
+  max-height: 70vh;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--text-sm);
+}
+
+.table th,
+.table td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface-2);
+  font-weight: 600;
+}
+
+.table tbody tr:hover {
+  background: var(--surface-2);
+}
+
+.table .num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Dimmed by colour alone: an opacity on top would take it below 4.5:1. */
+.table .zero {
+  color: var(--text-muted);
+}
+
+.queue-name {
+  font-weight: 500;
+}
+
+.queue-paused {
+  margin-left: var(--space-2);
+}
+
+.empty-state {
+  padding: var(--space-5) var(--space-4);
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.empty-state-title {
+  margin: 0 0 var(--space-1);
+  font-size: inherit;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.empty-state-description {
+  margin: 0;
+}
+
+.empty-state-action {
+  margin-top: var(--space-3);
+}
+
+.error-view {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--danger);
+  border-radius: var(--radius-sm);
+  background: var(--danger-bg);
+  color: var(--danger-text);
+  max-width: 640px;
+}
+
+.error-view p {
+  margin: 0;
+}
+
+.error-view-title {
+  margin: 0;
+  font-size: inherit;
+  font-weight: 650;
+}
+
+.error-view-issues {
+  margin: 0;
+  padding-left: var(--space-4);
+}
+
+.notice {
+  margin: var(--space-3) 0 0;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--warning-bg);
+  color: var(--warning-text);
+  font-size: var(--text-sm);
+}
+
+.spinner-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-muted);
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+ * Reduced motion: no transition or animation anywhere, whichever stylesheet
+ * declares it (a screen's chunk included), except the spinner, which keeps
+ * turning slowly: a spinner that stops no longer says "busy".
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+    scroll-behavior: auto !important;
+  }
+
+  .spinner {
+    animation-duration: 2.4s !important;
+    animation-iteration-count: infinite !important;
+  }
+}
+
+/* Job states */
+.state-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.state-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--state-color, var(--text-muted));
+  flex: none;
+}
+
+.state-waiting {
+  --state-color: var(--state-waiting);
+}
+.state-delayed {
+  --state-color: var(--state-delayed);
+}
+.state-active {
+  --state-color: var(--state-active);
+}
+.state-completed {
+  --state-color: var(--state-completed);
+}
+.state-failed {
+  --state-color: var(--state-failed);
+}
+.state-dead {
+  --state-color: var(--state-dead);
+}
+.state-waiting-children {
+  --state-color: var(--state-waiting-children);
+}
+
+/* Stats */
+.overview-summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--space-3);
+  margin: 0;
+}
+
+.stat {
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  min-width: 0;
+}
+
+.stat-state {
+  border-top: 3px solid var(--state-color);
+}
+
+.stat dd {
+  margin: 0;
+}
+
+.stat-label {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.stat-value {
+  font-size: var(--text-xl);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.stat-hint {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/*
+ * "Over the range": a full-width band under the totals, not a tile in their
+ * grid. In the grid its figures stacked into one tall column and stretched the
+ * other tiles to match; here each group is one row of compact cells — a small
+ * label over its number, like the state row above — and the two groups sit
+ * side by side, wrapping under each other only on a narrow screen.
+ */
+.range-band {
+  margin-top: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+
+.range-band-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.range-band-title {
+  font-weight: 600;
+}
+
+.range-band-groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3) var(--space-5);
+}
+
+.range-group {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* The added-by-state group has eight cells to the finished group's two. */
+.range-group-wide {
+  flex: 1 1 32rem;
+}
+
+.range-group-title {
+  margin: 0 0 var(--space-1);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.range-cells {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-4);
+  margin: 0;
+}
+
+.range-cell dt {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.range-cell dd {
+  margin: 0;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * Set apart by weight, not a divider: when the cells wrap, a left border would
+ * be left hanging at the start of the next line.
+ */
+.range-cell-total dt {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.range-note {
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* Sparkline */
+.sparkline-cell {
+  display: inline-flex;
+  align-items: center;
+  min-width: 120px;
+  min-height: 28px;
+}
+
+.sparkline {
+  display: block;
+  overflow: visible;
+}
+
+.sparkline polyline {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.sparkline-primary {
+  stroke: var(--state-completed);
+}
+
+.sparkline-secondary {
+  stroke: var(--state-failed);
+  opacity: 0.8;
+}
+
+.sparkline-baseline {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+
+.sparkline-placeholder {
+  display: block;
+  width: 120px;
+  height: 2px;
+  background: var(--border);
+}
+
+/* ---- Narrow screens: the nav becomes a scrolling row under the header ---- */
+@media (max-width: 720px) {
+  .app-body {
+    flex-direction: column;
+  }
+
+  .app-nav {
+    flex: none;
+    padding: var(--space-2);
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+    overflow-x: auto;
+  }
+
+  .app-nav ul {
+    flex-direction: row;
+  }
+
+  /* A parent and its children sit on the one row. */
+  .app-nav li {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  .app-nav .app-nav-sub {
+    margin-top: 0;
+    padding-left: 0;
+  }
+
+  .app-main {
+    padding: var(--space-4);
+  }
+
+  .app-header {
+    position: static;
+    padding: var(--space-2) var(--space-4);
+  }
+
+  .app-header-end {
+    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .live-status {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .search {
+    flex-basis: 100%;
+  }
+
+  .stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* The Overview's title row: the heading left, the range control right. */
+.overview-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.overview-header .screen-title {
+  margin: 0;
+}
+
+/* The range control and its toggle, stacked at the right of the title row. */
+.overview-range {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+
+/* Narrow: the control drops under the heading and fills the width. */
+@media (max-width: 720px) {
+  .overview-range {
+    align-items: stretch;
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+/* The queue filter, under the Queues card's title and above its table. */
+.queues-search {
+  margin-bottom: var(--space-3);
+}
+
+/* The standalone viewer has no app shell: the page padding the jobs UI's
+   `.app-main` gives its screens. */
+.docs-viewer {
+  padding: var(--space-5);
+}