inspector-ng 0.0.12 → 0.0.14

package/fesm2022/inspector-ng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, signal, Optional, makeEnvironmentProviders, viewChild, inject, computed, effect, HostListener, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, signal, Optional, makeEnvironmentProviders, viewChild, inject, computed, HostListener, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/router';
 import { Router } from '@angular/router';
@@ -7,8 +7,6 @@ import * as i1 from '@ngrx/store';
 import { Store, META_REDUCERS } from '@ngrx/store';
 import { firstValueFrom, take } from 'rxjs';
 
-const inspector_STORAGE_KEY = "inspector-state";
-const inspector_STATE_VERSION = 2;
 const GUIDE_SNAP_DISTANCE = 10;
 const GUIDE_HITBOX_SIZE = 14;
 
@@ -54,7 +52,8 @@ class IndexedDbCheckpointRepository extends InspectorCheckpointRepository {
         }
         if (this.databasePromise)
             return this.databasePromise;
-        this.databasePromise = new Promise((resolve, reject) => {
+        let rejected = false;
+        const databasePromise = new Promise((resolve, reject) => {
             const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
             request.onupgradeneeded = () => {
                 const database = request.result;
@@ -63,11 +62,30 @@ class IndexedDbCheckpointRepository extends InspectorCheckpointRepository {
                 const store = database.createObjectStore(STORE_NAME, { keyPath: 'id' });
                 store.createIndex('createdAt', 'createdAt');
             };
-            request.onsuccess = () => resolve(request.result);
-            request.onerror = () => reject(request.error ?? new Error('IndexedDB could not be opened.'));
-            request.onblocked = () => reject(new Error('IndexedDB is blocked by another open tab.'));
+            request.onsuccess = () => {
+                if (rejected) {
+                    request.result.close();
+                    return;
+                }
+                request.result.onversionchange = () => request.result.close();
+                resolve(request.result);
+            };
+            request.onerror = () => {
+                rejected = true;
+                reject(request.error ?? new Error('IndexedDB could not be opened.'));
+            };
+            request.onblocked = () => {
+                rejected = true;
+                reject(new Error('IndexedDB is blocked by another open tab.'));
+            };
+        });
+        this.databasePromise = databasePromise;
+        void databasePromise.catch(() => {
+            if (this.databasePromise === databasePromise) {
+                this.databasePromise = null;
+            }
         });
-        return this.databasePromise;
+        return databasePromise;
     }
     request(request) {
         return new Promise((resolve, reject) => {
@@ -164,7 +182,9 @@ class InspectorCheckpointService {
                 throw new Error('Checkpoint not found. It may have been deleted in another tab.');
             const state = cloneJson(checkpoint.state, `“${checkpoint.name}” could not be decoded. Delete it and save a new checkpoint.`);
             this.store.dispatch({ type: RESTORE_CHECKPOINT, state });
-            if (this.router && !await this.router.navigateByUrl(checkpoint.route)) {
+            if (this.router &&
+                this.router.url !== checkpoint.route &&
+                !await this.router.navigateByUrl(checkpoint.route)) {
                 throw new Error(`The state was restored, but navigation to “${checkpoint.route}” was cancelled.`);
             }
             const recentlyUsedCheckpoint = {
@@ -687,6 +707,13 @@ const formatRelativeTime = (iso, now = Date.now()) => {
     return `${Math.round(months / 12)}y`;
 };
 
+/**
+ * RunCat frames from Jas0nG/RunCat_for_Linux, licensed under Apache-2.0.
+ * The original ICO frames were converted into a WebP sprite sheet.
+ * See the packaged THIRD_PARTY_NOTICES.md for attribution.
+ */
+const RUNCAT_SPRITE_SRC = 'data:image/webp;base64,UklGRhoEAABXRUJQVlA4TA4EAAAvn8AHEAUcSZLDNvP/T3cA4ADJduQkggKy/YvjiK9uK/WGMPWQyvld3Xvu7rrGEdaou67W3d1dV4cQQl1Xpu6pexvCSlgZ3glI//ZNYyW7wPl3yfF98symzxgCPrOcU2DQnyUNxsnyyLLPuCjBBrA88OlHtFYhJjli1sYyFQCvv79MS70+YpCLvlcGRfwfMUjAGqgCeBmLXtLkuOqibRI0v+B0W4kxFgjZtrHJK/cEAWVivokbViQ5tr2zj88GAJD4CX5AQfLMIhF2pZSkYc+WpvmI3zIJEHbEiM3KJVEQZl0wTFD/nZ4CDphlkaAjzzRXBhjhY3Dx8DzTQRYAJodHjolBSsnn0nzNLYJhiHmAVwYkUb4X4+3Fl3AMwoASdU8pJVtg3IgHHiRT5OhwwfCjRB8urltmFMBv3DN7AOiXYJgVrAdc0phKnGCxcfYsTXXiA+R5AcBFHh18C0BR4mWJ8/8o8cMIWfZI1Hgj1XXJNtgm4JV+E83FMNkAFPEYZAsE4BEbLj/wrwMuOmaVUwAg6AkAc3Ya+tgUW+xRwLRHlm9Nwy3b+6OULMBcCcNVG5ITMx9idc+AlJIfYYMcgGmG+idvWiaEsV1JkeuWiBkxfG+EZGdwydIwpaSTGDl4zrKIO13adrF1ZMa3AXjU9yUANpMNm5KfXTWHI2lskC24dcqHQjIS78CHfLhXYZG6KaUkFWBZIdXP+umnF7fLV7akuQ7GsfBQgHPka5w9AgB/JmETjPC9fwF4IAyA1yz2CIBHgg4s6id1DWMCTKkyLtzkTFt1ddEy7XX36AqKvDnxszAeCng7jbV1e7DlMwe6iLEteVMeAJYR3k5J+AbgSikJCAsAsM+7KXFemJJuOWRg7BnfAvj6JBVPVfGJG0nAUx+mlLTl4kirDTO2mzZxp5SSI4CAWbqnlBKnqpnkG32UYajGKVM0Tz5nLqYdjMDZK0VesVWxhTYAZEx0f2JMGmvp8sQsRjqK0jgdmTs5pvED0OtCT2HsLZMo2YecaWsAyyNd0tEquGiGRGFAjWQRSQSDg6G57nYslojRZyJiccQuVQPL/KxLuuQeCKSn9mxMSUkUG46kObcawCovAFX+TnNN01mUASkZATjBlYZ+dw+wL81tAkxLicOPZinwaCMrXXtzIO8NCx4oA3ybkgTAoAsJUMDNLQzXdUofBRxIc41lKYNRM20B76etpkILBM240ZpX6GDNG5PAEuEMPFM3SXXd3+lSfY6UHIInotJPdxk8u2QSoMo9wJmblDQXA3giRhkseqMhYECywzn102OXoXv68fZAn0NyGap04tQzvTTDOp2SI+B/k/wOaJ1+dQ6D0plDCHLSe70Axpsk0VU9f7e5XoJeaPou+dUiLR/9ywY=';
+
 const INSPECTOR_COMMAND_ACTIONS = [
     { id: 'save', label: 'Save', ariaLabel: 'Save checkpoint', keywords: 'save checkpoint capture state' },
     { id: 'select', label: 'Select', ariaLabel: 'Select mode', keywords: 'select inspect pointer element' },
@@ -698,6 +725,7 @@ const INSPECTOR_COMMAND_ACTIONS = [
 class inspectorComponent {
     constructor(platformId) {
         this.Math = Math;
+        this.runcatSpriteSrc = RUNCAT_SPRITE_SRC;
         this.checkpointActivityAt = checkpointActivityAt;
         this.formatValue = formatValue;
         this.formatRelativeTime = formatRelativeTime;
@@ -708,7 +736,6 @@ class inspectorComponent {
         this.highlightColor = '#4f8cff';
         this.guideColor = '#ff7a00';
         this.hoverHighlightEnabled = true;
-        this.persistOnReload = false;
         this.checkpointService = inject(InspectorCheckpointService, { optional: true });
         this.commandBarOpen = signal(false);
         this.checkpointQuery = signal('');
@@ -756,9 +783,6 @@ class inspectorComponent {
             }
             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) ||
@@ -773,61 +797,17 @@ class inspectorComponent {
         this.selectedElement = null;
         this.hoverElement = null;
         this.toastTimer = null;
-        this.canUndo = computed(() => this.historyIndex() > 0);
-        this.canRedo = computed(() => this.historyIndex() >= 0 &&
-            this.historyIndex() < this.history().length - 1);
         this.trackGuide = (_index, guide) => guide.id;
         this.trackTextBlock = (_index, block) => block.id;
         this.trackConnector = (_index, connector) => `${connector.x1}:${connector.y1}:${connector.x2}:${connector.y2}`;
         this.isBrowser = isPlatformBrowser(platformId);
-        effect(() => {
-            if (!this.persistOnReload || !this.isBrowser || !this.hydrated()) {
-                return;
-            }
-            const payload = {
-                version: inspector_STATE_VERSION,
-                enabled: this.enabled(),
-                toolMode: this.toolMode(),
-                guideOrientation: this.guideOrientation(),
-                guides: this.guides(),
-                showTypography: this.showTypography(),
-            };
-            window.localStorage.setItem(inspector_STORAGE_KEY, JSON.stringify(payload));
-        });
     }
     ngOnInit() {
-        if (!this.isBrowser) {
-            this.hydrated.set(true);
+        if (!this.isBrowser)
             return;
-        }
         window.addEventListener('click', this.handleCapturedClick, {
             capture: true,
         });
-        if (!this.persistOnReload) {
-            this.hydrated.set(true);
-            return;
-        }
-        const stored = window.localStorage.getItem(inspector_STORAGE_KEY);
-        if (!stored) {
-            this.hydrated.set(true);
-            return;
-        }
-        try {
-            const parsed = JSON.parse(stored);
-            if (parsed.version === inspector_STATE_VERSION || parsed.version === 1) {
-                this.enabled.set(true);
-                this.toolMode.set(parsed.toolMode);
-                this.guideOrientation.set(parsed.guideOrientation);
-                this.guides.set(parsed.guides ?? []);
-                this.showTypography.set(parsed.version === 1 ? false : (parsed.showTypography ?? false));
-                this.recordHistory(parsed.guides ?? []);
-            }
-        }
-        catch {
-            // ignore malformed state
-        }
-        this.hydrated.set(true);
-        this.refreshTypographyBlocks();
     }
     ngOnDestroy() {
         if (!this.isBrowser) {
@@ -1018,7 +998,6 @@ class inspectorComponent {
     clearGuides() {
         this.guides.set([]);
         this.selectedGuideId.set(null);
-        this.recordHistory([]);
     }
     startGuideDrag(event, guide) {
         event.preventDefault();
@@ -1047,11 +1026,21 @@ class inspectorComponent {
             this.handleCommandBarKeydown(event, key);
             return;
         }
-        if (key === 'escape') {
+        if (key === 'escape' && this.hasInspectorCanvasState()) {
             event.preventDefault();
             this.clearInspectorCanvas();
         }
     }
+    hasInspectorCanvasState() {
+        return this.guides().length > 0 ||
+            this.selectedMeasurement() !== null ||
+            this.selectedGuideId() !== null ||
+            this.hoverRect() !== null ||
+            this.distanceOverlay() !== null ||
+            this.altPressed() ||
+            this.guidePreview() !== null ||
+            this.draggingGuideId !== null;
+    }
     clearInspectorCanvas() {
         this.selectedMeasurement.set(null);
         this.selectedGuideId.set(null);
@@ -1121,13 +1110,11 @@ class inspectorComponent {
             this.hoverRect.set(rect);
         }
         this.updateDistanceOverlay();
-        this.refreshTypographyBlocks();
     }
     handlePointerUp() {
         if (!this.draggingGuideId) {
             return;
         }
-        this.recordHistory(this.guides());
         this.draggingGuideId = null;
     }
     handleClick(event) {
@@ -1341,7 +1328,6 @@ class inspectorComponent {
         const nextGuides = [...this.guides(), guide];
         this.guides.set(nextGuides);
         this.selectedGuideId.set(guide.id);
-        this.recordHistory(nextGuides);
     }
     getGuidePreview(event) {
         const viewport = getViewportSize();
@@ -1375,31 +1361,6 @@ class inspectorComponent {
         }
         return null;
     }
-    undo() {
-        if (!this.canUndo()) {
-            return;
-        }
-        const nextIndex = this.historyIndex() - 1;
-        this.historyIndex.set(nextIndex);
-        this.guides.set(this.cloneGuides(this.history()[nextIndex]));
-    }
-    redo() {
-        if (!this.canRedo()) {
-            return;
-        }
-        const nextIndex = this.historyIndex() + 1;
-        this.historyIndex.set(nextIndex);
-        this.guides.set(this.cloneGuides(this.history()[nextIndex]));
-    }
-    recordHistory(guides) {
-        const base = this.history().slice(0, this.historyIndex() + 1);
-        base.push(this.cloneGuides(guides));
-        this.history.set(base);
-        this.historyIndex.set(base.length - 1);
-    }
-    cloneGuides(guides) {
-        return guides.map((guide) => ({ ...guide }));
-    }
     findMinimumCommonParent(elementA, elementB) {
         // Build ancestor chain for element A
         const ancestorsA = new Set();
@@ -1419,11 +1380,11 @@ class inspectorComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: inspectorComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: inspectorComponent, isStandalone: true, selector: "inspector-overlay", inputs: { highlightColor: "highlightColor", guideColor: "guideColor", hoverHighlightEnabled: "hoverHighlightEnabled", persistOnReload: "persistOnReload" }, host: { listeners: { "window:keydown": "handleKeydown($event)", "window:pointermove": "handlePointerMove($event)", "window:pointerup": "handlePointerUp()", "window:click": "handleClick($event)", "window:resize": "handleViewportChange()", "window:scroll": "handleViewportChange()" } }, viewQueries: [{ propertyName: "overlayRoot", first: true, predicate: ["overlayRoot"], descendants: true, isSignal: true }, { propertyName: "checkpointDialog", first: true, predicate: ["checkpointDialog"], descendants: true, isSignal: true }, { propertyName: "checkpointSearch", first: true, predicate: ["checkpointSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <svg\n            class=\"inspector-command__search-icon inspector-command__search-icon--cat\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n          >\n            <g class=\"inspector-command__cat-face\">\n              <path\n                d=\"M3.2 6.1 2.7 2.6l3 1.5A5.7 5.7 0 0 1 8 3.6c.8 0 1.6.2 2.3.5l3-1.5-.5 3.5c.5.8.7 1.7.7 2.7 0 2.8-2.4 4.5-5.5 4.5s-5.5-1.7-5.5-4.5c0-1 .2-1.9.7-2.7Z\"\n              />\n              <g class=\"inspector-command__cat-eyes\">\n                <circle cx=\"5.7\" cy=\"8.3\" r=\".65\" />\n                <circle cx=\"10.3\" cy=\"8.3\" r=\".65\" />\n              </g>\n              <path d=\"m6.8 10.3 1.2.7 1.2-.7M8 11v.7\" />\n            </g>\n          </svg>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length && !filteredInspectorActions().length\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"\n                  deletingCheckpointId() === checkpoint.id ||\n                  editingCheckpointId() === checkpoint.id\n                    ? null\n                    : restoreCheckpoint(checkpoint)\n                \"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span class=\"inspector-command-row__name\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === index\n                      ) {\n                        Restoring\u2026\n                      } @else {\n                        {{ checkpoint.name }}\n                      }\n                    </span>\n                    <span class=\"inspector-command-row__meta\">\n                      @if (shouldShowCheckpointRoute(checkpoint)) {\n                        <span class=\"inspector-command-row__route\">{{\n                          checkpoint.route\n                        }}</span>\n                        <span\n                          class=\"inspector-command-row__separator\"\n                          aria-hidden=\"true\"\n                          >\u00B7</span\n                        >\n                      }\n                      <span class=\"inspector-command-row__activity\">\n                        {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                        {{\n                          formatRelativeTime(checkpointActivityAt(checkpoint))\n                        }}\n                      </span>\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"filteredCheckpoints().length + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [class.inspector-command-action--danger]=\"action.id === 'off'\"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\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                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                  @case (\"off\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M7.25 1.5h1.5v6h-1.5zM4.1 3.35l.96 1.15A4.25 4.25 0 1 0 10.94 4.5l.96-1.15A5.75 5.75 0 1 1 4.1 3.35z\"\n                      />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\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: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(26% .02 265);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__search-icon{width:15px;height:15px;flex:0 0 auto;overflow:visible;fill:none;stroke:var(--command-faint);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.inspector-command__search-icon circle{fill:var(--command-faint);stroke:none}.inspector-command__search-icon--cat{transition:stroke .14s var(--inspector-ease)}.inspector-command__cat-face{transform-box:fill-box;transform-origin:center;animation:inspector-cat-listen 5.4s var(--inspector-ease) infinite}.inspector-command__cat-eyes{transform-box:fill-box;transform-origin:center;animation:inspector-cat-blink 4.2s ease-out infinite}.inspector-command__search:focus-within .inspector-command__search-icon--cat{stroke:var(--command-accent);animation:inspector-cat-arrive .42s var(--inspector-ease) both}.inspector-command__search:focus-within .inspector-command__search-icon circle{fill:var(--command-accent)}@keyframes inspector-cat-arrive{0%{transform:translateY(1px) rotate(-7deg)}65%{transform:translateY(0) rotate(3deg)}to{transform:none}}@keyframes inspector-cat-listen{0%,88%,to{transform:rotate(0)}92%{transform:rotate(-5deg)}96%{transform:rotate(3deg)}}@keyframes inspector-cat-blink{0%,90%,94%,to{transform:scaleY(1)}92%{transform:scaleY(.08)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active)}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__meta{display:inline-flex;flex:0 1 auto;align-items:baseline;gap:4px;min-width:0;overflow:hidden;color:var(--command-faint);font-size:11px;font-weight:400;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__route{min-width:0;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__separator,.inspector-command-row__activity{flex:0 0 auto}.inspector-command-row.is-active .inspector-command-row__activity{color:var(--command-muted)}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected{background:var(--command-surface-active);color:var(--command-text)}.inspector-command-action--danger:hover:not(:disabled){background:#ef66611a;color:#f5b9b4}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;padding:5px 10px;border:1px solid oklch(74% .12 150 / .25);border-radius:999px;background:#0e1f12f0;color:#cce6d0;box-shadow:var(--inspector-shadow);font-size:11px;font-weight:520;line-height:1.25;pointer-events:none;transform:translate(-50%)}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__search-icon--cat,.inspector-command__cat-face,.inspector-command__cat-eyes{animation:none;transition:none}}.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:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;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% - 6px));max-width:min(380px,calc(100vw - 20px));padding:4px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:var(--inspector-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:3px 5px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#f5c076}.inspector-box-tag--padding{color:#95dfa4;transform:translateY(0)}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;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:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f2;color:var(--inspector-text);font-size:9px;font-weight:520;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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: inspectorComponent, isStandalone: true, selector: "inspector-overlay", inputs: { highlightColor: "highlightColor", guideColor: "guideColor", hoverHighlightEnabled: "hoverHighlightEnabled" }, host: { listeners: { "window:keydown": "handleKeydown($event)", "window:pointermove": "handlePointerMove($event)", "window:pointerup": "handlePointerUp()", "window:click": "handleClick($event)", "window:resize": "handleViewportChange()", "window:scroll": "handleViewportChange()" } }, viewQueries: [{ propertyName: "overlayRoot", first: true, predicate: ["overlayRoot"], descendants: true, isSignal: true }, { propertyName: "checkpointDialog", first: true, predicate: ["checkpointDialog"], descendants: true, isSignal: true }, { propertyName: "checkpointSearch", first: true, predicate: ["checkpointSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <span class=\"inspector-command__runcat\" aria-hidden=\"true\">\n            <img\n              class=\"inspector-command__runcat-sprite\"\n              [src]=\"runcatSpriteSrc\"\n              alt=\"\"\n              draggable=\"false\"\n            />\n          </span>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"commandBarOpen()\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length && !filteredInspectorActions().length\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"\n                  deletingCheckpointId() === checkpoint.id ||\n                  editingCheckpointId() === checkpoint.id\n                    ? null\n                    : restoreCheckpoint(checkpoint)\n                \"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span class=\"inspector-command-row__name\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === index\n                      ) {\n                        Restoring\u2026\n                      } @else {\n                        {{ checkpoint.name }}\n                      }\n                    </span>\n                    <span class=\"inspector-command-row__meta\">\n                      @if (shouldShowCheckpointRoute(checkpoint)) {\n                        <span class=\"inspector-command-row__route\">{{\n                          checkpoint.route\n                        }}</span>\n                        <span\n                          class=\"inspector-command-row__separator\"\n                          aria-hidden=\"true\"\n                          >\u00B7</span\n                        >\n                      }\n                      <span class=\"inspector-command-row__activity\">\n                        {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                        {{\n                          formatRelativeTime(checkpointActivityAt(checkpoint))\n                        }}\n                      </span>\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"filteredCheckpoints().length + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [class.inspector-command-action--danger]=\"action.id === 'off'\"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\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                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                  @case (\"off\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M7.25 1.5h1.5v6h-1.5zM4.1 3.35l.96 1.15A4.25 4.25 0 1 0 10.94 4.5l.96-1.15A5.75 5.75 0 1 1 4.1 3.35z\"\n                      />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\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        [attr.aria-label]=\"\n          (guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal') +\n          ' guide at ' +\n          formatValue(guide.position) +\n          ' pixels'\n        \"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(26% .02 265);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__runcat{width:20px;height:20px;flex:0 0 auto;overflow:hidden;opacity:.72;transition:opacity .14s var(--inspector-ease)}.inspector-command__runcat-sprite{display:block;width:500%;height:100%;max-width:none;-webkit-user-select:none;user-select:none;transform:translate(0)}.inspector-command__search:focus-within .inspector-command__runcat{opacity:1}@media (prefers-reduced-motion: no-preference){.inspector-command__runcat-sprite{animation:inspector-runcat-run .4s steps(1,end) infinite}}@keyframes inspector-runcat-run{0%,19.99%{transform:translate(0)}20%,39.99%{transform:translate(-20%)}40%,59.99%{transform:translate(-40%)}60%,79.99%{transform:translate(-60%)}80%,to{transform:translate(-80%)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active)}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__meta{display:inline-flex;flex:0 1 auto;align-items:baseline;gap:4px;min-width:0;overflow:hidden;color:var(--command-faint);font-size:11px;font-weight:400;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__route{min-width:0;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__separator,.inspector-command-row__activity{flex:0 0 auto}.inspector-command-row.is-active .inspector-command-row__activity{color:var(--command-muted)}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected{background:var(--command-surface-active);color:var(--command-text)}.inspector-command-action--danger:hover:not(:disabled){background:#ef66611a;color:#f5b9b4}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;padding:5px 10px;border:1px solid oklch(74% .12 150 / .25);border-radius:999px;background:#0e1f12f0;color:#cce6d0;box-shadow:var(--inspector-shadow);font-size:11px;font-weight:520;line-height:1.25;pointer-events:none;transform:translate(-50%)}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__runcat{transition:none}.inspector-command__runcat-sprite{animation:none;transform:translate(0)}}.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:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;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% - 6px));max-width:min(380px,calc(100vw - 20px));padding:4px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:var(--inspector-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:3px 5px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#f5c076}.inspector-box-tag--padding{color:#95dfa4;transform:translateY(0)}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;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:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f2;color:var(--inspector-text);font-size:9px;font-weight:520;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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <svg\n            class=\"inspector-command__search-icon inspector-command__search-icon--cat\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n          >\n            <g class=\"inspector-command__cat-face\">\n              <path\n                d=\"M3.2 6.1 2.7 2.6l3 1.5A5.7 5.7 0 0 1 8 3.6c.8 0 1.6.2 2.3.5l3-1.5-.5 3.5c.5.8.7 1.7.7 2.7 0 2.8-2.4 4.5-5.5 4.5s-5.5-1.7-5.5-4.5c0-1 .2-1.9.7-2.7Z\"\n              />\n              <g class=\"inspector-command__cat-eyes\">\n                <circle cx=\"5.7\" cy=\"8.3\" r=\".65\" />\n                <circle cx=\"10.3\" cy=\"8.3\" r=\".65\" />\n              </g>\n              <path d=\"m6.8 10.3 1.2.7 1.2-.7M8 11v.7\" />\n            </g>\n          </svg>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length && !filteredInspectorActions().length\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"\n                  deletingCheckpointId() === checkpoint.id ||\n                  editingCheckpointId() === checkpoint.id\n                    ? null\n                    : restoreCheckpoint(checkpoint)\n                \"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span class=\"inspector-command-row__name\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === index\n                      ) {\n                        Restoring\u2026\n                      } @else {\n                        {{ checkpoint.name }}\n                      }\n                    </span>\n                    <span class=\"inspector-command-row__meta\">\n                      @if (shouldShowCheckpointRoute(checkpoint)) {\n                        <span class=\"inspector-command-row__route\">{{\n                          checkpoint.route\n                        }}</span>\n                        <span\n                          class=\"inspector-command-row__separator\"\n                          aria-hidden=\"true\"\n                          >\u00B7</span\n                        >\n                      }\n                      <span class=\"inspector-command-row__activity\">\n                        {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                        {{\n                          formatRelativeTime(checkpointActivityAt(checkpoint))\n                        }}\n                      </span>\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"filteredCheckpoints().length + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [class.inspector-command-action--danger]=\"action.id === 'off'\"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\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                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                  @case (\"off\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M7.25 1.5h1.5v6h-1.5zM4.1 3.35l.96 1.15A4.25 4.25 0 1 0 10.94 4.5l.96-1.15A5.75 5.75 0 1 1 4.1 3.35z\"\n                      />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\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: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(26% .02 265);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__search-icon{width:15px;height:15px;flex:0 0 auto;overflow:visible;fill:none;stroke:var(--command-faint);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.inspector-command__search-icon circle{fill:var(--command-faint);stroke:none}.inspector-command__search-icon--cat{transition:stroke .14s var(--inspector-ease)}.inspector-command__cat-face{transform-box:fill-box;transform-origin:center;animation:inspector-cat-listen 5.4s var(--inspector-ease) infinite}.inspector-command__cat-eyes{transform-box:fill-box;transform-origin:center;animation:inspector-cat-blink 4.2s ease-out infinite}.inspector-command__search:focus-within .inspector-command__search-icon--cat{stroke:var(--command-accent);animation:inspector-cat-arrive .42s var(--inspector-ease) both}.inspector-command__search:focus-within .inspector-command__search-icon circle{fill:var(--command-accent)}@keyframes inspector-cat-arrive{0%{transform:translateY(1px) rotate(-7deg)}65%{transform:translateY(0) rotate(3deg)}to{transform:none}}@keyframes inspector-cat-listen{0%,88%,to{transform:rotate(0)}92%{transform:rotate(-5deg)}96%{transform:rotate(3deg)}}@keyframes inspector-cat-blink{0%,90%,94%,to{transform:scaleY(1)}92%{transform:scaleY(.08)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active)}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__meta{display:inline-flex;flex:0 1 auto;align-items:baseline;gap:4px;min-width:0;overflow:hidden;color:var(--command-faint);font-size:11px;font-weight:400;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__route{min-width:0;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__separator,.inspector-command-row__activity{flex:0 0 auto}.inspector-command-row.is-active .inspector-command-row__activity{color:var(--command-muted)}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected{background:var(--command-surface-active);color:var(--command-text)}.inspector-command-action--danger:hover:not(:disabled){background:#ef66611a;color:#f5b9b4}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;padding:5px 10px;border:1px solid oklch(74% .12 150 / .25);border-radius:999px;background:#0e1f12f0;color:#cce6d0;box-shadow:var(--inspector-shadow);font-size:11px;font-weight:520;line-height:1.25;pointer-events:none;transform:translate(-50%)}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__search-icon--cat,.inspector-command__cat-face,.inspector-command__cat-eyes{animation:none;transition:none}}.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:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;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% - 6px));max-width:min(380px,calc(100vw - 20px));padding:4px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:var(--inspector-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:3px 5px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#f5c076}.inspector-box-tag--padding{color:#95dfa4;transform:translateY(0)}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;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:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f2;color:var(--inspector-text);font-size:9px;font-weight:520;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  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <span class=\"inspector-command__runcat\" aria-hidden=\"true\">\n            <img\n              class=\"inspector-command__runcat-sprite\"\n              [src]=\"runcatSpriteSrc\"\n              alt=\"\"\n              draggable=\"false\"\n            />\n          </span>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"commandBarOpen()\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length && !filteredInspectorActions().length\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"\n                  deletingCheckpointId() === checkpoint.id ||\n                  editingCheckpointId() === checkpoint.id\n                    ? null\n                    : restoreCheckpoint(checkpoint)\n                \"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span class=\"inspector-command-row__name\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === index\n                      ) {\n                        Restoring\u2026\n                      } @else {\n                        {{ checkpoint.name }}\n                      }\n                    </span>\n                    <span class=\"inspector-command-row__meta\">\n                      @if (shouldShowCheckpointRoute(checkpoint)) {\n                        <span class=\"inspector-command-row__route\">{{\n                          checkpoint.route\n                        }}</span>\n                        <span\n                          class=\"inspector-command-row__separator\"\n                          aria-hidden=\"true\"\n                          >\u00B7</span\n                        >\n                      }\n                      <span class=\"inspector-command-row__activity\">\n                        {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                        {{\n                          formatRelativeTime(checkpointActivityAt(checkpoint))\n                        }}\n                      </span>\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"filteredCheckpoints().length + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [class.inspector-command-action--danger]=\"action.id === 'off'\"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\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                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                  @case (\"off\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M7.25 1.5h1.5v6h-1.5zM4.1 3.35l.96 1.15A4.25 4.25 0 1 0 10.94 4.5l.96-1.15A5.75 5.75 0 1 1 4.1 3.35z\"\n                      />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\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        [attr.aria-label]=\"\n          (guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal') +\n          ' guide at ' +\n          formatValue(guide.position) +\n          ' pixels'\n        \"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(26% .02 265);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__runcat{width:20px;height:20px;flex:0 0 auto;overflow:hidden;opacity:.72;transition:opacity .14s var(--inspector-ease)}.inspector-command__runcat-sprite{display:block;width:500%;height:100%;max-width:none;-webkit-user-select:none;user-select:none;transform:translate(0)}.inspector-command__search:focus-within .inspector-command__runcat{opacity:1}@media (prefers-reduced-motion: no-preference){.inspector-command__runcat-sprite{animation:inspector-runcat-run .4s steps(1,end) infinite}}@keyframes inspector-runcat-run{0%,19.99%{transform:translate(0)}20%,39.99%{transform:translate(-20%)}40%,59.99%{transform:translate(-40%)}60%,79.99%{transform:translate(-60%)}80%,to{transform:translate(-80%)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active)}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__meta{display:inline-flex;flex:0 1 auto;align-items:baseline;gap:4px;min-width:0;overflow:hidden;color:var(--command-faint);font-size:11px;font-weight:400;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__route{min-width:0;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__separator,.inspector-command-row__activity{flex:0 0 auto}.inspector-command-row.is-active .inspector-command-row__activity{color:var(--command-muted)}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected{background:var(--command-surface-active);color:var(--command-text)}.inspector-command-action--danger:hover:not(:disabled){background:#ef66611a;color:#f5b9b4}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;padding:5px 10px;border:1px solid oklch(74% .12 150 / .25);border-radius:999px;background:#0e1f12f0;color:#cce6d0;box-shadow:var(--inspector-shadow);font-size:11px;font-weight:520;line-height:1.25;pointer-events:none;transform:translate(-50%)}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__runcat{transition:none}.inspector-command__runcat-sprite{animation:none;transform:translate(0)}}.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:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;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% - 6px));max-width:min(380px,calc(100vw - 20px));padding:4px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:var(--inspector-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:3px 5px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#f5c076}.inspector-box-tag--padding{color:#95dfa4;transform:translateY(0)}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f0;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;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:3px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#0e0f15f2;color:var(--inspector-text);font-size:9px;font-weight:520;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]
@@ -1433,8 +1394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], hoverHighlightEnabled: [{
                 type: Input
-            }], persistOnReload: [{
-                type: Input
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -1459,5 +1418,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, clamp, createId, formatRelativeTime, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, inspector_STATE_VERSION, inspector_STORAGE_KEY, provideInspectorCheckpoints, rectContainsPoint, rectsEqual };
+export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, clamp, createId, formatRelativeTime, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, provideInspectorCheckpoints, rectContainsPoint, rectsEqual };
 //# sourceMappingURL=inspector-ng.mjs.map