@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/data-layout.css

@@ -0,0 +1,288 @@
+/* ==========================================================================
+   @digithings-ai/ui — data-layout family CSS (components/data-layout/*:
+   <Odometer/> + <OdometerStrip/>, <DotMatrixStat/>, <BentoGrid/> +
+   <BentoCell/>, <ProductFrame/>, <FeatureCell/>; <TestimonialWall/> is
+   utilities-only and needs no rules here).
+
+   Import PLAINLY (no layer(…) wrapper) AFTER the token bridge — this sheet
+   manages its own layering per the cascade contract (MIGRATION.md):
+   single-class dress defaults sit in @layer components so call-site
+   utilities can override them; state/structural rules — nth-child hairline
+   grids, ::before art, :hover, descendant overrides, media collapses, and
+   the ProductFrame geometry its ResizeObserver contract depends on — stay
+   unlayered ON PURPOSE so they keep outranking plain utilities.
+
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/data-layout.css";
+     @source "<path-to>/packages/ui/src/components/data-layout";
+
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the components carry token-backed utilities, and Tailwind does not scan
+   package sources on its own.
+   ========================================================================== */
+
+/* ── Odometer: reel mechanic + strip hairline grid ───────────────────────── */
+
+@layer components {
+  /* the reel column; Odometer suspends/releases this transition imperatively
+     (transition-property + transform inline) when the figure enters view */
+  .odo-strip {
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .odo-strip {
+    transition: none;
+  }
+}
+
+/* hairline cell grid, keyed off the strip container's data-cols: first row
+   no top border, first column no left border (Tailwind can't express
+   nth-child) — same grammar as metrics.css's .perf-metric grid */
+.odo-cell {
+  border-inline-start: 1px solid var(--hair);
+  border-top: 1px solid var(--hair);
+}
+
+.odo-grid[data-cols="4"] .odo-cell:nth-child(-n + 4),
+.odo-grid[data-cols="3"] .odo-cell:nth-child(-n + 3),
+.odo-grid[data-cols="2"] .odo-cell:nth-child(-n + 2) {
+  border-top: none;
+}
+
+.odo-grid[data-cols="4"] .odo-cell:nth-child(4n + 1),
+.odo-grid[data-cols="3"] .odo-cell:nth-child(3n + 1),
+.odo-grid[data-cols="2"] .odo-cell:nth-child(2n + 1) {
+  border-inline-start: none;
+}
+
+/* ≤ 720px the strip is two-up whatever data-cols says (matching the
+   component's max-[720px]:grid-cols-2 utility) — re-derive the hairlines.
+   Selectors keep the [data-cols] attr so they tie the desktop rules on
+   specificity and win by order. */
+@media (max-width: 720px) {
+  .odo-grid[data-cols="4"] .odo-cell:nth-child(-n + 4),
+  .odo-grid[data-cols="3"] .odo-cell:nth-child(-n + 3) {
+    border-top: 1px solid var(--hair);
+  }
+
+  .odo-grid[data-cols] .odo-cell:nth-child(-n + 2) {
+    border-top: none;
+  }
+
+  .odo-grid[data-cols="4"] .odo-cell:nth-child(4n + 1),
+  .odo-grid[data-cols="3"] .odo-cell:nth-child(3n + 1) {
+    border-inline-start: 1px solid var(--hair);
+  }
+
+  .odo-grid[data-cols] .odo-cell:nth-child(2n + 1) {
+    border-inline-start: none;
+  }
+}
+
+/* ── DotMatrixStat: LED field ────────────────────────────────────────────── */
+
+@layer components {
+  /* grid-template-columns is written inline by the component (cols prop) */
+  .dms-grid {
+    /* component tokens — LED field geometry */
+    --dms-gap: 6px;
+    --dms-dot: 8px;
+
+    display: grid;
+    gap: var(--dms-gap);
+  }
+
+  .dms-dot {
+    width: var(--dms-dot);
+    height: var(--dms-dot);
+    border-radius: 0;
+    background: color-mix(in srgb, var(--ink-mute) 20%, transparent);
+  }
+}
+
+/* lit state — unlayered on purpose (must outrank call-site utilities) */
+.dms-dot.on {
+  background: var(--accent);
+  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 44%, transparent);
+}
+
+/* ── BentoGrid / BentoCell: asymmetric module bento ──────────────────────── */
+
+@layer components {
+  .bento-grid {
+    /* component tokens — bento row rhythm */
+    --bento-row-h: 8.5rem;
+    --bento-gap: 0.9rem;
+    --bento-name-font: 1.3rem;
+
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-auto-rows: var(--bento-row-h);
+    gap: var(--bento-gap);
+  }
+
+  /* position/overflow anchor the ::before hairline; background sits here so
+     the unlayered .bento-hero color-mix tint always wins */
+  .bento-cell {
+    position: relative;
+    background: var(--surface);
+    overflow: hidden;
+    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
+  }
+}
+
+/* everything below is state/structural — unlayered on purpose */
+
+/* accent hairline that fills on hover — the mod-card grammar */
+.bento-cell::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 2px;
+  background: var(--accent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s var(--ease);
+}
+
+/* transform-origin has no logical keyword — the hairline fills from the
+   cell's inline-start, which is the right edge under dir=rtl. */
+[dir="rtl"] .bento-cell::before {
+  transform-origin: right;
+}
+
+.bento-cell:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--hair));
+}
+
+.bento-cell:hover::before {
+  transform: scaleX(1);
+}
+
+.bento-hero {
+  grid-column: span 2;
+  grid-row: span 2;
+  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+}
+
+.bento-wide {
+  grid-column: span 2;
+}
+
+.bento-tall {
+  grid-row: span 2;
+}
+
+/* hero cells set their name in larger type — consumers put `bento-name` on
+   the cell's heading to opt in */
+.bento-hero .bento-name {
+  font-size: var(--bento-name-font, 1.3rem);
+}
+
+@media (max-width: 760px) {
+  .bento-grid {
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+  }
+
+  .bento-hero,
+  .bento-wide,
+  .bento-tall {
+    grid-column: auto;
+    grid-row: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bento-cell {
+    transition: border-color 0.25s var(--ease);
+  }
+
+  .bento-cell:hover {
+    transform: none;
+  }
+}
+
+/* ── ProductFrame: fixed artboard scaled to its container ────────────────── */
+
+/* .pf-viewport / .pf-artboard are the geometry the ResizeObserver contract
+   depends on — unlayered on purpose. The component writes the real
+   aspect-ratio and artboard width/height inline (defaults below match the
+   800×300 reference artboard). */
+.pf-viewport {
+  /* component tokens — the 800×300 reference artboard */
+  --pf-artboard-w: 800px;
+  --pf-artboard-h: 300px;
+  --pf-tag-inset: 0.6rem;
+  --pf-tag-font: 0.58rem;
+  --pf-tag-pad-block: 0.15rem;
+  --pf-tag-pad-inline: 0.45rem;
+
+  position: relative;
+  container-type: inline-size;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: var(--bg);
+  overflow: hidden;
+  /* the artboard is 800 wide; height tracks it via the same scale factor */
+  aspect-ratio: 800 / 300;
+}
+
+.pf-artboard {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: var(--pf-artboard-w);
+  height: var(--pf-artboard-h);
+  transform-origin: top left;
+  /* scale factor is measured and written by ProductFrame (ResizeObserver);
+     origin top-left so the scaled artboard pins to the frame corner */
+}
+
+@layer components {
+  .pf-tag {
+    position: absolute;
+    inset-inline-end: var(--pf-tag-inset, 0.6rem);
+    top: var(--pf-tag-inset, 0.6rem);
+    z-index: 2;
+    font-family: var(--font-mono);
+    font-size: var(--pf-tag-font, 0.58rem);
+    letter-spacing: 0.06em;
+    color: var(--ink);
+    /* Solid --surface, not a color-mix + backdrop-filter blur: this tag sits
+       over arbitrary crop content (a screenshot/mock), and a solid fill reads
+       legibly against any of it without reaching for this system's one
+       glassmorphism exception — surfaces here are flat, full stop. */
+    background: var(--surface);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    padding: var(--pf-tag-pad-block, 0.15rem) var(--pf-tag-pad-inline, 0.45rem);
+  }
+}
+
+/* ── FeatureCell: combinator + state rules only ──────────────────────────── */
+
+/* even-numbered sibling cells swap copy/visual columns — unlayered */
+.fc-cell:nth-child(even) .fc-copy {
+  order: 2;
+}
+
+.fc-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 760px) {
+  /* single column ≤ 760px (the cell's max-[760px]:grid-cols-1 utility) —
+     copy back on top for even cells too */
+  .fc-cell:nth-child(even) .fc-copy {
+    order: 0;
+  }
+}

