@zorgo/next 1.0.0

package/dist/tree/scripts/prebuild.ts

@@ -0,0 +1,448 @@
+import { writeFileSync, mkdirSync } from "fs";
+import path from "path";
+import { loadEnvConfig } from "@next/env";
+import { Menu } from "@zorgo/next";
+import { buildRestaurantJsonLd } from "@zorgo/next/seo";
+import { z } from "zod";
+import { fetchSiteToken } from "../lib/zorgoSiteToken";
+
+loadEnvConfig(process.cwd());
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3000";
+
+/*
+todo list:
+1. bring color functions out into their own utility file
+2. clean up this file and move utilities elsewhere
+3. get rid of all references to the supabaseUrl. should be pulled thru by whichever environment is specified
+*/
+
+function writeWranglerToml() {
+    const name = process.env.ZORGO_PROJECT_NAME ?? "zorgo-site";
+    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "";
+    const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? siteUrl;
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL ?? "";
+
+    // custom_domain routes need a bare hostname; skip them if the site URL isn't
+    // a parseable absolute URL (e.g. a local/placeholder value).
+    let host: string | undefined;
+    try {
+        host = new URL(siteUrl).hostname;
+    } catch {
+        host = undefined;
+    }
+    const routes = host
+        ? `
+[[routes]]
+pattern = "${host}"
+custom_domain = true
+
+[[routes]]
+pattern = "www.${host}"
+custom_domain = true
+`
+        : "";
+
+    const toml = `# AUTO-GENERATED by scripts/prebuild.ts from .env — do not edit.
+name = "${name}"
+main = ".open-next/worker.js"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+
+[assets]
+directory = ".open-next/assets"
+binding = "ASSETS"
+
+[vars]
+NEXT_PUBLIC_SUPABASE_URL = "${supabaseUrl}"
+NEXT_PUBLIC_API_BASE_URL = "${apiBaseUrl}"
+NEXT_PUBLIC_SITE_URL = "${siteUrl}"
+NEXT_PUBLIC_BASE_URL = "${baseUrl}"
+
+[observability]
+enabled = true
+
+[observability.logs]
+enabled = true
+invocation_logs = true
+${routes}`;
+
+    writeFileSync(path.join(process.cwd(), "wrangler.toml"), toml);
+}
+
+interface FetchArgs {
+    franchiseId: number;
+    token: string;
+}
+
+const BrandingSchema = z
+    .object({
+        backgroundBase: z.string().default("#F5F5F5"),
+        primary: z.string().default("#3264FF"),
+        accent: z.string().default("#9696FF"),
+        fontFamily: z.string().default("Inter"), // Google Font family name
+    })
+    .prefault({});
+type Branding = z.infer<typeof BrandingSchema>;
+
+// schemas
+const FranchiseSchema = z
+    .object({
+        name: z.string().default(process.env.ZORGO_PROJECT_NAME ?? "Restaurant"),
+        site_url: z.string().optional(),
+    })
+    .prefault({});
+
+const HoursSchema = z.array(z.unknown()).prefault([]);
+
+const MenuSchema = z.object({
+    items: z.array(z.unknown()).default([]),
+    categories: z.array(z.unknown()).default([]),
+    components: z.array(z.unknown()).default([]),
+    rules: z.array(z.unknown()).default([]),
+});
+
+
+async function fetchData<T>(
+    endpoint: string,
+    token: string,
+    schema: z.ZodType<T>,
+): Promise<T> {
+    try {
+        const res = await fetch(`${API_BASE_URL}${endpoint}`, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+        const body = await res.json();
+        return schema.parse(body?.data ?? body);
+    } catch (err) {
+        console.error(`prebuild: ${endpoint} failed, using defaults:`, err);
+        return schema.parse(undefined);
+    }
+}
+
+// style stuff
+const FONT_ON_LIGHT = "#0a0a0a";
+const FONT_ON_DARK = "#f5f5f5";
+/** Neutral channel delta toward white (elevated) / black (recessed). */
+const BACKGROUND_SURFACE_DELTA = 15;
+/**
+ * Max warm/cool bias via R↔B trade (full strength on light bases).
+ * Scaled down by luminance so darker colors shift less.
+ */
+const BACKGROUND_TEMPERATURE_BIAS = 8;
+
+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 relativeLuminance({
+    r,
+    g,
+    b,
+}: {
+    r: number;
+    g: number;
+    b: number;
+}): number {
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+
+/** Temperature bias scaled by luminance; max on light bases, near-zero on dark. */
+function temperatureBiasFor({
+    r,
+    g,
+    b,
+}: {
+    r: number;
+    g: number;
+    b: number;
+}): number {
+    return Math.round(
+        BACKGROUND_TEMPERATURE_BIAS * relativeLuminance({ r, g, b }),
+    );
+}
+
+/** Off-black on light backgrounds, off-white on dark. */
+function deriveFontColor(background: string): string {
+    const rgb = parseHexRgb(background);
+    if (!rgb) return FONT_ON_LIGHT;
+    return relativeLuminance(rgb) > 0.5 ? FONT_ON_LIGHT : FONT_ON_DARK;
+}
+
+/** Lighter, slightly warmer surface (cards, raised panels) from backgroundBase. */
+function deriveElevatedBackground(background: string): string {
+    const rgb = parseHexRgb(background);
+    if (!rgb) return background;
+    const bias = temperatureBiasFor(rgb);
+    const warm = Math.round(bias / 4);
+    return toHex({
+        r: Math.min(255, rgb.r + BACKGROUND_SURFACE_DELTA + warm),
+        g: Math.min(255, rgb.g + BACKGROUND_SURFACE_DELTA),
+        b: Math.min(255, rgb.b + BACKGROUND_SURFACE_DELTA - bias),
+    });
+}
+
+/** Darker, slightly cooler surface (wells, inset areas) from backgroundBase. */
+function deriveRecessedBackground(background: string): string {
+    const rgb = parseHexRgb(background);
+    if (!rgb) return background;
+    const bias = temperatureBiasFor(rgb);
+    const cool = Math.round(bias / 4);
+    return toHex({
+        r: Math.max(0, rgb.r - BACKGROUND_SURFACE_DELTA - cool),
+        g: Math.max(0, rgb.g - BACKGROUND_SURFACE_DELTA),
+        b: Math.max(0, rgb.b - BACKGROUND_SURFACE_DELTA + bias),
+    });
+}
+
+// main prebuild function
+async function prebuild() {
+    console.log("running prebuild script...");
+
+    // regenerate deploy config from .env before any network work
+    writeWranglerToml();
+
+    const token = await fetchSiteToken();
+    if (!token) throw new Error("Missing or invalid ZORGO_SITE_SECRET env var");
+
+    const payload = JSON.parse(
+        Buffer.from(token.split(".")[1], "base64url").toString(),
+    );
+    const franchiseId = payload.franchise_ids[0];
+
+    // menu + franchise feed the JSON-LD; a menu failure must break the build
+    // loudly (it's imported for SSR), not silently ship a missing/empty menu.ts.
+    const [menuData] = await Promise.all([
+        menu({ franchiseId, token }),
+        logo({ franchiseId, token }).catch((err) =>
+            console.error("logo failed:", err),
+        ),
+        hours({ franchiseId, token }).catch((err) =>
+            console.error("hours failed:", err),
+        ),
+        styles({ franchiseId, token }).catch((err) =>
+            console.error("styles failed:", err),
+        ),
+    ]);
+
+    await jsonLd({ franchiseId, token }, menuData).catch((err) =>
+        console.error("jsonLd failed:", err),
+    );
+
+    console.log("prebuild script completed");
+}
+
+// fetches
+async function logo({ franchiseId, token }: FetchArgs) {
+    const logoResponse = await fetch(
+        `${API_BASE_URL}/franchise-info/logo/${franchiseId}`,
+        {
+            headers: { Authorization: `Bearer ${token}` },
+        },
+    );
+
+    // 404 (no logo) returns a JSON body — don't persist it as logo.png, or the
+    // icon/OG image would render an error blob instead of falling back.
+    if (!logoResponse.ok) return;
+
+    const arrayBuffer = await logoResponse.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    const outDir = path.join(process.cwd(), `public/images/`);
+
+    mkdirSync(outDir, { recursive: true });
+
+    writeFileSync(path.join(outDir, "logo.png"), buffer);
+    writeFileSync(path.join(outDir, "logo.jpg"), buffer);
+}
+
+async function menu({ franchiseId, token }: FetchArgs): Promise<Menu> {
+    const menuResponse = await fetch(
+        `${API_BASE_URL}/franchise-info/menu/${franchiseId}`,
+        {
+            headers: { Authorization: `Bearer ${token}` },
+        },
+    );
+
+    if (!menuResponse.ok) {
+        throw new Error(
+            `menu fetch failed ${menuResponse.status}: ${await menuResponse.text()}`,
+        );
+    }
+
+    const body = await menuResponse.json();
+    const menu = MenuSchema.parse(body?.data ?? {}) as Menu;
+
+    // A menu is core content: an empty one is a broken storefront, so keep
+    // failing the build loudly rather than shipping an empty menu.ts.
+    if (menu.items.length === 0) {
+        throw new Error(
+            `menu response has no items: ${JSON.stringify(body).slice(0, 200)}`,
+        );
+    }
+
+    const outDir = path.join(process.cwd(), `lib/generated/`);
+    mkdirSync(outDir, { recursive: true });
+
+    // typed module so consumers get Menu-checked imports instead of an
+    // untyped runtime fetch of menu.json.
+    writeFileSync(
+        path.join(outDir, "menu.ts"),
+        `// AUTO-GENERATED by scripts/prebuild.ts — do not edit.\n` +
+        `import type { Menu } from "@zorgo/next";\n\n` +
+        `export const menu: Menu = ${JSON.stringify(menu, null, 2)};\n`,
+    );
+
+    return menu;
+}
+
+// franchise row (name, site_url) -> Restaurant JSON-LD, written as a typed
+// module the layout imports and drops into <head>.
+async function jsonLd({ franchiseId, token }: FetchArgs, menu: Menu) {
+    const franchise = await fetchData(
+        `/franchise-info/franchise/${franchiseId}`,
+        token,
+        FranchiseSchema,
+    );
+    const url = franchise.site_url;
+
+    const data = buildRestaurantJsonLd(menu, {
+        name: franchise.name,
+        url,
+        image: url ? `${url}/images/logo.png` : undefined,
+    });
+
+    const outDir = path.join(process.cwd(), `lib/generated/`);
+    mkdirSync(outDir, { recursive: true });
+    writeFileSync(
+        path.join(outDir, "jsonld.ts"),
+        `// AUTO-GENERATED by scripts/prebuild.ts — do not edit.\n` +
+        `export const restaurantJsonLd = ${JSON.stringify(data, null, 2)};\n`,
+    );
+}
+
+async function hours({ franchiseId, token }: FetchArgs) {
+    await fetchData(`/franchise-info/hours/${franchiseId}`, token, HoursSchema);
+}
+
+async function styles({ franchiseId, token }: FetchArgs) {
+    const brand = await fetchData(
+        `/franchise-info/styles/${franchiseId}`,
+        token,
+        BrandingSchema,
+    );
+
+    // Same derived palette globals.css uses, persisted as JSON so the build-time
+    // icon/OG/manifest routes stay on brand (they readFileSync this).
+    const branding = {
+        ...brand,
+        backgroundElevated: deriveElevatedBackground(brand.backgroundBase),
+        backgroundRecessed: deriveRecessedBackground(brand.backgroundBase),
+        foreground: deriveFontColor(brand.backgroundBase),
+        primaryForeground: deriveFontColor(brand.primary),
+        accentForeground: deriveFontColor(brand.accent),
+    };
+
+    const stylesDir = path.join(process.cwd(), `public/styles/`);
+    mkdirSync(stylesDir, { recursive: true });
+    writeFileSync(
+        path.join(stylesDir, "styles.json"),
+        JSON.stringify(branding, null, 2),
+    );
+
+    writeFileSync(
+        path.join(process.cwd(), "app", "globals.css"),
+        buildGlobalsCss(brand),
+    );
+}
+
+// css write
+function buildGlobalsCss(branding: Branding): string {
+    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;
+  }
+}
+`;
+}
+
+
+prebuild().catch((err: Error) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/tree/tsconfig.json

@@ -0,0 +1,35 @@
+{
+	"compilerOptions": {
+	  "target": "ES2017",
+	  "lib": ["dom", "dom.iterable", "esnext"],
+	  "allowJs": true,
+	  "skipLibCheck": true,
+	  "strict": true,
+	  "noEmit": true,
+	  "esModuleInterop": true,
+	  "module": "esnext",
+	  "moduleResolution": "bundler",
+	  "resolveJsonModule": true,
+	  "isolatedModules": true,
+	  "jsx": "react-jsx",
+	  "incremental": true,
+	  "plugins": [
+		{
+		  "name": "next"
+		}
+	  ],
+	  "paths": {
+		"@/*": ["./src/*"]
+	  }
+	},
+	"include": [
+	  "next-env.d.ts",
+	  "**/*.ts",
+	  "**/*.tsx",
+	  ".next/types/**/*.ts",
+	  ".next/dev/types/**/*.ts",
+	  "**/*.mts"
+	],
+	"exclude": ["node_modules"]
+  }
+  

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@zorgo/next",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "zorgo": "./dist/cli.js"
+  },
+  "sideEffects": [
+    "./dist/index.mjs",
+    "./dist/index.js",
+    "./dist/components.mjs",
+    "./dist/components.js",
+    "./src/index.ts"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "name": "@zorgo/next",
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "next": "^14.x.x || ^15.x.x || ^16.x.x",
+    "lucide-react": "*",
+    "@stripe/react-stripe-js": "*"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.js",
+      "types": "./dist/components.d.ts"
+    },
+    "./slugs": {
+      "import": "./dist/slugs.mjs",
+      "require": "./dist/slugs.js",
+      "types": "./dist/slugs.d.ts"
+    },
+    "./seo": {
+      "import": "./dist/seo.mjs",
+      "require": "./dist/seo.js",
+      "types": "./dist/seo.d.ts"
+    },
+    "./cli": {
+      "import": "./dist/cli.mjs",
+      "require": "./dist/cli.js",
+      "types": "./dist/cli.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "immer": "^10.0.0",
+    "prompts": "^2.4.2",
+    "zustand": "^4.x.x"
+  },
+  "scripts": {
+    "build": "tsup && tsx scripts/obfuscate.ts",
+    "release": "node scripts/publish.mjs",
+    "dev": "echo \"No build step. Consumers transpile TS sources.\"",
+    "clean": "rm -rf dist",
+    "generate:test": "tsup && tsx --env-file=.env scripts/test-scaffold.ts",
+    "env:init": "tsx scripts/init-env.ts"
+  }
+}