@arcblock/did-connect-service 4.0.6 → 4.1.0

package/dist/assets/design.99dc4ddc.css

@@ -0,0 +1,97 @@
+
+  :root {
+    /* Backgrounds — layered depth */
+    --bg-root:      #0a0a0b;
+    --bg-surface:   #141416;
+    --bg-card:      #1c1c20;
+    --bg-elevated:  #232328;
+    --bg-hover:     #2b2b34;
+    --bg-active:    #33333e;
+    --bg-input:     rgba(255,255,255,0.06);
+
+    /* Borders — semi-transparent for adaptability */
+    --border:       rgba(255,255,255,0.10);
+    --border-subtle:rgba(255,255,255,0.06);
+    --border-strong:rgba(255,255,255,0.15);
+    --border-focus: rgba(255,255,255,0.25);
+
+    /* Text hierarchy */
+    --text:         #f5f5f7;
+    --text-secondary:#9394a1;
+    --text-tertiary:#767684;
+    --text-placeholder:#5e5f6e;
+    --text-white:   #ffffff;
+
+    /* Accents */
+    --blue:         #6c47ff;
+    --blue-hover:   #5f15fe;
+    --blue-light:   rgba(108,71,255,0.15);
+    --blue-muted:   #9280ff;
+    --red:          #e02e2e;
+    --red-light:    rgba(224,46,46,0.15);
+    --red-text:     #f98a8a;
+    --green:        #15892b;
+    --green-light:  rgba(21,137,43,0.15);
+    --green-text:   #49dc6e;
+    --yellow:       #fd7224;
+    --yellow-light: rgba(253,114,36,0.15);
+    --yellow-text:  #fd9357;
+    --info:         #236dd7;
+    --info-light:   rgba(35,109,215,0.15);
+    --info-text:    #73acfa;
+
+    /* Radii */
+    --radius-xs:    4px;
+    --radius-sm:    6px;
+    --radius:       8px;
+    --radius-lg:    12px;
+    --radius-full:  9999px;
+
+    /* Shadows */
+    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.2);
+    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
+    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
+    --shadow-focus: 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 3px rgba(108,71,255,0.3);
+  }
+
+  [data-theme="light"] {
+    --bg-root:      #f8f9fa;
+    --bg-surface:   #ffffff;
+    --bg-card:      #ffffff;
+    --bg-elevated:  #f0f1f3;
+    --bg-hover:     #e9eaec;
+    --bg-active:    #dddee1;
+    --bg-input:     rgba(0,0,0,0.04);
+
+    --border:       rgba(0,0,0,0.10);
+    --border-subtle:rgba(0,0,0,0.06);
+    --border-strong:rgba(0,0,0,0.15);
+    --border-focus: rgba(0,0,0,0.25);
+
+    --text:         #1a1a1a;
+    --text-secondary:#6b7280;
+    --text-tertiary:#9ca3af;
+    --text-placeholder:#c0c5ce;
+    --text-white:   #1a1a1a;
+
+    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
+    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
+    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);
+    --shadow-focus: 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 3px rgba(108,71,255,0.2);
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html { color-scheme: dark; }
+  html[data-theme="light"] { color-scheme: light; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-root);
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 14px;
+    line-height: 1.43;
+  }
+  a { color: var(--blue-muted); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  .hidden { display: none; }

package/dist/assets/did-address.7df30f28.js

@@ -0,0 +1,51 @@
+"use strict";var __DidAddressBundle=(()=>{var p=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of $(t))!A.call(e,s)&&s!==o&&p(e,s,{get:()=>t[s],enumerable:!(i=k(t,s))||i.enumerable});return e};var L=e=>E(p({},"__esModule",{value:!0}),e);var S={};D(S,{DidAddressElement:()=>n,truncateDid:()=>h});var d="did:abt:";function H(e){if(!e||typeof e!="string")return!1;let t=e.replace(d,"");return/^(0x)?[0-9a-f]{40}$/i.test(t)}function h(e,t=8,o=6){return!e||typeof e!="string"?"":e.length<=t+o+3?e:`${e.slice(0,t)}...${e.slice(-o)}`}function m(e,t={}){if(!e||typeof e!="string")return{prefix:"DID: ABT:",chainLabel:"ABT",address:"",compact:"",copyText:""};let{startChars:o=8,endChars:i=6}=t,s=H(e),r=e.replace(d,""),c=s?"ETH":"ABT",a=t.includePrefix??!s;return{prefix:`DID: ${c}:`,chainLabel:c,address:r,compact:h(r,o,i),copyText:a?`${d}${r}`:r}}var M=typeof HTMLElement<"u"?HTMLElement:class{},b='<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',P='<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',B=`
+:host {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  overflow: hidden;
+  font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
+  line-height: 1.5;
+}
+:host([block]) { display: flex; }
+.prefix {
+  flex-shrink: 0;
+  opacity: 0.6;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+.address {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--did-text-color, currentColor);
+}
+.address-compact {
+  white-space: nowrap;
+  color: var(--did-text-color, currentColor);
+  cursor: default;
+}
+.clickable { cursor: pointer; }
+.clickable:hover { opacity: 0.8; }
+.copy-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.copy-btn:hover { opacity: 1; }
+.copy-btn.copied { opacity: 1; color: var(--did-copy-success-color, #22c55e); }
+`,n=class extends M{static observedAttributes=["did","compact","copyable","start-chars","end-chars","show-prefix","no-tooltip","no-copy","block","size"];shadow;copyTimer=null;constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}disconnectedCallback(){this.copyTimer&&clearTimeout(this.copyTimer)}get parts(){let t=Number(this.getAttribute("start-chars")),o=Number(this.getAttribute("end-chars"));return m(this.getAttribute("did")||"",{startChars:t>0?t:void 0,endChars:o>0?o:void 0})}render(){if(!(this.getAttribute("did")||"")){this.shadow.innerHTML="";return}let o=this.parts,i=this.hasAttribute("compact"),s=!this.hasAttribute("no-copy")&&this.getAttribute("copyable")!=="false",r=this.hasAttribute("show-prefix"),c=this.hasAttribute("no-tooltip"),a=Number(this.getAttribute("size"))||0,x=a>=12?`${a}px`:"inherit",g=i?o.compact:o.address,C=!c&&i?` title="${o.address}"`:"",w=r?`<span class="prefix">${o.prefix} </span>`:"",u=i?"address-compact":"address",T=s?" clickable":"",v=s?`<button class="copy-btn" aria-label="Copy DID">${b}</button>`:"";if(this.shadow.innerHTML=`
+      <style>${B}:host { font-size: ${x}; }</style>
+      ${w}<span class="${u}${T}"${C}>${g}</span>${v}
+    `,s){let f=this.shadow.querySelector(`.${u}`);f&&f.addEventListener("click",l=>{l.stopPropagation(),this.copyToClipboard(o.copyText)});let y=this.shadow.querySelector(".copy-btn");y&&y.addEventListener("click",l=>{l.stopPropagation(),this.copyToClipboard(o.copyText)})}}copyToClipboard(t){navigator.clipboard?.writeText?navigator.clipboard.writeText(t).catch(()=>this.fallbackCopy(t)):this.fallbackCopy(t),this.showCopied()}fallbackCopy(t){try{let o=document.createElement("input");o.value=t,document.body.appendChild(o),o.select(),document.execCommand?.("copy"),o.remove()}catch{}}showCopied(){let t=this.shadow.querySelector(".copy-btn");t&&(t.classList.add("copied"),t.innerHTML=P,this.copyTimer&&clearTimeout(this.copyTimer),this.copyTimer=setTimeout(()=>{t.classList.remove("copied"),t.innerHTML=b},1500))}};typeof customElements<"u"&&!customElements.get("did-address")&&customElements.define("did-address",n);return L(S);})();

