stroblmeandClaude Opus 5
bb90a24b90
The canvas lays itself out: a layered graph, left to right on a desktop and top to bottom on a phone, with room reserved for the value each edge carries. Nodes cannot be dragged and `NodeDef.position` is gone from the document — a graph nobody can arrange is one worth keeping small, which is what keeps flows atomic. Endpoints join the same layout, so their lanes and the localStorage that remembered where they were dragged go too. Mobile, per the new Responsive section of DESIGN-GUIDELINES.md: the dock caps its width and wraps instead of running off the screen, the dashboard stacks into one column rather than shrinking a wall panel to a fifth of its size, and Home stops widening its grid track past the viewport. A Playwright project at a phone's width fails the build when a screen no longer fits. Along the way: publish is the checkmark that was already there rather than a button that appears and disappears, with discard beside it on both the flow and the dashboard; the brain reveals a neuron's name on the first tap; and the port sparklines get room to breathe. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VDSXaRhvqHYNevgDGmNAto
38 lines
1.7 KiB
Markdown
38 lines
1.7 KiB
Markdown
# Design system (Fluksio)
|
|
|
|
`app` (dashboard SPA + API) and `index` (marketing site) are **separate
|
|
repos** that share one visual design. The full, canonical spec — palette,
|
|
radius, elevation, motion, component map, and shell patterns — lives in the
|
|
parent repo's [`DESIGN-GUIDELINES.md`](../DESIGN-GUIDELINES.md). Read it before
|
|
any UI work.
|
|
|
|
## Sync rule (read before touching tokens)
|
|
|
|
The `@theme inline`, `:root`, and `.dark` blocks in `app/frontend/src/index.css`
|
|
and `index/src/index.css` **must be kept byte-identical**, and
|
|
`frontend/src/lib/motion.ts` is duplicated verbatim. Any palette / radius /
|
|
elevation / motion-token change is made in *both* repos in the same change.
|
|
There is intentionally no shared npm package — the duplicated blocks are the
|
|
sync point. Components (`src/components/ui/*`) are copied per repo (the shadcn
|
|
model) and may diverge; only the tokens and motion presets must match.
|
|
|
|
Both repos share `components.json`: style `new-york`, `cssVariables: true`,
|
|
icon library `lucide`.
|
|
|
|
Verify with `make design-check` from the workspace root.
|
|
|
|
## Shell
|
|
|
|
The authenticated area is a `bg-card` region (`SidebarProvider`) with a floating
|
|
translucent `AppSidebar` (`variant="floating"`, `bg-card/80 backdrop-blur-md`).
|
|
The flow editor floats its chrome over a full-bleed node canvas using the same
|
|
frosted-surface model. See DESIGN-GUIDELINES.md → Shells and → Overlay surfaces
|
|
& content chips.
|
|
|
|
## Mobile
|
|
|
|
One breakpoint, `md` (768px), and a phone inspects rather than arranges: no
|
|
dragging, no placing, no resizing. The rules that keep it that way — and the
|
|
"nothing scrolls horizontally" check that enforces them — are in
|
|
DESIGN-GUIDELINES.md → Responsive.
|