zudoku 0.3.0-dev.79 → 0.3.0-dev.80

package/lib/zudoku.auth-clerk.js

@@ -1,7 +1,7 @@
 var u = Object.defineProperty;
 var d = (n, i, e) => i in n ? u(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
 var a = (n, i, e) => d(n, typeof i != "symbol" ? i + "" : i, e);
-import { A as w } from "./AuthenticationPlugin-CngUn5DP.js";
+import { A as w } from "./AuthenticationPlugin-XS0DoAhE.js";
 import { u as l } from "./state-DsXXkBLH.js";
 class g extends w {
   constructor(e) {

package/lib/zudoku.auth-openid.js

@@ -3,7 +3,7 @@ var Re = (t, e, n) => e in t ? Ee(t, e, { enumerable: !0, configurable: !0, writ
 var g = (t, e, n) => Re(t, typeof e != "symbol" ? e + "" : e, n);
 import { j as Pe } from "./jsx-runtime-CJBdjYYx.js";
 import { c as Ue, a as xe } from "./_commonjsHelpers-BVfed4GL.js";
-import { A as Le } from "./AuthenticationPlugin-CngUn5DP.js";
+import { A as Le } from "./AuthenticationPlugin-XS0DoAhE.js";
 import { u as ne } from "./state-DsXXkBLH.js";
 var de = { exports: {} };
 (function(t) {

package/lib/zudoku.components.js

@@ -15,17 +15,17 @@ var Ce = (t, e, n, r) => ({
 });
 import { H as _t, a as Ge, M as ur, A as lr, u as dr } from "./AnchorLink-BZcpTwOs.js";
 import { d as hr, R as pr, N as $e, L as Ee } from "./index-Dt-pU7Vu.js";
-import { E as Et, u as fr, S as mr, a as Se, R as gr } from "./SlotletProvider-D_Vz-7c_.js";
-import { j as o, d as vr, u as J, a as xr, b as yr, O as St } from "./jsx-runtime-CJBdjYYx.js";
-import { M as wr, c as Mr, a as jt, b as Nt, A as br, u as fe, h as Cr, d as y, e as Pr, F as Rr, D as _r, C as Er, P as ie, f as qe, g as Sr, i as Dt, R as jr, S as Nr, j as Dr, k as Ir, l as It, m as Ar, n as je, o as At, B as Be } from "./Combination-CS4rK8IJ.js";
+import { E as Et, S as fr, a as Se, R as mr } from "./SlotletProvider-B71hNEUL.js";
+import { j as o, d as gr, u as J, a as vr, b as xr, O as St } from "./jsx-runtime-CJBdjYYx.js";
+import { M as yr, c as wr, a as jt, b as Nt, A as Mr, u as fe, h as br, d as y, e as Cr, F as Pr, D as Rr, C as _r, P as ie, f as qe, g as Er, i as Dt, R as Sr, S as jr, j as Nr, k as Dr, l as It, m as Ir, n as je, o as At, p as Ar, B as Be } from "./Combination-C442XfGG.js";
 import { c as me, a as P, C as Or, b as Tr, u as kr, M as Fr, T as Lr, V as Kr, d as He, e as $r, f as Br } from "./Markdown-QsZ-PHET.js";
 import * as u from "react";
 import Qr, { StrictMode as Ot, createContext as Tt, Component as Ur, createElement as pt, isValidElement as Gr, memo as kt, useMemo as Le, useState as le, useContext as qr, useRef as ge, useEffect as W, Fragment as Hr, forwardRef as zr, Suspense as Vr } from "react";
 import { g as ze } from "./_commonjsHelpers-BVfed4GL.js";
 import { r as Yr } from "./router-BiRCp01d.js";
-import { S as Qe, R as Ft, T as Lt, C as Kt } from "./index-D4bOMg7f.js";
-import { S as $t, h as Bt, Q as Xr, n as j, m as ft, a as mt, b as Q, e as Wr, c as Jr, d as Zr, f as ea, o as gt, r as vt, g as ta, i as xt, p as yt, s as na, u as Ve, j as ra, D as aa, k as Ye, l as wt, q as Qt, t as oa, v as sa, w as ia } from "./DevPortalProvider-BTFqdAEL.js";
-import { c as Ut, P as Ie, R as ca, I as ua, S as la } from "./Spinner-oNQQyp-I.js";
+import { S as Qe, R as Ft, T as Lt, C as Kt } from "./index-BH-Ub36F.js";
+import { S as $t, h as Bt, Q as Xr, n as j, m as ft, a as mt, b as Q, e as Wr, c as Jr, d as Zr, f as ea, o as gt, r as vt, g as ta, i as xt, p as yt, s as na, u as Ve, j as ra, D as aa, k as Ye, l as wt, q as Qt, t as oa, v as sa, w as ia } from "./DevPortalProvider-BWeAysxF.js";
+import { c as Ut, P as Ie, R as ca, I as ua, S as la } from "./Spinner-Coi7ORUV.js";
 /**
  * @license lucide-react v0.378.0 - ISC
  *
@@ -87,7 +87,7 @@ function ma({ error: t }) {
   return /* @__PURE__ */ o.jsx(Et, { error: t });
 }
 var ve = {};
-const ga = /* @__PURE__ */ ze(Yr), va = /* @__PURE__ */ ze(vr), xa = /* @__PURE__ */ ze(hr);
+const ga = /* @__PURE__ */ ze(Yr), va = /* @__PURE__ */ ze(gr), xa = /* @__PURE__ */ ze(hr);
 Object.defineProperty(ve, "__esModule", { value: !0 });
 var ya = Qr, K = ga, We = va, U = xa;
 function wa(t) {
@@ -443,7 +443,7 @@ var L, Ct, Oa = (Ct = class extends $t {
     this.config = e, b(this, S, /* @__PURE__ */ new Map()), b(this, pe, Date.now());
   }
   build(e, n, r) {
-    const a = new wr({
+    const a = new yr({
       mutationCache: this,
       mutationId: ++Ce(this, pe)._,
       options: e.defaultMutationOptions(n),
@@ -940,12 +940,12 @@ var Ue = ["Enter", " "], Xa = ["ArrowDown", "PageUp", "Home"], Vt = ["ArrowUp",
 }, Za = {
   ltr: ["ArrowLeft"],
   rtl: ["ArrowRight"]
-}, xe = "Menu", [de, eo, to] = Mr(xe), [Z, Yt] = jt(xe, [
+}, xe = "Menu", [de, eo, to] = wr(xe), [Z, Yt] = jt(xe, [
   to,
   Nt,
   Ut
 ]), ye = Nt(), Xt = Ut(), [Wt, V] = Z(xe), [no, we] = Z(xe), Jt = (t) => {
-  const { __scopeMenu: e, open: n = !1, children: r, dir: a, onOpenChange: s, modal: i = !0 } = t, c = ye(e), [l, p] = u.useState(null), f = u.useRef(!1), d = qe(s), g = Ir(a);
+  const { __scopeMenu: e, open: n = !1, children: r, dir: a, onOpenChange: s, modal: i = !0 } = t, c = ye(e), [l, p] = u.useState(null), f = u.useRef(!1), d = qe(s), g = Dr(a);
   return u.useEffect(() => {
     const v = () => {
       f.current = !0, document.addEventListener("pointerdown", x, { capture: !0, once: !0 }), document.addEventListener("pointermove", x, { capture: !0, once: !0 });
@@ -979,7 +979,7 @@ Jt.displayName = xe;
 var ro = "MenuAnchor", Je = u.forwardRef(
   (t, e) => {
     const { __scopeMenu: n, ...r } = t, a = ye(n);
-    return /* @__PURE__ */ o.jsx(br, { ...a, ...r, ref: e });
+    return /* @__PURE__ */ o.jsx(Mr, { ...a, ...r, ref: e });
   }
 );
 Je.displayName = ro;
@@ -987,7 +987,7 @@ var Ze = "MenuPortal", [ao, Zt] = Z(Ze, {
   forceMount: void 0
 }), en = (t) => {
   const { __scopeMenu: e, forceMount: n, children: r, container: a } = t, s = V(Ze, e);
-  return /* @__PURE__ */ o.jsx(ao, { scope: e, forceMount: n, children: /* @__PURE__ */ o.jsx(Ie, { present: n || s.open, children: /* @__PURE__ */ o.jsx(Ar, { asChild: !0, container: a, children: r }) }) });
+  return /* @__PURE__ */ o.jsx(ao, { scope: e, forceMount: n, children: /* @__PURE__ */ o.jsx(Ie, { present: n || s.open, children: /* @__PURE__ */ o.jsx(Ir, { asChild: !0, container: a, children: r }) }) });
 };
 en.displayName = Ze;
 var T = "MenuContent", [oo, et] = Z(T), tn = u.forwardRef(
@@ -1000,7 +1000,7 @@ var T = "MenuContent", [oo, et] = Z(T), tn = u.forwardRef(
     const n = V(T, t.__scopeMenu), r = u.useRef(null), a = fe(e, r);
     return u.useEffect(() => {
       const s = r.current;
-      if (s) return Cr(s);
+      if (s) return br(s);
     }, []), /* @__PURE__ */ o.jsx(
       tt,
       {
@@ -1048,14 +1048,14 @@ var T = "MenuContent", [oo, et] = Z(T), tn = u.forwardRef(
       onDismiss: v,
       disableOutsideScroll: x,
       ...R
-    } = t, N = V(T, n), _ = we(T, n), D = ye(n), w = Xt(n), E = eo(n), [$, Y] = u.useState(null), ee = u.useRef(null), Me = fe(e, ee, N.onContentChange), X = u.useRef(0), be = u.useRef(""), rr = u.useRef(0), Oe = u.useRef(null), it = u.useRef("right"), Te = u.useRef(0), ar = x ? jr : u.Fragment, or = x ? { as: Nr, allowPinchZoom: !0 } : void 0, sr = (m) => {
+    } = t, N = V(T, n), _ = we(T, n), D = ye(n), w = Xt(n), E = eo(n), [$, Y] = u.useState(null), ee = u.useRef(null), Me = fe(e, ee, N.onContentChange), X = u.useRef(0), be = u.useRef(""), rr = u.useRef(0), Oe = u.useRef(null), it = u.useRef("right"), Te = u.useRef(0), ar = x ? Sr : u.Fragment, or = x ? { as: jr, allowPinchZoom: !0 } : void 0, sr = (m) => {
       var ne, ut;
       const I = be.current + m, k = E().filter((B) => !B.disabled), G = document.activeElement, ke = (ne = k.find((B) => B.ref.current === G)) == null ? void 0 : ne.textValue, Fe = k.map((B) => B.textValue), ct = wo(Fe, I, ke), ce = (ut = k.find((B) => B.textValue === ct)) == null ? void 0 : ut.ref.current;
       (function B(lt) {
         be.current = lt, window.clearTimeout(X.current), lt !== "" && (X.current = window.setTimeout(() => B(""), 1e3));
       })(I), ce && setTimeout(() => ce.focus());
     };
-    u.useEffect(() => () => window.clearTimeout(X.current), []), Pr();
+    u.useEffect(() => () => window.clearTimeout(X.current), []), Cr();
     const te = u.useCallback((m) => {
       var k, G;
       return it.current === ((k = Oe.current) == null ? void 0 : k.side) && bo(m, (G = Oe.current) == null ? void 0 : G.area);
@@ -1089,7 +1089,7 @@ var T = "MenuContent", [oo, et] = Z(T), tn = u.forwardRef(
           Oe.current = m;
         }, []),
         children: /* @__PURE__ */ o.jsx(ar, { ...or, children: /* @__PURE__ */ o.jsx(
-          Rr,
+          Pr,
           {
             asChild: !0,
             trapped: a,
@@ -1099,7 +1099,7 @@ var T = "MenuContent", [oo, et] = Z(T), tn = u.forwardRef(
             }),
             onUnmountAutoFocus: i,
             children: /* @__PURE__ */ o.jsx(
-              _r,
+              Rr,
               {
                 asChild: !0,
                 disableOutsidePointerEvents: c,
@@ -1123,7 +1123,7 @@ var T = "MenuContent", [oo, et] = Z(T), tn = u.forwardRef(
                     }),
                     preventScrollOnEntryFocus: !0,
                     children: /* @__PURE__ */ o.jsx(
-                      Er,
+                      _r,
                       {
                         role: "menu",
                         "aria-orientation": "vertical",
@@ -1189,7 +1189,7 @@ var Ne = "MenuItem", bt = "menu.itemSelect", Ae = u.forwardRef(
       const d = s.current;
       if (!n && d) {
         const g = new CustomEvent(bt, { bubbles: !0, cancelable: !0 });
-        d.addEventListener(bt, (v) => r == null ? void 0 : r(v), { once: !0 }), Dr(d, g), g.defaultPrevented ? p.current = !1 : i.onClose();
+        d.addEventListener(bt, (v) => r == null ? void 0 : r(v), { once: !0 }), Nr(d, g), g.defaultPrevented ? p.current = !1 : i.onClose();
       }
     };
     return /* @__PURE__ */ o.jsx(
@@ -1351,7 +1351,7 @@ hn.displayName = mo;
 var go = "MenuArrow", pn = u.forwardRef(
   (t, e) => {
     const { __scopeMenu: n, ...r } = t, a = ye(n);
-    return /* @__PURE__ */ o.jsx(Sr, { ...a, ...r, ref: e });
+    return /* @__PURE__ */ o.jsx(Er, { ...a, ...r, ref: e });
   }
 );
 pn.displayName = go;
@@ -1844,7 +1844,7 @@ const hs = () => {
     /* @__PURE__ */ o.jsx(Wn, { item: e }, n)
   )) }) })
 ] }, t.label) : /* @__PURE__ */ o.jsx(Ee, { to: t.path ?? "", children: /* @__PURE__ */ o.jsx(Vn, { children: t.label }, t.label) }), Jn = kt(function() {
-  const [e, n] = kr(), { isAuthenticated: r, profile: a, isAuthEnabled: s } = fr(), { pathname: i } = J(), c = Ve(), { page: l, plugins: p } = c, f = e ? pa : fa;
+  const [e, n] = kr(), { isAuthenticated: r, profile: a, isAuthEnabled: s } = Ar(), { pathname: i } = J(), c = Ve(), { page: l, plugins: p } = c, f = e ? pa : fa;
   return /* @__PURE__ */ o.jsx("header", { className: "fixed top-0 w-full z-10 bg-background/80 backdrop-blur", children: /* @__PURE__ */ o.jsxs("div", { className: "max-w-screen-2xl mx-auto", children: [
     /* @__PURE__ */ o.jsxs("div", { className: "grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]", children: [
       /* @__PURE__ */ o.jsx("div", { className: "flex", children: /* @__PURE__ */ o.jsx(Ee, { to: "/", children: /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-3.5", children: [
@@ -1926,10 +1926,10 @@ const hs = () => {
       ...Fr,
       ...(D = e.mdx) == null ? void 0 : D.components
     };
-  }, [(R = e.mdx) == null ? void 0 : R.components, e.plugins]), [a, s] = le(!1), { stagger: i } = qr(Qe), [c, l] = le(!1), p = xr(), f = ge("idle"), d = Le(
+  }, [(R = e.mdx) == null ? void 0 : R.components, e.plugins]), [a, s] = le(!1), { stagger: i } = qr(Qe), [c, l] = le(!1), p = vr(), f = ge("idle"), d = Le(
     () => c ? { stagger: !0 } : { stagger: i },
     [i, c]
-  ), g = yr();
+  ), g = xr();
   W(() => {
     c || l(!0);
   }, [c, g.location]);
@@ -1945,7 +1945,7 @@ const hs = () => {
   });
   return a ? /* @__PURE__ */ o.jsxs(ra, { client: zt, children: [
     /* @__PURE__ */ o.jsx(Ge, { children: x }),
-    /* @__PURE__ */ o.jsx(Qe.Provider, { value: d, children: /* @__PURE__ */ o.jsx(aa, { value: v, children: /* @__PURE__ */ o.jsx(ur, { components: r, children: /* @__PURE__ */ o.jsx(Lr, { children: /* @__PURE__ */ o.jsx(fs, { value: n, children: /* @__PURE__ */ o.jsx(mr, { slotlets: e.slotlets, children: /* @__PURE__ */ o.jsx(Kr, { children: t ?? /* @__PURE__ */ o.jsx(St, {}) }) }) }) }) }) }) })
+    /* @__PURE__ */ o.jsx(Qe.Provider, { value: d, children: /* @__PURE__ */ o.jsx(aa, { value: v, children: /* @__PURE__ */ o.jsx(ur, { components: r, children: /* @__PURE__ */ o.jsx(Lr, { children: /* @__PURE__ */ o.jsx(fs, { value: n, children: /* @__PURE__ */ o.jsx(fr, { slotlets: e.slotlets, children: /* @__PURE__ */ o.jsx(Kr, { children: t ?? /* @__PURE__ */ o.jsx(St, {}) }) }) }) }) }) }) })
   ] }) : null;
 }, gs = kt(ms), er = (t) => /* @__PURE__ */ o.jsx($a, { FallbackComponent: Ya, children: /* @__PURE__ */ o.jsx(gs, { ...t }) });
 er.displayName = "DevPortal";
@@ -2196,7 +2196,7 @@ const vs = () => {
       }
     ) })
   ] });
-}, Ls = dr, Ks = Br, $s = er, Bs = Cs, Qs = Ee, Us = gr, Gs = ma, qs = Ia, Hs = Aa, zs = Be, Vs = Ge;
+}, Ls = dr, Ks = Br, $s = er, Bs = Cs, Qs = Ee, Us = mr, Gs = ma, qs = Ia, Hs = Aa, zs = Be, Vs = Ge;
 export {
   qs as Bootstrap,
   Hs as BootstrapStatic,

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

@@ -1,9 +1,9 @@
 import { a as f, j as e, O as j } from "./jsx-runtime-CJBdjYYx.js";
-import { u as g, a as x, R as v } from "./SlotletProvider-D_Vz-7c_.js";
-import { u as w, a as h, I as k, S as b, b as K, c as N, d as A, e as E, f as p } from "./Input-GFpPXs5b.js";
+import { a as x, R as g } from "./SlotletProvider-B71hNEUL.js";
+import { u as v, a as h, I as w, S as k, b, c as K, d as N, e as A, f as p } from "./Input-3IEt27jb.js";
 import { L as u } from "./index-Dt-pU7Vu.js";
-import { u as m, x as S, y as I } from "./DevPortalProvider-BTFqdAEL.js";
-import { B as o } from "./Combination-CS4rK8IJ.js";
+import { u as m, x as E, y as S } from "./DevPortalProvider-BWeAysxF.js";
+import { B as o, p as I } from "./Combination-C442XfGG.js";
 import { D as P } from "./DeveloperHint-DQVwIery.js";
 import { useState as C } from "react";
 import { c as l, a as D } from "./Markdown-QsZ-PHET.js";
@@ -71,7 +71,7 @@ class M extends Error {
   }
 }
 const L = ({ service: t }) => {
-  const n = m(), r = f(), a = w({
+  const n = m(), r = f(), a = v({
     defaultValues: {
       expiresOn: "30"
     }
@@ -95,16 +95,16 @@ const L = ({ service: t }) => {
         onSubmit: a.handleSubmit((s) => i.mutate(s)),
         children: /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col", children: [
           "Note",
-          /* @__PURE__ */ e.jsx(k, { ...a.register("description") }),
+          /* @__PURE__ */ e.jsx(w, { ...a.register("description") }),
           "Expiration",
           /* @__PURE__ */ e.jsxs(
-            b,
+            k,
             {
               onValueChange: (s) => a.setValue("expiresOn", s),
               defaultValue: a.getValues("expiresOn"),
               children: [
-                /* @__PURE__ */ e.jsx(K, { children: /* @__PURE__ */ e.jsx(N, {}) }),
-                /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsxs(E, { children: [
+                /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsx(K, {}) }),
+                /* @__PURE__ */ e.jsx(N, { children: /* @__PURE__ */ e.jsxs(A, { children: [
                   [7, 30, 60, 90].map((s) => /* @__PURE__ */ e.jsxs(p, { value: String(s), children: [
                     s,
                     " days"
@@ -126,7 +126,7 @@ const L = ({ service: t }) => {
   const n = /* @__PURE__ */ new Date();
   return n.setDate(n.getDate() + t), n.toISOString();
 }, F = () => {
-  const t = g();
+  const t = I();
   return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(j, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
     "Please login first to view this page",
     /* @__PURE__ */ e.jsx(o, { onClick: () => t.login(), children: "Login" })
@@ -136,7 +136,7 @@ const L = ({ service: t }) => {
     "."
   ] }) });
 }, V = ({ service: t }) => {
-  const n = m(), r = S(), { data: a } = I({
+  const n = m(), r = E(), { data: a } = S({
     queryFn: () => t.getKeys(n),
     queryKey: ["api-keys"],
     retry: !1
@@ -282,7 +282,7 @@ const L = ({ service: t }) => {
     getRoutes: () => [
       {
         element: /* @__PURE__ */ e.jsx(F, {}),
-        errorElement: /* @__PURE__ */ e.jsx(v, {}),
+        errorElement: /* @__PURE__ */ e.jsx(g, {}),
         children: [
           {
             path: "/settings/api-keys",

package/lib/zudoku.plugin-markdown.js

@@ -1,5 +1,5 @@
 import { j as o, N as x } from "./jsx-runtime-CJBdjYYx.js";
-import { v as d, z as g, l as h } from "./DevPortalProvider-BTFqdAEL.js";
+import { v as d, z as g, l as h } from "./DevPortalProvider-BWeAysxF.js";
 const f = (t, e) => {
   const a = Object.entries(t).flatMap(
     ([n, m]) => {
@@ -9,7 +9,7 @@ const f = (t, e) => {
       return {
         path: i.at(-1) === "index" ? i.slice(0, -1).join("/") : s,
         lazy: async () => {
-          const { MdxPage: u } = await import("./MdxPage-V4FCB0C_.js"), { default: c, ...l } = await m();
+          const { MdxPage: u } = await import("./MdxPage-CA1WmW14.js"), { default: c, ...l } = await m();
           return {
             element: /* @__PURE__ */ o.jsx(
               u,

package/lib/zudoku.plugin-openapi.js

@@ -1,11 +1,12 @@
 import "./jsx-runtime-CJBdjYYx.js";
-import { o as a } from "./index-Uqja2h2M.js";
+import { o as f } from "./index-CLkuJSxj.js";
 import "./urql-DrBfkb92.js";
+import "./DevPortalProvider-BWeAysxF.js";
 import "zudoku/openapi-worker";
+import "./Combination-C442XfGG.js";
 import "./Markdown-QsZ-PHET.js";
-import "./Combination-CS4rK8IJ.js";
 import "./router-BiRCp01d.js";
 export {
-  a as openApiPlugin
+  f as openApiPlugin
 };
 //# sourceMappingURL=zudoku.plugin-openapi.js.map

package/lib/zudoku.plugin-openapi.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.79",
+  "version": "0.3.0-dev.80",
   "type": "module",
   "files": [
     "dist",

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

@@ -61,7 +61,7 @@ const getConverted = (snippet: HTTPSnippet, option: string) => {
   return converted ? converted[0] : "";
 };
 
-const GetServerQuery = graphql(/* GraphQL */ `
+export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       url

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

@@ -3,24 +3,25 @@ import {
   type DevPortalPlugin,
   type PluginNavigationCategory,
 } from "../../core/plugins.js";
-import { MethodBadge } from "./MethodBadge.js";
 import { graphql } from "./graphql/index.js";
+import { MethodBadge } from "./MethodBadge.js";
 import {
   Client as UrqlClient,
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
 
-import { CirclePlayIcon } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { CirclePlayIcon, LogInIcon } from "lucide-react";
 import { createClient } from "zudoku/openapi-worker";
+import { useAuth } from "../../authentication/hook.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { Button } from "../../ui/Button.js";
 import { OasPluginConfig } from "./interfaces.js";
-import {
-  PlaygroundDialog,
-  type PlaygroundDialogProps,
-} from "./playground/PlaygroundDialog.js";
+import type { PlaygroundContentProps } from "./playground/Playground.js";
+import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
+import { GetServerQuery } from "./Sidecar.js";
 
 const GetCategoriesQuery = graphql(`
   query GetCategories($input: JSON!, $type: SchemaType!) {
@@ -88,19 +89,54 @@ export const openApiPlugin = (
       }
     },
     getMdxComponents: () => ({
-      OpenPlaygroundButton: (props: PlaygroundDialogProps) => (
-        <div>
-          <PlaygroundDialog {...props}>
+      OpenPlaygroundButton: ({
+        requireAuth,
+        server,
+        method,
+        url,
+        ...props
+      }: Partial<PlaygroundContentProps> & { requireAuth: boolean }) => {
+        const auth = useAuth();
+        const serverQuery = useQuery({
+          queryFn: async () => {
+            const result = await client.query(GetServerQuery, {
+              type: config.type,
+              input: config.input,
+            });
+
+            return result.data;
+          },
+          enabled: !server,
+          queryKey: ["playground-server"],
+        });
+
+        if (requireAuth && !auth.isAuthenticated) {
+          return (
+            <Button
+              className="gap-2 items-center"
+              variant="outline"
+              onClick={auth.login}
+            >
+              Login to open in Playground <LogInIcon size={16} />
+            </Button>
+          );
+        }
+
+        return (
+          <PlaygroundDialog
+            url={url ?? "/"}
+            method={method ?? "get"}
+            server={
+              server ?? serverQuery.data?.schema.url ?? "https://example.com"
+            }
+            {...props}
+          >
             <Button className="gap-2 items-center" variant="outline">
-              {props.children ?? (
-                <>
-                  Open in Playground <CirclePlayIcon size={16} />
-                </>
-              )}
+              Open in Playground <CirclePlayIcon size={16} />
             </Button>
           </PlaygroundDialog>
-        </div>
-      ),
+        );
+      },
     }),
     getNavigation: async (path: string) => {
       if (!matchPath({ path: basePath, end: false }, path)) {