juo 0.2.1 → 0.3.0-alpha.0

package/README.md

@@ -20,7 +20,7 @@ $ npm install -g juo
 $ juo COMMAND
 running command...
 $ juo (--version)
-juo/0.2.1 linux-x64 node-v22.21.0
+juo/0.3.0-alpha.0 linux-x64 node-v22.21.0
 $ juo --help [COMMAND]
 USAGE
   $ juo COMMAND
@@ -39,24 +39,24 @@ USAGE
 
 ## `juo blocks dev`
 
-Start local block dev server for use with the Juo editor
+Start local block dev server with embedded editor
 
 ```
 USAGE
   $ juo blocks dev [--reconfigure] [-p <value>]
 
 FLAGS
-  -p, --port=<value>  [default: 5174] Port for the local block dev server
+  -p, --port=<value>  [default: 5174] Port for the local dev server
 
 GLOBAL FLAGS
   --reconfigure  Reconfigure settings
 
 DESCRIPTION
-  Start local block dev server for use with the Juo editor
+  Start local block dev server with embedded editor
 
 EXAMPLES
   $ juo blocks dev
-  Start dev server on default port (5174).
+  Start dev server on default port (5174). Opens editor at http://localhost:5174/editor.
 
   $ juo blocks dev --port 3000
   Start dev server on port 3000.

package/bin/dev.js

@@ -1,5 +1,12 @@
 #!/usr/bin/env -S npx tsx
 
 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
 
 await execute({development: true, dir: import.meta.url})

package/dist/{analytics-BMClHCkY.js → analytics-CuhiZN94.js}

@@ -1,11 +1,11 @@
 import debug from "debug";
 
 //#region src/utils/config.ts
-const MIXPANEL_TOKEN = "919dd811a5e2137983cc8fc304b8584b";
-const MIXPANEL_API_URL = "https://api-eu.mixpanel.com";
-const CUSTOMERIO_BETA_FORM_URL = "https://track-cio.juo.io/api/v1/forms/3c02106b-9746-4ebe-a116-553e47494eb4/submit";
-const CUSTOMERIO_SITE_ID = "60da89062ce61084fc27";
-const CUSTOMERIO_API_KEY = "1d54688e66cddda9ea72";
+const MIXPANEL_TOKEN = "";
+const MIXPANEL_API_URL = "https://api.mixpanel.com";
+const CUSTOMERIO_BETA_FORM_URL = "";
+const CUSTOMERIO_SITE_ID = "";
+const CUSTOMERIO_API_KEY = "";
 
 //#endregion
 //#region src/utils/analytics.ts

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

@@ -1,16 +1,16 @@
 import { t as BaseCommand } from "../../base-command-BQVnm_gK.js";
-import * as _oclif_core_interfaces10 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces5 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_interfaces10.OptionFlag<number, _oclif_core_interfaces10.CustomOptions>;
+    port: _oclif_core_interfaces5.OptionFlag<number, _oclif_core_interfaces5.CustomOptions>;
   };
   run(): Promise<void>;
   private resolvePackageJsonPath;
-  private waitForFile;
+  private tryLoadTenantId;
 }
 //#endregion
 export { Dev as default };

package/dist/commands/blocks/dev.js

@@ -6,45 +6,29 @@ import { spawn } from "node:child_process";
 
 //#region src/commands/blocks/dev.ts
 var Dev = class Dev extends BaseCommand {
-	static description = "Start local block dev server for use with the Juo editor";
+	static description = "Start local block dev server with embedded editor";
 	static examples = [`<%= config.bin %> <%= command.id %>
-Start dev server on default port (5174).
+Start dev server on default port (5174). Opens editor at http://localhost:5174/editor.
 `, `<%= config.bin %> <%= command.id %> --port 3000
 Start dev server on port 3000.
 `];
 	static flags = { port: Flags.integer({
 		char: "p",
 		default: 5174,
-		description: "Port for the local block dev server"
+		description: "Port for the local dev server"
 	}) };
 	async run() {
 		const { flags } = await this.parse(Dev);
 		const { port } = flags;
 		const rootDir = this.resolvePackageJsonPath();
-		const tenantId = await this.ensureTenantId();
-		const devBlocksUrl = `http://localhost:${port}/index.js`;
-		const editorUrl = `https://admin.juo.io/store/${encodeURIComponent(tenantId)}/editor?dev-blocks-url=${encodeURIComponent(devBlocksUrl)}`;
-		this.log(`\nStarting Juo Blocks dev server...`);
-		this.log(`\n  Open the editor to preview your blocks:`);
-		this.log(`  ${editorUrl}`);
-		this.log(`\n  Dev server running on http://localhost:${port}\n`);
-		const viteBuild = spawn("npx", [
-			"vite",
-			"build",
-			"--watch"
-		], {
-			cwd: rootDir,
-			shell: true,
-			stdio: "inherit"
-		});
-		viteBuild.on("error", (err) => {
-			this.error(`Failed to start vite build: ${err.message}`);
-		});
-		const distFile = path.join(rootDir, "dist", "index.js");
-		await this.waitForFile(distFile);
-		const vitePreview = spawn("npx", [
+		const tenantId = this.tryLoadTenantId();
+		if (tenantId) {
+			const devBlocksUrl = `http://localhost:${port}/src/blocks/register.ts`;
+			const remoteUrl = `https://admin.juo.io/store/${encodeURIComponent(tenantId)}/editor?dev-blocks-url=${encodeURIComponent(devBlocksUrl)}`;
+			this.log(`\n  remote editor  ${remoteUrl}`);
+		}
+		const vite = spawn("npx", [
 			"vite",
-			"preview",
 			"--port",
 			String(port)
 		], {
@@ -52,13 +36,11 @@ Start dev server on port 3000.
 			shell: true,
 			stdio: "inherit"
 		});
-		vitePreview.on("error", (err) => {
-			this.error(`Failed to start vite preview: ${err.message}`);
+		vite.on("error", (err) => {
+			this.error(`Failed to start vite: ${err.message}`);
 		});
-		this.log(`\nDev server ready. Press Ctrl+C to stop.\n`);
 		const cleanup = () => {
-			viteBuild.kill();
-			vitePreview.kill();
+			vite.kill();
 			process.exit(0);
 		};
 		process.on("SIGINT", cleanup);
@@ -74,16 +56,14 @@ Start dev server on port 3000.
 		}
 		return currentPath;
 	}
-	async waitForFile(filePath, timeout = 3e4) {
-		const interval = 200;
-		let waited = 0;
-		while (!existsSync(filePath) && waited < timeout) {
-			await new Promise((resolve) => {
-				setTimeout(resolve, interval);
-			});
-			waited += interval;
+	tryLoadTenantId() {
+		if (!this.configExists()) return null;
+		try {
+			return this.loadConfig().JUO_TENANT_ID?.trim() || null;
+		} catch (error) {
+			this.warn(`Could not read config file: ${error instanceof Error ? error.message : String(error)}`);
+			return null;
 		}
-		if (!existsSync(filePath)) this.error(`Timed out waiting for ${filePath}`);
 	}
 };
 

package/dist/commands/create.d.ts

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

package/dist/commands/create.js

@@ -1,6 +1,6 @@
-import { r as BaseTemplateGenerator } from "../juoTemplateGenerator-Bsxy3cfd.js";
-import { t as PackageGenerator } from "../packageGenerator-BiEzLxCa.js";
-import { t as Generate } from "../generate-CUst3S4-.js";
+import { r as BaseTemplateGenerator } from "../juoTemplateGenerator-RkinYN2l.js";
+import { t as PackageGenerator } from "../packageGenerator-Bx2FAq2Y.js";
+import { t as Generate } from "../generate-BiHo2p9_.js";
 import { Command, Flags } from "@oclif/core";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import path from "node:path";
@@ -16,6 +16,17 @@ var ConfigFilesGenerator = class extends BaseTemplateGenerator {
 	}
 };
 
+//#endregion
+//#region src/utils/devHarnessGenerator.ts
+var DevHarnessGenerator = class extends BaseTemplateGenerator {
+	generate(destDir, options) {
+		this.renderTemplate("dev", destDir, {
+			editorVersion: "0.25.0-alpha.1",
+			tailwind: options.tailwind
+		});
+	}
+};
+
 //#endregion
 //#region src/utils/storybookGenerator.ts
 const COMMAND_CONFIG = {
@@ -262,6 +273,7 @@ var Create = class Create extends Command {
 			});
 			tailwindSpinner.stop("Generated Tailwind CSS configuration");
 		}
+		new DevHarnessGenerator().generate(projectDir, { tailwind });
 		const originalCwd = process.cwd();
 		try {
 			process.chdir(projectDir);

package/dist/commands/generate.js

@@ -1,4 +1,4 @@
-import "../juoTemplateGenerator-Bsxy3cfd.js";
-import { t as Generate } from "../generate-CUst3S4-.js";
+import "../juoTemplateGenerator-RkinYN2l.js";
+import { t as Generate } from "../generate-BiHo2p9_.js";
 
 export { Generate as default };

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_interfaces8 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces7 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_interfaces8.OptionFlag<string, _oclif_core_interfaces8.CustomOptions>;
+    theme: _oclif_core_interfaces7.OptionFlag<string, _oclif_core_interfaces7.CustomOptions>;
   };
   getAllFiles(dirPath: string, basePath: string): string[];
   run(): Promise<void>;

package/dist/{generate-CUst3S4-.js → generate-BiHo2p9_.js}

@@ -1,4 +1,4 @@
-import { t as JuoTemplateGenerator } from "./juoTemplateGenerator-Bsxy3cfd.js";
+import { t as JuoTemplateGenerator } from "./juoTemplateGenerator-RkinYN2l.js";
 import { Command, Flags } from "@oclif/core";
 import { existsSync } from "node:fs";
 import path from "node:path";

package/dist/hooks/postrun.js

@@ -1,4 +1,4 @@
-import { a as CUSTOMERIO_BETA_FORM_URL, i as CUSTOMERIO_API_KEY, n as trackCommandCompleted, o as CUSTOMERIO_SITE_ID, t as trackBetaSignup } from "../analytics-BMClHCkY.js";
+import { a as CUSTOMERIO_BETA_FORM_URL, i as CUSTOMERIO_API_KEY, n as trackCommandCompleted, o as CUSTOMERIO_SITE_ID, t as trackBetaSignup } from "../analytics-CuhiZN94.js";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import path from "node:path";
 import { confirm, isCancel, text } from "@clack/prompts";

package/dist/hooks/prerun.js

@@ -1,4 +1,4 @@
-import { r as trackCommandStarted } from "../analytics-BMClHCkY.js";
+import { r as trackCommandStarted } from "../analytics-CuhiZN94.js";
 
 //#region src/hooks/prerun.ts
 const hook = async function(options) {

package/dist/{juoTemplateGenerator-Bsxy3cfd.js → juoTemplateGenerator-RkinYN2l.js}

@@ -143,6 +143,7 @@ var JuoTemplateGenerator = class extends BaseTemplateGenerator {
 		});
 		if (exports.length === 0) return;
 		const registerContent = [
+			`import "@juo/customer-ui/web-components";`,
 			`import { registerBlock } from "@juo/blocks";`,
 			exports.map(({ name, slug }) => `import { ${name} } from "./${slug}";`).join("\n"),
 			"",

package/dist/lib/index.d.ts

@@ -7,6 +7,8 @@ interface TemplateScope {
     slug: string;
     tailwind?: boolean;
   };
+  editorVersion?: string;
+  tailwind?: boolean;
 }
 declare abstract class BaseTemplateGenerator {
   protected getTemplateDir(name: string): string;

package/dist/lib/index.js

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

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

@@ -75,7 +75,7 @@ var PackageGenerator = class {
 					"build-storybook": "storybook build",
 					storybook: "storybook dev -p 6006"
 				} : {},
-				dev: "vite build -w & vite preview --port 5174",
+				dev: "vite --port 5174",
 				preview: "vite preview"
 			},
 			type: "module",
@@ -83,6 +83,7 @@ var PackageGenerator = class {
 		});
 		const frameworkConfig = FRAMEWORK_CONFIGS[options.framework];
 		baseConfig.dependencies = {
+			"@juo/customer-ui": "^0.5.0-alpha.4",
 			...baseConfig.dependencies,
 			...frameworkConfig.dependencies
 		};

