@vibelord/lanes 1.0.0

package/payload/lanes/web/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<!-- Upstream scripts and integrity hashes: pinned Zellij 0.45.1. -->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#101318" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Lanes" />
+    <title>Lanes</title>
+    <link rel="icon" href="/lanes-assets/icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/lanes-assets/icon-192.png" />
+    <link rel="manifest" href="/lanes-assets/manifest.webmanifest" />
+    <link rel="stylesheet" href="/assets/style.css" integrity="sha384-qvSJURWrtlva+87171/c2KHjzg2kzTYgjlEkCLTCdadhZtJA5MyGgt7VgOj9dE0D" />
+    <link rel="stylesheet" href="/assets/xterm.css" integrity="sha384-Mz9RDc16Iua5vrzALPqUZn39WVfelFzZvwpqCNkMKji5gpYeP3kNCMPGypMFf0AD" />
+    <link rel="stylesheet" href="/lanes-assets/mobile.css" />
+    <script src="/lanes-assets/mobile.js" defer></script>
+    <script src="/assets/xterm.js" integrity="sha384-9qDi2ngVq54Xf5EPnRuadR1QvddqkiXlIm8UFlQQc58yvC6XKRDPraE8W8PEkjQu"></script>
+    <script src="/assets/addon-fit.js" integrity="sha384-zZmjmUWgxteKU0acxOtNmpWCMwSnn1/pSIhFBXVx6ARJ4pD/eD3E0dDCccITHWWD"></script>
+    <script src="/assets/addon-clipboard.js" integrity="sha384-u4EBOaE07GHmKsUXC4q1Q+tB3DztCkgpT0AzFavi1gCO/qQryHvcVVI05jk/B8hG"></script>
+    <script src="/assets/addon-web-links.js" integrity="sha384-Zb/L38m4THfRbsxxv8gWAi8cQ6xcWQnv0BgR0qwbTDwtBDaPi6pkyfgfBIH6C8ZG"></script>
+    <script src="/assets/addon-webgl.js" integrity="sha384-AkzdQDeATxpW8V7I2EPcwg17qAoLQMjEFHb//1QaAAIyIlbDAHGKno5+huH7RKxq"></script>
+  </head>
+  <body>
+    <div id="terminal" tabindex="0"></div>
+    <script src="/assets/modals.js" integrity="sha384-iDRet9veierC1HWbStHC4LLKCSzjeIZTrPRePuKxiUxr7UvdmJ5epb+PYqgHYqte"></script>
+    <script type="module" src="/assets/app.js" integrity="sha384-zEYVY/2DhkJGDOJDhP5qx+pWO6zp80b3z6IXnbDUlNjRjCHgSdwSSwpRU5rQLndq"></script>
+  </body>
+</html>

package/payload/lanes/web/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+  "id": "/phone",
+  "name": "Lanes",
+  "short_name": "Lanes",
+  "description": "Your workspaces, wherever you are.",
+  "start_url": "/phone",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#101318",
+  "theme_color": "#101318",
+  "icons": [
+    {"src": "/lanes-assets/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable"},
+    {"src": "/lanes-assets/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any"}
+  ]
+}

package/payload/lanes/web/mobile.css

