HistoryHelp:Canvas

version 11current 2026-10-27 16:22 UTC · razie via designer-219designer View Text
version 10full copy 2026-10-27 16:14 UTC · razie via designer-219designer View Text

What version 11 changed
---
description: How the canvas box works — everything is a prompt: what d2 does at once, what goes to an agent, and the magic words (@, #, /, $, the canvas words).
-tags: help, canvas, wip
+tags: help, canvas
order: 44
brief: The box on your home: type what you want. d2 does the canvas words and @ # / at once; anything else goes to your agent as a chat.
…
version 9diff 2026-10-27 16:13 UTC · razie via designer-219designer View Text

What version 10 changed
…
.mf .m{max-width:85%;border:1px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--paper);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.mf .m.me{align-self:flex-end}.mf .m.on{opacity:1;transform:none}.mf .m b{font-weight:600}
+.rp{margin:10px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:12px var(--body,system-ui,sans-serif);padding:3px 12px;cursor:pointer}.rp:hover{background:var(--card)}
</style>
<div class="mf"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div>
<div class="fl" id="fl"><span class="ic">💬</span><div class="hd">designer · chat</div><div class="ms"><div class="m me" id="m1">make the lessons page wider</div><div class="m" id="m2"><b>designer</b> · on it: widening Lessons now</div><div class="m me" id="m3">and center the title</div></div></div></div>
+<button type="button" class="rp" id="rp">▶ Play</button>
<script>
+const rp=document.getElementById('rp');const gate=()=>new Promise(r=>{rp.disabled=false;rp.onclick=()=>{rp.disabled=true;rp.textContent='↻ Replay';r()}});(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),fl=$('fl'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),fl=$('fl'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^@(\w+)/,'<span class="at">@$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+(async()=>{show('');for(;;){await gate();show('');go.textContent='Go';fl.className='fl';['m1','m2','m3'].forEach(i=>$(i).classList.remove('on'));await sleep(700);
-(async()=>{for(;;){show('');go.textContent='Go';fl.className='fl';['m1','m2','m3'].forEach(i=>$(i).classList.remove('on'));await sleep(700);
const t='@designer make the lessons page wider';for(let i=1;i<=t.length;i++){show(t.slice(0,i));if(i===10)go.textContent='Ask the designer';await sleep(48)}
await sleep(450);go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
…
.mi .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mi .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
.mi .th-sub{font-size:12px;color:var(--soft);margin-top:6px}
+.rp{margin:10px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:12px var(--body,system-ui,sans-serif);padding:3px 12px;cursor:pointer}.rp:hover{background:var(--card)}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<button type="button" class="rp" id="rp">▶ Play</button>
<script>
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const rp=document.getElementById('rp');const gate=()=>new Promise(r=>{rp.disabled=false;rp.onclick=()=>{rp.disabled=true;rp.textContent='↻ Replay';r()}});(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const S={"text": "#focus the spring recital", "go": "Create focus", "goAt": 6, "done": "<div class=\"th-card foc\"><span class=\"th-fmark\">FOCUS</span><p class=\"th-title\">the spring recital</p><div class=\"th-meta\"><span style=\"color:var(--soft)\">0 in it</span><span class=\"th-date\">just now</span></div></div><div class=\"th-sub\">made and opened: add thoughts and pages to it</div>", "card": true};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{show('');for(;;){await gate();show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
-(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
…
.mi .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mi .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
.mi .th-sub{font-size:12px;color:var(--soft);margin-top:6px}
+.rp{margin:10px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:12px var(--body,system-ui,sans-serif);padding:3px 12px;cursor:pointer}.rp:hover{background:var(--card)}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<button type="button" class="rp" id="rp">▶ Play</button>
<script>
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const rp=document.getElementById('rp');const gate=()=>new Promise(r=>{rp.disabled=false;rp.onclick=()=>{rp.disabled=true;rp.textContent='↻ Replay';r()}});(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const S={"text": "#thought call the venue on Monday", "go": "Save thought", "goAt": 8, "done": "<div class=\"th-card\"><p class=\"th-title\">call the venue on Monday</p><div class=\"th-meta\"><span class=\"th-date\">just now</span></div></div><div class=\"th-sub\">saved to your Thoughts</div>", "card": true};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
-(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+(async()=>{show('');for(;;){await gate();show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
…
.mb .th-ansp{margin:6px 0 0;padding-left:8px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.45}
.mb .stp{font-size:12px;color:var(--soft);margin-top:6px;min-height:18px}
+.rp{margin:10px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:12px var(--body,system-ui,sans-serif);padding:3px 12px;cursor:pointer}.rp:hover{background:var(--card)}
</style>
<div class="mb"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div>
<div class="th-card" id="c"><p class="th-title">the Go button does nothing on my iPad</p><div class="th-meta" id="mt"></div><div id="ex"></div></div>
<div class="stp" id="stp"></div></div>
+<button type="button" class="rp" id="rp">▶ Play</button>
<script>
+const rp=document.getElementById('rp');const gate=()=>new Promise(r=>{rp.disabled=false;rp.onclick=()=>{rp.disabled=true;rp.textContent='↻ Replay';r()}});(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),c=$('c'),mt=$('mt'),ex=$('ex'),stp=$('stp'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),c=$('c'),mt=$('mt'),ex=$('ex'),stp=$('stp'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^(#\w+)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const state=(cls,meta,extra,step)=>{c.className='th-card on '+cls;mt.innerHTML=meta;ex.innerHTML=extra||'';stp.textContent=step};
+(async()=>{show('');for(;;){await gate();show('');go.textContent='Go';c.className='th-card';stp.textContent='';await sleep(700);
-(async()=>{for(;;){show('');go.textContent='Go';c.className='th-card';stp.textContent='';await sleep(700);
const t='#bug the Go button does nothing on my iPad';for(let i=1;i<=t.length;i++){show(t.slice(0,i));if(i===4)go.textContent='Save thought';await sleep(42)}
await sleep(400);show('');go.textContent='Go';
…
.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+.rp{margin:10px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:12px var(--body,system-ui,sans-serif);padding:3px 12px;cursor:pointer}.rp:hover{background:var(--card)}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<button type="button" class="rp" id="rp">▶ Play</button>
<script>
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const rp=document.getElementById('rp');const gate=()=>new Promise(r=>{rp.disabled=false;rp.onclick=()=>{rp.disabled=true;rp.textContent='↻ Replay';r()}});(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const S={"text": "/pi", "ms": 260, "menus": {"1": [[["/thoughts", "your notes"], ["/pipeline", "the work"], ["/agents", "who is up"], ["/toolbox", "everything"]], -1], "2": [[["/pipeline", "the work"]], 0], "3": [[["/pipeline", "the work"]], 0]}, "done": "<b>d2</b> \u00b7 the Pipeline opens on the stage"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{show('');for(;;){await gate();show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
-(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
…
.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+.rp{margin:10px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:12px var(--body,system-ui,sans-serif);padding:3px 12px;cursor:pointer}.rp:hover{background:var(--card)}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<button type="button" class="rp" id="rp">▶ Play</button>
<script>
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const rp=document.getElementById('rp');const gate=()=>new Promise(r=>{rp.disabled=false;rp.onclick=()=>{rp.disabled=true;rp.textContent='↻ Replay';r()}});(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const S={"text": "$ pub", "ms": 220, "menus": {"2": [[["topic.publish", "publish, put live"], ["topic.update", "update, fix"], ["topic.tag", "tag"], ["item.send", "send"]], -1], "5": [[["topic.publish", "publish, put live"]], 0]}, "done": "<b>d2</b> \u00b7 <code>$ topic.publish(</code> is in the box: name the topic and Go"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
-(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+(async()=>{show('');for(;;){await gate();show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
…
version 8diff 2026-10-27 16:07 UTC · razie via designer-219designer View Text

What version 9 changed
…
```embedhtml
<style>
-.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
-.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
-.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
-.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
-.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mb{--th-focus:#1f5bb5;--th-chat:#2f6fdc;--th-done:#2e8b57;--th-sent:var(--soft,#6b6a66);--th-amber:#d99a00;font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:560px;min-height:230px;margin:2px 0 6px}
+@media (prefers-color-scheme:dark){.mb{--th-focus:#7aa7f0;--th-chat:#7aa7f0;--th-done:#6cc08a}}
+.mb .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
-.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
-.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
-.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
-.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
-.mi{--th-focus:#1f5bb5;--th-done:#2e8b57}@media (prefers-color-scheme:dark){.mi{--th-focus:#7aa7f0;--th-done:#6cc08a}}
-.mi .msg.cw{border:0;background:none;padding:0;max-width:340px;margin-left:0}
-.mi .th-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:4px}
+.mb .q{flex:1;min-height:20px;white-space:pre}.mb .q .ph{color:var(--soft)}.mb .q .at{font-weight:600}
+.mb .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mbb 1s steps(1) infinite}@keyframes mbb{50%{opacity:0}}
+.mb .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none}
+.mb .th-card{margin-top:10px;max-width:380px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s,box-shadow .4s}
+.mb .th-card.on{opacity:1;transform:none}
+.mb .th-card.sent{box-shadow:inset 4px 0 0 var(--th-amber)}.mb .th-card.working{box-shadow:inset 4px 0 0 var(--th-chat)}.mb .th-card.done{box-shadow:inset 4px 0 0 var(--th-done)}
+.mb .th-title{font-size:15px;font-weight:600;margin:0;line-height:1.35}
+.mb .th-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:2px;font-size:13px}
+.mb .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mb .th-tl.t-ai-done{color:var(--th-done)}
+.mb .th-st{border:1px solid currentColor;border-radius:999px;padding:0 7px;font-size:12px}
+.mb .t-sent{color:var(--th-sent);border-style:dashed}.mb .t-working{color:var(--th-chat)}.mb .t-done{color:var(--th-done);font-weight:600}
+.mb .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
+.mb .th-wait{margin:2px 0 0;color:var(--ink);font-weight:600;font-size:13px}
+.mb .th-ansp{margin:6px 0 0;padding-left:8px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.45}
+.mb .stp{font-size:12px;color:var(--soft);margin-top:6px;min-height:18px}
-.mi .th-card.foc{box-shadow:inset 3px 0 0 var(--th-focus)}
-.mi .th-fmark{font:600 11px var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--th-focus)}
-.mi .th-title{font-size:15px;font-weight:600;margin:0;line-height:1.35}
-.mi .th-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px;font-size:13px}
-.mi .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mi .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
-.mi .th-sub{font-size:12px;color:var(--soft);margin-top:6px}
</style>
+<div class="mb"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div>
+<div class="th-card" id="c"><p class="th-title">the Go button does nothing on my iPad</p><div class="th-meta" id="mt"></div><div id="ex"></div></div>
-<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<div class="stp" id="stp"></div></div>
<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),c=$('c'),mt=$('mt'),ex=$('ex'),stp=$('stp'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^(#\w+)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const state=(cls,meta,extra,step)=>{c.className='th-card on '+cls;mt.innerHTML=meta;ex.innerHTML=extra||'';stp.textContent=step};
+(async()=>{for(;;){show('');go.textContent='Go';c.className='th-card';stp.textContent='';await sleep(700);
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
-const S={"text": "#bug the Go button does nothing on my iPad", "go": "Save thought", "goAt": 4, "done": "<div class=\"th-card\"><p class=\"th-title\">the Go button does nothing on my iPad</p><div class=\"th-meta\"><a class=\"th-tl\">#bug</a><span class=\"th-date\">just now</span></div></div><div class=\"th-sub\">saved to your Thoughts, tagged #bug</div>", "card": true};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
-const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
-const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
-(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
- const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
- await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ const t='#bug the Go button does nothing on my iPad';for(let i=1;i<=t.length;i++){show(t.slice(0,i));if(i===4)go.textContent='Save thought';await sleep(42)}
+ await sleep(400);show('');go.textContent='Go';
+ state('','<a class="th-tl">#bug</a><span class="th-date">just now</span>','','1 · saved to your Thoughts, tagged #bug');await sleep(1800);
+ state('sent','<a class="th-tl">#bug</a><span class="th-st t-sent">sent</span><span class="th-date">just now</span>','<p class="th-wait">waits on the designer</p>','2 · with Mind Meld Active, a #bug goes to your designer');await sleep(2200);
+ state('working','<a class="th-tl">#bug</a><span class="th-st t-working">working</span><span class="th-date">1 min</span>','<p class="th-wait">designer · finding why the button does nothing</p>','3 · the designer picks it up and works on it');await sleep(2400);
+ state('done','<a class="th-tl">#bug</a><a class="th-tl t-ai-done">#ai-done</a><span class="th-st t-done">done</span><span class="th-date">4 min</span>','<p class="th-ansp">Fixed: on iPad the button sat under the keyboard bar. It moves above it now, try again.</p>','4 · answered and done: read it, then archive it');await sleep(3400)}})()})();
- m1.innerHTML=S.done;if(S.card)m1.classList.add('cw');m1.classList.add('on');await sleep(2800)}})()})();
</script>
```
…
version 7diff 2026-10-27 16:06 UTC · razie via designer-219designer View Text

What version 8 changed
…
.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+.mi{--th-focus:#1f5bb5;--th-done:#2e8b57}@media (prefers-color-scheme:dark){.mi{--th-focus:#7aa7f0;--th-done:#6cc08a}}
+.mi .msg.cw{border:0;background:none;padding:0;max-width:340px;margin-left:0}
+.mi .th-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:4px}
+.mi .th-card.foc{box-shadow:inset 3px 0 0 var(--th-focus)}
+.mi .th-fmark{font:600 11px var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--th-focus)}
+.mi .th-title{font-size:15px;font-weight:600;margin:0;line-height:1.35}
+.mi .th-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px;font-size:13px}
+.mi .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mi .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
+.mi .th-sub{font-size:12px;color:var(--soft);margin-top:6px}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
<script>
(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
-const S={"text": "#focus the spring recital", "go": "Create focus", "goAt": 6, "done": "<b>d2</b> \u00b7 Focus <i>the spring recital</i> made, and opened"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const S={"text": "#focus the spring recital", "go": "Create focus", "goAt": 6, "done": "<div class=\"th-card foc\"><span class=\"th-fmark\">FOCUS</span><p class=\"th-title\">the spring recital</p><div class=\"th-meta\"><span style=\"color:var(--soft)\">0 in it</span><span class=\"th-date\">just now</span></div></div><div class=\"th-sub\">made and opened: add thoughts and pages to it</div>", "card": true};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
…
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML=S.done;if(S.card)m1.classList.add('cw');m1.classList.add('on');await sleep(2800)}})()})();
- m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
</script>
```
…
.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+.mi{--th-focus:#1f5bb5;--th-done:#2e8b57}@media (prefers-color-scheme:dark){.mi{--th-focus:#7aa7f0;--th-done:#6cc08a}}
+.mi .msg.cw{border:0;background:none;padding:0;max-width:340px;margin-left:0}
+.mi .th-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:4px}
+.mi .th-card.foc{box-shadow:inset 3px 0 0 var(--th-focus)}
+.mi .th-fmark{font:600 11px var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--th-focus)}
+.mi .th-title{font-size:15px;font-weight:600;margin:0;line-height:1.35}
+.mi .th-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px;font-size:13px}
+.mi .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mi .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
+.mi .th-sub{font-size:12px;color:var(--soft);margin-top:6px}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
<script>
(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const S={"text": "#thought call the venue on Monday", "go": "Save thought", "goAt": 8, "done": "<div class=\"th-card\"><p class=\"th-title\">call the venue on Monday</p><div class=\"th-meta\"><span class=\"th-date\">just now</span></div></div><div class=\"th-sub\">saved to your Thoughts</div>", "card": true};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
-const S={"text": "#thought call the venue on Monday", "go": "Save thought", "goAt": 8, "done": "<b>d2</b> \u00b7 saved to your Thoughts"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
…
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
- m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+ m1.innerHTML=S.done;if(S.card)m1.classList.add('cw');m1.classList.add('on');await sleep(2800)}})()})();
</script>
```
…
.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+.mi{--th-focus:#1f5bb5;--th-done:#2e8b57}@media (prefers-color-scheme:dark){.mi{--th-focus:#7aa7f0;--th-done:#6cc08a}}
+.mi .msg.cw{border:0;background:none;padding:0;max-width:340px;margin-left:0}
+.mi .th-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:4px}
+.mi .th-card.foc{box-shadow:inset 3px 0 0 var(--th-focus)}
+.mi .th-fmark{font:600 11px var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--th-focus)}
+.mi .th-title{font-size:15px;font-weight:600;margin:0;line-height:1.35}
+.mi .th-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px;font-size:13px}
+.mi .th-tl{color:var(--indigo,#4b4fc4);text-decoration:none}.mi .th-date{margin-left:auto;color:var(--soft);white-space:nowrap}
+.mi .th-sub{font-size:12px;color:var(--soft);margin-top:6px}
</style>
<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
<script>
(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
-const S={"text": "#bug the Go button does nothing on my iPad", "go": "Save thought", "goAt": 4, "done": "<b>d2</b> \u00b7 saved to your Thoughts, tagged <b>#bug</b>"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const S={"text": "#bug the Go button does nothing on my iPad", "go": "Save thought", "goAt": 4, "done": "<div class=\"th-card\"><p class=\"th-title\">the Go button does nothing on my iPad</p><div class=\"th-meta\"><a class=\"th-tl\">#bug</a><span class=\"th-date\">just now</span></div></div><div class=\"th-sub\">saved to your Thoughts, tagged #bug</div>", "card": true};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
…
const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
- m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+ m1.innerHTML=S.done;if(S.card)m1.classList.add('cw');m1.classList.add('on');await sleep(2800)}})()})();
</script>
```
…
version 6diff 2026-10-27 16:05 UTC · razie via designer-219designer View Text

What version 7 changed
…
```embedhtml
<style>
+.mf{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:560px;height:230px;position:relative;margin:2px 0 6px}
+.mf .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
+.mf .q{flex:1;min-height:20px;white-space:pre}.mf .q .ph{color:var(--soft)}.mf .q .at{font-weight:600}
+.mf .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mfb 1s steps(1) infinite}@keyframes mfb{50%{opacity:0}}
+.mf .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mf .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mf .fl{position:absolute;right:6px;bottom:6px;width:42px;height:42px;border-radius:21px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:all .35s cubic-bezier(.2,.8,.2,1);overflow:hidden}
+.mf .fl.flash{animation:mff .9s ease-in-out 2}@keyframes mff{50%{transform:scale(1.18);box-shadow:0 0 0 8px color-mix(in srgb,var(--ink) 18%,transparent)}}
+.mf .fl.open{width:300px;height:160px;border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--line);align-items:stretch;justify-content:flex-start;flex-direction:column;font-size:13px}
+.mf .fl .ic{transition:opacity .2s}.mf .fl.open .ic{display:none}
+.mf .hd{display:none;padding:6px 10px;border-bottom:1px solid var(--line);font-weight:600;font-size:12px}.mf .fl.open .hd{display:block}
+.mf .ms{display:none;padding:6px 8px;gap:6px;flex-direction:column}.mf .fl.open .ms{display:flex}
+.mf .m{max-width:85%;border:1px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--paper);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
-.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mf .m.me{align-self:flex-end}.mf .m.on{opacity:1;transform:none}.mf .m b{font-weight:600}
-.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
-.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
-.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
-.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
-.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
-.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
-.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
</style>
+<div class="mf"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div>
+ <div class="fl" id="fl"><span class="ic">💬</span><div class="hd">designer · chat</div><div class="ms"><div class="m me" id="m1">make the lessons page wider</div><div class="m" id="m2"><b>designer</b> · on it: widening Lessons now</div><div class="m me" id="m3">and center the title</div></div></div></div>
-<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="msg" id="m1"></div><div class="msg ag" id="m2"></div></div>
<script>
-(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),m2=$('m2'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),fl=$('fl'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
const show=t=>{q.innerHTML=t?esc(t).replace(/^@(\w+)/,'<span class="at">@$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
-(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');m2.classList.remove('on');await sleep(700);
+(async()=>{for(;;){show('');go.textContent='Go';fl.className='fl';['m1','m2','m3'].forEach(i=>$(i).classList.remove('on'));await sleep(700);
+ const t='@designer make the lessons page wider';for(let i=1;i<=t.length;i++){show(t.slice(0,i));if(i===10)go.textContent='Ask the designer';await sleep(48)}
+ await sleep(450);go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ fl.classList.add('flash');await sleep(1800);fl.classList.remove('flash');fl.classList.add('open');await sleep(450);
+ $('m1').classList.add('on');await sleep(900);$('m2').classList.add('on');await sleep(1300);$('m3').classList.add('on');await sleep(2600)}})()})();
- const t='@designer make the lessons page wider';for(let i=1;i<=t.length;i++){show(t.slice(0,i));if(i===10)go.textContent='Ask the designer';await sleep(50)}
- await sleep(500);go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
- m1.innerHTML='make the lessons page wider';m1.classList.add('on');await sleep(900);
- m2.innerHTML='<b>designer</b> · on it: widening Lessons now';m2.classList.add('on');await sleep(2600)}})()})();
</script>
```
…
version 5diff 2026-10-27 16:04 UTC · razie via designer-219designer View Text

What version 6 changed
…

- **`#focus`** makes a Focus and opens it: `#focus the spring recital`
+
+```embedhtml
+<style>
+.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
+.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
+.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
+.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
+.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
+.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+</style>
+<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const S={"text": "#focus the spring recital", "go": "Create focus", "goAt": 6, "done": "<b>d2</b> \u00b7 Focus <i>the spring recital</i> made, and opened"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+ const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
+ await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+</script>
+```
+
- **`#thought`** saves a thought: `#thought call the venue on Monday`
+
+```embedhtml
+<style>
+.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
+.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
+.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
+.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
+.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
+.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+</style>
+<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const S={"text": "#thought call the venue on Monday", "go": "Save thought", "goAt": 8, "done": "<b>d2</b> \u00b7 saved to your Thoughts"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+ const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
+ await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+</script>
+```
+
- **Any `#tag`** saves the line as a thought with those tags (`#bug`, `#idea`…): `#bug the Go button does nothing on my iPad`. With Mind Meld at *Active*, a `#bug` or `#idea` also goes to the designer.
+
+```embedhtml
+<style>
+.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
+.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
+.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
+.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
+.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
+.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+</style>
+<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const S={"text": "#bug the Go button does nothing on my iPad", "go": "Save thought", "goAt": 4, "done": "<b>d2</b> \u00b7 saved to your Thoughts, tagged <b>#bug</b>"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+ const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
+ await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+</script>
+```
+
- **`/`** opens a page on the stage: type a few letters and pick, as `/pipeline`, `/thoughts`, `/agents`, `/toolbox` or any `/path`.
+
+```embedhtml
+<style>
+.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
-- **`$ `** (a dollar and a space) is a d2 call, picked from a list as you type.
+.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
+.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
+.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
+.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
+.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+</style>
+<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const S={"text": "/pi", "ms": 260, "menus": {"1": [[["/thoughts", "your notes"], ["/pipeline", "the work"], ["/agents", "who is up"], ["/toolbox", "everything"]], -1], "2": [[["/pipeline", "the work"]], 0], "3": [[["/pipeline", "the work"]], 0]}, "done": "<b>d2</b> \u00b7 the Pipeline opens on the stage"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+ const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
+ await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+</script>
+```
+
+- **`$ `** (a dollar and a space) picks one of d2's actions by name, the same ones your words are read as (*publish* is `topic.publish`): type a few letters, pick, fill it in.
+
+```embedhtml
+<style>
+.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
+.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
+.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
+.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
+.mi .pop{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px;max-width:300px;opacity:0;transition:opacity .2s}.mi .pop.on{opacity:1}.mi .pop div{padding:3px 8px;border-radius:7px;font-size:13px}.mi .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}.mi .pop span{color:var(--soft);margin-left:6px}
+.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+</style>
+<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="pop" id="pop"></div><div class="msg ag" id="m1"></div></div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),pop=$('pop'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const S={"text": "$ pub", "ms": 220, "menus": {"2": [[["topic.publish", "publish, put live"], ["topic.update", "update, fix"], ["topic.tag", "tag"], ["item.send", "send"]], -1], "5": [[["topic.publish", "publish, put live"]], 0]}, "done": "<b>d2</b> \u00b7 <code>$ topic.publish(</code> is in the box: name the topic and Go"};const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^([@#\/$]\S*)/,'<span class="at">$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const menu=(it,sel)=>{pop.innerHTML=it.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+esc(x[0])+(x[1]?'<span>'+esc(x[1])+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');pop.classList.remove('on');await sleep(700);
+ const t=S.text;for(let i=1;i<=t.length;i++){show(t.slice(0,i));const mm=S.menus&&S.menus[i];if(mm)menu(mm[0],mm[1]);if(S.goAt&&i===S.goAt)go.textContent=S.go;await sleep(S.ms||55)}
+ await sleep(600);if(S.pick){menu(S.pick[0],S.pick[1]);await sleep(800)}pop.classList.remove('on');go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML=S.done;m1.classList.add('on');await sleep(2800)}})()})();
+</script>
+```
+

While you type `@`, `#`, `/` or `$ `, a list offers what fits; **↑ ↓** and **Enter** pick.
…
version 4diff 2026-10-27 16:03 UTC · razie via designer-219designer View Text

What version 5 changed
…

- **`@role`** starts a chat with that agent, your words as its first message: `@designer make the lessons page wider`
+
+```embedhtml
+<style>
+.mi{font:14px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:520px;min-height:112px;margin:2px 0 6px}
+.mi .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px 8px}
+.mi .q{flex:1;min-height:20px;white-space:pre}.mi .q .ph{color:var(--soft)}.mi .q .at{color:var(--ink);font-weight:600}
+.mi .cur{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-2px;animation:mib 1s steps(1) infinite}@keyframes mib{50%{opacity:0}}
+.mi .go{border:1px solid var(--line);border-radius:9px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;flex:none;transition:background .2s}
+.mi .go.hot{background:color-mix(in srgb,var(--ink) 12%,var(--paper))}
+.mi .msg{margin:8px 0 0 auto;max-width:80%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:6px 10px;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
+.mi .msg.on{opacity:1;transform:none}.mi .msg.ag{margin-left:0}.mi .msg b{font-weight:600}
+</style>
+<div class="mi"><div class="box"><span class="q" id="q"></span><span class="go" id="go">Go</span></div><div class="msg" id="m1"></div><div class="msg ag" id="m2"></div></div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),go=$('go'),m1=$('m1'),m2=$('m2'),sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const esc=s=>s.replace(/&/g,'&').replace(/</g,'<');
+const show=t=>{q.innerHTML=t?esc(t).replace(/^@(\w+)/,'<span class="at">@$1</span>')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+(async()=>{for(;;){show('');go.textContent='Go';m1.classList.remove('on');m2.classList.remove('on');await sleep(700);
+ const t='@designer make the lessons page wider';for(let i=1;i<=t.length;i++){show(t.slice(0,i));if(i===10)go.textContent='Ask the designer';await sleep(50)}
+ await sleep(500);go.classList.add('hot');await sleep(250);go.classList.remove('hot');show('');go.textContent='Go';
+ m1.innerHTML='make the lessons page wider';m1.classList.add('on');await sleep(900);
+ m2.innerHTML='<b>designer</b> · on it: widening Lessons now';m2.classList.add('on');await sleep(2600)}})()})();
+</script>
+```
+
- **`#focus`** makes a Focus and opens it: `#focus the spring recital`
- **`#thought`** saves a thought: `#thought call the venue on Monday`
…
version 3diff 2026-10-27 16:03 UTC · razie via designer-219designer View Text

What version 4 changed
…
## The magic characters

-| Start with | What it does | Example |
-|---|---|---|
-| `@role` | starts a chat with that agent, your words as its first message | `@designer make the lessons page wider` |
-| `#focus` | makes a Focus and opens it | `#focus the spring recital` |
-| `#thought` | saves a thought | `#thought call the venue on Monday` |
-| any `#tag` | saves the line as a thought with those tags (`#bug`, `#idea`…); with Mind Meld *Active*, a `#bug` or `#idea` also goes to the designer | `#bug the Go button does nothing on my iPad` |
-| `/` | opens a page on the stage: type a few letters and pick (`/thoughts`, `/pipeline`, `/agents`, `/toolbox`, any `/path`) | `/pipeline` |
+- **`@role`** starts a chat with that agent, your words as its first message: `@designer make the lessons page wider`
+- **`#focus`** makes a Focus and opens it: `#focus the spring recital`
+- **`#thought`** saves a thought: `#thought call the venue on Monday`
+- **Any `#tag`** saves the line as a thought with those tags (`#bug`, `#idea`…): `#bug the Go button does nothing on my iPad`. With Mind Meld at *Active*, a `#bug` or `#idea` also goes to the designer.
+- **`/`** opens a page on the stage: type a few letters and pick, as `/pipeline`, `/thoughts`, `/agents`, `/toolbox` or any `/path`.
+- **`$ `** (a dollar and a space) is a d2 call, picked from a list as you type.
-| `$ ` | a d2 call, picked from a list as you type | `$ ` then pick |

While you type `@`, `#`, `/` or `$ `, a list offers what fits; **↑ ↓** and **Enter** pick.
…
version 2diff 2026-10-27 16:00 UTC · razie via designer-219designer View Text

What version 3 changed
…
# The canvas box

+```embedhtml
+<style>
+.cv{font:15px/1.4 var(--body,system-ui,sans-serif);color:var(--ink);max-width:560px;margin:4px 0 8px;min-height:260px}
+.cv .box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:8px 10px;position:relative}
+.cv .pl{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:18px;line-height:28px;text-align:center;flex:none;transition:transform .2s,box-shadow .2s}
+.cv .pl.hit{transform:scale(.9);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 15%,transparent)}
+.cv .q{flex:1;min-height:22px;white-space:pre}.cv .q .ph{color:var(--soft)}
+.cv .cur{display:inline-block;width:1px;height:1.1em;background:var(--ink);vertical-align:-2px;animation:cvb 1s steps(1) infinite}
+@keyframes cvb{50%{opacity:0}}
+.cv .go{border:1px solid var(--line);border-radius:10px;padding:4px 12px;background:var(--paper);color:var(--ink);font-size:13px;flex:none}
+.cv .pop{position:absolute;left:8px;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:6px;min-width:230px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:2}
+.cv .pop.on{opacity:1;transform:none}
+.cv .pop div{padding:5px 8px;border-radius:8px;font-size:13px}.cv .pop div.sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}
+.cv .pop span{color:var(--soft);margin-left:6px}
+.cv .read{margin-top:8px;font-size:13px;color:var(--soft);min-height:20px;opacity:0;transition:opacity .3s}.cv .read.on{opacity:1}
+.cv .read b{color:var(--ink);font-weight:600}
+.cv .cap{font-size:12px;color:var(--soft);margin-top:4px}
+</style>
+<div class="cv">
+ <div class="box"><span class="pl" id="pl">+</span><span class="q" id="q"></span><span class="go" id="go">Go</span>
+ <div class="pop" id="pop"></div></div>
+ <div class="read" id="rd"></div>
+ <div class="cap" id="cap"></div>
+</div>
+<script>
+(()=>{const $=i=>document.getElementById(i),q=$('q'),pop=$('pop'),rd=$('rd'),pl=$('pl'),go=$('go'),cap=$('cap');
+const sleep=ms=>new Promise(r=>setTimeout(r,ms));
+const show=(t)=>{q.innerHTML=t?t.replace(/&/g,'&').replace(/</g,'<')+'<span class="cur"></span>':'<span class="ph">What do you want to make?</span><span class="cur"></span>'};
+const type=async(t,ms=55)=>{for(let i=1;i<=t.length;i++){show(t.slice(0,i));await sleep(ms)}};
+const menu=(items,sel)=>{pop.innerHTML=items.map((x,i)=>'<div class="'+(i===sel?'sel':'')+'">'+x[0]+(x[1]?'<span>'+x[1]+'</span>':'')+'</div>').join('');pop.classList.add('on')};
+const off=()=>pop.classList.remove('on');
+const read=(v,who)=>{rd.innerHTML='<b>'+v+'</b> · '+who;rd.classList.add('on')};
+async function run(){for(;;){
+ off();rd.classList.remove('on');show('');go.textContent='Go';
+ cap.textContent='1 · Just say what you want: anything else goes to your agent.';await sleep(900);
+ await type('make a new app: lesson bookings');read('not for the canvas: the designer takes it','the designer (a chat)');await sleep(2200);
+ rd.classList.remove('on');show('');
+ cap.textContent='2 · The + lists everything you can start.';await sleep(700);
+ pl.classList.add('hit');await sleep(180);pl.classList.remove('hit');
+ menu([['🎯 Add a focus'],['💭 Add a thought'],['▦ Add a widget'],['💬 Start an agent chat'],['✨ Start a new app']],-1);await sleep(1000);
+ for(let i=0;i<3;i++){menu([['🎯 Add a focus'],['💭 Add a thought'],['▦ Add a widget'],['💬 Start an agent chat'],['✨ Start a new app']],i);await sleep(450)}
+ off();await type('add a widget to show the pipeline',40);read('canvas.add(Panel-pipeline)','d2, at once · free');await sleep(2200);
+ rd.classList.remove('on');show('');
+ cap.textContent='3 · Type / to open a page on the stage.';await sleep(800);
+ await type('/',120);menu([['🧭 /thoughts','your notes'],['🛤️ /pipeline','the work'],['🤖 /agents','who is up'],['🧰 /toolbox','everything']],-1);await sleep(700);
+ await type('/pi',140);menu([['🛤️ /pipeline','the work']],0);await sleep(1100);
+ off();show('');read('stage(Pipeline)','d2, at once · free');await sleep(2200);
+ cap.textContent='4 · @ asks an agent, # saves a thought.';rd.classList.remove('on');
+ await type('@designer make the lessons page wider',40);go.textContent='Ask the designer';await sleep(1600);
+ show('');go.textContent='Go';await type('#bug the Go button does nothing on my iPad',40);go.textContent='Save thought';await sleep(1800);
+}}
+run();
+})();
+</script>
+```
+
The box at the top of your home is where everything starts. Type what you want and press **Enter** (**Shift+Enter** for a new line). Under the box, d2 shows how it read your line before you send it: the **verb**, **who does it** (*d2, at once* or *the designer (a chat)*) and **what it costs** (*nothing*, or your allowance).

…
version 1diff 2026-10-27 15:59 UTC · razie via designer-219designer View Text

What version 2 changed
…
description: How the canvas box works — everything is a prompt: what d2 does at once, what goes to an agent, and the magic words (@, #, /, $, the canvas words).
tags: help, canvas, wip
+order: 44
+brief: The box on your home: type what you want. d2 does the canvas words and @ # / at once; anything else goes to your agent as a chat.
---
# The canvas box
…