zudoku 0.0.0-ed94abf → 0.0.0-edd80c1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-ed94abf",
+  "version": "0.0.0-edd80c1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -17,6 +17,7 @@
     "cli.js",
     "src/lib",
     "src/app",
+    "src/shiki",
     "client.d.ts"
   ],
   "bin": {
@@ -110,14 +111,14 @@
       "require": "./dist/vite/plugin.js",
       "import": "./dist/vite/plugin.js"
     },
-    "./tailwind": {
-      "require": "./dist/app/tailwind.js",
-      "import": "./dist/app/tailwind.js"
-    },
     "./main.css": {
       "require": "./src/app/main.css",
       "import": "./src/app/main.css"
     },
+    "./shiki/*": {
+      "require": "./src/shiki/*.js",
+      "import": "./src/shiki/*.js"
+    },
     "./app/*": {
       "import": "./src/app/*"
     },
@@ -127,7 +128,7 @@
     }
   },
   "dependencies": {
-    "@apidevtools/json-schema-ref-parser": "12.0.1",
+    "@apidevtools/json-schema-ref-parser": "12.0.2",
     "@envelop/core": "5.2.3",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hookform/resolvers": "4.1.3",
@@ -135,51 +136,57 @@
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "4.6.0",
-    "@radix-ui/react-accordion": "1.2.4",
-    "@radix-ui/react-alert-dialog": "1.1.7",
-    "@radix-ui/react-aspect-ratio": "1.1.3",
-    "@radix-ui/react-checkbox": "1.1.5",
-    "@radix-ui/react-collapsible": "1.1.4",
-    "@radix-ui/react-dialog": "1.1.7",
-    "@radix-ui/react-dropdown-menu": "2.1.7",
-    "@radix-ui/react-hover-card": "1.1.7",
-    "@radix-ui/react-label": "2.1.3",
-    "@radix-ui/react-popover": "1.1.7",
-    "@radix-ui/react-progress": "1.1.3",
-    "@radix-ui/react-radio-group": "1.2.4",
-    "@radix-ui/react-scroll-area": "1.2.4",
-    "@radix-ui/react-select": "2.1.7",
-    "@radix-ui/react-slider": "1.2.4",
-    "@radix-ui/react-slot": "1.2.0",
-    "@radix-ui/react-switch": "1.1.4",
-    "@radix-ui/react-tabs": "1.1.4",
-    "@radix-ui/react-toggle": "1.1.3",
-    "@radix-ui/react-toggle-group": "1.1.3",
-    "@radix-ui/react-tooltip": "1.2.0",
-    "@radix-ui/react-visually-hidden": "1.1.3",
-    "@scalar/openapi-parser": "0.10.14",
+    "@radix-ui/react-accordion": "1.2.11",
+    "@radix-ui/react-alert-dialog": "1.1.14",
+    "@radix-ui/react-aspect-ratio": "1.1.7",
+    "@radix-ui/react-checkbox": "1.3.2",
+    "@radix-ui/react-collapsible": "1.1.11",
+    "@radix-ui/react-dialog": "1.1.14",
+    "@radix-ui/react-dropdown-menu": "2.1.15",
+    "@radix-ui/react-hover-card": "1.1.14",
+    "@radix-ui/react-label": "2.1.7",
+    "@radix-ui/react-popover": "1.1.14",
+    "@radix-ui/react-progress": "1.1.7",
+    "@radix-ui/react-radio-group": "1.3.7",
+    "@radix-ui/react-scroll-area": "1.2.9",
+    "@radix-ui/react-select": "2.2.5",
+    "@radix-ui/react-slider": "1.3.5",
+    "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-switch": "1.2.5",
+    "@radix-ui/react-tabs": "1.1.12",
+    "@radix-ui/react-toggle": "1.1.9",
+    "@radix-ui/react-toggle-group": "1.1.10",
+    "@radix-ui/react-tooltip": "1.2.7",
+    "@radix-ui/react-visually-hidden": "1.2.3",
+    "@scalar/openapi-parser": "0.10.17",
     "@sentry/node": "9.12.0",
+    "@shikijs/langs": "3.2.2",
+    "@shikijs/rehype": "3.2.2",
+    "@shikijs/themes": "3.2.2",
+    "@shikijs/transformers": "3.3.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
     "@tailwindcss/typography": "0.5.16",
+    "@tailwindcss/vite": "4.1.7",
     "@tanem/react-nprogress": "5.0.55",
     "@tanstack/react-query": "5.74.3",
     "@types/react": "19.1.1",
     "@types/react-dom": "19.1.2",
-    "@vitejs/plugin-react": "4.3.4",
+    "@vitejs/plugin-react": "4.4.1",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
-    "autoprefixer": "10.4.21",
+    "allof-merge": "0.6.6",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
+    "colorjs.io": "0.5.2",
     "devlop": "^1.1.0",
     "dotenv": "16.5.0",
     "embla-carousel-react": "8.6.0",
-    "esm-loader-css": "^1.0.3",
     "estree-util-value-to-estree": "3.3.3",
-    "express": "4.21.2",
+    "express": "5.1.0",
     "fast-equals": "5.2.2",
+    "framer-motion": "^12.12.2",
     "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
@@ -201,14 +208,12 @@
     "pagefind": "1.4.0-alpha.1",
     "picocolors": "1.1.1",
     "piscina": "5.0.0-alpha.2",
-    "postcss": "8.5.3",
-    "posthog-node": "4.11.3",
-    "prism-react-renderer": "2.4.1",
-    "prismjs": "1.30.0",
+    "posthog-node": "4.17.1",
     "react-error-boundary": "5.0.0",
     "react-hook-form": "7.55.0",
     "react-is": "19.1.0",
-    "react-router": "7.5.0",
+    "react-markdown": "10.1.0",
+    "react-router": "7.5.2",
     "rehype-mdx-import-media": "1.2.0",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
@@ -220,29 +225,32 @@
     "remark-mdx-frontmatter": "5.1.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "rollup": "4.40.0",
+    "rollup": "4.40.1",
     "semver": "7.7.1",
+    "shiki": "3.3.0",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "2.6.0",
-    "tailwindcss": "3.4.17",
+    "tailwind-merge": "3.3.0",
+    "tailwindcss": "4.1.7",
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
     "urql": "4.2.1",
     "vaul": "1.1.2",
     "vfile": "6.0.3",
-    "vite": "6.2.6",
+    "vite": "6.3.5",
     "yaml": "2.7.1",
     "yargs": "17.7.2",
     "zod": "3.24.2",
-    "zod-validation-error": "3.4.0",
+    "zod-validation-error": "3.4.1",
     "zustand": "5.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.5",
     "@graphql-codegen/client-preset": "4.8.0",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@types/estree": "1.0.7",
     "@types/express": "5.0.1",
@@ -258,27 +266,29 @@
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.1.1",
-    "happy-dom": "17.4.4",
+    "esbuild": "0.25.1",
+    "happy-dom": "17.5.6",
     "mdast-util-mdx": "3.0.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "rollup-plugin-visualizer": "5.14.0",
     "typescript": "5.8.3",
-    "vitest": "3.1.1"
+    "vitest": "3.1.4"
   },
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "^5.60.0",
+    "@clerk/clerk-js": "^5.63.1",
     "@sentry/react": "^9.12.0",
     "@supabase/supabase-js": "^2.49.4"
   },
   "scripts": {
     "build": "tsc --project tsconfig.app.json",
+    "build:dev": "esbuild './src/**/*.ts' --format=esm --platform=node --target=node22 --outdir=dist --splitting --log-level=warning",
     "build:vite": "vite build",
-    "generate:icon-types": "node scripts/generate-icon-types.js",
+    "generate:types": "node scripts/generate-types.js",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html && cp standalone/zudoku.css standalone/style.css",
     "clean": "tsc --build --clean",

package/src/app/ZuploBuildConfig.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+export const EntitlementsSchema = z.object({
+  devPortalZuploBranding: z.boolean(),
+  numberOfProjects: z.number(),
+  numberOfUsers: z.number(),
+  egressGbPerMonth: z.number(),
+  requestsPerMonth: z.number(),
+  numberOfApiKeys: z.number(),
+  customDomains: z.number(),
+  advancedAnalyticsEnabled: z.boolean(),
+  devPortalAnalyticsEnabled: z.boolean(),
+  premiumSupport: z.boolean(),
+  emergencyPhoneSupport: z.boolean(),
+  rbacEnabled: z.boolean(),
+  onPremEnabled: z.boolean(),
+  largeBuildRunners: z.boolean(),
+});
+
+export const BuildConfigSchema = z.object({
+  entitlements: EntitlementsSchema,
+  environmentType: z.string(),
+  deploymentName: z.string(),
+  deploymentUrl: z.string(),
+  projectId: z.string(),
+  projectType: z.string(),
+  sourceType: z.string(),
+  accountName: z.string(),
+  projectName: z.string(),
+});
+
+export type BuildConfig = z.infer<typeof BuildConfigSchema>;
+export type Entitlements = z.infer<typeof EntitlementsSchema>;

package/src/app/defaultTheme.css

@@ -0,0 +1,54 @@
+:root {
+  --background: oklch(100% 0 none);
+  --foreground: oklch(14.1% 0.004 286);
+  --card: oklch(100% 0 none);
+  --card-foreground: oklch(14.1% 0.004 286);
+  --popover: oklch(100% 0 none);
+  --popover-foreground: oklch(14.1% 0.004 286);
+  --primary: oklch(21% 0.006 286);
+  --primary-foreground: oklch(98.5% 0 none);
+  --secondary: oklch(96.8% 0.001 286);
+  --secondary-foreground: oklch(21% 0.006 286);
+  --muted: oklch(96.8% 0.001 286);
+  --muted-foreground: oklch(55.2% 0.014 286);
+  --accent: oklch(96.8% 0.001 286);
+  --accent-foreground: oklch(21% 0.006 286);
+  --destructive: oklch(63.7% 0.208 25.3);
+  --destructive-foreground: oklch(98.5% 0 none);
+  --border: oklch(96% 0.002 286);
+  --input: oklch(92% 0.004 286);
+  --ring: oklch(21% 0.006 286);
+  --chart-1: oklch(67.7% 0.157 35.2);
+  --chart-2: oklch(63.1% 0.101 183);
+  --chart-3: oklch(37.9% 0.044 226);
+  --chart-4: oklch(83.4% 0.119 88.1);
+  --chart-5: oklch(78.3% 0.126 58.7);
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: oklch(14.1% 0.004 286);
+  --foreground: oklch(98.5% 0 none);
+  --card: oklch(14.1% 0.004 286);
+  --card-foreground: oklch(98.5% 0 none);
+  --popover: oklch(14.1% 0.004 286);
+  --popover-foreground: oklch(98.5% 0 none);
+  --primary: oklch(98.5% 0 none);
+  --primary-foreground: oklch(21% 0.006 286);
+  --secondary: oklch(27.4% 0.005 286);
+  --secondary-foreground: oklch(98.5% 0 none);
+  --muted: oklch(27.4% 0.005 286);
+  --muted-foreground: oklch(71.2% 0.013 286);
+  --accent: oklch(27.4% 0.005 286);
+  --accent-foreground: oklch(98.5% 0 none);
+  --destructive: oklch(39.6% 0.133 25.7);
+  --destructive-foreground: oklch(98.5% 0 none);
+  --border: oklch(27.4% 0.005 286);
+  --input: oklch(27.4% 0.005 286);
+  --ring: oklch(87.1% 0.005 286);
+  --chart-1: oklch(52.9% 0.193 262);
+  --chart-2: oklch(69.8% 0.134 165);
+  --chart-3: oklch(72.3% 0.15 60.6);
+  --chart-4: oklch(61.9% 0.204 313);
+  --chart-5: oklch(61.2% 0.209 6.39);
+}

package/src/app/demo.html

@@ -13,7 +13,7 @@
     />
     <title>Zudoku Demo</title>
     <script type="module" crossorigin src="./demo.js"></script>
-    <link rel="stylesheet" crossorigin href="./style.css" />
+    <link rel="stylesheet" crossorigin href="./zudoku.css" />
   </head>
   <body>
     <div id="root"></div>

package/src/app/entry.client.tsx

@@ -34,6 +34,47 @@ if (root.childElementCount > 0) {
   void render(routes);
 }
 
+if (import.meta.env.IS_ZUPLO) {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%cPowered by Zuplo v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #Df0097",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 15px",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+  );
+} else {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%cZUDOKU%c by Zuplo v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #FF00BD",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 30px",
+      "-webkit-text-stroke-width: 1px",
+      "-webkit-text-stroke-color: #FF00BD",
+      "text-transform: uppercase",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+    [
+      "color: #Df0097",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 15px",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+  );
+  // eslint-disable-next-line no-console
+  console.log("» Learn more about Zudoku https://zudoku.dev");
+}
+
 async function hydrateLazyRoutes(routes: RouteObject[]) {
   const path = window.location.pathname;
   const lazyMatches = matchRoutes(routes, path, config.basePath)?.filter(

package/src/app/env.ts

@@ -0,0 +1,35 @@
+import { BuildConfigSchema } from "./ZuploBuildConfig.js";
+
+const getZuploBuildConfig = () => {
+  if (!process.env.ZUPLO_BUILD_CONFIG) return undefined;
+
+  try {
+    const zuploBuildConfig = BuildConfigSchema.parse(
+      JSON.parse(process.env.ZUPLO_BUILD_CONFIG),
+    );
+    return zuploBuildConfig;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(
+      "ZUPLO_BUILD_CONFIG is a reserved environment variable and cannot be used for custom configuration. Please remove it from your environment variables.",
+    );
+    // eslint-disable-next-line no-console
+    console.log(error);
+    return undefined;
+  }
+};
+
+export const ZuploEnv = {
+  /**
+   * Indicates that the build is running in Zuplo "mode"
+   */
+  get isZuplo(): boolean {
+    return process.env.ZUPLO === "1";
+  },
+
+  get serverUrl(): string | undefined {
+    return process.env.ZUPLO_SERVER_URL;
+  },
+
+  buildConfig: getZuploBuildConfig(),
+};

package/src/app/font.geist.css

@@ -0,0 +1,73 @@
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
+    format("woff2");
+}