zudoku 0.0.0-fb7d300 → 0.0.0-fc93837

package/lib/zudoku.plugin-search-inkeep.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-search-inkeep.js","sources":["../src/lib/plugins/search-inkeep/inkeep.ts","../src/lib/plugins/search-inkeep/index.tsx"],"sourcesContent":["import {\n  InkeepAIChatSettings,\n  InkeepModalSettings,\n  InkeepSearchSettings,\n} from \"@inkeep/widgets\";\n\nconst baseSettings = {\n  theme: {\n    components: {\n      AIChatPageWrapper: {\n        defaultProps: {\n          size: \"shrink-vertically\",\n          variant: \"no-shadow\",\n        },\n      },\n      SearchBarTrigger: {\n        defaultProps: {\n          size: \"expand\",\n          variant: \"subtle\", // Choose from 'emphasized' or 'subtle'\n        },\n      },\n    },\n  },\n} as const;\n\nconst modalSettings: InkeepModalSettings = {};\n\nconst searchSettings: InkeepSearchSettings = {};\n\nconst aiChatSettings: InkeepAIChatSettings = {};\n\nexport { aiChatSettings, baseSettings, modalSettings, searchSettings };\n","import type { InkeepWidgetBaseSettings } from \"@inkeep/widgets\";\nimport { lazy } from \"react\";\nimport { ClientOnly } from \"../../components/ClientOnly.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { aiChatSettings, baseSettings } from \"./inkeep.js\";\n\ntype PickedPluginInkeepBaseSettings =\n  | \"apiKey\"\n  | \"integrationId\"\n  | \"organizationId\"\n  | \"primaryBrandColor\"\n  | \"organizationDisplayName\";\n\ntype PluginInkeepBaseSettings = Pick<\n  InkeepWidgetBaseSettings,\n  PickedPluginInkeepBaseSettings\n>;\n\nconst Inkeep = lazy(() => import(\"./InkeepCustomTrigger.js\"));\n\nconst InkeepSearch = ({\n  prefilledQuery,\n  isOpen,\n  onClose,\n  settings,\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  prefilledQuery?: string | null;\n  settings: PluginInkeepBaseSettings;\n}) => {\n  return (\n    <Inkeep\n      isOpen={isOpen}\n      onClose={onClose}\n      baseSettings={{ ...baseSettings, ...settings }}\n      aiChatSettings={aiChatSettings}\n      searchSettings={{\n        prefilledQuery: prefilledQuery || undefined,\n      }}\n    />\n  );\n};\n\nexport const inkeepSearchPlugin = (\n  settings: PluginInkeepBaseSettings,\n): ZudokuPlugin => {\n  return {\n    renderSearch: ({\n      isOpen,\n      onClose,\n    }: {\n      isOpen: boolean;\n      onClose: () => void;\n    }) => {\n      return (\n        <ClientOnly>\n          <InkeepSearch isOpen={isOpen} onClose={onClose} settings={settings} />\n        </ClientOnly>\n      );\n    },\n  };\n};\n"],"names":["baseSettings","aiChatSettings","Inkeep","lazy","InkeepSearch","prefilledQuery","isOpen","onClose","settings","jsx","inkeepSearchPlugin","ClientOnly"],"mappings":";;;AAMA,MAAMA,IAAe;AAAA,EACnB,OAAO;AAAA,IACL,YAAY;AAAA,MACV,mBAAmB;AAAA,QACjB,cAAc;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,kBAAkB;AAAA,QAChB,cAAc;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,GAMMC,IAAuC,CAAC,GCXxCC,IAASC,EAAK,MAAM,OAAO,mCAA0B,CAAC,GAEtDC,IAAe,CAAC;AAAA,EACpB,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,MAOIC,gBAAAA,EAAA;AAAA,EAACP;AAAA,EAAA;AAAA,IACC,QAAAI;AAAA,IACA,SAAAC;AAAA,IACA,cAAc,EAAE,GAAGP,GAAc,GAAGQ,EAAS;AAAA,IAC7C,gBAAAP;AAAA,IACA,gBAAgB;AAAA,MACd,gBAAgBI,KAAkB;AAAA,IACpC;AAAA,EAAA;AAAA,GAKOK,IAAqB,CAChCF,OAEO;AAAA,EACL,cAAc,CAAC;AAAA,IACb,QAAAF;AAAA,IACA,SAAAC;AAAA,EAAA,4BAMGI,GACC,EAAA,UAAAF,gBAAAA,EAAAA,IAACL,KAAa,QAAAE,GAAgB,SAAAC,GAAkB,UAAAC,EAAoB,CAAA,EACtE,CAAA;AAEJ;"}
+{"version":3,"file":"zudoku.plugin-search-inkeep.js","sources":["../src/lib/plugins/search-inkeep/inkeep.ts","../src/lib/plugins/search-inkeep/index.tsx"],"sourcesContent":["const baseSettings = {\n  theme: {\n    components: {\n      AIChatPageWrapper: {\n        defaultProps: {\n          size: \"shrink-vertically\",\n          variant: \"no-shadow\",\n        },\n      },\n      SearchBarTrigger: {\n        defaultProps: {\n          size: \"expand\",\n          variant: \"subtle\", // Choose from 'emphasized' or 'subtle'\n        },\n      },\n    },\n  },\n} as const;\n\nconst modalSettings = {};\n\nconst searchSettings = {};\n\nconst aiChatSettings = {};\n\nexport { aiChatSettings, baseSettings, modalSettings, searchSettings };\n","import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ClientOnly } from \"../../components/ClientOnly.js\";\nimport type { ZudokuPlugin } from \"../../core/plugins.js\";\nimport { aiChatSettings, baseSettings } from \"./inkeep.js\";\n\ninterface PluginInkeepBaseSettings {\n  apiKey?: string;\n  integrationId: string;\n  organizationId: string;\n  organizationDisplayName?: string;\n  primaryBrandColor: string;\n}\n\ninterface InkeepEmbedConfig {\n  componentType: string;\n  targetElement: HTMLElement;\n  properties: unknown;\n}\n\ninterface InkeepWidget {\n  render: (config: InkeepEmbedConfig & { isOpen: boolean }) => void;\n}\n\ndeclare global {\n  let Inkeep: () => {\n    embed: (config: InkeepEmbedConfig) => InkeepWidget;\n  };\n}\n\nconst InkeepSearch = ({\n  prefilledQuery,\n  isOpen,\n  onClose,\n  settings,\n}: {\n  isOpen: boolean;\n  onClose: () => void;\n  prefilledQuery?: string | null;\n  settings: PluginInkeepBaseSettings;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const widgetRef = useRef<InkeepWidget | null>(null);\n  const [isInkeepAvailable, setIsInkeepAvailable] = useState(\n    typeof Inkeep !== \"undefined\",\n  );\n\n  const config: InkeepEmbedConfig = useMemo(\n    () => ({\n      componentType: \"CustomTrigger\",\n      targetElement: ref.current!,\n      properties: {\n        isOpen,\n        onClose,\n        onOpen: undefined,\n        baseSettings: { ...baseSettings, ...settings },\n        searchSettings: {\n          prefilledQuery: prefilledQuery || undefined,\n        },\n        aiChatSettings,\n      },\n    }),\n    [isOpen, onClose, prefilledQuery, settings, ref],\n  );\n\n  useEffect(() => {\n    if (isInkeepAvailable) return;\n\n    const checkInkeep = setInterval(() => {\n      if (typeof Inkeep !== \"undefined\") {\n        setIsInkeepAvailable(true);\n        clearInterval(checkInkeep);\n      }\n    }, 100);\n\n    return () => clearInterval(checkInkeep);\n  }, [isInkeepAvailable]);\n\n  useEffect(() => {\n    if (!isInkeepAvailable || widgetRef.current) return;\n\n    widgetRef.current = Inkeep().embed(config);\n  }, [config, isInkeepAvailable]);\n\n  useEffect(() => {\n    widgetRef.current?.render({ ...config, isOpen });\n  }, [config, isOpen]);\n\n  return <div ref={ref} />;\n};\n\nexport const inkeepSearchPlugin = (\n  settings: PluginInkeepBaseSettings,\n): ZudokuPlugin => {\n  return {\n    getHead: () => {\n      return (\n        <script\n          type=\"module\"\n          src=\"https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js\"\n          defer\n        />\n      );\n    },\n    renderSearch: ({\n      isOpen,\n      onClose,\n    }: {\n      isOpen: boolean;\n      onClose: () => void;\n    }) => {\n      return (\n        <ClientOnly>\n          <InkeepSearch isOpen={isOpen} onClose={onClose} settings={settings} />\n        </ClientOnly>\n      );\n    },\n  };\n};\n"],"names":["baseSettings","aiChatSettings","InkeepSearch","prefilledQuery","isOpen","onClose","settings","ref","useRef","widgetRef","isInkeepAvailable","setIsInkeepAvailable","useState","config","useMemo","useEffect","checkInkeep","_a","jsx","inkeepSearchPlugin","ClientOnly"],"mappings":";;;AAAA,MAAMA,IAAe;AAAA,EACnB,OAAO;AAAA,IACL,YAAY;AAAA,MACV,mBAAmB;AAAA,QACjB,cAAc;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MACA,kBAAkB;AAAA,QAChB,cAAc;AAAA,UACZ,MAAM;AAAA,UACN,SAAS;AAAA;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAEJ,GAMMC,IAAiB,CAAC,GCMlBC,IAAe,CAAC;AAAA,EACpB,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,MAKM;AACE,QAAAC,IAAMC,EAAuB,IAAI,GACjCC,IAAYD,EAA4B,IAAI,GAC5C,CAACE,GAAmBC,CAAoB,IAAIC;AAAA,IAChD,OAAO,SAAW;AAAA,EACpB,GAEMC,IAA4BC;AAAA,IAChC,OAAO;AAAA,MACL,eAAe;AAAA,MACf,eAAeP,EAAI;AAAA,MACnB,YAAY;AAAA,QACV,QAAAH;AAAA,QACA,SAAAC;AAAA,QACA,QAAQ;AAAA,QACR,cAAc,EAAE,GAAGL,GAAc,GAAGM,EAAS;AAAA,QAC7C,gBAAgB;AAAA,UACd,gBAAgBH,KAAkB;AAAA,QACpC;AAAA,QACA,gBAAAF;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,CAACG,GAAQC,GAASF,GAAgBG,GAAUC,CAAG;AAAA,EACjD;AAEA,SAAAQ,EAAU,MAAM;AACd,QAAIL,EAAmB;AAEjB,UAAAM,IAAc,YAAY,MAAM;AAChC,MAAA,OAAO,SAAW,QACpBL,EAAqB,EAAI,GACzB,cAAcK,CAAW;AAAA,OAE1B,GAAG;AAEC,WAAA,MAAM,cAAcA,CAAW;AAAA,EAAA,GACrC,CAACN,CAAiB,CAAC,GAEtBK,EAAU,MAAM;AACV,IAAA,CAACL,KAAqBD,EAAU,YAEpCA,EAAU,UAAU,SAAS,MAAMI,CAAM;AAAA,EAAA,GACxC,CAACA,GAAQH,CAAiB,CAAC,GAE9BK,EAAU,MAAM;;AACd,KAAAE,IAAAR,EAAU,YAAV,QAAAQ,EAAmB,OAAO,EAAE,GAAGJ,GAAQ,QAAAT;EAAQ,GAC9C,CAACS,GAAQT,CAAM,CAAC,GAEZc,gBAAAA,MAAC,SAAI,KAAAX,GAAU;AACxB,GAEaY,IAAqB,CAChCb,OAEO;AAAA,EACL,SAAS,MAELY,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAI;AAAA,MACJ,OAAK;AAAA,IAAA;AAAA,EACP;AAAA,EAGJ,cAAc,CAAC;AAAA,IACb,QAAAd;AAAA,IACA,SAAAC;AAAA,EAAA,4BAMGe,GACC,EAAA,UAAAF,gBAAAA,EAAA,IAAChB,KAAa,QAAAE,GAAgB,SAAAC,GAAkB,UAAAC,GAAoB,EACtE,CAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-fb7d300",
+  "version": "0.0.0-fc93837",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -54,6 +54,10 @@
       "import": "./lib/zudoku.plugin-api-keys.js",
       "types": "./dist/lib/plugins/api-keys/index.d.ts"
     },
