create-plasmic-app 0.0.111 → 0.0.113

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 22.18.0 # gatsby doesn't work on node 24 yet

package/README.internal.md

@@ -1,13 +1,16 @@
-# Testing
+# Create Plasmic App - Development
 
-Use `yarn run-cpa` to run CPA with predefined sets of args.
-This will update the files in cpa-out, allowing us to review any diffs.
+## Testing
 
-# Debugging
+Use `yarn run-cpa` to run create-plasmic-app with presets that gets copied to `cpa-out/` on success.
 
-Example invocation:
+`yarn run-cpa` will:
 
-    CPA_DEBUG_CHDIR=/path/to/target/project \
-        node --inspect -r ts-node/register src/index.ts
-
-- `CPA_DEBUG_CHDIR`: First cd's into the target directory (which typically has its own node_modules etc., so it's tricky to try to run the source from there).
+1. Let you choose presets to run create-plasmic-app with
+2. Lint and build create-plasmic-app
+3. Sequentially run create-plasmic-app on chosen presets
+4. For each preset,
+    1. Create a new directory in /tmp/cpa-out/<preset>
+    2. Run create-plasmic-app with the preset args
+    3. Build the new app
+    4. Copy the new app to `packages/create-plasmic-app/cpa-out/<preset>` on success

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

@@ -14,8 +14,8 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.337",
-    "@plasmicapp/react-web": "^0.2.381",
+    "@plasmicapp/cli": "^0.1.341",
+    "@plasmicapp/react-web": "^0.2.397",
     "gatsby": "^5.14.1",
     "gatsby-plugin-react-helmet": "^6.14.0",
     "react": "^18.2.0",

package/cpa-out/gatsby-codegen-js/plasmic.json

@@ -131,6 +131,6 @@
   "gatsbyConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.337",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.337/dist/plasmic.schema.json"
+  "cliVersion": "0.1.341",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.341/dist/plasmic.schema.json"
 }

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -12,7 +12,6 @@ import * as React from "react";
 import { Link } from "gatsby";
 import {
   PlasmicLink as PlasmicLink__,
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts,
@@ -126,13 +125,11 @@ function PlasmicButton__RenderFunc(props) {
     focusVisibleWithin_root: isRootFocusVisibleWithin
   };
   return (
-    <Stack__
-      as={"button"}
+    <button
       data-plasmic-name={"root"}
       data-plasmic-override={overrides.root}
       data-plasmic-root={true}
       data-plasmic-for-node={forNode}
-      hasGap={true}
       className={classNames(
         projectcss.all,
         projectcss.button,
@@ -501,7 +498,7 @@ function PlasmicButton__RenderFunc(props) {
           })}
         </div>
       ) : null}
-    </Stack__>
+    </button>
   );
 }
 

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -10,7 +10,6 @@
 // Component: AO44A-w7hh
 import * as React from "react";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts
@@ -75,11 +74,9 @@ function PlasmicDynamicPage__RenderFunc(props) {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -116,7 +113,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.jsx

@@ -9,6 +9,14 @@ export const ScreenContext = React.createContext(
   "PLEASE_RENDER_INSIDE_PROVIDER"
 );
 
+export function ScreenContextProvider(props) {
+  return (
+    <ScreenContext.Provider value={props.value}>
+      {props.children}
+    </ScreenContext.Provider>
+  );
+}
+
 export const useScreenVariants = createUseScreenVariants(true, {
   desktopOnly: "(min-width:768px)",
 });

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -10,7 +10,6 @@
 // Component: 6uuAAE1jiCew
 import * as React from "react";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts,
@@ -81,11 +80,9 @@ function PlasmicHomepage__RenderFunc(props) {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -152,7 +149,7 @@ function PlasmicHomepage__RenderFunc(props) {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -15,8 +15,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.337",
-    "@plasmicapp/react-web": "^0.2.381",
+    "@plasmicapp/cli": "^0.1.341",
+    "@plasmicapp/react-web": "^0.2.397",
     "gatsby": "^5.14.1",
     "gatsby-plugin-react-helmet": "^6.14.0",
     "react": "^18.2.0",

package/cpa-out/gatsby-codegen-ts/plasmic.json

@@ -131,6 +131,6 @@
   "gatsbyConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.337",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.337/dist/plasmic.schema.json"
+  "cliVersion": "0.1.341",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.341/dist/plasmic.schema.json"
 }

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

@@ -260,13 +260,11 @@ function PlasmicButton__RenderFunc(props: {
   };
 
   return (
-    <Stack__
-      as={"button"}
+    <button
       data-plasmic-name={"root"}
       data-plasmic-override={overrides.root}
       data-plasmic-root={true}
       data-plasmic-for-node={forNode}
-      hasGap={true}
       className={classNames(
         projectcss.all,
         projectcss.button,
@@ -635,7 +633,7 @@ function PlasmicButton__RenderFunc(props: {
           })}
         </div>
       ) : null}
-    </Stack__>
+    </button>
   ) as React.ReactElement | null;
 }
 

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

@@ -147,11 +147,9 @@ function PlasmicDynamicPage__RenderFunc(props: {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -188,7 +186,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -10,6 +10,15 @@ export type ScreenValue = "desktopOnly";
 export const ScreenContext = React.createContext<ScreenValue[] | undefined>(
   "PLEASE_RENDER_INSIDE_PROVIDER" as any
 );
+export function ScreenContextProvider(
+  props: React.PropsWithChildren<{ value: ScreenValue[] | undefined }>
+) {
+  return (
+    <ScreenContext.Provider value={props.value}>
+      {props.children}
+    </ScreenContext.Provider>
+  );
+}
 
 export const useScreenVariants = createUseScreenVariants(true, {
   desktopOnly: "(min-width:768px)",

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

@@ -155,11 +155,9 @@ function PlasmicHomepage__RenderFunc(props: {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -226,7 +224,7 @@ function PlasmicHomepage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -14,7 +14,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@plasmicapp/loader-gatsby": "^1.0.397",
+    "@plasmicapp/loader-gatsby": "^1.0.398",
     "gatsby": "^5.14.1",
     "gatsby-plugin-react-helmet": "^6.14.0",
     "react": "^18.2.0",

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

@@ -15,7 +15,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@plasmicapp/loader-gatsby": "^1.0.397",
+    "@plasmicapp/loader-gatsby": "^1.0.398",
     "gatsby": "^5.14.1",
     "gatsby-plugin-react-helmet": "^6.14.0",
     "react": "^18.2.0",

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

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

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

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

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

@@ -13,7 +13,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import {
   PlasmicLink as PlasmicLink__,
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts,
@@ -24,6 +23,7 @@ import {
 } from "@plasmicapp/react-web";
 import { useDataEnv } from "@plasmicapp/react-web/lib/host";
 import * as pp from "@plasmicapp/react-web";
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 import "@plasmicapp/react-web/lib/plasmic.css";
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicButton.module.css"; // plasmic-import: TQcvW_pSKi3/css
@@ -134,21 +134,20 @@ function PlasmicButton__RenderFunc(props) {
   const triggers = {
     focusVisibleWithin_root: isRootFocusVisibleWithin
   };
+  const styleTokensClassNames = _useStyleTokens();
   return (
-    <Stack__
-      as={"button"}
+    <button
       data-plasmic-name={"root"}
       data-plasmic-override={overrides.root}
       data-plasmic-root={true}
       data-plasmic-for-node={forNode}
-      hasGap={true}
       className={classNames(
         projectcss.all,
         projectcss.button,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,
-        projectcss.plasmic_tokens,
+        styleTokensClassNames,
         sty.root,
         {
           [sty.root___focusVisibleWithin]: triggers.focusVisibleWithin_root,
@@ -510,7 +509,7 @@ function PlasmicButton__RenderFunc(props) {
           })}
         </div>
       ) : null}
-    </Stack__>
+    </button>
   );
 }
 

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

@@ -12,13 +12,13 @@ import * as React from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts
 } from "@plasmicapp/react-web";
 import { useDataEnv } from "@plasmicapp/react-web/lib/host";
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 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
@@ -58,6 +58,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
+  const styleTokensClassNames = _useStyleTokens();
   return (
     <React.Fragment>
       <Head></Head>
@@ -79,15 +80,13 @@ function PlasmicDynamicPage__RenderFunc(props) {
             projectcss.root_reset,
             projectcss.plasmic_default_styles,
             projectcss.plasmic_mixins,
-            projectcss.plasmic_tokens,
+            styleTokensClassNames,
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -124,7 +123,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -9,6 +9,14 @@ export const ScreenContext = React.createContext(
   "PLEASE_RENDER_INSIDE_PROVIDER"
 );
 
+export function ScreenContextProvider(props) {
+  return (
+    <ScreenContext.Provider value={props.value}>
+      {props.children}
+    </ScreenContext.Provider>
+  );
+}
+
 export const useScreenVariants = createUseScreenVariants(true, {
   desktopOnly: "(min-width:768px)",
 });

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

@@ -12,16 +12,15 @@ import * as React from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts,
-  ensureGlobalVariants,
   hasVariant
 } from "@plasmicapp/react-web";
 import { useDataEnv } from "@plasmicapp/react-web/lib/host";
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
-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 projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
@@ -61,9 +60,8 @@ function PlasmicHomepage__RenderFunc(props) {
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
-  const globalVariants = ensureGlobalVariants({
-    screen: useScreenVariantsscBjPxgdxdzbv()
-  });
+  const globalVariants = _useGlobalVariants();
+  const styleTokensClassNames = _useStyleTokens();
   return (
     <React.Fragment>
       <Head></Head>
@@ -85,15 +83,13 @@ function PlasmicHomepage__RenderFunc(props) {
             projectcss.root_reset,
             projectcss.plasmic_default_styles,
             projectcss.plasmic_mixins,
-            projectcss.plasmic_tokens,
+            styleTokensClassNames,
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -160,7 +156,7 @@ function PlasmicHomepage__RenderFunc(props) {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -17,6 +17,7 @@ import {
 } from "@plasmicapp/react-web";
 import { useDataEnv } from "@plasmicapp/react-web/lib/host";
 import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 import "@plasmicapp/react-web/lib/plasmic.css";
 import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css
 
@@ -55,6 +56,7 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props) {
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
+  const styleTokensClassNames = _useStyleTokens();
   return (
     <Button
       data-plasmic-name={"root"}

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

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+import {
+  createStyleTokensProvider,
+  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,
+  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/plasmic.jsx

@@ -0,0 +1,11 @@
+/* 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/nextjs-pages-codegen-js/package.json

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

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

@@ -100,6 +100,8 @@
       "indirect": false,
       "globalContextsFilePath": "",
       "splitsProviderFilePath": "",
+      "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.jsx",
+      "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.jsx",
       "codeComponents": [
         {
           "id": "P6aGdYWZ2R",
@@ -131,6 +133,6 @@
   "nextjsConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.337",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.337/dist/plasmic.schema.json"
+  "cliVersion": "0.1.343",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.343/dist/plasmic.schema.json"
 }

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

@@ -61,6 +61,9 @@ import {
 
 import * as pp from "@plasmicapp/react-web";
 
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
+
 import "@plasmicapp/react-web/lib/plasmic.css";
 
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
@@ -205,6 +208,7 @@ function PlasmicButton__RenderFunc(props: {
   };
 
   const __nextRouter = useNextRouter();
+
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
@@ -265,21 +269,21 @@ function PlasmicButton__RenderFunc(props: {
     focusVisibleWithin_root: isRootFocusVisibleWithin
   };
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
-    <Stack__
-      as={"button"}
+    <button
       data-plasmic-name={"root"}
       data-plasmic-override={overrides.root}
       data-plasmic-root={true}
       data-plasmic-for-node={forNode}
-      hasGap={true}
       className={classNames(
         projectcss.all,
         projectcss.button,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,
-        projectcss.plasmic_tokens,
+        styleTokensClassNames,
         sty.root,
         {
           [sty.root___focusVisibleWithin]: triggers.focusVisibleWithin_root,
@@ -641,7 +645,7 @@ function PlasmicButton__RenderFunc(props: {
           })}
         </div>
       ) : null}
-    </Stack__>
+    </button>
   ) as React.ReactElement | null;
 }
 

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

@@ -60,6 +60,8 @@ import {
 } from "@plasmicapp/react-web/lib/host";
 
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
 import "@plasmicapp/react-web/lib/plasmic.css";
 
@@ -120,10 +122,13 @@ function PlasmicDynamicPage__RenderFunc(props: {
   };
 
   const __nextRouter = useNextRouter();
+
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
     <React.Fragment>
       <Head></Head>
@@ -145,15 +150,13 @@ function PlasmicDynamicPage__RenderFunc(props: {
             projectcss.root_reset,
             projectcss.plasmic_default_styles,
             projectcss.plasmic_mixins,
-            projectcss.plasmic_tokens,
+            styleTokensClassNames,
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -190,7 +193,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -10,6 +10,15 @@ export type ScreenValue = "desktopOnly";
 export const ScreenContext = React.createContext<ScreenValue[] | undefined>(
   "PLEASE_RENDER_INSIDE_PROVIDER" as any
 );
+export function ScreenContextProvider(
+  props: React.PropsWithChildren<{ value: ScreenValue[] | undefined }>
+) {
+  return (
+    <ScreenContext.Provider value={props.value}>
+      {props.children}
+    </ScreenContext.Provider>
+  );
+}
 
 export const useScreenVariants = createUseScreenVariants(true, {
   desktopOnly: "(min-width:768px)",

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

@@ -61,8 +61,8 @@ 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";
 
@@ -124,13 +124,14 @@ function PlasmicHomepage__RenderFunc(props: {
   };
 
   const __nextRouter = useNextRouter();
+
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
-  const globalVariants = ensureGlobalVariants({
-    screen: useScreenVariantsscBjPxgdxdzbv()
-  });
+  const globalVariants = _useGlobalVariants();
+
+  const styleTokensClassNames = _useStyleTokens();
 
   return (
     <React.Fragment>
@@ -153,15 +154,13 @@ function PlasmicHomepage__RenderFunc(props: {
             projectcss.root_reset,
             projectcss.plasmic_default_styles,
             projectcss.plasmic_mixins,
-            projectcss.plasmic_tokens,
+            styleTokensClassNames,
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -228,7 +227,7 @@ function PlasmicHomepage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -60,6 +60,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";
 
@@ -124,10 +126,13 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props: {
   };
 
   const __nextRouter = useNextRouter();
+
   const $ctx = useDataEnv?.() || {};
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
     <Button
       data-plasmic-name={"root"}

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

@@ -0,0 +1,27 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import {
+  createStyleTokensProvider,
+  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,
+  varianted: []
+};
+
+export const _useStyleTokens = createUseStyleTokens(data, _useGlobalVariants);
+
+export const StyleTokensProvider = createStyleTokensProvider(
+  data,
+  _useGlobalVariants
+);

package/cpa-out/nextjs-pages-codegen-ts/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/nextjs-pages-codegen-ts/package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.337",
-    "@plasmicapp/react-web": "^0.2.381",
-    "next": "14.2.20",
+    "@plasmicapp/cli": "^0.1.343",
+    "@plasmicapp/react-web": "^0.2.401",
+    "next": "14.2.32",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -20,7 +20,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.20",
+    "eslint-config-next": "14.2.32",
     "typescript": "^5"
   }
 }

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

@@ -100,6 +100,8 @@
       "indirect": false,
       "globalContextsFilePath": "",
       "splitsProviderFilePath": "",
+      "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx",
+      "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.tsx",
       "codeComponents": [
         {
           "id": "P6aGdYWZ2R",
@@ -131,6 +133,6 @@
   "nextjsConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.337",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.337/dist/plasmic.schema.json"
+  "cliVersion": "0.1.343",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.343/dist/plasmic.schema.json"
 }

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

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

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

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

package/cpa-out/react-codegen-js/package.json

@@ -10,20 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.338",
-    "@plasmicapp/react-web": "^0.2.393",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "@plasmicapp/cli": "^0.1.341",
+    "@plasmicapp/react-web": "^0.2.397",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.29.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.2",
-    "eslint": "^9.29.0",
+    "@eslint/js": "^9.32.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.2.0",
-    "vite": "^7.0.0"
+    "globals": "^16.3.0",
+    "vite": "^7.1.0"
   }
 }

package/cpa-out/react-codegen-js/plasmic.json

@@ -128,6 +128,6 @@
     ]
   },
   "wrapPagesWithGlobalContexts": true,
-  "cliVersion": "0.1.338",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.338/dist/plasmic.schema.json"
+  "cliVersion": "0.1.341",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.341/dist/plasmic.schema.json"
 }

package/cpa-out/react-codegen-js/src/App.jsx

@@ -7,3 +7,4 @@ function App() {
 }
 
 export default App;
+  

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -10,7 +10,6 @@
 // Component: TQcvW_pSKi3
 import * as React from "react";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts,
@@ -124,13 +123,11 @@ function PlasmicButton__RenderFunc(props) {
     focusVisibleWithin_root: isRootFocusVisibleWithin
   };
   return (
-    <Stack__
-      as={"button"}
+    <button
       data-plasmic-name={"root"}
       data-plasmic-override={overrides.root}
       data-plasmic-root={true}
       data-plasmic-for-node={forNode}
-      hasGap={true}
       className={classNames(
         projectcss.all,
         projectcss.button,
@@ -499,7 +496,7 @@ function PlasmicButton__RenderFunc(props) {
           })}
         </div>
       ) : null}
-    </Stack__>
+    </button>
   );
 }
 

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -10,7 +10,6 @@
 // Component: AO44A-w7hh
 import * as React from "react";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts
@@ -65,11 +64,9 @@ function PlasmicDynamicPage__RenderFunc(props) {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -106,7 +103,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

package/cpa-out/react-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -10,7 +10,6 @@
 // Component: 6uuAAE1jiCew
 import * as React from "react";
 import {
-  Stack as Stack__,
   classNames,
   createPlasmicElementProxy,
   deriveRenderOpts,
@@ -71,11 +70,9 @@ function PlasmicHomepage__RenderFunc(props) {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -142,7 +139,7 @@ function PlasmicHomepage__RenderFunc(props) {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

package/cpa-out/react-codegen-ts/package.json

@@ -10,22 +10,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.338",
-    "@plasmicapp/react-web": "^0.2.393",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "@plasmicapp/cli": "^0.1.341",
+    "@plasmicapp/react-web": "^0.2.397",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.29.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.2",
-    "eslint": "^9.29.0",
+    "@eslint/js": "^9.32.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.2.0",
+    "globals": "^16.3.0",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.34.1",
-    "vite": "^7.0.0"
+    "typescript-eslint": "^8.39.0",
+    "vite": "^7.1.0"
   }
 }

package/cpa-out/react-codegen-ts/plasmic.json

@@ -128,6 +128,6 @@
     ]
   },
   "wrapPagesWithGlobalContexts": true,
-  "cliVersion": "0.1.338",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.338/dist/plasmic.schema.json"
+  "cliVersion": "0.1.341",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.341/dist/plasmic.schema.json"
 }

package/cpa-out/react-codegen-ts/src/App.tsx

@@ -7,3 +7,4 @@ function App() {
 }
 
 export default App;
+  

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

@@ -254,13 +254,11 @@ function PlasmicButton__RenderFunc(props: {
   };
 
   return (
-    <Stack__
-      as={"button"}
+    <button
       data-plasmic-name={"root"}
       data-plasmic-override={overrides.root}
       data-plasmic-root={true}
       data-plasmic-for-node={forNode}
-      hasGap={true}
       className={classNames(
         projectcss.all,
         projectcss.button,
@@ -629,7 +627,7 @@ function PlasmicButton__RenderFunc(props: {
           })}
         </div>
       ) : null}
-    </Stack__>
+    </button>
   ) as React.ReactElement | null;
 }
 

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

@@ -131,11 +131,9 @@ function PlasmicDynamicPage__RenderFunc(props: {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -172,7 +170,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

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

@@ -139,11 +139,9 @@ function PlasmicHomepage__RenderFunc(props: {
             sty.root
           )}
         >
-          <Stack__
-            as={"section"}
+          <section
             data-plasmic-name={"section"}
             data-plasmic-override={overrides.section}
-            hasGap={true}
             className={classNames(projectcss.all, sty.section)}
           >
             <h1
@@ -210,7 +208,7 @@ function PlasmicHomepage__RenderFunc(props: {
                 sty.randomDynamicPageButton
               )}
             />
-          </Stack__>
+          </section>
         </div>
       </div>
     </React.Fragment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.111",
+  "version": "0.0.113",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -46,5 +46,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "cbcd0a1252a203464a0748ec682050dfb5eae769"
+  "gitHead": "d84b583160c35beda2c17b6fbc2c7231916d18fd"
 }