@morphika/andami 0.5.2 → 0.5.4

package/components/ui/NavContentLightbox.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useRef } from "react";
 import { assetUrl } from "../../lib/assets";
 
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, [tabindex]:not([tabindex="-1"])';
+
 // ============================================
 // Helpers
 // ============================================
@@ -42,22 +45,51 @@ export default function NavContentLightbox({
   contentUrl,
   onClose,
 }: NavContentLightboxProps) {
-  // Close on Escape
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  // Focus trap: cycle Tab between focusable children, close on Escape
   const handleKey = useCallback(
     (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !containerRef.current) return;
+
+      const focusables = containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+      if (focusables.length === 0) return;
+
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
     },
     [onClose]
   );
 
   useEffect(() => {
+    // Remember where focus came from so we can restore it on close
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
     window.addEventListener("keydown", handleKey);
-    // Lock body scroll
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
+
+    // Move focus into the lightbox (close button is always present)
+    closeButtonRef.current?.focus();
+
     return () => {
       window.removeEventListener("keydown", handleKey);
       document.body.style.overflow = prev;
+      previouslyFocused?.focus?.();
     };
   }, [handleKey]);
 
@@ -78,11 +110,16 @@ export default function NavContentLightbox({
 
   return (
     <div
+      ref={containerRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Media lightbox"
       className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm"
       onClick={onClose}
     >
       {/* Close button */}
       <button
+        ref={closeButtonRef}
         onClick={onClose}
         className="absolute top-5 right-5 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors z-10"
         aria-label="Close lightbox"

package/lib/builder/serializer/normalizers.ts

@@ -31,6 +31,19 @@ export function normalizePageSectionV2(section: Partial<PageSectionV2> & { _key:
     // Migrate column-level enter_animation (new field, no old equivalent for columns)
     const colEnterAnimation = colRecord.enter_animation as EnterAnimationConfig | undefined;
 
+    // Column-level background + border — carry through from Sanity (desktop-only).
+    const colLayoutFields: Partial<SectionColumn> = {};
+    for (const field of [
+      "background_color", "background_opacity", "background_image",
+      "background_size", "background_position", "background_repeat",
+      "border_color", "border_width", "border_style", "border_sides", "border_radius",
+    ] as const) {
+      const val = colRecord[field];
+      if (val !== undefined && val !== null) {
+        (colLayoutFields as Record<string, unknown>)[field] = val;
+      }
+    }
+
     return {
       _key: col._key || generateKey(),
       grid_column: col.grid_column || 1,
@@ -55,6 +68,7 @@ export function normalizePageSectionV2(section: Partial<PageSectionV2> & { _key:
         return b as ContentBlock;
       }),
       ...(colEnterAnimation ? { enter_animation: colEnterAnimation } : {}),
+      ...colLayoutFields,
     };
   });
 

package/lib/builder/serializer/serializers.ts

@@ -134,6 +134,21 @@ function serializePageSectionV2(section: PageSectionV2): Record<string, unknown>
       if (col.enter_animation && col.enter_animation.preset && col.enter_animation.preset !== "none") {
         colData.enter_animation = col.enter_animation;
       }
+      // Column-level background + border (desktop-only).
+      const colLayout = stripUndefined({
+        background_color: col.background_color,
+        background_opacity: col.background_opacity,
+        background_image: col.background_image,
+        background_size: col.background_size,
+        background_position: col.background_position,
+        background_repeat: col.background_repeat,
+        border_color: col.border_color,
+        border_width: col.border_width,
+        border_style: col.border_style,
+        border_sides: col.border_sides,
+        border_radius: col.border_radius,
+      });
+      if (colLayout) Object.assign(colData, colLayout);
       return colData;
     }),
     settings: s ? stripUndefined({
@@ -223,6 +238,18 @@ function serializeCoverSection(section: CoverSection): Record<string, unknown> {
     span: col.span,
     blocks: (col.blocks || []).map((b) => serializeBlock(b)),
     enter_animation: col.enter_animation,
+    // Column-level background + border (desktop-only).
+    background_color: col.background_color,
+    background_opacity: col.background_opacity,
+    background_image: col.background_image,
+    background_size: col.background_size,
+    background_position: col.background_position,
+    background_repeat: col.background_repeat,
+    border_color: col.border_color,
+    border_width: col.border_width,
+    border_style: col.border_style,
+    border_sides: col.border_sides,
+    border_radius: col.border_radius,
   } as Record<string, unknown>));
 
   return stripUndefined({

package/lib/builder/store-blocks.ts

@@ -60,7 +60,6 @@ export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActi
     },
 
     deleteBlock: (blockKey: string): void => {
-      get()._pushSnapshot();
       const filterBlocks = (cols: import("../../lib/sanity/types").SectionColumn[]) =>
         cols.map((c) => ({ ...c, blocks: c.blocks.filter((b) => b._key !== blockKey) }));
 
@@ -88,12 +87,13 @@ export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActi
           rows: finalRows,
           selectedBlockKey: state.selectedBlockKey === blockKey ? null : state.selectedBlockKey,
           isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
         };
       });
     },
 
     duplicateBlock: (blockKey: string): void => {
-      get()._pushSnapshot();
       set((state) => {
         const newKey = generateKey();
         const dupInColumns = (cols: import("../../lib/sanity/types").SectionColumn[]) =>
@@ -125,7 +125,13 @@ export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActi
           }
           return item;
         });