@@ -0,0 +1,301 @@
+/* Safe areas apply in Home Screen mode and on both sides of landscape Safari. */
+html.lanes-mobile {
+  --lanes-bg: #101318;
+  --lanes-panel: #191e25;
+  --lanes-border: #2c333d;
+  --lanes-text: #edf1f5;
+  --lanes-muted: #9ca7b5;
+  --lanes-accent: #b4e3bf;
+  --lanes-current: #1a2721;
+  --lanes-current-border: #4b6955;
+  --lanes-press: #26332c;
+  --lanes-chip: #ffffff09;
+  --lanes-safe-top: env(safe-area-inset-top, 0px);
+  --lanes-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --lanes-safe-left: env(safe-area-inset-left, 0px);
+  --lanes-safe-right: env(safe-area-inset-right, 0px);
+  --lanes-head: calc(58px + var(--lanes-safe-top));
+  --lanes-dock: calc(66px + var(--lanes-safe-bottom));
+  --lanes-keys: 0px;
+  --lanes-vh: 100dvh;
+  --lanes-vw: 100vw;
+  --lanes-offset-top: 0px;
+  --lanes-offset-left: 0px;
+  color-scheme: dark;
+  -webkit-text-size-adjust: 100%;
+  overscroll-behavior: none;
+}
+html.lanes-mobile:root {
+  --zj-bg: var(--lanes-bg);
+  --zj-surface: var(--lanes-panel);
+  --zj-border: var(--lanes-border);
+  --zj-text: var(--lanes-text);
+  --zj-text-dim: var(--lanes-muted);
+  --zj-green: var(--lanes-accent);
+  --zj-blue: var(--lanes-accent);
+}
+html.lanes-mobile:root[data-zj-theme="light"] {
+  --lanes-bg: #f3f5f2;
+  --lanes-panel: #ffffff;
+  --lanes-border: #d5ded6;
+  --lanes-text: #17241b;
+  --lanes-muted: #59695f;
+  --lanes-accent: #356544;
+  --lanes-current: #e5f0e6;
+  --lanes-current-border: #acc9b4;
+  --lanes-press: #d8e9db;
+  --lanes-chip: #edf3ec;
+  color-scheme: light;
+}
+html.lanes-keyboard {
+  --lanes-dock: 48px;
+  --lanes-keys: 48px;
+  --lanes-safe-bottom: 0px;
+}
+.lanes-mobile body { overscroll-behavior: none; }
+.lanes-shell, .lanes-shell *, .lanes-mobile .security-modal *, .lanes-mobile #zj-mobile-root * {
+  box-sizing: border-box;
+}
+.lanes-shell {
+  color: var(--lanes-text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-tap-highlight-color: transparent;
+}
+.lanes-shell [hidden], .lanes-shell[hidden] { display: none !important; }
+.lanes-shell button, .lanes-mobile #zj-mobile-root button {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+}
+.lanes-shell button { font: inherit; color: inherit; }
+.lanes-shell button:focus-visible, .lanes-shell input:focus-visible {
+  outline: 2px solid var(--lanes-accent); outline-offset: -3px;
+}
+.lanes-ready .zj-mobile-topbar { display: none !important; }
+.lanes-ready body.zj-mobile-active #terminal {
+  position: fixed;
+  top: calc(var(--lanes-offset-top) + var(--lanes-head) + 8px);
+  left: calc(var(--lanes-offset-left) + var(--lanes-safe-left) + 8px);
+  width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px);
+  height: calc(var(--lanes-vh) - var(--lanes-head) - var(--lanes-dock) - var(--lanes-keys) - 16px);
+  margin: 0;
+  padding: 0;
+}
+.lanes-header {
+  position: fixed; z-index: 510;
+  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
+  width: var(--lanes-vw); height: var(--lanes-head);
+  padding: var(--lanes-safe-top) calc(8px + var(--lanes-safe-right)) 0 calc(12px + var(--lanes-safe-left));
+  display: flex; align-items: center; gap: 10px;
+  background: var(--lanes-bg); border-bottom: 1px solid var(--lanes-border);
+}
+.lanes-brand { height: 34px; width: 34px; flex: 0 0 34px; }
+.lanes-context {
+  display: flex; flex: 1; min-width: 0; height: 54px;
+  flex-direction: column; justify-content: center; align-items: flex-start;
+  border: 0; background: none; padding: 0; text-align: left;
+}
+.lanes-context strong { font-size: 16px; letter-spacing: -.25px; line-height: 22px; }
+.lanes-context span { font-size: 12px; color: var(--lanes-muted); line-height: 18px; }
+.lanes-context strong, .lanes-context span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lanes-button {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 5px; min-width: 48px; min-height: 48px; padding: 5px;
+  border: 0; background: transparent; border-radius: 12px;
+}
+.lanes-button svg { width: 23px; height: 23px; flex: 0 0 23px; }
+.lanes-button span { font-size: 10px; font-weight: 600; letter-spacing: .1px; }
+.lanes-more, .lanes-close { flex: 0 0 48px; }
+.lanes-more span, .lanes-close span { display: none; }
+.lanes-button:active, .lanes-workspace:active { background: var(--lanes-press); }
+.lanes-dock {
+  position: fixed; z-index: 510;
+  top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock));
+  left: var(--lanes-offset-left); width: var(--lanes-vw); height: var(--lanes-dock);
+  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
+  padding: 4px calc(8px + var(--lanes-safe-right)) var(--lanes-safe-bottom) calc(8px + var(--lanes-safe-left));
+  border-top: 1px solid var(--lanes-border); background: var(--lanes-bg);
+}
+.lanes-dock .lanes-button { color: var(--lanes-muted); }
+.lanes-dock .lanes-button[aria-pressed="true"] { color: var(--lanes-accent); background: var(--lanes-current); }
+.lanes-terminal-input {
+  position: relative; align-self: center; min-width: 0; height: 52px;
+  margin: 0 2px; border: 1px solid var(--lanes-border); border-radius: 12px;
+  background: var(--lanes-panel); color: var(--lanes-muted);
+}
+.lanes-input-label {
+  position: absolute; inset: 0; pointer-events: none;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
+}
+.lanes-input-label svg { width: 23px; height: 23px; }
+.lanes-input-label span { font-size: 10px; font-weight: 600; }
+.lanes-terminal-input:focus-within, .lanes-terminal-input.is-typing {
+  border-color: var(--lanes-accent); color: var(--lanes-accent); background: var(--lanes-current);
+}
+.lanes-keyboard .lanes-dock { padding-top: 0; }
+.lanes-keyboard .lanes-dock .lanes-button { min-height: 44px; padding: 0; }
+.lanes-keyboard .lanes-dock .lanes-button span { display: none; }
+.lanes-keyboard .lanes-terminal-input { height: 44px; }
+.lanes-keyboard .lanes-input-label { flex-direction: row; gap: 5px; }
+.lanes-ready .zj-mobile-modbar {
+  top: calc(var(--lanes-offset-top) + var(--lanes-vh) - var(--lanes-dock) - var(--lanes-keys));
+  bottom: auto; left: calc(var(--lanes-offset-left) + var(--lanes-safe-left));
+  right: auto; width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right));
+  height: 48px; z-index: 510;
+  overflow-x: auto; overscroll-behavior: contain;
+  scrollbar-width: none; background: var(--lanes-panel); border-color: var(--lanes-border);
+}
+.lanes-ready:not(.lanes-keyboard) .zj-mobile-modbar { display: none !important; }
+.lanes-ready.lanes-keyboard .zj-mobile-modbar { display: flex !important; }
+.lanes-ready .zj-mobile-modbar button {
+  flex: 1 0 44px; min-width: 44px; min-height: 48px;
+  color: var(--lanes-text); font: 500 13px -apple-system, sans-serif;
+  border-color: var(--lanes-border);
+}
+.lanes-ready .zj-mobile-modbar button.zj-armed { background: var(--lanes-accent); color: #101318; }
+.lanes-sheet {
+  position: fixed; z-index: 800;
+  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
+  height: var(--lanes-vh); width: var(--lanes-vw);
+  display: flex; align-items: flex-end; background: #0009;
+  padding: var(--lanes-safe-top) var(--lanes-safe-right) 0 var(--lanes-safe-left);
+}
+.lanes-sheet-panel {
+  display: flex; flex-direction: column; width: 100%; min-height: 0;
+  max-height: calc(var(--lanes-vh) - var(--lanes-safe-top) - 20px);
+  background: var(--lanes-bg); border: 1px solid var(--lanes-border);
+  border-bottom: 0; border-radius: 24px 24px 0 0;
+  padding: 20px 16px calc(8px + var(--lanes-safe-bottom));
+  box-shadow: 0 -16px 80px #0007;
+}
+.lanes-sheet-head { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; margin-bottom: 18px; }
+.lanes-sheet-head h2 { font-size: 25px; line-height: 30px; letter-spacing: -.8px; margin: 0 0 3px; }
+.lanes-sheet-head p { font-size: 13px; color: var(--lanes-muted); margin: 0; }
+.lanes-close { background: var(--lanes-panel); border-radius: 50%; }
+.lanes-search {
+  display: flex; align-items: center; gap: 10px; flex: 0 0 48px;
+  height: 48px; background: var(--lanes-panel); border: 1px solid var(--lanes-border);
+  border-radius: 12px; padding: 0 14px; margin-bottom: 12px;
+}
+.lanes-search svg { width: 20px; height: 20px; color: var(--lanes-muted); flex-shrink: 0; }
+.lanes-search input {
+  border: 0; outline: none; background: transparent; color: var(--lanes-text);
+  font: 16px -apple-system, sans-serif; min-width: 0; width: 100%; height: 44px;
+}
+.lanes-search input::placeholder { color: var(--lanes-muted); }
+.lanes-workspaces {
+  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  display: flex; flex-direction: column; gap: 6px;
+  -webkit-overflow-scrolling: touch;
+}
+.lanes-workspace {
+  display: flex; align-items: center; gap: 12px;
+  flex: 0 0 auto; width: 100%; min-height: 74px; padding: 12px;
+  background: var(--lanes-panel); border: 1px solid transparent; border-radius: 14px;
+  text-align: left;
+}
+.lanes-workspace.is-current { border-color: var(--lanes-current-border); background: var(--lanes-current); }
+.lanes-monogram {
+  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
+  font-size: 17px; font-weight: 650; color: var(--lanes-accent);
+  background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 11px;
+}
+.lanes-workspace-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
+.lanes-workspace-copy strong { font-size: 16px; font-weight: 600; line-height: 21px; overflow-wrap: anywhere; }
+.lanes-workspace-copy small { font-size: 12px; color: var(--lanes-muted); }
+.lanes-workspace-arrow { width: 18px; flex: 0 0 18px; color: var(--lanes-muted); }
+.is-current .lanes-workspace-arrow { color: var(--lanes-accent); }
+.lanes-session-link { border: 0; background: transparent; min-height: 48px; color: var(--lanes-muted) !important; font-size: 13px !important; flex-shrink: 0; }
+.lanes-empty { text-align: center; color: var(--lanes-muted); padding: 30px 12px; }
+.lanes-mobile #zj-mobile-root { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+.lanes-mobile .zj-mobile-menu {
+  top: calc(var(--lanes-offset-top) + var(--lanes-head) + 6px);
+  right: calc(var(--lanes-safe-right) + 8px); left: auto;
+  max-height: calc(var(--lanes-vh) - var(--lanes-head) - 16px);
+  max-width: calc(var(--lanes-vw) - var(--lanes-safe-left) - var(--lanes-safe-right) - 16px);
+  min-width: min(290px, 90vw); overflow-y: auto;
+  background: var(--lanes-panel); border: 1px solid var(--lanes-border);
+  border-radius: 16px; box-shadow: 0 12px 48px #0009;
+}
+.lanes-mobile .zj-mobile-menu button { min-height: 48px; color: var(--lanes-text); font-size: 15px; }
+.lanes-font-controls { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--lanes-border); }
+.lanes-font-controls > span { margin-right: auto; font-size: 13px; color: var(--lanes-muted); }
+.lanes-font-controls button { min-width: 44px; padding: 8px !important; text-align: center !important; }
+.lanes-font-controls output { font: 12px -apple-system, sans-serif; width: 36px; text-align: center; color: var(--lanes-muted); }
+.lanes-mobile .zj-mobile-overlay {
+  top: var(--lanes-offset-top); left: var(--lanes-offset-left); right: auto;
+  width: var(--lanes-vw); height: var(--lanes-vh); max-height: var(--lanes-vh);
+  padding: var(--lanes-safe-top) var(--lanes-safe-right) var(--lanes-safe-bottom) var(--lanes-safe-left);
+  background: var(--lanes-bg); color: var(--lanes-text);
+}
+.lanes-mobile .zj-mobile-overlay-header { border-color: var(--lanes-border); padding: 8px 12px; min-height: 64px; }
+.lanes-mobile .zj-mobile-overlay-header .zj-back { min-width: 64px; min-height: 48px; border-radius: 12px; border-color: var(--lanes-border); }
+.lanes-mobile .zj-mobile-overlay-header .zj-title { font-size: 19px; font-weight: 600; }
+.lanes-mobile .zj-mobile-search-row { padding: 12px; }
+.lanes-mobile .zj-mobile-overlay input.zj-search, .lanes-mobile .zj-mobile-overlay input.zj-name {
+  min-width: 0; font-size: 16px; min-height: 48px; border-radius: 10px; padding: 10px;
+  color: var(--lanes-text); background: var(--lanes-panel); border-color: var(--lanes-border);
+}
+.lanes-mobile .zj-mobile-cards { padding: 0 12px 12px; overscroll-behavior: contain; }
+.lanes-mobile .zj-mobile-card { min-height: 72px; padding: 16px; border: 1px solid var(--lanes-border); border-radius: 14px; background: var(--lanes-panel); }
+.lanes-mobile .zj-mobile-card .zj-card-title { color: var(--lanes-accent); font-size: 16px; overflow-wrap: anywhere; }
+.lanes-mobile .zj-mobile-card .zj-card-meta { color: var(--lanes-muted); font-size: 12px; overflow-wrap: anywhere; }
+.lanes-mobile .zj-mobile-footer { padding-bottom: 8px; }
+.lanes-mobile .zj-mobile-footer button { min-height: 48px; border-radius: 12px; color: var(--lanes-accent); border-color: var(--lanes-border); }
+.lanes-mobile .security-modal {
+  position: fixed; z-index: 9999; box-sizing: border-box;
+  display: flex; align-items: center; justify-content: center;
+  top: var(--lanes-offset-top); left: var(--lanes-offset-left);
+  width: var(--lanes-vw); height: var(--lanes-vh);
+  padding: calc(16px + var(--lanes-safe-top)) calc(20px + var(--lanes-safe-right)) calc(16px + var(--lanes-safe-bottom)) calc(20px + var(--lanes-safe-left));
+  overflow: auto; background: var(--lanes-bg); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.lanes-mobile .security-modal .security-modal-content {
+  width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto;
+  border: 1px solid var(--lanes-border); border-radius: 22px;
+  padding: 24px; background: var(--lanes-panel); color: var(--lanes-text); box-shadow: none;
+}
+.lanes-mobile .security-modal .security-modal-content::before { display: none; }
+.lanes-mobile .security-modal h3 { font-size: 25px; font-weight: 650; text-transform: none; letter-spacing: -.7px; color: var(--lanes-text); border: 0; margin-bottom: 18px; }
+.lanes-mobile .security-modal input[type="password"] { display: block; width: 100%; padding: 12px; margin-bottom: 12px; font-size: 16px; min-height: 52px; border-radius: 12px; background: var(--lanes-bg); color: var(--lanes-text); border: 1px solid var(--lanes-border); appearance: none; }
+.lanes-mobile .security-modal label { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 44px; color: var(--lanes-muted); margin-bottom: 0; }
+.lanes-mobile .security-modal input[type="checkbox"] { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px; accent-color: var(--lanes-accent); }
+.lanes-mobile .security-modal .button-row { display: flex; gap: 12px; margin-top: 20px; }
+.lanes-mobile .security-modal button { min-height: 48px; border: 1px solid; border-radius: 12px; font-size: 15px; padding: 10px 20px; appearance: none; }
+.lanes-mobile .security-modal .submit-btn { background: var(--lanes-accent); border-color: var(--lanes-accent); color: #101318; font-weight: 650; flex: 1; }
+.lanes-mobile .security-modal .cancel-btn { background: transparent; color: var(--lanes-muted); border-color: var(--lanes-border); }
+@media (orientation: landscape) and (max-height: 500px) {
+  html.lanes-mobile { --lanes-head: calc(48px + var(--lanes-safe-top)); --lanes-dock: calc(48px + var(--lanes-safe-bottom)); }
+  html.lanes-keyboard { --lanes-dock: 48px; }
+  .lanes-context { height: 46px; }
+  .lanes-dock { padding-top: 0; }
+  .lanes-dock .lanes-button { flex-direction: row; gap: 8px; min-height: 44px; }
+  .lanes-dock .lanes-button span { font-size: 12px; }
+  .lanes-terminal-input { height: 44px; }
+  .lanes-input-label { flex-direction: row; gap: 8px; }
+  .lanes-input-label span { font-size: 12px; }
+  .lanes-sheet-panel { padding-top: 12px; }
+  .lanes-sheet-head { margin-bottom: 8px; }
+  .lanes-workspaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lanes-sheet-panel { animation: lanes-sheet-in 150ms ease-out; }
+  @keyframes lanes-sheet-in { from {transform: translateY(20px); opacity: .4;} to {transform: translateY(0); opacity: 1;} }
+}
+
+/* Lane filter bar — visible in the dock when the ☰ picker tab is active */
+.lanes-filter-bar {
+  display: flex; align-items: center; gap: 8px;
+  flex: 1 1 auto; min-width: 0;
+  padding: 0 12px; height: 44px;
+  background: var(--lanes-chip); border: 1px solid var(--lanes-border); border-radius: 12px;
+}
+.lanes-filter-bar[hidden] { display: none; }
+.lanes-filter-bar > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--lanes-muted); }
+.lanes-filter-bar input {
+  flex: 1 1 auto; min-width: 0;
+  background: transparent; border: 0; outline: none;
+  color: var(--lanes-text); font-size: 16px; caret-color: var(--lanes-accent);
+}
+.lanes-filter-bar input::placeholder { color: var(--lanes-muted); }
+.lanes-filter-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }