@morphika/andami 0.5.4 → 0.5.6

package/app/admin/assets/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import type { RegisteredAsset, AssetRegistry, RelinkLogEntry } from "../../../lib/sanity/types";
 import { formatDate, formatBytes } from "../../../lib/format-utils";
+import { toast } from "../../../lib/toast";
 
 function getStatusColor(status: string): string {
   switch (status) {
@@ -83,8 +84,8 @@ export default function AdminAssetsPage() {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Scan failed");
       await fetchRegistry();
-      alert(
-        `Scan complete: ${data.scanned_count} files found, ${data.new_assets} new, ${data.missing_assets} missing`
+      toast.success(
+        `Scan complete: ${data.scanned_count} files, ${data.new_assets} new, ${data.missing_assets} missing`
       );
     } catch (err) {
       setError(err instanceof Error ? err.message : "Scan failed");

package/app/admin/layout.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
 import { getSiteConfig } from "../../lib/config";
 import { ANDAMI_VERSION } from "../../lib/version";
+import ToastStack from "../../components/ui/ToastStack";
 
 // ============================================
 // Navigation Configuration — grouped by section
@@ -327,6 +328,9 @@ export default function AdminLayout({
           {children}
         </main>
       </div>
+
+      {/* Global toast stack — mounted at admin shell so all admin pages get it */}
+      <ToastStack />
     </div>
   );
 }

package/components/admin/nav-builder/NavBuilder.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback, useEffect } from "react";
 import type { NavItem, NavDesign, PageListItem } from "../../../lib/sanity/types";
+import { toast } from "../../../lib/toast";
 import { migrateNavItems, validateLayout } from "./nav-builder-utils";
 import NavBuilderGrid from "./NavBuilderGrid";
 import NavLivePreview from "./NavLivePreview";
@@ -151,7 +152,7 @@ export default function NavBuilder({
   const handleSave = useCallback(async () => {
     const validation = validateLayout(items);
     if (!validation.valid) {
-      alert(`Layout conflicts:\n${validation.conflicts.join("\n")}`);
+      toast.error(`Layout conflicts: ${validation.conflicts.join(", ")}`);
       return;
     }
     await onSave(items, design);

package/components/admin/styles/FontsEditor.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef } from "react";
 import { csrfHeaders } from "../../../lib/csrf-client";
+import { toast } from "../../../lib/toast";
 import type { FontFamily, FontVariant } from "../../../lib/sanity/types";
 import { Section, SaveButton } from "./shared";
 import { BubbleTooltip } from "../../builder/BubbleIcons";
@@ -73,7 +74,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
         )
       );
     } catch (err) {
-      alert(err instanceof Error ? err.message : "Upload failed");
+      toast.error(err instanceof Error ? err.message : "Upload failed");
     } finally {
       setUploading(false);
     }

package/components/builder/ColumnDragOverlay.tsx

@@ -5,7 +5,7 @@ import { createPortal } from "react-dom";
 import { useBuilderStore } from "../../lib/builder/store";
 import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanity/types";
 import { isPageSectionV2, isCoverSection } from "../../lib/sanity/types";
-import { BUILDER_BLUE } from "../../lib/builder/constants";
+import { BUILDER_YELLOW } from "../../lib/builder/constants";
 
 /** Color used when the current drop target is invalid (cross-section
  * swap, or a target that is not V2/Cover). Red 500 with compatible
@@ -57,9 +57,9 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
 
   const blockCount = (col.blocks || []).length;
 
-  // Pick accent based on drop validity.
-  const accentColor = isValidDrop ? BUILDER_BLUE : INVALID_RED;
-  const accentRgb = isValidDrop ? "71, 148, 226" : INVALID_RED_RGB;
+  // Pick accent based on drop validity. Column drag = BUILDER_YELLOW.
+  const accentColor = isValidDrop ? BUILDER_YELLOW : INVALID_RED;
+  const accentRgb = isValidDrop ? "214, 137, 0" : INVALID_RED_RGB;
 
   const overlay = (
     <div

package/components/builder/CoverSectionCanvas.tsx

@@ -60,9 +60,10 @@ export default function CoverSectionCanvas({
   section,
   onAddBlockTarget,
 }: CoverSectionCanvasProps) {
-  const store = useBuilderStore();
-  const activeViewport = store.activeViewport || "desktop";
-  const previewMode = store.previewMode;
+  const storeActiveViewport = useBuilderStore((s) => s.activeViewport);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const addColumnV2 = useBuilderStore((s) => s.addColumnV2);
+  const activeViewport = storeActiveViewport || "desktop";
   const [isSectionHovered, setIsSectionHovered] = useState(false);
 
   const vhPixels = DEVICE_HEIGHTS[activeViewport];
@@ -182,12 +183,12 @@ export default function CoverSectionCanvas({
         // store action (it writes to any section by _key); the runtime shapes align
         // on `{ tablet?, phone? }` — the extra `cover_rows` field on CoverSection
         // is carried through without touching the V2-shaped write path.
-        store.updateSectionV2Responsive(
+        updateSectionV2Responsive(
           section._key,
           finalResponsive as PageSectionV2["responsive"],
         );
       },
-    [section, store],
+    [section, updateSectionV2Responsive],
   );
 
   return (
@@ -323,14 +324,14 @@ export default function CoverSectionCanvas({
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
-                        store.addColumnV2(section._key, rowNumber, 1, section.settings.grid_columns || 12);
+                        addColumnV2(section._key, rowNumber, 1, section.settings.grid_columns || 12);
                       }}
                       className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
                       style={{
                         padding: "5px 16px",
-                        background: `rgba(53, 128, 249, 0.10)`,
-                        color: "#3580f9",
-                        border: "1.5px dashed rgba(53, 128, 249, 0.4)",
+                        background: `rgba(214, 137, 0, 0.10)`,
+                        color: "#d68900",
+                        border: "1.5px dashed rgba(214, 137, 0, 0.4)",
                         opacity: isSectionHovered ? 1 : 0,
                         pointerEvents: isSectionHovered ? "auto" : "none",
                         transition: "opacity 150ms",

package/components/builder/InsertionLines.tsx

@@ -3,7 +3,7 @@
 import { useMemo, memo } from "react";
 import type { CascadeColumn } from "../../lib/builder/cascade-helpers";
 import type { DropTarget } from "./hooks/useColumnDrag";
-import { BUILDER_BLUE } from "../../lib/builder/constants";
+import { BUILDER_YELLOW } from "../../lib/builder/constants";
 
 // ============================================
 // InsertionLines — Visual insertion indicators between adjacent columns
@@ -154,7 +154,7 @@ export const InsertionLines = memo(function InsertionLines({
                   bottom: 4,
                   width: isActive ? 4 : 0,
                   transform: "translateX(-50%)",
-                  background: BUILDER_BLUE,
+                  background: BUILDER_YELLOW,
                   borderRadius: 2,
                   transition: "width 100ms ease-out, opacity 100ms ease-out",
                   opacity: isActive ? 1 : 0,
@@ -171,7 +171,7 @@ export const InsertionLines = memo(function InsertionLines({
                     width: 14,
                     height: 14,
                     borderRadius: "50%",
-                    background: BUILDER_BLUE,
+                    background: BUILDER_YELLOW,
                     border: "2px solid white",
                     boxShadow: "0 1px 4px rgba(53, 128, 249, 0.4)",
                     display: "flex",

package/components/builder/SectionV2Canvas.tsx

@@ -306,11 +306,11 @@ export default function SectionV2Canvas({
               }}
               className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
                 isGapTarget
-                  ? "border-blue-500 text-blue-500 bg-blue-500/10 opacity-100"
+                  ? "border-[#d68900] text-[#d68900] bg-[#d68900]/10 opacity-100"
                   : showAsDropTarget
-                  ? "border-blue-500/40 text-blue-500/60 bg-blue-500/5 opacity-100"
+                  ? "border-[#d68900]/40 text-[#d68900]/60 bg-[#d68900]/5 opacity-100"
                   : isSectionHovered
-                  ? "border-[#3580f9]/25 text-[#3580f9]/50 hover:text-[#3580f9] hover:border-[#3580f9]/60 hover:bg-[#3580f9]/5 opacity-100"
+                  ? "border-[#d68900]/25 text-[#d68900]/50 hover:text-[#d68900] hover:border-[#d68900]/60 hover:bg-[#d68900]/5 opacity-100"
                   : "border-transparent text-transparent opacity-0 pointer-events-none"
               }`}
             >

package/components/builder/SectionV2Column.tsx

@@ -15,7 +15,7 @@ import {
   getBorderStyles,
 } from "../../lib/builder/layout-styles";
 import { isSectionBlockType } from "../../lib/builder/types";
-import { BUILDER_BLUE } from "../../lib/builder/constants";
+import { BUILDER_YELLOW, BUILDER_YELLOW_LIGHT } from "../../lib/builder/constants";
 import { BubbleTooltip, CloseIcon, DragDropIcon } from "./BubbleIcons";
 
 // ============================================
@@ -89,17 +89,17 @@ function ResizeHandle({
           height: isActive ? 16 : isHoveredEdge ? 56 : showChrome ? 56 : 32,
           borderRadius: isActive ? "50%" : 999,
           backgroundColor: isActive
-            ? "rgba(53, 128, 249, 0.9)"
+            ? "rgba(214, 137, 0, 0.9)"
             : isHoveredEdge
-            ? "rgba(53, 128, 249, 0.7)"
+            ? "rgba(214, 137, 0, 0.7)"
             : showChrome
-            ? "rgba(53, 128, 249, 0.5)"
-            : "rgba(53, 128, 249, 0.2)",
+            ? "rgba(214, 137, 0, 0.5)"
+            : "rgba(214, 137, 0, 0.2)",
           transition: "width 150ms ease-out, height 150ms ease-out, border-radius 150ms ease-out, background-color 150ms, box-shadow 150ms",
           boxShadow: isActive
-            ? "0 0 10px rgba(53, 128, 249, 0.5)"
+            ? "0 0 10px rgba(214, 137, 0, 0.5)"
             : isHoveredEdge
-            ? "0 0 6px rgba(53, 128, 249, 0.2)"
+            ? "0 0 6px rgba(214, 137, 0, 0.2)"
             : undefined,
         }}
       />
@@ -304,15 +304,15 @@ export default function SectionV2Column({
         style={{
           transition: "box-shadow 150ms",
           ...(isSwapTarget
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(53, 128, 249, 0.08)" }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_YELLOW}`, background: "rgba(214, 137, 0, 0.08)" }
             : isBlockOver
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}` }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_YELLOW}` }
             : isSelected
-            ? { boxShadow: `inset 0 0 0 2px rgba(53, 128, 249, 0.6)` }
+            ? { boxShadow: `inset 0 0 0 2px rgba(214, 137, 0, 0.6)` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 1.5px rgba(53, 128, 249, 0.5)` }
+            ? { boxShadow: `inset 0 0 0 1.5px rgba(214, 137, 0, 0.5)` }
             : showFaintOutline
-            ? { boxShadow: `inset 0 0 0 1px rgba(53, 128, 249, 0.2)`, borderRadius: 4 }
+            ? { boxShadow: `inset 0 0 0 1px rgba(214, 137, 0, 0.2)`, borderRadius: 4 }
             : undefined),
         }}
       />
@@ -383,14 +383,14 @@ export default function SectionV2Column({
           <div
             className="flex items-center rounded-[5px]"
             style={{
-              background: "#c0d7ff",
-              border: "1.5px solid #3580f9",
+              background: BUILDER_YELLOW_LIGHT,
+              border: `1.5px solid ${BUILDER_YELLOW}`,
             }}
           >
             {/* Drag handle — starts a column drag via @dnd-kit, selects on click */}
             <button
               type="button"
-              className="group/bb relative text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors px-1.5 py-1 flex items-center justify-center cursor-grab active:cursor-grabbing rounded-l-[3px]"
+              className="group/bb relative text-[#d68900] hover:bg-[#d68900]/15 transition-colors px-1.5 py-1 flex items-center justify-center cursor-grab active:cursor-grabbing rounded-l-[3px]"
               aria-label="Move column"
               onMouseDown={(e) => {
                 e.stopPropagation();
@@ -404,22 +404,22 @@ export default function SectionV2Column({
               <DragDropIcon size={14} />
               <BubbleTooltip>Drag to move</BubbleTooltip>
             </button>
-            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <div className="w-px self-stretch my-1" style={{ background: BUILDER_YELLOW }} />
             {/* Label — clicking selects the column */}
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onSelect(); }}
-              className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#3580f9]/15 transition-colors"
-              style={{ color: "#3580f9" }}
+              className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#d68900]/15 transition-colors"
+              style={{ color: BUILDER_YELLOW }}
               aria-label="Select column"
             >
               Col
             </button>
-            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <div className="w-px self-stretch my-1" style={{ background: BUILDER_YELLOW }} />
             {/* Delete */}
             <button
               onClick={handleDelete}
-              className="group/bb relative text-[#3580f9] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
+              className="group/bb relative text-[#d68900] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
               aria-label="Delete column"
             >
               <CloseIcon size={14} />

package/components/builder/SettingsPanel.tsx

@@ -46,7 +46,13 @@ import { BubbleTooltip } from "./BubbleIcons";
 type SettingsTab = "settings" | "layout" | "seo" | "animation";
 
 export default function SettingsPanel() {
-  const store = useBuilderStore();
+  const selectedRowKey = useBuilderStore((s) => s.selectedRowKey);
+  const selectedColumnKey = useBuilderStore((s) => s.selectedColumnKey);
+  const selectedBlockKey = useBuilderStore((s) => s.selectedBlockKey);
+  const editorMode = useBuilderStore((s) => s.editorMode);
+  const deleteBlock = useBuilderStore((s) => s.deleteBlock);
+  const deleteColumnV2 = useBuilderStore((s) => s.deleteColumnV2);
+  const deleteSection = useBuilderStore((s) => s.deleteSection);
   const [activeTab, setActiveTab] = useState<SettingsTab>("settings");
 
   const sel = useSettingsPanelSelection();
@@ -68,7 +74,7 @@ export default function SettingsPanel() {
   } = sel;
 
   // Reset to "settings" tab when selection changes
-  const selectionKey = `${store.selectedRowKey}-${store.selectedColumnKey}-${store.selectedBlockKey}`;
+  const selectionKey = `${selectedRowKey}-${selectedColumnKey}-${selectedBlockKey}`;
   const prevSelectionKey = useRef(selectionKey);
   useEffect(() => {
     if (prevSelectionKey.current !== selectionKey) {
@@ -115,19 +121,19 @@ export default function SettingsPanel() {
             let deleteTitle = "";
 
             if (selectedBlock && !selectedBlock.isSection) {
-              onDelete = () => store.deleteBlock(selectedBlock.block._key);
+              onDelete = () => deleteBlock(selectedBlock.block._key);
               deleteTitle = "Delete";
             } else if (selectedColumnV2 && effectiveSectionV2) {
-              onDelete = () => store.deleteColumnV2(effectiveSectionV2._key, selectedColumnV2._key);
+              onDelete = () => deleteColumnV2(effectiveSectionV2._key, selectedColumnV2._key);
               deleteTitle = "Delete Column";
             } else if (selectedParallaxGroup && !selectedParallaxSlide) {
-              onDelete = () => store.deleteSection(selectedParallaxGroup._key);
+              onDelete = () => deleteSection(selectedParallaxGroup._key);
               deleteTitle = "Delete Parallax Group";
             } else if (selectedCoverSection) {
-              onDelete = () => store.deleteSection(selectedCoverSection._key);
+              onDelete = () => deleteSection(selectedCoverSection._key);
               deleteTitle = "Delete Cover Section";
             } else if (selectedSectionV2) {
-              onDelete = () => store.deleteSection(selectedSectionV2._key);
+              onDelete = () => deleteSection(selectedSectionV2._key);
               deleteTitle = "Delete Section";
             }
 
@@ -215,7 +221,7 @@ export default function SettingsPanel() {
           if (animIdx >= 0) tabs.splice(animIdx, 1);
         }
         // Custom section editor mode: only Settings (Layout & Animation are per-instance on the parent page)
-        if (store.editorMode === "customSection") {
+        if (editorMode === "customSection") {
           const layoutIdx = tabs.findIndex((t) => t.id === "layout");
           if (layoutIdx >= 0) tabs.splice(layoutIdx, 1);
           const animIdx = tabs.findIndex((t) => t.id === "animation");

package/components/builder/SortableBlock.tsx

@@ -111,6 +111,8 @@ export default function SortableBlock({
         ref={setNodeRef}
         style={style}
         className="relative"
+        aria-roledescription="Draggable block"
+        aria-label={info?.label || block._type}
         onClick={(e) => { e.stopPropagation(); onSelect(); }}
       >
         <BlockLivePreview block={block} viewport={activeViewport} editable />
@@ -128,6 +130,8 @@ export default function SortableBlock({
           ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-transparent rounded"
           : ""
       }`}
+      aria-roledescription="Draggable block"
+      aria-label={info?.label || block._type}
       onClick={(e) => {
         e.stopPropagation();
         // If user clicked inside a contentEditable element (inline text editing),

package/components/builder/SortableRow.tsx

@@ -232,6 +232,8 @@ export default function SortableRow({
       className={`relative transition-[opacity,box-shadow] ${
         isDragging ? "ring-2 ring-[#93278f] ring-offset-2 ring-offset-[#0a0a0a]" : ""
       }`}
+      aria-roledescription="Draggable section"
+      aria-label={sectionLabel || "Section"}
       onClick={(e) => {
         e.stopPropagation();
         if (isLockedSection) {

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

@@ -3,6 +3,7 @@
 import { useState, useCallback, useRef } from "react";
 import type { RegisteredAsset } from "../../../lib/sanity/types";
 import { csrfHeaders } from "../../../lib/csrf-client";
+import { toast } from "../../../lib/toast";
 import type { FolderNode } from "./types";
 
 // ============================================
@@ -80,10 +81,10 @@ export function useR2Operations({
       });
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
-        alert(data.error || "Delete failed");
+        toast.error(data.error || "Delete failed");
       }
     } catch {
-      alert("Delete failed — network error");
+      toast.error("Delete failed — network error");
     } finally {
       setActionLoading(false);
       onRetry();
@@ -125,10 +126,10 @@ export function useR2Operations({
 
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
-        alert(data.error || "Rename failed");
+        toast.error(data.error || "Rename failed");
       }
     } catch {
-      alert("Rename failed — network error");
+      toast.error("Rename failed — network error");
     } finally {
       setRenameTarget(null);
       setRenameValue("");

package/components/builder/editors/AudioBlockEditor.tsx

@@ -28,32 +28,34 @@ interface Props {
 }
 
 export default function AudioBlockEditor({ block }: Props) {
-  const store = useBuilderStore();
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const viewport = useActiveViewport();
   const paletteSwatches = usePaletteSwatches();
 
-  const snapshotOnFocus = () => store._pushSnapshot();
+  const snapshotOnFocus = () => _pushSnapshot();
 
   const updateResponsive = (property: string, value: unknown) => {
     if (viewport === "desktop") {
-      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+      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>);
+      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>);
+    updateBlock(block._key, overrides as Partial<ContentBlock>);
   };
 
   const update = (updates: Partial<AudioBlock>) => {
-    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+    updateBlock(block._key, updates as Partial<ContentBlock>);
   };
 
   const updateDebounced = (updates: Partial<AudioBlock>) => {
-    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+    updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
   };
 
   const effectiveWidth = getEffectiveValue<string>(
@@ -181,7 +183,7 @@ export default function AudioBlockEditor({ block }: Props) {
               value={String(getEffectiveValue<string>(block as ContentBlock, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
               onFocus={snapshotOnFocus}
               onChange={(e) => {
-                store._pushSnapshot();
+                _pushSnapshot();
                 updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
               }}
               className={INPUT_CLASS}

package/components/builder/editors/BeforeAfterBlockEditor.tsx

@@ -29,32 +29,34 @@ interface Props {
 }
 
 export default function BeforeAfterBlockEditor({ block }: Props) {
-  const store = useBuilderStore();
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const viewport = useActiveViewport();
   const paletteSwatches = usePaletteSwatches();
 
-  const snapshotOnFocus = () => store._pushSnapshot();
+  const snapshotOnFocus = () => _pushSnapshot();
 
   const updateResponsive = (property: string, value: unknown) => {
     if (viewport === "desktop") {
-      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+      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>);
+      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>);
+    updateBlock(block._key, overrides as Partial<ContentBlock>);
   };
 
   const update = (updates: Partial<BeforeAfterBlock>) => {
-    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+    updateBlock(block._key, updates as Partial<ContentBlock>);
   };
 
   const updateDebounced = (updates: Partial<BeforeAfterBlock>) => {
-    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+    updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
   };
 
   const beforeType = block.before_media_type || "image";
@@ -297,7 +299,7 @@ export default function BeforeAfterBlockEditor({ block }: Props) {
               value={String(getEffectiveValue<string>(block as ContentBlock, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
               onFocus={snapshotOnFocus}
               onChange={(e) => {
-                store._pushSnapshot();
+                _pushSnapshot();
                 updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
               }}
               className={INPUT_CLASS}

package/components/builder/editors/ButtonBlockEditor.tsx

@@ -23,32 +23,34 @@ interface Props {
 }
 
 export default function ButtonBlockEditor({ block }: Props) {
-  const store = useBuilderStore();
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const viewport = useActiveViewport();
-  const snapshotOnFocus = () => store._pushSnapshot();
+  const snapshotOnFocus = () => _pushSnapshot();
 
   // Responsive-aware update
   const updateResponsive = (property: string, value: unknown) => {
     if (viewport === "desktop") {
-      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+      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>);
+      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>);
+    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>);
+    updateBlock(block._key, updates as Partial<ContentBlock>);
   };
 
   const updateDebounced = (updates: Partial<ButtonBlock>) => {
-    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+    updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
   };
 
   // Effective values for the active viewport

package/components/builder/editors/ImageBlockEditor.tsx

@@ -25,33 +25,35 @@ interface Props {
 }
 
 export default function ImageBlockEditor({ block }: Props) {
-  const store = useBuilderStore();
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const viewport = useActiveViewport();
 
-  const snapshotOnFocus = () => store._pushSnapshot();
+  const snapshotOnFocus = () => _pushSnapshot();
 
   // Responsive-aware update for layout/appearance properties
   const updateResponsive = (property: string, value: unknown) => {
     if (viewport === "desktop") {
-      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+      updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
     } else {
       const overrides = setResponsiveOverride(block, viewport, property, value);
-      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+      updateBlock(block._key, overrides as Partial<ContentBlock>);
     }
   };
 
   const resetOverride = (property: string) => {
     const overrides = setResponsiveOverride(block, viewport, property, undefined);
-    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    updateBlock(block._key, overrides as Partial<ContentBlock>);
   };
 
   // Direct update (base block, not responsive)
   const update = (updates: Partial<ImageBlock>) => {
-    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+    updateBlock(block._key, updates as Partial<ContentBlock>);
   };
 
   const updateDebounced = (updates: Partial<ImageBlock>) => {
-    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+    updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
   };
 
   // Effective values for the active viewport
@@ -166,7 +168,7 @@ export default function ImageBlockEditor({ block }: Props) {
               value={String(getEffectiveValue<string>(block, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
               onFocus={snapshotOnFocus}
               onChange={(e) => {
-                store._pushSnapshot();
+                _pushSnapshot();
                 updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
               }}
               className={INPUT_CLASS}