feat: shortcut from node Appearance to canvas-wide type style

Adds a link under the colour swatches in the add/edit node modal that opens the
Custom Style editor with the node's type preselected, so a user can edit the
style for every node of that type without navigating Style -> Customize -> pick
type manually.

- CustomStyleModal: new optional `initialNodeType` prop; when set, the modal
  opens straight into that node type's editor instead of the empty placeholder.
- NodeModal: new optional `onEditTypeStyle(type)` prop renders the shortcut link
  (hidden for group/groupRect and when no handler is wired).
- App: `styleEditorType` state; both Add and Edit NodeModals forward the handler,
  and a standalone CustomStyleModal instance opens preselected (stacked over the
  node modal so in-progress node edits are preserved).

ha-relevant: yes

frontend/src/components/modals/CustomStyleModal.tsx

@@ -300,9 +300,11 @@ type Selection = { kind: 'node'; type: NodeType } | { kind: 'edge'; type: EdgeTy
 interface CustomStyleModalProps {
   open: boolean
   onClose: () => void
+  /** When opening, preselect this node type's editor (shortcut from NodeModal). */
+  initialNodeType?: NodeType
 }
 
-export function CustomStyleModal({ open, onClose }: CustomStyleModalProps) {
+export function CustomStyleModal({ open, onClose, initialNodeType }: CustomStyleModalProps) {
   const { customStyle, setCustomStyle } = useThemeStore()
   const { markUnsaved, applyTypeNodeStyle, applyTypeEdgeStyle, applyAllCustomStyles } = useCanvasStore()
 
@@ -320,7 +322,12 @@ export function CustomStyleModal({ open, onClose }: CustomStyleModalProps) {
   useEffect(() => {
     if (open) {
       setDraft({ nodes: { ...customStyle.nodes }, edges: { ...customStyle.edges } })
-      setSelection(null)
+      if (initialNodeType) {
+        setTab('nodes')
+        setSelection({ kind: 'node', type: initialNodeType })
+      } else {
+        setSelection(null)
+      }
     }
     // Intentional snapshot-on-open: we don't want live customStyle changes to
     // clobber an in-progress edit, only a fresh open should reset.

frontend/src/components/modals/NodeModal.tsx

@@ -1,6 +1,6 @@
 import { Fragment, createElement, useState } from 'react'
 import modalStyles from './modal-interactive.module.css'
-import { RotateCcw, ChevronDown } from 'lucide-react'
+import { RotateCcw, ChevronDown, Palette } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -132,11 +132,13 @@ interface NodeModalProps {
   title?: string
   parentCandidates?: ParentCandidate[]
   currentNodeId?: string
+  /** Shortcut: open the Custom Style editor for this node's type (canvas-wide). */
+  onEditTypeStyle?: (type: NodeType) => void
 }
 
 // NodeModal is always mounted with a key that changes on open/edit, so useState
 // initial value is enough - no need for a reset effect.
-export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', parentCandidates = [], currentNodeId }: NodeModalProps) {
+export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', parentCandidates = [], currentNodeId, onEditTypeStyle }: NodeModalProps) {
   const merged = { ...DEFAULT_DATA, ...initial }
   if (MESH_TYPES.includes((merged.type ?? '') as NodeType)) merged.check_method = 'none'
   const [form, setForm] = useState<Partial<NodeData>>(merged)
@@ -611,6 +613,15 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   <p className="text-[10px] text-muted-foreground/50">Using default colors for {NODE_TYPE_LABELS[form.type ?? 'generic']}. Click a swatch to customize.</p>
                 )}
               </div>
+              {onEditTypeStyle && form.type !== 'group' && form.type !== 'groupRect' && (
+                <button
+                  type="button"
+                  onClick={() => onEditTypeStyle((form.type ?? 'generic') as NodeType)}
+                  className="flex items-center gap-1 self-start text-[10px] text-[#00d4ff] hover:underline"
+                >
+                  <Palette size={10} /> Edit {NODE_TYPE_LABELS[form.type ?? 'generic']} style for all nodes on the canvas
+                </button>
+              )}
             </div>
 
             {/* Connection points per side (not for group containers) */}

frontend/src/components/modals/__tests__/CustomStyleModal.test.tsx

@@ -54,6 +54,13 @@ describe('CustomStyleModal', () => {
     expect(screen.getByText('Default size')).toBeDefined()
   })
 
+  it('initialNodeType preselects that type editor on open (NodeModal shortcut)', () => {
+    render(<CustomStyleModal open initialNodeType="switch" onClose={vi.fn()} />)
+    // Editor for Switch is shown immediately, no manual selection needed.
+    expect(screen.getByText(/Apply to existing Switch/)).toBeDefined()
+    expect(screen.queryByText(/Select a node type/)).toBeNull()
+  })
+
   it('selecting an edge type opens the edge editor with path style buttons', () => {
     render(<CustomStyleModal open onClose={vi.fn()} />)
     fireEvent.click(screen.getByRole('button', { name: 'Edges' }))

frontend/src/components/modals/__tests__/NodeModal.test.tsx

@@ -105,6 +105,21 @@ describe('NodeModal', () => {
     confirmSpy.mockRestore()
   })
 
+  // ── Custom-style shortcut ─────────────────────────────────────────────
+
+  it('shows the type-style shortcut and calls onEditTypeStyle with the node type', () => {
+    const onEditTypeStyle = vi.fn()
+    renderModal({ initial: BASE, onEditTypeStyle })
+    const link = screen.getByRole('button', { name: /style for all nodes on the canvas/i })
+    fireEvent.click(link)
+    expect(onEditTypeStyle).toHaveBeenCalledWith('server')
+  })
+
+  it('omits the shortcut when onEditTypeStyle is not provided', () => {
+    renderModal({ initial: BASE })
+    expect(screen.queryByText(/style for all nodes on the canvas/i)).toBeNull()
+  })
+
   // ── Label validation ──────────────────────────────────────────────────
 
   it('blocks submit and shows error when label is empty', () => {