@lukoweb/apitogo 0.2.30 → 0.2.34

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,283 +1,283 @@
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { deepEqual } from "fast-equals";
-import {
-  ChevronDownIcon,
-  LogOutIcon,
-  MenuIcon,
-  type LucideIcon,
-} from "lucide-react";
-import { useState } from "react";
-import { Link } from "react-router";
-import {
-  isHeaderNavGroup,
-  type HeaderNavItem,
-  type HeaderNavLinkItem,
-} from "../../config/validators/HeaderNavigationSchema.js";
-import { withoutMarketingCtaHeaderNavigation } from "../authentication/header-nav-filter.js";
-import { useAuth } from "../authentication/hook.js";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../ui/Collapsible.js";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTitle,
-  DrawerTrigger,
-} from "../ui/Drawer.js";
-import { AnchorLink } from "./AnchorLink.js";
-import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
-import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
-import { PageProgress } from "./PageProgress.js";
-import { Slot } from "./Slot.js";
-import { ThemeSwitch } from "./ThemeSwitch.js";
-
-const MobileHeaderNavLink = ({
-  item,
-  onClick,
-}: {
-  item: HeaderNavLinkItem;
-  onClick: () => void;
-}) => {
-  const Icon = item.icon as LucideIcon | undefined;
-  return (
-    <AnchorLink
-      to={item.to}
-      target={item.target}
-      rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
-      onClick={onClick}
-      className="flex items-center font-medium gap-2 py-2 text-foreground/80 hover:text-foreground"
-    >
-      {Icon && <Icon size={16} />}
-      {item.label}
-    </AnchorLink>
-  );
-};
-
-const MobileHeaderNavItem = ({
-  item,
-  onNavigate,
-}: {
-  item: HeaderNavItem;
-  onNavigate: () => void;
-}) => {
-  if ("to" in item) {
-    const Icon = item.icon as LucideIcon | undefined;
-    return (
-      <li className="w-full">
-        <AnchorLink
-          to={item.to}
-          target={item.target}
-          rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
-          onClick={onNavigate}
-          className="flex items-center gap-2 py-2 text-base font-medium"
-        >
-          {Icon && <Icon size={16} />}
-          {item.label}
-        </AnchorLink>
-      </li>
-    );
-  }
-
-  return (
-    <li className="w-full">
-      <Collapsible>
-        <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-base font-medium group">
-          {item.label}
-          <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <ul className="flex flex-col border-l ms-1 ps-3 my-1">
-            {item.items.map((subItem) =>
-              isHeaderNavGroup(subItem) ? (
-                <li key={subItem.label} className="flex flex-col">
-                  <div className="text-sm text-muted-foreground py-2">
-                    {subItem.label}
-                  </div>
-                  {subItem.items.map((link) => (
-                    <MobileHeaderNavLink
-                      key={link.to}
-                      item={link}
-                      onClick={onNavigate}
-                    />
-                  ))}
-                </li>
-              ) : (
-                <li key={subItem.to}>
-                  <MobileHeaderNavLink item={subItem} onClick={onNavigate} />
-                </li>
-              ),
-            )}
-          </ul>
-        </CollapsibleContent>
-      </Collapsible>
-    </li>
-  );
-};
-
-export const MobileTopNavigation = () => {
-  const context = useZudoku();
-  const authState = useAuth();
-  const currentNav = useCurrentNavigation();
-
-  const {
-    options: { header, navigation = [], site },
-    getProfileMenuItems,
-  } = context;
-  const headerNavigation = withoutMarketingCtaHeaderNavigation(
-    header?.navigation ?? [],
-  );
-  const { isAuthenticated, profile, isAuthEnabled, login, signup } = authState;
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  const accountItems = getProfileMenuItems();
-  const filteredItems = navigation.filter(
-    shouldShowItem({ auth: authState, context }),
-  );
-
-  return (
-    <Drawer
-      direction={site?.dir === "rtl" ? "left" : "right"}
-      open={drawerOpen}
-      onOpenChange={setDrawerOpen}
-    >
-      <div className="flex lg:hidden justify-self-end">
-        <DrawerTrigger className="lg:hidden">
-          <MenuIcon size={22} />
-        </DrawerTrigger>
-        <PageProgress />
-      </div>
-      <DrawerContent
-        className="lg:hidden h-dvh inset-e-0 start-auto w-[340px] rounded-none"
-        aria-describedby={undefined}
-      >
-        <div className="py-2 h-full flex flex-col">
-          <div className="flex-1 overflow-y-auto overscroll-none">
-            <VisuallyHidden>
-              <DrawerTitle>Navigation</DrawerTitle>
-            </VisuallyHidden>
-            <ul className="flex flex-col gap-1 px-4">
-              {filteredItems.map((item) => {
-                if (item.type === "separator") {
-                  return <Separator className="my-2" key={item.label} />;
-                }
-                if (item.type === "section" || item.type === "filter") {
-                  return null;
-                }
-                const path = getFirstMatchingPath(item);
-                const isActive = deepEqual(currentNav.topNavItem, item);
-                return (
-                  <li key={item.label}>
-                    <Link
-                      to={path}
-                      onClick={() => setDrawerOpen(false)}
-                      className={`flex items-center gap-2 py-2 text-base font-medium ${isActive ? "text-foreground" : "text-foreground/75 hover:text-foreground"}`}
-                    >
-                      {item.icon && <item.icon size={16} />}
-                      {item.label}
-                    </Link>
-                  </li>
-                );
-              })}
-              {filteredItems.length > 0 && headerNavigation.length > 0 && (
-                <Separator className="my-2" />
-              )}
-              <li className="empty:hidden">
-                <Slot.Target name="top-navigation-side" />
-              </li>
-              {headerNavigation.map((item) => (
-                <MobileHeaderNavItem
-                  key={item.label}
-                  item={item}
-                  onNavigate={() => setDrawerOpen(false)}
-                />
-              ))}
-              {isAuthEnabled && isAuthenticated && (
-                <>
-                  <Separator className="my-2" />
-                  <li className="py-2">
-                    <div className="text-base font-medium">
-                      {profile?.name ?? "My Account"}
-                    </div>
-                    {profile?.email && profile.email !== profile?.name && (
-                      <div className="text-sm text-muted-foreground">
-                        {profile.email}
-                      </div>
-                    )}
-                  </li>
-                  {accountItems.map((i) => (
-                    <li key={i.label}>
-                      <Link
-                        to={i.path ?? ""}
-                        target={i.target}
-                        rel={
-                          i.target === "_blank"
-                            ? "noopener noreferrer"
-                            : undefined
-                        }
-                        onClick={() => setDrawerOpen(false)}
-                        className="flex items-center py-2 text-base font-medium text-foreground/75 hover:text-foreground"
-                      >
-                        {i.label}
-                      </Link>
-                    </li>
-                  ))}
-                </>
-              )}
-            </ul>
-          </div>
-          <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
-            <div className="flex items-center justify-between gap-2">
-              {isAuthEnabled &&
-                (isAuthenticated ? (
-                  <Button asChild variant="outline">
-                    <Link
-                      to="/signout"
-                      onClick={() => setDrawerOpen(false)}
-                      className="flex items-center gap-2"
-                    >
-                      <LogOutIcon
-                        size={16}
-                        strokeWidth={1}
-                        absoluteStrokeWidth
-                      />
-                      Log out
-                    </Link>
-                  </Button>
-                ) : (
-                  <div className="flex flex-1 items-center gap-2">
-                    <Button
-                      variant="ghost"
-                      className="font-semibold"
-                      onClick={() => {
-                        setDrawerOpen(false);
-                        void login();
-                      }}
-                    >
-                      Log in
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        setDrawerOpen(false);
-                        void signup();
-                      }}
-                    >
-                      Get started
-                    </Button>
-                  </div>
-                ))}
-              <ThemeSwitch variant="compact" />
-            </div>
-            {site?.showPoweredBy !== false && (
-              <PoweredByZudoku className="grow-0 justify-center gap-1" />
-            )}
-          </div>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-};
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { deepEqual } from "fast-equals";
+import {
+  ChevronDownIcon,
+  LogOutIcon,
+  MenuIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { isHeaderNavGroup } from "../../config/header-navigation-guard.js";
+import type {
+  HeaderNavItem,
+  HeaderNavLinkItem,
+} from "../../config/validators/HeaderNavigationSchema.js";
+import { withoutMarketingCtaHeaderNavigation } from "../authentication/header-nav-filter.js";
+import { useAuth } from "../authentication/hook.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/Collapsible.js";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../ui/Drawer.js";
+import { AnchorLink } from "./AnchorLink.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
+import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
+import { PageProgress } from "./PageProgress.js";
+import { Slot } from "./Slot.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
+
+const MobileHeaderNavLink = ({
+  item,
+  onClick,
+}: {
+  item: HeaderNavLinkItem;
+  onClick: () => void;
+}) => {
+  const Icon = item.icon as LucideIcon | undefined;
+  return (
+    <AnchorLink
+      to={item.to}
+      target={item.target}
+      rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+      onClick={onClick}
+      className="flex items-center font-medium gap-2 py-2 text-foreground/80 hover:text-foreground"
+    >
+      {Icon && <Icon size={16} />}
+      {item.label}
+    </AnchorLink>
+  );
+};
+
+const MobileHeaderNavItem = ({
+  item,
+  onNavigate,
+}: {
+  item: HeaderNavItem;
+  onNavigate: () => void;
+}) => {
+  if ("to" in item) {
+    const Icon = item.icon as LucideIcon | undefined;
+    return (
+      <li className="w-full">
+        <AnchorLink
+          to={item.to}
+          target={item.target}
+          rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
+          onClick={onNavigate}
+          className="flex items-center gap-2 py-2 text-base font-medium"
+        >
+          {Icon && <Icon size={16} />}
+          {item.label}
+        </AnchorLink>
+      </li>
+    );
+  }
+
+  return (
+    <li className="w-full">
+      <Collapsible>
+        <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-base font-medium group">
+          {item.label}
+          <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ul className="flex flex-col border-l ms-1 ps-3 my-1">
+            {item.items.map((subItem) =>
+              isHeaderNavGroup(subItem) ? (
+                <li key={subItem.label} className="flex flex-col">
+                  <div className="text-sm text-muted-foreground py-2">
+                    {subItem.label}
+                  </div>
+                  {subItem.items.map((link) => (
+                    <MobileHeaderNavLink
+                      key={link.to}
+                      item={link}
+                      onClick={onNavigate}
+                    />
+                  ))}
+                </li>
+              ) : (
+                <li key={subItem.to}>
+                  <MobileHeaderNavLink item={subItem} onClick={onNavigate} />
+                </li>
+              ),
+            )}
+          </ul>
+        </CollapsibleContent>
+      </Collapsible>
+    </li>
+  );
+};
+
+export const MobileTopNavigation = () => {
+  const context = useZudoku();
+  const authState = useAuth();
+  const currentNav = useCurrentNavigation();
+
+  const {
+    options: { header, navigation = [], site },
+    getProfileMenuItems,
+  } = context;
+  const headerNavigation = withoutMarketingCtaHeaderNavigation(
+    header?.navigation ?? [],
+  );
+  const { isAuthenticated, profile, isAuthEnabled, login, signup } = authState;
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const accountItems = getProfileMenuItems();
+  const filteredItems = navigation.filter(
+    shouldShowItem({ auth: authState, context }),
+  );
+
+  return (
+    <Drawer
+      direction={site?.dir === "rtl" ? "left" : "right"}
+      open={drawerOpen}
+      onOpenChange={setDrawerOpen}
+    >
+      <div className="flex lg:hidden justify-self-end">
+        <DrawerTrigger className="lg:hidden">
+          <MenuIcon size={22} />
+        </DrawerTrigger>
+        <PageProgress />
+      </div>
+      <DrawerContent
+        className="lg:hidden h-dvh inset-e-0 start-auto w-[340px] rounded-none"
+        aria-describedby={undefined}
+      >
+        <div className="py-2 h-full flex flex-col">
+          <div className="flex-1 overflow-y-auto overscroll-none">
+            <VisuallyHidden>
+              <DrawerTitle>Navigation</DrawerTitle>
+            </VisuallyHidden>
+            <ul className="flex flex-col gap-1 px-4">
+              {filteredItems.map((item) => {
+                if (item.type === "separator") {
+                  return <Separator className="my-2" key={item.label} />;
+                }
+                if (item.type === "section" || item.type === "filter") {
+                  return null;
+                }
+                const path = getFirstMatchingPath(item);
+                const isActive = deepEqual(currentNav.topNavItem, item);
+                return (
+                  <li key={item.label}>
+                    <Link
+                      to={path}
+                      onClick={() => setDrawerOpen(false)}
+                      className={`flex items-center gap-2 py-2 text-base font-medium ${isActive ? "text-foreground" : "text-foreground/75 hover:text-foreground"}`}
+                    >
+                      {item.icon && <item.icon size={16} />}
+                      {item.label}
+                    </Link>
+                  </li>
+                );
+              })}
+              {filteredItems.length > 0 && headerNavigation.length > 0 && (
+                <Separator className="my-2" />
+              )}
+              <li className="empty:hidden">
+                <Slot.Target name="top-navigation-side" />
+              </li>
+              {headerNavigation.map((item) => (
+                <MobileHeaderNavItem
+                  key={item.label}
+                  item={item}
+                  onNavigate={() => setDrawerOpen(false)}
+                />
+              ))}
+              {isAuthEnabled && isAuthenticated && (
+                <>
+                  <Separator className="my-2" />
+                  <li className="py-2">
+                    <div className="text-base font-medium">
+                      {profile?.name ?? "My Account"}
+                    </div>
+                    {profile?.email && profile.email !== profile?.name && (
+                      <div className="text-sm text-muted-foreground">
+                        {profile.email}
+                      </div>
+                    )}
+                  </li>
+                  {accountItems.map((i) => (
+                    <li key={i.label}>
+                      <Link
+                        to={i.path ?? ""}
+                        target={i.target}
+                        rel={
+                          i.target === "_blank"
+                            ? "noopener noreferrer"
+                            : undefined
+                        }
+                        onClick={() => setDrawerOpen(false)}
+                        className="flex items-center py-2 text-base font-medium text-foreground/75 hover:text-foreground"
+                      >
+                        {i.label}
+                      </Link>
+                    </li>
+                  ))}
+                </>
+              )}
+            </ul>
+          </div>
+          <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
+            <div className="flex items-center justify-between gap-2">
+              {isAuthEnabled &&
+                (isAuthenticated ? (
+                  <Button asChild variant="outline">
+                    <Link
+                      to="/signout"
+                      onClick={() => setDrawerOpen(false)}
+                      className="flex items-center gap-2"
+                    >
+                      <LogOutIcon
+                        size={16}
+                        strokeWidth={1}
+                        absoluteStrokeWidth
+                      />
+                      Log out
+                    </Link>
+                  </Button>
+                ) : (
+                  <div className="flex flex-1 items-center gap-2">
+                    <Button
+                      variant="ghost"
+                      className="font-semibold"
+                      onClick={() => {
+                        setDrawerOpen(false);
+                        void login();
+                      }}
+                    >
+                      Log in
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        setDrawerOpen(false);
+                        void signup();
+                      }}
+                    >
+                      Get started
+                    </Button>
+                  </div>
+                ))}
+              <ThemeSwitch variant="compact" />
+            </div>
+            {site?.showPoweredBy !== false && (
+              <PoweredByZudoku className="grow-0 justify-center gap-1" />
+            )}
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+};

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

