@morphika/webframe 0.1.0

package/components/builder/asset-browser/useR2Operations.ts

@@ -0,0 +1,189 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { FolderNode } from "./types";
+
+// ============================================
+// R2 CRUD operations hook
+// ============================================
+
+export interface RenameTarget {
+  type: "file" | "folder";
+  key: string;
+  name: string;
+}
+
+export interface UseR2OperationsOptions {
+  onRetry: () => void;
+  onMutationComplete?: () => void;
+  onFolderCreated?: (folderPath: string) => void;
+  currentFolder: string;
+}
+
+export function useR2Operations({
+  onRetry,
+  onMutationComplete,
+  onFolderCreated,
+  currentFolder,
+}: UseR2OperationsOptions) {
+  const [showNewFolderInput, setShowNewFolderInput] = useState(false);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [renameTarget, setRenameTarget] = useState<RenameTarget | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [actionLoading, setActionLoading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Create folder — R2 doesn't have real folders, but we create a placeholder object
+  const handleCreateFolder = useCallback(async () => {
+    if (!newFolderName.trim()) return;
+    const clean = newFolderName.trim().replace(/[/\\]/g, "");
+    if (!clean) return;
+
+    const folderPath = currentFolder ? `${currentFolder}/${clean}` : clean;
+    setActionLoading(true);
+    try {
+      // Create a zero-byte placeholder to make the folder visible
+      const urlRes = await fetch("/api/admin/r2/upload-url", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ filename: ".folder", folder: folderPath, contentType: "application/x-empty" }),
+      });
+
+      if (urlRes.ok) {
+        const { uploadUrl } = await urlRes.json();
+        await fetch(uploadUrl, { method: "PUT", body: new Blob([]), headers: { "Content-Type": "application/x-empty" } });
+        onFolderCreated?.(folderPath);
+      }
+    } catch {
+      // Folder creation is best-effort — the folder will appear when files are uploaded into it
+    } finally {
+      setNewFolderName("");
+      setShowNewFolderInput(false);
+      setActionLoading(false);
+      onMutationComplete?.();
+    }
+  }, [newFolderName, currentFolder, onFolderCreated, onMutationComplete]);
+
+  // Delete file or folder
+  const handleDelete = useCallback(async (key: string, isFolder: boolean) => {
+    const label = isFolder ? `folder "${key}" and all its contents` : `file "${key}"`;
+    if (!confirm(`Delete ${label}? This cannot be undone.`)) return;
+
+    setActionLoading(true);
+    try {
+      const res = await fetch("/api/admin/r2/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ key, isFolder }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        alert(data.error || "Delete failed");
+      }
+    } catch {
+      alert("Delete failed — network error");
+    } finally {
+      setActionLoading(false);
+      onRetry();
+      onMutationComplete?.();
+    }
+  }, [onRetry, onMutationComplete]);
+
+  // Rename file or folder
+  const handleRename = useCallback(async () => {
+    if (!renameTarget || !renameValue.trim()) return;
+
+    const clean = renameValue.trim();
+    if (clean === renameTarget.name) {
+      setRenameTarget(null);
+      return;
+    }
+
+    setActionLoading(true);
+    try {
+      let oldKey: string, newKey: string;
+
+      if (renameTarget.type === "file") {
+        oldKey = renameTarget.key;
+        const parts = oldKey.split("/");
+        parts.pop();
+        newKey = parts.length > 0 ? `${parts.join("/")}/${clean}` : clean;
+      } else {
+        oldKey = renameTarget.key;
+        const parts = oldKey.split("/");
+        parts.pop();
+        newKey = parts.length > 0 ? `${parts.join("/")}/${clean}` : clean;
+      }
+
+      const res = await fetch("/api/admin/r2/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ oldKey, newKey, isFolder: renameTarget.type === "folder" }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        alert(data.error || "Rename failed");
+      }
+    } catch {
+      alert("Rename failed — network error");
+    } finally {
+      setRenameTarget(null);
+      setRenameValue("");
+      setActionLoading(false);
+      onRetry();
+      onMutationComplete?.();
+    }
+  }, [renameTarget, renameValue, onRetry, onMutationComplete]);
+
+  // Initiate rename for a file
+  const startRenameFile = useCallback((asset: RegisteredAsset) => {
+    setRenameTarget({ type: "file", key: asset.path, name: asset.filename });
+    setRenameValue(asset.filename);
+  }, []);
+
+  // Initiate rename for a folder
+  const startRenameFolder = useCallback((folder: FolderNode) => {
+    setRenameTarget({ type: "folder", key: folder.path, name: folder.name });
+    setRenameValue(folder.name);
+  }, []);
+
+  // Open new folder input
+  const openNewFolderInput = useCallback(() => {
+    setShowNewFolderInput(true);
+    setNewFolderName("");
+  }, []);
+
+  // Cancel new folder input
+  const cancelNewFolderInput = useCallback(() => {
+    setShowNewFolderInput(false);
+  }, []);
+
+  // Cancel rename
+  const cancelRename = useCallback(() => {
+    setRenameTarget(null);
+  }, []);
+
+  return {
+    // State
+    showNewFolderInput,
+    newFolderName,
+    setNewFolderName,
+    renameTarget,
+    renameValue,
+    setRenameValue,
+    actionLoading,
+    fileInputRef,
+    // Actions
+    handleCreateFolder,
+    handleDelete,
+    handleRename,
+    startRenameFile,
+    startRenameFolder,
+    openNewFolderInput,
+    cancelNewFolderInput,
+    cancelRename,
+  };
+}

