zudoku 0.14.0 → 0.14.1

package/lib/zudoku.openapi-worker.js

@@ -15,7 +15,7 @@ var Sn = (t, e, n, i) => ({
 });
 import { a as $l } from "./index-LNp6rxyU.js";
 import { g as jl } from "./_commonjsHelpers-BkfeUUK-.js";
-import { C as Qa, b as Wa, m as Ha, f as Ya } from "./urql-core-CqTI9H6N.js";
+import { C as Qa, b as Wa, m as Ha, f as Ya } from "./urql-core-KJnLL26g.js";
 function Pl(t, e) {
   for (var n = 0; n < e.length; n++) {
     const i = e[n];

package/lib/zudoku.plugin-api-keys.js

@@ -1,5 +1,5 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as m, R as g } from "./SlotletProvider-4Naek_5M.js";
+import { S as m, R as g } from "./SlotletProvider-Da7eFgd2.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
 import { u as d, S as f, a as j, b as v, c as w, d as b, e as x } from "./Select-Bagt3Bme.js";
 import { a as k } from "./index.esm-C5mr_sKO.js";

package/lib/zudoku.plugin-custom-pages.js

@@ -1,22 +1,22 @@
-import { j as e } from "./jsx-runtime-B6kdoens.js";
+import { j as o } from "./jsx-runtime-B6kdoens.js";
 import a from "react";
 import { P as n } from "./Markdown-BDcCAWwm.js";
 import { c } from "./cn-BmFQLtkS.js";
-import { u } from "./useExposedProps-B9K-9GTc.js";
-const l = ({
-  element: s,
-  render: t,
-  prose: o = !0
+import { u as p } from "./useExposedProps-ChOIUaS4.js";
+const u = ({
+  element: t,
+  render: s,
+  prose: e = !0
 }) => {
-  const r = u(), m = t ? a.createElement(t, r) : s;
-  return /* @__PURE__ */ e.jsx("div", { className: c(o && n, "max-w-full"), children: m });
-}, g = (s) => ({
-  getRoutes: () => s.map(({ path: t, ...o }) => ({
-    path: t,
-    element: /* @__PURE__ */ e.jsx(l, { ...o })
+  const r = p(), m = s ? a.createElement(s, r) : t;
+  return /* @__PURE__ */ o.jsx("div", { className: c(e && n, "max-w-full"), children: m });
+}, d = (t) => ({
+  getRoutes: () => t.map(({ path: s, ...e }) => ({
+    path: s,
+    element: /* @__PURE__ */ o.jsx(u, { ...e })
   }))
 });
 export {
-  g as customPagesPlugin
+  d as customPagesPlugin
 };
 //# sourceMappingURL=zudoku.plugin-custom-pages.js.map

package/lib/zudoku.plugin-custom-pages.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-custom-pages.js","sources":["../src/lib/plugins/custom-pages/CustomPage.tsx","../src/lib/plugins/custom-pages/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ProseClasses } from \"../../components/Markdown.js\";\nimport { cn } from \"../../util/cn.js\";\nimport { useExposedProps } from \"../../util/useExposedProps.js\";\nimport type { CustomPageConfig } from \"./index.js\";\n\nexport const CustomPage = ({\n  element,\n  render,\n  prose = true,\n}: Omit<CustomPageConfig, \"path\">) => {\n  const slotletProps = useExposedProps();\n  const content = render ? React.createElement(render, slotletProps) : element;\n\n  return (\n    <div className={cn(prose && ProseClasses, \"max-w-full\")}>{content}</div>\n  );\n};\n","import { type ComponentType, type ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { type ExposedComponentProps } from \"../../components/SlotletProvider.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\nimport { CustomPage } from \"./CustomPage.js\";\n\nexport type CustomPageConfig = {\n  path: string;\n  prose?: boolean;\n  element?: ReactNode;\n  render?: ComponentType<ExposedComponentProps>;\n};\n\nexport const customPagesPlugin = (\n  config: CustomPageConfig[],\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, ...props }) => ({\n        path,\n        element: <CustomPage {...props} />,\n      })),\n  };\n};\n"],"names":["CustomPage","element","render","prose","slotletProps","useExposedProps","content","React","jsx","cn","ProseClasses","customPagesPlugin","config","path","props"],"mappings":";;;;;AAMO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,MAAsC;AACpC,QAAMC,IAAeC,KACfC,IAAUJ,IAASK,EAAM,cAAcL,GAAQE,CAAY,IAAIH;AAGnE,SAAAO,gBAAAA,MAAC,SAAI,WAAWC,EAAGN,KAASO,GAAc,YAAY,GAAI,UAAQJ,EAAA,CAAA;AAEtE,GCJaK,IAAoB,CAC/BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,GAAGC,SAAa;AAAA,IAClC,MAAAD;AAAA,IACA,SAASL,gBAAAA,EAAAA,IAACR,GAAY,EAAA,GAAGc,EAAO,CAAA;AAAA,EAAA,EAChC;AAAA;"}
+{"version":3,"file":"zudoku.plugin-custom-pages.js","sources":["../src/lib/plugins/custom-pages/CustomPage.tsx","../src/lib/plugins/custom-pages/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ProseClasses } from \"../../components/Markdown.js\";\nimport { cn } from \"../../util/cn.js\";\nimport { useExposedProps } from \"../../util/useExposedProps.js\";\nimport type { CustomPageConfig } from \"./index.js\";\n\nexport const CustomPage = ({\n  element,\n  render,\n  prose = true,\n}: Omit<CustomPageConfig, \"path\">) => {\n  const exposedProps = useExposedProps();\n  const content = render ? React.createElement(render, exposedProps) : element;\n\n  return (\n    <div className={cn(prose && ProseClasses, \"max-w-full\")}>{content}</div>\n  );\n};\n","import { type ComponentType, type ReactNode } from \"react\";\nimport type { RouteObject } from \"react-router-dom\";\nimport { type ExposedComponentProps } from \"../../components/SlotletProvider.js\";\nimport type { DevPortalPlugin, NavigationPlugin } from \"../../core/plugins.js\";\nimport { CustomPage } from \"./CustomPage.js\";\n\nexport type CustomPageConfig = {\n  path: string;\n  prose?: boolean;\n  element?: ReactNode;\n  render?: ComponentType<ExposedComponentProps>;\n};\n\nexport const customPagesPlugin = (\n  config: CustomPageConfig[],\n): DevPortalPlugin & NavigationPlugin => {\n  return {\n    getRoutes: (): RouteObject[] =>\n      config.map(({ path, ...props }) => ({\n        path,\n        element: <CustomPage {...props} />,\n      })),\n  };\n};\n"],"names":["CustomPage","element","render","prose","exposedProps","useExposedProps","content","React","jsx","cn","ProseClasses","customPagesPlugin","config","path","props"],"mappings":";;;;;AAMO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,MAAsC;AACpC,QAAMC,IAAeC,KACfC,IAAUJ,IAASK,EAAM,cAAcL,GAAQE,CAAY,IAAIH;AAGnE,SAAAO,gBAAAA,MAAC,SAAI,WAAWC,EAAGN,KAASO,GAAc,YAAY,GAAI,UAAQJ,EAAA,CAAA;AAEtE,GCJaK,IAAoB,CAC/BC,OAEO;AAAA,EACL,WAAW,MACTA,EAAO,IAAI,CAAC,EAAE,MAAAC,GAAM,GAAGC,SAAa;AAAA,IAClC,MAAAD;AAAA,IACA,SAASL,gBAAAA,EAAAA,IAACR,GAAY,EAAA,GAAGc,EAAO,CAAA;AAAA,EAAA,EAChC;AAAA;"}

package/lib/zudoku.plugin-openapi.js

@@ -1,12 +1,12 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as s } from "./index-B3F9d8oi.js";
+import { o as s } from "./index-AjWCJNGC.js";
 import "./ZudokuContext-BKXGJTmu.js";
 import "lucide-react";
 import "zudoku/openapi-worker";
 import "./hook-sn0zMTkE.js";
 import "./Markdown-BDcCAWwm.js";
 import "./ui/Button.js";
-import "./urql-core-CqTI9H6N.js";
+import "./urql-core-KJnLL26g.js";
 import "./router-BsfSoK2j.js";
 import "./index-CRo94sKK.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -147,6 +147,7 @@
     "chokidar": "3.6.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "cmdk": "1.0.4",
     "dotenv": "16.4.5",
     "embla-carousel-react": "8.3.1",
     "express": "4.21.1",

package/src/lib/components/Header.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
 import { cn } from "../util/cn.js";
+import { joinPath } from "../util/joinPath.js";
 import { Banner } from "./Banner.js";
 import { useTheme } from "./context/ThemeContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -73,7 +74,10 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.light)
                           ? page.logo.src.light
-                          : import.meta.env.BASE_URL + page.logo.src.light
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.light,
+                            )
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
@@ -84,7 +88,10 @@ export const Header = memo(function HeaderInner() {
                       src={
                         /https?:\/\//.test(page.logo.src.dark)
                           ? page.logo.src.dark
-                          : import.meta.env.BASE_URL + page.logo.src.dark
+                          : joinPath(
+                              import.meta.env.BASE_URL,
+                              page.logo.src.dark,
+                            )
                       }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}

package/src/lib/components/SlotletProvider.tsx

@@ -8,6 +8,7 @@ import { isValidElementType } from "react-is";
 import {
   type Location,
   type NavigateFunction,
+  type Params,
   type SetURLSearchParams,
 } from "react-router-dom";
 import { useExposedProps } from "../util/useExposedProps.js";
@@ -38,6 +39,7 @@ export type ExposedComponentProps = {
   navigate: NavigateFunction;
   searchParams: URLSearchParams;
   setSearchParams: SetURLSearchParams;
+  params: Params;
 };
 
 export const Slotlet = ({ name }: { name: string }) => {

package/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -9,8 +9,8 @@ export const CustomPage = ({
   render,
   prose = true,
 }: Omit<CustomPageConfig, "path">) => {
-  const slotletProps = useExposedProps();
-  const content = render ? React.createElement(render, slotletProps) : element;
+  const exposedProps = useExposedProps();
+  const content = render ? React.createElement(render, exposedProps) : element;
 
   return (
     <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>

package/src/lib/ui/Command.tsx

@@ -0,0 +1,151 @@
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
+import { cn } from "../util/cn.js";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};

package/src/lib/util/useExposedProps.tsx

@@ -1,10 +1,16 @@
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
 import type { ExposedComponentProps } from "../components/SlotletProvider.js";
 
 export const useExposedProps = (): ExposedComponentProps => {
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const params = useParams();
 
-  return { location, navigate, searchParams, setSearchParams };
+  return { location, navigate, params, searchParams, setSearchParams };
 };