zudoku 0.0.0-fix-image-base-path.c9e0e61c → 0.0.0-fix-create-zudoku-copy-templates.1ca222e6

package/src/lib/plugins/openapi/schema/{LogicalGroup/LogicalGroupConnector.tsx → AllOfGroup/AllOfGroupConnector.tsx}

@@ -1,32 +1,11 @@
-import {
-  ChevronDownIcon,
-  CircleDotIcon,
-  CircleFadingPlusIcon,
-  CircleIcon,
-} from "lucide-react";
+import { ChevronDownIcon, CircleFadingPlusIcon } from "lucide-react";
 import { cn } from "../../../../util/cn.js";
 
-import type { LogicalGroupType } from "../utils.js";
-
-const iconMap = {
-  AND: <CircleFadingPlusIcon size={16} className="fill-card" />,
-  OR: <CircleDotIcon size={16} className="fill-card" />,
-  ONE: <CircleIcon size={14} className="fill-card" />,
-} as const;
-
-const colorClass = {
-  AND: "text-green-500 dark:text-green-300/60",
-  OR: "text-blue-400 dark:text-blue-500",
-  ONE: "text-purple-500 dark:text-purple-300/60",
-} as const;
-
-export const LogicalGroupConnector = ({
-  type,
+export const AllOfGroupConnector = ({
   isOpen,
   className,
   schemeName,
 }: {
-  type: LogicalGroupType;
   isOpen: boolean;
   className?: string;
   schemeName?: string;
@@ -34,14 +13,14 @@ export const LogicalGroupConnector = ({
   return (
     <div
       className={cn(
-        colorClass[type],
+        "text-green-500 dark:text-green-300/60",
         "relative text-sm flex py-2",
         "before:border-l before:absolute before:-top-2 before:-bottom-2 before:border-border before:border-dashed before:content-['']",
         className,
       )}
     >
       <div className="-translate-x-[7px] flex gap-1 items-center">
-        {iconMap[type]}
+        <CircleFadingPlusIcon size={16} className="fill-card" />
         <div
           className={cn(
             "translate-y-px mx-px opacity-0 group-hover:opacity-100 transition",

package/src/lib/plugins/openapi/schema/{LogicalGroup/LogicalGroupItem.tsx → AllOfGroup/AllOfGroupItem.tsx}

@@ -2,13 +2,9 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import type { SchemaObject } from "../../../../oas/parser/index.js";
 import { SchemaView } from "../SchemaView.js";
-import type { LogicalGroupType } from "../utils.js";
-import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
+import { AllOfGroupConnector } from "./AllOfGroupConnector.js";
 
-export const LogicalGroupItem = (props: {
-  type: LogicalGroupType;
-  schema: SchemaObject;
-}) => {
+export const AllOfGroupItem = (props: { schema: SchemaObject }) => {
   const [isOpen, setIsOpen] = useState(true);
 
   return (
@@ -18,11 +14,7 @@ export const LogicalGroupItem = (props: {
       className="group"
     >
       <Collapsible.Trigger>
-        <LogicalGroupConnector
-          type={props.type}
-          isOpen={isOpen}
-          schemeName={props.schema.title}
-        />
+        <AllOfGroupConnector isOpen={isOpen} schemeName={props.schema.title} />
       </Collapsible.Trigger>
       {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
       <Collapsible.Content>

package/src/lib/plugins/openapi/schema/AllOfGroup/AllOfGroupView.tsx

@@ -0,0 +1,35 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { SquareMinusIcon, SquarePlusIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+import type { SchemaObject } from "../../../../oas/parser/index.js";
+import { Card } from "../../../../ui/Card.js";
+import { AllOfGroupItem } from "./AllOfGroupItem.js";
+
+export const AllOfGroupView = ({ schema }: { schema: SchemaObject }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  if (!schema.allOf) return null;
+
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
+      <Card className="px-6">
+        <Collapsible.Trigger className="flex gap-2 items-center py-2 w-full text-sm text-muted-foreground -translate-x-1.5">
+          {isOpen ? (
+            <SquareMinusIcon size={14} />
+          ) : (
+            <SquarePlusIcon size={14} />
+          )}
+          <span>All of</span>
+        </Collapsible.Trigger>
+
+        <Collapsible.Content className="pb-4">
+          {schema.allOf.map((subSchema, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: Index needed for key
+            <AllOfGroupItem key={index} schema={subSchema} />
+          ))}
+        </Collapsible.Content>
+      </Card>
+    </Collapsible.Root>
+  );
+};

package/src/lib/plugins/openapi/schema/SchemaPropertyItem.tsx

@@ -1,46 +1,25 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { InlineCode } from "../../../components/InlineCode.js";
 import { Markdown } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
-import { objectEntries } from "../../../util/objectEntries.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { SelectOnClick } from "../components/SelectOnClick.js";
 import { ParamInfos } from "../ParamInfos.js";
-import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
+import { AllOfGroupView } from "./AllOfGroup/AllOfGroupView.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   extractCircularRefInfo,
-  hasLogicalGroupings,
   isArrayCircularRef,
   isArrayType,
   isCircularRef,
   isComplexType,
-  LogicalSchemaTypeMap,
 } from "./utils.js";
 
-export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
-  const [isOpen, setIsOpen] = useState(true);
-  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-  for (const [key, type] of objectEntries(LogicalSchemaTypeMap)) {
-    if (!schema[key]) continue;
-
-    return (
-      <LogicalGroup
-        schemas={schema[key]}
-        type={type}
-        isOpen={isOpen}
-        toggleOpen={toggleOpen}
-      />
-    );
-  }
-};
-
 const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
   <InlineCode
     className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
@@ -84,7 +63,9 @@ export const SchemaPropertyItem = ({
   }
 
   const isCollapsible = Boolean(
-    (hasLogicalGroupings(schema) ||
+    (schema.allOf ||
+      schema.anyOf ||
+      schema.oneOf ||
       isComplexType(schema) ||
       (isArrayType(schema) &&
         "items" in schema &&
@@ -126,6 +107,7 @@ export const SchemaPropertyItem = ({
         {schema.const && <ConstValue schema={schema} hideDescription />}
         {schema.enum && <EnumValues values={schema.enum} />}
         <SchemaExampleAndDefault schema={schema} />
+
         {isCollapsible && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
@@ -142,9 +124,9 @@ export const SchemaPropertyItem = ({
             )}
             <Collapsible.Content>
               <div className="mt-2">
-                {hasLogicalGroupings(schema) ? (
-                  <SchemaLogicalGroup schema={schema} />
-                ) : schema.type === "object" ? (
+                {schema.allOf ? (
+                  <AllOfGroupView schema={schema} />
+                ) : schema.anyOf || schema.oneOf || schema.type === "object" ? (
                   <SchemaView schema={schema} />
                 ) : isArrayType(schema) && "items" in schema ? (
                   <SchemaView schema={schema.items} />

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -1,18 +1,16 @@
 import { InfoIcon } from "lucide-react";
 import { Markdown } from "../../../components/Markdown.js";
-import { Typography } from "../../../components/Typography.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Card } from "../../../ui/Card.js";
 import { groupBy } from "../../../util/groupBy.js";
 import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { ParamInfos } from "../ParamInfos.js";
+import { AllOfGroupView } from "./AllOfGroup/AllOfGroupView.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
-import {
-  SchemaLogicalGroup,
-  SchemaPropertyItem,
-} from "./SchemaPropertyItem.js";
-import { hasLogicalGroupings, isBasicType } from "./utils.js";
+import { SchemaPropertyItem } from "./SchemaPropertyItem.js";
+import { UnionView } from "./UnionView.js";
+import { isBasicType } from "./utils.js";
 
 const renderMarkdown = (content?: string) =>
   content && (
@@ -37,10 +35,12 @@ export const SchemaView = ({
   schema,
   defaultOpen = false,
   cardHeader,
+  embedded,
 }: {
   schema?: SchemaObject | null;
   defaultOpen?: boolean;
   cardHeader?: React.ReactNode;
+  embedded?: boolean;
 }) => {
   if (!schema || Object.keys(schema).length === 0) {
     return (
@@ -57,8 +57,12 @@ export const SchemaView = ({
     return <ConstValue schema={schema} />;
   }
 
-  if (hasLogicalGroupings(schema)) {
-    return <SchemaLogicalGroup schema={schema} />;
+  if (Array.isArray(schema.oneOf) || Array.isArray(schema.anyOf)) {
+    return <UnionView schema={schema} />;
+  }
+
+  if (Array.isArray(schema.allOf)) {
+    return <AllOfGroupView schema={schema} />;
   }
 
   if (isBasicType(schema.type)) {
@@ -84,9 +88,9 @@ export const SchemaView = ({
 
     const additionalProperties =
       typeof schema.additionalProperties === "object" ? (
-        <SchemaView schema={schema.additionalProperties} />
+        <SchemaView schema={schema.additionalProperties} embedded />
       ) : schema.additionalProperties === true ? (
-        <Typography className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
+        <div className="text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1">
           <span>Additional properties are allowed</span>
           <a
             className="p-0.5 -m-0.5"
@@ -96,11 +100,13 @@ export const SchemaView = ({
           >
             <InfoIcon size={14} />
           </a>
-        </Typography>
+        </div>
       ) : null;
 
+    const Component = embedded ? "div" : Card;
+
     return (
-      <Card className="divide-y overflow-hidden">
+      <Component className="divide-y overflow-hidden">
         {cardHeader}
         {groupNames.map(
           (group) =>
@@ -119,7 +125,7 @@ export const SchemaView = ({
             ),
         )}
         {additionalProperties}
-      </Card>
+      </Component>
     );
   }
 

package/src/lib/plugins/openapi/schema/UnionView.tsx

@@ -0,0 +1,123 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Badge } from "../../../ui/Badge.js";
+import { Card } from "../../../ui/Card.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { SchemaView } from "./SchemaView.js";
+import {
+  decideExclusivity,
+  labelForVariant,
+  quickGuards,
+  unionVariants,
+} from "./union-helpers.js";
+
+const DecisionTable = ({
+  variants,
+  schema,
+}: {
+  variants: SchemaObject[];
+  schema: SchemaObject;
+}) => {
+  const rows = variants.map((v, i) => ({
+    label: labelForVariant(i, v),
+    guards: quickGuards(v, schema),
+  }));
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      <h4 className="font-medium">Decision Table</h4>
+      <div className="border rounded-md overflow-hidden">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b bg-muted/50">
+              <th className="text-left p-2 font-medium">Variant</th>
+              <th className="text-left p-2 font-medium">Matching Criteria</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {rows.map((row) => (
+              <tr key={row.label} className="hover:bg-muted/30">
+                <td className="p-2 font-medium">{row.label}</td>
+                <td className="p-2 text-muted-foreground text-xs">
+                  {row.guards.length > 0
+                    ? row.guards.join(" · ")
+                    : "No specific criteria"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+const VariantPanel = ({ variant }: { variant: SchemaObject }) => (
+  <div className="my-4">
+    {variant.description && (
+      <p className="text-sm text-muted-foreground">{variant.description}</p>
+    )}
+    <SchemaView schema={variant} />
+  </div>
+);
+
+export const UnionView = ({ schema }: { schema: SchemaObject }) => {
+  const mode = Array.isArray(schema.oneOf)
+    ? "oneOf"
+    : Array.isArray(schema.anyOf)
+      ? "anyOf"
+      : undefined;
+
+  if (!mode) return null;
+
+  const exclusivity = decideExclusivity(schema);
+  const variants = unionVariants(schema);
+
+  const semanticsMessage =
+    exclusivity === "exactly-one" ? (
+      <>
+        Exactly one variant <b>must match</b>.
+      </>
+    ) : (
+      <>
+        At least one variant <b>must match</b>. Multiple variants{" "}
+        <i>may match</i> simultaneously.
+      </>
+    );
+
+  return (
+    <Card className="overflow-hidden">
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">{mode}</Badge>
+          <div className="flex-1 p-2">
+            <span className="text-sm">{semanticsMessage}</span>
+          </div>
+        </div>
+
+        <DecisionTable variants={variants} schema={schema} />
+      </div>
+      <Tabs defaultValue="0" className="w-full px-4">
+        <TabsList className="flex w-full">
+          {variants.map((v, i) => (
+            <TabsTrigger
+              key={labelForVariant(i, v)}
+              value={String(i)}
+              className="flex-1"
+            >
+              {labelForVariant(i, v)}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {variants.map((v, i) => (
+          <TabsContent
+            key={labelForVariant(i, v)}
+            value={String(i)}
+            className="px-2"
+          >
+            <VariantPanel variant={v} />
+          </TabsContent>
+        ))}
+      </Tabs>
+    </Card>
+  );
+};

package/src/lib/plugins/openapi/schema/union-helpers.ts

@@ -0,0 +1,96 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+
+export type FieldSignature = {
+  type?: SchemaObject["type"];
+  const?: unknown;
+  enum?: unknown[];
+  format?: string;
+  pattern?: string;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: boolean | number;
+  exclusiveMaximum?: boolean | number;
+  minLength?: number;
+  maxLength?: number;
+  minItems?: number;
+  maxItems?: number;
+  itemsType?: string | string[];
+  additionalProps?: "true" | "false" | "schema";
+};
+
+export type FieldDoc = {
+  name: string;
+  humanType: string;
+  description?: string;
+  requiredInAll: boolean;
+};
+
+export const unionVariants = (schema: SchemaObject) =>
+  (schema.oneOf ?? schema.anyOf ?? []) as SchemaObject[];
+
+export const decideExclusivity = (
+  schema: SchemaObject,
+): "exactly-one" | "at-least-one" => {
+  if (Array.isArray(schema.oneOf)) return "exactly-one";
+
+  const discriminator = schema.discriminator?.propertyName;
+  if (!discriminator) return "at-least-one";
+
+  const variants = unionVariants(schema);
+  const seen = new Set<string>();
+
+  for (const variant of variants) {
+    const prop = variant.properties?.[discriminator];
+
+    const value =
+      prop?.const ??
+      (Array.isArray(prop?.enum) && prop.enum.length === 1
+        ? String(prop.enum[0])
+        : undefined);
+
+    if (value == null || seen.has(String(value))) return "at-least-one";
+    seen.add(String(value));
+  }
+
+  return "exactly-one";
+};
+
+export const labelForVariant = (index: number, variant: SchemaObject) =>
+  variant.title?.trim() || `Variant ${index + 1}`;
+
+export const quickGuards = (variant: SchemaObject, root?: SchemaObject) => {
+  const guards: string[] = [];
+
+  if (variant.type) {
+    guards.push(
+      `type = ${Array.isArray(variant.type) ? variant.type.join("|") : variant.type}`,
+    );
+  }
+
+  const discriminator = root?.discriminator?.propertyName;
+  if (discriminator) {
+    const discriminatorProp = variant.properties?.[discriminator] as
+      | SchemaObject
+      | undefined;
+
+    const discriminatorValue =
+      discriminatorProp?.const ??
+      (Array.isArray(discriminatorProp?.enum) &&
+      discriminatorProp.enum.length === 1
+        ? discriminatorProp.enum[0]
+        : undefined);
+
+    if (discriminatorValue !== undefined) {
+      guards.push(`${discriminator}=${JSON.stringify(discriminatorValue)}`);
+    }
+  }
+
+  const required = (variant.required ?? []).filter((k) => k !== discriminator);
+  if (required.length) {
+    const head = required.slice(0, 3).join(", ");
+    const more = required.length > 3 ? ` +${required.length - 3} more` : "";
+    guards.push(`requires: ${head}${more}`);
+  }
+
+  return guards;
+};

package/src/lib/plugins/openapi/schema/utils.ts

@@ -21,17 +21,6 @@ export const isComplexType = (value?: SchemaObject) =>
       typeof value.items === "object" &&
       (!value.items.type || value.items.type === "object")));
 
-export const hasLogicalGroupings = (value: SchemaObject) =>
-  Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
-
-export const LogicalSchemaTypeMap = {
-  allOf: "AND",
-  anyOf: "OR",
-  oneOf: "ONE",
-} as const;
-
-export type LogicalGroupType = "AND" | "OR" | "ONE";
-
 export const isCircularRef = (schema: unknown): schema is string =>
   typeof schema === "string" && schema.startsWith(CIRCULAR_REF);
 

package/src/lib/plugins/openapi/util/createHttpSnippet.ts

@@ -17,7 +17,6 @@ export const createHttpSnippet = ({
     method: operation.method.toUpperCase(),
     url:
       selectedServer + operation.path.replaceAll("{", ":").replaceAll("}", ""),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     postData: exampleBody,
     headers: [
       ...(exampleBody.text
@@ -63,7 +62,8 @@ export const createHttpSnippet = ({
 };
 
 export const getConverted = (snippet: HTTPSnippet, option: string) => {
-  let converted;
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+  let converted: any;
   switch (option) {
     case "shell":
       converted = snippet.convert("shell", "curl");

package/src/lib/plugins/openapi/util/createNavigationCategory.tsx

@@ -31,6 +31,7 @@ export const createNavigationCategory = ({
     to: `${path}#${operation.slug}`,
     badge: {
       label: operation.method,
+      // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
       color: MethodColorMap[operation.method.toLowerCase()]!,
       invert: true,
     },

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -1,10 +1,10 @@
-import { type SchemaObject } from "../../../oas/graphql/index.js";
+import type { SchemaObject } from "../../../oas/graphql/index.js";
 import { isCircularRef } from "../schema/utils.js";
 
 export const generateSchemaExample = (
   schema?: SchemaObject,
   name?: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
 ): any => {
   if (!schema || isCircularRef(schema)) {
     return null;
@@ -36,6 +36,7 @@ export const generateSchemaExample = (
 
   // For object schemas with properties
   if (schema.type === "object" && schema.properties) {
+    // biome-ignore lint/suspicious/noExplicitAny: Allow any type
     const example: Record<string, any> = {};
 
     for (const [key, propSchema] of Object.entries(schema.properties)) {
@@ -53,7 +54,6 @@ export const generateSchemaExample = (
         generateSchemaExample(itemSchema as SchemaObject),
       );
     }
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- OpenAPI schemas don't always adhere to spec
     if (schema.items) {
       return [generateSchemaExample(schema.items as SchemaObject)];
     }
@@ -116,7 +116,6 @@ export const generateSchemaExample = (
       return null;
     case "object":
       return {};
-    case undefined:
     default:
       return {};
   }

package/src/lib/plugins/openapi/util/getRoutes.tsx

@@ -2,8 +2,8 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import {
   generatePath,
   Navigate,
-  redirect,
   type RouteObject,
+  redirect,
   useLocation,
   useParams,
 } from "react-router";
@@ -170,7 +170,7 @@ export const getRoutes = ({
         basePath,
         routePath: basePath,
         routes: [
-          createNonTagPagesRoute({ path: basePath + "/:tag?" }),
+          createNonTagPagesRoute({ path: `${basePath}/:tag?` }),
           ...createAdditionalRoutes(basePath),
         ],
         client,

package/src/lib/plugins/openapi/util/methodColorMap.tsx

@@ -1,4 +1,4 @@
-import { type ColorMap } from "../../../components/navigation/NavigationBadge.js";
+import type { ColorMap } from "../../../components/navigation/NavigationBadge.js";
 
 export const MethodColorMap: Record<string, keyof typeof ColorMap> = {
   get: "green",

package/src/lib/plugins/search-inkeep/index.tsx

@@ -38,7 +38,7 @@ const InkeepSearch = ({
           sync: {
             target: "html",
             attributes: ["class"],
-            isDarkMode: (attrs) => attrs["class"]?.includes("dark") ?? false,
+            isDarkMode: (attrs) => attrs.class?.includes("dark") ?? false,
           },
         },
       },
@@ -57,7 +57,7 @@ const InkeepSearch = ({
     InkeepComponentInstance | undefined
   >(
     typeof window !== "undefined" && window.Inkeep?.ModalSearchAndChat
-      ? window.Inkeep.ModalSearchAndChat(config)!
+      ? window.Inkeep.ModalSearchAndChat(config)
       : undefined,
   );
 
@@ -66,7 +66,7 @@ const InkeepSearch = ({
 
     const checkInkeep = setInterval(() => {
       if (typeof window !== "undefined" && window.Inkeep?.ModalSearchAndChat) {
-        const inkeep = window.Inkeep.ModalSearchAndChat(config)!;
+        const inkeep = window.Inkeep.ModalSearchAndChat(config);
         setSearchInstance(inkeep);
         clearInterval(checkInkeep);
       }

package/src/lib/plugins/search-pagefind/PagefindSearch.tsx

@@ -63,7 +63,7 @@ const usePagefind = (options: PagefindOptions) => {
   });
 
   if (result.isError && result.error.message !== "NOT_BUILT_YET") {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.error(result.error);
   }
 
@@ -141,9 +141,7 @@ export const PagefindSearch = ({
             <Callout type="info">
               Search is currently not available in development mode by default.
               <br />
-              To still use search in development, run <code>
-                zudoku build
-              </code>{" "}
+              To still use search in development, run <code>zudoku build</code>{" "}
               and copy the <code>dist/pagefind</code> directory to your{" "}
               <code>public</code> directory.
             </Callout>