fixdog 0.0.1 → 0.0.2

package/dist/styles/sidebarStyles.d.ts

@@ -0,0 +1,2 @@
+declare const sidebarStyles = "/* Fixdog Sidebar Styles */\n\n/* CSS Variables - Dark Theme (default) */\n.fixdog-dark {\n  --fixdog-bg: #13140a;\n  --fixdog-bg-secondary: rgba(0, 0, 0, 0.3);\n  --fixdog-bg-tertiary: rgba(0, 0, 0, 0.4);\n  --fixdog-border: rgba(255, 255, 255, 0.1);\n  --fixdog-border-strong: rgba(255, 255, 255, 0.15);\n  --fixdog-text: #ffffff;\n  --fixdog-text-secondary: rgba(255, 255, 255, 0.7);\n  --fixdog-text-muted: rgba(255, 255, 255, 0.5);\n  --fixdog-accent: #3b82f6;\n  --fixdog-accent-hover: #2563eb;\n  --fixdog-success: #10b981;\n  --fixdog-success-hover: #059669;\n  --fixdog-warning: #f59e0b;\n  --fixdog-error: #ef4444;\n  --fixdog-shadow: rgba(0, 0, 0, 0.5);\n  --fixdog-modal-bg: rgba(30, 30, 20, 0.98);\n}\n\n/* CSS Variables - Light Theme */\n.fixdog-light {\n  --fixdog-bg: #f8f9fa;\n  --fixdog-bg-secondary: #ffffff;\n  --fixdog-bg-tertiary: #e9ecef;\n  --fixdog-border: rgba(0, 0, 0, 0.1);\n  --fixdog-border-strong: rgba(0, 0, 0, 0.15);\n  --fixdog-text: #1a1a1a;\n  --fixdog-text-secondary: #4a4a4a;\n  --fixdog-text-muted: #6b7280;\n  --fixdog-accent: #2563eb;\n  --fixdog-accent-hover: #1d4ed8;\n  --fixdog-success: #059669;\n  --fixdog-success-hover: #047857;\n  --fixdog-warning: #d97706;\n  --fixdog-error: #dc2626;\n  --fixdog-shadow: rgba(0, 0, 0, 0.12);\n  --fixdog-modal-bg: #ffffff;\n}\n\n/* Overlay */\n.fixdog-sidebar-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 999999;\n  pointer-events: none;\n}\n\n/* Main Sidebar Container */\n.fixdog-sidebar {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 420px;\n  max-width: 100vw;\n  height: 100vh;\n  background: var(--fixdog-bg, #13140a);\n  box-shadow: -4px 0 24px var(--fixdog-shadow, rgba(0, 0, 0, 0.5));\n  display: flex;\n  flex-direction: column;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  font-size: 14px;\n  color: var(--fixdog-text, #ffffff);\n  pointer-events: auto;\n  animation: fixdog-slide-in-right 0.3s ease-out;\n  overflow: hidden;\n  border-left: 1px solid var(--fixdog-border, rgba(255, 255, 255, 0.1));\n}\n\n.fixdog-side-left {\n  left: 0;\n  right: auto;\n  box-shadow: 4px 0 24px var(--fixdog-shadow, rgba(0, 0, 0, 0.5));\n  border-left: none;\n  border-right: 1px solid var(--fixdog-border, rgba(255, 255, 255, 0.1));\n  animation: fixdog-slide-in-left 0.3s ease-out;\n}\n\n.fixdog-side-right {\n  right: 0;\n  left: auto;\n  animation: fixdog-slide-in-right 0.3s ease-out;\n}\n\n@keyframes fixdog-slide-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fixdog-slide-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n/* Icon spin animation */\n@keyframes fixdog-icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.fixdog-icon-spin {\n  animation: fixdog-icon-spin 1s linear infinite;\n}\n\n/* Top Bar - Pinned session and theme controls */\n.fixdog-top-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: var(--fixdog-bg-secondary, rgba(0, 0, 0, 0.3));\n  border-bottom: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n  flex-shrink: 0;\n  gap: 12px;\n}\n\n.fixdog-session-top {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n}\n\n.fixdog-top-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.fixdog-theme-toggle,\n.fixdog-side-toggle {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid var(--fixdog-border, rgba(255, 255, 255, 0.1));\n  border-radius: 8px;\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.7));\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.fixdog-theme-toggle:hover,\n.fixdog-side-toggle:hover {\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.4));\n  color: var(--fixdog-text, #ffffff);\n  border-color: var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n}\n\n/* Light mode theme toggle */\n.fixdog-light .fixdog-theme-toggle,\n.fixdog-light .fixdog-side-toggle {\n  border-color: #d1d5db;\n  color: #4b5563;\n}\n\n.fixdog-light .fixdog-theme-toggle:hover,\n.fixdog-light .fixdog-side-toggle:hover {\n  background: #f3f4f6;\n  color: #1f2937;\n  border-color: #9ca3af;\n}\n\n.fixdog-pr-chip {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--fixdog-accent, #3b82f6);\n  text-decoration: none;\n  padding: 4px 10px;\n  border-radius: 6px;\n  background: rgba(59, 130, 246, 0.1);\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.fixdog-pr-chip:hover {\n  background: rgba(59, 130, 246, 0.2);\n}\n\n/* Header */\n.fixdog-sidebar-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 20px 24px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n  background: rgba(0, 0, 0, 0.3);\n  flex-shrink: 0;\n}\n\n.fixdog-sidebar-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #ffffff;\n  letter-spacing: -0.01em;\n}\n\n.fixdog-close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  font-size: 28px;\n  line-height: 1;\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.7));\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  flex-shrink: 0;\n  margin-left: 12px;\n}\n\n.fixdog-close-btn:hover {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  color: var(--fixdog-text, #ffffff);\n}\n\n/* Light mode close button */\n.fixdog-light .fixdog-close-btn {\n  color: #6b7280;\n}\n\n.fixdog-light .fixdog-close-btn:hover {\n  background: #f3f4f6;\n  color: #1f2937;\n}\n\n/* Content Area */\n.fixdog-sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 24px;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\n}\n\n.fixdog-sidebar-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.fixdog-sidebar-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.fixdog-sidebar-content::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 4px;\n}\n\n.fixdog-sidebar-content::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n\n/* Element Info Section */\n.fixdog-element-info-section {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n  flex-shrink: 0;\n  background: var(--fixdog-bg-secondary, rgba(0, 0, 0, 0.2));\n  margin-top: 0;\n}\n\n/* Element Info Section */\n.fixdog-element-info {\n  margin-bottom: 0;\n}\n\n.fixdog-element-info-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.fixdog-element-info-title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--fixdog-text, rgba(255, 255, 255, 0.9));\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.fixdog-toggle-view-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.2));\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  color: var(--fixdog-text, #ffffff);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  font-weight: 500;\n}\n\n.fixdog-toggle-view-btn:hover {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.2));\n  border-color: var(--fixdog-border-strong, rgba(255, 255, 255, 0.3));\n}\n\n/* Light mode toggle view button */\n.fixdog-light .fixdog-toggle-view-btn {\n  background: #f3f4f6;\n  border-color: #d1d5db;\n  color: #374151;\n}\n\n.fixdog-light .fixdog-toggle-view-btn:hover {\n  background: #e5e7eb;\n  border-color: #9ca3af;\n}\n\n.fixdog-element-info-content {\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.3));\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n  border-radius: 8px;\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n}\n\n/* Light mode element info content */\n.fixdog-light .fixdog-element-info-content {\n  background: #ffffff;\n  border-color: #e5e7eb;\n}\n\n.fixdog-file-location {\n  font-family: \"SF Mono\", Monaco, Menlo, Consolas, monospace;\n  font-size: 13px;\n  color: var(--fixdog-text, #ffffff);\n  word-break: break-word;\n}\n\n.fixdog-info-row {\n  display: flex;\n  margin-bottom: 12px;\n  line-height: 1.6;\n}\n\n.fixdog-info-row:last-of-type {\n  margin-bottom: 0;\n}\n\n.fixdog-info-row:last-child {\n  margin-bottom: 0;\n}\n\n.fixdog-info-label {\n  flex-shrink: 0;\n  width: 100px;\n  font-weight: 500;\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.75));\n  font-size: 13px;\n}\n\n.fixdog-info-value {\n  flex: 1;\n  color: var(--fixdog-text, #ffffff);\n  word-break: break-word;\n  font-size: 13px;\n}\n\n.fixdog-component-name {\n  font-weight: 600;\n  color: var(--fixdog-accent, #60a5fa);\n}\n\n.fixdog-file-path {\n  font-family: \"SF Mono\", Monaco, Menlo, Consolas, monospace;\n  font-size: 12px;\n}\n\n.fixdog-mono {\n  font-family: \"SF Mono\", Monaco, Menlo, Consolas, monospace;\n  font-size: 12px;\n}\n\n.fixdog-detailed-section {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--fixdog-border, rgba(255, 255, 255, 0.1));\n}\n\n.fixdog-code-preview {\n  flex-direction: column;\n}\n\n.fixdog-code-placeholder {\n  margin-top: 6px;\n  padding: 8px;\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.3));\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.8));\n  border-radius: 4px;\n  font-family: \"SF Mono\", Monaco, Menlo, Consolas, monospace;\n  font-size: 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Chat Container */\n.fixdog-chat-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n/* Messages Container */\n.fixdog-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 16px 20px;\n  scrollbar-width: thin;\n  scrollbar-color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.2)) transparent;\n}\n\n.fixdog-messages-container::-webkit-scrollbar {\n  width: 8px;\n}\n\n.fixdog-messages-container::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.fixdog-messages-container::-webkit-scrollbar-thumb {\n  background: var(--fixdog-text-muted, rgba(255, 255, 255, 0.2));\n  border-radius: 4px;\n}\n\n.fixdog-messages-container::-webkit-scrollbar-thumb:hover {\n  background: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.3));\n}\n\n/* Empty State */\n.fixdog-empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 200px;\n  width: 100%;\n}\n\n.fixdog-empty-state-text {\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.6));\n  font-size: 14px;\n  text-align: center;\n}\n\n/* Secret Prompt */\n.fixdog-secret-prompt {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 24px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.fixdog-secret-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #ffffff;\n}\n\n.fixdog-secret-description {\n  font-size: 13px;\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.6));\n  text-align: center;\n}\n\n.fixdog-secret-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n\n.fixdog-secret-input {\n  width: 100%;\n  padding: 10px 14px;\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.2));\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 14px;\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.4));\n  color: var(--fixdog-text, #ffffff);\n  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;\n  box-sizing: border-box;\n}\n\n.fixdog-secret-input::placeholder {\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n}\n\n.fixdog-secret-input:focus {\n  outline: none;\n  border-color: var(--fixdog-accent, #60a5fa);\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.5));\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n/* Light mode secret input */\n.fixdog-light .fixdog-secret-input {\n  background: #ffffff;\n  border-color: #d1d5db;\n}\n\n.fixdog-light .fixdog-secret-input:focus {\n  background: #ffffff;\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.fixdog-secret-submit-btn {\n  width: 100%;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #ffffff;\n  background: var(--fixdog-accent, #3b82f6);\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.fixdog-secret-submit-btn:hover:not(:disabled) {\n  background: var(--fixdog-accent-hover, #2563eb);\n}\n\n.fixdog-secret-submit-btn:disabled {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.4));\n  cursor: not-allowed;\n}\n\n/* Light mode disabled button */\n.fixdog-light .fixdog-secret-submit-btn:disabled {\n  background: #e5e7eb;\n  color: #9ca3af;\n}\n\n/* Messages */\n.fixdog-message {\n  margin-bottom: 16px;\n  display: flex;\n  animation: fixdog-message-fade-in 0.2s ease-out;\n}\n\n@keyframes fixdog-message-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.fixdog-message-user {\n  justify-content: flex-end;\n}\n\n.fixdog-message-assistant {\n  justify-content: flex-start;\n}\n\n/* Message Bubbles */\n.fixdog-message-bubble {\n  max-width: 80%;\n  padding: 12px 16px;\n  border-radius: 12px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.fixdog-message-user .fixdog-message-bubble {\n  background: rgba(59, 130, 246, 0.15);\n  border: 1px solid rgba(59, 130, 246, 0.25);\n  color: var(--fixdog-accent, #3b82f6);\n}\n\n.fixdog-light .fixdog-message-user .fixdog-message-bubble {\n  background: rgba(59, 130, 246, 0.1);\n  color: #1d4ed8;\n}\n\n.fixdog-message-assistant .fixdog-message-bubble {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.08));\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.9));\n}\n\n.fixdog-message-content {\n  line-height: 1.6;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-size: 14px;\n}\n\n.fixdog-message-content.fixdog-message-error {\n  color: #fca5a5;\n}\n\n/* Loading Message */\n.fixdog-message-loading {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.7));\n  font-size: 14px;\n}\n\n.fixdog-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.2));\n  border-top-color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.8));\n  border-radius: 50%;\n  animation: fixdog-spin 0.8s linear infinite;\n}\n\n.fixdog-spinner-small {\n  width: 14px;\n  height: 14px;\n  border: 2px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.3));\n  border-top-color: var(--fixdog-text, #ffffff);\n  border-radius: 50%;\n  animation: fixdog-spin 0.8s linear infinite;\n}\n\n/* Light mode spinner */\n.fixdog-light .fixdog-spinner {\n  border-color: #e5e7eb;\n  border-top-color: #4b5563;\n}\n\n.fixdog-light .fixdog-spinner-small {\n  border-color: #d1d5db;\n  border-top-color: #374151;\n}\n\n@keyframes fixdog-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Fixed Input Footer */\n.fixdog-input-footer-fixed {\n  flex-shrink: 0;\n  padding: 16px 20px;\n  border-top: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n  background: var(--fixdog-bg-secondary, rgba(0, 0, 0, 0.3));\n}\n\n.fixdog-input-wrapper {\n  position: relative;\n  margin-bottom: 8px;\n}\n\n.fixdog-textarea {\n  width: 100%;\n  padding: 10px 60px 10px 14px;\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.2));\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.5;\n  resize: none;\n  min-height: 44px;\n  max-height: 200px;\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.4));\n  color: var(--fixdog-text, #ffffff);\n  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  overflow-y: auto;\n}\n\n.fixdog-textarea::placeholder {\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n}\n\n.fixdog-textarea:focus {\n  outline: none;\n  border-color: var(--fixdog-accent, #60a5fa);\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.5));\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n.fixdog-textarea:disabled {\n  background: var(--fixdog-bg-secondary, rgba(0, 0, 0, 0.2));\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  cursor: not-allowed;\n}\n\n.fixdog-submit-btn {\n  position: absolute;\n  bottom: 10px;\n  right: 6px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #ffffff;\n  background: #3b82f6;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.fixdog-submit-btn:active {\n  transform: translateY(1px);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n}\n\n.fixdog-submit-btn:hover:not(:disabled) {\n  background: #2563eb;\n}\n\n.fixdog-submit-btn:disabled {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.3));\n  cursor: not-allowed;\n}\n\n/* Light mode submit button disabled */\n.fixdog-light .fixdog-submit-btn:disabled {\n  background: #e5e7eb;\n  color: #9ca3af;\n}\n\n.fixdog-submit-btn svg {\n  stroke: currentColor;\n}\n\n.fixdog-input-hint {\n  font-size: 11px;\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  text-align: center;\n  margin-top: 4px;\n}\n\n.fixdog-send-to-dev-section {\n  margin-top: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.fixdog-send-to-dev-btn {\n  width: 100%;\n  padding: 10px 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #ffffff;\n  background: #10b981;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.fixdog-send-to-dev-btn:hover:not(:disabled) {\n  background: #059669;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\n}\n\n.fixdog-send-to-dev-btn:active:not(:disabled) {\n  transform: translateY(1px);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n}\n\n.fixdog-send-to-dev-btn:disabled {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  cursor: not-allowed;\n}\n\n/* Light mode send-to-dev disabled */\n.fixdog-light .fixdog-send-to-dev-btn:disabled {\n  background: #e5e7eb;\n  color: #9ca3af;\n}\n\n.fixdog-send-to-dev-btn svg {\n  stroke: currentColor;\n}\n\n.fixdog-pr-link {\n  display: block;\n  text-align: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: #60a5fa;\n  text-decoration: none;\n  padding: 6px;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n\n.fixdog-pr-link:hover {\n  background: rgba(96, 165, 250, 0.1);\n  color: #93c5fd;\n  text-decoration: underline;\n}\n\n.fixdog-retry-btn {\n  margin-top: 8px;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: #ef4444;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n\n.fixdog-retry-btn:hover {\n  background: #dc2626;\n}\n\n/* Footer */\n.fixdog-sidebar-footer {\n  padding: 16px 24px;\n  border-top: 1px solid rgba(255, 255, 255, 0.15);\n  background: rgba(0, 0, 0, 0.3);\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.fixdog-footer-text {\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.fixdog-footer-link {\n  color: #60a5fa;\n  text-decoration: none;\n  font-weight: 500;\n}\n\n.fixdog-footer-link:hover {\n  text-decoration: underline;\n  color: #93c5fd;\n}\n\n/* Selected Components List */\n.fixdog-selected-components-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  max-height: 200px;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.2)) transparent;\n}\n\n.fixdog-selected-components-list::-webkit-scrollbar {\n  width: 6px;\n}\n\n.fixdog-selected-components-list::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.fixdog-selected-components-list::-webkit-scrollbar-thumb {\n  background: var(--fixdog-text-muted, rgba(255, 255, 255, 0.2));\n  border-radius: 3px;\n}\n\n/* Light mode scrollbar */\n.fixdog-light .fixdog-selected-components-list {\n  scrollbar-color: #d1d5db transparent;\n}\n\n.fixdog-light .fixdog-selected-components-list::-webkit-scrollbar-thumb {\n  background: #d1d5db;\n}\n\n.fixdog-selected-component-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.3));\n  border: 1px solid var(--fixdog-border, rgba(255, 255, 255, 0.1));\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n\n.fixdog-selected-component-item:hover {\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.4));\n  border-color: var(--fixdog-border-strong, rgba(255, 255, 255, 0.2));\n}\n\n/* Light mode component items */\n.fixdog-light .fixdog-selected-component-item {\n  background: #ffffff;\n  border-color: #e5e7eb;\n}\n\n.fixdog-light .fixdog-selected-component-item:hover {\n  background: #f9fafb;\n  border-color: #d1d5db;\n}\n\n.fixdog-component-chip-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n}\n\n.fixdog-component-chip {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  background: #3b82f6;\n  color: #ffffff;\n  font-size: 12px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.fixdog-component-chip:hover {\n  background: #2563eb;\n  transform: scale(1.1);\n}\n\n.fixdog-component-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.fixdog-component-name-label {\n  font-weight: 600;\n  color: var(--fixdog-accent, #60a5fa);\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.fixdog-component-file-label {\n  font-family: \"SF Mono\", Monaco, Menlo, Consolas, monospace;\n  font-size: 11px;\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.6));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.fixdog-remove-component-btn {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  border: none;\n  background: transparent;\n  font-size: 18px;\n  line-height: 1;\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  margin-left: 8px;\n}\n\n.fixdog-remove-component-btn:hover {\n  background: rgba(239, 68, 68, 0.2);\n  color: var(--fixdog-error, #ef4444);\n}\n\n.fixdog-selection-hint {\n  margin-top: 12px;\n  font-size: 11px;\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  text-align: center;\n}\n\n/* Chip Input Styles */\n.fixdog-chip-input-container {\n  position: relative;\n  width: 100%;\n}\n\n.fixdog-chip-input {\n  width: 100%;\n  min-height: 80px;\n  max-height: 200px;\n  padding: 12px 14px 44px 14px;\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.2));\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.5;\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.4));\n  color: var(--fixdog-text, #ffffff);\n  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;\n  box-sizing: border-box;\n  overflow-y: auto;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.fixdog-chip-input:empty::before {\n  content: attr(data-placeholder);\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  pointer-events: none;\n}\n\n.fixdog-chip-input:focus {\n  outline: none;\n  border-color: var(--fixdog-accent, #60a5fa);\n  background: var(--fixdog-bg-tertiary, rgba(0, 0, 0, 0.5));\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n.fixdog-chip-input[data-disabled=\"true\"] {\n  background: var(--fixdog-bg-secondary, rgba(0, 0, 0, 0.2));\n  color: var(--fixdog-text-muted, rgba(255, 255, 255, 0.5));\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Light mode chip input */\n.fixdog-light .fixdog-chip-input {\n  background: #ffffff;\n  border-color: #d1d5db;\n}\n\n.fixdog-light .fixdog-chip-input:focus {\n  background: #ffffff;\n  border-color: var(--fixdog-accent);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n/* Inline chip in input */\n.fixdog-inline-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  background: #3b82f6;\n  color: #ffffff;\n  font-size: 11px;\n  font-weight: 700;\n  border-radius: 50%;\n  margin: 0 2px;\n  vertical-align: middle;\n  user-select: none;\n  cursor: default;\n}\n\n/* Message display chip */\n.fixdog-message-chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  background: #3b82f6;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  border-radius: 50%;\n  margin: 0 2px;\n  vertical-align: middle;\n}\n\n/* Session elements in top bar */\n.fixdog-session-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--fixdog-text-muted, rgba(255, 255, 255, 0.3));\n  transition: background 0.2s;\n  flex-shrink: 0;\n}\n\n.fixdog-session-dot.active {\n  background: var(--fixdog-success, #22c55e);\n  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);\n}\n\n.fixdog-session-label {\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.7));\n  font-weight: 500;\n  font-size: 12px;\n  white-space: nowrap;\n}\n\n.fixdog-new-session-btn {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.7));\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  border: 1px solid var(--fixdog-border, rgba(255, 255, 255, 0.15));\n  padding: 5px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.fixdog-new-session-btn:hover {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.15));\n  color: var(--fixdog-text, #ffffff);\n  border-color: var(--fixdog-border-strong, rgba(255, 255, 255, 0.25));\n}\n\n.fixdog-new-session-btn.primary {\n  background: var(--fixdog-accent, #3b82f6);\n  color: #ffffff;\n  border-color: var(--fixdog-accent, #3b82f6);\n  font-weight: 600;\n}\n\n.fixdog-new-session-btn.primary:hover {\n  background: var(--fixdog-accent-hover, #2563eb);\n  border-color: var(--fixdog-accent-hover, #2563eb);\n}\n\n/* Light mode session button */\n.fixdog-light .fixdog-new-session-btn {\n  background: #f3f4f6;\n  color: #4b5563;\n  border-color: #d1d5db;\n}\n\n.fixdog-light .fixdog-new-session-btn:hover {\n  background: #e5e7eb;\n  color: #1f2937;\n  border-color: #9ca3af;\n}\n\n/* Inline Modal - inside chat container */\n.fixdog-inline-modal {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  margin: 0 16px 16px 16px;\n  background: var(--fixdog-modal-bg, rgba(30, 30, 20, 0.98));\n  border: 1px solid var(--fixdog-warning, rgba(255, 200, 100, 0.3));\n  border-radius: 12px;\n  box-shadow: 0 4px 20px var(--fixdog-shadow, rgba(0, 0, 0, 0.4));\n  animation: fixdog-modal-slide-in 0.2s ease-out;\n}\n\n/* Light mode modal adjustments */\n.fixdog-light .fixdog-inline-modal {\n  border-color: var(--fixdog-border-strong);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n}\n\n.fixdog-inline-modal.error {\n  border-color: var(--fixdog-error, #ef4444);\n}\n\n@keyframes fixdog-modal-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.fixdog-inline-modal-icon {\n  color: var(--fixdog-warning, #f59e0b);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fixdog-inline-modal.error .fixdog-inline-modal-icon {\n  color: var(--fixdog-error, #ef4444);\n}\n\n.fixdog-inline-modal-content {\n  text-align: center;\n}\n\n.fixdog-inline-modal-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--fixdog-text, #ffffff);\n  margin-bottom: 6px;\n}\n\n.fixdog-inline-modal-body {\n  font-size: 13px;\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.7));\n  line-height: 1.5;\n}\n\n.fixdog-inline-modal-actions {\n  display: flex;\n  gap: 10px;\n  margin-top: 4px;\n}\n\n.fixdog-inline-modal-btn {\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.fixdog-inline-modal-btn.cancel {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.1));\n  color: var(--fixdog-text-secondary, rgba(255, 255, 255, 0.8));\n  border: 1px solid var(--fixdog-border-strong, rgba(255, 255, 255, 0.15));\n}\n\n.fixdog-inline-modal-btn.cancel:hover {\n  background: var(--fixdog-bg-tertiary, rgba(255, 255, 255, 0.15));\n  color: var(--fixdog-text, #ffffff);\n}\n\n/* Light mode cancel button */\n.fixdog-light .fixdog-inline-modal-btn.cancel {\n  background: #f3f4f6;\n  color: #374151;\n  border-color: #d1d5db;\n}\n\n.fixdog-light .fixdog-inline-modal-btn.cancel:hover {\n  background: #e5e7eb;\n  color: #1f2937;\n}\n\n.fixdog-inline-modal-btn.confirm {\n  background: var(--fixdog-warning, #f59e0b);\n  color: #000000;\n  font-weight: 600;\n}\n\n.fixdog-inline-modal-btn.confirm:hover {\n  background: #d97706;\n}\n\n.fixdog-inline-modal-btn.confirm.success {\n  background: var(--fixdog-success, #10b981);\n  color: #ffffff;\n}\n\n.fixdog-inline-modal-btn.confirm.success:hover {\n  background: var(--fixdog-success-hover, #059669);\n}\n\n/* Mobile Responsive */\n@media (max-width: 768px) {\n  .fixdog-sidebar {\n    width: 100vw;\n  }\n\n  .fixdog-session-status-bar {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .fixdog-session-status-right {\n    width: 100%;\n    justify-content: flex-end;\n  }\n}";
+export default sidebarStyles;

