@morphika/webframe 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Morphika Studio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @morphika/webframe
+
+Core library for the **Visual Page Builder** — a reusable website builder built on Next.js and Sanity.
+
+## Quick Start
+
+```bash
+npx create-visual-builder my-site
+cd my-site
+npm run dev
+```
+
+Then open `http://localhost:3000/admin` to run the setup wizard.
+
+## What's Included
+
+- Visual page builder with drag-and-drop sections, columns, and blocks
+- 7 content block types (text, image, image grid, video, spacer, button, cover)
+- Project grid with masonry layout
+- Parallax scroll sections
+- Custom reusable sections
+- Navigation builder (12-column grid)
+- Asset management with Cloudflare R2 storage
+- Enter animations, hover effects, and page transitions
+- Global styles editor (typography, colors, grid)
+- Responsive design with desktop/tablet/phone viewports
+- SEO metadata per page
+- Sanity CMS backend
+
+## Documentation
+
+- [Getting Started](https://github.com/MorphikaStudio/morphika-web-builder/blob/main/docs/GETTING-STARTED.md)
+- [Configuration Reference](https://github.com/MorphikaStudio/morphika-web-builder/blob/main/docs/CONFIGURATION.md)
+- [Customization Guide](https://github.com/MorphikaStudio/morphika-web-builder/blob/main/docs/CUSTOMIZATION.md)
+- [Deployment Guide](https://github.com/MorphikaStudio/morphika-web-builder/blob/main/docs/DEPLOYMENT.md)
+
+## Requirements
+
+- Node.js 22+
+- Next.js 16+
+- React 19+
+- Sanity v3 project
+
+## License
+
+MIT

package/admin/assets.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/assets — Asset browser page.
+ */
+export { default as AssetsPage } from "../app/admin/assets/page";

package/admin/database.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/database — Database configurator page.
+ */
+export { default as DatabasePage } from "../app/admin/database/page";

package/admin/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @morphika/webframe/admin — Admin page components.
+ * Re-exports from the monolith source during the transition period.
+ */
+export { default as AdminLayout } from "../app/admin/layout";
+export { default as AdminDashboard } from "../app/admin/page";

package/admin/login.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/login — Admin login page.
+ */
+export { default as LoginPage } from "../app/admin/login/page";

package/admin/navigation.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/navigation — Navigation builder page.
+ */
+export { default as NavigationPage } from "../app/admin/navigation/page";

package/admin/pages-editor.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/pages/editor — Page editor page.
+ */
+export { default as PageEditorPage } from "../app/admin/pages/[slug]/page";

package/admin/pages.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/pages — Pages list page.
+ */
+export { default as PagesListPage } from "../app/admin/pages/page";

package/admin/projects-editor.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/projects/editor — Project editor page.
+ */
+export { default as ProjectEditorPage } from "../app/admin/projects/[slug]/page";

package/admin/projects.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/projects — Projects list page.
+ */
+export { default as ProjectsPage } from "../app/admin/projects/page";

package/admin/settings.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/settings — Site settings page.
+ */
+export { default as AdminSettingsPage } from "../app/admin/settings/page";

package/admin/setup.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/setup — Setup wizard page re-export.
+ */
+export { default } from "../app/admin/setup/page";

package/admin/storage.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/storage — Storage management page.
+ */
+export { default as StoragePage } from "../app/admin/storage/page";

package/admin/styles.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/admin/styles — Styles editor page.
+ */
+export { default as StylesPage } from "../app/admin/styles/page";

package/app/(site)/[slug]/loading.tsx

@@ -0,0 +1,20 @@
+/**
+ * Loading skeleton for dynamic pages.
+ * Shown by Next.js while page content loads.
+ */
+export default function PageLoading() {
+  return (
+    <div className="min-h-screen bg-brand-dark" aria-busy="true" aria-label="Loading page">
+      {/* Hero placeholder */}
+      <div className="w-full h-[50vh] bg-neutral-900 animate-pulse" />
+      {/* Content placeholders */}
+      <div className="max-w-3xl mx-auto px-6 py-16 space-y-6">
+        <div className="h-8 w-1/2 bg-neutral-800 rounded animate-pulse" />
+        <div className="h-4 w-full bg-neutral-800/60 rounded animate-pulse" />
+        <div className="h-4 w-4/5 bg-neutral-800/60 rounded animate-pulse" />
+        <div className="h-96 w-full bg-neutral-800/40 rounded animate-pulse mt-8" />
+        <div className="h-4 w-3/4 bg-neutral-800/60 rounded animate-pulse" />
+      </div>
+    </div>
+  );
+}

package/app/(site)/[slug]/page.tsx

@@ -0,0 +1,83 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { client } from "../../../lib/sanity/client";
+import { publishedPageBySlugQuery, allPageSlugsQuery } from "../../../lib/sanity/queries";
+import type { Page } from "../../../lib/sanity/types";
+import { PageRenderer } from "../../../components/blocks";
+import { getSiteConfig } from "../../../lib/config";
+import { assetUrl } from "../../../lib/assets";
+
+const cfg = getSiteConfig();
+
+// ISR: cache for 1 hour, revalidate in background on next request.
+export const revalidate = 3600;
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+async function getPageBySlug(slug: string): Promise<Page | null> {
+  try {
+    return await client.fetch<Page>(publishedPageBySlugQuery, { slug });
+  } catch (error) {
+    console.error(`[Page] Failed to fetch page "${slug}":`, error);
+    return null;
+  }
+}
+
+export async function generateStaticParams() {
+  try {
+    const slugs: string[] = await client.fetch(allPageSlugsQuery);
+    return slugs.map((slug) => ({ slug }));
+  } catch {
+    return [];
+  }
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const page = await getPageBySlug(slug);
+
+  if (!page) return {};
+
+  const title = page.metadata?.seo_title || page.title;
+  const description = page.metadata?.seo_description || cfg.defaults.metaDescription;
+  const ogImagePath = page.metadata?.og_image_path || page.thumbnail_path;
+  const ogImage = ogImagePath ? assetUrl(ogImagePath) : undefined;
+  const url = `${cfg.domain}/${slug}`;
+
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: {
+      title,
+      description,
+      url,
+      siteName: cfg.name,
+      type: "website",
+      ...(ogImage && { images: [{ url: ogImage }] }),
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      ...(ogImage && { images: [ogImage] }),
+    },
+  };
+}
+
+export default async function DynamicPage({ params }: PageProps) {
+  const { slug } = await params;
+  const page = await getPageBySlug(slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  return (
+    <main className="min-h-screen">
+      <PageRenderer page={page} />
+    </main>
+  );
+}

package/app/(site)/error.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function SiteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[SiteError]", error);
+  }, [error]);
+
+  return (
+    <div className="min-h-[80vh] flex flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-5xl font-bold tracking-tight text-white">
+        Something went wrong
+      </h1>
+      <p className="mt-4 text-lg text-white/60 max-w-md">
+        An unexpected error occurred. Please try again.
+      </p>
+      <button
+        onClick={reset}
+        className="mt-8 inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-medium bg-white text-black transition-colors hover:bg-white/80"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/app/(site)/layout.tsx

@@ -0,0 +1,53 @@
+import { client } from "../../lib/sanity/client";
+import { siteSettingsQuery } from "../../lib/sanity/queries";
+import type { SiteSettings } from "../../lib/sanity/types";
+import { NavColorProvider } from "../../lib/contexts/NavColorContext";
+import { NavAnimationProvider } from "../../lib/contexts/NavAnimationContext";
+import { PageExitProvider } from "../../lib/contexts/PageExitContext";
+import { StylesProvider } from "../../lib/styles/provider";
+import { getSiteConfig } from "../../lib/config";
+import Navbar from "../../components/ui/Navbar";
+import CustomCursor from "../../components/ui/CustomCursor";
+import ScrollToTop from "../../components/ui/ScrollToTop";
+import PortfolioTracker from "../../components/ui/PortfolioTracker";
+
+async function getSiteSettings(): Promise<SiteSettings | null> {
+  try {
+    return await client.fetch<SiteSettings>(siteSettingsQuery);
+  } catch (error) {
+    console.error("[SiteLayout] Failed to fetch site settings:", error);
+    return null;
+  }
+}
+
+export default async function SiteLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const settings = await getSiteSettings();
+  const navColor = settings?.nav_design?.color || "yellow-lime";
+
+  const cfg = getSiteConfig();
+
+  return (
+    <StylesProvider>
+      <NavColorProvider initialColor={navColor}>
+        <NavAnimationProvider>
+          <PageExitProvider>
+            <div data-site {...(cfg.features.customCursor ? { "data-custom-cursor": true } : {})}>
+              <Navbar
+                navItems={settings?.nav_items}
+                design={settings?.nav_design}
+              />
+              <main className="flex-1">{children}</main>
+              {cfg.features.customCursor && <CustomCursor />}
+              <ScrollToTop />
+              {cfg.features.portfolioTracking && <PortfolioTracker />}
+            </div>
+          </PageExitProvider>
+        </NavAnimationProvider>
+      </NavColorProvider>
+    </StylesProvider>
+  );
+}

package/app/(site)/loading.tsx

@@ -0,0 +1,20 @@
+/**
+ * Loading skeleton for public site pages.
+ * Shown by Next.js while dynamic page content loads.
+ */
+export default function SiteLoading() {
+  return (
+    <div className="min-h-screen bg-brand-dark" aria-busy="true" aria-label="Loading page">
+      {/* Hero placeholder */}
+      <div className="w-full h-[60vh] bg-neutral-900 animate-pulse" />
+      {/* Content placeholders */}
+      <div className="max-w-3xl mx-auto px-6 py-16 space-y-6">
+        <div className="h-8 w-2/3 bg-neutral-800 rounded animate-pulse" />
+        <div className="h-4 w-full bg-neutral-800/60 rounded animate-pulse" />
+        <div className="h-4 w-5/6 bg-neutral-800/60 rounded animate-pulse" />
+        <div className="h-4 w-4/6 bg-neutral-800/60 rounded animate-pulse" />
+        <div className="h-64 w-full bg-neutral-800/40 rounded animate-pulse mt-8" />
+      </div>
+    </div>
+  );
+}

package/app/(site)/not-found.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { getSiteConfig } from "../../lib/config";
+
+const cfg = getSiteConfig();
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[80vh] flex flex-col items-center justify-center px-6 text-center">
+      <h1
+        className="text-[120px] leading-none font-bold tracking-tighter"
+        style={{ color: cfg.palette.accent }}
+      >
+        404
+      </h1>
+      <p className="mt-4 text-lg text-white/60 max-w-md">
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
+      </p>
+      <Link
+        href="/"
+        className="mt-8 inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-medium transition-colors hover:opacity-80"
+        style={{
+          backgroundColor: cfg.palette.primary,
+          color: cfg.palette.text,
+        }}
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          aria-hidden="true"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back to Home
+      </Link>
+    </div>
+  );
+}

package/app/(site)/page.tsx

@@ -0,0 +1,43 @@
+import { client } from "../../lib/sanity/client";
+import { homePageQuery } from "../../lib/sanity/queries";
+import type { Page } from "../../lib/sanity/types";
+import { PageRenderer } from "../../components/blocks";
+import { getSiteConfig } from "../../lib/config";
+
+// ISR: cache for 1 hour, revalidate in background on next request.
+export const revalidate = 3600;
+
+async function getHomePage(): Promise<Page | null> {
+  try {
+    return await client.fetch<Page>(homePageQuery);
+  } catch (error) {
+    console.error("[Home] Failed to fetch home page:", error);
+    return null;
+  }
+}
+
+export default async function HomePage() {
+  const page = await getHomePage();
+
+  if (!page) {
+    const cfg = getSiteConfig();
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-brand-dark">
+        <div className="text-center">
+          <h1 className="font-mono text-2xl uppercase tracking-widest text-brand-accent">
+            {cfg.name}
+          </h1>
+          <p className="mt-4 font-mono text-sm uppercase tracking-wider text-brand-muted">
+            Coming Soon
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen">
+      <PageRenderer page={page} />
+    </main>
+  );
+}

package/app/(site)/preview/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+/**
+ * Preview Page — renders any page (including drafts) for the builder's
+ * "Preview" button. Fetches from /api/admin/preview with slug.
+ *
+ * URL pattern:
+ *   /preview?slug=about        → preview by slug
+ *
+ * Renders inside the (site) layout so it includes Navbar, Footer,
+ * custom cursor, etc. — exactly like the production page.
+ */
+
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState, Suspense } from "react";
+import type { Page } from "../../../lib/sanity/types";
+import { PageRenderer } from "../../../components/blocks";
+import { AssetProvider } from "../../../lib/contexts/AssetContext";
+
+function PreviewContent() {
+  const searchParams = useSearchParams();
+  const slug = searchParams.get("slug");
+
+  const [page, setPage] = useState<Page | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!slug) {
+      setError("Missing ?slug= parameter");
+      setLoading(false);
+      return;
+    }
+
+    const params = new URLSearchParams();
+    params.set("slug", slug);
+
+    fetch(`/api/admin/preview?${params}`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+        return res.json();
+      })
+      .then((data) => {
+        setPage(data.page);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [slug]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center">
+        <p className="font-mono text-sm text-neutral-400 animate-pulse">
+          Loading preview...
+        </p>
+      </div>
+    );
+  }
+
+  if (error || !page) {
+    return (
+      <div className="flex min-h-[50vh] items-center justify-center">
+        <div className="text-center">
+          <p className="font-mono text-sm text-[var(--admin-error)]">
+            {error || "Page not found"}
+          </p>
+          <p className="mt-2 font-mono text-xs text-neutral-400">
+            Make sure the page has been saved at least once.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <AssetProvider mode="admin">
+      <PageRenderer page={page} />
+    </AssetProvider>
+  );
+}
+
+export default function PreviewPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[50vh] items-center justify-center">
+          <p className="font-mono text-sm text-neutral-400 animate-pulse">
+            Loading preview...
+          </p>
+        </div>
+      }
+    >
+      <PreviewContent />
+    </Suspense>
+  );
+}

package/app/(site)/work/[slug]/loading.tsx

@@ -0,0 +1,23 @@
+/**
+ * Loading skeleton for project detail pages.
+ * Shown by Next.js while project content loads.
+ */
+export default function ProjectLoading() {
+  return (
+    <div className="min-h-screen bg-brand-dark" aria-busy="true" aria-label="Loading project">
+      {/* Hero placeholder */}
+      <div className="w-full h-[80vh] bg-neutral-900 animate-pulse" />
+      {/* Content placeholders */}
+      <div className="max-w-4xl mx-auto px-6 py-16 space-y-8">
+        <div className="h-6 w-1/3 bg-neutral-800 rounded animate-pulse" />
+        <div className="h-4 w-2/3 bg-neutral-800/60 rounded animate-pulse" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+          <div className="h-72 bg-neutral-800/40 rounded animate-pulse" />
+          <div className="h-72 bg-neutral-800/40 rounded animate-pulse" />
+        </div>
+        <div className="h-4 w-full bg-neutral-800/60 rounded animate-pulse" />
+        <div className="h-4 w-5/6 bg-neutral-800/60 rounded animate-pulse" />
+      </div>
+    </div>
+  );
+}

package/app/(site)/work/[slug]/page.tsx

@@ -0,0 +1,84 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { client } from "../../../../lib/sanity/client";
+import { publishedProjectBySlugQuery, allProjectSlugsQuery } from "../../../../lib/sanity/queries";
+import type { Page } from "../../../../lib/sanity/types";
+import { PageRenderer } from "../../../../components/blocks";
+import { getSiteConfig } from "../../../../lib/config";
+import { assetUrl } from "../../../../lib/assets";
+
+const cfg = getSiteConfig();
+
+// ISR: cache for 1 hour, revalidate in background on next request.
+// Replaces force-dynamic — reduces SSR invocations by ~95%.
+export const revalidate = 3600;
+
+interface ProjectPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+async function getProjectPage(slug: string): Promise<Page | null> {
+  try {
+    return await client.fetch<Page>(publishedProjectBySlugQuery, { slug });
+  } catch (error) {
+    console.error(`[Project] Failed to fetch project "${slug}":`, error);
+    return null;
+  }
+}
+
+export async function generateStaticParams() {
+  try {
+    const slugs = await client.fetch<string[]>(allProjectSlugsQuery);
+    return slugs.map((slug) => ({ slug }));
+  } catch {
+    return [];
+  }
+}
+
+export async function generateMetadata({ params }: ProjectPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const page = await getProjectPage(slug);
+
+  if (!page) return {};
+
+  const title = page.metadata?.seo_title || `${page.title} — ${cfg.name}`;
+  const description = page.metadata?.seo_description || cfg.defaults.metaDescription;
+  const ogImagePath = page.metadata?.og_image_path || page.thumbnail_path;
+  const ogImage = ogImagePath ? assetUrl(ogImagePath) : undefined;
+  const url = `${cfg.domain}/work/${slug}`;
+
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: {
+      title,
+      description,
+      url,
+      siteName: cfg.name,
+      type: "article",
+      ...(ogImage && { images: [{ url: ogImage }] }),
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      ...(ogImage && { images: [ogImage] }),
+    },
+  };
+}
+
+export default async function ProjectPage({ params }: ProjectPageProps) {
+  const { slug } = await params;
+  const page = await getProjectPage(slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  return (
+    <main className="min-h-screen">
+      <PageRenderer page={page} />
+    </main>
+  );
+}