@owear/cli 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owear/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CLI de Owear: create, dev, build",
   "type": "module",
   "bin": {
@@ -8,7 +8,8 @@
     "owear-build-native": "./src/owear-build-native.js"
   },
   "optionalDependencies": {
-    "@owear/linux-x64-gnu": "0.1.0"
+    "@owear/win32-x64": "0.1.2",
+    "@owear/linux-x64-gnu": "0.1.2"
   },
   "files": [
     "src",
@@ -18,7 +19,7 @@
   "homepage": "https://owear.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/owear/owear.git",
+    "url": "git+https://github.com/Scrakk-Team/Owear-Framework.git",
     "directory": "packages/cli"
   },
   "publishConfig": {

package/src/ow.js

@@ -90,9 +90,9 @@ function findKernelBin(cwd = process.cwd()) {
   const rt = runtimePackageDir()
   const candidates = [
     path.join(cwd, '.owear', 'bin', exe),
-    ...(rt ? [path.join(rt, 'bin', exe)] : []),
-    // monorepo en desarrollo
+    // monorepo en desarrollo: el kernel recién compilado manda sobre el paquete npm
     path.resolve(__dirname, '../../../build', platformPreset(), 'src', exe),
+    ...(rt ? [path.join(rt, 'bin', exe)] : []),
   ]
   for (const c of candidates) if (fs.existsSync(c)) return c
   return null
@@ -171,11 +171,41 @@ function cmdCreate(args) {
     die(`template no encontrado en ${templateDir} (instala @owear/cli completo)`)
   }
   fs.cpSync(templateDir, target, { recursive: true })
+  applyAppName(target)
   log(`app creada en ${target}`)
   log('siguientes pasos:')
   console.log(`  cd ${path.basename(target)}`)
-  console.log('  pnpm install')
-  console.log('  pnpm dev')
+  console.log('  npm install')
+  console.log('  npm run dev')
+}
+
+/**
+ * Sustituye los placeholders del template por el nombre de la app
+ * (__APP_NAME__ legible, __PKG_NAME__ válido como nombre de paquete npm).
+ */
+function applyAppName(target) {
+  const appName = path.basename(target)
+  const pkgName =
+    appName
+      .toLowerCase()
+      .replace(/[^a-z0-9._-]+/g, '-')
+      .replace(/^[-._]+|[-._]+$/g, '') || 'owear-app'
+  const extRe = /\.(ts|tsx|js|mjs|json|html|css|md|txt|ya?ml)$/
+  const walk = (dir) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (entry.name === 'node_modules') continue
+      const p = path.join(dir, entry.name)
+      if (entry.isDirectory()) walk(p)
+      else if (extRe.test(entry.name)) {
+        const src = fs.readFileSync(p, 'utf8')
+        const out = src
+          .replaceAll('__APP_NAME__', appName)
+          .replaceAll('__PKG_NAME__', pkgName)
+        if (out !== src) fs.writeFileSync(p, out)
+      }
+    }
+  }
+  walk(target)
 }
 
 // ── ow api — gestión de las APIs del framework ──────────────────────────────

package/template/README.md

