zudoku 0.0.0-f3f6db5 → 0.0.0-f471fb8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-f3f6db5",
+  "version": "0.0.0-f471fb8",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -35,6 +35,10 @@
       "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"
     },
@@ -50,6 +54,14 @@
       "import": "./lib/zudoku.auth-openid.js",
       "types": "./dist/lib/authentication/providers/openid.d.ts"
     },
+    "./auth/supabase": {
+      "import": "./lib/zudoku.auth-supabase.js",
+      "types": "./dist/lib/authentication/providers/supabase.d.ts"
+    },
+    "./plugins": {
+      "import": "./lib/zudoku.plugins.js",
+      "types": "./dist/lib/core/plugins.d.ts"
+    },
     "./plugins/api-keys": {
       "import": "./lib/zudoku.plugin-api-keys.js",
       "types": "./dist/lib/plugins/api-keys/index.d.ts"
@@ -78,6 +90,10 @@
       "import": "./lib/zudoku.plugin-search-inkeep.js",
       "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
     },
+    "./plugins/search-pagefind": {
+      "import": "./lib/zudoku.plugin-search-pagefind.js",
+      "types": "./dist/lib/plugins/search-pagefind/index.d.ts"
+    },
     "./components": {
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
@@ -111,149 +127,161 @@
     }
   },
   "dependencies": {
+    "@apidevtools/json-schema-ref-parser": "11.9.3",
     "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hookform/resolvers": "3.10.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": "3.41.0",
-    "@radix-ui/react-accordion": "1.2.2",
-    "@radix-ui/react-alert-dialog": "1.1.4",
-    "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-checkbox": "1.1.3",
-    "@radix-ui/react-collapsible": "1.1.2",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-hover-card": "1.1.4",
-    "@radix-ui/react-label": "2.1.1",
-    "@radix-ui/react-popover": "1.1.4",
-    "@radix-ui/react-progress": "1.1.1",
-    "@radix-ui/react-radio-group": "1.2.2",
-    "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.5",
-    "@radix-ui/react-slider": "1.2.2",
-    "@radix-ui/react-slot": "1.1.1",
-    "@radix-ui/react-switch": "1.1.2",
-    "@radix-ui/react-tabs": "1.1.2",
-    "@radix-ui/react-toggle": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.6",
-    "@radix-ui/react-visually-hidden": "1.1.1",
-    "@sentry/node": "8.50.0",
+    "@pothos/core": "4.5.0",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-aspect-ratio": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
+    "@radix-ui/react-hover-card": "1.1.6",
+    "@radix-ui/react-label": "2.1.2",
+    "@radix-ui/react-popover": "1.1.6",
+    "@radix-ui/react-progress": "1.1.2",
+    "@radix-ui/react-radio-group": "1.2.3",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-slider": "1.2.3",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-tabs": "1.1.3",
+    "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-toggle-group": "1.1.2",
+    "@radix-ui/react-tooltip": "1.1.8",
+    "@radix-ui/react-visually-hidden": "1.1.2",
+    "@scalar/openapi-parser": "0.10.12",
+    "@sentry/node": "9.1.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.1",
     "@tailwindcss/typography": "0.5.16",
-    "@tanstack/react-query": "5.64.2",
-    "@types/react": "19.0.7",
-    "@types/react-dom": "19.0.3",
+    "@tanem/react-nprogress": "5.0.55",
+    "@tanstack/react-query": "5.66.6",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
-    "autoprefixer": "10.4.20",
-    "chokidar": "3.6.0",
+    "autoprefixer": "10.4.21",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
     "devlop": "^1.1.0",
     "dotenv": "16.4.7",
     "embla-carousel-react": "8.5.2",
-    "estree-util-value-to-estree": "3.2.1",
+    "esm-loader-css": "^1.0.3",
+    "estree-util-value-to-estree": "3.3.2",
     "express": "4.21.2",
+    "fast-equals": "5.2.2",
     "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.10.10",
+    "graphql-yoga": "5.13.2",
     "gray-matter": "4.0.3",
-    "hast-util-to-jsx-runtime": "^2.3.2",
+    "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",
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
-    "lucide-react": "0.473.0",
+    "lucide-react": "0.475.0",
+    "minimatch": "10.0.1",
+    "nanoevents": "^9.1.0",
     "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
+    "pagefind": "1.4.0-alpha.1",
     "picocolors": "1.1.1",
-    "postcss": "8.5.1",
-    "posthog-node": "4.4.1",
+    "piscina": "5.0.0-alpha.1",
+    "postcss": "8.5.3",
+    "posthog-node": "4.8.1",
     "prism-react-renderer": "2.4.1",
-    "prismjs": "1.29.0",
+    "prismjs": "1.30.0",
     "react-error-boundary": "5.0.0",
     "react-hook-form": "7.54.2",
     "react-is": "19.0.0",
-    "react-router": "7.1.3",
+    "react-router": "7.2.0",
+    "rehype-mdx-import-media": "1.2.0",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
-    "remark-directive": "3.0.0",
+    "remark-directive": "3.0.1",
     "remark-directive-rehype": "0.4.2",
     "remark-frontmatter": "5.0.0",
-    "remark-gfm": "4.0.0",
+    "remark-gfm": "4.0.1",
     "remark-mdx-frontmatter": "5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "4.31.0",
-    "semver": "7.6.3",
+    "rollup": "4.35.0",
+    "semver": "7.7.1",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.6.0",
     "tailwindcss": "3.4.17",
-    "tsx": "^4.19.2",
+    "tsx": "^4.19.3",
     "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.0.11",
+    "vite": "6.2.0",
     "yaml": "2.7.0",
     "yargs": "17.7.2",
-    "zod": "3.24.1",
+    "zod": "3.24.2",
     "zod-validation-error": "3.4.0",
     "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "5.0.3",
-    "@graphql-codegen/client-preset": "4.5.1",
-    "@types/estree": "1.0.6",
+    "@graphql-codegen/cli": "5.0.5",
+    "@graphql-codegen/client-preset": "4.7.0",
+    "@testing-library/react": "16.2.0",
+    "@types/estree": "1.0.7",
     "@types/express": "5.0.0",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
-    "@types/node": "20.16.11",
+    "@types/node": "22.13.5",
     "@types/object-hash": "3.0.6",
     "@types/react-is": "19.0.0",
     "@types/semver": "7.5.8",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "3.0.2",
+    "@vitest/coverage-v8": "3.0.5",
+    "happy-dom": "17.1.1",
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "rollup-plugin-visualizer": "5.14.0",
     "typescript": "5.7.3",
-    "vitest": "3.0.2"
+    "vitest": "3.0.5"
   },
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "^5.43.4",
-    "@sentry/react": "^8.50.0"
+    "@clerk/clerk-js": "^5.52.3",
+    "@sentry/react": "^9.1.0",
+    "@supabase/supabase-js": "^2.49.1"
   },
   "scripts": {
     "build": "tsc --project tsconfig.app.json",
     "build:vite": "vite build",
     "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "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",
+    "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"

package/src/app/demo-cdn.html

@@ -1,34 +1,34 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="https://cdn.zudoku.dev/logos/favicon.svg"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
-    />
-    <title>Zudoku Demo</title>
-    <script
-      type="module"
-      crossorigin
-      src="https://cdn.zudoku.dev/latest/demo.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      crossorigin
-      href="https://cdn.zudoku.dev/latest/style.css"
-    />
-    <script>
-      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init push capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-      posthog.init('phc_l8rjm0vHBMwNdGeBRDrK8UIYjyVxZyBAtnYo2hS18OY',{api_host:'https://us.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
-      })
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <link
+    rel="icon"
+    type="image/svg+xml"
+    href="https://cdn.zudoku.dev/logos/favicon.svg"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+  />
+  <title>Zudoku Demo</title>
+  <script
+    type="module"
+    crossorigin
+    src="https://cdn.zudoku.dev/latest/demo.js"
+  ></script>
+  <link
+    rel="stylesheet"
+    crossorigin
+    href="https://cdn.zudoku.dev/latest/style.css"
+  />
+  <script>
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init push capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+    posthog.init('phc_l8rjm0vHBMwNdGeBRDrK8UIYjyVxZyBAtnYo2hS18OY',{api_host:'https://us.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
+    })
+  </script>
+</head>
+<body>
+<div id="root"></div>
+</body>
 </html>

package/src/app/entry.client.tsx

@@ -14,6 +14,14 @@ import { getRoutesByConfig } from "./main.js";
 const routes = getRoutesByConfig(config);
 const root = document.getElementById("root")!;
 
+declare global {
+  interface Window {
+    ZUDOKU_VERSION: string;
+  }
+}
+
+window.ZUDOKU_VERSION = process.env.ZUDOKU_VERSION ?? "unknown";
+
 if (process.env.SENTRY_DSN) {
   void import("./sentry.js").then((mod) => {
     mod.initSentry({ dsn: process.env.SENTRY_DSN as string });

package/src/app/entry.server.tsx

@@ -8,31 +8,32 @@ import {
   createStaticHandler,
   createStaticRouter,
   isRouteErrorResponse,
+  type RouteObject,
 } from "react-router";
 import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
-import type { ZudokuConfig } from "../config/config.js";
-import type { FileWritingResponse } from "../vite/prerender.js";
+import { NO_DEHYDRATE } from "../lib/components/cache.js";
+import type { FileWritingResponse } from "../vite/prerender/FileWritingResponse.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
-
 export { getRoutesByConfig };
 
 export const render = async ({
   template,
   request: baseRequest,
   response,
-  config,
+  routes,
+  basePath,
 }: {
   template: string;
   request: express.Request | Request;
   response: express.Response | FileWritingResponse;
-  config: ZudokuConfig;
+  routes: RouteObject[];
+  basePath?: string;
 }) => {
-  const routes = getRoutesByConfig(config);
   const { query, dataRoutes } = createStaticHandler(routes, {
-    basename: config.basePath,
+    basename: basePath,
   });
   const queryClient = new QueryClient();
 
@@ -47,7 +48,7 @@ export const render = async ({
   if (context instanceof Response) {
     if ([301, 302, 303, 307, 308].includes(context.status)) {
       return response.redirect(
-        context.status,
+        import.meta.env.PROD ? context.status : 307,
         context.headers.get("Location")!,
       );
     }
@@ -84,8 +85,6 @@ export const render = async ({
 
       response.send(html);
     },
-    // for SSG we could use onAllReady instead of onShellReady
-    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
     onAllReady() {
       response.set({ "Content-Type": "text/html" });
       response.status(status);
@@ -117,10 +116,15 @@ export const render = async ({
       );
 
       transformStream.on("finish", () => {
+        const dehydrated = dehydrate(queryClient, {
+          shouldDehydrateQuery: (query) =>
+            !query.queryKey.includes(NO_DEHYDRATE),
+        });
+
         response.end(
           htmlEnd?.replace(
             "</body>",
-            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
+            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
           ),
         );
       });
@@ -129,6 +133,9 @@ export const render = async ({
     },
     onError(error) {
       status = 500;
+      if (import.meta.env.PROD) {
+        throw error;
+      }
       logger.error(error);
     },
   });

package/src/app/main.css

@@ -82,10 +82,11 @@
     --top-nav-height: 50px;
     --banner-height: 40px;
     --header-height: calc(
-      var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
+      var(--top-header-height) + var(--top-nav-height) + var(--banner-height) -
+        /* borders */ 2px
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.80");
+    --side-nav-width: theme("spacing.72");
     --padding-content-top: theme("spacing.6");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
@@ -108,8 +109,9 @@
   }
 
   #root {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full grid grid-rows-[auto_1fr];
   }
+
   * {
     @apply border-border;
   }
@@ -121,6 +123,10 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary/100 text-primary-foreground;
+  }
+
   .dark {
     color-scheme: dark;
   }
@@ -221,7 +227,8 @@
 
     --R: calc(var(--s) * sqrt(var(--m) * var(--m) + 1) + var(--b) / 2);
     height: calc(2 * var(--R));
-    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
+    --_g:
+      #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
     mask:
       radial-gradient(
           var(--R) at left 50% bottom calc(-1 * var(--m) * var(--s)),
@@ -238,61 +245,96 @@
   }
 
   /* Theme */
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 95%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.75rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 240 10% 3.9%;
-      --card: 0 0% 100%;
-      --card-foreground: 240 10% 3.9%;
-      --popover: 0 0% 100%;
-      --popover-foreground: 240 10% 3.9%;
-      --primary: 240 5.9% 10%;
-      --primary-foreground: 0 0% 98%;
-      --secondary: 240 4.8% 95.9%;
-      --secondary-foreground: 240 5.9% 10%;
-      --muted: 240 4.8% 95.9%;
-      --muted-foreground: 240 3.8% 46.1%;
-      --accent: 240 4.8% 95.9%;
-      --accent-foreground: 240 5.9% 10%;
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 0 0% 98%;
-      --border: 240 5.9% 95%;
-      --input: 240 5.9% 90%;
-      --ring: 240 5.9% 10%;
-      --radius: 0.75rem;
-      --chart-1: 12 76% 61%;
-      --chart-2: 173 58% 39%;
-      --chart-3: 197 37% 24%;
-      --chart-4: 43 74% 66%;
-      --chart-5: 27 87% 67%;
-    }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
 
-    .dark {
-      --background: 240 10% 3.9%;
-      --foreground: 0 0% 98%;
-      --card: 240 10% 3.9%;
-      --card-foreground: 0 0% 98%;
-      --popover: 240 10% 3.9%;
-      --popover-foreground: 0 0% 98%;
-      --primary: 0 0% 98%;
-      --primary-foreground: 240 5.9% 10%;
-      --secondary: 240 3.7% 15.9%;
-      --secondary-foreground: 0 0% 98%;
-      --muted: 240 3.7% 15.9%;
-      --muted-foreground: 240 5% 64.9%;
-      --accent: 240 3.7% 15.9%;
-      --accent-foreground: 0 0% 98%;
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 0 0% 98%;
-      --border: 240 3.7% 15.9%;
-      --input: 240 3.7% 15.9%;
-      --ring: 240 4.9% 83.9%;
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-    }
+@layer components {
+  .stepper > ol {
+    --bullet-size: 1.75rem;
+    --line-spacing: 0.25rem;
+    @apply flex flex-col list-none p-0 m-0;
+    counter-reset: step-counter;
+  }
+
+  .stepper > ol > li {
+    @apply relative ps-12 pb-6 my-0;
+    counter-increment: step-counter;
+  }
+
+  .stepper > ol > li:last-child {
+    @apply pb-0;
+  }
+
+  /* Bullet with number */
+  .stepper > ol > li::before {
+    @apply absolute left-0 flex items-center justify-center size-[--bullet-size];
+    @apply bg-muted/80 border border-border text-muted-foreground text-[calc(var(--bullet-size)/2)] font-semibold rounded-full;
+    content: counter(step-counter);
+  }
+
+  /* Vertical line */
+  .stepper > ol > li::after {
+    @apply absolute content-[''] w-[2px] bg-border -translate-x-1/2;
+    left: calc(var(--bullet-size) / 2);
+    top: calc(var(--bullet-size) + var(--line-spacing));
+    height: calc(100% - var(--bullet-size) - (2 * var(--line-spacing)));
+  }
+
+  .stepper > ol > li > :first-child {
+    @apply mt-0 pt-0;
+    transform: translateY(calc((var(--bullet-size) - 1lh) / 2));
   }
 }