@marver-design/marver 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Notable changes to `@marver-design/marver`. Format follows [Keep a Changelog](https://keepachangelog.com); versions follow semver.
 
+## 0.3.1 - 2026-08-13
+
+### Fixed
+
+- Play-mode variant chrome: the current variant's name was invisible (theme ink on the always-dark glass pill - now the pill's own light ink), and switching variants jiggled the controls. Redesigned: the letter chips now use the sidebar's exact badge language (20px, 7px-radius, one shape in every state) so the two surfaces read as one concept, they LEAD the cluster as the stable anchor, and the name trails at natural width (capped with ellipsis + a tooltip carrying the full title) - a name change grows the pill rightward without moving anything underfoot.
+
 ## 0.3.0 - 2026-08-13
 
 The co-thinking release: the canvas now holds the thinking, not just the screens.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marver-design/marver",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components. The tool ships no AI - your coding agent is the designer.",
   "type": "module",
   "private": false,

package/src/client/shell/Play.tsx

@@ -420,7 +420,6 @@ function PlayInner() {
         </Tip>
         {variants.length > 1 && <>
           <i className="sep" />
-          <span className="vname">{(() => { const c = variants.find((v) => v.id === play.at); return c ? (c.title ?? (c.id.split('/').pop() ?? '').replace(/^[a-z]-/, '').replace(/-/g, ' ')) : '' })()}</span>
           {variants.map((v) => (
             <Tip inv key={v.id} label={<><b>{v.title ?? v.id}</b><span className="k">[ ]</span></>}>
               <button className={`vchip${v.id === play.at ? ' on' : ''}`} onClick={() => goTo(v.id)}>
@@ -428,6 +427,13 @@ function PlayInner() {
               </button>
             </Tip>
           ))}
+          {(() => {
+            // chips lead as the stable anchor; the name trails at natural width, so
+            // a length change grows the pill rightward instead of shifting the chips
+            const c = variants.find((v) => v.id === play.at)
+            const full = c ? (c.title ?? (c.id.split('/').pop() ?? '').replace(/^[a-z]-/, '').replace(/-/g, ' ')) : ''
+            return <Tip inv label={<b>{full}</b>}><span className="vname">{full}</span></Tip>
+          })()}
         </>}
       </div>
     </div>

package/src/client/shell/styles.css

@@ -587,12 +587,26 @@ body.sh-kbd .sh-app :focus-visible { outline: 2px solid var(--accent); outline-o
 .sub .chip:hover { color: var(--glass-ink); background: var(--glass-hover) }
 .sub .chip.on { color: #fff; background: var(--accent); border-color: var(--accent) }
 
-/* play-mode variant chips (SPEC-023 §6) */
-.sh-play-nav .vchip { min-width: 24px; font-weight: 700; font-size: 11px }
-.sh-play-nav .vchip.on { color: #fff; background: var(--accent); border-radius: 7px }
-
-.sh-play-nav .vname { font-size: 11px; font-weight: 600; color: var(--glass-ink-2); max-width: 120px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; padding: 0 2px }
+/* play-mode variant chips (SPEC-023 §6): the SAME badge language as the sidebar's
+   variant rows (20px, 7px-radius square, one consistent shape in every state) so the
+   two surfaces read as one concept - but in the pill's own dark-glass inks, never
+   theme tokens (the nav is always dark; theme ink goes invisible in light mode). */
+.sh-play-nav .vchip { width: 20px; height: 20px; min-width: 0; flex: none; margin: 0 1px;
+  border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
+  font: 700 10px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .6);
+  line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic }
+.sh-play-nav .vchip:hover { color: #f5f5f7; background: rgba(255, 255, 255, .1) }
+.sh-play-nav .vchip.on { color: #fff; background: var(--accent); border-color: var(--accent) }
+/* bordered chips read tighter than borderless icons at the same distance - the
+   divider needs a touch more air before the first chip */
+.sh-play-nav .sep + .vchip { margin-left: 5px }
+
+/* the current variant's name trails the chips at natural width - the chips anchor,
+   so a name change grows the pill rightward without shifting any control underfoot.
+   A max caps runaway titles; the Tip carries the full name. */
+.sh-play-nav .vname { font-size: 11px; font-weight: 600; color: rgba(245, 245, 247, .78);
+  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  text-transform: capitalize; padding: 0 11px 0 5px }
 
 /* variant chrome goes LIVE with selection (drive feedback 2026-08-12): accent when the
    frame is selected, the interact purple when it is being interacted with - the badge,