you-wrapped 0.3.0 → 0.3.1

package/SKILL.md

@@ -85,8 +85,14 @@ Write the portrait as JSON matching the schema in `prompt.md`, then:
 npx you-wrapped --render portrait.json --out ./wrapped
 ```
 
-Produces `wrapped.html` and a redacted `wrapped.share.html`. Tell them to read the share
-copy before posting it — they should verify their own scrub.
+Writes `wrapped.html` **and** the redacted `wrapped.share.html`, then opens the first in
+their browser automatically. Pass `--no-open` to suppress that.
+
+Tell them to read the share copy before posting it — they should verify their own scrub.
+Redaction removes emails, phones, addresses, links, tokens, coordinates, and every name
+harvested from their contacts. It does **not** catch place names or company names you
+wrote into the prose yourself — so keep those out of the portrait text if they'd identify
+someone, or tell the user which ones remain.
 
 ## Phase 5 — offer to go deeper (every machine is different)
 

package/bin/cli.mjs

@@ -34,6 +34,7 @@ ${c.b}you-wrapped${c.x} — a portrait of your year, from the record your Mac al
   --days N        how far back to read            (default 400)
   --out DIR       where to write                  (default ./you-wrapped-out)
   --no-share      skip the redacted share copy
+  --no-open       don't open the result in your browser
   --yes           skip prompts
   --no-launch     don't hand off to Claude Code when done
 
@@ -78,17 +79,42 @@ if (has('--install-skill')) {
   process.exit(0);
 }
 
-// ── render-only path
+// ── render-only path (this is what the Claude Code skill calls)
 if (has('--render')) {
   const p = JSON.parse(readFileSync(resolve(val('--render')), 'utf8'));
-  // pick up signals.json if it's sitting next to the portrait
-  if (!p.__signals) {
+  mkdirSync(OUT, { recursive: true });
+
+  // Pull signals from alongside the portrait so charts and the stat line are real.
+  let src = p.__signals;
+  if (!src) {
     const sp = join(OUT, 'signals.json');
-    if (existsSync(sp)) { try { p.__signals = JSON.parse(readFileSync(sp, 'utf8')).sources; } catch {} }
+    if (existsSync(sp)) { try { src = JSON.parse(readFileSync(sp, 'utf8')).sources; } catch {} }
   }
-  mkdirSync(OUT, { recursive: true });
-  writeFileSync(join(OUT, 'wrapped.html'), render(p, { stats: {} }));
+  p.__signals = src || {};
+  const sm = p.__signals.messages || {};
+  const line = [
+    sm.sent && `${sm.sent.toLocaleString()} messages you sent`,
+    p.__signals.notes?.count && `${p.__signals.notes.count.toLocaleString()} notes`,
+    p.__signals.browser && `${((p.__signals.browser.desktopQueries || 0) + (p.__signals.browser.mobileQueries || 0)).toLocaleString()} searches`,
+    p.__signals.photos?.geotagged && `${p.__signals.photos.geotagged.toLocaleString()} geotagged frames`,
+  ].filter(Boolean).join(' · ');
+  const stats = { line, footer: line ? `Assembled ${new Date().toISOString().slice(0, 10)} from ${line}.` : '' };
+
+  writeFileSync(join(OUT, 'wrapped.html'), render(p, { stats }));
   log(`${c.g}✓${c.x} ${join(OUT, 'wrapped.html')}`);
+
+  // The share copy is promised everywhere else — produce it here too.
+  if (!has('--no-share')) {
+    const names = harvestNames(null, sm.topPeople, sm.topChats);
+    const shared = { ...scrubDeep(p, names), __signals: p.__signals };
+    writeFileSync(join(OUT, 'wrapped.share.html'), render(shared, { shareMode: true, stats }));
+    log(`${c.g}✓${c.x} ${join(OUT, 'wrapped.share.html')} ${c.d}(redacted)${c.x}`);
+  }
+
+  if (!has('--no-open')) {
+    try { execFileSync('open', [join(OUT, 'wrapped.html')]); log(`${c.d}  opened in your browser${c.x}`); }
+    catch { log(`${c.d}  open it: ${join(OUT, 'wrapped.html')}${c.x}`); }
+  }
   process.exit(0);
 }
 
@@ -231,7 +257,7 @@ if (portrait) {
     const shared = { ...scrubDeep(portrait, names), __signals: profile.sources };
     writeFileSync(join(OUT, 'wrapped.share.html'), render(shared, { shareMode: true, stats: { line: statLine, footer: stats.footer } }));
   }
-  try { execFileSync('open', [join(OUT, 'wrapped.html')]); } catch {}
+  if (!has('--no-open')) { try { execFileSync('open', [join(OUT, 'wrapped.html')]); } catch {} }
 }
 
 // ── done

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "you-wrapped",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Turn the record your Mac already keeps into a portrait of your year. Runs entirely on your machine.",
   "type": "module",
   "bin": { "you-wrapped": "./bin/cli.mjs" },

package/src/render.mjs

@@ -234,7 +234,7 @@ export function render(p, { shareMode = false, stats = {} } = {}) {
 
   const slides = cards.map((c, i) => {
     const t = THEMES[i % THEMES.length];
-    return `<section class="card ${c.kind}" data-i="${i}"
+    return `<section class="card k-${c.kind}" data-i="${i}"
       style="--bg:${t.bg};--fg:${t.fg};--ac:${t.ac}">
       <div class="inner">${c.html}</div></section>`;
   }).join('\n');
