test(images): map D35-D37 and widen the Images concept comparison

- D35 (singular counts) and D36 (alphabetical categories) are mapped deviations instead of pinned values; a search for exactly one image checks both singular nouns, and a one-image Load more checks the toast and continuation. - Grid, cards and panel at 1200x900 (2 columns, 275px panel) and 1800x1100 (4 columns); Large and Compact join the layout loop. - Masonry tops and heights compare unrounded within one layout unit per card above in the column (D3), not as rounded integers. - The Save view and sample-tag re-layout is checked against the concept page with those items removed at runtime. - The Load more row is compared before the press in both documents (D37). - Two seedless fixture images (seedless_images on the concept reset) prove every row reserves the tallest footer (D3). - D10 paths come from the fixture manifest; the D8 star margin is mapped; list-row derivations cite D3 and D9.
2026-10-20 07:46:54 -07:00
parent 3bd74a3233
commit e84a002820
5 changed files with 257 additions and 87 deletions
@@ -431,17 +431,22 @@ npm run --prefix tools/vendor test:workflows -- shell-concept.spec.mjs \

 `tests/browser/images-concept.spec.mjs` compares the Images page (#249 C7): heading,
 toolbar, filter row, caption, grid, the first six cards, the continuation and the panel
-box, in every layout, at both sizes, themes and motion settings. The concept is compared
-once its own Load more has loaded all 24 fixture images (it loads 12 per batch,
-production 40). Behaviors: hover zoom, the 2nd card opens the viewer titled
-"<title> · <filename>", Escape returns focus to it, Info on the 3rd card moves
-`.selected`, search "alpine", and Load more (12 in the concept, one listing page in
-production, both with the toast). `mapImagesConcept` applies D8 and D16 (follow-up
-PRs: no checkbox, no Save view), D3, D9, D10, D14, D15, D17, D29, D31 and D32; removed
-toolbar and filter-row items flow again from the concept's own boxes (`reflow`, proven
-on the concept rows first). Masonry card tops and heights may differ by one pixel (D3:
-layout arithmetic versus the browser's layout-unit snapping). Two mismatches wait for a
-ruling and are pinned on both sides: the category order and the singular count line.
+box, in Grid, List, Masonry and the Large and Compact sizes, at 1600x1100 and 390x844
+in both themes and motion settings; grid, cards and panel also at 1200x900 (2 columns,
+275px panel) and 1800x1100 (4 columns, 310px panel). The concept is compared once its
+own Load more has loaded all 24 fixture images (D37: it loads 12 per batch, production
+40); the Load more row is compared before the press in both documents. Behaviors: hover
+zoom, the 2nd card opens the viewer titled "<title> · <filename>", Escape returns focus
+to it (production only: the concept re-renders its grid and drops focus), Info on the
+3rd card moves `.selected`, searches for "alpine" and for one image, and Load more with
+its toast. `mapImagesConcept` applies D3, D8 and D16 (follow-up PRs: no checkbox, no
+Save view), D9, D10, D14, D15, D17, D29, D32, D35 (singular counts) and D36 (categories
+sorted alphabetically). Removed toolbar and filter-row items flow again from the
+concept's own boxes (`reflow`), checked against the concept page with those items
+removed at runtime. Masonry tops and heights are compared unrounded, within one layout
+unit per card above in the column (D3). `one footer height for the collection (D3)`
+seeds two seedless files (`seedless_images` on `/__test__/concept/reset`) and asserts
+that every row reserves the tallest footer.

 ## Workspace data fields for the concept pages (#249)

@@ -285,17 +285,19 @@ export function measureInventory(scope) {
        const copy=info?.querySelector(':scope > div:not(.image-card-actions)'),actions=info?.querySelector('.image-card-actions');
        const h3=copy?.querySelector('h3'),p=copy?.querySelector('p');
        return {className:classes(card),ratio:card.style.getPropertyValue('--media-ratio').replace(/\s/g,''),...relative(card,grid),
+            exact:{left:rect(card).left-rect(grid).left,top:rect(card).top-rect(grid).top,height:rect(card).height},
            ...edges(card),...css(card,'boxShadow','overflow','display'),
            art:when(art,()=>({...relative(art,card),...css(art,'position')})),
            open:when(open,()=>({label:open.getAttribute('aria-label'),...relative(open,card),...edges(open),...css(open,'display','overflow')})),
            img:when(img,()=>({alt:img.alt,width:img.getAttribute('width'),height:img.getAttribute('height'),...sized(img),
                ...css(img,'objectFit','aspectRatio','transform','transitionProperty','transitionDuration')})),
-            // An overlay item's horizontal margin may be `auto`, whose used value is only the free space beside it, so its
-            // place is recorded as its inset from the overlay's right edge instead (as the shell's pinned bottom group).
+            // An overlay item's horizontal margin may be `auto`, whose used value is the free space beside it: it is kept
+            // to the pixel, and the item's place is also recorded as its inset from the overlay's right edge.
            overlays:when(overlays,()=>!shown(overlays)?{display:getComputedStyle(overlays).display,shown:false}:({shown:true,...layout(overlays),
                ...css(overlays,'display','pointerEvents'),...relative(overlays,card),
-                items:[...overlays.children].map(node=>{const {marginLeft,marginRight,...item}=controlOf(node,card);
-                    return item.shown?{...item,rightInset:px(rect(overlays).right-rect(node).right)}:item;})})),
+                items:[...overlays.children].map(node=>{const item=controlOf(node,card);
+                    return item.shown?{...item,marginLeft:`${px(parseFloat(item.marginLeft))}px`,marginRight:`${px(parseFloat(item.marginRight))}px`,
+                        rightInset:px(rect(overlays).right-rect(node).right)}:item;})})),
            info:when(info,()=>({...layout(info),...edges(info),...relative(info,card),
                // The text and the actions are placed in the card (what is seen), so a centred list row compares by place.
                // The text's heights are the unrounded flow (the same CSS lays them out alike in both documents), so lines
@@ -6,11 +6,12 @@ import {SIZES,THEMES,MOTIONS,seedConcept,openConcept,openProduction,inventoryOf,
 // Task C7 of #249: the production Images page against the immutable concept, on the concept-shaped real fixture (24
 // images of the concept's six prompts, its seeds, sizes and favorites). Heading, toolbar, filter row, caption, grid,
 // the first six cards, the continuation and the panel box are compared at 1600x1100 and 390x844 in both themes, and the
-// page's behaviors under normal and reduced motion. The topbar and sidebar (D5, D28, D29) are the shell spec's.
+// page's behaviors under normal and reduced motion; grid, cards and panel also at 1200x900 and 1800x1100 (2 and 4
+// columns, the 275px and 310px panel). The topbar and sidebar (D5, D28, D29) are the shell spec's.
 // Paired captures are artifacts only; there are no PNG baselines.
 test.use({locale:'en-US',timezoneId:'UTC'});

-// The concept loads 12 images per batch (app.js imageBatchSize) and production one listing page (40), so both are
+// D37: the concept loads 12 images per batch (app.js imageBatchSize) and production one listing page (40), so both are
 // compared once the 24 fixture images are all loaded: the concept after its own Load more press.
 const FIXTURE_IMAGES=24;
 const CONCEPT_BATCH=12;
@@ -18,6 +19,11 @@ const PRODUCTION_BATCH=40;
 // Load more in production needs more than one listing page: the fixture continues the concept's rounds (two pages).
 const LOAD_MORE_EXTRA=2*PRODUCTION_BATCH-FIXTURE_IMAGES;
 const CARDS='.gallery-body > .image-grid > .media-card';
+const WIDE_SIZES=Object.freeze([[1200,900],[1800,1100]]);
+
+/** D35: production uses the singular for exactly one; the concept's plurals are hard-coded (app.js 447, 489, 517-521). */
+export const countCopy=text=>text.replace(/(^|\D)1 positive prompts\b/g,'$11 positive prompt')
+    .replace(/(^|\D)1 more images\b/g,'$11 more image').replace(/(^|\D)1 images\b/g,'$11 image');

 /** D17: "<Today|Yesterday|weekday> · <Month D>" of the newest file (the fixture's own mtime), in the test's UTC zone. */
 function captionDay(seconds,now=new Date()) {
@@ -96,16 +102,19 @@ function withoutCheckbox(overlays) {
    const own=item=>Math.max(parseFloat(item.minHeight)||0,parseFloat(item.lineHeight)+['paddingTop','paddingBottom','borderTopWidth','borderBottomWidth']
        .reduce((sum,key)=>sum+parseFloat(item[key]),0));
    const height=Math.max(...items.filter(item=>item.shown).map(own));
-    return {...overlays,height,items:items.map(item=>item.shown?{...item,height}:item)};
+    // D8 (interim): alone, the star is pushed to the right by `margin-left: auto`, whose used value is the overlay's
+    // free width; the checkbox PR removes that rule and this line.
+    const pushed=item=>items.length===1?{marginLeft:`${overlays.width-item.width}px`}:{};
+    return {...overlays,height,items:items.map(item=>item.shown?{...item,height,...pushed(item)}:item)};
 }

 /**
 * A list row's info once D9 narrows its actions to `actionsWidth`, from the concept's boxes:
- * - D31: the info fills the row beside the art and may shrink below a long nowrap title (`min-width: 0`), so it is the
- *   card's inner width less the art; the actions end at its right padding;
- * - the wider text column fits a subtitle the concept wrapped when its one-line width (`maxContent`) now fits;
- * - D3: the info keeps its own height (text or actions plus padding), centred in the row the concept stretches it
- *   across, so the text, centred in either, moves only by half the lines it lost.
+ * - D3 (the measurable list row, `.list-grid .media-info` in the overlay): the info fills the row beside the art and may
+ *   shrink below a long nowrap title (`min-width: 0`), so it is the card's inner width less the art, and the actions
+ *   end at its right padding; it keeps its own height (text or actions plus padding), centred in the row the concept
+ *   stretches it across, so the text, centred in either, moves only by half the lines it lost;
+ * - D9: the wider text column fits a subtitle the concept wrapped when its one-line width (`maxContent`) now fits.
 */
 function listInfo(card,actionsWidth) {
    const {info}=card,{copy,p}=info;
@@ -122,10 +131,17 @@ function listInfo(card,actionsWidth) {
 }

 /** Recorded Images deviations only (spec §8); everything else in the concept inventory must equal production. */
-export function mapImagesConcept(reference,{newestModified,now=new Date()}) {
+const nocase=(a,b)=>{const x=a.toLowerCase(),y=b.toLowerCase();return x<y?-1:x>y?1:a<b?-1:a>b?1:0;};
+
+export function mapImagesConcept(reference,{manifest,now=new Date()}) {
+    const paths=new Map(manifest.images.map(image=>[image.filename,image.path]));
    const toolbar=withoutItems(reference.toolbar,item=>item.text==='Save view');
    // D16 (follow-up PR): no Save view until the saved-views store ships. D14: the sort appends production's two sorts.
    toolbar.items=toolbar.items.map(item=>item.id==='sort'?{...item,options:[...item.options,'Oldest first','Name Z–A']}:item);
+    // D36: the category list is the Library's real list, sorted alphabetically (database/library.py `ORDER BY category
+    // COLLATE NOCASE, category`); the concept lists its samples in prompt order (app.js 348). Only the order is mapped.
+    toolbar.items=toolbar.items.map(item=>item.id==='category-filter'
+        ?{...item,options:[item.options[0],...item.options.slice(1).sort(nocase)]}:item);
    // D29: no "Illustrative previews" sample tag.
    const filterRow=withoutItems(reference.filterRow,item=>String(item.className).includes('sample-tag'));
    filterRow.items=filterRow.items.map(item=>{
@@ -156,18 +172,34 @@ export function mapImagesConcept(reference,{newestModified,now=new Date()}) {
            // D8 (follow-up PR): no selection checkbox yet; the star keeps the concept's top-right place.
            overlays:withoutCheckbox(card.overlays),
            info:{...card.info,...listRow.info,copy:{...card.info.copy,...listRow.copy},p:{...card.info.p,...listRow.p},
-                // D10: the title keeps the file's relative path (the fixture's `concepts/` folder) in `title`.
-                h3:{...card.info.h3,title:`concepts/${filename}`},
+                // D10: the title keeps the file's relative path (the fixture manifest's) in `title`.
+                h3:{...card.info.h3,title:paths.get(filename)??null},
                actions:{...actions,width:actionsWidth,left:listRow.actionsLeft??actions.left+freed,
                    buttons:actions.buttons.filter(button=>button!==tag)}}};
    });
    // D17: the right-hand date is the newest result's day under Recently added, here the fixture's newest mtime.
-    const caption={...reference.caption,spans:reference.caption.spans.map((span,index)=>index===1?{...span,text:captionDay(newestModified,now)}:span)};
-    // D32: the continuation's text and Load more may wrap at extreme zoom.
-    const continuation={...reference.continuation,flexWrap:'wrap'};
+    // D35: the count line uses the singular for one.
+    const caption={...reference.caption,spans:reference.caption.spans.map((span,index)=>index===1
+        ?{...span,text:captionDay(manifest.newest_modified,now)}:{...span,text:countCopy(span.text)})};
+    const continuation=mapContinuation(reference.continuation);
    return {...reference,toolbar,filterRow,cards,caption,continuation,panel:{...reference.panel,top:reference.panel.top-rise}};
 }

+/** D32: the continuation's text and Load more may wrap at extreme zoom; D35: its count uses the singular for one. */
+function mapContinuation(continuation,numbers=null) {
+    return {...continuation,flexWrap:'wrap',items:continuation.items.map(item=>item.tag!=='p'?item:{...item,
+        // D37: a row with more to load counts production's own page ("N of M"), not the concept's 12-image batch.
+        text:countCopy(numbers?item.text.replace(/^\d+ of \d+/,`${numbers.loaded} of ${numbers.total}`):item.text)})};
+}
+
+/** D37: the Load more row before its press, the concept's at 12 of 24 against production's at its own page. */
+function compareLoadingRow(reference,actual,count) {
+    const [,loaded,total]=count.match(/^(\d+) of (\d+)/);
+    // The row's place follows the grid above it, whose height is the batch's (D37).
+    const unplaced=({top,...row})=>stripExact(row);
+    return diffInventory(unplaced(mapContinuation(reference,{loaded,total})),unplaced(actual));
+}
+
 /** D15: the Import dialog's two real operations, with the ruled intro and the Rescan wording. */
 function mapImportConcept(reference) {
    return {...reference,
@@ -177,20 +209,14 @@ function mapImportConcept(reference) {
 }

 const SECTIONS=['heading','toolbar','filterRow','caption','grid','cards','continuation','panel','noPageScroll'];
-const pick=inventory=>stripExact(Object.fromEntries(SECTIONS.map(key=>[key,inventory[key]])));
+const pick=inventory=>stripExact(inventory);

-/**
- * Mismatches waiting for a maintainer ruling (task-C7 report: proposed D35, D36). They are not deviations and are not
- * mapped: each is pinned below to the exact concept and production values, so the test fails once either side changes,
- * and it is left out of the inventory diff only so the diff keeps naming every other difference.
- */
-const PENDING_CATEGORY_ORDER=/^toolbar\.items\.1\.options\.\d+$/;
+// The concept's own sample categories, in its first-appearance order (app.js 348): what D36 reorders.
 const CONCEPT_CATEGORIES=['All categories','Landscapes','Architecture','Environments','Illustration'];
-const PRODUCTION_CATEGORIES=['All categories','Architecture','Environments','Illustration','Landscapes'];

-function compare(reference,actual,manifest) {
-    return diffInventory(pick(mapImagesConcept(reference,{newestModified:manifest.newest_modified})),pick(actual))
-        .filter(item=>!PENDING_CATEGORY_ORDER.test(item.path));
+function compare(reference,actual,manifest,sections=SECTIONS) {
+    const only=inventory=>Object.fromEntries(sections.map(key=>[key,inventory[key]]));
+    return diffInventory(pick(only(mapImagesConcept(reference,{manifest}))),pick(only(actual)));
 }

 /** The comparison as a gate: throws, naming every differing path, unless production equals the mapped concept. */
@@ -200,12 +226,24 @@ function assertImagesMatch(reference,actual,manifest) {
 }

 /**
- * D3: bounded rendering places masonry cards from the layout arithmetic (media width over the file's ratio), while the
- * concept's flow snaps each box to the browser's layout unit (1/64px in Chromium and WebKit) before the next is
- * measured, so a card edge a fraction of a unit from .5 can round to the next pixel. Only that one pixel is forgiven,
- * only for masonry card tops and heights.
+ * D3 (masonry sub-pixel snapping): bounded rendering places masonry cards from the layout arithmetic (media width over
+ * the file's ratio), while the concept's flow snaps each box to the browser's layout unit (1/64px in Chromium and
+ * WebKit, 1/60px in Firefox) before measuring the next. So masonry tops and heights are compared unrounded instead,
+ * within one layout unit per card above in the column (the card's own included); the rounded fields are skipped there.
 */
-const subpixel=(layout,item)=>layout==='Masonry'&&/^cards\.\d+\.(top|height)$/.test(item.path)&&Math.abs(item.reference-item.actual)<=1;
+const MASONRY_ROUNDED=/^cards\.\d+\.(top|height)$/;
+function masonryDrift(reference,actual) {
+    return reference.cards.flatMap((card,index)=>{
+        const above=reference.cards.slice(0,index).filter(other=>Math.abs(other.exact.left-card.exact.left)<1).length;
+        const bound=(above+1)/60+1e-6,other=actual.cards[index];
+        return ['top','height'].filter(key=>!(Math.abs(card.exact[key]-other.exact[key])<=bound))
+            .map(key=>({path:`cards.${index}.exact.${key}`,reference:card.exact[key],actual:other.exact[key],bound}));
+    });
+}
+function compareLayout(layout,reference,mapped,actual) {
+    const diff=diffInventory(stripExact({grid:mapped.grid,cards:mapped.cards}),stripExact(actual));
+    return layout==='Masonry'?[...diff.filter(item=>!MASONRY_ROUNDED.test(item.path)),...masonryDrift(reference,actual)]:diff;
+}

 // Two frames, then every running transition (a card image zooming back after the pointer left it) finished.
 const settle=page=>page.evaluate(async()=>{
@@ -218,12 +256,14 @@ const toastText=page=>page.locator('.toast').textContent();

 /** The concept with every fixture image loaded through its own Load more button; returns what the press did. */
 async function openConceptLoaded(page,theme,motion) {
-    await openConcept(page,'images',theme,motion);await page.mouse.move(0,0);
+    await openConcept(page,'images',theme,motion);await page.mouse.move(0,0);await settle(page);
    const before=await page.locator(CARDS).count();
+    const loadingRow=(await inventoryOf(page,'#main')).continuation;
    // A dispatched press: scrolling the button into view would let the concept's own observer load the batch first.
-    await page.getByRole('button',{name:'Load more images',exact:true}).dispatchEvent('click');
+    // Where the first batch leaves the row in view (1800px, four columns), that observer has already loaded it.
+    if(before<FIXTURE_IMAGES)await page.getByRole('button',{name:'Load more images',exact:true}).dispatchEvent('click');
    await expect(page.locator(CARDS)).toHaveCount(FIXTURE_IMAGES);
-    const load={before,after:await page.locator(CARDS).count(),toast:await toastText(page),count:await countText(page)};
+    const load={before,after:await page.locator(CARDS).count(),toast:await toastText(page),count:await countText(page),loadingRow};
    await page.evaluate(()=>{document.activeElement?.blur();window.scrollTo(0,0);});await settle(page);
    return load;
 }
@@ -274,27 +314,33 @@ const activeOf=page=>page.evaluate(()=>{const node=document.activeElement;
        card:node?.closest('.media-card')?[...node.closest('.image-grid').children].indexOf(node.closest('.media-card')):null};});
 const selectedOf=page=>page.locator(CARDS).evaluateAll(nodes=>nodes.flatMap((node,index)=>node.classList.contains('selected')?[index]:[]));

-/** The layouts' card boxes and media sizes: Grid → List → Masonry, then back to Grid. */
+const LAYOUTS=['List','Masonry','Grid','Large','Compact'];
+/** The card boxes in each layout: Grid → List → Masonry → Grid, then the Large and Compact thumbnail sizes. */
 async function layoutsOf(page,scope) {
    const result={};
-    for(const layout of ['List','Masonry','Grid']) {
-        await page.locator('.filter-row .segmented').getByRole('button',{name:layout,exact:true}).click();
-        await expect(page.locator('.filter-row .segmented').getByRole('button',{name:layout,exact:true})).toHaveAttribute('aria-pressed','true');
+    for(const layout of LAYOUTS) {
+        if(['Large','Compact'].includes(layout))await page.locator('#image-size').selectOption(layout.toLowerCase());
+        else {
+            await page.locator('.filter-row .segmented').getByRole('button',{name:layout,exact:true}).click();
+            await expect(page.locator('.filter-row .segmented').getByRole('button',{name:layout,exact:true})).toHaveAttribute('aria-pressed','true');
+        }
        await page.mouse.move(0,0);await settle(page);await settle(page);
        const inventory=await inventoryOf(page,scope);
        result[layout]={grid:inventory.grid,cards:inventory.cards};
    }
+    await page.locator('#image-size').selectOption('comfortable');await settle(page);
    return result;
 }

-/** Search "alpine": the count line and the cards it leaves, then the search cleared again. */
-async function searchOf(page) {
+const continuationText=page=>page.locator('.infinite-continuation > p').first().textContent();
+/** A search: the count line, the continuation and the cards it leaves, then the search cleared again. */
+async function searchOf(page,term) {
    const before=await countText(page);
-    await page.locator('#search').fill('alpine');
+    await page.locator('#search').fill(term);
    await expect.poll(()=>countText(page)).not.toBe(before);
    await expect.poll(()=>page.locator(CARDS).count()).toBeLessThan(FIXTURE_IMAGES);
    await settle(page);
-    const result={count:await countText(page),cards:await page.locator(`${CARDS} .image-open`).evaluateAll(nodes=>nodes.map(node=>node.getAttribute('aria-label')))};
+    const result={count:await countText(page),continuation:await continuationText(page),cards:await page.locator(`${CARDS} .image-open`).evaluateAll(nodes=>nodes.map(node=>node.getAttribute('aria-label')))};
    await page.locator('#search').fill('');
    await expect(page.locator('#result-count')).toHaveText(before);
    return result;
@@ -317,8 +363,10 @@ async function behaviorsOf(page,scope) {
    await expect.poll(()=>selectedOf(page)).toEqual([2]);
    const selected=await selectedOf(page);
    const layouts=await layoutsOf(page,scope);
-    const search=await searchOf(page);
-    return {hover,opened,viewerTitle,focusAfterViewer,selected,layouts,search};
+    const search=await searchOf(page,'alpine');
+    // Exactly one image (a unique filename stem): both counted nouns in the singular (D35).
+    const single=await searchOf(page,'alpine_00003');
+    return {hover,opened,viewerTitle,focusAfterViewer,selected,layouts,search,single};
 }

 test.beforeEach(async({request},testInfo)=>{testInfo.manifest=await seedConcept(request);});
@@ -332,6 +380,13 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`images page ge
        const conceptLoad=await openConceptLoaded(page,theme,motion);
        const reference=await inventoryOf(page,'#main');
        if(capture)await captureCanonicalState(page,testInfo,`concept-images-${width}-${theme}`);
+        // The browser as the re-layout's oracle: the concept page itself without Save view, then without the sample tag.
+        const removed={};
+        for(const [key,selector] of [['toolbar','.toolbar > [data-action="save-view"]'],['filterRow','.filter-row > .sample-tag']]) {
+            const restore=await mutate(page,{remove:[selector]});
+            removed[key]=(await inventoryOf(page,'#main'))[key];
+            await restore();
+        }
        const referenceImport=await importDialogOf(page);
        const referenceBehaviors=await behaviorsOf(page,'#main');

@@ -340,7 +395,7 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`images page ge
        if(capture)await captureCanonicalState(page,testInfo,`production-images-${width}-${theme}`);
        const actualImport=await importDialogOf(page);
        const actualBehaviors=await behaviorsOf(page,'#workspace-main');
-        result[motion]={conceptLoad,reference,actual,diff:compare(reference,actual,manifest),referenceImport,actualImport,
+        result[motion]={conceptLoad,reference,removed,actual,diff:compare(reference,actual,manifest),referenceImport,actualImport,
            importDiff:diffInventory(mapImportConcept(referenceImport),actualImport),referenceBehaviors,actualBehaviors};
    }
    // Load more in production: a fixture past one listing page appends one batch and shows the concept's toast.
@@ -349,34 +404,43 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`images page ge
        const total=FIXTURE_IMAGES+LOAD_MORE_EXTRA;
        await openProductionLoaded(page,theme,motion,total);
        const before=await page.locator(CARDS).count();
+        const loadingRow=(await inventoryOf(page,'#workspace-main')).continuation,loadingCount=await countText(page);
        await page.getByRole('button',{name:'Load more images',exact:true}).click();
        await expect(page.locator('#result-count')).toHaveText(new RegExp(`^${total} of ${total} images`));
        result[motion].productionLoad={before,after:await page.locator(CARDS).count(),toast:await toastText(page),count:await countText(page)};
+        result[motion].loadingDiff=compareLoadingRow(result[motion].conceptLoad.loadingRow,loadingRow,loadingCount);
    }
    const path=testInfo.outputPath('images-geometry.json');await writeFile(path,JSON.stringify(result,null,2));
    await testInfo.attach('images-geometry',{path,contentType:'application/json'});

    for(const [motion,entry] of Object.entries(result)) {
-        const {conceptLoad,productionLoad,reference,actual,diff,referenceImport,importDiff,referenceBehaviors:concept,actualBehaviors:production}=entry;
+        const {conceptLoad:{loadingRow,...conceptLoad},productionLoad,loadingDiff,reference,removed,actual,diff,referenceImport,importDiff,
+            referenceBehaviors:concept,actualBehaviors:production}=entry;
        // The concept itself is what this comparison assumes: its first batch, its sample card and its copy.
        expect.soft(conceptLoad,`${motion} concept Load more`).toEqual({before:CONCEPT_BATCH,after:FIXTURE_IMAGES,
            toast:`${CONCEPT_BATCH} more images loaded. ${FIXTURE_IMAGES} of ${FIXTURE_IMAGES}.`,count:`${FIXTURE_IMAGES} of ${FIXTURE_IMAGES} images · 6 positive prompts`});
+        // D37: production appends one listing page, with the concept's toast and count copy (D35 for one).
        expect.soft(productionLoad,`${motion} production Load more`).toEqual({before:PRODUCTION_BATCH,after:2*PRODUCTION_BATCH,
-            toast:`${PRODUCTION_BATCH} more images loaded. ${2*PRODUCTION_BATCH} of ${2*PRODUCTION_BATCH}.`,
-            count:`${2*PRODUCTION_BATCH} of ${2*PRODUCTION_BATCH} images · 6 positive prompts`});
+            toast:countCopy(`${PRODUCTION_BATCH} more images loaded. ${2*PRODUCTION_BATCH} of ${2*PRODUCTION_BATCH}.`),
+            count:countCopy(`${2*PRODUCTION_BATCH} of ${2*PRODUCTION_BATCH} images · 6 positive prompts`)});
+        // D37: the row with more to load, before its press, in both documents.
+        expect.soft(loadingRow.items.map(item=>item.text),`${motion} concept loading row`).toEqual([`${CONCEPT_BATCH} of ${FIXTURE_IMAGES} images · more load as you scroll`,'Load more images']);
+        expect.soft(loadingDiff,`${motion} loading row differences after D32, D35, D37`).toEqual([]);
        // D11: the concept's subtitle is the fixture's own "W × H · PNG · Seed N".
        const first=manifest.images[0];
        expect.soft(reference.cards[0].info.p.text,`${motion} concept subtitle`).toBe(`${first.width} × ${first.height} · PNG · Seed ${first.seed}`);
        expect.soft(reference.cards[0].info.h3.fontSize,`${motion} concept h3 size`).toBe('11px');
        expect.soft(referenceImport.rows.map(row=>row.title),`${motion} concept Import rows`).toEqual(['Inspect a local image','Scan an output folder','Import portable recipes']);
-        // The row model reproduces the concept's own rows before it lays out their D16/D29 remainders.
+        // The row model reproduces the concept's own rows, and the concept page itself once Save view (D16) or the
+        // sample tag (D29) is removed from it at runtime: the browser is the oracle for the remainders the mapping uses.
        expect.soft(diffInventory(stripExact(reflow(reference.toolbar,reference.toolbar.items)),stripExact(reference.toolbar)),`${motion} toolbar model`).toEqual([]);
        expect.soft(diffInventory(stripExact(reflow(reference.filterRow,reference.filterRow.items)),stripExact(reference.filterRow)),`${motion} filter row model`).toEqual([]);
+        expect.soft(diffInventory(stripExact(withoutItems(reference.toolbar,item=>item.text==='Save view')),stripExact(removed.toolbar)),
+            `${motion} toolbar without Save view`).toEqual([]);
+        expect.soft(diffInventory(stripExact(withoutItems(reference.filterRow,item=>String(item.className).includes('sample-tag'))),stripExact(removed.filterRow)),
+            `${motion} filter row without the sample tag`).toEqual([]);
+        expect.soft(reference.toolbar.items.find(item=>item.id==='category-filter').options,`${motion} concept categories`).toEqual(CONCEPT_CATEGORIES);
        expect.soft(diff,`${motion} differences after the recorded deviations`).toEqual([]);
-        // Pending D36 (proposed): the concept lists its sample categories in prompt order, production the Library's
-        // categories alphabetically (/prompt_manager/library/options).
-        expect.soft([reference.toolbar.items[1].options,actual.toolbar.items[1].options],`${motion} category order (pending D36)`)
-            .toEqual([CONCEPT_CATEGORIES,PRODUCTION_CATEGORIES]);
        expect.soft(importDiff,`${motion} Import dialog differences after D15`).toEqual([]);
        expect.soft(actual.noPageScroll,`${motion} no page-level horizontal scroll`).toBe(true);
        // Hover (C4): the concept's 1.03 zoom over 0.2s, instant under reduced motion; D18: none where there is no hover.
@@ -394,20 +458,20 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`images page ge
        expect.soft(production.selected,`${motion} selection after Info`).toEqual(concept.selected);
        // List (160×95 art) and Masonry (--media-ratio media) as the concept lays them out.
        expect.soft(concept.layouts.List.cards[0].img,`${motion} concept list art`).toMatchObject({width:160,height:95});
-        for(const layout of ['List','Masonry','Grid']) {
-            const mapped=mapImagesConcept({...reference,...concept.layouts[layout]},{newestModified:manifest.newest_modified});
-            expect.soft(diffInventory(stripExact({grid:mapped.grid,cards:mapped.cards}),stripExact(production.layouts[layout])).filter(item=>!subpixel(layout,item)),
-                `${motion} ${layout} layout`).toEqual([]);
+        for(const layout of LAYOUTS) {
+            const mapped=mapImagesConcept({...reference,...concept.layouts[layout]},{manifest});
+            expect.soft(compareLayout(layout,concept.layouts[layout],mapped,production.layouts[layout]),`${motion} ${layout} layout`).toEqual([]);
        }
        for(const card of concept.layouts.Masonry.cards) {
            const [w,h]=card.ratio.split('/').map(Number);
            expect.soft(Math.abs(card.img.width/card.img.height-w/h),`${motion} concept masonry ratio ${card.open.label}`).toBeLessThan(0.02);
        }
-        // Search "alpine" leaves the same images in both documents. Pending D35 (proposed): production pluralizes the
-        // count line ("1 positive prompt"); the concept's copy is always plural ("1 positive prompts").
-        expect.soft(production.search.cards,`${motion} search alpine`).toEqual(concept.search.cards);
-        expect.soft([concept.search.count,production.search.count],`${motion} search count line (pending D35)`)
-            .toEqual(['4 of 4 images · 1 positive prompts','4 of 4 images · 1 positive prompt']);
+        // Searches leave the same images, count line and continuation in both documents (D35 for one).
+        const mappedSearch=search=>({...search,count:countCopy(search.count),continuation:countCopy(search.continuation)});
+        expect.soft(production.search,`${motion} search alpine`).toEqual(mappedSearch(concept.search));
+        expect.soft(concept.single,`${motion} concept single result`).toMatchObject({count:'1 of 1 images · 1 positive prompts',cards:['Open alpine_00003.png']});
+        expect.soft(production.single,`${motion} search for one image`).toEqual(mappedSearch(concept.single));
+        expect.soft(production.single.count,`${motion} singular count line`).toBe('1 of 1 image · 1 positive prompt');
    }
 });

@@ -432,3 +496,62 @@ test('images comparison detects mutations',async({page},testInfo)=>{
    const domMutated=await measure();
    expect(()=>assertImagesMatch(reference,domMutated,manifest)).toThrow(/cards\.0\.info\.actions\.buttons\.length/);
 });
+
+// Grid, cards and panel at the other concept breakpoints: 2 columns and the 275px panel at 1200, 4 columns and the
+// 310px panel at 1800.
+for(const [width,height] of WIDE_SIZES)for(const theme of THEMES)test(`images grid, cards and panel match the concept ${width}x${height} ${theme}`,async({page},testInfo)=>{
+    await page.setViewportSize({width,height});
+    const manifest=testInfo.manifest;
+    await openConceptLoaded(page,theme,'no-preference');
+    const reference=await inventoryOf(page,'#main');
+    await captureCanonicalState(page,testInfo,`concept-images-${width}-${theme}`);
+    await openProductionLoaded(page,theme,'no-preference');
+    const actual=await inventoryOf(page,'#workspace-main');
+    await captureCanonicalState(page,testInfo,`production-images-${width}-${theme}`);
+    expect(reference.grid.columns,'concept columns').toBe(width<=1250?2:4);
+    expect(reference.panel.box.width,'concept panel').toBe(width<=1250?275:310);
+    expect(compare(reference,actual,manifest,['grid','cards','panel'])).toEqual([]);
+});
+
+// D35 for the toast and the continuation: production's Load more appending exactly one image, against the concept's
+// own toast and row copy (app.js 489, 517-521) with production's numbers (D37).
+test('one appended image reads in the singular',async({page,request})=>{
+    // A second fixture seed (dozens of PNGs and their thumbnails) runs inside the test.
+    test.setTimeout(120_000);
+    await page.setViewportSize({width:1600,height:1100});
+    const total=PRODUCTION_BATCH+1;
+    await seedConcept(request,{extra_images:total-FIXTURE_IMAGES});
+    await openProductionLoaded(page,'dark','no-preference',total);
+    await expect(page.locator('.infinite-continuation > p').first()).toHaveText(countCopy(`${PRODUCTION_BATCH} of ${total} images · more load as you scroll`));
+    // A dispatched press: scrolling the button into view lets the page's own observer load the one image first.
+    await page.getByRole('button',{name:'Load more images',exact:true}).dispatchEvent('click');
+    await expect(page.locator('#result-count')).toHaveText(new RegExp(`^${total} of ${total} images`));
+    await expect(page.locator('.toast')).toHaveText(countCopy(`1 more images loaded. ${total} of ${total}.`));
+    expect(countCopy('1 more images loaded. 41 of 41.')).toBe('1 more image loaded. 41 of 41.');
+    await expect(page.locator('.infinite-continuation > p').first()).toHaveText(`You’re all caught up · ${total} images`);
+});
+
+// D3 (one footer height for the collection): bounded rendering cannot measure unrendered cards, so every row reserves
+// the tallest measured footer. Two seedless files (D11 "W × H · PNG", one line) form the first row at 390px, where
+// every concept subtitle wraps: their row is as tall as the wrapped rows, and every concept row moves down by one.
+test('one footer height for the collection (D3)',async({page,request})=>{
+    // A second fixture seed (dozens of PNGs and their thumbnails) runs inside the test.
+    test.setTimeout(120_000);
+    await page.setViewportSize({width:390,height:844});
+    await openConceptLoaded(page,'dark','no-preference');
+    const reference=await inventoryOf(page,'#main');
+    expect(reference.grid.columns).toBe(2);
+    expect(reference.cards.every(card=>card.info.p.height>parseFloat(card.info.p.lineHeight))).toBe(true);
+    const manifest=await seedConcept(request,{seedless_images:2});
+    await openProductionLoaded(page,'dark','no-preference',FIXTURE_IMAGES+2);
+    const actual=await inventoryOf(page,'#workspace-main');
+    const box=card=>({left:card.left,top:card.top,width:card.width,height:card.height});
+    const pitch=reference.cards[2].top-reference.cards[0].top;
+    expect(actual.cards.map(box)).toEqual([box(reference.cards[0]),box(reference.cards[1]),
+        ...reference.cards.slice(0,4).map(card=>({...box(card),top:card.top+pitch}))]);
+    const seedless=actual.cards.slice(0,2);
+    expect(seedless.map(card=>card.open.label)).toEqual(manifest.seedless.map(image=>`Open ${image.filename}`));
+    expect(seedless.map(card=>card.info.p.text)).toEqual(['1536 × 1152 · PNG','1536 × 1152 · PNG']);
+    // Their own footer is one line shorter than the row it reserves.
+    for(const card of seedless)expect(card.info.height).toBeLessThan(reference.cards[0].info.height);
+});
@@ -16,6 +16,7 @@ from PIL.PngImagePlugin import PngInfo

 from tests.browser.workspace_concept_fixture import (
    MAX_EXTRA_IMAGES as CONCEPT_MAX_EXTRA_IMAGES,
+    MAX_SEEDLESS_IMAGES as CONCEPT_MAX_SEEDLESS_IMAGES,
    seed_workspace_concept,
 )
 from tests.browser.workspace_visual_fixture import seed_workspace_visual
@@ -389,13 +390,20 @@ def create_app(root: Path) -> web.Application:
        """Seed the concept-shaped fixture (D30); only a bounded image count."""
        nonlocal history_fixture
        data = await request.json() if request.can_read_body else {}
+        limits = {
+            "extra_images": CONCEPT_MAX_EXTRA_IMAGES,
+            "seedless_images": CONCEPT_MAX_SEEDLESS_IMAGES,
+        }
        if (
            request.query
            or not isinstance(data, dict)
-            or set(data) - {"extra_images"}
-            or isinstance(data.get("extra_images", 0), bool)
-            or not isinstance(data.get("extra_images", 0), int)
-            or not 0 <= data.get("extra_images", 0) <= CONCEPT_MAX_EXTRA_IMAGES
+            or set(data) - set(limits)
+            or any(
+                isinstance(data.get(key, 0), bool)
+                or not isinstance(data.get(key, 0), int)
+                or not 0 <= data.get(key, 0) <= limit
+                for key, limit in limits.items()
+            )
        ):
            raise web.HTTPBadRequest()
        history_commands.reset()
@@ -403,7 +411,10 @@ def create_app(root: Path) -> web.Application:
        history_fixture = None
        manifest = await api._run_in_executor(
            lambda: seed_workspace_concept(
-                api, root, extra_images=data.get("extra_images", 0)
+                api,
+                root,
+                extra_images=data.get("extra_images", 0),
+                seedless_images=data.get("seedless_images", 0),
            )
        )
        return web.json_response({"success": True, **manifest})
@@ -155,6 +155,9 @@ CONCEPT_RUN_COUNT = 4
 # The concept's Model fact (app.js:408).
 CONCEPT_MODEL = "illustrative-model.safetensors"
 MAX_EXTRA_IMAGES = 120
+# Unlinked, seedless images (D11 "W × H · PNG") newer than the concept's, for D3 checks.
+MAX_SEEDLESS_IMAGES = 2
+SEEDLESS_SIZE = (1536, 1152)
 SESSION = "5c1f9a7e-3f0b-4a55-9d0e-2b8c4f6a7d10"
 _TABLES = (
    "execution_run_outputs",
@@ -319,18 +322,34 @@ def _record_run(
    return start.run_id


+def _write_seedless_png(path: Path) -> None:
+    """A plain PNG with no metadata: no prompt, no seed, no link."""
+    with Image.new("RGB", SEEDLESS_SIZE, "#2b3442") as image:
+        image.save(path)
+
+
+def _bounded(name: str, value: int, maximum: int) -> None:
+    if isinstance(value, bool) or not isinstance(value, int):
+        raise TypeError(f"{name} must be an integer")
+    if not 0 <= value <= maximum:
+        raise ValueError(f"{name} is out of range")
+
+
 def seed_workspace_concept(
-    api: PromptManagerAPI, root: Path, *, extra_images: int = 0
+    api: PromptManagerAPI,
+    root: Path,
+    *,
+    extra_images: int = 0,
+    seedless_images: int = 0,
 ) -> dict:
    """Replace this server's disposable rows and files with the concept's data.

    ``extra_images`` continues the concept's rounds (same prompts, dimensions and
    seed rule) after its 24 images, for bounded-rendering and Load more checks.
+    ``seedless_images`` adds unlinked PNGs without metadata, newest of all.
    """
-    if isinstance(extra_images, bool) or not isinstance(extra_images, int):
-        raise TypeError("extra_images must be an integer")
-    if not 0 <= extra_images <= MAX_EXTRA_IMAGES:
-        raise ValueError("extra_images is out of range")
+    _bounded("extra_images", extra_images, MAX_EXTRA_IMAGES)
+    _bounded("seedless_images", seedless_images, MAX_SEEDLESS_IMAGES)
    _clear(api, root)
    db = api.db
    epoch = db.get_execution_epoch()
@@ -414,10 +433,19 @@ def seed_workspace_concept(
                    "prompt": prompt.id,
                    "variant": variant,
                    "seed": seed,
+                    "path": f"concepts/{name}",
                    "width": facts["width"],
                    "height": facts["height"],
                }
            )
+    seedless = []
+    for number in range(seedless_images):
+        name = f"seedless_{number + 1:05}.png"
+        path = folder / name
+        _write_seedless_png(path)
+        stamp = now - 10 - number * 10
+        os.utime(path, (stamp, stamp))
+        seedless.append({"filename": name, "path": f"concepts/{name}"})
    with db.model.get_connection() as conn:
        counts = conn.execute(
            "SELECT COUNT(*), MIN(run_count), MAX(run_count) FROM prompts "
@@ -431,7 +459,8 @@ def seed_workspace_concept(
    return {
        "epoch": epoch,
        # The newest file's mtime (epoch seconds), for the D17 caption date.
-        "newest_modified": now - 60,
+        "newest_modified": now - 10 if seedless_images else now - 60,
+        "seedless": seedless,
        "prompts": prompts,
        "images": images,
        "runs": runs,