angular-grab-monorepo 0.1.3

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

@@ -0,0 +1,79 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-19-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/angular-19-app",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "polyfills": [
+              "zone.js"
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-19-app:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-19-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+{
+  "name": "angular-19-app",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "angular-grab": "^0.1.3",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "typescript": "~5.6.0"
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideAngularGrab } from 'angular-grab/angular';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAngularGrab(),
+  ],
+};

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

@@ -0,0 +1,37 @@
+.main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.hero {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.hero h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 12px;
+}
+
+.hero p {
+  color: #64748b;
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
+.hero kbd {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}

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

@@ -0,0 +1,25 @@
+<app-header />
+
+<main class="main">
+  <section class="hero">
+    <h1>angular-grab Demo</h1>
+    <p>Hold <kbd>⌘C</kbd> (Mac) or <kbd>Ctrl+C</kbd> (Windows) and hover over any element to grab its context for AI coding agents.</p>
+  </section>
+
+  <section class="cards">
+    <app-card
+      title="Element Picker"
+      body="Hover over any UI element while holding the activation key. A blue overlay highlights the element under your cursor."
+    />
+    <app-card
+      title="Component Resolution"
+      body="angular-grab uses Angular's debug APIs to identify which component owns each element, including the component class name."
+    />
+    <app-card
+      title="Source Mapping"
+      body="The esbuild plugin injects data-ng-source attributes at build time, mapping each component to its source file and line number."
+    />
+  </section>
+
+  <app-popover />
+</main>

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

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

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

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('angular-grab Demo');
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { HeaderComponent } from './header/header.component';
+import { CardComponent } from './card/card.component';
+import { PopoverComponent } from './popover/popover.component';
+
+@Component({
+  selector: 'app-root',
+  imports: [HeaderComponent, CardComponent, PopoverComponent],
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+})
+export class App {}

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

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  template: `
+    <button class="btn" type="button">{{ label }}</button>
+  `,
+  styles: [`
+    .btn {
+      padding: 8px 16px;
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: #2563eb; }
+  `],
+})
+export class ButtonComponent {
+  @Input() label = 'Click me';
+}

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

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  template: `
+    <div class="card">
+      <h2 class="card-title">{{ title }}</h2>
+      <p class="card-body">{{ body }}</p>
+      <div class="card-footer">
+        <app-button [label]="'Learn More'" />
+      </div>
+    </div>
+  `,
+  styles: [`
+    .card {
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      padding: 20px;
+      background: white;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .card-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
+    .card-body { color: #64748b; margin: 0 0 16px; line-height: 1.5; }
+    .card-footer { display: flex; justify-content: flex-end; }
+  `],
+  imports: [ButtonComponent],
+})
+export class CardComponent {
+  @Input() title = '';
+  @Input() body = '';
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "angular-grab-monorepo",
+  "version": "0.1.3",
+  "description": "Grab any element in your Angular app and give it to AI coding agents",
+  "author": "Nate Richardson <hello@naterichardson.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "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": {
+    "@types/node": "^25.3.4",
+    "turbo": "^2.8.13"
+  }
+}

package/packages/angular-grab/builders.json

@@ -0,0 +1,14 @@
+{
+  "builders": {
+    "application": {
+      "implementation": "./dist/builder/builders/application/index",
+      "schema": "./dist/builder/builders/application/schema.json",
+      "description": "Build an Angular application with angular-grab source injection"
+    },
+    "dev-server": {
+      "implementation": "./dist/builder/builders/dev-server/index",
+      "schema": "./dist/builder/builders/dev-server/schema.json",
+      "description": "Serve an Angular application with angular-grab source injection"
+    }
+  }
+}