@owear/cli 0.1.3 → 0.1.4

package/template-installer/src/installer.ts

@@ -2,23 +2,23 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 // src/installer.ts — UI del instalador (vanilla). Corre en el renderer y usa
-// la API nativa `installer` vía `window.ow` (inyectado por el kernel).
+// 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'
 
-declare global {
-  interface Window {
-    __owWindowId: number
-    ow: { invoke<T = unknown>(module: string, fn: string, ...args: unknown[]): Promise<T> }
-  }
+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> =>
-  window.ow.invoke(module, fn, ...args) as Promise<T>
+  ow.invoke<T>(module, fn, ...args)
 
 interface PayloadEntry {
   rel: string
@@ -52,6 +52,13 @@ 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
@@ -59,9 +66,9 @@ function setStatus(msg: string, kind: 'ok' | 'err' | '' = ''): void {
 }
 
 async function boot(): Promise<void> {
-  // controles de ventana (titlebar propia)
-  const id = window.__owWindowId
-  $('#win-close').addEventListener('click', () => void invoke('ow-window', 'close', id))
+  $('#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)
@@ -69,10 +76,15 @@ async function boot(): Promise<void> {
   mode = t.layout ?? 'minimal'
 
   const name = info.appName ?? bridge?.app?.name ?? 'la app'
+  const version = info.version ?? bridge?.app?.version ?? ''
   $('#summary').textContent =
-    `${name} ${info.version ?? bridge?.app?.version ?? ''} — modo ${mode} · ${platform}`
+    `Se instalará ${name}${version ? ` ${version}` : ''} · modo ${mode} · ${platform}`
 
-  const value = t.dir ?? (info.appName ? `~/opt/${info.appName.toLowerCase()}` : '')
+  // 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()
@@ -80,28 +92,39 @@ async function boot(): Promise<void> {
 }
 
 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: (await invoke<Bridge | null>('installer', 'bridge').catch(() => null))?.order,
+    order: bridge?.order,
   })
   const total = plan.reduce((n, e) => n + e.size, 0)
-  $('#count').textContent = `${plan.length} entradas · ${(total / 1024).toFixed(1)} KiB`
+  $('#count').textContent = `${plan.length} · ${fmtSize(total)}`
   $('#plan').textContent = plan
     .slice(0, 300)
-    .map((e) => `${e.dir ? '📁' : '📄'} ${e.dst}${e.size ? `  (${e.size} B)` : ''}`)
+    .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 {
-    const dir = await invoke<string | null>('dialog', 'open', 'openDirectory', 'Elegir carpeta')
+    // 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 o sin picker */
+    /* 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
@@ -126,15 +149,11 @@ async function doInstall(): Promise<void> {
     setStatus(`Instalado en ${res.dir} (${res.files} ficheros)`, 'ok')
 
     if (($('#shortcut') as HTMLInputElement).checked) {
-      const exec = plan.find((e) => !e.dir && !e.dst.includes('/'))?.dst ?? plan[0]?.dst
-      await invoke('installer', 'shortcuts', { execPath: `${dir}/${exec ?? ''}` }).catch(() => false)
+      await invoke('installer', 'shortcuts', { execPath: targetExec(res.dir) }).catch(() => false)
     }
     if (($('#launch') as HTMLInputElement).checked) {
-      const exec = plan.find((e) => !e.dir && !e.dst.includes('/'))?.dst ?? plan[0]?.dst
-      await invoke('installer', 'launch', { path: `${dir}/${exec ?? ''}` }).catch(() => false)
-      const v = await invoke<{ elevated: boolean }>('installer', 'elevate').catch(() => ({ elevated: false }))
-      void v
-      await invoke('ow-window', 'close', window.__owWindowId)
+      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')
@@ -147,6 +166,6 @@ async function doInstall(): Promise<void> {
 
 $('#pick').addEventListener('click', () => void pickDir())
 $('#install').addEventListener('click', () => void doInstall())
-$('#cancel').addEventListener('click', () => void invoke('ow-window', 'close', window.__owWindowId))
+$('#cancel').addEventListener('click', () => void invoke('ow-window', 'close', wid))
 
 void boot()

package/template-installer/src/style.css

@@ -1,66 +1,442 @@
 /* Copyright 2026 Owear Contributors
-   SPDX-License-Identifier: Apache-2.0 */
+ * 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 {
-  --bg: #0f1115;
-  --panel: #171a21;
-  --fg: #e8eaed;
-  --muted: #9aa0aa;
-  --accent: #4c8bf5;
-  --ok: #3fb950;
-  --err: #f85149;
   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);
 }
-* { box-sizing: border-box; }
-html, body { height: 100%; margin: 0; }
+
+: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(--fg);
-  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  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;
-  justify-content: space-between;
-  height: 38px;
-  padding: 0 8px 0 14px;
-  background: #12141a;
-  border-bottom: 1px solid #232733;
+  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__drag { flex: 1; -webkit-app-region: drag; user-select: none; }
-.brand__name { font-weight: 600; }
+
+.titlebar__controls {
+  display: flex;
+}
+
 .winbtn {
-  width: 30px; height: 30px; border: 0; border-radius: 6px;
-  background: transparent; color: var(--muted); cursor: pointer;
-}
-.winbtn:hover { background: #232733; color: var(--fg); }
-.winbtn--close:hover { background: #7d2c2c; color: #fff; }
-.winbtn svg { fill: none; stroke: currentColor; stroke-width: 1.3; }
-
-.page { max-width: 780px; margin: 0 auto; padding: 22px 18px 90px; display: grid; gap: 14px; }
-.hero h1 { margin: 6px 0 4px; font-size: 24px; }
-.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
-.lead { color: var(--muted); margin: 0; }
-
-.card { background: var(--panel); border: 1px solid #232733; border-radius: 12px; padding: 14px; }
-.card--grow { min-height: 160px; }
-.card__head { display: flex; align-items: center; justify-content: space-between; }
-.card__head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
-.badge { background: #232733; border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--muted); }
-
-.row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
-.input { flex: 1; background: #0d0f13; border: 1px solid #2a2f3b; color: var(--fg); border-radius: 8px; padding: 8px 10px; }
-.opt { display: flex; align-items: center; gap: 6px; color: var(--muted); }
-.console { background: #0d0f13; border: 1px solid #232733; border-radius: 8px; padding: 10px; max-height: 260px; overflow: auto; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; color: var(--muted); }
-
-.btn { background: #232733; color: var(--fg); border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
-.btn:hover { background: #2b3040; }
-.btn--primary { background: var(--accent); color: #fff; }
-.btn--primary:disabled { opacity: .5; cursor: default; }
-.btn--ghost { background: transparent; border: 1px solid #2a2f3b; color: var(--muted); }
-
-.actions { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 18px; background: #12141acc; backdrop-filter: blur(6px); border-top: 1px solid #232733; }
-.status { margin-right: auto; color: var(--muted); }
-.status[data-kind="ok"] { color: var(--ok); }
-.status[data-kind="err"] { color: var(--err); }
-progress { width: 160px; }
+  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;
+}