feat: create a new canvas by copying an existing one

Add a 'Copy from existing' option to the New Canvas modal. It lists every
canvas with node/group/text counts; picking one deep-copies its nodes, edges,
parent/child links and canvas state (viewport, custom style, floor plan) into
a fresh design.

Backend: POST /designs/{source_id}/copy remaps node ids, re-points edges and
parent links, and clones canvas state; GET /designs now returns per-design
counts for the picker. Standalone mode clones the localStorage canvas.

Closes #216

ha-relevant: maybe

frontend/src/components/modals/DesignModal.tsx

@@ -3,8 +3,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
-import { DESIGN_ICONS, DEFAULT_DESIGN_ICON } from '@/utils/designIcons'
-import type { FloorMapConfig } from '@/types'
+import { DESIGN_ICONS, DEFAULT_DESIGN_ICON, resolveDesignIcon } from '@/utils/designIcons'
+import type { Design, FloorMapConfig } from '@/types'
 
 export interface DesignFormData {
   name: string
@@ -15,6 +15,11 @@ export interface DesignFormData {
    * plan"; `undefined` means "leave it untouched".
    */
   floorMap?: FloorMapConfig | null
+  /**
+   * When set, create the new canvas by deep-copying this existing design instead
+   * of starting blank. Only offered in create mode with `sourceDesigns` present.
+   */
+  sourceId?: string
 }
 
 interface DesignModalProps {
@@ -34,6 +39,11 @@ interface DesignModalProps {
    * base64. Rejects on failure (caller surfaces the error).
    */
   onUploadImage?: (file: File) => Promise<string>
+  /**
+   * Existing designs offered as a copy source (create mode only). When non-empty,
+   * a "Copy from existing" option appears; choosing it clones the picked canvas.
+   */
+  sourceDesigns?: Design[]
 }
 
 export function DesignModal({
@@ -46,10 +56,16 @@ export function DesignModal({
   showFloorMap = false,
   initialFloorMap = null,
   onUploadImage,
+  sourceDesigns = [],
 }: DesignModalProps) {
   const [name, setName] = useState(initial?.name ?? '')
   const [icon, setIcon] = useState(initial?.icon ?? DEFAULT_DESIGN_ICON)
 
+  // "Copy from existing" is create-mode only (no floor-plan section shown).
+  const canCopy = !showFloorMap && sourceDesigns.length > 0
+  const [fromExisting, setFromExisting] = useState(false)
+  const [sourceId, setSourceId] = useState<string>(sourceDesigns[0]?.id ?? '')
+
   // Floor plan state (only used when showFloorMap)
   const [imageData, setImageData] = useState(initialFloorMap?.imageData ?? '')
   const [width, setWidth] = useState(initialFloorMap?.width ?? 800)
@@ -85,7 +101,11 @@ export function DesignModal({
   const handleSubmit = () => {
     const trimmed = name.trim()
     if (!trimmed) return
+    if (canCopy && fromExisting && !sourceId) return
     const data: DesignFormData = { name: trimmed, icon }
+    if (canCopy && fromExisting && sourceId) {
+      data.sourceId = sourceId
+    }
     if (showFloorMap) {
       data.floorMap = imageData
         ? {
@@ -153,6 +173,68 @@ export function DesignModal({
             </div>
           </div>
 
+          {canCopy && (
+            <div className="space-y-2 pt-2 border-t border-border">
+              <div className="grid grid-cols-2 gap-1.5">
+                <button
+                  type="button"
+                  aria-pressed={!fromExisting}
+                  onClick={() => setFromExisting(false)}
+                  className={`text-xs rounded-md border py-2 transition-colors cursor-pointer ${
+                    !fromExisting
+                      ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]'
+                      : 'border-border text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  Blank canvas
+                </button>
+                <button
+                  type="button"
+                  aria-pressed={fromExisting}
+                  onClick={() => setFromExisting(true)}
+                  className={`text-xs rounded-md border py-2 transition-colors cursor-pointer ${
+                    fromExisting
+                      ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]'
+                      : 'border-border text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  Copy from existing
+                </button>
+              </div>
+
+              {fromExisting && (
+                <div className="space-y-1 max-h-48 overflow-y-auto pr-1" role="radiogroup" aria-label="Source canvas">
+                  {sourceDesigns.map((d) => {
+                    const Icon = resolveDesignIcon(d.icon)
+                    const selected = d.id === sourceId
+                    return (
+                      <button
+                        key={d.id}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        onClick={() => setSourceId(d.id)}
+                        className={`w-full flex items-center gap-2.5 rounded-md border px-2.5 py-2 text-left transition-colors cursor-pointer ${
+                          selected
+                            ? 'border-[#00d4ff] bg-[#00d4ff]/10'
+                            : 'border-border hover:border-[#30363d]'
+                        }`}
+                      >
+                        <Icon size={16} className={selected ? 'text-[#00d4ff]' : 'text-muted-foreground'} />
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate text-sm">{d.name}</div>
+                          <div className="text-xs text-muted-foreground">
+                            {d.node_count ?? 0} nodes · {d.group_count ?? 0} groups · {d.text_count ?? 0} text
+                          </div>
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
           {showFloorMap && (
             <div className="space-y-2 pt-2 border-t border-border">
               <Label>Floor Plan</Label>