dev-process-kit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,629 @@
1
+ import{q as le,ag as ae,a8 as h,ad as f,ae as b,ab as p,ai as R,a7 as se,aa as C,a9 as x,aj as de,R as L,V as pe,a1 as a,a2 as ce,a0 as u,$ as ge,T as Q,av as ue}from"./shared-RRxRtPfs.js";import{c as N}from"./shared-ml5h7U5L.js";const he=ae("kind",[h({kind:R("option"),optionId:f(p(),b(1))}),h({kind:R("free"),text:p()}),h({kind:R("clear")})]),m={ANSWER_QUESTION:le("ANSWER_QUESTION","question",he)},q=(t,e)=>({type:"ANSWER_QUESTION",target:{type:"question",id:t},payload:e}),fe=h({id:f(p(),b(1)),label:f(p(),b(1))}),be=h({id:f(p(),b(1)),ref:x(f(p(),b(1))),title:f(p(),b(1)),description:x(p()),note:x(p()),options:x(C(fe),[]),freeText:x(de(),!0)}),O=h({title:x(p(),""),questions:C(be)}),_=t=>{const e=se(O,t),r=new Set,i=e.questions.map((o,n)=>{if(r.has(o.id))throw new Error(`duplicate question id: ${o.id}`);r.add(o.id);const s=new Set;for(const l of o.options){if(s.has(l.id))throw new Error(`duplicate option id: ${l.id} in question ${o.id}`);s.add(l.id)}return{id:o.id,ref:o.ref??`Q${n+1}`,title:o.title,description:o.description??null,note:o.note??null,options:o.options,freeText:o.freeText}});return{title:e.title,questions:i,answers:{}}},B=()=>({title:"",questions:[],answers:{}}),c=(t,e)=>t.questions.find(r=>r.id===e),xe=(t,e)=>c(t,e)?.ref??e,E=(t,e)=>{const r=c(t,e);return r?`${r.ref} \xB7 ${r.title}`:e},w=(t,e)=>e?e.kind==="option"?t.options.find(r=>r.id===e.optionId)?.label??"":e.text.trim():"",y=(t,e)=>w(t,e)!=="",G=t=>{let e="";for(let r=t+1;r>0;r=Math.floor((r-1)/26))e=String.fromCharCode(97+(r-1)%26)+e;return e},U=t=>({total:t.questions.length,answered:t.questions.filter(e=>y(e,t.answers[e.id])).length}),$=(t,e,r)=>{const i=t.answers[e];if(r===null){if(i===void 0)return t;const o={...t.answers};return delete o[e],{...t,answers:o}}return i?.kind===r.kind&&(i.kind==="option"&&r.kind==="option"&&i.optionId===r.optionId||i.kind==="free"&&r.kind==="free"&&i.text===r.text)?t:{...t,answers:{...t.answers,[e]:r}}},H=(t,e)=>{if(e.type!=="ANSWER_QUESTION")return null;const r=c(t,e.target.id);if(!r)return null;const i=L(m.ANSWER_QUESTION,e);return i.kind==="clear"?$(t,r.id,null):i.kind==="option"?r.options.some(o=>o.id===i.optionId)?$(t,r.id,{kind:"option",optionId:i.optionId}):null:$(t,r.id,{kind:"free",text:i.text})},M=t=>t.title===""?"Visually Grill":t.title,F=(t,e)=>{switch(e.type){case"question":return E(t,e.id);case"page":return"\u30DA\u30FC\u30B8\u5168\u4F53";default:return e.id}},ke=(t,e)=>{const r=L(m.ANSWER_QUESTION,e);return r.kind==="clear"?{title:"\u56DE\u7B54\u3092\u30AF\u30EA\u30A2",tone:"delete"}:r.kind==="option"?{title:"\u56DE\u7B54",tone:"update",body:`\u2192 \u300C${c(t,e.target.id)?.options.find(o=>o.id===r.optionId)?.label??r.optionId}\u300D`}:{title:"\u81EA\u7531\u8A18\u8FF0\u3067\u56DE\u7B54",tone:"update",body:`\u2192 \u300C${r.text.slice(0,120)}\u300D`}},W=(t,e,r)=>{let i;try{i=ke(r??e,t)}catch{i={title:t.type,tone:"meta"}}return{title:i.title,targetLabel:F(e,t.target),tone:i.tone,...i.body===void 0?{}:{summary:i.body}}},j=t=>`${t.type} ${pe(t.target)} ${JSON.stringify(t.payload)}`,P=t=>t.questions.map(e=>({value:`question:${e.id}`,label:E(t,e.id),group:"\u8CEA\u554F"})),V=(t,e)=>{const r=e.question;if(r!==void 0&&c(t,r))return e;const i=t.questions[0];return i===void 0?e:{...e,question:i.id}},D=(t,e)=>{const r=e.question;return r!==void 0&&c(t,r)?r:t.questions[0]?.id??null},ve=(t,e)=>{const r=t.questions,i=r.findIndex(n=>n.id===e);return(i===-1?r:[...r.slice(i+1),...r.slice(0,i)]).find(n=>!y(n,t.answers[n.id]))?.id??null},me=(t,e,r)=>{const i=e.answers[t.id];return{id:t.id,ref:t.ref,title:t.title,description:t.description,note:t.note,open:t.id===r,answered:w(t,i)!=="",summary:w(t,i),choices:t.options.map((o,n)=>({id:o.id,letter:G(n),label:o.label,checked:i?.kind==="option"&&i.optionId===o.id})),draft:i?.kind==="free"?i.text:"",freeSelected:i?.kind==="free",allowFreeText:t.freeText}},K=(t,e)=>{const r=D(t,e);return{questions:t.questions.map(i=>me(i,t,r))}},Y=t=>{const e=U(t);return{progress:`\u56DE\u7B54\u6E08\u307F ${e.answered} / ${e.total}`,answered:e.answered,total:e.total}},J=(t,e)=>{switch(e.type){case"question":return c(t,e.id)!==void 0;case"page":return!0;default:return!1}},X={name:"grill",label:"Visually Grill",parseBase:_,emptyBase:B,actions:m,apply:H,hasTarget:J,describe:W,serialize:j,resolveNavigation:V,commentTargets:t=>P(t),title:M},k="data-grill-questions",we=t=>{const e=[t];for(const r of t.querySelectorAll("*"))r.shadowRoot&&e.push(r.shadowRoot);return e},Z=(t,e,r)=>{const i=r.question??e.questions[0]?.id??null,o=new Map(e.questions.map(s=>[s.ref,s])),n=[];for(const s of we(t))for(const l of s.querySelectorAll(`[${k}]`)){const g=l.getAttribute(k)??"";for(const S of g.split(/\s+/)){if(S==="")continue;const d=o.get(S);d&&n.push({index:n.length,target:l,questionId:d.id,ref:d.ref,title:d.title,answered:y(d,e.answers[d.id]),open:d.id===i})}}return n},ee=(t,e)=>{const r=t.getBoundingClientRect(),i=new Map;e.forEach((n,s)=>{const l=t.querySelector(`[data-label="${s}"]`);if(!l)return;const g=i.get(n.target)??[];g.push(l),i.set(n.target,g)});const o=new Map;for(const[n,s]of i){const l=n.getBoundingClientRect(),g=l.width>0||l.height>0,d=o.get(n)??ye(n,t);o.set(n,d);const A=l.bottom>r.top&&l.top<r.bottom&&l.right>r.left&&l.left<r.right,I=l.bottom>d.top&&l.top<d.bottom;s.forEach((v,ie)=>{if(v.dataset.visible=String(g&&A&&I),!g||!A||!I)return;const T=v.offsetWidth,z=v.offsetHeight,oe=l.right-r.left-T+8-(s.length-1-ie)*(T+5),ne=l.top-r.top-z/2;v.style.transform=`translate(${N(oe,0,Math.max(0,t.clientWidth-T))}px, ${N(ne,0,Math.max(0,t.clientHeight-z))}px)`})}},ye=(t,e)=>{const r=t.getRootNode(),i=r instanceof ShadowRoot?r.host:null,o=i?.shadowRoot?.querySelector(".diagram-canvas")??null;return o instanceof Element?o.getBoundingClientRect():i instanceof Element?i.getBoundingClientRect():e.getBoundingClientRect()},$e=(t,e)=>a`
2
+ <div class="grill-list">
3
+ ${t.questions.length===0?a`<p class="grill-empty">該当する質問はありません。</p>`:ce(t.questions,r=>r.id,r=>Se(r,e))}
4
+ </div>
5
+ `,Se=(t,e)=>a`
6
+ <section class="grill-question" data-question=${t.id} data-answered=${String(t.answered)}>
7
+ <button
8
+ class="grill-heading"
9
+ type="button"
10
+ aria-expanded=${t.open?"true":"false"}
11
+ aria-controls=${`grill-body-${t.id}`}
12
+ @click=${()=>e.open(t.id)}
13
+ >
14
+ <span class="grill-ref">${t.ref}</span>
15
+ <span class="grill-heading-text">
16
+ <strong>${t.title}</strong>
17
+ ${!t.open&&t.answered?a`<span class="grill-summary">${t.summary}</span>`:u}
18
+ </span>
19
+ <span class="grill-chevron" aria-hidden="true">${t.open?"\u2212":"+"}</span>
20
+ </button>
21
+ ${t.open?a`<div class="grill-body" id=${`grill-body-${t.id}`}>
22
+ ${t.description?a`<p class="grill-description">${t.description}</p>`:u}
23
+ ${t.note?a`<p class="grill-note">${t.note}</p>`:u}
24
+ <div class="grill-choices" role="radiogroup" aria-label=${t.title}>
25
+ ${t.choices.map(r=>Te(t.id,r,e))}
26
+ ${t.allowFreeText?a`<label class="grill-choice grill-choice--free" data-free=${String(t.freeSelected)}>
27
+ <input
28
+ type="radio"
29
+ name=${`grill-${t.id}`}
30
+ value="__free"
31
+ .checked=${t.freeSelected}
32
+ @change=${()=>e.answer(t.id,{kind:"free",text:""})}
33
+ />
34
+ <span class="grill-choice-text">自由記述</span>
35
+ </label>`:u}
36
+ </div>
37
+ ${t.allowFreeText?a`<textarea
38
+ class="dpk-textarea grill-free"
39
+ data-free-text=${t.id}
40
+ aria-label=${`${t.ref} \u306E\u81EA\u7531\u8A18\u8FF0`}
41
+ placeholder="回答を入力…(⌘/Ctrl+Enter で次へ)"
42
+ .value=${t.draft}
43
+ ?hidden=${!t.freeSelected}
44
+ @input=${r=>{const i=r.currentTarget;i instanceof HTMLTextAreaElement&&e.answer(t.id,{kind:"free",text:i.value})}}
45
+ @keydown=${r=>{r.isComposing||!(r.metaKey||r.ctrlKey)||r.key!=="Enter"||(r.preventDefault(),e.next(t.id))}}
46
+ ></textarea>`:u}
47
+ ${t.answered?a`<button
48
+ type="button"
49
+ class="grill-clear"
50
+ @click=${()=>e.answer(t.id,{kind:"clear"})}
51
+ >
52
+ 回答をクリア
53
+ </button>`:u}
54
+ </div>`:u}
55
+ </section>
56
+ `,Te=(t,e,r)=>a`
57
+ <label class="grill-choice" data-choice=${e.id}>
58
+ <input
59
+ type="radio"
60
+ name=${`grill-${t}`}
61
+ value=${e.id}
62
+ .checked=${e.checked}
63
+ @change=${()=>r.answer(t,{kind:"option",optionId:e.id})}
64
+ />
65
+ <span class="grill-choice-text">
66
+ <span class="grill-letter">(${e.letter})</span>
67
+ <span>${e.label}</span>
68
+ </span>
69
+ </label>
70
+ `,Re=ge`
71
+ .dpk-main {
72
+ order: 1;
73
+ }
74
+
75
+ /* The shell's sidebar becomes a right-hand rail, keeping its width and scroll. */
76
+ .dpk-sidebar {
77
+ order: 2;
78
+ width: 336px;
79
+ display: flex;
80
+ flex-direction: column;
81
+ gap: 0;
82
+ padding: 0;
83
+ border-right: 0;
84
+ border-left: 1px solid var(--dpk-rule);
85
+ }
86
+
87
+ /* The header reserves room for the corner button, exactly like the review
88
+ button in the other templates. */
89
+ .grill-panel {
90
+ display: flex;
91
+ flex-direction: column;
92
+ flex: 1;
93
+ min-height: 0;
94
+ }
95
+
96
+ .grill-tab-panel {
97
+ display: flex;
98
+ flex-direction: column;
99
+ flex: 1;
100
+ min-height: 0;
101
+ overflow: auto;
102
+ }
103
+
104
+ .grill-tab-panel[hidden],
105
+ .dpk-sidebar[hidden] {
106
+ display: none;
107
+ }
108
+
109
+ .grill-tab-panel dpk-component-comment-panel {
110
+ flex: 1;
111
+ }
112
+
113
+ /* ------------------------------------------------------- header control */
114
+
115
+ /*
116
+ * The one control the reader always needs: the questions. It sits where the
117
+ * other templates put their review button, and folds the question column away
118
+ * so the diagrams get the width back.
119
+ */
120
+ .grill-toggle {
121
+ position: fixed;
122
+ top: 10px;
123
+ right: 16px;
124
+ z-index: 60;
125
+ display: inline-flex;
126
+ align-items: center;
127
+ justify-content: center;
128
+ width: 38px;
129
+ height: 38px;
130
+ padding: 0;
131
+ border: 1px solid var(--dpk-rule-strong);
132
+ border-radius: 999px;
133
+ background: var(--dpk-paper-raised);
134
+ color: var(--dpk-ink-soft);
135
+ font-size: 16.5px;
136
+ font-weight: 650;
137
+ line-height: 1;
138
+ box-shadow: var(--dpk-shadow);
139
+ cursor: pointer;
140
+ transition:
141
+ color 160ms ease,
142
+ background 160ms ease,
143
+ border-color 160ms ease,
144
+ box-shadow 160ms ease,
145
+ transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
146
+ }
147
+
148
+ .grill-toggle:hover {
149
+ color: var(--dpk-ink);
150
+ transform: translateY(-2px) scale(1.05);
151
+ box-shadow: var(--dpk-shadow-lg);
152
+ }
153
+
154
+ .grill-toggle:active {
155
+ transform: translateY(0) scale(0.97);
156
+ box-shadow: var(--dpk-shadow-xs);
157
+ }
158
+
159
+ .grill-toggle:focus-visible {
160
+ outline: none;
161
+ box-shadow: var(--dpk-focus);
162
+ }
163
+
164
+ .grill-toggle[aria-expanded='true'] {
165
+ color: var(--dpk-accent-ink);
166
+ border-color: transparent;
167
+ background: linear-gradient(135deg, var(--dpk-accent), #c23e12);
168
+ box-shadow: 0 2px 8px rgba(217, 73, 32, 0.3);
169
+ }
170
+
171
+ .grill-toggle-glyph {
172
+ display: block;
173
+ }
174
+
175
+ .grill-toggle-badge {
176
+ position: absolute;
177
+ top: -5px;
178
+ right: -5px;
179
+ min-width: 22px;
180
+ height: 18px;
181
+ padding: 0 5px;
182
+ border: 2px solid var(--dpk-paper-raised);
183
+ border-radius: 999px;
184
+ background: var(--dpk-paper-inset);
185
+ color: var(--dpk-ink-faint);
186
+ font-family: var(--dpk-mono);
187
+ font-size: 9px;
188
+ font-weight: 600;
189
+ font-variant-numeric: tabular-nums;
190
+ line-height: 14px;
191
+ /* The widest value is wider than the button it sits on: keep it on one line. */
192
+ white-space: nowrap;
193
+ text-align: center;
194
+ }
195
+
196
+ .grill-toggle[aria-expanded='true'] .grill-toggle-badge {
197
+ background: var(--dpk-paper-raised);
198
+ color: var(--dpk-ink-soft);
199
+ }
200
+
201
+ /* ------------------------------------------------------------- the list */
202
+
203
+ .grill-tabs {
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 2px;
207
+ flex-shrink: 0;
208
+ padding: 8px 10px;
209
+ border-bottom: 1px solid var(--dpk-rule);
210
+ background: var(--dpk-paper-raised);
211
+ }
212
+
213
+ .grill-tabs button {
214
+ display: inline-flex;
215
+ align-items: center;
216
+ gap: 5px;
217
+ padding: 5px 9px;
218
+ border: 1px solid transparent;
219
+ border-radius: var(--dpk-radius-xs);
220
+ background: transparent;
221
+ color: var(--dpk-ink-faint);
222
+ font-size: 11.5px;
223
+ cursor: pointer;
224
+ }
225
+
226
+ .grill-tabs button:hover {
227
+ background: var(--dpk-paper-inset);
228
+ color: var(--dpk-ink);
229
+ }
230
+
231
+ .grill-tabs button[aria-selected='true'] {
232
+ border-color: var(--dpk-rule-strong);
233
+ background: var(--dpk-paper-raised);
234
+ color: var(--dpk-ink);
235
+ font-weight: 600;
236
+ box-shadow: var(--dpk-shadow-xs);
237
+ }
238
+
239
+ .grill-count {
240
+ font-family: var(--dpk-mono);
241
+ font-size: 10px;
242
+ font-variant-numeric: tabular-nums;
243
+ color: var(--dpk-ink-faint);
244
+ }
245
+
246
+ .grill-list {
247
+ flex: 1;
248
+ min-height: 0;
249
+ overflow: auto;
250
+ overscroll-behavior: contain;
251
+ padding: 2px 10px 12px;
252
+ }
253
+
254
+ .grill-empty {
255
+ margin: 0;
256
+ padding: 22px 8px;
257
+ text-align: center;
258
+ font-size: 12px;
259
+ color: var(--dpk-ink-faint);
260
+ }
261
+
262
+ .grill-question {
263
+ border-bottom: 1px solid var(--dpk-rule);
264
+ }
265
+
266
+ .grill-question:last-child {
267
+ border-bottom: 0;
268
+ }
269
+
270
+ .grill-heading {
271
+ display: flex;
272
+ align-items: flex-start;
273
+ gap: 9px;
274
+ width: 100%;
275
+ padding: 11px 6px;
276
+ border: 0;
277
+ border-radius: var(--dpk-radius-xs);
278
+ background: none;
279
+ text-align: left;
280
+ cursor: pointer;
281
+ }
282
+
283
+ .grill-heading:hover {
284
+ background: var(--dpk-paper-sunken);
285
+ }
286
+
287
+ .grill-ref {
288
+ flex: 0 0 auto;
289
+ display: grid;
290
+ place-items: center;
291
+ min-width: 30px;
292
+ height: 22px;
293
+ padding: 0 6px;
294
+ border: 1px solid var(--dpk-rule-strong);
295
+ border-radius: 999px;
296
+ font-family: var(--dpk-mono);
297
+ font-size: 10px;
298
+ font-variant-numeric: tabular-nums;
299
+ color: var(--dpk-ink-faint);
300
+ }
301
+
302
+ .grill-question[data-answered='true'] .grill-ref {
303
+ border-color: transparent;
304
+ background: var(--dpk-green-soft);
305
+ color: var(--dpk-green);
306
+ font-weight: 600;
307
+ }
308
+
309
+ .grill-question:has(.grill-heading[aria-expanded='true']) .grill-ref {
310
+ border-color: transparent;
311
+ background: var(--dpk-accent-soft);
312
+ color: var(--dpk-accent);
313
+ font-weight: 600;
314
+ }
315
+
316
+ .grill-heading-text {
317
+ flex: 1;
318
+ min-width: 0;
319
+ }
320
+
321
+ .grill-heading-text strong {
322
+ display: block;
323
+ font-size: 12.5px;
324
+ font-weight: 600;
325
+ line-height: 1.6;
326
+ }
327
+
328
+ .grill-summary {
329
+ display: block;
330
+ margin-top: 4px;
331
+ font-size: 10.5px;
332
+ line-height: 1.6;
333
+ color: var(--dpk-green);
334
+ white-space: nowrap;
335
+ overflow: hidden;
336
+ text-overflow: ellipsis;
337
+ }
338
+
339
+ .grill-chevron {
340
+ flex: 0 0 auto;
341
+ width: 16px;
342
+ color: var(--dpk-ink-faint);
343
+ font-size: 12px;
344
+ line-height: 22px;
345
+ text-align: center;
346
+ }
347
+
348
+ .grill-body {
349
+ padding: 0 6px 13px 45px;
350
+ }
351
+
352
+ .grill-description {
353
+ margin: 0 0 8px;
354
+ font-size: 11.5px;
355
+ line-height: 1.85;
356
+ color: var(--dpk-ink-soft);
357
+ }
358
+
359
+ .grill-note {
360
+ margin: 0 0 10px;
361
+ padding: 7px 10px;
362
+ border-left: 2px solid var(--dpk-amber);
363
+ border-radius: 0 var(--dpk-radius-xs) var(--dpk-radius-xs) 0;
364
+ background: var(--dpk-amber-soft);
365
+ font-size: 11px;
366
+ line-height: 1.7;
367
+ color: var(--dpk-ink-soft);
368
+ }
369
+
370
+ .grill-choices {
371
+ display: grid;
372
+ gap: 6px;
373
+ }
374
+
375
+ .grill-choice {
376
+ display: flex;
377
+ align-items: flex-start;
378
+ gap: 8px;
379
+ padding: 8px 9px;
380
+ border: 1px solid var(--dpk-rule);
381
+ border-radius: var(--dpk-radius-sm);
382
+ background: var(--dpk-paper);
383
+ font-size: 11.5px;
384
+ line-height: 1.7;
385
+ cursor: pointer;
386
+ }
387
+
388
+ .grill-choice:hover {
389
+ border-color: var(--dpk-rule-strong);
390
+ }
391
+
392
+ .grill-choice:has(input:checked) {
393
+ border-color: color-mix(in srgb, var(--dpk-green) 45%, transparent);
394
+ background: var(--dpk-green-soft);
395
+ }
396
+
397
+ .grill-choice input {
398
+ flex: 0 0 auto;
399
+ margin: 3px 0 0;
400
+ accent-color: var(--dpk-green);
401
+ }
402
+
403
+ .grill-choice-text {
404
+ display: flex;
405
+ gap: 7px;
406
+ min-width: 0;
407
+ }
408
+
409
+ .grill-letter {
410
+ flex: 0 0 auto;
411
+ font-family: var(--dpk-mono);
412
+ font-size: 10px;
413
+ line-height: 1.9;
414
+ color: var(--dpk-green);
415
+ }
416
+
417
+ .grill-free {
418
+ margin-top: 7px;
419
+ min-height: 76px;
420
+ max-height: 240px;
421
+ }
422
+
423
+ .grill-clear {
424
+ margin-top: 10px;
425
+ padding: 0;
426
+ border: 0;
427
+ background: none;
428
+ color: var(--dpk-ink-faint);
429
+ font-size: 10.5px;
430
+ text-decoration: underline;
431
+ text-underline-offset: 3px;
432
+ cursor: pointer;
433
+ }
434
+
435
+ .grill-clear:hover {
436
+ color: var(--dpk-ink);
437
+ }
438
+
439
+ .grill-footer {
440
+ flex-shrink: 0;
441
+ padding: 10px 12px;
442
+ border-top: 1px solid var(--dpk-rule);
443
+ background: var(--dpk-paper-raised);
444
+ }
445
+
446
+ .grill-copy {
447
+ width: 100%;
448
+ }
449
+
450
+ /* The copy button reports the outcome, so a click is never silent. */
451
+ .grill-copy[data-status='copied'] {
452
+ border-color: transparent;
453
+ background: var(--dpk-green);
454
+ color: var(--dpk-accent-ink);
455
+ }
456
+
457
+ .grill-copy[data-status='copied']:hover:not([disabled]) {
458
+ border-color: transparent;
459
+ background: color-mix(in srgb, var(--dpk-green) 85%, #000);
460
+ }
461
+
462
+ .grill-copy[data-status='failed'] {
463
+ border-color: transparent;
464
+ background: var(--dpk-amber);
465
+ color: var(--dpk-accent-ink);
466
+ }
467
+
468
+ .grill-copy[data-status='failed']:hover:not([disabled]) {
469
+ border-color: transparent;
470
+ background: color-mix(in srgb, var(--dpk-amber) 85%, #000);
471
+ }
472
+
473
+ /* Announced to assistive tech; the button label change alone is easy to miss. */
474
+ .grill-sr {
475
+ position: absolute;
476
+ width: 1px;
477
+ height: 1px;
478
+ margin: -1px;
479
+ padding: 0;
480
+ overflow: hidden;
481
+ clip-path: inset(50%);
482
+ white-space: nowrap;
483
+ border: 0;
484
+ }
485
+
486
+ /* -------------------------------------------------- main area and badges */
487
+
488
+ .grill-stage {
489
+ position: relative;
490
+ min-width: 0;
491
+ }
492
+
493
+ .grill-labels {
494
+ position: absolute;
495
+ inset: 0;
496
+ z-index: 3;
497
+ overflow: hidden;
498
+ pointer-events: none;
499
+ }
500
+
501
+ .grill-label {
502
+ position: absolute;
503
+ display: inline-flex;
504
+ align-items: center;
505
+ justify-content: center;
506
+ min-width: 30px;
507
+ height: 22px;
508
+ padding: 0 7px;
509
+ border: 2px solid var(--dpk-paper-raised);
510
+ border-radius: 999px;
511
+ background: var(--dpk-accent);
512
+ color: var(--dpk-accent-ink);
513
+ font-family: var(--dpk-mono);
514
+ font-size: 10px;
515
+ font-weight: 600;
516
+ font-variant-numeric: tabular-nums;
517
+ box-shadow: var(--dpk-shadow-xs);
518
+ cursor: pointer;
519
+ pointer-events: auto;
520
+ }
521
+
522
+ .grill-label[data-visible='false'] {
523
+ visibility: hidden;
524
+ }
525
+
526
+ .grill-label:hover {
527
+ background: color-mix(in srgb, var(--dpk-accent) 80%, #000);
528
+ }
529
+
530
+ .grill-label[data-answered='true'] {
531
+ background: var(--dpk-green);
532
+ }
533
+
534
+ .grill-label[aria-pressed='true'] {
535
+ box-shadow:
536
+ 0 0 0 2px color-mix(in srgb, var(--dpk-accent) 45%, transparent),
537
+ var(--dpk-shadow-xs);
538
+ }
539
+
540
+ .grill-label:focus-visible {
541
+ outline: none;
542
+ box-shadow: var(--dpk-focus);
543
+ }
544
+ `;class te extends Q{constructor(){super(),this.definition=X,this.#o=[],this.#n=!1,this.#l=null,this.#a=null,this.#r=null,this.#i="idle",this.#t=null,this.#e=()=>{this.#n||(this.#n=!0,requestAnimationFrame(()=>{this.#n=!1;const e=this.renderRoot.querySelector(".grill-labels");e&&ee(e,this.#o)}))},this.tab="questions",this.folded=!1}static{this.styles=[Q.styles,Re]}static{this.properties={tab:{state:!0},folded:{state:!0}}}#o;#n;#l;#a;#r;#i;#t;connectedCallback(){super.connectedCallback(),document.addEventListener("scroll",this.#e,!0),window.addEventListener("resize",this.#e),this.addEventListener("dpk-diagram-view",this.#e)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("scroll",this.#e,!0),window.removeEventListener("resize",this.#e),this.removeEventListener("dpk-diagram-view",this.#e),this.#r?.disconnect(),this.#r=null,this.#t!==null&&clearTimeout(this.#t),this.#t=null}renderRegions(e){return this.#o=Z(this,e.state,e.navigation),{header:this.#p(e),main:this.#u(e,this.#o),sidebar:this.#c(e),sidebarHidden:this.folded}}updated(){super.updated(),this.#k(),this.#e(),this.#v();const e=this.#a;e!==null&&(this.#a=null,this.renderRoot.querySelector(`[data-free-text="${e}"]`)?.focus())}get integratedReview(){return!0}requestComment(e){this.tab="review",this.folded=!1,super.requestComment(e)}#s(e,r){this.tab="questions",this.folded=!1,this.#l=null,e.navigate({question:r})}#p(e){const r=Y(e.state),o=`${this.folded?"\u8CEA\u554F / Review \u3092\u3072\u3089\u304F":"\u8CEA\u554F / Review \u3092\u305F\u305F\u3080"}\uFF08${r.progress}\uFF09`;return a`
545
+ <button
546
+ type="button"
547
+ class="grill-toggle"
548
+ aria-expanded=${this.folded?"false":"true"}
549
+ aria-label=${o}
550
+ title=${o}
551
+ @click=${()=>this.folded=!this.folded}
552
+ >
553
+ <span class="grill-toggle-glyph" aria-hidden="true">?</span>
554
+ <span class="grill-toggle-badge" aria-hidden="true">${r.answered} / ${r.total}</span>
555
+ </button>
556
+ `}#c(e){const r=K(e.state,e.navigation),i=this.#i==="copied"?"\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F":this.#i==="failed"?"\u30B3\u30D4\u30FC\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F":"\u56DE\u7B54\u30FBReview \u3092\u307E\u3068\u3081\u3066\u30B3\u30D4\u30FC";return a`
557
+ <div class="grill-panel">
558
+ <div class="grill-tabs" role="tablist" aria-label="質問 / Review">
559
+ ${["questions","review"].map(o=>a`
560
+ <button
561
+ type="button"
562
+ role="tab"
563
+ id=${`grill-tab-${o}`}
564
+ data-tab=${o}
565
+ aria-controls=${`grill-panel-${o}`}
566
+ aria-selected=${String(this.tab===o)}
567
+ tabindex=${this.tab===o?0:-1}
568
+ @click=${()=>this.tab=o}
569
+ @keydown=${n=>this.#g(n)}
570
+ >
571
+ ${o==="questions"?"\u8CEA\u554F":"Review"}<span class="grill-count"
572
+ >${o==="questions"?e.state.questions.length:e.actions.length}</span
573
+ >
574
+ </button>
575
+ `)}
576
+ </div>
577
+ <div
578
+ class="grill-tab-panel"
579
+ id="grill-panel-questions"
580
+ role="tabpanel"
581
+ aria-labelledby="grill-tab-questions"
582
+ ?hidden=${this.tab!=="questions"}
583
+ >
584
+ ${$e(r,{open:o=>this.#s(e,o),answer:(o,n)=>this.#h(o,n),next:o=>this.#d(o)})}
585
+ </div>
586
+ <div
587
+ class="grill-tab-panel"
588
+ id="grill-panel-review"
589
+ role="tabpanel"
590
+ aria-labelledby="grill-tab-review"
591
+ ?hidden=${this.tab!=="review"}
592
+ >
593
+ ${this.renderReviewPanel(e)}
594
+ </div>
595
+ <div class="grill-footer">
596
+ <button
597
+ class="dpk-btn dpk-btn--accent grill-copy"
598
+ type="button"
599
+ data-status=${this.#i}
600
+ ?disabled=${e.actions.length===0}
601
+ @click=${()=>{this.#f()}}
602
+ >
603
+ ${i}
604
+ </button>
605
+ <span class="grill-sr" role="status">${this.#i==="idle"?"":i}</span>
606
+ </div>
607
+ </div>
608
+ `}#g(e){["ArrowLeft","ArrowRight","Home","End"].includes(e.key)&&(e.preventDefault(),this.tab=e.key==="Home"?"questions":e.key==="End"||this.tab==="questions"?"review":"questions",this.renderRoot.querySelector(`[data-tab="${this.tab}"]`)?.focus())}#u(e,r){return a`
609
+ <div class="grill-stage">
610
+ <slot name="main"></slot>
611
+ <div class="grill-labels">
612
+ ${r.map(i=>a`
613
+ <button
614
+ type="button"
615
+ class="grill-label"
616
+ data-label=${i.index}
617
+ data-answered=${String(i.answered)}
618
+ data-visible="false"
619
+ aria-pressed=${i.open?"true":"false"}
620
+ aria-label=${`${i.ref} \xB7 ${i.title}`}
621
+ title=${`${i.ref} \xB7 ${i.title}`}
622
+ @click=${()=>this.#s(e,i.questionId)}
623
+ >
624
+ ${i.ref}
625
+ </button>
626
+ `)}
627
+ </div>
628
+ </div>
629
+ `}#h(e,r){if(this.dispatch(q(e,r)).ok){if(r.kind==="option"){this.#d(e);return}r.kind==="free"&&r.text===""&&(this.#a=e)}}#d(e){const r=ve(this.derivation.state,e);r!==null&&this.navigate({question:r})}async#f(){const e=this.api.exportBrief();this.#b(await ue(e)?"copied":"failed")}#b(e){this.#i=e,this.requestUpdate(),this.#t!==null&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.#t=null,this.#i="idle",this.requestUpdate()},2400)}#x(){this.requestUpdate()}#k(){this.#r?.disconnect(),this.#r??=new MutationObserver(()=>{this.#x(),this.#e()}),this.#r.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[k]});for(const e of this.querySelectorAll("*"))e===this||!e.shadowRoot||this.#r.observe(e.shadowRoot,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[k]})}#e;#v(){const e=this.navigation.question??null;if(this.tab!=="questions"||this.folded||e===null||e===this.#l)return;this.#l=e;const r=this.renderRoot.querySelector(`[data-question="${e}"]`);r!==null&&typeof r.scrollIntoView=="function"&&r.scrollIntoView({block:"nearest"})}}const re=()=>{customElements.get("dpk-template-grill")||customElements.define("dpk-template-grill",te)},Ee=Object.freeze(Object.defineProperty({__proto__:null,DpkTemplateGrill:te,GRILL_QUESTIONS_ATTRIBUTE:k,answerCounts:U,answerQuestion:q,answerText:w,applyGrillAction:H,collectLabelBindings:Z,defineGrillElement:re,describeGrillAction:W,emptyGrillBase:B,findQuestion:c,grillActions:m,grillBaseSchema:O,grillCommentTargets:P,grillDefinition:X,grillHasTarget:J,grillTargetLabel:F,grillTitle:M,isAnswered:y,openQuestionId:D,optionLetter:G,parseGrillBase:_,positionLabels:ee,presentGrillHeader:Y,presentGrillPanel:K,questionLabel:E,questionRef:xe,resolveGrillNavigation:V,serializeGrillAction:j,withAnswer:$},Symbol.toStringTag,{value:"Module"}));export{re as d,Ee as i};
@@ -0,0 +1 @@
1
+ import{ak as s,al as n,au as o,ab as c}from"./shared-RRxRtPfs.js";const l=n({value:c()}),r=a=>t=>{if(!(t instanceof CustomEvent))return;const e=s(l,t.detail);e.success&&a(e.output.value)},u=a=>t=>{const e=o(t.target,HTMLSelectElement);e!==null&&a(e.value)};export{u as a,r as o};
@@ -0,0 +1 @@
1
+ function d(n){return n===null?1:n===void 0?2:0}function f(n,t){const e=d(n),r=d(t);return e<r?-1:e>r?1:e!==0?0:n<t?-1:n>t?1:0}function p(n,t,e){return e==="asc"?f(n,t):f(t,n)}function m(n,t,e){return n.slice().sort((r,i)=>{const s=e.length;for(let a=0;a<t.length;a++){const g=s>a?e[a]:e[s-1],c=t[a],o=typeof c=="function",l=p(o?c(r):r[c],o?c(i):i[c],g);if(l!==0)return l}return 0})}function v(n,t){return m(n,t,["asc"])}const u={kind:"idle"},h="text/plain",D=n=>`${n.type}:${n.id}`,k=(n,t)=>{const e=(n??"").trim();if(e.length===0)return null;const r=e.indexOf(":");if(r<0)return{type:t,id:e};const i=e.slice(0,r),s=e.slice(r+1);return i.length===0||s.length===0?null:{type:i,id:s}},y=(n,t)=>t<=n.top+n.height/2?"before":"after";class T{#i;#t=u;#r;constructor(t){this.#i=t,t.addController(this)}hostDisconnected(){this.reset()}get state(){return this.#t}get item(){return this.#t.kind==="dragging"?this.#t.item:null}isDragging(t,e){const r=this.item;return r!==null&&r.type===t&&r.id===e}isOver(t){return this.#t.kind!=="idle"&&this.#t.over===t}reset(){clearTimeout(this.#r),this.#r=void 0,this.#e(u)}source(t){return{dragstart:e=>{e.dataTransfer&&(e.dataTransfer.setData(h,D(t)),e.dataTransfer.effectAllowed="move"),clearTimeout(this.#r),this.#r=setTimeout(()=>{this.#r=void 0,this.#e({kind:"dragging",item:t,over:null})},0)},dragend:()=>this.reset()}}target(t){return{dragenter:r=>{this.#s(t.accepts)&&(r.preventDefault(),this.#n(t.key))},dragover:r=>{this.#s(t.accepts)&&(r.preventDefault(),r.dataTransfer&&(r.dataTransfer.dropEffect="move"),this.#n(t.key))},dragleave:()=>{this.isOver(t.key)&&this.#n(null)},drop:r=>{r.preventDefault();const i=k(r.dataTransfer?.getData(h),t.accepts)??this.item;if(this.#e(u),!i||i.type!==t.accepts)return;const s=t.hovered?.(r)??null;t.onDrop({item:{type:t.accepts,id:i.id},hoveredId:s?.id??null,place:s?y(s.element.getBoundingClientRect(),r.clientY):"end",event:r})}}}#s(t){const e=this.item;return e===null||e.type===t}#n(t){const e=this.#t;if(e.kind==="dragging"){e.over!==t&&this.#e({...e,over:t});return}if(t===null){e.kind==="receiving"&&this.#e(u);return}(e.kind==="idle"||e.over!==t)&&this.#e({kind:"receiving",over:t})}#e(t){this.#t!==t&&(this.#t=t,this.#i.requestUpdate())}}export{T as D,v as s};