feat(ui): govern tool-result preview surfaces onto @maka/ui previewVariants (#332 PR4) - #362
Merged
Merged
Conversation
…riants (#332 PR4) Retire the bespoke OverlayPreview family shell CSS onto a single literalize table, the last result-preview island in the chat conversation flow. What moved onto `previewVariants` (packages/ui/src/primitives/chat.tsx): - the shared `.maka-overlay-preview` base + `.maka-overlay-close` - file-diff, terminal, office-document, explore-agent + subagent, web-search cards - the bare json/text/rive `<pre>` dumps - the separate `.maka-load-tool-*` result card Each retired declaration becomes a 1:1 literal arbitrary utility, so the cva source string is the computed-style proof. Descendant rules on bare tags are folded into their container part via `[&_tag]:` variants, so call sites swap only the container className. Structured cards apply `cn(overlay, kind)`; the base's white-space / font-family are arbitrary so the kind overrides win by tailwind-merge, reproducing the retired two-class source-order cascade. `previewVariants` is exported on the @maka/ui barrel: the file-diff parts have a second, cross-package consumer — apps/desktop's non-chat artifact-preview.tsx, which co-migrates here so the shared `.maka-tool-diff*` shell retires without a temporary shared layer. The card-entrance `@keyframes maka-tool-card-enter` moves to maka-tokens.css (the canonical motion home). Zero visual change: locked by a new chat-preview cascade contract (retired selectors gone, keyframe relocated, escape literals + barrel export pinned, scale-drift banned). tool-output.css drops 535 lines, tool-stream.css 105. The PR3b contract releases `.maka-tool-diff*` / `.maka-tool-terminal*` (now legitimately retired); visible-copy / office / explore / subagent contracts re-point to the governed substrate.
8 tasks
…border survives (#332 PR4) The web-search error card layers `web-search-error` over `web-search` via cn. The override was a bare `[border-color:…]`/`[background:…]` longhand, which tailwind-merge does NOT collapse against the base's `[border:…]` shorthand / `bg-[…]` util — so both survive on the element and the winner is decided by Tailwind's emission order. The base `[border:…]` shorthand is emitted last and reset the error border-color back to the neutral `--foreground-10`, silently dropping the destructive tint (zero-visual-change violation; found in review). Restate the override in the SAME property forms (`[border:1px_solid_color-mix…]` shorthand + `bg-[color-mix…]`) so tailwind-merge collapses the base and the error — last in cn — wins deterministically, independent of emission order. Computed result is identical to the retired CSS (1px solid <tint> + <tint> bg). Pin it with a merge-collapse contract test in the ui suite.
…PR4)
The renderer Tailwind build scans `@source packages/ui/src`, so backtick
`[prop:…]`/`bg-[…]` examples in chat.tsx docstrings + the new contract test
comment were extracted as real arbitrary-utility candidates and emitted 6 dead
rules (e.g. `.[border:…]{border:…}`) into the bundle — ironic for a dead-CSS
retirement PR (2 of them came from this PR's own fix comment). Insert a space
inside each placeholder token (`[border: …]`) so the scanner no longer treats
it as a candidate. Comment-only; bundle drops the 6 dead rules, the real
maka-tool-card-enter animation/keyframe are untouched. Found in independent review.
PR3c (8163e1a) retired the ToolErrorBanner bespoke CSS onto the Alert primitive after this branch forked, overlapping PR4's tool-output.css / maka-tokens.css retirements. Resolution: - maka-tokens.css: keep PR4's @Keyframes maka-tool-card-enter; accept PR3c's deletion of the .maka-tool-error* block. - tool-output.css: keep PR4's preview-family deletion; accept PR3c's deletion of the .maka-tool-error-copy residue (drop the stale 'residue stays' comment). - components.tsx / visible-copy-hygiene-contract.test.ts: auto-merged (PR3c's Alert error banner + PR4's previewVariants live in disjoint regions). - chat-tool-card-cascade-contract (PR3b) + chat-preview-cascade-contract (PR4): drop .maka-tool-error from the out-of-scope 'kept' lists — PR3c legitimately retired it, so asserting it stays is now wrong. (This contract was latently red on main since PR3c merged; CI never caught it because the desktop pretest check-console gate fails first and the node:test suite never runs.) Verified: @maka/ui 15/15, desktop 1618/1618, renderer bundle has 0 .maka-tool-error rules + 0 dead rules + the maka-tool-card-enter keyframe.
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
#332 PR4 — retire the bespoke OverlayPreview family shell CSS onto one
@maka/uipreviewVariantsliteralize table. This is the last result-preview island in the chat conversation flow; it's governance (one substrate + a test net), not a redesign — zero visual change.Migrated surfaces (the whole family shares the
.maka-overlay-previewbase, so they move together):.maka-overlay-previewbase +.maka-overlay-close<pre>dumps.maka-load-tool-*result card (folded in for a clean sweep — nothing intool-output.cssrenders a result preview anymore)How
.maka-explore-agent-section li,.maka-web-search-preview > header strong, …) are folded into their container part via[&_tag]:/[&>tag]:variants, so call sites swap only the container className and children stay bare — matching the original descendant cascade exactly.cn(overlay, kind). The base'swhite-space/font-familyare written as arbitrary props so a kind override wins by tailwind-merge last-occurrence, reproducing the retired two-class source-order cascade without depending on stylesheet emit order. (Verified empirically.)previewVariantsis exported on the barrel — the file-diff parts have a 2nd, cross-package consumer:apps/desktop's non-chatartifact-preview.tsx, which co-migrates here so the shared.maka-tool-diff*shell retires with no temporary shared layer.@keyframes maka-tool-card-entermoves tomaka-tokens.css(canonical motion home, next tomaka-pulse/maka-tool-pulse). Reduced-motion / visual-smoke ride the global*rules, so the migrated cards need no per-element motion utility.tool-output.css−535 lines,tool-stream.css−105; net −360.Test net
chat-preview-cascade-contract.test.ts: retired selectors gone, out-of-scope neighbours (.maka-tool-error*,.maka-code,.maka-message-row,.composer, Settings live-query) survive, keyframe relocated, escape literals + barrel export pinned, semantic-scale drift banned..maka-tool-diff*/.maka-tool-terminal*(now legitimately retired).visible-copy-hygiene/office-documents-capability/explore-agent/subagent-uicontracts re-pointed to the governed substrate (intent preserved, style assertions follow the literals).Verification
cn(overlay, kind)override verified empirically (kind wins white-space/font-family; bare/non-overriding surfaces keep the base)var()token / oklch alpha in the original non-fixture CSS is present in the previewVariants literals (no value typos)npm run -w @maka/desktop screenshots:diffis the reviewer/CI pixel gate (baseline must stay unchanged); the other card surfaces are 1:1 literal translations locked by the contractcheck-dead-cssreports 11 dead.settingsPaletteSwatch-*classes — pre-existing onmain(dynamic template-string classes), unrelated to this PRTracks #332.