@owear/cli 0.1.2 → 0.1.4

package/template-installer/src/installer.ts

@@ -0,0 +1,171 @@
+// Copyright 2026 Owear Contributors
+// SPDX-License-Identifier: Apache-2.0
+//
+// src/installer.ts — UI del instalador (vanilla). Corre en el renderer y usa
+// SOLO la API nativa `installer` (builtin, siempre presente) vía `window.ow`.
+// No depende de módulos .owm (dialog, etc.).
+//
+// Personalízalo a gusto (React, Vue, Tailwind…): esto es sólo el default.
+
+import './style.css'
+
+interface OwBridge {
+  invoke<T = unknown>(module: string, fn: string, ...args: unknown[]): Promise<T>
+}
+const ow = (window as unknown as { ow: OwBridge }).ow
+const wid = (window as unknown as { __owWindowId: number }).__owWindowId
+
+const $ = <T extends HTMLElement = HTMLElement>(sel: string): T =>
+  document.querySelector(sel) as T
+const invoke = <T = unknown>(module: string, fn: string, ...args: unknown[]): Promise<T> =>
+  ow.invoke<T>(module, fn, ...args)
+
+interface PayloadEntry {
+  rel: string
+  dst: string
+  size: number
+  dir: boolean
+}
+interface InstallerInfo {
+  appId?: string
+  appName?: string
+  version?: string
+  publisher?: string
+}
+interface Target {
+  layout?: 'minimal' | 'layout'
+  dir?: string
+  shortcuts?: string[]
+}
+interface Bridge {
+  app?: { id?: string; name?: string; version?: string; publisher?: string }
+  targets?: Record<string, Target>
+  order?: string[]
+}
+
+const platform: string = (() => {
+  const p = navigator.userAgent.toLowerCase()
+  return p.includes('win') ? 'win' : p.includes('mac') ? 'mac' : 'linux'
+})()
+
+let mode: 'minimal' | 'layout' = 'minimal'
+let plan: PayloadEntry[] = []
+let busy = false
+
+function fmtSize(bytes: number): string {
+  if (!bytes) return ''
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MiB`
+}
+
+function setStatus(msg: string, kind: 'ok' | 'err' | '' = ''): void {
+  const el = $('#status')
+  el.textContent = msg
+  el.dataset.kind = kind
+}
+
+async function boot(): Promise<void> {
+  $('#win-min').addEventListener('click', () => void invoke('ow-window', 'minimize', wid))
+  $('#win-max').addEventListener('click', () => void invoke('ow-window', 'maximize', wid))
+  $('#win-close').addEventListener('click', () => void invoke('ow-window', 'close', wid))
+
+  const info = await invoke<InstallerInfo>('installer', 'info').catch(() => ({}))
+  const bridge = await invoke<Bridge | null>('installer', 'bridge').catch(() => null)
+  const t: Target = bridge?.targets?.[platform] ?? {}
+  mode = t.layout ?? 'minimal'
+
+  const name = info.appName ?? bridge?.app?.name ?? 'la app'
+  const version = info.version ?? bridge?.app?.version ?? ''
+  $('#summary').textContent =
+    `Se instalará ${name}${version ? ` ${version}` : ''} · modo ${mode} · ${platform}`
+
+  // Destino: preferimos el del bridge si es ABSOLUTO; si no, el default real.
+  let value = t.dir ?? ''
+  if (!value.startsWith('/')) {
+    value = await invoke<string>('installer', 'defaultDir').catch(() => '')
+  }
+  ;($('#dir') as HTMLInputElement).value = value
+
+  await refreshPlan()
+  $('#install').removeAttribute('disabled')
+}
+
+async function refreshPlan(): Promise<void> {
+  const bridge = await invoke<Bridge | null>('installer', 'bridge').catch(() => null)
+  plan = await invoke<PayloadEntry[]>('installer', 'plan', {
+    mode,
+    layout: mode === 'minimal' ? 'flat' : 'tree',
+    order: bridge?.order,
+  })
+  const total = plan.reduce((n, e) => n + e.size, 0)
+  $('#count').textContent = `${plan.length} · ${fmtSize(total)}`
+  $('#plan').textContent = plan
+    .slice(0, 300)
+    .map((e) => `${e.dst}${e.dir ? '/' : ''}${e.size ? `  ${fmtSize(e.size)}` : ''}`)
+    .join('\n')
+}
+
+async function pickDir(): Promise<void> {
+  const current = ($('#dir') as HTMLInputElement).value.trim()
+  try {
+    // Selector NATIVO del builtin installer (no usa el módulo `dialog`).
+    const dir = await invoke<string | null>('installer', 'chooseDir', {
+      title: 'Elegir carpeta de instalación',
+      defaultPath: current,
+    })
+    if (dir) ($('#dir') as HTMLInputElement).value = dir
+  } catch {
+    /* cancelado */
+  }
+}
+
+function targetExec(dir: string): string {
+  const top = plan.find((e) => !e.dir && !e.dst.includes('/')) ?? plan[0]
+  return top ? `${dir}/${top.dst}` : ''
+}
+
+async function doInstall(): Promise<void> {
+  if (busy) return
+  busy = true
+  const dir = ($('#dir') as HTMLInputElement).value.trim()
+  if (!dir) {
+    setStatus('Elige un directorio de instalación', 'err')
+    busy = false
+    return
+  }
+  $('#install').setAttribute('disabled', 'true')
+  $('#cancel').removeAttribute('hidden')
+  $('#bar').removeAttribute('hidden')
+  setStatus('Instalando…')
+
+  try {
+    const res = await invoke<{ files: number; dir: string }>('installer', 'install', {
+      dir,
+      mode,
+      layout: mode === 'minimal' ? 'flat' : 'tree',
+    })
+    $('#bar').value = 100
+    setStatus(`Instalado en ${res.dir} (${res.files} ficheros)`, 'ok')
+
+    if (($('#shortcut') as HTMLInputElement).checked) {
+      await invoke('installer', 'shortcuts', { execPath: targetExec(res.dir) }).catch(() => false)
+    }
+    if (($('#launch') as HTMLInputElement).checked) {
+      await invoke('installer', 'launch', { path: targetExec(res.dir) }).catch(() => false)
+      await invoke('ow-window', 'close', wid)
+    }
+  } catch (e) {
+    setStatus(e instanceof Error ? e.message : String(e), 'err')
+    $('#install').removeAttribute('disabled')
+  } finally {
+    busy = false
+    $('#cancel').setAttribute('hidden', 'true')
+  }
+}
+
+$('#pick').addEventListener('click', () => void pickDir())
+$('#install').addEventListener('click', () => void doInstall())
+$('#cancel').addEventListener('click', () => void invoke('ow-window', 'close', wid))
+
+void boot()

package/template-installer/src/style.css

@@ -0,0 +1,442 @@
+/* Copyright 2026 Owear Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Estilos del instalador — mismos tokens/componentes que el Starter de Owear
+ * (paleta oscura + acento rosado, JetBrains Mono + Dancing Script).
+ */
+
+:root {
+  color-scheme: dark;
+
+  /* colores base */
+  --bg: #282c34;
+  --bg-deep: #21252b;
+  --panel: #2c313a;
+  --panel-2: #21252b;
+  --line: #3b4048;
+  --line-2: #4b5263;
+  --text: #abb2bf;
+  --text-strong: #dcdfe4;
+  --muted: #5c6370;
+  --purple: #c678dd;
+  --green: #98c379;
+  --red: #e06c75;
+  --cyan: #56b6c2;
+
+  /* acento: rosado seco */
+  --accent: #d3869b;
+  --accent-hover: #c06f86;
+  --accent-ink: #241820;
+
+  --radius: 10px;
+  --btn: #2c313a;
+  --hover: rgba(255, 255, 255, 0.06);
+  --hover-strong: rgba(255, 255, 255, 0.14);
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --bg: #fafafa;
+  --bg-deep: #f0f0f1;
+  --panel: #ffffff;
+  --panel-2: #f0f0f1;
+  --line: #d7d7d9;
+  --line-2: #b9b9bc;
+  --text: #383a42;
+  --text-strong: #1f2126;
+  --muted: #9aa0a6;
+  --purple: #a626a4;
+  --green: #50a14f;
+  --red: #e45649;
+  --cyan: #0184bc;
+  --accent: #b5586e;
+  --accent-hover: #9d4760;
+  --accent-ink: #ffffff;
+  --btn: #e8e8ea;
+  --hover: rgba(0, 0, 0, 0.05);
+  --hover-strong: rgba(0, 0, 0, 0.1);
+}
+
+@font-face {
+  font-family: "Dancing Script";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./assets/dancing-script.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("./assets/jetbrains-mono.woff2") format("woff2");
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.55 "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
+    Consolas, monospace;
+  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: var(--bg-deep);
+}
+
+.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 {
+  color: var(--text-strong);
+  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(--btn);
+  color: var(--text-strong);
+}
+
+.winbtn--close:hover {
+  background: var(--red);
+  color: #fff;
+}
+
+/* ── Layout ───────────────────────────────────────────────────────────── */
+.page {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 26px clamp(18px, 4vw, 44px) 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 860px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+h1 {
+  margin: 0;
+  color: var(--text-strong);
+  font-family: "Dancing Script", cursive;
+  font-weight: 600;
+  font-size: clamp(30px, 4vw, 44px);
+  line-height: 1.15;
+}
+
+.lead {
+  margin: 0;
+  max-width: 72ch;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.lead strong {
+  color: var(--text);
+}
+
+.board {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background: var(--bg-deep);
+  border-radius: var(--radius);
+}
+
+.card {
+  background: var(--panel);
+  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(--purple);
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.hint {
+  margin: 0 0 12px;
+  color: var(--muted);
+}
+
+.hint code,
+.lead code {
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 1px 6px;
+  font-size: 12.5px;
+}
+
+code {
+  color: var(--purple);
+}
+
+.console {
+  flex: 1;
+  min-height: 150px;
+  max-height: 42vh;
+  margin: 0;
+  overflow: auto;
+  background: var(--bg-deep);
+  border-radius: 8px;
+  padding: 12px 14px;
+  font: 12.5px/1.6 "JetBrains Mono", ui-monospace, monospace;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+/* ── Formulario ───────────────────────────────────────────────────────── */
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.row + .row {
+  margin-top: 12px;
+}
+
+.field {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--text);
+  background: var(--bg-deep);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+
+.field:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.opt input {
+  accent-color: var(--accent);
+}
+
+/* ── Botones (igual que el Starter) ───────────────────────────────────── */
+.btn {
+  position: relative;
+  isolation: isolate;
+  font: inherit;
+  color: var(--text);
+  background: var(--btn);
+  border: 0;
+  border-radius: 10px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+
+.btn::before {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: 7px;
+  background: transparent;
+  transition: inset 0.12s ease, border-radius 0.12s ease, background 0.12s ease;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.btn:hover::before {
+  background: var(--hover);
+}
+
+.btn:active::before {
+  inset: 0;
+  border-radius: 10px;
+  background: var(--hover-strong);
+}
+
+.btn--primary {
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.btn--primary:hover::before {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.btn--primary:active::before {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.btn--primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn--ghost {
+  background: transparent;
+}
+
+.linkbtn {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.linkbtn:hover {
+  color: var(--accent);
+}
+
+/* ── Pie fijo con progreso ────────────────────────────────────────────── */
+.foot {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px clamp(18px, 4vw, 44px);
+  background: color-mix(in srgb, var(--bg-deep) 86%, transparent);
+  backdrop-filter: blur(6px);
+}
+
+.foot__spacer {
+  flex: 1;
+}
+
+.status {
+  color: var(--muted);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status[data-kind="ok"] {
+  color: var(--green);
+}
+
+.status[data-kind="err"] {
+  color: var(--red);
+}
+
+progress {
+  width: 160px;
+  height: 6px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--panel-2);
+  overflow: hidden;
+}
+
+progress::-webkit-progress-bar {
+  background: var(--panel-2);
+  border-radius: 999px;
+}
+
+progress::-webkit-progress-value {
+  background: var(--accent);
+  border-radius: 999px;
+}

package/template-installer/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node", "vite/client"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src", "app"]
+}

package/template-installer/uninstaller/app/main.ts

@@ -0,0 +1,16 @@
+// Copyright 2026 Owear Contributors
+// SPDX-License-Identifier: Apache-2.0
+//
+// app/main.ts — proceso principal del DESINSTALADOR (sidecar Node).
+import { app, BrowserWindow } from '@owear/core'
+
+app.whenReady().then(() => {
+  const win = new BrowserWindow({
+    title: 'Desinstalador',
+    width: 720,
+    height: 460,
+    titleBarStyle: 'custom',
+    url: process.env.OW_DEV_SERVER_URL ?? 'app://index.html',
+  })
+  win.on('closed', () => app.quit())
+})

package/template-installer/uninstaller/index.html

@@ -0,0 +1,54 @@
+<!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>Desinstalar · __APP_NAME__</title>
+  </head>
+  <body>
+    <header class="titlebar">
+      <div class="titlebar__drag" data-ow-drag>
+        <span class="brand__mark" aria-hidden="true"></span>
+        <span class="brand__name">Desinstalador · __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-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">
+        <h1>Desinstalar __APP_NAME__</h1>
+        <p class="lead" id="summary">Localizando la instalación…</p>
+      </section>
+
+      <section class="board">
+        <article class="card">
+          <header class="card__head"><h2>Instalación</h2></header>
+          <div class="row">
+            <input id="dir" class="field" type="text" spellcheck="false" aria-label="Directorio de instalación" />
+            <button id="pick" class="btn">Elegir…</button>
+          </div>
+          <div class="row">
+            <label class="opt"><input type="checkbox" id="keepData" checked /> Conservar mis datos</label>
+          </div>
+        </article>
+      </section>
+    </main>
+
+    <footer class="foot">
+      <span id="status" class="status"></span>
+      <span class="foot__spacer"></span>
+      <button id="uninstall" class="btn btn--primary" disabled>Desinstalar</button>
+    </footer>
+
+    <script type="module" src="/src/uninstaller.ts"></script>
+  </body>
+</html>