vuetty 0.1.0

package/dist/static/debug.js

@@ -0,0 +1 @@
+class P{constructor(){this.ws=null,this.events=[],this.filters=new Set(["render","input","console","layout","viewport","vue","vuetty"]),this.eventCounts={render:0,input:0,console:0,layout:0,viewport:0,vue:0,vuetty:0},this.searchQuery="",this.reconnectTimeout=null,this.loadPersistedState(),this.connect(),this.setupUI(),this.startTimestampUpdater()}loadPersistedState(){try{let j=localStorage.getItem("debugTheme")||"dark";document.documentElement.setAttribute("data-theme",j);let q=document.getElementById("theme-toggle");if(q)q.checked=j==="dark"}catch(j){}try{let j=localStorage.getItem("debugFilters");if(j){let q=JSON.parse(j);this.filters=new Set(q),document.querySelectorAll("[data-filter]").forEach((A)=>{A.checked=this.filters.has(A.dataset.filter)})}}catch(j){}}saveFilterState(){try{localStorage.setItem("debugFilters",JSON.stringify([...this.filters]))}catch(j){}}saveThemeState(j){try{localStorage.setItem("debugTheme",j)}catch(q){}}connect(){let j=location.protocol==="https:"?"wss:":"ws:";this.ws=new WebSocket(`${j}//${location.host}`),this.ws.onopen=()=>{if(this.updateStatus("Connected","connected"),this.reconnectTimeout)clearTimeout(this.reconnectTimeout),this.reconnectTimeout=null},this.ws.onclose=()=>{this.updateStatus("Disconnected","disconnected"),this.reconnectTimeout=setTimeout(()=>this.connect(),1000)},this.ws.onerror=()=>{this.updateStatus("Error","error")},this.ws.onmessage=(q)=>{try{let A=JSON.parse(q.data);this.handleMessage(A)}catch(A){console.error("Failed to parse message:",A)}}}handleMessage(j){if(j.type==="init"){if(this.events=j.data.buffer||[],this.updateEventCounts(),this.renderEventLog(),j.data.viewport)this.updateViewport(j.data.viewport);if(j.data.layoutTree)this.updateLayoutTree(j.data.layoutTree);if(j.data.memory)this.updateMemoryStats(j.data.memory);return}if(j.type==="cleared"){this.events=[],this.resetEventCounts(),document.getElementById("event-log").innerHTML="";return}if(j.type==="layout.tree"&&j.data?.tree){this.updateLayoutTree(j.data.tree);return}if(j.type==="vuetty.memory"){this.updateMemoryStats(j.data);return}if(this.events.push(j),this.events.length>1000)this.events.shift();let q=j.type.split(".")[0];if(this.eventCounts.hasOwnProperty(q))this.eventCounts[q]++,this.updateCounterDisplay(q);if(this.addEvent(j),j.type==="render.complete"&&j.data.tree)this.updateLayoutTree(j.data.tree);if(j.type.startsWith("viewport.")||j.type==="vuetty.mount"){if(j.data.viewport)this.updateViewport(j.data.viewport)}}updateEventCounts(){this.resetEventCounts(),this.events.forEach((j)=>{let q=j.type.split(".")[0];if(this.eventCounts.hasOwnProperty(q))this.eventCounts[q]++}),this.updateAllCounterDisplays()}resetEventCounts(){Object.keys(this.eventCounts).forEach((j)=>{this.eventCounts[j]=0}),this.updateAllCounterDisplays()}updateCounterDisplay(j){let q=document.querySelector(`[data-counter="${j}"]`);if(q)q.textContent=this.eventCounts[j]}updateAllCounterDisplays(){Object.keys(this.eventCounts).forEach((j)=>{this.updateCounterDisplay(j)})}addEvent(j){let q=j.type.split(".")[0];if(!this.filters.has(q))return;if(this.searchQuery){if(![j.type,this.formatEventData(j).text,JSON.stringify(j.data)].join(" ").toLowerCase().includes(this.searchQuery.toLowerCase()))return}let A=document.getElementById("event-log"),G=document.createElement("div");G.className=`event event-${q}`,G.dataset.timestamp=j.timestamp;let H=document.createElement("span");H.className="time",H.textContent=this.formatRelativeTime(j.timestamp),H.title=new Date(j.timestamp).toLocaleString();let B=document.createElement("span");B.className="type",B.textContent=j.type;let J=document.createElement("span");J.className="data";let K=this.formatEventData(j);if(K.isJSON)try{let M=JSON.stringify(j.data,null,2);J.dataset.compact=K.text,J.dataset.formatted=M,J.textContent="▶ "+K.text}catch{J.textContent=K.text}else J.textContent=K.text;G.appendChild(H),G.appendChild(B),G.appendChild(J),A.appendChild(G),A.scrollTop=A.scrollHeight}formatRelativeTime(j){let A=Date.now()-j;if(A<1000)return"just now";if(A<60000)return`${Math.floor(A/1000)}s ago`;if(A<3600000)return`${Math.floor(A/60000)}m ago`;if(A<86400000)return`${Math.floor(A/3600000)}h ago`;return`${Math.floor(A/86400000)}d ago`}startTimestampUpdater(){setInterval(()=>{document.querySelectorAll(".event").forEach((j)=>{let q=parseInt(j.dataset.timestamp);if(q){let A=j.querySelector(".time");if(A)A.textContent=this.formatRelativeTime(q)}})},1e4)}formatEventData(j){switch(j.type){case"render.complete":if(j.data.duration!==void 0)return{text:`${j.data.duration.toFixed(2)}ms`,isJSON:!1};return{text:"",isJSON:!1};case"input.key":return{text:j.data.char||j.data.key||"",isJSON:!1};case"console.log":case"console.error":case"console.warn":return{text:(j.data.args||[]).join(" "),isJSON:!1};case"vue.warn":case"vue.error":return{text:`[${j.data.component}] ${j.data.message}`,isJSON:!1};case"vuetty.resize":return{text:`${j.data.width}x${j.data.height}`,isJSON:!1};default:try{return{text:JSON.stringify(j.data),isJSON:!0}}catch{return{text:"",isJSON:!1}}}}updateLayoutTree(j){let q=document.getElementById("layout-tree");if(j)q.textContent=JSON.stringify(j,null,2)}updateViewport(j){let q=document.getElementById("viewport-state");if(j)q.textContent=JSON.stringify(j,null,2)}updateMemoryStats(j){let q=document.getElementById("memory-stats");if(q&&j)q.textContent=JSON.stringify(j,null,2)}updateStatus(j,q){let A=document.getElementById("connection-status");switch(A.textContent=j,A.classList.remove("is-success","is-danger","is-warning","is-info"),q){case"connected":A.classList.add("is-success");break;case"disconnected":A.classList.add("is-warning");break;case"error":A.classList.add("is-danger");break;default:A.classList.add("is-info")}}renderEventLog(){let j=document.getElementById("event-log");j.innerHTML="",this.events.forEach((q)=>this.addEvent(q))}setupUI(){document.getElementById("event-log").addEventListener("click",(G)=>{let H=G.target.closest(".event");if(!H)return;let B=H.querySelector(".data");if(!B)return;let J=B.classList.toggle("expanded");if(B.dataset.compact&&B.dataset.formatted)if(J)B.textContent="▼ "+B.dataset.formatted;else B.textContent="▶ "+B.dataset.compact;else{let K=B.textContent;if(J)B.textContent=K.replace("▶ ","▼ ");else B.textContent=K.replace("▼ ","▶ ")}}),document.querySelectorAll("[data-filter]").forEach((G)=>{G.addEventListener("change",(H)=>{let B=H.target.dataset.filter;if(H.target.checked)this.filters.add(B);else this.filters.delete(B);this.saveFilterState(),this.renderEventLog()})});let q=document.getElementById("search-input");if(q)q.addEventListener("input",(G)=>{this.searchQuery=G.target.value,this.renderEventLog()});let A=document.getElementById("theme-toggle");if(A)A.addEventListener("change",(G)=>{let H=G.target.checked?"dark":"light";document.documentElement.setAttribute("data-theme",H),this.saveThemeState(H)});document.getElementById("clear-btn").addEventListener("click",()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN)this.ws.send(JSON.stringify({type:"clear"}));this.events=[],this.resetEventCounts(),document.getElementById("event-log").innerHTML=""}),document.querySelectorAll(".tabs li").forEach((G)=>{G.addEventListener("click",(H)=>{H.preventDefault();let B=G.dataset.tab;document.querySelectorAll(".tabs li").forEach((M)=>{M.classList.remove("is-active");let O=M.querySelector("a");if(O)O.style.color="var(--text-secondary)"}),G.classList.add("is-active");let J=G.querySelector("a");if(J)J.style.color="var(--text-primary)";document.querySelectorAll(".tab-content").forEach((M)=>{M.style.display="none",M.classList.remove("is-active")});let K=document.getElementById(`${B}-tab`);if(K)K.style.display="block",K.classList.add("is-active")})})}}new P;

