githubnext/chopinPublic

Let's compose rich plans together

[Design] Refine shared tabs

triage/human-response
MA

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.

  1. github-actions[bot]botadded label triage/human-responselast month on GitHub