@protolabsai/ui 0.2.0

package/README.md

@@ -0,0 +1,24 @@
+# @protolabsai/ui
+
+protoLabs.studio React component library. Every primitive is className-only over the [`@protolabsai/design`](../design-system/) tokens (`--pl-*`), so it inherits the locked brand and restyles for free when a token changes. Documented in Storybook.
+
+## Components (v1)
+
+`Button` · `Badge` (status) · `Card` · `Stat` · `Eyebrow` — extracted from the marketing site's primitives. More land here as the site + other sites need them.
+
+## Use
+
+```tsx
+import "@protolabsai/design/css"; // tokens + base layer (once, at root)
+import "@protolabsai/ui/styles.css"; // component styles (once, at root)
+import { Button, Badge, Card, Stat, Eyebrow } from "@protolabsai/ui";
+```
+
+## Storybook
+
+```bash
+pnpm --filter @protolabsai/ui storybook        # dev workbench → http://localhost:6006
+pnpm --filter @protolabsai/ui build-storybook  # static site → packages/ui/storybook-static/
+```
+
+Sidebar: **Foundations** (colors, type, geometry — rendered from the live tokens) + **Components**. The canvas uses the real dark ground because Storybook imports `@protolabsai/design/css`.

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@protolabsai/ui",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "description": "protoLabs.studio React component library — primitives built on @protolabsai/design tokens.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.tsx",
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@protolabsai/design": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^10.4.1",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build -o storybook-static",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/Badge.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge, type Status } from "./index";
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Badge",
+  component: Badge,
+  args: { children: "released" },
+  argTypes: { status: { control: "inline-radio", options: ["neutral", "success", "warning", "error", "info"] } },
+};
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Neutral: Story = {};
+export const Success: Story = { args: { status: "success", children: "passed" } };
+
+const ALL: Status[] = ["neutral", "success", "warning", "error", "info"];
+export const AllStatuses: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      {ALL.map((s) => (
+        <Badge key={s} status={s}>
+          {s}
+        </Badge>
+      ))}
+    </div>
+  ),
+};

package/src/Blog.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container, Empty, PostItem, PostList, Prose } from "./index";
+
+const meta: Meta = { title: "Components/Blog" };
+export default meta;
+type Story = StoryObj;
+
+export const Index: Story = {
+  render: () => (
+    <Container>
+      <PostList>
+        <PostItem
+          href="#"
+          meta="2026-05-29 · engineering"
+          title="Six builds to a green Docker image"
+          excerpt="The deps stage copied node_modules for the wrong packages. Here's the diagnosis trail and the in-place-install fix."
+        />
+        <PostItem
+          href="#"
+          meta="2026-05-20 · decisions"
+          title="Why we retired the Python stack"
+          excerpt="Consolidating onto Payload + TypeScript. What the migration kept and what it dropped."
+        />
+        <PostItem
+          href="#"
+          meta="2026-05-12 · voice"
+          title="Pulling the AI voice out of writing"
+          excerpt="The tells we ban, the craft we keep, and how the spec enforces both."
+        />
+      </PostList>
+    </Container>
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <Container>
+      <Empty>No posts yet — the queue is gated on voice landing.</Empty>
+    </Container>
+  ),
+};
+
+export const PostBody: Story = {
+  render: () => (
+    <Container>
+      <Prose>
+        <h2>The bet</h2>
+        <p>
+          We build systems that build themselves. That is not a tagline for a deck — it is the operating
+          model. One operator sets direction; a fleet of agents lands the work.
+        </p>
+        <h3>What ships</h3>
+        <ul>
+          <li>Patterns, open to study and steal.</li>
+          <li>A voice spec that every agent reads before drafting.</li>
+          <li>
+            A green CI gate — every change lands via <code>PR</code>.
+          </li>
+        </ul>
+        <blockquote>No roadmaps for fork users. No smoothing for newcomers.</blockquote>
+        <pre>
+          <code>branch → push → PR → CI green → merge → deploy</code>
+        </pre>
+      </Prose>
+    </Container>
+  ),
+};

package/src/Button.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./index";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  args: { children: "Breakdowns" },
+  argTypes: { variant: { control: "inline-radio", options: ["default", "primary"] } },
+};
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+export const Primary: Story = { args: { variant: "primary", children: "Get started" } };
+export const Disabled: Story = { args: { disabled: true, children: "Disabled" } };