package/oclif.manifest.json

@@ -96,9 +96,9 @@
     "blocks:dev": {
       "aliases": [],
       "args": {},
-      "description": "Start local block dev server for use with the Juo editor",
+      "description": "Start local block dev server with embedded editor",
       "examples": [
-        "<%= config.bin %> <%= command.id %>\nStart dev server on default port (5174).\n",
+        "<%= config.bin %> <%= command.id %>\nStart dev server on default port (5174). Opens editor at http://localhost:5174/editor.\n",
         "<%= config.bin %> <%= command.id %> --port 3000\nStart dev server on port 3000.\n"
       ],
       "flags": {
@@ -111,7 +111,7 @@
         },
         "port": {
           "char": "p",
-          "description": "Port for the local block dev server",
+          "description": "Port for the local dev server",
           "name": "port",
           "default": 5174,
           "hasDynamicHelp": false,
@@ -179,5 +179,5 @@
       ]
     }
   },
-  "version": "0.2.1"
+  "version": "0.3.0-alpha.0"
 }

package/package.json

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

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

@@ -1,24 +1,6 @@
 import { useState } from "preact/hooks";
 import type { Props } from "./index.ts";{% if block.tailwind %}
 
-const Counter = ({
-  className,
-  initialCount,
-}: {
-  className: string;
-  initialCount: number;
-}) => {
-  const [count, setCount] = useState(initialCount);
-  return (
-    <button
-      className={`px-4 py-2 rounded-sm cursor-pointer ${className}`}
-      onClick={() => setCount(count + 1)}
-    >
-      count: is {count}
-    </button>
-  );
-};
-
 const FrameworkIcon = ({ className }: { className: string }) => {
   return (
     <svg
@@ -77,47 +59,30 @@ const TypeScriptIcon = ({ className }: { className: string }) => {
 };
 
 export function {{ block.clsName }}(props: Props) {
+  const [count, setCount] = useState(props.initialCount);
   return (
-    <div className="font-[540] flex gap-8 justify-between items-center py-10 px-10 rounded-lg border border-gray-400 bg-[#fafafa]">
-      <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>
+    <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>
         </div>
+        <juo-button onClick={() => setCount(count + 1)}>count: is {count}</juo-button>
       </div>
-      <Counter
-        className="text-xs leading-3 text-white bg-[#111] rounded-md px-2 py-1.5 min-w-22"
-        initialCount={props.initialCount}
-      />
-    </div>
+    </juo-card>
   );
 }
 
 {% else %}
 import "../../styles.css";
-const Counter = ({
-  className,
-  initialCount,
-}: {
-  className: string;
-  initialCount: number;
-}) => {
-  const [count, setCount] = useState(initialCount);
-  return (
-    <button
-      className={`counter-button ${className}`}
-      onClick={() => setCount(count + 1)}
-    >
-      count: is {count}
-    </button>
-  );
-};
 
 const FrameworkIcon = ({ className }: { className: string }) => {
   return (
@@ -177,23 +142,23 @@ const TypeScriptIcon = ({ className }: { className: string }) => {
 };
 
 export function {{ block.clsName }}(props: Props) {
+  const [count, setCount] = useState(props.initialCount);
   return (
-    <div className="container">
-      <div className="content">
-        <div className="icon-container">
-          <FrameworkIcon className="framework-icon" />
-          <TypeScriptIcon className="typescript-icon" />
-        </div>
-        <div className="text-container">
-          <p className="subtitle">{props.subtitle}</p>
-          <p className="title">{props.title}</p>
+    <juo-card>
+      <div className="container">
+        <div className="content">
+          <div className="icon-container">
+            <FrameworkIcon className="framework-icon" />
+            <TypeScriptIcon className="typescript-icon" />
+          </div>
+          <div className="text-container">
+            <p className="subtitle">{props.subtitle}</p>
+            <p className="title">{props.title}</p>
+          </div>
         </div>
+        <juo-button onClick={() => setCount(count + 1)}>count: is {count}</juo-button>
       </div>
-      <Counter
-        className="counter-button-custom"
-        initialCount={props.initialCount}
-      />
-    </div>
+    </juo-card>
   );
 }
 {% endif %}

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

@@ -1,19 +1,7 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { MantineProvider } from "@mantine/core";
 import type { Props } from ".";
 
-const Counter = ({ className, initialCount = 0 }: { className: string; initialCount?: number }) => {
-  const [count, setCount] = useState(initialCount);
-  return (
-    <button
-      className={`px-4 py-2 rounded-md cursor-pointer ${className}`}
-      onClick={() => setCount(count + 1)}
-    >
-      count: is {count}
-    </button>
-  );
-};
-
 const FrameworkIcon = ({ className }: { className: string }) => {
   return (
     <svg
@@ -63,28 +51,27 @@ const TypeScriptIcon = ({ className }: { className: string }) => {
 };
 
 export function {{ block.clsName }}(props: Props) {
-  const root = useRef<HTMLDivElement>(null);
+  const [count, setCount] = useState(props.initialCount ?? 0);
 
   return (
     <MantineProvider>
-      <div ref={root} className="font-[540] flex gap-8 justify-between items-center py-10 px-10 rounded-lg border border-gray-400 bg-[#fafafa]">
-        <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>
+      <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>
           </div>
+          <juo-button onClick={() => setCount(count + 1)}>count: is {count}</juo-button>
         </div>
-        <Counter
-          className="text-xs leading-3 text-white bg-[#111] rounded-md px-2 py-1.5 min-w-22"
-          initialCount={props.initialCount}
-        />
-      </div>
+      </juo-card>
     </MantineProvider>
   );
 }

package/templates/configFiles/vite-env.d.ts.liquid

@@ -1,2 +1,19 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+{% if framework == "react" %}
+
+declare namespace React {
+  namespace JSX {
+    // Bridge HTMLElementTagNameMap (augmented by @juo/customer-ui/web-components) into
+    // React's IntrinsicElements so that juo-* custom elements typecheck without a
+    // hardcoded list. Omit<…, keyof HTMLElement> strips DOM methods/properties,
+    // leaving only component-specific props.
+    type _JuoElements = {
+      [K in Extract<keyof HTMLElementTagNameMap, `juo-${string}`>]:
+        React.HTMLAttributes<HTMLElementTagNameMap[K]> &
+        Partial<Omit<HTMLElementTagNameMap[K], keyof HTMLElement>>;
+    };
+    interface IntrinsicElements extends _JuoElements {}
+  }
+}
+{% endif %}

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

@@ -1,5 +1,6 @@
 import { defineConfig } from "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" %}
@@ -10,7 +11,7 @@ export default defineConfig({
   define: {
     "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
   },
-  plugins: [{% if framework == "react" %}react(), {% endif %}{% if framework == "preact" %}preact(), {% endif %}
+  plugins: [juo(), {% if framework == "react" %}react(), {% endif %}{% if framework == "preact" %}preact(), {% endif %}
     svgr({
       svgrOptions: {
         icon: true,
@@ -27,7 +28,7 @@ export default defineConfig({
       fileName: "index",
     },
     rollupOptions: {
-      external: ["@juo/blocks"],
+      external: [/^@juo\/blocks/],
     },
   },
 });

package/templates/css/styles.css

@@ -1,8 +1,5 @@
-.counter-button {
-  padding: 0.5rem 1rem;
-  border-radius: 0.125rem;
-  cursor: pointer;
-}
+@import "@juo/customer-ui/design-tokens.css";
+@import "@juo/customer-ui/theme-modes.css";
 
 .container {
   font-weight: 540;
@@ -60,12 +57,3 @@
   color: #111;
 }
 
-.counter-button-custom {
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  color: white;
-  background-color: #111;
-  border-radius: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  min-width: 5.5rem;
-}

package/templates/dev/index.html.liquid

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Juo Blocks Dev</title>
+  </head>
+  <body>
+    <juo-context-root>
+      <div id="app"></div>
+    </juo-context-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,136 @@
+import "@juo/blocks/web-components/editor";
+{% if tailwind %}import "./tailwind.css";
+{% else %}import "./styles.css";
+{% endif %}
+import {
+  createBlockInstance,
+  createThemeState,
+  defineBlock,
+  effect,
+  injectContext,
+  isEditorPreview,
+  provideContext,
+  registerBlock,
+  serializeBlocks,
+  ThemeStateContext,
+  TranslationContext,
+  createTranslationService,
+  untracked,
+} from "@juo/blocks";
+import { registerBlocks as registerProjectBlocks } from "./blocks/register";
+
+const homePageBlock = defineBlock("HomePage", {
+  displayName: "Home page",
+  group: "page",
+  schema: {
+    type: "object",
+    properties: {
+      props: {
+        type: "object",
+        properties: {},
+        additionalProperties: false,
+      },
+      slots: {
+        type: "object",
+        properties: { main: {} },
+        additionalProperties: false,
+      },
+    },
+    required: ["props", "slots"],
+    additionalProperties: false,
+  },
+  initialValue: () => ({
+    props: {},
+    slots: {
+      main: [createBlockInstance("Starter Block")],
+    },
+  }),
+  renderer() {
+    const page = document.createElement("juo-page");
+    page.setAttribute("name", "HomePage");
+    const extensionRoot = document.createElement("juo-extension-root");
+    extensionRoot.setAttribute("name", "main");
+    page.appendChild(extensionRoot);
+    return page;
+  },
+});
+
+function registerBlocks() {
+  registerProjectBlocks();
+  registerBlock(homePageBlock);
+}
+
+async function setupEditorMode(root: HTMLElement) {
+  const editorModule = await import("@juo/blocks/editor");
+  const editor = editorModule.createEditorBridge();
+  const routerService = {
+    push: () => {},
+    subscribe: () => () => {},
+    getPages: () => [{ path: "/", block: "HomePage", title: "Home", routeNames: [] }],
+  };
+  const themeState = createThemeState({
+    resolve: (surface, path) => editor.requestThemeState(surface, path),
+    upsertState: (surface, path, blocks) =>
+      editor.upsertThemeState(surface, path, blocks),
+    translations: {
+      resolveTranslations: (locale) =>
+        editor.requestTranslationOverrides(locale),
+    },
+    routerService,
+  });
+  provideContext(root, ThemeStateContext, themeState);
+  await editorModule.setupEditorMode({ routerService, themeState });
+}
+
+function setupViewMode(root: HTMLElement) {
+  const themeState = createThemeState({
+    resolve: async () => ({
+      blocks: serializeBlocks([createBlockInstance("HomePage")]),
+    }),
+  });
+  provideContext(root, ThemeStateContext, themeState);
+}
+
+async function initializeTheme() {
+  const root = document.querySelector("juo-context-root") as HTMLElement;
+
+  registerBlocks();
+
+  if (isEditorPreview()) {
+    await setupEditorMode(root);
+  } else {
+    setupViewMode(root);
+  }
+
+  const themeState = injectContext(root, ThemeStateContext);
+
+  await themeState.locales.setLocale("en");
+  provideContext(
+    root,
+    TranslationContext,
+    createTranslationService(themeState.locales, {
+      async loadDefaultTranslations() {
+        return {};
+      },
+    }),
+  );
+
+  void themeState.resolve("page", "/");
+
+  effect(() => {
+    const block = themeState.page.blocks.value.at(0);
+    untracked(() => {
+      if (block == null) {
+        document.querySelector("#app")?.replaceChildren();
+      } else {
+        document.querySelector("#app")?.replaceChildren(block.definition.render(block));
+      }
+    });
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => void initializeTheme());
+} else {
+  void initializeTheme();
+}

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

@@ -0,0 +1,43 @@
+import type { Plugin } from "vite";
+
+const EDITOR_EMBED_URL =
+  "https://cdn.juo.io/web/blocks/juo/editor/{{ editorVersion }}/juo-editor.embed.js";
+
+export default function juo(): Plugin {
+  return {
+    name: "juo-editor",
+    configureServer(server) {
+      server.middlewares.use("/editor", (_req, res) => {
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end(`<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Juo Blocks Editor</title>
+    <style>
+      html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+      juo-editor { display: block; height: 100vh; }
+    </style>
+  </head>
+  <body>
+    <script type="module" src="${EDITOR_EMBED_URL}"></script>
+    <juo-editor url="/?editor=true"></juo-editor>
+  </body>
+</html>`);
+      });
+
+      server.httpServer?.once("listening", () => {
+        const address = server.httpServer?.address();
+        const port =
+          address && typeof address === "object" ? address.port : 5174;
+        const base = `http://localhost:${port}`;
+        server.config.logger.info(
+          `\n  juo editor        ${base}/editor` +
+            `\n  editor view mode  ${base}/` +
+            `\n  blocks bundle     ${base}/src/blocks/register.ts\n`,
+        );
+      });
+    },
+  };
+}

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

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

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

@@ -1,6 +1,7 @@
 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" %}
@@ -11,7 +12,7 @@ export default defineConfig({
   define: {
     "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
   },
-  plugins: [tailwindcss(){% if framework == "react" %}, react(){% endif %}{% if framework == "preact" %}, preact(){% endif %},
+  plugins: [tailwindcss(), juo(){% if framework == "react" %}, react(){% endif %}{% if framework == "preact" %}, preact(){% endif %},
     svgr({
       svgrOptions: {
         icon: true,
@@ -28,7 +29,7 @@ export default defineConfig({
       fileName: "index",
     },
     rollupOptions: {
-      external: ["@juo/blocks"],
+      external: [/^@juo\/blocks/],
     },
   },
 });