feat: add template flows for common mobile app patterns

src/Drawd.jsx

@@ -19,6 +19,7 @@ import { useFileActions } from "./hooks/useFileActions";
 import { useCollabSync } from "./hooks/useCollabSync";
 import { useInteractionCallbacks } from "./hooks/useInteractionCallbacks";
 import { useDerivedCanvasState } from "./hooks/useDerivedCanvasState";
+import { useTemplateInserter } from "./hooks/useTemplateInserter";
 import { TopBar } from "./components/TopBar";
 import { Sidebar } from "./components/Sidebar";
 import { StickyNoteSidebar } from "./components/StickyNoteSidebar";
@@ -158,6 +159,18 @@ export default function Drawd({ initialRoomCode }) {
   const [renameModal, setRenameModal] = useState(null);
   const [showShortcuts, setShowShortcuts] = useState(false);
   const [formSummaryScreen, setFormSummaryScreen] = useState(null);
+  const [showTemplateBrowser, setShowTemplateBrowser] = useState(false);
+
+  // ── Template inserter ─────────────────────────────────────────────────
+  const { insertTemplate } = useTemplateInserter({
+    screens, mergeAll, replaceAll, pan, zoom, canvasRef,
+  });
+
+  const onTemplates = useCallback(() => setShowTemplateBrowser(true), []);
+  const onInsertTemplate = useCallback((data) => {
+    insertTemplate(data);
+    setShowTemplateBrowser(false);
+  }, [insertTemplate]);
 
   // ── Instruction generation ─────────────────────────────────────────────
   const { instructions, showInstructions, setShowInstructions, onGenerate, buildInstructionResult } =
@@ -315,6 +328,7 @@ export default function Drawd({ initialRoomCode }) {
     selectedScreenGroup, setSelectedScreenGroup, deleteScreenGroup,
     undo, redo, saveNow, isFileSystemSupported, onSaveAs, onExport, onOpen,
     setActiveTool,
+    onTemplates,
     isReadOnly,
   });
 
@@ -379,6 +393,7 @@ export default function Drawd({ initialRoomCode }) {
         ) : null}
         onToggleParticipants={() => setShowParticipants((v) => !v)}
         showParticipants={showParticipants}
+        onTemplates={onTemplates}
       />
 
       <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
