dev-process-kit 0.2.0 → 0.3.0-beta.0

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