create-plasmic-app 0.0.131 → 0.0.132

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -63,14 +63,38 @@ import {
 
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
 import { Fetcher } from "@plasmicapp/react-web/lib/data-sources";
-
-import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
 import "@plasmicapp/react-web/lib/plasmic.css";
 
 import * as projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import * as sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
 
+const emptyProxy: any = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q: any): any {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
 createPlasmicElementProxy;
 
 export type PlasmicHomepage__VariantMembers = {};
@@ -128,9 +152,9 @@ function PlasmicHomepage__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
-  const globalVariants = ensureGlobalVariants({
-    screen: useScreenVariantsscBjPxgdxdzbv()
-  });
+  const globalVariants = _useGlobalVariants();
+
+  const styleTokensClassNames = _useStyleTokens();
 
   return (
     <React.Fragment>
@@ -151,7 +175,7 @@ function PlasmicHomepage__RenderFunc(props: {
             projectcss.root_reset,
             projectcss.plasmic_default_styles,
             projectcss.plasmic_mixins,
-            projectcss.plasmic_tokens,
+            styleTokensClassNames,
             sty.root
           )}
         >
@@ -260,7 +284,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicHomepage__VariantsArgs;
     args?: PlasmicHomepage__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicHomepage__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props
@@ -318,13 +344,11 @@ export const PlasmicHomepage = Object.assign(
     internalVariantProps: PlasmicHomepage__VariantProps,
     internalArgProps: PlasmicHomepage__ArgProps,
 
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx

@@ -62,6 +62,8 @@ import {
 } from "@plasmicapp/react-web/lib/host";
 
 import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
 import "@plasmicapp/react-web/lib/plasmic.css";
 
@@ -122,6 +124,8 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
     <Button
       data-plasmic-name={"root"}
@@ -199,7 +203,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicRandomDynamicPageButton__VariantsArgs;
     args?: PlasmicRandomDynamicPageButton__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicRandomDynamicPageButton__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicRandomDynamicPageButton__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicRandomDynamicPageButton__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import { createUseStyleTokens } from "@plasmicapp/react-web";
+
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+
+import * as projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+
+const data = {
+  base: `${projectcss.plasmic_tokens}`,
+  varianted: []
+};
+
+export const _useStyleTokens = createUseStyleTokens(data, _useGlobalVariants);

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.tsx

@@ -21,7 +21,7 @@ export function CheckSvgIcon(props: CheckSvgIconProps) {
       style={{
         fill: "currentcolor",
 
-        ...(style || {}),
+        ...(style || {})
       }}
       className={classNames("plasmic-default__svg", className)}
       {...restProps}

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/plasmic.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import { createUseGlobalVariants } from "@plasmicapp/react-web";
+
+import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+
+export const _useGlobalVariants = createUseGlobalVariants({
+  screen: useScreenVariantsscBjPxgdxdzbv
+});

package/cpa-out/gatsby-loader-js/package.json

@@ -14,9 +14,9 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@plasmicapp/loader-gatsby": "^1.0.398",
-    "gatsby": "^5.14.1",
-    "gatsby-plugin-react-helmet": "^6.14.0",
+    "@plasmicapp/loader-gatsby": "^1.0.416",
+    "gatsby": "^5.14.6",
+    "gatsby-plugin-react-helmet": "^6.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0"

package/cpa-out/gatsby-loader-ts/package.json

@@ -15,9 +15,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@plasmicapp/loader-gatsby": "^1.0.398",
-    "gatsby": "^5.14.1",
-    "gatsby-plugin-react-helmet": "^6.14.0",
+    "@plasmicapp/loader-gatsby": "^1.0.416",
+    "gatsby": "^5.14.6",
+    "gatsby-plugin-react-helmet": "^6.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0"

package/cpa-out/nextjs-app-loader-js/package.json

@@ -9,13 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/loader-nextjs": "^1.0.438",
-    "next": "14.2.32",
+    "@plasmicapp/loader-nextjs": "^1.0.454",
+    "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "eslint": "^8",
-    "eslint-config-next": "14.2.32"
+    "eslint-config-next": "14.2.35"
   }
 }

package/cpa-out/nextjs-app-loader-ts/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/loader-nextjs": "^1.0.438",
-    "next": "14.2.32",
+    "@plasmicapp/loader-nextjs": "^1.0.454",
+    "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -19,7 +19,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.32",
+    "eslint-config-next": "14.2.35",
     "typescript": "^5"
   }
 }

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -85,37 +85,38 @@ function PlasmicButton__RenderFunc(props) {
         path: "showStartIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showStartIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+          $props.showStartIcon
       },
       {
         path: "showEndIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showEndIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.showEndIcon
       },
       {
         path: "isDisabled",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.isDisabled
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.isDisabled
       },
       {
         path: "shape",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.shape
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.shape
       },
       {
         path: "size",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.size
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.size
       },
       {
         path: "color",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.color
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.color
       }
     ],
 
