{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"eisenhower-matrix","type":"registry:component","title":"Eisenhower Matrix","description":"Sort tasks by urgency and importance in four quadrants.","author":"Notion Arena","categories":["planning"],"tags":["widget","free","prioritisation","matrix","gtd","planning"],"meta":{"kind":"widget","tier":"free","version":"1.0.3","updatedAt":"2026-08-30","notionPlan":"Free","emoji":"🧭","delivery":["embed","html-block","download"],"capabilities":{"interactive":true,"offlineSafe":true,"persistsLocally":true,"writesToNotion":false,"needsNetwork":false},"embedUrl":"https://notionarena.vercel.app/embed/eisenhower-matrix","fileUrl":"https://notionarena.vercel.app/widgets/eisenhower-matrix.html","downloadUrl":"https://notionarena.vercel.app/api/widget/eisenhower-matrix","height":400,"minHeight":320,"maxHeight":700,"params":[{"key":"seed","label":"Seed tasks","type":"text","default":""},{"key":"accent","label":"Accent","type":"color","default":"#2383e2"},{"key":"theme","label":"Theme","type":"select","default":"auto","options":[{"value":"auto","label":"Match Notion"},{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]},"files":[{"path":"widgets/eisenhower-matrix.html","type":"registry:file","target":"notion/widgets/eisenhower-matrix.html","content":"<!doctype html>\n<html lang=\"en\" data-theme=\"auto\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<title>Eisenhower Matrix</title>\n<style>\n:root{--bg:#ffffff;--fg:#37352f;--muted:#787774;--surface:#f7f7f5;--border:#e9e9e7;--accent:#2383e2;\n--do:#e03e3e;--sched:#2383e2;--dele:#dfab01;--drop:#0f7b6c;\n--font:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif}\nhtml[data-theme=\"dark\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#2f2f2f;\n--do:#ff7369;--sched:#529cca;--dele:#ffd60a;--drop:#4dab9a}\n@media (prefers-color-scheme:dark){html[data-theme=\"auto\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#2f2f2f;\n--do:#ff7369;--sched:#529cca;--dele:#ffd60a;--drop:#4dab9a}}\n*{box-sizing:border-box}html,body{margin:0;height:100%}\nbody{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}\n.wrap{height:100%;display:flex;flex-direction:column;gap:8px;padding:11px 13px;overflow:hidden}\n.bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}\ninput[type=text]{flex:1 1 160px;min-width:120px;font:inherit;font-size:12.5px;padding:5px 9px;border:1px solid var(--border);\nborder-radius:8px;background:var(--bg);color:var(--fg)}\ninput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 18%,transparent)}\nbutton{font:inherit;font-size:11.5px;font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap}\nbutton:hover{color:var(--fg)}\n.matrix{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}\n.q{border:1px solid var(--border);border-radius:11px;background:var(--surface);display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:.12s}\n.q.over{border-color:var(--qcolor);background:color-mix(in oklab,var(--qcolor) 8%,var(--surface))}\n.qh{display:flex;align-items:center;gap:6px;padding:7px 9px 5px}\n.qh .dot{width:7px;height:7px;border-radius:50%;background:var(--qcolor);flex:0 0 auto}\n.qh b{font-size:11.5px;font-weight:650;letter-spacing:-.005em}\n.qh span{font-size:10px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}\n.qsub{font-size:9.5px;color:var(--muted);padding:0 9px 5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}\n.items{flex:1;min-height:0;overflow:auto;padding:0 6px 6px;display:flex;flex-direction:column;gap:4px}\n.it{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:7px;\npadding:4px 6px;cursor:grab;font-size:12px;line-height:1.3}\n.it:active{cursor:grabbing}\n.it.dragging{opacity:.4}\n.it .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.it .x{color:var(--muted);opacity:0;cursor:pointer;font-size:13px;line-height:1;padding:0 2px}\n.it:hover .x{opacity:1}\n.it .grip{color:var(--muted);opacity:.5;font-size:10px;letter-spacing:-1px}\n.empty{color:var(--muted);font-size:11px;text-align:center;padding:12px 6px;opacity:.7}\n.foot{display:flex;gap:6px;justify-content:flex-end;font-size:10.5px;color:var(--muted);align-items:center}\n@media (max-width:420px){.qh b{font-size:11px}.qsub{display:none}}\n@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n  <div class=\"bar\">\n    <input type=\"text\" id=\"add\" placeholder=\"Add a task and press Enter…\" />\n    <button id=\"copy\">Copy as to-dos</button>\n    <button id=\"reset\">Reset</button>\n  </div>\n  <div class=\"matrix\" id=\"matrix\"></div>\n  <div class=\"foot\"><span id=\"hint\">Drag tasks between quadrants · double-click a task to move it</span></div>\n</div>\n<script>\n(function(){\n  var cfgEl=document.getElementById('bk-config'),base={};\n  try{base=cfgEl?JSON.parse(cfgEl.textContent||'{}'):{};}catch(e){}\n  var q=new URLSearchParams(location.search),c={};for(var k in base)c[k]=base[k];\n  q.forEach(function(v,k){c[k]=v;});\n\n  var ACCENT=c.accent||'#2383e2';\n  if(c.theme)document.documentElement.setAttribute('data-theme',c.theme);\n  document.documentElement.style.setProperty('--accent',ACCENT);\n\n  var QUADS=[\n    {id:'do',name:'Do',sub:'Urgent · Important',color:'var(--do)'},\n    {id:'sched',name:'Schedule',sub:'Not urgent · Important',color:'var(--sched)'},\n    {id:'dele',name:'Delegate',sub:'Urgent · Not important',color:'var(--dele)'},\n    {id:'drop',name:'Delete',sub:'Not urgent · Not important',color:'var(--drop)'}\n  ];\n  var KEY='notion-arena.eisenhower.v1';\n  var DEFAULT={do:['Ship the proposal'],sched:['Draft Q4 roadmap','Read 20 pages'],dele:['Reply to status emails'],drop:[]};\n  var state=DEFAULT;\n  try{var s=JSON.parse(localStorage.getItem(KEY)||'null');if(s&&typeof s==='object')state=s;}catch(e){}\n  if(c.seed){\n    try{\n      var seeded=decodeURIComponent(String(c.seed));\n      var parsed=JSON.parse(seeded);\n      if(parsed&&typeof parsed==='object'){state={do:[],sched:[],dele:[],drop:[]};\n        Object.keys(parsed).forEach(function(k){if(state[k])state[k]=Array.isArray(parsed[k])?parsed[k].map(String):[];});}\n    }catch(e){}\n  }\n  function save(){try{localStorage.setItem(KEY,JSON.stringify(state));}catch(e){}}\n\n  var host=document.getElementById('matrix');\n  var dragId=null;\n\n  function render(){\n    host.innerHTML='';\n    QUADS.forEach(function(Q){\n      var list=state[Q.id]||[];\n      var el=document.createElement('div');\n      el.className='q';el.style.setProperty('--qcolor',Q.color);el.dataset.q=Q.id;\n      el.innerHTML='<div class=\"qh\"><span class=\"dot\"></span><b>'+Q.name+'</b><span>'+list.length+'</span></div>'+\n        '<div class=\"qsub\">'+Q.sub+'</div>'+\n        '<div class=\"items\">'+(list.length?list.map(function(t,i){\n          return '<div class=\"it\" draggable=\"true\" data-i=\"'+i+'\"><span class=\"grip\">⠿</span><span class=\"txt\">'+String(t).replace(/[<>&]/g,'')+'</span><span class=\"x\" title=\"Remove\">×</span></div>';\n        }).join(''):'<div class=\"empty\">Drop tasks here</div>')+'</div>';\n      host.appendChild(el);\n      var items=el.querySelector('.items');\n      el.addEventListener('dragover',function(e){e.preventDefault();el.classList.add('over');});\n      el.addEventListener('dragleave',function(){el.classList.remove('over');});\n      el.addEventListener('drop',function(e){\n        e.preventDefault();el.classList.remove('over');\n        if(dragId===null)return;\n        var from=dragId.from,idx=dragId.idx;\n        if(from===Q.id)return;\n        var moved=(state[from]||[]).splice(idx,1)[0];\n        if(moved===undefined)return;\n        state[Q.id]=state[Q.id]||[];state[Q.id].push(moved);\n        dragId=null;save();render();\n      });\n      items.querySelectorAll('.it').forEach(function(node){\n        var idx=parseInt(node.dataset.i,10);\n        node.addEventListener('dragstart',function(e){dragId={from:Q.id,idx:idx};node.classList.add('dragging');try{e.dataTransfer.setData('text/plain',String(idx));e.dataTransfer.effectAllowed='move';}catch(err){}});\n        node.addEventListener('dragend',function(){node.classList.remove('dragging');dragId=null;});\n        node.querySelector('.x').addEventListener('click',function(e){e.stopPropagation();(state[Q.id]||[]).splice(idx,1);save();render();});\n        node.addEventListener('dblclick',function(){\n          var order=QUADS.map(function(x){return x.id;});\n          var nx=order[(order.indexOf(Q.id)+1)%order.length];\n          var moved=(state[Q.id]||[]).splice(idx,1)[0];\n          if(moved===undefined)return;\n          state[nx]=state[nx]||[];state[nx].push(moved);save();render();\n        });\n      });\n    });\n    var hint=document.getElementById('hint');\n    var del=(state.drop||[]).length;\n    hint.textContent=del===0?'Nothing in Delete yet. If the matrix has no noise, look again':'Double-click a task to cycle it to the next quadrant';\n  }\n\n  var input=document.getElementById('add');\n  input.addEventListener('keydown',function(e){\n    if(e.key!=='Enter')return;\n    var v=input.value.trim();if(!v)return;\n    state.do=state.do||[];state.do.unshift(v);input.value='';save();render();\n  });\n  document.getElementById('reset').addEventListener('click',function(){\n    if(!confirm('Clear every task in the matrix?'))return;\n    state={do:[],sched:[],dele:[],drop:[]};save();render();\n  });\n  document.getElementById('copy').addEventListener('click',function(e){\n    var b=e.currentTarget,lines=[];\n    QUADS.forEach(function(Q){\n      var l=state[Q.id]||[];if(!l.length)return;\n      lines.push('**'+Q.name+'**');\n      l.forEach(function(t){lines.push('- [ ] '+t);});\n      lines.push('');\n    });\n    var txt=lines.join('\\n').trim();\n    function done(t){b.textContent=t;setTimeout(function(){b.textContent='Copy as to-dos';},1400);}\n    try{navigator.clipboard.writeText(txt).then(function(){done('Copied ✓');},function(){done('See console');});}catch(err){done('See console');}\n    try{console.log(txt);}catch(err){}\n  });\n  render();\n})();\n</script>\n</body>\n</html>\n"}]}