package/src/Content.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Container, Eyebrow, GradientText, Hero, HeroActions, Heading, Lead, Section, SectionIntro } from "./index";
+
+const meta: Meta = { title: "Components/Content" };
+export default meta;
+type Story = StoryObj;
+
+export const HeroBlock: Story = {
+  render: () => (
+    <Container>
+      <Hero>
+        <Eyebrow>protoLabs.studio</Eyebrow>
+        <h1>
+          We build systems that <GradientText>build themselves</GradientText>.
+        </h1>
+        <Lead>
+          One operator, a fleet of agents. The patterns that ship our work are open to study and steal —
+          no roadmaps, no hand-holding.
+        </Lead>
+        <HeroActions>
+          <Button variant="primary">Read the patterns</Button>
+          <Button>See the stack</Button>
+        </HeroActions>
+      </Hero>
+    </Container>
+  ),
+};
+
+export const SectionHeader: Story = {
+  render: () => (
+    <Container>
+      <Section>
+        <Eyebrow>How it works</Eyebrow>
+        <Heading>Voice as code</Heading>
+        <SectionIntro>
+          The brand voice lives in JSON Schema, composes into a system prompt, and every agent reads it
+          before drafting. Change the spec, the whole surface restyles.
+        </SectionIntro>
+      </Section>
+    </Container>
+  ),
+};

