pandorga 1.3.6 → 1.3.8

data/assets/css/ledger/home.css

@@ -943,10 +943,14 @@ html[data-theme="light"] .home-hero-plate {
   }
 }
 
-/* ── Engineering artifacts: specimen + index folio ──
-   Fixed specimen chrome (16:9 plate + reserved body). Mobile icon strip
-   always reserves six equal slots at a fixed button height. Desktop inventory
-   sits in a panel container matched to the specimen height via CSS, not JS. */
+/* ── Engineering artifacts: specimen bench ──
+   A specimen card beside a filing rack of project cards. The specimen keeps a
+   min-height floor so short projects still fill the bench, and grows with its
+   tagline and wrapping tag chips — the same chip wrap the projects index uses.
+   Every plate is 16:9, the ratio the thumbnails are drawn at, with the title
+   below it. From 900px the specimen is half the band and the rack a narrower
+   column beside it, the rest left blank. Below 900px the rack is an icon strip
+   above the specimen, one column per project. */
 .home-projects-bench {
   --home-specimen-height: 32rem;
   --home-icon-btn-size: 2.75rem;
@@ -957,55 +961,132 @@ html[data-theme="light"] .home-hero-plate {
   gap: var(--space-md);
 }
 
+.home-project-inventory {
+  order: -1;
+}
+
 .home-project-specimen {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  padding: var(--space-md);
-  padding-bottom: var(--space-lg);
-  max-width: none;
-  width: 100%;
-  height: var(--home-specimen-height);
+  min-height: var(--home-specimen-height);
+  height: auto;
   overflow: hidden;
-  border: 0;
-  background: var(--color-panel-contrast);
+  gap: var(--space-sm);
+  padding: var(--space-md);
   box-sizing: border-box;
 }
 
-:root:not([data-theme="dark"]) .home-project-specimen,
-html[data-theme="light"] .home-project-specimen,
-[data-theme="dark"] .home-project-specimen {
-  border: 0;
+/* The triad top rule (`.ledger-card--edge-primary`), restated at a weight
+   that beats the light-paper hairline reset on `.ledger-system-card`. */
+:root .home-projects-bench .home-project-specimen,
+:root .home-projects-bench .home-project-specimen:hover {
+  border-top: 2px solid var(--color-primary);
 }
 
-.home-project-specimen>.ledger-poster,
-.home-project-specimen>.projects-plate {
+.home-band--contrast .home-project-specimen {
+  background: var(--color-surface-card-contrast);
+}
+
+.home-band--contrast .home-project-specimen:hover {
+  background: var(--color-surface-high-contrast);
+}
+
+.home-specimen-strip,
+.home-project-inventory-code {
+  display: flex;
   flex: 0 0 auto;
-  width: auto;
-  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) 0;
-  aspect-ratio: 16 / 9;
-  max-height: calc(var(--home-specimen-height) * 0.5);
-  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+/* Same chrome voice as `.projects-page .ledger-meta` (label face), stepped
+   up to `--type-label-lg` on the specimen so the strip above the plate
+   matches the featured scale instead of body-meta. The rack keeps the
+   plain label step. */
+.home-specimen-strip .ledger-meta,
+.home-project-inventory-code .ledger-meta {
+  min-width: 0;
+  flex-wrap: nowrap;
   overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-label);
+  font-size: var(--type-label);
+  letter-spacing: 0.03em;
+}
+
+.home-specimen-strip .ledger-meta {
+  font-size: var(--type-label-lg);
+}
+
+.home-specimen-folio,
+.home-project-inventory-index {
+  color: var(--color-primary);
+  font-size: inherit;
 }
 
-.home-project-specimen>.ledger-poster img,
-.home-project-specimen>.ledger-poster video {
+.home-specimen-strip>.ledger-status,
+.home-project-inventory-code>.ledger-status {
+  flex: 0 0 auto;
+  font-family: var(--font-label);
+  font-size: var(--type-label);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.4;
+  padding: 0.1rem 0.45rem;
+  background: color-mix(in srgb, var(--color-secondary) 14%, transparent);
+}
+
+.home-specimen-strip>.ledger-status {
+  font-size: var(--type-label-lg);
+}
+
+/* The figure holds the plate and, always below it, the title. The badge
+   shares the poster's grid cell; when the image fails, renderPosterMedia
+   removes it and the badge hides with it. */
+.home-specimen-figure {
+  flex: 0 0 auto;
+  display: grid;
+  gap: var(--space-md);
+}
+
+.home-specimen-figure>.ledger-poster,
+.home-specimen-figure>.projects-plate {
+  grid-area: 1 / 1;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  aspect-ratio: 16 / 9;
+}
+
+.home-specimen-figure>.projects-plate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface-high);
+  color: var(--color-primary);
+}
+
+.home-specimen-figure .projects-plate-glyph {
+  font-size: 3rem;
+}
+
+.home-specimen-figure .is-initial {
+  font-family: var(--font-content-title);
+  font-weight: var(--weight-title);
+  line-height: 1;
+}
+
+.home-specimen-figure:has(> .ledger-poster)>.home-specimen-badge.is-initial {
+  font-size: var(--type-subtitle);
 }
 
 /* Glyph plates have no .ledger-poster::after — mirror the image corners. */
-.home-project-specimen>.projects-plate::after {
+.home-specimen-figure>.projects-plate::after {
   content: "";
   --frame-corner-size: 0.7rem;
   --frame-corner-thickness: 1px;
   position: absolute;
   inset: 0.3rem;
   pointer-events: none;
-  z-index: 2;
   background:
     linear-gradient(var(--color-primary), var(--color-primary)) top left / var(--frame-corner-size) var(--frame-corner-thickness) no-repeat,
     linear-gradient(var(--color-primary), var(--color-primary)) top left / var(--frame-corner-thickness) var(--frame-corner-size) no-repeat,
@@ -1017,82 +1098,106 @@ html[data-theme="light"] .home-project-specimen,
     linear-gradient(var(--color-primary), var(--color-primary)) bottom right / var(--frame-corner-thickness) var(--frame-corner-size) no-repeat;
 }
 
-.home-project-specimen .projects-plate--mark {
-  display: flex;
+.home-specimen-figure>.home-specimen-badge {
+  display: none;
+}
+
+.home-specimen-figure:has(> .ledger-poster)>.home-specimen-badge {
+  grid-area: 1 / 1;
+  justify-self: end;
+  align-self: start;
+  z-index: 3;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-surface-high);
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: var(--space-sm);
+  font-size: 1.25rem;
+  background: var(--color-surface-card);
   color: var(--color-primary);
 }
 
-.home-project-specimen .projects-plate-glyph {
-  font-size: 3rem;
-}
-
-.home-project-specimen .ledger-meta {
-  display: none;
-}
-
-.home-project-specimen .ledger-card-title,
-.home-project-specimen .ledger-card-title a {
-  flex: 0 0 auto;
-  font-family: var(--font-content-title);
+.home-project-specimen .home-specimen-title {
+  margin: 0;
   font-size: var(--type-card-lg);
-  font-weight: var(--weight-title);
-  font-synthesis: none;
   line-height: 1.2;
-  color: var(--color-on-surface);
-  min-height: calc(1.2em * 1);
-  margin: var(--space-sm) 0 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.home-project-specimen:hover .ledger-card-title a,
-.home-project-specimen:focus-within .ledger-card-title a {
-  color: var(--color-primary);
-}
-
+/* Full tagline, same as `.ledger-system-card` on the projects index — no
+   clamp and no flex-shrink that would crop mid-sentence. The chip row wraps
+   whole pills to the next line (never mid-label); spare height still parks
+   them and the foot on the floor. */
 .home-project-specimen .ledger-card-copy {
   flex: 0 0 auto;
-  font-family: var(--font-body);
   font-size: var(--type-body);
-  font-weight: var(--weight-body);
   line-height: var(--leading-body);
   color: var(--color-on-surface-variant);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  overflow: hidden;
-  min-height: calc(var(--type-body) * var(--leading-body) * 3);
-  margin: 0;
 }
 
 .home-project-specimen .ledger-chip-row {
-  display: flex;
+  flex: 0 0 auto;
   flex-wrap: wrap;
   gap: var(--space-xs);
-  margin: 0;
+  margin: auto 0 0;
+}
+
+.home-specimen-foot {
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--space-md);
   margin-top: auto;
+  padding-top: var(--space-md);
+}
+
+.home-project-specimen .ledger-chip-row~.home-specimen-foot {
+  margin-top: var(--space-xs);
+}
+
+.home-specimen-foot .ledger-card-links {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-sm) var(--space-lg);
+  padding-top: 0;
+  border-top: 0;
+}
+
+.home-specimen-open {
+  margin-left: auto;
   flex: 0 0 auto;
-  max-height: none;
-  overflow: visible;
 }
 
-.home-project-specimen .ledger-card-links {
-  display: none;
+.home-project-specimen:hover .home-specimen-open {
+  color: var(--color-on-primary, var(--color-surface));
+  border-color: var(--color-link-hover);
+  background: var(--color-primary);
 }
 
-/* Mobile: six equal icon slots, fixed button height (empty slots stay empty). */
+.home-project-specimen:hover .home-specimen-open .ledger-cta-arrow {
+  transform: translateX(4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home-project-specimen:hover .home-specimen-open .ledger-cta-arrow {
+    transform: none;
+  }
+}
+
+/* Mobile: one equal column per project (the script sets the count, up to
+   six), so the strip spans the band; fixed button height. */
 .home-project-inventory {
   display: grid;
   grid-template-columns: repeat(var(--home-project-icon-count, 6), minmax(0, 1fr));
   gap: var(--space-xs);
   min-width: 0;
   min-height: 0;
-  height: auto !important;
   overflow: visible;
   background: transparent;
   border: 0;
@@ -1104,22 +1209,16 @@ html[data-theme="light"] .home-project-specimen,
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: none;
-  width: auto;
   min-width: 0;
   height: var(--home-icon-btn-size);
-  aspect-ratio: auto;
-  gap: 0;
   padding: 0;
   border: 1px solid var(--border-gentle-divider);
   background: var(--color-panel-contrast);
   cursor: pointer;
-  box-shadow: none;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-default),
     border-color var(--motion-duration-fast) var(--motion-ease-default);
 }
 
-.home-project-inventory-index,
 .home-project-inventory-media,
 .home-project-inventory-body {
   display: none;
@@ -1129,9 +1228,6 @@ html[data-theme="light"] .home-project-specimen,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: auto;
-  height: auto;
-  margin: 0;
   font-size: 1.25rem;
   line-height: 1;
   color: var(--color-on-surface-variant);
@@ -1154,7 +1250,6 @@ html[data-theme="light"] .home-project-specimen,
   outline: 1px solid var(--color-primary);
   outline-offset: -1px;
   background: var(--color-surface-high);
-  box-shadow: none;
 }
 
 .home-project-inventory-row.is-selected .home-project-inventory-glyph,
@@ -1169,93 +1264,68 @@ html[data-theme="light"] .home-project-specimen,
   background: var(--color-surface-high-contrast);
 }
 
-.home-project-inventory-row .ledger-meta {
-  display: none;
-}
-
 @media (min-width: 900px) {
+
+  /* The rack panel stretches to the specimen's content height. */
   .home-projects-bench {
     --home-specimen-height: 36rem;
     display: grid;
-    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
-    gap: var(--space-xl);
+    grid-template-columns: minmax(0, 50%) minmax(18rem, 34%);
+    column-gap: var(--space-xl);
     align-items: stretch;
   }
 
-  .home-project-specimen {
-    height: var(--home-specimen-height);
-  }
-
-  /* Panel container over the tiled band — not bare rows on the grid. */
   .home-project-inventory {
+    order: 0;
     display: flex;
     flex-direction: column;
-    height: var(--home-specimen-height);
+    gap: var(--space-sm);
+    min-height: 0;
     overflow: hidden;
-    gap: 0;
-    padding: 0;
+    padding: var(--space-md);
     background: var(--color-panel-contrast);
-    border: 1px solid var(--border-gentle-divider);
+  }
+
+  .home-project-specimen .home-specimen-title {
+    font-size: var(--type-title);
   }
 
   .home-project-inventory-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
     flex: 1 1 0;
-    width: auto;
+    justify-content: flex-start;
+    gap: var(--space-md);
     height: auto;
     min-height: 0;
-    aspect-ratio: auto;
-    gap: var(--space-md);
     padding: var(--space-sm) var(--space-md);
-    border: 0;
-    border-bottom: 1px solid var(--border-gentle-divider);
-    background: transparent;
+    border: 1px solid var(--border-gentle-divider);
+    background: var(--color-surface-card);
     outline: none;
   }
 
-  .home-project-inventory-row:last-child {
-    border-bottom: 0;
+  .home-band--contrast .home-project-inventory-row {
+    background: var(--color-surface-card-contrast);
   }
 
-  .home-project-inventory-row.is-selected {
+  .home-project-inventory-row.is-selected,
+  .home-band--contrast .home-project-inventory-row.is-selected {
     background: var(--color-surface-high);
-    border-color: transparent;
+    border-color: var(--border-gentle-divider);
     outline: none;
     box-shadow: inset 3px 0 0 var(--color-primary);
   }
 
-  .home-project-inventory-index {
-    display: block;
-    flex: 0 0 1.75rem;
-    font-family: var(--font-mono);
-    font-size: var(--type-caption);
-    letter-spacing: 0.04em;
-    color: var(--color-on-surface-variant);
-    line-height: 1;
-    text-align: right;
-  }
-
-  .home-project-inventory-row.is-selected .home-project-inventory-index,
-  .home-project-inventory-row:hover .home-project-inventory-index,
-  .home-project-inventory-row:focus-visible .home-project-inventory-index {
-    color: var(--color-primary);
-  }
-
   .home-project-inventory-media {
     display: block;
     flex: 0 0 auto;
     width: 5.5rem;
-    align-self: center;
-    height: auto;
-    min-width: 0;
-    min-height: 0;
     aspect-ratio: 16 / 9;
     overflow: hidden;
     background: var(--color-surface-high);
-    border: 1px solid var(--border-gentle-subtle);
+  }
+
+  .home-project-inventory-row.is-selected .home-project-inventory-media {
+    outline: 1px solid var(--color-primary);
+    outline-offset: 2px;
   }
 
   .home-project-inventory-media .ledger-poster,
@@ -1263,7 +1333,6 @@ html[data-theme="light"] .home-project-specimen,
     width: 100%;
     height: 100%;
     aspect-ratio: auto;
-    border: 0;
     overflow: hidden;
     background: var(--color-surface-high);
   }
@@ -1272,13 +1341,6 @@ html[data-theme="light"] .home-project-specimen,
     display: none;
   }
 
-  .home-project-inventory-media .ledger-poster img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
   .home-project-inventory-mark {
     display: flex;
     align-items: center;
@@ -1286,6 +1348,10 @@ html[data-theme="light"] .home-project-specimen,
     color: var(--color-primary);
   }
 
+  .home-project-inventory-mark .material-symbols-outlined {
+    font-size: 1.5rem;
+  }
+
   .home-project-inventory-mark--initial {
     font-family: var(--font-content-title);
     font-size: var(--type-card);
@@ -1294,33 +1360,23 @@ html[data-theme="light"] .home-project-specimen,
     color: var(--color-on-surface);
   }
 
-  .home-project-inventory-mark .material-symbols-outlined {
-    font-size: 1.25rem;
-  }
-
   .home-project-inventory-body {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 0;
+    gap: 0.1rem;
     flex: 1 1 0;
     min-width: 0;
-    padding: 0;
   }
 
   .home-project-inventory-title {
     margin: 0;
-    font-family: var(--font-content-title);
-    font-size: var(--type-card);
-    font-weight: var(--weight-title);
-    font-synthesis: none;
+    font-size: var(--type-label-lg);
     line-height: 1.25;
     color: var(--color-on-surface);
-  }
-
-  .home-project-inventory-title a {
-    color: inherit;
-    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .home-project-inventory-row:hover .home-project-inventory-title,
@@ -1329,15 +1385,23 @@ html[data-theme="light"] .home-project-specimen,
     color: var(--color-primary);
   }
 
-  .home-project-inventory-glyph {
-    flex: 0 0 auto;
-    width: 1.75rem;
-    height: 1.75rem;
-    margin-left: auto;
-    font-size: 1.25rem;
+  .home-project-inventory-copy {
+    margin: 0;
+    font-size: var(--type-meta);
+    font-weight: var(--weight-body);
+    line-height: 1.4;
+    color: var(--color-on-surface-variant);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-}
 
+  /* Two classes: the glyph also carries .material-symbols-outlined, whose
+     font stylesheet loads after this one and sets display. */
+  .home-project-inventory-row .home-project-inventory-glyph {
+    display: none;
+  }
+}
 
 @media (min-width: 768px) {}
 

data/lib/pandorga/commands/new.rb

@@ -24,7 +24,7 @@ module Pandorga
 
         gem "pandorga", "~> 1.3"
         # Local checkout: gem "pandorga", path: "../pandorga"
-        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.3.6"
+        # GitHub tag: gem "pandorga", github: "alexandrelheinen/pandorga", tag: "v1.3.8"
         gem "csv"
         gem "base64"
       RUBY

data/lib/pandorga/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Pandorga
-  VERSION = "1.3.6"
+  VERSION = "1.3.8"
 end

data/scripts/test/render-parity/blocks/project-inventory-row-icon.json

@@ -0,0 +1,29 @@
+{
+  "name": "project-inventory-row/icon mark without a thumbnail (PLT-AC-15)",
+  "block": "renderProjectInventoryRow",
+  "args": [
+    {
+      "slug": "bossa",
+      "front_matter": {
+        "project": "Bossa",
+        "icon": "music_note"
+      }
+    },
+    {
+      "selectable": true,
+      "selected": true
+    }
+  ],
+  "selectors": [
+    "div.home-project-inventory-mark",
+    "h3.home-project-inventory-title"
+  ],
+  "forbidden": [
+    "ledger-poster",
+    "home-project-inventory-mark--initial"
+  ],
+  "contains": [
+    "aria-pressed=\"true\"",
+    "is-selected"
+  ]
+}

data/scripts/test/render-parity/blocks/project-inventory-row.json

@@ -0,0 +1,46 @@
+{
+  "name": "project-inventory-row/rack card (PLT-AC-15)",
+  "block": "renderProjectInventoryRow",
+  "args": [
+    {
+      "slug": "arco",
+      "front_matter": {
+        "project": "ARCO",
+        "thumbnail": "/media/projects/arco.png",
+        "icon": "route",
+        "label": "Simulation",
+        "status": "Ongoing",
+        "tagline": "A city-scale race replayed from telemetry."
+      }
+    },
+    {
+      "selectable": true,
+      "selected": false,
+      "index": 2
+    }
+  ],
+  "selectors": [
+    "article.home-project-inventory-row",
+    "div.home-project-inventory-media",
+    "div.ledger-poster",
+    "div.home-project-inventory-code",
+    "span.home-project-inventory-index",
+    "span.ledger-status",
+    "h3.home-project-inventory-title",
+    "p.home-project-inventory-copy",
+    "span.home-project-inventory-glyph"
+  ],
+  "forbidden": [
+    "ledger-card-stretch"
+  ],
+  "contains": [
+    ">02<",
+    ">Simulation<",
+    ">Ongoing<",
+    ">ARCO<",
+    ">A city-scale race replayed from telemetry.<",
+    ">route<",
+    "aria-pressed=\"false\"",
+    "data-slug=\"arco\""
+  ]
+}