npm - ragevault - Versions diffs - 0.2.3 - Mend

ragevault 0.2.3

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 (72) hide show

package/LICENSE +21 -0
package/README.md +350 -0
package/dist/assets.d.ts +14 -0
package/dist/assets.js +47 -0
package/dist/assets.js.map +1 -0
package/dist/audit.d.ts +35 -0
package/dist/audit.js +79 -0
package/dist/audit.js.map +1 -0
package/dist/branding.d.ts +36 -0
package/dist/branding.js +55 -0
package/dist/branding.js.map +1 -0
package/dist/crypto/cipher.d.ts +74 -0
package/dist/crypto/cipher.js +95 -0
package/dist/crypto/cipher.js.map +1 -0
package/dist/crypto/cipher.test.d.ts +7 -0
package/dist/crypto/cipher.test.js +50 -0
package/dist/crypto/cipher.test.js.map +1 -0
package/dist/generator.d.ts +36 -0
package/dist/generator.js +114 -0
package/dist/generator.js.map +1 -0
package/dist/model.d.ts +96 -0
package/dist/model.js +43 -0
package/dist/model.js.map +1 -0
package/dist/porters.d.ts +35 -0
package/dist/porters.js +175 -0
package/dist/porters.js.map +1 -0
package/dist/prompt.d.ts +14 -0
package/dist/prompt.js +56 -0
package/dist/prompt.js.map +1 -0
package/dist/ragevault.d.ts +22 -0
package/dist/ragevault.js +814 -0
package/dist/ragevault.js.map +1 -0
package/dist/server/public/app.js +420 -0
package/dist/server/public/apple-touch-icon.png +0 -0
package/dist/server/public/favicon.png +0 -0
package/dist/server/public/fonts/archivo.woff2 +0 -0
package/dist/server/public/fonts/space-grotesk.woff2 +0 -0
package/dist/server/public/icon-192.png +0 -0
package/dist/server/public/icon-512.png +0 -0
package/dist/server/public/icon-maskable.png +0 -0
package/dist/server/public/index.html +225 -0
package/dist/server/public/manifest.webmanifest +16 -0
package/dist/server/public/styles.css +362 -0
package/dist/server/public/sw.js +30 -0
package/dist/server/server.d.ts +30 -0
package/dist/server/server.js +410 -0
package/dist/server/server.js.map +1 -0
package/dist/server/session.d.ts +36 -0
package/dist/server/session.js +89 -0
package/dist/server/session.js.map +1 -0
package/dist/store/vaultfile.d.ts +64 -0
package/dist/store/vaultfile.js +110 -0
package/dist/store/vaultfile.js.map +1 -0
package/dist/store/vaultfile.test.d.ts +5 -0
package/dist/store/vaultfile.test.js +45 -0
package/dist/store/vaultfile.test.js.map +1 -0
package/dist/totp.d.ts +26 -0
package/dist/totp.js +88 -0
package/dist/totp.js.map +1 -0
package/dist/totp.test.d.ts +5 -0
package/dist/totp.test.js +41 -0
package/dist/totp.test.js.map +1 -0
package/dist/tui/ansi.d.ts +34 -0
package/dist/tui/ansi.js +52 -0
package/dist/tui/ansi.js.map +1 -0
package/dist/tui/app.d.ts +83 -0
package/dist/tui/app.js +607 -0
package/dist/tui/app.js.map +1 -0
package/dist/update/channel.d.ts +53 -0
package/dist/update/channel.js +135 -0
package/dist/update/channel.js.map +1 -0
package/package.json +68 -0

package/dist/server/public/index.html ADDED Viewed

