zudoku 0.35.6 → 0.37.0

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

@@ -1,14 +1,16 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
+import { deepEqual } from "fast-equals";
 import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { NavLink, useMatch } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
-export const SidebarCategory = ({
+const SidebarCategoryInner = ({
   category,
   onRequestClose,
 }: {
@@ -35,13 +37,15 @@ export const SidebarCategory = ({
   }, [isCategoryOpen]);
 
   const ToggleButton = isCollapsible && (
-    <button
-      type="button"
+    <Button
       onClick={(e) => {
         e.preventDefault();
         setOpen((prev) => !prev);
         setHasInteracted(true);
       }}
+      variant="ghost"
+      size="icon"
+      className="size-6 hover:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l-5))] hover:dark:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l+5))]"
     >
       <ChevronRightIcon
         size={16}
@@ -50,7 +54,7 @@ export const SidebarCategory = ({
           "shrink-0 group-data-[state=open]:rotate-90",
         )}
       />
-    </button>
+    </Button>
   );
 
   const icon = category.icon && (
@@ -62,7 +66,7 @@ export const SidebarCategory = ({
 
   const styles = navigationListItem({
     className: [
-      "text-start font-medium",
+      "group text-start font-medium",
       isCollapsible || typeof category.link !== "undefined"
         ? "cursor-pointer"
         : "cursor-default hover:bg-transparent",
@@ -90,12 +94,7 @@ export const SidebarCategory = ({
             }}
           >
             {icon}
-            <div
-              className={cn(
-                "flex items-center gap-2 justify-between w-full",
-                isActive ? "text-primary" : "text-foreground/80",
-              )}
-            >
+            <div className="flex items-center gap-2 justify-between w-full text-foreground/80 group-aria-[current='page']:text-primary">
               <div className="truncate">{category.label}</div>
               {ToggleButton}
             </div>
@@ -135,3 +134,7 @@ export const SidebarCategory = ({
     </Collapsible.Root>
   );
 };
+
+export const SidebarCategory = memo(SidebarCategoryInner, deepEqual);
+
+SidebarCategory.displayName = "SidebarCategory";

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

@@ -10,11 +10,11 @@ import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent",
+  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent",
   {
     variants: {
       isActive: {
-        true: "text-primary font-medium",
+        true: "bg-accent font-medium",
         false: "text-foreground/80",
       },
       isMuted: {

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

@@ -11,9 +11,9 @@ export const SidebarWrapper = ({
 }>) => (
   <nav
     className={cn(
-      "hidden lg:flex h-full scrollbar peer flex-col overflow-y-auto shrink-0 text-sm border-r pr-6",
+      "hidden lg:flex h-full scrollbar flex-col overflow-y-auto shrink-0 text-sm border-r pr-6",
       "sticky top-[--header-height] h-[calc(100vh-var(--header-height))]",
-      "-mx-[--padding-nav-item] max-w-[--side-nav-width] pb-20 pt-[--padding-content-top] scroll-pt-2 gap-2",
+      "-mx-[--padding-nav-item] max-w-[--side-nav-width] pb-6 pt-[--padding-content-top] scroll-pt-2 gap-2",
       className,
     )}
     ref={ref}

package/src/lib/core/ZudokuContext.ts

@@ -1,11 +1,12 @@
+import type { QueryClient } from "@tanstack/react-query";
 import { createNanoEvents } from "nanoevents";
-import { ReactNode } from "react";
-import { Location } from "react-router";
-import { TopNavigationItem } from "../../config/validators/common.js";
+import type { ReactNode } from "react";
+import type { Location } from "react-router";
+import type { TopNavigationItem } from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { type AuthenticationProvider } from "../authentication/authentication.js";
+import type { AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
-import { Slotlets } from "../components/SlotletProvider.js";
+import type { Slotlets } from "../components/SlotletProvider.js";
 import { joinPath } from "../util/joinPath.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import { objectEntries } from "../util/objectEntries.js";
@@ -90,7 +91,10 @@ export class ZudokuContext {
   private readonly navigationPlugins: NavigationPlugin[];
   private emitter = createNanoEvents<ZudokuEvents>();
 
-  constructor(public readonly options: ZudokuContextOptions) {
+  constructor(
+    public readonly options: ZudokuContextOptions,
+    public readonly queryClient: QueryClient,
+  ) {
     this.plugins = options.plugins ?? [];
     this.topNavigation = options.topNavigation ?? [];
     this.sidebars = options.sidebars ?? {};
@@ -98,7 +102,6 @@ export class ZudokuContext {
     this.authentication = options.authentication;
     this.meta = options.metadata;
     this.page = options.page;
-
     this.plugins.forEach((plugin) => {
       if (!isEventConsumerPlugin(plugin)) return;
 
@@ -143,7 +146,7 @@ export class ZudokuContext {
   getPluginSidebar = async (path: string) => {
     const navigations = await Promise.all(
       this.navigationPlugins.map((plugin) =>
-        plugin.getSidebar?.(joinPath(path)),
+        plugin.getSidebar?.(joinPath(path), this),
       ),
     );
 

package/src/lib/core/plugins.ts

@@ -2,11 +2,11 @@ import type { LucideIcon } from "lucide-react";
 import { type ReactElement } from "react";
 import { type RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
-import { MdxComponentsType } from "../util/MdxComponents.js";
+import { type MdxComponentsType } from "../util/MdxComponents.js";
 import {
-  ZudokuContext,
-  ZudokuEvents,
   type ApiIdentity,
+  type ZudokuContext,
+  type ZudokuEvents,
 } from "./ZudokuContext.js";
 
 export type ZudokuPlugin =
@@ -21,7 +21,7 @@ export type { RouteObject };
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
-  getSidebar?: (path: string) => Promise<Sidebar>;
+  getSidebar?: (path: string, context: ZudokuContext) => Promise<Sidebar>;
 }
 
 export const createApiIdentityPlugin = (

package/src/lib/hooks/useEvent.test.tsx

@@ -12,8 +12,8 @@ import { useEvent } from "./useEvent.js";
  */
 
 const createTestContext = () => {
-  const context = new ZudokuContext({});
   const queryClient = new QueryClient();
+  const context = new ZudokuContext({}, queryClient);
   const wrapper = ({ children }: PropsWithChildren) => (
     <QueryClientProvider client={queryClient}>
       <ZudokuProvider context={context}>{children}</ZudokuProvider>

package/src/lib/oas/graphql/index.ts

@@ -51,17 +51,19 @@ export const createOperationSlug = (
   return slugify(summary);
 };
 
-type SchemaImport = () => Promise<{ schema: OpenAPIDocument }>;
+export type SchemaImport = () => Promise<{
+  schema: OpenAPIDocument;
+  slugs: ReturnType<typeof getAllSlugs>;
+}>;
 
 export type SchemaImports = Record<string, SchemaImport>;
 
 type Context = {
   schema: OpenAPIDocument;
   operations: GraphQLOperationObject[];
-  tags: TagObject[];
   schemaImports?: SchemaImports;
-  slugify: CountableSlugify;
-  slugs: Record<string, string>;
+  tags: ReturnType<typeof getAllTags>;
+  slugs: ReturnType<typeof getAllSlugs>;
 };
 
 const builder = new SchemaBuilder<{
@@ -87,17 +89,15 @@ const JSONScalar = builder.addScalarType("JSON", GraphQLJSON);
 const JSONObjectScalar = builder.addScalarType("JSONObject", GraphQLJSONObject);
 const JSONSchemaScalar = builder.addScalarType("JSONSchema", GraphQLJSONSchema);
 
-const resolveExtensions = (obj: Record<string, any>) => {
-  const extensions: Record<string, any> = {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (key.startsWith("x-")) {
-      extensions[key] = value;
-    }
-  }
-  return extensions;
-};
+const resolveExtensions = (obj: Record<string, any>) =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([key]) => key.startsWith("x-")),
+  );
 
-export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
+export const getAllTags = (
+  schema: OpenAPIDocument,
+  slugs: ReturnType<typeof getAllSlugs>["tags"],
+): Array<TagObject & { slug?: string }> => {
   const rootTags = schema.tags ?? [];
   const operationTags = new Set(
     Object.values(schema.paths ?? {})
@@ -107,24 +107,42 @@ export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
 
   return [
     // Keep root tags that are actually used in operations
-    ...rootTags.filter((tag) => operationTags.has(tag.name)),
+    ...rootTags
+      .filter((tag) => operationTags.has(tag.name))
+      .map((tag) => ({ ...tag, slug: slugs[tag.name] })),
     // Add tags found in operations but not defined in root tags
     ...[...operationTags]
       .filter((tag) => !rootTags.some((rt) => rt.name === tag))
-      .map((tag) => ({ name: tag })),
+      .map((tag) => ({ name: tag, slug: slugs[tag] })),
   ];
 };
 
-const getAllSlugs = (operations: GraphQLOperationObject[]) =>
-  Object.fromEntries(
-    operations.map((op) => [
-      getSlugName(op),
-      createOperationSlug(slugifyWithCounter(), op),
+export const getAllSlugs = (
+  ops: GraphQLOperationObject[],
+  schemaTags: TagObject[] = [],
+) => {
+  const slugify = slugifyWithCounter();
+
+  const tags = Array.from(
+    new Set([
+      ...ops.flatMap((op) => op.tags ?? []),
+      ...schemaTags.map((tag) => tag.name),
     ]),
   );
 
-const getSlugName = (op: GraphQLOperationObject) =>
-  `${op.path}-${op.method}-${op.operationId}-${op.summary}`;
+  return {
+    operations: Object.fromEntries(
+      ops.map((op) => [
+        getOperationSlugKey(op),
+        createOperationSlug(slugify, op),
+      ]),
+    ),
+    tags: Object.fromEntries(tags.map((tag) => [tag, slugify(tag)])),
+  };
+};
+
+const getOperationSlugKey = (op: GraphQLOperationObject) =>
+  [op.path, op.method, op.operationId, op.summary].filter(Boolean).join("-");
 
 export const getAllOperations = (
   paths?: PathsObject,
@@ -163,30 +181,38 @@ export const getAllOperations = (
   return operations;
 };
 
-const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
-  fields: (t) => ({
-    name: t.exposeString("name"),
-    description: t.exposeString("description", { nullable: true }),
-    operations: t.field({
-      type: [OperationItem],
-      resolve: (parent, _args, ctx) => {
-        const rootTags = ctx.tags.map((tag) => tag.name);
-        return ctx.operations
-          .filter((item) =>
-            parent.name
-              ? item.tags?.includes(parent.name)
-              : item.tags?.length === 0 ||
-                // If none of the tags are present in the root tags, then show them here
-                item.tags?.every((tag) => !rootTags.includes(tag)),
-          )
-          .map((item) => ({
-            ...item,
-            parentTag: parent.name,
-          }));
-      },
+const SchemaTag = builder
+  .objectRef<
+    Omit<TagObject, "name"> & { name?: string; slug?: string }
+  >("SchemaTag")
+  .implement({
+    fields: (t) => ({
+      name: t.exposeString("name", { nullable: true }),
+      slug: t.exposeString("slug", { nullable: true }),
+      description: t.exposeString("description", { nullable: true }),
+      operations: t.field({
+        type: [OperationItem],
+        resolve: (parent, _args, ctx) => {
+          const rootTags = ctx.tags.map((tag) => tag.name);
+
+          return ctx.operations
+            .filter((item) =>
+              parent.name
+                ? item.tags?.includes(parent.name)
+                : item.tags?.length === 0 ||
+                  // If none of the tags are present in the root tags, then show them here
+                  item.tags?.every((tag) => !rootTags.includes(tag)),
+            )
+            .map((item) => ({ ...item, parentTag: parent.name }));
+        },
+      }),
+      extensions: t.field({
+        type: JSONObjectScalar,
+        resolve: (parent) => resolveExtensions(parent),
+        nullable: true,
+      }),
     }),
-  }),
-});
+  });
 
 const ServerItem = builder.objectRef<ServerObject>("Server").implement({
   fields: (t) => ({
@@ -350,7 +376,16 @@ const OperationItem = builder
     fields: (t) => ({
       slug: t.field({
         type: "String",
-        resolve: (parent, _, ctx) => ctx.slugs[getSlugName(parent)]!,
+        resolve: (parent, _, ctx) => {
+          const slug = ctx.slugs.operations[getOperationSlugKey(parent)];
+
+          if (!slug) {
+            throw new Error(
+              `No slug found for operation: ${getOperationSlugKey(parent)}`,
+            );
+          }
+          return slug;
+        },
       }),
       path: t.exposeString("path"),
       method: t.exposeString("method"),
@@ -465,10 +500,17 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         name: t.arg.string(),
       },
       type: [SchemaTag],
-      resolve: (root, args, ctx) => {
-        return args.name
-          ? ctx.tags.filter((tag) => tag.name === args.name)
-          : ctx.tags;
+      resolve: (_root, args, ctx) => {
+        if (args.name) {
+          return ctx.tags.filter((tag) => tag.name === args.name);
+        }
+
+        // Append empty tag which will be used to display untagged operations
+        if (ctx.operations.some((op) => !op.tags?.length)) {
+          return [...ctx.tags, { name: undefined, slug: undefined }];
+        }
+
+        return ctx.tags;
       },
     }),
     operations: t.field({
@@ -512,27 +554,25 @@ builder.queryType({
         input: t.arg({ type: JSONScalar, required: true }),
       },
       resolve: async (_, args, ctx) => {
-        let schema: OpenAPIDocument;
-
         if (args.type === "file" && typeof args.input === "string") {
           const loadSchema = ctx.schemaImports?.[args.input];
 
           if (!loadSchema) {
             throw new Error(`No schema loader found for path: ${args.input}`);
           }
-          const module = await loadSchema();
-          schema = module.schema;
+          const { schema, slugs } = await loadSchema();
+          ctx.schema = schema;
+          ctx.operations = getAllOperations(schema.paths);
+          ctx.slugs = slugs;
+          ctx.tags = getAllTags(schema, ctx.slugs.tags);
         } else {
-          schema = await validate(args.input as string);
+          ctx.schema = await validate(args.input as string);
+          ctx.operations = getAllOperations(ctx.schema.paths);
+          ctx.slugs = getAllSlugs(ctx.operations);
+          ctx.tags = getAllTags(ctx.schema, ctx.slugs.tags);
         }
 
-        ctx.schema = schema;
-        ctx.operations = getAllOperations(schema.paths);
-        ctx.slugify = slugifyWithCounter();
-        ctx.tags = getAllTags(schema);
-        ctx.slugs = getAllSlugs(ctx.operations);
-
-        return schema;
+        return ctx.schema;
       },
     }),
   }),
@@ -542,4 +582,4 @@ export const schema = builder.toSchema();
 
 export const createGraphQLServer = (
   options?: Omit<YogaServerOptions<any, any>, "schema">,
-) => createYoga({ schema, ...options });
+) => createYoga({ schema, batching: true, ...options });

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

@@ -1,5 +1,5 @@
 import { type ResultOf } from "@graphql-typed-document-node/core";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { useNavigate } from "react-router";
@@ -97,8 +97,16 @@ export const OperationsFragment = graphql(/* GraphQL */ `
 
 export type OperationListItemResult = ResultOf<typeof OperationsFragment>;
 
-const AllOperationsQuery = graphql(/* GraphQL */ `
-  query AllOperations(
+const SchemaWarmupQuery = graphql(/* GraphQL */ `
+  query SchemaWarmup($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      openapi
+    }
+  }
+`);
+
+const OperationsForTagQuery = graphql(/* GraphQL */ `
+  query OperationsForTag(
     $input: JSON!
     $type: SchemaType!
     $tag: String
@@ -133,7 +141,7 @@ export const OperationList = ({
   untagged?: boolean;
 }) => {
   const { input, type, versions, version, options } = useOasConfig();
-  const query = useCreateQuery(AllOperationsQuery, {
+  const query = useCreateQuery(OperationsForTagQuery, {
     input,
     type,
     tag,
@@ -151,6 +159,14 @@ export const OperationList = ({
   const operations = schema.operations;
   const tagDescription = schema.tags.find((t) => t.name === tag)?.description;
 
+  // This is to warmup (i.e. load the schema in the background) the schema on the client, if the page has been rendered on the server
+  const warmupQuery = useCreateQuery(SchemaWarmupQuery, { input, type });
+  useQuery({
+    ...warmupQuery,
+    enabled: typeof window !== "undefined",
+    notifyOnChangeProps: [],
+  });
+
   // Prefetch for Playground
   useApiIdentities();
 
@@ -269,38 +285,16 @@ export const OperationList = ({
       <div className="my-4 flex items-center justify-end gap-4">
         <Endpoint />
       </div>
-      {operations.map((fragment) => (
-        <OperationListItem
-          serverUrl={selectedServer}
-          key={fragment.slug}
-          operationFragment={fragment}
-        />
-      ))}
-      {/* {schema.tags
-        .filter((tag) => tag.operations.length > 0)
-        .map((tag) => (
-          // px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#'
-          <div key={tag.name} className="px-6 -mx-6 [content-visibility:auto]">
-            {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
-            {tag.description && (
-              <Markdown
-                className={`${ProseClasses} max-w-full prose-img:max-w-prose w-full mt-2 mb-12`}
-                content={tag.description}
-              />
-            )}
-            <div className="operation mb-12">
-              <StaggeredRender>
-                {tag.operations.map((fragment) => (
-                  <OperationListItem
-                    serverUrl={selectedServer ?? schema.url}
-                    key={fragment.slug}
-                    operationFragment={fragment}
-                  />
-                ))}
-              </StaggeredRender>
-            </div>
-          </div>
-        ))} */}
+      {/* px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#' */}
+      <div className="px-6 -mx-6 [content-visibility:auto]">
+        {operations.map((fragment) => (
+          <OperationListItem
+            serverUrl={selectedServer}
+            key={fragment.slug}
+            operationFragment={fragment}
+          />
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -63,7 +63,7 @@ export const OperationListItem = ({
           <SelectOnClick className="max-w-full truncate flex cursor-pointer">
             {serverUrl && (
               <div className="text-neutral-400 dark:text-neutral-500 truncate">
-                {serverUrl}
+                {serverUrl.replace(/\/$/, "")}
               </div>
             )}
             <div className="text-neutral-900 dark:text-neutral-200">

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

@@ -1,6 +1,29 @@
-import { isValidElement } from "react";
+import { ChevronsLeftRightIcon } from "lucide-react";
+import { isValidElement, useState } from "react";
 import { InlineCode } from "../../components/InlineCode.js";
 import { type SchemaObject } from "../../oas/parser/index.js";
+import { cn } from "../../util/cn.js";
+
+const Pattern = ({ pattern }: { pattern: string }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isExpandable = pattern.length > 20;
+  const shortPattern = isExpandable ? `${pattern.slice(0, 20)}…` : pattern;
+
+  return (
+    <InlineCode
+      className={cn("text-xs", isExpandable && "cursor-pointer")}
+      onClick={() => setIsExpanded(!isExpanded)}
+      selectOnClick={false}
+    >
+      {isExpanded ? pattern : shortPattern}
+      {isExpandable && (
+        <button type="button" className="p-1 translate-y-[2px]">
+          {!isExpanded && <ChevronsLeftRightIcon size={12} />}
+        </button>
+      )}
+    </InlineCode>
+  );
+};
 
 const getSchemaInfos = (schema?: SchemaObject) => {
   if (!schema) return [];
@@ -28,7 +51,7 @@ const getSchemaInfos = (schema?: SchemaObject) => {
     schema.deprecated && "deprecated",
     schema.pattern && (
       <>
-        pattern: <InlineCode className="text-xs">{schema.pattern}</InlineCode>
+        pattern: <Pattern pattern={schema.pattern} />
       </>
     ),
   ];
@@ -48,7 +71,7 @@ export const ParamInfos = ({
   );
 
   return (
-    <div className={className}>
+    <span className={className}>
       {filteredItems.map((item, index) => (
         <span className="text-muted-foreground" key={index}>
           {item}
@@ -59,6 +82,6 @@ export const ParamInfos = ({
           )}
         </span>
       ))}
-    </div>
+    </span>
   );
 };

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

@@ -67,7 +67,11 @@ export const ParameterListItem = ({
           className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
         />
       )}
-      {paramSchema.enum && <EnumValues values={paramSchema.enum} />}
+      {paramSchema.type === "array" && paramSchema.items.enum ? (
+        <EnumValues values={paramSchema.items.enum} />
+      ) : (
+        paramSchema.enum && <EnumValues values={paramSchema.enum} />
+      )}
     </li>
   );
 };

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

@@ -173,9 +173,9 @@ export const Sidecar = ({
   const showPlayground =
     isOnScreen &&
     (operation.extensions["x-explorer-enabled"] === true ||
-      operation.extensions["x-playground-enabled"] === true ||
+      operation.extensions["x-zudoku-playground-enabled"] === true ||
       (operation.extensions["x-explorer-enabled"] === undefined &&
-        operation.extensions["x-playground-enabled"] === undefined &&
+        operation.extensions["x-zudoku-playground-enabled"] === undefined &&
         !options?.disablePlayground));
 
   return (

package/src/lib/plugins/openapi/client/useCreateQuery.ts

@@ -1,3 +1,4 @@
+import { stripIgnoredCharacters } from "graphql";
 import { useContext } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
 import { GraphQLContext } from "./GraphQLContext.js";
@@ -13,6 +14,6 @@ export const useCreateQuery = <TResult, TVariables>(
 
   return {
     queryFn: () => graphQLClient.fetch(query, ...variables),
-    queryKey: [query, variables[0]],
+    queryKey: [stripIgnoredCharacters(query.toString()), variables[0]],
   } as const;
 };