@naylabs/agent-lens 0.0.0-stage → 0.1.0

package/dist/styles/arc-theme.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Arc UI CSS - Injected directly into the Shadow Root for complete isolation.
+ * Strictly implements Arc Browser aesthetics: frosted obsidian glass, tactile pills,
+ * luminous neon-pastel gradients, pure SVG line iconography, and zero emojis.
+ */
+export declare const ARC_THEME_CSS = "\n:host {\n  all: initial;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  z-index: 2147483647;\n  font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #F4F4F5;\n  box-sizing: border-box;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n/* Arc Design System Tokens */\n:host {\n  --arc-gradient: linear-gradient(135deg, #FF6EA7 0%, #A855F7 50%, #38BDF8 100%);\n  --arc-gradient-subtle: linear-gradient(135deg, rgba(255, 110, 167, 0.12) 0%, rgba(168, 85, 247, 0.12) 50%, rgba(56, 189, 248, 0.12) 100%);\n  --arc-cyan: #38BDF8;\n  --arc-purple: #A855F7;\n  --arc-pink: #FF6EA7;\n  --arc-glass-bg: rgba(18, 18, 24, 0.88);\n  --arc-glass-surface: rgba(28, 28, 36, 0.72);\n  --arc-glass-hover: rgba(42, 42, 54, 0.85);\n  --arc-border: rgba(255, 255, 255, 0.1);\n  --arc-border-highlight: rgba(255, 255, 255, 0.22);\n  --arc-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  --arc-shadow-hover: 0 20px 48px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.18);\n  --arc-radius-pill: 9999px;\n  --arc-radius-card: 16px;\n}\n\n/* Loom / Intercom Floating Trigger Button (Bottom Right) */\n.arc-launcher-btn {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: var(--arc-glass-bg);\n  backdrop-filter: blur(28px) saturate(190%);\n  -webkit-backdrop-filter: blur(28px) saturate(190%);\n  border: 1px solid var(--arc-border);\n  box-shadow: var(--arc-shadow);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #FFFFFF;\n  cursor: pointer;\n  pointer-events: auto;\n  user-select: none;\n  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n  z-index: 2147483647;\n}\n\n.arc-launcher-btn:hover {\n  transform: translateY(-2px) scale(1.04);\n  border-color: var(--arc-border-highlight);\n  box-shadow: var(--arc-shadow-hover);\n}\n\n.arc-launcher-btn:active {\n  transform: translateY(0) scale(0.96);\n}\n\n.arc-launcher-badge {\n  position: absolute;\n  top: -3px;\n  right: -3px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--arc-radius-pill);\n  background: var(--arc-gradient);\n  color: #FFFFFF;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.6);\n}\n\n/* Arc Expanded Dock / Toolbar (Docked at Bottom-Right) */\n.arc-dock {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 8px;\n  background: var(--arc-glass-bg);\n  backdrop-filter: blur(28px) saturate(190%);\n  -webkit-backdrop-filter: blur(28px) saturate(190%);\n  border: 1px solid var(--arc-border);\n  border-radius: var(--arc-radius-pill);\n  box-shadow: var(--arc-shadow);\n  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  pointer-events: auto;\n  user-select: none;\n  z-index: 2147483647;\n}\n\n.arc-dock:hover {\n  border-color: var(--arc-border-highlight);\n  box-shadow: var(--arc-shadow-hover);\n}\n\n/* Brand Pill */\n.arc-brand-pill {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--arc-radius-pill);\n  background: rgba(255, 255, 255, 0.04);\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: #FFFFFF;\n}\n\n.arc-brand-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--arc-gradient);\n  box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);\n  animation: arc-pulse 2s infinite ease-in-out;\n}\n\n@keyframes arc-pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n/* Tactile Pill Buttons */\n.arc-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 12px;\n  background: var(--arc-glass-surface);\n  border: 1px solid var(--arc-border);\n  border-radius: var(--arc-radius-pill);\n  color: #D4D4D8;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);\n  outline: none;\n  user-select: none;\n}\n\n.arc-btn:hover {\n  background: var(--arc-glass-hover);\n  color: #FFFFFF;\n  border-color: var(--arc-border-highlight);\n  transform: translateY(-1px);\n}\n\n.arc-btn:active {\n  transform: translateY(1px) scale(0.98);\n}\n\n.arc-btn-active {\n  background: var(--arc-gradient);\n  color: #FFFFFF;\n  border-color: rgba(255, 255, 255, 0.3);\n  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.45);\n}\n\n.arc-btn-active:hover {\n  filter: brightness(1.08);\n}\n\n.arc-btn-gradient {\n  background: var(--arc-gradient);\n  color: #FFFFFF;\n  border: 1px solid rgba(255, 255, 255, 0.25);\n  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.35);\n}\n\n.arc-btn-gradient:hover {\n  filter: brightness(1.1);\n  transform: translateY(-1px);\n}\n\n.arc-btn-success {\n  background: #10B981;\n  color: #FFFFFF;\n  border-color: rgba(255, 255, 255, 0.3);\n  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4);\n}\n\n.arc-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 5px;\n  border-radius: var(--arc-radius-pill);\n  font-size: 10px;\n  font-weight: 600;\n  background: rgba(255, 255, 255, 0.12);\n  color: #FFFFFF;\n}\n\n/* Hover Inspector Overlay */\n.arc-inspect-box {\n  position: fixed;\n  pointer-events: none;\n  z-index: 2147483640;\n  border: 1.5px solid var(--arc-cyan);\n  background: rgba(56, 189, 248, 0.06);\n  border-radius: 4px;\n  transition: all 0.08s ease-out;\n  box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);\n}\n\n.arc-inspect-label {\n  position: absolute;\n  top: -26px;\n  left: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 8px;\n  background: rgba(14, 14, 18, 0.94);\n  backdrop-filter: blur(12px);\n  border: 1px solid rgba(56, 189, 248, 0.5);\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--arc-cyan);\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n\n.arc-inspect-label .size {\n  color: #A1A1AA;\n  font-weight: 400;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  font-size: 10px;\n}\n\n/* Numbered Pin Badges */\n.arc-pin-marker {\n  position: absolute;\n  z-index: 2147483642;\n  width: 26px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: var(--arc-gradient);\n  color: #FFFFFF;\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n  pointer-events: auto;\n  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.9);\n  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;\n  transform: translate(-50%, -50%);\n  user-select: none;\n}\n\n.arc-pin-marker:hover {\n  transform: translate(-50%, -50%) scale(1.15);\n  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.75), 0 0 0 2px #FFFFFF;\n}\n\n.arc-pin-marker.active {\n  transform: translate(-50%, -50%) scale(1.2);\n  box-shadow: 0 8px 22px rgba(255, 110, 167, 0.8), 0 0 0 2.5px #FFFFFF;\n}\n\n/* Figma-style Comment Popover */\n.arc-popover {\n  position: absolute;\n  z-index: 2147483645;\n  width: 320px;\n  background: var(--arc-glass-bg);\n  backdrop-filter: blur(32px) saturate(200%);\n  -webkit-backdrop-filter: blur(32px) saturate(200%);\n  border: 1px solid var(--arc-border);\n  border-radius: var(--arc-radius-card);\n  padding: 14px;\n  box-shadow: var(--arc-shadow-hover);\n  pointer-events: auto;\n  animation: arc-pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes arc-pop-in {\n  from { opacity: 0; transform: translateY(6px) scale(0.96); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.arc-popover-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.arc-component-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 8px;\n  border-radius: var(--arc-radius-pill);\n  background: rgba(56, 189, 248, 0.12);\n  border: 1px solid rgba(56, 189, 248, 0.28);\n  color: var(--arc-cyan);\n  font-size: 11px;\n  font-weight: 600;\n  max-width: 230px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Category Chips (Clean Text, No Emojis) */\n.arc-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n  margin-bottom: 10px;\n}\n\n.arc-chip {\n  padding: 3px 9px;\n  border-radius: var(--arc-radius-pill);\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid var(--arc-border);\n  font-size: 11px;\n  font-weight: 500;\n  color: #A1A1AA;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.arc-chip:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #FFFFFF;\n}\n\n.arc-chip.selected {\n  background: var(--arc-gradient);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #FFFFFF;\n  font-weight: 600;\n}\n\n/* Comment Input */\n.arc-textarea {\n  width: 100%;\n  height: 76px;\n  padding: 10px 12px;\n  background: rgba(0, 0, 0, 0.32);\n  border: 1px solid var(--arc-border);\n  border-radius: 10px;\n  color: #F4F4F5;\n  font-size: 12px;\n  line-height: 1.5;\n  resize: none;\n  outline: none;\n  transition: border-color 0.15s ease;\n  font-family: inherit;\n}\n\n.arc-textarea:focus {\n  border-color: var(--arc-purple);\n  box-shadow: 0 0 0 1px var(--arc-purple);\n}\n\n.arc-textarea::placeholder {\n  color: #71717A;\n}\n\n/* Popover Footer */\n.arc-popover-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 10px;\n}\n\n.arc-btn-icon {\n  width: 30px;\n  height: 30px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid var(--arc-border);\n  color: #A1A1AA;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.arc-btn-icon:hover {\n  background: rgba(255, 255, 255, 0.12);\n  color: #FFFFFF;\n}\n\n.arc-btn-icon.danger:hover {\n  background: rgba(239, 68, 68, 0.2);\n  border-color: rgba(239, 68, 68, 0.4);\n  color: #EF4444;\n}\n\n/* Slide-up Tray (Docked at Bottom-Right above Launcher) */\n.arc-tray {\n  position: fixed;\n  bottom: 76px;\n  right: 24px;\n  width: 380px;\n  max-width: 90vw;\n  max-height: 360px;\n  background: var(--arc-glass-bg);\n  backdrop-filter: blur(32px) saturate(200%);\n  -webkit-backdrop-filter: blur(32px) saturate(200%);\n  border: 1px solid var(--arc-border);\n  border-radius: var(--arc-radius-card);\n  padding: 14px;\n  box-shadow: var(--arc-shadow-hover);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  pointer-events: auto;\n  animation: arc-pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n  z-index: 2147483646;\n}\n\n.arc-tray-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--arc-border);\n}\n\n.arc-tray-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.arc-tray-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  max-height: 250px;\n  padding-right: 2px;\n}\n\n.arc-tray-list::-webkit-scrollbar {\n  width: 4px;\n}\n\n.arc-tray-list::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 4px;\n}\n\n.arc-tray-item {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 8px 10px;\n  background: rgba(255, 255, 255, 0.04);\n  border: 1px solid var(--arc-border);\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.arc-tray-item:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: var(--arc-border-highlight);\n}\n\n.arc-tray-item-left {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.arc-tray-pin-num {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--arc-gradient);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: 700;\n  color: #FFFFFF;\n  flex-shrink: 0;\n}\n\n.arc-tray-item-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.arc-tray-item-meta {\n  font-size: 11px;\n  color: var(--arc-cyan);\n  font-weight: 600;\n  margin-bottom: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.arc-tray-item-text {\n  font-size: 11px;\n  color: #E4E4E7;\n  line-height: 1.4;\n  word-break: break-word;\n}\n";

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+export type PinCategory = 'style' | 'copy' | 'layout' | 'motion' | 'bug' | 'general';
+export interface ComputedStyleMetrics {
+    display?: string;
+    flexDirection?: string;
+    gridTemplateColumns?: string;
+    gap?: string;
+    padding?: string;
+    margin?: string;
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    color?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    borderRadius?: string;
+    border?: string;
+}
+export interface ElementMetadata {
+    componentName?: string | null;
+    sourceFile?: string | null;
+    selector: string;
+    tagName: string;
+    classes: string;
+    textSnippet?: string | null;
+    rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    computedStyles: ComputedStyleMetrics;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    route: string;
+}
+export interface AgentPin {
+    id: string;
+    number: number;
+    targetElement: HTMLElement;
+    category: PinCategory;
+    instruction: string;
+    createdAt: number;
+    metadata: ElementMetadata;
+}
+export interface AgentLensProps {
+    /** Shortcut to toggle inspect mode (default: 'meta+shift+f' or 'c') */
+    shortcut?: string;
+    /** Position of the floating dock */
+    position?: 'bottom-center' | 'bottom-right' | 'top-right';
+    /** Default category for new pins */
+    defaultCategory?: PinCategory;
+    /** Callback fired when a prompt is generated */
+    onPromptCopied?: (promptText: string, pinCount: number) => void;
+}

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@naylabs/agent-lens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Figma-style visual review canvas designed for AI coding agents. Inspect, pin, comment, and copy structured execution prompts.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "type": "commonjs",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build && node -e \"require('fs').copyFileSync('dist/index.d.ts', 'dist/index.d.mts')\"",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Skn1999/agent-lens.git"
+  },
+  "keywords": [
+    "ai",
+    "devtools",
+    "agent",
+    "visual-feedback",
+    "figma",
+    "react",
+    "review",
+    "annotation",
+    "prompt-engineering"
+  ],
+  "homepage": "https://github.com/Skn1999/agent-lens#readme",
+  "bugs": {
+    "url": "https://github.com/Skn1999/agent-lens/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Sumit Nayyar",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^5.1.2"
+  }
+}