dev-process-kit 0.2.1 → 0.3.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +178 -60
  2. package/dist/boards.js +1 -0
  3. package/dist/chunks/shared-BX1EnRfr.js +1 -0
  4. package/dist/chunks/shared-C-M2Nfmu.js +686 -0
  5. package/dist/chunks/shared-Cas88qVh.js +2165 -0
  6. package/dist/chunks/{shared-DeXM1v86.js → shared-Cejw83eH.js} +21 -29
  7. package/dist/chunks/shared-CfVpKPRY.js +1844 -0
  8. package/dist/chunks/shared-CnPCm4bJ.js +31 -0
  9. package/dist/chunks/shared-D1iBuYZV.js +6208 -0
  10. package/dist/chunks/shared-D7VtCoY6.js +3586 -0
  11. package/dist/chunks/{shared-zZF1zU0o.js → shared-DHVDag3x.js} +25 -56
  12. package/dist/chunks/shared-DdpMqkAH.js +4928 -0
  13. package/dist/chunks/shared-EYOAbLSo.js +1 -0
  14. package/dist/chunks/shared-TrlnHjrJ.js +1 -0
  15. package/dist/chunks/shared-a9QCZpxj.js +574 -0
  16. package/dist/chunks/shared-df9XN7ns.js +904 -0
  17. package/dist/chunks/shared-dnY35u9q.js +2530 -0
  18. package/dist/chunks/shared-e9ia12Uz.js +1636 -0
  19. package/dist/chunks/shared-qk9TB_UM.js +705 -0
  20. package/dist/components.js +1 -1
  21. package/dist/index.js +1 -1
  22. package/dist/views/delegation-poker.js +1 -0
  23. package/dist/views/plain.js +1 -0
  24. package/dist/views/prototype.js +1 -0
  25. package/dist/views/slides.js +1 -0
  26. package/dist/views/task-board.js +1 -0
  27. package/dist/views/usm.js +1 -0
  28. package/package.json +8 -10
  29. package/dist/chunks/shared-B5lBiq5s.js +0 -1
  30. package/dist/chunks/shared-BjyoXjSO.js +0 -1
  31. package/dist/chunks/shared-C-d71uRP.js +0 -573
  32. package/dist/chunks/shared-C5n6LBUz.js +0 -1105
  33. package/dist/chunks/shared-CAWKGcWJ.js +0 -1053
  34. package/dist/chunks/shared-CdZhkPto.js +0 -1
  35. package/dist/chunks/shared-DB_C1Mdu.js +0 -1
  36. package/dist/chunks/shared-DDOpqbVL.js +0 -49
  37. package/dist/chunks/shared-DehzCTC2.js +0 -1616
  38. package/dist/chunks/shared-Dfj6O0K4.js +0 -2774
  39. package/dist/chunks/shared-DiFAX1_p.js +0 -3780
  40. package/dist/chunks/shared-DkPo0jX3.js +0 -4214
  41. package/dist/chunks/shared-GL2Z98Cz.js +0 -4206
  42. package/dist/chunks/shared-cMhjZGRs.js +0 -301
  43. package/dist/templates/delegation-poker.js +0 -1
  44. package/dist/templates/event-storming.js +0 -1
  45. package/dist/templates/example-mapping.js +0 -1
  46. package/dist/templates/plain.js +0 -1
  47. package/dist/templates/prototype.js +0 -1
  48. package/dist/templates/slides.js +0 -1
  49. package/dist/templates/task-board.js +0 -1
  50. package/dist/templates/usm.js +0 -1
  51. package/dist/templates/whiteboard.js +0 -1
