@justai/cuts 0.5.2 → 0.7.0

package/package.json

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

package/src/BackToZone.astro

@@ -0,0 +1,33 @@
+---
+// Home affordance → app.zone (the platform / App Store home). Standard on every app:
+// always visible at the top-left of the toolbar. Also tidies the ?ref / ?lang hints
+// from the URL so shared links stay clean.
+---
+
+<a class="home" href="https://app.zone" data-home aria-label="app.zone" title="app.zone">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V20h14V9.5"/></svg>
+</a>
+
+<style>
+  /* icon-only, flat — flush to the left edge of the (full-bleed) toolbar */
+  .home {
+    display: inline-grid; place-items: center; width: 36px; height: 36px;
+    color: var(--text-dim); text-decoration: none; margin-inline-start: -7px;
+    transition: color 0.2s, transform 0.2s var(--ease-spring);
+  }
+  .home:hover { color: var(--text); }
+  .home:active { transform: scale(0.9); }
+  .home svg { width: 20px; height: 20px; }
+</style>
+
+<script>
+  // Tidy the URL: the ?ref / ?lang hints have done their job (lang is consumed by the
+  // head detect script); keep shared links clean.
+  const params = new URLSearchParams(location.search);
+  if (params.has("ref") || params.has("lang")) {
+    params.delete("ref");
+    params.delete("lang");
+    const q = params.toString();
+    history.replaceState(null, "", location.pathname + (q ? "?" + q : "") + location.hash);
+  }
+</script>

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>