@morphika/andami 0.5.4 → 0.5.5

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/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,7 +324,7 @@ 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={{

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}

package/components/builder/editors/ImageGridBlockEditor.tsx

@@ -95,35 +95,37 @@ function ImageThumb({
 // ============================================
 
 export default function ImageGridBlockEditor({ 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 images = block.images || [];
   const [browserOpen, setBrowserOpen] = useState(false);
 
-  const snapshotOnFocus = () => store._pushSnapshot();
+  const snapshotOnFocus = () => _pushSnapshot();
 
   // Responsive update helper
   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 (always base block — for images content)
   const update = (updates: Partial<ImageGridBlock>) => {
-    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+    updateBlock(block._key, updates as Partial<ContentBlock>);
   };
 
   const updateDebounced = (updates: Partial<ImageGridBlock>) => {
-    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+    updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
   };
 
   // Add multiple images at once from browser
@@ -378,7 +380,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
               value={String(getEffectiveValue<string>(block, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
               onFocus={snapshotOnFocus}
               onChange={(v) => {
-                store._pushSnapshot();
+                _pushSnapshot();
                 updateResponsive("border_radius", v.replace(/[^0-9]/g, ""));
               }}
               placeholder="0"

package/components/builder/editors/SpacerBlockEditor.tsx

@@ -39,21 +39,21 @@ export function getSpacerPx(block: SpacerBlock): number {
 }
 
 export default function SpacerBlockEditor({ block }: Props) {
-  const store = useBuilderStore();
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
   const viewport = useActiveViewport();
 
   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>);
   };
 
   const effectiveHeight = getEffectiveValue<string>(