skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Build-path toggle aligns with the headline row

Browse Source 
Same line as the round's title rather than the brand mark: the control
reads as part of the round it configures, and the brand row stays clean.

Written with AI assistance (Claude Code).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-08-12 23:29:14 -04:00
co-authored by Claude Fable 5
parent 9632b33f6c
commit 9e8b9bc389
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skill/scripts/serve-question.mjs
+13 -16
View File
@@ -602,11 +602,10 @@ function page() {
#lightbox.open { opacity: 1; }
#lightbox img { max-width: 94vw; max-height: 94vh; border: 1px solid var(--ks-rule); border-radius: 8px; box-shadow: 0 30px 80px oklch(0% 0 0 / 0.6); }
header { width: 100%; max-width: 90rem; margin: 0 auto; }
.header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--ks-kinpaku); }
.brand svg { width: 22px; height: 22px; }
.wordmark { font-family: var(--ks-font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; color: var(--ks-kinpaku); }
.headline { display: flex; align-items: center; gap: .9rem; }
.headline { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.headline-die { flex: none; width: 34px; height: 34px; color: var(--ks-kinpaku); }
h1 { font-family: var(--ks-font-display); font-weight: 100; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.01em; line-height: 1.02; color: var(--ks-champagne); }
.question { color: var(--ks-text-muted); margin-top: .7rem; max-width: 52rem; }
@@ -821,12 +820,12 @@ function page() {
#steer { flex: 1; min-width: 16rem; background: var(--ks-lacquer-raised); color: var(--ks-text); border: 1px solid var(--ks-rule); border-radius: 7px; padding: .6rem .85rem; font: inherit; }
#steer:focus { outline: none; border-color: var(--ks-patina); }
/* Build-path toggle: a workflow preference surfaced as a quiet segmented
control on the header row, right-aligned opposite the brand, its trade stated in
control on the headline row, right-aligned opposite the title, its trade stated in
one line that changes with the selection. The default comes from the
payload (settings); flipping binds this session only, and the agent
learns about a code-to-comp flip live. Rendered only when the payload
offers it, which the agent does only when image generation exists. */
#build-path { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
#build-path { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; margin-left: auto; }
.bp-switch { display: inline-flex; border: 1px solid var(--ks-rule); border-radius: 6px; overflow: hidden; }
.bp-note { text-align: right; }
.bp-opt { font-family: var(--ks-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; background: transparent; border: 0; color: var(--ks-text-faint); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
@@ -886,18 +885,9 @@ ${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria
</div>
</div>` : ''}
<header>
<div class="header-row">
<div class="brand">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>
<span class="wordmark">Impeccable</span>
</div>
${buildPath?.toggle ? `<div id="build-path" data-default="${buildPath.value}">
<div class="bp-switch" role="radiogroup" aria-label="Build path">
<button type="button" class="bp-opt" data-bp="comp" role="radio" aria-checked="false">Comp first</button>
<button type="button" class="bp-opt" data-bp="code" role="radio" aria-checked="false">Code first</button>
</div>
<p class="bp-note" data-bp-note></p>
</div>` : ''}
<div class="brand">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>
<span class="wordmark">Impeccable</span>
</div>
</header>
<main>
@@ -905,6 +895,13 @@ ${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria
<div class="headline">
<svg class="headline-die" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="8.4" cy="8.4" r="1.5" fill="currentColor"/><circle cx="15.6" cy="8.4" r="1.5" fill="currentColor"/><circle cx="8.4" cy="15.6" r="1.5" fill="currentColor"/><circle cx="15.6" cy="15.6" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>
<h1>${esc(payload.title || 'Choose a direction')}</h1>
${buildPath?.toggle ? `<div id="build-path" data-default="${buildPath.value}">
<div class="bp-switch" role="radiogroup" aria-label="Build path">
<button type="button" class="bp-opt" data-bp="comp" role="radio" aria-checked="false">Comp first</button>
<button type="button" class="bp-opt" data-bp="code" role="radio" aria-checked="false">Code first</button>
</div>
<p class="bp-note" data-bp-note></p>
</div>` : ''}
</div>
${payload.question ? `<p class="question">${esc(payload.question)}</p>` : ''}
<div class="deck-shell">