zudoku 0.78.2 → 0.79.1

package/dist/cli/cli.js

@@ -3849,269 +3849,6 @@ import {
   loadConfigFromFile,
   mergeConfig as mergeConfig2
 } from "vite";
-
-// package.json
-var package_default = {
-  name: "zudoku",
-  version: "0.78.1",
-  type: "module",
-  sideEffects: [
-    "**/*.css",
-    "**/polyfills.ts"
-  ],
-  homepage: "https://zudoku.dev",
-  repository: {
-    type: "git",
-    url: "git+https://github.com/zuplo/zudoku.git"
-  },
-  bugs: {
-    url: "https://github.com/zuplo/zudoku/issues"
-  },
-  description: "Framework for building high quality, interactive API documentation.",
-  files: [
-    "dist",
-    "cli.js",
-    "src",
-    "client.d.ts",
-    "docs"
-  ],
-  bin: {
-    zudoku: "./cli.js"
-  },
-  exports: {
-    ".": "./src/index.ts",
-    "./package.json": "./package.json",
-    "./ui/*": {
-      types: "./src/lib/ui/*.tsx",
-      default: "./src/lib/ui/*.tsx"
-    },
-    "./ui/*.js": {
-      types: "./src/lib/ui/*.tsx",
-      default: "./src/lib/ui/*.tsx"
-    },
-    "./client": {
-      types: "./client.d.ts"
-    },
-    "./auth/clerk": "./src/lib/authentication/providers/clerk.tsx",
-    "./auth/auth0": "./src/lib/authentication/providers/auth0.tsx",
-    "./auth/openid": "./src/lib/authentication/providers/openid.tsx",
-    "./auth/supabase": "./src/lib/authentication/providers/supabase.tsx",
-    "./auth/azureb2c": "./src/lib/authentication/providers/azureb2c.tsx",
-    "./auth/firebase": "./src/lib/authentication/providers/firebase.tsx",
-    "./plugins": "./src/lib/core/plugins.ts",
-    "./plugins/api-keys": "./src/lib/plugins/api-keys/index.tsx",
-    "./plugins/markdown": "./src/lib/plugins/markdown/index.tsx",
-    "./plugins/openapi": "./src/lib/plugins/openapi/index.tsx",
-    "./plugins/custom-pages": "./src/lib/plugins/custom-pages/index.tsx",
-    "./plugins/search-inkeep": "./src/lib/plugins/search-inkeep/index.tsx",
-    "./plugins/search-pagefind": "./src/lib/plugins/search-pagefind/index.tsx",
-    "./plugins/api-catalog": "./src/lib/plugins/api-catalog/index.tsx",
-    "./components": "./src/lib/components/index.ts",
-    "./mermaid": "./src/lib/components/Mermaid.tsx",
-    "./router": "./src/lib/core/router.ts",
-    "./react-query": "./src/lib/core/react-query.ts",
-    "./icons": "./src/lib/icons.ts",
-    "./vite": "./src/vite/index.ts",
-    "./server": "./src/app/entry.server.tsx",
-    "./server/adapters/lambda": "./src/app/adapters/lambda.ts",
-    "./server/adapters/node": "./src/app/adapters/node.ts",
-    "./server/adapters/vercel": "./src/app/adapters/vercel.ts",
-    "./server/adapters/cloudflare": "./src/app/adapters/cloudflare.ts",
-    "./app/*": "./src/app/*",
-    "./hooks": "./src/lib/hooks/index.ts",
-    "./processors/*": "./src/lib/plugins/openapi/processors/*.ts",
-    "./with-zuplo": "./src/zuplo/with-zuplo.ts",
-    "./testing": "./src/lib/testing/index.tsx"
-  },
-  scripts: {
-    build: "esbuild src/cli/cli.ts src/vite/prerender/worker.ts --outdir=dist/cli --entry-names=[name] --bundle --format=esm --packages=external --target=node20 --platform=node --log-level=error",
-    postbuild: "tsx scripts/check-external-deps.ts",
-    typecheck: "tsc --project tsconfig.app.json --noEmit",
-    "generate:types": "tsx scripts/generate-types.js && tsx scripts/generate-flat-config.js",
-    "build:standalone": "vite build --mode standalone --config vite.standalone.config.ts --log-level=error",
-    prepublishOnly: "tsx scripts/generate-publish-exports.ts && publint .",
-    postpublish: "git checkout -- package.json",
-    clean: "rm -rf dist",
-    codegen: "graphql-codegen --config ./src/codegen.ts"
-  },
-  dependencies: {
-    "@apidevtools/json-schema-ref-parser": "15.3.5",
-    "@base-ui/react": "^1.4.1",
-    "@envelop/core": "5.5.1",
-    "@graphql-typed-document-node/core": "3.2.0",
-    "@hono/node-server": "2.0.2",
-    "@lekoarts/rehype-meta-as-attributes": "3.0.3",
-    "@mdx-js/react": "3.1.1",
-    "@mdx-js/rollup": "3.1.1",
-    "@pothos/core": "4.12.0",
-    "@radix-ui/react-accordion": "1.2.12",
-    "@radix-ui/react-alert-dialog": "1.1.15",
-    "@radix-ui/react-aspect-ratio": "1.1.8",
-    "@radix-ui/react-checkbox": "1.3.3",
-    "@radix-ui/react-collapsible": "1.1.12",
-    "@radix-ui/react-dialog": "1.1.15",
-    "@radix-ui/react-dropdown-menu": "2.1.16",
-    "@radix-ui/react-hover-card": "1.1.15",
-    "@radix-ui/react-label": "2.1.8",
-    "@radix-ui/react-navigation-menu": "1.2.14",
-    "@radix-ui/react-popover": "1.1.15",
-    "@radix-ui/react-progress": "1.1.8",
-    "@radix-ui/react-radio-group": "1.3.8",
-    "@radix-ui/react-scroll-area": "1.2.10",
-    "@radix-ui/react-select": "2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "1.3.6",
-    "@radix-ui/react-slot": "1.2.4",
-    "@radix-ui/react-switch": "1.2.6",
-    "@radix-ui/react-tabs": "1.1.13",
-    "@radix-ui/react-toggle": "1.1.10",
-    "@radix-ui/react-toggle-group": "1.1.11",
-    "@radix-ui/react-tooltip": "1.2.8",
-    "@radix-ui/react-visually-hidden": "1.2.4",
-    "@scalar/openapi-parser": "0.23.13",
-    "@scalar/snippetz": "0.9.6",
-    "@sentry/node": "10.52.0",
-    "@shikijs/langs": "4.0.2",
-    "@shikijs/rehype": "4.0.2",
-    "@shikijs/themes": "4.0.2",
-    "@shikijs/transformers": "4.0.2",
-    "@tailwindcss/typography": "0.5.19",
-    "@tailwindcss/vite": "4.2.2",
-    "@tanem/react-nprogress": "6.0.3",
-    "@tanstack/react-query": "5.97.0",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "@vitejs/plugin-react": "6.0.1",
-    "@x0k/json-schema-merge": "1.0.2",
-    "@zudoku/react-helmet-async": "2.0.5",
-    "@zuplo/mcp": "0.0.32",
-    bs58: "6.0.0",
-    "class-variance-authority": "0.7.1",
-    clsx: "2.1.1",
-    cmdk: "1.1.1",
-    dotenv: "17.3.1",
-    "embla-carousel-react": "8.6.0",
-    esbuild: "^0.28.0",
-    "estree-util-is-identifier-name": "3.0.0",
-    "estree-util-value-to-estree": "3.5.0",
-    "fast-equals": "6.0.0",
-    glob: "13.0.6",
-    "glob-parent": "6.0.2",
-    graphql: "16.14.0",
-    "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.18.0",
-    "gray-matter": "4.0.3",
-    "hast-util-heading-rank": "3.0.0",
-    "hast-util-to-jsx-runtime": "2.3.6",
-    "hast-util-to-string": "3.0.1",
-    hono: "4.12.18",
-    "http-terminator": "3.2.0",
-    "javascript-stringify": "2.1.0",
-    jose: "6.2.2",
-    "json-schema-to-typescript-lite": "15.0.0",
-    loglevel: "1.9.2",
-    "lucide-react": "1.16.0",
-    "mdast-util-from-markdown": "2.0.2",
-    "mdast-util-mdx": "3.0.0",
-    "mdast-util-mdx-jsx": "3.2.0",
-    "micromark-extension-mdxjs": "3.0.0",
-    motion: "12.38.0",
-    nanoevents: "9.1.0",
-    "next-themes": "0.4.6",
-    oauth4webapi: "3.8.5",
-    "openapi-types": "12.1.3",
-    pagefind: "1.5.2",
-    picocolors: "1.1.1",
-    piscina: "5.1.4",
-    "posthog-node": "5.33.4",
-    "quick-lru": "7.3.0",
-    "react-error-boundary": "6.1.1",
-    "react-hook-form": "7.75.0",
-    "react-is": "catalog:",
-    "react-markdown": "10.1.0",
-    "react-router": "7.14.1",
-    "rehype-mdx-import-media": "1.4.0",
-    "rehype-raw": "7.0.0",
-    "rehype-slug": "6.0.0",
-    "remark-comment": "1.0.0",
-    "remark-directive": "3.0.1",
-    "remark-directive-rehype": "1.0.0",
-    "remark-frontmatter": "5.0.0",
-    "remark-gfm": "4.0.1",
-    "remark-mdx-frontmatter": "5.2.0",
-    semver: "7.8.0",
-    shiki: "4.0.2",
-    sitemap: "9.0.1",
-    "strip-ansi": "7.2.0",
-    "tailwind-merge": "3.6.0",
-    tailwindcss: "4.3.0",
-    "tw-animate-css": "1.4.0",
-    unified: "11.0.5",
-    "unist-util-visit": "5.1.0",
-    vaul: "1.1.2",
-    vfile: "6.0.3",
-    vite: "8.0.13",
-    yaml: "2.8.4",
-    yargs: "18.0.0",
-    zod: "4.3.6",
-    zustand: "5.0.13"
-  },
-  devDependencies: {
-    "@graphql-codegen/cli": "7.0.0",
-    "@inkeep/cxkit-types": "0.5.117",
-    "@testing-library/dom": "catalog:",
-    "@testing-library/jest-dom": "catalog:",
-    "@testing-library/react": "catalog:",
-    "@testing-library/user-event": "catalog:",
-    "@types/estree": "1.0.9",
-    "@types/glob-parent": "5.1.3",
-    "@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": "catalog:",
-    "@types/react-is": "catalog:",
-    "@types/semver": "7.7.1",
-    "@types/unist": "3.0.3",
-    "@types/yargs": "17.0.35",
-    "@vitest/coverage-v8": "4.0.18",
-    "happy-dom": "catalog:",
-    "oxc-parser": "^0.126.0",
-    react: "catalog:",
-    "react-dom": "catalog:",
-    tsx: "4.21.0",
-    typescript: "catalog:"
-  },
-  peerDependencies: {
-    "@azure/msal-browser": "^4.13.0",
-    "@sentry/react": "^10.0.0",
-    "@supabase/supabase-js": "^2.49.4",
-    firebase: "^12.6.0",
-    mermaid: "^11.0.0",
-    react: ">=19.2.0",
-    "react-dom": ">=19.2.0"
-  },
-  peerDependenciesMeta: {
-    "@azure/msal-browser": {
-      optional: true
-    },
-    "@sentry/react": {
-      optional: true
-    },
-    "@supabase/supabase-js": {
-      optional: true
-    },
-    firebase: {
-      optional: true
-    },
-    mermaid: {
-      optional: true
-    }
-  }
-};
-
-// src/vite/config.ts
 init_logger();
 init_package_json();
 init_loader();
