@gemboss/ui 0.2.0 → 0.3.0

package/src/assistant.css

@@ -74,6 +74,7 @@
    degrading to instant is the right failure for chrome nobody asked to watch. */
 @starting-style {
   .gb-dock-dock, .gb-dock-mini { transform: translateY(10px); opacity: 0; }
+  .gb-dock-side { transform: translateX(12px); opacity: 0; }
 }
 /* Nothing animates while a pointer is setting the numbers — see `dragging` in the host. */
 .gb-dock-dragging, .gb-dock-dragging * { transition: none !important; }
@@ -112,6 +113,66 @@
   background: var(--gemboss-app-bg);
 }
 
+/* ── Side: a full-height panel pinned to the right edge (01/10/2026) ─────────────────────────────
+   The third working shape, beside the popup and full screen: a long conversation next to the screen
+   it is about. Opt-in per surface (`<AssistantHost allowSide>`), because unlike the popup it TAKES
+   ROOM — the page beside it moves over (rule below), so nothing under it is hidden. That is why the
+   surface is solid rather than frosted: nothing sits behind it to show through.
+   Above `.gemboss-route-shell` (5), so the panel stays put while routes change — a sidebar that
+   vanishes on every click is a popup with extra steps. BELOW the topbar (300): the account menu
+   opens down out of the topbar's right end, exactly where this panel starts, and at the popup's 320
+   the menu fell behind the panel (review). 290 still clears the desktop invite (260/280). The host
+   is rendered inside `main` (AppShell's slot), which works because `main` makes no stacking context
+   or containing block; a surface that gives its `main` a transform or z-index must mount it outside. */
+.gb-dock-side {
+  z-index: 290;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  width: var(--gb-dock-side-w, 400px);
+  background: var(--gemboss-surface);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border: 0;
+  border-left: 1px solid var(--gemboss-divider);
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;         /* the seam's touch band reaches 14px past the left edge */
+}
+.gb-dock-side .gb-dock-body, .gb-dock-side .gb-dock-pane { overflow: hidden; }
+/* The header does not drag a panel that is pinned. */
+.gb-dock-side .gb-dock-header { cursor: default; touch-action: auto; }
+/* The word for what the dot already says stands down here, as it does in a popup under 420px: the panel has
+   five controls in its header, and the title needs the room (measured: "Gem assi…" / "Re…" at 400). Visually
+   only — the dot is aria-hidden, so the word is the one place a screen reader hears "Working" (review #3622). */
+.gb-dock-side .gb-dock-status {
+  flex: 0 0 auto; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.gb-dock-side .gb-dock-header:active { cursor: default; }
+/* The seam: the panel's left edge, the fleet's one `.ui-resizer` (ui.css draws the grip). A 5px strip
+   centred on the border, ABOVE the page beside it. */
+/* `.gb-dock-side >` is not decoration: `.ui-resizer { position: relative }` (ui.css) has the weight of one
+   class too, and which file a bundler loads last would decide whether the seam is a 5px strip or a 0px
+   line nobody can grab. */
+.gb-dock-side > .gb-dock-sidegrip {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  width: 5px;
+  z-index: 3;
+}
+/* The page makes room. `margin-right`, not padding: main's padding is set by four rules in shell.css
+   and a fifth here would fight them. The provider puts the class and the width on <body>; the default
+   `bodyClassPrefix` is `gemboss-assistant` — a surface with another prefix writes its own copy of this
+   one rule. No transition: the seam is set from a pointer, and a page that trails the finger is the
+   bug `.gb-dock` already avoids. */
+@media (min-width: 1100px) {
+  body.gemboss-assistant-side .gemboss-platform-main { margin-right: var(--gb-assistant-side-w, 400px); }
+}
+
+
 /* ── Full: the one control full screen needs — the way back to the popup ──────────────────────
    Floated over the chat's own header, whose right half is empty, rather than given a bar of its
    own: a whole strip of chrome for one button would push the conversation down on every screen. */
@@ -261,7 +322,10 @@
   white-space: nowrap;
 }
 .gb-dock-header:active { cursor: grabbing; }
