feat: add two-panel card detail modal with markdown, checklist, labels, dates, attachments

- CardDetailModal: two-panel layout (60/40) with inline title editing
- MarkdownEditor: edit/preview toggle with react-markdown + remark-gfm
- ChecklistSection: add/toggle/edit/delete items with progress counter
- LabelPicker: toggle labels + create new labels with color swatches
- DueDatePicker: date input with relative time and overdue styling
- AttachmentSection: list with remove, placeholder add button
- Wired into BoardView via selectedCardId state

src/components/card-detail/MarkdownEditor.tsx

@@ -0,0 +1,121 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Button } from "@/components/ui/button";
+import { useBoardStore } from "@/stores/board-store";
+
+interface MarkdownEditorProps {
+  cardId: string;
+  value: string;
+}
+
+export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
+  const [mode, setMode] = useState<"edit" | "preview">("preview");
+  const [draft, setDraft] = useState(value);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const updateCard = useBoardStore((s) => s.updateCard);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Sync draft when value changes externally (e.g. undo)
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  // Auto-focus textarea when switching to edit mode
+  useEffect(() => {
+    if (mode === "edit" && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [mode]);
+
+  const save = useCallback(
+    (text: string) => {
+      if (text !== value) {
+        updateCard(cardId, { description: text });
+      }
+    },
+    [cardId, value, updateCard]
+  );
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const text = e.target.value;
+    setDraft(text);
+
+    // Debounced auto-save
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      save(text);
+    }, 300);
+  }
+
+  function handleBlur() {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    save(draft);
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Mode toggle */}
+      <div className="flex gap-1">
+        <Button
+          variant={mode === "edit" ? "secondary" : "ghost"}
+          size="xs"
+          onClick={() => setMode("edit")}
+          className="font-mono text-xs"
+        >
+          Edit
+        </Button>
+        <Button
+          variant={mode === "preview" ? "secondary" : "ghost"}
+          size="xs"
+          onClick={() => {
+            // Save before switching to preview
+            if (mode === "edit") {
+              if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+                debounceRef.current = null;
+              }
+              save(draft);
+            }
+            setMode("preview");
+          }}
+          className="font-mono text-xs"
+        >
+          Preview
+        </Button>
+      </div>
+
+      {/* Editor / Preview */}
+      {mode === "edit" ? (
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder="Add a description... (Markdown supported)"
+          className="min-h-[200px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
+        />
+      ) : (
+        <div
+          className="min-h-[200px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
+          onClick={() => setMode("edit")}
+        >
+          {draft ? (
+            <div className="prose prose-sm max-w-none text-pylon-text prose-headings:text-pylon-text prose-p:text-pylon-text prose-strong:text-pylon-text prose-a:text-pylon-accent prose-code:rounded prose-code:bg-pylon-column prose-code:px-1 prose-code:py-0.5 prose-code:text-pylon-text prose-pre:bg-pylon-column prose-pre:text-pylon-text">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {draft}
+              </ReactMarkdown>
+            </div>
+          ) : (
+            <p className="text-sm italic text-pylon-text-secondary/60">
+              Click to add a description...
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}