+    "./plugins/api-catalog": {
+      "import": "./lib/zudoku.plugin-api-catalog.js",
+      "types": "./dist/lib/plugins/api-catalog/index.d.ts"
+    },
     "./plugins/markdown": {
       "import": "./lib/zudoku.plugin-markdown.js",
       "types": "./dist/lib/plugins/markdown/index.d.ts"
@@ -74,14 +78,14 @@
       "import": "./lib/zudoku.plugin-search-inkeep.js",
       "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
     },
-    "./openapi-worker": {
-      "import": "./lib/zudoku.openapi-worker.js",
-      "types": "./dist/lib/plugins/openapi-worker.d.ts"
-    },
     "./components": {
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
     },
+    "./post-processors/*": {
+      "import": "./lib/post-processors/*.js",
+      "types": "./dist/lib/plugins/openapi/post-processors/*.d.ts"
+    },
     "./icons": {
       "import": "./lib/zudoku.icons.js",
       "types": "./dist/lib/icons.d.ts"
@@ -100,82 +104,87 @@
     },
     "./app/*": {
       "import": "./src/app/*"
+    },
+    "./with-zuplo": {
+      "require": "./dist/zuplo/with-zuplo.js",
+      "import": "./dist/zuplo/with-zuplo.js"
     }
   },
   "dependencies": {
-    "@envelop/core": "5.0.2",
+    "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hiogawa/vite-plugin-ssr-css": "0.0.1",
-    "@hookform/resolvers": "3.9.1",
-    "@lekoarts/rehype-meta-as-attributes": "3.0.1",
-    "@mdx-js/react": "3.0.1",
-    "@mdx-js/rollup": "3.0.1",
+    "@hookform/resolvers": "3.10.0",
+    "@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.1",
-    "@radix-ui/react-alert-dialog": "1.1.2",
-    "@radix-ui/react-aspect-ratio": "1.1.0",
-    "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-collapsible": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-progress": "1.1.0",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-scroll-area": "1.2.1",
-    "@radix-ui/react-select": "2.1.2",
-    "@radix-ui/react-slider": "1.2.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toggle": "1.1.0",
-    "@radix-ui/react-toggle-group": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.3",
-    "@radix-ui/react-visually-hidden": "1",
-    "@sentry/node": "8.34.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",
     "@sindresorhus/slugify": "2.2.1",
-    "@stefanprobst/rehype-extract-toc": "2.2.0",
-    "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query": "5.61.0",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.1",
-    "@zudoku/config": "0.0.0-fb7d300",
+    "@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",
+    "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
-    "@zudoku/react-helmet-async": "2.0.4",
+    "@zudoku/react-helmet-async": "2.0.5",
     "autoprefixer": "10.4.20",
     "chokidar": "3.6.0",
-    "class-variance-authority": "0.7.0",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
-    "dotenv": "16.4.5",
-    "embla-carousel-react": "8.3.1",
+    "devlop": "^1.1.0",
+    "dotenv": "16.4.7",
+    "embla-carousel-react": "8.5.2",
     "estree-util-value-to-estree": "3.2.1",
-    "express": "4.21.1",
-    "glob": "11.0.0",
-    "graphql": "16.9.0",
+    "express": "4.21.2",
+    "glob": "11.0.1",
+    "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.7.0",
+    "graphql-yoga": "5.10.10",
     "gray-matter": "4.0.3",
+    "hast-util-to-jsx-runtime": "^2.3.2",
+    "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.1",
-    "lucide-react": "0.452.0",
-    "next-themes": "0.4.3",
+    "lru-cache": "11.0.2",
+    "lucide-react": "0.473.0",
+    "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
-    "picocolors": "1.1.0",
-    "postcss": "8.4.47",
-    "posthog-node": "4.2.1",
-    "prism-react-renderer": "2.4.0",
+    "picocolors": "1.1.1",
+    "postcss": "8.5.1",
+    "posthog-node": "4.4.1",
+    "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "react-error-boundary": "4.1.2",
-    "react-hook-form": "7.53.0",
-    "react-is": "18.3.1",
-    "react-markdown": "9.0.1",
-    "react-router-dom": "6.27.0",
+    "react-error-boundary": "5.0.0",
+    "react-hook-form": "7.54.2",
+    "react-is": "19.0.0",
+    "react-router": "7.1.3",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -184,62 +193,70 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "remark-mdx-frontmatter": "5.0.0",
-    "rollup": "4.24.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "rollup": "4.31.0",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "2.5.4",
-    "tailwindcss": "3.4.13",
+    "tailwind-merge": "2.6.0",
+    "tailwindcss": "3.4.17",
+    "tsx": "^4.19.2",
     "ulidx": "2.4.1",
+    "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
-    "urql": "4.1.0",
-    "vaul": "1.1.0",
+    "urql": "4.2.1",
+    "vaul": "1.1.2",
     "vfile": "6.0.3",
-    "vite": "5.4.9",
-    "yaml": "2.6.0",
+    "vite": "6.0.11",
+    "yaml": "2.7.0",
     "yargs": "17.7.2",
-    "zod": "3.23.8",
+    "zod": "3.24.1",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.0"
+    "zustand": "5.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
-    "@graphql-codegen/client-preset": "4.5.0",
+    "@graphql-codegen/client-preset": "4.5.1",
     "@types/estree": "1.0.6",
     "@types/express": "5.0.0",
-    "@types/har-format": "1.2.15",
+    "@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/object-hash": "3.0.6",
-    "@types/react-is": "18.3.0",
+    "@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",
     "mdast-util-mdx": "3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rollup-plugin-visualizer": "5.12.0",
-    "typescript": "5.7.2"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "rollup-plugin-visualizer": "5.14.0",
+    "typescript": "5.7.3",
+    "vitest": "3.0.2"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "5.11.0",
-    "@inkeep/widgets": "^0.2.289"
+    "@clerk/clerk-js": "^5.43.4",
+    "@sentry/react": "^8.50.0"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.json",
+    "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",
-    "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
     "clean": "tsc --build --clean",
     "codegen": "graphql-codegen --config ./src/codegen.ts",
-    "test": "node --test --enable-source-maps"
+    "test": "vitest run"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts"

package/src/app/demo.tsx

@@ -1,6 +1,6 @@
 import logger from "loglevel";
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";
@@ -48,7 +48,6 @@ const config = {
       type: "url",
       input: apiUrl,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/app/entry.client.tsx

@@ -3,9 +3,10 @@ import {
   createBrowserRouter,
   matchRoutes,
   type RouteObject,
-} from "react-router-dom";
+} 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";
@@ -13,6 +14,12 @@ import { getRoutesByConfig } from "./main.js";
 const routes = getRoutesByConfig(config);
 const root = document.getElementById("root")!;
 
+if (process.env.SENTRY_DSN) {
+  void import("./sentry.js").then((mod) => {
+    mod.initSentry({ dsn: process.env.SENTRY_DSN as string });
+  });
+}
+
 if (root.childElementCount > 0) {
   void hydrate(routes);
 } else {
@@ -38,13 +45,6 @@ async function hydrateLazyRoutes(routes: RouteObject[]) {
 function render(routes: RouteObject[]) {
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
-    future: {
-      v7_relativeSplatPath: true,
-      v7_fetcherPersist: true,
-      v7_partialHydration: true,
-      v7_skipActionErrorRevalidation: true,
-      v7_normalizeFormMethod: true,
-    },
   });
   createRoot(root).render(<Bootstrap router={router} />);
 }
@@ -53,14 +53,15 @@ async function hydrate(routes: RouteObject[]) {
   await hydrateLazyRoutes(routes);
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
-    future: {
-      v7_relativeSplatPath: true,
-      v7_fetcherPersist: true,
-      v7_partialHydration: true,
-      v7_skipActionErrorRevalidation: true,
-      v7_normalizeFormMethod: true,
-    },
   });
 
   hydrateRoot(root, <Bootstrap hydrate router={router} />);
 }
