sagadeck 1.7.1 → 1.9.0

package/src/motion.js

@@ -5,13 +5,17 @@ const number=(x,f,min,max)=>Math.min(max,Math.max(min,Number.isFinite(Number(x))
 const color=(x,f)=>/^#?[0-9a-f]{6}$/i.test(x||'')?'#'+String(x).replace('#',''):f;
 export function motionOptions(value,colors={}){
  const o=typeof value==='string'?{type:value}:value||{};
- if(!['wireframe','hologram','trace','requests','flow','chat','terminal'].includes(o.type))throw new Error('motion.type: wireframe, hologram, trace, requests, flow, chat ou terminal.');
+ if(!['wireframe','hologram','trace','requests','flow','chat','terminal','console'].includes(o.type))throw new Error('motion.type: wireframe, hologram, trace, requests, flow, chat, terminal ou console.');
+ // console: janela de terminal com cenas (comando digitado letra a letra, depois a saída linha a linha), em ciclo
+ const con=o.type==='console';
+ const scenes=(Array.isArray(o.scenes)?o.scenes:con&&Array.isArray(o.lines)?o.lines:[]).slice(0,12).map(sc=>typeof sc==='string'?{cmd:sc,out:[]}:{cmd:String(sc?.cmd??''),out:(Array.isArray(sc?.out)?sc.out:String(sc?.out??'').split('\n')).map(String).filter(x=>x!=='').slice(0,8)}).filter(sc=>sc.cmd);
+ if(con&&!scenes.length)throw new Error('motion console: scenes: [{cmd: "comando", out: ["linha de saída", ...]}].');
  const aliases={fg:'ink',bg:'paper',hi:'accent',em:'alert'};
  const resolved=(v,f)=>color(colors[aliases[v]||v]||v,f);
  const trace=(Array.isArray(o.path)&&o.path.length>=2?o.path:[[.05,.5],[.95,.5]]).slice(0,64).map(p=>[number(Array.isArray(p)?p[0]:p?.x,0,0,1),number(Array.isArray(p)?p[1]:p?.y,0,0,1)]);
  const transparent=o.background==='transparent';
  const layers=(Array.isArray(o.layers)&&o.layers.length?o.layers:[{shape:o.shape,x:.5,y:.5,scale:.24}]).slice(0,6).map(l=>({shape:['sphere','cube','plane','ring'].includes(l.shape)?l.shape:'sphere',x:number(l.x,.5,-.5,1.5),y:number(l.y,.5,-.5,1.5),scale:number(l.scale,.24,.03,1),speed:number(l.speed,1,.1,4),rotation:number(l.rotation,0,-10,10)}));
- return {type:o.type,path:trace,closed:o.closed===true,pulses:Math.round(number(o.pulses,2,1,8)),lineWidth:number(o.lineWidth,1.2,.5,6),layers,opacity:number(o.opacity,.7,.05,1),lines:Array.isArray(o.lines)?o.lines.map(String):String(o.code||'').split('\n'),fontSize:number(o.fontSize,16,10,40),shape:o.shape==='cube'?'cube':'sphere',speed:number(o.speed,1,.1,8),recognition:number(o.recognition,1,0,10),thinking:number(o.thinking,.8,0,10),read:number(o.read,2,0,15),typing:number(o.typing,.035,.01,.2),caption:String(o.caption||''),user:String(o.user||''),assistant:String(o.assistant||''),background:transparent?'transparent':resolved(o.background,'#111e30'),foreground:resolved(o.foreground,transparent?color(colors.ink,'#182642'):'#b5c9db'),accent:resolved(o.accent,color(colors.alert,'#cc092f')),secondary:resolved(o.secondary,transparent?color(colors.accent,'#3769e8'):'#aa9ccf'),manual:o.start!=='auto',finish:['next','video','hold'].includes(o.finish)?o.finish:'hold'};
+ return {type:o.type,path:trace,closed:o.closed===true,pulses:Math.round(number(o.pulses,2,1,8)),lineWidth:number(o.lineWidth,1.2,.5,6),layers,opacity:number(o.opacity,.7,.05,1),lines:Array.isArray(o.lines)?o.lines.map(String):String(o.code||'').split('\n'),fontSize:number(o.fontSize,con?20:16,10,40),shape:o.shape==='cube'?'cube':'sphere',speed:number(o.speed,1,.1,8),recognition:number(o.recognition,1,0,10),thinking:number(o.thinking,.8,0,10),read:number(o.read,2,0,15),typing:number(o.typing,con?.016:.035,.005,.2),scenes,hold:number(o.hold,3.2,.5,30),caption:String(o.caption||''),user:String(o.user||''),assistant:String(o.assistant||''),background:transparent?'transparent':resolved(o.background,con?color(colors.surfaceDark||colors.surface,'#12160f'):'#111e30'),foreground:resolved(o.foreground,con?color(colors.ink,'#ece8db'):transparent?color(colors.ink,'#182642'):'#b5c9db'),accent:resolved(o.accent,con?color(colors.accent,'#f0b24a'):color(colors.alert,'#cc092f')),secondary:resolved(o.secondary,con?color(colors.c2||colors.accent,'#a9c79b'):transparent?color(colors.accent,'#3769e8'):'#aa9ccf'),muted:color(colors.muted,'#9fa89a'),line:color(colors.line,'#2b352c'),alert:color(colors.alert,'#e07a55'),manual:o.start!=='auto',finish:['next','video','hold'].includes(o.finish)?o.finish:'hold'};
 }
 function drawTrace(ctx,o,t,w,h){
  const points=o.path.map(p=>[p[0]*w,p[1]*h]);if(o.closed)points.push(points[0]);
@@ -26,11 +30,21 @@ function scene(o){
  const message=(kind)=>parent.postMessage({sagaMotion:kind},'*');
  const chat=document.querySelector('.chat'),input=document.querySelector('.input'),thread=document.querySelector('.thread'),status=document.querySelector('.status');
  function reset(){started=false;phase='idle';elapsed=0;chat.hidden=true;input.textContent='';thread.replaceChildren();status.textContent='';}
- window.__sagaMotion=()=>({active,reduced,started,serial,phase});message('ready');window.addEventListener('message',e=>{if(e.source!==parent)return;if(e.data?.sagaMotion==='poster'){still=e.data.active!==false;recompute();if(reduced&&o.type==='terminal')document.querySelector('.feed').textContent=o.lines.join('\n');}if(e.data?.sagaMotion==='active')active=!!e.data.active;if(e.data?.sagaMotion==='reset')reset();if(e.data?.sagaMotion==='start'){reset();started=true;active=true;phase='recognize';chat.hidden=false;}});
+ window.__sagaMotion=()=>({active,reduced,started,serial,phase});message('ready');window.addEventListener('message',e=>{if(e.source!==parent)return;if(e.data?.sagaMotion==='poster'){still=e.data.active!==false;recompute();if(reduced&&o.type==='terminal')document.querySelector('.feed').textContent=o.lines.join('\n');if(reduced&&o.type==='console')consoleFull();}if(e.data?.sagaMotion==='active')active=!!e.data.active;if(e.data?.sagaMotion==='reset')reset();if(e.data?.sagaMotion==='start'){reset();started=true;active=true;phase='recognize';chat.hidden=false;}});
  if(o.type==='chat'&&o.manual){const request=e=>{if(!active)return;if(e.type==='keydown'&&![' ','Enter','ArrowRight','PageDown'].includes(e.key))return;e.preventDefault();message('start-request');};document.addEventListener('click',request);document.addEventListener('keydown',request);}
  if(o.type==='chat'&&!o.manual){started=true;phase='recognize';chat.hidden=false;}
  function bubble(text,kind){const el=document.createElement('div');el.className='bubble '+kind;el.textContent=text;thread.append(el);return el;}
  let terminalElapsed=0;const terminalText=o.lines.join('\n');
+ let ci=0,cphase='wait',ct=0,shown='';const conBody=document.querySelector('.con-body'),conNum=document.querySelector('.con-n');
+ function showConsole(cmdLen,outN){const sc=o.scenes[ci],key=ci+':'+cmdLen+':'+outN;if(!sc||key===shown)return;shown=key;const cmd=document.createElement('p');cmd.className='cmd';const pr=document.createElement('span');pr.className='pr';cmd.append(pr,document.createTextNode(sc.cmd.slice(0,cmdLen)));if(cmdLen<sc.cmd.length){const cur=document.createElement('span');cur.className='cur';cmd.append(cur);}const outs=sc.out.slice(0,outN).map((l,i)=>{const e=document.createElement('p');e.className='out'+(i===0?' first':'');const arr=document.createElement('span');arr.className='arr';e.append(arr,document.createTextNode(l));return e;});conBody.replaceChildren(cmd,...outs);conNum.textContent=String(ci+1).padStart(2,'0')+'/'+String(o.scenes.length).padStart(2,'0');}
+ function consoleFull(){ci=0;cphase='wait';ct=0;showConsole(o.scenes[0].cmd.length,o.scenes[0].out.length);}
+ function tickConsole(dt){const sc=o.scenes[ci];if(reduced){consoleFull();return;}ct+=dt;
+ if(cphase==='wait'){showConsole(0,0);if(ct>=.3){cphase='type';ct=0;}}
+ else if(cphase==='type'){const n=Math.min(sc.cmd.length,Math.floor(ct/o.typing));showConsole(n,0);if(n>=sc.cmd.length){cphase='gap';ct=0;}}
+ else if(cphase==='gap'){showConsole(sc.cmd.length,0);if(ct>=.38){cphase='out';ct=0;}}
+ else if(cphase==='out'){const n=Math.min(sc.out.length,1+Math.floor(ct/.26));showConsole(sc.cmd.length,n);if(n>=sc.out.length&&ct>=Math.max(0,sc.out.length-1)*.26){cphase='hold';ct=0;}}
+ else if(cphase==='hold'&&ct>=o.hold){ci=(ci+1)%o.scenes.length;cphase='wait';ct=0;}}
+ if(o.type==='console'){if(reduced)consoleFull();else showConsole(0,0);}
  let bot;
  function tickChat(dt){if(!started||phase==='done')return;elapsed+=dt;
  if(phase==='recognize'&&elapsed>=o.recognition){phase='input';elapsed=0;}
@@ -40,7 +54,7 @@ function scene(o){
  else if(phase==='read'&&elapsed>=o.read){phase='done';message('done');}}
  function requestLine(){serial++;const ops=['GET /silent-cloud','POST /paper-moon','PUT /silver-orbit','PATCH /soft-vector','GET /tiny-comet','DELETE /ghost-frame'];const el=document.createElement('div');el.textContent=String(serial).padStart(6,'0')+' '+ops[(serial*7+Math.floor(serial/9))%ops.length].padEnd(23,' ')+' '+(serial*2654435761>>>0).toString(16)+' '+(17+serial*37%981)+'ms 200 OK';document.querySelector('.feed').append(el);while(document.querySelector('.feed').children.length>14)document.querySelector('.feed').firstChild.remove();document.querySelector('.feed').scrollTop=1e6;}
  if(o.type==='requests'){for(let i=0;i<8;i++)requestLine();setInterval(()=>{if(active&&!document.hidden&&!reduced){requestLine();requestLine();}},Math.max(35,240/o.speed));}
- function draw(ts){requestAnimationFrame(draw);if(!active||document.hidden){previous=ts;return;}const dt=Math.min(.1,(ts-(previous||ts))/1000);previous=ts;if(o.type==='chat'){tickChat(dt);return;}if(o.type==='terminal'){terminalElapsed+=dt*o.speed;const count=reduced?terminalText.length:Math.floor(terminalElapsed/o.typing);document.querySelector('.feed').textContent=terminalText.slice(0,count)+(count<terminalText.length?'_':'');document.querySelector('.feed').scrollTop=1e6;if(count>terminalText.length+3/o.typing)terminalElapsed=0;return;}if(o.type==='requests'||(reduced&&serial))return;serial++;
+ function draw(ts){requestAnimationFrame(draw);if(!active||document.hidden){previous=ts;return;}const dt=Math.min(.1,(ts-(previous||ts))/1000);previous=ts;if(o.type==='chat'){tickChat(dt);return;}if(o.type==='console'){tickConsole(dt*o.speed);return;}if(o.type==='terminal'){terminalElapsed+=dt*o.speed;const count=reduced?terminalText.length:Math.floor(terminalElapsed/o.typing);document.querySelector('.feed').textContent=terminalText.slice(0,count)+(count<terminalText.length?'_':'');document.querySelector('.feed').scrollTop=1e6;if(count>terminalText.length+3/o.typing)terminalElapsed=0;return;}if(o.type==='requests'||(reduced&&serial))return;serial++;
  const w=main.clientWidth,h=main.clientHeight,dpr=devicePixelRatio||1;if(canvas.width!==Math.round(w*dpr)||canvas.height!==Math.round(h*dpr)){canvas.width=Math.round(w*dpr);canvas.height=Math.round(h*dpr);}ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,w,h);const t=reduced?0:(ts-epoch)/1000*o.speed,r=Math.min(w*.25,h*.32),cy=h*.55;if(o.type==='hologram'){drawHologram(ctx,o,t,w,h);return;}if(o.type==='trace'){drawTrace(ctx,o,t,w,h);return;}
  function p(x,y,z){let a=t*.15+.4,xx=x*Math.cos(a)+z*Math.sin(a),zz=-x*Math.sin(a)+z*Math.cos(a),yy=y*Math.cos(.3)-zz*Math.sin(.3);const f=4/(4+zz);return[w/2+xx*r*f,cy+yy*r*f];}
  function line(v,c){ctx.beginPath();v.forEach((q,i)=>{let a=p(...q);i?ctx.lineTo(...a):ctx.moveTo(...a);});ctx.strokeStyle=c;ctx.lineWidth=.9;ctx.stroke();}
@@ -53,6 +67,6 @@ function scene(o){
 }
 // still: o deck pediu movimento nenhum (motion: none). A cena já nasce parada e completa; antes ela só sabia pela
 // mensagem da página, que sob carga chegava depois de o terminal começar a digitar.
-export function motionHTML(value,colors,{still=false}={}){const o={...motionOptions(value,colors),...(still?{still:true}:{})};const css=`html,body{height:100%;background:${o.type==='chat'?'transparent':o.background};color:${o.foreground};overflow:hidden}main{height:100%;position:relative}canvas{position:absolute;inset:0;width:100%;height:100%}.caption{position:absolute;top:12px;left:16px;color:${o.secondary};font:11px monospace;letter-spacing:1.5px}.feed{position:absolute;top:36px;left:16px;right:16px;bottom:12px;overflow:hidden;font:${o.type==='terminal'?o.fontSize:12}px/1.5 monospace;white-space:pre}.chat{position:absolute;inset:0;border:1px solid ${o.secondary};border-radius:16px;padding:18px;background:${o.background};display:flex;flex-direction:column;gap:12px}.chat[hidden]{display:none}.thread{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px}.bubble{font:18px/1.45 system-ui;max-width:90%;padding:10px 14px;border-radius:10px;white-space:pre-wrap}.user{align-self:flex-end;background:#263a51}.assistant{align-self:flex-start}.status{font:14px system-ui;color:${o.secondary};min-height:18px}.input{border:1px solid #51617b;border-radius:9px;min-height:48px;padding:12px;font:17px system-ui;white-space:pre-wrap}.chat-title{font:12px system-ui;letter-spacing:2px;color:${o.secondary}}`;
- const html=`<main><canvas aria-hidden="true"></canvas><div class="caption">${esc(o.type==='chat'?'':o.caption)}</div><div class="feed" aria-hidden="true"></div><section class="chat" hidden><div class="chat-title">${esc(o.caption||'ASSISTENTE')}</div><div class="thread" aria-live="polite"></div><div class="status"></div><div class="input" aria-label="Mensagem digitada"></div></section></main>`;
+export function motionHTML(value,colors,{still=false}={}){const o={...motionOptions(value,colors),...(still?{still:true}:{})};const css=`html,body{height:100%;background:${['chat','console'].includes(o.type)?'transparent':o.background};color:${o.foreground};overflow:hidden}main{height:100%;position:relative}canvas{position:absolute;inset:0;width:100%;height:100%}.caption{position:absolute;top:12px;left:16px;color:${o.secondary};font:11px monospace;letter-spacing:1.5px}.feed{position:absolute;top:36px;left:16px;right:16px;bottom:12px;overflow:hidden;font:${o.type==='terminal'?o.fontSize:12}px/1.5 monospace;white-space:pre}.chat{position:absolute;inset:0;border:1px solid ${o.secondary};border-radius:16px;padding:18px;background:${o.background};display:flex;flex-direction:column;gap:12px}.chat[hidden]{display:none}.thread{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px}.bubble{font:18px/1.45 system-ui;max-width:90%;padding:10px 14px;border-radius:10px;white-space:pre-wrap}.user{align-self:flex-end;background:#263a51}.assistant{align-self:flex-start}.status{font:14px system-ui;color:${o.secondary};min-height:18px}.input{border:1px solid #51617b;border-radius:9px;min-height:48px;padding:12px;font:17px system-ui;white-space:pre-wrap}.chat-title{font:12px system-ui;letter-spacing:2px;color:${o.secondary}}`+(o.type==='console'?`.caption{display:none}.con{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);max-height:100%;display:flex;flex-direction:column;border:1px solid ${o.line};border-radius:14px;overflow:hidden;background:${o.background};font-family:'IBM Plex Mono','Cascadia Mono',Consolas,'SF Mono',Menlo,monospace}.con-bar{flex:none;display:flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-bottom:1px solid ${o.line}}.con-bar i{width:13px;height:13px;border-radius:50%;opacity:.72}.con-bar i:nth-child(1){background:${o.alert}}.con-bar i:nth-child(2){background:${o.accent}}.con-bar i:nth-child(3){background:${o.secondary}}.con-cap{margin-left:10px;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:${o.muted};white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.con-n{margin-left:auto;font-size:13px;color:${o.muted}}.con-body{flex:1;min-height:calc(${o.fontSize}px * 1.6 * 6 + 36px);overflow:hidden;padding:18px 22px;font-size:${o.fontSize}px;line-height:1.6}.con-body p{margin:0 0 .4em;white-space:pre-wrap;word-break:break-all}.cmd{color:${o.foreground}}.pr{display:inline-block;width:.42em;height:.42em;margin:0 .85em .12em .1em;border-top:.13em solid ${o.accent};border-right:.13em solid ${o.accent};transform:rotate(45deg)}.cur{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:${o.accent};animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}.out{color:${o.muted}}.out.first{color:${o.secondary}}.arr{position:relative;display:inline-block;width:.8em;height:0;margin-right:.7em;vertical-align:.3em;border-top:.09em solid ${o.muted}}.arr::before{content:"";position:absolute;left:0;top:-.24em;width:.4em;height:.4em;border-left:.09em solid ${o.muted};border-bottom:.09em solid ${o.muted};transform:translateY(-.03em) rotate(45deg)}@media(prefers-reduced-motion:reduce){.cur{animation:none}}`:'');
+ const html=`<main><canvas aria-hidden="true"></canvas><div class="caption">${esc(o.type==='chat'?'':o.caption)}</div><div class="feed" aria-hidden="true"></div><section class="chat" hidden><div class="chat-title">${esc(o.caption||'ASSISTENTE')}</div><div class="thread" aria-live="polite"></div><div class="status"></div><div class="input" aria-label="Mensagem digitada"></div></section>${o.type==='console'?`<div class="con"><div class="con-bar"><i></i><i></i><i></i><span class="con-cap">${esc(o.caption)}</span><span class="con-n"></span></div><div class="con-body" aria-hidden="true"></div></div>`:''}</main>`;
  const doc=playgroundDocument({html,css,javascript:`${drawHologram.toString()}\n${drawTrace.toString()}\n(${scene.toString()})(${JSON.stringify(o)});`});return `<iframe data-motion="${o.type}" data-motion-manual="${o.manual}" data-motion-finish="${o.finish}" title="${esc(o.caption||'Detalhe animado')}" sandbox="allow-scripts" style="width:100%;height:100%;border:0" srcdoc="${esc(doc)}"></iframe>`;}

package/src/purpose.js

@@ -12,7 +12,7 @@ export const PURPOSES = {
   executiva: { label: "Executiva (antigo)", hint: "", maxWords: 40, dense: false, legacy: true },
 };
 
-const LAYOUT_WORDS = { onepage: 120, status: 90, solution: 140, calc: 90, algo: 60 }; // densos por natureza (uma página com tudo; exercício resolvido se revela aos poucos)
+const LAYOUT_WORDS = { onepage: 120, status: 90, solution: 140, calc: 90, algo: 60, calendar: 240 }; // densos por natureza (uma página com tudo; exercício resolvido se revela aos poucos)
 
 // Limite de palavras na tela de um slide: o do slide > o do deck > o do propósito (ou do layout, se maior) > 40
 export function wordLimit(s = {}, spec = {}, layout = s.layout) {