@batijs/cli 0.0.306 → 0.0.308

package/dist/boilerplates/@batijs/vue/files/$README.md.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 import {
-  gGs
-} from "../../../../chunk-R2K4MHLU.js";
+  NXs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue/dist/files/$README.md.js
 async function getReadme(props) {
-  const content = await gGs(props);
+  const content = await NXs(props);
   const about = `
 
 This app is ready to start. It's powered by [Vike](https://vike.dev) and [Vue](https://vuejs.org/guide/quick-start.html).

package/dist/boilerplates/@batijs/vue/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
-  bGs
-} from "../../../../chunk-R2K4MHLU.js";
+  OXs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue/dist/files/$package.json.js
@@ -39,6 +39,7 @@ var require_package = __commonJS({
       description: "",
       type: "module",
       scripts: {
+        prepare: "panda codegen --silent",
         "check-types": "tsc --noEmit",
         build: "bati-compile-boilerplate"
       },
@@ -47,17 +48,18 @@ var require_package = __commonJS({
       license: "MIT",
       devDependencies: {
         "@batijs/compile": "workspace:*",
+        "@pandacss/dev": "^0.47.1",
         "@types/node": "^18.19.64",
-        "@vitejs/plugin-vue": "^5.1.5",
-        "@vue/compiler-sfc": "^3.5.12",
-        "@vue/server-renderer": "^3.5.12",
-        tailwindcss: "^3.4.14",
+        "@vitejs/plugin-vue": "^5.2.0",
+        "@vue/compiler-sfc": "^3.5.13",
+        "@vue/server-renderer": "^3.5.13",
+        tailwindcss: "^3.4.15",
         typescript: "^5.6.3",
         "unplugin-vue-markdown": "^0.26.2",
-        vike: "^0.4.201",
+        vike: "^0.4.203",
         "vike-vue": "^0.8.5",
-        vite: "^5.4.10",
-        vue: "^3.5.12",
+        vite: "^5.4.11",
+        vue: "^3.5.13",
         "vue-gtag": "^2.0.1"
       },
       dependencies: {
@@ -123,7 +125,7 @@ var require_package = __commonJS({
   }
 });
 async function getPackageJson(props) {
-  const packageJson = await bGs(props, await Promise.resolve().then(() => __toESM(require_package(), 1)).then((x) => x.default));
+  const packageJson = await OXs(props, await Promise.resolve().then(() => __toESM(require_package(), 1)).then((x) => x.default));
   return packageJson.addDevDependencies(["vite"]).addDependencies([
     "@vitejs/plugin-vue",
     "@vue/compiler-sfc",

package/dist/boilerplates/@batijs/vue/files/$tsconfig.json.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 import {
-  yGs
-} from "../../../../chunk-R2K4MHLU.js";
+  IXs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue/dist/files/$tsconfig.json.js
 async function getTsConfig(props) {
-  const tsConfig = await yGs(props);
+  const tsConfig = await IXs(props);
   tsConfig.compilerOptions.jsx = "preserve";
   tsConfig.compilerOptions.jsxImportSource = "vue";
   return tsConfig;

package/dist/boilerplates/@batijs/vue/files/$vite.config.ts.js

@@ -1,21 +1,21 @@
 #!/usr/bin/env node
 import {
-  g0s,
-  vGs
-} from "../../../../chunk-R2K4MHLU.js";
+  LXs,
+  vTs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue/dist/files/$vite.config.ts.js
 async function getViteConfig(props) {
-  const mod = await vGs(props);
-  g0s(mod, {
+  const mod = await LXs(props);
+  vTs(mod, {
     from: "@vitejs/plugin-vue",
     constructor: "vue",
     options: {
       include: [/\.vue$/, /\.md$/]
     }
   });
-  g0s(mod, {
+  vTs(mod, {
     from: "unplugin-vue-markdown/vite",
     constructor: "md",
     options: {}

package/dist/boilerplates/@batijs/vue/files/components/Content.vue

@@ -4,14 +4,20 @@
     <div id="page-content" class="p-5 pb-12 min-h-screen">
       <slot />
     </div>
-    <!-- !BATI.has("tailwindcss") -->
+    <!-- BATI.has("panda-css") -->
+    <div id="page-content" :class="css({ p: '20px', pb: '50px', minH: '100vh' })">
+      <slot />
+    </div>
+    <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
     <div id="page-content" style="padding: 20px; padding-bottom: 50px; min-height: 100vh">
       <slot />
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>
 
 <style>
 /* Page Transition Animation */

package/dist/boilerplates/@batijs/vue/files/components/Counter.vue

@@ -7,19 +7,33 @@
   >
     Counter {{ state.count }}
   </button>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <button
+    type="button"
+    :class="
+      css({
+        display: 'inline-block',
+        border: '1px solid black',
+        rounded: 'sm',
+        bg: 'gray.200',
+        px: 1,
+        py: 0.5,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: '16px',
+      })
+    "
+    @click="state.count++"
+  >
+    Counter {{ state.count }}
+  </button>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <button type="button" @click="state.count++">Counter {{ state.count }}</button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from "vue";
+import { css } from "../styled-system/css";
 
-export default {
-  setup() {
-    const state = reactive({ count: 0 });
-    return {
-      state,
-    };
-  },
-};
+const state = reactive({ count: 0 });
 </script>

package/dist/boilerplates/@batijs/vue/files/components/Logo.vue

@@ -5,11 +5,19 @@
       <img src="../assets/logo.svg" height="64" width="64" />
     </a>
   </div>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <div :class="css({ p: '20px', mb: '10px' })">
+    <a href="/">
+      <img src="../assets/logo.svg" height="64" width="64" />
+    </a>
+  </div>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <div style="margin-top: 20px; margin-bottom: 10px">
     <a href="/">
       <img src="../assets/logo.svg" height="64" width="64" />
     </a>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>

package/dist/boilerplates/@batijs/vue/files/components/Sidebar.vue

@@ -3,7 +3,23 @@
   <div id="sidebar" class="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200">
     <slot />
   </div>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <div
+    id="sidebar"
+    :class="
+      css({
+        p: '20px',
+        display: 'flex',
+        flexShrink: 0,
+        flexDir: 'column',
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee',
+      })
+    "
+  >
+    <slot />
+  </div>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <div
     id="sidebar"
     style="
@@ -18,4 +34,6 @@
     <slot />
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { css } from "../styled-system/css";
+</script>

package/dist/boilerplates/@batijs/vue/files/layouts/LayoutDefault.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script lang="ts" setup>
+//# BATI.has("panda-css")
+import "./panda.css";
 import Content from "../components/Content.vue";
 import Link from "../components/Link.vue";
 import Logo from "../components/Logo.vue";

package/dist/boilerplates/@batijs/vue/files/pages/index/+Page.vue

@@ -1,7 +1,9 @@
 <template>
   <!-- BATI.has("tailwindcss") -->
   <h1 class="font-bold text-3xl pb-4">My Vike app</h1>
-  <!-- !BATI.has("tailwindcss") -->
+  <!-- BATI.has("panda-css") -->
+  <h1 :class="css({ font: 'bold 2em sans-serif', marginBlock: '0.67em' })">My Vike app</h1>
+  <!-- !BATI.has("tailwindcss") && !BATI.has("panda-css") -->
   <h1>My Vike app</h1>
   This page is:
   <ul>
@@ -10,9 +12,7 @@
   </ul>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Counter from "../../components/Counter.vue";
-
-const components = { Counter };
-export default { components };
+import { css } from "../../styled-system/css";
 </script>

package/dist/boilerplates/@batijs/vue/files/pages/todo/TodoList.vue

@@ -5,8 +5,8 @@
     </li>
     <li>
       <form @submit.prevent="submitNewTodo()">
-        <input v-model="newTodo" type="text" />{{ " " }}
-        <button type="submit">Add to-do</button>
+        <input v-model="newTodo" type="text" :class="[inputClass]" />
+        <button type="submit" :class="[buttonClass]">Add to-do</button>
       </form>
     </li>
   </ul>
@@ -17,6 +17,49 @@ import { onNewTodo } from "@batijs/telefunc/pages/todo/TodoList.telefunc";
 import { trpc } from "@batijs/trpc/trpc/client";
 import { client } from "@batijs/ts-rest/ts-rest/client";
 import { ref } from "vue";
+import { css } from "../../styled-system/css";
+
+const inputClass = ref(
+  BATI.has("tailwindcss")
+    ? "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto p-2 mr-1 mb-1"
+    : BATI.has("panda-css")
+      ? css({
+          p: 2,
+          bg: "gray.50",
+          borderWidth: 1,
+          borderColor: "gray.300",
+          color: "gray.900",
+          fontSize: "sm",
+          rounded: "md",
+          width: { base: "full", sm: "auto" },
+          _focus: { ringColor: "teal.500", borderColor: "teal.500" },
+          mr: 1,
+          mb: 1,
+        })
+      : "",
+);
+const buttonClass = ref(
+  BATI.has("tailwindcss")
+    ? "text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2"
+    : BATI.has("panda-css")
+      ? css({
+          color: "white",
+          bg: { base: "teal.700", _hover: "teal.800" },
+          _focus: {
+            ringWidth: 2,
+            ringColor: "teal.300",
+            outline: "1px solid transparent",
+            outlineOffset: "1px",
+          },
+          cursor: "pointer",
+          fontSize: "sm",
+          fontWeight: 500,
+          rounded: "md",
+          width: { base: "full", sm: "auto" },
+          p: 2,
+        })
+      : "",
+);
 
 const props = defineProps<{ initialTodoItems: { text: string }[] }>();
 const todoItems = ref(props.initialTodoItems);

package/dist/boilerplates/@batijs/vue-sentry/files/$package.json.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
-  bGs
-} from "../../../../chunk-R2K4MHLU.js";
+  OXs
+} from "../../../../chunk-O2DQVJZQ.js";
 import "../../../../chunk-LU7IBQI7.js";
 
 // ../../boilerplates/vue-sentry/dist/files/$package.json.js
@@ -47,11 +47,11 @@ var require_package = __commonJS({
       license: "MIT",
       devDependencies: {
         "@batijs/compile": "workspace:*",
-        "@sentry/vue": "^8.37.1",
+        "@sentry/vue": "^8.38.0",
         "@types/node": "^18.19.64",
         "vike-vue": "^0.8.5",
-        vite: "^5.4.10",
-        vue: "^3.5.12"
+        vite: "^5.4.11",
+        vue: "^3.5.13"
       },
       dependencies: {
         "@batijs/core": "workspace:*"
@@ -85,7 +85,7 @@ var require_package = __commonJS({
   }
 });
 async function getPackageJson(props) {
-  const packageJson = await bGs(props, await Promise.resolve().then(() => __toESM(require_package(), 1)).then((x) => x.default));
+  const packageJson = await OXs(props, await Promise.resolve().then(() => __toESM(require_package(), 1)).then((x) => x.default));
   return packageJson.addDependencies(["@sentry/vue"]);
 }
 export {

package/dist/boilerplates/boilerplates.json

@@ -245,6 +245,17 @@
       "files"
     ]
   },
+  {
+    "config": {
+      "if": {
+        "flag": "panda-css"
+      }
+    },
+    "folder": "@batijs/panda-css",
+    "subfolders": [
+      "files"
+    ]
+  },
   {
     "config": {
       "if": {