@morphika/andami 0.1.3 → 0.1.5

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

@@ -1,310 +1,382 @@
-"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>
-    </>
-  );
-}
+"use client";
+
+/**
+ * LayoutTab — Page Section styling (spacing, offset, background, 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.
+ * Session 158: Added section title icons matching BlockLayoutTab/SectionV2LayoutTab.
+ *              Reordered sections: Spacing → Offset → Background → Border.
+ */
+
+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 { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
+import {
+  getRowSettingValue,
+  hasRowSettingOverride,
+  setRowResponsiveOverride,
+} from "./responsive-helpers";
+import { TRBLInputs } from "./TRBLInputs";
+
+// ── Section title icons (matching BlockLayoutTab / SectionV2LayoutTab) ──
+
+function SpacingSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
+      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
+      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
+      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
+      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
+    </svg>
+  );
+}
+
+function OffsetSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
+      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
+      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
+    </svg>
+  );
+}
+
+function BackgroundSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
+      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
+      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
+      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
+    </svg>
+  );
+}
+
+function BorderSectionIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
+      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
+    </svg>
+  );
+}
+
+/**
+ * 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;
+
+  // Live preview callbacks (Phase 4)
+  const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    store.setColorPickerPreview({ sectionKey, field: "background_color", value: val });
+  };
+  const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    store.setColorPickerPreview({ sectionKey, field: "border_color", value: val });
+  };
+
+  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 icon={<SpacingSectionIcon />}>
+        <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>
+
+      {/* Offset (Margin) */}
+      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+        <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>
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getRowSettingValue<string>(section, activeViewport, "background_color", ""))}
+            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("background_color", serializeColorField(val)); }}
+            swatches={paletteSwatches}
+            allowGradients
+            onPreview={handleBgPreview}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          {(() => {
+            const bgIsGrad = isGradient(parseColorField(getRowSettingValue<string>(section, activeViewport, "background_color", "")));
+            return (
+              <>
+                <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] ${bgIsGrad ? "opacity-40 pointer-events-none" : ""}`}
+                    disabled={bgIsGrad}
+                  />
+                  <span className="text-xs text-neutral-900 w-10 text-right">
+                    {bgOpacity}%
+                  </span>
+                </div>
+                {bgIsGrad && (
+                  <p className="text-[9px] text-neutral-400 italic mt-1">
+                    Opacity is controlled per stop in gradient mode
+                  </p>
+                )}
+              </>
+            );
+          })()}
+        </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>
+
+      {/* Border */}
+      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getRowSettingValue<string>(section, activeViewport, "border_color", ""))}
+            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("border_color", serializeColorField(val)); }}
+            swatches={paletteSwatches}
+            allowGradients
+            onPreview={handleBorderPreview}
+          />
+        </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>
+    </>
+  );
+}