@aparte/core 0.10.0 → 0.11.0

package/dist/index.css

@@ -192,6 +192,11 @@
   --aparte-elic-option-desc-size: 0.78rem;
   --aparte-elic-control-size: 15px;
   --aparte-elic-input-radius: 6px;
+  /* The tool-call row's corner. Declared here rather than left as an inline
+     fallback in the renderer: an undeclared custom property still WORKS, which is
+     what makes it dangerous — it is absent from the generated CSS reference, so a
+     consumer has no way to discover the knob exists. */
+  --aparte-tool-row-radius: 6px;
   --aparte-elic-textarea-min-height: 64px;
   --aparte-elic-skip-size: 0.8rem;
   --aparte-elic-step-size: 0.78rem;
@@ -229,7 +234,7 @@
   --aparte-error-icon-size: 20px;
   --aparte-error-rail-width: 4px;
 
-  /* Prose (segment-content) */
+  /* Prose (aparte-segment-content) */
   --aparte-prose-p-margin: 0.4em 0;
   --aparte-prose-h1-size: 1.4em;
   --aparte-prose-h2-size: 1.25em;
@@ -412,10 +417,6 @@ aparte-chat {
   --aparte-code-border: var(--aparte-border);
   --aparte-code-header-text: var(--aparte-text-muted);
 
-  /* Progress */
-  --aparte-progress-bar-bg: var(--aparte-surface-3);
-  --aparte-progress-bar-fill: var(--aparte-primary);
-  --aparte-progress-label: var(--aparte-text);
 
   /* Scroll-to-bottom button */
   --aparte-scroll-btn-bg: var(--aparte-surface-1);
@@ -423,7 +424,7 @@ aparte-chat {
   --aparte-scroll-btn-border: var(--aparte-border);
   --aparte-scroll-btn-hover-bg: var(--aparte-surface-2);
 
-  /* Prose (segment-content) */
+  /* Prose (aparte-segment-content) */
   --aparte-prose-blockquote-border: var(--aparte-border);
   --aparte-prose-code-bg: var(--aparte-surface-2);
 
@@ -670,6 +671,91 @@ textarea.aparte-elic-text {
   z-index: 1;
 }
 
+/* ── An approval: a decision, not a value ───────────────────────────────────
+   The options are buttons, not radios, because a decision has two primary actions
+   of opposite polarity and the composer's one button cannot carry both. So they
+   settle on the first click, and approving costs one gesture rather than two.
+
+   The colours are the ones the inline Approve / Reject pair used, moved here from
+   the runtime-injected `getStyles()` string in the tool_call renderer. That move is
+   the point: injected CSS is invisible to a consumer's own rules, absent from the
+   generated CSS reference, and unreachable by `check:derived-vars`. The elicitation
+   panel made the same move for the same reason. */
+/* A COLUMN, not a row of pills.
+   The panel lives in a composer, which is narrow — two or three labels side by side
+   either wrap into an unreadable jumble or get squeezed. And the labels are not short:
+   a scope option reads "Approve, and always for this tool". A stacked list is also what
+   every reference implementation of this shows, for the same reason: one target per
+   line, full width, so the choice is read rather than aimed at. */
+.aparte-approval-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-approval-gap, 4px);
+  margin: 0 6px;
+}
+
+.aparte-approval-option {
+  font: inherit;
+  font-size: var(--aparte-approval-option-size, 0.85rem);
+  font-weight: var(--aparte-font-weight-medium, 500);
+  line-height: 1.35;
+  /* Left-aligned and full width: the eye reads down a list, and a centred label in a
+     wide target is harder to scan than a flush one. */
+  text-align: start;
+  width: 100%;
+  padding: var(--aparte-approval-option-padding, 8px 10px);
+  border-radius: var(--aparte-approval-option-radius, 8px);
+  cursor: pointer;
+  border: 1px solid var(--aparte-border, rgba(128, 128, 128, 0.3));
+  background: transparent;
+  color: var(--aparte-text);
+}
+
+.aparte-approval-option:hover {
+  background: var(--aparte-surface-2, rgba(128, 128, 128, 0.08));
+}
+
+/* Tone is carried by a leading rule, not by colouring the label or ringing the whole
+   button. Both of those were tried: a green word on a dark panel reads as a link, and a
+   coloured border on every option turns the list into a traffic light. A 2px edge says
+   which way an option goes while leaving the text plain. */
+/* The SOLID colours, not the `-border` pair. Those carry ~40% alpha because they were
+   made for a 1px box outline over a surface; on a 2px rule against a light background
+   the deny edge came out a pale pink that read as decoration. A rule wants a colour. */
+.aparte-approval-option--affirm {
+  border-inline-start: 2px solid var(--aparte-success, rgb(21, 128, 61));
+}
+
+.aparte-approval-option--deny {
+  border-inline-start: 2px solid var(--aparte-error, rgb(185, 28, 28));
+}
+
+/* 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 {
+  font: inherit;
+  font-size: var(--aparte-elic-input-size, 0.85rem);
+  color: var(--aparte-text);
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--aparte-border, rgba(128, 128, 128, 0.3));
+  border-radius: 0;
+  padding: 8px 10px 2px;
+  margin: 4px 6px 0;
+  resize: none;
+  overflow: hidden;
+  min-height: 1.6em;
+}
+
+.aparte-approval-instruction:focus {
+  outline: none;
+  border-top-color: var(--aparte-accent, rgba(128, 128, 128, 0.6));
+}
+
+.aparte-approval-instruction::placeholder {
+  color: var(--aparte-text-muted, rgba(128, 128, 128, 0.75));
+}
+
 .aparte-elic-skip {
   border: none;
   background: transparent;
@@ -1474,7 +1560,7 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
   font-size: var(--aparte-font-size-md, 13px);
 }
 
-.aparte-input-upper.has-content {
+.aparte-input-upper.aparte-has-content {
   display: flex;
 }
 
@@ -1701,7 +1787,7 @@ aparte-chat-status:not([visible]) {
    ========================================= */
 
 /* Text */
