@justai/cuts 0.8.0 → 0.10.0

package/package.json

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

package/src/Posts.astro

@@ -37,7 +37,9 @@ const { handle, name, footer, avatarBg } = Astro.props;
 <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); }
+  /* the cut owns its own landing offset (was `#kernel, #posts { scroll-margin-top }` in each persona —
+     which orphaned once #posts moved here and carried this component's scope cid instead of the persona's). */
+  .posts { border-block-start: 1px solid var(--border); scroll-margin-top: 82px; }
   .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); }

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

@@ -0,0 +1,199 @@
+---
+// ░░ TOOLBAR cut — the persona's sticky chrome: home · section-nav · language · sign-in, plus the
+// scroll-reactive title strip and the scroll-spy that binds the whole page together. ░░
+//
+// This markup + its ~40 lines of CSS + its ~80-line scroll-spy were near-identical in every persona's
+// main component (only the kernel glyph and a couple of optional controls differed). It lives here now,
+// once. A persona writes:
+//
+//   <Toolbar sectionsLabel={t.chromeSections} profileLabel={t.chromeProfile}
+//            kernelLabel={t.chromeApp} postsLabel={t.chromePosts}>
+//     <svg slot="kernelIcon" .../>
+//     <LangPicker slot="langPicker" current={lang} locales={locales} ... />
+//   </Toolbar>
+//
+// WHAT VARIES, AND WHY IT IS A PROP vs A SLOT (the rule: zero-coupling children are internalised;
+// data-coupled ones are slots):
+//   • BackToZone — takes no props → internalised here (the persona no longer imports it).
+//   • the three nav aria-labels — resolved strings (like every other cut: Posts, LangPicker) → props.
+//   • kernelIcon — the ONE per-persona nav glyph (⚡ / clock / globe …) → required slot.
+//   • langPicker — needs the persona's own locale data (the list must NOT live in the shared package —
+//     it bit us twice; see @justai/ui/locale) → a slot the persona fills with its <LangPicker/>.
+//   • navExtra — optional extra nav item after Posts (e.g. the timers' fullscreen button) → slot.
+//   • toolbarRight — optional right-side control before the picker (e.g. time's 24H/AM-PM toggle) → slot.
+//
+// CONTRACT with the page (the same three cut ids the whole shell agrees on): the scroll-spy needs a
+// `#below` wrapper around toolbar+kernel+posts, a `<section id="kernel">` between `#profile` and
+// `#posts`, and reads `.pname`/`.handle` from the Profile for the title strip. It touches NO kernel
+// internals. It is also the page's REVEAL: it sets `body.ready` (the other half of @justai/core's
+// REVEAL_CSS) — so every persona that renders a Toolbar is revealed; move it and the page stays blank.
+interface Props {
+  sectionsLabel: string; // aria-label for the section-nav group
+  profileLabel: string;  // aria/title for the Profile nav icon
+  kernelLabel: string;   // aria/title for the Kernel (app) nav icon
+  postsLabel: string;    // aria/title for the Posts nav icon
+}
+import BackToZone from "./BackToZone.astro";
+const { sectionsLabel, profileLabel, kernelLabel, postsLabel } = Astro.props;
+---
+
+<header class="toolbar">
+  <div class="tb-row">
+    <div class="tb-left">
+      <BackToZone />
+      <nav class="tb-nav-group" aria-label={sectionsLabel}>
+        <a class="tb-nav" id="navProfile" href="#profile" aria-label={profileLabel} title={profileLabel}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        </a>
+        <a class="tb-nav" id="navKernel" href="#kernel" aria-label={kernelLabel} title={kernelLabel}>
+          <slot name="kernelIcon" />
+        </a>
+        <a class="tb-nav" id="navPosts" href="#posts" aria-label={postsLabel} title={postsLabel}>
+          <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>
+        </a>
+        <slot name="navExtra" />
+      </nav>
+    </div>
+    <div class="tb-right">
+      <slot name="toolbarRight" />
+      <slot name="langPicker" />
+      <div data-justai-auth></div>
+    </div>
+  </div>
+  <div class="tb-title" id="tbTitle"><span class="tb-title-text" id="tbTitleText"></span></div>
+</header>
+<!-- justai auth — sign-in avatar menu, inherited from auth.justai.pro (the developer writes only the kernel) -->
+<script is:inline defer src="https://auth.justai.pro/sdk.js"></script>
+
+<style>
+  /* ---- app toolbar — sticky to the top of the active region (kernel + posts); it never
+     enters the Profile (it lives inside .below). Flat / knife-cut: a left group and a
+     right group, no rounded pills. ---- */
+  .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. --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(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);
+    /* a very faint hairline always; it firms up once content scrolls under the bar */
+    border-block-end: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+    transition: border-color 0.3s var(--ease-out);
+  }
+  .toolbar.stuck { border-block-end-color: var(--border); }
+  @media (min-width: 768px) { .toolbar { margin-inline: -28px; padding-inline: 28px; } }
+  /* icons row + the scroll-reactive title strip below it */
+  .tb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .tb-title { display: flex; align-items: center; height: 0; overflow: hidden; opacity: 0; transition: height 0.35s var(--ease-out), opacity 0.25s var(--ease-out); }
+  .tb-title.show { height: 26px; opacity: 1; }
+  .tb-title-text { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.16s var(--ease-out); }
+  .tb-title-text.fade { opacity: 0; }
+  /* nav lives on the left, beside the back affordance — the middle is intentionally empty */
+  .tb-left { display: flex; align-items: center; gap: 2px; min-width: 0; }
+  .tb-nav-group { display: flex; align-items: center; gap: 2px; }
+  .tb-right { display: flex; align-items: center; min-width: 0; }
+  /* icon-only section nav — current cut highlighted */
+  .tb-nav {
+    display: grid; place-items: center; width: 38px; height: 36px;
+    color: var(--text-dim);
+    transition: color 0.2s, opacity 0.2s, transform 0.2s var(--ease-spring);
+  }
+  .tb-nav:hover { color: var(--text); }
+  .tb-nav:active { transform: scale(0.9); }
+  .tb-nav.active { color: var(--accent); }
+  .tb-nav :global(svg) { width: 19px; height: 19px; }
+</style>
+
+<script>
+  // Land on the Kernel cut; Profile is above (scroll up), Posts below (scroll down). This is also the
+  // page's reveal (body.ready) and its scroll-spy (nav highlight + title strip + hash sync).
+  (function () {
+    const below = document.getElementById("below");
+    const kernel = document.getElementById("kernel");
+    const toolbar = document.querySelector(".toolbar");
+    const navKernel = document.getElementById("navKernel");
+    const navPosts = document.getElementById("navPosts");
+    const navProfile = document.getElementById("navProfile");
+    const profile = document.getElementById("profile");
+    const posts = document.getElementById("posts");
+    if (!below || !kernel) return;
+    if ("scrollRestoration" in history) history.scrollRestoration = "manual";
+    // update only the fragment, never clobbering the path or query (?data=, ?city= must survive a scroll)
+    const setHash = (id: string) => history.replaceState(null, "", location.pathname + location.search + "#" + id);
+
+    // Land at the top of .below (toolbar + kernel) — skip the Profile, no flash.
+    const land = () => {
+      // presentation mode (a ?data= link with present:true) owns the viewport — no landing scroll
+      if (document.body.dataset.present) return;
+      // respect a section hash on load/refresh: #posts / #profile land there; otherwise (#kernel or
+      // none) land on the Kernel. behavior:instant overrides the CSS scroll-behavior:smooth.
+      const h = location.hash;
+      if (h === "#posts" && posts) posts.scrollIntoView({ behavior: "instant", block: "start" });
+      else if (h === "#profile" && profile) profile.scrollIntoView({ behavior: "instant", block: "start" });
+      else window.scrollTo({ top: below.getBoundingClientRect().top + window.scrollY, behavior: "instant" });
+    };
+    land();
+    window.addEventListener("load", land);
+    const reveal = () => document.body.classList.add("ready");
+    requestAnimationFrame(reveal);
+    setTimeout(reveal, 500);
+
+    // Toolbar hairline appears once content scrolls under it; the nav highlights whichever
+    // cut is currently at the top of the active region (the toolbar line) — Profile (the
+    // first cut when you scroll up), App or Posts.
+    const cuts = [[profile, navProfile], [kernel, navKernel], [posts, navPosts]].filter(([el, nav]) => el && nav) as [HTMLElement, HTMLElement][];
+    // scroll-reactive title strip: the cut at the toolbar line names itself. Profile stays collapsed
+    // (its big header is the title); Kernel → app name, Posts → @handle.
+    const tbTitle = document.getElementById("tbTitle");
+    const tbTitleText = document.getElementById("tbTitleText");
+    const pname = (document.querySelector(".pname")?.textContent || "").trim();
+    const handle = (document.querySelector(".handle")?.textContent || "").trim();
+    const titleFor = (c: [HTMLElement, HTMLElement]) => (c[0] === kernel ? pname : c[0] === posts ? handle : "");
+    let lastTitleCut: [HTMLElement, HTMLElement] | null = null, titleInit = true;
+    const onScroll = () => {
+      if (toolbar) toolbar.classList.toggle("stuck", window.scrollY >= below.offsetTop - 1);
+      const line = 84; // ≥ #kernel/#posts scroll-margin-top, so anchor clicks land at/above the line and are detected
+      let current = cuts[0];
+      for (const c of cuts) if (c[0].getBoundingClientRect().top <= line) current = c;
+      for (const c of cuts) c[1].classList.toggle("active", c === current);
+      if (current !== lastTitleCut) {
+        lastTitleCut = current;
+        // scroll-linked URL: reflect the current cut in the hash (replaceState = no jump, no history spam)
+        const cid = current[0].id;
+        if (cid && "#" + cid !== location.hash) setHash(cid);
+        const t = titleFor(current);
+        if (titleInit) {
+          // first paint: snap the strip into place — no "settling into the room" animation on load/refresh
+          titleInit = false;
+          if (tbTitle) { tbTitle.style.transition = "none"; tbTitle.classList.toggle("show", !!t); }
+          if (t && tbTitleText) tbTitleText.textContent = t;
+          if (tbTitle) { void tbTitle.offsetHeight; tbTitle.style.transition = ""; }
+        } else {
+          if (tbTitle) tbTitle.classList.toggle("show", !!t);
+          if (t && tbTitleText && tbTitleText.textContent !== t) {
+            tbTitleText.classList.add("fade");
+            setTimeout(() => { tbTitleText.textContent = t; tbTitleText.classList.remove("fade"); }, 150);
+          }
+        }
+      }
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    // nav clicks: scroll programmatically so the sticky toolbar always pins flush. The native anchor
+    // + scroll-margin left a gap above the bar when jumping to the Kernel from the Profile (the title
+    // strip is still collapsed there, so the bar is shorter than the margin). Kernel → land at .below
+    // top (bar pins at 0); Profile/Posts → scrollIntoView.
+    cuts.forEach(([el, nav]) => nav.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (el === kernel) window.scrollTo({ top: below.getBoundingClientRect().top + window.scrollY, behavior: "smooth" });
+      else el.scrollIntoView({ behavior: "smooth", block: "start" });
+      setHash(el.id);
+    }));
+  })();
+</script>