npm - visionos-monorepo - Versions diffs - 0.1.0 - Mend

visionos-monorepo 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

package/.claude/worktrees/competent-burnell-8d1330/visionos-manifesto/index.html ADDED Viewed

@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>VisionOS — The Terminal Learning Manifesto</title>
+  <meta name="description" content="VisionOS is a CLI-first learning platform. Master Git, Linux, React CLI, and OS commands through guided terminal practice — not reading." />
+  <meta name="theme-color" content="#E0DFD5" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<!-- ════════════════════════════════════════════════════════════════
+     Monitor Bezel Frame
+     ════════════════════════════════════════════════════════════ -->
+<div class="monitor-bezel">
+  <div class="monitor-screen">
+    <!-- ── STICKY HEADER ─────────────────────────────────────── -->
+    <header class="site-header" id="header">
+      <div class="header-left">
+        <span class="header-brand">VisionOS</span>
+        <span class="header-meta">v0.1.0 — CLI-First Learning</span>
+      </div>
+      <nav class="header-nav">
+        <a href="#tracks">Tracks</a>
+        <a href="#commands">Commands</a>
+        <a href="https://github.com" target="_blank" rel="noopener">GitHub <span class="arrow">↗</span></a>
+      </nav>
+    </header>
+    <!-- ── HERO ──────────────────────────────────────────────── -->
+    <section class="section section--hero" id="hero">
+      <div class="hero-content">
+        <p class="text-label reveal">Once upon a time, we typed a command</p>
+        <div style="margin-top: 24px; overflow: hidden;">
+          <span class="scanline-text reveal delay-1">TERMINAL.</span>
+        </div>
+        <p class="text-hero-lead reveal delay-3" style="margin-top: 32px;">
+          The command line was the first interface.<br/>
+          It's time we <em>learned</em> it properly.
+        </p>
+      </div>
+      <div class="hero-prompt-container reveal delay-4">
+        <div class="hero-prompt">
+          <span>▸</span>
+          <span class="hero-prompt-key">enter</span>
+          <span>to continue</span>
+        </div>
+      </div>
+      <!-- Scroll Indicator -->
+      <div class="scroll-indicator">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <rect x="7" y="2" width="10" height="16" rx="5" />
+          <line x1="12" y1="6" x2="12" y2="9" />
+        </svg>
+        <span class="arrow">↓</span>
+      </div>
+    </section>
+    <!-- ── SCANLINE DIVIDER ──────────────────────────────────── -->
+    <div class="scanline-divider scanline-divider--both"></div>
+    <!-- ── NARRATIVE 1 — THE ORIGIN ──────────────────────────── -->
+    <section class="section" id="origin">
+      <div class="split-layout split-layout--text-left split-layout--center">
+        <div class="reveal-left">
+          <p class="text-narrative">
+            The command line was the original interface.
+          </p>
+          <p class="text-narrative text-narrative--muted" style="margin-top: 16px;">
+            Raw, powerful, unfiltered. Before every GUI, before every app — there was a blinking cursor and an empty prompt.
+          </p>
+        </div>
+        <div class="figure reveal-right delay-2">
+          <div class="terminal-window">
+            <div class="terminal-titlebar">
+              <span class="terminal-dot terminal-dot--red"></span>
+              <span class="terminal-dot terminal-dot--yellow"></span>
+              <span class="terminal-dot terminal-dot--green"></span>
+            </div>
+            <div class="terminal-body">
+              <span class="terminal-line"><span class="prompt">~$</span> <span class="command">whoami</span></span>
+              <span class="terminal-line"><span class="output">learner</span></span>
+              <span class="terminal-line">&nbsp;</span>
+              <span class="terminal-line"><span class="prompt">~$</span> <span class="command">echo "hello, terminal"</span></span>
+              <span class="terminal-line"><span class="success">hello, terminal</span></span>
+              <span class="terminal-line">&nbsp;</span>
+              <span class="terminal-line"><span class="prompt">~$</span> <span class="command">█</span></span>
+            </div>
+          </div>
+          <div class="figure-caption" style="margin-top: 20px;">
+            <span class="figure-label">Fig 1</span>
+            <span class="figure-desc">The terminal — where computing began. A blinking cursor, infinite possibility.</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ── TRANSITION — GIANT TEXT ────────────────────────────── -->
+    <section class="section" style="padding: var(--space-xxl) 0;">
+      <div class="scanline-divider scanline-divider--fade-bottom" style="height: 60px; margin-bottom: 32px;"></div>
+      <div class="scanline-band reveal-scale">
+        <span class="scanline-text" style="text-align: center; display: block;">PRACTICE</span>
+      </div>
+      <div class="scanline-divider scanline-divider--fade-top" style="height: 60px; margin-top: 32px;"></div>
+      <div style="text-align: center; padding: 0 60px; margin-top: var(--space-lg);">
+        <p class="text-narrative reveal" style="max-width: 600px; margin: 0 auto;">
+          Now, we believe it's time for a future where the terminal becomes your classroom.
+        </p>
+      </div>
+    </section>
+    <!-- ── MEET VISIONOS ─────────────────────────────────────── -->
+    <section class="section" id="about">
+      <div class="reveal">
+        <p class="text-label">Introducing</p>
+        <h2 class="text-section-title" style="margin-top: 8px;">Meet VisionOS</h2>
+        <p class="text-section-subtitle" style="margin-top: 4px;">A CLI-first learning platform.</p>
+      </div>
+      <div style="margin-top: var(--space-lg);">
+        <div class="split-layout split-layout--text-left split-layout--center">
+          <div class="reveal-left delay-1">
+            <p class="text-narrative">
+              We believe the best way to learn terminal commands is by doing — not reading.
+            </p>
+            <p class="text-body" style="margin-top: 20px;">
+              VisionOS is a guided, interactive learning environment that lives right inside your terminal. Install it, pick a track, and start typing real commands — with real-time validation, progress tracking, and structured lessons.
+            </p>
+          </div>
+          <div class="figure reveal-right delay-2">
+            <div class="terminal-window">
+              <div class="terminal-titlebar">
+                <span class="terminal-dot terminal-dot--red"></span>
+                <span class="terminal-dot terminal-dot--yellow"></span>
+                <span class="terminal-dot terminal-dot--green"></span>
+              </div>
+              <div class="terminal-body">
+                <span class="terminal-line"><span class="prompt">~$</span> <span class="command">npm install -g visionos-cli</span></span>
+                <span class="terminal-line"><span class="output">+ visionos-cli@0.1.0 installed</span></span>
+                <span class="terminal-line">&nbsp;</span>
+                <span class="terminal-line"><span class="prompt">~$</span> <span class="command">visionos start</span></span>
+                <span class="terminal-line"><span class="success">  ✓ VisionOS runtime started</span></span>
+                <span class="terminal-line"><span class="success">  ✓ Server running at 127.0.0.1:4000</span></span>
+                <span class="terminal-line"><span class="output">  → Opening dashboard...</span></span>
+              </div>
+            </div>
+            <div class="figure-caption" style="margin-top: 20px;">
+              <span class="figure-label">Fig 3</span>
+              <span class="figure-desc">Two commands. That's all it takes to enter a guided terminal classroom.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ── SCANLINE DIVIDER ──────────────────────────────────── -->
+    <div class="scanline-divider scanline-divider--both" style="height: 60px;"></div>
+    <!-- ── HOW IT WORKS ──────────────────────────────────────── -->
+    <section class="section" id="how">
+      <div class="reveal">
+        <p class="text-label">How it works</p>
+        <h2 class="text-section-title" style="margin-top: 8px;">Three steps to mastery</h2>
+      </div>
+      <div class="steps-grid">
+        <div class="step-card reveal delay-1">
+          <span class="step-number">01 —</span>
+          <h3 class="step-title">Install</h3>
+          <p class="step-desc">Install VisionOS globally with a single npm command. No config, no fuss.</p>
+          <code class="step-code">npm i -g visionos-cli</code>
+        </div>
+        <div class="step-card reveal delay-2">
+          <span class="step-number">02 —</span>
+          <h3 class="step-title">Start</h3>
+          <p class="step-desc">Launch the runtime. VisionOS spins up a local server and opens your dashboard.</p>
+          <code class="step-code">visionos start</code>
+        </div>
+        <div class="step-card reveal delay-3">
+          <span class="step-number">03 —</span>
+          <h3 class="step-title">Learn</h3>
+          <p class="step-desc">Pick a learning track, follow guided lessons, and practice real commands with instant feedback.</p>
+          <code class="step-code">visionos open</code>
+        </div>
+      </div>
+    </section>
+    <!-- ── LEARNING TRACKS ───────────────────────────────────── -->
+    <section class="section" id="tracks">
+      <div class="reveal">
+        <p class="text-label">Learning Tracks</p>
+        <h2 class="text-section-title" style="margin-top: 8px;">Pick your path</h2>
+        <p class="text-body" style="margin-top: 12px;">
+          Four structured tracks, each with guided lessons that build on each other. Start from basics, reach mastery.
+        </p>
+      </div>
+      <div class="tracks-grid">
+        <div class="track-card reveal delay-1">
+          <div class="track-card-icon">G</div>
+          <h3 class="track-card-title">Git</h3>
+          <p class="track-card-desc">Master version control from init to rebase. Branches, merges, conflicts — hands-on.</p>
+        </div>
+        <div class="track-card reveal delay-2">
+          <div class="track-card-icon">L</div>
+          <h3 class="track-card-title">Linux</h3>
+          <p class="track-card-desc">Navigate the filesystem, manage processes, and write shell scripts with confidence.</p>
+        </div>
+        <div class="track-card reveal delay-3">
+          <div class="track-card-icon">R</div>
+          <h3 class="track-card-title">React CLI</h3>
+          <p class="track-card-desc">Scaffold, configure, and manage React projects entirely from the command line.</p>
+        </div>
+        <div class="track-card reveal delay-4">
+          <div class="track-card-icon">OS</div>
+          <h3 class="track-card-title">OS Commands</h3>
+          <p class="track-card-desc">System info, disk management, networking — learn the commands that power your machine.</p>
+        </div>
+      </div>
+    </section>
+    <!-- ── SCANLINE DIVIDER ──────────────────────────────────── -->
+    <div class="scanline-divider scanline-divider--both" style="height: 60px;"></div>
+    <!-- ── CLI COMMANDS REFERENCE ─────────────────────────────── -->
+    <section class="section" id="commands">
+      <div class="split-layout split-layout--text-left">
+        <div>
+          <div class="reveal">
+            <p class="text-label">CLI Reference</p>
+            <h2 class="text-section-title" style="margin-top: 8px;">Built for<br/>the terminal</h2>
+            <p class="text-body" style="margin-top: 16px;">
+              Every interaction happens through clean, memorable commands. No GUI required.
+            </p>
+          </div>
+          <div class="commands-list reveal delay-1" style="margin-top: 32px;">
+            <div class="command-row">
+              <span class="command-name">visionos start</span>
+              <span class="command-desc">Start the local runtime & dashboard server</span>
+            </div>
+            <div class="command-row">
+              <span class="command-name">visionos open</span>
+              <span class="command-desc">Open the learning dashboard in your browser</span>
+            </div>
+            <div class="command-row">
+              <span class="command-name">visionos userinfo</span>
+              <span class="command-desc">Display your profile & learning progress</span>
+            </div>
+            <div class="command-row">
+              <span class="command-name">visionos status</span>
+              <span class="command-desc">Check if the runtime server is running</span>
+            </div>
+            <div class="command-row">
+              <span class="command-name">visionos logout</span>
+              <span class="command-desc">Sign out and clear session data</span>
+            </div>
+          </div>
+        </div>
+        <div class="reveal-right delay-2" style="display: flex; align-items: center; justify-content: center;">
+          <div class="access-card">
+            <div class="access-card-stripe"></div>
+            <div class="access-card-content">
+              <div>
+                <span class="access-card-label">Terminal Access Card</span>
+                <span class="access-card-value">VisionOS <span style="color: var(--accent-teal);">CLI</span></span>
+              </div>
+              <div class="access-card-row">
+                <div class="access-card-field">
+                  <span class="access-card-label">Version</span>
+                  <span class="access-card-value access-card-mono">0.1.0</span>
+                </div>
+                <div class="access-card-field">
+                  <span class="access-card-label">Runtime</span>
+                  <span class="access-card-value access-card-mono">Node.js</span>
+                </div>
+              </div>
+              <div class="access-card-row">
+                <div class="access-card-field">
+                  <span class="access-card-label">Port</span>
+                  <span class="access-card-value access-card-mono">4000</span>
+                </div>
+                <div class="access-card-field">
+                  <span class="access-card-label">Tracks</span>
+                  <span class="access-card-value access-card-mono">4</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ── CTA — START YOUR JOURNEY ──────────────────────────── -->
+    <section class="section" style="padding-bottom: var(--space-xxl);" id="cta">
+      <div class="scanline-band reveal-scale" style="margin-bottom: var(--space-xl);">
+        <span class="scanline-text" style="text-align: center; display: block; font-size: clamp(3rem, 8vw, 7rem);">BEGIN.</span>
+      </div>
+      <div class="split-layout split-layout--text-left split-layout--center">
+        <div class="reveal-left">
+          <p class="text-label">Get Started</p>
+          <h2 class="text-section-title" style="margin-top: 8px;">Start your<br/>terminal journey</h2>
+          <p class="text-body" style="margin-top: 16px;">
+            One command to install. One command to learn. The terminal awaits.
+          </p>
+          <div
+            class="copy-command"
+            data-copy="npm install -g visionos-cli"
+            role="button"
+            tabindex="0"
+            aria-label="Copy install command"
+          >
+            <span style="opacity: 0.4;">$</span>
+            <span>npm install -g visionos-cli</span>
+            <span class="copy-icon">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <rect x="9" y="9" width="13" height="13" rx="2"/>
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+              </svg>
+            </span>
+            <span class="copied-tooltip">Copied!</span>
+          </div>
+          <p class="text-label" style="margin-top: 20px;">Then run <strong style="color: var(--ink); font-weight: 700;">visionos start</strong></p>
+        </div>
+        <div class="reveal-right delay-2" style="display: flex; align-items: center; justify-content: center;">
+          <div class="terminal-window" style="width: 100%; max-width: 400px;">
+            <div class="terminal-titlebar">
+              <span class="terminal-dot terminal-dot--red"></span>
+              <span class="terminal-dot terminal-dot--yellow"></span>
+              <span class="terminal-dot terminal-dot--green"></span>
+            </div>
+            <div class="terminal-body">
+              <span class="terminal-line"><span class="prompt">~$</span> <span class="command">npm i -g visionos-cli</span></span>
+              <span class="terminal-line"><span class="success">✓ installed globally</span></span>
+              <span class="terminal-line">&nbsp;</span>
+              <span class="terminal-line"><span class="prompt">~$</span> <span class="command">visionos start</span></span>
+              <span class="terminal-line"><span class="success">✓ Runtime active</span></span>
+              <span class="terminal-line"><span class="output">  Dashboard → http://127.0.0.1:4000</span></span>
+              <span class="terminal-line"><span class="prompt">~$</span> <span class="command">█</span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ── FOOTER ────────────────────────────────────────────── -->
+    <footer class="site-footer">
+      <div class="header-left">
+        <span class="header-brand">VisionOS</span>
+        <span class="header-meta">© 2025 · CLI-First Learning</span>
+      </div>
+      <nav class="header-nav">
+        <a href="#hero">Top ↑</a>
+        <a href="https://github.com" target="_blank" rel="noopener">GitHub <span class="arrow">↗</span></a>
+      </nav>
+    </footer>
+  </div><!-- .monitor-screen -->
+  <div class="bezel-notch">
+    <div class="bezel-notch-inner"></div>
+  </div>
+</div><!-- .monitor-bezel -->
+<script src="script.js"></script>
+</body>
+</html>

