@cplieger/web-terminal-ui 3.5.0 → 4.1.0

package/css/{06-mobile.css → 31-switcher.css}

@@ -2,26 +2,29 @@
    The bottom bar (switcher) is the mobile tab surface, the externally-driven key
    grid docks above it, and the overview sheet lists every tab. The desktop strip
    is hidden only on a narrow coarse-pointer device (a phone) and these appear
-   instead; all motion (bar number fade, sheet slide) lives in 07-animations.css. */
+   instead; all motion (bar number fade, sheet slide) lives in 40-animations.css. */
 
 /* The switcher is used only on a NARROW coarse-pointer device (a phone), where
    the top strip is hidden so tabs live in the thumb zone. A wide touchscreen (an
    iPad) and any fine-pointer device keep the multi-tab top strip — a single
-   giant tab wastes a big screen. This media query MUST stay in lockstep with
-   SWITCHER_MEDIA in src/features/tabs.ts and the complementary strip clearance
-   in css/05-tabs.css. */
-.wt-switcher {
+   giant tab wastes a big screen. "Narrow" is the kernel's .wt-narrow root class
+   (ROOT width at the single kernel breakpoint — so an embedded terminal in a
+   narrow panel counts as narrow); this file pairs it with (pointer: coarse),
+   and css/30-tabs.css carries the complementary strip clearance. */
+:where(.wt-root) .wt-switcher {
   display: none;
 }
 
-@media (pointer: coarse) and (width <= 600px) {
-  .wt-tab-bar,
-  .wt-tab-new {
+@media (pointer: coarse) {
+  :where(.wt-root.wt-narrow) .wt-tab-bar,
+  :where(.wt-root.wt-narrow) .wt-tab-new {
     display: none;
   }
 
-  .wt-switcher {
-    position: fixed;
+  :where(.wt-root.wt-narrow) .wt-switcher {
+    /* Absolute against .wt-root, like all chrome (identical geometry in
+       wt-viewport mode; see 01-scope.css). */
+    position: absolute;
     left: 0;
     right: 0;
     /* Lift above the soft keyboard rather than hiding, so the switch surface
@@ -39,7 +42,7 @@
 /* The always-visible bar row: active tab + keyboard + "+". The padding gives the
    active-tab chip breathing room above/below within the bar, matching the
    desktop strip (both use --sp-2). */
-.wt-switcher-bar {
+:where(.wt-root) .wt-switcher-bar {
   display: flex;
   align-items: stretch;
   gap: var(--sp-1);
@@ -48,8 +51,8 @@
 
 /* The other tabs, revealed below the bar row on expand (the bar slides up).
    Collapsed to zero height; expanded caps the height and scrolls. The max-height
-   transition lives in 07-animations.css. */
-.wt-switcher-list {
+   transition lives in 40-animations.css. */
+:where(.wt-root) .wt-switcher-list {
   list-style: none;
   margin: 0;
   /* Match the bar's horizontal padding (--sp-2) so a listed row lines up with
@@ -73,12 +76,16 @@
   box-sizing: border-box;
 }
 
-.wt-switcher-expanded .wt-switcher-list {
+:where(.wt-root) .wt-switcher-expanded .wt-switcher-list {
   /* Cap against the DYNAMIC viewport so a shown mobile browser toolbar can't push the list
      (and the bar above it) off the top; the switcher's own bottom: kb-inset already lifts it
      clear of the soft keyboard. */
   max-height: var(--wt-list-h, 50dvh);
   overflow-y: auto;
+  /* Reaching the list's end must not hand the touch scroll to an embedding
+     page (wt-container mode) — the tray sits over the terminal, and a chained
+     scroll behind an open tray is disorienting. */
+  overscroll-behavior-y: contain;
   /* No top padding: the bar's --sp-2 bottom padding already sits between the
      active tab and the first row, so the seam equals the --sp-2 inter-row gap. */
   padding-top: 0;
@@ -90,7 +97,7 @@
    sibling over the surface's reserved right padding). The wrap is the flex item
    that grows in the bar (and fills the space when the keyboard button collapses
    on expand). */
-.wt-switcher-current-wrap {
+:where(.wt-root) .wt-switcher-current-wrap {
   position: relative;
   flex: 1 1 auto;
   display: flex;
@@ -101,7 +108,7 @@
   overflow: hidden;
 }
 
-.wt-switcher-current {
+:where(.wt-root) .wt-switcher-current {
   position: relative;
   flex: 1 1 auto;
   display: flex;
@@ -130,7 +137,7 @@
    padding, mirroring the listed rows' close. Hover fill only on real hover
    pointers so it never sticks white after a touch (a removed tab shifts the
    list under the finger otherwise). */
-.wt-switcher-current-close {
+:where(.wt-root) .wt-switcher-current-close {
   position: absolute;
   /* Centre vertically via top/bottom (not a translateY transform), so transform
      is free for the swipe translate — the close moves with the dot + label. And
@@ -142,14 +149,14 @@
 }
 
 @media (hover: hover) {
-  .wt-switcher-current-close:hover {
+  :where(.wt-root) .wt-switcher-current-close:hover {
     color: var(--text);
   }
 }
 
 /* Press feedback: brighten the active fill slightly (a lighter press over an
    already-filled row). */
-.wt-switcher-current:active {
+:where(.wt-root) .wt-switcher-current:active {
   background: color-mix(in oklch, var(--tab-active-bg), var(--tab-active-fg) 12%);
 }
 
@@ -157,7 +164,7 @@
    parts out; a horizontal swipe translates it (clipped by the row's
    overflow: hidden) so the active tab area physically slides with the finger,
    and the incoming tab's label slides in from the swipe direction on commit. */
-.wt-switcher-current-inner {
+:where(.wt-root) .wt-switcher-current-inner {
   display: flex;
   align-items: center;
   gap: var(--sp-2);
@@ -165,7 +172,7 @@
   min-width: 0;
 }
 
-.wt-switcher-label {
+:where(.wt-root) .wt-switcher-label {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -178,7 +185,7 @@
    just the wt-btn min-width) makes it animatable: when the tab list expands the
    button collapses to zero width and fades out (the key grid is closed too, in
    JS), and the active row flex-grows to fill the freed space. */
-.wt-switcher-kb {
+:where(.wt-root) .wt-switcher-kb {
   /* Rigid 44px box like the "+" and switch buttons (flex: none), so a long
      active-tab title that overflows the bar is absorbed entirely by the
      ellipsizing active-tab field, not shared with this button. It is otherwise
@@ -199,11 +206,11 @@
   overflow: hidden;
 }
 
-.wt-switcher-kb[hidden] {
+:where(.wt-root) .wt-switcher-kb[hidden] {
   display: none;
 }
 
-.wt-switcher-kb.wt-active {
+:where(.wt-root) .wt-switcher-kb.wt-active {
   background: var(--tab-hover-bg);
   color: var(--tab-active-fg);
 }
@@ -212,12 +219,12 @@
    Ctrl key uses) while a Ctrl press is pending, so the modifier stays visible
    even with the key grid — and its own Ctrl button — closed. After .wt-active so
    the armed fill wins when the grid is also open. */
-.wt-switcher-kb.wt-armed {
+:where(.wt-root) .wt-switcher-kb.wt-armed {
   background: var(--text);
   color: var(--bg);
 }
 
-.wt-switcher-expanded .wt-switcher-kb {
+:where(.wt-root) .wt-switcher-expanded .wt-switcher-kb {
   width: 0;
   /* Absorb the flex gap the collapsed button would otherwise leave behind. */
   margin-inline-start: calc(-1 * var(--sp-1));
@@ -230,9 +237,9 @@
    absolutely placed in the top-right corner. It only earns its place with ≥2
    tabs (a single tab has nothing to switch to), so it is COLLAPSED to zero width
    by default and revealed by .wt-switcher-multi (the tabs feature sets it on tab
-   count); the appear/collapse is animated in 07-animations.css and the active
+   count); the appear/collapse is animated in 40-animations.css and the active
    chip shrinks/grows to fill the freed space in lockstep (flex layout). */
-.wt-switcher-switch {
+:where(.wt-root) .wt-switcher-switch {
   position: relative;
   flex: none;
   width: 0;
@@ -247,7 +254,7 @@
 }
 
 /* Revealed once a second tab exists: full 44px box, interactive, no gap eat. */
-.wt-switcher-multi .wt-switcher-switch {
+:where(.wt-root) .wt-switcher-multi .wt-switcher-switch {
   width: var(--touch-target);
   opacity: 1;
   pointer-events: auto;
@@ -256,10 +263,10 @@
 
 /* When the tab list expands the switch button collapses too (its job is done:
    the list is open), mirroring the keyboard button's collapse in the same
-   animation (07-animations.css animates width + margin + opacity). Placed after
+   animation (40-animations.css animates width + margin + opacity). Placed after
    the .wt-switcher-multi reveal so it wins when both apply (expanded, two or
    more tabs). */
-.wt-switcher-expanded .wt-switcher-switch {
+:where(.wt-root) .wt-switcher-expanded .wt-switcher-switch {
   width: 0;
   opacity: 0;
   margin-inline-start: calc(-1 * var(--sp-1));
@@ -267,17 +274,17 @@
 }
 
 @media (hover: hover) {
-  .wt-switcher-switch:hover {
+  :where(.wt-root) .wt-switcher-switch:hover {
     background: var(--tab-hover-bg);
   }
 }
 
 /* Latest-wins background-tab notification dot on the switch button — the moved
    attention cue. Amber = a background terminal needs input, green = a background
-   turn finished. Reuses the exact .wt-status-dot colours (05-tabs.css) so it
+   turn finished. Reuses the exact .wt-status-dot colours (30-tabs.css) so it
    matches the per-tab dots. Hidden until the tabs feature sets data-status;
    cleared when the list opens (expandSwitcher). */
-.wt-switcher-switch-dot {
+:where(.wt-root) .wt-switcher-switch-dot {
   position: absolute;
   top: 6px;
   right: 6px;
@@ -285,10 +292,10 @@
 
 /* The dot carries the .wt-status-dot class, so its size, shape, and colour come
    straight from the shared .wt-status-dot[data-status="input"|"done"] rules
-   (05-tabs.css) — the SAME dot colours every tab already uses, defined once.
+   (30-tabs.css) — the SAME dot colours every tab already uses, defined once.
    .wt-status-dot is display:none by default; force it visible only while a
    notification is set (data-status present). */
-.wt-switcher-switch-dot[data-status] {
+:where(.wt-root) .wt-switcher-switch-dot[data-status] {
   display: block;
 }
 
@@ -296,72 +303,70 @@
    permanent and prominent. Hover fill is gated to real hover pointers: on touch,
    :hover sticks after a tap (no pointer-leave), so the purple would linger — the
    press feedback there comes from :active, which clears on release. */
-.wt-switcher-new {
+:where(.wt-root) .wt-switcher-new {
   flex: none;
   color: var(--accent);
 }
 
 @media (hover: hover) {
-  .wt-switcher-new:hover {
+  :where(.wt-root) .wt-switcher-new:hover {
     background: var(--tab-hover-bg);
   }
 }
 
-.wt-switcher-new:active {
+:where(.wt-root) .wt-switcher-new:active {
   background: var(--tab-hover-bg);
 }
 
 /* ===== Externally-driven key grid (tabbed presets, WS3) =====
-   In the tabbed presets the mobile toolbar hides its own toggle (the tab bar's
-   keyboard button drives it) and the grid docks above the bar on the right, to
-   the left of where scroll-to-bottom sits. It collapses to fully hidden, since
-   there is no in-grid toggle to keep visible. */
-@media (pointer: coarse) and (width <= 600px) {
-  .wt-toolbar-external .kb-toggle {
+   In the tabbed presets the mobile toolbar hides its own toggle (a tab-chrome
+   keyboard button drives it — the switcher's on a narrow phone, the strip's
+   .wt-tab-kb on a wide touchscreen) and the grid docks bottom-right above the
+   tab chrome, its RIGHT edge aligned with the keyboard button that opened it,
+   so the popup visually hangs off its toggle in every mode (it may overlap the
+   scroll-to-bottom button — deliberate: the grid is transient and on top). It
+   collapses to fully hidden, since there is no in-grid toggle to keep visible.
+   The BASE rules here are the wide-touchscreen (strip) placement — above
+   --wt-tabbar-h, right-aligned to the strip's .wt-tab-kb (the bar's last flex
+   item, inset --sp-2 by the bar padding); the .wt-narrow overrides below
+   re-anchor above the switcher bar (--wt-switcher-h) and shift left past the
+   bar controls sitting right of the switcher's kb button: the "+" (always)
+   and, once a second tab reveals it, the switch button (.wt-switcher-multi
+   from the tabs feature, read here via :has() since the grid is a sibling
+   region of the switcher). Everything else (toggle hidden, grid columns,
+   collapsed fully hidden) is identical in all modes. */
+@media (pointer: coarse) {
+  :where(.wt-root) .wt-toolbar-external .kb-toggle {
     display: none;
   }
 
-  .key-toolbar.wt-toolbar-external {
+  :where(.wt-root) .key-toolbar.wt-toolbar-external {
     top: auto;
-    right: calc(var(--sp-3) + var(--touch-target) + var(--sp-2));
+    right: var(--sp-2);
     bottom: calc(
-      var(--wt-switcher-h) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
+      var(--wt-tabbar-h, 44px) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
     );
     grid-template-columns: repeat(4, var(--touch-target));
   }
 
-  .key-toolbar.wt-toolbar-external.collapsed {
-    display: none;
-  }
-}
-
-/* Desktop tab strip on a WIDE touchscreen (an iPad): the mobile switcher is
-   gone, so the desktop strip carries its OWN keyboard button (.wt-tab-kb, built
-   by the same factory as the switcher's — see css/05-tabs.css + tabs.ts) to open
-   the key grid. So, exactly like switcher mode, the toolbar's own toggle is
-   hidden and the collapsed grid fully hidden — the tab-strip keyboard button is
-   the sole control (this replaces the old CSS-only workaround that un-hid the
-   toolbar's own toggle here). The grid still docks bottom-right ABOVE the strip:
-   above the tabs (never overlapping them, even when many are open and the strip
-   scrolls) and to the left of the scroll-to-bottom FAB (same right offset as
-   switcher mode). Complements the strip-shown breakpoint in css/05-tabs.css;
-   keep in lockstep with SWITCHER_MEDIA in src/features/tabs.ts. */
-@media (pointer: coarse) and (width >= 601px) {
-  .wt-toolbar-external .kb-toggle {
+  :where(.wt-root) .key-toolbar.wt-toolbar-external.collapsed {
     display: none;
   }
 
-  .key-toolbar.wt-toolbar-external {
-    top: auto;
-    right: calc(var(--sp-3) + var(--touch-target) + var(--sp-2));
+  /* Narrow phone (mobile switcher mode): dock above the switcher bar,
+     right-aligned to the switcher's kb button — one 44px control (+ gap)
+     in from the edge past the "+"... */
+  :where(.wt-root.wt-narrow) .key-toolbar.wt-toolbar-external {
+    right: calc(var(--sp-2) + var(--touch-target) + var(--sp-1));
     bottom: calc(
-      var(--wt-tabbar-h, 44px) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
+      var(--wt-switcher-h) + var(--safe-bottom, 0px) + var(--kb-inset, 0px) + var(--sp-2)
     );
-    grid-template-columns: repeat(4, var(--touch-target));
   }
 
-  .key-toolbar.wt-toolbar-external.collapsed {
-    display: none;
+  /* ...and a second control in once the switch button is revealed (>= 2 tabs).
+     Ordered after the single-tab rule so it wins when both match. */
+  :where(.wt-root.wt-narrow:has(.wt-switcher-multi)) .key-toolbar.wt-toolbar-external {
+    right: calc(var(--sp-2) + 2 * (var(--touch-target) + var(--sp-1)));
   }
 }
 
@@ -369,12 +374,12 @@
    One row per OTHER tab in the expanded list: a stretched select target (dot +
    label) with the close (x) laid inside at the right, mirroring the desktop
    tab's merged chrome. */
-.wt-switcher-row {
+:where(.wt-root) .wt-switcher-row {
   position: relative;
   display: flex;
 }
 
-.wt-switcher-row-select {
+:where(.wt-root) .wt-switcher-row-select {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
@@ -394,7 +399,7 @@
 }
 
 @media (hover: hover) {
-  .wt-switcher-row-select:hover {
+  :where(.wt-root) .wt-switcher-row-select:hover {
     background: color-mix(in oklch, var(--tab-bg), var(--text) 15%);
   }
 }
@@ -403,11 +408,11 @@
    chip (the same 15% --text lift the desktop tabs use), not the translucent
    --tab-hover-bg wash that would erase the chip fill. The active tab is set apart
    by its accent border, so a lit inactive row is never mistaken for it. */
-.wt-switcher-row-select:active {
+:where(.wt-root) .wt-switcher-row-select:active {
   background: color-mix(in oklch, var(--tab-bg), var(--text) 15%);
 }
 
-.wt-switcher-row-label {
+:where(.wt-root) .wt-switcher-row-label {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -415,7 +420,7 @@
 }
 
 /* The close sits flush at the row's right edge (no gap), vertically centered. */
-.wt-switcher-row-close {
+:where(.wt-root) .wt-switcher-row-close {
   position: absolute;
   top: 50%;
   right: 0;
@@ -427,7 +432,7 @@
    when closing a tab shifts the list under the finger the newly-under close
    would latch white. Touch feedback comes from the surrounding row's :active. */
 @media (hover: hover) {
-  .wt-switcher-row-close:hover {
+  :where(.wt-root) .wt-switcher-row-close:hover {
     color: var(--text);
   }
 }

package/css/{07-animations.css → 40-animations.css}

@@ -4,10 +4,10 @@
    base rules in 03-06 carry the resting state, and these rules add the
    transitions and keyframes on top. A few pieces of motion are intentionally NOT
    gated on .wt-animate and animate unconditionally: terminal-core motion (cursor
-   and SGR blink) and the mobile key toolbar open/close in 02-app.css, plus the
-   working-status-dot pulse in 05-tabs.css (motion is its only non-hue cue, per
-   WCAG 1.4.1). prefers-reduced-motion still defeats all of it via the reset in
-   01-reset.css. Keeping the chrome-surface motion in one file is the
+   and SGR blink) and the mobile key toolbar open/close in 23-toolbar.css, plus the
+   working-status-dot pulse in 30-tabs.css (motion is its only non-hue cue, per
+   WCAG 1.4.1). prefers-reduced-motion still defeats all of it via the scoped
+   kill-switch in 01-scope.css. Keeping the chrome-surface motion in one file is the
    design-system seam for "does this chrome animate, and how". */
 
 /* Fade the toast OUT on hide (display allow-discrete holds display:block for
@@ -21,16 +21,16 @@
    shared opacity transition would be inert while the `display allow-discrete`
    half held them fully visible for --dur-standard before popping out on hide.
    They show and hide instantly. */
-.wt-animate .wt-toast {
+:where(.wt-root.wt-animate) .wt-toast {
   transition:
     opacity var(--dur-standard) var(--ease-standard),
     display var(--dur-standard) allow-discrete;
 }
 
 /* Tab chrome micro-transitions (hover/active color shifts). */
-.wt-animate .wt-tab,
-.wt-animate .wt-tab-close,
-.wt-animate .wt-tab-new {
+:where(.wt-root.wt-animate) .wt-tab,
+:where(.wt-root.wt-animate) .wt-tab-close,
+:where(.wt-root.wt-animate) .wt-tab-new {
   transition:
     background-color var(--dur-micro) var(--ease-standard),
     color var(--dur-micro) var(--ease-standard);
@@ -41,7 +41,7 @@
    immediately with no exit animation, so the strip reflows in one frame (a
    delayed exit made the "+" teleport and put a last-tab replacement in the wrong
    slot). scale() is a transform, so the enter never shifts the "+". */
-.wt-animate .wt-tab-enter {
+:where(.wt-root.wt-animate) .wt-tab-enter {
   animation: wt-tab-in var(--dur-enter) var(--ease-enter);
 }
 
@@ -58,7 +58,7 @@
    — animating only max-height let the padding snap away instantly at the start
    of a collapse (a choppy, two-step close). The tabs feature clears the rows
    after the collapse. */
-.wt-animate .wt-switcher-list {
+:where(.wt-root.wt-animate) .wt-switcher-list {
   transition:
     max-height var(--dur-enter) var(--ease-standard),
     padding var(--dur-enter) var(--ease-standard);
@@ -67,7 +67,7 @@
 /* When the tab list expands, the keyboard button collapses to zero width and
    fades (the key grid is closed in JS); the active row flex-grows into the freed
    space in lockstep as the button's width animates. */
-.wt-animate .wt-switcher-kb {
+:where(.wt-root.wt-animate) .wt-switcher-kb {
   transition:
     width var(--dur-enter) var(--ease-standard),
     margin var(--dur-enter) var(--ease-standard),
@@ -78,7 +78,7 @@
    at one tab (.wt-switcher-multi, tabs feature). Animate its width + margin +
    opacity so it slides in from zero width — the active-tab chip shrinks to make
    room in lockstep (flex) — rather than popping. Mirrors the keyboard button. */
-.wt-animate .wt-switcher-switch {
+:where(.wt-root.wt-animate) .wt-switcher-switch {
   transition:
     width var(--dur-enter) var(--ease-standard),
     margin var(--dur-enter) var(--ease-standard),
@@ -89,15 +89,15 @@
    reads as a change rather than a flicker. A swipe additionally slides the
    content in from the swipe's direction (next from the right, prev from the
    left, WS5). */
-.wt-animate .term.wt-switching .term-output {
+:where(.wt-root.wt-animate) .term.wt-switching .term-output {
   animation: wt-switch-in var(--dur-standard) var(--ease-standard);
 }
 
-.wt-animate .term.wt-switching-next .term-output {
+:where(.wt-root.wt-animate) .term.wt-switching-next .term-output {
   animation: wt-switch-next var(--dur-standard) var(--ease-standard);
 }
 
-.wt-animate .term.wt-switching-prev .term-output {
+:where(.wt-root.wt-animate) .term.wt-switching-prev .term-output {
   animation: wt-switch-prev var(--dur-standard) var(--ease-standard);
 }
 

package/css/MANIFEST

@@ -1,12 +1,20 @@
-# web-terminal-ui CSS bundle manifest
-# Files concatenated in declared order to produce the served style.css.
-# The order IS the cascade: tokens + reset + terminal core, then the v3 design
-# system (shared primitives, then per-feature chrome), then all motion last.
+# web-terminal-ui CSS — the REFERENCE FULL-PAGE bundle.
+# What the full-page product serves (web-terminal-server, web-terminal-kiro,
+# scaffold/index.html): the page kit (page.css — html/body reset + @font-face;
+# full-page hosts ONLY) plus the complete tabbed component set. An EMBEDDING
+# consumer must NOT serve this file's bundle — it concatenates the per-preset
+# manifest matching its composition instead (MANIFEST.single / MANIFEST.touch /
+# MANIFEST.tabbed), which contains no page-level rules.
+# Files concatenate in declared order; the order IS the cascade.
+page.css
 00-tokens.css
-01-reset.css
-02-app.css
-03-primitives.css
-04-feedback.css
-05-tabs.css
-06-mobile.css
-07-animations.css
+01-scope.css
+02-terminal.css
+10-primitives.css
+20-connection-banner.css
+21-scroll-to-bottom.css
+22-context-menu.css
+23-toolbar.css
+30-tabs.css
+31-switcher.css
+40-animations.css

package/css/MANIFEST.single

@@ -0,0 +1,12 @@
+# Component bundle for presetSingle() compositions (no toolbar, no tabs, no
+# animations feature). Library styles only — root-scoped, no page-level rules;
+# the host page owns its own reset/fonts (full-page hosts use the reference
+# MANIFEST instead, whose page.css carries those).
+# Files concatenate in declared order; the order IS the cascade.
+00-tokens.css
+01-scope.css
+02-terminal.css
+10-primitives.css
+20-connection-banner.css
+21-scroll-to-bottom.css
+22-context-menu.css

package/css/MANIFEST.tabbed

@@ -0,0 +1,16 @@
+# Component bundle for presetTabbed() / presetAgentTabbed() compositions: the
+# touch set plus tabs (strip + mobile switcher) and the animations feature's
+# motion. Library styles only — root-scoped, no page-level rules. A full-page
+# host serves the reference MANIFEST instead (this set + page.css).
+# Files concatenate in declared order; the order IS the cascade.
+00-tokens.css
+01-scope.css
+02-terminal.css
+10-primitives.css
+20-connection-banner.css
+21-scroll-to-bottom.css
+22-context-menu.css
+23-toolbar.css
+30-tabs.css
+31-switcher.css
+40-animations.css

package/css/MANIFEST.touch

@@ -0,0 +1,12 @@
+# Component bundle for presetTouch() compositions (single + the mobile key
+# toolbar). Library styles only — root-scoped, no page-level rules; the host
+# page owns its own reset/fonts (vibekit's embedded panel serves exactly this).
+# Files concatenate in declared order; the order IS the cascade.
+00-tokens.css
+01-scope.css
+02-terminal.css
+10-primitives.css
+20-connection-banner.css
+21-scroll-to-bottom.css
+22-context-menu.css
+23-toolbar.css

package/css/{01-reset.css → page.css}

@@ -1,4 +1,11 @@
-/* ===== Reset ===== */
+/* ===== Page kit (full-page hosts ONLY — never ship this to an embedder) =====
+   The page-level half of the full-page terminal product: what the HOST PAGE
+   owns when the terminal IS the page (web-terminal-server, web-terminal-kiro,
+   scaffold/index.html). The component bundle (00-10) never touches the host
+   document; everything here is deliberately page-scoped. An embedding consumer
+   (vibekit) serves a per-preset manifest instead and owns its own page.
+   Concatenated FIRST by the reference MANIFEST. */
+
 *,
 *::before,
 *::after {
@@ -11,7 +18,10 @@ body {
   padding: 0;
   height: 100%;
   overflow: hidden;
-  background: var(--bg);
+  /* The pre-JS backdrop (the loading state paints over it). Matches the
+     component's --bg default (css/00-tokens.css, oklch(0% 0 0deg)); a themed
+     full-page host overrides both together. */
+  background: #000;
   color-scheme: dark;
   -webkit-font-smoothing: antialiased;
   /* Disable the browser's landscape text autosizing ("text inflation"): without
@@ -29,23 +39,12 @@ body {
   touch-action: pan-x pan-y;
 }
 
-/* stylelint-disable declaration-no-important, time-min-milliseconds --
-   Canonical prefers-reduced-motion override. !important and near-zero
-   durations are required to forcibly defeat any animation/transition rule
-   regardless of specificity, which is the whole point of this a11y reset. */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-/* stylelint-enable declaration-no-important, time-min-milliseconds */
-
-/* ===== Fonts ===== */
+/* ===== Fonts =====
+   The terminal web font, served by the full-page host at /vendor/fonts (both
+   web-terminal-server and web-terminal-kiro ship these files there; see their
+   Dockerfiles). An embedder does not serve this file, so it never inherits
+   these URLs — it either ships its own @font-face or lets --font-mono fall back
+   to the platform monospace stack. */
 @font-face {
   font-family: "MonaspiceNe NFM";
   src: url("/vendor/fonts/MonaspiceNeNerdFontMono-Regular.otf") format("opentype");