@morphika/andami 0.5.3 → 0.5.5

package/components/builder/settings-panel/TRBLInputs.tsx

@@ -22,7 +22,7 @@ export function TRBLInputs({
   left: string;
   onChange: (field: "top" | "right" | "bottom" | "left", value: string) => void;
 }) {
-  const store = useBuilderStore();
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const fields = [
     { key: "top" as const, label: "TOP", value: top },
     { key: "right" as const, label: "RIGHT", value: right },
@@ -40,7 +40,7 @@ export function TRBLInputs({
           <input
             type="number"
             value={f.value || "0"}
-            onFocus={() => store._pushSnapshot()}
+            onFocus={() => _pushSnapshot()}
             onChange={(e) => onChange(f.key, e.target.value)}
             className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-1.5 py-[6px] text-xs text-neutral-900 text-center outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]"
           />

package/components/builder/settings-panel/useSettingsPanelSelection.ts

@@ -39,10 +39,13 @@ export interface SelectedParallaxSlideInfo {
 }
 
 export function useSettingsPanelSelection() {
-  const store = useBuilderStore();
+  const rows = useBuilderStore((s) => s.rows);
+  const selectedRowKey = useBuilderStore((s) => s.selectedRowKey);
+  const selectedColumnKey = useBuilderStore((s) => s.selectedColumnKey);
+  const selectedBlockKey = useBuilderStore((s) => s.selectedBlockKey);
 
   // Find selected elements — handle page sections, V2 sections, and parallax groups/slides
-  const selectedItem: ContentItem | undefined = store.rows.find((r) => r._key === store.selectedRowKey);
+  const selectedItem: ContentItem | undefined = rows.find((r) => r._key === selectedRowKey);
   const selectedSectionV2: PageSectionV2 | null = selectedItem && isPageSectionV2(selectedItem) ? selectedItem : null;
   const selectedCustomSectionInstance: CustomSectionInstance | null = selectedItem && isCustomSectionInstance(selectedItem) ? selectedItem as CustomSectionInstance : null;
   const selectedCoverSection: CoverSection | null = selectedItem && isCoverSection(selectedItem) ? selectedItem as CoverSection : null;
@@ -50,11 +53,11 @@ export function useSettingsPanelSelection() {
   // Parallax detection: group selected directly, or slide selected (search inside groups)
   const selectedParallaxGroup: ParallaxGroup | null = selectedItem && isParallaxGroup(selectedItem) ? selectedItem as ParallaxGroup : null;
   const selectedParallaxSlide: SelectedParallaxSlideInfo | null = (() => {
-    if (!store.selectedRowKey) return null;
-    for (const item of store.rows) {
+    if (!selectedRowKey) return null;
+    for (const item of rows) {
       if (!isParallaxGroup(item)) continue;
       const group = item as ParallaxGroup;
-      const slide = group.slides.find((s) => s._key === store.selectedRowKey);
+      const slide = group.slides.find((s) => s._key === selectedRowKey);
       if (slide) {
         // Create a virtual PageSectionV2 for the slide so we can delegate to SectionV2Settings etc.
         const virtualSection: PageSectionV2 = {
@@ -86,19 +89,19 @@ export function useSettingsPanelSelection() {
 
   // V2 column: when a V2 section (or parallax slide or cover section) is selected and a column key is set
   const effectiveSectionV2 = selectedSectionV2 || selectedParallaxSlide?.virtualSection || coverVirtualSection || null;
-  const selectedColumnV2: SectionColumn | null = effectiveSectionV2 && store.selectedColumnKey
-    ? effectiveSectionV2.columns.find((c) => c._key === store.selectedColumnKey) || null
+  const selectedColumnV2: SectionColumn | null = effectiveSectionV2 && selectedColumnKey
+    ? effectiveSectionV2.columns.find((c) => c._key === selectedColumnKey) || null
     : null;
 
   const selectedBlock: SelectedBlockInfo | null = (() => {
     // Block search inside V2 sections and parallax slides
-    if (!store.selectedBlockKey) return null;
-    for (const item of store.rows) {
+    if (!selectedBlockKey) return null;
+    for (const item of rows) {
       // V2 sections: search inside columns
       if (isPageSectionV2(item)) {
         for (const col of (item as PageSectionV2).columns || []) {
           const block = (col.blocks || []).find(
-            (b) => b._key === store.selectedBlockKey
+            (b) => b._key === selectedBlockKey
           );
           if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
         }
@@ -107,7 +110,7 @@ export function useSettingsPanelSelection() {
       if (isCoverSection(item)) {
         for (const col of (item as CoverSection).columns || []) {
           const block = (col.blocks || []).find(
-            (b) => b._key === store.selectedBlockKey
+            (b) => b._key === selectedBlockKey
           );
           if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
         }
@@ -118,7 +121,7 @@ export function useSettingsPanelSelection() {
         for (const slide of group.slides) {
           for (const col of slide.columns || []) {
             const block = (col.blocks || []).find(
-              (b) => b._key === store.selectedBlockKey
+              (b) => b._key === selectedBlockKey
             );
             if (block) return { block, rowKey: slide._key, colKey: col._key, isSection: false };
           }
@@ -167,7 +170,7 @@ export function useSettingsPanelSelection() {
   const headerGradient = BLOCK_GRADIENTS[headerStyleKey] || BLOCK_GRADIENTS.page;
   const HeaderIconComponent = BLOCK_ICON_COMPONENTS[headerStyleKey];
 
-  const hasSelection = !!(store.selectedRowKey || store.selectedColumnKey || store.selectedBlockKey);
+  const hasSelection = !!(selectedRowKey || selectedColumnKey || selectedBlockKey);
   // V2 columns: show Settings + Animation tabs (not Layout) — but NOT when a block inside the column is selected
   const isColumnOnly = !!(selectedColumnV2 && !selectedBlock);
   // Parallax group header: show Settings + Animation (no Layout)

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/components/ui/ToastStack.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useToastStore, type Toast } from "../../lib/toast/store";
+
+/**
+ * ToastStack — renders the global toast queue in a fixed bottom-right stack.
+ *
+ * Mount once, anywhere in the React tree (the framework's admin layout already
+ * includes this). Uses a portal to `document.body` so toast z-index isn't
+ * constrained by parent stacking contexts.
+ *
+ * Each toast auto-dismisses after its `duration`; users can also click the
+ * close button or focus + Escape.
+ */
+export default function ToastStack() {
+  const toasts = useToastStore((s) => s.toasts);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed bottom-4 right-4 z-[9999] flex flex-col items-end gap-2"
+      role="region"
+      aria-label="Notifications"
+    >
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} />
+      ))}
+    </div>,
+    document.body
+  );
+}
+
+function ToastItem({ toast }: { toast: Toast }) {
+  const dismiss = useToastStore((s) => s.dismiss);
+  const [entered, setEntered] = useState(false);
+
+  useEffect(() => {
+    // Next tick → trigger enter transition
+    const enterFrame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(enterFrame);
+  }, []);
+
+  useEffect(() => {
+    if (toast.duration === null) return;
+    const timer = setTimeout(() => dismiss(toast.id), toast.duration);
+    return () => clearTimeout(timer);
+  }, [toast.id, toast.duration, dismiss]);
+
+  const tone = TONE[toast.kind];
+
+  return (
+    <div
+      role={toast.kind === "error" ? "alert" : "status"}
+      aria-live={toast.kind === "error" ? "assertive" : "polite"}
+      className={`pointer-events-auto flex items-start gap-3 min-w-[260px] max-w-[400px] px-4 py-3 rounded-lg shadow-lg border transition-all duration-200 ${tone.bg} ${tone.border} ${
+        entered ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
+      }`}
+    >
+      <span className={`mt-0.5 shrink-0 ${tone.icon}`} aria-hidden="true">
+        {ICONS[toast.kind]}
+      </span>
+      <p className={`flex-1 text-[13px] leading-snug ${tone.text}`}>{toast.message}</p>
+      <button
+        type="button"
+        onClick={() => dismiss(toast.id)}
+        className={`shrink-0 -mt-0.5 -mr-1 p-1 rounded transition-colors ${tone.close}`}
+        aria-label="Dismiss notification"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+const TONE = {
+  default: {
+    bg: "bg-neutral-900",
+    border: "border-neutral-700",
+    text: "text-neutral-100",
+    icon: "text-neutral-400",
+    close: "text-neutral-400 hover:text-neutral-100 hover:bg-white/10",
+  },
+  success: {
+    bg: "bg-emerald-950",
+    border: "border-emerald-800",
+    text: "text-emerald-50",
+    icon: "text-emerald-400",
+    close: "text-emerald-400 hover:text-emerald-100 hover:bg-emerald-900/60",
+  },
+  error: {
+    bg: "bg-red-950",
+    border: "border-red-800",
+    text: "text-red-50",
+    icon: "text-red-400",
+    close: "text-red-400 hover:text-red-100 hover:bg-red-900/60",
+  },
+  info: {
+    bg: "bg-sky-950",
+    border: "border-sky-800",
+    text: "text-sky-50",
+    icon: "text-sky-400",
+    close: "text-sky-400 hover:text-sky-100 hover:bg-sky-900/60",
+  },
+};
+
+const ICONS: Record<string, React.ReactNode> = {
+  default: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  ),
+  success: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  ),
+  error: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  ),
+  info: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  ),
+};

package/lib/auth-token.ts

@@ -84,7 +84,11 @@ export async function validateAdminToken(token: string): Promise<boolean> {
   const key = await getSigningKey(pw);
   const expectedSignature = await hmacSign(key, `admin_session:${timestamp}`);
 
-  // Constant-time comparison to prevent timing attacks
+  // Constant-time comparison to prevent timing attacks.
+  // NOTE: we intentionally do NOT use `crypto.timingSafeEqual` here — that's a
+  // Node.js-only API and this file runs on the Edge Runtime too (middleware).
+  // The manual XOR loop is the portable equivalent; do not "simplify" it to
+  // a `===` compare or a Node-only API without breaking Edge compat.
   if (providedSignature.length !== expectedSignature.length) return false;
   let mismatch = 0;
   for (let i = 0; i < expectedSignature.length; i++) {

package/lib/bot-guard.ts

@@ -14,6 +14,12 @@ import { NextRequest, NextResponse } from "next/server";
 
 // ── Known aggressive bot User-Agents ────────────────────────────────────
 // These bots ignore robots.txt or crawl too aggressively for Hobby-tier hosting.
+//
+// Last reviewed: 2026-04-20 (Session 184 audit). New LLM-scraping bots appear
+// frequently — review this list at least quarterly. Good signals to watch:
+//   - Vercel logs: look for User-Agents with high request volume
+//   - https://darkvisitors.com/ — community database of AI crawlers
+//   - Cloudflare radar / new entries in public robots.txt blocklists
 const BLOCKED_BOT_PATTERNS = [
   "GPTBot",
   "CCBot",

package/lib/builder/constants.ts

@@ -77,13 +77,6 @@ export const BUILDER_BLOCK = "#3580f9";      // Blocks — same hue as columns
 export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom)
 export const BUILDER_GREEN = "#22c55e";      // Success / confirmation cues (e.g. R2 asset check)
 
-/**
- * @deprecated Use `BUILDER_BLOCK` instead. The legacy name survived multiple
- * colour migrations (orange → emerald → blue) and no longer reflects reality.
- * Kept as an alias so third-party code doesn't break at the import boundary.
- */
-export const BUILDER_ORANGE = BUILDER_BLOCK;
-
 /**
  * Padding map for Row settings (in pixels)
  * Used by builder (SortableRow, ReadOnlyFrame) and public site (RowRenderer)

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: [],
       }));
     },
   };