@morphika/andami 0.5.0 → 0.5.2

package/components/builder/editors/BeforeAfterBlockEditor.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { BeforeAfterBlock, ContentBlock } from "../../../lib/sanity/types";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { resolveColorHex } from "../../../lib/color-utils";
+import {
+  SourceIcon,
+  LayoutIcon,
+  AppearanceIcon,
+  PlaybackIcon,
+  OptionsIcon,
+} from "./section-icons";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+  AssetPathInput,
+  ViewportBadge,
+  ResponsiveField,
+  useActiveViewport,
+  INPUT_CLASS,
+  SELECT_CLASS,
+} from "./shared";
+
+interface Props {
+  block: BeforeAfterBlock;
+}
+
+export default function BeforeAfterBlockEditor({ block }: Props) {
+  const store = useBuilderStore();
+  const viewport = useActiveViewport();
+  const paletteSwatches = usePaletteSwatches();
+
+  const snapshotOnFocus = () => store._pushSnapshot();
+
+  const updateResponsive = (property: string, value: unknown) => {
+    if (viewport === "desktop") {
+      store.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>);
+    }
+  };
+
+  const resetOverride = (property: string) => {
+    const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
+    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+  };
+
+  const update = (updates: Partial<BeforeAfterBlock>) => {
+    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const updateDebounced = (updates: Partial<BeforeAfterBlock>) => {
+    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+  };
+
+  const beforeType = block.before_media_type || "image";
+  const afterType = block.after_media_type || "image";
+
+  const effectiveWidth = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "width", block.width || "full"
+  );
+  const effectiveAspect = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "aspect_ratio", block.aspect_ratio || "16:9"
+  );
+  const effectiveOrientation = getEffectiveValue<string>(
+    block as ContentBlock, viewport, "orientation", block.orientation || "horizontal"
+  );
+
+  const eitherIsVideo = beforeType === "video" || afterType === "video";
+
+  return (
+    <>
+      <ViewportBadge />
+
+      {/* ── Before source ── */}
+      <SettingsSection title="Before" defaultOpen icon={<SourceIcon />}>
+        <SettingsField label="Media Type">
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "image", label: "Image" },
+                { value: "video", label: "Video" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => update({ before_media_type: opt.value })}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  beforeType === opt.value
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Asset Path" hint="Relative path from seed URL">
+          <AssetPathInput
+            value={block.before_asset_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ before_asset_path: v })}
+            placeholder={beforeType === "video" ? "projects/slug/before.mp4" : "projects/slug/before.jpg"}
+            filterType={beforeType}
+          />
+        </SettingsField>
+
+        <SettingsField label="Alt Text">
+          <input
+            type="text"
+            value={block.before_alt || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ before_alt: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Describe the before media"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── After source ── */}
+      <SettingsSection title="After" icon={<SourceIcon />}>
+        <SettingsField label="Media Type">
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "image", label: "Image" },
+                { value: "video", label: "Video" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => update({ after_media_type: opt.value })}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  afterType === opt.value
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Asset Path" hint="Relative path from seed URL">
+          <AssetPathInput
+            value={block.after_asset_path || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(v) => updateDebounced({ after_asset_path: v })}
+            placeholder={afterType === "video" ? "projects/slug/after.mp4" : "projects/slug/after.jpg"}
+            filterType={afterType}
+          />
+        </SettingsField>
+
+        <SettingsField label="Alt Text">
+          <input
+            type="text"
+            value={block.after_alt || ""}
+            onFocus={snapshotOnFocus}
+            onChange={(e) => updateDebounced({ after_alt: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Describe the after media"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── Slider options ── */}
+      <SettingsSection title="Slider" icon={<OptionsIcon />}>
+        <ResponsiveField
+          label="Orientation"
+          block={block as ContentBlock}
+          property="orientation"
+          onReset={() => resetOverride("orientation")}
+        >
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "horizontal", label: "Horizontal" },
+                { value: "vertical", label: "Vertical" },
+              ] as const
+            ).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => updateResponsive("orientation", opt.value)}
+                className={`flex-1 rounded border py-1 text-xs transition-colors ${
+                  effectiveOrientation === opt.value
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
+                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </ResponsiveField>
+
+        <SettingsField label="Initial Position" hint="0–100%">
+          <div className="flex items-center gap-1.5">
+            <input
+              type="number"
+              min={0}
+              max={100}
+              value={block.initial_position ?? 50}
+              onFocus={snapshotOnFocus}
+              onChange={(e) => {
+                const n = Math.max(0, Math.min(100, Number(e.target.value) || 0));
+                updateDebounced({ initial_position: n });
+              }}
+              className={INPUT_CLASS}
+              placeholder="50"
+            />
+            <span className="text-[10px] text-neutral-400 shrink-0">%</span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Handle Color">
+          <ColorSwatchPicker
+            value={block.handle_color || "#FFFFFF"}
+            onChange={(value) => {
+              const hex = resolveColorHex(value) || "#FFFFFF";
+              update({ handle_color: hex });
+            }}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ── Layout ── */}
+      <SettingsSection title="Layout" icon={<LayoutIcon />}>
+        <ResponsiveField
+          label="Width"
+          block={block as ContentBlock}
+          property="width"
+          onReset={() => resetOverride("width")}
+        >
+          <div className="flex gap-1">
+            {(
+              [
+                { value: "full", label: "Full" },
+                { value: "contained", label: "Contained" },
+                { value: "small", label: "Small" },
+                { value: "fill", label: "Fill" },
+              ] 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-[#3580f9] bg-[#3580f9]/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 as ContentBlock}
+          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>
+
+      {/* ── Appearance ── */}
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
+        <ResponsiveField
+          label="Border Radius"
+          block={block as ContentBlock}
+          property="border_radius"
+          onReset={() => resetOverride("border_radius")}
+        >
+          <div className="flex items-center gap-1.5">
+            <input
+              type="number"
+              value={String(getEffectiveValue<string>(block as ContentBlock, 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 as ContentBlock}
+          property="shadow"
+          onReset={() => resetOverride("shadow")}
+        >
+          <button
+            type="button"
+            onClick={() => {
+              const effectiveShadow = getEffectiveValue<boolean>(block as ContentBlock, viewport, "shadow", block.shadow || false);
+              updateResponsive("shadow", !effectiveShadow);
+            }}
+            className={`relative w-8 h-[18px] rounded-full transition-colors ${
+              getEffectiveValue<boolean>(block as ContentBlock, viewport, "shadow", block.shadow || false) ? "bg-[#3580f9]" : "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 as ContentBlock, viewport, "shadow", block.shadow || false) ? "left-[16px]" : "left-[2px]"
+              }`}
+            />
+          </button>
+        </ResponsiveField>
+      </SettingsSection>
+
+      {/* ── Video playback (only shown when at least one side is video) ── */}
+      {eitherIsVideo && (
+        <SettingsSection title="Playback" icon={<PlaybackIcon />}>
+          <div className="space-y-1.5">
+            <StyledCheckbox
+              label="Autoplay"
+              checked={block.video_autoplay !== false}
+              onChange={(checked) => update({ video_autoplay: checked })}
+            />
+            <StyledCheckbox
+              label="Loop"
+              checked={block.video_loop !== false}
+              onChange={(checked) => update({ video_loop: checked })}
+            />
+            <StyledCheckbox
+              label="Muted"
+              checked={block.video_muted !== false}
+              onChange={(checked) => update({ video_muted: checked })}
+            />
+          </div>
+        </SettingsSection>
+      )}
+    </>
+  );
+}

package/components/builder/editors/ButtonBlockEditor.tsx

@@ -99,7 +99,7 @@ export default function ButtonBlockEditor({ block }: Props) {
                   onClick={() => update({ style: s })}
                   className={`flex-1 rounded border py-1 text-xs transition-colors ${
                     (block.style || "primary") === s
-                      ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                      ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                       : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                   }`}
                 >
@@ -123,7 +123,7 @@ export default function ButtonBlockEditor({ block }: Props) {
                 onClick={() => updateResponsive("size", s)}
                 className={`flex-1 rounded border py-1 text-xs transition-colors ${
                   effectiveSize === s
-                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >
@@ -146,7 +146,7 @@ export default function ButtonBlockEditor({ block }: Props) {
                 onClick={() => updateResponsive("alignment", a)}
                 className={`flex-1 rounded border py-1 text-xs transition-colors ${
                   effectiveAlignment === a
-                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >
@@ -173,7 +173,7 @@ export default function ButtonBlockEditor({ block }: Props) {
             type="button"
             onClick={() => updateResponsive("full_width", !effectiveFullWidth)}
             className={`relative w-8 h-[18px] rounded-full transition-colors ${
-              effectiveFullWidth ? "bg-[#076bff]" : "bg-neutral-200 hover:bg-neutral-300"
+              effectiveFullWidth ? "bg-[#3580f9]" : "bg-neutral-200 hover:bg-neutral-300"
             }`}
           >
             <span

package/components/builder/editors/EnterAnimationPicker.tsx

@@ -27,10 +27,10 @@ import type { ContentBlock } from "../../../lib/sanity/types";
 // ── CSS constants ─────────────────────────────────────────────────
 
 const SELECT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal 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)]";
 
 const SLIDER_CLASS =
-  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#3580f9] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#3580f9] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
 
 // ── Types ─────────────────────────────────────────────────────────
 

package/components/builder/editors/HoverEffectPicker.tsx

@@ -35,10 +35,10 @@ import type { ContentBlock } from "../../../lib/sanity/types";
 // ── CSS constants ─────────────────────────────────────────────────
 
 const SELECT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal 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)]";
 
 const SLIDER_CLASS =
-  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#3580f9] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#3580f9] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
 
 // ── Types ─────────────────────────────────────────────────────────
 

package/components/builder/editors/ImageBlockEditor.tsx

@@ -121,7 +121,7 @@ export default function ImageBlockEditor({ block }: Props) {
                 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-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >
@@ -190,7 +190,7 @@ export default function ImageBlockEditor({ block }: Props) {
               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"
+              getEffectiveValue<boolean>(block, viewport, "shadow", block.shadow || false) ? "bg-[#3580f9]" : "bg-neutral-200 hover:bg-neutral-300"
             }`}
           >
             <span

package/components/builder/editors/ImageGridBlockEditor.tsx

@@ -187,7 +187,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
         {/* 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"
+          className="w-full rounded-lg border border-dashed border-neutral-300 py-3 text-xs text-neutral-500 hover:border-[#3580f9] 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" />
@@ -317,7 +317,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
               }}
               className={`flex-1 py-1.5 text-xs font-medium transition-colors ${
                 effectiveLightbox
-                  ? "bg-[#076bff] text-white"
+                  ? "bg-[#3580f9] text-white"
                   : "bg-white text-neutral-500 hover:bg-neutral-50"
               }`}
             >
@@ -330,7 +330,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
               }}
               className={`flex-1 py-1.5 text-xs font-medium transition-colors ${
                 !effectiveLightbox
-                  ? "bg-[#076bff] text-white"
+                  ? "bg-[#3580f9] text-white"
                   : "bg-white text-neutral-500 hover:bg-neutral-50"
               }`}
             >
@@ -355,7 +355,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
                 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-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >