dev-process-kit 0.3.0-beta.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +8 -8
  2. package/dist/boards.js +1 -1
  3. package/dist/chunks/shared-BFraiskj.js +3662 -0
  4. package/dist/chunks/{shared-B-DAJvq3.js → shared-BYbcHniE.js} +34 -34
  5. package/dist/chunks/{shared-D2qgtKhc.js → shared-B_Tiv_T3.js} +1 -1
  6. package/dist/chunks/shared-BfByEotW.js +6322 -0
  7. package/dist/chunks/{shared-CPNa9lTa.js → shared-Bs2YYFvO.js} +1 -1
  8. package/dist/chunks/shared-D4PPk0Dk.js +1 -0
  9. package/dist/chunks/shared-DMksNmni.js +1 -0
  10. package/dist/chunks/{shared-Dgse8blZ.js → shared-DNsl9DK1.js} +1 -1
  11. package/dist/chunks/shared-DYDJzB79.js +5222 -0
  12. package/dist/chunks/shared-DegJ_tfw.js +767 -0
  13. package/dist/chunks/{shared-C7wOrDIL.js → shared-DqlTHpRQ.js} +1 -1
  14. package/dist/chunks/{shared-BdIN9A6O.js → shared-FMBoDqPg.js} +1 -1
  15. package/dist/chunks/shared-Ln6ei2B2.js +1864 -0
  16. package/dist/chunks/shared-RvLH2Fqp.js +1598 -0
  17. package/dist/chunks/{shared-BT5Ayp_z.js → shared-TtB-p2Zh.js} +1 -1
  18. package/dist/chunks/{shared-DOKOFdYm.js → shared-WtWbdwp_.js} +3 -3
  19. package/dist/chunks/{shared-CPwjSgu0.js → shared-epAjO2d1.js} +1 -1
  20. package/dist/components.js +1 -1
  21. package/dist/index.js +1 -1
  22. package/dist/views/delegation-poker.js +1 -1
  23. package/dist/views/plain.js +1 -1
  24. package/dist/views/prototype.js +1 -1
  25. package/dist/views/slides.js +1 -1
  26. package/dist/views/task-board.js +1 -1
  27. package/dist/views/usm.js +1 -1
  28. package/package.json +1 -1
  29. package/dist/chunks/shared-BTf38OnF.js +0 -1
  30. package/dist/chunks/shared-BXejn2ZQ.js +0 -4928
  31. package/dist/chunks/shared-CE8X9qCv.js +0 -1636
  32. package/dist/chunks/shared-CpJDPnHA.js +0 -573
  33. package/dist/chunks/shared-DgexE4u1.js +0 -1862
  34. package/dist/chunks/shared-DnJcdL52.js +0 -3586
  35. package/dist/chunks/shared-HdOOfyqP.js +0 -6208
  36. package/dist/chunks/shared-TrlnHjrJ.js +0 -1
@@ -1,573 +0,0 @@
1
- import{a as _}from"./shared-BdIN9A6O.js";import{a5 as N,au as R,av as f,aw as c,aa as v,ac as p,aM as G,ax as Y,ay as I,az as U,S as u,C as k,h as V,aH as x,ai as d,as as l,by as J,aY as W,b4 as Q,y as X,ah as Z,V as w}from"./shared-BXejn2ZQ.js";const m=N({en:{wholeDeck:"Whole deck",slideGroup:"Slide",outline:"Slides",previous:"Previous slide",next:"Next slide",position:(t,e)=>`Slide ${t} of ${e}`,commentOnSlide:"Comment on this slide",commentPlaceholder:"A question, or what should change (passed to the agent)",addComment:"Add comment",deleteComment:"Delete this comment",submitHint:"\u2318 / Ctrl + Enter",fullscreen:"Full screen",fullscreenHint:"\u2190 \u2192 to move \xB7 Esc to leave",noSlidesBefore:"There are no slides yet. Add them to ",noSlidesAfter:" in the base data."},ja:{wholeDeck:"\u30C7\u30C3\u30AD\u5168\u4F53",slideGroup:"\u30B9\u30E9\u30A4\u30C9",outline:"\u30B9\u30E9\u30A4\u30C9",previous:"\u524D\u306E\u30B9\u30E9\u30A4\u30C9",next:"\u6B21\u306E\u30B9\u30E9\u30A4\u30C9",position:(t,e)=>`${e} \u679A\u4E2D ${t} \u679A\u76EE`,commentOnSlide:"\u3053\u306E\u30B9\u30E9\u30A4\u30C9\u306B\u30B3\u30E1\u30F3\u30C8",commentPlaceholder:"\u8CEA\u554F\u3084\u3001\u5909\u3048\u3066\u307B\u3057\u3044\u3053\u3068\uFF08Agent \u306B\u6E21\u308B\uFF09",addComment:"\u30B3\u30E1\u30F3\u30C8\u3092\u8FFD\u52A0",deleteComment:"\u3053\u306E\u30B3\u30E1\u30F3\u30C8\u3092\u524A\u9664",submitHint:"\u2318 / Ctrl + Enter",fullscreen:"\u5168\u753B\u9762\u8868\u793A",fullscreenHint:"\u2190 \u2192 \u3067\u79FB\u52D5 \xB7 Esc \u3067\u623B\u308B",noSlidesBefore:"\u30B9\u30E9\u30A4\u30C9\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002base data \u306E ",noSlidesAfter:" \u306B\u8FFD\u52A0\u3057\u3066\u304F\u3060\u3055\u3044\u3002"}}),y=["title","section","content"],ee=f({id:G,layout:c(U(y),"content"),title:Y(p(),I(1)),subtitle:c(p(),""),points:c(v(p()),[])}),$=f({title:c(p(),""),slides:c(v(ee),[])}),S=t=>{const e=R($,t),i=new Set;for(const s of e.slides){if(i.has(s.id))throw new Error(`duplicate slide id: ${s.id}`);i.add(s.id)}return{title:e.title,slides:e.slides}},C=()=>({title:"",slides:[]}),r=(t,e)=>e===void 0?-1:t.slides.findIndex(i=>i.id===e),q=(t,e)=>t.slides[r(t,e)],T=t=>t.title===""?"Slides":t.title,h=(t,e)=>`${e+1}. ${t.title}`,E=(t,e,i)=>{switch(i.type){case"slide":{const s=r(e,i.id),n=e.slides[s];return n===void 0?i.id:h(n,s)}case"page":return t.wholeDeck;default:return i.id}},z=(t,e,i)=>({title:e.type,targetLabel:E(t,i,e.target),tone:"meta"}),A=t=>`${t.type} ${u(t.target)} ${JSON.stringify(t.payload)}`,D=(t,e)=>e.slides.map((i,s)=>({value:u({type:"slide",id:i.id}),label:h(i,s),group:t.slideGroup})),M=(t,e,i)=>{const s=r(e,i.slide),n=e.slides[s];return n===void 0?null:{value:u({type:"slide",id:n.id}),label:h(n,s),group:t.slideGroup}},H=(t,e)=>{const i=t.slides[r(t,e.slide)]??t.slides[0],s={...e};return i?s.slide=i.id:delete s.slide,s},F=(t,e)=>{const i=r(t,e.slide),s=i===-1?0:i,n=t.slides[s];return n===void 0?null:{slide:n,index:s,total:t.slides.length,previous:t.slides[s-1],next:t.slides[s+1]}},te=(t,e)=>t.filter(i=>i.type===k&&i.target.type==="slide"&&i.target.id===e).map(i=>({id:i.id,body:V(i)})).filter(i=>i.body!==""),L=(t,e)=>{switch(e.type){case"slide":return q(t,e.id)!==void 0;case"page":return!0;default:return!1}},O=t=>{const e=m(t);return{kind:"view",name:"slides",label:"Slides",addable:!1,parseBase:S,emptyBase:C,actions:{},apply:()=>null,hasTarget:L,describe:(i,s)=>z(e,i,s),serialize:A,resolveNavigation:H,navigationFor:(i,s)=>s.type==="slide"?{slide:s.id}:null,commentTargets:i=>D(e,i),currentTarget:(i,s)=>M(e,i,s),title:T}},ie={ArrowRight:"next",PageDown:"next",ArrowLeft:"previous",PageUp:"previous",Home:"first",End:"last"},P=t=>t.altKey===!0||t.ctrlKey===!0||t.metaKey===!0||t.shiftKey===!0?null:ie[t.key]??null,j=(t,e,i)=>{const s=t.slides.length-1;if(s<0)return;const n=Math.max(r(t,e),0),o={next:Math.min(n+1,s),previous:Math.max(n-1,0),first:0,last:s}[i];return t.slides[o]?.id},se=(t,e)=>{const{state:i,navigation:s}=t,n=s.slide;return l`
2
- <nav class="outline" aria-label=${e.outline}>
3
- <div class="outline-head">
4
- <span class="dpk-label">${e.outline}</span>
5
- <span class="dpk-label">${i.slides.length}</span>
6
- </div>
7
- <ol class="dpk-navlist outline-list">
8
- ${x(i.slides,o=>o.id,(o,a)=>{const g=o.id===n,b=t.commentCount({type:"slide",id:o.id});return l`
9
- <li class="outline-row" data-current=${String(g)} data-layout=${o.layout}>
10
- <a href=${t.hashFor({slide:o.id})} aria-current=${g?"page":d}>
11
- <span class="outline-index">${String(a+1).padStart(2,"0")}</span>
12
- <span class="outline-title">${o.title}</span>
13
- ${b>0?l`<span class="outline-note">${b}</span>`:d}
14
- </a>
15
- </li>
16
- `})}
17
- </ol>
18
- </nav>
19
- `},ne=(t,e,i)=>{const s=F(t.state,t.navigation);if(s===null)return l`<div class="deck">
20
- <p class="dpk-empty deck-empty">${e.noSlidesBefore}<code>slides</code>${e.noSlidesAfter}</p>
21
- </div>`;const{slide:n,index:o,total:a}=s;return l`
22
- <div class="deck">
23
- <div class="stage">${ae(n,o)}</div>
24
- <div class="dpk-toolbar deck-bar">
25
- <div class="deck-move">
26
- <button
27
- class="dpk-icon-btn deck-prev"
28
- type="button"
29
- aria-label=${e.previous}
30
- title=${e.previous}
31
- ?disabled=${s.previous===void 0}
32
- @click=${()=>i.onStep("previous")}
33
- >
34
- ${J()}
35
- </button>
36
- <span class="deck-counter" role="status" aria-label=${e.position(o+1,a)}>
37
- <strong>${o+1}</strong> / ${a}
38
- </span>
39
- <button
40
- class="dpk-icon-btn deck-next"
41
- type="button"
42
- aria-label=${e.next}
43
- title=${e.next}
44
- ?disabled=${s.next===void 0}
45
- @click=${()=>i.onStep("next")}
46
- >
47
- ${W()}
48
- </button>
49
- </div>
50
- <div class="deck-progress" aria-hidden="true">
51
- <span style=${`width:${(o+1)/a*100}%`}></span>
52
- </div>
53
- ${i.canFullscreen?l`<button
54
- class="dpk-btn deck-fullscreen"
55
- type="button"
56
- title=${e.fullscreenHint}
57
- @click=${i.onFullscreen}
58
- >
59
- ${Q()} ${e.fullscreen}
60
- </button>`:d}
61
- </div>
62
- ${oe(e,n,te(t.comments,n.id),i)}
63
- ${le(t.state,n.id)}
64
- </div>
65
- `},ae=(t,e)=>l`
66
- <article
67
- class="slide"
68
- data-layout=${t.layout}
69
- data-dpk-target=${u({type:"slide",id:t.id})}
70
- aria-roledescription="slide"
71
- aria-label=${`${e+1}. ${t.title}`}
72
- >
73
- <div class="slide-content">
74
- <h2 class="slide-title">${t.title}</h2>
75
- ${t.subtitle===""?d:l`<p class="slide-subtitle">${t.subtitle}</p>`}
76
- ${t.points.length===0?d:l`<ul class="slide-points">
77
- ${t.points.map(i=>l`<li>${i}</li>`)}
78
- </ul>`}
79
- <div class="slide-body"><slot name=${`preview:${t.id}`}></slot></div>
80
- </div>
81
- <span class="slide-number" aria-hidden="true">${e+1}</span>
82
- </article>
83
- `,oe=(t,e,i,s)=>{const n=s.draftFor(e.id),o=n.trim()!=="";return l`
84
- <section class="slide-comments" aria-label=${t.commentOnSlide}>
85
- ${i.length===0?d:l`<ul class="slide-comment-list">
86
- ${x(i,a=>a.id,a=>l`<li>
87
- <span class="slide-comment-body">${a.body}</span>
88
- <button
89
- class="dpk-icon-btn slide-comment-delete"
90
- type="button"
91
- aria-label=${t.deleteComment}
92
- title=${t.deleteComment}
93
- @click=${()=>s.onDeleteComment(a.id)}
94
- >
95
- ${X()}
96
- </button>
97
- </li>`)}
98
- </ul>`}
99
- <div class="slide-comment-form">
100
- <textarea
101
- class="dpk-textarea slide-comment-input"
102
- aria-label=${t.commentOnSlide}
103
- placeholder=${t.commentPlaceholder}
104
- .value=${n}
105
- @input=${a=>{a.currentTarget instanceof HTMLTextAreaElement&&s.onDraft(e.id,a.currentTarget.value)}}
106
- @keydown=${a=>{a.isComposing||a.key!=="Enter"||!(a.metaKey||a.ctrlKey)||(a.preventDefault(),o&&s.onComment(e.id))}}
107
- ></textarea>
108
- <div class="slide-comment-actions">
109
- <button
110
- class="dpk-btn dpk-btn--accent slide-comment-submit"
111
- type="button"
112
- ?disabled=${!o}
113
- @click=${()=>s.onComment(e.id)}
114
- >
115
- ${t.addComment}
116
- </button>
117
- <span class="slide-comment-hint">${t.submitHint}</span>
118
- </div>
119
- </div>
120
- </section>
121
- `},le=(t,e)=>{const i=t.slides.filter(s=>s.id!==e);return i.length===0?d:l`<div class="parked" aria-hidden="true">
122
- ${i.map(s=>l`<slot name=${`preview:${s.id}`}></slot>`)}
123
- </div>`},de=Z`
124
- /* ------------------------------------------------------------ outline */
125
-
126
- .outline-head {
127
- display: flex;
128
- justify-content: space-between;
129
- padding: 0 6px 8px;
130
- border-bottom: 1px solid var(--dpk-rule);
131
- margin-bottom: 6px;
132
- }
133
-
134
- .outline-row {
135
- position: relative;
136
- }
137
-
138
- .outline-row a {
139
- align-items: baseline;
140
- gap: 10px;
141
- padding: 7px 8px;
142
- }
143
-
144
- /* A section slide opens a chapter: it reads as a heading in the outline. */
145
- .outline-row[data-layout='section']:not(:first-child) {
146
- margin-top: 10px;
147
- }
148
-
149
- .outline-row[data-layout='section'] .outline-title,
150
- .outline-row[data-layout='title'] .outline-title {
151
- font-weight: 620;
152
- color: var(--dpk-ink);
153
- }
154
-
155
- .outline-index {
156
- flex: none;
157
- font-family: var(--dpk-mono);
158
- font-size: 10.5px;
159
- font-variant-numeric: tabular-nums;
160
- color: var(--dpk-ink-faint);
161
- }
162
-
163
- .outline-row[data-current='true'] .outline-index {
164
- color: var(--dpk-accent);
165
- }
166
-
167
- .outline-title {
168
- flex: 1;
169
- min-width: 0;
170
- }
171
-
172
- .outline-note {
173
- flex: none;
174
- min-width: 18px;
175
- padding: 1px 6px;
176
- border-radius: 999px;
177
- background: var(--dpk-accent-soft);
178
- color: var(--dpk-accent);
179
- font-family: var(--dpk-mono);
180
- font-size: 10px;
181
- text-align: center;
182
- }
183
-
184
- /* -------------------------------------------------------------- deck */
185
-
186
- .deck {
187
- display: grid;
188
- /* The column follows the main area, not the widest thing in it. */
189
- grid-template-columns: minmax(0, 1fr);
190
- gap: 14px;
191
- justify-items: center;
192
- }
193
-
194
- .deck-empty {
195
- display: block;
196
- max-width: none;
197
- margin: 48px auto;
198
- padding: 0;
199
- border: 0;
200
- border-radius: 0;
201
- background: transparent;
202
- color: var(--dpk-ink-faint);
203
- font-size: inherit;
204
- line-height: inherit;
205
- text-align: start;
206
- }
207
-
208
- /*
209
- * The work surface the slide is projected onto: a quiet dot lattice, sunken
210
- * a shade below the page, so the slide's own shadow has somewhere to land.
211
- */
212
- .stage {
213
- display: flex;
214
- justify-content: center;
215
- width: 100%;
216
- padding: 28px;
217
- border: 1px solid var(--dpk-rule);
218
- border-radius: var(--dpk-radius-xl);
219
- background: var(--dpk-dots), var(--dpk-paper-sunken);
220
- box-shadow: inset 0 1px 3px var(--dpk-shade-1);
221
- }
222
-
223
- /*
224
- * As wide as the column allows, but never taller than the window leaves room
225
- * for: the header, the bar and the comments beneath (the list at its full
226
- * height and the form) and the padding around them. The form stays on screen.
227
- */
228
- .slide {
229
- position: relative;
230
- width: min(100%, 1180px, max(420px, calc((100dvh - 340px) * 16 / 9)));
231
- aspect-ratio: 16 / 9;
232
- overflow: hidden;
233
- container-type: inline-size;
234
- border: 1px solid var(--dpk-rule);
235
- border-radius: var(--dpk-radius-lg);
236
- background: var(--dpk-paper-raised);
237
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
238
- }
239
-
240
- .slide-content {
241
- position: absolute;
242
- inset: 0;
243
- display: flex;
244
- flex-direction: column;
245
- gap: 2.2cqw;
246
- /* The bottom keeps the last line clear of the page number once it scrolls. */
247
- padding: 5.5cqw 6.5cqw 6cqw;
248
- overflow: auto;
249
- overflow-wrap: anywhere;
250
- font-size: 2.1cqw;
251
- line-height: 1.55;
252
- color: var(--dpk-ink-soft);
253
- }
254
-
255
- .slide-title {
256
- font-size: 3.6cqw;
257
- font-weight: 680;
258
- line-height: 1.2;
259
- letter-spacing: -0.015em;
260
- color: var(--dpk-ink);
261
- }
262
-
263
- .slide-subtitle {
264
- margin: 0;
265
- font-size: 2.4cqw;
266
- color: var(--dpk-ink-soft);
267
- }
268
-
269
- .slide-points {
270
- display: grid;
271
- gap: 1.3cqw;
272
- margin: 0;
273
- padding: 0;
274
- list-style: none;
275
- font-size: 2.5cqw;
276
- color: var(--dpk-ink);
277
- }
278
-
279
- .slide-points li {
280
- position: relative;
281
- padding-left: 2.6cqw;
282
- }
283
-
284
- .slide-points li::before {
285
- content: '';
286
- position: absolute;
287
- left: 0.2cqw;
288
- top: 0.62em;
289
- width: 0.9cqw;
290
- height: 0.9cqw;
291
- border-radius: 50%;
292
- background: linear-gradient(135deg, var(--dpk-accent-bright), var(--dpk-accent-strong));
293
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpk-accent) 14%, transparent);
294
- }
295
-
296
- .slide-body {
297
- flex: 1 1 auto;
298
- min-height: 0;
299
- }
300
-
301
- .slide-body ::slotted(*) {
302
- margin: 0;
303
- }
304
-
305
- /* Over the content, which may scroll beneath it: a backdrop keeps both legible. */
306
- .slide-number {
307
- position: absolute;
308
- right: 2cqw;
309
- bottom: 1.6cqw;
310
- z-index: 1;
311
- padding: 0.3cqw 0.7cqw;
312
- border-radius: 999px;
313
- background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
314
- font-family: var(--dpk-mono);
315
- font-size: 1.2cqw;
316
- font-variant-numeric: tabular-nums;
317
- color: var(--dpk-ink-faint);
318
- }
319
-
320
- /* The cover: large title, the subtitle beneath, an accent rule on the left. */
321
- /* \`safe\`: content taller than the slide starts at the top, where scrolling reaches it. */
322
- .slide[data-layout='title'] .slide-content {
323
- justify-content: safe center;
324
- padding-left: 9cqw;
325
- }
326
-
327
- .slide[data-layout='title'] .slide-content::before {
328
- content: '';
329
- position: absolute;
330
- left: 6.5cqw;
331
- top: 50%;
332
- width: 0.55cqw;
333
- height: 16cqw;
334
- border-radius: 999px;
335
- background: linear-gradient(180deg, var(--dpk-accent-bright), var(--dpk-accent-strong));
336
- box-shadow: 0 0 20px color-mix(in srgb, var(--dpk-accent) 35%, transparent);
337
- transform: translateY(-50%);
338
- }
339
-
340
- .slide[data-layout='title'] .slide-title {
341
- font-size: 5.6cqw;
342
- }
343
-
344
- .slide[data-layout='title'] .slide-body,
345
- .slide[data-layout='section'] .slide-body {
346
- flex: 0 0 auto;
347
- }
348
-
349
- /* A chapter divider: the title alone, on the accent tint. */
350
- .slide[data-layout='section'] {
351
- background: linear-gradient(135deg, var(--dpk-accent-soft), transparent 70%), var(--dpk-paper-raised);
352
- }
353
-
354
- .slide[data-layout='section'] .slide-content {
355
- justify-content: safe center;
356
- }
357
-
358
- .slide[data-layout='section'] .slide-title {
359
- font-size: 4.8cqw;
360
- }
361
-
362
- .slide[data-layout='section'] .slide-title::after {
363
- content: '';
364
- display: block;
365
- width: 7cqw;
366
- height: 0.5cqw;
367
- margin-top: 2.4cqw;
368
- border-radius: 999px;
369
- background: linear-gradient(90deg, var(--dpk-accent-bright), var(--dpk-accent-strong));
370
- }
371
-
372
- /* Full screen: the stage alone, the slide as large as the screen allows. */
373
- .stage:fullscreen {
374
- align-items: center;
375
- padding: 0;
376
- border: none;
377
- border-radius: 0;
378
- box-shadow: none;
379
- background: var(--dpk-dots), var(--dpk-paper-sunken);
380
- }
381
-
382
- .stage:fullscreen .slide {
383
- width: min(100vw, calc(100vh * 16 / 9));
384
- border: none;
385
- border-radius: 0;
386
- box-shadow: none;
387
- }
388
-
389
- /* ---------------------------------------------------------------- bar */
390
-
391
- .deck-bar {
392
- width: min(100%, 1180px);
393
- padding: 8px 12px;
394
- border: 1px solid var(--dpk-rule);
395
- border-radius: var(--dpk-radius-lg);
396
- background: var(--dpk-glass);
397
- backdrop-filter: blur(12px);
398
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
399
- }
400
-
401
- .deck-move {
402
- display: inline-flex;
403
- align-items: center;
404
- gap: 4px;
405
- }
406
-
407
- .deck-move .dpk-icon-btn {
408
- width: 30px;
409
- height: 30px;
410
- }
411
-
412
- .deck-counter {
413
- min-width: 54px;
414
- font-family: var(--dpk-mono);
415
- font-size: 12px;
416
- font-variant-numeric: tabular-nums;
417
- text-align: center;
418
- color: var(--dpk-ink-faint);
419
- }
420
-
421
- .deck-counter strong {
422
- color: var(--dpk-ink);
423
- font-weight: 600;
424
- }
425
-
426
- .deck-progress {
427
- flex: 1 1 80px;
428
- height: 4px;
429
- border-radius: 999px;
430
- background: var(--dpk-paper-inset);
431
- box-shadow: inset 0 1px 2px var(--dpk-shade-1);
432
- overflow: hidden;
433
- }
434
-
435
- .deck-progress span {
436
- display: block;
437
- height: 100%;
438
- border-radius: inherit;
439
- background: var(--dpk-accent);
440
- transition: width 200ms ease;
441
- }
442
-
443
- .deck-bar .dpk-btn svg {
444
- width: 14px;
445
- height: 14px;
446
- }
447
-
448
- /* ----------------------------------------------------------- comments */
449
-
450
- .slide-comments {
451
- display: grid;
452
- gap: 10px;
453
- width: min(100%, 1180px);
454
- padding: 14px;
455
- border: 1px solid var(--dpk-rule);
456
- border-radius: var(--dpk-radius-lg);
457
- background: var(--dpk-paper-raised);
458
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
459
- }
460
-
461
- /* About three short comments; more scroll inside the list, not the page. */
462
- .slide-comment-list {
463
- display: grid;
464
- align-content: start;
465
- gap: 6px;
466
- max-height: 96px;
467
- margin: 0;
468
- padding: 0;
469
- overflow-y: auto;
470
- overscroll-behavior: contain;
471
- list-style: none;
472
- }
473
-
474
- .slide-comment-list li {
475
- display: flex;
476
- align-items: flex-start;
477
- gap: 8px;
478
- padding: 6px 6px 6px 10px;
479
- border-radius: var(--dpk-radius-sm);
480
- background: var(--dpk-paper-sunken);
481
- font-size: 13px;
482
- line-height: 1.55;
483
- color: var(--dpk-ink);
484
- white-space: pre-wrap;
485
- overflow-wrap: anywhere;
486
- }
487
-
488
- .slide-comment-body {
489
- flex: 1;
490
- min-width: 0;
491
- }
492
-
493
- .slide-comment-delete {
494
- flex: none;
495
- width: 22px;
496
- height: 22px;
497
- opacity: 0.55;
498
- }
499
-
500
- .slide-comment-list li:hover .slide-comment-delete,
501
- .slide-comment-delete:focus-visible {
502
- opacity: 1;
503
- }
504
-
505
- .slide-comment-delete svg {
506
- width: 12px;
507
- height: 12px;
508
- }
509
-
510
- .slide-comment-form {
511
- display: grid;
512
- grid-template-columns: minmax(0, 1fr) auto;
513
- gap: 10px;
514
- align-items: start;
515
- }
516
-
517
- .slide-comment-input {
518
- height: 60px;
519
- min-height: 60px;
520
- resize: none;
521
- }
522
-
523
- .slide-comment-actions {
524
- display: grid;
525
- justify-items: end;
526
- gap: 6px;
527
- }
528
-
529
- .slide-comment-hint {
530
- font-family: var(--dpk-mono);
531
- font-size: 10.5px;
532
- color: var(--dpk-ink-faint);
533
- white-space: nowrap;
534
- }
535
-
536
- @media (max-width: 560px) {
537
- .slide-comment-body {
538
- flex: 1;
539
- min-width: 0;
540
- }
541
-
542
- .slide-comment-delete {
543
- flex: none;
544
- width: 22px;
545
- height: 22px;
546
- opacity: 0.55;
547
- }
548
-
549
- .slide-comment-list li:hover .slide-comment-delete,
550
- .slide-comment-delete:focus-visible {
551
- opacity: 1;
552
- }
553
-
554
- .slide-comment-delete svg {
555
- width: 12px;
556
- height: 12px;
557
- }
558
-
559
- .slide-comment-form {
560
- grid-template-columns: minmax(0, 1fr);
561
- }
562
- }
563
-
564
- .parked {
565
- display: none;
566
- }
567
-
568
- @media (prefers-reduced-motion: reduce) {
569
- .deck-progress span {
570
- transition: none;
571
- }
572
- }
573
- `,re='input, textarea, select, [contenteditable]:not([contenteditable="false"])',ce=t=>t instanceof HTMLElement&&(t.isContentEditable||t.matches(re));class B extends w{static{this.styles=[w.styles,_,de]}#e=new Map;#t={slide:"",count:0};definitionFor(e){return O(e)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.#n)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.#n)}renderRegions(e){const i=m(this.locale);return{sidebar:se(e,i),sidebarHidden:e.state.slides.length===0,main:ne(e,i,{canFullscreen:document.fullscreenEnabled===!0,draftFor:s=>this.#e.get(s)??"",onStep:s=>this.#i(s),onFullscreen:()=>this.#l(),onDraft:(s,n)=>this.#s(s,n),onComment:s=>this.#o(s),onDeleteComment:s=>this.removeAction(s)})}}updated(){super.updated(),this.#a()}#a(){const e=this.renderRoot.querySelector(".slide-comment-list"),i={slide:this.navigation.slide??"",count:e?.childElementCount??0},s=this.#t;this.#t=i,!(e===null||i.slide===s.slide&&i.count<=s.count)&&(e.scrollTop=e.scrollHeight)}#i(e){const i=j(this.derivation.state,this.navigation.slide,e);i!==void 0&&this.navigate({slide:i})}#s(e,i){const s=new Map(this.#e);i===""?s.delete(e):s.set(e,i),this.#e=s,this.requestUpdate()}#o(e){const i=(this.#e.get(e)??"").trim();if(i==="")return;this.dispatch({type:k,target:{type:"slide",id:e},payload:{body:i}}).ok&&this.#s(e,"")}#l(){const e=this.renderRoot.querySelector(".stage");!(e instanceof HTMLElement)||document.fullscreenElement!==null||e.requestFullscreen().catch(()=>{})}#n=e=>{if(e.defaultPrevented||this.hidden)return;const i=P(e);i===null||e.composedPath().some(ce)||(e.preventDefault(),this.#i(i))}}const K=()=>{customElements.get("dpk-view-slides")||customElements.define("dpk-view-slides",B)},pe=Object.freeze(Object.defineProperty({__proto__:null,DpkViewSlides:B,SLIDE_LAYOUTS:y,defineSlidesElement:K,describeSlidesAction:z,emptySlidesBase:C,findSlide:q,findSlideIndex:r,parseSlidesBase:S,resolveSlidesNavigation:H,serializeSlidesAction:A,slideKeyStep:P,slidePosition:F,slidesBaseSchema:$,slidesCommentTargets:D,slidesCurrentTarget:M,slidesDefinitionFor:O,slidesHasTarget:L,slidesMessages:m,slidesTargetLabel:E,slidesTitle:T,stepSlide:j},Symbol.toStringTag,{value:"Module"}));export{K as d,pe as i};