@morphika/andami 0.2.26 → 0.4.0

package/components/builder/editors/ProjectCarouselBlockEditor.tsx

@@ -0,0 +1,443 @@
+"use client";
+
+/**
+ * ProjectCarouselBlockEditor — Settings editor for the projectCarouselBlock.
+ *
+ * Sections:
+ *   - Source (mode, number of projects, exclude-current toggle)
+ *   - Layout (cards per view — desktop / tablet / phone — and gap)
+ *   - Card Display (aspect ratio, show title / subtitle, border radius,
+ *     hover effect)
+ *   - Video (video mode)
+ *   - Controls (show arrows / dots, snap scrolling)
+ *   - Card Entrance Animation (enabled, preset, stagger, duration)
+ *
+ * Intentionally independent from ProjectGridEditor — they follow the same
+ * visual style but share no code so changes to one never break the other.
+ */
+
+import React, { useCallback } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ProjectCarouselBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  StyledCheckbox,
+} from "./shared";
+import {
+  SourceIcon,
+  LayoutIcon,
+  AppearanceIcon,
+  VideoIcon,
+  NavigationIcon,
+  AnimationIcon,
+} from "./section-icons";
+
+// ============================================
+// Constants
+// ============================================
+
+const SOURCE_OPTIONS = [
+  { value: "auto_latest", label: "Latest" },
+  { value: "auto_random", label: "Random" },
+] as const;
+
+const ASPECT_RATIO_OPTIONS = [
+  { value: "16/9", label: "16:9" },
+  { value: "4/3", label: "4:3" },
+  { value: "1/1", label: "1:1" },
+  { value: "3/4", label: "3:4" },
+  { value: "9/16", label: "9:16" },
+] as const;
+
+const HOVER_EFFECT_OPTIONS = [
+  { value: "scale", label: "Scale" },
+  { value: "none", label: "None" },
+] as const;
+
+const VIDEO_MODE_OPTIONS = [
+  { value: "off", label: "Off" },
+  { value: "hover", label: "Hover" },
+  { value: "autoloop", label: "Auto" },
+] as const;
+
+const ANIMATION_PRESET_OPTIONS = [
+  { value: "fade", label: "Fade" },
+  { value: "slide-up", label: "Slide Up" },
+  { value: "scale", label: "Scale" },
+] as const;
+
+// ============================================
+// Shared mini-components (inline copies — not imported from ProjectGridEditor
+// to keep the two blocks decoupled, per user's explicit request).
+// ============================================
+
+function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex gap-1">
+      {options.map((opt) => {
+        const active = value === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${
+              active
+                ? "bg-[#4794e2] text-white"
+                : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
+            }`}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function RangeSlider({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  suffix = "",
+  decimals = 0,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  suffix?: string;
+  decimals?: number;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1 h-1 accent-[#4794e2] cursor-pointer"
+      />
+      <span className="text-[11px] text-neutral-500 w-10 text-right tabular-nums shrink-0">
+        {value.toFixed(decimals)}{suffix}
+      </span>
+    </div>
+  );
+}
+
+function Dropdown<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value as T)}
+      className="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-[#4794e2] focus:shadow-[0_0_0_3px_rgba(71,148,226,0.06)]"
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// ============================================
+// Main editor
+// ============================================
+
+interface ProjectCarouselBlockEditorProps {
+  block: ProjectCarouselBlock;
+}
+
+export default function ProjectCarouselBlockEditor({
+  block,
+}: ProjectCarouselBlockEditorProps) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+
+  const update = useCallback(
+    (updates: Partial<ProjectCarouselBlock>) => {
+      updateBlock(block._key, updates as Partial<ProjectCarouselBlock>);
+    },
+    [updateBlock, block._key],
+  );
+
+  const updateCardEntrance = useCallback(
+    (updates: Partial<NonNullable<ProjectCarouselBlock["card_entrance"]>>) => {
+      update({
+        card_entrance: {
+          enabled: false,
+          preset: "slide-up",
+          stagger_delay: 80,
+          duration: 500,
+          ...block.card_entrance,
+          ...updates,
+        },
+      });
+    },
+    [update, block.card_entrance],
+  );
+
+  // ─── Resolved values (with defaults) ───
+  const sourceMode = block.source_mode ?? "auto_latest";
+  const maxProjects = block.max_projects ?? 8;
+  const excludeCurrent = block.exclude_current !== false;
+
+  const cpvDesktop = block.cards_per_view_desktop ?? 3.5;
+  const cpvTablet = block.cards_per_view_tablet ?? 2.2;
+  const cpvPhone = block.cards_per_view_phone ?? 1.2;
+  const gap = block.gap ?? 16;
+
+  const aspectRatio = block.aspect_ratio ?? "4/3";
+  const showTitle = block.show_title !== false;
+  const showSubtitle = block.show_subtitle === true;
+  const borderRadius = block.border_radius ?? 0;
+  const hoverEffect = block.hover_effect ?? "scale";
+
+  const videoMode = block.video_mode ?? "off";
+
+  const showArrows = block.show_arrows !== false;
+  const showDots = block.show_dots === true;
+  const snapScroll = block.snap_scroll !== false;
+
+  const entranceEnabled = block.card_entrance?.enabled === true;
+  const entrancePreset = block.card_entrance?.preset ?? "slide-up";
+  const entranceStagger = block.card_entrance?.stagger_delay ?? 80;
+  const entranceDuration = block.card_entrance?.duration ?? 500;
+
+  return (
+    <>
+      {/* ─── Source ──────────────────────────────────────────── */}
+      <SettingsSection title="Source" defaultOpen icon={<SourceIcon />}>
+        <SettingsField label="Mode">
+          <SegmentedControl
+            options={SOURCE_OPTIONS}
+            value={sourceMode}
+            onChange={(v) => update({ source_mode: v })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Projects">
+          <RangeSlider
+            value={maxProjects}
+            onChange={(v) => update({ max_projects: Math.round(v) })}
+            min={2}
+            max={20}
+            step={1}
+          />
+        </SettingsField>
+
+        <SettingsField label="Exclude current">
+          <StyledCheckbox
+            checked={excludeCurrent}
+            onChange={(checked) => update({ exclude_current: checked })}
+            label="Hide the project currently being viewed"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Layout ──────────────────────────────────────────── */}
+      <SettingsSection title="Layout" defaultOpen icon={<LayoutIcon />}>
+        <SettingsField label="Desktop">
+          <RangeSlider
+            value={cpvDesktop}
+            onChange={(v) => update({ cards_per_view_desktop: v })}
+            min={1}
+            max={6}
+            step={0.5}
+            decimals={1}
+            suffix=" cards"
+          />
+        </SettingsField>
+
+        <SettingsField label="Tablet">
+          <RangeSlider
+            value={cpvTablet}
+            onChange={(v) => update({ cards_per_view_tablet: v })}
+            min={1}
+            max={4}
+            step={0.5}
+            decimals={1}
+            suffix=" cards"
+          />
+        </SettingsField>
+
+        <SettingsField label="Phone">
+          <RangeSlider
+            value={cpvPhone}
+            onChange={(v) => update({ cards_per_view_phone: v })}
+            min={1}
+            max={3}
+            step={0.1}
+            decimals={1}
+            suffix=" cards"
+          />
+        </SettingsField>
+
+        <SettingsField label="Gap">
+          <RangeSlider
+            value={gap}
+            onChange={(v) => update({ gap: Math.round(v) })}
+            min={0}
+            max={80}
+            step={2}
+            suffix="px"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Card Display ────────────────────────────────────── */}
+      <SettingsSection title="Card Display" defaultOpen={false} icon={<AppearanceIcon />}>
+        <SettingsField label="Aspect">
+          <Dropdown
+            options={ASPECT_RATIO_OPTIONS}
+            value={aspectRatio}
+            onChange={(v) => update({ aspect_ratio: v as ProjectCarouselBlock["aspect_ratio"] })}
+          />
+        </SettingsField>
+
+        <SettingsField label="Title">
+          <StyledCheckbox
+            checked={showTitle}
+            onChange={(checked) => update({ show_title: checked })}
+            label="Show project title"
+          />
+        </SettingsField>
+
+        <SettingsField label="Subtitle">
+          <StyledCheckbox
+            checked={showSubtitle}
+            onChange={(checked) => update({ show_subtitle: checked })}
+            label="Show project subtitle"
+          />
+        </SettingsField>
+
+        <SettingsField label="Border radius">
+          <RangeSlider
+            value={borderRadius}
+            onChange={(v) => update({ border_radius: Math.round(v) })}
+            min={0}
+            max={40}
+            step={1}
+            suffix="px"
+          />
+        </SettingsField>
+
+        <SettingsField label="Hover">
+          <SegmentedControl
+            options={HOVER_EFFECT_OPTIONS}
+            value={hoverEffect}
+            onChange={(v) => update({ hover_effect: v })}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Video ───────────────────────────────────────────── */}
+      <SettingsSection title="Video" defaultOpen={false} icon={<VideoIcon />}>
+        <SettingsField label="Mode">
+          <SegmentedControl
+            options={VIDEO_MODE_OPTIONS}
+            value={videoMode}
+            onChange={(v) => update({ video_mode: v })}
+          />
+        </SettingsField>
+        <p className="text-[10px] text-neutral-400 leading-snug px-0.5">
+          How project cover videos play in the carousel.
+        </p>
+      </SettingsSection>
+
+      {/* ─── Controls ────────────────────────────────────────── */}
+      <SettingsSection title="Controls" defaultOpen={false} icon={<NavigationIcon />}>
+        <SettingsField label="Arrows">
+          <StyledCheckbox
+            checked={showArrows}
+            onChange={(checked) => update({ show_arrows: checked })}
+            label="Show prev / next arrows on hover (desktop)"
+          />
+        </SettingsField>
+
+        <SettingsField label="Dots">
+          <StyledCheckbox
+            checked={showDots}
+            onChange={(checked) => update({ show_dots: checked })}
+            label="Show pagination dots below the carousel"
+          />
+        </SettingsField>
+
+        <SettingsField label="Snap">
+          <StyledCheckbox
+            checked={snapScroll}
+            onChange={(checked) => update({ snap_scroll: checked })}
+            label="Cards snap into place when scrolling"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Card Entrance Animation ─────────────────────────── */}
+      <SettingsSection title="Card Entrance" defaultOpen={false} icon={<AnimationIcon />}>
+        <SettingsField label="Enabled">
+          <StyledCheckbox
+            checked={entranceEnabled}
+            onChange={(checked) => updateCardEntrance({ enabled: checked })}
+            label="Animate cards as they appear"
+          />
+        </SettingsField>
+
+        {entranceEnabled && (
+          <>
+            <SettingsField label="Preset">
+              <SegmentedControl
+                options={ANIMATION_PRESET_OPTIONS}
+                value={entrancePreset}
+                onChange={(v) => updateCardEntrance({ preset: v })}
+              />
+            </SettingsField>
+
+            <SettingsField label="Stagger">
+              <RangeSlider
+                value={entranceStagger}
+                onChange={(v) => updateCardEntrance({ stagger_delay: Math.round(v) })}
+                min={0}
+                max={300}
+                step={10}
+                suffix="ms"
+              />
+            </SettingsField>
+
+            <SettingsField label="Duration">
+              <RangeSlider
+                value={entranceDuration}
+                onChange={(v) => updateCardEntrance({ duration: Math.round(v) })}
+                min={100}
+                max={1500}
+                step={50}
+                suffix="ms"
+              />
+            </SettingsField>
+          </>
+        )}
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/editors/index.ts

@@ -5,5 +5,6 @@ export { default as VideoBlockEditor } from "./VideoBlockEditor";
 export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
 export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
 export { default as ProjectGridEditor } from "./ProjectGridEditor";
+export { default as ProjectCarouselBlockEditor } from "./ProjectCarouselBlockEditor";
 export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
 export { getSpacerPx } from "./SpacerBlockEditor";

package/components/builder/iconPrimitives.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * Shared SVG primitives for the block and section card icons.
+ *
+ * Both `BlockCardIcons.tsx` and `SectionCardIcons.tsx` consume these so the
+ * visual language (brick background + fade + shadow + bevel) stays 1:1
+ * consistent. Each helper accepts an `idPrefix` / `id` so multiple icons can
+ * render side by side without filter/gradient/mask collisions.
+ */
+
+/** Brick-rect positions — 24 rects, 4 rows, top half only. */
+export const BRICK: ReadonlyArray<readonly [number, number]> = [
+  [18.7, 0.1], [53.5, 0.1], [88.4, 0.1], [123.2, 0.1], [158.1, 0.1], [192.9, 0.1],
+  [1.3, 17.6], [36.1, 17.6], [71, 17.6], [105.8, 17.6], [140.7, 17.6], [175.5, 17.6],
+  [18.7, 34.8], [53.5, 34.8], [88.4, 34.8], [123.2, 34.8], [158.1, 34.8], [192.9, 34.8],
+  [1.3, 52.3], [36.1, 52.3], [71, 52.3], [105.8, 52.3], [140.7, 52.3], [175.5, 52.3],
+];
+
+/** Grid line pattern + right-side fade gradient defs.
+ *
+ *  The fade reaches full opacity at x=200 (viewBox units) rather than at
+ *  x=220 (the right edge). This guarantees that the rightmost ~20 viewBox
+ *  units of the SVG are solid #F4F4F4 — eliminating sub-pixel anti-aliasing
+ *  artifacts when the SVG is downscaled to fit a container whose width is
+ *  slightly smaller than the full viewBox (e.g. 176px for a 220-wide viewBox).
+ */
+export function BgDefs({ prefix }: { prefix: string }) {
+  return (
+    <>
+      <pattern id={`${prefix}-grid`} x="0.8" y="-0.3" width="17.5" height="17.5" patternUnits="userSpaceOnUse">
+        <path d="M 17.5 0 L 0 0 0 17.5" fill="none" stroke="#BABABA" strokeWidth="0.5" opacity="0.49" />
+      </pattern>
+      <linearGradient id={`${prefix}-fade`} x1="140.2" y1="60" x2="200" y2="60" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stopColor="#F4F4F4" stopOpacity="0" />
+        <stop offset="1" stopColor="#F4F4F4" />
+      </linearGradient>
+    </>
+  );
+}
+
+/** Background body: solid fill → grid pattern → brick overlay → right-side fade. */
+export function Bg({ prefix }: { prefix: string }) {
+  return (
+    <>
+      <rect width="220" height="120" fill="#F4F4F4" />
+      <rect width="220" height="120" fill={`url(#${prefix}-grid)`} />
+      <g fill="none" stroke="#FFFFFF" strokeWidth="0.5">
+        {BRICK.map(([x, y]) => (
+          <rect key={`${x}-${y}`} x={x} y={y} width="15.5" height="15.3" />
+        ))}
+      </g>
+      <rect x="140.2" y="0" width="79.8" height="120" fill={`url(#${prefix}-fade)`} />
+    </>
+  );
+}
+
+/** Vector drop-shadow filter. */
+export function ShadowFilter({ id }: { id: string }) {
+  return (
+    <filter id={id} x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dy="3" />
+      <feComponentTransfer><feFuncA type="linear" slope="0.22" /></feComponentTransfer>
+      <feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge>
+    </filter>
+  );
+}
+
+/** Vertical bevel gradient: #FFFFFF → endColor (default #E6ECF6 for blocks, #EBEAEF for sections). */
+export function VertBevel({ id, endColor = "#E6ECF6" }: { id: string; endColor?: string }) {
+  return (
+    <linearGradient id={id} x1="0.5" y1="0" x2="0.5" y2="1">
+      <stop offset="0" stopColor="#FFFFFF" />
+      <stop offset="1" stopColor={endColor} />
+    </linearGradient>
+  );
+}

package/components/builder/live-preview/LiveImagePreview.tsx

@@ -11,9 +11,23 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
   const [useFallback, setUseFallback] = useState(false);
 
   if (!block.asset_path) {
+    // Empty state: fills the column (min 240px) with a light-gray backdrop
+    // and a landscape placeholder glyph. Once the user picks an image the
+    // block sizes itself normally.
+    const isFill = block.width === "fill";
+    const wrapperStyle: React.CSSProperties = isFill
+      ? { position: "absolute", inset: 0 }
+      : { width: "100%" };
     return (
-      <div className="border border-dashed border-neutral-300 rounded bg-neutral-50 flex items-center justify-center py-12">
-        <span className="text-neutral-400 text-xs">No image set</span>
+      <div style={wrapperStyle}>
+        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <circle cx="18" cy="21" r="3" fill="#b0b5bd" />
+            <path d="M12 42 L22 28 L28 34 L38 22 L46 42 Z" fill="#b0b5bd" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">No image yet</span>
+        </div>
       </div>
     );
   }