@@ -265,15 +265,18 @@ body{font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behav
 }
 
 .card{position:absolute;inset:0;background:var(--bg);color:var(--fg);
-  display:flex;align-items:center;padding:calc(var(--pad) + 34px) var(--pad) calc(var(--pad) + 26px);
+  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
+  overscroll-behavior:contain;scrollbar-width:none;
   opacity:0;pointer-events:none;transform:scale(1.03);
   transition:opacity .42s ease,transform .52s cubic-bezier(.2,.75,.3,1)}
+.card::-webkit-scrollbar{display:none}
 .card.on{opacity:1;pointer-events:auto;transform:none}
 /* paper grain — keeps flat color from looking like a CSS default */
-.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
+.inner::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;z-index:-1;
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
-.inner{position:relative;z-index:1;width:100%;max-height:100%;overflow-y:auto;scrollbar-width:none}
-.inner::-webkit-scrollbar{display:none}
+.inner{position:relative;z-index:1;width:100%;min-height:100%;
+  display:flex;flex-direction:column;justify-content:center;
+  padding:calc(var(--pad) + 34px) var(--pad) calc(var(--pad) + 26px)}
 
 .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
   opacity:.62;margin-bottom:20px}
@@ -289,6 +292,14 @@ blockquote::before{content:"“"}blockquote::after{content:"”"}
 .sub{font-family:var(--mono);font-size:12.5px;line-height:1.7;margin-top:26px;opacity:.72;max-width:32ch}
 .small{font-size:14.5px;line-height:1.55;margin-top:16px;opacity:.72;max-width:38ch}
 .cite{font-family:var(--mono);font-size:11.5px;margin-top:18px;opacity:.6}
+#deck[data-more="1"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;
+  z-index:6;pointer-events:none;
+  background:linear-gradient(to top,var(--fade) 10%,color-mix(in srgb,var(--fade) 65%,transparent) 55%,transparent)}
+.more{position:absolute;right:20px;bottom:14px;z-index:7;color:var(--fadefg);
+  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
+  opacity:0;transition:opacity .25s;pointer-events:none;display:flex;align-items:center;gap:6px}
+#deck[data-more="1"] .more{opacity:.75;animation:bob 1.8s ease-in-out infinite}
+@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
 .hint{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 4px);font-family:var(--mono);font-size:11px;
   letter-spacing:.16em;text-transform:uppercase;opacity:.5;animation:pulse 2.4s ease-in-out infinite}
 @keyframes pulse{0%,100%{opacity:.28}50%{opacity:.72}}
@@ -326,8 +337,8 @@ blockquote::before{content:"“"}blockquote::after{content:"”"}
 #deck.dark #bars i{background:rgba(0,0,0,.22)}
 #deck.dark #bars i.done,#deck.dark #bars i.now{background:rgba(0,0,0,.82)}
 
-.tapzone{position:absolute;top:0;bottom:0;width:34%;z-index:8;cursor:pointer}
-.tapzone.l{left:0}.tapzone.r{right:0;width:66%}
+.tapzone{position:absolute;top:0;bottom:0;width:20%;z-index:8;cursor:pointer}
+.tapzone.l{left:0}.tapzone.r{right:0;width:22%}
 #badge{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:9;
   font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
   color:rgba(255,255,255,.4)}
