inspector-ng 0.0.16 → 0.0.22

package/fesm2022/inspector-ng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, signal, Optional, makeEnvironmentProviders, viewChild, inject, computed, HostListener, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, signal, Optional, makeEnvironmentProviders, viewChild, inject, computed, effect, HostListener, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/router';
 import { Router } from '@angular/router';
@@ -169,6 +169,34 @@ class InspectorCheckpointService {
             this.busy.set(false);
         }
     }
+    async importCheckpoint(value) {
+        this.error.set(null);
+        if (!isCheckpointRecord(value)) {
+            this.error.set('The selected file is not a valid inspector-ng checkpoint. Expected a version 1 checkpoint JSON file.');
+            return null;
+        }
+        this.busy.set(true);
+        try {
+            const persisted = await this.repository.list();
+            const checkpoint = {
+                ...value,
+                id: createCheckpointId(),
+                name: nextAutomaticName(value.name, persisted.map(({ name }) => name)),
+                createdAt: new Date().toISOString(),
+                lastUsedAt: undefined,
+            };
+            await this.repository.put(checkpoint);
+            this.checkpoints.set([checkpoint, ...persisted].sort(recentActivityFirst));
+            return checkpoint;
+        }
+        catch (error) {
+            this.error.set(this.storageMessage(error, 'The checkpoint could not be imported.'));
+            return null;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
     async restore(id) {
         this.error.set(null);
         if (!this.store) {
@@ -208,6 +236,32 @@ class InspectorCheckpointService {
             this.busy.set(false);
         }
     }
+    async navigateToRoute(route) {
+        this.error.set(null);
+        if (!this.router) {
+            this.error.set('The Angular Router is unavailable, so the Inspector cannot navigate.');
+            return false;
+        }
+        this.busy.set(true);
+        try {
+            if (this.router.url !== route && !await this.router.navigateByUrl(route)) {
+                throw new Error(`Navigation to “${route}” was cancelled.`);
+            }
+            return true;
+        }
+        catch (error) {
+            this.error.set(this.messageFor(error, 'The route could not be opened.'));
+            return false;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    resolveRoute(query) {
+        if (!isPlatformBrowser(this.platformId))
+            return null;
+        return resolveRouteQuery(query, this.currentPathname());
+    }
     async rename(id, name) {
         this.error.set(null);
         const nextName = name.trim();
@@ -330,6 +384,25 @@ function nextAutomaticName(route, names) {
             return candidate;
     }
 }
+function resolveRouteQuery(query, basePathname) {
+    const raw = query.trim();
+    if (!raw)
+        return null;
+    if (raw.startsWith('/'))
+        return raw;
+    if (raw === '.' || raw === '..' || raw.startsWith('./') || raw.startsWith('../')) {
+        const base = basePathname.startsWith('/') ? basePathname : `/${basePathname}`;
+        // Resolve against the current route as a directory: "./x" appends to it
+        // and "../x" moves up one route level, like Angular's relative navigation.
+        const directory = base.endsWith('/') ? base : `${base}/`;
+        const url = new URL(raw, `http://inspector.local${directory}`);
+        const pathname = url.pathname.length > 1 && url.pathname.endsWith('/')
+            ? url.pathname.slice(0, -1)
+            : url.pathname;
+        return `${pathname}${url.search}${url.hash}`;
+    }
+    return null;
+}
 function cloneJson(value, failureMessage = 'The NgRx root state is not JSON-serializable. Remove circular or unsupported values and try again.') {
     try {
         const serialized = JSON.stringify(value);
@@ -395,7 +468,7 @@ const rectsEqual = (a, b, epsilon = 0.5) => {
         Math.abs(a.height - b.height) < epsilon);
 };
 
-const getDistanceOverlay = (rectA, rectB) => {
+const getDistanceOverlay = (rectA, rectB, relation) => {
     const rightA = rectA.left + rectA.width;
     const bottomA = rectA.top + rectA.height;
     const rightB = rectB.left + rectB.width;
@@ -404,6 +477,8 @@ const getDistanceOverlay = (rectA, rectB) => {
     const centerAY = rectA.top + rectA.height / 2;
     let horizontal = null;
     let vertical = null;
+    let horizontalDistances = [];
+    let verticalDistances = [];
     const connectors = [];
     const separatedX = rightA <= rectB.left || rightB <= rectA.left;
     const separatedY = bottomA <= rectB.top || bottomB <= rectA.top;
@@ -413,6 +488,7 @@ const getDistanceOverlay = (rectA, rectB) => {
         const x2 = aIsLeft ? rectB.left : rectA.left;
         const y = centerAY;
         horizontal = { x1, x2, y, value: Math.abs(x2 - x1) };
+        horizontalDistances = [horizontal];
         const edgeBX = aIsLeft ? rectB.left : rightB;
         if (y < rectB.top) {
             connectors.push({ x1: edgeBX, y1: y, x2: edgeBX, y2: rectB.top });
@@ -427,6 +503,7 @@ const getDistanceOverlay = (rectA, rectB) => {
         const y2 = aIsTop ? rectB.top : rectA.top;
         const x = centerAX;
         vertical = { y1, y2, x, value: Math.abs(y2 - y1) };
+        verticalDistances = [vertical];
         const edgeBY = aIsTop ? rectB.top : bottomB;
         if (x < rectB.left) {
             connectors.push({ x1: x, y1: edgeBY, x2: rectB.left, y2: edgeBY });
@@ -436,46 +513,54 @@ const getDistanceOverlay = (rectA, rectB) => {
         }
     }
     if (!separatedX && !separatedY) {
-        const nestedRects = getNestedRects(rectA, rectB);
+        const nestedRects = getNestedRects(rectA, rectB, relation);
         if (nestedRects) {
             const { inner, outer } = nestedRects;
             const innerRight = inner.left + inner.width;
             const innerBottom = inner.top + inner.height;
             const outerRight = outer.left + outer.width;
             const outerBottom = outer.top + outer.height;
-            const horizontalBoundary = nearestPositiveBoundary(inner.left - outer.left, outerRight - innerRight);
-            const verticalBoundary = nearestPositiveBoundary(inner.top - outer.top, outerBottom - innerBottom);
+            const horizontalY = inner.top + inner.height / 2;
+            const verticalX = inner.left + inner.width / 2;
+            const startHorizontal = {
+                x1: outer.left,
+                x2: inner.left,
+                y: horizontalY,
+                value: inner.left - outer.left,
+            };
+            const endHorizontal = {
+                x1: innerRight,
+                x2: outerRight,
+                y: horizontalY,
+                value: outerRight - innerRight,
+            };
+            const startVertical = {
+                y1: outer.top,
+                y2: inner.top,
+                x: verticalX,
+                value: inner.top - outer.top,
+            };
+            const endVertical = {
+                y1: innerBottom,
+                y2: outerBottom,
+                x: verticalX,
+                value: outerBottom - innerBottom,
+            };
+            horizontalDistances = [startHorizontal, endHorizontal].filter(({ value }) => value > 0.5);
+            verticalDistances = [startVertical, endVertical].filter(({ value }) => value > 0.5);
+            const horizontalBoundary = nearestPositiveBoundary(startHorizontal.value, endHorizontal.value);
+            const verticalBoundary = nearestPositiveBoundary(startVertical.value, endVertical.value);
             if (horizontalBoundary === 'start') {
-                horizontal = {
-                    x1: outer.left,
-                    x2: inner.left,
-                    y: inner.top + inner.height / 2,
-                    value: inner.left - outer.left,
-                };
+                horizontal = startHorizontal;
             }
             else if (horizontalBoundary === 'end') {
-                horizontal = {
-                    x1: innerRight,
-                    x2: outerRight,
-                    y: inner.top + inner.height / 2,
-                    value: outerRight - innerRight,
-                };
+                horizontal = endHorizontal;
             }
             if (verticalBoundary === 'start') {
-                vertical = {
-                    y1: outer.top,
-                    y2: inner.top,
-                    x: inner.left + inner.width / 2,
-                    value: inner.top - outer.top,
-                };
+                vertical = startVertical;
             }
             else if (verticalBoundary === 'end') {
-                vertical = {
-                    y1: innerBottom,
-                    y2: outerBottom,
-                    x: inner.left + inner.width / 2,
-                    value: outerBottom - innerBottom,
-                };
+                vertical = endVertical;
             }
         }
     }
@@ -485,6 +570,8 @@ const getDistanceOverlay = (rectA, rectB) => {
         rectB,
         horizontal,
         vertical,
+        horizontalDistances,
+        verticalDistances,
         connectors: connectors
             .map((segment) => ({
             x1: clamp(segment.x1, 0, viewport.width),
@@ -496,7 +583,11 @@ const getDistanceOverlay = (rectA, rectB) => {
             Math.abs(segment.y1 - segment.y2) > 0.5),
     };
 };
-const getNestedRects = (rectA, rectB) => {
+const getNestedRects = (rectA, rectB, relation) => {
+    if (relation === 'a-inside-b')
+        return { inner: rectA, outer: rectB };
+    if (relation === 'b-inside-a')
+        return { inner: rectB, outer: rectA };
     if (containsRect(rectA, rectB))
         return { inner: rectB, outer: rectA };
     if (containsRect(rectB, rectA))
@@ -844,10 +935,11 @@ const GENERATED_EXTRA_PET_SPRITES = {
 
 const INSPECTOR_COMMAND_ACTIONS = [
     { id: 'save', label: 'Save', ariaLabel: 'Save checkpoint', keywords: 'save checkpoint capture state' },
+    { id: 'import', label: 'Paste', ariaLabel: 'Import checkpoint from clipboard', keywords: 'import paste load open json checkpoint restore clipboard' },
     { id: 'type', label: 'Type', ariaLabel: 'Toggle typography overlay', keywords: 'type typography text overlay' },
     { id: 'vertical', label: 'V', ariaLabel: 'Vertical guides', keywords: 'vertical v guide guides' },
     { id: 'horizontal', label: 'H', ariaLabel: 'Horizontal guides', keywords: 'horizontal h guide guides' },
-    { id: 'select', label: 'Select', ariaLabel: 'Select mode', keywords: 'select inspect pointer element' },
+    { id: 'select', label: 'Inspect', ariaLabel: 'Inspect mode', keywords: 'inspect select pointer element alt i' },
 ];
 const INSPECTOR_PETS = [
     {
@@ -997,6 +1089,7 @@ class inspectorComponent {
         this.overlayRoot = viewChild('overlayRoot');
         this.checkpointDialog = viewChild('checkpointDialog');
         this.checkpointSearch = viewChild('checkpointSearch');
+        this.checkpointRename = viewChild('checkpointRename');
         this.highlightColor = '#4f8cff';
         this.guideColor = '#ff7a00';
         this.hoverHighlightEnabled = true;
@@ -1021,12 +1114,17 @@ class inspectorComponent {
                 return terms.every((term) => searchableText.includes(term));
             });
         });
-        this.commandResultCount = computed(() => this.filteredCheckpoints().length + this.filteredInspectorActions().length);
+        this.navigateTarget = computed(() => this.checkpointService?.resolveRoute(this.checkpointQuery()) ?? null);
+        this.actionIndexOffset = computed(() => this.filteredCheckpoints().length + (this.navigateTarget() ? 1 : 0));
+        this.commandResultCount = computed(() => this.actionIndexOffset() + this.filteredInspectorActions().length);
         this.activeCommandResultId = computed(() => {
             const checkpoint = this.filteredCheckpoints()[this.activeCommandIndex()];
             if (checkpoint)
                 return `inspector-checkpoint-${checkpoint.id}`;
-            const actionIndex = this.activeCommandIndex() - this.filteredCheckpoints().length;
+            if (this.navigateTarget() && this.activeCommandIndex() === this.filteredCheckpoints().length) {
+                return 'inspector-navigate';
+            }
+            const actionIndex = this.activeCommandIndex() - this.actionIndexOffset();
             const action = this.filteredInspectorActions()[actionIndex];
             return action ? `inspector-action-${action.id}` : null;
         });
@@ -1034,6 +1132,29 @@ class inspectorComponent {
         this.toolMode = signal('none');
         this.guideOrientation = signal('vertical');
         this.guides = signal([]);
+        this.guideDistances = computed(() => {
+            const distances = [];
+            const preview = this.guidePreview();
+            const visibleGuides = preview
+                ? [...this.guides(), preview]
+                : this.guides();
+            for (const orientation of ['vertical', 'horizontal']) {
+                const positions = visibleGuides
+                    .filter((guide) => guide.orientation === orientation)
+                    .map((guide) => guide.position)
+                    .filter((position, index, allPositions) => allPositions.indexOf(position) === index)
+                    .sort((positionA, positionB) => positionA - positionB);
+                for (let index = 1; index < positions.length; index += 1) {
+                    const start = positions[index - 1];
+                    const end = positions[index];
+                    const value = end - start;
+                    if (value > 0.5) {
+                        distances.push({ orientation, start, end, value });
+                    }
+                }
+            }
+            return distances;
+        });
         this.hoverRect = signal(null);
         this.selectedGuideId = signal(null);
         this.selectedMeasurement = signal(null);
@@ -1068,6 +1189,13 @@ class inspectorComponent {
         this.trackTextBlock = (_index, block) => block.id;
         this.trackConnector = (_index, connector) => `${connector.x1}:${connector.y1}:${connector.x2}:${connector.y2}`;
         this.isBrowser = isPlatformBrowser(platformId);
+        effect(() => {
+            if (!this.editingCheckpointId())
+                return;
+            const input = this.checkpointRename()?.nativeElement;
+            input?.focus();
+            input?.select();
+        });
     }
     ngOnInit() {
         if (!this.isBrowser)
@@ -1123,6 +1251,53 @@ class inspectorComponent {
             this.showCheckpointToast(this.checkpointService.error(), true);
         }
     }
+    downloadCheckpoint(checkpoint, event) {
+        event?.stopPropagation();
+        if (!this.isBrowser)
+            return;
+        const blob = new Blob([JSON.stringify(checkpoint, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = this.checkpointFileName(checkpoint);
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        URL.revokeObjectURL(url);
+        this.showCheckpointToast(`Exported “${checkpoint.name}”.`);
+    }
+    async beginImport() {
+        if (!this.checkpointService || this.checkpointService.busy())
+            return;
+        let text;
+        try {
+            text = await navigator.clipboard.readText();
+        }
+        catch {
+            this.showCheckpointToast('Could not read clipboard.', true);
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(text);
+        }
+        catch {
+            this.showCheckpointToast('The clipboard does not contain valid JSON.', true);
+            return;
+        }
+        const checkpoint = await this.checkpointService.importCheckpoint(parsed);
+        if (checkpoint) {
+            this.showCheckpointToast(`Imported “${checkpoint.name}”.`);
+            if (this.commandBarOpen()) {
+                const index = this.filteredInspectorActions().findIndex(({ id }) => id === 'import');
+                if (index >= 0)
+                    this.setActiveInspectorAction(index);
+            }
+        }
+        else if (this.checkpointService.error()) {
+            this.showCheckpointToast(this.checkpointService.error(), true);
+        }
+    }
     async openCheckpointCommandBar() {
         if (!this.checkpointService || !this.isBrowser || this.commandBarOpen())
             return;
@@ -1161,13 +1336,8 @@ class inspectorComponent {
     setActiveCheckpoint(index) {
         this.activeCommandIndex.set(index);
     }
-    shouldShowCheckpointRoute(checkpoint) {
-        if (!checkpoint.route.trim())
-            return false;
-        return this.normalizeCheckpointLabel(checkpoint.name) !== this.normalizeCheckpointLabel(checkpoint.route);
-    }
     setActiveInspectorAction(index) {
-        this.activeCommandIndex.set(this.filteredCheckpoints().length + index);
+        this.activeCommandIndex.set(this.actionIndexOffset() + index);
     }
     async executeInspectorAction(action) {
         if (this.checkpointService?.busy())
@@ -1189,6 +1359,9 @@ class inspectorComponent {
                         this.setActiveInspectorAction(index);
                 }
                 break;
+            case 'import':
+                await this.beginImport();
+                break;
             case 'vertical':
                 this.activateGuideOrientation('vertical');
                 this.closeCheckpointCommandBar();
@@ -1209,6 +1382,37 @@ class inspectorComponent {
         this.commandBarOpen.set(false);
         this.showCheckpointToast(`Restored “${checkpoint.name}”.`);
     }
+    activateCheckpoint(checkpoint, event) {
+        if (this.deletingCheckpointId() === checkpoint.id ||
+            this.editingCheckpointId() === checkpoint.id) {
+            return;
+        }
+        if (event?.shiftKey) {
+            void this.navigateToCheckpoint(checkpoint);
+        }
+        else {
+            void this.restoreCheckpoint(checkpoint);
+        }
+    }
+    async navigateToCheckpoint(checkpoint) {
+        if (!this.checkpointService || this.checkpointService.busy())
+            return;
+        if (!await this.checkpointService.navigateToRoute(checkpoint.route))
+            return;
+        this.checkpointDialog()?.nativeElement.close();
+        this.commandBarOpen.set(false);
+        this.showCheckpointToast(`Navigated to “${checkpoint.route}” — state unchanged.`);
+    }
+    async navigateToQueryRoute() {
+        const target = this.navigateTarget();
+        if (!this.checkpointService || !target || this.checkpointService.busy())
+            return;
+        if (!await this.checkpointService.navigateToRoute(target))
+            return;
+        this.checkpointDialog()?.nativeElement.close();
+        this.commandBarOpen.set(false);
+        this.showCheckpointToast(`Navigated to “${target}” — state unchanged.`);
+    }
     beginRename(checkpoint, event) {
         event?.stopPropagation();
         if (this.checkpointService?.busy())
@@ -1216,11 +1420,6 @@ class inspectorComponent {
         this.editingCheckpointId.set(checkpoint.id);
         this.deletingCheckpointId.set(null);
         this.renameDraft.set(checkpoint.name);
-        queueMicrotask(() => {
-            const input = this.checkpointDialog()?.nativeElement.querySelector('.inspector-command-row__rename');
-            input?.focus();
-            input?.select();
-        });
     }
     updateRenameDraft(event) {
         this.renameDraft.set(event.target.value);
@@ -1303,6 +1502,29 @@ class inspectorComponent {
             this.commandBarOpen() ? this.closeCheckpointCommandBar() : void this.openCheckpointCommandBar();
             return;
         }
+        if (!event.repeat &&
+            event.altKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.shiftKey &&
+            key === 'i') {
+            event.preventDefault();
+            this.setToolMode('select');
+            if (this.commandBarOpen())
+                this.closeCheckpointCommandBar();
+            return;
+        }
+        if (this.checkpointService &&
+            !event.repeat &&
+            event.altKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.shiftKey &&
+            key === 's') {
+            event.preventDefault();
+            void this.saveCheckpoint();
+            return;
+        }
         if (this.commandBarOpen()) {
             this.handleCommandBarKeydown(event, key);
             return;
@@ -1348,12 +1570,6 @@ class inspectorComponent {
         this.clearGuides();
         this.refreshTypographyBlocks();
     }
-    normalizeCheckpointLabel(value) {
-        return value
-            .trim()
-            .toLocaleLowerCase()
-            .replace(/^\/+|\/+$/g, '');
-    }
     handlePointerMove(event) {
         if (!this.enabled() || !this.isBrowser) {
             return;
@@ -1464,8 +1680,12 @@ class inspectorComponent {
     handleCommandBarKeydown(event, key) {
         const checkpoints = this.filteredCheckpoints();
         const actions = this.filteredInspectorActions();
+        const navigateIndex = checkpoints.length;
+        const hasNavigateRow = this.navigateTarget() !== null;
         const activeCheckpoint = checkpoints[this.activeCommandIndex()];
-        const activeActionIndex = this.activeCommandIndex() - checkpoints.length;
+        const activeNavigateRow = hasNavigateRow && this.activeCommandIndex() === navigateIndex;
+        const actionOffset = navigateIndex + (hasNavigateRow ? 1 : 0);
+        const activeActionIndex = this.activeCommandIndex() - actionOffset;
         const activeAction = actions[activeActionIndex];
         const target = event.target;
         const isRenameInput = target?.classList?.contains('inspector-command-row__rename') ?? false;
@@ -1507,9 +1727,14 @@ class inspectorComponent {
             else if (activeCheckpoint) {
                 const nextIndex = this.activeCommandIndex() < checkpoints.length - 1
                     ? this.activeCommandIndex() + 1
-                    : actions.length ? checkpoints.length : this.activeCommandIndex();
+                    : hasNavigateRow
+                        ? navigateIndex
+                        : actions.length ? actionOffset : this.activeCommandIndex();
                 this.activeCommandIndex.set(nextIndex);
             }
+            else if (activeNavigateRow && actions.length) {
+                this.activeCommandIndex.set(actionOffset);
+            }
             this.scrollActiveCommandIntoView();
             return;
         }
@@ -1518,35 +1743,48 @@ class inspectorComponent {
             if (activeAction && checkpoints.length) {
                 this.activeCommandIndex.set(checkpoints.length - 1);
             }
+            else if (activeNavigateRow && checkpoints.length) {
+                this.activeCommandIndex.set(checkpoints.length - 1);
+            }
             else if (activeCheckpoint) {
                 const nextIndex = this.activeCommandIndex() > 0
                     ? this.activeCommandIndex() - 1
                     : actions.length
-                        ? checkpoints.length + actions.length - 1
-                        : 0;
+                        ? actionOffset + actions.length - 1
+                        : hasNavigateRow ? navigateIndex : 0;
                 this.activeCommandIndex.set(nextIndex);
             }
             this.scrollActiveCommandIntoView();
             return;
         }
-        if (key === 'arrowright' && (activeCheckpoint || activeAction) && actions.length) {
+        if (key === 'arrowright' && (activeCheckpoint || activeNavigateRow || activeAction) && actions.length) {
             event.preventDefault();
             const nextActionIndex = activeAction
                 ? Math.min(activeActionIndex + 1, actions.length - 1)
                 : 0;
-            this.activeCommandIndex.set(checkpoints.length + nextActionIndex);
+            this.activeCommandIndex.set(actionOffset + nextActionIndex);
             this.scrollActiveCommandIntoView();
             return;
         }
-        if (key === 'arrowleft' && (activeCheckpoint || activeAction) && actions.length) {
+        if (key === 'arrowleft' && (activeCheckpoint || activeNavigateRow || activeAction) && actions.length) {
             event.preventDefault();
             const nextActionIndex = activeAction
                 ? (activeActionIndex - 1 + actions.length) % actions.length
                 : actions.length - 1;
-            this.activeCommandIndex.set(checkpoints.length + nextActionIndex);
+            this.activeCommandIndex.set(actionOffset + nextActionIndex);
             this.scrollActiveCommandIntoView();
             return;
         }
+        if (key === 'enter' && event.shiftKey && activeCheckpoint && !this.deletingCheckpointId()) {
+            event.preventDefault();
+            void this.navigateToCheckpoint(activeCheckpoint);
+            return;
+        }
+        if (key === 'enter' && activeNavigateRow) {
+            event.preventDefault();
+            void this.navigateToQueryRoute();
+            return;
+        }
         if (key === 'enter' && activeCheckpoint && !this.deletingCheckpointId()) {
             event.preventDefault();
             void this.restoreCheckpoint(activeCheckpoint);
@@ -1577,6 +1815,13 @@ class inspectorComponent {
             this.checkpointToastIsError.set(false);
         }, 2500);
     }
+    checkpointFileName(checkpoint) {
+        const safe = checkpoint.name
+            .replace(/[\\/:*?"<>|]/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .trim();
+        return `${safe || 'checkpoint'}.json`;
+    }
     selectElementAtPoint(event) {
         const overlay = this.overlayRoot()?.nativeElement ?? null;
         const target = getTargetElement({ x: event.clientX, y: event.clientY }, overlay);
@@ -1615,7 +1860,15 @@ class inspectorComponent {
             this.distanceOverlay.set(null);
             return;
         }
-        this.distanceOverlay.set(getDistanceOverlay(getRectFromDom(this.selectedElement), getRectFromDom(this.hoverElement)));
+        const relation = this.getDistanceRelation(this.selectedElement, this.hoverElement);
+        this.distanceOverlay.set(getDistanceOverlay(getRectFromDom(this.selectedElement), getRectFromDom(this.hoverElement), relation));
+    }
+    getDistanceRelation(elementA, elementB) {
+        if (elementB.contains(elementA))
+            return 'a-inside-b';
+        if (elementA.contains(elementB))
+            return 'b-inside-a';
+        return undefined;
     }
     refreshTypographyBlocks() {
         if (!this.isBrowser || !this.enabled() || !this.showTypography()) {
@@ -1704,11 +1957,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" }, 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 }, { propertyName: "checkpointDialog", first: true, predicate: ["checkpointDialog"], descendants: true, isSignal: true }, { propertyName: "checkpointSearch", first: true, predicate: ["checkpointSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <button\n            type=\"button\"\n            class=\"inspector-command__pet-switcher\"\n            [attr.aria-label]=\"'Change pet. Current pet: ' + activePet().name\"\n            [title]=\"'Change pet: ' + activePet().name\"\n            (click)=\"cyclePet($event)\"\n          >\n            <img\n              class=\"inspector-command__pet-sprite\"\n              [src]=\"activePet().spriteSrc\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              draggable=\"false\"\n            />\n          </button>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"commandBarOpen()\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length && !filteredInspectorActions().length\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"\n                  deletingCheckpointId() === checkpoint.id ||\n                  editingCheckpointId() === checkpoint.id\n                    ? null\n                    : restoreCheckpoint(checkpoint)\n                \"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span class=\"inspector-command-row__name\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === index\n                      ) {\n                        Restoring\u2026\n                      } @else {\n                        {{ checkpoint.name }}\n                      }\n                    </span>\n                    <span class=\"inspector-command-row__meta\">\n                      @if (shouldShowCheckpointRoute(checkpoint)) {\n                        <span class=\"inspector-command-row__route\">{{\n                          checkpoint.route\n                        }}</span>\n                        <span\n                          class=\"inspector-command-row__separator\"\n                          aria-hidden=\"true\"\n                          >\u00B7</span\n                        >\n                      }\n                      <span class=\"inspector-command-row__activity\">\n                        {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                        {{\n                          formatRelativeTime(checkpointActivityAt(checkpoint))\n                        }}\n                      </span>\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"filteredCheckpoints().length + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n                    </svg>\n                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n\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--spacing\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top + selected.rect.height + 8\"\n      >\n        <span class=\"inspector-box-tag__margin\">M</span>\n        <span>{{ formatEdges(selected.margin) }}</span>\n        <span class=\"inspector-box-tag__separator\">\u00B7</span>\n        <span class=\"inspector-box-tag__padding\">P</span>\n        <span>{{ formatEdges(selected.padding) }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        [attr.aria-label]=\"\n          (guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal') +\n          ' guide at ' +\n          formatValue(guide.position) +\n          ' pixels'\n        \"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(25% .012 280);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__pet-switcher{display:block;width:28px;height:28px;flex:0 0 auto;padding:0;overflow:hidden;border:0;border-radius:4px;background:transparent;cursor:pointer;opacity:.72;transition:opacity .14s var(--inspector-ease),transform .1s var(--inspector-ease)}.inspector-command__pet-sprite{display:block;width:500%;height:100%;max-width:none;image-rendering:pixelated;-webkit-user-select:none;user-select:none;transform:translate(0)}.inspector-command__search:focus-within .inspector-command__pet-switcher,.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{opacity:1}.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{background:#6aa7f41f}.inspector-command__pet-switcher:active{transform:scale(.94)}.inspector-command__pet-switcher:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}@media (prefers-reduced-motion: no-preference){.inspector-command__pet-sprite{animation:inspector-pet-cycle 1s steps(1,end) infinite}}@keyframes inspector-pet-cycle{0%,19.99%{transform:translate(0)}20%,39.99%{transform:translate(-20%)}40%,59.99%{transform:translate(-40%)}60%,79.99%{transform:translate(-60%)}80%,to{transform:translate(-80%)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active);box-shadow:inset 0 0 0 1px #6aa7f49e}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__meta{display:inline-flex;flex:0 1 auto;align-items:baseline;gap:4px;min-width:0;overflow:hidden;color:var(--command-faint);font-size:11px;font-weight:400;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__route{min-width:0;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__separator,.inspector-command-row__activity{flex:0 0 auto}.inspector-command-row.is-active .inspector-command-row__meta{color:#c2c3cc}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected,.inspector-command-action.is-selected:hover:not(:disabled){background:var(--command-surface-active);color:var(--command-text);box-shadow:inset 0 0 0 1px #6aa7f49e}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--inspector-panel-edge);border-radius:6px;background:#0f1016f5;color:var(--inspector-text);box-shadow:0 8px 24px #01000352;font-size:11px;font-weight:500;line-height:1.3;pointer-events:none;transform:translate(-50%);animation:inspector-toast-in .16s var(--inspector-ease) both}.inspector-checkpoint-toast:before{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--inspector-blue);content:\"\"}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}.inspector-checkpoint-toast--error:before{background:var(--command-danger, oklch(68% .17 25))}@keyframes inspector-toast-in{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__pet-switcher{transition:none}.inspector-command__pet-sprite{animation:none;transform:translate(0)}.inspector-checkpoint-toast{animation:none}}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{border:1px solid var(--inspector-panel-edge);border-radius:4px;background:#0e0f15c2;font-variant-numeric:tabular-nums;text-shadow:none}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 6px));max-width:min(380px,calc(100vw - 20px));padding:2px 4px;color:var(--inspector-text);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:2px 4px;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag__margin{color:#f5c076}.inspector-box-tag__padding{color:#95dfa4}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-box-tag--spacing{display:inline-flex;align-items:center;gap:3px;transform:translateY(0);white-space:nowrap}.inspector-box-tag__separator{color:var(--inspector-faint)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:2px 4px;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:2px 4px;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}@media (min-width: 769px) and (min-height: 769px){:host{--inspector-radius: 14px;--inspector-shadow: 0 21px 56px oklch(6% .02 280 / .5)}.inspector-command-dialog{inset-block-start:max(10vh,84px);width:min(735px,calc(100vw - 42px));max-height:min(630px,calc(100vh - 112px))}.inspector-command{max-height:min(630px,calc(100vh - 112px))}.inspector-command__search{gap:14px;min-height:70px;padding:0 19.25px}.inspector-command__pet-switcher{width:42px;height:42px}.inspector-command__search input{height:68.25px;font-size:22.75px}.inspector-command__results{max-height:455px;padding:8.75px}.inspector-command-row{gap:10.5px;min-height:59.5px;padding:0 12.25px 0 15.75px;border-radius:8.75px}.inspector-command-row__content{gap:14px}.inspector-command-row__name,.inspector-command-row__confirm{font-size:21px}.inspector-command-row__meta{gap:7px;font-size:19.25px}.inspector-command-row__actions,.inspector-command-row__confirm-actions{gap:1.75px}.inspector-command-row button{width:38.5px;min-height:38.5px;border-radius:7px;font-size:17.5px}.inspector-command-row button svg{width:19.25px;height:19.25px}.inspector-command-row button.is-danger,.inspector-command-row__confirm-actions button:not(.is-danger){padding:0 12.25px;font-size:19.25px}.inspector-command-row__rename{min-height:45.5px;padding-inline:10.5px;border-radius:7px;font-size:21px}.inspector-command__message{padding:28px 17.5px;font-size:21px}.inspector-command__message--error{padding:10.5px 17.5px;font-size:19.25px}.inspector-command__actions{gap:3.5px;padding:7px}.inspector-command-action{min-height:49px;gap:7px;padding:0 7px;border-radius:8.75px;font-size:17.5px}.inspector-command-action svg{width:19.25px;height:19.25px}.inspector-checkpoint-toast{top:14px;padding:7px 10px;font-size:13px}.inspector-label{transform:translateY(calc(-100% - 10.5px));max-width:min(665px,calc(100vw - 35px));padding:3px 5px;font-size:17.5px}.inspector-box-tag{padding:3px 5px;font-size:15.75px}.inspector-box-tag--spacing{gap:5px;transform:translateY(0)}.inspector-text-chip{gap:8.75px;padding:3px 5px;font-size:15.75px}.inspector-text-chip__swatch{width:12.25px;height:12.25px}.inspector-distance-tag{padding:3px 5px;font-size:15.75px}.inspector-guide--vertical{width:24.5px}.inspector-guide--horizontal{height:24.5px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: inspectorComponent, isStandalone: true, selector: "inspector-overlay", inputs: { highlightColor: "highlightColor", guideColor: "guideColor", hoverHighlightEnabled: "hoverHighlightEnabled" }, host: { listeners: { "window:keydown": "handleKeydown($event)", "window: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 }, { propertyName: "checkpointDialog", first: true, predicate: ["checkpointDialog"], descendants: true, isSignal: true }, { propertyName: "checkpointSearch", first: true, predicate: ["checkpointSearch"], descendants: true, isSignal: true }, { propertyName: "checkpointRename", first: true, predicate: ["checkpointRename"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <button\n            type=\"button\"\n            class=\"inspector-command__pet-switcher\"\n            [attr.aria-label]=\"'Change pet. Current pet: ' + activePet().name\"\n            [title]=\"'Change pet: ' + activePet().name\"\n            (click)=\"cyclePet($event)\"\n          >\n            <img\n              class=\"inspector-command__pet-sprite\"\n              [src]=\"activePet().spriteSrc\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              draggable=\"false\"\n            />\n          </button>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"commandBarOpen()\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length &&\n            !filteredInspectorActions().length &&\n            !navigateTarget()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"activateCheckpoint(checkpoint, $event)\"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    #checkpointRename\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span\n                      class=\"inspector-command-row__name\"\n                      [title]=\"checkpoint.name\"\n                    >\n                      <bdi dir=\"ltr\">\n                        @if (\n                          checkpointService.busy() &&\n                          activeCommandIndex() === index\n                        ) {\n                          Restoring\u2026\n                        } @else {\n                          {{ checkpoint.name }}\n                        }\n                      </bdi>\n                    </span>\n                    <span class=\"inspector-command-row__activity\">\n                      {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                      {{\n                        formatRelativeTime(checkpointActivityAt(checkpoint))\n                      }}\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"downloadCheckpoint(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Export ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M7.25 2h1.5v5.44l1.72-1.72L11.53 6.78 8 10.31 4.47 6.78l1.06-1.06 1.72 1.72zM2.5 12h11v1.5h-11z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n            @if (navigateTarget(); as target) {\n              <div\n                class=\"inspector-command-row inspector-command-row--navigate\"\n                role=\"option\"\n                id=\"inspector-navigate\"\n                [attr.data-command-index]=\"filteredCheckpoints().length\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length\n                \"\n                [class.is-active]=\"\n                  activeCommandIndex() === filteredCheckpoints().length\n                \"\n                [class.is-busy]=\"\n                  checkpointService.busy() &&\n                  activeCommandIndex() === filteredCheckpoints().length\n                \"\n                (mouseenter)=\"setActiveCheckpoint(filteredCheckpoints().length)\"\n                (click)=\"navigateToQueryRoute()\"\n              >\n                <span class=\"inspector-command-row__content\">\n                  <span\n                    class=\"inspector-command-row__name\"\n                    [title]=\"'Navigate to ' + target\"\n                  >\n                    <bdi dir=\"ltr\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === filteredCheckpoints().length\n                      ) {\n                        Navigating\u2026\n                      } @else {\n                        Go to {{ target }}\n                      }\n                    </bdi>\n                  </span>\n                  <span class=\"inspector-command-row__activity\">\n                    navigate \u00B7 keeps state\n                  </span>\n                </span>\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"actionIndexOffset() + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === actionIndexOffset() + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === actionIndexOffset() + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n                    </svg>\n                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"import\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M8 2l3.53 3.53-1.06 1.06L8.75 4.87V9.5h-1.5V4.87L5.53 6.59 4.47 5.53zM2.5 11h11v1.5h-11z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n\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--spacing\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top + selected.rect.height + 8\"\n      >\n        <span class=\"inspector-box-tag__margin\">M</span>\n        <span>{{ formatEdges(selected.margin) }}</span>\n        <span class=\"inspector-box-tag__separator\">\u00B7</span>\n        <span class=\"inspector-box-tag__padding\">P</span>\n        <span>{{ formatEdges(selected.padding) }}</span>\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    @for (horizontal of distance.horizontalDistances; track $index) {\n      @if (horizontal.value > 0) {\n        <div\n          class=\"inspector-distance-line inspector-distance-line--horizontal\"\n          [style.left.px]=\"Math.min(horizontal.x1!, horizontal.x2!)\"\n          [style.top.px]=\"horizontal.y!\"\n          [style.width.px]=\"Math.abs(horizontal.x2! - horizontal.x1!)\"\n        ></div>\n        <div\n          class=\"inspector-distance-tag\"\n          [style.left.px]=\"(horizontal.x1! + horizontal.x2!) / 2\"\n          [style.top.px]=\"horizontal.y!\"\n        >\n          {{ formatValue(horizontal.value) }}\n        </div>\n      }\n    }\n\n    @for (vertical of distance.verticalDistances; track $index) {\n      @if (vertical.value > 0) {\n        <div\n          class=\"inspector-distance-line inspector-distance-line--vertical\"\n          [style.left.px]=\"vertical.x!\"\n          [style.top.px]=\"Math.min(vertical.y1!, vertical.y2!)\"\n          [style.height.px]=\"Math.abs(vertical.y2! - vertical.y1!)\"\n        ></div>\n        <div\n          class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n          [style.left.px]=\"vertical.x!\"\n          [style.top.px]=\"(vertical.y1! + vertical.y2!) / 2\"\n        >\n          {{ formatValue(vertical.value) }}\n        </div>\n      }\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        [attr.aria-label]=\"\n          (guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal') +\n          ' guide at ' +\n          formatValue(guide.position) +\n          ' pixels'\n        \"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n\n    @for (distance of guideDistances(); track distance.orientation + \"-\" + distance.start + \"-\" + distance.end) {\n      <div\n        class=\"inspector-guide-distance\"\n        [class.inspector-guide-distance--vertical]=\"distance.orientation === 'vertical'\"\n        [class.inspector-guide-distance--horizontal]=\"distance.orientation === 'horizontal'\"\n        [style.left.px]=\"distance.orientation === 'vertical' ? distance.start : null\"\n        [style.top.px]=\"distance.orientation === 'horizontal' ? distance.start : null\"\n        [style.width.px]=\"distance.orientation === 'vertical' ? distance.value : null\"\n        [style.height.px]=\"distance.orientation === 'horizontal' ? distance.value : null\"\n        [style.--inspector-guide]=\"guideColor\"\n        aria-hidden=\"true\"\n      >\n        <span class=\"inspector-guide-distance__line\"></span>\n        <span class=\"inspector-guide-distance__tag\">\n          {{ formatValue(distance.value) }} px\n        </span>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(25% .012 280);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__pet-switcher{display:block;width:28px;height:28px;flex:0 0 auto;padding:0;overflow:hidden;border:0;border-radius:4px;background:transparent;cursor:pointer;opacity:.72;transition:opacity .14s var(--inspector-ease),transform .1s var(--inspector-ease)}.inspector-command__pet-sprite{display:block;width:500%;height:100%;max-width:none;image-rendering:pixelated;-webkit-user-select:none;user-select:none;transform:translate(0)}.inspector-command__search:focus-within .inspector-command__pet-switcher,.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{opacity:1}.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{background:#6aa7f41f}.inspector-command__pet-switcher:active{transform:scale(.94)}.inspector-command__pet-switcher:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}@media (prefers-reduced-motion: no-preference){.inspector-command__pet-sprite{animation:inspector-pet-cycle 1s steps(1,end) infinite}}@keyframes inspector-pet-cycle{0%,19.99%{transform:translate(0)}20%,39.99%{transform:translate(-20%)}40%,59.99%{transform:translate(-40%)}60%,79.99%{transform:translate(-60%)}80%,to{transform:translate(-80%)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:color-mix(in oklch,var(--command-surface-active) 92%,var(--command-accent));box-shadow:inset 0 0 0 1px #6aa7f452}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.inspector-command-row__name bdi{direction:ltr;unicode-bidi:isolate}.inspector-command-row__activity{flex:0 0 auto;color:var(--command-faint);font-size:9px;font-weight:450;line-height:1;white-space:nowrap}.inspector-command-row.is-active .inspector-command-row__activity{color:#c2c3cc}.inspector-command-row--navigate{margin-top:4px;padding-top:5px;border-top:1px dashed var(--command-edge)}.inspector-command-row--navigate .inspector-command-row__name{color:color-mix(in oklch,var(--command-text) 78%,var(--command-accent))}.inspector-command-row--navigate .inspector-command-row__name:before{content:\"\\2192  \";color:var(--command-accent)}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row.is-active .inspector-command-row__actions,.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected,.inspector-command-action.is-selected:hover:not(:disabled){background:var(--command-surface-active);color:var(--command-text);box-shadow:inset 0 0 0 1px #6aa7f49e}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--inspector-panel-edge);border-radius:6px;background:#0f1016f5;color:var(--inspector-text);box-shadow:0 8px 24px #01000352;font-size:11px;font-weight:500;line-height:1.3;pointer-events:none;transform:translate(-50%);animation:inspector-toast-in .16s var(--inspector-ease) both}.inspector-checkpoint-toast:before{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--inspector-blue);content:\"\"}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}.inspector-checkpoint-toast--error:before{background:var(--command-danger, oklch(68% .17 25))}@keyframes inspector-toast-in{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__pet-switcher{transition:none}.inspector-command__pet-sprite{animation:none;transform:translate(0)}.inspector-checkpoint-toast{animation:none}}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag,.inspector-guide-distance__tag{border:1px solid var(--inspector-panel-edge);border-radius:4px;background:#0e0f15c2;font-variant-numeric:tabular-nums;text-shadow:none}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 6px));max-width:min(380px,calc(100vw - 20px));padding:1px 3px;color:var(--inspector-text);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:9px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:2px 4px;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag__margin{color:#f5c076}.inspector-box-tag__padding{color:#95dfa4}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-box-tag--spacing{display:inline-flex;align-items:center;gap:3px;transform:translateY(0);white-space:nowrap}.inspector-box-tag__separator{color:var(--inspector-faint)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:2px 4px;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%,-50%);padding:2px 4px;border-color:#539af247;background:#0e0f15b8;color:var(--inspector-text);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.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}.inspector-guide-distance{position:fixed;z-index:2;pointer-events:none}.inspector-guide-distance--vertical{top:50%;height:1px}.inspector-guide-distance--horizontal{left:50%;width:1px}.inspector-guide-distance__line{position:absolute;background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-distance--vertical .inspector-guide-distance__line{inset:0;height:1px}.inspector-guide-distance--horizontal .inspector-guide-distance__line{inset:0;width:1px}.inspector-guide-distance__line:before,.inspector-guide-distance__line:after{position:absolute;content:\"\";background:var(--inspector-guide, #ff7a00)}.inspector-guide-distance--vertical .inspector-guide-distance__line:before,.inspector-guide-distance--vertical .inspector-guide-distance__line:after{top:-2px;width:1px;height:5px}.inspector-guide-distance--vertical .inspector-guide-distance__line:before{left:0}.inspector-guide-distance--vertical .inspector-guide-distance__line:after{right:0}.inspector-guide-distance--horizontal .inspector-guide-distance__line:before,.inspector-guide-distance--horizontal .inspector-guide-distance__line:after{left:-2px;width:5px;height:1px}.inspector-guide-distance--horizontal .inspector-guide-distance__line:before{top:0}.inspector-guide-distance--horizontal .inspector-guide-distance__line:after{bottom:0}.inspector-guide-distance__tag{position:absolute;padding:2px 4px;border-color:color-mix(in srgb,var(--inspector-guide, #ff7a00) 48%,transparent);background:#0e0f15eb;color:var(--inspector-text);box-shadow:0 1px 4px #01000357;font-size:9px;font-weight:520;line-height:1;white-space:nowrap}.inspector-guide-distance--vertical .inspector-guide-distance__tag{left:50%;top:0;transform:translate(-50%,-50%)}.inspector-guide-distance--horizontal .inspector-guide-distance__tag{left:0;top:50%;transform:translate(-50%,-50%)}@media (min-width: 769px) and (min-height: 769px){:host{--inspector-radius: 14px;--inspector-shadow: 0 21px 56px oklch(6% .02 280 / .5)}.inspector-command-dialog{inset-block-start:max(10vh,84px);width:min(735px,calc(100vw - 42px));max-height:min(630px,calc(100vh - 112px))}.inspector-command{max-height:min(630px,calc(100vh - 112px))}.inspector-command__search{gap:14px;min-height:70px;padding:0 19.25px}.inspector-command__pet-switcher{width:42px;height:42px}.inspector-command__search input{height:68.25px;font-size:22.75px}.inspector-command__results{max-height:455px;padding:8.75px}.inspector-command-row{gap:10.5px;min-height:59.5px;padding:0 12.25px 0 15.75px;border-radius:8.75px}.inspector-command-row__content{gap:10.5px}.inspector-command-row__name,.inspector-command-row__confirm{font-size:21px}.inspector-command-row__activity{font-size:15.75px}.inspector-command-row__actions,.inspector-command-row__confirm-actions{gap:1.75px}.inspector-command-row button{width:38.5px;min-height:38.5px;border-radius:7px;font-size:17.5px}.inspector-command-row button svg{width:19.25px;height:19.25px}.inspector-command-row button.is-danger,.inspector-command-row__confirm-actions button:not(.is-danger){padding:0 12.25px;font-size:19.25px}.inspector-command-row__rename{min-height:45.5px;padding-inline:10.5px;border-radius:7px;font-size:21px}.inspector-command__message{padding:28px 17.5px;font-size:21px}.inspector-command__message--error{padding:10.5px 17.5px;font-size:19.25px}.inspector-command__actions{gap:3.5px;padding:7px}.inspector-command-action{min-height:49px;gap:7px;padding:0 7px;border-radius:8.75px;font-size:17.5px}.inspector-command-action svg{width:19.25px;height:19.25px}.inspector-checkpoint-toast{top:14px;padding:7px 10px;font-size:13px}.inspector-label{transform:translateY(calc(-100% - 10.5px));max-width:min(665px,calc(100vw - 35px));padding:2px 4px;font-size:13px}.inspector-box-tag{padding:3px 5px;font-size:15.75px}.inspector-box-tag--spacing{gap:5px;transform:translateY(0)}.inspector-text-chip{gap:8.75px;padding:3px 5px;font-size:15.75px}.inspector-text-chip__swatch{width:12.25px;height:12.25px}.inspector-distance-tag,.inspector-guide-distance__tag{padding:3px 5px;font-size:15.75px}.inspector-guide--vertical{width:24.5px}.inspector-guide--horizontal{height:24.5px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: inspectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inspector-overlay', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <button\n            type=\"button\"\n            class=\"inspector-command__pet-switcher\"\n            [attr.aria-label]=\"'Change pet. Current pet: ' + activePet().name\"\n            [title]=\"'Change pet: ' + activePet().name\"\n            (click)=\"cyclePet($event)\"\n          >\n            <img\n              class=\"inspector-command__pet-sprite\"\n              [src]=\"activePet().spriteSrc\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              draggable=\"false\"\n            />\n          </button>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"commandBarOpen()\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length && !filteredInspectorActions().length\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"\n                  deletingCheckpointId() === checkpoint.id ||\n                  editingCheckpointId() === checkpoint.id\n                    ? null\n                    : restoreCheckpoint(checkpoint)\n                \"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span class=\"inspector-command-row__name\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === index\n                      ) {\n                        Restoring\u2026\n                      } @else {\n                        {{ checkpoint.name }}\n                      }\n                    </span>\n                    <span class=\"inspector-command-row__meta\">\n                      @if (shouldShowCheckpointRoute(checkpoint)) {\n                        <span class=\"inspector-command-row__route\">{{\n                          checkpoint.route\n                        }}</span>\n                        <span\n                          class=\"inspector-command-row__separator\"\n                          aria-hidden=\"true\"\n                          >\u00B7</span\n                        >\n                      }\n                      <span class=\"inspector-command-row__activity\">\n                        {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                        {{\n                          formatRelativeTime(checkpointActivityAt(checkpoint))\n                        }}\n                      </span>\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"filteredCheckpoints().length + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n                    </svg>\n                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n\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--spacing\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top + selected.rect.height + 8\"\n      >\n        <span class=\"inspector-box-tag__margin\">M</span>\n        <span>{{ formatEdges(selected.margin) }}</span>\n        <span class=\"inspector-box-tag__separator\">\u00B7</span>\n        <span class=\"inspector-box-tag__padding\">P</span>\n        <span>{{ formatEdges(selected.padding) }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && showTypography()) {\n    @for (block of textBlocks(); track block.id) {\n      <div\n        class=\"inspector-text-chip\"\n        [style.left.px]=\"block.rect.left\"\n        [style.top.px]=\"block.rect.top - 8\"\n      >\n        <span\n          class=\"inspector-text-chip__swatch\"\n          [style.background]=\"block.styles.color\"\n        ></span>\n        <span>{{ block.styles.fontSize }}</span>\n        <span>{{ block.styles.lineHeight }}</span>\n        <span>{{ block.styles.color }}</span>\n      </div>\n    }\n  }\n\n  @if (enabled() && altPressed() && distanceOverlay(); as distance) {\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectA.left\"\n      [style.top.px]=\"distance.rectA.top\"\n      [style.width.px]=\"distance.rectA.width\"\n      [style.height.px]=\"distance.rectA.height\"\n    ></div>\n    <div\n      class=\"inspector-box inspector-box--distance\"\n      [style.left.px]=\"distance.rectB.left\"\n      [style.top.px]=\"distance.rectB.top\"\n      [style.width.px]=\"distance.rectB.width\"\n      [style.height.px]=\"distance.rectB.height\"\n    ></div>\n\n    @for (\n      connector of distance.connectors;\n      track trackConnector($index, connector)\n    ) {\n      <div\n        class=\"inspector-connector\"\n        [class.inspector-connector--vertical]=\"connector.x1 === connector.x2\"\n        [class.inspector-connector--horizontal]=\"connector.y1 === connector.y2\"\n        [style.left.px]=\"Math.min(connector.x1, connector.x2)\"\n        [style.top.px]=\"Math.min(connector.y1, connector.y2)\"\n        [style.width.px]=\"Math.max(1, Math.abs(connector.x2 - connector.x1))\"\n        [style.height.px]=\"Math.max(1, Math.abs(connector.y2 - connector.y1))\"\n      ></div>\n    }\n\n    @if (distance.horizontal && distance.horizontal.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--horizontal\"\n        [style.left.px]=\"\n          Math.min(distance.horizontal.x1!, distance.horizontal.x2!)\n        \"\n        [style.top.px]=\"distance.horizontal.y!\"\n        [style.width.px]=\"\n          Math.abs(distance.horizontal.x2! - distance.horizontal.x1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag\"\n        [style.left.px]=\"\n          (distance.horizontal.x1! + distance.horizontal.x2!) / 2\n        \"\n        [style.top.px]=\"distance.horizontal.y! + 10\"\n      >\n        {{ formatValue(distance.horizontal.value) }}\n      </div>\n    }\n\n    @if (distance.vertical && distance.vertical.value > 0) {\n      <div\n        class=\"inspector-distance-line inspector-distance-line--vertical\"\n        [style.left.px]=\"distance.vertical.x!\"\n        [style.top.px]=\"Math.min(distance.vertical.y1!, distance.vertical.y2!)\"\n        [style.height.px]=\"\n          Math.abs(distance.vertical.y2! - distance.vertical.y1!)\n        \"\n      ></div>\n      <div\n        class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n        [style.left.px]=\"distance.vertical.x! + 10\"\n        [style.top.px]=\"(distance.vertical.y1! + distance.vertical.y2!) / 2\"\n      >\n        {{ formatValue(distance.vertical.value) }}\n      </div>\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        [attr.aria-label]=\"\n          (guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal') +\n          ' guide at ' +\n          formatValue(guide.position) +\n          ' pixels'\n        \"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(25% .012 280);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__pet-switcher{display:block;width:28px;height:28px;flex:0 0 auto;padding:0;overflow:hidden;border:0;border-radius:4px;background:transparent;cursor:pointer;opacity:.72;transition:opacity .14s var(--inspector-ease),transform .1s var(--inspector-ease)}.inspector-command__pet-sprite{display:block;width:500%;height:100%;max-width:none;image-rendering:pixelated;-webkit-user-select:none;user-select:none;transform:translate(0)}.inspector-command__search:focus-within .inspector-command__pet-switcher,.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{opacity:1}.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{background:#6aa7f41f}.inspector-command__pet-switcher:active{transform:scale(.94)}.inspector-command__pet-switcher:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}@media (prefers-reduced-motion: no-preference){.inspector-command__pet-sprite{animation:inspector-pet-cycle 1s steps(1,end) infinite}}@keyframes inspector-pet-cycle{0%,19.99%{transform:translate(0)}20%,39.99%{transform:translate(-20%)}40%,59.99%{transform:translate(-40%)}60%,79.99%{transform:translate(-60%)}80%,to{transform:translate(-80%)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:var(--command-surface-active);box-shadow:inset 0 0 0 1px #6aa7f49e}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__meta{display:inline-flex;flex:0 1 auto;align-items:baseline;gap:4px;min-width:0;overflow:hidden;color:var(--command-faint);font-size:11px;font-weight:400;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.inspector-command-row__route{min-width:0;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__separator,.inspector-command-row__activity{flex:0 0 auto}.inspector-command-row.is-active .inspector-command-row__meta{color:#c2c3cc}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected,.inspector-command-action.is-selected:hover:not(:disabled){background:var(--command-surface-active);color:var(--command-text);box-shadow:inset 0 0 0 1px #6aa7f49e}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--inspector-panel-edge);border-radius:6px;background:#0f1016f5;color:var(--inspector-text);box-shadow:0 8px 24px #01000352;font-size:11px;font-weight:500;line-height:1.3;pointer-events:none;transform:translate(-50%);animation:inspector-toast-in .16s var(--inspector-ease) both}.inspector-checkpoint-toast:before{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--inspector-blue);content:\"\"}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}.inspector-checkpoint-toast--error:before{background:var(--command-danger, oklch(68% .17 25))}@keyframes inspector-toast-in{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__pet-switcher{transition:none}.inspector-command__pet-sprite{animation:none;transform:translate(0)}.inspector-checkpoint-toast{animation:none}}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag{border:1px solid var(--inspector-panel-edge);border-radius:4px;background:#0e0f15c2;font-variant-numeric:tabular-nums;text-shadow:none}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 6px));max-width:min(380px,calc(100vw - 20px));padding:2px 4px;color:var(--inspector-text);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:2px 4px;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag__margin{color:#f5c076}.inspector-box-tag__padding{color:#95dfa4}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-box-tag--spacing{display:inline-flex;align-items:center;gap:3px;transform:translateY(0);white-space:nowrap}.inspector-box-tag__separator{color:var(--inspector-faint)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:2px 4px;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%);padding:2px 4px;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-distance-tag--vertical{transform:translateY(-50%)}.inspector-guide{position:fixed;margin:0;padding:0;border:0;background:transparent;pointer-events:auto;cursor:grab}.inspector-guide--vertical{top:0;width:14px;height:100vh;transform:translate(-50%)}.inspector-guide--horizontal{left:0;width:100vw;height:14px;transform:translateY(-50%)}.inspector-guide--preview{opacity:.55;pointer-events:none;cursor:default}.inspector-guide--preview .inspector-guide-line{background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-line{position:absolute;inset:0;pointer-events:none}.inspector-guide--vertical .inspector-guide-line{left:calc(50% - .5px);width:1px;height:100%;background:var(--inspector-guide, #ff7a00)}.inspector-guide--horizontal .inspector-guide-line{top:calc(50% - .5px);width:100%;height:1px;background:var(--inspector-guide, #ff7a00)}.inspector-guide--selected .inspector-guide-line{box-shadow:0 0 0 1px #ffffff80}@media (min-width: 769px) and (min-height: 769px){:host{--inspector-radius: 14px;--inspector-shadow: 0 21px 56px oklch(6% .02 280 / .5)}.inspector-command-dialog{inset-block-start:max(10vh,84px);width:min(735px,calc(100vw - 42px));max-height:min(630px,calc(100vh - 112px))}.inspector-command{max-height:min(630px,calc(100vh - 112px))}.inspector-command__search{gap:14px;min-height:70px;padding:0 19.25px}.inspector-command__pet-switcher{width:42px;height:42px}.inspector-command__search input{height:68.25px;font-size:22.75px}.inspector-command__results{max-height:455px;padding:8.75px}.inspector-command-row{gap:10.5px;min-height:59.5px;padding:0 12.25px 0 15.75px;border-radius:8.75px}.inspector-command-row__content{gap:14px}.inspector-command-row__name,.inspector-command-row__confirm{font-size:21px}.inspector-command-row__meta{gap:7px;font-size:19.25px}.inspector-command-row__actions,.inspector-command-row__confirm-actions{gap:1.75px}.inspector-command-row button{width:38.5px;min-height:38.5px;border-radius:7px;font-size:17.5px}.inspector-command-row button svg{width:19.25px;height:19.25px}.inspector-command-row button.is-danger,.inspector-command-row__confirm-actions button:not(.is-danger){padding:0 12.25px;font-size:19.25px}.inspector-command-row__rename{min-height:45.5px;padding-inline:10.5px;border-radius:7px;font-size:21px}.inspector-command__message{padding:28px 17.5px;font-size:21px}.inspector-command__message--error{padding:10.5px 17.5px;font-size:19.25px}.inspector-command__actions{gap:3.5px;padding:7px}.inspector-command-action{min-height:49px;gap:7px;padding:0 7px;border-radius:8.75px;font-size:17.5px}.inspector-command-action svg{width:19.25px;height:19.25px}.inspector-checkpoint-toast{top:14px;padding:7px 10px;font-size:13px}.inspector-label{transform:translateY(calc(-100% - 10.5px));max-width:min(665px,calc(100vw - 35px));padding:3px 5px;font-size:17.5px}.inspector-box-tag{padding:3px 5px;font-size:15.75px}.inspector-box-tag--spacing{gap:5px;transform:translateY(0)}.inspector-text-chip{gap:8.75px;padding:3px 5px;font-size:15.75px}.inspector-text-chip__swatch{width:12.25px;height:12.25px}.inspector-distance-tag{padding:3px 5px;font-size:15.75px}.inspector-guide--vertical{width:24.5px}.inspector-guide--horizontal{height:24.5px}}\n"] }]
+            args: [{ selector: 'inspector-overlay', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inspector-root\" #overlayRoot>\n  @if (checkpointService) {\n    <dialog\n      #checkpointDialog\n      class=\"inspector-command-dialog\"\n      aria-labelledby=\"inspector-command-title\"\n      (cancel)=\"$event.preventDefault(); closeCheckpointCommandBar()\"\n      (click)=\"handleCheckpointDialogClick($event)\"\n    >\n      <section class=\"inspector-command\" (click)=\"$event.stopPropagation()\">\n        <header class=\"inspector-command__search\">\n          <label\n            id=\"inspector-command-title\"\n            class=\"inspector-visually-hidden\"\n            for=\"inspector-checkpoint-search\"\n          >\n            inspector-ng command palette\n          </label>\n          <button\n            type=\"button\"\n            class=\"inspector-command__pet-switcher\"\n            [attr.aria-label]=\"'Change pet. Current pet: ' + activePet().name\"\n            [title]=\"'Change pet: ' + activePet().name\"\n            (click)=\"cyclePet($event)\"\n          >\n            <img\n              class=\"inspector-command__pet-sprite\"\n              [src]=\"activePet().spriteSrc\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              draggable=\"false\"\n            />\n          </button>\n          <input\n            #checkpointSearch\n            id=\"inspector-checkpoint-search\"\n            type=\"search\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            placeholder=\"inspector-ng\u2026\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"commandBarOpen()\"\n            [value]=\"checkpointQuery()\"\n            [attr.aria-controls]=\"'inspector-checkpoint-results inspector-command-actions'\"\n            [attr.aria-activedescendant]=\"activeCommandResultId()\"\n            (input)=\"updateCheckpointQuery($event)\"\n          />\n        </header>\n\n        @if (checkpointService.error(); as error) {\n          <p\n            class=\"inspector-command__message inspector-command__message--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </p>\n        }\n\n        <div\n          id=\"inspector-checkpoint-results\"\n          class=\"inspector-command__results\"\n          role=\"listbox\"\n          aria-label=\"Saved checkpoints\"\n        >\n          @if (checkpointService.loading()) {\n            <p class=\"inspector-command__message\" role=\"status\">Loading\u2026</p>\n          } @else if (\n            !checkpointService.checkpoints().length && !checkpointQuery().trim()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">\n              No checkpoints yet\n            </p>\n          } @else if (\n            !filteredCheckpoints().length &&\n            !filteredInspectorActions().length &&\n            !navigateTarget()\n          ) {\n            <p class=\"inspector-command__message\" role=\"status\">No matches</p>\n          } @else {\n            @for (\n              checkpoint of filteredCheckpoints();\n              track checkpoint.id;\n              let index = $index\n            ) {\n              <div\n                class=\"inspector-command-row\"\n                role=\"option\"\n                [id]=\"'inspector-checkpoint-' + checkpoint.id\"\n                [attr.data-command-index]=\"index\"\n                [attr.aria-selected]=\"activeCommandIndex() === index\"\n                [class.is-active]=\"activeCommandIndex() === index\"\n                [class.is-busy]=\"\n                  checkpointService.busy() && activeCommandIndex() === index\n                \"\n                (mouseenter)=\"setActiveCheckpoint(index)\"\n                (click)=\"activateCheckpoint(checkpoint, $event)\"\n              >\n                @if (deletingCheckpointId() === checkpoint.id) {\n                  <span class=\"inspector-command-row__confirm\"\n                    >Delete \u201C{{ checkpoint.name }}\u201D?</span\n                  >\n                  <span class=\"inspector-command-row__confirm-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"is-danger\"\n                      (click)=\"confirmDelete(checkpoint, $event)\"\n                    >\n                      Delete\n                    </button>\n                    <button type=\"button\" (click)=\"cancelDelete($event)\">\n                      Keep\n                    </button>\n                  </span>\n                } @else if (editingCheckpointId() === checkpoint.id) {\n                  <input\n                    #checkpointRename\n                    class=\"inspector-command-row__rename\"\n                    aria-label=\"Checkpoint name\"\n                    [value]=\"renameDraft()\"\n                    (input)=\"updateRenameDraft($event)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                } @else {\n                  <span class=\"inspector-command-row__content\">\n                    <span\n                      class=\"inspector-command-row__name\"\n                      [title]=\"checkpoint.name\"\n                    >\n                      <bdi dir=\"ltr\">\n                        @if (\n                          checkpointService.busy() &&\n                          activeCommandIndex() === index\n                        ) {\n                          Restoring\u2026\n                        } @else {\n                          {{ checkpoint.name }}\n                        }\n                      </bdi>\n                    </span>\n                    <span class=\"inspector-command-row__activity\">\n                      {{ checkpoint.lastUsedAt ? \"Used\" : \"Saved\" }}\n                      {{\n                        formatRelativeTime(checkpointActivityAt(checkpoint))\n                      }}\n                    </span>\n                  </span>\n                  <span class=\"inspector-command-row__actions\">\n                    <button\n                      type=\"button\"\n                      (click)=\"beginRename(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Rename ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"m11.8 1.8 2.4 2.4-8.3 8.3-3.1.7.7-3.1zm-8 10.4 1.5-.3-1.2-1.2z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"downloadCheckpoint(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Export ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M7.25 2h1.5v5.44l1.72-1.72L11.53 6.78 8 10.31 4.47 6.78l1.06-1.06 1.72 1.72zM2.5 12h11v1.5h-11z\"\n                        />\n                      </svg>\n                    </button>\n                    <button\n                      type=\"button\"\n                      (click)=\"beginDelete(checkpoint, $event)\"\n                      [attr.aria-label]=\"'Delete ' + checkpoint.name\"\n                    >\n                      <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                        <path\n                          d=\"M5.5 2h5l.5 1H14v1.25H2V3h3zm-2 3.25h9L12 14H4z\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                }\n              </div>\n            }\n            @if (navigateTarget(); as target) {\n              <div\n                class=\"inspector-command-row inspector-command-row--navigate\"\n                role=\"option\"\n                id=\"inspector-navigate\"\n                [attr.data-command-index]=\"filteredCheckpoints().length\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === filteredCheckpoints().length\n                \"\n                [class.is-active]=\"\n                  activeCommandIndex() === filteredCheckpoints().length\n                \"\n                [class.is-busy]=\"\n                  checkpointService.busy() &&\n                  activeCommandIndex() === filteredCheckpoints().length\n                \"\n                (mouseenter)=\"setActiveCheckpoint(filteredCheckpoints().length)\"\n                (click)=\"navigateToQueryRoute()\"\n              >\n                <span class=\"inspector-command-row__content\">\n                  <span\n                    class=\"inspector-command-row__name\"\n                    [title]=\"'Navigate to ' + target\"\n                  >\n                    <bdi dir=\"ltr\">\n                      @if (\n                        checkpointService.busy() &&\n                        activeCommandIndex() === filteredCheckpoints().length\n                      ) {\n                        Navigating\u2026\n                      } @else {\n                        Go to {{ target }}\n                      }\n                    </bdi>\n                  </span>\n                  <span class=\"inspector-command-row__activity\">\n                    navigate \u00B7 keeps state\n                  </span>\n                </span>\n              </div>\n            }\n          }\n        </div>\n\n        @if (filteredInspectorActions().length) {\n          <footer\n            id=\"inspector-command-actions\"\n            class=\"inspector-command__actions\"\n            role=\"listbox\"\n            aria-label=\"Inspector actions\"\n            aria-orientation=\"horizontal\"\n          >\n            @for (\n              action of filteredInspectorActions();\n              track action.id;\n              let index = $index\n            ) {\n              <button\n                type=\"button\"\n                role=\"option\"\n                class=\"inspector-command-action\"\n                [id]=\"'inspector-action-' + action.id\"\n                [attr.data-command-index]=\"actionIndexOffset() + index\"\n                [attr.aria-label]=\"action.ariaLabel\"\n                [attr.aria-selected]=\"\n                  activeCommandIndex() === actionIndexOffset() + index\n                \"\n                [attr.aria-disabled]=\"checkpointService.busy()\"\n                [class.is-selected]=\"\n                  activeCommandIndex() === actionIndexOffset() + index\n                \"\n                [class.is-active]=\"\n                  (action.id === 'select' && toolMode() === 'select') ||\n                  (action.id === 'type' && showTypography()) ||\n                  (action.id === 'vertical' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'vertical') ||\n                  (action.id === 'horizontal' &&\n                    toolMode() === 'guides' &&\n                    guideOrientation() === 'horizontal')\n                \"\n                [disabled]=\"checkpointService.busy()\"\n                (mouseenter)=\"setActiveInspectorAction(index)\"\n                (click)=\"executeInspectorAction(action)\"\n              >\n                @switch (action.id) {\n                  @case (\"select\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 2l8 8-3 .7L6.7 13 6 10 3 2z\" />\n                    </svg>\n                  }\n                  @case (\"type\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M3 4V2h10v2h-4v10H7V4z\" />\n                    </svg>\n                  }\n                  @case (\"save\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M2.5 2h9.6l1.4 1.4V14h-11zm2 1.5v3h6v-3zm.5 6V12h6V9.5z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"import\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path\n                        d=\"M8 2l3.53 3.53-1.06 1.06L8.75 4.87V9.5h-1.5V4.87L5.53 6.59 4.47 5.53zM2.5 11h11v1.5h-11z\"\n                      />\n                    </svg>\n                  }\n                  @case (\"vertical\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M7.25 2h1.5v12h-1.5z\" />\n                    </svg>\n                  }\n                  @case (\"horizontal\") {\n                    <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                      <path d=\"M2 7.25h12v1.5H2z\" />\n                    </svg>\n                  }\n                }\n                <span>{{ action.label }}</span>\n              </button>\n            }\n          </footer>\n        }\n      </section>\n    </dialog>\n  }\n\n  @if (checkpointToast(); as toast) {\n    <p\n      class=\"inspector-checkpoint-toast\"\n      [class.inspector-checkpoint-toast--error]=\"checkpointToastIsError()\"\n      [attr.role]=\"checkpointToastIsError() ? 'alert' : 'status'\"\n    >\n      {{ toast }}\n    </p>\n  }\n\n  @if (enabled() && toolMode() === \"select\") {\n    @if (hoverRect() && hoverHighlightEnabled) {\n      <div\n        class=\"inspector-box inspector-box--hover\"\n        [style.left.px]=\"hoverRect()!.left\"\n        [style.top.px]=\"hoverRect()!.top\"\n        [style.width.px]=\"hoverRect()!.width\"\n        [style.height.px]=\"hoverRect()!.height\"\n        [style.--inspector-accent]=\"highlightColor\"\n      ></div>\n    }\n\n    @if (selectedMeasurement(); as selected) {\n      @if (selected.gap.active && selected.parentRect) {\n        <div\n          class=\"inspector-box inspector-box--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top\"\n          [style.width.px]=\"selected.parentRect.width\"\n          [style.height.px]=\"selected.parentRect.height\"\n        ></div>\n        <div\n          class=\"inspector-box-tag inspector-box-tag--gap\"\n          [style.left.px]=\"selected.parentRect.left\"\n          [style.top.px]=\"selected.parentRect.top - 8\"\n        >\n          G {{ formatGap(selected) }}\n        </div>\n      }\n\n      <div\n        class=\"inspector-box inspector-box--margin\"\n        [style.left.px]=\"selected.marginRect.left\"\n        [style.top.px]=\"selected.marginRect.top\"\n        [style.width.px]=\"selected.marginRect.width\"\n        [style.height.px]=\"selected.marginRect.height\"\n      ></div>\n\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--spacing\"\n        [style.left.px]=\"selected.rect.left\"\n        [style.top.px]=\"selected.rect.top + selected.rect.height + 8\"\n      >\n        <span class=\"inspector-box-tag__margin\">M</span>\n        <span>{{ formatEdges(selected.margin) }}</span>\n        <span class=\"inspector-box-tag__separator\">\u00B7</span>\n        <span class=\"inspector-box-tag__padding\">P</span>\n        <span>{{ formatEdges(selected.padding) }}</span>\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    @for (horizontal of distance.horizontalDistances; track $index) {\n      @if (horizontal.value > 0) {\n        <div\n          class=\"inspector-distance-line inspector-distance-line--horizontal\"\n          [style.left.px]=\"Math.min(horizontal.x1!, horizontal.x2!)\"\n          [style.top.px]=\"horizontal.y!\"\n          [style.width.px]=\"Math.abs(horizontal.x2! - horizontal.x1!)\"\n        ></div>\n        <div\n          class=\"inspector-distance-tag\"\n          [style.left.px]=\"(horizontal.x1! + horizontal.x2!) / 2\"\n          [style.top.px]=\"horizontal.y!\"\n        >\n          {{ formatValue(horizontal.value) }}\n        </div>\n      }\n    }\n\n    @for (vertical of distance.verticalDistances; track $index) {\n      @if (vertical.value > 0) {\n        <div\n          class=\"inspector-distance-line inspector-distance-line--vertical\"\n          [style.left.px]=\"vertical.x!\"\n          [style.top.px]=\"Math.min(vertical.y1!, vertical.y2!)\"\n          [style.height.px]=\"Math.abs(vertical.y2! - vertical.y1!)\"\n        ></div>\n        <div\n          class=\"inspector-distance-tag inspector-distance-tag--vertical\"\n          [style.left.px]=\"vertical.x!\"\n          [style.top.px]=\"(vertical.y1! + vertical.y2!) / 2\"\n        >\n          {{ formatValue(vertical.value) }}\n        </div>\n      }\n    }\n  }\n\n  @if (enabled()) {\n    @if (toolMode() === \"guides\") {\n      @if (guidePreview(); as preview) {\n        <div\n          class=\"inspector-guide inspector-guide--preview\"\n          [class.inspector-guide--vertical]=\"preview.orientation === 'vertical'\"\n          [class.inspector-guide--horizontal]=\"\n            preview.orientation === 'horizontal'\n          \"\n          [style.left.px]=\"\n            preview.orientation === 'vertical' ? preview.position : null\n          \"\n          [style.top.px]=\"\n            preview.orientation === 'horizontal' ? preview.position : null\n          \"\n          [style.--inspector-guide]=\"guideColor\"\n        >\n          <span class=\"inspector-guide-line\"></span>\n        </div>\n      }\n    }\n\n    @for (guide of guides(); track guide.id) {\n      <button\n        type=\"button\"\n        class=\"inspector-guide\"\n        [class.inspector-guide--vertical]=\"guide.orientation === 'vertical'\"\n        [class.inspector-guide--horizontal]=\"guide.orientation === 'horizontal'\"\n        [class.inspector-guide--selected]=\"selectedGuideId() === guide.id\"\n        [style.left.px]=\"\n          guide.orientation === 'vertical' ? guide.position : null\n        \"\n        [style.top.px]=\"\n          guide.orientation === 'horizontal' ? guide.position : null\n        \"\n        [style.--inspector-guide]=\"guideColor\"\n        [attr.aria-label]=\"\n          (guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal') +\n          ' guide at ' +\n          formatValue(guide.position) +\n          ' pixels'\n        \"\n        (pointerdown)=\"startGuideDrag($event, guide)\"\n      >\n        <span class=\"inspector-guide-line\"></span>\n      </button>\n    }\n\n    @for (distance of guideDistances(); track distance.orientation + \"-\" + distance.start + \"-\" + distance.end) {\n      <div\n        class=\"inspector-guide-distance\"\n        [class.inspector-guide-distance--vertical]=\"distance.orientation === 'vertical'\"\n        [class.inspector-guide-distance--horizontal]=\"distance.orientation === 'horizontal'\"\n        [style.left.px]=\"distance.orientation === 'vertical' ? distance.start : null\"\n        [style.top.px]=\"distance.orientation === 'horizontal' ? distance.start : null\"\n        [style.width.px]=\"distance.orientation === 'vertical' ? distance.value : null\"\n        [style.height.px]=\"distance.orientation === 'horizontal' ? distance.value : null\"\n        [style.--inspector-guide]=\"guideColor\"\n        aria-hidden=\"true\"\n      >\n        <span class=\"inspector-guide-distance__line\"></span>\n        <span class=\"inspector-guide-distance__tag\">\n          {{ formatValue(distance.value) }} px\n        </span>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{--inspector-panel: oklch(20% .012 280 / .92);--inspector-panel-edge: oklch(100% 0 0 / .08);--inspector-text: oklch(96% .005 280);--inspector-muted: oklch(70% .014 280);--inspector-faint: oklch(56% .012 280);--inspector-blue: oklch(68% .15 255);--inspector-blue-soft: oklch(68% .15 255 / .14);--inspector-orange: oklch(78% .14 70);--inspector-green: oklch(74% .15 150);--inspector-violet: oklch(72% .15 305);--inspector-radius: 8px;--inspector-shadow: 0 12px 32px oklch(6% .02 280 / .5);--inspector-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--inspector-ease: cubic-bezier(.16, 1, .3, 1);position:fixed;inset:0;z-index:2147;pointer-events:none;font-family:var(--inspector-font);color:var(--inspector-text);-webkit-font-smoothing:antialiased}.inspector-root{position:fixed;inset:0;pointer-events:none}.inspector-command-dialog{--command-surface: oklch(17.5% .012 280);--command-surface-active: oklch(25% .012 280);--command-edge: oklch(100% 0 0 / .08);--command-text: oklch(96% .005 280);--command-muted: oklch(68% .014 280);--command-faint: oklch(52% .012 280);--command-accent: oklch(72% .13 255);--command-danger: oklch(68% .17 25);box-sizing:border-box;inset-block-start:max(10vh,48px);width:min(420px,calc(100vw - 24px));max-width:none;max-height:min(360px,calc(100vh - 64px));margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--command-edge);border-radius:var(--inspector-radius);background:var(--command-surface);color:var(--command-text);box-shadow:var(--inspector-shadow);opacity:0;pointer-events:auto;transform:translateY(-4px);transition:opacity .1s ease,transform .1s ease,overlay .1s allow-discrete,display .1s allow-discrete;font-family:var(--inspector-font);-webkit-font-smoothing:antialiased}.inspector-command-dialog[open]{opacity:1;transform:none;transition-duration:.14s;transition-timing-function:var(--inspector-ease)}@starting-style{.inspector-command-dialog[open]{opacity:0;transform:translateY(-4px)}}.inspector-command-dialog::backdrop{background:#01010266}.inspector-command{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;min-height:0;max-height:min(360px,calc(100vh - 64px))}.inspector-command__search{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;border-bottom:1px solid var(--command-edge)}.inspector-command__pet-switcher{display:block;width:28px;height:28px;flex:0 0 auto;padding:0;overflow:hidden;border:0;border-radius:4px;background:transparent;cursor:pointer;opacity:.72;transition:opacity .14s var(--inspector-ease),transform .1s var(--inspector-ease)}.inspector-command__pet-sprite{display:block;width:500%;height:100%;max-width:none;image-rendering:pixelated;-webkit-user-select:none;user-select:none;transform:translate(0)}.inspector-command__search:focus-within .inspector-command__pet-switcher,.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{opacity:1}.inspector-command__pet-switcher:hover,.inspector-command__pet-switcher:focus-visible{background:#6aa7f41f}.inspector-command__pet-switcher:active{transform:scale(.94)}.inspector-command__pet-switcher:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}@media (prefers-reduced-motion: no-preference){.inspector-command__pet-sprite{animation:inspector-pet-cycle 1s steps(1,end) infinite}}@keyframes inspector-pet-cycle{0%,19.99%{transform:translate(0)}20%,39.99%{transform:translate(-20%)}40%,59.99%{transform:translate(-40%)}60%,79.99%{transform:translate(-60%)}80%,to{transform:translate(-80%)}}.inspector-command__search input,.inspector-command-row__rename{min-width:0;border:0;outline:0;background:transparent;color:var(--command-text);font:inherit}.inspector-command__search input{flex:1 1 auto;width:100%;height:39px;padding:0;font-size:13px;font-weight:450;line-height:1.3}.inspector-command__search input::placeholder{color:var(--command-faint);opacity:1}.inspector-command__search input::-webkit-search-cancel-button{display:none}.inspector-command__results{min-height:0;max-height:260px;overflow:auto;padding:5px;scrollbar-width:thin;scrollbar-color:oklch(100% 0 0 / .1) transparent}.inspector-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;min-height:34px;padding:0 7px 0 9px;border-radius:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.inspector-command-row.is-active{background:color-mix(in oklch,var(--command-surface-active) 92%,var(--command-accent));box-shadow:inset 0 0 0 1px #6aa7f452}.inspector-command-row.is-busy{cursor:wait;pointer-events:none;opacity:.7}.inspector-command-row__content{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}.inspector-command-row__name{flex:0 1 auto;min-width:3ch;overflow:hidden;color:var(--command-text);font-size:12px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.inspector-command-row__name bdi{direction:ltr;unicode-bidi:isolate}.inspector-command-row__activity{flex:0 0 auto;color:var(--command-faint);font-size:9px;font-weight:450;line-height:1;white-space:nowrap}.inspector-command-row.is-active .inspector-command-row__activity{color:#c2c3cc}.inspector-command-row--navigate{margin-top:4px;padding-top:5px;border-top:1px dashed var(--command-edge)}.inspector-command-row--navigate .inspector-command-row__name{color:color-mix(in oklch,var(--command-text) 78%,var(--command-accent))}.inspector-command-row--navigate .inspector-command-row__name:before{content:\"\\2192  \";color:var(--command-accent)}.inspector-command-row__actions,.inspector-command-row__confirm-actions{display:flex;align-items:center;gap:1px}.inspector-command-row__actions{opacity:0;pointer-events:none}.inspector-command-row.is-active .inspector-command-row__actions,.inspector-command-row:hover .inspector-command-row__actions,.inspector-command-row:focus-within .inspector-command-row__actions{opacity:1;pointer-events:auto}.inspector-command-row button{display:inline-grid;width:22px;min-height:22px;padding:0;place-items:center;border:0;border-radius:4px;background:transparent;color:var(--command-muted);cursor:pointer;font-family:inherit;font-size:10px;font-weight:550;line-height:1.2}.inspector-command-row button svg{width:11px;height:11px;fill:currentColor}.inspector-command-row button:hover{background:#ffffff12;color:var(--command-text)}.inspector-command-row button.is-danger{width:auto;padding:0 7px;color:var(--command-danger);font-size:11px}.inspector-command-row button.is-danger:hover{background:#ef66611f}.inspector-command-row__confirm-actions button:not(.is-danger){width:auto;padding:0 7px;font-size:11px}.inspector-command-row button:focus-visible,.inspector-command-row__rename:focus-visible{outline:1px solid var(--command-accent);outline-offset:1px}.inspector-command-row__confirm{grid-column:1;color:var(--command-text);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inspector-command-row__rename{grid-column:1 / -1;min-height:26px;padding-inline:6px;border:1px solid oklch(72% .13 255 / .4);border-radius:4px;background:#191a21;font-size:12px;font-weight:500}.inspector-command__message{margin:0;padding:16px 10px;color:var(--command-faint);font-size:12px;line-height:1.4;text-align:center}.inspector-command__message--error{padding:6px 10px;border-bottom:1px solid oklch(55% .08 25 / .3);background:#39191780;color:#f7cbc7;text-align:left;font-size:11px}.inspector-command__actions{display:flex;gap:2px;padding:4px;border-top:1px solid var(--command-edge)}.inspector-command-action{display:flex;flex:1 1 0;min-width:0;min-height:28px;align-items:center;justify-content:center;gap:4px;padding:0 4px;overflow:hidden;border:0;border-radius:5px;background:transparent;color:var(--command-muted);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1;text-align:left}.inspector-command-action svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}.inspector-command-action span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inspector-command-action:hover:not(:disabled){background:#ffffff0f;color:var(--command-text)}.inspector-command-action.is-active{background:#6aa7f421;color:#c2daf9}.inspector-command-action.is-selected,.inspector-command-action.is-selected:hover:not(:disabled){background:var(--command-surface-active);color:var(--command-text);box-shadow:inset 0 0 0 1px #6aa7f49e}.inspector-command-action:disabled{cursor:wait;opacity:.45}.inspector-command-action:focus-visible{outline:1px solid var(--command-accent);outline-offset:-1px}.inspector-visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inspector-checkpoint-toast{position:fixed;top:10px;left:50%;z-index:500;margin:0;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--inspector-panel-edge);border-radius:6px;background:#0f1016f5;color:var(--inspector-text);box-shadow:0 8px 24px #01000352;font-size:11px;font-weight:500;line-height:1.3;pointer-events:none;transform:translate(-50%);animation:inspector-toast-in .16s var(--inspector-ease) both}.inspector-checkpoint-toast:before{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:var(--inspector-blue);content:\"\"}.inspector-checkpoint-toast--error{border-color:#e2726b4d;background:#351311f0;color:#fed2cd}.inspector-checkpoint-toast--error:before{background:var(--command-danger, oklch(68% .17 25))}@keyframes inspector-toast-in{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion: reduce){.inspector-command-dialog{transition-duration:.01ms!important}.inspector-command-dialog,.inspector-command-dialog[open]{transform:none}.inspector-command__pet-switcher{transition:none}.inspector-command__pet-sprite{animation:none;transform:translate(0)}.inspector-checkpoint-toast{animation:none}}.inspector-box{position:fixed;box-sizing:border-box;pointer-events:none;border:1px solid var(--inspector-accent, var(--inspector-blue));background:color-mix(in srgb,var(--inspector-accent, var(--inspector-blue)) 8%,transparent)}.inspector-box--hover{opacity:.55}.inspector-box--selected{border-width:1.5px}.inspector-box--margin{border-color:#f0a646d1;background:#f0a64614}.inspector-box--padding{border-color:#5ac576d1;background:#5ac57614}.inspector-box--gap{border-color:#bb8aefb8;background:#bb8aef0d}.inspector-box--distance{border-style:dashed;border-color:#539af2b3;background:transparent}.inspector-label,.inspector-box-tag,.inspector-text-chip,.inspector-distance-tag,.inspector-guide-distance__tag{border:1px solid var(--inspector-panel-edge);border-radius:4px;background:#0e0f15c2;font-variant-numeric:tabular-nums;text-shadow:none}.inspector-label{position:absolute;left:0;top:0;transform:translateY(calc(-100% - 6px));max-width:min(380px,calc(100vw - 20px));padding:1px 3px;color:var(--inspector-text);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:9px;font-weight:500;line-height:1.2;white-space:nowrap}.inspector-box-tag{position:fixed;transform:translateY(-100%);padding:2px 4px;color:var(--inspector-text);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.inspector-box-tag__margin{color:#f5c076}.inspector-box-tag__padding{color:#95dfa4}.inspector-box-tag--gap{color:oklch(86% .09 305)}.inspector-box-tag--spacing{display:inline-flex;align-items:center;gap:3px;transform:translateY(0);white-space:nowrap}.inspector-box-tag__separator{color:var(--inspector-faint)}.inspector-text-chip{position:fixed;transform:translateY(-100%);display:inline-flex;gap:5px;align-items:center;padding:2px 4px;color:#e4e4e9;font-size:9px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none}.inspector-text-chip__swatch{width:7px;height:7px;border-radius:999px;border:1px solid oklch(100% 0 0 / .16);flex:0 0 auto}.inspector-connector{position:fixed;border-color:#539af2b8;border-style:dashed;pointer-events:none}.inspector-connector--vertical{border-left-width:1px;width:0}.inspector-connector--horizontal{border-top-width:1px;height:0}.inspector-distance-line{position:fixed;background:var(--inspector-blue);pointer-events:none}.inspector-distance-line--horizontal{height:1px}.inspector-distance-line--vertical{width:1px}.inspector-distance-tag{position:fixed;transform:translate(-50%,-50%);padding:2px 4px;border-color:#539af247;background:#0e0f15b8;color:var(--inspector-text);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-size:9px;font-weight:520;line-height:1;pointer-events:none}.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}.inspector-guide-distance{position:fixed;z-index:2;pointer-events:none}.inspector-guide-distance--vertical{top:50%;height:1px}.inspector-guide-distance--horizontal{left:50%;width:1px}.inspector-guide-distance__line{position:absolute;background:color-mix(in srgb,var(--inspector-guide, #ff7a00) 72%,transparent)}.inspector-guide-distance--vertical .inspector-guide-distance__line{inset:0;height:1px}.inspector-guide-distance--horizontal .inspector-guide-distance__line{inset:0;width:1px}.inspector-guide-distance__line:before,.inspector-guide-distance__line:after{position:absolute;content:\"\";background:var(--inspector-guide, #ff7a00)}.inspector-guide-distance--vertical .inspector-guide-distance__line:before,.inspector-guide-distance--vertical .inspector-guide-distance__line:after{top:-2px;width:1px;height:5px}.inspector-guide-distance--vertical .inspector-guide-distance__line:before{left:0}.inspector-guide-distance--vertical .inspector-guide-distance__line:after{right:0}.inspector-guide-distance--horizontal .inspector-guide-distance__line:before,.inspector-guide-distance--horizontal .inspector-guide-distance__line:after{left:-2px;width:5px;height:1px}.inspector-guide-distance--horizontal .inspector-guide-distance__line:before{top:0}.inspector-guide-distance--horizontal .inspector-guide-distance__line:after{bottom:0}.inspector-guide-distance__tag{position:absolute;padding:2px 4px;border-color:color-mix(in srgb,var(--inspector-guide, #ff7a00) 48%,transparent);background:#0e0f15eb;color:var(--inspector-text);box-shadow:0 1px 4px #01000357;font-size:9px;font-weight:520;line-height:1;white-space:nowrap}.inspector-guide-distance--vertical .inspector-guide-distance__tag{left:50%;top:0;transform:translate(-50%,-50%)}.inspector-guide-distance--horizontal .inspector-guide-distance__tag{left:0;top:50%;transform:translate(-50%,-50%)}@media (min-width: 769px) and (min-height: 769px){:host{--inspector-radius: 14px;--inspector-shadow: 0 21px 56px oklch(6% .02 280 / .5)}.inspector-command-dialog{inset-block-start:max(10vh,84px);width:min(735px,calc(100vw - 42px));max-height:min(630px,calc(100vh - 112px))}.inspector-command{max-height:min(630px,calc(100vh - 112px))}.inspector-command__search{gap:14px;min-height:70px;padding:0 19.25px}.inspector-command__pet-switcher{width:42px;height:42px}.inspector-command__search input{height:68.25px;font-size:22.75px}.inspector-command__results{max-height:455px;padding:8.75px}.inspector-command-row{gap:10.5px;min-height:59.5px;padding:0 12.25px 0 15.75px;border-radius:8.75px}.inspector-command-row__content{gap:10.5px}.inspector-command-row__name,.inspector-command-row__confirm{font-size:21px}.inspector-command-row__activity{font-size:15.75px}.inspector-command-row__actions,.inspector-command-row__confirm-actions{gap:1.75px}.inspector-command-row button{width:38.5px;min-height:38.5px;border-radius:7px;font-size:17.5px}.inspector-command-row button svg{width:19.25px;height:19.25px}.inspector-command-row button.is-danger,.inspector-command-row__confirm-actions button:not(.is-danger){padding:0 12.25px;font-size:19.25px}.inspector-command-row__rename{min-height:45.5px;padding-inline:10.5px;border-radius:7px;font-size:21px}.inspector-command__message{padding:28px 17.5px;font-size:21px}.inspector-command__message--error{padding:10.5px 17.5px;font-size:19.25px}.inspector-command__actions{gap:3.5px;padding:7px}.inspector-command-action{min-height:49px;gap:7px;padding:0 7px;border-radius:8.75px;font-size:17.5px}.inspector-command-action svg{width:19.25px;height:19.25px}.inspector-checkpoint-toast{top:14px;padding:7px 10px;font-size:13px}.inspector-label{transform:translateY(calc(-100% - 10.5px));max-width:min(665px,calc(100vw - 35px));padding:2px 4px;font-size:13px}.inspector-box-tag{padding:3px 5px;font-size:15.75px}.inspector-box-tag--spacing{gap:5px;transform:translateY(0)}.inspector-text-chip{gap:8.75px;padding:3px 5px;font-size:15.75px}.inspector-text-chip__swatch{width:12.25px;height:12.25px}.inspector-distance-tag,.inspector-guide-distance__tag{padding:3px 5px;font-size:15.75px}.inspector-guide--vertical{width:24.5px}.inspector-guide--horizontal{height:24.5px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]