@morphika/webframe 0.1.0

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

@@ -0,0 +1,160 @@
+"use client";
+
+/**
+ * ColumnV2Settings — Settings panel for a selected column within a V2 section.
+ *
+ * Settings tab only — no Layout or Animation sub-tabs.
+ * - Size: numeric input (1 to grid_columns), triggers cascade on change
+ *   - Desktop: modifies base column data via cascade engine
+ *   - Tablet/Phone: writes to responsive column overrides
+ * - Block count info
+ * - Delete column button
+ *
+ * Session 83: Phase 4 of V2 Grid System.
+ * Session 84: Phase 7 — viewport-aware column editing.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionColumn } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+} from "../editors/shared";
+import {
+  getColumnV2Override,
+  buildSingleColumnV2Override,
+  hasAnyColumnV2Overrides,
+} from "./responsive-helpers";
+
+export default function ColumnV2Settings({
+  section,
+  column,
+}: {
+  section: PageSectionV2;
+  column: SectionColumn;
+}) {
+  const store = useBuilderStore();
+  const activeViewport = store.activeViewport;
+  const isResponsive = activeViewport !== "desktop";
+  const gridColumns = section.settings.grid_columns;
+
+  // Effective values: responsive override or base
+  const effectiveSpan = (isResponsive
+    ? getColumnV2Override(section, column._key, activeViewport, "span")
+    : undefined) ?? column.span;
+
+  const effectiveGridColumn = (isResponsive
+    ? getColumnV2Override(section, column._key, activeViewport, "grid_column")
+    : undefined) ?? column.grid_column;
+
+  const effectiveGridRow = (isResponsive
+    ? getColumnV2Override(section, column._key, activeViewport, "grid_row")
+    : undefined) ?? column.grid_row;
+
+  const hasSpanOverride = isResponsive &&
+    getColumnV2Override(section, column._key, activeViewport, "span") !== undefined;
+
+  const handleSpanChange = (newSpan: number) => {
+    const clamped = Math.max(1, Math.min(gridColumns, newSpan));
+    if (clamped === effectiveSpan) return;
+
+    if (isResponsive) {
+      // Write span override to responsive
+      const responsive = buildSingleColumnV2Override(section, activeViewport, column._key, {
+        span: clamped,
+      });
+      store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+    } else {
+      // Desktop: use cascade engine
+      store.resizeColumnV2(section._key, column._key, clamped);
+    }
+  };
+
+  const handleResetSpan = () => {
+    // Remove span override for this column
+    const responsive = buildSingleColumnV2Override(section, activeViewport, column._key, {
+      span: undefined,
+    });
+    store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+  };
+
+  return (
+    <>
+      {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>
+      )}
+
+      <SettingsSection title="Column Size" defaultOpen>
+        <SettingsField label={
+          <span>
+            Span
+            {hasSpanOverride && (
+              <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+            )}
+          </span>
+        }>
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={1}
+              max={gridColumns}
+              value={effectiveSpan}
+              onChange={(e) => handleSpanChange(parseInt(e.target.value))}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-12 text-right font-medium">
+              {effectiveSpan}/{gridColumns}
+            </span>
+            {hasSpanOverride && (
+              <button
+                onClick={handleResetSpan}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            )}
+          </div>
+          {/* Visual grid indicator */}
+          <div className="flex gap-0.5 mt-1.5">
+            {Array.from({ length: gridColumns }).map((_, i) => {
+              const colStart = effectiveGridColumn - 1; // 0-based for display
+              const colEnd = colStart + effectiveSpan;
+              const isActive = i >= colStart && i < colEnd;
+              return (
+                <div
+                  key={i}
+                  className={`h-1.5 flex-1 rounded-full transition-colors ${
+                    isActive ? "bg-[#076bff]" : "bg-neutral-200"
+                  }`}
+                />
+              );
+            })}
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Position">
+          <p className="text-xs text-neutral-900 py-[7px]">
+            Column {effectiveGridColumn}, Row {effectiveGridRow}
+            {isResponsive && (
+              <span className="text-neutral-400"> (base: {column.grid_column}, {column.grid_row})</span>
+            )}
+          </p>
+        </SettingsField>
+
+        <SettingsField label="Blocks">
+          <p className="text-xs text-neutral-900 py-[7px]">
+            {(column.blocks || []).length} block
+            {(column.blocks || []).length !== 1 ? "s" : ""}
+          </p>
+        </SettingsField>
+      </SettingsSection>
+
+    </>
+  );
+}

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