package/dist/assets/header.94d9e46b.js

@@ -0,0 +1,136 @@
+"use strict";var __BlockletHeaderBundle=(()=>{var f=typeof HTMLElement<"u"?HTMLElement:class{},m='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/></svg>',x='<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"/></svg>',k='<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/></svg>',y='<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3zm0 8h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z"/></svg>';var v={en:{home:"Home",userCenter:"User Center",adminConsole:"Admin Console",billing:"Billing",signOut:"Sign Out",signIn:"Sign In"},zh:{home:"\u9996\u9875",userCenter:"\u4E2A\u4EBA\u4E2D\u5FC3",adminConsole:"\u63A7\u5236\u53F0",billing:"\u8D26\u5355",signOut:"\u9000\u51FA\u767B\u5F55",signIn:"\u767B\u5F55"}},C=`
+:host {
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  /* Use design tokens from host page (inherited through Shadow DOM), with fallbacks */
+  --header-bg: var(--bg-surface, #111827);
+  --header-border: var(--border, #374151);
+  --header-text: var(--text-white, #f3f4f6);
+  --header-text-secondary: var(--text-tertiary, #9ca3af);
+  --header-hover: var(--bg-hover, #1f2937);
+  --header-primary: var(--blue-muted, #60a5fa);
+  --header-height: 56px;
+  --badge-bg: var(--blue-light, #1e3a5f);
+  --badge-text: var(--blue-muted, #93c5fd);
+  --dropdown-shadow: var(--shadow-lg, 0 4px 24px rgba(0,0,0,.4));
+  --dropdown-bg: var(--bg-card, #111827);
+  --dropdown-border: var(--border, #374151);
+  --dropdown-divider: var(--border-subtle, #1f2937);
+  --red-danger: var(--red-text, #ef4444);
+  --red-danger-bg: var(--red-light, #fef2f2);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+.header {
+  display: flex; align-items: center; justify-content: space-between;
+  height: var(--header-height); padding: 0 16px;
+  background: var(--header-bg); border-bottom: 1px solid var(--header-border);
+  color: var(--header-text); position: relative; z-index: 100;
+}
+.header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
+.header-left a { color: var(--header-text-secondary); text-decoration: none; font-size: 13px; transition: color .15s; white-space: nowrap; }
+.header-left a:hover { color: var(--header-text); text-decoration: none; }
+.logo { height: 28px; width: auto; border-radius: 4px; flex-shrink: 0; }
+.header-right { display: flex; align-items: center; gap: 8px; }
+.avatar {
+  width: 32px; height: 32px; border-radius: 50%; background: var(--header-hover);
+  display: flex; align-items: center; justify-content: center; overflow: hidden;
+  color: var(--header-text-secondary); flex-shrink: 0; cursor: pointer;
+}
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+.user-trigger {
+  position: relative;
+  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0;
+  border: none; background: none; color: var(--header-text);
+  font: inherit;
+}
+.user-name { display: none; }
+.user-arrow { font-size: 12px; color: var(--header-text-secondary); line-height: 1; }
+.badge {
+  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
+  font-size: 11px; font-weight: 500; background: var(--badge-bg); color: var(--badge-text);
+  line-height: 1.45; white-space: nowrap;
+}
+.badge-owner { background: var(--blue-light, #1e3a5f); color: var(--blue-muted, #93c5fd); }
+.badge-admin { background: var(--info-light, #1a2e4a); color: var(--info-text, #7dd3fc); }
+.badge-member { background: var(--green-light, #14352a); color: var(--green-text, #4ade80); }
+.badge-guest { background: var(--yellow-light, #3b2e1a); color: var(--yellow-text, #fbbf24); }
+.dropdown {
+  position: absolute; top: calc(100% + 8px); right: 0;
+  background: var(--dropdown-bg); border: 1px solid var(--dropdown-border);
+  border-radius: 12px; width: 240px; max-width: calc(100vw - 32px);
+  box-shadow: var(--dropdown-shadow); display: none; z-index: 200;
+  overflow: hidden;
+}
+.dropdown.open { display: block; }
+.dropdown-user {
+  padding: 12px 16px; border-bottom: 1px solid var(--dropdown-divider);
+  display: flex; align-items: center; gap: 8px;
+}
+.dropdown-user-name { font-weight: 600; font-size: 15px; color: var(--header-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dropdown-item {
+  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
+  cursor: pointer; color: var(--header-text); font-size: 14px; transition: background .15s;
+  text-decoration: none;
+}
+.dropdown-item:hover { background: var(--header-hover); }
+.dropdown-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--header-text-secondary); }
+.dropdown-item.danger { color: var(--red-danger); }
+.dropdown-item.danger:hover { background: var(--red-danger-bg); }
+.dropdown-item.danger svg { color: var(--red-danger); }
+.dropdown-divider { height: 1px; background: var(--dropdown-divider); margin: 4px 0; }
+.login-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 32px; padding: 0 16px; border-radius: 6px;
+  border: none; background: var(--header-primary); color: #fff;
+  font: inherit; font-weight: 500; cursor: pointer; font-size: 13px;
+  transition: opacity .15s;
+}
+.login-btn:hover { opacity: .9; }
+.hidden { display: none !important; }
+.nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
+.nav-item {
+  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
+  color: var(--header-text-secondary); text-decoration: none; white-space: nowrap;
+  transition: color .15s, background .15s; cursor: pointer; border: none; background: none;
+  font: inherit;
+}
+.nav-item:hover { color: var(--header-text); background: var(--header-hover); }
+.nav-item.active { color: var(--header-primary); background: transparent; font-weight: 600; }
+`,n=class extends f{static observedAttributes=["theme","app-name","app-logo","login-url","user-url","team-url","billing-url","nav-items","locale"];shadow;_user=null;_dropdownOpen=!1;_boundClose=null;constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.fetchSession(),this._boundClose=e=>{this.shadow.contains(e.target)||this.closeDropdown()},document.addEventListener("click",this._boundClose)}disconnectedCallback(){this._boundClose&&document.removeEventListener("click",this._boundClose)}attributeChangedCallback(){this.render()}get appName(){return this.getAttribute("app-name")||""}get appLogo(){return this.getAttribute("app-logo")||"/.well-known/service/blocklet/logo"}get loginUrl(){return this.getAttribute("login-url")||"/.well-known/service/login"}get userUrl(){return this.getAttribute("user-url")||"/.well-known/service/user"}get teamUrl(){return this.getAttribute("team-url")||"/.well-known/service/admin"}get billingUrl(){return this.getAttribute("billing-url")||""}get locale(){return this.getAttribute("locale")==="zh"?"zh":"en"}t(e){return v[this.locale][e]??v.en[e]??e}get navItems(){let e=this.getAttribute("nav-items");if(!e)return[];try{return JSON.parse(e)}catch{return[]}}async fetchSession(){try{let e=await fetch("/.well-known/service/api/did/session",{credentials:"include"});if(!e.ok)return;let t=await e.json();t.authenticated&&t.user&&(this._user=t.user,this.render())}catch{}}closeDropdown(){this._dropdownOpen=!1;let e=this.shadow.querySelector(".dropdown");e&&e.classList.remove("open")}toggleDropdown(e){e.stopPropagation(),this._dropdownOpen=!this._dropdownOpen;let t=this.shadow.querySelector(".dropdown");t&&t.classList.toggle("open",this._dropdownOpen)}abbreviateDid(e){return e.length<=20?e:`${e.slice(0,10)}...${e.slice(-6)}`}render(){let e=this._user,t=this.appLogo,u=this.appName,i=this.navItems,a=window.location.pathname,w=e?.role==="admin"||e?.role==="owner",b=i.length>0?`
+      <nav class="nav">
+        ${i.map(r=>`<a class="nav-item${(r.link==="/"?a==="/":a.startsWith(r.link))?" active":""}" href="${r.link}">${r.label}</a>`).join("")}
+      </nav>
+    `:"";this.shadow.innerHTML=`
+      <style>${C}</style>
+      <div class="header">
+        <div class="header-left">
+          ${t?`<img class="logo" src="${t}" alt="" />`:""}
+          <a href="/">${u||this.t("home")}</a>
+          ${b}
+        </div>
+        <div class="header-right">
+          ${e?`
+            <button class="user-trigger" id="trigger">
+              <div class="avatar">
+                ${e.avatar?`<img src="${e.avatar}" alt="" />`:m}
+              </div>
+              <span class="user-arrow">&#9662;</span>
+            </button>
+            <div class="dropdown" id="dropdown">
+              <div class="dropdown-user">
+                <div class="dropdown-user-name">${e.fullName||e.displayName||this.abbreviateDid(e.did)}</div>
+                <span class="badge badge-${e.role||"member"}">${e.role||"member"}</span>
+              </div>
+              <div class="dropdown-item" id="user-center-link">${k} ${this.t("userCenter")}</div>
+              ${w?`<div class="dropdown-item" id="team-link">${y} ${this.t("adminConsole")}</div>`:""}
+              ${this.billingUrl?`<div class="dropdown-item" id="billing-link"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2m0 14H4v-6h16zm0-10H4V6h16z"/></svg> ${this.t("billing")}</div>`:""}
+              <div class="dropdown-divider"></div>
+              <div class="dropdown-item danger" id="logout-btn">${x} ${this.t("signOut")}</div>
+            </div>
+          `:`
+            <button class="login-btn" id="login-btn">${this.t("signIn")}</button>
+          `}
+        </div>
+      </div>
+    `;let d=this.shadow.getElementById("trigger");d&&d.addEventListener("click",r=>this.toggleDropdown(r));let s=this.shadow.getElementById("login-btn");s&&s.addEventListener("click",()=>{window.location.href=this.loginUrl});let l=this.shadow.getElementById("logout-btn");l&&l.addEventListener("click",()=>{window.location.href="/.well-known/service/api/did/logout"});let h=this.shadow.getElementById("user-center-link");h&&h.addEventListener("click",()=>{window.location.href=this.userUrl});let c=this.shadow.getElementById("team-link");c&&c.addEventListener("click",()=>{window.location.href=this.teamUrl});let g=this.shadow.getElementById("billing-link");g&&g.addEventListener("click",()=>{window.location.href=this.billingUrl}),this.shadow.querySelectorAll(".nav-item").forEach(r=>{r.addEventListener("click",p=>{p.preventDefault();let o=r.getAttribute("href");o&&o!==window.location.pathname&&(window.history.pushState({},"",o),window.dispatchEvent(new PopStateEvent("popstate")),this.render())})})}};typeof customElements<"u"&&!customElements.get("blocklet-header")&&customElements.define("blocklet-header",n);})();