@lukoweb/apitogo 0.1.86 → 0.1.88

package/src/config/validators/ModulesSchema.ts

@@ -94,6 +94,7 @@ export const LandingApiShowcaseItemSchema = z.object({
   icon: z.string().optional(),
   latency: z.string().optional(),
   summary: z.string().optional(),
+  method: z.string().optional(),
 });
 
 export const LandingApiShowcaseSchema = z
@@ -104,6 +105,7 @@ export const LandingApiShowcaseSchema = z
     browseAllHref: z.string().optional(),
     browseAllLabel: z.string().optional(),
     autoFromOpenApi: z.boolean().optional(),
+    layout: z.enum(["grid", "list"]).optional(),
     items: z.array(LandingApiShowcaseItemSchema).optional(),
   })
   .optional();

package/src/lib/authentication/providers/dev-portal-auth-pages.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from "@lukoweb/apitogo/components";
+import { Badge } from "@lukoweb/apitogo/ui/Badge.js";
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
 import {
   Card,
@@ -9,7 +10,7 @@ import {
 } from "@lukoweb/apitogo/ui/Card.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Label } from "@lukoweb/apitogo/ui/Label.js";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
 import { Link, useSearchParams } from "react-router";
 import type { DevPortalAuthConfigResponse } from "./dev-portal-constants.js";
 import {
@@ -31,20 +32,31 @@ import {
 type AuthPageShellProps = {
   title: string;
   description?: string;
-  children: React.ReactNode;
+  badge?: ReactNode;
+  children: ReactNode;
 };
 
-function AuthPageShell({ title, description, children }: AuthPageShellProps) {
+function AuthPageShell({
+  title,
+  description,
+  badge,
+  children,
+}: AuthPageShellProps) {
   return (
-    <div className="flex items-center justify-center mt-8 px-4">
-      <Card className="max-w-md w-full">
-        <CardHeader>
-          <CardTitle className="text-lg">{title}</CardTitle>
+    <div className="flex items-center justify-center bg-muted px-5 py-10">
+      <Card className="w-full max-w-md gap-0 bg-card py-8">
+        <CardHeader className="gap-0 px-8 pb-0">
+          {badge ? <div className="mb-3.5">{badge}</div> : null}
+          <CardTitle className="text-2xl font-bold tracking-tight">
+            {title}
+          </CardTitle>
           {description ? (
-            <CardDescription>{description}</CardDescription>
+            <CardDescription className="mt-1 mb-[22px] text-sm">
+              {description}
+            </CardDescription>
           ) : null}
         </CardHeader>
-        <CardContent className="space-y-4">{children}</CardContent>
+        <CardContent className="space-y-4 px-8">{children}</CardContent>
       </Card>
     </div>
   );
@@ -349,7 +361,7 @@ export function DevPortalRegisterPage({
   if (!baseUrl) {
     return (
       <AuthPageShell
-        title="Create account"
+        title="Create your account"
         description="Dev portal API is not configured."
       >
         <p className="text-sm text-muted-foreground">
@@ -361,16 +373,17 @@ export function DevPortalRegisterPage({
 
   return (
     <AuthPageShell
-      title="Create account"
-      description="Register for API access."
+      title="Create your account"
     >
-      <form className="space-y-4" onSubmit={onSubmit}>
+      <form className="flex flex-col gap-4" onSubmit={onSubmit}>
         <div className="space-y-2">
-          <Label htmlFor="displayName">Name</Label>
+          <Label htmlFor="displayName">Full name</Label>
           <Input
             id="displayName"
+            placeholder="Priya Shah"
             value={displayName}
             onChange={(event) => setDisplayName(event.target.value)}
+            className="h-10"
           />
         </div>
         <div className="space-y-2">
@@ -379,9 +392,11 @@ export function DevPortalRegisterPage({
             id="email"
             type="email"
             autoComplete="email"
+            placeholder="you@company.com"
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             required
+            className="h-10"
           />
         </div>
         <div className="space-y-2">
@@ -390,24 +405,36 @@ export function DevPortalRegisterPage({
             id="password"
             type="password"
             autoComplete="new-password"
+            placeholder="••••••••"
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             required
+            className="h-10"
           />
+          <p className="text-xs text-muted-foreground">At least 8 characters</p>
         </div>
         <AuthError message={error} />
         {message ? (
           <p className="text-sm text-muted-foreground">{message}</p>
         ) : null}
-        <Button type="submit" className="w-full" disabled={pending}>
+        <Button
+          type="submit"
+          size="lg"
+          className="h-12 w-full text-base"
+          disabled={pending}
+        >
           {pending ? <Spinner /> : "Create account"}
         </Button>
-        <p className="text-sm text-center">
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          By creating an account you agree to our Terms and Privacy Policy.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
           <Link
-            className="text-primary hover:underline"
+            className="font-semibold text-primary no-underline hover:underline"
             to={`/login?redirect=${encodeURIComponent(returnUrl)}`}
           >
-            Back to sign in
+            Log in
           </Link>
         </p>
       </form>

package/src/lib/components/Header.tsx

@@ -148,6 +148,7 @@ export const Header = memo(function HeaderInner() {
   const authPlacement = header?.placements?.auth ?? "end";
   const authPosition =
     authPlacement === "navigation" ? navPosition : authPlacement;
+  const hasMarketingHeaderNav = (header?.navigation?.length ?? 0) > 0;
 
   const logoLightSrc = site?.logo
     ? /https?:\/\//.test(site.logo.src.light)
@@ -206,11 +207,13 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
             <Slot.Target name="head-navigation-start" />
-            <div className="hidden lg:flex min-w-0 items-center ml-2">
-              <Slot.Target name="top-navigation-before" />
-              <TopNavigation />
-              <Slot.Target name="top-navigation-after" />
-            </div>
+            {!hasMarketingHeaderNav ? (
+              <div className="hidden lg:flex min-w-0 items-center ml-2">
+                <Slot.Target name="top-navigation-before" />
+                <TopNavigation />
+                <Slot.Target name="top-navigation-after" />
+              </div>
+            ) : null}
             {searchPosition === "start" && (
               <Search className="hidden lg:flex" />
             )}

package/src/lib/components/HeaderAuthActions.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { ArrowRightIcon } from "lucide-react";
 import { useAuth } from "../authentication/hook.js";
 import { cn } from "../util/cn.js";
 
@@ -15,19 +14,18 @@ export const HeaderAuthActions = ({ className }: { className?: string }) => {
     <div className={cn("hidden lg:flex items-center gap-2.5", className)}>
       <Button
         variant="ghost"
-        size="lg"
+        size="sm"
         className="font-semibold text-foreground hover:text-primary px-3"
         onClick={() => void auth.login()}
       >
-        Sign in
+        Log in
       </Button>
       <Button
-        size="lg"
-        className="gap-1.5 rounded-[9px] px-4 font-semibold shadow-[0_4px_14px_-4px] shadow-primary/30"
+        size="sm"
+        className="rounded-[9px] px-4 font-semibold shadow-[0_4px_14px_-4px] shadow-primary/30"
         onClick={() => void auth.signup()}
       >
-        Start free
-        <ArrowRightIcon size={15} strokeWidth={2} />
+        Get started
       </Button>
     </div>
   );

package/src/lib/components/Layout.tsx

@@ -4,7 +4,10 @@ import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useZudoku } from "./context/ZudokuContext.js";
+import {
+  useCurrentNavigation,
+  useZudoku,
+} from "./context/ZudokuContext.js";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
@@ -19,6 +22,8 @@ const LoadingFallback = () => (
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const { authentication } = useZudoku();
+  const { navigation } = useCurrentNavigation();
+  const hasSideNav = navigation.length > 0;
 
   useScrollToAnchor();
   useScrollToTop();
@@ -38,9 +43,13 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
       <div
         className={cn(
-          "grid max-w-screen-2xl w-full lg:mx-auto",
-          "[&:has(>:only-child)]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
-          "grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]",
+          "grid w-full",
+          // Docs shell: cap width + reserve side-nav column.
+          // Marketing pages (no side nav): full-bleed so section backgrounds
+          // and compare/FAQ bands can span the viewport.
+          hasSideNav
+            ? "max-w-screen-2xl lg:mx-auto grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr] grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]"
+            : "grid-cols-1 grid-rows-1",
         )}
       >
         <Suspense fallback={<LoadingFallback />}>

package/src/lib/components/Main.tsx

@@ -37,8 +37,9 @@ export const Main = ({ children }: PropsWithChildren) => {
       <main
         data-pagefind-body
         className={cn(
-          "px-4 lg:pe-8 lg:px-8",
-          !hasNavigation && "col-span-full",
+          // Docs: gutter so content clears the side nav.
+          // Marketing: no shell padding — pages own section px / full-bleed bands.
+          hasNavigation ? "px-4 lg:pe-8 lg:px-8" : "col-span-full px-0",
           isNavigating && "animate-pulse",
         )}
       >

package/src/lib/components/MobileTopNavigation.tsx

@@ -3,7 +3,6 @@ import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { deepEqual } from "fast-equals";
 import {
-  ArrowRightIcon,
   ChevronDownIcon,
   LogOutIcon,
   MenuIcon,
@@ -258,17 +257,15 @@ export const MobileTopNavigation = () => {
                         void login();
                       }}
                     >
-                      Sign in
+                      Log in
                     </Button>
                     <Button
-                      className="gap-1.5"
                       onClick={() => {
                         setDrawerOpen(false);
                         void signup();
                       }}
                     >
-                      Start free
-                      <ArrowRightIcon size={15} strokeWidth={2} />
+                      Get started
                     </Button>
                   </div>
                 ))}

package/src/lib/components/ThemeSwitch.tsx

@@ -1,18 +1,25 @@
-import { MoonIcon, SunIcon } from "lucide-react";
+import { MoonIcon, MonitorIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { focusRing } from "../ui/util.js";
 import { cn } from "../util/cn.js";
 import { useIsClient } from "./ClientOnly.js";
 
+const COMPACT_OPTIONS = [
+  { value: "light", label: "Light", Icon: SunIcon },
+  { value: "dark", label: "Dark", Icon: MoonIcon },
+  { value: "system", label: "System", Icon: MonitorIcon },
+] as const;
+
 export const ThemeSwitch = ({
   variant = "default",
 }: {
   variant?: "default" | "compact";
 }) => {
-  const { resolvedTheme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
   const isClient = useIsClient();
 
-  const theme = isClient ? resolvedTheme : undefined;
+  const activeTheme = isClient ? resolvedTheme : undefined;
+  const selectedMode = isClient ? (theme ?? "system") : "system";
 
   const handleThemeToggle = () => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
@@ -20,27 +27,36 @@ export const ThemeSwitch = ({
 
   if (variant === "compact") {
     return (
-      <button
-        type="button"
+      <div
+        role="group"
+        aria-label="Theme"
         className={cn(
-          "grid size-[38px] place-items-center rounded-[9px] border border-border text-muted-foreground transition-colors hover:border-border hover:text-foreground",
+          "inline-flex h-8 items-center gap-0.5 rounded-[9px] border border-border bg-muted/40 p-0.5",
           focusRing,
         )}
-        onClick={handleThemeToggle}
-        aria-label={
-          !isClient
-            ? "Toggle theme"
-            : theme === "dark"
-              ? "Switch to light mode"
-              : "Switch to dark mode"
-        }
       >
-        {!isClient || theme === "dark" ? (
-          <SunIcon size={17} strokeWidth={1.8} />
-        ) : (
-          <MoonIcon size={17} strokeWidth={1.8} />
-        )}
-      </button>
+        {COMPACT_OPTIONS.map(({ value, label, Icon }) => {
+          const selected = selectedMode === value;
+          return (
+            <button
+              key={value}
+              type="button"
+              className={cn(
+                "grid size-7 place-items-center rounded-[7px] text-muted-foreground transition-colors",
+                selected
+                  ? "bg-card text-foreground shadow-xs"
+                  : "hover:text-foreground",
+              )}
+              onClick={() => setTheme(value)}
+              aria-label={label}
+              aria-pressed={selected}
+              title={label}
+            >
+              <Icon size={14} strokeWidth={1.8} />
+            </button>
+          );
+        })}
+      </div>
     );
   }
 
@@ -52,7 +68,7 @@ export const ThemeSwitch = ({
       aria-label={
         !isClient
           ? "Toggle theme"
-          : theme === "dark"
+          : activeTheme === "dark"
             ? "Switch to light mode"
             : "Switch to dark mode"
       }
@@ -60,8 +76,8 @@ export const ThemeSwitch = ({
       <div
         className={cn(
           "rounded-full p-0.5 border border-transparent [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
-          theme === "light" && "border-border bg-muted",
-          theme === "dark" &&
+          activeTheme === "light" && "border-border bg-muted",
+          activeTheme === "dark" &&
             "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-px group-hover:[&>svg>path]:-translate-y-px group-hover:rotate-15",
         )}
       >
@@ -70,9 +86,9 @@ export const ThemeSwitch = ({
       <div
         className={cn(
           "rounded-full p-0.5 border border-transparent transition-transform transform-gpu duration-500",
-          theme === "dark" &&
+          activeTheme === "dark" &&
             "border-border bg-muted [&>svg>path]:fill-white [&>svg>path]:stroke-transparent",
-          theme === "light" &&
+          activeTheme === "light" &&
             "group-hover:rotate-[-10deg] [&>svg>path]:stroke-currentColor",
         )}
       >