-        return { rows, selectedBlockKey: newKey, isDirty: true };
+        return {
+          rows,
+          selectedBlockKey: newKey,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
@@ -148,7 +154,6 @@ export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActi
     },
 
     reorderBlocks: (sectionKey: string, columnKey: string, fromIndex: number, toIndex: number): void => {
-      get()._pushSnapshot();
       set((state) => {
         const path = findSectionPath(state.rows, sectionKey);
         if (!path) return state;
@@ -162,7 +167,12 @@ export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActi
             return { ...c, blocks };
           }),
         }));
-        return { rows, isDirty: true };
+        return {
+          rows,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 

package/lib/builder/store-cover.ts

@@ -19,6 +19,7 @@ import type {
 import { isCoverSection } from "../../lib/sanity/types";
 import { generateKey } from "./utils";
 import { createDefaultCoverSection, createDefaultCoverRow } from "./defaults";
+import { pushSnapshot } from "./history";
 
 type StoreSet = (
   partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
@@ -82,7 +83,6 @@ function updateCoverInRows(
 export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActions {
   return {
     addCoverSection: (afterRowKey?: string | null): void => {
-      get()._pushSnapshot();
       const section = createDefaultCoverSection();
       set((state) => {
         const rows = [...state.rows];
@@ -96,12 +96,17 @@ export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActi
         } else {
           rows.push(section);
         }
-        return { rows, isDirty: true, selectedRowKey: section._key };
+        return {
+          rows,
+          isDirty: true,
+          selectedRowKey: section._key,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
       });
     },
 
     addCoverRow: (sectionKey: string): void => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: updateCoverInRows(state.rows, sectionKey, (section) => {
           if (section.cover_rows.length >= 5) return section;
@@ -137,11 +142,12 @@ export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActi
           return { ...section, cover_rows: newRows };
         }),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
     removeCoverRow: (sectionKey: string, rowKey: string): void => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: updateCoverInRows(state.rows, sectionKey, (section) => {
           if (section.cover_rows.length <= 1) return section;
@@ -183,6 +189,8 @@ export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActi
           };
         }),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
@@ -248,13 +256,14 @@ export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActi
         "nav_color"
       >>
     ): void => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: updateCoverInRows(state.rows, sectionKey, (section) => ({
           ...section,
           ...fields,
         })),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
 
@@ -275,13 +284,14 @@ export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActi
       sectionKey: string,
       height: CoverSection["height"]
     ): void => {
-      get()._pushSnapshot();
       set((state) => ({
         rows: updateCoverInRows(state.rows, sectionKey, (section) => ({
           ...section,
           height,
         })),
         isDirty: true,
+        _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+        _future: [],
       }));
     },
   };