create-better-t-stack 3.11.0-bun-compile-opentui.ffee16a → 3.11.0-bun-compile-opentui.2583611

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "3.11.0-bun-compile-opentui.ffee16a",
+  "version": "3.11.0-bun-compile-opentui.2583611",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "keywords": [
     "better-auth",
@@ -68,7 +68,7 @@
     "prepublishOnly": "echo 'Build binaries separately before publishing'"
   },
   "dependencies": {
-    "@better-t-stack/types": "3.11.0-bun-compile-opentui.ffee16a",
+    "@better-t-stack/types": "3.11.0-bun-compile-opentui.2583611",
     "@clack/prompts": "^1.0.0-alpha.8",
     "@opentui/core": "^0.1.62",
     "@opentui/react": "^0.1.62",
@@ -93,11 +93,11 @@
     "typescript": "^5.9.3"
   },
   "optionalDependencies": {
-    "@better-t-stack/cli-darwin-arm64": "3.11.0-bun-compile-opentui.ffee16a",
-    "@better-t-stack/cli-darwin-x64": "3.11.0-bun-compile-opentui.ffee16a",
-    "@better-t-stack/cli-linux-arm64": "3.11.0-bun-compile-opentui.ffee16a",
-    "@better-t-stack/cli-linux-x64": "3.11.0-bun-compile-opentui.ffee16a",
-    "@better-t-stack/cli-windows-x64": "3.11.0-bun-compile-opentui.ffee16a",
+    "@better-t-stack/cli-darwin-arm64": "3.11.0-bun-compile-opentui.2583611",
+    "@better-t-stack/cli-darwin-x64": "3.11.0-bun-compile-opentui.2583611",
+    "@better-t-stack/cli-linux-arm64": "3.11.0-bun-compile-opentui.2583611",
+    "@better-t-stack/cli-linux-x64": "3.11.0-bun-compile-opentui.2583611",
+    "@better-t-stack/cli-windows-x64": "3.11.0-bun-compile-opentui.2583611",
     "@opentui/core-darwin-arm64": "0.1.63",
     "@opentui/core-darwin-x64": "0.1.63",
     "@opentui/core-linux-arm64": "0.1.63",

package/src/tui/app.tsx

@@ -559,6 +559,86 @@ export async function renderTui(options: TuiOptions): Promise<void> {
   });
 }
 
+// Custom ASCII art logo - split into two parts for responsive layout
+const LOGO_BETTER = [
+  " ██████╗ ███████╗████████╗████████╗███████╗██████╗ ",
+  " ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗",
+  " ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝",
+  " ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗",
+  " ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║",
+  " ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝",
+];
+
+const LOGO_T_STACK = [
+  " ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗",
+  " ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝",
+  "    ██║       ███████╗   ██║   ███████║██║     █████╔╝ ",
+  "    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗ ",
+  "    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗",
+  "    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝",
+];
+
+// Catppuccin-inspired gradient colors (top to bottom)
+const GRADIENT_COLORS = [
+  "#F5C2E7", // pink
+  "#CBA6F7", // mauve
+  "#B4BEFE", // lavender
+  "#89DCEB", // sky
+  "#94E2D5", // teal
+  "#A6E3A1", // green
+];
+
+// Compact version for very narrow terminals
+const LOGO_TEXT = "Better T Stack";
+
+function Logo() {
+  const { width } = useTerminalDimensions();
+
+  // Full width: show both parts side by side (needs ~108 cols)
+  if (width >= 110) {
+    return (
+      <box style={{ flexDirection: "column" }}>
+        {LOGO_BETTER.map((line, i) => (
+          <text key={i}>
+            <span fg={GRADIENT_COLORS[i]}>{line}</span>
+            <span fg={GRADIENT_COLORS[i]}> </span>
+            <span fg={GRADIENT_COLORS[i]}>{LOGO_T_STACK[i]}</span>
+          </text>
+        ))}
+      </box>
+    );
+  }
+
+  // Medium width: show stacked vertically (needs ~58 cols)
+  if (width >= 58) {
+    return (
+      <box style={{ flexDirection: "column" }}>
+        {/* BETTER section */}
+        {LOGO_BETTER.map((line, i) => (
+          <text key={`b${i}`}>
+            <span fg={GRADIENT_COLORS[i]}>{line}</span>
+          </text>
+        ))}
+        {/* Empty line for spacing */}
+        <text> </text>
+        {/* T STACK section */}
+        {LOGO_T_STACK.map((line, i) => (
+          <text key={`t${i}`}>
+            <span fg={GRADIENT_COLORS[i]}>{line}</span>
+          </text>
+        ))}
+      </box>
+    );
+  }
+
+  // Narrow: plain text with gradient first color
+  return (
+    <text>
+      <span fg={GRADIENT_COLORS[0]}>{LOGO_TEXT}</span>
+    </text>
+  );
+}
+
 // Spinner component using useEffect interval
 function Spinner(props: { text: string }) {
   const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -732,18 +812,24 @@ function App(props: {
         ? "pnpm run"
         : "bun run";
 
+  // Responsive: hide header on very narrow terminals
+  const showHeader = width >= 50;
+
   return (
     <box style={{ width, height, backgroundColor: theme.bg, flexDirection: "column" }}>
-      <box
-        style={{
-          height: 6,
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: theme.surface,
-        }}
-      >
-        <ascii-font text="Better T Stack" font="block" />
-      </box>
+      {/* Header - hidden on very narrow terminals */}
+      {showHeader && (
+        <box
+          style={{
+            justifyContent: "center",
+            alignItems: "flex-start",
+            // backgroundColor: theme.surface,
+            padding: 1,
+          }}
+        >
+          <Logo />
+        </box>
+      )}
 
       <box
         style={{