@justai/cuts 0.5.1 → 0.6.0

package/package.json

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

package/src/Base.astro

@@ -221,25 +221,34 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
     {/* Consent banner — shown only to European-timezone visitors with no stored choice. The
          Consent Mode region default already denies analytics for the EEA/UK until "Allow". Gated on
          gaId with the analytics block above: a persona that runs no analytics has nothing to consent
-         to, so it renders no banner. */}
+         to, so it renders no banner.
+
+         The <style> below sits INSIDE this {gaId && (...)} expression, so Astro does NOT scope it — a
+         style that is a direct static child of a component gets a data-astro-cid hash, but one nested
+         in a JSX expression is emitted verbatim, GLOBAL. So every selector here is fleet-wide and MUST
+         carry its own namespace. It once used a two-letter `.cc` for the banner container; the feed
+         loader emits `<div class="cc">` for its content column, so the global `.cc { display: none }`
+         hid the feed's text on EVERY persona. The whole family is `consent-*` now: unmistakably this
+         widget's, never anyone else's. A generic global class is a landmine that the shell hides from
+         the persona until a feed goes white — see [[the-shell-guarantees-you-cannot-see]]. */}
     {gaId && (
-    <div id="cc" class="cc" role="dialog" aria-label={t.chromePrivacy}>
-      <div class="cc-card">
-        <p class="cc-text">{t.consentText}</p>
-        <div class="cc-row">
-          <button type="button" class="cc-btn" data-consent="denied">{t.consentDecline}</button>
-          <button type="button" class="cc-btn cc-ok" data-consent="granted">{t.consentAllow}</button>
+    <div id="consent" class="consent" role="dialog" aria-label={t.chromePrivacy}>
+      <div class="consent-card">
+        <p class="consent-text">{t.consentText}</p>
+        <div class="consent-row">
+          <button type="button" class="consent-btn" data-consent="denied">{t.consentDecline}</button>
+          <button type="button" class="consent-btn consent-ok" data-consent="granted">{t.consentAllow}</button>
         </div>
       </div>
     </div>
     <style>
-      .cc { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300; justify-content: center; padding: 0 12px; pointer-events: none; }
-      .cc.show { display: flex; }
-      .cc-card { pointer-events: auto; width: 100%; max-width: 460px; margin-block-end: max(12px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 93%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.2); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; animation: cc-up 0.45s var(--ease-spring) both; }
-      .cc-text { font-size: var(--fs-xs); color: var(--text); line-height: 1.5; }
-      .cc-row { display: flex; gap: 8px; justify-content: flex-end; }
-      .cc-btn { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform 0.2s var(--ease-spring); }
-      .cc-btn:active { transform: scale(0.94); }
+      .consent { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300; justify-content: center; padding: 0 12px; pointer-events: none; }
+      .consent.show { display: flex; }
+      .consent-card { pointer-events: auto; width: 100%; max-width: 460px; margin-block-end: max(12px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 93%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.2); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; animation: consent-up 0.45s var(--ease-spring) both; }
+      .consent-text { font-size: var(--fs-xs); color: var(--text); line-height: 1.5; }
+      .consent-row { display: flex; gap: 8px; justify-content: flex-end; }
+      .consent-btn { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform 0.2s var(--ease-spring); }
+      .consent-btn:active { transform: scale(0.94); }
       /* The consent button is the one place the fleet genuinely disagreed, and the disagreement is
          about CONTRAST rather than taste. Seven personas have dark accents and take white text on
          --accent-press. cleanmylink and howlong have bright ones — mint and amber — where white
@@ -247,9 +256,9 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          Two hooks with the majority as the default, so the seven say nothing and the two say
          exactly what they already verified. This is the styling contract working as designed:
          colour is the persona's, and a real difference gets a declared hook rather than a fork. */
-      .cc-ok { background: var(--consent-ok-bg, var(--accent-press)); border-color: var(--consent-ok-bg, var(--accent-press)); color: var(--on-accent, #fff); }
-      @keyframes cc-up { from { transform: translateY(24px); opacity: 0; } }
-      @media (prefers-reduced-motion: reduce) { .cc-card { animation: none; } }
+      .consent-ok { background: var(--consent-ok-bg, var(--accent-press)); border-color: var(--consent-ok-bg, var(--accent-press)); color: var(--on-accent, #fff); }
+      @keyframes consent-up { from { transform: translateY(24px); opacity: 0; } }
+      @media (prefers-reduced-motion: reduce) { .consent-card { animation: none; } }
     </style>
     <script is:inline>
       (function () {
@@ -257,7 +266,7 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
           if (localStorage.getItem("consent")) return;
           if (!document.getElementById("kernel")) return; // no kernel = not a content page (e.g. 404) — don't ask for consent on a dead end
           if ((Intl.DateTimeFormat().resolvedOptions().timeZone || "").indexOf("Europe/") !== 0) return;
-          var el = document.getElementById("cc"); if (!el) return;
+          var el = document.getElementById("consent"); if (!el) return;
           el.classList.add("show");
           el.addEventListener("click", function (e) {
             var v = e.target.getAttribute("data-consent"); if (!v) return;

package/src/LangPicker.astro

@@ -0,0 +1,142 @@
+---
+// The language picker — the shared app.zone chrome, extracted from the eleven byte-identical copies
+// (they differed only in comments). The markup, the style and the dropdown behaviour are the SAME for
+// every persona; only the DATA differs, so the data is passed in, never imported.
+//
+// It deliberately does NOT own the locale list. @justai/ui/locale is explicit that the list belongs to
+// the consuming repo's src/i18n — this ecosystem has been bitten twice by a second copy of it — so the
+// persona hands `locales`, `localeNames` and `localePath` (and the two localized labels) as props. The
+// component holds the shape; the persona holds the list. It localize-routes to /xx/ (localePath),
+// remembers the choice in localStorage (the @justai/cuts head router reads it to auto-route next
+// visit), and preserves the section hash (Profile/Kernel/Posts) across the switch.
+interface Props {
+  current: string;
+  locales: readonly string[];
+  localeNames: Record<string, string>;
+  localePath: (lang: string) => string;
+  label: string; // the persona's t.chromeLanguage
+  searchLabel: string; // the persona's t.chromeLangSearch
+}
+const { current, locales, localeNames, localePath, label, searchLabel } = Astro.props;
+---
+
+<div class="picker" data-picker>
+  <button class="trigger" type="button" aria-haspopup="listbox" aria-expanded="false" data-trigger aria-label={`${label}: ${current.toUpperCase()}`} title={label}>{current.toUpperCase()}</button>
+
+  <div class="menu" role="listbox" data-menu hidden>
+    <input type="search" class="search" placeholder={searchLabel} autocomplete="off" spellcheck="false" data-search aria-label={searchLabel} />
+    <div class="list" data-list>
+      {locales.map((l) => (
+        <a
+          href={localePath(l)}
+          role="option"
+          class:list={["item", { active: l === current }]}
+          data-lang={l}
+          data-name={localeNames[l].toLowerCase()}
+          aria-selected={l === current ? "true" : "false"}
+          lang={l}
+        >
+          <span>{localeNames[l]}</span>
+          {l === current && (
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+          )}
+        </a>
+      ))}
+    </div>
+  </div>
+</div>
+
+<style>
+  .picker { position: relative; }
+  /* most minimalist: just the 2-letter code, flush to the right edge */
+  .trigger {
+    display: inline-grid; place-items: center; min-width: 36px; height: 36px;
+    font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em;
+    color: var(--text-dim); background: none; border: none; padding: 0 8px; cursor: pointer;
+    margin-inline-end: -7px;
+    transition: color 0.2s, transform 0.2s var(--ease-spring);
+  }
+  .trigger:hover { color: var(--text); }
+  .trigger:active { transform: scale(0.9); }
+
+  .menu {
+    position: absolute;
+    inset-block-start: calc(100% + 8px);
+    inset-inline-end: 0;
+    width: 230px;
+    /* Near-opaque: the toolbar's own backdrop-filter breaks this menu's, so don't rely on it
+       for legibility — the blur is a bonus when it works, the solid fill is the guarantee. */
+    background: color-mix(in srgb, var(--bg) 97%, transparent);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(40px) saturate(1.6);
+    -webkit-backdrop-filter: blur(40px) saturate(1.6);
+    padding: 8px;
+    z-index: 200;
+    animation: pop 0.2s var(--ease-out) both;
+  }
+  @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
+
+  .search {
+    width: 100%; font: inherit; font-size: var(--fs-base); color: var(--text);
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: 9px 12px; outline: none; margin-block-end: 6px;
+  }
+  .list { max-height: min(54vh, 360px); overflow-y: auto; scrollbar-width: thin; }
+  .item {
+    display: flex; align-items: center; justify-content: space-between;
+    text-decoration: none; color: var(--text); font-size: var(--fs-sm);
+    padding: 9px 12px; border-radius: var(--radius-sm);
+    transition: background 0.15s;
+  }
+  .item:hover { background: var(--surface-2); }
+  .item.active { color: var(--accent); font-weight: 600; }
+  .item svg { width: 16px; height: 16px; flex: none; }
+</style>
+
+<script>
+  const picker = document.querySelector<HTMLElement>("[data-picker]");
+  if (picker) {
+    const trigger = picker.querySelector<HTMLButtonElement>("[data-trigger]")!;
+    const menu = picker.querySelector<HTMLElement>("[data-menu]")!;
+    const search = picker.querySelector<HTMLInputElement>("[data-search]")!;
+    const items = Array.from(picker.querySelectorAll<HTMLAnchorElement>(".item"));
+
+    function filter() {
+      const q = search.value.trim().toLowerCase();
+      for (const it of items) {
+        it.style.display = (it.dataset.name ?? "").includes(q) ? "" : "none";
+      }
+    }
+    function open() {
+      menu.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+      search.value = "";
+      filter();
+      setTimeout(() => search.focus(), 0);
+    }
+    function close() {
+      menu.hidden = true;
+      trigger.setAttribute("aria-expanded", "false");
+    }
+
+    trigger.addEventListener("click", () => (menu.hidden ? open() : close()));
+    document.addEventListener("click", (e) => {
+      if (!picker.contains(e.target as Node)) close();
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") close();
+    });
+    search.addEventListener("input", filter);
+    // Remember the chosen language for auto-routing on the next visit.
+    for (const it of items) {
+      it.addEventListener("click", (e) => {
+        localStorage.setItem("lang", it.dataset.lang ?? "en");
+        // preserve the section you're viewing (Profile/Kernel/Posts) across the language switch
+        const href = it.getAttribute("href");
+        if (href && location.hash) { e.preventDefault(); location.assign(href + location.hash); }
+      });
+    }
+  }
+</script>