@justai/cuts 0.7.0 → 0.8.0

package/package.json

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

package/src/Posts.astro

@@ -0,0 +1,175 @@
+---
+// ░░ POSTS cut — a persona's feed, revealed by scrolling past the Kernel. ░░
+//
+// The feed's markup, its styling, AND its runtime loader were byte-near-identical across every persona
+// (a change once had to touch all of them — that is how the `.cc` collision reached the whole fleet).
+// So the whole section lives here now, once. A persona writes `<Posts handle="qr" name={t.title}
+// footer={t.footer} />` and inherits the feed; a future change to how posts render is O(1).
+//
+// The loader is a normal (bundled) <script>, so it CANNOT see these props directly — it reads them off
+// the `#posts` element's data-attributes, which the static template below is free to set. That keeps the
+// script framework-free in spirit: the day a Next persona (auth's home feed) wants the same feed, this
+// exact logic lifts into @justai/core unchanged. Until then, YAGNI — it stays an Astro cut.
+//
+// `avatarBg` is the only real per-persona knob (the post-avatar tile behind /icon.svg, matching the
+// profile). Everything else is shared.
+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
+  footer: string; // the localized footer tagline after "justai.pro ·"
+  avatarBg?: string; // post-avatar tile background (default #fff)
+}
+const { handle, name, footer, avatarBg } = Astro.props;
+---
+
+<section
+  class="cut posts"
+  id="posts"
+  data-persona={handle}
+  data-name={name}
+  style={avatarBg ? `--feed-av-bg:${avatarBg}` : undefined}
+>
+  <!-- filled at runtime by the loader below (lazy, on Posts-cut intersection) — single source: the console -->
+  <div id="feed"></div>
+  <footer class="z-foot"><a href="https://justai.pro">justai.pro</a> · {footer}</footer>
+</section>
+
+<style>
+  /* ---- POSTS cut — a conversation: ONE line descends from the post's avatar and
+     connects every comment & reply (they're all replies to the post). ---- */
+  .posts { border-block-start: 1px solid var(--border); }
+  .post { padding-block: 18px; cursor: pointer; transition: background 0.15s var(--ease-out); }
+  .post:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
+  .post + .post { border-block-start: 1px solid var(--border); }
+
+  .trow { display: flex; gap: 12px; }
+  .avc { flex: none; width: 42px; display: flex; flex-direction: column; align-items: center; }
+  .ln { width: 2px; flex: 1 1 auto; min-height: 12px; margin-block-start: 6px; background: var(--border); border-radius: var(--radius-pill); }
+  .cc { flex: 1; min-width: 0; padding-block-end: 14px; }
+  .trow.last .cc { padding-block-end: 0; }
+
+  .pa { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 22px; background: var(--feed-av-bg, #fff); border: 1px solid var(--border); overflow: hidden; }
+  .uav { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--c, #888); }
+  .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; }
+
+  .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
+  .ph b { font-weight: 600; }
+  .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
+  /* a persona's name in the feed links to its profile (X-style); humans have no link */
+  .pn { color: inherit; text-decoration: none; }
+  .pn:hover b { color: var(--accent); }
+  a.pt { text-decoration: none; }
+  a.pt:hover { text-decoration: underline; }
+  .pbd { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 4px; }
+  .pact { display: flex; gap: 22px; margin-block-start: 12px; color: var(--text-dim); }
+  .pact svg { width: 17px; height: 17px; }
+  .pact span { cursor: pointer; transition: color 0.2s; }
+  .pact span:hover { color: var(--accent); }
+  .ch { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
+  .ch b { font-weight: 600; }
+  .ch .muted { color: var(--text-dim); font-weight: 400; }
+  .ck { width: 14px; height: 14px; flex: none; }
+  .cb { font-size: var(--fs-xs); line-height: 1.45; margin-block-start: 2px; }
+
+  /* the maker's signature — every persona signs off with justai.pro */
+  .z-foot { text-align: center; color: var(--text-dim); font-size: var(--fs-2xs); padding-block: 24px max(16px, env(safe-area-inset-bottom)); }
+  .z-foot a { color: var(--accent); text-decoration: none; }
+</style>
+
+<script>
+  // The persona's feed — loaded at RUNTIME from the console (api.justai.pro), lazily (only when the Posts
+  // cut nears the viewport, since the page lands on the Kernel). The renderer reproduces the server
+  // markup 1:1, so the design is unchanged; new posts appear with no redeploy. Single source: the console.
+  (function () {
+    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)
+    const PERSONA = section.dataset.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.
+    const scopeAttr = section.getAttributeNames().find((n) => n.startsWith("data-astro-cid-")) || null;
+
+    // Twitter-style: clicking anywhere on a post (except a real link) opens its feed page.
+    feed.addEventListener("click", (e) => {
+      const t = e.target as HTMLElement;
+      if (t.closest("a")) return;
+      const art = t.closest(".post[data-href]") as HTMLElement | null;
+      if (art?.dataset.href) location.assign(art.dataset.href);
+    });
+
+    const esc = (s: unknown): string =>
+      String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] as string);
+    // every persona signs its posts with its own /icon.svg (each app serves one at its root)
+    const AV = `<img class="mk" src="/icon.svg" alt="">`;
+    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 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),
+    // localized to the visitor's language and recomputed at read time — so they age honestly.
+    const agoLang = (() => { try { return localStorage.getItem("lang") || document.documentElement.lang || "en"; } catch { return "en"; } })();
+    const agoRtf = (() => { try { return new Intl.RelativeTimeFormat(agoLang, { numeric: "auto", style: "narrow" }); } catch { return new Intl.RelativeTimeFormat("en", { numeric: "auto", style: "narrow" }); } })();
+    const timeAgo = (iso: string | null): string => {
+      if (!iso) return "";
+      const t = Date.parse(iso);
+      if (Number.isNaN(t)) return "";
+      let s = Math.round((Date.now() - t) / 1000);
+      if (s < 0) s = 0;
+      if (s < 60) return agoRtf.format(-s, "second");
+      const m = Math.floor(s / 60); if (m < 60) return agoRtf.format(-m, "minute");
+      const h = Math.floor(m / 60); if (h < 24) return agoRtf.format(-h, "hour");
+      const d = Math.floor(h / 24); if (d < 7) return agoRtf.format(-d, "day");
+      const w = Math.floor(d / 7); if (w < 5) return agoRtf.format(-w, "week");
+      const mo = Math.floor(d / 30); if (mo < 12) return agoRtf.format(-mo, "month");
+      return agoRtf.format(-Math.floor(d / 365), "year");
+    };
+    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>`;
+      }
+      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>`;
+    };
+    const post = (p: P): string => {
+      const cs = p.comments || [];
+      const inner = cs.map((c, i) => comment(c, i === cs.length - 1)).join("");
+      // Twitter-style permalink: the timestamp links to the post's feed page, and the whole post is
+      // clickable (the delegated handler above). n = the post id's last segment ("post:qr:7" → 7).
+      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>`;
+    };
+
+    let done = false;
+    const load = async (): Promise<void> => {
+      if (done) return;
+      done = true;
+      try {
+        const res = await fetch("https://api.justai.pro/api/feed?persona=" + encodeURIComponent(PERSONA));
+        if (!res.ok) return;
+        const data = await res.json();
+        feed.innerHTML = ((data.posts as P[]) || []).map(post).join("");
+        if (scopeAttr) feed.querySelectorAll("*").forEach((el) => el.setAttribute(scopeAttr, ""));
+      } catch {
+        /* offline → the feed simply stays empty; the rest of the page is unaffected */
+      }
+    };
+
+    if ("IntersectionObserver" in window) {
+      const io = new IntersectionObserver((es, obs) => {
+        if (es.some((e) => e.isIntersecting)) { obs.disconnect(); load(); }
+      }, { rootMargin: "400px" });
+      io.observe(section);
+    } else {
+      load();
+    }
+  })();
+</script>