@@ -1,39 +1,42 @@
-import { ChevronRightIcon } from "lucide-react";
-import { cn } from "../../util/cn.js";
-import ZuploLogo from "./ZuploLogo.js";
-
-export const PoweredByZudoku = ({ className }: { className?: string }) => (
-  <a
-    href={
-      import.meta.env.IS_ZUPLO ? "https://zuplo.com" : "https://apitogo.com"
-    }
-    target="_blank"
-    rel="noopener noreferrer"
-    className={cn(
-      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-xs h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
-      className,
-    )}
-  >
-    <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
-      {import.meta.env.IS_ZUPLO ? (
-        <ZuploLogo className="w-3.5 h-3.5 dark:fill-white" />
-      ) : (
-        <img
-          src="/Icon.png"
-          alt=""
-          aria-hidden="true"
-          className="w-3.5 h-3.5"
-        />
-      )}
-      powered by {import.meta.env.IS_ZUPLO ? "Zuplo" : "apitogo"}
-    </div>
-    <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
-      <ChevronRightIcon
-        size={12}
-        absoluteStrokeWidth
-        strokeWidth={1.5}
-        className="rtl:rotate-180"
-      />
-    </div>
-  </a>
-);
+import { ChevronRightIcon } from "lucide-react";
+// Inlined: a file URL is root-relative in the server render and absolute in the browser when the build has a CDN base,
+// which React reports as a hydration mismatch on every page that shows this link.
+import poweredByIcon from "../../assets/powered-by-icon.png?inline";
+import { cn } from "../../util/cn.js";
+import ZuploLogo from "./ZuploLogo.js";
+
+export const PoweredByZudoku = ({ className }: { className?: string }) => (
+  <a
+    href={
+      import.meta.env.IS_ZUPLO ? "https://zuplo.com" : "https://apitogo.com"
+    }
+    target="_blank"
+    rel="noopener noreferrer"
+    className={cn(
+      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-xs h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
+      className,
+    )}
+  >
+    <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
+      {import.meta.env.IS_ZUPLO ? (
+        <ZuploLogo className="w-3.5 h-3.5 dark:fill-white" />
+      ) : (
+        <img
+          src={poweredByIcon}
+          alt=""
+          aria-hidden="true"
+          className="w-3.5 h-3.5"
+        />
+      )}
+      powered by {import.meta.env.IS_ZUPLO ? "Zuplo" : "apitogo"}
+    </div>
+    <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
+      <ChevronRightIcon
+        size={12}
+        absoluteStrokeWidth
+        strokeWidth={1.5}
+        className="rtl:rotate-180"
+      />
+    </div>
+  </a>
+);