@waveinno/ui 0.0.0-stage → 0.1.1

package/dist/styles.css

@@ -0,0 +1,658 @@
+
+/* @waveinno/ui — import after tailwindcss:
+     @import "tailwindcss";
+     @import "@waveinno/ui/styles.css";
+     @source "<path to node_modules>/@waveinno/ui/src";
+   The consumer owns the Tailwind entry so it controls @source and plugins. */
+
+/* ══════════════════════════════════════════════════════════════════════════
+   WAVEINNO DESIGN TOKENS
+   Semantic slots only. Dark mode redefines the slots, never the components.
+   Ported verbatim from the waveinnoTempaltes master template (docs/DESIGN-SYSTEM.md §4).
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+:root {
+  /* ── surfaces ── */
+  --canvas: #ffffff;
+  --surface: #f8f9fc;
+  --raised: #ffffff;
+  --hover: #f1f3f9;
+  --selected: #eef2ff;
+
+  /* ── lines ── */
+  --border: #e2e5f0;
+  --border2: #cbd0e2;
+
+  /* ── ink ── */
+  --text: #1a113e;
+  --body: #3b3759;
+  --muted: #6b7396;
+  --placeholder: #9aa1bd;
+
+  /* ── brand ── */
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --primary-subtle: #eef2ff;
+  --primary-muted: #c7d2fe;
+  --accent: #7c3aed;
+
+  /* ── intent ── */
+  --success: #009767;
+  --success-subtle: #d0fae5;
+  --warning: #b45309;
+  --warning-subtle: #fef3c7;
+  --danger: #dc2626;
+  --danger-subtle: #fee2e2;
+  --info: #4f46e5;
+  --info-subtle: #eef2ff;
+
+  /* ── elevation — two levels only ── */
+  --elev2: 0 4px 12px rgba(5, 8, 22, 0.08);
+  --elev3: 0 16px 48px rgba(5, 8, 22, 0.16);
+  --lit: 0 0 #0000;
+
+  /* ── radius ── */
+  --r-ctl: 8px;
+  --r-card: 10px;
+  --r-dlg: 14px;
+
+  /* ── shell geometry ── */
+  --rail: 72px;
+  --panel: 240px;
+  --topbar: 56px;
+  /* 480 could not fit six tabs or an email address without collision.
+     A record drawer is a reading surface, not a sidebar. */
+  --drawer: 560px;
+
+  /* ── density (default) ── */
+  --row-h: 40px;
+  --cell-py: 8px;
+  --cell-px: 12px;
+  --ctl-h: 36px;
+  --panel-item: 38px;
+
+  /* ── type families — §4.2 ── */
+  --font-inter: "Inter";
+  --font-jakarta: "Plus Jakarta Sans";
+  --font-jetbrains: "JetBrains Mono";
+
+  /* ── motion ── */
+  --dur: 220ms;
+  --ease: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-theme="dark"] {
+  /* Four distinguishable steps, not two.
+     The first dark theme had --hover and --raised at the same value, so a
+     menu never looked lifted off the card it sat on and every surface read as
+     one flat sheet of navy. Each step below is a visible move. */
+  --canvas: #050816;
+  --surface: #0b1020;
+  --hover: #151b30;
+  --raised: #171d33;
+  --selected: rgba(99, 102, 241, 0.16);
+
+  --border: rgba(255, 255, 255, 0.09);
+  --border2: rgba(255, 255, 255, 0.17);
+
+  --text: #f5f6fa;
+  --body: #a3abc9;
+  /* Was #6b7396 — 3.9:1 on the surface, which fails AA for the 11px labels it
+     is used on. This measures 5.7:1. */
+  --muted: #858ead;
+  --placeholder: #4a5273;
+
+  /* Indigo at #4f46e5 sits too close to a near-black canvas to carry a button.
+     Dark gets its own steps rather than the light ones reused. */
+  --primary: #6366f1;
+  --primary-hover: #818cf8;
+  --primary-subtle: rgba(99, 102, 241, 0.16);
+  --primary-muted: rgba(165, 180, 252, 0.38);
+  --accent: #a78bfa;
+
+  --success: #00bb7f;
+  --success-subtle: rgba(0, 187, 127, 0.14);
+  --warning: #f59e0b;
+  --warning-subtle: rgba(245, 158, 11, 0.14);
+  --danger: #ef4444;
+  --danger-subtle: rgba(239, 68, 68, 0.14);
+  --info-subtle: rgba(79, 70, 229, 0.14);
+
+  --elev2: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --elev3: 0 18px 52px rgba(0, 0, 0, 0.66);
+
+  /* The single detail that separates a flat dark theme from an expensive one:
+     a one-pixel highlight along the top edge, as though the surface were lit
+     from above. Absent in light, where real shadow does the same job. */
+  --lit: inset 0 1px 0 0 rgba(255, 255, 255, 0.055);
+}
+
+[data-density="compact"] {
+  --row-h: 32px;
+  --cell-py: 6px;
+  --cell-px: 10px;
+  --ctl-h: 32px;
+  --panel-item: 34px;
+}
+
+[data-density="comfortable"] {
+  --row-h: 48px;
+  --cell-py: 12px;
+  --cell-px: 16px;
+  --ctl-h: 44px;
+  --panel-item: 42px;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   TAILWIND THEME BRIDGE
+   `inline` keeps utilities pointing at the live var(), so data-theme and
+   data-density switch at runtime with no rebuild and no class swap.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@theme inline {
+  --color-canvas: var(--canvas);
+  --color-surface: var(--surface);
+  --color-raised: var(--raised);
+  --color-hover: var(--hover);
+  --color-selected: var(--selected);
+
+  --color-border: var(--border);
+  --color-border2: var(--border2);
+
+  --color-text: var(--text);
+  --color-body: var(--body);
+  --color-muted: var(--muted);
+  --color-placeholder: var(--placeholder);
+
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-subtle: var(--primary-subtle);
+  --color-primary-muted: var(--primary-muted);
+  --color-accent: var(--accent);
+
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-danger: var(--danger);
+  --color-danger-subtle: var(--danger-subtle);
+  --color-info: var(--info);
+  --color-info-subtle: var(--info-subtle);
+
+  --radius-ctl: var(--r-ctl);
+  --radius-card: var(--r-card);
+  --radius-dlg: var(--r-dlg);
+
+  --shadow-elev2: var(--elev2);
+  --shadow-elev3: var(--elev3);
+
+  --spacing-rail: var(--rail);
+  --spacing-panel: var(--panel);
+  --spacing-topbar: var(--topbar);
+  --spacing-drawer: var(--drawer);
+  --spacing-row: var(--row-h);
+  --spacing-ctl: var(--ctl-h);
+  --spacing-item: var(--panel-item);
+  --spacing-cellx: var(--cell-px);
+  --spacing-celly: var(--cell-py);
+
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-display: var(--font-jakarta), var(--font-inter), sans-serif;
+  --font-mono: var(--font-jetbrains), ui-monospace, monospace;
+
+  --ease-wave: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   BASE
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@layer base {
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  /* Inside the app shell the page is exactly one viewport tall and <main> is the
+     only scroller; without this the page itself scrolls and the rail slides out of
+     view. Pages outside the shell (sign-in, shared reports, view-as) scroll normally. */
+  body:has(.shell-grid) {
+    overflow: hidden;
+  }
+
+  body {
+    background: var(--canvas);
+    color: var(--body);
+    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    border-radius: 3px;
+  }
+
+  ::selection {
+    background: var(--primary-subtle);
+    color: var(--text);
+  }
+
+  /* Scrollbars read as part of the chrome, not the OS. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border2) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border2);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--muted);
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   TYPOGRAPHIC PRIMITIVES — the prototype's .num / .disp / .mono / .ov / .cur
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@layer components {
+  /* Tabular figures. Mandatory on every numeric cell — see §2.5. */
+  .num {
+    font-variant-numeric: tabular-nums lining-nums slashed-zero;
+  }
+
+  .disp {
+    font-family: var(--font-jakarta), var(--font-inter), sans-serif;
+    color: var(--text);
+    letter-spacing: -0.02em;
+  }
+
+  .mono {
+    font-family: var(--font-jetbrains), ui-monospace, monospace;
+    font-size: 13px;
+  }
+
+  /* Currency symbols recede so the magnitude leads. */
+  .cur {
+    color: var(--muted);
+    font-weight: 500;
+  }
+
+  .ov {
+    font-size: 11px;
+    line-height: 14px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   MOTION — one place to honour the accessibility contract
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@keyframes wave-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes wave-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.anim-in {
+  animation: wave-in var(--dur) var(--ease) both;
+}
+
+/* Skeletons sweep rather than pulse — reads as loading, not as broken. */
+.shimmer {
+  position: relative;
+  overflow: hidden;
+  background: var(--hover);
+}
+.shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--border2) 55%, transparent),
+    transparent
+  );
+  animation: wave-shimmer 1.6s infinite;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   SHELL GEOMETRY
+   Collapse is a token change, not a DOM change: --panel goes to 0 and the CSS
+   grid animates. The boot script can set the attribute before paint, so a
+   returning user never sees the panel flash open and then shut.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+[data-panel-collapsed] {
+  --panel: 0px;
+}
+
+[data-panel-collapsed] [data-shell-panel] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.shell-grid {
+  display: grid;
+  grid-template-columns: var(--rail) var(--panel) minmax(0, 1fr);
+  grid-template-rows: var(--topbar) minmax(0, 1fr);
+  height: 100dvh;
+  transition: grid-template-columns 150ms var(--ease);
+}
+
+@media (max-width: 1023.98px) {
+  .shell-grid {
+    grid-template-columns: 0 0 minmax(0, 1fr);
+  }
+
+  /* Zeroing the columns is not enough: padding and borders do not collapse, so
+     the rail and panel kept eating 22px off the left of every phone screen
+     while producing no scrollbar to give it away. Below lg they leave the
+     layout entirely — the nav sheet carries them instead. */
+  [data-shell-rail],
+  [data-shell-panel] {
+    display: none;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   OVERLAY MOTION — §4.5
+   Drawer slides, dialog scales, scrim fades. Durations differ on purpose: the
+   drawer travels further, so it gets the full 220ms; the dialog appears in
+   place and 180ms keeps it from feeling sluggish.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@keyframes scrim-in {
+  from { opacity: 0 }
+  to { opacity: 1 }
+}
+@keyframes scrim-out {
+  from { opacity: 1 }
+  to { opacity: 0 }
+}
+/* Only `transform` and `opacity`: the dialog is placed with the separate
+   `translate` property (Tailwind's -translate-*). The old keyframes animated a
+   translate(-50%, -50%) of their own, which the browser added to the placement —
+   the dialog flashed off-centre for 180ms, then jumped. That was the "blink". */
+@keyframes dlg-in {
+  from { opacity: 0; transform: translateY(8px) scale(.975) }
+  to { opacity: 1; transform: none }
+}
+@keyframes dlg-out {
+  from { opacity: 1; transform: none }
+  to { opacity: 0; transform: translateY(6px) scale(.985) }
+}
+/* One keyframe served both sides, so a left-pinned drawer animated in from
+   translateX(100%) — off the right edge, across the whole screen, to the left.
+   That single line was most of why the mobile menu felt broken. */
+@keyframes sheet-in-right {
+  from { transform: translateX(100%); opacity: .6 }
+  to { transform: translateX(0); opacity: 1 }
+}
+@keyframes sheet-out-right {
+  from { transform: translateX(0); opacity: 1 }
+  to { transform: translateX(100%); opacity: .6 }
+}
+@keyframes sheet-in-left {
+  from { transform: translateX(-100%) }
+  to { transform: translateX(0) }
+}
+@keyframes sheet-out-left {
+  from { transform: translateX(0) }
+  to { transform: translateX(-100%) }
+}
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(.97) translateY(-2px) }
+  to { opacity: 1; transform: none }
+}
+@keyframes pop-out {
+  from { opacity: 1; transform: none }
+  to { opacity: 0; transform: scale(.97) translateY(-2px) }
+}
+
+[data-scrim][data-state="open"] { animation: scrim-in 240ms var(--ease) }
+[data-scrim][data-state="closed"] { animation: scrim-out 200ms var(--ease) both }
+
+[data-dialog][data-state="open"] { animation: dlg-in 240ms var(--ease) }
+[data-dialog][data-state="closed"] { animation: dlg-out 170ms cubic-bezier(0.4, 0, 1, 1) both }
+
+[data-sheet="right"][data-state="open"] { animation: sheet-in-right 320ms var(--ease) }
+[data-sheet="right"][data-state="closed"] { animation: sheet-out-right 220ms cubic-bezier(0.4, 0, 1, 1) both }
+[data-sheet="left"][data-state="open"] { animation: sheet-in-left var(--dur) var(--ease) }
+[data-sheet="left"][data-state="closed"] { animation: sheet-out-left 190ms var(--ease) }
+
+@keyframes sheet-content-in {
+  from { opacity: 0 }
+  to { opacity: 1 }
+}
+
+/* The panel carries the movement; its contents only resolve, a beat later.
+   Giving the children their own translate would fight the slide and read as
+   two things moving instead of one object arriving. */
+[data-sheet][data-state="open"] > * {
+  animation: sheet-content-in 240ms var(--ease) both;
+  animation-delay: 80ms;
+}
+
+/* Lifted surfaces carry the top highlight. One rule, every overlay. */
+[data-dialog],
+[data-sheet],
+[data-pop] {
+  box-shadow: var(--lit), var(--elev3);
+}
+
+[data-pop][data-state="open"] { animation: pop-in 140ms var(--ease) }
+[data-pop][data-state="closed"] { animation: pop-out 110ms var(--ease) }
+
+/* Nineteen modules do not fit a laptop rail, so it scrolls. The fade is the
+   only affordance that says so without stealing width for a scrollbar. */
+.rail-fade {
+  scrollbar-width: none;
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
+}
+.rail-fade::-webkit-scrollbar {
+  width: 0;
+}
+
+/* A horizontal scrollbar across a tab strip reads as a broken layout. The
+   strip still scrolls when it must; it just stops announcing it. */
+.no-bar {
+  scrollbar-width: none;
+}
+.no-bar::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+}
+
+
+/* ══════════════════════════════════════════════════════════════════════════
+   MOTION LAYER
+   The shell was correct but inert: every state change happened instantly, so
+   the product felt like a series of screenshots rather than one surface. These
+   are the smallest moves that buy continuity — nothing here exceeds 220ms, and
+   all of it is already behind the reduced-motion rule above.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes page-fade {
+  from { opacity: 0 }
+  to { opacity: 1 }
+}
+
+/* Opacity only, and short.
+   The first version slid the whole page up 6px over 260ms on every route
+   change — including between sibling screens of one module. Moving the text a
+   reader is already reaching for does not feel smooth, it feels like waiting.
+   The navigation itself now carries the motion (the rail and sidebar
+   indicators travel); the content only has to resolve. */
+.page-in {
+  animation: page-fade 150ms var(--ease) both;
+}
+
+/* Cards and rows settle in sequence on first paint. Capped at eight, because
+   a stagger long enough to notice is a stagger that wastes the user's time. */
+.stagger > * {
+  animation: page-in 300ms var(--ease) both;
+}
+.stagger > *:nth-child(1) { animation-delay: 0ms }
+.stagger > *:nth-child(2) { animation-delay: 28ms }
+.stagger > *:nth-child(3) { animation-delay: 56ms }
+.stagger > *:nth-child(4) { animation-delay: 84ms }
+.stagger > *:nth-child(5) { animation-delay: 112ms }
+.stagger > *:nth-child(6) { animation-delay: 140ms }
+.stagger > *:nth-child(7) { animation-delay: 168ms }
+.stagger > *:nth-child(n + 8) { animation-delay: 196ms }
+
+/* Press feedback. A control that does not move under the pointer feels dead,
+   and 1.5% is enough to register without becoming a bounce. */
+button:not(:disabled):active,
+[role="button"]:not([aria-disabled="true"]):active {
+  transform: scale(0.985);
+}
+button,
+[role="button"] {
+  transition: transform 90ms var(--ease);
+}
+
+/* Anything that changes colour does so on the same curve. */
+a,
+button,
+[role="button"],
+input,
+textarea,
+select {
+  transition-timing-function: var(--ease);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   BRAND MARK MOTION — <WaveMark animate="…">
+   Slow and rare on purpose: a shine every few seconds says "alive", a loop
+   that never rests says "loading forever". All of it stops for people who ask
+   for less motion.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@keyframes wm-shine {
+  0%, 55% { transform: translateX(-160%) skewX(-20deg) }
+  100% { transform: translateX(260%) skewX(-20deg) }
+}
+@keyframes wm-float {
+  0%, 100% { transform: translateY(0) }
+  50% { transform: translateY(-7%) }
+}
+@keyframes wm-pulse {
+  0% { transform: scale(1); opacity: .5 }
+  100% { transform: scale(1.55); opacity: 0 }
+}
+@keyframes wm-flip {
+  0%, 35% { transform: perspective(500px) rotateY(0) }
+  65%, 100% { transform: perspective(500px) rotateY(360deg) }
+}
+.wm-shine { animation: wm-shine 3.4s cubic-bezier(.4, 0, .2, 1) infinite }
+.wm-float { animation: wm-float 3.8s ease-in-out infinite }
+.wm-pulse { animation: wm-pulse 1.9s cubic-bezier(0, 0, .2, 1) infinite }
+.wm-pulse-late { animation: wm-pulse 1.9s cubic-bezier(0, 0, .2, 1) .95s infinite }
+.wm-flip { animation: wm-flip 3.6s cubic-bezier(.65, 0, .25, 1) infinite }
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-shine, .wm-float, .wm-pulse, .wm-pulse-late, .wm-flip { animation: none }
+  .wm-shine { opacity: 0 }
+  .wm-pulse, .wm-pulse-late { display: none }
+}
+
+/* ── field and progress motion ── */
+@keyframes wm-shake {
+  0%, 100% { transform: translateX(0) }
+  20%, 60% { transform: translateX(-4px) }
+  40%, 80% { transform: translateX(4px) }
+}
+@keyframes wm-stripes { to { background-position: 28px 0 } }
+@keyframes wm-sheen {
+  0% { left: -40% }
+  60%, 100% { left: 110% }
+}
+@keyframes wm-indeterminate {
+  0% { left: -40% }
+  100% { left: 100% }
+}
+/* Once, when the error appears — never a loop. */
+.wm-shake { animation: wm-shake 360ms var(--ease) 1 }
+.wm-stripes {
+  background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%);
+  background-size: 28px 28px;
+  animation: wm-stripes 900ms linear infinite;
+}
+.wm-sheen { animation: wm-sheen 2.6s var(--ease) infinite }
+.wm-indeterminate { animation: wm-indeterminate 1.3s cubic-bezier(.65, 0, .35, 1) infinite }
+
+@media (prefers-reduced-motion: reduce) {
+  .wm-shake, .wm-stripes, .wm-sheen { animation: none }
+  .wm-indeterminate { animation-duration: 3s }
+}
+
+/* A cell that was just saved: one green flash, then back to normal. */
+@keyframes wm-saved {
+  0% { background-color: var(--success-subtle) }
+  100% { background-color: transparent }
+}
+.wm-saved { animation: wm-saved 900ms var(--ease) 1 }