dev-process-kit 0.3.0-beta.3 → 0.3.1

package/dist/chunks/shared-DJtGS7Ct.js

@@ -0,0 +1,1598 @@
+import{au as qe,bf as B,av as u,aw as l,aa as w,az as $,ac as b,aM as g,aB as j,aN as _,ax as Y,ay as V,p as y,t as Ce,aC as Be,aO as _e,aA as Le,ab as L,N as Pe,e as Ne,a5 as Re,S as Ge,P as S,ai as n,as as d,z as Ie,bm as Qe,bn as Ue,aH as E,bc as J,bd as Me,I as He,bz as P,ah as We,V as X,bh as Ke,l as Fe,aW as je}from"./shared-B8ZhyjWv.js";import{a as Ye}from"./shared-C0M3Ib7z.js";import{D as Ve,d as Je}from"./shared-ubG0-RQ-.js";import{o as T}from"./shared-LHG2FbnK.js";const Z=["working","waiting","blocked","done"],D=["todo","doing","blocked","done"],ee=["agent","human"],v=Y(b(),V(1)),Xe=u({id:g,name:v,kind:l($(ee),"agent")}),Ze=u({id:g,title:v,status:l($(D),"todo"),assignee:l(g),note:l(b()),design:l(g),proposed:l(j(),!1),reason:l(b()),questions:_}),ea=u({id:g,label:l(b()),href:v,kind:l(b()),description:l(b()),questions:_}),aa=u({id:g,title:v,body:l(b()),questions:_}),ta=u({id:g,ref:l(v),title:v,description:l(b()),blocking:l(j(),!1),assumption:l(b())}),ae=u({title:l(b(),""),status:l($(Z)),designs:l(w(aa),[]),members:l(w(Xe),[]),todos:l(w(Ze),[]),outputs:l(w(ea),[]),questions:l(w(ta),[])}),O=(a,e)=>{const t=new Set;for(const s of e){if(t.has(s))throw new Error(`duplicate ${a} id: ${s}`);t.add(s)}},k=a=>a===void 0||a.trim()===""?null:a,te=a=>{const e=qe(ae,a);O("member",e.members.map(o=>o.id)),O("design",e.designs.map(o=>o.id)),O("todo",e.todos.map(o=>o.id)),O("output",e.outputs.map(o=>o.id)),O("question",e.questions.map(o=>o.id));const t=new Set(e.members.map(o=>o.id));for(const o of e.todos)if(o.assignee!==void 0&&!t.has(o.assignee))throw new Error(`todo ${o.id} is assigned to ${o.assignee}, which is not in members`);const s=new Set(e.designs.map(o=>o.id));for(const o of e.todos)if(o.design!==void 0&&!s.has(o.design))throw new Error(`todo ${o.id} belongs to ${o.design}, which is not in designs`);for(const o of e.questions)if(!o.blocking&&k(o.assumption)===null)throw new Error(`question ${o.id} does not block, so it needs the assumption the agent works on`);return{title:e.title,status:e.status??null,designs:e.designs.map(o=>({id:o.id,title:o.title,body:k(o.body),...B(o.questions)})),members:e.members,todos:e.todos.map(o=>({id:o.id,title:o.title,status:o.status,assignee:o.assignee??null,note:k(o.note),design:o.design??null,proposed:o.proposed,reason:k(o.reason),added:!1,...B(o.questions)})),outputs:e.outputs.map(o=>({id:o.id,label:k(o.label),href:o.href,kind:k(o.kind),description:k(o.description),...B(o.questions)})),questions:e.questions.map((o,r)=>({id:o.id,ref:o.ref??`Q${r+1}`,title:o.title,description:k(o.description),blocking:o.blocking,assumption:k(o.assumption)})),answers:{},decisions:{}}},oe=()=>({title:"",status:null,designs:[],members:[],todos:[],outputs:[],questions:[],answers:{},decisions:{}}),z=(a,e)=>e===null?void 0:a.members.find(t=>t.id===e),h=(a,e)=>a.todos.find(t=>t.id===e),N=(a,e)=>a.designs.find(t=>t.id===e),se=(a,e)=>a.todos.filter(t=>t.design===e),q=(a,e)=>a.questions.find(t=>t.id===e),re=(a,e)=>{const t=a.answers[e.id];return t===void 0?!1:t.kind==="approve"||t.text.trim()!==""},R=(a,e)=>!e.proposed||a.decisions[e.id]==="accept",C=(a,e)=>R(a,e)&&z(a,e.assignee)?.kind==="human",de=(a,e,t)=>{const s={...a};return t===null?delete s[e]:s[e]=t,s},G=(a,e,t)=>({...a,answers:de(a.answers,e,t)}),oa=(a,e,t)=>({...a,decisions:de(a.decisions,e,t)}),sa=(a,e,t)=>({...a,todos:a.todos.map(s=>s.id===e?t(s):s)}),f={ANSWER_QUESTION:y("ANSWER_QUESTION","question",Be("kind",[u({kind:L("approve")}),u({kind:L("answer"),text:b()}),u({kind:L("clear")})])),DECIDE_PROPOSAL:y("DECIDE_PROPOSAL","todo",u({decision:$(["accept","decline","clear"])})),SET_TODO_STATUS:y("SET_TODO_STATUS","todo",u({status:$(D)})),ADD_TODO:y("ADD_TODO","page",u({id:g,title:Y(b(),Le(),V(1)),assignee:_e(g)}),{dedupeKey:Ce}),DELETE_TODO:y("DELETE_TODO","todo",u({}))},ne={type:"page",id:"task-board"},I=(a,e)=>({type:"ANSWER_QUESTION",target:{type:"question",id:a},payload:e}),ie=(a,e)=>({type:"DECIDE_PROPOSAL",target:{type:"todo",id:a},payload:{decision:e}}),Q=(a,e)=>({type:"SET_TODO_STATUS",target:{type:"todo",id:a},payload:{status:e}}),le=(a,e,t)=>({type:"ADD_TODO",target:ne,payload:{id:a,title:e,assignee:t}}),pe=a=>({type:"DELETE_TODO",target:{type:"todo",id:a},payload:{}}),ce=(a,e)=>{const t=Pe(f,e);if(t===null)return null;const s=t.target.id;switch(t.type){case"ANSWER_QUESTION":{const o=q(a,s);if(o===void 0)return null;const r=t.payload;return r.kind==="clear"?G(a,s,null):r.kind==="approve"?o.assumption===null?null:G(a,s,{kind:"approve"}):G(a,s,{kind:"answer",text:r.text})}case"DECIDE_PROPOSAL":{if(h(a,s)?.proposed!==!0)return null;const{decision:o}=t.payload;return oa(a,s,o==="clear"?null:o)}case"SET_TODO_STATUS":{const o=h(a,s);if(o===void 0||!C(a,o))return null;const{status:r}=t.payload;return sa(a,s,i=>({...i,status:r}))}case"ADD_TODO":{const{payload:o}=t;return h(a,o.id)!==void 0||o.assignee!==null&&z(a,o.assignee)===void 0?null:{...a,todos:[...a.todos,{id:o.id,title:o.title,status:"todo",assignee:o.assignee,note:null,design:null,proposed:!1,reason:null,added:!0}]}}case"DELETE_TODO":return h(a,s)?.added!==!0?null:{...a,todos:a.todos.filter(o=>o.id!==s)};default:return Ne(t)}},U=Re({en:{wholeBoard:"Whole board",statusWorking:"Working",statusWaiting:"Waiting on you",statusBlocked:"Blocked",statusDone:"Done",todoTodo:"To do",todoDoing:"In progress",todoBlocked:"Blocked",todoDone:"Done",kindAgent:"Agent",kindHuman:"Human",designs:"Design docs",designTasks:"Tasks under this design",noDesigns:"The agent has not written a design doc yet.",noDesignTasks:"No task is linked to this design doc yet.",tabs:"Board sections",tabDesigns:"Design Docs",tabQuestions:"Questions",tabTasks:"Tasks",openCount:a=>`${a} open`,noQuestions:"The agent has nothing to ask right now.",questions:"Questions from the agent",questionsProgress:(a,e)=>`${a} of ${e} replied`,blockingGroup:"Blocking \u2014 the agent waits for your decision",provisionalGroup:"Going ahead on an assumption \u2014 the agent adjusts if you answer otherwise",blockingTag:"Blocking",assumption:"Assumption",recommendation:"Agent recommends",approveAssumption:"OK, go with this",approveRecommendation:"OK, go with the recommendation",answerOther:"Answer differently",answerOf:a=>`Your answer to ${a}`,answerPlaceholder:"What you expect instead\u2026",blockingPlaceholder:"Your decision\u2026",approvedTag:"Approved",answeredTag:"Answered",progress:(a,e)=>`${a} of ${e} done`,noTodosYet:"No todos yet",tasksBoard:"Tasks by status",laneCount:a=>a===1?"1 task":`${a} tasks`,laneEmpty:"Nothing here",dragHint:"Drop on another column to change the status",assignee:"Assignee",unassigned:"Unassigned",memberOption:(a,e)=>`${a} (${e})`,statusOf:a=>`Status of \u201C${a}\u201D`,filterTodos:"Show todos",filterAll:"All",filterHuman:"People",addedTag:"Added by you",changedTag:"Changed",removeAdded:"Remove this todo you added",newTodo:"New todo",newTodoPlaceholder:"Add a todo for the agent\u2026",newTodoAssignee:"Assignee of the new todo",addTodo:"Add",proposedMark:"Proposed by the agent",reason:"Why",accept:"Accept",decline:"Decline",decisionOf:a=>`Decision on \u201C${a}\u201D`,acceptedTag:"Accepted",declinedTag:"Declined",undoDecision:"Undo",outputs:"Outputs",noOutputs:"Nothing has been produced yet.",copy:a=>`Copy ${a}`,copied:"Copied",commentOn:a=>`Comment on ${a}`,todoGroup:"Todo",designGroup:"Design Doc",proposalGroup:"Proposal",questionGroup:"Question",approved:"Approve the assumption",answered:"Answer",answerCleared:"Clear the reply",accepted:"Accept the proposal",declined:"Decline the proposal",decisionCleared:"Clear the decision",statusChanged:"Change the status",todoAdded:"Add a todo",todoRemoved:"Remove the added todo",quoted:a=>`\u2192 \u201C${a}\u201D`,change:(a,e)=>`${a} \u2192 ${e}`},ja:{wholeBoard:"\u30DC\u30FC\u30C9\u5168\u4F53",statusWorking:"\u4F5C\u696D\u4E2D",statusWaiting:"\u3042\u306A\u305F\u306E\u8FD4\u7B54\u5F85\u3061",statusBlocked:"\u30D6\u30ED\u30C3\u30AF\u4E2D",statusDone:"\u5B8C\u4E86",todoTodo:"\u672A\u7740\u624B",todoDoing:"\u9032\u884C\u4E2D",todoBlocked:"\u30D6\u30ED\u30C3\u30AF",todoDone:"\u5B8C\u4E86",kindAgent:"Agent",kindHuman:"\u4EBA\u9593",designs:"Design Doc",designTasks:"\u3053\u306E Design Doc \u306E\u30BF\u30B9\u30AF",noDesigns:"Agent \u306F\u307E\u3060 Design Doc \u3092\u66F8\u3044\u3066\u3044\u307E\u305B\u3093\u3002",noDesignTasks:"\u3053\u306E Design Doc \u306B\u7D10\u3065\u304F\u30BF\u30B9\u30AF\u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002",tabs:"\u30DC\u30FC\u30C9\u306E\u533A\u5206",tabDesigns:"Design Doc",tabQuestions:"\u8CEA\u554F",tabTasks:"\u30BF\u30B9\u30AF",openCount:a=>`\u672A\u56DE\u7B54 ${a} \u4EF6`,noQuestions:"\u4ECA Agent \u304B\u3089\u805E\u304D\u305F\u3044\u3053\u3068\u306F\u3042\u308A\u307E\u305B\u3093\u3002",questions:"Agent \u304B\u3089\u306E\u8CEA\u554F",questionsProgress:(a,e)=>`\u8FD4\u7B54\u6E08\u307F ${a} / ${e}`,blockingGroup:"\u30D6\u30ED\u30C3\u30AB\u30FC \u2014 \u6C7A\u3081\u3066\u3082\u3089\u3046\u307E\u3067\u5148\u306B\u9032\u3081\u306A\u3044",provisionalGroup:"\u4EEE\u306E\u524D\u63D0\u3067\u9032\u884C\u4E2D \u2014 \u9055\u3048\u3070\u65B9\u91DD\u3092\u76F4\u3059",blockingTag:"\u30D6\u30ED\u30C3\u30AB\u30FC",assumption:"\u4EEE\u56DE\u7B54",recommendation:"Agent \u306E\u63A8\u5968",approveAssumption:"\u3053\u306E\u524D\u63D0\u3067 OK",approveRecommendation:"\u63A8\u5968\u3069\u304A\u308A\u3067 OK",answerOther:"\u5225\u306E\u56DE\u7B54\u3092\u3059\u308B",answerOf:a=>`${a} \u3078\u306E\u56DE\u7B54`,answerPlaceholder:"\u671F\u5F85\u3059\u308B\u56DE\u7B54\u3092\u5165\u529B\u2026",blockingPlaceholder:"\u3069\u3046\u3059\u308B\u304B\u3092\u5165\u529B\u2026",approvedTag:"\u627F\u8A8D\u6E08\u307F",answeredTag:"\u56DE\u7B54\u6E08\u307F",progress:(a,e)=>`${e} \u4EF6\u4E2D ${a} \u4EF6\u5B8C\u4E86`,noTodosYet:"Todo \u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093",tasksBoard:"\u72B6\u614B\u3054\u3068\u306E\u30BF\u30B9\u30AF",laneCount:a=>`${a} \u4EF6`,laneEmpty:"\u306A\u3057",dragHint:"\u5225\u306E\u5217\u306B\u30C9\u30ED\u30C3\u30D7\u3059\u308B\u3068\u72B6\u614B\u304C\u5909\u308F\u308A\u307E\u3059",assignee:"\u62C5\u5F53",unassigned:"\u672A\u5272\u308A\u5F53\u3066",memberOption:(a,e)=>`${a}\uFF08${e}\uFF09`,statusOf:a=>`\u300C${a}\u300D\u306E\u72B6\u614B`,filterTodos:"\u8868\u793A\u3059\u308B Todo",filterAll:"\u3059\u3079\u3066",filterHuman:"\u4EBA\u9593\u306E\u62C5\u5F53",addedTag:"\u3042\u306A\u305F\u304C\u8FFD\u52A0",changedTag:"\u5909\u66F4\u3042\u308A",removeAdded:"\u8FFD\u52A0\u3057\u305F Todo \u3092\u53D6\u308A\u6D88\u3059",newTodo:"\u65B0\u3057\u3044 Todo",newTodoPlaceholder:"Agent \u306B\u983C\u3080 Todo \u3092\u8FFD\u52A0\u2026",newTodoAssignee:"\u65B0\u3057\u3044 Todo \u306E\u62C5\u5F53",addTodo:"\u8FFD\u52A0",proposedMark:"Agent \u304B\u3089\u306E\u63D0\u6848",reason:"\u306A\u305C",accept:"\u627F\u8A8D",decline:"\u898B\u9001\u308A",decisionOf:a=>`\u300C${a}\u300D\u306E\u5224\u65AD`,acceptedTag:"\u627F\u8A8D\u6E08\u307F",declinedTag:"\u898B\u9001\u308A",undoDecision:"\u53D6\u308A\u6D88\u3059",outputs:"\u6210\u679C\u7269",noOutputs:"\u307E\u3060\u6210\u679C\u7269\u306F\u3042\u308A\u307E\u305B\u3093\u3002",copy:a=>`${a} \u3092\u30B3\u30D4\u30FC`,copied:"\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F",commentOn:a=>`${a} \u306B\u30B3\u30E1\u30F3\u30C8`,todoGroup:"Todo",designGroup:"Design Doc",proposalGroup:"\u63D0\u6848",questionGroup:"\u8CEA\u554F",approved:"\u524D\u63D0\u3092\u627F\u8A8D",answered:"\u56DE\u7B54",answerCleared:"\u8FD4\u7B54\u3092\u30AF\u30EA\u30A2",accepted:"\u63D0\u6848\u3092\u627F\u8A8D",declined:"\u63D0\u6848\u3092\u898B\u9001\u308A",decisionCleared:"\u63D0\u6848\u306E\u5224\u65AD\u3092\u30AF\u30EA\u30A2",statusChanged:"\u72B6\u614B\u3092\u5909\u66F4",todoAdded:"Todo \u3092\u8FFD\u52A0",todoRemoved:"\u8FFD\u52A0\u3057\u305F Todo \u3092\u53D6\u308A\u6D88\u3057",quoted:a=>`\u2192 \u300C${a}\u300D`,change:(a,e)=>`${a} \u2192 ${e}`}}),ra=(a,e)=>{switch(e){case"working":return a.statusWorking;case"waiting":return a.statusWaiting;case"blocked":return a.statusBlocked;case"done":return a.statusDone}},x=(a,e)=>{switch(e){case"todo":return a.todoTodo;case"doing":return a.todoDoing;case"blocked":return a.todoBlocked;case"done":return a.todoDone}},da=(a,e)=>e==="agent"?a.kindAgent:a.kindHuman,na=(a,e,t)=>t===null?a.unassigned:z(e,t)?.name??t,ue=a=>a.title===""?"Task Context Board":a.title,be=(a,e,t)=>{switch(t.type){case"todo":{const s=h(e,t.id);return`${s?.proposed===!0?a.proposalGroup:a.todoGroup} \xB7 ${s?.title??t.id}`}case"design":{const s=N(e,t.id);return`${a.designGroup} \xB7 ${s?.title??t.id}`}case"question":{const s=q(e,t.id);return s===void 0?t.id:`${s.ref} \xB7 ${s.title}`}case"page":return a.wholeBoard;default:return t.id}},ia=(a,e)=>{switch(e){case"accept":return{title:a.accepted,tone:"update"};case"decline":return{title:a.declined,tone:"update"};case"clear":return{title:a.decisionCleared,tone:"delete"}}},la=(a,e,t)=>{switch(t.type){case"ANSWER_QUESTION":{const s=S(f.ANSWER_QUESTION,t);if(s.kind==="clear")return{title:a.answerCleared,tone:"delete"};if(s.kind==="approve"){const o=q(e,t.target.id)?.assumption??null;return{title:a.approved,tone:"update",...o===null?{}:{body:a.quoted(o)}}}return{title:a.answered,tone:"update",body:a.quoted(s.text.slice(0,120))}}case"DECIDE_PROPOSAL":return ia(a,S(f.DECIDE_PROPOSAL,t).decision);case"SET_TODO_STATUS":{const{status:s}=S(f.SET_TODO_STATUS,t),o=h(e,t.target.id)?.status,r=x(a,s);return{title:a.statusChanged,tone:"update",body:o===void 0?r:a.change(x(a,o),r)}}case"ADD_TODO":{const s=S(f.ADD_TODO,t);return{title:a.todoAdded,tone:"create",targetLabel:`${a.todoGroup} \xB7 ${s.title}`,...s.assignee===null?{}:{body:`${a.assignee}: ${na(a,e,s.assignee)}`}}}case"DELETE_TODO":return{title:a.todoRemoved,tone:"delete"};default:return{title:t.type,tone:"meta"}}},ge=(a,e,t,s)=>{let o;try{o=la(a,s??t,e)}catch{o={title:e.type,tone:"meta"}}return{title:o.title,targetLabel:o.targetLabel??be(a,t,e.target),tone:o.tone,...o.body===void 0?{}:{summary:o.body}}},ke=a=>`${a.type} ${Ge(a.target)} ${JSON.stringify(a.payload)}`,he=(a,e)=>[...e.questions.map(t=>({value:`question:${t.id}`,label:`${t.ref} \xB7 ${t.title}`,group:a.questionGroup})),...e.todos.map(t=>({value:`todo:${t.id}`,label:t.title,group:t.proposed?a.proposalGroup:a.todoGroup})),...e.designs.map(t=>({value:`design:${t.id}`,label:t.title,group:a.designGroup}))],fe=(a,e)=>e,pa=(a,e,t)=>{const s=a.answers[e.id];return{id:e.id,ref:e.ref,title:e.title,description:e.description,blocking:e.blocking,assumption:e.assumption,reply:s?.kind??"none",resolved:re(a,e),draft:s?.kind==="answer"?s.text:"",comments:t(`question:${e.id}`)}},me=(a,e)=>{const t=a.questions.map(o=>pa(a,o,e)),s=t.filter(o=>o.resolved).length;return{blocking:t.filter(o=>o.blocking),provisional:t.filter(o=>!o.blocking),resolved:s,total:t.length,open:t.length-s,blockingOpen:t.filter(o=>o.blocking&&!o.resolved).length}},ca={todo:"gray",doing:"blue",blocked:"red",done:"green"},ve=(a,e,t,s=null)=>{const o=e.designs.find(r=>r.id===s)??e.designs[0];return{items:e.designs.map(r=>({id:r.id,title:r.title,taskCount:se(e,r.id).length})),selected:o===void 0?null:ua(a,e,o,t)}},ua=(a,e,t,s)=>({id:t.id,title:t.title,body:t.body,tasks:se(e,t.id).map(o=>({id:o.id,title:o.title,status:o.status,statusLabel:x(a,o.status),proposal:o.proposed?e.decisions[o.id]??"pending":null})),comments:s(`design:${t.id}`),...t.questions===void 0?{}:{questions:t.questions}}),ba=(a,e,t,s,o)=>{const r=h(t,s.id),i=z(e,s.assignee),c=s.design===null?void 0:N(e,s.design);return{id:s.id,title:s.title,note:s.note,reason:s.reason,design:c===void 0?null:{id:c.id,title:c.title},status:s.status,statusLabel:x(a,s.status),assignee:s.assignee,assigneeName:i?.name??null,assigneeKind:i?.kind??null,editable:C(e,s),proposal:s.proposed?e.decisions[s.id]??"pending":null,added:s.added,changed:r!==void 0&&r.status!==s.status,comments:o(`todo:${s.id}`),...s.questions===void 0?{}:{questions:s.questions}}},xe=(a,e,t,s,o="all")=>{const r=e.members.some(p=>p.kind==="human"),i=r?o:"all",c=e.todos.map(p=>ba(a,e,t,p,s)),K=p=>p.assigneeKind==="human",Ee=i==="human"?c.filter(K):c,A=e.todos.filter(p=>R(e,p)),F=A.filter(p=>p.status==="done").length;return{lanes:D.map(p=>({status:p,label:x(a,p),tone:ca[p],cards:Ee.filter(ze=>ze.status===p)})),filter:i,canFilter:r,humanCount:c.filter(K).length,progress:{done:F,total:A.length,label:A.length===0?a.noTodosYet:a.progress(F,A.length)},statuses:D.map(p=>({value:p,label:x(a,p)})),members:e.members.map(p=>({id:p.id,label:a.memberOption(p.name,da(a,p.kind))}))}},we=a=>{if(!/^[a-z][a-z\d+.-]*:\/\//i.test(a))return{kind:"path"};try{return{kind:"url",host:new URL(a).host}}catch{return{kind:"path"}}},$e=a=>a.outputs.map(e=>({id:e.id,title:e.label??e.href,labelled:e.label!==null,href:e.href,kind:e.kind,description:e.description,place:we(e.href),...e.questions===void 0?{}:{questions:e.questions}})),ye=(a,e)=>{switch(e.type){case"todo":return h(a,e.id)!==void 0;case"design":return N(a,e.id)!==void 0;case"question":return q(a,e.id)!==void 0;case"page":return!0;default:return!1}},Te=a=>{const e=U(a);return{kind:"view",name:"task-board",label:"Task Context Board",addable:!1,parseBase:te,emptyBase:oe,actions:f,apply:ce,hasTarget:ye,describe:(t,s,o)=>ge(e,t,s,o),serialize:ke,resolveNavigation:fe,commentTargets:t=>he(e,t),title:ue}},M=(a,e,t,s)=>d`
+  <button
+    class="dpk-icon-btn board-comment"
+    type="button"
+    data-comment=${a}
+    aria-label=${e}
+    title=${e}
+    @click=${()=>s.comment(a)}
+  >
+    ${Ie()} ${t>0?d`<span class="dpk-icon-badge">${t}</span>`:n}
+  </button>
+`,De=(a,e,t,s=null)=>d`
+  <header class="board-section-head">
+    <h2 id=${a}>${e}</h2>
+    ${t===null?n:d`<span class="board-section-meta">${t}</span>`}
+  </header>
+  ${s===null?n:d`<p class="board-lede">${s}</p>`}
+`,ga=(a,e,t)=>d`
+  <section class="board-designs" data-section="designs" aria-label=${a.designs}>
+    ${e.items.length===0?d`<p class="dpk-empty board-empty" data-variant="dashed">${a.noDesigns}</p>`:d`<div class="board-design-layout">
+            <nav class="board-design-index" aria-label=${a.designs}>
+              <ul class="board-design-index-list">
+                ${e.items.map(s=>ka(a,s,e.selected?.id===s.id,t))}
+              </ul>
+            </nav>
+            <div class="board-design-detail">
+              ${e.selected===null?n:ha(a,e.selected,t)}
+            </div>
+          </div>`}
+  </section>
+`,ka=(a,e,t,s)=>d`
+  <li>
+    <button
+      type="button"
+      class="board-design-index-item"
+      data-design-item=${e.id}
+      aria-current=${T(t?"true":void 0)}
+      title=${`${e.title} \xB7 ${a.laneCount(e.taskCount)}`}
+      @click=${()=>s.selectDesign(e.id)}
+    >
+      <span class="board-design-index-title">${e.title}</span>
+      <span class="board-design-index-count" aria-hidden="true">${e.taskCount}</span>
+    </button>
+  </li>
+`,ha=(a,e,t)=>d`
+  <article
+    class="dpk-card board-design"
+    data-design=${e.id}
+    data-dpk-target=${`design:${e.id}`}
+    data-grill-questions=${T(e.questions)}
+    aria-labelledby=${`board-design-${e.id}`}
+  >
+    <header class="board-design-head">
+      <h3 class="board-design-title" id=${`board-design-${e.id}`}>${e.title}</h3>
+      ${M(`design:${e.id}`,a.commentOn(e.title),e.comments,t)}
+    </header>
+    ${e.body===null?n:d`<div class="dpk-prose board-design-body">${Qe(Ue(e.body))}</div>`}
+    <div class="board-design-figures"><slot name=${`design:${e.id}`}></slot></div>
+    ${e.tasks.length===0?d`<p class="board-design-empty">${a.noDesignTasks}</p>`:d`<div class="board-design-tasks">
+            <h4 class="board-design-tasks-title">${a.designTasks}</h4>
+            <ul class="board-design-task-list">
+              ${e.tasks.map(s=>fa(a,s))}
+            </ul>
+          </div>`}
+  </article>
+`,fa=(a,e)=>d`
+  <li
+    class="board-design-task"
+    data-design-task=${e.id}
+    data-status=${e.status}
+    data-proposal=${e.proposal??"none"}
+  >
+    <span class="board-todo-state" data-status=${e.status}>${e.statusLabel}</span>
+    <span class="board-design-task-title">${e.title}</span>
+    ${e.proposal==="pending"||e.proposal==="decline"?d`<span
+            class="board-card-mark"
+            data-proposal=${e.proposal}
+            role="img"
+            aria-label=${a.proposedMark}
+            title=${a.proposedMark}
+            >?</span
+          >`:n}
+  </li>
+`,ma=(a,e,t)=>e.total===0?n:d`
+    <section class="board-section" data-section="questions" aria-labelledby="board-questions">
+      ${De("board-questions",a.questions,a.questionsProgress(e.resolved,e.total))}
+      ${Oe(a,"blocking",a.blockingGroup,e.blocking,t)}
+      ${Oe(a,"provisional",a.provisionalGroup,e.provisional,t)}
+    </section>
+  `,Oe=(a,e,t,s,o)=>s.length===0?n:d`<div class="board-group" data-group=${e}>
+        <h3 class="board-group-title">${t}</h3>
+        <ol class="board-questions">
+          ${E(s,r=>r.id,r=>va(a,r,o))}
+        </ol>
+      </div>`,va=(a,e,t)=>{const s=e.assumption!==null;return d`
+    <li
+      class="dpk-card board-question"
+      data-question=${e.id}
+      data-dpk-target=${`question:${e.id}`}
+      data-blocking=${String(e.blocking)}
+      data-reply=${e.reply}
+      data-resolved=${String(e.resolved)}
+    >
+      <div class="dpk-card-head board-question-head">
+        <span class="board-ref">${e.ref}</span>
+        <h4 class="dpk-card-title board-question-title">${e.title}</h4>
+        ${e.resolved?d`<span class="board-tag" data-tone="done">
+                ${e.reply==="approve"?a.approvedTag:a.answeredTag}
+              </span>`:n}
+        ${M(`question:${e.id}`,a.commentOn(e.ref),e.comments,t)}
+      </div>
+      ${e.description===null?n:d`<p class="board-question-text">${e.description}</p>`}
+      ${s?xa(a,e,t):n}
+      <textarea
+        class="dpk-textarea board-answer"
+        data-answer-text=${e.id}
+        rows="2"
+        aria-label=${a.answerOf(e.ref)}
+        placeholder=${s?a.answerPlaceholder:a.blockingPlaceholder}
+        .value=${e.draft}
+        ?hidden=${s&&e.reply!=="answer"}
+        @input=${o=>{const r=o.currentTarget;r instanceof HTMLTextAreaElement&&t.answer(e.id,!s&&r.value===""?{kind:"clear"}:{kind:"answer",text:r.value})}}
+      ></textarea>
+    </li>
+  `},xa=(a,e,t)=>d`
+  <div class="board-assumption">
+    <span class="board-assumption-label">${e.blocking?a.recommendation:a.assumption}</span>
+    <p class="board-assumption-text">${e.assumption}</p>
+  </div>
+  <div class="board-reply" role="group" aria-label=${a.answerOf(e.ref)}>
+    <button
+      type="button"
+      class="dpk-btn board-approve"
+      aria-pressed=${e.reply==="approve"?"true":"false"}
+      @click=${()=>t.answer(e.id,e.reply==="approve"?{kind:"clear"}:{kind:"approve"})}
+    >
+      ${J()} ${e.blocking?a.approveRecommendation:a.approveAssumption}
+    </button>
+    <button
+      type="button"
+      class="dpk-btn dpk-btn--ghost board-other"
+      aria-pressed=${e.reply==="answer"?"true":"false"}
+      @click=${()=>e.reply==="answer"?t.answer(e.id,{kind:"clear"}):t.answerOther(e.id)}
+    >
+      ${a.answerOther}
+    </button>
+  </div>
+`,wa=(a,e,t,s)=>d`
+  <section class="board-section board-rail-section" data-section="outputs" aria-labelledby="board-outputs">
+    ${De("board-outputs",a.outputs,e.length===0?null:String(e.length))}
+    ${e.length===0?d`<p class="dpk-empty board-empty" data-variant="dashed">${a.noOutputs}</p>`:d`<ul class="board-outputs">
+            ${E(e,o=>o.id,o=>$a(a,o,t===o.id,s))}
+          </ul>`}
+  </section>
+`,$a=(a,e,t,s)=>{const o=e.place,r=t?a.copied:a.copy(e.href);return d`
+    <li
+      class="dpk-list-row board-output"
+      data-output=${e.id}
+      data-place=${o.kind}
+      data-grill-questions=${e.questions}
+    >
+      <div class="board-output-body">
+        <div class="board-output-head">
+          ${e.kind===null?n:d`<span class="board-kind">${e.kind}</span>`}
+          ${o.kind==="url"?d`<a class="board-output-link" href=${e.href} target="_blank" rel="noopener noreferrer"
+                  >${e.title}</a
+                >`:e.labelled?d`<span class="board-output-label">${e.title}</span>`:d`<code class="board-output-path">${e.href}</code>`}
+        </div>
+        ${o.kind==="url"?d`<span class="board-output-sub">${o.host}</span>`:e.labelled?d`<code class="board-output-path board-output-sub">${e.href}</code>`:n}
+        ${e.description===null?n:d`<p class="board-output-text">${e.description}</p>`}
+      </div>
+      <button
+        class="dpk-icon-btn board-copy"
+        type="button"
+        data-copied=${String(t)}
+        aria-label=${r}
+        title=${r}
+        @click=${()=>s.copy(e.id,e.href)}
+      >
+        ${t?J():Me()}
+      </button>
+    </li>
+  `},m=["designs","questions","tasks"],ya=(a,e)=>{const t=m.indexOf(a),s=m.length-1;switch(e){case"ArrowRight":return m[t===s?0:t+1]??null;case"ArrowLeft":return m[t===0?s:t-1]??null;case"Home":return m[0];case"End":return m[s]??null;default:return null}},Ta=(a,e)=>{switch(e){case"designs":return a.tabDesigns;case"questions":return a.tabQuestions;case"tasks":return a.tabTasks}},Da=(a,e)=>{switch(a){case"designs":case"tasks":return null;case"questions":return e.questions}},Oa=(a,e,t,s,o)=>d`
+  <div class="board-tabs" role="tablist" aria-label=${a.tabs}>
+    ${m.map(r=>{const i=Da(r,t);return d`<button
+        type="button"
+        role="tab"
+        id=${`board-tab-${r}`}
+        data-tab=${r}
+        data-alert=${r==="questions"?String(t.alert):n}
+        aria-controls=${`board-panel-${r}`}
+        aria-selected=${String(e===r)}
+        tabindex=${e===r?0:-1}
+        title=${r==="questions"&&t.questions>0?a.openCount(t.questions):n}
+        @click=${()=>s(r)}
+        @keydown=${o}
+      >
+        <span class="board-tab-label">${Ta(a,r)}</span
+        >${i===null||i===0?n:d`<span class="board-tab-count">${i}</span>`}
+      </button>`})}
+  </div>
+`,H=(a,e,t)=>d`
+  <div
+    class="board-panel"
+    id=${`board-panel-${a}`}
+    role="tabpanel"
+    aria-labelledby=${`board-tab-${a}`}
+    ?hidden=${e!==a}
+  >
+    ${t}
+  </div>
+`,W="",Aa=(a,e)=>e.statuses.some(t=>t.value===a),Sa=(a,e,t,s)=>d`
+  <section class="board-tasks" data-section="tasks" aria-label=${a.tasksBoard}>
+    ${Ea(a,e,t)}
+    <div class="board-kanban" role="group" aria-label=${a.tasksBoard}>
+      ${E(e.lanes,o=>o.status,o=>qa(a,e,o,t,s))}
+    </div>
+  </section>
+`,Ea=(a,e,t)=>d`
+  <div class="board-tasks-bar">
+    <div class="board-tasks-progress">
+      <span class="board-tasks-progress-label">${e.progress.label}</span>
+      ${e.progress.total===0?n:d`<div
+              class="board-progress"
+              role="progressbar"
+              aria-label=${e.progress.label}
+              aria-valuemin="0"
+              aria-valuemax=${e.progress.total}
+              aria-valuenow=${e.progress.done}
+            >
+              <span
+                class="board-progress-fill"
+                style=${`width: ${e.progress.done/e.progress.total*100}%`}
+              ></span>
+            </div>`}
+    </div>
+    ${e.canFilter?za(a,e,t):n}
+  </div>
+`,za=(a,e,t)=>{const s=(o,r,i)=>d`
+    <button
+      type="button"
+      class="board-filter-option"
+      data-filter=${o}
+      aria-pressed=${e.filter===o?"true":"false"}
+      @click=${()=>t.filterTodos(o)}
+    >
+      ${r}${i===null?n:d`<span class="board-filter-count">${i}</span>`}
+    </button>
+  `;return d`<div class="board-filter" role="group" aria-label=${a.filterTodos}>
+    ${s("all",a.filterAll,null)} ${s("human",a.filterHuman,e.humanCount)}
+  </div>`},qa=(a,e,t,s,o)=>d`
+  <section
+    class="board-lane"
+    data-column=${t.status}
+    data-tone=${t.tone}
+    aria-label=${t.label}
+    @dragover=${s.allowTodoDrop}
+    @drop=${r=>{r.preventDefault(),s.dropTodo(t.status)}}
+  >
+    <header class="board-lane-head">
+      <h3 class="board-lane-title">${t.label}</h3>
+      <span class="board-lane-count" title=${a.laneCount(t.cards.length)}>${t.cards.length}</span>
+    </header>
+    ${t.cards.length===0?d`<p class="board-lane-empty">${a.laneEmpty}</p>`:d`<ul class="board-cards">
+            ${E(t.cards,r=>r.id,r=>_a(a,e,r,s,o))}
+          </ul>`}
+    ${t.status==="todo"?Na(a,e,s):n}
+  </section>
+`,Ca=(a,e)=>e.proposal==="pending"||e.proposal==="decline"?d`<span
+        class="board-card-mark"
+        data-proposal=${e.proposal}
+        role="img"
+        aria-label=${a.proposedMark}
+        title=${a.proposedMark}
+        >?</span
+      >`:n,Ba=(a,e)=>d`
+  ${e.proposal==="accept"?d`<span class="board-tag" data-tone="done">${a.acceptedTag}</span>`:n}
+  ${e.proposal==="decline"?d`<span class="board-tag" data-tone="muted">${a.declinedTag}</span>`:n}
+  ${e.added?d`<span class="board-tag" data-tone="new">${a.addedTag}</span>`:n}
+  ${e.changed?d`<span class="board-tag" data-tone="changed">${a.changedTag}</span>`:n}
+`,_a=(a,e,t,s,o)=>d`
+  <li class="board-card-slot">
+    <article
+      class="dpk-card board-card"
+      data-todo=${t.id}
+      data-dpk-target=${`todo:${t.id}`}
+      data-grill-questions=${T(t.questions)}
+      data-status=${t.status}
+      data-proposal=${t.proposal??"none"}
+      data-added=${String(t.added)}
+      data-changed=${String(t.changed)}
+      draggable=${T(t.editable?"true":void 0)}
+      title=${T(t.editable?a.dragHint:void 0)}
+      @dragstart=${()=>s.beginTodoDrag(t.id)}
+      @dragend=${()=>s.endTodoDrag()}
+    >
+      <div class="board-card-head">
+        ${Ca(a,t)}
+        <h4 class="dpk-card-title board-card-title">${t.title}</h4>
+        <div class="board-card-tags">${Ba(a,t)}</div>
+      </div>
+      ${t.design===null?n:d`<div class="board-card-design">
+              <span class="board-tag" data-tone="design" title=${t.design.title}>${t.design.title}</span>
+            </div>`}
+      ${t.note===null?n:d`<p class="dpk-card-text board-card-note">${t.note}</p>`}
+      ${t.reason===null||t.proposal==="accept"?n:d`<p class="board-reason"><span class="board-reason-label">${a.reason}</span>${t.reason}</p>`}
+      <div class="board-card-controls">
+        ${t.proposal==="pending"?La(a,t,s):t.proposal==="decline"?n:Pa(a,e,t,s,o)}
+        ${t.assigneeName===null?n:d`<span class="board-assignee" data-kind=${t.assigneeKind??"agent"} title=${a.assignee}
+                >${t.assigneeName}</span
+              >`}
+        ${t.proposal==="accept"||t.proposal==="decline"?d`<button
+                type="button"
+                class="dpk-btn dpk-btn--ghost board-undo"
+                @click=${()=>s.decide(t.id,"clear")}
+              >
+                ${a.undoDecision}
+              </button>`:n}
+        ${M(`todo:${t.id}`,a.commentOn(t.title),t.comments,s)}
+        ${t.added?d`<button
+                class="dpk-icon-btn board-todo-remove"
+                type="button"
+                aria-label=${a.removeAdded}
+                title=${a.removeAdded}
+                @click=${()=>s.deleteTodo(t.id)}
+              >
+                ${He()}
+              </button>`:n}
+      </div>
+    </article>
+  </li>
+`,La=(a,e,t)=>d`
+  <div class="board-decision" role="group" aria-label=${a.decisionOf(e.title)}>
+    <button
+      type="button"
+      class="dpk-btn board-decide"
+      data-decision="accept"
+      @click=${()=>t.decide(e.id,"accept")}
+    >
+      ${a.accept}
+    </button>
+    <button
+      type="button"
+      class="dpk-btn dpk-btn--ghost board-decide"
+      data-decision="decline"
+      @click=${()=>t.decide(e.id,"decline")}
+    >
+      ${a.decline}
+    </button>
+  </div>
+`,Pa=(a,e,t,s,o)=>t.editable?o.get(t.id).render({options:e.statuses.map(r=>({value:r.value,label:r.label})),value:t.status,onChange:r=>{Aa(r,e)&&r!==t.status&&s.setStatus(t.id,r)},ariaLabel:a.statusOf(t.title),className:"board-todo-status"}):d`<span class="board-todo-state" data-status=${t.status}>${t.statusLabel}</span>`,Na=(a,e,t)=>d`
+  <form
+    class="board-add-todo"
+    @submit=${s=>{s.preventDefault();const o=P(s.currentTarget,HTMLFormElement);if(o===null)return;const r=P(o.elements.namedItem("title"),HTMLInputElement),i=P(o.querySelector('dpk-select[name="assignee"]'),Ve),c=r?.value.trim()??"";r===null||c===""||(t.addTodo(c,i===null||i.value===W?null:i.value),r.value="")}}
+  >
+    <input
+      class="dpk-input board-add-title"
+      name="title"
+      type="text"
+      autocomplete="off"
+      aria-label=${a.newTodo}
+      placeholder=${a.newTodoPlaceholder}
+    />
+    <div class="board-add-row">
+      ${e.members.length===0?n:d`<dpk-select
+              class="board-add-assignee"
+              name="assignee"
+              aria-label=${a.newTodoAssignee}
+              .options=${[{value:W,label:a.unassigned},...e.members.map(s=>({value:s.id,label:s.label}))]}
+              .value=${W}
+            ></dpk-select>`}
+      <button class="dpk-btn board-add-submit" type="submit">${a.addTodo}</button>
+    </div>
+  </form>
+`,Ra=We`
+  /* The shell's sidebar is a left-hand rail (see \`sidebarLayout\`), a drawer on a phone. */
+  :host {
+    --dpk-sidebar-padding: 12px 16px;
+    --dpk-sidebar-padding-end: 20px;
+  }
+
+  .board-rail {
+    display: grid;
+    gap: 14px;
+  }
+
+  .board {
+    display: grid;
+    gap: 18px;
+    max-width: 1100px;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  /* A tab that reads keeps a comfortable measure; the task board takes the whole column. */
+  .board-panel > .board-designs,
+  .board-panel > .board-section,
+  .board-panel > .board-empty {
+    max-width: 880px;
+  }
+
+  /* Stacked, the column is what ends the page: it clears the hand-off dock. */
+  @media (max-width: 760px) {
+    .dpk-main-body {
+      padding-bottom: 24px;
+    }
+  }
+
+  [data-status='working'],
+  [data-status='doing'] {
+    --board-tone: var(--dpk-blue);
+    --board-tone-soft: var(--dpk-blue-soft);
+    --tone: var(--dpk-blue);
+    --tone-soft: var(--dpk-blue-soft);
+  }
+
+  [data-status='waiting'] {
+    --board-tone: var(--dpk-amber);
+    --board-tone-soft: var(--dpk-amber-soft);
+    --tone: var(--dpk-amber);
+    --tone-soft: var(--dpk-amber-soft);
+  }
+
+  [data-status='blocked'] {
+    --board-tone: var(--dpk-danger);
+    --board-tone-soft: var(--dpk-danger-soft);
+    --tone: var(--dpk-danger);
+    --tone-soft: var(--dpk-danger-soft);
+  }
+
+  [data-status='done'] {
+    --board-tone: var(--dpk-green);
+    --board-tone-soft: var(--dpk-green-soft);
+    --tone: var(--dpk-green);
+    --tone-soft: var(--dpk-green-soft);
+  }
+
+  [data-status='todo'] {
+    --board-tone: var(--dpk-rule-strong);
+    --board-tone-soft: var(--dpk-paper-sunken);
+    --tone: var(--dpk-rule-strong);
+    --tone-soft: var(--dpk-paper-sunken);
+  }
+
+  /* ------------------------------------------------------------- status */
+
+  .board-status {
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent);
+  }
+
+  /* On a phone the header has no room; the Context tab says the same. */
+  @media (max-width: 720px) {
+    .board-status--header {
+      display: none;
+    }
+  }
+
+  .board-status[data-status='working']::before {
+    animation: board-pulse 1.8s var(--dpk-ease) infinite;
+  }
+
+  @keyframes board-pulse {
+    50% {
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 0%, transparent);
+    }
+  }
+
+  /* --------------------------------------------------------------- tabs */
+
+  /* Stays at the top of the main area while a long log or question list scrolls. */
+  .board-tabs {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    gap: 3px;
+    padding: 3px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-paper-sunken);
+    box-shadow:
+      inset 0 1px 2px var(--dpk-shade-1),
+      0 6px 14px -10px var(--dpk-shade-3);
+  }
+
+  .board-tabs [role='tab'] {
+    flex: 1 1 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    min-width: 0;
+    padding: 7px 10px;
+    border: 1px solid transparent;
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 550;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      color 140ms var(--dpk-ease),
+      background 140ms var(--dpk-ease);
+  }
+
+  .board-tabs [role='tab']:hover {
+    color: var(--dpk-ink);
+  }
+
+  .board-tabs [role='tab']:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .board-tabs [role='tab'][aria-selected='true'] {
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-weight: 700;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  @media (max-width: 400px) {
+    .board-tabs [role='tab'] {
+      gap: 5px;
+      padding-inline: 6px;
+    }
+  }
+
+  /* Too narrow for every label whole, a label gives way before its count does. */
+  .board-tab-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .board-tab-count {
+    flex: none;
+    min-width: 18px;
+    padding: 0 6px;
+    border-radius: 999px;
+    background: var(--dpk-rule);
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    line-height: 17px;
+    text-align: center;
+  }
+
+  /* An open blocker: the agent is stuck until the reader answers. */
+  .board-tabs [data-alert='true'] .board-tab-count {
+    background: var(--dpk-danger);
+    color: #fff;
+  }
+
+  .board-panel {
+    display: grid;
+    gap: 18px;
+    min-width: 0;
+    animation: board-fade 180ms var(--dpk-ease);
+  }
+
+  .board-panel[hidden] {
+    display: none;
+  }
+
+  @keyframes board-fade {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  /* ------------------------------------------------------------ designs */
+
+  .board-designs {
+    display: grid;
+    gap: 14px;
+    min-width: 0;
+  }
+
+  .board-design-layout {
+    display: grid;
+    grid-template-columns: 220px minmax(0, 1fr);
+    gap: 14px;
+    align-items: start;
+    min-width: 0;
+  }
+
+  @media (max-width: 760px) {
+    .board-design-layout {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .board-design-index {
+    min-width: 0;
+  }
+
+  .board-design-index-list {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .board-design-index-item {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid transparent;
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .board-design-index-item:hover {
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink);
+  }
+
+  .board-design-index-item:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .board-design-index-item[aria-current='true'] {
+    border-color: var(--dpk-rule);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-weight: 650;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  .board-design-index-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .board-design-index-count {
+    flex: 0 0 auto;
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+  }
+
+  .board-design-detail {
+    min-width: 0;
+  }
+
+  /*
+   * A doc is the kit's card (the card atom), roomier for prose. Its title names
+   * it, so no edge is colored to tell it apart (a stripe along any edge says
+   * nothing the head does not; dev-docs/guidelines/coding.md).
+   */
+  .board-design {
+    --dpk-card-gap: 10px;
+    padding: 16px 18px;
+  }
+
+  .board-design-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .board-design-title {
+    margin: 0;
+    color: var(--dpk-ink);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.45;
+  }
+
+  .board-design-head .board-comment {
+    flex: 0 0 auto;
+  }
+
+  .board-design-body {
+    color: var(--dpk-ink);
+    font-size: 14px;
+    line-height: 1.7;
+  }
+
+  /* The prose atom is for a page; inside a card its headings come down a size. */
+  .board-design-body :where(h1, h2, h3, h4) {
+    margin-top: 1.1em;
+    color: var(--dpk-ink);
+    font-size: 13.5px;
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: none;
+  }
+
+  .board-design-tasks {
+    display: grid;
+    gap: 6px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--dpk-rule);
+  }
+
+  .board-design-tasks-title {
+    margin: 0;
+    color: var(--dpk-ink-soft);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .board-design-task-list {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .board-design-task {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding: 3px 0;
+  }
+
+  .board-design-task .board-todo-state {
+    flex: 0 0 auto;
+  }
+
+  .board-design-task-title {
+    min-width: 0;
+    color: var(--dpk-ink);
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .board-design-task[data-proposal='decline'] .board-design-task-title {
+    color: var(--dpk-ink-faint);
+    text-decoration: line-through;
+  }
+
+  .board-design-empty {
+    margin: 0;
+    color: var(--dpk-ink-faint);
+    font-size: 12px;
+  }
+
+  .board-design-figures {
+    display: grid;
+    gap: 14px;
+    min-width: 0;
+  }
+
+  .board-design-figures ::slotted(*) {
+    min-width: 0;
+  }
+
+  /* ----------------------------------------------------------- sections */
+
+  .board-section {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .board-rail-section {
+    gap: 6px;
+  }
+
+  .board-section-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--dpk-rule);
+  }
+
+  .board-section-head h2 {
+    margin: 0;
+    color: var(--dpk-ink);
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  /* The rail is narrow and always in view: its headings are labels, not breaks. */
+  .board-rail-section .board-section-head {
+    padding-bottom: 3px;
+    line-height: 1.3;
+  }
+
+  .board-rail-section .board-section-head h2 {
+    font-size: 11.5px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--dpk-ink-soft);
+  }
+
+  .board-section-meta {
+    color: var(--dpk-ink-faint);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .board-lede {
+    margin: -4px 0 0;
+    color: var(--dpk-ink-soft);
+    font-size: 12.5px;
+  }
+
+  .board-empty {
+    display: block;
+    max-width: none;
+    margin: 0;
+    padding: 12px 14px;
+    border-radius: var(--dpk-radius);
+    background: transparent;
+    font-size: 13px;
+    line-height: 1.5;
+    text-align: start;
+  }
+
+  .board-tag {
+    flex: 0 0 auto;
+    padding: 1px 7px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 650;
+    line-height: 1.6;
+    white-space: nowrap;
+  }
+
+  .board-tag[data-tone='done'] {
+    background: var(--dpk-green-soft);
+    color: color-mix(in srgb, var(--dpk-green) 75%, var(--dpk-ink));
+  }
+
+  .board-tag[data-tone='new'] {
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent-ink);
+  }
+
+  .board-tag[data-tone='changed'] {
+    background: var(--dpk-blue-soft);
+    color: color-mix(in srgb, var(--dpk-blue) 75%, var(--dpk-ink));
+  }
+
+  .board-tag[data-tone='design'] {
+    overflow: hidden;
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink-soft);
+    font-weight: 550;
+    text-overflow: ellipsis;
+  }
+
+  /* The doc a card belongs to sits on its own line: the title keeps the width. */
+  .board-card-design {
+    display: flex;
+    min-width: 0;
+  }
+
+  .board-card-design .board-tag {
+    max-width: 100%;
+  }
+
+  .board-tag[data-tone='muted'] {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink-soft);
+  }
+
+  .board-comment {
+    flex: 0 0 auto;
+    position: relative;
+  }
+
+  /* ---------------------------------------------------------- questions */
+
+  /* Blocking questions are red: the agent is waiting. The rest are amber: the
+     agent goes on under its assumption. Either turns green once replied to. */
+  .board-group {
+    --board-group-tone: var(--dpk-amber);
+    --board-group-soft: var(--dpk-amber-soft);
+    display: grid;
+    gap: 8px;
+  }
+
+  .board-group[data-group='blocking'] {
+    --board-group-tone: var(--dpk-danger);
+    --board-group-soft: var(--dpk-danger-soft);
+  }
+
+  .board-group-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+    color: color-mix(in srgb, var(--board-group-tone) 75%, var(--dpk-ink));
+    font-size: 12.5px;
+    font-weight: 700;
+  }
+
+  .board-group-title::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--board-group-tone);
+  }
+
+  .board-group + .board-group {
+    margin-top: 6px;
+  }
+
+  .board-questions {
+    display: grid;
+    gap: 10px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* A question is the kit's card (the card atom) in its group's tone: green once replied to. */
+  .board-question {
+    --dpk-card-tone: var(--board-group-tone);
+    --dpk-card-gap: 10px;
+    padding: 14px 16px;
+  }
+
+  .board-question[data-resolved='true'] {
+    --dpk-card-tone: var(--dpk-green);
+  }
+
+  .board-question-head {
+    gap: 10px;
+  }
+
+  .board-question-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 650;
+    line-height: 1.5;
+  }
+
+  .board-question-text {
+    color: var(--dpk-ink-soft);
+    font-size: 13px;
+    line-height: 1.65;
+    white-space: pre-line;
+  }
+
+  .board-ref {
+    flex: 0 0 auto;
+    padding: 2px 7px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--board-group-soft);
+    color: color-mix(in srgb, var(--board-group-tone) 75%, var(--dpk-ink));
+    font-family: var(--dpk-mono);
+    font-size: 11.5px;
+    font-weight: 700;
+    line-height: 1.6;
+  }
+
+  .board-question[data-resolved='true'] .board-ref {
+    background: var(--dpk-green-soft);
+    color: color-mix(in srgb, var(--dpk-green) 75%, var(--dpk-ink));
+  }
+
+  .board-assumption {
+    display: grid;
+    gap: 3px;
+    padding: 9px 12px;
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-sunken);
+  }
+
+  .board-assumption-label {
+    color: var(--dpk-ink-faint);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+  }
+
+  .board-assumption-text {
+    margin: 0;
+    color: var(--dpk-ink);
+    font-size: 13.5px;
+    line-height: 1.55;
+    white-space: pre-line;
+  }
+
+  .board-question[data-reply='answer'] .board-assumption-text {
+    color: var(--dpk-ink-faint);
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, var(--dpk-ink-faint) 60%, transparent);
+  }
+
+  .board-reply {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .board-approve svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .board-approve[aria-pressed='true'] {
+    border-color: var(--dpk-green);
+    background: var(--dpk-green-soft);
+    color: color-mix(in srgb, var(--dpk-green) 70%, var(--dpk-ink));
+  }
+
+  .board-other[aria-pressed='true'] {
+    border-color: color-mix(in srgb, var(--dpk-accent) 55%, var(--dpk-rule));
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent-ink);
+  }
+
+  .board-answer {
+    width: 100%;
+    box-sizing: border-box;
+    resize: vertical;
+  }
+
+  .board-answer[hidden] {
+    display: none;
+  }
+
+  /* -------------------------------------------------------------- tasks */
+
+  .board-tasks {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .board-tasks-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+  }
+
+  .board-tasks-progress {
+    display: grid;
+    flex: 1 1 240px;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .board-tasks-progress-label {
+    color: var(--dpk-ink-soft);
+    font-size: 12.5px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .board-progress {
+    height: 6px;
+    border-radius: 999px;
+    background: var(--dpk-rule);
+    overflow: hidden;
+  }
+
+  .board-progress-fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--dpk-green);
+    transition: width 240ms var(--dpk-ease);
+  }
+
+  /*
+   * The board itself, drawn the way \`dpk-board-kanban\` draws one: lanes side by
+   * side in reading order, taking an equal share of the column and scrolling
+   * sideways on their own — never the page — once they no longer fit.
+   */
+  .board-kanban {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    max-width: 100%;
+    padding-bottom: 4px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+  }
+
+  .board-lane {
+    display: flex;
+    flex: 1 1 232px;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 232px;
+    max-width: 340px;
+    padding: 10px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 3px var(--dpk-shade-1);
+  }
+
+  /* The lane's own tone, from the shared \`data-tone\` map; grey has no entry there. */
+  .board-lane[data-tone='gray'] {
+    --tone: var(--dpk-ink-soft);
+    --tone-soft: var(--dpk-paper-raised);
+  }
+
+  /* Blocked reads red: the shared map names that tone \`danger\`, and the lane spells it \`red\`. */
+  .board-lane[data-tone='red'] {
+    --tone: var(--dpk-danger);
+    --tone-soft: var(--dpk-danger-soft);
+  }
+
+  .board-lane-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 2px;
+  }
+
+  .board-lane-title {
+    margin: 0;
+    padding: 2px 9px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--tone, var(--dpk-ink-soft)) 14%, transparent);
+    color: var(--tone, var(--dpk-ink-soft));
+    font-size: 12px;
+    font-weight: 650;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+  }
+
+  .board-lane-count {
+    flex: none;
+    margin-left: auto;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-mono);
+    font-size: 11px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  .board-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 44px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .board-card-slot {
+    min-width: 0;
+  }
+
+  /* A todo is the kit's card (the card atom), tighter for a lane. */
+  .board-card {
+    --dpk-card-gap: 6px;
+    padding: 10px 11px;
+    overflow-wrap: anywhere;
+  }
+
+  /* Only a todo a person has can be dragged: its status is the reader's to set. */
+  .board-card[draggable='true'] {
+    cursor: grab;
+  }
+
+  .board-card[data-added='true'] {
+    background: color-mix(in srgb, var(--dpk-accent) 6%, var(--dpk-paper-raised));
+  }
+
+  .board-card[data-proposal='pending'] {
+    --dpk-card-tone: var(--dpk-violet);
+  }
+
+  .board-card[data-proposal='decline'] {
+    background: var(--dpk-paper-sunken);
+  }
+
+  .board-card[data-proposal='decline'] .board-card-title,
+  .board-card[data-proposal='decline'] .board-reason {
+    color: var(--dpk-ink-faint);
+  }
+
+  .board-card[data-proposal='decline'] .board-card-title {
+    text-decoration: line-through;
+  }
+
+  .board-card[data-status='done'] .board-card-title {
+    color: var(--dpk-ink-faint);
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in srgb, var(--dpk-ink-faint) 60%, transparent);
+  }
+
+  .board-card-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .board-card-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .board-card-tags {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  /* A proposal is not work yet: a question mark beside its title. */
+  .board-card-mark {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+    border: 1.5px dashed var(--dpk-violet);
+    border-radius: 50%;
+    background: var(--dpk-violet-soft);
+    color: var(--dpk-violet);
+    font-size: 10.5px;
+    font-weight: 800;
+    line-height: 1;
+  }
+
+  .board-card-mark[data-proposal='decline'] {
+    border-color: var(--dpk-rule-strong);
+    background: transparent;
+    color: var(--dpk-ink-faint);
+  }
+
+  .board-card-note,
+  .board-reason {
+    margin: 0;
+    color: var(--dpk-ink-soft);
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  .board-reason-label {
+    margin-right: 6px;
+    padding: 0 5px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-violet-soft);
+    color: var(--dpk-violet);
+    font-size: 10.5px;
+    font-weight: 700;
+  }
+
+  .board-card-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .board-card-controls .board-comment {
+    margin-left: auto;
+  }
+
+  /* A lane with nothing in it keeps its place, so the board's shape still says where the work is. */
+  .board-lane-empty {
+    margin: 0;
+    padding: 10px 8px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    color: var(--dpk-ink-faint);
+    font-size: 11.5px;
+    text-align: center;
+  }
+
+  /* ------------------------------------------------------ status / filter */
+
+  .board-todo-status {
+    width: auto;
+    min-width: 0;
+    min-height: 26px;
+    height: 26px;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 12px;
+    border-color: color-mix(in srgb, var(--board-tone) 45%, var(--dpk-rule));
+    background-color: var(--board-tone-soft);
+    color: var(--dpk-ink);
+    font-weight: 600;
+  }
+
+  /* The agent's own status: it reports it by rewriting the board. */
+  .board-todo-state {
+    display: inline-flex;
+    align-items: center;
+    height: 22px;
+    padding: 0 8px;
+    border-radius: 999px;
+    background: var(--board-tone-soft);
+    color: color-mix(in srgb, var(--board-tone) 75%, var(--dpk-ink));
+    font-size: 11.5px;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .board-todo-state[data-status='todo'] {
+    color: var(--dpk-ink-soft);
+  }
+
+  .board-assignee {
+    display: inline-flex;
+    align-items: center;
+    max-width: 140px;
+    height: 22px;
+    padding: 0 8px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: 999px;
+    color: var(--dpk-ink-soft);
+    font-size: 11.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .board-assignee::before {
+    content: '@';
+    margin-right: 1px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .board-assignee[data-kind='human'] {
+    border-color: color-mix(in srgb, var(--dpk-violet) 35%, var(--dpk-rule));
+    background: var(--dpk-violet-soft);
+    color: var(--dpk-violet);
+    font-weight: 600;
+  }
+
+  .board-assignee[data-kind='human']::before {
+    color: inherit;
+  }
+
+  .board-filter {
+    display: inline-flex;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-sunken);
+  }
+
+  .board-tasks-bar .board-filter {
+    margin-left: auto;
+  }
+
+  .board-filter-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 10px;
+    border: 0;
+    border-radius: var(--dpk-radius-xs);
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  .board-filter-option:hover {
+    color: var(--dpk-ink);
+  }
+
+  .board-filter-option:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .board-filter-option[aria-pressed='true'] {
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-weight: 650;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  .board-filter-count {
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    color: var(--dpk-violet);
+  }
+
+  .board-decision {
+    display: flex;
+    gap: 6px;
+  }
+
+  .board-decide,
+  .board-undo {
+    min-height: 26px;
+    height: 26px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  .board-decide[data-decision='accept'] {
+    border-color: color-mix(in srgb, var(--dpk-green) 50%, var(--dpk-rule));
+    color: color-mix(in srgb, var(--dpk-green) 70%, var(--dpk-ink));
+  }
+
+  .board-decide[data-decision='accept']:hover {
+    background: var(--dpk-green-soft);
+  }
+
+  .board-add-todo {
+    display: grid;
+    gap: 6px;
+  }
+
+  .board-add-row {
+    display: flex;
+    gap: 6px;
+  }
+
+  .board-add-assignee {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+  }
+
+  .board-add-submit {
+    flex: 0 0 auto;
+  }
+
+  /* A phone shows one lane and a hint of the next: the board still scrolls sideways, never the page. */
+  @media (max-width: 640px) {
+    .board-lane {
+      flex-basis: 208px;
+      min-width: 208px;
+    }
+  }
+
+  /* ------------------------------------------------------------ outputs */
+
+  .board-outputs {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-shadow-xs);
+    overflow: hidden;
+  }
+
+  .board-output {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 6px 6px 6px 10px;
+    border-radius: 0;
+    border-top: 1px solid var(--dpk-rule);
+  }
+
+  .board-output:first-child {
+    border-top: 0;
+  }
+
+  .board-output-body {
+    display: grid;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .board-output-head {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .board-kind {
+    flex: 0 0 auto;
+    padding: 0 5px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1.7;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .board-output-link,
+  .board-output-label,
+  .board-output-head .board-output-path {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--dpk-ink);
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .board-output-link {
+    text-decoration: none;
+  }
+
+  .board-output-link:hover {
+    color: var(--dpk-blue);
+    text-decoration: underline;
+  }
+
+  .board-output-link:focus-visible {
+    outline: none;
+    border-radius: var(--dpk-radius-xs);
+    box-shadow: var(--dpk-focus);
+  }
+
+  .board-output-path {
+    font-family: var(--dpk-mono);
+    font-size: 12px;
+  }
+
+  .board-output-head .board-output-path {
+    font-size: 12px;
+  }
+
+  .board-output-sub {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 11px;
+    font-weight: 400;
+  }
+
+  .board-output-text {
+    margin: 2px 0 0;
+    color: var(--dpk-ink-soft);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .board-copy[data-copied='true'] {
+    color: var(--dpk-green);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .board-status[data-status='working']::before {
+      animation: none;
+    }
+
+    .board-progress-fill {
+      transition: none;
+    }
+
+    .board-panel {
+      animation: none;
+    }
+  }
+`,Ga=1500;class Ae extends X{static{this.styles=[X.styles,Ye,Ra]}static{this.properties={tab:{state:!0},todoFilter:{state:!0},selectedDesign:{state:!0}}}#a=null;#t=null;#o;#e=null;#s=new Ke(this);constructor(){super(),this.tab="designs",this.todoFilter="all",this.selectedDesign=null}get sidebarLayout(){return{side:"left",defaultWidth:288,narrow:"drawer"}}definitionFor(e){return Te(e)}showTarget(e){switch(e.type){case"design":this.tab="designs",this.selectedDesign=e.id;return;case"question":this.tab="questions";return;case"todo":this.tab="tasks",this.todoFilter="all";return}}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#o)}renderRegions(e){const t=U(this.locale),s=c=>e.commentCount(c),o=me(e.state,s),r=this.#n(),i=this.tab;return{header:this.#d(t,e.state),sidebar:d`<div class="board-rail">
+        ${wa(t,$e(e.state),this.#t,r)}
+      </div>`,main:d`
+        <div class="board">
+          ${Oa(t,i,{questions:o.open,alert:o.blockingOpen>0},c=>{this.tab=c},c=>this.#r(c))}
+          ${H("designs",i,ga(t,ve(t,e.state,s,this.selectedDesign),r))}
+          ${H("questions",i,o.total===0?d`<p class="dpk-empty board-empty" data-variant="dashed">${t.noQuestions}</p>`:ma(t,o,r))}
+          ${H("tasks",i,Sa(t,xe(t,e.state,e.base,s,this.todoFilter),r,this.#s))}
+        </div>
+      `}}updated(){super.updated();const e=this.#a;e!==null&&(this.#a=null,this.renderRoot.querySelector(`[data-answer-text="${e}"]`)?.focus())}#r(e){const t=ya(this.tab,e.key);t!==null&&(e.preventDefault(),this.tab=t,this.updateComplete.then(()=>this.renderRoot.querySelector(`[data-tab="${t}"]`)?.focus()))}#d(e,t){return t.status===null?n:d`<span class="dpk-status board-status board-status--header" data-status=${t.status}>
+      ${ra(e,t.status)}
+    </span>`}#n(){return{answer:(e,t)=>this.#l(e,t),answerOther:e=>this.#p(e),decide:(e,t)=>this.dispatch(ie(e,t)),selectDesign:e=>{this.selectedDesign=e},setStatus:(e,t)=>this.dispatch(Q(e,t)),filterTodos:e=>{this.todoFilter=e},addTodo:(e,t)=>this.#c(e,t),deleteTodo:e=>this.dispatch(pe(e)),beginTodoDrag:e=>{this.#e=e},endTodoDrag:()=>{this.#e=null},allowTodoDrop:e=>{this.#e!==null&&e.preventDefault()},dropTodo:e=>this.#i(e),copy:(e,t)=>{this.#u(e,t)},comment:e=>this.requestComment(e)}}#i(e){const t=this.#e;if(this.#e=null,t===null)return;const{state:s}=this.derivation,o=h(s,t);o===void 0||o.status===e||!C(s,o)||this.dispatch(Q(t,e))}#l(e,t){this.dispatch(I(e,t))}#p(e){this.dispatch(I(e,{kind:"answer",text:""})).ok&&(this.#a=e)}#c(e,t){const{base:s,state:o}=this.derivation,r=[...s.todos,...o.todos].map(i=>i.id);this.dispatch(le(Fe(e,r),e,t))}async#u(e,t){await je(t)&&(clearTimeout(this.#o),this.#t=e,this.requestUpdate(),this.#o=setTimeout(()=>{this.#t=null,this.requestUpdate()},Ga))}}const Se=()=>{Je(),customElements.get("dpk-view-task-board")||customElements.define("dpk-view-task-board",Ae)},Ia=Object.freeze(Object.defineProperty({__proto__:null,DpkViewTaskBoard:Ae,MEMBER_KINDS:ee,TASK_BOARD_PAGE:ne,TASK_STATUSES:Z,TODO_STATUSES:D,addTodo:le,answerQuestion:I,applyTaskBoardAction:ce,decideProposal:ie,defineTaskBoardElement:Se,deleteTodo:pe,describeTaskBoardAction:ge,emptyTaskBoardBase:oe,isAnswered:re,isHumanTodo:C,isPlanned:R,outputLocation:we,parseTaskBoardBase:te,presentDesigns:ve,presentOutputs:$e,presentQuestions:me,presentTasks:xe,resolveTaskBoardNavigation:fe,serializeTaskBoardAction:ke,setTodoStatus:Q,taskBoardActions:f,taskBoardBaseSchema:ae,taskBoardCommentTargets:he,taskBoardDefinitionFor:Te,taskBoardHasTarget:ye,taskBoardMessages:U,taskBoardTitle:ue,taskPageTargetLabel:be},Symbol.toStringTag,{value:"Module"}));export{Se as d,Ia as i};