feat(canvas): raise switch port cap to 64, add port numbers and fibre edge type

Issue #20: bump MAX_BOTTOM_HANDLES 48 -> 64 (covers 48+4 SFP switches) and add
a per-node "Show Port Numbers" toggle that labels each bottom connection point.

Issue #21: add `fibre` as a first-class edge/connection type (bright cyan with a
subtle glow) alongside ethernet/wifi/iot/vlan/virtual/cluster - selectable in the
edge modal, themeable, registered in the React Flow edgeTypes registry, and
round-tripped through YAML import/export.

Backport of homelable-hacs PR #23.

ha-relevant: yes

frontend/src/components/modals/CustomStyleModal.tsx

@@ -26,7 +26,7 @@ const EDITABLE_NODE_TYPES: NodeType[] = [
   'generic',
 ]
 
-const EDITABLE_EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster']
+const EDITABLE_EDGE_TYPES: EdgeType[] = ['ethernet', 'wifi', 'iot', 'vlan', 'virtual', 'cluster', 'fibre']
 
 const NODE_ICONS: Record<string, LucideIcon> = {
   isp: Globe, router: Router, firewall: Flame, switch: Network, server: Server, proxmox: Layers,

frontend/src/components/modals/NodeModal.tsx

@@ -513,6 +513,27 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   <span>{MIN_BOTTOM_HANDLES}</span>
                   <span>{MAX_BOTTOM_HANDLES}</span>
                 </div>
+                <div className="flex items-center justify-between pt-1">
+                  <div className="flex flex-col gap-0.5">
+                    <Label className="text-xs text-muted-foreground">Show Port Numbers</Label>
+                    <span className="text-[10px] text-muted-foreground/60">Label each bottom connection point</span>
+                  </div>
+                  <button
+                    type="button"
+                    role="switch"
+                    aria-checked={!!form.show_port_numbers}
+                    onClick={() => set('show_port_numbers', !form.show_port_numbers)}
+                    className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none ${modalStyles['modal-interactive']}`}
+                    tabIndex={0}
+                    aria-label="Toggle port numbers"
+                    style={{ background: form.show_port_numbers ? '#ff6e00' : '#30363d' }}
+                  >
+                    <span
+                      className="pointer-events-none absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-all"
+                      style={{ left: form.show_port_numbers ? 'calc(100% - 18px)' : '2px' }}
+                    />
+                  </button>
+                </div>
               </div>
             )}
 

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

@@ -59,6 +59,13 @@ describe('EdgeModal', () => {
     expect(onSubmit.mock.calls[0][0].label).toBeUndefined()
   })
 
+  it('round-trips the fibre type through submit (issue #21)', () => {
+    const onSubmit = vi.fn()
+    render(<EdgeModal open onClose={vi.fn()} onSubmit={onSubmit} initial={{ type: 'fibre' }} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Connect' }))
+    expect(onSubmit.mock.calls[0][0].type).toBe('fibre')
+  })
+
   // ── VLAN ID field ─────────────────────────────────────────────────────────
 
   it('does not show VLAN ID field for ethernet type', () => {

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

@@ -416,20 +416,30 @@ describe('NodeModal', () => {
     expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).bottom_handles).toBe(12)
   })
 
-  it('supports the full 1..48 range', () => {
+  it('supports the full 1..64 range (issue #20)', () => {
     const { onSubmit } = renderModal({ initial: BASE })
     const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
     expect(slider.min).toBe('1')
-    expect(slider.max).toBe('48')
-    fireEvent.change(slider, { target: { value: '48' } })
+    expect(slider.max).toBe('64')
+    fireEvent.change(slider, { target: { value: '52' } })
     fireEvent.click(screen.getByRole('button', { name: 'Add' }))
-    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).bottom_handles).toBe(48)
+    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).bottom_handles).toBe(52)
   })
 
-  it('clamps pre-filled out-of-range values into [1,48]', () => {
+  it('clamps pre-filled out-of-range values into [1,64]', () => {
     renderModal({ initial: { ...BASE, bottom_handles: 9999 } })
     const slider = screen.getByLabelText('Bottom connection points slider') as HTMLInputElement
-    expect(slider.value).toBe('48')
+    expect(slider.value).toBe('64')
+  })
+
+  it('toggles show_port_numbers and submits it (issue #20)', () => {
+    const { onSubmit } = renderModal({ initial: BASE })
+    const toggle = screen.getByLabelText('Toggle port numbers')
+    expect(toggle.getAttribute('aria-checked')).toBe('false')
+    fireEvent.click(toggle)
+    expect(toggle.getAttribute('aria-checked')).toBe('true')
+    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
+    expect((onSubmit.mock.calls[0][0] as Partial<NodeData>).show_port_numbers).toBe(true)
   })
 
   // ── Zigbee nodes ──────────────────────────────────────────────────────