@morphika/andami 0.1.2

package/components/admin/styles/FontsEditor.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { FontFamily, FontVariant } from "../../../lib/sanity/types";
+import { Section, SaveButton } from "./shared";
+
+export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; onSave: (fonts: FontFamily[]) => void; saving: boolean }) {
+  const [localFonts, setLocalFonts] = useState<FontFamily[]>(fonts);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploadTarget, setUploadTarget] = useState<string | null>(null);
+  const [expandedFont, setExpandedFont] = useState<string | null>(null);
+
+  useEffect(() => { setLocalFonts(fonts); }, [fonts]);
+
+  const addFont = () => {
+    const key = crypto.randomUUID().slice(0, 8);
+    setLocalFonts([
+      ...localFonts,
+      {
+        _key: key,
+        family: "",
+        is_builtin: false,
+        variants: [],
+      },
+    ]);
+    setExpandedFont(key);
+  };
+
+  const updateFont = (key: string, updates: Partial<FontFamily>) => {
+    setLocalFonts(localFonts.map((f) => (f._key === key ? { ...f, ...updates } : f)));
+  };
+
+  const removeFont = (key: string) => {
+    setLocalFonts(localFonts.filter((f) => f._key !== key));
+    if (expandedFont === key) setExpandedFont(null);
+  };
+
+  const handleFileUpload = async (fontKey: string, file: File) => {
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("font", file);
+
+      const res = await fetch("/api/admin/styles/fonts", {
+        method: "POST",
+        headers: csrfHeaders(),
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData.error || "Upload failed");
+      }
+
+      const result = await res.json();
+      const newVariant: FontVariant = {
+        _key: crypto.randomUUID().slice(0, 8),
+        weight: "400",
+        style: "normal",
+        file_url: result.file_url,
+        file_id: result.file_id,
+        original_filename: result.original_filename,
+      };
+
+      setLocalFonts(
+        localFonts.map((f) =>
+          f._key === fontKey
+            ? { ...f, variants: [...f.variants, newVariant] }
+            : f
+        )
+      );
+    } catch (err) {
+      alert(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const removeVariant = (fontKey: string, variantKey: string) => {
+    setLocalFonts(
+      localFonts.map((f) =>
+        f._key === fontKey
+          ? { ...f, variants: f.variants.filter((v) => v._key !== variantKey) }
+          : f
+      )
+    );
+  };
+
+  const updateVariant = (fontKey: string, variantKey: string, updates: Partial<FontVariant>) => {
+    setLocalFonts(
+      localFonts.map((f) =>
+        f._key === fontKey
+          ? {
+              ...f,
+              variants: f.variants.map((v) =>
+                v._key === variantKey ? { ...v, ...updates } : v
+              ),
+            }
+          : f
+      )
+    );
+  };
+
+  return (
+    <Section title="Fonts" description="Upload custom fonts (.woff2 recommended) or manage built-in fonts. These will be available in the typography settings below.">
+      {/* ─── Font cards grid ─── */}
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3 mb-4">
+        {localFonts.map((font) => {
+          const isExpanded = expandedFont === font._key;
+          const weights = font.variants.map((v) => v.weight).sort();
+          return (
+            <div
+              key={font._key}
+              className={`rounded-xl border overflow-hidden transition-all cursor-pointer ${
+                isExpanded
+                  ? "border-[#076bff] shadow-sm ring-1 ring-[#076bff]/20"
+                  : "border-neutral-200 hover:shadow-md hover:-translate-y-0.5"
+              }`}
+              onClick={() => setExpandedFont(isExpanded ? null : font._key)}
+            >
+              {/* Preview area */}
+              <div className="px-5 pt-5 pb-3 bg-white">
+                <div className="flex items-start justify-between mb-2">
+                  <span className="text-4xl font-medium text-neutral-800 leading-none select-none">Aa</span>
+                  {font.is_builtin && (
+                    <span className="text-[9px] bg-neutral-100 text-neutral-500 px-1.5 py-0.5 rounded-full uppercase tracking-wider mt-1">
+                      Built-in
+                    </span>
+                  )}
+                </div>
+                <div className="text-[10px] text-neutral-400 uppercase tracking-widest mt-1">Typeface</div>
+                <div className="text-xs font-semibold text-neutral-700 truncate">
+                  {font.family || "Untitled Font"}
+                </div>
+                {weights.length > 0 && (
+                  <div className="text-[10px] text-neutral-400 mt-0.5">
+                    Weights: {weights.join(" \u00B7 ")}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+
+        {/* Add font card */}
+        <button
+          onClick={addFont}
+          className="rounded-xl border-2 border-dashed border-neutral-200 min-h-[120px] flex flex-col items-center justify-center gap-1.5 cursor-pointer hover:border-[#076bff] hover:text-[#076bff] text-neutral-400 transition-colors bg-transparent"
+        >
+          <span className="text-xl leading-none">+</span>
+          <span className="text-[10px] uppercase tracking-wider">Add Font Family</span>
+        </button>
+      </div>
+
+      {/* ─── Expanded font editor ─── */}
+      {expandedFont && (() => {
+        const font = localFonts.find((f) => f._key === expandedFont);
+        if (!font) return null;
+        return (
+          <div className="border border-neutral-200 rounded-xl p-5 mb-4 bg-neutral-50/50">
+            <div className="flex items-center gap-3 mb-4">
+              <input
+                type="text"
+                value={font.family}
+                onChange={(e) => updateFont(font._key, { family: e.target.value })}
+                placeholder="Font Family Name (e.g. Inter)"
+                className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                disabled={font.is_builtin}
+                onClick={(e) => e.stopPropagation()}
+              />
+              {!font.is_builtin && (
+                <button
+                  onClick={() => removeFont(font._key)}
+                  className="text-xs text-red-500 hover:text-red-700 transition-colors"
+                >
+                  Remove Font
+                </button>
+              )}
+            </div>
+
+            {/* Variants */}
+            <div className="space-y-2">
+              {font.variants.length > 0 && (
+                <div className="text-[10px] text-neutral-400 uppercase tracking-widest mb-1">Variants</div>
+              )}
+              {font.variants.map((v) => (
+                <div key={v._key} className="flex items-center gap-2 text-xs bg-white rounded-lg px-3 py-2 border border-neutral-100">
+                  <select
+                    value={v.weight}
+                    onChange={(e) => updateVariant(font._key, v._key, { weight: e.target.value })}
+                    className="rounded border border-neutral-200 bg-white px-2 py-1 text-xs focus:border-[#076bff] focus:outline-none"
+                  >
+                    {["100", "300", "400", "500", "600", "700", "800", "900"].map((w) => (
+                      <option key={w} value={w}>{w}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={v.style}
+                    onChange={(e) => updateVariant(font._key, v._key, { style: e.target.value as "normal" | "italic" })}
+                    className="rounded border border-neutral-200 bg-white px-2 py-1 text-xs focus:border-[#076bff] focus:outline-none"
+                  >
+                    <option value="normal">Normal</option>
+                    <option value="italic">Italic</option>
+                  </select>
+                  <span className="text-neutral-400 truncate flex-1" title={v.original_filename}>
+                    {v.original_filename}
+                  </span>
+                  {!font.is_builtin && (
+                    <button
+                      onClick={() => removeVariant(font._key, v._key)}
+                      className="text-red-400 hover:text-red-600 text-sm"
+                    >
+                      ×
+                    </button>
+                  )}
+                </div>
+              ))}
+
+              {!font.is_builtin && (
+                <button
+                  onClick={() => {
+                    setUploadTarget(font._key);
+                    fileInputRef.current?.click();
+                  }}
+                  disabled={uploading}
+                  className="text-xs text-[#076bff] hover:text-[#0559d4] transition-colors mt-1"
+                >
+                  {uploading && uploadTarget === font._key ? "Uploading..." : "+ Add variant file"}
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })()}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".woff2,.woff,.ttf,.otf"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file && uploadTarget) {
+            handleFileUpload(uploadTarget, file);
+          }
+          e.target.value = "";
+        }}
+      />
+
+      {/* Save footer */}
+      <div className="flex items-center justify-end pt-3 border-t border-neutral-100">
+        <SaveButton onClick={() => onSave(localFonts)} saving={saving} />
+      </div>
+    </Section>
+  );
+}

package/components/admin/styles/GridLayoutEditor.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { SiteStyles } from "../../../lib/sanity/types";
+import { DEFAULT_GRID_WIDTH, BREAKPOINTS } from "../../../lib/builder/constants";
+import { Section, SaveButton } from "./shared";
+
+const DEFAULT_GRID = {
+  width: DEFAULT_GRID_WIDTH,
+  outer_padding: "30",
+  gutter_desktop: "30",
+  gutter_responsive: "30",
+  gutter_phone: "16",
+};
+
+/** SVG illustration for the Column Gutter card */
+function GutterIcon() {
+  return (
+    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full" style={{ color: "#b0b5bd" }}>
+      {/* 5 columns */}
+      <rect x="6" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
+      <rect x="28" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
+      <rect x="50" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
+      <rect x="72" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
+      <rect x="94" y="8" width="16" height="56" rx="2" fill="currentColor" opacity="0.22" />
+      {/* Gap arrows between columns */}
+      <line x1="22" y1="36" x2="28" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
+      <path d="M26 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <path d="M24 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <line x1="44" y1="36" x2="50" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
+      <path d="M48 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <path d="M46 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <line x1="66" y1="36" x2="72" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
+      <path d="M70 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <path d="M68 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <line x1="88" y1="36" x2="94" y2="36" stroke="currentColor" strokeWidth="1" opacity="0.55" />
+      <path d="M92 34l2 2-2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+      <path d="M90 34l-2 2 2 2" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.55" />
+    </svg>
+  );
+}
+
+/** SVG illustration for the Max Page Width card */
+function MaxWidthIcon() {
+  return (
+    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full" style={{ color: "#b0b5bd" }}>
+      {/* Browser frame */}
+      <rect x="10" y="10" width="100" height="52" rx="4" stroke="currentColor" strokeWidth="1.5" opacity="0.3" />
+      {/* Title bar dots */}
+      <circle cx="18" cy="17" r="1.5" fill="currentColor" opacity="0.25" />
+      <circle cx="23" cy="17" r="1.5" fill="currentColor" opacity="0.25" />
+      <circle cx="28" cy="17" r="1.5" fill="currentColor" opacity="0.25" />
+      {/* Divider */}
+      <line x1="10" y1="22" x2="110" y2="22" stroke="currentColor" strokeWidth="1" opacity="0.15" />
+      {/* Content area */}
+      <rect x="28" y="28" width="64" height="28" rx="2" fill="currentColor" opacity="0.1" />
+      {/* Left arrow */}
+      <line x1="15" y1="42" x2="28" y2="42" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
+      <path d="M26 40l2 2-2 2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.5" />
+      {/* Right arrow */}
+      <line x1="92" y1="42" x2="105" y2="42" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
+      <path d="M94 40l-2 2 2 2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.5" />
+      {/* Dashed boundary lines */}
+      <line x1="28" y1="26" x2="28" y2="58" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.3" />
+      <line x1="92" y1="26" x2="92" y2="58" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.3" />
+    </svg>
+  );
+}
+
+/** SVG illustration for the Scroll Animations card */
+function ScrollAnimIcon() {
+  return (
+    <svg viewBox="0 0 120 72" fill="none" className="w-full h-full" style={{ color: "#b0b5bd" }}>
+      {/* 3 stacked layers with increasing opacity (fade-in effect) */}
+      <rect x="30" y="6" width="60" height="14" rx="3" fill="currentColor" opacity="0.06" stroke="currentColor" strokeWidth="0.8" />
+      <rect x="30" y="24" width="60" height="14" rx="3" fill="currentColor" opacity="0.14" stroke="currentColor" strokeWidth="0.8" />
+      <rect x="30" y="42" width="60" height="14" rx="3" fill="currentColor" opacity="0.28" stroke="currentColor" strokeWidth="0.8" />
+      {/* Scroll-down arrow */}
+      <line x1="60" y1="60" x2="60" y2="70" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
+      <path d="M56 67l4 4 4-4" stroke="currentColor" strokeWidth="1.5" fill="none" opacity="0.5" />
+      {/* Motion lines */}
+      <line x1="24" y1="46" x2="28" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
+      <line x1="24" y1="52" x2="28" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
+      <line x1="92" y1="46" x2="96" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
+      <line x1="92" y1="52" x2="96" y2="49" stroke="currentColor" strokeWidth="1" opacity="0.3" />
+    </svg>
+  );
+}
+
+/** Device icon (desktop/tablet/phone) for responsive gutter labels */
+function DeviceIcon({ device }: { device: "desktop" | "tablet" | "phone" }) {
+  const base = { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none" as const, stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
+  switch (device) {
+    case "desktop":
+      return (
+        <svg {...base}>
+          <rect x="1" y="2" width="14" height="10" rx="1.5" />
+          <line x1="5" y1="14" x2="11" y2="14" />
+          <line x1="8" y1="12" x2="8" y2="14" />
+        </svg>
+      );
+    case "tablet":
+      return (
+        <svg {...base}>
+          <rect x="3" y="1" width="10" height="14" rx="1.5" />
+          <line x1="6" y1="13" x2="10" y2="13" />
+        </svg>
+      );
+    case "phone":
+      return (
+        <svg {...base}>
+          <rect x="4" y="1" width="8" height="14" rx="2" />
+          <line x1="6.5" y1="13" x2="9.5" y2="13" />
+        </svg>
+      );
+  }
+}
+
+export function GridLayoutEditor({
+  grid,
+  disableMobile,
+  onSaveGrid,
+  onSaveAnimations,
+  savingGrid,
+  savingAnimations,
+}: {
+  grid?: SiteStyles["grid"];
+  disableMobile: boolean;
+  onSaveGrid: (data: Record<string, unknown>) => void;
+  onSaveAnimations: (data: Record<string, unknown>) => void;
+  savingGrid: boolean;
+  savingAnimations: boolean;
+}) {
+  const [local, setLocal] = useState({
+    grid_width: grid?.width || DEFAULT_GRID.width,
+    grid_outer_padding: grid?.outer_padding || DEFAULT_GRID.outer_padding,
+    grid_gutter_desktop: grid?.gutter_desktop || DEFAULT_GRID.gutter_desktop,
+    grid_gutter_responsive: grid?.gutter_responsive || DEFAULT_GRID.gutter_responsive,
+    grid_gutter_phone: grid?.gutter_phone || DEFAULT_GRID.gutter_phone,
+  });
+  const [animLocal, setAnimLocal] = useState(disableMobile);
+
+  useEffect(() => {
+    setLocal({
+      grid_width: grid?.width || DEFAULT_GRID.width,
+      grid_outer_padding: grid?.outer_padding || DEFAULT_GRID.outer_padding,
+      grid_gutter_desktop: grid?.gutter_desktop || DEFAULT_GRID.gutter_desktop,
+      grid_gutter_responsive: grid?.gutter_responsive || DEFAULT_GRID.gutter_responsive,
+      grid_gutter_phone: grid?.gutter_phone || DEFAULT_GRID.gutter_phone,
+    });
+  }, [grid]);
+
+  useEffect(() => { setAnimLocal(disableMobile); }, [disableMobile]);
+
+  const saving = savingGrid || savingAnimations;
+
+  return (
+    <Section title="Grid & Layout" description="Define the global grid, maximum page width, and animation behavior.">
+      {/* ── Top row: 3 icon cards ── */}
+      <div className="grid grid-cols-3 gap-5 mb-8" style={{ maxWidth: "680px" }}>
+          {/* Column Gutter card */}
+          <div className="flex flex-col">
+            <div className="w-full aspect-[16/10] bg-neutral-50 border border-neutral-100 rounded-xl flex items-center justify-center p-4 mb-3 hover:border-neutral-200 transition-colors">
+              <GutterIcon />
+            </div>
+            <label className="text-[11px] font-medium text-neutral-500 mb-2">Column gutter</label>
+            <div className="relative w-[120px]">
+              <input
+                type="text"
+                value={local.grid_gutter_desktop}
+                onChange={(e) => setLocal({ ...local, grid_gutter_desktop: e.target.value })}
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                placeholder="30"
+              />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
+            </div>
+          </div>
+
+          {/* Max Width card */}
+          <div className="flex flex-col">
+            <div className="w-full aspect-[16/10] bg-neutral-50 border border-neutral-100 rounded-xl flex items-center justify-center p-4 mb-3 hover:border-neutral-200 transition-colors">
+              <MaxWidthIcon />
+            </div>
+            <label className="text-[11px] font-medium text-neutral-500 mb-2">Max page width</label>
+            <div className="relative w-[120px]">
+              <input
+                type="text"
+                value={local.grid_width}
+                onChange={(e) => setLocal({ ...local, grid_width: e.target.value })}
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                placeholder={DEFAULT_GRID_WIDTH}
+              />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
+            </div>
+          </div>
+
+          {/* Scroll Animations card */}
+          <div className="flex flex-col">
+            <div className="w-full aspect-[16/10] bg-neutral-50 border border-neutral-100 rounded-xl flex items-center justify-center p-4 mb-3 hover:border-neutral-200 transition-colors">
+              <ScrollAnimIcon />
+            </div>
+            <label className="text-[11px] font-medium text-neutral-500 mb-2">Scroll animations</label>
+            <div className="flex items-center gap-2">
+              <span className="text-[11px] text-neutral-400">Disable on mobile</span>
+              <button
+                type="button"
+                onClick={() => setAnimLocal(!animLocal)}
+                className={`relative w-9 h-5 rounded-full transition-colors shrink-0 ${
+                  animLocal ? "bg-[#076bff]" : "bg-neutral-300"
+                }`}
+              >
+                <span
+                  className={`absolute top-[2px] w-4 h-4 rounded-full bg-white shadow-sm transition-all ${
+                    animLocal ? "left-[18px]" : "left-[2px]"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+      </div>
+
+      {/* ── Responsive gutter overrides ── */}
+      <div className="border-t border-neutral-100 pt-6">
+        <h3 className="text-[10px] font-semibold text-neutral-400 uppercase tracking-wider mb-4">Responsive gutter overrides</h3>
+        <div className="grid grid-cols-3 gap-5" style={{ maxWidth: "480px" }}>
+          {/* Desktop */}
+          <div>
+            <label className="flex items-center gap-1.5 text-[11px] font-medium text-neutral-500 mb-1.5">
+              <DeviceIcon device="desktop" />
+              Desktop
+            </label>
+            <div className="relative">
+              <input
+                type="text"
+                value={local.grid_gutter_desktop}
+                onChange={(e) => setLocal({ ...local, grid_gutter_desktop: e.target.value })}
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                placeholder="30"
+              />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
+            </div>
+            <p className="text-[10px] text-neutral-400 mt-1">{`>${BREAKPOINTS.tablet}px`}</p>
+          </div>
+
+          {/* Tablet */}
+          <div>
+            <label className="flex items-center gap-1.5 text-[11px] font-medium text-neutral-500 mb-1.5">
+              <DeviceIcon device="tablet" />
+              Tablet
+            </label>
+            <div className="relative">
+              <input
+                type="text"
+                value={local.grid_gutter_responsive}
+                onChange={(e) => setLocal({ ...local, grid_gutter_responsive: e.target.value })}
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                placeholder="30"
+              />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
+            </div>
+            <p className="text-[10px] text-neutral-400 mt-1">{`≤${BREAKPOINTS.tablet}px`}</p>
+          </div>
+
+          {/* Phone */}
+          <div>
+            <label className="flex items-center gap-1.5 text-[11px] font-medium text-neutral-500 mb-1.5">
+              <DeviceIcon device="phone" />
+              Phone
+            </label>
+            <div className="relative">
+              <input
+                type="text"
+                value={local.grid_gutter_phone || "16"}
+                onChange={(e) => setLocal({ ...local, grid_gutter_phone: e.target.value })}
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                placeholder="16"
+              />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
+            </div>
+            <p className="text-[10px] text-neutral-400 mt-1">{`≤${BREAKPOINTS.phone}px`}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Save buttons ── */}
+      <div className="flex justify-end gap-3 pt-6">
+        <SaveButton onClick={() => onSaveAnimations({ disable_scroll_animations_mobile: animLocal })} saving={savingAnimations} label="Save Animations" />
+        <SaveButton onClick={() => onSaveGrid(local)} saving={savingGrid} label="Save Grid" />
+      </div>
+    </Section>
+  );
+}

package/components/admin/styles/LinksButtonsEditor.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { SiteStyles } from "../../../lib/sanity/types";
+import { Section, SaveButton, ColorField, FieldInput } from "./shared";
+
+export function LinksButtonsEditor({
+  linkStyle,
+  buttonStyle,
+  onSave,
+  saving,
+}: {
+  linkStyle?: SiteStyles["link_style"];
+  buttonStyle?: SiteStyles["button_style"];
+  onSave: (data: Record<string, unknown>) => void;
+  saving: boolean;
+}) {
+  const [local, setLocal] = useState({
+    link_color: linkStyle?.color || "#076bff",
+    link_hover_color: linkStyle?.hover_color || "#0559d4",
+    link_underline: linkStyle?.underline ?? true,
+    button_primary_bg: buttonStyle?.primary_bg || "#ffffff",
+    button_primary_text: buttonStyle?.primary_text || "#000000",
+    button_secondary_bg: buttonStyle?.secondary_bg || "#1a1a1a",
+    button_secondary_text: buttonStyle?.secondary_text || "#ffffff",
+    button_border_radius: buttonStyle?.border_radius || "8px",
+  });
+
+  useEffect(() => {
+    setLocal({
+      link_color: linkStyle?.color || "#076bff",
+      link_hover_color: linkStyle?.hover_color || "#0559d4",
+      link_underline: linkStyle?.underline ?? true,
+      button_primary_bg: buttonStyle?.primary_bg || "#ffffff",
+      button_primary_text: buttonStyle?.primary_text || "#000000",
+      button_secondary_bg: buttonStyle?.secondary_bg || "#1a1a1a",
+      button_secondary_text: buttonStyle?.secondary_text || "#ffffff",
+      button_border_radius: buttonStyle?.border_radius || "8px",
+    });
+  }, [linkStyle, buttonStyle]);
+
+  return (
+    <Section title="Links & Buttons" description="Default styles for links and buttons across the site.">
+      <h3 className="text-sm font-medium text-neutral-700 mb-3">Links</h3>
+      <div className="grid grid-cols-3 gap-4 mb-4">
+        <ColorField label="Link Color" value={local.link_color} onChange={(v) => setLocal({ ...local, link_color: v })} />
+        <ColorField label="Hover Color" value={local.link_hover_color} onChange={(v) => setLocal({ ...local, link_hover_color: v })} />
+        <div className="flex items-end">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={local.link_underline}
+              onChange={(e) => setLocal({ ...local, link_underline: e.target.checked })}
+              className="accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-700">Underline links</span>
+          </label>
+        </div>
+      </div>
+
+      <div className="mb-6 p-3 bg-neutral-50 rounded-lg">
+        <span
+          className="text-sm cursor-pointer"
+          style={{
+            color: local.link_color,
+            textDecoration: local.link_underline ? "underline" : "none",
+            textDecorationColor: local.link_color,
+            textUnderlineOffset: "3px",
+          }}
+        >
+          Sample link text
+        </span>
+      </div>
+
+      <h3 className="text-sm font-medium text-neutral-700 mb-3">Buttons</h3>
+      <div className="grid grid-cols-3 gap-4 mb-4">
+        <ColorField label="Primary BG" value={local.button_primary_bg} onChange={(v) => setLocal({ ...local, button_primary_bg: v })} />
+        <ColorField label="Primary Text" value={local.button_primary_text} onChange={(v) => setLocal({ ...local, button_primary_text: v })} />
+        <FieldInput
+          label="Border Radius"
+          value={local.button_border_radius}
+          onChange={(v) => setLocal({ ...local, button_border_radius: v })}
+          placeholder="8px"
+        />
+      </div>
+      <div className="grid grid-cols-3 gap-4 mb-4">
+        <ColorField label="Secondary BG" value={local.button_secondary_bg} onChange={(v) => setLocal({ ...local, button_secondary_bg: v })} />
+        <ColorField label="Secondary Text" value={local.button_secondary_text} onChange={(v) => setLocal({ ...local, button_secondary_text: v })} />
+      </div>
+
+      <div className="flex gap-3 p-3 bg-neutral-50 rounded-lg mb-4">
+        <span
+          className="inline-block px-5 py-2 text-sm cursor-pointer"
+          style={{
+            backgroundColor: local.button_primary_bg,
+            color: local.button_primary_text,
+            borderRadius: local.button_border_radius,
+            border: "1px solid rgba(0,0,0,0.1)",
+          }}
+        >
+          Primary
+        </span>
+        <span
+          className="inline-block px-5 py-2 text-sm cursor-pointer"
+          style={{
+            backgroundColor: local.button_secondary_bg,
+            color: local.button_secondary_text,
+            borderRadius: local.button_border_radius,
+          }}
+        >
+          Secondary
+        </span>
+      </div>
+
+      <div className="flex justify-end">
+        <SaveButton onClick={() => onSave(local)} saving={saving} />
+      </div>
+    </Section>
+  );
+}