zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-f0602bf",
+  "version": "0.0.0-f0b4321",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -36,10 +36,6 @@
       "import": "./lib/ui/*.js",
       "types": "./dist/lib/ui/*.d.ts"
     },
-    "./hooks": {
-      "import": "./lib/hooks/index.js",
-      "types": "./dist/lib/hooks/index.d.ts"
-    },
     "./client": {
       "types": "./client.d.ts"
     },
@@ -59,6 +55,10 @@
       "import": "./lib/zudoku.auth-supabase.js",
       "types": "./dist/lib/authentication/providers/supabase.d.ts"
     },
+    "./auth/azureb2c": {
+      "import": "./lib/zudoku.auth-azureb2c.js",
+      "types": "./dist/lib/authentication/providers/azureb2c.d.ts"
+    },
     "./plugins": {
       "import": "./lib/zudoku.plugins.js",
       "types": "./dist/lib/core/plugins.d.ts"
@@ -95,6 +95,10 @@
       "import": "./lib/zudoku.plugin-search-pagefind.js",
       "types": "./dist/lib/plugins/search-pagefind/index.d.ts"
     },
+    "./hooks": {
+      "import": "./lib/zudoku.hooks.js",
+      "types": "./dist/lib/hooks/index.d.ts"
+    },
     "./components": {
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
@@ -129,49 +133,49 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "12.0.2",
-    "@envelop/core": "5.2.3",
+    "@envelop/core": "5.3.0",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hookform/resolvers": "4.1.3",
     "@lekoarts/rehype-meta-as-attributes": "3.0.2",
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
-    "@pothos/core": "4.6.0",
-    "@radix-ui/react-accordion": "1.2.10",
-    "@radix-ui/react-alert-dialog": "1.1.13",
-    "@radix-ui/react-aspect-ratio": "1.1.6",
-    "@radix-ui/react-checkbox": "1.3.1",
-    "@radix-ui/react-collapsible": "1.1.10",
-    "@radix-ui/react-dialog": "1.1.13",
-    "@radix-ui/react-dropdown-menu": "2.1.14",
-    "@radix-ui/react-hover-card": "1.1.13",
-    "@radix-ui/react-label": "2.1.6",
-    "@radix-ui/react-popover": "1.1.13",
-    "@radix-ui/react-progress": "1.1.6",
-    "@radix-ui/react-radio-group": "1.3.6",
+    "@pothos/core": "4.7.0",
+    "@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.4",
+    "@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.4",
-    "@radix-ui/react-tabs": "1.1.11",
-    "@radix-ui/react-toggle": "1.1.8",
-    "@radix-ui/react-toggle-group": "1.1.9",
-    "@radix-ui/react-tooltip": "1.2.6",
-    "@radix-ui/react-visually-hidden": "1.2.2",
+    "@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",
+    "@sentry/node": "9.26.0",
+    "@shikijs/langs": "3.7.0",
+    "@shikijs/rehype": "3.7.0",
+    "@shikijs/themes": "3.7.0",
+    "@shikijs/transformers": "3.7.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",
+    "@tanstack/react-query": "5.81.5",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "@vitejs/plugin-react": "4.4.1",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
@@ -183,39 +187,41 @@
     "devlop": "^1.1.0",
     "dotenv": "16.5.0",
     "embla-carousel-react": "8.6.0",
-    "estree-util-value-to-estree": "3.3.3",
+    "estree-util-value-to-estree": "3.4.0",
     "express": "5.1.0",
     "fast-equals": "5.2.2",
     "framer-motion": "^12.12.2",
-    "glob": "11.0.1",
-    "graphql": "16.10.0",
+    "glob": "11.0.3",
+    "glob-parent": "6.0.2",
+    "graphql": "16.11.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.13.3",
+    "graphql-yoga": "5.14.0",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "3.0.1",
     "html-url-attributes": "^3.0.1",
     "http-terminator": "3.2.0",
+    "json-schema-to-typescript-lite": "14.1.0",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
-    "lucide-react": "0.488.0",
+    "lucide-react": "0.515.0",
     "minimatch": "10.0.1",
+    "motion": "12.18.1",
     "nanoevents": "^9.1.0",
-    "next-themes": "0.4.4",
+    "next-themes": "0.4.6",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
     "pagefind": "1.4.0-alpha.1",
     "picocolors": "1.1.1",
-    "piscina": "5.0.0-alpha.2",
+    "piscina": "5.1.1",
     "posthog-node": "4.17.1",
-    "react-error-boundary": "5.0.0",
-    "react-hook-form": "7.55.0",
+    "react-error-boundary": "6.0.0",
+    "react-hook-form": "7.57.0",
     "react-is": "19.1.0",
     "react-markdown": "10.1.0",
-    "react-router": "7.5.2",
+    "react-router": "7.6.1",
     "rehype-mdx-import-media": "1.2.0",
-    "rehype-pretty-code": "0.14.1",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -223,38 +229,39 @@
     "remark-directive-rehype": "0.4.2",
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.1",
-    "remark-mdx-frontmatter": "5.1.0",
+    "remark-mdx-frontmatter": "5.2.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "rollup": "4.40.1",
-    "semver": "7.7.1",
-    "shiki": "3.3.0",
+    "rollup": "4.41.1",
+    "semver": "7.7.2",
+    "shiki": "3.7.0",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "3.3.0",
-    "tailwindcss": "4.1.7",
+    "tailwind-merge": "3.3.1",
+    "tailwindcss": "4.1.11",
     "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.3.5",
-    "yaml": "2.7.1",
-    "yargs": "17.7.2",
-    "zod": "3.24.2",
-    "zod-validation-error": "3.4.0",
-    "zustand": "5.0.3"
+    "yaml": "2.8.0",
+    "yargs": "18.0.0",
+    "zod": "3.25.67",
+    "zod-to-ts": "1.2.0",
+    "zustand": "5.0.5"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "5.0.5",
-    "@graphql-codegen/client-preset": "4.8.0",
+    "@graphql-codegen/cli": "5.0.7",
+    "@graphql-codegen/client-preset": "4.8.2",
+    "@inkeep/cxkit-types": "0.5.90",
     "@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",
+    "@types/express": "5.0.2",
+    "@types/glob-parent": "5.1.3",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
@@ -266,35 +273,49 @@
     "@types/semver": "7.7.0",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "3.1.1",
+    "@vitest/coverage-v8": "3.2.1",
     "esbuild": "0.25.1",
-    "happy-dom": "17.4.4",
+    "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",
+    "rollup-plugin-visualizer": "6.0.3",
+    "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "vitest": "3.1.4"
+    "vitest": "3.2.3"
   },
   "peerDependencies": {
+    "@azure/msal-browser": "^4.13.0",
+    "@clerk/clerk-js": "^5.63.1",
+    "@sentry/react": "^9.12.0",
+    "@supabase/supabase-js": "^2.49.4",
     "react": ">=19",
     "react-dom": ">=19"
   },
