zudoku 0.0.0-fdfe742 → 0.0.0-feat-bundled-types.9aa135e

package/lib/zudoku.plugin-api-catalog.js

@@ -4,7 +4,7 @@ import { d as b, m as j } from "./chunk-DQRVZFIR-BblmKnHy.js";
 import { u as x, d as y, j as m } from "./hook-k7PfUIsj.js";
 import { H as v } from "./index.esm-BFcSKCe-.js";
 import { Link as N } from "./zudoku.components.js";
-import { H as S, M as w } from "./Markdown-m03c-TR_.js";
+import { H as S, M as w } from "./Markdown-Cm4kj26S.js";
 const H = ({
   items: r,
   filterCatalogItems: o = (n) => n,

package/lib/zudoku.plugin-api-keys.js

@@ -1,6 +1,6 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
 import { CheckIcon as _, XIcon as se, PencilLineIcon as ne, RotateCwIcon as ie, EyeOffIcon as re, EyeIcon as ae, CopyIcon as oe, TrashIcon as le, KeyRoundIcon as de } from "lucide-react";
-import { D as ce, S as F, R as ue } from "./Slot-xguyqKKU.js";
+import { D as ce, S as F, R as ue } from "./Slot-B99cbD-q.js";
 import { i as P } from "./invariant-DAFpPywt.js";
 import { O as he, L as Q } from "./chunk-DQRVZFIR-BblmKnHy.js";
 import { i as fe, k as pe, e as xe, d as me } from "./hook-k7PfUIsj.js";
@@ -9,7 +9,7 @@ import { u as z } from "./useMutation-CZSmsIGW.js";
 import * as S from "react";
 import ye, { createContext as q, useRef as D, useLayoutEffect as ge, useEffect as B, useId as L, useContext as O, useInsertionEffect as je, useMemo as M, useCallback as Ce, Children as ve, isValidElement as we, useState as E } from "react";
 import { C as ke, a as be } from "./Card-DPhGbYUM.js";
-import { D as U, e as W, a as X, b as Y, c as G, d as J, f as V, g as K } from "./Dialog-B53OMCvW.js";
+import { D as U, e as W, a as X, b as Y, c as G, d as J, f as V, g as K } from "./Dialog-BxpuVLh9.js";
 import { Input as Ee } from "./ui/Input.js";
 import { c as R } from "./cn-wvCW-ho6.js";
 const De = () => {

package/lib/zudoku.plugin-custom-pages.js

@@ -1,6 +1,6 @@
 import { j as o } from "./jsx-runtime-C5mzlN2N.js";
 import a from "react";
-import { P as n } from "./Markdown-m03c-TR_.js";
+import { P as n } from "./Markdown-Cm4kj26S.js";
 import { c } from "./cn-wvCW-ho6.js";
 import { u as p } from "./useExposedProps-BZQkZneR.js";
 const u = ({

package/lib/zudoku.plugin-markdown.js

@@ -50,7 +50,7 @@ const m = (a) => ({
         const c = {
           path: e,
           lazy: async () => {
-            const { MdxPage: u } = await import("./MdxPage-Dy5JAci3.js"), { default: h, ...p } = await i();
+            const { MdxPage: u } = await import("./MdxPage-fDGQtB5w.js"), { default: h, ...p } = await i();
             return {
               element: /* @__PURE__ */ f.jsx(
                 u,

package/lib/zudoku.plugin-openapi.js

@@ -3,7 +3,7 @@ import "lucide-react";
 import "./chunk-DQRVZFIR-BblmKnHy.js";
 import "./hook-k7PfUIsj.js";
 import "./ui/Button.js";
-import { F as a, U as s, H as n } from "./index-DCHP-Cbn.js";
+import { F as a, U as s, H as n } from "./index-yqBxBqxF.js";
 export {
   a as GetSidebarOperationsQuery,
   s as UNTAGGED_PATH,

package/lib/zudoku.plugin-search-pagefind.js

@@ -4,9 +4,9 @@ import { VisuallyHidden as v } from "@radix-ui/react-visually-hidden";
 import { u as N, k as y, l as j, o as _, j as L } from "./hook-k7PfUIsj.js";
 import { useRef as S, useLayoutEffect as T, useState as w } from "react";
 import { B as E } from "./Button-BE9IVkWV.js";
-import { C as R, a as f, b as p, c as F, d as I, e as q, f as P } from "./Callout-CvY02DXU.js";
-import { c as $ } from "./Dialog-B53OMCvW.js";
-import { S as A } from "./RouteGuard-DiCUImwp.js";
+import { C as R, a as f, b as p, c as F, d as I, e as q, f as P } from "./Callout-CoVxYafP.js";
+import { c as $ } from "./Dialog-BxpuVLh9.js";
+import { S as A } from "./RouteGuard-CZ_uLv3g.js";
 import { BracketsIcon as D, FileTextIcon as O } from "lucide-react";
 import { a as B, L as g } from "./chunk-DQRVZFIR-BblmKnHy.js";
 const U = async ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-fdfe742",
+  "version": "0.0.0-feat-bundled-types.9aa135e",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -162,7 +162,7 @@
     "@sentry/node": "9.12.0",
     "@shikijs/langs": "3.4.2",
     "@shikijs/rehype": "3.4.2",
-    "@shikijs/themes": "3.2.2",
+    "@shikijs/themes": "3.4.2",
     "@shikijs/transformers": "3.4.2",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
@@ -188,7 +188,7 @@
     "fast-equals": "5.2.2",
     "framer-motion": "^12.12.2",
     "glob": "11.0.1",
-    "graphql": "16.10.0",
+    "graphql": "16.11.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.13.3",
     "gray-matter": "4.0.3",
@@ -225,7 +225,7 @@
     "remark-mdx-frontmatter": "5.1.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "rollup": "4.40.1",
+    "rollup": "4.41.1",
     "semver": "7.7.1",
     "shiki": "3.4.2",
     "sitemap": "8.0.0",
@@ -236,7 +236,6 @@
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
-    "urql": "4.2.1",
     "vaul": "1.1.2",
     "vfile": "6.0.3",
     "vite": "6.3.5",
@@ -247,8 +246,9 @@
     "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "5.0.5",
+    "@graphql-codegen/cli": "5.0.6",
     "@graphql-codegen/client-preset": "4.8.0",
+    "@microsoft/api-extractor": "7.52.8",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
@@ -293,7 +293,8 @@
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html && cp standalone/zudoku.css standalone/style.css",
     "clean": "tsc --build --clean",
     "codegen": "graphql-codegen --config ./src/codegen.ts",
-    "test": "vitest run"
+    "test": "vitest run",
+    "extract-api": "node scripts/extract-api.js"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts"

package/src/lib/components/Bootstrap.tsx

@@ -3,7 +3,9 @@ import {
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
-import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
+// `HelmetData` can't be a type import because otherwise API Extractor will fail
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import { HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
 import { StrictMode } from "react";
 import {
   type createBrowserRouter,
@@ -52,7 +54,7 @@ const BootstrapStatic = ({
   helmetContext,
   bypassProtection = false,
 }: {
-  helmetContext: HelmetData["context"];
+  helmetContext: (typeof HelmetData)["context"];
   context: StaticHandlerContext;
   queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;

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

@@ -0,0 +1,46 @@
+import { useFormContext } from "react-hook-form";
+import { Textarea } from "zudoku/ui/Textarea.js";
+import { cn } from "../../../util/cn.js";
+import { type Content } from "../SidecarExamples.js";
+import ExamplesDropdown from "./ExamplesDropdown.js";
+import { type PlaygroundForm } from "./Playground.js";
+
+export const BodyPanel = ({ examples }: { examples?: Content }) => {
+  const { register, setValue, watch } = useFormContext<PlaygroundForm>();
+
+  const headers = watch("headers");
+
+  return (
+    <div className="flex flex-col gap-2 ">
+      <div className="flex justify-between gap-2">
+        <span className="font-semibold">Body</span>
+        <div className="flex flex-col gap-2">
+          {examples && examples.length > 0 && (
+            <ExamplesDropdown
+              examples={examples}
+              onSelect={(example, mediaType) => {
+                setValue("body", JSON.stringify(example.value, null, 2));
+                setValue("headers", [
+                  ...headers.filter((h) => h.name !== "Content-Type"),
+                  {
+                    name: "Content-Type",
+                    value: mediaType,
+                    active: true,
+                  },
+                ]);
+              }}
+            />
+          )}
+        </div>
+      </div>
+      <Textarea
+        {...register("body")}
+        className={cn(
+          "border w-full rounded-lg bg-muted/40 p-2 h-64 font-mono text-[13px]",
+        )}
+      />
+    </div>
+  );
+};
+
+export default BodyPanel;

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

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "lucide-react";
 import { Button } from "zudoku/ui/Button.js";
 import {
   DropdownMenu,
@@ -20,7 +21,9 @@ const ExamplesDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Use Example</Button>
+        <Button variant="ghost" size="sm">
+          Use Example <ChevronDownIcon className="w-4 h-4" />
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="max-w-72">
         {examples.map((mediaTypeObject) => (

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

@@ -83,119 +83,123 @@ export const Headers = ({
     .map(({ name }) => name);
 
   return (
-    <div className="flex flex-col gap-2">
-      <Card className="overflow-hidden">
-        <ParamsGrid>
-          {fields.map((field, i) => {
-            const currentHeader = schemaHeaders.find(
-              (h) => h.name === watch(`headers.${i}.name`),
-            );
-            return (
-              <ParamsGridItem key={field.id}>
-                <div className="flex items-center gap-2 ">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.active`}
-                    render={({ field }) => (
-                      <Checkbox
-                        id={`headers.${i}.active`}
-                        checked={field.value}
-                        onCheckedChange={(checked) => {
-                          field.onChange(checked);
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.name`}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...field}
-                        placeholder="Name"
-                        className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                        options={[...missingHeaders, ...headerOptions]}
-                        onEnterPress={() => handleHeaderEnter(i)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          setValue(`headers.${i}.active`, true);
-                        }}
-                        ref={(el) => {
-                          nameRefs.current[i] = el;
-                        }}
-                      />
-                    )}
-                  />
-                </div>
-                <div className="flex items-center gap-2">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.value`}
-                    render={({ field }) => {
-                      const hasEnum =
-                        currentHeader?.enum && currentHeader.enum.length > 0;
-
-                      if (!hasEnum) {
-                        return (
-                          <Input
-                            placeholder="Value"
-                            className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
-                            {...field}
-                            ref={(el) => {
-                              valueRefs.current[i] = el;
-                            }}
-                            onKeyDown={(e) => {
-                              if (
-                                e.key === "Enter" &&
-                                e.currentTarget.value.trim()
-                              ) {
-                                handleValueEnter(i);
-                              }
-                            }}
-                            autoComplete="off"
-                          />
-                        );
-                      }
-
-                      return (
-                        <Autocomplete
-                          shouldFilter={false}
-                          value={field.value}
-                          options={currentHeader.enum ?? []}
-                          onChange={(e) => {
-                            field.onChange(e);
-                            setValue(`headers.${i}.active`, true);
-                          }}
-                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
-                        />
-                      );
-                    }}
-                  />
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
-                    onClick={() => remove(i)}
-                    type="button"
-                  >
-                    <XIcon size={16} />
-                  </Button>
-                </div>
-              </ParamsGridItem>
-            );
-          })}
-        </ParamsGrid>
-      </Card>
-      <div className="text-end">
+    <div className="flex flex-col gap-2 ">
+      <div className="flex items-center justify-between">
+        <span className="font-semibold">Headers</span>
         <Button
           className=""
           onClick={addNewHeader}
           type="button"
-          variant="secondary"
+          size="sm"
+          variant="ghost"
         >
-          Add header
+          + Add header
         </Button>
       </div>
+      <div className="flex flex-col gap-2">
+        <Card className="overflow-hidden rounded-lg">
+          <ParamsGrid>
+            {fields.map((field, i) => {
+              const currentHeader = schemaHeaders.find(
+                (h) => h.name === watch(`headers.${i}.name`),
+              );
+              return (
+                <ParamsGridItem key={field.id}>
+                  <div className="flex items-center gap-2 ">
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.active`}
+                      render={({ field }) => (
+                        <Checkbox
+                          id={`headers.${i}.active`}
+                          checked={field.value}
+                          onCheckedChange={(checked) => {
+                            field.onChange(checked);
+                          }}
+                        />
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.name`}
+                      render={({ field }) => (
+                        <Autocomplete
+                          {...field}
+                          placeholder="Name"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          options={[...missingHeaders, ...headerOptions]}
+                          onEnterPress={() => handleHeaderEnter(i)}
+                          onChange={(e) => {
+                            field.onChange(e);
+                            setValue(`headers.${i}.active`, true);
+                          }}
+                          ref={(el) => {
+                            nameRefs.current[i] = el;
+                          }}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Controller
+                      control={control}
+                      name={`headers.${i}.value`}
+                      render={({ field }) => {
+                        const hasEnum =
+                          currentHeader?.enum && currentHeader.enum.length > 0;
+
+                        if (!hasEnum) {
+                          return (
+                            <Input
+                              placeholder="Value"
+                              className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                              {...field}
+                              ref={(el) => {
+                                valueRefs.current[i] = el;
+                              }}
+                              onKeyDown={(e) => {
+                                if (
+                                  e.key === "Enter" &&
+                                  e.currentTarget.value.trim()
+                                ) {
+                                  handleValueEnter(i);
+                                }
+                              }}
+                              autoComplete="off"
+                            />
+                          );
+                        }
+
+                        return (
+                          <Autocomplete
+                            shouldFilter={false}
+                            value={field.value}
+                            options={currentHeader.enum ?? []}
+                            onChange={(e) => {
+                              field.onChange(e);
+                              setValue(`headers.${i}.active`, true);
+                            }}
+                            className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
+                          />
+                        );
+                      }}
+                    />
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                      onClick={() => remove(i)}
+                      type="button"
+                    >
+                      <XIcon size={16} />
+                    </Button>
+                  </div>
+                </ParamsGridItem>
+              );
+            })}
+          </ParamsGrid>
+        </Card>
+      </div>
     </div>
   );
 };

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

@@ -13,7 +13,7 @@ const IdentitySelector = ({
   setValue: (value: string) => void;
   value?: string;
 }) => (
-  <Card className="w-full overflow-hidden">
+  <Card className="w-full overflow-hidden rounded-lg">
     <RadioGroup
       onValueChange={(value) => setValue(value)}
       value={value}
@@ -21,19 +21,21 @@ const IdentitySelector = ({
       className="gap-0"
       disabled={identities?.length === 0}
     >
-      <Label className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent">
+      <Label className="h-10 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent">
         <RadioGroupItem value={NO_IDENTITY} id="none" />
         <span>None</span>
       </Label>
-      {identities?.map((identity) => (
-        <Label
-          key={identity.id}
-          className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent"
-        >
-          <RadioGroupItem value={identity.id} id={identity.id} />
-          <span>{identity.label}</span>
-        </Label>
-      ))}
+      <div className="divide-y">
+        {identities?.map((identity) => (
+          <Label
+            key={identity.id}
+            className="h-10 items-center flex gap-2 p-4 cursor-pointer hover:bg-accent"
+          >
+            <RadioGroupItem value={identity.id} id={identity.id} />
+            <span>{identity.label}</span>
+          </Label>
+        ))}
+      </div>
     </RadioGroup>
   </Card>
 );

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

@@ -2,12 +2,12 @@ import createVariantComponent from "../../../util/createVariantComponent.js";
 
 const ParamsGrid = createVariantComponent(
   "div",
-  "grid grid-cols-[2fr_3fr] gap-2 items-center",
+  "grid grid-cols-[2fr_3fr] items-center",
 );
 
 export const ParamsGridItem = createVariantComponent(
   "div",
-  "group hover:bg-accent px-3 grid col-span-full grid-cols-subgrid",
+  "group hover:bg-accent px-4 py-1 grid col-span-full grid-cols-subgrid",
 );
 
 export default ParamsGrid;

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

@@ -22,7 +22,7 @@ export const PathParams = ({
   );
 
   return (
-    <Card className="rounded-lg">
+    <Card className="rounded-lg overflow-hidden">
       <ParamsGrid>
         {sortedFields.map((field, i) => (
           <ParamsGridItem key={field.id}>