1import{l as ut}from"./index-B8a2M02w.js";import"./preload-helper-BlTxHScW.js";function je(l){return l===null?!0:typeof l=="number"?Number.isFinite(l):typeof l=="string"||typeof l=="boolean"}function xt(l){return JSON.stringify(l)}function mt(l){const d=l.trim();if(!d)return{ok:!1,error:"Enter a JSON string, number, boolean, or null."};let b;try{b=JSON.parse(d)}catch{return{ok:!1,error:"Enter a valid JSON string, number, boolean, or null."}}return je(b)?{ok:!0,value:b}:{ok:!1,error:"Only primitive values can be edited inline."}}function bt(l,d,b){if(d.length===0)return{ok:!1,error:"Choose a value inside the state tree."};const A=At(l,d);return A.exists?je(A.value)?{ok:!0,data:$e(l,d,b)}:{ok:!1,error:"Only primitive values can be edited inline."}:{ok:!1,error:"State path does not exist."}}function At(l,d){let b=l;for(const A of d){if(!yt(b,A))return{exists:!1};b=b[A]}return{exists:!0,value:b}}function yt(l,d){return Array.isArray(l)?typeof d=="number"&&Number.isInteger(d)&&d>=0&&d<l.length:l===null||typeof l!="object"?!1:Object.prototype.hasOwnProperty.call(l,String(d))}function $e(l,d,b){const[A,...x]=d;if(A===void 0)return b;const k=Array.isArray(l)?[...l]:{...l};return k[A]=$e(l[A],x,b),k}let le=null,R=null,P=null,Y=new Map,I=null,H=null,U=null,pe=null;const Ct=".ph-inspect-highlight, .ph-inspect-highlight-hover, .ph-inspect-selected",vt=["ph-inspect-highlight","ph-inspect-highlight-hover","ph-inspect-selected"];function _e(){for(const l of Y.values())l.unsubscribe();Y.clear()}function et(){document.querySelectorAll(Ct).forEach(l=>{l.classList.remove(...vt)}),document.querySelectorAll(".ph-inspect-label").forEach(l=>{l.remove()})}function wt(l){document.querySelectorAll(".ph-inspect-highlight-hover").forEach(d=>{d.classList.remove("ph-inspect-highlight-hover")}),l||document.querySelectorAll(".ph-inspect-highlight").forEach(d=>{d.classList.remove("ph-inspect-highlight")})}const Je="data:image/png;base64,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",Qe={inspect:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',minimize:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="6" y1="12" x2="18" y2="12"/></svg>'},kt={"can-move":"#4a9a8a","can-spin":"#5b8db8","can-toggle":"#c4724e","can-grow":"#d4b85c","can-duplicate":"#8a6abf","can-mirror":"#4a9a8a","can-play":"#3d3833","can-hover":"#5b8db8"},Et="#8a8279",Bt=` 2#playhtml-dev-root { 3 position: fixed; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 z-index: 100000; 8 font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, sans-serif; 9 font-size: 12px; 10 line-height: 1.4; 11 color: #3d3833; 12 pointer-events: none; 13} 14#playhtml-dev-root * { 15 box-sizing: border-box; 16} 17.ph-trigger { 18 pointer-events: auto; 19 position: fixed; 20 bottom: 16px; 21 right: 0; 22 width: 120px; 23 height: 48px; 24 background: linear-gradient(135deg, #f0e9dd 0%, #e8e0d4 40%, #d8d0c4 100%); 25 border: 3px solid; 26 border-color: #f5f0e8 #7a7269 #6b6560 #ede6da; 27 border-right: none; 28 padding: 4px 6px; 29 cursor: pointer; 30 display: flex; 31 flex-direction: row; 32 align-items: center; 33 gap: 6px; 34 z-index: 100000; 35 box-shadow: -2px 0 4px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08), 0 -2px 6px rgba(0,0,0,0.1); 36} 37.ph-trigger:hover { 38 background: linear-gradient(135deg, #f8f2e8 0%, #f0e9dd 40%, #e0
38d8cc 100%); 39 box-shadow: -2px 0 6px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.12), 0 -3px 8px rgba(0,0,0,0.14); 40} 41.ph-trigger img { 42 width: 36px; 43 height: 36px; 44 flex-shrink: 0; 45 filter: drop-shadow(0 0 4px #5b8db8); 46} 47.ph-trigger-grip { 48 display: flex; 49 flex-direction: row; 50 gap: 3px; 51 align-items: center; 52 flex: 1; 53 justify-content: center; 54} 55.ph-trigger-grip span { 56 display: block; 57 width: 2px; 58 height: 16px; 59 background: linear-gradient(180deg, #f5f0e8 0%, #8a8279 50%, #6b6560 100%); 60} 61.ph-bar { 62 pointer-events: auto; 63 display: none; 64 flex-direction: row; 65 background: #e8e0d4; 66 border-left: 3px solid #3d3833; 67 position: fixed; 68 top: 0; 69 right: 0; 70 bottom: 0; 71 width: 400px; 72} 73.ph-bar.ph-open { 74 display: flex; 75} 76.ph-bar-content { 77 display: flex; 78 flex-direction: column; 79 flex: 1; 80 min-width: 0; 81 overflow: hidden; 82} 83.ph-bar-main { 84 flex: 1; 85 min-height: 0; 86 overflow: hidden; 87 display: flex; 88 flex-direction: column; 89} 90.ph-toolbar { 91 display: flex; 92 flex-direction: row; 93 align-items: center; 94 gap: 4px; 95 padding: 4px 8px; 96 background: linear-gradient(180deg, #ede6da 0%, #d4cfc7 100%); 97 border-bottom: 1px solid #8a8279; 98 flex-shrink: 0; 99} 100.ph-toolbar .ph-logo-btn { 101 width: 24px; 102 height: 24px; 103 display: flex; 104 align-items: center; 105 justify-content: center; 106 cursor: default; 107} 108.ph-toolbar .ph-logo-btn img { 109 width: 22px; 110 height: 22px; 111 filter: drop-shadow(0 0 4px #5b8db8); 112} 113.ph-btn { 114 display: inline-flex; 115 align-items: center; 116 justify-content: center; 117 width: 34px; 118 height: 34px; 119 background: #e8e0d4; 120 border: 2px solid; 121 border-color: #f5f0e8 #8a8279 #8a8279 #f5f0e8; 122 cursor: pointer; 123 color: #3d3833; 124 padding: 0; 125} 126.ph-btn:hover { 127 background: #f5f0e8; 128} 129.ph-btn.ph-active { 130 border-color: #8a8279 #f5f0e8 #f5f0e8 #8a8279; 131 background: #d4cfc7; 132} 133.ph-btn svg { 134 width: 16px; 135 height: 16px; 136} 137.ph-data { 138 flex: 1; 139 padding: 6px 10px; 140 overflow-y: auto; 141 background: #f5f0e8; 142 font-size: 12px; 143} 144.ph-data::-webkit-scrollbar {
145 width: 4px; 146} 147.ph-data::-webkit-scrollbar-thumb { 148 background: #d4cfc7; 149} 150.ph-reset-btn { 151 font-family: 'Atkinson Hyperlegible', sans-serif; 152 font-size: 10px; 153 text-transform: uppercase; 154 letter-spacing: 0.5px; 155 color: #c4724e; 156 cursor: pointer; 157 background: #e8e0d4; 158 border: 2px solid; 159 border-color: #f5f0e8 #8a8279 #8a8279 #f5f0e8; 160 padding: 2px 8px; 161} 162.ph-reset-btn:hover { 163 background: #f5f0e8; 164} 165.ph-reset-btn:active { 166 border-color: #8a8279 #f5f0e8 #f5f0e8 #8a8279; 167 background: #d4cfc7; 168} 169.ph-tree-item { 170 padding: 3px 0 3px 14px; 171 border-left: 1px solid #d4cfc7; 172 font-family: 'Martian Mono', 'SF Mono', monospace; 173 font-size: 12px; 174 cursor: pointer; 175 display: flex; 176 align-items: center; 177 gap: 6px; 178} 179.ph-tree-item:hover { 180 background: #faf7f2; 181} 182.ph-tree-toggle { 183 color: #8a8279; 184 font-size: 10px; 185 width: 10px; 186 flex-shrink: 0; 187 text-align: center; 188 user-select: none; 189} 190.ph-tree-key { 191 color: #4a9a8a; 192} 193.ph-tree-value { 194 color: #c4724e; 195} 196.ph-tree-badge { 197 font-family: 'Atkinson Hyperlegible', sans-serif; 198 font-size: 9px; 199 padding: 1px 5px; 200 font-weight: 700; 201 text-transform: uppercase; 202 color: #faf7f2; 203 letter-spacing: 0.3px; 204 flex-shrink: 0; 205} 206.ph-tree-el-name { 207 font-family: 'Atkinson Hyperlegible', sans-serif; 208 font-size: 12px; 209} 210.ph-tree-reset { 211 font-family: 'Atkinson Hyperlegible', sans-serif; 212 font-size: 10px; 213 color: #c4724e; 214 cursor: pointer; 215 opacity: 0; 216 transition: opacity 0.15s; 217 background: none; 218 border: none; 219 padding: 0; 220 margin-left: 4px; 221} 222.ph-tree-item:hover > .ph-tree-reset { 223 opacity: 1; 224} 225.ph-tree-children { 226 display: none; 227 margin-left: 14px; 228 padding-left: 6px; 229 border-left: 1px solid #d4cfc7; 230} 231.ph-tree-children.ph-expanded { 232 display: block; 233} 234.ph-tree-child { 235 padding: 2px 0 2px 28px; 236 font-family: 'Martian Mono', 'SF Mono', monospace; 237 font-size: 11px; 238 border-left: 1px solid #d4cfc7; 239 margin-left: 14px; 240} 241.ph-resize-handle { 242 width: 6px; 243 cursor: ew-resize; 244 background: #d4cfc7; 245 display: flex; 246 align-items: center; 247 justify-content: center; 248 flex-shrink: 0; 249 border-right: 1px solid #8a8279; 250} 251.ph-resize-handle::after { 252 content: ''; 253 width: 2px; 254 height: 40px; 255 background: #8a8279; 256 opacity: 0.5; 257} 258.ph-status { 259 display: flex; 260 flex-direction: column; 261 gap: 2px; 262 padding: 4px 10px; 263 background: #d4cfc7; 264 border-bottom: 1px solid #8a8279; 265 font-family: 'Martian Mono', 'SF Mono', monospace; 266 font-size: 11px; 267 color: #6b6560; 268 flex-shrink: 0; 269} 270.ph-status-row { 271 display: flex; 272 align-items: center; 273 gap: 8px; 274} 275.ph-status .ph-dot { 276 width: 5px; 277 height: 5px; 278 border-radius: 50%; 279 flex-shrink: 0; 280} 281.ph-status .ph-dot.ph-connected { 282 background: #4a9a8a; 283} 284.ph-status .ph-dot.ph-disconnected { 285 background: #c4724e; 286} 287.ph-status .ph-sep { 288 color: #b0a99e; 289} 290.ph-minimize-btn { 291 display: flex; 292 align-items: center; 293 justify-content: center; 294 width: 26px; 295 height: 20px; 296 background: #e8e0d4; 297 border: 2px solid; 298 border-color: #f5f0e8 #8a8279 #8a8279 #f5f0e8; 299 cursor: pointer; 300 color: #3d3833; 301 padding: 0; 302 margin-left: auto; 303} 304.ph-minimize-btn:hover { 305 background: #f5f0e8; 306} 307.ph-minimize-btn:active { 308 border-color: #8a8279 #f5f0e8 #f5f0e8 #8a8279; 309 background: #d4cfc7; 310} 311.ph-minimize-btn svg { 312 width: 12px; 313 height: 12px; 314} 315.ph-status-field { 316 position: relative; 317 border: 1px solid #8a8279; 318 padding: 2px 8px 2px 8px; 319 margin: -2px 0; 320 display: inline-flex; 321 align-items: center; 322} 323.ph-status-field-label { 324 position: absolute; 325 top: -6px; 326 left: 50%; 327 transform: translateX(-50%); 328 background: #d4cfc7; 329 padding: 0 4px; 330 font-size: 9px; 331 text-transform: uppercase; 332 letter-spacing: 0.5px; 333 font-weight: 700; 334 color: #4a9a8a; 335 line-height: 1; 336 white-space: nowrap; 337} 338.ph-json-string { color: #c4724e; } 339.ph-json-number { color: #5b8db8; } 340.ph-json-boolean { color: #d4b85c; } 341.ph-json-null { color: #8a8279; font-style: italic; } 342.ph-json-bracket { color: #8a8279; } 343.ph-json-count { color: #8a8279; font-size: 10px; margin: 0 2px; } 344.ph-json-leaf-value { 345 border: 1px solid transparent; 346 background: transparent; 347 padding: 0 2px; 348 margin: 0; 349 font: inherit; 350 cursor: text; 351} 352.ph-json-leaf-value:hover, 353.ph-json-leaf-value:focus { 354 background: #faf7f2; 355 border-color: #d4cfc7; 356 outline: none; 357} 358.ph-json-leaf-value:disabled { 359 cursor: default; 360} 361.ph-json-edit-wrap { 362 display: inline-flex; 363 align-items: center; 364 gap: 6px; 365} 366.ph-json-edit-input { 367 width: 12ch; 368 min-width: 6ch; 369 max-width: 24ch; 370 border: 1px solid #4a9a8a; 371 background: #faf7f2; 372 color: #3d3833; 373 font: inherit; 374 padding: 1px 3px; 375} 376.ph-json-edit-error { 377 color: #c4724e; 378 font-family: 'Atkinson Hyperlegible', sans-serif; 379 font-size: 10px; 380} 381.ph-json-row { 382 padding: 2px 0 2px 4px; 383 font-family: 'Martian Mono', 'SF Mono', monospace; 384 font-size: 11px; 385} 386.ph-json-expandable { 387 cursor: pointer; 388 user-select: none; 389} 390.ph-json-expandable:hover { 391 background: #faf7f2; 392} 393.ph-json-toggle { 394 color: #8a8279; 395 font-size: 8px; 396 margin-right: 4px; 397 display: inline-block; 398 width: 10px; 399} 400.ph-json-nested { 401 display: block; 402 margin-left: 14px; 403 padding-left: 6px; 404 border-left: 1px solid #d4cfc7; 405} 406.ph-json-nested.ph-collapsed { 407 display: none; 408} 409.ph-search-bar { 410 display: flex; 411 gap: 6px; 412 margin-bottom: 6px; 413 align-items: center; 414} 415.ph-search-input { 416 width: 180px; 417 padding: 3px 8px; 418 font-family: 'Martian Mono', 'SF Mono', monospace; 419 font-size: 11px; 420 color: #3d3833; 421 background: #faf7f2; 422 border: 2px solid; 423 border-color: #8a8279 #f5f0e8 #f5f0e8 #8a8279; 424 outline: none; 425} 426.ph-search-input::placeholder { 427 color: #b0a99e; 428} 429.ph-search-input:focus { 430 border-color: #4a9a8a #d4cfc7 #d4cfc7 #4a9a8a; 431} 432.ph-tag-filter { 433 padding: 3px 6px; 434 font-family: 'Atkinson Hyperlegible', sans-serif; 435 font-size: 11px; 436 color: #3d3833; 437 background: #e8e0d4; 438 border: 2px solid; 439 border-color: #f5f0e8 #8a8279 #8a8279 #f5f0e8; 440 cursor: pointer; 441 appearance: none; 442 -webkit-appearance: none; 443 padding-right: 18px; 444 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8279'/%3
444E%3C/svg%3E"); 445 background-repeat: no-repeat; 446 background-position: right 5px center; 447} 448.ph-tag-filter:hover { 449 background-color: #f5f0e8; 450} 451.ph-empty { 452 text-align: center; 453 padding: 20px; 454 color: #8a8279; 455 font-size: 12px; 456 font-family: 'Atkinson Hyperlegible', sans-serif; 457} 458.ph-duplicate-warning { 459 margin: 0 0 8px 0; 460 padding: 8px 10px; 461 background: #fff0ec; 462 border: 2px solid #c4724e; 463 box-shadow: inset 3px 0 0 #c4724e; 464 color: #3d3833; 465} 466.ph-duplicate-warning-title { 467 font-family: 'Atkinson Hyperlegible', sans-serif; 468 font-size: 12px; 469 font-weight: 800; 470 text-transform: uppercase; 471 letter-spacing: 0.4px; 472 color: #9f3f2a; 473} 474.ph-duplicate-warning-message { 475 margin-top: 3px; 476 font-size: 11px; 477 color: #6b352b; 478} 479.ph-duplicate-warning-list { 480 margin-top: 6px; 481 display: flex; 482 flex-direction: column; 483 gap: 3px; 484 font-family: 'Martian Mono', 'SF Mono', monospace; 485 font-size: 11px; 486} 487.ph-duplicate-warning-item { 488 display: flex; 489 gap: 6px; 490 align-items: center; 491} 492.ph-inspect-highlight { 493 outline: 2px dashed #4a9a8a; 494 outline-offset: 2px; 495 position: relative; 496} 497.ph-inspect-highlight-hover { 498 outline-color: #c4724e; 499 box-shadow: 0 0 0 4px rgba(196, 114, 78, 0.15); 500} 501.ph-inspect-selected { 502 outline: 2px solid #c4724e; 503 outline-offset: 2px; 504} 505.ph-inspect-label { 506 position: absolute; 507 top: -18px; 508 left: 0; 509 background: #4a9a8a; 510 color: #faf7f2; 511 font-family: 'Martian Mono', monospace; 512 font-size: 10px; 513 padding: 2px 8px; 514 pointer-events: none; 515 z-index: 99999; 516 white-space: nowrap; 517} 518@keyframes ph-flash { 519 0% { outline: 3px solid #d4b85c; outline-offset: 2px; } 520 100% { outline: 3px solid transparent; outline-offset: 2px; } 521} 522.ph-flash { 523 animation: ph-flash 0.8s ease-out; 524} 525.ph-tabs { 526 display: flex; 527 gap: 0; 528 background: linear-gradient(180deg, #ede6da 0%, #d4cfc7 100%); 529 border-bottom: 1px solid #8a8279; 530 flex-shrink: 0; 531} 532.ph-tab { 533 font-family: 'Atkinson Hyperlegible', sans-serif; 534 font-size: 11px; 535 font-weight: 600; 536 text-transform: uppercase; 537 letter-spacing: 0.5px; 538 color: #6b6560; 539 background: transparent; 540 border: none; 541 border-right: 1px solid #b0a99e; 542 padding: 6px 12px; 543 cursor: pointer; 544 display: flex; 545 align-items: center; 546 gap: 6px; 547} 548.ph-tab:hover { 549 background: #f5f0e8; 550 color: #3d3833; 551} 552.ph-tab.ph-tab-active { 553 background: #f5f0e8; 554 color: #3d3833; 555 box-shadow: inset 0 -2px 0 #4a9a8a; 556} 557.ph-tab-badge { 558 display: inline-flex; 559 align-items: center; 560 justify-content: center; 561 min-width: 16px; 562 height: 14px; 563 padding: 0 4px; 564 font-family: 'Martian Mono', monospace; 565 font-size: 9px; 566 font-weight: 700; 567 border-radius: 0; 568 color: #faf7f2; 569} 570.ph-tab-badge.ph-badge-error { background: #c4724e; } 571.ph-tab-badge.ph-badge-warn { background: #d4b85c; color: #3d3833; } 572.ph-tab-badge.ph-badge-info { background: #5b8db8; } 573.ph-console { 574 flex: 1; 575 overflow-y: auto; 576 background: #faf7f2; 577 font-family: 'Martian Mono', 'SF Mono', monospace; 578 font-size: 11px; 579 padding: 4px 0; 580} 581.ph-console::-webkit-scrollbar { width: 4px; } 582.ph-console::-webkit-scrollbar-thumb { background: #d4cfc7; } 583.ph-console-row { 584 display: flex; 585 align-items: flex-start; 586 gap: 6px; 587 padding: 3px 8px; 588 border-bottom: 1px solid #ede6da; 589 white-space: pre-wrap; 590 word-break: break-word; 591} 592.ph-console-row.ph-log-error { background: rgba(196, 114, 78, 0.08); } 593.ph-console-row.ph-log-warn { background: rgba(212, 184, 92, 0.08); } 594.ph-console-time { 595 color: #b0a99e; 596 font-size: 10px; 597 flex-shrink: 0; 598} 599.ph-console-level { 600 flex-shrink: 0; 601 width: 12px; 602 text-align: center; 603 font-weight: 700; 604} 605.ph-console-level.ph-log-error { color: #c4724e; } 606.ph-console-level.ph-log-warn { color: #d4b85c; } 607.ph-console-level.ph-log-info { color: #5b8db8; } 608.ph-console-level.ph-log-log { color: #8a8279; } 609.ph-console-msg { flex: 1; min-width: 0; } 610.ph-console-empty { 611 padding: 20px; 612 text-align: center; 613 color: #8a8279; 614 font-family: 'Atkinson Hyperlegible', sans-serif; 615 font-size: 12px; 616} 617`;function We(l){const d=[];for(const b of l){const A=new Map;document.querySelectorAll(`[${b}]`).forEach(x=>
617{if(!(x instanceof HTMLElement)||!x.id)return;const k=A.get(x.id)??[];k.push(x),A.set(x.id,k)}),A.forEach((x,k)=>{x.length<2||d.push({tagType:b,elementId:k,elements:x})})}return d}function n(l,d,b){const A=document.createElement(l);return d&&(A.className=d),b&&Object.entries(b).forEach(([x,k])=>A.setAttribute(x,k)),A}function Lt(l,d){jt();const b=document.getElementById("playhtml-dev-root");b&&b.remove(),_e();const A=document.createElement("style");A.textContent=Bt,document.head.appendChild(A);let x=!1,k=null,T=null;const N=n("div");N.id="playhtml-dev-root",R=N;const O=n("div","ph-trigger"),tt=n("img",void 0,{src:Je,alt:"playhtml"});O.appendChild(tt);const Me=n("div","ph-trigger-grip");for(let e=0;e<4;e++)Me.appendChild(document.createElement("span"));O.appendChild(Me);const E=n("div","ph-bar"),Se=n("div","ph-resize-handle"),V=n("div","ph-bar-content"),q=n("div","ph-toolbar"),Le=n("div","ph-logo-btn"),nt=n("img",void 0,{src:Je,alt:"playhtml"});Le.appendChild(nt),q.appendChild(Le);const B=n("button","ph-btn");B.innerHTML=Qe.inspect,B.title="Inspect",B.style.width="26px",B.style.height="22px",q.appendChild(B);const ze=n("div");ze.style.flex="1",q.appendChild(ze);const Q=n("button","ph-minimize-btn");Q.innerHTML=Qe.minimize,Q.title="Minimize",q.appendChild(Q),V.appendChild(q);const de=n("div","ph-status"),j=n("div","ph-status-row"),ot=n("span","ph-dot ph-connected");j.appendChild(ot),j.appendChild(document.createTextNode("connected"));const Ie=n("span","ph-sep");Ie.textContent="·",j.appendChild(Ie);const Te=document.createTextNode("");j.appendChild(Te);const Ne=n("span","ph-sep");Ne.textContent="·",j.appendChild(Ne);const De=document.createTextNode("");j.appendChild(De);const ce=n("span","ph-sep");ce.textContent="·",j.appendChild(ce);const he=n("span");j.appendChild(he),de.appendChild(j);const W=n("div","ph-status-row");let fe;try{fe=decodeURIComponent(l.roomId)}catch{fe=l.roomId}const ge=n("span","ph-status-field"),Re=n("span","ph-status-field-label");Re.textContent="room",ge.appendChild(Re),ge.appendChild(document.createTextNode(fe)),W.appendChild(ge);const Ye=n("span","ph-sep");Ye.textContent="·",W.appendChild(Ye);const ue=n("span","ph-status-field"),He=n("span","ph-status-field-label");He.textContent="host",ue.appendChild(He),ue.appendChild(document.createTextNode(l.host)),W.appendChild(ue),de.appendChild(W);function X(){let e=1;try{e=l.users.getAll().length}catch{}Te.textContent=`${e} client${e!==1?"s":""}`;let t=0;const a=new Set;d.forEach((s,c)=>{t+=s.size,a.add(c)}),De.textContent=`${t} element${t!==1?"s":""}`;const r=We(a).length;ce.style.display=r>0?"":"none",he.style.display=r>0?"":"none",he.textContent=r>0?`${r} conflict${r!==1?"s":""}`:""}X(),V.appendChild(de);const xe=n("div","ph-tabs"),G=n("button","ph-tab ph-tab-active");G.textContent="Data",xe.appendChild(G);const F=n("button","ph-tab");F.textContent="Console";const M=n("span","ph-tab-badge");M.style.display="none",F.appendChild(M),xe.appendChild(F),V.appendChild(xe);const me=n("div","ph-bar-main"),C=n("div","ph-data"),S=n("div","ph-console");S.style.display="none",me.appendChild(C),me.appendChild(S),V.appendChild(me);function be(e){ee=e,e==="data"?(G.classList.add("ph-tab-active"),F.classList.remove("ph-tab-active"),C.style.display="",S.style.display="none",ve(),X(),L()):(G.classList.remove("ph-tab-active"),F.classList.add("ph-tab-active"),C.style.display="none",S.style.display="",$=0,_=0,Ae=0,Ue(),Oe())}G.addEventListener("click",()=>be("data")),F.addEventListener("click",()=>be("console"));function Ue(){const e=$+_+Ae;if(e===0){M.style.display="none";return}M.style.display="",M.textContent=String(e),M.classList.remove("ph-badge-error","ph-badge-warn","ph-badge-info"),$>0?M.classList.add("ph-badge-error"):_>0?M.classList.add("ph-badge-warn"):M.classList.add("ph-badge-info")}function Oe(){if(S.innerHTML="",K.length===0){const e=n("div","ph-console-empty");e.textContent="No console output yet.",S.appendChild(e);return}for(const e of K){const t=n("div",`ph-console-row ph-log-${e.level}`),a=n("span","ph-console-time"),r=new Date(e.timestamp);a.textContent=r.toLocaleTimeString([],{hour12:!1});const s=n("span",`ph-console-level ph-log-${e.level}`);
617s.textContent=e.level==="error"?"â":e.level==="warn"?"!":e.level==="info"?"i":"·";const c=n("span","ph-console-msg");c.textContent=e.parts.join(" ")+(e.source?` @ ${e.source}`:""),t.appendChild(a),t.appendChild(s),t.appendChild(c),S.appendChild(t)}S.scrollTop=S.scrollHeight}const K=[],it=500;let $=0,_=0,Ae=0,ee="data",ye=!1,Ce=!1;function rt(){Ce||(Ce=!0,queueMicrotask(()=>{Ce=!1,!(R!==N||!E.classList.contains("ph-open")||ee!=="data")&&(X(),L())}))}function ve(){const e=new Set;d.forEach((t,a)=>{t.forEach((r,s)=>{const c=`${a}:${s}`;e.add(c);const v=Y.get(c);v?.handler!==r&&(v?.unsubscribe(),Y.delete(c),typeof r.onDataUpdate=="function"&&Y.set(c,{handler:r,unsubscribe:r.onDataUpdate(rt)}))})});for(const[t,a]of Y)e.has(t)||(a.unsubscribe(),Y.delete(t))}function Fe(e){if(e instanceof Error)return e.stack||`${e.name}: ${e.message}`;if(typeof e=="string")return e;if(e===null)return"null";if(e===void 0)return"undefined";try{return JSON.stringify(e)}catch{return String(e)}}function we(e){K.push(e),K.length>it&&K.shift(),(ee!=="console"||!E.classList.contains("ph-open"))&&(e.level==="error"?$+=1:e.level==="warn"?_+=1:Ae+=1),e.level==="error"&&!ye&&E.classList.contains("ph-open")&&(ye=!0,be("console")),Ue(),ee==="console"&&Oe()}I||(I={log:console.log.bind(console),info:console.info.bind(console),warn:console.warn.bind(console),error:console.error.bind(console)});const st=I;["log","info","warn","error"].forEach(e=>{console[e]=(...t)=>{st[e](...t),we({level:e,timestamp:Date.now(),parts:t.map(Fe)})}}),H&&window.removeEventListener("error",H),U&&window.removeEventListener("unhandledrejection",U),H=e=>{we({level:"error",timestamp:Date.now(),parts:[e.message||String(e.error)],source:e.filename?`${e.filename}:${e.lineno}:${e.colno}`:void 0})},U=e=>{we({level:"error",timestamp:Date.now(),parts:["Unhandled Promise rejection: "+Fe(e.reason)]})},window.addEventListener("error",H),window.addEventListener("unhandledrejection",U),E.appendChild(Se),E.appendChild(V),N.appendChild(O),N.appendChild(E),document.body.appendChild(N);function Z(e,t){if(t===void 0)return;const a=n("span","ph-tree-key");a.textContent=t+": ",e.appendChild(a)}function te(e,t,a,r,s,c,v){const g=n("div","ph-json-row");Z(g,c);const o=n("button",`${r} ph-json-leaf-value`);if(o.type="button",o.textContent=s,s.endsWith('..."')&&(o.title=String(t)),g.appendChild(o),!v){o.disabled=!0,e.appendChild(g);return}o.onclick=p=>{p.stopPropagation(),o.replaceWith(Ze(t,a,r,v))},e.appendChild(g)}function Ze(e,t,a,r){const s=n("span","ph-json-edit-wrap"),c=n("input","ph-json-edit-input"),v=n("span","ph-json-edit-error");c.value=xt(e),c.setAttribute("aria-label","Edit state value"),s.appendChild(c);function g(){const i=n("button",`${a} ph-json-leaf-value`);i.type="button",i.textContent=typeof e=="string"?e.length>80?`"${e.substring(0,80)}..."`:`"${e}"`:String(e),i.onclick=h=>{h.stopPropagation(),i.replaceWith(Ze(e,t,a,r))},s.replaceWith(i)}function o(i){v.textContent=i,v.parentElement||s.appendChild(v)}function p(){const i=mt(c.value);if(!i.ok){o(i.error);return}const h=r(t,i.value);if(!h.ok){o(h.error);return}requestAnimationFrame(()=>L())}return c.onclick=i=>i.stopPropagation(),c.onkeydown=i=>{i.key==="Enter"?(i.preventDefault(),p()):i.key==="Escape"&&(i.preventDefault(),g())},requestAnimationFrame(()=>{c.focus(),c.select()}),s}function ne(e,t,a,r,s,c){if(t===null){te(e,t,r,"ph-json-null","null",s,c);return}if(t===void 0){const g=n("div","ph-json-row");Z(g,s);const o=n("span","ph-json-null");o.textContent="undefined",g.appendChild(o),e.appendChild(g);return}if(typeof t=="string"){te(e,t,r,"ph-json-string",t.length>80?`"${t.substring(0,80)}..."`:`"${t}"`,s,c);return}if(typeof t=="number"){if(!je(t)){const g=n("div","ph-json-row");Z(g,s);const o=n("span","ph-json-number");o.textContent=String(t),g.appendChild(o),e.appendChild(g);return}te(e,t,r,"ph-json-number",String(t),s,c);return}if(typeof t=="boolean"){te(e,t,r,"ph-json-boolean",String(t),s,c);return}if(Array.isArray(t)){const g=n("div","ph-json-row ph-json-expandable"),o=n("span","ph-json-toggle"),p=n("div","ph-json-nested"),i=t.length<=5&&a<=2;o.textContent=i?"â¼":"â¶",i||p.classList.add("ph-collapsed"),s!==void 0&&Z(g,s),g.appendChild(o);const h=n("span","ph-json-bracket");h.textContent="[",g.appendChild(h);const u=n("span","ph-json-count");u.textContent=String(t.length),g.appendChild(u);const f=n("span","ph-json-bracket");f.textContent="]",g.appendChild(f),g.onclick=m=>{m.stopPropagation();const y=p.classList.toggle("ph-collapsed");o.textContent=y?"â¶":"â¼"};for(let m=0;m<t.length;m++)ne(p,t[m],a+1,[...r,m],String(m),c);e.appendChild(g),e.appendChild(p);return}if(typeof t=="object"){const g=Object.keys(t),o=n("div","ph-json-row ph-json-expandable"),p=n("span","ph-json-toggle"),i=n("div","ph-json-nested"),h=g.length<=5&&a<=2;p.textContent=h?"â¼":"â¶",h||i.classList.add("ph-collapsed"),s!==void 0&&Z(o,s),o.appendChild(p);const u=n("span","ph-json-bracket");u.textContent="{",o.appendChild(u);const f=n("span","ph-json-count");f.textContent=String(g.length),o.appendChild(f);const m=n("span","ph-json-bracket");m.textContent="}",o.appendChild(m),o.onclick=y=>{y.stopPropagation();const re=i.classList.toggle("ph-collapsed");p.textContent=re?"â¶":"â¼"};for(const y of g)ne(i,t[y],a+1,[...r,y],y,c);e.appendChild(o),e.appendChild(i);return}const v=n("div","ph-json-row");Z(v,s),v.appendChild(document.createTextNode(String(t))),e.appendChild(v)}function at(e,t,a,r){if(t==null){const s=n("span","ph-json-null");
617s.textContent=String(t),e.appendChild(s)}else if(typeof t=="object"&&!Array.isArray(t))for(const[s,c]of Object.entries(t))ne(e,c,a,[s],s,r);else ne(e,t,a,[],void 0,r)}let D="",J="";function L(){wt(x),C.innerHTML="";const e=n("div","ph-search-bar"),t=n("input","ph-search-input");t.type="text",t.placeholder="Search by element ID...",t.value=D;let a;t.oninput=()=>{D=t.value,clearTimeout(a),a=setTimeout(()=>L(),150)},e.appendChild(t);const r=new Set;d.forEach((o,p)=>r.add(p));const s=We(r);if(r.size>1){const o=n("select","ph-tag-filter"),p=document.createElement("option");p.value="",p.textContent="All types",o.appendChild(p),r.forEach(i=>{const h=document.createElement("option");h.value=i,h.textContent=i,o.appendChild(h)}),o.value=J,o.onchange=()=>{J=o.value,L()},e.appendChild(o)}const c=n("button","ph-reset-btn");if(c.textContent="Reset All",c.onclick=()=>{window.confirm("Reset all playhtml element data?")&&(d.forEach(o=>{o.forEach(p=>{p.setData(p.defaultData)})}),L())},e.appendChild(c),C.appendChild(e),s.length>0){const o=n("div","ph-duplicate-warning"),p=n("div","ph-duplicate-warning-title");p.textContent="Error: Duplicate playhtml IDs",o.appendChild(p);const i=n("div","ph-duplicate-warning-message");i.textContent="These elements share synced data and later duplicates are ignored.",o.appendChild(i);const h=n("div","ph-duplicate-warning-list");for(const u of s){const f=n("div","ph-duplicate-warning-item"),m=n("span","ph-tree-badge");m.textContent=u.tagType,m.style.background="#c4724e";const y=n("span");y.textContent=`#${u.elementId} (${u.elements.length})`,f.appendChild(m),f.appendChild(y),h.appendChild(f)}o.appendChild(h),C.insertBefore(o,e)}requestAnimationFrame(()=>{D&&(t.focus(),t.setSelectionRange(D.length,D.length))});let v=!1;if(d.forEach(o=>{o.size>0&&(v=!0)}),v){let o=0;if(d.forEach((p,i)=>{J&&i!==J||p.forEach((h,u)=>{if(D&&!u.toLowerCase().includes(D.toLowerCase()))return;o++;const f=n("div","ph-tree-item");f.setAttribute("data-element-id",u),f.setAttribute("data-tag-type",i);const m=n("span","ph-tree-toggle");m.textContent="â¶";const y=n("span","ph-tree-badge");y.textContent=i,y.style.background=kt[i]||Et;const re=n("span","ph-tree-el-name");re.textContent=`#${u}`;const Be=n("button","ph-tree-reset");Be.textContent="reset",Be.onclick=w=>{w.stopPropagation(),h.setData(h.defaultData),L()},f.onmouseenter=()=>{const w=document.getElementById(u);w&&w.classList.add("ph-inspect-highlight","ph-inspect-highlight-hover")},f.onmouseleave=()=>{const w=document.getElementById(u);w&&w.classList.remove("ph-inspect-highlight","ph-inspect-highlight-hover")},f.appendChild(m),f.appendChild(y),f.appendChild(re),f.appendChild(Be);const se=n("div","ph-tree-children");at(se,h.data,0,(w,ae)=>{const z=bt(h.data,w,ae);return z.ok?(h.setData(z.data),{ok:!0}):z});function Ke(){const w=se.classList.toggle("ph-expanded");m.textContent=w?"â¼":"â¶"}m.onclick=w=>{w.stopPropagation(),Ke()},f.onclick=w=>{const ae=w.target;if(ae.closest(".ph-tree-toggle")||ae.closest(".ph-tree-reset"))return;const z=document.getElementById(u);z&&(z.scrollIntoView({behavior:"smooth",block:"center"}),z.classList.add("ph-flash"),z.addEventListener("animationend",()=>z.classList.remove("ph-flash"),{once:!0})),se.classList.contains("ph-expanded")||Ke()},C.appendChild(f),C.appendChild(se)})}),o===0&&(D||J)){const p=n("div","ph-empty");p.textContent="No elements match the current filter.",C.appendChild(p)}}else{const o=n("div","ph-empty");o.textContent="No playhtml elements found.",C.appendChild(o)}if(s.length>0){const o=document.createElement("hr");o.style.border="none",o.style.borderTop="1px solid #d4cfc7",o.style.margin="6px 0",C.appendChild(o);const p=n("div","ph-data-header");p.textContent="Duplicate IDs",p.style.fontSize="10px",C.appendChild(p);for(const i of s){const h=n("div","ph-tree-item"),u=n("span","ph-tree-badge");u.textContent=i.tagType,u.style.background="#c4724e";const f=n("span","ph-tree-el-name");f.textContent=`#${i.elementId} (${i.elements.length})`,f.title="Multiple elements with this ID share the same capability tag.",f.onclick=m=>{m.stopPropagation();for(const y of i.elements)y.classList.add("ph-flash"),y.addEventListener("animationend",()=>y.classList.remove("ph-flash"),{once:!0});i.elements[0]?.scrollIntoView({behavior:"smooth",block:"center"})},h.appendChild(u),h.appendChild(f),C.appendChild(h)}}const g=ut();if(g.length>0){const o=document.createElement("hr");o.style.border="none",o.style.borderTop="1px solid #d4cfc7",o.style.margin="6px 0",C.appendChild(o);const p=n("div","ph-data-header");p.textContent="Shared Elements",p.style.fontSize="10px",C.appendChild(p);for(const i of g){const h=n("div","ph-tree-item"),u=n("span","ph-tree-badge");i.type==="source"?(u.textContent="SRC",u.style.background="#4a9a8a"):(u.textContent="REF",u.style.background="#5b8db8");const f=n("span","ph-tree-el-name");f.textContent=`#${i.elementId}
617`,f.title=i.dataSource,f.onclick=m=>{m.stopPropagation(),i.element.scrollIntoView({behavior:"smooth",block:"center"}),i.element.classList.add("ph-flash"),i.element.addEventListener("animationend",()=>i.element.classList.remove("ph-flash"),{once:!0})},h.appendChild(u),h.appendChild(f),C.appendChild(h)}}}let oe=400,ie=240;const lt=document.body.style.marginRight,pt=document.body.style.marginBottom;function Pe(){return N.dataset.position==="bottom"?"bottom":"right"}function dt(){O.style.display="none",E.classList.add("ph-open"),Pe()==="bottom"?document.body.style.marginBottom=`${ie}px`:document.body.style.marginRight=`${oe}px`,ve(),X(),L()}function ct(){O.style.display="",E.classList.remove("ph-open"),document.body.style.marginRight=lt,document.body.style.marginBottom=pt,ye=!1,x&&(x=!1,B.classList.remove("ph-active"),Ee())}let ke=0;d.forEach(e=>{ke+=e.size});function Ve(){ve();let e=0;d.forEach(t=>{e+=t.size}),e!==ke&&(ke=e,E.classList.contains("ph-open")&&(X(),L()))}const qe=new MutationObserver(e=>{for(const t of e)if(N.contains(t.target))return;Ve()});qe.observe(document.documentElement,{childList:!0,subtree:!0}),P!==null&&window.clearInterval(P),P=window.setInterval(Ve,250),le=qe,O.addEventListener("click",()=>dt()),Q.onclick=()=>ct(),Se.addEventListener("mousedown",e=>{e.preventDefault();const t=Pe(),a=s=>{t==="bottom"?(ie=Math.max(120,Math.min(window.innerHeight-100,window.innerHeight-s.clientY)),E.style.height=`${ie}px`,document.body.style.marginBottom=`${ie}px`):(oe=Math.max(280,Math.min(700,window.innerWidth-s.clientX)),E.style.width=`${oe}px`,document.body.style.marginRight=`${oe}px`)},r=()=>{document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",r)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",r)});function ht(e){let t=null;return d.forEach((a,r)=>{a.has(e)&&(t={tagType:r,handler:a.get(e)})}),t}function ft(e){const t=C.querySelector(`.ph-tree-item[data-element-id="${e}"]`);if(!t)return;t.scrollIntoView({behavior:"smooth",block:"nearest"});const a=t.nextElementSibling;if(a&&a.classList.contains("ph-tree-children")){a.classList.add("ph-expanded");const r=t.querySelector(".ph-tree-toggle");r&&(r.textContent="â¼")}}function gt(){document.querySelectorAll("[class*='__playhtml-']").forEach(t=>{const a=t;a.classList.add("ph-inspect-highlight");const r=a.id;if(r){const s=n("div","ph-inspect-label");s.textContent=`#${r}`,a.appendChild(s)}})}function Ee(){et(),T=null}B.onclick=()=>{x=!x,B.classList.toggle("ph-active",x),x?gt():Ee()};const Xe=e=>{if(!x)return;const t=e.target.closest("[class*='__playhtml-']");t&&t!==T?(T&&T.classList.remove("ph-inspect-highlight-hover"),T=t,t.classList.add("ph-inspect-highlight-hover")):t||T&&(T.classList.remove("ph-inspect-highlight-hover"),T=null)};document.addEventListener("mousemove",Xe);const Ge=e=>{if(!x)return;const t=document.getElementById("playhtml-dev-root");if(t&&t.contains(e.target))return;const a=e.target.closest("[class*='__playhtml-']");if(a){e.preventDefault(),e.stopPropagation(),document.querySelectorAll(".ph-inspect-selected").forEach(c=>c.classList.remove("ph-inspect-selected")),a.classList.add("ph-inspect-selected");const r=a.id;k=r||null;const s=r?ht(r):null;s&&console.log(`[playhtml inspect] ${s.tagType} #${k}`,s.handler.data),r&&ft(r)}};document.addEventListener("click",Ge,!0),pe=()=>{x=!1,B.classList.remove("ph-active"),document.removeEventListener("mousemove",Xe),document.removeEventListener("click",Ge,!0),Ee()}}function jt(){pe?(pe(),pe=null):et(),I&&(console.log=I.log,console.info=I.info,console.warn=I.warn,console.error=I.error,I=null),H&&(window.removeEventListener("error",H),H=null),U&&(window.removeEventListener("unhandledrejection",U),U=null),le&&(le.disconnect(),le=null),P!==null&&(window.clearInterval(P),P=null),_e(),R&&R.parentElement&&(R.parentElement.removeChild(R),R=null)}export{We as listDuplicatePlayElements,ut as listSharedElements,Lt as setupDevUI,jt as teardownDevUI};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.