package/dist/styles.d.ts

@@ -0,0 +1,8 @@
+import { OverlayOptions } from './types';
+export declare const STYLE_ELEMENT_ID = "fixdog-sdk-styles";
+export declare const OVERLAY_CLASS = "fixdog-overlay";
+export declare const TOOLTIP_CLASS = "fixdog-tooltip";
+export declare const HIGHLIGHT_CLASS = "fixdog-highlight";
+export declare const SELECTION_CLASS = "fixdog-selection";
+export declare const SELECTION_BADGE_CLASS = "fixdog-selection-badge";
+export declare const baseStyles: (options: OverlayOptions) => string;

package/dist/types/sidebar.d.ts

@@ -0,0 +1,62 @@
+export interface ElementInfo {
+    componentName: string;
+    filePath: string;
+    line: number;
+    column: number;
+    componentTree?: string[];
+    box?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    code?: string;
+}
+export interface SelectedComponent {
+    id: number;
+    editorUrl: string;
+    elementInfo: ElementInfo;
+    elementRef?: Element;
+}
+export interface SidebarState {
+    isOpen: boolean;
+    elementInfo: ElementInfo | null;
+    editorUrl: string | null;
+    selectedComponents: SelectedComponent[];
+}
+export type ViewMode = "minimal" | "detailed";
+export interface ApiConfig {
+    endpoint: string;
+    timeout?: number;
+}
+export interface UiDogSidebarEvent {
+    editorUrl: string;
+    elementInfo: ElementInfo;
+    selectedComponent?: SelectedComponent;
+}
+export interface UiDogAddComponentEvent {
+    selectedComponent: SelectedComponent;
+}
+export interface UiDogRemoveComponentEvent {
+    componentId: number;
+}
+export interface UiDogClearSelectionsEvent {
+}
+declare global {
+    interface Window {
+        __FIXDOG_SIDEBAR__?: {
+            isOpen: boolean;
+            currentElement: any;
+            editorUrl: string | null;
+            selectedComponents: SelectedComponent[];
+        };
+        __FIXDOG_LAST_ELEMENT__?: ElementInfo;
+        __FIXDOG_SELECTED_COMPONENTS__?: SelectedComponent[];
+    }
+    interface WindowEventMap {
+        "fixdog:open-sidebar": CustomEvent<UiDogSidebarEvent>;
+        "fixdog:add-component": CustomEvent<UiDogAddComponentEvent>;
+        "fixdog:remove-component": CustomEvent<UiDogRemoveComponentEvent>;
+        "fixdog:clear-selections": CustomEvent<UiDogClearSelectionsEvent>;
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+export interface SourceInfo {
+    componentName: string;
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+    fiber?: any;
+    element?: Element | null;
+}
+export type TooltipPosition = 'auto' | 'top' | 'bottom';
+export interface InspectorOptions {
+    /** Called when user clicks (or programmatically triggers) a component. */
+    onClick?: (info: SourceInfo) => void;
+    /** Called when hovered info changes; null when leaving React tree. */
+    onHover?: (info: SourceInfo | null) => void;
+    /** Keyboard shortcut to toggle persistent inspect mode. Default: ctrl+shift+x */
+    shortcut?: string;
+    /** Enable option/alt+click inspection. Default: true */
+    useOptionClick?: boolean;
+    /** Enable inspector. Default: true in development only. */
+    enabled?: boolean;
+    /** z-index applied to overlay elements. Default: 999999 */
+    zIndex?: number;
+    /** Border color for highlight. Default: React blue (#61dafb) */
+    borderColor?: string;
+    /** Tooltip position preference. Default: auto */
+    tooltipPosition?: TooltipPosition;
+    /** Enable sidebar mode. Default: true */
+    enableSidebar?: boolean;
+    /** API endpoint for sidebar chat. Default: http://localhost:3000 */
+    apiEndpoint?: string;
+    /** Project identifier required by backend auth */
+    projectId?: string;
+    /** Model identifier to use for chat requests */
+    modelId?: string;
+}
+export interface OverlayOptions {
+    zIndex: number;
+    borderColor: string;
+    tooltipPosition: TooltipPosition;
+}
+export interface InspectorState {
+    active: boolean;
+    persistent: boolean;
+}
+export type Nullable<T> = T | null;
+export declare const DEFAULT_SHORTCUT = "ctrl+shift+x";
+export declare const DEFAULT_OPTIONS: Required<Pick<InspectorOptions, 'shortcut' | 'useOptionClick' | 'enabled' | 'zIndex' | 'borderColor' | 'tooltipPosition' | 'enableSidebar' | 'apiEndpoint'>>;

package/dist/utils/cookies.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get the stored secret from cookies
+ * @returns The secret string or null if not set
+ */
+export declare function getSecret(): string | null;
+/**
+ * Store the secret in a persistent cookie (no expiry)
+ * @param secret The secret to store
+ */
+export declare function setSecret(secret: string): void;

package/dist/utils/devMode.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Development mode detection utility
+ * Checks multiple signals to determine if the host app is in development mode
+ */
+/**
+ * Determines if the host application is running in development mode.
+ * Uses strict detection - only returns true if explicitly in dev mode.
+ */
+export declare function isDevMode(): boolean;
+/**
+ * Log message to display when not in dev mode
+ */
+export declare const DEV_MODE_WARNING = "[fixdog] app not in dev mode, please run fixdog in dev mode";
+/**
+ * Resets the cached dev mode result (useful for testing)
+ */
+export declare function resetDevModeCache(): void;

package/dist/utils/sessionStorage.d.ts

@@ -0,0 +1,19 @@
+export interface StoredSession {
+    sessionId: string;
+    modelId?: string;
+    savedAt: number;
+}
+export interface StoredPr {
+    prUrl: string;
+    branchName?: string;
+    savedAt: number;
+}
+export declare function loadSession(projectId: string): StoredSession | null;
+export declare function saveSession(projectId: string, session: StoredSession): void;
+export declare function clearSession(projectId: string): void;
+export declare function loadLastPr(projectId: string): StoredPr | null;
+export declare function saveLastPr(projectId: string, pr: StoredPr): void;
+export declare function clearLastPr(projectId: string): void;
+export type Theme = "dark" | "light";
+export declare function loadTheme(): Theme;
+export declare function saveTheme(theme: Theme): void;

package/package.json

@@ -1,57 +1,74 @@
 {
   "name": "fixdog",
-  "version": "0.0.1",
-  "description": "FixDog - In-browser IDE to fix your frontend",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "version": "0.0.2",
+  "description": "Option+Click any React component to see its source location",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
       "types": "./dist/index.d.ts"
     },
-    "./client": {
-      "require": "./dist/client/index.js",
-      "import": "./dist/client/index.mjs",
-      "types": "./dist/client/index.d.ts"
-    },
-    "./init": {
-      "require": "./dist/client/init.js",
-      "import": "./dist/client/init.mjs",
-      "types": "./dist/client/init.d.ts"
-    },
-    "./package.json": "./package.json"
+    "./react": {
+      "import": "./dist/react/index.esm.js",
+      "require": "./dist/react/index.cjs.js",
+      "types": "./dist/react/index.d.ts"
+    }
   },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "rollup -c && rollup -c",
+    "dev": "rollup -c -w",
     "prepublishOnly": "npm run build"
   },
