@aparte/core 0.15.1 → 0.16.1

package/dist/index.css

@@ -35,13 +35,15 @@
   --aparte-surface-1: #fffdf8;
   /* Bubbles, cards */
   --aparte-surface-2: #f1ebdf;
-  /* Code blocks, headers */
-  --aparte-surface-3: #e7dfce;
+  /* `--aparte-surface-3` (code blocks, headers) and `--aparte-text-inverse` are no
+     longer literals here: both are derived from the masters in the anchored layer
+     below, so the eight-line rebrand the theming guide documents actually covers them.
+     They were the two palette hexes that survived a rebrand — a consumer on a blue
+     brand kept the brass palette's cream for its tooltip ink and its code headers. */
 
   /* Text */
   --aparte-text: #241f2b;
   --aparte-text-muted: #6d6479;
-  --aparte-text-inverse: #fffdf8;
 
   /* Borders */
   --aparte-border: #e5ddce;
@@ -87,8 +89,8 @@
      a large-type page grow twice over. Wanting rem spacing anyway is now a
      one-line change here — which is the point of having a master at all. */
   --aparte-space-unit: 2px;
-  --aparte-radius-unit: 2px;
-  --aparte-font-scale: 1;
+  --aparte-radius-unit: 3px;
+  --aparte-font-scale: 1.08;
 
   /* Not a step of the radius scale: a pill is a shape, not a size. */
   --aparte-radius-full: 9999px;
@@ -177,9 +179,9 @@
   /* Messages */
   --aparte-message-max-width: 800px;
 
-  /* Bubbles — opt-in. By default both roles render as a transparent row with
-     no bubble background; consumers can flip these to get a chat-app look. */
-  --aparte-message-content-bg-user: #efe7f6;
+  /* Bubbles. The user's bubble tint is DERIVED from the accent in the anchored layer
+     below (it was a frozen plum hex that outlived every rebrand); the assistant is
+     plain prose (AI-chat convention) — flip it to get a two-bubble chat-app look. */
   --aparte-message-content-bg-assistant: transparent;
   --aparte-message-content-radius: 14px;
 
@@ -327,6 +329,34 @@
 
   /* Conversation List */
   --aparte-conv-action-btn-size: 20px;
+
+  /* Scroll rail — the ticks beside the transcript. Off-scale on purpose: a 2px line
+     and a 14px mark are a minimap's measures, not spacing steps. */
+  --aparte-scroll-rail-width: 20px;
+  --aparte-scroll-rail-tick-size: 14px;
+  --aparte-scroll-rail-tick-thickness: 2px;
+
+  --aparte-scroll-rail-gap: 8px;
+
+  /* Context gauge, ring variant — a diameter, and a stroke in the ring's own 36-unit
+     box. Literals like the rail's: a 22px ring is a toolbar's measure, not a spacing step. */
+  --aparte-context-ring-size: 22px;
+  --aparte-context-ring-stroke: 4;
+
+  /* Shell — the sidebar's column, the header's row and the split's seam. */
+  --aparte-sidebar-width: 260px;
+  --aparte-app-header-height: 48px;
+  --aparte-scrim: rgba(0, 0, 0, 0.35);
+  /* The split's primary pane and the bounds it moves between. Any length or
+     percentage: the browser clamps them in the grid template, so nothing in JS
+     parses a unit. The seam is 4px because that is a seam; the grab zone around it
+     is 12px because that is a target, and it grows to the touch target on a coarse
+     pointer (responsive.css). */
+  --aparte-split-position: 38%;
+  --aparte-split-min: 20rem;
+  --aparte-split-max: 60%;
+  --aparte-split-handle-size: 4px;
+  --aparte-split-hit-area: 12px;
   /* Sizes that are not steps of a scale. Each is off-scale on purpose — a 40px
      file tile is a tile, not fourteen spacing units — so each gets a name rather
      than sitting as a magic number in a rule. Literal, like every other size
@@ -358,28 +388,6 @@
   /* Select. Its dropdown shadow used to live as a fallback inside select.css,
      which meant it had no dark value at all — rgba(0,0,0,0.1) over a dark
      surface is no shadow. Declared here, it themes like every other. */
