@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/nav-shell.css

@@ -0,0 +1,551 @@
+/* ==========================================================================
+   nav-shell.css — state machinery for <NavShell/> (components/NavShell.tsx).
+   Import once in an app's globals.css, after web-theme.css:
+     @import "@digithings-ai/ui/styles/nav-shell.css";
+
+   Static layout (row, lead, brand, links strip, tail cluster) is token-backed
+   Tailwind utilities in the component. Everything here is what utilities can't
+   express cleanly: the fixed bar's settle/yield transitions and its two-colour
+   color-mix backdrop band, the JS-toggled state classes (.is-scrolled,
+   .is-hidden, .is-menu-open), the hamburger's parent-state span transforms,
+   descendant dressing of slotted content (.theme-toggle, .btn-icon, sheet
+   links), the dropdown group (trigger, caret, panel) and its sheet counterpart
+   (a labelled section), the portal overlay pair (scrim + sheet), and the
+   breakpoint / reduced-motion guards.
+
+   Layering contract — one hidden-state idiom, used three times: an overlay
+   surface stays in the DOM and is parked with `visibility: hidden` +
+   `pointer-events: none` (plus opacity/transform for the travel), then
+   unparked by an `.is-open` class. The scrim, the sheet and the dropdown panel
+   all follow it, so every one of them can transition, and none of them can
+   trap a tab stop while closed.
+
+   The bar reads --nav-shell-h (fallback 62px) so apps can retune height in one
+   place — and reuse it for scroll-padding-top / anchor offsets.
+   ========================================================================== */
+
+/* ── the bar: settle after 8px, yield past 180px (scroll-down only) ─────── */
+.nav-shell {
+  /* component tokens — nav bar geometry (the bar height stays the
+     consumer's --nav-shell-h, fallback 62px) */
+  --nav-group-gap: 0.34rem;
+  --nav-caret: 0.3rem;
+  --nav-menu-min-w: 11rem;
+  --nav-menu-gap: 0.2rem;
+  --nav-menu-pad: 0.4rem;
+  --nav-menu-item-pad-block: 0.45rem;
+  --nav-menu-item-pad-inline: 0.7rem;
+  --nav-icon-pad: 0.5rem;
+  --nav-toggle-gap: 5px;
+  --nav-toggle-line-w: 18px;
+  --nav-toggle-line-h: 1.5px;
+  --nav-toggle-shift: 3.25px;
+
+  position: fixed;
+  top: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  height: var(--nav-shell-h, 62px);
+  z-index: 210;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid transparent;
+  transition:
+    transform 0.4s var(--ease),
+    background 0.3s var(--ease),
+    border-color 0.3s var(--ease);
+}
+.nav-shell.is-scrolled {
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom-color: var(--hair);
+}
+.nav-shell.is-hidden {
+  transform: translateY(calc(-1 * var(--nav-shell-h, 62px) - 1px));
+}
+
+/* ── clipped band: the backdrop + hairline live on a frame-width child ────
+   For a document drawn between the persistent LayoutLines, a full-bleed bar
+   would paint across the rules that define the page. The bar itself stays
+   fixed and full-width (nothing about the row's layout changes); only its
+   *dress* — the scrolled backdrop and the bottom hairline — moves onto a
+   pseudo-element inset to the same column as LayoutLines, so the band's edges
+   land exactly on the rules. The header's own background/border are cleared so
+   nothing shows outside the column.
+
+   z-index: -1 keeps the dress behind the row (the row is z-[56]) while the
+   header's 210 still sits above page content. */
+.nav-shell.is-clipped {
+  border-bottom-color: transparent;
+}
+.nav-shell.is-clipped::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  /* Centred, capped to the rails — mirrors LayoutLines' geometry
+     (`max-w-[calc(var(--frame-w)+2*var(--line-pad))]`, where `--line-pad`
+     is the page gutter), so the band's edges land exactly on the rules and
+     the bar reads full-width between the vertical grid. */
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  width: 100%;
+  /* One hairline short on each side, so the rails' own 1px columns stay
+     visible through the blurred band. */
+  max-width: calc(
+    var(--frame-w, var(--wrap, 1180px)) + 2 * var(--page-pad, var(--gutter, 1.5rem)) - 2px
+  );
+  z-index: -1;
+  pointer-events: none;
+  background: transparent;
+  border-bottom: 1px solid transparent;
+  transition:
+    background 0.3s var(--ease),
+    border-color 0.3s var(--ease);
+}
+.nav-shell.is-clipped.is-scrolled {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-bottom-color: transparent;
+}
+.nav-shell.is-clipped.is-scrolled::before {
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom-color: var(--hair);
+}
+/* An open dropdown pins the bar: yielding would take the panel with it. */
+.nav-shell[data-group-open="true"].is-hidden {
+  transform: none;
+}
+/* A translated-offscreen bar is still in tab order (unlike visibility:hidden
+   or display:none) — Tab reaches its links same as always, this just makes
+   sure they scroll into view once focused, for both hide grammars. Same
+   backdrop as .is-scrolled: a keyboard-revealed bar overlays content exactly
+   like a hover-revealed one, and JS never got a mousemove to add that class. */
+.nav-shell.is-hidden:focus-within {
+  transform: none;
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom-color: var(--hair);
+}
+
+/* ── inline links: hover ink on descendants ─────────────────────────────── */
+.nav-shell-links a {
+  transition: color 0.2s var(--ease);
+}
+.nav-shell-links a:hover {
+  color: var(--ink);
+}
+/* The current route (NavShell marks it from currentPath via hrefIsCurrent):
+   ink weight plus an accent hairline, so "you are here" reads distinctly from
+   hover. An inset shadow, not a border — a border would grow the anchor's box
+   and nudge the row. */
+.nav-shell-links a[aria-current="page"] {
+  color: var(--ink);
+  box-shadow: inset 0 -1px 0 var(--accent);
+}
+.nav-shell-menu-item[aria-current="page"],
+.nav-shell-sheet-links a[aria-current="page"] {
+  color: var(--ink);
+}
+
+/* ── dropdown group (wide bar only; the sheet gets sections instead) ──────
+      The panel is positioned against its group box, so the anchor chain is
+      stretched to the bar's full height — row → strip → group — and `top: 100%`
+      then lands exactly on the bar's bottom hairline instead of floating
+      mid-bar. Each stretched box re-centres its own content, so nothing moves.
+      ─────────────────────────────────────────────────────────────────────── */
+.nav-shell-row {
+  align-self: stretch;
+}
+.nav-shell-links {
+  align-self: stretch;
+  align-items: center;
+}
+.nav-shell-group {
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+}
+.nav-shell-group-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nav-group-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition: color 0.2s var(--ease);
+}
+.nav-shell-group-trigger:hover,
+.nav-shell-group[data-open="true"] .nav-shell-group-trigger {
+  color: var(--ink);
+}
+/* borders, not a glyph: the caret follows ink through [data-theme] and needs
+   no font metrics to sit straight. Physical borders on purpose — the caret is
+   a vertical (down/up) affordance built from a rotated corner, so mirroring it
+   under dir=rtl would tilt it the wrong way. */
+.nav-shell-group-caret {
+  width: var(--nav-caret);
+  height: var(--nav-caret);
+  border-right: 1.2px solid currentColor;
+  border-bottom: 1.2px solid currentColor;
+  transform: translateY(calc(-1 * var(--nav-caret) / 3)) rotate(45deg);
+  transition: transform 0.2s var(--ease);
+}
+.nav-shell-group[data-open="true"] .nav-shell-group-caret {
+  transform: translateY(0.02rem) rotate(-135deg);
+}
+
+/* the panel: same parked-then-unparked contract as the sheet below. Hairline +
+   blurred band, no drop shadow — quiet by default. */
+.nav-shell-menu {
+  position: absolute;
+  top: 100%;
+  /* physical on purpose: centering pairs left:50% with a physical
+     translateX(-50%), so it must not mirror (it is direction-neutral). */
+  left: 50%;
+  z-index: 1; /* the tail cluster follows the strip in the DOM */
+  display: flex;
+  flex-direction: column;
+  min-width: max(var(--nav-menu-min-w), 100%);
+  margin-top: var(--nav-menu-gap);
+  padding: var(--nav-menu-pad);
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(calc(-1 * var(--nav-caret)));
+  /* visibility is stepped, not interpolated: on close it waits out the fade
+     (0s delayed by 0.2s); on open it flips at once, with no transition at all.
+     A transitioned `visibility` would still compute as `hidden` at t=0, and the
+     first thing an opening menu does is focus an item — focus() on a hidden
+     element is a silent no-op, so the keyboard would appear dead. */
+  transition:
+    opacity 0.2s var(--ease),
+    transform 0.2s var(--ease),
+    visibility 0s linear 0.2s;
+}
+.nav-shell-menu.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateX(-50%);
+  transition:
+    opacity 0.2s var(--ease),
+    transform 0.2s var(--ease);
+}
+.nav-shell-menu-item {
+  display: block;
+  padding: var(--nav-menu-item-pad-block) var(--nav-menu-item-pad-inline);
+  border-radius: 0;
+  color: var(--ink-soft);
+  white-space: nowrap;
+  transition:
+    color 0.2s var(--ease),
+    background 0.2s var(--ease);
+}
+.nav-shell-menu-item:hover,
+.nav-shell-menu-item:focus-visible {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 7%, transparent);
+}
+
+/* ── tail cluster: theme toggle, slotted actions, hamburger — borderless,
+      no fill, glyph/lines only (descendant overrides of slotted content) ── */
+.nav-shell-tail .theme-toggle,
+.nav-shell-tail .btn-icon,
+.nav-shell-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nav-icon-pad, 0.5rem);
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  color: var(--ink-mute);
+  cursor: pointer;
+  transition: color 0.2s var(--ease);
+}
+.nav-shell-tail .theme-toggle:hover,
+.nav-shell-tail .btn-icon:hover,
+.nav-shell-toggle:hover {
+  color: var(--ink);
+  background: transparent;
+}
+.nav-shell-tail .btn-icon svg {
+  display: block;
+}
+
+/* Quiet company-profile row — the same borderless glyph buttons as the nav
+   tail, usable in a contact band or footer. Phosphor (`--accent`) only on
+   :focus-visible; hover stays ink. Radius 0, no fill. */
+.social-row {
+  --nav-social-gap: 0.1rem;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nav-social-gap);
+}
+
+.btn-icon {
+  --nav-icon-pad: 0.5rem;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nav-icon-pad);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--ink-mute);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.2s var(--ease);
+}
+
+.btn-icon:hover {
+  color: var(--ink);
+  background: transparent;
+}
+
+.btn-icon:focus-visible {
+  color: var(--accent);
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.btn-icon svg {
+  display: block;
+}
+
+/* ── hamburger: two lines folding to an × from the parent state ─────────── */
+.nav-shell-toggle {
+  display: none; /* wide viewports; media query below re-enables */
+  --nav-toggle-offset-sm: 0.65rem;
+  flex-direction: column;
+  gap: var(--nav-toggle-gap, 5px);
+  flex-shrink: 0;
+  margin: 0;
+}
+.nav-shell-toggle span {
+  display: block;
+  width: var(--nav-toggle-line-w, 18px);
+  height: var(--nav-toggle-line-h, 1.5px);
+  background: currentColor;
+  border-radius: 0;
+  transition:
+    transform 0.25s var(--ease),
+    opacity 0.2s var(--ease);
+}
+.nav-shell.is-menu-open .nav-shell-toggle span:first-child {
+  transform: translateY(var(--nav-toggle-shift, 3.25px)) rotate(45deg);
+}
+.nav-shell.is-menu-open .nav-shell-toggle span:last-child {
+  transform: translateY(calc(-1 * var(--nav-toggle-shift, 3.25px))) rotate(-45deg);
+}
+
+/* ── menu-open bar dress: solid enough to read over the scrim ───────────── */
+.nav-shell.is-menu-open {
+  border-bottom-color: var(--hair);
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+.nav-shell.is-menu-open.is-hidden {
+  transform: none;
+}
+
+/* ── portal overlay: full-viewport scrim — dims + aggressively blurs the
+      page behind the menu ──────────────────────────────────────────────── */
+.nav-shell-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  backdrop-filter: blur(40px) saturate(1.3);
+  -webkit-backdrop-filter: blur(40px) saturate(1.3);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 0.28s var(--ease),
+    visibility 0.28s;
+}
+.nav-shell-backdrop.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* ── portal overlay: the sheet — right-aligned serif link stack + CTA ───── */
+.nav-shell-sheet {
+  /* component tokens — the portalled sheet is not a .nav-shell descendant,
+     so it carries its own */
+  --nav-sheet-pad-top-gap: 1.5rem;
+  --nav-sheet-pad-inline: clamp(1.25rem, 5vw, 2rem);
+  --nav-sheet-pad-bottom: 1.25rem;
+  --nav-sheet-links-w: 20rem;
+  --nav-sheet-link-font: 1.35rem;
+  --nav-sheet-link-pad: 0.85rem;
+
+  position: fixed;
+  inset: 0;
+  z-index: 201;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: end;
+  padding: calc(var(--nav-shell-h, 62px) + var(--nav-sheet-pad-top-gap))
+    var(--nav-sheet-pad-inline) max(var(--nav-sheet-pad-bottom), env(safe-area-inset-bottom));
+  background: transparent;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-6px);
+  transition:
+    visibility 0.28s,
+    transform 0.28s var(--ease);
+}
+.nav-shell-sheet.is-open {
+  visibility: visible;
+  transform: none;
+}
+.nav-shell-sheet-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.35rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  width: min(100%, var(--nav-sheet-links-w, 20rem));
+  margin-inline-start: auto;
+  font-size: var(--nav-sheet-link-font, 1.35rem);
+  font-family: var(--font-mono);
+  color: var(--ink);
+  pointer-events: auto;
+}
+.nav-shell-sheet-links a {
+  display: block;
+  width: 100%;
+  padding: var(--nav-sheet-link-pad, 0.85rem) 0;
+  border-bottom: 1px solid var(--hair);
+  color: var(--ink-soft);
+  text-align: end;
+  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 70%, transparent);
+  transition: color 0.2s var(--ease);
+}
+.nav-shell-sheet-links a:hover {
+  color: var(--ink);
+}
+/* a NavGroup in the sheet: a kicker-cased label over its own links. No
+   disclosure — the sheet is already the vertical index a dropdown would open. */
+.nav-shell-sheet-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+}
+.nav-shell-sheet-group-label {
+  --nav-sheet-group-label-font: 0.6rem;
+
+  margin: 0.9rem 0 0.1rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--nav-sheet-group-label-font);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--ink-mute);
+}
+.nav-shell-sheet-cta {
+  --nav-sheet-cta-top: 1.5rem;
+  --nav-sheet-cta-bottom: 1rem;
+
+  display: flex;
+  justify-content: flex-end;
+  width: min(100%, var(--nav-sheet-links-w, 20rem));
+  margin-inline-start: auto;
+  padding-top: var(--nav-sheet-cta-top);
+  padding-bottom: max(var(--nav-sheet-cta-bottom), env(safe-area-inset-bottom));
+  pointer-events: auto;
+}
+/* No descendant dress here any more: the CTA arrives as a kit-buttonVariants
+   link (digithings) or a kit <Button/> (digiquant), both already `inline-flex
+   shrink-0 justify-center` — the old `.nav-shell-sheet-cta .btn { width:auto;
+   justify-content:center }` shim was only for the retired `.btn` pill. */
+
+/* ── breakpoints (identical to the app navs this supersedes) ────────────── */
+@media (min-width: 881px) {
+  .nav-shell-backdrop,
+  .nav-shell-sheet {
+    display: none;
+  }
+}
+@media (max-width: 880px) {
+  .nav-shell-toggle {
+    display: inline-flex;
+    margin-inline-start: var(--space-2);
+  }
+}
+@media (max-width: 560px) {
+  .nav-shell-toggle {
+    margin-inline-start: var(--nav-toggle-offset-sm, 0.65rem);
+  }
+}
+/* Never hide the bar on small screens: thumb-scroll jitters direction, and
+   the bar is the only route back to the menu. `autoHide="hover"` reveals the
+   bar via a `mousemove` listener alone (see NavShell.tsx) -- touch input never
+   fires that event, so a touch-only device with no mouse gets the bar hidden
+   on mount with no way to bring it back. max-width alone only catches phones;
+   a touch-primary tablet in landscape (iPad ~1024px, most Android tablets)
+   is wider than 768px, has no mouse, and hits neither this rule nor a
+   mousemove event -- `(hover: none)` is the correct, width-independent way to
+   ask "can this pointer even hover", so it catches those devices too. */
+@media (max-width: 768px), (hover: none) {
+  /* Only the hover grammar needs this neutralisation: it hides the bar on
+     mount and a touch device has no mouse to reveal it. The scroll grammar
+     hides/reveals on scroll, so it must keep its transform on touch too. */
+  .nav-shell[data-autohide="hover"].is-hidden {
+    transform: none;
+  }
+}
+
+/* ── reduced motion: same states, instant — the bar still settles, yields
+      and returns; dropdowns still open, close and dress their caret; nothing
+      slides or fades ──────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .nav-shell,
+  .nav-shell-toggle span,
+  .nav-shell-links a,
+  .nav-shell-group-trigger,
+  .nav-shell-group-caret,
+  .nav-shell-menu,
+  /* the open state re-declares transition (see the panel rule), so it needs
+     naming here too — a bare .nav-shell-menu would lose the specificity duel */
+  .nav-shell-menu.is-open,
+  .nav-shell-menu-item,
+  .nav-shell-sheet-links a,
+  .nav-shell-backdrop,
+  .nav-shell-sheet {
+    transition: none;
+  }
+  /* no travel either: the panel simply is, or is not, there */
+  .nav-shell-menu {
+    transform: translateX(-50%);
+  }
+}

