@aparte/core 0.13.1 → 0.14.0

package/dist/index.css

@@ -167,6 +167,10 @@
   --aparte-focus-outline-width: 2px;
   /* Scrollbars rendered by the library. */
   --aparte-scrollbar-width: 6px;
+  /* The transcript's scrollbar track; the thumb is derived from the neutral, in the
+     derived layer. A host page with a scrollbar of its own (the docs site has one)
+     sets both so the chat's does not read as a second, foreign scrollbar. */
+  --aparte-scrollbar-track: transparent;
   /* Comfortable hit-area on coarse (touch) pointers. */
   --aparte-touch-target-size: 44px;
 
@@ -202,6 +206,11 @@
 
   /* Action Bar */
   --aparte-action-bar-btn-size: 28px;
+  /* The mark (display/mark.css): how much of its intent a marked row's ground takes,
+     and how wide the bar on its start edge is. One pair for the select's chosen option,
+     the checked field choice, the active conversation and an answered question. */
+  --aparte-mark-tint: 18%;
+  --aparte-mark-bar: 2px;
 
   /* Branch Picker */
   --aparte-branch-picker-btn-size: 20px;
@@ -387,12 +396,12 @@
      a shadow tuned for a light ground is no shadow at all on a dark one, which is how
      the select's dropdown lost its lift in dark mode until it was caught. */
   --aparte-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  --aparte-popover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --aparte-popover-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16);
   --aparte-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
   --aparte-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   --aparte-range-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 
-  --aparte-select-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --aparte-select-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16);
   --aparte-select-min-width: 200px;
   --aparte-select-dropdown-max-height: 300px;
   --aparte-select-status-dot-size: 8px;
@@ -440,8 +449,6 @@
   --aparte-art-file-icon-size: 40px;
   --aparte-art-file-preview-padding: 20px;
   --aparte-art-file-error-padding-inline: 18px;
-  --aparte-pw-min-height: 28px;
-  --aparte-pw-dot-size: 8px;
 }
 
 /* =========================================
@@ -477,9 +484,9 @@
 
   /* Scroll-to-bottom button */
   --aparte-scroll-btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
-  --aparte-select-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --aparte-select-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
   --aparte-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