package/dist/static/index.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vuetty Debug Server</title>
+  <link rel="stylesheet" href="debug.css">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <!-- Main container -->
+  <div style="height: 100vh; display: flex; flex-direction: column;">
+
+    <!-- Header -->
+    <header class="navbar" role="navigation" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0;">
+      <div class="navbar-brand">
+        <h1 class="navbar-item title is-5 mb-0" style="color: var(--event-render);">Vuetty Debug Server</h1>
+      </div>
+
+      <div class="navbar-menu" id="navbarMenu" style="background: transparent;">
+        <div class="navbar-end">
+          <!-- Connection status -->
+          <div class="navbar-item">
+            <span id="connection-status" class="tag is-info">Connecting...</span>
+          </div>
+
+          <!-- Theme toggle -->
+          <div class="navbar-item">
+            <div class="theme-toggle-wrapper">
+              <span class="icon">☀️</span>
+              <input type="checkbox" id="theme-toggle" checked>
+              <span class="icon">🌙</span>
+            </div>
+          </div>
+
+          <!-- Clear button -->
+          <div class="navbar-item">
+            <button id="clear-btn" class="button is-primary is-small">Clear</button>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main content panels -->
+    <div class="columns is-gapless" style="flex: 1; overflow: hidden; margin: 0;">
+
+      <!-- Left Panel: Event Log -->
+      <div class="column is-two-thirds" style="display: flex; flex-direction: column; border-right: 1px solid var(--border-color); background: var(--bg-panel);">
+
+        <!-- Panel header -->
+        <div class="panel-heading" style="background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); flex-shrink: 0;">
+          <h2 class="title is-6 mb-0" style="color: var(--text-primary);">Event Log</h2>
+        </div>
+
+        <!-- Search filter -->
+        <div class="panel-block" style="border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); flex-shrink: 0;">
+          <div class="control has-icons-left" style="width: 100%;">
+            <input
+              type="text"
+              id="search-input"
+              class="input is-small"
+              placeholder="Search events..."
+              style="background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color);"
+            >
+            <span class="icon is-left is-small">
+              <span style="font-size: 14px;">🔍</span>
+            </span>
+          </div>
+        </div>
+
+        <!-- Event filters (checkboxes) -->
+        <div class="panel-block" style="flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0;">
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="render">
+            Render<span class="event-counter" data-counter="render">0</span>
+          </label>
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="input">
+            Input<span class="event-counter" data-counter="input">0</span>
+          </label>
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="console">
+            Console<span class="event-counter" data-counter="console">0</span>
+          </label>
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="layout">
+            Layout<span class="event-counter" data-counter="layout">0</span>
+          </label>
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="viewport">
+            Viewport<span class="event-counter" data-counter="viewport">0</span>
+          </label>
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="vue">
+            Vue<span class="event-counter" data-counter="vue">0</span>
+          </label>
+          <label class="checkbox" style="font-size: 12px; margin-right: 8px; color: var(--text-primary);">
+            <input type="checkbox" checked data-filter="vuetty">
+            Vuetty<span class="event-counter" data-counter="vuetty">0</span>
+          </label>
+        </div>
+
+        <!-- Event list -->
+        <div id="event-log" style="flex: 1; overflow-y: auto; padding: 10px; background: var(--bg-primary);"></div>
+      </div>
+
+      <!-- Right Panel: Details -->
+      <div class="column is-one-third" style="display: flex; flex-direction: column; background: var(--bg-panel);">
+
+        <!-- Tabs -->
+        <div class="tabs" style="margin-bottom: 0; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); flex-shrink: 0;">
+          <ul style="border-bottom: none; margin: 0;">
+            <li class="is-active" data-tab="layout">
+              <a style="color: var(--text-primary);">Layout Tree</a>
+            </li>
+            <li data-tab="viewport">
+              <a style="color: var(--text-secondary);">Viewport</a>
+            </li>
+            <li data-tab="memory">
+              <a style="color: var(--text-secondary);">Memory</a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Tab content -->
+        <div style="flex: 1; overflow-y: auto; padding: 10px; background: var(--bg-primary);">
+          <div id="layout-tab" class="tab-content is-active">
+            <pre id="layout-tree">No layout data yet...</pre>
+          </div>
+
+          <div id="viewport-tab" class="tab-content" style="display: none;">
+            <pre id="viewport-state">No viewport data yet...</pre>
+          </div>
+
+          <div id="memory-tab" class="tab-content" style="display: none;">
+            <pre id="memory-stats">No memory data yet...</pre>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <script src="debug.js"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "vuetty",
+  "version": "0.1.0",
+  "description": "Build reactive Terminal User Interfaces using Vue.js",
+  "homepage": "https://github.com/tterrasson/vuetty",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tterrasson/vuetty.git"
+  },
+  "bugs": {
+    "url": "https://github.com/tterrasson/vuetty/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./rollup-plugin": {
+      "types": "./dist/rollup-plugin/index.d.ts",
+      "import": "./dist/rollup-plugin/index.js",
+      "default": "./dist/rollup-plugin/index.js"
+    },
+    "./bun-loader": {
+      "types": "./dist/build/bun-loader.d.ts",
+      "import": "./dist/build/bun-loader.js",
+      "default": "./dist/build/bun-loader.js"
+    },
+    "./loader": {
+      "types": "./dist/build/bun-loader.d.ts",
+      "import": "./dist/build/bun-loader.js",
+      "default": "./dist/build/bun-loader.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "bun run clean && bun run build:rollup && bun run build:types && bun run build:debug-assets",
+    "build:rollup": "rollup -c rollup.config.js",
+    "build:types": "cp src/index.d.ts dist/ && mkdir -p dist/rollup-plugin && cp src/rollup-plugin/index.d.ts dist/rollup-plugin/ && mkdir -p dist/build && cp src/build/bun-loader.d.ts src/build/bun-loader.js dist/build/",
+    "build:debug-assets": "bun run scripts/build-debug.js",
+    "clean": "rm -rf ./dist && mkdir -p ./dist",
+    "dev": "bun run examples/run.js",
+    "test": "bun test",
+    "pack": "bun run build && bunx npm pack",
+    "prepublishOnly": "bun run build",
+    "docs:dev": "bun vitepress dev docs",
+    "docs:build": "bun vitepress build docs",
+    "docs:preview": "bun vitepress preview docs"
+  },
+  "keywords": [
+    "vuetty",
+    "tui",
+    "terminal",
+    "vue",
+    "vue3",
+    "custom-renderer",
+    "cli",
+    "terminal-ui",
+    "reactive",
+    "text-ui",
+    "command-line",
+    "flexbox"
+  ],
+  "author": "Thibault Terrasson",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.5.26"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "cli-highlight": "^2.1.11",
+    "figlet": "^1.9.4",
+    "glob": "^13.0.0",
+    "gradient-string": "^3.0.0",
+    "marked": "^17.0.1",
+    "string-width": "^8.1.0",
+    "terminal-image": "^4.2.0",
+    "yoga-layout": "^3.2.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/bun": "latest",
+    "@vue/compiler-sfc": "^3.5.27",
+    "bulma": "^1.0.4",
+    "rollup": "^4.55.2",
+    "vitepress": "^2.0.0-alpha.15"
+  }
+}