Initial design system setup

[sjoerdbeentjes]

Initial setup of the SURF design system. This PR is based on a near-empty main, so the whole bootstrap can be reviewed in one place.

Reviewer's guide

Most of the diff is generated or vendored. Roughly in priority order:

Review closely (the actual decisions live here):

• Build configs: packages/react/vite.config.ts (lib mode + dts externalisation), packages/angular/ng-package.json (allowedNonPeerDependencies), turbo.json (pipeline), .github/workflows/ci.yml.
• Storybook gotcha: packages/angular/angular.json. Keep browserTarget: "angular:build" (see AGENTS.md), easy to break.
• The actual components: packages/react/src/components/ui/button/button.tsx, packages/angular/src/lib/ui/button/src/lib/hlm-button.ts. First vendored component in each package; sets the per-component layout convention.
• Design tokens: packages/react/src/index.css, packages/angular/src/styles.css. The shared oklch token set (should match across the two). This will be moved to the a shared 'tokens' package eventually.
• Registry config: packages/react/components.json (Base UI style: base-nova, Tabler icons).
• Supply-chain hardening: pnpm-workspace.yaml, .npmrc. Install cooldown (minimumReleaseAge), allowBuilds lifecycle-script allowlist, blockExoticSubdeps. The most security-relevant config in the PR.

Skim (convention/config, mostly mechanical):

• Package manifests (package.json, the two packages/*/package.json), tsconfigs, .storybook/*, Prettier/husky/gitignore.
• Stories (*.stories.*) and barrels (index.ts).
• AGENTS.md / README.md. Docs; worth a read but not code.

Skip (generated or copied by shadcn/spartan):

• pnpm-lock.yaml, generated lockfile.
• .agents/skills/shadcn/** and .agents/skills/spartan/**, upstream skills copied verbatim from the shadcn/spartan repos. Only our own .agents/skills/add-component/* is hand-written.
• packages/angular/src/lib/ui/utils/src/lib/hlm.ts, vendored Spartan utility, generated by the CLI.

Overview

A Turborepo + pnpm monorepo with three packages:

Package	Description	Build
@surfnet/react	React components on shadcn/ui + Base UI	Vite (lib mode) + vite-plugin-dts
@surfnet/angular	Angular components on Spartan (brain + helm)	ng-packagr
@surfnet/typescript-config	Shared base tsconfigs	n/a

Both component packages style with Tailwind CSS v4 and share the same oklch token set. Each ships a Button as the first vendored component.

What's included

• Tooling: Turborepo pipelines (build, lint, dev, storybook), Prettier, and exact-pinned dependencies across all packages.
• Storybook: one per component package (React on port 6006, Angular on 6007), with shared a11y + docs addons and autodocs.
• AI assistant support: shadcn and spartan-ui MCP servers plus vendored agent skills, with conventions documented in AGENTS.md.
• Supply-chain hardening (pnpm 11): an install cooldown (minimumReleaseAge), dependency lifecycle scripts blocked except for an explicit allowBuilds allowlist, and blockExoticSubdeps.

Commands

pnpm install          # whole workspace
pnpm build            # build both libraries
pnpm lint             # type-check both packages
pnpm format           # prettier across the repo
pnpm storybook             # Start both Storybook instances (React & Angular)
pnpm --filter @surfnet/react storybook     # React Storybook (6006)
pnpm --filter @surfnet/angular storybook   # Angular Storybook (6007)

pnpm install --frozen-lockfile, pnpm build, and pnpm lint all pass on pnpm 11.7.0.