zudoku 0.24.1 → 0.25.0

package/lib/zudoku.plugin-openapi.js

@@ -1,6 +1,6 @@
 import "./jsx-runtime-Dx-03ztt.js";
 import "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { o as a } from "./index-DzRORsY1.js";
+import { o as a } from "./index-DkwDHnit.js";
 import "./ZudokuContext-hmLMUdf2.js";
 import "lucide-react";
 import "./hook-CHq7pFyz.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

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 */
+  
+@layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 240 10% 3.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;
+    --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: 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%;
+    --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: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: var(--primary);
+    --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/lib/components/Header.tsx

@@ -65,8 +65,8 @@ export const Header = memo(function HeaderInner() {
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-4 lg:px-12 h-[--top-header-height]">
+      <div className="border-b">
+        <div className="max-w-screen-2xl border-l border-r mx-auto grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center px-4 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -176,9 +176,13 @@ export const Header = memo(function HeaderInner() {
             </div>
           </div>
         </div>
-        <Slotlet name="top-navigation-before" />
-        <TopNavigation />
-        <Slotlet name="top-navigation-after" />
+      </div>
+      <div className="border-b">
+        <div className="max-w-screen-2xl mx-auto border-l border-r">
+          <Slotlet name="top-navigation-before" />
+          <TopNavigation />
+          <Slotlet name="top-navigation-after" />
+        </div>
       </div>
     </header>
   );

package/src/lib/components/Layout.tsx

@@ -66,7 +66,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12">
+      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12 border-l border-r">
         {showSpinner ? (
           <LoadingFallback />
         ) : (

package/src/lib/components/TopNavigation.tsx

@@ -30,7 +30,7 @@ export const TopNavigation = () => {
 
   return (
     <Suspense>
-      <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
+      <nav className="hidden lg:block text-sm px-12 h-[--top-nav-height]">
         <ul className="flex flex-row items-center gap-8">
           {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.id}>
@@ -78,7 +78,7 @@ export const TopNavItem = ({
     <NavLink
       className={({ isPending }) =>
         cx(
-          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          "block lg:py-3.5 font-medium -mb-px",
           isActive || isPending
             ? "border-primary text-foreground"
             : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",

package/src/lib/components/navigation/SidebarWrapper.tsx

@@ -12,8 +12,8 @@ export const SidebarWrapper = forwardRef<
     // maybe this could be simplified by adjusting the layout
     data-navigation={String(pushMainContent)}
     className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
-      "-mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
+      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-10",
+      "-mx-[--padding-nav-item] pb-20 pt-[--padding-content-top]",
       "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
       className,
     )}

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

@@ -1,3 +1,4 @@
+import { FoldVerticalIcon, UnfoldVerticalIcon } from "lucide-react";
 import { type CSSProperties, type ReactNode, useRef, useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
 import {
@@ -43,22 +44,23 @@ export const CollapsibleCode = ({
       <CollapsibleContent
         forceMount
         className={cn(
-          "relative overflow-hidden",
+          "relative overflow-hidden group",
           !open && isOverflowing && "max-h-[--max-height]",
         )}
       >
         {!open && isOverflowing && (
-          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/90 dark:to-zinc-800/90 z-10"></div>
+          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/90 dark:to-zinc-800/90 z-10 group-hover:to-transparent"></div>
         )}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
           <CollapsibleTrigger
-            className="absolute inset-0 grid place-items-center z-10"
+            className="absolute inset-0 grid place-items-center z-10 cursor-pointer peer"
             asChild
           >
             <div>
-              <Button className="bg-primary/70 border border-accent-foreground/25">
-                Expand code
+              <Button variant="outline" className="hidden group-hover:flex">
+                <UnfoldVerticalIcon size={14} className="mr-1.5" />
+                Click to expand
               </Button>
             </div>
           </CollapsibleTrigger>
@@ -69,8 +71,9 @@ export const CollapsibleCode = ({
           className={cn("flex justify-center w-full mb-2", !open && "hidden")}
         >
           <CollapsibleTrigger asChild>
-            <Button className="border border-accent-foreground/25">
-              Collapse code
+            <Button variant="outline" size="sm">
+              Collapse
+              <FoldVerticalIcon size={14} className="ml-1.5" />
             </Button>
           </CollapsibleTrigger>
         </div>

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

@@ -66,9 +66,7 @@ export const Endpoint = () => {
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <span className="font-medium text-sm">
-        {servers.length > 1 ? "Endpoints" : "Endpoint"}:
-      </span>
+      <span className="font-medium text-sm">Endpoint</span>
 
       <SimpleSelect
         className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"

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

@@ -181,7 +181,7 @@ export const Sidecar = ({
       className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4"
     >
       <SidecarBox.Root>
-        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-3 gap-2 text-xs">
+        <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-4 gap-2 text-xs">
           <span className="font-mono break-words">
             <span className={cn("font-semibold", methodTextColor)}>
               {operation.method.toLocaleUpperCase()}
@@ -211,7 +211,7 @@ export const Sidecar = ({
                 />
               </CollapsibleCode>
             </SidecarBox.Body>
-            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">
+            <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-3">
               <span>Show example in</span>
               <SimpleSelect
                 className="self-start max-w-[150px]"

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

@@ -7,10 +7,7 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
-    className={cn(
-      "rounded-lg overflow-hidden border dark:border-transparent",
-      className,
-    )}
+    className={cn("rounded-xl overflow-hidden border border-border", className)}
   >
     {children}
   </div>
@@ -19,7 +16,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      "border-b bg-muted dark:bg-transparent text-card-foreground p-3",
       className,
     )}
   >
@@ -28,20 +25,11 @@ export const Head = ({ children, className }: BaseComponentProps) => (
 );
 
 export const Body = ({ children, className }: BaseComponentProps) => (
-  <div
-    className={cn("bg-zinc-50 dark:bg-zinc-800 overflow-auto p-2", className)}
-  >
-    {children}
-  </div>
+  <div className={cn("bg-card overflow-auto p-2", className)}>{children}</div>
 );
 
 export const Footer = ({ children, className }: BaseComponentProps) => (
-  <div
-    className={cn(
-      "border-t dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
-      className,
-    )}
-  >
+  <div className={cn("border-t bg-muted dark:bg-transparent p-3", className)}>
     {children}
   </div>
 );

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

@@ -63,6 +63,7 @@ export const Headers = ({
           className=""
           onClick={() => append({ name: "", value: "" })}
           type="button"
+          variant="secondary"
         >
           Add header
         </Button>

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

@@ -39,7 +39,7 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <button className="flex gap-1 items-center px-2 py-1 rounded-md bg-primary/80 hover:bg-primary transition text-primary-foreground text-xs">
+          <button className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-sm hover:bg-primary/80">
             Test
             <HeroPlayIcon className="" size={14} />
           </button>

package/src/lib/ui/Card.tsx

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