Multi-Artifact Workflows: Building Apps Across Artifacts

We're building a dashboard application across multiple Artifacts. Here's the plan:

ARTIFACT 1: "dashboard-types" — Shared TypeScript types and interfaces
ARTIFACT 2: "dashboard-theme" — Design tokens (colors, spacing, typography)
ARTIFACT 3: "dashboard-chart" — A chart component using types and theme
ARTIFACT 4: "dashboard-metrics" — A metrics card component
ARTIFACT 5: "dashboard-page" — The composed dashboard page

Let's build them in order. Each Artifact should reference the previous ones
where needed. Start with ARTIFACT 1: dashboard-types.

Now create the dashboard-chart Artifact. It should use these types from the
dashboard-types Artifact:

- ChartData interface
- ChartConfig type
- TimeSeriesPoint type

Import them as if they exist in a shared module:
import { ChartData, ChartConfig, TimeSeriesPoint } from './types'

Create the dashboard-theme Artifact with these design tokens:

Colors:
- primary: #3B82F6
- primary-hover: #2563EB
- success: #10B981
- warning: #F59E0B
- error: #EF4444

Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64
Typography: headings (Inter, 600 weight), body (Inter, 400 weight)

ALL subsequent Artifacts MUST use ONLY these design tokens. Do not introduce
new colors, spacing values, or font variations.

Before building the dashboard-chart Artifact, verify:

1. List the props you expect to receive
2. For each prop, specify the type from dashboard-types
3. Confirm the component will work with ONLY these props

Do not add new props or types that weren't defined in dashboard-types.
If you find a gap in the types, tell me and I'll update dashboard-types first.

PHASE 1 — Foundation:
"Create a 'design-tokens' Artifact with colors, spacing, typography, and shadows."

PHASE 2 — Primitives:
"Create 'button' Artifact using design-tokens."
"Create 'input' Artifact using design-tokens."
"Create 'card' Artifact using design-tokens."

PHASE 3 — Composites:
"Create 'search-bar' Artifact composing button and input."
"Create 'data-card' Artifact composing card with custom content."

PHASE 4 — Layout:
"Create 'page-layout' Artifact composing header, sidebar, and content area."

For each phase: "Use [specific dependencies] from [source artifacts]. Maintain consistent API patterns."

PHASE 1:
"Create 'api-overview' Artifact — an overview document with table of contents."

PHASE 2:
"Create 'api-authentication' Artifact — authentication docs, linking to api-overview."
"Create 'api-endpoints' Artifact — endpoint reference, linking to api-overview."
"Create 'api-errors' Artifact — error codes, linking to api-overview."

PHASE 3:
"Now update api-overview Artifact to add navigation links to the three detail Artifacts."

Consistency rule: "All docs use the same heading structure (H1 for title, H2 for sections,
H3 for subsections) and the same code block formatting."

Create a 'project-registry' Artifact that tracks all Artifacts in this project.

Format:
| Artifact Name | Type | Status | Dependencies | Last Updated |
|---|---|---|---|---|
| dashboard-types | Code | Complete | None | Turn 1 |
| dashboard-theme | Code | Complete | None | Turn 2 |
| dashboard-chart | React | In Progress | types, theme | Turn 3 |

Update this registry after every Artifact change. Before creating or modifying
any Artifact, check the registry for current state and dependencies.