@morphika/andami 0.1.2 → 0.1.5

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

@@ -1,312 +1,392 @@
-"use client";
-
-/**
- * SectionV2LayoutTab — Layout tab content for V2 grid sections.
- *
- * Extracted from SectionV2Settings.tsx in Session 95.
- * 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,
-  INPUT_CLASS,
-} from "../editors/shared";
-import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
-
-export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
-  const store = useBuilderStore();
-  const paletteSwatches = usePaletteSwatches();
-  const settings = section.settings;
-  const activeViewport = store.activeViewport;
-
-  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;
-  };
-
-  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>
-        <div className="space-y-2">
-          {(["top", "right", "bottom", "left"] as const).map((side) => {
-            const prop = `spacing_${side}`;
-            return (
-              <SettingsField key={side} label={
-                <span className="capitalize">
-                  {side}
-                  {hasOverride(prop) && (
-                    <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
-                  )}
-                </span>
-              }>
-                <div className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    value={getSettingValue<string>(prop, "0")}
-                    onChange={(e) => updateSettingResponsive(prop, e.target.value)}
-                    placeholder="0"
-                    className={INPUT_CLASS}
-                    style={{ width: 80 }}
-                  />
-                  <span className="text-[10px] text-neutral-400">px</span>
-                  {hasOverride(prop) && (
-                    <button
-                      onClick={() => updateSettingResponsive(prop, undefined)}
-                      className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors ml-auto"
-                    >
-                      Reset
-                    </button>
-                  )}
-                </div>
-              </SettingsField>
-            );
-          })}
-        </div>
-      </SettingsSection>
-
-      {/* Background (full controls) */}
-      <SettingsSection title="Background" defaultOpen>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={getSettingValue<string>("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={getSettingValue<number>("background_opacity", 100)}
-              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">
-              {getSettingValue<number>("background_opacity", 100)}%
-            </span>
-          </div>
-        </SettingsField>
-
-        <SettingsField label="Image">
-          <input
-            type="text"
-            value={getSettingValue<string>("background_image", "")}
-            onChange={(e) => updateSettingResponsive("background_image", e.target.value)}
-            placeholder="path/to/image.jpg"
-            className={INPUT_CLASS}
-          />
-        </SettingsField>
-
-        {getSettingValue<string>("background_image", "") && (
-          <>
-            <SettingsField label="Size">
-              <select
-                value={getSettingValue<string>("background_size", "cover")}
-                onChange={(e) => updateSettingResponsive("background_size", e.target.value)}
-                className={INPUT_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={INPUT_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={INPUT_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">
-        <div className="space-y-2">
-          {(["top", "right", "bottom", "left"] as const).map((side) => {
-            const prop = `offset_${side}`;
-            return (
-              <SettingsField key={side} label={
-                <span className="capitalize">
-                  {side}
-                  {hasOverride(prop) && (
-                    <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
-                  )}
-                </span>
-              }>
-                <div className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    value={getSettingValue<string>(prop, "0")}
-                    onChange={(e) => updateSettingResponsive(prop, e.target.value)}
-                    placeholder="0"
-                    className={INPUT_CLASS}
-                    style={{ width: 80 }}
-                  />
-                  <span className="text-[10px] text-neutral-400">px</span>
-                  {hasOverride(prop) && (
-                    <button
-                      onClick={() => updateSettingResponsive(prop, undefined)}
-                      className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors ml-auto"
-                    >
-                      Reset
-                    </button>
-                  )}
-                </div>
-              </SettingsField>
-            );
-          })}
-        </div>
-      </SettingsSection>
-
-      {/* Border */}
-      <SettingsSection title="Border">
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={getSettingValue<string>("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(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={INPUT_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={INPUT_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>
-      </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 (matching BlockLayoutTab) ──
+
+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 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 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 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>
+  );
+}
+
+// ── 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={<SpacingSectionIcon />}>
+        <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={<OffsetSectionIcon />}>
+        <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={<BackgroundSectionIcon />}>
+        <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={<BorderSectionIcon />}>
+        <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>
+    </>
+  );
+}