stroblmeandClaude Opus 5
39ee0e0aa5
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
1.7 KiB
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. 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.