BearDen

BearDen is Vizzly's design foundation: tokens, primitive React components, and the shared visual-review UI pieces for the product app and CLI reporter.

It replaces Observatory, but it does not try to be a giant shared app framework. The package should stay small and boring in the best way.

Install

pnpm add @vizzly-testing/bear-den

Import the styles once at the app boundary:

import '@vizzly-testing/bear-den/styles';

Use primitives directly:

import {
  Badge,
  Button,
  Card,
  CardBody,
  FilterPill,
  SearchInput
} from '@vizzly-testing/bear-den';

The root export also includes small composition helpers such as CardHeader, CardFooter, DropdownItem, DropdownDivider, ModalFooter, SkeletonText, SkeletonBlock, and token access through bearDenTokens.

Use review pieces by composing the workflow locally:

import {
  ApprovalButtonGroup,
  ComparisonViewer,
  HotSpotOverlay,
  InspectorPanel,
  ReviewCanvas,
  ReviewQueue,
  ReviewShell,
  ViewModeToggle
} from '@vizzly-testing/bear-den/review';

export function ReviewExperience({
  actions,
  comments,
  comparison,
  items,
  regions,
  selectedId,
  viewMode
}) {
  return (
    <ReviewShell>
      <ReviewQueue items={items} selectedId={selectedId} />
      <ReviewCanvas>
        <ComparisonViewer mode={viewMode} {...comparison} />
        <HotSpotOverlay regions={regions} />
      </ReviewCanvas>
      <InspectorPanel>{comments}</InspectorPanel>
      <ApprovalButtonGroup {...actions} />
      <ViewModeToggle mode={viewMode} />
    </ReviewShell>
  );
}

Ownership

BearDen owns:

• Design tokens.
• Primitive controls and feedback components.
• Shared visual-review layout, comparison, queue, inspector, approval, mobile drawer, and mode controls.
• Small UI utilities required by those primitives.

BearDen does not own:

• Product navigation.
• Build review orchestration.
• Review comments, comment markers, permissions, routing, or URL state.
• Billing, auth, settings, or admin workflows.
• Marketing pages.
• Docs/Starlight composition.
• Universal table behavior until repeated usage proves the same contract.

RYE Rule

Repeat yourself enough.

If a component understands a Vizzly domain object, it probably belongs in the surface that owns that workflow. If a component is pure UI vocabulary used across product and CLI, it can belong here.

Scripts

pnpm lint
pnpm pack:dry-run
pnpm publish:dry-run

Internal Docs

• Ownership model
• Core primitives
• Review UI
• Integration checklist
• Agent guidance