juo 0.3.0-alpha.0 → 0.3.0-alpha.1

package/README.md

@@ -20,7 +20,7 @@ $ npm install -g juo
 $ juo COMMAND
 running command...
 $ juo (--version)
-juo/0.3.0-alpha.0 linux-x64 node-v22.21.0
+juo/0.3.0-alpha.1 linux-x64 node-v22.21.0
 $ juo --help [COMMAND]
 USAGE
   $ juo COMMAND

package/bin/dev.js

@@ -4,9 +4,19 @@ import {execute} from '@oclif/core'
 import {readFileSync} from 'node:fs'
 import {fileURLToPath} from 'node:url'
 
-const editorPkg = JSON.parse(
-  readFileSync(fileURLToPath(new URL('../../editor/package.json', import.meta.url)), 'utf8'),
-)
-process.env.BLOCKS_EDITOR_VERSION = editorPkg.version
+// Dev mode runs the TypeScript source through tsx, so tsdown's build-time
+// `define` substitutions (see tsdown.config.ts) never happen. Reproduce them
+// here from the workspace package.json files so `juo create` behaves like the
+// built CLI.
+const readVersion = (relPath) =>
+  JSON.parse(readFileSync(fileURLToPath(new URL(relPath, import.meta.url)), 'utf8')).version
+
+process.env.BLOCKS_EDITOR_VERSION = readVersion('../../editor/package.json')
+process.env.BLOCKS_EXTENSIONS_VERSION = readVersion('../../extensions/package.json')
+// `__CUSTOMER_UI_VERSION__` / `__BLOCKS_VERSION__` are bare globals in
+// packageGenerator.ts (tsdown defines in prod); set them on globalThis so the
+// free identifiers resolve in dev.
+globalThis.__CUSTOMER_UI_VERSION__ = `^${readVersion('../../../components/customer-ui/package.json')}`
+globalThis.__BLOCKS_VERSION__ = `^${readVersion('../../core/package.json')}`
 
 await execute({development: true, dir: import.meta.url})

package/dist/commands/blocks/dev.d.ts

@@ -1,12 +1,12 @@
 import { t as BaseCommand } from "../../base-command-BQVnm_gK.js";
