apps/ui (the TanStack Start frontend, folded into this repo 2026-07 via monorepo consolidation) is a product application, not a redistributable package — it's the sole consumer of its own components, so it has no library build: no dist/, no main/module/exports/types fields in package.json, vite build bundles the whole SSR app (routes, nitro, Cloudflare Worker output), not a component entry point.
That's not a defect — most product frontends never need to be importable libraries. But it became a real blocker while wiring this repo up to Claude Design (claude.ai/design)'s /design-sync tool, which needs exactly that shape (dist/ + per-component .d.ts) to compile a live, importable component bundle the design agent can actually build with. Without it, only a degraded fallback is available: scanning src/ directly with weaker type contracts, and real friction for any component entangled with app-level context (TanStack Router, React Query) that a standalone bundle doesn't have. An interim, non-live stopgap (raw token + component source files pushed to a Claude Design project, no rendered previews, no live bundle) is in place in the meantime.
This epic tracks extracting the actual reusable design-system layer — tokens + presentational components — out of apps/ui into a real workspace package, packages/ui-kit, following the existing precedent already in this repo: root package.json declares "workspaces": ["apps/ui", "packages/client", "packages/contract"], and packages/client (@jsonbored/metagraphed) already builds with tsup --format esm,cjs --dts --dts-resolve --clean --treeshake and ships proper main/module/types/exports. packages/ui-kit is the same pattern, applied to the frontend's component layer.
Value independent of Claude Design: this also enforces a real separation between presentational components and app/business logic — today apps/ui/src/components/metagraphed/ mixes true design-system pieces (chips.tsx, kbd.tsx, panel-shell.tsx, page-section.tsx, chart primitives) with deep product components (subnet-masthead.tsx, validator-nominators-table.tsx, nav-mega-menu.tsx, resource-explorer.tsx) in one undifferentiated 136-file directory, per [design-system-tokens]'s existing rule that UI work must use centralized tokens/primitives, never one-off values — that rule currently has no structural enforcement.
Tracked centrally here. maintainer-only — this is architecture/infra work, not offered through the Gittensor contributor flow.
Phase 0 — Audit (gates everything else)
Phase 1 — Package foundation
Phase 2 — Component migration (scope set by Phase 0's audit)
Phase 3 — Guardrail + validation
Evidence gathered (2026-07-11)
apps/ui/package.json: no main/module/exports/types fields; "build": "vite build"; no dist/ present.apps/ui/vite.config.ts: TanStack Start app (tanstackStart, nitro: true forced on for Cloudflare Worker deploy output) — confirmed application shape, not library mode.apps/ui/src/styles.css (1205 lines): the full "Bone & Ink" token system — OKLCH colors, --font-display/sans/mono, layout/spacing tokens, health-status + curation-tier + chart-ramp tokens, wired through Tailwind v4 @theme inline.apps/ui/src/components/ui/: 8 files (Radix-wrapper primitives). apps/ui/src/components/metagraphed/: 136 files incl. charts/ (12), states/ (1), analytics/ (12) — undifferentiated design-system vs. app-logic.- Root
package.json workspaces + package-lock.json confirm npm-workspaces monorepo; packages/client's tsup-based build is the direct precedent for this package's tooling.
Expected end state
packages/ui-kit is a real, CI-built, import-boundary-enforced npm workspace package holding the design system's tokens and presentational components. apps/ui consumes it like any other workspace dependency. Claude Design's /design-sync runs against it in full high-fidelity mode — no fallback, no interim stopgap.
apps/ui(the TanStack Start frontend, folded into this repo 2026-07 via monorepo consolidation) is a product application, not a redistributable package — it's the sole consumer of its own components, so it has no library build: nodist/, nomain/module/exports/typesfields inpackage.json,vite buildbundles the whole SSR app (routes,nitro, Cloudflare Worker output), not a component entry point.That's not a defect — most product frontends never need to be importable libraries. But it became a real blocker while wiring this repo up to Claude Design (claude.ai/design)'s
/design-synctool, which needs exactly that shape (dist/+ per-component.d.ts) to compile a live, importable component bundle the design agent can actually build with. Without it, only a degraded fallback is available: scanningsrc/directly with weaker type contracts, and real friction for any component entangled with app-level context (TanStack Router, React Query) that a standalone bundle doesn't have. An interim, non-live stopgap (raw token + component source files pushed to a Claude Design project, no rendered previews, no live bundle) is in place in the meantime.This epic tracks extracting the actual reusable design-system layer — tokens + presentational components — out of
apps/uiinto a real workspace package,packages/ui-kit, following the existing precedent already in this repo: rootpackage.jsondeclares"workspaces": ["apps/ui", "packages/client", "packages/contract"], andpackages/client(@jsonbored/metagraphed) already builds withtsup --format esm,cjs --dts --dts-resolve --clean --treeshakeand ships propermain/module/types/exports.packages/ui-kitis the same pattern, applied to the frontend's component layer.Value independent of Claude Design: this also enforces a real separation between presentational components and app/business logic — today
apps/ui/src/components/metagraphed/mixes true design-system pieces (chips.tsx,kbd.tsx,panel-shell.tsx,page-section.tsx, chart primitives) with deep product components (subnet-masthead.tsx,validator-nominators-table.tsx,nav-mega-menu.tsx,resource-explorer.tsx) in one undifferentiated 136-file directory, per[design-system-tokens]'s existing rule that UI work must use centralized tokens/primitives, never one-off values — that rule currently has no structural enforcement.Tracked centrally here.
maintainer-only— this is architecture/infra work, not offered through the Gittensor contributor flow.Phase 0 — Audit (gates everything else)
Phase 1 — Package foundation
Phase 2 — Component migration (scope set by Phase 0's audit)
Phase 3 — Guardrail + validation
Evidence gathered (2026-07-11)
apps/ui/package.json: nomain/module/exports/typesfields;"build": "vite build"; nodist/present.apps/ui/vite.config.ts: TanStack Start app (tanstackStart,nitro: trueforced on for Cloudflare Worker deploy output) — confirmed application shape, not library mode.apps/ui/src/styles.css(1205 lines): the full "Bone & Ink" token system — OKLCH colors,--font-display/sans/mono, layout/spacing tokens, health-status + curation-tier + chart-ramp tokens, wired through Tailwind v4@theme inline.apps/ui/src/components/ui/: 8 files (Radix-wrapper primitives).apps/ui/src/components/metagraphed/: 136 files incl.charts/(12),states/(1),analytics/(12) — undifferentiated design-system vs. app-logic.package.jsonworkspaces +package-lock.jsonconfirm npm-workspaces monorepo;packages/client'stsup-based build is the direct precedent for this package's tooling.Expected end state
packages/ui-kitis a real, CI-built, import-boundary-enforced npm workspace package holding the design system's tokens and presentational components.apps/uiconsumes it like any other workspace dependency. Claude Design's/design-syncruns against it in full high-fidelity mode — no fallback, no interim stopgap.