sonance-brand-mcp 1.3.14 → 1.3.16

package/dist/assets/dev-tools/components/VisionDiffPreview.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { X, Eye, Loader2, Save, ChevronDown, ChevronRight, FileCode, AlertCircle } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { VisionPendingEdit, VisionFileModification } from "../types";
+
+export interface VisionDiffPreviewProps {
+  pendingEdit: VisionPendingEdit;
+  onSave: () => void;
+  onCancel: () => void;
+  saveStatus?: "idle" | "saving" | "success" | "error";
+}
+
+function FileModificationCard({
+  modification,
+  isExpanded,
+  onToggle,
+}: {
+  modification: VisionFileModification;
+  isExpanded: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div className="border border-gray-200 rounded bg-white overflow-hidden">
+      {/* File Header */}
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center gap-2 p-2 hover:bg-gray-50 transition-colors text-left"
+      >
+        {isExpanded ? (
+          <ChevronDown className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
+        ) : (
+          <ChevronRight className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
+        )}
+        <FileCode className="h-3.5 w-3.5 text-purple-500 flex-shrink-0" />
+        <span className="text-xs font-mono text-gray-700 truncate flex-1">
+          {modification.filePath}
+        </span>
+      </button>
+
+      {/* Explanation */}
+      <div className="px-2 pb-2">
+        <p className="text-[10px] text-gray-500">{modification.explanation}</p>
+      </div>
+
+      {/* Expanded Diff */}
+      {isExpanded && (
+        <div className="border-t border-gray-100">
+          <div className="max-h-60 overflow-auto">
+            <pre className="p-2 text-[10px] font-mono whitespace-pre-wrap">
+              {modification.diff.split("\n").map((line, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    line.startsWith("+") && !line.startsWith("@@")
+                      ? "bg-green-50 text-green-700"
+                      : line.startsWith("-") && !line.startsWith("@@")
+                      ? "bg-red-50 text-red-700"
+                      : line.startsWith("@@")
+                      ? "bg-blue-50 text-blue-600 font-semibold"
+                      : "text-gray-600"
+                  )}
+                >
+                  {line || " "}
+                </div>
+              ))}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function VisionDiffPreview({
+  pendingEdit,
+  onSave,
+  onCancel,
+  saveStatus = "idle",
+}: VisionDiffPreviewProps) {
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+
+  // Expand first file by default
+  useEffect(() => {
+    if (pendingEdit.modifications.length > 0) {
+      setExpandedFiles(new Set([pendingEdit.modifications[0].filePath]));
+    }
+  }, [pendingEdit]);
+
+  const toggleFile = (filePath: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  };
+
+  const fileCount = pendingEdit.modifications.length;
+
+  return (
+    <div className="space-y-3 p-3 rounded border border-purple-300 bg-purple-50">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Eye className="h-4 w-4 text-purple-600" />
+          <span className="text-xs font-semibold text-gray-900">
+            Vision Mode Changes Ready
+          </span>
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-200 text-purple-700 font-medium">
+            {fileCount} file{fileCount !== 1 ? "s" : ""}
+          </span>
+        </div>
+        <button
+          onClick={onCancel}
+          className="text-gray-400 hover:text-gray-600"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Overall Explanation */}
+      <p className="text-xs text-gray-600">{pendingEdit.explanation}</p>
+
+      {/* File Modifications List */}
+      <div className="space-y-2 max-h-80 overflow-y-auto">
+        {pendingEdit.modifications.map((mod) => (
+          <FileModificationCard
+            key={mod.filePath}
+            modification={mod}
+            isExpanded={expandedFiles.has(mod.filePath)}
+            onToggle={() => toggleFile(mod.filePath)}
+          />
+        ))}
+      </div>
+
+      {/* Live Preview Indicator */}
+      <div className="flex items-center gap-2 p-2 rounded bg-purple-100 border border-purple-200">
+        <Eye className="h-3.5 w-3.5 text-purple-600" />
+        <span className="text-xs text-purple-700">
+          Live preview active - scroll to see changes on the page
+        </span>
+      </div>
+
+      {/* Warning about multiple files */}
+      {fileCount > 1 && (
+        <div className="flex items-start gap-2 p-2 rounded bg-amber-50 border border-amber-200">
+          <AlertCircle className="h-3.5 w-3.5 text-amber-600 mt-0.5 flex-shrink-0" />
+          <span className="text-xs text-amber-700">
+            Multiple files will be modified. Review each file before saving.
+          </span>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex gap-2">
+        {/* Save All Button */}
+        <button
+          onClick={onSave}
+          disabled={saveStatus === "saving"}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 py-2.5",
+            "text-xs font-medium rounded transition-colors",
+            "bg-purple-600 text-white hover:bg-purple-700",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {saveStatus === "saving" ? (
+            <>
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              Saving {fileCount} file{fileCount !== 1 ? "s" : ""}...
+            </>
+          ) : (
+            <>
+              <Save className="h-3.5 w-3.5" />
+              Save All Changes
+            </>
+          )}
+        </button>
+        {/* Cancel Button */}
+        <button
+          onClick={onCancel}
+          disabled={saveStatus === "saving"}
+          className={cn(
+            "px-4 py-2.5 text-xs font-medium rounded transition-colors",
+            "border border-gray-200 text-gray-600 hover:bg-gray-50",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}

package/dist/assets/dev-tools/components/VisionModeBorder.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Eye } from "lucide-react";
+
+interface VisionModeBorderProps {
+  active: boolean;
+  focusedCount?: number;
+}
+
+export function VisionModeBorder({ active, focusedCount = 0 }: VisionModeBorderProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!active || !mounted) return null;
+
+  return createPortal(
+    <>
+      {/* CSS animation keyframes */}
+      <style>{`
+        @keyframes vision-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.7; }
+        }
+        @keyframes vision-glow {
+          0%, 100% {
+            box-shadow: inset 0 0 30px rgba(139, 92, 246, 0.3),
+                        0 0 30px rgba(139, 92, 246, 0.3);
+          }
+          50% {
+            box-shadow: inset 0 0 50px rgba(139, 92, 246, 0.4),
+                        0 0 50px rgba(139, 92, 246, 0.4);
+          }
+        }
+      `}</style>
+
+      {/* Main border overlay */}
+      <div
+        data-vision-mode-border="true"
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          pointerEvents: "none",
+          zIndex: 9996, // Below DevTools (9999) but above content
+          border: "4px solid #8B5CF6",
+          boxShadow: "inset 0 0 30px rgba(139, 92, 246, 0.3), 0 0 30px rgba(139, 92, 246, 0.3)",
+          animation: "vision-pulse 2s ease-in-out infinite, vision-glow 2s ease-in-out infinite",
+        }}
+      >
+        {/* Corner indicator */}
+        <div
+          style={{
+            position: "absolute",
+            top: "12px",
+            left: "12px",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            backgroundColor: "#8B5CF6",
+            color: "white",
+            padding: "6px 12px",
+            borderRadius: "6px",
+            fontSize: "12px",
+            fontWeight: 600,
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)",
+          }}
+        >
+          <Eye size={14} />
+          <span>Vision Mode</span>
+          {focusedCount > 0 && (
+            <span
+              style={{
+                backgroundColor: "rgba(255, 255, 255, 0.2)",
+                padding: "2px 6px",
+                borderRadius: "4px",
+                marginLeft: "4px",
+              }}
+            >
+              {focusedCount} focused
+            </span>
+          )}
+        </div>
+
+        {/* Instruction hint at bottom */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: "12px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            backgroundColor: "rgba(139, 92, 246, 0.9)",
+            color: "white",
+            padding: "8px 16px",
+            borderRadius: "8px",
+            fontSize: "13px",
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            boxShadow: "0 2px 12px rgba(139, 92, 246, 0.5)",
+            whiteSpace: "nowrap",
+          }}
+        >
+          Click elements to focus AI attention, then describe your changes in the chat
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}

package/dist/assets/dev-tools/components/common.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Check, ChevronDown } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { isLightColor } from "../../../lib/brand-system";
+
+export function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-2">
+      <h3 id="section-h3-title" className="text-xs font-medium uppercase tracking-wide text-gray-400">
+        {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+export function ColorSwatch({
+  color,
+  name,
+  selected,
+  onClick,
+}: {
+  color: string;
+  name: string;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "relative h-7 w-7 rounded-full transition-all duration-150",
+        "focus:outline-none focus:ring-2 focus:ring-[#00A3E1] focus:ring-offset-1",
+        "focus:ring-offset-1",
+        selected && "ring-2 ring-[#333F48] ring-offset-2"
+      )}
+      style={{ backgroundColor: color }}
+      aria-label={name}
+      title={name}
+    >
+      {selected && (
+        <Check
+          className="absolute inset-0 m-auto h-3.5 w-3.5"
+          style={{
+            color: isLightColor(color) ? "#000" : "#fff",
+          }}
+        />
+      )}
+    </button>
+  );
+}
+
+export function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <span id="select-field-span-label" className="text-xs text-gray-500">{label}</span>
+      <div className="relative">
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={cn(
+            "h-7 pl-2 pr-7 text-xs font-medium rounded",
+            "border border-gray-200 bg-white text-gray-700",
+            "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]",
+            "cursor-pointer appearance-none"
+          )}
+        >
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-gray-400 pointer-events-none" />
+      </div>
+    </div>
+  );
+}