create-flow-os 0.0.1-dev.1771667897 → 0.0.1-dev.1771668924

package/bin/index.js

@@ -872,10 +872,107 @@ var useDevTag = argv.includes("--dev");
 var nameArg = argv.find((a3) => !a3.startsWith("--"));
 var DIR = basename(import.meta.dir) === "dist" || basename(import.meta.dir) === "bin" ? join2(import.meta.dir, "..") : import.meta.dir;
 var REPO_ROOT = (process.env.FLOW_FRAMEWORK_ROOT ?? join2(DIR, "..", "..")).replace(/\\/g, "/");
-var aqua = import_picocolors3.default.cyan;
-var teal = (s) => import_picocolors3.default.cyan(s);
-var dim = import_picocolors3.default.dim;
-var subtle = (s) => import_picocolors3.default.dim(import_picocolors3.default.cyan(s));
+var c2 = {
+  brand: (s) => import_picocolors3.default.bold(import_picocolors3.default.cyan(s)),
+  cyan: (s) => import_picocolors3.default.cyan(s),
+  dim: (s) => import_picocolors3.default.dim(s),
+  bold: (s) => import_picocolors3.default.bold(s),
+  muted: (s) => import_picocolors3.default.cyan(s),
+  bright: (s) => import_picocolors3.default.white(s)
+};
+var W2 = 50;
+var ICON = {
+  full: "\u25C9",
+  client: "\u25C6",
+  server: "\u25CF",
+  deps: "\uD83D\uDCE6",
+  rocket: "\u25B6"
+};
+function stripAnsi(s) {
+  return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+function box(lines) {
+  const top = c2.dim("\u256D" + "\u2500".repeat(W2 - 2) + "\u256E");
+  const bottom = c2.dim("\u2570" + "\u2500".repeat(W2 - 2) + "\u256F");
+  const body = lines.map((l2) => {
+    const plain = stripAnsi(l2);
+    const pad = Math.max(0, W2 - 4 - plain.length);
+    return c2.dim("\u2502 ") + l2 + " ".repeat(pad) + c2.dim(" \u2502");
+  }).join(`
+`);
+  return `
+` + top + `
+` + body + `
+` + bottom + `
+`;
+}
+var LOCAL_URL_RE = /https?:\/\/localhost(:\d+)?(?:\/[^\s]*)?/i;
+function flowBanner(url) {
+  const link = c2.brand(url);
+  return [
+    "",
+    c2.cyan("  \u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E"),
+    c2.cyan("  \u2502  ") + c2.bold("Flow OS") + c2.cyan("  is running                        \u2502"),
+    c2.cyan("  \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F"),
+    "",
+    "  Open: " + link,
+    ""
+  ].join(`
+`);
+}
+async function runDevWithBanner(cwd) {
+  const devProc = Bun.spawn(["bun", "run", "dev"], {
+    cwd,
+    stdout: "pipe",
+    stderr: "pipe",
+    stdio: ["inherit", "pipe", "pipe"]
+  });
+  let bannerShown = false;
+  const decoder = new TextDecoder;
+  let outBuf = "";
+  const drain = (stream, isErr) => {
+    const target = isErr ? process.stderr : process.stdout;
+    const reader = stream.getReader();
+    function read() {
+      return reader.read().then(({ done, value }) => {
+        const text = value ? decoder.decode(value, { stream: !done }) : "";
+        if (isErr) {
+          if (text)
+            target.write(text);
+          return done ? undefined : read();
+        }
+        if (text)
+          outBuf += text;
+        const lines = outBuf.split(/\r?\n/);
+        outBuf = done ? "" : lines.pop() ?? "";
+        for (const line of lines) {
+          const urlMatch = line.match(LOCAL_URL_RE);
+          if (!bannerShown && urlMatch) {
+            bannerShown = true;
+            process.stdout.write(flowBanner(urlMatch[0]));
+          }
+          target.write(line + `
+`);
+        }
+        if (done && outBuf) {
+          const urlMatch = outBuf.match(LOCAL_URL_RE);
+          if (!bannerShown && urlMatch) {
+            bannerShown = true;
+            process.stdout.write(flowBanner(urlMatch[0]));
+          }
+          target.write(outBuf);
+        }
+        return done ? undefined : read();
+      });
+    }
+    return read();
+  };
+  await Promise.all([
+    drain(devProc.stdout, false),
+    drain(devProc.stderr, true)
+  ]).catch(() => {});
+  await devProc.exited;
+}
 function optsForProfile(config, profileId) {
   return Object.entries(config.packages).filter(([, e2]) => {
     const inc = e2.includeIn ?? [];
@@ -887,20 +984,24 @@ function optsForProfile(config, profileId) {
   });
 }
 async function main() {
-  const devBadge = useDevTag ? teal(" \xB7 dev") : "";
-  pe(teal("\u25B8 ") + import_picocolors3.default.bold("Flow") + devBadge + `
-` + dim("  Create a new application"));
+  const devBadge = useDevTag ? c2.brand(" \xB7 dev") : "";
+  const introLines = [
+    c2.bold("Flow") + devBadge,
+    "",
+    c2.cyan("We're creating your Flow application.")
+  ];
+  pe(box(introLines));
   const config = await Bun.file(join2(DIR, "config.json")).json();
   const hasDeps = Object.values(config.packages).every((e2) => Array.isArray(e2.deps));
   if (!hasDeps) {
-    he(dim("Run ") + teal("bun run gen") + dim(" from create-flow first."));
+    he(c2.dim("Run ") + c2.brand("bun run gen") + c2.dim(" from create-flow first."));
     process.exit(1);
   }
   const projectName = nameArg?.trim() || (yes ? "my-flow-app" : null);
   let name = projectName;
   if (!name && !yes) {
     const r2 = await ae({
-      message: subtle("Project name"),
+      message: c2.muted("Project name"),
       initialValue: "my-flow-app",
       validate: (v3) => !v3?.trim() ? "Required" : undefined
     });
@@ -918,11 +1019,11 @@ async function main() {
     selected = optsFull.map(([id]) => id);
   } else {
     const choice = await le({
-      message: subtle("Template"),
+      message: c2.muted("Template"),
       options: [
-        { value: "full", label: "Full stack  " + dim("(client + server)") },
-        { value: "client", label: "Client only" },
-        { value: "server", label: "Server only" }
+        { value: "full", label: `${ICON.full}  Full stack  ${c2.dim("(client + server)")}` },
+        { value: "client", label: `${ICON.client}  Client only` },
+        { value: "server", label: `${ICON.server}  Server only` }
       ]
     });
     if (lD(choice))
@@ -938,7 +1039,7 @@ async function main() {
       const optionalIds = optIds.filter((id) => !defaultIds.includes(id));
       if (optionalIds.length > 0) {
         const r2 = await $e({
-          message: subtle("Add-ons"),
+          message: c2.muted("Add-ons"),
           options: optionalIds.map((id) => ({ value: id, label: id })),
           required: false
         });
@@ -956,17 +1057,17 @@ async function main() {
     stat(projectPath).then(() => true).catch(() => false)
   ]);
   if (!profileExists) {
-    he(dim("Profile not found. Run ") + teal("bun run gen") + dim("."));
+    he(c2.dim("Profile not found. Run ") + c2.brand("bun run gen") + c2.dim("."));
     process.exit(1);
   }
   if (pathExists && !force) {
-    he(dim("Folder ") + name + dim(" exists. Use ") + teal("--force") + dim("."));
+    he(c2.dim("Folder ") + name + c2.dim(" exists. Use ") + c2.brand("--force") + c2.dim("."));
     process.exit(1);
   }
   const isDevFromRepoPromise = useDevTag ? findPackageDir(REPO_ROOT, "@flow.os/client").then((d2) => !!d2) : Promise.resolve(false);
   await rm(projectPathNew, { recursive: true, force: true });
   const createSpinner = _2();
-  createSpinner.start(teal("Creating project\u2026"));
+  createSpinner.start(c2.cyan(ICON.rocket + "  Creating project\u2026"));
   await copyWithExclude(profileDir, projectPathNew, ["node_modules", ".git"]);
   for (const id of selected) {
     const pkgDir = join2(DIR, "packages", id);
@@ -974,7 +1075,7 @@ async function main() {
       await copyWithExclude(pkgDir, projectPathNew, []);
     } catch {}
   }
-  createSpinner.stop(teal("Project created"));
+  createSpinner.stop(c2.cyan(ICON.rocket + "  Project created"));
   const extraDeps = {};
   for (const id of selected) {
     const deps = config.packages[id]?.deps;
@@ -1028,10 +1129,10 @@ async function main() {
   }
   if (!noInstall) {
     const s = _2();
-    s.start(teal("Installing dependencies\u2026"));
+    s.start(c2.cyan(ICON.deps + "  Installing dependencies\u2026"));
     const proc = Bun.spawn(["bun", "install"], { cwd: projectPathNew, stdout: "pipe", stderr: "pipe" });
     const code = await proc.exited;
-    s.stop(code === 0 ? teal("Dependencies installed") : "Failed");
+    s.stop(code === 0 ? c2.cyan(ICON.deps + "  Dependencies installed") : "Failed");
     if (code !== 0) {
       const err = await new Response(proc.stderr).text();
       v2.error(err || "bun install exit " + code);
@@ -1044,20 +1145,17 @@ async function main() {
   await rename(projectPathNew, projectPath);
   const startDev = !noStart && !noInstall;
   if (startDev) {
-    ge(teal(`\u25B8 Ready
-`) + dim("  ") + teal(name) + dim(` is ready. Starting dev server\u2026
-`));
-    const devProc = Bun.spawn(["bun", "run", "dev"], {
-      cwd: projectPath,
-      stdio: "inherit"
-    });
-    await devProc.exited;
+    ge(c2.cyan(ICON.rocket + "  Starting dev server\u2026"));
+    await runDevWithBanner(projectPath);
   } else {
-    ge(teal(`\u25B8 Done
-`) + dim(`  Next steps:
-`) + "  " + teal("cd " + name) + `
-` + "  " + teal("bun run dev") + `
-`);
+    const outroLines = [
+      c2.bold("Done"),
+      "",
+      c2.dim("Next steps:"),
+      "  " + c2.brand("cd " + name),
+      "  " + c2.brand("bun run dev")
+    ];
+    ge(box(outroLines));
   }
 }
 main().catch((e2) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-flow-os",
-  "version": "0.0.1-dev.1771667897",
+  "version": "0.0.1-dev.1771668924",
   "type": "module",
   "bin": {
     "create-flow-os": "bin/index.js"