@morphika/andami 0.5.0 → 0.5.2

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

@@ -1,356 +1,356 @@
-"use client";
-
-/**
- * SectionV2LayoutTab — Layout tab content for V2 grid sections.
- *
- * Extracted from SectionV2Settings.tsx in Session 95.
- * Session 158: Redesigned to match BlockLayoutTab style —
- *   section title icons, TRBLInputs for spacing/offset,
- *   AssetPathInput for background image, SELECT_CLASS for selects.
- *   No Alignment section (that's for blocks only).
- *
- * Controls: spacing (TRBL padding), background (color/opacity/image),
- * offset (TRBL margins), and border properties.
- */
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { PageSectionV2, SectionV2Settings as SectionV2SettingsType } 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 { TRBLInputs } from "./TRBLInputs";
-
-// ── Section title icons (centralized colored icons — Session 163) ──
-import {
-  SpacingIcon,
-  OffsetIcon,
-  BackgroundIcon,
-  BorderIcon,
-} from "../editors/section-icons";
-
-// ── Override indicator badge (matching BlockLayoutTab pattern) ──
-
-function SectionOverrideBadge({
-  hasAny,
-  onReset,
-  viewport,
-}: {
-  hasAny: boolean;
-  onReset: () => void;
-  viewport: string;
-}) {
-  if (viewport === "desktop") return null;
-  if (hasAny) {
-    return (
-      <div className="flex items-center gap-2 mt-1">
-        <span className="text-[9px] text-[#076bff]">overridden</span>
-        <button
-          onClick={onReset}
-          className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
-        >
-          Reset
-        </button>
-      </div>
-    );
-  }
-  return <p className="text-[9px] text-neutral-300 italic mt-1">inherited</p>;
-}
-
-export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
-  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: section._key, field: "background_color", value: val });
-  };
-  const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ sectionKey: section._key, field: "border_color", value: val });
-  };
-
-  const viewportLabel = activeViewport !== "desktop"
-    ? activeViewport === "tablet" ? "Tablet" : "Phone"
-    : null;
-
-  /**
-   * Update setting with viewport awareness.
-   * Desktop writes directly to settings; tablet/phone writes to responsive overrides.
-   */
-  const updateSettingResponsive = (property: string, value: unknown) => {
-    if (activeViewport === "desktop") {
-      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
-    } else {
-      const existing = section.responsive || {};
-      const vp = activeViewport as "tablet" | "phone";
-      const vpSettings = { ...(existing[vp]?.settings || {}), [property]: value };
-      if (value === undefined) delete (vpSettings as Record<string, unknown>)[property];
-      const vpOverride = { ...(existing[vp] || {}), settings: Object.keys(vpSettings).length ? vpSettings : undefined };
-      const responsive = { ...existing, [vp]: vpOverride };
-      // Clean up empty viewport override
-      if (!vpOverride.columns?.length && !vpOverride.settings) delete responsive[vp];
-      store.updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
-    }
-  };
-
-  /** Read a setting value respecting viewport overrides */
-  const getSettingValue = <T,>(property: string, fallback: T): T => {
-    if (activeViewport !== "desktop") {
-      const vp = activeViewport as "tablet" | "phone";
-      const vpSettings = section.responsive?.[vp]?.settings as Record<string, unknown> | undefined;
-      const override = vpSettings?.[property];
-      if (override !== undefined) return override as T;
-    }
-    const val = (settings as unknown as Record<string, unknown>)[property];
-    return (val !== undefined ? val : fallback) as T;
-  };
-
-  const hasOverride = (property: string): boolean => {
-    if (activeViewport === "desktop") return false;
-    const vp = activeViewport as "tablet" | "phone";
-    const vpSettings = section.responsive?.[vp]?.settings as Record<string, unknown> | undefined;
-    return vpSettings?.[property] !== undefined;
-  };
-
-  const hasAnyOverrideInGroup = (properties: string[]): boolean => {
-    return properties.some((p) => hasOverride(p));
-  };
-
-  const resetGroup = (properties: string[]) => {
-    for (const prop of properties) {
-      updateSettingResponsive(prop, undefined);
-    }
-  };
-
-  const bgIsGradient = isGradient(parseColorField(getSettingValue<string>("background_color", "")));
-
-  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={<SpacingIcon />}>
-        <TRBLInputs
-          top={getSettingValue<string>("spacing_top", "0")}
-          right={getSettingValue<string>("spacing_right", "0")}
-          bottom={getSettingValue<string>("spacing_bottom", "0")}
-          left={getSettingValue<string>("spacing_left", "0")}
-          onChange={(field, value) => {
-            updateSettingResponsive(`spacing_${field}`, value);
-          }}
-        />
-        <SectionOverrideBadge
-          hasAny={hasAnyOverrideInGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
-          onReset={() => resetGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
-          viewport={activeViewport}
-        />
-      </SettingsSection>
-
-      {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetIcon />}>
-        <TRBLInputs
-          top={getSettingValue<string>("offset_top", "0")}
-          right={getSettingValue<string>("offset_right", "0")}
-          bottom={getSettingValue<string>("offset_bottom", "0")}
-          left={getSettingValue<string>("offset_left", "0")}
-          onChange={(field, value) => {
-            updateSettingResponsive(`offset_${field}`, value);
-          }}
-        />
-        <SectionOverrideBadge
-          hasAny={hasAnyOverrideInGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
-          onReset={() => resetGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
-          viewport={activeViewport}
-        />
-      </SettingsSection>
-
-      {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={parseColorField(getSettingValue<string>("background_color", ""))}
-            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("background_color", serializeColorField(val)); }}
-            swatches={paletteSwatches}
-            allowGradients
-            onPreview={handleBgPreview}
-          />
-        </SettingsField>
-
-        <SettingsField label="Opacity">
-          <div className="flex items-center gap-2">
-            <input
-              type="range"
-              min={0}
-              max={100}
-              value={getSettingValue<number>("background_opacity", 100)}
-              onChange={(e) => updateSettingResponsive("background_opacity", parseInt(e.target.value))}
-              className={`flex-1 accent-[#076bff] ${bgIsGradient ? "opacity-40 pointer-events-none" : ""}`}
-              disabled={bgIsGradient}
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right">
-              {getSettingValue<number>("background_opacity", 100)}%
-            </span>
-          </div>
-          {bgIsGradient && (
-            <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={getSettingValue<string>("background_image", "")}
-            onFocus={() => store._pushSnapshot()}
-            onChange={(v) => updateSettingResponsive("background_image", v)}
-            placeholder="path/to/image.jpg"
-            filterType="image"
-          />
-        </SettingsField>
-
-        {getSettingValue<string>("background_image", "") && (
-          <>
-            <SettingsField label="Size">
-              <select
-                value={getSettingValue<string>("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={getSettingValue<string>("background_position", "center center")}
-                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>
-              </select>
-            </SettingsField>
-
-            <SettingsField label="Repeat">
-              <select
-                value={getSettingValue<string>("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>
-          </>
-        )}
-
-        <SectionOverrideBadge
-          hasAny={hasAnyOverrideInGroup(["background_color", "background_opacity", "background_image", "background_size", "background_position", "background_repeat"])}
-          onReset={() => resetGroup(["background_color", "background_opacity", "background_image", "background_size", "background_position", "background_repeat"])}
-          viewport={activeViewport}
-        />
-      </SettingsSection>
-
-      {/* Border */}
-      <SettingsSection title="Border" icon={<BorderIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={parseColorField(getSettingValue<string>("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(getSettingValue<string>("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">
-              {getSettingValue<string>("border_width", "0")}px
-            </span>
-          </div>
-        </SettingsField>
-
-        <SettingsField label="Style">
-          <select
-            value={getSettingValue<string>("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={getSettingValue<string>("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(getSettingValue<string>("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">
-              {getSettingValue<string>("border_radius", "0")}px
-            </span>
-          </div>
-        </SettingsField>
-
-        <SectionOverrideBadge
-          hasAny={hasAnyOverrideInGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
-          onReset={() => resetGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
-          viewport={activeViewport}
-        />
-      </SettingsSection>
-    </>
-  );
-}
+"use client";
+
+/**
+ * SectionV2LayoutTab — Layout tab content for V2 grid sections.
+ *
+ * Extracted from SectionV2Settings.tsx in Session 95.
+ * Session 158: Redesigned to match BlockLayoutTab style —
+ *   section title icons, TRBLInputs for spacing/offset,
+ *   AssetPathInput for background image, SELECT_CLASS for selects.
+ *   No Alignment section (that's for blocks only).
+ *
+ * Controls: spacing (TRBL padding), background (color/opacity/image),
+ * offset (TRBL margins), and border properties.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionV2Settings as SectionV2SettingsType } 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 { TRBLInputs } from "./TRBLInputs";
+
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
+
+// ── Override indicator badge (matching BlockLayoutTab pattern) ──
+
+function SectionOverrideBadge({
+  hasAny,
+  onReset,
+  viewport,
+}: {
+  hasAny: boolean;
+  onReset: () => void;
+  viewport: string;
+}) {
+  if (viewport === "desktop") return null;
+  if (hasAny) {
+    return (
+      <div className="flex items-center gap-2 mt-1">
+        <span className="text-[9px] text-[#3580f9]">overridden</span>
+        <button
+          onClick={onReset}
+          className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+        >
+          Reset
+        </button>
+      </div>
+    );
+  }
+  return <p className="text-[9px] text-neutral-300 italic mt-1">inherited</p>;
+}
+
+export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
+  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: section._key, field: "background_color", value: val });
+  };
+  const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    store.setColorPickerPreview({ sectionKey: section._key, field: "border_color", value: val });
+  };
+
+  const viewportLabel = activeViewport !== "desktop"
+    ? activeViewport === "tablet" ? "Tablet" : "Phone"
+    : null;
+
+  /**
+   * Update setting with viewport awareness.
+   * Desktop writes directly to settings; tablet/phone writes to responsive overrides.
+   */
+  const updateSettingResponsive = (property: string, value: unknown) => {
+    if (activeViewport === "desktop") {
+      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+    } else {
+      const existing = section.responsive || {};
+      const vp = activeViewport as "tablet" | "phone";
+      const vpSettings = { ...(existing[vp]?.settings || {}), [property]: value };
+      if (value === undefined) delete (vpSettings as Record<string, unknown>)[property];
+      const vpOverride = { ...(existing[vp] || {}), settings: Object.keys(vpSettings).length ? vpSettings : undefined };
+      const responsive = { ...existing, [vp]: vpOverride };
+      // Clean up empty viewport override
+      if (!vpOverride.columns?.length && !vpOverride.settings) delete responsive[vp];
+      store.updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
+    }
+  };
+
+  /** Read a setting value respecting viewport overrides */
+  const getSettingValue = <T,>(property: string, fallback: T): T => {
+    if (activeViewport !== "desktop") {
+      const vp = activeViewport as "tablet" | "phone";
+      const vpSettings = section.responsive?.[vp]?.settings as Record<string, unknown> | undefined;
+      const override = vpSettings?.[property];
+      if (override !== undefined) return override as T;
+    }
+    const val = (settings as unknown as Record<string, unknown>)[property];
+    return (val !== undefined ? val : fallback) as T;
+  };
+
+  const hasOverride = (property: string): boolean => {
+    if (activeViewport === "desktop") return false;
+    const vp = activeViewport as "tablet" | "phone";
+    const vpSettings = section.responsive?.[vp]?.settings as Record<string, unknown> | undefined;
+    return vpSettings?.[property] !== undefined;
+  };
+
+  const hasAnyOverrideInGroup = (properties: string[]): boolean => {
+    return properties.some((p) => hasOverride(p));
+  };
+
+  const resetGroup = (properties: string[]) => {
+    for (const prop of properties) {
+      updateSettingResponsive(prop, undefined);
+    }
+  };
+
+  const bgIsGradient = isGradient(parseColorField(getSettingValue<string>("background_color", "")));
+
+  return (
+    <>
+      {viewportLabel && (
+        <div className="px-4 pt-3">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+            <span className="text-[11px] font-medium text-[#3580f9]">
+              Editing {viewportLabel} overrides
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Spacing (Padding) */}
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
+        <TRBLInputs
+          top={getSettingValue<string>("spacing_top", "0")}
+          right={getSettingValue<string>("spacing_right", "0")}
+          bottom={getSettingValue<string>("spacing_bottom", "0")}
+          left={getSettingValue<string>("spacing_left", "0")}
+          onChange={(field, value) => {
+            updateSettingResponsive(`spacing_${field}`, value);
+          }}
+        />
+        <SectionOverrideBadge
+          hasAny={hasAnyOverrideInGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
+          onReset={() => resetGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
+          viewport={activeViewport}
+        />
+      </SettingsSection>
+
+      {/* Offset (Margin) */}
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
+        <TRBLInputs
+          top={getSettingValue<string>("offset_top", "0")}
+          right={getSettingValue<string>("offset_right", "0")}
+          bottom={getSettingValue<string>("offset_bottom", "0")}
+          left={getSettingValue<string>("offset_left", "0")}
+          onChange={(field, value) => {
+            updateSettingResponsive(`offset_${field}`, value);
+          }}
+        />
+        <SectionOverrideBadge
+          hasAny={hasAnyOverrideInGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
+          onReset={() => resetGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
+          viewport={activeViewport}
+        />
+      </SettingsSection>
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getSettingValue<string>("background_color", ""))}
+            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("background_color", serializeColorField(val)); }}
+            swatches={paletteSwatches}
+            allowGradients
+            onPreview={handleBgPreview}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={getSettingValue<number>("background_opacity", 100)}
+              onChange={(e) => updateSettingResponsive("background_opacity", parseInt(e.target.value))}
+              className={`flex-1 accent-[#3580f9] ${bgIsGradient ? "opacity-40 pointer-events-none" : ""}`}
+              disabled={bgIsGradient}
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getSettingValue<number>("background_opacity", 100)}%
+            </span>
+          </div>
+          {bgIsGradient && (
+            <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={getSettingValue<string>("background_image", "")}
+            onFocus={() => store._pushSnapshot()}
+            onChange={(v) => updateSettingResponsive("background_image", v)}
+            placeholder="path/to/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        {getSettingValue<string>("background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getSettingValue<string>("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={getSettingValue<string>("background_position", "center center")}
+                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>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Repeat">
+              <select
+                value={getSettingValue<string>("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>
+          </>
+        )}
+
+        <SectionOverrideBadge
+          hasAny={hasAnyOverrideInGroup(["background_color", "background_opacity", "background_image", "background_size", "background_position", "background_repeat"])}
+          onReset={() => resetGroup(["background_color", "background_opacity", "background_image", "background_size", "background_position", "background_repeat"])}
+          viewport={activeViewport}
+        />
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border" icon={<BorderIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getSettingValue<string>("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(getSettingValue<string>("border_width", "0"))}
+              onChange={(e) => updateSettingResponsive("border_width", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getSettingValue<string>("border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getSettingValue<string>("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={getSettingValue<string>("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(getSettingValue<string>("border_radius", "0"))}
+              onChange={(e) => updateSettingResponsive("border_radius", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getSettingValue<string>("border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SectionOverrideBadge
+          hasAny={hasAnyOverrideInGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
+          onReset={() => resetGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
+          viewport={activeViewport}
+        />
+      </SettingsSection>
+    </>
+  );
+}