-import * as _oclif_core_interfaces5 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";
 
 //#region src/commands/blocks/dev.d.ts
 declare class Dev extends BaseCommand<typeof Dev> {
   static description: string;
   static examples: string[];
   static flags: {
-    port: _oclif_core_interfaces5.OptionFlag<number, _oclif_core_interfaces5.CustomOptions>;
+    port: _oclif_core_interfaces0.OptionFlag<number, _oclif_core_interfaces0.CustomOptions>;
   };
   run(): Promise<void>;
   private resolvePackageJsonPath;

package/dist/commands/create.d.ts

@@ -1,13 +1,13 @@
 import { Command } from "@oclif/core";
-import * as _oclif_core_interfaces9 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces1 from "@oclif/core/interfaces";
 
 //#region src/commands/create.d.ts
 declare class Create extends Command {
   static description: string;
   static flags: {
-    quickstart: _oclif_core_interfaces9.BooleanFlag<boolean>;
-    storybook: _oclif_core_interfaces9.BooleanFlag<boolean>;
-    verbose: _oclif_core_interfaces9.BooleanFlag<boolean>;
+    quickstart: _oclif_core_interfaces1.BooleanFlag<boolean>;
+    storybook: _oclif_core_interfaces1.BooleanFlag<boolean>;
+    verbose: _oclif_core_interfaces1.BooleanFlag<boolean>;
   };
   run(): Promise<void>;
   private getProjectConfig;

package/dist/commands/create.js

@@ -1,5 +1,5 @@
 import { r as BaseTemplateGenerator } from "../juoTemplateGenerator-RkinYN2l.js";
-import { t as PackageGenerator } from "../packageGenerator-Bx2FAq2Y.js";
+import { t as PackageGenerator } from "../packageGenerator-D81lWXTA.js";
 import { t as Generate } from "../generate-BiHo2p9_.js";
 import { Command, Flags } from "@oclif/core";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
@@ -21,7 +21,8 @@ var ConfigFilesGenerator = class extends BaseTemplateGenerator {
 var DevHarnessGenerator = class extends BaseTemplateGenerator {
 	generate(destDir, options) {
 		this.renderTemplate("dev", destDir, {
-			editorVersion: "0.25.0-alpha.1",
+			editorVersion: "0.25.0-alpha.2",
+			extensionsVersion: "1.12.0-alpha.1",
 			tailwind: options.tailwind
 		});
 	}

package/dist/commands/generate.d.ts

@@ -1,15 +1,15 @@
 import { Command } from "@oclif/core";
-import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces6 from "@oclif/core/interfaces";
 
 //#region src/commands/generate.d.ts
 declare class Generate extends Command {
   static description: string;
   static examples: string[];
   static flags: {
-    name: _oclif_core_interfaces0.OptionFlag<string | undefined, _oclif_core_interfaces0.CustomOptions>;
-    tailwind: _oclif_core_interfaces0.BooleanFlag<boolean>;
-    type: _oclif_core_interfaces0.OptionFlag<string, _oclif_core_interfaces0.CustomOptions>;
-    verbose: _oclif_core_interfaces0.BooleanFlag<boolean>;
+    name: _oclif_core_interfaces6.OptionFlag<string | undefined, _oclif_core_interfaces6.CustomOptions>;
+    tailwind: _oclif_core_interfaces6.BooleanFlag<boolean>;
+    type: _oclif_core_interfaces6.OptionFlag<string, _oclif_core_interfaces6.CustomOptions>;
+    verbose: _oclif_core_interfaces6.BooleanFlag<boolean>;
   };
   static id: string;
   run(): Promise<void>;

package/dist/commands/publish/index.d.ts

@@ -1,5 +1,5 @@
 import { t as BaseCommand } from "../../base-command-BQVnm_gK.js";
-import * as _oclif_core_interfaces7 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces4 from "@oclif/core/interfaces";
 
 //#region src/commands/publish/index.d.ts
 declare class Publish extends BaseCommand<typeof Publish> {
@@ -7,7 +7,7 @@ declare class Publish extends BaseCommand<typeof Publish> {
   static description: string;
   static examples: string[];
   static flags: {
-    theme: _oclif_core_interfaces7.OptionFlag<string, _oclif_core_interfaces7.CustomOptions>;
+    theme: _oclif_core_interfaces4.OptionFlag<string, _oclif_core_interfaces4.CustomOptions>;
   };
   getAllFiles(dirPath: string, basePath: string): string[];
   run(): Promise<void>;

package/dist/lib/index.d.ts

@@ -8,6 +8,7 @@ interface TemplateScope {
     tailwind?: boolean;
   };
   editorVersion?: string;
+  extensionsVersion?: string;
   tailwind?: boolean;
 }
 declare abstract class BaseTemplateGenerator {

package/dist/lib/index.js

@@ -1,4 +1,4 @@
 import { n as StoryGenerator, r as BaseTemplateGenerator, t as JuoTemplateGenerator } from "../juoTemplateGenerator-RkinYN2l.js";
-import { t as PackageGenerator } from "../packageGenerator-Bx2FAq2Y.js";
+import { t as PackageGenerator } from "../packageGenerator-D81lWXTA.js";
 
 export { BaseTemplateGenerator, JuoTemplateGenerator, PackageGenerator, StoryGenerator };

package/dist/{packageGenerator-Bx2FAq2Y.js → packageGenerator-D81lWXTA.js}

@@ -16,9 +16,6 @@ const FRAMEWORK_CONFIGS = {
 	},
 	react: {
 		dependencies: {
-			"@juo/blocks": "^1.0.0",
-			"@mantine/core": "7.5.3",
-			"@mantine/hooks": "7.5.3",
 			react: "^18.2.0",
 			"react-dom": "^18.2.0"
 		},
@@ -53,8 +50,8 @@ var PackageGenerator = class {
 				"postcss-prefix-selector": "^2.1.1",
 				prettier: "^3.5.3",
 				...options.tailwind ? {
-					"@tailwindcss/vite": "^4.1.17",
-					tailwindcss: "^4.1.17"
+					autoprefixer: "^10.4.19",
+					tailwindcss: "^3.3.5"
 				} : {},
 				...options.storybook ? { storybook: "^10.0.7" } : {},
 				typebox: "^1.0.51",
@@ -83,6 +80,7 @@ var PackageGenerator = class {
 		});
 		const frameworkConfig = FRAMEWORK_CONFIGS[options.framework];
 		baseConfig.dependencies = {
+			"@juo/blocks": "^1.12.0-alpha.2",
 			"@juo/customer-ui": "^0.5.0-alpha.4",
 			...baseConfig.dependencies,
 			...frameworkConfig.dependencies

package/oclif.manifest.json

@@ -179,5 +179,5 @@
       ]
     }
   },
-  "version": "0.3.0-alpha.0"
+  "version": "0.3.0-alpha.1"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "juo",
   "description": "A CLI tool for the Juo platform",
-  "version": "0.3.0-alpha.0",
+  "version": "0.3.0-alpha.1",
   "author": "Juo (https://juo.io)",
   "bin": {
     "juo": "./bin/run.js"

package/templates/block/react/{{block.clsName}}.tsx.liquid

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { MantineProvider } from "@mantine/core";
 import type { Props } from ".";
 
 const FrameworkIcon = ({ className }: { className: string }) => {
@@ -54,24 +53,22 @@ export function {{ block.clsName }}(props: Props) {
   const [count, setCount] = useState(props.initialCount ?? 0);
 
   return (
-    <MantineProvider>
-      <juo-card>
-        <div className="font-[540] flex gap-8 justify-between items-center py-10 px-10">
-          <div className="flex items-center gap-[14px]">
-            <div className="flex items-center gap-2">
-              <FrameworkIcon className="w-9 h-9 fill-current text-black" />
-              <TypeScriptIcon className="w-10 h-10 fill-current text-black" />
-            </div>
-            <div className="flex flex-col self-center">
-              <p className="text-[12px] leading-4 text-[#696969]">
-                {props.subtitle}
-              </p>
-              <p className="text-[15px] leading-none text-[#111]">{props.title}</p>
-            </div>
+    <juo-card>
+      <div className="font-[540] flex gap-8 justify-between items-center py-10 px-10">
+        <div className="flex items-center gap-[14px]">
+          <div className="flex items-center gap-2">
+            <FrameworkIcon className="w-9 h-9 fill-current text-black" />
+            <TypeScriptIcon className="w-10 h-10 fill-current text-black" />
+          </div>
+          <div className="flex flex-col self-center">
+            <p className="text-[12px] leading-4 text-[#696969]">
+              {props.subtitle}
+            </p>
+            <p className="text-[15px] leading-none text-[#111]">{props.title}</p>
           </div>
-          <juo-button onClick={() => setCount(count + 1)}>count: is {count}</juo-button>
         </div>
-      </juo-card>
-    </MantineProvider>
+        <juo-button onClick={() => setCount(count + 1)}>count: is {count}</juo-button>
+      </div>
+    </juo-card>
   );
 }

package/templates/configFiles/src/main.ts.liquid

@@ -0,0 +1,5 @@
+// Your blocks theme entry. `vite build` bundles this file in library mode into
+// the artifact the Juo runtime loads in production, so it must export
+// `registerBlocks`. Only your project's blocks belong here — the dev preview
+// (theme shell + native blocks) lives in `vite/` and never ships in this bundle.
+export * from "./blocks/register";

package/templates/configFiles/vite.config.ts.liquid

@@ -23,7 +23,7 @@ export default defineConfig({
   },
   build: {
     lib: {
-      entry: "src/blocks/register.ts",
+      entry: "src/main.ts",
       formats: ["es"],
       fileName: "index",
     },

package/templates/dev/index.html.liquid

@@ -4,11 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Juo Blocks Dev</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "@juo/blocks": "/vite/blocks-shim.ts"
+        }
+      }
+    </script>
   </head>
   <body>
     <juo-context-root>
       <div id="app"></div>
     </juo-context-root>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/vite/theme-shell.ts"></script>
   </body>
 </html>

package/templates/dev/vite/blocks-shim.ts.liquid

@@ -0,0 +1,6 @@
+// Re-exports the locally installed @juo/blocks. The CDN-hosted
+// @juo/blocks-extensions bundle externalizes "@juo/blocks", so the index.html
+// import map points that bare specifier at this shim — ensuring the native
+// blocks register into the SAME @juo/blocks instance the theme shell uses
+// (Vite dedupes both to one pre-bundled module). Dev-harness only.
+export * from "@juo/blocks";

package/templates/dev/vite/juo-editor-plugin.ts.liquid

@@ -35,7 +35,7 @@ export default function juo(): Plugin {
         server.config.logger.info(
           `\n  juo editor        ${base}/editor` +
             `\n  editor view mode  ${base}/` +
-            `\n  blocks bundle     ${base}/src/blocks/register.ts\n`,
+            `\n  blocks bundle     ${base}/src/main.ts\n`,
         );
       });
     },

package/templates/dev/{src/main.ts.liquid → vite/theme-shell.ts.liquid}

@@ -1,6 +1,10 @@
+// Dev-only theme shell. Lives outside the project's `src/` so the author's
+// source tree contains only their blocks. Vite serves this file directly (see
+// the <script> + import map injected in index.html); it never enters the built
+// blocks bundle (whose entry is `src/blocks/register.ts`).
 import "@juo/blocks/web-components/editor";
-{% if tailwind %}import "./tailwind.css";
-{% else %}import "./styles.css";
+{% if tailwind %}import "../src/tailwind.css";
+{% else %}import "../src/styles.css";
 {% endif %}
 import {
   createBlockInstance,
@@ -17,7 +21,12 @@ import {
   createTranslationService,
   untracked,
 } from "@juo/blocks";
-import { registerBlocks as registerProjectBlocks } from "./blocks/register";
+import { registerBlocks as registerProjectBlocks } from "../src/main";
+// Native blocks shipped by @juo/blocks-extensions, loaded from CDN. Its bare
+// "@juo/blocks" import is bridged to the local instance via the index.html
+// import map (see vite/blocks-shim.ts).
+// @ts-expect-error Remote, untyped module
+import { blocks as nativeBlocks } from "https://cdn.juo.io/web/blocks/juo/{{ extensionsVersion }}/extensions.js";
 
 const homePageBlock = defineBlock("HomePage", {
   displayName: "Home page",
@@ -56,6 +65,7 @@ const homePageBlock = defineBlock("HomePage", {
 });
 
 function registerBlocks() {
+  Object.values(nativeBlocks).forEach((block) => registerBlock(block));
   registerProjectBlocks();
   registerBlock(homePageBlock);
 }

package/templates/tailwind/postcss.config.js.liquid

@@ -0,0 +1,6 @@
+import autoprefixer from "autoprefixer";
+import tailwindcss from "tailwindcss";
+
+export default {
+  plugins: [tailwindcss(), autoprefixer()],
+};

package/templates/tailwind/src/tailwind.css.liquid

@@ -1,4 +1,6 @@
-@import "tailwindcss";
 @import "@juo/customer-ui/design-tokens.css";
 @import "@juo/customer-ui/theme-modes.css";
-@import "@juo/customer-ui/tailwind-v4.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/tailwind/tailwind.config.cjs.liquid

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [{ theme: { extend: require("@juo/customer-ui/tailwind-v3").theme } }],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "var(--primary)",
+        muted: "var(--muted)",
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/tailwind/vite.config.ts.liquid

@@ -1,35 +0,0 @@
-import { defineConfig } from "vite";
-import tailwindcss from "@tailwindcss/vite";
-import svgr from "vite-plugin-svgr";
-import juo from "./vite/juo-editor-plugin";
-{% if framework == "react" %}
-import react from "@vitejs/plugin-react";
-{% elsif framework == "preact" %}
-import preact from "@preact/preset-vite";
-{% endif %}
-
-export default defineConfig({
-  define: {
-    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
-  },
-  plugins: [tailwindcss(), juo(){% if framework == "react" %}, react(){% endif %}{% if framework == "preact" %}, preact(){% endif %},
-    svgr({
-      svgrOptions: {
-        icon: true,
-      },
-    }),
-  ],
-  preview: {
-    cors: true,
-  },
-  build: {
-    lib: {
-      entry: "src/blocks/register.ts",
-      formats: ["es"],
-      fileName: "index",
-    },
-    rollupOptions: {
-      external: [/^@juo\/blocks/],
-    },
-  },
-});