@@ -342,7 +353,7 @@ blockquote::before{content:"“"}blockquote::after{content:"”"}
 .evq::before{content:"“"}.evq::after{content:"”"}
 .evq cite{display:block;font-family:var(--mono);font-size:10px;font-style:normal;font-weight:400;
   letter-spacing:.06em;opacity:.55;margin-top:7px}
-.card.chart-card .inner,.card.data .inner{padding-top:4px}
+.card.k-chart .inner,.card.k-data .inner{padding-top:4px}
 ${CHART_CSS}
 
 /* ── long-read mode ── */
@@ -409,6 +420,7 @@ body.reading #stage,body.reading #badge{display:none}
   <div id="bars">${bars}</div>
   ${slides}
   <div class="hint" id="hint">tap or press → to begin</div>
+  <div class="more" id="more">scroll ↓</div>
   <div class="tapzone l" data-nav="-1" aria-hidden="true"></div>
   <div class="tapzone r" data-nav="1" aria-hidden="true"></div>
 </div></div>
@@ -425,12 +437,26 @@ const LIGHT=new Set(cards.map((c,k)=>{
   const v=parseInt(h.slice(0,2),16)*.299+parseInt(h.slice(2,4),16)*.587+parseInt(h.slice(4,6),16)*.114;
   return v>140?k:-1;
 }).filter(k=>k>=0));
+function measure(){
+  cards.forEach(c=>{ c.dataset.more = c.scrollHeight > c.clientHeight + 4 ? '1' : '0'; });
+}
+function syncMore(){
+  const c=cards[i];
+  const more = c.dataset.more==='1' && c.scrollTop + c.clientHeight < c.scrollHeight - 6;
+  deck.dataset.more = more ? '1' : '0';
+  // fade + cue inherit the active card's colours
+  const cs=getComputedStyle(c);
+  deck.style.setProperty('--fade', cs.backgroundColor);
+  deck.style.setProperty('--fadefg', cs.color);
+}
 function show(k){
   const h=document.getElementById('hint'); if(h) h.style.display = k===0 ? '' : 'none';
   i=Math.max(0,Math.min(N-1,k));
   cards.forEach((c,x)=>c.classList.toggle('on',x===i));
   bars.forEach((b,x)=>{b.classList.toggle('done',x<i);b.classList.toggle('now',x===i)});
   deck.classList.toggle('dark',LIGHT.has(i));
+  cards[i].scrollTop=0;
+  requestAnimationFrame(syncMore);
 }
 document.querySelectorAll('[data-nav]').forEach(z=>
   z.addEventListener('click',()=>show(i+ +z.dataset.nav)));
@@ -451,12 +477,18 @@ addEventListener('keydown',e=>{
   if(e.key==='ArrowRight'||e.key===' ')  {e.preventDefault();show(i+1)}
   if(e.key==='ArrowLeft')                {e.preventDefault();show(i-1)}
 });
-let x0=null;
-deck.addEventListener('touchstart',e=>x0=e.touches[0].clientX,{passive:true});
+let x0=null,y0=null;
+deck.addEventListener('touchstart',e=>{x0=e.touches[0].clientX;y0=e.touches[0].clientY},{passive:true});
 deck.addEventListener('touchend',e=>{
-  if(x0===null)return; const dx=e.changedTouches[0].clientX-x0;
-  if(Math.abs(dx)>44) show(i+(dx<0?1:-1)); x0=null;
+  if(x0===null)return;
+  const dx=e.changedTouches[0].clientX-x0, dy=e.changedTouches[0].clientY-y0;
+  // only treat it as a page flip if the gesture is clearly horizontal
+  if(Math.abs(dx)>44 && Math.abs(dx)>Math.abs(dy)*1.5) show(i+(dx<0?1:-1));
+  x0=y0=null;
 },{passive:true});
-show(0);
+cards.forEach(c=>c.addEventListener('scroll',syncMore,{passive:true}));
+addEventListener('resize',()=>{measure();syncMore()});
+if(document.fonts?.ready) document.fonts.ready.then(()=>{measure();syncMore()});
+measure(); show(0);
 </script></body></html>`;
 }