@mathews_cometchat/bubble-builder 1.0.0-alpha19 → 1.0.0-alpha21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/bubble-builder.css +1 -1
  2. package/dist/bubble-builder.es.js +9 -1
  3. package/dist/bubble-builder.umd.js +1 -1
  4. package/package.json +2 -1
package/dist/bubble-builder.css CHANGED
@@ -1,2 +1,2 @@
1
- .tl-container{max-width:860px;margin:0 auto;padding:64px 24px}.tl-header{text-align:center;margin-bottom:44px}.tl-logo{background:var(--accent-primary);color:#fff;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 16px;font-size:16px;font-weight:800;display:flex}.tl-title{color:var(--text-primary);font-size:16px;font-weight:700}.tl-subtitle{color:var(--text-secondary);margin-top:6px;font-size:14px}.tl-actions{gap:10px;margin-bottom:36px;display:flex}.tl-search{flex:1}.tl-section{margin-bottom:36px}.tl-section-title{color:#141414;margin-bottom:12px;font-size:14px;font-weight:600}.tl-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;display:grid}.tl-card{text-align:left;box-shadow:none;background:#fff;border:1px solid #e9eaeb;border-radius:8px;padding:16px;transition:all .15s}.tl-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-sm)}.tl-card-badge{text-transform:uppercase;letter-spacing:.5px;color:var(--accent-primary);margin-bottom:6px;font-size:11px;font-weight:700}.tl-card-name{color:#141414;font-size:14px;font-weight:600}.tl-card-desc{color:#727272;margin-top:2px;font-size:12px}.tl-card-date{color:#bfbfbc;margin-top:4px;font-size:11px}.tl-card{position:relative}.tl-card-delete{width:22px;height:22px;color:var(--text-tertiary);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:14px;transition:all .15s;display:flex;position:absolute;top:8px;right:8px}.tl-card:hover .tl-card-delete{opacity:1}.tl-card-delete:hover{color:#dc2626;background:#fee2e2}.tl-pagination{justify-content:space-between;align-items:center;margin-top:16px;display:flex}.tl-loading{text-align:center;color:var(--text-tertiary);padding:40px 20px;font-size:13px}.topbar{background:var(--bg-primary);border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex;position:relative}.topbar-left{align-items:center;gap:12px;display:flex}.topbar-back{border-radius:var(--radius-sm);color:var(--text-secondary);padding:4px 6px;font-size:18px}.topbar-back:hover{background:var(--bg-tertiary);color:var(--text-primary)}.topbar-logo{align-items:center;gap:8px;display:flex}.topbar-logo-icon{background:var(--accent-primary);color:#fff;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;font-size:9px;font-weight:800;display:flex}.topbar-logo span{color:var(--text-primary);letter-spacing:-.3px;font-size:16px;font-weight:600}.topbar-sep{background:var(--border-medium);width:1px;height:16px}.topbar-title{color:var(--text-secondary);font-size:14px;font-weight:500}.topbar-name{border-radius:var(--radius-sm);min-width:140px;max-width:200px;color:var(--text-primary);box-shadow:none;background:0 0;border:1px solid #0000;padding:6px 8px;font-size:14px;font-weight:500}.topbar-name:hover{border-color:var(--border-medium)}.topbar-name:focus{border-color:var(--accent-primary)}.topbar-dirty{color:var(--accent-primary);font-size:8px}.topbar-right{align-items:center;gap:8px;display:flex}.topbar-btn{color:#414651;background:#fff;border-radius:8px;outline:1px solid #d5d7da;align-items:center;gap:6px;height:36px;padding:0 16px;font-size:14px;font-weight:600;line-height:1.333;transition:all .15s;display:flex}.topbar-btn:hover{background:#f5f5f5}.topbar-toast{color:#fff;background:var(--success);z-index:2000;border-radius:8px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.modal-subtitle{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 8px;font-size:11px;font-weight:600}.modal-field{margin-bottom:12px}.modal-label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.topbar-btn-icon{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);justify-content:center;align-items:center;font-size:16px;transition:all .15s;display:flex}.topbar-btn-icon:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.topbar-btn-icon:disabled{opacity:.3;cursor:default}.topbar-btn-warn{color:#d97706;background:#fffbeb;border-color:#fcd34d}.topbar-btn-warn:hover{background:#fef3c7}.topbar-errors{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);z-index:100;min-width:280px;max-height:200px;box-shadow:var(--shadow-lg);background:#fff;margin-top:8px;padding:8px;font-size:12px;position:absolute;top:100%;right:0;overflow-y:auto}.topbar-error-item{border-radius:4px;flex-direction:column;gap:2px;padding:6px 8px;display:flex}.topbar-error-item:hover{background:#fef3c7}.topbar-error-path{font-family:var(--font-mono);color:#d97706;font-size:10px}.topbar-dropdown{position:relative}.topbar-dropdown-menu{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);z-index:100;min-width:180px;box-shadow:var(--shadow-lg);margin-top:6px;padding:4px;position:absolute;top:100%;right:0}.topbar-dropdown-item{width:100%;color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:400;display:flex}.topbar-dropdown-item:hover{background:var(--bg-tertiary)}.left-panel{background:var(--bg-primary);border-right:1px solid var(--border-subtle);flex-direction:column;flex-shrink:0;width:260px;display:flex;overflow:hidden}.palette-header{border-bottom:1px solid var(--border-subtle);padding:16px}.lp-tabs{background:var(--bg-tertiary);border-radius:var(--radius-md);gap:0;padding:3px;display:flex}.lp-tab{color:var(--text-secondary);border-radius:var(--radius-sm);background:0 0;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.lp-tab:hover{color:var(--text-primary)}.lp-tab.active{background:var(--bg-primary);color:var(--accent-primary);box-shadow:var(--shadow-sm)}.lp-tab-icon{font-size:14px}.lp-content{flex:1;padding:12px;overflow-y:auto}.lp-category{margin-bottom:8px}.lp-category-header{width:100%;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;justify-content:space-between;align-items:center;padding:10px 8px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.lp-category-header:hover{background:var(--bg-tertiary)}.lp-category-title{text-transform:none;letter-spacing:0;align-items:center;gap:8px;display:flex}.lp-category-icon{color:var(--text-primary);font-size:18px}.lp-category-arrow{color:var(--text-tertiary);font-size:18px;transition:transform .2s}.lp-category-arrow.closed{transform:rotate(-90deg)}.lp-element-list{flex-direction:column;gap:2px;padding:4px 0 8px;display:flex}.lp-element-btn{background:var(--bg-secondary);border-radius:var(--radius-sm);color:var(--text-primary);text-align:left;border:1px solid #0000;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.lp-element-btn:hover{background:var(--accent-light);border-color:var(--border-accent)}.lp-element-icon{color:var(--text-primary);font-size:18px}.lp-element-label{font-size:13px;font-weight:500}.lp-component-list{flex-direction:column;gap:6px;padding:4px 0 8px;display:flex}.lp-component-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;align-items:center;gap:10px;width:100%;padding:10px 12px;transition:all .15s;display:flex}.lp-component-card:hover{background:var(--accent-light);border-color:var(--border-accent)}.lp-card-icon{background:var(--bg-tertiary);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:22px;display:flex}.lp-component-card:hover .lp-card-icon{background:#6852d61a}.lp-card-info{flex-direction:column;gap:1px;min-width:0;display:flex}.lp-card-name{color:var(--text-primary);font-size:12px;font-weight:600}.lp-card-desc{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.3;overflow:hidden}.lp-footer{border-top:1px solid var(--border-subtle);padding:12px}.lp-footer-hint{background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-secondary);justify-content:center;align-items:center;gap:8px;padding:10px;font-size:11px;display:flex}.lp-search{border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);width:100%;color:var(--text-primary);padding:6px 10px;font-size:12px}.lp-search:focus{border-color:var(--accent-primary);outline:none}.canvas{background:var(--bg-secondary);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.canvas-area{background:radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0);background-size:24px 24px;flex:1;justify-content:center;align-items:center;padding:32px 24px;display:flex;overflow:auto}.phone-frame{background:#fff;border-radius:32px;flex-direction:column;flex-shrink:0;width:375px;height:667px;max-height:667px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000f,0 2px 4px #0000000a,0 12px 32px #00000014,0 32px 64px #0000000f}.phone-frame:before{content:"";z-index:10;background:#e0e0e0;border-radius:2px;width:80px;height:4px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.phone-screen{background:#f5f5f5;flex-direction:column;height:100%;margin-top:0;display:flex;overflow:hidden}.chat-header{background:#fff;border-bottom:1px solid #0000000f;align-items:center;padding:20px 16px 14px;display:flex}.chat-back-btn{color:var(--text-secondary);opacity:.6;padding:2px 4px;font-size:20px}.chat-user{flex:1;align-items:center;gap:10px;margin-left:10px;display:flex}.chat-avatar{color:#fff;background:linear-gradient(135deg,#6852d6,#8b7ae8);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:600;display:flex;box-shadow:0 2px 8px #6852d64d}.chat-name{color:var(--text-primary);letter-spacing:-.01em;font-size:14px;font-weight:600}.chat-messages{background:#f5f6f7;flex-direction:column;flex:1;gap:12px;min-height:0;padding:16px;display:flex;overflow:hidden auto}.message-date{text-align:center;color:var(--text-tertiary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.02em;background:#fffc;border-radius:12px;align-self:center;padding:5px 12px;font-size:11px;font-weight:500}.bubble-preview{flex-shrink:0;align-self:flex-start;width:100%;min-height:50px;position:relative;overflow:visible}.canvas-bubble{border-radius:16px 16px 16px 4px;flex-direction:column;gap:2px;display:flex;overflow:visible;box-shadow:0 1px 2px #0000000f,0 1px 3px #0000000a}.canvas-empty{color:var(--text-tertiary);text-align:center;border:2px dashed var(--border-medium);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff9;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:8px;padding:40px 20px;font-size:13px;display:flex}.canvas-empty-icon{color:var(--accent-primary);opacity:.4;background:var(--accent-light);border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:28px;display:flex}.chat-input-area{background:#fff;border-top:1px solid #0000000f;align-items:center;gap:10px;padding:10px 14px;display:flex}.chat-input{border:1px solid var(--border-subtle);color:var(--text-primary);background:#f5f6f7;border-radius:20px;flex:1;padding:9px 16px;font-size:13px}.chat-send-btn{background:var(--accent-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 2px 8px #6852d64d}.chat-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #6852d666}.el-wrapper{cursor:pointer;border-radius:4px;width:100%;transition:all .12s;position:relative;overflow:visible}.el-wrapper:hover{background:#6852d60a}.el-wrapper.selected{outline:2px solid var(--accent-primary);outline-offset:-2px;background:#6852d60a}.el-wrapper.multi-selected{outline:2px dashed var(--accent-primary);outline-offset:-2px;background:#6852d60a}.el-controls-portal{z-index:9999;background:#fff;border-radius:8px;flex-direction:row;gap:2px;padding:3px;display:flex;box-shadow:0 2px 12px #0000001f,0 0 0 1px #0000000a}.preview-mode .el-controls-portal{display:none}.el-ctrl-btn{width:26px;height:26px;color:var(--text-secondary);border-radius:5px;justify-content:center;align-items:center;font-size:13px;transition:all .12s;display:flex}.el-ctrl-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.el-ctrl-btn.danger:hover{color:#dc2626;background:#fee2e2}.el-wrap-menu{border:1px solid var(--border-subtle);z-index:1001;background:#fff;border-radius:10px;min-width:140px;margin-bottom:4px;padding:4px;position:absolute;bottom:100%;right:0;box-shadow:0 8px 24px #0000001f}.el-wrap-option{text-align:left;color:var(--text-secondary);white-space:nowrap;border-radius:6px;width:100%;padding:7px 12px;font-size:12px}.el-wrap-option:hover{background:var(--accent-light);color:var(--accent-primary)}.canvas-breadcrumbs{border-bottom:1px solid var(--border-subtle);background:#fff;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 16px;font-size:12px;display:flex}.canvas-bc-sep{color:var(--text-muted);margin:0 2px;font-size:10px}.canvas-bc-item{color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);border-radius:4px;padding:2px 8px}.canvas-bc-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.canvas-bc-item.active{color:var(--accent-primary);background:var(--accent-light)}.multi-select-bar{border:1px solid var(--border-subtle);z-index:100;background:#fff;border-radius:12px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:flex;position:absolute;bottom:60px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000001f}.multi-select-bar span{color:var(--text-secondary);white-space:nowrap}.multi-select-bar button{background:var(--accent-light);color:var(--accent-primary);white-space:nowrap;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .15s}.multi-select-bar button:hover{background:var(--accent-primary);color:#fff}.canvas-bubble ::-webkit-scrollbar{height:3px}.canvas-bubble ::-webkit-scrollbar-track{background:0 0}.canvas-bubble ::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.canvas-toolbar{border-top:1px solid var(--border-subtle);background:#fff;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:6px 12px;font-size:12px;display:flex}.canvas-tool-btn{width:28px;height:28px;color:var(--text-secondary);border-radius:6px;justify-content:center;align-items:center;font-size:14px;transition:all .12s;display:flex}.canvas-tool-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.canvas-tool-btn.active{background:var(--accent-light);color:var(--accent-primary)}.canvas-tool-label{color:var(--text-secondary);text-align:center;min-width:36px;font-size:11px}.canvas-tool-sep{background:var(--border-medium);width:1px;height:16px;margin:0 4px}.preview-mode .el-wrapper{cursor:default}.preview-mode .el-wrapper:hover{background:0 0}.preview-mode .el-wrapper.selected,.preview-mode .el-wrapper.multi-selected{background:0 0;outline:none}.preview-mode .canvas-breadcrumbs,.preview-mode .multi-select-bar{display:none}.json-preview-panel{background:var(--bg-primary);border-left:1px solid var(--border-subtle);z-index:60;flex-direction:column;width:380px;display:flex;position:absolute;top:0;bottom:0;right:0;box-shadow:-4px 0 24px #0000000f}.json-preview-header{border-bottom:1px solid var(--border-subtle);color:var(--text-primary);background:var(--bg-secondary);align-items:center;gap:8px;padding:12px 16px;font-size:13px;font-weight:600;display:flex}.json-preview-header span{flex:1}.json-preview-header button{width:28px;height:28px;color:var(--text-secondary);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:14px;display:flex}.json-preview-header button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.json-preview-code{font-family:var(--font-mono);color:var(--text-primary);white-space:pre;tab-size:2;background:var(--bg-primary);flex:1;margin:0;padding:16px;font-size:12px;line-height:1.6;overflow:auto}.el-context-menu{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:10px;min-width:160px;padding:4px;font-size:12px;box-shadow:0 8px 24px #0000001f}.el-ctx-item{text-align:left;width:100%;color:var(--text-secondary);white-space:nowrap;border-radius:6px;padding:6px 12px;display:block}.el-ctx-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.el-ctx-item.danger:hover{color:#dc2626;background:#fee2e2}.el-ctx-sep{background:var(--border-subtle);height:1px;margin:4px 0}.tree-root{font-size:13px}.tree-item{border-radius:var(--radius-sm);text-align:left;width:100%;color:var(--text-secondary);cursor:pointer;align-items:center;gap:6px;min-height:28px;padding:6px 8px;transition:all .15s;display:flex}.tree-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.tree-item.selected{background:var(--accent-light);color:var(--accent-primary)}.tree-item.multi-selected{background:var(--accent-light);color:var(--accent-primary);outline:1px dashed var(--accent-primary);outline-offset:-1px}.tree-item.drop-target{outline:2px dashed var(--accent-primary);outline-offset:-2px}.tree-item.container .tree-type{font-weight:600}.tree-arrow{text-align:center;width:12px;color:var(--text-tertiary);cursor:pointer;font-size:10px;transition:transform .15s}.tree-arrow.collapsed{transform:rotate(-90deg)}.tree-dot{text-align:center;width:12px}.tree-dot:after{content:"";background:var(--border-medium);vertical-align:middle;border-radius:50%;width:4px;height:4px;display:inline-block}.tree-type{font-family:var(--font-mono);font-size:12px}.tree-label{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;overflow:hidden}.tree-empty{color:var(--text-tertiary);flex-direction:column;align-items:center;gap:8px;padding:24px;font-size:13px;display:flex}.tree-badge{background:var(--bg-tertiary);color:var(--text-tertiary);border-radius:8px;flex-shrink:0;margin-left:auto;padding:1px 5px;font-size:9px}.tree-error-dot{background:#dc2626;border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-left:auto}.tree-badge+.tree-error-dot,.tree-error-dot+.tree-badge{margin-left:4px}.tree-drag-overlay{background:var(--bg-primary);border-radius:var(--radius-sm);opacity:.9;box-shadow:0 4px 12px #00000026}.tree-node{touch-action:none}.tree-drop-gap{height:4px;transition:height .1s;position:relative}.tree-drop-gap.active{height:8px}.tree-drop-gap .tree-drop-line{background:0 0;border-radius:1px;height:2px;transition:background .1s}.tree-drop-gap.active .tree-drop-line{background:var(--accent-primary)}.tree-search-wrap{margin-bottom:8px;position:relative}.tree-search{border:1px solid var(--border-subtle);background:var(--bg-secondary);width:100%;color:var(--text-primary);border-radius:6px;padding:7px 28px 7px 10px;font-size:12px}.tree-search:focus{border-color:var(--accent-primary)}.tree-search::placeholder{color:var(--text-muted)}.tree-search-clear{width:18px;height:18px;color:var(--text-tertiary);background:var(--bg-tertiary);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.tree-search-clear:hover{color:var(--text-primary)}.right-panel{background:var(--bg-primary);border-left:1px solid var(--border-subtle);flex-direction:column;flex-shrink:0;width:300px;display:flex;overflow:hidden}.rp-tabs{border-bottom:1px solid var(--border-subtle);display:flex}.rp-tab{color:var(--text-secondary);background:0 0;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:14px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.rp-tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.rp-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.rp-content{flex:1;padding:16px;overflow-y:auto}.rp-empty{color:var(--text-tertiary);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:48px 24px;display:flex}.rp-empty-icon{color:var(--border-medium);font-size:48px}.prop-group{margin-bottom:16px}.prop-group-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;font-size:11px;font-weight:600}.prop-field{margin-bottom:12px}.prop-label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.prop-row{align-items:center;gap:8px;display:flex}.prop-badge{background:var(--accent-light);color:var(--accent-primary);text-transform:uppercase;letter-spacing:.5px;border-radius:4px;margin-bottom:16px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.prop-error-summary{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:4px;margin-bottom:12px;padding:6px 10px;font-size:12px;font-weight:500}.prop-field-error input,.prop-field-error textarea,.prop-field-error select{box-shadow:0 0 0 1px #fecaca;border-color:#dc2626!important}.prop-field-error-hint{color:#dc2626;margin-left:6px;font-size:11px;font-weight:400}.shortcuts-overlay{z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcuts-panel{background:#fff;border-radius:16px;width:320px;padding:0;overflow:hidden;box-shadow:0 16px 48px #0003}.shortcuts-header{border-bottom:1px solid var(--border-subtle);color:var(--text-primary);justify-content:space-between;align-items:center;padding:16px 20px;font-size:14px;font-weight:600;display:flex}.shortcuts-close{width:24px;height:24px;color:var(--text-tertiary);border-radius:6px;justify-content:center;align-items:center;font-size:16px;display:flex}.shortcuts-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.shortcuts-list{padding:12px 20px 16px}.shortcut-row{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.shortcut-row:last-child{border-bottom:none}.shortcut-action{color:var(--text-secondary);font-size:13px}.shortcut-keys{font-family:var(--font-mono);background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:4px;padding:3px 8px;font-size:11px;font-weight:500}.editor-root{background:var(--bg-secondary);flex-direction:column;width:100%;height:100%;display:flex}.editor-panels{flex:1;display:flex;overflow:hidden}:root{--bg-primary:#fff;--bg-secondary:#f5f5f5;--bg-tertiary:#f5f5f5;--bg-elevated:#fff;--bg-hover:#f5f5f5;--bg-active:#f3f0ff;--accent-primary:#6852d6;--accent-secondary:#7c6be6;--accent-light:#f3f0ff;--accent-gradient:linear-gradient(135deg, #6852d6 0%, #7c6be6 100%);--accent-glow:#6852d633;--text-primary:#141414;--text-secondary:#727272;--text-tertiary:#414651;--text-muted:#bfbfbc;--border-subtle:#e9eaeb;--border-medium:#d5d7da;--border-accent:#6852d64d;--success:#10b981;--warning:#f59e0b;--error:#d92d20;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 10px 25px #0000001a;--radius-sm:8px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:"Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SF Mono", "Fira Code", monospace}@font-face{font-family:Satoshi;src:url(https://cdn.fontshare.com/wf/RVPXLBADJTQXBIMXQMGXVL3RAWQO3GYP/UPQNUQSJHRAZPGIY5EU7VMJMOQHK76OA/SITBAY6OYFA7BNHFJBHWIL6FHWMCOP2Q.woff2)format("woff2");font-weight:300 900;font-display:swap}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:var(--font-sans);background:var(--bg-secondary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}button{cursor:pointer;color:inherit;font:inherit;background:0 0;border:none}input,textarea,select{border:1px solid var(--border-medium);width:100%;color:var(--text-primary);background:#fff;border-radius:8px;outline:none;padding:10px 12px;font-family:inherit;font-size:14px;font-weight:400;line-height:1.5;transition:border-color .15s}input:focus,textarea:focus,select:focus{border-color:var(--accent-primary)}input::placeholder,textarea::placeholder{color:var(--text-muted)}select{appearance:none;cursor:pointer;padding-right:28px}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary)}input[type=color]{border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);cursor:pointer;width:40px;height:36px;padding:2px}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}textarea{resize:vertical;min-height:60px}
1
+ .bb-root .tl-container{max-width:860px;margin:0 auto;padding:64px 24px}.bb-root .tl-header{text-align:center;margin-bottom:44px}.bb-root .tl-logo{background:var(--accent-primary);color:#fff;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 16px;font-size:16px;font-weight:800;display:flex}.bb-root .tl-title{color:var(--text-primary);font-size:16px;font-weight:700}.bb-root .tl-subtitle{color:var(--text-secondary);margin-top:6px;font-size:14px}.bb-root .tl-actions{gap:10px;margin-bottom:36px;display:flex}.bb-root .tl-search{flex:1}.bb-root .tl-section{margin-bottom:36px}.bb-root .tl-section-title{color:#141414;margin-bottom:12px;font-size:14px;font-weight:600}.bb-root .tl-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;display:grid}.bb-root .tl-card{text-align:left;box-shadow:none;background:#fff;border:1px solid #e9eaeb;border-radius:8px;padding:16px;transition:all .15s}.bb-root .tl-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-sm)}.bb-root .tl-card-badge{text-transform:uppercase;letter-spacing:.5px;color:var(--accent-primary);margin-bottom:6px;font-size:11px;font-weight:700}.bb-root .tl-card-name{color:#141414;font-size:14px;font-weight:600}.bb-root .tl-card-desc{color:#727272;margin-top:2px;font-size:12px}.bb-root .tl-card-date{color:#bfbfbc;margin-top:4px;font-size:11px}.bb-root .tl-card{position:relative}.bb-root .tl-card-delete{width:22px;height:22px;color:var(--text-tertiary);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:14px;transition:all .15s;display:flex;position:absolute;top:8px;right:8px}.bb-root .tl-card:hover .tl-card-delete{opacity:1}.bb-root .tl-card-delete:hover{color:#dc2626;background:#fee2e2}.bb-root .tl-pagination{justify-content:space-between;align-items:center;margin-top:16px;display:flex}.bb-root .tl-loading{text-align:center;color:var(--text-tertiary);padding:40px 20px;font-size:13px}.bb-root .topbar{background:var(--bg-primary);border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex;position:relative}.bb-root .topbar-left{align-items:center;gap:12px;display:flex}.bb-root .topbar-back{border-radius:var(--radius-sm);color:var(--text-secondary);padding:4px 6px;font-size:18px}.bb-root .topbar-back:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .topbar-logo{align-items:center;gap:8px;display:flex}.bb-root .topbar-logo-icon{background:var(--accent-primary);color:#fff;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;font-size:9px;font-weight:800;display:flex}.bb-root .topbar-logo span{color:var(--text-primary);letter-spacing:-.3px;font-size:16px;font-weight:600}.bb-root .topbar-sep{background:var(--border-medium);width:1px;height:16px}.bb-root .topbar-title{color:var(--text-secondary);font-size:14px;font-weight:500}.bb-root .topbar-name{border-radius:var(--radius-sm);min-width:140px;max-width:200px;color:var(--text-primary);box-shadow:none;background:0 0;border:1px solid #0000;padding:6px 8px;font-size:14px;font-weight:500}.bb-root .topbar-name:hover{border-color:var(--border-medium)}.bb-root .topbar-name:focus{border-color:var(--accent-primary)}.bb-root .topbar-dirty{color:var(--accent-primary);font-size:8px}.bb-root .topbar-right{align-items:center;gap:8px;display:flex}.bb-root .topbar-btn{color:#414651;background:#fff;border-radius:8px;outline:1px solid #d5d7da;align-items:center;gap:6px;height:36px;padding:0 16px;font-size:14px;font-weight:600;line-height:1.333;transition:all .15s;display:flex}.bb-root .topbar-btn:hover{background:#f5f5f5}.bb-root .topbar-toast{color:#fff;background:var(--success);z-index:2000;border-radius:8px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.bb-root .modal-subtitle{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 8px;font-size:11px;font-weight:600}.bb-root .modal-field{margin-bottom:12px}.bb-root .modal-label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.bb-root .topbar-btn-icon{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);justify-content:center;align-items:center;font-size:16px;transition:all .15s;display:flex}.bb-root .topbar-btn-icon:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .topbar-btn-icon:disabled{opacity:.3;cursor:default}.bb-root .topbar-btn-warn{color:#d97706;background:#fffbeb;border-color:#fcd34d}.bb-root .topbar-btn-warn:hover{background:#fef3c7}.bb-root .topbar-errors{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);z-index:100;min-width:280px;max-height:200px;box-shadow:var(--shadow-lg);background:#fff;margin-top:8px;padding:8px;font-size:12px;position:absolute;top:100%;right:0;overflow-y:auto}.bb-root .topbar-error-item{border-radius:4px;flex-direction:column;gap:2px;padding:6px 8px;display:flex}.bb-root .topbar-error-item:hover{background:#fef3c7}.bb-root .topbar-error-path{font-family:var(--font-mono);color:#d97706;font-size:10px}.bb-root .topbar-dropdown{position:relative}.bb-root .topbar-dropdown-menu{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);z-index:100;min-width:180px;box-shadow:var(--shadow-lg);margin-top:6px;padding:4px;position:absolute;top:100%;right:0}.bb-root .topbar-dropdown-item{width:100%;color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:400;display:flex}.bb-root .topbar-dropdown-item:hover{background:var(--bg-tertiary)}.bb-root .left-panel{background:var(--bg-primary);border-right:1px solid var(--border-subtle);flex-direction:column;flex-shrink:0;width:260px;display:flex;overflow:hidden}.bb-root .palette-header{border-bottom:1px solid var(--border-subtle);padding:16px}.bb-root .lp-tabs{background:var(--bg-tertiary);border-radius:var(--radius-md);gap:0;padding:3px;display:flex}.bb-root .lp-tab{color:var(--text-secondary);border-radius:var(--radius-sm);background:0 0;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.bb-root .lp-tab:hover{color:var(--text-primary)}.bb-root .lp-tab.active{background:var(--bg-primary);color:var(--accent-primary);box-shadow:var(--shadow-sm)}.bb-root .lp-tab-icon{font-size:14px}.bb-root .lp-content{flex:1;padding:12px;overflow-y:auto}.bb-root .lp-category{margin-bottom:8px}.bb-root .lp-category-header{width:100%;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;justify-content:space-between;align-items:center;padding:10px 8px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.bb-root .lp-category-header:hover{background:var(--bg-tertiary)}.bb-root .lp-category-title{text-transform:none;letter-spacing:0;align-items:center;gap:8px;display:flex}.bb-root .lp-category-icon{color:var(--text-primary);font-size:18px}.bb-root .lp-category-arrow{color:var(--text-tertiary);font-size:18px;transition:transform .2s}.bb-root .lp-category-arrow.closed{transform:rotate(-90deg)}.bb-root .lp-element-list{flex-direction:column;gap:2px;padding:4px 0 8px;display:flex}.bb-root .lp-element-btn{background:var(--bg-secondary);border-radius:var(--radius-sm);color:var(--text-primary);text-align:left;border:1px solid #0000;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.bb-root .lp-element-btn:hover{background:var(--accent-light);border-color:var(--border-accent)}.bb-root .lp-element-icon{color:var(--text-primary);font-size:18px}.bb-root .lp-element-label{font-size:13px;font-weight:500}.bb-root .lp-component-list{flex-direction:column;gap:6px;padding:4px 0 8px;display:flex}.bb-root .lp-component-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;align-items:center;gap:10px;width:100%;padding:10px 12px;transition:all .15s;display:flex}.bb-root .lp-component-card:hover{background:var(--accent-light);border-color:var(--border-accent)}.bb-root .lp-card-icon{background:var(--bg-tertiary);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:22px;display:flex}.bb-root .lp-component-card:hover .lp-card-icon{background:#6852d61a}.bb-root .lp-card-info{flex-direction:column;gap:1px;min-width:0;display:flex}.bb-root .lp-card-name{color:var(--text-primary);font-size:12px;font-weight:600}.bb-root .lp-card-desc{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.3;overflow:hidden}.bb-root .lp-footer{border-top:1px solid var(--border-subtle);padding:12px}.bb-root .lp-footer-hint{background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-secondary);justify-content:center;align-items:center;gap:8px;padding:10px;font-size:11px;display:flex}.bb-root .lp-search{border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);width:100%;color:var(--text-primary);padding:6px 10px;font-size:12px}.bb-root .lp-search:focus{border-color:var(--accent-primary);outline:none}.bb-root .canvas{background:var(--bg-secondary);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.bb-root .canvas-area{background:radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0);background-size:24px 24px;flex:1;justify-content:center;align-items:center;padding:32px 24px;display:flex;overflow:auto}.bb-root .phone-frame{background:#fff;border-radius:32px;flex-direction:column;flex-shrink:0;width:375px;height:667px;max-height:667px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000f,0 2px 4px #0000000a,0 12px 32px #00000014,0 32px 64px #0000000f}.bb-root .phone-frame:before{content:"";z-index:10;background:#e0e0e0;border-radius:2px;width:80px;height:4px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.bb-root .phone-screen{background:#f5f5f5;flex-direction:column;height:100%;margin-top:0;display:flex;overflow:hidden}.bb-root .chat-header{background:#fff;border-bottom:1px solid #0000000f;align-items:center;padding:20px 16px 14px;display:flex}.bb-root .chat-back-btn{color:var(--text-secondary);opacity:.6;padding:2px 4px;font-size:20px}.bb-root .chat-user{flex:1;align-items:center;gap:10px;margin-left:10px;display:flex}.bb-root .chat-avatar{color:#fff;background:linear-gradient(135deg,#6852d6,#8b7ae8);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:600;display:flex;box-shadow:0 2px 8px #6852d64d}.bb-root .chat-name{color:var(--text-primary);letter-spacing:-.01em;font-size:14px;font-weight:600}.bb-root .chat-messages{background:#f5f6f7;flex-direction:column;flex:1;gap:12px;min-height:0;padding:16px;display:flex;overflow:hidden auto}.bb-root .message-date{text-align:center;color:var(--text-tertiary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.02em;background:#fffc;border-radius:12px;align-self:center;padding:5px 12px;font-size:11px;font-weight:500}.bb-root .bubble-preview{flex-shrink:0;align-self:flex-start;width:100%;min-height:50px;position:relative;overflow:visible}.bb-root .canvas-bubble{border-radius:16px 16px 16px 4px;flex-direction:column;gap:2px;display:flex;overflow:visible;box-shadow:0 1px 2px #0000000f,0 1px 3px #0000000a}.bb-root .canvas-empty{color:var(--text-tertiary);text-align:center;border:2px dashed var(--border-medium);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff9;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:8px;padding:40px 20px;font-size:13px;display:flex}.bb-root .canvas-empty-icon{color:var(--accent-primary);opacity:.4;background:var(--accent-light);border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:28px;display:flex}.bb-root .chat-input-area{background:#fff;border-top:1px solid #0000000f;align-items:center;gap:10px;padding:10px 14px;display:flex}.bb-root .chat-input{border:1px solid var(--border-subtle);color:var(--text-primary);background:#f5f6f7;border-radius:20px;flex:1;padding:9px 16px;font-size:13px}.bb-root .chat-send-btn{background:var(--accent-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 2px 8px #6852d64d}.bb-root .chat-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #6852d666}.bb-root .el-wrapper{cursor:pointer;border-radius:4px;width:100%;transition:all .12s;position:relative;overflow:visible}.bb-root .el-wrapper:hover{background:#6852d60a}.bb-root .el-wrapper.selected{outline:2px solid var(--accent-primary);outline-offset:-2px;background:#6852d60a}.bb-root .el-wrapper.multi-selected{outline:2px dashed var(--accent-primary);outline-offset:-2px;background:#6852d60a}.bb-root .el-controls-portal{z-index:9999;background:#fff;border-radius:8px;flex-direction:row;gap:2px;padding:3px;display:flex;box-shadow:0 2px 12px #0000001f,0 0 0 1px #0000000a}.bb-root .preview-mode .el-controls-portal{display:none}.bb-root .el-ctrl-btn{width:26px;height:26px;color:var(--text-secondary);border-radius:5px;justify-content:center;align-items:center;font-size:13px;transition:all .12s;display:flex}.bb-root .el-ctrl-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .el-ctrl-btn.danger:hover{color:#dc2626;background:#fee2e2}.bb-root .el-wrap-menu{border:1px solid var(--border-subtle);z-index:1001;background:#fff;border-radius:10px;min-width:140px;margin-bottom:4px;padding:4px;position:absolute;bottom:100%;right:0;box-shadow:0 8px 24px #0000001f}.bb-root .el-wrap-option{text-align:left;color:var(--text-secondary);white-space:nowrap;border-radius:6px;width:100%;padding:7px 12px;font-size:12px}.bb-root .el-wrap-option:hover{background:var(--accent-light);color:var(--accent-primary)}.bb-root .canvas-breadcrumbs{border-bottom:1px solid var(--border-subtle);background:#fff;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 16px;font-size:12px;display:flex}.bb-root .canvas-bc-sep{color:var(--text-muted);margin:0 2px;font-size:10px}.bb-root .canvas-bc-item{color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);border-radius:4px;padding:2px 8px}.bb-root .canvas-bc-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .canvas-bc-item.active{color:var(--accent-primary);background:var(--accent-light)}.bb-root .multi-select-bar{border:1px solid var(--border-subtle);z-index:100;background:#fff;border-radius:12px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:flex;position:absolute;bottom:60px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000001f}.bb-root .multi-select-bar span{color:var(--text-secondary);white-space:nowrap}.bb-root .multi-select-bar button{background:var(--accent-light);color:var(--accent-primary);white-space:nowrap;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .15s}.bb-root .multi-select-bar button:hover{background:var(--accent-primary);color:#fff}.bb-root .canvas-bubble ::-webkit-scrollbar{height:3px}.bb-root .canvas-bubble ::-webkit-scrollbar-track{background:0 0}.bb-root .canvas-bubble ::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.bb-root .canvas-toolbar{border-top:1px solid var(--border-subtle);background:#fff;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:6px 12px;font-size:12px;display:flex}.bb-root .canvas-tool-btn{width:28px;height:28px;color:var(--text-secondary);border-radius:6px;justify-content:center;align-items:center;font-size:14px;transition:all .12s;display:flex}.bb-root .canvas-tool-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .canvas-tool-btn.active{background:var(--accent-light);color:var(--accent-primary)}.bb-root .canvas-tool-label{color:var(--text-secondary);text-align:center;min-width:36px;font-size:11px}.bb-root .canvas-tool-sep{background:var(--border-medium);width:1px;height:16px;margin:0 4px}.bb-root .preview-mode .el-wrapper{cursor:default}.bb-root .preview-mode .el-wrapper:hover{background:0 0}.bb-root .preview-mode .el-wrapper.selected,.bb-root .preview-mode .el-wrapper.multi-selected{background:0 0;outline:none}.bb-root .preview-mode .canvas-breadcrumbs,.bb-root .preview-mode .multi-select-bar{display:none}.bb-root .json-preview-panel{background:var(--bg-primary);border-left:1px solid var(--border-subtle);z-index:60;flex-direction:column;width:380px;display:flex;position:absolute;top:0;bottom:0;right:0;box-shadow:-4px 0 24px #0000000f}.bb-root .json-preview-header{border-bottom:1px solid var(--border-subtle);color:var(--text-primary);background:var(--bg-secondary);align-items:center;gap:8px;padding:12px 16px;font-size:13px;font-weight:600;display:flex}.bb-root .json-preview-header span{flex:1}.bb-root .json-preview-header button{width:28px;height:28px;color:var(--text-secondary);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:14px;display:flex}.bb-root .json-preview-header button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .json-preview-code{font-family:var(--font-mono);color:var(--text-primary);white-space:pre;tab-size:2;background:var(--bg-primary);flex:1;margin:0;padding:16px;font-size:12px;line-height:1.6;overflow:auto}.bb-root .el-context-menu{background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:10px;min-width:160px;padding:4px;font-size:12px;box-shadow:0 8px 24px #0000001f}.bb-root .el-ctx-item{text-align:left;width:100%;color:var(--text-secondary);white-space:nowrap;border-radius:6px;padding:6px 12px;display:block}.bb-root .el-ctx-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .el-ctx-item.danger:hover{color:#dc2626;background:#fee2e2}.bb-root .el-ctx-sep{background:var(--border-subtle);height:1px;margin:4px 0}.bb-root .tree-root{font-size:13px}.bb-root .tree-item{border-radius:var(--radius-sm);text-align:left;width:100%;color:var(--text-secondary);cursor:pointer;align-items:center;gap:6px;min-height:28px;padding:6px 8px;transition:all .15s;display:flex}.bb-root .tree-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .tree-item.selected{background:var(--accent-light);color:var(--accent-primary)}.bb-root .tree-item.multi-selected{background:var(--accent-light);color:var(--accent-primary);outline:1px dashed var(--accent-primary);outline-offset:-1px}.bb-root .tree-item.drop-target{outline:2px dashed var(--accent-primary);outline-offset:-2px}.bb-root .tree-item.container .tree-type{font-weight:600}.bb-root .tree-arrow{text-align:center;width:12px;color:var(--text-tertiary);cursor:pointer;font-size:10px;transition:transform .15s}.bb-root .tree-arrow.collapsed{transform:rotate(-90deg)}.bb-root .tree-dot{text-align:center;width:12px}.bb-root .tree-dot:after{content:"";background:var(--border-medium);vertical-align:middle;border-radius:50%;width:4px;height:4px;display:inline-block}.bb-root .tree-type{font-family:var(--font-mono);font-size:12px}.bb-root .tree-label{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;overflow:hidden}.bb-root .tree-empty{color:var(--text-tertiary);flex-direction:column;align-items:center;gap:8px;padding:24px;font-size:13px;display:flex}.bb-root .tree-badge{background:var(--bg-tertiary);color:var(--text-tertiary);border-radius:8px;flex-shrink:0;margin-left:auto;padding:1px 5px;font-size:9px}.bb-root .tree-error-dot{background:#dc2626;border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-left:auto}.bb-root .tree-badge+.tree-error-dot,.bb-root .tree-error-dot+.tree-badge{margin-left:4px}.bb-root .tree-drag-overlay{background:var(--bg-primary);border-radius:var(--radius-sm);opacity:.9;box-shadow:0 4px 12px #00000026}.bb-root .tree-node{touch-action:none}.bb-root .tree-drop-gap{height:4px;transition:height .1s;position:relative}.bb-root .tree-drop-gap.active{height:8px}.bb-root .tree-drop-gap .tree-drop-line{background:0 0;border-radius:1px;height:2px;transition:background .1s}.bb-root .tree-drop-gap.active .tree-drop-line{background:var(--accent-primary)}.bb-root .tree-search-wrap{margin-bottom:8px;position:relative}.bb-root .tree-search{border:1px solid var(--border-subtle);background:var(--bg-secondary);width:100%;color:var(--text-primary);border-radius:6px;padding:7px 28px 7px 10px;font-size:12px}.bb-root .tree-search:focus{border-color:var(--accent-primary)}.bb-root .tree-search::placeholder{color:var(--text-muted)}.bb-root .tree-search-clear{width:18px;height:18px;color:var(--text-tertiary);background:var(--bg-tertiary);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.bb-root .tree-search-clear:hover{color:var(--text-primary)}.bb-root .right-panel{background:var(--bg-primary);border-left:1px solid var(--border-subtle);flex-direction:column;flex-shrink:0;width:300px;display:flex;overflow:hidden}.bb-root .rp-tabs{border-bottom:1px solid var(--border-subtle);display:flex}.bb-root .rp-tab{color:var(--text-secondary);background:0 0;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:14px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.bb-root .rp-tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.bb-root .rp-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.bb-root .rp-content{flex:1;padding:16px;overflow-y:auto}.bb-root .rp-empty{color:var(--text-tertiary);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:48px 24px;display:flex}.bb-root .rp-empty-icon{color:var(--border-medium);font-size:48px}.bb-root .prop-group{margin-bottom:16px}.bb-root .prop-group-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;font-size:11px;font-weight:600}.bb-root .prop-field{margin-bottom:12px}.bb-root .prop-label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:500;display:block}.bb-root .prop-row{align-items:center;gap:8px;display:flex}.bb-root .prop-badge{background:var(--accent-light);color:var(--accent-primary);text-transform:uppercase;letter-spacing:.5px;border-radius:4px;margin-bottom:16px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.bb-root .prop-error-summary{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:4px;margin-bottom:12px;padding:6px 10px;font-size:12px;font-weight:500}.bb-root .prop-field-error input,.bb-root .prop-field-error textarea,.bb-root .prop-field-error select{box-shadow:0 0 0 1px #fecaca;border-color:#dc2626!important}.bb-root .prop-field-error-hint{color:#dc2626;margin-left:6px;font-size:11px;font-weight:400}.bb-root .shortcuts-overlay{z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.bb-root .shortcuts-panel{background:#fff;border-radius:16px;width:320px;padding:0;overflow:hidden;box-shadow:0 16px 48px #0003}.bb-root .shortcuts-header{border-bottom:1px solid var(--border-subtle);color:var(--text-primary);justify-content:space-between;align-items:center;padding:16px 20px;font-size:14px;font-weight:600;display:flex}.bb-root .shortcuts-close{width:24px;height:24px;color:var(--text-tertiary);border-radius:6px;justify-content:center;align-items:center;font-size:16px;display:flex}.bb-root .shortcuts-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.bb-root .shortcuts-list{padding:12px 20px 16px}.bb-root .shortcut-row{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.bb-root .shortcut-row:last-child{border-bottom:none}.bb-root .shortcut-action{color:var(--text-secondary);font-size:13px}.bb-root .shortcut-keys{font-family:var(--font-mono);background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:4px;padding:3px 8px;font-size:11px;font-weight:500}.bb-root .editor-root{background:var(--bg-secondary);flex-direction:column;width:100%;height:100%;display:flex}.bb-root .editor-panels{flex:1;display:flex;overflow:hidden}:root{--bg-primary:#fff;--bg-secondary:#f5f5f5;--bg-tertiary:#f5f5f5;--bg-elevated:#fff;--bg-hover:#f5f5f5;--bg-active:#f3f0ff;--accent-primary:#6852d6;--accent-secondary:#7c6be6;--accent-light:#f3f0ff;--accent-gradient:linear-gradient(135deg, #6852d6 0%, #7c6be6 100%);--accent-glow:#6852d633;--text-primary:#141414;--text-secondary:#727272;--text-tertiary:#414651;--text-muted:#bfbfbc;--border-subtle:#e9eaeb;--border-medium:#d5d7da;--border-accent:#6852d64d;--success:#10b981;--warning:#f59e0b;--error:#d92d20;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 10px 25px #0000001a;--radius-sm:8px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:"Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"SF Mono", "Fira Code", monospace}@font-face{font-family:Satoshi;src:url(https://cdn.fontshare.com/wf/RVPXLBADJTQXBIMXQMGXVL3RAWQO3GYP/UPQNUQSJHRAZPGIY5EU7VMJMOQHK76OA/SITBAY6OYFA7BNHFJBHWIL6FHWMCOP2Q.woff2)format("woff2");font-weight:300 900;font-display:swap}.bb-root,.bb-root *{box-sizing:border-box;margin:0;padding:0}.bb-root,.bb-root,.bb-root #root{width:100%;height:100%}.bb-root{font-family:var(--font-sans);background:var(--bg-secondary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}.bb-root ::-webkit-scrollbar{width:6px;height:6px}.bb-root ::-webkit-scrollbar-track{background:0 0}.bb-root ::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}.bb-root ::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.bb-root button{cursor:pointer;color:inherit;font:inherit;background:0 0;border:none}.bb-root input,.bb-root textarea,.bb-root select{border:1px solid var(--border-medium);width:100%;color:var(--text-primary);background:#fff;border-radius:8px;outline:none;padding:10px 12px;font-family:inherit;font-size:14px;font-weight:400;line-height:1.5;transition:border-color .15s}.bb-root input:focus,.bb-root textarea:focus,.bb-root select:focus{border-color:var(--accent-primary)}.bb-root input::placeholder,.bb-root textarea::placeholder{color:var(--text-muted)}.bb-root select{appearance:none;cursor:pointer;padding-right:28px}.bb-root input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary)}.bb-root input[type=color]{border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);cursor:pointer;width:40px;height:36px;padding:2px}.bb-root input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.bb-root input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.bb-root textarea{resize:vertical;min-height:60px}
2
2
  /*$vite$:1*/
package/dist/bubble-builder.es.js CHANGED
@@ -22553,7 +22553,15 @@ function cs(e, t) {
22553
22553
  hasOnSave: !!t.onSave
22554
22554
  });
22555
22555
  let n = (0, te.createRoot)(e);
22556
- n.render(/* @__PURE__ */ (0, F.jsx)(S.StrictMode, { children: /* @__PURE__ */ (0, F.jsx)(ss, {}) }));
22556
+ n.render(/* @__PURE__ */ (0, F.jsx)(S.StrictMode, { children: /* @__PURE__ */ (0, F.jsx)("div", {
22557
+ className: "bb-root",
22558
+ style: {
22559
+ height: "100%",
22560
+ width: "100%",
22561
+ overflow: "hidden"
22562
+ },
22563
+ children: /* @__PURE__ */ (0, F.jsx)(ss, {})
22564
+ }) }));
22557
22565
  let r;
22558
22566
  if (t.onChange) {
22559
22567
  let e = t.onChange, n = P.getState().body, i = P.getState().settings, a = P.getState().fallbackText, o = P.getState().notificationTitle, s = P.getState().notificationBody;
package/dist/bubble-builder.umd.js CHANGED
@@ -17,4 +17,4 @@ Error generating stack: `+e.message+`
17
17
  To pick up a draggable item, press the space bar.
18
18
  While dragging, use the arrow keys to move the item.
19
19
  Press space again to drop the item in its new position, or press escape to cancel.
20
- `},Ci={onDragStart(e){let{active:t}=e;return`Picked up draggable item `+t.id+`.`},onDragOver(e){let{active:t,over:n}=e;return n?`Draggable item `+t.id+` was moved over droppable area `+n.id+`.`:`Draggable item `+t.id+` is no longer over a droppable area.`},onDragEnd(e){let{active:t,over:n}=e;return n?`Draggable item `+t.id+` was dropped over droppable area `+n.id:`Draggable item `+t.id+` was dropped.`},onDragCancel(e){let{active:t}=e;return`Dragging was cancelled. Draggable item `+t.id+` was dropped.`}};function wi(e){let{announcements:t=Ci,container:n,hiddenTextDescribedById:r,screenReaderInstructions:i=Si}=e,{announce:a,announcement:o}=vi(),s=ii(`DndLiveRegion`),[c,l]=(0,C.useState)(!1);if((0,C.useEffect)(()=>{l(!0)},[]),bi((0,C.useMemo)(()=>({onDragStart(e){let{active:n}=e;a(t.onDragStart({active:n}))},onDragMove(e){let{active:n,over:r}=e;t.onDragMove&&a(t.onDragMove({active:n,over:r}))},onDragOver(e){let{active:n,over:r}=e;a(t.onDragOver({active:n,over:r}))},onDragEnd(e){let{active:n,over:r}=e;a(t.onDragEnd({active:n,over:r}))},onDragCancel(e){let{active:n,over:r}=e;a(t.onDragCancel({active:n,over:r}))}}),[a,t])),!c)return null;let u=C.createElement(C.Fragment,null,C.createElement(gi,{id:r,value:i.draggable}),C.createElement(_i,{id:s,announcement:o}));return n?(0,An.createPortal)(u,n):u}var Ti;(function(e){e.DragStart=`dragStart`,e.DragMove=`dragMove`,e.DragEnd=`dragEnd`,e.DragCancel=`dragCancel`,e.DragOver=`dragOver`,e.RegisterDroppable=`registerDroppable`,e.SetDroppableDisabled=`setDroppableDisabled`,e.UnregisterDroppable=`unregisterDroppable`})(Ti||={});function Ei(){}function Di(e,t){return(0,C.useMemo)(()=>({sensor:e,options:t??{}}),[e,t])}function Oi(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return(0,C.useMemo)(()=>[...t].filter(e=>e!=null),[...t])}var ki=Object.freeze({x:0,y:0});function Ai(e,t){return Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2)}function U(e,t){let n=di(e);if(!n)return`0 0`;let r={x:(n.x-t.left)/t.width*100,y:(n.y-t.top)/t.height*100};return r.x+`% `+r.y+`%`}function ji(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return n-r}function Mi(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return r-n}function Ni(e,t){if(!e||e.length===0)return null;let[n]=e;return t?n[t]:n}function Pi(e,t,n){return t===void 0&&(t=e.left),n===void 0&&(n=e.top),{x:t+e.width*.5,y:n+e.height*.5}}var Fi=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e,i=Pi(t,t.left,t.top),a=[];for(let e of r){let{id:t}=e,r=n.get(t);if(r){let n=Ai(Pi(r),i);a.push({id:t,data:{droppableContainer:e,value:n}})}}return a.sort(ji)};function Ii(e,t){let n=Math.max(t.top,e.top),r=Math.max(t.left,e.left),i=Math.min(t.left+t.width,e.left+e.width),a=Math.min(t.top+t.height,e.top+e.height),o=i-r,s=a-n;if(r<i&&n<a){let n=t.width*t.height,r=e.width*e.height,i=o*s,a=i/(n+r-i);return Number(a.toFixed(4))}return 0}var Li=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e,i=[];for(let e of r){let{id:r}=e,a=n.get(r);if(a){let n=Ii(a,t);n>0&&i.push({id:r,data:{droppableContainer:e,value:n}})}}return i.sort(Mi)};function Ri(e,t,n){return{...e,scaleX:t&&n?t.width/n.width:1,scaleY:t&&n?t.height/n.height:1}}function zi(e,t){return e&&t?{x:e.left-t.left,y:e.top-t.top}:ki}function Bi(e){return function(t){for(var n=arguments.length,r=Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return r.reduce((t,n)=>({...t,top:t.top+e*n.y,bottom:t.bottom+e*n.y,left:t.left+e*n.x,right:t.right+e*n.x}),{...t})}}var Vi=Bi(1);function Hi(e){if(e.startsWith(`matrix3d(`)){let t=e.slice(9,-1).split(/, /);return{x:+t[12],y:+t[13],scaleX:+t[0],scaleY:+t[5]}}else if(e.startsWith(`matrix(`)){let t=e.slice(7,-1).split(/, /);return{x:+t[4],y:+t[5],scaleX:+t[0],scaleY:+t[3]}}return null}function Ui(e,t,n){let r=Hi(t);if(!r)return e;let{scaleX:i,scaleY:a,x:o,y:s}=r,c=e.left-o-(1-i)*parseFloat(n),l=e.top-s-(1-a)*parseFloat(n.slice(n.indexOf(` `)+1)),u=i?e.width/i:e.width,d=a?e.height/a:e.height;return{width:u,height:d,top:l,right:c+u,bottom:l+d,left:c}}var Wi={ignoreTransform:!1};function Gi(e,t){t===void 0&&(t=Wi);let n=e.getBoundingClientRect();if(t.ignoreTransform){let{transform:t,transformOrigin:r}=Gr(e).getComputedStyle(e);t&&(n=Ui(n,t,r))}let{top:r,left:i,width:a,height:o,bottom:s,right:c}=n;return{top:r,left:i,width:a,height:o,bottom:s,right:c}}function Ki(e){return Gi(e,{ignoreTransform:!0})}function qi(e){let t=e.innerWidth,n=e.innerHeight;return{top:0,left:0,right:t,bottom:n,width:t,height:n}}function Ji(e,t){return t===void 0&&(t=Gr(e).getComputedStyle(e)),t.position===`fixed`}function Yi(e,t){t===void 0&&(t=Gr(e).getComputedStyle(e));let n=/(auto|scroll|overlay)/;return[`overflow`,`overflowX`,`overflowY`].some(e=>{let r=t[e];return typeof r==`string`?n.test(r):!1})}function Xi(e,t){let n=[];function r(i){if(t!=null&&n.length>=t||!i)return n;if(Kr(i)&&i.scrollingElement!=null&&!n.includes(i.scrollingElement))return n.push(i.scrollingElement),n;if(!qr(i)||Jr(i)||n.includes(i))return n;let a=Gr(e).getComputedStyle(i);return i!==e&&Yi(i,a)&&n.push(i),Ji(i,a)?n:r(i.parentNode)}return e?r(e):n}function Zi(e){let[t]=Xi(e,1);return t??null}function Qi(e){return!Hr||!e?null:Ur(e)?e:Wr(e)?Kr(e)||e===Yr(e).scrollingElement?window:qr(e)?e:null:null}function $i(e){return Ur(e)?e.scrollX:e.scrollLeft}function ea(e){return Ur(e)?e.scrollY:e.scrollTop}function ta(e){return{x:$i(e),y:ea(e)}}var na;(function(e){e[e.Forward=1]=`Forward`,e[e.Backward=-1]=`Backward`})(na||={});function ra(e){return!Hr||!e?!1:e===document.scrollingElement}function ia(e){let t={x:0,y:0},n=ra(e)?{height:window.innerHeight,width:window.innerWidth}:{height:e.clientHeight,width:e.clientWidth},r={x:e.scrollWidth-n.width,y:e.scrollHeight-n.height};return{isTop:e.scrollTop<=t.y,isLeft:e.scrollLeft<=t.x,isBottom:e.scrollTop>=r.y,isRight:e.scrollLeft>=r.x,maxScroll:r,minScroll:t}}var aa={x:.2,y:.2};function oa(e,t,n,r,i){let{top:a,left:o,right:s,bottom:c}=n;r===void 0&&(r=10),i===void 0&&(i=aa);let{isTop:l,isBottom:u,isLeft:d,isRight:f}=ia(e),p={x:0,y:0},m={x:0,y:0},h={height:t.height*i.y,width:t.width*i.x};return!l&&a<=t.top+h.height?(p.y=na.Backward,m.y=r*Math.abs((t.top+h.height-a)/h.height)):!u&&c>=t.bottom-h.height&&(p.y=na.Forward,m.y=r*Math.abs((t.bottom-h.height-c)/h.height)),!f&&s>=t.right-h.width?(p.x=na.Forward,m.x=r*Math.abs((t.right-h.width-s)/h.width)):!d&&o<=t.left+h.width&&(p.x=na.Backward,m.x=r*Math.abs((t.left+h.width-o)/h.width)),{direction:p,speed:m}}function sa(e){if(e===document.scrollingElement){let{innerWidth:e,innerHeight:t}=window;return{top:0,left:0,right:e,bottom:t,width:e,height:t}}let{top:t,left:n,right:r,bottom:i}=e.getBoundingClientRect();return{top:t,left:n,right:r,bottom:i,width:e.clientWidth,height:e.clientHeight}}function ca(e){return e.reduce((e,t)=>oi(e,ta(t)),ki)}function la(e){return e.reduce((e,t)=>e+$i(t),0)}function ua(e){return e.reduce((e,t)=>e+ea(t),0)}function da(e,t){if(t===void 0&&(t=Gi),!e)return;let{top:n,left:r,bottom:i,right:a}=t(e);Zi(e)&&(i<=0||a<=0||n>=window.innerHeight||r>=window.innerWidth)&&e.scrollIntoView({block:`center`,inline:`center`})}var fa=[[`x`,[`left`,`right`],la],[`y`,[`top`,`bottom`],ua]],pa=class{constructor(e,t){this.rect=void 0,this.width=void 0,this.height=void 0,this.top=void 0,this.bottom=void 0,this.right=void 0,this.left=void 0;let n=Xi(t),r=ca(n);this.rect={...e},this.width=e.width,this.height=e.height;for(let[e,t,i]of fa)for(let a of t)Object.defineProperty(this,a,{get:()=>{let t=i(n),o=r[e]-t;return this.rect[a]+o},enumerable:!0});Object.defineProperty(this,`rect`,{enumerable:!1})}},ma=class{constructor(e){this.target=void 0,this.listeners=[],this.removeAll=()=>{this.listeners.forEach(e=>this.target?.removeEventListener(...e))},this.target=e}add(e,t,n){var r;(r=this.target)==null||r.addEventListener(e,t,n),this.listeners.push([e,t,n])}};function ha(e){let{EventTarget:t}=Gr(e);return e instanceof t?e:Yr(e)}function ga(e,t){let n=Math.abs(e.x),r=Math.abs(e.y);return typeof t==`number`?Math.sqrt(n**2+r**2)>t:`x`in t&&`y`in t?n>t.x&&r>t.y:`x`in t?n>t.x:`y`in t?r>t.y:!1}var _a;(function(e){e.Click=`click`,e.DragStart=`dragstart`,e.Keydown=`keydown`,e.ContextMenu=`contextmenu`,e.Resize=`resize`,e.SelectionChange=`selectionchange`,e.VisibilityChange=`visibilitychange`})(_a||={});function va(e){e.preventDefault()}function ya(e){e.stopPropagation()}var W;(function(e){e.Space=`Space`,e.Down=`ArrowDown`,e.Right=`ArrowRight`,e.Left=`ArrowLeft`,e.Up=`ArrowUp`,e.Esc=`Escape`,e.Enter=`Enter`,e.Tab=`Tab`})(W||={});var ba={start:[W.Space,W.Enter],cancel:[W.Esc],end:[W.Space,W.Enter,W.Tab]},xa=(e,t)=>{let{currentCoordinates:n}=t;switch(e.code){case W.Right:return{...n,x:n.x+25};case W.Left:return{...n,x:n.x-25};case W.Down:return{...n,y:n.y+25};case W.Up:return{...n,y:n.y-25}}},Sa=class{constructor(e){this.props=void 0,this.autoScrollEnabled=!1,this.referenceCoordinates=void 0,this.listeners=void 0,this.windowListeners=void 0,this.props=e;let{event:{target:t}}=e;this.props=e,this.listeners=new ma(Yr(t)),this.windowListeners=new ma(Gr(t)),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleCancel=this.handleCancel.bind(this),this.attach()}attach(){this.handleStart(),this.windowListeners.add(_a.Resize,this.handleCancel),this.windowListeners.add(_a.VisibilityChange,this.handleCancel),setTimeout(()=>this.listeners.add(_a.Keydown,this.handleKeyDown))}handleStart(){let{activeNode:e,onStart:t}=this.props,n=e.node.current;n&&da(n),t(ki)}handleKeyDown(e){if(li(e)){let{active:t,context:n,options:r}=this.props,{keyboardCodes:i=ba,coordinateGetter:a=xa,scrollBehavior:o=`smooth`}=r,{code:s}=e;if(i.end.includes(s)){this.handleEnd(e);return}if(i.cancel.includes(s)){this.handleCancel(e);return}let{collisionRect:c}=n.current,l=c?{x:c.left,y:c.top}:ki;this.referenceCoordinates||=l;let u=a(e,{active:t,context:n.current,currentCoordinates:l});if(u){let t=si(u,l),r={x:0,y:0},{scrollableAncestors:i}=n.current;for(let n of i){let i=e.code,{isTop:a,isRight:s,isLeft:c,isBottom:l,maxScroll:d,minScroll:f}=ia(n),p=sa(n),m={x:Math.min(i===W.Right?p.right-p.width/2:p.right,Math.max(i===W.Right?p.left:p.left+p.width/2,u.x)),y:Math.min(i===W.Down?p.bottom-p.height/2:p.bottom,Math.max(i===W.Down?p.top:p.top+p.height/2,u.y))},h=i===W.Right&&!s||i===W.Left&&!c,g=i===W.Down&&!l||i===W.Up&&!a;if(h&&m.x!==u.x){let e=n.scrollLeft+t.x,a=i===W.Right&&e<=d.x||i===W.Left&&e>=f.x;if(a&&!t.y){n.scrollTo({left:e,behavior:o});return}a?r.x=n.scrollLeft-e:r.x=i===W.Right?n.scrollLeft-d.x:n.scrollLeft-f.x,r.x&&n.scrollBy({left:-r.x,behavior:o});break}else if(g&&m.y!==u.y){let e=n.scrollTop+t.y,a=i===W.Down&&e<=d.y||i===W.Up&&e>=f.y;if(a&&!t.x){n.scrollTo({top:e,behavior:o});return}a?r.y=n.scrollTop-e:r.y=i===W.Down?n.scrollTop-d.y:n.scrollTop-f.y,r.y&&n.scrollBy({top:-r.y,behavior:o});break}}this.handleMove(e,oi(si(u,this.referenceCoordinates),r))}}}handleMove(e,t){let{onMove:n}=this.props;e.preventDefault(),n(t)}handleEnd(e){let{onEnd:t}=this.props;e.preventDefault(),this.detach(),t()}handleCancel(e){let{onCancel:t}=this.props;e.preventDefault(),this.detach(),t()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll()}};Sa.activators=[{eventName:`onKeyDown`,handler:(e,t,n)=>{let{keyboardCodes:r=ba,onActivation:i}=t,{active:a}=n,{code:o}=e.nativeEvent;if(r.start.includes(o)){let t=a.activatorNode.current;return t&&e.target!==t?!1:(e.preventDefault(),i?.({event:e.nativeEvent}),!0)}return!1}}];function Ca(e){return!!(e&&`distance`in e)}function wa(e){return!!(e&&`delay`in e)}var Ta=class{constructor(e,t,n){n===void 0&&(n=ha(e.event.target)),this.props=void 0,this.events=void 0,this.autoScrollEnabled=!0,this.document=void 0,this.activated=!1,this.initialCoordinates=void 0,this.timeoutId=null,this.listeners=void 0,this.documentListeners=void 0,this.windowListeners=void 0,this.props=e,this.events=t;let{event:r}=e,{target:i}=r;this.props=e,this.events=t,this.document=Yr(i),this.documentListeners=new ma(this.document),this.listeners=new ma(n),this.windowListeners=new ma(Gr(i)),this.initialCoordinates=di(r)??ki,this.handleStart=this.handleStart.bind(this),this.handleMove=this.handleMove.bind(this),this.handleEnd=this.handleEnd.bind(this),this.handleCancel=this.handleCancel.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.removeTextSelection=this.removeTextSelection.bind(this),this.attach()}attach(){let{events:e,props:{options:{activationConstraint:t,bypassActivationConstraint:n}}}=this;if(this.listeners.add(e.move.name,this.handleMove,{passive:!1}),this.listeners.add(e.end.name,this.handleEnd),e.cancel&&this.listeners.add(e.cancel.name,this.handleCancel),this.windowListeners.add(_a.Resize,this.handleCancel),this.windowListeners.add(_a.DragStart,va),this.windowListeners.add(_a.VisibilityChange,this.handleCancel),this.windowListeners.add(_a.ContextMenu,va),this.documentListeners.add(_a.Keydown,this.handleKeydown),t){if(n!=null&&n({event:this.props.event,activeNode:this.props.activeNode,options:this.props.options}))return this.handleStart();if(wa(t)){this.timeoutId=setTimeout(this.handleStart,t.delay),this.handlePending(t);return}if(Ca(t)){this.handlePending(t);return}}this.handleStart()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll(),setTimeout(this.documentListeners.removeAll,50),this.timeoutId!==null&&(clearTimeout(this.timeoutId),this.timeoutId=null)}handlePending(e,t){let{active:n,onPending:r}=this.props;r(n,e,this.initialCoordinates,t)}handleStart(){let{initialCoordinates:e}=this,{onStart:t}=this.props;e&&(this.activated=!0,this.documentListeners.add(_a.Click,ya,{capture:!0}),this.removeTextSelection(),this.documentListeners.add(_a.SelectionChange,this.removeTextSelection),t(e))}handleMove(e){let{activated:t,initialCoordinates:n,props:r}=this,{onMove:i,options:{activationConstraint:a}}=r;if(!n)return;let o=di(e)??ki,s=si(n,o);if(!t&&a){if(Ca(a)){if(a.tolerance!=null&&ga(s,a.tolerance))return this.handleCancel();if(ga(s,a.distance))return this.handleStart()}if(wa(a)&&ga(s,a.tolerance))return this.handleCancel();this.handlePending(a,s);return}e.cancelable&&e.preventDefault(),i(o)}handleEnd(){let{onAbort:e,onEnd:t}=this.props;this.detach(),this.activated||e(this.props.active),t()}handleCancel(){let{onAbort:e,onCancel:t}=this.props;this.detach(),this.activated||e(this.props.active),t()}handleKeydown(e){e.code===W.Esc&&this.handleCancel()}removeTextSelection(){var e;(e=this.document.getSelection())==null||e.removeAllRanges()}},Ea={cancel:{name:`pointercancel`},move:{name:`pointermove`},end:{name:`pointerup`}},Da=class extends Ta{constructor(e){let{event:t}=e,n=Yr(t.target);super(e,Ea,n)}};Da.activators=[{eventName:`onPointerDown`,handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return!n.isPrimary||n.button!==0?!1:(r?.({event:n}),!0)}}];var Oa={move:{name:`mousemove`},end:{name:`mouseup`}},ka;(function(e){e[e.RightClick=2]=`RightClick`})(ka||={});var Aa=class extends Ta{constructor(e){super(e,Oa,Yr(e.event.target))}};Aa.activators=[{eventName:`onMouseDown`,handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return n.button===ka.RightClick?!1:(r?.({event:n}),!0)}}];var ja={cancel:{name:`touchcancel`},move:{name:`touchmove`},end:{name:`touchend`}},Ma=class extends Ta{constructor(e){super(e,ja)}static setup(){return window.addEventListener(ja.move.name,e,{capture:!1,passive:!1}),function(){window.removeEventListener(ja.move.name,e)};function e(){}}};Ma.activators=[{eventName:`onTouchStart`,handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t,{touches:i}=n;return i.length>1?!1:(r?.({event:n}),!0)}}];var Na;(function(e){e[e.Pointer=0]=`Pointer`,e[e.DraggableRect=1]=`DraggableRect`})(Na||={});var Pa;(function(e){e[e.TreeOrder=0]=`TreeOrder`,e[e.ReversedTreeOrder=1]=`ReversedTreeOrder`})(Pa||={});function Fa(e){let{acceleration:t,activator:n=Na.Pointer,canScroll:r,draggingRect:i,enabled:a,interval:o=5,order:s=Pa.TreeOrder,pointerCoordinates:c,scrollableAncestors:l,scrollableAncestorRects:u,delta:d,threshold:f}=e,p=La({delta:d,disabled:!a}),[m,h]=Qr(),g=(0,C.useRef)({x:0,y:0}),_=(0,C.useRef)({x:0,y:0}),v=(0,C.useMemo)(()=>{switch(n){case Na.Pointer:return c?{top:c.y,bottom:c.y,left:c.x,right:c.x}:null;case Na.DraggableRect:return i}},[n,i,c]),y=(0,C.useRef)(null),b=(0,C.useCallback)(()=>{let e=y.current;if(!e)return;let t=g.current.x*_.current.x,n=g.current.y*_.current.y;e.scrollBy(t,n)},[]),x=(0,C.useMemo)(()=>s===Pa.TreeOrder?[...l].reverse():l,[s,l]);(0,C.useEffect)(()=>{if(!a||!l.length||!v){h();return}for(let e of x){if(r?.(e)===!1)continue;let n=u[l.indexOf(e)];if(!n)continue;let{direction:i,speed:a}=oa(e,n,v,t,f);for(let e of[`x`,`y`])p[e][i[e]]||(a[e]=0,i[e]=0);if(a.x>0||a.y>0){h(),y.current=e,m(b,o),g.current=a,_.current=i;return}}g.current={x:0,y:0},_.current={x:0,y:0},h()},[t,b,r,h,a,o,JSON.stringify(v),JSON.stringify(p),m,l,x,u,JSON.stringify(f)])}var Ia={x:{[na.Backward]:!1,[na.Forward]:!1},y:{[na.Backward]:!1,[na.Forward]:!1}};function La(e){let{delta:t,disabled:n}=e,r=ni(t);return ei(e=>{if(n||!r||!e)return Ia;let i={x:Math.sign(t.x-r.x),y:Math.sign(t.y-r.y)};return{x:{[na.Backward]:e.x[na.Backward]||i.x===-1,[na.Forward]:e.x[na.Forward]||i.x===1},y:{[na.Backward]:e.y[na.Backward]||i.y===-1,[na.Forward]:e.y[na.Forward]||i.y===1}}},[n,t,r])}function Ra(e,t){let n=t==null?void 0:e.get(t),r=n?n.node.current:null;return ei(e=>t==null?null:r??e??null,[r,t])}function za(e,t){return(0,C.useMemo)(()=>e.reduce((e,n)=>{let{sensor:r}=n,i=r.activators.map(e=>({eventName:e.eventName,handler:t(e.handler,n)}));return[...e,...i]},[]),[e,t])}var Ba;(function(e){e[e.Always=0]=`Always`,e[e.BeforeDragging=1]=`BeforeDragging`,e[e.WhileDragging=2]=`WhileDragging`})(Ba||={});var Va;(function(e){e.Optimized=`optimized`})(Va||={});var Ha=new Map;function Ua(e,t){let{dragging:n,dependencies:r,config:i}=t,[a,o]=(0,C.useState)(null),{frequency:s,measure:c,strategy:l}=i,u=(0,C.useRef)(e),d=g(),f=$r(d),p=(0,C.useCallback)(function(e){e===void 0&&(e=[]),!f.current&&o(t=>t===null?e:t.concat(e.filter(e=>!t.includes(e))))},[f]),m=(0,C.useRef)(null),h=ei(t=>{if(d&&!n)return Ha;if(!t||t===Ha||u.current!==e||a!=null){let t=new Map;for(let n of e){if(!n)continue;if(a&&a.length>0&&!a.includes(n.id)&&n.rect.current){t.set(n.id,n.rect.current);continue}let e=n.node.current,r=e?new pa(c(e),e):null;n.rect.current=r,r&&t.set(n.id,r)}return t}return t},[e,a,n,d,c]);return(0,C.useEffect)(()=>{u.current=e},[e]),(0,C.useEffect)(()=>{d||p()},[n,d]),(0,C.useEffect)(()=>{a&&a.length>0&&o(null)},[JSON.stringify(a)]),(0,C.useEffect)(()=>{d||typeof s!=`number`||m.current!==null||(m.current=setTimeout(()=>{p(),m.current=null},s))},[s,d,p,...r]),{droppableRects:h,measureDroppableContainers:p,measuringScheduled:a!=null};function g(){switch(l){case Ba.Always:return!1;case Ba.BeforeDragging:return n;default:return!n}}}function Wa(e,t){return ei(n=>e?n||(typeof t==`function`?t(e):e):null,[t,e])}function Ga(e,t){return Wa(e,t)}function Ka(e){let{callback:t,disabled:n}=e,r=Zr(t),i=(0,C.useMemo)(()=>{if(n||typeof window>`u`||window.MutationObserver===void 0)return;let{MutationObserver:e}=window;return new e(r)},[r,n]);return(0,C.useEffect)(()=>()=>i?.disconnect(),[i]),i}function qa(e){let{callback:t,disabled:n}=e,r=Zr(t),i=(0,C.useMemo)(()=>{if(n||typeof window>`u`||window.ResizeObserver===void 0)return;let{ResizeObserver:e}=window;return new e(r)},[n]);return(0,C.useEffect)(()=>()=>i?.disconnect(),[i]),i}function Ja(e){return new pa(Gi(e),e)}function Ya(e,t,n){t===void 0&&(t=Ja);let[r,i]=(0,C.useState)(null);function a(){i(r=>{if(!e)return null;if(e.isConnected===!1)return r??n??null;let i=t(e);return JSON.stringify(r)===JSON.stringify(i)?r:i})}let o=Ka({callback(t){if(e)for(let n of t){let{type:t,target:r}=n;if(t===`childList`&&r instanceof HTMLElement&&r.contains(e)){a();break}}}}),s=qa({callback:a});return Xr(()=>{a(),e?(s?.observe(e),o?.observe(document.body,{childList:!0,subtree:!0})):(s?.disconnect(),o?.disconnect())},[e]),r}function Xa(e){return zi(e,Wa(e))}var Za=[];function Qa(e){let t=(0,C.useRef)(e),n=ei(n=>e?n&&n!==Za&&e&&t.current&&e.parentNode===t.current.parentNode?n:Xi(e):Za,[e]);return(0,C.useEffect)(()=>{t.current=e},[e]),n}function $a(e){let[t,n]=(0,C.useState)(null),r=(0,C.useRef)(e),i=(0,C.useCallback)(e=>{let t=Qi(e.target);t&&n(e=>e?(e.set(t,ta(t)),new Map(e)):null)},[]);return(0,C.useEffect)(()=>{let t=r.current;if(e!==t){a(t);let o=e.map(e=>{let t=Qi(e);return t?(t.addEventListener(`scroll`,i,{passive:!0}),[t,ta(t)]):null}).filter(e=>e!=null);n(o.length?new Map(o):null),r.current=e}return()=>{a(e),a(t)};function a(e){e.forEach(e=>{Qi(e)?.removeEventListener(`scroll`,i)})}},[i,e]),(0,C.useMemo)(()=>e.length?t?Array.from(t.values()).reduce((e,t)=>oi(e,t),ki):ca(e):ki,[e,t])}function eo(e,t){t===void 0&&(t=[]);let n=(0,C.useRef)(null);return(0,C.useEffect)(()=>{n.current=null},t),(0,C.useEffect)(()=>{let t=e!==ki;t&&!n.current&&(n.current=e),!t&&n.current&&(n.current=null)},[e]),n.current?si(e,n.current):ki}function to(e){(0,C.useEffect)(()=>{if(!Hr)return;let t=e.map(e=>{let{sensor:t}=e;return t.setup==null?void 0:t.setup()});return()=>{for(let e of t)e?.()}},e.map(e=>{let{sensor:t}=e;return t}))}function no(e,t){return(0,C.useMemo)(()=>e.reduce((e,n)=>{let{eventName:r,handler:i}=n;return e[r]=e=>{i(e,t)},e},{}),[e,t])}function ro(e){return(0,C.useMemo)(()=>e?qi(e):null,[e])}var io=[];function ao(e,t){t===void 0&&(t=Gi);let[n]=e,r=ro(n?Gr(n):null),[i,a]=(0,C.useState)(io);function o(){a(()=>e.length?e.map(e=>ra(e)?r:new pa(t(e),e)):io)}let s=qa({callback:o});return Xr(()=>{s?.disconnect(),o(),e.forEach(e=>s?.observe(e))},[e]),i}function oo(e){if(!e)return null;if(e.children.length>1)return e;let t=e.children[0];return qr(t)?t:e}function so(e){let{measure:t}=e,[n,r]=(0,C.useState)(null),i=qa({callback:(0,C.useCallback)(e=>{for(let{target:n}of e)if(qr(n)){r(e=>{let r=t(n);return e?{...e,width:r.width,height:r.height}:r});break}},[t])}),[a,o]=ti((0,C.useCallback)(e=>{let n=oo(e);i?.disconnect(),n&&i?.observe(n),r(n?t(n):null)},[t,i]));return(0,C.useMemo)(()=>({nodeRef:a,rect:n,setRef:o}),[n,a,o])}var G=[{sensor:Da,options:{}},{sensor:Sa,options:{}}],K={current:{}},co={draggable:{measure:Ki},droppable:{measure:Ki,strategy:Ba.WhileDragging,frequency:Va.Optimized},dragOverlay:{measure:Gi}},lo=class extends Map{get(e){return e==null?void 0:super.get(e)??void 0}toArray(){return Array.from(this.values())}getEnabled(){return this.toArray().filter(e=>{let{disabled:t}=e;return!t})}getNodeFor(e){return this.get(e)?.node.current??void 0}},uo={activatorEvent:null,active:null,activeNode:null,activeNodeRect:null,collisions:null,containerNodeRect:null,draggableNodes:new Map,droppableRects:new Map,droppableContainers:new lo,over:null,dragOverlay:{nodeRef:{current:null},rect:null,setRef:Ei},scrollableAncestors:[],scrollableAncestorRects:[],measuringConfiguration:co,measureDroppableContainers:Ei,windowRect:null,measuringScheduled:!1},fo={activatorEvent:null,activators:[],active:null,activeNodeRect:null,ariaDescribedById:{draggable:``},dispatch:Ei,draggableNodes:new Map,over:null,measureDroppableContainers:Ei},po=(0,C.createContext)(fo),mo=(0,C.createContext)(uo);function ho(){return{draggable:{active:null,initialCoordinates:{x:0,y:0},nodes:new Map,translate:{x:0,y:0}},droppable:{containers:new lo}}}function go(e,t){switch(t.type){case Ti.DragStart:return{...e,draggable:{...e.draggable,initialCoordinates:t.initialCoordinates,active:t.active}};case Ti.DragMove:return e.draggable.active==null?e:{...e,draggable:{...e.draggable,translate:{x:t.coordinates.x-e.draggable.initialCoordinates.x,y:t.coordinates.y-e.draggable.initialCoordinates.y}}};case Ti.DragEnd:case Ti.DragCancel:return{...e,draggable:{...e.draggable,active:null,initialCoordinates:{x:0,y:0},translate:{x:0,y:0}}};case Ti.RegisterDroppable:{let{element:n}=t,{id:r}=n,i=new lo(e.droppable.containers);return i.set(r,n),{...e,droppable:{...e.droppable,containers:i}}}case Ti.SetDroppableDisabled:{let{id:n,key:r,disabled:i}=t,a=e.droppable.containers.get(n);if(!a||r!==a.key)return e;let o=new lo(e.droppable.containers);return o.set(n,{...a,disabled:i}),{...e,droppable:{...e.droppable,containers:o}}}case Ti.UnregisterDroppable:{let{id:n,key:r}=t,i=e.droppable.containers.get(n);if(!i||r!==i.key)return e;let a=new lo(e.droppable.containers);return a.delete(n),{...e,droppable:{...e.droppable,containers:a}}}default:return e}}function _o(e){let{disabled:t}=e,{active:n,activatorEvent:r,draggableNodes:i}=(0,C.useContext)(po),a=ni(r),o=ni(n?.id);return(0,C.useEffect)(()=>{if(!t&&!r&&a&&o!=null){if(!li(a)||document.activeElement===a.target)return;let e=i.get(o);if(!e)return;let{activatorNode:t,node:n}=e;if(!t.current&&!n.current)return;requestAnimationFrame(()=>{for(let e of[t.current,n.current]){if(!e)continue;let t=mi(e);if(t){t.focus();break}}})}},[r,t,i,o,a]),null}function vo(e,t){let{transform:n,...r}=t;return e!=null&&e.length?e.reduce((e,t)=>t({transform:e,...r}),n):n}function yo(e){return(0,C.useMemo)(()=>({draggable:{...co.draggable,...e?.draggable},droppable:{...co.droppable,...e?.droppable},dragOverlay:{...co.dragOverlay,...e?.dragOverlay}}),[e?.draggable,e?.droppable,e?.dragOverlay])}function bo(e){let{activeNode:t,measure:n,initialRect:r,config:i=!0}=e,a=(0,C.useRef)(!1),{x:o,y:s}=typeof i==`boolean`?{x:i,y:i}:i;Xr(()=>{if(!o&&!s||!t){a.current=!1;return}if(a.current||!r)return;let e=t?.node.current;if(!e||e.isConnected===!1)return;let i=zi(n(e),r);if(o||(i.x=0),s||(i.y=0),a.current=!0,Math.abs(i.x)>0||Math.abs(i.y)>0){let t=Zi(e);t&&t.scrollBy({top:i.y,left:i.x})}},[t,o,s,r,n])}var xo=(0,C.createContext)({...ki,scaleX:1,scaleY:1}),So;(function(e){e[e.Uninitialized=0]=`Uninitialized`,e[e.Initializing=1]=`Initializing`,e[e.Initialized=2]=`Initialized`})(So||={});var Co=(0,C.memo)(function(e){let{id:t,accessibility:n,autoScroll:r=!0,children:i,sensors:a=G,collisionDetection:o=Li,measuring:s,modifiers:c,...l}=e,[u,d]=(0,C.useReducer)(go,void 0,ho),[f,p]=xi(),[m,h]=(0,C.useState)(So.Uninitialized),g=m===So.Initialized,{draggable:{active:_,nodes:v,translate:y},droppable:{containers:b}}=u,x=_==null?null:v.get(_),S=(0,C.useRef)({initial:null,translated:null}),w=(0,C.useMemo)(()=>_==null?null:{id:_,data:x?.data??K,rect:S},[_,x]),T=(0,C.useRef)(null),[ee,te]=(0,C.useState)(null),[E,D]=(0,C.useState)(null),O=$r(l,Object.values(l)),ne=ii(`DndDescribedBy`,t),k=(0,C.useMemo)(()=>b.getEnabled(),[b]),re=yo(s),{droppableRects:ie,measureDroppableContainers:ae,measuringScheduled:A}=Ua(k,{dragging:g,dependencies:[y.x,y.y],config:re.droppable}),j=Ra(v,_),oe=(0,C.useMemo)(()=>E?di(E):null,[E]),se=je(),ce=Ga(j,re.draggable.measure);bo({activeNode:_==null?null:v.get(_),config:se.layoutShiftCompensation,initialRect:ce,measure:re.draggable.measure});let M=Ya(j,re.draggable.measure,ce),N=Ya(j?j.parentElement:null),P=(0,C.useRef)({activatorEvent:null,active:null,activeNode:j,collisionRect:null,collisions:null,droppableRects:ie,draggableNodes:v,draggingNode:null,draggingNodeRect:null,droppableContainers:b,over:null,scrollableAncestors:[],scrollAdjustedTranslate:null}),le=b.getNodeFor(P.current.over?.id),ue=so({measure:re.dragOverlay.measure}),de=ue.nodeRef.current??j,fe=g?ue.rect??M:null,pe=!!(ue.nodeRef.current&&ue.rect),F=Xa(pe?null:M),me=ro(de?Gr(de):null),he=Qa(g?le??j:null),ge=ao(he),_e=vo(c,{transform:{x:y.x-F.x,y:y.y-F.y,scaleX:1,scaleY:1},activatorEvent:E,active:w,activeNodeRect:M,containerNodeRect:N,draggingNodeRect:fe,over:P.current.over,overlayNodeRect:ue.rect,scrollableAncestors:he,scrollableAncestorRects:ge,windowRect:me}),ve=oe?oi(oe,y):null,ye=$a(he),I=eo(ye),be=eo(ye,[M]),xe=oi(_e,I),Se=fe?Vi(fe,_e):null,Ce=w&&Se?o({active:w,collisionRect:Se,droppableRects:ie,droppableContainers:k,pointerCoordinates:ve}):null,we=Ni(Ce,`id`),[Te,Ee]=(0,C.useState)(null),De=Ri(pe?_e:oi(_e,be),Te?.rect??null,M),L=(0,C.useRef)(null),R=(0,C.useCallback)((e,t)=>{let{sensor:n,options:r}=t;if(T.current==null)return;let i=v.get(T.current);if(!i)return;let a=e.nativeEvent;L.current=new n({active:T.current,activeNode:i,event:a,options:r,context:P,onAbort(e){if(!v.get(e))return;let{onDragAbort:t}=O.current,n={id:e};t?.(n),f({type:`onDragAbort`,event:n})},onPending(e,t,n,r){if(!v.get(e))return;let{onDragPending:i}=O.current,a={id:e,constraint:t,initialCoordinates:n,offset:r};i?.(a),f({type:`onDragPending`,event:a})},onStart(e){let t=T.current;if(t==null)return;let n=v.get(t);if(!n)return;let{onDragStart:r}=O.current,i={activatorEvent:a,active:{id:t,data:n.data,rect:S}};(0,An.unstable_batchedUpdates)(()=>{r?.(i),h(So.Initializing),d({type:Ti.DragStart,initialCoordinates:e,active:t}),f({type:`onDragStart`,event:i}),te(L.current),D(a)})},onMove(e){d({type:Ti.DragMove,coordinates:e})},onEnd:o(Ti.DragEnd),onCancel:o(Ti.DragCancel)});function o(e){return async function(){let{active:t,collisions:n,over:r,scrollAdjustedTranslate:i}=P.current,o=null;if(t&&i){let{cancelDrop:s}=O.current;o={activatorEvent:a,active:t,collisions:n,delta:i,over:r},e===Ti.DragEnd&&typeof s==`function`&&await Promise.resolve(s(o))&&(e=Ti.DragCancel)}T.current=null,(0,An.unstable_batchedUpdates)(()=>{d({type:e}),h(So.Uninitialized),Ee(null),te(null),D(null),L.current=null;let t=e===Ti.DragEnd?`onDragEnd`:`onDragCancel`;if(o){let e=O.current[t];e?.(o),f({type:t,event:o})}})}}},[v]),Oe=za(a,(0,C.useCallback)((e,t)=>(n,r)=>{let i=n.nativeEvent,a=v.get(r);if(T.current!==null||!a||i.dndKit||i.defaultPrevented)return;let o={active:a};e(n,t.options,o)===!0&&(i.dndKit={capturedBy:t.sensor},T.current=r,R(n,t))},[v,R]));to(a),Xr(()=>{M&&m===So.Initializing&&h(So.Initialized)},[M,m]),(0,C.useEffect)(()=>{let{onDragMove:e}=O.current,{active:t,activatorEvent:n,collisions:r,over:i}=P.current;if(!t||!n)return;let a={active:t,activatorEvent:n,collisions:r,delta:{x:xe.x,y:xe.y},over:i};(0,An.unstable_batchedUpdates)(()=>{e?.(a),f({type:`onDragMove`,event:a})})},[xe.x,xe.y]),(0,C.useEffect)(()=>{let{active:e,activatorEvent:t,collisions:n,droppableContainers:r,scrollAdjustedTranslate:i}=P.current;if(!e||T.current==null||!t||!i)return;let{onDragOver:a}=O.current,o=r.get(we),s=o&&o.rect.current?{id:o.id,rect:o.rect.current,data:o.data,disabled:o.disabled}:null,c={active:e,activatorEvent:t,collisions:n,delta:{x:i.x,y:i.y},over:s};(0,An.unstable_batchedUpdates)(()=>{Ee(s),a?.(c),f({type:`onDragOver`,event:c})})},[we]),Xr(()=>{P.current={activatorEvent:E,active:w,activeNode:j,collisionRect:Se,collisions:Ce,droppableRects:ie,draggableNodes:v,draggingNode:de,draggingNodeRect:fe,droppableContainers:b,over:Te,scrollableAncestors:he,scrollAdjustedTranslate:xe},S.current={initial:fe,translated:Se}},[w,j,Ce,Se,v,de,fe,ie,b,Te,he,xe]),Fa({...se,delta:y,draggingRect:Se,pointerCoordinates:ve,scrollableAncestors:he,scrollableAncestorRects:ge});let ke=(0,C.useMemo)(()=>({active:w,activeNode:j,activeNodeRect:M,activatorEvent:E,collisions:Ce,containerNodeRect:N,dragOverlay:ue,draggableNodes:v,droppableContainers:b,droppableRects:ie,over:Te,measureDroppableContainers:ae,scrollableAncestors:he,scrollableAncestorRects:ge,measuringConfiguration:re,measuringScheduled:A,windowRect:me}),[w,j,M,E,Ce,N,ue,v,b,ie,Te,ae,he,ge,re,A,me]),Ae=(0,C.useMemo)(()=>({activatorEvent:E,activators:Oe,active:w,activeNodeRect:M,ariaDescribedById:{draggable:ne},dispatch:d,draggableNodes:v,over:Te,measureDroppableContainers:ae}),[E,Oe,w,M,d,ne,v,Te,ae]);return C.createElement(yi.Provider,{value:p},C.createElement(po.Provider,{value:Ae},C.createElement(mo.Provider,{value:ke},C.createElement(xo.Provider,{value:De},i)),C.createElement(_o,{disabled:n?.restoreFocus===!1})),C.createElement(wi,{...n,hiddenTextDescribedById:ne}));function je(){let e=ee?.autoScrollEnabled===!1,t=typeof r==`object`?r.enabled===!1:r===!1,n=g&&!e&&!t;return typeof r==`object`?{...r,enabled:n}:{enabled:n}}}),wo=(0,C.createContext)(null),To=`button`,Eo=`Draggable`;function Do(e){let{id:t,data:n,disabled:r=!1,attributes:i}=e,a=ii(Eo),{activators:o,activatorEvent:s,active:c,activeNodeRect:l,ariaDescribedById:u,draggableNodes:d,over:f}=(0,C.useContext)(po),{role:p=To,roleDescription:m=`draggable`,tabIndex:h=0}=i??{},g=c?.id===t,_=(0,C.useContext)(g?xo:wo),[v,y]=ti(),[b,x]=ti(),S=no(o,t),w=$r(n);return Xr(()=>(d.set(t,{id:t,key:a,node:v,activatorNode:b,data:w}),()=>{let e=d.get(t);e&&e.key===a&&d.delete(t)}),[d,t]),{active:c,activatorEvent:s,activeNodeRect:l,attributes:(0,C.useMemo)(()=>({role:p,tabIndex:h,"aria-disabled":r,"aria-pressed":g&&p===To?!0:void 0,"aria-roledescription":m,"aria-describedby":u.draggable}),[r,p,h,g,m,u.draggable]),isDragging:g,listeners:r?void 0:S,node:v,over:f,setNodeRef:y,setActivatorNodeRef:x,transform:_}}function Oo(){return(0,C.useContext)(mo)}var ko=`Droppable`,Ao={timeout:25};function jo(e){let{data:t,disabled:n=!1,id:r,resizeObserverConfig:i}=e,a=ii(ko),{active:o,dispatch:s,over:c,measureDroppableContainers:l}=(0,C.useContext)(po),u=(0,C.useRef)({disabled:n}),d=(0,C.useRef)(!1),f=(0,C.useRef)(null),p=(0,C.useRef)(null),{disabled:m,updateMeasurementsFor:h,timeout:g}={...Ao,...i},_=$r(h??r),v=qa({callback:(0,C.useCallback)(()=>{if(!d.current){d.current=!0;return}p.current!=null&&clearTimeout(p.current),p.current=setTimeout(()=>{l(Array.isArray(_.current)?_.current:[_.current]),p.current=null},g)},[g]),disabled:m||!o}),[y,b]=ti((0,C.useCallback)((e,t)=>{v&&(t&&(v.unobserve(t),d.current=!1),e&&v.observe(e))},[v])),x=$r(t);return(0,C.useEffect)(()=>{!v||!y.current||(v.disconnect(),d.current=!1,v.observe(y.current))},[y,v]),(0,C.useEffect)(()=>(s({type:Ti.RegisterDroppable,element:{id:r,key:a,disabled:n,node:y,rect:f,data:x}}),()=>s({type:Ti.UnregisterDroppable,key:a,id:r})),[r]),(0,C.useEffect)(()=>{n!==u.current.disabled&&(s({type:Ti.SetDroppableDisabled,id:r,key:a,disabled:n}),u.current.disabled=n)},[r,a,n,s]),{active:o,rect:f,isOver:c?.id===r,node:y,over:c,setNodeRef:b}}function Mo(e){let{animation:t,children:n}=e,[r,i]=(0,C.useState)(null),[a,o]=(0,C.useState)(null),s=ni(n);return!n&&!r&&s&&i(s),Xr(()=>{if(!a)return;let e=r?.key,n=r?.props.id;if(e==null||n==null){i(null);return}Promise.resolve(t(n,a)).then(()=>{i(null)})},[t,r,a]),C.createElement(C.Fragment,null,n,r?(0,C.cloneElement)(r,{ref:o}):null)}var No={x:0,y:0,scaleX:1,scaleY:1};function Po(e){let{children:t}=e;return C.createElement(po.Provider,{value:fo},C.createElement(xo.Provider,{value:No},t))}var Fo={position:`fixed`,touchAction:`none`},Io=e=>li(e)?`transform 250ms ease`:void 0,Lo=(0,C.forwardRef)((e,t)=>{let{as:n,activatorEvent:r,adjustScale:i,children:a,className:o,rect:s,style:c,transform:l,transition:u=Io}=e;if(!s)return null;let d=i?l:{...l,scaleX:1,scaleY:1},f={...Fo,width:s.width,height:s.height,top:s.top,left:s.left,transform:fi.Transform.toString(d),transformOrigin:i&&r?U(r,s):void 0,transition:typeof u==`function`?u(r):u,...c};return C.createElement(n,{className:o,style:f,ref:t},a)}),Ro={duration:250,easing:`ease`,keyframes:e=>{let{transform:{initial:t,final:n}}=e;return[{transform:fi.Transform.toString(t)},{transform:fi.Transform.toString(n)}]},sideEffects:(e=>t=>{let{active:n,dragOverlay:r}=t,i={},{styles:a,className:o}=e;if(a!=null&&a.active)for(let[e,t]of Object.entries(a.active))t!==void 0&&(i[e]=n.node.style.getPropertyValue(e),n.node.style.setProperty(e,t));if(a!=null&&a.dragOverlay)for(let[e,t]of Object.entries(a.dragOverlay))t!==void 0&&r.node.style.setProperty(e,t);return o!=null&&o.active&&n.node.classList.add(o.active),o!=null&&o.dragOverlay&&r.node.classList.add(o.dragOverlay),function(){for(let[e,t]of Object.entries(i))n.node.style.setProperty(e,t);o!=null&&o.active&&n.node.classList.remove(o.active)}})({styles:{active:{opacity:`0`}}})};function zo(e){let{config:t,draggableNodes:n,droppableContainers:r,measuringConfiguration:i}=e;return Zr((e,a)=>{if(t===null)return;let o=n.get(e);if(!o)return;let s=o.node.current;if(!s)return;let c=oo(a);if(!c)return;let{transform:l}=Gr(a).getComputedStyle(a),u=Hi(l);if(!u)return;let d=typeof t==`function`?t:Bo(t);return da(s,i.draggable.measure),d({active:{id:e,data:o.data,node:s,rect:i.draggable.measure(s)},draggableNodes:n,dragOverlay:{node:a,rect:i.dragOverlay.measure(c)},droppableContainers:r,measuringConfiguration:i,transform:u})})}function Bo(e){let{duration:t,easing:n,sideEffects:r,keyframes:i}={...Ro,...e};return e=>{let{active:a,dragOverlay:o,transform:s,...c}=e;if(!t)return;let l={x:o.rect.left-a.rect.left,y:o.rect.top-a.rect.top},u={scaleX:s.scaleX===1?1:a.rect.width*s.scaleX/o.rect.width,scaleY:s.scaleY===1?1:a.rect.height*s.scaleY/o.rect.height},d={x:s.x-l.x,y:s.y-l.y,...u},f=i({...c,active:a,dragOverlay:o,transform:{initial:s,final:d}}),[p]=f,m=f[f.length-1];if(JSON.stringify(p)===JSON.stringify(m))return;let h=r?.({active:a,dragOverlay:o,...c}),g=o.node.animate(f,{duration:t,easing:n,fill:`forwards`});return new Promise(e=>{g.onfinish=()=>{h?.(),e()}})}}var Vo=0;function Ho(e){return(0,C.useMemo)(()=>{if(e!=null)return Vo++,Vo},[e])}var Uo=C.memo(e=>{let{adjustScale:t=!1,children:n,dropAnimation:r,style:i,transition:a,modifiers:o,wrapperElement:s=`div`,className:c,zIndex:l=999}=e,{activatorEvent:u,active:d,activeNodeRect:f,containerNodeRect:p,draggableNodes:m,droppableContainers:h,dragOverlay:g,over:_,measuringConfiguration:v,scrollableAncestors:y,scrollableAncestorRects:b,windowRect:x}=Oo(),S=(0,C.useContext)(xo),w=Ho(d?.id),T=vo(o,{activatorEvent:u,active:d,activeNodeRect:f,containerNodeRect:p,draggingNodeRect:g.rect,over:_,overlayNodeRect:g.rect,scrollableAncestors:y,scrollableAncestorRects:b,transform:S,windowRect:x}),ee=Wa(f),te=zo({config:r,draggableNodes:m,droppableContainers:h,measuringConfiguration:v}),E=ee?g.setRef:void 0;return C.createElement(Po,null,C.createElement(Mo,{animation:te},d&&w?C.createElement(Lo,{key:w,id:d.id,ref:E,as:s,activatorEvent:u,adjustScale:t,className:c,transition:a,rect:ee,style:{zIndex:l,...i},transform:T},n):null))});function Wo(e){return e.type===`row`||e.type===`column`||e.type===`grid`?e.items:e.type===`accordion`?e.body:e.type===`tabs`?e.tabs.flatMap(e=>e.content):null}function Go(e,t){if(!e||e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}function Ko(e){switch(e.type){case`text`:return`"${(e.content??``).slice(0,20)}"`;case`button`:return`"${e.label}"`;case`image`:return e.url?`image`:`(empty)`;case`badge`:return`"${e.text}"`;case`chip`:return`"${e.text}"`;case`link`:return`"${e.text}"`;case`accordion`:return`"${e.header}"`;default:return``}}function qo(e){return`n-`+e.join(`-`)}function Jo(e,t){return`g-`+e.join(`-`)+`_`+t}function Yo(e){if(!e.startsWith(`g-`))return null;let t=e.slice(2).split(`_`);return t.length===2?{parentPath:t[0]===``?[]:t[0].split(`-`).map(Number),index:Number(t[1])}:null}function Xo(e){return e.startsWith(`n-`)?e.slice(2).split(`-`).map(Number):null}function Zo({parentPath:e,index:t,depth:n}){let{setNodeRef:r,isOver:i}=jo({id:Jo(e,t)});return(0,I.jsx)(`div`,{ref:r,className:`tree-drop-gap ${i?`active`:``}`,style:{paddingLeft:20+n*16},children:(0,I.jsx)(`div`,{className:`tree-drop-line`})})}var Qo=(0,C.memo)(function e({element:t,path:n,selectedPath:r,selectedPaths:i,onSelect:a,depth:o,isDraggingAny:s}){let c=qo(n),l=Go(r,n),u=i.length>1&&i.some(e=>Go(e,n)),d=Wo(t),f=d!==null,[p,m]=(0,C.useState)(!1),{attributes:h,listeners:g,setNodeRef:_,isDragging:v}=Do({id:c,data:{path:n,element:t}}),{setNodeRef:y,isOver:b}=jo({id:c,data:{path:n,element:t}}),x=(0,C.useCallback)(e=>{_(e),y(e)},[_,y]),S=(0,C.useCallback)(e=>{e.stopPropagation(),a(n)},[a,n]),w=(0,C.useCallback)(e=>{e.stopPropagation(),e.preventDefault(),m(e=>!e)},[]),T=n.slice(0,-1);return(0,I.jsxs)(I.Fragment,{children:[s?(0,I.jsx)(Zo,{parentPath:T,index:n[n.length-1],depth:o}):null,(0,I.jsxs)(`div`,{className:`tree-node`,ref:x,style:{opacity:v?.3:1},children:[(0,I.jsxs)(`div`,{className:`tree-item ${l?`selected`:``} ${u&&!l?`multi-selected`:``} ${f?`container`:``} ${b&&f?`drop-target`:``}`,style:{paddingLeft:8+o*16},onClick:S,...h,...g,children:[f?(0,I.jsx)(`span`,{className:`tree-arrow ${p?`collapsed`:``}`,onPointerDown:e=>e.stopPropagation(),onClick:w,children:`▾`}):(0,I.jsx)(`span`,{className:`tree-dot`,children:`·`}),(0,I.jsx)(`span`,{className:`tree-type`,children:t.type}),(0,I.jsx)(`span`,{className:`tree-label`,children:Ko(t)}),f&&d?(0,I.jsx)(`span`,{className:`tree-badge`,children:d.length}):null,br(t)?(0,I.jsx)(`span`,{className:`tree-error-dot`,title:`Has validation errors`}):null]}),f&&!p&&d&&d.length>0?(0,I.jsxs)(`div`,{className:`tree-children`,children:[d.map((t,c)=>(0,I.jsx)(e,{element:t,path:[...n,c],selectedPath:r,selectedPaths:i,onSelect:a,depth:o+1,isDraggingAny:s},qo([...n,c]))),s?(0,I.jsx)(Zo,{parentPath:n,index:d.length,depth:o+1}):null]}):null]})]})});function $o({element:e}){return(0,I.jsx)(`div`,{className:`tree-drag-overlay`,children:(0,I.jsxs)(`div`,{className:`tree-item selected`,style:{paddingLeft:8},children:[Wo(e)?(0,I.jsx)(`span`,{className:`tree-arrow`,children:`▾`}):(0,I.jsx)(`span`,{className:`tree-dot`,children:`·`}),(0,I.jsx)(`span`,{className:`tree-type`,children:e.type}),(0,I.jsx)(`span`,{className:`tree-label`,children:Ko(e)})]})})}function es(e,t){let n=t.toLowerCase();if(e.type.toLowerCase().includes(n)||Ko(e).toLowerCase().includes(n))return!0;let r=Wo(e);return r?r.some(e=>es(e,n)):!1}function ts(){let e=F(e=>e.body),t=F(e=>e.selectedPath),n=F(e=>e.selectedPaths),r=F(e=>e.selectElement),i=F(e=>e.moveElementToPath),[a,o]=(0,C.useState)(null),[s,c]=(0,C.useState)(``),l=Oi(Di(Da,{activationConstraint:{distance:8}})),u=(0,C.useCallback)(e=>{o(e.active.data.current?.element??null)},[]),d=(0,C.useCallback)(e=>{o(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=Xo(t.id);if(!r)return;let a=n.id,s=t.id;if(a.startsWith(s.replace(`n-`,`n-`)+`-`)||a.startsWith(s.replace(`n-`,`g-`)+`-`))return;let c=Yo(a);if(c){i(r,c.parentPath,c.index);return}let l=Xo(a);if(!l)return;let u=n.data.current?.element;u&&Wo(u)!==null?i(r,l,(Wo(u)??[]).length):i(r,l.slice(0,-1),l[l.length-1])},[i]);if(e.length===0)return(0,I.jsx)(`div`,{className:`tree-empty`,children:`No elements yet`});let f=s?e.filter(e=>es(e,s)):e;return(0,I.jsxs)(`div`,{children:[(0,I.jsxs)(`div`,{className:`tree-search-wrap`,children:[(0,I.jsx)(`input`,{className:`tree-search`,placeholder:`Search elements...`,value:s,onChange:e=>c(e.target.value)}),s?(0,I.jsx)(`button`,{className:`tree-search-clear`,onClick:()=>c(``),children:`×`}):null]}),f.length===0&&s?(0,I.jsxs)(`div`,{className:`tree-empty`,children:[`No matches for "`,s,`"`]}):(0,I.jsxs)(Co,{sensors:l,collisionDetection:Fi,onDragStart:u,onDragEnd:d,children:[(0,I.jsxs)(`div`,{className:`tree-root`,children:[f.map(i=>{let o=e.indexOf(i);return(0,I.jsx)(Qo,{element:i,path:[o],selectedPath:t,selectedPaths:n,onSelect:r,depth:0,isDraggingAny:!!a},qo([o]))}),!s&&a?(0,I.jsx)(Zo,{parentPath:[],index:e.length,depth:0}):null]}),(0,I.jsx)(Uo,{children:a?(0,I.jsx)($o,{element:a}):null})]})]})}function ns(e,t){if(t.length===0)return null;let n=e[t[0]];for(let e=1;e<t.length;e++){if(!n)return null;let r=null;if(n.type===`row`||n.type===`column`||n.type===`grid`?r=n.items:n.type===`accordion`?r=n.body:n.type===`tabs`&&(r=n.tabs[n.defaultActiveTab??0]?.content??null),!r)return null;n=r[t[e]]}return n??null}var rs=(0,C.memo)(function(){let e=F(e=>e.selectedPath),t=F(e=>e.body),n=F(e=>e.updateElement),r=F(e=>e.setCanvasView),i=F(e=>e.channels),[a,o]=(0,C.useState)(i===`push`?`notification`:`tree`),s=i===`push`||i===`both`,c=e?ns(t,e):null,l=(0,C.useCallback)(e=>{o(e),r(e===`notification`?`notification`:`bubble`)},[r]),u=(0,C.useCallback)(e=>{let t=F.getState().selectedPath;t&&n(t,e)},[n]);return(0,I.jsxs)(`div`,{className:`right-panel`,children:[(0,I.jsxs)(`div`,{className:`rp-tabs`,children:[i!==`push`&&(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`button`,{className:`rp-tab ${a===`tree`?`active`:``}`,onClick:()=>l(`tree`),children:`Tree`}),(0,I.jsx)(`button`,{className:`rp-tab ${a===`element`?`active`:``}`,onClick:()=>l(`element`),children:`Element`}),(0,I.jsx)(`button`,{className:`rp-tab ${a===`bubble`?`active`:``}`,onClick:()=>l(`bubble`),children:`Bubble`})]}),s&&(0,I.jsx)(`button`,{className:`rp-tab ${a===`notification`?`active`:``}`,onClick:()=>l(`notification`),children:`Notification`})]}),(0,I.jsx)(`div`,{className:`rp-content`,children:a===`tree`?(0,I.jsx)(ts,{}):a===`element`?c?(0,I.jsx)(xr,{element:c,onUpdate:u}):(0,I.jsxs)(`div`,{className:`rp-empty`,children:[(0,I.jsx)(`span`,{className:`rp-empty-icon`,children:`⊡`}),`Select an element to edit its properties`]}):a===`notification`?(0,I.jsx)(Vr,{}):(0,I.jsx)(Br,{})})]})}),is=[{keys:`⌘ Z`,action:`Undo`},{keys:`⌘ ⇧ Z`,action:`Redo`},{keys:`⌘ D`,action:`Duplicate element`},{keys:`⌘ C`,action:`Copy element`},{keys:`⌘ V`,action:`Paste element`},{keys:`Delete`,action:`Remove element`},{keys:`Esc`,action:`Deselect`},{keys:`?`,action:`Toggle this panel`}],as=(0,C.memo)(function(){let[e,t]=(0,C.useState)(!1);return(0,C.useEffect)(()=>{let e=e=>{let n=e.target;n.tagName===`INPUT`||n.tagName===`TEXTAREA`||n.tagName===`SELECT`||e.key===`?`&&(e.preventDefault(),t(e=>!e))};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[]),e?(0,I.jsx)(`div`,{className:`shortcuts-overlay`,onClick:()=>t(!1),children:(0,I.jsxs)(`div`,{className:`shortcuts-panel`,onClick:e=>e.stopPropagation(),children:[(0,I.jsxs)(`div`,{className:`shortcuts-header`,children:[(0,I.jsx)(`span`,{children:`Keyboard Shortcuts`}),(0,I.jsx)(`button`,{className:`shortcuts-close`,onClick:()=>t(!1),children:`×`})]}),(0,I.jsx)(`div`,{className:`shortcuts-list`,children:is.map(e=>(0,I.jsxs)(`div`,{className:`shortcut-row`,children:[(0,I.jsx)(`span`,{className:`shortcut-action`,children:e.action}),(0,I.jsx)(`kbd`,{className:`shortcut-keys`,children:e.keys})]},e.keys))})]})}):null});function os(){(0,C.useEffect)(()=>{let e=e=>{let t=e.metaKey||e.ctrlKey,n=e.target;if(n.tagName===`INPUT`||n.tagName===`TEXTAREA`||n.tagName===`SELECT`)return;let r=F.getState();if(t&&!e.shiftKey&&e.key===`z`){e.preventDefault(),r.undo();return}if(t&&e.shiftKey&&e.key===`z`){e.preventDefault(),r.redo();return}if(t&&e.key===`d`){e.preventDefault(),r.selectedPath&&r.duplicateElement(r.selectedPath);return}if(t&&e.key===`c`){e.preventDefault(),r.selectedPath&&r.copyElement(r.selectedPath);return}if(t&&e.key===`v`){e.preventDefault(),r.pasteElement(r.selectedPath??void 0);return}if(e.key===`Backspace`||e.key===`Delete`){e.preventDefault(),r.selectedPath&&r.removeElement(r.selectedPath);return}if(e.key===`Escape`){r.selectElement(null);return}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[])}var ss=(0,C.memo)(function(){os();let e=F(e=>e.channels)===`push`;return(0,I.jsxs)(`div`,{className:`editor-root`,children:[!k.hideTopBar&&(0,I.jsx)(mn,{}),(0,I.jsxs)(`div`,{className:`editor-panels`,children:[!e&&(0,I.jsx)(wn,{}),(0,I.jsx)(nr,{}),(0,I.jsx)(rs,{})]}),!e&&(0,I.jsx)(as,{})]})});function cs(){return F(e=>e.view)===`library`?(0,I.jsx)(Te,{}):(0,I.jsx)(ss,{})}function ls(e,t){k.appId=t.appId,k.region=t.region,k.token=t.token,k.onSave=t.onSave,k.onChange=t.onChange,k.hideTopBar=t.hideTopBar,k.hideTemplateLibrary=t.hideTemplateLibrary,k.channels=t.channels??`inapp`,k.notification=t.notification,F.getState().setChannels(k.channels),t.variables&&F.getState().setVariables(t.variables),t.hideTemplateLibrary&&F.getState().setView(`editor`),console.log(`[BubbleBuilder] mountBubbleBuilder called with:`,{appId:t.appId,region:t.region,token:t.token?`***`+t.token.slice(-4):void 0,hasBubble:!!t.bubble,templateName:t.templateName,hasOnSave:!!t.onSave});let n=(0,E.createRoot)(e);n.render((0,I.jsx)(C.StrictMode,{children:(0,I.jsx)(cs,{})}));let r;if(t.onChange){let e=t.onChange,n=F.getState().body,i=F.getState().settings,a=F.getState().fallbackText,o=F.getState().notificationTitle,s=F.getState().notificationBody;r=F.subscribe(t=>{(t.body!==n||t.settings!==i||t.fallbackText!==a||t.notificationTitle!==o||t.notificationBody!==s)&&(n=t.body,i=t.settings,a=t.fallbackText,o=t.notificationTitle,s=t.notificationBody,e(t.getBubbleJSON()))})}return t.bubble&&setTimeout(()=>{F.getState().loadBubble(t.bubble,void 0,t.templateName??`Untitled`)},0),{loadBubble:(e,t)=>F.getState().loadBubble(e,void 0,t??`Untitled`),getBubbleJSON:()=>F.getState().getBubbleJSON(),setVariables:e=>F.getState().setVariables(e),setChannels:e=>{k.channels=e,F.getState().setChannels(e)},setCanvasView:e=>F.getState().setCanvasView(e),destroy:()=>{r?.(),n.unmount(),Object.keys(k).forEach(e=>delete k[e])}}}e.builderConfig=k,e.mountBubbleBuilder=ls});
20
+ `},Ci={onDragStart(e){let{active:t}=e;return`Picked up draggable item `+t.id+`.`},onDragOver(e){let{active:t,over:n}=e;return n?`Draggable item `+t.id+` was moved over droppable area `+n.id+`.`:`Draggable item `+t.id+` is no longer over a droppable area.`},onDragEnd(e){let{active:t,over:n}=e;return n?`Draggable item `+t.id+` was dropped over droppable area `+n.id:`Draggable item `+t.id+` was dropped.`},onDragCancel(e){let{active:t}=e;return`Dragging was cancelled. Draggable item `+t.id+` was dropped.`}};function wi(e){let{announcements:t=Ci,container:n,hiddenTextDescribedById:r,screenReaderInstructions:i=Si}=e,{announce:a,announcement:o}=vi(),s=ii(`DndLiveRegion`),[c,l]=(0,C.useState)(!1);if((0,C.useEffect)(()=>{l(!0)},[]),bi((0,C.useMemo)(()=>({onDragStart(e){let{active:n}=e;a(t.onDragStart({active:n}))},onDragMove(e){let{active:n,over:r}=e;t.onDragMove&&a(t.onDragMove({active:n,over:r}))},onDragOver(e){let{active:n,over:r}=e;a(t.onDragOver({active:n,over:r}))},onDragEnd(e){let{active:n,over:r}=e;a(t.onDragEnd({active:n,over:r}))},onDragCancel(e){let{active:n,over:r}=e;a(t.onDragCancel({active:n,over:r}))}}),[a,t])),!c)return null;let u=C.createElement(C.Fragment,null,C.createElement(gi,{id:r,value:i.draggable}),C.createElement(_i,{id:s,announcement:o}));return n?(0,An.createPortal)(u,n):u}var Ti;(function(e){e.DragStart=`dragStart`,e.DragMove=`dragMove`,e.DragEnd=`dragEnd`,e.DragCancel=`dragCancel`,e.DragOver=`dragOver`,e.RegisterDroppable=`registerDroppable`,e.SetDroppableDisabled=`setDroppableDisabled`,e.UnregisterDroppable=`unregisterDroppable`})(Ti||={});function Ei(){}function Di(e,t){return(0,C.useMemo)(()=>({sensor:e,options:t??{}}),[e,t])}function Oi(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return(0,C.useMemo)(()=>[...t].filter(e=>e!=null),[...t])}var ki=Object.freeze({x:0,y:0});function Ai(e,t){return Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2)}function U(e,t){let n=di(e);if(!n)return`0 0`;let r={x:(n.x-t.left)/t.width*100,y:(n.y-t.top)/t.height*100};return r.x+`% `+r.y+`%`}function ji(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return n-r}function Mi(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return r-n}function Ni(e,t){if(!e||e.length===0)return null;let[n]=e;return t?n[t]:n}function Pi(e,t,n){return t===void 0&&(t=e.left),n===void 0&&(n=e.top),{x:t+e.width*.5,y:n+e.height*.5}}var Fi=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e,i=Pi(t,t.left,t.top),a=[];for(let e of r){let{id:t}=e,r=n.get(t);if(r){let n=Ai(Pi(r),i);a.push({id:t,data:{droppableContainer:e,value:n}})}}return a.sort(ji)};function Ii(e,t){let n=Math.max(t.top,e.top),r=Math.max(t.left,e.left),i=Math.min(t.left+t.width,e.left+e.width),a=Math.min(t.top+t.height,e.top+e.height),o=i-r,s=a-n;if(r<i&&n<a){let n=t.width*t.height,r=e.width*e.height,i=o*s,a=i/(n+r-i);return Number(a.toFixed(4))}return 0}var Li=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e,i=[];for(let e of r){let{id:r}=e,a=n.get(r);if(a){let n=Ii(a,t);n>0&&i.push({id:r,data:{droppableContainer:e,value:n}})}}return i.sort(Mi)};function Ri(e,t,n){return{...e,scaleX:t&&n?t.width/n.width:1,scaleY:t&&n?t.height/n.height:1}}function zi(e,t){return e&&t?{x:e.left-t.left,y:e.top-t.top}:ki}function Bi(e){return function(t){for(var n=arguments.length,r=Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return r.reduce((t,n)=>({...t,top:t.top+e*n.y,bottom:t.bottom+e*n.y,left:t.left+e*n.x,right:t.right+e*n.x}),{...t})}}var Vi=Bi(1);function Hi(e){if(e.startsWith(`matrix3d(`)){let t=e.slice(9,-1).split(/, /);return{x:+t[12],y:+t[13],scaleX:+t[0],scaleY:+t[5]}}else if(e.startsWith(`matrix(`)){let t=e.slice(7,-1).split(/, /);return{x:+t[4],y:+t[5],scaleX:+t[0],scaleY:+t[3]}}return null}function Ui(e,t,n){let r=Hi(t);if(!r)return e;let{scaleX:i,scaleY:a,x:o,y:s}=r,c=e.left-o-(1-i)*parseFloat(n),l=e.top-s-(1-a)*parseFloat(n.slice(n.indexOf(` `)+1)),u=i?e.width/i:e.width,d=a?e.height/a:e.height;return{width:u,height:d,top:l,right:c+u,bottom:l+d,left:c}}var Wi={ignoreTransform:!1};function Gi(e,t){t===void 0&&(t=Wi);let n=e.getBoundingClientRect();if(t.ignoreTransform){let{transform:t,transformOrigin:r}=Gr(e).getComputedStyle(e);t&&(n=Ui(n,t,r))}let{top:r,left:i,width:a,height:o,bottom:s,right:c}=n;return{top:r,left:i,width:a,height:o,bottom:s,right:c}}function Ki(e){return Gi(e,{ignoreTransform:!0})}function qi(e){let t=e.innerWidth,n=e.innerHeight;return{top:0,left:0,right:t,bottom:n,width:t,height:n}}function Ji(e,t){return t===void 0&&(t=Gr(e).getComputedStyle(e)),t.position===`fixed`}function Yi(e,t){t===void 0&&(t=Gr(e).getComputedStyle(e));let n=/(auto|scroll|overlay)/;return[`overflow`,`overflowX`,`overflowY`].some(e=>{let r=t[e];return typeof r==`string`?n.test(r):!1})}function Xi(e,t){let n=[];function r(i){if(t!=null&&n.length>=t||!i)return n;if(Kr(i)&&i.scrollingElement!=null&&!n.includes(i.scrollingElement))return n.push(i.scrollingElement),n;if(!qr(i)||Jr(i)||n.includes(i))return n;let a=Gr(e).getComputedStyle(i);return i!==e&&Yi(i,a)&&n.push(i),Ji(i,a)?n:r(i.parentNode)}return e?r(e):n}function Zi(e){let[t]=Xi(e,1);return t??null}function Qi(e){return!Hr||!e?null:Ur(e)?e:Wr(e)?Kr(e)||e===Yr(e).scrollingElement?window:qr(e)?e:null:null}function $i(e){return Ur(e)?e.scrollX:e.scrollLeft}function ea(e){return Ur(e)?e.scrollY:e.scrollTop}function ta(e){return{x:$i(e),y:ea(e)}}var na;(function(e){e[e.Forward=1]=`Forward`,e[e.Backward=-1]=`Backward`})(na||={});function ra(e){return!Hr||!e?!1:e===document.scrollingElement}function ia(e){let t={x:0,y:0},n=ra(e)?{height:window.innerHeight,width:window.innerWidth}:{height:e.clientHeight,width:e.clientWidth},r={x:e.scrollWidth-n.width,y:e.scrollHeight-n.height};return{isTop:e.scrollTop<=t.y,isLeft:e.scrollLeft<=t.x,isBottom:e.scrollTop>=r.y,isRight:e.scrollLeft>=r.x,maxScroll:r,minScroll:t}}var aa={x:.2,y:.2};function oa(e,t,n,r,i){let{top:a,left:o,right:s,bottom:c}=n;r===void 0&&(r=10),i===void 0&&(i=aa);let{isTop:l,isBottom:u,isLeft:d,isRight:f}=ia(e),p={x:0,y:0},m={x:0,y:0},h={height:t.height*i.y,width:t.width*i.x};return!l&&a<=t.top+h.height?(p.y=na.Backward,m.y=r*Math.abs((t.top+h.height-a)/h.height)):!u&&c>=t.bottom-h.height&&(p.y=na.Forward,m.y=r*Math.abs((t.bottom-h.height-c)/h.height)),!f&&s>=t.right-h.width?(p.x=na.Forward,m.x=r*Math.abs((t.right-h.width-s)/h.width)):!d&&o<=t.left+h.width&&(p.x=na.Backward,m.x=r*Math.abs((t.left+h.width-o)/h.width)),{direction:p,speed:m}}function sa(e){if(e===document.scrollingElement){let{innerWidth:e,innerHeight:t}=window;return{top:0,left:0,right:e,bottom:t,width:e,height:t}}let{top:t,left:n,right:r,bottom:i}=e.getBoundingClientRect();return{top:t,left:n,right:r,bottom:i,width:e.clientWidth,height:e.clientHeight}}function ca(e){return e.reduce((e,t)=>oi(e,ta(t)),ki)}function la(e){return e.reduce((e,t)=>e+$i(t),0)}function ua(e){return e.reduce((e,t)=>e+ea(t),0)}function da(e,t){if(t===void 0&&(t=Gi),!e)return;let{top:n,left:r,bottom:i,right:a}=t(e);Zi(e)&&(i<=0||a<=0||n>=window.innerHeight||r>=window.innerWidth)&&e.scrollIntoView({block:`center`,inline:`center`})}var fa=[[`x`,[`left`,`right`],la],[`y`,[`top`,`bottom`],ua]],pa=class{constructor(e,t){this.rect=void 0,this.width=void 0,this.height=void 0,this.top=void 0,this.bottom=void 0,this.right=void 0,this.left=void 0;let n=Xi(t),r=ca(n);this.rect={...e},this.width=e.width,this.height=e.height;for(let[e,t,i]of fa)for(let a of t)Object.defineProperty(this,a,{get:()=>{let t=i(n),o=r[e]-t;return this.rect[a]+o},enumerable:!0});Object.defineProperty(this,`rect`,{enumerable:!1})}},ma=class{constructor(e){this.target=void 0,this.listeners=[],this.removeAll=()=>{this.listeners.forEach(e=>this.target?.removeEventListener(...e))},this.target=e}add(e,t,n){var r;(r=this.target)==null||r.addEventListener(e,t,n),this.listeners.push([e,t,n])}};function ha(e){let{EventTarget:t}=Gr(e);return e instanceof t?e:Yr(e)}function ga(e,t){let n=Math.abs(e.x),r=Math.abs(e.y);return typeof t==`number`?Math.sqrt(n**2+r**2)>t:`x`in t&&`y`in t?n>t.x&&r>t.y:`x`in t?n>t.x:`y`in t?r>t.y:!1}var _a;(function(e){e.Click=`click`,e.DragStart=`dragstart`,e.Keydown=`keydown`,e.ContextMenu=`contextmenu`,e.Resize=`resize`,e.SelectionChange=`selectionchange`,e.VisibilityChange=`visibilitychange`})(_a||={});function va(e){e.preventDefault()}function ya(e){e.stopPropagation()}var W;(function(e){e.Space=`Space`,e.Down=`ArrowDown`,e.Right=`ArrowRight`,e.Left=`ArrowLeft`,e.Up=`ArrowUp`,e.Esc=`Escape`,e.Enter=`Enter`,e.Tab=`Tab`})(W||={});var ba={start:[W.Space,W.Enter],cancel:[W.Esc],end:[W.Space,W.Enter,W.Tab]},xa=(e,t)=>{let{currentCoordinates:n}=t;switch(e.code){case W.Right:return{...n,x:n.x+25};case W.Left:return{...n,x:n.x-25};case W.Down:return{...n,y:n.y+25};case W.Up:return{...n,y:n.y-25}}},Sa=class{constructor(e){this.props=void 0,this.autoScrollEnabled=!1,this.referenceCoordinates=void 0,this.listeners=void 0,this.windowListeners=void 0,this.props=e;let{event:{target:t}}=e;this.props=e,this.listeners=new ma(Yr(t)),this.windowListeners=new ma(Gr(t)),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleCancel=this.handleCancel.bind(this),this.attach()}attach(){this.handleStart(),this.windowListeners.add(_a.Resize,this.handleCancel),this.windowListeners.add(_a.VisibilityChange,this.handleCancel),setTimeout(()=>this.listeners.add(_a.Keydown,this.handleKeyDown))}handleStart(){let{activeNode:e,onStart:t}=this.props,n=e.node.current;n&&da(n),t(ki)}handleKeyDown(e){if(li(e)){let{active:t,context:n,options:r}=this.props,{keyboardCodes:i=ba,coordinateGetter:a=xa,scrollBehavior:o=`smooth`}=r,{code:s}=e;if(i.end.includes(s)){this.handleEnd(e);return}if(i.cancel.includes(s)){this.handleCancel(e);return}let{collisionRect:c}=n.current,l=c?{x:c.left,y:c.top}:ki;this.referenceCoordinates||=l;let u=a(e,{active:t,context:n.current,currentCoordinates:l});if(u){let t=si(u,l),r={x:0,y:0},{scrollableAncestors:i}=n.current;for(let n of i){let i=e.code,{isTop:a,isRight:s,isLeft:c,isBottom:l,maxScroll:d,minScroll:f}=ia(n),p=sa(n),m={x:Math.min(i===W.Right?p.right-p.width/2:p.right,Math.max(i===W.Right?p.left:p.left+p.width/2,u.x)),y:Math.min(i===W.Down?p.bottom-p.height/2:p.bottom,Math.max(i===W.Down?p.top:p.top+p.height/2,u.y))},h=i===W.Right&&!s||i===W.Left&&!c,g=i===W.Down&&!l||i===W.Up&&!a;if(h&&m.x!==u.x){let e=n.scrollLeft+t.x,a=i===W.Right&&e<=d.x||i===W.Left&&e>=f.x;if(a&&!t.y){n.scrollTo({left:e,behavior:o});return}a?r.x=n.scrollLeft-e:r.x=i===W.Right?n.scrollLeft-d.x:n.scrollLeft-f.x,r.x&&n.scrollBy({left:-r.x,behavior:o});break}else if(g&&m.y!==u.y){let e=n.scrollTop+t.y,a=i===W.Down&&e<=d.y||i===W.Up&&e>=f.y;if(a&&!t.x){n.scrollTo({top:e,behavior:o});return}a?r.y=n.scrollTop-e:r.y=i===W.Down?n.scrollTop-d.y:n.scrollTop-f.y,r.y&&n.scrollBy({top:-r.y,behavior:o});break}}this.handleMove(e,oi(si(u,this.referenceCoordinates),r))}}}handleMove(e,t){let{onMove:n}=this.props;e.preventDefault(),n(t)}handleEnd(e){let{onEnd:t}=this.props;e.preventDefault(),this.detach(),t()}handleCancel(e){let{onCancel:t}=this.props;e.preventDefault(),this.detach(),t()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll()}};Sa.activators=[{eventName:`onKeyDown`,handler:(e,t,n)=>{let{keyboardCodes:r=ba,onActivation:i}=t,{active:a}=n,{code:o}=e.nativeEvent;if(r.start.includes(o)){let t=a.activatorNode.current;return t&&e.target!==t?!1:(e.preventDefault(),i?.({event:e.nativeEvent}),!0)}return!1}}];function Ca(e){return!!(e&&`distance`in e)}function wa(e){return!!(e&&`delay`in e)}var Ta=class{constructor(e,t,n){n===void 0&&(n=ha(e.event.target)),this.props=void 0,this.events=void 0,this.autoScrollEnabled=!0,this.document=void 0,this.activated=!1,this.initialCoordinates=void 0,this.timeoutId=null,this.listeners=void 0,this.documentListeners=void 0,this.windowListeners=void 0,this.props=e,this.events=t;let{event:r}=e,{target:i}=r;this.props=e,this.events=t,this.document=Yr(i),this.documentListeners=new ma(this.document),this.listeners=new ma(n),this.windowListeners=new ma(Gr(i)),this.initialCoordinates=di(r)??ki,this.handleStart=this.handleStart.bind(this),this.handleMove=this.handleMove.bind(this),this.handleEnd=this.handleEnd.bind(this),this.handleCancel=this.handleCancel.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.removeTextSelection=this.removeTextSelection.bind(this),this.attach()}attach(){let{events:e,props:{options:{activationConstraint:t,bypassActivationConstraint:n}}}=this;if(this.listeners.add(e.move.name,this.handleMove,{passive:!1}),this.listeners.add(e.end.name,this.handleEnd),e.cancel&&this.listeners.add(e.cancel.name,this.handleCancel),this.windowListeners.add(_a.Resize,this.handleCancel),this.windowListeners.add(_a.DragStart,va),this.windowListeners.add(_a.VisibilityChange,this.handleCancel),this.windowListeners.add(_a.ContextMenu,va),this.documentListeners.add(_a.Keydown,this.handleKeydown),t){if(n!=null&&n({event:this.props.event,activeNode:this.props.activeNode,options:this.props.options}))return this.handleStart();if(wa(t)){this.timeoutId=setTimeout(this.handleStart,t.delay),this.handlePending(t);return}if(Ca(t)){this.handlePending(t);return}}this.handleStart()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll(),setTimeout(this.documentListeners.removeAll,50),this.timeoutId!==null&&(clearTimeout(this.timeoutId),this.timeoutId=null)}handlePending(e,t){let{active:n,onPending:r}=this.props;r(n,e,this.initialCoordinates,t)}handleStart(){let{initialCoordinates:e}=this,{onStart:t}=this.props;e&&(this.activated=!0,this.documentListeners.add(_a.Click,ya,{capture:!0}),this.removeTextSelection(),this.documentListeners.add(_a.SelectionChange,this.removeTextSelection),t(e))}handleMove(e){let{activated:t,initialCoordinates:n,props:r}=this,{onMove:i,options:{activationConstraint:a}}=r;if(!n)return;let o=di(e)??ki,s=si(n,o);if(!t&&a){if(Ca(a)){if(a.tolerance!=null&&ga(s,a.tolerance))return this.handleCancel();if(ga(s,a.distance))return this.handleStart()}if(wa(a)&&ga(s,a.tolerance))return this.handleCancel();this.handlePending(a,s);return}e.cancelable&&e.preventDefault(),i(o)}handleEnd(){let{onAbort:e,onEnd:t}=this.props;this.detach(),this.activated||e(this.props.active),t()}handleCancel(){let{onAbort:e,onCancel:t}=this.props;this.detach(),this.activated||e(this.props.active),t()}handleKeydown(e){e.code===W.Esc&&this.handleCancel()}removeTextSelection(){var e;(e=this.document.getSelection())==null||e.removeAllRanges()}},Ea={cancel:{name:`pointercancel`},move:{name:`pointermove`},end:{name:`pointerup`}},Da=class extends Ta{constructor(e){let{event:t}=e,n=Yr(t.target);super(e,Ea,n)}};Da.activators=[{eventName:`onPointerDown`,handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return!n.isPrimary||n.button!==0?!1:(r?.({event:n}),!0)}}];var Oa={move:{name:`mousemove`},end:{name:`mouseup`}},ka;(function(e){e[e.RightClick=2]=`RightClick`})(ka||={});var Aa=class extends Ta{constructor(e){super(e,Oa,Yr(e.event.target))}};Aa.activators=[{eventName:`onMouseDown`,handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return n.button===ka.RightClick?!1:(r?.({event:n}),!0)}}];var ja={cancel:{name:`touchcancel`},move:{name:`touchmove`},end:{name:`touchend`}},Ma=class extends Ta{constructor(e){super(e,ja)}static setup(){return window.addEventListener(ja.move.name,e,{capture:!1,passive:!1}),function(){window.removeEventListener(ja.move.name,e)};function e(){}}};Ma.activators=[{eventName:`onTouchStart`,handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t,{touches:i}=n;return i.length>1?!1:(r?.({event:n}),!0)}}];var Na;(function(e){e[e.Pointer=0]=`Pointer`,e[e.DraggableRect=1]=`DraggableRect`})(Na||={});var Pa;(function(e){e[e.TreeOrder=0]=`TreeOrder`,e[e.ReversedTreeOrder=1]=`ReversedTreeOrder`})(Pa||={});function Fa(e){let{acceleration:t,activator:n=Na.Pointer,canScroll:r,draggingRect:i,enabled:a,interval:o=5,order:s=Pa.TreeOrder,pointerCoordinates:c,scrollableAncestors:l,scrollableAncestorRects:u,delta:d,threshold:f}=e,p=La({delta:d,disabled:!a}),[m,h]=Qr(),g=(0,C.useRef)({x:0,y:0}),_=(0,C.useRef)({x:0,y:0}),v=(0,C.useMemo)(()=>{switch(n){case Na.Pointer:return c?{top:c.y,bottom:c.y,left:c.x,right:c.x}:null;case Na.DraggableRect:return i}},[n,i,c]),y=(0,C.useRef)(null),b=(0,C.useCallback)(()=>{let e=y.current;if(!e)return;let t=g.current.x*_.current.x,n=g.current.y*_.current.y;e.scrollBy(t,n)},[]),x=(0,C.useMemo)(()=>s===Pa.TreeOrder?[...l].reverse():l,[s,l]);(0,C.useEffect)(()=>{if(!a||!l.length||!v){h();return}for(let e of x){if(r?.(e)===!1)continue;let n=u[l.indexOf(e)];if(!n)continue;let{direction:i,speed:a}=oa(e,n,v,t,f);for(let e of[`x`,`y`])p[e][i[e]]||(a[e]=0,i[e]=0);if(a.x>0||a.y>0){h(),y.current=e,m(b,o),g.current=a,_.current=i;return}}g.current={x:0,y:0},_.current={x:0,y:0},h()},[t,b,r,h,a,o,JSON.stringify(v),JSON.stringify(p),m,l,x,u,JSON.stringify(f)])}var Ia={x:{[na.Backward]:!1,[na.Forward]:!1},y:{[na.Backward]:!1,[na.Forward]:!1}};function La(e){let{delta:t,disabled:n}=e,r=ni(t);return ei(e=>{if(n||!r||!e)return Ia;let i={x:Math.sign(t.x-r.x),y:Math.sign(t.y-r.y)};return{x:{[na.Backward]:e.x[na.Backward]||i.x===-1,[na.Forward]:e.x[na.Forward]||i.x===1},y:{[na.Backward]:e.y[na.Backward]||i.y===-1,[na.Forward]:e.y[na.Forward]||i.y===1}}},[n,t,r])}function Ra(e,t){let n=t==null?void 0:e.get(t),r=n?n.node.current:null;return ei(e=>t==null?null:r??e??null,[r,t])}function za(e,t){return(0,C.useMemo)(()=>e.reduce((e,n)=>{let{sensor:r}=n,i=r.activators.map(e=>({eventName:e.eventName,handler:t(e.handler,n)}));return[...e,...i]},[]),[e,t])}var Ba;(function(e){e[e.Always=0]=`Always`,e[e.BeforeDragging=1]=`BeforeDragging`,e[e.WhileDragging=2]=`WhileDragging`})(Ba||={});var Va;(function(e){e.Optimized=`optimized`})(Va||={});var Ha=new Map;function Ua(e,t){let{dragging:n,dependencies:r,config:i}=t,[a,o]=(0,C.useState)(null),{frequency:s,measure:c,strategy:l}=i,u=(0,C.useRef)(e),d=g(),f=$r(d),p=(0,C.useCallback)(function(e){e===void 0&&(e=[]),!f.current&&o(t=>t===null?e:t.concat(e.filter(e=>!t.includes(e))))},[f]),m=(0,C.useRef)(null),h=ei(t=>{if(d&&!n)return Ha;if(!t||t===Ha||u.current!==e||a!=null){let t=new Map;for(let n of e){if(!n)continue;if(a&&a.length>0&&!a.includes(n.id)&&n.rect.current){t.set(n.id,n.rect.current);continue}let e=n.node.current,r=e?new pa(c(e),e):null;n.rect.current=r,r&&t.set(n.id,r)}return t}return t},[e,a,n,d,c]);return(0,C.useEffect)(()=>{u.current=e},[e]),(0,C.useEffect)(()=>{d||p()},[n,d]),(0,C.useEffect)(()=>{a&&a.length>0&&o(null)},[JSON.stringify(a)]),(0,C.useEffect)(()=>{d||typeof s!=`number`||m.current!==null||(m.current=setTimeout(()=>{p(),m.current=null},s))},[s,d,p,...r]),{droppableRects:h,measureDroppableContainers:p,measuringScheduled:a!=null};function g(){switch(l){case Ba.Always:return!1;case Ba.BeforeDragging:return n;default:return!n}}}function Wa(e,t){return ei(n=>e?n||(typeof t==`function`?t(e):e):null,[t,e])}function Ga(e,t){return Wa(e,t)}function Ka(e){let{callback:t,disabled:n}=e,r=Zr(t),i=(0,C.useMemo)(()=>{if(n||typeof window>`u`||window.MutationObserver===void 0)return;let{MutationObserver:e}=window;return new e(r)},[r,n]);return(0,C.useEffect)(()=>()=>i?.disconnect(),[i]),i}function qa(e){let{callback:t,disabled:n}=e,r=Zr(t),i=(0,C.useMemo)(()=>{if(n||typeof window>`u`||window.ResizeObserver===void 0)return;let{ResizeObserver:e}=window;return new e(r)},[n]);return(0,C.useEffect)(()=>()=>i?.disconnect(),[i]),i}function Ja(e){return new pa(Gi(e),e)}function Ya(e,t,n){t===void 0&&(t=Ja);let[r,i]=(0,C.useState)(null);function a(){i(r=>{if(!e)return null;if(e.isConnected===!1)return r??n??null;let i=t(e);return JSON.stringify(r)===JSON.stringify(i)?r:i})}let o=Ka({callback(t){if(e)for(let n of t){let{type:t,target:r}=n;if(t===`childList`&&r instanceof HTMLElement&&r.contains(e)){a();break}}}}),s=qa({callback:a});return Xr(()=>{a(),e?(s?.observe(e),o?.observe(document.body,{childList:!0,subtree:!0})):(s?.disconnect(),o?.disconnect())},[e]),r}function Xa(e){return zi(e,Wa(e))}var Za=[];function Qa(e){let t=(0,C.useRef)(e),n=ei(n=>e?n&&n!==Za&&e&&t.current&&e.parentNode===t.current.parentNode?n:Xi(e):Za,[e]);return(0,C.useEffect)(()=>{t.current=e},[e]),n}function $a(e){let[t,n]=(0,C.useState)(null),r=(0,C.useRef)(e),i=(0,C.useCallback)(e=>{let t=Qi(e.target);t&&n(e=>e?(e.set(t,ta(t)),new Map(e)):null)},[]);return(0,C.useEffect)(()=>{let t=r.current;if(e!==t){a(t);let o=e.map(e=>{let t=Qi(e);return t?(t.addEventListener(`scroll`,i,{passive:!0}),[t,ta(t)]):null}).filter(e=>e!=null);n(o.length?new Map(o):null),r.current=e}return()=>{a(e),a(t)};function a(e){e.forEach(e=>{Qi(e)?.removeEventListener(`scroll`,i)})}},[i,e]),(0,C.useMemo)(()=>e.length?t?Array.from(t.values()).reduce((e,t)=>oi(e,t),ki):ca(e):ki,[e,t])}function eo(e,t){t===void 0&&(t=[]);let n=(0,C.useRef)(null);return(0,C.useEffect)(()=>{n.current=null},t),(0,C.useEffect)(()=>{let t=e!==ki;t&&!n.current&&(n.current=e),!t&&n.current&&(n.current=null)},[e]),n.current?si(e,n.current):ki}function to(e){(0,C.useEffect)(()=>{if(!Hr)return;let t=e.map(e=>{let{sensor:t}=e;return t.setup==null?void 0:t.setup()});return()=>{for(let e of t)e?.()}},e.map(e=>{let{sensor:t}=e;return t}))}function no(e,t){return(0,C.useMemo)(()=>e.reduce((e,n)=>{let{eventName:r,handler:i}=n;return e[r]=e=>{i(e,t)},e},{}),[e,t])}function ro(e){return(0,C.useMemo)(()=>e?qi(e):null,[e])}var io=[];function ao(e,t){t===void 0&&(t=Gi);let[n]=e,r=ro(n?Gr(n):null),[i,a]=(0,C.useState)(io);function o(){a(()=>e.length?e.map(e=>ra(e)?r:new pa(t(e),e)):io)}let s=qa({callback:o});return Xr(()=>{s?.disconnect(),o(),e.forEach(e=>s?.observe(e))},[e]),i}function oo(e){if(!e)return null;if(e.children.length>1)return e;let t=e.children[0];return qr(t)?t:e}function so(e){let{measure:t}=e,[n,r]=(0,C.useState)(null),i=qa({callback:(0,C.useCallback)(e=>{for(let{target:n}of e)if(qr(n)){r(e=>{let r=t(n);return e?{...e,width:r.width,height:r.height}:r});break}},[t])}),[a,o]=ti((0,C.useCallback)(e=>{let n=oo(e);i?.disconnect(),n&&i?.observe(n),r(n?t(n):null)},[t,i]));return(0,C.useMemo)(()=>({nodeRef:a,rect:n,setRef:o}),[n,a,o])}var G=[{sensor:Da,options:{}},{sensor:Sa,options:{}}],K={current:{}},co={draggable:{measure:Ki},droppable:{measure:Ki,strategy:Ba.WhileDragging,frequency:Va.Optimized},dragOverlay:{measure:Gi}},lo=class extends Map{get(e){return e==null?void 0:super.get(e)??void 0}toArray(){return Array.from(this.values())}getEnabled(){return this.toArray().filter(e=>{let{disabled:t}=e;return!t})}getNodeFor(e){return this.get(e)?.node.current??void 0}},uo={activatorEvent:null,active:null,activeNode:null,activeNodeRect:null,collisions:null,containerNodeRect:null,draggableNodes:new Map,droppableRects:new Map,droppableContainers:new lo,over:null,dragOverlay:{nodeRef:{current:null},rect:null,setRef:Ei},scrollableAncestors:[],scrollableAncestorRects:[],measuringConfiguration:co,measureDroppableContainers:Ei,windowRect:null,measuringScheduled:!1},fo={activatorEvent:null,activators:[],active:null,activeNodeRect:null,ariaDescribedById:{draggable:``},dispatch:Ei,draggableNodes:new Map,over:null,measureDroppableContainers:Ei},po=(0,C.createContext)(fo),mo=(0,C.createContext)(uo);function ho(){return{draggable:{active:null,initialCoordinates:{x:0,y:0},nodes:new Map,translate:{x:0,y:0}},droppable:{containers:new lo}}}function go(e,t){switch(t.type){case Ti.DragStart:return{...e,draggable:{...e.draggable,initialCoordinates:t.initialCoordinates,active:t.active}};case Ti.DragMove:return e.draggable.active==null?e:{...e,draggable:{...e.draggable,translate:{x:t.coordinates.x-e.draggable.initialCoordinates.x,y:t.coordinates.y-e.draggable.initialCoordinates.y}}};case Ti.DragEnd:case Ti.DragCancel:return{...e,draggable:{...e.draggable,active:null,initialCoordinates:{x:0,y:0},translate:{x:0,y:0}}};case Ti.RegisterDroppable:{let{element:n}=t,{id:r}=n,i=new lo(e.droppable.containers);return i.set(r,n),{...e,droppable:{...e.droppable,containers:i}}}case Ti.SetDroppableDisabled:{let{id:n,key:r,disabled:i}=t,a=e.droppable.containers.get(n);if(!a||r!==a.key)return e;let o=new lo(e.droppable.containers);return o.set(n,{...a,disabled:i}),{...e,droppable:{...e.droppable,containers:o}}}case Ti.UnregisterDroppable:{let{id:n,key:r}=t,i=e.droppable.containers.get(n);if(!i||r!==i.key)return e;let a=new lo(e.droppable.containers);return a.delete(n),{...e,droppable:{...e.droppable,containers:a}}}default:return e}}function _o(e){let{disabled:t}=e,{active:n,activatorEvent:r,draggableNodes:i}=(0,C.useContext)(po),a=ni(r),o=ni(n?.id);return(0,C.useEffect)(()=>{if(!t&&!r&&a&&o!=null){if(!li(a)||document.activeElement===a.target)return;let e=i.get(o);if(!e)return;let{activatorNode:t,node:n}=e;if(!t.current&&!n.current)return;requestAnimationFrame(()=>{for(let e of[t.current,n.current]){if(!e)continue;let t=mi(e);if(t){t.focus();break}}})}},[r,t,i,o,a]),null}function vo(e,t){let{transform:n,...r}=t;return e!=null&&e.length?e.reduce((e,t)=>t({transform:e,...r}),n):n}function yo(e){return(0,C.useMemo)(()=>({draggable:{...co.draggable,...e?.draggable},droppable:{...co.droppable,...e?.droppable},dragOverlay:{...co.dragOverlay,...e?.dragOverlay}}),[e?.draggable,e?.droppable,e?.dragOverlay])}function bo(e){let{activeNode:t,measure:n,initialRect:r,config:i=!0}=e,a=(0,C.useRef)(!1),{x:o,y:s}=typeof i==`boolean`?{x:i,y:i}:i;Xr(()=>{if(!o&&!s||!t){a.current=!1;return}if(a.current||!r)return;let e=t?.node.current;if(!e||e.isConnected===!1)return;let i=zi(n(e),r);if(o||(i.x=0),s||(i.y=0),a.current=!0,Math.abs(i.x)>0||Math.abs(i.y)>0){let t=Zi(e);t&&t.scrollBy({top:i.y,left:i.x})}},[t,o,s,r,n])}var xo=(0,C.createContext)({...ki,scaleX:1,scaleY:1}),So;(function(e){e[e.Uninitialized=0]=`Uninitialized`,e[e.Initializing=1]=`Initializing`,e[e.Initialized=2]=`Initialized`})(So||={});var Co=(0,C.memo)(function(e){let{id:t,accessibility:n,autoScroll:r=!0,children:i,sensors:a=G,collisionDetection:o=Li,measuring:s,modifiers:c,...l}=e,[u,d]=(0,C.useReducer)(go,void 0,ho),[f,p]=xi(),[m,h]=(0,C.useState)(So.Uninitialized),g=m===So.Initialized,{draggable:{active:_,nodes:v,translate:y},droppable:{containers:b}}=u,x=_==null?null:v.get(_),S=(0,C.useRef)({initial:null,translated:null}),w=(0,C.useMemo)(()=>_==null?null:{id:_,data:x?.data??K,rect:S},[_,x]),T=(0,C.useRef)(null),[ee,te]=(0,C.useState)(null),[E,D]=(0,C.useState)(null),O=$r(l,Object.values(l)),ne=ii(`DndDescribedBy`,t),k=(0,C.useMemo)(()=>b.getEnabled(),[b]),re=yo(s),{droppableRects:ie,measureDroppableContainers:ae,measuringScheduled:A}=Ua(k,{dragging:g,dependencies:[y.x,y.y],config:re.droppable}),j=Ra(v,_),oe=(0,C.useMemo)(()=>E?di(E):null,[E]),se=je(),ce=Ga(j,re.draggable.measure);bo({activeNode:_==null?null:v.get(_),config:se.layoutShiftCompensation,initialRect:ce,measure:re.draggable.measure});let M=Ya(j,re.draggable.measure,ce),N=Ya(j?j.parentElement:null),P=(0,C.useRef)({activatorEvent:null,active:null,activeNode:j,collisionRect:null,collisions:null,droppableRects:ie,draggableNodes:v,draggingNode:null,draggingNodeRect:null,droppableContainers:b,over:null,scrollableAncestors:[],scrollAdjustedTranslate:null}),le=b.getNodeFor(P.current.over?.id),ue=so({measure:re.dragOverlay.measure}),de=ue.nodeRef.current??j,fe=g?ue.rect??M:null,pe=!!(ue.nodeRef.current&&ue.rect),F=Xa(pe?null:M),me=ro(de?Gr(de):null),he=Qa(g?le??j:null),ge=ao(he),_e=vo(c,{transform:{x:y.x-F.x,y:y.y-F.y,scaleX:1,scaleY:1},activatorEvent:E,active:w,activeNodeRect:M,containerNodeRect:N,draggingNodeRect:fe,over:P.current.over,overlayNodeRect:ue.rect,scrollableAncestors:he,scrollableAncestorRects:ge,windowRect:me}),ve=oe?oi(oe,y):null,ye=$a(he),I=eo(ye),be=eo(ye,[M]),xe=oi(_e,I),Se=fe?Vi(fe,_e):null,Ce=w&&Se?o({active:w,collisionRect:Se,droppableRects:ie,droppableContainers:k,pointerCoordinates:ve}):null,we=Ni(Ce,`id`),[Te,Ee]=(0,C.useState)(null),De=Ri(pe?_e:oi(_e,be),Te?.rect??null,M),L=(0,C.useRef)(null),R=(0,C.useCallback)((e,t)=>{let{sensor:n,options:r}=t;if(T.current==null)return;let i=v.get(T.current);if(!i)return;let a=e.nativeEvent;L.current=new n({active:T.current,activeNode:i,event:a,options:r,context:P,onAbort(e){if(!v.get(e))return;let{onDragAbort:t}=O.current,n={id:e};t?.(n),f({type:`onDragAbort`,event:n})},onPending(e,t,n,r){if(!v.get(e))return;let{onDragPending:i}=O.current,a={id:e,constraint:t,initialCoordinates:n,offset:r};i?.(a),f({type:`onDragPending`,event:a})},onStart(e){let t=T.current;if(t==null)return;let n=v.get(t);if(!n)return;let{onDragStart:r}=O.current,i={activatorEvent:a,active:{id:t,data:n.data,rect:S}};(0,An.unstable_batchedUpdates)(()=>{r?.(i),h(So.Initializing),d({type:Ti.DragStart,initialCoordinates:e,active:t}),f({type:`onDragStart`,event:i}),te(L.current),D(a)})},onMove(e){d({type:Ti.DragMove,coordinates:e})},onEnd:o(Ti.DragEnd),onCancel:o(Ti.DragCancel)});function o(e){return async function(){let{active:t,collisions:n,over:r,scrollAdjustedTranslate:i}=P.current,o=null;if(t&&i){let{cancelDrop:s}=O.current;o={activatorEvent:a,active:t,collisions:n,delta:i,over:r},e===Ti.DragEnd&&typeof s==`function`&&await Promise.resolve(s(o))&&(e=Ti.DragCancel)}T.current=null,(0,An.unstable_batchedUpdates)(()=>{d({type:e}),h(So.Uninitialized),Ee(null),te(null),D(null),L.current=null;let t=e===Ti.DragEnd?`onDragEnd`:`onDragCancel`;if(o){let e=O.current[t];e?.(o),f({type:t,event:o})}})}}},[v]),Oe=za(a,(0,C.useCallback)((e,t)=>(n,r)=>{let i=n.nativeEvent,a=v.get(r);if(T.current!==null||!a||i.dndKit||i.defaultPrevented)return;let o={active:a};e(n,t.options,o)===!0&&(i.dndKit={capturedBy:t.sensor},T.current=r,R(n,t))},[v,R]));to(a),Xr(()=>{M&&m===So.Initializing&&h(So.Initialized)},[M,m]),(0,C.useEffect)(()=>{let{onDragMove:e}=O.current,{active:t,activatorEvent:n,collisions:r,over:i}=P.current;if(!t||!n)return;let a={active:t,activatorEvent:n,collisions:r,delta:{x:xe.x,y:xe.y},over:i};(0,An.unstable_batchedUpdates)(()=>{e?.(a),f({type:`onDragMove`,event:a})})},[xe.x,xe.y]),(0,C.useEffect)(()=>{let{active:e,activatorEvent:t,collisions:n,droppableContainers:r,scrollAdjustedTranslate:i}=P.current;if(!e||T.current==null||!t||!i)return;let{onDragOver:a}=O.current,o=r.get(we),s=o&&o.rect.current?{id:o.id,rect:o.rect.current,data:o.data,disabled:o.disabled}:null,c={active:e,activatorEvent:t,collisions:n,delta:{x:i.x,y:i.y},over:s};(0,An.unstable_batchedUpdates)(()=>{Ee(s),a?.(c),f({type:`onDragOver`,event:c})})},[we]),Xr(()=>{P.current={activatorEvent:E,active:w,activeNode:j,collisionRect:Se,collisions:Ce,droppableRects:ie,draggableNodes:v,draggingNode:de,draggingNodeRect:fe,droppableContainers:b,over:Te,scrollableAncestors:he,scrollAdjustedTranslate:xe},S.current={initial:fe,translated:Se}},[w,j,Ce,Se,v,de,fe,ie,b,Te,he,xe]),Fa({...se,delta:y,draggingRect:Se,pointerCoordinates:ve,scrollableAncestors:he,scrollableAncestorRects:ge});let ke=(0,C.useMemo)(()=>({active:w,activeNode:j,activeNodeRect:M,activatorEvent:E,collisions:Ce,containerNodeRect:N,dragOverlay:ue,draggableNodes:v,droppableContainers:b,droppableRects:ie,over:Te,measureDroppableContainers:ae,scrollableAncestors:he,scrollableAncestorRects:ge,measuringConfiguration:re,measuringScheduled:A,windowRect:me}),[w,j,M,E,Ce,N,ue,v,b,ie,Te,ae,he,ge,re,A,me]),Ae=(0,C.useMemo)(()=>({activatorEvent:E,activators:Oe,active:w,activeNodeRect:M,ariaDescribedById:{draggable:ne},dispatch:d,draggableNodes:v,over:Te,measureDroppableContainers:ae}),[E,Oe,w,M,d,ne,v,Te,ae]);return C.createElement(yi.Provider,{value:p},C.createElement(po.Provider,{value:Ae},C.createElement(mo.Provider,{value:ke},C.createElement(xo.Provider,{value:De},i)),C.createElement(_o,{disabled:n?.restoreFocus===!1})),C.createElement(wi,{...n,hiddenTextDescribedById:ne}));function je(){let e=ee?.autoScrollEnabled===!1,t=typeof r==`object`?r.enabled===!1:r===!1,n=g&&!e&&!t;return typeof r==`object`?{...r,enabled:n}:{enabled:n}}}),wo=(0,C.createContext)(null),To=`button`,Eo=`Draggable`;function Do(e){let{id:t,data:n,disabled:r=!1,attributes:i}=e,a=ii(Eo),{activators:o,activatorEvent:s,active:c,activeNodeRect:l,ariaDescribedById:u,draggableNodes:d,over:f}=(0,C.useContext)(po),{role:p=To,roleDescription:m=`draggable`,tabIndex:h=0}=i??{},g=c?.id===t,_=(0,C.useContext)(g?xo:wo),[v,y]=ti(),[b,x]=ti(),S=no(o,t),w=$r(n);return Xr(()=>(d.set(t,{id:t,key:a,node:v,activatorNode:b,data:w}),()=>{let e=d.get(t);e&&e.key===a&&d.delete(t)}),[d,t]),{active:c,activatorEvent:s,activeNodeRect:l,attributes:(0,C.useMemo)(()=>({role:p,tabIndex:h,"aria-disabled":r,"aria-pressed":g&&p===To?!0:void 0,"aria-roledescription":m,"aria-describedby":u.draggable}),[r,p,h,g,m,u.draggable]),isDragging:g,listeners:r?void 0:S,node:v,over:f,setNodeRef:y,setActivatorNodeRef:x,transform:_}}function Oo(){return(0,C.useContext)(mo)}var ko=`Droppable`,Ao={timeout:25};function jo(e){let{data:t,disabled:n=!1,id:r,resizeObserverConfig:i}=e,a=ii(ko),{active:o,dispatch:s,over:c,measureDroppableContainers:l}=(0,C.useContext)(po),u=(0,C.useRef)({disabled:n}),d=(0,C.useRef)(!1),f=(0,C.useRef)(null),p=(0,C.useRef)(null),{disabled:m,updateMeasurementsFor:h,timeout:g}={...Ao,...i},_=$r(h??r),v=qa({callback:(0,C.useCallback)(()=>{if(!d.current){d.current=!0;return}p.current!=null&&clearTimeout(p.current),p.current=setTimeout(()=>{l(Array.isArray(_.current)?_.current:[_.current]),p.current=null},g)},[g]),disabled:m||!o}),[y,b]=ti((0,C.useCallback)((e,t)=>{v&&(t&&(v.unobserve(t),d.current=!1),e&&v.observe(e))},[v])),x=$r(t);return(0,C.useEffect)(()=>{!v||!y.current||(v.disconnect(),d.current=!1,v.observe(y.current))},[y,v]),(0,C.useEffect)(()=>(s({type:Ti.RegisterDroppable,element:{id:r,key:a,disabled:n,node:y,rect:f,data:x}}),()=>s({type:Ti.UnregisterDroppable,key:a,id:r})),[r]),(0,C.useEffect)(()=>{n!==u.current.disabled&&(s({type:Ti.SetDroppableDisabled,id:r,key:a,disabled:n}),u.current.disabled=n)},[r,a,n,s]),{active:o,rect:f,isOver:c?.id===r,node:y,over:c,setNodeRef:b}}function Mo(e){let{animation:t,children:n}=e,[r,i]=(0,C.useState)(null),[a,o]=(0,C.useState)(null),s=ni(n);return!n&&!r&&s&&i(s),Xr(()=>{if(!a)return;let e=r?.key,n=r?.props.id;if(e==null||n==null){i(null);return}Promise.resolve(t(n,a)).then(()=>{i(null)})},[t,r,a]),C.createElement(C.Fragment,null,n,r?(0,C.cloneElement)(r,{ref:o}):null)}var No={x:0,y:0,scaleX:1,scaleY:1};function Po(e){let{children:t}=e;return C.createElement(po.Provider,{value:fo},C.createElement(xo.Provider,{value:No},t))}var Fo={position:`fixed`,touchAction:`none`},Io=e=>li(e)?`transform 250ms ease`:void 0,Lo=(0,C.forwardRef)((e,t)=>{let{as:n,activatorEvent:r,adjustScale:i,children:a,className:o,rect:s,style:c,transform:l,transition:u=Io}=e;if(!s)return null;let d=i?l:{...l,scaleX:1,scaleY:1},f={...Fo,width:s.width,height:s.height,top:s.top,left:s.left,transform:fi.Transform.toString(d),transformOrigin:i&&r?U(r,s):void 0,transition:typeof u==`function`?u(r):u,...c};return C.createElement(n,{className:o,style:f,ref:t},a)}),Ro={duration:250,easing:`ease`,keyframes:e=>{let{transform:{initial:t,final:n}}=e;return[{transform:fi.Transform.toString(t)},{transform:fi.Transform.toString(n)}]},sideEffects:(e=>t=>{let{active:n,dragOverlay:r}=t,i={},{styles:a,className:o}=e;if(a!=null&&a.active)for(let[e,t]of Object.entries(a.active))t!==void 0&&(i[e]=n.node.style.getPropertyValue(e),n.node.style.setProperty(e,t));if(a!=null&&a.dragOverlay)for(let[e,t]of Object.entries(a.dragOverlay))t!==void 0&&r.node.style.setProperty(e,t);return o!=null&&o.active&&n.node.classList.add(o.active),o!=null&&o.dragOverlay&&r.node.classList.add(o.dragOverlay),function(){for(let[e,t]of Object.entries(i))n.node.style.setProperty(e,t);o!=null&&o.active&&n.node.classList.remove(o.active)}})({styles:{active:{opacity:`0`}}})};function zo(e){let{config:t,draggableNodes:n,droppableContainers:r,measuringConfiguration:i}=e;return Zr((e,a)=>{if(t===null)return;let o=n.get(e);if(!o)return;let s=o.node.current;if(!s)return;let c=oo(a);if(!c)return;let{transform:l}=Gr(a).getComputedStyle(a),u=Hi(l);if(!u)return;let d=typeof t==`function`?t:Bo(t);return da(s,i.draggable.measure),d({active:{id:e,data:o.data,node:s,rect:i.draggable.measure(s)},draggableNodes:n,dragOverlay:{node:a,rect:i.dragOverlay.measure(c)},droppableContainers:r,measuringConfiguration:i,transform:u})})}function Bo(e){let{duration:t,easing:n,sideEffects:r,keyframes:i}={...Ro,...e};return e=>{let{active:a,dragOverlay:o,transform:s,...c}=e;if(!t)return;let l={x:o.rect.left-a.rect.left,y:o.rect.top-a.rect.top},u={scaleX:s.scaleX===1?1:a.rect.width*s.scaleX/o.rect.width,scaleY:s.scaleY===1?1:a.rect.height*s.scaleY/o.rect.height},d={x:s.x-l.x,y:s.y-l.y,...u},f=i({...c,active:a,dragOverlay:o,transform:{initial:s,final:d}}),[p]=f,m=f[f.length-1];if(JSON.stringify(p)===JSON.stringify(m))return;let h=r?.({active:a,dragOverlay:o,...c}),g=o.node.animate(f,{duration:t,easing:n,fill:`forwards`});return new Promise(e=>{g.onfinish=()=>{h?.(),e()}})}}var Vo=0;function Ho(e){return(0,C.useMemo)(()=>{if(e!=null)return Vo++,Vo},[e])}var Uo=C.memo(e=>{let{adjustScale:t=!1,children:n,dropAnimation:r,style:i,transition:a,modifiers:o,wrapperElement:s=`div`,className:c,zIndex:l=999}=e,{activatorEvent:u,active:d,activeNodeRect:f,containerNodeRect:p,draggableNodes:m,droppableContainers:h,dragOverlay:g,over:_,measuringConfiguration:v,scrollableAncestors:y,scrollableAncestorRects:b,windowRect:x}=Oo(),S=(0,C.useContext)(xo),w=Ho(d?.id),T=vo(o,{activatorEvent:u,active:d,activeNodeRect:f,containerNodeRect:p,draggingNodeRect:g.rect,over:_,overlayNodeRect:g.rect,scrollableAncestors:y,scrollableAncestorRects:b,transform:S,windowRect:x}),ee=Wa(f),te=zo({config:r,draggableNodes:m,droppableContainers:h,measuringConfiguration:v}),E=ee?g.setRef:void 0;return C.createElement(Po,null,C.createElement(Mo,{animation:te},d&&w?C.createElement(Lo,{key:w,id:d.id,ref:E,as:s,activatorEvent:u,adjustScale:t,className:c,transition:a,rect:ee,style:{zIndex:l,...i},transform:T},n):null))});function Wo(e){return e.type===`row`||e.type===`column`||e.type===`grid`?e.items:e.type===`accordion`?e.body:e.type===`tabs`?e.tabs.flatMap(e=>e.content):null}function Go(e,t){if(!e||e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}function Ko(e){switch(e.type){case`text`:return`"${(e.content??``).slice(0,20)}"`;case`button`:return`"${e.label}"`;case`image`:return e.url?`image`:`(empty)`;case`badge`:return`"${e.text}"`;case`chip`:return`"${e.text}"`;case`link`:return`"${e.text}"`;case`accordion`:return`"${e.header}"`;default:return``}}function qo(e){return`n-`+e.join(`-`)}function Jo(e,t){return`g-`+e.join(`-`)+`_`+t}function Yo(e){if(!e.startsWith(`g-`))return null;let t=e.slice(2).split(`_`);return t.length===2?{parentPath:t[0]===``?[]:t[0].split(`-`).map(Number),index:Number(t[1])}:null}function Xo(e){return e.startsWith(`n-`)?e.slice(2).split(`-`).map(Number):null}function Zo({parentPath:e,index:t,depth:n}){let{setNodeRef:r,isOver:i}=jo({id:Jo(e,t)});return(0,I.jsx)(`div`,{ref:r,className:`tree-drop-gap ${i?`active`:``}`,style:{paddingLeft:20+n*16},children:(0,I.jsx)(`div`,{className:`tree-drop-line`})})}var Qo=(0,C.memo)(function e({element:t,path:n,selectedPath:r,selectedPaths:i,onSelect:a,depth:o,isDraggingAny:s}){let c=qo(n),l=Go(r,n),u=i.length>1&&i.some(e=>Go(e,n)),d=Wo(t),f=d!==null,[p,m]=(0,C.useState)(!1),{attributes:h,listeners:g,setNodeRef:_,isDragging:v}=Do({id:c,data:{path:n,element:t}}),{setNodeRef:y,isOver:b}=jo({id:c,data:{path:n,element:t}}),x=(0,C.useCallback)(e=>{_(e),y(e)},[_,y]),S=(0,C.useCallback)(e=>{e.stopPropagation(),a(n)},[a,n]),w=(0,C.useCallback)(e=>{e.stopPropagation(),e.preventDefault(),m(e=>!e)},[]),T=n.slice(0,-1);return(0,I.jsxs)(I.Fragment,{children:[s?(0,I.jsx)(Zo,{parentPath:T,index:n[n.length-1],depth:o}):null,(0,I.jsxs)(`div`,{className:`tree-node`,ref:x,style:{opacity:v?.3:1},children:[(0,I.jsxs)(`div`,{className:`tree-item ${l?`selected`:``} ${u&&!l?`multi-selected`:``} ${f?`container`:``} ${b&&f?`drop-target`:``}`,style:{paddingLeft:8+o*16},onClick:S,...h,...g,children:[f?(0,I.jsx)(`span`,{className:`tree-arrow ${p?`collapsed`:``}`,onPointerDown:e=>e.stopPropagation(),onClick:w,children:`▾`}):(0,I.jsx)(`span`,{className:`tree-dot`,children:`·`}),(0,I.jsx)(`span`,{className:`tree-type`,children:t.type}),(0,I.jsx)(`span`,{className:`tree-label`,children:Ko(t)}),f&&d?(0,I.jsx)(`span`,{className:`tree-badge`,children:d.length}):null,br(t)?(0,I.jsx)(`span`,{className:`tree-error-dot`,title:`Has validation errors`}):null]}),f&&!p&&d&&d.length>0?(0,I.jsxs)(`div`,{className:`tree-children`,children:[d.map((t,c)=>(0,I.jsx)(e,{element:t,path:[...n,c],selectedPath:r,selectedPaths:i,onSelect:a,depth:o+1,isDraggingAny:s},qo([...n,c]))),s?(0,I.jsx)(Zo,{parentPath:n,index:d.length,depth:o+1}):null]}):null]})]})});function $o({element:e}){return(0,I.jsx)(`div`,{className:`tree-drag-overlay`,children:(0,I.jsxs)(`div`,{className:`tree-item selected`,style:{paddingLeft:8},children:[Wo(e)?(0,I.jsx)(`span`,{className:`tree-arrow`,children:`▾`}):(0,I.jsx)(`span`,{className:`tree-dot`,children:`·`}),(0,I.jsx)(`span`,{className:`tree-type`,children:e.type}),(0,I.jsx)(`span`,{className:`tree-label`,children:Ko(e)})]})})}function es(e,t){let n=t.toLowerCase();if(e.type.toLowerCase().includes(n)||Ko(e).toLowerCase().includes(n))return!0;let r=Wo(e);return r?r.some(e=>es(e,n)):!1}function ts(){let e=F(e=>e.body),t=F(e=>e.selectedPath),n=F(e=>e.selectedPaths),r=F(e=>e.selectElement),i=F(e=>e.moveElementToPath),[a,o]=(0,C.useState)(null),[s,c]=(0,C.useState)(``),l=Oi(Di(Da,{activationConstraint:{distance:8}})),u=(0,C.useCallback)(e=>{o(e.active.data.current?.element??null)},[]),d=(0,C.useCallback)(e=>{o(null);let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=Xo(t.id);if(!r)return;let a=n.id,s=t.id;if(a.startsWith(s.replace(`n-`,`n-`)+`-`)||a.startsWith(s.replace(`n-`,`g-`)+`-`))return;let c=Yo(a);if(c){i(r,c.parentPath,c.index);return}let l=Xo(a);if(!l)return;let u=n.data.current?.element;u&&Wo(u)!==null?i(r,l,(Wo(u)??[]).length):i(r,l.slice(0,-1),l[l.length-1])},[i]);if(e.length===0)return(0,I.jsx)(`div`,{className:`tree-empty`,children:`No elements yet`});let f=s?e.filter(e=>es(e,s)):e;return(0,I.jsxs)(`div`,{children:[(0,I.jsxs)(`div`,{className:`tree-search-wrap`,children:[(0,I.jsx)(`input`,{className:`tree-search`,placeholder:`Search elements...`,value:s,onChange:e=>c(e.target.value)}),s?(0,I.jsx)(`button`,{className:`tree-search-clear`,onClick:()=>c(``),children:`×`}):null]}),f.length===0&&s?(0,I.jsxs)(`div`,{className:`tree-empty`,children:[`No matches for "`,s,`"`]}):(0,I.jsxs)(Co,{sensors:l,collisionDetection:Fi,onDragStart:u,onDragEnd:d,children:[(0,I.jsxs)(`div`,{className:`tree-root`,children:[f.map(i=>{let o=e.indexOf(i);return(0,I.jsx)(Qo,{element:i,path:[o],selectedPath:t,selectedPaths:n,onSelect:r,depth:0,isDraggingAny:!!a},qo([o]))}),!s&&a?(0,I.jsx)(Zo,{parentPath:[],index:e.length,depth:0}):null]}),(0,I.jsx)(Uo,{children:a?(0,I.jsx)($o,{element:a}):null})]})]})}function ns(e,t){if(t.length===0)return null;let n=e[t[0]];for(let e=1;e<t.length;e++){if(!n)return null;let r=null;if(n.type===`row`||n.type===`column`||n.type===`grid`?r=n.items:n.type===`accordion`?r=n.body:n.type===`tabs`&&(r=n.tabs[n.defaultActiveTab??0]?.content??null),!r)return null;n=r[t[e]]}return n??null}var rs=(0,C.memo)(function(){let e=F(e=>e.selectedPath),t=F(e=>e.body),n=F(e=>e.updateElement),r=F(e=>e.setCanvasView),i=F(e=>e.channels),[a,o]=(0,C.useState)(i===`push`?`notification`:`tree`),s=i===`push`||i===`both`,c=e?ns(t,e):null,l=(0,C.useCallback)(e=>{o(e),r(e===`notification`?`notification`:`bubble`)},[r]),u=(0,C.useCallback)(e=>{let t=F.getState().selectedPath;t&&n(t,e)},[n]);return(0,I.jsxs)(`div`,{className:`right-panel`,children:[(0,I.jsxs)(`div`,{className:`rp-tabs`,children:[i!==`push`&&(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`button`,{className:`rp-tab ${a===`tree`?`active`:``}`,onClick:()=>l(`tree`),children:`Tree`}),(0,I.jsx)(`button`,{className:`rp-tab ${a===`element`?`active`:``}`,onClick:()=>l(`element`),children:`Element`}),(0,I.jsx)(`button`,{className:`rp-tab ${a===`bubble`?`active`:``}`,onClick:()=>l(`bubble`),children:`Bubble`})]}),s&&(0,I.jsx)(`button`,{className:`rp-tab ${a===`notification`?`active`:``}`,onClick:()=>l(`notification`),children:`Notification`})]}),(0,I.jsx)(`div`,{className:`rp-content`,children:a===`tree`?(0,I.jsx)(ts,{}):a===`element`?c?(0,I.jsx)(xr,{element:c,onUpdate:u}):(0,I.jsxs)(`div`,{className:`rp-empty`,children:[(0,I.jsx)(`span`,{className:`rp-empty-icon`,children:`⊡`}),`Select an element to edit its properties`]}):a===`notification`?(0,I.jsx)(Vr,{}):(0,I.jsx)(Br,{})})]})}),is=[{keys:`⌘ Z`,action:`Undo`},{keys:`⌘ ⇧ Z`,action:`Redo`},{keys:`⌘ D`,action:`Duplicate element`},{keys:`⌘ C`,action:`Copy element`},{keys:`⌘ V`,action:`Paste element`},{keys:`Delete`,action:`Remove element`},{keys:`Esc`,action:`Deselect`},{keys:`?`,action:`Toggle this panel`}],as=(0,C.memo)(function(){let[e,t]=(0,C.useState)(!1);return(0,C.useEffect)(()=>{let e=e=>{let n=e.target;n.tagName===`INPUT`||n.tagName===`TEXTAREA`||n.tagName===`SELECT`||e.key===`?`&&(e.preventDefault(),t(e=>!e))};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[]),e?(0,I.jsx)(`div`,{className:`shortcuts-overlay`,onClick:()=>t(!1),children:(0,I.jsxs)(`div`,{className:`shortcuts-panel`,onClick:e=>e.stopPropagation(),children:[(0,I.jsxs)(`div`,{className:`shortcuts-header`,children:[(0,I.jsx)(`span`,{children:`Keyboard Shortcuts`}),(0,I.jsx)(`button`,{className:`shortcuts-close`,onClick:()=>t(!1),children:`×`})]}),(0,I.jsx)(`div`,{className:`shortcuts-list`,children:is.map(e=>(0,I.jsxs)(`div`,{className:`shortcut-row`,children:[(0,I.jsx)(`span`,{className:`shortcut-action`,children:e.action}),(0,I.jsx)(`kbd`,{className:`shortcut-keys`,children:e.keys})]},e.keys))})]})}):null});function os(){(0,C.useEffect)(()=>{let e=e=>{let t=e.metaKey||e.ctrlKey,n=e.target;if(n.tagName===`INPUT`||n.tagName===`TEXTAREA`||n.tagName===`SELECT`)return;let r=F.getState();if(t&&!e.shiftKey&&e.key===`z`){e.preventDefault(),r.undo();return}if(t&&e.shiftKey&&e.key===`z`){e.preventDefault(),r.redo();return}if(t&&e.key===`d`){e.preventDefault(),r.selectedPath&&r.duplicateElement(r.selectedPath);return}if(t&&e.key===`c`){e.preventDefault(),r.selectedPath&&r.copyElement(r.selectedPath);return}if(t&&e.key===`v`){e.preventDefault(),r.pasteElement(r.selectedPath??void 0);return}if(e.key===`Backspace`||e.key===`Delete`){e.preventDefault(),r.selectedPath&&r.removeElement(r.selectedPath);return}if(e.key===`Escape`){r.selectElement(null);return}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[])}var ss=(0,C.memo)(function(){os();let e=F(e=>e.channels)===`push`;return(0,I.jsxs)(`div`,{className:`editor-root`,children:[!k.hideTopBar&&(0,I.jsx)(mn,{}),(0,I.jsxs)(`div`,{className:`editor-panels`,children:[!e&&(0,I.jsx)(wn,{}),(0,I.jsx)(nr,{}),(0,I.jsx)(rs,{})]}),!e&&(0,I.jsx)(as,{})]})});function cs(){return F(e=>e.view)===`library`?(0,I.jsx)(Te,{}):(0,I.jsx)(ss,{})}function ls(e,t){k.appId=t.appId,k.region=t.region,k.token=t.token,k.onSave=t.onSave,k.onChange=t.onChange,k.hideTopBar=t.hideTopBar,k.hideTemplateLibrary=t.hideTemplateLibrary,k.channels=t.channels??`inapp`,k.notification=t.notification,F.getState().setChannels(k.channels),t.variables&&F.getState().setVariables(t.variables),t.hideTemplateLibrary&&F.getState().setView(`editor`),console.log(`[BubbleBuilder] mountBubbleBuilder called with:`,{appId:t.appId,region:t.region,token:t.token?`***`+t.token.slice(-4):void 0,hasBubble:!!t.bubble,templateName:t.templateName,hasOnSave:!!t.onSave});let n=(0,E.createRoot)(e);n.render((0,I.jsx)(C.StrictMode,{children:(0,I.jsx)(`div`,{className:`bb-root`,style:{height:`100%`,width:`100%`,overflow:`hidden`},children:(0,I.jsx)(cs,{})})}));let r;if(t.onChange){let e=t.onChange,n=F.getState().body,i=F.getState().settings,a=F.getState().fallbackText,o=F.getState().notificationTitle,s=F.getState().notificationBody;r=F.subscribe(t=>{(t.body!==n||t.settings!==i||t.fallbackText!==a||t.notificationTitle!==o||t.notificationBody!==s)&&(n=t.body,i=t.settings,a=t.fallbackText,o=t.notificationTitle,s=t.notificationBody,e(t.getBubbleJSON()))})}return t.bubble&&setTimeout(()=>{F.getState().loadBubble(t.bubble,void 0,t.templateName??`Untitled`)},0),{loadBubble:(e,t)=>F.getState().loadBubble(e,void 0,t??`Untitled`),getBubbleJSON:()=>F.getState().getBubbleJSON(),setVariables:e=>F.getState().setVariables(e),setChannels:e=>{k.channels=e,F.getState().setChannels(e)},setCanvasView:e=>F.getState().setCanvasView(e),destroy:()=>{r?.(),n.unmount(),Object.keys(k).forEach(e=>delete k[e])}}}e.builderConfig=k,e.mountBubbleBuilder=ls});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mathews_cometchat/bubble-builder",
3
- "version": "1.0.0-alpha19",
3
+ "version": "1.0.0-alpha21",
4
4
  "type": "module",
5
5
  "main": "dist/bubble-builder.umd.js",
6
6
  "module": "dist/bubble-builder.es.js",
@@ -44,6 +44,7 @@
44
44
  "eslint-plugin-react-hooks": "^7.0.1",
45
45
  "eslint-plugin-react-refresh": "^0.5.2",
46
46
  "globals": "^17.4.0",
47
+ "postcss-prefix-selector": "^2.1.1",
47
48
  "typescript": "~5.9.3",
48
49
  "typescript-eslint": "^8.57.0",
49
50
  "vite": "^8.0.1",