feat: Phase 4 - board templates, auto-backup, version history

- BoardTemplate type and storage CRUD (save/list/delete templates)
- createBoardFromTemplate factory function
- "Save as Template" in board card context menu
- User templates shown in NewBoardDialog with delete option
- Auto-backup on save with 5-minute throttle, 10 backup retention
- VersionHistoryDialog with backup list and restore confirmation
- Version History accessible from board settings dropdown

src/components/boards/BoardCard.tsx

@@ -1,8 +1,10 @@
 import { useState } from "react";
 import { formatDistanceToNow } from "date-fns";
 import { motion, useReducedMotion } from "framer-motion";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { fadeSlideUp, springs, subtleHover } from "@/lib/motion";
-import { Trash2, Copy } from "lucide-react";
+import { Trash2, Copy, FileDown, FileSpreadsheet, Bookmark } from "lucide-react";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -23,15 +25,30 @@ import type { BoardMeta } from "@/types/board";
 import { useAppStore } from "@/stores/app-store";
 import { useBoardStore } from "@/stores/board-store";
 import { useToastStore } from "@/stores/toast-store";
-import { deleteBoard, loadBoard, saveBoard } from "@/lib/storage";
+import { deleteBoard, loadBoard, saveBoard, saveTemplate } from "@/lib/storage";
+import { exportBoardAsJson, exportBoardAsCsv } from "@/lib/import-export";
+import type { BoardTemplate } from "@/types/template";
 
 interface BoardCardProps {
   board: BoardMeta;
+  sortable?: boolean;
 }
 
-export function BoardCard({ board }: BoardCardProps) {
+export function BoardCard({ board, sortable = false }: BoardCardProps) {
   const [confirmDelete, setConfirmDelete] = useState(false);
   const prefersReducedMotion = useReducedMotion();
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: board.id,
+    disabled: !sortable,
+  });
   const addToast = useToastStore((s) => s.addToast);
 
   const setView = useAppStore((s) => s.setView);
@@ -72,14 +89,95 @@ export function BoardCard({ board }: BoardCardProps) {
     addToast(`"${board.title}" duplicated`, "success");
   }
 
+  function downloadBlob(content: string, filename: string, mimeType: string) {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  async function handleExportJson() {
+    const full = await loadBoard(board.id);
+    const json = exportBoardAsJson(full);
+    const safeName = board.title.replace(/[^a-zA-Z0-9-_]/g, "_");
+    downloadBlob(json, `${safeName}.json`, "application/json");
+    addToast("Board exported as JSON", "success");
+  }
+
+  async function handleExportCsv() {
+    const full = await loadBoard(board.id);
+    const csv = exportBoardAsCsv(full);
+    const safeName = board.title.replace(/[^a-zA-Z0-9-_]/g, "_");
+    downloadBlob(csv, `${safeName}.csv`, "text/csv");
+    addToast("Board exported as CSV", "success");
+  }
+
+  async function handleSaveAsTemplate() {
+    const full = await loadBoard(board.id);
+    const { ulid } = await import("ulid");
+    const template: BoardTemplate = {
+      id: ulid(),
+      name: full.title,
+      color: full.color,
+      columns: full.columns.map((c) => ({
+        title: c.title,
+        width: c.width,
+        color: c.color,
+        wipLimit: c.wipLimit,
+      })),
+      labels: full.labels,
+      settings: full.settings,
+    };
+    await saveTemplate(template);
+    addToast(`Template "${full.title}" saved`, "success");
+  }
+
+  if (isDragging) {
+    return (
+      <div
+        ref={setNodeRef}
+        style={{
+          transform: CSS.Transform.toString(transform),
+          transition,
+        }}
+        className="relative"
+        {...attributes}
+        {...listeners}
+      >
+        {/* Invisible clone to maintain grid row height */}
+        <div className="invisible flex flex-col rounded-lg p-4">
+          <div className="h-1" />
+          <div className="flex flex-col gap-2">
+            <h3 className="font-heading text-lg">&nbsp;</h3>
+            <p className="font-mono text-xs">&nbsp;</p>
+            <p className="font-mono text-xs">&nbsp;</p>
+          </div>
+        </div>
+        <div className="absolute -left-2 top-0 bottom-0 w-[3px] rounded-full bg-pylon-accent shadow-[0_0_6px_var(--pylon-accent),0_0_14px_var(--pylon-accent)]" />
+      </div>
+    );
+  }
+
   return (
     <motion.div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
       variants={fadeSlideUp}
       initial={prefersReducedMotion ? false : "hidden"}
       animate="visible"
       transition={springs.bouncy}
       whileHover={subtleHover.hover}
       whileTap={subtleHover.tap}
+      {...attributes}
+      {...(sortable ? listeners : {})}
     >
       <ContextMenu>
         <ContextMenuTrigger asChild>
@@ -118,6 +216,19 @@ export function BoardCard({ board }: BoardCardProps) {
             <Copy className="size-4" />
             Duplicate
           </ContextMenuItem>
+          <ContextMenuItem onClick={handleSaveAsTemplate}>
+            <Bookmark className="size-4" />
+            Save as Template
+          </ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={handleExportJson}>
+            <FileDown className="size-4" />
+            Export as JSON
+          </ContextMenuItem>
+          <ContextMenuItem onClick={handleExportCsv}>
+            <FileSpreadsheet className="size-4" />
+            Export as CSV
+          </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem
             variant="destructive"