Extract @forkzero/ui shared design system package

Move tokens, styles, Header, Footer, and CopyButton into packages/ui/
using npm workspaces. Header and Footer now accept props (navLinks,
githubUrl, repoUrl, etc.) instead of importing constants directly,
making them reusable across repos. Consumers install from GitHub
Packages; forkzero.ai uses the workspace symlink during dev.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: gmoon

.github/workflows/ci.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: Build design system
+        run: npm run build -w packages/ui
+
       - name: Typecheck
         run: npx tsc --noEmit
 

.github/workflows/publish-design-system.yml

@@ -0,0 +1,26 @@
+name: Publish Design System
+
+on:
+  push:
+    branches: [main]
+    paths: ['packages/ui/**']
+
+jobs:
+  publish:
+    name: Publish @forkzero/ui
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: https://npm.pkg.github.com
+          cache: npm
+      - run: npm ci
+      - run: npm run build -w packages/ui
+      - run: npm publish -w packages/ui
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+packages/*/dist
 coverage
 *.tsbuildinfo
 *.local

Makefile

@@ -1,4 +1,4 @@
-.PHONY: ci install format lint typecheck build test clean pre-commit pre-push
+.PHONY: ci install format lint typecheck build build-ui test clean pre-commit pre-push
 
 # Pre-commit gate: fast checks (format + lint)
 pre-commit: format lint
@@ -21,23 +21,27 @@ format:
 lint:
 	npm run lint
 
-typecheck:
+build-ui:
+	npm run build -w packages/ui
+
+typecheck: build-ui
 	npx tsc --noEmit
 
-build:
+build: build-ui
 	npm run build
 
 test:
 	npm test
 
 clean:
-	rm -rf dist node_modules
+	rm -rf dist packages/*/dist node_modules
 
 help:
 	@echo "Available targets:"
 	@echo "  make pre-commit - Check formatting + lint (run before commit)"
 	@echo "  make pre-push   - Full check: format + lint + typecheck + test + build (run before push)"
 	@echo "  make ci         - Full CI with clean install"
+	@echo "  make build-ui   - Build @forkzero/ui package"
 	@echo "  make build      - Build for production"
 	@echo "  make test       - Run tests with coverage"
 	@echo "  make clean      - Remove dist and node_modules"

eslint.config.js

@@ -3,7 +3,7 @@ import tseslint from 'typescript-eslint'
 import reactHooks from 'eslint-plugin-react-hooks'
 
 export default tseslint.config(
-  { ignores: ['dist', 'node_modules'] },
+  { ignores: ['dist', 'node_modules', 'packages/*/dist'] },
   js.configs.recommended,
   ...tseslint.configs.recommended,
   {

package-lock.json

@@ -3,17 +3,18 @@
   "private": true,
   "version": "0.1.0",
   "type": "module",
+  "workspaces": ["packages/*"],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build && tsx scripts/prerender.ts",
     "preview": "vite preview",
     "test": "vitest run --coverage",
     "test:fast": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint src scripts",
-    "lint:fix": "eslint src scripts --fix",
-    "format": "prettier --write 'src/**/*.{ts,tsx}' 'scripts/**/*.ts'",
-    "format:check": "prettier --check 'src/**/*.{ts,tsx}' 'scripts/**/*.ts'"
+    "lint": "eslint src scripts packages/ui/src",
+    "lint:fix": "eslint src scripts packages/ui/src --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx}' 'scripts/**/*.ts' 'packages/ui/src/**/*.{ts,tsx}'",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx}' 'scripts/**/*.ts' 'packages/ui/src/**/*.{ts,tsx}'"
   },
   "dependencies": {
     "@giscus/react": "^3.1.0",

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@forkzero/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "import": "./dist/styles.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "typescript": "^5.7.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/forkzero/forkzero.ai.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  }
+}

packages/ui/package.json

@@ -0,0 +1,44 @@
+import { colors, fonts } from '../tokens'
+
+export interface FooterProps {
+  repoUrl?: string
+  repoLabel?: string
+  orgName?: string
+}
+
+const styles = {
+  footer: {
+    textAlign: 'center' as const,
+    padding: '2rem',
+    color: colors.textMuted,
+    fontSize: '0.85rem',
+    fontFamily: fonts.system,
+    borderTop: `1px solid ${colors.borderColor}`,
+    marginTop: '3rem',
+  },
+  link: {
+    color: colors.accentBlue,
+    textDecoration: 'none',
+  },
+}
+
+export function Footer({ repoUrl, repoLabel, orgName }: FooterProps) {
+  return (
+    <footer style={styles.footer}>
+      <p>
+        &copy; {new Date().getFullYear()} {orgName ?? 'Forkzero'}.{' '}
+        {repoUrl ? (
+          <>
+            Built with{' '}
+            <a href={repoUrl} style={styles.link}>
+              {repoLabel ?? 'Lattice'}
+            </a>
+            .
+          </>
+        ) : (
+          <>Built with {repoLabel ?? 'Lattice'}.</>
+        )}
+      </p>
+    </footer>
+  )
+}