package/src/styles/pricing.css

@@ -0,0 +1,79 @@
+/* ==========================================================================
+   pricing.css — CSS leave-rules for the pricing family
+   (components/pricing/Pricing.tsx + components/pricing/PricingMatrix.tsx).
+   Import once in an app's globals.css, after web-theme.css:
+     @import "@digithings-ai/ui/styles/pricing.css";
+
+   Static structure is token-backed Tailwind utilities in the components.
+   Only what utilities can't express lives here: the accent tier's two-color
+   color-mix wash, the ✓ check-marker ::before on feature rows, and the
+   billing toggle (ancestor `.on` state pairing + two-color mix + knob
+   translate).
+   ========================================================================== */
+
+/* ── accent (featured) tier card: two-color mixes on border + wash ──────── */
+.pricing-tier-accent {
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--hair));
+  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+}
+
+/* ── popular matrix column: the reference treatment is the kit-native tint +
+   accent top rule (`pm-popular rounded-none border-t-2 border-t-accent
+   bg-accent/6` in PricingMatrix) — no gradient; the design reference
+   highlights featured tiers with tint, not a wash gradient. */
+
+/* ── ✓ check-marker grammar on feature rows (li.pricing-feature) ────────── */
+/* --accent, not --up: this marks "feature included," a generic positive/
+   selection signal, not a P&L read — --up/--down stay reserved for money. */
+.pricing-feature::before {
+  content: "✓";
+  flex: 0 0 auto;
+  color: var(--accent);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+/* ── billing toggle: .pm-toggle.on drives the knob (state + translate) ──── */
+.pm-toggle {
+  /* component tokens — billing toggle geometry */
+  --pm-toggle-w: 38px;
+  --pm-toggle-h: 21px;
+  --pm-knob: 15px;
+  --pm-knob-inset: 2px;
+  --pm-knob-travel: 17px;
+
+  width: var(--pm-toggle-w);
+  height: var(--pm-toggle-h);
+  border-radius: 0;
+  border: 1px solid var(--hair);
+  background: var(--surface);
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
+}
+
+.pm-toggle .pm-knob {
+  position: absolute;
+  top: var(--pm-knob-inset, 2px);
+  inset-inline-start: var(--pm-knob-inset, 2px);
+  width: var(--pm-knob, 15px);
+  height: var(--pm-knob, 15px);
+  border-radius: 0;
+  background: var(--ink-mute);
+  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
+}
+
+.pm-toggle.on {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
+  background: var(--accent-weak);
+}
+
+.pm-toggle.on .pm-knob {
+  transform: translateX(var(--pm-knob-travel, 17px));
+  background: var(--accent);
+}
+
+/* knob anchors at inline-start; checked travel is physical → mirror in RTL */
+[dir="rtl"] .pm-toggle.on .pm-knob {
+  transform: translateX(calc(-1 * var(--pm-knob-travel, 17px)));
+}