@@ -125,6 +126,7 @@ function PlasmicButton__RenderFunc(props) {
     $props,
     $ctx,
     $queries: {},
+    $q: {},
     $refs
   });
   const [isRootFocusVisibleWithin, triggerRootFocusVisibleWithinProps] =

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -23,6 +23,30 @@ import "@plasmicapp/react-web/lib/plasmic.css";
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css
 
+const emptyProxy = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q) {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q, $ctx) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
 createPlasmicElementProxy;
 
 export const PlasmicDynamicPage__VariantProps = new Array();
@@ -58,6 +82,10 @@ function PlasmicDynamicPage__RenderFunc(props) {
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
+  const pageMetadata = generateDynamicMetadata(
+    wrapQueriesWithLoadingProxy({}),
+    $ctx
+  );
   const styleTokensClassNames = _useStyleTokens();
   return (
     <React.Fragment>
@@ -175,13 +203,11 @@ export const PlasmicDynamicPage = Object.assign(
     // Metadata about props expected for PlasmicDynamicPage
     internalVariantProps: PlasmicDynamicPage__VariantProps,
     internalArgProps: PlasmicDynamicPage__ArgProps,
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/dynamic/[slug]",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx

@@ -18,7 +18,7 @@ export function ScreenContextProvider(props) {
 }
 
 export const useScreenVariants = createUseScreenVariants(true, {
-  desktopOnly: "(min-width:768px)",
+  desktopOnly: "(min-width:768px)"
 });
 
 export default ScreenContext;

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -25,6 +25,30 @@ import "@plasmicapp/react-web/lib/plasmic.css";
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
 
+const emptyProxy = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q) {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q, $ctx) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
 createPlasmicElementProxy;
 
 export const PlasmicHomepage__VariantProps = new Array();
@@ -61,6 +85,10 @@ function PlasmicHomepage__RenderFunc(props) {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
   const globalVariants = _useGlobalVariants();
+  const pageMetadata = generateDynamicMetadata(
+    wrapQueriesWithLoadingProxy({}),
+    $ctx
+  );
   const styleTokensClassNames = _useStyleTokens();
   return (
     <React.Fragment>
@@ -210,13 +238,11 @@ export const PlasmicHomepage = Object.assign(
     // Metadata about props expected for PlasmicHomepage
     internalVariantProps: PlasmicHomepage__VariantProps,
     internalArgProps: PlasmicHomepage__ArgProps,
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.jsx

@@ -3,21 +3,13 @@
 // @ts-nocheck
 // This code is auto-generated by Plasmic; please do not edit!
 // Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
-import {
-  createStyleTokensProvider,
-  createUseStyleTokens
-} from "@plasmicapp/react-web";
+import { createUseStyleTokens } from "@plasmicapp/react-web";
 import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 
 const data = {
-  base: projectcss.plasmic_tokens,
+  base: `${projectcss.plasmic_tokens}`,
   varianted: []
 };
 
 export const _useStyleTokens = createUseStyleTokens(data, _useGlobalVariants);
-
-export const StyleTokensProvider = createStyleTokensProvider(
-  data,
-  _useGlobalVariants
-);

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Checksvg.jsx

@@ -16,7 +16,7 @@ export function CheckSvgIcon(props) {
       width={"1em"}
       style={{
         fill: "currentcolor",
-        ...(style || {}),
+        ...(style || {})
       }}
       className={classNames("plasmic-default__svg", className)}
       {...restProps}

package/cpa-out/nextjs-pages-codegen-js/package.json

@@ -9,14 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.343",
-    "@plasmicapp/react-web": "^0.2.401",
-    "next": "14.2.32",
+    "@plasmicapp/cli": "^0.1.359",
+    "@plasmicapp/react-web": "^0.2.422",
+    "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "eslint": "^8",
-    "eslint-config-next": "14.2.32"
+    "eslint-config-next": "14.2.35"
   }
 }

package/cpa-out/nextjs-pages-codegen-js/pages/dynamic/[slug].jsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/react-web/lib/host";
 import { PlasmicDynamicPage } from "../../components/plasmic/create_plasmic_app/PlasmicDynamicPage";
 import { useRouter } from "next/router";
+import { PlasmicQueryDataProvider } from "@plasmicapp/react-web/lib/query";
 
 function DynamicPage() {
   // Use PlasmicDynamicPage to render this component as it was
@@ -23,13 +24,15 @@ function DynamicPage() {
   // Next.js Custom App component
   // (https://nextjs.org/docs/advanced-features/custom-app).
   return (
-    <PageParamsProvider__
-      route={useRouter()?.pathname}
-      params={useRouter()?.query}
-      query={useRouter()?.query}
-    >
-      <PlasmicDynamicPage />
-    </PageParamsProvider__>
+    <PlasmicQueryDataProvider>
+      <PageParamsProvider__
+        route={useRouter()?.pathname}
+        params={useRouter()?.query}
+        query={useRouter()?.query}
+      >
+        <PlasmicDynamicPage />
+      </PageParamsProvider__>
+    </PlasmicQueryDataProvider>
   );
 }
 

package/cpa-out/nextjs-pages-codegen-js/pages/index.jsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/react-web/lib/host";
 import { PlasmicHomepage } from "../components/plasmic/create_plasmic_app/PlasmicHomepage";
 import { useRouter } from "next/router";
+import { PlasmicQueryDataProvider } from "@plasmicapp/react-web/lib/query";
 
 function Homepage() {
   // Use PlasmicHomepage to render this component as it was
@@ -23,13 +24,15 @@ function Homepage() {
   // Next.js Custom App component
   // (https://nextjs.org/docs/advanced-features/custom-app).
   return (
-    <PageParamsProvider__
-      route={useRouter()?.pathname}
-      params={useRouter()?.query}
-      query={useRouter()?.query}
-    >
-      <PlasmicHomepage />
-    </PageParamsProvider__>
+    <PlasmicQueryDataProvider>
+      <PageParamsProvider__
+        route={useRouter()?.pathname}
+        params={useRouter()?.query}
+        query={useRouter()?.query}
+      >
+        <PlasmicHomepage />
+      </PageParamsProvider__>
+    </PlasmicQueryDataProvider>
   );
 }
 

package/cpa-out/nextjs-pages-codegen-js/plasmic.json

@@ -7,7 +7,7 @@
   },
   "style": {
     "scheme": "css-modules",
-    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css"
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.module.css"
   },
   "images": {
     "scheme": "public-files",
@@ -101,6 +101,7 @@
       "globalContextsFilePath": "",
       "splitsProviderFilePath": "",
       "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.jsx",
+      "dataTokensFilePath": "",
       "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.jsx",
       "codeComponents": [
         {
@@ -130,9 +131,10 @@
     ]
   },
   "wrapPagesWithGlobalContexts": true,
+  "preserveJsImportExtensions": false,
   "nextjsConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.343",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.343/dist/plasmic.schema.json"
+  "cliVersion": "0.1.359",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
 }

package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -219,37 +219,38 @@ function PlasmicButton__RenderFunc(props: {
         path: "showStartIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showStartIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+          $props.showStartIcon
       },
       {
         path: "showEndIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showEndIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.showEndIcon
       },
       {
         path: "isDisabled",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.isDisabled
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.isDisabled
       },
       {
         path: "shape",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.shape
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.shape
       },
       {
         path: "size",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.size
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.size
       },
       {
         path: "color",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.color
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.color
       }
     ],
     [$props, $ctx, $refs]
@@ -258,6 +259,7 @@ function PlasmicButton__RenderFunc(props: {
     $props,
     $ctx,
     $queries: {},
+    $q: {},
     $refs
   });
 
@@ -705,7 +707,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicButton__VariantsArgs;
     args?: PlasmicButton__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicButton__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicButton__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicButton__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props