@morphika/andami 0.1.3 → 0.1.6

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

@@ -22,6 +22,7 @@ import {
   AssetPathInput,
 } from "../editors/shared";
 import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
 import { TRBLInputs } from "./TRBLInputs";
 import {
   getBlockLayoutValue,
@@ -236,6 +237,14 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
   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);
@@ -257,6 +266,7 @@ export function BlockLayoutTab({ block }: { block: 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;
 
@@ -360,12 +370,15 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
-            value={getBlockLayoutValue<string>(block, activeViewport, "background_color", "")}
-            onChange={(hex) => {
+            value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", ""))}
+            onChange={(val) => {
               store._pushSnapshot();
-              updateLayout("background_color", hex);
+              store.clearColorPickerPreview();
+              updateLayout("background_color", serializeColorField(val));
             }}
             swatches={paletteSwatches}
+            allowGradients
+            onPreview={handleBgPreview}
           />
         </SettingsField>
 
@@ -377,12 +390,18 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
               max={100}
               value={bgOpacity}
               onChange={(e) => updateLayout("background_opacity", parseInt(e.target.value))}
-              className="flex-1 accent-[#076bff]"
+              className={`flex-1 accent-[#076bff] ${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">
@@ -450,12 +469,15 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       <SettingsSection title="Border" icon={<BorderSectionIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
-            value={getBlockLayoutValue<string>(block, activeViewport, "border_color", "")}
-            onChange={(hex) => {
+            value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "border_color", ""))}
+            onChange={(val) => {
               store._pushSnapshot();
-              updateLayout("border_color", hex);
+              store.clearColorPickerPreview();
+              updateLayout("border_color", serializeColorField(val));
             }}
             swatches={paletteSwatches}
+            allowGradients
+            onPreview={handleBorderPreview}
           />
         </SettingsField>