sitevision-cli 0.5.0-beta.0 → 0.6.0-beta.0

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render } from 'ink';
 import { Text, Box } from 'ink';
 import meow from 'meow';
@@ -11,7 +11,8 @@ import { promptYesNo } from './utils/password-prompt.js';
 import { checkForUpdate } from './utils/version-check.js';
 import { isFirstRun, markFirstRunComplete, getLastSeenVersion, setLastSeenVersion, } from './utils/config.js';
 import { WelcomeScreen } from './components/WelcomeScreen.js';
-import { printBranding } from './utils/branding.js';
+import { AnimatedLogo } from './components/AnimatedLogo.js';
+import { printBranding, BIG_LOGO_WIDTH } from './utils/branding.js';
 const pkg = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
 const cli = meow(`
 	Usage
@@ -84,6 +85,13 @@ function printMasthead(version) {
         `${spaces(gap)}${DIM}${right}${RESET}${spaces(padding)}${CYAN}│${RESET}`);
     console.log(`${CYAN}╰${border}╯${RESET}`);
 }
+// Play the one-shot animated wordmark and resolve once it finishes.
+async function playIntro() {
+    await new Promise(resolve => {
+        const app = render(_jsx(AnimatedLogo, { onDone: () => app.unmount() }));
+        app.waitUntilExit().then(() => resolve(), () => resolve());
+    });
+}
 async function main() {
     // On the very first run we show a dedicated welcome screen instead of the
     // masthead, so the branding is the moment. Only when stdin is a TTY — the
@@ -95,12 +103,20 @@ async function main() {
     // silently rather than claiming an update happened.
     const lastSeen = getLastSeenVersion();
     const isUpdate = !firstRun && lastSeen !== undefined && lastSeen !== pkg.version;
+    // On the plain interactive `svc` (no command), play the animated wordmark
+    // instead of the static masthead — but only when stdout is wide enough for
+    // the art and stdin is a TTY (so it doesn't run in CI / piped input).
+    const wantsIntro = !firstRun &&
+        !isUpdate &&
+        !commandName &&
+        Boolean(process.stdin.isTTY) &&
+        (process.stdout.columns ?? 0) >= BIG_LOGO_WIDTH;
     if (!firstRun) {
         if (isUpdate) {
             printBranding();
             console.log(`\x1b[32m\n  ✨ Updated to v${pkg.version}\x1b[0m \x1b[2m(from v${lastSeen})\x1b[0m\n`);
         }
-        else {
+        else if (!wantsIntro) {
             printMasthead(pkg.version);
         }
         // Record the current version so the banner shows once per upgrade.
@@ -133,8 +149,12 @@ async function main() {
             app.waitUntilExit().then(() => resolve(), () => resolve());
         });
     }
-    // If no command, show interactive menu
+    // If no command, show interactive menu (with the animated intro first when
+    // the terminal can fit it).
     if (!commandName) {
+        if (wantsIntro) {
+            await playIntro();
+        }
         render(_jsx(App, { project: project }));
         return;
     }

package/dist/components/AnimatedLogo.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    onDone: () => void;
+}
+/**
+ * One-shot startup flair: wipes the big wordmark in left-to-right while a
+ * rainbow gradient drifts across it, then calls `onDone`. Purely decorative.
+ */
+export declare function AnimatedLogo({ onDone }: Props): import("react").JSX.Element;
+export {};

package/dist/components/AnimatedLogo.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { Box, Text } from 'ink';
+import { BIG_LOGO, BIG_LOGO_WIDTH } from '../utils/branding.js';
+const FRAME_MS = 45;
+const REVEAL_COLS_PER_FRAME = 9; // how fast the wipe sweeps left → right
+const HOLD_FRAMES = 20; // frames to keep cycling colours once fully revealed
+const REVEAL_FRAMES = Math.ceil(BIG_LOGO_WIDTH / REVEAL_COLS_PER_FRAME);
+const TOTAL_FRAMES = REVEAL_FRAMES + HOLD_FRAMES;
+// Convert HSL (h in degrees, s/l in 0..1) to a #rrggbb string for ink/chalk.
+function hslToHex(h, s, l) {
+    const hue = h / 360;
+    const a = s * Math.min(l, 1 - l);
+    const channel = (n) => {
+        const scaled = hue * 12;
+        const k = (n + scaled) % 12;
+        const offset = a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+        const value = l - offset;
+        return Math.round(255 * value)
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${channel(0)}${channel(8)}${channel(4)}`;
+}
+function buildSpans(line, y, frame, reveal) {
+    const spans = [];
+    for (const [x, char] of [...line].entries()) {
+        const hidden = x >= reveal;
+        const blank = char === ' ' || hidden;
+        // Moving diagonal rainbow: hue depends on column + row + time, quantised
+        // so neighbouring characters share a colour and runs stay long.
+        const col = x * 1.6;
+        const row = y * 6;
+        const time = frame * 7;
+        const stepped = Math.round((col + row + time) / 8) * 8;
+        const hue = blank ? undefined : stepped % 360;
+        // Shadow characters sit darker than the solid blocks for a bit of depth.
+        const color = hue === undefined
+            ? undefined
+            : hslToHex(hue, 0.95, char === '░' ? 0.32 : 0.58);
+        const text = hidden ? ' ' : char;
+        const last = spans.at(-1);
+        if (last && last.color === color) {
+            last.text += text;
+        }
+        else {
+            spans.push({ text, color });
+        }
+    }
+    return spans;
+}
+/**
+ * One-shot startup flair: wipes the big wordmark in left-to-right while a
+ * rainbow gradient drifts across it, then calls `onDone`. Purely decorative.
+ */
+export function AnimatedLogo({ onDone }) {
+    const [frame, setFrame] = useState(0);
+    const intervalRef = useRef(undefined);
+    useEffect(() => {
+        intervalRef.current = setInterval(() => {
+            setFrame(current => current + 1);
+        }, FRAME_MS);
+        return () => {
+            clearInterval(intervalRef.current);
+        };
+    }, []);
+    // Stop the loop and notify the parent exactly once, when the last frame is
+    // reached. Kept out of the setFrame updater so that updater stays pure.
+    useEffect(() => {
+        if (frame >= TOTAL_FRAMES) {
+            clearInterval(intervalRef.current);
+            onDone();
+        }
+    }, [frame, onDone]);
+    const reveal = frame >= REVEAL_FRAMES
+        ? BIG_LOGO_WIDTH
+        : (frame + 1) * REVEAL_COLS_PER_FRAME;
+    return (_jsx(Box, { flexDirection: "column", padding: 1, children: BIG_LOGO.map((line, y) => (_jsx(Text, { children: buildSpans(line, y, frame, reveal).map((span, index) => (_jsx(Fragment, { children: span.color ? (_jsx(Text, { color: span.color, children: span.text })) : (_jsx(Text, { children: span.text })) }, index))) }, y))) }));
+}

package/dist/utils/branding.d.ts

@@ -5,6 +5,15 @@
  */
 export declare const LOGO: string[];
 export declare const AUTHOR = "Rasmus S\u00F6derstr\u00F6m";
+/**
+ * Big block-shadow "Sitevision CLI" wordmark, used by the animated startup
+ * intro (see components/AnimatedLogo). It's ~120 columns wide, so callers
+ * should only render it when the terminal is at least that wide — otherwise it
+ * wraps and looks broken.
+ */
+export declare const BIG_LOGO: string[];
+/** Display width of the widest BIG_LOGO line. */
+export declare const BIG_LOGO_WIDTH: number;
 /**
  * Print the logo + author line straight to stdout (non-interactive), mirroring
  * how the masthead is printed. Used for the update banner.

package/dist/utils/branding.js

@@ -17,6 +17,24 @@ export const LOGO = [
     '  └──────────┘  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄',
 ];
 export const AUTHOR = 'Rasmus Söderström';
+/**
+ * Big block-shadow "Sitevision CLI" wordmark, used by the animated startup
+ * intro (see components/AnimatedLogo). It's ~120 columns wide, so callers
+ * should only render it when the terminal is at least that wide — otherwise it
+ * wraps and looks broken.
+ */
+export const BIG_LOGO = [
+    ' █████████   ███   █████                          ███           ███                           █████████  █████       █████',
+    ' ███░░░░░███ ░░░   ░░███                          ░░░           ░░░                           ███░░░░░███░░███       ░░███ ',
+    '░███    ░░░  ████  ███████    ██████  █████ █████ ████   █████  ████   ██████  ████████      ███     ░░░  ░███        ░███ ',
+    '░░█████████ ░░███ ░░░███░    ███░░███░░███ ░░███ ░░███  ███░░  ░░███  ███░░███░░███░░███    ░███          ░███        ░███ ',
+    ' ░░░░░░░░███ ░███   ░███    ░███████  ░███  ░███  ░███ ░░█████  ░███ ░███ ░███ ░███ ░███    ░███          ░███        ░███ ',
+    ' ███    ░███ ░███   ░███ ███░███░░░   ░░███ ███   ░███  ░░░░███ ░███ ░███ ░███ ░███ ░███    ░░███     ███ ░███      █ ░███ ',
+    '░░█████████  █████  ░░█████ ░░██████   ░░█████    █████ ██████  █████░░██████  ████ █████    ░░█████████  ███████████ █████',
+    ' ░░░░░░░░░  ░░░░░    ░░░░░   ░░░░░░     ░░░░░    ░░░░░ ░░░░░░  ░░░░░  ░░░░░░  ░░░░ ░░░░░      ░░░░░░░░░  ░░░░░░░░░░░ ░░░░░ ',
+];
+/** Display width of the widest BIG_LOGO line. */
+export const BIG_LOGO_WIDTH = Math.max(...BIG_LOGO.map(line => line.length));
 /**
  * Print the logo + author line straight to stdout (non-interactive), mirroring
  * how the masthead is printed. Used for the update banner.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sitevision-cli",
-	"version": "0.5.0-beta.0",
+	"version": "0.6.0-beta.0",
 	"license": "MIT",
 	"bin": {
 		"svc": "dist/cli.js"