sparkecode-devtools 0.1.39 → 0.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkecode-devtools",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "description": "Sparkecode Dev Tools for selecting and sharing components.",
   "type": "module",
   "main": "sparkecode-select.js",

package/sparkecode-select.js

@@ -14,10 +14,13 @@
   
   const DEFAULT_CONFIG = {
     webhookUrl: null,
-    primaryColor: '#8b5cf6',
-    successColor: '#10b981',
-    bgColor: '#1e1e2e',
-    textColor: '#ffffff',
+    // Colors matched to SparkeCoder web dark theme
+    primaryColor: '#91AEFF',   // Focus Blue 200
+    successColor: '#10B981',   // Tests green
+    bgColor: '#171717',        // Card background
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    textColor: '#FAFAFA',      // Foreground
+    mutedColor: '#A3A3A3',     // Muted foreground
     sparkecoder: {
       enabled: false,
       apiBase: null,
@@ -458,27 +461,35 @@
   function createFloatingButton() {
     floatingButton = document.createElement('div');
     floatingButton.id = 'sparkecode-button';
-    floatingButton.innerHTML = `<span style="font-weight: 600; font-size: 13px;">SparkeCode Select</span>`;
+    // Clean pointer icon + text
+    floatingButton.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="flex-shrink: 0;">
+        <path d="M3 1.5L3 12.5L6.5 9L10 14L12 13L8.5 8L13 7.5L3 1.5Z"/>
+      </svg>
+      <span style="font-weight: 500; font-size: 12px;">SparkeCode Select</span>
+    `;
     floatingButton.style.cssText = `
       position: fixed;
       top: ${buttonPos.y}px;
       left: ${buttonPos.x}px;
-      height: 40px;
-      padding: 0 16px;
-      background: ${config.primaryColor};
-      border-radius: 10px;
+      height: 32px;
+      padding: 0 10px;
+      gap: 6px;
+      background: ${config.bgColor};
+      border: 1px solid ${config.borderColor};
+      border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: grab;
       z-index: 999998;
-      box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
-      transition: box-shadow 0.2s, background 0.2s;
-      color: white;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      transition: all 0.15s ease;
+      color: ${config.primaryColor};
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       user-select: none;
     `;
-    floatingButton.title = 'Drag to move • Click to toggle';
+    floatingButton.title = 'Click to toggle • Drag to move';
     
     // Drag handling
     floatingButton.addEventListener('mousedown', startDrag);
@@ -685,17 +696,18 @@
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%) translateY(10px);
-      background: ${config.successColor};
-      color: white;
-      padding: 12px 24px;
-      border-radius: 10px;
+      background: ${config.bgColor};
+      color: ${config.textColor};
+      padding: 10px 20px;
+      border-radius: 8px;
+      border: 1px solid ${config.borderColor};
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      font-weight: 600;
+      font-size: 13px;
+      font-weight: 500;
       z-index: 1000002;
       opacity: 0;
-      transition: all 0.2s ease;
-      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+      transition: all 0.15s ease;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
     `;
     toast.textContent = message;
     document.body.appendChild(toast);
@@ -746,16 +758,16 @@
       position: fixed;
       top: 20%;
       left: 50%;
-      transform: translateX(-50%) scale(0.95);
+      transform: translateX(-50%) scale(0.98);
       background: ${config.bgColor};
       border-radius: 12px;
       z-index: 1000003;
-      box-shadow: 0 16px 70px rgba(0,0,0,0.5);
-      border: 1px solid rgba(255,255,255,0.1);
+      box-shadow: 0 24px 80px rgba(0,0,0,0.6);
+      border: 1px solid ${config.borderColor};
       display: none;
       opacity: 0;
       transition: all 0.15s ease;
-      width: 500px;
+      width: 480px;
       max-width: calc(100vw - 32px);
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
@@ -765,15 +777,14 @@
     const tag = document.createElement('div');
     tag.id = 'sparkecode-prompt-tag';
     tag.style.cssText = `
-      padding: 10px 16px;
-      background: rgba(139, 92, 246, 0.1);
-      border-bottom: 1px solid rgba(255,255,255,0.05);
+      padding: 12px 16px;
+      border-bottom: 1px solid ${config.borderColor};
       font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-      font-size: 13px;
-      color: ${config.primaryColor};
+      font-size: 12px;
+      color: ${config.mutedColor};
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
     `;
     promptBar.appendChild(tag);
 
@@ -781,16 +792,18 @@
     const input = document.createElement('input');
     input.id = 'sparkecode-prompt-input';
     input.type = 'text';
-    input.placeholder = 'What do you want to do? (Enter to send, Esc to cancel)';
+    input.placeholder = 'What do you want to do?';
     input.style.cssText = `
       width: 100%;
       background: transparent;
       border: none;
-      padding: 16px;
+      padding: 14px 16px;
       color: ${config.textColor};
-      font-size: 16px;
+      font-size: 15px;
       outline: none;
     `;
+    input.setAttribute('autocomplete', 'off');
+    input.setAttribute('spellcheck', 'false');
     input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter') {
         e.preventDefault();
@@ -814,7 +827,7 @@
     // Update tag
     const tag = document.getElementById('sparkecode-prompt-tag');
     if (tag && componentInfo) {
-      tag.innerHTML = `<span style="opacity: 0.6;">Selected:</span> &lt;${componentInfo.name}&gt;`;
+      tag.innerHTML = `<span style="color: ${config.primaryColor};">&lt;${componentInfo.name}&gt;</span>`;
     }
 
     const input = document.getElementById('sparkecode-prompt-input');
@@ -1004,8 +1017,9 @@
     createOverlay();
     
     if (floatingButton) {
-      floatingButton.style.background = config.successColor;
-      floatingButton.style.boxShadow = '0 4px 20px rgba(16, 185, 129, 0.4)';
+      floatingButton.style.background = config.primaryColor;
+      floatingButton.style.color = '#171717';
+      floatingButton.style.borderColor = config.primaryColor;
     }
     
     document.addEventListener('mousemove', handleMouseMove, true);
@@ -1025,8 +1039,9 @@
     removeOverlay();
     
     if (floatingButton) {
-      floatingButton.style.background = config.primaryColor;
-      floatingButton.style.boxShadow = '0 4px 20px rgba(139, 92, 246, 0.4)';
+      floatingButton.style.background = config.bgColor;
+      floatingButton.style.color = config.primaryColor;
+      floatingButton.style.borderColor = config.borderColor;
     }
     
     document.removeEventListener('mousemove', handleMouseMove, true);