-  "keywords": [
-    "uidog",
-    "nextjs",
-    "react",
-    "devtools",
-    "bippy",
-    "element-inspector",
-    "source-location"
-  ],
-  "author": "Infi-PC",
-  "license": "MIT",
-  "dependencies": {
-    "bippy": "^0.5.25"
-  },
   "peerDependencies": {
-    "next": ">=14.0.0",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@types/node": "^22.10.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.0"
-  }
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "source-map-js": "^1.0.2"
+  },
+  "keywords": [
+    "react",
+    "devtools",
+    "inspector",
+    "debug",
+    "source",
+    "nextjs",
+    "developer-experience",
+    "fixdog"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/username/fixdog-sdk"
+  },
+  "license": "MIT"
 }

package/USAGE.md

@@ -1,77 +0,0 @@
-# Usage Guide
-
-## Next.js
-
-### Next.js 15.3+ (recommended)
-
-1. Create `instrumentation-client.ts` at project root:
-
-```ts
-import "uidog-sdk-next/client";
-```
-
-2. Run `npm run dev` and use Alt+click in the browser.
-
-### Next.js 14.x – 15.2
-
-- App Router (`app/layout.tsx`), first import:
-
-```ts
-import "uidog-sdk-next/client";
-```
-
-- Pages Router (`pages/_app.tsx`), first import:
-
-```ts
-import "uidog-sdk-next/client"; // must be first!
-```
-
-- Start dev server and Alt+click.
-
-### Optional: Provider config (sidebar, editor, modifier)
-
-```tsx
-// app/layout.tsx or pages/_app.tsx
-import "uidog-sdk-next/client";
-import { UiDogProvider } from "uidog-sdk-next/init";
-
-export default function RootLayout({ children }) {
-  return (
-    <UiDogProvider
-      editor="cursor"
-      modifier="alt"
-      enableSidebar={true}
-      apiEndpoint="https://api.ui.dog"
-    >
-      {children}
-    </UiDogProvider>
-  );
-}
-```
-
-## Vite (React)
-
-Load the client only in dev and **before React mounts**.
-
-```ts
-// src/main.tsx (or entry), top of file
-if (import.meta.env.DEV) {
-  import("uidog-sdk-next/client");
-}
-// then your normal React render
-```
-
-Start Vite with `npm run dev` and Alt+click elements in the browser.
-
-## How to use
-
-1. Run the dev server.
-2. Hold **Alt** (default modifier) and hover to see highlight.
-3. **Alt+click** an element to open the sidebar.
-4. Sidebar shows source file/line when available; otherwise a DOM snapshot (for server-rendered or library DOM).
-
-## Notes & limits
-
-- Dev-only; production builds strip source metadata.
-- Server Components and library DOM won’t have source locations; the sidebar shows a DOM snapshot instead.
-- The import must run before any React import so Bippy can hook DevTools.

