create-jilatax 0.0.9 → 0.1.1

package/README.md

@@ -17,8 +17,9 @@ cd my-app
 bun run run:android
 ```
 
-The creator asks for the application name, Android package ID, and whether to
-install dependencies. In non-interactive environments, pass the directory and
+The creator derives the application name from the project directory, then asks
+for the Android package ID and whether to install dependencies. Installation is
+disabled by default. In non-interactive environments, pass the directory and
 options explicitly:
 
 ```bash
@@ -33,7 +34,8 @@ Generated projects include:
 - a Lynx and Rspeedy application;
 - `app.json` as the Jilatax application configuration;
 - an Android Gradle project linked to `jilatax/android`;
-- `bun run run:android` for development on a connected device;
+- `bun run run:android` for development on a connected device; the generated
+  APK is located at `android/app/build/outputs/apk/debug/app-debug.apk`;
 - `bun run create:aab` for a Play Store Android App Bundle.
 
 The creator only writes the project and can run `bun install`. Device, Gradle,

package/dist/bin.cjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 //#region src/bin.ts
-require("./cli-6qr3BMqu.cjs").runCreateCli().then((exitCode) => {
+require("./cli-Bh9_Txyy.cjs").runCreateCli().then((exitCode) => {
 	process.exitCode = exitCode;
 });
 //#endregion

package/dist/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { n as runCreateCli } from "./cli-CrpTfN81.js";
+import { n as runCreateCli } from "./cli-BqzdpCyn.js";
 //#region src/bin.ts
 runCreateCli().then((exitCode) => {
 	process.exitCode = exitCode;

package/dist/{cli-6qr3BMqu.cjs → cli-Bh9_Txyy.cjs}

@@ -23,10 +23,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 let _clack_prompts = require("@clack/prompts");
 _clack_prompts = __toESM(_clack_prompts, 1);
 let node_fs_promises = require("node:fs/promises");
-let node_process = require("node:process");
-let node_child_process = require("node:child_process");
+let node_os = require("node:os");
 let node_path = require("node:path");
 node_path = __toESM(node_path, 1);
+let node_process = require("node:process");
+let node_child_process = require("node:child_process");
 let node_url = require("node:url");
 let jilatax = require("jilatax");
 //#region src/generator.ts
@@ -63,7 +64,7 @@ async function createProject(options) {
 		throw error;
 	}
 	const shouldInstall = options.install === true;
-	if (shouldInstall) await (options.installer ?? installWithBun)(projectDirectory);
+	if (shouldInstall) await (options.installer ?? ((directory) => installWithBun(directory, options.silentInstall === true)))(projectDirectory);
 	return {
 		displayName,
 		installed: shouldInstall,
@@ -184,20 +185,20 @@ function createInitialConfig(displayName, projectName, packageId) {
 			android: {
 				adaptiveIcon: {
 					backgroundColor: "#E8FFF2",
-					foregroundImage: "./assets/icon.png"
+					foregroundImage: "./public/assets/icon.png"
 				},
 				package: packageId,
 				predictiveBackGestureEnabled: false,
 				versionCode: 1
 			},
-			icon: "./assets/icon.png",
+			icon: "./public/assets/icon.png",
 			name: displayName,
 			orientation: "portrait",
 			scheme: schemeBase || "jilatax-app",
 			slug,
 			splash: {
 				backgroundColor: "#041A17",
-				image: "./assets/splash-icon.png",
+				image: "./public/assets/splash-icon.png",
 				imageWidth: 96,
 				resizeMode: "contain"
 			},
@@ -218,12 +219,12 @@ async function assertTargetDoesNotExist(target) {
 function titleCase$1(value) {
 	return value.split(/[-_.\s]+/u).filter(Boolean).map((part) => `${part[0]?.toUpperCase() ?? ""}${part.slice(1)}`).join(" ");
 }
-function installWithBun(projectDirectory) {
+function installWithBun(projectDirectory, silent) {
 	return new Promise((resolveInstall, rejectInstall) => {
 		const child = (0, node_child_process.spawn)("bun", ["install"], {
 			cwd: projectDirectory,
 			env: process.env,
-			stdio: "inherit",
+			stdio: silent ? "ignore" : "inherit",
 			windowsHide: true
 		});
 		child.once("error", rejectInstall);
@@ -252,13 +253,25 @@ async function runCreateCli(args = process.argv.slice(2), services = {}) {
 			log(await readCreatorVersion());
 			return 0;
 		}
-		const options = services.interactive ?? (node_process.stdin.isTTY && node_process.stdout.isTTY) ? await promptForOptions(parsed) : nonInteractiveOptions(parsed);
-		printResult(await (services.create ?? createProject)({
-			displayName: options.displayName,
-			install: options.install,
-			packageId: options.packageId,
-			targetDirectory: options.targetDirectory
-		}), log);
+		const interactive = services.interactive ?? (node_process.stdin.isTTY && node_process.stdout.isTTY);
+		const options = interactive ? await promptForOptions(parsed) : nonInteractiveOptions(parsed);
+		const generate = services.create ?? createProject;
+		const progress = interactive && options.install ? startInstallProgress() : void 0;
+		let result;
+		try {
+			result = await generate({
+				displayName: options.displayName,
+				install: options.install,
+				packageId: options.packageId,
+				...progress === void 0 ? {} : { silentInstall: true },
+				targetDirectory: options.targetDirectory
+			});
+		} catch (error) {
+			progress?.fail();
+			throw error;
+		}
+		progress?.succeed();
+		printResult(result, log, interactive);
 		return 0;
 	} catch (error) {
 		if (error instanceof PromptCancelledError) return 0;
@@ -316,7 +329,7 @@ function parseArgs(args) {
 	};
 }
 async function promptForOptions(options) {
-	_clack_prompts.intro("Jilatax · Android-first Lynx application");
+	printWelcome(await readCreatorVersion());
 	const targetDirectory = options.targetDirectory ?? unwrapPrompt(await _clack_prompts.text({
 		message: "Where should the project be created?",
 		placeholder: "./my-jilatax-app",
@@ -329,17 +342,7 @@ async function promptForOptions(options) {
 		}
 	}));
 	const projectName = normalizeProjectNameFromDirectory(targetDirectory);
-	const displayName = options.displayName ?? unwrapPrompt(await _clack_prompts.text({
-		initialValue: titleCase(projectName),
-		message: "Application name",
-		validate(value) {
-			try {
-				normalizeDisplayName(value ?? "");
-			} catch (error) {
-				return validationMessage(error);
-			}
-		}
-	}));
+	const displayName = options.displayName ?? titleCase(projectName);
 	const packageId = options.packageId ?? unwrapPrompt(await _clack_prompts.text({
 		initialValue: defaultPackageId(projectName),
 		message: "Android application ID",
@@ -352,7 +355,7 @@ async function promptForOptions(options) {
 		}
 	}));
 	const install = options.install ?? unwrapPrompt(await _clack_prompts.confirm({
-		initialValue: true,
+		initialValue: false,
 		message: "Install dependencies with Bun?"
 	}));
 	return {
@@ -398,16 +401,92 @@ function readInlineValue(argument, option) {
 function titleCase(value) {
 	return value.split(/[-_.\s]+/u).filter(Boolean).map((part) => `${part[0]?.toUpperCase() ?? ""}${part.slice(1)}`).join(" ");
 }
-function printResult(result, log) {
-	const installStep = result.installed ? "" : "  bun install\n";
-	log(`Created ${result.displayName} in ${result.projectDirectory}.
-
-Next steps:
-  cd ${JSON.stringify(result.projectDirectory)}
-${installStep}  bun run run:android
-
-Release bundle:
-  bun run create:aab`);
+function printWelcome(version) {
+	const reset = "\x1B[0m";
+	const cyan = "\x1B[36m";
+	console.log(`${`${cyan}◢▀▀▀   ▀▀▀◣${reset}\n${cyan}  ◉     ◉${reset}\n${cyan}    ╲▽╱${reset}`}  ${cyan}Jilatax:${reset}\n         Welcome to ${` jilatax ${reset}`} ${cyan}v${version}${reset}!\n`);
+}
+function startInstallProgress() {
+	const reset = "\x1B[0m";
+	const cyan = "\x1B[36m";
+	const dim = "\x1B[2m";
+	const green = "\x1B[32m";
+	const frames = [
+		[
+			45,
+			105,
+			44,
+			46
+		],
+		[
+			105,
+			44,
+			46,
+			45
+		],
+		[
+			44,
+			46,
+			45,
+			105
+		],
+		[
+			46,
+			45,
+			105,
+			44
+		]
+	];
+	let frameIndex = 0;
+	const renderBar = () => {
+		const colors = frames[frameIndex % frames.length] ?? frames[0];
+		frameIndex += 1;
+		return `${colors.map((color) => `\u001B[${color}m  `).join("")}${reset}`;
+	};
+	const renderTitle = () => `${renderBar()}  Project initializing...`;
+	node_process.stdout.write(`\u001B[?25l${renderTitle()}\n         ${cyan}▸ Installing dependencies with Bun...${reset}\u001B[1A\r`);
+	const timer = setInterval(() => {
+		node_process.stdout.write(`\u001B[2K${renderTitle()}\r`);
+	}, 120);
+	const finish = (title, detail) => {
+		clearInterval(timer);
+		node_process.stdout.write(`\u001B[2K\r\u001B[1B\r\u001B[2K\u001B[1A\r${title}\n${detail}\n\u001B[?25h`);
+	};
+	return {
+		fail() {
+			finish(`${cyan}▲${reset} Project initialization failed.`, "");
+		},
+		succeed() {
+			finish(`${green}✓ Project initialized!${reset}`, `  ${dim}▪ Dependencies installed${reset}\n`);
+		}
+	};
+}
+function printResult(result, log, interactive) {
+	const message = [
+		"🛠️ Next steps:",
+		`  cd ${formatProjectDirectory(result.projectDirectory)}`,
+		...result.installed ? [] : ["  bun install"],
+		"  bun run dev",
+		"",
+		"🤖 Android:",
+		"  bun run run:android",
+		"  bun run create:aab"
+	].join("\n");
+	const farewell = `Good luck out there, ${result.projectName}! 🎉`;
+	if (interactive) {
+		_clack_prompts.note(message, "Result");
+		_clack_prompts.outro(farewell);
+		return;
+	}
+	log(`${message}\n\n${farewell}`);
+}
+function formatProjectDirectory(projectDirectory) {
+	const relativeDirectory = node_path.default.relative(process.cwd(), projectDirectory);
+	const cwdPath = relativeDirectory.length === 0 ? "." : relativeDirectory.startsWith("..") || node_path.default.isAbsolute(relativeDirectory) ? relativeDirectory : `.${node_path.default.sep}${relativeDirectory}`;
+	const homeRelative = node_path.default.relative((0, node_os.homedir)(), projectDirectory);
+	const homePath = homeRelative.length === 0 ? "~" : homeRelative.startsWith("..") || node_path.default.isAbsolute(homeRelative) ? void 0 : `~/${homeRelative.split(node_path.default.sep).join("/")}`;
+	const shortestPath = homePath !== void 0 && homePath.length < cwdPath.length ? homePath : cwdPath;
+	return /\s/u.test(shortestPath) ? JSON.stringify(shortestPath) : shortestPath;
 }
 async function readCreatorVersion() {
 	const packageJson = JSON.parse(await (0, node_fs_promises.readFile)(new URL("../package.json", require("url").pathToFileURL(__filename).href), "utf8"));

package/dist/{cli-CrpTfN81.js → cli-BqzdpCyn.js}

@@ -1,8 +1,9 @@
 import * as prompts from "@clack/prompts";
 import { chmod, copyFile, lstat, mkdir, mkdtemp, readFile, readdir, rename, rm, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import path from "node:path";
 import { stdin, stdout } from "node:process";
 import { spawn } from "node:child_process";
-import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { parseAppConfig, syncAndroidProjectConfig } from "jilatax";
 //#region src/generator.ts
@@ -39,7 +40,7 @@ async function createProject(options) {
 		throw error;
 	}
 	const shouldInstall = options.install === true;
-	if (shouldInstall) await (options.installer ?? installWithBun)(projectDirectory);
+	if (shouldInstall) await (options.installer ?? ((directory) => installWithBun(directory, options.silentInstall === true)))(projectDirectory);
 	return {
 		displayName,
 		installed: shouldInstall,
@@ -160,20 +161,20 @@ function createInitialConfig(displayName, projectName, packageId) {
 			android: {
 				adaptiveIcon: {
 					backgroundColor: "#E8FFF2",
-					foregroundImage: "./assets/icon.png"
+					foregroundImage: "./public/assets/icon.png"
 				},
 				package: packageId,
 				predictiveBackGestureEnabled: false,
 				versionCode: 1
 			},
-			icon: "./assets/icon.png",
+			icon: "./public/assets/icon.png",
 			name: displayName,
 			orientation: "portrait",
 			scheme: schemeBase || "jilatax-app",
 			slug,
 			splash: {
 				backgroundColor: "#041A17",
-				image: "./assets/splash-icon.png",
+				image: "./public/assets/splash-icon.png",
 				imageWidth: 96,
 				resizeMode: "contain"
 			},
@@ -194,12 +195,12 @@ async function assertTargetDoesNotExist(target) {
 function titleCase$1(value) {
 	return value.split(/[-_.\s]+/u).filter(Boolean).map((part) => `${part[0]?.toUpperCase() ?? ""}${part.slice(1)}`).join(" ");
 }
-function installWithBun(projectDirectory) {
+function installWithBun(projectDirectory, silent) {
 	return new Promise((resolveInstall, rejectInstall) => {
 		const child = spawn("bun", ["install"], {
 			cwd: projectDirectory,
 			env: process.env,
-			stdio: "inherit",
+			stdio: silent ? "ignore" : "inherit",
 			windowsHide: true
 		});
 		child.once("error", rejectInstall);
@@ -228,13 +229,25 @@ async function runCreateCli(args = process.argv.slice(2), services = {}) {
 			log(await readCreatorVersion());
 			return 0;
 		}
-		const options = services.interactive ?? (stdin.isTTY && stdout.isTTY) ? await promptForOptions(parsed) : nonInteractiveOptions(parsed);
-		printResult(await (services.create ?? createProject)({
-			displayName: options.displayName,
-			install: options.install,
-			packageId: options.packageId,
-			targetDirectory: options.targetDirectory
-		}), log);
+		const interactive = services.interactive ?? (stdin.isTTY && stdout.isTTY);
+		const options = interactive ? await promptForOptions(parsed) : nonInteractiveOptions(parsed);
+		const generate = services.create ?? createProject;
+		const progress = interactive && options.install ? startInstallProgress() : void 0;
+		let result;
+		try {
+			result = await generate({
+				displayName: options.displayName,
+				install: options.install,
+				packageId: options.packageId,
+				...progress === void 0 ? {} : { silentInstall: true },
+				targetDirectory: options.targetDirectory
+			});
+		} catch (error) {
+			progress?.fail();
+			throw error;
+		}
+		progress?.succeed();
+		printResult(result, log, interactive);
 		return 0;
 	} catch (error) {
 		if (error instanceof PromptCancelledError) return 0;
@@ -292,7 +305,7 @@ function parseArgs(args) {
 	};
 }
 async function promptForOptions(options) {
-	prompts.intro("Jilatax · Android-first Lynx application");
+	printWelcome(await readCreatorVersion());
 	const targetDirectory = options.targetDirectory ?? unwrapPrompt(await prompts.text({
 		message: "Where should the project be created?",
 		placeholder: "./my-jilatax-app",
@@ -305,17 +318,7 @@ async function promptForOptions(options) {
 		}
 	}));
 	const projectName = normalizeProjectNameFromDirectory(targetDirectory);
-	const displayName = options.displayName ?? unwrapPrompt(await prompts.text({
-		initialValue: titleCase(projectName),
-		message: "Application name",
-		validate(value) {
-			try {
-				normalizeDisplayName(value ?? "");
-			} catch (error) {
-				return validationMessage(error);
-			}
-		}
-	}));
+	const displayName = options.displayName ?? titleCase(projectName);
 	const packageId = options.packageId ?? unwrapPrompt(await prompts.text({
 		initialValue: defaultPackageId(projectName),
 		message: "Android application ID",
@@ -328,7 +331,7 @@ async function promptForOptions(options) {
 		}
 	}));
 	const install = options.install ?? unwrapPrompt(await prompts.confirm({
-		initialValue: true,
+		initialValue: false,
 		message: "Install dependencies with Bun?"
 	}));
 	return {
@@ -374,16 +377,92 @@ function readInlineValue(argument, option) {
 function titleCase(value) {
 	return value.split(/[-_.\s]+/u).filter(Boolean).map((part) => `${part[0]?.toUpperCase() ?? ""}${part.slice(1)}`).join(" ");
 }
-function printResult(result, log) {
-	const installStep = result.installed ? "" : "  bun install\n";
-	log(`Created ${result.displayName} in ${result.projectDirectory}.
-
-Next steps:
-  cd ${JSON.stringify(result.projectDirectory)}
-${installStep}  bun run run:android
-
-Release bundle:
-  bun run create:aab`);
+function printWelcome(version) {
+	const reset = "\x1B[0m";
+	const cyan = "\x1B[36m";
+	console.log(`${`${cyan}◢▀▀▀   ▀▀▀◣${reset}\n${cyan}  ◉     ◉${reset}\n${cyan}    ╲▽╱${reset}`}  ${cyan}Jilatax:${reset}\n         Welcome to ${` jilatax ${reset}`} ${cyan}v${version}${reset}!\n`);
+}
+function startInstallProgress() {
+	const reset = "\x1B[0m";
+	const cyan = "\x1B[36m";
+	const dim = "\x1B[2m";
+	const green = "\x1B[32m";
+	const frames = [
+		[
+			45,
+			105,
+			44,
+			46
+		],
+		[
+			105,
+			44,
+			46,
+			45
+		],
+		[
+			44,
+			46,
+			45,
+			105
+		],
+		[
+			46,
+			45,
+			105,
+			44
+		]
+	];
+	let frameIndex = 0;
+	const renderBar = () => {
+		const colors = frames[frameIndex % frames.length] ?? frames[0];
+		frameIndex += 1;
+		return `${colors.map((color) => `\u001B[${color}m  `).join("")}${reset}`;
+	};
+	const renderTitle = () => `${renderBar()}  Project initializing...`;
+	stdout.write(`\u001B[?25l${renderTitle()}\n         ${cyan}▸ Installing dependencies with Bun...${reset}\u001B[1A\r`);
+	const timer = setInterval(() => {
+		stdout.write(`\u001B[2K${renderTitle()}\r`);
+	}, 120);
+	const finish = (title, detail) => {
+		clearInterval(timer);
+		stdout.write(`\u001B[2K\r\u001B[1B\r\u001B[2K\u001B[1A\r${title}\n${detail}\n\u001B[?25h`);
+	};
+	return {
+		fail() {
+			finish(`${cyan}▲${reset} Project initialization failed.`, "");
+		},
+		succeed() {
+			finish(`${green}✓ Project initialized!${reset}`, `  ${dim}▪ Dependencies installed${reset}\n`);
+		}
+	};
+}
+function printResult(result, log, interactive) {
+	const message = [
+		"🛠️ Next steps:",
+		`  cd ${formatProjectDirectory(result.projectDirectory)}`,
+		...result.installed ? [] : ["  bun install"],
+		"  bun run dev",
+		"",
+		"🤖 Android:",
+		"  bun run run:android",
+		"  bun run create:aab"
+	].join("\n");
+	const farewell = `Good luck out there, ${result.projectName}! 🎉`;
+	if (interactive) {
+		prompts.note(message, "Result");
+		prompts.outro(farewell);
+		return;
+	}
+	log(`${message}\n\n${farewell}`);
+}
+function formatProjectDirectory(projectDirectory) {
+	const relativeDirectory = path.relative(process.cwd(), projectDirectory);
+	const cwdPath = relativeDirectory.length === 0 ? "." : relativeDirectory.startsWith("..") || path.isAbsolute(relativeDirectory) ? relativeDirectory : `.${path.sep}${relativeDirectory}`;
+	const homeRelative = path.relative(homedir(), projectDirectory);
+	const homePath = homeRelative.length === 0 ? "~" : homeRelative.startsWith("..") || path.isAbsolute(homeRelative) ? void 0 : `~/${homeRelative.split(path.sep).join("/")}`;
+	const shortestPath = homePath !== void 0 && homePath.length < cwdPath.length ? homePath : cwdPath;
+	return /\s/u.test(shortestPath) ? JSON.stringify(shortestPath) : shortestPath;
 }
 async function readCreatorVersion() {
 	const packageJson = JSON.parse(await readFile(new URL("../package.json", import.meta.url), "utf8"));

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_cli = require("./cli-6qr3BMqu.cjs");
+const require_cli = require("./cli-Bh9_Txyy.cjs");
 exports.createHelpText = require_cli.createHelpText;
 exports.createProject = require_cli.createProject;
 exports.defaultPackageId = require_cli.defaultPackageId;

package/dist/index.d.cts

@@ -4,6 +4,7 @@ interface CreateProjectOptions {
   readonly install?: boolean;
   readonly installer?: ProjectInstaller;
   readonly packageId?: string;
+  readonly silentInstall?: boolean;
   readonly targetDirectory: string;
 }
 interface CreateProjectResult {

package/dist/index.d.ts

@@ -4,6 +4,7 @@ interface CreateProjectOptions {
   readonly install?: boolean;
   readonly installer?: ProjectInstaller;
   readonly packageId?: string;
+  readonly silentInstall?: boolean;
   readonly targetDirectory: string;
 }
 interface CreateProjectResult {

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as normalizeDisplayName, i as defaultPackageId, n as runCreateCli, o as normalizeProjectName, r as createProject, s as validatePackageId, t as createHelpText } from "./cli-CrpTfN81.js";
+import { a as normalizeDisplayName, i as defaultPackageId, n as runCreateCli, o as normalizeProjectName, r as createProject, s as validatePackageId, t as createHelpText } from "./cli-BqzdpCyn.js";
 export { createHelpText, createProject, defaultPackageId, normalizeDisplayName, normalizeProjectName, runCreateCli, validatePackageId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jilatax",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "packageManager": "bun@1.3.4",
   "description": "Create an Android-first Jilatax application for Lynx and Rspeedy.",
   "type": "module",

package/template/README.md.tmpl

@@ -2,20 +2,21 @@
 
 Android-first Lynx application created with Jilatax.
 
-## Development
+## Development (QR)
 
 ```bash
-bun install
-bun run run:android
+bun i
+bun run dev
 ```
 
 The Android command starts Rspeedy, builds and installs the debug APK, verifies
-the ADB reverse tunnel, and launches the app once.
+the ADB reverse tunnel, and launches the app once. The generated APK is located
+at `android/app/build/outputs/apk/debug/app-debug.apk`.
 
-To run only the Lynx development server:
+To run only the Lynx development APK (Real Mobile):
 
 ```bash
-bun run dev
+bun run run:android
 ```
 
 When the build is ready, scan the printed QR code with the Lynx application on
@@ -33,6 +34,8 @@ Play Store release. Never commit signing credentials.
 Application metadata lives in `app.json`. Android is the only supported native
 platform in this phase.
 
-Default launcher and splash artwork lives in `assets/`. Update the image paths,
-background colors, or splash width in `app.json`; Jilatax synchronizes those
-resources before each Android build.
+Default launcher and splash artwork lives in `public/assets/`. Additional local
+fonts can be stored in `public/fonts/`; the included JilataX font is applied to
+the `LYNX TO ANDROID` brand caption. Update the image paths, background colors,
+or splash width in `app.json`; Jilatax synchronizes those resources before each
+Android build.

package/template/src/components/ui/Brand.tsx

@@ -1,4 +1,4 @@
-import jilataxIcon from '../../../assets/jilatax-icon.png';
+import jilataxIcon from '../../../public/assets/jilatax-icon.png';
 
 interface BrandProps {
   compact?: boolean;
@@ -7,7 +7,7 @@ interface BrandProps {
 export function Brand({ compact = false }: BrandProps) {
   return (
     <view className={`brand${compact ? ' brand--compact' : ''}`}>
-      <view className={`brand__icon-wrap${compact ? ' brand__icon-wrap--compact' : ''}`}>
+      <view className="brand__icon-wrap">
         <image className="brand__icon" mode="aspectFit" src={jilataxIcon} />
       </view>
       <view className="brand__copy">

package/template/src/styles/global.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: JilataX;
+  src: url('../../public/fonts/JilataX.otf');
+}
+
 :root {
   background-color: #f3f7f5;
   color: #10241d;
@@ -36,17 +41,11 @@
 .brand__icon-wrap {
   align-items: center;
   background-color: #e3eee9;
-  border-radius: 18px;
+  border-radius: 15px;
   display: flex;
-  height: 58px;
+  height: 48px;
   justify-content: center;
   overflow: hidden;
-  width: 58px;
-}
-
-.brand__icon-wrap--compact {
-  border-radius: 15px;
-  height: 48px;
   width: 48px;
 }
 
@@ -71,8 +70,8 @@
 
 .brand__caption {
   color: #688078;
+  font-family: JilataX;
   font-size: 9px;
-  font-weight: 700;
   letter-spacing: 1.5px;
   line-height: 14px;
   margin-top: 2px;