npm - squadrant - Versions diffs - 0.16.4 → 0.16.6 - Mend

squadrant 0.16.4 → 0.16.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/index.js +698 -309
package/dist/index.js.map +1 -1
package/dist/squadrantd.js +160 -38
package/dist/squadrantd.js.map +1 -1
package/package.json +1 -1
package/plugin/skills/captain-ops/SKILL.md +23 -0
package/plugin/skills/explainer-reel/SKILL.md +160 -0
package/plugin/skills/explainer-reel/assets/scene-kit.js +196 -0
package/plugin/skills/explainer-reel/assets/swimlane-preset.html +391 -0
package/plugin/skills/explainer-reel/assets/theme.css +99 -0
package/plugin/skills/explainer-reel/examples/jwt-reel.gif +0 -0
package/plugin/skills/explainer-reel/examples/jwt-reel.html +233 -0
package/plugin/skills/explainer-reel/references/component-library.md +75 -0
package/plugin/skills/explainer-reel/references/design-tokens.md +72 -0
package/plugin/skills/explainer-reel/references/interactive-mode.md +62 -0
package/plugin/skills/explainer-reel/scripts/README.md +30 -0
package/plugin/skills/explainer-reel/scripts/contact-sheet.sh +20 -0
package/plugin/skills/explainer-reel/scripts/render-gif.sh +44 -0
package/plugin/skills/explainer-reel/scripts/seek-shot.sh +24 -0

package/plugin/skills/explainer-reel/assets/swimlane-preset.html ADDED Viewed

