@jossuealcala/madre 1.0.0 → 1.0.1

package/public/styles.css

@@ -1964,8 +1964,13 @@ dialog.viewer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px)
 .run-request .run-line.running { cursor: progress; border-color: var(--agent, var(--phosphor)); }
 .run-request .run-line.running .choice-tag { animation: klaxon 1.2s ease-in-out infinite; }
 @media (prefers-reduced-motion: reduce) { .run-request .run-line.running .choice-tag { animation: none; } }
-.run-request .run-line.ran .choice-tag { background: var(--agent, var(--phosphor)); color: var(--bg); }
+.run-request .run-line.ran .choice-tag { border-color: var(--ok, var(--phosphor)); color: var(--ok, var(--phosphor)); }
 .run-request .run-line.failed .choice-tag { border-color: var(--crit); color: var(--crit); }
+.run-request .run-summary { margin: 10px 2px 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); }
+.run-request .run-progress-track { position: relative; flex: 1 1 100%; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--agent, var(--phosphor)) 18%, transparent); }
+.run-request .run-progress-track::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 32%; border-radius: inherit; background: var(--agent, var(--phosphor)); animation: run-travel 1.6s ease-in-out infinite alternate; }
+@keyframes run-travel { from { transform: translateX(0); } to { transform: translateX(220%); } }
+@media (prefers-reduced-motion: reduce) { .run-request .run-progress-track::after { animation: none; width: 100%; } }
 .run-request .run-line.refused { cursor: not-allowed; opacity: .6; }
 .run-request .run-line.refused .choice-tag { border-color: var(--text-3); color: var(--text-3); }
 /* A command still alive: where it serves, and the two things to do with it. The tag holds still
@@ -2463,6 +2468,23 @@ dialog.intents-window { width: 760px; height: 640px; }
 .conn-card .key-link:hover { color: var(--ph); }
 .conn-card .key-said.bad { color: var(--terror); }
 
+/* The second half of a browser sign-in. The CLI opens a page and then waits to be told the code
+   that page gives back; this is where the address stays put and where the code is typed. It used
+   to be nowhere, so the only thing on screen was a heartbeat and the sign-in died of its clock. */
+.login-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.login-ask[hidden] { display: none; }
+.login-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 260px; }
+.login-code input { flex: 1 1 180px; min-width: 150px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
+.login-code input:focus { outline: none; border-color: var(--phosphor); }
+.login-code button { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--phosphor); color: var(--phosphor); background: color-mix(in srgb, var(--phosphor) 10%, transparent); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
+.login-code button:disabled { opacity: .5; cursor: default; }
+.login-code .key-said { flex: 1 0 100%; }
+/* Inside a connection card the ground is black and everything is phosphor, as the key form is. */
+.conn-card .login-code input { color: var(--ph); background: #000; border: 1px solid var(--ph-dim); border-radius: 0; font-size: 12px; padding: 6px 8px; }
+.conn-card .login-code input::placeholder { color: var(--ph-dim); opacity: .7; }
+.conn-card .login-code input:focus { outline: 1px solid var(--ph); border-color: var(--ph); }
+.conn-card .login-code button { border: 1px solid var(--ph); color: #041004; background: var(--ph); border-radius: 0; }
+
 /* A module card, floor by floor: what it is, what it does, what it touches, how it is doing, and
    then the switch. Everything inside a card wears the panel's phosphor, never the page's palette,
    and every number is given room so it can never land on its own label. */
@@ -3219,6 +3241,14 @@ dialog.whats-new::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: bl
    The list says whose servers these are, each one with a lamp that is lit while it answers. When
    the one on screen stops, the page stays, dimmed, and says so; it comes back on its own. */
 .ports-head { padding: 8px 10px 6px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--text-3); }
+.ports-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
+.ports-refresh { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; color: var(--text-2); background: var(--surface, var(--panel)); box-shadow: var(--key-rest); cursor: pointer; }
+.ports-refresh:hover { color: var(--text); box-shadow: var(--key-over, var(--key-rest)); }
+.ports-refresh:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
+.ports-refresh svg { width: 17px; height: 17px; }
+.ports-refresh.checking svg { animation: ports-turn .8s linear infinite; }
+@keyframes ports-turn { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ports-refresh.checking svg { animation: none; } }
 .ports-empty { padding: 6px 10px 10px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
 .ports-lamp { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--phosphor) 16%, transparent); }
 .ports-row.wider .ports-lamp, .ports-lamp.off { background: var(--text-3); box-shadow: none; }
@@ -8216,7 +8246,7 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 .tour-points li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--tour-acc); }
 .tour-keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 6px 14px; margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); }
 .tour-keys dt { font-size: 12.5px; color: var(--text-2); }