package/src/Foundations.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = { title: "Foundations" };
+export default meta;
+type Story = StoryObj;
+
+const COLORS: Array<[string, string]> = [
+  ["Brand violet", "--pl-color-brand-violet"],
+  ["Violet light", "--pl-color-brand-violet-light"],
+  ["Indigo", "--pl-color-brand-indigo"],
+  ["Indigo bright", "--pl-color-brand-indigo-bright"],
+  ["Ground", "--pl-color-bg"],
+  ["Raised", "--pl-color-bg-raised"],
+  ["Foreground", "--pl-color-fg"],
+  ["Muted", "--pl-color-fg-muted"],
+  ["Success", "--pl-color-status-success"],
+  ["Warning", "--pl-color-status-warning"],
+  ["Error", "--pl-color-status-error"],
+  ["Info", "--pl-color-status-info"],
+];
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 12 }}>
+      {COLORS.map(([label, v]) => (
+        <div key={v} style={{ fontFamily: "var(--pl-font-mono)", fontSize: 11, color: "var(--pl-color-fg-muted)" }}>
+          <div style={{ height: 56, borderRadius: "var(--pl-radius)", border: "1px solid var(--pl-color-border)", background: `var(${v})` }} />
+          <div style={{ marginTop: 6, color: "var(--pl-color-fg)" }}>{label}</div>
+          <div>{v}</div>
+        </div>
+      ))}
+      <div
+        style={{ gridColumn: "1 / -1", height: 56, borderRadius: "var(--pl-radius)", background: "var(--pl-gradient-brand)" }}
+        title="--pl-gradient-brand"
+      />
+    </div>
+  ),
+};
+
+export const Typography: Story = {
+  render: () => (
+    <div style={{ color: "var(--pl-color-fg)", display: "grid", gap: 12 }}>
+      <h1 style={{ fontSize: "2.5rem", fontWeight: 500, letterSpacing: "-0.025em", margin: 0 }}>
+        We build systems that build themselves.
+      </h1>
+      <p style={{ color: "var(--pl-color-fg-muted)", maxWidth: "60ch", margin: 0 }}>
+        An indie studio running experiments in the open — and sharing the patterns that build them.
+      </p>
+      <p style={{ fontFamily: "var(--pl-font-mono)", fontSize: 13, margin: 0 }}>
+        Geist Mono — code, metrics, eyebrows. Base size 14px, tools-grade density.
+      </p>
+    </div>
+  ),
+};
+
+export const Geometry: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16, alignItems: "flex-end", color: "var(--pl-color-fg-muted)", fontFamily: "var(--pl-font-mono)", fontSize: 11 }}>
+      {["1", "2", "3", "4", "6", "8", "12"].map((s) => (
+        <div key={s} style={{ textAlign: "center" }}>
+          <div style={{ width: `var(--pl-space-${s})`, height: `var(--pl-space-${s})`, background: "var(--pl-color-brand-violet)", borderRadius: "var(--pl-radius)" }} />
+          <div style={{ marginTop: 6 }}>space-{s}</div>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/Introduction.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Callout,
+  Container,
+  Divider,
+  Eyebrow,
+  GradientText,
+  Heading,
+  Hero,
+  Lead,
+  Row,
+  Section,
+  SectionIntro,
+} from "./index";
+
+const meta: Meta = {
+  title: "Introduction",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+const code = (text: string) => (
+  <pre
+    style={{
+      background: "var(--pl-color-bg-raised)",
+      border: "var(--pl-border-width) solid var(--pl-color-border)",
+      borderRadius: "var(--pl-radius)",
+      padding: "1rem",
+      overflowX: "auto",
+      fontFamily: "var(--pl-font-mono)",
+      fontSize: 13,
+      lineHeight: 1.6,
+      color: "var(--pl-color-fg)",
+      margin: 0,
+    }}
+  >
+    <code>{text}</code>
+  </pre>
+);
+
+export const Overview: Story = {
+  render: () => (
+    <>
+      <Hero>
+        <Container>
+          <Eyebrow>@protolabsai/ui · @protolabsai/design</Eyebrow>
+          <h1>
+            The protoLabs.studio <GradientText>design system</GradientText>.
+          </h1>
+          <Lead>
+            React primitives built on one token source. Change a token, every component restyles —
+            these are the same components that ship the marketing site. Gray and small: content is the
+            hero, not the chrome.
+          </Lead>
+        </Container>
+      </Hero>
+
+      <Section>
+        <Container>
+          <Eyebrow>Install</Eyebrow>
+          <SectionIntro>Two packages: the tokens, and the components that read them.</SectionIntro>
+          {code(`pnpm add @protolabsai/ui @protolabsai/design
+
+# once, at your app root:
+import "@protolabsai/design/css";   // the --pl-* custom properties
+import "@protolabsai/ui/styles.css"; // the component styles`)}
+        </Container>
+      </Section>
+
+      <Section>
+        <Container>
+          <Eyebrow>How it's wired</Eyebrow>
+          <SectionIntro>
+            One source generates the rest, so nothing drifts. Components are className-only over the
+            <code> --pl-* </code> custom properties — no runtime theming layer.
+          </SectionIntro>
+          <Row
+            label="tokens.js"
+            desc="The single source. Generates tokens.css (custom properties), tokens.json, and a Tailwind preset."
+          />
+          <Row
+            label="@protolabsai/design"
+            desc="Ships the generated tokens + base layer. Sets the dark ground and the type scale."
+          />
+          <Row
+            label="@protolabsai/ui"
+            desc="React components over the --pl-* properties. Restyle for free when a token changes."
+          />
+        </Container>
+      </Section>
+
+      <Section>
+        <Container>
+          <Eyebrow>What's here</Eyebrow>
+          <Heading>Components</Heading>
+          <SectionIntro style={{ marginBottom: "1.25rem" }}>
+            Browse the sidebar. Foundations covers the raw tokens; the rest are the primitives that build
+            every page.
+          </SectionIntro>
+          <Row label="Foundations" desc="Color, type scale, spacing, radius — straight from the tokens." />
+          <Row label="Button · Badge" desc="Bordered actions and lowercase status chips." />
+          <Row label="Surface" desc="Card, Section, Container, Eyebrow, Stat — the layout shells." />
+          <Row label="Row" desc="The label · body · status line that lists tools, repos, patterns." />
+          <Row label="Content" desc="Hero, Lead, Heading, SectionIntro, GradientText — page headers." />
+          <Row label="Process" desc="Steps, Checks, Deliverables — the consulting-page primitives." />
+          <Row label="Blog" desc="PostList, PostItem, Empty, Prose — index and long-form." />
+          <Row label="Primitives" desc="Divider, Callout, Kbd, TextLink — technical-content staples." />
+
+          <Divider />
+
+          <Callout tone="info" title="one brand, locked">
+            The voice and visual identity are fixed at v4.x. Tokens and components change by generation,
+            not by hand — edit the source, not the output.
+          </Callout>
+        </Container>
+      </Section>
+    </>
+  ),
+};

package/src/Primitives.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Callout, Divider, Kbd, TextLink } from "./index";
+
+const meta: Meta = { title: "Components/Primitives" };
+export default meta;
+type Story = StoryObj;
+
+export const Callouts: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 16, maxWidth: 560 }}>
+      <Callout title="note">The deps stage copied node_modules for the wrong packages. In-place install fixed it.</Callout>
+      <Callout tone="success" title="shipped">Image build green after the sixth attempt. Deployed to the studio stack.</Callout>
+      <Callout tone="warning" title="heads up">main is protected — every change lands via PR, admins included.</Callout>
+      <Callout tone="error" title="rejected">Paid tiers, gated features, microtransactions. PWYW + donations only.</Callout>
+      <Callout tone="info" title="context">Voice lives in JSON Schema and composes into the system prompt.</Callout>
+    </div>
+  ),
+};
+
+export const Rule: Story = {
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <p>Above the rule.</p>
+      <Divider />
+      <p>Below the rule.</p>
+    </div>
+  ),
+};
+
+export const KbdAndLink: Story = {
+  render: () => (
+    <p style={{ maxWidth: 560, lineHeight: 1.7 }}>
+      Run <Kbd>pnpm seed</Kbd> to upsert the specs, then open the{" "}
+      <TextLink href="#">admin</TextLink> — or read the{" "}
+      <TextLink href="#" external>
+        ADR
+      </TextLink>{" "}
+      for the rationale.
+    </p>
+  ),
+};

