toolroll 0.9.87 → 0.9.88

package/dist/design/kit.css

@@ -87,26 +87,32 @@
 .k-tabs > [aria-selected="true"], .k-tabs > [aria-current] { color: var(--so-ink); border-bottom-color: var(--so-ink); }
 .k-tabs .k-count { margin-left: 2px; }
 
-/* ---------- Fields ---------- */
+/* ---------- Fields: one family (KIT.md "Fields") ----------
+   Every text field, select and secondary text box is one filled surface (--so-field), no outline, radius 12px; the
+   label above names it, the hint and the error sit below it, focus draws the 2px ink ring. A transparent 1px border
+   keeps the box's edge in forced colours. Textareas grow with their words (field-sizing), no resize grip. */
 .k-field { display: grid; gap: 6px; margin: 0; min-width: 0; }
-.k-label { display: block; margin: 0; font: var(--so-typography-caption); color: var(--so-ink); }
+.k-label { display: block; margin: 0; font: 500 12.5px/1.35 var(--so-font-sans); color: var(--so-muted); }
 .k-hint { margin: 0; font-size: 12px; color: var(--so-muted); line-height: 1.45; }
-.k-input.k-input, .k-textarea.k-textarea { box-sizing: border-box; width: 100%; margin: 0; border: 1px solid var(--so-field-line); border-radius: 8px; background: var(--so-paper); color: var(--so-ink); font: 400 13px/1.4 var(--so-font-sans); box-shadow: none; }
-.k-input.k-input { height: 32px; min-height: 0; padding: 0 10px; }
-.k-textarea.k-textarea { min-height: 72px; padding: 8px 10px; resize: vertical; max-width: 640px; }
-.k-input:focus-visible, .k-textarea:focus-visible { outline: 2px solid var(--so-ring); outline-offset: 1px; box-shadow: none; }
+.k-input.k-input, .k-textarea.k-textarea, .k-sel.k-sel { box-sizing: border-box; width: 100%; margin: 0; border: 1px solid transparent; border-radius: 12px; background: var(--so-field); color: var(--so-ink); font: 400 13.5px/1.4 var(--so-font-sans); box-shadow: none; transition: background-color var(--m-quick) var(--m-ease); }
+.k-input.k-input { height: 36px; min-height: 0; padding: 0 12px; }
+.k-textarea.k-textarea { min-height: 76px; max-height: 360px; padding: 10px 12px; resize: none; field-sizing: content; overflow-y: auto; max-width: 640px; line-height: 1.5; }
+.k-input::placeholder, .k-textarea::placeholder { color: var(--so-muted); opacity: 1; }
+.k-input:focus-visible, .k-textarea:focus-visible, .k-sel:focus-visible { outline: 2px solid var(--so-ring); outline-offset: 1px; box-shadow: none; }
 .k-input[aria-invalid="true"], .k-textarea[aria-invalid="true"], .k-sel[aria-invalid="true"] { border-color: var(--so-danger); }
+.k-input:disabled, .k-textarea:disabled, .k-sel:disabled { color: var(--so-muted); cursor: default; }
 .k-err { display: block; margin: 0; font-size: 12px; color: var(--so-fail-ink); line-height: 1.45; }
 .k-err:empty { display: none; }
-/* A native select with the chevron: 32px (sm 28px in a toolbar). */
+/* A native select in the same family, with the chevron: 36px (sm 28px in a toolbar). */
 .k-selw { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
-.k-selw::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -5px; width: 6px; height: 6px; border: solid var(--so-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
-.k-sel.k-sel { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; height: 32px; min-height: 0; margin: 0; padding: 0 30px 0 10px; border: 1px solid var(--so-field-line); border-radius: 8px; background: var(--so-paper); color: var(--so-ink); font: 400 13px/1 var(--so-font-sans); text-overflow: ellipsis; cursor: pointer; box-shadow: none; }
-.k-sel:focus-visible { outline: 2px solid var(--so-ring); outline-offset: 1px; }
-.k-sel:disabled { color: var(--so-muted); cursor: default; }
-.k-selw.sm .k-sel { height: 28px; font: 500 12.5px/1 var(--so-font-sans); padding: 0 26px 0 9px; }
-.k-selw.sm::after { right: 10px; }
+.k-selw::after { content: ""; position: absolute; right: 13px; top: 50%; margin-top: -5px; width: 6px; height: 6px; border: solid var(--so-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
+.k-sel.k-sel { appearance: none; -webkit-appearance: none; height: 36px; min-height: 0; padding: 0 32px 0 12px; line-height: 1; text-overflow: ellipsis; cursor: pointer; }
+.k-selw.sm .k-sel { height: 28px; border-radius: 999px; font: 500 12.5px/1 var(--so-font-sans); padding: 0 26px 0 11px; }
+.k-selw.sm::after { right: 11px; }
 .k-selw.wide { display: block; width: 100%; }
+/* A select drawn as a pill chip (a composer's project): filled, no box, works without script. */
+.k-selw-chip::after { right: 12px; }
+.k-selw-chip .k-sel.k-sel { height: 36px; border-radius: 999px; padding: 0 30px 0 14px; background: var(--so-composer-control); font: 500 13.5px/1 var(--so-font-sans); }
 /* Switch: a button[role=switch] that says its state, or a checkbox[role=switch] for a form. */
 .k-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; margin: 0; padding: 0; border: 0; background: transparent; font: 500 12.5px/1 var(--so-font-sans); color: var(--so-muted); cursor: pointer; box-shadow: none; }
 .k-trk { position: relative; width: 32px; height: 18px; border-radius: 9px; border: 1px solid var(--so-field-line); background: var(--so-paper); transition: background-color var(--m-quick) var(--m-ease), border-color var(--m-quick) var(--m-ease); flex: none; box-sizing: border-box; }
@@ -314,25 +320,49 @@
 .k-swap-in { animation: k-swap var(--m-base) var(--m-ease) both; }
 @keyframes k-swap { from { opacity: 0; transform: translateY(4px); } }
 
-/* ---------- Composer: one soft rounded box; the textarea grows 1 → 8 lines; one bottom row inside ---------- */
-.k-composer { --c-r: 22px; box-sizing: border-box; border: 1px solid var(--so-field-line); border-radius: var(--c-r); background: var(--so-paper); display: grid; padding: 4px 6px 6px; outline: 3px solid transparent; outline-offset: 0; transition: border-color var(--m-quick) var(--m-ease), outline-color var(--m-quick) var(--m-ease); }
-.k-composer:focus-within { border-color: var(--so-ink); outline-color: color-mix(in srgb, var(--so-ink) 10%, transparent); }
-.k-composer.off { border-color: var(--so-line); background: var(--so-raised); }
-.k-composer-ta.k-composer-ta { box-sizing: border-box; width: 100%; min-height: 40px; margin: 0; padding: 10px 10px 6px; border: 0; border-radius: 0; outline: none; resize: none; background: transparent; box-shadow: none; color: var(--so-ink); font: var(--so-typography-body-reading); line-height: 1.5; overflow-y: hidden; scrollbar-width: thin; }
-.k-composer-ta::placeholder { color: var(--so-muted); }
+/* ---------- Composer: one filled rounded object (KIT.md "Composer"); the textarea grows 1 → 8 lines; one bottom row
+   of filled circles and pills inside; its note and refusal sit under it, outside the box ---------- */
+.k-composer-field { display: grid; gap: 6px; min-width: 0; }
+.k-composer { --c-r: 28px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--c-r); background: var(--so-composer); display: grid; padding: 8px 10px 10px; transition: border-color var(--m-quick) var(--m-ease), background-color var(--m-quick) var(--m-ease); }
+/* Focus: the fill lifts a step (a tap's cue is that and the caret); keyboard focus also draws the 2px ink ring, 3:1 or
+   better in both themes (html.k-kbd from the kit behaviour; without script the ring always shows). The textarea draws
+   no ring of its own. */
+.k-composer { outline: 2px solid transparent; outline-offset: 2px; }
+.k-composer:focus-within { background: color-mix(in srgb, var(--so-composer) 97%, var(--so-ink)); }
+html:not(.k-js) .k-composer:focus-within, html.k-kbd .k-composer:focus-within { outline-color: var(--so-ring); }
+.k-composer.off { background: var(--so-raised); color: var(--so-muted); }
+.k-composer-ta.k-composer-ta { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 10px 8px; border: 0; border-radius: 0; outline: none; resize: none; background: transparent; box-shadow: none; color: var(--so-ink); font: 400 17px/1.5 var(--so-font-sans); letter-spacing: -0.005em; overflow-y: hidden; scrollbar-width: thin; }
+.k-composer-ta::placeholder { color: var(--so-muted); opacity: 1; }
 .k-composer-ta:focus, .k-composer-ta:focus-visible { outline: none; box-shadow: none; }
-.k-composer:has(.k-composer-ta[aria-invalid="true"]) { border-color: var(--so-danger); outline-color: transparent; }
+.k-composer:has(.k-composer-ta[aria-invalid="true"]) { border-color: var(--so-danger); }
 .k-composer + .k-err { margin-top: 6px; }
-.k-composer-bar { display: flex; align-items: center; gap: 6px; padding: 2px 0 0 2px; flex-wrap: wrap; min-height: 36px; }
-.k-composer-plus { box-sizing: border-box; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--so-muted); border: 1px solid var(--so-line); background: transparent; cursor: pointer; box-shadow: none; transition: background-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease); }
-.k-composer-chip { box-sizing: border-box; height: 32px; min-height: 0; margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; border: 0; border-radius: 999px; font: 500 12.5px/1 var(--so-font-sans); color: var(--so-muted); background: transparent; cursor: pointer; box-shadow: none; transition: background-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease); }
+.k-composer-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0 0; flex-wrap: wrap; min-height: 40px; }
+.k-composer-plus { box-sizing: border-box; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--so-ink); border: 0; background: var(--so-composer-control); cursor: pointer; box-shadow: none; transition: background-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease); }
+.k-composer-plus .k-i { width: 18px; height: 18px; }
+/* A pill chip: the primary word, then a dimmer secondary word (a project, then the agent). */
+.k-composer-chip { box-sizing: border-box; height: 36px; min-height: 0; max-width: 100%; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 999px; font: 500 13.5px/1 var(--so-font-sans); color: var(--so-ink); background: var(--so-composer-control); cursor: pointer; box-shadow: none; transition: background-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease); }
+.k-composer-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.k-composer-chip .k-chip-sub { color: var(--so-muted); font-weight: 400; }
 .k-composer-plus:disabled, .k-composer-chip:disabled { opacity: .5; pointer-events: none; }
