angular-grab 0.1.1 → 0.1.2

package/examples/angular-19-app/src/app/header/header.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  template: `
+    <header class="header">
+      <h1 class="header-title">angular-grab Demo</h1>
+      <nav class="header-nav">
+        <a href="#" class="nav-link">Home</a>
+        <a href="#" class="nav-link">About</a>
+        <a href="#" class="nav-link">Contact</a>
+      </nav>
+    </header>
+  `,
+  styles: [`
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 24px;
+      background: #1e293b;
+      color: white;
+    }
+    .header-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
+    .header-nav { display: flex; gap: 16px; }
+    .nav-link { color: #94a3b8; text-decoration: none; }
+    .nav-link:hover { color: white; }
+  `],
+})
+export class HeaderComponent {}

package/examples/angular-19-app/src/app/popover/popover.component.ts

@@ -0,0 +1,133 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-popover',
+  standalone: true,
+  template: `
+    <div class="popover-demo">
+      <h3 class="popover-heading">Freeze Mode Test</h3>
+      <p class="popover-desc">These elements disappear on mouse-out. Use freeze mode (<kbd>F</kbd>) to grab them.</p>
+
+      <div class="popover-row">
+        <div class="popover-trigger">
+          Hover for tooltip
+          <div class="popover-tooltip tooltip-style">
+            <strong>Tooltip content</strong>
+            <p>This disappears when you move your mouse away. Freeze the page first!</p>
+          </div>
+        </div>
+
+        <div class="dropdown-trigger">
+          Hover for dropdown ▾
+          <ul class="dropdown-menu dropdown-style">
+            <li class="dropdown-item">Dashboard</li>
+            <li class="dropdown-item">Settings</li>
+            <li class="dropdown-item">Profile</li>
+            <li class="dropdown-item highlighted">Sign out</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .popover-demo {
+      margin-top: 40px;
+      padding: 24px;
+      border: 1px dashed #cbd5e1;
+      border-radius: 8px;
+      background: #f8fafc;
+    }
+    .popover-heading { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
+    .popover-desc { color: #64748b; margin: 0 0 20px; line-height: 1.5; }
+    .popover-desc kbd {
+      background: #f1f5f9;
+      border: 1px solid #e2e8f0;
+      border-radius: 4px;
+      padding: 2px 6px;
+      font-family: monospace;
+      font-size: 0.9rem;
+    }
+    .popover-row {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+    }
+
+    /* Tooltip */
+    .popover-trigger {
+      position: relative;
+      padding: 10px 16px;
+      background: #3b82f6;
+      color: white;
+      border-radius: 6px;
+      cursor: default;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+    .popover-tooltip {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: #1e293b;
+      color: #e2e8f0;
+      padding: 12px 16px;
+      border-radius: 8px;
+      width: 220px;
+      font-size: 0.8rem;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+      z-index: 10;
+    }
+    .popover-tooltip strong { color: white; }
+    .popover-tooltip p { margin: 6px 0 0; line-height: 1.4; }
+    .popover-tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 6px solid transparent;
+      border-top-color: #1e293b;
+    }
+    .popover-trigger:hover .popover-tooltip { display: block; }
+
+    /* Dropdown */
+    .dropdown-trigger {
+      position: relative;
+      padding: 10px 16px;
+      background: white;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      cursor: default;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #334155;
+    }
+    .dropdown-menu {
+      display: none;
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      background: white;
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      list-style: none;
+      margin: 0;
+      padding: 4px 0;
+      min-width: 160px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      z-index: 10;
+    }
+    .dropdown-item {
+      padding: 8px 14px;
+      font-size: 0.85rem;
+      color: #334155;
+      cursor: pointer;
+    }
+    .dropdown-item:hover { background: #f1f5f9; }
+    .dropdown-item.highlighted { color: #ef4444; }
+    .dropdown-trigger:hover .dropdown-menu { display: block; }
+  `],
+})
+export class PopoverComponent {}

package/examples/angular-19-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Angular19App</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/examples/angular-19-app/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

package/examples/angular-19-app/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/examples/angular-19-app/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

package/examples/angular-19-app/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/examples/angular-19-app/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/package.json

