@keak/sdk 1.0.9 → 2.0.1
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.
- package/README.md +102 -7
- package/dist/Conversion.d.ts.map +1 -1
- package/dist/index.cjs.js +199 -187
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +55 -22
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +201 -187
- package/dist/index.js.map +1 -1
- package/dist/toolbar/KeakToolbar.d.ts.map +1 -1
- package/dist/toolbar.js +41 -0
- package/dist/toolbar.js.map +1 -1
- package/package.json +2 -1
- package/src/cli/ai-helper.js +117 -39
- package/src/cli/install.js +251 -152
- package/src/plugins/babel-source-inject.cjs +55 -131
- package/src/plugins/next.cjs +48 -221
- package/src/plugins/webpack-loader-babel/index.js +43 -117
package/dist/index.cjs.js
CHANGED
|
@@ -1676,6 +1676,34 @@ const KeakIcon = ({ size = 16 }) => (jsxRuntime.jsxs("svg", { width: size, heigh
|
|
|
1676
1676
|
var css_248z = ":root{--keak-background:17 23 34;--keak-foreground:243 246 252;--keak-card:17 23 34;--keak-card-foreground:243 246 252;--keak-popover:17 23 34;--keak-popover-foreground:243 246 252;--keak-primary:88 152 237;--keak-primary-foreground:17 23 34;--keak-secondary:47 61 90;--keak-secondary-foreground:243 246 252;--keak-muted:47 61 90;--keak-muted-foreground:168 179 202;--keak-accent:88 152 237;--keak-accent-foreground:17 23 34;--keak-destructive:239 68 68;--keak-destructive-foreground:255 255 255;--keak-border:47 61 90;--keak-input:17 23 34;--keak-ring:88 152 237;--keak-radius:12px;--glass-bg:rgba(17,23,34,.95);--glass-border:rgba(88,152,237,.15);--glass-shadow:0 8px 32px rgba(0,0,0,.3);--glass-backdrop:blur(20px);--keak-chart-1:88 152 237;--keak-chart-2:16 185 129;--keak-chart-3:245 158 11;--keak-chart-4:239 68 68;--keak-chart-5:139 92 246}*{scrollbar-color:#2f3d5a #111722;scrollbar-width:thin}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#111722;border-radius:3px}::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px;-webkit-transition:background .2s;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#374151}::-webkit-scrollbar-corner{background:#111722}.keak-toolbar-panel-content::-webkit-scrollbar{width:6px}.keak-toolbar-panel-content::-webkit-scrollbar-track{background:transparent}.keak-toolbar-panel-content::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-toolbar-panel-content::-webkit-scrollbar-thumb:hover{background:#374151}.keak-toolbar{backdrop-filter:var(--glass-backdrop);-webkit-backdrop-filter:var(--glass-backdrop);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--keak-radius);box-shadow:var(--glass-shadow);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:14px;line-height:1.5;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.keak-toolbar:before{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(147,197,253,.05) 50%,rgba(59,130,246,.1));bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:-1}.keak-toolbar *{box-sizing:border-box}.keak-toolbar.dragging{backdrop-filter:blur(25px);box-shadow:0 12px 40px rgba(59,130,246,.25),0 0 0 1px rgba(59,130,246,.3);transform:scale(1.02);transition:none}.keak-toolbar.dragging .keak-toolbar-header{cursor:grabbing!important}.keak-toolbar.minimized{border-radius:26px;box-shadow:0 4px 20px rgba(59,130,246,.2);height:52px;width:52px}.keak-toolbar-toggle{align-items:center;background:transparent;border:none;border-radius:26px;cursor:pointer;display:flex;height:52px;justify-content:center;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:52px}.keak-toolbar-toggle:before{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(147,197,253,.1));border-radius:inherit;content:\"\";inset:0;opacity:0;position:absolute;transition:opacity .3s ease}.keak-toolbar-toggle:hover:before{opacity:1}.keak-toolbar-toggle:hover{box-shadow:0 6px 24px rgba(59,130,246,.3);transform:scale(1.08)}.keak-toolbar-collapsed{align-items:center;background:var(--glass-bg);border-radius:26px;box-shadow:var(--glass-shadow);display:flex;gap:12px;min-width:140px;padding:8px 16px}.keak-toolbar-collapsed .keak-toolbar-toggle{align-items:center;display:flex;flex:1;gap:8px;justify-content:flex-start;padding:0 12px}.keak-toolbar-label{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600}.keak-toolbar-minimize{align-items:center;background:transparent;border:none;border-radius:10px;color:hsl(var(--keak-muted-foreground));cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.keak-toolbar-minimize:hover{background:hsl(var(--keak-accent));color:hsl(var(--keak-accent-foreground));transform:scale(1.05)}.keak-toolbar.expanded{display:flex;flex-direction:column;max-height:650px;width:400px}.keak-toolbar-expanded{background:var(--glass-bg);border-radius:var(--keak-radius);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.keak-toolbar-header{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-bottom:1px solid hsl(var(--keak-border));cursor:grab;display:flex;padding:16px 20px;position:relative;transition:all .2s ease;z-index:2}.keak-toolbar-header:before{background:linear-gradient(90deg,rgba(59,130,246,.05),transparent 50%,rgba(59,130,246,.05));bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.keak-toolbar-header:hover{background:hsla(0,0%,100%,.98)}.keak-toolbar-header:active{cursor:grabbing}.keak-toolbar-brand{align-items:center;display:flex;flex:1;gap:10px;pointer-events:none}.keak-toolbar-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);-webkit-background-clip:text;background-clip:text;color:hsl(var(--keak-foreground));font-size:18px;font-weight:700}.keak-model-selector{margin:0 16px;pointer-events:auto;position:relative}.keak-simple-dropdown{display:inline-block;position:relative}.keak-dropdown-trigger{align-items:center;background:hsla(0,0%,100%,.9);border:1px solid hsl(var(--keak-border));border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:hsl(var(--keak-foreground));cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;min-width:120px;padding:8px 14px;position:relative;transition:all .2s ease}.keak-dropdown-trigger:hover{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary));box-shadow:0 4px 12px rgba(59,130,246,.15);transform:translateY(-1px)}.keak-dropdown-arrow{height:12px;margin-left:auto;transition:transform .2s ease;width:12px}.keak-dropdown-trigger[data-open=true] .keak-dropdown-arrow{transform:rotate(180deg)}.keak-dropdown-content{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.98);border:1px solid hsl(var(--keak-border));border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.1);left:0;margin-top:4px;min-width:140px;overflow:hidden;position:absolute;right:0;top:100%;z-index:999999999}.keak-dropdown-item{align-items:center;color:hsl(var(--keak-foreground));cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;padding:10px 14px;transition:all .2s ease}.keak-dropdown-item:hover{background:rgba(59,130,246,.08)}.keak-dropdown-item[data-selected=true]{background:rgba(59,130,246,.1);color:hsl(var(--keak-primary))}.keak-model-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;backdrop-filter:blur(8px);background:rgba(51,65,85,.9);background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;border:1px solid var(--glass-border);border-radius:10px;color:hsl(var(--keak-foreground));cursor:pointer;font-size:13px;font-weight:500;min-width:120px;padding:8px 32px 8px 14px;transition:all .2s ease}.keak-model-dropdown:hover{background:rgba(59,130,246,.15);border-color:hsl(var(--keak-primary));box-shadow:0 4px 12px rgba(59,130,246,.25);transform:translateY(-1px)}.keak-model-dropdown:focus{border-color:hsl(var(--keak-primary));box-shadow:0 0 0 3px rgba(59,130,246,.2);outline:none}.keak-toolbar-controls{display:flex;gap:6px;pointer-events:auto}.keak-toolbar-close{align-items:center;background:transparent;border:none;border-radius:8px;color:hsl(var(--keak-muted-foreground));cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.keak-toolbar-close:hover{background:rgba(239,68,68,.1);color:hsl(var(--keak-destructive));transform:scale(1.05)}.keak-toolbar-actions{backdrop-filter:blur(8px);background:rgba(248,250,252,.8);border-bottom:1px solid hsl(var(--keak-border));display:flex;gap:10px;padding:16px 20px}.keak-toolbar,.keak-toolbar *{color:#000!important;font-weight:600}.keak-action-btn span,.keak-action-btn.active,.keak-action-btn.active *,.keak-dropdown-item,.keak-dropdown-trigger,.keak-optimize-btn,.keak-optimize-btn *,.keak-status-selected,.keak-toolbar-title{color:#fff!important}.keak-toolbar .keak-element-text,.keak-toolbar .keak-form-label,.keak-toolbar .keak-metrics-title,.keak-toolbar .keak-scan-summary-title,.keak-toolbar .keak-scan-title,.keak-toolbar .keak-suggestion-text,.keak-toolbar .keak-suggestions-header,.keak-toolbar .keak-variation-title,.keak-toolbar h1,.keak-toolbar h2,.keak-toolbar h3{color:#f3f6fc;font-weight:700}.keak-action-btn{align-items:center;backdrop-filter:blur(8px);background:hsla(0,0%,100%,.9);border:1px solid hsl(var(--keak-border));border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);color:hsl(var(--keak-foreground));cursor:pointer;display:flex;flex:1;flex-direction:column;font-size:12px;gap:6px;overflow:hidden;padding:12px 16px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.keak-action-btn:before{background:linear-gradient(90deg,transparent,rgba(59,130,246,.1),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.keak-action-btn:hover:before{left:100%}.keak-action-btn:hover{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary));box-shadow:0 4px 20px rgba(59,130,246,.15);transform:translateY(-2px)}.keak-action-btn.active{background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);border-color:hsl(var(--keak-primary));box-shadow:0 6px 20px rgba(59,130,246,.4);color:#fff}.keak-action-btn.active:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent)}.keak-action-btn span{color:hsl(var(--keak-foreground));font-weight:700;letter-spacing:.025em}.keak-toolbar-content{backdrop-filter:blur(8px);background:rgba(248,250,252,.3);flex:1;overflow-y:auto;position:relative}.keak-toolbar-content::-webkit-scrollbar-thumb{background:#2f3d5a}.keak-toolbar-content::-webkit-scrollbar-thumb:hover{background:#374151}.keak-toolbar-content:before{background:linear-gradient(180deg,rgba(59,130,246,.02),transparent 50%);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.keak-toolbar-status{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-top:1px solid hsl(var(--keak-border));color:hsl(var(--keak-foreground));display:flex;font-size:12px;font-weight:600;justify-content:space-between;padding:12px 20px}.keak-status-selected code{background:rgba(59,130,246,.1);border-radius:6px;color:hsl(var(--keak-foreground));font-family:JetBrains Mono,SF Mono,monospace;font-weight:700;padding:3px 8px}.keak-toolbar-status kbd{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:6px;color:hsl(var(--keak-foreground));font-family:inherit;font-size:11px;font-weight:600;padding:3px 8px}.keak-toolbar-content::-webkit-scrollbar{width:6px}.keak-toolbar-content::-webkit-scrollbar-track{background:transparent}.keak-toolbar-content::-webkit-scrollbar-thumb{background:rgba(59,130,246,.3);border-radius:3px;-webkit-transition:background .2s ease;transition:background .2s ease}.keak-toolbar-content::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.5)}@keyframes keak-slide-up{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes keak-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes keak-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.keak-toolbar.expanded{animation:keak-slide-up .4s cubic-bezier(.34,1.56,.64,1)}@media (max-width:480px){.keak-toolbar.expanded{max-width:400px;width:calc(100vw - 32px)}}.keak-selected-highlight{background:rgba(37,99,235,.08);border:2px solid #2563eb;border-radius:8px;box-shadow:0 0 0 1px rgba(37,99,235,.1),0 4px 12px rgba(37,99,235,.15),0 2px 4px rgba(37,99,235,.1);pointer-events:none;position:absolute;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:999998}.keak-selected-highlight.generating{animation:keak-shimmer 2s ease-in-out infinite;background:linear-gradient(90deg,rgba(37,99,235,.08),rgba(37,99,235,.2) 50%,rgba(37,99,235,.08));background-size:200% 100%;border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,.2),0 4px 16px rgba(37,99,235,.25),0 2px 6px rgba(37,99,235,.15)}@keyframes keak-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.keak-loading-spinner{animation:keak-spin 1s linear infinite;border:2px solid rgba(59,130,246,.2);border-radius:50%;border-top:2px solid hsl(var(--keak-primary));height:20px;width:20px}@keyframes keak-spin{to{transform:rotate(1turn)}}.keak-success-toast{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 25px rgba(16,185,129,.3)}.keak-error-toast,.keak-success-toast{backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#fff;font-weight:500;padding:12px 20px}.keak-error-toast{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 25px rgba(239,68,68,.3)}.keak-selector-highlight{background:rgba(88,152,237,.15);border:2px solid #6b7280;border-radius:4px;box-shadow:0 0 0 2px rgba(88,152,237,.25);display:none;pointer-events:none;position:absolute;transition:all .1s ease-out;z-index:999999}.keak-selector-tooltip{backdrop-filter:blur(12px);background:rgba(15,23,42,.9);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;box-shadow:0 8px 25px rgba(0,0,0,.3);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;padding:8px 14px;pointer-events:none;position:fixed;white-space:nowrap;z-index:999999}.keak-selector-tooltip code{background:rgba(59,130,246,.2);border-radius:4px;color:#60a5fa;font-family:JetBrains Mono,SF Mono,monospace;font-weight:500;padding:2px 6px}.keak-selector-instructions{align-items:center;animation:keak-fade-in .3s ease-out;background:rgba(15,23,42,.9);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.4);color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;gap:16px;left:50%;padding:16px 24px;pointer-events:none;position:fixed;top:24px;transform:translateX(-50%);z-index:999999}.keak-selector-instructions-icon{align-items:center;background:hsl(var(--keak-primary));border-radius:50%;box-shadow:0 4px 12px rgba(59,130,246,.4);display:flex;height:28px;justify-content:center;width:28px}.keak-selector-instructions kbd{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;font-size:12px;font-weight:500;margin:0 4px;padding:4px 8px}body.keak-selecting,body.keak-selecting *{cursor:crosshair!important}body.keak-selecting .keak-selector-highlight,body.keak-selecting .keak-selector-instructions,body.keak-selecting .keak-selector-tooltip,body.keak-selecting .keak-toolbar{cursor:default!important}.keak-prompt-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-prompt-header{margin-bottom:12px}.keak-prompt-title{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600;margin-bottom:8px}.keak-element-preview{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#a8b3ca;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;overflow:hidden;padding:8px 12px;text-overflow:ellipsis;white-space:nowrap}.keak-main-input{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.keak-input-label{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600;margin-bottom:8px}.keak-main-textarea{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;min-height:100px;padding:16px;resize:vertical;transition:all .2s;width:100%}.keak-main-textarea:focus{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);outline:none}.keak-main-textarea::-moz-placeholder{color:#6b7280;opacity:1}.keak-main-textarea::placeholder{color:#6b7280;opacity:1}.keak-main-textarea:-webkit-autofill,.keak-main-textarea:-webkit-autofill:focus,.keak-main-textarea:-webkit-autofill:hover{-webkit-text-fill-color:#f3f6fc;-webkit-box-shadow:inset 0 0 0 1000px hsla(0,0%,100%,.05);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.keak-context-section{display:flex;flex-direction:column;gap:6px}.keak-context-input{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:4px;color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;padding:12px 16px;transition:all .2s;width:100%}.keak-context-input:focus{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);outline:none}.keak-context-input::-moz-placeholder{color:#6b7280;opacity:1}.keak-context-input::placeholder{color:#6b7280;opacity:1}.keak-context-input:-webkit-autofill,.keak-context-input:-webkit-autofill:focus,.keak-context-input:-webkit-autofill:hover{-webkit-text-fill-color:#f3f6fc;-webkit-box-shadow:inset 0 0 0 1000px hsla(0,0%,100%,.05);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.keak-optimize-section{align-items:center;display:flex;flex-direction:column;gap:8px;margin-top:20px}.keak-optimize-btn{align-items:center;background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;border-radius:12px;box-shadow:0 4px 20px rgba(59,130,246,.3);color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:800;gap:10px;justify-content:center;overflow:hidden;padding:16px 24px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.1);transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.keak-optimize-btn span{color:#fff}.keak-optimize-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.keak-optimize-btn:hover:before{left:100%}.keak-optimize-btn:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#4f46e5);box-shadow:0 8px 30px rgba(59,130,246,.4);transform:translateY(-2px)}.keak-optimize-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.keak-optimize-btn:disabled:before{display:none}.keak-optimize-hint{color:#f3f6fc!important;font-size:11px;opacity:.7;text-align:center}.keak-optimize-hint kbd{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;font-size:10px;font-weight:500;margin:0 2px;padding:2px 6px}.keak-suggestions{flex:1;overflow-y:auto;padding-top:16px}.keak-suggestions::-webkit-scrollbar{width:6px}.keak-suggestions::-webkit-scrollbar-track{background:transparent}.keak-suggestions::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-suggestions::-webkit-scrollbar-thumb:hover{background:#374151}.keak-loading{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;flex-direction:column;gap:12px;justify-content:center;padding:40px}.keak-suggestion-card{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:8px;box-shadow:0 4px 10px 0 rgba(43,59,91,.12);cursor:pointer;margin-bottom:12px;overflow:hidden;padding:16px;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.keak-suggestion-card:before{background:linear-gradient(135deg,rgba(88,152,237,.05),rgba(88,152,237,.08));bottom:0;content:\"\";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease}.keak-suggestion-card:hover{background:hsla(0,0%,100%,.08);border-color:#374151;box-shadow:0 4px 10px 0 rgba(43,59,91,.18);transform:translateY(-2px)}.keak-suggestion-card:hover:before{opacity:1}.keak-suggestion-text{color:#f3f6fc;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.05);z-index:1}.keak-suggestion-meta{align-items:center;color:#a8b3ca;display:flex;font-size:12px;font-weight:600;gap:8px;position:relative;z-index:1}.keak-suggestion-card:hover .keak-suggestion-action{opacity:1}.keak-suggestion-content-wrapper{align-items:flex-start;display:flex;gap:12px;width:100%}.keak-suggestion-badge-wrapper{flex-shrink:0}.keak-suggestion-variant-badge{align-items:center;background:rgba(88,152,237,.2);border:1px solid rgba(88,152,237,.3);border-radius:8px;box-shadow:none;color:#5898ed;display:flex;font-size:12px;font-weight:700;height:32px;justify-content:center;width:32px}.keak-suggestion-text-wrapper{flex:1;min-width:0}.keak-suggestion-action{color:#5898ed;flex-shrink:0;opacity:.6;transition:opacity .2s}.keak-variation-history{margin-bottom:12px;max-height:200px;overflow-y:auto}.keak-variation-history::-webkit-scrollbar{width:6px}.keak-variation-history::-webkit-scrollbar-track{background:transparent}.keak-variation-history::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-variation-history::-webkit-scrollbar-thumb:hover{background:#374151}.keak-variation-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:8px}.keak-variation-title{color:#f3f6fc;flex-shrink:0;font-size:13px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}.keak-variation-actions{display:flex;flex-shrink:0;gap:8px}.keak-variation-item{background:hsla(0,0%,100%,.05);border:1px solid #2f3d5a;border-radius:8px;cursor:pointer;font-size:11px;margin-bottom:6px;padding:10px;transition:all .2s}.keak-variation-item:hover{background:hsla(0,0%,100%,.08);border-color:#374151}.keak-variation-item.selected{background:rgba(88,152,237,.15);border-color:#5898ed}.keak-variation-meta{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.keak-variation-model{background:rgba(88,152,237,.2);border-radius:4px;color:#5898ed;font-size:9px;font-weight:600;padding:2px 6px;text-transform:uppercase}.keak-variation-time{color:#a8b3ca;font-size:9px}.keak-variation-prompt{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#f3f6fc;display:-webkit-box;font-size:10px;line-height:1.3;margin-bottom:4px;overflow:hidden}.keak-variation-count{color:#a8b3ca;font-size:9px}.keak-save-changes-section{background:rgba(88,152,237,.1);border:1px solid rgba(88,152,237,.3);border-radius:8px;margin-top:16px;padding:16px;text-align:center}.keak-save-message{color:#f3f6fc;font-size:13px;font-weight:500;margin-bottom:12px}.keak-save-changes-btn{align-items:center;background:linear-gradient(-46.0266deg,rgba(20,10,86,0) 20.511%,rgba(20,10,86,.2) 87.062%),linear-gradient(181.531deg,rgba(255,254,254,.12) 8.1705%,rgba(2,4,13,.2) 91.829%),#5898ed;border:1px solid rgba(55,65,81,.5);border-radius:4px;box-shadow:0 8px 10px 0 rgba(1,1,42,.25),inset 2px 2px 4px 0 rgba(5,5,80,.4),inset -4px -4px 10px 0 hsla(0,0%,100%,.25),inset 4px 4px 10px 0 rgba(25,18,67,.4);color:#000!important;cursor:pointer;display:flex;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:600;gap:8px;justify-content:center;padding:12px 16px;transition:all .2s;width:100%}.keak-save-changes-btn *{color:#000!important}.keak-save-changes-btn:hover{box-shadow:0 8px 10px 0 rgba(1,1,42,.25),0 0 15px rgba(88,152,237,.4),inset 2px 2px 4px 0 rgba(5,5,80,.4),inset -4px -4px 10px 0 hsla(0,0%,100%,.25),inset 4px 4px 10px 0 rgba(25,18,67,.4);transform:scale(1.01)}.keak-page-scan-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-scan-header{margin-bottom:16px}.keak-scan-title{align-items:center;color:#f3f6fc;display:flex;font-size:14px;font-weight:600;justify-content:space-between;margin-bottom:8px}.keak-scan-stats{color:#a8b3ca;display:flex;font-size:12px;gap:16px;margin-bottom:8px}.keak-scan-actions{display:flex;gap:8px;margin-bottom:8px}.keak-scan-summary{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:12px;font-size:12px;margin-bottom:16px;padding:16px}.keak-scan-summary-title{color:hsl(var(--keak-foreground));font-size:13px;font-weight:600;margin-bottom:6px}.keak-scan-summary-text{color:hsl(var(--keak-muted-foreground));line-height:1.4}.keak-scan-results{flex:1;overflow-y:auto}.keak-scan-results::-webkit-scrollbar{width:6px}.keak-scan-results::-webkit-scrollbar-track{background:transparent}.keak-scan-results::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-scan-results::-webkit-scrollbar-thumb:hover{background:#374151}.keak-scan-loading{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;flex-direction:column;justify-content:center;padding:40px}.keak-scan-spinner{animation:keak-spin 1s linear infinite;border:3px solid hsl(var(--keak-border));border-radius:50%;border-top:3px solid #10b981;height:32px;margin-bottom:16px;width:32px}.keak-scan-progress-container{align-items:center;display:flex;flex-direction:column;gap:16px;max-width:300px;width:100%}.keak-scan-progress-bar{height:8px;width:100%}.keak-scan-progress-text{font-size:11px}.keak-no-results,.keak-scan-progress-text{color:hsl(var(--keak-muted-foreground));text-align:center}.keak-no-results{padding:40px}.keak-element-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all .2s}.keak-element-card:hover{border-color:#10b981;box-shadow:0 4px 12px rgba(16,185,129,.1);transform:translateY(-1px)}.keak-element-header{align-items:center;background:hsl(var(--keak-muted));border-bottom:1px solid hsl(var(--keak-border));cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px;transition:all .2s}.keak-element-header:hover{background:rgba(59,130,246,.05)}.keak-element-info{align-items:center;display:flex;flex:1;gap:10px}.keak-element-tag{background:rgba(88,152,237,.2);border-radius:4px;color:#5898ed;font-size:10px;font-weight:600;padding:3px 8px;text-transform:uppercase}.keak-element-text{color:#f3f6fc;font-family:Geist,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keak-navigate-icon{color:hsl(var(--keak-muted-foreground));font-size:12px;margin-left:8px}.keak-priority-badge{border-radius:6px;color:#fff;font-size:10px;font-weight:600;padding:3px 8px}.keak-suggestions-list{padding:16px}.keak-suggestions-header{align-items:center;color:hsl(var(--keak-muted-foreground));display:flex;font-size:11px;font-weight:500;gap:6px;margin-bottom:12px}.keak-suggestion-item{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;font-size:12px;line-height:1.4;margin-bottom:8px;padding:12px;transition:all .2s}.keak-suggestion-item:hover{background:rgba(59,130,246,.05);border-color:#10b981;transform:translateX(2px)}.keak-suggestion-item:last-child{margin-bottom:0}.keak-suggestion-item.recommended{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(99,102,241,.1));border-color:rgba(59,130,246,.3)}.keak-suggestion-content{align-items:flex-start;display:flex;gap:10px}.keak-suggestion-badge{border-radius:6px;color:#fff;flex-shrink:0;font-size:10px;font-weight:700;padding:3px 8px}.keak-suggestion-badge.recommended{background:#3b82f6}.keak-suggestion-badge.default{background:#6b7280}.keak-suggestion-text-content{flex:1;line-height:1.4}.keak-suggestion-recommended-label{color:#3b82f6;font-size:10px;font-weight:500;margin-top:4px}.keak-model-badge{align-items:center;background:rgba(59,130,246,.1);border-radius:6px;color:hsl(var(--keak-primary));display:inline-flex;font-size:10px;font-weight:600;padding:2px 8px;text-transform:uppercase}.line-clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.space-y-2>*+*{margin-top:.5rem}.max-h-48{max-height:12rem}.keak-experiment-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-experiment-form{display:flex;flex-direction:column;gap:12px}.keak-form-group{display:flex;flex-direction:column;gap:6px}.keak-form-label{color:hsl(var(--keak-muted-foreground));font-size:12px;font-weight:500}.keak-form-input{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;color:hsl(var(--keak-foreground));font-size:13px;padding:12px 16px;transition:all .2s}.keak-form-input:focus{border-color:hsl(var(--keak-primary));box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.keak-variants-section{flex:1;overflow-y:auto}.keak-variants-section::-webkit-scrollbar{width:6px}.keak-variants-section::-webkit-scrollbar-track{background:transparent}.keak-variants-section::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-variants-section::-webkit-scrollbar-thumb:hover{background:#374151}.keak-variant-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;margin-bottom:8px;padding:12px}.keak-variant-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.keak-variant-name{color:hsl(var(--keak-foreground));font-size:13px;font-weight:500}.keak-variant-content{background:hsl(var(--keak-input));border:1px solid hsl(var(--keak-border));border-radius:8px;color:hsl(var(--keak-foreground));font-family:JetBrains Mono,SF Mono,monospace;font-size:12px;min-height:60px;padding:12px;resize:vertical;width:100%}.keak-experiment-actions{display:flex;gap:8px;margin-top:16px}.keak-experiment-list{flex:1;overflow-y:auto}.keak-experiment-list::-webkit-scrollbar{width:6px}.keak-experiment-list::-webkit-scrollbar-track{background:transparent}.keak-experiment-list::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-experiment-list::-webkit-scrollbar-thumb:hover{background:#374151}.keak-experiment-item{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;margin-bottom:8px;padding:12px;transition:all .2s}.keak-experiment-item:hover{background:rgba(59,130,246,.02);border-color:hsl(var(--keak-primary))}.keak-experiment-name{color:hsl(var(--keak-foreground));font-weight:500}.keak-experiment-url{align-items:center;display:flex;font-size:10px;gap:4px;margin-top:4px;opacity:.7}.keak-experiment-url,.keak-no-element{color:hsl(var(--keak-muted-foreground))}.keak-no-element{padding:20px;text-align:center}.keak-metrics-panel{display:flex;flex-direction:column;height:100%;padding:16px}.keak-metrics-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.keak-metrics-title{color:hsl(var(--keak-foreground));font-size:14px;font-weight:600}.keak-time-selector{background:hsl(var(--keak-muted));border-radius:6px;display:flex;gap:4px;padding:2px}.keak-time-option{background:transparent;border:none;border-radius:4px;color:hsl(var(--keak-muted-foreground));cursor:pointer;font-size:11px;font-weight:500;padding:4px 8px;transition:all .2s}.keak-time-option.active{background:hsl(var(--keak-primary));color:#fff}.keak-metrics-list{flex:1;overflow-y:auto}.keak-metrics-list::-webkit-scrollbar{width:6px}.keak-metrics-list::-webkit-scrollbar-track{background:transparent}.keak-metrics-list::-webkit-scrollbar-thumb{background:#2f3d5a;border-radius:3px}.keak-metrics-list::-webkit-scrollbar-thumb:hover{background:#374151}.keak-metric-card{background:hsl(var(--keak-card));border:1px solid hsl(var(--keak-border));border-radius:8px;cursor:pointer;margin-bottom:8px;padding:12px;transition:all .2s}.keak-metric-card:hover{background:rgba(59,130,246,.02);border-color:hsl(var(--keak-primary))}.keak-metric-card.selected{background:rgba(59,130,246,.05);border-color:hsl(var(--keak-primary))}.keak-empty-state{color:hsl(var(--keak-muted-foreground));padding:40px 20px;text-align:center}.keak-multi-element-toggle{background:hsla(0,0%,100%,.95);border:1px solid hsl(var(--keak-border));border-radius:12px;margin-bottom:16px;padding:20px}.keak-toggle-header{margin-bottom:16px;text-align:center}.keak-toggle-title{color:hsl(var(--keak-foreground));font-size:16px;font-weight:700;margin-bottom:6px}.keak-toggle-info{color:hsl(var(--keak-muted-foreground));font-size:12px;font-weight:500}.keak-version-toggle{background:hsl(var(--keak-muted));border-radius:10px;display:flex;gap:12px;margin-bottom:20px;padding:4px}.keak-version-btn{background:transparent;border:none;border-radius:8px;color:hsl(var(--keak-muted-foreground));cursor:pointer;flex:1;font-size:14px;font-weight:600;overflow:hidden;padding:12px 16px;position:relative;transition:all .2s ease}.keak-version-btn:hover:not(:disabled){background:rgba(59,130,246,.1);color:hsl(var(--keak-primary))}.keak-version-btn.active{background:linear-gradient(135deg,hsl(var(--keak-primary)),#0ea5e9);box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff}.keak-version-btn:disabled{cursor:not-allowed;opacity:.6}.keak-version-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:\"\";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.keak-version-btn.active:hover:before{left:100%}@keyframes slideDown{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.keak-map-warning{animation:slideDown .3s ease-out}@media (max-width:480px){.keak-quick-actions{flex-direction:column}.keak-element-info{align-items:flex-start}.keak-element-info,.keak-suggestions-content{flex-direction:column;gap:6px}.keak-version-toggle{flex-direction:column;gap:8px}}";
|
|
1677
1677
|
styleInject(css_248z);
|
|
1678
1678
|
|
|
1679
|
+
// Source mapping telemetry tracking
|
|
1680
|
+
const sourceMappingTelemetry = {
|
|
1681
|
+
fiberSuccess: 0,
|
|
1682
|
+
fiberFailed: 0,
|
|
1683
|
+
babelUsed: 0,
|
|
1684
|
+
noMapping: 0,
|
|
1685
|
+
getTotalAttempts: function () {
|
|
1686
|
+
return this.fiberSuccess + this.fiberFailed + this.babelUsed + this.noMapping;
|
|
1687
|
+
},
|
|
1688
|
+
getFiberSuccessRate: function () {
|
|
1689
|
+
const total = this.getTotalAttempts();
|
|
1690
|
+
return total > 0 ? ((this.fiberSuccess / total) * 100).toFixed(1) : '0';
|
|
1691
|
+
},
|
|
1692
|
+
logStats: function () {
|
|
1693
|
+
const total = this.getTotalAttempts();
|
|
1694
|
+
if (total > 0) {
|
|
1695
|
+
console.log('[Keak Telemetry] Source Mapping Statistics:', {
|
|
1696
|
+
totalAttempts: total,
|
|
1697
|
+
fiberSuccess: `${this.fiberSuccess} (${((this.fiberSuccess / total) * 100).toFixed(1)}%)`,
|
|
1698
|
+
fiberFailed: `${this.fiberFailed} (${((this.fiberFailed / total) * 100).toFixed(1)}%)`,
|
|
1699
|
+
babelUsed: `${this.babelUsed} (${((this.babelUsed / total) * 100).toFixed(1)}%)`,
|
|
1700
|
+
noMapping: `${this.noMapping} (${((this.noMapping / total) * 100).toFixed(1)}%)`
|
|
1701
|
+
});
|
|
1702
|
+
}
|
|
1703
|
+
}
|
|
1704
|
+
};
|
|
1705
|
+
// Log stats every 10 selections
|
|
1706
|
+
let selectionCount = 0;
|
|
1679
1707
|
const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
|
|
1680
1708
|
const [selectedElement, setSelectedElement] = React.useState(null);
|
|
1681
1709
|
const [isSelecting, setIsSelecting] = React.useState(false);
|
|
@@ -1798,6 +1826,8 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
|
|
|
1798
1826
|
componentName: fiberSource.componentName,
|
|
1799
1827
|
confidence: getSourceConfidence(fiberSource)
|
|
1800
1828
|
};
|
|
1829
|
+
// Track Fiber success
|
|
1830
|
+
sourceMappingTelemetry.fiberSuccess++;
|
|
1801
1831
|
}
|
|
1802
1832
|
else {
|
|
1803
1833
|
// Fallback to data-keak-src attribute from Babel plugin
|
|
@@ -1825,11 +1855,22 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
|
|
|
1825
1855
|
confidence: 'high'
|
|
1826
1856
|
};
|
|
1827
1857
|
console.log('[Keak Toolbar] elementData.sourceMapping:', elementData.sourceMapping);
|
|
1858
|
+
// Track Babel fallback usage
|
|
1859
|
+
sourceMappingTelemetry.fiberFailed++;
|
|
1860
|
+
sourceMappingTelemetry.babelUsed++;
|
|
1828
1861
|
}
|
|
1829
1862
|
else {
|
|
1830
1863
|
console.log('[Keak Toolbar] ❌ No source mapping found - no data-keak-src attribute in DOM');
|
|
1864
|
+
// Track complete failure (Fiber failed, no Babel either)
|
|
1865
|
+
sourceMappingTelemetry.fiberFailed++;
|
|
1866
|
+
sourceMappingTelemetry.noMapping++;
|
|
1831
1867
|
}
|
|
1832
1868
|
}
|
|
1869
|
+
// Log telemetry stats every 10 selections
|
|
1870
|
+
selectionCount++;
|
|
1871
|
+
if (selectionCount % 10 === 0) {
|
|
1872
|
+
sourceMappingTelemetry.logStats();
|
|
1873
|
+
}
|
|
1833
1874
|
console.log('[Keak Toolbar] ========== END DEBUG ==========');
|
|
1834
1875
|
// Send to IDE
|
|
1835
1876
|
if (keakCodeClientRef.current && keakCodeClientRef.current.isConnected()) {
|
|
@@ -2027,28 +2068,30 @@ var KeakToolbar$1 = /*#__PURE__*/Object.freeze({
|
|
|
2027
2068
|
});
|
|
2028
2069
|
|
|
2029
2070
|
const Conversion = ({ children, type = 'custom', category, label, value, metadata = {}, disabled = false }) => {
|
|
2030
|
-
|
|
2071
|
+
// In production, render children without tracking
|
|
2072
|
+
const isProduction = typeof process !== 'undefined' && process.env.NODE_ENV === 'production';
|
|
2031
2073
|
const elementRef = React.useRef(null);
|
|
2032
2074
|
const conversionId = React.useRef(`conv_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`);
|
|
2033
2075
|
React.useEffect(() => {
|
|
2034
|
-
//
|
|
2035
|
-
if (
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2076
|
+
// Skip tracking in production
|
|
2077
|
+
if (isProduction || disabled)
|
|
2078
|
+
return;
|
|
2079
|
+
// Track conversion element exposure (event tracking is disabled in SDK, this is a no-op)
|
|
2080
|
+
keak.track('conversion_exposure', {
|
|
2081
|
+
conversionId: conversionId.current,
|
|
2082
|
+
type,
|
|
2083
|
+
category,
|
|
2084
|
+
label,
|
|
2085
|
+
metadata: {
|
|
2086
|
+
...metadata,
|
|
2087
|
+
timestamp: new Date().toISOString(),
|
|
2088
|
+
url: window.location.href,
|
|
2089
|
+
referrer: document.referrer
|
|
2090
|
+
}
|
|
2091
|
+
});
|
|
2092
|
+
}, [isProduction, type, category, label, metadata, disabled]);
|
|
2050
2093
|
const handleClick = (event) => {
|
|
2051
|
-
if (disabled)
|
|
2094
|
+
if (disabled || isProduction)
|
|
2052
2095
|
return;
|
|
2053
2096
|
// Extract additional context from the clicked element
|
|
2054
2097
|
event.currentTarget;
|
|
@@ -2600,10 +2643,9 @@ function buildSourcePathInjection(mapping) {
|
|
|
2600
2643
|
return `(${sourcePathInjectionRuntime.toString()})(${mappingJson});`;
|
|
2601
2644
|
}
|
|
2602
2645
|
|
|
2603
|
-
// Context for Keak configuration
|
|
2604
|
-
const KeakContext = React.createContext(null);
|
|
2605
2646
|
// Global Keak instance
|
|
2606
2647
|
let keakInstance = null;
|
|
2648
|
+
let toolbarInitialized = false;
|
|
2607
2649
|
class KeakSDK {
|
|
2608
2650
|
constructor(config) {
|
|
2609
2651
|
this.assignments = {};
|
|
@@ -2627,7 +2669,6 @@ class KeakSDK {
|
|
|
2627
2669
|
if (this.config.debug) {
|
|
2628
2670
|
console.log('Keak SDK initialized successfully', {
|
|
2629
2671
|
assignments: this.assignments,
|
|
2630
|
-
apiKey: this.config.apiKey,
|
|
2631
2672
|
userId: this.userId
|
|
2632
2673
|
});
|
|
2633
2674
|
}
|
|
@@ -2965,167 +3006,149 @@ class KeakSDK {
|
|
|
2965
3006
|
}));
|
|
2966
3007
|
}
|
|
2967
3008
|
}
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
3009
|
+
/**
|
|
3010
|
+
* Main Keak hook - initializes the SDK with minimal configuration
|
|
3011
|
+
* Similar to react-source-lens's useReactSourceLens() hook
|
|
3012
|
+
*
|
|
3013
|
+
* @example
|
|
3014
|
+
* // Minimal usage (no config needed)
|
|
3015
|
+
* useKeak();
|
|
3016
|
+
*
|
|
3017
|
+
* @example
|
|
3018
|
+
* // With IDE integration
|
|
3019
|
+
* useKeak({
|
|
3020
|
+
* projectRoot: '/absolute/path/to/project',
|
|
3021
|
+
* editor: 'vscode'
|
|
3022
|
+
* });
|
|
3023
|
+
*/
|
|
3024
|
+
function useKeak(config = {}) {
|
|
2972
3025
|
React.useEffect(() => {
|
|
2973
|
-
if
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3026
|
+
// Check if in production - if so, skip initialization
|
|
3027
|
+
if (typeof process !== 'undefined' && process.env.NODE_ENV === 'production') {
|
|
3028
|
+
return;
|
|
3029
|
+
}
|
|
3030
|
+
// Only initialize once
|
|
3031
|
+
if (keakInstance) {
|
|
3032
|
+
return;
|
|
3033
|
+
}
|
|
3034
|
+
// Detect development mode
|
|
3035
|
+
const isDevelopment = process.env.NODE_ENV === 'development' ||
|
|
3036
|
+
(typeof window !== 'undefined' && window.location.hostname === 'localhost') ||
|
|
3037
|
+
(typeof window !== 'undefined' && window.location.hostname === '127.0.0.1');
|
|
3038
|
+
const finalConfig = {
|
|
3039
|
+
debug: config.debug !== undefined ? config.debug : isDevelopment,
|
|
3040
|
+
showToolbar: config.showToolbar !== undefined ? config.showToolbar : isDevelopment,
|
|
3041
|
+
...config
|
|
3042
|
+
};
|
|
3043
|
+
keakInstance = new KeakSDK(finalConfig);
|
|
3044
|
+
keakInstance.init().then(() => {
|
|
3045
|
+
// Expose SDK on window.keak for external access (e.g., from iframe parent)
|
|
3046
|
+
if (typeof window !== 'undefined') {
|
|
3047
|
+
window.keak = keak;
|
|
3048
|
+
}
|
|
3049
|
+
// Set up message handler for HTML extraction requests (from Keak Code)
|
|
3050
|
+
// This allows Keak Code to extract rendered HTML from the iframe
|
|
3051
|
+
if (typeof window !== 'undefined' && !window.__KEAK_HTML_EXTRACTOR_SETUP__) {
|
|
3052
|
+
window.__KEAK_HTML_EXTRACTOR_SETUP__ = true;
|
|
3053
|
+
const handleExtractHTMLRequest = async (event) => {
|
|
3054
|
+
// Only handle messages from parent window (Keak Code)
|
|
3055
|
+
if (event.data?.type === 'KEAK_EXTRACT_HTML_REQUEST' && event.source === window.parent) {
|
|
3056
|
+
const { requestId, experimentName, dataKeakId, variantName } = event.data;
|
|
3057
|
+
try {
|
|
3058
|
+
// Set the variant
|
|
3059
|
+
if (keakInstance) {
|
|
3060
|
+
keakInstance.setExperimentVariant(experimentName, variantName);
|
|
3061
|
+
}
|
|
3062
|
+
// Wait for React to re-render
|
|
3063
|
+
await new Promise(resolve => {
|
|
3064
|
+
setTimeout(() => {
|
|
3065
|
+
requestAnimationFrame(() => {
|
|
3006
3066
|
requestAnimationFrame(() => {
|
|
3007
|
-
|
|
3008
|
-
resolve(undefined);
|
|
3009
|
-
});
|
|
3067
|
+
resolve(undefined);
|
|
3010
3068
|
});
|
|
3011
|
-
}
|
|
3012
|
-
});
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
attempts++;
|
|
3021
|
-
if (attempts < maxAttempts) {
|
|
3022
|
-
// Wait a bit before retrying
|
|
3023
|
-
await new Promise(resolve => setTimeout(resolve, 200));
|
|
3024
|
-
}
|
|
3025
|
-
}
|
|
3026
|
-
}
|
|
3069
|
+
});
|
|
3070
|
+
}, 300);
|
|
3071
|
+
});
|
|
3072
|
+
// Find the element with retries
|
|
3073
|
+
let element = null;
|
|
3074
|
+
let attempts = 0;
|
|
3075
|
+
const maxAttempts = 10;
|
|
3076
|
+
while (!element && attempts < maxAttempts) {
|
|
3077
|
+
element = document.querySelector(`[data-keak-id="${dataKeakId}"]`);
|
|
3027
3078
|
if (!element) {
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
requestId,
|
|
3033
|
-
success: false,
|
|
3034
|
-
error: `Element with data-keak-id="${dataKeakId}" not found on ${window.location.pathname}. Available elements: ${allKeakIds.length > 0 ? allKeakIds.join(', ') : 'none'}`
|
|
3035
|
-
}, '*');
|
|
3036
|
-
return;
|
|
3037
|
-
}
|
|
3038
|
-
const html = element.innerHTML;
|
|
3039
|
-
if (!html || html.trim().length === 0) {
|
|
3040
|
-
window.parent.postMessage({
|
|
3041
|
-
type: 'KEAK_EXTRACT_HTML_RESPONSE',
|
|
3042
|
-
requestId,
|
|
3043
|
-
success: false,
|
|
3044
|
-
error: 'Element has no content (empty innerHTML)'
|
|
3045
|
-
}, '*');
|
|
3046
|
-
return;
|
|
3079
|
+
attempts++;
|
|
3080
|
+
if (attempts < maxAttempts) {
|
|
3081
|
+
await new Promise(resolve => setTimeout(resolve, 200));
|
|
3082
|
+
}
|
|
3047
3083
|
}
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
const allElements = tempDiv.querySelectorAll('*');
|
|
3052
|
-
allElements.forEach(el => {
|
|
3053
|
-
Array.from(el.attributes).forEach(attr => {
|
|
3054
|
-
if (attr.name.startsWith('data-headlessui-') ||
|
|
3055
|
-
attr.name === 'data-selected' ||
|
|
3056
|
-
attr.name.startsWith('data-m=')) {
|
|
3057
|
-
el.removeAttribute(attr.name);
|
|
3058
|
-
}
|
|
3059
|
-
});
|
|
3060
|
-
});
|
|
3061
|
-
const cleanedHTML = tempDiv.innerHTML;
|
|
3062
|
-
// Send response back to parent
|
|
3084
|
+
}
|
|
3085
|
+
if (!element) {
|
|
3086
|
+
const allKeakIds = Array.from(document.querySelectorAll('[data-keak-id]')).map(el => el.getAttribute('data-keak-id'));
|
|
3063
3087
|
window.parent.postMessage({
|
|
3064
3088
|
type: 'KEAK_EXTRACT_HTML_RESPONSE',
|
|
3065
3089
|
requestId,
|
|
3066
|
-
success:
|
|
3067
|
-
|
|
3090
|
+
success: false,
|
|
3091
|
+
error: `Element with data-keak-id="${dataKeakId}" not found on ${window.location.pathname}. Available elements: ${allKeakIds.length > 0 ? allKeakIds.join(', ') : 'none'}`
|
|
3068
3092
|
}, '*');
|
|
3093
|
+
return;
|
|
3069
3094
|
}
|
|
3070
|
-
|
|
3095
|
+
const html = element.innerHTML;
|
|
3096
|
+
if (!html || html.trim().length === 0) {
|
|
3071
3097
|
window.parent.postMessage({
|
|
3072
3098
|
type: 'KEAK_EXTRACT_HTML_RESPONSE',
|
|
3073
3099
|
requestId,
|
|
3074
3100
|
success: false,
|
|
3075
|
-
error:
|
|
3101
|
+
error: 'Element has no content (empty innerHTML)'
|
|
3076
3102
|
}, '*');
|
|
3103
|
+
return;
|
|
3077
3104
|
}
|
|
3105
|
+
// Clean up runtime attributes
|
|
3106
|
+
const tempDiv = document.createElement('div');
|
|
3107
|
+
tempDiv.innerHTML = html;
|
|
3108
|
+
const allElements = tempDiv.querySelectorAll('*');
|
|
3109
|
+
allElements.forEach(el => {
|
|
3110
|
+
Array.from(el.attributes).forEach(attr => {
|
|
3111
|
+
if (attr.name.startsWith('data-headlessui-') ||
|
|
3112
|
+
attr.name === 'data-selected' ||
|
|
3113
|
+
attr.name.startsWith('data-m=')) {
|
|
3114
|
+
el.removeAttribute(attr.name);
|
|
3115
|
+
}
|
|
3116
|
+
});
|
|
3117
|
+
});
|
|
3118
|
+
const cleanedHTML = tempDiv.innerHTML;
|
|
3119
|
+
window.parent.postMessage({
|
|
3120
|
+
type: 'KEAK_EXTRACT_HTML_RESPONSE',
|
|
3121
|
+
requestId,
|
|
3122
|
+
success: true,
|
|
3123
|
+
html: cleanedHTML
|
|
3124
|
+
}, '*');
|
|
3125
|
+
}
|
|
3126
|
+
catch (error) {
|
|
3127
|
+
window.parent.postMessage({
|
|
3128
|
+
type: 'KEAK_EXTRACT_HTML_RESPONSE',
|
|
3129
|
+
requestId,
|
|
3130
|
+
success: false,
|
|
3131
|
+
error: error instanceof Error ? error.message : String(error)
|
|
3132
|
+
}, '*');
|
|
3078
3133
|
}
|
|
3079
|
-
};
|
|
3080
|
-
window.addEventListener('message', handleExtractHTMLRequest);
|
|
3081
|
-
}
|
|
3082
|
-
// DON'T auto-initialize toolbar - user should add <KeakToolbar /> manually
|
|
3083
|
-
// This prevents duplicate toolbars
|
|
3084
|
-
// If you want auto-init, set showToolbar={true} and don't add manual <KeakToolbar />
|
|
3085
|
-
if (showToolbar && !document.getElementById('keak-toolbar-root')) {
|
|
3086
|
-
// Only auto-init if no manual toolbar exists
|
|
3087
|
-
const hasManualToolbar = document.querySelector('.keak-toolbar');
|
|
3088
|
-
if (!hasManualToolbar) {
|
|
3089
|
-
initializeToolbar(toolbarConfig);
|
|
3090
3134
|
}
|
|
3091
|
-
}
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
trackEvent,
|
|
3102
|
-
}), [assignments, trackEvent]);
|
|
3103
|
-
return (jsxRuntime.jsx(KeakContext.Provider, { value: contextValue, children: children }));
|
|
3104
|
-
}
|
|
3105
|
-
// Hook to use Keak context
|
|
3106
|
-
function useKeak() {
|
|
3107
|
-
const context = React.useContext(KeakContext);
|
|
3108
|
-
if (!context) {
|
|
3109
|
-
throw new Error('useKeak must be used within a KeakProvider');
|
|
3110
|
-
}
|
|
3111
|
-
return context;
|
|
3112
|
-
}
|
|
3113
|
-
// Hook for experiment usage
|
|
3114
|
-
function useExperiment(experimentKey) {
|
|
3115
|
-
const { assignments, trackEvent } = useKeak();
|
|
3116
|
-
const variant = assignments[experimentKey] || 'control';
|
|
3117
|
-
const track = React.useCallback((eventName, properties) => {
|
|
3118
|
-
trackEvent(eventName, {
|
|
3119
|
-
...properties,
|
|
3120
|
-
experiment_key: experimentKey,
|
|
3121
|
-
variant_key: variant,
|
|
3135
|
+
};
|
|
3136
|
+
window.addEventListener('message', handleExtractHTMLRequest);
|
|
3137
|
+
}
|
|
3138
|
+
// Initialize toolbar if showToolbar is enabled
|
|
3139
|
+
if (finalConfig.showToolbar && !toolbarInitialized) {
|
|
3140
|
+
initializeToolbar({
|
|
3141
|
+
position: 'bottom-right',
|
|
3142
|
+
theme: 'auto'
|
|
3143
|
+
});
|
|
3144
|
+
}
|
|
3122
3145
|
});
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3146
|
+
// Cleanup on unmount
|
|
3147
|
+
return () => {
|
|
3148
|
+
// Keep instance alive for session, don't destroy
|
|
3149
|
+
};
|
|
3150
|
+
}, []); // Empty deps - only run once
|
|
3151
|
+
return keakInstance;
|
|
3129
3152
|
}
|
|
3130
3153
|
// Variant Component
|
|
3131
3154
|
const Variant = ({ children }) => {
|
|
@@ -3176,9 +3199,14 @@ function detectVariantElements(children) {
|
|
|
3176
3199
|
return false;
|
|
3177
3200
|
});
|
|
3178
3201
|
}
|
|
3179
|
-
// Experiment Component
|
|
3202
|
+
// Experiment Component
|
|
3180
3203
|
const Experiment = ({ name, children, active = true }) => {
|
|
3181
|
-
|
|
3204
|
+
// In production, render children as-is (no experiment logic)
|
|
3205
|
+
if (typeof process !== 'undefined' && process.env.NODE_ENV === 'production') {
|
|
3206
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
|
|
3207
|
+
}
|
|
3208
|
+
// Access global SDK instance directly (no context needed)
|
|
3209
|
+
const assignments = keakInstance?.assignments || {};
|
|
3182
3210
|
// Use enhanced variant detection
|
|
3183
3211
|
const variantElements = detectVariantElements(children);
|
|
3184
3212
|
// Extract comprehensive variant metadata
|
|
@@ -3333,14 +3361,9 @@ const Experiment = ({ name, children, active = true }) => {
|
|
|
3333
3361
|
};
|
|
3334
3362
|
// Global SDK functions (for non-React usage)
|
|
3335
3363
|
const keak = {
|
|
3336
|
-
init: (config) => {
|
|
3364
|
+
init: (config = {}) => {
|
|
3337
3365
|
if (!keakInstance) {
|
|
3338
|
-
|
|
3339
|
-
const finalConfig = {
|
|
3340
|
-
...config,
|
|
3341
|
-
apiKey: config.apiKey || 'keak_dev_key_12345'
|
|
3342
|
-
};
|
|
3343
|
-
keakInstance = new KeakSDK(finalConfig);
|
|
3366
|
+
keakInstance = new KeakSDK(config);
|
|
3344
3367
|
return keakInstance.init().then(() => {
|
|
3345
3368
|
// Expose SDK on window.keak for external access (e.g., from iframe parent)
|
|
3346
3369
|
if (typeof window !== 'undefined') {
|
|
@@ -3406,12 +3429,10 @@ const keak = {
|
|
|
3406
3429
|
return keakInstance.getAllImpressions();
|
|
3407
3430
|
},
|
|
3408
3431
|
};
|
|
3409
|
-
// Initialize toolbar
|
|
3410
|
-
let toolbarInitialized = false;
|
|
3432
|
+
// Initialize toolbar (called by useKeak hook)
|
|
3411
3433
|
function initializeToolbar(config) {
|
|
3412
3434
|
if (toolbarInitialized || typeof window === 'undefined')
|
|
3413
3435
|
return;
|
|
3414
|
-
// Show toolbar by default when called explicitly
|
|
3415
3436
|
// Check for development mode or explicit enabling
|
|
3416
3437
|
const isDevelopment = (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') ||
|
|
3417
3438
|
(typeof window !== 'undefined' && window.location.hostname === 'localhost') ||
|
|
@@ -3433,18 +3454,11 @@ function initializeToolbar(config) {
|
|
|
3433
3454
|
document.body.appendChild(toolbarRoot);
|
|
3434
3455
|
// Use React 18's createRoot API
|
|
3435
3456
|
const root = ReactDOMClient.createRoot(toolbarRoot);
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
config: keakInstance?.config,
|
|
3439
|
-
assignments: keakInstance?.assignments || {},
|
|
3440
|
-
trackEvent: (eventName, properties) => {
|
|
3441
|
-
keakInstance?.trackEvent(eventName, properties);
|
|
3442
|
-
}
|
|
3443
|
-
}
|
|
3444
|
-
}, React.createElement(KeakToolbar, {
|
|
3457
|
+
// Toolbar no longer needs context - it accesses keakInstance directly
|
|
3458
|
+
root.render(React.createElement(KeakToolbar, {
|
|
3445
3459
|
position: config?.position || 'bottom-right',
|
|
3446
3460
|
theme: config?.theme || 'auto'
|
|
3447
|
-
}))
|
|
3461
|
+
}));
|
|
3448
3462
|
toolbarInitialized = true;
|
|
3449
3463
|
}).catch(error => {
|
|
3450
3464
|
console.error('[Keak] Failed to load React/ReactDOM:', error);
|
|
@@ -3456,12 +3470,10 @@ function initializeToolbar(config) {
|
|
|
3456
3470
|
|
|
3457
3471
|
exports.Conversion = Conversion;
|
|
3458
3472
|
exports.Experiment = Experiment;
|
|
3459
|
-
exports.KeakProvider = KeakProvider;
|
|
3460
3473
|
exports.KeakToolbar = KeakToolbar;
|
|
3461
3474
|
exports.Variant = Variant;
|
|
3462
3475
|
exports.buildSourcePathInjection = buildSourcePathInjection;
|
|
3463
3476
|
exports.initializeToolbar = initializeToolbar;
|
|
3464
3477
|
exports.keak = keak;
|
|
3465
|
-
exports.useExperiment = useExperiment;
|
|
3466
3478
|
exports.useKeak = useKeak;
|
|
3467
3479
|
//# sourceMappingURL=index.cjs.js.map
|