@morphika/andami 0.5.4 → 0.5.6

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

@@ -1,511 +1,514 @@
-"use client";
-
-/**
- * BlockLayoutTab — Per-block layout styling.
- *
- * Section order: Alignment → Spacing → Offset → Background → Border.
- * Each section has a small visual icon next to its title.
- *
- * Session 78: Added Alignment section with visual icon buttons.
- *             Reordered sections. Added section title icons.
- * Session 82: Made viewport-aware with responsive override support.
- *             Every property is now editable per viewport (desktop/tablet/phone).
- *             Uses getBlockLayoutValue/setBlockLayoutOverride from responsive-helpers.
- */
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { ContentBlock, BlockLayout } 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";
-import { BubbleTooltip } from "../BubbleIcons";
-import {
-  getBlockLayoutValue,
-  hasBlockLayoutOverride,
-  setBlockLayoutOverride,
-} from "./responsive-helpers";
-
-// ── Alignment visual icon buttons ──
-
-type AlignH = "left" | "center" | "right";
-type AlignV = "top" | "center" | "bottom";
-
-function HAlignIcon({ value, size = 18 }: { value: AlignH; size?: number }) {
-  // Horizontal lines aligned left/center/right inside a box
-  const w = size;
-  const h = size;
-  const pad = 3;
-  const barH = 2.5;
-  const gap = 1.5;
-  const maxW = w - pad * 2;
-
-  const bars = [
-    { w: maxW * 0.9, y: pad + 1 },
-    { w: maxW * 0.55, y: pad + 1 + barH + gap },
-    { w: maxW * 0.75, y: pad + 1 + (barH + gap) * 2 },
-  ];
-
-  return (
-    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
-      {bars.map((bar, i) => {
-        let x = pad;
-        if (value === "center") x = (w - bar.w) / 2;
-        else if (value === "right") x = w - pad - bar.w;
-        return (
-          <rect
-            key={i}
-            x={x}
-            y={bar.y}
-            width={bar.w}
-            height={barH}
-            rx={1}
-            fill="currentColor"
-          />
-        );
-      })}
-    </svg>
-  );
-}
-
-function VAlignIcon({ value, size = 18 }: { value: AlignV; size?: number }) {
-  const w = size;
-  const h = size;
-  const pad = 3;
-  const barW = w - pad * 2;
-  const barH = 3;
-
-  // Position of a single bar within the vertical space
-  let y = pad;
-  if (value === "center") y = (h - barH) / 2;
-  else if (value === "bottom") y = h - pad - barH;
-
-  return (
-    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
-      {/* Container outline */}
-      <rect
-        x={pad - 0.5}
-        y={pad - 0.5}
-        width={barW + 1}
-        height={h - pad * 2 + 1}
-        rx={1.5}
-        stroke="currentColor"
-        strokeWidth={0.8}
-        opacity={0.3}
-        fill="none"
-      />
-      {/* Bar at position */}
-      <rect
-        x={pad + 1}
-        y={y}
-        width={barW - 2}
-        height={barH}
-        rx={1}
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-function AlignmentButtons<T extends string>({
-  options,
-  value,
-  onChange,
-  renderIcon,
-}: {
-  options: { value: T; label: string }[];
-  value: T;
-  onChange: (v: T) => void;
-  renderIcon: (v: T) => React.ReactNode;
-}) {
-  return (
-    <div className="flex gap-1">
-      {options.map((opt) => {
-        const isActive = value === opt.value;
-        return (
-          <button
-            key={opt.value}
-            aria-label={opt.label}
-            onClick={() => onChange(opt.value)}
-            className={`group/bb relative flex items-center justify-center w-[34px] h-[30px] rounded-md border transition-all ${
-              isActive
-                ? "bg-[#3580f9]/10 border-[#3580f9]/30 text-[#3580f9]"
-                : "bg-[#f5f5f5] border-transparent text-neutral-400 hover:bg-[#efefef] hover:text-neutral-600"
-            }`}
-          >
-            {renderIcon(opt.value)}
-            <BubbleTooltip>{opt.label}</BubbleTooltip>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-// ── Section title icons (centralized colored icons — Session 163) ──
-import {
-  AlignmentIcon,
-  SpacingIcon,
-  OffsetIcon,
-  BackgroundIcon,
-  BorderIcon,
-} from "../editors/section-icons";
-
-// ── Override indicator badge ──
-
-function OverrideBadge({
-  block,
-  viewport,
-  properties,
-  onReset,
-}: {
-  block: ContentBlock;
-  viewport: string;
-  properties: (keyof BlockLayout)[];
-  onReset: () => void;
-}) {
-  if (viewport === "desktop") return null;
-  const hasAny = properties.some((p) => hasBlockLayoutOverride(block, viewport as "tablet" | "phone", p));
-  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>;
-}
-
-// ── Main component ──
-
-export function BlockLayoutTab({ block }: { block: ContentBlock }) {
-  const store = useBuilderStore();
-  const paletteSwatches = usePaletteSwatches();
-  const activeViewport = store.activeViewport;
-
-  // Live preview callbacks (Phase 4)
-  const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ blockKey: block._key, field: "background_color", value: val });
-  };
-  const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ blockKey: block._key, field: "border_color", value: val });
-  };
-
-  /** Update a block layout property, viewport-aware */
-  const updateLayout = (property: keyof BlockLayout, value: unknown) => {
-    const updates = setBlockLayoutOverride(block, activeViewport, property, value);
-    store.updateBlock(block._key, updates);
-  };
-
-  /** Reset all layout overrides for a group of properties */
-  const resetGroup = (properties: (keyof BlockLayout)[]) => {
-    store._pushSnapshot();
-    // Accumulate resets by setting each property to undefined
-    let accumulated = block;
-    for (const prop of properties) {
-      const u = setBlockLayoutOverride(accumulated, activeViewport, prop, undefined);
-      accumulated = { ...accumulated, ...u } as ContentBlock;
-    }
-    const responsive = (accumulated as unknown as Record<string, unknown>).responsive;
-    store.updateBlock(block._key, { responsive } as unknown as Partial<ContentBlock>);
-  };
-
-  // Effective values per viewport
-  const bgOpacity = getBlockLayoutValue<number>(block, activeViewport, "background_opacity", 100);
-  const bgIsGradient = isGradient(parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", "")));
-  const alignH: AlignH = getBlockLayoutValue<string>(block, activeViewport, "align_h", "left") as AlignH;
-  const alignV: AlignV = getBlockLayoutValue<string>(block, activeViewport, "align_v", "top") as AlignV;
-
-  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-[#3580f9]/8 border border-[#3580f9]/15">
-            <span className="text-[11px] font-medium text-[#3580f9]">
-              Editing {viewportLabel} overrides
-            </span>
-          </div>
-        </div>
-      )}
-
-      {/* Alignment */}
-      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentIcon />}>
-        <SettingsField label="Horizontal">
-          <AlignmentButtons<AlignH>
-            options={[
-              { value: "left", label: "Left" },
-              { value: "center", label: "Center" },
-              { value: "right", label: "Right" },
-            ]}
-            value={alignH}
-            onChange={(v) => {
-              store._pushSnapshot();
-              updateLayout("align_h", v);
-            }}
-            renderIcon={(v) => <HAlignIcon value={v} />}
-          />
-        </SettingsField>
-
-        <SettingsField label="Vertical">
-          <AlignmentButtons<AlignV>
-            options={[
-              { value: "top", label: "Top" },
-              { value: "center", label: "Center" },
-              { value: "bottom", label: "Bottom" },
-            ]}
-            value={alignV}
-            onChange={(v) => {
-              store._pushSnapshot();
-              updateLayout("align_v", v);
-            }}
-            renderIcon={(v) => <VAlignIcon value={v} />}
-          />
-        </SettingsField>
-
-        <OverrideBadge
-          block={block}
-          viewport={activeViewport}
-          properties={["align_h", "align_v"]}
-          onReset={() => resetGroup(["align_h", "align_v"])}
-        />
-      </SettingsSection>
-
-      {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
-        <TRBLInputs
-          top={getBlockLayoutValue<string>(block, activeViewport, "spacing_top", "0")}
-          right={getBlockLayoutValue<string>(block, activeViewport, "spacing_right", "0")}
-          bottom={getBlockLayoutValue<string>(block, activeViewport, "spacing_bottom", "0")}
-          left={getBlockLayoutValue<string>(block, activeViewport, "spacing_left", "0")}
-          onChange={(field, value) => {
-            updateLayout(`spacing_${field}` as keyof BlockLayout, value);
-          }}
-        />
-        <OverrideBadge
-          block={block}
-          viewport={activeViewport}
-          properties={["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"]}
-          onReset={() => resetGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
-        />
-      </SettingsSection>
-
-      {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetIcon />}>
-        <TRBLInputs
-          top={getBlockLayoutValue<string>(block, activeViewport, "offset_top", "0")}
-          right={getBlockLayoutValue<string>(block, activeViewport, "offset_right", "0")}
-          bottom={getBlockLayoutValue<string>(block, activeViewport, "offset_bottom", "0")}
-          left={getBlockLayoutValue<string>(block, activeViewport, "offset_left", "0")}
-          onChange={(field, value) => {
-            updateLayout(`offset_${field}` as keyof BlockLayout, value);
-          }}
-        />
-        <OverrideBadge
-          block={block}
-          viewport={activeViewport}
-          properties={["offset_top", "offset_right", "offset_bottom", "offset_left"]}
-          onReset={() => resetGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
-        />
-      </SettingsSection>
-
-      {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", ""))}
-            onChange={(val) => {
-              store._pushSnapshot();
-              store.clearColorPickerPreview();
-              updateLayout("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={bgOpacity}
-              onChange={(e) => updateLayout("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">
-              {bgOpacity}%
-            </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={getBlockLayoutValue<string>(block, activeViewport, "background_image", "")}
-            onFocus={() => store._pushSnapshot()}
-            onChange={(v) => updateLayout("background_image", v)}
-            placeholder="path/to/image.jpg"
-            filterType="image"
-          />
-        </SettingsField>
-
-        {getBlockLayoutValue<string>(block, activeViewport, "background_image", "") && (
-          <>
-            <SettingsField label="Size">
-              <select
-                value={getBlockLayoutValue<string>(block, activeViewport, "background_size", "cover")}
-                onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "background_position", "center center")}
-                onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "background_repeat", "no-repeat")}
-                onChange={(e) => updateLayout("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>
-          </>
-        )}
-
-        <OverrideBadge
-          block={block}
-          viewport={activeViewport}
-          properties={["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"])}
-        />
-      </SettingsSection>
-
-      {/* Border */}
-      <SettingsSection title="Border" icon={<BorderIcon />}>
-        <SettingsField label="Color">
-          <ColorSwatchPicker
-            value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "border_color", ""))}
-            onChange={(val) => {
-              store._pushSnapshot();
-              store.clearColorPickerPreview();
-              updateLayout("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(getBlockLayoutValue<string>(block, activeViewport, "border_width", "0"))}
-              onChange={(e) => updateLayout("border_width", e.target.value)}
-              className="flex-1 accent-[#3580f9]"
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right">
-              {getBlockLayoutValue<string>(block, activeViewport, "border_width", "0")}px
-            </span>
-          </div>
-        </SettingsField>
-
-        <SettingsField label="Style">
-          <select
-            value={getBlockLayoutValue<string>(block, activeViewport, "border_style", "none")}
-            onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "border_sides", "all")}
-            onChange={(e) => updateLayout("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(getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0"))}
-              onChange={(e) => updateLayout("border_radius", e.target.value)}
-              className="flex-1 accent-[#3580f9]"
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right">
-              {getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0")}px
-            </span>
-          </div>
-        </SettingsField>
-
-        <OverrideBadge
-          block={block}
-          viewport={activeViewport}
-          properties={["border_color", "border_width", "border_style", "border_sides", "border_radius"]}
-          onReset={() => resetGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
-        />
-      </SettingsSection>
-    </>
-  );
-}
+"use client";
+
+/**
+ * BlockLayoutTab — Per-block layout styling.
+ *
+ * Section order: Alignment → Spacing → Offset → Background → Border.
+ * Each section has a small visual icon next to its title.
+ *
+ * Session 78: Added Alignment section with visual icon buttons.
+ *             Reordered sections. Added section title icons.
+ * Session 82: Made viewport-aware with responsive override support.
+ *             Every property is now editable per viewport (desktop/tablet/phone).
+ *             Uses getBlockLayoutValue/setBlockLayoutOverride from responsive-helpers.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ContentBlock, BlockLayout } 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";
+import { BubbleTooltip } from "../BubbleIcons";
+import {
+  getBlockLayoutValue,
+  hasBlockLayoutOverride,
+  setBlockLayoutOverride,
+} from "./responsive-helpers";
+
+// ── Alignment visual icon buttons ──
+
+type AlignH = "left" | "center" | "right";
+type AlignV = "top" | "center" | "bottom";
+
+function HAlignIcon({ value, size = 18 }: { value: AlignH; size?: number }) {
+  // Horizontal lines aligned left/center/right inside a box
+  const w = size;
+  const h = size;
+  const pad = 3;
+  const barH = 2.5;
+  const gap = 1.5;
+  const maxW = w - pad * 2;
+
+  const bars = [
+    { w: maxW * 0.9, y: pad + 1 },
+    { w: maxW * 0.55, y: pad + 1 + barH + gap },
+    { w: maxW * 0.75, y: pad + 1 + (barH + gap) * 2 },
+  ];
+
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
+      {bars.map((bar, i) => {
+        let x = pad;
+        if (value === "center") x = (w - bar.w) / 2;
+        else if (value === "right") x = w - pad - bar.w;
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={bar.y}
+            width={bar.w}
+            height={barH}
+            rx={1}
+            fill="currentColor"
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+function VAlignIcon({ value, size = 18 }: { value: AlignV; size?: number }) {
+  const w = size;
+  const h = size;
+  const pad = 3;
+  const barW = w - pad * 2;
+  const barH = 3;
+
+  // Position of a single bar within the vertical space
+  let y = pad;
+  if (value === "center") y = (h - barH) / 2;
+  else if (value === "bottom") y = h - pad - barH;
+
+  return (
+    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
+      {/* Container outline */}
+      <rect
+        x={pad - 0.5}
+        y={pad - 0.5}
+        width={barW + 1}
+        height={h - pad * 2 + 1}
+        rx={1.5}
+        stroke="currentColor"
+        strokeWidth={0.8}
+        opacity={0.3}
+        fill="none"
+      />
+      {/* Bar at position */}
+      <rect
+        x={pad + 1}
+        y={y}
+        width={barW - 2}
+        height={barH}
+        rx={1}
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function AlignmentButtons<T extends string>({
+  options,
+  value,
+  onChange,
+  renderIcon,
+}: {
+  options: { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+  renderIcon: (v: T) => React.ReactNode;
+}) {
+  return (
+    <div className="flex gap-1">
+      {options.map((opt) => {
+        const isActive = value === opt.value;
+        return (
+          <button
+            key={opt.value}
+            aria-label={opt.label}
+            onClick={() => onChange(opt.value)}
+            className={`group/bb relative flex items-center justify-center w-[34px] h-[30px] rounded-md border transition-all ${
+              isActive
+                ? "bg-[#3580f9]/10 border-[#3580f9]/30 text-[#3580f9]"
+                : "bg-[#f5f5f5] border-transparent text-neutral-400 hover:bg-[#efefef] hover:text-neutral-600"
+            }`}
+          >
+            {renderIcon(opt.value)}
+            <BubbleTooltip>{opt.label}</BubbleTooltip>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  AlignmentIcon,
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
+
+// ── Override indicator badge ──
+
+function OverrideBadge({
+  block,
+  viewport,
+  properties,
+  onReset,
+}: {
+  block: ContentBlock;
+  viewport: string;
+  properties: (keyof BlockLayout)[];
+  onReset: () => void;
+}) {
+  if (viewport === "desktop") return null;
+  const hasAny = properties.some((p) => hasBlockLayoutOverride(block, viewport as "tablet" | "phone", p));
+  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>;
+}
+
+// ── Main component ──
+
+export function BlockLayoutTab({ block }: { block: ContentBlock }) {
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const setColorPickerPreview = useBuilderStore((s) => s.setColorPickerPreview);
+  const clearColorPickerPreview = useBuilderStore((s) => s.clearColorPickerPreview);
+  const paletteSwatches = usePaletteSwatches();
+
+  // Live preview callbacks (Phase 4)
+  const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    setColorPickerPreview({ blockKey: block._key, field: "background_color", value: val });
+  };
+  const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    setColorPickerPreview({ blockKey: block._key, field: "border_color", value: val });
+  };
+
+  /** Update a block layout property, viewport-aware */
+  const updateLayout = (property: keyof BlockLayout, value: unknown) => {
+    const updates = setBlockLayoutOverride(block, activeViewport, property, value);
+    updateBlock(block._key, updates);
+  };
+
+  /** Reset all layout overrides for a group of properties */
+  const resetGroup = (properties: (keyof BlockLayout)[]) => {
+    _pushSnapshot();
+    // Accumulate resets by setting each property to undefined
+    let accumulated = block;
+    for (const prop of properties) {
+      const u = setBlockLayoutOverride(accumulated, activeViewport, prop, undefined);
+      accumulated = { ...accumulated, ...u } as ContentBlock;
+    }
+    const responsive = (accumulated as unknown as Record<string, unknown>).responsive;
+    updateBlock(block._key, { responsive } as unknown as Partial<ContentBlock>);
+  };
+
+  // Effective values per viewport
+  const bgOpacity = getBlockLayoutValue<number>(block, activeViewport, "background_opacity", 100);
+  const bgIsGradient = isGradient(parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", "")));
+  const alignH: AlignH = getBlockLayoutValue<string>(block, activeViewport, "align_h", "left") as AlignH;
+  const alignV: AlignV = getBlockLayoutValue<string>(block, activeViewport, "align_v", "top") as AlignV;
+
+  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-[#3580f9]/8 border border-[#3580f9]/15">
+            <span className="text-[11px] font-medium text-[#3580f9]">
+              Editing {viewportLabel} overrides
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Alignment */}
+      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentIcon />}>
+        <SettingsField label="Horizontal">
+          <AlignmentButtons<AlignH>
+            options={[
+              { value: "left", label: "Left" },
+              { value: "center", label: "Center" },
+              { value: "right", label: "Right" },
+            ]}
+            value={alignH}
+            onChange={(v) => {
+              _pushSnapshot();
+              updateLayout("align_h", v);
+            }}
+            renderIcon={(v) => <HAlignIcon value={v} />}
+          />
+        </SettingsField>
+
+        <SettingsField label="Vertical">
+          <AlignmentButtons<AlignV>
+            options={[
+              { value: "top", label: "Top" },
+              { value: "center", label: "Center" },
+              { value: "bottom", label: "Bottom" },
+            ]}
+            value={alignV}
+            onChange={(v) => {
+              _pushSnapshot();
+              updateLayout("align_v", v);
+            }}
+            renderIcon={(v) => <VAlignIcon value={v} />}
+          />
+        </SettingsField>
+
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["align_h", "align_v"]}
+          onReset={() => resetGroup(["align_h", "align_v"])}
+        />
+      </SettingsSection>
+
+      {/* Spacing (Padding) */}
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
+        <TRBLInputs
+          top={getBlockLayoutValue<string>(block, activeViewport, "spacing_top", "0")}
+          right={getBlockLayoutValue<string>(block, activeViewport, "spacing_right", "0")}
+          bottom={getBlockLayoutValue<string>(block, activeViewport, "spacing_bottom", "0")}
+          left={getBlockLayoutValue<string>(block, activeViewport, "spacing_left", "0")}
+          onChange={(field, value) => {
+            updateLayout(`spacing_${field}` as keyof BlockLayout, value);
+          }}
+        />
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"]}
+          onReset={() => resetGroup(["spacing_top", "spacing_right", "spacing_bottom", "spacing_left"])}
+        />
+      </SettingsSection>
+
+      {/* Offset (Margin) */}
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
+        <TRBLInputs
+          top={getBlockLayoutValue<string>(block, activeViewport, "offset_top", "0")}
+          right={getBlockLayoutValue<string>(block, activeViewport, "offset_right", "0")}
+          bottom={getBlockLayoutValue<string>(block, activeViewport, "offset_bottom", "0")}
+          left={getBlockLayoutValue<string>(block, activeViewport, "offset_left", "0")}
+          onChange={(field, value) => {
+            updateLayout(`offset_${field}` as keyof BlockLayout, value);
+          }}
+        />
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["offset_top", "offset_right", "offset_bottom", "offset_left"]}
+          onReset={() => resetGroup(["offset_top", "offset_right", "offset_bottom", "offset_left"])}
+        />
+      </SettingsSection>
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", ""))}
+            onChange={(val) => {
+              _pushSnapshot();
+              clearColorPickerPreview();
+              updateLayout("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={bgOpacity}
+              onChange={(e) => updateLayout("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">
+              {bgOpacity}%
+            </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={getBlockLayoutValue<string>(block, activeViewport, "background_image", "")}
+            onFocus={() => _pushSnapshot()}
+            onChange={(v) => updateLayout("background_image", v)}
+            placeholder="path/to/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        {getBlockLayoutValue<string>(block, activeViewport, "background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getBlockLayoutValue<string>(block, activeViewport, "background_size", "cover")}
+                onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "background_position", "center center")}
+                onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "background_repeat", "no-repeat")}
+                onChange={(e) => updateLayout("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>
+          </>
+        )}
+
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["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"])}
+        />
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border" icon={<BorderIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "border_color", ""))}
+            onChange={(val) => {
+              _pushSnapshot();
+              clearColorPickerPreview();
+              updateLayout("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(getBlockLayoutValue<string>(block, activeViewport, "border_width", "0"))}
+              onChange={(e) => updateLayout("border_width", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getBlockLayoutValue<string>(block, activeViewport, "border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getBlockLayoutValue<string>(block, activeViewport, "border_style", "none")}
+            onChange={(e) => updateLayout("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={getBlockLayoutValue<string>(block, activeViewport, "border_sides", "all")}
+            onChange={(e) => updateLayout("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(getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0"))}
+              onChange={(e) => updateLayout("border_radius", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getBlockLayoutValue<string>(block, activeViewport, "border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <OverrideBadge
+          block={block}
+          viewport={activeViewport}
+          properties={["border_color", "border_width", "border_style", "border_sides", "border_radius"]}
+          onReset={() => resetGroup(["border_color", "border_width", "border_style", "border_sides", "border_radius"])}
+        />
+      </SettingsSection>
+    </>
+  );
+}