@morphika/andami 0.1.3 → 0.1.6

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

@@ -4,8 +4,8 @@
  * SectionV2Settings — Settings panel for V2 grid sections.
  *
  * Three tabs managed by parent SettingsPanel:
- * - Settings: presets grid, col_gap, row_gap, appearance (background color/opacity/image)
- * - Layout: spacing TRBL, offset TRBL, border, background image settings (reuses LayoutTab patterns)
+ * - Settings: presets grid, col_gap, row_gap
+ * - Layout: spacing TRBL, background (color/opacity/image), offset TRBL, border
  * - Animation: scroll animation picker, hover animation picker, stagger settings
  *
  * Session 83: Phase 4 of V2 Grid System.
@@ -17,7 +17,7 @@ import {
   SettingsField,
   SettingsSection,
 } from "../editors/shared";
-import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { findGaps } from "../../../lib/builder/cascade";
 import {
   getSectionV2SettingValue,
   hasSectionV2SettingOverride,
@@ -50,18 +50,62 @@ const PRESETS: PresetOption[] = [
 
 const CUSTOM_PRESET: PresetOption = { id: "custom", label: "Custom", cols: [], readonly: true };
 
+// ============================================
+// Section title icons (small, inline)
+// ============================================
+
+function LayoutPresetIcon() {
+  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="1.5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.4" />
+      <line x1="6" y1="1.5" x2="6" y2="12.5" stroke="currentColor" strokeWidth="0.8" opacity="0.6" />
+      <rect x="1.5" y="1.5" width="4.5" height="11" rx="0" fill="currentColor" opacity="0.12" />
+    </svg>
+  );
+}
+
+function GridGapIcon() {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
+      <rect x="1" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
+      <rect x="8" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
+      <rect x="1" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
+      <rect x="8" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
+      <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="0.8" strokeDasharray="1.5 1" opacity="0.5" />
+      <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="0.8" strokeDasharray="1.5 1" opacity="0.5" />
+    </svg>
+  );
+}
+
 // ============================================
 // Preset Grid Component
 // ============================================
 
 function PresetGrid({ section }: { section: PageSectionV2 }) {
   const applyPresetV2 = useBuilderStore((s) => s.applyPresetV2);
+  const addColumnV2 = useBuilderStore((s) => s.addColumnV2);
   const currentPreset = section.settings.preset;
 
   const allPresets = currentPreset === "custom"
     ? [...PRESETS, CUSTOM_PRESET]
     : PRESETS;
 
+  const handleAddColumn = () => {
+    const gridCols = section.settings.grid_columns || 12;
+    const cascadeCols = section.columns.map((c) => ({
+      _key: c._key, grid_column: c.grid_column, grid_row: c.grid_row, span: c.span,
+    }));
+    const gapList = findGaps(cascadeCols, gridCols);
+    if (gapList.length > 0) {
+      // Fill first available gap
+      addColumnV2(section._key, gapList[0].grid_row, gapList[0].grid_column, gapList[0].span);
+    } else {
+      // No space — add a new full-width row below
+      const maxRow = cascadeCols.reduce((max, c) => Math.max(max, c.grid_row), 1);
+      addColumnV2(section._key, maxRow + 1, 1, gridCols);
+    }
+  };
+
   return (
     <div className="grid grid-cols-3 gap-1.5">
       {allPresets.map((preset) => {
@@ -109,6 +153,22 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
           </button>
         );
       })}
+
+      {/* + Add Column button */}
+      <button
+        onClick={handleAddColumn}
+        className="flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#076bff] hover:bg-[#076bff]/5 group"
+        title="Add a column (fills first gap, or adds new row below)"
+      >
+        <div className="flex items-center justify-center w-full h-4">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#076bff] transition-colors">
+            <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+        </div>
+        <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#076bff] transition-colors">
+          Add Col
+        </span>
+      </button>
     </div>
   );
 }
