mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
feat(site): shrink Antidote, faithful two-bar Live Mode demo
Antidote (task b): drop the duplicated pattern tabs (content lives on
/anti-patterns for the full list). Keep the Gallery of Shame as the
signature visual and add a "Browse the full catalog" link underneath.
Section is roughly 40% shorter vertically.
Live Mode demo (task faithful): rewrite to match the real picker flow
one-for-one. Now two separate bars:
- Global bar: dark pill, bottom of the frame, persistent for the
whole session. / + Pick (active) + Detect + DESIGN.md + divider + ✕.
- Contextual bar: LIGHT paper-backed pill that floats above the
picked element, mirroring buildConfigureRow() in live-browser.js.
Dark command pill, transparent input, ×N count, magenta Go button.
Morphs through configure → generating (spinner) → cycling (prev /
counter / next / discard / Accept) → accepted (green ✓ written to
source).
Contextual bar positions itself below the target when space allows,
else above. New JS positionCtx() mirrors the real positionBar()
logic. prefers-reduced-motion still freezes on a representative
"cycling, variant 3" still.
Timeline unchanged in steps but step captions updated to match the
new two-bar split ("Contextual bar appears." etc.).
This commit is contained in:
Paul Bakaus
@@ -2274,6 +2274,7 @@ code {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
|
||||
+165
-107
@@ -2932,8 +2932,8 @@
|
||||
40% { transform: scale(0.78); }
|
||||
}
|
||||
|
||||
/* Picker bar at the bottom */
|
||||
.live-demo-bar {
|
||||
/* Global bar — the persistent dark pill at the bottom of every session. */
|
||||
.live-demo-gbar {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
@@ -2942,52 +2942,39 @@
|
||||
padding: 0 4px;
|
||||
background: oklch(14% 0 0);
|
||||
color: oklch(92% 0 0);
|
||||
border-radius: 999px;
|
||||
border: 1px solid oklch(22% 0 0);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
box-shadow: 0 8px 24px oklch(0% 0 0 / 0.2);
|
||||
overflow: hidden;
|
||||
transition: width 320ms var(--ease-out);
|
||||
z-index: 4;
|
||||
}
|
||||
.live-demo-bar > div {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.live-demo-bar[data-phase="idle"] .live-demo-bar-idle,
|
||||
.live-demo-bar[data-phase="configuring"] .live-demo-bar-config,
|
||||
.live-demo-bar[data-phase="generating"] .live-demo-bar-generating,
|
||||
.live-demo-bar[data-phase="cycling"] .live-demo-bar-cycle,
|
||||
.live-demo-bar[data-phase="accepted"] .live-demo-bar-accepted {
|
||||
display: flex;
|
||||
}
|
||||
.live-demo-bar-slash {
|
||||
.live-demo-gbar-brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
color: var(--color-accent);
|
||||
padding: 0 8px 0 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.live-demo-bar-btn {
|
||||
.live-demo-gbar-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: 7px;
|
||||
color: oklch(75% 0 0);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.live-demo-bar-btn.is-active {
|
||||
.live-demo-gbar-btn.is-active {
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.live-demo-bar-dmd {
|
||||
.live-demo-gbar-dmd {
|
||||
display: inline-grid;
|
||||
grid-template: repeat(2, 1fr) / repeat(2, 1fr);
|
||||
width: 12px;
|
||||
@@ -2995,129 +2982,200 @@
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.live-demo-bar-dmd span:nth-child(1) { background: oklch(60% 0.25 350); }
|
||||
.live-demo-bar-dmd span:nth-child(2) { background: oklch(60% 0.15 45); }
|
||||
.live-demo-bar-dmd span:nth-child(3) { background: oklch(55% 0.12 250); }
|
||||
.live-demo-bar-dmd span:nth-child(4) { background: oklch(30% 0 0); }
|
||||
|
||||
.live-demo-bar-cmd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
.live-demo-bar-cmd-label {
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.live-demo-bar-cmd-name {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.live-demo-bar-divider {
|
||||
.live-demo-gbar-dmd span:nth-child(1) { background: oklch(60% 0.25 350); }
|
||||
.live-demo-gbar-dmd span:nth-child(2) { background: oklch(60% 0.15 45); }
|
||||
.live-demo-gbar-dmd span:nth-child(3) { background: oklch(55% 0.12 250); }
|
||||
.live-demo-gbar-dmd span:nth-child(4) { background: oklch(30% 0 0); }
|
||||
.live-demo-gbar-divider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: oklch(28% 0 0);
|
||||
margin: 0 4px;
|
||||
}
|
||||
.live-demo-bar-input {
|
||||
.live-demo-gbar-x {
|
||||
padding: 7px 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
color: oklch(60% 0 0);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Contextual bar — LIGHT paper-backed pill that floats near the picked
|
||||
element during a session. Matches live-browser.js's buildConfigureRow
|
||||
look (dark command pill, transparent input, ×N count, magenta Go). */
|
||||
.live-demo-ctx {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 6px);
|
||||
padding: 6px;
|
||||
background: var(--color-paper);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px oklch(0% 0 0 / 0.08), 0 1px 3px oklch(0% 0 0 / 0.06);
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
color: var(--color-ink);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
|
||||
z-index: 3;
|
||||
max-width: 90%;
|
||||
}
|
||||
.live-demo-ctx[data-phase="configuring"],
|
||||
.live-demo-ctx[data-phase="generating"],
|
||||
.live-demo-ctx[data-phase="cycling"],
|
||||
.live-demo-ctx[data-phase="accepted"] {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.live-demo-ctx-row {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.live-demo-ctx[data-phase="configuring"] .live-demo-ctx-row--configure,
|
||||
.live-demo-ctx[data-phase="generating"] .live-demo-ctx-row--generating,
|
||||
.live-demo-ctx[data-phase="cycling"] .live-demo-ctx-row--cycling,
|
||||
.live-demo-ctx[data-phase="accepted"] .live-demo-ctx-row--accepted {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Configure row: [delight ▾] [input] [×3] [Go →] */
|
||||
.live-demo-ctx-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 140px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: oklch(85% 0 0);
|
||||
padding: 0 4px;
|
||||
gap: 4px;
|
||||
padding: 5px 10px;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.live-demo-bar-caret {
|
||||
.live-demo-ctx-pill-caret { font-size: 9px; opacity: 0.7; margin-left: 2px; }
|
||||
.live-demo-ctx-input {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
padding: 5px 8px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.live-demo-ctx-caret {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
background: var(--color-accent);
|
||||
width: 1px;
|
||||
height: 13px;
|
||||
background: var(--color-ink);
|
||||
margin-left: 2px;
|
||||
animation: liveDemoCaret 1s steps(1) infinite;
|
||||
}
|
||||
@keyframes liveDemoCaret {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
.live-demo-bar-go {
|
||||
.live-demo-ctx-count {
|
||||
padding: 4px 6px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ash);
|
||||
cursor: pointer;
|
||||
}
|
||||
.live-demo-ctx-go {
|
||||
padding: 5px 12px;
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
color: var(--color-paper);
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-demo-bar-generating {
|
||||
padding: 0 14px !important;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
color: oklch(85% 0 0);
|
||||
/* Generating row */
|
||||
.live-demo-ctx-row--generating {
|
||||
gap: 10px;
|
||||
padding: 4px 12px 4px 6px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
.live-demo-bar-shader {
|
||||
.live-demo-ctx-spinner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid oklch(35% 0 0);
|
||||
border: 1.5px solid var(--color-mist);
|
||||
border-top-color: var(--color-accent);
|
||||
margin-right: 10px;
|
||||
animation: liveDemoSpin 700ms linear infinite;
|
||||
}
|
||||
@keyframes liveDemoSpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes liveDemoSpin { to { transform: rotate(360deg); } }
|
||||
|
||||
.live-demo-bar-counter {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: oklch(92% 0 0);
|
||||
padding: 0 8px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
.live-demo-bar-discard {
|
||||
padding: 7px 10px;
|
||||
/* Cycling row */
|
||||
.live-demo-ctx-row--cycling { gap: 2px; padding: 2px; }
|
||||
.live-demo-ctx-nav {
|
||||
padding: 4px 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: oklch(72% 0 0);
|
||||
border-radius: 5px;
|
||||
color: var(--color-charcoal);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.live-demo-ctx-counter {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-ink);
|
||||
padding: 0 6px;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.live-demo-ctx-divider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: var(--color-mist);
|
||||
margin: 0 4px;
|
||||
}
|
||||
.live-demo-ctx-discard {
|
||||
padding: 4px 10px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
color: var(--color-ash);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.live-demo-bar-accept {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 7px 14px;
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
.live-demo-ctx-accept {
|
||||
padding: 5px 14px;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.live-demo-bar-accepted {
|
||||
padding: 0 14px !important;
|
||||
color: oklch(80% 0.15 145);
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
gap: 8px !important;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Accepted confirmation row */
|
||||
.live-demo-ctx-row--accepted {
|
||||
gap: 8px;
|
||||
padding: 6px 14px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 12px;
|
||||
color: oklch(45% 0.18 145);
|
||||
}
|
||||
|
||||
/* Phase caption under the frame */
|
||||
|
||||
+49
-58
@@ -249,12 +249,8 @@
|
||||
<div class="antidote-content">
|
||||
<p class="section-lead" data-reveal>Every AI model learned from the same templates. Without intervention, they all produce the same predictable mistakes. Impeccable names them, detects them, and teaches the AI to avoid them.</p>
|
||||
|
||||
<!-- Patterns + Gallery side by side -->
|
||||
<!-- Gallery of Shame (standalone, full-width) -->
|
||||
<div class="antidote-row" data-reveal>
|
||||
<div class="patterns-tabbed" id="patterns-categories">
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
|
||||
<div class="gallery-stack-container">
|
||||
<div class="gallery-stack-header">
|
||||
<h3 class="gallery-stack-title">Gallery of Shame</h3>
|
||||
@@ -287,7 +283,7 @@
|
||||
<span class="gallery-stack-label">Bad Contrast</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="/visual-mode#try-it-live" class="gallery-stack-link">View full gallery →</a>
|
||||
<a href="/anti-patterns" class="gallery-stack-link">Browse the full catalog →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -597,7 +593,7 @@
|
||||
<!-- Highlight rectangle that outlines the target -->
|
||||
<div class="live-demo-outline" data-demo-outline aria-hidden="true"></div>
|
||||
|
||||
<!-- Annotation layer (stroke + comment) -->
|
||||
<!-- Annotation layer (stroke + comment) drawn on the page -->
|
||||
<div class="live-demo-annotations" data-demo-annotations aria-hidden="true">
|
||||
<svg class="live-demo-stroke" viewBox="0 0 300 60" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="M 10,40 Q 60,10 110,38 T 210,32 T 290,20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" pathLength="1"/>
|
||||
@@ -605,6 +601,37 @@
|
||||
<div class="live-demo-comment">more playful</div>
|
||||
</div>
|
||||
|
||||
<!-- Contextual bar (LIGHT pill, floats near the picked element) -->
|
||||
<div class="live-demo-ctx" data-demo-ctx data-phase="hidden">
|
||||
<div class="live-demo-ctx-row live-demo-ctx-row--configure">
|
||||
<button type="button" class="live-demo-ctx-pill" data-demo-ctx-pill>
|
||||
<span data-demo-cmd-name>delight</span>
|
||||
<span class="live-demo-ctx-pill-caret" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<span class="live-demo-ctx-input" data-demo-input>
|
||||
<span data-demo-input-text></span><span class="live-demo-ctx-caret"></span>
|
||||
</span>
|
||||
<button type="button" class="live-demo-ctx-count">×3</button>
|
||||
<button type="button" class="live-demo-ctx-go" data-demo-go>Go <span aria-hidden="true">→</span></button>
|
||||
</div>
|
||||
<div class="live-demo-ctx-row live-demo-ctx-row--generating">
|
||||
<span class="live-demo-ctx-spinner" aria-hidden="true"></span>
|
||||
<span>Generating variants…</span>
|
||||
</div>
|
||||
<div class="live-demo-ctx-row live-demo-ctx-row--cycling">
|
||||
<button type="button" class="live-demo-ctx-nav" aria-label="Previous variant">‹</button>
|
||||
<span class="live-demo-ctx-counter" data-demo-counter>1 / 3</span>
|
||||
<button type="button" class="live-demo-ctx-nav" aria-label="Next variant">›</button>
|
||||
<span class="live-demo-ctx-divider"></span>
|
||||
<button type="button" class="live-demo-ctx-discard" aria-label="Discard">✕</button>
|
||||
<button type="button" class="live-demo-ctx-accept" data-demo-accept>Accept</button>
|
||||
</div>
|
||||
<div class="live-demo-ctx-row live-demo-ctx-row--accepted">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>Variant 3 written to source</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simulated cursor -->
|
||||
<div class="live-demo-cursor" data-demo-cursor aria-hidden="true">
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||||
@@ -613,57 +640,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Picker bar at the bottom of the frame -->
|
||||
<div class="live-demo-bar" data-demo-bar data-phase="idle">
|
||||
<!-- IDLE state: /brand -->
|
||||
<div class="live-demo-bar-idle">
|
||||
<span class="live-demo-bar-slash">/</span>
|
||||
<button type="button" class="live-demo-bar-btn is-active" data-demo-bar-btn="pick">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
|
||||
<span>Pick</span>
|
||||
</button>
|
||||
<button type="button" class="live-demo-bar-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
<button type="button" class="live-demo-bar-btn">
|
||||
<span class="live-demo-bar-dmd" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- CONFIGURING state: command picker + input + Go -->
|
||||
<div class="live-demo-bar-config">
|
||||
<span class="live-demo-bar-cmd" data-demo-cmd>
|
||||
<span class="live-demo-bar-cmd-label">command</span>
|
||||
<span class="live-demo-bar-cmd-name" data-demo-cmd-name>delight</span>
|
||||
</span>
|
||||
<span class="live-demo-bar-divider"></span>
|
||||
<span class="live-demo-bar-input" data-demo-input>
|
||||
<span data-demo-input-text></span><span class="live-demo-bar-caret"></span>
|
||||
</span>
|
||||
<button type="button" class="live-demo-bar-go" data-demo-go>Go <span aria-hidden="true">→</span></button>
|
||||
</div>
|
||||
|
||||
<!-- GENERATING state: shader/progress -->
|
||||
<div class="live-demo-bar-generating">
|
||||
<span class="live-demo-bar-shader"></span>
|
||||
<span>Generating variants…</span>
|
||||
</div>
|
||||
|
||||
<!-- CYCLING state: prev / counter / next / accept / discard -->
|
||||
<div class="live-demo-bar-cycle">
|
||||
<button type="button" class="live-demo-bar-btn" aria-label="Previous variant">‹</button>
|
||||
<span class="live-demo-bar-counter" data-demo-counter>1 / 3</span>
|
||||
<button type="button" class="live-demo-bar-btn" aria-label="Next variant">›</button>
|
||||
<span class="live-demo-bar-divider"></span>
|
||||
<button type="button" class="live-demo-bar-discard" aria-label="Discard">✕</button>
|
||||
<button type="button" class="live-demo-bar-accept" data-demo-accept>Accept</button>
|
||||
</div>
|
||||
|
||||
<!-- ACCEPTED state: brief confirmation -->
|
||||
<div class="live-demo-bar-accepted">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span>Variant 3 written to source</span>
|
||||
</div>
|
||||
<!-- Global bar: persistent dark pill at the bottom of every session -->
|
||||
<div class="live-demo-gbar" data-demo-gbar>
|
||||
<span class="live-demo-gbar-brand">/</span>
|
||||
<button type="button" class="live-demo-gbar-btn is-active" data-demo-gbar-pick>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
|
||||
<span>Pick</span>
|
||||
</button>
|
||||
<button type="button" class="live-demo-gbar-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
<button type="button" class="live-demo-gbar-btn">
|
||||
<span class="live-demo-gbar-dmd" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
|
||||
</button>
|
||||
<span class="live-demo-gbar-divider"></span>
|
||||
<button type="button" class="live-demo-gbar-x" aria-label="Exit live mode">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,32 +1,28 @@
|
||||
// Interactive Live Mode demo loop. Plays when the section is in view,
|
||||
// pauses when out. Respects prefers-reduced-motion (freezes on a
|
||||
// representative frame).
|
||||
// Interactive Live Mode demo loop. Matches the real picker flow:
|
||||
// - a persistent dark global bar stays at the bottom of the frame the whole time
|
||||
// - a light contextual bar floats above the picked element during a session,
|
||||
// morphing between configure → generating → cycling → accepted
|
||||
//
|
||||
// Phases map to the `data-phase` attribute on the picker bar:
|
||||
// idle → configuring → generating → cycling → accepted → (reset to idle)
|
||||
// Plays only while the section is in view. Respects prefers-reduced-motion.
|
||||
|
||||
const PHASE = {
|
||||
IDLE: 'idle',
|
||||
HIDDEN: 'hidden',
|
||||
CONFIGURING: 'configuring',
|
||||
GENERATING: 'generating',
|
||||
CYCLING: 'cycling',
|
||||
ACCEPTED: 'accepted',
|
||||
};
|
||||
|
||||
// Each step describes one action + how long to hold before the next step.
|
||||
// dt = delay BEFORE this step runs (ms). Total cycle ≈ sum of all dt.
|
||||
const TIMELINE = [
|
||||
{ dt: 400, action: 'cursor-show' },
|
||||
{ dt: 400, action: 'cursor-to-target' },
|
||||
{ dt: 900, action: 'outline-show', caption: 'Hover to pick.' },
|
||||
{ dt: 500, action: 'cursor-click' },
|
||||
{ dt: 200, action: 'open-config', caption: 'Picked. Choose a command.' },
|
||||
{ dt: 700, action: 'cursor-to-cmd' },
|
||||
{ dt: 400, action: 'set-command', cmd: 'delight', caption: 'delight — add personality.' },
|
||||
{ dt: 500, action: 'cursor-to-input' },
|
||||
{ dt: 300, action: 'type', text: 'more playful', caption: 'Annotate. Comment. Stroke.' },
|
||||
{ dt: 1400, action: 'draw-stroke' },
|
||||
{ dt: 700, action: 'cursor-to-go' },
|
||||
{ dt: 200, action: 'open-ctx', caption: 'Picked. Contextual bar appears.' },
|
||||
{ dt: 700, action: 'cursor-to-input' },
|
||||
{ dt: 300, action: 'type', text: 'more playful', caption: 'Type a refinement, or skip.' },
|
||||
{ dt: 1200, action: 'draw-stroke', caption: 'Annotate on the page, if you want.' },
|
||||
{ dt: 900, action: 'cursor-to-go' },
|
||||
{ dt: 300, action: 'click-go', caption: 'Generating three variants…' },
|
||||
{ dt: 1600, action: 'show-variant', n: 1, caption: 'Variant 1 of 3.' },
|
||||
{ dt: 1400, action: 'show-variant', n: 2, caption: 'Variant 2 of 3.' },
|
||||
@@ -45,18 +41,17 @@ export function initLiveDemo() {
|
||||
const outline = root.querySelector('[data-demo-outline]');
|
||||
const annotations = root.querySelector('[data-demo-annotations]');
|
||||
const cursor = root.querySelector('[data-demo-cursor]');
|
||||
const bar = root.querySelector('[data-demo-bar]');
|
||||
const cmdName = root.querySelector('[data-demo-cmd-name]');
|
||||
const ctx = root.querySelector('[data-demo-ctx]');
|
||||
const inputText = root.querySelector('[data-demo-input-text]');
|
||||
const counter = root.querySelector('[data-demo-counter]');
|
||||
const captionLabel = root.querySelector('[data-demo-caption-label]');
|
||||
const variants = Array.from(root.querySelectorAll('.live-demo-variant'));
|
||||
|
||||
if (!stage || !target || !bar) return;
|
||||
if (!stage || !target || !ctx) return;
|
||||
|
||||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Position outline over target whenever target moves.
|
||||
// Position the outline around the target.
|
||||
const positionOutline = () => {
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
@@ -66,7 +61,27 @@ export function initLiveDemo() {
|
||||
outline.style.height = (targetRect.height + 8) + 'px';
|
||||
};
|
||||
|
||||
// Move cursor to coordinates relative to the stage.
|
||||
// Position the contextual bar below the target (or above if below would
|
||||
// collide with the global bar). Mirrors positionBar() in live-browser.js.
|
||||
const positionCtx = () => {
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
const ctxRect = ctx.getBoundingClientRect();
|
||||
const GAP = 10;
|
||||
const BAR_RESERVE = 60;
|
||||
const belowTop = targetRect.bottom - stageRect.top + GAP;
|
||||
const aboveTop = targetRect.top - stageRect.top - ctxRect.height - GAP;
|
||||
let top;
|
||||
if (belowTop + ctxRect.height + GAP <= stage.clientHeight - BAR_RESERVE) {
|
||||
top = belowTop;
|
||||
} else if (aboveTop >= GAP) {
|
||||
top = aboveTop;
|
||||
} else {
|
||||
top = stage.clientHeight - ctxRect.height - BAR_RESERVE;
|
||||
}
|
||||
ctx.style.top = top + 'px';
|
||||
};
|
||||
|
||||
const moveCursor = (selector, offsetX = 0, offsetY = 0) => {
|
||||
const stageRect = stage.getBoundingClientRect();
|
||||
const el = typeof selector === 'string' ? root.querySelector(selector) : selector;
|
||||
@@ -83,17 +98,23 @@ export function initLiveDemo() {
|
||||
v.classList.toggle('is-active', match);
|
||||
});
|
||||
counter.textContent = n + ' / 3';
|
||||
// Re-measure outline after layout settles.
|
||||
requestAnimationFrame(positionOutline);
|
||||
requestAnimationFrame(() => {
|
||||
positionOutline();
|
||||
positionCtx();
|
||||
});
|
||||
};
|
||||
|
||||
const setCtxPhase = (phase) => {
|
||||
ctx.dataset.phase = phase;
|
||||
if (phase !== PHASE.HIDDEN) requestAnimationFrame(positionCtx);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
bar.dataset.phase = PHASE.IDLE;
|
||||
setCtxPhase(PHASE.HIDDEN);
|
||||
cursor.classList.remove('is-visible', 'is-click');
|
||||
outline.classList.remove('is-visible');
|
||||
annotations.classList.remove('is-visible', 'is-comment-visible');
|
||||
inputText.textContent = '';
|
||||
cmdName.textContent = 'delight';
|
||||
showVariant(0);
|
||||
};
|
||||
|
||||
@@ -130,14 +151,8 @@ export function initLiveDemo() {
|
||||
cursor.classList.add('is-click');
|
||||
setTimeout(() => cursor.classList.remove('is-click'), 260);
|
||||
break;
|
||||
case 'open-config':
|
||||
bar.dataset.phase = PHASE.CONFIGURING;
|
||||
break;
|
||||
case 'cursor-to-cmd':
|
||||
moveCursor(root.querySelector('[data-demo-cmd]'));
|
||||
break;
|
||||
case 'set-command':
|
||||
cmdName.textContent = s.cmd;
|
||||
case 'open-ctx':
|
||||
setCtxPhase(PHASE.CONFIGURING);
|
||||
break;
|
||||
case 'cursor-to-input':
|
||||
moveCursor(root.querySelector('[data-demo-input]'));
|
||||
@@ -156,10 +171,10 @@ export function initLiveDemo() {
|
||||
cursor.classList.add('is-click');
|
||||
setTimeout(() => cursor.classList.remove('is-click'), 260);
|
||||
annotations.classList.remove('is-visible', 'is-comment-visible');
|
||||
bar.dataset.phase = PHASE.GENERATING;
|
||||
setCtxPhase(PHASE.GENERATING);
|
||||
break;
|
||||
case 'show-variant':
|
||||
if (bar.dataset.phase !== PHASE.CYCLING) bar.dataset.phase = PHASE.CYCLING;
|
||||
if (ctx.dataset.phase !== PHASE.CYCLING) setCtxPhase(PHASE.CYCLING);
|
||||
showVariant(s.n);
|
||||
break;
|
||||
case 'cursor-to-accept':
|
||||
@@ -168,7 +183,7 @@ export function initLiveDemo() {
|
||||
case 'click-accept':
|
||||
cursor.classList.add('is-click');
|
||||
setTimeout(() => cursor.classList.remove('is-click'), 260);
|
||||
bar.dataset.phase = PHASE.ACCEPTED;
|
||||
setCtxPhase(PHASE.ACCEPTED);
|
||||
outline.classList.remove('is-visible');
|
||||
break;
|
||||
case 'reset':
|
||||
@@ -201,14 +216,13 @@ export function initLiveDemo() {
|
||||
cancelToken++;
|
||||
};
|
||||
|
||||
// Start/stop based on visibility.
|
||||
if (reduced) {
|
||||
// Freeze on the "cycling, variant 3" frame for a representative still.
|
||||
bar.dataset.phase = PHASE.CYCLING;
|
||||
// Freeze on a representative still: cycling, variant 3.
|
||||
showVariant(3);
|
||||
counter.textContent = '3 / 3';
|
||||
positionOutline();
|
||||
outline.classList.add('is-visible');
|
||||
setCtxPhase(PHASE.CYCLING);
|
||||
setCaption('Three variants. Pick the one you want.');
|
||||
return;
|
||||
}
|
||||
@@ -221,6 +235,8 @@ export function initLiveDemo() {
|
||||
}, { threshold: 0.35 });
|
||||
io.observe(root);
|
||||
|
||||
// Also re-measure outline on window resize since positions depend on layout.
|
||||
window.addEventListener('resize', () => requestAnimationFrame(positionOutline));
|
||||
window.addEventListener('resize', () => requestAnimationFrame(() => {
|
||||
positionOutline();
|
||||
positionCtx();
|
||||
}));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user