-  /* Paper. An artifact preview is a DOCUMENT shown inside the chat — a spreadsheet,
-     a rendered page — so it stays light whatever the app theme is, the way a PDF
-     viewer shows a white page in a dark editor. That intent was already written in a
-     comment beside a literal `#fff`; naming it is what makes it overridable, and it
-     is deliberately absent from the dark block so the paper does not follow. */
-  --aparte-art-paper-bg: #fff;
-  --aparte-art-paper-text: #1f2937;
-  --aparte-art-paper-row-alt: #f9fafb;
-  --aparte-art-paper-head-bg: #f3f4f6;
-  --aparte-art-paper-head-text: #111827;
-  --aparte-art-paper-border: rgba(0, 0, 0, 0.1);
-
-  /* File-type tiles. Brand colours, so they are literals on purpose — but named,
-     because an app with its own file-type palette has nowhere else to put it. */
-  --aparte-art-file-icon-bg: linear-gradient(135deg, #1d6f42, #0f5132);
-  /* Fixed, like the tiles it sits on. --aparte-text-inverse would be right for a
-     THEMED background and is wrong here: it turns near-black in dark mode, which
-     would put black lettering on a dark green tile. */
-  --aparte-art-file-icon-color: #fff;
-  --aparte-art-file-icon-bg-pdf: linear-gradient(135deg, #c0392b, #7d1f17);
-  --aparte-art-file-icon-bg-docx: linear-gradient(135deg, #1e5288, #0f3060);
-  --aparte-art-file-error-msg-bg: rgba(0, 0, 0, 0.04);
 
   --aparte-line-height-snug: 1.4;
 
@@ -436,19 +444,13 @@
   --aparte-skeleton-text-last-width: 60%;
   --aparte-progress-indeterminate-width: 40%;
 
-  --aparte-btn-size-sm: 20px;
-  --aparte-btn-size-md: 28px;
-  --aparte-btn-size-lg: 36px;
+  --aparte-btn-size-sm: 24px;
+  --aparte-btn-size-md: 32px;
+  --aparte-btn-size-lg: 40px;
 
   --aparte-focus-outline-offset: -2px;
   --aparte-tool-spinner-size: 10px;
   --aparte-model-select-chevron-room: 28px;
-  --aparte-art-card-header-min-height: 36px;
-  --aparte-art-card-pulse-size: 8px;
-  --aparte-art-card-btn-size: 28px;
-  --aparte-art-file-icon-size: 40px;
-  --aparte-art-file-preview-padding: 20px;
-  --aparte-art-file-error-padding-inline: 18px;
 }
 
 /* =========================================
@@ -460,10 +462,11 @@
   --aparte-bg: #17141c;
   --aparte-surface-1: #211b28;
   --aparte-surface-2: #2a2333;
-  --aparte-surface-3: #342a40;
+  /* `--aparte-surface-3`, `--aparte-text-inverse` and the user bubble's tint are not
+     re-declared here: they derive from the masters (anchored layer), so the dark
+     masters above are enough to move them. */
 
   /* Bubbles — user only; assistant is plain prose (AI-chat convention) */
-  --aparte-message-content-bg-user: #2f2740;
   --aparte-message-content-bg-assistant: transparent;
 
   /* Text */
@@ -473,7 +476,6 @@
      dark for the only reason that this line was missing — which left the scrollbar
      thumb, and now a neutral badge, at the light value on a dark ground. */
   --aparte-neutral: #a89bb6;
-  --aparte-text-inverse: #17141c;
 
   /* Borders */
   --aparte-border: #342a40;
@@ -490,9 +492,6 @@
   --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);
-  /* Not the paper — that stays light on purpose. This is a code block inside the
-     error panel, which does follow the theme. */
-  --aparte-art-file-error-msg-bg: rgba(255, 255, 255, 0.06);
 
   /* Error segment */
   /* The text inks, going the other way: on a dark ground the accent gains
@@ -771,11 +770,26 @@ aparte-chat {
   --aparte-avatar-error-ring: 0 0 0 2px var(--aparte-error-solid);
 
   /* Focus ring — derived from the accent so it themes automatically. */
-  --aparte-focus-ring: 0 0 0 3px color-mix(in srgb, var(--aparte-primary) 15%, transparent);
+  --aparte-focus-ring: 0 0 0 3px color-mix(in srgb, var(--aparte-primary) 30%, transparent);
 
   /* Messages */
   --aparte-message-content-text-user: var(--aparte-text);
   --aparte-message-content-text-assistant: var(--aparte-text);
+  /* The user's bubble: a wash of the accent over the card surface. It was a literal
+     (`#efe7f6` light / `#2f2740` dark) — the one palette colour a consumer's eight-line
+     rebrand could not reach, so a chat moved to a blue brand kept a plum bubble. Mixed
+     in sRGB rather than derived with `oklch(from …)`, because a wash has to keep the
+     SURFACE's lightness, not the accent's; 12 % is where the default palette reads as a
+     tint, not a fill, on both grounds. */
+  --aparte-message-content-bg-user: color-mix(in srgb, var(--aparte-primary) 12%, var(--aparte-surface-1));
+  /* The third surface: the second, pulled 6 % toward the text. Close to what the old
+     literals encoded (`#e7dfce` from `#f1ebdf` light, `#342a40` from `#2a2333` dark —
+     5 to 9 % per channel, not one figure), now one rule that follows the masters. */
+  --aparte-surface-3: color-mix(in srgb, var(--aparte-text) 6%, var(--aparte-surface-2));
+  /* Text on the text colour used as a fill (the tooltip, the avatar). The card
+     surface is the lightest tone in light and the darkest-but-one in dark, which is
+     what the two literals were. */
+  --aparte-text-inverse: var(--aparte-surface-1);
   --aparte-surface:         var(--aparte-surface-1);
   --aparte-surface-hover:   var(--aparte-surface-2);
   --aparte-text-secondary:  var(--aparte-text-muted);
@@ -855,6 +869,9 @@ aparte-chat {
   /* Input (composer) */
   --aparte-input-line-height: var(--aparte-line-height-normal);
 
+  /* Shell */
+  --aparte-sidebar-bg: var(--aparte-surface-2);
+
   /* Conversation List */
   --aparte-conv-item-radius: var(--aparte-radius-md);
   --aparte-conv-item-color: var(--aparte-text-muted);
@@ -862,10 +879,6 @@ aparte-chat {
   --aparte-conv-item-bg-hover: var(--aparte-surface-3);
   --aparte-conv-item-bg-active: var(--aparte-surface-3);
   --aparte-conv-item-font-weight-active: var(--aparte-font-weight-medium);
-  --aparte-conv-delete-color: var(--aparte-text-muted);
-  --aparte-conv-delete-bg-hover: var(--aparte-error);
-  --aparte-conv-delete-color-hover: var(--aparte-text-inverse);
-  --aparte-conv-delete-radius: var(--aparte-radius-sm);
 }
 
 /*
@@ -1292,6 +1305,7 @@ aparte-conversation-list {
  *     </label>
  *     <input id="email" class="aparte-field" type="email" placeholder="you@example.com" />
  *     <p class="aparte-field-hint">We only use this to send a receipt.</p>
+ *     <p class="aparte-field-warning">Changing it signs you out of other devices.</p>
  *
  *     <div class="aparte-field-group">
  *       <span class="aparte-field-group__prefix">https://</span>
@@ -1437,6 +1451,9 @@ aparte-conversation-list {
   background: var(--aparte-surface-1);
   border: var(--aparte-border-width) solid var(--aparte-border);
   border-radius: var(--aparte-field-radius);
+  /* The addons' ground follows the group's corners; the focus ring is a shadow on the
+     group itself, outside this box, so it is not clipped. */
+  overflow: hidden;
   transition:
     border-color var(--aparte-duration-fast) var(--aparte-ease),
     box-shadow var(--aparte-duration-fast) var(--aparte-ease);
@@ -1458,15 +1475,24 @@ aparte-conversation-list {
   box-shadow: none;
 }
 
+/* An addon has a ground of its own and a rule against the field: on the field's own
+   ground, in muted text, "https://" read as the start of what the user had typed. */
 .aparte-field-group__prefix,
 .aparte-field-group__suffix {
   display: inline-flex;
   align-items: center;
   padding-inline: var(--aparte-space-3);
+  background: var(--aparte-surface-2);
   font-size: var(--aparte-font-size-sm);
   color: var(--aparte-text-muted);
   white-space: nowrap;
 }
+.aparte-field-group__prefix {
+  border-inline-end: var(--aparte-border-width) solid var(--aparte-border);
+}
+.aparte-field-group__suffix {
+  border-inline-start: var(--aparte-border-width) solid var(--aparte-border);
+}
 
 .aparte-field-group:hover:not(:has(.aparte-field:disabled)) {
   background: var(--aparte-surface-hover);
@@ -1720,10 +1746,15 @@ aparte-conversation-list {
      has to live here where `:checked` can override it — a central default could never
      react to the class + state combo. */
   --aparte-switch-track: var(--aparte-surface-3);
-  --aparte-switch-width: 36px;
-  --aparte-switch-height: 20px;
-  --aparte-switch-thumb-size: 16px;
+  --aparte-switch-width: 40px;
+  --aparte-switch-height: 22px;
   --aparte-switch-thumb-inset: 2px;
+  /* DERIVED from the track, not a fourth literal to keep in step with the other three:
+     the thumb used to be 16px in a 20px track with a 1px border and a 2px top inset —
+     2px of air above it and none below, visibly low ("le cercle pas centré"). The
+     thumb is what is left once the border and the inset are paid on both sides, so
+     it is centred by construction, whatever the track's size. */
+  --aparte-switch-thumb-size: calc(var(--aparte-switch-height) - 2 * var(--aparte-border-width) - 2 * var(--aparte-switch-thumb-inset));
   /* No shared shadow token fits a small thumb like this one, so it's a plain literal —
      kept the same in both themes rather than reaching for a per-theme split this file
      has no other precedent for. */
@@ -1926,6 +1957,19 @@ aparte-conversation-list {
   color: var(--aparte-error-text);
 }
 
+/* The third tone of a field's sub-text: a consequence, not a fault. "This setting
+   invalidates the saved states" is neither a hint nor an error, and a shell that had
+   only those two painted it as one of them. Same shape as the error line; the warning
+   ink is the derived one every other warning reads. */
+.aparte-field-warning {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-1);
+  margin-block-start: var(--aparte-space-1);
+  font-size: var(--aparte-font-size-xs);
+  color: var(--aparte-warning-ink);
+}
+
 /* A bare colour on the marker, not injected `*` content: a locale that doesn't mark
    required fields with an asterisk still gets a place to say so, in its own text. */
 .aparte-field-required {
@@ -2726,11 +2770,20 @@ aparte-icon {
    =========================================
    Decorative: give the element aria-hidden="true" (or wrap the group behind a
    single aria-busy region) so a screen reader does not read out an empty box.
-
-       <span class="aparte-skeleton aparte-skeleton--circle"></span>
-       <span class="aparte-skeleton aparte-skeleton--text"></span>
-       <span class="aparte-skeleton aparte-skeleton--text" style="inline-size: 60%"></span>
-       <span class="aparte-skeleton aparte-skeleton--rect" style="block-size: 64px"></span>
+   A skeleton is a block with no margin of its own: the recipe spaces consecutive
+   text lines and nothing else, so a GROUP is laid out by its container — a grid
+   with a gap, the way the real card it stands in for is. Four lines glued edge to
+   edge is what the example used to show.
+
+       <div style="display: grid; grid-template-columns: auto 1fr; gap: var(--aparte-space-3); align-items: start" aria-busy="true">
+         <span class="aparte-skeleton aparte-skeleton--circle" aria-hidden="true"></span>
+         <div>
+           <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
+           <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
+           <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
+         </div>
+         <span class="aparte-skeleton aparte-skeleton--rect" style="grid-column: 1 / -1; block-size: 64px" aria-hidden="true"></span>
+       </div>
    */
 
 .aparte-skeleton {
@@ -3099,9 +3152,11 @@ aparte-icon {
  * aparté — layered surfaces. Ready-made classes for the things that float ABOVE the
  * transcript: tabs, an accordion, a dropdown menu, a popover, a tooltip.
  *
- * Dialog, drawer and toast are deliberately NOT here. A modal needs a portal and a
- * stack manager — something that owns exactly one top layer for the whole page — and
- * that is the consuming application's job, not a component stylesheet's.
+ * Drawer and toast are deliberately NOT here: each needs a stack manager — something
+ * that owns the order of what floats over the page — and that is the consuming
+ * application's job, not a component stylesheet's. The dialog was on that list until
+ * 0.16.0; it has its own recipe now (`dialog.css`), because the browser's `<dialog>`
+ * brings the top layer, the focus trap and Escape with it.
  *
  * Everything below is the LOOK only. Where and when a surface opens is markup and
  * script the caller owns: a <details open> toggling itself, a positioning library placing
@@ -3439,8 +3494,28 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
          <button class="aparte-menu__item" role="menuitem">Retry</button>
          <div class="aparte-menu__separator" role="separator"></div>
          <button class="aparte-menu__item" role="menuitem" disabled>Delete</button>
+         <div class="aparte-menu__separator" role="separator"></div>
+         <span class="aparte-menu__label">Mode</span>
+         <button class="aparte-menu__item" role="menuitemradio" aria-checked="true">
+           <span class="aparte-menu__body">
+             Ask
+             <span class="aparte-menu__description">Every tool call waits for you</span>
+           </span>
+         </button>
+         <button class="aparte-menu__item" role="menuitemradio" aria-checked="false">
+           <span class="aparte-menu__body">
+             Auto
+             <span class="aparte-menu__description">Runs everything, reports after</span>
+           </span>
+         </button>
        </div>
 
+   The check mark is DRAWN HERE, not by you: an item carrying `aria-checked` (a
+   `menuitemradio` or `menuitemcheckbox`) reserves a gutter, and the glyph shows when
+   the value is `"true"` — so set the attribute and do not add a "✓" of your own, or the
+   row shows two. A two-line item wraps its name and its `__description` in a `__body`;
+   the gutter then spans both lines.
+
    WHERE it sits is yours. There is no positioning here and no anchoring logic —
    floating a box next to a trigger needs collision detection and a scroll listener,
    which is an interaction library's job, not a stylesheet's. Same split as the popover
@@ -3548,6 +3623,30 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
   visibility: visible;
 }
 
+/* A two-line item: a name and, under it, what choosing it means (a mode picker, a
+   model with its size). `__body` stacks the two so the check gutter spans both lines
+   — a consumer laid a grid over the item to get exactly this, and that grid was the
+   only piece of specificity CSS his menu needed. */
+.aparte-menu__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--aparte-space-1) / 2);
+  min-width: 0;
+}
+
+.aparte-menu__description {
+  font-size: var(--aparte-font-size-xs);
+  font-weight: var(--aparte-font-weight-normal);
+  color: var(--aparte-text-muted);
+  text-align: start;
+}
+
+.aparte-menu__item:disabled .aparte-menu__description,
+.aparte-menu__item[aria-disabled='true'] .aparte-menu__description {
+  color: inherit;
+}
+
 .aparte-menu__separator {
   height: var(--aparte-border-width);
   margin-block: var(--aparte-space-2);
@@ -3600,6 +3699,170 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
   line-height: var(--aparte-line-height-normal);
   z-index: var(--aparte-z-dropdown);
 }
+/*
+ * aparté — the modal, on the browser's own <dialog>.
+ *
+ * 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.
+ */
+
+/*
+ * aparte-dialog — a modal, drawn on the native <dialog>.
+ * The kit said for a year that a dialog was "deliberately absent — a modal needs a
+ * portal and a stack manager". The browser has had both since 2022: `<dialog>` with
+ * `showModal()` puts the box in the top layer above everything, traps focus, closes
+ * on Escape, hands the focus back, and draws a `::backdrop`. So this recipe styles
+ * THAT element, and core's one addition is the wiring — a `data-aparte-dialog-open`
+ * on any control opens the dialog it names, a `data-aparte-dialog-close` inside one
+ * closes it, and a click on the backdrop closes it unless the dialog carries
+ * `data-aparte-dialog-static`. Nothing here reaches for position:fixed on your behalf:
+ * the top layer is the browser's.
+ *
+ *     <dialog class="aparte-dialog" id="settings" aria-labelledby="settings-title">
+ *       <div class="aparte-dialog__header">
+ *         <h2 class="aparte-dialog__title" id="settings-title">Settings</h2>
+ *         <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-dialog__close" type="button" aria-label="Close" data-aparte-dialog-close>
+ *           <aparte-icon name="close"></aparte-icon>
+ *         </button>
+ *       </div>
+ *       <div class="aparte-dialog__body">
+ *         <label class="aparte-field-label" for="endpoint">Endpoint</label>
+ *         <input class="aparte-field" id="endpoint" value="http://localhost:11434/v1">
+ *       </div>
+ *       <div class="aparte-dialog__footer">
+ *         <button class="aparte-btn aparte-btn--ghost" type="button" data-aparte-dialog-close>Cancel</button>
+ *         <button class="aparte-btn aparte-btn--primary aparte-btn--solid" type="button" data-aparte-dialog-close="saved">Save</button>
+ *       </div>
+ *     </dialog>
+ *     <button class="aparte-btn aparte-btn--surface" type="button" data-aparte-dialog-open="settings">Open settings</button>
+ *
+ * Sizes: `--sm` (24rem), the default (32rem), `--lg` (48rem); under 30rem of window
+ * every size becomes a full-screen sheet, which is what a settings hub is on a phone.
+ * The value passed to `data-aparte-dialog-close="…"` becomes the dialog's
+ * `returnValue`, read in its native `close` event.
+ */
+.aparte-dialog {
+  --aparte-dialog-width: 32rem;
+
+  box-sizing: border-box;
+  width: min(var(--aparte-dialog-width), calc(100vw - 2 * var(--aparte-space-8)));
+  max-height: calc(100dvh - 2 * var(--aparte-space-8));
+  margin: auto;
+  padding: 0;
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--aparte-surface-1);
+  color: var(--aparte-text);
+  border: var(--aparte-border-width) solid var(--aparte-border);
+  border-radius: var(--aparte-radius-xl);
+  box-shadow: var(--aparte-menu-shadow);
+}
+
+/* `display: flex` only while open: a closed <dialog> must stay `display: none`, and a
+   flex declaration on the bare class would show it. */
+.aparte-dialog[open] {
+  display: flex;
+}
+
+.aparte-dialog--sm {
+  --aparte-dialog-width: 24rem;
+}
+
+.aparte-dialog--lg {
+  --aparte-dialog-width: 48rem;
+}
+
+.aparte-dialog::backdrop {
+  background: var(--aparte-scrim);
+}
+
+.aparte-dialog__header {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-space-5) var(--aparte-space-6) var(--aparte-space-3);
+}
+
+.aparte-dialog__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--aparte-font-size-lg);
+  font-weight: var(--aparte-font-weight-semibold);
+  line-height: var(--aparte-line-height-snug);
+}
+
+.aparte-dialog__close {
+  flex-shrink: 0;
+  color: var(--aparte-text-muted);
+}
+
+/* The body is the one region that scrolls, so a long form never pushes the footer
+   off screen. */
+.aparte-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--aparte-space-3) var(--aparte-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-4);
+}
+
+.aparte-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-space-3) var(--aparte-space-6) var(--aparte-space-5);
+}
+
+/* The page behind a modal does not scroll — the browser inerts it, but does not
+   freeze it. Scoped to this class, so a host's own dialogs keep their behaviour. */
+body:has(.aparte-dialog[open]) {
+  overflow: hidden;
+}
+
+/* A phone: every size is the whole screen — when shown MODALLY. `:modal` and not the
+   bare class: a dialog opened with `show()` sits in the flow of its container (the
+   kit's own preview does that), and a sheet the height of the viewport inside a
+   narrow column was the wrong reading of a rule meant for a phone. */
+@media (max-width: 30rem) {
+  .aparte-dialog:modal {
+    width: 100%;
+    max-width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+}
+
+/* Open and close with a short fade and lift; the reader who prefers reduced motion
+   gets the box where it lands. */
+@media (prefers-reduced-motion: no-preference) {
+  .aparte-dialog[open] {
+    animation: aparte-dialog-in var(--aparte-duration-slow) var(--aparte-ease);
+  }
+
+  .aparte-dialog[open]::backdrop {
+    animation: aparte-dialog-backdrop-in var(--aparte-duration-slow) var(--aparte-ease);
+  }
+}
+
+@keyframes aparte-dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--aparte-slide-distance));
+  }
+}
+
+@keyframes aparte-dialog-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
 /* =========================================
    aparte-tooltip — a short label, with an arrow
    =========================================
@@ -4122,6 +4385,11 @@ aparte-chat-viewport {
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: var(--aparte-scrollbar-thumb) var(--aparte-scrollbar-track);
+  /* The gutter is reserved on BOTH edges whether or not the bar is showing, so the
+     centred column does not shift by half a scrollbar the moment the first reply
+     overflows — the same rule the reference kits' scroll surfaces carry. Symmetric,
+     because the column is centred: a gutter on one side alone moves it. */
+  scrollbar-gutter: stable both-edges;
 }
 
 .aparte-viewport-container::-webkit-scrollbar {
@@ -4186,6 +4454,15 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
    so it can't collide with the framework's children). */
 aparte-chat-viewport.aparte-viewport--framework,
 aparte-chat-viewport[framework-managed] {
+  /* The base rule gives this element `width: 100%`, and core ships no global
+     border-box reset — every `box-sizing` in these sheets is per-element, on purpose.
+     So the padding below was ADDED to 100% and the host overflowed its own chat by
+     32px, which `aparte-chat`'s `overflow: hidden` then clipped: measured on a 1500px
+     chat, the host was 1532 wide and hung 32px past the end edge. An app with its own
+     `* { box-sizing: border-box }` never saw it, which is exactly why it survived —
+     every example in this repo has one. The composer cannot share a column with a
+     transcript that is off-centre, so it is fixed here rather than compensated there. */
+  box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
@@ -4196,6 +4473,9 @@ aparte-chat-viewport[framework-managed] {
   padding-bottom: calc(var(--aparte-viewport-padding) + var(--aparte-fw-spacer, 0px));
   scrollbar-width: thin;
   scrollbar-color: var(--aparte-scrollbar-thumb) var(--aparte-scrollbar-track);
+  /* Same gutter rule as `.aparte-viewport-container` above: the host is the scroll
+     surface here, so it is the host that reserves it. */
+  scrollbar-gutter: stable both-edges;
 }
 
 /* The framework wrapper renders bubbles as DIRECT flex children of the viewport
@@ -4631,6 +4911,31 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
 .aparte-message[data-empty] {
   display: none;
 }
+
+/* ─── The compaction notice ────────────────────────────────────────────────────
+   A message with `compaction: true` — the summary `compact()` injected in place of
+   the turns it replaced — is a notice, not a reply: centred, muted, without avatar,
+   name, time or actions. Its role on the wire is `user` (context handed to the
+   model), and the bubble would otherwise draw it as something the user said. */
+aparte-chat-bubble[data-kind="compaction"] .aparte-avatar,
+aparte-chat-bubble[data-kind="compaction"] .aparte-header,
+aparte-chat-bubble[data-kind="compaction"] .aparte-footer,
+aparte-chat-bubble[data-kind="compaction"] .aparte-action-bar,
+aparte-chat-bubble[data-kind="compaction"] .aparte-branch-picker {
+  display: none;
+}
+
+aparte-chat-bubble[data-kind="compaction"] .aparte-message {
+  justify-content: center;
+}
+
+aparte-chat-bubble[data-kind="compaction"] .aparte-message-content {
+  max-width: 100%;
+  background: var(--aparte-surface-2);
+  color: var(--aparte-text-muted);
+  border: var(--aparte-border-width) dashed var(--aparte-border);
+  font-size: var(--aparte-font-size-sm);
+}
 /*
  * aparté — The composer and everything it holds: editor, send, attachments, model picker.
  *
@@ -4715,7 +5020,14 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
   border-radius: 50%;
   opacity: 0;
 }
-.aparte-thumb:hover .aparte-thumb__remove {
+/* Hover is not the only way in. The ✕ is the ONLY way to drop a pending attachment,
+   and at `opacity: 0` it was invisible to a keyboard user standing on it — a focus
+   ring drawn around nothing. `:focus-within` on the tile is the same pair the message
+   action bar (bubble.css) and the conversation row (conversation.css) already use;
+   this one had been written with the hover half alone. The touch half is in
+   responsive.css, beside the row's ⋯, for the same reason: a finger cannot hover. */
+.aparte-thumb:hover .aparte-thumb__remove,
+.aparte-thumb:focus-within .aparte-thumb__remove {
   opacity: 1;
 }
 .aparte-thumb__remove:hover {
@@ -4956,6 +5268,34 @@ aparte-composer {
   display: block;
   /* Container-query root — see aparte-chat-viewport. */
   container-type: inline-size;
+  /* The transcript's own inline gutter, read from the token that produces it.
+     `.aparte-composer-shell` and `.aparte-message` both cap at
+     `--aparte-message-max-width` and centre with `margin: 0 auto`, so on a container
+     WIDER than the cap they lined up by construction. Below it the cap stops applying,
+     each becomes 100% of its own parent — and this element had no padding, so the
+     composer went flush to the chat's edges while the transcript kept its inset.
+     Measured at a 512px chat: message column 26/26, composer 0/0. Every chat narrower
+     than 800px was hit — a phone, an embedded widget, either pane of `<aparte-split>`,
+     an app shell whose docked sidebar leaves the chat narrow on a wide window.
+
+     INLINE ONLY, and that is not shorthand-avoidance: the block axis is already spaced
+     deliberately, 16px above from the viewport and 16px below from
+     `--aparte-chat-bottom-gap` (shell.css), which were tuned to match. The `padding`
+     shorthand would add a second 16px to each.
+
+     No 520px step to follow the transcript's, and it is not an oversight: a container
+     query cannot match its own container, and this element IS one (the line above).
+     Nothing above it is a container either, and `aparte-chat` may never become one —
+     it would then be the containing block of the `position: fixed` select dropdown
+     that exists to escape `overflow: hidden` (select.css, and the same warning in
+     split.css). So below 520px the transcript tightens to 8px and this stays at 16.
+     A flat 16 was measured against a step: the step wins for vanilla at phone width
+     and LOSES for framework-managed, which is the majority path, because the
+     transcript's own step targets a class framework mode never builds. Flat is a
+     uniform 10px worst case in both modes — which is the scrollbar gutter the
+     transcript reserves and the composer cannot, and which is 0 on the overlay
+     scrollbars every phone has. */
+  padding-inline: var(--aparte-viewport-padding);
 }
 
 aparte-composer-input {
@@ -5290,7 +5630,16 @@ aparte-composer-cancel .aparte-cc-button:hover {
    reply text beside it for attention it did not deserve. */
 .aparte-tool-summary {
     display: flex; align-items: center; gap: var(--aparte-space-4);
-    padding: var(--aparte-space-2) var(--aparte-space-3); margin-inline-start: calc(var(--aparte-space-3) * -1);
+    /* The negative margin is what puts the row's CONTENT on the message column rather
+       than one padding in from it — the padding here is the hover surface, not the
+       column. So it has to be given back on BOTH sides. It used to be
+       `margin-inline-start` alone: the name, the icon and the chevron landed on the
+       column, and the trailing state stopped `--aparte-space-3` short of the right edge
+       every line of prose reaches. Measured at a 512px chat: text L26/R26, the state's
+       right edge at R32 — six pixels, on the one line of a turn whose whole job is to
+       read as a quiet aside beside the text. `margin-inline` puts it at R26 and makes
+       the hover surface symmetric with it. */
+    padding: var(--aparte-space-2) var(--aparte-space-3); margin-inline: calc(var(--aparte-space-3) * -1);
     border-radius: var(--aparte-tool-row-radius);
     cursor: pointer; list-style: none;
 }
@@ -5525,256 +5874,6 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
   border-collapse: collapse;
 }
 
-/*
- * aparté — The artifact card and the artifact file preview.
- *
- * 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.
- */
-/* Artifact card */
-/* The shell is `.aparte-card`; what stays here is what a card in a TRANSCRIPT needs
-   and a card in general does not — the vertical rhythm between messages, and `font:
-   inherit` so a segment never picks up a host's form-control font. */
-.aparte-segment-artifact-card,
-.aparte-segment-artifact-file {
-    margin: var(--aparte-space-4) 0;
-    font: inherit;
-}
-.aparte-art-card__header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--aparte-space-4) var(--aparte-space-5);
-    border-bottom: var(--aparte-border-width) solid var(--aparte-border);
-    background: var(--aparte-surface-2);
-    min-height: var(--aparte-art-card-header-min-height);
-}
-.aparte-art-card__title-block { display: flex; align-items: center; gap: var(--aparte-space-4); min-width: 0; }
-/* An outline `.aparte-badge`. What stays is the lettering: a language tag reads as a
-   code marker, so it is upper-cased and tracked out — which a badge in general is not. */
-.aparte-art-card__kind {
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    --aparte-badge-font-size: var(--aparte-font-size-xs);
-    --aparte-badge-radius: var(--aparte-radius-sm);
-}
-.aparte-art-card__title {
-    font-size: var(--aparte-font-size-lg); font-weight: var(--aparte-font-weight-medium);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-/* The geometry is `.aparte-dot`; a streaming card breathes on the accent rather than
-   the status colour, and larger, because it marks a whole card and not a line. */
-.aparte-art-card__pulse {
-    --aparte-status-dot-size: var(--aparte-art-card-pulse-size);
-    --aparte-status-color: var(--aparte-accent);
-}
-.aparte-art-card__actions { display: flex; gap: var(--aparte-space-2); }
-.aparte-art-card__btn {
-  /* Same as .aparte-action-btn: declare the size, let the recipe draw. */
-  --aparte-btn-size: var(--aparte-art-card-btn-size);
-}
-.aparte-art-card__btn:hover:not(:disabled) {
-    background: var(--aparte-surface-hover);
-    border-color: var(--aparte-border);
-    color: var(--aparte-text);
-}
-.aparte-art-card__btn:disabled { opacity: var(--aparte-disabled-opacity); cursor: not-allowed; }
-.aparte-art-card__tabs {
-    /* justify-content and the padding are DECLARED, not left to a default.
-       Core is light DOM on purpose - no shadow root, no ::part(), any selector
-       reaches in - and the corollary is that a component must state what its
-       layout depends on, because an undeclared property has nothing to override
-       a host rule with. A consuming page with a bare nav selector setting
-       justify-content: space-between and padding-top (this library's own docs
-       site had exactly that) otherwise pushes these two tabs to opposite ends of
-       the card and pads the row out.
-
-       flex-end, and Code first in the DOM. The card OPENS on Code - mounting the
-       preview would execute model-authored code with no gesture (ratified
-       decision #8) - and a selected tab sitting second reads backwards. Right,
-       because the header above puts the artifact's identity on the left and its
-       copy/download buttons on the right, so this keeps every control in one
-       column. DOM order is also keyboard order, so the tab a reader lands on
-       first is the one already showing. */
-    display: flex; justify-content: flex-end; align-items: stretch; gap: var(--aparte-space-1);
-    padding: var(--aparte-space-2) var(--aparte-space-4) 0;
-    border-bottom: var(--aparte-border-width) solid var(--aparte-border);
-    background: var(--aparte-surface-2);
-}
-/* The tabs are `.aparte-tabs--underline`, like the elicitation panel's steps — one
-   tab in this library, not one per component. Only the row's own business stays. */
-.aparte-art-card__tabs button { font-size: var(--aparte-font-size-sm); }
-/* The card's heights, as variables with ONE owner each.
-   They were four hardcoded numbers in the only part of this card that did not
-   use a variable - everything else here already reads var(--aparte-code-bg) and
-   friends - and two of them had to agree while a third contradicted a fourth:
-   the code pane repeated the body's 600px, and the "press Preview" placeholder
-   was 120px tall inside a body whose min-height said 80, so that minimum applied
-   to nothing.
-   The frame stays a FIXED height rather than an aspect ratio, which is what
-   embeds of arbitrary HTML actually do - CodeSandbox documents 500px, StackBlitz
-   takes a height parameter - because a frame with an opaque origin cannot be
-   measured and a 16/10 ratio on a wide card is enormous. The vh cap is the part
-   that was missing: a fixed 480px should not own a phone screen.
-   Each default lives in its read, as var(--x, literal), the way every other
-   value in this file already does - not in a declaration block on top of the
-   fallbacks, which would be two owners of one number again. It also means the
-   docs' CSS-variable generator finds them: its sweep looks for reads that
-   carry a fallback, so a read without one is a public knob nobody documents. */
-.aparte-art-card__body {
-    position: relative;
-    /* The placeholder is the tallest thing this box can hold while empty, so it
-       IS the minimum - one number instead of two that disagreed. */
-    min-height: var(--aparte-artifact-pending-height, 120px);
-    max-height: var(--aparte-artifact-body-max, 600px);
-    overflow: hidden;
-}
-.aparte-art-card__pane { display: none; height: 100%; }
-.aparte-segment-artifact-card[data-tab="code"]    .aparte-art-card__pane[data-pane="code"]    { display: block; }
-.aparte-segment-artifact-card[data-tab="preview"] .aparte-art-card__pane[data-pane="preview"] { display: block; }
-.aparte-art-card__pane[data-pane="code"] {
-    /* The body already caps this; repeating the number was the second owner. */
-    max-height: var(--aparte-artifact-body-max, 600px); overflow: auto;
-}
-.aparte-art-card__frame {
-    display: block;
-    width: 100%;
-    height: min(var(--aparte-artifact-frame-height, 480px), var(--aparte-artifact-frame-max, 70vh));
-    border: 0;
-    background: var(--aparte-art-paper-bg);
-}
-.aparte-art-card__pending {
-    display: flex; align-items: center; justify-content: center;
-    height: var(--aparte-artifact-pending-height, 120px);
-    color: var(--aparte-text-muted);
-    font-size: var(--aparte-font-size-lg);
-    font-style: italic;
-}
-/* ── Binary file artifact (xlsx/pdf/docx) ──────────────────── */
-.aparte-art-file__card {
-    display: flex; align-items: center; gap: var(--aparte-space-6);
-    padding: var(--aparte-space-6) var(--aparte-space-7);
-    background: var(--aparte-surface-2);
-    border-bottom: var(--aparte-border-width) solid var(--aparte-border);
-}
-.aparte-art-file__body {
-    position: relative;
-}
-.aparte-art-file__code-pane {
-    max-height: var(--aparte-artifact-file-code-max, 360px); overflow: auto;
-    background: var(--aparte-code-bg);
-}
-.aparte-art-file__preview-pane {
-    max-height: var(--aparte-artifact-file-preview-max, 460px);
-    overflow: auto;
-    background: var(--aparte-art-paper-bg);
-    /* Preview is a document view — force light scheme regardless of
-       the app theme, with a dark text colour so cells stay readable. */
-    color: var(--aparte-art-paper-text);
-}
-.aparte-art-file__icon {
-    width: var(--aparte-art-file-icon-size); height: var(--aparte-art-file-icon-size);
-    border-radius: var(--aparte-radius-lg);
-    display: flex; align-items: center; justify-content: center;
-    background: var(--aparte-art-file-icon-bg);
-    color: var(--aparte-art-file-icon-color);
-    font-weight: var(--aparte-font-weight-bold);
-    font-size: var(--aparte-font-size-sm);
-    letter-spacing: 0.04em;
-    flex-shrink: 0;
-}
-.aparte-art-file__icon[data-kind="pdf"]  { background: var(--aparte-art-file-icon-bg-pdf); }
-.aparte-art-file__icon[data-kind="docx"] { background: var(--aparte-art-file-icon-bg-docx); }
-.aparte-art-file__meta { flex: 1 1 auto; min-width: 0; }
-.aparte-art-file__meta-name {
-    font-weight: var(--aparte-font-weight-semibold); font-size: var(--aparte-font-size-base);
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.aparte-art-file__meta-sub {
-    font-size: var(--aparte-font-size-sm);
-    color: var(--aparte-text-muted);
-}
-.aparte-art-file__actions { display: flex; gap: var(--aparte-space-3); flex-shrink: 0; }
-/* The chrome is `.aparte-btn`; every one of these is a `--primary --solid`, so the
-   fill comes from the recipe. Its own measurements stay: a labelled button in a card
-   is roomier than an icon in a row. */
-.aparte-art-file__btn {
-    padding: var(--aparte-space-3) var(--aparte-space-5);
-    font-size: var(--aparte-font-size-md);
-}
-/* NOTHING here repaints the button, and the comment above is why. These seven lines
-   re-declared `background`, `color`, `border-color` and a hover the recipe already
-   paints — a migration leftover that contradicted the sentence directly above it.
-
-   Five of them were inert duplicates. The sixth was not: `color: var(--aparte-text-inverse)`
-   overrode `--aparte-btn-on-intent`, which the recipe derives from the fill. Measured in a
-   browser on the built stylesheet: 3.54:1 in the light theme against the recipe's 5.27 —
-   an AA failure on a visible button label, in the default theme. It was also the last
-   place in `styles/` forcing `--aparte-text-inverse` as ink on a coloured fill; badge and
-   field had already stopped.
-
-   The consumer cost was the sharper one: the one-attribute rebrand this library documents
-   re-derives the ink on every other solid-primary button and, here alone, kept a token
-   bound to core's own palette. `.aparte-art-file__btn:hover` went with them — at 0,2,0 it
-   was always beaten by `.aparte-btn--solid:hover:not(:disabled)` at 0,3,0, so it never
-   applied either. */
-/* Hide the download button until the sandbox has produced the buffer.
-   Avoids confusing the user with a disabled-but-styled-primary button
-   during streaming / compiling. */
-.aparte-segment-artifact-file:not([data-state="ready"]) .aparte-art-file__btn[data-action="download"] {
-    display: none;
-}
-.aparte-art-file__preview-pane th,
-.aparte-art-file__preview-pane td {
-    border: var(--aparte-border-width) solid var(--aparte-art-paper-border);
-    padding: var(--aparte-space-3) var(--aparte-space-5);
-    text-align: left;
-    white-space: nowrap;
-    color: var(--aparte-art-paper-text);
-    background: var(--aparte-art-paper-bg);
-}
-.aparte-art-file__preview-pane tr:nth-child(odd) td { background: var(--aparte-art-paper-row-alt); }
-.aparte-art-file__preview-pane tr:first-child td {
-    background: var(--aparte-art-paper-head-bg);
-    font-weight: var(--aparte-font-weight-semibold);
-    position: sticky; top: 0;
-    color: var(--aparte-art-paper-head-text);
-}
-.aparte-art-file__preview-empty {
-    padding: var(--aparte-art-file-preview-padding); text-align: center;
-    color: var(--aparte-text-muted);
-    font-size: var(--aparte-font-size-lg); font-style: italic;
-}
-.aparte-segment-artifact-file[data-state="error"] .aparte-art-file__icon {
-    background: var(--aparte-art-file-icon-bg-pdf);
-}
-.aparte-art-file__error {
-    padding: var(--aparte-space-8) var(--aparte-art-file-error-padding-inline);
-    background: var(--aparte-error-bg);
-    border-top: var(--aparte-border-width) solid var(--aparte-error-border);
-    color: var(--aparte-text);
-}
-.aparte-art-file__error-title {
-    font-weight: var(--aparte-font-weight-semibold);
-    font-size: var(--aparte-font-size-lg);
-    margin-bottom: var(--aparte-space-3);
-    color: var(--aparte-error-title);
-}
-/* A computed value shown back, which is `.aparte-output`. What stays is that this
-   one is an ERROR — tinted text on its own quiet ground — and that a raw message has
-   no spaces to wrap on, so it must be allowed to break mid-word. */
-.aparte-art-file__error-msg {
-    display: block;
-    padding: var(--aparte-space-3) var(--aparte-space-5);
-    margin-bottom: var(--aparte-space-4);
-    background: var(--aparte-art-file-error-msg-bg);
-    color: var(--aparte-error-text);
-    word-break: break-word;
-}
-.aparte-art-file__error-hint {
-    font-size: var(--aparte-font-size-sm);
-    color: var(--aparte-text-muted);
-    font-style: italic;
-}
 /*
  * aparté — The elicitation panel and the approval gate.
  *
@@ -6023,6 +6122,43 @@ textarea.aparte-elic-text {
    recipe. See `buildApprovalPanel` for why colour lost: an alert's vocabulary on a
    control, and 2.19:1 on the dark palette when it was tried as a fill instead. */
 
+/* What is being decided, between the question and the options.
+
+   The panel used to carry the tool's NAME and nothing else, so the arguments — the
+   whole of what a person approves — were only in the transcript row, behind a closed
+   disclosure. Capped and scrollable rather than unbounded: the panel itself is capped
+   at half the viewport, and a plan or a diff arriving as a tool argument would
+   otherwise push the Approve button off the bottom of the surface it is asked on.
+
+   Monospace, because it is JSON: the model's own bytes, not prose about them. */
+.aparte-approval-args-label {
+  margin: var(--aparte-space-3) var(--aparte-space-3) 0;
+  font-size: var(--aparte-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--aparte-text-muted);
+}
+
+.aparte-approval-args {
+  margin: var(--aparte-space-1) var(--aparte-space-3) 0;
+  padding: var(--aparte-space-3);
+  max-height: var(--aparte-approval-args-max-height, 8.5rem);
+  overflow: auto;
+  font-family: var(--aparte-code-font-family);
+  font-size: var(--aparte-approval-args-size, var(--aparte-font-size-sm));
+  line-height: var(--aparte-line-height-snug);
+  color: var(--aparte-text);
+  background: var(--aparte-surface-2);
+  border-radius: var(--aparte-radius-sm);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.aparte-approval-args:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: 1px;
+}
+
 /* The refusal's reason, in the user's words. Quiet by default and one line tall: it is
    the exception, not the expected act, and a box sized for a paragraph invites one. */
 .aparte-approval-instruction {
@@ -6088,11 +6224,27 @@ textarea.aparte-elic-text {
   margin-bottom: calc(-1 * var(--aparte-border-width));
 }
 
-/* Answered: readable, but it is not where you are. */
+/* Answered: readable, but it is not where you are — and marked, because a colour is
+   what the current chip has too. The mark is the `check` glyph, sized by the chip. */
 .aparte-elic-step[data-answered] {
   color: var(--aparte-text);
 }
 
+.aparte-elic-step__mark {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: var(--aparte-space-1);
+  color: var(--aparte-success);
+  --aparte-icon-size: 0.85em;
+}
+
+/* The tag beside a recommended option's label: the recipe draws it, this only keeps it
+   from stretching the title line. */
+.aparte-elic-option-badge {
+  vertical-align: middle;
+  margin-inline-start: var(--aparte-space-1);
+}
+
 .aparte-elic-step[aria-selected='true'] {
   color: var(--aparte-text);
   font-weight: var(--aparte-font-weight-semibold);
@@ -6110,16 +6262,37 @@ textarea.aparte-elic-text {
  * them in the order listed there, and check:derived-vars reads them concatenated in
  * that same order, the way a browser does.
  */
+
+/* A date group: its heading wears the menu's label recipe (`.aparte-menu__label`),
+   because that is what a heading over a list of rows is. Only the rhythm is its own. */
+.aparte-conv-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-conv-list-gap);
+}
+
+.aparte-conv-group + .aparte-conv-group {
+  margin-block-start: var(--aparte-space-3);
+}
+
 /* A row in a list, which is what `.aparte-menu__item` is. What stays is what belongs
    to a CONVERSATION row: it truncates, so it needs `min-width: 0`; and its own
-   measurements, because a sidebar row is tighter than a dropdown row. */
+   measurements, because a sidebar row is tighter than a dropdown row.
+
+   The row is a flex box around two real buttons — the title, which selects, and the
+   `⋯`. The padding sits on the title button, not the row, so that the button's focus
+   ring is the row's shape and a click on the row's inner margin lands on the button
+   rather than on nothing. */
 .aparte-conv-item {
+  position: relative;
   min-width: 0;
   gap: var(--aparte-conv-item-gap);
-  padding: var(--aparte-conv-item-padding);
+  padding: 0;
+  padding-inline-end: var(--aparte-space-2);
   border-radius: var(--aparte-conv-item-radius);
   color: var(--aparte-conv-item-color);
   font-size: var(--aparte-conv-item-font-size);
+  cursor: default;
 }
 
 /* Hover moves the ground UP, so the label has to move with it.
@@ -6134,31 +6307,36 @@ textarea.aparte-elic-text {
   color: var(--aparte-conv-item-color-active);
 }
 
-.aparte-conv-item:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
-  outline-offset: var(--aparte-focus-outline-offset);
-}
-
-.aparte-conv-item:hover .aparte-conv-item__delete {
-  opacity: 1;
+.aparte-conv-item__select {
+  appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  padding: var(--aparte-conv-item-padding);
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
 }
 
-.aparte-conv-item:hover .aparte-conv-item__archive {
-  opacity: 1;
+/* Inside the edge: the list clips horizontally (`overflow-x: hidden` in base.css), and
+   a ring drawn outside the row was cut on both sides. */
+.aparte-conv-item__select:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline-offset: calc(-1 * var(--aparte-focus-outline-width));
 }
 
-/* Keyboard access (WCAG 2.1.1): the archive/delete actions are opacity:0 until
-   hover, which would hide keyboard focus. Reveal + ring them on focus. */
-.aparte-conv-item:focus-within .aparte-conv-item__archive,
-.aparte-conv-item:focus-within .aparte-conv-item__delete {
-  opacity: 1;
-}
-
-.aparte-conv-item__archive:focus-visible,
-.aparte-conv-item__delete:focus-visible {
-  opacity: 1;
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
-  outline-offset: var(--aparte-focus-outline-offset);
+.aparte-conv-item__title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 
 /* The conversation you are in wears the mark's bar (display/mark.css) on its start
@@ -6166,7 +6344,6 @@ textarea.aparte-elic-text {
    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);
@@ -6182,61 +6359,73 @@ textarea.aparte-elic-text {
   pointer-events: none;
 }
 
-.aparte-conv-item--active .aparte-conv-item__delete {
-  opacity: 0;
+.aparte-conv-item--archived .aparte-conv-item__title {
+  font-style: italic;
+  opacity: 0.85;
 }
 
-.aparte-conv-item--active .aparte-conv-item__archive {
+/* The `⋯`: one quiet button per row, shown by hover, by focus, on the active row and
+   while its menu is open — never a permanent control, and never a red one. What the
+   recipe gives (shape, states, focus ring) it keeps; only the size and the resting
+   colour are the row's. */
+.aparte-conv-item__more {
+  flex-shrink: 0;
   opacity: 0;
+  width: var(--aparte-conv-action-btn-size);
+  height: var(--aparte-conv-action-btn-size);
+  color: var(--aparte-text-muted);
 }
 
-.aparte-conv-item__title {
+.aparte-conv-item:hover .aparte-conv-item__more,
+.aparte-conv-item:focus-within .aparte-conv-item__more,
+.aparte-conv-item--active .aparte-conv-item__more,
+.aparte-conv-item__more[aria-expanded="true"] {
+  opacity: 1;
+}
+
+.aparte-conv-item__more:hover {
+  color: var(--aparte-text);
+}
+
+/* The rename input takes the title button's place, so it inherits the row's slot and
+   only needs the field recipe plus a little air. */
+.aparte-conv-item__input {
   flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   min-width: 0;
+  margin: var(--aparte-space-1) 0 var(--aparte-space-1) var(--aparte-space-1);
 }
 
-.aparte-conv-item__delete {
-  --aparte-btn-radius: var(--aparte-conv-delete-radius);
-  opacity: 0;
-  width: var(--aparte-conv-action-btn-size);
-  height: var(--aparte-conv-action-btn-size);
-  color: var(--aparte-conv-delete-color);
-  /* DECLARED, not out-specified. `.aparte-btn:hover:not(:disabled)` weighs 0,3,0 and
-     `.aparte-conv-item__delete:hover` only 0,2,0, so the recipe won the background and
-     this button's red never applied — while the `color` below DID, because the recipe's
-     hover rule sets no colour. The result was the ink for a solid red fill painted on a
-     neutral surface: 1.17:1 in the light theme, 1.20 in the dark, measured in a browser.
-     The cross was invisible in both. Feeding the recipe its own token is the rule this
-     file's neighbours already follow, and it makes the pair agree again — 3.70 and 4.84,
-     both clear of the 3:1 a graphical object needs. */
-  --aparte-btn-bg-hover: var(--aparte-conv-delete-bg-hover);
+/* The row's menu: the menu recipe draws it, the element places it (`position: fixed`,
+   `top`/`left` computed at open time, closed on any scroll). Fixed rather than
+   absolute because the list scrolls, and an absolute menu on the last rows was clipped
+   by that overflow. */
+.aparte-conv-menu {
+  position: fixed;
+  --aparte-icon-size: var(--aparte-icon-size-sm);
 }
 
-.aparte-conv-item__delete:hover {
-  color: var(--aparte-conv-delete-color-hover);
+.aparte-conv-menu__item--danger {
+  color: var(--aparte-error);
 }
 
-.aparte-conv-item__archive {
-  --aparte-btn-radius: var(--aparte-conv-archive-radius);
-  opacity: 0;
-  width: var(--aparte-conv-action-btn-size);
-  height: var(--aparte-conv-action-btn-size);
-  color: var(--aparte-conv-archive-color, var(--aparte-text-muted));
-  /* Same reason as the delete button above: the recipe out-weighs a plain `:hover` here,
-     so this surface has to be declared as its token or it never applies. */
-  --aparte-btn-bg-hover: var(--aparte-conv-archive-bg-hover, var(--aparte-surface-4, var(--aparte-surface-3)));
+/* The one question the menu asks. */
+.aparte-conv-menu__confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-space-2) var(--aparte-space-3);
 }
 
-.aparte-conv-item__archive:hover {
-  color: var(--aparte-conv-archive-color-hover, var(--aparte-text));
+.aparte-conv-menu__question {
+  margin: 0;
+  font-size: var(--aparte-font-size-sm);
+  line-height: var(--aparte-line-height-snug);
 }
 
-.aparte-conv-item--archived .aparte-conv-item__title {
-  font-style: italic;
-  opacity: 0.85;
+.aparte-conv-menu__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--aparte-space-2);
 }
 /*
  * aparté — <aparte-suggestions>: the row of prompt starters.
@@ -6309,6 +6498,682 @@ aparte-context[data-level="warn"] .aparte-progress__bar {
 aparte-context[data-level="danger"] .aparte-progress__bar {
   background: var(--aparte-error);
 }
+
+/* The ring variant: a track and a value circle on a 36-unit box, sized by the two tokens.
+   `pathLength="100"` on the value circle (set by the element) makes the dash the
+   percentage itself, so the sheet needs no circumference. Rotated a quarter turn so the
+   value starts at twelve o'clock. */
+.aparte-context--ring {
+  gap: var(--aparte-space-1);
+}
+
+.aparte-context__ring {
+  flex: none;
+  width: var(--aparte-context-ring-size);
+  height: var(--aparte-context-ring-size);
+  transform: rotate(-90deg);
+}
+
+.aparte-context__track,
+.aparte-context__value {
+  fill: none;
+  stroke-width: var(--aparte-context-ring-stroke);
+}
+
+.aparte-context__track {
+  stroke: var(--aparte-surface-3);
+}
+
+.aparte-context__value {
+  --aparte-context-ratio: 0;
+  stroke: var(--aparte-progress-fill);
+  stroke-linecap: round;
+  stroke-dasharray: var(--aparte-context-ratio) 100;
+  transition: stroke-dasharray var(--aparte-duration-fast) var(--aparte-ease);
+}
+
+.aparte-context__value--empty {
+  visibility: hidden;
+}
+
+aparte-context[data-level="warn"] .aparte-context__value {
+  stroke: var(--aparte-warning);
+}
+aparte-context[data-level="danger"] .aparte-context__value {
+  stroke: var(--aparte-error);
+}
+/*
+ * aparté — <aparte-scroll-rail>: the ticks beside the transcript.
+ *
+ * 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 rail floats on the transcript's end edge, vertically centred, as a child of the
+ * chat host. `:has()` gives the host its containing block only while a rail is inside
+ * it — a bare `position: relative` on every chat would have moved any absolutely
+ * positioned child a consumer already placed there.
+ */
+aparte-chat:has(> aparte-scroll-rail),
+[data-aparte-chat]:has(> aparte-scroll-rail) {
+  position: relative;
+}
+
+aparte-scroll-rail {
+  position: absolute;
+  inset-inline-end: var(--aparte-space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: var(--aparte-z-floating);
+  display: block;
+  width: var(--aparte-scroll-rail-width);
+  max-height: calc(100% - 2 * var(--aparte-space-8));
+  overflow: hidden;
+}
+
+aparte-scroll-rail[hidden],
+aparte-scroll-rail[data-empty] {
+  display: none;
+}
+
+.aparte-scroll-rail__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--aparte-scroll-rail-gap);
+}
+
+/* A tick is a real button, drawn as a line. The hit area is the gap around it, drawn
+   by the pseudo-element so the line itself can stay two pixels. */
+.aparte-scroll-rail__tick {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: block;
+  width: var(--aparte-scroll-rail-tick-size);
+  height: var(--aparte-scroll-rail-tick-thickness);
+  padding: 0;
+  border: 0;
+  border-radius: var(--aparte-radius-full);
+  background: var(--aparte-border);
+  cursor: pointer;
+  transition:
+    width var(--aparte-duration-fast) var(--aparte-ease),
+    background var(--aparte-duration-fast) var(--aparte-ease);
+}
+
+.aparte-scroll-rail__tick::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--aparte-scroll-rail-gap) / 2) calc(-1 * var(--aparte-space-2));
+}
+
+.aparte-scroll-rail__tick:hover {
+  background: var(--aparte-text-muted);
+}
+
+.aparte-scroll-rail__tick[aria-current="true"] {
+  width: calc(var(--aparte-scroll-rail-tick-size) * 1.6);
+  background: var(--aparte-primary);
+}
+
+.aparte-scroll-rail__tick:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline-offset: var(--aparte-focus-outline-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aparte-scroll-rail__tick {
+    transition: none;
+  }
+}
+/*
+ * aparté — the shell: the chrome a whole application puts around the chat. A sidebar
+ * of conversations, a header, and the grid that holds them beside the transcript —
+ * what a ChatGPT-style page is made of, so a site can be built on aparté alone.
+ *
+ * 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.
+ */
+
+/*
+ * aparte-sidebar — the column beside the chat.
+ * A sized column that becomes a drawer under 48rem of window. The recipe draws the
+ * column and its four regions; `<aparte-sidebar>` adds the behaviour (collapse, the
+ * drawer, the search filter) and sets `data-drawer` on itself from the media query,
+ * which is the one attribute the rules below read.
+ *
+ *     <aside class="aparte-sidebar">
+ *       <div class="aparte-sidebar__header">
+ *         <span class="aparte-sidebar__brand">aparté</span>
+ *         <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat">
+ *           <aparte-icon name="edit"></aparte-icon>
+ *         </button>
+ *       </div>
+ *       <div class="aparte-sidebar__search aparte-field-group">
+ *         <input class="aparte-field aparte-field--sm" type="search" placeholder="Search" data-aparte-sidebar-search>
+ *       </div>
+ *       <div class="aparte-sidebar__body">
+ *         <aparte-conversation-list></aparte-conversation-list>
+ *       </div>
+ *       <div class="aparte-sidebar__footer">
+ *         <span class="aparte-avatar aparte-avatar--sm">P</span> Paul
+ *       </div>
+ *     </aside>
+ *
+ * The element wears the same class and adds the behaviour; `<aside class="aparte-sidebar">`
+ * is the look alone, which is what this page shows.
+ */
+aparte-sidebar,
+.aparte-sidebar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: var(--aparte-sidebar-width);
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--aparte-sidebar-bg);
+  border-inline-end: var(--aparte-border-width) solid var(--aparte-border);
+  color: var(--aparte-text);
+  transition: width var(--aparte-duration-slow) var(--aparte-ease);
+}
+
+/* In the flow, collapsed means gone: the column folds to nothing and the chat takes
+   the room. The children keep their width so the fold is a slide, not a squash. */
+.aparte-sidebar[collapsed]:not([data-drawer]) {
+  width: 0;
+  border-inline-end-width: 0;
+}
+
+/* The children keep the column's width while it collapses, so nothing reflows during
+   the transition. BORDER-box, or a padded child is the column plus its padding: the
+   header's button sat flush against the edge and the search field ran off it, clipped
+   — measured at 292px in a 260px column. The search field carries margins as well,
+   which border-box does not cover; its own rule subtracts them. */
+.aparte-sidebar > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: var(--aparte-sidebar-width);
+}
+
+.aparte-sidebar__header {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-space-4) var(--aparte-space-4) var(--aparte-space-2);
+}
+
+.aparte-sidebar__brand {
+  flex: 1;
+  min-width: 0;
+  font-weight: var(--aparte-font-weight-semibold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.aparte-sidebar__search {
+  margin: var(--aparte-space-2) var(--aparte-space-3);
+  min-width: calc(var(--aparte-sidebar-width) - 2 * var(--aparte-space-3));
+}
+
+/* The body is the one region that scrolls; the list inside keeps its own gap. */
+.aparte-sidebar__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--aparte-space-2) var(--aparte-space-3);
+  scrollbar-width: thin;
+  scrollbar-color: var(--aparte-scrollbar-thumb) var(--aparte-scrollbar-track);
+}
+
+.aparte-sidebar__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-space-3) var(--aparte-space-4);
+  border-block-start: var(--aparte-border-width) solid var(--aparte-border);
+  font-size: var(--aparte-font-size-sm);
+}
+
+/* The drawer: the same element, out of the flow, over the page. `inset-inline-start`
+   rather than a transform, so the scrim — a fixed child — stays relative to the
+   viewport and can cover the page from inside the element. */
+.aparte-sidebar[data-drawer] {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: var(--aparte-z-dropdown);
+  width: var(--aparte-sidebar-width);
+  box-shadow: var(--aparte-menu-shadow);
+  transition: inset-inline-start var(--aparte-duration-slower) var(--aparte-ease);
+}
+
+.aparte-sidebar[data-drawer][collapsed] {
+  inset-inline-start: calc(-1 * var(--aparte-sidebar-width) - var(--aparte-space-4));
+  box-shadow: none;
+}
+
+.aparte-sidebar__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: var(--aparte-scrim);
+}
+/*
+ * aparté — the header row of an application shell.
+ *
+ * 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.
+ */
+
+/*
+ * aparte-app-header — the bar above the chat.
+ * A recipe and nothing more, because a header has no behaviour of its own: a toggle
+ * for the sidebar (which `<aparte-sidebar>` wires from the `data-aparte-sidebar-toggle`
+ * attribute), the conversation's title, and an actions zone pushed to the end — a
+ * model selector, a share button, whatever the page needs. The toggle shows only
+ * under 48rem, where the sidebar is a drawer; above it the column is simply there.
+ *
+ *     <header class="aparte-app-header">
+ *       <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button" aria-label="Toggle the sidebar" data-aparte-sidebar-toggle>☰</button>
+ *       <span class="aparte-app-header__title">Deploy checklist</span>
+ *       <div class="aparte-app-header__actions">
+ *         <span class="aparte-tag">gpt-4.1</span>
+ *         <button class="aparte-btn aparte-btn--sm aparte-btn--ghost" type="button">Share</button>
+ *       </div>
+ *     </header>
+ */
+.aparte-app-header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3);
+  min-height: var(--aparte-app-header-height);
+  padding: var(--aparte-space-2) var(--aparte-space-4);
+  background: var(--aparte-surface-1);
+  border-block-end: var(--aparte-border-width) solid var(--aparte-border);
+  color: var(--aparte-text);
+}
+
+.aparte-app-header__title {
+  flex: 1;
+  min-width: 0;
+  font-weight: var(--aparte-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.aparte-app-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-2);
+  margin-inline-start: auto;
+}
+
+.aparte-app-header__toggle {
+  display: none;
+}
+
+/* The same 48rem the sidebar turns into a drawer at (`sidebar.css`). */
+@media (max-width: 48rem) {
+  .aparte-app-header__toggle {
+    display: inline-flex;
+  }
+}
+/*
+ * aparté — the grid that holds a sidebar, a header and the chat.
+ *
+ * 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.
+ */
+
+/*
+ * aparte-app-shell — sidebar beside, header above, the chat in the rest.
+ * A recipe: two columns and two rows, the sidebar spanning both rows, the header and
+ * the main area stacked in the second column. The chat fills `__main`, which is what
+ * gives it the height it needs to scroll (see the layout guide). Size the shell —
+ * `height: 100dvh` for a page — and everything inside follows. Under 48rem the sidebar
+ * leaves the grid to become a drawer, and the header's toggle appears.
+ *
+ *     <div class="aparte-app-shell" style="height: 18rem">
+ *       <aside class="aparte-sidebar">
+ *         <div class="aparte-sidebar__header"><span class="aparte-sidebar__brand">aparté</span></div>
+ *         <div class="aparte-sidebar__body"><aparte-conversation-list></aparte-conversation-list></div>
+ *       </aside>
+ *       <header class="aparte-app-header"><span class="aparte-app-header__title">Deploy checklist</span></header>
+ *       <main class="aparte-app-shell__main">
+ *         <aparte-chat>
+ *           <aparte-chat-viewport></aparte-chat-viewport>
+ *           <aparte-composer>
+ *             <div class="aparte-composer-shell">
+ *               <div class="aparte-composer-row">
+ *                 <aparte-composer-input></aparte-composer-input>
+ *                 <aparte-composer-send></aparte-composer-send>
+ *               </div>
+ *             </div>
+ *           </aparte-composer>
+ *         </aparte-chat>
+ *       </main>
+ *     </div>
+ */
+.aparte-app-shell {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  height: 100%;
+  overflow: hidden;
+  background: var(--aparte-surface);
+}
+
+.aparte-app-shell > aparte-sidebar,
+.aparte-app-shell > .aparte-sidebar {
+  grid-row: 1 / -1;
+}
+
+/* A drawer is out of the flow, so the grid closes the column it left. */
+.aparte-app-shell > .aparte-sidebar[data-drawer] {
+  grid-row: auto;
+}
+
+.aparte-app-shell > .aparte-app-header {
+  grid-column: 2;
+}
+
+.aparte-app-shell__main {
+  grid-column: 2;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* A chat — or a split holding one — fills the main area. Stated for the direct child
+   because that is where the height comes from: `<aparte-chat>` is `height: 100%` of a
+   parent that has none until this rule gives it one, and a split between the two is
+   the same case one level out. A pane CONTAINS a chat; a chat never contains a split. */
+.aparte-app-shell__main > aparte-chat,
+.aparte-app-shell__main > [data-aparte-chat],
+.aparte-app-shell__main > aparte-split,
+.aparte-app-shell__main > .aparte-split {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+/*
+ * aparté — the seam: two panes side by side, and the grid that lets one grow while
+ * the other gives way. The fourth piece of the shell, after the sidebar, the header
+ * and the grid that holds them.
+ *
+ * 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.
+ */
+
+/*
+ * aparte-split — two panes and a draggable seam. The chat in one, your pane in the
+ * other: a preview frame, an editor, an artifact card.
+ *
+ * The grid is the whole mechanism. `--aparte-split-position` is the primary pane's
+ * size; `--aparte-split-min` and `--aparte-split-max` are clamp bounds, so the
+ * browser does the clamping and nothing in JS parses a unit — px, %, rem and ch all
+ * work. Used without <aparte-split> this is a static split: set the position from
+ * your own media query and there is no drag, which is the Canvas shape.
+ *
+ * A pane CONTAINS a chat; a chat never contains a split.
+ *
+ *     <div class="aparte-split" style="height: 18rem">
+ *       <div>the chat</div>
+ *       <div class="aparte-split__handle"></div>
+ *       <div class="aparte-split__pane">the pane</div>
+ *     </div>
+ *
+ * The element wears the same class and adds the behaviour (drag, arrow keys, the APG
+ * separator's ARIA, one pane at a time under a breakpoint); `<div class="aparte-split">`
+ * is the look alone, which is what this page shows.
+ */
+
+/* The outer clamp is a guard, not decoration: a `--aparte-split-min` wider than the
+   container would otherwise eat the free pane whole and push the handle off the end.
+   Three tracks, always — the primary pane, the seam, the rest. */
+aparte-split,
+.aparte-split {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns:
+    clamp(
+      0px,
+      clamp(var(--aparte-split-min), var(--aparte-split-position), var(--aparte-split-max)),
+      calc(100% - var(--aparte-split-handle-size))
+    )
+    var(--aparte-split-handle-size)
+    minmax(0, 1fr);
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* A grid item's automatic minimum size is its content, so one long line in either
+   pane refuses to shrink and the seam stops tracking the pointer.
+
+   The tag is listed beside the class here and below for the reason the grid rule
+   lists it: the element adds the class at connect, so between parse and upgrade a
+   server-rendered split would be a grid whose items keep their content minimum. */
+aparte-split > *,
+.aparte-split > * {
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+/* The outside-the-shell half of the direct-child trap: <aparte-chat> is `height: 100%`
+   of a parent that has none unless the grid track gives it one. Inside the app shell
+   the same fix lives on `.aparte-app-shell__main`; split.css is imported after
+   app-shell.css, so a chat in a pane inside a shell reads this one.
+
+   `box-sizing` with it, because the chat's own sheet gives it a bottom padding — the
+   16px of breathing room under the composer that core owns on purpose. Left in the
+   default content-box that padding lands OUTSIDE the 100%, so the chat's border box
+   overflows its track by exactly the gap and `.aparte-split`'s `overflow: hidden`
+   eats it: the composer sits flush on the seam's bottom edge and the gap is gone. */
+aparte-split > aparte-chat,
+aparte-split > [data-aparte-chat],
+.aparte-split > aparte-chat,
+.aparte-split > [data-aparte-chat] {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+}
+
+/* The seam. `touch-action: none` so a drag on a touch screen resizes rather than
+   scrolling the page — without it the browser claims the gesture at the first move
+   and the pointer events stop arriving. */
+.aparte-split__handle {
+  position: relative;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  background: var(--aparte-border);
+  cursor: col-resize;
+  touch-action: none;
+  transition: background-color var(--aparte-duration-fast) var(--aparte-ease);
+}
+
+.aparte-split__handle:hover,
+.aparte-split__handle[data-dragging] {
+  background: var(--aparte-primary);
+}
+
+/* A real outline, and the ring kept as decoration.
+
+   The seam's whole keyboard story is arrowing it, and its only focus indicator was
+   `--aparte-focus-ring` — a soft wash that measures 1.39:1 against the page in the
+   light palette and 1.83:1 in the dark one, where WCAG asks 3:1 of a focus indicator.
+   `outline: none` with nothing in its place is the shape of that failure: the
+   indicator was not weak, it was absent, on a 4px band with `border: 0` that a
+   keyboard user has no other way to find.
+
+   The outline is what carries the contrast (3.54:1 light, 7.36:1 dark, measured); the
+   shadow stays because it reads as a glow AROUND the seam and the two do not fight.
+   The forced-colors entry in responsive.css keeps overriding the colour only — it is
+   now overriding an outline that exists rather than substituting for one that does
+   not. */
+.aparte-split__handle:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: 0;
+  box-shadow: var(--aparte-focus-ring);
+}
+
+/* The hit slop: a 4px seam is a 4px target, and a pointer misses it. The pseudo-element
+   is wider than the seam and centred on it, so the grab zone reaches into both panes
+   without the seam itself getting bigger. */
+.aparte-split__handle::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(var(--aparte-split-hit-area) / -2 + var(--aparte-split-handle-size) / 2);
+  inline-size: var(--aparte-split-hit-area);
+}
+
+/* The drag overlay, a child of the HANDLE for the duration of one gesture. Being the
+   topmost hit target it swallows an iframe pane's hit-testing (a drag over a frame is
+   otherwise lost to the frame's document), stops a text selection from starting, and
+   paints the drag cursor across the whole page. A child of the handle rather than of
+   the body so `click` — and therefore `dblclick` — still dispatches at the handle,
+   their nearest common ancestor.
+
+   It is `position: fixed`, so nothing between it and the viewport may establish a
+   containing block: `.aparte-split` must never get `container-type`, `transform`,
+   `filter` or `backdrop-filter`, or the overlay covers the split alone. */
+.aparte-split__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--aparte-z-dropdown);
+  cursor: col-resize;
+}
+
+/* An optional wrapper for the pane that is not a chat — the pane equivalent of
+   `.aparte-sidebar__body`. The chat pane does not use it: the viewport scrolls itself. */
+.aparte-split__pane {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  background: var(--aparte-surface-1);
+}
+
+/* `primary="end"` sizes the LAST pane instead of the first: the same three tracks,
+   read the other way round. */
+aparte-split[primary='end'],
+.aparte-split--primary-end {
+  grid-template-columns:
+    minmax(0, 1fr)
+    var(--aparte-split-handle-size)
+    clamp(
+      0px,
+      clamp(var(--aparte-split-min), var(--aparte-split-position), var(--aparte-split-max)),
+      calc(100% - var(--aparte-split-handle-size))
+    );
+}
+
+/* The other axis. The attribute and the class are selected in the same rule so the
+   static recipe and the live element can never draw two different things. */
+aparte-split[orientation='vertical'],
+.aparte-split--vertical {
+  grid-template-columns: none;
+  grid-template-rows:
+    clamp(
+      0px,
+      clamp(var(--aparte-split-min), var(--aparte-split-position), var(--aparte-split-max)),
+      calc(100% - var(--aparte-split-handle-size))
+    )
+    var(--aparte-split-handle-size)
+    minmax(0, 1fr);
+}
+
+/* The one rule in this sheet that out-specifies the stacked block below — two
+   attributes against its one — so it has to opt out of the stacked state by hand or a
+   vertical `primary="end"` split keeps three rows while showing one pane, and the two
+   empty tracks take the height off the pane that is left. */
+aparte-split[orientation='vertical'][primary='end']:not([data-stacked]),
+.aparte-split--vertical.aparte-split--primary-end:not(.aparte-split--only-start):not(.aparte-split--only-end) {
+  grid-template-rows:
+    minmax(0, 1fr)
+    var(--aparte-split-handle-size)
+    clamp(
+      0px,
+      clamp(var(--aparte-split-min), var(--aparte-split-position), var(--aparte-split-max)),
+      calc(100% - var(--aparte-split-handle-size))
+    );
+}
+
+aparte-split[orientation='vertical'] > .aparte-split__handle,
+.aparte-split--vertical > .aparte-split__handle {
+  cursor: row-resize;
+}
+
+aparte-split[orientation='vertical'] > .aparte-split__handle::after,
+.aparte-split--vertical > .aparte-split__handle::after {
+  inset-block: calc(var(--aparte-split-hit-area) / -2 + var(--aparte-split-handle-size) / 2) auto;
+  inset-inline: 0;
+  inline-size: auto;
+  block-size: var(--aparte-split-hit-area);
+}
+
+aparte-split[orientation='vertical'] .aparte-split__scrim,
+.aparte-split--vertical .aparte-split__scrim {
+  cursor: row-resize;
+}
+
+/* One pane at a time. `data-stacked` is written by the element from its breakpoint;
+   the two modifier classes are the byte-identical CSS route for a host that owns its
+   own breakpoint. The shown pane spans all three tracks and the seam goes with the
+   pane it no longer separates — including its tab stop, which the element removes.
+
+   Not "position: 100% and a zero-size handle": that leaves a focusable separator of
+   no width sitting in the tab order. */
+aparte-split[data-stacked],
+.aparte-split--only-start,
+.aparte-split--only-end {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+aparte-split[data-stacked] > .aparte-split__handle,
+.aparte-split--only-start > .aparte-split__handle,
+.aparte-split--only-end > .aparte-split__handle {
+  display: none;
+}
+
+aparte-split[data-stacked]:not([pane='end']) > :nth-child(3),
+.aparte-split--only-start > :nth-child(3) {
+  display: none;
+}
+
+aparte-split[data-stacked][pane='end'] > :nth-child(1),
+.aparte-split--only-end > :nth-child(1) {
+  display: none;
+}
+
+/* `disabled` is inert, so it must not look grabbable: the element takes the tab stop
+   away and swallows the pointer, and a resize cursor plus a hover highlight on a seam
+   that answers nothing is exactly the half-rendered affordance the house rule forbids.
+   The seam itself stays drawn — it still separates two panes.
+
+   Last in the sheet because it must out-rank the vertical `cursor: row-resize` above,
+   which it ties with on specificity. Attribute only: the static recipe has no
+   behaviour, so there is no live-versus-static pair to keep in step. */
+aparte-split[disabled] > .aparte-split__handle {
+  cursor: default;
+}
+
+aparte-split[disabled] > .aparte-split__handle:hover {
+  background: var(--aparte-border);
+}
 /*
  * aparté — Reset-agnostic typography for model-authored markdown.
  *
@@ -6476,6 +7341,26 @@ aparte-context[data-level="danger"] .aparte-progress__bar {
   overflow-y: auto;
 }
 
+/* A fenced block that came through MARKDOWN, not through the `code` segment.
+   `@aparte/plugin-marked` renders ``` as a bare <pre><code>, and the recipe below is
+   scoped to `.aparte-code-content-wrapper` — a class only the code SEGMENT renderer
+   emits, which marked cannot produce. So a markdown block matched no `pre` rule at all
+   and kept the UA's `white-space: pre`: it never wrapped, laid out at its own intrinsic
+   width, and `aparte-chat-bubble`'s `overflow: hidden` amputated the tail. No scrollbar,
+   no ellipsis — the code was simply gone. Measured on the vanilla example: one block's
+   `scrollWidth` was a CONSTANT 963px at chat widths 1500, 800, 600, 512 and 380, against
+   client widths 776 / 724 / 524 / 460 / 328. It overflowed even at 1500.
+
+   Only the two wrapping declarations are shared, not the surface: the padding and the
+   background below are the code CARD's, and a markdown block has no card. Giving it one
+   is a look decision, not this fix. */
+.aparte-content pre,
+.aparte-segment-content pre,
+.aparte-thinking-content pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .aparte-code-content-wrapper pre {
   margin: 0;
   padding: var(--aparte-space-6);
@@ -6489,22 +7374,6 @@ aparte-context[data-level="danger"] .aparte-progress__bar {
   overflow-x: hidden;
   background: var(--aparte-code-bg);
 }
-.aparte-art-card__pane[data-pane="code"] pre {
-    margin: 0; padding: var(--aparte-space-6);
-    font-size: var(--aparte-font-size-md);
-    background: var(--aparte-code-bg);
-}
-.aparte-art-file__code-pane pre {
-    margin: 0; padding: var(--aparte-space-6);
-    font-size: var(--aparte-font-size-md);
-    font-family: var(--aparte-code-font-family);
-}
-.aparte-art-file__preview-pane table {
-    border-collapse: collapse;
-    width: 100%;
-    font-size: var(--aparte-font-size-md);
-    font-family: inherit;
-}
 /*
  * aparté — Container-width and pointer-modality adjustments. LAST on purpose.
  *
@@ -6531,14 +7400,17 @@ aparte-context[data-level="danger"] .aparte-progress__bar {
 }
 
 /* Windows high contrast. In forced-colors mode the UA repaints colours and
-   drops box-shadow entirely — so the two focus indicators drawn with
+   drops box-shadow entirely — so the focus indicators drawn with
    --aparte-focus-ring, and the error ring on an avatar, do not merely change
    colour, they VANISH. An outline is painted, and `Highlight` is the system's
    own focus colour, so the indicator survives without fighting the user's
    palette. Only the indicators that disappear are restated here: everything
-   whose affordance is text or a border already survives on its own. */
+   whose affordance is text or a border already survives on its own — which the
+   split's seam does not, being a 4px band with `border: 0` whose entire keyboard
+   story is arrowing it. */
 @media (forced-colors: active) {
   .aparte-thumb--image[role='button']:focus-visible,
+  .aparte-split__handle:focus-visible,
   .aparte-provider-select:focus,
   .aparte-model-select:focus {
     outline: var(--aparte-focus-outline-width) solid Highlight;
@@ -6626,11 +7498,26 @@ aparte-context[data-level="danger"] .aparte-progress__bar {
     opacity: 1;
   }
 
-  /* Hover cannot reveal these on touch — keep them visible and tappable. */
-  .aparte-conv-item__delete,
-  .aparte-conv-item__archive {
+  /* Nor the ✕ on a pending attachment, which is the only way to remove one. */
+  .aparte-thumb__remove {
+    opacity: 1;
+  }
+
+  /* Hover cannot reveal the row's ⋯ on touch — keep it visible and tappable. */
+  .aparte-conv-item__more {
     opacity: 1;
     --aparte-conv-action-btn-size: 28px;
   }
+
+  /* A 4px seam is no target for a finger — the same modality rule the buttons above
+     follow. The seam keeps its width; only the invisible grab zone grows. */
+  .aparte-split__handle {
+    --aparte-split-hit-area: var(--aparte-touch-target-size);
+  }
+
+  /* A 2px tick is no target for a finger; the minimaps of the market hide on touch too. */
+  aparte-scroll-rail {
+    display: none;
+  }
 }