-/* The round send: ink with text, muted until then; Stop takes its place while the work runs. */
-.k-send-slot { position: relative; display: inline-grid; width: 34px; height: 34px; flex: none; }
-.k-send-slot .k-send { grid-area: 1 / 1; position: relative; box-sizing: border-box; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--so-ink); color: var(--so-paper); border: 0; cursor: pointer; box-shadow: none; transition: background-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease), transform var(--m-base) var(--m-ease); }
-.k-send::before { content: ""; position: absolute; inset: -5px; }
-.k-send .k-i { width: 17px; height: 17px; stroke-width: 2.2; }
-.k-send[aria-disabled="true"], .k-composer:not(.has-text) .k-send:not(.k-stop) { background: var(--so-raised); color: var(--so-muted); }
+/* A small act inside the bar (Pause and send) is a filled pill like the chips, never an outlined box in the box. */
+.k-composer-bar .k-btn:not(.k-send) { border-color: transparent; border-radius: 999px; background: var(--so-composer-control); }
+.k-composer-plus:focus-visible, .k-composer-chip:focus-visible { outline: 2px solid var(--so-ring); outline-offset: 2px; }
+/* A toggle chip (an on/off choice inside the box, as Read code before planning): a filled pill whose mark fills when
+   on; the checkbox inside is the control (role=switch), so it works without script. */
+.k-tchip { position: relative; box-sizing: border-box; height: 36px; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--so-composer-control); color: var(--so-muted); font: 500 13.5px/1 var(--so-font-sans); cursor: pointer; transition: color var(--m-quick) var(--m-ease); }
+.k-tchip > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
+.k-tchip-mark { box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; display: grid; place-items: center; transition: background-color var(--m-quick) var(--m-ease), border-color var(--m-quick) var(--m-ease); }
+.k-tchip:has(input:checked) { color: var(--so-ink); }
+.k-tchip:has(input:checked) .k-tchip-mark { background: var(--so-ink); border-color: var(--so-ink); }
+.k-tchip:has(input:checked) .k-tchip-mark::after { content: ""; width: 3px; height: 6px; margin-top: -2px; border: solid var(--so-paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
+.k-tchip:has(input:focus-visible) { outline: 2px solid var(--so-ring); outline-offset: 2px; }
+/* The round send: solid ink with a paper arrow once there are words, the muted control fill until then; Stop takes
+   its place while the work runs. */
+.k-send-slot { position: relative; display: inline-grid; width: 36px; height: 36px; flex: none; }
+.k-send-slot .k-send { grid-area: 1 / 1; position: relative; box-sizing: border-box; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--so-ink); color: var(--so-paper); border: 0; cursor: pointer; box-shadow: none; transition: background-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease), transform var(--m-base) var(--m-ease); }
+.k-send::before { content: ""; position: absolute; inset: -4px; }
+.k-send .k-i { width: 18px; height: 18px; stroke-width: 2.2; }
+.k-send[aria-disabled="true"], .k-composer:not(.has-text) .k-send:not(.k-stop) { background: var(--so-composer-control); color: var(--so-muted); }
 .k-send[aria-disabled="true"] { cursor: default; }
 .k-send:not([aria-disabled="true"]):active { transform: scale(.94); }
 .k-stop { visibility: hidden; }
@@ -344,17 +374,18 @@
 .k-send:focus-visible { outline: 2px solid var(--so-ring); outline-offset: 2px; }
 .k-composer-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
 .k-composer-files:empty { display: none; }
-.k-composer-file { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 6px; padding: 0 4px 0 10px; border: 1px solid var(--so-line); border-radius: 999px; font-size: 12px; }
+.k-composer-file { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 6px; padding: 0 4px 0 12px; border: 0; border-radius: 999px; background: var(--so-composer-control); font-size: 12px; }
 .k-composer-file button { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--so-muted); }
-.k-composer-note { padding: 2px 10px 6px; }
-.k-composer-err { padding: 2px 10px 6px; }
+/* Under the box, in small dim words: its note, then its refusal. */
+.k-composer-note.k-composer-note { margin: 0; padding: 0 16px; font-size: 12px; color: var(--so-muted); line-height: 1.45; }
+.k-composer-err { padding: 0 16px; }
 .k-composer-err:empty { display: none; }
 /* One line: the text and the send share a row. */
-.k-composer.line { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 4px 6px 4px 8px; }
-.k-composer.line .k-composer-ta { padding: 8px 6px; min-height: 36px; }
-.k-composer.line .k-composer-bar { padding: 0 0 1px; min-height: 0; }
+.k-composer.line { --c-r: 26px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 5px 6px 5px 10px; }
+.k-composer.line .k-composer-ta { padding: 9px 6px; min-height: 42px; font-size: 16px; }
+.k-composer.line .k-composer-bar { padding: 0 0 3px; min-height: 0; }
 .k-composer.line .k-composer-bar .k-grow { display: none; }
-.k-composer.line .k-composer-files, .k-composer.line .k-composer-err, .k-composer.line .k-composer-note { grid-column: 1 / -1; }
+.k-composer.line .k-composer-files { grid-column: 1 / -1; }
 /* A composer docked to the bottom rides above the phone keyboard (kit behaviour sets html.kb-open and --kb). */
 .k-composer-dock { position: sticky; bottom: 0; z-index: 4; padding: 12px 24px 14px; background: var(--so-paper); border-top: 1px solid var(--so-line); }
 
@@ -425,8 +456,10 @@
   .k-card:hover { background: color-mix(in srgb, var(--so-raised) 60%, transparent); }
   .k-backlink:hover { color: var(--so-ink); }
   .k-menu > button:hover, .k-menu > a:hover { background: var(--so-soft); }
