Visual styles: one-button style presets with export parity#8
Merged
Conversation
Add 8 visual styles (Classic, Aurora, Atlas, Synthwave, Parchment, Bauhaus, Sumi, Blueprint) selectable from a single "Style" popover above the preview. A style is a presentation theme layered on the user's own choices: it sets the canvas background, an optional decorative frame, the connector treatment (glow / endpoint dots / dash / line cap) and a default font. It never overrides the user's palette, connector geometry, thickness or opacity; the default font applies only to lines still on the app default so an explicit per-line font wins. A single catalog (src/lib/domain/styles.ts) drives both the live preview and the standalone SVG exporter, so PNG/SVG/PDF/HTML output matches the editor. The style persists in the share URL (compact `st`, omitted for Classic to keep old links valid). Deferred (need different geometry / break export+interaction parity): ribbon/taper connectors, particles, textured backgrounds, link animation, and the historical art-fonts styles. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Address review feedback on the visual styles: - Aurora/Synthwave now glow the text, not just the connectors (preview CSS drop-shadow; portable outline halo in export). - Bauhaus rebuilt to match the mockup: correct yellow field, linked words render as solid colored cards with a hard offset shadow, thick dark ink connectors (palette no longer colors the links), big endpoint dots. - Sumi gets brush-ink ribbon connectors (variable-width taper) and the Spectral serif; ribbon geometry is shared by preview and export. - Blueprint connectors are dashed. - The "Created with…" credit now adopts each style (color, italic/caps). - Connectors can override the palette color with a style ink color. Style-bundled palettes: 7 new palettes (neon, sunset, primary, jewel, earth, ink, cyan). Picking a style applies its palette and recolors existing links; all palettes are also selectable on their own in the colors tab and round-trip through the share URL. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Remove the `earth` palette (near-duplicate of `jewel`); Atlas now uses `jewel`. - Sumi ribbon width now scales with the user's line thickness (width = thickness × ribbonScale) instead of a constant, so thickness stays editable. - Bauhaus: word-card hover/selection feedback restored (an accent outline, since chips set their own background/shadow); connector endpoints meet the card edge (no gap) and links are drawn under the cards in both preview (z-index) and export (draw order). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Each style swatch now renders its own treatment instead of a shared red curve: palette-derived colors, the connector's cap/dash/glow/ink color, ribbon brush (Sumi), endpoint dots, text glow (Aurora/Synthwave) and Bauhaus word cards with the link tucked underneath. Layout tidied. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Separate the connector's visual from its hit target. A dedicated hit layer draws a wide transparent stroke along each connector centerline, always on top, so links are easy to grab and stay clickable in every style: - Sumi's filled ribbon (previously only stroke was hittable). - Bauhaus links drawn under the word cards (previously the card layer swallowed the pointer events). - Thin lines in all styles now have a generous, thickness-aware hit width. LinkPath is now purely visual (pointer-events: none); hover state is driven by the hit layer. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Replace the Bauhaus chip hover/selection outline (which clashed with the offset shadow) with a brutalist press: the card sinks into its own shadow. - Thin the Sumi ribbon (design scale 8 → 6); the user line-thickness param still applies on top. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Preview: - Bauhaus links are thicker by default (widthScale) and lose the endpoint dots; thickness stays user-editable. - Sumi ribbon is slimmer for elegance. Export: - Glow is now a real Gaussian blur (feGaussianBlur) for both lines and text, matching the preview's soft halo instead of a hard outline. - Decorative frames wrap the whole canvas, so the attribution credit sits inside the frame as it does in the preview; credit position is also brought closer to its preview placement. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
When a style supplies a default font, a line still on the app default was
rendered in the style font but the Typeface dropdown showed "Inter". The
dropdown now shows the effective font with a hint ("From the <style> style —
pick a typeface to override"). Add Spectral and Sora to the font picker so
those style defaults are selectable/displayable.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… tweaks - Style picker trigger is now a real flowbite Button, so it matches the sibling toolbar buttons (same height, border, no stray shadow). - Export credit adopts the per-style treatment (uppercase + tracking for Bauhaus, italic for serif styles) and sits with preview-like spacing above the bottom edge / inside the frame. - Synthwave default font is Space Grotesk. - Sumi ribbon slimmed a bit more. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds visual style presets to the aligner: a presentation theme layered on top of the user's own choices, switchable with a single Style button above the preview. The whole point is shareable diagrams that look distinct and polished, not just functional.
A style controls the canvas (background, optional decorative frame), the connector treatment (mode, glow, endpoint dots, dash, line cap, ink color), token treatment (text glow, Bauhaus word cards), a default font, and a matching palette. It never overrides the user's connector geometry (straight/curved), thickness or opacity; the default font applies only to lines still on the app default, so explicit per-line choices win.
A single catalog (
src/lib/domain/styles.ts) drives both the live preview and the standalone SVG exporter, so PNG / SVG / PDF / HTML output matches the editor. The style persists in the share URL (compactst, omitted for Classic → old links stay valid).What's included
Notes / follow-ups
Testing
npm run checkclean, lint clean, 92 tests pass. Preview and PNG exports verified across styles (ribbon, cards, glow, framed credit) via Playwright.🤖 Generated with Claude Code