@@ -119,7 +179,6 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
 
 export default function SectionV2Settings({ section }: { section: PageSectionV2 }) {
   const store = useBuilderStore();
-  const paletteSwatches = usePaletteSwatches();
   const settings = section.settings;
   const activeViewport = store.activeViewport;
   const isResponsive = activeViewport !== "desktop";
@@ -207,7 +266,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
 
       {/* Presets — desktop only (changing structure from responsive would be confusing) */}
       {!isResponsive && (
-        <SettingsSection title="Layout Preset" defaultOpen>
+        <SettingsSection title="Layout Preset" defaultOpen icon={<LayoutPresetIcon />}>
           <PresetGrid section={section} />
           <p className="text-[10px] text-neutral-400 mt-1.5">
             {section.columns.length} column{section.columns.length !== 1 ? "s" : ""}
@@ -219,7 +278,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
       )}
 
       {/* Gaps */}
-      <SettingsSection title="Grid Gaps" defaultOpen>
+      <SettingsSection title="Grid Gaps" defaultOpen icon={<GridGapIcon />}>
         <SettingsField label={
           <span>
             Col Gap
@@ -285,35 +344,6 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
         </SettingsField>
       </SettingsSection>
 
-      {/* Appearance */}
-      <SettingsSection title="Appearance">
-        <SettingsField label="Background">
-          <ColorSwatchPicker
-            value={getSectionV2SettingValue(section, activeViewport, "background_color", "")}
-            onChange={(hex) => updateSettingResponsive("background_color", hex)}
-            swatches={paletteSwatches}
-          />
-        </SettingsField>
-
-        {getSectionV2SettingValue(section, activeViewport, "background_color", "") && (
-          <SettingsField label="Opacity">
-            <div className="flex items-center gap-2">
-              <input
-                type="range"
-                min={0}
-                max={100}
-                value={getSectionV2SettingValue(section, activeViewport, "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">
-                {getSectionV2SettingValue(section, activeViewport, "background_opacity", 100)}%
-              </span>
-            </div>
-          </SettingsField>
-        )}
-      </SettingsSection>
-
     </>
   );
 }

package/components/ui/Navbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import type { NavItem, NavDesign, NavEntrancePreset } from "../../lib/sanity/types";
+import type { NavItem, NavDesign, NavEntrancePreset, MobileNavDesign } from "../../lib/sanity/types";
 import { useNavColor } from "../../lib/contexts/NavColorContext";
 import { useNavAnimation } from "../../lib/contexts/NavAnimationContext";
 import { usePageExit } from "../../lib/contexts/PageExitContext";
@@ -115,6 +115,8 @@ function NavLink({
 interface NavbarProps {
   navItems?: NavItem[];
   design?: NavDesign;
+  /** Mobile menu design — independent styles for hamburger menu */
+  mobileDesign?: MobileNavDesign;
   /** @deprecated Use design.color instead */
   colorVariant?: string;
 }
@@ -126,6 +128,7 @@ interface NavbarProps {
 export default function Navbar({
   navItems = [],
   design,
+  mobileDesign,
   colorVariant = "yellow-lime",
 }: NavbarProps) {
   // Resolve color: context > design > prop
@@ -178,6 +181,45 @@ export default function Navbar({
   // Map vertical_align to CSS align-items value for the grid container
   const gridAlignItems = verticalAlign === "bottom" ? "end" : verticalAlign === "middle" ? "center" : "start";
 
+  // ── Mobile menu resolved values (Session 158) ──
+  // Mobile styles are independent from page-level NavColorContext overrides.
+  // They fall back to desktop design values when not explicitly set.
+  const mobilePaddingH = mobileDesign?.padding_h ?? paddingH;
+  const mobilePaddingV = mobileDesign?.padding_v ?? paddingV;
+  const mobileOverlayBg = mobileDesign?.overlay_bg || "";
+  const mobileFontSize = mobileDesign?.font_size ?? 24;
+  const mobileItemsGap = mobileDesign?.items_gap ?? 32;
+  const mobileItemsAlign = mobileDesign?.items_align || "center";
+  const mobileTextTransform = mobileDesign?.text_transform || textTransformVal;
+  // Mobile text color: explicit mobile setting > desktop design.color (NOT context)
+  const mobileTextColor = mobileDesign?.text_color || "";
+  // Hamburger/logo color: explicit mobile setting > desktop design.color (NOT context)
+  const mobileHamburgerColor = mobileDesign?.hamburger_color || "";
+  // Mobile navbar bar background
+  const mobileNavbarBg = mobileDesign?.navbar_bg || "";
+  const mobileNavbarBgOpacity = mobileDesign?.navbar_bg_opacity ?? 0;
+
+  // Resolve mobile bar background style
+  const mobileNavBgStyle: React.CSSProperties = {};
+  if (mobileNavbarBg && mobileNavbarBgOpacity > 0) {
+    const hex = mobileNavbarBg.replace("#", "");
+    if (hex.length >= 6) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      mobileNavBgStyle.backgroundColor = `rgba(${r}, ${g}, ${b}, ${mobileNavbarBgOpacity / 100})`;
+    }
+  }
+
+  // Resolve mobile hamburger/logo color — does NOT use contextColor (page overrides).
+  // Falls back to desktop design.color (the non-context-overridden value).
+  const desktopDesignColor = design?.color || colorVariant;
+  const desktopDesignIsHex = desktopDesignColor.startsWith("#");
+  const mobileBarColor = mobileHamburgerColor || (desktopDesignIsHex ? desktopDesignColor : "");
+  const mobileBarIsHex = mobileBarColor.startsWith("#");
+  const mobileBarColorClass = mobileBarIsHex ? "" : (colorMap[desktopDesignColor] || colorMap["yellow-lime"]);
+  const mobileBarColorStyle: React.CSSProperties | undefined = mobileBarIsHex ? { color: mobileBarColor } : undefined;
+
   const [isVisible, setIsVisible] = useState(true);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [lightboxItem, setLightboxItem] = useState<NavItem | null>(null);
@@ -312,7 +354,8 @@ export default function Navbar({
   const shouldHide = position !== "static" && hideOnScroll && !isVisible;
 
   // Grid layout: detect new format (items with type field) vs legacy (logo in design)
-  const visibleItems = navItems.filter((item) => item.visible !== false);
+  const safeNavItems = navItems ?? [];
+  const visibleItems = safeNavItems.filter((item) => item.visible !== false);
   const hasNewFormat = visibleItems.some((i) => i.type === "logo" || i.type === "menu-item");
 
   // New format: logo is a nav item; legacy: logo from design
@@ -335,7 +378,7 @@ export default function Navbar({
     fontSize: `${fontSize}px`,
     fontWeight: fontWeight as React.CSSProperties["fontWeight"],
     textTransform: textTransformVal as React.CSSProperties["textTransform"],
-    fontFamily: fontFamily || "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace)",
+    fontFamily: fontFamily || "var(--font-sans, Inter, system-ui, sans-serif)",
     ...(isHexColor ? { color: "inherit" } : {}),
   };
 
@@ -493,23 +536,30 @@ export default function Navbar({
           )}
         </div>
 
-        {/* Mobile: simple flex layout with hamburger */}
+        {/* Mobile: simple flex layout with hamburger — uses independent mobile styles */}
+        {/* BG color and icon color only apply when menu is open (overlay visible). */}
+        {/* When closed, the bar inherits desktop navbar colors for visual continuity. */}
         <div
-          className="flex lg:hidden items-center justify-between"
+          className={`flex lg:hidden items-center justify-between ${isMenuOpen ? mobileBarColorClass : ""} transition-colors duration-300`}
           style={{
             maxWidth: "var(--grid-width, 1445px)",
             marginLeft: "auto",
             marginRight: "auto",
-            paddingLeft: `${paddingH}px`,
-            paddingRight: `${paddingH}px`,
-            paddingTop: `${paddingV}px`,
-            paddingBottom: `${paddingV}px`,
+            paddingLeft: `${mobilePaddingH}px`,
+            paddingRight: `${mobilePaddingH}px`,
+            paddingTop: `${mobilePaddingV}px`,
+            paddingBottom: `${mobilePaddingV}px`,
+            ...(isMenuOpen ? mobileNavBgStyle : {}),
+            ...(isMenuOpen ? mobileBarColorStyle : {}),
           }}
         >
           <Link
             href="/"
-            className={linkClassName}
-            style={linkStyle}
+            className={`tracking-normal ${isMenuOpen && mobileBarColorClass ? mobileBarColorClass : ""} transition-colors duration-300 hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`}
+            style={{
+              ...linkStyle,
+              ...(isMenuOpen && mobileBarIsHex ? { color: "inherit" } : {}),
+            }}
           >
             {logoLabel}
           </Link>
@@ -517,10 +567,11 @@ export default function Navbar({
           <button
             ref={hamburgerButtonRef}
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className={`flex flex-col justify-center items-center gap-[5px] w-8 h-8 ${textColorClass} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`}
+            className={`flex flex-col justify-center items-center gap-[5px] w-8 h-8 ${isMenuOpen ? mobileBarColorClass : ""} transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`}
             aria-label={isMenuOpen ? "Close menu" : "Open menu"}
             aria-expanded={isMenuOpen}
             aria-controls="mobile-nav-menu"
+            style={isMenuOpen && mobileBarIsHex ? { color: mobileBarColor } : undefined}
           >
             <span
               className={`block w-5 h-[1.5px] bg-current transition-all duration-300 ${
@@ -541,30 +592,51 @@ export default function Navbar({
         </div>
       </nav>
 
-      {/* Mobile overlay menu */}
+      {/* Mobile overlay menu — uses independent mobile styles (Session 158) */}
       <div
         ref={mobileMenuRef}
         id="mobile-nav-menu"
         role="dialog"
         aria-modal={isMenuOpen}
         aria-label="Mobile navigation menu"
-        className={`fixed inset-0 z-40 bg-brand-dark transition-opacity duration-300 lg:hidden ${
+        className={`fixed inset-0 z-40 transition-opacity duration-300 lg:hidden ${
           isMenuOpen
             ? "opacity-100 pointer-events-auto"
             : "opacity-0 pointer-events-none"
         }`}
+        style={{
+          backgroundColor: mobileOverlayBg || "var(--color-brand-dark, #0a0a0a)",
+        }}
       >
-        <div className="flex flex-col items-center justify-center h-full gap-8">
-          {[...menuItems].sort((a, b) => (a.grid_column || 0) - (b.grid_column || 0)).map((item) => (
-            <NavLink
-              key={item._key}
-              item={item}
-              className={`font-mono text-2xl tracking-wide ${textColorClass} transition-colors duration-200 hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`}
-              style={{ textTransform: textTransformVal as React.CSSProperties["textTransform"], ...(fontFamily ? { fontFamily } : {}), ...(isHexColor ? { color: "inherit" } : {}) }}
-              currentPath={pathname}
-              onContentClick={(clickedItem) => { setLightboxItem(clickedItem); setIsMenuOpen(false); }}
-            />
-          ))}
+        <div
+          className="flex flex-col justify-center h-full"
+          style={{
+            alignItems: mobileItemsAlign === "right" ? "flex-end" : mobileItemsAlign === "left" ? "flex-start" : "center",
+            gap: `${mobileItemsGap}px`,
+            paddingLeft: `${mobilePaddingH}px`,
+            paddingRight: `${mobilePaddingH}px`,
+          }}
+        >
+          {[...menuItems].sort((a, b) => (a.grid_column || 0) - (b.grid_column || 0)).map((item) => {
+            // Mobile text color: explicit mobile setting > desktop design.color (NOT context)
+            const mobileItemIsHex = mobileTextColor.startsWith("#");
+            const mobileItemColorClass = mobileItemIsHex ? "" : (colorMap[design?.color || colorVariant] || colorMap["yellow-lime"]);
+            return (
+              <NavLink
+                key={item._key}
+                item={item}
+                className={`font-sans tracking-wide ${mobileItemColorClass} transition-colors duration-200 hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current`}
+                style={{
+                  fontSize: `${mobileFontSize}px`,
+                  textTransform: mobileTextTransform as React.CSSProperties["textTransform"],
+                  ...(fontFamily ? { fontFamily } : {}),
+                  ...(mobileItemIsHex ? { color: mobileTextColor } : {}),
+                }}
+                currentPath={pathname}
+                onContentClick={(clickedItem) => { setLightboxItem(clickedItem); setIsMenuOpen(false); }}
+              />
+            );
+          })}
         </div>
       </div>
 

package/components/ui/PortfolioTracker.tsx

@@ -19,9 +19,9 @@ import { usePathname } from "next/navigation";
 import { getSiteConfig } from "../../lib/config";
 
 const cfg = getSiteConfig();
-const KNOCK_API_URL = cfg.tracking.knockApiUrl;
-const REF_KEY = `${cfg.tracking.sessionPrefix}_ref`;
-const CHANNEL_KEY = `${cfg.tracking.sessionPrefix}_channel`;
+const KNOCK_API_URL = cfg.tracking?.knockApiUrl ?? "";
+const REF_KEY = `${cfg.tracking?.sessionPrefix ?? "site"}_ref`;
+const CHANNEL_KEY = `${cfg.tracking?.sessionPrefix ?? "site"}_channel`;
 
 function sendVisit(
   page: string,

package/lib/assets.ts

@@ -21,7 +21,7 @@
  * // Or proxy:   "/api/assets/projects/house-of-delights/cover.jpg"
  */
 
-import { logger } from "../lib/logger";
+import { logger } from "./logger";
 
 /**
  * Resolve a relative asset path to a full URL (public site).

package/lib/auth.ts

@@ -1,5 +1,5 @@
 import { cookies } from "next/headers";
-import { validateAdminToken } from "../lib/auth-token";
+import { validateAdminToken } from "./auth-token";
 
 /**
  * Verify that the current request is authenticated as admin.

package/lib/builder/gradient-presets.ts

@@ -0,0 +1,128 @@
+/**
+ * Gradient Presets
+ *
+ * Predefined gradient templates for quick selection in the color picker.
+ * Pattern follows hover-effect-presets.ts.
+ *
+ * Phase 4 — Color Picker v2.
+ */
+
+import type { GradientValue, LinearGradient, RadialGradient, MeshGradient } from "../sanity/types";
+
+export type GradientPresetCategory = "linear" | "radial" | "mesh";
+
+export interface GradientPresetInfo {
+  id: string;
+  label: string;
+  category: GradientPresetCategory;
+  template: GradientValue;
+}
+
+export const GRADIENT_PRESETS: GradientPresetInfo[] = [
+  // ── Linear presets ──
+  {
+    id: "sunset",
+    label: "Sunset",
+    category: "linear",
+    template: {
+      type: "linear",
+      stops: [
+        { color: "#ff6b35", alpha: 1, position: 0 },
+        { color: "#d63384", alpha: 1, position: 100 },
+      ],
+      angle: 135,
+    },
+  },
+  {
+    id: "ocean",
+    label: "Ocean",
+    category: "linear",
+    template: {
+      type: "linear",
+      stops: [
+        { color: "#0c2d48", alpha: 1, position: 0 },
+        { color: "#2e8bc0", alpha: 1, position: 100 },
+      ],
+      angle: 135,
+    },
+  },
+  {
+    id: "midnight",
+    label: "Midnight",
+    category: "linear",
+    template: {
+      type: "linear",
+      stops: [
+        { color: "#0a0a0a", alpha: 1, position: 0 },
+        { color: "#3d1c56", alpha: 1, position: 100 },
+      ],
+      angle: 135,
+    },
+  },
+  {
+    id: "fire",
+    label: "Fire",
+    category: "linear",
+    template: {
+      type: "linear",
+      stops: [
+        { color: "#c62828", alpha: 1, position: 0 },
+        { color: "#f9a825", alpha: 1, position: 100 },
+      ],
+      angle: 135,
+    },
+  },
+  // ── Mesh presets ──
+  {
+    id: "nebula",
+    label: "Nebula",
+    category: "mesh",
+    template: {
+      type: "mesh",
+      points: [
+        { color: "#6a0dad", x: 20, y: 25 },
+        { color: "#3a0ca3", x: 75, y: 35 },
+        { color: "#4cc9f0", x: 50, y: 80 },
+      ],
+      background: "#0b0b1a",
+    },
+  },
+  {
+    id: "pastel",
+    label: "Pastel",
+    category: "mesh",
+    template: {
+      type: "mesh",
+      points: [
+        { color: "#f8c8dc", x: 25, y: 30 },
+        { color: "#fef3e2", x: 70, y: 25 },
+        { color: "#dcd6f7", x: 50, y: 75 },
+      ],
+      background: "#faf5ff",
+    },
+  },
+  {
+    id: "aurora",
+    label: "Aurora",
+    category: "mesh",
+    template: {
+      type: "mesh",
+      points: [
+        { color: "#00b894", x: 15, y: 40 },
+        { color: "#6c5ce7", x: 80, y: 30 },
+        { color: "#0984e3", x: 50, y: 80 },
+      ],
+      background: "#0a0a2a",
+    },
+  },
+];
+
+/** Filter presets by category */
+export function getPresetsForCategory(category: GradientPresetCategory): GradientPresetInfo[] {
+  return GRADIENT_PRESETS.filter((p) => p.category === category);
+}
+
+/** Quick lookup by ID */
+export const GRADIENT_PRESET_MAP: Record<string, GradientPresetInfo> = Object.fromEntries(
+  GRADIENT_PRESETS.map((p) => [p.id, p])
+) as Record<string, GradientPresetInfo>;

package/lib/builder/layout-styles.ts

@@ -11,7 +11,8 @@
  */
 
 import type { BlockLayout } from "../../lib/sanity/types";
-import { hexToRgba } from "../../lib/color-utils";
+import { hexToRgba, colorToCSSProperty, borderColorToCSS, parseColorField } from "../../lib/color-utils";
+import type { ColorField } from "../../lib/sanity/types";
 
 /** Row-level settings shape (section settings, V2 settings, etc.) */
 type RowSettings = LayoutProps & { padding?: string };
@@ -110,14 +111,12 @@ export function getBackgroundStyles(
 ): React.CSSProperties {
   const styles: React.CSSProperties = {};
 
-  // Background color + opacity
+  // Background color + opacity (supports solid hex and gradients via ColorField)
   if (s.background_color && s.background_color !== "transparent") {
     const opacity = s.background_opacity ?? 100;
-    if (opacity < 100) {
-      styles.backgroundColor = hexToRgba(s.background_color, opacity / 100);
-    } else {
-      styles.backgroundColor = s.background_color;
-    }
+    const colorField = parseColorField(s.background_color);
+    const colorProps = colorToCSSProperty(colorField, opacity);
+    Object.assign(styles, colorProps);
   }
 
   // Background image
@@ -166,9 +165,11 @@ export function getBorderStyles(s: LayoutProps): React.CSSProperties {
   const bs = s.border_style || "none";
 
   if (bw > 0 && bs !== "none") {
-    const bc = s.border_color || "#000000";
+    const bc: ColorField = parseColorField(s.border_color || "#000000");
     const sides = s.border_sides || "all";
-    const borderValue = `${bw}px ${bs} ${bc}`;
+    // Use bridge function for gradient-safe border rendering
+    const borderProps = borderColorToCSS(bc, bw, bs);
+    const borderValue = borderProps.border;
 
     switch (sides) {
       case "top":
@@ -195,6 +196,11 @@ export function getBorderStyles(s: LayoutProps): React.CSSProperties {
         styles.border = borderValue;
         break;
     }
+    // For gradient borders, apply borderImage regardless of sides
+    // (CSS border-image applies to all existing borders)
+    if (borderProps.borderImage) {
+      styles.borderImage = borderProps.borderImage;
+    }
   }
 
   const br = parseInt(s.border_radius || "0");
@@ -340,5 +346,5 @@ export function resolveEffectiveSpacing(s: RowSettings): {
 
 // ---- Helpers ----
 
-// Re-export hexToRgba for backward compatibility (imported at top from @/lib/color-utils)
+// Re-export hexToRgba for backward compatibility (imported at top from ../color-utils)
 export { hexToRgba };

package/lib/builder/serializer.ts

@@ -502,6 +502,7 @@ export function documentToState(doc: Page): Omit<BuilderState, "isDirty" | "isSa
       gutter_phone: "16",
     },
     selectedProjectCardKey: null,
+    colorPickerPreview: null,
   };
 }