@zorgo/next 1.0.0

package/dist/tree/app/components/ModalHost.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useModal } from "@zorgo/next";
+import { MODAL_COMPONENTS } from "./ModalRegistry";
+
+// This is your modal shell — style it however you like (it uses the generated
+// brand tokens by default). It renders whatever modal is on top of the stack,
+// looking the component up in ./ModalRegistry. Open modals from anywhere with
+// `useModal().open("YOUR_MODAL", props)`.
+export default function ModalHost() {
+    const { current, isOpen, close } = useModal();
+
+    // enter transition: mount at 0, flip to 1 on the next frame
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        if (!isOpen) return setShown(false);
+        const id = requestAnimationFrame(() => setShown(true));
+        return () => cancelAnimationFrame(id);
+    }, [isOpen]);
+
+    // Escape closes
+    useEffect(() => {
+        if (!isOpen) return;
+        const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [isOpen, close]);
+
+    if (!isOpen || !current) return null;
+
+    const Modal = MODAL_COMPONENTS[current.type];
+    if (!Modal) {
+        console.warn(`[ModalHost] no component registered for "${current.type}"`);
+        return null;
+    }
+
+    return (
+        <div
+            className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${
+                shown ? "opacity-100" : "opacity-0"
+            }`}
+        >
+            <div className="absolute inset-0 bg-black/50" onClick={close} />
+            <div
+                className={`relative max-h-[90vh] w-full max-w-2xl overflow-auto rounded-2xl border-2 border-foreground/10 bg-background-elevated p-6 text-foreground shadow-lg transition-transform duration-200 ${
+                    shown ? "scale-100" : "scale-95"
+                }`}
+            >
+                <Modal {...(current.props as object)} />
+            </div>
+        </div>
+    );
+}
+// ponytail: no leave animation — unmount is instant. Add an exit state if the
+// snap-close bothers you.

package/dist/tree/app/components/ModalRegistry.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useLocation, useModal } from "@zorgo/next";
+import { FindLocation, ItemCustomizationForm } from "@zorgo/next/components";
+import type { Location, OrderItem } from "@zorgo/universal/interfaces";
+
+// Every modal your app can open lives in this map, keyed by the string you pass
+// to `useModal().open(type, props)`. Add a component, give it a key, done.
+export const MODAL_COMPONENTS: Record<string, React.ComponentType<any>> = {
+    EXAMPLE_MODAL: ExampleModal,
+    CONFIRM_MODAL: ConfirmModal,
+    FIND_LOCATION_MODAL: FindLocationModal,
+    EDIT_ITEM_MODAL: EditItemModal,
+};
+
+// --- example modals (delete these once you have your own) ---------------------
+
+// Open with: useModal().open("EXAMPLE_MODAL", { title: "Hi" })
+function ExampleModal({ title }: { title?: string }) {
+    const { close } = useModal();
+    return (
+        <div className="flex flex-col gap-4">
+            <h2 className="text-xl font-semibold">
+                {title ?? "Example modal"}
+            </h2>
+            <p className="opacity-75">
+                This modal came from ModalRegistry and is rendered by ModalHost.
+            </p>
+            <button
+                onClick={close}
+                className="self-end rounded-lg bg-primary px-4 p-2 text-primary-foreground"
+            >
+                Got it
+            </button>
+        </div>
+    );
+}
+
+// Open with: useModal().open("CONFIRM_MODAL", { message, onConfirm })
+function ConfirmModal({
+    message,
+    onConfirm,
+}: {
+    message: string;
+    onConfirm: () => void;
+}) {
+    const { close } = useModal();
+    return (
+        <div className="flex flex-col gap-4">
+            <p>{message}</p>
+            <div className="flex justify-end gap-2">
+                <button
+                    onClick={close}
+                    className="rounded-lg bg-foreground/10 px-4 p-2"
+                >
+                    Cancel
+                </button>
+                <button
+                    onClick={() => {
+                        onConfirm();
+                        close();
+                    }}
+                    className="rounded-lg bg-primary px-4 p-2 text-primary-foreground"
+                >
+                    Confirm
+                </button>
+            </div>
+        </div>
+    );
+}
+
+// Opened from the cart's pencil button to re-customize an item in place.
+function EditItemModal({
+    baseItemId,
+    seed,
+    editIndex,
+}: {
+    baseItemId: number;
+    seed: OrderItem;
+    editIndex: number;
+}) {
+    const { close } = useModal();
+    return (
+        <ItemCustomizationForm
+            baseItemId={baseItemId}
+            seed={seed}
+            editIndex={editIndex}
+            onSubmitSuccess={close}
+        />
+    );
+}
+
+// Open with: useModal().open("FIND_LOCATION_MODAL")
+function FindLocationModal() {
+    const { close } = useModal();
+    const { availableLocations, currentLocation, setLocation } = useLocation();
+
+    function handleSelect(location: Location) {
+        setLocation(location);
+        close();
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <h2 className="text-xl font-semibold">Select a location</h2>
+            <FindLocation
+                locations={availableLocations}
+                initialSelected={currentLocation}
+                onSelect={handleSelect}
+            />
+        </div>
+    );
+}

package/dist/tree/app/components/TestCard.tsx

@@ -0,0 +1,35 @@
+export default function TestCard() {
+    return (
+        <div className="w-[400px] p-4 m-4 flex flex-col gap-8 rounded-lg border-foreground/[10%] border-[2px] bg-background-elevated shadow-sm">
+            <div className="flex flex-col gap-2">
+                <h1 className="text-xl font-semibold">
+                    This is a test component
+                </h1>
+                <p className="opacity-75">
+                    This component uses generated tailwind colors! Lorem ipsum
+                    dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+                </p>
+            </div>
+
+            <div className="bg-background rounded-lg p-4">
+                <p className="opacity-75">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Quisquam, quos.
+                </p>
+            </div>
+
+            <div className="flex flex-row gap-2 justify-end">
+                <button className="bg-foreground text-background rounded-lg p-2 px-4">
+                    I'm a button
+                </button>
+                <button className="bg-primary text-primary-foreground rounded-lg p-2 px-4">
+                    So am I
+                </button>
+
+                <button className="bg-accent text-accent-foreground rounded-lg p-2 px-4">
+                    Me too
+                </button>
+            </div>
+        </div>
+    );
+}

package/dist/tree/app/components/index.ts

@@ -0,0 +1,3 @@
+export { default as Header } from "./Header";
+export { default as Footer } from "./Footer";
+export { default as ModalHost } from "./ModalHost";

package/dist/tree/app/error.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function Error({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+    return (
+        <div>
+            <h2>Something went wrong</h2>
+            <button onClick={() => reset()}>Try again</button>
+        </div>
+    );
+}

package/dist/tree/app/global-error.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+export default function GlobalError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+    return (
+        <html>
+            <body>
+                <h2>Something went wrong</h2>
+                <button onClick={() => reset()}>Try again</button>
+            </body>
+        </html>
+    );
+}

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

@@ -0,0 +1,123 @@
+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/icon.tsx.gen.ts

@@ -0,0 +1,87 @@
+import type { ScaffoldOptions } from "../../../types";
+
+export default function generateIcon(opts: ScaffoldOptions): string {
+	const letter = opts.projectName.charAt(0).toUpperCase();
+
+	return `import { ImageResponse } from "next/og";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+// One PNG per size: 32 for the browser tab/favicon, 192 & 512 for the web
+// manifest (PWA install). generateImageMetadata gives each a stable /icon/<id> URL
+// the manifest references, and all three are prerendered at build.
+export function generateImageMetadata() {
+	return [
+		{ id: "32", size: { width: 32, height: 32 }, contentType: "image/png" },
+		{ id: "192", size: { width: 192, height: 192 }, contentType: "image/png" },
+		{ id: "512", size: { width: 512, height: 512 }, contentType: "image/png" },
+	];
+}
+
+// Brand palette prebuild drops at public/styles/styles.json. Neutral fallback if
+// it's missing so the icon still renders. primary is the badge fill.
+function loadTheme() {
+	try {
+		return JSON.parse(
+			readFileSync(join(process.cwd(), "public/styles/styles.json"), "utf8"),
+		);
+	} catch {
+		return null;
+	}
+}
+
+// Prebuild drops the franchise logo at public/images/logo.png. Use it as the
+// icon when it's a real image; the magic-byte sniff both picks the data-URI mime
+// and rejects a 404 JSON body (no logo) so we cleanly fall back to the letter.
+function loadLogo(): string | null {
+	try {
+		const buf = readFileSync(join(process.cwd(), "public/images/logo.png"));
+		const mime =
+			buf[0] === 0x89 && buf[1] === 0x50
+				? "image/png"
+				: buf[0] === 0xff && buf[1] === 0xd8
+					? "image/jpeg"
+					: null;
+		if (!mime) return null;
+		return \`data:\${mime};base64,\${buf.toString("base64")}\`;
+	} catch {
+		return null;
+	}
+}
+
+export default async function Icon({ id }: { id: Promise<string> }) {
+	const dimension = Number(await id);
+	const logo = loadLogo();
+	const theme = loadTheme();
+	const background = theme?.primary ?? "#171717";
+	const foreground = theme?.primaryForeground ?? "#ffffff";
+	return new ImageResponse(
+		logo ? (
+			<img
+				src={logo}
+				width={dimension}
+				height={dimension}
+				style={{ objectFit: "contain" }}
+			/>
+		) : (
+			<div
+				style={{
+					width: "100%",
+					height: "100%",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					background,
+					color: foreground,
+					fontSize: dimension * 0.625,
+					fontWeight: 700,
+				}}
+			>
+				${letter}
+			</div>
+		),
+		{ width: dimension, height: dimension },
+	);
+}
+`;
+}

package/dist/tree/app/layout.tsx.gen.ts

@@ -0,0 +1,55 @@
+import type { ScaffoldOptions } from "../../../types";
+
+export default function generateLayout(opts: ScaffoldOptions): string {
+	return `
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+import { Header, Footer, ModalHost } from "./components";
+import { CookieConsent } from "@zorgo/next/components";
+import { restaurantJsonLd } from "../lib/generated/jsonld";
+export const metadata: Metadata = {
+	// resolves relative URLs (canonicals, the auto-injected opengraph-image) to absolute
+	metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000"),
+	title: {
+		default: ${JSON.stringify(opts.projectName)},
+		template: ${JSON.stringify(`%s | ${opts.projectName}`)},
+	},
+	description: ${JSON.stringify(`Order online from ${opts.projectName}.`)},
+	openGraph: {
+		type: "website",
+		siteName: ${JSON.stringify(opts.projectName)},
+		locale: "en_US",
+	},
+	twitter: {
+		card: "summary_large_image",
+	},
+};
+
+export const viewport: Viewport = {
+	width: "device-width",
+	initialScale: 1,
+};
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<head>
+				<script
+					type="application/ld+json"
+					dangerouslySetInnerHTML={{ __html: JSON.stringify(restaurantJsonLd) }}
+				/>
+			</head>
+			<body className="min-h-screen flex flex-col bg-background text-foreground">
+				<Header />
+				<main className="flex-1">
+					{children}
+				</main>
+				<Footer />
+				<ModalHost />
+				<CookieConsent />
+			</body>
+		</html>
+	)}
+
+`;
+}

package/dist/tree/app/locations/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { useLocation } from "@zorgo/next";
+import type { Location } from "@zorgo/universal/interfaces";
+import { FindLocation } from "@zorgo/next/components";
+
+export default function LocationsPage() {
+    const router = useRouter();
+    const { availableLocations, currentLocation, setLocation } = useLocation();
+
+    function handleSelect(location: Location) {
+        setLocation(location);
+        router.push("/menu");
+    }
+
+    return (
+        <div className="p-8 md:p-16">
+            <div className="max-w-2xl mx-auto w-full">
+                <h1 className="text-4xl font-extrabold text-primary text-center mb-8">
+                    Locations
+                </h1>
+                <FindLocation
+                    locations={availableLocations}
+                    initialSelected={currentLocation}
+                    onSelect={handleSelect}
+                />
+            </div>
+        </div>
+    );
+}

package/dist/tree/app/manifest.ts.gen.ts

@@ -0,0 +1,39 @@
+import type { ScaffoldOptions } from "../../../types";
+
+export default function generateManifest(opts: ScaffoldOptions): string {
+	const name = opts.projectName;
+
+	return `import type { MetadataRoute } from "next";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+// Brand palette prebuild drops at public/styles/styles.json. Neutral fallback if
+// it's missing.
+function loadTheme() {
+	try {
+		return JSON.parse(
+			readFileSync(join(process.cwd(), "public/styles/styles.json"), "utf8"),
+		);
+	} catch {
+		return null;
+	}
+}
+
+export default function manifest(): MetadataRoute.Manifest {
+	const theme = loadTheme();
+	return {
+		name: ${JSON.stringify(name)},
+		short_name: ${JSON.stringify(name)},
+		description: ${JSON.stringify(`Order online from ${name}.`)},
+		start_url: "/",
+		display: "standalone",
+		background_color: theme?.backgroundBase ?? "#ffffff",
+		theme_color: theme?.primary ?? "#171717",
+		icons: [
+			{ src: "/icon/192", sizes: "192x192", type: "image/png" },
+			{ src: "/icon/512", sizes: "512x512", type: "image/png" },
+		],
+	};
+}
+`;
+}

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

@@ -0,0 +1,18 @@
+"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")}
+        />
+    );
+}

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

@@ -0,0 +1,78 @@
+import type { Metadata } from "next";
+import { baseItemIdFromSlug, menuItemSlug } from "@zorgo/next/slugs";
+import { buildMenuItemJsonLd } from "@zorgo/next/seo";
+import { menu } from "../../../lib/generated/menu";
+import ItemCustomizationClient from "./ItemCustomizationClient";
+
+// 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);
+}
+
+// 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),
+    }));
+}
+
+// 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",
+        },
+    };
+}
+
+export default async function ItemPage({
+    params,
+}: {
+    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>
+    );
+}