@morphika/andami 0.5.0 → 0.5.2

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

@@ -1,335 +1,335 @@
-"use client";
-
-/**
- * CoverSectionSettings — Settings panel for a Cover Section.
- *
- * Displays:
- *   - Background type segmented control (Image / Video)
- *   - AssetBrowser picker for image or video
- *   - Background position / size dropdowns
- *   - Overlay color + overlay opacity slider
- *   - Section height selector (100vh / 80vh / 50vh)
- *   - Row list with percentages and vertical align
- *   - Add/Remove row controls
- *
- * Layout and Animation tabs are delegated to SectionV2LayoutTab / SectionV2AnimationTab
- * via a virtual PageSectionV2 (same pattern as parallax slides).
- *
- * Session 176: Cover Sections — Phase 6 (Settings Panel).
- */
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { CoverSection } from "../../../lib/sanity/types";
-import {
-  BackgroundIcon,
-  NavbarColorIcon,
-  OverlayIcon,
-  SpacingIcon,
-  GridGapsIcon,
-} from "../editors/section-icons";
-import {
-  SettingsField,
-  SettingsSection,
-} from "../editors/shared";
-import { AssetPathInput } from "../editors/shared";
-import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
-import StaggerSettings from "../editors/StaggerSettings";
-
-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" },
-];
-
-const BG_SIZE_OPTIONS = [
-  { value: "cover", label: "Cover" },
-  { value: "contain", label: "Contain" },
-  { value: "auto", label: "Auto" },
-];
-
-const HEIGHT_OPTIONS = [
-  { value: "100vh", label: "Full Viewport (100vh)" },
-  { value: "80vh", label: "80% Viewport (80vh)" },
-  { value: "50vh", label: "50% Viewport (50vh)" },
-  { value: "20vh", label: "20% Viewport (20vh)" },
-];
-
-const ALIGN_OPTIONS = [
-  { value: "start", label: "Top" },
-  { value: "center", label: "Center" },
-  { value: "end", label: "Bottom" },
-];
-
-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)]";
-
-interface CoverSectionSettingsProps {
-  section: CoverSection;
-}
-
-export default function CoverSectionSettings({ section }: CoverSectionSettingsProps) {
-  const store = useBuilderStore();
-  const paletteSwatches = usePaletteSwatches();
-
-  const bgType = section.background_type || "image";
-  const bgPosition = section.background_position || "center center";
-  const bgSize = section.background_size || "cover";
-  const overlayColor = section.background_overlay_color || "#000000";
-  const overlayOpacity = section.background_overlay_opacity ?? 0;
-
-  const updateBg = (fields: Partial<Pick<CoverSection,
-    "background_type" | "background_color" | "background_image" | "background_video" |
-    "background_position" | "background_size" |
-    "background_overlay_color" | "background_overlay_opacity" |
-    "nav_color"
-  >>) => {
-    store.updateCoverBackground(section._key, fields);
-  };
-
-  return (
-    <>
-      {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
-        <SettingsField label="Type">
-          <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
-            {(["image", "video", "color"] 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" : type === "video" ? "Video" : "Color"}
-              </button>
-            ))}
-          </div>
-        </SettingsField>
-
-        {bgType === "color" ? (
-          <SettingsField label="Color">
-            <ColorSwatchPicker
-              value={section.background_color || "#000000"}
-              onChange={(val) => updateBg({ background_color: typeof val === "string" ? val : "" })}
-              swatches={paletteSwatches}
-            />
-          </SettingsField>
-        ) : (
-          <>
-            <SettingsField label={bgType === "image" ? "Image" : "Video"}>
-              <AssetPathInput
-                value={bgType === "image" ? (section.background_image || "") : (section.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>
-
-            <SettingsField label="Position">
-              <select
-                value={bgPosition}
-                onChange={(e) => updateBg({ background_position: e.target.value })}
-                className={SELECT_CLASS}
-              >
-                {BG_POSITION_OPTIONS.map((opt) => (
-                  <option key={opt.value} value={opt.value}>{opt.label}</option>
-                ))}
-              </select>
-            </SettingsField>
-
-            <SettingsField label="Size">
-              <select
-                value={bgSize}
-                onChange={(e) => updateBg({ background_size: e.target.value as CoverSection["background_size"] })}
-                className={SELECT_CLASS}
-              >
-                {BG_SIZE_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} icon={<NavbarColorIcon />}>
-        <SettingsField label="Color">
-          <div className="flex items-center gap-2">
-            <ColorSwatchPicker
-              value={section.nav_color || ""}
-              onChange={(val) => updateBg({ nav_color: typeof val === "string" ? val : undefined })}
-              swatches={paletteSwatches}
-            />
-            {section.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 cover section is on screen. Clears when the next section takes over.
-        </p>
-      </SettingsSection>
-
-      {/* Overlay */}
-      <SettingsSection title="Overlay" defaultOpen icon={<OverlayIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={overlayColor}
-            onChange={(val) => updateBg({ background_overlay_color: typeof val === "string" ? val : "" })}
-            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>
-
-      {/* Section Height */}
-      <SettingsSection title="Height" defaultOpen icon={<SpacingIcon />}>
-        <SettingsField label="Height">
-          <select
-            value={section.height}
-            onChange={(e) => store.updateCoverHeight(section._key, e.target.value as CoverSection["height"])}
-            className={SELECT_CLASS}
-          >
-            {HEIGHT_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>{opt.label}</option>
-            ))}
-          </select>
-        </SettingsField>
-      </SettingsSection>
-
-      {/* Rows */}
-      <SettingsSection title="Rows" defaultOpen icon={<GridGapsIcon />}>
-        <div className="space-y-2">
-          {section.cover_rows.map((row, i) => (
-            <div
-              key={row._key}
-              className="flex items-center gap-2 rounded-lg bg-[#f5f5f5] px-2.5 py-2"
-            >
-              <span className="text-[10px] font-semibold text-neutral-400 w-6 shrink-0">
-                R{i + 1}
-              </span>
-              <span className="text-xs text-neutral-700 font-medium tabular-nums w-10">
-                {row.height_percent}%
-              </span>
-              <select
-                value={row.vertical_align}
-                onChange={(e) =>
-                  store.updateCoverRowAlign(
-                    section._key,
-                    row._key,
-                    e.target.value as "start" | "center" | "end"
-                  )
-                }
-                className="flex-1 rounded-md border border-transparent bg-white px-2 py-1 text-[11px] text-neutral-700 outline-none hover:border-[#e5e5e5] focus:border-[#076bff]"
-              >
-                {ALIGN_OPTIONS.map((opt) => (
-                  <option key={opt.value} value={opt.value}>{opt.label}</option>
-                ))}
-              </select>
-              {section.cover_rows.length > 1 && (
-                <button
-                  onClick={() => store.removeCoverRow(section._key, row._key)}
-                  className="text-neutral-300 hover:text-red-500 transition-colors text-xs shrink-0"
-                  title="Remove row"
-                >
-                  ✕
-                </button>
-              )}
-            </div>
-          ))}
-        </div>
-
-        {section.cover_rows.length < 5 && (
-          <button
-            onClick={() => store.addCoverRow(section._key)}
-            className="w-full mt-2 rounded-lg border border-dashed border-neutral-300 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-600 hover:border-neutral-400 transition-colors"
-          >
-            + Add Row
-          </button>
-        )}
-
-        <p className="text-[10px] text-neutral-400 leading-snug px-0.5 mt-2">
-          Drag the handles between rows in the canvas to resize. Heights always sum to 100%.
-        </p>
-      </SettingsSection>
-
-      {/* Grid Gaps */}
-      <SettingsSection title="Grid" defaultOpen={false} icon={<GridGapsIcon />}>
-        <SettingsField label="Col Gap">
-          <div className="flex items-center gap-2">
-            <input
-              type="range"
-              min={0}
-              max={60}
-              step={2}
-              value={section.settings.col_gap ?? 20}
-              onChange={(e) => store.updateCoverSettings(section._key, { col_gap: parseInt(e.target.value) })}
-              className="flex-1 accent-[#076bff]"
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
-              {section.settings.col_gap ?? 20}px
-            </span>
-          </div>
-        </SettingsField>
-
-        <SettingsField label="Row Gap">
-          <div className="flex items-center gap-2">
-            <input
-              type="range"
-              min={0}
-              max={60}
-              step={2}
-              value={section.settings.row_gap ?? 20}
-              onChange={(e) => store.updateCoverSettings(section._key, { row_gap: parseInt(e.target.value) })}
-              className="flex-1 accent-[#076bff]"
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
-              {section.settings.row_gap ?? 20}px
-            </span>
-          </div>
-        </SettingsField>
-      </SettingsSection>
-
-      {/* Stagger */}
-      <StaggerSettings
-        stagger={section.settings.stagger}
-        onChange={(s) => store.updateCoverSettings(section._key, { stagger: s })}
-      />
-    </>
-  );
-}
+"use client";
+
+/**
+ * CoverSectionSettings — Settings panel for a Cover Section.
+ *
+ * Displays:
+ *   - Background type segmented control (Image / Video)
+ *   - AssetBrowser picker for image or video
+ *   - Background position / size dropdowns
+ *   - Overlay color + overlay opacity slider
+ *   - Section height selector (100vh / 80vh / 50vh)
+ *   - Row list with percentages and vertical align
+ *   - Add/Remove row controls
+ *
+ * Layout and Animation tabs are delegated to SectionV2LayoutTab / SectionV2AnimationTab
+ * via a virtual PageSectionV2 (same pattern as parallax slides).
+ *
+ * Session 176: Cover Sections — Phase 6 (Settings Panel).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { CoverSection } from "../../../lib/sanity/types";
+import {
+  BackgroundIcon,
+  NavbarColorIcon,
+  OverlayIcon,
+  SpacingIcon,
+  GridGapsIcon,
+} from "../editors/section-icons";
+import {
+  SettingsField,
+  SettingsSection,
+} from "../editors/shared";
+import { AssetPathInput } from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import StaggerSettings from "../editors/StaggerSettings";
+
+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" },
+];
+
+const BG_SIZE_OPTIONS = [
+  { value: "cover", label: "Cover" },
+  { value: "contain", label: "Contain" },
+  { value: "auto", label: "Auto" },
+];
+
+const HEIGHT_OPTIONS = [
+  { value: "100vh", label: "Full Viewport (100vh)" },
+  { value: "80vh", label: "80% Viewport (80vh)" },
+  { value: "50vh", label: "50% Viewport (50vh)" },
+  { value: "20vh", label: "20% Viewport (20vh)" },
+];
+
+const ALIGN_OPTIONS = [
+  { value: "start", label: "Top" },
+  { value: "center", label: "Center" },
+  { value: "end", label: "Bottom" },
+];
+
+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-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]";
+
+interface CoverSectionSettingsProps {
+  section: CoverSection;
+}
+
+export default function CoverSectionSettings({ section }: CoverSectionSettingsProps) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+
+  const bgType = section.background_type || "image";
+  const bgPosition = section.background_position || "center center";
+  const bgSize = section.background_size || "cover";
+  const overlayColor = section.background_overlay_color || "#000000";
+  const overlayOpacity = section.background_overlay_opacity ?? 0;
+
+  const updateBg = (fields: Partial<Pick<CoverSection,
+    "background_type" | "background_color" | "background_image" | "background_video" |
+    "background_position" | "background_size" |
+    "background_overlay_color" | "background_overlay_opacity" |
+    "nav_color"
+  >>) => {
+    store.updateCoverBackground(section._key, fields);
+  };
+
+  return (
+    <>
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
+        <SettingsField label="Type">
+          <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
+            {(["image", "video", "color"] 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" : type === "video" ? "Video" : "Color"}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        {bgType === "color" ? (
+          <SettingsField label="Color">
+            <ColorSwatchPicker
+              value={section.background_color || "#000000"}
+              onChange={(val) => updateBg({ background_color: typeof val === "string" ? val : "" })}
+              swatches={paletteSwatches}
+            />
+          </SettingsField>
+        ) : (
+          <>
+            <SettingsField label={bgType === "image" ? "Image" : "Video"}>
+              <AssetPathInput
+                value={bgType === "image" ? (section.background_image || "") : (section.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>
+
+            <SettingsField label="Position">
+              <select
+                value={bgPosition}
+                onChange={(e) => updateBg({ background_position: e.target.value })}
+                className={SELECT_CLASS}
+              >
+                {BG_POSITION_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Size">
+              <select
+                value={bgSize}
+                onChange={(e) => updateBg({ background_size: e.target.value as CoverSection["background_size"] })}
+                className={SELECT_CLASS}
+              >
+                {BG_SIZE_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} icon={<NavbarColorIcon />}>
+        <SettingsField label="Color">
+          <div className="flex items-center gap-2">
+            <ColorSwatchPicker
+              value={section.nav_color || ""}
+              onChange={(val) => updateBg({ nav_color: typeof val === "string" ? val : undefined })}
+              swatches={paletteSwatches}
+            />
+            {section.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 cover section is on screen. Clears when the next section takes over.
+        </p>
+      </SettingsSection>
+
+      {/* Overlay */}
+      <SettingsSection title="Overlay" defaultOpen icon={<OverlayIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={overlayColor}
+            onChange={(val) => updateBg({ background_overlay_color: typeof val === "string" ? val : "" })}
+            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-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {overlayOpacity}%
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Section Height */}
+      <SettingsSection title="Height" defaultOpen icon={<SpacingIcon />}>
+        <SettingsField label="Height">
+          <select
+            value={section.height}
+            onChange={(e) => store.updateCoverHeight(section._key, e.target.value as CoverSection["height"])}
+            className={SELECT_CLASS}
+          >
+            {HEIGHT_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Rows */}
+      <SettingsSection title="Rows" defaultOpen icon={<GridGapsIcon />}>
+        <div className="space-y-2">
+          {section.cover_rows.map((row, i) => (
+            <div
+              key={row._key}
+              className="flex items-center gap-2 rounded-lg bg-[#f5f5f5] px-2.5 py-2"
+            >
+              <span className="text-[10px] font-semibold text-neutral-400 w-6 shrink-0">
+                R{i + 1}
+              </span>
+              <span className="text-xs text-neutral-700 font-medium tabular-nums w-10">
+                {row.height_percent}%
+              </span>
+              <select
+                value={row.vertical_align}
+                onChange={(e) =>
+                  store.updateCoverRowAlign(
+                    section._key,
+                    row._key,
+                    e.target.value as "start" | "center" | "end"
+                  )
+                }
+                className="flex-1 rounded-md border border-transparent bg-white px-2 py-1 text-[11px] text-neutral-700 outline-none hover:border-[#e5e5e5] focus:border-[#3580f9]"
+              >
+                {ALIGN_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+              {section.cover_rows.length > 1 && (
+                <button
+                  onClick={() => store.removeCoverRow(section._key, row._key)}
+                  className="text-neutral-300 hover:text-red-500 transition-colors text-xs shrink-0"
+                  title="Remove row"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {section.cover_rows.length < 5 && (
+          <button
+            onClick={() => store.addCoverRow(section._key)}
+            className="w-full mt-2 rounded-lg border border-dashed border-neutral-300 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-600 hover:border-neutral-400 transition-colors"
+          >
+            + Add Row
+          </button>
+        )}
+
+        <p className="text-[10px] text-neutral-400 leading-snug px-0.5 mt-2">
+          Drag the handles between rows in the canvas to resize. Heights always sum to 100%.
+        </p>
+      </SettingsSection>
+
+      {/* Grid Gaps */}
+      <SettingsSection title="Grid" defaultOpen={false} icon={<GridGapsIcon />}>
+        <SettingsField label="Col Gap">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={60}
+              step={2}
+              value={section.settings.col_gap ?? 20}
+              onChange={(e) => store.updateCoverSettings(section._key, { col_gap: parseInt(e.target.value) })}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {section.settings.col_gap ?? 20}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Row Gap">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={60}
+              step={2}
+              value={section.settings.row_gap ?? 20}
+              onChange={(e) => store.updateCoverSettings(section._key, { row_gap: parseInt(e.target.value) })}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {section.settings.row_gap ?? 20}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Stagger */}
+      <StaggerSettings
+        stagger={section.settings.stagger}
+        onChange={(s) => store.updateCoverSettings(section._key, { stagger: s })}
+      />
+    </>
+  );
+}