@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>RageVault</title>
+    <meta name="ragevault-web" content="1" />
+    <!-- RageVault web UI · SoyRage Agency — https://soyrage.es/ -->
+    <!-- Installable app (PWA) — "Add to Home Screen" on Android / iOS -->
+    <link rel="manifest" href="manifest.webmanifest" />
+    <meta name="theme-color" content="#3b9ee8" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="RageVault" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <link rel="icon" href="favicon.png" type="image/png" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <span class="logo">RAGE<span class="accent">VAULT</span></span>
+      <div class="right">
+        <span id="ver" class="muted mono"></span>
+        <button id="settings-btn" class="icon-btn hidden" title="Settings" aria-label="Settings">⚙</button>
+        <button id="lock" class="ghost hidden">Lock</button>
+      </div>
+    </header>
+    <main class="wrap">
+      <!-- First run — create the vault (shown when no vault exists yet) -->
+      <section id="setup" class="lockscreen hidden">
+        <div class="lock">
+          <svg viewBox="0 0 120 140" width="96" height="112" aria-hidden="true">
+            <path class="shackle" d="M35 62 V44 a25 25 0 0 1 50 0 V62" fill="none" stroke="currentColor" stroke-width="12" stroke-linecap="round"/>
+            <rect class="body" x="22" y="60" width="76" height="62" rx="12"/>
+            <circle class="keyhole" cx="60" cy="86" r="8"/><rect class="keyhole" x="56" y="90" width="8" height="18" rx="4"/>
+          </svg>
+        </div>
+        <h1 class="lock-title">Welcome to RAGE<span class="accent">VAULT</span></h1>
+        <p class="muted">Create your vault. Choose a master password you'll remember — it encrypts everything and <b>cannot be recovered</b>.</p>
+        <div class="lock-input"><input id="s-name" type="text" placeholder="Vault name (e.g. Home Lab)" /></div>
+        <div class="lock-input"><input id="s-pass" type="password" placeholder="Master password" autocomplete="new-password" /><button id="s-gen" title="Suggest a strong passphrase">⚄</button></div>
+        <div class="lock-input"><input id="s-pass2" type="password" placeholder="Confirm master password" autocomplete="new-password" /><button id="setup-btn" title="Create vault">→</button></div>
+        <p id="setup-err" class="err"></p>
+        <div class="lock-foot">
+          <div class="lf-badges">
+            <span class="lf-badge">🔑 No reset — write it down</span>
+            <span class="lf-badge">🛡 Behind your VPN</span>
+            <span class="lf-badge">⚡ No telemetry</span>
+          </div>
+          <div class="lf-brand">RAGE<span class="accent">VAULT</span></div>
+          <div class="lf-sub">by <a href="https://soyrage.es/" target="_blank" rel="noreferrer">SoyRage Agency</a> · end-to-end encrypted · scrypt + AES-256-GCM</div>
+        </div>
+      </section>
+      <!-- Unlock — full-screen animated lock -->
+      <section id="unlock" class="lockscreen">
+        <div id="padlock" class="lock">
+          <svg viewBox="0 0 120 140" width="118" height="138" aria-hidden="true">
+            <path id="shackle" class="shackle" d="M35 62 V44 a25 25 0 0 1 50 0 V62" fill="none" stroke="currentColor" stroke-width="12" stroke-linecap="round"/>
+            <rect class="body" x="22" y="60" width="76" height="62" rx="12"/>
+            <circle class="keyhole" cx="60" cy="86" r="8"/>
+            <rect class="keyhole" x="56" y="90" width="8" height="18" rx="4"/>
+          </svg>
+        </div>
+        <h1 class="lock-title">RAGE<span class="accent">VAULT</span></h1>
+        <p id="lock-sub" class="muted">Enter your master password to unlock</p>
+        <div class="lock-input">
+          <input id="master" type="password" placeholder="Master password" autocomplete="current-password" />
+          <button id="unlock-btn" title="Unlock">→</button>
+        </div>
+        <p id="unlock-err" class="err"></p>
+        <div id="cop" class="cop hidden">
+          <div class="siren"></div>
+          <div class="cop-face">🚔</div>
+          <div class="cop-text">ACCESS NOT AUTHORIZED</div>
+          <div class="cop-sub">Too many failed attempts. This incident has been logged.</div>
+        </div>
+        <div class="lock-foot">
+          <div class="lf-badges">
+            <span class="lf-badge">🔒 Zero plaintext on disk</span>
+            <span class="lf-badge">🛡 Reach over your VPN</span>
+            <span class="lf-badge">⚡ No telemetry</span>
+          </div>
+          <div class="lf-brand">RAGE<span class="accent">VAULT</span></div>
+          <div class="lf-sub">by <a href="https://soyrage.es/" target="_blank" rel="noreferrer">SoyRage Agency</a> · end-to-end encrypted · scrypt + AES-256-GCM</div>
+        </div>
+      </section>
+      <!-- Vault -->
+      <section id="vault" class="hidden">
+        <div class="toolbar">
+          <input id="search" class="input" type="search" placeholder="Search items…" />
+          <button id="import-toggle" class="ghost">↓ Import</button>
+          <button id="add-toggle" class="primary">+ Add</button>
+        </div>
+        <form id="add-form" class="card hidden">
+          <div class="grid2">
+            <input id="f-title" class="input" placeholder="Title (e.g. GitHub)" required />
+            <input id="f-cat" class="input" placeholder="Category (optional)" />
+            <input id="f-user" class="input" placeholder="Username / email" />
+            <input id="f-url" class="input" placeholder="https://…" />
+            <input id="f-icon" class="input" placeholder="Icon — emoji (optional)" maxlength="4" />
+            <input id="f-pass" class="input" placeholder="Password" />
+          </div>
+          <div class="genrow">
+            <button type="button" id="f-gen" class="gen-black">⚡ Generate strong password</button>
+          </div>
+          <span id="f-strength" class="tiny muted center"></span>
+          <div class="row end">
+            <button type="submit" class="primary">Save item</button>
+          </div>
+        </form>
+        <ul id="items" class="items"></ul>
+      </section>
+      <!-- One-click import — “switching is easy” -->
+      <div id="import-modal" class="modal-backdrop hidden">
+        <div class="modal import-card">
+          <button id="import-close" class="modal-x" title="Close" aria-label="Close">✕</button>
+          <div class="import-badge">Switching is easy</div>
+          <h2 class="display import-title">Bring every password with you</h2>
+          <p class="muted import-lead">Export from your current manager, drop the file below, and you're done. RageVault auto-detects the format — no manual mapping, nothing leaves this machine.</p>
+          <div class="providers">
+            <div class="prov"><span class="prov-logo bw">bw</span>Bitwarden</div>
+            <div class="prov"><span class="prov-logo op">1P</span>1Password</div>
+            <div class="prov"><span class="prov-logo pp">P</span>Proton&nbsp;Pass</div>
+            <div class="prov"><span class="prov-logo lp">::</span>LastPass</div>
+            <div class="prov"><span class="prov-logo csv">≡</span>Any&nbsp;CSV</div>
+          </div>
+          <label id="dropzone" class="dropzone">
+            <input id="import-file" type="file" accept=".json,.csv,.txt" hidden />
+            <div class="dz-icon">⬆</div>
+            <div class="dz-main">Drop your export here <span class="muted">or click to browse</span></div>
+            <div class="tiny muted">.json or .csv · parsed locally, never uploaded</div>
+          </label>
+          <p id="import-status" class="import-status"></p>
+        </div>
+      </div>
+      <!-- Settings — themes, change master password, replay tour -->
+      <div id="settings-modal" class="modal-backdrop hidden">
+        <div class="modal settings-card">
+          <button id="settings-close" class="modal-x" title="Close" aria-label="Close">✕</button>
+          <h2 class="display settings-title">Settings</h2>
+          <div class="set-section">
+            <div class="set-label">Appearance</div>
+            <div class="themes" id="themes">
+              <button class="theme-swatch" data-theme="cream"><span class="sw sw-cream"></span>Cream</button>
+              <button class="theme-swatch" data-theme="dark"><span class="sw sw-dark"></span>Dark</button>
+              <button class="theme-swatch" data-theme="midnight"><span class="sw sw-midnight"></span>Midnight</button>
+              <button class="theme-swatch" data-theme="forest"><span class="sw sw-forest"></span>Forest</button>
+            </div>
+          </div>
+          <div class="set-section">
+            <div class="set-label">Change master password</div>
+            <input id="cp-current" class="input" type="password" placeholder="Current master password" autocomplete="current-password" />
+            <input id="cp-new" class="input" type="password" placeholder="New master password" autocomplete="new-password" />
+            <input id="cp-confirm" class="input" type="password" placeholder="Confirm new password" autocomplete="new-password" />
+            <div class="row end"><button id="cp-save" class="primary">Update password</button></div>
+            <p id="cp-status" class="tiny cp-status"></p>
+          </div>
+          <div class="set-section set-about">
+            <span class="muted">RageVault <span id="set-ver" class="mono"></span> · <a href="https://soyrage.es/" target="_blank" rel="noreferrer">SoyRage Agency</a></span>
+            <button id="tour-replay" class="link-btn">↻ Replay the tour</button>
+          </div>
+        </div>
+      </div>
+      <!-- First-run interactive spotlight tour -->
+      <div id="tour" class="tour hidden" aria-hidden="true">
+        <div id="tour-hole" class="tour-hole"></div>
+        <div id="tour-pop" class="tour-pop">
+          <div class="tour-step">RageVault tour</div>
+          <div id="tour-title" class="tour-title"></div>
+          <div id="tour-body" class="tour-body"></div>
+          <div class="tour-nav">
+            <span id="tour-progress" class="tour-progress"></span>
+            <div class="tour-btns">
+              <button id="tour-skip" class="link-btn">Skip</button>
+              <button id="tour-next" class="primary tour-next">Next →</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="foot">
+      <div class="foot-brand">RAGE<span class="accent">VAULT</span></div>
+      <div class="foot-tag">Self-hosted · end-to-end encrypted · <span class="mono">scrypt + AES-256-GCM</span></div>
+      <div class="foot-badges">
+        <span class="fbadge">🔒 Zero plaintext on disk</span>
+        <span class="fbadge">🛡 Behind your VPN</span>
+        <span class="fbadge">⚡ No telemetry</span>
+      </div>
+      <div class="foot-links">
+        <a href="https://soyrage.es/" target="_blank" rel="noreferrer">SoyRage Agency</a>
+        <span class="dotsep">·</span>
+        <a href="https://github.com/soyrageagency/ragevault" target="_blank" rel="noreferrer">GitHub</a>
+        <span class="dotsep">·</span>
+        <a href="https://haveibeenpwned.com/Passwords" target="_blank" rel="noreferrer">Breach-checked</a>
+      </div>
+    </footer>
+    <!-- Unlock reveal: a black circle zooms in with the green open padlock, then bursts open -->
+    <div id="reveal" class="reveal hidden" aria-hidden="true">
+      <div class="circle">
+        <svg viewBox="0 -54 120 200" width="90" height="150">
+          <path class="rshackle" d="M35 62 V44 a25 25 0 0 1 50 0 V62" fill="none" stroke="#3ad07f" stroke-width="12" stroke-linecap="round"/>
+          <rect x="22" y="60" width="76" height="62" rx="12" fill="#3ad07f"/>
+          <circle cx="60" cy="86" r="8" fill="#0b3d22"/>
+          <rect x="56" y="90" width="8" height="18" rx="4" fill="#0b3d22"/>
+        </svg>
+      </div>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>

