@morphika/webframe 0.1.0

package/components/builder/ColorSwatchPicker.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+/**
+ * ColorSwatchPicker — Dropdown color picker used in block editors.
+ * Shows the user's palette swatches + common colors + custom picker.
+ *
+ * Used in: SettingsPanel (row/block bg, border), TextBlockEditor (text color),
+ * CoverBlockEditor (text color), and any future color field.
+ *
+ * The dropdown uses a portal + fixed positioning so it is never clipped
+ * by ancestor `overflow: auto/hidden` containers (e.g. SettingsPanel).
+ */
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import ColorPicker, { isValidHex } from "./ColorPicker";
+import type { ColorSwatch } from "../../lib/sanity/types";
+
+// Common neutral colors always available
+const COMMON_COLORS = [
+  "#ffffff", "#f5f5f5", "#e5e5e5", "#a3a3a3",
+  "#525252", "#262626", "#171717", "#000000",
+];
+
+interface ColorSwatchPickerProps {
+  /** Current color value (hex string or empty) */
+  value: string;
+  /** Callback when color changes */
+  onChange: (hex: string) => void;
+  /** Palette swatches from global styles */
+  swatches?: ColorSwatch[];
+  /** Optional label */
+  label?: string;
+  /** Allow clearing the color */
+  allowClear?: boolean;
+  /** Compact inline mode (no popover, just the swatch row) */
+  inline?: boolean;
+}
+
+export default function ColorSwatchPicker({
+  value,
+  onChange,
+  swatches = [],
+  label,
+  allowClear = true,
+  inline = false,
+}: ColorSwatchPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [customOpen, setCustomOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+  // Compute dropdown position from trigger button's bounding rect
+  useEffect(() => {
+    if (!open || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    // Position below the trigger, right-aligned
+    const panelWidth = 244; // min-w-[220px] + padding
+    let left = rect.right - panelWidth;
+    // Clamp to viewport left edge
+    if (left < 8) left = 8;
+    setDropdownPos({ top: rect.bottom + 4, left });
+  }, [open]);
+
+  // Close on outside click — check both container and portal
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      const inContainer = containerRef.current?.contains(target);
+      const inPortal = portalRef.current?.contains(target);
+      if (!inContainer && !inPortal) {
+        setOpen(false);
+        setCustomOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  // Close on scroll of any ancestor (reposition would be complex; just close)
+  useEffect(() => {
+    if (!open) return;
+    const handler = () => {
+      if (!containerRef.current) return;
+      // Recompute position on scroll instead of closing
+      const rect = containerRef.current.getBoundingClientRect();
+      const panelWidth = 244;
+      let left = rect.right - panelWidth;
+      if (left < 8) left = 8;
+      setDropdownPos({ top: rect.bottom + 4, left });
+    };
+    // Listen on capture phase to catch scrolls on any ancestor
+    window.addEventListener("scroll", handler, { capture: true, passive: true });
+    return () => window.removeEventListener("scroll", handler, { capture: true });
+  }, [open]);
+
+  const handleSelect = useCallback((hex: string) => {
+    onChange(hex);
+    if (!inline) {
+      setOpen(false);
+      setCustomOpen(false);
+    }
+  }, [onChange, inline]);
+
+  const handleClear = useCallback(() => {
+    onChange("");
+    setOpen(false);
+  }, [onChange]);
+
+  // ─── Trigger button (the colored swatch + hex label) ───
+  const trigger = (
+    <button
+      type="button"
+      onClick={() => setOpen(!open)}
+      className="flex items-center gap-2 px-1.5 py-1 rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 transition-colors cursor-pointer w-full"
+    >
+      <div
+        className="w-6 h-6 rounded-md border border-neutral-200 shrink-0"
+        style={{
+          background: value && isValidHex(value) ? value : "transparent",
+          backgroundImage: !value ? "linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%), linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%)" : undefined,
+          backgroundSize: !value ? "6px 6px" : undefined,
+          backgroundPosition: !value ? "0 0, 3px 3px" : undefined,
+        }}
+      />
+      <span className="text-[11px] text-neutral-500 font-mono truncate">
+        {value ? value.toUpperCase() : "None"}
+      </span>
+    </button>
+  );
+
+  // ─── Dropdown panel ───
+  const panel = (
+    <div className="bg-white rounded-xl border border-neutral-200 p-3 shadow-xl min-w-[220px]">
+
+      {/* User palette swatches */}
+      {swatches.length > 0 && (
+        <div className="mb-3">
+          <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-1.5">Palette</div>
+          <div className="flex flex-wrap gap-1.5">
+            {swatches.map((s, i) => (
+              <button
+                key={s._key || i}
+                onClick={() => handleSelect(s.hex)}
+                title={`${s.name}: ${s.hex}`}
+                className={`w-7 h-7 rounded-lg cursor-pointer transition-all ${
+                  value === s.hex
+                    ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
+                    : "border border-neutral-200 hover:border-neutral-400"
+                }`}
+                style={{ background: s.hex }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Common colors */}
+      <div className="mb-3">
+        <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-1.5">Common</div>
+        <div className="flex flex-wrap gap-1.5">
+          {COMMON_COLORS.map((c) => (
+            <button
+              key={c}
+              onClick={() => handleSelect(c)}
+              title={c}
+              className={`w-7 h-7 rounded-lg cursor-pointer transition-all ${
+                value === c
+                  ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
+                  : "border border-neutral-200 hover:border-neutral-400"
+              }`}
+              style={{ background: c }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Custom color toggle */}
+      {!customOpen ? (
+        <button
+          onClick={() => setCustomOpen(true)}
+          className="w-full py-1.5 rounded-lg border border-dashed border-neutral-300 text-neutral-400 text-[10px] uppercase tracking-widest cursor-pointer hover:border-neutral-400 hover:text-neutral-600 transition-colors"
+        >
+          Custom color
+        </button>
+      ) : (
+        <div className="mt-1">
+          <ColorPicker
+            color={value || "#ffffff"}
+            onChange={(hex) => handleSelect(hex)}
+            onClose={() => setCustomOpen(false)}
+            confirmLabel="Apply"
+          />
+        </div>
+      )}
+
+      {/* Clear button */}
+      {allowClear && value && (
+        <button
+          onClick={handleClear}
+          className="w-full mt-2 py-1.5 rounded-lg border border-neutral-200 text-neutral-400 text-[10px] uppercase tracking-widest cursor-pointer hover:border-red-300 hover:text-red-500 transition-colors"
+        >
+          Clear color
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <div ref={containerRef} className="relative">
+      {label && (
+        <label className="text-[10px] text-neutral-500 uppercase tracking-wider block mb-1">
+          {label}
+        </label>
+      )}
+      {trigger}
+      {open && typeof document !== "undefined" &&
+        createPortal(
+          <div
+            ref={portalRef}
+            className="fixed z-[9999]"
+            style={{ top: dropdownPos.top, left: dropdownPos.left }}
+          >
+            {panel}
+          </div>,
+          document.body
+        )
+      }
+    </div>
+  );
+}
+
+// ─── Hook: fetch palette swatches from admin styles API ───
+
+let cachedSwatches: ColorSwatch[] | null = null;
+let cachePromise: Promise<ColorSwatch[]> | null = null;
+
+export function usePaletteSwatches(): ColorSwatch[] {
+  const [swatches, setSwatches] = useState<ColorSwatch[]>(cachedSwatches || []);
+
+  useEffect(() => {
+    if (cachedSwatches) {
+      setSwatches(cachedSwatches);
+      return;
+    }
+
+    if (!cachePromise) {
+      cachePromise = fetch("/api/admin/styles")
+        .then((res) => (res.ok ? res.json() : { styles: { colors: { swatches: [] } } }))
+        .then((data) => {
+          const s = data?.styles?.colors?.swatches || [];
+          cachedSwatches = s;
+          return s;
+        })
+        .catch(() => {
+          /* Color palette unavailable — use empty swatches */
+          cachedSwatches = [];
+          return [];
+        });
+    }
+
+    cachePromise.then((s) => setSwatches(s));
+  }, []);
+
+  return swatches;
+}
+
+/** Invalidate the cached swatches (call after saving palette) */
+export function invalidatePaletteCache() {
+  cachedSwatches = null;
+  cachePromise = null;
+}

package/components/builder/ColumnDragContext.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import { useColumnDrag, type UseColumnDragReturn } from "./hooks/useColumnDrag";
+import ColumnDragOverlay from "./ColumnDragOverlay";
+
+// ============================================
+// Context
+// ============================================
+
+const ColumnDragContext = createContext<UseColumnDragReturn | null>(null);
+
+// ============================================
+// Provider
+// ============================================
+
+interface ColumnDragProviderProps {
+  children: ReactNode;
+}
+
+export function ColumnDragProvider({ children }: ColumnDragProviderProps) {
+  const columnDrag = useColumnDrag();
+
+  return (
+    <ColumnDragContext.Provider value={columnDrag}>
+      {children}
+      {columnDrag.isDragging &&
+        columnDrag.overlayPosition &&
+        columnDrag.draggedSectionKey &&
+        columnDrag.draggedColumnKey && (
+          <ColumnDragOverlay
+            sectionKey={columnDrag.draggedSectionKey}
+            columnKey={columnDrag.draggedColumnKey}
+            position={columnDrag.overlayPosition}
+          />
+        )}
+    </ColumnDragContext.Provider>
+  );
+}
+
+// ============================================
+// Consumer Hook
+// ============================================
+
+export function useColumnDragContext(): UseColumnDragReturn {
+  const context = useContext(ColumnDragContext);
+  if (!context) {
+    throw new Error("useColumnDragContext must be used within a ColumnDragProvider");
+  }
+  return context;
+}

package/components/builder/ColumnDragOverlay.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { memo } from "react";
+import { createPortal } from "react-dom";
+import { useBuilderStore } from "../../lib/builder/store";
+import type { PageSectionV2 } from "../../lib/sanity/types";
+import { isPageSectionV2 } from "../../lib/sanity/types";
+import { BUILDER_BLUE } from "../../lib/builder/constants";
+
+interface ColumnDragOverlayProps {
+  sectionKey: string;
+  columnKey: string;
+  position: { x: number; y: number };
+}
+
+const ColumnDragOverlay = memo(function ColumnDragOverlay({
+  sectionKey,
+  columnKey,
+  position,
+}: ColumnDragOverlayProps) {
+  const rows = useBuilderStore((s) => s.rows);
+  const item = rows.find((r) => r._key === sectionKey);
+  if (!item || !isPageSectionV2(item)) return null;
+
+  const v2Section = item as PageSectionV2;
+  const col = v2Section.columns?.find((c) => c._key === columnKey);
+  if (!col) return null;
+
+  const blockCount = (col.blocks || []).length;
+  const gridColumns = v2Section.settings.grid_columns || 12;
+
+  const overlay = (
+    <div
+      style={{
+        position: "fixed",
+        left: position.x,
+        top: position.y,
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none",
+        zIndex: 99999,
+      }}
+    >
+      <div
+        style={{
+          width: 180,
+          minHeight: 80,
+          background: "rgba(7, 107, 255, 0.08)",
+          backdropFilter: "blur(8px)",
+          opacity: 0.85,
+          borderRadius: 8,
+          border: `2px solid ${BUILDER_BLUE}`,
+          boxShadow: "0 8px 32px rgba(7, 107, 255, 0.3)",
+        }}
+      >
+        {/* Column header badge */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "8px 12px",
+            borderBottom: "1px solid rgba(7, 107, 255, 0.2)",
+          }}
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill={BUILDER_BLUE}>
+            <circle cx="3" cy="3" r="1" />
+            <circle cx="7" cy="3" r="1" />
+            <circle cx="3" cy="7" r="1" />
+            <circle cx="7" cy="7" r="1" />
+          </svg>
+          <span style={{ fontSize: 12, color: "white", fontWeight: 500 }}>
+            Column {col.span}/{gridColumns}
+          </span>
+        </div>
+        {/* Block count indicators */}
+        <div style={{ padding: "8px 12px" }}>
+          {blockCount > 0 ? (
+            <>
+              {Array.from({ length: Math.min(blockCount, 3) }).map((_, i) => (
+                <div
+                  key={i}
+                  style={{
+                    height: 12,
+                    borderRadius: 4,
+                    background: "rgba(255,255,255,0.1)",
+                    marginBottom: i < Math.min(blockCount, 3) - 1 ? 6 : 0,
+                    width: `${90 - i * 15}%`,
+                  }}
+                />
+              ))}
+              {blockCount > 3 && (
+                <span style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", marginTop: 4, display: "block" }}>
+                  +{blockCount - 3} more
+                </span>
+              )}
+            </>
+          ) : (
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "8px 0" }}>
+              <span style={{ fontSize: 10, color: "rgba(255,255,255,0.3)" }}>Empty column</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(overlay, document.body);
+});
+
+export default ColumnDragOverlay;

package/components/builder/CustomSectionInstanceCard.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+/**
+ * CustomSectionInstanceCard — Builder canvas card for custom section instances.
+ *
+ * Renders a live preview of the linked section content in the builder canvas.
+ * Edit/Detach actions are in the SettingsPanel (not here).
+ *
+ * Session 108: Created as part of Custom Sections Phase 2.
+ * Session 110: M1 fix — auto-sync stale cached titles.
+ * Session 130: Removed violet header bar — Edit/Detach moved to SettingsPanel.
+ *   Exposed sectionData via callback for SettingsPanel to use.
+ */
+
+import { useState, useEffect } from "react";
+import type { CustomSectionInstance, PageSectionV2 } from "../../lib/sanity/types";
+import { useBuilderStore } from "../../lib/builder/store";
+import SectionV2Canvas from "./SectionV2Canvas";
+
+interface CustomSectionInstanceCardProps {
+  instance: CustomSectionInstance;
+  onAddBlockTarget?: (sectionKey: string, colKey: string, insertIndex?: number) => void;
+  /** Callback to expose fetched section data to parent (for SettingsPanel actions) */
+  onSectionDataLoaded?: (data: PageSectionV2 | null) => void;
+}
+
+export default function CustomSectionInstanceCard({
+  instance,
+  onAddBlockTarget,
+  onSectionDataLoaded,
+}: CustomSectionInstanceCardProps) {
+  const cacheSettings = useBuilderStore((s) => s.cacheCustomSectionSettings);
+  const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch the section data for preview
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetch(`/api/custom-sections/${instance.custom_section_id}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Section not found");
+        return res.json();
+      })
+      .then((data) => {
+        if (!cancelled && data.section) {
+          setSectionData(data.section);
+          onSectionDataLoaded?.(data.section);
+          // Cache base settings so SortableRow can merge with per-instance overrides
+          if (data.section.settings) {
+            cacheSettings(instance.custom_section_id, data.section.settings);
+          }
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setError("Could not load section");
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instance.custom_section_id]);
+
+  return (
+    <div className="relative">
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <p className="text-xs text-neutral-400 animate-pulse">Loading section...</p>
+        </div>
+      ) : error ? (
+        <div className="flex items-center justify-center py-12">
+          <p className="text-xs text-red-400">{error}</p>
+        </div>
+      ) : sectionData ? (
+        <div className="pointer-events-none opacity-90">
+          <SectionV2Canvas
+            section={(() => {
+              let merged = instance.settings_overrides
+                ? { ...sectionData, settings: { ...sectionData.settings, ...instance.settings_overrides } }
+                : sectionData;
+              if (instance.responsive_overrides) {
+                merged = { ...merged, responsive: { ...merged.responsive, ...instance.responsive_overrides } };
+              }
+              return merged;
+            })()}
+            onAddBlockTarget={onAddBlockTarget || (() => {})}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/builder/DeviceFrame.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { DeviceViewport } from "../../lib/builder/types";
+import { DEVICE_WIDTHS } from "../../lib/builder/types";
+import { ADMIN_ACCENT } from "../../lib/builder/constants";
+
+// ============================================
+// DeviceFrame — Responsive preview frame
+// ============================================
+// Wraps content in a device-sized frame with header label.
+// Active frame is editable; inactive frames are read-only mirrors.
+
+const DEVICE_LABELS: Record<DeviceViewport, string> = {
+  desktop: "Desktop",
+  tablet: "Tablet",
+  phone: "Phone",
+};
+
+const DEVICE_ICONS: Record<DeviceViewport, ReactNode> = {
+  desktop: (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <rect x="1" y="1.5" width="10" height="7" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M4 10.5H8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+      <path d="M6 8.5V10.5" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  ),
+  tablet: (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <rect x="2" y="0.5" width="8" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+      <circle cx="6" cy="9.5" r="0.6" fill="currentColor" />
+    </svg>
+  ),
+  phone: (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <rect x="3" y="0.5" width="6" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M5 1.5H7" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" />
+      <circle cx="6" cy="9.5" r="0.5" fill="currentColor" />
+    </svg>
+  ),
+};
+
+interface DeviceFrameProps {
+  device: DeviceViewport;
+  isActive: boolean;
+  onActivate: () => void;
+  onDoubleClick?: () => void;
+  backgroundColor: string;
+  children: ReactNode;
+}
+
+export default function DeviceFrame({
+  device,
+  isActive,
+  onActivate,
+  onDoubleClick,
+  backgroundColor,
+  children,
+}: DeviceFrameProps) {
+  const width = DEVICE_WIDTHS[device];
+  const label = DEVICE_LABELS[device];
+
+  return (
+    <div
+      className="relative flex-shrink-0"
+      style={{ width }}
+    >
+      {/* Frame header — click to activate */}
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onActivate();
+        }}
+        onDoubleClick={(e) => {
+          e.stopPropagation();
+          onDoubleClick?.();
+        }}
+        className="flex items-center gap-2 w-full px-3 py-1.5 rounded-t-lg border border-b-0 text-left transition-colors"
+        style={{
+          backgroundColor: isActive ? "#ffffff" : "#fafafa",
+          borderColor: isActive ? ADMIN_ACCENT : "#d4d4d4",
+          cursor: isActive ? "default" : "pointer",
+        }}
+      >
+        <span
+          style={{ color: isActive ? ADMIN_ACCENT : "#a3a3a3" }}
+          className="transition-colors"
+        >
+          {DEVICE_ICONS[device]}
+        </span>
+        <span
+          className="text-[10px] font-medium transition-colors"
+          style={{ color: isActive ? ADMIN_ACCENT : "#737373" }}
+        >
+          {label}
+        </span>
+        <span className="text-[10px] text-neutral-400 ml-auto">
+          {width}px
+        </span>
+      </button>
+
+      {/* Frame content area — contain: layout style paint limits browser work to this subtree */}
+      <div
+        className="border rounded-b-lg transition-[border-color,box-shadow,opacity]"
+        style={{
+          width,
+          backgroundColor,
+          borderColor: isActive ? ADMIN_ACCENT : "#d4d4d4",
+          borderTopWidth: 0,
+          minHeight: 400,
+          boxShadow: isActive
+            ? "0 4px 24px rgba(7, 107, 255, 0.08), 0 1px 4px rgba(0,0,0,0.05)"
+            : "0 1px 4px rgba(0,0,0,0.04)",
+          opacity: isActive ? 1 : 0.75,
+          contain: "layout style",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}