@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+<!--
+  explainer-reel "swimlane band system-flow" preset — mode=interactive.
+  This is a GENERIC starting template, not a rendered deliverable: the mechanism (bands, grid,
+  SVG edges with offset-path flow-particles, click->detail panel, tabs) is reusable; the example
+  data below (a generic checkout flow) exists only to demonstrate the schema. Adapt it via
+  visual-explainer's generate-web-diagram command — this preset supplies the layout/motion
+  grammar so that command doesn't have to invent it from scratch. See ../references/
+  interactive-mode.md for the schema reference and composition instructions.
+  Structural pattern credit: this preset generalizes the swimlane mechanism first produced by the
+  visual-explainer skill (dev-console IBM Plex theme, CSS-grid bands + SVG offset-path particles);
+  explainer-reel packages it as a named, reusable preset on top.
+-->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Swimlane preset — system-flow (edit me)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg:#0e1116; --surface:#161c24; --surface2:#1b2330; --border:#263041; --border2:#31405a;
+    --text:#e6edf3; --dim:#93a1b0; --faint:#5b6b7d;
+    --lane-a:#4aa3ff; --lane-a2:#0f2740;
+    --lane-b:#35c46b; --lane-b2:#0e2a1c;
+    --shared:#c6d0da; --shared2:#232c39;
+    --db:#c99bff; --db2:#241733;
+    --store:#e3b341; --device:#8aa0b6;
+    --gold:#e3b341; --crit:#ff5d5d; --crit2:#2c1416;
+    --sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
+    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
+  }
+  *{box-sizing:border-box}
+  html,body{margin:0}
+  body{background:radial-gradient(1200px 600px at 70% -10%,#141b26,transparent),var(--bg);
+    color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+  .wrap{max-width:1340px;margin:0 auto;padding:26px 22px 80px}
+  header .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
+  h1{font-size:27px;margin:6px 0 4px;letter-spacing:-.02em;font-weight:700}
+  .lede{color:var(--dim);font-size:14px;max-width:820px;margin:0}
+  .lede b{color:var(--text)}
+  .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
+  .tab{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--dim);background:var(--surface);
+    border:1px solid var(--border);border-radius:999px;padding:8px 15px;cursor:pointer;transition:.18s;display:flex;align-items:center;gap:8px}
+  .tab:hover{border-color:var(--border2);color:var(--text)}
+  .tab.on{color:#0e1116;background:linear-gradient(180deg,#f0d68a,var(--gold));border-color:var(--gold)}
+  .tab .n{font-family:var(--mono);font-size:11px;opacity:.7}
+  .bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px;color:var(--dim);font-size:12.5px}
+  .btn{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text);background:var(--surface2);
+    border:1px solid var(--border2);border-radius:8px;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}
+  .btn:hover{background:#232d3d;border-color:#3d4f6d}
+  .btn.play{color:#0e1116;background:linear-gradient(180deg,#5ab0ff,var(--lane-a));border-color:var(--lane-a)}
+  .seg{display:inline-flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden}
+  .seg button{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--dim);background:var(--surface);border:0;padding:7px 13px;cursor:pointer;transition:.15s}
+  .seg button.on{color:#0e1116}
+  .seg button.on.a{background:var(--lane-a)} .seg button.on.b{background:var(--lane-b)}
+  .seg.hide{display:none}
+  .leg{display:flex;gap:13px;flex-wrap:wrap;margin-left:auto}
+  .leg span{display:inline-flex;align-items:center;gap:6px}
+  .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
+  .flowtitle{font-size:15px;font-weight:600;margin:16px 2px 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+  .flowtitle .why{font-weight:400;color:var(--dim);font-size:13px}
+  .stagewrap{position:relative;margin-top:12px;border:1px solid var(--border);border-radius:16px;
+    background:linear-gradient(180deg,#12181f,#0f141b);overflow:hidden}
+  .stage{position:relative;padding:16px 18px}
+  .bands{position:absolute;inset:16px 18px;z-index:0;pointer-events:none}
+  .band{position:absolute;left:0;right:0;border-radius:10px;border:1px solid transparent}
+  .bandlabel{position:absolute;left:8px;top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
+    text-transform:uppercase;display:flex;align-items:center;gap:7px;color:var(--dim)}
+  .bandlabel .ic{font-size:13px}
+  svg.edges{position:absolute;inset:16px 18px;z-index:1;pointer-events:none;overflow:visible}
+  .grid{position:relative;display:grid;gap:30px 46px;z-index:2}
+  .node{position:relative;border-radius:12px;padding:11px 13px;border:1px solid var(--border2);
+    background:var(--surface);cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s,opacity .16s;
+    min-width:0;align-self:center;max-width:230px}
+  .node:hover{transform:translateY(-2px)}
+  .node .lane{position:absolute;top:-1px;left:-1px;bottom:-1px;width:4px;border-radius:12px 0 0 12px}
+  .node .step{position:absolute;top:-9px;left:-9px;width:22px;height:22px;border-radius:50%;
+    font-family:var(--mono);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;
+    background:#0e1116;border:1px solid var(--border2);color:var(--dim);z-index:3}
+  .node .t{font-weight:600;font-size:12.5px;line-height:1.28;display:block}
+  .node .s{font-family:var(--mono);font-size:10px;color:var(--dim);display:block;margin-top:3px;word-break:break-word;line-height:1.4}
+  .node .badge{position:absolute;top:8px;right:9px;font-family:var(--mono);font-size:9px;padding:1px 5px;border-radius:4px}
+  .node .svc{display:inline-block;font-family:var(--mono);font-size:9px;margin-top:6px;padding:1px 6px;border-radius:5px;
+    color:var(--store);background:color-mix(in srgb,var(--store) 14%,transparent);border:1px solid color-mix(in srgb,var(--store) 32%,transparent)}
+  .node.crit .svc{color:var(--crit);background:var(--crit2);border-color:#5c2a2a}
+  .node.a{--c:var(--lane-a)} .node.b{--c:var(--lane-b)} .node.shared{--c:var(--shared)} .node.db{--c:var(--db)} .node.crit{--c:var(--crit)} .node.store{--c:var(--store)}
+  .node .lane{background:var(--c)}
+  .node.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 10px 28px -12px var(--c)}
+  .node.dim{opacity:.3}
+  .node.crit{background:var(--crit2);border-color:#5c2a2a}
+  .node.crit .t{color:#ffd0d0}
+  .node.db{background:var(--db2);border-color:#3d2657}
+  .badge.a{background:var(--lane-a2);color:var(--lane-a)} .badge.b{background:var(--lane-b2);color:var(--lane-b)}
+  .badge.warn{background:var(--crit2);color:var(--crit)} .badge.ok{background:var(--lane-b2);color:var(--lane-b)}
+  .node.pulse .lane{animation:lane 1.6s ease-in-out infinite}
+  @keyframes lane{0%,100%{opacity:.5}50%{opacity:1}}
+  .pt{position:absolute;width:7px;height:7px;border-radius:50%;z-index:1;
+    filter:drop-shadow(0 0 5px currentColor);will-change:offset-distance}
+  @keyframes flow{from{offset-distance:0%}to{offset-distance:100%}}
+  .elabel{font-family:var(--mono);font-size:9.5px;fill:var(--dim)}
+  .elabbg{fill:#0f141b;opacity:.9}
+  .detail{margin-top:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);
+    padding:15px 17px;min-height:78px}
+  .detail.empty{color:var(--faint);font-size:13px;display:flex;align-items:center;gap:9px}
+  .detail .dh{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap}
+  .detail .dh .dt{font-size:15px;font-weight:700}
+  .detail .sysbadge{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:5px;border:1px solid currentColor}
+  .detail .path{font-family:var(--mono);font-size:11.5px;color:#a5d6ff;background:#0b1a2b;padding:2px 8px;border-radius:5px}
+  .detail p{margin:6px 0 0;font-size:13px;color:#cdd6e0;line-height:1.55}
+  .detail .writes{font-family:var(--mono);font-size:11px;color:var(--lane-b);margin-top:8px;display:block}
+  .detail .flag{margin-top:9px;font-size:12.5px;color:#ffc0c0;background:var(--crit2);border:1px solid #5c2a2a;border-radius:8px;padding:8px 11px}
+  .detail .flag b{color:var(--crit)}
+  .foot{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:20px;text-align:center}
+  @media (prefers-reduced-motion: reduce){.pt{display:none!important}.node.pulse .lane{animation:none}}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <div class="k">example · swimlane preset</div>
+    <h1>Checkout — who calls whom</h1>
+    <p class="lede">Nodes sit in the <b>system</b> that runs them — the browser, the payment provider, the order API, the database.
+    An arrow that <b>jumps a band is a network hop</b> — its label says what's sent. Click a node for detail.</p>
+  </header>
+  <div class="tabs" id="tabs"></div>
+  <div class="bar">
+    <button class="btn play" id="play">&#9654; Animate flow</button>
+    <button class="btn" id="reset">&#8634; Reset</button>
+    <div class="seg" id="platseg">
+      <button data-p="card" class="a">Card</button>
+      <button data-p="wallet" class="b">Wallet</button>
+    </div>
+    <div class="leg">
+      <span><i class="sw" style="background:var(--lane-a)"></i>Card path</span>
+      <span><i class="sw" style="background:var(--lane-b)"></i>Wallet path</span>
+      <span><i class="sw" style="background:var(--store)"></i>Provider</span>
+      <span><i class="sw" style="background:var(--crit)"></i>Gotcha</span>
+    </div>
+  </div>
+  <div class="flowtitle" id="ftitle"></div>
+  <div class="stagewrap">
+    <div class="stage">
+      <div class="bands" id="bands"></div>
+      <svg class="edges" id="edges"></svg>
+      <div class="grid" id="grid"></div>
+    </div>
+  </div>
+  <div class="detail empty" id="detail">&#9684; Click a node — the panel shows which system runs it and what crosses the wire.</div>
+  <div class="foot">explainer-reel · mode=interactive · swimlane preset — replace BANDS/FLOWS with your own system/flow data</div>
+</div>
+<script>
+// ---- REPLACE EVERYTHING BELOW WITH YOUR OWN BANDS / FLOWS ----
+// BANDS: the horizontal swimlanes, one per system. Order = render order top-to-bottom.
+const BANDS=[
+  {id:'browser',label:'Browser · device',ic:'💻',col:'var(--device)'},
+  {id:'provider',label:'Payment provider',ic:'☁️',col:'var(--store)'},
+  {id:'api',    label:'Order API',ic:'🖥️',col:'var(--lane-a)'},
+  {id:'db',     label:'Database',ic:'🗄️',col:'var(--db)'}
+];
+const LANECOL={a:'var(--lane-a)',b:'var(--lane-b)',shared:'var(--shared)',db:'var(--db)',crit:'var(--crit)',store:'var(--store)'};
+// n(sys, lane, col, title, subtitle, extras) — extras: {id, detail, path, writes, flag, badge, ok, svc}
+function n(sys,lane,col,t,s,x={}){return Object.assign({sys,lane,col,t,s},x);}
+const FLOWS={
+  checkout:{ title:"Checkout", why:"card vs. wallet — same API, different provider hop", plat:true,
+    card:{ nodes:[
+      n('browser','a',1,'Tap "Pay"','CheckoutView -> PaymentClient.charge()',{id:'d',svc:'Web · Checkout UI'}),
+      n('provider','store',2,'Provider charges card, returns token','Card Processor API',{id:'s1',svc:'Provider · Cards'}),
+      n('api','a',3,'POST /order/confirm','order.service.ts · confirmPayment',{id:'o1',path:'POST /order/confirm'}),
+      n('api','shared',4,'markPaid() + emit receipt','order.service.ts',{id:'o2',writes:'writes Order + Payment',ok:true}),
+      n('db','db',5,'Order · Payment','Postgres',{id:'db',detail:'Order marked paid; receipt emitted.'})
+    ], edges:[['d','s1','a','charge card'],['s1','o1','a','payment token (via app)'],['o1','o2','a','confirm'],['o2','db','a','write']]},
+    wallet:{ nodes:[
+      n('browser','b',1,'Tap "Pay with wallet"','CheckoutView -> WalletClient.charge()',{id:'d',svc:'Web · Checkout UI'}),
+      n('provider','store',2,'Wallet provider authorizes, returns receipt id','Wallet API',{id:'s1',svc:'Provider · Wallet'}),
+      n('api','b',3,'POST /order/confirm-wallet','order.service.ts · confirmWalletPayment',{id:'o1',path:'POST /order/confirm-wallet'}),
+      n('api','crit',4,'markPaid() — no idempotency key','order.service.ts',{id:'o2',flag:'The wallet path does not check the provider receipt id before writing. A retried webhook can double-charge the order record — the card path guards this with an idempotency key, the wallet path doesn\'t (yet).'}),
+      n('db','db',5,'Order (possible duplicate)','Postgres',{id:'db'})
+    ], edges:[['d','s1','b','authorize'],['s1','o1','b','receipt id (via app)'],['o1','o2','b','confirm'],['o2','db','crit','write (unguarded)']]}
+  }
+};
+const ORDER=[["checkout","Checkout"]];
+let cur="checkout", plat="card";
+const tabs=document.getElementById('tabs');
+ORDER.forEach(([id,label],i)=>{
+  const b=document.createElement('button');
+  b.className='tab'+(id===cur?' on':''); b.dataset.id=id;
+  b.innerHTML=`<span class="n">${String.fromCharCode(65+i)}</span>${label}`;
+  b.onclick=()=>{cur=id;render();};
+  tabs.appendChild(b);
+});
+const platseg=document.getElementById('platseg');
+platseg.querySelectorAll('button').forEach(b=>b.onclick=()=>{plat=b.dataset.p;render();});
+const grid=document.getElementById('grid'), svg=document.getElementById('edges'),
+      bandsEl=document.getElementById('bands'), detail=document.getElementById('detail'),
+      ftitle=document.getElementById('ftitle');
+function variant(){const f=FLOWS[cur];return f.plat?f[plat]:f.single;}
+function render(){
+  [...tabs.children].forEach(t=>t.classList.toggle('on',t.dataset.id===cur));
+  const f=FLOWS[cur];
+  platseg.classList.toggle('hide',!f.plat);
+  platseg.querySelectorAll('button').forEach(b=>b.classList.toggle('on',b.dataset.p===plat));
+  ftitle.innerHTML=`${f.title} <span class="why">— ${f.why}</span>`;
+  const v=variant();
+  const cols=[...new Set(v.nodes.map(n=>n.col))].sort((a,b)=>a-b);
+  const colMap={}; cols.forEach((c,i)=>colMap[c]=i+1);
+  const usedBands=[...new Set(v.nodes.map(n=>n.sys))];
+  const bandOrder=BANDS.filter(b=>usedBands.includes(b.id));
+  const rowMap={}; bandOrder.forEach((b,i)=>rowMap[b.id]=i+1);
+  grid.style.gridTemplateColumns=`repeat(${cols.length},minmax(150px,1fr))`;
+  grid.style.gridTemplateRows=`repeat(${bandOrder.length},minmax(74px,auto))`;
+  grid.innerHTML='';
+  v.nodes.forEach(nd=>{
+    const el=document.createElement('div');
+    el.className='node '+nd.lane+(nd.flag?' pulse':'');
+    el.style.gridColumn=colMap[nd.col]; el.style.gridRow=rowMap[nd.sys];
+    el.dataset.id=nd.id;
+    const badge=nd.badge?`<span class="badge ${nd.badge[0]}">${nd.badge[1]}</span>`
+      :(nd.ok?`<span class="badge ok">ok</span>`:(nd.flag?`<span class="badge warn">!</span>`:''));
+    const st=stepIndex(v,nd.id);
+    el.innerHTML=`<span class="lane"></span>${st!==''?`<span class="step">${st}</span>`:''}${badge}
+      <span class="t">${nd.t}</span><span class="s">${nd.s}</span>${nd.svc?`<span class="svc">${nd.svc}</span>`:''}`;
+    el.onclick=()=>select(nd.id);
+    grid.appendChild(el);
+  });
+  requestAnimationFrame(()=>{drawBands(bandOrder);drawEdges(v);});
+  detail.className='detail empty';
+  detail.innerHTML='&#9684; Click a node — the panel shows which system runs it and what crosses the wire.';
+}
+function drawBands(bandOrder){
+  bandsEl.innerHTML='';
+  const host=bandsEl.getBoundingClientRect();
+  const rows={};
+  [...grid.children].forEach(el=>{
+    const r=el.style.gridRow, rr=el.getBoundingClientRect();
+    (rows[r]=rows[r]||[]).push(rr);
+  });
+  Object.keys(rows).forEach(r=>{
+    const rr=rows[r]; const top=Math.min(...rr.map(x=>x.top))-host.top-8;
+    const bot=Math.max(...rr.map(x=>x.bottom))-host.top+8;
+    const b=bandOrder[+r-1];
+    const div=document.createElement('div'); div.className='band';
+    div.style.top=top+'px'; div.style.height=(bot-top)+'px';
+    div.style.background=`color-mix(in srgb, ${b.col} 7%, transparent)`;
+    div.style.borderColor=`color-mix(in srgb, ${b.col} 22%, transparent)`;
+    const lbl=document.createElement('div'); lbl.className='bandlabel';
+    lbl.style.color=b.col; lbl.innerHTML=`<span class="ic">${b.ic}</span>${b.label}`;
+    div.appendChild(lbl); bandsEl.appendChild(div);
+  });
+}
+function stepIndex(v,id){
+  const seen=new Set(),order=[];
+  const starts=v.nodes.filter(n=>!v.edges.some(e=>e[1]===n.id)).map(n=>n.id);
+  const adj={}; v.edges.forEach(([a,b])=>{(adj[a]=adj[a]||[]).push(b);});
+  starts.forEach(s=>{let q=[s];while(q.length){const x=q.shift();if(seen.has(x))continue;seen.add(x);order.push(x);(adj[x]||[]).forEach(y=>q.push(y));}});
+  const i=order.indexOf(id);return i<0?'':i+1;
+}
+function anchor(el,side){
+  const host=svg.getBoundingClientRect(), r=el.getBoundingClientRect();
+  return {x:(side==='r'?r.right:r.left)-host.left, y:r.top-host.top+r.height/2,
+          t:r.top-host.top, b:r.bottom-host.top, cx:r.left-host.left+r.width/2};
+}
+let particles=[];
+function clearParticles(){particles.forEach(p=>p.remove());particles=[];}
+function drawEdges(v){
+  svg.removeAttribute('viewBox');
+  svg.innerHTML=''; clearParticles();
+  v.edges.forEach(([a,b,style,label],idx)=>{
+    const ea=grid.querySelector(`[data-id="${a}"]`), eb=grid.querySelector(`[data-id="${b}"]`);
+    if(!ea||!eb)return;
+    const ra=ea.getBoundingClientRect(), rb=eb.getBoundingClientRect();
+    let p1,p2,d;
+    if(rb.left>=ra.right-4){
+      p1=anchor(ea,'r'); p2=anchor(eb,'l');
+      const dx=Math.max(34,(p2.x-p1.x)*0.5);
+      d=`M ${p1.x} ${p1.y} C ${p1.x+dx} ${p1.y}, ${p2.x-dx} ${p2.y}, ${p2.x} ${p2.y}`;
+    } else {
+      const A=anchor(ea,'r'),B=anchor(eb,'r');
+      const x=A.cx; const y1=(A.b<B.t)?A.b:A.t, y2=(A.b<B.t)?B.t:B.b;
+      d=`M ${x} ${y1} C ${x} ${(y1+y2)/2}, ${x} ${(y1+y2)/2}, ${x} ${y2}`;
+      p1={x,y:y1};p2={x,y:y2};
+    }
+    const col=LANECOL[style];
+    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
+    path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('stroke',col);
+    path.setAttribute('stroke-width','2');path.setAttribute('stroke-opacity','.5');path.setAttribute('data-edge',a+'>'+b);
+    if(style==='crit')path.setAttribute('stroke-dasharray','6 5');
+    svg.appendChild(path);
+    const ah=document.createElementNS('http://www.w3.org/2000/svg','path');
+    ah.setAttribute('d',`M ${p2.x-8} ${p2.y-4} L ${p2.x} ${p2.y} L ${p2.x-8} ${p2.y+4}`);
+    ah.setAttribute('fill','none');ah.setAttribute('stroke',col);ah.setAttribute('stroke-width','2');ah.setAttribute('stroke-opacity','.75');
+    svg.appendChild(ah);
+    if(label){
+      const mx=(p1.x+p2.x)/2, my=(p1.y+p2.y)/2;
+      const tw=label.length*5.6+8;
+      const bg=document.createElementNS('http://www.w3.org/2000/svg','rect');
+      bg.setAttribute('x',mx-tw/2);bg.setAttribute('y',my-9);bg.setAttribute('width',tw);bg.setAttribute('height',15);
+      bg.setAttribute('rx',4);bg.setAttribute('class','elabbg');svg.appendChild(bg);
+      const tx=document.createElementNS('http://www.w3.org/2000/svg','text');
+      tx.setAttribute('x',mx);tx.setAttribute('y',my+2);tx.setAttribute('text-anchor','middle');
+      tx.setAttribute('class','elabel');tx.textContent=label;svg.appendChild(tx);
+    }
+    spawnParticles(d,col,idx,style);
+  });
+}
+function spawnParticles(d,col,idx,style){
+  const stage=svg.parentElement, N=style==='crit'?1:2;
+  for(let k=0;k<N;k++){
+    const dot=document.createElement('div');dot.className='pt';dot.style.color=col;dot.style.background=col;
+    dot.style.offsetPath=`path('${d}')`;
+    dot.style.animation=`flow ${2.6+(idx%3)*0.3}s linear ${(idx*0.3)+(k*1.2)}s infinite`;
+    if(style==='crit')dot.style.opacity='.65';
+    stage.appendChild(dot);particles.push(dot);
+  }
+}
+function select(id){
+  const v=variant(); const nd=v.nodes.find(x=>x.id===id); if(!nd)return;
+  [...grid.children].forEach(el=>{
+    const nid=el.dataset.id;
+    const connected=nid===id||v.edges.some(e=>(e[0]===id&&e[1]===nid)||(e[1]===id&&e[0]===nid));
+    el.classList.toggle('on',nid===id); el.classList.toggle('dim',!connected);
+  });
+  svg.querySelectorAll('path[data-edge]').forEach(p=>{
+    const [a,b]=p.getAttribute('data-edge').split('>');
+    p.setAttribute('stroke-opacity',(a===id||b===id)?'1':'.14');
+  });
+  const band=BANDS.find(b=>b.id===nd.sys);
+  detail.className='detail'; detail.style.borderColor=LANECOL[nd.lane];
+  detail.innerHTML=`<div class="dh"><span class="dt">${nd.t}</span>
+    <span class="sysbadge" style="color:${band.col}">${band.ic} ${band.label}</span>
+    ${nd.path?`<span class="path">${nd.path}</span>`:''}</div>
+    <p>${nd.detail||nd.s}</p>
+    ${nd.writes?`<span class="writes">&#9656; ${nd.writes}</span>`:''}
+    ${nd.flag?`<div class="flag">&#9888; ${nd.flag}</div>`:''}`;
+}
+let playTimer=null;
+function play(){
+  reset(); const v=variant();
+  const ordered=[...v.nodes].map(n=>({n,i:stepIndex(v,n.id)})).filter(o=>o.i!=='').sort((a,b)=>a.i-b.i);
+  let k=0; document.getElementById('play').textContent='● Playing…';
+  playTimer=setInterval(()=>{
+    if(k>=ordered.length){clearInterval(playTimer);document.getElementById('play').textContent='▶ Animate flow';return;}
+    select(ordered[k].n.id);k++;
+  },900);
+}
+function reset(){
+  if(playTimer)clearInterval(playTimer);
+  document.getElementById('play').textContent='▶ Animate flow';
+  [...grid.children].forEach(el=>el.classList.remove('on','dim'));
+  svg.querySelectorAll('path[data-edge]').forEach(p=>p.setAttribute('stroke-opacity','.5'));
+  detail.className='detail empty';detail.style.borderColor='';
+  detail.innerHTML='&#9684; Click a node — the panel shows which system runs it and what crosses the wire.';
+}
+document.getElementById('play').onclick=play;
+document.getElementById('reset').onclick=reset;
+function redraw(){const v=variant();const bo=BANDS.filter(b=>[...new Set(v.nodes.map(n=>n.sys))].includes(b.id));drawBands(bo);drawEdges(v);}
+let rt;window.addEventListener('resize',()=>{clearTimeout(rt);rt=setTimeout(redraw,120);});
+new ResizeObserver(()=>{clearTimeout(rt);rt=setTimeout(redraw,60);}).observe(grid);
+if(document.fonts&&document.fonts.ready){document.fonts.ready.then(redraw);}
+render();
+</script>
+</body>
+</html>

package/plugin/skills/explainer-reel/assets/theme.css ADDED Viewed

@@ -0,0 +1,99 @@
+/*
+  explainer-reel dark-neon theme — design tokens for the style-pack.
+  Decoded from @duchminh_nguyen's reel series (see ../references/design-tokens.md).
+  Copy this whole file inline into a scene's <style> block — the deliverable is one
+  self-contained .html file, so don't leave this as an external stylesheet reference.
+*/
+:root {
+  /* -- surface -- */
+  --er-bg: #060608;
+  --er-vignette: radial-gradient(ellipse at 50% 45%, #1a0f18 0%, #060608 65%);
+  /* -- neon accent palette (meaning is fixed, never remap mid-piece) -- */
+  --er-client: #d9b843;   /* yellow  = client / requester */
+  --er-server: #d454e0;   /* magenta = server / authority */
+  --er-ok: #3ddc84;       /* green   = verified / hit / success */
+  --er-cache: #8b6bff;    /* purple  = cache / redis / storage tier */
+  --er-danger: #ff5a3c;   /* red-orange = danger / counter / tamper / title */
+  /* -- monoline -- */
+  --er-line: #aeb4bd;     /* default stroke, unaccented (funnel, connectors) */
+  --er-line-dim: #4a4e56; /* dimmed/inactive context stroke */
+  --er-stroke-w: 1.5;
+  /* -- glow -- */
+  --er-glow-blur: 4px;
+  /* -- type -- */
+  --er-font-title: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
+  --er-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+html, body { margin: 0; background: var(--er-bg); }
+.er-stage {
+  background: var(--er-bg);
+  background-image: var(--er-vignette);
+  color: var(--er-line);
+  font-family: var(--er-font-mono);
+  position: relative;
+  overflow: hidden;
+}
+/* -- chrome: handle / title / footer -- */
+.er-handle {
+  text-align: center;
+  font-size: 11px;
+  letter-spacing: 0.15em;
+  color: var(--er-line-dim);
+}
+.er-title {
+  text-align: center;
+  font-family: var(--er-font-title);
+  font-weight: 800;
+  font-size: 34px;
+  letter-spacing: 0.02em;
+  color: var(--er-danger);
+  text-shadow: 0 0 10px color-mix(in srgb, var(--er-danger) 55%, transparent);
+  margin: 2px 0 10px;
+}
+.er-title-rule {
+  border: none;
+  border-top: 1px solid var(--er-line-dim);
+  opacity: 0.4;
+  margin: 0 0 18px;
+}
+.er-footer {
+  position: absolute;
+  left: 0; right: 0; bottom: 22px;
+  text-align: center;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  color: var(--er-line-dim);
+  text-transform: uppercase;
+}
+/* -- svg monoline defaults -- */
+.er-svg-root { display: block; }
+.er-mono {
+  fill: none;
+  stroke: var(--er-line);
+  stroke-width: var(--er-stroke-w);
+}
+.er-dim { stroke: var(--er-line-dim) !important; opacity: 0.5; }
+/* glow filter is defined per-scene via <filter id="er-glow"> (feGaussianBlur),
+   applied with filter: url(#er-glow) on accent strokes/badges when they're "live" */
+.er-glow { filter: url(#er-glow); }
+/* -- reusable node/component classes (see component-library.md) -- */
+.er-panel-rect { fill: #0b0c10; stroke-width: var(--er-stroke-w); rx: 6; }
+.er-panel-title { font-size: 10px; letter-spacing: 0.08em; }
+.er-panel-line { stroke: var(--er-line-dim); stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
+.er-panel-dot { r: 2.5; }
+.er-pill-rect { fill: #0b0c10; stroke: var(--er-line); stroke-width: var(--er-stroke-w); rx: 4; }
+.er-pill-text { font-size: 9px; fill: var(--er-line); font-family: var(--er-font-mono); }
+.er-badge-hex { fill: none; stroke-width: var(--er-stroke-w); }
+.er-badge-label { font-size: 10px; letter-spacing: 0.1em; font-family: var(--er-font-mono); }

package/plugin/skills/explainer-reel/examples/jwt-reel.gif ADDED Viewed

Binary file