-.segment-text {
+.aparte-segment-text {
   word-wrap: break-word;
 }
 
@@ -1712,60 +1798,60 @@ aparte-chat-status:not([visible]) {
    ========================================= */
 
 .aparte-content,
-.segment-content {
+.aparte-segment-content {
   white-space: normal;
 }
 
 .aparte-content p,
-.segment-content p,
-.thinking-content p {
+.aparte-segment-content p,
+.aparte-thinking-content p {
   margin: var(--aparte-prose-p-margin, 0.4em 0);
 }
 
 .aparte-content p:first-child,
-.segment-content p:first-child,
-.thinking-content p:first-child {
+.aparte-segment-content p:first-child,
+.aparte-thinking-content p:first-child {
   margin-top: 0;
 }
 
 .aparte-content p:last-child,
-.segment-content p:last-child,
-.thinking-content p:last-child {
+.aparte-segment-content p:last-child,
+.aparte-thinking-content p:last-child {
   margin-bottom: 0;
 }
 
-.aparte-content h1, .segment-content h1, .thinking-content h1 { font-size: var(--aparte-prose-h1-size, 1.4em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.6em 0 0.2em; }
-.aparte-content h2, .segment-content h2, .thinking-content h2 { font-size: var(--aparte-prose-h2-size, 1.25em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.5em 0 0.2em; }
-.aparte-content h3, .segment-content h3, .thinking-content h3 { font-size: var(--aparte-prose-h3-size, 1.1em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.4em 0 0.15em; }
-.aparte-content h4, .segment-content h4, .thinking-content h4,
-.aparte-content h5, .segment-content h5, .thinking-content h5,
-.aparte-content h6, .segment-content h6, .thinking-content h6 { font-size: 1em; font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.3em 0 0.1em; }
+.aparte-content h1, .aparte-segment-content h1, .aparte-thinking-content h1 { font-size: var(--aparte-prose-h1-size, 1.4em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.6em 0 0.2em; }
+.aparte-content h2, .aparte-segment-content h2, .aparte-thinking-content h2 { font-size: var(--aparte-prose-h2-size, 1.25em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.5em 0 0.2em; }
+.aparte-content h3, .aparte-segment-content h3, .aparte-thinking-content h3 { font-size: var(--aparte-prose-h3-size, 1.1em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.4em 0 0.15em; }
+.aparte-content h4, .aparte-segment-content h4, .aparte-thinking-content h4,
+.aparte-content h5, .aparte-segment-content h5, .aparte-thinking-content h5,
+.aparte-content h6, .aparte-segment-content h6, .aparte-thinking-content h6 { font-size: 1em; font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.3em 0 0.1em; }
 
 .aparte-content ul,
-.segment-content ul,
-.thinking-content ul {
+.aparte-segment-content ul,
+.aparte-thinking-content ul {
   list-style: disc;
   padding-left: var(--aparte-prose-list-indent, 1.5em);
   margin: var(--aparte-prose-list-margin, 0.4em 0);
 }
 
 .aparte-content ol,
-.segment-content ol,
-.thinking-content ol {
+.aparte-segment-content ol,
+.aparte-thinking-content ol {
   list-style: decimal;
   padding-left: var(--aparte-prose-list-indent, 1.5em);
   margin: var(--aparte-prose-list-margin, 0.4em 0);
 }
 
 .aparte-content li,
-.segment-content li,
-.thinking-content li {
+.aparte-segment-content li,
+.aparte-thinking-content li {
   margin: var(--aparte-prose-li-margin, 0.15em 0);
 }
 
 .aparte-content blockquote,
-.segment-content blockquote,
-.thinking-content blockquote {
+.aparte-segment-content blockquote,
+.aparte-thinking-content blockquote {
   border-left: var(--aparte-prose-blockquote-border-width, 3px) solid var(--aparte-prose-blockquote-border, var(--aparte-border, #e5e7eb));
   padding-left: 1em;
   margin: 0.4em 0;
@@ -1774,20 +1860,20 @@ aparte-chat-status:not([visible]) {
 }
 
 .aparte-content strong,
-.segment-content strong,
-.thinking-content strong {
+.aparte-segment-content strong,
+.aparte-thinking-content strong {
   font-weight: var(--aparte-font-weight-semibold, 600);
 }
 
 .aparte-content em,
-.segment-content em,
-.thinking-content em {
+.aparte-segment-content em,
+.aparte-thinking-content em {
   font-style: italic;
 }
 
 .aparte-content code,
-.segment-content code,
-.thinking-content code {
+.aparte-segment-content code,
+.aparte-thinking-content code {
   font-family: var(--aparte-code-font-family, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace);
   font-size: var(--aparte-code-inline-font-size, 0.875em);
   background: var(--aparte-prose-code-bg, var(--aparte-code-bg, #f3f4f6));
@@ -1796,29 +1882,29 @@ aparte-chat-status:not([visible]) {
 }
 
 .aparte-content a,
-.segment-content a,
-.thinking-content a {
+.aparte-segment-content a,
+.aparte-thinking-content a {
   color: var(--aparte-primary, #6366f1);
   text-decoration: underline;
 }
 
 .aparte-content hr,
-.segment-content hr,
-.thinking-content hr {
+.aparte-segment-content hr,
+.aparte-thinking-content hr {
   border: none;
   border-top: var(--aparte-border-width, 1px) solid var(--aparte-border, #e5e7eb);
   margin: 0.75em 0;
 }
 
 /* Thinking */
-.segment-thinking {
+.aparte-segment-thinking {
   /* Understated disclosure: a muted left rail, not a filled card. */
   border-left: var(--aparte-thinking-rail-width, 2px) solid var(--aparte-thinking-border, #e5e7eb);
   margin: var(--aparte-space-5, 10px) 0;
   background: transparent;
 }
 
-.thinking-header {
+.aparte-thinking-header {
   display: flex;
   align-items: center;
   gap: var(--aparte-space-3, 6px);
@@ -1830,27 +1916,27 @@ aparte-chat-status:not([visible]) {
   list-style: none;
 }
 
-.thinking-header::-webkit-details-marker {
+.aparte-thinking-header::-webkit-details-marker {
   display: none;
 }
 
-.thinking-toggle {
+.aparte-thinking-toggle {
   margin-inline-start: auto;
   /* Logical property */
   transition: transform 0.2s;
   opacity: 0.55;
 }
 
-details[open] .thinking-toggle {
+details[open] .aparte-thinking-toggle {
   transform: rotate(180deg);
 }
 
-.thinking-toggle::after {
+.aparte-thinking-toggle::after {
   content: '▼';
   font-size: var(--aparte-thinking-toggle-size, 9px);
 }
 
-.thinking-content {
+.aparte-thinking-content {
   padding: var(--aparte-space-2, 4px) 0 var(--aparte-space-1, 2px) var(--aparte-space-5, 10px);
   font-size: var(--aparte-font-size-md, 13px);
   line-height: var(--aparte-thinking-content-line-height, 1.55);
@@ -1861,14 +1947,14 @@ details[open] .thinking-toggle {
 }
 
 /* Code */
-.segment-code {
+.aparte-segment-code {
   margin: var(--aparte-space-6, 12px) 0;
   border-radius: var(--aparte-radius-code);
   overflow: hidden;
   border: var(--aparte-border-width, 1px) solid var(--aparte-code-border, #e5e7eb);
 }
 
-.code-header {
+.aparte-code-header {
   display: flex;
   align-items: center;
   padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
@@ -1878,25 +1964,25 @@ details[open] .thinking-toggle {
   color: var(--aparte-code-header-text, #4b5563);
 }
 
-.code-filename {
+.aparte-code-filename {
   font-weight: var(--aparte-font-weight-semibold, 600);
   margin-inline-end: auto;
   /* Logical property: pushes language + copy to the right when filename is present */
 }
 
-.code-header-filler {
+.aparte-code-header-filler {
   flex: 1;
   /* No-filename placeholder — keeps language + copy right-aligned */
 }
 
-.code-language {
+.aparte-code-language {
   margin-inline-end: var(--aparte-space-4, 8px);
   /* Logical property */
   text-transform: uppercase;
   opacity: 0.7;
 }
 
-.code-copy {
+.aparte-code-copy {
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1908,23 +1994,23 @@ details[open] .thinking-toggle {
   justify-content: center;
 }
 
-.code-copy:hover {
+.aparte-code-copy:hover {
   background: var(--aparte-code-copy-hover-bg, rgba(0, 0, 0, 0.05));
 }
 
-.code-copy svg {
+.aparte-code-copy svg {
   width: var(--aparte-code-copy-icon-size, 14px);
   height: var(--aparte-code-copy-icon-size, 14px);
 }
 
-.code-content-wrapper pre {
+.aparte-code-content-wrapper pre {
   margin: 0;
   padding: var(--aparte-space-6, 12px);
   /* Wrap long lines instead of a horizontal scrollbar. `pre-wrap` honours
      newlines + indentation but soft-wraps overflowing lines; `overflow-wrap:
      anywhere` breaks unbreakable tokens (long URLs, hashes). Applies to both
      the plain <pre><code> initial render and the shiki <pre class="shiki">
-     replacement, since both sit inside .code-content-wrapper. */
+     replacement, since both sit inside .aparte-code-content-wrapper. */
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   overflow-x: hidden;
@@ -1940,7 +2026,7 @@ details[open] .thinking-toggle {
 }
 
 /* Error */
-.segment-error {
+.aparte-segment-error {
   display: flex;
   gap: var(--aparte-space-6, 12px);
   padding: var(--aparte-space-6, 12px) var(--aparte-space-8, 16px);
@@ -1953,7 +2039,7 @@ details[open] .thinking-toggle {
   font-family: var(--aparte-font-family, system-ui, sans-serif);
 }
 
-.error-icon-wrapper {
+.aparte-error-icon-wrapper {
   flex-shrink: 0;
   color: var(--aparte-error-solid, #dc2626);
   display: flex;
@@ -1961,29 +2047,29 @@ details[open] .thinking-toggle {
   padding-top: var(--aparte-space-1, 2px);
 }
 
-.error-icon-wrapper svg {
+.aparte-error-icon-wrapper svg {
   width: var(--aparte-error-icon-size, 20px);
   height: var(--aparte-error-icon-size, 20px);
 }
 
-.error-content {
+.aparte-error-content {
   flex: 1;
   min-width: 0;
 }
 
-.error-title {
+.aparte-error-title {
   font-weight: var(--aparte-font-weight-semibold, 600);
   font-size: var(--aparte-font-size-lg, 14px);
   margin-bottom: var(--aparte-space-2, 4px);
   color: var(--aparte-error-title, #7f1d1d);
 }
 
-.error-message {
+.aparte-error-message {
   font-size: var(--aparte-font-size-lg, 14px);
   line-height: var(--aparte-line-height-normal, 1.5);
 }
 
-.error-details {
+.aparte-error-details {
   margin-top: var(--aparte-space-4, 8px);
   padding-top: var(--aparte-space-4, 8px);
   border-top: var(--aparte-border-width, 1px) solid var(--aparte-error-border, #fecaca);
@@ -1993,35 +2079,455 @@ details[open] .thinking-toggle {
   white-space: pre-wrap;
 }
 
-/* Progress */
-.segment-progress {
-  margin: var(--aparte-space-6, 12px) 0;
-}
 
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--aparte-space-2, 4px);
-  color: var(--aparte-progress-label, #374151);
-  font-size: var(--aparte-font-size-lg, 14px);
-}
+/* ─────────────────────────────────────────────────────────────────────────────
+   Segment renderers — tool call · artifact card · pipeline waiting
+
+   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
+   for a CONSUMER's renderer — something registered through registerSegmentRenderer
+   or registerToolRenderer cannot edit this file, so `getStyles()` is its only way
+   onto the page. A BUILT-IN has this file, and two reasons to use it:
+
+     - check:derived-vars reads this path and nothing else. A declaration whose
+       value reads another variable has to sit on the 5-anchor layer or it cannot
+       follow a palette a subtree overrides, and one hidden in a renderer was
+       never checked at all.
+     - it is read as CSS, by tools and by people. A backtick closes a template
+       literal, and one did — the artifact card's own comment recorded it
+       happening — then it happened three more times in one sitting, the worst of
+       them rendering a `safe-text` source marker into an assistant's bubble as
+       prose, because inside a template literal a `//` comment is just text.
+
+   NOT a reason, though it was the first one I wrote here: reaching the public CSS
+   reference. `gen-css-vars.mjs` walks all of core's source for `var(--aparte-*)`
+   reads, so a knob a renderer read was already listed with its fallback as the
+   default — the move changed that file by zero lines. Worth recording, because the
+   plausible version of this argument is the one that gets repeated.
+
+   Moving them changes no contract either: core's entry imports this file and
+   package.json marks every .css a side effect, so importing @aparte/core has
+   always brought this sheet along.
+   ───────────────────────────────────────────────────────────────────────────── */
 
-.progress-bar {
-  height: var(--aparte-space-2, 4px);
-  background: var(--aparte-progress-bar-bg, #e5e7eb);
-  border-radius: var(--aparte-radius-xs);
-  margin-top: var(--aparte-space-4, 8px);
-  overflow: hidden;
+/* Tool call */
+.aparte-segment-tool-call { display: block; padding: 2px 0; }
+/* The row is the summary. list-style:none plus the ::-webkit- pseudo is the
+   pair that actually removes the native marker across engines. */
+/* A ROW, not a badge.
+   It was a rounded chip, which is what a tag looks like — and a tool call is not
+   a tag, it is a step of the turn. Every current implementation draws it as a
+   line: the disclosure control, the call's identity, and its state at the far
+   end. The chip also had to carry a border and a fill, so it competed with the
+   reply text beside it for attention it did not deserve. */
+.aparte-tool-summary {
+    display: flex; align-items: center; gap: 7px;
+    padding: 3px 6px; margin-inline-start: -6px;
+    border-radius: var(--aparte-tool-row-radius, 6px);
+    cursor: pointer; list-style: none;
+}
+.aparte-tool-summary:hover { background: var(--aparte-surface-2, rgba(128,128,128,0.07)); }
+.aparte-tool-summary::-webkit-details-marker { display: none; }
+.aparte-tool-toggle {
+    width: 0; height: 0; flex: none; margin-inline-start: -1px;
+    border-inline-start: 5px solid currentColor;
+    border-block: 4px solid transparent;
+    opacity: 0.5; transition: transform 0.15s;
+}
+.aparte-tool-summary:hover .aparte-tool-toggle { opacity: 0.9; }
+details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(90deg); }
+/* A rule down the leading edge, so the disclosure reads as belonging to the
+   pill above it rather than continuing the message text below. Without it
+   "Output" and the assistant's next sentence sat in one undifferentiated
+   column. */
+.aparte-tool-detail {
+    display: flex; flex-direction: column; gap: 8px;
+    /* Aligned under the row's icon, so the rule reads as descending from the
+       call rather than floating beside it. */
+    margin: 4px 0 6px 3px; padding: 2px 0 2px 12px;
+    border-inline-start: 1px solid var(--aparte-border, rgba(128,128,128,0.25));
+}
+.aparte-tool-part-label {
+    display: block; font-size: 0.68rem; text-transform: uppercase;
+    letter-spacing: 0.04em; opacity: 0.55; margin-bottom: 2px;
+}
+.aparte-tool-part-body pre { margin: 0; }
+/* Always in the DOM so update can leave the node alone and toggle hidden
+   instead — an attribute a test can read, where a CSS-only rule is invisible
+   to jsdom. */
+.aparte-tool-spinner[hidden] { display: none; }
+/* The call's identity: its icon and its name, and no decoration of its own.
+   No border, no fill, no tint at any status — the row is the container now, and
+   the colour lives on the state badge alone. A resolved call used to be filled
+   green, which made a finished step shout louder than the reply it belongs to. */
+.aparte-tool-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--aparte-text, inherit);
+    user-select: none;
+}
+/* A fixed square, and the glyph centred in it. The icon was baseline-aligned
+   inside an inline box, so it sat low against the name and moved with whatever
+   glyph the icon provider returned. */
+.aparte-tool-icon {
+    display: grid;
+    place-items: center;
+    width: 1em; height: 1em;
+    flex: none;
+    opacity: 0.7;
+}
+.aparte-tool-icon svg { width: 1em; height: 1em; display: block; }
+.aparte-tool-name { font-family: var(--aparte-code-font-family, ui-monospace, monospace); }
+/* The state, as a word with its glyph. Colour lives HERE and nowhere else.
+   Pushed to the far end by DOM order plus an auto inline-start margin, which is
+   the placement rule this repo already settled on: no left/right in a name, so
+   a right-to-left locale mirrors it for free. */
+.aparte-tool-state {
+    display: inline-flex; align-items: center; gap: 4px;
+    margin-inline-start: auto;
+    font-size: 0.72rem; font-weight: 500;
+    color: var(--aparte-text-muted, rgba(128,128,128,0.75));
+    user-select: none;
+}
+.aparte-tool-state svg { width: 0.9em; height: 0.9em; display: block; }
+[data-status="resolved"] .aparte-tool-state { color: var(--aparte-success, rgb(21,128,61)); }
+[data-status="rejected"] .aparte-tool-state,
+[data-status="aborted"] .aparte-tool-state { color: var(--aparte-error, rgb(185,28,28)); }
+/* The Approve / Reject button rules were here. They moved with the buttons, to
+   .aparte-approval-option in this same file - and what stayed behind was a
+   leftover: a rule tinting .aparte-tool-label's border while a decision was pending,
+   which stopped painting anything the moment the row redesign took that border
+   off .aparte-tool-label. It reached for a variable that was never declared, and it
+   survived because a template literal is not a stylesheet anyone greps. The
+   state is named in words by .aparte-tool-state now, and the decision is at the
+   composer. */
+.aparte-tool-spinner {
+    width: 10px; height: 10px;
+    border: 1.5px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    animation: tool-spin 0.7s linear infinite;
+}
+.aparte-tool-state { font-size: 0.75rem; }
+@keyframes tool-spin { to { transform: rotate(360deg); } }
+
+/* Artifact card */
+.aparte-segment-artifact-card {
+    display: flex; flex-direction: column;
+    margin: 8px 0;
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+    border-radius: 12px;
+    background: var(--aparte-surface, #fff);
+    overflow: hidden;
+    font: inherit;
+    color: var(--aparte-text, inherit);
+}
+.aparte-art-card__header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+    background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+    min-height: 36px;
+}
+.aparte-art-card__title-block { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.aparte-art-card__kind {
+    font-size: 0.7rem; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.04em;
+    padding: 2px 6px; border-radius: 4px;
+    background: var(--aparte-surface, #fff);
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.1));
+    color: var(--aparte-text-muted, rgba(0,0,0,0.6));
+}
+.aparte-art-card__title {
+    font-size: 0.85rem; font-weight: 500;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.aparte-art-card__pulse {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--aparte-accent, #3b82f6);
+    animation: aparte-art-card-pulse 1.2s ease-in-out infinite;
+}
+@keyframes aparte-art-card-pulse {
+    0%, 100% { opacity: 0.35; transform: scale(0.85); }
+    50%      { opacity: 1;    transform: scale(1.1);  }
+}
+.aparte-art-card__actions { display: flex; gap: 4px; }
+.aparte-art-card__btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+    cursor: pointer;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+.aparte-art-card__btn:hover:not(:disabled) {
+    background: var(--aparte-surface-hover, rgba(0,0,0,0.04));
+    border-color: var(--aparte-border, rgba(0,0,0,0.1));
+    color: var(--aparte-text, inherit);
+}
+.aparte-art-card__btn:disabled { opacity: 0.4; 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: 2px;
+    padding: 4px 8px 0;
+    border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+    background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+}
+.aparte-art-card__tabs button {
+    padding: 6px 12px;
+    font-size: 0.78rem;
+    background: transparent;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.6));
+    cursor: pointer;
+    transition: background 0.12s, color 0.12s;
+}
+.aparte-art-card__tabs button[aria-selected="true"] {
+    background: var(--aparte-surface, #fff);
+    border-color: var(--aparte-border, rgba(0,0,0,0.08));
+    color: var(--aparte-text, inherit);
+    font-weight: 500;
+}
+.aparte-art-card__tabs button:disabled { opacity: 0.4; cursor: not-allowed; }
+/* 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;
 }
-
-.progress-fill {
-  height: 100%;
-  background: var(--aparte-progress-bar-fill, #6366f1);
-  border-radius: var(--aparte-radius-xs);
-  transition: width 0.3s ease;
+.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__pane[data-pane="code"] pre {
+    margin: 0; padding: 12px;
+    font-size: 0.82rem;
+    background: var(--aparte-code-bg, #fafafa);
+}
+.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: #fff;
+}
+.aparte-art-card__pending {
+    display: flex; align-items: center; justify-content: center;
+    height: var(--aparte-artifact-pending-height, 120px);
+    color: var(--aparte-text-muted, rgba(0,0,0,0.5));
+    font-size: 0.85rem;
+    font-style: italic;
+}
+/* ── Binary file artifact (xlsx/pdf/docx) ──────────────────── */
+.aparte-segment-artifact-file {
+    display: flex; flex-direction: column;
+    margin: 8px 0;
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+    border-radius: 12px;
+    background: var(--aparte-surface, #fff);
+    overflow: hidden;
+    color: var(--aparte-text, inherit);
+    font: inherit;
+}
+.aparte-art-file__card {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 14px;
+    background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+    border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+}
+.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, #fafafa);
+}
+.aparte-art-file__code-pane pre {
+    margin: 0; padding: 12px;
+    font-size: 0.82rem;
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+}
+.aparte-art-file__preview-pane {
+    max-height: var(--aparte-artifact-file-preview-max, 460px);
+    overflow: auto;
+    background: #fff;
+    /* Preview is a document view — force light scheme regardless of
+       the app theme, with a dark text colour so cells stay readable. */
+    color: #1f2937;
+}
+.aparte-art-file__icon {
+    width: 40px; height: 40px;
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    background: linear-gradient(135deg, #1d6f42, #0f5132);
+    color: #fff;
+    font-weight: 700;
+    font-size: 0.78rem;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+}
+.aparte-art-file__icon[data-kind="pdf"]  { background: linear-gradient(135deg, #c0392b, #7d1f17); }
+.aparte-art-file__icon[data-kind="docx"] { background: linear-gradient(135deg, #1e5288, #0f3060); }
+.aparte-art-file__meta { flex: 1 1 auto; min-width: 0; }
+.aparte-art-file__meta-name {
+    font-weight: 600; font-size: 0.92rem;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.aparte-art-file__meta-sub {
+    font-size: 0.78rem;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+}
+.aparte-art-file__actions { display: flex; gap: 6px; flex-shrink: 0; }
+.aparte-art-file__btn {
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+    background: var(--aparte-surface, #fff);
+    color: var(--aparte-text, inherit);
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: background 0.12s ease;
+}
+.aparte-art-file__btn:hover { background: var(--aparte-surface-2, rgba(0,0,0,0.05)); }
+.aparte-art-file__btn--primary {
+    background: var(--aparte-primary, #6366f1);
+    color: #fff;
+    border-color: var(--aparte-primary, #6366f1);
+}
+.aparte-art-file__btn--primary:hover { filter: brightness(1.07); }
+/* 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 table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.82rem;
+    font-family: inherit;
+}
+.aparte-art-file__preview-pane th,
+.aparte-art-file__preview-pane td {
+    border: 1px solid rgba(0,0,0,0.10);
+    padding: 6px 10px;
+    text-align: left;
+    white-space: nowrap;
+    color: #1f2937;
+    background: #fff;
+}
+.aparte-art-file__preview-pane tr:nth-child(odd) td { background: #f9fafb; }
+.aparte-art-file__preview-pane tr:first-child td {
+    background: #f3f4f6;
+    font-weight: 600;
+    position: sticky; top: 0;
+    color: #111827;
+}
+.aparte-art-file__preview-empty {
+    padding: 20px; text-align: center;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.5));
+    font-size: 0.85rem; font-style: italic;
+}
+.aparte-segment-artifact-file[data-state="error"] .aparte-art-file__icon {
+    background: linear-gradient(135deg, #c0392b, #7d1f17);
+}
+.aparte-art-file__error {
+    padding: 16px 18px;
+    background: rgba(239, 68, 68, 0.05);
+    border-top: 1px solid rgba(239, 68, 68, 0.2);
+    color: var(--aparte-text, inherit);
+}
+.aparte-art-file__error-title {
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-bottom: 6px;
+    color: #b91c1c;
+}
+.aparte-art-file__error-msg {
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.78rem;
+    padding: 6px 10px;
+    background: rgba(0,0,0,0.04);
+    border-radius: 4px;
+    margin-bottom: 8px;
+    color: #7f1d1d;
+    word-break: break-word;
+}
+.aparte-art-file__error-hint {
+    font-size: 0.78rem;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+    font-style: italic;
 }
 
+/* Pipeline waiting */
+.aparte-segment-pipeline-waiting {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 2px;
+    min-height: 28px;
+}
+.aparte-pw-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--aparte-text-muted, #6b7280);
+    opacity: 0.3;
+    animation: pw-pulse 1.2s ease-in-out infinite;
+}
+.aparte-pw-dot:nth-child(2) { animation-delay: 0.2s; }
+.aparte-pw-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes pw-pulse {
+    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
+    40%            { opacity: 1;   transform: scale(1.1);  }
+}
 
 /* ─────────────────────────────────────────────────────────────────────────────
    Composer Primitives
@@ -2118,13 +2624,13 @@ aparte-composer-action {
 }
 
 /* ── Drag-over state on root ── */
-aparte-composer.is-dragover .aparte-composer-shell {
+aparte-composer.aparte-is-dragover .aparte-composer-shell {
   outline: var(--aparte-focus-outline-width, 2px) dashed var(--aparte-primary);
   outline-offset: -2px;
   border-radius: var(--aparte-radius-input, 12px);
 }
 /* fallback: no shell */
-aparte-composer.is-dragover:not(:has(.aparte-composer-shell)) {
+aparte-composer.aparte-is-dragover:not(:has(.aparte-composer-shell)) {
   outline: var(--aparte-focus-outline-width, 2px) dashed var(--aparte-primary);
   outline-offset: -2px;
   border-radius: var(--aparte-radius-input, 12px);
@@ -2186,6 +2692,23 @@ aparte-composer.is-dragover:not(:has(.aparte-composer-shell)) {
   justify-content: center;
 }
 
+/* A panel is mounted INSIDE that row, so its own buttons inherited the 44x44 sizing
+   above and rendered as circles with their labels spilling out. The rule above means
+   "the composer's own controls"; anything inside a panel is CONTENT, and a panel is
+   free to contain a button — the approval options are the first that do, and they will
+   not be the last. */
+[data-aparte-panel] button {
+  width: auto;
+  height: auto;
+  flex-shrink: 1;
+  /* The row also makes its controls centred flex boxes, which beats `text-align` — so a
+     left-aligned label in a panel came out centred until this line existed. Undo the
+     whole treatment, not the half of it that was visible. */
+  display: block;
+  justify-content: initial;
+  align-items: initial;
+}
+
 /* The composer's bottom row (mode picker, model selector, token counter…).
    `aparte-composer-toolbar` is the element consumers write — one name for vanilla and
    every wrapper. `.aparte-composer-footer` is the class the same row used to be built
@@ -2422,15 +2945,15 @@ aparte-conversation-list {
    Provider-HTML overflow guards
    ========================================= */
 
-/* Markdown providers inject arbitrary HTML into .segment-text, and the bubble
+/* 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. */
-.segment-text img {
+.aparte-segment-text img {
   max-width: 100%;
   height: auto;
 }
 
-.segment-text table {
+.aparte-segment-text table {
   display: block;
   max-width: 100%;
   overflow-x: auto;