package/src/Process.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Check, Checks, Deliverable, Deliverables, Heading, Section, Step, Steps } from "./index";
+
+const meta: Meta = { title: "Components/Process" };
+export default meta;
+type Story = StoryObj;
+
+export const NumberedSteps: Story = {
+  render: () => (
+    <Section style={{ maxWidth: 560 }}>
+      <Heading>Engagement shape</Heading>
+      <Steps>
+        <Step n="01" title="Scope">
+          One call. We map the system you have to the system that builds itself.
+        </Step>
+        <Step n="02" title="Build">
+          Agents land PRs against a green CI gate. You watch the work merge.
+        </Step>
+        <Step n="03" title="Hand off">
+          You keep the patterns. Fork, hack to fit, run it without us.
+        </Step>
+      </Steps>
+    </Section>
+  ),
+};
+
+export const Checklist: Story = {
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <Checks>
+        <Check>
+          <strong>PWYW + donations only.</strong> No paid tiers, no gated features.
+        </Check>
+        <Check>
+          <strong>Open source.</strong> The code has no audience filter — anyone can fork it.
+        </Check>
+        <Check>
+          <strong>Patterns over products.</strong> Study and steal, not subscribe.
+        </Check>
+      </Checks>
+    </div>
+  ),
+};
+
+export const DeliverableGrid: Story = {
+  render: () => (
+    <div style={{ maxWidth: 720 }}>
+      <Deliverables>
+        <Deliverable title="voice-as-code">
+          A JSON-Schema voice spec that composes into the system prompt every agent reads.
+        </Deliverable>
+        <Deliverable title="content pipeline">
+          Intake → draft → corpus capture, modeled as Payload collections.
+        </Deliverable>
+        <Deliverable title="design system">
+          Tokens → CSS → Tailwind, generated from one source. No drift.
+        </Deliverable>
+        <Deliverable title="release flow">
+          Tag push → LLM changelog → Discord + GitHub release. Hands-off.
+        </Deliverable>
+      </Deliverables>
+    </div>
+  ),
+};

package/src/Row.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Row, Stats, Stat } from "./index";
+
+const meta: Meta<typeof Row> = { title: "Components/Row", component: Row };
+export default meta;
+type Story = StoryObj<typeof Row>;
+
+/** Tools-style: label + mono name + description (links out). */
+export const WithName: Story = {
+  args: {
+    label: "Orchestration",
+    name: "protoWorkstacean",
+    desc: "Event orchestrator and fleet switchboard. Routes work across the portfolio.",
+    href: "https://github.com/protoLabsAI/protoWorkstacean",
+    external: true,
+  },
+};
+
+/** Experiments-style: label + description only. */
+export const LabelAndDesc: Story = {
+  args: {
+    label: "rabbit-hole",
+    desc: "Multi-source research agent. A topic + a budget; out comes a knowledge graph.",
+  },
+};
+
+/** Work-style: widens to label | body | status. */
+export const WithStatus: Story = {
+  args: {
+    label: "mythxengine-sdk",
+    desc: "Deterministic multi-agent worlds in Rust. Genre-agnostic; games are packs.",
+    status: "in progress",
+  },
+};
+
+export const Stack: StoryObj = {
+  render: () => (
+    <div>
+      <Row label="Orchestration" name="protoWorkstacean" desc="Event orchestrator and fleet switchboard." />
+      <Row label="Execution" name="protoMaker" desc="The dark factory. Board → features → worktrees → PRs." />
+      <Row label="Runtime" name="protoCLI" desc="An AI agent that lives in your terminal; ships @protolabsai/sdk." />
+    </div>
+  ),
+};
+
+export const StatsGrid: StoryObj = {
+  render: () => (
+    <Stats>
+      <Stat value="6,795" label="PRs merged" />
+      <Stat value="14,000+" label="contributions, past year" />
+      <Stat value="82" label="repos · 26 open source" />
+      <Stat value="$8.56" label="avg agent cost / feature" />
+    </Stats>
+  ),
+};

