@morphika/andami 0.1.2

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

@@ -0,0 +1,118 @@
+"use client";
+
+/**
+ * ParallaxGroupSettings — Settings panel for a parallax group (group-level).
+ *
+ * Displays:
+ *   - Transition effect picker (parallax / crossfade / reveal)
+ *     with description text explaining each effect
+ *
+ * Shown when the parallax group header is selected (not a specific slide).
+ *
+ * Session 124: Parallax V2 Phase 3
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ParallaxGroup } from "../../../lib/sanity/types";
+import {
+  SettingsSection,
+} from "../editors/shared";
+
+// ============================================
+// Transition effect definitions
+// ============================================
+
+const TRANSITION_EFFECTS = [
+  {
+    value: "parallax" as const,
+    label: "Parallax",
+    description: "Background moves slower than content as you scroll, creating depth.",
+  },
+  {
+    value: "crossfade" as const,
+    label: "Crossfade",
+    description: "Backgrounds fade in and out as slides enter and leave the viewport.",
+  },
+  {
+    value: "reveal" as const,
+    label: "Reveal",
+    description: "Each slide reveals over the previous one with a clip-path wipe effect.",
+  },
+];
+
+// ============================================
+// Component
+// ============================================
+
+interface ParallaxGroupSettingsProps {
+  group: ParallaxGroup;
+}
+
+export default function ParallaxGroupSettings({
+  group,
+}: ParallaxGroupSettingsProps) {
+  const store = useBuilderStore();
+  const activeEffect = group.transition_effect || "parallax";
+
+  return (
+    <>
+      <SettingsSection title="Transition Effect" defaultOpen>
+        <div className="space-y-1.5">
+          {TRANSITION_EFFECTS.map((effect) => {
+            const isActive = activeEffect === effect.value;
+            return (
+              <button
+                key={effect.value}
+                onClick={() =>
+                  store.updateParallaxGroupSettings(group._key, {
+                    transition_effect: effect.value,
+                  })
+                }
+                className={`w-full text-left rounded-lg border p-3 transition-all ${
+                  isActive
+                    ? "border-[#8b5cf6] bg-[#8b5cf6]/5"
+                    : "border-neutral-200 bg-white hover:border-neutral-300 hover:bg-neutral-50"
+                }`}
+              >
+                <div className="flex items-center gap-2 mb-0.5">
+                  {/* Radio indicator */}
+                  <div
+                    className={`w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center transition-colors ${
+                      isActive ? "border-[#8b5cf6]" : "border-neutral-300"
+                    }`}
+                  >
+                    {isActive && (
+                      <div className="w-1.5 h-1.5 rounded-full bg-[#8b5cf6]" />
+                    )}
+                  </div>
+                  <span
+                    className={`text-xs font-medium ${
+                      isActive ? "text-[#8b5cf6]" : "text-neutral-700"
+                    }`}
+                  >
+                    {effect.label}
+                  </span>
+                </div>
+                <p className="text-[10px] text-neutral-400 ml-[22px] leading-relaxed">
+                  {effect.description}
+                </p>
+              </button>
+            );
+          })}
+        </div>
+      </SettingsSection>
+
+      {/* Group info */}
+      <SettingsSection title="Info">
+        <div className="text-[11px] text-neutral-500 space-y-1">
+          <p>
+            {group.slides.length} slide{group.slides.length !== 1 ? "s" : ""}
+          </p>
+          <p className="text-[10px] text-neutral-400">
+            Click a slide to edit its background and content layout.
+          </p>
+        </div>
+      </SettingsSection>
+    </>
+  );
+}

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

@@ -0,0 +1,178 @@
+"use client";
+
+/**
+ * ParallaxSlideSettings — Settings panel for an individual parallax slide.
+ *
+ * Displays:
+ *   - Background type segmented control (Image / Video)
+ *   - AssetBrowser picker for image or video
+ *   - Background position dropdown
+ *   - Overlay color (ColorSwatchPicker) + overlay opacity slider
+ *
+ * The parent SettingsPanel handles tab routing:
+ *   - Settings tab → this component
+ *   - Layout tab → SectionV2Settings (delegated)
+ *   - Animation tab → SectionV2AnimationTab (delegated)
+ *
+ * Session 124: Parallax V2 Phase 3
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ParallaxSlideV2, ParallaxGroup, PageSectionV2 } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  AssetPathInput,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+
+// ============================================
+// Background position options
+// ============================================
+
+const BG_POSITION_OPTIONS = [
+  { value: "center center", label: "Center" },
+  { value: "top center", label: "Top" },
+  { value: "bottom center", label: "Bottom" },
+  { value: "center left", label: "Left" },
+  { value: "center right", label: "Right" },
+  { value: "top left", label: "Top Left" },
+  { value: "top right", label: "Top Right" },
+  { value: "bottom left", label: "Bottom Left" },
+  { value: "bottom right", label: "Bottom Right" },
+];
+
+// ============================================
+// Component
+// ============================================
+
+interface ParallaxSlideSettingsProps {
+  group: ParallaxGroup;
+  slide: ParallaxSlideV2;
+}
+
+export default function ParallaxSlideSettings({
+  group,
+  slide,
+}: ParallaxSlideSettingsProps) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+
+  const updateBg = (fields: Partial<ParallaxSlideV2>) => {
+    store.updateParallaxSlideBackground(group._key, slide._key, fields);
+  };
+
+  const bgType = slide.background_type || "image";
+  const bgPosition = slide.background_position || "center center";
+  const overlayColor = slide.background_overlay_color || "#000000";
+  const overlayOpacity = slide.background_overlay_opacity ?? 0;
+
+  return (
+    <>
+      {/* Background Type */}
+      <SettingsSection title="Background" defaultOpen>
+        {/* Segmented control: Image / Video */}
+        <SettingsField label="Type">
+          <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
+            {(["image", "video"] as const).map((type) => (
+              <button
+                key={type}
+                onClick={() => updateBg({ background_type: type })}
+                className={`flex-1 py-1.5 rounded-md text-[11px] font-medium transition-all ${
+                  bgType === type
+                    ? "bg-white text-neutral-900 shadow-sm border border-[#e5e5e5]"
+                    : "text-neutral-400 hover:text-neutral-500"
+                }`}
+              >
+                {type === "image" ? "Image" : "Video"}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        {/* Asset picker — switches between image and video filter */}
+        <SettingsField label={bgType === "image" ? "Image" : "Video"}>
+          <AssetPathInput
+            value={bgType === "image" ? (slide.background_image || "") : (slide.background_video || "")}
+            onChange={(path) => {
+              if (bgType === "image") {
+                updateBg({ background_image: path });
+              } else {
+                updateBg({ background_video: path });
+              }
+            }}
+            filterType={bgType === "image" ? "image" : "video"}
+            placeholder={bgType === "image" ? "path/to/image.jpg" : "path/to/video.mp4"}
+          />
+        </SettingsField>
+
+        {/* Background position */}
+        <SettingsField label="Position">
+          <select
+            value={bgPosition}
+            onChange={(e) => updateBg({ background_position: e.target.value })}
+            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-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]"
+          >
+            {BG_POSITION_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Navbar Color Override */}
+      <SettingsSection title="Navbar Color" defaultOpen={false}>
+        <SettingsField label="Color">
+          <div className="flex items-center gap-2">
+            <ColorSwatchPicker
+              value={slide.nav_color || ""}
+              onChange={(hex) => updateBg({ nav_color: hex })}
+              swatches={paletteSwatches}
+            />
+            {slide.nav_color && (
+              <button
+                onClick={() => updateBg({ nav_color: undefined })}
+                className="text-[10px] text-neutral-400 hover:text-neutral-600 transition-colors shrink-0"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        </SettingsField>
+        <p className="text-[10px] text-neutral-400 leading-snug px-0.5">
+          Override the navbar text color while this slide is active. Color interpolates smoothly between slides on scroll.
+        </p>
+      </SettingsSection>
+
+      {/* Overlay */}
+      <SettingsSection title="Overlay" defaultOpen>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={overlayColor}
+            onChange={(hex) => updateBg({ background_overlay_color: hex })}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              step={5}
+              value={overlayOpacity}
+              onChange={(e) => updateBg({ background_overlay_opacity: parseInt(e.target.value) })}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {overlayOpacity}%
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

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

@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * SectionV2AnimationTab — Animation tab content for V2 grid sections.
+ *
+ * Session 118: Replaced ScrollAnimationPicker + HoverAnimationPicker with
+ * EnterAnimationPicker (generic mode with inherit toggle) + StaggerSettings.
+ *
+ * Session 135: Added responsive override support — tablet/phone write to
+ * responsive overrides instead of base settings.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionV2Settings as SectionV2SettingsType } from "../../../lib/sanity/types";
+import type { EnterAnimationConfig } from "../../../lib/animation/enter-types";
+import EnterAnimationPicker from "../editors/EnterAnimationPicker";
+import StaggerSettings from "../editors/StaggerSettings";
+import {
+  getSectionV2SettingValue,
+  hasSectionV2SettingOverride,
+  buildSectionV2SettingOverride,
+} from "./responsive-helpers";
+
+export function SectionV2AnimationTab({ section }: { section: PageSectionV2 }) {
+  const store = useBuilderStore();
+  const activeViewport = store.activeViewport;
+  const isResponsive = activeViewport !== "desktop";
+
+  /** Viewport-aware update: desktop writes to settings, tablet/phone to responsive */
+  const updateAnimSetting = (property: "enter_animation" | "stagger", value: unknown) => {
+    if (activeViewport === "desktop") {
+      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+    } else {
+      const responsive = buildSectionV2SettingOverride(section, activeViewport, property, value);
+      store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+    }
+  };
+
+  const effectiveEnterAnim = getSectionV2SettingValue<EnterAnimationConfig | undefined>(
+    section, activeViewport, "enter_animation", undefined
+  );
+
+  const effectiveStagger = getSectionV2SettingValue<SectionV2SettingsType["stagger"] | undefined>(
+    section, activeViewport, "stagger", undefined
+  );
+
+  const hasEnterOverride = isResponsive && hasSectionV2SettingOverride(section, activeViewport, "enter_animation");
+  const hasStaggerOverride = isResponsive && hasSectionV2SettingOverride(section, activeViewport, "stagger");
+
+  return (
+    <>
+      {/* Responsive info banner */}
+      {isResponsive && (
+        <div className="px-4 pt-3">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+            <span className="text-[11px] font-medium text-[#076bff]">
+              Editing {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="relative">
+        {hasEnterOverride && (
+          <div className="flex items-center justify-between px-4 pt-2">
+            <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+            <button
+              onClick={() => updateAnimSetting("enter_animation", undefined)}
+              className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+            >
+              Reset
+            </button>
+          </div>
+        )}
+        <EnterAnimationPicker
+          mode={{ level: "section", parentConfig: store.pageSettings.enter_animation }}
+          config={effectiveEnterAnim}
+          onChange={(cfg) => updateAnimSetting("enter_animation", cfg)}
+        />
+      </div>
+
+      <div className="border-t border-neutral-200 my-1" />
+
+      <div className="relative">
+        {hasStaggerOverride && (
+          <div className="flex items-center justify-between px-4 pt-2">
+            <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+            <button
+              onClick={() => updateAnimSetting("stagger", undefined)}
+              className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+            >
+              Reset
+            </button>
+          </div>
+        )}
+        <StaggerSettings
+          stagger={effectiveStagger}
+          onChange={(staggerCfg) => updateAnimSetting("stagger", staggerCfg)}
+        />
+      </div>
+    </>
+  );
+}