+ // Without a sketch the catalog art is the card's face; it stays a
+ // labeled reference so it never reads as the promise of the build.
+ return `
`;
}
@@ -547,6 +562,17 @@ function page() {
.pip figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--ks-mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-text); text-align: center; padding: 3px 0 4px; background: oklch(7% 0.006 95 / 0.72); backdrop-filter: blur(3px); }
.pip:hover { left: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; z-index: 3; }
.sketch-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ks-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ks-text-faint); }
+ /* Catalog art standing in for a sketchless card is a reference, and says so
+ on its face; the same pill later carries "artwork unavailable". */
+ .media-label { position: absolute; z-index: 2; left: 10px; bottom: 10px; margin: 0; font-family: var(--ks-mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ks-text); padding: 3px 8px 4px; background: oklch(7% 0.006 95 / 0.72); border: 1px solid var(--ks-rule); border-radius: 4px; backdrop-filter: blur(3px); }
+ /* Art that never arrives collapses to the card's own palette (painted
+ inline from its swatches) instead of sitting as a dark void wearing a
+ zoom cursor; the scrim keeps the label legible over saturated fields,
+ passes clicks through, and the flip chips stay above it. A card with no
+ palette falls back to the quiet graphite field. */
+ .media.unavailable { background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); }
+ .media.unavailable::after { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(10% 0.008 95 / 0.45); pointer-events: none; }
+ .media.unavailable .chips { z-index: 2; }
/* A stand-in is honest about being one: dimmed, labeled, and replaced by
the real sketch whenever it lands. */
.media.stand-in img.sketch { filter: brightness(.72) saturate(.85); }
@@ -709,6 +735,36 @@ function page() {
tryLoad();
});
+ // A declared image that never loads (missing catalog asset, offline shell)
+ // must not sit as a dark void: the slot collapses to the card's own
+ // palette, labeled honestly, and the card competes on its facts. Sketch
+ // slots are excluded; their polling owns the wait.
+ const artFailed = (img) => {
+ const m = img.closest('.media');
+ if (!m || m.classList.contains('sketching') || m.classList.contains('unavailable')) return;
+ m.classList.add('unavailable');
+ const colors = [...(img.closest('.card')?.querySelectorAll('.swatches i') || [])].map(i => i.style.background).filter(Boolean);
+ if (colors.length) m.style.background = 'linear-gradient(135deg, ' + colors.map((c, i) => c + ' ' + Math.round(i * 100 / colors.length) + '% ' + Math.round((i + 1) * 100 / colors.length) + '%').join(', ') + ')';
+ m.querySelector('.media-label')?.remove();
+ m.querySelector('.chip.expand')?.remove();
+ m.removeAttribute('title');
+ img.remove();
+ const label = document.createElement('p');
+ label.className = 'media-label';
+ label.textContent = 'artwork unavailable';
+ m.appendChild(label);
+ };
+ document.querySelectorAll('.media:not(.sketching) > img').forEach(img => {
+ if (img.complete && img.naturalWidth === 0 && img.getAttribute('src')) artFailed(img);
+ else img.addEventListener('error', () => artFailed(img), { once: true });
+ });
+ // A broken inspiration PIP just leaves; nothing depends on it.
+ document.querySelectorAll('.pip img').forEach(img => {
+ const gone = () => img.closest('.pip')?.remove();
+ if (img.complete && img.naturalWidth === 0) gone();
+ else img.addEventListener('error', gone, { once: true });
+ });
+
// Inspiration PIP opens the full catalog card in the lightbox.
document.querySelectorAll('.pip').forEach(p => p.addEventListener('click', (e) => {
e.stopPropagation();
diff --git a/tests/new-work-e2e.test.mjs b/tests/new-work-e2e.test.mjs
index 0cbde6567..327cf07d8 100644
--- a/tests/new-work-e2e.test.mjs
+++ b/tests/new-work-e2e.test.mjs
@@ -274,7 +274,10 @@ describe('new-work-e2e: serve-question decision page', () => {
const payload = {
title: 'Choose the visual world',
options: [
- { id: 'assigned', label: 'Text Only Direction', body: 'a grounded direction, no comp' },
+ {
+ id: 'assigned', label: 'Text Only Direction', body: 'a grounded direction, no comp',
+ viewport: 'A full-width ruled manifest with entries.', case: 'Grounded in the audience world.',
+ },
{ id: 'challenger-hero', label: 'Has A Card', hero },
],
reroll: true, steer: true,
@@ -288,10 +291,78 @@ describe('new-work-e2e: serve-question decision page', () => {
const textOnlyMedia = await page.$('.card[data-id="assigned"] .media');
const heroMedia = await page.$('.card[data-id="challenger-hero"] .media');
const textOnlyFace = await page.$('.card[data-id="assigned"] .face.text-only');
+ // No media means no back face to hide facts on: the full read renders
+ // on the front, where nothing else would have used the room.
+ const textOnlyBack = await page.$('.card[data-id="assigned"] .face.back');
+ const frontRead = await page.$eval('.card[data-id="assigned"] .face.front', (el) => el.textContent);
+ // Catalog art without a sketch is labeled as reference, never as the
+ // promise of the build.
+ const heroLabel = await page.$eval('.card[data-id="challenger-hero"] .media .media-label', (el) => el.textContent);
await context.close();
assert.equal(textOnlyMedia, null, 'text-only card has no .media region');
assert.ok(textOnlyFace, 'text-only card carries the .text-only face class');
assert.ok(heroMedia, 'the hero card still renders its .media region');
+ assert.equal(textOnlyBack, null, 'text-only card has no unreachable back face');
+ assert.match(frontRead, /First viewport/, 'text-only front carries the first viewport fact');
+ assert.match(frontRead, /The case/, 'text-only front carries the case fact');
+ assert.equal(heroLabel, 'inspiration', 'sketchless catalog art is labeled inspiration');
+ } finally {
+ await stopDaemon(cwd, key);
+ rmSync(cwd, { recursive: true, force: true });
+ }
+ });
+
+ it('(f) a hero that never loads collapses to a labeled palette field, not a dark void', async () => {
+ const cwd = makeWorkspace();
+ const key = 'brokenart';
+ const payload = {
+ title: 'Choose the visual world',
+ options: [
+ {
+ id: 'assigned', label: 'Broken Art Direction',
+ thesis: 'The art is gone but the direction is not.',
+ palette: ['#1a3a2e', '#f2ede2', '#c8452a'],
+ risk: 'None.',
+ viewport: 'A ruled manifest.', case: 'Back facts must stay reachable.',
+ // Port 1 refuses connections everywhere; the load fails offline
+ // and deterministically, like a retired catalog URL in the field.
+ hero: 'http://127.0.0.1:1/gone-hero.webp',
+ },
+ {
+ id: 'challenger-bare', label: 'No Palette Direction',
+ thesis: 'Broken art and no swatches to paint from.',
+ hero: 'http://127.0.0.1:1/gone-too.webp',
+ },
+ ],
+ reroll: true, steer: true,
+ };
+ const { url } = await startDaemon(cwd, payload, key);
+ try {
+ const context = await browser.newContext();
+ const page = await context.newPage();
+ await page.goto(url, { waitUntil: 'load' });
+ await page.waitForSelector('.card[data-id="assigned"] .media.unavailable');
+ await page.waitForSelector('.card[data-id="challenger-bare"] .media.unavailable');
+ const imgGone = await page.$('.card[data-id="assigned"] .media img');
+ const label = await page.$eval('.card[data-id="assigned"] .media .media-label', (el) => el.textContent);
+ const field = await page.$eval('.card[data-id="assigned"] .media', (el) => el.style.background);
+ // The stale "Inspiration" tooltip goes with the art it described.
+ const title = await page.$eval('.card[data-id="assigned"] .media', (el) => el.getAttribute('title'));
+ // The scrim must not trap the flip controls: Details still flips.
+ await page.click('.card[data-id="assigned"] .chip.flip');
+ const flipped = await page.$('.card[data-id="assigned"].flipped');
+ // A palette-less card keeps the label and leans on the CSS graphite
+ // field instead of an inline gradient.
+ const bareLabel = await page.$eval('.card[data-id="challenger-bare"] .media .media-label', (el) => el.textContent);
+ const bareField = await page.$eval('.card[data-id="challenger-bare"] .media', (el) => el.style.background);
+ await context.close();
+ assert.equal(imgGone, null, 'the broken img is removed');
+ assert.equal(label, 'artwork unavailable', 'the slot says what happened');
+ assert.match(field, /linear-gradient/, 'the slot is painted from the card palette');
+ assert.equal(title, null, 'the inspiration tooltip is removed with the art');
+ assert.ok(flipped, 'the Details chip still flips the card under the scrim');
+ assert.equal(bareLabel, 'artwork unavailable', 'a palette-less slot still says what happened');
+ assert.equal(bareField, '', 'a palette-less slot takes the CSS fallback field, no inline gradient');
} finally {
await stopDaemon(cwd, key);
rmSync(cwd, { recursive: true, force: true });