@@ -1,119 +1,22 @@
 {
   "name": "angular-grab",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Grab any element in your Angular app and give it to AI coding agents",
-  "author": "Nate Richardson",
+  "author": "Nate Richardson <hello@naterichardson.com>",
   "license": "MIT",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
+  "engines": {
+    "node": ">=18"
   },
-  "main": "./dist/core/index.cjs",
-  "module": "./dist/core/index.js",
-  "types": "./dist/core/index.d.ts",
-  "bin": {
-    "angular-grab": "./dist/cli/index.js"
-  },
-  "builders": "./builders.json",
-  "exports": {
-    ".": {
-      "types": "./dist/core/index.d.ts",
-      "import": "./dist/core/index.js",
-      "require": "./dist/core/index.cjs"
-    },
-    "./global": "./dist/core/index.global.js",
-    "./angular": {
-      "types": "./dist/angular/index.d.ts",
-      "import": "./dist/angular/index.js"
-    },
-    "./esbuild": {
-      "types": "./dist/esbuild-plugin/index.d.ts",
-      "import": "./dist/esbuild-plugin/index.js",
-      "require": "./dist/esbuild-plugin/index.cjs"
-    },
-    "./vite": {
-      "types": "./dist/vite-plugin/index.d.ts",
-      "import": "./dist/vite-plugin/index.js"
-    },
-    "./webpack": {
-      "types": "./dist/webpack-plugin/index.d.ts",
-      "import": "./dist/webpack-plugin/index.js",
-      "require": "./dist/webpack-plugin/index.cjs"
-    },
-    "./webpack/loader": {
-      "import": "./dist/webpack-plugin/loader.js",
-      "require": "./dist/webpack-plugin/loader.cjs"
-    },
-    "./builder": {
-      "require": "./dist/builder/index.js"
-    },
-    "./builders.json": "./builders.json",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "builders.json"
-  ],
-  "peerDependencies": {
-    "@angular/core": ">=19.0.0",
-    "@angular/build": ">=18.0.0",
-    "@angular-devkit/architect": ">=0.1800.0",
-    "esbuild": ">=0.17.0",
-    "typescript": ">=5.0.0",
-    "vite": ">=5.0.0",
-    "webpack": ">=5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@angular/core": {
-      "optional": true
-    },
-    "@angular/build": {
-      "optional": true
-    },
-    "@angular-devkit/architect": {
-      "optional": true
-    },
-    "esbuild": {
-      "optional": true
-    },
-    "vite": {
-      "optional": true
-    },
-    "webpack": {
-      "optional": true
-    }
+  "packageManager": "pnpm@9.15.0",
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev",
+    "test": "turbo run test",
+    "lint": "turbo run lint",
+    "clean": "turbo run clean"
   },
   "devDependencies": {
-    "@angular/core": "^21.0.0",
-    "@angular/build": "^21.1.1",
-    "@angular-devkit/architect": "^0.2101.1",
-    "esbuild": "^0.21.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.4.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/naterchrdsn/angular-grab.git",
-    "directory": "packages/angular-grab"
-  },
-  "homepage": "https://github.com/naterchrdsn/angular-grab",
-  "bugs": "https://github.com/naterchrdsn/angular-grab/issues",
-  "keywords": [
-    "angular",
-    "angular-grab",
-    "element-picker",
-    "developer-tools",
-    "ai",
-    "esbuild",
-    "vite",
-    "webpack"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "clean": "rm -rf dist"
+    "@types/node": "^25.3.4",
+    "turbo": "^2.8.13"
   }
-}
+}

package/packages/angular-grab/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "angular-grab",
+  "version": "0.1.2",
+  "description": "Grab any element in your Angular app and give it to AI coding agents",
+  "author": "Nate Richardson",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/core/index.cjs",
+  "module": "./dist/core/index.js",
+  "types": "./dist/core/index.d.ts",
+  "bin": {
+    "angular-grab": "./dist/cli/index.js"
+  },
+  "builders": "./builders.json",
+  "exports": {
+    ".": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs"
+    },
+    "./global": "./dist/core/index.global.js",
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/index.js"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild-plugin/index.d.ts",
+      "import": "./dist/esbuild-plugin/index.js",
+      "require": "./dist/esbuild-plugin/index.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite-plugin/index.d.ts",
+      "import": "./dist/vite-plugin/index.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack-plugin/index.d.ts",
+      "import": "./dist/webpack-plugin/index.js",
+      "require": "./dist/webpack-plugin/index.cjs"
+    },
+    "./webpack/loader": {
+      "import": "./dist/webpack-plugin/loader.js",
+      "require": "./dist/webpack-plugin/loader.cjs"
+    },
+    "./builder": {
+      "require": "./dist/builder/index.js"
+    },
+    "./builders.json": "./builders.json",
+    "./package.json": "./package.json"
+  },
+  "files": ["dist", "builders.json", "README.md"],
+  "scripts": {
+    "prebuild": "cp ../../README.md .",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "clean": "rm -rf dist README.md"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=19.0.0",
+    "@angular/build": ">=18.0.0",
+    "@angular-devkit/architect": ">=0.1800.0",
+    "esbuild": ">=0.17.0",
+    "typescript": ">=5.0.0",
+    "vite": ">=5.0.0",
+    "webpack": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/core": { "optional": true },
+    "@angular/build": { "optional": true },
+    "@angular-devkit/architect": { "optional": true },
+    "esbuild": { "optional": true },
+    "vite": { "optional": true },
+    "webpack": { "optional": true }
+  },
+  "devDependencies": {
+    "@angular/core": "^21.0.0",
+    "@angular/build": "^21.1.1",
+    "@angular-devkit/architect": "^0.2101.1",
+    "esbuild": "^0.21.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0",
+    "vitest": "^2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/naterchrdsn/angular-grab.git",
+    "directory": "packages/angular-grab"
+  },
+  "homepage": "https://angular-grab.com",
+  "bugs": "https://github.com/naterchrdsn/angular-grab/issues",
+  "keywords": ["angular", "angular-grab", "element-picker", "developer-tools", "ai", "esbuild", "vite", "webpack"]
+}