-.tour-keys dd { margin: 0; max-width: 22ch; justify-self: end; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; text-align: right; color: var(--text); }
+.tour-keys dd { margin: 0; max-width: 34ch; text-wrap: balance; justify-self: end; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; text-align: right; color: var(--text); }
 .tour-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
 .tour-gap { flex: 1; }
 .tour-where { font-size: 12.5px; color: var(--text-3); }
@@ -8228,7 +8258,7 @@ dialog.tour-bonjour::backdrop { background: transparent; }
 
 /* The scenes: a few shapes, drawn small, moving slowly. */
 .tour-scene { position: relative; height: 168px; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tour-acc) 14%, transparent), transparent 70%), color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); }
-.tour-scene.s-moved { height: auto; padding: 12px 14px; }
+.tour-scene.s-moved, .tour-scene.s-table { height: auto; padding: 12px 14px; }
 .ts-moved { display: grid; gap: 6px; }
 .ts-moved-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.4fr); align-items: center; gap: 8px; font-size: 12.5px; animation: tour-rise calc(420ms * var(--motion-scale, 1)) ease both; }
 .ts-moved-row:nth-child(2) { animation-delay: 60ms; } .ts-moved-row:nth-child(3) { animation-delay: 120ms; } .ts-moved-row:nth-child(4) { animation-delay: 180ms; } .ts-moved-row:nth-child(5) { animation-delay: 240ms; } .ts-moved-row:nth-child(6) { animation-delay: 300ms; } .ts-moved-row:nth-child(7) { animation-delay: 360ms; } .ts-moved-row:nth-child(8) { animation-delay: 420ms; }
@@ -8338,3 +8368,137 @@ dialog.tour-bonjour::backdrop { background: transparent; }
   .ts-search em { width: 54%; }
 }
 .tour-pill-slot:not([hidden]) { display: inline-flex; align-items: center; }
