inspector-ng 0.0.5 → 0.0.7

package/fesm2022/inspector-ng.mjs

@@ -1,12 +1,276 @@
 import * as i0 from '@angular/core';
-import { viewChild, signal, computed, effect, PLATFORM_ID, HostListener, Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, computed, PLATFORM_ID, Inject, Injectable, viewChild, inject, effect, HostListener, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import * as i1 from '@angular/router';
+import { Router } from '@angular/router';
 
 const inspector_STORAGE_KEY = "inspector-state";
-const inspector_STATE_VERSION = 1;
+const inspector_STATE_VERSION = 2;
 const GUIDE_SNAP_DISTANCE = 10;
 const GUIDE_HITBOX_SIZE = 14;
 
+const STORAGE_KEY = 'inspector-checkpoints-v1';
+class InspectorCheckpointRegistry {
+    constructor(platformId, router) {
+        this.router = router;
+        this.checkpoints = signal([]);
+        this.isBusy = signal(false);
+        this.error = signal(null);
+        this.warning = signal(null);
+        this.totalBytes = computed(() => this.checkpoints().reduce((total, checkpoint) => total + checkpoint.sizeBytes, 0));
+        this.adapters = new Map();
+        this.remoteLoaders = new Map();
+        this.isCheckpoint = (value) => {
+            if (!value || typeof value !== 'object')
+                return false;
+            const checkpoint = value;
+            return checkpoint.version === 1 && typeof checkpoint.id === 'string' &&
+                typeof checkpoint.name === 'string' && typeof checkpoint.url === 'string' &&
+                typeof checkpoint.createdAt === 'string' && Array.isArray(checkpoint.scopes) &&
+                !!checkpoint.state && typeof checkpoint.state === 'object' && typeof checkpoint.sizeBytes === 'number';
+        };
+        this.isBrowser = isPlatformBrowser(platformId);
+        this.hydrate();
+    }
+    register(adapter) {
+        if (!adapter.id.includes(':')) {
+            throw new Error('Checkpoint adapter IDs must be namespaced (for example, workflow:application).');
+        }
+        if (this.adapters.has(adapter.id)) {
+            // Remote bridge loaders can run more than once across checkpoint restores.
+            // Treat repeated registration as idempotent so a loaded remote stays usable.
+            return () => undefined;
+        }
+        this.adapters.set(adapter.id, adapter);
+        return () => this.adapters.delete(adapter.id);
+    }
+    registerRemoteScope(scope, loader) {
+        this.remoteLoaders.set(scope, loader);
+        return () => this.remoteLoaders.delete(scope);
+    }
+    async save(name) {
+        this.error.set(null);
+        if (!this.isBrowser) {
+            this.error.set('Checkpoints are only available in a browser.');
+            return null;
+        }
+        this.isBusy.set(true);
+        try {
+            const state = {};
+            for (const adapter of this.adapters.values()) {
+                state[adapter.id] = this.cloneValue(await adapter.capture(), adapter.id);
+            }
+            const createdAt = new Date().toISOString();
+            const checkpoint = {
+                version: 1,
+                id: this.createId(),
+                name: name?.trim() || this.nextAutomaticName(this.routePath(this.router.url)),
+                url: this.router.url,
+                createdAt,
+                scopes: this.getScopes(Object.keys(state)),
+                state,
+                sizeBytes: 0,
+            };
+            checkpoint.sizeBytes = this.sizeOf(checkpoint);
+            this.persistWithEviction([checkpoint, ...this.checkpoints()]);
+            return this.checkpoints().find((item) => item.id === checkpoint.id) ?? null;
+        }
+        catch (error) {
+            this.error.set(this.messageFor(error, 'Unable to save checkpoint.'));
+            return null;
+        }
+        finally {
+            this.isBusy.set(false);
+        }
+    }
+    async restore(id) {
+        const checkpoint = this.checkpoints().find((item) => item.id === id);
+        this.error.set(null);
+        this.warning.set(null);
+        if (!checkpoint) {
+            this.error.set('Checkpoint not found.');
+            return false;
+        }
+        this.isBusy.set(true);
+        try {
+            for (const scope of checkpoint.scopes) {
+                const loader = this.remoteLoaders.get(scope);
+                if (loader) {
+                    await loader();
+                }
+            }
+            const missing = [];
+            for (const [adapterId, value] of Object.entries(checkpoint.state)) {
+                const adapter = this.adapters.get(adapterId);
+                if (!adapter) {
+                    missing.push(adapterId);
+                    continue;
+                }
+                await adapter.restore(this.cloneValue(value, adapterId));
+            }
+            if (missing.length) {
+                this.warning.set(`Skipped ${missing.length} unavailable adapter${missing.length === 1 ? '' : 's'}: ${missing.join(', ')}.`);
+            }
+            await this.router.navigateByUrl(checkpoint.url);
+            return true;
+        }
+        catch (error) {
+            this.error.set(this.messageFor(error, 'Unable to restore checkpoint.'));
+            return false;
+        }
+        finally {
+            this.isBusy.set(false);
+        }
+    }
+    rename(id, name) {
+        const nextName = name.trim();
+        if (!nextName) {
+            this.error.set('A checkpoint name is required.');
+            return;
+        }
+        this.error.set(null);
+        const next = this.checkpoints().map((checkpoint) => checkpoint.id === id ? { ...checkpoint, name: nextName } : checkpoint);
+        this.persistWithEviction(next);
+    }
+    delete(id) {
+        this.error.set(null);
+        this.persistWithEviction(this.checkpoints().filter((checkpoint) => checkpoint.id !== id));
+    }
+    hydrate() {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            const raw = window.localStorage.getItem(STORAGE_KEY);
+            if (!raw)
+                return;
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed))
+                return;
+            const checkpoints = parsed.filter(this.isCheckpoint);
+            const normalized = this.normalizeLegacyNames(checkpoints);
+            const sorted = normalized.checkpoints.sort((a, b) => b.createdAt.localeCompare(a.createdAt) || b.id.localeCompare(a.id));
+            this.checkpoints.set(sorted);
+            if (normalized.changed) {
+                window.localStorage.setItem(STORAGE_KEY, JSON.stringify(sorted));
+            }
+        }
+        catch {
+            this.warning.set('Saved checkpoints could not be read and were ignored.');
+        }
+    }
+    persistWithEviction(checkpoints) {
+        if (!this.isBrowser)
+            return;
+        let candidate = checkpoints;
+        while (true) {
+            try {
+                window.localStorage.setItem(STORAGE_KEY, JSON.stringify(candidate));
+                this.checkpoints.set(candidate);
+                return;
+            }
+            catch (error) {
+                if (!this.isQuotaError(error) || candidate.length === 0) {
+                    throw error;
+                }
+                candidate = candidate.slice(0, -1);
+                this.warning.set('Storage was full; the oldest checkpoint was removed.');
+            }
+        }
+    }
+    cloneValue(value, adapterId) {
+        try {
+            const serialized = JSON.stringify(value);
+            if (serialized === undefined)
+                throw new Error('undefined values are not supported');
+            return JSON.parse(serialized);
+        }
+        catch {
+            throw new Error(`Adapter "${adapterId}" returned a value that cannot be JSON serialized.`);
+        }
+    }
+    getScopes(adapterIds) {
+        return [...new Set(adapterIds.map((id) => id.split(':', 1)[0]))];
+    }
+    routePath(url) {
+        return url.split(/[?#]/, 1)[0] || '/';
+    }
+    nextAutomaticName(route, usedNames = new Set(this.checkpoints().map(({ name }) => name))) {
+        if (!usedNames.has(route))
+            return route;
+        for (let suffix = 2;; suffix += 1) {
+            const candidate = `${route} ${suffix}`;
+            if (!usedNames.has(candidate))
+                return candidate;
+        }
+    }
+    normalizeLegacyNames(checkpoints) {
+        const legacyIds = new Set(checkpoints.filter((checkpoint) => this.isLegacyAutomaticName(checkpoint)).map(({ id }) => id));
+        if (!legacyIds.size)
+            return { checkpoints, changed: false };
+        const usedNames = new Set(checkpoints.filter(({ id }) => !legacyIds.has(id)).map(({ name }) => name));
+        const names = new Map();
+        const oldestFirst = checkpoints
+            .filter(({ id }) => legacyIds.has(id))
+            .sort((a, b) => a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id));
+        for (const checkpoint of oldestFirst) {
+            const name = this.nextAutomaticName(this.routePath(checkpoint.url), usedNames);
+            names.set(checkpoint.id, name);
+            usedNames.add(name);
+        }
+        return {
+            checkpoints: checkpoints.map((checkpoint) => names.has(checkpoint.id) ? { ...checkpoint, name: names.get(checkpoint.id) } : checkpoint),
+            changed: true,
+        };
+    }
+    isLegacyAutomaticName(checkpoint) {
+        const route = this.routePath(checkpoint.url);
+        const prefix = `${route} · `;
+        if (!checkpoint.name.startsWith(prefix))
+            return false;
+        const timestamp = checkpoint.name.slice(prefix.length);
+        if (timestamp === new Date(checkpoint.createdAt).toLocaleString())
+            return true;
+        const parsedTimestamp = Date.parse(timestamp);
+        const createdTimestamp = Date.parse(checkpoint.createdAt);
+        return Number.isFinite(parsedTimestamp) && Number.isFinite(createdTimestamp) &&
+            Math.abs(parsedTimestamp - createdTimestamp) < 1000;
+    }
+    createId() {
+        return `checkpoint-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    }
+    sizeOf(checkpoint) {
+        return new Blob([JSON.stringify(checkpoint)]).size;
+    }
+    isQuotaError(error) {
+        return error instanceof DOMException && (error.name === 'QuotaExceededError' || error.name === 'NS_ERROR_DOM_QUOTA_REACHED');
+    }
+    messageFor(error, fallback) {
+        return error instanceof Error ? error.message : fallback;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorCheckpointRegistry, deps: [{ token: PLATFORM_ID }, { token: Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorCheckpointRegistry }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorCheckpointRegistry, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i1.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }] });
+function provideInspectorCheckpoints() {
+    return [InspectorCheckpointRegistry];
+}
+function createBehaviorSubjectCheckpointAdapter(id, subject) {
+    return {
+        id,
+        capture: () => subject.value,
+        restore: (value) => subject.next(value),
+    };
+}
+
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 const getViewportSize = () => ({
     width: typeof window === 'undefined' ? 1 : window.innerWidth || 1,
@@ -277,34 +541,46 @@ class inspectorComponent {
         this.Math = Math;
         this.formatValue = formatValue;
         this.guideHitboxSize = GUIDE_HITBOX_SIZE;
-        this.overlayRoot = viewChild("overlayRoot");
-        this.highlightColor = "#4f8cff";
-        this.guideColor = "#ff7a00";
+        this.overlayRoot = viewChild('overlayRoot');
+        this.highlightColor = '#4f8cff';
+        this.guideColor = '#ff7a00';
         this.hoverHighlightEnabled = true;
         this.persistOnReload = false;
-        this.enabled = signal(false);
-        this.toolMode = signal("none");
-        this.guideOrientation = signal("vertical");
+        this.checkpointRegistry = inject(InspectorCheckpointRegistry, { optional: true });
+        this.checkpointsOpen = signal(false);
+        this.editingCheckpointId = signal(null);
+        this.enabled = signal(true);
+        this.toolMode = signal('none');
+        this.guideOrientation = signal('vertical');
         this.guides = signal([]);
         this.hoverRect = signal(null);
         this.selectedGuideId = signal(null);
         this.selectedMeasurement = signal(null);
-        this.showTypography = signal(true);
+        this.showTypography = signal(false);
         this.altPressed = signal(false);
         this.distanceOverlay = signal(null);
         this.textBlocks = signal([]);
-        this.guideMenuOpen = signal(false);
         this.guidePreview = signal(null);
         this.selectedMetaLine = computed(() => {
             const selected = this.selectedMeasurement();
             if (!selected) {
-                return "";
+                return '';
             }
             return `${selected.label} · ${formatValue(selected.rect.width)} x ${formatValue(selected.rect.height)} · ${selected.styles.fontSize} / ${selected.styles.lineHeight} / ${selected.styles.color}`;
         });
         this.hydrated = signal(false);
         this.history = signal([]);
         this.historyIndex = signal(-1);
+        this.handleCapturedClick = (event) => {
+            if (!event.shiftKey ||
+                !this.canInspectClick(event) ||
+                !this.selectElementAtPoint(event)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        };
         this.draggingGuideId = null;
         this.selectedElement = null;
         this.hoverElement = null;
@@ -331,7 +607,14 @@ class inspectorComponent {
         });
     }
     ngOnInit() {
-        if (!this.isBrowser || !this.persistOnReload) {
+        if (!this.isBrowser) {
+            this.hydrated.set(true);
+            return;
+        }
+        window.addEventListener('click', this.handleCapturedClick, {
+            capture: true,
+        });
+        if (!this.persistOnReload) {
             this.hydrated.set(true);
             return;
         }
@@ -342,12 +625,12 @@ class inspectorComponent {
         }
         try {
             const parsed = JSON.parse(stored);
-            if (parsed.version === inspector_STATE_VERSION) {
-                this.enabled.set(parsed.enabled);
+            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.showTypography ?? true);
+                this.showTypography.set(parsed.version === 1 ? false : (parsed.showTypography ?? false));
                 this.recordHistory(parsed.guides ?? []);
             }
         }
@@ -357,11 +640,19 @@ class inspectorComponent {
         this.hydrated.set(true);
         this.refreshTypographyBlocks();
     }
+    ngOnDestroy() {
+        if (!this.isBrowser) {
+            return;
+        }
+        window.removeEventListener('click', this.handleCapturedClick, {
+            capture: true,
+        });
+    }
     setToolMode(mode) {
         if (!this.enabled()) {
             this.enabled.set(true);
         }
-        this.toolMode.set(this.toolMode() === mode ? "none" : mode);
+        this.toolMode.set(this.toolMode() === mode ? 'none' : mode);
         this.hoverRect.set(null);
         this.guidePreview.set(null);
         this.distanceOverlay.set(null);
@@ -371,12 +662,42 @@ class inspectorComponent {
         this.guideOrientation.set(orientation);
         this.guidePreview.set(null);
     }
+    activateGuideOrientation(orientation) {
+        const isActive = this.toolMode() === 'guides' && this.guideOrientation() === orientation;
+        this.setGuideOrientation(orientation);
+        if (isActive || this.toolMode() !== 'guides') {
+            this.setToolMode('guides');
+        }
+    }
     toggleTypography() {
         this.showTypography.update((value) => !value);
         this.refreshTypographyBlocks();
     }
-    toggleGuideMenu() {
-        this.guideMenuOpen.update((value) => !value);
+    toggleCheckpoints() {
+        this.checkpointsOpen.update((value) => !value);
+    }
+    disableInspector() {
+        this.setInspectorEnabled(false);
+    }
+    async saveCheckpoint() {
+        await this.checkpointRegistry?.save();
+    }
+    async restoreCheckpoint(checkpoint) {
+        await this.checkpointRegistry?.restore(checkpoint.id);
+    }
+    deleteCheckpoint(checkpoint) {
+        this.checkpointRegistry?.delete(checkpoint.id);
+    }
+    beginRename(checkpoint) {
+        this.editingCheckpointId.set(checkpoint.id);
+    }
+    finishRename(checkpoint, event) {
+        const input = event.target;
+        this.checkpointRegistry?.rename(checkpoint.id, input.value);
+        this.editingCheckpointId.set(null);
+    }
+    cancelRename() {
+        this.editingCheckpointId.set(null);
     }
     clearGuides() {
         this.guides.set([]);
@@ -397,54 +718,50 @@ class inspectorComponent {
     }
     handleKeydown(event) {
         const key = event.key.toLowerCase();
-        if (key === "m") {
-            event.preventDefault();
-            this.enabled.update((value) => !value);
-            if (!this.enabled()) {
-                this.toolMode.set("none");
-                this.hoverRect.set(null);
-                this.selectedGuideId.set(null);
-                this.distanceOverlay.set(null);
-                this.textBlocks.set([]);
-                this.guidePreview.set(null);
+        if (key === 'm') {
+            const target = event.target;
+            if (target?.matches('input, textarea, select') ||
+                target?.isContentEditable) {
+                return;
             }
-            this.refreshTypographyBlocks();
+            event.preventDefault();
+            this.setInspectorEnabled(!this.enabled());
             return;
         }
         if (!this.enabled()) {
             return;
         }
-        if ((event.metaKey || event.ctrlKey) && key === "z") {
+        if ((event.metaKey || event.ctrlKey) && key === 'z') {
             event.preventDefault();
             event.shiftKey ? this.redo() : this.undo();
             return;
         }
-        if (key === "s") {
+        if (key === 's') {
             event.preventDefault();
-            this.setToolMode("select");
+            this.setToolMode('select');
             return;
         }
-        if (key === "g") {
+        if (key === 'g') {
             event.preventDefault();
-            this.setToolMode("guides");
+            this.setToolMode('guides');
             return;
         }
-        if (key === "h") {
+        if (key === 'h') {
             event.preventDefault();
-            this.setGuideOrientation("horizontal");
+            this.setGuideOrientation('horizontal');
             return;
         }
-        if (key === "v") {
+        if (key === 'v') {
             event.preventDefault();
-            this.setGuideOrientation("vertical");
+            this.setGuideOrientation('vertical');
             return;
         }
-        if (event.key === "Alt") {
+        if (event.key === 'Alt') {
             this.altPressed.set(true);
             this.updateDistanceOverlay();
             return;
         }
-        if (key === "escape") {
+        if (key === 'escape') {
             event.preventDefault();
             this.selectedMeasurement.set(null);
             this.selectedGuideId.set(null);
@@ -457,7 +774,7 @@ class inspectorComponent {
             this.refreshTypographyBlocks();
             return;
         }
-        if ((key === "backspace" || key === "delete") && this.selectedGuideId()) {
+        if ((key === 'backspace' || key === 'delete') && this.selectedGuideId()) {
             event.preventDefault();
             const nextGuides = this.guides().filter((guide) => guide.id !== this.selectedGuideId());
             this.guides.set(nextGuides);
@@ -466,7 +783,7 @@ class inspectorComponent {
         }
     }
     handleKeyup(event) {
-        if (event.key === "Alt") {
+        if (event.key === 'Alt') {
             this.altPressed.set(false);
             this.distanceOverlay.set(null);
         }
@@ -482,13 +799,13 @@ class inspectorComponent {
                 if (guide.id !== this.draggingGuideId) {
                     return guide;
                 }
-                const rawPosition = guide.orientation === "vertical" ? event.clientX : event.clientY;
-                const max = guide.orientation === "vertical" ? viewport.width : viewport.height;
+                const rawPosition = guide.orientation === 'vertical' ? event.clientX : event.clientY;
+                const max = guide.orientation === 'vertical' ? viewport.width : viewport.height;
                 return { ...guide, position: clamp(rawPosition, 0, max) };
             }));
             return;
         }
-        if (this.toolMode() === "guides") {
+        if (this.toolMode() === 'guides') {
             this.hoverRect.set(null);
             this.hoverElement = null;
             this.distanceOverlay.set(null);
@@ -501,7 +818,7 @@ class inspectorComponent {
             return;
         }
         this.guidePreview.set(null);
-        if (this.toolMode() !== "select" || !this.hoverHighlightEnabled) {
+        if (this.toolMode() !== 'select' || !this.hoverHighlightEnabled) {
             this.hoverRect.set(null);
             this.hoverElement = null;
             if (!this.altPressed()) {
@@ -535,7 +852,7 @@ class inspectorComponent {
             return;
         }
         const overlay = this.overlayRoot()?.nativeElement ?? null;
-        if (this.toolMode() === "guides") {
+        if (this.toolMode() === 'guides') {
             if (overlay && overlay.contains(event.target)) {
                 return;
             }
@@ -544,16 +861,52 @@ class inspectorComponent {
             this.guidePreview.set(guide);
             return;
         }
-        if (this.toolMode() !== "select") {
+        if (!this.canInspectClick(event)) {
             return;
         }
+        this.selectElementAtPoint(event);
+    }
+    handleViewportChange() {
+        if (this.selectedElement && document.contains(this.selectedElement)) {
+            this.selectedMeasurement.set(getInspectMeasurement(this.selectedElement));
+        }
+        this.updateDistanceOverlay();
+        this.refreshTypographyBlocks();
+    }
+    canInspectClick(event) {
+        if (!this.enabled() || !this.isBrowser || this.toolMode() !== 'select') {
+            return false;
+        }
+        const overlay = this.overlayRoot()?.nativeElement ?? null;
+        return !(overlay && overlay.contains(event.target));
+    }
+    setInspectorEnabled(enabled) {
+        this.enabled.set(enabled);
+        if (!enabled) {
+            this.toolMode.set('none');
+            this.hoverRect.set(null);
+            this.selectedGuideId.set(null);
+            this.selectedMeasurement.set(null);
+            this.distanceOverlay.set(null);
+            this.textBlocks.set([]);
+            this.guidePreview.set(null);
+            this.checkpointsOpen.set(false);
+            this.altPressed.set(false);
+            this.selectedElement = null;
+            this.hoverElement = null;
+            this.draggingGuideId = null;
+        }
+        this.refreshTypographyBlocks();
+    }
+    selectElementAtPoint(event) {
+        const overlay = this.overlayRoot()?.nativeElement ?? null;
         const target = getTargetElement({ x: event.clientX, y: event.clientY }, overlay);
         if (!target) {
             this.selectedMeasurement.set(null);
             this.selectedElement = null;
             this.distanceOverlay.set(null);
             this.refreshTypographyBlocks();
-            return;
+            return false;
         }
         // Ctrl+click: select the minimum common parent of current selection and clicked element
         if ((event.ctrlKey || event.metaKey) && this.selectedElement) {
@@ -565,7 +918,7 @@ class inspectorComponent {
                 this.selectedElement = commonParent;
                 this.updateDistanceOverlay();
                 this.refreshTypographyBlocks();
-                return;
+                return true;
             }
         }
         this.selectedMeasurement.set(getInspectMeasurement(target));
@@ -573,13 +926,7 @@ class inspectorComponent {
         this.selectedGuideId.set(this.findGuideAtPoint(event.clientX, event.clientY));
         this.updateDistanceOverlay();
         this.refreshTypographyBlocks();
-    }
-    handleViewportChange() {
-        if (this.selectedElement && document.contains(this.selectedElement)) {
-            this.selectedMeasurement.set(getInspectMeasurement(this.selectedElement));
-        }
-        this.updateDistanceOverlay();
-        this.refreshTypographyBlocks();
+        return true;
     }
     updateDistanceOverlay() {
         if (!this.altPressed() ||
@@ -622,10 +969,10 @@ class inspectorComponent {
     getGuidePreview(event) {
         const viewport = getViewportSize();
         const orientation = this.guideOrientation();
-        const rawPosition = orientation === "vertical" ? event.clientX : event.clientY;
-        const max = orientation === "vertical" ? viewport.width : viewport.height;
+        const rawPosition = orientation === 'vertical' ? event.clientX : event.clientY;
+        const max = orientation === 'vertical' ? viewport.width : viewport.height;
         return {
-            id: "preview",
+            id: 'preview',
             orientation,
             position: this.snapGuide(clamp(rawPosition, 0, max)),
         };
@@ -640,11 +987,11 @@ class inspectorComponent {
     }
     findGuideAtPoint(x, y) {
         for (const guide of this.guides()) {
-            if (guide.orientation === "vertical" &&
+            if (guide.orientation === 'vertical' &&
                 Math.abs(guide.position - x) <= GUIDE_HITBOX_SIZE) {
                 return guide.id;
             }
-            if (guide.orientation === "horizontal" &&
+            if (guide.orientation === 'horizontal' &&
                 Math.abs(guide.position - y) <= GUIDE_HITBOX_SIZE) {
                 return guide.id;
             }
@@ -695,11 +1042,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:keyup": "handleKeyup($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 }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  <div class=\"inspector-toolbar\">\n    <div class=\"inspector-toolbar__rail\">\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"toolMode() === 'select'\"\n        (click)=\"setToolMode('select')\"\n        title=\"Select mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"showTypography()\"\n        (click)=\"toggleTypography()\"\n        title=\"Typography mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n        </svg>\n      </button>\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--guide-main\"\n          [class.is-active]=\"toolMode() === 'guides'\"\n          (click)=\"setToolMode('guides')\"\n          title=\"Guides mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 2h1v12H4zM11 2h1v12h-1zM2 4h12v1H2zM2 11h12v1H2z\" />\n          </svg>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--ghost inspector-icon-button--guide-menu\"\n          [class.is-active]=\"guideMenuOpen()\"\n          (click)=\"toggleGuideMenu()\"\n          title=\"Guide options\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4.47 6.97L8 10.5l3.53-3.53-.94-.94L8 8.62 5.41 6.03z\" />\n          </svg>\n        </button>\n\n        @if (guideMenuOpen()) {\n          <div class=\"inspector-guide-menu\">\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'vertical'\"\n              (click)=\"setGuideOrientation('vertical')\"\n            >\n              Vertical\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'horizontal'\"\n              (click)=\"setGuideOrientation('horizontal')\"\n            >\n              Horizontal\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment inspector-segment--danger\"\n              (click)=\"clearGuides()\"\n            >\n              Clear\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:18px;right:18px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__rail{align-items:center}.inspector-guide-group{position:relative;display:flex;gap:0;align-items:center;border-radius:6px}.inspector-guide-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:max-content;flex-direction:column;align-items:stretch}.inspector-guide-menu .inspector-segment{justify-content:flex-start;width:100%}.inspector-icon-button,.inspector-segment{display:inline-flex;align-items:center;justify-content:center;height:26px;border:0;border-radius:6px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .12s ease,color .12s ease;font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{width:26px}.inspector-icon-button svg{width:14px;height:14px;fill:currentColor}.inspector-icon-button:hover,.inspector-segment:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active,.inspector-segment.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--ghost.is-active{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button--guide-main{border-radius:6px 0 0 6px}.inspector-icon-button--guide-menu{width:20px;border-radius:0 6px 6px 0}.inspector-icon-button--guide-menu svg{width:12px;height:12px}.inspector-segment{padding:0 8px;white-space:nowrap}.inspector-segment--danger:hover{background:#ef444429;color:#fecaca}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"], 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", persistOnReload: "persistOnReload" }, host: { listeners: { "window:keydown": "handleKeydown($event)", "window:keyup": "handleKeyup($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 }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (enabled()) {\n    <div class=\"inspector-toolbar\">\n      <div class=\"inspector-toolbar__rail\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button\"\n          [class.is-active]=\"toolMode() === 'select'\"\n          (click)=\"setToolMode('select')\"\n          aria-label=\"Select mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Select</span>\n        </button>\n\n        @if (checkpointRegistry) {\n          <div class=\"inspector-checkpoint-group\">\n            <button\n              type=\"button\"\n              class=\"inspector-icon-button\"\n              [class.is-active]=\"checkpointsOpen()\"\n              (click)=\"toggleCheckpoints()\"\n              aria-label=\"Checkpoints\"\n            >\n              <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                <path d=\"M3 2.5h10v11H3zm2 2v2h6v-2zm0 4v2h4v-2z\" />\n              </svg>\n              <span class=\"inspector-tooltip\" role=\"tooltip\">Checkpoints</span>\n            </button>\n\n            @if (checkpointsOpen()) {\n              <section class=\"inspector-checkpoint-panel\" aria-label=\"Saved checkpoints\">\n                <header class=\"inspector-checkpoint-panel__header\">\n                  <div>\n                    <strong>Checkpoints</strong>\n                    <span>{{ checkpointRegistry.checkpoints().length }}</span>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"inspector-checkpoint-save\"\n                    (click)=\"saveCheckpoint()\"\n                    [disabled]=\"checkpointRegistry.isBusy()\"\n                  >\n                    {{ checkpointRegistry.isBusy() ? 'Working\u2026' : 'Save current' }}\n                  </button>\n                </header>\n\n                @if (checkpointRegistry.error(); as error) {\n                  <p class=\"inspector-checkpoint-message inspector-checkpoint-message--error\">{{ error }}</p>\n                }\n                @if (checkpointRegistry.warning(); as warning) {\n                  <p class=\"inspector-checkpoint-message\">{{ warning }}</p>\n                }\n\n                @if (checkpointRegistry.checkpoints().length) {\n                  <div class=\"inspector-checkpoint-list\">\n                    @for (checkpoint of checkpointRegistry.checkpoints(); track checkpoint.id) {\n                      <article class=\"inspector-checkpoint-item\">\n                        <div class=\"inspector-checkpoint-item__main\">\n                          @if (editingCheckpointId() === checkpoint.id) {\n                            <input\n                              #checkpointName\n                              class=\"inspector-checkpoint-name-input\"\n                              [value]=\"checkpoint.name\"\n                              (keydown.enter)=\"finishRename(checkpoint, $event)\"\n                              (keydown.escape)=\"cancelRename()\"\n                              (blur)=\"finishRename(checkpoint, $event)\"\n                              aria-label=\"Checkpoint name\"\n                              autofocus\n                            />\n                          } @else {\n                            <button type=\"button\" class=\"inspector-checkpoint-name\" (click)=\"beginRename(checkpoint)\">\n                              {{ checkpoint.name }}\n                            </button>\n                          }\n                        </div>\n                        <div class=\"inspector-checkpoint-actions\">\n                          <button type=\"button\" (click)=\"restoreCheckpoint(checkpoint)\" [disabled]=\"checkpointRegistry.isBusy()\">Restore</button>\n                          <button type=\"button\" (click)=\"deleteCheckpoint(checkpoint)\" [disabled]=\"checkpointRegistry.isBusy()\">Delete</button>\n                        </div>\n                      </article>\n                    }\n                  </div>\n                } @else {\n                  <p class=\"inspector-checkpoint-empty\">No checkpoints yet.</p>\n                }\n              </section>\n            }\n          </div>\n        }\n\n        <div class=\"inspector-toolbar__secondary\">\n          <div class=\"inspector-toolbar__reveal\">\n            <div class=\"inspector-toolbar__reveal-inner\">\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"showTypography()\"\n                (click)=\"toggleTypography()\"\n                aria-label=\"Typography overlay\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Typography</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'vertical'\"\n                (click)=\"activateGuideOrientation('vertical')\"\n                aria-label=\"Vertical guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Vertical guides</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'horizontal'\"\n                (click)=\"activateGuideOrientation('horizontal')\"\n                aria-label=\"Horizontal guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M2 7.25h12v1.5H2z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Horizontal guides</span>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <span class=\"inspector-toolbar__divider\" aria-hidden=\"true\"></span>\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--power\"\n          (click)=\"disableInspector()\"\n          aria-label=\"Disable inspector; press M to enable\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path 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          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Disable</span>\n        </button>\n      </div>\n    </div>\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: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:12px;right:12px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail{display:flex;flex-direction:column;align-items:center;gap:2px;width:30px;padding:2px;border-radius:4px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__divider{width:16px;height:1px;margin-block:2px;background:var(--inspector-panel-edge)}.inspector-toolbar__secondary{display:grid;width:24px}.inspector-toolbar__reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-4px);transition:grid-template-rows .18s cubic-bezier(.16,1,.3,1),opacity .12s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}.inspector-toolbar__reveal-inner{display:grid;gap:2px;min-height:0;overflow:hidden}.inspector-toolbar__rail:hover .inspector-toolbar__reveal,.inspector-toolbar__rail:focus-within .inspector-toolbar__reveal{grid-template-rows:1fr;opacity:1;transform:translateY(2px)}.inspector-checkpoint-group{position:relative;width:24px;height:24px}.inspector-checkpoint-panel{position:absolute;top:0;right:calc(100% + 8px);width:min(300px,calc(100vw - 24px));max-height:min(420px,calc(100vh - 64px));overflow:auto;border:1px solid var(--inspector-panel-edge);border-radius:8px;background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;color:var(--inspector-text)}.inspector-checkpoint-panel__header,.inspector-checkpoint-item,.inspector-checkpoint-actions{display:flex;align-items:center}.inspector-checkpoint-panel__header{justify-content:space-between;gap:8px;padding:6px 8px;border-bottom:1px solid var(--inspector-panel-edge)}.inspector-checkpoint-panel__header strong,.inspector-checkpoint-panel__header span{display:inline}.inspector-checkpoint-panel__header strong{font-size:12px}.inspector-checkpoint-panel__header span{margin-left:5px}.inspector-checkpoint-panel__header span,.inspector-checkpoint-empty,.inspector-checkpoint-message{color:var(--inspector-muted);font-size:10px;line-height:1.4}.inspector-checkpoint-save,.inspector-checkpoint-actions button,.inspector-checkpoint-name{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}.inspector-checkpoint-save{padding:5px 7px;border-radius:5px;background:#4f8cff2e;color:#dbeafe;font-size:10px}.inspector-checkpoint-list{display:grid}.inspector-checkpoint-item{justify-content:space-between;gap:8px;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.05)}.inspector-checkpoint-item__main{flex:1 1 auto;min-width:0}.inspector-checkpoint-name,.inspector-checkpoint-name-input{display:block;max-width:100%;overflow:hidden;padding:0;color:var(--inspector-text);font-size:11px;font-weight:600;text-align:left;text-overflow:ellipsis;white-space:nowrap}.inspector-checkpoint-name-input{width:100%;border:1px solid rgba(79,140,255,.6);border-radius:3px;background:#0003;outline:none}.inspector-checkpoint-actions{gap:2px;flex:0 0 auto}.inspector-checkpoint-actions button{padding:4px;border-radius:4px;color:var(--inspector-muted);font-size:10px}.inspector-checkpoint-actions button:hover,.inspector-checkpoint-name:hover,.inspector-checkpoint-save:hover{color:var(--inspector-text);background:#ffffff14}.inspector-checkpoint-empty,.inspector-checkpoint-message{margin:0;padding:12px 10px}.inspector-checkpoint-message--error{color:#fecaca}.inspector-icon-button{display:inline-flex;align-items:center;justify-content:center;height:24px;border:0;border-radius:3px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .1s cubic-bezier(.16,1,.3,1),color .1s cubic-bezier(.16,1,.3,1),transform .1s cubic-bezier(.16,1,.3,1);font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{position:relative;width:24px}.inspector-icon-button svg{width:13px;height:13px;fill:currentColor}.inspector-icon-button:active{transform:translateY(1px)}.inspector-icon-button:focus-visible{outline:2px solid var(--inspector-blue);outline-offset:2px}.inspector-icon-button:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--power:hover{background:#ef444429;color:#fecaca}.inspector-tooltip{position:absolute;top:50%;right:calc(100% + 7px);z-index:20;width:max-content;padding:4px 6px;border:1px solid var(--inspector-panel-edge);border-radius:3px;background:#111318fa;color:var(--inspector-text);font-size:10px;font-weight:600;line-height:1.2;opacity:0;pointer-events:none;transform:translate(3px,-50%);transition:opacity .12s cubic-bezier(.16,1,.3,1),transform .12s cubic-bezier(.16,1,.3,1);white-space:nowrap}.inspector-icon-button:hover .inspector-tooltip,.inspector-icon-button:focus-visible .inspector-tooltip{opacity:1;transform:translateY(-50%)}@media (prefers-reduced-motion: reduce){.inspector-toolbar__reveal,.inspector-icon-button,.inspector-tooltip{transition-duration:.01ms}}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"], 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  <div class=\"inspector-toolbar\">\n    <div class=\"inspector-toolbar__rail\">\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"toolMode() === 'select'\"\n        (click)=\"setToolMode('select')\"\n        title=\"Select mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        class=\"inspector-icon-button\"\n        [class.is-active]=\"showTypography()\"\n        (click)=\"toggleTypography()\"\n        title=\"Typography mode\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n        </svg>\n      </button>\n      <div class=\"inspector-guide-group\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--guide-main\"\n          [class.is-active]=\"toolMode() === 'guides'\"\n          (click)=\"setToolMode('guides')\"\n          title=\"Guides mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 2h1v12H4zM11 2h1v12h-1zM2 4h12v1H2zM2 11h12v1H2z\" />\n          </svg>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--ghost inspector-icon-button--guide-menu\"\n          [class.is-active]=\"guideMenuOpen()\"\n          (click)=\"toggleGuideMenu()\"\n          title=\"Guide options\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4.47 6.97L8 10.5l3.53-3.53-.94-.94L8 8.62 5.41 6.03z\" />\n          </svg>\n        </button>\n\n        @if (guideMenuOpen()) {\n          <div class=\"inspector-guide-menu\">\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'vertical'\"\n              (click)=\"setGuideOrientation('vertical')\"\n            >\n              Vertical\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment\"\n              [class.is-active]=\"guideOrientation() === 'horizontal'\"\n              (click)=\"setGuideOrientation('horizontal')\"\n            >\n              Horizontal\n            </button>\n            <button\n              type=\"button\"\n              class=\"inspector-segment inspector-segment--danger\"\n              (click)=\"clearGuides()\"\n            >\n              Clear\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top - 8\"\n      >\n        M {{ formatEdges(selected.margin) }}\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--selected\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top\"\n        [style.width.px]=\"selected.rect.width\"\n        [style.height.px]=\"selected.rect.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      >\n        <div class=\"inspector-label\">{{ selectedMetaLine() }}</div>\n      </div>\n\n      <div\n        class=\"inspector-box inspector-box--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"selected.paddingRect.top\"\n        [style.width.px]=\"selected.paddingRect.width\"\n        [style.height.px]=\"selected.paddingRect.height\"\n      ></div>\n      <div\n        class=\"inspector-box-tag inspector-box-tag--padding\"\n        [style.left.px]=\"selected.paddingRect.left\"\n        [style.top.px]=\"\n          selected.paddingRect.top + selected.paddingRect.height + 8\n        \"\n      >\n        P {{ formatEdges(selected.padding) }}\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:18px;right:18px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail,.inspector-guide-menu{display:flex;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__rail{align-items:center}.inspector-guide-group{position:relative;display:flex;gap:0;align-items:center;border-radius:6px}.inspector-guide-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:max-content;flex-direction:column;align-items:stretch}.inspector-guide-menu .inspector-segment{justify-content:flex-start;width:100%}.inspector-icon-button,.inspector-segment{display:inline-flex;align-items:center;justify-content:center;height:26px;border:0;border-radius:6px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .12s ease,color .12s ease;font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{width:26px}.inspector-icon-button svg{width:14px;height:14px;fill:currentColor}.inspector-icon-button:hover,.inspector-segment:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active,.inspector-segment.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--ghost.is-active{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button--guide-main{border-radius:6px 0 0 6px}.inspector-icon-button--guide-menu{width:20px;border-radius:0 6px 6px 0}.inspector-icon-button--guide-menu svg{width:12px;height:12px}.inspector-segment{padding:0 8px;white-space:nowrap}.inspector-segment--danger:hover{background:#ef444429;color:#fecaca}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"] }]
+            args: [{ selector: 'inspector-overlay', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (enabled()) {\n    <div class=\"inspector-toolbar\">\n      <div class=\"inspector-toolbar__rail\">\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button\"\n          [class.is-active]=\"toolMode() === 'select'\"\n          (click)=\"setToolMode('select')\"\n          aria-label=\"Select mode\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Select</span>\n        </button>\n\n        @if (checkpointRegistry) {\n          <div class=\"inspector-checkpoint-group\">\n            <button\n              type=\"button\"\n              class=\"inspector-icon-button\"\n              [class.is-active]=\"checkpointsOpen()\"\n              (click)=\"toggleCheckpoints()\"\n              aria-label=\"Checkpoints\"\n            >\n              <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                <path d=\"M3 2.5h10v11H3zm2 2v2h6v-2zm0 4v2h4v-2z\" />\n              </svg>\n              <span class=\"inspector-tooltip\" role=\"tooltip\">Checkpoints</span>\n            </button>\n\n            @if (checkpointsOpen()) {\n              <section class=\"inspector-checkpoint-panel\" aria-label=\"Saved checkpoints\">\n                <header class=\"inspector-checkpoint-panel__header\">\n                  <div>\n                    <strong>Checkpoints</strong>\n                    <span>{{ checkpointRegistry.checkpoints().length }}</span>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"inspector-checkpoint-save\"\n                    (click)=\"saveCheckpoint()\"\n                    [disabled]=\"checkpointRegistry.isBusy()\"\n                  >\n                    {{ checkpointRegistry.isBusy() ? 'Working\u2026' : 'Save current' }}\n                  </button>\n                </header>\n\n                @if (checkpointRegistry.error(); as error) {\n                  <p class=\"inspector-checkpoint-message inspector-checkpoint-message--error\">{{ error }}</p>\n                }\n                @if (checkpointRegistry.warning(); as warning) {\n                  <p class=\"inspector-checkpoint-message\">{{ warning }}</p>\n                }\n\n                @if (checkpointRegistry.checkpoints().length) {\n                  <div class=\"inspector-checkpoint-list\">\n                    @for (checkpoint of checkpointRegistry.checkpoints(); track checkpoint.id) {\n                      <article class=\"inspector-checkpoint-item\">\n                        <div class=\"inspector-checkpoint-item__main\">\n                          @if (editingCheckpointId() === checkpoint.id) {\n                            <input\n                              #checkpointName\n                              class=\"inspector-checkpoint-name-input\"\n                              [value]=\"checkpoint.name\"\n                              (keydown.enter)=\"finishRename(checkpoint, $event)\"\n                              (keydown.escape)=\"cancelRename()\"\n                              (blur)=\"finishRename(checkpoint, $event)\"\n                              aria-label=\"Checkpoint name\"\n                              autofocus\n                            />\n                          } @else {\n                            <button type=\"button\" class=\"inspector-checkpoint-name\" (click)=\"beginRename(checkpoint)\">\n                              {{ checkpoint.name }}\n                            </button>\n                          }\n                        </div>\n                        <div class=\"inspector-checkpoint-actions\">\n                          <button type=\"button\" (click)=\"restoreCheckpoint(checkpoint)\" [disabled]=\"checkpointRegistry.isBusy()\">Restore</button>\n                          <button type=\"button\" (click)=\"deleteCheckpoint(checkpoint)\" [disabled]=\"checkpointRegistry.isBusy()\">Delete</button>\n                        </div>\n                      </article>\n                    }\n                  </div>\n                } @else {\n                  <p class=\"inspector-checkpoint-empty\">No checkpoints yet.</p>\n                }\n              </section>\n            }\n          </div>\n        }\n\n        <div class=\"inspector-toolbar__secondary\">\n          <div class=\"inspector-toolbar__reveal\">\n            <div class=\"inspector-toolbar__reveal-inner\">\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"showTypography()\"\n                (click)=\"toggleTypography()\"\n                aria-label=\"Typography overlay\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Typography</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'vertical'\"\n                (click)=\"activateGuideOrientation('vertical')\"\n                aria-label=\"Vertical guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Vertical guides</span>\n              </button>\n\n              <button\n                type=\"button\"\n                class=\"inspector-icon-button\"\n                [class.is-active]=\"toolMode() === 'guides' && guideOrientation() === 'horizontal'\"\n                (click)=\"activateGuideOrientation('horizontal')\"\n                aria-label=\"Horizontal guides\"\n              >\n                <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                  <path d=\"M2 7.25h12v1.5H2z\" />\n                </svg>\n                <span class=\"inspector-tooltip\" role=\"tooltip\">Horizontal guides</span>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <span class=\"inspector-toolbar__divider\" aria-hidden=\"true\"></span>\n        <button\n          type=\"button\"\n          class=\"inspector-icon-button inspector-icon-button--power\"\n          (click)=\"disableInspector()\"\n          aria-label=\"Disable inspector; press M to enable\"\n        >\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path 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          </svg>\n          <span class=\"inspector-tooltip\" role=\"tooltip\">Disable</span>\n        </button>\n      </div>\n    </div>\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: rgba(27, 29, 36, .94);--inspector-panel-edge: rgba(255, 255, 255, .08);--inspector-text: #f3f4f6;--inspector-muted: #9ca3af;--inspector-blue: #4f8cff;--inspector-orange: #f59e0b;--inspector-green: #22c55e;--inspector-violet: #a855f7;position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:SF Pro Display,Segoe UI,sans-serif}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-toolbar{position:fixed;top:12px;right:12px;display:block;pointer-events:auto;z-index:10000}.inspector-toolbar__rail{display:flex;flex-direction:column;align-items:center;gap:2px;width:30px;padding:2px;border-radius:4px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.inspector-toolbar__divider{width:16px;height:1px;margin-block:2px;background:var(--inspector-panel-edge)}.inspector-toolbar__secondary{display:grid;width:24px}.inspector-toolbar__reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-4px);transition:grid-template-rows .18s cubic-bezier(.16,1,.3,1),opacity .12s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}.inspector-toolbar__reveal-inner{display:grid;gap:2px;min-height:0;overflow:hidden}.inspector-toolbar__rail:hover .inspector-toolbar__reveal,.inspector-toolbar__rail:focus-within .inspector-toolbar__reveal{grid-template-rows:1fr;opacity:1;transform:translateY(2px)}.inspector-checkpoint-group{position:relative;width:24px;height:24px}.inspector-checkpoint-panel{position:absolute;top:0;right:calc(100% + 8px);width:min(300px,calc(100vw - 24px));max-height:min(420px,calc(100vh - 64px));overflow:auto;border:1px solid var(--inspector-panel-edge);border-radius:8px;background:var(--inspector-panel);box-shadow:0 18px 40px #00000052;color:var(--inspector-text)}.inspector-checkpoint-panel__header,.inspector-checkpoint-item,.inspector-checkpoint-actions{display:flex;align-items:center}.inspector-checkpoint-panel__header{justify-content:space-between;gap:8px;padding:6px 8px;border-bottom:1px solid var(--inspector-panel-edge)}.inspector-checkpoint-panel__header strong,.inspector-checkpoint-panel__header span{display:inline}.inspector-checkpoint-panel__header strong{font-size:12px}.inspector-checkpoint-panel__header span{margin-left:5px}.inspector-checkpoint-panel__header span,.inspector-checkpoint-empty,.inspector-checkpoint-message{color:var(--inspector-muted);font-size:10px;line-height:1.4}.inspector-checkpoint-save,.inspector-checkpoint-actions button,.inspector-checkpoint-name{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}.inspector-checkpoint-save{padding:5px 7px;border-radius:5px;background:#4f8cff2e;color:#dbeafe;font-size:10px}.inspector-checkpoint-list{display:grid}.inspector-checkpoint-item{justify-content:space-between;gap:8px;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.05)}.inspector-checkpoint-item__main{flex:1 1 auto;min-width:0}.inspector-checkpoint-name,.inspector-checkpoint-name-input{display:block;max-width:100%;overflow:hidden;padding:0;color:var(--inspector-text);font-size:11px;font-weight:600;text-align:left;text-overflow:ellipsis;white-space:nowrap}.inspector-checkpoint-name-input{width:100%;border:1px solid rgba(79,140,255,.6);border-radius:3px;background:#0003;outline:none}.inspector-checkpoint-actions{gap:2px;flex:0 0 auto}.inspector-checkpoint-actions button{padding:4px;border-radius:4px;color:var(--inspector-muted);font-size:10px}.inspector-checkpoint-actions button:hover,.inspector-checkpoint-name:hover,.inspector-checkpoint-save:hover{color:var(--inspector-text);background:#ffffff14}.inspector-checkpoint-empty,.inspector-checkpoint-message{margin:0;padding:12px 10px}.inspector-checkpoint-message--error{color:#fecaca}.inspector-icon-button{display:inline-flex;align-items:center;justify-content:center;height:24px;border:0;border-radius:3px;background:transparent;color:var(--inspector-muted);cursor:pointer;transition:background .1s cubic-bezier(.16,1,.3,1),color .1s cubic-bezier(.16,1,.3,1),transform .1s cubic-bezier(.16,1,.3,1);font:inherit;font-size:11px;letter-spacing:.02em}.inspector-icon-button{position:relative;width:24px}.inspector-icon-button svg{width:13px;height:13px;fill:currentColor}.inspector-icon-button:active{transform:translateY(1px)}.inspector-icon-button:focus-visible{outline:2px solid var(--inspector-blue);outline-offset:2px}.inspector-icon-button:hover{background:#ffffff14;color:var(--inspector-text)}.inspector-icon-button.is-active{background:#4f8cff2e;color:#dbeafe}.inspector-icon-button--power:hover{background:#ef444429;color:#fecaca}.inspector-tooltip{position:absolute;top:50%;right:calc(100% + 7px);z-index:20;width:max-content;padding:4px 6px;border:1px solid var(--inspector-panel-edge);border-radius:3px;background:#111318fa;color:var(--inspector-text);font-size:10px;font-weight:600;line-height:1.2;opacity:0;pointer-events:none;transform:translate(3px,-50%);transition:opacity .12s cubic-bezier(.16,1,.3,1),transform .12s cubic-bezier(.16,1,.3,1);white-space:nowrap}.inspector-icon-button:hover .inspector-tooltip,.inspector-icon-button:focus-visible .inspector-tooltip{opacity:1;transform:translateY(-50%)}@media (prefers-reduced-motion: reduce){.inspector-toolbar__reveal,.inspector-icon-button,.inspector-tooltip{transition-duration:.01ms}}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f59e0bd1;background:#f59e0b14}.inspector-box--padding{border-color:#22c55ed1;background:#22c55e14}.inspector-box--gap{border-color:#a855f7b8;background:#a855f70a}.inspector-box--distance{border-style:dashed;border-color:#4f8cffb3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{font-variant-numeric:tabular-nums}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 8px));max-width:min(420px,calc(100vw - 24px));padding:6px 9px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:var(--inspector-panel);color:var(--inspector-text);box-shadow:0 18px 40px #00000042;font-size:11px;line-height:1;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:var(--inspector-text);box-shadow:0 12px 24px #0003;font-size:10px;line-height:1;pointer-events:none}.inspector-box-tag--margin{color:#fbbf24}.inspector-box-tag--padding{color:#86efac;transform:translateY(0)}.inspector-box-tag--gap{color:#d8b4fe}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:6px;align-items:center;padding:4px 6px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f0;color:#e5e7eb;box-shadow:0 12px 24px #00000038;font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#4f8cffb8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:5px 7px;border-radius:999px;border:1px solid var(--inspector-panel-edge);background:#111827f2;color:var(--inspector-text);font-size:10px;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -713,30 +1060,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], handleKeydown: [{
                 type: HostListener,
-                args: ["window:keydown", ["$event"]]
+                args: ['window:keydown', ['$event']]
             }], handleKeyup: [{
                 type: HostListener,
-                args: ["window:keyup", ["$event"]]
+                args: ['window:keyup', ['$event']]
             }], handlePointerMove: [{
                 type: HostListener,
-                args: ["window:pointermove", ["$event"]]
+                args: ['window:pointermove', ['$event']]
             }], handlePointerUp: [{
                 type: HostListener,
-                args: ["window:pointerup"]
+                args: ['window:pointerup']
             }], handleClick: [{
                 type: HostListener,
-                args: ["window:click", ["$event"]]
+                args: ['window:click', ['$event']]
             }], handleViewportChange: [{
                 type: HostListener,
-                args: ["window:resize"]
+                args: ['window:resize']
             }, {
                 type: HostListener,
-                args: ["window:scroll"]
+                args: ['window:scroll']
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, clamp, createId, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, inspector_STATE_VERSION, inspector_STORAGE_KEY, rectContainsPoint, rectsEqual };
+export { GUIDE_HITBOX_SIZE, GUIDE_SNAP_DISTANCE, InspectorCheckpointRegistry, clamp, createBehaviorSubjectCheckpointAdapter, createId, formatValue, getDistanceOverlay, getElementLabel, getInspectMeasurement, getRectFromDom, getTargetElement, getTextInspection, getViewportSize, getVisibleTextBlocks, inspectorComponent, inspector_STATE_VERSION, inspector_STORAGE_KEY, provideInspectorCheckpoints, rectContainsPoint, rectsEqual };
 //# sourceMappingURL=inspector-ng.mjs.map