juo 0.2.0 → 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.0 linux-x64 node-v22.21.0
+juo/0.3.0-alpha.0 linux-x64 node-v22.21.0
 $ juo --help [COMMAND]
 USAGE
   $ juo COMMAND
@@ -31,11 +31,37 @@ USAGE
 # Commands
 
 <!-- commands -->
+* [`juo blocks dev`](#juo-blocks-dev)
 * [`juo create`](#juo-create)
 * [`juo generate`](#juo-generate)
 * [`juo help [COMMAND]`](#juo-help-command)
 * [`juo publish`](#juo-publish)
 
+## `juo blocks dev`
+
+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 dev server
+
+GLOBAL FLAGS
+  --reconfigure  Reconfigure settings
+
+DESCRIPTION
+  Start local block dev server with embedded editor
+
+EXAMPLES
+  $ juo blocks dev
+  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.
+```
+
 ## `juo create`
 
 Generate a new Juo project

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-CgHTVQWO.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/base-command-BQVnm_gK.d.ts

@@ -0,0 +1,28 @@
+import { Command, Interfaces } from "@oclif/core";
+
+//#region src/base-command.d.ts
+interface BaseConfig {
+  JUO_API_KEY: string;
+  JUO_API_URL: string;
+  JUO_TENANT_ID?: string;
+}
+type Flags$1<T extends typeof Command> = Interfaces.InferredFlags<(typeof BaseCommand)['baseFlags'] & T['flags']>;
+type Args<T extends typeof Command> = Interfaces.InferredArgs<T['args']>;
+declare abstract class BaseCommand<T extends typeof Command> extends Command {
+  static baseFlags: {
+    reconfigure: Interfaces.BooleanFlag<boolean>;
+  };
+  protected args: Args<T>;
+  protected flags: Flags$1<T>;
+  protected get configFileName(): string;
+  protected get configFilePath(): string;
+  protected configExists(): boolean;
+  protected ensureConfig(reconfigure?: boolean): Promise<BaseConfig>;
+  protected ensureTenantId(): Promise<string>;
+  init(): Promise<void>;
+  protected loadConfig(): Partial<BaseConfig>;
+  protected saveConfig(config: Partial<BaseConfig>): void;
+  protected validateConfig(config: Partial<BaseConfig>): config is BaseConfig;
+}
+//#endregion
+export { BaseCommand as t };

package/dist/base-command-CqPEFZ4E.js

@@ -0,0 +1,115 @@
+import { Command, Flags } from "@oclif/core";
+import fs from "node:fs";
+import path from "node:path";
+import inquirer from "inquirer";
+
+//#region src/base-command.ts
+var BaseCommand = class extends Command {
+	static baseFlags = { reconfigure: Flags.boolean({
+		default: false,
+		description: "Reconfigure settings",
+		helpGroup: "GLOBAL"
+	}) };
+	args;
+	flags;
+	get configFileName() {
+		return "config.json";
+	}
+	get configFilePath() {
+		return path.join(this.config.configDir, this.configFileName);
+	}
+	configExists() {
+		return fs.existsSync(this.configFilePath);
+	}
+	async ensureConfig(reconfigure = false) {
+		let config = {};
+		if (this.configExists()) try {
+			config = this.loadConfig();
+			if (this.validateConfig(config) && !reconfigure) {
+				this.log(`Found configuration at ${this.configFilePath}`);
+				return config;
+			}
+		} catch {
+			this.log(`Warning: Could not parse existing config at ${this.configFilePath}`);
+		}
+		if (reconfigure && this.validateConfig(config)) this.log("Reconfiguring settings...");
+		else this.log("Configuration incomplete. Setting up...");
+		const questions = [];
+		if (!config.JUO_API_URL || reconfigure) questions.push({
+			default: "https://api.juo.io",
+			message: "Enter the Juo API URL:",
+			name: "JUO_API_URL",
+			type: "input",
+			validate(input) {
+				if (!input.trim()) return "Juo API URL is required";
+				return true;
+			}
+		});
+		if (!config.JUO_API_KEY || reconfigure) questions.push({
+			message: "Enter your Juo API key:",
+			name: "JUO_API_KEY",
+			type: "password",
+			validate(input) {
+				if (!input.trim()) return "Juo API key is required";
+				return true;
+			}
+		});
+		if (questions.length === 0) return config;
+		const response = await inquirer.prompt(questions);
+		if (response.JUO_API_URL) config.JUO_API_URL = response.JUO_API_URL.trim();
+		if (response.JUO_API_KEY) config.JUO_API_KEY = response.JUO_API_KEY.trim();
+		this.saveConfig(config);
+		this.log(`Saved configuration to ${this.configFilePath}`);
+		if (this.validateConfig(config)) return config;
+		throw new Error("Failed to create valid configuration");
+	}
+	async ensureTenantId() {
+		let config = {};
+		if (this.configExists()) try {
+			config = this.loadConfig();
+			if (config.JUO_TENANT_ID?.trim()) return config.JUO_TENANT_ID.trim();
+		} catch {}
+		const tenantId = (await inquirer.prompt([{
+			message: "Enter your tenant ID (shop identifier):",
+			name: "JUO_TENANT_ID",
+			type: "input",
+			validate(input) {
+				if (!input.trim()) return "Tenant ID is required";
+				return true;
+			}
+		}])).JUO_TENANT_ID.trim().replace(/\.myshopify\.com$/, "");
+		config.JUO_TENANT_ID = tenantId;
+		this.saveConfig(config);
+		return tenantId;
+	}
+	async init() {
+		await super.init();
+		const { args, flags } = await this.parse({
+			args: this.ctor.args,
+			baseFlags: super.ctor.baseFlags,
+			flags: this.ctor.flags,
+			strict: this.ctor.strict
+		});
+		this.flags = flags;
+		this.args = args;
+	}
+	loadConfig() {
+		if (!this.configExists()) throw new Error(`Configuration file not found at ${this.configFilePath}`);
+		try {
+			const configContent = fs.readFileSync(this.configFilePath, "utf8");
+			return JSON.parse(configContent);
+		} catch (error) {
+			throw new Error(`Failed to parse configuration file at ${this.configFilePath}: ${error}`);
+		}
+	}
+	saveConfig(config) {
+		fs.mkdirSync(this.config.configDir, { recursive: true });
+		fs.writeFileSync(this.configFilePath, JSON.stringify(config, null, 2), { encoding: "utf8" });
+	}
+	validateConfig(config) {
+		return Boolean(config.JUO_API_KEY && config.JUO_API_KEY.trim().length > 0 && config.JUO_API_URL && config.JUO_API_URL.trim().length > 0);
+	}
+};
+
+//#endregion
+export { BaseCommand as t };

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

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

package/dist/commands/blocks/dev.js

@@ -0,0 +1,71 @@
+import { t as BaseCommand } from "../../base-command-CqPEFZ4E.js";
+import { Flags } from "@oclif/core";
+import { existsSync } from "node:fs";
+import path from "node:path";
+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 with embedded editor";
+	static examples = [`<%= config.bin %> <%= command.id %>
+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 dev server"
+	}) };
+	async run() {
+		const { flags } = await this.parse(Dev);
+		const { port } = flags;
+		const rootDir = this.resolvePackageJsonPath();
+		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",
+			"--port",
+			String(port)
+		], {
+			cwd: rootDir,
+			shell: true,
+			stdio: "inherit"
+		});
+		vite.on("error", (err) => {
+			this.error(`Failed to start vite: ${err.message}`);
+		});
+		const cleanup = () => {
+			vite.kill();
+			process.exit(0);
+		};
+		process.on("SIGINT", cleanup);
+		process.on("SIGTERM", cleanup);
+		await new Promise(() => {});
+	}
+	resolvePackageJsonPath() {
+		let currentPath = path.resolve("./");
+		while (!existsSync(path.join(currentPath, "package.json"))) {
+			const parentDir = path.dirname(currentPath);
+			if (parentDir === currentPath) throw new Error("Could not find 'package.json' in the project");
+			currentPath = parentDir;
+		}
+		return currentPath;
+	}
+	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;
+		}
+	}
+};
+
+//#endregion
+export { Dev as default };

