[Design] Refine shared tabs

[MaggieAppleton]

Base branch: main
Branch: maggie/refine-shared-tabs
Depends on: None

Goal

Give Chopin's shared tabs a deliberate, polished visual treatment that works in both the product shell and authored visual interfaces.

Context From Planning

• The /design-audit#controls specimen now uses the shared Base UI/shadcn-style tabs rather than a static stand-in, but the current segmented treatment still feels underdesigned.
• Tabs belong to the shared Chopin foundation. The shell may use them more densely than explainers, but both should share typography, color, spacing, radii, focus, and motion tokens.
• This is a design pass requiring Maggie's review before broad adoption.

Current Behavior

packages/visuals wraps Base UI Tabs and supplies one generic visual treatment. The active, hover, focus, disabled, overflow, and content relationships are functional but lack a strong hierarchy and do not yet cover dense shell and spacious explainer contexts convincingly.

Desired Behavior

Create a small, coherent tab family with intentional density variants, clear selected state, quiet inactive tabs, strong keyboard focus, and predictable narrow-width behavior.

Acceptance Criteria

• The design audit shows default, hover, active, focus, disabled, overflow, and keyboard-navigation states using the real shared component.
• Dense shell and spacious explainer examples share the same primitives and tokens rather than separate CSS implementations.
• The selected state is legible without relying on color alone; focus is visible and is not clipped.
• Horizontal overflow and narrow layouts remain usable without truncating labels or panels.
• Arrow-key navigation, disabled-tab skipping, accessible names, and panel ownership continue to work.
• Maggie approves the audit specimens before production consumers are migrated.

Verification Commands

• bun run types
• bun run ci
• bun run design-audit:test

Primary Surfaces

• /design-audit#controls
• Shared Tabs primitives in packages/visuals
• Product and visual-interface consumers of shared tabs

Expected PR Checks

• Repo required checks

Report Requirements

• Before/after screenshots at desktop and narrow widths
• Token and variant decisions
• Keyboard and accessibility verification
• Consumers migrated and any deferred consumers

Implementation Notes

• Keep Base UI behavior; this issue is visual-system work, not a new tabs implementation.
• Avoid consumer-specific overrides and raw values where a shared token belongs.
• Start in the audit route and stop for design review before broad migration.

Stop Conditions

• A visual direction cannot be chosen without Maggie's review.
• The proposed API requires behavior changes outside the shared tabs contract.