-  .k-composer-plus:hover { background: var(--so-raised); color: var(--so-ink); }
-  .k-composer-chip:hover { background: var(--so-raised); color: var(--so-ink); }
+  .k-composer-plus:hover, .k-composer-chip:hover, .k-tchip:hover { background: color-mix(in srgb, var(--so-composer-control) 88%, var(--so-ink)); }
+  .k-dock-needs:hover { background: color-mix(in srgb, var(--so-composer-control) 88%, var(--so-ink)); }
+  .k-input:hover, .k-textarea:hover, .k-sel:hover { background: color-mix(in srgb, var(--so-field) 94%, var(--so-ink)); }
+  .k-selw-chip .k-sel:hover { background: color-mix(in srgb, var(--so-composer-control) 88%, var(--so-ink)); }
   .k-nav:hover { background: var(--so-nav-hover); color: var(--so-ink); }
   .k-crumbs a:hover { color: var(--so-ink); }
 }
@@ -437,7 +470,7 @@
 /* ---------- Phone dock: the Needs-you button and the screen's one primary ---------- */
 .k-dock { display: none; }
 /* The Needs-you button (the app shell's dock): a dot, the words, the ink count, and which projects it covers. */
-.k-dock-needs { display: grid; align-content: center; gap: 1px; box-sizing: border-box; width: 136px; min-height: 48px; margin: 0; padding: 0 12px; border-radius: 8px; border: 1px solid var(--so-field-line); background: var(--so-paper); color: var(--so-ink); text-align: left; white-space: nowrap; cursor: pointer; box-shadow: none; }
+.k-dock-needs { display: grid; align-content: center; gap: 1px; box-sizing: border-box; width: 136px; min-height: 48px; margin: 0; padding: 0 14px; border-radius: 14px; border: 1px solid transparent; background: var(--so-composer-control); color: var(--so-ink); text-align: left; white-space: nowrap; cursor: pointer; box-shadow: none; }
 .k-dock-needs-l { display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.2 var(--so-font-sans); }
 .k-dock-needs-s { overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--so-muted); padding-left: 14px; }
 .k-dock-needs:focus-visible { outline: 2px solid var(--so-ring); outline-offset: 2px; }
@@ -509,16 +542,17 @@
   .k-frow .k-err { text-align: left; }
   .k-frow-c .k-seg { width: 100%; }
   .k-frow-c .k-seg > button { flex: 1; justify-content: center; }
-  .k-composer-ta.k-composer-ta { font-size: 16px; }
+  .k-composer-ta.k-composer-ta { font-size: 17px; }
   .k-composer-bar .k-btn-sm { height: 44px; }
-  /* Every composer control is a real 44px target; the circles stay drawn at 36px inside it. */
+  /* Every composer control is a real, filled 44px target. */
+  .k-composer { --c-r: 26px; padding: 6px 8px 8px; }
+  .k-composer-ta.k-composer-ta { padding: 10px 10px 6px; }
   .k-send-slot, .k-send-slot .k-send { width: 44px; height: 44px; }
-  .k-send-slot .k-send { background: radial-gradient(circle, var(--so-ink) 17.5px, transparent 18px); }
-  .k-send[aria-disabled="true"], .k-composer:not(.has-text) .k-send:not(.k-stop) { background: radial-gradient(circle, var(--so-raised) 17.5px, transparent 18px); }
   .k-send::before { content: none; }
-  .k-composer-plus { width: 44px; height: 44px; border: 0; background: radial-gradient(circle, transparent 15.5px, var(--so-line) 16px, var(--so-line) 16.5px, transparent 17px); }
-  .k-composer-chip { height: 44px; }
-  .k-composer-bar { gap: 2px; }
+  .k-composer-plus { width: 44px; height: 44px; }
+  .k-composer-chip, .k-tchip, .k-selw-chip .k-sel.k-sel { height: 44px; }
+  .k-selw-chip .k-sel.k-sel { font-size: 16px; }
+  .k-composer-bar { gap: 6px; }
   .k-composer-file button { width: 32px; height: 32px; }
   .k-composer-dock { padding: 12px 16px 16px; }
   html.kb-open .k-composer-dock { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 13; }
@@ -535,6 +569,9 @@
   .k-dock { display: flex; gap: 8px; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--so-paper); border-top: 1px solid var(--so-line); }
   .k-dock-primary { flex: 1; display: flex; }
   .k-dock-primary .k-btn { width: 100%; }
+  /* The dock is filled controls only: a secondary act there is a filled control, never an outlined box. */
+  .k-dock .k-btn-outline { border-color: transparent; background: var(--so-composer-control); }
+  .k-dock .k-btn { min-height: 48px; border-radius: 14px; }
 }
 @media (min-width: 761px) { .k-phone-only { display: none !important; } }
 
@@ -563,9 +600,9 @@ main:has(> .k-out) { max-width: none; margin: 0; padding: 0; }
 .k-refusal .k-empty-t::first-letter, .k-refusal .k-notice > span::first-letter { text-transform: uppercase; }
 
 /* A composer's note can follow its switch: k-on-note while it is on, k-off-note while it is off (no script). */
-.k-composer .k-off-note { display: none; }
-.k-composer:has(.k-switch-input):not(:has(.k-switch-input:checked)) .k-on-note { display: none; }
-.k-composer:has(.k-switch-input):not(:has(.k-switch-input:checked)) .k-off-note { display: inline; }
+.k-composer-field .k-off-note { display: none; }
+.k-composer-field:has(.k-switch-input):not(:has(.k-switch-input:checked)) .k-on-note { display: none; }
+.k-composer-field:has(.k-switch-input):not(:has(.k-switch-input:checked)) .k-off-note { display: inline; }
 
 /* The composer's focus is the box's (KIT.md): the workspace's own :focus-visible ring never lands on its textarea. */
 .k-composer .k-composer-ta.k-composer-ta:focus-visible { outline: none; box-shadow: none; }
@@ -614,7 +651,7 @@ main:has(> .k-out) { max-width: none; margin: 0; padding: 0; }
 
 /* ---------- Reduced motion changes presentation only ---------- */
 @media (prefers-reduced-motion: reduce) {
-  .k-btn, .k-send, .k-composer, .k-composer-plus, .k-composer-chip, .k-trk, .k-trk::after, .k-tabs > *, .k-slots, .k-crow-bar { transition: none; }
+  .k-btn, .k-send, .k-composer, .k-composer-plus, .k-composer-chip, .k-tchip, .k-tchip-mark, .k-input, .k-textarea, .k-sel, .k-trk, .k-trk::after, .k-tabs > *, .k-slots, .k-crow-bar { transition: none; }
   .k-steps-fill { transition: none; }
   .k-grow-in, .k-msg-in, .k-swap-in, .k-scrim, .k-btn.swap .k-face, .k-check-draw path, .k-composer .k-i { animation: none !important; }
   .k-check-draw path { stroke-dashoffset: 0; }

package/dist/design/tokens.css

@@ -8,10 +8,16 @@
   --so-attention: var(--so-signal);
   --so-attention-soft: var(--so-signal-soft);
   --so-code-bg: #fafafa;
+  /* Composer: the filled surface of the message box, one step off the page. */
+  --so-composer: #f2f2f2;
+  /* Composer Control: the filled circle and pill chips inside the composer (+, project, toggle chips) and the empty send. */
+  --so-composer-control: #dcdcdc;
   /* Vermilion: failure and irreversible acts. */
   --so-danger: #c4320a;
   --so-danger-soft: #feebe7;
   --so-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Field: the filled surface of a text field, select or secondary text box (the field family: no outline; the label names it, focus draws the ink ring). */
+  --so-field: #ececec;
   /* Field Line: the boundary that identifies a control (fields, outline buttons, switches, radio cards), 3:1 or better on paper. */
   --so-field-line: #8f8f8f;
   --so-font-mono: "Geist Mono", ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
@@ -162,8 +168,11 @@
     --so-accent-hover: #ffffff;
     --so-accent-text: #ededed;
     --so-code-bg: #111111;
+    --so-composer: #242424;
+    --so-composer-control: #333333;
     --so-danger: #ff977d;
     --so-danger-soft: rgb(255 151 125 / .12);
+    --so-field: #232323;
     --so-field-line: #6b6b6b;
     --so-ground: #0b0b0b;
     --so-info: #70b8ff;
@@ -210,8 +219,11 @@
   --so-accent-hover: #ffffff;
   --so-accent-text: #ededed;
   --so-code-bg: #111111;
+  --so-composer: #242424;
+  --so-composer-control: #333333;
   --so-danger: #ff977d;
   --so-danger-soft: rgb(255 151 125 / .12);
+  --so-field: #232323;
   --so-field-line: #6b6b6b;
   --so-ground: #0b0b0b;
   --so-info: #70b8ff;

package/dist/release.d.ts

@@ -51,8 +51,10 @@ export declare const PROTECTION_MINIMUM_CHECKS: readonly string[];
 /**
  * Pull-request checks a release never waits for or fails on, by exact name and the workflow file that defines them:
  * youiyoux's UI drift check (src/design/KIT.md), which fails a pull request that adds design drift but says nothing
- * about whether a build is safe to release. Only a GitHub Actions run of that name from that workflow is left out; the
- * same name from anywhere else is judged like any other check. Never a required check.
+ * about whether a build is safe to release, and the scripted journeys on a pull request (journeys.yml,
+ * docs/plans/ci-speed.md item 4), advisory while they settle in CI: the release check runs every journey itself. Only a
+ * GitHub Actions run of that name from that workflow is left out; the same name from anywhere else is judged like any
+ * other check. Never a required check.
  */
 export declare const ADVISORY_PR_CHECKS: Readonly<Record<string, string>>;
 /**

package/dist/release.js

@@ -84,10 +84,16 @@ export const PROTECTION_MINIMUM_CHECKS = REQUIRED_PR_CHECKS.filter(name => !PROT
 /**
  * Pull-request checks a release never waits for or fails on, by exact name and the workflow file that defines them:
  * youiyoux's UI drift check (src/design/KIT.md), which fails a pull request that adds design drift but says nothing
- * about whether a build is safe to release. Only a GitHub Actions run of that name from that workflow is left out; the
- * same name from anywhere else is judged like any other check. Never a required check.
+ * about whether a build is safe to release, and the scripted journeys on a pull request (journeys.yml,
+ * docs/plans/ci-speed.md item 4), advisory while they settle in CI: the release check runs every journey itself. Only a
+ * GitHub Actions run of that name from that workflow is left out; the same name from anywhere else is judged like any
+ * other check. Never a required check.
  */
-export const ADVISORY_PR_CHECKS = { "youiyoux · UI drift": ".github/workflows/youiyoux.yml" };
+export const ADVISORY_PR_CHECKS = {
+    "youiyoux · UI drift": ".github/workflows/youiyoux.yml",
+    "journeys · app (scripted)": ".github/workflows/journeys.yml",
+    "journeys · flows (scripted)": ".github/workflows/journeys.yml",
+};
 /** The checks a release's publication waits for on its tag (.github/workflows/publish.yml, docs/plans/test-matrix.md):
  * the release proof (the tagged tree passed every REQUIRED_PR_CHECKS check on its pull request, read from GitHub) and
  * the publish job that needs it. The tag runs no tests again. Nothing else reported on the merge commit (main-push.yml)

package/dist/server/console.css

@@ -265,16 +265,26 @@
   .project-card .project-name:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: .375rem; }
 
   label { display: block; font-size: 0.8125rem; font-weight: 500; margin: .75rem 0 0; color: var(--foreground); }
-  :where(input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search], input[type=time], textarea, select) {
-    width: 100%; margin: .35rem 0 0; padding: .45rem .7rem;
-    color: var(--foreground); background: var(--card); min-height: 2.125rem;
-    border: 1px solid var(--input); border-radius: calc(var(--radius) - 3px);
-    transition: border-color .15s, box-shadow .15s;
-  }
+  /* The kit's field family (src/design/KIT.md "Fields"): one filled surface, no outline, 12px radius; the label above
+     names the field and focus draws the ink ring. A transparent border keeps the edge in forced colours. Textareas
+     grow with their words (no resize grip); selects draw the kit's chevron. */
+  :where(input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search], input[type=time], input:not([type]), textarea, select) {
+    width: 100%; margin: .35rem 0 0; padding: .5rem .75rem;
+    color: var(--foreground); background-color: var(--so-field); min-height: 2.25rem;
+    border: 1px solid transparent; border-radius: var(--so-radius-sheet); box-shadow: none;
+    transition: background-color .12s;
+  }
+  :where(textarea) { resize: none; field-sizing: content; min-height: 4.75rem; max-height: 22rem; overflow-y: auto; line-height: 1.5; }
+  :where(select:not([multiple])) {
+    appearance: none; -webkit-appearance: none; padding-right: 2.1rem; cursor: pointer;
+    background-image: linear-gradient(45deg, transparent 50%, var(--so-muted) 50%), linear-gradient(135deg, var(--so-muted) 50%, transparent 50%);
+    background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
+  }
+  :where(input, textarea, select)::placeholder { color: var(--muted-foreground); opacity: 1; }
   /* The box above is in :where() so a surface's own rules (the workspace's 44px phone targets) win; the type keeps
      its old weight, so the phone's 16px rule still loses to it as before. */
   input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search], input[type=time], textarea, select { font: 400 0.875rem/1.4 var(--font-sans); }
-  @media (hover: hover) and (pointer: fine) { input:hover, textarea:hover, select:hover { border-color: var(--muted-foreground); } }
+  @media (hover: hover) and (pointer: fine) { :where(input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search], input[type=time], input:not([type]), textarea, select):hover { background-color: color-mix(in srgb, var(--so-field) 94%, var(--so-ink)); } }
   input[type=number] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
   input[type=radio], input[type=checkbox] { accent-color: var(--ring); }
   .permission-field { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
@@ -312,7 +322,8 @@
     min-height: 8.5rem; max-height: 18rem; margin: 0; padding: .9rem 1rem; resize: vertical;
     border: 0; background: transparent; box-shadow: none; font-size: 1.05rem; line-height: 1.55;
   }
-  .task-prompt textarea:focus-visible { border: 0; box-shadow: none; }
+  .task-prompt textarea:focus-visible { border: 0; box-shadow: none; outline: none; }
+  .task-composer:focus-within { outline: 2px solid var(--so-ring); outline-offset: 2px; }
   @media (hover: hover) and (pointer: fine) { .task-prompt textarea:hover { border: 0; box-shadow: none; } }
   .task-repo { margin: .25rem .45rem .7rem; }
   .task-composer-footer { display: flex; align-items: center; gap: .5rem; padding: .25rem; }
@@ -361,7 +372,7 @@
   }
   input[type=password] { font-family: var(--font-mono); }
   input:focus-visible, textarea:focus-visible, select:focus-visible {
-    outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
+    outline: 2px solid var(--so-ring); outline-offset: 1px; box-shadow: none;
   }
   button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
 
@@ -2198,7 +2209,8 @@
     width: 100%; min-height: 3.5rem; max-height: 13rem; margin: 0; padding: .75rem .85rem;
     resize: vertical; border: 0; background: transparent; box-shadow: none; font-size: 1rem;
   }