-  "optionalDependencies": {
-    "@clerk/clerk-js": "^5.63.1",
-    "@sentry/react": "^9.12.0",
-    "@supabase/supabase-js": "^2.49.4"
+  "peerDependenciesMeta": {
+    "@azure/msal-browser": {
+      "optional": true
+    },
+    "@clerk/clerk-js": {
+      "optional": true
+    },
+    "@sentry/react": {
+      "optional": true
+    },
+    "@supabase/supabase-js": {
+      "optional": true
+    }
   },
   "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:types": "node scripts/generate-types.js",
+    "generate:types": "tsx scripts/generate-types.js && tsx scripts/generate-flat-config.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",
     "codegen": "graphql-codegen --config ./src/codegen.ts",
-    "test": "vitest run"
+    "test": "vitest run --typecheck"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts"

package/src/app/ZuploBuildConfig.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from "zod/v4";
 
 export const EntitlementsSchema = z.object({
   devPortalZuploBranding: z.boolean(),
@@ -19,14 +19,14 @@ export const EntitlementsSchema = z.object({
 
 export const BuildConfigSchema = z.object({
   entitlements: EntitlementsSchema,
-  environmentType: z.string(),
+  environmentType: z.string().optional(),
   deploymentName: z.string(),
-  deploymentUrl: z.string(),
-  projectId: z.string(),
-  projectType: z.string(),
-  sourceType: z.string(),
-  accountName: z.string(),
-  projectName: z.string(),
+  deploymentUrl: z.string().optional(),
+  projectId: z.string().optional(),
+  projectType: z.string().optional(),
+  sourceType: z.string().optional(),
+  accountName: z.string().optional(),
+  projectName: z.string().optional(),
 });
 
 export type BuildConfig = z.infer<typeof BuildConfigSchema>;

package/src/app/defaultTheme.css

@@ -1,54 +1,73 @@
+/**
+ * Default theme for Zudoku. Based on shadcn/ui zinc base colors.
+ * See: https://ui.shadcn.com/docs/theming#zinc
+ */
+
 :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;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .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);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }

package/src/app/demo.tsx

@@ -10,6 +10,10 @@ import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 
 const apiUrl = new URL(window.location.href).searchParams.get("api-url");
+const logoUrl = new URL(window.location.href).searchParams.get("logo-url");
+const logoWidth = new URL(window.location.href).searchParams.get("logo-width");
+const title =
+  new URL(window.location.href).searchParams.get("title") ?? "Zudoku Demo";
 
 if (!apiUrl) {
   throw new Error(
@@ -29,16 +33,17 @@ if (!root) {
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
-const config = {
-  page: {
-    pageTitle: "",
+const config: ZudokuConfig = {
+  site: {
+    title,
     banner: {
       message: <DemoAnnouncement />,
     },
   },
-  topNavigation: [
+  navigation: [
     {
-      id: "/",
+      type: "link",
+      to: "/",
       label: "API Reference",
     },
   ],
@@ -47,11 +52,24 @@ const config = {
     openApiPlugin({
       type: "url",
       input: apiUrl,
-      navigationId: "/",
+      path: "/",
     }),
   ],
 } satisfies ZudokuConfig;
 
+if (logoUrl && logoWidth) {
+  config.site = {
+    ...config.site,
+    logo: {
+      src: {
+        light: logoUrl,
+        dark: logoUrl,
+      },
+      width: logoWidth,
+    },
+  };
+}
+
 const routes = getRoutesByConfig(config);
 const router = createBrowserRouter(routes, {
   basename: window.location.pathname,

package/src/app/entry.client.tsx

@@ -5,10 +5,8 @@ import {
   type RouteObject,
 } from "react-router";
 import config from "virtual:zudoku-config";
-import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { Bootstrap } from "zudoku/components";
-import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 
 const routes = getRoutesByConfig(config);

package/src/app/entry.server.tsx

@@ -10,12 +10,10 @@ import {
   isRouteErrorResponse,
   type RouteObject,
 } from "react-router";
-import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import { NO_DEHYDRATE } from "../lib/components/cache.js";
 import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
-import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 export { getRoutesByConfig };
 

package/src/app/env.ts

@@ -1,3 +1,4 @@
+import z from "zod";
 import { BuildConfigSchema } from "./ZuploBuildConfig.js";
 
 const getZuploBuildConfig = () => {
@@ -9,6 +10,13 @@ const getZuploBuildConfig = () => {
     );
     return zuploBuildConfig;
   } catch (error) {
+    if (error instanceof z.ZodError) {
+      // eslint-disable-next-line no-console
+      console.error("ZUPLO_BUILD_CONFIG is invalid.");
+      // eslint-disable-next-line no-console
+      console.log(error.errors);
+      return undefined;
+    }
     // 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.",

package/src/app/main.css

@@ -1,5 +1,4 @@
-/* @vite-plugin-inject font */
-@import "./defaultTheme.css" layer(theme);
+/* @vite-plugin-inject defaultTheme */
 @import "tailwindcss" source("..");
 
 /* @vite-plugin-inject main */
@@ -7,56 +6,6 @@
 @plugin "@tailwindcss/typography";
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
 @utility prose {
   a {
     @apply font-normal underline-offset-4 hover:text-primary;
@@ -74,6 +23,9 @@
   hr {
     @apply border-border;
   }
+  code {
+    font-weight: 400;
+  }
   code::before {
     content: none;
   }
@@ -114,6 +66,11 @@
     @apply h-full overscroll-none;
   }
 
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
   details summary {
     @apply cursor-pointer;
   }
@@ -166,7 +123,8 @@
     @apply leading-normal;
   }
   .code-block .shiki {
-    @apply grid;
+    @apply grid grid-rows-1;
+    grid-auto-rows: 1lh;
   }
 
   .shiki,
@@ -177,8 +135,8 @@
     text-decoration: var(--shiki-light-text-decoration) !important;
   }
 
-  html.dark .shiki,
-  html.dark .shiki span {
+  .dark .shiki,
+  .dark .shiki span {
     color: var(--shiki-dark);
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
@@ -192,9 +150,9 @@
   }
 
   .shiki.not-inline .line {
-    @apply inline-flex items-baseline -mx-4 px-4 w-[calc(100%+2rem)];
+    @apply block -mx-4 px-4 w-[calc(100%+2rem)];
     --highlighted-bg: hsl(
-      from hsl(var(--muted)) h s calc(l + 4 * var(--dark)) / 50%
+      from var(--muted) h s calc(l + 4 * var(--dark)) / 50%
     );
   }
   .shiki .line.highlighted {