@zorgo/next 1.1.7 → 2.0.0

package/dist/tree/app/menu/[slug]/page.tsx

@@ -1,57 +1,35 @@
 import type { Metadata } from "next";
-import { baseItemIdFromSlug, menuItemSlug } from "@zorgo/next/slugs";
-import { buildMenuItemJsonLd } from "@zorgo/next/seo";
+import {
+    ItemCustomizationView as ServerItemForm,
+    menuItemMetadata,
+    menuItemStaticParams,
+} from "@zorgo/next/item-page";
+import { baseItemIdFromSlug } from "@zorgo/next/slugs";
 import { menu } from "../../../lib/generated/menu";
-import ItemCustomizationClient from "./ItemCustomizationClient";
+import { ClientItemForm } from "../../components/ClientItemForm";
 
-// Single source of truth for resolving the item a slug points at — shared by
-// generateMetadata and the page so the lookup never drifts. Returns undefined
-// for an unknown slug; callers degrade gracefully (the page 404s downstream).
-function itemFromSlug(slug: string) {
-    const baseItemId = baseItemIdFromSlug(slug);
-    return menu.items.find((item) => item.base_item_id === baseItemId);
-}
+// The server half (hero image, JSON-LD), its metadata, and its static params all
+// live in @zorgo/next/item-page so a package bump updates every site at once.
+// The interactive half is this site's app/components/ClientItemForm.tsx — edit
+// that file to customize the form, not this one.
 
 // menu items are known at build time from the prebuilt menu — pre-render
 // every item page instead of rendering on-demand.
 export function generateStaticParams() {
-    return menu.items.map((item) => ({
-        slug: menuItemSlug(item.name, item.base_item_id),
-    }));
+    return menuItemStaticParams(menu);
 }
 
 // only slugs present in the prebuilt menu are valid routes; anything else 404s
 // instead of falling through to an on-demand render.
 export const dynamicParams = false;
 
