@morphika/andami 0.5.4 → 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/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/toast/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Public toast API.
+ *
+ * Usage:
+ *   import { toast } from "@morphika/andami/lib/toast";
+ *   toast.success("Saved");
+ *   toast.error("Upload failed");
+ *   toast.info("Processing…");
+ *   toast("Plain message");
+ *
+ * The `<ToastStack />` component (exported from `components/ui/ToastStack.tsx`)
+ * must be mounted somewhere in the tree — it's already included in the admin
+ * layout provided by the framework.
+ */
+
+import { useToastStore, type ToastKind } from "./store";
+
+/** Default auto-dismiss durations per kind (ms). */
+const DEFAULT_DURATIONS: Record<ToastKind, number> = {
+  default: 4000,
+  success: 4000,
+  info: 4000,
+  error: 6000,
+};
+
+interface ToastOptions {
+  /** Auto-dismiss after N ms. Pass `null` to keep the toast until dismissed manually. */
+  duration?: number | null;
+}
+
+function emit(message: string, kind: ToastKind, options?: ToastOptions): string {
+  const duration =
+    options?.duration === undefined ? DEFAULT_DURATIONS[kind] : options.duration;
+  return useToastStore.getState().push(message, kind, duration);
+}
+
+interface ToastFn {
+  (message: string, options?: ToastOptions): string;
+  success: (message: string, options?: ToastOptions) => string;
+  error: (message: string, options?: ToastOptions) => string;
+  info: (message: string, options?: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  clear: () => void;
+}
+
+const toastFn = ((message: string, options?: ToastOptions) => emit(message, "default", options)) as ToastFn;
+toastFn.success = (message, options) => emit(message, "success", options);
+toastFn.error = (message, options) => emit(message, "error", options);
+toastFn.info = (message, options) => emit(message, "info", options);
+toastFn.dismiss = (id) => useToastStore.getState().dismiss(id);
+toastFn.clear = () => useToastStore.getState().clear();
+
+export const toast = toastFn;
+
+export { useToastStore } from "./store";
+export type { Toast, ToastKind } from "./store";

package/lib/toast/store.ts

@@ -0,0 +1,56 @@
+/**
+ * Toast notification store — transient messages shown bottom-right of the admin.
+ *
+ * Independent Zustand store (not merged with the builder store) because toasts
+ * are cross-cutting: anything that mutates state or calls an API might want to
+ * surface feedback, and pulling that into the builder store would bloat it.
+ *
+ * Imperative API (see `index.ts`) mirrors conventions from `sonner` / `react-hot-toast`:
+ *   toast.success("Saved"); toast.error("Failed"); toast.info("Hello");
+ *
+ * The `<ToastStack />` component subscribes to `toasts` and renders them.
+ */
+"use client";
+
+import { create } from "zustand";
+
+export type ToastKind = "default" | "success" | "error" | "info";
+
+export interface Toast {
+  id: string;
+  message: string;
+  kind: ToastKind;
+  /** ms before auto-dismiss. `null` = never auto-dismiss. */
+  duration: number | null;
+  createdAt: number;
+}
+
+interface ToastStore {
+  toasts: Toast[];
+  push: (message: string, kind: ToastKind, duration: number | null) => string;
+  dismiss: (id: string) => void;
+  clear: () => void;
+}
+
+/** Max simultaneous toasts — oldest is dropped when exceeded. */
+const MAX_VISIBLE = 5;
+
+export const useToastStore = create<ToastStore>((set) => ({
+  toasts: [],
+  push: (message, kind, duration) => {
+    const id =
+      typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : `t${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    set((state) => {
+      const next = [...state.toasts, { id, message, kind, duration, createdAt: Date.now() }];
+      // Cap queue — drop oldest when exceeded
+      return { toasts: next.slice(-MAX_VISIBLE) };
+    });
+    return id;
+  },
+  dismiss: (id) => {
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+  },
+  clear: () => set({ toasts: [] }),
+}));

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.5.4";
+export const ANDAMI_VERSION = "0.5.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -103,6 +103,8 @@
     "./lib/logger": "./lib/logger.ts",
     "./lib/audit": "./lib/audit.ts",
     "./lib/revalidate": "./lib/revalidate.ts",
+    "./lib/toast": "./lib/toast/index.ts",
+    "./lib/toast/store": "./lib/toast/store.ts",
     "./lib/color-utils": "./lib/color-utils.ts",
     "./lib/format-utils": "./lib/format-utils.ts",
     "./lib/utils": "./lib/utils.ts",