aesthetic.computer / core
Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

slab/menuband: octave label intrinsic-width — symmetric 4 px gap on both arrows

Was setting widthAnchor 28 + alignment .center on the octave label,
which left ~5–6 px of empty padding on each side of the centered text
inside the label container — the left arrow then read as having too
much air between it and the number even with custom 4 px spacing
between views.

Drop the fixed width entirely. The label hugs its intrinsic content
width (text width plus a couple of px), so the 4 px setCustomSpacing
on each side is the actual visible gap. Symmetric, tight, reads as
one widget instead of three loose elements.

Site: download bumped to ?v=c8e113f.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

prompt.ac/@jeffrey c380af13 def3e078

+23 -9
+22 -8
slab/menuband/Sources/MenuBand/MenuBandPopover.swift
··· 123 123 // value model so the rest of the controller's API doesn't change; 124 124 // the visible buttons just nudge its `integerValue`. 125 125 octaveLabel = NSTextField(labelWithString: "+0") 126 - octaveLabel.font = NSFont.monospacedDigitSystemFont(ofSize: 18, weight: .bold) 126 + // Fully monospaced so "+", "-", and digits all carry the same 127 + // advance — value flips don't slide left or right between the 128 + // arrows. No fixed width — intrinsic content width hugs the text 129 + // tightly so the 4 px spacing on each side stays exactly 4 px, 130 + // not "4 + half-of-padding". 131 + octaveLabel.font = NSFont.monospacedSystemFont(ofSize: 17, weight: .semibold) 127 132 octaveLabel.textColor = .labelColor 128 - octaveLabel.alignment = .right 129 - octaveLabel.widthAnchor.constraint(equalToConstant: 30).isActive = true 133 + octaveLabel.alignment = .center 130 134 131 135 octaveStepper = NSStepper() 132 136 octaveStepper.minValue = -4 ··· 137 141 octaveStepper.action = #selector(octaveChanged(_:)) 138 142 octaveStepper.isHidden = true // value model only — UI is the arrows below 139 143 144 + // Chevrons sized to balance the 17 pt label between them. 145 + let chevConfig = NSImage.SymbolConfiguration(pointSize: 12, weight: .semibold) 146 + 140 147 let leftArrow = NSButton() 141 148 leftArrow.image = NSImage(systemSymbolName: "chevron.left", 142 - accessibilityDescription: "Octave down") 143 - leftArrow.bezelStyle = .recessed 149 + accessibilityDescription: "Octave down")? 150 + .withSymbolConfiguration(chevConfig) 151 + leftArrow.isBordered = false 144 152 leftArrow.controlSize = .small 145 153 leftArrow.imagePosition = .imageOnly 154 + leftArrow.contentTintColor = .secondaryLabelColor 146 155 leftArrow.target = self 147 156 leftArrow.action = #selector(octaveDown) 148 157 149 158 let rightArrow = NSButton() 150 159 rightArrow.image = NSImage(systemSymbolName: "chevron.right", 151 - accessibilityDescription: "Octave up") 152 - rightArrow.bezelStyle = .recessed 160 + accessibilityDescription: "Octave up")? 161 + .withSymbolConfiguration(chevConfig) 162 + rightArrow.isBordered = false 153 163 rightArrow.controlSize = .small 154 164 rightArrow.imagePosition = .imageOnly 165 + rightArrow.contentTintColor = .secondaryLabelColor 155 166 rightArrow.target = self 156 167 rightArrow.action = #selector(octaveUp) 157 168 158 169 // Arrows flank the number — left arrow, then big number, then 159 - // right arrow. Reads naturally as a "step left / right" widget. 170 + // right arrow. Tight 4 px gap on each side so the trio reads as 171 + // a single widget instead of three separate buttons. 160 172 titleRow.addArrangedSubview(leftArrow) 173 + titleRow.setCustomSpacing(4, after: leftArrow) 161 174 titleRow.addArrangedSubview(octaveLabel) 175 + titleRow.setCustomSpacing(4, after: octaveLabel) 162 176 titleRow.addArrangedSubview(rightArrow) 163 177 titleRow.addArrangedSubview(octaveStepper) // hidden, here for layout-time only 164 178
+1 -1
system/public/menuband/index.html
··· 879 879 <p class="tagline">Built-in macOS instruments, in the menu bar.</p> 880 880 881 881 <div class="button-row"> 882 - <a class="aqua" href="https://assets.aesthetic.computer/menuband/Menu-Band-0.1.dmg?v=5ca1a46" download> 882 + <a class="aqua" href="https://assets.aesthetic.computer/menuband/Menu-Band-0.1.dmg?v=c8e113f" download> 883 883 Download 884 884 <small>0.1 · Apple Silicon · 1.1 MB</small> 885 885 </a>