@morphika/webframe 0.1.0

package/components/builder/editors/EnterAnimationPicker.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+/**
+ * EnterAnimationPicker — Compact dropdown-based enter animation selector.
+ *
+ * Three modes:
+ * - **Page (generic):** Dropdown with GENERIC_ENTER_PRESETS, duration/delay sliders, easing dropdown.
+ * - **Section/Column (generic + inherit):** Inherit/Custom segmented toggle. Inherit shows parent label.
+ * - **Block (type-specific):** Dropdown with BLOCK_ENTER_PRESETS[blockType], same sliders.
+ *   If blockType has no presets (spacer, projectGrid, parallax), renders nothing.
+ *
+ * Session 118 — Animation UX Refactor.
+ */
+
+import { useState, useEffect } from "react";
+import type { EnterAnimationConfig, EnterPreset, AnimationEasing } from "../../../lib/animation/enter-types";
+import { GENERIC_ENTER_PRESETS, BLOCK_ENTER_PRESETS } from "../../../lib/animation/enter-types";
+import { ENTER_DEFAULTS } from "../../../lib/animation/enter-types";
+import {
+  ENTER_PRESET_MAP,
+  ENTER_EASINGS,
+  DURATION_RANGE,
+  DELAY_RANGE,
+} from "../../../lib/animation/enter-presets";
+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)]";
+
+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";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+type PickerMode =
+  | { level: "page" }
+  | { level: "section" | "column"; parentConfig?: EnterAnimationConfig }
+  | { level: "block"; blockType: ContentBlock["_type"] };
+
+interface EnterAnimationPickerProps {
+  mode: PickerMode;
+  /** Current config — undefined means "inherit" for section/column/block modes */
+  config?: EnterAnimationConfig;
+  /** Callback: undefined = inherit, object = custom override */
+  onChange: (config: EnterAnimationConfig | undefined) => void;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────
+
+function presetLabel(preset: EnterPreset): string {
+  return ENTER_PRESET_MAP[preset]?.label ?? preset;
+}
+
+function resolvedDescription(config?: EnterAnimationConfig): string {
+  if (!config || config.preset === "none" || !config.preset) return "None";
+  const label = presetLabel(config.preset);
+  const dur = config.duration ?? ENTER_DEFAULTS.duration;
+  return `${label} · ${dur}ms`;
+}
+
+// ── Component ─────────────────────────────────────────────────────
+
+export default function EnterAnimationPicker({
+  mode,
+  config,
+  onChange,
+}: EnterAnimationPickerProps) {
+  // For block mode: bail out if no presets available
+  if (mode.level === "block") {
+    const presets = BLOCK_ENTER_PRESETS[mode.blockType] ?? [];
+    if (presets.length === 0) return null;
+  }
+
+  // Inherit/Custom toggle state for section/column modes
+  const supportsInherit = mode.level === "section" || mode.level === "column";
+  const isInheriting = supportsInherit && config === undefined;
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-medium text-neutral-700">Enter Animation</span>
+      </div>
+
+      {/* Inherit/Custom toggle for section & column */}
+      {supportsInherit && (mode.level === "section" || mode.level === "column") && (
+        <InheritToggle
+          isInheriting={isInheriting}
+          parentConfig={mode.parentConfig}
+          onToggle={(inherit) => {
+            if (inherit) {
+              onChange(undefined);
+            } else {
+              // Switch to custom: start with parent values or defaults
+              const parent = mode.parentConfig;
+              onChange({
+                preset: parent?.preset ?? "none",
+                duration: parent?.duration ?? ENTER_DEFAULTS.duration,
+                delay: parent?.delay ?? ENTER_DEFAULTS.delay,
+                easing: parent?.easing ?? ENTER_DEFAULTS.easing,
+              });
+            }
+          }}
+        />
+      )}
+
+      {/* Full editor — shown when NOT inheriting */}
+      {!isInheriting && (
+        <EnterAnimationEditor
+          mode={mode}
+          config={config}
+          onChange={onChange}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Inherit Toggle ────────────────────────────────────────────────
+
+function InheritToggle({
+  isInheriting,
+  parentConfig,
+  onToggle,
+}: {
+  isInheriting: boolean;
+  parentConfig?: EnterAnimationConfig;
+  onToggle: (inherit: boolean) => void;
+}) {
+  return (
+    <div className="mb-3">
+      {/* Segmented control */}
+      <div className="flex gap-0.5 p-0.5 bg-[#f0f0f0] rounded-lg mb-2">
+        <button
+          type="button"
+          onClick={() => onToggle(true)}
+          className={`flex-1 py-1.5 rounded-md text-[11px] font-medium transition-all ${
+            isInheriting
+              ? "bg-white text-neutral-900 shadow-sm"
+              : "text-neutral-400 hover:text-neutral-500"
+          }`}
+        >
+          Inherit
+        </button>
+        <button
+          type="button"
+          onClick={() => onToggle(false)}
+          className={`flex-1 py-1.5 rounded-md text-[11px] font-medium transition-all ${
+            !isInheriting
+              ? "bg-white text-neutral-900 shadow-sm"
+              : "text-neutral-400 hover:text-neutral-500"
+          }`}
+        >
+          Custom
+        </button>
+      </div>
+
+      {/* Show inherited value when in inherit mode */}
+      {isInheriting && (
+        <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-lg bg-[#f5f5f5]">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-neutral-400 shrink-0">
+            <polyline points="7 13 12 18 17 13" />
+            <line x1="12" y1="6" x2="12" y2="18" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">
+            {resolvedDescription(parentConfig)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Editor (preset dropdown + sliders) ────────────────────────────
+
+function EnterAnimationEditor({
+  mode,
+  config,
+  onChange,
+}: {
+  mode: PickerMode;
+  config?: EnterAnimationConfig;
+  onChange: (config: EnterAnimationConfig | undefined) => void;
+}) {
+  const preset = config?.preset ?? "none";
+  const duration = config?.duration ?? ENTER_DEFAULTS.duration;
+  const delay = config?.delay ?? ENTER_DEFAULTS.delay;
+  const easing = config?.easing ?? ENTER_DEFAULTS.easing;
+
+  // Determine available presets
+  const availablePresets: readonly EnterPreset[] =
+    mode.level === "block"
+      ? BLOCK_ENTER_PRESETS[mode.blockType] ?? []
+      : GENERIC_ENTER_PRESETS;
+
+  // Build update helper
+  const update = (updates: Partial<EnterAnimationConfig>) => {
+    const next: EnterAnimationConfig = {
+      preset,
+      duration,
+      delay,
+      easing,
+      ...updates,
+    };
+    // For page mode, if preset is "none", store it explicitly (page always has a config)
+    onChange(next);
+  };
+
+  const showControls = preset !== "none";
+
+  return (
+    <div className="space-y-3">
+      {/* Preset dropdown */}
+      <div>
+        <label className="text-[11px] text-neutral-500 mb-1 block">Preset</label>
+        <select
+          value={preset}
+          onChange={(e) => {
+            const newPreset = e.target.value as EnterPreset;
+            if (newPreset === "none") {
+              // For page level, keep config with "none"; for others, same
+              update({ preset: "none" });
+            } else {
+              update({ preset: newPreset });
+            }
+          }}
+          className={SELECT_CLASS}
+        >
+          <option value="none">None</option>
+          {availablePresets
+            .filter((p) => p !== "none")
+            .map((p) => (
+              <option key={p} value={p}>
+                {presetLabel(p)}
+              </option>
+            ))}
+        </select>
+      </div>
+
+      {/* Duration + Delay sliders — only when a preset is selected */}
+      {showControls && (
+        <>
+          {/* Duration */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Duration</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">{duration}ms</span>
+            </div>
+            <input
+              type="range"
+              min={DURATION_RANGE.min}
+              max={DURATION_RANGE.max}
+              step={DURATION_RANGE.step}
+              value={duration}
+              onChange={(e) => update({ duration: Number(e.target.value) })}
+              className={SLIDER_CLASS}
+            />
+          </div>
+
+          {/* Delay */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Delay</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">{delay}ms</span>
+            </div>
+            <input
+              type="range"
+              min={DELAY_RANGE.min}
+              max={DELAY_RANGE.max}
+              step={DELAY_RANGE.step}
+              value={delay}
+              onChange={(e) => update({ delay: Number(e.target.value) })}
+              className={SLIDER_CLASS}
+            />
+          </div>
+
+          {/* Easing */}
+          <div>
+            <label className="text-[11px] text-neutral-500 mb-1 block">Easing</label>
+            <select
+              value={easing}
+              onChange={(e) => update({ easing: e.target.value as AnimationEasing })}
+              className={SELECT_CLASS}
+            >
+              {ENTER_EASINGS.map((opt) => (
+                <option key={opt.id} value={opt.id}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/components/builder/editors/HoverEffectPicker.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+/**
+ * HoverEffectPicker — Unified hover effect selector for blocks.
+ *
+ * Combines CSS-based hovers (scale-up, lift, tilt-3d, etc.) and
+ * shader-based hovers (ripple, rgb-shift, pixelate) into one dropdown.
+ *
+ * Block-level only — no cascade, no inherit/custom toggle.
+ * Renders nothing if the block type has no available hover presets.
+ *
+ * When a shader preset is selected, additional controls appear:
+ * speed slider + smoothness segmented selector.
+ *
+ * Session 119 — Animation UX Refactor.
+ */
+
+import type {
+  HoverEffectConfig,
+  HoverPreset,
+  HoverEasing,
+  ShaderSmoothness,
+} from "../../../lib/animation/hover-effect-types";
+import { BLOCK_HOVER_PRESETS, HOVER_EFFECT_DEFAULTS } from "../../../lib/animation/hover-effect-types";
+import {
+  HOVER_PRESET_MAP,
+  HOVER_EFFECT_EASINGS,
+  HOVER_DURATION_RANGE,
+  SHADER_SPEED_RANGE,
+  SHADER_SMOOTHNESS_OPTIONS,
+  isShaderPreset,
+} from "../../../lib/animation/hover-effect-presets";
+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)]";
+
+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";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+interface HoverEffectPickerProps {
+  blockType: ContentBlock["_type"];
+  config?: HoverEffectConfig;
+  onChange: (config: HoverEffectConfig | undefined) => void;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────
+
+function presetLabel(preset: HoverPreset): string {
+  return HOVER_PRESET_MAP[preset]?.label ?? preset;
+}
+
+// ── Component ─────────────────────────────────────────────────────
+
+export default function HoverEffectPicker({
+  blockType,
+  config,
+  onChange,
+}: HoverEffectPickerProps) {
+  const availablePresets = BLOCK_HOVER_PRESETS[blockType] ?? [];
+
+  // Don't render anything if block type has no hover presets
+  if (availablePresets.length === 0) return null;
+
+  const preset = config?.preset ?? "none";
+  const duration = config?.duration ?? HOVER_EFFECT_DEFAULTS.duration;
+  const easing = config?.easing ?? HOVER_EFFECT_DEFAULTS.easing;
+  const shaderSpeed = config?.shader_speed ?? HOVER_EFFECT_DEFAULTS.shader_speed;
+  const shaderSmoothness = config?.shader_smoothness ?? HOVER_EFFECT_DEFAULTS.shader_smoothness;
+
+  const isShader = preset !== "none" && isShaderPreset(preset);
+  const showControls = preset !== "none";
+
+  const update = (updates: Partial<HoverEffectConfig>) => {
+    const next: HoverEffectConfig = {
+      preset,
+      duration,
+      easing,
+      ...(isShader || updates.preset && isShaderPreset(updates.preset as HoverPreset)
+        ? { shader_speed: shaderSpeed, shader_smoothness: shaderSmoothness }
+        : {}),
+      ...updates,
+    };
+    onChange(next);
+  };
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-medium text-neutral-700">Hover Effect</span>
+      </div>
+
+      <div className="space-y-3">
+        {/* Preset dropdown */}
+        <div>
+          <label className="text-[11px] text-neutral-500 mb-1 block">Preset</label>
+          <select
+            value={preset}
+            onChange={(e) => {
+              const newPreset = e.target.value as HoverPreset;
+              if (newPreset === "none") {
+                onChange(undefined);
+              } else {
+                update({ preset: newPreset });
+              }
+            }}
+            className={SELECT_CLASS}
+          >
+            <option value="none">None</option>
+            {availablePresets.map((p) => {
+              const info = HOVER_PRESET_MAP[p];
+              const shaderTag = info?.isShader ? " (WebGL)" : "";
+              return (
+                <option key={p} value={p}>
+                  {presetLabel(p)}{shaderTag}
+                </option>
+              );
+            })}
+          </select>
+        </div>
+
+        {/* Controls — only when a preset is selected */}
+        {showControls && (
+          <>
+            {/* Duration */}
+            <div>
+              <div className="flex items-center justify-between mb-1">
+                <label className="text-[11px] text-neutral-500">Duration</label>
+                <span className="text-[11px] text-neutral-500 tabular-nums">{duration}ms</span>
+              </div>
+              <input
+                type="range"
+                min={HOVER_DURATION_RANGE.min}
+                max={HOVER_DURATION_RANGE.max}
+                step={HOVER_DURATION_RANGE.step}
+                value={duration}
+                onChange={(e) => update({ duration: Number(e.target.value) })}
+                className={SLIDER_CLASS}
+              />
+            </div>
+
+            {/* Easing */}
+            <div>
+              <label className="text-[11px] text-neutral-500 mb-1 block">Easing</label>
+              <select
+                value={easing}
+                onChange={(e) => update({ easing: e.target.value as HoverEasing })}
+                className={SELECT_CLASS}
+              >
+                {HOVER_EFFECT_EASINGS.map((opt) => (
+                  <option key={opt.id} value={opt.id}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Shader-specific controls */}
+            {isShader && (
+              <>
+                {/* Speed */}
+                <div>
+                  <div className="flex items-center justify-between mb-1">
+                    <label className="text-[11px] text-neutral-500">Speed</label>
+                    <span className="text-[11px] text-neutral-500 tabular-nums">{shaderSpeed.toFixed(1)}x</span>
+                  </div>
+                  <input
+                    type="range"
+                    min={SHADER_SPEED_RANGE.min}
+                    max={SHADER_SPEED_RANGE.max}
+                    step={SHADER_SPEED_RANGE.step}
+                    value={shaderSpeed}
+                    onChange={(e) => update({ shader_speed: Number(e.target.value) })}
+                    className={SLIDER_CLASS}
+                  />
+                </div>
+
+                {/* Smoothness */}
+                <div>
+                  <label className="text-[11px] text-neutral-500 mb-1 block">Smoothness</label>
+                  <div className="flex gap-0.5 p-0.5 bg-[#f0f0f0] rounded-lg">
+                    {SHADER_SMOOTHNESS_OPTIONS.map((opt) => (
+                      <button
+                        key={opt.id}
+                        type="button"
+                        onClick={() => update({ shader_smoothness: opt.id })}
+                        className={`flex-1 py-1.5 rounded-md text-[11px] font-medium transition-all ${
+                          shaderSmoothness === opt.id
+                            ? "bg-white text-neutral-900 shadow-sm"
+                            : "text-neutral-400 hover:text-neutral-500"
+                        }`}
+                      >
+                        {opt.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}