@brdgapp/ui 0.1.1 → 1.0.0

package/styles/globals.css

@@ -0,0 +1,595 @@
+/* ============================================================================
+   @brdgapp/ui — every Bridge token, utility and base rule.
+
+   Apps import this once, after Tailwind:
+     @import "tailwindcss";
+     @import "@brdgapp/ui/globals.css";
+
+   Bridge themes with data-theme on <html> ("light" | "dark"), not the OS setting.
+   Token values come unchanged from Bridge OS src/app/globals.css (commit 5d9b382, 2026-10-29).
+   Only role tokens ship: the fixed palette names Bridge OS kept in @theme (royal, charcoal, mist…)
+   were dropped (decision 2026-11-02; 0 uses). Their names live on as display names in the handbook.
+
+   Adding a token is deliberately hard: first try an existing role at an opacity. A new token needs a
+   light value, a dark value, a handbook entry and a contrast check.
+   ============================================================================ */
+
+/* Tailwind scans the package's own files, so apps don't have to list them. */
+@source "../components";
+@source "../hooks";
+@source "../lib";
+
+/* Tailwind's `dark:` follows Bridge's switch instead of the OS setting. */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/* --- Tokens: light (default) and dark ------------------------------------- */
+/* Light values also answer to [data-theme="light"], so a light preview can sit inside a dark page. */
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+
+  /* Surfaces */
+  --surface-primary: #FFFFFF;
+  --surface-secondary: #F9F9FA;
+  --surface-tertiary: #F2F3F5;
+  --surface-elevated: #FFFFFF;
+
+  /* Borders */
+  --border-default: #ECEDF0;
+  --border-hover: #D9DBE1;
+  --border-divider: #F2F3F5;
+
+  /* Text */
+  --text-primary: #0D1531;
+  --text-secondary: #3D445A;
+  --text-body: #676C7E;
+  --text-muted: #6D7284;           /* 4.55:1 on --surface-secondary (Bridge OS #6E7385 was 4.48), 4.78 on white. Not for --surface-tertiary: use --text-body there. */
+  --text-disabled: #B3B7C4;
+
+  /* Primary */
+  --primary: #0038FF;
+  --primary-hover: #0036D7;
+  --primary-active: #0028C0;
+
+  /* Semantic: Success */
+  --success: #0EA02E;
+  --success-bg: #E7F6EA;
+  --success-border: #DBF1E0;
+  --success-text: #005F15;
+
+  /* Semantic: Error */
+  --error: #E13535;
+  --error-bg: #FCEBEB;
+  --error-border: #F9D7D7;
+  --error-text: #9E0000;
+
+  /* Button system — AA-verified fills (WCAG 2.2 AA, both themes; see docs/BUTTON-AUDIT.md).
+     Split from --primary/--error because a colour that passes as TEXT can fail as a FILL. */
+  --primary-solid: #0038FF;        /* primary button fill — white text 4.8:1 */
+  --primary-solid-hover: #0036D7;
+  --danger-solid: #C72B2B;         /* destructive button fill — white text 5.5:1 (brand #E13535 = 4.0:1, failed) */
+  --danger-solid-hover: #A82323;
+  --danger-text: #C72B2B;          /* danger-ghost text — 5.5:1 on white */
+
+  /* Semantic: Warning */
+  --warning: #F59E0B;
+  --warning-bg: #FCF4E6;
+  --warning-border: #FBEFD9;
+  --warning-text: #714A00;
+
+  /* Accent: Purple */
+  --purple: #552BCB;
+  --purple-bg: #F6F2FF;
+  --purple-border: #F1ECFF;
+
+  /* Accent: Info */
+  --info: #0036D7;
+  --info-bg: #EEF4FF;
+  --info-border: #E6EEFF;
+
+  /* Accent: Honey — the alum/outline sticker hue (Arch "Solid label / Warning"). Distinct from
+     --warning (amber #F59E0B): honey is the darker Arch value used for the ALUM badge outline. */
+  --honey: #E19500;
+
+  /* Avatar badges — the same in both themes: they mark the person, not the page. The white mark
+     on each passes 3:1 (super connector 3.3–6.0, warning 3.6). */
+  --super-connector-from: #6A3AF3;
+  --super-connector-to: #7A80FF;
+  --badge-warning: #B87A00;
+
+  /* Nav */
+  --nav-bg: rgba(255, 255, 255, 0.8);
+
+  /* CTA Banner */
+  --cta-from: #0038FF;
+  --cta-to: #0085FF;
+
+  /* Background glow patches — using design system color tokens */
+  --glow-royal: rgba(0, 56, 255, 0.12);       /* Primary Royal Blue */
+  --glow-purple: rgba(85, 43, 203, 0.10);     /* Purple accent */
+  --glow-info: rgba(0, 54, 215, 0.08);        /* Info Blue */
+  --glow-success: rgba(14, 160, 46, 0.06);    /* Success Green */
+
+  /* Liquid Glass tokens */
+  --glass-bg: rgba(255, 255, 255, 0.9);
+  /* Strong glass (90%): more frosted than the 55% chrome so page content doesn't bleed
+     through distractingly, but still clearly a member of the glass family (paired with a
+     backdrop-blur) so it belongs next to the frosted TopNav. Used by the Activity rail. */
+  --glass-bg-strong: rgba(255, 255, 255, 0.9);
+  /* Near-opaque companion for browsers that drop `backdrop-filter` on the nav — see the
+     Safari fallback at the bottom of this file. Not a design token; don't use it for cards. */
+  --glass-bg-nofilter: rgba(255, 255, 255, 0.94);
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-highlight: rgba(255, 255, 255, 0.8);
+  --glass-shadow-outer: rgba(0, 20, 80, 0.06);
+  --glass-shadow-inner: rgba(0, 20, 80, 0.04);
+  --glass-rim: rgba(255, 255, 255, 0.35);
+
+  /* Shadows */
+  --shadow-card: 0px 6px 20px rgba(0, 0, 0, 0.15);
+  --shadow-dropdown: 0px 4px 20px rgba(0, 0, 0, 0.12);
+  /* Elevation levels (decision 2026-11-02), from the most-used Bridge OS values. Use these for
+     anything that floats; --shadow-dropdown stays for the tooltips and hover cards that use it today. */
+  --shadow-menu: 0px 12px 32px rgba(0, 0, 0, 0.16);      /* dropdowns, menus, filter popovers */
+  --shadow-dialog: 0px 24px 64px rgba(0, 0, 0, 0.22);    /* dialogs, confirms, modals */
+  --shadow-drawer: -8px 0px 32px rgba(0, 0, 0, 0.12);    /* side drawers (light falls from the left edge) */
+
+  /* Selection */
+  --selection-bg: rgba(0, 56, 255, 0.2);
+  --selection-text: #0038FF;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* Surfaces */
+  --surface-primary: #0B0F1A;
+  --surface-secondary: #111627;
+  --surface-tertiary: #1A2035;
+  --surface-elevated: #151B2E;
+
+  /* Borders */
+  --border-default: #252D44;
+  --border-hover: #3A4460;
+  --border-divider: #1E2640;
+
+  /* Text */
+  --text-primary: #F0F1F4;
+  --text-secondary: #C8CCD8;
+  --text-body: #9BA1B4;
+  --text-muted: #868CA3;
+  --text-disabled: #505872;
+
+  /* Primary */
+  --primary: #4D7AFF;
+  --primary-hover: #6B91FF;
+  --primary-active: #3A66E8;
+
+  /* Semantic: Success */
+  --success: #34C759;
+  --success-bg: rgba(52, 199, 89, 0.12);
+  --success-border: rgba(52, 199, 89, 0.2);
+  --success-text: #4ADE80;
+
+  /* Semantic: Error */
+  --error: #FF6B6B;
+  --error-bg: rgba(255, 107, 107, 0.12);
+  --error-border: rgba(255, 107, 107, 0.2);
+  --error-text: #FFA0A0;
+
+  /* Button system — AA fills (dark). A fill must be dark enough for white text; text can be lighter. */
+  --primary-solid: #2F5BFF;        /* primary fill — white text 5.2:1 (--primary #4D7AFF = 3.8:1, failed as a fill) */
+  --primary-solid-hover: #3D68F5;
+  --danger-solid: #C0392B;         /* destructive fill — white text 5.4:1 */
+  --danger-solid-hover: #D0463A;
+  --danger-text: #F58A8A;          /* danger-ghost text — 5.8:1 on dark surface */
+
+  /* Semantic: Warning */
+  --warning: #FBBF24;
+  --warning-bg: rgba(251, 191, 36, 0.12);
+  --warning-border: rgba(251, 191, 36, 0.2);
+  --warning-text: #FCD34D;
+
+  /* Accent: Purple */
+  --purple: #9A81ED;               /* lightened from #8B6EE8 so purple tag text passes 4.5:1 on every dark surface (was 4.42) */
+  --purple-bg: rgba(139, 110, 232, 0.12);
+  --purple-border: rgba(139, 110, 232, 0.2);
+
+  /* Accent: Info */
+  --info: #60A5FA;
+  --info-bg: rgba(96, 165, 250, 0.12);
+  --info-border: rgba(96, 165, 250, 0.2);
+
+  /* Accent: Honey (alum/outline sticker) — lightened for dark surfaces */
+  --honey: #F5C451;
+
+  /* Avatar badges — the same in both themes: they mark the person, not the page. The white mark
+     on each passes 3:1 (super connector 3.3–6.0, warning 3.6). */
+  --super-connector-from: #6A3AF3;
+  --super-connector-to: #7A80FF;
+  --badge-warning: #B87A00;
+
+  /* Nav */
+  --nav-bg: rgba(11, 15, 26, 0.85);
+
+  /* CTA Banner — muted in dark mode */
+  --cta-from: #0D1531;
+  --cta-to: #151B2E;
+
+  /* Background glow patches */
+  --glow-royal: rgba(77, 122, 255, 0.15);
+  --glow-purple: rgba(139, 110, 232, 0.12);
+  --glow-info: rgba(96, 165, 250, 0.10);
+  --glow-success: rgba(52, 199, 89, 0.08);
+
+  /* Liquid Glass tokens */
+  --glass-bg: rgba(21, 27, 46, 0.9);
+  --glass-bg-strong: rgba(21, 27, 46, 0.9);
+  --glass-bg-nofilter: rgba(21, 27, 46, 0.94);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-highlight: rgba(255, 255, 255, 0.06);
+  --glass-shadow-outer: rgba(0, 0, 0, 0.3);
+  --glass-shadow-inner: rgba(0, 0, 0, 0.2);
+  --glass-rim: rgba(255, 255, 255, 0.08);
+
+  /* Shadows */
+  --shadow-card: 0px 6px 20px rgba(0, 0, 0, 0.5);
+  --shadow-dropdown: 0px 4px 20px rgba(0, 0, 0, 0.6);
+  /* Dark values follow the existing pattern (shadows ~4x stronger on dark surfaces). Review by eye. */
+  --shadow-menu: 0px 12px 32px rgba(0, 0, 0, 0.55);
+  --shadow-dialog: 0px 24px 64px rgba(0, 0, 0, 0.65);
+  --shadow-drawer: -8px 0px 32px rgba(0, 0, 0, 0.5);
+
+  /* Selection */
+  --selection-bg: rgba(77, 122, 255, 0.3);
+  --selection-text: #4D7AFF;
+}
+
+
+/* --- Tailwind theme ------------------------------------------------------- */
+@theme inline {
+  --font-sans: var(--font-mulish, "Mulish"), system-ui, sans-serif;
+
+  /* Type sizes, each with its line height (decisions 2026-11-03, from a survey of all 12 apps). One ladder,
+     one job per step: 11 eyebrow · 12 meta · 13 dense body · 14 body · 16 small title · 18 title ·
+     22 page title and stat · 28 / 36 / 48 display (public pages, growing with the screen). Named by size,
+     because Tailwind's text-* also makes color classes and --text-body is a color here. A plain
+     text-[13px] still works but sets no line height. */
+  --text-11: 11px;
+  --text-11--line-height: 16px;
+  --text-12: 12px;
+  --text-12--line-height: 16px;
+  --text-13: 13px;
+  --text-13--line-height: 20px;
+  --text-14: 14px;
+  --text-14--line-height: 20px;
+  --text-16: 16px;
+  --text-16--line-height: 24px;
+  --text-18: 18px;
+  --text-18--line-height: 26px;
+  --text-22: 22px;
+  --text-22--line-height: 28px;
+  --text-28: 28px;
+  --text-28--line-height: 34px;
+  --text-36: 36px;
+  --text-36--line-height: 42px;
+  --text-48: 48px;
+  --text-48--line-height: 56px;
+
+  /* Motion (decision 2026-11-03): one curve for everything that moves, Bridge OS's drawer curve: fast
+     out of the gate, gentle landing. It replaces Tailwind's ease-out, so every `ease-out` uses it. Three
+     speeds go with it: 150ms quick (hover, color, press), 200ms base (menus, sections, toasts), 300ms slow
+     (drawers, sheets, dialogs). JavaScript animations read the same values from @brdgapp/ui/lib/motion. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* Entrance and exit animations, on the three speeds: things arrive on the curve, and leave a step faster. */
+  --animate-fade-in: fadeIn 0.2s var(--ease-out);
+  --animate-fade-in-up: fadeInUp 0.3s var(--ease-out);
+  --animate-scale-in: scaleIn 0.2s var(--ease-out);
+  --animate-scale-out: scaleOut 0.15s ease-in;
+  --animate-fade-out: fadeOut 0.15s ease-in;
+  --animate-slide-in-right: slideInRight 0.3s var(--ease-out);
+}
+
+/* --- Base ----------------------------------------------------------------- */
+body {
+  background: var(--surface-primary);
+  color: var(--text-primary);
+  font-family: var(--font-mulish, "Mulish"), system-ui, sans-serif;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: var(--selection-bg);
+  color: var(--selection-text);
+}
+
+/* --- Focus ---
+   Every package component draws its own solid 2px ring. This is the safety net for anything an app builds
+   itself (a plain link, a <button>, a row with tabindex): a solid blue outline for keyboard users, never on
+   a mouse click. A component's own `outline-none` + ring wins over it. Solid, not 40%, so it clears WCAG's
+   3:1 (7:1 light, 5:1 dark); decided 2026-11-03. Bridge OS's global `:focus-visible { outline: none }` is
+   not copied: it hid focus on anything without its own ring. */
+:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* SkipLink: off screen until it has keyboard focus, then top-left above everything. */
+[data-slot="skip-link"]:not(:focus) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* --- Scrollbar --- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); }
+
+/* Hide the scrollbar entirely while keeping scrollability (e.g. horizontal tab bars). */
+.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
+.scrollbar-none::-webkit-scrollbar { display: none; }
+
+/* Hover-reveal scrollbar: thumb is invisible at rest and fades in only while the
+   container is hovered. Used by the Activity rail — a permanently-visible track in
+   its narrow gutter reads as a thick, ugly border. The 6px track from the global
+   rule stays reserved either way, so revealing the thumb causes no reflow. Thumb is
+   the light --border-hover, not the darker --text-disabled the global rule hovers to. */
+.scrollbar-hover { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+.scrollbar-hover::-webkit-scrollbar-thumb { background: transparent; transition: background 150ms ease; }
+.scrollbar-hover:hover { scrollbar-color: var(--border-hover) transparent; }
+.scrollbar-hover:hover::-webkit-scrollbar-thumb { background: var(--border-hover); }
+
+/* --- Reduced Motion --- */
+/* Spinners keep turning: people still need to see that something is happening. (Bridge OS's rule
+   froze them too; changed in the package, 2026-11-02.) */
+@media (prefers-reduced-motion: reduce) {
+  *:not(.animate-spin),
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* --- Keyframes --- */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes scaleOut {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* --- Stagger Delays --- */
+.anim-delay-1 { animation-delay: 50ms; }
+.anim-delay-2 { animation-delay: 100ms; }
+.anim-delay-3 { animation-delay: 150ms; }
+.anim-delay-4 { animation-delay: 200ms; }
+.anim-delay-5 { animation-delay: 250ms; }
+.anim-delay-6 { animation-delay: 300ms; }
+
+/* --- Page Visual Polish --- */
+
+/* 1. Dot grid background — SVG-based, tiles seamlessly */
+.bg-dot-grid {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='0.75' fill='%230038FF' fill-opacity='0.12'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 24px 24px;
+}
+
+[data-theme="dark"] .bg-dot-grid {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='0.75' fill='%234D7AFF' fill-opacity='0.15'/%3E%3C/svg%3E");
+}
+
+/* 2. Noise grain texture — SVG feTurbulence */
+.bg-noise::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  opacity: 0.03;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 256px 256px;
+}
+
+/* 3. Glow patches — scattered radial blobs for glassmorphism depth.
+   NOTE: must be `absolute` (scoped to this wrapper), NOT `position: fixed`.
+   A viewport-fixed element sits permanently in the sticky TopNav's backdrop,
+   and a fixed element inside a backdrop-filter's backdrop makes the blur
+   silently fail in Safari/WebKit — the nav then renders as just its 55%-opaque
+   background and page content reads straight through it. Keeping the glow
+   absolute (the wrapper lives below the nav in flow) keeps it out of the nav's
+   backdrop so the frosted blur composites reliably. */
+.bg-glow-patches {
+  position: relative;
+}
+.bg-glow-patches::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    /* Top-left — Royal Blue blob */
+    radial-gradient(ellipse 35% 30% at 8% 8%, var(--glow-royal), transparent),
+    /* Top-right — Purple blob */
+    radial-gradient(ellipse 30% 25% at 85% 5%, var(--glow-purple), transparent),
+    /* Center-left — Info Blue blob */
+    radial-gradient(ellipse 25% 20% at 15% 55%, var(--glow-info), transparent),
+    /* Center-right — Purple shifted */
+    radial-gradient(ellipse 28% 22% at 78% 45%, var(--glow-purple), transparent),
+    /* Bottom-center — Success green blob */
+    radial-gradient(ellipse 30% 25% at 50% 85%, var(--glow-success), transparent),
+    /* Bottom-right — Royal Blue blob */
+    radial-gradient(ellipse 22% 18% at 90% 75%, var(--glow-royal), transparent);
+}
+
+/* 4. Liquid Glass — Apple-inspired frosted panel effect */
+.liquid-glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(24px) saturate(1.5);
+  -webkit-backdrop-filter: blur(24px) saturate(1.5);
+  border: 1px solid var(--glass-border);
+  box-shadow:
+    /* Outer shadow — soft ambient depth */
+    0 4px 24px var(--glass-shadow-outer),
+    0 1px 3px var(--glass-shadow-outer),
+    /* Inner shadow — concave depth */
+    inset 0 -1px 2px var(--glass-shadow-inner),
+    /* Rim light — top edge specular highlight */
+    inset 0 1px 0 var(--glass-rim);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Specular highlight — gradient shine across the top */
+.liquid-glass::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  background: linear-gradient(
+    180deg,
+    var(--glass-highlight) 0%,
+    transparent 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+
+/* --- Card ------------------------------------------------------------------- */
+/* Here, not in Tailwind classes, because the glass rule outranks Tailwind's background, border and
+   shadow classes. A clickable card has an invisible link or button (the cover) across it; the content
+   sits on top and lets clicks fall through to the cover, except its own controls. */
+[data-slot="card"] > [data-card-cover] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+}
+[data-slot="card"] > [data-card-cover]:disabled { cursor: not-allowed; }
+[data-slot="card"][data-clickable] > :not([data-card-cover]) {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+}
+[data-slot="card"][data-clickable] :is(a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"], [tabindex]:not([tabindex="-1"])) {
+  pointer-events: auto;
+}
+[data-slot="card"]:has(> [data-card-cover]:focus-visible) {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+/* Links rise (the translate is a class on the card) with a soft shadow. */
+.liquid-glass[data-slot="card"][data-clickable="link"]:not([data-disabled]):hover {
+  box-shadow:
+    var(--shadow-card),
+    inset 0 -1px 2px var(--glass-shadow-inner),
+    inset 0 1px 0 var(--glass-rim);
+}
+/* Selectable cards tint. */
+.liquid-glass[data-slot="card"][data-clickable="select"]:not([data-disabled]):not([data-selected]):hover {
+  background:
+    linear-gradient(color-mix(in srgb, var(--text-primary) 3%, transparent), color-mix(in srgb, var(--text-primary) 3%, transparent)),
+    var(--glass-bg);
+}
+.liquid-glass[data-slot="card"][data-selected] {
+  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
+  background:
+    linear-gradient(color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)),
+    var(--glass-bg);
+}
+[data-slot="card"][data-bare][data-clickable]:not([data-disabled]):not([data-selected]):hover {
+  background: var(--surface-secondary);
+}
+[data-slot="card"][data-bare][data-selected] {
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+}
+
+/* Ensure content sits above the highlight */
+.liquid-glass > * {
+  position: relative;
+  z-index: 2;
+}
+
+/* The top bar's glass (and anything else fixed to the screen's edge, like a side rail): a stronger blur
+   than a card, a hairline under it, and the same rim. One class, so every app's top bar matches. Taken from
+   Bridge OS top-nav.tsx, where these were written out as classes on the <nav>; made one utility 2026-11-03.
+   liquid-glass-sm (a lighter glass no app or component used) was removed the same day. */
+.glass-chrome {
+  background: var(--glass-bg);
+  backdrop-filter: blur(40px) saturate(1.5);
+  -webkit-backdrop-filter: blur(40px) saturate(1.5);
+  border-bottom: 1px solid var(--glass-border);
+  box-shadow:
+    0 1px 3px var(--glass-shadow-outer),
+    inset 0 -1px 1px var(--glass-shadow-inner),
+    inset 0 1px 0 var(--glass-rim);
+}
+
+/* ── Safari fallback: chrome that can't rely on its own blur ──────────────────
+   WebKit silently drops `backdrop-filter` when a `position: fixed` element sits
+   in the filtered element's backdrop. The Activity tab's "Recently met" rail is
+   exactly that (`fixed top-14 right-0`, and itself backdrop-blurred), so in
+   Safari the sticky TopNav fell back to its 55%-opaque background and feed
+   content read straight through it while scrolling. Chrome and Firefox
+   composite it correctly, which is why this only ever showed up on one browser,
+   on one tab.
+
+   `-webkit-hyphens: none` is the standard Safari-only feature query. The blur
+   still applies where it works; this only swaps the background for a
+   near-opaque one where it doesn't, so the chrome stays readable either way.
+
+   The real fix is for the rail not to be `position: fixed` — that's a layout
+   change (the feed's `--rail-reserve` padding and the collapse animation both
+   assume it), so it's deliberately not bundled with this. If the rail ever
+   stops being fixed, delete this block and `--glass-bg-nofilter` with it. */
+@supports (-webkit-hyphens: none) {
+  .glass-chrome {
+    background: var(--glass-bg-nofilter);
+  }
+}

package/src/index.ts

@@ -1,18 +0,0 @@
-"use client"
-
-import "./styles.css"
-
-export { BridgeUIProvider, DEFAULT_API_BASE_URL } from "./provider"
-export type { BridgeUIProviderProps } from "./provider"
-export {
-  NetworkPeopleHelper,
-  NetworkPeopleNudge,
-  openNetworkPeopleHelper,
-} from "./network-people-helper"
-export type {
-  NetworkPeopleHelperProps,
-  NetworkPeopleNudgeProps,
-  NetworkContact,
-  NetworkPersonAction,
-  HelperPlacement,
-} from "./network-people-helper"