package/dist/commands/create.d.ts

@@ -1,13 +1,13 @@
 import { Command } from "@oclif/core";
-import * as _oclif_core_interfaces1 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_interfaces1.BooleanFlag<boolean>;
-    storybook: _oclif_core_interfaces1.BooleanFlag<boolean>;
-    verbose: _oclif_core_interfaces1.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-Ug40Yo7e.js";
-import { t as PackageGenerator } from "../packageGenerator-Dno-ecHh.js";
-import { t as Generate } from "../generate-D9WUAwYz.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.d.ts

@@ -1,15 +1,15 @@
 import { Command } from "@oclif/core";
-import * as _oclif_core_interfaces4 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces0 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_interfaces4.OptionFlag<string | undefined, _oclif_core_interfaces4.CustomOptions>;
-    tailwind: _oclif_core_interfaces4.BooleanFlag<boolean>;
-    type: _oclif_core_interfaces4.OptionFlag<string, _oclif_core_interfaces4.CustomOptions>;
-    verbose: _oclif_core_interfaces4.BooleanFlag<boolean>;
+    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>;
   };
   static id: string;
   run(): Promise<void>;

package/dist/commands/generate.js

@@ -1,4 +1,4 @@
-import "../juoTemplateGenerator-Ug40Yo7e.js";
-import { t as Generate } from "../generate-D9WUAwYz.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,38 +1,13 @@
-import { Command, Interfaces } from "@oclif/core";
-import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";
+import { t as BaseCommand } from "../../base-command-BQVnm_gK.js";
+import * as _oclif_core_interfaces7 from "@oclif/core/interfaces";
 
