@owear/cli 0.1.3 → 0.1.5

package/template/src/style.css

@@ -4,18 +4,74 @@
 
 :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;
+
+  /* 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);
+}
+
+/* Tema CLARO: lo aplica el renderer con data-theme (según theme.setSource). */
+: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.10);
+}
+
+/* Cursiva real (self-hosted → funciona offline) */
+@font-face {
+  font-family: "Dancing Script";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./assets/dancing-script.woff2") format("woff2");
+}
+
+/* UI (JetBrains Mono, self-hosted, variable 400–700) */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("./assets/jetbrains-mono.woff2") format("woff2");
 }
 
 * {
@@ -31,7 +87,8 @@ body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font: 14px/1.55 "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
+    Consolas, monospace;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -45,8 +102,7 @@ body {
   flex: 0 0 auto;
   display: flex;
   align-items: stretch;
-  background: #010409;
-  border-bottom: 1px solid var(--line);
+  background: var(--bg-deep);
 }
 
 .titlebar__drag {
@@ -66,6 +122,7 @@ body {
 }
 
 .brand__name {
+  color: var(--text-strong);
   font-weight: 600;
   letter-spacing: 0.2px;
   white-space: nowrap;
@@ -73,10 +130,26 @@ body {
   text-overflow: ellipsis;
 }
 
+/* Los controles del web se ocultan por DEFECTO y solo se muestran si el SO no
+   provee botones nativos (el renderer añade .ow-web-controls). Así nunca
+   parpadean detrás del overlay nativo (que es transparente). */
 .titlebar__controls {
+  display: none;
+}
+
+html.ow-web-controls .titlebar__controls {
   display: flex;
 }
 
+/* titleBarOverlay activo: reservar el hueco a la derecha y ajustar la altura. */
+html.ow-native-overlay .titlebar__drag {
+  padding-right: var(--ow-overlay-width, 0px);
+}
+
+html.ow-native-overlay .titlebar {
+  height: var(--ow-overlay-height, 40px);
+}
+
 .winbtn {
   width: 46px;
   border: 0;
@@ -94,12 +167,12 @@ body {
 }
 
 .winbtn:hover {
-  background: var(--line);
-  color: var(--text);
+  background: var(--btn);
+  color: var(--text-strong);
 }
 
 .winbtn--close:hover {
-  background: var(--danger);
+  background: var(--red);
   color: #fff;
 }
 
@@ -123,19 +196,14 @@ body {
   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;
+  color: var(--text-strong);
+  font-family: "Dancing Script", cursive;
+  font-weight: 600;
+  font-size: clamp(30px, 4vw, 44px);
+  line-height: 1.15;
+  letter-spacing: 0;
 }
 
 .lead {
@@ -157,39 +225,68 @@ h1 {
 }
 
 .btn {
+  position: relative;
+  isolation: isolate;
   font: inherit;
   color: var(--text);
-  background: #21262d;
-  border: 1px solid var(--line-2);
-  border-radius: 8px;
+  background: var(--btn);
+  border: 0;
+  border-radius: 10px;
   padding: 8px 14px;
   cursor: pointer;
 }
 
-.btn:hover {
-  background: #2b323b;
+/* Hover tipo menú contextual: el resaltado va DENTRO, con margen.
+   Al pulsar, se expande hasta llenar el botón. */
+.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 {
-  transform: translateY(1px);
+.btn:active::before {
+  inset: 0;
+  border-radius: 10px;
+  background: var(--hover-strong);
 }
 
 .btn--primary {
   background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
+  color: var(--accent-ink);
   font-weight: 600;
 }
 
-.btn--primary:hover {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
+.btn--primary:hover::before {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.btn--primary:active::before {
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .btn--ghost {
   background: transparent;
 }
 
+/* Contenedor con fondo propio que agrupa las cards de abajo */
+.board {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background: var(--bg-deep);
+  border-radius: var(--radius);
+}
+
 .grid {
   display: grid;
   grid-template-columns: minmax(240px, 300px) 1fr;
@@ -204,7 +301,6 @@ h1 {
 
 .card {
   background: var(--panel);
-  border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 16px 18px;
 }
@@ -232,7 +328,7 @@ h1 {
 
 .badge {
   font-size: 12px;
-  color: var(--muted);
+  color: var(--purple);
   background: var(--panel-2);
   border: 1px solid var(--line);
   border-radius: 999px;
@@ -259,12 +355,19 @@ h1 {
 
 .kv dd {
   margin: 0;
+  color: var(--text-strong);
   font-variant-numeric: tabular-nums;
 }
 
+.kv dd.mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  word-break: break-all;
+}
+
 .ua {
   margin: 14px 0 0;
-  color: #5b6672;
+  color: var(--muted);
   font-size: 12px;
   word-break: break-word;
 }
@@ -275,11 +378,11 @@ h1 {
   max-height: 46vh;
   margin: 0;
   overflow: auto;
-  background: #010409;
-  border: 1px solid var(--line);
+  background: var(--bg-deep);
   border-radius: 8px;
   padding: 12px 14px;
-  font: 12.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  font: 12.5px/1.6 "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  color: var(--text);
   white-space: pre-wrap;
   word-break: break-word;
   user-select: text;
@@ -287,11 +390,11 @@ h1 {
 }
 
 .console .line--ok {
-  color: var(--ok);
+  color: var(--green);
 }
 
 .console .line--err {
-  color: #ff8085;
+  color: var(--red);
 }
 
 .console .line--muted {
@@ -307,7 +410,7 @@ h1 {
 }
 
 .linkbtn:hover {
-  color: var(--text);
+  color: var(--accent);
 }
 
 .hint {
@@ -318,25 +421,146 @@ h1 {
 .code {
   margin: 0;
   overflow: auto;
-  background: #010409;
-  border: 1px solid var(--line);
+  background: var(--bg-deep);
   border-radius: 8px;
   padding: 14px;
-  font: 12.5px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
-  color: #c9d1d9;
+  font: 12.5px/1.7 "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  color: var(--text);
   user-select: text;
   -webkit-user-select: text;
 }
 
 code {
-  color: #79c0ff;
+  color: var(--purple);
 }
 
 .hint code,
 .lead code {
-  background: #21262d;
+  background: var(--panel-2);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 1px 6px;
   font-size: 12.5px;
 }
+
+/* ── Navegador embebido (webview nativa dentro de #wv-slot) ───────────── */
+.browser {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.browser__bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.iconbtn {
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--text-strong);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.iconbtn:hover {
+  background: var(--line);
+}
+
+.browser__url {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--text);
+  background: var(--bg-deep);
+  border: 0;
+  border-radius: 8px;
+  padding: 7px 10px;
+}
+
+/* El placeholder define la zona donde se coloca la webview nativa encima. */
+.browser__slot {
+  height: min(64vh, 600px);
+  min-height: 380px;
+  border-radius: 8px;
+  background: var(--bg-deep);
+}
+
+/* ── C10: pantallas (multi-monitor) ─────────────────────────────────────── */
+.monmap {
+  position: relative;
+  width: 100%;
+  height: 190px;
+  margin-bottom: 10px;
+  background: var(--bg-deep);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.monmap__hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: 12.5px;
+}
+.monmap__cell {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px solid var(--line-2);
+  border-radius: 6px;
+  background: var(--panel);
+  padding: 4px 6px;
+  overflow: hidden;
+}
+.monmap__cell--primary {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+.monmap__id {
+  display: block;
+  font: 600 11px/1.3 "JetBrains Mono", ui-monospace, monospace;
+  color: var(--text-strong);
+}
+.monmap__meta {
+  display: block;
+  font: 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.monmap__cursor {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  margin: -5px 0 0 -5px;
+  border-radius: 50%;
+  background: var(--cyan);
+  box-shadow: 0 0 0 3px rgba(86, 182, 194, 0.25);
+}
+.monlist {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 150px;
+  overflow: auto;
+  user-select: text;
+  -webkit-user-select: text;
+}
+.monlist__row {
+  font: 12px/1.5 "JetBrains Mono", ui-monospace, monospace;
+  color: var(--text);
+}
+.monlist__row code {
+  color: var(--accent);
+}
+.console--short {
+  min-height: 120px;
+  max-height: 28vh;
+}

package/template-installer/index.html

@@ -6,14 +6,22 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Instalador — __APP_NAME__</title>
+    <title>Instalador · __APP_NAME__</title>
   </head>
   <body>
+    <!-- Titlebar propia: el kernel convierte [data-ow-drag] en zona de arrastre. -->
     <header class="titlebar">
       <div class="titlebar__drag" data-ow-drag>
+        <span class="brand__mark" aria-hidden="true"></span>
         <span class="brand__name">Instalador · __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>
@@ -22,39 +30,41 @@
 
     <main class="page">
       <section class="hero">
-        <span class="eyebrow">Owear Installer</span>
         <h1>Instalar __APP_NAME__</h1>
         <p class="lead" id="summary">Cargando metadatos…</p>
       </section>
 
-      <section class="card">
-        <header class="card__head"><h2>Destino</h2></header>
-        <div class="row">
-          <input id="dir" class="input" type="text" spellcheck="false" />
-          <button id="pick" class="btn">Elegir…</button>
-        </div>
-        <div class="row">
-          <label class="opt"><input type="checkbox" id="shortcut" checked /> Acceso directo</label>
-          <label class="opt"><input type="checkbox" id="launch" checked /> Abrir al terminar</label>
-        </div>
-      </section>
+      <section class="board">
+        <article class="card">
+          <header class="card__head"><h2>Destino</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="shortcut" checked /> Acceso directo</label>
+            <label class="opt"><input type="checkbox" id="launch" checked /> Abrir al terminar</label>
+          </div>
+        </article>
 
-      <section class="card card--grow">
-        <header class="card__head">
-          <h2>Contenido</h2>
-          <span class="badge" id="count">—</span>
-        </header>
-        <pre id="plan" class="console">—</pre>
+        <article class="card card--grow">
+          <header class="card__head">
+            <h2>Contenido</h2>
+            <span class="badge" id="count">—</span>
+          </header>
+          <pre id="plan" class="console">—</pre>
+        </article>
       </section>
-
-      <footer class="actions">
-        <progress id="bar" max="100" value="0" hidden></progress>
-        <span id="status" class="status"></span>
-        <button id="install" class="btn btn--primary" disabled>Instalar</button>
-        <button id="cancel" class="btn btn--ghost" hidden>Cancelar</button>
-      </footer>
     </main>
 
+    <footer class="foot">
+      <span id="status" class="status"></span>
+      <span class="foot__spacer"></span>
+      <progress id="bar" max="100" value="0" hidden></progress>
+      <button id="cancel" class="btn btn--ghost" hidden>Cancelar</button>
+      <button id="install" class="btn btn--primary" disabled>Instalar</button>
+    </footer>
+
     <script type="module" src="/src/installer.ts"></script>
   </body>
 </html>