@morphika/webframe 0.1.0

package/components/admin/setup-wizard/StorageStep.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { WizardStepProps } from "./SetupWizard";
+
+// ── Icons ──
+
+function CheckCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="animate-spin">
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+function R2Icon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F6821F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+      <line x1="12" y1="22.08" x2="12" y2="12" />
+    </svg>
+  );
+}
+
+// ── Types ──
+
+interface R2Status {
+  connected: boolean;
+  bucket_name: string | null;
+  public_url: string | null;
+}
+
+type StepState = "loading" | "disconnected" | "connected";
+
+// ── Component ──
+
+/**
+ * Step 3 — Storage (Cloudflare R2 Connection)
+ *
+ * Reuses the same R2 connect API as /admin/storage.
+ * Shows a simplified 5-field form or "Connected" status.
+ */
+export function StorageStep({ onNext, onBack }: WizardStepProps) {
+  const [state, setState] = useState<StepState>("loading");
+  const [r2Status, setR2Status] = useState<R2Status | null>(null);
+
+  // Form fields
+  const [endpoint, setEndpoint] = useState("");
+  const [bucketName, setBucketName] = useState("");
+  const [accessKeyId, setAccessKeyId] = useState("");
+  const [secretAccessKey, setSecretAccessKey] = useState("");
+  const [publicUrl, setPublicUrl] = useState("");
+
+  const [testing, setTesting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Check R2 status on mount
+  useEffect(() => {
+    fetch("/api/admin/r2/status")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: R2Status | null) => {
+        if (data?.connected) {
+          setR2Status(data);
+          setState("connected");
+        } else {
+          setState("disconnected");
+        }
+      })
+      .catch(() => setState("disconnected"));
+  }, []);
+
+  const handleConnect = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setTesting(true);
+      setError(null);
+
+      try {
+        const res = await fetch("/api/admin/r2/connect", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...csrfHeaders(),
+          },
+          body: JSON.stringify({
+            endpoint: endpoint.trim(),
+            bucketName: bucketName.trim(),
+            accessKeyId: accessKeyId.trim(),
+            secretAccessKey: secretAccessKey.trim(),
+            publicUrl: publicUrl.trim(),
+          }),
+        });
+
+        const data = await res.json();
+        if (!res.ok) {
+          setError(data.error || "Connection failed");
+          return;
+        }
+
+        // Success — update state and auto-advance
+        setR2Status({
+          connected: true,
+          bucket_name: bucketName.trim(),
+          public_url: publicUrl.trim(),
+        });
+        setState("connected");
+
+        // Small delay so user sees the success state
+        setTimeout(() => onNext(), 800);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Connection failed");
+      } finally {
+        setTesting(false);
+      }
+    },
+    [endpoint, bucketName, accessKeyId, secretAccessKey, publicUrl, onNext]
+  );
+
+  const inputClass =
+    "w-full rounded-lg border border-black/[0.08] bg-white px-3 py-2 text-sm text-[#333] placeholder:text-[#bbb] focus:outline-none focus:ring-2 focus:ring-[#076bff]/20 focus:border-[#076bff]/40";
+  const labelClass = "block text-xs font-medium text-[#666] mb-1";
+
+  if (state === "loading") {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <Spinner />
+        <p className="text-[#999] text-xs mt-3">Checking storage status...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-8">
+      <div className="flex items-center gap-2.5 mb-1">
+        <R2Icon />
+        <h2 className="text-lg font-semibold text-[#111]">Storage</h2>
+      </div>
+      <p className="text-sm text-[#666] mb-8">
+        Connect Cloudflare R2 to store images, videos, and other assets.
+      </p>
+
+      {/* Already connected */}
+      {state === "connected" && r2Status && (
+        <div className="bg-white rounded-xl border border-green-200 p-5 mb-6">
+          <div className="flex items-center gap-3 mb-3">
+            <CheckCircle />
+            <span className="text-sm font-medium text-[#333]">
+              Cloudflare R2 Connected
+            </span>
+          </div>
+          {r2Status.bucket_name && (
+            <p className="text-xs text-[#999]">
+              Bucket: <span className="font-mono">{r2Status.bucket_name}</span>
+            </p>
+          )}
+          {r2Status.public_url && (
+            <p className="text-xs text-[#999] mt-0.5">
+              URL: <span className="font-mono">{r2Status.public_url}</span>
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Connection form */}
+      {state === "disconnected" && (
+        <form onSubmit={handleConnect} className="space-y-3 mb-6">
+          <div className="bg-white rounded-xl border border-black/[0.06] p-5 space-y-3">
+            <div>
+              <label className={labelClass}>S3 Endpoint</label>
+              <input
+                type="url"
+                value={endpoint}
+                onChange={(e) => setEndpoint(e.target.value)}
+                placeholder="https://<account-id>.r2.cloudflarestorage.com"
+                className={inputClass}
+                required
+              />
+              <p className="text-[11px] text-[#bbb] mt-0.5">
+                Found in Cloudflare R2 dashboard → Account Details
+              </p>
+            </div>
+
+            <div>
+              <label className={labelClass}>Bucket Name</label>
+              <input
+                type="text"
+                value={bucketName}
+                onChange={(e) => setBucketName(e.target.value)}
+                placeholder="my-assets"
+                className={inputClass}
+                required
+              />
+            </div>
+
+            <div>
+              <label className={labelClass}>Access Key ID</label>
+              <input
+                type="text"
+                value={accessKeyId}
+                onChange={(e) => setAccessKeyId(e.target.value)}
+                placeholder="R2 API token Access Key ID"
+                className={inputClass}
+                required
+                autoComplete="off"
+              />
+            </div>
+
+            <div>
+              <label className={labelClass}>Secret Access Key</label>
+              <input
+                type="password"
+                value={secretAccessKey}
+                onChange={(e) => setSecretAccessKey(e.target.value)}
+                placeholder="R2 API token Secret Access Key"
+                className={inputClass}
+                required
+                autoComplete="off"
+              />
+            </div>
+
+            <div>
+              <label className={labelClass}>Public Bucket URL</label>
+              <input
+                type="url"
+                value={publicUrl}
+                onChange={(e) => setPublicUrl(e.target.value)}
+                placeholder="https://pub-xxx.r2.dev or https://assets.example.com"
+                className={inputClass}
+                required
+              />
+              <p className="text-[11px] text-[#bbb] mt-0.5">
+                R2.dev subdomain or custom domain with public access enabled
+              </p>
+            </div>
+          </div>
+
+          {error && (
+            <div className="p-3 rounded-lg bg-red-50 border border-red-200">
+              <p className="text-xs text-red-700">{error}</p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={testing}
+            className="inline-flex items-center gap-2 rounded-lg bg-[#F6821F] text-white text-sm font-medium px-4 py-2.5 hover:bg-[#F6821F]/90 transition-colors disabled:opacity-50"
+          >
+            {testing ? (
+              <>
+                <Spinner />
+                Testing Connection...
+              </>
+            ) : (
+              "Test & Connect"
+            )}
+          </button>
+        </form>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-between">
+        <div>
+          {onBack && (
+            <button
+              onClick={onBack}
+              className="px-4 py-2 text-sm text-[#666] hover:text-[#333] transition-colors"
+            >
+              Back
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Skip — storage can be configured later */}
+          {state === "disconnected" && (
+            <button
+              onClick={onNext}
+              className="px-4 py-2 text-sm text-[#999] hover:text-[#333] transition-colors"
+            >
+              Skip for now
+            </button>
+          )}
+
+          {/* Next (when already connected) */}
+          {state === "connected" && (
+            <button
+              onClick={onNext}
+              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+            >
+              Next
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/admin/setup-wizard/WelcomeStep.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { getSiteConfig } from "../../../lib/config";
+import type { WizardStepProps } from "./SetupWizard";
+
+/**
+ * Step 1 — Welcome
+ *
+ * Displays the site name, a welcome message, and a brief overview
+ * of what the wizard will configure.
+ */
+export function WelcomeStep({ onNext }: WizardStepProps) {
+  const config = getSiteConfig();
+  const primaryColor = config.palette.primary;
+
+  return (
+    <div className="pt-12 text-center">
+      {/* Color accent bar */}
+      <div
+        className="w-12 h-1 rounded-full mx-auto mb-8"
+        style={{ backgroundColor: primaryColor }}
+      />
+
+      <h1 className="text-2xl font-semibold text-[#111] mb-2">
+        Welcome to {config.name}
+      </h1>
+
+      <p className="text-sm text-[#666] mb-10 max-w-sm mx-auto leading-relaxed">
+        Let&apos;s set up your site in a few quick steps. We&apos;ll connect your
+        database, configure storage, and set up your brand.
+      </p>
+
+      {/* What we'll configure */}
+      <div className="text-left bg-white rounded-xl border border-black/[0.06] p-6 mb-10">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-[#999] mb-4">
+          What we&apos;ll configure
+        </h2>
+        <ul className="space-y-3">
+          {[
+            {
+              icon: (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <ellipse cx="12" cy="5" rx="9" ry="3" />
+                  <path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" />
+                  <path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" />
+                </svg>
+              ),
+              label: "Database",
+              desc: "Connect to Sanity CMS for content storage",
+            },
+            {
+              icon: (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M22 12H2" />
+                  <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" />
+                  <line x1="6" y1="16" x2="6.01" y2="16" strokeWidth="2" />
+                  <line x1="10" y1="16" x2="10.01" y2="16" strokeWidth="2" />
+                </svg>
+              ),
+              label: "Storage",
+              desc: "Set up Cloudflare R2 for images and videos",
+            },
+            {
+              icon: (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" />
+                  <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
+                  <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
+                  <circle cx="6.5" cy="12" r="0.5" fill="currentColor" />
+                  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z" />
+                </svg>
+              ),
+              label: "Branding",
+              desc: "Upload fonts, set colors, and configure your identity",
+            },
+          ].map((item) => (
+            <li key={item.label} className="flex items-start gap-3">
+              <span className="text-[#076bff] mt-0.5 shrink-0">{item.icon}</span>
+              <div>
+                <span className="text-sm font-medium text-[#333]">{item.label}</span>
+                <p className="text-xs text-[#999] mt-0.5">{item.desc}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <button
+        onClick={onNext}
+        className="px-6 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+      >
+        Get Started
+      </button>
+    </div>
+  );
+}

package/components/admin/setup-wizard/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Setup Wizard — onboarding flow for new Visual Builder instances.
+ */
+export { SetupWizard } from "./SetupWizard";
+export { WelcomeStep } from "./WelcomeStep";
+export { DatabaseStep } from "./DatabaseStep";
+export { StorageStep } from "./StorageStep";
+export { BrandingStep } from "./BrandingStep";
+export { DoneStep } from "./DoneStep";

package/components/admin/styles/ColorsEditor.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import ColorPicker, { isValidHex } from "../../../components/builder/ColorPicker";
+import { invalidatePaletteCache } from "../../../components/builder/ColorSwatchPicker";
+import type { SiteStyles, ColorSwatch } from "../../../lib/sanity/types";
+import { Section, SaveButton } from "./shared";
+
+function getContrastColor(hex: string): string {
+  if (!isValidHex(hex)) return "#000";
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return (r * 0.299 + g * 0.587 + b * 0.114) > 160 ? "#000000" : "#ffffff";
+}
+
+export function ColorsEditor({
+  colors,
+  onSave,
+  saving,
+}: {
+  colors?: SiteStyles["colors"];
+  onSave: (data: Record<string, unknown>) => void;
+  saving: boolean;
+}) {
+  const [swatches, setSwatches] = useState<ColorSwatch[]>(colors?.swatches || []);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [renamingIndex, setRenamingIndex] = useState<number | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    setSwatches(colors?.swatches || []);
+  }, [colors]);
+
+  const addSwatch = (hex: string) => {
+    if (editingIndex !== null) {
+      setSwatches((prev) => prev.map((s, i) => i === editingIndex ? { ...s, hex } : s));
+      setEditingIndex(null);
+    } else {
+      const key = crypto.randomUUID().slice(0, 8);
+      setSwatches((prev) => [...prev, { _key: key, name: `Color ${prev.length + 1}`, hex }]);
+    }
+    setPickerOpen(false);
+  };
+
+  const removeSwatch = (index: number) => {
+    setSwatches((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const startRename = (index: number) => {
+    setRenamingIndex(index);
+    setRenameValue(swatches[index].name);
+  };
+
+  const finishRename = () => {
+    if (renamingIndex !== null && renameValue.trim()) {
+      setSwatches((prev) => prev.map((s, i) => i === renamingIndex ? { ...s, name: renameValue.trim() } : s));
+    }
+    setRenamingIndex(null);
+  };
+
+  const handleSave = () => {
+    onSave({
+      color_palette: swatches.map((s) => ({
+        _key: s._key || crypto.randomUUID().slice(0, 8),
+        _type: "object",
+        name: s.name,
+        hex: s.hex,
+      })),
+    });
+    invalidatePaletteCache();
+  };
+
+  return (
+    <Section title="Color Palette" description="Build your project's color palette. These colors will appear as presets in every block editor.">
+      {swatches.length === 0 && !pickerOpen ? (
+        /* ─── Empty state ─── */
+        <div className="border-2 border-dashed border-neutral-200 rounded-2xl py-12 px-6 flex flex-col items-center text-center bg-neutral-50/50">
+          {/* 4-color icon */}
+          <div className="grid grid-cols-2 gap-1 w-12 h-12 mb-4">
+            <div className="rounded-tl-lg bg-[var(--admin-accent)] opacity-40" />
+            <div className="rounded-tr-lg bg-[var(--admin-error)] opacity-40" />
+            <div className="rounded-bl-lg bg-brand-accent opacity-40" />
+            <div className="rounded-br-lg bg-brand-accent-2 opacity-40" />
+          </div>
+          <p className="text-sm font-medium text-neutral-700 mb-1">No colors yet</p>
+          <p className="text-xs text-neutral-500 mb-5 max-w-xs leading-relaxed">
+            Start building your palette. Colors you add here will be available as quick presets in every block editor — text, backgrounds, borders, and more.
+          </p>
+          <button
+            onClick={() => { setEditingIndex(null); setPickerOpen(true); }}
+            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-neutral-900 text-white text-sm font-medium hover:bg-neutral-700 transition-colors"
+          >
+            <span className="text-lg leading-none">+</span>
+            Add your first color
+          </button>
+        </div>
+      ) : (
+        <>
+          {/* ─── Swatches grid ─── */}
+          {swatches.length > 0 && (
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3 mb-4">
+              {swatches.map((s, i) => (
+                <div
+                  key={s._key || i}
+                  className="rounded-xl border border-neutral-200 overflow-hidden transition-all hover:shadow-md hover:-translate-y-0.5"
+                  onMouseEnter={() => setHoveredIndex(i)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                >
+                  {/* Color area */}
+                  <div
+                    className="h-16 relative cursor-pointer"
+                    style={{ background: s.hex }}
+                    onClick={() => { setEditingIndex(i); setPickerOpen(true); }}
+                  >
+                    {hoveredIndex === i && (
+                      <div className="absolute inset-0 bg-black/15 flex items-center justify-center gap-1.5">
+                        <button
+                          onClick={(e) => { e.stopPropagation(); setEditingIndex(i); setPickerOpen(true); }}
+                          className="w-6 h-6 rounded-full bg-white/90 flex items-center justify-center text-[11px] cursor-pointer hover:bg-white transition-colors border-none"
+                          title="Edit color"
+                        >✎</button>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); removeSwatch(i); }}
+                          className="w-6 h-6 rounded-full bg-white/90 flex items-center justify-center text-[13px] text-red-500 cursor-pointer hover:bg-white transition-colors border-none"
+                          title="Remove"
+                        >×</button>
+                      </div>
+                    )}
+                  </div>
+                  {/* Info */}
+                  <div className="px-2.5 py-2 bg-white">
+                    {renamingIndex === i ? (
+                      <input
+                        autoFocus
+                        value={renameValue}
+                        onChange={(e) => setRenameValue(e.target.value)}
+                        onBlur={finishRename}
+                        onKeyDown={(e) => e.key === "Enter" && finishRename()}
+                        className="w-full border-none border-b border-neutral-300 text-[11px] font-semibold text-neutral-800 outline-none p-0 bg-transparent"
+                      />
+                    ) : (
+                      <div
+                        onClick={() => startRename(i)}
+                        className="text-[11px] font-semibold text-neutral-700 cursor-text truncate"
+                      >{s.name}</div>
+                    )}
+                    <div className="text-[10px] text-neutral-400 mt-0.5 uppercase font-mono">{s.hex}</div>
+                  </div>
+                </div>
+              ))}
+
+              {/* Add swatch card */}
+              {!pickerOpen && (
+                <button
+                  onClick={() => { setEditingIndex(null); setPickerOpen(true); }}
+                  className="rounded-xl border-2 border-dashed border-neutral-200 h-[100px] flex flex-col items-center justify-center gap-1 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</span>
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Palette strip preview */}
+          {swatches.length >= 2 && !pickerOpen && (
+            <div className="px-4 py-3 bg-neutral-50 rounded-xl border border-neutral-100 mb-4">
+              <div className="text-[10px] text-neutral-400 uppercase tracking-widest mb-2">Palette preview</div>
+              <div className="flex rounded-lg overflow-hidden h-8">
+                {swatches.map((s, i) => (
+                  <div
+                    key={s._key || i}
+                    className="flex-1 flex items-center justify-center"
+                    style={{ background: s.hex }}
+                  >
+                    <span
+                      className="text-[7px] uppercase tracking-wider font-mono opacity-70"
+                      style={{ color: getContrastColor(s.hex) }}
+                    >{s.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Picker */}
+          {pickerOpen && (
+            <div className="flex justify-center mb-4">
+              <ColorPicker
+                color={editingIndex !== null ? swatches[editingIndex].hex : "#076bff"}
+                onChange={addSwatch}
+                onClose={() => { setPickerOpen(false); setEditingIndex(null); }}
+                confirmLabel={editingIndex !== null ? "Update color" : "Add to palette"}
+              />
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Save footer */}
+      {(swatches.length > 0 || (colors?.swatches?.length || 0) > 0) && (
+        <div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-100">
+          <span className="text-[11px] text-neutral-400">
+            {swatches.length} color{swatches.length !== 1 ? "s" : ""} in palette
+          </span>
+          <SaveButton onClick={handleSave} saving={saving} />
+        </div>
+      )}
+    </Section>
+  );
+}