package/dist/client/index.d.mts

@@ -1,110 +0,0 @@
-type ElementInfoKind = "source" | "dom";
-interface DomSnapshot {
-    outerHTML: string;
-    text: string;
-    attributes: Record<string, string>;
-}
-interface ElementInfo {
-    kind: ElementInfoKind;
-    componentName?: string;
-    filePath?: string;
-    line?: number;
-    column?: number;
-    domSnapshot?: DomSnapshot;
-    box?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-}
-type EditorType = "vscode" | "vscode-insiders" | "cursor" | "webstorm" | "atom" | "sublime";
-interface UiDogNextOptions {
-    /**
-     * Editor to open when clicking elements
-     * @default 'cursor'
-     */
-    editor?: EditorType;
-    /**
-     * Project root path for resolving file paths
-     */
-    projectPath?: string;
-    /**
-     * Modifier key for element selection
-     * @default 'alt'
-     */
-    modifier?: "alt" | "ctrl" | "meta" | "shift";
-    /**
-     * Enable sidebar mode
-     * @default true
-     */
-    enableSidebar?: boolean;
-    /**
-     * API endpoint for edit requests
-     * @default 'https://api.ui.dog'
-     */
-    apiEndpoint?: string;
-}
-declare global {
-    interface Window {
-        __UIDOG_NEXT_INITIALIZED__?: boolean;
-        __UIDOG_SIDEBAR__?: {
-            isOpen: boolean;
-            elementInfo: ElementInfo | null;
-            editorUrl: string | null;
-        };
-    }
-}
-
-/**
- * UiDog SDK for Next.js - Main entry point
- *
- * Uses Bippy to hook into React's internals for element source detection,
- * providing a seamless developer experience for inspecting component locations.
- */
-
-/**
- * Initialize UiDog for Next.js
- *
- * This function sets up Bippy instrumentation, element detection, and the sidebar UI.
- * It should be called early in your application's lifecycle, ideally via
- * instrumentation-client.ts (Next.js 15.3+) or at the top of _app.tsx.
- */
-declare function initializeUiDogNext(options?: UiDogNextOptions): void;
-
-/**
- * Client entry point for UiDog Next.js integration
- *
- * This file is designed to be imported in:
- * - Next.js 15.3+: instrumentation-client.ts at project root
- * - Next.js 14.x / Pages Router: top of _app.tsx (must be first import)
- *
- * IMPORTANT: This file MUST be imported BEFORE React loads to properly
- * install Bippy's React DevTools hook.
- *
- * Usage:
- * ```typescript
- * // instrumentation-client.ts (Next.js 15.3+)
- * import 'uidog-sdk-next/client';
- * ```
- *
- * ```typescript
- * // pages/_app.tsx (Next.js 14.x / Pages Router)
- * import 'uidog-sdk-next/client'; // MUST be first import
- * import type { AppProps } from 'next/app';
- * // ... rest of your imports
- * ```
- */
-
-/**
- * Configure UiDog options before initialization
- * Call this before auto-initialization happens (at DOMContentLoaded)
- */
-declare function configureUiDogNext(options: UiDogNextOptions): void;
-/**
- * Disable auto-initialization
- * Use this if you want to manually initialize UiDog later
- */
-declare function disableAutoInit(): void;
-
-export { UiDogNextOptions, configureUiDogNext, disableAutoInit, initializeUiDogNext };

