@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/repo-activity.css

@@ -0,0 +1,575 @@
+/* ==========================================================================
+   @digithings-ai/ui — repo-activity family (components/repo-activity/*:
+   <RepoActivity/> compact + detailed). Import AFTER the token bridge:
+
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/repo-activity.css";
+     @source "<path-to>/packages/ui/src/components/repo-activity";
+
+   Self-layering: dress defaults in @layer components so call-site utilities
+   can override; hairline lists, the two-column collapse, and clone-box
+   geometry stay unlayered so they keep beating utilities.
+   ========================================================================== */
+
+@layer components {
+  .ra-compact,
+  .ra-detailed,
+  .ra-activity {
+    /* component tokens — repo-activity frame + type rhythm */
+    --ra-pad-block: 1.15rem;
+    --ra-pad-inline: 1.25rem;
+    --ra-gap: 0.4rem;
+    --ra-gap-row: 0.7rem;
+    --ra-font-micro: 0.7rem;
+    --ra-font-meta: 0.72rem;
+    --ra-font-sm: 0.74rem;
+    --ra-font-md: 0.78rem;
+    --ra-font-lg: 0.92rem;
+    --ra-font-num: 1.15rem;
+    --ra-font-body: 0.8rem;
+    --ra-space-block: 1.15rem;
+    --ra-gap-activity: 1.4rem;
+    --ra-metric-min: 5.2rem;
+    --ra-heat-rail: 2.1rem;
+    --ra-avatar: 36px;
+
+    border: 1px solid var(--hair);
+    background: var(--surface);
+    padding: var(--ra-pad-block) var(--ra-pad-inline);
+  }
+
+  .ra-kicker {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-meta);
+    letter-spacing: 0.04em;
+    color: var(--accent);
+  }
+
+  .ra-stamp {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-meta);
+    color: var(--ink-mute);
+  }
+
+  .ra-n {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-num);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.03em;
+    color: var(--ink);
+    line-height: 1.1;
+  }
+
+  .ra-l {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-sm);
+    color: var(--ink-mute);
+  }
+
+  .ra-num {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-md);
+    color: var(--accent);
+    text-underline-offset: 2px;
+  }
+
+  .ra-num:hover {
+    text-decoration: underline;
+  }
+
+  .ra-title {
+    flex: 1 1 12rem;
+    min-width: 0;
+    font-size: var(--ra-font-lg);
+    line-height: 1.45;
+    color: var(--ink-soft);
+  }
+
+  .ra-date {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-micro);
+    color: var(--ink-mute);
+    white-space: nowrap;
+  }
+
+  .ra-copy {
+    font-family: var(--font-mono);
+    font-size: var(--ra-font-micro);
+    color: var(--ink-mute);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 0.15rem 0.1rem;
+  }
+
+  .ra-copy:hover {
+    color: var(--accent);
+  }
+
+  /* Defensive default for a cell rendered without data-level; the step
+     rules below (higher specificity, same layer) still win. */
+  .ra-heat-cell {
+    background: color-mix(in srgb, var(--ink) 9%, transparent);
+  }
+
+  .ra-heat-cell[data-level="0"] {
+    background: color-mix(in srgb, var(--ink) 9%, transparent);
+  }
+
+  .ra-heat-cell[data-level="1"] {
+    background: color-mix(in srgb, var(--accent) 28%, transparent);
+  }
+
+  .ra-heat-cell[data-level="2"] {
+    background: color-mix(in srgb, var(--accent) 52%, transparent);
+  }
+
+  .ra-heat-cell[data-level="3"] {
+    background: color-mix(in srgb, var(--accent) 76%, transparent);
+  }
+
+  .ra-heat-cell[data-level="4"] {
+    background: var(--accent);
+  }
+}
+
+.ra-head,
+.ra-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ra-gap, 0.4rem) 1.1rem;
+}
+
+.ra-metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem 1.6rem;
+  margin-top: var(--ra-gap-row, 0.7rem);
+  list-style: none;
+  padding: 0;
+}
+
+.ra-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 0.18rem;
+  min-width: var(--ra-metric-min, 5.2rem);
+}
+
+.ra-meta {
+  margin-top: 0.95rem;
+}
+
+.ra-release {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--ink-mute);
+}
+
+.ra-release a {
+  color: var(--ink);
+  text-underline-offset: 2px;
+}
+
+.ra-release a:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.ra-repo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ra-gap, 0.4rem);
+  font-family: var(--font-mono);
+  font-size: var(--ra-font-md, 0.78rem);
+  color: var(--ink-soft);
+}
+
+.ra-repo:hover {
+  color: var(--accent);
+}
+
+.ra-list {
+  list-style: none;
+  padding: 0;
+  margin-top: 0.85rem;
+  border-top: 1px solid var(--hair);
+}
+
+.ra-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem var(--ra-gap-row, 0.7rem);
+  padding: 0.62rem 0;
+  border-bottom: 1px solid var(--hair);
+}
+
+.ra-group + .ra-group {
+  margin-top: 1.15rem;
+  padding-top: 1.05rem;
+  border-top: 1px solid var(--hair);
+}
+
+.ra-actions {
+  margin-top: 1.15rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.ra-clone {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  border: 1px solid var(--hair);
+  padding: 0.6rem var(--space-2);
+}
+
+.ra-clone code {
+  min-width: 0;
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  line-height: 1.5;
+  color: var(--ink-soft);
+}
+
+.ra-cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+.ra-cta a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border: 1px solid var(--hair);
+  padding: var(--space-2) 0.85rem;
+  font-family: var(--font-mono);
+  font-size: var(--ra-font-md, 0.78rem);
+  color: var(--ink);
+}
+
+.ra-cta a:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.ra-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.6rem;
+  margin-top: 1.4rem;
+  padding-top: 1.15rem;
+  border-top: 1px solid var(--hair);
+}
+
+.ra-heat {
+  margin-top: 0.7rem;
+}
+
+.ra-heat-total {
+  font-family: var(--font-mono);
+  font-size: 0.95rem;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+}
+
+.ra-heat-graph {
+  margin-top: 0.55rem;
+  width: 100%;
+}
+
+.ra-heat-body {
+  overflow-x: auto;
+  padding-bottom: 0.15rem;
+}
+
+/* The graph's coordinate frame: max-content, so it is exactly as wide as the
+   widest row (days column + gap + grid). Month labels are %-positioned inside
+   .ra-heat-months, which sits in this frame — giving them the same width as
+   the grid instead of the full body width. Without the frame .ra-heat-months
+   bound to the body's width and every month label drifted right of its column
+   (the last one by ~172px at 1440). Never cap this with max-width: the body
+   owns horizontal scrolling; capping would shrink the label space and
+   reintroduce the drift on narrow viewports. */
+.ra-heat-frame {
+  width: max-content;
+}
+
+.ra-heat-months {
+  position: relative;
+  height: 1rem;
+  margin-bottom: 0.3rem;
+  margin-inline-start: var(--ra-heat-rail, 2.1rem);
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--ink-mute);
+  white-space: nowrap;
+}
+
+.ra-heat-month {
+  position: absolute;
+  top: 0;
+}
+
+.ra-heat-row {
+  display: flex;
+  gap: 0.45rem;
+  align-items: flex-start;
+}
+
+.ra-heat-days {
+  display: grid;
+  grid-template-rows: repeat(7, 10px);
+  gap: 3px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  line-height: 10px;
+  color: var(--ink-mute);
+  padding-top: 0;
+}
+
+.ra-heat-day {
+  min-width: 1.65rem;
+}
+
+.ra-heat-grid {
+  gap: 3px;
+  width: max-content;
+  max-width: 100%;
+}
+
+.ra-heat-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.4rem 1rem;
+  margin-top: 0.5rem;
+  margin-inline-start: var(--ra-heat-rail, 2.1rem);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  color: var(--ink-mute);
+}
+
+.ra-heat-legend {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.ra-heat-legend > span {
+  margin: 0 0.3rem;
+}
+
+.ra-heat-legend > span:first-child {
+  margin-inline-start: 0;
+}
+
+.ra-heat-legend .ra-heat-cell {
+  width: 10px;
+  height: 10px;
+}
+
+.ra-heat-cell {
+  display: block;
+  width: 10px;
+  height: 10px;
+  aspect-ratio: auto;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+/* Fit mode: the squares scale to the column instead of the body scrolling.
+   The count still picks how many weeks are drawn (RepoActivity's `weeksThatFit`,
+   which sizes for the 10px floor); this only spends the leftover width, so the
+   grid is never wider than its column and never scrolls. Cells keep a 1:1
+   aspect ratio at every width — they are squares, just larger or smaller ones. */
+.ra-heat--fit .ra-heat-body {
+  overflow-x: visible;
+}
+.ra-heat--fit .ra-heat-frame {
+  width: 100%;
+}
+/* The row is `days rail + gap + grid`; a grid declared at 100% of the row
+   adds the rail and gap on top and overflows the column as soon as the
+   viewport narrows. Let the grid take the leftover flex space instead. */
+.ra-heat--fit .ra-heat-row {
+  width: 100%;
+  min-width: 0;
+}
+.ra-heat--fit .ra-heat-grid {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+}
+.ra-heat--fit .ra-heat-cell {
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  aspect-ratio: 1;
+}
+.ra-heat--fit .ra-heat-row {
+  align-items: stretch;
+}
+.ra-heat--fit .ra-heat-days {
+  grid-template-rows: repeat(7, 1fr);
+  line-height: 1;
+}
+.ra-heat--fit .ra-heat-legend .ra-heat-cell {
+  width: 10px;
+  height: 10px;
+}
+
+/* Left-to-right build, same grain as the hero banner: each column of cubes
+   and its month name arrives together. Unarmed stays blank so the first paint
+   does not flash the finished grid. Reduced motion shows the finished grid. */
+.ra-heat--build:not(.is-armed) .ra-heat-grid .ra-heat-cell,
+.ra-heat--build:not(.is-armed) .ra-heat-month {
+  opacity: 0;
+}
+.ra-heat--build.is-armed .ra-heat-grid .ra-heat-cell,
+.ra-heat--build.is-armed .ra-heat-month {
+  animation: ra-heat-build 280ms linear both;
+}
+@keyframes ra-heat-build {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0.35;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ra-heat--build:not(.is-armed) .ra-heat-grid .ra-heat-cell,
+  .ra-heat--build:not(.is-armed) .ra-heat-month {
+    opacity: 1;
+  }
+  .ra-heat--build.is-armed .ra-heat-grid .ra-heat-cell,
+  .ra-heat--build.is-armed .ra-heat-month {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ra-heat-cell {
+    forced-color-adjust: none;
+  }
+}
+@media (max-width: 720px) {
+  .ra-cols {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── activity variant ─────────────────────────────────────────────────────
+   Counts left, graph right, then the version ledger and the maintainer. The
+   graph column is the wide one and the metrics column is sized to its content,
+   so the empty right-hand half of the first rows is spent on the graph rather
+   than left as ground. */
+.ra-activity-top {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.4rem;
+}
+
+.ra-activity-metrics .ra-group + .ra-group {
+  margin-top: var(--ra-space-block, 1.15rem);
+  padding-top: 1.05rem;
+  border-top: 1px solid var(--hair);
+}
+
+.ra-activity-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--ra-gap-activity, 1.4rem) 2rem;
+  margin-top: var(--ra-gap-activity, 1.4rem);
+  padding-top: 1.2rem;
+  border-top: 1px solid var(--hair);
+}
+
+/* "Browse the repo" belongs in the bottom-right corner (owner, round 6).
+   `margin-left: auto` pins it there even when the maintainer is absent. */
+.ra-activity-foot .ra-meta {
+  margin-left: auto;
+  margin-top: 0;
+}
+
+.ra-contributor-body {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: var(--ra-font-body, 0.8rem);
+  color: var(--ink);
+}
+
+.ra-contributor-body a {
+  color: var(--ink);
+}
+
+.ra-contributor-body a:hover {
+  color: var(--accent);
+}
+
+.ra-contributor-role {
+  display: block;
+  font-size: var(--ra-font-meta, 0.72rem);
+  color: var(--ink-mute);
+}
+
+.ra-avatar {
+  display: block;
+  width: var(--ra-avatar, 36px);
+  height: var(--ra-avatar, 36px);
+  border-radius: 0;
+  object-fit: cover;
+  border: 1px solid var(--hair);
+  background: var(--surface-2, var(--surface));
+}
+
+.ra-avatar--mono {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: var(--ra-font-body, 0.8rem);
+  color: var(--ink-soft);
+}
+
+@media (min-width: 900px) {
+  .ra-activity-top {
+    grid-template-columns: minmax(13rem, 0.62fr) minmax(0, 1.38fr);
+    align-items: start;
+  }
+}
+
+@media (max-width: 720px) {
+  /* Stacking the foot turns its main axis vertical, and a wrapping column flex
+     container sizes each line to its *content* — so `align-items: stretch` alone
+     left the version rail at its max-content (11 cards, ~2350px) and blew the
+     page sideways instead of letting the rail scroll inside its own track. An
+     explicit width pins every row to the column's width. */
+  .ra-activity-foot {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .ra-activity-foot > * {
+    width: 100%;
+  }
+}

package/src/styles/stages.css

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   @digithings-ai/ui — numbered-stages structural CSS (components/stages/*).
+   Import AFTER the token bridge, in the app's globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/stages.css";
+     @source "<path-to>/packages/ui/src/components/stages";
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the component carries token-backed utilities, and Tailwind does not scan
+   package sources on its own.
+
+   Utilities in <NumberedStages/> carry the layout/spacing/color/type. This
+   file holds only what must stay CSS: the ::before spine art running through
+   the badge column, the :last-child stop rules, and the badge's two-color
+   color-mix border/fill (re-tinted per stage by an `accent-<module>` livery
+   scope from @digithings-ai/design/tokens.css).
+   ========================================================================== */
+
+.ns-stage:last-child {
+  padding-bottom: 0;
+}
+
+.ns-stage {
+  /* component tokens — stage spine geometry */
+  --ns-spine-inline: 1.7rem;
+  --ns-spine-top: 1.9rem;
+  --ns-spine-bottom: -0.1rem;
+}
+
+/* the spine line runs through the node column, behind the badges */
+.ns-stage::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(var(--ns-spine-inline) - 0.5px);
+  top: var(--ns-spine-top);
+  bottom: var(--ns-spine-bottom);
+  width: 1px;
+  background: var(--hair);
+}
+
+.ns-stage:last-child::before {
+  display: none;
+}
+
+.ns-node {
+  /* component tokens — badge box */
+  --ns-node-w: 3.4rem;
+  --ns-node-h: 2rem;
+  --ns-node-font: 0.78rem;
+
+  position: relative;
+  z-index: 1;
+  width: var(--ns-node-w);
+  height: var(--ns-node-h);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hair));
+  border-radius: 0;
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  font-family: var(--font-mono);
+  font-size: var(--ns-node-font);
+  /* Accent-as-text on its own 10% tint: the raw livery measured 2.74–3.66:1
+     in light theme (canon-audit S2) because the light module accents are
+     tuned to 3:1 for graphics. Mix toward the theme ink — worst light livery
+     (digichat pink) now 4.63:1, dark ≥9.5:1. */
+  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
+}