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

package/dist/chunks/shared-dnY35u9q.js

@@ -0,0 +1,2530 @@
+import{aE as bt,ai as h,as as r,S as qs,aQ as G,a5 as D,ak as z,X as M,j as K,ah as T,al as R,b2 as Ps,H as Is,b3 as Xt,b4 as Os,b5 as Us,au as B,a9 as kt,aw as u,b6 as Yt,aa as w,aX as vt,a8 as Zt,aD as Jt,ac as b,aL as Fs,ad as dt,aO as Qt,az as st,aH as F,b7 as te,av as y,ax as $,a_ as xt,ay as E,aM as W,aB as at,aj as I,aC as ee,ab as V,aA as se,ag as yt,ar as ae,aY as Hs,aW as ne,b8 as _s,b9 as wt,ba as Bs,bb as ie,bc as ct,z as Ns,bd as re,aG as Ws,aZ as Gs,y as Ks,be as Vs,_ as Xs,$ as Ys}from"./shared-DdpMqkAH.js";import{o as N,r as Zs}from"./shared-TrlnHjrJ.js";import{e as Js}from"./shared-a9QCZpxj.js";import{a as oe,c as Qs}from"./shared-Cas88qVh.js";import{c as ta}from"./shared-qk9TB_UM.js";import{p as ea,i as sa,r as aa,c as na,a as le,b as de,d as ia,e as ra,f as oa,h as ce,g as la,j as $t,s as da,k as ca,l as pa,m as ha,n as ua,t as ma}from"./shared-C-M2Nfmu.js";import{B as ga,t as fa,v as ba,i as ka,k as va,j as xa}from"./shared-df9XN7ns.js";import{d as ya}from"./shared-CnPCm4bJ.js";class pt{#n;#t;#e=null;#s=null;#a=null;#i=null;#r=new Map;#o=null;constructor(t){this.#n=t,this.#t=new bt(t),t.addController(this)}get isOpen(){return this.#e!==null}open(t,e,s){this.#e=t,this.#a=e,this.#i=s??null,this.#o=null,this.#n.requestUpdate()}close(){this.#e=null,this.#a=null,this.#i=null,this.#n.requestUpdate()}hostDisconnected(){this.close()}sync(t){const e=this.#s!==this.#e;this.#s=this.#e,!(t===null||this.#a===null||this.#e===null)&&(this.#t.open(t,this.#a,{width:300,height:280},{placement:"right-start",trackTransform:!0}),e&&t.querySelector("textarea")?.focus({preventScroll:!0}))}render(t){const e=this.#e;if(e===null)return h;const s=ea(this.#r.get(e)??"",[],{...this.#i===null?{}:{label:this.#i},key:e,...this.#o===e&&t.errorMessage!==void 0?{error:t.errorMessage}:{}});return r`${sa(e,aa(na(t.locale),s,n=>this.#l(e,t.submit,n)))}`}#l(t,e,s){if(s.kind==="input"){this.#r=new Map(this.#r).set(t,s.body),this.#o=null,this.#n.requestUpdate();return}if(s.kind==="comment"){if(!e(t,s.body)){this.#o=t,this.#n.requestUpdate();return}const i=new Map(this.#r);i.delete(t),this.#r=i}this.#o=null,this.close()}}const Ct=(a,t,e,s)=>{if(a===null)return null;const n=qs(a),i=t.find(l=>l.value===n);return i===void 0?null:{id:"review-comment",entries:[{kind:"item",id:"review-comment",label:e.reviewComment,run:()=>s(n,i.label)}]}},ht=.08,pe=1.8,he=a=>{if(a.length===0)return{x:0,y:0,width:0,height:0};const t=Math.min(...a.map(i=>i.x)),e=Math.min(...a.map(i=>i.y)),s=Math.max(...a.map(i=>i.x+i.width))-t,n=Math.max(...a.map(i=>i.y+i.height))-e;return{x:t-s*.1,y:e-n*.1,width:s*1.2,height:n*1.2}},ue=(a,t)=>a+t/12,wa=(a,t)=>{if(a.length===0)return null;const e=Math.min(...a.map(n=>n.y)),s=a.filter(n=>n.y<e+t);return{x:Math.min(...s.map(n=>n.x)),y:e}},St=16,$a=.8,ut=(a,t,e,s,n)=>a==="start"?St-ue(t,e)*s:(n-e*s)/2-t*s,me=(a,t,e,s,n="center")=>{if(t.width===0||t.height===0)return{...a,x:0,y:0};const i=(l,d,o,g)=>{const p=o*a.scale,f=g*$a;if(p<=g){const S=ut(n,d,o,a.scale,g);return G(l,S-f,S+f)}return G(l,g-(d+o)*a.scale-f,-d*a.scale+f)};return{...a,x:i(a.x,t.x,t.width,e),y:i(a.y,t.y,t.height,s)}},Ca=(a,t,e,s,n,i,l="center")=>{const d=Math.abs(i)>Math.abs(n);if(d&&t.height*a.scale<=s)return null;const o=me({...a,x:a.x-n,y:a.y-i},t,e,s,l);return d&&o.y===a.y?null:o},Sa=a=>Math.exp(-a*.01),ge='button,[role="button"],a,input,textarea,select',Et=(a,t,e)=>{for(const s of a.composedPath()){if(s===t)return null;if(s instanceof Element&&s.matches(e))return s}return null},Ea=a=>{const{canvas:t,world:e,onClearSelection:s,onView:n,align:i="center",sizeWorld:l=!0}=a;let d={x:0,y:0,width:0,height:0},o={x:0,y:0,scale:1};const g=()=>({width:t.clientWidth||1e3,height:t.clientHeight||560}),p=()=>{const{width:c,height:m}=g();o=me(o,d,c,m,i),e.style.transform=`translate(${o.x}px, ${o.y}px) scale(${o.scale})`,e.style.setProperty("--dpk-zoom-inverse",String(1/o.scale)),e.style.setProperty("--dpk-zoom-scale",String(o.scale)),n?.(o)},f=()=>{const{width:c,height:m}=g(),k=d.width/1.2||1,x=d.height/1.2||1,C=G(Math.min((c-24)/k,(m-40)/x),ht,1);o={scale:C,x:ut(i,d.x,d.width,C,c),y:ut(i,d.y,d.height,C,m)},p()},S=c=>{const{width:m,height:k}=g(),x=he([c]),C=x.width/1.2||1,L=x.height/1.2||1;o={...o,scale:G(Math.min((m-24)/C,(k-40)/L),ht,pe)},o={...o,x:(m-x.width*o.scale)/2-x.x*o.scale,y:(k-x.height*o.scale)/2-x.y*o.scale},p()},O=()=>{const{width:c}=g(),m=d.width/1.2||1,k=G((c-24)/m,ht,1);o={scale:k,x:(c-d.width*k)/2-d.x*k,y:16},p()},lt=c=>{const{width:m,height:k}=g(),x=(C,L,Kt,Vt)=>Vt!==void 0?St-Vt:L<=Kt?ut(i,C,L,1,Kt):St-ue(C,L);o={scale:1,x:x(d.x,d.width,m,c?.x),y:x(d.y,d.height,k,c?.y)},p()},_=(c,m=g().width/2,k=g().height/2)=>{const x=o.scale,C=G(x*c,ht,pe);C!==x&&(o={scale:C,x:m-(m-o.x)*C/x,y:k-(k-o.y)*C/x},p())},Q=c=>{if(Et(c,t,".diagram-zoom")!==null)return;const m=c.deltaMode===1?16:c.deltaMode===2?g().height:1;if(c.ctrlKey||c.metaKey){c.preventDefault();const L=t.getBoundingClientRect();_(Sa(c.deltaY),c.clientX-L.left,c.clientY-L.top);return}const{width:k,height:x}=g(),C=Ca(o,d,k,x,c.deltaX*m,c.deltaY*m,i);C!==null&&(c.preventDefault(),o=C,p())},q=new Map;let A=null,P=!1;const U=()=>{const c=[...q.values()],m=c[0];if(!m)return null;const k=c[1];return k?{x:(m.x+k.x)/2,y:(m.y+k.y)/2,distance:Math.hypot(k.x-m.x,k.y-m.y)}:{...m,distance:0}},tt=c=>{q.size===0&&(P=!1);const m=Et(c,t,ge);c.button!==0||c.pointerType!=="touch"&&m!==null||(q.set(c.pointerId,{x:c.clientX,y:c.clientY}),A=U(),m===null&&t.setPointerCapture(c.pointerId),c.pointerType!=="touch"&&m===null&&(c.preventDefault(),t.focus({preventScroll:!0})))},Ht=c=>{if(!q.has(c.pointerId)||A===null)return;q.set(c.pointerId,{x:c.clientX,y:c.clientY});const m=U();if(m===null)return;const k=m.x-A.x,x=m.y-A.y;if((Math.abs(k)+Math.abs(x)>1||Math.abs(m.distance-A.distance)>1)&&(P=!0),m.distance>0&&A.distance>0){const C=t.getBoundingClientRect();_(Math.pow(m.distance/A.distance,.45),A.x-C.left,A.y-C.top)}o={...o,x:o.x+k,y:o.y+x},p(),A=m,t.classList.toggle("is-panning",P)},et=c=>{q.delete(c.pointerId),A=U(),!(q.size>0)&&(t.classList.remove("is-panning"),c.type==="pointercancel"&&(P=!1))},_t=c=>{P&&(c.preventDefault(),c.stopPropagation()),et(c)},Bt=c=>{if(P){c.preventDefault(),c.stopPropagation(),P=!1;return}!(c.target instanceof Element)||Et(c,t,ge)!==null||s()},Nt=c=>{if(c.target!==t)return;const m=30;if(c.key==="+"||c.key==="=")_(1.1);else if(c.key==="-")_(1/1.1);else if(c.key==="0")f();else if(c.key==="Escape"){if(s()===!1)return}else if(c.key==="ArrowLeft"||c.key==="ArrowRight"||c.key==="ArrowUp"||c.key==="ArrowDown")o={...o,x:o.x+(c.key==="ArrowLeft"?m:c.key==="ArrowRight"?-m:0),y:o.y+(c.key==="ArrowUp"?m:c.key==="ArrowDown"?-m:0)},p();else return;c.preventDefault()},Wt=c=>{const m=c.target instanceof HTMLElement?c.target:null;if(m===null||!c.composedPath().includes(e))return;const k=m.getBoundingClientRect(),x=t.getBoundingClientRect();let C=0,L=0;k.left<x.left+12?C=x.left+12-k.left:k.right>x.right-12&&(C=x.right-12-k.right),k.top<x.top+12?L=x.top+12-k.top:k.bottom>x.bottom-40&&(L=x.bottom-40-k.bottom),!(C===0&&L===0)&&(o={...o,x:o.x+C,y:o.y+L},p())};t.addEventListener("wheel",Q,{passive:!1}),t.addEventListener("pointerdown",tt),t.addEventListener("pointermove",Ht),t.addEventListener("pointerup",_t),t.addEventListener("pointercancel",et),t.addEventListener("lostpointercapture",et),t.addEventListener("click",Bt,!0),t.addEventListener("keydown",Nt),t.addEventListener("focusin",Wt);const Gt=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>p());return Gt?.observe(t),{setContent(c){d=he(c.width===0&&c.height===0?[]:[c]),l&&(e.style.width=`${c.width}px`,e.style.height=`${c.height}px`),p()},apply:p,fit:f,fitTo:S,fitWidth:O,reset:lt,zoom:_,view:()=>({...o}),destroy(){Gt?.disconnect(),t.removeEventListener("wheel",Q),t.removeEventListener("pointerdown",tt),t.removeEventListener("pointermove",Ht),t.removeEventListener("pointerup",_t),t.removeEventListener("pointercancel",et),t.removeEventListener("lostpointercapture",et),t.removeEventListener("click",Bt,!0),t.removeEventListener("keydown",Nt),t.removeEventListener("focusin",Wt)}}},za=["fit","fit-width","actual","none"];class Ta{#n;#t=null;#e=null;#s=!1;constructor(t,e){this.#n=e,t.addController(this)}hostDisconnected(){this.detach()}get attached(){return this.#t!==null}get view(){return this.#t?.view()??{x:0,y:0,scale:1}}attach(){this.detach();const t=this.#n.elements();if(t===null)return;const{canvas:e,world:s}=t;this.#t=Ea({canvas:e,world:s,align:this.#n.align(),sizeWorld:!1,onClearSelection:()=>this.#n.onDismiss(),onView:n=>this.#n.onView(n)}),this.#e=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>this.sync()),this.#e?.observe(s),this.sync()}detach(){this.#t?.destroy(),this.#t=null,this.#e?.disconnect(),this.#e=null}sync(){const t=this.#t,e=this.#n.elements()?.world;if(t===null||e===void 0)return;const s=this.#n.contentSize();e.style.width=s?`${s.width}px`:"",e.style.height=s?`${s.height}px`:"";const n=s?.width??e.offsetWidth,i=s?.height??e.offsetHeight;t.setContent({x:0,y:0,width:n,height:i}),!this.#s&&n>0&&i>0&&this.open()}open(){const t=this.#t;if(t===null)return;this.#s=!0;const e=this.#n.initial(),s=za.includes(e)?e:"fit";s==="fit"?t.fit():s==="fit-width"?t.fitWidth():s==="actual"&&t.reset()}fit(){this.#t?.fit()}fitWidth(){this.#t?.fitWidth()}fitTo(t){this.#t?.fitTo(t)}reset(t){this.#t?.reset(t)}zoom(t){this.#t?.zoom(t)}apply(){this.#t?.apply()}}const Aa=(a,t,e)=>a.some(s=>Math.abs(t)>Math.abs(e)?s.overflowX!=="auto"&&s.overflowX!=="scroll"||s.scrollWidth<=s.clientWidth?!1:t>0?s.scrollLeft+s.clientWidth<s.scrollWidth-1:t<0&&s.scrollLeft>0:s.overflowY!=="auto"&&s.overflowY!=="scroll"||s.scrollHeight<=s.clientHeight?!1:e>0?s.scrollTop+s.clientHeight<s.scrollHeight-1:e<0&&s.scrollTop>0),fe=160,zt=(a,t,e=fe)=>Math.max(e,Math.round(a+t)),Ma=(a,t,e,s=fe)=>{const n=e?96:24;return t==="ArrowDown"?zt(a,n,s):t==="ArrowUp"?zt(a,-n,s):null},be={kind:"idle"};class La{constructor(t,e){this.#e=null,this.#s=be,this.handlers={pointerdown:s=>{if(s.button!==0)return;s.preventDefault();const n=s.currentTarget;n instanceof Element&&n.setPointerCapture(s.pointerId),this.#s={kind:"dragging",pointerId:s.pointerId,startY:s.clientY,startHeight:this.#t()},this.#n.requestUpdate()},pointermove:s=>{const n=this.#s;n.kind!=="dragging"||n.pointerId!==s.pointerId||this.#a(zt(n.startHeight,s.clientY-n.startY))},pointerup:s=>this.#i(s),pointercancel:s=>this.#i(s),keydown:s=>{const n=Ma(this.#e??this.#t(),s.key,s.shiftKey);n!==null&&(s.preventDefault(),this.#a(n))},dblclick:()=>this.#a(null)},this.#n=t,this.#t=e,t.addController(this)}#n;#t;#e;#s;hostConnected(){}get height(){return this.#e}get dragging(){return this.#s.kind==="dragging"}#a(t){t!==this.#e&&(this.#e=t,this.#n.requestUpdate())}#i(t){const e=this.#s;e.kind!=="dragging"||e.pointerId!==t.pointerId||(this.#s=be,this.#n.requestUpdate())}}const Da=D({en:{maximize:"Maximize",restore:"Restore size",controls:"View controls",zoomOut:"Zoom out",fit:"Fit to view",zoomIn:"Zoom in",canvas:"Canvas. Arrow keys pan, plus and minus zoom, 0 fits the view.",resize:"Resize the panel",resizeHint:"Drag or use the up and down arrows to resize. Double-click restores the height."},ja:{maximize:"\u6700\u5927\u5316",restore:"\u5143\u306E\u30B5\u30A4\u30BA\u306B\u623B\u3059",controls:"\u8868\u793A\u306E\u64CD\u4F5C",zoomOut:"\u7E2E\u5C0F",fit:"\u5168\u4F53\u3092\u8868\u793A",zoomIn:"\u62E1\u5927",canvas:"\u30AD\u30E3\u30F3\u30D0\u30B9\u3002\u77E2\u5370\u30AD\u30FC\u3067\u30D1\u30F3\u3001\u30D7\u30E9\u30B9\u30FB\u30DE\u30A4\u30CA\u30B9\u3067\u30BA\u30FC\u30E0\u30010\u3067\u5168\u4F53\u8868\u793A\u3002",resize:"\u30D1\u30CD\u30EB\u306E\u9AD8\u3055\u3092\u5909\u3048\u308B",resizeHint:"\u30C9\u30E9\u30C3\u30B0\u3001\u307E\u305F\u306F\u4E0A\u4E0B\u306E\u77E2\u5370\u30AD\u30FC\u3067\u9AD8\u3055\u3092\u5909\u3048\u308B\u3002\u30C0\u30D6\u30EB\u30AF\u30EA\u30C3\u30AF\u3067\u5143\u306E\u9AD8\u3055\u306B\u623B\u3059\u3002"}});class ke extends z{static{this.styles=[M,K,T`
+      :host {
+        display: block;
+        color: var(--dpk-ink);
+        /*
+         * "align" is a reader-state attribute (fit alignment, "center" by
+         * default), not markup; the UA stylesheet still maps the legacy
+         * "align" content attribute to text-align through a bare
+         * [align=center] selector that matches any element, tag name
+         * aside. With no author rule of our own in the way, that is the
+         * only declaration text-align gets, so it wins and every slotted
+         * cell that does not set its own text-align inherits "center".
+         * Inheriting here instead restores ordinary inheritance from
+         * whatever this panel sits in.
+         */
+        text-align: inherit;
+      }
+
+      .panel {
+        display: flex;
+        flex-direction: column;
+        /* Auto by default; a canvas inside needs a definite height to fill. */
+        height: var(--dpk-dialog-panel-height, auto);
+        min-height: var(--dpk-dialog-panel-min-height, 0);
+        border: 1px solid var(--dpk-rule);
+        border-radius: var(--dpk-radius-lg);
+        background: var(--dpk-paper-raised);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+        overflow: hidden;
+        /*
+         * The panel arrives as one surface: a short rise and fade over the slow
+         * step, because it is the largest thing a page draws. It is a
+         * transform only, so nothing beside it is laid out again.
+         */
+        animation: dpk-rise-in var(--dpk-dur-slow) var(--dpk-ease-out);
+      }
+
+      /*
+       * Maximized: the panel covers the viewport. It is also a manual popover in
+       * the top layer, so the UA popover box (fit-content, margin, border,
+       * padding) is reset here. A resized panel leaves an inline height
+       * behind, which only !important overrides.
+       */
+      .panel.is-maximized {
+        position: fixed;
+        /*
+         * Not inset: 0 — the kit's own header sits above this panel in the
+         * document, but this panel is a top-layer popover, which paints over
+         * everything regardless of position in the document or z-index. The
+         * header's real height (set by the page/template root as
+         * --dpk-header-height; 0 with no such ancestor) keeps this panel's
+         * box clear of it instead, so the header and its actions stay put
+         * and clickable.
+         */
+        top: var(--dpk-header-height, 0px);
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 2147483000;
+        width: auto !important;
+        height: auto !important;
+        max-width: none;
+        max-height: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+        color: var(--dpk-ink);
+        background:
+          radial-gradient(
+            ellipse 900px 400px at 0% 0%,
+            color-mix(in srgb, var(--dpk-accent) 4%, transparent),
+            transparent 70%
+          ),
+          var(--dpk-paper-raised);
+        box-shadow: none;
+        /* Above the dock in the top layer, so nothing to clear. */
+        --dpk-dock-overlap: 0px;
+        /* Nothing behind a maximized panel is visible: no axis should chain past it. */
+        overscroll-behavior: contain;
+        /*
+         * Maximizing is the same panel taking the viewport rather than a new
+         * surface: it settles out of just-under-full size instead of rising,
+         * which would read as a bounce. Restoring drops the class, and the
+         * base '.panel' entrance above plays again — the way back out.
+         */
+        animation: dpk-scale-in var(--dpk-dur) var(--dpk-ease-out);
+      }
+
+      header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+        min-height: 44px;
+        padding: 8px 14px;
+        border-bottom: 1px solid var(--dpk-rule);
+        background: linear-gradient(180deg, var(--dpk-paper-raised), var(--dpk-paper));
+        box-shadow: 0 1px 0 var(--dpk-highlight) inset;
+      }
+
+      .title {
+        font-family: var(--dpk-display);
+        font-size: 12.5px;
+        font-weight: 660;
+        letter-spacing: -0.015em;
+        color: var(--dpk-ink);
+      }
+
+      /* A long heading or subject elides (the full text is its tooltip) instead of pushing the actions off. */
+      .title,
+      .subject {
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .subject {
+        font-size: 10px;
+        color: var(--dpk-ink-faint);
+        padding-left: 10px;
+        border-left: 1px solid var(--dpk-rule-strong);
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: auto;
+        flex-wrap: wrap;
+      }
+
+      /* The body and the control menu floating over it. */
+      .frame {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+      }
+
+      .body {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        padding: var(--dpk-dialog-panel-padding, 16px);
+        overflow: auto;
+        /*
+         * The -x axis only: an edge swipe must never fall through to the
+         * browser's back/forward navigation, but the vertical axis still
+         * chains to the page so it keeps scrolling past an inline
+         * (non-maximized) panel.
+         */
+        overscroll-behavior-x: contain;
+      }
+
+      :host([flush]) .body {
+        padding: 0;
+        overflow: hidden;
+      }
+
+      /* Scrolled to the end, the last of the body clears the control menu. */
+      .frame[data-controls] > .body {
+        padding-bottom: 56px;
+      }
+
+      /* A canvas: as tall as --dpk-canvas-height, or what is left of a sized panel. */
+      :host([canvas]) .frame {
+        flex: 1 1 var(--dpk-canvas-height, 420px);
+        min-height: 220px;
+      }
+
+      .canvas {
+        padding: 0;
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        /* Same reasoning as .body: contain the horizontal edge only. */
+        overscroll-behavior-x: contain;
+        touch-action: none;
+        cursor: grab;
+        background: var(--dpk-dots), var(--dpk-paper-sunken);
+      }
+
+      .canvas:focus-visible {
+        outline: none;
+        box-shadow: inset var(--dpk-focus);
+      }
+
+      .canvas.is-panning {
+        cursor: grabbing;
+      }
+
+      .world {
+        position: absolute;
+        inset: 0 auto auto 0;
+        /* Content that lays out in flow measures itself; a given content box overrides this inline. */
+        width: max-content;
+        transform-origin: 0 0;
+      }
+
+      /* The control menu: a floating bar at the bottom, in the manner of a whiteboard's. */
+      .controls {
+        position: absolute;
+        right: 12px;
+        bottom: calc(12px + var(--dpk-dock-overlap, 0px));
+        z-index: 4;
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding: 3px;
+        border: 1px solid var(--dpk-rule-strong);
+        border-radius: var(--dpk-radius);
+        background: var(--dpk-glass);
+        backdrop-filter: blur(12px);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+        /*
+         * The menu comes up a step after the panel it floats on, so the eye
+         * lands on the content first and the tools arrive once it is there.
+         * Fade only: the panel's own rise already moves it.
+         */
+        animation: dpk-fade-in var(--dpk-dur) var(--dpk-ease) backwards;
+        animation-delay: var(--dpk-stagger);
+      }
+
+      .controls[hidden] {
+        display: none;
+      }
+
+      /*
+       * A corner twin of the bottom maximize control, shown only while
+       * maximized: on a tall panel the bottom one can be a long pointer trip
+       * away, and a top-right "exit full screen" is where readers expect one.
+       * The bottom control stays too, for continuity with the non-maximized menu.
+       */
+      .exit-fullscreen {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        z-index: 5;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        border: 1px solid var(--dpk-rule-strong);
+        border-radius: var(--dpk-radius);
+        background: var(--dpk-glass);
+        backdrop-filter: blur(12px);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+        color: var(--dpk-ink-soft);
+        cursor: pointer;
+        transition:
+          background var(--dpk-dur-fast) var(--dpk-ease),
+          color var(--dpk-dur-fast) var(--dpk-ease);
+        /* It exists only while maximized, so it fades in with the transition. */
+        animation: dpk-fade-in var(--dpk-dur) var(--dpk-ease-out) backwards;
+        animation-delay: calc(var(--dpk-stagger) * 2);
+      }
+
+      .exit-fullscreen svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      .exit-fullscreen:hover {
+        background: var(--dpk-paper-inset);
+        color: var(--dpk-ink);
+      }
+
+      .exit-fullscreen:focus-visible {
+        outline: none;
+        box-shadow: var(--dpk-focus);
+      }
+
+      /*
+       * Maximized, or with no maximize button to offer at all (a full-page
+       * board's frame, which never sets "maximizable" — see the diagrams'
+       * own "frameControls"), the menu has the whole viewport width to sit
+       * in, so it moves off the corner and centers at the bottom instead.
+       */
+      .panel.is-maximized .controls,
+      :host(:not([maximizable])) .controls {
+        right: auto;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .controls ::slotted(*) {
+        flex: none;
+      }
+
+      .controls button,
+      .grip {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 28px;
+        height: 28px;
+        padding: 0 7px;
+        border: 0;
+        border-radius: var(--dpk-radius-sm);
+        background: transparent;
+        color: var(--dpk-ink-soft);
+        font-size: 10.5px;
+        cursor: pointer;
+        transition:
+          background var(--dpk-dur-fast) var(--dpk-ease),
+          color var(--dpk-dur-fast) var(--dpk-ease);
+      }
+
+      .controls button svg,
+      .grip svg {
+        width: 13px;
+        height: 13px;
+      }
+
+      .controls button:hover,
+      .grip:hover {
+        background: var(--dpk-paper-inset);
+        color: var(--dpk-ink);
+      }
+
+      .controls button:focus-visible,
+      .grip:focus-visible {
+        outline: none;
+        box-shadow: var(--dpk-focus);
+      }
+
+      .controls button[aria-pressed='true'] {
+        color: var(--dpk-accent);
+      }
+
+      .zoom-value {
+        min-width: 46px;
+        font-family: var(--dpk-mono);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .separator {
+        width: 1px;
+        height: 18px;
+        margin: 0 3px;
+        background: var(--dpk-rule);
+      }
+
+      .grip {
+        cursor: ns-resize;
+        touch-action: none;
+      }
+
+      .panel[data-resizing] {
+        user-select: none;
+        cursor: ns-resize;
+      }
+
+      .panel[data-resizing] .frame {
+        pointer-events: none;
+      }
+
+      @media (max-width: 700px) {
+        .subject {
+          display: none;
+        }
+      }
+    `]}static{this.properties={heading:{type:String},subject:{type:String},maximizable:{type:Boolean,reflect:!0},maximized:{type:Boolean,reflect:!0},resizable:{type:Boolean,reflect:!0},canvas:{type:Boolean,reflect:!0},contentWidth:{type:Number,attribute:"content-width"},contentHeight:{type:Number,attribute:"content-height"},initial:{type:String},align:{type:String},fitMode:{type:String,attribute:"fit-mode"},label:{type:String}}}#n=new R(this);#t=new Ta(this,{elements:()=>{const t=this.renderRoot.querySelector(".canvas"),e=this.renderRoot.querySelector(".world");return this.canvas&&t&&e?{canvas:t,world:e}:null},align:()=>this.align,initial:()=>this.initial,contentSize:()=>this.contentWidth!==null&&this.contentHeight!==null?{width:this.contentWidth,height:this.contentHeight}:null,onDismiss:()=>!this.dispatchEvent(new CustomEvent("dpk-canvas-dismiss",{bubbles:!0,composed:!0,cancelable:!0})),onView:t=>{const e=this.renderRoot.querySelector(".zoom-value");e&&(e.textContent=Ra(t)),this.dispatchEvent(new CustomEvent("dpk-canvas-change",{detail:{view:t},bubbles:!0,composed:!0}))}});#e=new La(this,()=>this.renderRoot.querySelector(".panel")?.offsetHeight??0);#s=0;#a=!1;constructor(){super(),this.heading=null,this.subject=null,this.maximizable=!1,this.maximized=!1,this.resizable=!1,this.canvas=!1,this.contentWidth=null,this.contentHeight=null,this.initial="fit",this.align="center",this.fitMode="all",this.label=null,this.addEventListener("keydown",this.#v),this.addEventListener("wheel",this.#g,{passive:!1})}get view(){return this.#t.view}fit(){this.#t.fit()}fitWidth(){this.#t.fitWidth()}fitTo(t){this.#t.fitTo(t)}reset(t){this.#t.reset(t)}zoom(t){this.#t.zoom(t)}apply(){this.#t.apply()}resetView(){this.#t.open()}willUpdate(t){t.has("maximized")&&this.maximized&&(this.#s=this.renderRoot.querySelector(".panel")?.offsetHeight??0)}updated(t){t.has("maximized")&&this.#m(),t.has("canvas")&&this.canvas!==this.#t.attached||t.has("align")&&t.get("align")!==void 0&&this.canvas?this.canvas?this.#t.attach():this.#t.detach():(t.has("contentWidth")||t.has("contentHeight"))&&this.#t.sync()}render(){this.#a=Array.from(this.children).some(s=>s.slot==="controls");const t=this.canvas||this.maximizable||this.resizable||this.#a,e=this.#e.height;return r`
+      ${this.maximized?r`<div class="placeholder" style="height:${this.#s}px"></div>`:h}
+      <section
+        class=${this.maximized?"panel is-maximized":"panel"}
+        part="panel"
+        popover=${this.maximized?"manual":h}
+        style=${e===null||!this.resizable?h:`height: ${e}px`}
+        ?data-resizing=${this.#e.dragging}
+      >
+        <header part="header">
+          <slot name="heading">
+            ${this.heading?r`<span class="title" title=${this.heading}>${this.heading}</span>`:h}
+            ${this.subject?r`<span class="subject" title=${this.subject}>${this.subject}</span>`:h}
+          </slot>
+          <div class="actions"><slot name="actions"></slot></div>
+        </header>
+        <slot name="toolbar"></slot>
+        <div class="frame" ?data-controls=${t&&!this.canvas}>
+          ${this.canvas?this.#r():r`<div class="body" part="body"><slot></slot></div>`}
+          ${this.#o(t)}
+          ${this.maximized&&this.maximizable?this.#p():h}
+        </div>
+        <slot name="footer"></slot>
+      </section>
+    `}get#i(){return Da(this.#n.locale)}#r(){return r`<div class="body canvas" part="body canvas" tabindex="0" aria-label=${this.label??this.#i.canvas}>
+      <div class="world" part="world"><slot></slot></div>
+      <slot name="overlay"></slot>
+    </div>`}#o(t){const e=this.#i,s=[this.canvas?this.#l():null,this.maximizable?this.#d():null,this.resizable&&!this.maximized?this.#h():null].filter(n=>n!==null);return r`<div class="controls" part="controls" role="toolbar" aria-label=${e.controls} ?hidden=${!t}>
+      <slot name="controls" @slotchange=${this.#u}></slot>
+      ${s.map((n,i)=>r`${i>0||this.#a?r`<span class="separator"></span>`:h}${n}`)}
+    </div>`}#l(){const t=this.#i;return r`<button type="button" aria-label=${t.zoomOut} title=${t.zoomOut} @click=${()=>this.zoom(1/1.1)}>
+        ${Ps()}
+      </button>
+      <button
+        type="button"
+        class="zoom-value"
+        title=${t.fit}
+        aria-label=${t.fit}
+        @click=${()=>this.fitMode==="width"?this.fitWidth():this.fit()}
+      >
+        100%
+      </button>
+      <button type="button" aria-label=${t.zoomIn} title=${t.zoomIn} @click=${()=>this.zoom(1.1)}>
+        ${Is()}
+      </button>`}#d(){const t=this.maximized?this.#i.restore:this.#i.maximize;return r`<button
+      type="button"
+      class="maximize"
+      aria-label=${t}
+      title=${t}
+      aria-pressed=${this.maximized?"true":"false"}
+      @click=${()=>this.#c(!this.maximized)}
+    >
+      ${this.maximized?Xt():Os()}
+    </button>`}#p(){const t=this.#i.restore;return r`<button
+      type="button"
+      class="exit-fullscreen"
+      aria-label=${t}
+      title=${t}
+      @click=${()=>this.#c(!1)}
+    >
+      ${Xt()}
+    </button>`}#h(){const t=this.#i,e=this.#e.handlers;return r`<div
+      class="grip"
+      part="grip"
+      role="separator"
+      tabindex="0"
+      aria-orientation="horizontal"
+      aria-label=${t.resize}
+      title=${t.resizeHint}
+      @pointerdown=${e.pointerdown}
+      @pointermove=${e.pointermove}
+      @pointerup=${e.pointerup}
+      @pointercancel=${e.pointercancel}
+      @keydown=${e.keydown}
+      @dblclick=${e.dblclick}
+    >
+      ${Us()}
+    </div>`}#u=t=>{if(!(t.target instanceof HTMLSlotElement))return;t.target.assignedElements({flatten:!0}).length>0!==this.#a&&this.requestUpdate()};#c(t){t!==this.maximized&&(this.maximized=t,this.dispatchEvent(new CustomEvent("dpk-maximize-change",{detail:{maximized:t},bubbles:!0,composed:!0})))}#m(){const t=this.renderRoot.querySelector(".panel");if(!(!this.maximized||!t||typeof t.showPopover!="function")&&!t.matches(":popover-open"))try{t.showPopover()}catch{}}#g=t=>{if(!this.maximized||t.defaultPrevented)return;const e=t.composedPath(),s=e.slice(0,Math.max(0,e.indexOf(this))).flatMap(n=>{if(!(n instanceof Element))return[];const{overflowX:i,overflowY:l}=getComputedStyle(n);return[{overflowX:i,scrollLeft:n.scrollLeft,scrollWidth:n.scrollWidth,clientWidth:n.clientWidth,overflowY:l,scrollTop:n.scrollTop,scrollHeight:n.scrollHeight,clientHeight:n.clientHeight}]});Aa(s,t.deltaX,t.deltaY)||t.preventDefault()};#v=t=>{!this.maximized||t.key!=="Escape"||t.defaultPrevented||(t.preventDefault(),this.#c(!1))}}const Ra=a=>`${Math.round(a.scale*100)}%`,ve=()=>{customElements.get("dpk-dialog-panel")||customElements.define("dpk-dialog-panel",ke)},ja=(a,t)=>a.active.includes(t)?{...a,active:a.active.filter(e=>e!==t)}:a.match==="single"?{...a,active:[t]}:{...a,active:[...a.active,t]},qa=(a,t)=>({match:t,active:t==="single"&&a.active.length>1?a.active.slice(-1):a.active}),Pa=a=>({...a,active:[]}),Ia=a=>{const t=new Map;for(const e of a)for(const s of new Set(e))t.set(s,(t.get(s)??0)+1);return[...t].map(([e,s])=>({tag:e,count:s}))},Oa={nodes:new Map,edges:new Set},xe=(a,t,e,s)=>{const n=new Map,i=new Set,l=[{id:t,depth:0}],d=new Set([t]);for(const o of l)if(!(!s&&o.depth>=1))for(const g of a){const p=e==="outgoing"?g.from:g.to,f=e==="outgoing"?g.to:g.from;p===o.id&&(i.add(g.id),!d.has(f)&&(d.add(f),n.set(f,o.depth+1),l.push({id:f,depth:o.depth+1})))}return{nodes:n,edges:i}},Ua=(a,t)=>{const e=new Map(a.map(i=>[i,xe(t,i,"outgoing",!0).nodes])),s=new Set,n=[];for(const i of a){if(s.has(i))continue;const l=a.filter(d=>d===i||e.get(i)?.has(d)===!0&&e.get(d)?.has(i)===!0);for(const d of l)s.add(d);(l.length>1||t.some(d=>d.from===i&&d.to===i))&&n.push(l)}return n},Fa=a=>new Map(a.flatMap((t,e)=>t.map(s=>[s,e]))),Ha=(a,t)=>t.get(a.from)===t.get(a.to)&&t.has(a.from),_a=(a,t,e,s)=>{const n=t!==null&&t.kind===e&&t.id===a,i=e==="node"?s.nodes.has(a):s.edges.has(a),l=e==="node"?s.nodes.get(a)??null:null;return{selected:n,related:i&&!n,dimmed:t!==null&&!n&&!i,depth:l}},Ba=(...a)=>a.filter(t=>typeof t=="string"&&t!=="").join(" "),Na=a=>{const t=a[0]??{x:0,y:0},e=a.at(-1)??t;if(a.length<=2)return{x:(t.x+e.x)/2,y:(t.y+e.y)/2};if(a.length===4){const i=a[1]??t,l=a[2]??e;return{x:i.x,y:(i.y+l.y)/2}}const s=a[2]??t,n=a[3]??e;return{x:(s.x+n.x)/2,y:s.y}},Wa=D({en:{tagFilter:"Filter by tag",tagMatch:"Tag matching",clearTags:"Clear"},ja:{tagFilter:"\u30BF\u30B0\u306E\u7D5E\u308A\u8FBC\u307F",tagMatch:"\u30BF\u30B0\u306E\u4E00\u81F4\u6761\u4EF6",clearTags:"\u89E3\u9664"}}),Ga=["single","all","any"],ye=a=>a.startsWith(ga),Ka=a=>{const t=new Set,e=a.flatMap(s=>{const n=typeof s=="string"?{tag:s,count:null}:{tag:s.tag,count:s.count??null};return n.tag===""||t.has(n.tag)?[]:(t.add(n.tag),[n])});return[...e.filter(s=>ye(s.tag)),...e.filter(s=>!ye(s.tag))]},Va=Jt([b(),kt({tag:b(),count:Fs(dt())})]),Xa=kt({tags:w(vt()),active:u(Yt(Qt(w(vt())),null)),match:u(Yt(Qt(st(Ga)),null))}),we=a=>{const t=B(Xa,Array.isArray(a)?{tags:a}:a),e=t.tags.flatMap(n=>{const i=Zt(Va,n);return i.success?[i.output]:[]}),s=t.active?.filter(n=>typeof n=="string")??null;return{tags:e,active:s,match:t.match??null}},Ya=[["single","Single"],["all","AND"],["any","OR"]];class $e extends z{static{this.styles=[M,T`
+      :host {
+        display: block;
+        flex-shrink: 0;
+      }
+
+      .diagram-tags {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        flex-wrap: wrap;
+        padding: 7px 12px;
+        border-bottom: 1px solid var(--dpk-rule);
+        background: var(--dpk-paper);
+      }
+
+      :host([bare]) .diagram-tags {
+        padding: 0;
+        border-bottom: 0;
+        background: none;
+      }
+
+      .diagram-match {
+        display: flex;
+        gap: 2px;
+        padding: 3px;
+        margin-right: 6px;
+        border: 1px solid var(--dpk-rule);
+        border-radius: var(--dpk-radius-sm);
+        background: var(--dpk-paper-sunken);
+        box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+      }
+
+      .diagram-match button {
+        border: 0;
+        border-radius: var(--dpk-radius-xs);
+        padding: 4px 8px;
+        background: transparent;
+        color: var(--dpk-ink-faint);
+        font-size: 9.5px;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        cursor: pointer;
+        transition:
+          background 160ms var(--dpk-ease),
+          color 160ms var(--dpk-ease),
+          box-shadow 160ms var(--dpk-ease);
+      }
+
+      .diagram-match button:hover[aria-pressed='false'] {
+        color: var(--dpk-ink-soft);
+      }
+
+      .diagram-match button[aria-pressed='true'] {
+        background: var(--dpk-paper-raised);
+        color: var(--dpk-ink);
+        font-weight: 650;
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+      }
+
+      .dpk-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        max-width: 100%;
+        padding: 4px 9px;
+        border: 1px solid transparent;
+        border-radius: var(--dpk-radius-xs);
+        background: var(--dpk-paper-inset);
+        color: var(--dpk-ink-soft);
+        font-size: 10.5px;
+        cursor: pointer;
+        transition:
+          background 140ms var(--dpk-ease),
+          color 140ms var(--dpk-ease),
+          border-color 140ms var(--dpk-ease),
+          box-shadow 140ms var(--dpk-ease);
+      }
+
+      .dpk-tag:hover {
+        background: var(--dpk-paper-sunken);
+        color: var(--dpk-ink);
+      }
+
+      .dpk-tag[aria-pressed='true'] {
+        border-color: color-mix(in srgb, var(--dpk-blue) 45%, transparent);
+        background: var(--dpk-blue-soft);
+        color: var(--dpk-blue);
+        font-weight: 600;
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dpk-blue) 20%, transparent);
+      }
+
+      .dpk-tag-name {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .dpk-tag-count {
+        flex: none;
+        font-family: var(--dpk-mono);
+        font-size: 9px;
+        opacity: 0.7;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .dpk-tag-clear {
+        border: 0;
+        background: none;
+        padding: 4px 6px;
+        color: var(--dpk-ink-faint);
+        font-size: 10px;
+        cursor: pointer;
+      }
+
+      button:focus-visible {
+        outline: none;
+        box-shadow: var(--dpk-focus);
+      }
+    `]}static{this.properties={tags:{attribute:!1},active:{attribute:!1},match:{type:String,reflect:!0}}}#n=new R(this);#t=null;constructor(){super(),this.tags=[],this.active=[],this.match="single"}connectedCallback(){super.connectedCallback(),this.#t=N(this,we,t=>{if(!t.ok){console.warn(`[dev-process-kit] ${this.localName}: ${t.error}`);return}this.tags=t.value.tags,t.value.active!==null&&(this.active=t.value.active),t.value.match!==null&&(this.match=t.value.match)})}disconnectedCallback(){super.disconnectedCallback(),this.#t?.(),this.#t=null}passes(t){return fa(t,this.#s)}render(){const t=Ka(this.tags);if(t.length===0)return h;const e=this.#e;return r`
+      <div class="diagram-tags" part="row" role="group" aria-label=${e.tagFilter}>
+        <div class="diagram-match" role="group" aria-label=${e.tagMatch}>
+          ${Ya.map(([s,n])=>r`
+              <button
+                type="button"
+                data-match=${s}
+                aria-pressed=${this.match===s?"true":"false"}
+                @click=${()=>this.#a(qa(this.#s,s))}
+              >
+                ${n}
+              </button>
+            `)}
+        </div>
+        ${F(t,s=>s.tag,s=>r`
+            <button
+              type="button"
+              class="dpk-tag"
+              data-tag=${s.tag}
+              aria-pressed=${this.active.includes(s.tag)?"true":"false"}
+              @click=${()=>this.#a(ja(this.#s,s.tag))}
+            >
+              <span class="dpk-tag-name" title=${s.tag}>${s.tag}</span>${s.count===null?h:r`<span class="dpk-tag-count">${s.count}</span>`}
+            </button>
+          `)}
+        ${this.active.length>0?r`<button type="button" class="dpk-tag-clear" @click=${()=>this.#a(Pa(this.#s))}>
+                ${e.clearTags}
+              </button>`:h}
+      </div>
+    `}get#e(){return Wa(this.#n.locale)}get#s(){return{active:this.active,match:this.match}}#a(t){this.active=t.active,this.match=t.match,this.dispatchEvent(new CustomEvent("dpk-tag-filter-change",{detail:{active:t.active,match:t.match},bubbles:!0,composed:!0}))}}const Ce=()=>{customElements.get("dpk-tag-filter")||customElements.define("dpk-tag-filter",$e)},Se=Symbol.for("dev-process-kit:atom-styles"),Ee=()=>{if(typeof document>"u"||Reflect.get(document,Se)===!0)return;Reflect.set(document,Se,!0),Js();const a=[te,oe].flatMap(e=>e.styleSheet?[e.styleSheet]:[]);if(a.length===2){document.adoptedStyleSheets=[...document.adoptedStyleSheets,...a];return}const t=document.createElement("style");t.dataset.dpkAtoms="",t.textContent=`${te.cssText}
+${oe.cssText}`,document.head.append(t)},Za=D({en:{aria:"Line chart",empty:"No data to plot",invalid:a=>`Invalid chart data: ${a}`},ja:{aria:"\u6298\u308C\u7DDA\u30B0\u30E9\u30D5",empty:"\u8868\u793A\u3059\u308B\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",invalid:a=>`\u30B0\u30E9\u30D5\u306E\u30C7\u30FC\u30BF\u304C\u4E0D\u6B63\u3067\u3059: ${a}`}}),Tt=["blue","green","amber","violet","accent","ink-faint"],ze=y({x:$(b(),E(1)),y:$(dt(),xt())}),Ja=y({id:W,label:$(b(),E(1)),points:w(ze),tone:u(st(Tt),"blue"),area:u(at(),!1)}),Qa=y({id:W,label:$(b(),E(1)),points:w(ze),tone:u(st(Tt),"ink-faint"),dashed:u(at(),!0)}),tn=y({x:$(b(),E(1)),label:$(b(),E(1)),tone:u(st(Tt),"accent")}),Te=y({label:u(b()),min:u($(dt(),xt())),max:u($(dt(),xt()))}),en=y({title:u(b(),""),caption:u(b(),""),series:u(w(Ja),[]),guides:u(w(Qa),[]),marks:u(w(tn),[]),xAxis:u(Te,{}),yAxis:u(Te,{})}),At=(a,t)=>{const e=new Set;for(const s of a){if(e.has(s))throw new Error(`duplicate ${t}: ${s}`);e.add(s)}},Ae=(a,t)=>{At(a.map(e=>e.x),`x in "${t}"`)},Me=a=>{const t=B(en,a);At(t.series.map(e=>e.id),"series id"),At(t.guides.map(e=>e.id),"guide id");for(const e of t.series)Ae(e.points,e.label);for(const e of t.guides)Ae(e.points,e.label);if(t.yAxis.min!==void 0&&t.yAxis.max!==void 0&&t.yAxis.min>=t.yAxis.max)throw new Error("yAxis.min must be less than yAxis.max");return t},X={top:22,right:18,bottom:38,left:52},Mt=6,sn=a=>{const t=[],e=new Set;for(const s of[...a.series,...a.guides])for(const n of s.points)e.has(n.x)||(e.add(n.x),t.push(n.x));return t},an=a=>{const t=[...a.series,...a.guides].flatMap(l=>l.points.map(d=>d.y));if(t.length===0)return null;const e=Math.min(...t),s=Math.max(...t),n=a.yAxis.min??Math.min(0,e);let i=a.yAxis.max??s;if(i<=n&&(i=n+1),a.yAxis.max===void 0){const l=i-n;i+=l*.08}return{min:n,max:i}},Lt=a=>a.length===0?"":a.map((t,e)=>`${e===0?"M":"L"}${Y(t.x)} ${Y(t.y)}`).join(" "),nn=(a,t)=>a.length===0?null:`${Lt(a)} L${Y(a.at(-1)?.x??0)} ${Y(t)} L${Y(a[0]?.x??0)} ${Y(t)} Z`,Y=a=>Math.round(a*100)/100,Le=a=>Number.isInteger(a)?String(a):String(Math.round(a*10)/10),rn=(a,t)=>{const e=a/Math.max(1,t),s=10**Math.floor(Math.log10(e)),n=e/s;return(n<=1?1:n<=2?2:n<=5?5:10)*s},on=(a,t,e)=>{const s=rn(t-a,4),n=Math.ceil(a/s)*s,i=[];for(let d=n;d<=t+s/1e3;d+=s)i.push({y:e(d),label:Le(d)});const l=e(a);return i.some(d=>Math.abs(d.y-l)<.01)||i.push({y:l,label:Le(a)}),i},ln=(a,t)=>{if(a.length===0)return[];if(a.length<=Mt)return a.map((s,n)=>({x:t(n),label:s}));const e=Array.from({length:Mt},(s,n)=>Math.round(n*(a.length-1)/(Mt-1)));return[...new Set(e)].map(s=>({x:t(s),label:a[s]??""}))},dn=(a,t=720,e=280)=>{const s=sn(a),n=an(a);if(s.length===0||n===null)return null;const i={left:X.left,top:X.top,width:t-X.left-X.right,height:e-X.top-X.bottom},l=new Map(s.map((f,S)=>[f,S])),d=f=>s.length===1?i.left+i.width/2:i.left+f/(s.length-1)*i.width,o=f=>i.top+(1-(f-n.min)/(n.max-n.min))*i.height,g=f=>f.flatMap(S=>{const O=l.get(S.x);return O===void 0?[]:[{x:d(O),y:o(S.y)}]}).sort((S,O)=>S.x-O.x),p=i.top+i.height;return{width:t,height:e,plot:i,series:a.series.map(f=>{const S=g(f.points);return{...f,nodes:S,path:Lt(S),areaPath:f.area?nn(S,p):null}}),guides:a.guides.map(f=>({...f,path:Lt(g(f.points))})),marks:a.marks.flatMap(f=>{const S=l.get(f.x);return S===void 0?[]:[{...f,x:d(S)}]}),xTicks:ln(s,d),yTicks:on(n.min,n.max,o)}},cn=T`
+  :host {
+    display: block;
+    min-width: 0;
+  }
+
+  .guide {
+    fill: none;
+    stroke: var(--tone, var(--dpk-ink-faint));
+    stroke-width: 1.25;
+  }
+
+  .guide[data-dashed] {
+    stroke-dasharray: 5 4;
+  }
+
+  .axis-label {
+    fill: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+  }
+`,H=a=>`--tone: var(--dpk-${a})`;class De extends z{static{this.styles=[Qs,cn]}static{this.properties={data:{attribute:!1}}}#n=new R(this);#t=null;#e=null;#s=null;constructor(){super(),this.data=null}connectedCallback(){super.connectedCallback(),this.#s=N(this,Me,t=>{t.ok?(this.data=t.value,this.#e=null):(this.#t=null,this.#e=t.error),this.requestUpdate()})}disconnectedCallback(){super.disconnectedCallback(),this.#s?.(),this.#s=null}willUpdate(t){if(t.has("data")){if(this.data===null){this.#t=null;return}try{this.#t=Me(this.data),this.#e=null}catch(e){this.#t=null,this.#e=e instanceof Error?e.message:String(e)}}}render(){const t=Za(this.#n.locale),e=this.#t,s=e===null?null:dn(e);if(this.#e!==null)return this.#a(r`<p class="dpk-chart-empty">${t.invalid(this.#e)}</p>`);if(e===null||s===null)return this.#a(r`<p class="dpk-chart-empty">${t.empty}</p>`);const n=e.title===""?t.aria:e.title;return r`<section class="dpk-chart" aria-label=${n}>
+      ${e.title===""&&e.caption===""?h:r`<header class="dpk-chart-head">
+              ${e.title===""?h:r`<span class="dpk-chart-title">${e.title}</span>`}
+              ${e.caption===""?h:r`<span class="dpk-chart-value">${e.caption}</span>`}
+            </header>`}
+      <div class="dpk-chart-plot">${this.#i(e,s,n)}</div>
+      ${this.#d(e)}
+    </section>`}#a(t){return r`<section class="dpk-chart" role="status">${t}</section>`}#i(t,e,s){const{plot:n,width:i,height:l}=e,d=n.top+n.height;return r`<svg viewBox="0 0 ${i} ${l}" role="img" aria-label=${s}>
+      <title>${s}</title>
+      <g class="dpk-chart-grid">
+        ${e.yTicks.map(o=>I`<line x1=${n.left} x2=${n.left+n.width} y1=${o.y} y2=${o.y}></line>`)}
+      </g>
+      <g class="dpk-chart-axis">
+        <line x1=${n.left} x2=${n.left} y1=${n.top} y2=${d}></line>
+        <line x1=${n.left} x2=${n.left+n.width} y1=${d} y2=${d}></line>
+      </g>
+      ${e.yTicks.map(o=>I`<text class="dpk-chart-tick" x=${n.left-8} y=${o.y+3} text-anchor="end">${o.label}</text>`)}
+      ${e.xTicks.map(o=>I`<text class="dpk-chart-tick" x=${o.x} y=${d+16} text-anchor="middle">${o.label}</text>`)}
+      ${t.xAxis.label===void 0?h:I`<text class="axis-label" x=${n.left+n.width/2} y=${l-3} text-anchor="middle">${t.xAxis.label}</text>`}
+      ${t.yAxis.label===void 0?h:I`<text class="axis-label" x=${12} y=${n.top+n.height/2} text-anchor="middle" transform="rotate(-90 12 ${n.top+n.height/2})">${t.yAxis.label}</text>`}
+      ${e.guides.map(o=>this.#o(o))}
+      ${e.series.map(o=>this.#r(o))}
+      ${e.marks.map(o=>this.#l(o,n.top,d))}
+    </svg>`}#r(t){return t.path===""?h:I`${t.areaPath===null?h:I`<path class="dpk-chart-area" d=${t.areaPath} style=${H(t.tone)}></path>`}
+      <path class="dpk-chart-line" d=${t.path} style=${H(t.tone)}></path>
+      ${t.nodes.map(e=>I`<circle
+            class="dpk-chart-point"
+            cx=${e.x}
+            cy=${e.y}
+            r="2.5"
+            style=${H(t.tone)}
+          ></circle>`)}`}#o(t){return t.path===""?h:I`<path
+      class="guide"
+      d=${t.path}
+      style=${H(t.tone)}
+      ?data-dashed=${t.dashed}
+    ></path>`}#l(t,e,s){return I`<line
+        class="dpk-chart-mark"
+        x1=${t.x}
+        x2=${t.x}
+        y1=${e}
+        y2=${s}
+        style=${H(t.tone)}
+      ></line>
+      <text class="dpk-chart-mark-label" x=${t.x+4} y=${e+10} style=${H(t.tone)}
+        >${t.label}</text
+      >`}#d(t){return t.series.length===0&&t.guides.length===0&&t.marks.length===0?h:r`<div class="dpk-chart-legend">
+      ${t.series.map(e=>r`<span class="dpk-chart-key" data-variant=${e.area?"area":"line"} style=${H(e.tone)}
+            >${e.label}</span
+          >`)}
+      ${t.guides.map(e=>r`<span class="dpk-chart-key" data-variant="dashed" style=${H(e.tone)}>${e.label}</span>`)}
+      ${t.marks.map(e=>r`<span class="dpk-chart-key" data-variant="mark" style=${H(e.tone)}>${e.label}</span>`)}
+    </div>`}}const Re=()=>{customElements.get("dpk-line-chart")||customElements.define("dpk-line-chart",De)},pn=D({en:{heading:"Formal spec",empty:"No claims.",dataError:"Could not load the specification data.",claims:a=>`${a} ${a===1?"claim":"claims"}`,subjects:"For",premises:"Given",conclusions:"Then",noPremises:"None \u2014 holds unconditionally",showDetails:"Show the details of this claim",hideDetails:"Hide the details of this claim",examples:"Examples",notClaimed:"Not claimed",usesTerms:"Terms",source:"Source",proved:"Proved",conditional:"Proved under assumptions",bounded:"Checked within bounds",incomplete:"Incomplete",provedDetail:"Machine-checked to hold in every case.",conditionalDetail:"Holds in every case, provided the assumptions are true.",boundedDetail:"Every case within the bound was checked; nothing outside it was.",incompleteDetail:"The proof is not finished. Nothing here is guaranteed yet.",planned:"Planned",plannedDetail:"Not proved yet: a property proposed to be proved, for agreement before the work starts.",target:"About",noClaims:"No claims yet.",assumptions:"Assumes",bound:"Checked within",gaps:"Unfinished",commentOn:a=>`Comment on ${a}`,sendFailed:"Could not send. Place this inside a dpk-view-* element."},ja:{heading:"\u5F62\u5F0F\u4ED5\u69D8",empty:"\u4E3B\u5F35\u304C\u3042\u308A\u307E\u305B\u3093\u3002",dataError:"\u4ED5\u69D8\u306E\u30C7\u30FC\u30BF\u3092\u8AAD\u307F\u8FBC\u3081\u307E\u305B\u3093\u3067\u3057\u305F\u3002",claims:a=>`${a} \u4EF6\u306E\u4E3B\u5F35`,subjects:"\u5165\u529B\u30FB\u72B6\u6CC1",premises:"\u524D\u63D0",conclusions:"\u7D50\u8AD6",noPremises:"\u306A\u3057 \u2014 \u7121\u6761\u4EF6\u306B\u6210\u308A\u7ACB\u3064",showDetails:"\u3053\u306E\u4E3B\u5F35\u306E\u8A73\u7D30\u3092\u958B\u304F",hideDetails:"\u3053\u306E\u4E3B\u5F35\u306E\u8A73\u7D30\u3092\u9589\u3058\u308B",examples:"\u5177\u4F53\u4F8B",notClaimed:"\u4E3B\u5F35\u3057\u3066\u3044\u306A\u3044\u3053\u3068",usesTerms:"\u4F7F\u3046\u7528\u8A9E",source:"\u51FA\u5178",proved:"\u8A3C\u660E\u6E08\u307F",conditional:"\u4EEE\u5B9A\u3064\u304D\u3067\u8A3C\u660E\u6E08\u307F",bounded:"\u7BC4\u56F2\u3092\u9650\u3063\u3066\u78BA\u8A8D",incomplete:"\u672A\u5B8C\u6210",provedDetail:"\u3059\u3079\u3066\u306E\u5834\u5408\u306B\u6210\u308A\u7ACB\u3064\u3053\u3068\u304C\u6A5F\u68B0\u7684\u306B\u78BA\u304B\u3081\u3089\u308C\u3066\u3044\u307E\u3059\u3002",conditionalDetail:"\u4EEE\u5B9A\u304C\u6B63\u3057\u3051\u308C\u3070\u3001\u3059\u3079\u3066\u306E\u5834\u5408\u306B\u6210\u308A\u7ACB\u3061\u307E\u3059\u3002",boundedDetail:"\u7BC4\u56F2\u5185\u306F\u3059\u3079\u3066\u306E\u5834\u5408\u3092\u78BA\u304B\u3081\u307E\u3057\u305F\u3002\u7BC4\u56F2\u306E\u5916\u306F\u78BA\u304B\u3081\u3066\u3044\u307E\u305B\u3093\u3002",incompleteDetail:"\u8A3C\u660E\u304C\u7D42\u308F\u3063\u3066\u3044\u307E\u305B\u3093\u3002\u3053\u306E\u4E3B\u5F35\u306F\u307E\u3060\u4FDD\u8A3C\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002",planned:"\u8A3C\u660E\u4E88\u5B9A",plannedDetail:"\u307E\u3060\u8A3C\u660E\u3057\u3066\u3044\u307E\u305B\u3093\u3002\u3053\u308C\u304B\u3089\u8A3C\u660E\u3059\u308B\u6027\u8CEA\u3068\u3057\u3066\u3001\u5408\u610F\u3092\u3068\u308B\u305F\u3081\u306E\u6848\u3067\u3059\u3002",target:"\u5BFE\u8C61",noClaims:"\u307E\u3060\u4E3B\u5F35\u304C\u3042\u308A\u307E\u305B\u3093\u3002",assumptions:"\u4EEE\u5B9A",bound:"\u78BA\u8A8D\u3057\u305F\u7BC4\u56F2",gaps:"\u7D42\u308F\u3063\u3066\u3044\u306A\u3044\u90E8\u5206",commentOn:a=>`${a}\u306B\u30B3\u30E1\u30F3\u30C8`,sendFailed:"\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-view-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002"}}),j=$(b(),se(),E(1)),nt=y({id:W,text:j}),hn=ee("kind",[y({kind:V("proved"),assumptions:u(w(j))}),y({kind:V("bounded"),bound:j}),y({kind:V("incomplete"),gaps:u(w(j))}),y({kind:V("planned")})]),un=y({id:W,target:u(W),statement:j,subjects:u(w(nt)),premises:u(w(nt)),conclusions:$(w(nt),E(1,"a claim needs at least one conclusion")),examples:u(w(nt)),notClaimed:u(w(nt)),assurance:hn,source:u(y({tool:u(j),ref:j}))}),mn=y({id:W,name:j,meaning:j}),gn=y({id:W,name:j,code:u(j),summary:u(j)}),fn=y({targets:u(w(gn)),terms:u(w(mn)),claims:w(un)}),bn=()=>({targets:[],terms:[],claims:[]}),kn=/\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g,vn=(a,t)=>{const e=[];let s=0;for(const n of a.matchAll(kn)){const i=(n[1]??"").trim(),l=t.get(i);if(l===void 0)throw new Error(`unknown term reference: [[${i}]]`);n.index>s&&e.push({kind:"text",text:a.slice(s,n.index)}),e.push({kind:"term",id:i,label:n[2]?.trim()||l}),s=n.index+n[0].length}return s<a.length&&e.push({kind:"text",text:a.slice(s)}),e},je=a=>a.map(t=>t.kind==="text"?t.text:t.label).join(""),xn=a=>[...new Set(a.flatMap(t=>t.flatMap(e=>e.kind==="term"?[e.id]:[])))],mt=(a,t)=>{const e=new Set;for(const s of a){if(e.has(s))throw new Error(`duplicate ${t} id: ${s}`);e.add(s)}},qe=a=>{const t=B(fn,a),e=t.targets??[],s=t.terms??[];mt(e.map(p=>p.id),"target"),mt(s.map(p=>p.id),"term"),mt(t.claims.map(p=>p.id),"claim");const n=new Map(s.map(p=>[p.id,p.name])),i=p=>vn(p,n),l=s.map(p=>({id:p.id,name:p.name,meaning:i(p.meaning)})),d=e.map(p=>({id:p.id,name:p.name,code:p.code??null,summary:p.summary===void 0?null:i(p.summary)})),o=new Set(d.map(p=>p.id)),g=t.claims.map(p=>{if(p.target!==void 0&&!o.has(p.target))throw new Error(`unknown target (in claim ${p.id}): ${p.target}`);const f=U=>(U??[]).map(tt=>({id:tt.id,text:i(tt.text)})),S=f(p.subjects),O=f(p.premises),lt=f(p.conclusions),_=f(p.examples),Q=f(p.notClaimed),q=[...S,...O,...lt,..._,...Q];mt(q.map(U=>U.id),`clause (in claim ${p.id})`);const A=yn(p.assurance,i),P=i(p.statement);return{id:p.id,target:p.target??null,statement:P,subjects:S,premises:O,conclusions:lt,examples:_,notClaimed:Q,assurance:A,source:p.source===void 0?null:{tool:p.source.tool??null,ref:p.source.ref},terms:xn([P,...q.map(U=>U.text),...wn(A)])}});return{targets:d,terms:l,claims:g}},yn=(a,t)=>{switch(a.kind){case"proved":return{kind:"proved",assumptions:(a.assumptions??[]).map(t)};case"bounded":return{kind:"bounded",bound:t(a.bound)};case"incomplete":return{kind:"incomplete",gaps:(a.gaps??[]).map(t)};case"planned":return{kind:"planned"}}},wn=a=>{switch(a.kind){case"proved":return a.assumptions;case"bounded":return[a.bound];case"incomplete":return a.gaps;case"planned":return[]}},$n=a=>{const t={proved:0,conditional:0,bounded:0,incomplete:0,planned:0};for(const e of a.claims)t[Pe(e.assurance)?"conditional":e.assurance.kind]+=1;return t},Pe=a=>a.kind==="proved"&&a.assumptions.length>0,Ie=a=>{const t=new Map(a.targets.map(s=>[s.id,s])),e=new Map;for(const s of a.claims)e.set(s.target,[...e.get(s.target)??[],s]);for(const s of a.targets)e.has(s.id)||e.set(s.id,[]);return[...e].map(([s,n])=>({target:s===null?null:t.get(s)??null,claims:n}))},it=(a,t)=>t.length===0?{itemsLabel:null,items:t}:{itemsLabel:a,items:t},Dt=(a,t)=>{switch(t.kind){case"proved":return Pe(t)?{tone:"caveat",label:a.conditional,detail:a.conditionalDetail,...it(a.assumptions,t.assumptions)}:{tone:"sound",label:a.proved,detail:a.provedDetail,...it("",[])};case"bounded":return{tone:"caveat",label:a.bounded,detail:a.boundedDetail,...it(a.bound,[t.bound])};case"incomplete":return{tone:"unsound",label:a.incomplete,detail:a.incompleteDetail,...it(a.gaps,t.gaps)};case"planned":return{tone:"planned",label:a.planned,detail:a.plannedDetail,...it("",[])}}},Cn=a=>{switch(a.kind){case"target":return["target",a.target];case"claim":return["claim",a.claim];case"clause":return["clause",a.claim,a.clause]}},Sn=a=>[...a.subjects,...a.premises,...a.conclusions,...a.examples,...a.notClaimed],Oe=32,Ue=a=>{const t=je(a.statement);return t.length<=Oe?t:`${t.slice(0,Oe).trimEnd()}\u2026`},En=a=>[{target:{kind:"claim",claim:a.id},label:Ue(a)},...Sn(a).map(t=>({target:{kind:"clause",claim:a.id,clause:t.id},label:`${Ue(a)} \u203A ${je(t.text)}`}))],zn=a=>Ie(a).flatMap(t=>[...t.target===null?[]:[{target:{kind:"target",target:t.target.id},label:t.target.name}],...t.claims.flatMap(En)]),Tn=[M,K,yt,T`
+    :host {
+      display: block;
+      container-type: inline-size;
+      color: var(--dpk-ink);
+      font-family: var(--dpk-body);
+    }
+
+    .spec {
+      display: grid;
+      gap: 14px;
+    }
+
+    /* ----------------------------------------------------------- toolbar */
+
+    .spec-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 4px 10px;
+      padding: 0 2px 10px;
+      border-bottom: 1px solid var(--dpk-rule);
+    }
+
+    .spec-title {
+      font-family: var(--dpk-display);
+      font-size: 14px;
+      font-weight: 650;
+    }
+
+    .spec-subject {
+      color: var(--dpk-ink-soft);
+      font-size: 12.5px;
+    }
+
+    .spec-stats {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+      margin-left: auto;
+      color: var(--dpk-ink-faint);
+      font-size: 12px;
+    }
+
+    .spec-chip {
+      padding: 1px 8px;
+      border-radius: 999px;
+      font-weight: 600;
+    }
+
+    .spec-notice,
+    .spec-empty {
+      margin: 0;
+      padding: 14px;
+      border-radius: var(--dpk-radius);
+      font-size: 12.5px;
+    }
+
+    .spec-notice {
+      background: var(--dpk-danger-soft);
+      color: var(--dpk-danger);
+    }
+
+    .spec-empty {
+      color: var(--dpk-ink-faint);
+      text-align: center;
+    }
+
+    /* ------------------------------------------------------------ tones */
+
+    [data-tone='sound'] {
+      --tone: var(--dpk-green);
+      --tone-soft: var(--dpk-green-soft);
+    }
+
+    [data-tone='caveat'] {
+      --tone: var(--dpk-amber);
+      --tone-soft: var(--dpk-amber-soft);
+    }
+
+    [data-tone='unsound'] {
+      --tone: var(--dpk-danger);
+      --tone-soft: var(--dpk-danger-soft);
+    }
+
+    [data-tone='planned'] {
+      --tone: var(--dpk-blue);
+      --tone-soft: var(--dpk-blue-soft);
+    }
+
+    .spec-chip,
+    .assurance-badge {
+      background: var(--tone-soft);
+      color: var(--tone);
+    }
+
+    /* ----------------------------------------------------------- targets */
+
+    .spec-groups {
+      display: grid;
+      gap: 28px;
+    }
+
+    .target-group {
+      display: grid;
+      gap: 12px;
+    }
+
+    .target-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 4px 10px;
+    }
+
+    .target-label {
+      color: var(--dpk-ink-faint);
+      font-size: 11.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+    }
+
+    .target-name {
+      margin: 0;
+      font-family: var(--dpk-display);
+      font-size: 17px;
+      font-weight: 700;
+    }
+
+    .target-code {
+      padding: 1px 7px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-sm);
+      background: var(--dpk-paper-sunken);
+      color: var(--dpk-ink-soft);
+      font-family: var(--dpk-mono);
+      font-size: 12px;
+    }
+
+    .target-summary {
+      margin: -4px 0 0;
+      color: var(--dpk-ink-soft);
+      font-size: 13.5px;
+      line-height: 1.7;
+    }
+
+    /* ------------------------------------------------------------ claims */
+
+    .spec-claims {
+      display: grid;
+      gap: 8px;
+    }
+
+    .claim {
+      padding: 10px 14px 10px 8px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-lg);
+      background: var(--dpk-paper-raised);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    }
+
+    /* Folded, the head row is the whole card: the statement and how strongly it holds. */
+    .claim-head {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    /* Base look and sizing come from .dpk-icon-btn (src/core/theme); only the fold behavior is local. */
+    .claim-toggle {
+      flex: none;
+      margin-top: 1px;
+    }
+
+    .claim-toggle svg {
+      transition: transform 120ms ease;
+    }
+
+    .claim-toggle[aria-expanded='true'] svg {
+      transform: rotate(90deg);
+    }
+
+    .claim-body {
+      display: grid;
+      gap: 14px;
+      margin: 12px 0 6px 32px;
+    }
+
+    /* The badge explains itself in a tooltip, so it is a button that hover, focus or a tap opens. */
+    .assurance-badge {
+      flex: none;
+      margin-top: 2px;
+      padding: 2px 10px;
+      border: none;
+      border-radius: 999px;
+      font: inherit;
+      font-size: 11.5px;
+      font-weight: 650;
+      white-space: nowrap;
+      cursor: help;
+    }
+
+    .assurance-badge:focus-visible {
+      outline: 2px solid var(--tone);
+      outline-offset: 2px;
+    }
+
+    .claim-statement {
+      flex: 1;
+      margin: 0;
+      font-size: 14.5px;
+      line-height: 1.65;
+      font-weight: 500;
+    }
+
+    /* Subjects / premises / conclusions: the structure of the claim, one row per part. */
+    .claim-parts {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      margin: 0;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius);
+      background: var(--dpk-paper-sunken);
+      overflow: hidden;
+    }
+
+    .claim-part {
+      display: contents;
+    }
+
+    .claim-part > dt,
+    .claim-part > dd {
+      margin: 0;
+      padding: 9px 12px;
+      border-top: 1px solid var(--dpk-rule);
+    }
+
+    .claim-part:first-child > dt,
+    .claim-part:first-child > dd {
+      border-top: none;
+    }
+
+    .claim-part > dt {
+      color: var(--dpk-ink-soft);
+      font-size: 11.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+      padding-top: 11px;
+    }
+
+    /* The conclusion is what the claim asserts: its label reads strongest. */
+    .claim-part[data-part='conclusions'] > dt {
+      color: var(--dpk-ink);
+    }
+
+    .claim-none {
+      margin: 0;
+      color: var(--dpk-ink-faint);
+      font-size: 13px;
+    }
+
+    .clauses {
+      display: grid;
+      gap: 2px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .clause {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      min-height: 28px;
+      padding: 2px 0 2px 14px;
+      font-size: 13.5px;
+      line-height: 1.7;
+    }
+
+    .clause::before {
+      content: '';
+      position: absolute;
+      left: 2px;
+      top: 0.95em;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--dpk-ink-faint);
+    }
+
+    .clause-text {
+      flex: 1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    /* ---------------------------------------------------------- assurance */
+
+    .assurance {
+      padding: 10px 14px;
+      border-radius: var(--dpk-radius);
+      background: var(--tone-soft);
+      font-size: 12.5px;
+      line-height: 1.6;
+    }
+
+    .assurance-label {
+      margin: 0;
+      color: var(--tone);
+      font-weight: 650;
+    }
+
+    .assurance ul {
+      margin: 4px 0 0;
+      padding-left: 18px;
+      color: var(--dpk-ink);
+    }
+
+    /* ---------------------------------------------------- examples / not */
+
+    .claim-aside h5 {
+      margin: 0 0 2px;
+      color: var(--dpk-ink-soft);
+      font-size: 11.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+    }
+
+    .claim-aside[data-part='not-claimed'] {
+      padding: 10px 14px;
+      border: 1px dashed var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius);
+    }
+
+    .claim-aside[data-part='not-claimed'] .clause::before {
+      content: '×';
+      left: 0;
+      top: 0;
+      width: auto;
+      height: auto;
+      border-radius: 0;
+      background: none;
+      color: var(--dpk-ink-faint);
+      font-weight: 700;
+    }
+
+    .claim-aside[data-part='not-claimed'] .clause-text {
+      color: var(--dpk-ink-soft);
+    }
+
+    /* ------------------------------------------------------------- footer */
+
+    .claim-foot {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px 8px;
+      padding-top: 10px;
+      border-top: 1px solid var(--dpk-rule);
+      color: var(--dpk-ink-faint);
+      font-size: 11.5px;
+    }
+
+    .claim-foot-label {
+      font-weight: 650;
+    }
+
+    .term-chip {
+      padding: 1px 9px;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: 999px;
+      background: var(--dpk-paper);
+      color: var(--dpk-ink-soft);
+      font: inherit;
+      cursor: help;
+    }
+
+    .term-chip:is(:hover, :focus-visible) {
+      border-color: var(--dpk-violet);
+      color: var(--dpk-violet);
+    }
+
+    .claim-source {
+      margin-left: auto;
+    }
+
+    .claim-source code {
+      font-family: var(--dpk-mono);
+      font-size: 11px;
+    }
+
+    /* -------------------------------------------------------------- terms */
+
+    .term {
+      display: inline;
+      padding: 0 1px;
+      border: none;
+      border-bottom: 1.5px dotted var(--dpk-violet);
+      background: none;
+      color: inherit;
+      font: inherit;
+      font-weight: 600;
+      cursor: help;
+    }
+
+    .term:hover,
+    .term:focus-visible {
+      background: var(--dpk-violet-soft);
+      outline: none;
+    }
+
+    /* ----------------------------------------------------------- tooltip */
+
+    /* Sized to its text: the popover helper sets a fixed width, which only !important overrides. */
+    .spec-tip {
+      box-sizing: border-box;
+      position: fixed;
+      inset: auto;
+      width: max-content !important;
+      max-width: min(300px, calc(100vw - 16px));
+      margin: 0;
+      padding: 8px 11px;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius);
+      background: var(--dpk-paper-raised);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
+      color: var(--dpk-ink);
+      font-size: 12.5px;
+      line-height: 1.6;
+      pointer-events: none;
+    }
+
+    .spec-tip p {
+      margin: 0;
+    }
+
+    .tip-title {
+      color: var(--dpk-violet);
+      font-weight: 650;
+    }
+
+    .spec-tip[data-tone] .tip-title {
+      color: var(--tone);
+    }
+
+    .term-static {
+      border-bottom: 1.5px dotted var(--dpk-violet);
+      font-weight: 600;
+    }
+
+    @container (max-width: 520px) {
+      .claim-parts {
+        grid-template-columns: 1fr;
+      }
+
+      .claim-part > dd {
+        border-top: none;
+        padding-top: 0;
+      }
+    }
+
+    /* ---------------------------------------------------------- comments */
+    /* "Review comment" opens from the right-click menu (src/core/context-menu); the
+       popover itself still renders here, anchored at the target's own element. */
+
+    .comment-target {
+      font-size: 12px;
+      overflow-wrap: anywhere;
+    }
+
+    .comment-error {
+      margin: 0;
+      font-size: 11px;
+      color: var(--dpk-accent);
+    }
+  `],Fe=a=>`claim-body-${a}`;class He extends z{static{this.styles=Tn}static{this.properties={data:{attribute:!1},id:{type:String,reflect:!0},heading:{type:String},subject:{type:String}}}#n=null;#t=new Map;#e=null;#s=null;#a="";#i=new Set;#r=null;#o=null;#l=new bt(this);#d=new pt(this);#p=new R(this,()=>{this.#a=""});constructor(){super(),this.id=this.getAttribute("id")??"",this.data=null,this.heading=null,this.subject=null}connectedCallback(){super.connectedCallback(),this.#a="",document.addEventListener("keydown",this.#$),document.addEventListener("pointerdown",this.#T),this.#s=N(this,qe,t=>{t.ok?this.#g(t.value):this.#v(t.error)})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.#$),document.removeEventListener("pointerdown",this.#T),this.#s?.(),this.#s=null}willUpdate(t){t.has("data")&&this.data!==null&&this.#g(this.data)}updated(){this.#k(),this.#d.sync(this.renderRoot.querySelector(".comment-pop")),this.#w()}getContextMenuItems(t){const e=Ct(t.target,this.commentTargets,ae(this.#p.locale),(s,n)=>this.#h(s,n));return e===null?null:[e]}#h(t,e){const s=this.renderRoot.querySelector(`[data-dpk-target="${CSS.escape(t)}"]`);s!==null&&this.#d.open(t,s,e)}#u(t,e){return!this.dispatchEvent(new CustomEvent("dpk-comment-submit",{detail:{target:t,body:e},bubbles:!0,composed:!0,cancelable:!0}))}get commentTargets(){if(!this.id||this.#n===null)return[];const t=`${this.subject??this.heading??this.#c.heading} \xB7 ${this.id}`;return zn(this.#n).map(({target:e,label:s})=>({value:this.#f(e),label:s,group:t}))}get dataError(){return this.#e}get#c(){return pn(this.#p.locale)}#m(){return this.#n??bn()}#g(t){this.#n=t,this.#t=new Map(t.terms.map(e=>[e.id,e])),this.#e=null,this.requestUpdate()}#v(t){this.#n=null,this.#t=new Map,this.#e=t,console.error("[dev-process-kit] invalid formal spec data:",t),this.requestUpdate()}#f(t){return`element:${[this.id,...Cn(t)].map(e=>encodeURIComponent(e)).join("/")}`}#k(){const t=JSON.stringify(this.commentTargets);t!==this.#a&&(this.#a=t,this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0})))}#y(t){const e=new Set(this.#i);if(e.delete(t)||e.add(t),this.#i=e,!e.has(t)){const s=this.#r?.anchor;s?.closest(".claim-body")?.id===Fe(t)&&this.#b(s)}this.requestUpdate()}#S(t,e){const s=t.composedPath()[0];s instanceof Element&&s.closest("button, a")||(document.getSelection()?.toString()??"")===""&&this.#y(e)}#w(){const t=this.#r?.anchor??null,e=this.#o!==t;e&&(this.#o?.removeAttribute("aria-describedby"),t?.setAttribute("aria-describedby","spec-tip")),this.#o=t;const s=this.renderRoot.querySelector(".spec-tip");!s||!t||!e||this.#l.open(s,t,{width:300,height:240},{placement:"top-start"})}#x(t,e){this.#r?.anchor!==e&&(this.#r={tip:t,anchor:e},this.requestUpdate())}#b(t){this.#r===null||t!==void 0&&this.#r.anchor!==t||(this.#r=null,this.requestUpdate())}#$=t=>{t.key==="Escape"&&this.#b()};#T=t=>{this.#r!==null&&!t.composedPath().includes(this.#r.anchor)&&this.#b()};#A(t){const e=(n,i)=>{n.currentTarget instanceof HTMLElement&&i(n.currentTarget)},s=n=>n.pointerType!=="touch";return{enter:n=>s(n)&&e(n,i=>this.#x(t,i)),leave:n=>s(n)&&e(n,i=>this.#b(i)),show:n=>e(n,i=>this.#x(t,i)),hide:n=>e(n,i=>this.#b(i))}}render(){const t=this.#c,e=this.#m();return r`
+      <section class="spec">
+        <header class="spec-toolbar">
+          <span class="spec-title">${this.heading??t.heading}</span>
+          ${this.subject?r`<span class="spec-subject">${this.subject}</span>`:h}
+          <span class="spec-stats">${this.#L(e)}</span>
+        </header>
+        ${this.#e===null?h:r`<p class="spec-notice" role="alert">${t.dataError}<br />${this.#e}</p>`}
+        ${this.#e===null&&e.claims.length===0?r`<p class="spec-empty">${t.empty}</p>`:h}
+        <div class="spec-groups">
+          ${F(Ie(e),s=>s.target?.id??"",s=>this.#D(s))}
+        </div>
+      </section>
+      ${this.#I()}
+      ${this.#d.render({locale:this.#p.locale,errorMessage:this.#c.sendFailed,submit:(s,n)=>this.#u(s,n)})}
+    `}#L(t){const e=this.#c,s=$n(t),n=[{tone:"unsound",label:e.incomplete,count:s.incomplete},{tone:"caveat",label:e.bounded,count:s.bounded},{tone:"caveat",label:e.conditional,count:s.conditional},{tone:"planned",label:e.planned,count:s.planned}].filter(i=>i.count>0);return r`${e.claims(t.claims.length)}
+    ${n.map(i=>r`<span class="spec-chip" data-tone=${i.tone}>${i.label} ${i.count}</span>`)}`}#D(t){const e=r`<div class="spec-claims">
+      ${F(t.claims,n=>n.id,n=>this.#R(n))}
+    </div>`,s=t.target;return s===null?e:r`<section class="target-group" data-target=${s.id}>
+      <header class="target-head" data-dpk-target=${this.#f({kind:"target",target:s.id})}>
+        <span class="target-label">${this.#c.target}</span>
+        <h3 class="target-name">${s.name}</h3>
+        ${s.code===null?h:r`<code class="target-code">${s.code}</code>`}
+      </header>
+      ${s.summary===null?h:r`<p class="target-summary">${this.#C(s.summary)}</p>`}
+      ${t.claims.length===0?r`<p class="spec-empty">${this.#c.noClaims}</p>`:e}
+    </section>`}#R(t){const e=this.#c,s=Dt(e,t.assurance),n=this.#i.has(t.id),i=this.#A({kind:"assurance",claim:t.id}),l=Fe(t.id);return r`
+      <article class="claim" data-claim=${t.id} data-tone=${s.tone}>
+        <div
+          class="claim-head"
+          data-dpk-target=${this.#f({kind:"claim",claim:t.id})}
+          @click=${d=>this.#S(d,t.id)}
+        >
+          <button
+            type="button"
+            class="dpk-icon-btn claim-toggle"
+            aria-expanded=${n?"true":"false"}
+            aria-controls=${n?l:h}
+            aria-label=${n?e.hideDetails:e.showDetails}
+            @click=${()=>this.#y(t.id)}
+          >
+            ${Hs()}
+          </button>
+          <h4 class="claim-statement">${this.#C(t.statement)}</h4>
+          <button
+            type="button"
+            class="assurance-badge"
+            data-tone=${s.tone}
+            @pointerenter=${i.enter}
+            @pointerleave=${i.leave}
+            @focus=${i.show}
+            @blur=${i.hide}
+            @click=${i.show}
+          >
+            ${s.label}
+          </button>
+        </div>
+        ${n?this.#j(t,l):h}
+      </article>
+    `}#j(t,e){const s=this.#c,n=Dt(s,t.assurance);return r`<div class="claim-body" id=${e}>
+      <dl class="claim-parts">
+        ${t.subjects.length===0?h:this.#E("subjects",s.subjects,t,t.subjects)}
+        ${t.premises.length===0?r`<div class="claim-part" data-part="premises">
+                <dt>${s.premises}</dt>
+                <dd><p class="claim-none">${s.noPremises}</p></dd>
+              </div>`:this.#E("premises",s.premises,t,t.premises)}
+        ${this.#E("conclusions",s.conclusions,t,t.conclusions)}
+      </dl>
+      ${n.itemsLabel===null?h:r`<div class="assurance" data-tone=${n.tone}>
+              <p class="assurance-label">${n.itemsLabel}</p>
+              <ul>
+                ${n.items.map(i=>r`<li>${this.#C(i)}</li>`)}
+              </ul>
+            </div>`}
+      ${t.examples.length===0?h:r`<section class="claim-aside" data-part="examples">
+              <h5>${s.examples}</h5>
+              ${this.#z(t,t.examples)}
+            </section>`}
+      ${t.notClaimed.length===0?h:r`<section class="claim-aside" data-part="not-claimed">
+              <h5>${s.notClaimed}</h5>
+              ${this.#z(t,t.notClaimed)}
+            </section>`}
+      ${this.#q(t)}
+    </div>`}#E(t,e,s,n){return r`<div class="claim-part" data-part=${t}>
+      <dt>${e}</dt>
+      <dd>${this.#z(s,n)}</dd>
+    </div>`}#z(t,e){return r`<ul class="clauses">
+      ${F(e,s=>s.id,s=>r`<li
+            class="clause"
+            data-clause=${s.id}
+            data-dpk-target=${this.#f({kind:"clause",claim:t.id,clause:s.id})}
+          >
+            <span class="clause-text">${this.#C(s.text)}</span>
+          </li>`)}
+    </ul>`}#q(t){const e=this.#c,s=t.terms.flatMap(n=>this.#t.get(n)??[]);return s.length===0&&t.source===null?h:r`<footer class="claim-foot">
+      ${s.length===0?h:r`<span class="claim-foot-label">${e.usesTerms}</span> ${s.map(n=>this.#M("term-chip",n.id,n.name))}`}
+      ${t.source===null?h:r`<span class="claim-source"
+              >${e.source}: ${t.source.tool===null?h:r`${t.source.tool} · `}<code
+                >${t.source.ref}</code
+              ></span
+            >`}
+    </footer>`}#C(t){return r`${t.map(e=>e.kind==="text"?e.text:this.#M("term",e.id,e.label))}`}#P(t){return r`${t.map(e=>e.kind==="text"?e.text:r`<span class="term-static">${e.label}</span>`)}`}#M(t,e,s){const n=this.#A({kind:"term",term:e});return r`<button
+      type="button"
+      class=${t}
+      data-term=${e}
+      @pointerenter=${n.enter}
+      @pointerleave=${n.leave}
+      @focus=${n.show}
+      @blur=${n.hide}
+      @click=${n.show}
+    >
+      ${s}
+    </button>`}#I(){const t=this.#r?.tip;if(t===void 0)return h;const e=this.#O(t);return e===null?h:r`<div
+      id="spec-tip"
+      class="spec-tip"
+      role="tooltip"
+      popover="manual"
+      data-tone=${e.tone??h}
+    >
+      <p class="tip-title">${e.title}</p>
+      <p class="tip-body">${e.body}</p>
+    </div>`}#O(t){if(t.kind==="term"){const n=this.#t.get(t.term);return n===void 0?null:{title:n.name,body:this.#P(n.meaning)}}const e=this.#n?.claims.find(n=>n.id===t.claim);if(e===void 0)return null;const s=Dt(this.#c,e.assurance);return{title:s.label,body:s.detail,tone:s.tone}}}const _e=()=>{customElements.get("dpk-formal-spec")||customElements.define("dpk-formal-spec",He)},An=D({en:{heading:"Content",untitled:"Untitled",sendFailed:"Could not send. Place this inside a dpk-view-* element."},ja:{heading:"\u672C\u6587",untitled:"\u7121\u984C",sendFailed:"\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-view-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002"}}),Mn=/^([A-Za-z0-9_-]+):([A-Za-z0-9_-]+)$/,Ln=a=>{const t=Mn.exec(a?.trim()??"");if(!t)return null;const[,e="",s=""]=t;return{kind:e,id:s}},Be=60,Dn=(a,t,e,s)=>{const n=[a,t,e].map(i=>i?.replace(/\s+/g," ").trim()??"").find(Boolean);return n===void 0?s:n.length>Be?`${n.slice(0,Be-1)}\u2026`:n},rt=a=>`${a.kind}:${a.id}`,Rn=a=>{const t=new Map;for(const e of a)t.set(rt(e),(t.get(rt(e))??0)+1);return a.filter(e=>t.get(rt(e))===1)},Ne=(a,t)=>`element:${[a,t.kind,t.id].map(e=>encodeURIComponent(e)).join("/")}`,jn="[data-dpk-item]",qn="h1, h2, h3, h4, h5, h6, summary, caption, legend";class We extends z{static{this.styles=[M,K,yt,T`
+      :host {
+        position: relative;
+        display: block;
+        font-size: inherit;
+        line-height: inherit;
+        color: inherit;
+      }
+      .comment-error {
+        margin: 0;
+        font-size: 11px;
+        color: var(--dpk-accent);
+      }
+    `]}static{this.properties={id:{type:String,reflect:!0},heading:{type:String}}}#n=new R(this);#t=new pt(this);#e=new MutationObserver(()=>{this.#d()});#s=[];#a=new Set;#i="";constructor(){super(),this.id=this.getAttribute("id")??"",this.heading=null}connectedCallback(){super.connectedCallback(),this.#e.observe(this,{subtree:!0,childList:!0,characterData:!0,attributes:!0,attributeFilter:["data-dpk-item","data-dpk-label"]}),this.#d()}disconnectedCallback(){super.disconnectedCallback(),this.#e.disconnect()}get commentTargets(){if(!this.id)return[];const t=`${this.heading??this.#l.heading} \xB7 ${this.id}`;return this.#s.map(e=>({value:Ne(this.id,e),label:e.label,group:t}))}willUpdate(t){t.has("id")&&this.#p(),(t.has("id")||t.has("heading"))&&this.#h()}updated(){this.#t.sync(this.renderRoot.querySelector(".comment-pop"))}getContextMenuItems(t){const e=Ct(t.target,this.commentTargets,ae(this.#n.locale),(s,n)=>this.#r(s,n));return e===null?null:[e]}#r(t,e){const s=this.querySelector(`[data-dpk-target="${CSS.escape(t)}"]`);s!==null&&this.#t.open(t,s,e)}#o(t,e){return!this.dispatchEvent(new CustomEvent("dpk-comment-submit",{detail:{target:t,body:e},bubbles:!0,composed:!0,cancelable:!0}))}render(){return r`<slot></slot>${this.#t.render({locale:this.#n.locale,errorMessage:this.#l.sendFailed,submit:(t,e)=>this.#o(t,e)})}`}get#l(){return An(this.#n.locale)}#d(){const t=[...this.querySelectorAll(jn)].flatMap(s=>{if(s.parentElement?.closest(this.localName)!==this)return[];const n=Ln(s.getAttribute("data-dpk-item"));if(n===null)return[];const i=s.querySelector(qn)?.textContent??null,l=Dn(s.getAttribute("data-dpk-label"),i,s.textContent,this.#l.untitled);return[{...n,label:l,element:s}]}),e=Rn(t);if(e.length<t.length){const s=new Set(e.map(rt)),n=[...new Set(t.map(rt).filter(i=>!s.has(i)))];console.warn(`[dev-process-kit] ${this.localName}#${this.id}: ambiguous data-dpk-item ignored:`,n)}this.#s=e,this.#p(),this.#h()}#p(){const t=new Set(this.#s.map(e=>e.element));for(const e of this.#a)t.has(e)||e.removeAttribute("data-dpk-target");for(const e of this.#s)e.element.setAttribute("data-dpk-target",Ne(this.id,e));this.#a=t}#h(){const t=JSON.stringify(this.commentTargets);t!==this.#i&&(this.#i=t,this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0})))}}const Ge=()=>{customElements.get("dpk-commentable")||customElements.define("dpk-commentable",We)},Pn="dpk-extend-right-click-run",Rt=$(b(),E(1)),Z=$(b(),E(1)),In=y({kind:V("item"),id:Rt,label:Z,danger:u(at()),event:u(Z),detail:u(_s(b(),vt())),copy:u(Z)}),On=y({kind:V("submenu"),id:Rt,label:Z,entries:w(ne(()=>Ke))}),Ke=ne(()=>ee("kind",[In,On])),Un=y({id:Rt,heading:u(Z),entries:w(Ke)}),Fn=y({selector:$(b(),se(),E(1)),label:u(Z),groups:w(Un)}),Hn=y({targets:w(Fn)}),Ve=(a,t)=>{for(const e of a){if(t.has(e.id))throw new Error(`duplicate id: ${e.id}`);t.add(e.id),e.kind==="submenu"&&Ve(e.entries,t)}},jt=a=>{const t=B(Hn,a),e=new Set;for(const s of t.targets)for(const n of s.groups){if(e.has(n.id))throw new Error(`duplicate id: ${n.id}`);e.add(n.id),Ve(n.entries,e)}return t},Xe="dpk-extend-right-click",qt=`[dev-process-kit] ${Xe}: `,_n="text",Bn=(a,t)=>{const e=Bs(a,a),s=e.indexOf(t);return s===-1?null:[a,...e.slice(0,s)]},Nn=(a,t)=>{const s=(t===_n?a.textContent:a.getAttribute(t))?.trim()??"";return s===""?null:s},Wn=(a,t,e)=>{try{return a.matches(t)}catch{return e.has(t)||(e.add(t),console.warn(`${qt}invalid target selector ${JSON.stringify(t)} ignored`)),!1}};class Ye extends z{static{this.styles=T`
+    :host {
+      display: contents;
+    }
+  `}static{this.properties={config:{attribute:!1}}}#n=null;#t=null;#e=null;#s=null;constructor(){super(),this.config=null}connectedCallback(){super.connectedCallback(),this.#e=N(this,jt,t=>{if(t.ok){this.#n=t.value,this.#t=null;return}this.#n=null,this.#t=t.error,console.warn(`${qt}JSON child ignored: ${t.error}`)})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.(),this.#e=null}get error(){return this.#t}getContextMenuItems(t){const e=this.#a();if(e===null)return null;const s=t.origin??null;if(!(s instanceof Element))return null;const n=Bn(s,this);if(n===null||n.some(d=>d.localName===Xe))return null;const i=this.#r(n,e);if(i===null)return null;const l=this.#o(i.target,i.element);return l.length===0?null:l}render(){return r`<slot></slot>`}#a(){return this.config===null?this.#n:(this.#s?.raw!==this.config&&(this.#s={raw:this.config,parsed:this.#i(this.config)}),this.#s.parsed)}#i(t){try{return jt(t)}catch(e){return console.warn(`${qt}config ignored: ${e instanceof Error?e.message:String(e)}`),null}}#r(t,e){const s=new Set;for(const n of t)for(const i of e.targets)if(Wn(n,i.selector,s))return{target:i,element:n};return null}#o(t,e){return t.groups.flatMap(s=>{const n=this.#l(s.entries,s,t,e);return n.length===0?[]:[s.heading===void 0?{id:s.id,entries:n}:{id:s.id,heading:s.heading,entries:n}]})}#l(t,e,s,n){return t.flatMap(i=>i.kind==="submenu"?this.#d(i,e,s,n):this.#p(i,e,s,n))}#d(t,e,s,n){const i=this.#l(t.entries,e,s,n);return i.length===0?[]:[{kind:"submenu",id:t.id,label:t.label,items:i}]}#p(t,e,s,n){const i=t.copy===void 0?null:Nn(n,t.copy);if(t.copy!==void 0&&i===null)return[];const l=()=>{i!==null&&wt(i),!(i!==null&&t.event===void 0)&&this.#h(t,e,s,n)};return[t.danger===!0?{kind:"item",id:t.id,label:t.label,run:l,danger:!0}:{kind:"item",id:t.id,label:t.label,run:l}]}#h(t,e,s,n){const i={id:t.id,group:e.id,item:t.id,target:{selector:s.selector,label:s.label??null},element:n,authored:t.detail??{}};this.dispatchEvent(new CustomEvent(t.event??Pn,{detail:i,bubbles:!0,composed:!0}))}}const Ze=()=>{customElements.get("dpk-extend-right-click")||customElements.define("dpk-extend-right-click",Ye)},Gn=D({en:{sendFailed:"Could not send. Place this inside a dpk-view-* element."},ja:{sendFailed:"\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-view-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002"}});class Je extends z{static{this.styles=[M,K,yt,T`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+      .comment-error {
+        margin: 0;
+        font-size: 11px;
+        color: var(--dpk-accent);
+        /* A refusal lands under the composer it belongs to, rather than
+           simply being there when the reader looks back. */
+        animation: dpk-rise-in var(--dpk-dur-fast) var(--dpk-ease-out);
+      }
+    `]}static{this.properties={target:{type:String},label:{type:String},open:{type:Boolean,reflect:!0}}}#n=new R(this);#t=new pt(this);constructor(){super(),this.target="",this.label=null,this.open=!1,this.addEventListener("click",this.#e)}#e=()=>{this.open=!0};get commentTargets(){return this.target.length===0?[]:[{value:this.target,label:this.label??this.target}]}willUpdate(t){t.has("target")&&(this.target.length===0?this.removeAttribute("data-dpk-target"):this.setAttribute("data-dpk-target",this.target)),t.has("open")&&(this.open&&!this.#t.isOpen?this.#t.open(this.target,this,this.label??void 0):!this.open&&this.#t.isOpen&&this.#t.close())}updated(){this.#t.sync(this.renderRoot.querySelector(".comment-pop")),this.open!==this.#t.isOpen&&(this.open=this.#t.isOpen)}render(){return r`<slot></slot>${this.#t.render({locale:this.#n.locale,errorMessage:Gn(this.#n.locale).sendFailed,submit:(t,e)=>this.#s(t,e)})}`}#s(t,e){return!this.dispatchEvent(new CustomEvent("dpk-comment-submit",{detail:{target:t,body:e},bubbles:!0,composed:!0,cancelable:!0}))}}const Qe=()=>{customElements.get("dpk-comment-popover")||customElements.define("dpk-comment-popover",Je)},ts=(a,t)=>{const e=t===null?-1:a.indexOf(t);return e===-1?0:e},Kn=(a,t,e)=>{if(e===0)return null;switch(a){case"ArrowRight":case"ArrowDown":return(t+1)%e;case"ArrowLeft":case"ArrowUp":return(t-1+e)%e;case"Home":return 0;case"End":return e-1;default:return null}},Vn=":scope > [data-name]";let Xn=0;class es extends z{static{this.shadowRootOptions={...z.shadowRootOptions,slotAssignment:"manual"}}static{this.styles=[M,T`
+      :host {
+        display: block;
+        font-size: inherit;
+        line-height: inherit;
+        color: inherit;
+      }
+
+      [role='tablist'] {
+        position: relative;
+        display: flex;
+        gap: 2px;
+        margin-bottom: 12px;
+        padding: 3px;
+        width: fit-content;
+        max-width: 100%;
+        overflow-x: auto;
+        border-radius: var(--dpk-radius);
+        background: var(--dpk-paper-sunken);
+      }
+
+      /*
+       * The raised chip the reader picked, drawn once and slid between the
+       * tabs instead of each tab painting its own: the selection is a thing
+       * that moves, so the eye follows it. It is placed by the two custom
+       * properties 'updated()' measures off the selected tab, and it is
+       * absolutely positioned inside the padding box, which is what
+       * 'offsetLeft' counts from too.
+       */
+      .indicator {
+        position: absolute;
+        top: 3px;
+        left: 0;
+        z-index: 0;
+        width: var(--dpk-tabs-indicator-w, 0px);
+        height: calc(100% - 6px);
+        border: 1px solid var(--dpk-rule-strong);
+        border-radius: var(--dpk-radius-sm);
+        background: var(--dpk-paper-raised);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+        transform: translateX(var(--dpk-tabs-indicator-x, 0px));
+        pointer-events: none;
+        transition:
+          transform var(--dpk-dur) var(--dpk-ease),
+          width var(--dpk-dur) var(--dpk-ease);
+      }
+
+      /* Before the first measurement there is nothing to slide, and nothing to
+         slide it from: the indicator is hidden until the tablist says where. */
+      [role='tablist']:not([data-ready]) .indicator {
+        opacity: 0;
+        transition: none;
+      }
+
+      [role='tab'] {
+        position: relative;
+        z-index: 1;
+        flex: none;
+        padding: 5px 12px;
+        border: 1px solid transparent;
+        border-radius: var(--dpk-radius-sm);
+        background: transparent;
+        color: var(--dpk-ink-soft);
+        font-size: 12.5px;
+        font-weight: 550;
+        cursor: pointer;
+        transition:
+          color var(--dpk-dur-fast) var(--dpk-ease),
+          border-color var(--dpk-dur-fast) var(--dpk-ease);
+      }
+
+      [role='tab']:hover {
+        color: var(--dpk-ink);
+      }
+
+      [role='tab'][aria-selected='true'] {
+        color: var(--dpk-ink);
+        font-weight: 650;
+      }
+
+      [role='tab']:focus-visible {
+        outline: none;
+        box-shadow: var(--dpk-focus);
+      }
+
+      /*
+       * The panel the reader just picked fades in under the strip. A slotted
+       * panel that is not the current one is not rendered at all, so its
+       * animation starts again when it is assigned back to the slot.
+       */
+      ::slotted([data-name]) {
+        animation: dpk-fade-in var(--dpk-dur) var(--dpk-ease) backwards;
+      }
+    `]}static{this.properties={selected:{type:String,reflect:!0}}}#n=`dpk-tabs-${++Xn}`;#t=new MutationObserver(()=>{this.requestUpdate()});#e=typeof ResizeObserver=="function"?new ResizeObserver(()=>this.#a()):null;constructor(){super(),this.selected=null}connectedCallback(){super.connectedCallback(),this.#t.observe(this,{childList:!0,attributes:!0,attributeFilter:["data-name"]}),this.#e?.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#t.disconnect(),this.#e?.disconnect()}get#s(){return[...this.querySelectorAll(Vn)]}render(){const t=this.#s,e=t.map(n=>n.dataset.name??""),s=ts(e,this.selected);return r`<div role="tablist" @keydown=${this.#r}>
+        <span class="indicator" aria-hidden="true"></span>
+        ${F(e,(n,i)=>`${i}:${n}`,(n,i)=>r`<button
+              type="button"
+              role="tab"
+              id="${this.#n}-tab-${i}"
+              aria-selected=${i===s?"true":"false"}
+              aria-controls="${this.#n}-panel"
+              tabindex=${i===s?0:-1}
+              @click=${()=>{this.#i(n)}}
+            >
+              ${t[i]?.dataset.label??n}
+            </button>`)}
+      </div>
+      <div role="tabpanel" id="${this.#n}-panel" aria-labelledby="${this.#n}-tab-${s}">
+        <slot></slot>
+      </div>`}updated(t){const e=this.#s,s=e.map(i=>i.dataset.name??""),n=e[ts(s,this.selected)];this.renderRoot.querySelector("slot")?.assign(...n===void 0?[]:[n]),this.#a()}#a(){const t=this.renderRoot.querySelector('[role="tablist"]'),e=this.renderRoot.querySelector('[role="tab"][aria-selected="true"]');t===null||e===null||(t.style.setProperty("--dpk-tabs-indicator-x",`${e.offsetLeft}px`),t.style.setProperty("--dpk-tabs-indicator-w",`${e.offsetWidth}px`),!(t.hasAttribute("data-ready")||typeof requestAnimationFrame!="function")&&requestAnimationFrame(()=>{t.setAttribute("data-ready","")}))}#i(t){t!==this.selected&&(this.selected=t,this.dispatchEvent(new CustomEvent("dpk-tab-change",{detail:{name:t},bubbles:!0,composed:!0})))}#r=t=>{const e=[...this.renderRoot.querySelectorAll('[role="tab"]')],s=e.findIndex(l=>l.getAttribute("aria-selected")==="true"),n=Kn(t.key,s,e.length);if(n===null)return;t.preventDefault();const i=this.#s[n]?.dataset.name;i!==void 0&&this.#i(i),this.updateComplete.then(()=>{e[n]?.focus()})}}const ss=()=>{customElements.get("dpk-tabs")||customElements.define("dpk-tabs",es)},Yn=D({en:{heading:"Checklist",empty:"No items.",progress:(a,t)=>`${a} / ${t} done`,actionTitle:(a,t)=>`${t?"Checked":"Unchecked"}: ${a}`,unrecorded:"Could not record it. Place this inside a dpk-view-* element.",comment:"Comment",commentOn:a=>`Comment on ${a}`},ja:{heading:"\u30C1\u30A7\u30C3\u30AF\u30EA\u30B9\u30C8",empty:"\u9805\u76EE\u304C\u3042\u308A\u307E\u305B\u3093\u3002",progress:(a,t)=>`${a} / ${t} \u5B8C\u4E86`,actionTitle:(a,t)=>`${t?"\u30C1\u30A7\u30C3\u30AF":"\u30C1\u30A7\u30C3\u30AF\u89E3\u9664"}: ${a}`,unrecorded:"\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",comment:"\u30B3\u30E1\u30F3\u30C8",commentOn:a=>`${a} \u306B\u30B3\u30E1\u30F3\u30C8`}}),as="SET_CHECKED",Zn=y({id:$(b(),ie(/^[A-Za-z0-9_-]+$/)),label:$(b(),E(1)),checked:u(at()),note:u(b())}),Jn=y({items:w(Zn)}),ns=()=>({items:[]}),is=a=>{const t=B(Jn,a),e=new Set;return{items:t.items.map(s=>{if(e.has(s.id))throw new Error(`duplicate item id: ${s.id}`);return e.add(s.id),{id:s.id,label:s.label,checked:s.checked??!1,note:s.note??null,changed:!1}})}},Qn=kt({checked:at()}),ti=(a,t,e)=>{const s=new Map(t.items.map(l=>[l.id,l.checked])),n=new Map(s),i=e.map(l=>{if(l.type!==as)return{id:l.id,title:l.type,stale:"unsupported-action-type"};const d=ba(l.target.id),o=d?.[1]==="item"?d[2]:void 0,g=Zt(Qn,l.payload);if(o===void 0||!n.has(o)||!g.success)return{id:l.id,title:a.actionTitle(o??l.target.id,!0),stale:"target-missing"};n.set(o,g.output.checked);const p=t.items.find(f=>f.id===o)?.label??o;return{id:l.id,title:a.actionTitle(p,g.output.checked),tone:"update"}});return{data:{items:t.items.map(l=>{const d=n.get(l.id)??l.checked;return{...l,checked:d,changed:d!==s.get(l.id)}})},results:i}},ei=a=>({done:a.items.filter(t=>t.checked).length,total:a.items.length});class rs extends z{static{this.styles=[M,T`
+      :host {
+        display: block;
+        color: var(--dpk-ink);
+      }
+
+      .card {
+        border: 1px solid var(--dpk-rule);
+        border-radius: var(--dpk-radius-lg);
+        background: var(--dpk-paper-raised);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+        padding: 14px 16px 12px;
+      }
+
+      .head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .heading {
+        font-family: var(--dpk-display);
+        font-size: 15px;
+        font-weight: 650;
+        letter-spacing: -0.01em;
+      }
+
+      .count {
+        font-family: var(--dpk-mono);
+        font-size: 12.5px;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .count-done {
+        color: var(--dpk-ink);
+        font-weight: 650;
+      }
+
+      .count-total {
+        color: var(--dpk-ink-soft);
+      }
+
+      .track {
+        height: 6px;
+        margin: 10px 0 14px;
+        border-radius: 999px;
+        background: var(--dpk-paper-sunken);
+        overflow: hidden;
+      }
+
+      .fill {
+        height: 100%;
+        border-radius: 999px;
+        background: var(--dpk-accent);
+        transition: width 0.3s var(--dpk-ease);
+      }
+
+      ul {
+        display: grid;
+        gap: 2px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      li {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: center;
+        gap: 10px;
+        min-height: 36px;
+        padding: 2px 8px;
+        border-radius: var(--dpk-radius-sm);
+      }
+
+      li:hover,
+      li:focus-within,
+      li:active {
+        background: var(--dpk-paper-sunken);
+      }
+
+      li[data-changed] {
+        background: color-mix(in srgb, var(--dpk-blue-soft) 60%, transparent);
+      }
+
+      .check {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        width: 20px;
+        height: 20px;
+      }
+
+      .check-input {
+        position: absolute;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      .check-mark {
+        display: inline-grid;
+        place-items: center;
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--dpk-rule-strong);
+        border-radius: 50%;
+        background: transparent;
+        color: var(--dpk-accent-ink);
+        pointer-events: none;
+        transition:
+          background 0.15s var(--dpk-ease),
+          border-color 0.15s var(--dpk-ease);
+      }
+
+      .check-mark svg {
+        width: 12px;
+        height: 12px;
+        opacity: 0;
+        transform: scale(0.5);
+        transition:
+          opacity 0.15s var(--dpk-ease),
+          transform 0.15s var(--dpk-ease-spring);
+      }
+
+      .check-input:checked ~ .check-mark {
+        border-color: var(--dpk-accent);
+        background: var(--dpk-accent);
+      }
+
+      .check-input:checked ~ .check-mark svg {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      .check-input:focus-visible ~ .check-mark {
+        box-shadow: var(--dpk-focus);
+      }
+
+      label {
+        display: grid;
+        gap: 2px;
+        cursor: pointer;
+      }
+
+      [data-checked] .label {
+        color: var(--dpk-ink-soft);
+        text-decoration: line-through;
+      }
+
+      .note {
+        color: var(--dpk-ink-soft);
+        font-size: 12px;
+      }
+
+      .comment {
+        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;
+      }
+
+      li:hover .comment,
+      li:focus-within .comment {
+        opacity: 1;
+      }
+
+      .comment:hover {
+        color: var(--dpk-blue);
+      }
+
+      .comment:focus-visible {
+        outline: none;
+        box-shadow: var(--dpk-focus);
+      }
+
+      .comment svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      .error,
+      .empty {
+        color: var(--dpk-ink-soft);
+        font-size: 13px;
+      }
+
+      .error {
+        color: var(--dpk-danger);
+      }
+    `]}static{this.properties={id:{type:String,reflect:!0},heading:{type:String}}}#n=new R(this);#t=null;#e=null;#s=null;#a=ns();#i=[];#r=[];#o=null;constructor(){super(),this.id=this.getAttribute("id")??"",this.heading=null}connectedCallback(){super.connectedCallback(),this.#t=N(this,is,t=>{t.ok?(this.#e=t.value,this.#s=null):(this.#e=null,this.#s=t.error),this.#m(),this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0}))})}disconnectedCallback(){super.disconnectedCallback(),this.#t?.(),this.#t=null}get commentTargets(){if(!this.id)return[];const t=`${this.#d} \xB7 ${this.id}`;return this.#a.items.map(e=>({value:this.#c(e.id),label:e.label,group:t}))}get elementActions(){return this.#i}set elementActions(t){this.#i=t,this.#m()}get elementActionResults(){return this.#r}render(){const t=this.#l;if(this.#s!==null)return r`<p class="error">${this.#s}</p>`;const e=ei(this.#a),s=e.total===0?0:e.done/e.total,n=t.progress(e.done,e.total);return r`<div class="card">
+      <div class="head">
+        <span class="heading">${this.#d}</span>
+        <span class="count" aria-label=${n}
+          ><span class="count-done">${e.done}</span><span class="count-total">/${e.total}</span></span
+        >
+      </div>
+      <div
+        class="track"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax=${e.total}
+        aria-valuenow=${e.done}
+        aria-valuetext=${n}
+      >
+        <div class="fill" style=${`width: ${s*100}%`}></div>
+      </div>
+      ${this.#a.items.length===0?r`<p class="empty">${t.empty}</p>`:r`<ul>
+              ${F(this.#a.items,i=>i.id,i=>this.#p(t,i))}
+            </ul>`}
+    </div>`}get#l(){return Yn(this.#n.locale)}get#d(){return this.heading??this.#l.heading}#p(t,e){const s=`item-${e.id}`;return r`<li ?data-checked=${e.checked} ?data-changed=${e.changed}>
+      <span class="check">
+        <input
+          id=${s}
+          class="check-input"
+          type="checkbox"
+          .checked=${e.checked}
+          @change=${n=>{n.currentTarget instanceof HTMLInputElement&&this.#h(e,n.currentTarget.checked)}}
+        />
+        <span class="check-mark">${ct()}</span>
+      </span>
+      <label for=${s}>
+        <span class="label">${e.label}</span>
+        ${e.note===null?h:r`<span class="note">${e.note}</span>`}
+        ${this.#o===e.id?r`<span class="error">${t.unrecorded}</span>`:h}
+      </label>
+      ${this.id?r`<button
+              class="comment"
+              type="button"
+              aria-label=${t.commentOn(e.label)}
+              title=${t.commentOn(e.label)}
+              @click=${()=>{this.#u(e.id)}}
+            >
+              ${Ns()}
+            </button>`:h}
+    </li>`}#h(t,e){const s=new CustomEvent("dpk-element-action",{detail:{type:as,target:this.#c(t.id),payload:{checked:e}},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(s),this.#o=s.defaultPrevented?null:t.id,this.requestUpdate()}#u(t){this.dispatchEvent(new CustomEvent("dpk-comment-request",{detail:{target:this.#c(t)},bubbles:!0,composed:!0}))}#c(t){return`element:${encodeURIComponent(this.id)}/item/${encodeURIComponent(t)}`}#m(){if(this.#e===null)this.#a=ns(),this.#r=this.#i.map(t=>({id:t.id,title:t.type,stale:"target-missing"}));else{const t=ti(this.#l,this.#e,this.#i);this.#a=t.data,this.#r=t.results}this.requestUpdate()}}const os=()=>{customElements.get("dpk-checklist")||customElements.define("dpk-checklist",rs)},v=(a,t,e)=>e===void 0?{kind:a,pattern:t}:{kind:a,pattern:t,next:e},ot=v(null,/\s+/y),Pt=v("string",/"(?:\\.|[^\\"\n])*"?|'(?:\\.|[^\\'\n])*'?/y),It=v("comment",/\/\*[\s\S]*?(?:\*\/|$)/y),si=["abstract","as","async","await","break","case","catch","class","const","continue","declare","default","delete","do","else","enum","export","extends","false","finally","for","from","function","if","implements","import","in","instanceof","interface","keyof","let","new","null","of","private","protected","public","readonly","return","satisfies","static","super","switch","this","throw","true","try","type","typeof","undefined","var","void","while","yield"],ai={js:{start:"code",rules:{code:[ot,v("comment",/\/\/[^\n]*/y),It,v("string",/`(?:\\[\s\S]|[^\\`])*`?/y),Pt,v("number",/(?:0[xob][\da-f_]+|\d[\d_]*(?:\.\d+)?(?:e[+-]?\d+)?)n?/iy),v("keyword",new RegExp(`(?:${si.join("|")})(?![\\w$])`,"y")),v("function",/[A-Za-z_$][\w$]*(?=\s*\()/y),v(null,/[A-Za-z_$][\w$]*/y)]}},html:{start:"text",rules:{text:[v("comment",/<!--[\s\S]*?(?:-->|$)/y),v("keyword",/&#?\w+;/y),v("tag",/<\/?[A-Za-z][\w:.-]*/y,"tag"),v(null,/[^<&]+/y)],tag:[ot,v("tag",/\/?>/y,"text"),v("punct",/=/y),v("string",/"[^"]*"?|'[^']*'?/y),v("attr",/[^\s=>/"']+/y)]}},css:{start:"sheet",rules:{sheet:[ot,It,Pt,v("keyword",/@[\w-]+/y),v("punct",/[{}]/y),v("tag",/[^{};]+(?=\{)/y),v("property",/-{0,2}[A-Za-z][\w-]*(?=\s*:)/y),v("number",/#[\da-f]{3,8}(?![\w-])/iy),v(null,/-?[A-Za-z_][\w-]*/y),v("number",/-?(?:\d*\.)?\d+[a-z%]*/iy)]}},json:{start:"value",rules:{value:[ot,v("comment",/\/\/[^\n]*/y),It,v("property",/"(?:\\.|[^\\"\n])*"(?=\s*:)/y),v("string",/"(?:\\.|[^\\"\n])*"?/y),v("number",/-?\d+(?:\.\d+)?(?:e[+-]?\d+)?/iy),v("keyword",/(?:true|false|null)(?!\w)/y)]}},sh:{start:"line",rules:{line:[ot,v("comment",/(?<!\S)#[^\n]*/y),Pt,v("keyword",/\$\{[^}\n]*\}?|\$\w+/y),v("attr",/(?<!\S)--?[\w-]+/y),v(null,/[^\s"'$#]+/y)]}}},ni={js:"js",javascript:"js",jsx:"js",mjs:"js",cjs:"js",ts:"js",typescript:"js",tsx:"js",mts:"js",html:"html",xml:"html",svg:"html",vue:"html",css:"css",json:"json",jsonc:"json",json5:"json",sh:"sh",bash:"sh",zsh:"sh",shell:"sh",console:"sh"},ii=a=>a===null?null:ni[a.trim().toLowerCase()]??null,ls=(a,t,e)=>{const s=a.at(-1);t===null&&s!==void 0&&s.kind===null?a[a.length-1]={kind:t,text:s.text+e}:a.push({kind:t,text:e})},ds=(a,t)=>{const e=ii(t);if(e===null)return a===""?[]:[{kind:null,text:a}];const{start:s,rules:n}=ai[e],i=[];let l=s,d=0;for(;d<a.length;){const o=(n[l]??[]).find(g=>(g.pattern.lastIndex=d,g.pattern.test(a)&&g.pattern.lastIndex>d));if(o===void 0){ls(i,null,a.charAt(d)),d+=1;continue}ls(i,o.kind,a.slice(d,o.pattern.lastIndex)),d=o.pattern.lastIndex,l=o.next??l}return i},cs=D({en:{copy:"Copy",copied:"Copied",copyFailed:"Copy failed",copyLabel:a=>`Copy ${a}`,code:"code"},ja:{copy:"\u30B3\u30D4\u30FC",copied:"\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F",copyFailed:"\u30B3\u30D4\u30FC\u5931\u6557",copyLabel:a=>`${a} \u3092\u30B3\u30D4\u30FC`,code:"\u30B3\u30FC\u30C9"}}),ps=T`
+  :host {
+    display: block;
+    overflow: hidden;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-paper-sunken);
+  }
+
+  .bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 34px;
+    padding: 0 6px 0 12px;
+    border-bottom: 1px solid var(--dpk-rule);
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-font-mono);
+    font-size: 12px;
+  }
+
+  .name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .language {
+    color: var(--dpk-ink-faint);
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 24px;
+    padding: 0 8px;
+    border: 0;
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink);
+  }
+
+  button:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  button[data-state='copied'] {
+    color: var(--dpk-green);
+  }
+
+  button[data-state='failed'] {
+    color: var(--dpk-danger);
+  }
+
+  button svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  pre {
+    margin: 0;
+    padding: 12px 14px;
+    overflow: auto;
+    max-height: var(--dpk-code-max-height, 480px);
+    color: var(--dpk-ink);
+    font-family: var(--dpk-font-mono);
+    font-size: 12.5px;
+    line-height: 1.6;
+    tab-size: 2;
+  }
+
+  .comment {
+    color: var(--dpk-code-comment, var(--dpk-ink-faint));
+    font-style: italic;
+  }
+
+  .string {
+    color: var(--dpk-code-string, var(--dpk-green));
+  }
+
+  .number {
+    color: var(--dpk-code-number, var(--dpk-amber));
+  }
+
+  .keyword {
+    color: var(--dpk-code-keyword, var(--dpk-violet));
+  }
+
+  .function {
+    color: var(--dpk-code-function, var(--dpk-blue));
+  }
+
+  .tag {
+    color: var(--dpk-code-tag, var(--dpk-accent-strong));
+  }
+
+  .attr {
+    color: var(--dpk-code-attr, var(--dpk-blue));
+  }
+
+  .property {
+    color: var(--dpk-code-property, var(--dpk-blue));
+  }
+
+  .punct {
+    color: var(--dpk-code-punct, var(--dpk-ink-soft));
+  }
+`,ri='script[type="text/plain"]';class hs extends z{static{this.styles=[M,ps]}static{this.properties={filename:{type:String},language:{type:String},code:{type:String}}}#n=new R(this);#t=new MutationObserver(()=>{this.requestUpdate()});#e="idle";#s;constructor(){super(),this.filename=null,this.language=null,this.code=""}connectedCallback(){super.connectedCallback(),this.#t.observe(this,{childList:!0,subtree:!0,characterData:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#t.disconnect(),clearTimeout(this.#s)}get text(){const t=this.querySelector(ri)?.textContent??this.textContent??"";return Ot(t.trim()===""?this.code:t)}render(){const t=this.#i,e=this.filename??t.code,s=this.#e==="copied"?t.copied:this.#e==="failed"?t.copyFailed:t.copy;return r`<div class="bar">
+        <span class="name">${e}</span>
+        ${this.language?r`<span class="language">${this.language}</span>`:h}
+        <button type="button" data-state=${this.#e} aria-label=${t.copyLabel(e)} @click=${this.#r}>
+          ${this.#e==="copied"?ct():re()}<span aria-live="polite">${s}</span>
+        </button>
+      </div>
+      <pre><code>${this.#a()}</code></pre>`}#a(){return ds(this.text,this.language).map(t=>t.kind===null?t.text:r`<span class=${t.kind}>${t.text}</span>`)}get#i(){return cs(this.#n.locale)}#r=async()=>{const t=await wt(this.text);this.#e=t?"copied":"failed",this.requestUpdate(),clearTimeout(this.#s),this.#s=setTimeout(()=>{this.#e="idle",this.requestUpdate()},1600)}}const Ot=a=>{const t=a.replace(/^\s*\n/,"").replace(/\n\s*$/,"").split(`
+`),e=t.filter(n=>n.trim()!=="").map(n=>/^[ \t]*/.exec(n)?.[0].length??0),s=e.length===0?0:Math.min(...e);return t.map(n=>n.slice(s)).join(`
+`)},us=()=>{customElements.get("dpk-code")||customElements.define("dpk-code",hs)},oi=D({en:{empty:"No code variants",invalid:a=>`Invalid code group: ${a}`},ja:{empty:"\u30B3\u30FC\u30C9\u306E\u30D0\u30EA\u30A8\u30FC\u30B7\u30E7\u30F3\u304C\u3042\u308A\u307E\u305B\u3093",invalid:a=>`\u30B3\u30FC\u30C9\u30B0\u30EB\u30FC\u30D7\u306E\u5F62\u5F0F\u304C\u6B63\u3057\u304F\u3042\u308A\u307E\u305B\u3093: ${a}`}}),li=y({label:$(b(),E(1)),language:u(b(),""),code:$(b(),E(1))}),di=y({label:u(b(),""),variants:$(w(li),E(1))}),gt=a=>{const t=B(di,a),e=new Set;for(const s of t.variants){if(e.has(s.label))throw new Error(`duplicate variant label: ${s.label}`);e.add(s.label)}return t},ci=T`
+  :host {
+    min-width: 0;
+  }
+
+  .bar {
+    padding-left: 10px;
+  }
+
+  .name {
+    flex: 0 1 auto;
+    max-width: 45%;
+  }
+
+  .tabs {
+    display: flex;
+    flex: 1;
+    gap: 1px;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tabs button {
+    height: 26px;
+    padding: 0 8px;
+    border-radius: 6px 6px 0 0;
+    color: var(--dpk-ink-faint);
+    font-size: 11.5px;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .tabs button:hover {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink);
+  }
+
+  .tabs button[aria-selected='true'] {
+    background: var(--dpk-paper-raised);
+    box-shadow: inset 0 -2px 0 var(--dpk-accent);
+    color: var(--dpk-ink);
+  }
+
+  .tabs button:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  pre[hidden] {
+    display: none;
+  }
+
+  .empty {
+    margin: 0;
+    padding: 12px 14px;
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-font-mono);
+    font-size: 12px;
+  }
+
+  @media (max-width: 520px) {
+    .name {
+      display: none;
+    }
+  }
+`;class ms extends z{static{this.styles=[M,ps,ci]}static{this.properties={data:{attribute:!1}}}#n=new R(this);#t=null;#e=null;#s=0;#a="idle";#i;#r=null;constructor(){super(),this.data=null}connectedCallback(){super.connectedCallback(),this.#r=N(this,gt,t=>{this.#s=0,t.ok?this.data=t.value:(this.#t=null,this.#e=t.error,this.requestUpdate())}),queueMicrotask(()=>{if(this.#t!==null||this.#e!==null)return;const t=Zs(this,gt);t!==null&&(this.#r?.(),this.#r=null,this.#s=0,t.ok?this.data=t.value:(this.#t=null,this.#e=t.error,this.requestUpdate()))})}disconnectedCallback(){super.disconnectedCallback(),this.#r?.(),this.#r=null,clearTimeout(this.#i)}willUpdate(t){if(t.has("data")){if(this.data===null){this.#t=null;return}try{this.#t=gt(this.data),this.#e=null,this.#s=0}catch(e){this.#t=null,this.#e=e instanceof Error?e.message:String(e)}}}render(){const t=cs(this.#n.locale),e=oi(this.#n.locale),s=this.#t;if(this.#e!==null)return this.#o(t.code,r`<p class="empty">${e.invalid(this.#e)}</p>`);if(s===null||s.variants.length===0)return this.#o(t.code,r`<p class="empty">${e.empty}</p>`);const n=Math.min(this.#s,s.variants.length-1),i=s.label===""?t.code:s.label,l=this.#a==="copied"?t.copied:this.#a==="failed"?t.copyFailed:t.copy;return r`<div class="bar">
+        ${s.label===""?h:r`<span class="name">${s.label}</span>`}
+        <div class="tabs" role="tablist" aria-label=${i}>
+          ${s.variants.map((d,o)=>r`<button
+              type="button"
+              role="tab"
+              id="code-group-tab-${o}"
+              aria-controls="code-group-panel-${o}"
+              aria-selected=${o===n}
+              tabindex=${o===n?0:-1}
+              @click=${()=>this.#l(o)}
+              @keydown=${g=>this.#d(g,o)}
+            >
+              ${d.label}
+            </button>`)}
+        </div>
+        <button
+          type="button"
+          data-state=${this.#a}
+          aria-label=${t.copyLabel(i)}
+          @click=${()=>this.#h()}
+        >
+          ${this.#a==="copied"?ct():re()}<span aria-live="polite">${l}</span>
+        </button>
+      </div>
+      ${s.variants.map((d,o)=>r`<pre
+          role="tabpanel"
+          id="code-group-panel-${o}"
+          aria-labelledby="code-group-tab-${o}"
+          ?hidden=${o!==n}
+        ><code>${this.#p(d)}</code></pre>`)}`}#o(t,e){return r`<div class="bar"><span class="name">${t}</span></div>
+      ${e}`}#l(t){this.#t!==null&&(this.#s=Math.max(0,Math.min(t,this.#t.variants.length-1)),this.#a="idle",this.requestUpdate())}#d(t,e){if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight")return;const s=this.#t?.variants.length??0;if(s===0)return;t.preventDefault();const n=(e+(t.key==="ArrowRight"?1:-1)+s)%s;this.#l(n),this.renderRoot.querySelectorAll('[role="tab"]')[n]?.focus()}#p(t){const e=t.language===""?null:t.language;return ds(Ot(t.code),e).map(s=>s.kind===null?s.text:r`<span class=${s.kind}>${s.text}</span>`)}async#h(){const t=this.#t;if(t===null)return;const e=Math.min(this.#s,t.variants.length-1),s=t.variants[e];if(s===void 0)return;const n=await wt(Ot(s.code));this.#a=n?"copied":"failed",this.requestUpdate(),clearTimeout(this.#i),this.#i=setTimeout(()=>{this.#a="idle",this.requestUpdate()},1600)}}const gs=()=>{customElements.get("dpk-code-group")||customElements.define("dpk-code-group",ms)},pi=D({en:{back:"Back",forward:"Forward",reload:"Reload",address:"Address",tabs:"Tabs",newTab:"New tab",closeTab:"Close tab",profile:a=>`Profile: ${a}`,guest:"Guest",shortcuts:"Pages of this site",unreachableTitle:"This site can\u2019t be reached",unreachableBody:"No page here has this address."},ja:{back:"\u623B\u308B",forward:"\u9032\u3080",reload:"\u518D\u8AAD\u307F\u8FBC\u307F",address:"\u30A2\u30C9\u30EC\u30B9",tabs:"\u30BF\u30D6",newTab:"\u65B0\u3057\u3044\u30BF\u30D6",closeTab:"\u30BF\u30D6\u3092\u9589\u3058\u308B",profile:a=>`\u30D7\u30ED\u30D5\u30A3\u30FC\u30EB: ${a}`,guest:"\u30B2\u30B9\u30C8",shortcuts:"\u3053\u306E\u30B5\u30A4\u30C8\u306E\u30DA\u30FC\u30B8",unreachableTitle:"\u3053\u306E\u30B5\u30A4\u30C8\u306B\u30A2\u30AF\u30BB\u30B9\u3067\u304D\u307E\u305B\u3093",unreachableBody:"\u3053\u306E\u30A2\u30C9\u30EC\u30B9\u306E\u30DA\u30FC\u30B8\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}}),ft=(a,t,e)=>{const s=le(t,e);if(s===null)return;const n=de(s);return a.find(i=>{const l=le(i.url,e);return l!==null&&de(l)===n})},hi=(a,t,e)=>t===void 0||t.kind==="new-tab"?e:t.kind==="unreachable"?ce(t.url):ft(a,t.page.url,t.page.url)?.title??ce(t.page.url),fs=a=>a===void 0||a.kind==="new-tab"?"":a.kind==="unreachable"?a.url:a.page.url,ui=(a,t,e,s)=>{const n=ia(t),i=n.history[n.index];return{tabs:t.tabs.map(l=>{const d=l.history[l.index];return{id:l.id,title:hi(a,d,e),url:fs(d),active:l.id===n.id}}),entry:i,url:fs(i),canBack:oa(t),canForward:ra(t),...s===null||s===""?{}:{profile:s}}},mi=a=>a.map(t=>({title:t.title,url:t.url.replace(/^[a-z][a-z0-9+.-]*:\/\//i,"").replace(/\/$/,""),href:t.url,page:{url:t.url}})),gi=":scope > [data-url]",fi=360,bs="https://page.example.com/";class ks extends z{static{this.shadowRootOptions={...z.shadowRootOptions,slotAssignment:"manual"}}static{this.styles=[M,la,T`
+      :host {
+        display: block;
+        height: var(--dpk-browser-height, 460px);
+        min-height: 240px;
+        color: var(--dpk-ink);
+        font-family: var(--dpk-body);
+      }
+
+      :host([viewport='mobile']) {
+        max-width: var(--dpk-browser-phone-width, 390px);
+        height: var(--dpk-browser-height, 720px);
+      }
+
+      .browser {
+        box-sizing: border-box;
+        height: 100%;
+        border: 1px solid var(--dpk-rule);
+        border-radius: var(--dpk-radius-lg);
+        background: var(--dpk-paper-raised);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
+        overflow: hidden;
+      }
+
+      /* The page is the product's own light surface, and scrolls under the chrome. */
+      .browser-page {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        min-height: 0;
+        overflow: auto;
+        color-scheme: light;
+        background: #fff;
+        color: #1f2430;
+      }
+
+      ::slotted(*) {
+        flex: 1 0 auto;
+      }
+    `]}static{this.properties={url:{type:String},viewport:{type:String,reflect:!0},profile:{type:String}}}#n=new R(this);#t=new MutationObserver(()=>{this.requestUpdate()});#e=null;#s=!1;#a=null;#i=!1;#r=null;constructor(){super(),this.url=null,this.viewport="desktop",this.profile=null}connectedCallback(){super.connectedCallback(),this.#t.observe(this,{childList:!0,attributes:!0,attributeFilter:["data-url","data-title"]}),this.addEventListener("click",this.#k),this.addEventListener("auxclick",this.#k)}disconnectedCallback(){super.disconnectedCallback(),this.#t.disconnect(),this.removeEventListener("click",this.#k),this.removeEventListener("auxclick",this.#k),this.#a!==null&&clearTimeout(this.#a),this.#a=null}get#o(){return pi(this.#n.locale)}get#l(){return this.viewport==="mobile"}get#d(){return[...this.querySelectorAll(gi)]}get#p(){return this.#d.map(t=>{const e=t.dataset.url??"",s=t.querySelector("h1, h2, h3")?.textContent?.trim();return{url:e,title:t.dataset.title??(s||e)}})}get#h(){const t=this.#e===null?void 0:$t(this.#e);return t?.kind==="page"?t.page.url:this.#p[0]?.url??bs}#u(t){if(t?.kind!=="page")return;const e=ft(this.#p,t.page.url,t.page.url);return e===void 0?void 0:this.#d.find(s=>s.dataset.url===e.url)}willUpdate(t){if(this.#e===null){const e=this.#p,s=(this.url===null?void 0:ft(e,this.url,bs))??e[0];s!==void 0&&(this.#e=da({url:s.url}));return}t.has("url")&&this.url!==null&&this.#g(this.url,!1)}render(){const t=this.#e;if(t===null)return r`<slot hidden></slot>`;const e=this.#o,s=this.#p,n=ui(s,t,e.newTab,this.profile),i={view:n,phone:this.#l,switcher:this.#s,shortcuts:n.entry?.kind==="new-tab"?mi(s):[],labels:e,send:d=>{this.#m(d)}},l=this.#u(n.entry);return r`<div
+      class="browser"
+      data-viewport=${this.#l?"mobile":"desktop"}
+      ?data-loading=${this.#a!==null}
+    >
+      ${ca(i)}
+      <div class="browser-page">
+        ${pa(i,l===void 0?void 0:r`<slot></slot>`)}
+      </div>
+      ${ha(i)}
+    </div>`}updated(){const t=this.#e===null?void 0:$t(this.#e),e=this.#u(t);this.renderRoot.querySelector("slot")?.assign(...e===void 0?[]:[e]),this.#i&&(this.#i=!1,this.renderRoot.querySelector('.browser-tab[aria-selected="true"]')?.focus());const s=t===void 0||t.kind==="new-tab"?"":t.kind==="page"?t.page.url:t.url;if(s===this.#r)return;const n=this.#r===null;this.#r=s,n||this.dispatchEvent(new CustomEvent("dpk-browser-navigate",{detail:{url:s},bubbles:!0,composed:!0}))}#c(t){if(this.#e===null)return;const e=ua(this.#e,t);e!==this.#e&&(this.#e=e,this.#f(),this.renderRoot.querySelector(".browser-page")?.scrollTo?.({top:0}),this.requestUpdate())}#m(t){switch(t.kind){case"reload":this.#v();return;case"address":this.#g(t.input,!1);return;case"back":case"forward":case"new-tab":this.#s=!1,this.#c({kind:t.kind}),this.requestUpdate();return;case"switcher":this.#s=t.open,this.requestUpdate();return;case"activate":this.#s=!1,this.#i=t.focus===!0,this.#c({kind:"activate",id:t.id}),this.requestUpdate();return;case"close-tab":this.#c({kind:"close-tab",id:t.id});return;case"visit":this.#c({kind:"visit",page:t.page});return;default:return}}#g(t,e){const s=this.#h,n=ft(this.#p,t,s),i=n===void 0?{kind:"unreachable",url:ma(t,s)}:{kind:"page",page:{url:n.url}};e!==!1?this.#c({kind:"open-tab",entry:i,background:e.background}):i.kind==="page"?this.#c({kind:"visit",page:i.page}):this.#c({kind:"unreachable",url:i.url})}#v(){if(this.#a!==null||this.#e===null)return;const t=this.#u($t(this.#e));this.#a=setTimeout(()=>{if(this.#a=null,t!==void 0){for(const e of t.querySelectorAll("form"))e.reset();for(const e of t.querySelectorAll("dialog"))e.close();t.scrollTop=0,t.dispatchEvent(new CustomEvent("dpk-reload",{bubbles:!0}))}this.renderRoot.querySelector(".browser-page")?.scrollTo?.({top:0}),this.requestUpdate()},fi),this.requestUpdate()}#f(){this.#a!==null&&(clearTimeout(this.#a),this.#a=null)}#k=t=>{if(t.defaultPrevented||this.#e===null||t.type==="auxclick"&&t.button!==1)return;const e=t.composedPath().find(d=>d instanceof HTMLAnchorElement&&this.contains(d)),s=e?.getAttribute("href");if(e===void 0||s===null||s===void 0||s.startsWith("#"))return;t.preventDefault();const n=t.metaKey||t.ctrlKey||t.button===1,i=e.target==="_blank",l=new URL(s,this.#h).href;this.#g(l,i||n?{background:n}:!1)}}const vs=()=>{customElements.get("dpk-browser")||customElements.define("dpk-browser",ks)},bi=D({en:{listLabel:"Options",empty:"No matches.",selectedCount:a=>`${a} selected`,moveLabel:"to move",toggleLabel:"to toggle",removeChip:a=>`Remove ${a}`},ja:{listLabel:"\u5019\u88DC",empty:"\u4E00\u81F4\u3059\u308B\u9805\u76EE\u304C\u3042\u308A\u307E\u305B\u3093\u3002",selectedCount:a=>`${a} \u4EF6\u9078\u629E`,moveLabel:"\u3067\u79FB\u52D5",toggleLabel:"\u3067\u5207\u308A\u66FF\u3048",removeChip:a=>`${a} \u3092\u524A\u9664`}}),ki=y({value:$(b(),E(1)),label:$(b(),E(1)),description:u(b()),group:u(b()),avatar:u(b())}),vi=y({options:w(ki),value:u(Jt([b(),w(b())]))}),xs=a=>typeof a=="string"?a===""?[]:[a]:Array.isArray(a)?a.filter(t=>typeof t=="string"&&t!==""):[],ys=a=>{const t=B(vi,a),e=new Set;return{options:t.options.map(n=>{if(e.has(n.value))throw new Error(`duplicate option value: ${n.value}`);return e.add(n.value),{value:n.value,label:n.label,description:n.description??null,group:n.group??null,avatar:n.avatar??null}}),value:t.value===void 0?null:xs(t.value)}},Ut=(a,t)=>{const e=t.trim().toLowerCase();return e===""?a:a.filter(s=>s.label.toLowerCase().includes(e)||(s.description?.toLowerCase().includes(e)??!1))},xi=a=>{const t=[],e=new Map;for(const s of a){let n=e.get(s.group);n===void 0&&(n=[],e.set(s.group,n),t.push(s.group)),n.push(s)}return t.map(s=>({group:s,options:e.get(s)??[]}))},Ft=(a,t)=>t===0?-1:Math.min(Math.max(a,0),t-1),yi=(a,t,e)=>e===0?-1:a<0?t>0?0:e-1:(a+t+e)%e,wi=(a,t,e)=>e?a.includes(t)?a.filter(s=>s!==t):[...a,t]:[t],$i=(a,t)=>a.filter(e=>e!==t),Ci=(a,t)=>a.includes(t),Si=(a,t)=>a.length===t.length&&a.every((e,s)=>e===t[s]),Ei=(a,t)=>t.flatMap(e=>{const s=a.find(n=>n.value===e);return s?[s]:[]}),zi=(a,t)=>{const e=t[0];return e===void 0?null:a.find(s=>s.value===e)?.label??null},ws=a=>{const t=a.trim().split(/\s+/).filter(Boolean),e=t[0]?.[0]??"",s=t.length>1?t[t.length-1]?.[0]??"":"";return`${e}${s}`.toUpperCase()},$s=["blue","green","amber","violet","accent","danger"],Cs=a=>{let t=0;for(let e=0;e<a.length;e+=1)t=t*31+a.charCodeAt(e)|0;return $s[Math.abs(t)%$s.length]??"blue"};let Ti=0;const Ai=".combo-control, .combo-listbox";class Ss extends z{static{this.styles=[M,T`
+      :host {
+        display: block;
+      }
+
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .field-label {
+        font-size: 11.5px;
+        font-weight: 600;
+        color: var(--dpk-ink-soft);
+      }
+
+      .combo-control {
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 5px;
+        min-height: var(--dpk-control-h);
+        padding: 4px 6px 4px 10px;
+        border: 1px solid var(--dpk-rule-strong);
+        border-radius: var(--dpk-radius-sm);
+        background: var(--dpk-paper-raised);
+        box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+        cursor: text;
+        transition:
+          border-color 160ms var(--dpk-ease),
+          box-shadow 160ms var(--dpk-ease);
+      }
+
+      .combo-control:focus-within {
+        border-color: var(--dpk-blue);
+        box-shadow: var(--dpk-focus);
+      }
+
+      .input {
+        flex: 1 1 80px;
+        min-width: 60px;
+        margin: 2px 0;
+        border: 0;
+        background: transparent;
+        color: var(--dpk-ink);
+        font: inherit;
+        font-size: 12.5px;
+        outline: none;
+      }
+
+      .input::placeholder {
+        color: var(--dpk-ink-faint);
+      }
+
+      .chevron {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border: 0;
+        border-radius: var(--dpk-radius-xs);
+        background: transparent;
+        color: var(--dpk-ink-faint);
+        cursor: pointer;
+        transition: transform 160ms var(--dpk-ease);
+      }
+
+      .chevron:hover {
+        color: var(--dpk-ink);
+      }
+
+      .chevron[data-open='true'] {
+        transform: rotate(180deg);
+      }
+
+      .chevron svg {
+        display: block;
+        width: 14px;
+        height: 14px;
+      }
+
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 2px 6px 2px 2px;
+        border-radius: 999px;
+        background: var(--dpk-paper-inset);
+        color: var(--dpk-ink);
+        font-size: 11.5px;
+        line-height: 1.4;
+      }
+
+      .chip .avatar {
+        width: 16px;
+        height: 16px;
+        font-size: 8px;
+      }
+
+      .chip-remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        padding: 0;
+        border: 0;
+        border-radius: 999px;
+        background: transparent;
+        color: var(--dpk-ink-faint);
+        cursor: pointer;
+      }
+
+      .chip-remove:hover {
+        color: var(--dpk-danger);
+      }
+
+      .chip-remove svg {
+        display: block;
+        width: 10px;
+        height: 10px;
+      }
+
+      .avatar {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 999px;
+        font-family: var(--dpk-mono);
+        font-size: 9.5px;
+        font-weight: 650;
+      }
+
+      .avatar[data-tone='blue'] {
+        background: var(--dpk-blue-soft);
+        color: var(--dpk-blue);
+      }
+
+      .avatar[data-tone='green'] {
+        background: var(--dpk-green-soft);
+        color: var(--dpk-green);
+      }
+
+      .avatar[data-tone='amber'] {
+        background: var(--dpk-amber-soft);
+        color: var(--dpk-amber);
+      }
+
+      .avatar[data-tone='violet'] {
+        background: var(--dpk-violet-soft);
+        color: var(--dpk-violet);
+      }
+
+      .avatar[data-tone='accent'] {
+        background: var(--dpk-accent-soft);
+        color: var(--dpk-accent);
+      }
+
+      .avatar[data-tone='danger'] {
+        background: var(--dpk-danger-soft);
+        color: var(--dpk-danger);
+      }
+
+      .combo-listbox {
+        box-sizing: border-box;
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        border: 1px solid var(--dpk-rule-strong);
+        border-radius: var(--dpk-radius-lg);
+        background: var(--dpk-paper-raised);
+        box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
+        color: var(--dpk-ink);
+        font-size: 12.5px;
+        animation: dpk-combobox-pop-in 140ms var(--dpk-ease);
+      }
+
+      @keyframes dpk-combobox-pop-in {
+        from {
+          opacity: 0;
+          transform: translateY(4px) scale(0.98);
+        }
+      }
+
+      .options {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        padding: 6px 0;
+      }
+
+      .group-heading {
+        padding: 9px 12px 4px;
+        font-family: var(--dpk-mono);
+        font-size: 10px;
+        font-weight: 650;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+        color: var(--dpk-ink-faint);
+      }
+
+      .option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        cursor: pointer;
+      }
+
+      .option:hover,
+      .option[data-active='true'] {
+        background: var(--dpk-paper-sunken);
+      }
+
+      .option-text {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+
+      .option-name {
+        flex: none;
+        max-width: 60%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--dpk-ink);
+      }
+
+      .option-desc {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--dpk-ink-soft);
+        font-size: 11.5px;
+      }
+
+      .option-check {
+        flex: none;
+        display: flex;
+        color: var(--dpk-blue);
+      }
+
+      .option-check svg {
+        display: block;
+        width: 14px;
+        height: 14px;
+      }
+
+      .empty {
+        padding: 18px 12px;
+        color: var(--dpk-ink-soft);
+        font-size: 12px;
+        text-align: center;
+      }
+
+      .footer {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 7px 12px;
+        border-top: 1px solid var(--dpk-rule);
+      }
+
+      .count {
+        color: var(--dpk-ink-soft);
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .hints {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        color: var(--dpk-ink-faint);
+        font-size: 10.5px;
+      }
+
+      .hint {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.5em;
+        height: 1.5em;
+        padding: 0 4px;
+        border: 1px solid var(--dpk-rule-strong);
+        border-bottom-width: 2px;
+        border-radius: var(--dpk-radius-xs);
+        background: var(--dpk-paper-raised);
+        color: var(--dpk-ink-soft);
+        font-family: var(--dpk-mono);
+        font-size: 10px;
+      }
+
+      .error {
+        color: var(--dpk-danger);
+        font-size: 12px;
+      }
+    `]}static{this.properties={label:{type:String},placeholder:{type:String},multiple:{type:Boolean,reflect:!0},name:{type:String,reflect:!0}}}#n=`dpk-combobox-${++Ti}`;#t=new R(this);#e=new bt(this);#s=null;#a=[];#i=[];#r=null;#o=!1;#l=null;#d=-1;constructor(){super(),this.label=null,this.placeholder=null,this.multiple=!1,this.name=null,new Ws(this,{open:()=>this.#o,closesOn:t=>!t.some(e=>e instanceof Element&&e.matches(Ai)),ownsEscape:()=>this.#o,dismiss:()=>this.#b()})}connectedCallback(){super.connectedCallback(),this.#s=N(this,ys,t=>{t.ok?(this.#a=t.value.options,this.#r=null,t.value.value!==null&&(this.#i=t.value.value)):(this.#a=[],this.#r=t.error),this.requestUpdate()})}disconnectedCallback(){super.disconnectedCallback(),this.#s?.(),this.#s=null}get value(){return this.multiple?this.#i:this.#i[0]??""}set value(t){this.#i=xs(t),this.requestUpdate()}render(){const t=this.#p;if(this.#r!==null)return r`<p class="error">${this.#r}</p>`;const e=this.#l??"",s=Ut(this.#a,e),n=Ft(this.#d,s.length),i=this.multiple?Ei(this.#a,this.#i):[],l=this.multiple?null:zi(this.#a,this.#i),d=this.multiple?this.#i.length===0:l===null,o=this.#l??(this.multiple?"":l??"");return r`
+      <div class="field">
+        ${this.label?r`<label class="field-label" id=${this.#h}>${this.label}</label>`:h}
+        <div class="combo-control">
+          ${this.multiple?F(i,g=>g.value,g=>this.#v(g,t)):h}
+          <input
+            class="input"
+            type="text"
+            role="combobox"
+            autocomplete="off"
+            spellcheck="false"
+            aria-expanded=${this.#o?"true":"false"}
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            aria-controls=${this.#u}
+            aria-labelledby=${this.label?this.#h:h}
+            aria-activedescendant=${n>=0?this.#c(s[n]?.value??""):h}
+            placeholder=${d?this.placeholder??"":""}
+            .value=${o}
+            @focus=${this.#f}
+            @click=${this.#f}
+            @input=${this.#k}
+            @keydown=${this.#y}
+          />
+          <button
+            type="button"
+            class="chevron"
+            tabindex="-1"
+            aria-hidden="true"
+            data-open=${this.#o?"true":"false"}
+            @mousedown=${g=>g.preventDefault()}
+            @click=${this.#S}
+          >
+            ${Gs()}
+          </button>
+        </div>
+      </div>
+      ${this.#o?this.#m(s,n,t):h}
+    `}updated(t){super.updated(t),this.#$()}get#p(){return bi(this.#t.locale)}get#h(){return`${this.#n}-label`}get#u(){return`${this.#n}-listbox`}#c(t){return`${this.#n}-option-${encodeURIComponent(t)}`}#m(t,e,s){const n=xi(t);return r`
+      <div
+        class="combo-listbox"
+        popover="manual"
+        role="listbox"
+        id=${this.#u}
+        aria-label=${this.label??s.listLabel}
+        aria-multiselectable=${this.multiple?"true":"false"}
+      >
+        <div class="options">
+          ${t.length===0?r`<p class="empty">${s.empty}</p>`:n.map(i=>r`
+                    ${i.group!==null?r`<div class="group-heading">${i.group}</div>`:h}
+                    ${F(i.options,l=>l.value,l=>this.#g(l,t.indexOf(l)===e))}
+                  `)}
+        </div>
+        <div class="footer">
+          <span class="count">${s.selectedCount(this.#i.length)}</span>
+          <span class="hints">
+            <span class="hint"><kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> ${s.moveLabel}</span>
+            <span class="hint"><kbd class="kbd">↵</kbd> ${s.toggleLabel}</span>
+          </span>
+        </div>
+      </div>
+    `}#g(t,e){const s=Ci(this.#i,t.value);return r`
+      <div
+        class="option"
+        id=${this.#c(t.value)}
+        role="option"
+        aria-selected=${s?"true":"false"}
+        data-active=${e?"true":"false"}
+        @mousedown=${n=>n.preventDefault()}
+        @click=${()=>this.#w(t.value)}
+      >
+        <span class="avatar" data-tone=${Cs(t.value)}>${t.avatar??ws(t.label)}</span>
+        <span class="option-text">
+          <span class="option-name">${t.label}</span>
+          ${t.description!==null?r`<span class="option-desc">${t.description}</span>`:h}
+        </span>
+        ${s?r`<span class="option-check" aria-hidden="true">${ct()}</span>`:h}
+      </div>
+    `}#v(t,e){return r`
+      <span class="chip">
+        <span class="avatar" data-tone=${Cs(t.value)}>${t.avatar??ws(t.label)}</span>
+        <span class="chip-label">${t.label}</span>
+        <button
+          type="button"
+          class="chip-remove"
+          tabindex="-1"
+          aria-label=${e.removeChip(t.label)}
+          @mousedown=${s=>s.preventDefault()}
+          @click=${s=>{s.stopPropagation(),this.#x($i(this.#i,t.value))}}
+        >
+          ${Ks()}
+        </button>
+      </span>
+    `}#f=()=>{this.#o=!0,this.#d=-1,this.requestUpdate()};#k=t=>{t.currentTarget instanceof HTMLInputElement&&(this.#l=t.currentTarget.value,this.#o=!0,this.#d=-1,this.requestUpdate())};#y=t=>{if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault();const e=Ut(this.#a,this.#l??""),s=this.#o;this.#o=!0;const n=t.key==="ArrowDown"?1:-1;this.#d=s?yi(this.#d,n,e.length):-1,s||(this.#d=Ft(n>0?0:e.length-1,e.length)),this.requestUpdate();return}if(t.key==="Enter"){if(!this.#o)return;t.preventDefault();const e=Ut(this.#a,this.#l??""),s=e[Ft(this.#d,e.length)];s&&this.#w(s.value);return}if(t.key==="Backspace"){if((this.#l??"")!==""||!this.multiple||this.#i.length===0)return;t.preventDefault(),this.#x(this.#i.slice(0,-1))}};#S=()=>{this.#o?this.#b():(this.#o=!0,this.#d=-1,this.requestUpdate()),this.renderRoot.querySelector("input")?.focus()};#w(t){this.#x(wi(this.#i,t,this.multiple)),this.multiple?(this.#l="",this.#d=-1,this.requestUpdate()):this.#b()}#x(t){Si(this.#i,t)||(this.#i=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("dpk-combobox-change",{detail:{value:this.multiple?t:t[0]??""},bubbles:!0,composed:!0})))}#b(){this.#o=!1,this.#l=null,this.#d=-1,this.requestUpdate()}#$(){const t=this.renderRoot.querySelector(".combo-listbox"),e=this.renderRoot.querySelector(".combo-control");!t||!e||this.#e.open(t,e,{width:e.offsetWidth,height:320},{placement:"bottom-start"})}}const Es=()=>{customElements.get("dpk-combobox")||customElements.define("dpk-combobox",Ss)};let J=null;const Mi=a=>{J!==null&&J!==a&&J.hide(),J=a},Li=a=>{J===a&&(J=null)};class zs extends z{static{this.styles=[M,K,T`
+      :host {
+        display: contents;
+      }
+
+      /*
+       * The one placement core imposes: bottom-center, clear of the hand-off
+       * dock. A host that needs a different spot claims the bar from
+       * somewhere else on screen instead — the contract is "claim it", not
+       * "place it".
+       */
+      .dpk-floatbar {
+        left: 50%;
+        bottom: calc(14px + var(--dpk-dock-clearance, 0px));
+        transform: translateX(-50%);
+        z-index: 45;
+      }
+    `]}static{this.properties={label:{type:String,reflect:!0}}}#n={hide:()=>this.#e(!1)};#t=!1;constructor(){super(),this.label=null}get open(){return this.#t}connectedCallback(){super.connectedCallback(),this.#e(!0),Mi(this.#n)}disconnectedCallback(){super.disconnectedCallback(),Li(this.#n)}render(){return r`
+      <div
+        class="dpk-floatbar"
+        popover="manual"
+        role="toolbar"
+        aria-label=${this.label??h}
+        @keydown=${this.#a}
+      >
+        <slot></slot>
+      </div>
+    `}updated(t){super.updated(t),this.#s()}#e(t){t!==this.#t&&(this.#t=t,this.requestUpdate())}#s(){const t=this.renderRoot.querySelector(".dpk-floatbar");if(!t||typeof t.showPopover!="function")return;const e=t.matches(":popover-open");if(this.#t&&!e)try{t.showPopover()}catch{}else if(!this.#t&&e)try{t.hidePopover()}catch{}}#a=t=>{t.key==="Escape"&&this.dispatchEvent(new CustomEvent("dpk-selection-clear",{bubbles:!0,composed:!0}))}}const Ts=()=>{customElements.get("dpk-selection-bar")||customElements.define("dpk-selection-bar",zs)};class As extends z{static{this.styles=[M,K]}#n=new Vs(this);ask(t){return this.#n.ask(t)}render(){return this.#n.render()}}const Ms=()=>{customElements.get("dpk-confirm-dialog")||customElements.define("dpk-confirm-dialog",As)},Di=D({en:{heading:"Alternatives",empty:"No alternatives to compare.",dataError:"The alternatives could not be read.",reason:"Reason",tradeoffs:"Tradeoffs",adopted:"Adopted",rejected:"Rejected",considered:"Considered"},ja:{heading:"\u4EE3\u66FF\u6848",empty:"\u6BD4\u8F03\u3059\u308B\u4EE3\u66FF\u6848\u304C\u3042\u308A\u307E\u305B\u3093\u3002",dataError:"\u4EE3\u66FF\u6848\u306E\u30C7\u30FC\u30BF\u3092\u8AAD\u307F\u53D6\u308C\u307E\u305B\u3093\u3067\u3057\u305F\u3002",reason:"\u7406\u7531",tradeoffs:"\u30C8\u30EC\u30FC\u30C9\u30AA\u30D5",adopted:"\u63A1\u7528",rejected:"\u5374\u4E0B",considered:"\u691C\u8A0E"}}),Ri=["adopted","rejected","considered"],ji=y({id:$(b(),ie(/^[A-Za-z0-9_-]+$/)),status:st(Ri),label:u($(b(),E(1))),summary:u($(b(),E(1))),reason:u($(b(),E(1))),tradeoffs:u(w($(b(),E(1))))}),qi=y({options:w(ji)}),Pi=()=>({options:[]}),Ls=a=>{const t=B(qi,a),e=new Set;return{options:t.options.map(s=>{if(e.has(s.id))throw new Error(`duplicate option id: ${s.id}`);return e.add(s.id),{id:s.id,status:s.status,label:s.label??s.id,summary:s.summary??null,reason:s.reason??null,tradeoffs:s.tradeoffs??[]}})}},Ii=(a,t)=>{switch(t){case"adopted":return a.adopted;case"rejected":return a.rejected;case"considered":return a.considered}},Oi=(a,t)=>({id:t.id,status:t.status,key:t.label===t.id?null:t.id,title:t.label,statusLabel:Ii(a,t.status),summary:t.summary,reason:t.reason===null?null:{label:a.reason,text:t.reason},tradeoffs:t.tradeoffs.length===0?null:{label:a.tradeoffs,items:t.tradeoffs}}),Ui=(a,t)=>t.options.map(e=>Oi(a,e)),Fi=[M,ta,T`
+    :host {
+      display: block;
+      color: var(--dpk-ink);
+      font-family: var(--dpk-body);
+    }
+
+    .alternatives {
+      display: grid;
+      gap: 10px;
+    }
+
+    /* A concise section label, quiet enough to sit above cards in a document. */
+    .alternatives-label {
+      margin: 0;
+      padding: 0 2px;
+    }
+
+    /* Cards wrap into columns once the page has room; one option takes the row. */
+    .options {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr));
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    /* A grid item that stretches, so the cards in a row share their height. */
+    .option {
+      display: grid;
+      min-width: 0;
+    }
+
+    /*
+     * The taken option: the card's own tone (a green hairline edge and a barely
+     * green face), plus a ring outside the edge so the eye finds it in a row of
+     * neutral cards. Weight and hue, not a bar down one side.
+     */
+    .option[data-status='adopted'] .dpk-card {
+      --dpk-card-tone: var(--dpk-green);
+      box-shadow:
+        0 0 0 2px color-mix(in oklab, var(--dpk-green) 26%, transparent),
+        var(--dpk-bevel),
+        0 10px 22px -14px color-mix(in oklab, var(--dpk-green) 60%, var(--dpk-shade-3));
+    }
+
+    /* ------------------------------------------------------------ status */
+
+    [data-tone='adopted'] {
+      --tone: var(--dpk-green);
+      --tone-soft: var(--dpk-green-soft);
+    }
+
+    [data-tone='rejected'] {
+      --tone: var(--dpk-amber);
+      --tone-soft: var(--dpk-amber-soft);
+    }
+
+    [data-tone='considered'] {
+      --tone: var(--dpk-blue);
+      --tone-soft: var(--dpk-blue-soft);
+    }
+
+    /* The chip's box comes from the card atom; only its tone is set here. */
+    .status {
+      background: var(--tone-soft);
+      color: var(--tone);
+      font-weight: 650;
+    }
+
+    /* -------------------------------------------------------------- body */
+
+    .option-summary {
+      margin: 0;
+      color: var(--dpk-ink-soft);
+      font-size: 12.5px;
+      line-height: 1.6;
+      overflow-wrap: anywhere;
+    }
+
+    .option-facts {
+      display: grid;
+      gap: 8px;
+      margin: 0;
+    }
+
+    .option-fact {
+      display: grid;
+      gap: 1px;
+    }
+
+    .option-fact > dd {
+      margin: 0;
+      color: var(--dpk-ink-soft);
+      font-size: 12.5px;
+      line-height: 1.6;
+      overflow-wrap: anywhere;
+    }
+
+    .option-tradeoffs {
+      display: grid;
+      gap: 2px;
+      margin: 0;
+      padding-left: 16px;
+    }
+
+    .option-tradeoffs > li::marker {
+      color: var(--dpk-ink-faint);
+    }
+
+    /* ------------------------------------------------------- notice/empty */
+
+    .alternatives-notice,
+    .alternatives-empty {
+      margin: 0;
+      padding: 12px 14px;
+      border-radius: var(--dpk-radius);
+      font-size: 12.5px;
+      line-height: 1.6;
+    }
+
+    .alternatives-notice {
+      background: var(--dpk-danger-soft);
+      color: var(--dpk-danger);
+    }
+
+    .alternatives-empty {
+      color: var(--dpk-ink-faint);
+      text-align: center;
+    }
+  `];class Ds extends z{static{this.styles=Fi}static{this.properties={data:{attribute:!1},heading:{type:String}}}#n=new R(this);#t=null;#e=null;#s=null;constructor(){super(),this.data=null,this.heading=null}connectedCallback(){super.connectedCallback(),this.#t=N(this,Ls,t=>{this.data===null&&(t.ok?this.#i(t.value):this.#r(t.error))})}disconnectedCallback(){super.disconnectedCallback(),this.#t?.(),this.#t=null}willUpdate(t){t.has("data")&&this.data!==null&&this.#i(this.data)}get dataError(){return this.#s}get#a(){return Di(this.#n.locale)}#i(t){this.#e=t,this.#s=null,this.requestUpdate()}#r(t){this.#e=null,this.#s=t,console.error("[dev-process-kit] invalid alternatives data:",t),this.requestUpdate()}render(){const t=this.#a,e=this.heading??t.heading,s=Ui(t,this.#e??Pi());return r`<section class="alternatives">
+      ${e===""?h:r`<p class="alternatives-label dpk-label">${e}</p>`}
+      ${this.#s===null?h:r`<p class="alternatives-notice" role="alert">${t.dataError}<br />${this.#s}</p>`}
+      ${this.#s===null&&s.length===0?r`<p class="alternatives-empty">${t.empty}</p>`:h}
+      ${s.length===0?h:r`<ul class="options">
+              ${F(s,n=>n.id,n=>this.#o(n))}
+            </ul>`}
+    </section>`}#o(t){const e=t.reason===null&&t.tradeoffs===null?h:r`<dl class="option-facts">
+            ${t.reason===null?h:r`<div class="option-fact">
+                    <dt class="dpk-label">${t.reason.label}</dt>
+                    <dd>${t.reason.text}</dd>
+                  </div>`}
+            ${t.tradeoffs===null?h:r`<div class="option-fact">
+                    <dt class="dpk-label">${t.tradeoffs.label}</dt>
+                    <dd>
+                      <ul class="option-tradeoffs">
+                        ${t.tradeoffs.items.map(s=>r`<li>${s}</li>`)}
+                      </ul>
+                    </dd>
+                  </div>`}
+          </dl>`;return r`<li class="option" data-status=${t.status} data-option=${t.id}>
+      <article class="dpk-card">
+        <div class="dpk-card-head">
+          ${t.key===null?h:r`<span class="dpk-card-key">${t.key}</span>`}
+          <span class="dpk-card-title">${t.title}</span>
+          <span class="dpk-card-meta">
+            <span class="dpk-card-chip status" data-tone=${t.status}>${t.statusLabel}</span>
+          </span>
+        </div>
+        ${t.summary===null?h:r`<p class="option-summary">${t.summary}</p>`} ${e}
+      </article>
+    </li>`}}const Rs=()=>{customElements.get("dpk-alternatives")||customElements.define("dpk-alternatives",Ds)},Hi=()=>{Xs(),Ys(),Re(),_e(),js()},js=()=>{Ee(),Ge(),Qe(),ka(),ss(),os(),va(),xa(),us(),gs(),Es(),ya(),ve(),Ce(),vs(),Ts(),Ms(),Ze(),Rs()};export{Na as $,ve as A,Ze as B,_e as C,Ds as D,Re as E,Ts as F,ss as G,Ce as H,Ls as I,is as J,gt as K,ys as L,jt as M,qe as N,we as O,js as P,pt as Q,Ct as R,Ia as S,Ba as T,Oa as U,_a as V,wa as W,xe as X,Ua as Y,Fa as Z,Ha as _,ks as a,rs as b,hs as c,ms as d,Ss as e,Je as f,We as g,As as h,ke as i,Ye as j,He as k,De as l,zs as m,es as n,$e as o,Rs as p,Ee as q,Hi as r,vs as s,os as t,us as u,gs as v,Es as w,Qe as x,Ge as y,Ms as z};