dev-process-kit 0.2.0 → 0.3.0-beta.0

package/dist/chunks/shared-DbgUhOLb.js

@@ -0,0 +1,686 @@
+import{bs as z,bt as C,ai as d,bu as L,a5 as B,as as n,a$ as p,bv as E,bw as M,H as v,bx as O,y as j,ah as R}from"./shared-BQqlFaPv.js";import{L as D}from"./shared-CjW1DhGL.js";const N=[["circle",{cx:"12",cy:"12",r:"10"}],["path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}],["path",{d:"M2 12h20"}]],H=[["path",{d:"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}],["path",{d:"M21 3v5h-5"}]],K=z(class extends C{constructor(){super(...arguments),this.key=d}render(e,r){return this.key=e,r}update(e,[r,t]){return r!==this.key&&(L(e),this.key=r),t}}),P=B({en:{comment:"Comment",commentOn:e=>`Comment on ${e}`,submit:"Send",cancel:"Cancel"},ja:{comment:"\u30B3\u30E1\u30F3\u30C8",commentOn:e=>`${e}\u3078\u306E\u30B3\u30E1\u30F3\u30C8`,submit:"\u9001\u4FE1",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB"}}),S=(e,r,t={})=>({body:e,notes:r,submission:e.trim()||null,label:t.label??null,error:t.error??null,key:t.key??null,choice:t.choice??null,submitLabel:t.submitLabel??null}),F=(e,r,t)=>{const a=()=>{r.submission!==null&&t({kind:"comment",body:r.submission})};return n`<div
+    class="comment-pop"
+    popover="manual"
+    role="dialog"
+    aria-label=${r.label?e.commentOn(r.label):e.comment}
+    @click=${o=>o.stopPropagation()}
+    @keydown=${o=>{o.isComposing||o.key!=="Escape"||(o.preventDefault(),o.stopPropagation(),t({kind:"dismiss"}))}}
+  >
+    ${r.label?n`<strong class="comment-target">${r.label}</strong>`:d}
+    ${r.error?n`<p class="comment-error" role="alert">${r.error}</p>`:d}
+    ${r.choice?G(r.choice,t):d}
+    ${r.notes.length?n`<ul class="comment-list">
+            ${r.notes.map(o=>n`<li>${o}</li>`)}
+          </ul>`:d}
+    <textarea
+      class="dpk-textarea"
+      aria-label=${e.comment}
+      data-dpk-text-key=${r.key??d}
+      .value=${r.body}
+      @input=${o=>{o.currentTarget instanceof HTMLTextAreaElement&&t({kind:"input",body:o.currentTarget.value})}}
+      @keydown=${o=>{o.isComposing||o.key==="Enter"&&(o.ctrlKey||o.metaKey)&&(o.preventDefault(),a())}}
+    ></textarea>
+    <div class="pop-actions">
+      <button class="dpk-btn dpk-btn--accent" type="button" ?disabled=${r.submission===null} @click=${a}>
+        ${r.submitLabel??e.submit}
+      </button>
+      <button
+        class="dpk-btn dpk-btn--ghost"
+        type="button"
+        data-dpk-text-discard
+        @click=${()=>t({kind:"dismiss"})}
+      >
+        ${e.cancel}
+      </button>
+    </div>
+  </div>`},G=(e,r)=>{const t=e.options.find(a=>a.value===e.value)?.hint;return n`<fieldset class="comment-kinds">
+      <legend>${e.label}</legend>
+      ${e.options.map(a=>n`<label class="comment-kind">
+            <input
+              type="radio"
+              name="comment-kind"
+              .value=${a.value}
+              .checked=${a.value===e.value}
+              @change=${()=>r({kind:"choose",value:a.value})}
+            />
+            <span>${a.label}</span>
+          </label>`)}
+    </fieldset>
+    ${t===void 0?d:n`<p class="comment-kind-hint">${t}</p>`}`},$=(e,r)=>{const t=e.trim();if(t==="")return null;try{return t.startsWith("/")?new URL(t,r):new URL(/^[a-z][a-z0-9+.-]*:\/\//i.test(t)?t:`https://${t}`)}catch{return null}},U=e=>`${e.origin}${e.pathname.replace(/\/+$/,"")}`,W=(e,r)=>{const t=e.trim();return t.startsWith("/")?$(t,r)?.href??t:/^[a-z][a-z0-9+.-]*:\/\//i.test(t)?t:`https://${t}`},X=e=>{try{return new URL(e).host||e}catch{return e}},_=p(E),J=p(M),V=p(H),q=p(D),h=p(N),Q=(e,r,t)=>{const a=r.length-1;if(e==="ArrowRight")return r[t===a?0:t+1];if(e==="ArrowLeft")return r[t===0?a:t-1];if(e==="Home")return r[0];if(e==="End")return r[a]},Y=e=>{const{view:r,send:t,labels:a}=e,o=s=>i=>{const l=r.tabs[s],k=i.key==="Enter"||i.key===" "?l:Q(i.key,r.tabs,s);k!==void 0&&(i.preventDefault(),t({kind:"activate",id:k.id,focus:!0}))};return n`<div class="browser-tabs">
+    <div class="browser-tab-list" role="tablist" aria-label=${a.tabs}>
+      ${r.tabs.map((s,i)=>n`<div
+            class="browser-tab"
+            role="tab"
+            tabindex=${s.active?"0":"-1"}
+            aria-selected=${s.active?"true":"false"}
+            title=${s.title}
+            @click=${()=>t({kind:"activate",id:s.id})}
+            @keydown=${o(i)}
+          >
+            <span class="browser-favicon">${h()}</span>
+            <span class="browser-tab-title">${s.title}</span>
+            ${y(e,s.id)}
+          </div>`)}
+    </div>
+    <button
+      class="browser-new-tab"
+      type="button"
+      aria-label=${a.newTab}
+      title=${a.newTab}
+      @click=${()=>t({kind:"new-tab"})}
+    >
+      ${v()}
+    </button>
+    ${e.extra??d}
+  </div>`},y=(e,r)=>n`<button
+    class="browser-tab-close"
+    type="button"
+    aria-label=${e.labels.closeTab}
+    title=${e.labels.closeTab}
+    @click=${t=>{t.stopPropagation(),e.send({kind:"close-tab",id:r})}}
+  >
+    ${j()}
+  </button>`,Z={back:_,forward:J,reload:V},c=(e,r)=>{const{view:t,send:a,labels:o}=e,s=o[r],i={back:!t.canBack,forward:!t.canForward,reload:t.entry?.kind!=="page"}[r];return n`<button
+    class=${`browser-nav browser-${r}`}
+    type="button"
+    aria-label=${s}
+    title=${s}
+    ?disabled=${i}
+    @click=${()=>a({kind:r})}
+  >
+    ${Z[r]()}
+  </button>`},ee=e=>{const{view:r,send:t,labels:a,phone:o}=e,s=r.profile??a.guest;return n`<div class="browser-toolbar">
+    ${o?d:n`${c(e,"back")} ${c(e,"forward")} ${c(e,"reload")}`}
+    <div class="browser-address-form">
+      <span class="browser-lock">${r.entry?.kind==="page"?q():h()}</span>
+      <input
+        class="browser-address"
+        type="text"
+        enterkeyhint="go"
+        aria-label=${a.address}
+        spellcheck="false"
+        autocomplete="off"
+        .value=${O(r.url)}
+        @focus=${i=>{i.currentTarget instanceof HTMLInputElement&&i.currentTarget.select()}}
+        @keydown=${i=>{const l=i.currentTarget;if(!(!(l instanceof HTMLInputElement)||i.isComposing)){if(i.key==="Enter"){if(i.preventDefault(),l.value.trim()==="")return;l.blur(),t({kind:"address",input:l.value});return}i.key==="Escape"&&(i.preventDefault(),l.value=r.url,l.blur())}}}
+      />
+    </div>
+    <span class="browser-profile" title=${a.profile(s)}>
+      <span class="browser-avatar" aria-hidden="true">${Array.from(s)[0]??""}</span>
+      ${o?d:n`<span class="browser-profile-name">${s}</span>`}
+    </span>
+  </div>`},re=e=>n`${e.phone?d:Y(e)} ${ee(e)}
+    <div class="browser-progress" aria-hidden="true"></div>`,te=e=>{if(!e.phone)return d;const{view:r,send:t,labels:a}=e;return n`<div class="browser-bottom">
+    ${c(e,"back")} ${c(e,"forward")}
+    <button
+      class="browser-nav browser-new-tab"
+      type="button"
+      aria-label=${a.newTab}
+      title=${a.newTab}
+      @click=${()=>t({kind:"new-tab"})}
+    >
+      ${v()}
+    </button>
+    <button
+      class="browser-nav browser-tab-count"
+      type="button"
+      aria-label=${a.tabs}
+      title=${a.tabs}
+      aria-expanded=${e.switcher?"true":"false"}
+      @click=${()=>t({kind:"switcher",open:!e.switcher})}
+    >
+      <span class="browser-tab-count-box">${r.tabs.length}</span>
+    </button>
+    ${c(e,"reload")}
+  </div>`},ae=e=>{const{view:r,send:t,labels:a}=e;return n`<div class="browser-switcher" role="dialog" aria-label=${a.tabs}>
+    ${r.tabs.map(o=>n`<div class="browser-card" aria-current=${o.active?"true":d}>
+          <button class="browser-card-open" type="button" @click=${()=>t({kind:"activate",id:o.id})}>
+            <span class="browser-favicon">${h()}</span>
+            <span class="browser-card-title">${o.title}</span>
+            <span class="browser-card-url">${o.url}</span>
+          </button>
+          ${y(e,o.id)}
+        </div>`)}
+  </div>`},oe=e=>n`<div class="browser-newtab">
+    <p class="browser-newtab-label">${e.labels.shortcuts}</p>
+    <div class="browser-shortcuts">
+      ${e.shortcuts.map(r=>n`<a
+            class="browser-shortcut"
+            href=${r.href}
+            @click=${t=>{t.preventDefault(),e.send({kind:"visit",page:r.page})}}
+          >
+            <span class="browser-shortcut-icon" aria-hidden="true">${Array.from(r.title)[0]??""}</span>
+            <span class="browser-shortcut-title">${r.title}</span>
+            <span class="browser-shortcut-url">${r.url}</span>
+          </a>`)}
+    </div>
+  </div>`,se=(e,r)=>n`<div class="browser-unreachable" role="alert">
+    <h3>${e.unreachableTitle}</h3>
+    <p>${e.unreachableBody}</p>
+    <code>${r}</code>
+  </div>`,ne=(e,r)=>{const t=e.view.entry;return n`${e.phone&&e.switcher?ae(e):d}
+  ${t?.kind==="unreachable"?se(e.labels,t.url):r===void 0?oe(e):r}`},b=e=>JSON.stringify(Object.entries(e).filter(([,r])=>r!==void 0).sort(([r],[t])=>r<t?-1:r>t?1:0)),m=(e,r)=>e?.kind==="page"&&b(e.page)===r,w=e=>`tab-${e}`,ie=e=>({tabs:[{id:w(1),history:[{kind:"page",page:e}],index:0}],activeId:w(1),seen:b(e),nextId:2}),de={id:"",history:[],index:0},u=e=>e.tabs.find(r=>r.id===e.activeId)??e.tabs[0]??de,x=e=>{const r=u(e);return r.history[r.index]},le=e=>u(e).index>0,ce=e=>{const r=u(e);return r.index<r.history.length-1},T=(e,r)=>({...e,tabs:e.tabs.map(t=>t.id===e.activeId?r(t):t)}),g=(e,r)=>T(e,t=>({...t,history:[...t.history.slice(0,t.index+1),r],index:t.index+1})),f=e=>{const r=x(e);return r?.kind==="page"?{...e,seen:b(r.page)}:e},I=(e,r)=>{const t=u(e),a=t.index+r;return a<0||a>=t.history.length?e:f(T(e,o=>({...o,index:a})))},A=(e,r,t)=>{const a=w(e.nextId),o=e.tabs.findIndex(s=>s.id===e.activeId)+1;return f({...e,tabs:[...e.tabs.slice(0,o),{id:a,history:[r],index:0},...e.tabs.slice(o)],activeId:t?e.activeId:a,nextId:e.nextId+1})},pe=(e,r)=>{const t=e.tabs.findIndex(s=>s.id===r);if(t<0)return e;if(e.tabs.length===1){const s=w(e.nextId);return{...e,tabs:[{id:s,history:[{kind:"new-tab"}],index:0}],activeId:s,nextId:e.nextId+1}}const a=e.tabs.filter(s=>s.id!==r);if(r!==e.activeId)return{...e,tabs:a};const o=a[t]??a[t-1];return f({...e,tabs:a,activeId:o?.id??e.activeId})},be=(e,r)=>{const t=r===null?null:b(r);if(t===e.seen)return e;const a={...e,seen:t};return r===null||t===null||m(x(e),t)?a:g(a,{kind:"page",page:r})},ue=(e,r)=>{const t=b(r);return m(x(e),t)?e.seen===t?e:{...e,seen:t}:g({...e,seen:t},{kind:"page",page:r})},we=(e,r)=>{switch(r.kind){case"observe":return be(e,r.page);case"visit":return ue(e,r.page);case"back":return I(e,-1);case"forward":return I(e,1);case"open-tab":return A(e,r.entry,r.background);case"new-tab":return A(e,{kind:"new-tab"},!1);case"unreachable":return g(e,{kind:"unreachable",url:r.url});case"activate":return e.tabs.some(t=>t.id===r.id)&&r.id!==e.activeId?f({...e,activeId:r.id}):e;case"close-tab":return pe(e,r.id);default:return e}},xe=R`
+  /*
+   * A tab strip on a darker band, the active tab merged into the toolbar below
+   * it, round navigation buttons, a pill address bar and the profile of the
+   * user the window belongs to.
+   */
+  .browser {
+    display: flex;
+    flex-direction: column;
+    --browser-band: var(--dpk-paper-inset);
+    --browser-bar: var(--dpk-paper-raised);
+  }
+
+  .browser-tabs {
+    display: flex;
+    align-items: flex-end;
+    gap: 4px;
+    min-width: 0;
+    padding: 7px 10px 0;
+    background: var(--browser-band);
+  }
+
+  .browser-tab-list {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: flex-end;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .browser-tab {
+    position: relative;
+    display: flex;
+    flex: 0 1 220px;
+    align-items: center;
+    gap: 8px;
+    min-width: 64px;
+    height: 32px;
+    padding: 0 8px 0 12px;
+    border-radius: 9px 9px 0 0;
+    color: var(--dpk-ink-soft);
+    font-size: 12px;
+    cursor: default;
+    user-select: none;
+    transition: background 140ms var(--dpk-ease);
+  }
+
+  .browser-tab:not([aria-selected='true']):hover {
+    background: color-mix(in srgb, var(--browser-bar) 55%, transparent);
+  }
+
+  /* A thin rule between two inactive tabs, as in Chrome. */
+  .browser-tab:not([aria-selected='true']) + .browser-tab:not([aria-selected='true'])::before {
+    content: '';
+    position: absolute;
+    left: -2px;
+    top: 9px;
+    bottom: 9px;
+    width: 1px;
+    background: var(--dpk-rule-strong);
+  }
+
+  .browser-tab[aria-selected='true'] {
+    background: var(--browser-bar);
+    color: var(--dpk-ink);
+    box-shadow: 0 -1px 0 var(--dpk-rule);
+  }
+
+  .browser-tab:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .browser-favicon {
+    display: inline-flex;
+    flex: none;
+    color: var(--dpk-ink-faint);
+  }
+
+  .browser-favicon svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .browser-tab-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .browser-tab-close,
+  .browser-new-tab,
+  .browser-nav {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--dpk-ink-soft);
+    cursor: pointer;
+    transition:
+      background 140ms var(--dpk-ease),
+      color 140ms var(--dpk-ease);
+  }
+
+  .browser-tab-close {
+    width: 18px;
+    height: 18px;
+  }
+
+  .browser-tab-close svg {
+    width: 10px;
+    height: 10px;
+  }
+
+  .browser-new-tab {
+    width: 26px;
+    height: 26px;
+    margin-bottom: 3px;
+  }
+
+  .browser-new-tab svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .browser-tab-close:hover,
+  .browser-new-tab:hover,
+  .browser-nav:not(:disabled):hover {
+    background: color-mix(in srgb, var(--dpk-ink) 9%, transparent);
+    color: var(--dpk-ink);
+  }
+
+  .browser-tab-close:focus-visible,
+  .browser-new-tab:focus-visible,
+  .browser-nav:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .browser-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 6px 10px;
+    background: var(--browser-bar);
+    border-bottom: 1px solid var(--dpk-rule);
+  }
+
+  .browser-nav {
+    width: 30px;
+    height: 30px;
+  }
+
+  .browser-nav svg {
+    width: 15px;
+    height: 15px;
+  }
+
+  .browser-nav:disabled {
+    color: var(--dpk-ink-faint);
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .browser-address-form {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+    margin: 0 4px;
+  }
+
+  .browser-lock {
+    position: absolute;
+    left: 12px;
+    display: inline-flex;
+    color: var(--dpk-ink-faint);
+    pointer-events: none;
+  }
+
+  .browser-lock svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  .browser-address {
+    width: 100%;
+    min-width: 0;
+    height: 30px;
+    padding: 0 14px 0 33px;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink);
+    font: 13px/1 var(--dpk-body);
+    text-overflow: ellipsis;
+    transition:
+      background 140ms var(--dpk-ease),
+      border-color 140ms var(--dpk-ease);
+  }
+
+  .browser-address:hover {
+    background: var(--dpk-paper-inset);
+  }
+
+  .browser-address:focus {
+    outline: none;
+    border-color: var(--dpk-blue);
+    background: var(--browser-bar);
+    box-shadow: 0 0 0 1px var(--dpk-blue);
+  }
+
+  .browser-profile {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    max-width: 160px;
+    height: 28px;
+    padding: 0 10px 0 3px;
+    border-radius: 999px;
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue-strong, var(--dpk-blue));
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .browser-avatar {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--dpk-blue);
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  .browser-profile-name {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* The bar a reload draws under the toolbar while the page comes back. */
+  .browser-progress {
+    position: relative;
+    height: 2px;
+    margin-top: -2px;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .browser[data-loading] .browser-progress::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--dpk-blue);
+    transform-origin: left;
+    animation: dpk-browser-load 360ms var(--dpk-ease) forwards;
+  }
+
+  @keyframes dpk-browser-load {
+    from {
+      transform: scaleX(0.08);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  .browser-page {
+    transition: opacity 160ms var(--dpk-ease);
+  }
+
+  .browser[data-loading] .browser-page {
+    opacity: 0.45;
+  }
+
+  /* The new tab page: the pages of the app the reader is in, as tiles. */
+  .browser-newtab {
+    display: grid;
+    flex: 1;
+    align-content: start;
+    justify-items: center;
+    gap: 18px;
+    padding: 72px 24px 40px;
+    background: #f8f9fb;
+    color: #3c4250;
+  }
+
+  .browser-newtab-label {
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: #6b7282;
+  }
+
+  .browser-shortcuts {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 112px);
+    justify-content: center;
+    gap: 8px;
+    width: min(100%, 600px);
+  }
+
+  .browser-shortcut {
+    display: grid;
+    justify-items: center;
+    gap: 6px;
+    padding: 14px 8px 12px;
+    border-radius: 12px;
+    color: inherit;
+    text-align: center;
+    text-decoration: none;
+    transition: background 140ms var(--dpk-ease);
+  }
+
+  .browser-shortcut:hover,
+  .browser-shortcut:focus-visible {
+    outline: none;
+    background: #eceef2;
+  }
+
+  .browser-shortcut-icon {
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: #e3e7ee;
+    color: #3563d9;
+    font-size: 17px;
+    font-weight: 700;
+  }
+
+  .browser-shortcut-title,
+  .browser-shortcut-url {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .browser-shortcut-title {
+    font-size: 12.5px;
+    font-weight: 600;
+  }
+
+  .browser-shortcut-url {
+    font-size: 10.5px;
+    color: #8a91a0;
+  }
+
+  .browser-unreachable {
+    display: grid;
+    flex: 1;
+    align-content: start;
+    gap: 10px;
+    padding: 88px max(24px, 12%) 40px;
+    background: #fff;
+    color: #3c4250;
+  }
+
+  .browser-unreachable::before {
+    content: '';
+    width: 40px;
+    height: 40px;
+    margin-bottom: 8px;
+    border-radius: 10px;
+    background:
+      linear-gradient(135deg, transparent 46%, #9aa1ae 46% 54%, transparent 54%),
+      linear-gradient(45deg, transparent 46%, #9aa1ae 46% 54%, transparent 54%), #eceef2;
+  }
+
+  .browser-unreachable h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #1f2430;
+  }
+
+  .browser-unreachable p {
+    margin: 0;
+    font-size: 13.5px;
+    line-height: 1.6;
+  }
+
+  .browser-unreachable code {
+    justify-self: start;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    font-family: var(--dpk-mono);
+    font-size: 12px;
+    color: #6b7282;
+  }
+
+  /*
+   * A phone browser: the address and the avatar on top, the controls and the
+   * tab count in a bar under the page, the tabs as cards over the page.
+   */
+  .browser[data-viewport='mobile'] .browser-toolbar {
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .browser[data-viewport='mobile'] .browser-profile {
+    padding-right: 3px;
+  }
+
+  .browser[data-viewport='mobile'] .browser-shortcuts {
+    grid-template-columns: repeat(auto-fill, 96px);
+  }
+
+  .browser-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 6px 8px 10px;
+    border-top: 1px solid var(--dpk-rule);
+    background: var(--browser-bar);
+  }
+
+  .browser-bottom .browser-new-tab {
+    width: 30px;
+    height: 30px;
+    margin: 0;
+  }
+
+  .browser-tab-count-box {
+    display: inline-grid;
+    place-items: center;
+    min-width: 17px;
+    height: 17px;
+    padding: 0 3px;
+    border: 1.5px solid currentColor;
+    border-radius: 4px;
+    font: 700 10px/1 var(--dpk-body);
+  }
+
+  .browser-tab-count[aria-expanded='true'] {
+    background: color-mix(in srgb, var(--dpk-ink) 9%, transparent);
+    color: var(--dpk-ink);
+  }
+
+  .browser-switcher {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-content: start;
+    gap: 10px;
+    padding: 12px;
+    color-scheme: normal;
+    background: var(--browser-band);
+    overflow: auto;
+  }
+
+  .browser-card {
+    position: relative;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: 12px;
+    background: var(--browser-bar);
+    box-shadow: var(--dpk-shadow);
+  }
+
+  .browser-card[aria-current='true'] {
+    border-color: var(--dpk-blue);
+    box-shadow: 0 0 0 1px var(--dpk-blue);
+  }
+
+  .browser-card-open {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 4px 6px;
+    width: 100%;
+    min-height: 84px;
+    padding: 10px 30px 10px 10px;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: var(--dpk-ink);
+    font: 600 12px/1.3 var(--dpk-body);
+    text-align: left;
+    align-content: start;
+    cursor: pointer;
+  }
+
+  .browser-card-open:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .browser-card-title,
+  .browser-card-url {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .browser-card-url {
+    grid-column: 1 / -1;
+    color: var(--dpk-ink-faint);
+    font: 400 11px/1.3 var(--dpk-mono);
+  }
+
+  .browser-card .browser-tab-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+`;export{$ as a,U as b,P as c,u as d,ce as e,le as f,xe as g,X as h,K as i,x as j,re as k,ne as l,te as m,we as n,S as p,F as r,ie as s,W as t};