-  --aparte-popover-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --aparte-popover-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
   --aparte-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   --aparte-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   --aparte-range-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -602,6 +609,7 @@ aparte-chat {
   --aparte-elic-step-padding: var(--aparte-space-2) var(--aparte-space-1);
   --aparte-elic-step-gap: var(--aparte-space-7);
   --aparte-viewport-padding: var(--aparte-space-8);
+  --aparte-scrollbar-thumb: var(--aparte-neutral);
   --aparte-input-padding-x: var(--aparte-space-6);
   --aparte-input-padding-y: var(--aparte-space-5);
   --aparte-conv-list-gap: var(--aparte-space-1);
@@ -980,8 +988,8 @@ aparte-conversation-list {
    curve, not a differently-named copy of this one. */
 
 /* One pulse for every dot the library shows. There were three keyframes doing the
-   same thing at slightly different rhythms; the pipeline's travelling wave comes from
-   the animation-delay on its second and third dot, not from a skewed curve. */
+   same thing at slightly different rhythms; a travelling wave, where a row wants one,
+   comes from an animation-delay on its later dots, not from a skewed curve. */
 @keyframes aparte-pulse {
   0%, 100% { opacity: 0.3; transform: scale(0.85); }
   50%      { opacity: 1;   transform: scale(1.1);  }
@@ -2076,7 +2084,8 @@ aparte-conversation-list {
     background var(--aparte-duration-fast) var(--aparte-ease),
     border-color var(--aparte-duration-fast) var(--aparte-ease);
 }
-.aparte-field-choice:hover { background: var(--aparte-surface-2); }
+/* Not on a chosen row: its mark (below) is what the pointer must not erase. */
+.aparte-field-choice:not(:has(:checked)):not(.aparte-field-choice--selected):hover { background: var(--aparte-surface-2); }
 
 /* Boxed — each row carries its own edge, for a list that must read as a set of
    separate targets rather than a menu. */
@@ -2084,9 +2093,31 @@ aparte-conversation-list {
 
 /* Selected. `:has()` covers the native case with no class to toggle; the explicit
    modifier covers a row whose state lives elsewhere — a button acting as an option,
-   where there is no checked input to look at. */
+   where there is no checked input to look at. It wears the mark (display/mark.css):
+   the tint and the start bar the select's chosen option wears, so a picked choice in
+   an elicitation panel and a picked option in a dropdown say it the same way. The
+   border stays its own — it was the only signal before, and a boxed row keeps its
+   edge coloured. Written as the mark's declarations rather than its class because a
+   `:has()` state cannot add a class to itself; the modifier is doubled so both halves
+   of this rule sit at (0,2,0), above the hover. The bar is the mark's pseudo-element,
+   on the logical start edge — see display/mark.css for why not a shadow. */
 .aparte-field-choice:has(:checked),
-.aparte-field-choice--selected { border-color: var(--aparte-primary); }
+.aparte-field-choice.aparte-field-choice--selected {
+  position: relative;
+  border-color: var(--aparte-primary);
+  background: color-mix(in srgb, var(--aparte-primary) var(--aparte-mark-tint), transparent);
+}
+
+.aparte-field-choice:has(:checked)::before,
+.aparte-field-choice.aparte-field-choice--selected::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--aparte-mark-bar);
+  background: var(--aparte-primary-ink);
+  pointer-events: none;
+}
 
 .aparte-field-choice:has(:disabled),
 .aparte-field-choice[aria-disabled='true'] {
@@ -2512,6 +2543,98 @@ aparte-icon {
 @media (forced-colors: active) {
   .aparte-thumbnail { border-color: currentColor; }
 }
+
+/* ── The attachment strip and its tiles ─────────────────────────────────────────
+   Shared by the composer preview and the strip under a sent message: the bubble
+   emits the very same classes. These rules lived in composer.css, a COMPONENT sheet,
+   so the bubble — which imports no composer — rendered its file chips bare. A recipe
+   lives in the display layer; the composer keeps only what is its own (the ✗ button). */
+.aparte-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  /* The strip sits directly above the message bubble and belongs to it, so it
+     must share the bubble's edge. The user bubble hugs its text on the LEADING
+     edge (AI-chat convention, see .aparte-message-content below), so anchoring
+     the strip to the trailing edge would split one message across both sides. */
+  justify-content: flex-start;
+  gap: var(--aparte-space-3);
+  margin-bottom: var(--aparte-space-4);
+  /* Really small tiles inside the conversation. */
+  --aparte-attachment-image-size: 40px;
+  /* Many attachments → cap the height and scroll instead of growing forever. */
+  max-height: var(--aparte-attachments-max-height);
+  overflow-y: auto;
+}
+
+/* The class `display: flex` above would otherwise override the `hidden`
+   attribute — restore it so an empty attachment strip takes no space. */
+.aparte-attachments[hidden] {
+  display: none;
+}
+
+/* ── Attachment thumbnail tile ──────────────────────────────────────────────
+   Shared by the composer attachment preview and the sent-message attachment
+   strip. A square that shows the image itself (or a file glyph); the filename
+   and — in the composer — a remove button surface on hover. */
+/* The tile is `.aparte-thumbnail`; the composer only sets its own measurements and
+   the quieter ground an attachment strip uses. */
+.aparte-thumb {
+  --aparte-thumbnail-size: var(--aparte-attachment-image-size);
+  --aparte-thumbnail-radius: var(--aparte-thumb-radius);
+  --aparte-thumbnail-bg: var(--aparte-attachment-chip-bg);
+  --aparte-thumbnail-border: var(--aparte-attachment-chip-border);
+}
+
+/* Only an image tile the app declared it can preview is a button — see
+   aparteGlobalConfig.setHostHandlers(). Undeclared, it is a picture, not a control. */
+.aparte-thumb--image[role='button'] {
+  cursor: pointer;
+}
+
+.aparte-thumb--image[role='button']:focus-visible {
+  box-shadow: var(--aparte-focus-ring);
+}
+
+.aparte-thumb__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.aparte-thumb--file {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aparte-thumb__ext {
+  font-size: var(--aparte-font-size-xs);
+  font-weight: var(--aparte-font-weight-bold);
+  letter-spacing: 0.03em;
+  color: var(--aparte-text-muted);
+}
+
+.aparte-thumb__name {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: var(--aparte-thumb-name-padding);
+  font-size: var(--aparte-font-size-2xs);
+  line-height: var(--aparte-line-height-tight);
+  color: var(--aparte-thumb-name-color);
+  background: var(--aparte-thumb-name-scrim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0;
+  transition: opacity var(--aparte-duration-base) var(--aparte-ease);
+  pointer-events: none;
+}
+.aparte-thumb:hover .aparte-thumb__name {
+  opacity: 1;
+}
 /* =========================================
    aparte-spinner — a rotating indicator
    =========================================
@@ -2653,29 +2776,6 @@ aparte-icon {
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
-
-/* ── The zero-dependency fallbacks ────────────────────────────────────────────
-   What `getSkeleton()` returns when no skeleton provider is registered. They used
-   to carry their look in a `style=""` attribute — six inline declarations of
-   Tailwind-slate hex (`#9ca3af`, `#1e293b`, `#64748b`), the exact palette this
-   theme replaced. Three consequences, and the first is the one that matters: an
-   inline style cannot be overridden by a consumer's stylesheet, so a dark-theme
-   host got a light-grey label it had no way to reach. The second: hex in a `.ts`
-   is invisible to `check:derived-vars`, which reads only `styles/`. The third:
-   they had drifted from the recipe above, which already reads tokens.
-
-   Structure only, still — no shimmer, no animation. That is what makes them the
-   fallback rather than a second skeleton implementation. */
-.aparte-skeleton-fallback {
-  padding: var(--aparte-space-4);
-  color: var(--aparte-text-muted);
-}
-.aparte-skeleton-fallback--snug { padding: var(--aparte-space-3); }
-.aparte-skeleton-fallback--tight { padding: var(--aparte-space-2); }
-.aparte-skeleton-fallback--code {
-  background: var(--aparte-surface-2);
-  border-radius: var(--aparte-radius-md);
-}
 /* =========================================
    aparte-divider — horizontal, vertical, optionally labelled
    =========================================
@@ -2914,6 +3014,87 @@ aparte-icon {
   line-height: var(--aparte-line-height-none);
 }
 
+/*
+ * aparté — The mark: a row a list has settled on.
+ *
+ * One of the sheets split out of aparte.css. Order matters: src/index.ts imports
+ * them in the order listed there, and check:derived-vars reads them concatenated in
+ * that same order, the way a browser does.
+ *
+ * WHAT IT IS. A chosen option, an accepted answer, the conversation you are in: the
+ * one item among its peers that a decision landed on. Before this sheet the select
+ * drew it one way (an accent tint plus an inset bar on the start edge), the field
+ * choice another (a primary border), the conversation list a third (its own
+ * background and weight), and the ask-user receipt none at all — four vocabularies
+ * for one meaning, measured in the UI audit of 2026-08-28. The market agrees on two
+ * signals: a tint on the ground (Radix, shadcn, Material's state layer) and a bar on
+ * the row's start edge (GitHub Primer's ActionList). This recipe is both, on one
+ * intent axis, and every row that means "this one" wears it.
+ *
+ * THE AXIS. `--aparte-mark-intent` is the fill, primary by default: chosen. The
+ * modifiers set it to the theme's other masters — success for an answer that was
+ * given or a call that was approved, danger for a destructive outcome, neutral for
+ * the item you are merely in. `--quiet` is the outcome that did NOT happen: a declined
+ * request, a version superseded — no tint, no bar, the muted voice. The market never
+ * strikes through; neither does this.
+ *
+ * THE BAR IS DRAWN IN INK. The tint is the fill at 18%, which carries almost no
+ * contrast by itself (1.2:1 in the light theme); the bar is the whole non-text signal,
+ * so it reads `--aparte-mark-intent-ink` — the master's ink, the one the button and
+ * the badge already derive for text on a ground. The raw success fill measured 2.27:1
+ * on the light surface, under the 3:1 WCAG asks of a graphic; its ink is 7.1:1.
+ *
+ * THE BAR IS A PSEUDO-ELEMENT, NOT A SHADOW. An inset shadow knows only left and
+ * right, so a right-to-left row got its bar on the wrong edge unless a document-level
+ * `[dir="rtl"]` rule caught it — which a `dir` on the row itself, or `dir="auto"`,
+ * escapes. `inset-inline-start` is the start edge whatever the direction, at any level.
+ * Nothing shifts: the pseudo-element is out of the flow.
+ *
+ * THE MEASURES. `--aparte-mark-tint` and `--aparte-mark-bar` live in theme.css so a
+ * theme moves every mark at once.
+ */
+.aparte-mark {
+  --aparte-mark-intent: var(--aparte-primary);
+  --aparte-mark-intent-ink: var(--aparte-primary-ink);
+  position: relative;
+  background: color-mix(in srgb, var(--aparte-mark-intent) var(--aparte-mark-tint), transparent);
+}
+
+.aparte-mark::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--aparte-mark-bar);
+  background: var(--aparte-mark-intent-ink);
+  pointer-events: none;
+}
+
+.aparte-mark--success {
+  --aparte-mark-intent: var(--aparte-success);
+  --aparte-mark-intent-ink: var(--aparte-success-ink);
+}
+
+.aparte-mark--danger {
+  --aparte-mark-intent: var(--aparte-error);
+  --aparte-mark-intent-ink: var(--aparte-error-ink);
+}
+
+/* The neutral master has no derived ink; the fill is its own ink (5:1 light, 6.9:1 dark). */
+.aparte-mark--neutral {
+  --aparte-mark-intent: var(--aparte-neutral);
+  --aparte-mark-intent-ink: var(--aparte-neutral);
+}
+
+/* The outcome that did not happen. */
+.aparte-mark--quiet {
+  background: none;
+  color: var(--aparte-text-muted);
+}
+
+.aparte-mark--quiet::before {
+  display: none;
+}
 /*
  * aparté — layered surfaces. Ready-made classes for the things that float ABOVE the
  * transcript: tabs, an accordion, a dropdown menu, a popover, a tooltip.
@@ -3566,14 +3747,47 @@ aparte-select[disabled] .aparte-select-trigger {
     cursor: not-allowed;
 }
 
+/* The label is a grid with ONE cell: the visible text and, under it, a hidden stack of
+   every option's label. The stack sets the cell's width — the widest option's — so the
+   control keeps one width whatever is selected, like a native <select>; the text layer
+   ellipsises when a host constrains the control below that (`min-width: 0` is what lets
+   a flex item shrink at all). */
 .aparte-select-label {
     flex: 1;
+    min-width: 0;
+    display: grid;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     color: var(--aparte-select-text, var(--aparte-text));
 }
 
+.aparte-select-label > * {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+}
+
+.aparte-select-label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* `min-width: 0; overflow: hidden` on the stack is what keeps the ellipsis alive: a
+   grid item's automatic minimum size is its min-content — the widest nowrap label —
+   and that floored the label's track, so a host that constrained the control got a
+   hard clip mid-glyph instead of "…" (measured in Chromium: clientWidth 244 for a
+   140px control). Its max-content contribution, the one that sets the width, is
+   untouched. */
+.aparte-select-label-sizer {
+    display: grid;
+    min-width: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.aparte-select-label-sizer > span {
+    grid-area: 1 / 1;
+}
+
 .aparte-select-chevron {
     --aparte-icon-size: var(--aparte-icon-size-sm);
     flex-shrink: 0;
@@ -3647,15 +3861,30 @@ aparte-option[data-active] {
     box-shadow: inset 0 0 0 2px var(--aparte-primary);
 }
 
-/* Selected option: an accent TINT plus an accent bar, keeping the theme's own
-   text colour. A solid `--aparte-primary` fill with white text failed WCAG AA in
-   both themes (the brass accent is mid-luminance, so white sits around 3.4:1),
-   and an unreadable selected row is the one row that must be readable. Both
-   tokens stay overridable for a design that wants the solid fill back. */
+/* Selected option: the mark (display/mark.css) — an accent TINT plus an accent bar
+   on the start edge, keeping the theme's own text colour. A solid `--aparte-primary`
+   fill with white text failed WCAG AA in both themes (the brass accent is
+   mid-luminance, so white sits around 3.4:1), and an unreadable selected row is the
+   one row that must be readable. The measures are the mark's tokens, so this option,
+   a checked field choice and the active conversation move together; the option's own
+   two tokens stay overridable for a design that wants the solid fill back. Not the
+   class: an option's selected state is an attribute the select writes, and a second
+   name for it on the same element would be one more thing to keep in step. */
 aparte-option[selected] {
-    background: var(--aparte-select-option-selected, color-mix(in srgb, var(--aparte-primary) 18%, transparent));
+    position: relative;
+    background: var(--aparte-select-option-selected, color-mix(in srgb, var(--aparte-primary) var(--aparte-mark-tint), transparent));
     color: var(--aparte-select-option-selected-text, var(--aparte-select-text, var(--aparte-text)));
-    box-shadow: inset 2px 0 0 var(--aparte-primary);
+}
+
+/* The bar: the mark's pseudo-element on the logical start edge (see display/mark.css). */
+aparte-option[selected]::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--aparte-mark-bar);
+    background: var(--aparte-primary-ink);
+    pointer-events: none;
 }
 
 aparte-option[disabled] {
@@ -3720,16 +3949,12 @@ aparte-optgroup[collapsed] .aparte-optgroup-chevron {
     transform: rotate(-90deg);
 }
 
-/* Dark mode */
-[data-aparte-theme="dark"] aparte-select .aparte-select-trigger,
-[data-aparte-theme="dark"] aparte-select .aparte-select-dropdown {
-    background: var(--aparte-select-bg, var(--aparte-surface-1));
-    border-color: var(--aparte-select-border, var(--aparte-border));
-}
-
-[data-aparte-theme="dark"] aparte-option:hover {
-    background: var(--aparte-select-option-hover, var(--aparte-surface-2));
-}
+/* No dark block: every colour above reads a token the derived layer re-anchors on
+   `[data-aparte-theme]`, so `--aparte-surface-1` IS the dark surface there. The block
+   that used to sit here restated the trigger's and the panel's backgrounds from
+   `--aparte-select-bg` — the TRIGGER's token — so a consumer making the trigger
+   transparent (a pill on a coloured page) got a see-through panel in the dark, with
+   the page's text showing through the options. */
 
 .aparte-optgroup-loader {
     padding: var(--aparte-space-4) var(--aparte-space-6);
@@ -3896,7 +4121,7 @@ aparte-chat-viewport {
   overflow-x: hidden;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--aparte-neutral) transparent;
+  scrollbar-color: var(--aparte-scrollbar-thumb) var(--aparte-scrollbar-track);
 }
 
 .aparte-viewport-container::-webkit-scrollbar {
@@ -3904,7 +4129,14 @@ aparte-chat-viewport {
 }
 
 .aparte-viewport-container::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--aparte-scrollbar-track);
+}
+
+/* The thumb too: the token pair was half-wired on the legacy WebKit path — the
+   standard `scrollbar-color` read both, this block read only the track. */
+.aparte-viewport-container::-webkit-scrollbar-thumb,
+aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
+  background: var(--aparte-scrollbar-thumb);
 }
 
 /* ─── Scroll-to-bottom button ─────────────────────────────────────────────── */
@@ -3963,7 +4195,7 @@ aparte-chat-viewport[framework-managed] {
   padding: var(--aparte-viewport-padding);
   padding-bottom: calc(var(--aparte-viewport-padding) + var(--aparte-fw-spacer, 0px));
   scrollbar-width: thin;
-  scrollbar-color: var(--aparte-neutral) transparent;
+  scrollbar-color: var(--aparte-scrollbar-thumb) var(--aparte-scrollbar-track);
 }
 
 /* The framework wrapper renders bubbles as DIRECT flex children of the viewport
@@ -3981,7 +4213,7 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar {
 }
 
 aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--aparte-scrollbar-track);
 }
 
 /* The scroll button lives INSIDE the scrolling host here (last child), so it
@@ -4127,6 +4359,8 @@ aparte-chat-bubble {
   max-width: var(--aparte-message-max-width);
   margin: 0 auto;
   min-width: 0;
+  /* The containing block of a floating footer — see the action bar below. */
+  position: relative;
 }
 
 /* The avatar's shape, size and type live in `display.css` — a message avatar IS an
@@ -4222,6 +4456,58 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
   display: none;
 }
 
+/* An older message reserves no row for its actions.
+ *
+ * Measured (UI audit 2026-08-28, §8.3 #7): 103px between the text of one turn and the
+ * text of the next, and 34 of them were this footer — 28px of buttons nobody could
+ * see plus its margin, under EVERY message, so that the bar could appear on hover
+ * without moving anything. The market floats it instead. It cannot float below the
+ * message here: the bubble is a paint-containment boundary (`content-visibility`),
+ * so anything outside its box is clipped. It floats INSIDE the box, over the header
+ * row's empty end — the one place it overlaps no text — as the small bordered
+ * toolbar a Slack message shows on hover.
+ *
+ * Three footers stay in the flow. The last assistant message: its bar is always on
+ * show, under the reply, where every chat puts it. A message whose branch picker is
+ * visible (`data-branches`, written by the bubble beside the picker's own state): the
+ * picker must stay in view. And every message under a pointer that cannot hover, or
+ * that is coarse — `(hover: hover) and (pointer: fine)`, because the two features are
+ * independent and a TV remote reports both hover and coarse; responsive.css gives a
+ * coarse pointer a 44px bar in the flow, and floated over the header row a 44px bar
+ * would sit on the first line of the reply.
+ *
+ * The bar's place depends on the header row: 8px from the top, it fills the empty end
+ * of the "Assistant · 12:34" line and clears the text by the header's height. A host
+ * that hides `.aparte-header` moves that line away and should move the bar too
+ * (`.aparte-footer { top: … }`), or keep it in the flow.
+ *
+ * Invisible but NOT inert, on purpose. `opacity: 0` keeps the bar hit-testable, so a
+ * drag-select started on the empty end of the header row begins on a button nobody
+ * sees — a review flagged it, and `pointer-events: none` until `:hover` was tried. It
+ * made the bar unreachable to anything that clicks without hovering first: Playwright
+ * (which hit-tests the point before it moves the mouse — the header "intercepted" the
+ * edit button on four projects), and with it voice control and switch access, which
+ * synthesise a click the same way. A control only a hover can enable is a control
+ * some users cannot reach; a phantom button on an empty header end is not. */
+@media (hover: hover) and (pointer: fine) {
+  aparte-chat-bubble:not(:last-of-type) .aparte-message:not([data-branches]) .aparte-footer,
+  aparte-chat-bubble:last-of-type .aparte-message[data-role="user"]:not([data-branches]) .aparte-footer {
+    position: absolute;
+    top: var(--aparte-space-4);
+    inset-inline-end: var(--aparte-space-6);
+    margin: 0;
+    z-index: 1;
+  }
+
+  aparte-chat-bubble:not(:last-of-type) .aparte-message:not([data-branches]) .aparte-action-bar,
+  aparte-chat-bubble:last-of-type .aparte-message[data-role="user"]:not([data-branches]) .aparte-action-bar {
+    background: var(--aparte-surface-1);
+    border: var(--aparte-border-width) solid var(--aparte-border);
+    border-radius: var(--aparte-radius-md);
+    box-shadow: var(--aparte-popover-shadow);
+  }
+}
+
 .aparte-action-btn {
   color: var(--aparte-action-bar-btn-color);
   --aparte-btn-radius: var(--aparte-radius-action-btn);
@@ -4336,6 +4622,15 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
 .aparte-message[data-error] .aparte-avatar {
   box-shadow: var(--aparte-avatar-error-ring);
 }
+
+/* An empty, settled turn renders no chrome. The bubble sets `data-empty` when it has
+   no content, no segments, no attachments and is not streaming — a tool-only turn, or
+   one stopped before its first token — and the whole row goes, name and timestamp
+   included, instead of an orphan header floating over nothing. The element stays in
+   the DOM (streaming and the action bar address it by id), it just does not paint. */
+.aparte-message[data-empty] {
+  display: none;
+}
 /*
  * aparté — The composer and everything it holds: editor, send, attachments, model picker.
  *
@@ -4404,92 +4699,6 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
    Attachments
    ========================================= */
 
-.aparte-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  /* The strip sits directly above the message bubble and belongs to it, so it
-     must share the bubble's edge. The user bubble hugs its text on the LEADING
-     edge (AI-chat convention, see .aparte-message-content below), so anchoring
-     the strip to the trailing edge would split one message across both sides. */
-  justify-content: flex-start;
-  gap: var(--aparte-space-3);
-  margin-bottom: var(--aparte-space-4);
-  /* Really small tiles inside the conversation. */
-  --aparte-attachment-image-size: 40px;
-  /* Many attachments → cap the height and scroll instead of growing forever. */
-  max-height: var(--aparte-attachments-max-height);
-  overflow-y: auto;
-}
-
-/* The class `display: flex` above would otherwise override the `hidden`
-   attribute — restore it so an empty attachment strip takes no space. */
-.aparte-attachments[hidden] {
-  display: none;
-}
-
-/* ── Attachment thumbnail tile ──────────────────────────────────────────────
-   Shared by the composer attachment preview and the sent-message attachment
-   strip. A square that shows the image itself (or a file glyph); the filename
-   and — in the composer — a remove button surface on hover. */
-/* The tile is `.aparte-thumbnail`; the composer only sets its own measurements and
-   the quieter ground an attachment strip uses. */
-.aparte-thumb {
-  --aparte-thumbnail-size: var(--aparte-attachment-image-size);
-  --aparte-thumbnail-radius: var(--aparte-thumb-radius);
-  --aparte-thumbnail-bg: var(--aparte-attachment-chip-bg);
-  --aparte-thumbnail-border: var(--aparte-attachment-chip-border);
-}
-
-/* Only an image tile the app declared it can preview is a button — see
-   aparteGlobalConfig.setHostHandlers(). Undeclared, it is a picture, not a control. */
-.aparte-thumb--image[role='button'] {
-  cursor: pointer;
-}
-
-.aparte-thumb--image[role='button']:focus-visible {
-  box-shadow: var(--aparte-focus-ring);
-}
-
-.aparte-thumb__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.aparte-thumb--file {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.aparte-thumb__ext {
-  font-size: var(--aparte-font-size-xs);
-  font-weight: var(--aparte-font-weight-bold);
-  letter-spacing: 0.03em;
-  color: var(--aparte-text-muted);
-}
-
-.aparte-thumb__name {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: var(--aparte-thumb-name-padding);
-  font-size: var(--aparte-font-size-2xs);
-  line-height: var(--aparte-line-height-tight);
-  color: var(--aparte-thumb-name-color);
-  background: var(--aparte-thumb-name-scrim);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  opacity: 0;
-  transition: opacity var(--aparte-duration-base) var(--aparte-ease);
-  pointer-events: none;
-}
-.aparte-thumb:hover .aparte-thumb__name {
-  opacity: 1;
-}
 
 .aparte-thumb__remove {
   /* Icon size comes from `--sm` — see `--aparte-btn-icon-size` in button.css. */
@@ -4962,7 +5171,7 @@ aparte-composer-cancel .aparte-cc-button:hover {
   flex: 0 0 auto;
 }
 /*
- * aparté — Segment renderers: thinking, code, tool call, error, pipeline.
+ * aparté — Segment renderers: thinking, code, tool call, error.
  *
  * One of the sheets split out of aparte.css. Order matters: src/index.ts imports
  * them in the order listed there, and check:derived-vars reads them concatenated in
@@ -5176,8 +5385,13 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
    0,2,0 beats the base rule's 0,1,0 and source order puts rejected/aborted last. Core
    itself documents data-status as a free-form host attribute on <aparte-option>. */
 .aparte-segment-tool-call[data-status="resolved"] .aparte-tool-state { color: var(--aparte-success-ink); }
-.aparte-segment-tool-call[data-status="rejected"] .aparte-tool-state,
-.aparte-segment-tool-call[data-status="aborted"] .aparte-tool-state { color: var(--aparte-error-ink); }
+/* Rejected and aborted have NO rule: they keep the base's muted ink. They used to
+   share one — red, the error ink — which said "something went wrong" about a call the
+   user declined or a run they stopped, and made the two indistinguishable. The market
+   (UI audit 2026-08-28, coherence pass) keeps red for what is destructive and shows an
+   outcome that did not happen in the muted voice with a glyph: the renderer draws a
+   cross for rejected and a stop square for aborted, so the word and the glyph tell them
+   apart, not a colour that meant a third thing. */
 /* The Approve / Reject button rules were here. They moved with the buttons, to
    .aparte-approval-option in components/elicitation.css - and what stayed behind was a
    leftover: a rule tinting .aparte-tool-label's border while a decision was pending,
@@ -5235,7 +5449,7 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
-   Segment renderers — tool call · artifact card · pipeline waiting
+   Segment renderers — tool call · artifact card
 
    These three shipped their CSS from `getStyles()` until now: a template literal
    in the renderer's own .ts file, injected into <head> at runtime. That seam is
@@ -5265,27 +5479,6 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
    ───────────────────────────────────────────────────────────────────────────── */
 
 /* Tool call */
-.aparte-segment-pipeline-waiting {
-    display: flex;
-    align-items: center;
-    gap: var(--aparte-space-3);
-    padding: var(--aparte-space-3) var(--aparte-space-1);
-    min-height: var(--aparte-pw-min-height);
-}
-/* The geometry is `.aparte-dot`. What stays is this row's own: its size, its resting
-   colour, and a STAGGERED pulse — three dots on delays read as a wave travelling, which
-   a symmetric breath does not. */
-.aparte-pw-dot {
-    --aparte-status-dot-size: var(--aparte-pw-dot-size);
-    --aparte-status-color: var(--aparte-text-muted);
-    opacity: 0.3;
-}
-.aparte-pw-dot:nth-child(2) { animation-delay: var(--aparte-duration-slow); }
-.aparte-pw-dot:nth-child(3) { animation-delay: 0.4s; }
-
-/* =========================================
-   Provider-HTML overflow guards
-   ========================================= */
 /* Markdown providers inject arbitrary HTML into .aparte-segment-text, and the bubble
    clips overflow (`aparte-chat-bubble { overflow: hidden }`) — without these
    guards a wide image or table is silently cut at the bubble edge. */
@@ -5661,7 +5854,12 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
   --aparte-field-choice-radius: var(--aparte-elic-option-radius);
 }
 
-.aparte-elic-option:not(.aparte-elic-option--command):hover {
+/* Blind to the chosen row: this rule is (0,3,0) in a sheet imported after field.css,
+   so it used to out-specify the mark a checked choice wears there — hover the option
+   you picked and its tint and primary border went back to the plain hover ground
+   (measured in Chromium by the coherence pass's reviewer). The recipe's own hover is
+   scoped the same way; a chosen row keeps saying it is chosen under the pointer. */
+.aparte-elic-option:not(.aparte-elic-option--command):not(:has(:checked)):not(.aparte-field-choice--selected):hover {
   background: var(--aparte-surface-2);
   border-color: var(--aparte-border);
 }
@@ -5724,6 +5922,14 @@ textarea.aparte-elic-text {
   border-color: var(--aparte-primary);
   background: color-mix(in srgb, var(--aparte-primary) 6%, transparent);
 }
+/* One ring at a time. The recommended option is the first to receive focus, and its
+   tinted border under the recipe's focus ring read as a double outline (UI audit
+   2026-08-28, §8.3 #9). While it holds focus the ring is the indicator; the tint
+   comes back when focus leaves. */
+.aparte-elic-option--recommended:focus-within {
+  background: transparent;
+  border-color: var(--aparte-border-focus);
+}
 
 /* The whole-request escape, in the corner and out of the way of anything that
    answers a question. It used to be a row at the bottom beside the button that
@@ -5935,12 +6141,27 @@ textarea.aparte-elic-text {
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
+/* The conversation you are in wears the mark's bar (display/mark.css) on its start
+   edge — Primer's ActionList pattern, and the same bar the select's chosen option and
+   a checked field choice carry. Its ground keeps the list's own tokens: a navigation
+   list is read for a long time, and the mark's tint on every visit was too loud. */
 .aparte-conv-item--active {
+  position: relative;
   background: var(--aparte-conv-item-bg-active);
   color: var(--aparte-conv-item-color-active);
   font-weight: var(--aparte-conv-item-font-weight-active);
 }
 
+.aparte-conv-item--active::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: var(--aparte-mark-bar);
+  background: var(--aparte-primary-ink);
+  pointer-events: none;
+}
+
 .aparte-conv-item--active .aparte-conv-item__delete {
   opacity: 0;
 }
@@ -5997,6 +6218,77 @@ textarea.aparte-elic-text {
   font-style: italic;
   opacity: 0.85;
 }
+/*
+ * aparté — <aparte-suggestions>: the row of prompt starters.
+ *
+ * One of the sheets src/index.ts imports in cascade order; check:derived-vars reads
+ * them concatenated in that same order, the way a browser does.
+ *
+ * The chips are `aparte-btn aparte-btn--surface aparte-btn--pill` — the recipe draws
+ * them, this sheet only lays them out. No token of its own: the gap is the global
+ * spacing scale, so a theme reaches it without a knob to re-set.
+ */
+aparte-suggestions {
+  display: block;
+}
+aparte-suggestions[hidden],
+aparte-suggestions[data-empty] {
+  display: none;
+}
+
+.aparte-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aparte-space-2);
+  padding-block: var(--aparte-space-2);
+}
+
+/* A starter's label is a short phrase; it must not become a two-line chip. */
+.aparte-suggestion {
+  white-space: nowrap;
+}
+/*
+ * aparté — <aparte-context>: how full the model's context window is.
+ *
+ * One of the sheets src/index.ts imports in cascade order; check:derived-vars reads
+ * them concatenated in that same order, the way a browser does.
+ *
+ * The bar is the `aparte-progress` recipe; this sheet lays it out beside its reading
+ * and recolours the fill at the two levels — from the global alert tokens, no token
+ * of its own.
+ */
+aparte-context {
+  display: block;
+}
+aparte-context[hidden],
+aparte-context[data-empty] {
+  display: none;
+}
+
+.aparte-context {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-2);
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+}
+
+.aparte-context .aparte-progress {
+  flex: 1;
+  min-width: 4rem;
+}
+
+.aparte-context__text {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+aparte-context[data-level="warn"] .aparte-progress__bar {
+  background: var(--aparte-warning);
+}
+aparte-context[data-level="danger"] .aparte-progress__bar {
+  background: var(--aparte-error);
+}
 /*
  * aparté — Reset-agnostic typography for model-authored markdown.
  *
@@ -6118,6 +6410,42 @@ textarea.aparte-elic-text {
   margin: var(--aparte-prose-hr-margin);
 }
 
+/* Tables. The sanitizer allowlisted table/thead/tbody/tr/th/td from the start and no
+   sheet ever drew them, so a GFM table — the second most common structure in an
+   assistant reply, and a suggestion chip in our own example — rendered as words with
+   no borders, no padding and columns that touched. `display: block` + `overflow-x` is
+   the one honest way to keep a wide table inside a narrow bubble without a wrapper
+   the markdown provider cannot emit. */
+.aparte-content table,
+.aparte-segment-content table,
+.aparte-thinking-content table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin: var(--aparte-space-4) 0;
+  font-size: var(--aparte-font-size-md);
+}
+
+.aparte-content th,
+.aparte-segment-content th,
+.aparte-thinking-content th,
+.aparte-content td,
+.aparte-segment-content td,
+.aparte-thinking-content td {
+  border: var(--aparte-border-width) solid var(--aparte-border);
+  padding: var(--aparte-space-2) var(--aparte-space-4);
+  text-align: start;
+  vertical-align: top;
+}
+
+.aparte-content th,
+.aparte-segment-content th,
+.aparte-thinking-content th {
+  font-weight: var(--aparte-font-weight-semibold);
+  background: var(--aparte-surface-2);
+}
+
 .aparte-thinking-content {
   padding: var(--aparte-space-2) 0 var(--aparte-space-1) var(--aparte-space-5);
   font-size: var(--aparte-font-size-md);
@@ -6204,7 +6532,7 @@ textarea.aparte-elic-text {
 
 /* Respect prefers-reduced-motion. Scoped to Aparte's own custom elements (never
    the consumer's page) — this covers every animated element the library renders
-   inside them: typing dots, spinners, pipeline/artifact pulses, segment
+   inside them: typing dots, spinners, artifact pulses, segment
    animations. Activity stays conveyed via aria-live / aria-busy. */
 @media (prefers-reduced-motion: reduce) {
   aparte-chat-viewport *,
@@ -6265,6 +6593,20 @@ textarea.aparte-elic-text {
     --aparte-input-action-btn-size: var(--aparte-touch-target-size);
   }
 
+  /* The bubble's action bar too: 28px buttons under a thumb missed as often as they
+     hit (UI audit 2026-08-28, §8.3 #10). The bar's height follows the same token.
+     And it is SHOWN: the bar is revealed by hover, and a finger cannot hover, so on a
+     touch device every message's actions were sitting at opacity 0 with no way to
+     reach them — a larger target for something invisible. The footer stays in the
+     flow here (the floating rule in bubble.css is under `(hover: hover) and
+     (pointer: fine)`, so a device that hovers with a coarse pointer — a TV remote —
+     keeps it in the flow too), so what a touch device gets is the bar every mobile
+     chat shows: under each message, always. */
+  .aparte-action-bar {
+    --aparte-action-bar-btn-size: var(--aparte-touch-target-size);
+    opacity: 1;
+  }
+
   /* Hover cannot reveal these on touch — keep them visible and tappable. */
   .aparte-conv-item__delete,
   .aparte-conv-item__archive {