-// per-item title/description/OG so each item ranks on its own long-tail terms
-// and shares with real context, instead of inheriting the generic root title.
-// title is just the item name; the root layout's title template wraps it as
-// `<name> | Brand`. metadataBase (set in the root layout) resolves OG URLs, so
-// nothing absolute is hardcoded here.
 export async function generateMetadata({
     params,
 }: {
     params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
     const { slug } = await params;
-    const item = itemFromSlug(slug);
-    if (!item) return {};
-
-    const description =
-        item.description ?? `Order ${item.name} online for pickup or delivery.`;
-
-    return {
-        title: item.name,
-        description,
-        openGraph: {
-            title: item.name,
-            description,
-            // Next's typed OpenGraph union has no "product"; "website" is the
-            // closest valid value for a standalone item page.
-            type: "website",
-        },
-    };
+    return menuItemMetadata(menu, slug);
 }
 
 export default async function ItemPage({
@@ -60,19 +38,9 @@ export default async function ItemPage({
     params: Promise<{ slug: string }>;
 }) {
     const { slug } = await params;
-    const item = itemFromSlug(slug);
-
     return (
-        <div className="p-8 md:p-16 max-w-4xl mx-auto">
-            {item && (
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{
-                        __html: JSON.stringify(buildMenuItemJsonLd(item)),
-                    }}
-                />
-            )}
-            <ItemCustomizationClient baseItemId={baseItemIdFromSlug(slug)} />
-        </div>
+        <ServerItemForm menu={menu} slug={slug}>
+            <ClientItemForm baseItemId={baseItemIdFromSlug(slug)} />
+        </ServerItemForm>
     );
 }

package/dist/tree/app/not-found.tsx

@@ -1,8 +1,22 @@
+import Link from "next/link";
+
+// min-h-full, not a viewport height: this renders inside the layout’s
+// <main>, between a real header and footer, so centring on the viewport would
+// push it below the fold.
 export default function NotFound() {
     return (
-        <div>
-            <h2>Not Found</h2>
-            <p>Could not find requested resource</p>
+        <div className="mx-auto flex min-h-full max-w-md flex-col items-center justify-center gap-4 px-4 py-24 text-center">
+            <p className="text-6xl font-black text-primary">404</p>
+            <h1 className="text-3xl font-bold">We can&apos;t find that page</h1>
+            <p className="opacity-70">
+                It may have moved, or the link that brought you here is out of date.
+            </p>
+            <Link
+                href="/"
+                className="mt-2 inline-flex min-h-11 items-center justify-center rounded-xl bg-primary px-6 py-3 font-semibold text-primary-foreground transition-colors duration-300 hover:bg-primary/80"
+            >
+                Back to the home page
+            </Link>
         </div>
     );
 }

package/dist/tree/app/privacy/page.tsx.gen.ts

@@ -1,15 +1,34 @@
 import type { ScaffoldOptions } from "../../../../types";
 
+// The policy text itself lives in @zorgo/next/components (src/components/client/legal.ts),
+// so updating the package updates every scaffolded site. Only the brand name and
+// the "last updated" date are baked in here.
 export default function generatePrivacyPage(opts: ScaffoldOptions) {
+	if (!opts.includePrivacyPage) return;
 
-    if (opts.includePrivacyPage) {
-        return `export default function PrivacyPage() {
-            return (
-                <div>
-                    <h1>Privacy Policy</h1>
-                </div>
-            )
-        }`;
-    }
+	const today = new Date().toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
 
+	return `import { LegalPage, privacyPolicyHtml } from "@zorgo/next/legal";
+
+const BRAND = ${JSON.stringify(opts.franchiseName)};
+
+export const metadata = {
+    title: "Privacy Policy",
+    description: \`How \${BRAND} handles your information.\`,
+};
+
+export default function PrivacyPage() {
+    return (
+        <LegalPage
+            title="Privacy Policy"
+            lastUpdated="${today}"
+            html={privacyPolicyHtml({ brand: BRAND, lastUpdated: "${today}" })}
+        />
+    );
+}
+`;
 }

package/dist/tree/app/terms/page.tsx.gen.ts

@@ -1,16 +1,32 @@
 import type { ScaffoldOptions } from "../../../../types";
 
-// add bullshit tos here
+// See privacy/page.tsx.gen.ts — the terms text is shipped by the package.
 export default function generateTermsPage(opts: ScaffoldOptions) {
+	if (!opts.includeTermsPage) return;
 
-    if (opts.includeTermsPage) {
-        return `export default function TermsPage() {
-            return (
-                <div>
-                    <h1>Terms of Service</h1>
-                </div>
-            )
-        }`;
-    }
+	const today = new Date().toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
 
+	return `import { LegalPage, termsOfUseHtml } from "@zorgo/next/legal";
+
+const BRAND = ${JSON.stringify(opts.franchiseName)};
+
+export const metadata = {
+    title: "Terms of Service",
+    description: \`Terms for ordering online from \${BRAND}.\`,
+};
+
+export default function TermsPage() {
+    return (
+        <LegalPage
+            title="Online Ordering Terms of Use"
+            lastUpdated="${today}"
+            html={termsOfUseHtml({ brand: BRAND, lastUpdated: "${today}" })}
+        />
+    );
+}
+`;
 }

package/dist/tree/gitignore

@@ -39,6 +39,12 @@ next-env.d.ts
 
 /.wrangler/
 
-# generated from .env by scripts/prebuild.ts
+# generated from .env / franchise_branding by scripts/prebuild.ts
 /wrangler.toml
 /lib/generated/
+/app/generated/
+/public/styles/
+/public/images/items/
+/public/images/logo.*
+# AVIF ladders encoded from assets/images/ — the originals are what's committed
+/public/images/**/*.avif

package/dist/tree/image-loader.ts

@@ -0,0 +1,4 @@
+// next.config.ts points images.loaderFile here. The implementation lives in the
+// package so a @zorgo/next bump can change the variant ladder without every site
+// editing this file; Next only requires that it default-export a loader.
+export { default } from "@zorgo/next/images";

package/dist/tree/next.config.ts

@@ -1,5 +1,6 @@
 import type { NextConfig } from "next";
 import path from "path";
+import { IMAGE_WIDTHS } from "@zorgo/next/images";
 
 const monorepoRoot = path.resolve(__dirname, "../../..");
 
@@ -9,6 +10,18 @@ const nextConfig: NextConfig = {
 		root: monorepoRoot,
 	},
 	transpilePackages: ["@zorgo", "@zorgo-website-core"],
+	// Menu item images and the site's own photos in assets/images/ are both
+	// resized to a fixed AVIF ladder at prebuild, so nothing needs a runtime
+	// optimizer (and no Supabase host in remotePatterns — a custom loader
+	// bypasses that check entirely).
+	images: {
+		loader: "custom",
+		loaderFile: "./image-loader.ts",
+		// Must mirror the rungs prebuild emits, or Next advertises srcset widths no
+		// variant has and the browser picks a candidate narrower than it asked for.
+		deviceSizes: [...IMAGE_WIDTHS],
+		imageSizes: [],
+	},
 };
 
 export default nextConfig;

package/dist/tree/open-next.config.ts

@@ -1,4 +1,11 @@
 import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+import staticAssetsIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache";
 
 export default defineCloudflareConfig({
+	// Without this the cache defaults to "dummy": every prerendered page is a
+	// miss, and `dynamicParams = false` turns that miss into a 404. The menu is
+	// rebuilt from the prebuilt data on every deploy, so a read-only cache
+	// served from Workers assets is enough — swap to r2IncrementalCache if a
+	// site ever needs ISR.
+	incrementalCache: staticAssetsIncrementalCache,
 });

package/dist/tree/package.json.gen.ts

@@ -12,8 +12,14 @@ export default function generatePackageJson(opts: ScaffoldOptions): string {
 				"dev:no-prebuild": "next dev",
 				"prebuild": "tsx scripts/prebuild.ts",
 				"build": "tsx scripts/prebuild.ts && next build",
-				"cloudflare:deploy": "tsx scripts/prebuild.ts && wrangler deploy",
-				"preview": "tsx scripts/prebuild.ts && wrangler dev",
+				"cloudflare:deploy":
+					"tsx scripts/prebuild.ts && opennextjs-cloudflare build && wrangler deploy",
+				"cloudflare:deploy:staging":
+					"tsx scripts/prebuild.ts && opennextjs-cloudflare build && wrangler deploy --env staging",
+				"preview":
+					"tsx scripts/prebuild.ts && opennextjs-cloudflare build && wrangler dev",
+				"preview:staging":
+					"tsx scripts/prebuild.ts && opennextjs-cloudflare build && wrangler dev --env staging",
 			},
 			dependencies: PINNED_VERSIONS,
 			devDependencies: DEV_DEPENDENCIES,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zorgo/next",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
@@ -54,6 +54,21 @@
       "require": "./dist/slugs.js",
       "types": "./dist/slugs.d.ts"
     },
