fixdog 0.0.1

package/src/styles/sidebarStyles.ts

@@ -0,0 +1,597 @@
+// This file exports the CSS content as a string for shadow DOM injection
+const sidebarStyles = `/* UiDog Sidebar Styles */
+
+/* Overlay */
+.uidog-sidebar-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999999;
+  pointer-events: none;
+}
+
+/* Main Sidebar Container */
+.uidog-sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 420px;
+  max-width: 100vw;
+  height: 100vh;
+  background: #13140a;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  color: #ffffff;
+  pointer-events: auto;
+  animation: uidog-slide-in 0.3s ease-out;
+  overflow: hidden;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@keyframes uidog-slide-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Header */
+.uidog-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
+}
+
+.uidog-sidebar-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+  letter-spacing: -0.01em;
+}
+
+.uidog-close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  font-size: 28px;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.uidog-close-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+/* Content Area */
+.uidog-sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.uidog-sidebar-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.uidog-sidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.uidog-sidebar-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.uidog-sidebar-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Element Info Section */
+.uidog-element-info-section {
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.2);
+  margin-top: 0;
+  padding-top: 20px;
+}
+
+/* Element Info Section */
+.uidog-element-info {
+  margin-bottom: 0;
+}
+
+.uidog-element-info-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.uidog-element-info-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.uidog-toggle-view-btn {
+  padding: 6px 14px;
+  font-size: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.uidog-toggle-view-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.uidog-element-info-content {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.uidog-file-location {
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 13px;
+  color: #ffffff;
+  word-break: break-word;
+}
+
+.uidog-info-row {
+  display: flex;
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
+.uidog-info-row:last-of-type {
+  margin-bottom: 0;
+}
+
+.uidog-info-row:last-child {
+  margin-bottom: 0;
+}
+
+.uidog-info-label {
+  flex-shrink: 0;
+  width: 100px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 13px;
+}
+
+.uidog-info-value {
+  flex: 1;
+  color: #ffffff;
+  word-break: break-word;
+  font-size: 13px;
+}
+
+.uidog-component-name {
+  font-weight: 600;
+  color: #60a5fa;
+}
+
+.uidog-file-path {
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.uidog-dom-snapshot {
+  margin-top: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.uidog-dom-label {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.uidog-dom-snippet {
+  margin: 0;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  padding: 10px;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.uidog-dom-attributes ul {
+  margin: 6px 0 0 0;
+  padding-left: 16px;
+  color: rgba(255, 255, 255, 0.85);
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.uidog-dom-attributes code {
+  background: rgba(255, 255, 255, 0.08);
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.uidog-dom-hint {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.uidog-mono {
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.uidog-detailed-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.uidog-code-preview {
+  flex-direction: column;
+}
+
+.uidog-code-placeholder {
+  margin-top: 6px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Chat Container */
+.uidog-chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* Messages Container */
+.uidog-messages-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 20px 24px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.uidog-dom-banner {
+  margin-bottom: 12px;
+  padding: 12px 14px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.uidog-messages-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.uidog-messages-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.uidog-messages-container::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.uidog-messages-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Empty State */
+.uidog-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+}
+
+.uidog-empty-state-text {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+  text-align: center;
+}
+
+/* Messages */
+.uidog-message {
+  margin-bottom: 16px;
+  display: flex;
+  animation: uidog-message-fade-in 0.2s ease-out;
+}
+
+@keyframes uidog-message-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.uidog-message-user {
+  justify-content: flex-end;
+}
+
+.uidog-message-assistant {
+  justify-content: flex-start;
+}
+
+/* Message Bubbles */
+.uidog-message-bubble {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.uidog-message-user .uidog-message-bubble {
+  background: rgba(59, 130, 246, 0.2);
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  color: #93c5fd;
+}
+
+.uidog-message-assistant .uidog-message-bubble {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.uidog-message-content {
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 14px;
+}
+
+.uidog-message-content.uidog-message-error {
+  color: #fca5a5;
+}
+
+/* Loading Message */
+.uidog-message-loading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+}
+
+.uidog-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  animation: uidog-spin 0.8s linear infinite;
+}
+
+.uidog-spinner-small {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: uidog-spin 0.8s linear infinite;
+}
+
+@keyframes uidog-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Fixed Input Footer */
+.uidog-input-footer-fixed {
+  flex-shrink: 0;
+  padding: 16px 24px;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.uidog-input-wrapper {
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.uidog-textarea {
+  width: 100%;
+  padding: 10px 60px 10px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  min-height: 44px;
+  max-height: 200px;
+  background: rgba(0, 0, 0, 0.4);
+  color: #ffffff;
+  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  overflow-y: auto;
+}
+
+.uidog-textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.uidog-textarea:focus {
+  outline: none;
+  border-color: #60a5fa;
+  background: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
+}
+
+.uidog-textarea:disabled {
+  background: rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+
+.uidog-submit-btn {
+  position: absolute;
+  bottom: 10px;
+  right: 6px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #3b82f6;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.uidog-submit-btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.uidog-submit-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.uidog-submit-btn:disabled {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.3);
+  cursor: not-allowed;
+}
+
+.uidog-submit-btn svg {
+  stroke: currentColor;
+}
+
+.uidog-input-hint {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  margin-top: 4px;
+}
+
+.uidog-retry-btn {
+  margin-top: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #ef4444;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.uidog-retry-btn:hover {
+  background: #dc2626;
+}
+
+/* Footer */
+.uidog-sidebar-footer {
+  padding: 16px 24px;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.3);
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.uidog-footer-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.uidog-footer-link {
+  color: #60a5fa;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.uidog-footer-link:hover {
+  text-decoration: underline;
+  color: #93c5fd;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .uidog-sidebar {
+    width: 100vw;
+  }
+}`;
+
+export default sidebarStyles;

package/src/types/css.d.ts

@@ -0,0 +1,9 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.css?inline" {
+  const content: string;
+  export default content;
+}

package/src/types/sidebar.ts

@@ -0,0 +1,56 @@
+export interface ElementInfo {
+  componentName: string;
+  filePath: string;
+  line: number;
+  column: number;
+  box?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  code?: string;
+}
+
+export interface SidebarState {
+  isOpen: boolean;
+  elementInfo: ElementInfo | null;
+  editorUrl: string | null;
+}
+
+export type ViewMode = "minimal" | "detailed";
+
+export interface ApiConfig {
+  endpoint: string;
+  timeout?: number;
+}
+
+export interface UiDogSidebarEvent {
+  editorUrl: string;
+  linkProps?: {
+    filePath: string;
+    projectPath: string;
+    line: number;
+    column: number;
+  };
+}
+
+declare global {
+  interface Window {
+    __UIDOG_SIDEBAR__?: {
+      isOpen: boolean;
+      currentElement: any;
+      editorUrl: string | null;
+    };
+    __UIDOG_LAST_ELEMENT__?: {
+      filePath: string;
+      projectPath: string;
+      line: number;
+      column: number;
+    };
+  }
+
+  interface WindowEventMap {
+    "uidog:open-sidebar": CustomEvent<UiDogSidebarEvent>;
+  }
+}