-.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; }
+/* `margin-left: auto`: the status word was the only thing that stretched, so wherever it stands down (a popup under
+   420px, the side panel) the controls followed the title instead of the right edge — 350px adrift in a 720px panel
+   (review #3622). With the word showing, it still takes the free space first and nothing moves. */
+.gb-dock-actions { display: flex; align-items: center; gap: 2px; cursor: default; margin-left: auto; }
 /* One ACTION, then the three WINDOW controls — ordered by how much each changes the window: bigger,
    smaller, gone. The gap is what says they are two different kinds of button; without it four icons
    in a row read as one undifferentiated strip, which is what "các icon đang không đồng đều" was
@@ -404,4 +468,29 @@
     bottom: 0;
     border-radius: 0;
   }
+  /* No room beside a phone screen: the side panel takes the screen, the way full does, and there is
+     nothing to drag. The page is not pushed (the rule above stops at 761). */
+  .gb-dock-side {
+    left: 0;
+    right: 0;
+    width: auto;
+    border-left: 0;
+    border-radius: 0;        /* the phone .gb-dock rule above rounds the top; this panel is the screen */
+  }
+  .gb-dock-sidegrip { display: none; }
+  /* …so the button that pins it there would only say "full screen" a second time. */
+  .gb-dock-pinside { display: none; }
+}
+
+/* 1100 = rail 240 + the panel's narrowest 380 + the page's narrowest 480 (SIDE_MIN_WIDTH, SIDE_PAGE_MIN in
+   assistant/dock.ts). Below it the two do not fit side by side — MEASURED at 768: pushed, the page kept
+   120px and its table ran under the panel. So between the phone and 1100 the panel covers the content
+   area the way full screen does, nothing is pushed, there is no seam to drag, and the popup does not
+   offer to pin.
+   AT THE END OF THE FILE on purpose: `.gb-dock-icon { display: grid }` comes later than the side
+   section and has the same weight, so placed there this block lost and the pin still showed at 768
+   (measured). */
+@media (min-width: 761px) and (max-width: 1099.98px) {
+  .gb-dock-side { left: 240px; width: auto; }
+  .gb-dock-side .gb-dock-sidegrip, .gb-dock-pinside { display: none; }
 }

package/src/chat-composer.css