+    "./images": {
+      "import": "./dist/images.mjs",
+      "require": "./dist/images.js",
+      "types": "./dist/images.d.ts"
+    },
+    "./legal": {
+      "import": "./dist/legal.mjs",
+      "require": "./dist/legal.js",
+      "types": "./dist/legal.d.ts"
+    },
+    "./item-page": {
+      "import": "./dist/item-page.mjs",
+      "require": "./dist/item-page.js",
+      "types": "./dist/item-page.d.ts"
+    },
     "./seo": {
       "import": "./dist/seo.mjs",
       "require": "./dist/seo.js",
@@ -77,7 +92,7 @@
     "zustand": "^4.x.x"
   },
   "scripts": {
-    "build": "tsup && tsx scripts/obfuscate.ts",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup && tsx scripts/obfuscate.ts",
     "release": "node scripts/publish.mjs",
     "ship": "changeset && changeset version && node scripts/publish.mjs",
     "dev": "echo \"No build step. Consumers transpile TS sources.\"",

package/dist/tree/app/globals.css.gen.ts

@@ -1,123 +0,0 @@
-import type { ScaffoldOptions } from "../../../types";
-
-/** Keep in sync with scripts/prebuild.ts HARDCODED_BRANDING until DB branding lands. */
-const HARDCODED_BRANDING = {
-	backgroundBase: "#F5F5F5",
-	primary: "#3264FF",
-	accent: "#9664FF",
-	fontFamily: "Inter",
-};
-
-const FONT_ON_LIGHT = "#0a0a0a";
-const FONT_ON_DARK = "#f5f5f5";
-/** Channel delta toward white (elevated) / black (recessed). */
-const BACKGROUND_SURFACE_DELTA = 15;
-
-function parseHexRgb(
-	background: string,
-): { r: number; g: number; b: number } | null {
-	const hex = background.trim().replace(/^#/, "");
-	const full =
-		hex.length === 3
-			? hex
-					.split("")
-					.map((c) => c + c)
-					.join("")
-			: hex;
-	if (full.length !== 6 || Number.isNaN(Number.parseInt(full, 16))) {
-		return null;
-	}
-	return {
-		r: Number.parseInt(full.slice(0, 2), 16),
-		g: Number.parseInt(full.slice(2, 4), 16),
-		b: Number.parseInt(full.slice(4, 6), 16),
-	};
-}
-
-function toHex({ r, g, b }: { r: number; g: number; b: number }): string {
-	return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
-}
-
-function deriveFontColor(background: string): string {
-	const rgb = parseHexRgb(background);
-	if (!rgb) return FONT_ON_LIGHT;
-	const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-	return luminance > 0.5 ? FONT_ON_LIGHT : FONT_ON_DARK;
-}
-
-function deriveElevatedBackground(background: string): string {
-	const rgb = parseHexRgb(background);
-	if (!rgb) return background;
-	return toHex({
-		r: Math.min(255, rgb.r + BACKGROUND_SURFACE_DELTA),
-		g: Math.min(255, rgb.g + BACKGROUND_SURFACE_DELTA),
-		b: Math.min(255, rgb.b + BACKGROUND_SURFACE_DELTA),
-	});
-}
-
-function deriveRecessedBackground(background: string): string {
-	const rgb = parseHexRgb(background);
-	if (!rgb) return background;
-	return toHex({
-		r: Math.max(0, rgb.r - BACKGROUND_SURFACE_DELTA),
-		g: Math.max(0, rgb.g - BACKGROUND_SURFACE_DELTA),
-		b: Math.max(0, rgb.b - BACKGROUND_SURFACE_DELTA),
-	});
-}
-
-export default function generateGlobalsCss(_opts: ScaffoldOptions): string {
-	const branding = HARDCODED_BRANDING;
-	const fontFamilyParam = branding.fontFamily.replace(/ /g, "+");
-	const foreground = deriveFontColor(branding.backgroundBase);
-	const primaryForeground = deriveFontColor(branding.primary);
-	const accentForeground = deriveFontColor(branding.accent);
-	const backgroundElevated = deriveElevatedBackground(branding.backgroundBase);
-	const backgroundRecessed = deriveRecessedBackground(branding.backgroundBase);
-
-	return `@import url("https://fonts.googleapis.com/css2?family=${fontFamilyParam}:wght@400;700&display=swap");
-@import "tailwindcss";
-/* Tailwind v4 skips node_modules; @zorgo/next ships un-obfuscated components so
-   their class names are scannable here. */
-@source "../node_modules/@zorgo/next/dist/components.mjs";
-
-:root {
-  --background: ${branding.backgroundBase};
-  --background-elevated: ${backgroundElevated};
-  --background-recessed: ${backgroundRecessed};
-  --foreground: ${foreground};
-  --primary: ${branding.primary};
-  --primary-foreground: ${primaryForeground};
-  --accent: ${branding.accent};
-  --accent-foreground: ${accentForeground};
-  --font-sans: "${branding.fontFamily}", sans-serif;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-background-elevated: var(--background-elevated);
-  --color-background-recessed: var(--background-recessed);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --font-sans: var(--font-sans);
-}
-
-@layer base {
-  button,
-  [type="button"],
-  [type="submit"],
-  [type="reset"] {
-    cursor: pointer;
-  }
-
-  button:disabled,
-  [type="button"]:disabled,
-  [type="submit"]:disabled,
-  [type="reset"]:disabled {
-    cursor: not-allowed;
-  }
-}
-`;
-}

package/dist/tree/app/menu/[slug]/ItemCustomizationClient.tsx

@@ -1,18 +0,0 @@
-"use client";
-import { useRouter } from "next/navigation";
-import { ItemCustomizationForm } from "@zorgo/next/components";
-
-export default function ItemCustomizationClient({
-    baseItemId,
-}: {
-    baseItemId: number;
-}) {
-    const router = useRouter();
-
-    return (
-        <ItemCustomizationForm
-            baseItemId={baseItemId}
-            onSubmitSuccess={() => router.push("/menu")}
-        />
-    );
-}