chamba 0.7.0 → 0.9.0

package/templates/webterm/public/styles.css

@@ -634,13 +634,13 @@ body.dragging {
 }
 
 /* The width is app/pane-shell.js's, in a custom property so the three rules that must win - the collapsed
-   spine, the full row and the narrow-screen layout - still do. The value here is what shows before the first
-   drag. */
+   spine, the full row and the narrow-screen layout - still do. The value here shows for the moment before the
+   first draw sets the property, so it is the same half the pane's own default is. */
 #pane {
     display: flex;
     flex: none;
     flex-direction: column;
-    width: var(--pane-width, 44%);
+    width: var(--pane-width, 50%);
     min-width: 0;
     background: var(--bg);
 }
@@ -706,9 +706,9 @@ body.dragging {
 #panebar {
     display: flex;
     flex: none;
-    align-items: flex-end;
+    align-items: center;
     gap: 2px;
-    padding: 7px 10px 0;
+    padding: 0 8px;
     background: var(--bg);
     border-bottom: 1px solid var(--border);
 }
@@ -720,21 +720,23 @@ body.dragging {
     overflow: hidden;
 }
 
-/* A tab is a folder mouth: the open one carries the panel's own background up into the bar, so the two read
-   as one surface and the others read as behind it. */
+/* A tab is a label with a line under it: the pane's bar is chrome rather than a surface of its own, and the
+   workspace's colour under the open one is what says which tool is on the screen. */
 .tool-tab {
     display: flex;
     flex: none;
     align-items: center;
     gap: 6px;
-    padding: 4px 14px;
-    border: 1px solid transparent;
-    border-bottom: none;
-    border-radius: 7px 7px 0 0;
+    height: 34px;
+    padding: 0 12px;
+    border: none;
+    /* On every tab, transparent until one is open, so the open one takes no extra height and the row of them
+       does not move as the tool changes. */
+    border-bottom: 2px solid transparent;
     background: none;
     color: var(--muted);
     font: inherit;
-    font-size: 12.5px;
+    font-size: 13px;
     cursor: pointer;
 }
 
@@ -743,8 +745,7 @@ body.dragging {
 }
 
 .tool-tab.on {
-    background: var(--panel);
-    border-color: var(--border);
+    border-bottom-color: var(--ws);
     color: var(--text);
 }
 
@@ -759,22 +760,74 @@ body.dragging {
     font-weight: 700;
 }
 
+/* Something landed in a tool the user is not looking at: a ring around its mark, three times, then rest.
+   TAB_PULSE_MS in app/pane-shell.js must match three turns of this - it is what takes the class off again,
+   since a tab, unlike the pane, is rebuilt from one frame to the next. The delay is how far a rebuilt tab is
+   already into the ring, so a redraw in the middle of a pulse resumes it. */
+.tool-mark.pulse {
+    position: relative;
+}
+
+.tool-mark.pulse::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    border: 2px solid var(--accent);
+    border-radius: 12px;
+    animation: toolMarkRing 1.6s ease-out 3;
+    animation-delay: var(--ring-delay, 0s);
+}
+
+@keyframes toolMarkRing {
+    from {
+        opacity: 0.9;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 0;
+        transform: scale(1.5);
+    }
+}
+
+/* The same moment, held instead of pulsed, the way the pane's own arrival highlight is. Without this the
+   ring would never appear at all for someone who asked for less movement. */
+@media (prefers-reduced-motion: reduce) {
+    .tool-mark.pulse::after {
+        opacity: 0.9;
+        animation: none;
+    }
+}
+
+/* A tool that counts nothing says only that something arrived, so its mark carries no number and is drawn
+   as the dot it means. */
+.tool-mark.dot {
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+    align-self: center;
+}
+
 #pane-ctl {
     display: flex;
     flex: none;
     margin-left: auto;
-    gap: 4px;
-    padding-bottom: 5px;
+    gap: 2px;
 }
 
+/* The three widths, drawn as one row: the whole window, half of it, and away. */
 #pane-ctl .pane-nav {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 2px 5px;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 6px;
 }
 
-/* The pane is already at the far end, and the button is the way back from it. */
+/* The pane is already in the state the button names, so the button says so - and for the far end it is also
+   the way back from it. */
 #pane-ctl .pane-nav.on {
     background: #10151c;
     color: var(--accent);
@@ -1053,6 +1106,14 @@ body.dragging .tool-frame {
     writing-mode: horizontal-tb;
 }
 