-  .composer textarea:focus-visible { border: 0; box-shadow: none; }
+  .composer textarea:focus-visible { border: 0; box-shadow: none; outline: none; }
+  .composer:focus-within { outline: 2px solid var(--so-ring); outline-offset: 2px; }
   @media (hover: hover) and (pointer: fine) { .composer textarea:hover { border: 0; box-shadow: none; } }
   .composer button {
     flex: 0 0 2.75rem; width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 999px;

package/dist/server/kit-standalone.d.ts

@@ -17,6 +17,6 @@
  * HTML without it. It never rides a sensitive page (one that asks for a password or shows a secret), where the page
  * carries no chrome additions.
  */
-export declare const KIT_STANDALONE_SCRIPT = "(function(){\nif(window.__kitStandalone)return;window.__kitStandalone=1;var d=document;\nvar PHONE=\"(max-width: 760px)\";var FOCUSABLE='a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\nfunction phone(){return window.matchMedia(PHONE).matches;}\nfunction sync(t){var box=t.closest(\".k-composer\");if(!box)return;var st=getComputedStyle(t);var line=parseFloat(st.lineHeight)||21;\nvar pad=(parseFloat(st.paddingTop)||0)+(parseFloat(st.paddingBottom)||0);var max=line*(Number(t.getAttribute(\"data-max\"))||8)+pad;var min=line*(Number(t.getAttribute(\"data-min\"))||1)+pad;\nt.style.height=\"auto\";t.style.height=Math.max(min,Math.min(t.scrollHeight,max))+\"px\";t.style.overflowY=t.scrollHeight>max+1?\"auto\":\"hidden\";\nvar on=t.value.trim()!==\"\";box.classList.toggle(\"has-text\",on);var sends=box.querySelectorAll(\".k-send[data-gate]:not(:disabled)\");for(var i=0;i<sends.length;i++)sends[i].setAttribute(\"aria-disabled\",String(!on));}\nfunction syncAll(){var all=d.querySelectorAll(\".k-composer-ta\");for(var i=0;i<all.length;i++)sync(all[i]);}\nvar stack=[];\nfunction visible(el){return !!el&&el.isConnected&&el.getClientRects().length>0;}\nfunction openPanel(panel,trigger,onClose){if(stack.length)closeTop(\"close\");var floating=panel.classList.contains(\"k-pop\");var ph=phone();\nif(!panel.isConnected)d.body.appendChild(panel);var scrim=d.createElement(\"div\");scrim.className=\"k-scrim\"+(!floating||ph?\" dim\":\"\");panel.parentNode.insertBefore(scrim,panel);\npanel.hidden=false;panel.setAttribute(\"aria-modal\",\"true\");if(!panel.hasAttribute(\"tabindex\"))panel.tabIndex=-1;panel.classList.toggle(\"as-sheet\",floating&&ph);\nif(floating&&!ph&&trigger){var at=trigger.getBoundingClientRect();var w=panel.offsetWidth||336,h=panel.offsetHeight||200;var left=Math.min(Math.max(8,at.right-w),window.innerWidth-w-8);var below=at.bottom+6;var top=below+h>window.innerHeight-8?Math.max(8,at.top-h-6):below;panel.style.left=Math.round(left)+\"px\";panel.style.top=Math.round(top)+\"px\";}\nvar inerted=[];for(var node=panel;node!==d.body&&node.parentElement;node=node.parentElement){var kids=node.parentElement.children;for(var i=0;i<kids.length;i++){var s=kids[i];if(s===node||s===scrim||s.inert)continue;s.inert=true;inerted.push(s);}}\nvar entry={panel:panel,scrim:scrim,trigger:trigger,inerted:inerted,onClose:onClose};stack.push(entry);scrim.addEventListener(\"click\",function(){closeEntry(entry);});\nvar first=panel.querySelector(\"[autofocus]\")||panel.querySelector('input:not([type=\"hidden\"]), textarea, select')||panel;first.focus();}\nfunction closeEntry(entry){var at=stack.indexOf(entry);if(at<0)return;stack.splice(at,1);for(var i=0;i<entry.inerted.length;i++)entry.inerted[i].inert=false;\nentry.scrim.remove();entry.panel.hidden=true;entry.panel.classList.remove(\"as-sheet\");if(visible(entry.trigger))entry.trigger.focus();if(entry.onClose)entry.onClose();}\nfunction closeTop(){var top=stack[stack.length-1];if(top)closeEntry(top);}\nfunction menu(trigger,title,items){var ph=phone();var panel=d.createElement(\"div\");panel.className=ph?\"k-sheet\":\"k-pop k-pop-menu\";panel.setAttribute(\"role\",\"dialog\");\nvar id=\"k-menu-\"+Math.random().toString(36).slice(2,8);panel.setAttribute(\"aria-labelledby\",id);var head=d.createElement(\"div\");head.className=ph?\"k-sheet-h\":\"k-pop-h\";\nvar h=d.createElement(ph?\"h2\":\"h3\");h.id=id;h.textContent=title;var x=d.createElement(\"button\");x.type=\"button\";x.className=\"k-btn k-btn-ghost k-btn-sm k-btn-icon\";x.setAttribute(\"aria-label\",\"Close\");x.setAttribute(\"data-k-close\",\"\");x.textContent=\"\\u00d7\";\nhead.appendChild(h);head.appendChild(x);var list=d.createElement(\"div\");list.className=\"k-menu\";var entry;\nitems.forEach(function(item){var b=d.createElement(\"button\");b.type=\"button\";b.textContent=item.current?item.label+\" \\u00b7 current\":item.label;if(item.current)b.setAttribute(\"aria-current\",\"true\");b.addEventListener(\"click\",function(){closeTop();item.act();});list.appendChild(b);});\npanel.appendChild(head);panel.appendChild(list);openPanel(panel,trigger,function(){panel.remove();});}\nfunction composerMenu(target){var chip=target.closest(\"[data-k-composer-project]\");var plus=target.closest(\"[data-k-composer-plus]\");var id=chip?chip.getAttribute(\"data-k-composer-project\"):plus?plus.getAttribute(\"data-k-composer-plus\"):null;if(id===null)return false;\nvar hidden=d.getElementById(id+\"-project\");function choose(trigger){if(!hidden)return;var items=[];try{var parsed=JSON.parse(hidden.getAttribute(\"data-items\")||\"[]\");if(Array.isArray(parsed))items=parsed.filter(function(one){return typeof one===\"string\";});}catch(e){items=[];}\nmenu(trigger,\"Project\",items.map(function(name){return{label:name,current:name===hidden.value,act:function(){hidden.value=name;var c=d.querySelector('[data-k-composer-project=\"'+CSS.escape(id)+'\"]');if(c){var l=c.querySelector(\"[data-k-project-name]\");if(l)l.textContent=name;c.setAttribute(\"aria-label\",\"Project: \"+name+\". Change\");}hidden.dispatchEvent(new Event(\"change\",{bubbles:true}));}};}));}\nif(chip){choose(chip);return true;}var attach=d.querySelector('input[type=\"file\"][data-k-attach=\"'+CSS.escape(id)+'\"]');var items=[];if(attach)items.push({label:\"Attach a file\",act:function(){attach.click();}});\nif(hidden)items.push({label:\"Choose project\",act:function(){choose(d.querySelector('[data-k-composer-project=\"'+CSS.escape(id)+'\"]')||plus);}});if(items.length)menu(plus,\"Add to your message\",items);return true;}\nd.addEventListener(\"input\",function(e){var t=e.target;if(t&&t.classList&&t.classList.contains(\"k-composer-ta\"))sync(t);});\nd.addEventListener(\"click\",function(e){var t=e.target;if(!t||!t.closest)return;\nif(t.closest('.k-send[data-gate][aria-disabled=\"true\"]')){e.preventDefault();return;}\nvar draft=t.closest(\"[data-k-draft]\");if(draft){var box=d.getElementById((draft.getAttribute(\"data-k-into\")||\"\")+\"-text\");if(box&&!box.disabled){e.preventDefault();var words=draft.getAttribute(\"data-k-draft\")||\"\";var typed=box.value;\nbox.value=typed.trim()===\"\"?words:typed.indexOf(words)>=0?typed:typed.replace(/\\s+$/,\"\")+\"\\n\"+words;sync(box);box.focus();}return;}\nif((t.closest(\"[data-k-composer-project]\")||t.closest(\"[data-k-composer-plus]\"))&&composerMenu(t)){e.preventDefault();return;}\nvar opener=t.closest(\"[data-k-open]\");if(opener){var panel=d.getElementById(opener.getAttribute(\"data-k-open\")||\"\");if(panel){e.preventDefault();openPanel(panel,opener);}return;}\nif(t.closest(\"[data-k-close]\")){var top=stack[stack.length-1];if(top&&top.panel.contains(t)){e.preventDefault();closeEntry(top);}return;}\nvar sw=t.closest(\"button.k-switch[role=switch][data-k-switch]\");if(sw){var on=sw.getAttribute(\"aria-checked\")!==\"true\";sw.setAttribute(\"aria-checked\",String(on));var w=(sw.getAttribute(\"data-k-switch\")||\"On|Off\").split(\"|\");var s=sw.querySelector(\"[data-k-words]\");if(s)s.textContent=(on?w[0]:w[1])||\"\";sw.dispatchEvent(new CustomEvent(\"k-switch\",{bubbles:true,detail:{on:on}}));}});\nd.addEventListener(\"keydown\",function(e){var top=stack[stack.length-1];if(!top)return;if(e.key===\"Escape\"){e.preventDefault();closeEntry(top);return;}if(e.key!==\"Tab\")return;\nvar items=Array.prototype.filter.call(top.panel.querySelectorAll(FOCUSABLE),visible);if(!items.length){e.preventDefault();top.panel.focus();return;}var first=items[0],last=items[items.length-1];\nif(e.shiftKey&&(d.activeElement===first||d.activeElement===top.panel)){e.preventDefault();last.focus();}else if(!e.shiftKey&&d.activeElement===last){e.preventDefault();first.focus();}},true);\nfunction kb(){var v=window.visualViewport;if(!v)return;var covered=Math.max(0,Math.round(window.innerHeight-v.height-v.offsetTop));d.documentElement.style.setProperty(\"--kb\",covered+\"px\");d.documentElement.classList.toggle(\"kb-open\",covered>80);}\nif(window.visualViewport){window.visualViewport.addEventListener(\"resize\",kb);window.visualViewport.addEventListener(\"scroll\",kb);}\nif(d.readyState===\"loading\")d.addEventListener(\"DOMContentLoaded\",syncAll);else syncAll();\n})();";
+export declare const KIT_STANDALONE_SCRIPT = "(function(){\nif(window.__kitStandalone)return;window.__kitStandalone=1;var d=document;\nvar PHONE=\"(max-width: 760px)\";var FOCUSABLE='a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\nfunction phone(){return window.matchMedia(PHONE).matches;}\nfunction sync(t){var box=t.closest(\".k-composer\");if(!box)return;var st=getComputedStyle(t);var line=parseFloat(st.lineHeight)||21;\nvar pad=(parseFloat(st.paddingTop)||0)+(parseFloat(st.paddingBottom)||0);var max=line*(Number(t.getAttribute(\"data-max\"))||8)+pad;var min=line*(Number(t.getAttribute(\"data-min\"))||1)+pad;\nt.style.height=\"auto\";t.style.height=Math.max(min,Math.min(t.scrollHeight,max))+\"px\";t.style.overflowY=t.scrollHeight>max+1?\"auto\":\"hidden\";\nvar on=t.value.trim()!==\"\";box.classList.toggle(\"has-text\",on);var sends=box.querySelectorAll(\".k-send[data-gate]:not(:disabled)\");for(var i=0;i<sends.length;i++)sends[i].setAttribute(\"aria-disabled\",String(!on));}\nfunction syncAll(){var all=d.querySelectorAll(\".k-composer-ta\");for(var i=0;i<all.length;i++)sync(all[i]);}\nvar stack=[];\nfunction visible(el){return !!el&&el.isConnected&&el.getClientRects().length>0;}\nfunction openPanel(panel,trigger,onClose){if(stack.length)closeTop(\"close\");var floating=panel.classList.contains(\"k-pop\");var ph=phone();\nif(!panel.isConnected)d.body.appendChild(panel);var scrim=d.createElement(\"div\");scrim.className=\"k-scrim\"+(!floating||ph?\" dim\":\"\");panel.parentNode.insertBefore(scrim,panel);\npanel.hidden=false;panel.setAttribute(\"aria-modal\",\"true\");if(!panel.hasAttribute(\"tabindex\"))panel.tabIndex=-1;panel.classList.toggle(\"as-sheet\",floating&&ph);\nif(floating&&!ph&&trigger){var at=trigger.getBoundingClientRect();var w=panel.offsetWidth||336,h=panel.offsetHeight||200;var left=Math.min(Math.max(8,at.right-w),window.innerWidth-w-8);var below=at.bottom+6;var top=below+h>window.innerHeight-8?Math.max(8,at.top-h-6):below;panel.style.left=Math.round(left)+\"px\";panel.style.top=Math.round(top)+\"px\";}\nvar inerted=[];for(var node=panel;node!==d.body&&node.parentElement;node=node.parentElement){var kids=node.parentElement.children;for(var i=0;i<kids.length;i++){var s=kids[i];if(s===node||s===scrim||s.inert)continue;s.inert=true;inerted.push(s);}}\nvar entry={panel:panel,scrim:scrim,trigger:trigger,inerted:inerted,onClose:onClose};stack.push(entry);scrim.addEventListener(\"click\",function(){closeEntry(entry);});\nvar first=panel.querySelector(\"[autofocus]\")||panel.querySelector('input:not([type=\"hidden\"]), textarea, select')||panel;first.focus();}\nfunction closeEntry(entry){var at=stack.indexOf(entry);if(at<0)return;stack.splice(at,1);for(var i=0;i<entry.inerted.length;i++)entry.inerted[i].inert=false;\nentry.scrim.remove();entry.panel.hidden=true;entry.panel.classList.remove(\"as-sheet\");if(visible(entry.trigger))entry.trigger.focus();if(entry.onClose)entry.onClose();}\nfunction closeTop(){var top=stack[stack.length-1];if(top)closeEntry(top);}\nfunction menu(trigger,title,items){var ph=phone();var panel=d.createElement(\"div\");panel.className=ph?\"k-sheet\":\"k-pop k-pop-menu\";panel.setAttribute(\"role\",\"dialog\");\nvar id=\"k-menu-\"+Math.random().toString(36).slice(2,8);panel.setAttribute(\"aria-labelledby\",id);var head=d.createElement(\"div\");head.className=ph?\"k-sheet-h\":\"k-pop-h\";\nvar h=d.createElement(ph?\"h2\":\"h3\");h.id=id;h.textContent=title;var x=d.createElement(\"button\");x.type=\"button\";x.className=\"k-btn k-btn-ghost k-btn-sm k-btn-icon\";x.setAttribute(\"aria-label\",\"Close\");x.setAttribute(\"data-k-close\",\"\");x.textContent=\"\\u00d7\";\nhead.appendChild(h);head.appendChild(x);var list=d.createElement(\"div\");list.className=\"k-menu\";var entry;\nitems.forEach(function(item){var b=d.createElement(\"button\");b.type=\"button\";b.textContent=item.current?item.label+\" \\u00b7 current\":item.label;if(item.current)b.setAttribute(\"aria-current\",\"true\");b.addEventListener(\"click\",function(){closeTop();item.act();});list.appendChild(b);});\npanel.appendChild(head);panel.appendChild(list);openPanel(panel,trigger,function(){panel.remove();});}\nfunction composerMenu(target){var chip=target.closest(\"[data-k-composer-project]\");var plus=target.closest(\"[data-k-composer-plus]\");var id=chip?chip.getAttribute(\"data-k-composer-project\"):plus?plus.getAttribute(\"data-k-composer-plus\"):null;if(id===null)return false;\nvar hidden=d.getElementById(id+\"-project\");function choose(trigger){if(!hidden)return;var items=[];try{var parsed=JSON.parse(hidden.getAttribute(\"data-items\")||\"[]\");if(Array.isArray(parsed))items=parsed.filter(function(one){return typeof one===\"string\";});}catch(e){items=[];}\nmenu(trigger,\"Project\",items.map(function(name){return{label:name,current:name===hidden.value,act:function(){hidden.value=name;var c=d.querySelector('[data-k-composer-project=\"'+CSS.escape(id)+'\"]');if(c){var l=c.querySelector(\"[data-k-project-name]\");if(l)l.textContent=name;c.setAttribute(\"aria-label\",\"Project: \"+name+\". Change\");}hidden.dispatchEvent(new Event(\"change\",{bubbles:true}));}};}));}\nif(chip){choose(chip);return true;}var attach=d.querySelector('input[type=\"file\"][data-k-attach=\"'+CSS.escape(id)+'\"]');var items=[];if(attach)items.push({label:\"Attach a file\",act:function(){attach.click();}});\nif(hidden)items.push({label:\"Choose project\",act:function(){choose(d.querySelector('[data-k-composer-project=\"'+CSS.escape(id)+'\"]')||plus);}});if(items.length)menu(plus,\"Add to your message\",items);return true;}\nd.addEventListener(\"input\",function(e){var t=e.target;if(t&&t.classList&&t.classList.contains(\"k-composer-ta\"))sync(t);});\nd.addEventListener(\"click\",function(e){var t=e.target;if(!t||!t.closest)return;\nif(t.closest('.k-send[data-gate][aria-disabled=\"true\"]')){e.preventDefault();return;}\nvar draft=t.closest(\"[data-k-draft]\");if(draft){var box=d.getElementById((draft.getAttribute(\"data-k-into\")||\"\")+\"-text\");if(box&&!box.disabled){e.preventDefault();var words=draft.getAttribute(\"data-k-draft\")||\"\";var typed=box.value;\nbox.value=typed.trim()===\"\"?words:typed.indexOf(words)>=0?typed:typed.replace(/\\s+$/,\"\")+\"\\n\"+words;sync(box);box.focus();}return;}\nif((t.closest(\"[data-k-composer-project]\")||t.closest(\"[data-k-composer-plus]\"))&&composerMenu(t)){e.preventDefault();return;}\nvar opener=t.closest(\"[data-k-open]\");if(opener){var panel=d.getElementById(opener.getAttribute(\"data-k-open\")||\"\");if(panel){e.preventDefault();openPanel(panel,opener);}return;}\nif(t.closest(\"[data-k-close]\")){var top=stack[stack.length-1];if(top&&top.panel.contains(t)){e.preventDefault();closeEntry(top);}return;}\nvar sw=t.closest(\"button.k-switch[role=switch][data-k-switch]\");if(sw){var on=sw.getAttribute(\"aria-checked\")!==\"true\";sw.setAttribute(\"aria-checked\",String(on));var w=(sw.getAttribute(\"data-k-switch\")||\"On|Off\").split(\"|\");var s=sw.querySelector(\"[data-k-words]\");if(s)s.textContent=(on?w[0]:w[1])||\"\";sw.dispatchEvent(new CustomEvent(\"k-switch\",{bubbles:true,detail:{on:on}}));}});\nd.addEventListener(\"keydown\",function(e){var top=stack[stack.length-1];if(!top)return;if(e.key===\"Escape\"){e.preventDefault();closeEntry(top);return;}if(e.key!==\"Tab\")return;\nvar items=Array.prototype.filter.call(top.panel.querySelectorAll(FOCUSABLE),visible);if(!items.length){e.preventDefault();top.panel.focus();return;}var first=items[0],last=items[items.length-1];\nif(e.shiftKey&&(d.activeElement===first||d.activeElement===top.panel)){e.preventDefault();last.focus();}else if(!e.shiftKey&&d.activeElement===last){e.preventDefault();first.focus();}},true);\nfunction kb(){var v=window.visualViewport;if(!v)return;var covered=Math.max(0,Math.round(window.innerHeight-v.height-v.offsetTop));d.documentElement.style.setProperty(\"--kb\",covered+\"px\");d.documentElement.classList.toggle(\"kb-open\",covered>80);}\nif(window.visualViewport){window.visualViewport.addEventListener(\"resize\",kb);window.visualViewport.addEventListener(\"scroll\",kb);}\nvar root=d.documentElement;root.classList.add(\"k-js\");d.addEventListener(\"keydown\",function(e){if(e.key===\"Tab\"||e.key===\"F6\")root.classList.add(\"k-kbd\");},true);d.addEventListener(\"pointerdown\",function(){root.classList.remove(\"k-kbd\");},true);\nif(d.readyState===\"loading\")d.addEventListener(\"DOMContentLoaded\",syncAll);else syncAll();\n})();";
 /** Whether a page's markup has kit pieces the standalone behaviour wires (a composer, an overlay, a button switch, an idea). */
 export declare const KIT_BEHAVIOR_MARKUP: RegExp;

package/dist/server/kit-standalone.js

@@ -63,6 +63,7 @@ var items=Array.prototype.filter.call(top.panel.querySelectorAll(FOCUSABLE),visi
 if(e.shiftKey&&(d.activeElement===first||d.activeElement===top.panel)){e.preventDefault();last.focus();}else if(!e.shiftKey&&d.activeElement===last){e.preventDefault();first.focus();}},true);
 function kb(){var v=window.visualViewport;if(!v)return;var covered=Math.max(0,Math.round(window.innerHeight-v.height-v.offsetTop));d.documentElement.style.setProperty("--kb",covered+"px");d.documentElement.classList.toggle("kb-open",covered>80);}
 if(window.visualViewport){window.visualViewport.addEventListener("resize",kb);window.visualViewport.addEventListener("scroll",kb);}
