@morphika/andami 0.5.1 → 0.5.3

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

@@ -0,0 +1,242 @@
+"use client";
+
+/**
+ * ColumnV2LayoutTab — Layout tab for a selected V2/cover/parallax-slide column.
+ *
+ * Desktop-only for now. Viewport-aware column layout would require extending
+ * ColumnOverride (currently position-only) — not yet implemented.
+ *
+ * Sections: Background (color/opacity/image), Border (color/width/style/sides/radius).
+ * Columns intentionally have no Spacing or Offset — use the parent section's
+ * row_gap/col_gap, or block-level padding.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionColumn } 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 { BackgroundIcon, BorderIcon } from "../editors/section-icons";
+
+type LayoutField =
+  | "background_color" | "background_opacity" | "background_image"
+  | "background_size" | "background_position" | "background_repeat"
+  | "border_color" | "border_width" | "border_style" | "border_sides" | "border_radius";
+
+export function ColumnV2LayoutTab({
+  section,
+  column,
+}: {
+  section: PageSectionV2;
+  column: SectionColumn;
+}) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const activeViewport = store.activeViewport;
+
+  const isResponsive = activeViewport !== "desktop";
+
+  const update = (field: LayoutField, value: unknown) => {
+    store._pushSnapshot();
+    store.updateColumnV2Layout(section._key, column._key, {
+      [field]: value,
+    } as Partial<SectionColumn>);
+  };
+
+  const getValue = <T,>(field: LayoutField, fallback: T): T => {
+    const val = (column as unknown as Record<string, unknown>)[field];
+    return (val !== undefined && val !== null ? val : fallback) as T;
+  };
+
+  const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    store.setColorPickerPreview({ sectionKey: section._key, field: "column_background_color", value: val });
+  };
+
+  const bgIsGradient = isGradient(parseColorField(getValue<string>("background_color", "")));
+
+  return (
+    <>
+      {isResponsive && (
+        <div className="px-4 pt-3">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-neutral-100 border border-neutral-200">
+            <span className="text-[11px] font-medium text-neutral-500">
+              Column layout is desktop-only for now
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getValue<string>("background_color", ""))}
+            onChange={(val) => {
+              store.clearColorPickerPreview();
+              update("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={getValue<number>("background_opacity", 100)}
+              onChange={(e) => update("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">
+              {getValue<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={getValue<string>("background_image", "")}
+            onFocus={() => store._pushSnapshot()}
+            onChange={(v) => update("background_image", v)}
+            placeholder="path/to/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        {getValue<string>("background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getValue<string>("background_size", "cover")}
+                onChange={(e) => update("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={getValue<string>("background_position", "center center")}
+                onChange={(e) => update("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={getValue<string>("background_repeat", "no-repeat")}
+                onChange={(e) => update("background_repeat", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="no-repeat">No Repeat</option>
+                <option value="repeat">Repeat</option>
+                <option value="repeat-x">Repeat X</option>
+                <option value="repeat-y">Repeat Y</option>
+              </select>
+            </SettingsField>
+          </>
+        )}
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border" icon={<BorderIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getValue<string>("border_color", ""))}
+            onChange={(val) => {
+              store.clearColorPickerPreview();
+              update("border_color", serializeColorField(val));
+            }}
+            swatches={paletteSwatches}
+            allowGradients
+          />
+        </SettingsField>
+
+        <SettingsField label="Width">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={20}
+              value={parseInt(getValue<string>("border_width", "0"))}
+              onChange={(e) => update("border_width", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getValue<string>("border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getValue<string>("border_style", "none")}
+            onChange={(e) => update("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={getValue<string>("border_sides", "all")}
+            onChange={(e) => update("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(getValue<string>("border_radius", "0"))}
+              onChange={(e) => update("border_radius", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getValue<string>("border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

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

@@ -85,8 +85,8 @@ export default function ColumnV2Settings({
     <>
       {isResponsive && (
         <div className="px-4 pt-3">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/15">
-            <span className="text-[11px] font-medium text-[#4794e2]">
+          <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 {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
             </span>
           </div>
@@ -98,7 +98,7 @@ export default function ColumnV2Settings({
           <span>
             Span
             {hasSpanOverride && (
-              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#3580f9]">overridden</span>
             )}
           </span>
         }>
@@ -109,7 +109,7 @@ export default function ColumnV2Settings({
               max={gridColumns}
               value={effectiveSpan}
               onChange={(e) => handleSpanChange(parseInt(e.target.value))}
-              className="flex-1 accent-[#4794e2]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right font-medium">
               {effectiveSpan}/{gridColumns}
@@ -133,7 +133,7 @@ export default function ColumnV2Settings({
                 <div
                   key={i}
                   className={`h-1.5 flex-1 rounded-full transition-colors ${
-                    isActive ? "bg-[#4794e2]" : "bg-neutral-200"
+                    isActive ? "bg-[#3580f9]" : "bg-neutral-200"
                   }`}
                 />
               );

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

@@ -1,71 +1,71 @@
-"use client";
-
-import { useBuilderStore } from "../../../lib/builder/store";
-import type { CoverSection } from "../../../lib/sanity/types";
-import {
-  SpacingIcon,
-  OffsetIcon,
-  BorderIcon,
-} from "../editors/section-icons";
-import { SettingsField, SettingsSection } from "../editors/shared";
-import { TRBLInputs } from "./TRBLInputs";
-
-interface CoverSectionLayoutTabProps {
-  section: CoverSection;
-}
-
-export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTabProps) {
-  const store = useBuilderStore();
-  const s = section.settings;
-
-  const update = (fields: Record<string, string | undefined>) => {
-    store.updateCoverSettings(section._key, fields as Partial<typeof s>);
-  };
-
-  return (
-    <>
-      {/* Spacing (padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
-        <TRBLInputs
-          top={s.spacing_top || ""}
-          right={s.spacing_right || ""}
-          bottom={s.spacing_bottom || ""}
-          left={s.spacing_left || ""}
-          onChange={(field, value) => update({ [`spacing_${field}`]: value || undefined })}
-        />
-      </SettingsSection>
-
-      {/* Offset (margin) */}
-      <SettingsSection title="Offset" defaultOpen={false} icon={<OffsetIcon />}>
-        <TRBLInputs
-          top={s.offset_top || ""}
-          right={s.offset_right || ""}
-          bottom={s.offset_bottom || ""}
-          left={s.offset_left || ""}
-          onChange={(field, value) => update({ [`offset_${field}`]: value || undefined })}
-        />
-      </SettingsSection>
-
-      {/* Border Radius */}
-      <SettingsSection title="Border" defaultOpen={false} icon={<BorderIcon />}>
-        <SettingsField label="Radius">
-          <div className="flex items-center gap-2">
-            <input
-              type="range"
-              min={0}
-              max={50}
-              step={1}
-              value={parseInt(s.border_radius || "0", 10) || 0}
-              onMouseDown={() => store._pushSnapshot()}
-              onChange={(e) => update({ border_radius: e.target.value === "0" ? undefined : e.target.value })}
-              className="flex-1 accent-[#076bff]"
-            />
-            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
-              {parseInt(s.border_radius || "0", 10) || 0}px
-            </span>
-          </div>
-        </SettingsField>
-      </SettingsSection>
-    </>
-  );
-}
+"use client";
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { CoverSection } from "../../../lib/sanity/types";
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BorderIcon,
+} from "../editors/section-icons";
+import { SettingsField, SettingsSection } from "../editors/shared";
+import { TRBLInputs } from "./TRBLInputs";
+
+interface CoverSectionLayoutTabProps {
+  section: CoverSection;
+}
+
+export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTabProps) {
+  const store = useBuilderStore();
+  const s = section.settings;
+
+  const update = (fields: Record<string, string | undefined>) => {
+    store.updateCoverSettings(section._key, fields as Partial<typeof s>);
+  };
+
+  return (
+    <>
+      {/* Spacing (padding) */}
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
+        <TRBLInputs
+          top={s.spacing_top || ""}
+          right={s.spacing_right || ""}
+          bottom={s.spacing_bottom || ""}
+          left={s.spacing_left || ""}
+          onChange={(field, value) => update({ [`spacing_${field}`]: value || undefined })}
+        />
+      </SettingsSection>
+
+      {/* Offset (margin) */}
+      <SettingsSection title="Offset" defaultOpen={false} icon={<OffsetIcon />}>
+        <TRBLInputs
+          top={s.offset_top || ""}
+          right={s.offset_right || ""}
+          bottom={s.offset_bottom || ""}
+          left={s.offset_left || ""}
+          onChange={(field, value) => update({ [`offset_${field}`]: value || undefined })}
+        />
+      </SettingsSection>
+
+      {/* Border Radius */}
+      <SettingsSection title="Border" defaultOpen={false} icon={<BorderIcon />}>
+        <SettingsField label="Radius">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={50}
+              step={1}
+              value={parseInt(s.border_radius || "0", 10) || 0}
+              onMouseDown={() => store._pushSnapshot()}
+              onChange={(e) => update({ border_radius: e.target.value === "0" ? undefined : e.target.value })}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {parseInt(s.border_radius || "0", 10) || 0}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}