package/.claude/worktrees/competent-burnell-8d1330/visionos-manifesto/script.js ADDED Viewed

@@ -0,0 +1,146 @@
+/* ================================================================
+   VisionOS Manifesto — Scroll Animations & Interactions
+   ================================================================ */
+document.addEventListener('DOMContentLoaded', () => {
+  // ── Scroll Reveal Animations ──────────────────────────────────
+  const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');
+  const revealObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          // Once revealed, stop observing for performance
+          revealObserver.unobserve(entry.target);
+        }
+      });
+    },
+    {
+      threshold: 0.15,
+      rootMargin: '0px 0px -60px 0px',
+    }
+  );
+  revealElements.forEach((el) => revealObserver.observe(el));
+  // ── Terminal Line Animation Re-trigger ────────────────────────
+  const terminalWindows = document.querySelectorAll('.terminal-window');
+  const terminalObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const lines = entry.target.querySelectorAll('.terminal-line');
+          lines.forEach((line) => {
+            line.style.animation = 'none';
+            // Force reflow
+            void line.offsetHeight;
+            line.style.animation = '';
+          });
+          terminalObserver.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.3 }
+  );
+  terminalWindows.forEach((el) => terminalObserver.observe(el));
+  // ── Copy to Clipboard ─────────────────────────────────────────
+  const copyButtons = document.querySelectorAll('[data-copy]');
+  copyButtons.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const textToCopy = btn.getAttribute('data-copy');
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        btn.classList.add('copied');
+        setTimeout(() => btn.classList.remove('copied'), 1800);
+      }).catch(() => {
+        // Fallback for older browsers
+        const textarea = document.createElement('textarea');
+        textarea.value = textToCopy;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+          document.execCommand('copy');
+          btn.classList.add('copied');
+          setTimeout(() => btn.classList.remove('copied'), 1800);
+        } catch (e) {
+          console.error('Copy failed', e);
+        }
+        document.body.removeChild(textarea);
+      });
+    });
+  });
+  // ── Scroll Indicator Fade ─────────────────────────────────────
+  const scrollIndicator = document.querySelector('.scroll-indicator');
+  if (scrollIndicator) {
+    let hasScrolled = false;
+    const handleScroll = () => {
+      if (!hasScrolled && window.scrollY > 100) {
+        hasScrolled = true;
+        scrollIndicator.style.transition = 'opacity 0.5s ease';
+        scrollIndicator.style.opacity = '0';
+        setTimeout(() => {
+          scrollIndicator.style.display = 'none';
+        }, 500);
+        window.removeEventListener('scroll', handleScroll);
+      }
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+  }
+  // ── Smooth Scroll for Anchor Links ────────────────────────────
+  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+    anchor.addEventListener('click', (e) => {
+      e.preventDefault();
+      const target = document.querySelector(anchor.getAttribute('href'));
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  });
+  // ── Header Background on Scroll ───────────────────────────────
+  const header = document.querySelector('.site-header');
+  if (header) {
+    const updateHeaderBg = () => {
+      if (window.scrollY > 50) {
+        header.style.background = 'rgba(224, 223, 213, 0.95)';
+        header.style.borderBottomColor = 'rgba(0,0,0,0.08)';
+      } else {
+        header.style.background = 'rgba(224, 223, 213, 0.85)';
+        header.style.borderBottomColor = 'rgba(0,0,0,0.04)';
+      }
+    };
+    window.addEventListener('scroll', updateHeaderBg, { passive: true });
+    updateHeaderBg();
+  }
+  // ── Parallax Scanline Bands ───────────────────────────────────
+  const scanlineBands = document.querySelectorAll('.scanline-divider');
+  if (scanlineBands.length > 0) {
+    const handleParallax = () => {
+      const scrollY = window.scrollY;
+      scanlineBands.forEach((band) => {
+        const rect = band.getBoundingClientRect();
+        const centerOffset = rect.top + rect.height / 2 - window.innerHeight / 2;
+        const parallaxShift = centerOffset * 0.05;
+        band.style.backgroundPositionY = `${parallaxShift}px`;
+      });
+    };
+    window.addEventListener('scroll', handleParallax, { passive: true });
+  }
+});