+
+// This is a workaround to avoid version skewing
+// See https://vite.dev/guide/build.html#load-error-handling
+// TODO: Implement a more advanced solution if there are CDN urls or e.g. Vercel Skew Protection
+window.addEventListener("vite:preloadError", (e) => {
+  e.preventDefault();
+  window.location.reload();
+});

package/src/app/entry.server.tsx

@@ -4,12 +4,13 @@ import type express from "express";
 import logger from "loglevel";
 import { Transform } from "node:stream";
 import { renderToPipeableStream, renderToStaticMarkup } from "react-dom/server";
-import { isRouteErrorResponse } from "react-router-dom";
 import {
   createStaticHandler,
   createStaticRouter,
-} from "react-router-dom/server.js";
+  isRouteErrorResponse,
+} 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";

package/src/app/main.css

@@ -85,8 +85,8 @@
       var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.72");
-    --padding-content-top: theme("spacing.12");
+    --side-nav-width: theme("spacing.80");
+    --padding-content-top: theme("spacing.6");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
@@ -238,48 +238,61 @@
   }
 
   /* Theme */
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: var(--primary);
-    --radius: 0.5rem;
-  }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: var(--primary);
+  @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%;
+    }
   }
 }

package/src/app/main.tsx

@@ -1,6 +1,9 @@
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
-import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
+import {
+  configuredApiCatalogPlugins,
+  configuredApiPlugins,
+} from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
@@ -10,8 +13,10 @@ import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import { Layout, RouterError, Zudoku } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
+import { StatusPage } from "../lib/components/StatusPage.js";
 import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