@@ -0,0 +1,110 @@
+/*
+ * The chat COMPOSER — @gemboss/ui (moved from apps/admin/src/components/chat/chat-composer.css, 02/10/2026).
+ *
+ * The toolbar row under the text box (chips lead, tools, status, the one action pinned right), the one-row
+ * layout when there are no chips, the engine picker's layout and the Stop button. A second surface needs the
+ * toolbar — gemcare's assistant composer is a text box and a send button, i.e. the one-row case — and a copy
+ * would be a second owner. The box itself (`form.gemboss-ec-input`, its textarea and send button) is in chat.css.
+ *
+ * A SEPARATE file from chat.css on purpose, as it was a separate file in the admin: chat.css rides the shell's
+ * first load on every screen, while this sheet follows the chat chunk — the admin imports it from ChatComposer
+ * and EnginePicker, not from the layout (the shell sat at 239.1 / 240 KB brotli when this moved). Other surfaces
+ * get it inside gemboss-ui.css. Rules and their order are unchanged.
+ *
+ * Every selector here names a composer-only class (chiplabel · chipmark · chipsub · enginepick · enginepick-btn ·
+ * stop · toolbar · toolbar-lead · toolbar-tools), so a rule only matches while a composer is on screen.
+ */
+
+/* The toolbar row: chips on the left, then status, then the one action button pinned right.
+   `align-items: center` — the old row was `flex-end`, so 28px chips sat on the BOTTOM edge of a 44px
+   button and their centres ran 8px below its centre. Measured at 1366: chips cy 819, send cy 811.
+   The lead group is the only thing that shrinks. Send is `flex: none` and the chips inside the lead
+   carry `min-width: 0`, so a narrow composer ellipsises a label instead of pushing send off the row. */
+.gemboss-ec-toolbar { flex: 1 0 100%; display: flex; align-items: center; gap: 4px; min-width: 0; }
+.gemboss-ec-toolbar-lead { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
+/* The lead GROWS, and that is what pins status + action to the right edge. With nothing in it (a
+   browser tab has no engine picker, a driver without work mode has no select) it is removed, and
+   whatever follows takes the auto margin instead. */
+.gemboss-ec-toolbar-lead:empty { display: none; }
+.gemboss-ec-toolbar-lead:empty + * { margin-left: auto; }
+/* TOOLS ARE NOT CHIPS. The 📎 lives here, never in the lead: the composer gate reads `leading` as the
+   chip strip twice over — `edge` wants the first chip's text flush with the typed text, and `oneRow`
+   only runs when the lead is EMPTY. A button parked in the lead pushed the chips 47px right AND left
+   `oneRow` unable to fail at all; the gate's own negative control said so out loud
+   ("MÙ với oneRow — đối chứng ĐÃ QUAN SÁT ĐƯỢC và vẫn xanh") once the breakage stopped registering.
+   `flex: none` so it never steals the shrink budget the lead needs to ellipsise a long chip label. */
+.gemboss-ec-toolbar-tools { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; }
+.gemboss-ec-toolbar-tools:empty { display: none; }
+/* NO CHIPS ⇒ ONE ROW. Product Studio has nothing in its lead, and it still spent a whole 44px row on
+   a lone send button beside empty space — 99-120px tall for a one-line box. The text box shares the
+   row now and send sits at its bottom edge, where a growing message keeps it. */
+.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) { flex-wrap: nowrap; align-items: flex-end; }
+.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) > textarea { flex: 1 1 0; }
+.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) > .gemboss-ec-toolbar { flex: 0 0 auto; }
+/* The engine picker is a `gemboss-ec-chipctl` like the select beside it — its colour, weight, padding
+   and hover all come from that one rule. What is left here is layout: Popover wraps the activator in an
+   element of its own, and the chip can only shrink if every box between it and the toolbar can.
+   DESCENDANT, not child, for that reason — `>` matched nothing when the button sat inside Polaris'
+   wrapper, measured, after the first attempt left it unstyled. */
+.gemboss-ec-enginepick { flex: 0 3 auto; min-width: 0; display: inline-flex; }
+.gemboss-ec-enginepick > * { min-width: 0; max-width: 100%; display: flex; }
+.gemboss-ec-enginepick button {
+  min-width: 0; max-width: 100%;
+  /* The same caret the work-mode select draws, at the same inset, so the two chips read as one type. */
+  padding-right: 24px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 7px center;
+}
+.gemboss-ec-chiplabel { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gemboss-ec-chipmark { display: none; }
+.gemboss-ec-chipmark .gemboss-engine-mark { display: block; width: 16px; height: 16px; margin: 2px 0; }
+/* The steps ChatComposer measured its way down to (data-density on the form). The ellipsis above stays
+   as the floor for an engine with no mark, never as the plan. */
+.gemboss-ec-input:not([data-density="full"]) .gemboss-ec-chipsub { display: none; }
+.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chiplabel { display: none; }
+.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chipmark { display: block; }
+/* A mark does not ellipsise, so once the chip IS the mark it holds its width — shrunk further it slid
+   under the mode chip beside it. The overflow that leaves is what tells ChatComposer to step on. */
+.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick:has(.has-mark) { flex-shrink: 0; }
+/* Open: it is showing a popover, so it stops being quiet. */
+.gemboss-ec-enginepick button[aria-expanded="true"] {
+  color: var(--gemboss-text); background-color: var(--gemboss-hover, rgba(0,0,0,0.05));
+}
+@media (pointer: coarse) {
+  /* SCOPED, and that word is load-bearing — this line was DEAD as `.gemboss-ec-stop`.
+     A media query adds no specificity, so the unscoped rule for the same class, declared ~1800 lines
+     LATER at its mouse size, beat this one on source order alone. Measured
+     2026-09-09 in a real coarse-pointer context: `matchMedia('(pointer: coarse)').matches === true`
+     and the computed width unchanged at its mouse size. Every phone got a Stop button ten pixels
+     under the target, while the rule meant to
+     fix that sat here reading as done — and the source test beside this block could not see it,
+     because a name being PRESENT is not the same fact as a rule WINNING.
+     `.gemboss-ec-input` is the same idiom the attach button above already uses for the same reason. */
+  .gemboss-ec-input .gemboss-ec-stop { width: 44px; height: 44px; min-width: 44px; }
+  /* SCOPED for the reason above: this control's own look is declared later, in the shell sheet. */
+  .gemboss-ec-input .gemboss-ec-stop-send { min-height: 44px; }
+  .gemboss-ec-enginepick button { min-height: 44px; }
+}
+/* Sized like the send button it replaces, so the composer does not reflow when a turn starts —
+ * a control that moves under the cursor is a control people misclick. So it is THE SAME CIRCLE AS SEND
+ * — same 44px, same 50% radius, only the colour and the glyph change. It used to be a 32px red
+ * rounded square beside a 44px round send: two shapes, two sizes, one slot. */
+.gemboss-ec-stop {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  border: none;
+  border-radius: 50%;
+  background: var(--gemboss-critical, #d72c0d);
+  color: #fff;
+  cursor: pointer;
+}
+.gemboss-ec-stop svg { width: 12px; height: 12px; fill: currentColor; }
+.gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
+.gemboss-ec-stop:hover { filter: brightness(1.08); }
+.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }