@justai/cuts 0.142.0 → 0.144.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.142.0",
+  "version": "0.144.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/ConfirmSheet.astro

@@ -16,6 +16,13 @@ import "./ground.css";
 //   something can end, the safe choice wears the most confident face. iOS system red for
 //   destruction. This is /me's "Erase everything?".
 //
+//   A THIRD CHOICE, when the safe answer is not "do nothing" (`safeActionLabel`) — Apple's own
+//   multi-action sheet. Some destructive questions have a way OUT of the loss rather than only a
+//   way around it: "your work isn't saved yet" is answered best by saving it, not by cancelling and
+//   then hunting for the Save button. That action joins the grouped card ABOVE the destructive one,
+//   because a sheet reads top to bottom and the preserving path is the one to meet first. Cancel
+//   stays detached and boldest — the anatomy does not change, it gains one row.
+//
 //   ASK (`ask` prop) — the alert/ATT genre, for INVITATIONS: both choices live INSIDE the grouped
 //   card, stacked; the action wears the preferred bold face (Apple's preferredAction) and takes
 //   the focus; the safe choice sits beneath it in calm regular weight — equal size, equal tap,
@@ -61,10 +68,19 @@ interface Props {
    *  remembered as a choice, so the chosen no is stored while a slip-away stores nothing and the
    *  ask returns next visit. */
   cancelValue?: string;
+  /** Optional THIRD choice: an action that PRESERVES rather than ends, placed above the main action
+   *  inside the grouped card and painted as the preferred path. Omit it and the sheet is exactly
+   *  what it always was — same DOM, same ids, same returnValues. */
+  safeActionLabel?: string;
+  /** What returnValue that third choice reports. Default "safe": three answers need three words. */
+  safeActionValue?: string;
   /** Anything else (data-* attributes, aria overrides) lands on the <dialog> itself. */
   [key: string]: unknown;
 }
-const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = false, cancelValue = "", ...rest } = Astro.props;
+const {
+  id, title, body, actionLabel, cancelLabel, destructive = false, ask = false, cancelValue = "",
+  safeActionLabel, safeActionValue = "safe", ...rest
+} = Astro.props;
 ---
 
 <dialog class="confirm" id={id} aria-labelledby={title ? `${id}-t` : `${id}-b`} aria-describedby={`${id}-b`} {...rest}>
@@ -79,6 +95,9 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = fa
            on a closed dialog, noise about a focus that was never going to happen. Focus is the
            OPENER's job now, at showModal time: ask → the invitation (CONSENT_JS does it),
            destructive → the cancel (the consumer does it). The genre decides, as before. */}
+      {safeActionLabel && (
+        <button class="confirm-act preferred" id={`${id}-safe`} value={safeActionValue}>{safeActionLabel}</button>
+      )}
       <button class:list={["confirm-act", { destructive, preferred: ask }]} id={`${id}-act`} value="confirm">{actionLabel}</button>
       {ask && <button class="confirm-act quiet" id={`${id}-cancel`} value={cancelValue} formnovalidate>{cancelLabel}</button>}
     </div>

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)); }
   }