Selective style load modal — cards and selection

[kmcginnes]

Parent

• Selective style import modal #1970

What to build

A new modules/StyleImport/ module containing the selective style load modal. When the user picks a styles file and it parses successfully, a Dialog opens showing every actionable style as a before→after card. Each card has a checkbox; the user checks the styles they want and clicks "Load N selected" to write them directly to user style atoms.

The modal is triggered by a new "Load" button added to the Styles sidebar panel header (alongside the existing gear icon — cleanup of the old UI happens later).

Node cards use the existing vertex preview component. Edge cards use a placeholder (the real edge preview from #1934 will be swapped in once that ticket lands).

Identical styles (where incoming resolved style matches the existing resolved style) are excluded from the list entirely.

Key behaviors

• File pick → parse → on error: AlertDialog (same error states as the existing LoadStylesButton) → on success: modal opens
• Modal uses Dialog (overlay-dismissable), widened via className
• Header shows the filename
• Card grid with responsive columns (container queries: 3 → 2 → 1)
• Each card: before→after layout (Current/Default on left, Incoming on right, arrow between)
• Node preview: shape + icon only, monospace type name below
• Edge preview: placeholder for now
• Node label settings (displayName, description, typeOverride) shown as list lines; unset values omitted
• Per-card checkbox; entire card is a click target; selected cards get a ring, deselected dim
• All types start selected
• Footer: "N of M selected · X nodes, Y edges"
• "Load N selected" button (disabled at 0): writes checked styles to userVertexStylesAtom/userEdgeStylesAtom, closes modal, shows success toast
• Cancel / Esc / overlay-click / ✕ all dismiss

Acceptance criteria

• New modules/StyleImport/ module exists
• Load button appears in Styles sidebar panel header and triggers the file picker
• Invalid/wrong-kind/empty files show appropriate AlertDialogs before the modal opens
• Modal opens for valid files with all actionable types shown as cards
• Identical resolved styles are excluded from the card list
• Before→after preview renders correctly for node types (edge types show placeholder)
• Checkboxes control selection; card is a click target for its checkbox
• Footer summary updates live with selection count
• "Load N selected" writes only the selected styles to user atoms (full-type replacement)
• Modal closes and success toast appears after load
• Responsive columns adapt to container width
• No lint, type, or formatting errors
• Tests cover: apply logic (selected styles written to correct atoms), conflict/identical detection, resolved-style equality check

Related Issues

• Faithful edge preview matching the canvas #1934 — blocks real edge previews; placeholder used until then

Blocked by

• None — can start immediately (edge preview uses placeholder)

---

Important

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