@@ -0,0 +1,310 @@
+"use client";
+
+/**
+ * LayoutTab — Page Section styling (spacing, background, offset, border).
+ * Viewport-aware with responsive override support.
+ *
+ * Session 64: Extracted from SettingsPanel.tsx.
+ * Session 65: Split out RowLayoutPresetPicker, TRBLInputs, BlockLayoutTab
+ *             into separate modules. This file now contains only LayoutTab.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { resolveEffectiveSpacing } from "../../../lib/builder/layout-styles";
+import type { PageSection } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  SELECT_CLASS,
+  AssetPathInput,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import {
+  getRowSettingValue,
+  hasRowSettingOverride,
+  setRowResponsiveOverride,
+} from "./responsive-helpers";
+import { TRBLInputs } from "./TRBLInputs";
+
+/**
+ * BUG-007 fix: LayoutTab now handles PageSection styling (spacing, background, border).
+ * BUG-013 fix: Sections support responsive overrides (tablet/phone).
+ */
+export function LayoutTab({ section, sectionKey }: { section: PageSection; sectionKey: string }) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const settings = section.settings || {};
+  const activeViewport = store.activeViewport;
+
+  const updateSetting = (updates: Partial<NonNullable<PageSection["settings"]>>) => {
+    store.updateSectionSettings(sectionKey, updates);
+  };
+
+  /** Update a setting, viewport-aware. Supports sections with responsive overrides. */
+  const updateSettingResponsive = (property: string, value: unknown) => {
+    // BUG-013 fix: Sections now support responsive overrides
+    if (activeViewport === "desktop") {
+      store.updateSectionSettings(sectionKey, { [property]: value });
+    } else {
+      // Build responsive override for section
+      const existing = section.responsive || {};
+      const vp = activeViewport as "tablet" | "phone";
+      const vpOverrides = { ...(existing[vp] || {}), [property]: value };
+      if (value === undefined) delete (vpOverrides as Record<string, unknown>)[property];
+      const responsive = { ...existing, [vp]: vpOverrides };
+      if (Object.keys(vpOverrides).length === 0) delete responsive[vp];
+      store.updateSectionResponsive(sectionKey, Object.keys(responsive).length ? responsive : undefined);
+    }
+  };
+
+  // Resolve effective spacing — shows real values even when legacy enum is active
+  const effective = resolveEffectiveSpacing(settings);
+
+  // Viewport-aware spacing values
+  const effectiveSpacingTop = getRowSettingValue<string>(section, activeViewport, "spacing_top", effective.top);
+  const effectiveSpacingRight = getRowSettingValue<string>(section, activeViewport, "spacing_right", effective.right);
+  const effectiveSpacingBottom = getRowSettingValue<string>(section, activeViewport, "spacing_bottom", effective.bottom);
+  const effectiveSpacingLeft = getRowSettingValue<string>(section, activeViewport, "spacing_left", effective.left);
+
+  // Parse background color + opacity to display
+  const bgOpacity = getRowSettingValue<number>(section, activeViewport, "background_opacity", settings.background_opacity ?? 100);
+
+  const viewportLabel = activeViewport !== "desktop"
+    ? activeViewport === "tablet" ? "Tablet" : "Phone"
+    : null;
+
+  return (
+    <>
+      {viewportLabel && (
+        <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 {viewportLabel} overrides
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Spacing (Padding) */}
+      <SettingsSection title="Spacing" defaultOpen>
+        <TRBLInputs
+          top={effectiveSpacingTop}
+          right={effectiveSpacingRight}
+          bottom={effectiveSpacingBottom}
+          left={effectiveSpacingLeft}
+          onChange={(field, value) => {
+            if (activeViewport === "desktop") {
+              // When user edits TRBL, set explicit TRBL values
+              const base = resolveEffectiveSpacing(settings);
+              updateSetting({
+                spacing_top: field === "top" ? value : (settings.spacing_top ?? base.top),
+                spacing_right: field === "right" ? value : (settings.spacing_right ?? base.right),
+                spacing_bottom: field === "bottom" ? value : (settings.spacing_bottom ?? base.bottom),
+                spacing_left: field === "left" ? value : (settings.spacing_left ?? base.left),
+              });
+            } else {
+              updateSettingResponsive(`spacing_${field}`, value);
+            }
+          }}
+        />
+        {activeViewport !== "desktop" && (
+          ["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"].some(
+            (p) => hasRowSettingOverride(section, activeViewport, p)
+          ) ? (
+            <div className="flex items-center gap-2 mt-1">
+              <span className="text-[9px] text-[#076bff]">overridden</span>
+              <button
+                onClick={() => {
+                  // BUG-021 fix: use proper store action for responsive reset
+                  let updated = section;
+                  ["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"].forEach((p) => {
+                    const updates = setRowResponsiveOverride(updated, activeViewport, p, undefined);
+                    if (updates.responsive !== undefined) {
+                      updated = { ...updated, responsive: updates.responsive };
+                    }
+                  });
+                  store.updateSectionResponsive(sectionKey, (updated as PageSection).responsive);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          ) : (
+            <p className="text-[9px] text-neutral-300 italic mt-1">inherited</p>
+          )
+        )}
+      </SettingsSection>
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={getRowSettingValue<string>(section, activeViewport, "background_color", "")}
+            onChange={(hex) => updateSettingResponsive("background_color", hex)}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={bgOpacity}
+              onChange={(e) => updateSettingResponsive("background_opacity", parseInt(e.target.value))}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {bgOpacity}%
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Image">
+          <AssetPathInput
+            value={getRowSettingValue<string>(section, activeViewport, "background_image", "")}
+            onFocus={() => store._pushSnapshot()}
+            onChange={(v) => updateSettingResponsive("background_image", v)}
+            placeholder="path/to/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        {getRowSettingValue<string>(section, activeViewport, "background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getRowSettingValue<string>(section, activeViewport, "background_size", "cover")}
+                onChange={(e) => updateSettingResponsive("background_size", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="cover">Cover</option>
+                <option value="contain">Contain</option>
+                <option value="auto">Auto</option>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Position">
+              <select
+                value={getRowSettingValue<string>(section, activeViewport, "background_position", "center center")}
+                onFocus={() => store._pushSnapshot()}
+                onChange={(e) => updateSettingResponsive("background_position", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="center center">Center</option>
+                <option value="top center">Top</option>
+                <option value="bottom center">Bottom</option>
+                <option value="left center">Left</option>
+                <option value="right center">Right</option>
+                <option value="top left">Top Left</option>
+                <option value="top right">Top Right</option>
+                <option value="bottom left">Bottom Left</option>
+                <option value="bottom right">Bottom Right</option>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Repeat">
+              <select
+                value={getRowSettingValue<string>(section, activeViewport, "background_repeat", "no-repeat")}
+                onChange={(e) => updateSettingResponsive("background_repeat", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="no-repeat">No Repeat</option>
+                <option value="repeat">Repeat</option>
+                <option value="repeat-x">Repeat X</option>
+                <option value="repeat-y">Repeat Y</option>
+              </select>
+            </SettingsField>
+          </>
+        )}
+      </SettingsSection>
+
+      {/* Offset (Margin) */}
+      <SettingsSection title="Offset">
+        <TRBLInputs
+          top={getRowSettingValue<string>(section, activeViewport, "offset_top", "0")}
+          right={getRowSettingValue<string>(section, activeViewport, "offset_right", "0")}
+          bottom={getRowSettingValue<string>(section, activeViewport, "offset_bottom", "0")}
+          left={getRowSettingValue<string>(section, activeViewport, "offset_left", "0")}
+          onChange={(field, value) => {
+            updateSettingResponsive(`offset_${field}`, value);
+          }}
+        />
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border">
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={getRowSettingValue<string>(section, activeViewport, "border_color", "")}
+            onChange={(hex) => updateSettingResponsive("border_color", hex)}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Width">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={20}
+              value={parseInt(getRowSettingValue<string>(section, activeViewport, "border_width", "0"))}
+              onChange={(e) => updateSettingResponsive("border_width", e.target.value)}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getRowSettingValue<string>(section, activeViewport, "border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getRowSettingValue<string>(section, activeViewport, "border_style", "none")}
+            onChange={(e) => updateSettingResponsive("border_style", e.target.value)}
+            className={SELECT_CLASS}
+          >
+            <option value="none">None</option>
+            <option value="solid">Solid</option>
+            <option value="dashed">Dashed</option>
+            <option value="dotted">Dotted</option>
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Sides">
+          <select
+            value={getRowSettingValue<string>(section, activeViewport, "border_sides", "all")}
+            onChange={(e) => updateSettingResponsive("border_sides", e.target.value)}
+            className={SELECT_CLASS}
+          >
+            <option value="all">All</option>
+            <option value="top">Top</option>
+            <option value="right">Right</option>
+            <option value="bottom">Bottom</option>
+            <option value="left">Left</option>
+            <option value="top-bottom">Top & Bottom</option>
+            <option value="left-right">Left & Right</option>
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Radius">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={50}
+              value={parseInt(getRowSettingValue<string>(section, activeViewport, "border_radius", "0"))}
+              onChange={(e) => updateSettingResponsive("border_radius", e.target.value)}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getRowSettingValue<string>(section, activeViewport, "border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

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

@@ -0,0 +1,200 @@
+"use client";
+
+/**
+ * PageSettings — General, Appearance, and Navigation settings (Settings tab).
+ * PageSeoSettings — SEO fields (dedicated SEO tab at page level).
+ *
+ * Session 64: Extracted from SettingsPanel.tsx.
+ * Session 135: Reorganized — Layout tab replaced with SEO tab at page level,
+ *   Nav Color moved from Appearance to Navigation, Nav Animation renamed to Navigation.
+ */
+
+import { useState } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import {
+  SettingsField,
+  SettingsSection,
+  INPUT_CLASS,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+
+/** Convert a title to a URL-safe slug. Handles unicode (é, ñ, ü, etc.). */
+function slugify(text: string): string {
+  return text
+    .normalize("NFD")                // decompose accented chars (é → e + combining accent)
+    .replace(/[\u0300-\u036f]/g, "") // strip combining diacritical marks
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")       // remove non-word chars
+    .replace(/[\s_]+/g, "-")        // spaces/underscores → hyphens
+    .replace(/-+/g, "-")            // collapse multiple hyphens
+    .replace(/^-|-$/g, "");         // trim leading/trailing hyphens
+}
+
+export default function PageSettings() {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+
+  return (
+    <>
+      <SettingsSection title="General" defaultOpen>
+        <SettingsField label="Title">
+          <input
+            type="text"
+            value={store.pageTitle}
+            onChange={(e) => {
+              const newTitle = e.target.value;
+              store.setPageTitle(newTitle);
+              // Auto-update slug from title unless user manually edited the slug
+              if (!slugManuallyEdited) {
+                store.setPageSlug(slugify(newTitle));
+              }
+            }}
+            className={INPUT_CLASS}
+          />
+        </SettingsField>
+        <SettingsField label="Slug">
+          <input
+            type="text"
+            value={store.pageSlug}
+            onChange={(e) => {
+              setSlugManuallyEdited(true);
+              store.setPageSlug(e.target.value);
+            }}
+            className={INPUT_CLASS}
+          />
+        </SettingsField>
+        <SettingsField label="Type">
+          <p className="text-xs text-neutral-900 py-[7px]">
+            {store.pageType}
+          </p>
+        </SettingsField>
+      </SettingsSection>
+
+      <SettingsSection title="Appearance" defaultOpen>
+        <SettingsField label="Background">
+          <ColorSwatchPicker
+            value={store.pageSettings.background_color || ""}
+            onChange={(hex) => store.updatePageSettings({ background_color: hex || "transparent" })}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+        <SettingsField label="Text Color">
+          <ColorSwatchPicker
+            value={store.pageSettings.text_color || ""}
+            onChange={(hex) => store.updatePageSettings({ text_color: hex })}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      <SettingsSection title="Navigation">
+        <SettingsField label="Nav Color">
+          <ColorSwatchPicker
+            value={store.pageSettings.nav_color || ""}
+            onChange={(hex) => store.updatePageSettings({ nav_color: hex })}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+        <SettingsField label="Animation Override" hint="Override global nav entrance for this page">
+          <select
+            value={store.pageSettings.nav_entrance_animation || ""}
+            onChange={(e) => store.updatePageSettings({ nav_entrance_animation: e.target.value as "" | "fade-in" | "slide-down" | "blur-in" })}
+            className={INPUT_CLASS}
+          >
+            <option value="">Use Global</option>
+            <option value="fade-in">Fade In</option>
+            <option value="slide-down">Slide Down</option>
+            <option value="blur-in">Blur In</option>
+          </select>
+        </SettingsField>
+        {store.pageSettings.nav_entrance_animation && (
+          <>
+            <SettingsField label={`Duration: ${store.pageSettings.nav_entrance_duration || 600}ms`}>
+              <input
+                type="range"
+                min={200}
+                max={5000}
+                step={50}
+                value={store.pageSettings.nav_entrance_duration || 600}
+                onChange={(e) => store.updatePageSettings({ nav_entrance_duration: Number(e.target.value) })}
+                className="w-full accent-[#076bff]"
+              />
+            </SettingsField>
+            <SettingsField label={`Delay: ${store.pageSettings.nav_entrance_delay || 0}ms`}>
+              <input
+                type="range"
+                min={0}
+                max={5000}
+                step={50}
+                value={store.pageSettings.nav_entrance_delay || 0}
+                onChange={(e) => store.updatePageSettings({ nav_entrance_delay: Number(e.target.value) })}
+                className="w-full accent-[#076bff]"
+              />
+            </SettingsField>
+          </>
+        )}
+        <SettingsField label="Disable Animation" hint="No nav animation on this page">
+          <button
+            type="button"
+            onClick={() => store.updatePageSettings({ nav_entrance_disabled: !store.pageSettings.nav_entrance_disabled })}
+            className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+              store.pageSettings.nav_entrance_disabled ? "bg-[#076bff]" : "bg-neutral-300"
+            }`}
+          >
+            <span
+              className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${
+                store.pageSettings.nav_entrance_disabled ? "translate-x-[18px]" : "translate-x-[3px]"
+              }`}
+            />
+          </button>
+        </SettingsField>
+      </SettingsSection>
+
+    </>
+  );
+}
+
+/** SEO settings — rendered in the dedicated SEO tab at page level. */
+export function PageSeoSettings() {
+  const store = useBuilderStore();
+
+  return (
+    <>
+      <SettingsSection title="SEO" defaultOpen>
+        <SettingsField label="SEO Title">
+          <input
+            type="text"
+            value={store.metadata.seo_title || ""}
+            onChange={(e) => store.setMetadata({ seo_title: e.target.value })}
+            className={INPUT_CLASS}
+            placeholder="Page title for search engines"
+          />
+        </SettingsField>
+        <SettingsField label="Description">
+          <textarea
+            value={store.metadata.seo_description || ""}
+            onChange={(e) =>
+              store.setMetadata({ seo_description: e.target.value })
+            }
+            rows={2}
+            className={`${INPUT_CLASS} resize-y`}
+            placeholder="Brief description for search results"
+          />
+        </SettingsField>
+        <SettingsField label="OG Image" hint="Social sharing image path">
+          <input
+            type="text"
+            value={store.metadata.og_image_path || ""}
+            onChange={(e) =>
+              store.setMetadata({ og_image_path: e.target.value })
+            }
+            className={INPUT_CLASS}
+            placeholder="og/page-image.jpg"
+          />
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}