Three small tasks

HTML

<main><header><p class="eyebrow">A LITTLE LESS TO DO</p><h1>Three small tasks</h1><p id="progress" aria-live="polite"></p><div class="track"><span id="bar"></span></div></header><section id="tasks" aria-label="Your tasks"></section><footer><button id="undo" disabled>↶ Undo last change</button><p id="status" role="status">Your progress saves as you go.</p><button id="share" class="share">Share my tasks for changes</button></footer></main>

CSS

*{box-sizing:border-box}body{margin:0;background:#f2f4ef;color:#20352b;font-family:system-ui,-apple-system,sans-serif}main{max-width:600px;margin:0 auto;padding:28px 20px;background:#fcfdf9;border-radius:24px}header{padding:2px 4px 24px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#63806e;margin:0 0 10px}h1{font-size:32px;letter-spacing:-1.2px;margin:0 0 10px}#progress{font-size:15px;color:#57685c;margin:0 0 16px}.track{height:6px;background:#e6ebe3;border-radius:9px;overflow:hidden}#bar{display:block;height:100%;background:#3d7855;transition:width .2s}#tasks{display:grid;gap:12px}.task{background:white;border:1px solid #dce4d7;border-radius:16px;padding:12px;display:grid;grid-template-columns:52px minmax(0,1fr) 60px;align-items:center;gap:10px}.toggle{width:52px;height:52px;padding:0;font-size:24px;border-radius:14px;background:#f5f8f2;border:1px solid #b6c8ad;color:#2c6543}.title{font-size:17px;font-weight:550;overflow-wrap:anywhere;line-height:1.4}.done .title{text-decoration:line-through;color:#728172}.done .toggle{background:#36704d;color:white;border-color:#36704d}button{font:inherit;cursor:pointer;min-height:48px;border:1px solid #cbd7c6;border-radius:12px;padding:10px 14px;background:#f7faf3;color:#2b5439;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}.edit{border:0;background:transparent;font-size:14px;padding:8px}.editor{grid-column:1/-1;display:grid;gap:10px}.editor label{font-size:13px;color:#596c5e}input{display:block;width:100%;min-height:52px;margin-top:6px;border:1px solid #a6b99e;border-radius:10px;padding:12px;font:inherit;font-size:17px;color:#20352b;background:white}.actions{display:flex;gap:8px}.actions button{flex:1}.primary{background:#36704d;color:white;border-color:#36704d}footer{padding:20px 4px 0}#undo{width:100%}#status{font-size:12px;line-height:1.5;color:#637266;min-height:18px;margin:12px 0}.share{font-size:12px;min-height:44px;background:transparent;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:4px}button:focus-visible,input:focus-visible{outline:3px solid #c29b48;outline-offset:3px}@media(max-width:380px){main{padding:22px 12px}.task{gap:6px;padding:10px;grid-template-columns:48px minmax(0,1fr) 52px}.toggle{width:48px;height:48px}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){#bar{transition:none}}

JavaScript

(()=>{
'use strict';
const $=id=>document.getElementById(id),clone=x=>JSON.parse(JSON.stringify(x));
const kind='arkheos-three-small-tasks';
let state={kind,version:1,tasks:[{id:'email',title:'Reply to email',done:false},{id:'mug',title:'Wash the mug',done:false},{id:'plant',title:'Water the plant',done:false}],history:[]};
let touched=false,editor=null,queue=Promise.resolve(),saveNumber=0;
const bridge=window.WidgetCanvas;
function validTasks(v){return Array.isArray(v)&&v.length===3&&v.every((t,i)=>t&&t.id===['email','mug','plant'][i]&&typeof t.title==='string'&&t.title.trim().length>0&&t.title.length<=100&&typeof t.done==='boolean');}
function status(s){$('status').textContent=s;}
function persist(){
 const snapshot=clone(state),n=++saveNumber;
 status('Saving…');
 queue=queue.then(async()=>{try{if(!bridge||typeof bridge.setState!=='function')throw Error();await bridge.setState(snapshot);if(n===saveNumber)status('Progress saved. Come back here anytime.');}catch(e){if(n===saveNumber)status('Could not save progress. Make another change to try again.');}});
}
function change(fn){touched=true;state.history.push(clone(state.tasks));state.history=state.history.slice(-30);fn();editor=null;render();persist();}
function make(tag,text,cls){const e=document.createElement(tag);if(text!==undefined)e.textContent=text;if(cls)e.className=cls;return e;}
function render(){
 const count=state.tasks.filter(t=>t.done).length;
 $('progress').textContent=count===3?'All three done. A little room to breathe.':count+' of 3 complete · '+(3-count)+' to go';
 $('bar').style.width=(count/3*100)+'%';
 $('undo').disabled=!state.history.length;
 $('tasks').replaceChildren();
 state.tasks.forEach(t=>{
  const row=make('article',undefined,'task'+(t.done?' done':''));
  const toggle=make('button',t.done?'✓':'○','toggle');toggle.type='button';toggle.setAttribute('aria-label',(t.done?'Mark incomplete: ':'Complete: ')+t.title);toggle.setAttribute('aria-pressed',String(t.done));toggle.onclick=()=>change(()=>{t.done=!t.done;});
  const title=make('span',t.title,'title'),edit=make('button','Edit','edit');edit.type='button';edit.setAttribute('aria-label','Rename '+t.title);edit.onclick=()=>{editor=t.id;render();const input=$('rename-'+t.id);input.focus();input.select();};
  row.append(toggle,title,edit);
  if(editor===t.id){
   const form=make('form',undefined,'editor'),label=make('label','Task name'),input=make('input');input.id='rename-'+t.id;input.value=t.title;input.maxLength=100;input.required=true;input.autocomplete='off';input.oninput=()=>{touched=true;input.setCustomValidity('');};label.htmlFor=input.id;label.append(input);
   const actions=make('div',undefined,'actions'),save=make('button','Save name','primary'),cancel=make('button','Cancel');save.type='submit';cancel.type='button';cancel.onclick=()=>{editor=null;render();};actions.append(save,cancel);form.append(label,actions);
   form.onsubmit=e=>{e.preventDefault();const name=input.value.trim();if(!name){input.setCustomValidity('Enter a task name.');input.reportValidity();return;}if(name===t.title){editor=null;render();return;}change(()=>{t.title=name;});};
   input.onkeydown=e=>{if(e.key==='Escape'){editor=null;render();}};
   row.append(form);
  }
  $('tasks').append(row);
 });
}
$('undo').onclick=()=>{if(!state.history.length)return;touched=true;state.tasks=state.history.pop();editor=null;render();persist();};
function restore(v){if(touched||!v||v.kind!==kind||v.version!==1||!validTasks(v.tasks))return;state={kind,version:1,tasks:clone(v.tasks),history:Array.isArray(v.history)?v.history.filter(validTasks).slice(-30).map(clone):[]};editor=null;render();status('Saved progress restored.');}
$('share').onclick=async()=>{try{if(!bridge||typeof bridge.setContext!=='function')throw Error();await bridge.setContext({kind,version:1,title:'Three small tasks',tasks:clone(state.tasks)});status('Tasks shared for changes.');}catch(e){status('Could not share tasks. Your list is still here.');}};
window.addEventListener('widgetcanvas:restore',e=>restore(e.detail));
render();
try{if(bridge){bridge.setControlsPosition?.('top-right');bridge.setResetEnabled?.(false);bridge.setSharingEnabled?.(false);Promise.resolve(bridge.getState()).then(restore).catch(()=>status('Ready. Progress will save when you make a change.'));}}catch(e){status('Ready. Progress will save when you make a change.');}
})();