inspector-ng 0.0.5 → 0.0.6

package/fesm2022/inspector-ng.mjs

@@ -277,14 +277,14 @@ class inspectorComponent {
         this.Math = Math;
         this.formatValue = formatValue;
         this.guideHitboxSize = GUIDE_HITBOX_SIZE;
-        this.overlayRoot = viewChild("overlayRoot");
-        this.highlightColor = "#4f8cff";
-        this.guideColor = "#ff7a00";
+        this.overlayRoot = viewChild('overlayRoot');
+        this.highlightColor = '#4f8cff';
+        this.guideColor = '#ff7a00';
         this.hoverHighlightEnabled = true;
         this.persistOnReload = false;
         this.enabled = signal(false);
-        this.toolMode = signal("none");
-        this.guideOrientation = signal("vertical");
+        this.toolMode = signal('none');
+        this.guideOrientation = signal('vertical');
         this.guides = signal([]);
         this.hoverRect = signal(null);
         this.selectedGuideId = signal(null);
@@ -298,13 +298,23 @@ class inspectorComponent {
         this.selectedMetaLine = computed(() => {
             const selected = this.selectedMeasurement();
             if (!selected) {
-                return "";
+                return '';
             }
             return `${selected.label} · ${formatValue(selected.rect.width)} x ${formatValue(selected.rect.height)} · ${selected.styles.fontSize} / ${selected.styles.lineHeight} / ${selected.styles.color}`;
         });
         this.hydrated = signal(false);
         this.history = signal([]);
         this.historyIndex = signal(-1);
+        this.handleCapturedClick = (event) => {
+            if (!event.shiftKey ||
+                !this.canInspectClick(event) ||
+                !this.selectElementAtPoint(event)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        };
         this.draggingGuideId = null;
         this.selectedElement = null;
         this.hoverElement = null;
@@ -331,7 +341,14 @@ class inspectorComponent {
         });
     }
     ngOnInit() {
-        if (!this.isBrowser || !this.persistOnReload) {
+        if (!this.isBrowser) {
+            this.hydrated.set(true);
+            return;
+        }
+        window.addEventListener('click', this.handleCapturedClick, {
+            capture: true,
+        });
+        if (!this.persistOnReload) {
             this.hydrated.set(true);
             return;
         }
@@ -357,11 +374,19 @@ class inspectorComponent {
         this.hydrated.set(true);
         this.refreshTypographyBlocks();
     }
+    ngOnDestroy() {
+        if (!this.isBrowser) {
+            return;
+        }
+        window.removeEventListener('click', this.handleCapturedClick, {
+            capture: true,
+        });
+    }
     setToolMode(mode) {
         if (!this.enabled()) {
             this.enabled.set(true);
         }
-        this.toolMode.set(this.toolMode() === mode ? "none" : mode);
+        this.toolMode.set(this.toolMode() === mode ? 'none' : mode);
         this.hoverRect.set(null);
         this.guidePreview.set(null);
         this.distanceOverlay.set(null);
@@ -397,11 +422,11 @@ class inspectorComponent {
     }
     handleKeydown(event) {
         const key = event.key.toLowerCase();
-        if (key === "m") {
+        if (key === 'm') {
             event.preventDefault();
             this.enabled.update((value) => !value);
             if (!this.enabled()) {
-                this.toolMode.set("none");
+                this.toolMode.set('none');
                 this.hoverRect.set(null);
                 this.selectedGuideId.set(null);
                 this.distanceOverlay.set(null);
@@ -414,37 +439,37 @@ class inspectorComponent {
         if (!this.enabled()) {
             return;
         }
-        if ((event.metaKey || event.ctrlKey) && key === "z") {
+        if ((event.metaKey || event.ctrlKey) && key === 'z') {
             event.preventDefault();
             event.shiftKey ? this.redo() : this.undo();
             return;
         }
-        if (key === "s") {
+        if (key === 's') {
             event.preventDefault();
-            this.setToolMode("select");
+            this.setToolMode('select');
             return;
         }
-        if (key === "g") {
+        if (key === 'g') {
             event.preventDefault();
-            this.setToolMode("guides");
+            this.setToolMode('guides');
             return;
         }
-        if (key === "h") {
+        if (key === 'h') {
             event.preventDefault();
-            this.setGuideOrientation("horizontal");
+            this.setGuideOrientation('horizontal');
             return;
         }
-        if (key === "v") {
+        if (key === 'v') {
             event.preventDefault();
-            this.setGuideOrientation("vertical");
+            this.setGuideOrientation('vertical');
             return;
         }
-        if (event.key === "Alt") {
+        if (event.key === 'Alt') {
             this.altPressed.set(true);
             this.updateDistanceOverlay();
             return;
         }
-        if (key === "escape") {
+        if (key === 'escape') {
             event.preventDefault();
             this.selectedMeasurement.set(null);
             this.selectedGuideId.set(null);
@@ -457,7 +482,7 @@ class inspectorComponent {
             this.refreshTypographyBlocks();
             return;
         }
-        if ((key === "backspace" || key === "delete") && this.selectedGuideId()) {
+        if ((key === 'backspace' || key === 'delete') && this.selectedGuideId()) {
             event.preventDefault();
             const nextGuides = this.guides().filter((guide) => guide.id !== this.selectedGuideId());
             this.guides.set(nextGuides);
@@ -466,7 +491,7 @@ class inspectorComponent {
         }
     }
     handleKeyup(event) {
-        if (event.key === "Alt") {
+        if (event.key === 'Alt') {
             this.altPressed.set(false);
             this.distanceOverlay.set(null);
         }
@@ -482,13 +507,13 @@ class inspectorComponent {
                 if (guide.id !== this.draggingGuideId) {
                     return guide;
                 }
-                const rawPosition = guide.orientation === "vertical" ? event.clientX : event.clientY;
-                const max = guide.orientation === "vertical" ? viewport.width : viewport.height;
+                const rawPosition = guide.orientation === 'vertical' ? event.clientX : event.clientY;
+                const max = guide.orientation === 'vertical' ? viewport.width : viewport.height;
                 return { ...guide, position: clamp(rawPosition, 0, max) };
             }));
             return;
         }
-        if (this.toolMode() === "guides") {
+        if (this.toolMode() === 'guides') {
             this.hoverRect.set(null);
             this.hoverElement = null;
             this.distanceOverlay.set(null);
@@ -501,7 +526,7 @@ class inspectorComponent {
             return;
         }
         this.guidePreview.set(null);
-        if (this.toolMode() !== "select" || !this.hoverHighlightEnabled) {
+        if (this.toolMode() !== 'select' || !this.hoverHighlightEnabled) {
             this.hoverRect.set(null);
             this.hoverElement = null;
             if (!this.altPressed()) {
@@ -535,7 +560,7 @@ class inspectorComponent {
             return;
         }
         const overlay = this.overlayRoot()?.nativeElement ?? null;
-        if (this.toolMode() === "guides") {
+        if (this.toolMode() === 'guides') {
             if (overlay && overlay.contains(event.target)) {
                 return;
             }
@@ -544,16 +569,34 @@ class inspectorComponent {
             this.guidePreview.set(guide);
             return;
         }
-        if (this.toolMode() !== "select") {
+        if (!this.canInspectClick(event)) {
             return;
         }
+        this.selectElementAtPoint(event);
+    }
+    handleViewportChange() {
+        if (this.selectedElement && document.contains(this.selectedElement)) {
+            this.selectedMeasurement.set(getInspectMeasurement(this.selectedElement));
+        }
+        this.updateDistanceOverlay();
+        this.refreshTypographyBlocks();
+    }
+    canInspectClick(event) {
+        if (!this.enabled() || !this.isBrowser || this.toolMode() !== 'select') {
+            return false;
+        }
+        const overlay = this.overlayRoot()?.nativeElement ?? null;
+        return !(overlay && overlay.contains(event.target));
+    }
+    selectElementAtPoint(event) {
+        const overlay = this.overlayRoot()?.nativeElement ?? null;
         const target = getTargetElement({ x: event.clientX, y: event.clientY }, overlay);
         if (!target) {
             this.selectedMeasurement.set(null);
             this.selectedElement = null;
             this.distanceOverlay.set(null);
             this.refreshTypographyBlocks();
-            return;
+            return false;
         }
         // Ctrl+click: select the minimum common parent of current selection and clicked element
         if ((event.ctrlKey || event.metaKey) && this.selectedElement) {
@@ -565,7 +608,7 @@ class inspectorComponent {
                 this.selectedElement = commonParent;
                 this.updateDistanceOverlay();
                 this.refreshTypographyBlocks();
-                return;
+                return true;
             }
         }
         this.selectedMeasurement.set(getInspectMeasurement(target));
@@ -573,13 +616,7 @@ class inspectorComponent {
         this.selectedGuideId.set(this.findGuideAtPoint(event.clientX, event.clientY));
         this.updateDistanceOverlay();
         this.refreshTypographyBlocks();
-    }
-    handleViewportChange() {
-        if (this.selectedElement && document.contains(this.selectedElement)) {
-            this.selectedMeasurement.set(getInspectMeasurement(this.selectedElement));
-        }
-        this.updateDistanceOverlay();
-        this.refreshTypographyBlocks();
+        return true;
     }
     updateDistanceOverlay() {
         if (!this.altPressed() ||
@@ -622,10 +659,10 @@ class inspectorComponent {
     getGuidePreview(event) {
         const viewport = getViewportSize();
         const orientation = this.guideOrientation();
-        const rawPosition = orientation === "vertical" ? event.clientX : event.clientY;
-        const max = orientation === "vertical" ? viewport.width : viewport.height;
+        const rawPosition = orientation === 'vertical' ? event.clientX : event.clientY;
+        const max = orientation === 'vertical' ? viewport.width : viewport.height;
         return {
-            id: "preview",
+            id: 'preview',
             orientation,
             position: this.snapGuide(clamp(rawPosition, 0, max)),
         };
@@ -640,11 +677,11 @@ class inspectorComponent {
     }
     findGuideAtPoint(x, y) {
         for (const guide of this.guides()) {
-            if (guide.orientation === "vertical" &&
+            if (guide.orientation === 'vertical' &&
                 Math.abs(guide.position - x) <= GUIDE_HITBOX_SIZE) {
                 return guide.id;
             }
-            if (guide.orientation === "horizontal" &&
+            if (guide.orientation === 'horizontal' &&
                 Math.abs(guide.position - y) <= GUIDE_HITBOX_SIZE) {
                 return guide.id;
             }
@@ -699,7 +736,7 @@ class inspectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: inspectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "inspector-overlay", standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  <div class=\"inspector-toolbar\">\n    <div class=\"inspector-toolbar__rail\">\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"toolMode() === 'select'\"\n        (click)=\"setToolMode('select')\"\n        title=\"Select mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"showTypography()\"\n        (click)=\"toggleTypography()\"\n        title=\"Typography mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n        </svg>\n      </button>\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--guide-main\"\n          [class.is-active]=\"toolMode() === 'guides'\"\n          (click)=\"setToolMode('guides')\"\n          title=\"Guides mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 2h1v12H4zM11 2h1v12h-1zM2 4h12v1H2zM2 11h12v1H2z\" />\n          </svg>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--ghost inspector-icon-button--guide-menu\"\n          [class.is-active]=\"guideMenuOpen()\"\n          (click)=\"toggleGuideMenu()\"\n          title=\"Guide options\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4.47 6.97L8 10.5l3.53-3.53-.94-.94L8 8.62 5.41 6.03z\" />\n          </svg>\n        </button>\n\n        @if (guideMenuOpen()) {\n          <div class=\"inspector-guide-menu\">\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'vertical'\"\n              (click)=\"setGuideOrientation('vertical')\"\n            >\n              Vertical\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'horizontal'\"\n              (click)=\"setGuideOrientation('horizontal')\"\n            >\n              Horizontal\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment inspector-segment--danger\"\n              (click)=\"clearGuides()\"\n            >\n              Clear\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:18px;right:18px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__rail{align-items:center}.inspector-guide-group{position:relative;display:flex;gap:0;align-items:center;border-radius:6px}.inspector-guide-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:max-content;flex-direction:column;align-items:stretch}.inspector-guide-menu .inspector-segment{justify-content:flex-start;width:100%}.inspector-icon-button,.inspector-segment{display:inline-flex;align-items:center;justify-content:center;height:26px;border:0;border-radius:6px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .12s ease,color .12s ease;font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{width:26px}.inspector-icon-button svg{width:14px;height:14px;fill:currentColor}.inspector-icon-button:hover,.inspector-segment:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active,.inspector-segment.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--ghost.is-active{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button--guide-main{border-radius:6px 0 0 6px}.inspector-icon-button--guide-menu{width:20px;border-radius:0 6px 6px 0}.inspector-icon-button--guide-menu svg{width:12px;height:12px}.inspector-segment{padding:0 8px;white-space:nowrap}.inspector-segment--danger:hover{background:#ef444429;color:#fecaca}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"] }]
+            args: [{ selector: 'inspector-overlay', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  <div class=\"inspector-toolbar\">\n    <div class=\"inspector-toolbar__rail\">\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"toolMode() === 'select'\"\n        (click)=\"setToolMode('select')\"\n        title=\"Select mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"showTypography()\"\n        (click)=\"toggleTypography()\"\n        title=\"Typography mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n        </svg>\n      </button>\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--guide-main\"\n          [class.is-active]=\"toolMode() === 'guides'\"\n          (click)=\"setToolMode('guides')\"\n          title=\"Guides mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 2h1v12H4zM11 2h1v12h-1zM2 4h12v1H2zM2 11h12v1H2z\" />\n          </svg>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--ghost inspector-icon-button--guide-menu\"\n          [class.is-active]=\"guideMenuOpen()\"\n          (click)=\"toggleGuideMenu()\"\n          title=\"Guide options\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4.47 6.97L8 10.5l3.53-3.53-.94-.94L8 8.62 5.41 6.03z\" />\n          </svg>\n        </button>\n\n        @if (guideMenuOpen()) {\n          <div class=\"inspector-guide-menu\">\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'vertical'\"\n              (click)=\"setGuideOrientation('vertical')\"\n            >\n              Vertical\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'horizontal'\"\n              (click)=\"setGuideOrientation('horizontal')\"\n            >\n              Horizontal\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment inspector-segment--danger\"\n              (click)=\"clearGuides()\"\n            >\n              Clear\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:18px;right:18px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__rail{align-items:center}.inspector-guide-group{position:relative;display:flex;gap:0;align-items:center;border-radius:6px}.inspector-guide-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:max-content;flex-direction:column;align-items:stretch}.inspector-guide-menu .inspector-segment{justify-content:flex-start;width:100%}.inspector-icon-button,.inspector-segment{display:inline-flex;align-items:center;justify-content:center;height:26px;border:0;border-radius:6px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .12s ease,color .12s ease;font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{width:26px}.inspector-icon-button svg{width:14px;height:14px;fill:currentColor}.inspector-icon-button:hover,.inspector-segment:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active,.inspector-segment.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--ghost.is-active{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button--guide-main{border-radius:6px 0 0 6px}.inspector-icon-button--guide-menu{width:20px;border-radius:0 6px 6px 0}.inspector-icon-button--guide-menu svg{width:12px;height:12px}.inspector-segment{padding:0 8px;white-space:nowrap}.inspector-segment--danger:hover{background:#ef444429;color:#fecaca}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -713,25 +750,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], handleKeydown: [{
                 type: HostListener,
-                args: ["window:keydown", ["$event"]]
+                args: ['window:keydown', ['$event']]
             }], handleKeyup: [{
                 type: HostListener,
-                args: ["window:keyup", ["$event"]]
+                args: ['window:keyup', ['$event']]
             }], handlePointerMove: [{
                 type: HostListener,
-                args: ["window:pointermove", ["$event"]]
+                args: ['window:pointermove', ['$event']]
             }], handlePointerUp: [{
                 type: HostListener,
-                args: ["window:pointerup"]
+                args: ['window:pointerup']
             }], handleClick: [{
                 type: HostListener,
-                args: ["window:click", ["$event"]]
+                args: ['window:click', ['$event']]
             }], handleViewportChange: [{
                 type: HostListener,
-                args: ["window:resize"]
+                args: ['window:resize']
             }, {
                 type: HostListener,
-                args: ["window:scroll"]
+                args: ['window:scroll']
             }] } });
 
 /**