From 07509c62bd35c1f7a6cc77d77c87027a42c8b644 Mon Sep 17 00:00:00 2001 From: sb-iam <59984144+sb-iam@users.noreply.github.com> Date: Sat, 27 Jun 2026 19:48:05 -0700 Subject: [PATCH] docs(graph): record the shadcn/ruixen component convention UI composes from the ruixen registry (npx shadcn add ruixen.com/r/[component]) via @/components/ui/* + design tokens; only the SVG canvas is bespoke. Co-Authored-By: Claude Opus 4.8 --- docs/graph.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/graph.md b/docs/graph.md index f9c404d..31a254e 100644 --- a/docs/graph.md +++ b/docs/graph.md @@ -86,3 +86,13 @@ Additive routes in `backend/src/server.ts` (shared file — additive only). 1. Serve `createDemoPodGraph()` from the route (demo-stable, no DB dependency on the demo path). 2. `pnpm graph:seed` writes the same graph into Mongo so `$graphLookup` is real, not a mock. 3. Swap `loadPodGraph` to read live `team_model.graph` once the ingest pipeline populates it. + +## Component convention + +UI is built from the shared **shadcn / ruixen** registry — add primitives with +`npx shadcn@latest add "https://ruixen.com/r/[component]"` and compose from +`@/components/ui/*` (`Button`, `Badge`, `Card`, …) using the design tokens +(`var(--card)` / `--foreground` / `--border` / …). Only the SVG node-link **canvas** +in `GraphView.tsx` is bespoke (3 SVG-only CSS rules); the chrome (header, toggles, +metric cards, detail panel, legend) is composed from the primitives + the app's +Tailwind utility patterns. No hand-rolled component stylesheets.