+#spine-badge.dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+    border-radius: 50%;
+}
+
 #spine-badge[hidden] {
     display: none;
 }
@@ -1071,13 +1132,17 @@ body.dragging .tool-frame {
 
 /* ---- Overlay cards (take over / end session / limit reached) ---- */
 
+/* Fixed to the viewport and above every pop, so the card is in the middle of the screen whatever the width of
+   the terminal column beside the pane. */
 #overlay {
     display: none;
-    position: absolute;
+    position: fixed;
     inset: 0;
+    z-index: 70;
     background: rgba(13, 17, 23, 0.82);
     align-items: center;
     justify-content: center;
+    padding: 16px;
 }
 
 #overlay.show {
@@ -1085,7 +1150,9 @@ body.dragging .tool-frame {
 }
 
 .card {
+    width: 100%;
     max-width: 460px;
+    box-sizing: border-box;
     padding: 18px 20px;
     background: var(--panel);
     border: 1px solid var(--border);
@@ -1201,9 +1268,102 @@ body.dragging .tool-frame {
     }
 }
 
+/* ---- The workspace colour ---- */
+
+/* The one control in the bar about what this window *is* rather than what it does, so it sits beside the name
+   it belongs with. It carries no colour of its own, and is drawn exactly as the bell and the power button
+   are: the bar already says which colour is in force, on the edge of the active tab, and a filled swatch in
+   a row of glyphs reads as something that wandered in rather than as one of the row. */
+#wscolorbtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid transparent;
+    border-radius: 7px;
+    cursor: pointer;
+}
+
+#wscolorbtn:hover:not(:disabled),
+#wscolorbtn.open {
+    color: var(--text);
+    border-color: var(--border);
+}
+
+/* Nothing to open while this window is not talking to the server: a pick it could not send would be undone by
+   the next frame, which is worse than not offering it. */
+#wscolorbtn:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+/* Anchored under the button and hung off the body, like the new-session panel: the bar is emptied on every
+   frame, and picking a colour is itself a frame, so a panel inside the bar would close as it was used. */
+#wscolorpop {
+    position: fixed;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    width: 268px;
+    padding: 12px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
+}
+
+.wsgrid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+}
+
+.wscell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 7px;
+    cursor: pointer;
+}
+
+/* Two rings rather than a thicker border, so the mark reads on every one of the eleven and the cell does not
+   move when it lands. The mark says what is *stored*, so it sits on the automatic cell when nothing is. */
+.wscell.chosen {
+    box-shadow:
+        0 0 0 2px var(--panel),
+        0 0 0 3.5px var(--text);
+}
+
+/* Automatic takes the last cell: it is one of the choices rather than a button underneath them. */
+.wscell.auto {
+    background: repeating-linear-gradient(135deg, var(--border) 0 4px, #21262d 4px 8px);
+    color: var(--muted);
+    font-size: 15px;
+    line-height: 1;
+}
+
+.wscolorfoot {
+    margin: 11px 0 0;
+    padding-top: 10px;
+    color: var(--muted);
+    border-top: 1px solid var(--border);
+    font-size: 11.5px;
+    line-height: 1.45;
+}
+
 /* The moment the socket drops, before any curtain: a control whose answer goes nowhere must stop taking
-   clicks. The composer disables itself, so this is about the bar - its tabs, its X, its + New session. */
-body.offline #tabbar {
+   clicks. The composer disables itself, so this is about the bar - its tabs, its X, its + New session.
+   The two anchored panels are named as well: they hang off the body rather than the bar, so the bar's own
+   selector does not cover them. connection.js closes them outright when the socket goes, and this is the second
+   line - a rule that holds whatever order things happen in. */
+body.offline #tabbar,
+body.offline #newpop,
+body.offline #wscolorpop {
     pointer-events: none;
 }
 
@@ -1371,6 +1531,20 @@ body.offline #tabbar {
 /* Border carries the state (no separate status dot): lit in the workspace's colour when you can type into the
    attached session, plain grey while this window is between sessions or reconnecting. A dropped connection is
    not a failure here - the session on the other side kept running - so it goes quiet rather than warning. */
+/* The ruler autoGrow() measures the text in: out of the flow, out of sight, and of no height of its own, so
+   its scroll height is the height of the text and nothing about it moves the composer. */
+#input-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0;
+    min-height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    resize: none;
+}
+
 #input.online {
     border-color: var(--ws);
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws) 25%, transparent);