package/components/builder/blockStyles.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+/**
+ * Shared block visual styles — gradients and SVG icon components.
+ * Used by BlockTypePicker (add block cards) and SettingsPanel (header).
+ */
+
+// ── Gradient backgrounds per block type ──
+
+export const BLOCK_GRADIENTS: Record<string, string> = {
+  textBlock:      "linear-gradient(135deg, #c9b8ff 0%, #8eb5ff 50%, #b8d4ff 100%)",
+  imageBlock:     "linear-gradient(135deg, #b8ffb8 0%, #d4ffa8 50%, #f0ffc0 100%)",
+  imageGridBlock: "linear-gradient(135deg, #a8c8ff 0%, #c0d8ff 50%, #d8e8ff 100%)",
+  videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
+  spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
+  buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
+  coverBlock:     "linear-gradient(135deg, #ffd0a8 0%, #ffc090 50%, #ffb080 100%)",
+  projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
+  parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
+  customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
+  // Non-block contexts
+  row:            "linear-gradient(135deg, #e0e0f0 0%, #d0d8e8 50%, #c8d0e0 100%)",
+  column:         "linear-gradient(135deg, #d8e8f8 0%, #c8ddf0 50%, #b8d0e8 100%)",
+  page:           "linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 50%, #e0d0b8 100%)",
+};
+
+// ── SVG Icon Components ──
+
+export function TextBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="tGrad" x1="10" y1="2" x2="30" y2="38">
+          <stop offset="0%" stopColor="#a08ee0" />
+          <stop offset="100%" stopColor="#7060b8" />
+        </linearGradient>
+        <filter id="textDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.2" floodColor="rgba(80,40,140,0.3)" />
+        </filter>
+      </defs>
+      <path d="M 6,5 L 34,5 L 34,8 L 33,9.5 L 23,9.5 L 23,33 L 26.5,33 L 28,34.5 L 28,37 L 12,37 L 12,34.5 L 13.5,33 L 17,33 L 17,9.5 L 7,9.5 L 6,8 Z" fill="url(#tGrad)" filter="url(#textDrop)" />
+      <path d="M 6,5 L 8,3 L 14,3 L 14,5 Z" fill="url(#tGrad)" opacity="0.85" />
+      <path d="M 34,5 L 32,3 L 26,3 L 26,5 Z" fill="url(#tGrad)" opacity="0.85" />
+      <path d="M 12,37 L 13,38.5 L 18,38.5 L 17,37 Z" fill="url(#tGrad)" opacity="0.8" />
+      <path d="M 28,37 L 27,38.5 L 22,38.5 L 23,37 Z" fill="url(#tGrad)" opacity="0.8" />
+      <path d="M 6,5 L 34,5 L 34,6.5 L 6,6.5 Z" fill="white" opacity="0.22" />
+      <path d="M 17,9.5 L 19,9.5 L 19,33 L 17,33 Z" fill="white" opacity="0.12" />
+    </svg>
+  );
+}
+
+export function ImageBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="mtnBack" x1="10" y1="8" x2="30" y2="32">
+          <stop offset="0%" stopColor="#6abf6a" />
+          <stop offset="100%" stopColor="#3d9e3d" />
+        </linearGradient>
+        <linearGradient id="mtnFront" x1="5" y1="12" x2="25" y2="34">
+          <stop offset="0%" stopColor="#4da84d" />
+          <stop offset="100%" stopColor="#2d7e2d" />
+        </linearGradient>
+        <filter id="mtnDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
+        </filter>
+      </defs>
+      <polygon points="20,6 35,32 5,32" fill="url(#mtnBack)" filter="url(#mtnDrop)" />
+      <polygon points="20,6 24,13 16,13" fill="white" opacity="0.5" />
+      <polygon points="12,14 26,32 -2,32" fill="url(#mtnFront)" filter="url(#mtnDrop)" />
+      <polygon points="12,14 15,19 9,19" fill="white" opacity="0.45" />
+    </svg>
+  );
+}
+
+export function ImageGridBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="gridFill" x1="0" y1="0" x2="40" y2="40">
+          <stop offset="0%" stopColor="#6ea8e8" />
+          <stop offset="100%" stopColor="#4080c8" />
+        </linearGradient>
+        <filter id="gridDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
+        </filter>
+      </defs>
+      <rect x="4" y="4" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.85" filter="url(#gridDrop)" />
+      <rect x="22" y="4" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.65" filter="url(#gridDrop)" />
+      <rect x="4" y="22" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.55" filter="url(#gridDrop)" />
+      <rect x="22" y="22" width="14" height="14" rx="3" fill="url(#gridFill)" opacity="0.75" filter="url(#gridDrop)" />
+    </svg>
+  );
+}
+
+export function VideoBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="playGrad" x1="12" y1="8" x2="32" y2="32">
+          <stop offset="0%" stopColor="#f06060" />
+          <stop offset="100%" stopColor="#d83838" />
+        </linearGradient>
+        <filter id="playDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="2" floodColor="rgba(200,50,50,0.3)" />
+        </filter>
+      </defs>
+      <path d="M12,6 L34,20 L12,34 Z" fill="url(#playGrad)" filter="url(#playDrop)" />
+      <path d="M12,6 L34,20 L12,20 Z" fill="white" opacity="0.15" />
+    </svg>
+  );
+}
+
+export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <filter id="spacerDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.1)" />
+        </filter>
+      </defs>
+      <path d="M20,4 L27,13 L23,13 L23,17 L17,17 L17,13 L13,13 Z" fill="#9898b8" opacity="0.7" filter="url(#spacerDrop)" />
+      <path d="M20,36 L27,27 L23,27 L23,23 L17,23 L17,27 L13,27 Z" fill="#9898b8" opacity="0.7" filter="url(#spacerDrop)" />
+      <line x1="8" y1="20" x2="32" y2="20" stroke="#b0b0c8" strokeWidth="1.5" strokeDasharray="3 2" opacity="0.5" />
+    </svg>
+  );
+}
+
+export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="toggleGrad" x1="0" y1="10" x2="40" y2="30">
+          <stop offset="0%" stopColor="#3cc87c" />
+          <stop offset="100%" stopColor="#28a85c" />
+        </linearGradient>
+        <filter id="toggleDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
+        </filter>
+        <filter id="knobDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.2)" />
+        </filter>
+      </defs>
+      <rect x="3" y="11" width="34" height="18" rx="9" fill="url(#toggleGrad)" filter="url(#toggleDrop)" />
+      <rect x="3" y="11" width="34" height="9" rx="9" fill="white" opacity="0.12" />
+      <circle cx="28" cy="20" r="7" fill="white" filter="url(#knobDrop)" />
+      <circle cx="27" cy="18.5" r="2.5" fill="white" opacity="0.5" />
+    </svg>
+  );
+}
+
+export function CoverBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="starGrad" x1="10" y1="4" x2="30" y2="36">
+          <stop offset="0%" stopColor="#f0a040" />
+          <stop offset="100%" stopColor="#e07820" />
+        </linearGradient>
+        <filter id="starDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="2" floodColor="rgba(200,100,20,0.3)" />
+        </filter>
+      </defs>
+      <path d="M20,2 L24,15 L37,20 L24,25 L20,38 L16,25 L3,20 L16,15 Z" fill="url(#starGrad)" filter="url(#starDrop)" />
+      <path d="M20,2 L24,15 L37,20 L16,15 Z" fill="white" opacity="0.2" />
+      <circle cx="20" cy="20" r="2.5" fill="white" opacity="0.4" />
+    </svg>
+  );
+}
+
+// ── Non-block context icons ──
+
+export function RowIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="rowGrad" x1="4" y1="4" x2="36" y2="36">
+          <stop offset="0%" stopColor="#8888b0" />
+          <stop offset="100%" stopColor="#6868a0" />
+        </linearGradient>
+        <filter id="rowDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
+        </filter>
+      </defs>
+      <rect x="3" y="10" width="34" height="6" rx="2" fill="url(#rowGrad)" opacity="0.6" filter="url(#rowDrop)" />
+      <rect x="3" y="20" width="15" height="10" rx="2" fill="url(#rowGrad)" opacity="0.85" filter="url(#rowDrop)" />
+      <rect x="22" y="20" width="15" height="10" rx="2" fill="url(#rowGrad)" opacity="0.85" filter="url(#rowDrop)" />
+      <rect x="3" y="20" width="15" height="4" rx="2" fill="white" opacity="0.15" />
+      <rect x="22" y="20" width="15" height="4" rx="2" fill="white" opacity="0.15" />
+    </svg>
+  );
+}
+
+export function ColumnIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="colGrad" x1="4" y1="4" x2="36" y2="36">
+          <stop offset="0%" stopColor="#6090c8" />
+          <stop offset="100%" stopColor="#4878b8" />
+        </linearGradient>
+        <filter id="colDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
+        </filter>
+      </defs>
+      <rect x="6" y="4" width="10" height="32" rx="3" fill="url(#colGrad)" opacity="0.9" filter="url(#colDrop)" />
+      <rect x="6" y="4" width="10" height="10" rx="3" fill="white" opacity="0.18" />
+      <rect x="20" y="4" width="14" height="32" rx="3" fill="url(#colGrad)" opacity="0.55" filter="url(#colDrop)" />
+      <rect x="20" y="4" width="14" height="10" rx="3" fill="white" opacity="0.12" />
+    </svg>
+  );
+}
+
+export function PageIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="pageGrad" x1="8" y1="2" x2="32" y2="38">
+          <stop offset="0%" stopColor="#c8a870" />
+          <stop offset="100%" stopColor="#a88850" />
+        </linearGradient>
+        <filter id="pageDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
+        </filter>
+      </defs>
+      <rect x="8" y="3" width="24" height="34" rx="3" fill="url(#pageGrad)" filter="url(#pageDrop)" />
+      <rect x="8" y="3" width="24" height="10" rx="3" fill="white" opacity="0.2" />
+      <rect x="12" y="17" width="16" height="2" rx="1" fill="white" opacity="0.35" />
+      <rect x="12" y="22" width="12" height="2" rx="1" fill="white" opacity="0.25" />
+      <rect x="12" y="27" width="14" height="2" rx="1" fill="white" opacity="0.2" />
+    </svg>
+  );
+}
+
+// ── Lookup maps ──
+
+export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="pgGrad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor="#d4880a" />
+          <stop offset="100%" stopColor="#b06e08" />
+        </linearGradient>
+      </defs>
+      <rect x="3" y="3" width="34" height="14" rx="2" fill="url(#pgGrad)" opacity="0.9" />
+      <rect x="3" y="21" width="16" height="16" rx="2" fill="url(#pgGrad)" opacity="0.7" />
+      <rect x="22" y="21" width="15" height="16" rx="2" fill="url(#pgGrad)" opacity="0.5" />
+    </svg>
+  );
+}
+
+export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="pxGrad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor="#9060d8" />
+          <stop offset="100%" stopColor="#7040b8" />
+        </linearGradient>
+      </defs>
+      <rect x="3" y="3" width="34" height="10" rx="2" fill="url(#pxGrad)" opacity="0.9" />
+      <rect x="3" y="16" width="34" height="10" rx="2" fill="url(#pxGrad)" opacity="0.6" />
+      <rect x="3" y="29" width="34" height="8" rx="2" fill="url(#pxGrad)" opacity="0.35" />
+      <path d="M18 6 L24 8 L18 10 Z" fill="white" opacity="0.5" />
+      <path d="M18 19 L24 21 L18 23 Z" fill="white" opacity="0.5" />
+    </svg>
+  );
+}
+
+export function CustomSectionInstanceIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <rect x="3" y="6" width="34" height="28" rx="4" stroke="#8b5cf6" strokeWidth="2" fill="none" opacity="0.7" />
+      <path d="M16 17a3 3 0 0 0 4.5.32l1.8-1.8a3 3 0 0 0-4.24-4.24l-1.03 1.03" stroke="#8b5cf6" strokeWidth="1.8" strokeLinecap="round" fill="none" />
+      <path d="M24 23a3 3 0 0 0-4.5-.32l-1.8 1.8a3 3 0 0 0 4.24 4.24l1.03-1.03" stroke="#8b5cf6" strokeWidth="1.8" strokeLinecap="round" fill="none" />
+    </svg>
+  );
+}
+
+export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
+  textBlock: TextBlockIcon,
+  imageBlock: ImageBlockIcon,
+  imageGridBlock: ImageGridBlockIcon,
+  videoBlock: VideoBlockIcon,
+  spacerBlock: SpacerBlockIcon,
+  buttonBlock: ButtonBlockIcon,
+  coverBlock: CoverBlockIcon,
+  projectGridBlock: ProjectGridBlockIcon,
+  parallaxGroup: ParallaxGroupIcon,
+  customSectionInstance: CustomSectionInstanceIcon,
+  row: RowIcon,
+  column: ColumnIcon,
+  page: PageIcon,
+};