@@ -488,6 +503,7 @@ export default function Drawd({ initialRoomCode }) {
           setGroupContextMenu={setGroupContextMenu}
           handleImageUpload={handleImageUpload}
           addScreenAtCenter={addScreenAtCenter}
+          onTemplates={onTemplates}
         />
 
         {selectedScreenData && (
@@ -573,6 +589,9 @@ export default function Drawd({ initialRoomCode }) {
         setFigmaError={setFigmaError}
         formSummaryScreen={formSummaryScreen}
         setFormSummaryScreen={setFormSummaryScreen}
+        showTemplateBrowser={showTemplateBrowser}
+        setShowTemplateBrowser={setShowTemplateBrowser}
+        onInsertTemplate={onInsertTemplate}
       />
     </div>
   );

src/components/CanvasArea.jsx

@@ -52,6 +52,8 @@ export function CanvasArea({
   groupContextMenu, setGroupContextMenu,
   // ToolBar
   setActiveTool, handleImageUpload, addScreenAtCenter,
+  // Templates
+  onTemplates,
 }) {
   return (
     <div
@@ -253,7 +255,7 @@ export function CanvasArea({
         )}
       </div>
 
-      {screens.length === 0 && <EmptyState />}
+      {screens.length === 0 && <EmptyState onTemplates={onTemplates} />}
 
       {/* Zoom indicator */}
       <div
@@ -383,6 +385,7 @@ export function CanvasArea({
           const worldY = (rect.height / 2 - pan.y) / zoom;
           addStickyNote(worldX, worldY);
         }}
+        onTemplates={onTemplates}
       />
     </div>
   );

src/components/EmptyState.jsx

@@ -1,6 +1,6 @@
 import { COLORS, FONTS } from "../styles/theme";
 
-export function EmptyState() {
+export function EmptyState({ onTemplates }) {
   return (
     <div
       style={{
@@ -52,6 +52,35 @@ export function EmptyState() {
         Drag &amp; drop or paste from clipboard<br />
         wireframes, screenshots, or mockups
       </div>
+      {onTemplates && (
+        <button
+          onClick={onTemplates}
+          style={{
+            pointerEvents: "auto",
+            marginTop: 8,
+            padding: "8px 20px",
+            background: COLORS.accent01,
+            border: `1px solid ${COLORS.accent}`,
+            borderRadius: 8,
+            color: COLORS.accent,
+            fontSize: 13,
+            fontFamily: FONTS.mono,
+            fontWeight: 500,
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = COLORS.accent;
+            e.currentTarget.style.color = "#282c34";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = COLORS.accent01;
+            e.currentTarget.style.color = COLORS.accent;
+          }}
+        >
+          Start from Template
+        </button>
+      )}
     </div>
   );
 }

src/components/ModalsLayer.jsx

@@ -11,6 +11,7 @@ import { ShortcutsPanel } from "./ShortcutsPanel";
 import { ShareModal } from "./ShareModal";
 import { HostLeftModal } from "./HostLeftModal";
 import { FormSummaryPanel } from "./FormSummaryPanel";
+import { TemplateBrowserModal } from "./TemplateBrowserModal";
 
 export function ModalsLayer({
   // Hotspot modal
@@ -43,6 +44,8 @@ export function ModalsLayer({
   figmaProcessing, figmaError, setFigmaError,
   // Form summary
   formSummaryScreen, setFormSummaryScreen,
+  // Template browser
+  showTemplateBrowser, setShowTemplateBrowser, onInsertTemplate,
 }) {
   return (
     <>
@@ -212,6 +215,13 @@ export function ModalsLayer({
         </div>
       )}
 
+      {showTemplateBrowser && (
+        <TemplateBrowserModal
+          onInsert={onInsertTemplate}
+          onClose={() => setShowTemplateBrowser(false)}
+        />
+      )}
+
       {formSummaryScreen && (
         <FormSummaryPanel
           screen={formSummaryScreen}

src/components/ShortcutsPanel.jsx

@@ -19,6 +19,7 @@ const SHORTCUTS = [
       { keys: ["Scroll"], desc: "Zoom in / out" },
       { keys: ["Alt", "Click hotspot"], desc: "Drag to connect" },
       { keys: ["Shift", "Click hotspot"], desc: "Multi-select hotspots" },
+      { keys: ["T"], desc: "Insert template" },
     ],
   },
   {

src/components/TemplateBrowserModal.jsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import { COLORS, FONTS, styles } from "../styles/theme";
+import { TEMPLATES } from "../templates";
+
+export function TemplateIcon({ size = 32, stroke = COLORS.accent, strokeWidth = 1.5 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+    </svg>
+  );
+}
+
+function TemplateCard({ template, onSelect, loading }) {
+  return (
+    <button
+      onClick={() => onSelect(template)}
+      disabled={loading}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = COLORS.surfaceHover;
+        e.currentTarget.style.borderColor = COLORS.accent;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = COLORS.bg;
+        e.currentTarget.style.borderColor = COLORS.border;
+      }}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 10,
+        padding: 16,
+        background: COLORS.bg,
+        border: `1px solid ${COLORS.border}`,
+        borderRadius: 12,
+        cursor: loading ? "wait" : "pointer",
+        transition: "all 0.15s ease",
+        textAlign: "left",
+        outline: "none",
+        width: "100%",
+        opacity: loading ? 0.6 : 1,
+      }}
+    >
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+      }}>
+        <span style={{
+          color: COLORS.text,
+          fontFamily: FONTS.heading,
+          fontSize: 14,
+          fontWeight: 600,
+        }}>
+          {template.name}
+        </span>
+        <span style={{
+          color: COLORS.textDim,
+          fontFamily: FONTS.mono,
+          fontSize: 11,
+          background: COLORS.accent01,
+          padding: "2px 8px",
+          borderRadius: 4,
+        }}>
+          {template.screenCount} screens
+        </span>
+      </div>
+      <span style={{
+        color: COLORS.textMuted,
+        fontFamily: FONTS.ui,
+        fontSize: 12,
+        lineHeight: 1.4,
+      }}>
+        {template.description}
+      </span>
+      <span style={{
+        color: COLORS.textDim,
+        fontFamily: FONTS.mono,
+        fontSize: 10,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px",
+      }}>
+        {template.category}
+      </span>
+    </button>
+  );
+}
+
+export function TemplateBrowserModal({ onInsert, onClose }) {
+  const [loading, setLoading] = useState(false);
+
+  const handleSelect = async (template) => {
+    setLoading(true);
+    try {
+      const data = await template.getData();
+      setLoading(false);
+      onInsert(data);
+    } catch {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={styles.modalOverlay} onClick={onClose}>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          ...styles.modalCard,
+          width: 540,
+          maxHeight: "80vh",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 20,
+        }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <TemplateIcon />
+            <div>
+              <h3 style={{ ...styles.modalTitle, margin: 0 }}>Templates</h3>
+              <p style={{
+                margin: "4px 0 0",
+                color: COLORS.textMuted,
+                fontFamily: FONTS.ui,
+                fontSize: 12,
+              }}>
+                Start with a pre-built flow and customize it
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: COLORS.textMuted,
+              fontSize: 18,
+              cursor: "pointer",
+              padding: "4px 8px",
+              borderRadius: 4,
+              lineHeight: 1,
+            }}
+          >
+            &times;
+          </button>
+        </div>
+
+        <div style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 12,
+          overflow: "auto",
+          paddingRight: 4,
+        }}>
+          {TEMPLATES.map((template) => (
+            <TemplateCard
+              key={template.id}
+              template={template}
+              onSelect={handleSelect}
+              loading={loading}
+            />
+          ))}
+        </div>
+
+        <div style={{
+          marginTop: 16,
+          paddingTop: 16,
+          borderTop: `1px solid ${COLORS.border}`,
+          display: "flex",
+          justifyContent: "flex-end",
+        }}>
+          <button onClick={onClose} style={styles.btnCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ToolBar.jsx

@@ -1,4 +1,5 @@
 import { COLORS, FONTS } from "../styles/theme";
+import { TemplateIcon as TemplateIconBase } from "./TemplateBrowserModal";
 
 const SelectIcon = () => (
   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
@@ -89,7 +90,9 @@ function ActionButton({ icon: Icon, label, shortcutKey, onClick }) {
   );
 }
 
-export function ToolBar({ activeTool, onToolChange, onUpload, onAddBlank, onAddStickyNote, isReadOnly }) {
+const TemplateIcon = () => <TemplateIconBase size={16} stroke="currentColor" strokeWidth={1.8} />;
+
+export function ToolBar({ activeTool, onToolChange, onUpload, onAddBlank, onAddStickyNote, isReadOnly, onTemplates }) {
   return (
     <div
       style={{
@@ -158,6 +161,8 @@ export function ToolBar({ activeTool, onToolChange, onUpload, onAddBlank, onAddS
           <ActionButton icon={UploadIcon} label="Upload Screens" shortcutKey="U" onClick={onUpload} />
           <ActionButton icon={BlankScreenIcon} label="Add Blank Screen" shortcutKey="B" onClick={onAddBlank} />
           <ActionButton icon={StickyNoteIcon} label="Add Sticky Note" shortcutKey="N" onClick={onAddStickyNote} />
+          <div style={dividerStyle} />
+          <ActionButton icon={TemplateIcon} label="Insert Template" shortcutKey="T" onClick={onTemplates} />
         </>
       )}
     </div>