@justai/cuts 0.55.0 → 0.56.0

package/package.json

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

package/src/Profile.astro

@@ -22,8 +22,12 @@
 //                  full-bleed cover reaches the SAME edge as the body — see Toolbar for the same knob.
 //
 // The AVATAR content is a slot (an <img>, or a build-time SVG via set:html) because it is the most
-// persona-specific thing on the page; the tile that frames it is shared. `avatarLabel` gives the tile
-// its accessible name (role="img"); omit it and the tile is inert.
+// persona-specific thing on the page; the tile that frames it is shared. The tile is a LINK to `#kernel`
+// — see `kernelLabel` below for why it carries two labels.
+//
+// EVERY persona and child persona has a Profile and a Kernel (foundations 02), which is what lets that
+// href stay local with no per-consumer escape hatch. `files`, `me` and `feed` each hand-rolled this
+// entire section before; they are child personas, and a child persona is a persona.
 //
 // CONTRACT: the shell's scroll-spy reads `.pname` and `.handle` from here to name the title strip, and
 // the section id `#profile` is one of the three cut anchors. Nothing else depends on the profile.
@@ -32,17 +36,41 @@ interface Props {
   // input, so a name may carry markup (justai's "justai<span class='pro'>.pro</span>"). Same rule as the
   // Posts cut: a persona's OWN name is authored; anything from the API is escaped.
   name: string;
-  handle: string;        // the @handle line, e.g. "@qr"
+  // The other three follow the SAME rule as `name`, and for a reason that only shows up on the child
+  // personas: `files`, `me` and `feed` are mounted on a HOST persona and adopt its identity at runtime,
+  // so each of these lines carries an id (`#pnHandle`, `#pnMeta`) or a translation hook (`data-i`) that
+  // a script rewrites once it knows whose page it is standing on. Text-only props forced all three to
+  // hand-roll the whole section — which is exactly how a shared layer becomes twelve copies.
+  //
+  // Authored, never user input: these strings come from the persona's own source. Anything arriving from
+  // the API is escaped instead — the Posts cut keeps the same split.
+  handle: string;        // the @handle line, e.g. "@qr" or "@app.zone · files"
   bio: string;           // the one-line bio
   meta?: string;         // the small meta line under the bio (optional)
-  avatarLabel?: string;  // accessible name for the avatar tile (role="img"); omit → inert tile
+  avatarLabel?: string;  // what the avatar DEPICTS (qr's tile is a scannable QR); omit → the tile is inert
+  // queries: clicking the profile avatar · the big icon goes to the kernel · what does the avatar link to
+  //
+  // The tile is the face, and a face is the natural thing to press to meet what the persona actually
+  // DOES — so it carries you down to the kernel, the same destination as the toolbar's own glyph. One
+  // vocabulary: pass the SAME string you already give `<Toolbar kernelLabel=…>` and the two agree.
+  //
+  // Optional, and English when omitted, because the cut brings its own ground — a consumer that adopts a
+  // newer cuts and changes nothing must still get a working, labelled link, never a blank one.
+  //
+  // Two labels rather than one: `avatarLabel` says what the picture IS, this says where pressing it GOES.
+  // A link announced as "QR code linking to qr.app.zone" that scrolls to the kernel would be a lie to
+  // anyone who cannot see where they landed.
+  kernelLabel?: string;
   cover?: string;        // CSS background for .cover
   coverHeight?: string;  // e.g. "118px"
   avatarBg?: string;     // CSS background for the avatar tile
   avatarBgLight?: string;// light-scheme override for the avatar tile
   avatarPad?: string;    // padding inside the avatar tile, e.g. "7px"
 }
-const { name, handle, bio, meta, avatarLabel, cover, coverHeight, avatarBg, avatarBgLight, avatarPad } = Astro.props;
+const { name, handle, bio, meta, avatarLabel, kernelLabel, cover, coverHeight, avatarBg, avatarBgLight, avatarPad } = Astro.props;
+// What the picture is, then where it takes you — in that order, because a screen reader reads the link's
+// name before its role and the destination is the part that decides whether to press it.
+const avatarA11y = [avatarLabel, kernelLabel ?? "What I do"].filter(Boolean).join(" — ");
 const vars = [
   cover && `--cover:${cover}`,
   coverHeight && `--cover-h:${coverHeight}`,
@@ -55,14 +83,14 @@ const vars = [
 <section class="cut profile" id="profile" style={vars || undefined}>
   <div class="cover"></div>
   <div class="pbody">
-    <div class="avatar" role={avatarLabel ? "img" : undefined} aria-label={avatarLabel}><slot name="avatar" /></div>
+    <a class="avatar" href="#kernel" aria-label={avatarA11y}><slot name="avatar" /></a>
     <h1 class="pname" set:html={name} />
-    <p class="handle">{handle}</p>
-    <p class="bio">{bio}</p>
+    <p class="handle" set:html={handle} />
+    <p class="bio" set:html={bio} />
     <!-- prose the face adds under its bio and ABOVE the small print (justai's purpose line). Order is
          the point: a mission line that falls below the meta reads as a footnote. -->
     <slot name="belowBio" />
-    {meta && <p class="meta">{meta}</p>}
+    {meta && <p class="meta" set:html={meta} />}
     <!-- and whatever follows the small print — the apexes' privacy/terms nav. Both slots stay the
          PERSONA's markup, and therefore the persona's scope, so their styling lives in the persona
          while the frame around them stays shared. -->
@@ -87,7 +115,16 @@ const vars = [
     background: var(--avatar-bg, #fff);
     border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
     position: relative;
+    /* it is an <a> now — undo the link ground, or a slotted SVG drawn in currentColor turns accent */
+    color: inherit; text-decoration: none;
+    transition: transform 0.15s var(--ease-out, ease-out);
   }
+  /* Pressed, not hovered. The tile is the persona's FACE: growing it under the cursor would animate the
+     one object on the page that should hold still. Depressing it on press is the iOS answer — it says
+     "this responds" at the moment of contact, on touch as well, where there is no hover to say it. */
+  .avatar:active { transform: scale(0.97); }
+  .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+  @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; }