package/src/Surface.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card, Eyebrow, Stat } from "./index";
+
+const meta: Meta = { title: "Components/Surface" };
+export default meta;
+type Story = StoryObj;
+
+export const CardWithStats: Story = {
+  render: () => (
+    <Card style={{ maxWidth: 420 }}>
+      <Eyebrow>By the numbers</Eyebrow>
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 12 }}>
+        <Stat value="6,795" label="PRs merged" />
+        <Stat value="82" label="repos · 26 open source" />
+        <Stat value="14,000+" label="contributions, past year" />
+        <Stat value="$8.56" label="avg agent cost / feature" />
+      </div>
+    </Card>
+  ),
+};

package/src/index.tsx

@@ -0,0 +1,227 @@
+/**
+ * @protolabsai/ui — React primitives on the @protolabsai/design token set.
+ * Every component is className-only over the --pl-* custom properties, so it
+ * inherits the locked brand and restyles for free when a token changes.
+ */
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+
+const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  /** "primary" reads as a stronger border, not a fill (brand restraint). */
+  variant?: "default" | "primary";
+};
+export function Button({ variant = "default", className, ...rest }: ButtonProps) {
+  return <button className={cx("pl-btn", variant === "primary" && "pl-btn--primary", className)} {...rest} />;
+}
+
+export type Status = "neutral" | "success" | "warning" | "error" | "info";
+export function Badge({ status = "neutral", children }: { status?: Status; children: ReactNode }) {
+  return <span className={cx("pl-badge", status !== "neutral" && `pl-badge--${status}`)}>{children}</span>;
+}
+
+export function Card({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-card", className)} {...rest} />;
+}
+
+export function Eyebrow({ children }: { children: ReactNode }) {
+  return <div className="pl-eyebrow">{children}</div>;
+}
+
+export function Stat({ value, label }: { value: ReactNode; label: ReactNode }) {
+  return (
+    <div>
+      <div className="pl-stat__num">{value}</div>
+      <div className="pl-stat__label">{label}</div>
+    </div>
+  );
+}
+
+export function Container({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-container", className)} {...rest} />;
+}
+
+export function Section({ className, ...rest }: HTMLAttributes<HTMLElement>) {
+  return <section className={cx("pl-section", className)} {...rest} />;
+}
+
+/** Stats grid — wrap Stat children. Two columns, four at ≥640px. */
+export function Stats({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-stats", className)} {...rest} />;
+}
+
+export type RowProps = {
+  /** Left mono label / layer. */
+  label: string;
+  /** Optional mono name above the description. */
+  name?: ReactNode;
+  desc: ReactNode;
+  /** When present, the row widens to label | body | status. */
+  status?: ReactNode;
+  /** Renders as a link when set. */
+  href?: string;
+  external?: boolean;
+};
+export function Row({ label, name, desc, status, href, external }: RowProps) {
+  const cls = cx("pl-row", status != null && "pl-row--wide");
+  const inner = (
+    <>
+      <span className="pl-row__label">{label}</span>
+      <span>
+        {name != null && <div className="pl-row__name">{name}</div>}
+        <div className="pl-row__desc">{desc}</div>
+      </span>
+      {status != null && <span className="pl-row__status">{status}</span>}
+    </>
+  );
+  return href ? (
+    <a className={cls} href={href} {...(external ? { target: "_blank", rel: "noreferrer noopener" } : {})}>
+      {inner}
+    </a>
+  ) : (
+    <div className={cls}>{inner}</div>
+  );
+}
+
+/** The one gradient — the tagline word treatment. Foundation §1 + §13. */
+export function GradientText({ children }: { children: ReactNode }) {
+  return <span className="pl-gradient-text">{children}</span>;
+}
+
+/** Hero header — put an <h1> + <Lead> + <HeroActions> inside. */
+export function Hero({ className, ...rest }: HTMLAttributes<HTMLElement>) {
+  return <header className={cx("pl-hero", className)} {...rest} />;
+}
+/** Button row under the hero lead. */
+export function HeroActions({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-hero__cta", className)} {...rest} />;
+}
+
+/** Large muted intro paragraph (hero size). */
+export function Lead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("pl-lead", className)} {...rest} />;
+}
+
+/** Section heading — self-contained h2 (doesn't rely on a global reset). */
+export function Heading({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cx("pl-heading", className)} {...rest} />;
+}
+
+/** Muted paragraph that introduces a section (body size). */
+export function SectionIntro({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("pl-section-intro", className)} {...rest} />;
+}
+
+/** Numbered process list — wrap Step children. */
+export function Steps({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-steps", className)} {...rest} />;
+}
+export function Step({ n, title, children }: { n: ReactNode; title: ReactNode; children: ReactNode }) {
+  return (
+    <div className="pl-step">
+      <div className="pl-step__num">{n}</div>
+      <div>
+        <div className="pl-step__title">{title}</div>
+        <div className="pl-step__body">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+/** Checklist — wrap Check children. The ✓ mark is rendered for you. */
+export function Checks({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-checks", className)} {...rest} />;
+}
+export function Check({ children, mark = "✓" }: { children: ReactNode; mark?: ReactNode }) {
+  return (
+    <div className="pl-check">
+      <span className="pl-check__mark" aria-hidden>
+        {mark}
+      </span>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+/** Two-column deliverable cards (left-border, mono title). */
+export function Deliverables({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-deliverables", className)} {...rest} />;
+}
+export function Deliverable({ title, children }: { title: ReactNode; children: ReactNode }) {
+  return (
+    <div className="pl-deliverable">
+      <div className="pl-deliverable__title">{title}</div>
+      <div className="pl-deliverable__body">{children}</div>
+    </div>
+  );
+}
+
+/** Blog index list — wrap PostItem children. */
+export function PostList({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-post-list", className)} {...rest} />;
+}
+export type PostItemProps = { meta?: ReactNode; title: ReactNode; excerpt?: ReactNode; href: string };
+export function PostItem({ meta, title, excerpt, href }: PostItemProps) {
+  return (
+    <a className="pl-post-item" href={href}>
+      {meta != null && <div className="pl-post-item__meta">{meta}</div>}
+      <div className="pl-post-item__title">{title}</div>
+      {excerpt != null && <div className="pl-post-item__excerpt">{excerpt}</div>}
+    </a>
+  );
+}
+
+/** Mono empty-state line. */
+export function Empty({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-empty", className)} {...rest} />;
+}
+
+/** Long-form rich-text wrapper (blog post body, docs). */
+export function Prose({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-prose", className)} {...rest} />;
+}
+
+/** Hairline rule. */
+export function Divider({ className, ...rest }: HTMLAttributes<HTMLHRElement>) {
+  return <hr className={cx("pl-divider", className)} {...rest} />;
+}
+
+/** Bordered note block — left-accent keyed to the status tone. */
+export function Callout({
+  tone = "neutral",
+  title,
+  children,
+}: {
+  tone?: Status;
+  title?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cx("pl-callout", tone !== "neutral" && `pl-callout--${tone}`)}>
+      {title != null && <div className="pl-callout__title">{title}</div>}
+      <div className="pl-callout__body">{children}</div>
+    </div>
+  );
+}
+
+/** Keyboard / inline-token chip. */
+export function Kbd({ children }: { children: ReactNode }) {
+  return <kbd className="pl-kbd">{children}</kbd>;
+}
+
+/** Standalone styled link (underline-offset treatment). Use the app's router
+ *  Link for internal navigation; this is for plain anchors. */
+export function TextLink({
+  className,
+  external,
+  ...rest
+}: HTMLAttributes<HTMLAnchorElement> & { href?: string; external?: boolean }) {
+  return (
+    <a
+      className={cx("pl-link", className)}
+      {...(external ? { target: "_blank", rel: "noreferrer noopener" } : {})}
+      {...rest}
+    />
+  );
+}

package/src/styles.css

@@ -0,0 +1,466 @@
+/* @protolabsai/ui — component styles, built entirely on @protolabsai/design
+ * tokens (the --pl-* custom properties). Import once at your app root:
+ *   import "@protolabsai/ui/styles.css";
+ * Requires @protolabsai/design/css to be imported too (for the tokens). */
+
+.pl-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.9rem;
+  font-family: var(--pl-font-sans);
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--pl-color-fg);
+  background: transparent;
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    border-color var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease),
+    background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-btn:hover {
+  border-color: var(--pl-color-fg);
+}
+/* Primary ships as a stronger border, not a violet fill — brand restraint. */
+.pl-btn--primary {
+  border-color: var(--pl-color-fg);
+}
+.pl-btn--primary:hover {
+  background: var(--pl-color-fg);
+  color: var(--pl-color-bg);
+}
+.pl-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pl-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.15rem 0.5rem;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  line-height: 1.4;
+  text-transform: lowercase;
+  letter-spacing: 0.02em;
+  color: var(--pl-color-fg-muted);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-badge--success {
+  color: var(--pl-color-status-success);
+  border-color: color-mix(in oklch, var(--pl-color-status-success) 35%, transparent);
+}
+.pl-badge--warning {
+  color: var(--pl-color-status-warning);
+  border-color: color-mix(in oklch, var(--pl-color-status-warning) 35%, transparent);
+}
+.pl-badge--error {
+  color: var(--pl-color-status-error);
+  border-color: color-mix(in oklch, var(--pl-color-status-error) 35%, transparent);
+}
+.pl-badge--info {
+  color: var(--pl-color-status-info);
+  border-color: color-mix(in oklch, var(--pl-color-status-info) 35%, transparent);
+}
+
+.pl-card {
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  padding: var(--pl-space-4);
+}
+
+.pl-eyebrow {
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  font-weight: var(--pl-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--pl-color-fg-muted);
+}
+
+.pl-stat__num {
+  font-family: var(--pl-font-mono);
+  font-size: 1.1rem;
+  color: var(--pl-color-fg);
+}
+.pl-stat__label {
+  margin-top: 0.15rem;
+  font-size: 12px;
+  color: var(--pl-color-fg-muted);
+}
+
+/* ── layout ── */
+.pl-container {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+.pl-section {
+  padding: 4rem 0;
+}
+
+/* ── stats grid (wraps Stat) ── */
+.pl-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem 2rem;
+  padding: 1.5rem 0;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+@media (min-width: 640px) {
+  .pl-stats {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* ── row (label | body [| status]) ── */
+.pl-row {
+  display: grid;
+  grid-template-columns: 9rem 1fr;
+  gap: 1.25rem;
+  padding: 1rem 0;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+  text-decoration: none;
+  color: var(--pl-color-fg);
+  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-row:last-of-type {
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+a.pl-row:hover {
+  opacity: 0.7;
+}
+.pl-row--wide {
+  grid-template-columns: 9rem 1fr auto;
+}
+.pl-row__label {
+  font-family: var(--pl-font-mono);
+  font-size: 12px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-row__name {
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  color: var(--pl-color-fg);
+  margin-bottom: 0.25rem;
+}
+.pl-row__desc {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--pl-color-fg-muted);
+}
+.pl-row__status {
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  text-transform: lowercase;
+  color: var(--pl-color-fg-muted);
+}
+@media (max-width: 640px) {
+  .pl-row,
+  .pl-row--wide {
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+  }
+}
+
+/* ── gradient text (the one gradient — tagline word only) ── */
+.pl-gradient-text {
+  background: var(--pl-gradient-brand);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+/* ── hero ── */
+.pl-hero {
+  display: block;
+  padding: 5rem 0 3rem;
+}
+.pl-hero h1 {
+  margin: 0 0 1.25rem;
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+.pl-hero__cta {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* ── lead + section heading/intro ── */
+.pl-lead {
+  margin: 0 0 1.5rem;
+  font-size: 1.05rem;
+  line-height: 1.6;
+  color: var(--pl-color-fg-muted);
+  max-width: 60ch;
+}
+.pl-heading {
+  margin: 0 0 1rem;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--pl-color-fg);
+}
+.pl-section-intro {
+  margin: 0 0 2rem;
+  color: var(--pl-color-fg-muted);
+  max-width: 60ch;
+  line-height: 1.6;
+}
+
+/* ── steps (numbered process) ── */
+.pl-steps {
+  display: grid;
+  gap: 1.5rem;
+}
+.pl-step {
+  display: grid;
+  grid-template-columns: 2rem 1fr;
+  gap: 0.5rem;
+  align-items: baseline;
+}
+.pl-step__num {
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-step__title {
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  margin-bottom: 0.4rem;
+  color: var(--pl-color-fg);
+}
+.pl-step__body {
+  color: var(--pl-color-fg-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+/* ── checks (checklist) ── */
+.pl-checks {
+  display: grid;
+  gap: 0.5rem;
+}
+.pl-check {
+  display: grid;
+  grid-template-columns: 1.2rem 1fr;
+  gap: 0.5rem;
+  align-items: baseline;
+  font-size: 14px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-check__mark {
+  color: var(--pl-color-fg);
+  font-family: var(--pl-font-mono);
+}
+.pl-check strong {
+  color: var(--pl-color-fg);
+  font-weight: 500;
+}
+
+/* ── deliverables (two-col, left-border cards) ── */
+.pl-deliverables {
+  display: grid;
+  gap: 1.5rem;
+}
+@media (min-width: 640px) {
+  .pl-deliverables {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.pl-deliverable {
+  border-left: var(--pl-border-width) solid var(--pl-color-border-strong);
+  padding-left: 1rem;
+}
+.pl-deliverable__title {
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  margin-bottom: 0.4rem;
+  color: var(--pl-color-fg);
+}
+.pl-deliverable__body {
+  color: var(--pl-color-fg-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+/* ── post list (blog index) ── */
+.pl-post-list {
+  display: grid;
+  gap: 0;
+}
+.pl-post-item {
+  display: block;
+  padding: 1.25rem 0;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+  text-decoration: none;
+  color: var(--pl-color-fg);
+  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-post-item:last-of-type {
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-post-item:hover {
+  opacity: 0.7;
+}
+.pl-post-item__meta {
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  color: var(--pl-color-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.4rem;
+}
+.pl-post-item__title {
+  font-size: 1.05rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+}
+.pl-post-item__excerpt {
+  color: var(--pl-color-fg-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+/* ── empty state ── */
+.pl-empty {
+  color: var(--pl-color-fg-muted);
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  padding: 1rem 0;
+}
+
+/* ── prose (long-form rich text) ── */
+.pl-prose {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--pl-color-fg);
+}
+.pl-prose h2 {
+  font-size: 1.3rem;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+.pl-prose h3 {
+  font-size: 1.1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.pl-prose p {
+  margin: 1rem 0;
+}
+.pl-prose ul,
+.pl-prose ol {
+  margin: 1rem 0;
+  padding-left: 1.25rem;
+}
+.pl-prose li {
+  margin: 0.3rem 0;
+}
+.pl-prose code {
+  background: var(--pl-color-bg-raised);
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg);
+  font-size: 0.88em;
+}
+.pl-prose pre {
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  padding: 1rem;
+  border-radius: var(--pl-radius);
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+.pl-prose pre code {
+  background: transparent;
+  padding: 0;
+}
+.pl-prose blockquote {
+  border-left: 2px solid var(--pl-color-border-strong);
+  padding-left: 1rem;
+  margin: 1.5rem 0;
+  color: var(--pl-color-fg-muted);
+}
+
+/* ── divider ── */
+.pl-divider {
+  border: 0;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+  margin: 2rem 0;
+}
+
+/* ── callout (note block) ── */
+.pl-callout {
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-left-width: 2px;
+  border-radius: var(--pl-radius);
+  padding: 0.85rem 1rem;
+}
+.pl-callout__title {
+  font-family: var(--pl-font-mono);
+  font-size: 12px;
+  text-transform: lowercase;
+  letter-spacing: 0.02em;
+  color: var(--pl-color-fg);
+  margin-bottom: 0.35rem;
+}
+.pl-callout__body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--pl-color-fg-muted);
+}
+.pl-callout--success {
+  border-left-color: var(--pl-color-status-success);
+}
+.pl-callout--warning {
+  border-left-color: var(--pl-color-status-warning);
+}
+.pl-callout--error {
+  border-left-color: var(--pl-color-status-error);
+}
+.pl-callout--info {
+  border-left-color: var(--pl-color-status-info);
+}
+
+/* ── kbd / inline token ── */
+.pl-kbd {
+  font-family: var(--pl-font-mono);
+  font-size: 0.82em;
+  padding: 0.1rem 0.4rem;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-bottom-width: 2px;
+  border-radius: var(--pl-radius);
+}
+
+/* ── standalone link ── */
+.pl-link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--pl-color-border-strong);
+  transition:
+    text-decoration-color var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-link:hover {
+  text-decoration-color: var(--pl-color-fg);
+}