+var root=d.documentElement;root.classList.add("k-js");d.addEventListener("keydown",function(e){if(e.key==="Tab"||e.key==="F6")root.classList.add("k-kbd");},true);d.addEventListener("pointerdown",function(){root.classList.remove("k-kbd");},true);
 if(d.readyState==="loading")d.addEventListener("DOMContentLoaded",syncAll);else syncAll();
 })();`;
 /** Whether a page's markup has kit pieces the standalone behaviour wires (a composer, an overlay, a button switch, an idea). */

package/dist/server/kit.d.ts

@@ -90,7 +90,9 @@ export declare function textarea(options: {
     error?: boolean;
     attrs?: Attrs;
 }): Html;
-/** A native select with the kit's chevron: 32px, `sm` 28px in a toolbar, 44px and 16px text on a phone. */
+/** A native select in the field family, with the chevron: 36px, `sm` 28px in a toolbar, 44px and 16px text on a phone.
+ * `chip` draws it as a composer's filled pill (a project inside the message box): still a native select, so it works
+ * without script. */
 export declare function select(options: {
     id?: string;
     name?: string;
@@ -99,6 +101,7 @@ export declare function select(options: {
     current?: string;
     sm?: boolean;
     wide?: boolean;
+    chip?: boolean;
     attrs?: Attrs;
 }): Html;
 /** An on/off setting in a form: a checkbox with role=switch and a visible label (posts `name=on` when on). */
@@ -109,6 +112,15 @@ export declare function switchInput(options: {
     on: boolean;
     attrs?: Attrs;
 }): Html;
+/** An on/off choice inside a composer, drawn as a filled pill chip whose mark fills when on: a checkbox with
+ * role=switch (posts `name=value` when on), so it works without script. Its longer words go under the box (`note`). */
+export declare function toggleChip(options: {
+    id: string;
+    name: string;
+    label: string;
+    on: boolean;
+    attrs?: Attrs;
+}): Html;
 /** Two columns: label and one muted line | the control. `inline` keeps the control beside the label on a phone. */
 export declare function formRow(label: string, hint: string | null, control: Html, variant?: "" | "inline" | "top" | "wide"): Html;
 /** Radio cards: one choice from a few, each with a bold label and one muted line. */
@@ -273,8 +285,9 @@ export declare function sendButton(options?: {
     attrs?: Attrs;
 }): Html;
 /**
- * The message box: one soft rounded container, the textarea grows from `rows` to `maxRows` lines then scrolls,
- * one bottom row inside (+ menu, the project as a quiet chip, small controls, the round send). Textarea
+ * The message box: one filled rounded object, the textarea grows from `rows` to `maxRows` lines then scrolls,
+ * one bottom row inside (+ menu, the project as a filled pill chip, toggle chips, the round send); its note and its
+ * refusal sit under the box (all inside `.k-composer-field`). Textarea
  * `<id>-text` (named `name`), refusal slot `<id>-err`, chosen project a hidden input `<id>-project` (named
  * `projectName`). A refused send keeps the words in the box with the reason in the error slot.
  */
@@ -291,6 +304,7 @@ export declare function composer(options: {
         current: string;
         items: readonly string[];
         name?: string;
+        sub?: string;
     };
     before?: Html;
     send: Html;

package/dist/server/kit.js

@@ -71,18 +71,25 @@ export function input(options) {
 export function textarea(options) {
     return html `<textarea class="k-textarea" id="${options.id}" name="${options.name}" rows="${options.rows ?? 3}"${attributes({ "aria-invalid": options.error ? "true" : undefined, "aria-describedby": `${options.id}-err`, ...options.attrs })}>${options.value ?? ""}</textarea>`;
 }
-/** A native select with the kit's chevron: 32px, `sm` 28px in a toolbar, 44px and 16px text on a phone. */
+/** A native select in the field family, with the chevron: 36px, `sm` 28px in a toolbar, 44px and 16px text on a phone.
+ * `chip` draws it as a composer's filled pill (a project inside the message box): still a native select, so it works
+ * without script. */
 export function select(options) {
     const opts = options.items.map(item => {
         const [value, label] = typeof item === "string" ? [item, item] : item;
         return html `<option value="${value}"${value === options.current ? html ` selected` : ""}>${label}</option>`;
     });
-    return html `<span class="${cls("k-selw", options.sm && "sm", options.wide && "wide")}"><select class="k-sel"${attributes({ id: options.id, name: options.name, "aria-label": options.label, ...options.attrs })}>${opts}</select></span>`;
+    return html `<span class="${cls("k-selw", options.sm && "sm", options.wide && "wide", options.chip && "k-selw-chip")}"><select class="k-sel"${attributes({ id: options.id, name: options.name, "aria-label": options.label, ...options.attrs })}>${opts}</select></span>`;
 }
 /** An on/off setting in a form: a checkbox with role=switch and a visible label (posts `name=on` when on). */
 export function switchInput(options) {
     return html `<label class="k-switch"><input class="k-switch-input" type="checkbox" role="switch" id="${options.id}" name="${options.name}"${options.on ? html ` checked` : ""}${attributes(options.attrs ?? {})}><span class="k-trk" aria-hidden="true"></span><span>${options.label}</span></label>`;
 }
+/** An on/off choice inside a composer, drawn as a filled pill chip whose mark fills when on: a checkbox with
+ * role=switch (posts `name=value` when on), so it works without script. Its longer words go under the box (`note`). */
+export function toggleChip(options) {
+    return html `<label class="k-tchip"><input class="k-switch-input" type="checkbox" role="switch" id="${options.id}" name="${options.name}"${options.on ? html ` checked` : ""}${attributes(options.attrs ?? {})}><span class="k-tchip-mark" aria-hidden="true"></span><span>${options.label}</span></label>`;
+}
 /** Two columns: label and one muted line | the control. `inline` keeps the control beside the label on a phone. */
 export function formRow(label, hint, control, variant = "") {
     return html `<div class="${cls("k-frow", variant)}"><div class="k-frow-l"><span class="k-frow-t">${label}</span>${hint ? html `<span class="k-frow-h">${hint}</span>` : ""}</div><div class="k-frow-c">${control}</div></div>`;
@@ -243,8 +250,9 @@ export function sendButton(options = {}) {
 ${options.stop ? html `<button class="k-send k-stop" type="button" aria-label="${options.stop.label ?? "Stop"}" title="${options.stop.label ?? "Stop"}"${attributes(options.stop.attrs ?? {})}>${icon("stop")}</button>` : ""}</span>`;
 }
 /**
- * The message box: one soft rounded container, the textarea grows from `rows` to `maxRows` lines then scrolls,
- * one bottom row inside (+ menu, the project as a quiet chip, small controls, the round send). Textarea
+ * The message box: one filled rounded object, the textarea grows from `rows` to `maxRows` lines then scrolls,
+ * one bottom row inside (+ menu, the project as a filled pill chip, toggle chips, the round send); its note and its
+ * refusal sit under the box (all inside `.k-composer-field`). Textarea
  * `<id>-text` (named `name`), refusal slot `<id>-err`, chosen project a hidden input `<id>-project` (named
  * `projectName`). A refused send keeps the words in the box with the reason in the error slot.
  */