package/dist/server/public/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "RageVault",
+  "short_name": "RageVault",
+  "description": "Your self-hosted, end-to-end-encrypted password manager.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#f3f1ea",
+  "theme_color": "#3b9ee8",
+  "icons": [
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

package/dist/server/public/styles.css ADDED Viewed

@@ -0,0 +1,362 @@
+/* RageVault web UI — SoyRage minimalist (cream / ink / blue). */
+/* Self-hosted display faces — no external request (privacy: nothing leaves the box). */
+@font-face {
+  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700;
+  font-display: swap; src: url("fonts/space-grotesk.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Archivo"; font-style: normal; font-weight: 600 900;
+  font-display: swap; src: url("fonts/archivo.woff2") format("woff2");
+}
+:root {
+  --cream: #f3f1ea; --bg: #ffffff; --bg2: #faf9f5; --ink: #111111; --muted: #8b8b86;
+  --accent: #3b9ee8; --accent-2: #6cc0ff; --accent-soft: rgba(59,158,232,0.12); --border: #e7e3da;
+  --green: #3a8f5c; --red: #c8524a; --amber: #b8892a; --radius: 16px;
+  --sans: "Inter", "Segoe UI", system-ui, sans-serif; --mono: "SFMono-Regular", Consolas, monospace;
+  --display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
+  --wordmark: "Archivo", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
+}
+* { box-sizing: border-box; }
+body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream);
+  background-image: linear-gradient(rgba(17,17,17,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.02) 1px, transparent 1px);
+  background-size: 46px 46px; min-height: 100vh; position: relative; }
+/* Creative blue "sun" glow rising from the bottom so the page never feels flat by the footer. */
+body::after {
+  content: ""; position: fixed; left: 50%; bottom: -240px; transform: translateX(-50%);
+  width: min(1100px, 150vw); height: 480px; pointer-events: none; z-index: 0;
+  background: radial-gradient(60% 100% at 50% 100%, rgba(59,158,232,.34) 0%, rgba(108,192,255,.18) 34%, rgba(59,158,232,.06) 62%, transparent 78%);
+  filter: blur(26px); animation: sunBreathe 7s ease-in-out infinite;
+}
+@keyframes sunBreathe { 0%,100% { opacity: .85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
+.topbar, .wrap, .foot, #vault, .lockscreen { position: relative; z-index: 1; }
+h1, .logo, .lock-title, .display { font-family: var(--display); }
+.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); background: rgba(243,241,234,.8); backdrop-filter: blur(6px); position: sticky; top: 0; }
+.logo { font-family: var(--wordmark); font-weight: 900; letter-spacing: -.01em; font-size: 20px; }
+.accent { color: var(--accent); }
+.right { display: flex; align-items: center; gap: 12px; }
+.wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
+.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px rgba(17,17,17,.04); }
+.narrow { max-width: 420px; margin: 8vh auto 0; display: flex; flex-direction: column; gap: 12px; }
+h1 { font-size: 20px; margin: 0; }
+.input { padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); font-size: 14px; outline: none; width: 100%; }
+.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.primary { background: var(--ink); color: #fff; border: none; border-radius: 999px; padding: 10px 18px; font-weight: 600; cursor: pointer; font-size: 14px; white-space: nowrap; }
+.primary:hover { background: #000; }
+.ghost { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
+.ghost:hover { border-color: var(--accent); color: var(--accent); }
+.muted { color: var(--muted); font-size: 13px; }
+.tiny { font-size: 11px; }
+.mono { font-family: var(--mono); }
+.err { color: var(--red); font-size: 13px; min-height: 16px; margin: 0; }
+.hidden { display: none; }
+.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
+.toolbar .input { flex: 1; }
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
+.row { display: flex; gap: 10px; align-items: center; }
+.grow { flex: 1; }
+.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
+.item .avatar { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; overflow: hidden; }
+/* A loaded favicon covers the letter fallback (white bg so transparent icons read). */
+.item .avatar .fav { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
+.item .body { flex: 1; min-width: 0; }
+.item .title { font-weight: 600; }
+.item .sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item .secret { font-family: var(--mono); letter-spacing: 2px; color: var(--muted); }
+.item .secret.shown { letter-spacing: 0; color: var(--accent); }
+.item .acts { display: flex; gap: 6px; }
+.item .acts button { border: 1px solid var(--border); background: var(--bg2); border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
+.item .acts button:hover { border-color: var(--accent); color: var(--accent); }
+.foot { display: flex; align-items: center; justify-content: space-between; max-width: 760px; margin: 0 auto; padding: 20px; color: var(--muted); font-size: 12px; }
+.foot a { color: var(--accent); }
+@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
+/* ============================ Lock screen ============================ */
+.lockscreen {
+  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 14px; padding: 24px;
+  background:
+    radial-gradient(66% 46% at 50% 116%, rgba(59,158,232,.34) 0%, rgba(108,192,255,.16) 38%, rgba(59,158,232,.04) 64%, transparent 78%),
+    radial-gradient(120% 90% at 50% 0%, #fbfaf6 0%, var(--cream) 55%);
+}
+/* .lockscreen's own display:flex would beat the earlier .hidden rule, so scope it. */
+.lockscreen.hidden { display: none !important; }
+/* The glow gently breathes behind the padlock. */
+.lockscreen::after {
+  content: ""; position: absolute; left: 50%; bottom: -160px; transform: translateX(-50%);
+  width: min(900px, 130vw); height: 360px; pointer-events: none; z-index: -1;
+  background: radial-gradient(60% 100% at 50% 100%, rgba(59,158,232,.30) 0%, rgba(108,192,255,.14) 40%, transparent 74%);
+  filter: blur(30px); animation: sunBreathe 7s ease-in-out infinite;
+}
+.lock { color: var(--accent); transition: color .25s ease; }
+.lock svg .body { fill: currentColor; }
+.lock svg .keyhole { fill: var(--cream); }
+.lock svg .shackle { transition: transform .5s cubic-bezier(.2,.9,.2,1); transform-origin: 60px 60px; }
+.lock-title { font-family: var(--wordmark); margin: 6px 0 0; font-size: 40px; font-weight: 900; letter-spacing: -.025em; line-height: 1; }
+.lock-title .accent { color: var(--accent); }
+.lock-input { display: flex; gap: 8px; margin-top: 6px; width: min(360px, 90vw); }
+.lock-input input {
+  flex: 1; padding: 13px 16px; border: 1px solid var(--border); border-radius: 999px;
+  background: var(--bg); font-size: 15px; outline: none; text-align: center;
+}
+.lock-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
+.lock-input button {
+  width: 48px; border: none; border-radius: 50%; background: var(--ink); color: #fff;
+  font-size: 20px; cursor: pointer; transition: background .2s;
+}
+.lock-input button:hover { background: #000; }
+.lock-vpn { margin-top: 2px; }
+/* Wrong password: turn red + shake. */
+.lock.fail { color: var(--red); animation: shake .5s; }
+.lock.fail svg .body { fill: var(--red); }
+.lockscreen.fail .lock-input input { border-color: var(--red); box-shadow: 0 0 0 4px rgba(200,82,74,.18); }
+@keyframes shake {
+  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
+  30%,50%,70%{transform:translateX(-8px)} 40%,60%{transform:translateX(8px)}
+}
+/* Correct: shackle lifts, glow green, then the screen fades away. */
+.lock.open { color: var(--green); }
+.lock.open svg .body { fill: var(--green); }
+.lock.open svg .shackle { transform: translateY(-16px); }
+.lockscreen.open { animation: unlockOut .55s ease .35s forwards; }
+@keyframes unlockOut { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
+/* Temporary lockout. */
+.lockscreen.locked .lock-input input, .lockscreen.locked .lock-input button { opacity: .5; pointer-events: none; }
+/* ===== "ACCESS NOT AUTHORIZED" easter egg (many failures) ===== */
+.cop {
+  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 14px; color: #fff;
+  background: #7a1410; animation: copIn .3s ease;
+}
+.cop.hidden { display: none; }
+.cop .cop-face { font-size: 92px; animation: bob 1s ease-in-out infinite; }
+.cop .cop-text { font-weight: 900; font-size: clamp(24px, 7vw, 54px); letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
+.cop .cop-sub { opacity: .85; font-size: 14px; }
+.cop .siren { position: absolute; inset: 0; pointer-events: none; animation: siren 1s steps(1) infinite; }
+@keyframes siren { 0%{background:radial-gradient(60% 50% at 20% 0%, rgba(255,60,60,.6), transparent 60%)} 50%{background:radial-gradient(60% 50% at 80% 0%, rgba(80,120,255,.6), transparent 60%)} }
+@keyframes bob { 50% { transform: translateY(-10px) rotate(-4deg); } }
+@keyframes copIn { from { opacity: 0; } }
+/* ============================ Update banner ============================ */
+#rv-update {
+  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40;
+  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
+  background: var(--ink); color: #fff; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
+  font-size: 13px;
+}
+#rv-update.hidden { display: none; }
+#rv-update button { border: none; border-radius: 999px; padding: 7px 14px; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; }
+#rv-update .later { background: transparent; color: rgba(255,255,255,.7); }
+/* ============================ Mobile polish ============================ */
+@media (max-width: 560px) {
+  .grid2 { grid-template-columns: 1fr; }
+  .wrap { padding: 16px 12px 80px; }
+  .topbar { padding: 12px 16px; }
+  /* Cards: title on its own line, secret + actions wrap to a second row. */
+  .item { flex-wrap: wrap; gap: 8px 10px; }
+  .item .avatar { width: 38px; height: 38px; }
+  .item .body { flex: 1 1 calc(100% - 50px); min-width: 0; }
+  .item .body .title { white-space: normal; line-height: 1.2; }
+  .item .secret { order: 3; flex: 1 1 auto; margin-left: 50px; text-align: left; }
+  .item .acts { order: 4; margin-left: auto; }
+  .item .acts button { padding: 8px 14px; font-size: 13px; } /* bigger tap targets */
+  .toolbar .input { min-width: 0; }
+}
+/* ===== Creative unlock reveal (black circle → green padlock opens) =====
+   Scoped to the #reveal overlay by id — the item action buttons also use a
+   `.reveal` class, so class selectors here would collide with them. */
+#reveal {
+  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
+  pointer-events: none;
+  /* Frosted, subtly-tinted backdrop that blurs whatever's behind. */
+  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
+  background: radial-gradient(circle at 50% 44%, rgba(59,158,232,.12), rgba(13,15,18,.06) 55%, rgba(13,15,18,.24));
+}
+#reveal.hidden { display: none; }
+#reveal .circle {
+  width: 220px; height: 220px; border-radius: 50%; background: #0d0f12;
+  display: flex; align-items: center; justify-content: center; transform: scale(0);
+  box-shadow: 0 30px 80px rgba(0,0,0,.45);
+}
+#reveal .rshackle { transform-origin: 84px 60px; } /* hinge on the right leg */
+#reveal.grow .circle { animation: revealGrow .45s cubic-bezier(.2,.9,.2,1) forwards; }
+/* The green padlock lifts then swings its shackle open, like a real lock. */
+#reveal.grow .rshackle { animation: shackleOpen .7s .28s cubic-bezier(.34,1.3,.4,1) forwards; }
+/* Exit: no zoom — the circle just fades away, revealing the vault. */
+#reveal.fade { animation: revealFade .5s ease forwards; }
+@keyframes revealGrow { 0% { transform: scale(0) rotate(-14deg); } 68% { transform: scale(1.05) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
+@keyframes shackleOpen { 0% { transform: translateY(0) rotate(0); } 42% { transform: translateY(-17px) rotate(0); } 100% { transform: translateY(-11px) rotate(36deg); } }
+@keyframes revealFade { to { opacity: 0; } }
+/* Staggered item entrance when the vault first opens. */
+.items.just-opened .item { opacity: 0; animation: itemIn .4s cubic-bezier(.2,.9,.2,1) forwards; }
+.items.just-opened .item:nth-child(1){animation-delay:.02s} .items.just-opened .item:nth-child(2){animation-delay:.07s}
+.items.just-opened .item:nth-child(3){animation-delay:.12s} .items.just-opened .item:nth-child(4){animation-delay:.17s}
+.items.just-opened .item:nth-child(5){animation-delay:.22s} .items.just-opened .item:nth-child(6){animation-delay:.27s}
+.items.just-opened .item:nth-child(7){animation-delay:.32s} .items.just-opened .item:nth-child(8){animation-delay:.37s}
+.items.just-opened .item:nth-child(n+9){animation-delay:.42s}
+@keyframes itemIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
+/* The vault content eases in as the reveal overlay clears. */
+#vault.entering { animation: vaultIn .6s cubic-bezier(.2,.9,.2,1); }
+@keyframes vaultIn { from { opacity: 0; transform: translateY(10px) scale(.992); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
+/* ============================ Import modal ============================ */
+.modal-backdrop {
+  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
+  background: rgba(17,17,17,.34); backdrop-filter: blur(6px); animation: fadeIn .2s ease;
+}
+/* Its own display:grid would otherwise beat the earlier .hidden rule (same specificity, later wins). */
+.modal-backdrop.hidden { display: none; }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+.modal {
+  position: relative; width: min(560px, 96vw); background: var(--bg); border: 1px solid var(--border);
+  border-radius: 22px; padding: 30px 30px 26px; box-shadow: 0 30px 80px rgba(17,17,17,.22);
+  animation: popIn .26s cubic-bezier(.2,.9,.2,1);
+  background-image: radial-gradient(120% 70% at 50% 118%, rgba(59,158,232,.12), transparent 60%);
+}
+@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
+.modal-x { position: absolute; top: 14px; right: 16px; border: none; background: transparent; font-size: 16px; color: var(--muted); cursor: pointer; line-height: 1; }
+.modal-x:hover { color: var(--ink); }
+.import-badge {
+  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
+}
+.import-title { font-size: 27px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
+.import-lead { margin: 0 0 18px; line-height: 1.5; }
+.providers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
+.prov { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 7px 12px 7px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg2); }
+.prov-logo { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; font-family: var(--display); }
+.prov-logo.bw { background: #175ddc; } .prov-logo.op { background: #1a70e2; }
+.prov-logo.pp { background: #6d4aff; } .prov-logo.lp { background: #d32d27; }
+.prov-logo.csv { background: #3a8f5c; }
+.dropzone {
+  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
+  padding: 30px 20px; border: 2px dashed var(--border); border-radius: 18px; background: var(--bg2);
+  transition: border-color .18s, background .18s, transform .18s;
+}
+.dropzone:hover { border-color: var(--accent); }
+.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
+.dz-icon {
+  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
+  color: #fff; background: var(--accent); box-shadow: 0 8px 22px rgba(59,158,232,.4); margin-bottom: 4px;
+}
+.dz-main { font-weight: 600; font-size: 15px; }
+.import-status { min-height: 18px; margin: 14px 0 0; font-size: 13px; font-weight: 600; text-align: center; }
+.import-status.ok { color: var(--green); } .import-status.err { color: var(--red); } .import-status.working { color: var(--muted); }
+@media (max-width: 560px) { .modal { padding: 26px 20px 22px; } .import-title { font-size: 23px; } }
+/* ============================ Themes ============================ */
+html[data-theme="dark"] {
+  --cream: #14161b; --bg: #1e222a; --bg2: #191c23; --ink: #e9ebef; --muted: #98a0ac;
+  --accent: #4fa8ec; --accent-2: #79c1ff; --accent-soft: rgba(79,168,236,.18); --border: #2c313c;
+  --green: #52c08a; --red: #e0736b; --amber: #e0b04a;
+}
+html[data-theme="midnight"] {
+  --cream: #0c1022; --bg: #161c34; --bg2: #121729; --ink: #e6eaf6; --muted: #8b93b4;
+  --accent: #7aa2ff; --accent-2: #a9c2ff; --accent-soft: rgba(122,162,255,.18); --border: #26304f;
+  --green: #56cc96; --red: #ea7a86; --amber: #e6b657;
+}
+html[data-theme="forest"] {
+  --cream: #0e1712; --bg: #16241c; --bg2: #121e17; --ink: #e7f0ea; --muted: #8fa89a;
+  --accent: #4fc78a; --accent-2: #86e0b3; --accent-soft: rgba(79,199,138,.18); --border: #223a2d;
+  --green: #57cf90; --red: #e37c73; --amber: #e2b656;
+}
+/* Dark themes: soften the paper grid + let the lock screens follow the palette. */
+html[data-theme="dark"] body, html[data-theme="midnight"] body, html[data-theme="forest"] body {
+  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
+}
+.lockscreen { background:
+  radial-gradient(66% 46% at 50% 116%, rgba(59,158,232,.30) 0%, rgba(108,192,255,.14) 38%, transparent 74%),
+  radial-gradient(120% 90% at 50% 0%, var(--bg2) 0%, var(--cream) 55%); }
+.topbar { background: color-mix(in srgb, var(--cream) 82%, transparent); }
+/* ============================ Header gear ============================ */
+.icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
+  color: var(--ink); font-size: 15px; cursor: pointer; line-height: 1; transition: transform .3s, border-color .15s, color .15s; }
+.icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(60deg); }
+/* ============================ Add-form: centered black Generate ============================ */
+.genrow { display: flex; justify-content: center; margin: 12px 0 4px; }
+.gen-black { background: var(--ink); color: #fff; border: none; border-radius: 999px; padding: 11px 26px;
+  font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, transform .1s, box-shadow .2s;
+  box-shadow: 0 8px 20px rgba(17,17,17,.14); }
+.gen-black:hover { background: #000; box-shadow: 0 10px 26px rgba(17,17,17,.22); }
+.gen-black:active { transform: scale(.97); }
+.center { text-align: center; display: block; }
+.row.end { justify-content: flex-end; }
+/* ============================ Centered, richer footer ============================ */
+.foot { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px 30px; }
+.foot-brand { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .02em; }
+.foot-tag { color: var(--muted); font-size: 12px; }
+.foot-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0; }
+.fbadge { font-size: 11px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--border);
+  padding: 5px 11px; border-radius: 999px; opacity: .9; }
+.foot-links { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.foot-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
+.dotsep { opacity: .45; }
+/* The rich page footer belongs to the vault view only — never floating over the
+   lock/setup screens (each of those has its own pinned strip). */
+.foot { display: none; }
+body.vault-open .foot { display: flex; }
+/* Compact brand strip pinned to the bottom of the lock / setup screens. */
+.lock-foot { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 20px; }
+.lock-foot .lf-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 4px; }
+.lock-foot .lf-badge { font-size: 10.5px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--border); padding: 4px 9px; border-radius: 999px; }
+.lock-foot .lf-brand { font-family: var(--wordmark); font-weight: 800; font-size: 13px; letter-spacing: -.01em; color: var(--ink); }
+.lock-foot .lf-sub { font-size: 11px; color: var(--muted); }
+.lock-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
+/* ============================ Settings ============================ */
+.settings-card { width: min(460px, 96vw); text-align: left; }
+.settings-title { font-size: 24px; margin: 0 0 14px; }
+.set-section { padding: 14px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
+.set-section:first-of-type { border-top: none; }
+.set-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
+.themes { display: flex; flex-wrap: wrap; gap: 8px; }
+.theme-swatch { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--border);
+  border-radius: 999px; background: var(--bg2); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s; }
+.theme-swatch:hover { border-color: var(--accent); }
+.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.sw { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); }
+.sw-cream { background: linear-gradient(135deg, #f3f1ea 60%, #3b9ee8 60%); }
+.sw-dark { background: linear-gradient(135deg, #1e222a 60%, #4fa8ec 60%); }
+.sw-midnight { background: linear-gradient(135deg, #161c34 60%, #7aa2ff 60%); }
+.sw-forest { background: linear-gradient(135deg, #16241c 60%, #4fc78a 60%); }
+.cp-status { min-height: 15px; margin: 2px 0 0; font-weight: 600; }
+.cp-status.ok { color: var(--green); } .cp-status.err { color: var(--red); }
+.set-about { flex-direction: row; align-items: center; justify-content: space-between; }
+.link-btn { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }
+/* ============================ Onboarding tour ============================ */
+.tour { position: fixed; inset: 0; z-index: 90; }
+.tour.hidden { display: none; }
+.tour-hole { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10,12,18,.62); transition: all .35s cubic-bezier(.2,.9,.2,1); pointer-events: none; }
+.tour-pop { position: absolute; width: min(320px, 90vw); background: var(--bg); border: 1px solid var(--border);
+  border-radius: 16px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.3); transition: all .35s cubic-bezier(.2,.9,.2,1); }
+.tour-step { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
+.tour-title { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 4px 0 6px; }
+.tour-body { font-size: 13px; color: var(--muted); line-height: 1.5; }
+.tour-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
+.tour-progress { font-size: 12px; color: var(--muted); font-family: var(--mono); }
+.tour-btns { display: flex; align-items: center; gap: 10px; }
+.tour-next { padding: 8px 16px; font-size: 13px; }
+/* Custom emoji icon on an item avatar. */
+.item .avatar.emoji { font-size: 18px; background: var(--bg2); }
+/* "Install the browser extension" tip (shown only when it isn't detected). */
+.ext-tip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
+  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 14px; animation: fadeIn .3s ease; }
+.ext-tip .et-ico { font-size: 20px; }
+.ext-tip .et-text { flex: 1; font-size: 13px; line-height: 1.4; }
+.ext-tip .et-get { background: var(--ink); color: #fff; text-decoration: none; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
+.ext-tip .et-get:hover { background: #000; }
+.ext-tip .et-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px; }

package/dist/server/public/sw.js ADDED Viewed

@@ -0,0 +1,30 @@
+/* RageVault service worker — makes the app installable and loads the shell
+ * offline. It never caches vault data or API responses (those need the server
+ * and your session), only the static shell. SoyRage Agency — https://soyrage.es/ */
+"use strict";
+const CACHE = "ragevault-shell-v4";
+const SHELL = ["./", "./index.html", "./app.js", "./styles.css", "./icon-192.png", "./manifest.webmanifest", "./fonts/space-grotesk.woff2", "./fonts/archivo.woff2"];
+self.addEventListener("install", (e) => {
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
+});
+self.addEventListener("activate", (e) => {
+  e.waitUntil(caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))).then(() => self.clients.claim()));
+});
+// The page asks us to activate the waiting version immediately (update flow).
+self.addEventListener("message", (e) => { if (e.data && e.data.type === "SKIP_WAITING") self.skipWaiting(); });
+self.addEventListener("fetch", (e) => {
+  const url = new URL(e.request.url);
+  // Never touch the API — always hit the network (and don't cache secrets).
+  if (url.pathname.startsWith("/api/")) return;
+  // Network-first for the shell (updates arrive immediately), cache as offline
+  // fallback. The server is normally reachable over your LAN/VPN.
+  e.respondWith(
+    fetch(e.request).then((res) => {
+      const copy = res.clone();
+      caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {});
+      return res;
+    }).catch(() => caches.match(e.request)),
+  );
+});