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

package/dist/chunks/shared-DegJ_tfw.js

@@ -0,0 +1,767 @@
+import{au as X,av as $,aw as p,aa as S,ac as u,aM as ee,ax as te,ay as ie,az as se,p as ne,a9 as ae,a5 as oe,S as g,C as E,h as re,aH as T,ai as d,as as r,by as de,aZ as le,b5 as ce,y as N,ah as pe,V as C}from"./shared-DYDJzB79.js";import{a as ue}from"./shared-FMBoDqPg.js";const P=["title","section","content"],he=$({id:ee,layout:p(se(P),"content"),title:te(u(),ie(1)),subtitle:p(u(),""),points:p(S(u()),[]),notes:p(u(),"")}),q=$({title:p(u(),""),slides:p(S(he),[])}),A=t=>{const e=X(q,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}},z=()=>({title:"",slides:[]}),l=(t,e)=>e===void 0?-1:t.slides.findIndex(i=>i.id===e),D=(t,e)=>t.slides[l(t,e)],c="SET_SLIDE_NOTES",me=ae({notes:u()}),b={[c]:ne(c,"slide",me)},H={setNotes:(t,e)=>({type:c,target:{type:"slide",id:t},payload:{notes:e}})},M=(t,e)=>{switch(e.type){case c:{if(e.target.type!=="slide")return null;const i=l(t,e.target.id);if(i===-1)return null;const s=b[c].parse(e);if(s===null)return null;const{notes:a}=s.payload;return{...t,slides:t.slides.map((n,o)=>o===i?{...n,notes:a}:n)}}default:return null}},v=oe({en:{wholeDeck:"Whole deck",slideGroup:"Slide",outline:"Slides",previous:"Previous slide",next:"Next slide",position:(t,e)=>`Slide ${t} of ${e}`,present:"Present",presentation:"Presentation",exitPresentation:"Exit presentation",speakerNotes:"Speaker notes",speakerNotesHint:"Only the presenter sees these. They are never projected.",speakerNotesPlaceholder:"What to say on this slide",saveNotes:"Save notes",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`,present:"\u30D7\u30EC\u30BC\u30F3",presentation:"\u30D7\u30EC\u30BC\u30F3\u8868\u793A",exitPresentation:"\u30D7\u30EC\u30BC\u30F3\u3092\u7D42\u4E86",speakerNotes:"\u30B9\u30D4\u30FC\u30AB\u30FC\u30CE\u30FC\u30C8",speakerNotesHint:"\u767A\u8868\u8005\u3060\u3051\u306B\u898B\u3048\u307E\u3059\u3002\u30B9\u30E9\u30A4\u30C9\u306B\u306F\u6295\u5F71\u3055\u308C\u307E\u305B\u3093\u3002",speakerNotesPlaceholder:"\u3053\u306E\u30B9\u30E9\u30A4\u30C9\u3067\u8A71\u3059\u3053\u3068",saveNotes:"\u30CE\u30FC\u30C8\u3092\u4FDD\u5B58",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"}}),f="present",k="1",m=t=>t[f]===k,O=t=>({[f]:t?k:null}),j=t=>t.title===""?"Slides":t.title,x=(t,e)=>`${e+1}. ${t.title}`,F=(t,e,i)=>{switch(i.type){case"slide":{const s=l(e,i.id),a=e.slides[s];return a===void 0?i.id:x(a,s)}case"page":return t.wholeDeck;default:return i.id}},L=(t,e,i)=>{const s=F(t,i,e.target);return e.type===c?{title:t.speakerNotes,targetLabel:s,tone:"update"}:{title:e.type,targetLabel:s,tone:"meta"}},_=t=>`${t.type} ${g(t.target)} ${JSON.stringify(t.payload)}`,K=(t,e)=>e.slides.map((i,s)=>({value:g({type:"slide",id:i.id}),label:x(i,s),group:t.slideGroup})),R=(t,e,i)=>{const s=l(e,i.slide),a=e.slides[s];return a===void 0?null:{value:g({type:"slide",id:a.id}),label:x(a,s),group:t.slideGroup}},B=(t,e)=>{const i=t.slides[l(t,e.slide)]??t.slides[0],s={...e};return i?s.slide=i.id:delete s.slide,(i===void 0||!m(e))&&delete s[f],s},w=(t,e)=>{const i=l(t,e.slide),s=i===-1?0:i,a=t.slides[s];return a===void 0?null:{slide:a,index:s,total:t.slides.length,previous:t.slides[s-1],next:t.slides[s+1]}},ge=(t,e)=>t.filter(i=>i.type===E&&i.target.type==="slide"&&i.target.id===e).map(i=>({id:i.id,body:re(i)})).filter(i=>i.body!==""),G=(t,e)=>{switch(e.type){case"slide":return D(t,e.id)!==void 0;case"page":return!0;default:return!1}},I=t=>{const e=v(t);return{kind:"view",name:"slides",label:"Slides",addable:!1,parseBase:A,emptyBase:z,actions:b,apply:M,hasTarget:G,describe:(i,s)=>L(e,i,s),serialize:_,resolveNavigation:B,navigationFor:(i,s)=>s.type==="slide"?{slide:s.id}:null,commentTargets:i=>K(e,i),currentTarget:(i,s)=>R(e,i,s),title:j}},fe={ArrowRight:"next",PageDown:"next",ArrowLeft:"previous",PageUp:"previous",Home:"first",End:"last"},U=t=>t.altKey===!0||t.ctrlKey===!0||t.metaKey===!0||t.shiftKey===!0?null:fe[t.key]??null,Y=(t,e,i)=>{const s=t.slides.length-1;if(s<0)return;const a=Math.max(l(t,e),0),n={next:Math.min(a+1,s),previous:Math.max(a-1,0),first:0,last:s}[i];return t.slides[n]?.id},be=(t,e)=>{const{state:i,navigation:s}=t,a=s.slide;return r`
+    <nav class="outline" aria-label=${e.outline}>
+      <div class="outline-head">
+        <span class="dpk-label">${e.outline}</span>
+        <span class="dpk-label">${i.slides.length}</span>
+      </div>
+      <ol class="dpk-navlist outline-list">
+        ${T(i.slides,n=>n.id,(n,o)=>{const h=n.id===a,y=t.commentCount({type:"slide",id:n.id});return r`
+              <li class="outline-row" data-current=${String(h)} data-layout=${n.layout}>
+                <a href=${t.hashFor({slide:n.id})} aria-current=${h?"page":d}>
+                  <span class="outline-index">${String(o+1).padStart(2,"0")}</span>
+                  <span class="outline-title">${n.title}</span>
+                  ${y>0?r`<span class="outline-note">${y}</span>`:d}
+                </a>
+              </li>
+            `})}
+      </ol>
+    </nav>
+  `},V=(t,e)=>r`
+  <article
+    class="slide"
+    data-layout=${t.layout}
+    data-dpk-target=${g({type:"slide",id:t.id})}
+    aria-roledescription="slide"
+    aria-label=${`${e+1}. ${t.title}`}
+  >
+    <div class="slide-content">
+      <h2 class="slide-title">${t.title}</h2>
+      ${t.subtitle===""?d:r`<p class="slide-subtitle">${t.subtitle}</p>`}
+      ${t.points.length===0?d:r`<ul class="slide-points">
+              ${t.points.map(i=>r`<li>${i}</li>`)}
+            </ul>`}
+      <div class="slide-body"><slot name=${`preview:${t.id}`}></slot></div>
+    </div>
+    <span class="slide-number" aria-hidden="true">${e+1}</span>
+  </article>
+`,W=(t,e)=>{const i=t.slides.filter(s=>s.id!==e);return i.length===0?d:r`<div class="parked" aria-hidden="true">
+    ${i.map(s=>r`<slot name=${`preview:${s.id}`}></slot>`)}
+  </div>`},J=(t,e)=>{const{position:i,onStep:s,prefix:a}=e;return r`<div class="${a}-move">
+    <button
+      class="dpk-icon-btn ${a}-prev"
+      type="button"
+      aria-label=${t.previous}
+      title=${t.previous}
+      ?disabled=${!i.hasPrevious}
+      @click=${()=>s("previous")}
+    >
+      ${de()}
+    </button>
+    <span class="deck-counter" role="status" aria-label=${t.position(i.index+1,i.total)}>
+      <strong>${i.index+1}</strong> / ${i.total}
+    </span>
+    <button
+      class="dpk-icon-btn ${a}-next"
+      type="button"
+      aria-label=${t.next}
+      title=${t.next}
+      ?disabled=${!i.hasNext}
+      @click=${()=>s("next")}
+    >
+      ${le()}
+    </button>
+  </div>`},ve=(t,e,i,s)=>e?r`<button class="dpk-btn ${s}" type="button" title=${t.fullscreenHint} @click=${i}>
+        ${ce()} ${t.fullscreen}
+      </button>`:d,ke=(t,e,i)=>{const s=w(t.state,t.navigation);if(s===null)return d;const{slide:a,index:n,total:o}=s,h=a.notes.trim();return r`
+    <div
+      class="presentation"
+      popover="manual"
+      role="dialog"
+      aria-modal="true"
+      aria-label=${e.presentation}
+      tabindex="-1"
+    >
+      <div class="presentation-stage">${V(a,n)}</div>
+      <div class="presentation-bar" role="group" aria-label=${e.presentation}>
+        ${J(e,{position:{index:n,total:o,hasPrevious:s.previous!==void 0,hasNext:s.next!==void 0},onStep:i.onStep,prefix:"presentation"})}
+        ${ve(e,i.canFullscreen,i.onFullscreen,"deck-fullscreen")}
+        <button class="dpk-btn presentation-exit" type="button" @click=${i.onExit}>
+          ${N()} ${e.exitPresentation}
+        </button>
+      </div>
+      ${h===""?d:r`<aside class="presentation-notes" aria-label=${e.speakerNotes}>
+              <p class="dpk-label">${e.speakerNotes}</p>
+              <p class="presentation-notes-body">${h}</p>
+            </aside>`}
+      ${W(t.state,a.id)}
+    </div>
+  `},xe=(t,e,i)=>{const s=i.textFor(e),a=s.trim()!==e.notes;return r`<section class="slide-notes" aria-label=${t.speakerNotes}>
+    <div class="slide-notes-head">
+      <span class="dpk-label">${t.speakerNotes}</span>
+      <span class="slide-notes-hint">${t.speakerNotesHint}</span>
+    </div>
+    <textarea
+      class="dpk-textarea slide-notes-input"
+      data-dpk-text-key=${`slide:${e.id}`}
+      aria-label=${t.speakerNotes}
+      placeholder=${t.speakerNotesPlaceholder}
+      .value=${s}
+      @input=${n=>{n.currentTarget instanceof HTMLTextAreaElement&&i.onDraft(e,n.currentTarget.value)}}
+      @keydown=${n=>{n.isComposing||n.key!=="Enter"||!(n.metaKey||n.ctrlKey)||(n.preventDefault(),a&&i.onSave(e.id))}}
+    ></textarea>
+    <div class="slide-notes-actions">
+      <span class="slide-notes-submit-hint">${t.submitHint}</span>
+      <button
+        class="dpk-btn dpk-btn--accent slide-notes-save"
+        type="button"
+        ?disabled=${!a}
+        @click=${()=>i.onSave(e.id)}
+      >
+        ${t.saveNotes}
+      </button>
+    </div>
+  </section>`},we=(t,e,i)=>{const s=w(t.state,t.navigation);if(s===null)return r`<div class="deck">
+      <p class="dpk-empty deck-empty">${e.noSlidesBefore}<code>slides</code>${e.noSlidesAfter}</p>
+    </div>`;const{slide:a,index:n,total:o}=s;return r`
+    <div class="deck">
+      <div class="stage">${V(a,n)}</div>
+      <div class="dpk-toolbar deck-bar">
+        ${J(e,{position:{index:n,total:o,hasPrevious:s.previous!==void 0,hasNext:s.next!==void 0},onStep:i.onStep,prefix:"deck"})}
+        <div class="deck-progress" aria-hidden="true">
+          <span style=${`width:${(n+1)/o*100}%`}></span>
+        </div>
+        <button class="dpk-btn deck-present" type="button" title=${e.fullscreenHint} @click=${i.onPresent}>
+          ${e.present}
+        </button>
+      </div>
+      ${xe(e,a,i.notes)}
+      ${ye(e,a,ge(t.comments,a.id),i)}
+      ${W(t.state,a.id)}
+    </div>
+  `},ye=(t,e,i,s)=>{const a=s.draftFor(e.id),n=a.trim()!=="";return r`
+    <section class="slide-comments" aria-label=${t.commentOnSlide}>
+      ${i.length===0?d:r`<ul class="slide-comment-list">
+              ${T(i,o=>o.id,o=>r`<li>
+                  <span class="slide-comment-body">${o.body}</span>
+                  <button
+                    class="dpk-icon-btn slide-comment-delete"
+                    type="button"
+                    aria-label=${t.deleteComment}
+                    title=${t.deleteComment}
+                    @click=${()=>s.onDeleteComment(o.id)}
+                  >
+                    ${N()}
+                  </button>
+                </li>`)}
+            </ul>`}
+      <div class="slide-comment-form">
+        <textarea
+          class="dpk-textarea slide-comment-input"
+          aria-label=${t.commentOnSlide}
+          placeholder=${t.commentPlaceholder}
+          .value=${a}
+          @input=${o=>{o.currentTarget instanceof HTMLTextAreaElement&&s.onDraft(e.id,o.currentTarget.value)}}
+          @keydown=${o=>{o.isComposing||o.key!=="Enter"||!(o.metaKey||o.ctrlKey)||(o.preventDefault(),n&&s.onComment(e.id))}}
+        ></textarea>
+        <div class="slide-comment-actions">
+          <button
+            class="dpk-btn dpk-btn--accent slide-comment-submit"
+            type="button"
+            ?disabled=${!n}
+            @click=${()=>s.onComment(e.id)}
+          >
+            ${t.addComment}
+          </button>
+          <span class="slide-comment-hint">${t.submitHint}</span>
+        </div>
+      </div>
+    </section>
+  `},$e=pe`
+  /* ------------------------------------------------------------ outline */
+
+  .outline-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 6px 8px;
+    border-bottom: 1px solid var(--dpk-rule);
+    margin-bottom: 6px;
+  }
+
+  .outline-row {
+    position: relative;
+  }
+
+  .outline-row a {
+    align-items: baseline;
+    gap: 10px;
+    padding: 7px 8px;
+  }
+
+  /* A section slide opens a chapter: it reads as a heading in the outline. */
+  .outline-row[data-layout='section']:not(:first-child) {
+    margin-top: 10px;
+  }
+
+  .outline-row[data-layout='section'] .outline-title,
+  .outline-row[data-layout='title'] .outline-title {
+    font-weight: 620;
+    color: var(--dpk-ink);
+  }
+
+  .outline-index {
+    flex: none;
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    font-variant-numeric: tabular-nums;
+    color: var(--dpk-ink-faint);
+  }
+
+  .outline-row[data-current='true'] .outline-index {
+    color: var(--dpk-accent);
+  }
+
+  .outline-title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .outline-note {
+    flex: none;
+    min-width: 18px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    text-align: center;
+  }
+
+  /* -------------------------------------------------------------- deck */
+
+  .deck {
+    display: grid;
+    /* The column follows the main area, not the widest thing in it. */
+    grid-template-columns: minmax(0, 1fr);
+    gap: 14px;
+    justify-items: center;
+  }
+
+  .deck-empty {
+    display: block;
+    max-width: none;
+    margin: 48px auto;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--dpk-ink-faint);
+    font-size: inherit;
+    line-height: inherit;
+    text-align: start;
+  }
+
+  /*
+   * The work surface the slide is projected onto: a quiet dot lattice, sunken
+   * a shade below the page, so the slide's own shadow has somewhere to land.
+   */
+  .stage {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 28px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-xl);
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 3px var(--dpk-shade-1);
+  }
+
+  /*
+   * As wide as the column allows, but never taller than the window leaves room
+   * for: the header, the bar and the comments beneath (the list at its full
+   * height and the form) and the padding around them. The form stays on screen.
+   */
+  .slide {
+    position: relative;
+    width: min(100%, 1180px, max(420px, calc((100dvh - 340px) * 16 / 9)));
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    container-type: inline-size;
+    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);
+  }
+
+  .slide-content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2.2cqw;
+    /* The bottom keeps the last line clear of the page number once it scrolls. */
+    padding: 5.5cqw 6.5cqw 6cqw;
+    overflow: auto;
+    overflow-wrap: anywhere;
+    font-size: 2.1cqw;
+    line-height: 1.55;
+    color: var(--dpk-ink-soft);
+  }
+
+  .slide-title {
+    font-size: 3.6cqw;
+    font-weight: 680;
+    line-height: 1.2;
+    letter-spacing: -0.015em;
+    color: var(--dpk-ink);
+  }
+
+  .slide-subtitle {
+    margin: 0;
+    font-size: 2.4cqw;
+    color: var(--dpk-ink-soft);
+  }
+
+  .slide-points {
+    display: grid;
+    gap: 1.3cqw;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 2.5cqw;
+    color: var(--dpk-ink);
+  }
+
+  .slide-points li {
+    position: relative;
+    padding-left: 2.6cqw;
+  }
+
+  .slide-points li::before {
+    content: '';
+    position: absolute;
+    left: 0.2cqw;
+    top: 0.62em;
+    width: 0.9cqw;
+    height: 0.9cqw;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--dpk-accent-bright), var(--dpk-accent-strong));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpk-accent) 14%, transparent);
+  }
+
+  .slide-body {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .slide-body ::slotted(*) {
+    margin: 0;
+  }
+
+  /* Over the content, which may scroll beneath it: a backdrop keeps both legible. */
+  .slide-number {
+    position: absolute;
+    right: 2cqw;
+    bottom: 1.6cqw;
+    z-index: 1;
+    padding: 0.3cqw 0.7cqw;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
+    font-family: var(--dpk-mono);
+    font-size: 1.2cqw;
+    font-variant-numeric: tabular-nums;
+    color: var(--dpk-ink-faint);
+  }
+
+  /* The cover: large title, the subtitle beneath, an accent rule on the left. */
+  /* \`safe\`: content taller than the slide starts at the top, where scrolling reaches it. */
+  .slide[data-layout='title'] .slide-content {
+    justify-content: safe center;
+    padding-left: 9cqw;
+  }
+
+  .slide[data-layout='title'] .slide-content::before {
+    content: '';
+    position: absolute;
+    left: 6.5cqw;
+    top: 50%;
+    width: 0.55cqw;
+    height: 16cqw;
+    border-radius: 999px;
+    background: linear-gradient(180deg, var(--dpk-accent-bright), var(--dpk-accent-strong));
+    box-shadow: 0 0 20px color-mix(in srgb, var(--dpk-accent) 35%, transparent);
+    transform: translateY(-50%);
+  }
+
+  .slide[data-layout='title'] .slide-title {
+    font-size: 5.6cqw;
+  }
+
+  .slide[data-layout='title'] .slide-body,
+  .slide[data-layout='section'] .slide-body {
+    flex: 0 0 auto;
+  }
+
+  /* A chapter divider: the title alone, on the accent tint. */
+  .slide[data-layout='section'] {
+    background: linear-gradient(135deg, var(--dpk-accent-soft), transparent 70%), var(--dpk-paper-raised);
+  }
+
+  .slide[data-layout='section'] .slide-content {
+    justify-content: safe center;
+  }
+
+  .slide[data-layout='section'] .slide-title {
+    font-size: 4.8cqw;
+  }
+
+  .slide[data-layout='section'] .slide-title::after {
+    content: '';
+    display: block;
+    width: 7cqw;
+    height: 0.5cqw;
+    margin-top: 2.4cqw;
+    border-radius: 999px;
+    background: linear-gradient(90deg, var(--dpk-accent-bright), var(--dpk-accent-strong));
+  }
+
+  /* Full screen, entered from the presentation surface: the slide as large as the screen allows. */
+  .presentation:fullscreen {
+    align-items: center;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+  }
+  .presentation:fullscreen .slide {
+    width: min(100vw, calc(100vh * 16 / 9));
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  /* ------------------------------------------------------------ notes */
+
+  /*
+   * The presenter's material, under the stage and never on it: what is written
+   * here is shown to the presenter alone (here, and in presentation mode).
+   */
+  .slide-notes {
+    display: grid;
+    gap: 8px;
+    width: min(100%, 1180px);
+    padding: 12px 14px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper);
+  }
+
+  .slide-notes-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 4px 10px;
+  }
+
+  .slide-notes-hint {
+    font-size: 11.5px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .slide-notes-input {
+    min-height: 56px;
+    resize: vertical;
+    font-size: 13px;
+  }
+
+  .slide-notes-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .slide-notes-submit-hint {
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    color: var(--dpk-ink-faint);
+    white-space: nowrap;
+  }
+
+  /* ------------------------------------------------------ presentation */
+
+  /*
+   * Presentation mode: the slide as the whole screen, owned by the view rather
+   * than by the browser's full screen API, so it works in a sandboxed frame and
+   * can be exercised without a browser. It covers the shell, including the
+   * outline and the deck bar, which are not rendered while it is open.
+   */
+  .presentation {
+    position: fixed;
+    inset: 0;
+    /*
+     * It is a manual popover, and the UA's [popover] rule sizes that to the
+     * content (width: fit-content) and centres it with margin: auto, which
+     * would leave the stage a small box in the middle of the screen rather than
+     * the screen itself. Pinned to all four edges with an automatic size, it
+     * covers the viewport.
+     */
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    z-index: 60;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto auto;
+    justify-items: center;
+    align-content: center;
+    gap: 14px;
+    padding: 20px clamp(16px, 3vw, 40px);
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+  }
+
+  .presentation:focus-visible {
+    outline: none;
+  }
+
+  .presentation-stage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 0;
+  }
+
+  /* As large as the screen allows, leaving room for the bar and the notes. */
+  .presentation .slide {
+    width: min(100%, calc((100dvh - 200px) * 16 / 9));
+    border: none;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
+  }
+
+  .presentation-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-glass);
+    backdrop-filter: blur(12px);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  .presentation-move {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .presentation-move .dpk-icon-btn {
+    width: 30px;
+    height: 30px;
+  }
+
+  .presentation-bar .dpk-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .presentation-notes {
+    width: min(100%, 1180px);
+    max-height: 22dvh;
+    overflow-y: auto;
+    padding: 10px 14px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper);
+  }
+
+  .presentation-notes-body {
+    margin: 4px 0 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--dpk-ink);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* ---------------------------------------------------------------- bar */
+
+  .deck-bar {
+    width: min(100%, 1180px);
+    padding: 8px 12px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-glass);
+    backdrop-filter: blur(12px);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  .deck-move {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .deck-move .dpk-icon-btn {
+    width: 30px;
+    height: 30px;
+  }
+
+  .deck-counter {
+    min-width: 54px;
+    font-family: var(--dpk-mono);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    color: var(--dpk-ink-faint);
+  }
+
+  .deck-counter strong {
+    color: var(--dpk-ink);
+    font-weight: 600;
+  }
+
+  .deck-progress {
+    flex: 1 1 80px;
+    height: 4px;
+    border-radius: 999px;
+    background: var(--dpk-paper-inset);
+    box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+    overflow: hidden;
+  }
+
+  .deck-progress span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--dpk-accent);
+    transition: width 200ms ease;
+  }
+
+  .deck-bar .dpk-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* ----------------------------------------------------------- comments */
+
+  .slide-comments {
+    display: grid;
+    gap: 10px;
+    width: min(100%, 1180px);
+    padding: 14px;
+    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);
+  }
+
+  /* About three short comments; more scroll inside the list, not the page. */
+  .slide-comment-list {
+    display: grid;
+    align-content: start;
+    gap: 6px;
+    max-height: 96px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    list-style: none;
+  }
+
+  .slide-comment-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 6px 6px 10px;
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-sunken);
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--dpk-ink);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .slide-comment-body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .slide-comment-delete {
+    flex: none;
+    width: 22px;
+    height: 22px;
+    opacity: 0.55;
+  }
+
+  .slide-comment-list li:hover .slide-comment-delete,
+  .slide-comment-delete:focus-visible {
+    opacity: 1;
+  }
+
+  .slide-comment-delete svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .slide-comment-form {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 10px;
+    align-items: start;
+  }
+
+  .slide-comment-input {
+    height: 60px;
+    min-height: 60px;
+    resize: none;
+  }
+
+  .slide-comment-actions {
+    display: grid;
+    justify-items: end;
+    gap: 6px;
+  }
+
+  .slide-comment-hint {
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    color: var(--dpk-ink-faint);
+    white-space: nowrap;
+  }
+
+  @media (max-width: 560px) {
+    .slide-comment-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .slide-comment-delete {
+      flex: none;
+      width: 22px;
+      height: 22px;
+      opacity: 0.55;
+    }
+
+    .slide-comment-list li:hover .slide-comment-delete,
+    .slide-comment-delete:focus-visible {
+      opacity: 1;
+    }
+
+    .slide-comment-delete svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    .slide-comment-form {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .parked {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .deck-progress span {
+      transition: none;
+    }
+  }
+`,Se='input, textarea, select, [contenteditable]:not([contenteditable="false"])',Ee=t=>t instanceof HTMLElement&&(t.isContentEditable||t.matches(Se)),Te=t=>{for(let e=t;e!==null;){if(e.hasAttribute("hidden"))return!1;const i=e.getRootNode();e=e.parentElement??(i instanceof ShadowRoot?i.host:null)}return!0};class Z extends C{static{this.styles=[C.styles,ue,$e]}#t=new Map;#e=new Map;#s=!1;#n={slide:"",count:0};definitionFor(e){return I(e)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.#r)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.#r)}renderRegions(e){const i=v(this.locale),s=m(e.navigation),a={canFullscreen:document.fullscreenEnabled===!0,draftFor:n=>this.#t.get(n)??"",notes:{textFor:n=>this.#e.get(n.id)??n.notes,onDraft:(n,o)=>this.#p(n,o),onSave:n=>this.#u(n)},onStep:n=>this.#a(n),onPresent:()=>this.#i(!0),onExit:()=>this.#i(!1),onFullscreen:()=>this.#h(),onDraft:(n,o)=>this.#o(n,o),onComment:n=>this.#c(n),onDeleteComment:n=>this.removeAction(n)};return{sidebar:s?d:be(e,i),sidebarHidden:s||e.state.slides.length===0,main:s?ke(e,i,a):we(e,i,a)}}updated(){super.updated(),this.#d(),this.#l()}#d(){const e=m(this.navigation);e&&!this.#s&&this.renderRoot.querySelector(".presentation")?.focus(),this.#s=e}#l(){const e=this.renderRoot.querySelector(".slide-comment-list"),i={slide:this.navigation.slide??"",count:e?.childElementCount??0},s=this.#n;this.#n=i,!(e===null||i.slide===s.slide&&i.count<=s.count)&&(e.scrollTop=e.scrollHeight)}#a(e){const i=Y(this.derivation.state,this.navigation.slide,e);i!==void 0&&this.navigate({slide:i})}#i(e){this.navigate(O(e))}#o(e,i){const s=new Map(this.#t);i===""?s.delete(e):s.set(e,i),this.#t=s,this.requestUpdate()}#c(e){const i=(this.#t.get(e)??"").trim();if(i==="")return;this.dispatch({type:E,target:{type:"slide",id:e},payload:{body:i}}).ok&&this.#o(e,"")}#p(e,i){const s=new Map(this.#e);i===e.notes?s.delete(e.id):s.set(e.id,i),this.#e=s,this.requestUpdate()}#u(e){const i=(this.#e.get(e)??"").trim();if(!this.dispatch(H.setNotes(e,i)).ok)return;const a=new Map(this.#e);a.delete(e),this.#e=a,this.requestUpdate()}#h(){const e=this.renderRoot.querySelector(".presentation");!(e instanceof HTMLElement)||document.fullscreenElement!==null||e.requestFullscreen().catch(()=>{})}#r=e=>{if(e.defaultPrevented||!Te(this))return;if(e.key==="Escape"){if(!m(this.navigation)||this.notesOpen||e.isComposing)return;e.preventDefault(),this.#i(!1);return}const i=U(e);i===null||e.composedPath().some(Ee)||(e.preventDefault(),this.#a(i))}}const Q=()=>{customElements.get("dpk-view-slides")||customElements.define("dpk-view-slides",Z)},Ne=Object.freeze(Object.defineProperty({__proto__:null,DpkViewSlides:Z,PRESENT_KEY:f,PRESENT_ON:k,SET_SLIDE_NOTES:c,SLIDE_LAYOUTS:P,applySlidesAction:M,defineSlidesElement:Q,describeSlidesAction:L,emptySlidesBase:z,findSlide:D,findSlideIndex:l,parseSlidesBase:A,resolveSlidesNavigation:B,serializeSlidesAction:_,slideKeyStep:U,slidePosition:w,slidesAction:H,slidesActions:b,slidesBaseSchema:q,slidesCommentTargets:K,slidesCurrentTarget:R,slidesDefinitionFor:I,slidesHasTarget:G,slidesMessages:v,slidesPresentation:O,slidesPresenting:m,slidesTargetLabel:F,slidesTitle:j,stepSlide:Y},Symbol.toStringTag,{value:"Module"}));export{Q as d,Ne as i};