Skip to content

mac: the composer, px for px against the lab - #297

Merged
stupart merged 1 commit into
mainfrom
feat/composer-px
Sep 16, 2026
Merged

stupart merged 1 commit into
mainfrom
feat/composer-px

Conversation

@stupart

@stupart stupart commented Sep 16, 2026

Copy link
Copy Markdown
Owner

Tyler: "the main input box especially needs help — go px by px improving the mac app."

Every value below is read off workspace-lab.html — the running prototype he compares against — and cited to its selector. I had been porting numbers out of §3's prose without opening the lab, which is how these drifted.

lab was now
card padding .cbox{padding:6px} 14 / 8 6
card background .cbox{background:var(--surface)} raised surface
card edge --shFloat's 0.5 px ring none 0.5 hairline
inner field box none radius-8 box removed
text #ta{font:var(--read)/22px} → 15/22 12.5 / 16 15 / 22
field padding #ta{padding:8px 10px 4px} 6 / 8 8 · 10 · 4
max lines §3 "1 to 8 lines" 6 8
bar .cbar{gap:4;height:34;padding-left:2} gap 8, no height 4 / 34 / 2
stack gap .cbar sits directly under #ta 8 0
mic .mic{width:30;background:var(--fill)} 28, hover 30, fill
send .send{width:30;background:var(--accent)} 28, brand cyan 30, ink
caption .cap{font:500 12px} 10.5 12
destination .dest{gap:5;font-size:12;color:var(--text3);margin-left:8} absent added
bar order + · mic · cap · dest · sp · recite · send recite before the spacer fixed

The inner box was the main offender. The field had its own rounded background inside the composer's — a card within a card, which §3 forbids ("No other cards") and the lab doesn't have. That plus the stack gap is where the dead height came from.

One colour call, flagged

.send in the lab is --accent — near-black ink, not the brand cyan the app used. I've matched the lab, because that's the reference you're comparing against, and because cyan at full strength is meant to say one thing only: your microphone is open. It reverts in one line if you'd rather keep cyan.

I deliberately did not touch the mic's voice-state colours. Palette.swift says that language "moves as its own change, to be seen and reacted to" — so only the mic's resting background changed (hover → fill, which is what --fill resolves to).

ConchPalette.accent is the legacy orange, so the send uses new ink / onInk entries mapped to ConchColor.accent / onAccent rather than repurposing it.

Guards

Nothing pinned a single composer value before this — which is exactly how it drifted from the lab. Every number above is now guarded and cited to its CSS selector.

mutation result
the card goes back to 14/8 padding 1 fail
the mic shrinks to the icon-button size 1 fail
send goes back to brand cyan 1 fail
the 0.5 hairline ring is dropped 1 fail
the field drops back to 16 pt lines 1 fail
the destination chip is removed 1 fail
recite drifts back before the spacer 1 fail
the stack gap comes back 1 fail
the chip loses its 8 of indent 1 fail

Gate

bun test 2302/0 exit 0 · tsc --noEmit exit 0 · Mac xcodebuild BUILD SUCCEEDED · iOS xcodebuild BUILD SUCCEEDED — and photographed on the real window at each step, with the camera fixed by #296 so the frames are the light appearance you actually see.

🤖 Generated with Claude Code

https://claude.ai/code/session_01SfEX6bfwCGXtThk1JRNmsE

Every value read off workspace-lab.html and cited to its selector, after
Tyler said the app does not match the mockups and the js version felt better.

.cbox{padding:6px;background:var(--surface)} plus --shFloat's 0.5px ring;
#ta{font:15px/22px;padding:8px 10px 4px} to eight lines; .cbar{gap:4px;
height:34px;padding-left:2px} sitting directly under the field with no stack
gap; .mic and .send at 30 where .ib stays 28; .cap at 12; and .dest -- the
destination chip -- which did not exist.

The main offender was an inner field box: a rounded background inside the
composer's own, a card within a card, which §3 forbids and the lab does not
have. That and the stack gap are where the dead height came from.

One colour call, flagged for review: .send is --accent in the lab, near-black
ink, not the brand cyan the app used -- cyan at full strength is meant to say
only "your microphone is open". The mic's VOICE colours are untouched, since
Palette.swift says that language moves as its own change; only its resting
background moved to fill. ConchPalette.accent is the legacy orange, so the
send takes new ink/onInk entries rather than repurposing it.

Nothing pinned a single composer value before this, which is how it drifted.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SfEX6bfwCGXtThk1JRNmsE
@stupart
stupart merged commit 4724eb5 into main Sep 16, 2026
2 checks passed
@stupart
stupart deleted the feat/composer-px branch September 16, 2026 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant