@azure-id/orc 1.4.0 → 1.4.2

package/bin/webui/css/panels/hookui.css

@@ -3,9 +3,12 @@
    Every colour comes from a token defined once, on bare :root, in
    00-tokens.css. This file defines none.
 
-   Nothing here declares an animation, deliberately: the motion rules live in
-   04-motion.css and nowhere else. The board's affordances are borders and
-   opacity, and both survive a reader who has asked for less motion. */
+   Nothing here declares an animation or a @keyframes, deliberately: the motion
+   rules live in 04-motion.css and nowhere else, because THE ONE reduced-motion
+   media block lives there and a rule in this file — which loads BEFORE it —
+   could not be switched off from there at equal specificity. What is here is
+   state that survives a reader who asked for less motion: borders, opacity and
+   a drop marker drawn as a real edge. */
 
 /* ── the preview ───────────────────────────────────────────────────────── */
 /* A terminal is a monospaced grid, so the preview has to be one too. Anything
@@ -17,7 +20,7 @@
   margin: 0;
   padding: 10px 12px;
   border-radius: 8px;
-  background: var(--bg-sunken);
+  background: var(--surface-2);
   border: 1px solid var(--line);
   /* A wide line SCROLLS inside its own box. The page body must never scroll
      sideways — and squeezing a status line to fit would misreport its width,
@@ -54,22 +57,184 @@
   margin-bottom: 10px;
 }
 
-.hk-degrade {
+/* ── the terminal window (v1.4.2) ──────────────────────────────────────── */
+/* The preview is a claim about what a terminal will print, so it is drawn as a
+   terminal. The chrome is not decoration: the title bar states the width the
+   picture was rendered at, and the ruler under it shows where that width falls.
+   Everything inside stays on the same monospaced grid - anything proportional
+   here would misrepresent every width decision the user makes. */
+.hk-term {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--surface-2);
+}
+.hk-term-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-3);
+}
+.hk-term-dots {
+  display: flex;
+  gap: 5px;
+  flex: 0 0 auto;
+}
+.hk-term-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--line);
+}
+.hk-term-title {
+  font-size: 11px;
+  color: var(--text-dim);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hk-term-tags {
+  display: flex;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+/* The colour set and the symbol set the picture was drawn with. The words are
+   the CLI's own and are printed verbatim. */
+.hk-term-tag {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+  color: var(--text-dim);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+.hk-term-screen {
+  padding: 10px 12px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.hk-term-screen::-webkit-scrollbar {
+  height: 8px;
+}
+.hk-term-screen::-webkit-scrollbar-track {
+  background: transparent;
+}
+.hk-term-screen::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 4px;
+}
+/* The line inside a window has no box of its own: the window IS the box, and a
+   second border around the same string reads as a second thing. */
+.hk-preview-flat {
+  border: none;
+  background: transparent;
+  padding: 0;
+  overflow-x: visible;
+}
+.hk-term-sm .hk-term-screen {
+  padding: 7px 10px;
+}
+.hk-term-sm .hk-preview {
+  font-size: 12px;
+}
+.hk-ruler {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre;
+  color: var(--text-dim);
+  opacity: 0.55;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 6px;
+  padding-bottom: 2px;
+}
+.hk-widths {
+  margin-top: 8px;
+}
+
+/* ── the comparison drawer ─────────────────────────────────────────────── */
+/* Eleven more terminals is a wall of them, and it pushed the board off the
+   screen. One drawer, closed by default, fetched on the first open. */
+.hk-compare {
   margin-top: 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.hk-compare-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 9px 12px;
+  border: none;
+  background: var(--surface-3);
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+}
+.hk-compare-head .tier-caret {
+  color: var(--text-dim);
+}
+.hk-compare-open .hk-compare-head .tier-caret {
+  transform: rotate(90deg);
+}
+.hk-compare-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.hk-compare-body {
+  display: none;
+  padding: 12px;
+  gap: 10px;
+}
+.hk-compare-open .hk-compare-body {
   display: grid;
-  gap: 6px;
 }
-.hk-degrade-row {
+.hk-compare-group {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-top: 4px;
+}
+.hk-compare-row {
   display: grid;
-  grid-template-columns: 90px 1fr;
+  grid-template-columns: 110px 1fr;
   gap: 10px;
   align-items: center;
+  min-width: 0;
 }
-.hk-degrade-label {
+.hk-compare-label {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
   text-align: right;
 }
+.hk-compare-row .hk-term-bar {
+  display: none;
+}
+/* A control this SHAPE cannot use. It keeps its slot and carries the reason —
+   "this shape cannot use it" and "we forgot to offer it" must never look the
+   same, and a value already set has to stay readable. */
+.hk-inert {
+  display: grid;
+  gap: 4px;
+}
+.hk-inert > :first-child {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.hk-editor-live {
+  display: grid;
+  gap: 6px;
+}
 
 /* ── cautions ──────────────────────────────────────────────────────────── */
 .hk-caution {
@@ -89,22 +254,29 @@
 
 /* ── the board ─────────────────────────────────────────────────────────── */
 .hk-line-wrap {
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 .hk-line-head {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
   margin-bottom: 6px;
 }
+.hk-line-title {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
 .hk-line-name {
   font-size: 12px;
   font-weight: 600;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 .hk-line-count {
   font-size: 11px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 .hk-full {
   color: var(--warn);
@@ -113,13 +285,23 @@
 .hk-zone {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  padding: 10px;
+  gap: 10px;
+  padding: 12px;
   border: 1px dashed var(--line);
   border-radius: 10px;
-  min-height: 64px;
+  min-height: 84px;
   align-items: stretch;
 }
+/* The zone under a chip being dragged over it. A border change, not a glow:
+   the affordance has to survive a reader who asked for less motion. */
+.hk-zone-hot {
+  border-color: var(--accent);
+  border-style: solid;
+  background: var(--surface-2);
+}
+.hk-zone-why {
+  flex-basis: 100%;
+}
 /* An illegal line is DISABLED with its reason on the zone itself — never a
    toast after the fact, never a validation error on Apply. A user should not be
    able to do the wrong thing and then be told off for it. */
@@ -129,8 +311,8 @@
     45deg,
     transparent,
     transparent 6px,
-    var(--bg-sunken) 6px,
-    var(--bg-sunken) 12px
+    var(--surface-2) 6px,
+    var(--surface-2) 12px
   );
 }
 .hk-blocked {
@@ -138,122 +320,280 @@
   gap: 8px;
   align-items: center;
   font-size: 12px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
   padding: 8px;
 }
 
-/* A chip's child count CHANGES with its state — an open editor adds a whole
-   drawer — so it is a FLEX COLUMN and never declares its rows. A card whose
-   child count changes with its state must not have a row template; that is what
-   put a 250px ellipse on the Extra panel. */
+/* A chip's child count CHANGES with its state — a part with no description is
+   one row shorter — so it is a FLEX COLUMN and never declares its rows. A card
+   whose child count changes with its state must not have a row template; that
+   is what put a 250px ellipse on the Extra panel. */
 .hk-chip {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 8px;
+  gap: 5px;
+  padding: 9px 10px;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--bg-raised);
-  min-width: 120px;
+  border-radius: 9px;
+  background: var(--surface-3);
+  min-width: 150px;
+  max-width: 280px;
+  cursor: grab;
+  /* The drop marker is drawn on this edge, so the space for it is reserved
+     always — a border that appears on hover would shift every chip to its
+     right by two pixels at the moment of the drop decision. */
+  box-shadow: inset 0 0 0 0 var(--accent);
 }
 .hk-chip:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
-.hk-chip-open {
+.hk-chip:active {
+  cursor: grabbing;
+}
+.hk-chip-dragging {
+  opacity: 0.4;
+  border-style: dashed;
+}
+/* WHERE IT WILL LAND, on the edge it will land on. A gap that opens up would
+   move every other chip while the pointer is deciding. */
+.hk-drop-before {
+  box-shadow: inset 3px 0 0 0 var(--accent);
+}
+.hk-drop-after {
+  box-shadow: inset -3px 0 0 0 var(--accent);
+}
+/* Staged, not written. The dashed accent edge is the same language the edit bar
+   uses at the bottom of the page. */
+.hk-chip-new {
   border-color: var(--accent);
-  width: 100%;
+  border-style: dashed;
 }
 .hk-chip-face {
-  min-height: 24px;
-}
-.hk-chip-foot {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   gap: 6px;
+  min-height: 24px;
+}
+.hk-grip {
+  color: var(--text-dim);
+  font-size: 14px;
+  line-height: 1;
+  cursor: grab;
+  user-select: none;
 }
 .hk-chip-id {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
-.hk-icon {
-  background: none;
-  border: none;
-  color: var(--fg-dim);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-.hk-icon:hover {
-  background: var(--bg-sunken);
-  color: var(--fg);
+/* "What is this thing" is the first question anybody asks of a bar full of
+   symbols, and until v1.4.1 the answer lived only in a tooltip. */
+.hk-chip-desc {
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-dim);
 }
-.hk-move {
+.hk-chip-acts {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
+  margin-top: 2px;
 }
+.hk-act {
+  font-size: 11px;
+  padding: 3px 8px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--surface-2);
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.hk-act:hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+.hk-act-remove:hover {
+  border-color: var(--bad);
+  color: var(--bad);
+}
+
 .hk-add {
   border: 1px dashed var(--line);
   background: none;
-  color: var(--fg-dim);
-  border-radius: 8px;
-  padding: 8px 14px;
+  color: var(--text-dim);
+  border-radius: 9px;
+  padding: 10px 18px;
   cursor: pointer;
   font-size: 12px;
+  min-width: 150px;
 }
-.hk-add:hover {
+.hk-add:hover:not(:disabled) {
   border-color: var(--accent);
-  color: var(--fg);
+  color: var(--text);
+}
+.hk-add:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .hk-line-opts {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-top: 6px;
 }
-.hk-sep,
+.hk-select,
 .hk-input {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   padding: 4px 8px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: var(--bg-sunken);
-  color: var(--fg);
-  max-width: 200px;
+  background: var(--surface-2);
+  color: var(--text);
+  max-width: 260px;
+}
+/* THE OPEN LIST IS NOT THE CLOSED BOX (v1.4.2). A native <select> popup is
+   drawn by the platform, and it inherits the control's `color` while taking its
+   background from the system - so a light `--fg` on a dark panel arrived as
+   near-white text on the platform's near-white menu, and the values could not
+   be read at all. `color-scheme` tells the platform which menu to draw, and the
+   option rule states both halves rather than leaving one of them to chance. */
+.hk-select {
+  color-scheme: light dark;
+}
+.hk-select option,
+.hk-select optgroup {
+  background: var(--surface-3);
+  color: var(--text);
+}
+.hk-select option:disabled {
+  color: var(--text-dim);
 }
 
-/* ── the editor drawer ─────────────────────────────────────────────────── */
-.hk-drawer {
-  border-top: 1px solid var(--line);
-  margin-top: 8px;
-  padding-top: 10px;
-  display: grid;
+/* ── the part picker ───────────────────────────────────────────────────── */
+.hk-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: min(560px, 76vw);
+}
+.hk-picker-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.hk-picker-input {
+  flex: 1 1 auto;
+  max-width: none;
+}
+.hk-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 46vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.hk-picker-list::-webkit-scrollbar {
+  width: 8px;
+}
+.hk-picker-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.hk-picker-list::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 4px;
+}
+/* One click, one part. A refused row is drawn as a plain div and gets NO button
+   at all — never a disabled one: "we decided against this" and "we forgot" must
+   not look the same. */
+.hk-pick-row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  width: 100%;
+  padding: 9px 11px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface-3);
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+}
+button.hk-pick-row:hover {
+  border-color: var(--accent);
+  background: var(--surface-2);
+}
+.hk-pick-row-off {
+  cursor: default;
+  opacity: 0.7;
+  background: none;
+}
+.hk-pick-top {
+  display: flex;
+  align-items: center;
   gap: 8px;
+  flex-wrap: wrap;
 }
-.hk-drawer-head {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-weight: 600;
-  font-size: 13px;
+.hk-pick-desc {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
+}
+
+/* ── move ──────────────────────────────────────────────────────────────── */
+.hk-move-line {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--line);
+}
+.hk-move-slots {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+/* ── the part editor ───────────────────────────────────────────────────── */
+.hk-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  min-width: min(620px, 78vw);
+}
+.hk-editor-live {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface-3);
+  padding-bottom: 4px;
+}
+/* The editor is a flex COLUMN that stretches its children, which turned a small
+   secondary button into a full-width box that read as a text field. */
+.hk-swap {
+  align-self: flex-start;
+}
+.hk-section-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-top: 10px;
 }
 .hk-section {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--fg-dim);
-  margin-top: 8px;
+  color: var(--text-dim);
   border-bottom: 1px solid var(--line);
   padding-bottom: 3px;
 }
 /* THE SHAPE PICKER IS A GALLERY, NOT A DROPDOWN: every option drawn with this
-   component's real value. A dropdown containing the word `braille-bar` tells
-   nobody anything. */
+   component's real value. A dropdown containing a renderer's name tells nobody
+   anything. */
 .hk-gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -267,29 +607,41 @@
   padding: 6px 8px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: var(--bg-sunken);
+  background: var(--surface-2);
   cursor: pointer;
   text-align: left;
 }
+.hk-sample:hover {
+  border-color: var(--accent);
+}
 .hk-sample-on {
   border-color: var(--accent);
-  background: var(--bg-raised);
+  background: var(--surface-3);
 }
 .hk-sample-id {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 10px;
-  color: var(--fg-dim);
+  color: var(--text-dim);
 }
 
+/* A control, its name, and the sentence that says what it does. The sentence is
+   why this is a two-line left column rather than a label. */
 .hk-field {
   display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 10px;
-  align-items: center;
+  grid-template-columns: 190px 1fr;
+  gap: 12px;
+  align-items: start;
+  padding: 5px 0;
+}
+.hk-field-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 .hk-field-name {
   font-size: 12px;
-  color: var(--fg-dim);
+  font-weight: 600;
+  color: var(--text);
 }
 .hk-picks {
   display: flex;
@@ -302,14 +654,17 @@
   padding: 3px 7px;
   border: 1px solid var(--line);
   border-radius: 5px;
-  background: var(--bg-sunken);
-  color: var(--fg-dim);
+  background: var(--surface-2);
+  color: var(--text-dim);
   cursor: pointer;
 }
+.hk-pick:hover {
+  border-color: var(--accent);
+}
 .hk-pick-on {
   border-color: var(--accent);
-  color: var(--fg);
-  background: var(--bg-raised);
+  color: var(--text);
+  background: var(--surface-3);
 }
 .hk-checks {
   display: grid;
@@ -323,30 +678,33 @@
   font-size: 12px;
 }
 
-/* ── the palette ───────────────────────────────────────────────────────── */
+/* ── the reference list ────────────────────────────────────────────────── */
 .hk-palette-search {
-  font-size: 12px;
-  padding: 4px 10px;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: var(--bg-sunken);
-  color: var(--fg);
   min-width: 180px;
 }
-/* A row's child count changes with its state — a refused row carries a reason
-   and no buttons — so it is a flex column, not a grid with declared columns. */
+/* A row's child count changes with its state — a refused row carries a reason —
+   so it is a flex column, not a grid with declared columns. */
 .hk-prow {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 4px;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--line);
+}
+.hk-prow-head {
+  display: flex;
   align-items: center;
   gap: 10px;
-  padding: 7px 0;
-  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
 }
 .hk-prow-id {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
-  min-width: 150px;
+}
+.hk-prow-desc {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
 }
 .hk-prow-why {
   flex-basis: 100%;
@@ -365,6 +723,43 @@
   align-items: center;
 }
 
+/* ── the colour set picker ─────────────────────────────────────────────── */
+/* Each option carries the CLI's own sentence about what it is FOR, so it is a
+   card and not a word in a row of words. */
+.hk-theme-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.hk-theme {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  flex: 1 1 220px;
+  max-width: 320px;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface-2);
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+}
+.hk-theme:hover {
+  border-color: var(--accent);
+}
+.hk-theme-on {
+  border-color: var(--accent);
+  background: var(--surface-3);
+}
+.hk-theme-name {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
 /* A number field is a NUMBER field: wide enough for three digits and its
    spinner, and no wider. A 200px box for a value between 0 and 8 reads as a
    free-text field somebody has to think about. */