@@ -252,16 +260,16 @@ export function composer(options) {
     const value = options.value ?? "";
     const textId = `${options.id}-text`;
     const project = options.project
-        ? html `<button class="k-composer-chip" type="button" data-k-composer-project="${options.id}" aria-haspopup="dialog" aria-label="Project: ${options.project.current}. Change"${options.disabled ? html ` disabled` : ""}><span data-k-project-name>${options.project.current}</span>${icon("chevron", true)}</button>\
+        ? html `<button class="k-composer-chip" type="button" data-k-composer-project="${options.id}" aria-haspopup="dialog" aria-label="Project: ${options.project.current}. Change"${options.disabled ? html ` disabled` : ""}><span data-k-project-name>${options.project.current}</span>${options.project.sub ? html `<span class="k-chip-sub">${options.project.sub}</span>` : ""}</button>\
 <input type="hidden" id="${options.id}-project" name="${options.project.name ?? "project"}" value="${options.project.current}" data-items="${JSON.stringify(options.project.items)}">`
         : html ``;
     const plus = options.plus
         ? html `<button class="k-composer-plus" type="button" data-k-composer-plus="${options.id}" aria-haspopup="dialog" aria-label="Add to your message"${options.disabled ? html ` disabled` : ""}>${icon("plus")}</button>`
         : html ``;
-    return html `<div class="${cls("k-composer", options.line && "line", options.disabled && "off", value.trim() && "has-text", options.working && "working")}" data-k-composer="${options.id}">\
+    return html `<div class="k-composer-field"><div class="${cls("k-composer", options.line && "line", options.disabled && "off", value.trim() && "has-text", options.working && "working")}" data-k-composer="${options.id}">\
 <label class="k-sr" for="${textId}">${options.label}</label><div class="k-composer-files" data-k-files="${options.id}"></div>\
 <textarea class="k-composer-ta" id="${textId}" name="${options.name}" rows="${options.rows ?? 1}" data-min="${options.rows ?? 1}" data-max="${options.maxRows ?? 8}"${attributes({ placeholder: options.placeholder, disabled: options.disabled === true, "aria-invalid": options.error ? "true" : undefined, "aria-describedby": `${options.id}-err`, ...options.textAttrs })}>${value}</textarea>\
-<div class="k-composer-bar">${plus}${project}${options.before ?? ""}<span class="k-grow"></span>${options.send}</div>\
+<div class="k-composer-bar">${plus}${project}${options.before ?? ""}<span class="k-grow"></span>${options.send}</div></div>\
 ${options.note ? html `<p class="k-note k-composer-note">${options.note}</p>` : ""}<div class="k-composer-err k-err" id="${options.id}-err" role="alert">${options.error ?? ""}</div></div>`;
 }
 /** A floating panel, hidden until its trigger (`overlayTrigger`) opens it: role=dialog, a labelled Close, Escape

package/dist/server/render-new-task.js

@@ -7,7 +7,7 @@
 import { html, joinHtml, postForm } from "../html.js";
 import { projectName } from "../project.js";
 import { screen } from "./chrome.js";
-import { btn, composer, disclose, doc, docHeader, dock, field, ideas, input, note, phoneHeader, radios, select, sendButton, switchInput, textarea } from "./kit.js";
+import { btn, composer, disclose, doc, docHeader, dock, field, ideas, input, note, phoneHeader, radios, select, sendButton, textarea, toggleChip } from "./kit.js";
 const FORM_ID = "nt-form";
 const PLAN_ON = "The agent reads the code and asks you anything unclear, then writes the plan.";
 const PLAN_OFF = "The agent writes the plan straight from your words. Faster for small, obvious changes.";
@@ -51,8 +51,8 @@ suggestions = []) {
     const folder = !typed ? "" : field({ id: "nt-repo", label: "Project folder", hint: "No projects yet: name the folder of a git repository.",
         control: input({ id: "nt-repo", name: "repo", value: chosen, hint: true, attrs: { required: true, placeholder: "/path/to/repository", autocapitalize: "none", spellcheck: "false" } }) });
     const bar = joinHtml([
-        typed ? "" : select({ id: "nt-project", name: "repo", label: "Project", items, current: chosen, sm: true }),
-        switchInput({ id: "nt-plan", name: "plan-first", label: "Read code before planning", on: planOn, attrs: { value: "1" } }),
+        typed ? "" : select({ id: "nt-project", name: "repo", label: "Project", items, current: chosen, chip: true }),
+        toggleChip({ id: "nt-plan", name: "plan-first", label: "Read code before planning", on: planOn, attrs: { value: "1" } }),
     ]);
     const box = composer({
         id: "nt", name: "title", label: "What should change?", placeholder: "What should change? One or two sentences is enough.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolroll",
-  "version": "0.9.87",
+  "version": "0.9.88",
   "description": "A control plane for unattended coding agents — queue tasks, walk away, come back to pull requests. Agents build in leased worktrees, never touch your default branch, and interrupt you only for decisions that need a human.",
   "directories": {
     "doc": "docs"