package/dist/client/index.d.ts

@@ -1,110 +0,0 @@
-type ElementInfoKind = "source" | "dom";
-interface DomSnapshot {
-    outerHTML: string;
-    text: string;
-    attributes: Record<string, string>;
-}
-interface ElementInfo {
-    kind: ElementInfoKind;
-    componentName?: string;
-    filePath?: string;
-    line?: number;
-    column?: number;
-    domSnapshot?: DomSnapshot;
-    box?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-}
-type EditorType = "vscode" | "vscode-insiders" | "cursor" | "webstorm" | "atom" | "sublime";
-interface UiDogNextOptions {
-    /**
-     * Editor to open when clicking elements
-     * @default 'cursor'
-     */
-    editor?: EditorType;
-    /**
-     * Project root path for resolving file paths
-     */
-    projectPath?: string;
-    /**
-     * Modifier key for element selection
-     * @default 'alt'
-     */
-    modifier?: "alt" | "ctrl" | "meta" | "shift";
-    /**
-     * Enable sidebar mode
-     * @default true
-     */
-    enableSidebar?: boolean;
-    /**
-     * API endpoint for edit requests
-     * @default 'https://api.ui.dog'
-     */
-    apiEndpoint?: string;
-}
-declare global {
-    interface Window {
-        __UIDOG_NEXT_INITIALIZED__?: boolean;
-        __UIDOG_SIDEBAR__?: {
-            isOpen: boolean;
-            elementInfo: ElementInfo | null;
-            editorUrl: string | null;
-        };
-    }
-}
-
-/**
- * UiDog SDK for Next.js - Main entry point
- *
- * Uses Bippy to hook into React's internals for element source detection,
- * providing a seamless developer experience for inspecting component locations.
- */
-
-/**
- * Initialize UiDog for Next.js
- *
- * This function sets up Bippy instrumentation, element detection, and the sidebar UI.
- * It should be called early in your application's lifecycle, ideally via
- * instrumentation-client.ts (Next.js 15.3+) or at the top of _app.tsx.
- */
-declare function initializeUiDogNext(options?: UiDogNextOptions): void;
-
-/**
- * Client entry point for UiDog Next.js integration
- *
- * This file is designed to be imported in:
- * - Next.js 15.3+: instrumentation-client.ts at project root
- * - Next.js 14.x / Pages Router: top of _app.tsx (must be first import)
- *
- * IMPORTANT: This file MUST be imported BEFORE React loads to properly
- * install Bippy's React DevTools hook.
- *
- * Usage:
- * ```typescript
- * // instrumentation-client.ts (Next.js 15.3+)
- * import 'uidog-sdk-next/client';
- * ```
- *
- * ```typescript
- * // pages/_app.tsx (Next.js 14.x / Pages Router)
- * import 'uidog-sdk-next/client'; // MUST be first import
- * import type { AppProps } from 'next/app';
- * // ... rest of your imports
- * ```
- */
-
-/**
- * Configure UiDog options before initialization
- * Call this before auto-initialization happens (at DOMContentLoaded)
- */
-declare function configureUiDogNext(options: UiDogNextOptions): void;
-/**
- * Disable auto-initialization
- * Use this if you want to manually initialize UiDog later
- */
-declare function disableAutoInit(): void;
-
-export { UiDogNextOptions, configureUiDogNext, disableAutoInit, initializeUiDogNext };