zudoku 0.3.0-dev.57 → 0.3.0-dev.59

package/src/lib/plugins/api-keys/SettingsApiKeys.tsx

@@ -35,7 +35,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
   return (
     <div className="max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b border-border pb-3">
+      <div className="flex justify-between mb-4 border-b pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
         {service.createKey && (
           <Button asChild>
@@ -60,13 +60,13 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
       ) : (
         <ul
           className={cn(
-            "grid grid-cols-1  rounded border-border border",
+            "grid grid-cols-1  rounded border",
             "lg:grid-cols-[minmax(250px,min-content)_1fr_min-content]",
           )}
         >
           {data.map((key) => (
             <li
-              className="border-b border-border p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
+              className="border-b p-5 grid grid-cols-subgrid col-span-full gap-2 items-center"
               key={key.id}
             >
               <div className="flex flex-col gap-1 text-sm">
@@ -124,7 +124,7 @@ const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
   return (
     <div className="flex gap-2 items-center text-sm w-full">
       <input
-        className="border border-border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono max-w-min"
+        className="border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono max-w-min"
         value={revealed ? apiKey : "•".repeat(apiKey.length)}
       />
       <Button

package/src/lib/plugins/api-keys/index.tsx

@@ -4,6 +4,7 @@ import { DevPortalContext } from "../../core/DevPortalContext.js";
 import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
+  ProfileMenuPlugin,
 } from "../../core/plugins.js";
 import { RouterError } from "../../errors/RouterError.js";
 import { CreateApiKey } from "./CreateApiKey.js";
@@ -82,7 +83,7 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
 
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
-): DevPortalPlugin & ApiIdentityPlugin => {
+): DevPortalPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
   const endpoint =
     "endpoint" in options ? options.endpoint : DEFAULT_API_KEY_ENDPOINT;
 
@@ -90,6 +91,12 @@ export const apiKeyPlugin = (
     "getKeys" in options ? options : createDefaultHandler(endpoint);
 
   return {
+    getProfileMenuItems: () => [
+      {
+        label: "API Keys",
+        path: "/settings/api-keys",
+      },
+    ],
     getIdentities: async (context) => {
       try {
         const keys = await service.getKeys(context);

package/src/lib/plugins/custom-page/index.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { RouteObject } from "react-router-dom";
+import { ProseClasses } from "../../components/Markdown.js";
+import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+
+type CustomPageConfig = Array<{
+  path: string;
+  element: ReactNode;
+}>;
+
+export const customPagePlugin = (
+  config: CustomPageConfig,
+): DevPortalPlugin & NavigationPlugin => {
+  return {
+    getRoutes: (): RouteObject[] =>
+      config.map(({ path, element }) => ({
+        path,
+        // TODO: we should componentize prose pages
+        element: <div className={ProseClasses + " max-w-full"}>{element}</div>,
+      })),
+  };
+};

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -122,7 +122,7 @@ export const MdxPage = ({
               {prev.path ? (
                 <Link
                   to={prev.path}
-                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border rounded px-6 py-4 text-start hover:border-primary/85 transition shadow-sm hover:shadow-md"
                   title={
                     typeof prev.label === "string" ? prev.label : undefined
                   }
@@ -140,7 +140,7 @@ export const MdxPage = ({
               {next.path ? (
                 <Link
                   to={next.path}
-                  className="flex flex-col items-stretch gap-2 flex-1 truncate border border-border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
+                  className="flex flex-col items-stretch gap-2 flex-1 truncate border rounded px-6 py-4 text-end hover:border-primary/85 transition shadow-sm hover:shadow-md"
                   title={
                     typeof next.label === "string" ? next.label : undefined
                   }

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -66,10 +66,7 @@ export const OperationListItem = ({
         ))}
         {operation.responses.length > 0 && (
           <>
-            <Heading
-              level={3}
-              className="capitalize mt-8 pt-8 border-border border-t"
-            >
+            <Heading level={3} className="capitalize mt-8 pt-8 border-t">
               Responses
             </Heading>
             <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>

package/src/lib/plugins/openapi/ParameterList.tsx

@@ -18,7 +18,7 @@ export const ParameterList = ({
     <Heading level={3} id={`${id}/${group}-parameters`} className="capitalize">
       {group === "header" ? "Headers" : `${group} Parameters`}
     </Heading>
-    <ul className="list-none m-0 px-0 overflow-hidden border border-border divide-y divide-border rounded">
+    <ul className="list-none m-0 px-0 overflow-hidden border divide-y divide-border rounded">
       {parameters.map((parameter) => (
         <ParameterListItem
           key={`${parameter.name}-${parameter.in}`}

package/src/lib/plugins/openapi/SchemaListViewItem.tsx

@@ -37,7 +37,7 @@ export const SchemaListViewItem = ({
           <span className="text-muted-foreground">Deprecated</span>
         )}
         {!isRequired && (
-          <span className="py-px px-1.5 font-medium border border-border rounded-lg">
+          <span className="py-px px-1.5 font-medium border rounded-lg">
             optional {property.required}
           </span>
         )}
@@ -57,14 +57,14 @@ export const SchemaListViewItem = ({
             .map((value) => (
               <span
                 key={value}
-                className="font-mono text-xs border-border border bg-muted rounded px-1"
+                className="font-mono text-xs border bg-muted rounded px-1"
               >
                 {value}
               </span>
             ))
             .slice(0, 4)}
           {property.enum.length > 4 && (
-            <span className="font-mono text-xs border-border border bg-muted rounded px-1">
+            <span className="font-mono text-xs border bg-muted rounded px-1">
               ...
             </span>
           )}

package/src/lib/plugins/openapi/SidecarBox.tsx

@@ -8,7 +8,7 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "rounded-lg overflow-hidden border border-border dark:border-transparent",
+      "rounded-lg overflow-hidden border dark:border-transparent",
       className,
     )}
   >

package/src/lib/plugins/openapi/StaggeredRender.tsx

@@ -1,17 +1,31 @@
-import { Children, ReactNode, useEffect, useState } from "react";
+import {
+  Children,
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export const StaggeredRenderContext = createContext({ stagger: false });
 
 const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
-  const [isMounted, setIsMounted] = useState(typeof window === "undefined");
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [renderAll, setRenderAll] = useState(!stagger);
 
   useEffect(() => {
+    if (renderAll) {
+      return;
+    }
+
     const x = window.requestIdleCallback(() => {
-      setIsMounted(true);
+      setRenderAll(true);
     });
 
     return () => window.cancelIdleCallback(x);
-  }, []);
+  }, [renderAll]);
 
-  return !isMounted ? Children.toArray(children).slice(0, 3) : children;
+  return !renderAll ? Children.toArray(children).slice(0, 3) : children;
 };
 
 export default StaggeredRender;

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -194,7 +194,7 @@ export const Playground = ({
           <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md border-border">
-                <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+                <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
                   {method.toUpperCase()}
                 </div>
                 <div className="p-2 font-mono text-xs">
@@ -269,7 +269,7 @@ export const Playground = ({
               <TabsContent value="body">
                 <textarea
                   {...register("body")}
-                  className="border border-border w-full rounded p-2 bg-muted h-40"
+                  className="border w-full rounded p-2 bg-muted h-40"
                 />
               </TabsContent>
             </Tabs>

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow",
       className,
     )}
     {...props}

package/src/lib/ui/DropdownMenu.tsx

@@ -0,0 +1,199 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/lib/ui/button-variants.ts

@@ -20,6 +20,7 @@ export const buttonVariants = cva(
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
+        xl: "h-14 rounded-lg px-10 text-lg",
         icon: "h-9 w-9",
       },
     },

package/src/lib/util/MdxComponents.tsx

@@ -75,7 +75,7 @@ export const MdxComponents = {
       return (
         <SyntaxHighlight
           language={match?.[1] ?? "markup"}
-          className="rounded-xl overflow-x-auto p-4 border border-border dark:!bg-foreground/10 dark:border-transparent"
+          className="rounded-xl overflow-x-auto p-4 border dark:!bg-foreground/10 dark:border-transparent"
           showLanguageIndicator
           code={String(children).trim()}
         />

package/src/lib/util/joinPath.tsx

@@ -4,7 +4,8 @@ export const joinPath = (
   const cleanPath = parts
     .filter((part): part is string => Boolean(part))
     .map((part) => part.replace(/(^\/+|\/+$)/g, "")) // Strip leading and trailing slashes
-    .join("/");
+    .join("/")
+    .replace(/(^\/+|\/+$)/g, "");
 
   return cleanPath ? `/${cleanPath}` : "";
 };

package/dist/app/zudoku-manifest.d.ts

@@ -1 +0,0 @@
-export declare const paths: string[];

package/dist/app/zudoku-manifest.js

@@ -1,20 +0,0 @@
-import config from "virtual:zudoku-config";
-import { getRoutesByConfig } from "./main.js";
-const routes = getRoutesByConfig(config);
-const flattenPaths = (routes, basePath = "") => {
-    return routes.reduce((acc, route) => {
-        if (route.path) {
-            const fullPath = `${basePath}/${route.path}`.replace(/\/+/g, "/");
-            route.path !== "/" && acc.push(fullPath);
-            if (route.children) {
-                acc = acc.concat(flattenPaths(route.children, fullPath));
-            }
-        }
-        else if (route.children) {
-            acc = acc.concat(flattenPaths(route.children, basePath));
-        }
-        return acc;
-    }, []);
-};
-export const paths = flattenPaths(routes);
-//# sourceMappingURL=zudoku-manifest.js.map

package/dist/app/zudoku-manifest.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"zudoku-manifest.js","sourceRoot":"","sources":["../../src/app/zudoku-manifest.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,MAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,YAAY,GAAG,CAAC,MAAqB,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE;IAC5D,OAAO,MAAM,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,QAAQ,GAAG,GAAG,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAClE,KAAK,CAAC,IAAI,KAAK,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzC,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACnB,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC1B,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC3D,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC"}