@@ -7783,7 +7520,9 @@ async function getViteConfig(dir, configEnv, options = {}) {
       }
     },
     define: {
-      "process.env.ZUDOKU_VERSION": JSON.stringify(package_default.version),
+      "process.env.ZUDOKU_VERSION": JSON.stringify(
+        getZudokuPackageJson().version
+      ),
       "process.env.IS_ZUPLO": ZuploEnv.isZuplo,
       "import.meta.env.IS_ZUPLO": ZuploEnv.isZuplo,
       "import.meta.env.ZUDOKU_HAS_SERVER": JSON.stringify(options.ssr === true),
@@ -7935,7 +7674,6 @@ function getDevHtml({
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
-    <!--app-helmet-->
     <link rel="preconnect" href="https://cdn.zudoku.dev/">
   </head>
   <body>
@@ -7959,7 +7697,6 @@ function getBuildHtml({
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
     <script type="module" crossorigin src="${jsEntry}"></script>
 ${cssLinks}
-    <!--app-helmet-->
     <link rel="preconnect" href="https://cdn.zudoku.dev/">
   </head>
   <body>

package/dist/declarations/lib/components/Bootstrap.d.ts

@@ -1,13 +1,14 @@
 import { QueryClient } from "@tanstack/react-query";
-import { type HelmetData } from "@zudoku/react-helmet-async";
+import { type Unhead } from "@unhead/react/client";
 import { type createBrowserRouter, type createStaticRouter, type StaticHandlerContext } from "react-router";
 import { type RenderContextValue } from "./context/RenderContext.js";
-export declare const BootstrapClient: ({ router, hydrate, }: {
+export declare const BootstrapClient: ({ router, head, hydrate, }: {
     hydrate?: boolean;
+    head: Unhead;
     router: ReturnType<typeof createBrowserRouter>;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const BootstrapStatic: ({ router, context, queryClient, helmetContext, bypassProtection, renderContext, }: {
-    helmetContext: HelmetData["context"];
+declare const BootstrapStatic: ({ router, context, queryClient, head, bypassProtection, renderContext, }: {
+    head: Unhead;
     context: StaticHandlerContext;
     queryClient: QueryClient;
     router: ReturnType<typeof createStaticRouter>;

package/dist/declarations/lib/components/Meta.d.ts

@@ -1,2 +1,2 @@
 import type { PropsWithChildren } from "react";
-export declare const Meta: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const Meta: ({ children }: PropsWithChildren) => import("react").ReactNode;

package/dist/declarations/lib/components/PluginHeads.d.ts

@@ -3,4 +3,4 @@ import { type ZudokuPlugin } from "../core/plugins.js";
 export declare const PluginHeads: ({ plugins, location, }: {
     plugins: ZudokuPlugin[];
     location: Location;
-}) => import("react/jsx-runtime").JSX.Element[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/declarations/lib/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Helmet as Head } from "@zudoku/react-helmet-async";
+export { Head } from "@unhead/react";
 export { Link } from "react-router";
 export { Button } from "../ui/Button.js";
 export { Callout } from "../ui/Callout.js";

package/dist/declarations/lib/components/navigation/Navigation.d.ts

@@ -1,5 +1,6 @@
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
-export declare const Navigation: ({ onRequestClose, navigation, }: {
+export declare const Navigation: ({ onRequestClose, navigation, topNavItem, }: {
     onRequestClose?: () => void;
     navigation: NavigationItemType[];
+    topNavItem?: NavigationItemType;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/declarations/lib/plugins/openapi/playground/GraphiQL.d.ts

@@ -0,0 +1,14 @@
+import "graphiql/style.css";
+import "./graphiql-theme.css";
+export type GraphiQLTab = {
+    query: string;
+    variables?: string;
+    headers?: string;
+};
+export type GraphiQLPanelProps = {
+    endpoint: string;
+    defaultHeaders?: string;
+    defaultTabs?: GraphiQLTab[];
+};
+export declare const GraphiQLPanel: ({ endpoint, defaultHeaders, defaultTabs, }: GraphiQLPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default GraphiQLPanel;

package/dist/declarations/lib/plugins/openapi/playground/GraphiQLDialog.d.ts

@@ -0,0 +1,11 @@
+export type GraphiQLTab = {
+    query: string;
+    variables?: string;
+    headers?: string;
+};
+export type GraphiQLDialogProps = {
+    endpoint: string;
+    defaultHeaders?: string;
+    defaultTabs?: GraphiQLTab[];
+};
+export declare const GraphiQLDialog: ({ endpoint, defaultHeaders, defaultTabs, }: GraphiQLDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/declarations/lib/plugins/openapi/util/graphqlEndpoint.d.ts

@@ -0,0 +1,5 @@
+import type { OperationsFragmentFragment } from "../graphql/graphql.js";
+export type GraphQLEndpointConfig = {
+    endpoint?: string;
+};
+export declare const getGraphQLEndpoint: (operation: OperationsFragmentFragment) => GraphQLEndpointConfig | undefined;

package/dist/declarations/lib/ui/Callout.d.ts

@@ -1,53 +1,57 @@
 import { type LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
-declare const stylesMap: {
+declare const typeMap: {
     readonly note: {
-        readonly border: "border-gray-300 dark:border-zinc-800";
-        readonly bg: "bg-gray-100 dark:bg-zinc-800/50";
-        readonly iconColor: "text-gray-600 dark:text-zinc-300";
-        readonly titleColor: "text-gray-600 dark:text-zinc-300";
-        readonly textColor: "text-gray-600 dark:text-zinc-300 [&_a]:hover:text-gray-700 [&_a]:dark:hover:text-zinc-400";
+        readonly color: "var(--callout-note)";
         readonly Icon: LucideIcon;
     };
     readonly tip: {
-        readonly border: "border-green-500 dark:border-green-800";
-        readonly bg: "bg-green-200/25 dark:bg-green-950/70";
-        readonly iconColor: "text-green-600 dark:text-green-200";
-        readonly titleColor: "text-green-700 dark:text-green-200";
-        readonly textColor: "text-green-600 dark:text-green-50 [&_a]:hover:text-green-700 [&_a]:dark:hover:text-green-300";
+        readonly color: "var(--callout-tip)";
         readonly Icon: LucideIcon;
     };
     readonly info: {
-        readonly border: "border-blue-400 dark:border-blue-900/60";
-        readonly bg: "bg-blue-50 dark:bg-blue-950/40";
-        readonly iconColor: "text-blue-400 dark:text-blue-200";
-        readonly titleColor: "text-blue-700 dark:text-blue-200";
-        readonly textColor: "text-blue-600 dark:text-blue-100 [&_a]:hover:text-blue-800 [&_a]:dark:hover:text-blue-300";
+        readonly color: "var(--callout-info)";
         readonly Icon: LucideIcon;
     };
     readonly caution: {
-        readonly border: "border-yellow-500 dark:border-yellow-400/25";
-        readonly bg: "bg-yellow-100/60 dark:bg-yellow-400/10";
-        readonly iconColor: "text-yellow-700 dark:text-yellow-300";
-        readonly titleColor: "text-yellow-800 dark:text-yellow-300";
-        readonly textColor: "text-amber-800 dark:text-yellow-200 [&_a]:hover:text-amber-900 [&_a]:dark:hover:text-yellow-300";
+        readonly color: "var(--callout-caution)";
         readonly Icon: LucideIcon;
     };
     readonly danger: {
-        readonly border: "border-rose-400 dark:border-rose-800";
-        readonly bg: "bg-rose-50 dark:bg-rose-950/40";
-        readonly iconColor: "text-rose-400 dark:text-rose-300";
-        readonly titleColor: "text-rose-800 dark:text-rose-300";
-        readonly textColor: "text-rose-700 dark:text-rose-100 [&_a]:hover:text-rose-800 [&_a]:dark:hover:text-rose-300";
+        readonly color: "var(--callout-danger)";
+        readonly Icon: LucideIcon;
+    };
+    readonly sparkles: {
+        readonly color: "var(--callout-sparkles)";
+        readonly Icon: LucideIcon;
+    };
+    readonly rocket: {
+        readonly color: "var(--callout-rocket)";
+        readonly Icon: LucideIcon;
+    };
+    readonly settings: {
+        readonly color: "var(--callout-settings)";
+        readonly Icon: LucideIcon;
+    };
+    readonly zap: {
+        readonly color: "var(--callout-zap)";
+        readonly Icon: LucideIcon;
+    };
+    readonly lock: {
+        readonly color: "var(--callout-lock)";
+        readonly Icon: LucideIcon;
+    };
+    readonly megaphone: {
+        readonly color: "var(--callout-megaphone)";
         readonly Icon: LucideIcon;
     };
 };
 type CalloutProps = {
-    type: keyof typeof stylesMap;
+    type: keyof typeof typeMap;
     title?: string;
     children: ReactNode;
     className?: string;
-    icon?: boolean;
+    icon?: boolean | ReactNode;
 };
 export declare const Callout: ({ type, children, title, className, icon, }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/declarations/lib/util/MdxComponents.d.ts

@@ -22,11 +22,11 @@ export declare const MdxComponents: {
     Badge: typeof Badge;
     Button: import("react").ForwardRefExoticComponent<import("../ui/Button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Callout: ({ type, children, title, className, icon, }: {
-        type: "info" | "note" | "tip" | "caution" | "danger";
+        type: "info" | "lock" | "megaphone" | "rocket" | "settings" | "sparkles" | "zap" | "note" | "tip" | "caution" | "danger";
         title?: string;
         children: import("react").ReactNode;
         className?: string;
-        icon?: boolean;
+        icon?: boolean | import("react").ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
     Stepper: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
     Mermaid: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
@@ -37,6 +37,12 @@ export declare const MdxComponents: {
     caution: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
     warning: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
     danger: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
+    sparkles: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
+    rocket: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
+    settings: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
+    zap: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
+    lock: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
+    megaphone: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
     CodeTabs: (props: JSX.IntrinsicElements) => import("react/jsx-runtime").JSX.Element;
     CodeTabPanel: {
         (_props: import("../ui/CodeTabPanel.js").CodeTabPanelProps): null;

package/docs/components/callout.mdx

@@ -5,8 +5,12 @@ sidebar_icon: circle-alert
 
 import { Callout } from "zudoku/ui/Callout";
 import { ReactComponentDoc } from "zudoku/ui/ReactComponentDoc";
+import { FileHeartIcon } from "zudoku/icons";
 
-This is a callout component that can be used to draw attention to important information.
+A callout component to draw attention to important information.
+
+Writing Markdown? Use the [admonitions](../markdown/admonitions) shorthand (`:::tip`) instead of the
+component directly.
 
 ## Import
 
@@ -16,13 +20,6 @@ import { Callout } from "zudoku/ui/Callout";
 
 <ReactComponentDoc component={Callout} />
 
-:::tip{title="Hot tip"}
-
-There's a shortcut to use callout components in Markdown files:
-[Admonitions](../markdown/admonitions).
-
-:::
-
 ## Note
 
 <Callout type="note" title="Hey, listen!">
@@ -83,6 +80,78 @@ There's a shortcut to use callout components in Markdown files:
 </Callout>
 ```
 
+## Sparkles
+
+<Callout type="sparkles" title="What's new">
+  Highlight new features or AI-powered functionality.
+</Callout>
+
+```tsx
+<Callout type="sparkles" title="What's new">
+  Highlight new features or AI-powered functionality.
+</Callout>
+```
+
+## Rocket
+
+<Callout type="rocket" title="Getting started">
+  Spin up your first project in minutes.
+</Callout>
+
+```tsx
+<Callout type="rocket" title="Getting started">
+  Spin up your first project in minutes.
+</Callout>
+```
+
+## Settings
+
+<Callout type="settings" title="Configuration">
+  Tweak these options to match your workflow.
+</Callout>
+
+```tsx
+<Callout type="settings" title="Configuration">
+  Tweak these options to match your workflow.
+</Callout>
+```
+
+## Zap
+
+<Callout type="zap" title="Performance">
+  Use this pattern when latency matters.
+</Callout>
+
+```tsx
+<Callout type="zap" title="Performance">
+  Use this pattern when latency matters.
+</Callout>
+```
+
+## Lock
+
+<Callout type="lock" title="Authentication required">
+  This endpoint needs a valid API key.
+</Callout>
+
+```tsx
+<Callout type="lock" title="Authentication required">
+  This endpoint needs a valid API key.
+</Callout>
+```
+
+## Megaphone
+
+<Callout type="megaphone" title="Announcement">
+  We've just shipped a breaking change to the v2 API.
+</Callout>
+
+```tsx
+<Callout type="megaphone" title="Announcement">
+  We've just shipped a breaking change to the v2 API.
+</Callout>
+```
+
 ## Variations
 
 Callouts can be customized by omitting the title or icon:
@@ -97,6 +166,12 @@ Callouts can be customized by omitting the title or icon:
   Or have neither title nor icon
 </Callout>
 
+Or pass any React node as the `icon` to override the default for the chosen `type`:
+
+<Callout type="tip" icon={<FileHeartIcon />} title="Made with love">
+  The icon inherits the type's accent color.
+</Callout>
+
 ```tsx
 <Callout type="note">
   Without a title
@@ -109,4 +184,47 @@ Callouts can be customized by omitting the title or icon:
 <Callout type="note" icon={false}>
   Or have neither title nor icon
 </Callout>
+
+<Callout type="tip" icon={<FileHeartIcon />} title="Made with love">
+  The icon inherits the type's accent color.
+</Callout>
+```
+
+## Customize colors
+
+Each callout type is driven by a single CSS variable that determines the icon, border tint, and
+background tint via `color-mix`. Override any of them in your theme's `customCss` to recolor a type
+globally:
+
+```ts title="zudoku.config.ts"
+export default {
+  theme: {
+    customCss: `
+      :root {
+        --callout-tip: oklch(0.65 0.18 160);
+        --callout-sparkles: oklch(0.6 0.22 320);
+      }
+      .dark {
+        --callout-tip: oklch(0.78 0.18 160);
+        --callout-sparkles: oklch(0.75 0.2 320);
+      }
+    `,
+  },
+};
+```
+
+All available variables:
+
+```css
+--callout-note
+--callout-tip
+--callout-info
+--callout-caution
+--callout-danger
+--callout-sparkles
+--callout-rocket
+--callout-settings
+--callout-zap
+--callout-lock
+--callout-megaphone
 ```