+import { RouteGuard } from "../lib/core/RouteGuard.js";
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
@@ -29,6 +34,7 @@ export const convertZudokuConfigToOptions = (
     !config.page?.logo?.src?.dark;
 
   return {
+    protectedRoutes: config.protectedRoutes,
     page: {
       ...config.page,
       logo: {
@@ -57,6 +63,7 @@ export const convertZudokuConfigToOptions = (
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
       ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
       ...(configuredCustomPagesPlugin ? [configuredCustomPagesPlugin] : []),
+      ...configuredApiCatalogPlugins,
       ...(configuredAuthProvider?.getAuthenticationPlugin
         ? [configuredAuthProvider.getAuthenticationPlugin()]
         : []),
@@ -65,7 +72,10 @@ export const convertZudokuConfigToOptions = (
   };
 };
 
-export const getRoutesByOptions = (options: ZudokuContextOptions) => {
+export const getRoutesByOptions = (
+  options: ZudokuContextOptions,
+  enableStatusPages = false,
+) => {
   const allPlugins = [
     ...(options.plugins ? options.plugins : []),
     ...(options.authentication?.getAuthenticationPlugin
@@ -75,19 +85,31 @@ export const getRoutesByOptions = (options: ZudokuContextOptions) => {
 
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .concat({
-      path: "*",
-      loader: () => {
-        throw new Response("Not Found", { status: 404 });
+    .concat(
+      enableStatusPages
+        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
+            (statusCode) => ({
+              path: `/.static/${statusCode}`,
+              element: <StatusPage statusCode={statusCode} />,
+            }),
+          )
+        : [],
+    )
+    .concat([
+      {
+        path: "*",
+        loader: () => {
+          throw new Response("Not Found", { status: 404 });
+        },
       },
-    });
+    ]);
 
   return routes;
 };
 
 export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
   const options = convertZudokuConfigToOptions(config);
-  const routes = getRoutesByOptions(options);
+  const routes = getRoutesByOptions(options, config.enableStatusPages);
 
   return [
     {
@@ -98,6 +120,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       ),
       children: [
         {
+          element: <RouteGuard />,
           errorElement: <RouterError />,
           children: routes,
         },

package/src/app/sentry.ts

@@ -0,0 +1,24 @@
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router";
+
+export const initSentry = ({ dsn }: { dsn: string }) => {
+  Sentry.init({
+    dsn,
+    integrations: [
+      Sentry.reactRouterV6BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration(),
+    ],
+  });
+};

package/src/app/standalone.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
@@ -43,7 +43,6 @@ const config = {
       type: "url",
       input: apiUrl!,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;