@justai/cuts 0.131.0 → 0.132.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.131.0",
-  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
+  "version": "0.132.0",
+  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.34.0",
+    "@justai/core": "^0.35.0",
     "@justai/ui": "^0.22.0",
     "@justai/atrium": "^0.1.9"
   }

package/src/Posts.astro

@@ -85,7 +85,25 @@ const { handle, name, lang, footer, avatarBg, avatarBgLight, avatarSrc, avatarBa
 // The override wins where it is given; otherwise the family's own line, in this page's language.
 // `Astro.currentLocale` is the fallback for a caller that passes neither, so an older persona that
 // has not been bumped yet still closes its feed in the right language rather than in English.
-const foot = footer ?? tagline(lang ?? Astro.currentLocale ?? "en");
+// queries: posts cut language · English posts on a Turkish page · translated feed on the home page ·
+//          why does the feed not follow the page language · show original on a persona's home
+//
+// ── THE PAGE'S LANGUAGE, AND NOW THE FEED'S TOO ────────────────────────────────────────────────
+//
+// One value, two jobs. It already picked the house tagline; it now also asks the console for the feed
+// in that language. They must be the same value or the footer and the posts above it disagree about
+// what page this is.
+//
+// This was a real defect and builder's own finishing checklist names it — *"a post in English on a
+// Turkish page"*. Measured on qr before the fix: `<html lang="tr">`, the bio Turkish, the timestamp
+// reading *"3 hf. önce"*, and every post underneath in English, linking to the English permalink.
+//
+// The PAGE decides, not localStorage. On a localized persona home the language is in the URL
+// (`/tr/`), so it is settled before any script runs — and the same rule the feed permalink pages
+// learned the hard way: a page whose language came from its address must not be second-guessed by
+// what the visitor last picked somewhere else.
+const feedLang = lang ?? Astro.currentLocale ?? "en";
+const foot = footer ?? tagline(feedLang);
 const vars = [
   avatarBg && `--feed-av-bg:${avatarBg}`,
   avatarBgLight && `--feed-av-bg-light:${avatarBgLight}`,
@@ -97,6 +115,7 @@ const vars = [
   id="posts"
   data-persona={handle}
   data-name={name}
+  data-lang={feedLang}
   data-av={avatarSrc ?? "/icon.svg"}
   data-av-dark={avatarSrcDark}
   data-av-bare={avatarBare ? "" : undefined}
@@ -271,6 +290,12 @@ const vars = [
   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; }
+  /* The translation notice — dim, small, directly under the words it is about, and carrying the ONE
+     link back to what the persona actually wrote, so the link is the only lit thing in the row.
+     Matches the feed permalink page exactly: the two surfaces render one conversation. */
+  .tnote { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-block-start: 6px; font-size: var(--fs-2xs); color: var(--text-dim); }
+  .tnote a { color: var(--confirm-accent, var(--accent)); text-decoration: none; }
+  .tnote a:hover { text-decoration: underline; }
   .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; }
@@ -308,13 +333,34 @@ const vars = [
     // so it may carry markup (justai's ".pro" span). Every name that comes from the API is escaped.
     const PERSONA = section.dataset.persona || "";
     const NAME = section.dataset.name || "";
+    // THE PAGE'S LANGUAGE, set by the cut above from the same value that picked the footer. Not
+    // localStorage: on a localized home the language is in the URL and was settled before this ran.
+    const LANG = section.dataset.lang || "en";
     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.
+    // The "show original" link is handled first and swallowed — it is a control, not a destination.
     feed.addEventListener("click", (e) => {
       const t = e.target as HTMLElement;
+      const tog = t.closest("[data-toggle-original]") as HTMLElement | null;
+      if (tog) {
+        const art = tog.closest(".post");
+        const body = art?.querySelector(".pbd") as HTMLElement | null;
+        const state = art?.querySelector("[data-tstate]") as HTMLElement | null;
+        // Only take over the click once everything it needs is in hand. If the markup ever changes
+        // shape the link stays a link and still reaches the original — a control that degrades to
+        // working beats one that silently does nothing.
+        if (!body || !state) return;
+        e.preventDefault();
+        const showing = tog.textContent === tog.dataset.showTranslation;
+        body.textContent = showing ? tog.dataset.translation! : tog.dataset.original!;
+        body.setAttribute("lang", (showing ? tog.dataset.lang : tog.dataset.originalLang) || "");
+        tog.textContent = showing ? tog.dataset.showOriginal! : tog.dataset.showTranslation!;
+        state.textContent = showing ? tog.dataset.translated! : tog.dataset.originalLabel!;
+        return;
+      }
       if (t.closest("a")) return;
       const art = t.closest(".post[data-href]") as HTMLElement | null;
       if (art?.dataset.href) location.assign(art.dataset.href);
@@ -339,7 +385,40 @@ const vars = [
     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; authorAvatar: string | null; authorGlyph: string | null; personaUrl: string | null };
-    type P = { id: string; body: string; createdAt: string | null; comments: C[] };
+    // `lang` is what `body` IS; `translated` says a machine made it. Both are optional so this cut
+    // still renders against a console that predates them — the fleet installs its packages on its own
+    // schedule, and a persona that has not been bumped must not lose its feed.
+    type P = { id: string; body: string; lang?: string; originalLang?: string; originalBody?: string | null; translated?: boolean; createdAt: string | null; comments: C[] };
+
+    // queries: translated automatically · show original · machine translation notice on the home feed
+    //
+    // THE SAME LINE THE PERMALINK PAGE SHOWS, because they render one conversation and must not
+    // disagree about it. The original is canonical, marked, and one tap away — that pairing IS the
+    // doctrine (dna/entities/localization.md), not a courtesy.
+    //
+    // Thirteen strings rather than a lookup through the persona's own dictionary: this cut ships to
+    // every persona and cannot reach into any of their locale files. ~400 bytes, said once, for the
+    // whole fleet — the alternative is the same sentence copied into thirteen files times thirty
+    // repos, which is the shape `tagline.js` already exists to prevent.
+    const TRANSLATED: Record<string, string> = {
+      en: "Translated automatically", tr: "Otomatik olarak çevrildi", es: "Traducido automáticamente",
+      de: "Automatisch übersetzt", fr: "Traduit automatiquement", pt: "Traduzido automaticamente",
+      it: "Tradotto automaticamente", nl: "Automatisch vertaald", ru: "Переведено автоматически",
+      ja: "自動翻訳", zh: "自动翻译", ar: "تُرجم آليًا", hi: "स्वचालित रूप से अनूदित",
+    };
+    const SHOW_ORIGINAL: Record<string, string> = {
+      en: "Show original", tr: "Orijinali göster", es: "Ver original", de: "Original anzeigen",
+      fr: "Afficher l'original", pt: "Ver original", it: "Mostra originale", nl: "Origineel weergeven",
+      ru: "Показать оригинал", ja: "原文を表示", zh: "显示原文", ar: "عرض النص الأصلي", hi: "मूल दिखाएँ",
+    };
+    // The way BACK. It is a toggle, not a door: swapping in place keeps the reader on the feed they
+    // were reading, in the language they set — the alternative walks them to the permalink and hands
+    // them the whole page in English for the sake of one paragraph.
+    const SHOW_TRANSLATION: Record<string, string> = {
+      en: "Show translation", tr: "Çeviriyi göster", es: "Ver traducción", de: "Übersetzung anzeigen",
+      fr: "Afficher la traduction", pt: "Ver tradução", it: "Mostra traduzione", nl: "Vertaling weergeven",
+      ru: "Показать перевод", ja: "翻訳を表示", zh: "显示翻译", ar: "عرض الترجمة", hi: "अनुवाद दिखाएँ",
+    };
 
     // 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.
@@ -405,9 +484,34 @@ const vars = [
       // 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}` : "";
+      // queries: clicking a post loses my language · the permalink is English · navigation language
+      //
+      // EVERY NAVIGATION STAYS IN THE READER'S LANGUAGE — the founder's rule, and it is stronger than
+      // "link to the translation when there is one". Set a persona to Italian and EVERY page of it is
+      // Italian; a post with no Italian gives the original words with Italian chrome around them, and
+      // `/feed/{n}/it` renders exactly that rather than 404ing.
+      //
+      // The one URL that carries no segment is the post read in the language it was written in: there
+      // is no "translation into the original", so the permalink is already that page.
+      const orig = p.originalLang || "en";
+      const tr = !!p.translated && !!p.originalBody;
+      const base = n ? `/feed/${n}` : "";
+      const perma = base && LANG !== orig ? `${base}/${LANG}` : base;
       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>${NAME}</b></a>${ck}${PERSONA ? `<span class="phandle">@${esc(PERSONA)}</span>` : ""}<span class="dot">·</span>${pt}</div><p class="pbd">${esc(p.body)}</p>${pact}</div></div>${inner}</article>`;
+      // The way back, in the language of the person reading it. A real <a> so the delegated
+      // click-anywhere handler above lets it through — it returns early on any link.
+      // Both texts ride in the markup so the swap is instant and needs no second request. The link
+      // keeps a real href — without scripts it still reaches the original's own page.
+      const note = tr
+        ? `<p class="tnote" dir="auto"><span data-tstate>${esc(TRANSLATED[LANG] ?? TRANSLATED.en)}</span><span class="dot">·</span>` +
+          `<a href="${base}" data-toggle-original data-original="${esc(p.originalBody)}" data-translation="${esc(p.body)}"` +
+          ` data-show-original="${esc(SHOW_ORIGINAL[LANG] ?? SHOW_ORIGINAL.en)}" data-show-translation="${esc(SHOW_TRANSLATION[LANG] ?? SHOW_TRANSLATION.en)}"` +
+          ` data-translated="${esc(TRANSLATED[LANG] ?? TRANSLATED.en)}" data-original-label="${esc(orig.toUpperCase())} · ${esc(NAME).replace(/<[^>]*>/g, "")}"` +
+          ` data-original-lang="${esc(orig)}" data-lang="${esc(p.lang || LANG)}">${esc(SHOW_ORIGINAL[LANG] ?? SHOW_ORIGINAL.en)}</a></p>`
+        : "";
+      // `dir="auto"` on the body: an Arabic post inside an LTR page — and the reverse — must lay
+      // itself out from its own first strong character, not from the page around it.
+      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>${ck}${PERSONA ? `<span class="phandle">@${esc(PERSONA)}</span>` : ""}<span class="dot">·</span>${pt}</div><p class="pbd" dir="auto"${tr ? ` lang="${esc(p.lang)}"` : ""}>${esc(p.body)}</p>${note}${pact}</div></div>${inner}</article>`;
     };
 
     let done = false;
@@ -415,7 +519,10 @@ const vars = [
       if (done) return;
       done = true;
       try {
-        const res = await fetch("https://api.justai.pro/api/feed?persona=" + encodeURIComponent(PERSONA));
+        // `lang` rides in the query because it IS the content here — api.justai.pro is CDN'd with the
+        // query string in the cache key, so this is one more entry rather than one more origin hit.
+        const res = await fetch(
+          "https://api.justai.pro/api/feed?persona=" + encodeURIComponent(PERSONA) + "&lang=" + encodeURIComponent(LANG));
         if (!res.ok) return;
         const data = await res.json();
         feed.innerHTML = ((data.posts as P[]) || []).map(post).join("");