Selective style import flow

[kmcginnes]

Destination

A selective style import flow — previewing incoming styles (node and edge), surfacing conflicts with existing shared styles, and letting users choose which to import — designed through prototype mockups and shipped as a feature. Replaces the current all-or-nothing conflict dialog.

Notes

• Domain: styles sidebar, shared styles, user customizations (Source×Scope model from [[user-default-styles-slices]])
• Skills: /prototype for UI exploration, /grilling for interaction details, /react-guidelines for implementation
• Standing preference: preview shows the incoming style, not the existing one. Existing style conflict is signaled by badge, not side-by-side diff.
• Edge preview = two placeholder nodes (labelled "source"/"target") connected by the styled edge, with the edge type as the edge label. Includes line color, thickness, dash, arrows, and label styling.
• Selection: all checked by default, select/deselect all button, conflict types get yellow/red badge indicating overwrite
• Per-type toggle to clear user customization on import (off by default)
• Container (modal vs full-screen) is unknown — needs prototype discovery

Decisions so far

• Current import flow: document the existing code path — Storage is already per-type (Map<Type, Style>), the merge helper does per-type upsert, and no schema changes are needed for selective import. The conflict detection already carries per-type granularity. No edge preview exists today.
• Conflict detection and override semantics — Full entry replacement on conflict (no field merge). "Clear customizations" deletes the entire user entry for that type. Empty entries silently excluded from the list.
• Edge preview component design — Two modes: full horizontal preview with nodes+label (for edge style dialog), compact diagonal preview in a 64×48 box (for import rows). SVG rendering, cytoscape-proportional arrow formula, zoom=1 for compact / scale=2 for full. VertexPreview extracted as reusable.

Not yet specified

• Implementation plan: once design is locked, break the feature into implementable tasks with blocking order
• Edge preview component architecture: whether it's reusable beyond this flow (e.g., in the style dialog itself)
• How to handle malformed or incomplete style files (validation, partial import)
• Animation / transition behavior when toggling selections

Out of scope

• Future import sources (shared library, network sync) — design for file import; don't paint into a corner, but don't solve generalization now
• Redesigning the export flow
• Changing the Source×Scope storage model itself

---

Important

Internal only — this issue is maintained by the core team and is not accepting external contributions.