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

package/dist/chunks/shared-df9XN7ns.js

@@ -0,0 +1,904 @@
+import{a5 as G,ah as E,ak as D,X as I,j as X,ag as Et,al as Y,aE as Dt,ai as p,as as l,bp as It,aH as b,I as V,au as At,a8 as A,av as C,a9 as L,aw as w,b8 as J,ax as y,ay as k,ac as g,aD as B,aa as T,ad as Q,bJ as O,aB as Lt,az as Z,aF as Bt,bG as Ot,x as qt,w as Mt,A as tt,z as Ut,l as _t}from"./shared-DdpMqkAH.js";import{o as Nt}from"./shared-TrlnHjrJ.js";const zt={active:[],match:"single"},Pt=(s,t)=>t.active.length===0?!0:t.match==="all"?t.active.every(e=>s.includes(e)):t.active.some(e=>s.includes(e)),q=s=>{try{return s.split("/").map(t=>decodeURIComponent(t))}catch{return null}},et="BC:",jt=s=>`${et}${s}`,$={kind:"idle"},M="text/plain",Ht=s=>`${s.type}:${s.id}`,rt=(s,t)=>{const e=(s??"").trim();if(e.length===0)return null;const r=e.indexOf(":");if(r<0)return{type:t,id:e};const a=e.slice(0,r),i=e.slice(r+1);return a.length===0||i.length===0?null:{type:a,id:i}},st=(s,t)=>t<=s.top+s.height/2?"before":"after";class Ft{#e;#r=$;#n;constructor(t){this.#e=t,t.addController(this)}hostDisconnected(){this.reset()}get state(){return this.#r}get item(){return this.#r.kind==="dragging"?this.#r.item:null}isDragging(t,e){const r=this.item;return r!==null&&r.type===t&&r.id===e}isOver(t){return this.#r.kind!=="idle"&&this.#r.over===t}reset(){clearTimeout(this.#n),this.#n=void 0,this.#t($)}source(t){return{dragstart:e=>{e.dataTransfer&&(e.dataTransfer.setData(M,Ht(t)),e.dataTransfer.effectAllowed="move"),clearTimeout(this.#n),this.#n=setTimeout(()=>{this.#n=void 0,this.#t({kind:"dragging",item:t,over:null})},0)},dragend:()=>this.reset()}}target(t){return{dragenter:r=>{this.#i(t.accepts)&&(r.preventDefault(),this.#a(t.key))},dragover:r=>{this.#i(t.accepts)&&(r.preventDefault(),r.dataTransfer&&(r.dataTransfer.dropEffect="move"),this.#a(t.key))},dragleave:()=>{this.isOver(t.key)&&this.#a(null)},drop:r=>{r.preventDefault();const a=rt(r.dataTransfer?.getData(M),t.accepts)??this.item;if(this.#t($),!a||a.type!==t.accepts)return;const i=t.hovered?.(r)??null;t.onDrop({item:{type:t.accepts,id:a.id},hoveredId:i?.id??null,place:i?st(i.element.getBoundingClientRect(),r.clientY):"end",event:r})}}}combine(t,e){const r=()=>{const a=this.item!==null;return e.flatMap(([i,o])=>a||i===t?[o]:[])};return{dragenter:a=>r().forEach(i=>i.dragenter(a)),dragover:a=>r().forEach(i=>i.dragover(a)),dragleave:()=>e.forEach(([,a])=>a.dragleave()),drop:a=>{const i=rt(a.dataTransfer?.getData(M),t)?.type??this.item?.type,o=e.find(([n])=>n===i)?.[1];if(o){o.drop(a);return}a.preventDefault(),this.#t($)}}}#i(t){const e=this.item;return e===null||e.type===t}#a(t){const e=this.#r;if(e.kind==="dragging"){e.over!==t&&this.#t({...e,over:t});return}if(t===null){e.kind==="receiving"&&this.#t($);return}(e.kind==="idle"||e.over!==t)&&this.#t({kind:"receiving",over:t})}#t(t){this.#r!==t&&(this.#r=t,this.#e.requestUpdate())}}const R=(s,t,e,r)=>{const i=s.filter(c=>c!==t).at(-1)??null;if(e===null||r==="end")return i;const o=s.indexOf(t),n=s.indexOf(e);if(n<0)return i;const d=c=>c<=0?null:s.at(c-1)??null;return o>=0?o<n?e:d(n):r==="after"?e:d(n)},at=(s,t)=>new Intl.DateTimeFormat(s,{dateStyle:"medium",timeStyle:"short"}).format(new Date(t)),Kt=G({en:{heading:"Comments",commentsOn:s=>`Comments on \u201C${s}\u201D`,commentCountAria:s=>`${s} comment${s===1?"":"s"}`,empty:"No comments yet.",add:"Add comment",cancel:"Cancel",deleteComment:"Delete comment",sendFailed:"Could not save the comment.",commentDate:s=>at("en-US",s)},ja:{heading:"\u30B3\u30E1\u30F3\u30C8",commentsOn:s=>`\u300C${s}\u300D\u306E\u30B3\u30E1\u30F3\u30C8`,commentCountAria:s=>`\u30B3\u30E1\u30F3\u30C8 ${s} \u4EF6`,empty:"\u30B3\u30E1\u30F3\u30C8\u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002",add:"\u30B3\u30E1\u30F3\u30C8\u3092\u8FFD\u52A0",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",deleteComment:"\u30B3\u30E1\u30F3\u30C8\u3092\u524A\u9664",sendFailed:"\u30B3\u30E1\u30F3\u30C8\u3092\u4FDD\u5B58\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002",commentDate:s=>at("ja-JP",s)}}),Wt=E`
+  :host {
+    display: inline-block;
+  }
+
+  .thread-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 1px 7px;
+    border: none;
+    border-radius: 6px;
+    background: color-mix(in oklab, var(--dpk-ink-faint) 10%, var(--dpk-paper-sunken));
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 10.5px;
+    font-weight: 600;
+    font-family: var(--dpk-mono);
+    font-variant-numeric: tabular-nums;
+    line-height: 18px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .thread-trigger:hover,
+  .thread-trigger[aria-expanded='true'] {
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+  }
+
+  .thread-trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .thread-trigger svg {
+    flex: none;
+    width: 12px;
+    height: 12px;
+  }
+
+  .thread-pop {
+    width: 320px;
+    max-height: 360px;
+  }
+
+  .thread-heading {
+    font-size: 12.5px;
+    overflow-wrap: anywhere;
+  }
+
+  .thread-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 6px;
+    max-height: 180px;
+    overflow: auto;
+  }
+
+  .thread-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-accent-soft);
+  }
+
+  .thread-item-main {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  .thread-item-body {
+    margin: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    font-size: 12px;
+    color: var(--dpk-ink);
+  }
+
+  .thread-item-time {
+    font-size: 10.5px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .thread-empty {
+    margin: 0;
+    color: var(--dpk-ink-soft);
+    font-size: 12px;
+  }
+
+  .thread-form {
+    display: grid;
+    gap: 8px;
+  }
+
+  .thread-error {
+    margin: 0;
+    font-size: 11px;
+    color: var(--dpk-danger);
+  }
+
+  .thread-actions {
+    display: flex;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+`;class it extends D{static{this.styles=[I,X,Et,Wt]}static{this.properties={comments:{attribute:!1},label:{type:String},inline:{type:Boolean,reflect:!0},draftKey:{type:String,attribute:"draft-key"},open:{state:!0}}}#e=!1;#r=!1;#n=new Y(this);#i=new Dt(this);constructor(){super(),this.comments=[],this.label=null,this.inline=!1,this.draftKey=null,this.open=!1}willUpdate(t){t.has("comments")&&(this.#e=!1)}updated(){if(this.inline)return;const t=this.renderRoot.querySelector(".thread-pop"),e=this.renderRoot.querySelector(".thread-trigger"),r=!this.#r&&this.open;this.#r=this.open,!(!t||!e)&&(this.#i.open(t,e,{width:320,height:360},{placement:"bottom-end"}),r&&t.querySelector("textarea")?.focus({preventScroll:!0}))}render(){return this.inline?this.#s():l`${this.#g()}${this.open?this.#m():p}`}get#a(){return Kt(this.#n.locale)}#t(){return this.label?this.#a.commentsOn(this.label):this.#a.heading}#g(){const t=this.#a,e=this.comments.length,r=this.#t(),a=e>0?`${r} (${t.commentCountAria(e)})`:r;return l`<button
+      class="thread-trigger"
+      type="button"
+      aria-haspopup="dialog"
+      aria-expanded=${this.open?"true":"false"}
+      aria-label=${a}
+      title=${a}
+      @click=${()=>{this.open=!this.open}}
+    >
+      ${It()}${e>0?l`<span>${e}</span>`:p}
+    </button>`}#m(){return l`<div
+      class="comment-pop thread-pop"
+      popover="manual"
+      role="dialog"
+      aria-label=${this.#t()}
+      @keydown=${t=>{t.isComposing||t.key!=="Escape"||(t.preventDefault(),t.stopPropagation(),this.open=!1)}}
+    >
+      ${this.#s()}
+    </div>`}#s(){const t=this.#a;return l`
+      ${this.inline?p:l`<strong class="thread-heading">${this.#t()}</strong>`}
+      ${this.comments.length===0?l`<p class="thread-empty">${t.empty}</p>`:l`<ol class="thread-list">
+              ${b(this.comments,e=>e.id,e=>l`<li>
+                  <div class="thread-item-main">
+                    <p class="thread-item-body">${e.body}</p>
+                    ${e.createdAt===void 0?p:l`<time class="thread-item-time" datetime=${e.createdAt}
+                            >${t.commentDate(e.createdAt)}</time
+                          >`}
+                  </div>
+                  <button
+                    class="dpk-icon-btn"
+                    type="button"
+                    data-role="delete-comment"
+                    aria-label=${t.deleteComment}
+                    title=${t.deleteComment}
+                    @click=${()=>{this.#l(e.id)}}
+                  >
+                    ${V()}
+                  </button>
+                </li>`)}
+            </ol>`}
+      <form
+        class="thread-form"
+        @submit=${e=>{e.preventDefault(),e.currentTarget instanceof HTMLFormElement&&this.#o(e.currentTarget)}}
+      >
+        <textarea
+          class="dpk-textarea"
+          rows="2"
+          aria-label=${t.heading}
+          data-dpk-text-key=${this.draftKey??p}
+          @keydown=${e=>{if(e.isComposing||e.key!=="Enter"||!(e.ctrlKey||e.metaKey))return;e.preventDefault();const r=e.currentTarget instanceof HTMLElement?e.currentTarget.closest("form"):null;r&&this.#o(r)}}
+        ></textarea>
+        ${this.#e?l`<p class="thread-error" role="alert">${t.sendFailed}</p>`:p}
+        <div class="thread-actions">
+          ${this.inline?p:l`<button
+                  class="dpk-btn dpk-btn--ghost"
+                  type="button"
+                  data-dpk-text-discard
+                  @click=${()=>{this.open=!1}}
+                >
+                  ${t.cancel}
+                </button>`}
+          <button class="dpk-btn dpk-btn--accent" type="submit">${t.add}</button>
+        </div>
+      </form>
+    `}#o(t){const e=t.querySelector("textarea"),r=e?.value.trim()??"";if(!e||r==="")return;const a=!this.dispatchEvent(new CustomEvent("dpk-thread-comment-add",{detail:{body:r},bubbles:!0,composed:!0,cancelable:!0}));this.#e=!a,a&&(e.value=""),this.requestUpdate()}#l(t){this.dispatchEvent(new CustomEvent("dpk-thread-comment-delete",{detail:{id:t},bubbles:!0,composed:!0,cancelable:!0}))}}const Gt=()=>{customElements.get("dpk-comment-thread")||customElements.define("dpk-comment-thread",it)},Xt=G({en:{heading:"Table",empty:"No rows.",notRecorded:"Could not record it. Place this inside a dpk-view-* element.",filterPlaceholder:"Filter\u2026",filterAriaLabel:"Filter rows",groupByLabel:"Group by",groupByNone:"None",sortAscending:"Sorted ascending",sortDescending:"Sorted descending",sortButtonAriaLabel:s=>`Sort by ${s}`,addRowButton:"+ Row",deleteRowAriaLabel:s=>`Delete ${s}`,commentAriaLabel:s=>`Comment on ${s}`,rowCount:(s,t)=>s===t?`${t} row`:`${s} / ${t} row`,addRowTitle:"Add row",addRowSummary:s=>`Added ${s}`,setCellTitle:"Edit cell",setCellSummary:(s,t)=>`${s}: ${t}`,deleteRowTitle:"Delete row",deleteRowSummary:s=>`Removed ${s}`,reorderRowTitle:"Reorder row",reorderRowSummary:s=>`Moved ${s}`},ja:{heading:"\u30C6\u30FC\u30D6\u30EB",empty:"\u884C\u304C\u3042\u308A\u307E\u305B\u3093\u3002",notRecorded:"\u8A18\u9332\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-view-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002",filterPlaceholder:"\u7D5E\u308A\u8FBC\u307F\u2026",filterAriaLabel:"\u884C\u3092\u7D5E\u308A\u8FBC\u3080",groupByLabel:"\u30B0\u30EB\u30FC\u30D7\u5316",groupByNone:"\u306A\u3057",sortAscending:"\u6607\u9806\u3067\u4E26\u3079\u66FF\u3048",sortDescending:"\u964D\u9806\u3067\u4E26\u3079\u66FF\u3048",sortButtonAriaLabel:s=>`${s} \u3067\u4E26\u3079\u66FF\u3048`,addRowButton:"\uFF0B \u884C",deleteRowAriaLabel:s=>`${s} \u3092\u524A\u9664`,commentAriaLabel:s=>`${s} \u306B\u30B3\u30E1\u30F3\u30C8`,rowCount:(s,t)=>s===t?`${t} \u884C`:`${s} / ${t} \u884C`,addRowTitle:"\u884C\u3092\u8FFD\u52A0",addRowSummary:s=>`${s} \u3092\u8FFD\u52A0`,setCellTitle:"\u30BB\u30EB\u3092\u7DE8\u96C6",setCellSummary:(s,t)=>`${s}: ${t}`,deleteRowTitle:"\u884C\u3092\u524A\u9664",deleteRowSummary:s=>`${s} \u3092\u524A\u9664`,reorderRowTitle:"\u884C\u3092\u4E26\u3079\u66FF\u3048",reorderRowSummary:s=>`${s} \u3092\u79FB\u52D5`}}),Yt=["gray","blue","green","amber","violet","red"],Vt=["text","number","tag","status","person"],ot=()=>({columns:[],rows:[]}),Jt=C({id:y(g(),k(1)),label:y(g(),k(1)),type:Z(Vt),sortable:w(Lt())}),nt=C({label:g(),tone:Z(Yt)}),Qt=B([g(),Q(),O(),T(g()),nt]),Zt=C({id:y(g(),k(1)),cells:w(J(g(),Qt),{}),questions:w(g())}),te=C({columns:T(Jt),rows:w(T(Zt),[])}),U=(s,t)=>{switch(s.type){case"text":if(t==null)return{type:"text",value:null};if(typeof t=="string")return{type:"text",value:t};break;case"number":if(t==null)return{type:"number",value:null};if(typeof t=="number")return{type:"number",value:t};break;case"person":if(t==null)return{type:"person",value:null};if(typeof t=="string")return{type:"person",value:t};break;case"tag":if(t===void 0)return{type:"tag",value:[]};if(Array.isArray(t))return{type:"tag",value:t};break;case"status":if(t==null)return{type:"status",value:null};if(typeof t=="object"&&!Array.isArray(t)&&"tone"in t)return{type:"status",value:t};break}throw new Error(`cell for column "${s.id}" does not match its type "${s.type}"`)},dt=s=>{const t=At(te,s),e=new Set,r=t.columns.map(n=>{if(e.has(n.id))throw new Error(`duplicate column id: ${n.id}`);return e.add(n.id),{id:n.id,label:n.label,type:n.type,sortable:n.sortable??!0}}),a=new Map(r.map(n=>[n.id,n])),i=new Set,o=t.rows.map(n=>{if(i.has(n.id))throw new Error(`duplicate row id: ${n.id}`);i.add(n.id);for(const c of Object.keys(n.cells))if(!a.has(c))throw new Error(`row "${n.id}" has a cell for unknown column "${c}"`);const d={};for(const c of r)d[c.id]=U(c,n.cells[c.id]);return n.questions===void 0?{id:n.id,cells:d}:{id:n.id,cells:d,questions:n.questions}});return{columns:r,rows:o}},ee={sort:null,groupBy:null,filter:""},_=s=>{switch(s.type){case"text":case"person":return s.value??"";case"number":return s.value===null?"":String(s.value);case"tag":return s.value.join(" ");case"status":return s.value?.label??""}},lt=s=>s.type==="number"?s.value??-1/0:_(s).toLowerCase(),re=(s,t)=>{const e=t.trim().toLowerCase();return e===""?!0:Object.values(s.cells).some(r=>_(r).toLowerCase().includes(e))},se=(s,t)=>{const e=s.rows.filter(d=>re(d,t.filter)),r=t.sort,a=r===null?e:[...e].sort((d,c)=>{const h=lt(d.cells[r.column]??{type:"text",value:null}),u=lt(c.cells[r.column]??{type:"text",value:null}),f=h<u?-1:h>u?1:0;return r.direction==="asc"?f:-f});if(t.groupBy===null)return[{key:"",label:"",rows:a}];const i=t.groupBy,o=[],n=new Map;for(const d of a){const c=d.cells[i],h=c===void 0?"":_(c),u=h===""?"\0empty":h;n.has(u)||(o.push(u),n.set(u,[])),n.get(u)?.push(d)}return o.map(d=>({key:d,label:d==="\0empty"?"":d,rows:n.get(d)??[]}))},ct="ADD_ROW",N="SET_CELL",ut="DELETE_ROW",ht="REORDER_ROW",pt=s=>`element:${encodeURIComponent(s)}/table/rows`,x=(s,t)=>`element:${encodeURIComponent(s)}/row/${encodeURIComponent(t)}`,z=s=>{const t=q(s);return t?.length===3&&t[1]==="row"?t[2]??null:null},ae=s=>{const t=q(s);return t?.length===3&&t[1]==="table"&&t[2]==="rows"},gt=B([g(),Q(),O(),T(g()),nt]),ie=L({id:y(g(),k(1)),cells:w(J(g(),gt),{})}),oe=L({column:y(g(),k(1)),value:gt}),ne=L({before:B([g(),O()])}),de=(s,t,e)=>{let r=[...t.rows];const a=o=>r.findIndex(n=>n.id===o),i=e.map(o=>{if(o.type===ct){if(!ae(o.target.id))return{id:o.id,title:s.addRowTitle,stale:"target-missing"};const n=A(ie,o.payload);if(!n.success||a(n.output.id)>=0)return{id:o.id,title:s.addRowTitle,stale:"constraint-violated"};const d={};for(const c of t.columns)d[c.id]=U(c,n.output.cells[c.id]);return r=[...r,{id:n.output.id,cells:d}],{id:o.id,title:s.addRowTitle,summary:s.addRowSummary(n.output.id),tone:"create"}}if(o.type===N){const n=z(o.target.id),d=n===null?-1:a(n),c=A(oe,o.payload),h=d<0?void 0:r[d];if(h===void 0||!c.success)return{id:o.id,title:s.setCellTitle,stale:"target-missing"};const u=t.columns.find(m=>m.id===c.output.column);if(u===void 0)return{id:o.id,title:s.setCellTitle,stale:"constraint-violated"};let f;try{f=U(u,c.output.value)}catch{return{id:o.id,title:s.setCellTitle,stale:"constraint-violated"}}return r=r.map((m,v)=>v===d?{...m,cells:{...m.cells,[u.id]:f}}:m),{id:o.id,title:s.setCellTitle,summary:s.setCellSummary(h.id,u.label),tone:"update"}}if(o.type===ut){const n=z(o.target.id),d=n===null?-1:a(n);if(d<0)return{id:o.id,title:s.deleteRowTitle,stale:"target-missing"};const c=r[d];return r=r.filter((h,u)=>u!==d),{id:o.id,title:s.deleteRowTitle,summary:s.deleteRowSummary(c?.id??""),tone:"delete"}}if(o.type===ht){const n=z(o.target.id),d=n===null?-1:a(n),c=A(ne,o.payload);if(d<0||!c.success)return{id:o.id,title:s.reorderRowTitle,stale:"target-missing"};const h=c.output.before,u=h===null?r.length:a(h);if(h!==null&&(u<0||h===n))return{id:o.id,title:s.reorderRowTitle,stale:"constraint-violated"};const f=r[d];if(f===void 0)return{id:o.id,title:s.reorderRowTitle,stale:"target-missing"};const m=r.filter((W,St)=>St!==d),v=h===null?m.length:m.findIndex(W=>W.id===h);return r=v<0?[...m,f]:[...m.slice(0,v),f,...m.slice(v)],{id:o.id,title:s.reorderRowTitle,summary:s.reorderRowSummary(f.id),tone:"move"}}return{id:o.id,title:o.type,stale:"unsupported-action-type"}});return{data:{columns:t.columns,rows:r},results:i}},le=E`
+  :host {
+    display: block;
+    color: var(--dpk-ink);
+    font-family: var(--dpk-body);
+  }
+
+  .head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+
+  .heading {
+    font-weight: 650;
+  }
+
+  .count {
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-mono);
+    font-size: 12px;
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  .filter {
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font: inherit;
+    font-size: 13px;
+    padding: 5px 9px;
+    min-width: 160px;
+  }
+
+  .group-by {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--dpk-ink-soft);
+    font-size: 12px;
+  }
+
+  .add-row {
+    margin-inline-start: auto;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    font: inherit;
+    font-size: 13px;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+
+  .add-row:hover {
+    color: var(--dpk-accent);
+    border-color: var(--dpk-accent);
+  }
+
+  .scroll {
+    overflow-x: auto;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--dpk-paper-sunken);
+    text-align: left;
+    font-weight: 600;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--dpk-rule-strong);
+  }
+
+  th,
+  td {
+    padding: 7px 10px;
+  }
+
+  .handle-col,
+  .actions-col {
+    width: 1%;
+  }
+
+  .sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: 600;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .sort-icon svg {
+    width: 12px;
+    height: 12px;
+    display: block;
+  }
+
+  .group-head th {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink-soft);
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  tbody tr[data-row] {
+    border-bottom: 1px solid var(--dpk-rule);
+    cursor: pointer;
+  }
+
+  tbody tr[data-row]:hover {
+    background: var(--dpk-paper-sunken);
+  }
+
+  tbody tr[data-row].is-selected {
+    background: color-mix(in srgb, var(--dpk-blue-soft) 70%, transparent);
+  }
+
+  tbody tr[data-row].is-dragging {
+    opacity: 0.4;
+  }
+
+  tbody tr[data-row][data-drop-before] {
+    box-shadow: inset 0 2px 0 0 var(--dpk-accent);
+  }
+
+  tbody tr[data-row]:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  td.handle {
+    cursor: grab;
+    color: var(--dpk-ink-faint);
+  }
+
+  td.handle svg {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  td.editing {
+    padding: 3px 6px;
+  }
+
+  .cell-input {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--dpk-accent);
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font: inherit;
+    font-size: 13px;
+    padding: 4px 6px;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .tag {
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink-soft);
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+
+  .status {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--dpk-radius-xs);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px 8px;
+  }
+
+  .status[data-tone='gray'] {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink-soft);
+  }
+
+  .status[data-tone='blue'] {
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue-strong);
+  }
+
+  .status[data-tone='green'] {
+    background: var(--dpk-green-soft);
+    color: var(--dpk-green);
+  }
+
+  .status[data-tone='amber'] {
+    background: var(--dpk-amber-soft);
+    color: var(--dpk-amber);
+  }
+
+  .status[data-tone='violet'] {
+    background: var(--dpk-violet-soft);
+    color: var(--dpk-violet);
+  }
+
+  .status[data-tone='red'] {
+    background: var(--dpk-danger-soft);
+    color: var(--dpk-danger);
+  }
+
+  .person {
+    color: var(--dpk-ink-soft);
+  }
+
+  .row-actions {
+    display: flex;
+    gap: 2px;
+    white-space: nowrap;
+  }
+
+  .comment,
+  .delete {
+    display: inline-grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  tr:hover .comment,
+  tr:hover .delete,
+  tr:focus-within .comment,
+  tr:focus-within .delete {
+    opacity: 1;
+  }
+
+  .comment:hover {
+    color: var(--dpk-blue);
+  }
+
+  .delete:hover {
+    color: var(--dpk-danger);
+  }
+
+  .comment:focus-visible,
+  .delete:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .comment svg,
+  .delete svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .error,
+  .empty {
+    color: var(--dpk-ink-soft);
+    font-size: 13px;
+  }
+
+  .error {
+    color: var(--dpk-danger);
+  }
+`,ce=(...s)=>s.filter(t=>typeof t=="string"&&t.length>0).join(" ");class mt extends D{static{this.styles=[I,X,le]}static{this.properties={id:{type:String,reflect:!0},heading:{type:String},readonly:{type:Boolean,reflect:!0},data:{attribute:!1}}}#e=new Y(this);#r=new Bt(this);#n=null;#i=null;#a=null;#t=ot();#g=[];#m=[];#s=ee;#o=null;#l=null;#c=null;#d=null;#f=null;constructor(){super(),this.id=this.getAttribute("id")??"",this.heading=null,this.readonly=!1,this.data=null}connectedCallback(){super.connectedCallback(),this.#n=Nt(this,dt,t=>{this.data===null&&(t.ok?(this.#i=t.value,this.#a=null):(this.#i=null,this.#a=t.error),this.#O(),this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0})))})}disconnectedCallback(){super.disconnectedCallback(),this.#n?.(),this.#n=null}willUpdate(t){t.has("data")&&this.data!==null&&(this.#i=this.data,this.#a=null,this.#O())}get commentTargets(){if(!this.id)return[];const t=`${this.#h} \xB7 ${this.id}`;return[{value:pt(this.id),label:this.#h,group:t},...this.#t.rows.map(e=>({value:x(this.id,e.id),label:this.#w(e),group:t}))]}get elementActions(){return this.#g}set elementActions(t){this.#g=t,this.#O()}get elementActionResults(){return this.#m}get selection(){return this.#o}render(){const t=this.#u;if(this.#a!==null)return l`<p class="error">${this.#a}</p>`;const e=se(this.#t,this.#s),r=this.#t.rows.length,a=e.reduce((o,n)=>o+n.rows.length,0),i=this.#p();return l`
+      <div class="head">
+        <span class="heading">${this.#h}</span>
+        <span class="count">${t.rowCount(a,r)}</span>
+      </div>
+      <div class="toolbar">
+        <input
+          type="search"
+          class="filter"
+          placeholder=${t.filterPlaceholder}
+          aria-label=${t.filterAriaLabel}
+          .value=${this.#s.filter}
+          @input=${Ot(o=>{this.#s={...this.#s,filter:o},this.requestUpdate()})}
+        />
+        ${this.#t.columns.length===0?p:l`<label class="group-by">
+                <span>${t.groupByLabel}</span>
+                ${this.#r.render({options:[{value:"",label:t.groupByNone},...this.#t.columns.map(o=>({value:o.id,label:o.label}))],value:this.#s.groupBy??"",onChange:o=>{this.#s={...this.#s,groupBy:o===""?null:o},this.requestUpdate()},ariaLabel:t.groupByLabel})}
+              </label>`}
+        ${!this.readonly&&this.id?l`<button type="button" class="add-row" @click=${()=>this.#R()}>${t.addRowButton}</button>`:p}
+      </div>
+      ${this.#f==="row"?l`<p class="error" role="alert">${t.notRecorded}</p>`:p}
+      ${r===0?l`<p class="empty">${t.empty}</p>`:l`<div class="scroll">
+              <table>
+                <thead>
+                  <tr>
+                    ${i?l`<th class="handle-col"></th>`:p}
+                    ${this.#t.columns.map(o=>this.#b(t,o))}
+                    <th class="actions-col"></th>
+                  </tr>
+                </thead>
+                ${e.map(o=>this.#D(t,o,i))}
+              </table>
+            </div>`}
+    `}get#u(){return Xt(this.#e.locale)}get#h(){return this.heading??this.#u.heading}#p(){return!this.readonly&&this.id.length>0&&this.#s.sort===null&&this.#s.groupBy===null}#b(t,e){if(!e.sortable)return l`<th>${e.label}</th>`;const r=this.#s.sort,a=r?.column===e.id;return l`<th>
+      <button
+        type="button"
+        class="sort"
+        aria-label=${t.sortButtonAriaLabel(e.label)}
+        title=${a?r?.direction==="asc"?t.sortAscending:t.sortDescending:""}
+        @click=${()=>this.#x(e.id)}
+      >
+        <span>${e.label}</span>
+        ${a?l`<span class="sort-icon">${r?.direction==="asc"?qt():Mt()}</span>`:p}
+      </button>
+    </th>`}#x(t){const e=this.#s.sort;if(e?.column===t&&e.direction==="desc")this.#s={...this.#s,sort:null};else{const r=e?.column===t&&e.direction==="asc"?"desc":"asc";this.#s={...this.#s,sort:{column:t,direction:r}}}this.requestUpdate()}#D(t,e,r){const a=this.#t.columns.length+1+(r?1:0);return l`<tbody
+      @dragover=${i=>this.#U(i,r)}
+      @drop=${i=>this.#_(i,r)}
+    >
+      ${this.#s.groupBy===null?p:l`<tr class="group-head">
+              <th colspan=${a}>${e.label===""?t.groupByNone:e.label} (${e.rows.length})</th>
+            </tr>`}
+      ${b(e.rows,i=>i.id,i=>this.#k(t,i,r))}
+    </tbody>`}#k(t,e,r){const a=this.#o===e.id;return l`<tr
+      data-row=${e.id}
+      data-grill-questions=${this.#N(e)}
+      class=${ce(a&&"is-selected",this.#c===e.id&&"is-dragging")}
+      ?data-drop-before=${this.#d===e.id}
+      tabindex="0"
+      role="button"
+      aria-pressed=${a}
+      @click=${()=>this.#v(e.id)}
+      @keydown=${i=>this.#L(i,e.id)}
+    >
+      ${r?l`<td
+              class="handle"
+              draggable="true"
+              @click=${i=>i.stopPropagation()}
+              @dragstart=${i=>this.#E(i,e.id)}
+              @dragend=${()=>this.#q()}
+            >
+              ${tt()}
+            </td>`:p}
+      ${this.#t.columns.map(i=>this.#I(e,i))}
+      <td class="row-actions">
+        ${this.id?l`<button
+                type="button"
+                class="comment"
+                aria-label=${t.commentAriaLabel(this.#w(e))}
+                title=${t.commentAriaLabel(this.#w(e))}
+                @click=${i=>{i.stopPropagation(),this.#B(e.id)}}
+              >
+                ${Ut()}
+              </button>`:p}
+        ${!this.readonly&&this.id?l`<button
+                type="button"
+                class="delete"
+                aria-label=${t.deleteRowAriaLabel(this.#w(e))}
+                title=${t.deleteRowAriaLabel(this.#w(e))}
+                @click=${i=>{i.stopPropagation(),this.#S(e)}}
+              >
+                ${V()}
+              </button>`:p}
+      </td>
+    </tr>`}#I(t,e){const r=t.cells[e.id];if(r===void 0)return l`<td></td>`;switch(r.type){case"text":return this.#$(t,e,r.value??"");case"number":return this.#$(t,e,r.value===null?"":String(r.value));case"tag":return l`<td>
+          <div class="tags">${r.value.map(a=>l`<span class="tag">${a}</span>`)}</div>
+        </td>`;case"status":return l`<td>
+          ${r.value?l`<span class="status" data-tone=${r.value.tone}>${r.value.label}</span>`:p}
+        </td>`;case"person":return l`<td>${r.value?l`<span class="person">${r.value}</span>`:p}</td>`}}#$(t,e,r){return this.readonly||!this.id?l`<td>${r}</td>`:this.#l?.row===t.id&&this.#l.column===e.id?l`<td class="editing" @click=${i=>i.stopPropagation()}>
+      <input
+        class="cell-input"
+        type=${e.type==="number"?"number":"text"}
+        .value=${r}
+        @keydown=${i=>this.#T(i)}
+        @blur=${i=>this.#A(t,e,i)}
+      />
+    </td>`:l`<td @dblclick=${()=>this.#C(t.id,e.id)}>${r}</td>`}#C(t,e){this.#l={row:t,column:e},this.requestUpdate(),this.updateComplete.then(()=>{const r=this.renderRoot.querySelector(".cell-input");r?.focus(),r?.select()})}#T(t){t.isComposing||(t.key==="Escape"?(t.preventDefault(),this.#l=null,this.requestUpdate()):t.key==="Enter"&&t.currentTarget instanceof HTMLInputElement&&(t.preventDefault(),t.currentTarget.blur()))}#A(t,e,r){if(!(r.target instanceof HTMLInputElement))return;this.#l=null;const a=r.target.value;if(e.type==="number"){const i=a.trim()===""?null:Number(a);if(i!==null&&Number.isNaN(i)){this.requestUpdate();return}this.#y(N,x(this.id,t.id),{column:e.id,value:i})}else this.#y(N,x(this.id,t.id),{column:e.id,value:a});this.requestUpdate()}#R(){if(!this.id)return;const t=new Set(this.#t.rows.map(a=>a.id)),e=_t("row",t),r=this.#y(ct,pt(this.id),{id:e,cells:{}});this.#f=r?null:"row",r&&(this.#o=e),this.requestUpdate()}#S(t){this.id&&(this.#y(ut,x(this.id,t.id),{}),this.#o===t.id&&(this.#o=null))}#v(t){this.#o=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("dpk-table-select",{detail:{id:t},bubbles:!0,composed:!0}))}#L(t,e){t.target===t.currentTarget&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.#v(e))}#B(t){this.dispatchEvent(new CustomEvent("dpk-comment-request",{detail:{target:x(this.id,t)},bubbles:!0,composed:!0}))}#E(t,e){this.#p()&&(this.#c=e,t.dataTransfer?.setData("text/plain",e))}#U(t,e){if(!e||this.#c===null)return;t.preventDefault();const r=this.#M(t);r!==this.#d&&(this.#d=r,this.requestUpdate())}#_(t,e){const r=this.#c;if(!e||r===null||!this.id)return;t.preventDefault();const a=this.#M(t);if(this.#q(),a===r)return;const i=this.#t.rows,o=i.findIndex(d=>d.id===r),n=a===null?i.length:i.findIndex(d=>d.id===a);o===n||o+1===n||this.#y(ht,x(this.id,r),{before:a})}#q(){this.#c===null&&this.#d===null||(this.#c=null,this.#d=null,this.requestUpdate())}#M(t){const e=t.currentTarget;return(e instanceof HTMLElement?[...e.querySelectorAll("[data-row]")]:[]).find(i=>{if(i.dataset.row===this.#c)return!1;const o=i.getBoundingClientRect();return t.clientY<o.top+o.height/2})?.dataset.row??null}#w(t){for(const e of this.#t.columns){const r=t.cells[e.id];if(r?.type==="text"&&r.value||r?.type==="person"&&r.value)return r.value}return t.id}#N(t){const e=t.questions?.trim();return e===void 0||e===""?p:e}#y(t,e,r){const a=new CustomEvent("dpk-element-action",{detail:{type:t,target:e,payload:r},bubbles:!0,composed:!0,cancelable:!0});return this.dispatchEvent(a),a.defaultPrevented}#O(){if(this.#i===null)this.#t=ot(),this.#m=this.#g.map(t=>({id:t.id,title:t.type,stale:"target-missing"}));else{const t=de(this.#u,this.#i,this.#g);this.#t=t.data,this.#m=t.results}this.#o!==null&&!this.#t.rows.some(t=>t.id===this.#o)&&(this.#o=null),this.requestUpdate()}}const ue=()=>{customElements.get("dpk-table")||customElements.define("dpk-table",mt)},ft=(s,t)=>{const e=Math.max(s.left,t.left),r=Math.max(s.top,t.top),a=Math.min(s.left+s.width,t.left+t.width),i=Math.min(s.top+s.height,t.top+t.height);return a>e&&i>r?{left:e,top:r,width:a-e,height:i-r}:null},he=(s,t)=>{const e=t.flatMap(d=>{const c=ft(s,d);return c?[c]:[]});if(!e[0])return null;const a=Math.min(...e.map(d=>d.left)),i=Math.min(...e.map(d=>d.top)),o=Math.max(...e.map(d=>d.left+d.width)),n=Math.max(...e.map(d=>d.top+d.height));return{box:{left:a,top:i,width:o-a,height:n-i},parts:t.map(d=>ft(s,d)?{left:d.left-a,top:d.top-i,width:d.width,height:d.height}:null)}},pe=(s,t,e)=>{const r=s.dataTransfer;if(!r)return;const a=he(e.getBoundingClientRect(),t.map(d=>d.getBoundingClientRect()));if(!a)return;const{box:i}=a,o=document.createElement("div");o.style.cssText=["position: fixed",`left: ${i.left}px`,`top: ${i.top}px`,`width: ${i.width}px`,`height: ${i.height}px`,"overflow: hidden","pointer-events: none","z-index: 2147483647",`background: ${getComputedStyle(e).backgroundColor}`].join("; ");for(const[d,c]of t.entries()){const h=a.parts[d],u=S(c);!h||!(u instanceof HTMLElement)||(u.style.position="absolute",u.style.left=`${h.left}px`,u.style.top=`${h.top}px`,u.style.width=`${h.width}px`,u.style.height=`${h.height}px`,u.style.margin="0",u.style.boxSizing="border-box",o.append(u))}const n=e.getRootNode();(n instanceof ShadowRoot?n:document.body).append(o),r.setDragImage(o,s.clientX-i.left,s.clientY-i.top),setTimeout(()=>o.remove(),0)},S=s=>{if(s instanceof Element&&s.shadowRoot)return ge(s,s.shadowRoot);const t=s.cloneNode(!1);t instanceof Element&&t.removeAttribute("id");for(const e of s.childNodes)t.appendChild(S(e));return t},ge=(s,t)=>{const e=document.createElement("span");for(const o of s.attributes)o.name!=="id"&&e.setAttribute(o.name,o.value);const r=getComputedStyle(s),a=s.getBoundingClientRect();e.style.display=r.display==="inline"?"inline-block":r.display,e.style.width=`${a.width}px`,e.style.height=`${a.height}px`,e.style.boxSizing="border-box",e.style.flex="none",e.style.verticalAlign=r.verticalAlign;const i=e.attachShadow({mode:"open"});"adoptedStyleSheets"in t&&(i.adoptedStyleSheets=t.adoptedStyleSheets);for(const o of t.childNodes)i.appendChild(S(o));for(const o of s.childNodes)e.appendChild(S(o));return e},bt=s=>s.some(t=>(t.subColumns?.length??0)>0),xt=s=>Math.max(s.subColumns?.length??1,1),vt=s=>{const t=s.subColumns??[];return t.length===0?[{columnId:s.id}]:t.map(e=>({columnId:s.id,subColumnId:e.id}))},P=s=>s.flatMap(vt),me=(s,t)=>t.subColumnId===void 0?s.draggable!==!1:(s.subColumns??[]).find(e=>e.id===t.subColumnId)?.draggable!==!1,j=(s,t)=>{const e=s.subColumns??[];return[e[0]?.id===t?"first":"",e.at(-1)?.id===t?"last":""].filter(r=>r!=="").join(" ")},wt="corner",yt="corner-sub",H=s=>`row-head:${s}`,F=s=>`col-head:${s}`,K=(s,t)=>`sub-head:${s}:${t}`,kt=(s,t)=>t.subColumnId===void 0?`cell:${s}:${t.columnId}`:`cell:${s}:${t.columnId}:${t.subColumnId}`,$t="dpk-matrix-reorder-row",Ct="dpk-matrix-reorder-column",Tt="dpk-matrix-reorder-sub-column",fe=E`
+  :host {
+    display: block;
+    --dpk-matrix-row-head-width: 140px;
+    --dpk-matrix-column-width: minmax(180px, 240px);
+    --dpk-matrix-dock-clearance: 0px;
+    /* A host with its own fully-styled head content (a raised band, say) sets
+       this to 0 on its own \`<dpk-matrix>\` rather than fight the padding from
+       outside the shadow root; the cell pad has no such escape hatch yet, since
+       every host so far wants it. */
+    --dpk-matrix-head-pad: 10px;
+    --dpk-matrix-cell-pad: 10px;
+    /* The width a draggable head's own grip plus the gap after it takes up
+       (14px icon + 8px gap, below): exposed so a host's slotted content can
+       bleed its own surface behind the grip (below) and, if it has a second
+       line, indent that line to the same start the first line's text gets. */
+    --dpk-matrix-grip-span: 22px;
+  }
+  /* The scroll frame fills the host a fill layout gave a height to, so the
+     grid scrolls inside it instead of spilling out of it: a frame taller than
+     its host would push the whole page into scrolling under a board that was
+     supposed to scroll itself, taking anything pinned to the page's bottom
+     edge with it. A host whose own height is its content keeps that height
+     (a percentage against an automatic height resolves to the content's). */
+  .matrix-scroll {
+    min-width: 0;
+    max-width: 100%;
+    height: 100%;
+    overflow: auto;
+    overscroll-behavior-x: contain;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper-sunken);
+    box-shadow: var(--dpk-shadow);
+  }
+  .matrix-grid {
+    display: grid;
+    gap: 0;
+    min-width: max-content;
+    padding-bottom: var(--dpk-matrix-dock-clearance);
+  }
+  .matrix-row {
+    display: grid;
+    grid-template-columns: var(--dpk-matrix-row-head-width) repeat(var(--matrix-cols), var(--dpk-matrix-column-width));
+  }
+  .matrix-row + .matrix-row {
+    border-top: 1px solid var(--dpk-rule);
+  }
+
+  /* The head stays at the top while the rows scroll. */
+  .matrix-head {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    border-bottom: 1px solid var(--dpk-rule-strong);
+    box-shadow: 0 8px 14px -12px var(--dpk-shade-3);
+  }
+
+  /* The lead column (the corner and every row's head) stays at the left while
+     the columns scroll sideways; opaque, so cells pass under it. The
+     background is set here, not left to the slotted content: a row's head
+     spans the whole row (as tall as the cards stacked in any of its cells),
+     taller than its own label, so without it the row's own background would
+     leave that extra height transparent and a cell scrolled underneath would
+     show through instead of staying hidden under the sticky column. */
+  .matrix-corner,
+  .matrix-row-head {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    padding: var(--dpk-matrix-head-pad);
+    background: var(--dpk-paper-sunken);
+    box-shadow: 1px 0 0 var(--dpk-rule);
+  }
+
+  .matrix-col-head,
+  .matrix-sub-head {
+    padding: var(--dpk-matrix-head-pad);
+    background: var(--dpk-paper-sunken);
+    border-left: 1px solid var(--dpk-rule);
+  }
+
+  /* A draggable row/column/sub-column head carries its own grip (below), laid
+     out as a flex sibling of whatever the host slots in; a head with no grip
+     (none draggable) still gets the same box, just with nothing in that
+     slot. Baseline-aligned, not centred on the whole box: a host's head can
+     hold more than one line (a name plus a meta line, a title plus a steps
+     list), and the grip should still sit with the *first* line's text, the
+     way it did when the host drew it inline there itself. */
+  .matrix-row-head,
+  .matrix-col-head,
+  .matrix-sub-head {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+  }
+  .matrix-row-head ::slotted(*),
+  .matrix-col-head ::slotted(*),
+  .matrix-sub-head ::slotted(*) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  /* The grip is the component's own, but the head's background, highlight or
+     border is the host's (its slotted content's) — so that surface has to
+     reach under the grip too, not stop at the slot's own flex box. A
+     draggable head's slotted content bleeds left by the grip's span and pads
+     the same amount back in: its content stays exactly where it was, but its
+     background now runs the full width of the cell, grip included (and,
+     with the grip's own stacking below, paints under it rather than over
+     it). A non-draggable head has no grip to bleed behind, so it is left at
+     its own natural padding. */
+  .matrix-row-head[draggable='true'] ::slotted(*),
+  .matrix-col-head[draggable='true'] ::slotted(*),
+  .matrix-sub-head[draggable='true'] ::slotted(*) {
+    margin-inline-start: calc(-1 * var(--dpk-matrix-grip-span));
+    padding-inline-start: var(--dpk-matrix-grip-span);
+  }
+
+  /* The grip itself: the same affordance everywhere a head can be dragged,
+     rendered by the component so every host gets it for free instead of
+     drawing its own. Lifted onto its own layer so the slotted content's
+     bled-left background (above) paints under it, not over it. Quiet until
+     the head it belongs to is hovered. */
+  .matrix-grip {
+    position: relative;
+    z-index: 1;
+    flex: none;
+    display: inline-flex;
+    color: var(--dpk-ink-faint);
+    transition: color 140ms ease;
+  }
+  .matrix-grip svg {
+    display: block;
+    width: 14px;
+    height: 14px;
+  }
+  .matrix-row-head:hover .matrix-grip,
+  .matrix-col-head:hover .matrix-grip,
+  .matrix-sub-head:hover .matrix-grip {
+    color: var(--dpk-blue);
+  }
+  /* The working surface: a quiet dot lattice on the sunken paper, so a card a
+     host places inside reads as something set down on the board rather than
+     text in a table cell. */
+  .matrix-cell {
+    padding: var(--dpk-matrix-cell-pad);
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+    border-left: 1px solid var(--dpk-rule);
+    border-top: 1px solid var(--dpk-rule);
+  }
+
+  /* Row drag: the head is the handle (hover/active cursor), the whole row the target. */
+  .matrix-row-head[draggable='true'] {
+    cursor: grab;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .matrix-row-head[draggable='true']:active {
+    cursor: grabbing;
+  }
+  .matrix-row[data-draggable='true'] {
+    cursor: grab;
+  }
+  .matrix-row[data-draggable='true']:active {
+    cursor: grabbing;
+  }
+  /*
+   * Dragging state: entire row fades. Never disable pointer events on the
+   * source here: Lit applies this state in the microtask right after
+   * dragstart, and Blink then re-hit-tests the pointer and aborts the drag
+   * when the source is no longer under it.
+   */
+  .matrix-row[data-row-dragging='true'] {
+    opacity: 0.45;
+  }
+  .matrix-row[data-row-drop='true'] {
+    outline: 2px dashed var(--dpk-blue);
+    outline-offset: -2px;
+  }
+
+  /* Column drag: a column's or sub-column's head is its handle, like a row's. */
+  .matrix-col-head[draggable='true'],
+  .matrix-sub-head[draggable='true'] {
+    cursor: grab;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .matrix-col-head[draggable='true']:active,
+  .matrix-sub-head[draggable='true']:active {
+    cursor: grabbing;
+  }
+  /* The dragged column fades from head to last cell, like a dragged row. */
+  .matrix-col-head[data-col-dragging='true'],
+  .matrix-sub-head[data-col-dragging='true'],
+  .matrix-cell[data-col-dragging='true'] {
+    opacity: 0.45;
+  }
+  /* The column a dragged one would land in lights up from head to last cell:
+     its sides run down every part and its head caps it. A column spans its
+     sub-columns, so only its outer sub-columns draw its sides. */
+  .matrix-col-head:is([data-col-drop='column'], [data-col-drop='subColumn']),
+  .matrix-sub-head:is([data-col-drop='column'], [data-col-drop='subColumn']),
+  .matrix-cell:is([data-col-drop='column'], [data-col-drop='subColumn']) {
+    --matrix-col-left: 2px;
+    --matrix-col-right: 2px;
+    --matrix-col-top: 0px;
+    box-shadow:
+      inset var(--matrix-col-left) 0 0 var(--dpk-blue),
+      inset calc(var(--matrix-col-right) * -1) 0 0 var(--dpk-blue),
+      inset 0 var(--matrix-col-top) 0 var(--dpk-blue);
+  }
+  [data-col-drop='column'][data-sub-edge]:not([data-sub-edge~='first']) {
+    --matrix-col-left: 0px;
+  }
+  [data-col-drop='column'][data-sub-edge]:not([data-sub-edge~='last']) {
+    --matrix-col-right: 0px;
+  }
+  .matrix-col-head[data-col-drop='column'],
+  .matrix-sub-head[data-col-drop='subColumn'] {
+    --matrix-col-top: 2px;
+  }
+  .matrix-cell:is([data-col-drop='column'], [data-col-drop='subColumn']) {
+    background: linear-gradient(var(--dpk-blue-soft), var(--dpk-blue-soft)), var(--dpk-dots), var(--dpk-paper-sunken);
+  }
+  /* The heads stay opaque: the cells scroll under them. */
+  .matrix-col-head:is([data-col-drop='column'], [data-col-drop='subColumn']),
+  .matrix-sub-head:is([data-col-drop='column'], [data-col-drop='subColumn']) {
+    background-image: linear-gradient(var(--dpk-blue-soft), var(--dpk-blue-soft));
+  }
+`;class Rt extends D{static{this.styles=[I,fe]}static{this.properties={rows:{attribute:!1},columns:{attribute:!1}}}#e=null;#r=null;constructor(){super(),this.rows=[],this.columns=[]}willUpdate(t){!t.has("rows")&&!t.has("columns")||this.#e&&!this.#n()&&(this.#e=null,this.#r=null)}#n(){const t=this.#e;return t?t.kind==="row"?this.rows.some(r=>r.id===t.id):t.kind==="column"?this.columns.some(r=>r.id===t.id):(this.columns.find(r=>r.id===t.columnId)?.subColumns??[]).some(r=>r.id===t.id):!0}updated(){this.#i()}#i(){for(const t of this.rows)this.#a(H(t.id),t.draggable!==!1);for(const t of this.columns){this.#a(F(t.id),t.draggable!==!1);for(const e of t.subColumns??[])this.#a(K(t.id,e.id),e.draggable!==!1)}}#a(t,e){const r=this.renderRoot.querySelector(`slot[name="${t}"]`);if(r instanceof HTMLSlotElement)for(const a of r.assignedElements({flatten:!0}))a instanceof HTMLElement&&(a.draggable=e)}#t(t){return t?l`<span class="matrix-grip" aria-hidden="true">${tt()}</span>`:""}render(){const t=bt(this.columns),e=P(this.columns).length;return l`
+      <div class="matrix-scroll">
+        <div class="matrix-grid" style=${`--matrix-cols:${e}`}>
+          <div class="matrix-head">
+            <div class="matrix-row">
+              <div class="matrix-corner"><slot name=${wt}></slot></div>
+              ${b(this.columns,r=>r.id,r=>this.#g(r))}
+            </div>
+            ${t?l`<div class="matrix-row">
+                    <div class="matrix-corner"><slot name=${yt}></slot></div>
+                    ${b(this.columns,r=>r.id,r=>this.#m(r))}
+                  </div>`:""}
+          </div>
+          ${b(this.rows,r=>r.id,r=>this.#o(r))}
+        </div>
+      </div>
+    `}#g(t){const e=t.draggable!==!1;return l`
+      <div
+        class="matrix-col-head"
+        style=${`grid-column: span ${xt(t)}`}
+        data-column=${t.id}
+        draggable=${e?"true":"false"}
+        data-col-dragging=${String(this.#d({columnId:t.id}))}
+        data-col-drop=${this.#f({columnId:t.id})}
+        @dragstart=${r=>this.#$(r,t)}
+        @dragend=${()=>this.#p()}
+        @dragenter=${r=>this.#C(r,t)}
+        @dragover=${r=>this.#C(r,t)}
+        @dragleave=${()=>this.#h(`column:${t.id}`)}
+        @drop=${r=>this.#T(r,t)}
+      >
+        ${this.#t(e)}
+        <slot name=${F(t.id)} @slotchange=${()=>this.#i()}></slot>
+      </div>
+    `}#m(t){const e=t.subColumns??[];if(e.length===0){const r={columnId:t.id};return l`<div
+        class="matrix-sub-head matrix-sub-head-spacer"
+        data-column=${t.id}
+        data-col-dragging=${String(this.#d(r))}
+        data-col-drop=${this.#f(r)}
+      ></div>`}return l`${b(e,r=>r.id,r=>this.#s(t,r))}`}#s(t,e){const r=e.draggable!==!1,a={columnId:t.id,subColumnId:e.id};return l`
+      <div
+        class="matrix-sub-head"
+        data-column=${t.id}
+        data-sub-column=${e.id}
+        data-sub-edge=${j(t,e.id)}
+        draggable=${r?"true":"false"}
+        data-col-dragging=${String(this.#d(a))}
+        data-col-drop=${this.#f(a)}
+        @dragstart=${i=>this.#A(i,t,e.id)}
+        @dragend=${()=>this.#p()}
+        @dragenter=${i=>this.#R(i,t,e.id)}
+        @dragover=${i=>this.#R(i,t,e.id)}
+        @dragleave=${()=>this.#h(`sub:${t.id}:${e.id}`)}
+        @drop=${i=>this.#S(i,t,e.id)}
+      >
+        ${this.#t(r)}
+        <slot name=${K(t.id,e.id)} @slotchange=${()=>this.#i()}></slot>
+      </div>
+    `}#o(t){const e=t.draggable!==!1;return l`
+      <div
+        class="matrix-row"
+        data-row=${t.id}
+        data-draggable=${String(e)}
+        data-row-dragging=${String(this.#e?.kind==="row"&&this.#e.id===t.id)}
+        data-row-drop=${String(this.#r===`row:${t.id}`)}
+        @dragenter=${r=>this.#k(r,t)}
+        @dragover=${r=>this.#k(r,t)}
+        @dragleave=${()=>this.#h(`row:${t.id}`)}
+        @drop=${r=>this.#I(r,t)}
+      >
+        <div
+          class="matrix-row-head"
+          draggable=${e?"true":"false"}
+          @dragstart=${r=>this.#D(r,t)}
+          @dragend=${()=>this.#p()}
+        >
+          ${this.#t(e)}
+          <slot name=${H(t.id)} @slotchange=${()=>this.#i()}></slot>
+        </div>
+        ${b(P(this.columns),r=>r.subColumnId===void 0?r.columnId:`${r.columnId}:${r.subColumnId}`,r=>this.#l(t,r))}
+      </div>
+    `}#l(t,e){return l`
+      <div
+        class="matrix-cell"
+        data-row=${t.id}
+        data-column=${e.columnId}
+        data-sub-column=${e.subColumnId??""}
+        data-col-dragging=${String(this.#d(e))}
+        data-col-drop=${this.#f(e)}
+        data-sub-edge=${this.#c(e)}
+        @dragenter=${r=>this.#v(r,e)}
+        @dragover=${r=>this.#v(r,e)}
+        @dragleave=${()=>this.#L(e)}
+        @drop=${r=>this.#B(r,e)}
+      >
+        <slot name=${kt(t.id,e)}></slot>
+      </div>
+    `}#c(t){if(t.subColumnId===void 0)return"";const e=this.columns.find(r=>r.id===t.columnId);return e?j(e,t.subColumnId):""}#d(t){const e=this.#e;return e?e.kind==="column"?e.id===t.columnId:e.kind==="subColumn"?e.columnId===t.columnId&&e.id===t.subColumnId:!1:!1}#f(t){return this.#r===`column:${t.columnId}`?"column":t.subColumnId!==void 0&&this.#r===`sub:${t.columnId}:${t.subColumnId}`?"subColumn":"none"}#u(t){this.#r!==t&&(this.#r=t,this.requestUpdate())}#h(t){this.#r===t&&(this.#r=null,this.requestUpdate())}#p(){this.#e===null&&this.#r===null||(this.#e=null,this.#r=null,this.requestUpdate())}#b(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0,cancelable:!0}))}#x(t){const e=t.currentTarget;return e instanceof Element?st(e.getBoundingClientRect(),t.clientY):"end"}#D(t,e){if(e.draggable===!1)return;this.#e={kind:"row",id:e.id},t.dataTransfer?.setData("text/plain",`row:${e.id}`),t.dataTransfer&&(t.dataTransfer.effectAllowed="move");const a=(t.currentTarget instanceof Element?t.currentTarget:null)?.closest(".matrix-row");if(a&&t.dataTransfer){const i=a.getBoundingClientRect();t.dataTransfer.setDragImage(a,t.clientX-i.left,t.clientY-i.top)}this.requestUpdate()}#k(t,e){e.draggable===!1||this.#e?.kind!=="row"||(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.#u(`row:${e.id}`))}#I(t,e){const r=this.#e;if(e.draggable===!1||r?.kind!=="row")return;t.preventDefault();const a=this.#x(t),i=R(this.rows.map(o=>o.id),r.id,e.id,a);this.#p(),this.#b($t,{rowId:r.id,after:i})}#$(t,e){e.draggable!==!1&&(this.#e={kind:"column",id:e.id},t.dataTransfer?.setData("text/plain",`column:${e.id}`),t.dataTransfer&&(t.dataTransfer.effectAllowed="move"),this.#E(t,r=>r.getAttribute("data-column")===e.id),this.requestUpdate())}#C(t,e){e.draggable===!1||this.#e?.kind!=="column"||(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.#u(`column:${e.id}`))}#T(t,e){const r=this.#e;if(e.draggable===!1||r?.kind!=="column")return;t.preventDefault();const a=this.#x(t),i=R(this.columns.map(o=>o.id),r.id,e.id,a);this.#p(),this.#b(Ct,{columnId:r.id,after:i})}#A(t,e,r){(e.subColumns??[]).find(i=>i.id===r)?.draggable!==!1&&(this.#e={kind:"subColumn",columnId:e.id,id:r},t.dataTransfer?.setData("text/plain",`sub-column:${e.id}:${r}`),t.dataTransfer&&(t.dataTransfer.effectAllowed="move"),this.#E(t,i=>i.getAttribute("data-column")===e.id&&i.getAttribute("data-sub-column")===r),this.requestUpdate())}#R(t,e,r){const a=this.#e;a?.kind!=="subColumn"||a.columnId!==e.id||(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.#u(`sub:${e.id}:${r}`))}#S(t,e,r){const a=this.#e;if(a?.kind!=="subColumn"||a.columnId!==e.id)return;t.preventDefault();const i=this.#x(t),o=(e.subColumns??[]).map(d=>d.id),n=R(o,a.id,r,i);this.#p(),this.#b(Tt,{columnId:e.id,subColumnId:a.id,after:n})}#v(t,e){const r=this.#e;if(r){if(r.kind==="column"){t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.#u(`column:${e.columnId}`);return}r.kind==="subColumn"&&e.subColumnId!==void 0&&r.columnId===e.columnId&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),this.#u(`sub:${e.columnId}:${e.subColumnId}`))}}#L(t){this.#h(`column:${t.columnId}`),t.subColumnId!==void 0&&this.#h(`sub:${t.columnId}:${t.subColumnId}`)}#B(t,e){const r=this.#e;if(r){if(r.kind==="column"){const a=this.columns.find(i=>i.id===e.columnId);a&&this.#T(t,a);return}if(r.kind==="subColumn"&&e.subColumnId!==void 0&&r.columnId===e.columnId){const a=this.columns.find(i=>i.id===e.columnId);a&&this.#S(t,a,e.subColumnId)}}}#E(t,e){const r=this.renderRoot.querySelector(".matrix-scroll");if(!r)return;const a=[...r.querySelectorAll("[data-column]")].filter(e),i=a.filter(n=>n.classList.contains("matrix-col-head")||n.classList.contains("matrix-sub-head")),o=a.filter(n=>!i.includes(n));pe(t,[...o,...i],r)}}const be=()=>{customElements.get("dpk-matrix")||customElements.define("dpk-matrix",Rt)};export{et as B,wt as C,it as D,zt as E,Ct as M,yt as a,Rt as b,mt as c,$t as d,Tt as e,P as f,kt as g,F as h,Gt as i,be as j,ue as k,bt as l,me as m,vt as n,j as o,dt as p,K as q,H as r,xt as s,Pt as t,jt as u,q as v,R as w,Ft as x};