@morphika/andami 0.1.2

package/components/builder/editors/ImageBlockEditor.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { ImageBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+  AssetPathInput,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+  SELECT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: ImageBlock;
+}
+
+export default function ImageBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+
+  const snapshotOnFocus = () => store._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>);
+    } else {
+      const overrides = setResponsiveOverride(block, viewport, property, value);
+      store.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>);
+  };
+
+  // Direct update (base block, not responsive)
+  const update = (updates: Partial<ImageBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<ImageBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  // Effective values for the active viewport
+  const effectiveWidth = getEffectiveValue<string>(
+    block, viewport, "width", block.width || "full"
+  );
+  const effectiveAspect = getEffectiveValue<string>(
+    block, viewport, "aspect_ratio", block.aspect_ratio || "auto"
+  );
+
+  return (
+    <>
+      <ViewportBadge />
+
+      <SettingsSection title="Source" defaultOpen>
+        <SettingsField label="Asset Path" hint="Relative path from seed URL">
+          <AssetPathInput
+            value={block.asset_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ asset_path: v })}
+            placeholder="projects/slug/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        <SettingsField label="Alt Text">
+          <input
+            type="text"
+            value={block.alt || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ alt: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Describe the image"
+          />
+        </SettingsField>
+
+        <SettingsField label="Caption">
+          <input
+            type="text"
+            value={block.caption || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ caption: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Optional caption"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      <SettingsSection title="Layout">
+        <ResponsiveField
+          label="Width"
+          block={block}
+          property="width"
+          onReset={() => resetOverride("width")}
+        >
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "full", label: "100%" },
+                { value: "contained", label: "75%" },
+                { value: "small", label: "50%" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => updateResponsive("width", opt.value)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveWidth === opt.value
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Aspect Ratio"
+          block={block}
+          property="aspect_ratio"
+          onReset={() => resetOverride("aspect_ratio")}
+        >
+          <select
+            value={effectiveAspect}
+            onChange={(e) =>
+              updateResponsive("aspect_ratio", e.target.value)
+            }
+            className={SELECT_CLASS}
+          >
+            <option value="auto">Auto</option>
+            <option value="16:9">16:9</option>
+            <option value="4:3">4:3</option>
+            <option value="1:1">1:1</option>
+            <option value="21:9">21:9</option>
+          </select>
+        </ResponsiveField>
+      </SettingsSection>
+
+      <SettingsSection title="Appearance">
+        <ResponsiveField
+          label="Border Radius"
+          block={block}
+          property="border_radius"
+          onReset={() => resetOverride("border_radius")}
+        >
+          <div className="flex items-center gap-1.5">
+            <input
+              type="number"
+              value={String(getEffectiveValue<string>(block, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => {
+                store._pushSnapshot();
+                updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
+              }}
+              className={INPUT_CLASS}
+              placeholder="0"
+              min={0}
+            />
+            <span className="text-[10px] text-neutral-400 shrink-0">px</span>
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Shadow"
+          block={block}
+          property="shadow"
+          onReset={() => resetOverride("shadow")}
+        >
+          <button
+            type="button"
+            onClick={() => {
+              const effectiveShadow = getEffectiveValue<boolean>(block, viewport, "shadow", block.shadow || false);
+              updateResponsive("shadow", !effectiveShadow);
+            }}
+            className={`relative w-8 h-[18px] rounded-full transition-colors ${
+              getEffectiveValue<boolean>(block, viewport, "shadow", block.shadow || false) ? "bg-[#076bff]" : "bg-neutral-200 hover:bg-neutral-300"
+            }`}
+          >
+            <span
+              className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow-sm transition-transform ${
+                getEffectiveValue<boolean>(block, viewport, "shadow", block.shadow || false) ? "left-[16px]" : "left-[2px]"
+              }`}
+            />
+          </button>
+        </ResponsiveField>
+
+        <StyledCheckbox
+          label="Lazy Loading"
+          checked={block.lazy !== false}
+          onChange={(checked) => update({ lazy: checked })}
+        />
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/editors/ImageGridBlockEditor.tsx

@@ -0,0 +1,386 @@
+"use client";
+
+import { useState } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { ImageGridBlock, ContentBlock } from "../../../lib/sanity/types";
+import AssetBrowser from "../AssetBrowser";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledInput,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  SELECT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: ImageGridBlock;
+}
+
+// ============================================
+// Thumbnail preview with delete-on-hover
+// ============================================
+
+function ImageThumb({
+  assetPath,
+  index,
+  onRemove,
+}: {
+  assetPath: string;
+  index: number;
+  onRemove: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const src = assetPath
+    ? `/api/admin/assets/file?path=${encodeURIComponent(assetPath)}`
+    : "";
+
+  return (
+    <div
+      className="relative aspect-square rounded-lg overflow-hidden bg-neutral-100 cursor-default group"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {assetPath ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={`Image ${index + 1}`}
+          className="w-full h-full object-cover"
+          loading="lazy"
+        />
+      ) : (
+        <div className="w-full h-full flex items-center justify-center text-neutral-300">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <polyline points="21 15 16 10 5 21" />
+          </svg>
+        </div>
+      )}
+
+      {/* Delete overlay */}
+      {hovered && (
+        <div className="absolute inset-0 bg-black/40 flex items-center justify-center transition-opacity">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            className="w-7 h-7 rounded-full bg-white/90 hover:bg-[var(--admin-error)] hover:text-white flex items-center justify-center transition-colors text-neutral-600"
+            title="Remove image"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <polyline points="3 6 5 6 21 6" />
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            </svg>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// Main Editor
+// ============================================
+
+export default function ImageGridBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+  const images = block.images || [];
+  const [browserOpen, setBrowserOpen] = useState(false);
+
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  // Responsive update helper
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+    } else {
+      const overrides = setResponsiveOverride(block, viewport, property, value);
+      store.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>);
+  };
+
+  // Direct update (always base block — for images content)
+  const update = (updates: Partial<ImageGridBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<ImageGridBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  // Add multiple images at once from browser
+  const addImages = (paths: string[]) => {
+    const newImages = paths.map((path) => ({ asset_path: path, alt: "" }));
+    update({ images: [...images, ...newImages] });
+  };
+
+  const removeImage = (index: number) => {
+    snapshotOnFocus();
+    update({ images: images.filter((_, i) => i !== index) });
+  };
+
+  // Effective values for current viewport
+  const effectiveHGutter = getEffectiveValue<number>(
+    block, viewport, "h_gutter", block.h_gutter ?? 10
+  );
+  const effectiveVGutter = getEffectiveValue<number>(
+    block, viewport, "v_gutter", block.v_gutter ?? 10
+  );
+  const effectiveImagesPerRow = getEffectiveValue<number>(
+    block, viewport, "images_per_row", block.images_per_row ?? 2
+  );
+  const effectiveRandomGrid = getEffectiveValue<string>(
+    block, viewport, "random_grid", block.random_grid ?? "disabled"
+  );
+  const effectiveRandomSeed = getEffectiveValue<number>(
+    block, viewport, "random_seed", block.random_seed ?? 1
+  );
+  const effectiveLightbox = getEffectiveValue<boolean>(
+    block, viewport, "lightbox", block.lightbox ?? false
+  );
+  const effectiveObjectFit = getEffectiveValue<string>(
+    block, viewport, "object_fit", block.object_fit ?? "cover"
+  );
+
+  return (
+    <>
+      <ViewportBadge />
+
+      {/* ====== Images Section ====== */}
+      <SettingsSection title="Images" defaultOpen>
+        {/* Thumbnail grid preview */}
+        {images.length > 0 && (
+          <div className="grid grid-cols-4 gap-1.5 mb-3">
+            {images.map((img, i) => (
+              <ImageThumb
+                key={i}
+                assetPath={img.asset_path}
+                index={i}
+                onRemove={() => removeImage(i)}
+              />
+            ))}
+          </div>
+        )}
+
+        {images.length === 0 && (
+          <p className="text-[11px] text-neutral-500 italic mb-2">
+            No images yet — add images to build your grid.
+          </p>
+        )}
+
+        {/* Add Images button — opens browser in multi-select mode */}
+        <button
+          onClick={() => setBrowserOpen(true)}
+          className="w-full rounded-lg border border-dashed border-neutral-300 py-3 text-xs text-neutral-500 hover:border-[#076bff] hover:text-neutral-900 transition-colors flex items-center justify-center gap-2"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <polyline points="21 15 16 10 5 21" />
+          </svg>
+          Add Images to Gallery
+        </button>
+
+        <AssetBrowser
+          open={browserOpen}
+          multiSelect
+          onSelect={(path) => {
+            addImages([path]);
+            setBrowserOpen(false);
+          }}
+          onSelectMultiple={(paths) => {
+            addImages(paths);
+            setBrowserOpen(false);
+          }}
+          onClose={() => setBrowserOpen(false)}
+          filterType="image"
+        />
+      </SettingsSection>
+
+      {/* ====== Settings Section ====== */}
+      <SettingsSection title="Settings" defaultOpen>
+        {/* H-Gutter & V-Gutter side by side */}
+        <div className="flex gap-3">
+          <ResponsiveField
+            label="H-Gutter"
+            block={block}
+            property="h_gutter"
+            onReset={() => resetOverride("h_gutter")}
+          >
+            <StyledInput
+              value={String(effectiveHGutter)}
+              onFocus={snapshotOnFocus}
+              onChange={(v) => {
+                const num = parseInt(v, 10);
+                if (!isNaN(num) && num >= 0) updateResponsive("h_gutter", Math.min(num, 200));
+              }}
+              placeholder="10"
+            />
+          </ResponsiveField>
+
+          <ResponsiveField
+            label="V-Gutter"
+            block={block}
+            property="v_gutter"
+            onReset={() => resetOverride("v_gutter")}
+          >
+            <StyledInput
+              value={String(effectiveVGutter)}
+              onFocus={snapshotOnFocus}
+              onChange={(v) => {
+                const num = parseInt(v, 10);
+                if (!isNaN(num) && num >= 0) updateResponsive("v_gutter", Math.min(num, 200));
+              }}
+              placeholder="10"
+            />
+          </ResponsiveField>
+        </div>
+
+        {/* Images per Row */}
+        <ResponsiveField
+          label="Images per Row"
+          block={block}
+          property="images_per_row"
+          onReset={() => resetOverride("images_per_row")}
+        >
+          <select
+            value={effectiveImagesPerRow}
+            onChange={(e) => updateResponsive("images_per_row", Number(e.target.value))}
+            onFocus={snapshotOnFocus}
+            className={SELECT_CLASS}
+          >
+            <option value={1}>1 Image</option>
+            <option value={2}>2 Images</option>
+            <option value={4}>4 Images</option>
+            <option value={6}>6 Images</option>
+            <option value={12}>12 Images</option>
+          </select>
+        </ResponsiveField>
+
+        {/* Random Grid */}
+        <ResponsiveField
+          label="Random Grid"
+          block={block}
+          property="random_grid"
+          onReset={() => resetOverride("random_grid")}
+        >
+          <select
+            value={effectiveRandomGrid}
+            onChange={(e) => updateResponsive("random_grid", e.target.value)}
+            onFocus={snapshotOnFocus}
+            className={SELECT_CLASS}
+          >
+            <option value="disabled">Disabled</option>
+            <option value="small2-big4">Small 2 Col, Big 4 Col</option>
+            <option value="small3-big6">Small 3 Col, Big 6 Col</option>
+            <option value="small4-big8">Small 4 Col, Big 8 Col</option>
+          </select>
+        </ResponsiveField>
+
+        {/* Refresh Grid button — only shown when random grid is enabled */}
+        {effectiveRandomGrid !== "disabled" && (
+          <button
+            onClick={() => {
+              snapshotOnFocus();
+              const newSeed = Math.floor(Math.random() * 999999) + 1;
+              updateResponsive("random_seed", newSeed);
+            }}
+            className="w-full rounded-lg bg-brand-accent-alt py-2 text-[11px] text-neutral-900 font-medium uppercase tracking-wider hover:bg-brand-accent transition-colors"
+          >
+            Refresh Grid
+          </button>
+        )}
+
+        {/* Lightbox toggle */}
+        <SettingsField label="Lightbox">
+          <div className="flex rounded-lg overflow-hidden border border-neutral-200">
+            <button
+              onClick={() => {
+                snapshotOnFocus();
+                updateResponsive("lightbox", true);
+              }}
+              className={`flex-1 py-1.5 text-xs font-medium transition-colors ${
+                effectiveLightbox
+                  ? "bg-[#076bff] text-white"
+                  : "bg-white text-neutral-500 hover:bg-neutral-50"
+              }`}
+            >
+              Yes
+            </button>
+            <button
+              onClick={() => {
+                snapshotOnFocus();
+                updateResponsive("lightbox", false);
+              }}
+              className={`flex-1 py-1.5 text-xs font-medium transition-colors ${
+                !effectiveLightbox
+                  ? "bg-[#076bff] text-white"
+                  : "bg-white text-neutral-500 hover:bg-neutral-50"
+              }`}
+            >
+              No
+            </button>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ====== Appearance Section ====== */}
+      <SettingsSection title="Appearance">
+        <ResponsiveField
+          label="Object Fit"
+          block={block}
+          property="object_fit"
+          onReset={() => resetOverride("object_fit")}
+        >
+          <div className="flex gap-1">
+            {(["cover", "contain"] as const).map((f) => (
+              <button
+                key={f}
+                onClick={() => updateResponsive("object_fit", f)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveObjectFit === f
+                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {f}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <ResponsiveField
+          label="Border Radius"
+          block={block}
+          property="border_radius"
+          onReset={() => resetOverride("border_radius")}
+        >
+          <div className="flex items-center gap-1.5">
+            <StyledInput
+              value={String(getEffectiveValue<string>(block, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
+              onFocus={snapshotOnFocus}
+              onChange={(v) => {
+                store._pushSnapshot();
+                updateResponsive("border_radius", v.replace(/[^0-9]/g, ""));
+              }}
+              placeholder="0"
+              type="number"
+            />
+            <span className="text-[10px] text-neutral-400 shrink-0">px</span>
+          </div>
+        </ResponsiveField>
+      </SettingsSection>
+    </>
+  );
+}