feat(GlassSurface): add cornerLights prop (subtle | chrome | none) (#123)

Brief 1 of unify-glass-panel-surfaces convoy. Adds a `cornerLights`
prop to the <GlassSurface> primitive so corner catch-lights compose
into every consumer (<Modal>, <StatCard>, landing feature cards) by
default — no per-consumer migration needed.

API:
  cornerLights: 'subtle' (default) | 'chrome' | 'none'

  'subtle' → 4-layer background using --corner-light-warm-subtle /
              --corner-light-cool-subtle (matches .glass-panel-strong
              post-PR #118; appropriate for most data surfaces).
  'chrome' → same recipe with the full-intensity
              --corner-light-warm / --corner-light-cool tokens
              (matches the Layout sidebar nav-chip and TopSearchBar
              header treatments).
  'none'   → today's pre-Brief-1 behavior. Single-layer background:
              var(--glass-surface-{tint}); no transparent border, no
              corner radials. Escape hatch for GPU-budget-constrained
              tiles that legitimately must skip the gradient-border
              treatment.

Composition recipe (verbatim mirror of styles/globals.css's
.glass-panel-strong block post-PR #118):

  linear-gradient(<fill>, <fill>) padding-box,
  radial-gradient(at 0% 100%, <warm> 0%, transparent 42%) border-box,
  radial-gradient(at 100% 0%, <cool> 0%, transparent 42%) border-box,
  var(--chip-border-base) border-box

Paired with `border: 1px solid transparent` so the border-box
gradients render through the border. For cornerLights='none', the
border declaration is omitted entirely — preserves today's box-model
exactly.

Other props (`tint`, `blur`, `rim`, `elevation`, `as`, `style`,
`className`) and the `...style` LAST-wins merge order are unchanged.

Test additions (test/components/ui-primitives.test.js, +49 lines):
  - cornerLights='subtle' (default): asserts --corner-light-*-subtle
    tokens, padding-box/border-box layers, --chip-border-base, and
    `border: 1px solid transparent` all present in the rendered
    inline style attribute.
  - cornerLights='chrome': asserts the full-intensity tokens
    (NOT the -subtle variants); same border declaration.
  - cornerLights='none': asserts single-layer
    `background: var(--glass-surface-mid)`, no corner-light tokens,
    no padding-box, no --chip-border-base, no border declaration.

Verification:
  - npm run lint passes (1 pre-existing unrelated warning).
  - npm run test:run: 116/116 tests pass (was 113; +3 GlassSurface
    assertions).

Ripple effect (intentional, per architect plan):
  <Modal>, <StatCard>, and the landing-page feature cards all
  delegate to <GlassSurface>. Defaulting to cornerLights='subtle'
  means each of them now renders with corner catch-lights without
  any per-consumer edit. The visual-diff baseline refresh is the
  expected side effect; queue on Linux per AGENTS.md § Testing
  before Brief 3 + Brief 4 dispatch.

Acceptance criteria from
.convoys/unify-glass-panel-surfaces/brief-1-upgrade-glass-surface-primitive.md
all met. No consumer migrations in this PR.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/ui/GlassSurface.js

@@ -14,6 +14,32 @@ const ELEVATION_SHADOWS = {
   pronounced: ['var(--elevation-pronounced)'],
 };
 
+const CORNER_LIGHT_TOKENS = {
+  subtle: {
+    warm: 'var(--corner-light-warm-subtle)',
+    cool: 'var(--corner-light-cool-subtle)',
+  },
+  chrome: {
+    warm: 'var(--corner-light-warm)',
+    cool: 'var(--corner-light-cool)',
+  },
+};
+
+function composeBackground(tint, cornerLights) {
+  const fill = `var(--glass-surface-${tint})`;
+  if (cornerLights === 'none') {
+    return fill;
+  }
+  const tokens =
+    CORNER_LIGHT_TOKENS[cornerLights] ?? CORNER_LIGHT_TOKENS.subtle;
+  return [
+    `linear-gradient(${fill}, ${fill}) padding-box`,
+    `radial-gradient(at 0% 100%, ${tokens.warm} 0%, transparent 42%) border-box`,
+    `radial-gradient(at 100% 0%, ${tokens.cool} 0%, transparent 42%) border-box`,
+    'var(--chip-border-base) border-box',
+  ].join(', ');
+}
+
 const GlassSurface = forwardRef(function GlassSurface(
   {
     as: As = 'div',
@@ -21,6 +47,7 @@ const GlassSurface = forwardRef(function GlassSurface(
     rim = 'subtle',
     elevation = 'flat',
     blur = 'mid',
+    cornerLights = 'subtle',
     className,
     style,
     children,
@@ -33,10 +60,11 @@ const GlassSurface = forwardRef(function GlassSurface(
     ...(ELEVATION_SHADOWS[elevation] ?? []),
   ];
   const composedStyle = {
-    background: `var(--glass-surface-${tint})`,
+    background: composeBackground(tint, cornerLights),
     backdropFilter: `blur(var(--glass-blur-${blur})) saturate(var(--glass-saturate))`,
     WebkitBackdropFilter: `blur(var(--glass-blur-${blur})) saturate(var(--glass-saturate))`,
     boxShadow: shadowParts.length > 0 ? shadowParts.join(', ') : undefined,
+    ...(cornerLights !== 'none' ? { border: '1px solid transparent' } : {}),
     ...style,
   };
 

test/components/ui-primitives.test.js

@@ -2,6 +2,7 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { Button, Input, SearchBar } from '../../components/ui';
+import GlassSurface from '../../components/ui/GlassSurface';
 
 describe('Button', () => {
   afterEach(() => cleanup());
@@ -116,3 +117,51 @@ describe('SearchBar', () => {
     expect(screen.queryByRole('button', { name: /clear/i })).toBeNull();
   });
 });
+
+describe('GlassSurface — cornerLights prop', () => {
+  afterEach(() => cleanup());
+
+  it("defaults to cornerLights='subtle' — uses --corner-light-*-subtle tokens and adds a transparent border", () => {
+    const { container } = render(
+      <GlassSurface data-testid="surface">content</GlassSurface>
+    );
+    const el = container.querySelector('[data-testid="surface"]');
+    const styleAttr = el.getAttribute('style') ?? '';
+    expect(styleAttr).toContain('--corner-light-warm-subtle');
+    expect(styleAttr).toContain('--corner-light-cool-subtle');
+    expect(styleAttr).toContain('--chip-border-base');
+    expect(styleAttr).toContain('padding-box');
+    expect(styleAttr).toContain('border-box');
+    expect(styleAttr).toMatch(/border:\s*1px solid transparent/);
+  });
+
+  it("cornerLights='chrome' uses the full-intensity --corner-light-* tokens (not the -subtle variants)", () => {
+    const { container } = render(
+      <GlassSurface cornerLights="chrome" data-testid="surface">
+        content
+      </GlassSurface>
+    );
+    const el = container.querySelector('[data-testid="surface"]');
+    const styleAttr = el.getAttribute('style') ?? '';
+    expect(styleAttr).toContain('--corner-light-warm)');
+    expect(styleAttr).toContain('--corner-light-cool)');
+    expect(styleAttr).not.toContain('--corner-light-warm-subtle');
+    expect(styleAttr).not.toContain('--corner-light-cool-subtle');
+    expect(styleAttr).toMatch(/border:\s*1px solid transparent/);
+  });
+
+  it("cornerLights='none' emits a single-layer background and no border declaration", () => {
+    const { container } = render(
+      <GlassSurface cornerLights="none" tint="mid" data-testid="surface">
+        content
+      </GlassSurface>
+    );
+    const el = container.querySelector('[data-testid="surface"]');
+    const styleAttr = el.getAttribute('style') ?? '';
+    expect(styleAttr).toContain('background: var(--glass-surface-mid)');
+    expect(styleAttr).not.toContain('--corner-light');
+    expect(styleAttr).not.toContain('padding-box');
+    expect(styleAttr).not.toContain('--chip-border-base');
+    expect(styleAttr).not.toMatch(/border:\s*1px solid/);
+  });
+});