-//#region src/base-command.d.ts
-interface BaseConfig {
-  JUO_API_KEY: string;
-  JUO_API_URL: string;
-  JUO_TENANT_ID?: string;
-}
-type Flags$1<T extends typeof Command> = Interfaces.InferredFlags<(typeof BaseCommand)['baseFlags'] & T['flags']>;
-type Args<T extends typeof Command> = Interfaces.InferredArgs<T['args']>;
-declare abstract class BaseCommand<T extends typeof Command> extends Command {
-  static baseFlags: {
-    reconfigure: Interfaces.BooleanFlag<boolean>;
-  };
-  protected args: Args<T>;
-  protected flags: Flags$1<T>;
-  protected get configFileName(): string;
-  protected get configFilePath(): string;
-  protected configExists(): boolean;
-  protected ensureConfig(reconfigure?: boolean): Promise<BaseConfig>;
-  protected ensureTenantId(): Promise<string>;
-  init(): Promise<void>;
-  protected loadConfig(): Partial<BaseConfig>;
-  protected saveConfig(config: Partial<BaseConfig>): void;
-  protected validateConfig(config: Partial<BaseConfig>): config is BaseConfig;
-}
-//#endregion
 //#region src/commands/publish/index.d.ts
 declare class Publish extends BaseCommand<typeof Publish> {
   static args: {};
   static description: string;
   static examples: string[];
   static flags: {
-    theme: _oclif_core_interfaces0.OptionFlag<string, _oclif_core_interfaces0.CustomOptions>;
+    theme: _oclif_core_interfaces7.OptionFlag<string, _oclif_core_interfaces7.CustomOptions>;
   };
   getAllFiles(dirPath: string, basePath: string): string[];
   run(): Promise<void>;

package/dist/commands/publish/index.js

@@ -1,120 +1,11 @@
-import { Command, Flags } from "@oclif/core";
+import { t as BaseCommand } from "../../base-command-CqPEFZ4E.js";
+import { Flags } from "@oclif/core";
 import fs from "node:fs";
 import path from "node:path";
 import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import mime from "mime";
 import asyncPool from "tiny-async-pool";
-import inquirer from "inquirer";
 
-//#region src/base-command.ts
-var BaseCommand = class extends Command {
-	static baseFlags = { reconfigure: Flags.boolean({
-		default: false,
-		description: "Reconfigure settings",
-		helpGroup: "GLOBAL"
-	}) };
-	args;
-	flags;
-	get configFileName() {
-		return "config.json";
-	}
-	get configFilePath() {
-		return path.join(this.config.configDir, this.configFileName);
-	}
-	configExists() {
-		return fs.existsSync(this.configFilePath);
-	}
-	async ensureConfig(reconfigure = false) {
-		let config = {};
-		if (this.configExists()) try {
-			config = this.loadConfig();
-			if (this.validateConfig(config) && !reconfigure) {
-				this.log(`Found configuration at ${this.configFilePath}`);
-				return config;
-			}
-		} catch {
-			this.log(`Warning: Could not parse existing config at ${this.configFilePath}`);
-		}
-		if (reconfigure && this.validateConfig(config)) this.log("Reconfiguring settings...");
-		else this.log("Configuration incomplete. Setting up...");
-		const questions = [];
-		if (!config.JUO_API_URL || reconfigure) questions.push({
-			default: "https://api.juo.io",
-			message: "Enter the Juo API URL:",
-			name: "JUO_API_URL",
-			type: "input",
-			validate(input) {
-				if (!input.trim()) return "Juo API URL is required";
-				return true;
-			}
-		});
-		if (!config.JUO_API_KEY || reconfigure) questions.push({
-			message: "Enter your Juo API key:",
-			name: "JUO_API_KEY",
-			type: "password",
-			validate(input) {
-				if (!input.trim()) return "Juo API key is required";
-				return true;
-			}
-		});
-		if (questions.length === 0) return config;
-		const response = await inquirer.prompt(questions);
-		if (response.JUO_API_URL) config.JUO_API_URL = response.JUO_API_URL.trim();
-		if (response.JUO_API_KEY) config.JUO_API_KEY = response.JUO_API_KEY.trim();
-		this.saveConfig(config);
-		this.log(`Saved configuration to ${this.configFilePath}`);
-		if (this.validateConfig(config)) return config;
-		throw new Error("Failed to create valid configuration");
-	}
-	async ensureTenantId() {
-		let config = {};
-		if (this.configExists()) try {
-			config = this.loadConfig();
-			if (config.JUO_TENANT_ID?.trim()) return config.JUO_TENANT_ID.trim();
-		} catch {}
-		const tenantId = (await inquirer.prompt([{
-			message: "Enter your tenant ID (shop identifier):",
-			name: "JUO_TENANT_ID",
-			type: "input",
-			validate(input) {
-				if (!input.trim()) return "Tenant ID is required";
-				return true;
-			}
-		}])).JUO_TENANT_ID.trim().replace(/\.myshopify\.com$/, "");
-		config.JUO_TENANT_ID = tenantId;
-		this.saveConfig(config);
-		return tenantId;
-	}
-	async init() {
-		await super.init();
-		const { args, flags } = await this.parse({
-			args: this.ctor.args,
-			baseFlags: super.ctor.baseFlags,
-			flags: this.ctor.flags,
-			strict: this.ctor.strict
-		});
-		this.flags = flags;
-		this.args = args;
-	}
-	loadConfig() {
-		if (!this.configExists()) throw new Error(`Configuration file not found at ${this.configFilePath}`);
-		try {
-			const configContent = fs.readFileSync(this.configFilePath, "utf8");
-			return JSON.parse(configContent);
-		} catch (error) {
-			throw new Error(`Failed to parse configuration file at ${this.configFilePath}: ${error}`);
-		}
-	}
-	saveConfig(config) {
-		fs.mkdirSync(this.config.configDir, { recursive: true });
-		fs.writeFileSync(this.configFilePath, JSON.stringify(config, null, 2), { encoding: "utf8" });
-	}
-	validateConfig(config) {
-		return Boolean(config.JUO_API_KEY && config.JUO_API_KEY.trim().length > 0 && config.JUO_API_URL && config.JUO_API_URL.trim().length > 0);
-	}
-};
-
-//#endregion
 //#region src/commands/publish/index.ts
 var Publish = class extends BaseCommand {
 	static args = {};

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

@@ -1,4 +1,4 @@
-import { t as JuoTemplateGenerator } from "./juoTemplateGenerator-Ug40Yo7e.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-CgHTVQWO.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-CgHTVQWO.js";
+import { r as trackCommandStarted } from "../analytics-CuhiZN94.js";
 
 //#region src/hooks/prerun.ts
 const hook = async function(options) {

package/dist/{juoTemplateGenerator-Ug40Yo7e.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-Ug40Yo7e.js";
-import { t as PackageGenerator } from "../packageGenerator-Dno-ecHh.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-Dno-ecHh.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

@@ -93,6 +93,48 @@
         "generate.js"
       ]
     },
+    "blocks:dev": {
+      "aliases": [],
+      "args": {},
+      "description": "Start local block dev server with embedded editor",
+      "examples": [
+        "<%= 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": {
+        "reconfigure": {
+          "description": "Reconfigure settings",
+          "helpGroup": "GLOBAL",
+          "name": "reconfigure",
+          "allowNo": false,
+          "type": "boolean"
+        },
+        "port": {
+          "char": "p",
+          "description": "Port for the local dev server",
+          "name": "port",
+          "default": 5174,
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        }
+      },
+      "hasDynamicHelp": false,
+      "hiddenAliases": [],
+      "id": "blocks:dev",
+      "pluginAlias": "juo",
+      "pluginName": "juo",
+      "pluginType": "core",
+      "strict": true,
+      "enableJsonFlag": false,
+      "isESM": true,
+      "relativePath": [
+        "dist",
+        "commands",
+        "blocks",
+        "dev.js"
+      ]
+    },
     "publish": {
       "aliases": [],
       "args": {},
@@ -137,5 +179,5 @@
       ]
     }
   },
-  "version": "0.2.0"
+  "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.0",
+  "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/],
     },
   },
 });