@riverflowpkg/riverflow 1.0.0

package/editor/terminal.js

@@ -0,0 +1,309 @@
+(function () {
+
+  /* ── Styles ─────────────────────────────────────────────────── */
+  function injectStyles() {
+    if (document.getElementById('terminal-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'terminal-styles';
+    s.textContent = `
+.terminal {
+  display: flex;
+  flex-direction: column;
+  font-family: 'Consolas', 'Fira Code', 'Menlo', monospace;
+  font-size: 13.5px;
+  line-height: 1.65;
+  background: #0d0d0d;
+  color: #e2e8f0;
+  border: 0.5px solid #2a2a2a;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Header ── */
+.t-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: #161616;
+  border-bottom: 0.5px solid #222;
+  flex-shrink: 0;
+}
+.t-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
+.t-dot-r { background: #ff5f57; }
+.t-dot-y { background: #febc2e; }
+.t-dot-g { background: #28c840; }
+.t-title {
+  margin-left: 8px;
+  font-size: 12px;
+  color: #4a5568;
+  letter-spacing: 0.04em;
+  flex: 1;
+  text-align: center;
+  margin-right: 30px; /* optical center past the dots */
+}
+
+/* ── Body ── */
+.t-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 16px;
+  min-height: 120px;
+}
+
+.t-body::-webkit-scrollbar { width: 4px; }
+.t-body::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
+
+/* ── Lines ── */
+.t-line {
+  display: flex;
+  gap: 8px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.t-line-output { padding-left: 4px; }
+
+/* Output types */
+.t-info    { color: #e2e8f0; }
+.t-success { color: #c3e88d; }
+.t-error   { color: #f07178; }
+.t-warn    { color: #ffcb6b; }
+.t-system  { color: #4a5568; font-style: italic; }
+.t-cmd     { color: #82aaff; }
+
+/* Prompt */
+.t-prompt { color: #c792ea; user-select: none; flex-shrink: 0; }
+
+/* ── Input row (interactive mode) ── */
+.t-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px 14px;
+  flex-shrink: 0;
+}
+
+.t-input-prompt { color: #c792ea; user-select: none; flex-shrink: 0; }
+
+.t-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #82aaff;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  caret-color: #c792ea;
+}
+
+/* motion mode — animated caret */
+.terminal-motion .t-input { caret-color: transparent; }
+.terminal-motion .t-fake-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: #c792ea;
+  border-radius: 1px;
+  vertical-align: text-bottom;
+  margin-left: 1px;
+  animation: t-blink 1s steps(1) infinite;
+}
+@keyframes t-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
+
+/* motion — new output lines fade in */
+.terminal-motion .t-line {
+  animation: t-fadeIn 0.18s ease both;
+}
+@keyframes t-fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
+`;
+    document.head.appendChild(s);
+  }
+
+  /* ── Token colours for command echo ─────────────────────────── */
+  function colorizeCommand(text) {
+    return text
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+      .replace(/^(\S+)/, '<span style="color:#c3e88d">$1</span>')          /* command */
+      .replace(/ (-{1,2}[\w-]+)/g,' <span style="color:#ffcb6b">$1</span>') /* flags */
+      .replace(/ ("([^"]*)")/g,' <span style="color:#f78c6c">$1</span>');    /* strings */
+  }
+
+  /* ── Build terminal ──────────────────────────────────────────── */
+  function initTerminal(el) {
+    if (el.dataset.termInit) return;
+    el.dataset.termInit = '1';
+
+    const isInteractive = el.classList.contains('terminal-interactive');
+    const isMotion      = el.classList.contains('terminal-motion');
+    const prompt        = el.dataset.prompt  || '~$';
+    const title         = el.dataset.title   || 'bash';
+
+    /* parse initial lines from innerHTML */
+    const rawLines = el.innerHTML
+      .split('\n')
+      .map(l => l.trim())
+      .filter(l => l.length);
+
+    el.innerHTML = '';
+
+    /* header */
+    const header = document.createElement('div');
+    header.className = 't-header';
+    header.innerHTML = `
+      <span class="t-dot t-dot-r"></span>
+      <span class="t-dot t-dot-y"></span>
+      <span class="t-dot t-dot-g"></span>
+      <span class="t-title">${title}</span>`;
+    el.appendChild(header);
+
+    /* body */
+    const body = document.createElement('div');
+    body.className = 't-body';
+    el.appendChild(body);
+
+    /* ── Render a line ── */
+    /*
+      Line syntax for the developer:
+        $ command args        → shown with prompt + blue text
+        > output text         → plain output (info)
+        + success message     → green
+        ! error message       → red
+        ? warn message        → yellow
+        # system / comment    → muted italic
+        (anything else)       → plain info
+    */
+    function parseLine(raw) {
+      const first = raw[0];
+      const rest  = raw.slice(1).trimStart();
+      if (first === '$') return { type: 'cmd',     text: rest };
+      if (first === '>') return { type: 'info',    text: rest };
+      if (first === '+') return { type: 'success', text: rest };
+      if (first === '!') return { type: 'error',   text: rest };
+      if (first === '?') return { type: 'warn',    text: rest };
+      if (first === '#') return { type: 'system',  text: rest };
+      return { type: 'info', text: raw };
+    }
+
+    function appendLine(raw) {
+      const { type, text } = parseLine(raw);
+      const row = document.createElement('div');
+      row.className = 't-line';
+
+      if (type === 'cmd') {
+        row.innerHTML = `<span class="t-prompt">${prompt}</span><span class="t-cmd">${colorizeCommand(text)}</span>`;
+      } else {
+        row.className += ' t-line-output';
+        row.innerHTML = `<span class="t-${type}">${text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</span>`;
+      }
+
+      body.appendChild(row);
+      body.scrollTop = body.scrollHeight;
+    }
+
+    /* render preset lines */
+    rawLines.forEach(l => appendLine(l));
+
+    /* ── Interactive mode ── */
+    if (isInteractive) {
+      const inputRow = document.createElement('div');
+      inputRow.className = 't-input-row';
+
+      const inputPrompt = document.createElement('span');
+      inputPrompt.className = 't-input-prompt';
+      inputPrompt.textContent = prompt;
+
+      const input = document.createElement('input');
+      input.className = 't-input';
+      input.type = 'text';
+      input.autocomplete = 'off';
+      input.spellcheck = false;
+      input.setAttribute('autocorrect', 'off');
+      input.setAttribute('autocapitalize', 'off');
+      input.placeholder = 'type a command...';
+
+      inputRow.appendChild(inputPrompt);
+      inputRow.appendChild(input);
+
+      /* fake caret for motion mode */
+      if (isMotion) {
+        const fakeCaret = document.createElement('span');
+        fakeCaret.className = 't-fake-caret';
+        inputRow.appendChild(fakeCaret);
+      }
+
+      el.appendChild(inputRow);
+
+      /* command history */
+      const history = [];
+      let histIdx   = -1;
+
+      /* built-in commands */
+      const builtins = {
+        clear() { body.innerHTML = ''; },
+        help()  {
+          ['+ Available commands:', '> clear — clears the terminal', '> help  — shows this message'].forEach(appendLine);
+        },
+      };
+
+      /* custom commands — developer sets window.TerminalCommands */
+      function runCommand(cmd) {
+        const trimmed = cmd.trim();
+        if (!trimmed) return;
+
+        /* echo the command */
+        appendLine(`$ ${trimmed}`);
+
+        history.unshift(trimmed);
+        histIdx = -1;
+
+        const [name, ...args] = trimmed.split(/\s+/);
+
+        if (builtins[name]) {
+          builtins[name](args);
+        } else if (window.TerminalCommands && window.TerminalCommands[name]) {
+          const result = window.TerminalCommands[name](args, appendLine);
+          if (typeof result === 'string') appendLine(`> ${result}`);
+        } else {
+          appendLine(`! command not found: ${name}`);
+        }
+      }
+
+      input.addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+          runCommand(input.value);
+          input.value = '';
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          histIdx = Math.min(histIdx + 1, history.length - 1);
+          input.value = history[histIdx] || '';
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          histIdx = Math.max(histIdx - 1, -1);
+          input.value = histIdx === -1 ? '' : history[histIdx];
+        }
+      });
+
+      /* click anywhere on terminal focuses input */
+      el.addEventListener('click', () => input.focus());
+    }
+  }
+
+  /* ── Boot ────────────────────────────────────────────────────── */
+  function init() {
+    injectStyles();
+    document.querySelectorAll('.terminal').forEach(initTerminal);
+    new MutationObserver(muts => muts.forEach(m =>
+      m.addedNodes.forEach(n => {
+        if (n.nodeType !== 1) return;
+        if (n.classList.contains('terminal')) initTerminal(n);
+        n.querySelectorAll?.('.terminal').forEach(initTerminal);
+      })
+    )).observe(document.body, { childList: true, subtree: true });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();

package/effects/typing.js

@@ -0,0 +1,105 @@
+(function () {
+
+  function injectStyles() {
+    if (document.getElementById('typing-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'typing-styles';
+    s.textContent = `
+/* cursor */
+.typing-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: currentColor;
+  border-radius: 1px;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+
+/* default cursor — hard blink */
+.typing .typing-cursor {
+  animation: cur-blink 1s steps(1) infinite;
+}
+@keyframes cur-blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+/* smooth cursor — fade blink */
+.typing-smooth .typing-cursor {
+  animation: cur-fade 1s ease-in-out infinite;
+}
+@keyframes cur-fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* smooth char fade-in */
+.typing-smooth .typing-char {
+  display: inline-block;
+  animation: char-fade 0.12s ease both;
+}
+@keyframes char-fade {
+  from { opacity: 0; transform: translateY(3px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+`;
+    document.head.appendChild(s);
+  }
+
+  function initTyping(el) {
+    if (el.dataset.typingInit) return;
+    el.dataset.typingInit = '1';
+
+    const fullText  = el.textContent.trim();
+    const isSmooth  = el.classList.contains('typing-smooth');
+    const speed     = parseInt(el.dataset.speed) || 50;   /* ms per character */
+    const delay     = parseInt(el.dataset.delay) || 0;    /* ms before starting */
+
+    el.textContent = '';
+
+    /* cursor element */
+    const cursor = document.createElement('span');
+    cursor.className = 'typing-cursor';
+    el.appendChild(cursor);
+
+    let i = 0;
+
+    function typeNext() {
+      if (i >= fullText.length) return; /* done — cursor stays */
+
+      const ch = fullText[i];
+      i++;
+
+      if (isSmooth) {
+        const span = document.createElement('span');
+        span.className = 'typing-char';
+        span.textContent = ch;
+        el.insertBefore(span, cursor);
+      } else {
+        const text = document.createTextNode(ch);
+        el.insertBefore(text, cursor);
+      }
+
+      setTimeout(typeNext, speed);
+    }
+
+    setTimeout(typeNext, delay);
+  }
+
+  function init() {
+    injectStyles();
+    document.querySelectorAll('.typing').forEach(initTyping);
+    new MutationObserver(muts => muts.forEach(m =>
+      m.addedNodes.forEach(n => {
+        if (n.nodeType !== 1) return;
+        if (n.classList.contains('typing')) initTyping(n);
+        n.querySelectorAll?.('.typing').forEach(initTyping);
+      })
+    )).observe(document.body, { childList: true, subtree: true });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+
+})();

package/effects/underwater.js

@@ -0,0 +1,117 @@
+(function () {
+  function injectStyles() {
+    if (document.getElementById('underwater-styles')) return;
+    const s = document.createElement('style');
+    s.id = 'underwater-styles';
+    s.textContent = `
+#effect-underwater {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9998;
+  background: linear-gradient(180deg,
+    rgba(0,60,120,0.38) 0%,
+    rgba(0,100,160,0.22) 50%,
+    rgba(0,40,80,0.42) 100%);
+}
+#effect-underwater-caustics {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9997;
+  overflow: hidden;
+}
+#effect-underwater-caustics canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.13;
+}
+#effect-underwater-blur {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  backdrop-filter: blur(0.6px) saturate(1.3);
+  -webkit-backdrop-filter: blur(0.6px) saturate(1.3);
+}
+`;
+    document.head.appendChild(s);
+  }
+
+  function init() {
+    if (!document.querySelector('.effect-underwater')) return;
+    injectStyles();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'effect-underwater';
+    document.body.appendChild(overlay);
+
+    const blurLayer = document.createElement('div');
+    blurLayer.id = 'effect-underwater-blur';
+    document.body.appendChild(blurLayer);
+
+    const causticWrap = document.createElement('div');
+    causticWrap.id = 'effect-underwater-caustics';
+    const canvas = document.createElement('canvas');
+    causticWrap.appendChild(canvas);
+    document.body.appendChild(causticWrap);
+
+    const ctx = canvas.getContext('2d');
+    let W, H;
+    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
+    resize();
+    window.addEventListener('resize', resize);
+
+    const nodes = Array.from({ length: 10 }, () => ({
+      x: Math.random() * 1.2 - 0.1, y: Math.random() * 1.2 - 0.1,
+      vx: (Math.random() - 0.5) * 0.0006, vy: (Math.random() - 0.5) * 0.0006,
+      r: 0.12 + Math.random() * 0.2,
+    }));
+
+    let scrollOffset = 0;
+    window.addEventListener('scroll', () => { scrollOffset = window.scrollY; }, { passive: true });
+
+    function draw() {
+      ctx.clearRect(0, 0, W, H);
+      const shift = scrollOffset * 0.3;
+      nodes.forEach(n => {
+        n.x += n.vx; n.y += n.vy;
+        if (n.x < -0.2 || n.x > 1.2) n.vx *= -1;
+        if (n.y < -0.2 || n.y > 1.2) n.vy *= -1;
+        const cx = n.x * W, cy = n.y * H - shift;
+        const rx = n.r * W, ry = n.r * H * 0.5;
+        const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(rx, ry));
+        grad.addColorStop(0,   'rgba(100,200,255,0.55)');
+        grad.addColorStop(0.4, 'rgba(60,160,220,0.2)');
+        grad.addColorStop(1,   'rgba(0,80,160,0)');
+        ctx.save();
+        ctx.scale(1, ry / rx);
+        ctx.beginPath();
+        ctx.arc(cx, cy * (rx / ry), rx, 0, Math.PI * 2);
+        ctx.fillStyle = grad;
+        ctx.fill();
+        ctx.restore();
+      });
+      requestAnimationFrame(draw);
+    }
+
+    /* SVG wave distortion */
+    const svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgFilter.style.cssText = 'position:fixed;width:0;height:0;';
+    svgFilter.innerHTML = `<defs><filter id="underwater-wave">
+      <feTurbulence type="fractalNoise" baseFrequency="0.012 0.018" numOctaves="3" seed="5" result="noise">
+        <animate attributeName="baseFrequency" values="0.012 0.018;0.014 0.020;0.012 0.018" dur="8s" repeatCount="indefinite"/>
+      </feTurbulence>
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G"/>
+    </filter></defs>`;
+    document.body.appendChild(svgFilter);
+    overlay.style.filter = 'url(#underwater-wave)';
+
+    requestAnimationFrame(draw);
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@riverflowpkg/riverflow",
+  "version": "1.0.0",
+  "description": "Drop-in vanilla JS browser widgets: top loading bar, smooth scroll, typing effect, underwater overlay, and a code editor with syntax highlighting.",
+  "keywords": [
+    "loading-bar",
+    "smooth-scroll",
+    "typing-effect",
+    "code-editor",
+    "vanilla-js",
+    "browser-widget",
+    "ui"
+  ],
+  "author": "RiverFlowPkg",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RiverFlowPkg/RiverFlow.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RiverFlowPkg/RiverFlow/issues"
+  },
+  "homepage": "https://github.com/RiverFlowPkg/RiverFlow#readme",
+  "files": [
+    "bar/",
+    "effects/",
+    "scroll/",
+    "editor/",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/scroll/scroll.css

@@ -0,0 +1,91 @@
+html.has-scroll-smooth {
+    overflow: hidden
+}
+
+html.has-scroll-dragging {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.has-scroll-smooth body {
+    overflow: hidden
+}
+
+.has-scroll-smooth [data-scroll-container] {
+    min-height: 100vh
+}
+
+[data-scroll-direction=horizontal] [data-scroll-container] {
+    display: inline-block;
+    height: 100vh;
+    white-space: nowrap
+}
+
+[data-scroll-direction=horizontal] [data-scroll-section] {
+    display: inline-block;
+    height: 100%;
+    vertical-align: top;
+    white-space: nowrap
+}
+
+.c-scrollbar {
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform-origin: center right;
+    transition: transform .3s, opacity .3s;
+    width: 11px
+}
+
+.c-scrollbar:hover {
+    transform: scaleX(1.45)
+}
+
+.c-scrollbar:hover,
+.has-scroll-dragging .c-scrollbar,
+.has-scroll-scrolling .c-scrollbar {
+    opacity: 1
+}
+
+[data-scroll-direction=horizontal] .c-scrollbar {
+    bottom: 0;
+    height: 10px;
+    top: auto;
+    transform: scaleY(1);
+    width: 100%
+}
+
+[data-scroll-direction=horizontal] .c-scrollbar:hover {
+    transform: scaleY(1.3)
+}
+
+.c-scrollbar_thumb {
+    background-color: #000;
+    border-radius: 10px;
+    cursor: -webkit-grab;
+    cursor: grab;
+    margin: 2px;
+    opacity: .5;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 7px
+}
+
+.has-scroll-dragging .c-scrollbar_thumb {
+    cursor: -webkit-grabbing;
+    cursor: grabbing
+}
+
+[data-scroll-direction=horizontal] .c-scrollbar_thumb {
+    bottom: 0;
+    right: auto
+}
+
+[data-scroll-sticky] {
+    will-change: transform;
+}