wensity 0.1.3 → 0.1.5

package/dist/index.js

@@ -6,7 +6,7 @@ import { dirname as dirname5, join as join6 } from "path";
 
 // src/constants.ts
 var CLI_NAME = "wensity";
-var CLI_VERSION = "0.1.3";
+var CLI_VERSION = "0.1.5";
 var CONFIG_FILE_NAME = "wensity.json";
 var DEFAULT_API_ORIGIN = "https://ui.wensity.com";
 var DEFAULT_REGISTRY_PATH = "/api/registry";
@@ -396,6 +396,177 @@ function requiredHome(env) {
   throw new CliError("HOME is not set, so the CLI cannot locate ~/.config/wensity.");
 }
 
+// src/output.ts
+import boxen from "boxen";
+import Table from "cli-table3";
+import ora from "ora";
+import pc from "picocolors";
+var BRAND_RED = "#cd1c18";
+var PRICING_BLUE = "#2563eb";
+var LOGO = [
+  "\u2588\u2588\u2557    \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557",
+  "\u2588\u2588\u2551    \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D",
+  "\u2588\u2588\u2551 \u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551    \u255A\u2588\u2588\u2588\u2588\u2554\u255D ",
+  "\u2588\u2588\u2551\u2588\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D  \u2588\u2588\u2551\u255A\u2588\u2588\u2557\u2588\u2588\u2551\u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551     \u255A\u2588\u2588\u2554\u255D  ",
+  "\u255A\u2588\u2588\u2588\u2554\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551      \u2588\u2588\u2551   ",
+  " \u255A\u2550\u2550\u255D\u255A\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D   \u255A\u2550\u255D      \u255A\u2550\u255D   "
+];
+function print(message = "") {
+  process.stdout.write(`${message}
+`);
+}
+function warn(message) {
+  process.stderr.write(`${pc.yellow("Warning:")} ${message}
+`);
+}
+function printJson(value) {
+  print(JSON.stringify(value, null, 2));
+}
+function formatList(items) {
+  return items.map((item) => `  ${pc.dim("\u2022")} ${item}`).join("\n");
+}
+function brandRed(message) {
+  return color(message, BRAND_RED);
+}
+function pricingBlue(message) {
+  return color(message, PRICING_BLUE);
+}
+function brandBanner(subtitle) {
+  const lines = [
+    "",
+    ...LOGO.map((line) => brandRed(centerLine(line))),
+    pc.bold(centerLine("Wensity CLI"))
+  ];
+  if (subtitle) lines.push(pc.dim(centerLine(subtitle)));
+  return lines.join("\n");
+}
+function printBrand(subtitle) {
+  print(brandBanner(subtitle));
+}
+function printTitle(title, subtitle) {
+  print(`${brandRed("\u25C6")} ${pc.bold(title)}${subtitle ? ` ${pc.dim(subtitle)}` : ""}`);
+}
+function success(message) {
+  return `${pc.green("\u2713")} ${message}`;
+}
+function failure(message) {
+  return `${brandRed("\u2715")} ${message}`;
+}
+function action(message) {
+  return `${brandRed("\u25C6")} ${message}`;
+}
+function badge(label, tone = "muted") {
+  const text = ` ${label.toUpperCase()} `;
+  if (tone === "pro") return bgBrandRed(pc.white(pc.bold(text)));
+  if (tone === "free") return pc.bgGreen(pc.black(pc.bold(text)));
+  return pc.inverse(text);
+}
+function panel(title, body) {
+  const content = Array.isArray(body) ? body.join("\n") : body;
+  return boxen(content, {
+    title: brandRed(pc.bold(title)),
+    titleAlignment: "left",
+    borderColor: "red",
+    borderStyle: "round",
+    padding: 1,
+    margin: { top: 1, bottom: 0 }
+  });
+}
+function nextSteps(steps) {
+  return panel(
+    "Next steps",
+    steps.map((step) => `${brandRed("\u203A")} ${pc.bold(step)}`)
+  );
+}
+function table(head, rows) {
+  const output = new Table({
+    head: head.map((item) => brandRed(pc.bold(item))),
+    chars: {
+      top: "\u2500",
+      "top-mid": "\u252C",
+      "top-left": "\u256D",
+      "top-right": "\u256E",
+      bottom: "\u2500",
+      "bottom-mid": "\u2534",
+      "bottom-left": "\u2570",
+      "bottom-right": "\u256F",
+      left: "\u2502",
+      "left-mid": "\u251C",
+      mid: "\u2500",
+      "mid-mid": "\u253C",
+      right: "\u2502",
+      "right-mid": "\u2524",
+      middle: "\u2502"
+    },
+    style: {
+      border: [],
+      head: []
+    },
+    wordWrap: true
+  });
+  output.push(...rows);
+  return output.toString();
+}
+function startSpinner(text) {
+  return ora({
+    text,
+    color: "red",
+    spinner: "dots",
+    isEnabled: process.stderr.isTTY && process.env.CI !== "true"
+  }).start();
+}
+async function withSpinner(text, task, successText = text) {
+  const spinner = startSpinner(text);
+  try {
+    const result = await task();
+    spinner.succeed(successText);
+    return result;
+  } catch (error) {
+    spinner.fail(text);
+    throw error;
+  }
+}
+function formatCliError(message) {
+  return `${failure(message)}
+
+${pc.dim("Need help?")} ${pricingBlue("https://ui.wensity.com/docs")}`;
+}
+function formatProRequiredError(resourceName, resourceType) {
+  return [
+    `${resourceName} is a Pro ${resourceType}.`,
+    brandRed("Create an API token from the Wensity dashboard, then run:"),
+    `  ${brandRed("npx wensity login --token <token>")}`,
+    `Pricing: ${pricingBlue("https://ui.wensity.com/pricing")}`
+  ].join("\n");
+}
+function color(message, hex) {
+  if (!shouldColor()) return message;
+  const [red, green, blue] = hexToRgb(hex);
+  return `\x1B[38;2;${red};${green};${blue}m${message}\x1B[39m`;
+}
+function bgBrandRed(message) {
+  if (!shouldColor()) return message;
+  const [red, green, blue] = hexToRgb(BRAND_RED);
+  return `\x1B[48;2;${red};${green};${blue}m${message}\x1B[49m`;
+}
+function shouldColor() {
+  if (process.env.FORCE_COLOR && process.env.FORCE_COLOR !== "0") return true;
+  return process.env.NO_COLOR === void 0 && process.env.FORCE_COLOR !== "0";
+}
+function hexToRgb(hex) {
+  const value = hex.replace("#", "");
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16)
+  ];
+}
+function centerLine(line) {
+  const columns = Math.min(process.stdout.columns || 80, 100);
+  const padding = Math.max(0, Math.floor((columns - line.length) / 2));
+  return `${" ".repeat(padding)}${line}`;
+}
+
 // src/http.ts
 async function requestJson(url, options = {}) {
   const headers = new Headers(options.headers);
@@ -438,7 +609,7 @@ function formatErrorMessage(payload) {
   if (code === "pro_license_required") {
     const base = message ?? "This component requires Wensity Pro.";
     return `${base}
-Upgrade here: https://ui.wensity.com/pricing`;
+Upgrade here: ${pricingBlue("https://ui.wensity.com/pricing")}`;
   }
   return message;
 }
@@ -447,28 +618,6 @@ Upgrade here: https://ui.wensity.com/pricing`;
 import { existsSync as existsSync2, readFileSync } from "fs";
 import { spawnSync } from "child_process";
 import { join as join4 } from "path";
-
-// src/output.ts
-function print(message = "") {
-  process.stdout.write(`${message}
-`);
-}
-function warn(message) {
-  process.stderr.write(`Warning: ${message}
-`);
-}
-function info(message) {
-  process.stderr.write(`${message}
-`);
-}
-function printJson(value) {
-  print(JSON.stringify(value, null, 2));
-}
-function formatList(items) {
-  return items.map((item) => `  - ${item}`).join("\n");
-}
-
-// src/package-manager.ts
 function detectPackageManager(projectRoot) {
   if (existsSync2(join4(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
   if (existsSync2(join4(projectRoot, "bun.lockb")) || existsSync2(join4(projectRoot, "bun.lock"))) return "bun";
@@ -819,7 +968,7 @@ async function run(context) {
     return;
   }
   if (hasFlag(parsed, "help") || parsed.positionals.length === 0) {
-    print(HELP_TEXT.trimEnd());
+    print(formatHelp());
     return;
   }
   const [command, ...positionals] = parsed.positionals;
@@ -865,9 +1014,10 @@ async function initCommand(context, parsed) {
   const utilityRelativePath = toPosixPath(config.utils.endsWith(".ts") ? config.utils : `${config.utils}.ts`);
   const dependencies = ["clsx", "tailwind-merge"];
   if (dryRun) {
-    print("Would write:");
+    printTitle("Project initialization preview");
+    print(action("Would write:"));
     print(formatList([CONFIG_FILE_NAME, utilityRelativePath]));
-    if (install) print(`Would install: ${dependencies.join(" ")}`);
+    if (install) print(action(`Would install: ${dependencies.join(" ")}`));
     return;
   }
   await writeConfigFile(configPath, config, force);
@@ -877,7 +1027,17 @@ async function initCommand(context, parsed) {
   if (install) {
     runInstall(context.cwd, missingDependencies(context.cwd, dependencies));
   }
-  print("Created wensity.json and local Wensity helper files.");
+  printTitle("Project initialized");
+  print(panel("Created", [
+    success(CONFIG_FILE_NAME),
+    success(utilityRelativePath),
+    success(`registry: ${apiUrl}`)
+  ]));
+  print(nextSteps([
+    "Browse available components: npx wensity list",
+    "Browse premium blocks: npx wensity list --type block",
+    "Install your chosen slug: npx wensity add <component-slug>"
+  ]));
 }
 async function loginCommand(context, parsed) {
   const apiUrl = getStringOption(parsed, "api-url") ?? context.env.WENSITY_API_URL ?? DEFAULT_API_ORIGIN;
@@ -896,12 +1056,23 @@ async function loginCommand(context, parsed) {
     plan: whoami.plan,
     savedAt: (/* @__PURE__ */ new Date()).toISOString()
   });
-  print(`Logged in as ${whoami.user.email}.`);
-  print(`Credentials saved to ${path}.`);
+  printBrand("API token verified");
+  print(formatAccountPanel(whoami, path));
+  print(nextSteps(whoami.plan?.tier === "pro" ? [
+    "Browse Pro components: npx wensity list",
+    "Browse Pro blocks: npx wensity list --type block",
+    "Install a component: npx wensity add <component-slug>",
+    "Install a block: npx wensity add <block-slug> --type block"
+  ] : [
+    "Browse free components: npx wensity list",
+    "Install any Free slug from the table: npx wensity add <slug>",
+    `Upgrade to unlock Pro components and blocks: ${pricingBlue("https://ui.wensity.com/pricing")}`
+  ]));
 }
 async function logoutCommand(context) {
   const removed = await deleteCredentials(context.env);
-  print(removed ? "Logged out of Wensity." : "No Wensity credentials were stored.");
+  printTitle("Session");
+  print(removed ? success("Logged out of Wensity.") : action("No Wensity credentials were stored."));
 }
 async function whoamiCommand(context, parsed) {
   const credentials = await requireCredentials(context.env);
@@ -912,10 +1083,8 @@ async function whoamiCommand(context, parsed) {
     printJson({ ...whoami, apiBaseUrl: credentials.apiBaseUrl, credentialsPath: credentialsPath(context.env) });
     return;
   }
-  print(`Signed in as ${whoami.user.email}`);
-  if (whoami.plan?.tier) {
-    print(`Plan: ${whoami.plan.tier}${whoami.plan.status ? ` (${whoami.plan.status})` : ""}`);
-  }
+  printBrand("Account");
+  print(formatAccountPanel(whoami, credentialsPath(context.env)));
 }
 async function listCommand(context, parsed) {
   const resourceType = getResourceType(parsed);
@@ -930,11 +1099,17 @@ async function listCommand(context, parsed) {
       return;
     }
     if (response2.blocks.length === 0) {
-      print("No Wensity blocks found.");
+      printBrand("Blocks");
+      print(action("No Wensity blocks found."));
       return;
     }
-    print("Available Wensity blocks:");
+    printBrand("Premium blocks");
     print(formatBlockGroup(response2.blocks));
+    print(nextSteps([
+      brandRed("Create an API token in the dashboard if you have Pro"),
+      brandRed("Save the token: npx wensity login --token <token>"),
+      "Install your chosen block: npx wensity add <block-slug> --type block"
+    ]));
     return;
   }
   const response = await requestJson(registry);
@@ -943,32 +1118,39 @@ async function listCommand(context, parsed) {
     return;
   }
   if (response.components.length === 0) {
-    print("No registry components found.");
+    printBrand("Components");
+    print(action("No registry components found."));
     return;
   }
-  print("Available Wensity components:");
+  printBrand("Components");
   print(formatComponentGroup("Free", response.components.filter((component) => component.access !== "pro")));
   print(formatComponentGroup("Pro", response.components.filter((component) => component.access === "pro")));
+  print(nextSteps([
+    "Choose any Free slug above: npx wensity add <component-slug>",
+    brandRed("For Pro slugs, save an API token: npx wensity login --token <token>"),
+    "Browse layout blocks: npx wensity list --type block"
+  ]));
 }
 function formatComponentGroup(label, components) {
-  const rows = components.map((component) => {
-    const category = component.category ? ` ${component.category}` : "";
-    return `  ${component.slug.padEnd(32)}${category}`;
-  });
+  const tone = label.toLowerCase() === "pro" ? "pro" : "free";
+  const rows = components.map((component) => [
+    component.slug,
+    component.category ?? "uncategorized",
+    badge(label, tone)
+  ]);
   return rows.length > 0 ? `
-${label}
-${rows.join("\n")}` : `
-${label}
-  No components`;
+${badge(label, tone)}
+${table(["Slug", "Category", "Access"], rows)}` : `
+${badge(label, tone)}
+${action("No components")}`;
 }
 function formatBlockGroup(blocks) {
-  const rows = blocks.map((block) => {
-    const category = block.category ? ` ${block.category}` : "";
-    return `  ${block.slug.padEnd(32)}${category}`;
-  });
-  return rows.length > 0 ? `
-Pro
-${rows.join("\n")}` : "\nPro\n  No blocks";
+  const rows = blocks.map((block) => [
+    block.slug,
+    block.category ?? "uncategorized",
+    badge("Pro", "pro")
+  ]);
+  return rows.length > 0 ? `${table(["Slug", "Category", "Access"], rows)}` : action("No blocks");
 }
 async function addCommand(context, parsed, positionals, updateMode) {
   const resourceType = getResourceType(parsed);
@@ -994,54 +1176,86 @@ Usage: wensity ${updateMode ? "update" : "add"} <slug>${resourceType === "block"
   const plannedFiles = summarizeFiles(loaded.projectRoot, prepared.files);
   const missing = missingDependencies(loaded.projectRoot, prepared.dependencies);
   if (dryRun) {
-    print("Would write:");
+    printTitle(updateMode ? "Update preview" : "Install preview");
+    print(action("Would write:"));
     print(formatList(plannedFiles));
-    if (install && missing.length > 0) print(`Would install: ${missing.join(" ")}`);
+    if (install && missing.length > 0) print(action(`Would install: ${missing.join(" ")}`));
     return;
   }
   await writePlannedFiles(prepared.files);
   if (install) {
     runInstall(loaded.projectRoot, missing);
   }
-  print(`${updateMode ? "Updated" : "Added"} ${payload.name}.`);
-  print("Files written:");
-  print(formatList(plannedFiles));
+  printTitle(updateMode ? "Component updated" : "Component installed");
+  print(panel(payload.name, [
+    success(`${updateMode ? "Updated" : "Added"} ${payload.slug}`),
+    ...plannedFiles.map((file) => success(file))
+  ]));
   if (!install && missing.length > 0) {
     warn(`Dependencies were not installed: ${missing.join(" ")}`);
+    print(nextSteps([
+      `Install skipped dependencies: npm install ${missing.join(" ")}`,
+      "Run without --no-install next time to let Wensity install them automatically"
+    ]));
+    return;
   }
+  print(nextSteps([
+    "Import the installed file from your Wensity components folder",
+    resourceType === "block" ? "Customize the block copy, colors, and sections" : "Customize props and styling for your app"
+  ]));
 }
 async function fetchComponentPayload(input) {
-  info(`Fetching ${input.slug}...`);
-  const metadata = await requestJson(registryMetadataUrl(input.registry, input.slug));
+  const metadata = await withSpinner(
+    `Finding ${input.slug}`,
+    () => requestJson(registryMetadataUrl(input.registry, input.slug)),
+    `Found ${input.slug}`
+  );
   if (input.credentials) {
+    const credentials = input.credentials;
     const cliEndpoint = metadata.endpoints?.cli ?? `/api/cli/${input.slug}`;
-    const endpoint2 = cliEndpoint.startsWith("http") ? cliEndpoint : joinUrl(input.credentials.apiBaseUrl, cliEndpoint);
+    const endpoint2 = cliEndpoint.startsWith("http") ? cliEndpoint : joinUrl(credentials.apiBaseUrl, cliEndpoint);
     try {
-      return await requestJson(endpoint2, { token: input.credentials.token });
+      return await withSpinner(
+        `Downloading ${metadata.name}`,
+        () => requestJson(endpoint2, { token: credentials.token }),
+        `Downloaded ${metadata.name}`
+      );
     } catch (error) {
       if (metadata.access === "pro" || !isAuthFailure(error)) throw error;
       warn("Saved Wensity credentials were rejected; falling back to the public free registry payload.");
     }
   }
   if (metadata.access === "pro") {
-    throw new CliError(`${metadata.name} is a premium component. Run wensity login, then try again.`);
+    throw new CliError(formatProRequiredError(metadata.name, "component"));
   }
   const publicSourceEndpoint = metadata.endpoints?.registry ?? registrySlugUrl(input.registry, input.slug);
   const endpoint = publicSourceEndpoint.startsWith("http") ? publicSourceEndpoint : joinUrl(registryOrigin(input.registry), publicSourceEndpoint);
-  return requestJson(endpoint);
+  return withSpinner(
+    `Downloading ${metadata.name}`,
+    () => requestJson(endpoint),
+    `Downloaded ${metadata.name}`
+  );
 }
 function isAuthFailure(error) {
   return error instanceof CliError && /^(401|403)\b/.test(error.message);
 }
 async function fetchBlockPayload(input) {
-  info(`Fetching ${input.slug}...`);
-  const metadata = await requestJson(registryMetadataUrl(input.registry, input.slug));
+  const metadata = await withSpinner(
+    `Finding ${input.slug}`,
+    () => requestJson(registryMetadataUrl(input.registry, input.slug)),
+    `Found ${input.slug}`
+  );
   if (!input.credentials) {
-    throw new CliError(`${metadata.name} is a premium block. Run wensity login, then try again.`);
+    throw new CliError(formatProRequiredError(metadata.name, "block"));
   }
+  const credentials = input.credentials;
   const cliEndpoint = metadata.endpoints?.cli ?? `/api/cli/blocks/${input.slug}`;
-  const endpoint = cliEndpoint.startsWith("http") ? cliEndpoint : joinUrl(input.credentials.apiBaseUrl, cliEndpoint);
-  return requestJson(endpoint, { token: input.credentials.token });
+  const endpoint = cliEndpoint.startsWith("http") ? cliEndpoint : joinUrl(credentials.apiBaseUrl, cliEndpoint);
+  return withSpinner(
+    `Downloading ${metadata.name}`,
+    () => requestJson(endpoint, { token: credentials.token }),
+    `Downloaded ${metadata.name}`
+  );
 }
 function getResourceType(parsed) {
   const value = getStringOption(parsed, "type") ?? "component";
@@ -1056,7 +1270,7 @@ function registryUrlForType(componentRegistry, resourceType, registryOverride) {
 async function requireCredentials(env) {
   const credentials = await readCredentials(env);
   if (!credentials) {
-    throw new CliError("Not logged in. Run wensity login with an API token from the Wensity dashboard.");
+    throw new CliError(`Not logged in. ${brandRed("Run wensity login with an API token from the Wensity dashboard.")}`);
   }
   return credentials;
 }
@@ -1072,6 +1286,32 @@ function registryOrigin(registry) {
   const url = new URL(registry);
   return `${url.protocol}//${url.host}`;
 }
+function formatHelp() {
+  return [
+    brandBanner("Own your component source."),
+    "",
+    HELP_TEXT.trimEnd(),
+    "",
+    nextSteps([
+      "npx wensity init",
+      "npx wensity list",
+      "npx wensity add <component-slug>"
+    ])
+  ].join("\n");
+}
+function formatAccountPanel(whoami, savedPath) {
+  const isPro = whoami.plan?.tier === "pro";
+  const lines = [
+    `${badge(isPro ? "Pro" : "Free", isPro ? "pro" : "free")} ${whoami.user.email}`,
+    whoami.plan?.status ? `Status: ${whoami.plan.status}` : "Status: active",
+    `Credentials: ${savedPath}`,
+    "",
+    isPro ? success("Pro components unlocked") : success("Free components unlocked"),
+    isPro ? success("Pro blocks unlocked") : action("Pro blocks locked until upgrade"),
+    isPro ? success("API token verified") : action("Upgrade for premium source access")
+  ];
+  return panel(isPro ? "Wensity Pro" : "Wensity Free", lines);
+}
 async function writeTextFile(path, content) {
   await mkdir4(dirname5(path), { recursive: true });
   await writeFile4(path, content, "utf8");
@@ -1084,7 +1324,7 @@ run({
   env: process.env
 }).catch((error) => {
   if (error instanceof CliError) {
-    process.stderr.write(`${error.message}
+    process.stderr.write(`${formatCliError(error.message)}
 `);
     process.exitCode = error.exitCode;
     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wensity",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Wensity component registry CLI",
   "type": "module",
   "bin": {
@@ -28,5 +28,11 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "boxen": "^8.0.1",
+    "cli-table3": "^0.6.5",
+    "ora": "^9.4.0",
+    "picocolors": "^1.1.1"
   }
 }