cursedbelt 1.0.0 → 2.5.0

package/src/styles-static.css

@@ -0,0 +1,413 @@
+/*
+ * cursedbelt component-class source registration.
+ * Consuming apps import (after `@import "tailwindcss";`):
+ *   @import "cursedbelt/styles.css";
+ *   @import "cursedbelt/theme.css";
+ * This `@source` makes Tailwind v4 scan cursedbelt's source files so the utility
+ * classes used by its components are generated in the app's stylesheet.
+ *
+ * ── Two ways in, and which one an app wants ──────────────────────────────────
+ * `@source "."` is the expensive half: it points Tailwind's JIT at cursedbelt's
+ * ENTIRE source tree, so the app emits the union of the whole design system
+ * whether it renders three components or eighty, and its own build walks 827
+ * files it does not own. Everything else in this file is CSS the components
+ * genuinely need and no app can do without.
+ *
+ * A CSS `@import` takes the whole file, so the split is two more subpaths:
+ *
+ *   cursedbelt/styles.css            this file — the real CSS + the `@source` scan
+ *   cursedbelt/styles-static.css     the same file MINUS the `@source` line
+ *   cursedbelt/styles-utilities.css  the utilities that `@source` line would have
+ *                                    produced, precompiled at cursedbelt's build
+ *
+ * The second two are a PAIR and neither is usable alone — `styles-static.css` on
+ * its own gets the tooltip pointer-events fix, the Progress keyframes, the
+ * lightbox bridge, the ambient/glass layer and `tw-animate-css`, and emits none
+ * of cursedbelt's utility classes, i.e. an unstyled app:
+ *
+ *   @import "tailwindcss";
+ *   @import "cursedbelt/styles-static.css";
+ *   @import "cursedbelt/styles-utilities.css";
+ *   @import "cursedbelt/theme.css";
+ *
+ * 🔴 Do NOT hand-list cursedbelt's component files to get the utilities back.
+ * Tailwind v4 resolves every `@source` to a DIRECTORY and scans it recursively —
+ * a file path and a glob are both silently widened to their parent — and
+ * `VirtualList`/`VirtualCardGrid` live at the root of `src/react/`, so the finest
+ * grain an app can write is the whole design system. A relative `@source` reaching
+ * into this package's source tree is also a `file:` dependency wearing a
+ * stylesheet's clothes, and it buys nothing: it is the thing the previous
+ * generation's 29-line-per-app arrangement is remembered for, and those 29 lines
+ * were never file-level scoping either.
+ *
+ * The pair is not SMALLER than this file — measured, both routes emit the same
+ * rules within 54 bytes. What it buys is a build that scans nothing of another
+ * package's source tree, and a `styles-static.css` that finally has a correct
+ * use. The measurements, and what would actually shrink a consumer, are in the
+ * header of `scripts/generateUtilityStyles.ts`.
+ *
+ * 🔴 This header is in BOTH of the first two files, because one is generated from
+ * the other and a test holds them byte-identical apart from the `@source` line.
+ * Always edit `src/styles.css`; never `src/styles-static.css`, which
+ * `scripts/generateStaticStyles.ts` rewrites on every `bun run build` and
+ * `src/stylesStaticMatches.spec.ts` fails on when it is stale. Editing this file
+ * invalidates `src/styles-utilities.css` too — it is compiled against the static
+ * variant, `scripts/generateUtilityStyles.ts` rewrites it in the same build step,
+ * and `src/stylesUtilitiesMatches.spec.ts` is what fails when it is stale.
+ */
+
+/* Animation utilities (animate-in/out, fade/zoom/slide-in-from-*) consumed by the
+   floating layer's FLOATING_ANIMATION and the modal/overlay family — the Tailwind v4
+   successor to tailwindcss-animate. Imported here so every consuming app inherits the
+   enter/exit motion with no per-app wiring. Lands after `@import "tailwindcss"` since
+   apps import this file after Tailwind. */
+@import "tw-animate-css";
+
+/*
+ * Typography utilities (task cbux-41) — theme-token-based replacements for the
+ * `uppercase tracking-wide text-muted-foreground text-xs` / `font-mono bg-…` clusters
+ * that were hand-rolled per call site. One class each, so a future restyle of "how a
+ * section header reads" or "how inline code reads" is a two-rule change here.
+ */
+
+/* Category / section header label: small, bold, uppercase, wide tracking, muted.
+   Use for group headers, panel eyebrows, table section labels — anywhere a
+   "SECTION" style caption sits above real content. */
+.cb-meta-label {
+  /* 🔴 12px, not the 11px this was until 2026-08-19 (unit 11). DESIGN.md §4 states a
+     FLOOR for secondary metadata and this class IS the fleet's section-label style, so
+     11px here was the law being broken by the design system's own stylesheet — in a file
+     the `micro-typography-floor` lint did not scan, because the rule ran over `src/react`
+     only. It scans this file now too. */
+  font-size: 0.75rem; /* 12px */
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted-foreground);
+  /* 🔴 NOT `user-select: none`, which this carried until 2026-08-23 (owner report:
+     *"I cannot highlight text on the card"* — the KPI tiles on orch's Insights board).
+     This class is the label of every stat tile, table section and panel eyebrow in the
+     fleet, i.e. the TOP-LEFT of a card and the natural place a drag-select starts.
+     Chrome refuses to begin a selection whose anchor is in an unselectable node, so one
+     declaration here made whole cards feel unselectable even though the value beside the
+     label never was. A label is content — it is what tells you what the number you are
+     copying MEANS — so it is selectable like everything else. Unselectable text belongs
+     on things that are gestures rather than content: a drag handle, a menu item, a
+     slider, a line-number gutter. */
+}
+
+/* Inline/block monospace "code" surface: mono font on the sunken-surface token
+   (never a hardcoded dark-slate box) — used for code snippets, IDs, hashes, and
+   other literal/technical values that want to read as data, not prose. */
+.cb-code {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.5;
+  background-color: var(--surface-sunken);
+  color: var(--foreground);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.625rem;
+}
+
+/* Indeterminate sweep for the Progress bar (no `value`): the 1/3-width fill slides
+   across the track on loop. Registered as a Tailwind theme animation so the
+   `animate-progress-indeterminate` utility is generated in consuming apps. */
+@theme {
+  --animate-progress-indeterminate: progress-indeterminate 1.2s ease-in-out infinite;
+}
+@keyframes progress-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(300%);
+  }
+}
+
+/*
+ * Media subsystem (task 19) theme bridge — map the design tokens onto the CSS custom
+ * properties of yet-another-react-lightbox so the lightbox reads as part of the app
+ * (and its backdrop tracks light/dark instead of staying a fixed black). The doubled
+ * `.yarl__root.yarl__root` selector outranks YARL's own `.yarl__root` defaults no
+ * matter the stylesheet load order. The lightbox is an always-dark overlay, so the
+ * controls stay light; only the surfaces + accents derive from tokens.
+ */
+.yarl__root.yarl__root {
+  --yarl__color_backdrop: color-mix(in srgb, #000 90%, var(--background)); /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+  --yarl__color_button: rgb(255 255 255 / 0.78); /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+  --yarl__color_button_active: #ffffff; /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+  --yarl__color_button_disabled: rgb(255 255 255 / 0.35); /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+  --yarl__slide_icon_loading_color: var(--accent);
+  --yarl__slide_icon_error_color: var(--destructive);
+  --yarl__counter_color: rgb(255 255 255 / 0.75); /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+
+  /* Thumbnails strip → token surfaces + accent active border. */
+  --yarl__thumbnails_container_background_color: transparent;
+  --yarl__thumbnails_thumbnail_background: var(--card-overlay);
+  --yarl__thumbnails_thumbnail_border_color: var(--border-strong);
+  --yarl__thumbnails_thumbnail_active_border_color: var(--accent-solid);
+  --yarl__thumbnails_thumbnail_border_radius: var(--radius-md);
+  --yarl__thumbnails_thumbnail_icon_color: #ffffff; /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+
+  /* Captions → translucent token-tinted bar. */
+  --yarl__slide_captions_container_background: color-mix(
+    in srgb,
+    var(--background) 55%,
+    transparent
+  );
+  --yarl__slide_title_color: #ffffff; /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+  --yarl__slide_description_color: rgb(255 255 255 / 0.8); /* guardrails-ignore no-hardcoded-colors: third-party yarl lightbox library CSS custom properties require literal color values */
+}
+
+/*
+ * Tooltip bubbles are transient hints and must NEVER be pointer targets: a
+ * focus-opened tooltip (e.g. a discard prompt auto-focusing its safe default
+ * button) otherwise hovers over the adjacent control and eats the user's click.
+ * The Content element carries `pointer-events-none`, but Radix positions it inside
+ * a transparent `data-radix-popper-content-wrapper` div that hit-tests on its own,
+ * so the wrapper must be neutralized too — scoped via :has() to tooltip bubbles
+ * only (popovers/menus/selects share the same popper wrapper and stay interactive).
+ */
+[data-radix-popper-content-wrapper]:has(> [data-cb-tooltip]) {
+  pointer-events: none;
+}
+/* !important: when a modal dialog disables body pointer events, Radix's
+   DismissableLayer re-enables the tooltip layer with an INLINE `pointer-events:
+   auto` — exactly the case (tooltip inside an open modal) this rule exists for. */
+[data-cb-tooltip] {
+  pointer-events: none !important;
+}
+
+/*
+ * ══════════════════════════ The ambient / glass layer ══════════════════════════
+ *
+ * The decorative half of the design language, as three plain component classes so
+ * they cost nothing to adopt: a scoped stylesheet gets them through the static
+ * import, with no per-component `@source` line to remember (the silent failure
+ * mode `cursed-satellites/scripts/cssSources.test.ts` exists for).
+ *
+ * All three read TOKENS — `--ambient-1..3`, `--ambient-strength`, `--glass-*`,
+ * `--accent-gradient` (theme.css) — never literals, so an app re-brands its whole
+ * atmosphere by overriding variables and every surface follows. That is the point:
+ * this began life as `.cb-auth-aurora`, a one-off welded to the sign-in card and
+ * to the marketing palette, and could not be reused by anything. Nothing here
+ * knows the word "aurora"; the aurora theme is just the first caller.
+ */
+
+/* ── AmbientBackdrop ─────────────────────────────────────────────────────────
+   The lit field a page floats on: a soft wash from the top plus three big blurred
+   color blobs, screen-blended so they ADD light rather than paint over content.
+   `isolation` on the host is what keeps `mix-blend-mode: screen` blending against
+   this stack instead of punching through to whatever is behind the app. */
+.cb-ambient-host {
+  position: relative;
+  isolation: isolate;
+}
+
+.cb-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse 120% 60% at 50% -10%,
+    color-mix(in srgb, var(--ambient-2) calc(var(--ambient-strength) * 100%), transparent),
+    transparent 60%
+  );
+}
+
+/* `position: fixed` variant — the backdrop stays put while the app scrolls, which
+   is what makes a long page feel like it sits IN a space rather than on a
+   repeating texture. Separate class rather than a prop-driven inline style so the
+   value stays in CSS with the rest of the layer. */
+.cb-ambient--fixed {
+  position: fixed;
+}
+
+.cb-ambient__blob {
+  position: absolute;
+  border-radius: 999px;
+  /* The blur is what turns three circles into weather. Below ~60px they read as
+     circles; the compositor cost is flat in radius, so this is free. */
+  filter: blur(90px);
+  mix-blend-mode: screen;
+  will-change: transform;
+}
+
+/* Each blob's alpha is `--ambient-strength` scaled by its own weight, so a theme
+   (or the component's `intensity` prop) tunes the whole field with one number and
+   the three hues keep their relative balance. */
+.cb-ambient__blob--a {
+  width: 60vw;
+  height: 60vw;
+  min-width: 460px;
+  min-height: 460px;
+  left: -16vw;
+  top: -20vw;
+  background: radial-gradient(
+    circle at 35% 35%,
+    color-mix(in srgb, var(--ambient-1) calc(var(--ambient-strength) * 200%), transparent),
+    transparent 62%
+  );
+}
+.cb-ambient__blob--b {
+  width: 52vw;
+  height: 52vw;
+  min-width: 420px;
+  min-height: 420px;
+  right: -18vw;
+  top: -12vw;
+  background: radial-gradient(
+    circle at 60% 40%,
+    color-mix(in srgb, var(--ambient-2) calc(var(--ambient-strength) * 215%), transparent),
+    transparent 64%
+  );
+}
+.cb-ambient__blob--c {
+  width: 42vw;
+  height: 42vw;
+  min-width: 360px;
+  min-height: 360px;
+  left: 28vw;
+  bottom: -22vw;
+  background: radial-gradient(
+    circle at 50% 50%,
+    color-mix(in srgb, var(--ambient-3) calc(var(--ambient-strength) * 100%), transparent),
+    transparent 62%
+  );
+}
+
+/* Drift only when the visitor hasn't asked for reduced motion. Minute-scale
+   periods, all mutually prime-ish, so the field never visibly loops. */
+@media (prefers-reduced-motion: no-preference) {
+  .cb-ambient__blob--a {
+    animation: cb-ambient-drift-a 46s ease-in-out infinite alternate;
+  }
+  .cb-ambient__blob--b {
+    animation: cb-ambient-drift-b 58s ease-in-out infinite alternate;
+  }
+  .cb-ambient__blob--c {
+    animation: cb-ambient-drift-c 70s ease-in-out infinite alternate;
+  }
+}
+@keyframes cb-ambient-drift-a {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
+}
+@keyframes cb-ambient-drift-b {
+  from { transform: translate3d(0, 0, 0) scale(1.08); }
+  to { transform: translate3d(-5vw, 6vh, 0) scale(0.96); }
+}
+@keyframes cb-ambient-drift-c {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(8vw, -4vh, 0); }
+}
+
+/* Fine grain over the whole field. Big soft gradients BAND on 8-bit displays —
+   this is the standard dither, and it is an inline SVG so it costs no request. */
+.cb-ambient__grain {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.045;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
+}
+
+/* ── Glass ───────────────────────────────────────────────────────────────────
+   `Surface level="glass"`. A translucent fill, a 1px light edge and a backdrop
+   blur, so the ambient field reads THROUGH the panel. In the default LIGHT theme
+   the fill is a near-opaque white frost — glass over white is white — so a glass
+   Surface is never a legibility regression on an app that never opted into a
+   theme. `backdrop-filter` degrades to a plain translucent fill where it is
+   unsupported, which is the correct failure. */
+.cb-glass {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-edge);
+  box-shadow: var(--glass-shadow);
+  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
+}
+
+/* Chrome glass: the fill + blur ONLY — no edge, no shadow. For app chrome that owns
+   its own directional border (a header's `border-b`, a nav rail's `border-r`); the
+   full `.cb-glass` would draw a box around it. */
+.cb-glass-chrome {
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
+}
+
+/* The heavier fill, for a surface that has to hold dense text (a sidebar, a
+   sticky header) where maximum see-through would cost legibility. */
+.cb-glass-strong {
+  background: var(--glass-bg-strong);
+  border: 1px solid var(--glass-edge);
+  box-shadow: var(--glass-shadow);
+  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
+}
+
+/* ── Brand gradient ──────────────────────────────────────────────────────────
+   Text in the accent ramp (a product wordmark, a hero headline). Deliberately NOT
+   offered for body copy: gradient text has no single contrast ratio to audit. */
+.cb-gradient-text {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* A filled surface in the accent ramp — the "this is the one action" treatment.
+   The `.cb-gradient-fill` class carries its own white label because a gradient
+   has no token to derive an on-fill foreground from; every ramp this is used with
+   is saturated enough for white to clear AA (the same contract
+   `--accent-solid-foreground` makes for the flat solid). */
+.cb-gradient-fill {
+  background: var(--accent-gradient);
+  color: #ffffff; /* guardrails-ignore no-hardcoded-colors: white label on the saturated accent gradient — the fill's own on-surface foreground, mode-independent by the same contract as --accent-solid-foreground */
+  border: 0;
+  transition:
+    filter var(--duration-fast, 120ms) ease,
+    box-shadow var(--duration-fast, 120ms) ease;
+}
+.cb-gradient-fill:hover:not(:disabled) {
+  background: var(--accent-gradient);
+  filter: brightness(1.08);
+}
+
+/*
+ * Aurora front door — the logged-out sign-in / register surface.
+ *
+ * Now just a THIN composition over the layer above: the aurora theme scope
+ * (`.cb-aurora` in theme.css) supplies the palette, `AmbientBackdrop` paints the
+ * field, `Surface level="glass"` is the card, `.cb-gradient-text` is the title.
+ * What remains here is the two things that are genuinely about this surface: it
+ * fills the viewport with the canvas color, and its submit button is the
+ * gradient action. Scoped under `.cb-auth-aurora` (AuthCard's `aurora` prop) so
+ * the product's own in-app chrome — including the EMBEDDED AuthCard in the
+ * account panel — is untouched.
+ */
+.cb-auth-aurora {
+  position: relative;
+  isolation: isolate;
+  background-color: var(--background);
+  color: var(--foreground);
+  overflow: hidden;
+}
+
+/* Primary action carries the accent gradient instead of the flat solid.
+   Specificity (one class + the attribute-qualified element) clears Tailwind's
+   single-class `bg-accent-solid`. */
+.cb-auth-aurora button[type="submit"] {
+  background: var(--accent-gradient);
+  color: #ffffff; /* guardrails-ignore no-hardcoded-colors: white label on the saturated accent gradient — the button's own on-fill foreground, mode-independent */
+  border: 0;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--ambient-1) 20%, transparent);
+  transition: filter var(--duration-fast, 120ms) ease, box-shadow var(--duration-fast, 120ms) ease;
+}
+.cb-auth-aurora button[type="submit"]:hover:not(:disabled) {
+  background: var(--accent-gradient);
+  filter: brightness(1.08);
+  box-shadow: 0 10px 28px color-mix(in srgb, var(--ambient-2) 30%, transparent);
+}