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