package/src/styles/deck.css

@@ -0,0 +1,141 @@
+/* Deck stack — sticky stacking card deck (the cavemen.dev pattern), promoted
+   from the design reference's card deck (data/card-deck, #1450).
+   <DeckStack/> renders the shared .deck-slots container (+ the optional
+   .deck-rail progress column); <DeckCard/> is one sticky card. Wiring and
+   the component contract live in components/deck/DeckStack.tsx.
+
+   Import this sheet PLAINLY (no layer(…)) — it manages its own layering per
+   the cascade contract (MIGRATION.md): the single-class card surface default
+   sits in @layer components so an app dress class (unlayered app CSS) or
+   call-site token utilities can re-dress a card, while the sticky cascade,
+   slots runway, rail state rules and the narrow-viewport collapse stay
+   unlayered on purpose — structural mechanics must outrank plain utilities. */
+
+/* Card surface — opaque surface + 1px hairline + radius. Deliberately NO
+   drop shadow and NO clip box: the seam between stacked cards is the next
+   opaque card covering this one. */
+@layer components {
+  .deck-card {
+    /* component tokens — deck card surface */
+    --deck-card-pad: 1rem;
+
+    background: var(--surface);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    padding: var(--deck-card-pad);
+  }
+}
+
+/* Cards are DIRECT children of one shared container: a sticky element can
+   never leave its containing block, so per-card wrappers would drag each
+   card away as its own wrapper scrolls past. Sharing the container keeps
+   every card pinned until the whole deck ends; the gap is the scroll
+   runway between pins. */
+.deck-slots {
+  --deck-gap-narrow: 0.9rem;
+
+  display: grid;
+  gap: var(--deck-gap, 55svh);
+}
+/* Tail runway: enough scroll after the last card enters for it to ride up to its
+   pinned offset, so the completed stack is the section's final state. It MUST be
+   a trailing grid track, not the container's padding-bottom: a grid item's sticky
+   containing block is its own track, and container padding does not extend it —
+   so a padding tail leaves the LAST card with no room to pin (it slides straight
+   through and never rests, unlike the others, which get their runway from the
+   following card's track). The ::after is that following track for the last card.
+   Height = tail − the gap that precedes it, so the total hold stays --deck-tail.
+   Consumers can shorten the hold via --deck-tail. */
+.deck-slots::after {
+  content: "";
+  display: block;
+  height: max(0px, calc(var(--deck-tail, 65svh) - var(--deck-gap, 55svh)));
+}
+
+.deck-card {
+  position: sticky;
+  /* nav clearance (--deck-top; the 5rem default fits the reference's
+     ~3.4rem site nav + breathing room) + a per-card cascade (--deck-peek)
+     so every pinned card keeps a visible top edge under the one covering it. */
+  top: calc(var(--deck-top, 5rem) + var(--deck-peek, 2.4rem) * var(--stack-index, 0));
+  will-change: transform;
+}
+
+/* Progress rail — mono labels pinned beside the stack; the active row lights
+   its dot with the accent. Rendered by DeckStack only when `rail` is given.
+   The column wrapper stretches to the grid row MINUS the tail runway (via
+   bottom margin), so the sticky pin releases with the last card instead of
+   hanging through the empty scroll-hold. */
+.deck-rail-col {
+  align-self: stretch;
+  min-height: 0;
+  margin-bottom: var(--deck-tail, 65svh);
+}
+.deck-rail-pin {
+  --deck-rail-top: 38vh;
+  --deck-rail-font: 0.7rem;
+  --deck-rail-gap: 0.7rem;
+  --deck-rail-pad: 0.8rem;
+  --deck-dot: 7px;
+
+  position: sticky;
+  top: var(--deck-rail-top);
+}
+
+.deck-rail {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 var(--deck-rail-pad, 0.8rem);
+  border-inline-start: 1px solid var(--hair);
+  display: flex;
+  flex-direction: column;
+  gap: var(--deck-rail-gap, 0.7rem);
+}
+
+.deck-rail li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--ink-mute);
+  font-family: var(--font-mono);
+  font-size: var(--deck-rail-font, 0.7rem);
+}
+
+.deck-rail .dot {
+  width: var(--deck-dot, 7px);
+  height: var(--deck-dot, 7px);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--ink-mute) 20%, transparent);
+  flex-shrink: 0;
+}
+
+.deck-rail li.on {
+  color: var(--ink);
+}
+
+.deck-rail li.on .dot {
+  background: var(--accent);
+}
+
+/* Narrow: no stacking — the cards simply appear in sequence. The JS side
+   (DeckStack) gates its scale transform off below 901px too. */
+@media (max-width: 900px) {
+  .deck-slots {
+    gap: var(--deck-gap-narrow, 0.9rem);
+  }
+
+  /* no sticky = no runway needed; drop the tail track so it can't leave dead
+     space below the last card (matches the former padding-bottom: 0). */
+  .deck-slots::after {
+    display: none;
+  }
+
+  .deck-card {
+    position: relative;
+    top: 0;
+  }
+
+  .deck-rail-col {
+    display: none;
+  }
+}