package/components/builder/editors/ButtonBlockEditor.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { ButtonBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: ButtonBlock;
+}
+
+export default function ButtonBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  // Responsive-aware update
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
+      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
+    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+  };
+
+  // Direct update (base block, not responsive)
+  const update = (updates: Partial<ButtonBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<ButtonBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  // Effective values for the active viewport
+  const effectiveSize = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "size", block.size || "medium"
+  );
+  const effectiveAlignment = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "alignment", block.alignment || "left"
+  );
+  const effectiveFullWidth = getEffectiveValue<boolean>(
+    block as ContentBlock, viewport, "full_width", block.full_width || false
+  );
+
+  return (
+    <>
+      <ViewportBadge />
+
+      <SettingsSection title="Content" defaultOpen>
+        <SettingsField label="Button Text">
+          <input
+            type="text"
+            value={block.text || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ text: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Click me"
+          />
+        </SettingsField>
+        <SettingsField label="URL">
+          <input
+            type="text"
+            value={block.url || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ url: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="https://..."
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      <SettingsSection title="Style">
+        <SettingsField label="Variant">
+          <div className="flex gap-1">
+            {(["primary", "secondary", "outline", "text"] as const).map(
+              (s) => (
+                <button
+                  key={s}
+                  onClick={() => update({ style: s })}
+                  className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                    (block.style || "primary") === s
+                      ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                      : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                  }`}
+                >
+                  {s}
+                </button>
+              )
+            )}
+          </div>
+        </SettingsField>
+
+        <ResponsiveField
+          label="Size"
+          block={block as ContentBlock}
+          property="size"
+          onReset={() => resetOverride("size")}
+        >
+          <div className="flex gap-1">
+            {(["small", "medium", "large"] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() => updateResponsive("size", s)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveSize === s
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {s[0].toUpperCase()}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Alignment"
+          block={block as ContentBlock}
+          property="alignment"
+          onReset={() => resetOverride("alignment")}
+        >
+          <div className="flex gap-1">
+            {(["left", "center", "right"] as const).map((a) => (
+              <button
+                key={a}
+                onClick={() => updateResponsive("alignment", a)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveAlignment === a
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {a === "left" ? "◁" : a === "center" ? "◈" : "▷"}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+      </SettingsSection>
+
+      <SettingsSection title="Options">
+        <StyledCheckbox
+          label="Open in new tab"
+          checked={block.target || false}
+          onChange={(v) => update({ target: v })}
+        />
+        <ResponsiveField
+          label="Full width"
+          block={block as ContentBlock}
+          property="full_width"
+          onReset={() => resetOverride("full_width")}
+        >
+          <button
+            type="button"
+            onClick={() => updateResponsive("full_width", !effectiveFullWidth)}
+            className={`relative w-8 h-[18px] rounded-full transition-colors ${
+              effectiveFullWidth ? "bg-[#076bff]" : "bg-neutral-200 hover:bg-neutral-300"
+            }`}
+          >
+            <span
+              className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow-sm transition-transform ${
+                effectiveFullWidth ? "left-[16px]" : "left-[2px]"
+              }`}
+            />
+          </button>
+        </ResponsiveField>
+      </SettingsSection>
+    </>
+  );
+}