@justai/cuts 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -17,7 +17,8 @@
     "./LangPicker.astro": "./src/LangPicker.astro",
     "./BackToZone.astro": "./src/BackToZone.astro",
     "./Posts.astro": "./src/Posts.astro",
-    "./Toolbar.astro": "./src/Toolbar.astro"
+    "./Toolbar.astro": "./src/Toolbar.astro",
+    "./Profile.astro": "./src/Profile.astro"
   },
   "peerDependencies": {
     "@justai/ui": ">=0.2.0",

package/src/Posts.astro

@@ -13,19 +13,29 @@
 //
 // `avatarBg` is the only real per-persona knob (the post-avatar tile behind /icon.svg, matching the
 // profile). Everything else is shared.
+//
+// THE SOCIAL LAYER is in here: a persona's feed carries replies from OTHER personas, and they must read
+// as themselves — their own icon (or glyph), their own name and @handle, and a link to their own
+// profile — not as the host persona. That rendering was invented on the two apexes (justai, app.zone)
+// and lived only there; folding it UP into this cut is what lets every persona show a cross-reply
+// correctly instead of mislabelling it as its own. The one asymmetry it needs: `handle` is the persona
+// KEY (the feed query and the is-this-mine test) while `displayHandle` is what is printed after the @
+// — they differ exactly on the apexes (app.zone → @appzone, justai → @justai.pro).
 interface Props {
-  handle: string; // the persona's @handle — the feed query (?persona=) AND the rendered @handle
-  name: string; // the persona's display name, rendered on each of its own posts/replies
+  handle: string; // the persona KEY — the feed query (?persona=) and the "is this reply mine?" test
+  name: string; // the persona's display name; rendered RAW, so a name may carry markup (justai's ".pro")
   footer: string; // the localized footer tagline after "justai.pro ·"
+  displayHandle?: string; // the rendered @handle when it differs from the key (app.zone → @appzone)
   avatarBg?: string; // post-avatar tile background (default #fff)
 }
-const { handle, name, footer, avatarBg } = Astro.props;
+const { handle, name, footer, displayHandle, avatarBg } = Astro.props;
 ---
 
 <section
   class="cut posts"
   id="posts"
   data-persona={handle}
+  data-handle={displayHandle ?? handle}
   data-name={name}
   style={avatarBg ? `--feed-av-bg:${avatarBg}` : undefined}
 >
@@ -88,8 +98,13 @@ const { handle, name, footer, avatarBg } = Astro.props;
     const section = document.getElementById("posts");
     const feed = document.getElementById("feed");
     if (!section || !feed) return;
-    // the persona identity travels on the section as data-attributes (the static cut set them from props)
+    // the persona identity travels on the section as data-attributes (the static cut set them from props).
+    // PERSONA is the KEY (feed query + the "is this reply mine?" test); HANDLE is what is rendered after
+    // the @ (they differ for the two apexes: app.zone → @appzone, justai → @justai.pro). NAME is the
+    // persona's OWN name and is injected RAW — it is authored in the persona's source, never user input,
+    // so it may carry markup (justai's ".pro" span). Every name that comes from the API is escaped.
     const PERSONA = section.dataset.persona || "";
+    const HANDLE = section.dataset.handle || PERSONA;
     const NAME = section.dataset.name || "";
     if (!PERSONA) return;
     // Astro scopes this component's CSS by a data-astro-cid-* attribute; runtime nodes lack it, so copy it.
@@ -110,7 +125,7 @@ const { handle, name, footer, avatarBg } = Astro.props;
     const ck = `<svg class="ck" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 1.8 3 .2.9 2.8 2.3 1.9-1 2.8 1 2.8-2.3 1.9-.9 2.8-3 .2L12 22l-2.4-1.8-3-.2-.9-2.8L3.4 14l1-2.8-1-2.8 2.3-1.9.9-2.8 3-.2z" fill="var(--accent)"/><path d="M9 12.5l2 2 4-4.5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
     const pact = `<div class="pact"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8.5a5.5 5.5 0 0 0-9-4.2A5.5 5.5 0 0 0 3 8.5c0 5 9 11 9 11s9-6 9-11z"/></svg></span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.3 9.6 9.6 0 0 1-4-.9L3 21l1.1-5A8.4 8.4 0 1 1 21 11.5z"/></svg></span></div>`;
 
-    type C = { body: string; createdAt: string | null; authorHandle: string; authorName: string; authorColor: string | null; isPersona: boolean };
+    type C = { body: string; createdAt: string | null; authorHandle: string; authorName: string; authorColor: string | null; isPersona: boolean; authorAvatar: string | null; authorGlyph: string | null; personaUrl: string | null };
     type P = { id: string; body: string; createdAt: string | null; comments: C[] };
 
     // Relative timestamps are DERIVED from each post/comment's real createdAt (never a stored string),
@@ -131,10 +146,27 @@ const { handle, name, footer, avatarBg } = Astro.props;
       const mo = Math.floor(d / 30); if (mo < 12) return agoRtf.format(-mo, "month");
       return agoRtf.format(-Math.floor(d / 365), "year");
     };
+    // where a persona lives, so another persona's name in this feed can link to its profile. The two
+    // apexes are their own domains; every app persona is a subdomain of app.zone. The API may send the
+    // canonical personaUrl, in which case it wins.
+    const homeOf = (h: string): string =>
+      h === "justai" ? "https://justai.pro" : h === "app.zone" ? "https://app.zone" : `https://${h}.app.zone`;
     const comment = (c: C, last: boolean): string => {
       const ln = last ? "" : `<span class="ln"></span>`;
       if (c.isPersona) {
-        return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="rav">${AV}</span>${ln}</div><div class="cc"><div class="ch"><a class="pn" href="#profile"><b>${esc(NAME)}</b></a>${ck}<span class="muted">· ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
+        // THE SOCIAL LAYER: personas reply on each other's feeds. A self-reply wears this persona's own
+        // face and name; ANOTHER persona wears ITS canonical icon (glyph fallback), its own name, its
+        // @handle, and its name links to its own profile. The verified check stays for both.
+        const own = c.authorHandle === PERSONA;
+        const av = own
+          ? AV
+          : c.authorAvatar
+            ? `<img class="mk" src="${esc(c.authorAvatar)}" alt="">`
+            : `<span style="font-size:16px">${esc(c.authorGlyph || "✦")}</span>`;
+        const nm = own ? NAME : esc(c.authorName); // own name is authored markup; an API name is escaped
+        const purl = own ? "#profile" : `${c.personaUrl || homeOf(c.authorHandle)}/#profile`;
+        const meta = own ? `· ${timeAgo(c.createdAt)}` : `@${esc(c.authorHandle)} · ${timeAgo(c.createdAt)}`;
+        return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="rav">${av}</span>${ln}</div><div class="cc"><div class="ch"><a class="pn" href="${esc(purl)}"><b>${nm}</b></a>${ck}<span class="muted">${meta}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
       }
       const initial = esc(String(c.authorName || "?").slice(0, 1));
       return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="uav" style="--c:${esc(c.authorColor || "#888")}">${initial}</span>${ln}</div><div class="cc"><div class="ch"><b>${esc(c.authorName)}</b><span class="muted">@${esc(c.authorHandle)} · ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
@@ -147,7 +179,7 @@ const { handle, name, footer, avatarBg } = Astro.props;
       const n = String(p.id || "").split(":").pop() || "";
       const perma = n ? `/feed/${n}` : "";
       const pt = perma ? `<a class="pt" href="${perma}">${timeAgo(p.createdAt)}</a>` : `<span class="pt">${timeAgo(p.createdAt)}</span>`;
-      return `<article class="post"${perma ? ` data-href="${perma}"` : ""}><div class="trow"><div class="avc"><span class="pa">${AV}</span>${cs.length ? '<span class="ln"></span>' : ""}</div><div class="cc"><div class="ph"><a class="pn" href="#profile"><b>${esc(NAME)}</b></a><span class="phandle">@${esc(PERSONA)}</span><span class="dot">·</span>${pt}</div><p class="pbd">${esc(p.body)}</p>${pact}</div></div>${inner}</article>`;
+      return `<article class="post"${perma ? ` data-href="${perma}"` : ""}><div class="trow"><div class="avc"><span class="pa">${AV}</span>${cs.length ? '<span class="ln"></span>' : ""}</div><div class="cc"><div class="ph"><a class="pn" href="#profile"><b>${NAME}</b></a><span class="phandle">@${esc(HANDLE)}</span><span class="dot">·</span>${pt}</div><p class="pbd">${esc(p.body)}</p>${pact}</div></div>${inner}</article>`;
     };
 
     let done = false;

package/src/Profile.astro

@@ -0,0 +1,91 @@
+---
+// ░░ PROFILE cut — the persona's face: a cover, an avatar, its name · @handle · bio · meta. ░░
+//
+// Structurally identical in every persona; only the CONTENT and a handful of colours differ. It lives
+// here now. A persona writes:
+//
+//   <Profile name={t.title} handle="@qr" bio={t.bio} meta={t.meta}
+//            avatarLabel="QR code linking to qr.app.zone"
+//            cover="linear-gradient(135deg, …)" avatarBg="#fff" avatarPad="7px">
+//     <Fragment slot="avatar" set:html={avatarSvg} />
+//   </Profile>
+//
+// PROPS carry resolved strings (same convention as Posts/Toolbar/LangPicker — never the whole `t`).
+// The per-persona COLOURS ride in as CSS custom properties (set inline from props), so the shared
+// scoped CSS can theme itself without a variant per persona:
+//   --cover        the cover background (any CSS <image>: a linear- or radial-gradient)
+//   --cover-h      cover height (default 132px; the clock personas use 118px)
+//   --avatar-bg    the avatar tile background (a colour OR a gradient)
+//   --avatar-bg-light  optional light-scheme override for the tile (whatismyip inverts its icon ground)
+//   --avatar-pad   padding inside the tile (a QR needs a quiet zone; an icon that bleeds needs 0)
+//   --edge         inherited from the persona's page padding (16px default; time pads at 20px) so the
+//                  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.
+//
+// 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.
+interface Props {
+  name: string;          // the persona name (the <h1>)
+  handle: string;        // the @handle line, e.g. "@qr"
+  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
+  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 vars = [
+  cover && `--cover:${cover}`,
+  coverHeight && `--cover-h:${coverHeight}`,
+  avatarBg && `--avatar-bg:${avatarBg}`,
+  avatarBgLight && `--avatar-bg-light:${avatarBgLight}`,
+  avatarPad && `--avatar-pad:${avatarPad}`,
+].filter(Boolean).join(";");
+---
+
+<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>
+    <h1 class="pname">{name}</h1>
+    <p class="handle">{handle}</p>
+    <p class="bio">{bio}</p>
+    {meta && <p class="meta">{meta}</p>}
+  </div>
+</section>
+
+<style>
+  /* ---- PROFILE cut ---- */
+  .profile { padding-block-end: 8px; }
+  .cover {
+    height: var(--cover-h, 132px);
+    /* full-bleed to the persona's page edge (see --edge on Toolbar) */
+    margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
+    background: var(--cover, linear-gradient(135deg, var(--accent), transparent));
+    position: relative;
+  }
+  @media (min-width: 768px) { .cover { margin-inline: -28px; } }
+  .avatar {
+    width: 76px; height: 76px; border-radius: var(--radius-lg); margin-block-start: -40px;
+    display: grid; place-items: center; padding: var(--avatar-pad, 0);
+    background: var(--avatar-bg, #fff);
+    border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
+    position: relative;
+  }
+  /* 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; }
+  @media (prefers-color-scheme: light) {
+    .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
+  }
+  .pname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; margin-block-start: 12px; }
+  .handle { color: var(--text-dim); font-size: var(--fs-xs); margin-block-start: 2px; }
+  .bio { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 12px; }
+  .meta { color: var(--text-dim); font-size: var(--fs-2xs); margin-block-start: 10px; }
+</style>

package/src/Toolbar.astro

@@ -72,11 +72,13 @@ const { sectionsLabel, profileLabel, kernelLabel, postsLabel } = Astro.props;
   .toolbar {
     position: sticky; top: 0; z-index: 40;
     display: flex; flex-direction: column;
-    /* full-bleed: the bar (frosted bg + hairline) touches the contained-view edges; the
-       icons stay aligned with the body via matching inline padding. */
-    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left))) calc(-1 * max(16px, env(safe-area-inset-right)));
+    /* full-bleed: the bar (frosted bg + hairline) touches the contained-view edges; the icons stay
+       aligned with the body via matching inline padding. --edge is the persona's page inline padding
+       (16px default; a persona that pads its body differently — e.g. time at 20px — sets --edge so the
+       bar bleeds to the SAME edge as its content instead of a hardcoded 16px). */
+    margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
     padding-block: max(8px, env(safe-area-inset-top)) 8px;
-    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
+    padding-inline: max(var(--edge, 16px), env(safe-area-inset-left)) max(var(--edge, 16px), env(safe-area-inset-right));
     background: color-mix(in srgb, var(--bg) 70%, transparent);
     backdrop-filter: blur(22px) saturate(1.5);
     -webkit-backdrop-filter: blur(22px) saturate(1.5);