mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-20 18:16:30 +03:00
Preserve experimental Live app-server workstream
Snapshot the current app-server implementation, shared Live optimizations, generated harness output, and in-progress site work before restoring polling as the primary runtime path. Prepared with Codex assistance under maintainer direction.
This commit is contained in:
Paul Bakaus
@@ -53,9 +53,9 @@ const { activeNav } = Astro.props;
|
||||
<path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 40k stars">
|
||||
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 47k stars">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
|
||||
<span class="site-header-github-label">40k</span>
|
||||
<span class="site-header-github-label">47k</span>
|
||||
<svg class="site-header-github-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.76 6.36L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.24-.91L12 2z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
---
|
||||
const proofs = [
|
||||
{
|
||||
id: 'polish',
|
||||
command: '/polish',
|
||||
label: 'Remove the tells',
|
||||
summary: 'Three AI defaults removed',
|
||||
callouts: [
|
||||
{ label: 'Pulsing status', y: '25%' },
|
||||
{ label: 'Italic serif', y: '48%' },
|
||||
{ label: 'Claude beige', y: '76%' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'distill',
|
||||
command: '/distill',
|
||||
label: 'Find the hierarchy',
|
||||
summary: 'Seven containers flattened',
|
||||
callouts: [
|
||||
{ label: 'Cards in cards', y: '28%' },
|
||||
{ label: 'Everything equal', y: '52%' },
|
||||
{ label: 'Status-chip soup', y: '77%' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'clarify',
|
||||
command: '/clarify',
|
||||
label: 'Make the task obvious',
|
||||
summary: 'One clear decision remains',
|
||||
callouts: [
|
||||
{ label: 'Vague headline', y: '28%' },
|
||||
{ label: 'Every field at once', y: '54%' },
|
||||
{ label: 'Generic CTA', y: '78%' },
|
||||
],
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section class="hero-proof" data-hero-proof aria-label="Impeccable command before and after examples">
|
||||
<div class="hero-proof-topline">
|
||||
<span class="hero-proof-result" data-hero-proof-result aria-live="polite">{proofs[0].summary}</span>
|
||||
<span class="hero-proof-instruction">Drag to compare</span>
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-stage">
|
||||
{proofs.map((proof, index) => (
|
||||
<div
|
||||
class:list={['hero-proof-panel', { 'is-active': index === 0 }]}
|
||||
id={`hero-proof-panel-${proof.id}`}
|
||||
role="tabpanel"
|
||||
aria-labelledby={`hero-proof-tab-${proof.id}`}
|
||||
data-proof-panel={proof.id}
|
||||
data-summary={proof.summary}
|
||||
hidden={index !== 0}
|
||||
>
|
||||
<div class="hero-proof-layer hero-proof-layer--before">
|
||||
<span class="hero-proof-state hero-proof-state--before">AI default</span>
|
||||
|
||||
<div class={`hero-proof-canvas hero-proof-canvas--${proof.id}`} aria-hidden="true">
|
||||
{proof.id === 'polish' && (
|
||||
<article class="proof-polish proof-polish--before">
|
||||
<header class="proof-polish-head">
|
||||
<span class="proof-polish-pulse"><i></i> AI-powered</span>
|
||||
<span class="proof-polish-menu">•••</span>
|
||||
</header>
|
||||
<div class="proof-polish-body">
|
||||
<span class="proof-polish-kicker">Built for modern teams</span>
|
||||
<h3>Beautifully <em>crafted</em> for the future of work.</h3>
|
||||
<p>Manage projects, share updates, and keep everyone aligned in one place.</p>
|
||||
<span class="proof-polish-cta">Get started</span>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{proof.id === 'distill' && (
|
||||
<article class="proof-distill proof-distill--before">
|
||||
<header><strong>Analytics overview</strong><span>Live</span></header>
|
||||
<div class="proof-distill-grid">
|
||||
<div><small>Revenue</small><b>$84.2k</b><i>+12%</i></div>
|
||||
<div><small>Orders</small><b>1,248</b><i>+8%</i></div>
|
||||
<div><small>Visitors</small><b>18.4k</b><i>+21%</i></div>
|
||||
<div><small>Conversion</small><b>3.8%</b><i>+4%</i></div>
|
||||
</div>
|
||||
<div class="proof-distill-nested"><span>Weekly performance</span><div><i></i><i></i><i></i></div></div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{proof.id === 'clarify' && (
|
||||
<article class="proof-clarify proof-clarify--before">
|
||||
<header><span>Get started</span><small>All fields required</small></header>
|
||||
<h3>Unlock your potential today</h3>
|
||||
<div class="proof-clarify-fields"><i></i><i></i><i></i><i></i></div>
|
||||
<span class="proof-clarify-cta">Continue</span>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-callouts" aria-hidden="true">
|
||||
{proof.callouts.map((callout) => (
|
||||
<span class="hero-proof-callout" style={`--callout-y: ${callout.y};`}>
|
||||
{callout.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-layer hero-proof-layer--after">
|
||||
<span class="hero-proof-state hero-proof-state--after">With Impeccable</span>
|
||||
|
||||
<div class={`hero-proof-canvas hero-proof-canvas--${proof.id}`} aria-hidden="true">
|
||||
{proof.id === 'polish' && (
|
||||
<article class="proof-polish proof-polish--after">
|
||||
<header class="proof-polish-head">
|
||||
<span class="proof-polish-sprint">Launch / 14</span>
|
||||
<span class="proof-polish-track">On track</span>
|
||||
</header>
|
||||
<div class="proof-polish-body">
|
||||
<span class="proof-polish-kicker">Release planning</span>
|
||||
<h3>Ship the launch plan by Friday.</h3>
|
||||
<p>Owners, dependencies, and decisions in one view.</p>
|
||||
<div class="proof-polish-progress"><i></i></div>
|
||||
<footer><span>8 of 11 decisions closed</span><b>Review plan →</b></footer>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{proof.id === 'distill' && (
|
||||
<article class="proof-distill proof-distill--after">
|
||||
<header><strong>Revenue</strong><span>Last 30 days</span></header>
|
||||
<div class="proof-distill-primary"><b>$84,218</b><span>+12.4% vs June</span></div>
|
||||
<div class="proof-distill-chart"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
||||
<footer><span>Orders <b>1,248</b></span><span>Conversion <b>3.8%</b></span></footer>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{proof.id === 'clarify' && (
|
||||
<article class="proof-clarify proof-clarify--after">
|
||||
<header><span>New project</span><small>Step 1 of 3</small></header>
|
||||
<h3>What should this project improve?</h3>
|
||||
<p>Choose one focus. You can add more context next.</p>
|
||||
<div class="proof-clarify-options"><span>Activation</span><span>Retention</span><span>Conversion</span></div>
|
||||
<span class="proof-clarify-cta">Use this focus →</span>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-seam" aria-hidden="true"></div>
|
||||
<input
|
||||
class="hero-proof-range"
|
||||
type="range"
|
||||
min="18"
|
||||
max="82"
|
||||
value="54"
|
||||
aria-label={`Reveal the improved ${proof.command} example`}
|
||||
data-proof-range
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-tabs" role="tablist" aria-label="Preview Impeccable commands">
|
||||
{proofs.map((proof, index) => (
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
class:list={['hero-proof-tab', { 'is-active': index === 0 }]}
|
||||
id={`hero-proof-tab-${proof.id}`}
|
||||
aria-controls={`hero-proof-panel-${proof.id}`}
|
||||
aria-selected={index === 0 ? 'true' : 'false'}
|
||||
tabindex={index === 0 ? 0 : -1}
|
||||
data-proof-tab={proof.id}
|
||||
>
|
||||
<span class="hero-proof-command">{proof.command}</span>
|
||||
<span class="hero-proof-tab-label">{proof.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
import LiveDemoPalette from './LiveDemoPalette.astro';
|
||||
import LiveDemoGbar from './LiveDemoGbar.astro';
|
||||
---
|
||||
|
||||
<div class="live-demo hero-live-demo language-live-demo" id="live-demo" aria-label="Live Mode interactive demo loop">
|
||||
<div class="live-demo-frame-col"><div class="live-demo-frame">
|
||||
<div class="live-demo-chrome">
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-url">localhost:3000</span>
|
||||
</div>
|
||||
|
||||
<div class="live-demo-stage">
|
||||
<div class="hotel-site" aria-hidden="true">
|
||||
<header class="hotel-nav">
|
||||
<span class="hotel-logo">AURELIA</span>
|
||||
<nav class="hotel-nav-links"><span>Suites</span><span>Dining</span><span>Spa</span><span>Journal</span></nav>
|
||||
<span class="hotel-nav-book">Book</span>
|
||||
</header>
|
||||
<div class="live-demo-target hotel-hero-pick" data-demo-target>
|
||||
<div class="live-demo-variant is-active" data-variant="original">
|
||||
<div class="hotel-hero hotel-hero--slop">
|
||||
<div class="hotel-hero-inner">
|
||||
<h2 class="hotel-hero-title">Welcome to Our Hotel</h2>
|
||||
<p class="hotel-hero-sub">Book the best rooms at the best prices.</p>
|
||||
<button type="button" class="hotel-hero-cta">Book Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{['1', '2', '3'].map((n) => (
|
||||
<div class="live-demo-variant" data-variant={n}>
|
||||
<div class={`hotel-hero hotel-hero--${n}`}>
|
||||
<div class="hotel-hero-photo"></div>
|
||||
<div class="hotel-hero-inner">
|
||||
<p class="hotel-hero-eyebrow">Amalfi Coast</p>
|
||||
<h2 class="hotel-hero-title">Where the coast forgets time</h2>
|
||||
<p class="hotel-hero-sub">Forty suites above the sea.</p>
|
||||
<button type="button" class="hotel-hero-cta">Reserve your stay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="hotel-suites">
|
||||
<p class="hotel-suites-label">Our Suites</p>
|
||||
<div class="hotel-suites-row">
|
||||
<article class="hotel-card">
|
||||
<div class="hotel-card-photo"></div>
|
||||
<div class="hotel-card-body">
|
||||
<p class="hotel-card-kicker">Suite</p>
|
||||
<h3 class="hotel-card-name">Garden Suite</h3>
|
||||
<p class="hotel-card-meta">Sea view · 48m²</p>
|
||||
<div class="hotel-card-foot">
|
||||
<span class="hotel-card-price">$420<i>/night</i></span>
|
||||
<button type="button" class="hotel-card-btn">Reserve</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="hotel-card">
|
||||
<div class="hotel-card-photo hotel-card-photo--b"></div>
|
||||
<div class="hotel-card-body">
|
||||
<p class="hotel-card-kicker">Suite</p>
|
||||
<h3 class="hotel-card-name">Sea Loft</h3>
|
||||
<p class="hotel-card-meta">Terrace · 62m²</p>
|
||||
<div class="hotel-card-foot">
|
||||
<span class="hotel-card-price">$510<i>/night</i></span>
|
||||
<button type="button" class="hotel-card-btn">Reserve</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="hotel-card">
|
||||
<div class="hotel-card-photo hotel-card-photo--c"></div>
|
||||
<div class="hotel-card-body">
|
||||
<p class="hotel-card-kicker">Suite</p>
|
||||
<h3 class="hotel-card-name">Cliff Suite</h3>
|
||||
<p class="hotel-card-meta">Sea view · 70m²</p>
|
||||
<div class="hotel-card-foot">
|
||||
<span class="hotel-card-price">$680<i>/night</i></span>
|
||||
<button type="button" class="hotel-card-btn">Reserve</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="live-demo-outline" data-demo-outline aria-hidden="true"></div>
|
||||
|
||||
<div class="live-demo-annotations" data-demo-annotations aria-hidden="true">
|
||||
<svg class="live-demo-stroke" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="M5 73 C1 61 15 55 27 57 C36 59 37 71 27 74 C16 78 5 76 3 65" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" pathLength="1"/>
|
||||
</svg>
|
||||
<span class="live-demo-pin" data-demo-pin>
|
||||
<span class="live-demo-pin-dot"></span>
|
||||
<span class="live-demo-pin-note"><span data-demo-note-text></span><span class="live-demo-pin-caret"></span></span>
|
||||
</span>
|
||||
<span class="live-demo-annot-clear">Clear</span>
|
||||
</div>
|
||||
|
||||
<div class="live-demo-ctx" data-demo-ctx data-phase="hidden">
|
||||
<div class="live-demo-ctx-row live-demo-ctx-row--configure">
|
||||
<div class="live-demo-ctx-command">
|
||||
<span class="live-demo-ctx-input" data-demo-input>
|
||||
<button type="button" class="live-demo-ctx-selection">h1</button>
|
||||
<span data-demo-input-text></span><span class="live-demo-ctx-caret"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="live-demo-ctx-trailing">
|
||||
<div class="live-demo-ctx-modifiers">
|
||||
<button type="button" class="live-demo-ctx-action" data-demo-ctx-pill>
|
||||
<span data-demo-cmd-name>adapt</span>
|
||||
<span class="live-demo-ctx-action-caret" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<button type="button" class="live-demo-ctx-count">×3</button>
|
||||
</div>
|
||||
<div class="live-demo-ctx-actions">
|
||||
<button type="button" class="live-demo-ctx-voice" aria-label="Voice input">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
|
||||
</button>
|
||||
<button type="button" class="live-demo-ctx-go" data-demo-go aria-label="Generate variants">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LiveDemoPalette pick="colorize" />
|
||||
<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>
|
||||
|
||||
<div class="live-demo-cursor" data-demo-cursor aria-hidden="true">
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||||
<path d="M1 1 L1 17 L5 13 L8 20 L11 19 L7.5 12 L13 12 Z" fill="#111" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LiveDemoGbar />
|
||||
</div></div>
|
||||
</div>
|
||||
@@ -0,0 +1,99 @@
|
||||
<section class="slop-teaser-section slop-pattern-section" id="slop" aria-labelledby="slop-pattern-title">
|
||||
<header class="slop-pattern-head">
|
||||
<div>
|
||||
<h2 id="slop-pattern-title" class="slop-teaser-title">AI has a house style. Impeccable knows the tells.</h2>
|
||||
<p class="slop-teaser-body">
|
||||
The defaults move. The pattern is the same: the model reaches for whatever currently signals
|
||||
“taste” without asking whether it belongs. Impeccable catches those reflexes before they become your design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="slop-pattern-actions">
|
||||
<span class="slop-pattern-count"><strong>59</strong> detector checks</span>
|
||||
<a class="ks-button ks-button-secondary" href="/slop">
|
||||
Open the full gallery
|
||||
<span class="ks-button-arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 16 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
|
||||
<path d="M0 4h14M10 0l4 4-4 4"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="slop-pattern-board">
|
||||
<article class="slop-pattern-item slop-pattern-item--wide">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--serif" aria-hidden="true">
|
||||
<span class="slop-pattern-kicker">A quieter way to work</span>
|
||||
<span class="slop-pattern-serif-line">Beautifully <em>crafted</em><br />for modern teams.</span>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Typography · detected</span>
|
||||
<h3>Italic serif hero</h3>
|
||||
<p>Instrument Serif and its neighbors became the shortcut for tasteful AI output.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slop-pattern-item">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--beige" aria-hidden="true">
|
||||
<span class="slop-beige-wordmark">Claude & Co.</span>
|
||||
<span class="slop-beige-copy">Soft, tasteful, safely indistinct.</span>
|
||||
<span class="slop-beige-button">Begin</span>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Color · detected</span>
|
||||
<h3>Claude beige</h3>
|
||||
<p>Warm tinted paper is now the safe AI surface, chosen before the product has a palette.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slop-pattern-item">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--sidetab" aria-hidden="true">
|
||||
<div class="slop-side-card">
|
||||
<strong>Performance insight</strong>
|
||||
<span>Your conversion rate is up 12% this week.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Visual detail · detected</span>
|
||||
<h3>Side-tab border</h3>
|
||||
<p>A thick colored stripe on a rounded card remains one of the clearest generated-UI tells.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slop-pattern-item">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--pulse" aria-hidden="true">
|
||||
<div class="slop-pulse-status">
|
||||
<span class="slop-pulse-dot"></span>
|
||||
<span>AI is thinking</span>
|
||||
</div>
|
||||
<div class="slop-pulse-lines"><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Motion · detected</span>
|
||||
<h3>Pulsing status dot</h3>
|
||||
<p>Decorative pulse implies live state even when nothing is changing.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="slop-pattern-item slop-pattern-item--wide">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--nested" aria-hidden="true">
|
||||
<div class="slop-nested-shell">
|
||||
<span>Workspace</span>
|
||||
<div class="slop-nested-card">
|
||||
<span>Overview</span>
|
||||
<div class="slop-nested-card slop-nested-card--inner">Card inside card inside card.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Layout · detected</span>
|
||||
<h3>Nested cards</h3>
|
||||
<p>Containers become the hierarchy because the model never made one with type, space, or rhythm.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<footer class="slop-pattern-foot">
|
||||
<p><code>npx impeccable detect src/</code> catches deterministic tells. <a href="/docs/critique">/critique</a> adds the design review.</p>
|
||||
</footer>
|
||||
</section>
|
||||
Reference in New Issue
Block a user