@@ -0,0 +1,77 @@
+<!-- Copyright 2026 Owear Contributors
+     SPDX-License-Identifier: Apache-2.0 -->
+
+# __APP_NAME__
+
+App de escritorio construida con **[Owear](https://owear.dev)**: el WebView del
+sistema renderiza tu frontend web y el kernel nativo te da el sistema operativo.
+
+## Empezar
+
+```bash
+npm install
+npm run dev     # ≡ ow dev
+```
+
+Se abre una ventana con el WebView del sistema. Edita `src/renderer.ts` y el
+hot-reload de Vite lo refleja al instante.
+
+```bash
+npm run build   # ≡ ow build → dist/
+```
+
+## Estructura
+
+```
+├── index.html          UI (titlebar propia, hero, tarjetas)
+├── src/
+│   ├── renderer.ts     lógica del renderer + llamadas a módulos nativos
+│   ├── style.css       estilos
+│   └── ow.d.ts         tipos de window.ow
+└── app/
+    └── main.ts         proceso principal (sidecar Node): sólo la ventana
+```
+
+## Cómo se llama al sistema
+
+Sin `ipcRenderer` ni `ipcMain`: el renderer invoca los módulos nativos del
+kernel directo.
+
+```ts
+const path = await ow.invoke('dialog', 'open', 'open', 'Abrir archivo')
+const text = await ow.invoke('fs', 'readText', path)
+await ow.invoke('notification', 'show', 'Listo', `Leídos ${text.length} bytes`)
+```
+
+Módulos incluidos (stock): `fs` · `path` · `process` (PTY) · `dialog` ·
+`clipboard` · `shell` · `screen` · `net` · `notification` · `power` · `menu` ·
+`globalshortcut` · `updater` · `capturer`, más los builtins `ow-window` (ventana),
+`window` (extras del WebView), `session`, `app` y `crashreporter`.
+
+## Añadir un módulo nativo propio (C++)
+
+1. Crea `native/mi_modulo.cpp`:
+
+   ```cpp
+   #include <ow/Json.h>
+   #include <ow/Module.h>
+   #include "ow_api.h"
+
+   static void ping(const ow_request_t*, ow_response_t* res) {
+       ow::Module::RespondOk(res, "\"pong\"");
+   }
+
+   OW_MODULE_BEGIN(mi_modulo, "1.0.0")
+   OW_FN(ping)
+   OW_MODULE_END()
+   ```
+
+2. `ow dev` lo compila a `.owm` y genera el binding. Úsalo en el renderer:
+
+   ```ts
+   import { mi_modulo } from '@owear/native'
+   await mi_modulo.ping()
+   ```
+
+> Requiere un compilador de C++ en el sistema. Si no lo tienes, no añadas
+> `native/` y la app sigue funcionando con los módulos stock.

package/template/app/main.ts

@@ -1,29 +1,23 @@
 // Copyright 2026 Owear Contributors
 // SPDX-License-Identifier: Apache-2.0
 //
-// main.ts — proceso principal (sidecar Node). Estilo Electron.
+// app/main.ts — proceso principal (sidecar Node), estilo Electron.
 //
-import { app, BrowserWindow } from '@owear/core'
+// Sólo gestiona el ciclo de vida de la ventana. La app en sí vive en el
+// renderer, que llama a los módulos nativos directo. Aquí podrías añadir
+// lógica privilegiada (por ejemplo, exponerla vía un módulo nativo propio).
 
-let windows = 0
+import { app, BrowserWindow } from '@owear/core'
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({
-    title: 'Mi App Owear',
-    width: 1100,
+    title: '__APP_NAME__',
+    width: 1080,
     height: 720,
-    titleBarStyle: 'custom', // titlebar custom + drag regions CSS
+    titleBarStyle: 'custom', // titlebar propia + regiones [data-ow-drag]
     url: process.env.OW_DEV_SERVER_URL ?? 'app://index.html',
   })
-  windows++
 
-  win.on('closed', () => {
-    windows--
-    if (windows === 0) app.quit()
-  })
-
-  // ejemplo: evaluar JS en la página
-  win.on('ready-to-show', async () => {
-    console.log('[main] ventana lista, id =', win.id)
-  })
+  win.on('ready-to-show', () => console.log('[main] ventana lista, id =', win.id))
+  win.on('closed', () => app.quit())
 })

package/template/index.html

@@ -1,24 +1,85 @@
 <!doctype html>
+<!-- Copyright 2026 Owear Contributors
+     SPDX-License-Identifier: Apache-2.0 -->
+
 <html lang="es">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Mi App Owear</title>
-</head>
-<body>
-  <header data-ow-drag class="titlebar">
-    <span>Mi App Owear</span>
-    <nav>
-      <button data-ow-no-drag onclick="ow.invoke('ow-window','minimize', window.__owWindowId)">–</button>
-      <button data-ow-no-drag onclick="ow.invoke('ow-window','maximize', window.__owWindowId, true)">□</button>
-      <button data-ow-no-drag onclick="ow.invoke('ow-window','close', window.__owWindowId)">✕</button>
-    </nav>
-  </header>
-  <main>
-    <h1>Funciona 🚀</h1>
-    <p id="demo">invocando módulo nativo…</p>
-    <pre id="out"></pre>
-  </main>
-  <script type="module" src="/src/renderer.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <!-- Titlebar propia: el kernel convierte [data-ow-drag] en zona de arrastre.
+         Los controles van FUERA de esa zona para no iniciar drag al pulsarlos. -->
+    <header class="titlebar">
+      <div class="titlebar__drag" data-ow-drag>
+        <span class="brand__mark" aria-hidden="true"></span>
+        <span class="brand__name">__APP_NAME__</span>
+      </div>
+      <div class="titlebar__controls">
+        <button id="win-min" class="winbtn" title="Minimizar" aria-label="Minimizar">
+          <svg viewBox="0 0 12 12" width="12" height="12"><path d="M2 6h8" /></svg>
+        </button>
+        <button id="win-max" class="winbtn" title="Maximizar" aria-label="Maximizar">
+          <svg viewBox="0 0 12 12" width="12" height="12"><rect x="2.5" y="2.5" width="7" height="7" rx="1" /></svg>
+        </button>
+        <button id="win-close" class="winbtn winbtn--close" title="Cerrar" aria-label="Cerrar">
+          <svg viewBox="0 0 12 12" width="12" height="12"><path d="M2.5 2.5l7 7M9.5 2.5l-7 7" /></svg>
+        </button>
+      </div>
+    </header>
+
+    <main class="page">
+      <section class="hero">
+        <span class="eyebrow">Owear</span>
+        <h1>__APP_NAME__</h1>
+        <p class="lead">
+          Frontend web, sistema nativo. Estos botones llaman <strong>directo</strong> a los
+          módulos del kernel — sin <code>ipcRenderer</code> ni <code>ipcMain</code>.
+        </p>
+        <div class="actions">
+          <button class="btn btn--primary" data-action="open">Abrir archivo…</button>
+          <button class="btn" data-action="notify">Notificar</button>
+          <button class="btn" data-action="copy">Copiar ruta</button>
+          <button class="btn" data-action="reveal">Mostrar en carpeta</button>
+          <button class="btn btn--ghost" data-action="about">Acerca de</button>
+        </div>
+      </section>
+
+      <section class="grid">
+        <article class="card">
+          <header class="card__head">
+            <h2>Entorno</h2>
+            <span class="badge" id="env-window">—</span>
+          </header>
+          <dl class="kv">
+            <div><dt>Plataforma</dt><dd id="env-platform">—</dd></div>
+            <div><dt>Motor</dt><dd id="env-engine">—</dd></div>
+            <div><dt>Escala</dt><dd id="env-dpr">—</dd></div>
+          </dl>
+          <p class="ua" id="env-ua">—</p>
+        </article>
+
+        <article class="card card--grow">
+          <header class="card__head">
+            <h2>Consola</h2>
+            <button class="linkbtn" data-action="clear">Limpiar</button>
+          </header>
+          <pre id="console" class="console">Listo. Pulsa «Abrir archivo…» para invocar un módulo nativo.</pre>
+        </article>
+      </section>
+
+      <section class="card">
+        <header class="card__head"><h2>Cómo funciona</h2></header>
+        <p class="hint">
+          Cada botón invoca un módulo nativo con <code>ow.invoke()</code>.
+        </p>
+        <pre class="code"><code>const path = await ow.invoke('dialog', 'open', 'open', 'Abrir archivo')
+const text = await ow.invoke('fs', 'readText', path)
+await ow.invoke('notification', 'show', 'Listo', 'Leídos ' + text.length + ' bytes')</code></pre>
+      </section>
+    </main>
+
+    <script type="module" src="/src/renderer.ts"></script>
+  </body>
 </html>

package/template/package.json

@@ -1,11 +1,13 @@
 {
-  "name": "mi-app-owear",
+  "name": "__PKG_NAME__",
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "description": "App de escritorio construida con Owear.",
   "scripts": {
     "dev": "ow dev",
-    "build": "ow build"
+    "build": "ow build",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@owear/core": "^0.1.0"
@@ -13,6 +15,7 @@
   "devDependencies": {
     "@owear/cli": "^0.1.0",
     "@owear/vite-plugin": "^0.1.0",
+    "@types/node": "^20.14.0",
     "esbuild": "^0.25.0",
     "typescript": "^5.6.0",
     "vite": "^6.0.0"

package/template/src/ow.d.ts

@@ -0,0 +1,25 @@
+// Copyright 2026 Owear Contributors
+// SPDX-License-Identifier: Apache-2.0
+//
+// Tipos de la API que el kernel inyecta en cada documento (`window.ow`).
+// Mantenidos a mano contra docs/API.md §1.
+
+export {}
+
+declare global {
+  interface Window {
+    __owWindowId: number
+    ow: {
+      invoke(module: string, fn: string, ...args: unknown[]): Promise<unknown>
+      invokeSync(module: string, fn: string, ...args: unknown[]): unknown
+      readShared(handle: { id: string; size: number }): Promise<ArrayBuffer>
+      on(name: string, cb: (payload: unknown) => void): () => void
+      emit(name: string, payload?: unknown): void
+      emitTo(targetWindowId: number, name: string, payload?: unknown): void
+      findInPage(
+        text: string,
+        opts?: { matchCase?: boolean; backwards?: boolean }
+      ): { matches: number; active: number }
+    }
+  }
+}

package/template/src/renderer.ts

@@ -1,30 +1,144 @@
 // Copyright 2026 Owear Contributors
 // SPDX-License-Identifier: Apache-2.0
 //
-// renderer.ts — corre dentro del WebView. `ow` lo inyecta el kernel.
+// src/renderer.ts — corre dentro del WebView. `ow` lo inyecta el kernel.
 //
-import { files } from '@owear/native'
+// Aquí no hay `ipcRenderer` ni handlers en el main: el renderer llama a los
+// módulos nativos del framework DIRECTO (mismo salto WebView → kernel).
 
-const out = document.getElementById('out')!
-const demo = document.getElementById('demo')!
+import './style.css'
 
-async function main() {
-  try {
-    // módulo nativo PROPIO (native/files.cpp)
-    const text = await files.readText('/etc/hostname')
-    demo.textContent = `hostname leído desde C++ nativo: ${text.trim()}`
+const APP = document.title || 'Owear App'
 
-    // módulo stock fs
-    const st = await ow.invoke('fs', 'stat', '/etc/hosts')
-    out.textContent = JSON.stringify(st, null, 2)
+const $ = <T extends HTMLElement = HTMLElement>(sel: string): T =>
+  document.querySelector(sel) as T
 
-    // eventos de ventana
-    ow.on('resize', (b) => {
-      document.title = `${b.width}×${b.height}`
+const invoke = <T = unknown>(module: string, fn: string, ...args: unknown[]): Promise<T> =>
+  window.ow.invoke(module, fn, ...args) as Promise<T>
+
+let lastPath: string | null = null
+
+// ── Consola ─────────────────────────────────────────────────────────────
+const consoleEl = $('#console')
+
+function log(msg: string, kind: 'ok' | 'err' | 'muted' = 'muted'): void {
+  const time = new Date().toLocaleTimeString()
+  const line = document.createElement('span')
+  line.className = `line--${kind}`
+  line.textContent = `[${time}] ${msg}\n`
+  consoleEl.appendChild(line)
+  consoleEl.scrollTop = consoleEl.scrollHeight
+}
+
+function logError(err: unknown): void {
+  log(err instanceof Error ? err.message : String(err), 'err')
+}
+
+// ── Entorno ─────────────────────────────────────────────────────────────
+function renderEnvironment(): void {
+  const ua = navigator.userAgent
+  const engine = /AppleWebKit\/([\d.]+)/.exec(ua)?.[1]
+  $('#env-platform').textContent = navigator.platform || '—'
+  $('#env-engine').textContent = engine ? `WebKit ${engine}` : '—'
+  $('#env-dpr').textContent = `${window.devicePixelRatio}×`
+  $('#env-window').textContent = `#${window.__owWindowId}`
+  $('#env-ua').textContent = ua
+}
+
+// ── Acciones (módulos nativos) ──────────────────────────────────────────
+async function openFile(): Promise<void> {
+  const path = await invoke<string | null>('dialog', 'open', 'open', 'Abrir un archivo')
+  if (!path) {
+    log('dialog.open → cancelado')
+    return
+  }
+  lastPath = path
+  const stat = await invoke<{ size: number }>('fs', 'stat', path)
+  const text = await invoke<string>('fs', 'readText', path)
+  log(`dialog.open → ${path}`, 'ok')
+  log(`fs.readText → ${stat.size} bytes`, 'ok')
+
+  const clean = text.replace(/\u0000/g, '')
+  const preview = clean.length > 6000 ? `${clean.slice(0, 6000)}\n… (vista truncada)` : clean
+  consoleEl.textContent = ''
+  log(`── ${path} (${stat.size} bytes) ──`, 'muted')
+  const body = document.createElement('span')
+  body.style.color = '#c8d4e0'
+  body.textContent = preview + '\n'
+  consoleEl.appendChild(body)
+  consoleEl.scrollTop = 0
+}
+
+async function notifyUser(): Promise<void> {
+  await invoke('notification', 'show', APP, 'Los módulos nativos funcionan sin IPC.', APP)
+  log('notification.show → notificación enviada', 'ok')
+}
+
+async function copyPath(): Promise<void> {
+  if (!lastPath) {
+    log('Abre un archivo antes de copiar.', 'err')
+    return
+  }
+  await invoke('clipboard', 'writeText', lastPath)
+  log(`clipboard.writeText → ${lastPath}`, 'ok')
+}
+
+async function revealPath(): Promise<void> {
+  if (!lastPath) {
+    log('Abre un archivo antes de mostrarlo.', 'err')
+    return
+  }
+  await invoke('shell', 'showItemInFolder', lastPath)
+  log(`shell.showItemInFolder → ${lastPath}`, 'ok')
+}
+
+async function about(): Promise<void> {
+  await invoke('dialog', 'messageBox', 'info', `Acerca de ${APP}`, `${APP}\n\nConstruido con Owear.`, [
+    'Cerrar',
+  ])
+  log('dialog.messageBox → cerrado', 'ok')
+}
+
+// ── Titlebar (builtin ow-window) ────────────────────────────────────────
+function wireTitlebar(): void {
+  const id = window.__owWindowId
+  $('#win-min').addEventListener('click', () => void invoke('ow-window', 'minimize', id))
+  $('#win-max').addEventListener('click', async () => {
+    const max = await invoke<boolean>('ow-window', 'isMaximized', id)
+    void invoke('ow-window', 'maximize', id, !max)
+  })
+  $('#win-close').addEventListener('click', () => void invoke('ow-window', 'close', id))
+}
+
+// ── Arranque ────────────────────────────────────────────────────────────
+const actions: Record<string, () => void | Promise<void>> = {
+  open: openFile,
+  notify: notifyUser,
+  copy: copyPath,
+  reveal: revealPath,
+  about,
+  clear: () => {
+    consoleEl.textContent = ''
+    log('Consola limpia.')
+  },
+}
+
+function boot(): void {
+  wireTitlebar()
+  renderEnvironment()
+
+  for (const btn of document.querySelectorAll<HTMLElement>('[data-action]')) {
+    const action = actions[btn.dataset.action ?? '']
+    if (!action) continue
+    btn.addEventListener('click', () => {
+      Promise.resolve(action()).catch(logError)
     })
-  } catch (e) {
-    demo.textContent = '✗ ' + (e as Error).message
   }
+
+  window.addEventListener('resize', renderEnvironment)
+  window.ow.on('resize', renderEnvironment)
+
+  log(`Renderer listo. Ventana ${window.__owWindowId}.`, 'ok')
 }
 
-main()
+boot()

package/template/src/style.css

@@ -0,0 +1,342 @@
+/* Copyright 2026 Owear Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+:root {
+  color-scheme: dark;
+  --bg: #0d1117;
+  --panel: #161b22;
+  --panel-2: #0f141a;
+  --line: #262d38;
+  --line-2: #30363d;
+  --text: #e6edf3;
+  --muted: #8b949e;
+  --accent: #3b82f6;
+  --accent-hover: #2f6fd0;
+  --danger: #e5484d;
+  --ok: #3fb950;
+  --radius: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* ── Titlebar ─────────────────────────────────────────────────────────── */
+.titlebar {
+  height: 40px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: stretch;
+  background: #010409;
+  border-bottom: 1px solid var(--line);
+}
+
+.titlebar__drag {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+}
+
+.brand__mark {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  background: var(--accent);
+}
+
+.brand__name {
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titlebar__controls {
+  display: flex;
+}
+
+.winbtn {
+  width: 46px;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+
+.winbtn svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+}
+
+.winbtn:hover {
+  background: var(--line);
+  color: var(--text);
+}
+
+.winbtn--close:hover {
+  background: var(--danger);
+  color: #fff;
+}
+
+/* ── Layout ───────────────────────────────────────────────────────────── */
+.page {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 28px clamp(18px, 4vw, 44px) 36px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 1040px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.eyebrow {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(24px, 3vw, 32px);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+
+.lead {
+  margin: 0;
+  max-width: 72ch;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.lead strong {
+  color: var(--text);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.btn {
+  font: inherit;
+  color: var(--text);
+  background: #21262d;
+  border: 1px solid var(--line-2);
+  border-radius: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background: #2b323b;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn--primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+
+.btn--primary:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.btn--ghost {
+  background: transparent;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) 1fr;
+  gap: 16px;
+}
+
+@media (max-width: 820px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+}
+
+.card--grow {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.card__head h2 {
+  margin: 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--muted);
+}
+
+.badge {
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.kv {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.kv > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.kv dt {
+  color: var(--muted);
+}
+
+.kv dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.ua {
+  margin: 14px 0 0;
+  color: #5b6672;
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.console {
+  flex: 1;
+  min-height: 210px;
+  max-height: 46vh;
+  margin: 0;
+  overflow: auto;
+  background: #010409;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px 14px;
+  font: 12.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.console .line--ok {
+  color: var(--ok);
+}
+
+.console .line--err {
+  color: #ff8085;
+}
+
+.console .line--muted {
+  color: var(--muted);
+}
+
+.linkbtn {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.linkbtn:hover {
+  color: var(--text);
+}
+
+.hint {
+  margin: 0 0 12px;
+  color: var(--muted);
+}
+
+.code {
+  margin: 0;
+  overflow: auto;
+  background: #010409;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px;
+  font: 12.5px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  color: #c9d1d9;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+code {
+  color: #79c0ff;
+}
+
+.hint code,
+.lead code {
+  background: #21262d;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 1px 6px;
+  font-size: 12.5px;
+}

package/template/tsconfig.json

@@ -3,10 +3,11 @@
     "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "lib": ["ES2022", "DOM"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node", "vite/client"],
     "strict": true,
     "skipLibCheck": true,
-    "types": ["vite/client"]
+    "noEmit": true
   },
   "include": ["src", "app"]
 }

package/template/vite.config.ts

@@ -1,3 +1,6 @@
+// Copyright 2026 Owear Contributors
+// SPDX-License-Identifier: Apache-2.0
+//
 import { defineConfig } from 'vite'
 import owear from '@owear/vite-plugin'
 

package/template/native/files.cpp

@@ -1,42 +0,0 @@
-// Copyright 2026 Owear Contributors
-// SPDX-License-Identifier: Apache-2.0
-//
-// native/files.cpp — módulo nativo PROPIO de la app.
-// Se compila a .owm y se invoca desde el renderer con:
-//   import { files } from '@owear/native'
-//   await files.readText('/etc/hostname')
-//
-#include <ow/Json.h>
-#include <ow/Module.h>
-#include "ow_api.h"
-
-#include <filesystem>
-#include <fstream>
-#include <sstream>
-
-namespace fs = std::filesystem;
-
-static void readText(const ow_request_t* req, ow_response_t* res) {
-    auto parsed = ow::json::Parse(std::string_view(req->json, req->json_len));
-    if (!parsed.value || !parsed.value->IsArray() || !parsed.value->AsArray()[0].IsString())
-        return ow::Module::RespondError(res, "readText(path): path requerido");
-    std::ifstream f(parsed.value->AsArray()[0].AsString(), std::ios::binary);
-    if (!f) return ow::Module::RespondError(res, "no se pudo abrir");
-    std::ostringstream ss;
-    ss << f.rdbuf();
-    ow::Module::RespondOk(res, ow::json::Value(ss.str()).Serialize().c_str());
-}
-
-static void exists(const ow_request_t* req, ow_response_t* res) {
-    auto parsed = ow::json::Parse(std::string_view(req->json, req->json_len));
-    if (!parsed.value || !parsed.value->IsArray() || !parsed.value->AsArray()[0].IsString())
-        return ow::Module::RespondError(res, "exists(path): path requerido");
-    std::error_code ec;
-    bool ok = fs::exists(parsed.value->AsArray()[0].AsString(), ec);
-    ow::Module::RespondOk(res, ok ? "true" : "false");
-}
-
-OW_MODULE_BEGIN(files, "1.0.0")
-OW_FN(readText)
-OW_FN(exists)
-OW_MODULE_END()