+
+/* ==========================================================================================
+   KEYS WITH A CLEAN EDGE · 13 OCT
+   ------------------------------------------------------------------------------------------
+   The two soft shadows of the shared light (above) read as a smudge on a white card: the light
+   one vanishes and the dark one spreads. A key now stands on three thin layers instead — a
+   hairline that draws its edge, a tight contact shadow and a short soft one below — with a
+   faint lit top in the dark. Over it, it lifts a little; pressed, the shade goes inside. The
+   same four tokens dress every key, in Home and in every project.
+   ========================================================================================== */
+:root {
+  --key-rest: inset 0 1px 0 rgba(255, 255, 255, .055), 0 0 0 .5px rgba(0, 0, 0, .6), 0 1px 1.5px rgba(0, 0, 0, .42), 0 3px 8px -3px rgba(0, 0, 0, .5);
+  --key-over: inset 0 1px 0 rgba(255, 255, 255, .075), 0 0 0 .5px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .38), 0 8px 18px -7px rgba(0, 0, 0, .58);
+  --key-down: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 .5px rgba(0, 0, 0, .5);
+  --key-track: inset 0 0 0 .5px rgba(255, 255, 255, .07), inset 0 1px 2px rgba(0, 0, 0, .38);
+}
+:root[data-scheme="light"] {
+  --key-rest: 0 0 0 .5px rgba(22, 30, 22, .11), 0 1px 1.5px rgba(22, 30, 22, .08), 0 2px 6px -2px rgba(22, 30, 22, .12);
+  --key-over: 0 0 0 .5px rgba(22, 30, 22, .13), 0 2px 3px rgba(22, 30, 22, .08), 0 8px 18px -8px rgba(22, 30, 22, .2);
+  --key-down: inset 0 1px 2px rgba(22, 30, 22, .14), inset 0 0 0 .5px rgba(22, 30, 22, .14);
+  --key-track: inset 0 0 0 .5px rgba(22, 30, 22, .12), inset 0 1px 2px rgba(22, 30, 22, .06);
+}
+
+/* ==========================================================================================
+   OPENCODE BY PROVIDER · 13 OCT
+   The composer's chooser groups OpenCode's models under the provider they come from, and
+   AJUSTES › Project › OpenCode lists the providers with their key and their switch.
+   ========================================================================================== */
+.model-list { max-height: 320px; }
+.model-group { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 10px 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
+.model-group:first-of-type { margin-top: 6px; }
+.model-group b { font-weight: 650; color: var(--text-2); }
+.model-group span { letter-spacing: .04em; text-transform: none; font-size: 10.5px; }
+.model-group + .model-option { margin-top: 1px; }
+.model-manage { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--agent, var(--phosphor)); font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
+.model-manage:hover { background: color-mix(in srgb, var(--agent, var(--phosphor)) 10%, transparent); }
+
+.oc-block { display: grid; gap: 12px; margin: 0 16px 16px; padding: 16px 16px 12px; border-radius: 12px; box-shadow: var(--key-track); }
+.oc-title { display: grid; gap: 3px; }
+.oc-title b, .oc-add-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.oc-providers { display: grid; gap: 0; }
+.oc-provider { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+.oc-provider:first-child { border-top: 0; padding-top: 2px; }
+.oc-provider .sx-words { display: grid; gap: 1px; min-width: 0; }
+.oc-provider .sx-words b { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.oc-controls { display: inline-flex; align-items: center; gap: 12px; flex: none; }
+.oc-shown { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
+.oc-add { display: grid; grid-template-columns: auto minmax(110px, 160px) minmax(0, 1fr) auto auto; align-items: center; gap: 8px 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+.oc-add .sx-input { height: 32px; min-width: 0; }
+.oc-where { font-size: 12px; font-weight: 550; color: var(--phosphor); text-decoration: none; white-space: nowrap; }
+.oc-where:hover { text-decoration: underline; }
+.oc-default-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+.oc-default-row .sx-words { display: grid; gap: 2px; }
+.oc-default-row .sx-words b { font-size: 13.5px; font-weight: 600; color: var(--text); }
+.oc-picks { display: grid; gap: 8px; min-width: 0; }
+.oc-picks .sx-input { height: 32px; min-width: 0; width: 100%; }
+.oc-block > .sx-foot { margin: 0; font-size: 11.5px; }
+@container (max-width: 560px) {
+  .oc-add { grid-template-columns: minmax(0, 1fr) auto; }
+  .oc-add-label { grid-column: 1 / -1; }
+  .oc-add .sx-input { grid-column: 1 / -1; }
+  .oc-default-row { grid-template-columns: 1fr; }
+}
+
+/* ==========================================================================================
+   AGENTS, FOLDED · 13 OCT
+   Each agent is one line until it is opened: who it is, whether it has a session and a chevron.
+   Open, its settings come in pairs and its sign-in shows the last lines, the heartbeat once.
+   ========================================================================================== */
+#settings .sx-agent { container-type: inline-size; }
+.sx-agent > .sx-head { padding: 0; }
+.sx-agent-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 14px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
+.sx-agent-toggle .sx-words { flex: 1; min-width: 0; }
+.sx-agent-toggle .sx-words p { margin: 0; }
+.sx-agent-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--phosphor) 55%, transparent); outline-offset: -2px; }
+.sx-chevron { flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform calc(180ms * var(--motion-scale, 1)) var(--ease-out, ease-out); }
+.sx-agent.open .sx-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
+.sx-agent:not(.open) > .sx-meta, .sx-agent:not(.open) > .sx-agent-body { display: none; }
+.sx-agent:not(.open) { padding-bottom: 0; }
+.sx-agent > .sx-meta { padding-top: 0; margin-top: -4px; }
+.sx-agent-body { display: grid; }
+.sx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sx-duo > .sx-row { min-width: 0; gap: 10px; padding-right: 14px; }
+.sx-duo > .sx-row .sx-control { max-width: none; }
+.sx-duo > .sx-row + .sx-row { border-left: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
+@container (max-width: 380px) {
+  .sx-duo { grid-template-columns: 1fr; }
+  .sx-duo > .sx-row + .sx-row { border-left: 0; }
+}
+.sx-agent .login-log { max-height: 132px; overflow-y: auto; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); font-family: var(--mono); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
+.sx-agent .login-log .beat { color: var(--text-3); }
+.sx-agent .login-log a { color: var(--phosphor); }
+
+/* ==========================================================================================
+   QUIET GEARS · 13 OCT
+   The settings key of Files and Servers and the new-file key wore the white raised face the
+   window keys wear only when they are ON (split view chosen), so they read as already pressed.
+   At rest they now dress like the controls beside them — a hairline track, the bar's own
+   ground, a grey icon — and take the accent only under the pointer, the way the window keys do.
+   ========================================================================================== */
+:root .surface-gear, :root[data-scheme] .surface-gear {
+  border: 1px solid var(--line-2) !important;
+  background-color: color-mix(in srgb, var(--text) 3%, transparent) !important;
+  box-shadow: none !important;
+  color: var(--text-3);
+  border-radius: 9px;
+}
+:root .surface-gear:hover:not(:disabled), :root .surface-gear:focus-visible {
+  color: var(--phosphor);
+  background-color: color-mix(in srgb, var(--phosphor) 10%, transparent) !important;
+  box-shadow: none !important;
+}
+:root .surface-gear:active:not(:disabled), :root .surface-gear[aria-pressed="true"], :root .surface-gear[aria-expanded="true"] {
+  color: var(--phosphor);
+  background-color: var(--surface, var(--panel)) !important;
+  box-shadow: var(--key-down) !important;
+}
+
+/* The tour's widgets scene (1.1): four cards on a board, each with two meters that fill once. */
+.ts-grid.ts-widgets { top: 22px; bottom: 22px; grid-template-columns: repeat(2, 1fr); }
+.ts-widgets .ts-card { display: grid; align-content: center; gap: 9px; padding: 0 14px; }
+.ts-widgets .ts-card i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--phosphor) calc(var(--w) * 100%), color-mix(in srgb, var(--text) 10%, transparent) 0); }
+@media (prefers-reduced-motion: no-preference) {
+  .ts-widgets .ts-card i { animation: ts-fill 1.6s cubic-bezier(.2, .7, .2, 1) both; }
+  .ts-widgets .ts-card:nth-child(2) i { animation-delay: .15s; } .ts-widgets .ts-card:nth-child(3) i { animation-delay: .3s; } .ts-widgets .ts-card:nth-child(4) i { animation-delay: .45s; }
+}
+@keyframes ts-fill { from { background-size: 0 100%; background-repeat: no-repeat; } to { background-size: 100% 100%; background-repeat: no-repeat; } }
+.hint-card.in-modal::before { content: none; }
+
+/* The tables of what was renamed or moved: a long new name wraps under itself, never past the box. */
+.ts-moved-row .now { overflow-wrap: anywhere; line-height: 1.35; }
+
+/* The welcome and its chapters are dialogs too: their own ring is not drawn around them. */
+dialog.tour-bonjour:focus, dialog.tour-bonjour:focus-visible, dialog.whats-new:focus, dialog.whats-new:focus-visible { outline: none; }