@justai/cuts 0.142.0 → 0.143.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.142.0",
+  "version": "0.143.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {

package/src/CatalogueCard.astro

@@ -90,7 +90,10 @@ const icon = `${app.url}/icon.svg`;
     width: 60px;
     height: 60px;
     border-radius: var(--radius-md);
-    object-fit: cover;
+    /* contain: this is a persona's mark, not a photograph. A square tile is unaffected — the two
+       declarations agree on square art — and a mark taller than its box keeps its ends instead of
+       having them cropped. See the note on .pa .mk in Posts.astro. */
+    object-fit: contain;
     box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.35);
   }
 

package/src/ChildPersona.astro

@@ -269,8 +269,13 @@ const chrome = face === "page";
   .pp[data-face="sheet"] .app { max-width: none; margin-inline: 0; border: 0; background: none;
                                 backdrop-filter: none; -webkit-backdrop-filter: none; }
 
-  /* a mark fills its box; the picture inside it covers */
-  .pp .mk { display: block; width: 100%; height: 100%; object-fit: cover; }
+  /* A MARK FILLS ITS BOX AND LOSES NOTHING DOING IT. This said `cover`, which fills by scaling to the
+     larger ratio and cropping the overflow off both edges. Square art renders identically either way —
+     which is why it survived on every child page — but pin.games' mark is 700.19 x 767.26, so `cover`
+     took 4.8% off its top and 4.8% off its bottom, and those are the blue bracket and the red one.
+     Same change, same reason, as .pa .mk in Posts.astro. The feed service carries a fork of this
+     stylesheet and had lost the rule entirely; it is `contain` there now too. */
+  .pp .mk { display: block; width: 100%; height: 100%; object-fit: contain; }
 
   /* Motion is never forced on somebody who asked it not to be — and the biggest effects, the ones a
      surface is proudest of, are exactly what that setting exists to suppress. */

package/src/Posts.astro

@@ -268,7 +268,19 @@ const vars = [
   }
   .rav { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
   .pa :global(svg), .rav :global(svg) { display: block; }
-  .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: cover; display: block; }
+  /* queries: the avatar is cropped · blue and red pieces cut off · pin.games mark clipped top and
+             bottom · a mark loses its tips in the feed · cover vs contain for a persona icon
+     CONTAIN, NOT COVER — THE SLOT IS FORGIVING, THE ASSET NEED NOT BE PERFECT. `cover` fills the box
+     by scaling to the LARGER ratio and cropping the overflow, split evenly between the two edges. For
+     a square drawing in a square slot the two are the same declaration, which is why this stood for
+     twenty-six personas without a complaint: every fleet icon.svg is square. pin.games' mark is not —
+     its box is 700.19 x 767.26, so `cover` scaled it by width, overflowed the height by 9.6%, and took
+     4.8% off the top and 4.8% off the bottom. What lives at the top and bottom of that drawing is the
+     blue bracket and the red one, which is exactly the pair the founder reported as cut. On a 76px
+     profile avatar that is 3.6px gone from each end.
+     Squaring the asset is the other half of this and is being done too, but it is not a substitute:
+     an asset can be redrawn wrong tomorrow, while a slot that never crops cannot crop anyone. */
+  .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: contain; display: block; }
   /* a dark tile must invert in light mode, not stay dark — personas whose avatar ground is a gradient
      pass avatarBgLight; the rest fall back to their single background. */
   @media (prefers-color-scheme: light) { :global(html:not([data-theme="dark"])) .pa, :global(html:not([data-theme="dark"])) .rav { background: var(--feed-av-bg-light, var(--feed-av-bg, #fff)); } }

package/src/Profile.astro

@@ -127,7 +127,10 @@ const vars = [
   @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
   /* the avatar content is slotted (persona-owned) → style it globally */
   .avatar :global(svg) { width: 100%; height: 100%; display: block; }
-  .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }
+  /* contain, not cover — see the note on .pa .mk in Posts.astro. A square icon renders identically
+     under either; a mark whose box is taller than wide loses its top and its bottom under `cover`,
+     which is what cropped pin.games' blue and red brackets on this very avatar. */
+  .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: contain; }
   @media (prefers-color-scheme: light) {
     :global(html:not([data-theme="dark"])) .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
   }