@@ -1,1616 +0,0 @@
1
- import{ae as Qe,aJ as q,af as b,ag as i,ah as f,ai as c,aj as $,aG as h,aq as Z,aH as B,ak as ee,al as oe,p as w,w as Ie,an as Ue,aD as He,av as Me,ap as P,P as Ke,e as je,a0 as Fe,V as Ye,R as S,a3 as s,a4 as n,B as Je,a5 as y,bc as ae,bd as Xe,aQ as N,K as Ve,aN as Ze,a2 as eo,T as te,l as oo,be as ao}from"./shared-DiFAX1_p.js";import{o as W}from"./shared-BjyoXjSO.js";const re=["working","waiting","blocked","done"],D=["todo","doing","blocked","done"],ne=["agent","human"],E=["why","what","goals","nonGoals"],T=ee(c(),oe(1)),to=b({id:h,name:T,kind:i($(ne),"agent")}),ro=b({id:h,title:T,status:i($(D),"todo"),assignee:i(h),note:i(c()),proposed:i(Z(),!1),reason:i(c()),questions:B}),no=b({id:h,label:i(c()),href:T,kind:i(c()),description:i(c()),questions:B}),so=b({why:i(c()),what:i(c()),goals:i(f(c()),[]),nonGoals:i(f(c()),[])}),io=b({id:h,from:i(h),at:i(c()),title:i(c()),body:i(c()),points:i(f(c()),[]),questions:B}),lo=b({id:h,ref:i(T),title:T,description:i(c()),blocking:i(Z(),!1),assumption:i(c())}),de=b({title:i(c(),""),status:i($(re)),updatedAt:i(c()),context:i(so,{}),members:i(f(to),[]),todos:i(f(ro),[]),outputs:i(f(no),[]),log:i(f(io),[]),questions:i(f(lo),[])}),A=(o,e)=>{const a=new Set;for(const t of e){if(a.has(t))throw new Error(`duplicate ${o} id: ${t}`);a.add(t)}},u=o=>o===void 0||o.trim()===""?null:o,R=o=>o.filter(e=>e.trim()!==""),se=o=>{const e=Qe(de,o);A("member",e.members.map(t=>t.id)),A("todo",e.todos.map(t=>t.id)),A("output",e.outputs.map(t=>t.id)),A("log",e.log.map(t=>t.id)),A("question",e.questions.map(t=>t.id));const a=new Set(e.members.map(t=>t.id));for(const t of e.todos)if(t.assignee!==void 0&&!a.has(t.assignee))throw new Error(`todo ${t.id} is assigned to ${t.assignee}, which is not in members`);for(const t of e.log){if(t.from!==void 0&&!a.has(t.from))throw new Error(`log entry ${t.id} is from ${t.from}, which is not in members`);if(u(t.title)===null&&u(t.body)===null)throw new Error(`log entry ${t.id} needs a title or a body`)}for(const t of e.questions)if(!t.blocking&&u(t.assumption)===null)throw new Error(`question ${t.id} does not block, so it needs the assumption the agent works on`);return{title:e.title,status:e.status??null,updatedAt:u(e.updatedAt),context:{why:u(e.context.why),what:u(e.context.what),goals:R(e.context.goals),nonGoals:R(e.context.nonGoals)},members:e.members,todos:e.todos.map(t=>({id:t.id,title:t.title,status:t.status,assignee:t.assignee??null,note:u(t.note),proposed:t.proposed,reason:u(t.reason),added:!1,...q(t.questions)})),outputs:e.outputs.map(t=>({id:t.id,label:u(t.label),href:t.href,kind:u(t.kind),description:u(t.description),...q(t.questions)})),log:e.log.map(t=>({id:t.id,from:t.from??null,at:u(t.at),title:u(t.title),body:u(t.body),points:R(t.points),...q(t.questions)})),questions:e.questions.map((t,r)=>({id:t.id,ref:t.ref??`Q${r+1}`,title:t.title,description:u(t.description),blocking:t.blocking,assumption:u(t.assumption)})),answers:{},decisions:{}}},ie=()=>({title:"",status:null,updatedAt:null,context:{why:null,what:null,goals:[],nonGoals:[]},members:[],todos:[],outputs:[],log:[],questions:[],answers:{},decisions:{}}),O=(o,e)=>e===null?void 0:o.members.find(a=>a.id===e),k=(o,e)=>o.todos.find(a=>a.id===e),le=(o,e)=>o.log.find(a=>a.id===e),pe=o=>E.includes(o),Q=(o,e)=>{const a=o.context[e];return typeof a=="string"||a!==null&&a.length>0},C=(o,e)=>o.questions.find(a=>a.id===e),ce=(o,e)=>{const a=o.answers[e.id];return a===void 0?!1:a.kind==="approve"||a.text.trim()!==""},I=(o,e)=>!e.proposed||o.decisions[e.id]==="accept",U=(o,e)=>I(o,e)&&O(o,e.assignee)?.kind==="human",ue=(o,e,a)=>{const t={...o};return a===null?delete t[e]:t[e]=a,t},H=(o,e,a)=>({...o,answers:ue(o.answers,e,a)}),po=(o,e,a)=>({...o,decisions:ue(o.decisions,e,a)}),co=(o,e,a)=>({...o,todos:o.todos.map(t=>t.id===e?a(t):t)}),m={ANSWER_QUESTION:w("ANSWER_QUESTION","question",Ue("kind",[b({kind:P("approve")}),b({kind:P("answer"),text:c()}),b({kind:P("clear")})])),DECIDE_PROPOSAL:w("DECIDE_PROPOSAL","todo",b({decision:$(["accept","decline","clear"])})),SET_TODO_STATUS:w("SET_TODO_STATUS","todo",b({status:$(D)})),ADD_TODO:w("ADD_TODO","page",b({id:h,title:ee(c(),Me(),oe(1)),assignee:He(h)}),{dedupeKey:Ie}),DELETE_TODO:w("DELETE_TODO","todo",b({}))},be={type:"page",id:"task-board"},M=(o,e)=>({type:"ANSWER_QUESTION",target:{type:"question",id:o},payload:e}),ge=(o,e)=>({type:"DECIDE_PROPOSAL",target:{type:"todo",id:o},payload:{decision:e}}),he=(o,e)=>({type:"SET_TODO_STATUS",target:{type:"todo",id:o},payload:{status:e}}),ke=(o,e,a)=>({type:"ADD_TODO",target:be,payload:{id:o,title:e,assignee:a}}),xe=o=>({type:"DELETE_TODO",target:{type:"todo",id:o},payload:{}}),fe=(o,e)=>{const a=Ke(m,e);if(a===null)return null;const t=a.target.id;switch(a.type){case"ANSWER_QUESTION":{const r=C(o,t);if(r===void 0)return null;const d=a.payload;return d.kind==="clear"?H(o,t,null):d.kind==="approve"?r.assumption===null?null:H(o,t,{kind:"approve"}):H(o,t,{kind:"answer",text:d.text})}case"DECIDE_PROPOSAL":{if(k(o,t)?.proposed!==!0)return null;const{decision:r}=a.payload;return po(o,t,r==="clear"?null:r)}case"SET_TODO_STATUS":{const r=k(o,t);if(r===void 0||!U(o,r))return null;const{status:d}=a.payload;return co(o,t,l=>({...l,status:d}))}case"ADD_TODO":{const{payload:r}=a;return k(o,r.id)!==void 0||r.assignee!==null&&O(o,r.assignee)===void 0?null:{...o,todos:[...o.todos,{id:r.id,title:r.title,status:"todo",assignee:r.assignee,note:null,proposed:!1,reason:null,added:!0}]}}case"DELETE_TODO":return k(o,t)?.added!==!0?null:{...o,todos:o.todos.filter(r=>r.id!==t)};default:return je(a)}},K=Fe({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",updatedAt:o=>`Updated ${o}`,context:"What this task is about",contextWhy:"Why",contextWhat:"What",contextGoals:"Goals",contextNonGoals:"Non-goals",noContext:"The agent has not written down why and what yet.",tabs:"Board sections",tabContext:"Context",tabLog:"Work log",tabQuestions:"Questions",openCount:o=>`${o} open`,noQuestions:"The agent has nothing to ask right now.",questions:"Questions from the agent",questionsProgress:(o,e)=>`${o} 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:o=>`Your answer to ${o}`,answerPlaceholder:"What you expect instead\u2026",blockingPlaceholder:"Your decision\u2026",approvedTag:"Approved",answeredTag:"Answered",todos:"Todo",progress:(o,e)=>`${o} of ${e} done`,noTodosYet:"No todos yet",assignee:"Assignee",unassigned:"Unassigned",memberOption:(o,e)=>`${o} (${e})`,statusOf:o=>`Status of \u201C${o}\u201D`,filterTodos:"Show todos",filterAll:"All",filterHuman:"People",doneGroup:o=>`Done (${o})`,noHumanTodos:"Nobody but the agent has a todo.",addedTag:"Added by you",changedTag:"Changed",removeAdded:"Remove this todo you added",noTodos:"There are no todos yet.",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:o=>`Decision on \u201C${o}\u201D`,acceptedTag:"Accepted",declinedTag:"Declined",undoDecision:"Undo",outputs:"Outputs",noOutputs:"Nothing has been produced yet.",copy:o=>`Copy ${o}`,copied:"Copied",log:"Conversation with the agent",logLede:"Newest first",noLog:"Nothing has been exchanged yet.",fromAgent:"Agent",latestTag:"Latest",commentOn:o=>`Comment on ${o}`,todoGroup:"Todo",logGroup:"Log",contextGroup:"Context",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:o=>`\u2192 \u201C${o}\u201D`,change:(o,e)=>`${o} \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",updatedAt:o=>`\u66F4\u65B0 ${o}`,context:"\u3053\u306E\u30BF\u30B9\u30AF\u306E\u524D\u63D0",contextWhy:"Why \u2014 \u306A\u305C\u3084\u308B\u304B",contextWhat:"What \u2014 \u4F55\u3092\u3084\u308B\u304B",contextGoals:"\u30B4\u30FC\u30EB",contextNonGoals:"\u3084\u3089\u306A\u3044\u3053\u3068",noContext:"Agent \u306F\u307E\u3060 Why / What \u3092\u66F8\u3044\u3066\u3044\u307E\u305B\u3093\u3002",tabs:"\u30DC\u30FC\u30C9\u306E\u533A\u5206",tabContext:"Context",tabLog:"\u4F5C\u696D\u30ED\u30B0",tabQuestions:"\u8CEA\u554F",openCount:o=>`\u672A\u56DE\u7B54 ${o} \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:(o,e)=>`\u8FD4\u7B54\u6E08\u307F ${o} / ${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:o=>`${o} \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",todos:"Todo",progress:(o,e)=>`${e} \u4EF6\u4E2D ${o} \u4EF6\u5B8C\u4E86`,noTodosYet:"Todo \u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093",assignee:"\u62C5\u5F53",unassigned:"\u672A\u5272\u308A\u5F53\u3066",memberOption:(o,e)=>`${o}\uFF08${e}\uFF09`,statusOf:o=>`\u300C${o}\u300D\u306E\u72B6\u614B`,filterTodos:"\u8868\u793A\u3059\u308B Todo",filterAll:"\u3059\u3079\u3066",filterHuman:"\u4EBA\u9593\u306E\u62C5\u5F53",doneGroup:o=>`\u5B8C\u4E86 ${o} \u4EF6`,noHumanTodos:"\u4EBA\u9593\u304C\u62C5\u5F53\u3059\u308B Todo \u306F\u3042\u308A\u307E\u305B\u3093\u3002",addedTag:"\u3042\u306A\u305F\u304C\u8FFD\u52A0",changedTag:"\u5909\u66F4\u3042\u308A",removeAdded:"\u8FFD\u52A0\u3057\u305F Todo \u3092\u53D6\u308A\u6D88\u3059",noTodos:"Todo \u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002",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:o=>`\u300C${o}\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:o=>`${o} \u3092\u30B3\u30D4\u30FC`,copied:"\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F",log:"Agent \u3068\u306E\u3084\u308A\u3068\u308A",logLede:"\u65B0\u3057\u3044\u9806",noLog:"\u307E\u3060\u3084\u308A\u3068\u308A\u306F\u3042\u308A\u307E\u305B\u3093\u3002",fromAgent:"Agent",latestTag:"\u6700\u65B0",commentOn:o=>`${o} \u306B\u30B3\u30E1\u30F3\u30C8`,todoGroup:"Todo",logGroup:"\u4F5C\u696D\u30ED\u30B0",contextGroup:"Context",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:o=>`\u2192 \u300C${o}\u300D`,change:(o,e)=>`${o} \u2192 ${e}`}}),me=(o,e)=>{switch(e){case"working":return o.statusWorking;case"waiting":return o.statusWaiting;case"blocked":return o.statusBlocked;case"done":return o.statusDone}},z=(o,e)=>{switch(e){case"todo":return o.todoTodo;case"doing":return o.todoDoing;case"blocked":return o.todoBlocked;case"done":return o.todoDone}},uo=(o,e)=>e==="agent"?o.kindAgent:o.kindHuman,G=(o,e)=>{switch(e){case"why":return o.contextWhy;case"what":return o.contextWhat;case"goals":return o.contextGoals;case"nonGoals":return o.contextNonGoals}},ve=48,j=o=>{const e=o.title??o.body??o.id;return e.length<=ve?e:`${e.slice(0,ve-1)}\u2026`},bo=(o,e,a)=>a===null?o.unassigned:O(e,a)?.name??a,$e=o=>o.title===""?"Task Context Board":o.title,we=(o,e,a)=>{switch(a.type){case"todo":{const t=k(e,a.id);return`${t?.proposed===!0?o.proposalGroup:o.todoGroup} \xB7 ${t?.title??a.id}`}case"log":{const t=le(e,a.id);return`${o.logGroup} \xB7 ${t===void 0?a.id:j(t)}`}case"context":return`${o.contextGroup} \xB7 ${pe(a.id)?G(o,a.id):a.id}`;case"question":{const t=C(e,a.id);return t===void 0?a.id:`${t.ref} \xB7 ${t.title}`}case"page":return o.wholeBoard;default:return a.id}},go=(o,e)=>{switch(e){case"accept":return{title:o.accepted,tone:"update"};case"decline":return{title:o.declined,tone:"update"};case"clear":return{title:o.decisionCleared,tone:"delete"}}},ho=(o,e,a)=>{switch(a.type){case"ANSWER_QUESTION":{const t=S(m.ANSWER_QUESTION,a);if(t.kind==="clear")return{title:o.answerCleared,tone:"delete"};if(t.kind==="approve"){const r=C(e,a.target.id)?.assumption??null;return{title:o.approved,tone:"update",...r===null?{}:{body:o.quoted(r)}}}return{title:o.answered,tone:"update",body:o.quoted(t.text.slice(0,120))}}case"DECIDE_PROPOSAL":return go(o,S(m.DECIDE_PROPOSAL,a).decision);case"SET_TODO_STATUS":{const{status:t}=S(m.SET_TODO_STATUS,a),r=k(e,a.target.id)?.status,d=z(o,t);return{title:o.statusChanged,tone:"update",body:r===void 0?d:o.change(z(o,r),d)}}case"ADD_TODO":{const t=S(m.ADD_TODO,a);return{title:o.todoAdded,tone:"create",targetLabel:`${o.todoGroup} \xB7 ${t.title}`,...t.assignee===null?{}:{body:`${o.assignee}: ${bo(o,e,t.assignee)}`}}}case"DELETE_TODO":return{title:o.todoRemoved,tone:"delete"};default:return{title:a.type,tone:"meta"}}},ye=(o,e,a,t)=>{let r;try{r=ho(o,t??a,e)}catch{r={title:e.type,tone:"meta"}}return{title:r.title,targetLabel:r.targetLabel??we(o,a,e.target),tone:r.tone,...r.body===void 0?{}:{summary:r.body}}},Te=o=>`${o.type} ${Ye(o.target)} ${JSON.stringify(o.payload)}`,Ae=(o,e)=>[...e.questions.map(a=>({value:`question:${a.id}`,label:`${a.ref} \xB7 ${a.title}`,group:o.questionGroup})),...e.todos.map(a=>({value:`todo:${a.id}`,label:a.title,group:a.proposed?o.proposalGroup:o.todoGroup})),...e.log.map(a=>({value:`log:${a.id}`,label:j(a),group:o.logGroup})),...E.filter(a=>Q(e,a)).map(a=>({value:`context:${a}`,label:G(o,a),group:o.contextGroup}))],Oe=(o,e)=>e,Se=(o,e,a)=>({parts:E.filter(t=>Q(e,t)).map(t=>{const r=e.context[t];return{id:t,title:G(o,t),text:typeof r=="string"?r:null,items:typeof r=="string"||r===null?[]:r,comments:a(`context:${t}`)}})}),ko=(o,e,a)=>{const t=o.answers[e.id];return{id:e.id,ref:e.ref,title:e.title,description:e.description,blocking:e.blocking,assumption:e.assumption,reply:t?.kind??"none",resolved:ce(o,e),draft:t?.kind==="answer"?t.text:"",comments:a(`question:${e.id}`)}},De=(o,e)=>{const a=o.questions.map(r=>ko(o,r,e)),t=a.filter(r=>r.resolved).length;return{blocking:a.filter(r=>r.blocking),provisional:a.filter(r=>!r.blocking),resolved:t,total:a.length,open:a.length-t,blockingOpen:a.filter(r=>r.blocking&&!r.resolved).length}},xo=(o,e,a,t,r)=>{const d=k(a,t.id),l=O(e,t.assignee);return{id:t.id,title:t.title,note:t.note,reason:t.reason,status:t.status,statusLabel:z(o,t.status),assignee:t.assignee,assigneeName:l?.name??null,assigneeKind:l?.kind??null,editable:U(e,t),proposal:t.proposed?e.decisions[t.id]??"pending":null,added:t.added,changed:d!==void 0&&d.status!==t.status,comments:r(`todo:${t.id}`),...t.questions===void 0?{}:{questions:t.questions}}},Ee=(o,e,a,t,r="all")=>{const d=e.todos.filter(p=>I(e,p)),l=d.filter(p=>p.status==="done").length,g=e.members.some(p=>p.kind==="human"),x=g?r:"all",J=p=>p.assigneeKind==="human",_=e.todos.map(p=>xo(o,e,a,p,t)),X=x==="human"?_.filter(J):_,V=p=>p.status==="done"&&k(a,p.id)?.status==="done";return{todos:X.filter(p=>!V(p)),done:X.filter(V),filter:x,canFilter:g,humanCount:_.filter(J).length,progress:{done:l,total:d.length,label:d.length===0?o.noTodosYet:o.progress(l,d.length)},statuses:D.map(p=>({value:p,label:z(o,p)})),members:e.members.map(p=>({id:p.id,label:o.memberOption(p.name,uo(o,p.kind))}))}},Ce=o=>{if(!/^[a-z][a-z\d+.-]*:\/\//i.test(o))return{kind:"path"};try{return{kind:"url",host:new URL(o).host}}catch{return{kind:"path"}}},ze=o=>o.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:Ce(e.href),...e.questions===void 0?{}:{questions:e.questions}})),Ge=(o,e,a)=>({entries:e.log.map((t,r)=>{const d=O(e,t.from);return{id:t.id,author:d===void 0?null:{name:d.name,kind:d.kind},at:t.at,title:t.title,body:t.body,points:t.points,label:j(t),latest:r===e.log.length-1,comments:a(`log:${t.id}`),...t.questions===void 0?{}:{questions:t.questions}}}).reverse(),status:e.status===null&&e.updatedAt===null?null:{status:e.status,label:e.status===null?null:me(o,e.status),updatedAt:e.updatedAt}}),Le=(o,e)=>{switch(e.type){case"todo":return k(o,e.id)!==void 0;case"log":return le(o,e.id)!==void 0;case"context":return pe(e.id)&&Q(o,e.id);case"question":return C(o,e.id)!==void 0;case"page":return!0;default:return!1}},_e=o=>{const e=K(o);return{name:"task-board",label:"Task Context Board",parseBase:se,emptyBase:ie,actions:m,apply:fe,hasTarget:Le,describe:(a,t,r)=>ye(e,a,t,r),serialize:Te,resolveNavigation:Oe,commentTargets:a=>Ae(e,a),title:$e}},L=(o,e,a,t)=>n`
2
- <button
3
- class="dpk-icon-btn board-comment"
4
- type="button"
5
- data-comment=${o}
6
- aria-label=${e}
7
- title=${e}
8
- @click=${()=>t.comment(o)}
9
- >
10
- ${Je()} ${a>0?n`<span class="dpk-icon-badge">${a}</span>`:s}
11
- </button>
12
- `,F=(o,e,a,t=null)=>n`
13
- <header class="board-section-head">
14
- <h2 id=${o}>${e}</h2>
15
- ${a===null?s:n`<span class="board-section-meta">${a}</span>`}
16
- </header>
17
- ${t===null?s:n`<p class="board-lede">${t}</p>`}
18
- `,fo=(o,e,a,t)=>n`
19
- <section class="board-context" aria-label=${o.context}>
20
- ${e.parts.length===0&&!a?n`<p class="board-empty">${o.noContext}</p>`:s}
21
- ${e.parts.length===0?s:n`<div class="board-context-parts">
22
- ${y(e.parts,r=>r.id,r=>mo(o,r,t))}
23
- </div>`}
24
- <div class="board-figures"><slot name="main"></slot></div>
25
- </section>
26
- `,mo=(o,e,a)=>n`
27
- <article
28
- class="board-context-part"
29
- data-context=${e.id}
30
- data-dpk-target=${`context:${e.id}`}
31
- aria-labelledby=${`board-context-${e.id}`}
32
- >
33
- <header class="board-context-head">
34
- <h3 class="board-context-title" id=${`board-context-${e.id}`}>${e.title}</h3>
35
- ${L(`context:${e.id}`,o.commentOn(e.title),e.comments,a)}
36
- </header>
37
- ${e.text===null?s:n`<p class="board-context-text">${e.text}</p>`}
38
- ${e.items.length===0?s:n`<ul class="board-context-items">
39
- ${e.items.map(t=>n`<li>${t}</li>`)}
40
- </ul>`}
41
- </article>
42
- `,vo=(o,e,a)=>e.total===0?s:n`
43
- <section class="board-section" data-section="questions" aria-labelledby="board-questions">
44
- ${F("board-questions",o.questions,o.questionsProgress(e.resolved,e.total))}
45
- ${qe(o,"blocking",o.blockingGroup,e.blocking,a)}
46
- ${qe(o,"provisional",o.provisionalGroup,e.provisional,a)}
47
- </section>
48
- `,qe=(o,e,a,t,r)=>t.length===0?s:n`<div class="board-group" data-group=${e}>
49
- <h3 class="board-group-title">${a}</h3>
50
- <ol class="board-questions">
51
- ${y(t,d=>d.id,d=>$o(o,d,r))}
52
- </ol>
53
- </div>`,$o=(o,e,a)=>{const t=e.assumption!==null;return n`
54
- <li
55
- class="board-card board-question"
56
- data-question=${e.id}
57
- data-dpk-target=${`question:${e.id}`}
58
- data-blocking=${String(e.blocking)}
59
- data-reply=${e.reply}
60
- data-resolved=${String(e.resolved)}
61
- >
62
- <div class="board-card-head">
63
- <span class="board-ref">${e.ref}</span>
64
- <h4 class="board-card-title">${e.title}</h4>
65
- ${e.resolved?n`<span class="board-tag" data-tone="done">
66
- ${e.reply==="approve"?o.approvedTag:o.answeredTag}
67
- </span>`:s}
68
- ${L(`question:${e.id}`,o.commentOn(e.ref),e.comments,a)}
69
- </div>
70
- ${e.description===null?s:n`<p class="board-card-text">${e.description}</p>`}
71
- ${t?wo(o,e,a):s}
72
- <textarea
73
- class="dpk-textarea board-answer"
74
- data-answer-text=${e.id}
75
- rows="2"
76
- aria-label=${o.answerOf(e.ref)}
77
- placeholder=${t?o.answerPlaceholder:o.blockingPlaceholder}
78
- .value=${e.draft}
79
- ?hidden=${t&&e.reply!=="answer"}
80
- @input=${r=>{const d=r.currentTarget;d instanceof HTMLTextAreaElement&&a.answer(e.id,!t&&d.value===""?{kind:"clear"}:{kind:"answer",text:d.value})}}
81
- ></textarea>
82
- </li>
83
- `},wo=(o,e,a)=>n`
84
- <div class="board-assumption">
85
- <span class="board-assumption-label">${e.blocking?o.recommendation:o.assumption}</span>
86
- <p class="board-assumption-text">${e.assumption}</p>
87
- </div>
88
- <div class="board-reply" role="group" aria-label=${o.answerOf(e.ref)}>
89
- <button
90
- type="button"
91
- class="dpk-btn board-approve"
92
- aria-pressed=${e.reply==="approve"?"true":"false"}
93
- @click=${()=>a.answer(e.id,e.reply==="approve"?{kind:"clear"}:{kind:"approve"})}
94
- >
95
- ${ae()} ${e.blocking?o.approveRecommendation:o.approveAssumption}
96
- </button>
97
- <button
98
- type="button"
99
- class="dpk-btn dpk-btn--ghost board-other"
100
- aria-pressed=${e.reply==="answer"?"true":"false"}
101
- @click=${()=>e.reply==="answer"?a.answer(e.id,{kind:"clear"}):a.answerOther(e.id)}
102
- >
103
- ${o.answerOther}
104
- </button>
105
- </div>
106
- `,yo=(o,e,a,t)=>n`
107
- <section class="board-section board-rail-section" data-section="outputs" aria-labelledby="board-outputs">
108
- ${F("board-outputs",o.outputs,e.length===0?null:String(e.length))}
109
- ${e.length===0?n`<p class="board-empty">${o.noOutputs}</p>`:n`<ul class="board-outputs">
110
- ${y(e,r=>r.id,r=>To(o,r,a===r.id,t))}
111
- </ul>`}
112
- </section>
113
- `,To=(o,e,a,t)=>{const r=e.place,d=a?o.copied:o.copy(e.href);return n`
114
- <li
115
- class="board-output"
116
- data-output=${e.id}
117
- data-place=${r.kind}
118
- data-grill-questions=${W(e.questions)}
119
- >
120
- <div class="board-output-body">
121
- <div class="board-output-head">
122
- ${e.kind===null?s:n`<span class="board-kind">${e.kind}</span>`}
123
- ${r.kind==="url"?n`<a class="board-output-link" href=${e.href} target="_blank" rel="noopener noreferrer"
124
- >${e.title}</a
125
- >`:e.labelled?n`<span class="board-output-label">${e.title}</span>`:n`<code class="board-output-path">${e.href}</code>`}
126
- </div>
127
- ${r.kind==="url"?n`<span class="board-output-sub">${r.host}</span>`:e.labelled?n`<code class="board-output-path board-output-sub">${e.href}</code>`:s}
128
- ${e.description===null?s:n`<p class="board-output-text">${e.description}</p>`}
129
- </div>
130
- <button
131
- class="dpk-icon-btn board-copy"
132
- type="button"
133
- data-copied=${String(a)}
134
- aria-label=${d}
135
- title=${d}
136
- @click=${()=>t.copy(e.id,e.href)}
137
- >
138
- ${a?ae():Xe()}
139
- </button>
140
- </li>
141
- `},Be=(o,e)=>n`
142
- <div class="board-log-now">
143
- ${e.status===null?s:n`<span class="board-status" data-status=${e.status}>
144
- <span class="board-status-dot" aria-hidden="true"></span>${e.label}
145
- </span>`}
146
- ${e.updatedAt===null?s:n`<span class="board-updated">${o.updatedAt(e.updatedAt)}</span>`}
147
- </div>
148
- `,Ao=(o,e,a)=>n`
149
- <section class="board-section" data-section="log" aria-labelledby="board-log">
150
- ${F("board-log",o.log,e.entries.length===0?null:o.logLede)}
151
- ${e.entries.length===0?n`${e.status===null?s:Be(o,e.status)}
152
- <p class="board-empty">${o.noLog}</p>`:n`<ol class="board-log">
153
- ${y(e.entries,t=>t.id,t=>Oo(o,t,t.latest?e.status:null,a))}
154
- </ol>`}
155
- </section>
156
- `,Oo=(o,e,a,t)=>{const r=e.author?.name??o.fromAgent;return n`
157
- <li
158
- class="board-log-entry"
159
- data-log=${e.id}
160
- data-dpk-target=${`log:${e.id}`}
161
- data-grill-questions=${W(e.questions)}
162
- data-from=${e.author?.kind??"agent"}
163
- data-latest=${String(e.latest)}
164
- >
165
- <span class="board-log-avatar" aria-hidden="true">${r.slice(0,1)}</span>
166
- <div class="board-log-body">
167
- ${a===null?s:Be(o,a)}
168
- <div class="board-log-head">
169
- <span class="board-log-author">${r}</span>
170
- ${e.at===null?s:n`<time class="board-log-at">${e.at}</time>`}
171
- ${e.latest?n`<span class="board-log-latest">${o.latestTag}</span>`:s}
172
- ${L(`log:${e.id}`,o.commentOn(e.label),e.comments,t)}
173
- </div>
174
- ${e.title===null?s:n`<h3 class="board-log-title">${e.title}</h3>`}
175
- ${e.body===null?s:n`<p class="board-log-text">${e.body}</p>`}
176
- ${e.points.length===0?s:n`<ul class="board-log-points">
177
- ${e.points.map(d=>n`<li>${d}</li>`)}
178
- </ul>`}
179
- </div>
180
- </li>
181
- `},v=["context","log","questions"],So=(o,e)=>{const a=v.indexOf(o),t=v.length-1;switch(e){case"ArrowRight":return v[a===t?0:a+1]??null;case"ArrowLeft":return v[a===0?t:a-1]??null;case"Home":return v[0];case"End":return v[t]??null;default:return null}},Do=(o,e)=>{switch(e){case"context":return o.tabContext;case"log":return o.tabLog;case"questions":return o.tabQuestions}},Eo=(o,e)=>{switch(o){case"context":return null;case"log":return e.log;case"questions":return e.questions}},Co=(o,e,a,t,r)=>n`
182
- <div class="board-tabs" role="tablist" aria-label=${o.tabs}>
183
- ${v.map(d=>{const l=Eo(d,a);return n`<button
184
- type="button"
185
- role="tab"
186
- id=${`board-tab-${d}`}
187
- data-tab=${d}
188
- data-alert=${d==="questions"?String(a.alert):s}
189
- aria-controls=${`board-panel-${d}`}
190
- aria-selected=${String(e===d)}
191
- tabindex=${e===d?0:-1}
192
- title=${d==="questions"&&a.questions>0?o.openCount(a.questions):s}
193
- @click=${()=>t(d)}
194
- @keydown=${r}
195
- >
196
- <span class="board-tab-label">${Do(o,d)}</span
197
- >${l===null||l===0?s:n`<span class="board-tab-count">${l}</span>`}
198
- </button>`})}
199
- </div>
200
- `,Y=(o,e,a)=>n`
201
- <div
202
- class="board-panel"
203
- id=${`board-panel-${o}`}
204
- role="tabpanel"
205
- aria-labelledby=${`board-tab-${o}`}
206
- ?hidden=${e!==o}
207
- >
208
- ${a}
209
- </div>
210
- `,Pe="",zo=(o,e)=>e.statuses.some(a=>a.value===o),Go=(o,e,a)=>n`
211
- <section class="board-section board-rail-section" data-section="todos" aria-labelledby="board-todos">
212
- <header class="board-section-head">
213
- <h2 id="board-todos">${o.todos}</h2>
214
- <span class="board-section-meta">${e.progress.label}</span>
215
- </header>
216
- ${e.progress.total===0?s:n`<div
217
- class="board-progress"
218
- role="progressbar"
219
- aria-label=${e.progress.label}
220
- aria-valuemin="0"
221
- aria-valuemax=${e.progress.total}
222
- aria-valuenow=${e.progress.done}
223
- >
224
- <span class="board-progress-fill" style=${`width: ${e.progress.done/e.progress.total*100}%`}></span>
225
- </div>`}
226
- ${e.canFilter?Lo(o,e,a):s}
227
- ${e.todos.length===0&&e.done.length===0?n`<p class="board-empty">${e.filter==="human"?o.noHumanTodos:o.noTodos}</p>`:s}
228
- ${e.done.length===0?s:n`<details class="board-done">
229
- <summary class="board-done-summary">
230
- <span class="board-done-chevron" aria-hidden="true"></span>${o.doneGroup(e.done.length)}
231
- </summary>
232
- ${Ne(o,e,e.done,a)}
233
- </details>`}
234
- ${e.todos.length===0?s:Ne(o,e,e.todos,a)} ${Wo(o,e,a)}
235
- </section>
236
- `,Ne=(o,e,a,t)=>n`
237
- <ul class="board-todos">
238
- ${y(a,r=>r.id,r=>Bo(o,e,r,t))}
239
- </ul>
240
- `,Lo=(o,e,a)=>{const t=(r,d,l)=>n`
241
- <button
242
- type="button"
243
- class="board-filter-option"
244
- data-filter=${r}
245
- aria-pressed=${e.filter===r?"true":"false"}
246
- @click=${()=>a.filterTodos(r)}
247
- >
248
- ${d}${l===null?s:n`<span class="board-filter-count">${l}</span>`}
249
- </button>
250
- `;return n`<div class="board-filter" role="group" aria-label=${o.filterTodos}>
251
- ${t("all",o.filterAll,null)} ${t("human",o.filterHuman,e.humanCount)}
252
- </div>`},_o=(o,e)=>e.proposal==="pending"||e.proposal==="decline"?n`<span
253
- class="board-todo-mark board-todo-mark--proposal"
254
- role="img"
255
- aria-label=${o.proposedMark}
256
- title=${o.proposedMark}
257
- >?</span
258
- >`:n`<span class="board-todo-mark" data-status=${e.status} aria-hidden="true"></span>`,qo=(o,e)=>n`
259
- ${e.proposal==="accept"?n`<span class="board-tag" data-tone="done">${o.acceptedTag}</span>`:s}
260
- ${e.proposal==="decline"?n`<span class="board-tag" data-tone="muted">${o.declinedTag}</span>`:s}
261
- ${e.added?n`<span class="board-tag" data-tone="new">${o.addedTag}</span>`:s}
262
- ${e.changed?n`<span class="board-tag" data-tone="changed">${o.changedTag}</span>`:s}
263
- `,Bo=(o,e,a,t)=>n`
264
- <li
265
- class="board-todo"
266
- data-todo=${a.id}
267
- data-dpk-target=${`todo:${a.id}`}
268
- data-grill-questions=${W(a.questions)}
269
- data-status=${a.status}
270
- data-proposal=${a.proposal??"none"}
271
- data-added=${String(a.added)}
272
- data-changed=${String(a.changed)}
273
- >
274
- ${_o(o,a)}
275
- <div class="board-todo-body">
276
- <div class="board-todo-title"><span class="board-todo-text">${a.title}</span>${qo(o,a)}</div>
277
- ${a.note===null?s:n`<p class="board-todo-note">${a.note}</p>`}
278
- ${a.reason===null||a.proposal==="accept"?s:n`<p class="board-reason"><span class="board-reason-label">${o.reason}</span>${a.reason}</p>`}
279
- <div class="board-todo-controls">
280
- ${a.proposal==="pending"?Po(o,a,t):a.proposal==="decline"?s:No(o,e,a,t)}
281
- ${a.assigneeName===null?s:n`<span class="board-assignee" data-kind=${a.assigneeKind??"agent"} title=${o.assignee}
282
- >${a.assigneeName}</span
283
- >`}
284
- ${a.proposal==="accept"||a.proposal==="decline"?n`<button
285
- type="button"
286
- class="dpk-btn dpk-btn--ghost board-undo"
287
- @click=${()=>t.decide(a.id,"clear")}
288
- >
289
- ${o.undoDecision}
290
- </button>`:s}
291
- ${L(`todo:${a.id}`,o.commentOn(a.title),a.comments,t)}
292
- ${a.added?n`<button
293
- class="dpk-icon-btn board-todo-remove"
294
- type="button"
295
- aria-label=${o.removeAdded}
296
- title=${o.removeAdded}
297
- @click=${()=>t.deleteTodo(a.id)}
298
- >
299
- ${Ve()}
300
- </button>`:s}
301
- </div>
302
- </div>
303
- </li>
304
- `,Po=(o,e,a)=>n`
305
- <div class="board-decision" role="group" aria-label=${o.decisionOf(e.title)}>
306
- <button
307
- type="button"
308
- class="dpk-btn board-decide"
309
- data-decision="accept"
310
- @click=${()=>a.decide(e.id,"accept")}
311
- >
312
- ${o.accept}
313
- </button>
314
- <button
315
- type="button"
316
- class="dpk-btn dpk-btn--ghost board-decide"
317
- data-decision="decline"
318
- @click=${()=>a.decide(e.id,"decline")}
319
- >
320
- ${o.decline}
321
- </button>
322
- </div>
323
- `,No=(o,e,a,t)=>a.editable?n`<select
324
- class="dpk-select board-todo-status"
325
- data-status=${a.status}
326
- aria-label=${o.statusOf(a.title)}
327
- @change=${Ze(r=>{zo(r,e)&&r!==a.status&&t.setStatus(a.id,r)})}
328
- >
329
- ${e.statuses.map(r=>n`<option value=${r.value} ?selected=${r.value===a.status}>${r.label}</option>`)}
330
- </select>`:n`<span class="board-todo-state" data-status=${a.status}>${a.statusLabel}</span>`,Wo=(o,e,a)=>n`
331
- <form
332
- class="board-add-todo"
333
- @submit=${t=>{t.preventDefault();const r=N(t.currentTarget,HTMLFormElement);if(r===null)return;const d=N(r.elements.namedItem("title"),HTMLInputElement),l=N(r.elements.namedItem("assignee"),HTMLSelectElement),g=d?.value.trim()??"";d===null||g===""||(a.addTodo(g,l===null||l.value===Pe?null:l.value),d.value="")}}
334
- >
335
- <input
336
- class="dpk-input board-add-title"
337
- name="title"
338
- type="text"
339
- autocomplete="off"
340
- aria-label=${o.newTodo}
341
- placeholder=${o.newTodoPlaceholder}
342
- />
343
- <div class="board-add-row">
344
- ${e.members.length===0?s:n`<select class="dpk-select board-add-assignee" name="assignee" aria-label=${o.newTodoAssignee}>
345
- <option value=${Pe}>${o.unassigned}</option>
346
- ${e.members.map(t=>n`<option value=${t.id}>${t.label}</option>`)}
347
- </select>`}
348
- <button class="dpk-btn board-add-submit" type="submit">${o.addTodo}</button>
349
- </div>
350
- </form>
351
- `,Ro=eo`
352
- /* The shell's sidebar is a right-hand rail (see \`sidebarLayout\`). */
353
- .dpk-sidebar {
354
- padding: 10px 14px 20px;
355
- }
356
-
357
- .board-rail {
358
- display: grid;
359
- gap: 14px;
360
- }
361
-
362
- .board {
363
- display: grid;
364
- gap: 18px;
365
- max-width: 880px;
366
- width: 100%;
367
- margin: 0 auto;
368
- }
369
-
370
- @media (max-width: 760px) {
371
- /* Without a zero minimum, a truncated output row's full text width would
372
- widen the whole shell past the screen. */
373
- .dpk-body {
374
- flex-direction: column;
375
- min-width: 0;
376
- overflow: auto;
377
- }
378
-
379
- .dpk-main,
380
- .dpk-sidebar {
381
- flex: 0 0 auto;
382
- overflow: visible;
383
- }
384
-
385
- .dpk-sidebar {
386
- width: auto;
387
- max-width: none;
388
- border-left: 0;
389
- border-top: 1px solid var(--dpk-rule);
390
- }
391
-
392
- /* Stacked, the rail is what ends the page: it clears the hand-off dock, not the board above it. */
393
- .dpk-main-body {
394
- padding-bottom: 24px;
395
- }
396
-
397
- /* Stacked, the rail takes the full width: there is no edge to drag or
398
- fold on. A rail folded on a wider screen is a bar to unfold it. */
399
- .dpk-sidebar-resizer,
400
- .dpk-body > .dpk-sidebar-toggle {
401
- display: none;
402
- }
403
-
404
- .dpk-sidebar-strip {
405
- width: auto;
406
- padding: 8px 14px;
407
- justify-content: flex-start;
408
- border-left: 0;
409
- border-top: 1px solid var(--dpk-rule);
410
- }
411
- }
412
-
413
- [data-status='working'],
414
- [data-status='doing'] {
415
- --board-tone: var(--dpk-blue);
416
- --board-tone-soft: var(--dpk-blue-soft);
417
- }
418
-
419
- [data-status='waiting'] {
420
- --board-tone: var(--dpk-amber);
421
- --board-tone-soft: var(--dpk-amber-soft);
422
- }
423
-
424
- [data-status='blocked'] {
425
- --board-tone: var(--dpk-danger);
426
- --board-tone-soft: var(--dpk-danger-soft);
427
- }
428
-
429
- [data-status='done'] {
430
- --board-tone: var(--dpk-green);
431
- --board-tone-soft: var(--dpk-green-soft);
432
- }
433
-
434
- [data-status='todo'] {
435
- --board-tone: var(--dpk-rule-strong);
436
- --board-tone-soft: var(--dpk-paper-sunken);
437
- }
438
-
439
- /* ------------------------------------------------------------- status */
440
-
441
- .board-status {
442
- display: inline-flex;
443
- align-items: center;
444
- gap: 7px;
445
- padding: 4px 11px 4px 9px;
446
- border-radius: 999px;
447
- background: var(--board-tone-soft);
448
- color: color-mix(in srgb, var(--board-tone) 80%, var(--dpk-ink));
449
- font-size: 12.5px;
450
- font-weight: 650;
451
- white-space: nowrap;
452
- box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--board-tone) 28%, transparent);
453
- }
454
-
455
- /* On a phone the header has no room; the Context tab says the same. */
456
- @media (max-width: 720px) {
457
- .board-status--header {
458
- display: none;
459
- }
460
- }
461
-
462
- .board-status-dot {
463
- width: 8px;
464
- height: 8px;
465
- border-radius: 50%;
466
- background: var(--board-tone);
467
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--board-tone) 22%, transparent);
468
- }
469
-
470
- .board-status[data-status='working'] .board-status-dot {
471
- animation: board-pulse 1.8s var(--dpk-ease) infinite;
472
- }
473
-
474
- @keyframes board-pulse {
475
- 50% {
476
- box-shadow: 0 0 0 6px color-mix(in srgb, var(--board-tone) 0%, transparent);
477
- }
478
- }
479
-
480
- /* --------------------------------------------------------------- tabs */
481
-
482
- /* Stays at the top of the main area while a long log or question list scrolls. */
483
- .board-tabs {
484
- position: sticky;
485
- top: 0;
486
- z-index: 2;
487
- display: flex;
488
- gap: 3px;
489
- padding: 3px;
490
- border: 1px solid var(--dpk-rule);
491
- border-radius: var(--dpk-radius);
492
- background: var(--dpk-paper-sunken);
493
- box-shadow:
494
- inset 0 1px 2px var(--dpk-shade-1),
495
- 0 6px 14px -10px var(--dpk-shade-3);
496
- }
497
-
498
- .board-tabs [role='tab'] {
499
- flex: 1 1 0;
500
- display: inline-flex;
501
- align-items: center;
502
- justify-content: center;
503
- gap: 7px;
504
- min-width: 0;
505
- padding: 7px 10px;
506
- border: 1px solid transparent;
507
- border-radius: var(--dpk-radius-sm);
508
- background: transparent;
509
- color: var(--dpk-ink-soft);
510
- font: inherit;
511
- font-size: 13px;
512
- font-weight: 550;
513
- white-space: nowrap;
514
- cursor: pointer;
515
- transition:
516
- color 140ms var(--dpk-ease),
517
- background 140ms var(--dpk-ease);
518
- }
519
-
520
- .board-tabs [role='tab']:hover {
521
- color: var(--dpk-ink);
522
- }
523
-
524
- .board-tabs [role='tab']:focus-visible {
525
- outline: none;
526
- box-shadow: var(--dpk-focus);
527
- }
528
-
529
- .board-tabs [role='tab'][aria-selected='true'] {
530
- background: var(--dpk-paper-raised);
531
- color: var(--dpk-ink);
532
- font-weight: 700;
533
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
534
- }
535
-
536
- @media (max-width: 400px) {
537
- .board-tabs [role='tab'] {
538
- gap: 5px;
539
- padding-inline: 6px;
540
- }
541
- }
542
-
543
- /* Too narrow for every label whole, a label gives way before its count does. */
544
- .board-tab-label {
545
- min-width: 0;
546
- overflow: hidden;
547
- text-overflow: ellipsis;
548
- }
549
-
550
- .board-tab-count {
551
- flex: none;
552
- min-width: 18px;
553
- padding: 0 6px;
554
- border-radius: 999px;
555
- background: var(--dpk-rule);
556
- color: var(--dpk-ink-soft);
557
- font-family: var(--dpk-mono);
558
- font-size: 10.5px;
559
- font-weight: 650;
560
- font-variant-numeric: tabular-nums;
561
- line-height: 17px;
562
- text-align: center;
563
- }
564
-
565
- /* An open blocker: the agent is stuck until the reader answers. */
566
- .board-tabs [data-alert='true'] .board-tab-count {
567
- background: var(--dpk-danger);
568
- color: #fff;
569
- }
570
-
571
- .board-panel {
572
- display: grid;
573
- gap: 18px;
574
- min-width: 0;
575
- animation: board-fade 180ms var(--dpk-ease);
576
- }
577
-
578
- .board-panel[hidden] {
579
- display: none;
580
- }
581
-
582
- @keyframes board-fade {
583
- from {
584
- opacity: 0;
585
- transform: translateY(4px);
586
- }
587
- }
588
-
589
- /* ------------------------------------------------------------ context */
590
-
591
- .board-context {
592
- display: grid;
593
- gap: 14px;
594
- min-width: 0;
595
- }
596
-
597
- /* Why / What side by side, then Goals / Non-goals: a design doc at a glance. */
598
- .board-context-parts {
599
- display: grid;
600
- grid-template-columns: repeat(2, minmax(0, 1fr));
601
- gap: 12px;
602
- }
603
-
604
- @media (max-width: 760px) {
605
- .board-context-parts {
606
- grid-template-columns: minmax(0, 1fr);
607
- }
608
- }
609
-
610
- .board-context-part {
611
- display: grid;
612
- align-content: start;
613
- gap: 6px;
614
- min-width: 0;
615
- padding: 14px 16px;
616
- border: 1px solid var(--dpk-rule);
617
- border-radius: var(--dpk-radius-lg);
618
- background: var(--dpk-paper-raised);
619
- box-shadow: var(--dpk-shadow-xs), var(--dpk-bevel);
620
- }
621
-
622
- .board-context-part[data-context='why'],
623
- .board-context-part[data-context='what'] {
624
- border-top: 3px solid var(--dpk-accent);
625
- }
626
-
627
- .board-context-head {
628
- display: flex;
629
- align-items: center;
630
- justify-content: space-between;
631
- gap: 8px;
632
- }
633
-
634
- .board-context-title {
635
- margin: 0;
636
- color: var(--dpk-ink-soft);
637
- font-size: 12px;
638
- font-weight: 700;
639
- letter-spacing: 0.04em;
640
- text-transform: uppercase;
641
- }
642
-
643
- .board-context-text {
644
- margin: 0;
645
- color: var(--dpk-ink);
646
- font-size: 14px;
647
- line-height: 1.7;
648
- white-space: pre-line;
649
- }
650
-
651
- .board-context-items {
652
- display: grid;
653
- gap: 4px;
654
- margin: 0;
655
- padding: 0;
656
- list-style: none;
657
- color: var(--dpk-ink);
658
- font-size: 13.5px;
659
- line-height: 1.6;
660
- }
661
-
662
- .board-context-items li {
663
- position: relative;
664
- padding-left: 20px;
665
- }
666
-
667
- .board-context-items li::before {
668
- position: absolute;
669
- left: 0;
670
- font-weight: 700;
671
- }
672
-
673
- .board-context-part[data-context='goals'] li::before {
674
- content: '✓';
675
- color: var(--dpk-green);
676
- }
677
-
678
- .board-context-part[data-context='nonGoals'] li::before {
679
- content: '−';
680
- color: var(--dpk-ink-faint);
681
- }
682
-
683
- .board-context-part[data-context='nonGoals'] .board-context-items {
684
- color: var(--dpk-ink-soft);
685
- }
686
-
687
- .board-figures {
688
- display: grid;
689
- gap: 14px;
690
- min-width: 0;
691
- }
692
-
693
- .board-figures ::slotted(*) {
694
- min-width: 0;
695
- }
696
-
697
- .board-updated {
698
- color: var(--dpk-ink-faint);
699
- font-size: 12px;
700
- font-variant-numeric: tabular-nums;
701
- }
702
-
703
- /* ----------------------------------------------------------- sections */
704
-
705
- .board-section {
706
- display: grid;
707
- gap: 12px;
708
- min-width: 0;
709
- }
710
-
711
- .board-rail-section {
712
- gap: 6px;
713
- }
714
-
715
- .board-section-head {
716
- display: flex;
717
- align-items: baseline;
718
- justify-content: space-between;
719
- gap: 12px;
720
- padding-bottom: 8px;
721
- border-bottom: 1px solid var(--dpk-rule);
722
- }
723
-
724
- .board-section-head h2 {
725
- margin: 0;
726
- color: var(--dpk-ink);
727
- font-size: 15px;
728
- font-weight: 700;
729
- letter-spacing: -0.01em;
730
- }
731
-
732
- /* The rail is narrow and always in view: its headings are labels, not breaks. */
733
- .board-rail-section .board-section-head {
734
- padding-bottom: 3px;
735
- line-height: 1.3;
736
- }
737
-
738
- .board-rail-section .board-section-head h2 {
739
- font-size: 11.5px;
740
- text-transform: uppercase;
741
- letter-spacing: 0.04em;
742
- color: var(--dpk-ink-soft);
743
- }
744
-
745
- .board-section-meta {
746
- color: var(--dpk-ink-faint);
747
- font-size: 12px;
748
- font-variant-numeric: tabular-nums;
749
- }
750
-
751
- .board-lede {
752
- margin: -4px 0 0;
753
- color: var(--dpk-ink-soft);
754
- font-size: 12.5px;
755
- }
756
-
757
- .board-empty {
758
- margin: 0;
759
- padding: 12px 14px;
760
- border: 1px dashed var(--dpk-rule-strong);
761
- border-radius: var(--dpk-radius);
762
- color: var(--dpk-ink-faint);
763
- font-size: 13px;
764
- }
765
-
766
- .board-tag {
767
- flex: 0 0 auto;
768
- padding: 1px 7px;
769
- border-radius: 999px;
770
- font-size: 11px;
771
- font-weight: 650;
772
- line-height: 1.6;
773
- white-space: nowrap;
774
- }
775
-
776
- .board-tag[data-tone='done'] {
777
- background: var(--dpk-green-soft);
778
- color: color-mix(in srgb, var(--dpk-green) 75%, var(--dpk-ink));
779
- }
780
-
781
- .board-tag[data-tone='new'] {
782
- background: var(--dpk-accent-soft);
783
- color: var(--dpk-accent-ink);
784
- }
785
-
786
- .board-tag[data-tone='changed'] {
787
- background: var(--dpk-blue-soft);
788
- color: color-mix(in srgb, var(--dpk-blue) 75%, var(--dpk-ink));
789
- }
790
-
791
- .board-tag[data-tone='muted'] {
792
- background: var(--dpk-paper-inset);
793
- color: var(--dpk-ink-soft);
794
- }
795
-
796
- .board-comment {
797
- flex: 0 0 auto;
798
- position: relative;
799
- }
800
-
801
- /* ---------------------------------------------------------- questions */
802
-
803
- /* Blocking questions are red: the agent is waiting. The rest are amber: the
804
- agent goes on under its assumption. Either turns green once replied to. */
805
- .board-group {
806
- --board-group-tone: var(--dpk-amber);
807
- --board-group-soft: var(--dpk-amber-soft);
808
- display: grid;
809
- gap: 8px;
810
- }
811
-
812
- .board-group[data-group='blocking'] {
813
- --board-group-tone: var(--dpk-danger);
814
- --board-group-soft: var(--dpk-danger-soft);
815
- }
816
-
817
- .board-group-title {
818
- display: flex;
819
- align-items: center;
820
- gap: 8px;
821
- margin: 0;
822
- color: color-mix(in srgb, var(--board-group-tone) 75%, var(--dpk-ink));
823
- font-size: 12.5px;
824
- font-weight: 700;
825
- }
826
-
827
- .board-group-title::before {
828
- content: '';
829
- width: 8px;
830
- height: 8px;
831
- border-radius: 50%;
832
- background: var(--board-group-tone);
833
- }
834
-
835
- .board-group + .board-group {
836
- margin-top: 6px;
837
- }
838
-
839
- .board-questions {
840
- display: grid;
841
- gap: 10px;
842
- margin: 0;
843
- padding: 0;
844
- list-style: none;
845
- }
846
-
847
- .board-card {
848
- display: grid;
849
- gap: 10px;
850
- padding: 14px 16px;
851
- border: 1px solid var(--dpk-rule);
852
- border-radius: var(--dpk-radius);
853
- background: var(--dpk-paper-raised);
854
- box-shadow: var(--dpk-shadow-xs);
855
- transition:
856
- border-color 160ms var(--dpk-ease),
857
- background 160ms var(--dpk-ease);
858
- }
859
-
860
- .board-question[data-resolved='true'] {
861
- border-color: color-mix(in srgb, var(--dpk-green) 35%, var(--dpk-rule));
862
- }
863
-
864
- .board-card-head {
865
- display: flex;
866
- align-items: flex-start;
867
- gap: 10px;
868
- }
869
-
870
- .board-card-title {
871
- flex: 1 1 auto;
872
- margin: 0;
873
- color: var(--dpk-ink);
874
- font-size: 14px;
875
- font-weight: 650;
876
- line-height: 1.5;
877
- }
878
-
879
- .board-card-text {
880
- margin: 0;
881
- color: var(--dpk-ink-soft);
882
- font-size: 13px;
883
- line-height: 1.65;
884
- white-space: pre-line;
885
- }
886
-
887
- .board-ref {
888
- flex: 0 0 auto;
889
- padding: 2px 7px;
890
- border-radius: var(--dpk-radius-xs);
891
- background: var(--board-group-soft);
892
- color: color-mix(in srgb, var(--board-group-tone) 75%, var(--dpk-ink));
893
- font-family: var(--dpk-mono);
894
- font-size: 11.5px;
895
- font-weight: 700;
896
- line-height: 1.6;
897
- }
898
-
899
- .board-question[data-resolved='true'] .board-ref {
900
- background: var(--dpk-green-soft);
901
- color: color-mix(in srgb, var(--dpk-green) 75%, var(--dpk-ink));
902
- }
903
-
904
- .board-assumption {
905
- display: grid;
906
- gap: 3px;
907
- padding: 9px 12px;
908
- border-radius: var(--dpk-radius-sm);
909
- background: var(--dpk-paper-sunken);
910
- }
911
-
912
- .board-assumption-label {
913
- color: var(--dpk-ink-faint);
914
- font-size: 11px;
915
- font-weight: 700;
916
- letter-spacing: 0.03em;
917
- }
918
-
919
- .board-assumption-text {
920
- margin: 0;
921
- color: var(--dpk-ink);
922
- font-size: 13.5px;
923
- line-height: 1.55;
924
- white-space: pre-line;
925
- }
926
-
927
- .board-question[data-reply='answer'] .board-assumption-text {
928
- color: var(--dpk-ink-faint);
929
- text-decoration: line-through;
930
- text-decoration-color: color-mix(in srgb, var(--dpk-ink-faint) 60%, transparent);
931
- }
932
-
933
- .board-reply {
934
- display: flex;
935
- flex-wrap: wrap;
936
- gap: 8px;
937
- }
938
-
939
- .board-approve svg {
940
- width: 14px;
941
- height: 14px;
942
- }
943
-
944
- .board-approve[aria-pressed='true'] {
945
- border-color: var(--dpk-green);
946
- background: var(--dpk-green-soft);
947
- color: color-mix(in srgb, var(--dpk-green) 70%, var(--dpk-ink));
948
- }
949
-
950
- .board-other[aria-pressed='true'] {
951
- border-color: color-mix(in srgb, var(--dpk-accent) 55%, var(--dpk-rule));
952
- background: var(--dpk-accent-soft);
953
- color: var(--dpk-accent-ink);
954
- }
955
-
956
- .board-answer {
957
- width: 100%;
958
- box-sizing: border-box;
959
- resize: vertical;
960
- }
961
-
962
- .board-answer[hidden] {
963
- display: none;
964
- }
965
-
966
- /* -------------------------------------------------------------- todos */
967
-
968
- .board-progress {
969
- height: 6px;
970
- border-radius: 999px;
971
- background: var(--dpk-rule);
972
- overflow: hidden;
973
- }
974
-
975
- .board-progress-fill {
976
- display: block;
977
- height: 100%;
978
- border-radius: inherit;
979
- background: var(--dpk-green);
980
- transition: width 240ms var(--dpk-ease);
981
- }
982
-
983
- .board-todos {
984
- display: grid;
985
- grid-template-columns: minmax(0, 1fr);
986
- margin: 0;
987
- padding: 0;
988
- list-style: none;
989
- border: 1px solid var(--dpk-rule);
990
- border-radius: var(--dpk-radius);
991
- background: var(--dpk-paper-raised);
992
- box-shadow: var(--dpk-shadow-xs);
993
- overflow: hidden;
994
- }
995
-
996
- .board-todo {
997
- display: grid;
998
- grid-template-columns: auto minmax(0, 1fr);
999
- align-items: start;
1000
- gap: 10px;
1001
- padding: 9px 12px;
1002
- border-top: 1px solid var(--dpk-rule);
1003
- }
1004
-
1005
- .board-todo:first-child {
1006
- border-top: 0;
1007
- }
1008
-
1009
- .board-todo[data-added='true'] {
1010
- background: color-mix(in srgb, var(--dpk-accent) 5%, var(--dpk-paper-raised));
1011
- }
1012
-
1013
- .board-todo[data-proposal='pending'] {
1014
- background: color-mix(in srgb, var(--dpk-violet) 5%, var(--dpk-paper-raised));
1015
- }
1016
-
1017
- .board-todo[data-proposal='decline'] {
1018
- background: var(--dpk-paper-sunken);
1019
- }
1020
-
1021
- .board-todo[data-proposal='decline'] .board-todo-text,
1022
- .board-todo[data-proposal='decline'] .board-reason {
1023
- color: var(--dpk-ink-faint);
1024
- }
1025
-
1026
- .board-todo[data-proposal='decline'] .board-todo-text {
1027
- text-decoration: line-through;
1028
- }
1029
-
1030
- .board-todo-mark {
1031
- width: 12px;
1032
- height: 12px;
1033
- margin-top: 4px;
1034
- border: 2px solid var(--board-tone);
1035
- border-radius: 50%;
1036
- box-sizing: border-box;
1037
- }
1038
-
1039
- .board-todo-mark[data-status='doing'] {
1040
- background: linear-gradient(90deg, var(--board-tone) 50%, transparent 50%);
1041
- }
1042
-
1043
- .board-todo-mark[data-status='done'],
1044
- .board-todo-mark[data-status='blocked'] {
1045
- background: var(--board-tone);
1046
- }
1047
-
1048
- /* A proposal is not work yet: a question mark in place of the status. */
1049
- .board-todo-mark--proposal {
1050
- display: grid;
1051
- place-items: center;
1052
- width: 16px;
1053
- height: 16px;
1054
- margin: 2px -2px 0;
1055
- border: 1.5px dashed var(--dpk-violet);
1056
- background: var(--dpk-violet-soft);
1057
- color: var(--dpk-violet);
1058
- font-size: 10.5px;
1059
- font-weight: 800;
1060
- line-height: 1;
1061
- }
1062
-
1063
- .board-todo[data-proposal='decline'] .board-todo-mark--proposal {
1064
- border-color: var(--dpk-rule-strong);
1065
- background: transparent;
1066
- color: var(--dpk-ink-faint);
1067
- }
1068
-
1069
- .board-todo-body {
1070
- display: grid;
1071
- gap: 4px;
1072
- min-width: 0;
1073
- overflow-wrap: anywhere;
1074
- }
1075
-
1076
- .board-todo-title {
1077
- display: flex;
1078
- flex-wrap: wrap;
1079
- align-items: center;
1080
- gap: 4px 6px;
1081
- color: var(--dpk-ink);
1082
- font-size: 13.5px;
1083
- line-height: 1.5;
1084
- }
1085
-
1086
- .board-todo[data-status='done'] .board-todo-text {
1087
- color: var(--dpk-ink-faint);
1088
- text-decoration: line-through;
1089
- text-decoration-color: color-mix(in srgb, var(--dpk-ink-faint) 60%, transparent);
1090
- }
1091
-
1092
- .board-todo-note,
1093
- .board-reason {
1094
- margin: 0;
1095
- color: var(--dpk-ink-soft);
1096
- font-size: 12px;
1097
- line-height: 1.55;
1098
- }
1099
-
1100
- .board-reason-label {
1101
- margin-right: 6px;
1102
- padding: 0 5px;
1103
- border-radius: var(--dpk-radius-xs);
1104
- background: var(--dpk-violet-soft);
1105
- color: var(--dpk-violet);
1106
- font-size: 10.5px;
1107
- font-weight: 700;
1108
- }
1109
-
1110
- .board-todo-controls {
1111
- display: flex;
1112
- flex-wrap: wrap;
1113
- align-items: center;
1114
- gap: 6px;
1115
- margin-top: 2px;
1116
- }
1117
-
1118
- .board-todo-status {
1119
- width: auto;
1120
- min-width: 0;
1121
- min-height: 26px;
1122
- height: 26px;
1123
- padding-top: 0;
1124
- padding-bottom: 0;
1125
- font-size: 12px;
1126
- }
1127
-
1128
- .board-todo-status {
1129
- border-color: color-mix(in srgb, var(--board-tone) 45%, var(--dpk-rule));
1130
- background-color: var(--board-tone-soft);
1131
- color: var(--dpk-ink);
1132
- font-weight: 600;
1133
- }
1134
-
1135
- /* The agent's own status: it reports it by rewriting the board. */
1136
- .board-todo-state {
1137
- display: inline-flex;
1138
- align-items: center;
1139
- height: 22px;
1140
- padding: 0 8px;
1141
- border-radius: 999px;
1142
- background: var(--board-tone-soft);
1143
- color: color-mix(in srgb, var(--board-tone) 75%, var(--dpk-ink));
1144
- font-size: 11.5px;
1145
- font-weight: 600;
1146
- white-space: nowrap;
1147
- }
1148
-
1149
- .board-todo-state[data-status='todo'] {
1150
- color: var(--dpk-ink-soft);
1151
- }
1152
-
1153
- .board-assignee {
1154
- display: inline-flex;
1155
- align-items: center;
1156
- max-width: 140px;
1157
- height: 22px;
1158
- padding: 0 8px;
1159
- border: 1px solid var(--dpk-rule);
1160
- border-radius: 999px;
1161
- color: var(--dpk-ink-soft);
1162
- font-size: 11.5px;
1163
- white-space: nowrap;
1164
- overflow: hidden;
1165
- text-overflow: ellipsis;
1166
- }
1167
-
1168
- .board-assignee::before {
1169
- content: '@';
1170
- margin-right: 1px;
1171
- color: var(--dpk-ink-faint);
1172
- }
1173
-
1174
- .board-assignee[data-kind='human'] {
1175
- border-color: color-mix(in srgb, var(--dpk-violet) 35%, var(--dpk-rule));
1176
- background: var(--dpk-violet-soft);
1177
- color: var(--dpk-violet);
1178
- font-weight: 600;
1179
- }
1180
-
1181
- .board-assignee[data-kind='human']::before {
1182
- color: inherit;
1183
- }
1184
-
1185
- /* ------------------------------------------------------ filter / done */
1186
-
1187
- .board-filter {
1188
- display: inline-flex;
1189
- justify-self: start;
1190
- gap: 2px;
1191
- padding: 2px;
1192
- border: 1px solid var(--dpk-rule);
1193
- border-radius: var(--dpk-radius-sm);
1194
- background: var(--dpk-paper-sunken);
1195
- }
1196
-
1197
- .board-filter-option {
1198
- display: inline-flex;
1199
- align-items: center;
1200
- gap: 5px;
1201
- padding: 3px 10px;
1202
- border: 0;
1203
- border-radius: var(--dpk-radius-xs);
1204
- background: transparent;
1205
- color: var(--dpk-ink-soft);
1206
- font: inherit;
1207
- font-size: 12px;
1208
- cursor: pointer;
1209
- }
1210
-
1211
- .board-filter-option:hover {
1212
- color: var(--dpk-ink);
1213
- }
1214
-
1215
- .board-filter-option:focus-visible {
1216
- outline: none;
1217
- box-shadow: var(--dpk-focus);
1218
- }
1219
-
1220
- .board-filter-option[aria-pressed='true'] {
1221
- background: var(--dpk-paper-raised);
1222
- color: var(--dpk-ink);
1223
- font-weight: 650;
1224
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
1225
- }
1226
-
1227
- .board-filter-count {
1228
- font-family: var(--dpk-mono);
1229
- font-size: 10.5px;
1230
- color: var(--dpk-violet);
1231
- }
1232
-
1233
- .board-done {
1234
- display: grid;
1235
- gap: 6px;
1236
- }
1237
-
1238
- .board-done-summary {
1239
- display: inline-flex;
1240
- align-items: center;
1241
- gap: 6px;
1242
- justify-self: start;
1243
- padding: 3px 8px 3px 4px;
1244
- border-radius: var(--dpk-radius-xs);
1245
- color: var(--dpk-ink-soft);
1246
- font-size: 12px;
1247
- font-weight: 600;
1248
- list-style: none;
1249
- cursor: pointer;
1250
- user-select: none;
1251
- }
1252
-
1253
- .board-done-summary::-webkit-details-marker {
1254
- display: none;
1255
- }
1256
-
1257
- .board-done-summary:hover {
1258
- background: var(--dpk-paper-sunken);
1259
- color: var(--dpk-ink);
1260
- }
1261
-
1262
- .board-done-summary:focus-visible {
1263
- outline: none;
1264
- box-shadow: var(--dpk-focus);
1265
- }
1266
-
1267
- .board-done-chevron {
1268
- width: 6px;
1269
- height: 6px;
1270
- margin: 0 3px;
1271
- border-right: 1.5px solid currentColor;
1272
- border-bottom: 1.5px solid currentColor;
1273
- transform: rotate(-45deg);
1274
- transition: transform 160ms var(--dpk-ease);
1275
- }
1276
-
1277
- .board-done[open] .board-done-chevron {
1278
- transform: rotate(45deg);
1279
- }
1280
-
1281
- .board-todo-controls .board-comment {
1282
- margin-left: auto;
1283
- }
1284
-
1285
- .board-decision {
1286
- display: flex;
1287
- gap: 6px;
1288
- }
1289
-
1290
- .board-decide,
1291
- .board-undo {
1292
- min-height: 26px;
1293
- height: 26px;
1294
- padding: 0 10px;
1295
- font-size: 12px;
1296
- }
1297
-
1298
- .board-decide[data-decision='accept'] {
1299
- border-color: color-mix(in srgb, var(--dpk-green) 50%, var(--dpk-rule));
1300
- color: color-mix(in srgb, var(--dpk-green) 70%, var(--dpk-ink));
1301
- }
1302
-
1303
- .board-decide[data-decision='accept']:hover {
1304
- background: var(--dpk-green-soft);
1305
- }
1306
-
1307
- .board-add-todo {
1308
- display: grid;
1309
- gap: 6px;
1310
- }
1311
-
1312
- .board-add-row {
1313
- display: flex;
1314
- gap: 6px;
1315
- }
1316
-
1317
- .board-add-assignee {
1318
- flex: 1 1 auto;
1319
- width: auto;
1320
- min-width: 0;
1321
- }
1322
-
1323
- .board-add-submit {
1324
- flex: 0 0 auto;
1325
- }
1326
-
1327
- /* ------------------------------------------------------------ outputs */
1328
-
1329
- .board-outputs {
1330
- display: grid;
1331
- margin: 0;
1332
- padding: 0;
1333
- list-style: none;
1334
- border: 1px solid var(--dpk-rule);
1335
- border-radius: var(--dpk-radius);
1336
- background: var(--dpk-paper-raised);
1337
- box-shadow: var(--dpk-shadow-xs);
1338
- overflow: hidden;
1339
- }
1340
-
1341
- .board-output {
1342
- display: grid;
1343
- grid-template-columns: minmax(0, 1fr) auto;
1344
- align-items: center;
1345
- gap: 8px;
1346
- padding: 6px 6px 6px 10px;
1347
- border-top: 1px solid var(--dpk-rule);
1348
- }
1349
-
1350
- .board-output:first-child {
1351
- border-top: 0;
1352
- }
1353
-
1354
- .board-output-body {
1355
- display: grid;
1356
- gap: 1px;
1357
- min-width: 0;
1358
- }
1359
-
1360
- .board-output-head {
1361
- display: flex;
1362
- align-items: baseline;
1363
- gap: 6px;
1364
- min-width: 0;
1365
- }
1366
-
1367
- .board-kind {
1368
- flex: 0 0 auto;
1369
- padding: 0 5px;
1370
- border-radius: var(--dpk-radius-xs);
1371
- background: var(--dpk-paper-sunken);
1372
- color: var(--dpk-ink-soft);
1373
- font-family: var(--dpk-mono);
1374
- font-size: 10px;
1375
- font-weight: 700;
1376
- line-height: 1.7;
1377
- text-transform: uppercase;
1378
- letter-spacing: 0.04em;
1379
- }
1380
-
1381
- .board-output-link,
1382
- .board-output-label,
1383
- .board-output-head .board-output-path {
1384
- min-width: 0;
1385
- overflow: hidden;
1386
- text-overflow: ellipsis;
1387
- white-space: nowrap;
1388
- color: var(--dpk-ink);
1389
- font-size: 13px;
1390
- font-weight: 600;
1391
- }
1392
-
1393
- .board-output-link {
1394
- text-decoration: none;
1395
- }
1396
-
1397
- .board-output-link:hover {
1398
- color: var(--dpk-blue);
1399
- text-decoration: underline;
1400
- }
1401
-
1402
- .board-output-link:focus-visible {
1403
- outline: none;
1404
- border-radius: var(--dpk-radius-xs);
1405
- box-shadow: var(--dpk-focus);
1406
- }
1407
-
1408
- .board-output-path {
1409
- font-family: var(--dpk-mono);
1410
- font-size: 12px;
1411
- }
1412
-
1413
- .board-output-head .board-output-path {
1414
- font-size: 12px;
1415
- }
1416
-
1417
- .board-output-sub {
1418
- overflow: hidden;
1419
- text-overflow: ellipsis;
1420
- white-space: nowrap;
1421
- color: var(--dpk-ink-faint);
1422
- font-family: var(--dpk-mono);
1423
- font-size: 11px;
1424
- font-weight: 400;
1425
- }
1426
-
1427
- .board-output-text {
1428
- margin: 2px 0 0;
1429
- color: var(--dpk-ink-soft);
1430
- font-size: 12px;
1431
- line-height: 1.5;
1432
- }
1433
-
1434
- .board-copy[data-copied='true'] {
1435
- color: var(--dpk-green);
1436
- }
1437
-
1438
- /* ---------------------------------------------------------------- log */
1439
-
1440
- .board-log {
1441
- display: grid;
1442
- margin: 0;
1443
- padding: 0;
1444
- list-style: none;
1445
- }
1446
-
1447
- .board-log-entry {
1448
- position: relative;
1449
- display: grid;
1450
- grid-template-columns: 28px minmax(0, 1fr);
1451
- gap: 10px;
1452
- padding-bottom: 14px;
1453
- }
1454
-
1455
- /* The line that joins the exchanges into one conversation. */
1456
- .board-log-entry::before {
1457
- content: '';
1458
- position: absolute;
1459
- left: 13px;
1460
- top: 30px;
1461
- bottom: 0;
1462
- width: 2px;
1463
- background: var(--dpk-rule);
1464
- }
1465
-
1466
- .board-log-entry:last-child::before {
1467
- display: none;
1468
- }
1469
-
1470
- .board-log-avatar {
1471
- display: grid;
1472
- place-items: center;
1473
- width: 28px;
1474
- height: 28px;
1475
- border-radius: 50%;
1476
- background: var(--dpk-accent-soft);
1477
- color: var(--dpk-accent-strong);
1478
- font-size: 12px;
1479
- font-weight: 700;
1480
- }
1481
-
1482
- .board-log-entry[data-from='human'] .board-log-avatar {
1483
- background: var(--dpk-violet-soft);
1484
- color: var(--dpk-violet);
1485
- }
1486
-
1487
- .board-log-body {
1488
- min-width: 0;
1489
- padding: 10px 14px 12px;
1490
- border: 1px solid var(--dpk-rule);
1491
- border-radius: var(--dpk-radius);
1492
- background: var(--dpk-paper-raised);
1493
- }
1494
-
1495
- .board-log-entry[data-from='human'] .board-log-body {
1496
- background: color-mix(in srgb, var(--dpk-violet) 4%, var(--dpk-paper-raised));
1497
- border-color: color-mix(in srgb, var(--dpk-violet) 22%, var(--dpk-rule));
1498
- }
1499
-
1500
- .board-log-entry[data-latest='true'] .board-log-body {
1501
- border-color: color-mix(in srgb, var(--dpk-accent) 45%, var(--dpk-rule));
1502
- box-shadow:
1503
- var(--dpk-shadow-sm),
1504
- 0 0 0 3px var(--dpk-accent-soft);
1505
- }
1506
-
1507
- /* Where the task stands, on the newest entry only. */
1508
- .board-log-now {
1509
- display: flex;
1510
- flex-wrap: wrap;
1511
- align-items: center;
1512
- gap: 10px;
1513
- margin: -2px 0 10px;
1514
- padding-bottom: 10px;
1515
- border-bottom: 1px dashed var(--dpk-rule);
1516
- }
1517
-
1518
- .board-section > .board-log-now {
1519
- margin: 0;
1520
- padding-bottom: 0;
1521
- border-bottom: 0;
1522
- }
1523
-
1524
- .board-log-head {
1525
- display: flex;
1526
- align-items: center;
1527
- gap: 8px;
1528
- min-height: 24px;
1529
- }
1530
-
1531
- .board-log-author {
1532
- color: var(--dpk-ink);
1533
- font-size: 12.5px;
1534
- font-weight: 700;
1535
- }
1536
-
1537
- .board-log-entry[data-from='human'] .board-log-author {
1538
- color: var(--dpk-violet);
1539
- }
1540
-
1541
- .board-log-at {
1542
- color: var(--dpk-ink-faint);
1543
- font-size: 11.5px;
1544
- font-variant-numeric: tabular-nums;
1545
- }
1546
-
1547
- .board-log-latest {
1548
- padding: 1px 7px;
1549
- border-radius: 999px;
1550
- background: var(--dpk-accent-soft);
1551
- color: var(--dpk-accent-strong);
1552
- font-size: 10.5px;
1553
- font-weight: 700;
1554
- }
1555
-
1556
- .board-log-head .board-comment {
1557
- margin-left: auto;
1558
- }
1559
-
1560
- .board-log-title {
1561
- margin: 4px 0 0;
1562
- color: var(--dpk-ink);
1563
- font-size: 14px;
1564
- font-weight: 650;
1565
- line-height: 1.5;
1566
- }
1567
-
1568
- .board-log-text {
1569
- margin: 4px 0 0;
1570
- color: var(--dpk-ink);
1571
- font-size: 13.5px;
1572
- line-height: 1.65;
1573
- white-space: pre-line;
1574
- }
1575
-
1576
- .board-log-title + .board-log-text {
1577
- color: var(--dpk-ink-soft);
1578
- font-size: 13px;
1579
- }
1580
-
1581
- .board-log-points {
1582
- margin: 6px 0 0;
1583
- padding-left: 18px;
1584
- color: var(--dpk-ink-soft);
1585
- font-size: 12.5px;
1586
- line-height: 1.6;
1587
- }
1588
-
1589
- @media (prefers-reduced-motion: reduce) {
1590
- .board-status[data-status='working'] .board-status-dot {
1591
- animation: none;
1592
- }
1593
-
1594
- .board-progress-fill {
1595
- transition: none;
1596
- }
1597
-
1598
- .board-panel {
1599
- animation: none;
1600
- }
1601
- }
1602
- `,Qo=1500;class We extends te{static{this.styles=[te.styles,Ro]}static{this.properties={tab:{state:!0},todoFilter:{state:!0}}}#e=null;#o=null;#a;constructor(){super(),this.tab="context",this.todoFilter="all"}get sidebarLayout(){return{side:"right",defaultWidth:360,narrow:"stack"}}definitionFor(e){return _e(e)}showTarget(e){switch(e.type){case"context":case"log":this.tab=e.type;return;case"question":this.tab="questions";return;case"todo":this.todoFilter="all";return}}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#a)}renderRegions(e){const a=K(this.locale),t=x=>e.commentCount(x),r=De(e.state,t),d=Ge(a,e.state,t),l=this.#d(),g=this.tab;return{header:this.#r(a,e.state),sidebar:n`
1603
- <div class="board-rail">
1604
- ${yo(a,ze(e.state),this.#o,l)}
1605
- ${Go(a,Ee(a,e.state,e.base,t,this.todoFilter),l)}
1606
- </div>
1607
- `,main:n`
1608
- <div class="board">
1609
- ${Co(a,g,{log:d.entries.length,questions:r.open,alert:r.blockingOpen>0},x=>{this.tab=x},x=>this.#t(x))}
1610
- ${Y("context",g,fo(a,Se(a,e.state,t),this.#n(),l))}
1611
- ${Y("log",g,Ao(a,d,l))}
1612
- ${Y("questions",g,r.total===0?n`<p class="board-empty">${a.noQuestions}</p>`:vo(a,r,l))}
1613
- </div>
1614
- `}}updated(){super.updated();const e=this.#e;e!==null&&(this.#e=null,this.renderRoot.querySelector(`[data-answer-text="${e}"]`)?.focus())}#t(e){const a=So(this.tab,e.key);a!==null&&(e.preventDefault(),this.tab=a,this.updateComplete.then(()=>this.renderRoot.querySelector(`[data-tab="${a}"]`)?.focus()))}#r(e,a){return a.status===null?s:n`<span class="board-status board-status--header" data-status=${a.status}>
1615
- <span class="board-status-dot" aria-hidden="true"></span>${me(e,a.status)}
1616
- </span>`}#n(){return this.querySelector(':scope > [slot="main"]')!==null}#d(){return{answer:(e,a)=>this.#s(e,a),answerOther:e=>this.#i(e),decide:(e,a)=>this.dispatch(ge(e,a)),setStatus:(e,a)=>this.dispatch(he(e,a)),filterTodos:e=>{this.todoFilter=e},addTodo:(e,a)=>this.#l(e,a),deleteTodo:e=>this.dispatch(xe(e)),copy:(e,a)=>{this.#p(e,a)},comment:e=>this.requestComment(e)}}#s(e,a){this.dispatch(M(e,a))}#i(e){this.dispatch(M(e,{kind:"answer",text:""})).ok&&(this.#e=e)}#l(e,a){const{base:t,state:r}=this.derivation,d=[...t.todos,...r.todos].map(l=>l.id);this.dispatch(ke(oo(e,d),e,a))}async#p(e,a){await ao(a)&&(clearTimeout(this.#a),this.#o=e,this.requestUpdate(),this.#a=setTimeout(()=>{this.#o=null,this.requestUpdate()},Qo))}}const Re=()=>{customElements.get("dpk-template-task-board")||customElements.define("dpk-template-task-board",We)},Io=Object.freeze(Object.defineProperty({__proto__:null,CONTEXT_PARTS:E,DpkTemplateTaskBoard:We,MEMBER_KINDS:ne,TASK_BOARD_PAGE:be,TASK_STATUSES:re,TODO_STATUSES:D,addTodo:ke,answerQuestion:M,applyTaskBoardAction:fe,contextPartTitle:G,decideProposal:ge,defineTaskBoardElement:Re,deleteTodo:xe,describeTaskBoardAction:ye,emptyTaskBoardBase:ie,isAnswered:ce,isHumanTodo:U,isPlanned:I,outputLocation:Ce,parseTaskBoardBase:se,presentContext:Se,presentLog:Ge,presentOutputs:ze,presentQuestions:De,presentTodos:Ee,resolveTaskBoardNavigation:Oe,serializeTaskBoardAction:Te,setTodoStatus:he,taskBoardActions:m,taskBoardBaseSchema:de,taskBoardCommentTargets:Ae,taskBoardDefinitionFor:_e,taskBoardHasTarget:Le,taskBoardMessages:K,taskBoardTargetLabel:we,taskBoardTitle:$e},Symbol.toStringTag,{value:"Module"}));export{Re as d,Io as i};